@veristone/nuxt-v-app 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/components/V/A/Card.vue +115 -91
- package/app/components/V/A/Table/README.md +31 -13
- package/app/components/V/A/Table/index.vue +75 -48
- package/app/components/Va/Dashboard/VaDashboardPricePlan.vue +72 -87
- package/app/pages/playground/index.vue +123 -106
- package/app/pages/playground/tables.vue +427 -215
- package/package.json +2 -2
|
@@ -1,102 +1,87 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
interface Feature {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
label: string;
|
|
4
|
+
available: boolean;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
export interface PricePlanProps {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
name: string;
|
|
9
|
+
description: string;
|
|
10
|
+
price: string;
|
|
11
|
+
priceSuffix?: string;
|
|
12
|
+
per?: string;
|
|
13
|
+
features: Feature[];
|
|
14
|
+
current?: boolean;
|
|
15
|
+
badge?: string;
|
|
16
|
+
buttonLabel?: string;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
defineProps<PricePlanProps>()
|
|
19
|
+
defineProps<PricePlanProps>();
|
|
20
20
|
</script>
|
|
21
21
|
|
|
22
22
|
<template>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
v-if="badge"
|
|
33
|
-
class="absolute -top-3 left-1/2 -translate-x-1/2"
|
|
34
|
-
>
|
|
35
|
-
<UBadge
|
|
36
|
-
:label="badge"
|
|
37
|
-
variant="solid"
|
|
38
|
-
color="success"
|
|
39
|
-
size="sm"
|
|
40
|
-
/>
|
|
41
|
-
</div>
|
|
23
|
+
<UCard
|
|
24
|
+
:class="[
|
|
25
|
+
'relative transition-all duration-200',
|
|
26
|
+
current ? 'ring-2 ring-success bg-success/5' : ' ',
|
|
27
|
+
]"
|
|
28
|
+
>
|
|
29
|
+
<div v-if="badge" class="absolute -top-3 left-1/2 -translate-x-1/2">
|
|
30
|
+
<UBadge :label="badge" variant="solid" color="success" size="sm" />
|
|
31
|
+
</div>
|
|
42
32
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
33
|
+
<div class="text-center">
|
|
34
|
+
<div>
|
|
35
|
+
<h3 class="text-xl font-bold text-highlighted">
|
|
36
|
+
{{ name }}
|
|
37
|
+
</h3>
|
|
38
|
+
<p class="text-dimmed mt-1">
|
|
39
|
+
{{ description }}
|
|
40
|
+
</p>
|
|
41
|
+
</div>
|
|
52
42
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
v-if="per"
|
|
66
|
-
class="text-sm text-muted"
|
|
67
|
-
>
|
|
68
|
-
{{ per }}
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
43
|
+
<div class="border-y border-default my-4 py-4">
|
|
44
|
+
<div class="mb-4">
|
|
45
|
+
<div class="text-3xl font-bold text-success space-x-2">
|
|
46
|
+
<span>{{ price }}</span>
|
|
47
|
+
<span v-if="priceSuffix" class="text-base text-toned">{{
|
|
48
|
+
priceSuffix
|
|
49
|
+
}}</span>
|
|
50
|
+
</div>
|
|
51
|
+
<div v-if="per" class="text-sm text-muted">
|
|
52
|
+
{{ per }}
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
71
55
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
56
|
+
<UButton
|
|
57
|
+
:label="buttonLabel"
|
|
58
|
+
:variant="current ? 'outline' : 'solid'"
|
|
59
|
+
:color="current ? 'success' : 'success'"
|
|
60
|
+
class="w-full justify-center"
|
|
61
|
+
:disabled="current"
|
|
62
|
+
:icon="current ? 'i-lucide-check' : 'i-lucide-arrow-up-right'"
|
|
63
|
+
/>
|
|
64
|
+
</div>
|
|
81
65
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
66
|
+
<div class="space-y-4 mt-8">
|
|
67
|
+
<div
|
|
68
|
+
v-for="(feature, i) in features"
|
|
69
|
+
:key="i"
|
|
70
|
+
class="flex items-center justify-start gap-2 text-sm"
|
|
71
|
+
>
|
|
72
|
+
<UIcon
|
|
73
|
+
:name="feature.available ? 'i-lucide-check' : 'i-lucide-x'"
|
|
74
|
+
:class="feature.available ? 'text-success' : 'text-error'"
|
|
75
|
+
size="16"
|
|
76
|
+
/>
|
|
77
|
+
<span
|
|
78
|
+
:class="{
|
|
79
|
+
'text-dimmed': !feature.available,
|
|
80
|
+
}"
|
|
81
|
+
>{{ feature.label }}</span
|
|
82
|
+
>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</UCard>
|
|
102
87
|
</template>
|
|
@@ -1,115 +1,132 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
definePageMeta({
|
|
3
|
-
|
|
4
|
-
})
|
|
3
|
+
title: "Component Playground",
|
|
4
|
+
});
|
|
5
5
|
|
|
6
6
|
const categories = [
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
7
|
+
{
|
|
8
|
+
title: "Cards",
|
|
9
|
+
description:
|
|
10
|
+
"15 card components for data display including KPI cards, chart cards, and table cards.",
|
|
11
|
+
to: "/playground/cards",
|
|
12
|
+
icon: "i-lucide-credit-card",
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
title: "Charts",
|
|
16
|
+
description:
|
|
17
|
+
"33 chart components including bar charts, line charts, donut charts, and area charts.",
|
|
18
|
+
to: "/playground/charts",
|
|
19
|
+
icon: "i-lucide-bar-chart-3",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
title: "Blocks",
|
|
23
|
+
description:
|
|
24
|
+
"5 block components for layout composition including grid layouts and filter bars.",
|
|
25
|
+
to: "/playground/blocks",
|
|
26
|
+
icon: "i-lucide-layout-template",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
title: "Dashboard Widgets",
|
|
30
|
+
description:
|
|
31
|
+
"6 dashboard widgets including KPI cards, navigation, pricing plans, and usage charts.",
|
|
32
|
+
to: "/playground/dashboard",
|
|
33
|
+
icon: "i-lucide-layout-dashboard",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
title: "Layout",
|
|
37
|
+
description:
|
|
38
|
+
"Layout components including side navigation, user menus, and slideovers",
|
|
39
|
+
to: "/playground/layout",
|
|
40
|
+
icon: "i-lucide-layout",
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
title: "Tables",
|
|
44
|
+
description:
|
|
45
|
+
"Full-featured data tables with search, sort, filter, export, selection, and pagination.",
|
|
46
|
+
to: "/playground/tables",
|
|
47
|
+
icon: "i-lucide-table-2",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
title: "Base Components",
|
|
51
|
+
description:
|
|
52
|
+
"Core V/A components including cards, stats, badges, navigation, and data display.",
|
|
53
|
+
to: "/playground/base",
|
|
54
|
+
icon: "i-lucide-box",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
title: "CRUD Components",
|
|
58
|
+
description:
|
|
59
|
+
"VACrudCreate, VACrudUpdate, and VACrudDelete for modal-based CRUD operations.",
|
|
60
|
+
to: "/playground/crud",
|
|
61
|
+
icon: "i-lucide-database",
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
title: "Buttons",
|
|
65
|
+
description:
|
|
66
|
+
"Action buttons for CRUD operations, navigation, and data export.",
|
|
67
|
+
to: "/playground/buttons",
|
|
68
|
+
icon: "i-lucide-mouse-pointer-click",
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
title: "Formatters",
|
|
72
|
+
description:
|
|
73
|
+
"Data formatting components for currency, dates, percentages, and key-value displays.",
|
|
74
|
+
to: "/playground/formatters",
|
|
75
|
+
icon: "i-lucide-text-cursor-input",
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
title: "States",
|
|
79
|
+
description:
|
|
80
|
+
"Loading, empty, and error state components for consistent UI feedback.",
|
|
81
|
+
to: "/playground/states",
|
|
82
|
+
icon: "i-lucide-loader",
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
title: "Modals",
|
|
86
|
+
description:
|
|
87
|
+
"Modal dialogs and slideover panels for confirmations, forms, and detailed views.",
|
|
88
|
+
to: "/playground/modals",
|
|
89
|
+
icon: "i-lucide-panel-right",
|
|
90
|
+
},
|
|
91
|
+
];
|
|
80
92
|
</script>
|
|
81
93
|
|
|
82
94
|
<template>
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
95
|
+
<UDashboardPanel grow>
|
|
96
|
+
<UContainer>
|
|
97
|
+
<div class="py-8">
|
|
98
|
+
<h1 class="text-3xl font-bold mb-4">Component Playground</h1>
|
|
99
|
+
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
|
100
|
+
Explore the Veristone component library. This playground showcases 60+
|
|
101
|
+
migrated components plus 36 base V/A components across 9 categories.
|
|
102
|
+
</p>
|
|
91
103
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
104
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
105
|
+
<ClientOnly v-for="category in categories" :key="category.to">
|
|
106
|
+
<UCard class="transition-shadow">
|
|
107
|
+
<template #header>
|
|
108
|
+
<div class="flex items-center gap-3">
|
|
109
|
+
<div
|
|
110
|
+
class="p-2 rounded-lg bg-primary-50 dark:bg-primary-900/20"
|
|
111
|
+
>
|
|
112
|
+
<UIcon
|
|
113
|
+
:name="category.icon"
|
|
114
|
+
class="w-5 h-5 text-primary-500"
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
<h2 class="text-xl font-semibold">{{ category.title }}</h2>
|
|
118
|
+
</div>
|
|
119
|
+
</template>
|
|
120
|
+
<p class="mb-4 text-gray-600 dark:text-gray-400">
|
|
121
|
+
{{ category.description }}
|
|
122
|
+
</p>
|
|
123
|
+
<UButton :to="category.to" color="primary" variant="soft">
|
|
124
|
+
View {{ category.title }}
|
|
125
|
+
</UButton>
|
|
126
|
+
</UCard>
|
|
127
|
+
</ClientOnly>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</UContainer>
|
|
131
|
+
</UDashboardPanel>
|
|
115
132
|
</template>
|