Skip to content

Commit 076ea8d

Browse files
MidnightCrowingMidnightCrowing
committed
feat(jetv-ui): rename components and add gallery script
1 parent 03a8147 commit 076ea8d

88 files changed

Lines changed: 5319 additions & 1389 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎jetv-ui/gallery/App.vue‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script lang="ts" setup>
2+
import { RouterView, useRouter } from 'vue-router'
3+
4+
import { JeFrame } from '../src/index'
5+
import SidebarMenuItem from './components/SidebarMenuItem.vue'
6+
import { routes } from './router'
7+
8+
const router = useRouter()
9+
10+
interface MenuItem {
11+
value: string
12+
label: string
13+
link: string
14+
}
15+
16+
const componentsMenuItems: MenuItem[] = routes
17+
.filter(route => !route.meta?.hiddenInMenu && route.name) // 只显示有 name 的路由
18+
.map(route => ({
19+
value: route.name!,
20+
label: route.meta.label || route.name!,
21+
link: route.path,
22+
}))
23+
24+
function goTo(url: string) {
25+
router.push(url)
26+
}
27+
</script>
28+
29+
<template>
30+
<JeFrame
31+
type="primary"
32+
flex="~ row items-start justify-start"
33+
size-full
34+
>
35+
<JeFrame
36+
type="secondary"
37+
shrink-0
38+
h-full w="250px" p="t-20px" box-border
39+
flex="~ col items-center justify-start" gap="20px"
40+
>
41+
<span
42+
text="h1" cursor-pointer
43+
@click="goTo('/')"
44+
>
45+
JetV-ui Gallery
46+
</span>
47+
48+
<JeFrame
49+
type="secondary"
50+
w-full p="x-0px" box-border
51+
flex="~ col items-center justify-start"
52+
overflow-auto
53+
>
54+
<div
55+
w-full p="x-10px y-5px" box-border
56+
text="default-semibold"
57+
>
58+
Concepts
59+
</div>
60+
<SidebarMenuItem value="introduction" label="Introduction" link="/introduction" />
61+
<SidebarMenuItem value="installation" label="Installation" link="/installation" />
62+
63+
<div
64+
w-full p="x-10px t-10px b-5px" box-border
65+
text="default-semibold"
66+
>
67+
Components
68+
</div>
69+
<SidebarMenuItem
70+
v-for="item in componentsMenuItems"
71+
:key="item.value"
72+
:value="item.value"
73+
:label="item.label"
74+
:link="item.link"
75+
/>
76+
</JeFrame>
77+
</JeFrame>
78+
79+
<div grow h-full p="x-10px" box-border>
80+
<RouterView />
81+
</div>
82+
</JeFrame>
83+
</template>
84+
85+
<style lang="scss" scoped>
86+
.menu-item.active {
87+
@apply light:bg-$blue-11 dark:bg-$blue-2;
88+
}
89+
</style>

‎jetv-ui/gallery/components/GalleryCard.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
import { JeFrame } from '../../src'
3+
4+
withDefaults(defineProps<{
5+
title: string
6+
type?: 'primary' | 'secondary'
7+
}>(), {
8+
type: 'secondary',
9+
})
10+
</script>
11+
12+
<template>
13+
<div
14+
flex="~ col items-start justify-center" gap="8px"
15+
>
16+
<span v-if="title" text="h2" m="l-5px">
17+
{{ title }}
18+
</span>
19+
<JeFrame
20+
:type="type"
21+
w-full box-border p="20px" rounded="5px"
22+
flex="~ col items-start" gap="20px"
23+
:style="{ boxShadow: '0 2px 6px rgba(0, 0, 0, 0.3)' }"
24+
>
25+
<slot />
26+
</JeFrame>
27+
</div>
28+
</template>

‎jetv-ui/gallery/components/ShowcaseFrame.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts" setup>
2+
import { JeFrame } from '../../src'
3+
</script>
4+
5+
<template>
6+
<JeFrame
7+
type="primary" flex="~ col" gap="y-20px" h-full p="y-10px"
8+
box-border overflow-auto
9+
>
10+
<slot />
11+
</JeFrame>
12+
</template>
13+
14+
<style lang="scss" scoped>
15+
16+
</style>

‎jetv-ui/gallery/components/SidebarMenuItem.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts" setup>
2+
import { useRouter } from 'vue-router'
3+
4+
defineProps<{
5+
value: string
6+
label: string
7+
link: string
8+
}>()
9+
10+
const router = useRouter()
11+
</script>
12+
13+
<template>
14+
<div
15+
class="sidebar-menu-item"
16+
:class="{ active: $route.fullPath === link }"
17+
:tabindex="0"
18+
w-full box-border
19+
b="solid x-0 y-2px transparent" p="x-20px y-6px"
20+
focus-visible:b="light:$blue-4 dark:$blue-6" focus-visible:outline-0
21+
cursor-pointer
22+
@click="router.push(value)"
23+
@keydown.enter="router.push(value)"
24+
>
25+
{{ label }}
26+
</div>
27+
</template>
28+
29+
<style lang="scss" scoped>
30+
.sidebar-menu-item.active {
31+
@apply light:bg-$blue-11 dark:bg-$blue-2;
32+
}
33+
</style>

‎jetv-ui/gallery/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="dark">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>JetV-ui Gallery</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="main.ts"></script>
11+
</body>
12+
</html>

‎jetv-ui/gallery/main.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
html,
2+
body,
3+
#app {
4+
margin: 0;
5+
padding: 0;
6+
width: 100%;
7+
height: 100%;
8+
}

‎jetv-ui/gallery/main.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import 'uno.css'
2+
import './main.scss'
3+
4+
import { createApp } from 'vue'
5+
6+
import App from './App.vue'
7+
import router from './router'
8+
9+
const app = createApp(App)
10+
app.use(router)
11+
app.mount('#app')

‎jetv-ui/gallery/pages/BannerGallery.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<script lang="ts" setup>
2+
import { JeBanner } from '../../src'
3+
import GalleryCard from '../components/GalleryCard.vue'
4+
import ShowcaseFrame from '../components/ShowcaseFrame.vue'
5+
6+
function handleClick() {
7+
window.alert('Action clicked!')
8+
}
9+
</script>
10+
11+
<template>
12+
<ShowcaseFrame>
13+
<GalleryCard title="Default">
14+
<JeBanner state="info">
15+
Info Example
16+
</JeBanner>
17+
<JeBanner state="success">
18+
Success Example
19+
</JeBanner>
20+
<JeBanner state="warning">
21+
Warning Example
22+
</JeBanner>
23+
<JeBanner state="error">
24+
Error Example
25+
</JeBanner>
26+
</GalleryCard>
27+
28+
<GalleryCard title="Type">
29+
<div grid="~ cols-[auto_1fr] items-center" gap="10px" w-full>
30+
<div text="default-semibold">
31+
default
32+
</div>
33+
<JeBanner state="info" type="default">
34+
This is the default type banner, used to display general information.
35+
</JeBanner>
36+
37+
<div text="default-semibold">
38+
inline
39+
</div>
40+
<JeBanner state="info" type="inline">
41+
This is the inline type banner, suitable for embedding complex content.
42+
<ul>
43+
<li>Supports lists</li>
44+
<li>Supports nested tags</li>
45+
<li>Supports custom styles</li>
46+
</ul>
47+
<div>For example: nested <strong>HTML</strong> content</div>
48+
</JeBanner>
49+
</div>
50+
</GalleryCard>
51+
52+
<GalleryCard title="Actions">
53+
<JeBanner
54+
state="info"
55+
type="default"
56+
:actions="[{
57+
label: 'Action',
58+
onClick: handleClick,
59+
}]"
60+
>
61+
Click the action button
62+
</JeBanner>
63+
</GalleryCard>
64+
</ShowcaseFrame>
65+
</template>

‎jetv-ui/gallery/pages/ButtonGallery.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script lang="ts" setup>
2+
import { JeButton, JeSlimButton } from '../../src'
3+
import GalleryCard from '../components/GalleryCard.vue'
4+
import ShowcaseFrame from '../components/ShowcaseFrame.vue'
5+
</script>
6+
7+
<template>
8+
<ShowcaseFrame>
9+
<GalleryCard title="Default">
10+
<JeButton>Example</JeButton>
11+
</GalleryCard>
12+
13+
<GalleryCard title="Type">
14+
<div flex="~ row items-center" gap="x-10px">
15+
<JeButton type="primary">
16+
primary
17+
</JeButton>
18+
<JeButton type="secondary">
19+
Secondary
20+
</JeButton>
21+
<JeButton type="secondary-alt">
22+
Secondary Alt
23+
</JeButton>
24+
</div>
25+
</GalleryCard>
26+
27+
<GalleryCard title="Disabled">
28+
<div grid="~ cols-2" gap="10px">
29+
<JeButton type="primary">
30+
Enabled state
31+
</JeButton>
32+
<JeButton type="primary" disabled>
33+
Disabled state
34+
</JeButton>
35+
<JeButton type="secondary">
36+
Enabled state
37+
</JeButton>
38+
<JeButton type="secondary" disabled>
39+
Disabled state
40+
</JeButton>
41+
</div>
42+
</GalleryCard>
43+
44+
<GalleryCard title="Slim">
45+
<div flex="~ col gap-4">
46+
<!-- Default group -->
47+
<div flex="~ row gap-3">
48+
<JeSlimButton type="default">
49+
Default Type
50+
</JeSlimButton>
51+
<JeSlimButton type="default" disabled>
52+
Default Disabled
53+
</JeSlimButton>
54+
</div>
55+
56+
<!-- Alt group -->
57+
<div flex="~ row gap-3">
58+
<JeSlimButton type="alt">
59+
Alt Type
60+
</JeSlimButton>
61+
<JeSlimButton type="alt" disabled>
62+
Alt Disabled
63+
</JeSlimButton>
64+
</div>
65+
</div>
66+
</GalleryCard>
67+
</showcaseframe>
68+
</template>

‎jetv-ui/gallery/pages/CardGallery.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts" setup>
2+
import { JeCard, JeSimpleCard } from '../../src'
3+
import GalleryCard from '../components/GalleryCard.vue'
4+
import ShowcaseFrame from '../components/ShowcaseFrame.vue'
5+
</script>
6+
7+
<template>
8+
<ShowcaseFrame>
9+
<GalleryCard title="Default">
10+
<JeCard p="20px">
11+
This is a default card, used to display general content or information.
12+
</JeCard>
13+
</GalleryCard>
14+
15+
<GalleryCard title="SimpleCard">
16+
<JeSimpleCard p="20px">
17+
This is a simple card, suitable for presenting concise and focused content.
18+
</JeSimpleCard>
19+
</GalleryCard>
20+
</ShowcaseFrame>
21+
</template>

0 commit comments

Comments
 (0)