daisy-ui-kit 5.0.1 → 5.0.2
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/README.md +45 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,25 +1,33 @@
|
|
|
1
|
-
#
|
|
1
|
+
# daisy-ui-kit
|
|
2
2
|
|
|
3
3
|
Vue/Nuxt components for DaisyUI 5.
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
pnpm add
|
|
8
|
+
pnpm add daisy-ui-kit daisyui @vueuse/core
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
12
|
// nuxt.config.ts
|
|
13
13
|
export default defineNuxtConfig({
|
|
14
|
-
modules: ['
|
|
14
|
+
modules: ['daisy-ui-kit'],
|
|
15
15
|
})
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
+
## Usage Tips
|
|
19
|
+
|
|
20
|
+
- Prefer shorthand boolean props like `lg` and `primary` over `size="lg"` and `color="primary"`, unless dynamically bound.
|
|
21
|
+
- Write prop names in kebab-case in templates.
|
|
22
|
+
- Use component props first, then TailwindCSS classes for anything not covered.
|
|
23
|
+
- Use `v-model` for two-way binding on components with `model-value` prop and `update:model-value` event.
|
|
24
|
+
- The `is` prop changes the rendered element (e.g., `<Button is="a" href="/link">`).
|
|
25
|
+
|
|
18
26
|
## Component API Reference
|
|
19
27
|
|
|
20
28
|
```
|
|
21
29
|
Accordion
|
|
22
|
-
Accordion: props(
|
|
30
|
+
Accordion: props(model-value:string|number) slots(default) events(update:model-value)
|
|
23
31
|
Collapse: props(variant:string, arrow:boolean, plus:boolean, open:boolean, close:boolean, toggle:boolean, value:any) slots(default)
|
|
24
32
|
CollapseTitle: slots(default)
|
|
25
33
|
CollapseContent: slots(default)
|
|
@@ -28,7 +36,7 @@ Alert
|
|
|
28
36
|
Alert: props(outline:boolean, dash:boolean, soft:boolean, type:string, info:boolean, success:boolean, warning:boolean, error:boolean, orientation:string, vertical:boolean, horizontal:boolean) slots(default)
|
|
29
37
|
|
|
30
38
|
Avatar
|
|
31
|
-
Avatar: props(presence:string, online:boolean, offline:boolean,
|
|
39
|
+
Avatar: props(presence:string, online:boolean, offline:boolean, background-color:string, mask-classes:string, shape:string, squircle:boolean, heart:boolean, hexagon:boolean, hexagon-2:boolean, decagon:boolean, pentagon:boolean, diamond:boolean, square:boolean, circle:boolean, star:boolean, star-2:boolean, triangle:boolean, triangle-2:boolean, triangle-3:boolean, triangle-4:boolean, half-1:boolean, half-2:boolean) slots(default)
|
|
32
40
|
AvatarGroup: props(orientation:string, horizontal:boolean, vertical:boolean) slots(default)
|
|
33
41
|
|
|
34
42
|
Badge
|
|
@@ -39,21 +47,21 @@ Breadcrumbs
|
|
|
39
47
|
Crumb: slots(default)
|
|
40
48
|
|
|
41
49
|
Button
|
|
42
|
-
Button: props(is:string, type:string, join:boolean, ghost:boolean, link:boolean, glass:boolean, outline:boolean, dash:boolean, soft:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, active:boolean, disabled:boolean,
|
|
50
|
+
Button: props(is:string, type:string, join:boolean, ghost:boolean, link:boolean, glass:boolean, outline:boolean, dash:boolean, soft:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, active:boolean, disabled:boolean, no-animation:boolean, shape:string, circle:boolean, square:boolean, wide:boolean, block:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
|
|
43
51
|
|
|
44
52
|
Calendar
|
|
45
|
-
Calendar: props(
|
|
46
|
-
CalendarInput: props(
|
|
47
|
-
CalendarSkeleton: props(
|
|
53
|
+
Calendar: props(model-value:Date|string|null, options:CalendarOptions, aria-label:string, format:string, format-strict:boolean, to-string:function, parse:function, default-date:Date, set-default-date:boolean, first-day:number, min-date:Date, max-date:Date, disable-weekends:boolean, disable-day-fn:function, year-range:number|[number,number], show-week-number:boolean, pick-whole-week:boolean, is-rtl:boolean, i18n:object, year-suffix:string, show-month-after-year:boolean, show-days-in-next-and-previous-months:boolean, enable-selection-days-in-next-and-previous-months:boolean, number-of-months:number, events:array, auto-default:boolean) slots(default) events(update:model-value, update:input-value)
|
|
54
|
+
CalendarInput: props(model-value:Date|string|number|null, options:CalendarOptions, bound:boolean, position:string, reposition:boolean, auto-default:boolean, placeholder:string, disabled:boolean, validator:boolean, join:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, ghost:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(update:model-value, update:input-value)
|
|
55
|
+
CalendarSkeleton: props(number-of-months:number, date:Date, first-day:number)
|
|
48
56
|
|
|
49
57
|
Card
|
|
50
|
-
Card: props(is:string|object|function, border:boolean, dash:boolean, side:boolean,
|
|
58
|
+
Card: props(is:string|object|function, border:boolean, dash:boolean, side:boolean, image-full:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
|
|
51
59
|
CardBody: props(is:string) slots(default)
|
|
52
60
|
CardTitle: props(is:string) slots(default)
|
|
53
61
|
CardActions: props(is:string) slots(default)
|
|
54
62
|
|
|
55
63
|
Carousel
|
|
56
|
-
Carousel: props(
|
|
64
|
+
Carousel: props(snap-to:string, center:boolean, end:boolean, orientation:string, vertical:boolean, horizontal:boolean) slots(default)
|
|
57
65
|
CarouselItem: slots(default)
|
|
58
66
|
|
|
59
67
|
Chat
|
|
@@ -64,7 +72,7 @@ Chat
|
|
|
64
72
|
ChatFooter: slots(default)
|
|
65
73
|
|
|
66
74
|
Checkbox
|
|
67
|
-
Checkbox: props(
|
|
75
|
+
Checkbox: props(model-value:any, theme-controller:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(update:model-value)
|
|
68
76
|
|
|
69
77
|
Countdown
|
|
70
78
|
Countdown: props(is:string|Component) slots(default)
|
|
@@ -106,11 +114,11 @@ FileInput
|
|
|
106
114
|
FileInput: props(join:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, ghost:boolean, disabled:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(files)
|
|
107
115
|
|
|
108
116
|
Filter
|
|
109
|
-
Filter: props(is:string, name:string, items:array,
|
|
117
|
+
Filter: props(is:string, name:string, items:array, model-value:any, reset-label:string, position:string, start:boolean, end:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:model-value)
|
|
110
118
|
|
|
111
119
|
Flex
|
|
112
|
-
Flex: props(is:string|object, join:boolean, flex:boolean,
|
|
113
|
-
FlexItem: props(is:any, join:boolean, flex:boolean,
|
|
120
|
+
Flex: props(is:string|object, join:boolean, flex:boolean, flex-1:boolean, flex-auto:boolean, flex-initial:boolean, none:boolean, direction:string, row:boolean, col:boolean, reverse:boolean, wrap:boolean, nowrap:boolean, wrap-reverse:boolean, grow:boolean, justify:string, justify-start:boolean, justify-end:boolean, justify-center:boolean, justify-between:boolean, justify-around:boolean, justify-evenly:boolean, items:string, items-start:boolean, items-end:boolean, items-center:boolean, items-baseline:boolean, items-stretch:boolean) slots(default)
|
|
121
|
+
FlexItem: props(is:any, join:boolean, flex:boolean, flex-1:boolean, flex-auto:boolean, flex-initial:boolean, none:boolean, grow:boolean, direction:string, row:boolean, col:boolean, reverse:boolean, wrap:boolean, nowrap:boolean, wrap-reverse:boolean) slots(default)
|
|
114
122
|
|
|
115
123
|
Footer
|
|
116
124
|
Footer: props(center:boolean, is:string, orientation:string, horizontal:boolean, vertical:boolean) slots(default)
|
|
@@ -132,10 +140,10 @@ HoverGallery
|
|
|
132
140
|
|
|
133
141
|
Indicator
|
|
134
142
|
Indicator: props(is:string) slots(default)
|
|
135
|
-
IndicatorItem: props(is:string, align:string, start:boolean, center:boolean, end:boolean,
|
|
143
|
+
IndicatorItem: props(is:string, align:string, start:boolean, center:boolean, end:boolean, v-align:string, top:boolean, middle:boolean, bottom:boolean) slots(default)
|
|
136
144
|
|
|
137
145
|
Input
|
|
138
|
-
Input: props(
|
|
146
|
+
Input: props(model-value:string|number|null, type:string, placeholder:string, disabled:boolean, validator:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, join:boolean, ghost:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:model-value)
|
|
139
147
|
|
|
140
148
|
Join
|
|
141
149
|
Join: props(vertical:boolean) slots(default)
|
|
@@ -164,7 +172,7 @@ Loading
|
|
|
164
172
|
LoadingInfinity: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
|
|
165
173
|
|
|
166
174
|
Mask
|
|
167
|
-
Mask: props(shape:string, squircle:boolean, heart:boolean, hexagon:boolean,
|
|
175
|
+
Mask: props(shape:string, squircle:boolean, heart:boolean, hexagon:boolean, hexagon-2:boolean, decagon:boolean, pentagon:boolean, diamond:boolean, square:boolean, circle:boolean, star:boolean, star-2:boolean, triangle:boolean, triangle-2:boolean, triangle-3:boolean, triangle-4:boolean, half-1:boolean, half-2:boolean) slots(default)
|
|
168
176
|
|
|
169
177
|
Menu
|
|
170
178
|
Menu: props(align:string, vertical:boolean, horizontal:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
|
|
@@ -199,7 +207,7 @@ Navbar
|
|
|
199
207
|
NavButton: props(active:boolean, disabled:boolean) slots(default)
|
|
200
208
|
|
|
201
209
|
Pagination
|
|
202
|
-
Pagination: props(
|
|
210
|
+
Pagination: props(model-value:number, total:number, per-page:number, max-visible:number, join:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:model-value)
|
|
203
211
|
|
|
204
212
|
Progress
|
|
205
213
|
Progress: props(value:number, max:number, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, info:boolean, warning:boolean, error:boolean)
|
|
@@ -211,19 +219,19 @@ RadialProgress
|
|
|
211
219
|
RadialProgress: props(value:number|string, size:string, thickness:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean) slots(default)
|
|
212
220
|
|
|
213
221
|
Radio
|
|
214
|
-
Radio: props(
|
|
215
|
-
RadioGroup: props(
|
|
222
|
+
Radio: props(model-value:any, value:any, disabled:boolean, theme-controller:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) events(update:model-value)
|
|
223
|
+
RadioGroup: props(model-value:any, name:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default) events(update:model-value)
|
|
216
224
|
|
|
217
225
|
Range
|
|
218
|
-
Range: props(
|
|
219
|
-
RangeMeasure: props(
|
|
220
|
-
RangeMeasureTick: props(tick:number,
|
|
226
|
+
Range: props(model-value:number|string, min:number|string, max:number|string, step:number|string, disabled:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) events(update:model-value)
|
|
227
|
+
RangeMeasure: props(model-value:number|string, min:number|string, max:number|string, step:number|string, numbered:boolean, as-buttons:boolean, disabled:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default) events(update:model-value)
|
|
228
|
+
RangeMeasureTick: props(tick:number, model-value:number|string, numbered:boolean, as-button:boolean, is-hidden:boolean, disabled:boolean) slots(default) events(update:model-value)
|
|
221
229
|
|
|
222
230
|
Rating
|
|
223
|
-
Rating: props(
|
|
231
|
+
Rating: props(model-value:number|string, count:number|string, half:boolean, disabled:boolean, bg:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, shape:string, squircle:boolean, heart:boolean, hexagon:boolean, hexagon-2:boolean, decagon:boolean, pentagon:boolean, diamond:boolean, square:boolean, circle:boolean, star:boolean, star-2:boolean, triangle:boolean, triangle-2:boolean, triangle-3:boolean, triangle-4:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(update:model-value)
|
|
224
232
|
|
|
225
233
|
Select
|
|
226
|
-
Select: props(
|
|
234
|
+
Select: props(model-value:any, options:Array, value:function, label:function, result-as-object:boolean, join:boolean, ghost:boolean, disabled:boolean, native:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean, validator:boolean) events(update:model-value)
|
|
227
235
|
|
|
228
236
|
Skeleton
|
|
229
237
|
Skeleton: slots(default)
|
|
@@ -250,34 +258,34 @@ Steps
|
|
|
250
258
|
StepIcon: slots(default)
|
|
251
259
|
|
|
252
260
|
Swap
|
|
253
|
-
Swap: props(
|
|
261
|
+
Swap: props(model-value:boolean|null, rotate:boolean, flip:boolean) slots(default, swap, indeterminate)
|
|
254
262
|
|
|
255
263
|
Table
|
|
256
|
-
Table: props(zebra:boolean,
|
|
264
|
+
Table: props(zebra:boolean, pin-rows:boolean, pin-cols:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default)
|
|
257
265
|
|
|
258
266
|
Tabs
|
|
259
|
-
Tabs: props(name:string,
|
|
267
|
+
Tabs: props(name:string, current-tab:string, variant:string, box:boolean, border:boolean, lift:boolean, placement:string, top:boolean, bottom:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:current-tab)
|
|
260
268
|
Tab: props(is:any, name:string, active:boolean, disabled:boolean) slots(default)
|
|
261
269
|
TabContent: props(is:any, name:string) slots(default)
|
|
262
270
|
|
|
263
271
|
Text
|
|
264
|
-
Text: props(is:string, join:boolean, block:boolean, inline:boolean,
|
|
272
|
+
Text: props(is:string, join:boolean, block:boolean, inline:boolean, inline-block:boolean, label:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, neutral-content:boolean, primary-content:boolean, secondary-content:boolean, accent-content:boolean, info-content:boolean, success-content:boolean, warning-content:boolean, error-content:boolean, size:string, xl:boolean, lg:boolean, sm:boolean, xs:boolean, align:string, left:boolean, center:boolean, right:boolean, justify:boolean, case:string, uppercase:boolean, lowercase:boolean, capitalize:boolean, normal-case:boolean, font:string, sans:boolean, serif:boolean, mono:boolean, weight:string, thin:boolean, extralight:boolean, light:boolean, normal:boolean, medium:boolean, semibold:boolean, bold:boolean, extrabold:boolean, black:boolean) slots(default)
|
|
265
273
|
|
|
266
274
|
TextArea
|
|
267
|
-
TextArea: props(
|
|
275
|
+
TextArea: props(model-value:string, placeholder:string, type:string, rows:number, auto-expand:boolean, ghost:boolean, disabled:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean, validator:boolean) events(update:model-value)
|
|
268
276
|
|
|
269
277
|
TextRotate
|
|
270
278
|
TextRotate: props(is:string|Component, center:boolean, duration:number) slots(default)
|
|
271
279
|
|
|
272
280
|
ThemeController
|
|
273
|
-
ThemeController: props(themes:DaisyThemeInput[],
|
|
281
|
+
ThemeController: props(themes:DaisyThemeInput[], default-theme:string, storage:Function) slots(default)
|
|
274
282
|
ThemeTile: props(theme:string, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean)
|
|
275
283
|
|
|
276
284
|
ThemeProvider
|
|
277
|
-
ThemeProvider: props(
|
|
285
|
+
ThemeProvider: props(data-theme:string, css-vars:string, snoop:boolean) slots(default)
|
|
278
286
|
|
|
279
287
|
Timeline
|
|
280
|
-
Timeline: props(vertical:boolean, horizontal:boolean, compact:boolean,
|
|
288
|
+
Timeline: props(vertical:boolean, horizontal:boolean, compact:boolean, snap-icon:boolean, class:string) slots(default)
|
|
281
289
|
TimelineItem: props(hr:boolean, class:string) slots(start, middle, end, hr-top, hr-bottom)
|
|
282
290
|
TimelineStart: props(box:boolean, class:string) slots(default)
|
|
283
291
|
TimelineMiddle: props(class:string) slots(default)
|
|
@@ -285,13 +293,13 @@ Timeline
|
|
|
285
293
|
TimelineLine: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean)
|
|
286
294
|
|
|
287
295
|
Toast
|
|
288
|
-
Toast: props(
|
|
296
|
+
Toast: props(h-align:string, start:boolean, center:boolean, end:boolean, v-align:string, top:boolean, middle:boolean, bottom:boolean, name:string, defaults:Partial<ToastSettings>, limit:number) slots(default)
|
|
289
297
|
|
|
290
298
|
Toggle
|
|
291
|
-
Toggle: props(
|
|
299
|
+
Toggle: props(model-value:any, disabled:boolean, validator:boolean, theme-controller:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, info:boolean, warning:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) events(update:model-value)
|
|
292
300
|
|
|
293
301
|
Tooltip
|
|
294
|
-
Tooltip: props(tip:string|number, open:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, position:string, top:boolean, right:boolean, bottom:boolean, left:boolean,
|
|
302
|
+
Tooltip: props(tip:string|number, open:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, position:string, top:boolean, right:boolean, bottom:boolean, left:boolean, delay-enter:number, delay-leave:number) slots(default)
|
|
295
303
|
TooltipTarget: slots(default)
|
|
296
304
|
TooltipContent: slots(default)
|
|
297
305
|
|