@youcan/celeste 0.6.43 → 0.6.44
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/dist/celeste.css +117 -7
- package/dist/cjs/checkbox-card.js +110 -0
- package/dist/cjs/checkbox-label.js +1 -4
- package/dist/components/checkbox/checkbox-label.d.ts +0 -3
- package/dist/es/checkbox-card.js +111 -0
- package/dist/es/checkbox-label.js +1 -4
- package/package.json +3 -3
- package/src/components/checkbox/checkbox-card.vue +222 -0
- package/src/components/checkbox/checkbox-label.vue +0 -3
- package/src/components/checkbox/checkbox.vue +1 -0
- package/src/components/checkbox/stories/checkbox-card.stories.ts +304 -0
|
@@ -0,0 +1,304 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
|
|
3
|
+
import type { Meta, StoryObj } from '@storybook/vue3-vite';
|
|
4
|
+
import Badge from '@/components/badge/badge.vue';
|
|
5
|
+
import CheckboxCard from '../checkbox-card.vue';
|
|
6
|
+
import Checkbox from '../checkbox.vue';
|
|
7
|
+
|
|
8
|
+
const meta: Meta<typeof CheckboxCard> = {
|
|
9
|
+
title: 'Components/Checkbox/CheckboxCard',
|
|
10
|
+
component: CheckboxCard,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default meta;
|
|
14
|
+
|
|
15
|
+
type Story = StoryObj<typeof CheckboxCard>;
|
|
16
|
+
|
|
17
|
+
export const Default: Story = {
|
|
18
|
+
args: {},
|
|
19
|
+
|
|
20
|
+
render: args => ({
|
|
21
|
+
components: { CheckboxCard, Checkbox },
|
|
22
|
+
setup() {
|
|
23
|
+
return { args };
|
|
24
|
+
},
|
|
25
|
+
template: `
|
|
26
|
+
<div style="display: flex; justify-content: center;">
|
|
27
|
+
<div style="max-width: 400px;">
|
|
28
|
+
<CheckboxCard v-bind="args">
|
|
29
|
+
<Checkbox />
|
|
30
|
+
|
|
31
|
+
<template #label>
|
|
32
|
+
Basic Label
|
|
33
|
+
</template>
|
|
34
|
+
</CheckboxCard>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
`,
|
|
38
|
+
}),
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export const WithIcon: Story = {
|
|
42
|
+
args: {},
|
|
43
|
+
|
|
44
|
+
render: args => ({
|
|
45
|
+
components: { CheckboxCard, Checkbox },
|
|
46
|
+
setup() {
|
|
47
|
+
return { args };
|
|
48
|
+
},
|
|
49
|
+
template: `
|
|
50
|
+
<div style="display: flex; justify-content: center;">
|
|
51
|
+
<div style="max-width: 400px;">
|
|
52
|
+
<CheckboxCard v-bind="args">
|
|
53
|
+
<Checkbox />
|
|
54
|
+
|
|
55
|
+
<template #icon>
|
|
56
|
+
<i i-celeste-user-6-line />
|
|
57
|
+
</template>
|
|
58
|
+
|
|
59
|
+
<template #label>
|
|
60
|
+
Settings
|
|
61
|
+
</template>
|
|
62
|
+
|
|
63
|
+
<template #sublabel>
|
|
64
|
+
(Configure options)
|
|
65
|
+
</template>
|
|
66
|
+
|
|
67
|
+
<template #description>
|
|
68
|
+
Customize your application settings and preferences.
|
|
69
|
+
</template>
|
|
70
|
+
</CheckboxCard>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
`,
|
|
74
|
+
}),
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export const WithImage: Story = {
|
|
78
|
+
args: {},
|
|
79
|
+
|
|
80
|
+
render: args => ({
|
|
81
|
+
components: { CheckboxCard, Checkbox },
|
|
82
|
+
setup() {
|
|
83
|
+
return { args };
|
|
84
|
+
},
|
|
85
|
+
template: `
|
|
86
|
+
<div style="display: flex; justify-content: center;">
|
|
87
|
+
<div style="max-width: 400px;">
|
|
88
|
+
<CheckboxCard v-bind="args">
|
|
89
|
+
<Checkbox />
|
|
90
|
+
|
|
91
|
+
<template #image>
|
|
92
|
+
<img src="https://placehold.co/48" alt="Preview" />
|
|
93
|
+
</template>
|
|
94
|
+
|
|
95
|
+
<template #label>
|
|
96
|
+
Image Option
|
|
97
|
+
</template>
|
|
98
|
+
|
|
99
|
+
<template #description>
|
|
100
|
+
An option with an image preview.
|
|
101
|
+
</template>
|
|
102
|
+
</CheckboxCard>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
`,
|
|
106
|
+
}),
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export const WithBadge: Story = {
|
|
110
|
+
args: {},
|
|
111
|
+
|
|
112
|
+
render: args => ({
|
|
113
|
+
components: { CheckboxCard, Checkbox, Badge },
|
|
114
|
+
setup() {
|
|
115
|
+
return { args };
|
|
116
|
+
},
|
|
117
|
+
template: `
|
|
118
|
+
<div style="display: flex; justify-content: center;">
|
|
119
|
+
<div style="max-width: 400px;">
|
|
120
|
+
<CheckboxCard v-bind="args">
|
|
121
|
+
<Checkbox />
|
|
122
|
+
|
|
123
|
+
<template #label>
|
|
124
|
+
Label
|
|
125
|
+
</template>
|
|
126
|
+
|
|
127
|
+
<template #sublabel>
|
|
128
|
+
(Sublabel)
|
|
129
|
+
</template>
|
|
130
|
+
|
|
131
|
+
<template #badge>
|
|
132
|
+
<Badge
|
|
133
|
+
label="NEW"
|
|
134
|
+
state="information"
|
|
135
|
+
variant="light"
|
|
136
|
+
size="sm"
|
|
137
|
+
/>
|
|
138
|
+
</template>
|
|
139
|
+
|
|
140
|
+
<template #description>
|
|
141
|
+
Access premium features with advanced capabilities.
|
|
142
|
+
</template>
|
|
143
|
+
</CheckboxCard>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
`,
|
|
147
|
+
}),
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
export const Complete: Story = {
|
|
151
|
+
args: {},
|
|
152
|
+
|
|
153
|
+
render: args => ({
|
|
154
|
+
components: { CheckboxCard, Checkbox, Badge },
|
|
155
|
+
setup() {
|
|
156
|
+
return { args };
|
|
157
|
+
},
|
|
158
|
+
template: `
|
|
159
|
+
<div style="display: flex; justify-content: center;">
|
|
160
|
+
<div style="max-width: 400px;">
|
|
161
|
+
<CheckboxCard v-bind="args">
|
|
162
|
+
<Checkbox />
|
|
163
|
+
|
|
164
|
+
<template #icon>
|
|
165
|
+
<i i-celeste-user-6-line />
|
|
166
|
+
</template>
|
|
167
|
+
|
|
168
|
+
<template #label>
|
|
169
|
+
Complete
|
|
170
|
+
</template>
|
|
171
|
+
|
|
172
|
+
<template #sublabel>
|
|
173
|
+
(All features)
|
|
174
|
+
</template>
|
|
175
|
+
|
|
176
|
+
<template #badge>
|
|
177
|
+
<Badge
|
|
178
|
+
label="FEATURED"
|
|
179
|
+
state="success"
|
|
180
|
+
variant="light"
|
|
181
|
+
size="sm"
|
|
182
|
+
/>
|
|
183
|
+
</template>
|
|
184
|
+
|
|
185
|
+
<template #description>
|
|
186
|
+
This example showcases all available slots and features of the checkbox card component.
|
|
187
|
+
</template>
|
|
188
|
+
</CheckboxCard>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
`,
|
|
192
|
+
}),
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
export const Disabled: Story = {
|
|
196
|
+
args: {
|
|
197
|
+
disabled: true,
|
|
198
|
+
},
|
|
199
|
+
|
|
200
|
+
render: args => ({
|
|
201
|
+
components: { CheckboxCard, Checkbox, Badge },
|
|
202
|
+
setup() {
|
|
203
|
+
return { args };
|
|
204
|
+
},
|
|
205
|
+
template: `
|
|
206
|
+
<div style="display: flex; justify-content: center;">
|
|
207
|
+
<div style="max-width: 400px;">
|
|
208
|
+
<CheckboxCard v-bind="args">
|
|
209
|
+
<Checkbox disabled />
|
|
210
|
+
|
|
211
|
+
<template #icon>
|
|
212
|
+
<i i-celeste-lock-line />
|
|
213
|
+
</template>
|
|
214
|
+
|
|
215
|
+
<template #label>
|
|
216
|
+
Disabled Option
|
|
217
|
+
</template>
|
|
218
|
+
|
|
219
|
+
<template #description>
|
|
220
|
+
This option is currently disabled and cannot be selected.
|
|
221
|
+
</template>
|
|
222
|
+
</CheckboxCard>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
`,
|
|
226
|
+
}),
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
export const Multiple: Story = {
|
|
230
|
+
args: {},
|
|
231
|
+
|
|
232
|
+
render: args => ({
|
|
233
|
+
components: { CheckboxCard, Checkbox, Badge },
|
|
234
|
+
setup() {
|
|
235
|
+
return { args };
|
|
236
|
+
},
|
|
237
|
+
template: `
|
|
238
|
+
<div style="display: flex; justify-content: center;">
|
|
239
|
+
<div style="max-width: 400px; display: flex; flex-direction: column; gap: 1rem;">
|
|
240
|
+
<CheckboxCard v-bind="args">
|
|
241
|
+
<Checkbox />
|
|
242
|
+
|
|
243
|
+
<template #icon>
|
|
244
|
+
<i i-celeste-mail-line />
|
|
245
|
+
</template>
|
|
246
|
+
|
|
247
|
+
<template #label>
|
|
248
|
+
Email Notifications
|
|
249
|
+
</template>
|
|
250
|
+
|
|
251
|
+
<template #description>
|
|
252
|
+
Receive updates via email.
|
|
253
|
+
</template>
|
|
254
|
+
</CheckboxCard>
|
|
255
|
+
|
|
256
|
+
<CheckboxCard v-bind="args">
|
|
257
|
+
<Checkbox checked />
|
|
258
|
+
|
|
259
|
+
<template #icon>
|
|
260
|
+
<i i-celeste-notification-line />
|
|
261
|
+
</template>
|
|
262
|
+
|
|
263
|
+
<template #label>
|
|
264
|
+
Push Notifications
|
|
265
|
+
</template>
|
|
266
|
+
|
|
267
|
+
<template #badge>
|
|
268
|
+
<Badge
|
|
269
|
+
label="RECOMMENDED"
|
|
270
|
+
state="success"
|
|
271
|
+
variant="light"
|
|
272
|
+
size="sm"
|
|
273
|
+
/>
|
|
274
|
+
</template>
|
|
275
|
+
|
|
276
|
+
<template #description>
|
|
277
|
+
Get instant push notifications on your device.
|
|
278
|
+
</template>
|
|
279
|
+
</CheckboxCard>
|
|
280
|
+
|
|
281
|
+
<CheckboxCard v-bind="args">
|
|
282
|
+
<Checkbox />
|
|
283
|
+
|
|
284
|
+
<template #icon>
|
|
285
|
+
<i i-celeste-message-line />
|
|
286
|
+
</template>
|
|
287
|
+
|
|
288
|
+
<template #label>
|
|
289
|
+
SMS Notifications
|
|
290
|
+
</template>
|
|
291
|
+
|
|
292
|
+
<template #sublabel>
|
|
293
|
+
(Required)
|
|
294
|
+
</template>
|
|
295
|
+
|
|
296
|
+
<template #description>
|
|
297
|
+
Receive notifications via SMS text messages.
|
|
298
|
+
</template>
|
|
299
|
+
</CheckboxCard>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
`,
|
|
303
|
+
}),
|
|
304
|
+
};
|