@nuxt/ui 3.0.1 → 3.1.0
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/.nuxt/ui/accordion.ts +25 -4
- package/.nuxt/ui/alert.ts +52 -31
- package/.nuxt/ui/avatar-group.ts +24 -3
- package/.nuxt/ui/avatar.ts +26 -5
- package/.nuxt/ui/badge.ts +56 -35
- package/.nuxt/ui/breadcrumb.ts +28 -7
- package/.nuxt/ui/button-group.ts +23 -2
- package/.nuxt/ui/button.ts +66 -45
- package/.nuxt/ui/calendar.ts +39 -18
- package/.nuxt/ui/card.ts +28 -7
- package/.nuxt/ui/carousel.ts +29 -8
- package/.nuxt/ui/checkbox-group.ts +82 -0
- package/.nuxt/ui/checkbox.ts +163 -29
- package/.nuxt/ui/chip.ts +31 -10
- package/.nuxt/ui/collapsible.ts +23 -2
- package/.nuxt/ui/color-picker.ts +26 -5
- package/.nuxt/ui/command-palette.ts +37 -16
- package/.nuxt/ui/container.ts +24 -3
- package/.nuxt/ui/context-menu.ts +56 -35
- package/.nuxt/ui/drawer.ts +33 -12
- package/.nuxt/ui/dropdown-menu.ts +57 -36
- package/.nuxt/ui/form-field.ts +29 -8
- package/.nuxt/ui/form.ts +23 -2
- package/.nuxt/ui/index.ts +1 -0
- package/.nuxt/ui/input-menu.ts +65 -44
- package/.nuxt/ui/input-number.ts +43 -22
- package/.nuxt/ui/input.ts +46 -25
- package/.nuxt/ui/kbd.ts +27 -6
- package/.nuxt/ui/link.ts +26 -5
- package/.nuxt/ui/modal.ts +28 -7
- package/.nuxt/ui/navigation-menu.ts +103 -84
- package/.nuxt/ui/pagination.ts +23 -2
- package/.nuxt/ui/pin-input.ts +43 -22
- package/.nuxt/ui/popover.ts +25 -4
- package/.nuxt/ui/progress.ts +40 -19
- package/.nuxt/ui/radio-group.ts +273 -37
- package/.nuxt/ui/select-menu.ts +59 -35
- package/.nuxt/ui/select.ts +55 -34
- package/.nuxt/ui/separator.ts +31 -10
- package/.nuxt/ui/skeleton.ts +24 -3
- package/.nuxt/ui/slideover.ts +27 -6
- package/.nuxt/ui/slider.ts +39 -18
- package/.nuxt/ui/stepper.ts +41 -20
- package/.nuxt/ui/switch.ts +44 -23
- package/.nuxt/ui/table.ts +38 -17
- package/.nuxt/ui/tabs.ts +55 -34
- package/.nuxt/ui/textarea.ts +63 -37
- package/.nuxt/ui/toast.ts +47 -26
- package/.nuxt/ui/toaster.ts +23 -2
- package/.nuxt/ui/tooltip.ts +25 -4
- package/.nuxt/ui/tree.ts +41 -20
- package/.nuxt/ui.css +56 -12
- package/README.md +11 -0
- package/cli/templates.mjs +18 -17
- package/dist/module.d.mts +2 -1
- package/dist/module.json +5 -5
- package/dist/module.mjs +11 -7
- package/dist/runtime/components/Accordion.vue +36 -92
- package/dist/runtime/components/Accordion.vue.d.ts +91 -0
- package/dist/runtime/components/Alert.vue +37 -100
- package/dist/runtime/components/Alert.vue.d.ts +96 -0
- package/dist/runtime/components/App.vue +28 -34
- package/dist/runtime/components/App.vue.d.ts +24 -0
- package/dist/runtime/components/Avatar.vue +47 -78
- package/dist/runtime/components/Avatar.vue.d.ts +60 -0
- package/dist/runtime/components/AvatarGroup.vue +40 -77
- package/dist/runtime/components/AvatarGroup.vue.d.ts +40 -0
- package/dist/runtime/components/Badge.vue +33 -62
- package/dist/runtime/components/Badge.vue.d.ts +62 -0
- package/dist/runtime/components/Breadcrumb.vue +36 -88
- package/dist/runtime/components/Breadcrumb.vue.d.ts +82 -0
- package/dist/runtime/components/Button.vue +96 -105
- package/dist/runtime/components/Button.vue.d.ts +73 -0
- package/dist/runtime/components/ButtonGroup.vue +20 -46
- package/dist/runtime/components/ButtonGroup.vue.d.ts +55 -0
- package/dist/runtime/components/Calendar.vue +73 -127
- package/dist/runtime/components/Calendar.vue.d.ts +107 -0
- package/dist/runtime/components/Card.vue +18 -40
- package/dist/runtime/components/Card.vue.d.ts +38 -0
- package/dist/runtime/components/Carousel.vue +112 -230
- package/dist/runtime/components/Carousel.vue.d.ts +120 -0
- package/dist/runtime/components/Checkbox.vue +52 -93
- package/dist/runtime/components/Checkbox.vue.d.ts +76 -0
- package/dist/runtime/components/CheckboxGroup.vue +121 -0
- package/dist/runtime/components/CheckboxGroup.vue.d.ts +75 -0
- package/dist/runtime/components/Chip.vue +26 -69
- package/dist/runtime/components/Chip.vue.d.ts +71 -0
- package/dist/runtime/components/Collapsible.vue +22 -41
- package/dist/runtime/components/Collapsible.vue.d.ts +50 -0
- package/dist/runtime/components/ColorPicker.vue +111 -197
- package/dist/runtime/components/ColorPicker.vue.d.ts +63 -0
- package/dist/runtime/components/CommandPalette.vue +94 -234
- package/dist/runtime/components/CommandPalette.vue.d.ts +173 -0
- package/dist/runtime/components/Container.vue +15 -28
- package/dist/runtime/components/Container.vue.d.ts +27 -0
- package/dist/runtime/components/ContextMenu.vue +32 -119
- package/dist/runtime/components/ContextMenu.vue.d.ts +127 -0
- package/dist/runtime/components/ContextMenuContent.vue +71 -72
- package/dist/runtime/components/ContextMenuContent.vue.d.ts +105 -0
- package/dist/runtime/components/Drawer.vue +49 -87
- package/dist/runtime/components/Drawer.vue.d.ts +88 -0
- package/dist/runtime/components/DropdownMenu.vue +37 -129
- package/dist/runtime/components/DropdownMenu.vue.d.ts +141 -0
- package/dist/runtime/components/DropdownMenuContent.vue +76 -79
- package/dist/runtime/components/DropdownMenuContent.vue.d.ts +55 -0
- package/dist/runtime/components/Form.vue +135 -219
- package/dist/runtime/components/Form.vue.d.ts +66 -0
- package/dist/runtime/components/FormField.vue +36 -77
- package/dist/runtime/components/FormField.vue.d.ts +70 -0
- package/dist/runtime/components/Icon.vue +12 -19
- package/dist/runtime/components/Icon.vue.d.ts +17 -0
- package/dist/runtime/components/Input.vue +82 -140
- package/dist/runtime/components/Input.vue.d.ts +91 -0
- package/dist/runtime/components/InputMenu.vue +193 -302
- package/dist/runtime/components/InputMenu.vue.d.ts +312 -0
- package/dist/runtime/components/InputNumber.vue +71 -133
- package/dist/runtime/components/InputNumber.vue.d.ts +193 -0
- package/dist/runtime/components/Kbd.vue +20 -46
- package/dist/runtime/components/Kbd.vue.d.ts +55 -0
- package/dist/runtime/components/Link.vue +98 -173
- package/dist/runtime/components/Link.vue.d.ts +124 -0
- package/dist/runtime/components/LinkBase.vue +33 -41
- package/dist/runtime/components/LinkBase.vue.d.ts +48 -0
- package/dist/runtime/components/Modal.vue +53 -116
- package/dist/runtime/components/Modal.vue.d.ts +109 -0
- package/dist/runtime/components/NavigationMenu.vue +78 -186
- package/dist/runtime/components/NavigationMenu.vue.d.ts +159 -0
- package/dist/runtime/components/OverlayProvider.vue +14 -18
- package/dist/runtime/components/OverlayProvider.vue.d.ts +2 -0
- package/dist/runtime/components/Pagination.vue +46 -140
- package/dist/runtime/components/Pagination.vue.d.ts +143 -0
- package/dist/runtime/components/PinInput.vue +61 -78
- package/dist/runtime/components/PinInput.vue.d.ts +68 -0
- package/dist/runtime/components/Popover.vue +47 -84
- package/dist/runtime/components/Popover.vue.d.ts +80 -0
- package/dist/runtime/components/Progress.vue +70 -131
- package/dist/runtime/components/Progress.vue.d.ts +97 -0
- package/dist/runtime/components/RadioGroup.vue +75 -126
- package/dist/runtime/components/RadioGroup.vue.d.ts +88 -0
- package/dist/runtime/components/Select.vue +115 -202
- package/dist/runtime/components/Select.vue.d.ts +139 -0
- package/dist/runtime/components/SelectMenu.vue +167 -281
- package/dist/runtime/components/SelectMenu.vue.d.ts +184 -0
- package/dist/runtime/components/Separator.vue +29 -71
- package/dist/runtime/components/Separator.vue.d.ts +75 -0
- package/dist/runtime/components/Skeleton.vue +21 -23
- package/dist/runtime/components/Skeleton.vue.d.ts +26 -0
- package/dist/runtime/components/Slideover.vue +53 -120
- package/dist/runtime/components/Slideover.vue.d.ts +111 -0
- package/dist/runtime/components/Slider.vue +46 -84
- package/dist/runtime/components/Slider.vue.d.ts +71 -0
- package/dist/runtime/components/Stepper.vue +44 -113
- package/dist/runtime/components/Stepper.vue.d.ts +89 -0
- package/dist/runtime/components/Switch.vue +45 -93
- package/dist/runtime/components/Switch.vue.d.ts +73 -0
- package/dist/runtime/components/Table.vue +165 -264
- package/dist/runtime/components/Table.vue.d.ts +183 -0
- package/dist/runtime/components/Tabs.vue +40 -105
- package/dist/runtime/components/Tabs.vue.d.ts +104 -0
- package/dist/runtime/components/Textarea.vue +113 -158
- package/dist/runtime/components/Textarea.vue.d.ts +95 -0
- package/dist/runtime/components/Toast.vue +49 -110
- package/dist/runtime/components/Toast.vue.d.ts +95 -0
- package/dist/runtime/components/Toaster.vue +70 -107
- package/dist/runtime/components/Toaster.vue.d.ts +63 -0
- package/dist/runtime/components/Tooltip.vue +38 -65
- package/dist/runtime/components/Tooltip.vue.d.ts +65 -0
- package/dist/runtime/components/Tree.vue +57 -150
- package/dist/runtime/components/Tree.vue.d.ts +128 -0
- package/dist/runtime/composables/defineShortcuts.d.ts +1 -1
- package/dist/runtime/composables/defineShortcuts.js +0 -1
- package/dist/runtime/composables/useAvatarGroup.d.ts +1 -1
- package/dist/runtime/composables/useButtonGroup.d.ts +2 -2
- package/dist/runtime/composables/useFormField.d.ts +2 -2
- package/dist/runtime/composables/useFormField.js +1 -1
- package/dist/runtime/composables/useOverlay.d.ts +16 -8
- package/dist/runtime/composables/useOverlay.js +14 -6
- package/dist/runtime/composables/usePortal.d.ts +6 -0
- package/dist/runtime/composables/usePortal.js +17 -0
- package/dist/runtime/index.css +1 -1
- package/dist/runtime/inertia/components/Link.vue +146 -0
- package/dist/runtime/inertia/components/Link.vue.d.ts +92 -0
- package/dist/runtime/inertia/stubs.d.ts +43 -0
- package/dist/runtime/inertia/stubs.js +82 -0
- package/dist/runtime/locale/bg.d.ts +3 -0
- package/dist/runtime/locale/bg.js +54 -0
- package/dist/runtime/locale/hy.d.ts +3 -0
- package/dist/runtime/locale/hy.js +54 -0
- package/dist/runtime/locale/index.d.ts +6 -1
- package/dist/runtime/locale/index.js +6 -1
- package/dist/runtime/locale/kk.d.ts +3 -0
- package/dist/runtime/locale/kk.js +54 -0
- package/dist/runtime/locale/tj.d.ts +3 -0
- package/dist/runtime/locale/tj.js +54 -0
- package/dist/runtime/locale/ug_cn.d.ts +3 -0
- package/dist/runtime/locale/ug_cn.js +55 -0
- package/dist/runtime/types/form.d.ts +5 -1
- package/dist/runtime/types/index.d.ts +2 -0
- package/dist/runtime/types/index.js +2 -0
- package/dist/runtime/types/utils.d.ts +70 -10
- package/dist/runtime/utils/index.d.ts +1 -0
- package/dist/runtime/utils/index.js +3 -0
- package/dist/runtime/utils/link.d.ts +4 -27
- package/dist/runtime/utils/link.js +32 -1
- package/dist/runtime/utils/tv.js +2 -2
- package/dist/runtime/vue/components/Icon.vue +7 -8
- package/dist/runtime/vue/components/Icon.vue.d.ts +14 -0
- package/dist/runtime/vue/components/Link.vue +118 -199
- package/dist/runtime/vue/components/Link.vue.d.ts +124 -0
- package/dist/runtime/vue/stubs.d.ts +5 -0
- package/dist/runtime/vue/stubs.js +11 -2
- package/dist/shared/{ui.BCaWD5Ek.mjs → ui.D7lOOabO.mjs} +623 -364
- package/dist/types.d.mts +5 -1
- package/dist/unplugin.d.mts +6 -1
- package/dist/unplugin.mjs +25 -4
- package/dist/vite.mjs +1 -1
- package/package.json +122 -64
- package/dist/module.cjs +0 -62
- package/dist/module.d.cts +0 -44
- package/dist/module.d.ts +0 -44
- package/dist/shared/ui.C6uTSFTI.cjs +0 -3555
- package/dist/types.d.ts +0 -1
- package/dist/unplugin.cjs +0 -232
- package/dist/unplugin.d.cts +0 -61
- package/dist/unplugin.d.ts +0 -61
- package/dist/vite.cjs +0 -23
- package/dist/vite.d.cts +0 -15
- package/dist/vite.d.ts +0 -15
|
@@ -1,97 +1,60 @@
|
|
|
1
|
-
<script
|
|
2
|
-
import
|
|
3
|
-
import type { AppConfig } from '@nuxt/schema'
|
|
4
|
-
import _appConfig from '#build/app.config'
|
|
5
|
-
import theme from '#build/ui/avatar-group'
|
|
6
|
-
import { tv } from '../utils/tv'
|
|
7
|
-
|
|
8
|
-
const appConfigAvatarGroup = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
|
|
9
|
-
|
|
10
|
-
const avatarGroup = tv({ extend: tv(theme), ...(appConfigAvatarGroup.ui?.avatarGroup || {}) })
|
|
11
|
-
|
|
12
|
-
type AvatarGroupVariants = VariantProps<typeof avatarGroup>
|
|
13
|
-
|
|
14
|
-
export interface AvatarGroupProps {
|
|
15
|
-
/**
|
|
16
|
-
* The element or component this component should render as.
|
|
17
|
-
* @defaultValue 'div'
|
|
18
|
-
*/
|
|
19
|
-
as?: any
|
|
20
|
-
/**
|
|
21
|
-
* @defaultValue 'md'
|
|
22
|
-
*/
|
|
23
|
-
size?: AvatarGroupVariants['size']
|
|
24
|
-
/**
|
|
25
|
-
* The maximum number of avatars to display.
|
|
26
|
-
*/
|
|
27
|
-
max?: number | string
|
|
28
|
-
class?: any
|
|
29
|
-
ui?: Partial<typeof avatarGroup.slots>
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export interface AvatarGroupSlots {
|
|
33
|
-
default(props?: {}): any
|
|
34
|
-
}
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/avatar-group";
|
|
35
3
|
</script>
|
|
36
4
|
|
|
37
|
-
<script setup
|
|
38
|
-
import { computed, provide } from
|
|
39
|
-
import { Primitive } from
|
|
40
|
-
import {
|
|
41
|
-
import
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed, provide } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { useAppConfig } from "#imports";
|
|
9
|
+
import { avatarGroupInjectionKey } from "../composables/useAvatarGroup";
|
|
10
|
+
import { tv } from "../utils/tv";
|
|
11
|
+
import UAvatar from "./Avatar.vue";
|
|
12
|
+
const props = defineProps({
|
|
13
|
+
as: { type: null, required: false },
|
|
14
|
+
size: { type: null, required: false },
|
|
15
|
+
max: { type: [Number, String], required: false },
|
|
16
|
+
class: { type: null, required: false },
|
|
17
|
+
ui: { type: null, required: false }
|
|
18
|
+
});
|
|
19
|
+
const slots = defineSlots();
|
|
20
|
+
const appConfig = useAppConfig();
|
|
21
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatarGroup || {} })({
|
|
47
22
|
size: props.size
|
|
48
|
-
}))
|
|
49
|
-
|
|
50
|
-
const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
|
|
51
|
-
|
|
23
|
+
}));
|
|
24
|
+
const max = computed(() => typeof props.max === "string" ? Number.parseInt(props.max, 10) : props.max);
|
|
52
25
|
const children = computed(() => {
|
|
53
|
-
let
|
|
54
|
-
if (
|
|
55
|
-
|
|
56
|
-
if (typeof child.type ===
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
return
|
|
26
|
+
let children2 = slots.default?.();
|
|
27
|
+
if (children2?.length) {
|
|
28
|
+
children2 = children2.flatMap((child) => {
|
|
29
|
+
if (typeof child.type === "symbol") {
|
|
30
|
+
if (typeof child.children === "string") {
|
|
31
|
+
return;
|
|
60
32
|
}
|
|
61
|
-
|
|
62
|
-
return child.children
|
|
33
|
+
return child.children;
|
|
63
34
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}).filter(Boolean)
|
|
35
|
+
return child;
|
|
36
|
+
}).filter(Boolean);
|
|
67
37
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
})
|
|
71
|
-
|
|
38
|
+
return children2 || [];
|
|
39
|
+
});
|
|
72
40
|
const visibleAvatars = computed(() => {
|
|
73
41
|
if (!children.value.length) {
|
|
74
|
-
return []
|
|
42
|
+
return [];
|
|
75
43
|
}
|
|
76
|
-
|
|
77
44
|
if (!max.value || max.value <= 0) {
|
|
78
|
-
return [...children.value].reverse()
|
|
45
|
+
return [...children.value].reverse();
|
|
79
46
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
})
|
|
83
|
-
|
|
47
|
+
return [...children.value].slice(0, max.value).reverse();
|
|
48
|
+
});
|
|
84
49
|
const hiddenCount = computed(() => {
|
|
85
50
|
if (!children.value.length) {
|
|
86
|
-
return 0
|
|
51
|
+
return 0;
|
|
87
52
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
})
|
|
91
|
-
|
|
53
|
+
return children.value.length - visibleAvatars.value.length;
|
|
54
|
+
});
|
|
92
55
|
provide(avatarGroupInjectionKey, computed(() => ({
|
|
93
56
|
size: props.size
|
|
94
|
-
})))
|
|
57
|
+
})));
|
|
95
58
|
</script>
|
|
96
59
|
|
|
97
60
|
<template>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
2
|
+
import theme from '#build/ui/avatar-group';
|
|
3
|
+
import type { ComponentConfig } from '../types/utils';
|
|
4
|
+
type AvatarGroup = ComponentConfig<typeof theme, AppConfig, 'avatarGroup'>;
|
|
5
|
+
export interface AvatarGroupProps {
|
|
6
|
+
/**
|
|
7
|
+
* The element or component this component should render as.
|
|
8
|
+
* @defaultValue 'div'
|
|
9
|
+
*/
|
|
10
|
+
as?: any;
|
|
11
|
+
/**
|
|
12
|
+
* @defaultValue 'md'
|
|
13
|
+
*/
|
|
14
|
+
size?: AvatarGroup['variants']['size'];
|
|
15
|
+
/**
|
|
16
|
+
* The maximum number of avatars to display.
|
|
17
|
+
*/
|
|
18
|
+
max?: number | string;
|
|
19
|
+
class?: any;
|
|
20
|
+
ui?: AvatarGroup['slots'];
|
|
21
|
+
}
|
|
22
|
+
export interface AvatarGroupSlots {
|
|
23
|
+
default(props?: {}): any;
|
|
24
|
+
}
|
|
25
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AvatarGroupProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AvatarGroupProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<AvatarGroupSlots> & AvatarGroupSlots>;
|
|
26
|
+
export default _default;
|
|
27
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
28
|
+
type __VLS_TypePropsToOption<T> = {
|
|
29
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
30
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
31
|
+
} : {
|
|
32
|
+
type: import('vue').PropType<T[K]>;
|
|
33
|
+
required: true;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
37
|
+
new (): {
|
|
38
|
+
$slots: S;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
@@ -1,77 +1,48 @@
|
|
|
1
|
-
<script
|
|
2
|
-
import
|
|
3
|
-
import type { AppConfig } from '@nuxt/schema'
|
|
4
|
-
import _appConfig from '#build/app.config'
|
|
5
|
-
import theme from '#build/ui/badge'
|
|
6
|
-
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
|
|
7
|
-
import { tv } from '../utils/tv'
|
|
8
|
-
import type { AvatarProps } from '../types'
|
|
9
|
-
|
|
10
|
-
const appConfigBadge = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
|
|
11
|
-
|
|
12
|
-
const badge = tv({ extend: tv(theme), ...(appConfigBadge.ui?.badge || {}) })
|
|
13
|
-
|
|
14
|
-
type BadgeVariants = VariantProps<typeof badge>
|
|
15
|
-
|
|
16
|
-
export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
|
|
17
|
-
/**
|
|
18
|
-
* The element or component this component should render as.
|
|
19
|
-
* @defaultValue 'span'
|
|
20
|
-
*/
|
|
21
|
-
as?: any
|
|
22
|
-
label?: string | number
|
|
23
|
-
/**
|
|
24
|
-
* @defaultValue 'primary'
|
|
25
|
-
*/
|
|
26
|
-
color?: BadgeVariants['color']
|
|
27
|
-
/**
|
|
28
|
-
* @defaultValue 'solid'
|
|
29
|
-
*/
|
|
30
|
-
variant?: BadgeVariants['variant']
|
|
31
|
-
/**
|
|
32
|
-
* @defaultValue 'md'
|
|
33
|
-
*/
|
|
34
|
-
size?: BadgeVariants['size']
|
|
35
|
-
class?: any
|
|
36
|
-
ui?: Partial<typeof badge.slots>
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export interface BadgeSlots {
|
|
40
|
-
leading(props?: {}): any
|
|
41
|
-
default(props?: {}): any
|
|
42
|
-
trailing(props?: {}): any
|
|
43
|
-
}
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/badge";
|
|
44
3
|
</script>
|
|
45
4
|
|
|
46
|
-
<script setup
|
|
47
|
-
import { computed } from
|
|
48
|
-
import { Primitive } from
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import
|
|
52
|
-
import
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { useAppConfig } from "#imports";
|
|
9
|
+
import { useButtonGroup } from "../composables/useButtonGroup";
|
|
10
|
+
import { useComponentIcons } from "../composables/useComponentIcons";
|
|
11
|
+
import { tv } from "../utils/tv";
|
|
12
|
+
import UIcon from "./Icon.vue";
|
|
13
|
+
import UAvatar from "./Avatar.vue";
|
|
14
|
+
const props = defineProps({
|
|
15
|
+
as: { type: null, required: false, default: "span" },
|
|
16
|
+
label: { type: [String, Number], required: false },
|
|
17
|
+
color: { type: null, required: false },
|
|
18
|
+
variant: { type: null, required: false },
|
|
19
|
+
size: { type: null, required: false },
|
|
20
|
+
class: { type: null, required: false },
|
|
21
|
+
ui: { type: null, required: false },
|
|
22
|
+
icon: { type: String, required: false },
|
|
23
|
+
avatar: { type: Object, required: false },
|
|
24
|
+
leading: { type: Boolean, required: false },
|
|
25
|
+
leadingIcon: { type: String, required: false },
|
|
26
|
+
trailing: { type: Boolean, required: false },
|
|
27
|
+
trailingIcon: { type: String, required: false }
|
|
28
|
+
});
|
|
29
|
+
defineSlots();
|
|
30
|
+
const appConfig = useAppConfig();
|
|
31
|
+
const { orientation, size: buttonGroupSize } = useButtonGroup(props);
|
|
32
|
+
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
|
|
33
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} })({
|
|
63
34
|
color: props.color,
|
|
64
35
|
variant: props.variant,
|
|
65
36
|
size: buttonGroupSize.value || props.size,
|
|
66
37
|
buttonGroup: orientation.value
|
|
67
|
-
}))
|
|
38
|
+
}));
|
|
68
39
|
</script>
|
|
69
40
|
|
|
70
41
|
<template>
|
|
71
42
|
<Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
|
|
72
43
|
<slot name="leading">
|
|
73
44
|
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
|
|
74
|
-
<UAvatar v-else-if="!!avatar" :size="
|
|
45
|
+
<UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
|
|
75
46
|
</slot>
|
|
76
47
|
|
|
77
48
|
<slot>
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
2
|
+
import theme from '#build/ui/badge';
|
|
3
|
+
import type { UseComponentIconsProps } from '../composables/useComponentIcons';
|
|
4
|
+
import type { ComponentConfig } from '../types/utils';
|
|
5
|
+
type Badge = ComponentConfig<typeof theme, AppConfig, 'badge'>;
|
|
6
|
+
export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
|
|
7
|
+
/**
|
|
8
|
+
* The element or component this component should render as.
|
|
9
|
+
* @defaultValue 'span'
|
|
10
|
+
*/
|
|
11
|
+
as?: any;
|
|
12
|
+
label?: string | number;
|
|
13
|
+
/**
|
|
14
|
+
* @defaultValue 'primary'
|
|
15
|
+
*/
|
|
16
|
+
color?: Badge['variants']['color'];
|
|
17
|
+
/**
|
|
18
|
+
* @defaultValue 'solid'
|
|
19
|
+
*/
|
|
20
|
+
variant?: Badge['variants']['variant'];
|
|
21
|
+
/**
|
|
22
|
+
* @defaultValue 'md'
|
|
23
|
+
*/
|
|
24
|
+
size?: Badge['variants']['size'];
|
|
25
|
+
class?: any;
|
|
26
|
+
ui?: Badge['slots'];
|
|
27
|
+
}
|
|
28
|
+
export interface BadgeSlots {
|
|
29
|
+
leading(props?: {}): any;
|
|
30
|
+
default(props?: {}): any;
|
|
31
|
+
trailing(props?: {}): any;
|
|
32
|
+
}
|
|
33
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<BadgeProps>, {
|
|
34
|
+
as: string;
|
|
35
|
+
}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<BadgeProps>, {
|
|
36
|
+
as: string;
|
|
37
|
+
}>>> & Readonly<{}>, {
|
|
38
|
+
as: any;
|
|
39
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<BadgeSlots> & BadgeSlots>;
|
|
40
|
+
export default _default;
|
|
41
|
+
type __VLS_WithDefaults<P, D> = {
|
|
42
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
|
|
43
|
+
default: D[K];
|
|
44
|
+
}> : P[K];
|
|
45
|
+
};
|
|
46
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
47
|
+
type __VLS_TypePropsToOption<T> = {
|
|
48
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
49
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
50
|
+
} : {
|
|
51
|
+
type: import('vue').PropType<T[K]>;
|
|
52
|
+
required: true;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
56
|
+
new (): {
|
|
57
|
+
$slots: S;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
type __VLS_PrettifyLocal<T> = {
|
|
61
|
+
[K in keyof T]: T[K];
|
|
62
|
+
} & {};
|
|
@@ -1,84 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import type { AppConfig } from '@nuxt/schema'
|
|
4
|
-
import _appConfig from '#build/app.config'
|
|
5
|
-
import theme from '#build/ui/breadcrumb'
|
|
6
|
-
import { tv } from '../utils/tv'
|
|
7
|
-
import type { AvatarProps, LinkProps } from '../types'
|
|
8
|
-
import type { DynamicSlots, PartialString } from '../types/utils'
|
|
9
|
-
|
|
10
|
-
const appConfigBreadcrumb = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
|
|
11
|
-
|
|
12
|
-
const breadcrumb = tv({ extend: tv(theme), ...(appConfigBreadcrumb.ui?.breadcrumb || {}) })
|
|
13
|
-
|
|
14
|
-
export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
|
|
15
|
-
label?: string
|
|
16
|
-
/**
|
|
17
|
-
* @IconifyIcon
|
|
18
|
-
*/
|
|
19
|
-
icon?: string
|
|
20
|
-
avatar?: AvatarProps
|
|
21
|
-
slot?: string
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export interface BreadcrumbProps<T> {
|
|
25
|
-
/**
|
|
26
|
-
* The element or component this component should render as.
|
|
27
|
-
* @defaultValue 'nav'
|
|
28
|
-
*/
|
|
29
|
-
as?: any
|
|
30
|
-
items?: T[]
|
|
31
|
-
/**
|
|
32
|
-
* The icon to use as a separator.
|
|
33
|
-
* @defaultValue appConfig.ui.icons.chevronRight
|
|
34
|
-
* @IconifyIcon
|
|
35
|
-
*/
|
|
36
|
-
separatorIcon?: string
|
|
37
|
-
/**
|
|
38
|
-
* The key used to get the label from the item.
|
|
39
|
-
* @defaultValue 'label'
|
|
40
|
-
*/
|
|
41
|
-
labelKey?: string
|
|
42
|
-
class?: any
|
|
43
|
-
ui?: PartialString<typeof breadcrumb.slots>
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
|
|
47
|
-
|
|
48
|
-
export type BreadcrumbSlots<T extends { slot?: string }> = {
|
|
49
|
-
'item': SlotProps<T>
|
|
50
|
-
'item-leading': SlotProps<T>
|
|
51
|
-
'item-label': SlotProps<T>
|
|
52
|
-
'item-trailing': SlotProps<T>
|
|
53
|
-
'separator'(props?: {}): any
|
|
54
|
-
} & DynamicSlots<T, SlotProps<T>>
|
|
55
|
-
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/breadcrumb";
|
|
56
3
|
</script>
|
|
57
4
|
|
|
58
|
-
<script setup
|
|
59
|
-
import { computed } from
|
|
60
|
-
import { Primitive } from
|
|
61
|
-
import { useAppConfig } from
|
|
62
|
-
import { useLocale } from
|
|
63
|
-
import { get } from
|
|
64
|
-
import {
|
|
65
|
-
import
|
|
66
|
-
import
|
|
67
|
-
import
|
|
68
|
-
import
|
|
69
|
-
|
|
70
|
-
const props =
|
|
71
|
-
as:
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
const
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { useAppConfig } from "#imports";
|
|
9
|
+
import { useLocale } from "../composables/useLocale";
|
|
10
|
+
import { get } from "../utils";
|
|
11
|
+
import { tv } from "../utils/tv";
|
|
12
|
+
import { pickLinkProps } from "../utils/link";
|
|
13
|
+
import UIcon from "./Icon.vue";
|
|
14
|
+
import UAvatar from "./Avatar.vue";
|
|
15
|
+
import ULinkBase from "./LinkBase.vue";
|
|
16
|
+
import ULink from "./Link.vue";
|
|
17
|
+
const props = defineProps({
|
|
18
|
+
as: { type: null, required: false, default: "nav" },
|
|
19
|
+
items: { type: Array, required: false },
|
|
20
|
+
separatorIcon: { type: String, required: false },
|
|
21
|
+
labelKey: { type: String, required: false, default: "label" },
|
|
22
|
+
class: { type: null, required: false },
|
|
23
|
+
ui: { type: null, required: false }
|
|
24
|
+
});
|
|
25
|
+
const slots = defineSlots();
|
|
26
|
+
const { dir } = useLocale();
|
|
27
|
+
const appConfig = useAppConfig();
|
|
28
|
+
const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
|
|
29
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb || {} })());
|
|
82
30
|
</script>
|
|
83
31
|
|
|
84
32
|
<template>
|
|
@@ -87,26 +35,26 @@ const ui = breadcrumb()
|
|
|
87
35
|
<template v-for="(item, index) in items" :key="index">
|
|
88
36
|
<li :class="ui.item({ class: props.ui?.item })">
|
|
89
37
|
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
|
|
90
|
-
<ULinkBase v-bind="slotProps" as="span" :aria-current="active &&
|
|
38
|
+
<ULinkBase v-bind="slotProps" as="span" :aria-current="active && index === items.length - 1 ? 'page' : void 0" :class="ui.link({ class: [props.ui?.link, item.class], active: index === items.length - 1, disabled: !!item.disabled, to: !!item.to })">
|
|
91
39
|
<slot :name="item.slot || 'item'" :item="item" :index="index">
|
|
92
|
-
<slot :name="item.slot ? `${item.slot}-leading
|
|
93
|
-
<UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items
|
|
94
|
-
<UAvatar v-else-if="item.avatar" :size="
|
|
40
|
+
<slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="index === items.length - 1" :index="index">
|
|
41
|
+
<UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items.length - 1 })" />
|
|
42
|
+
<UAvatar v-else-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items.length - 1 })" />
|
|
95
43
|
</slot>
|
|
96
44
|
|
|
97
|
-
<span v-if="get(item, props.labelKey
|
|
98
|
-
<slot :name="item.slot ? `${item.slot}-label
|
|
99
|
-
{{ get(item, props.labelKey
|
|
45
|
+
<span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
|
|
46
|
+
<slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="index === items.length - 1" :index="index">
|
|
47
|
+
{{ get(item, props.labelKey) }}
|
|
100
48
|
</slot>
|
|
101
49
|
</span>
|
|
102
50
|
|
|
103
|
-
<slot :name="item.slot ? `${item.slot}-trailing
|
|
51
|
+
<slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="index === items.length - 1" :index="index" />
|
|
104
52
|
</slot>
|
|
105
53
|
</ULinkBase>
|
|
106
54
|
</ULink>
|
|
107
55
|
</li>
|
|
108
56
|
|
|
109
|
-
<li v-if="index < items
|
|
57
|
+
<li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: props.ui?.separator })">
|
|
110
58
|
<slot name="separator">
|
|
111
59
|
<UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
|
|
112
60
|
</slot>
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
2
|
+
import theme from '#build/ui/breadcrumb';
|
|
3
|
+
import type { AvatarProps, LinkProps } from '../types';
|
|
4
|
+
import type { DynamicSlots, ComponentConfig } from '../types/utils';
|
|
5
|
+
type Breadcrumb = ComponentConfig<typeof theme, AppConfig, 'breadcrumb'>;
|
|
6
|
+
export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
|
|
7
|
+
label?: string;
|
|
8
|
+
/**
|
|
9
|
+
* @IconifyIcon
|
|
10
|
+
*/
|
|
11
|
+
icon?: string;
|
|
12
|
+
avatar?: AvatarProps;
|
|
13
|
+
slot?: string;
|
|
14
|
+
[key: string]: any;
|
|
15
|
+
}
|
|
16
|
+
export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
|
|
17
|
+
/**
|
|
18
|
+
* The element or component this component should render as.
|
|
19
|
+
* @defaultValue 'nav'
|
|
20
|
+
*/
|
|
21
|
+
as?: any;
|
|
22
|
+
items?: T[];
|
|
23
|
+
/**
|
|
24
|
+
* The icon to use as a separator.
|
|
25
|
+
* @defaultValue appConfig.ui.icons.chevronRight
|
|
26
|
+
* @IconifyIcon
|
|
27
|
+
*/
|
|
28
|
+
separatorIcon?: string;
|
|
29
|
+
/**
|
|
30
|
+
* The key used to get the label from the item.
|
|
31
|
+
* @defaultValue 'label'
|
|
32
|
+
*/
|
|
33
|
+
labelKey?: string;
|
|
34
|
+
class?: any;
|
|
35
|
+
ui?: Breadcrumb['slots'];
|
|
36
|
+
}
|
|
37
|
+
type SlotProps<T extends BreadcrumbItem> = (props: {
|
|
38
|
+
item: T;
|
|
39
|
+
index: number;
|
|
40
|
+
active?: boolean;
|
|
41
|
+
}) => any;
|
|
42
|
+
export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
|
|
43
|
+
'item': SlotProps<T>;
|
|
44
|
+
'item-leading': SlotProps<T>;
|
|
45
|
+
'item-label': SlotProps<T>;
|
|
46
|
+
'item-trailing': SlotProps<T>;
|
|
47
|
+
'separator': any;
|
|
48
|
+
} & DynamicSlots<T, 'leading' | 'label' | 'trailing', {
|
|
49
|
+
index: number;
|
|
50
|
+
active?: boolean;
|
|
51
|
+
}>;
|
|
52
|
+
declare const _default: <T extends BreadcrumbItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
53
|
+
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & BreadcrumbProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
|
|
54
|
+
expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
|
|
55
|
+
attrs: any;
|
|
56
|
+
slots: Readonly<{
|
|
57
|
+
item: SlotProps<T>;
|
|
58
|
+
'item-leading': SlotProps<T>;
|
|
59
|
+
'item-label': SlotProps<T>;
|
|
60
|
+
'item-trailing': SlotProps<T>;
|
|
61
|
+
separator: any;
|
|
62
|
+
} & DynamicSlots<T, "trailing" | "leading" | "label", {
|
|
63
|
+
index: number;
|
|
64
|
+
active?: boolean;
|
|
65
|
+
}>> & {
|
|
66
|
+
item: SlotProps<T>;
|
|
67
|
+
'item-leading': SlotProps<T>;
|
|
68
|
+
'item-label': SlotProps<T>;
|
|
69
|
+
'item-trailing': SlotProps<T>;
|
|
70
|
+
separator: any;
|
|
71
|
+
} & DynamicSlots<T, "trailing" | "leading" | "label", {
|
|
72
|
+
index: number;
|
|
73
|
+
active?: boolean;
|
|
74
|
+
}>;
|
|
75
|
+
emit: {};
|
|
76
|
+
}>) => import("vue").VNode & {
|
|
77
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
78
|
+
};
|
|
79
|
+
export default _default;
|
|
80
|
+
type __VLS_PrettifyLocal<T> = {
|
|
81
|
+
[K in keyof T]: T[K];
|
|
82
|
+
} & {};
|