@bitrix24/b24ui-nuxt 0.5.11 → 0.6.1
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/b24ui/advice.ts +10 -2
- package/.nuxt/b24ui/alert.ts +10 -2
- package/.nuxt/b24ui/avatar-group.ts +10 -2
- package/.nuxt/b24ui/avatar.ts +10 -2
- package/.nuxt/b24ui/badge.ts +10 -2
- package/.nuxt/b24ui/button-group.ts +10 -2
- package/.nuxt/b24ui/button.ts +16 -6
- package/.nuxt/b24ui/calendar.ts +10 -2
- package/.nuxt/b24ui/checkbox.ts +10 -2
- package/.nuxt/b24ui/chip.ts +10 -2
- package/.nuxt/b24ui/collapsible.ts +10 -2
- package/.nuxt/b24ui/container.ts +10 -2
- package/.nuxt/b24ui/countdown.ts +10 -2
- package/.nuxt/b24ui/description-list.ts +10 -2
- package/.nuxt/b24ui/dropdown-menu.ts +10 -2
- package/.nuxt/b24ui/form-field.ts +10 -2
- package/.nuxt/b24ui/form.ts +10 -2
- package/.nuxt/b24ui/input-menu.ts +12 -4
- package/.nuxt/b24ui/input-number.ts +10 -2
- package/.nuxt/b24ui/input.ts +10 -2
- package/.nuxt/b24ui/kbd.ts +10 -2
- package/.nuxt/b24ui/link.ts +10 -2
- package/.nuxt/b24ui/modal.ts +10 -2
- package/.nuxt/b24ui/navbar-divider.ts +10 -2
- package/.nuxt/b24ui/navbar-section.ts +10 -2
- package/.nuxt/b24ui/navbar-spacer.ts +10 -2
- package/.nuxt/b24ui/navbar.ts +10 -2
- package/.nuxt/b24ui/navigation-menu.ts +10 -2
- package/.nuxt/b24ui/popover.ts +10 -2
- package/.nuxt/b24ui/progress.ts +10 -2
- package/.nuxt/b24ui/radio-group.ts +10 -2
- package/.nuxt/b24ui/range.ts +10 -2
- package/.nuxt/b24ui/select-menu.ts +14 -6
- package/.nuxt/b24ui/select.ts +12 -4
- package/.nuxt/b24ui/separator.ts +10 -2
- package/.nuxt/b24ui/sidebar-body.ts +10 -2
- package/.nuxt/b24ui/sidebar-footer.ts +10 -2
- package/.nuxt/b24ui/sidebar-header.ts +10 -2
- package/.nuxt/b24ui/sidebar-heading.ts +10 -2
- package/.nuxt/b24ui/sidebar-layout.ts +10 -2
- package/.nuxt/b24ui/sidebar-section.ts +10 -2
- package/.nuxt/b24ui/sidebar-spacer.ts +10 -2
- package/.nuxt/b24ui/sidebar.ts +10 -2
- package/.nuxt/b24ui/skeleton.ts +10 -2
- package/.nuxt/b24ui/slideover.ts +10 -2
- package/.nuxt/b24ui/stacked-layout.ts +10 -2
- package/.nuxt/b24ui/switch.ts +10 -2
- package/.nuxt/b24ui/tabs.ts +10 -2
- package/.nuxt/b24ui/textarea.ts +10 -2
- package/.nuxt/b24ui/toast.ts +10 -2
- package/.nuxt/b24ui/toaster.ts +10 -2
- package/.nuxt/b24ui/tooltip.ts +10 -2
- package/cli/templates.mjs +19 -15
- package/dist/meta.d.mts +5675 -7513
- package/dist/meta.mjs +5675 -7513
- package/dist/module.json +3 -3
- package/dist/module.mjs +2 -2
- package/dist/runtime/components/Advice.vue +27 -55
- package/dist/runtime/components/Advice.vue.d.ts +56 -0
- package/dist/runtime/components/Alert.vue +35 -97
- package/dist/runtime/components/Alert.vue.d.ts +97 -0
- package/dist/runtime/components/App.vue +24 -34
- package/dist/runtime/components/App.vue.d.ts +23 -0
- package/dist/runtime/components/Avatar.vue +43 -82
- package/dist/runtime/components/Avatar.vue.d.ts +62 -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 +40 -84
- package/dist/runtime/components/Badge.vue.d.ts +78 -0
- package/dist/runtime/components/Button.vue +107 -164
- package/dist/runtime/components/Button.vue.d.ts +115 -0
- package/dist/runtime/components/ButtonGroup.vue +25 -52
- package/dist/runtime/components/ButtonGroup.vue.d.ts +63 -0
- package/dist/runtime/components/Calendar.vue +73 -153
- package/dist/runtime/components/Calendar.vue.d.ts +107 -0
- package/dist/runtime/components/Checkbox.vue +42 -74
- package/dist/runtime/components/Checkbox.vue.d.ts +55 -0
- package/dist/runtime/components/Chip.vue +26 -75
- package/dist/runtime/components/Chip.vue.d.ts +77 -0
- package/dist/runtime/components/Collapsible.vue +22 -41
- package/dist/runtime/components/Collapsible.vue.d.ts +50 -0
- package/dist/runtime/components/Container.vue +15 -28
- package/dist/runtime/components/Container.vue.d.ts +27 -0
- package/dist/runtime/components/Countdown.vue +153 -379
- package/dist/runtime/components/Countdown.vue.d.ts +122 -0
- package/dist/runtime/components/DescriptionList.vue +78 -150
- package/dist/runtime/components/DescriptionList.vue.d.ts +109 -0
- package/dist/runtime/components/DropdownMenu.vue +38 -140
- package/dist/runtime/components/DropdownMenu.vue.d.ts +133 -0
- package/dist/runtime/components/DropdownMenuContent.vue +65 -79
- package/dist/runtime/components/DropdownMenuContent.vue.d.ts +51 -0
- package/dist/runtime/components/Form.vue +132 -218
- package/dist/runtime/components/Form.vue.d.ts +55 -0
- package/dist/runtime/components/FormField.vue +36 -81
- package/dist/runtime/components/FormField.vue.d.ts +73 -0
- package/dist/runtime/components/Input.vue +79 -180
- package/dist/runtime/components/Input.vue.d.ts +135 -0
- package/dist/runtime/components/InputMenu.vue +185 -382
- package/dist/runtime/components/InputMenu.vue.d.ts +357 -0
- package/dist/runtime/components/InputNumber.vue +77 -176
- package/dist/runtime/components/InputNumber.vue.d.ts +238 -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 +99 -179
- package/dist/runtime/components/Link.vue.d.ts +129 -0
- package/dist/runtime/components/LinkBase.vue +33 -42
- package/dist/runtime/components/LinkBase.vue.d.ts +48 -0
- package/dist/runtime/components/Modal.vue +48 -128
- package/dist/runtime/components/Modal.vue.d.ts +124 -0
- package/dist/runtime/components/ModalDialogClose.vue +5 -8
- package/dist/runtime/components/ModalDialogClose.vue.d.ts +10 -0
- package/dist/runtime/components/Navbar.vue +15 -33
- package/dist/runtime/components/Navbar.vue.d.ts +46 -0
- package/dist/runtime/components/NavbarDivider.vue +15 -33
- package/dist/runtime/components/NavbarDivider.vue.d.ts +46 -0
- package/dist/runtime/components/NavbarSection.vue +15 -33
- package/dist/runtime/components/NavbarSection.vue.d.ts +46 -0
- package/dist/runtime/components/NavbarSpacer.vue +15 -33
- package/dist/runtime/components/NavbarSpacer.vue.d.ts +46 -0
- package/dist/runtime/components/NavigationMenu.vue +74 -209
- 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/Popover.vue +40 -82
- package/dist/runtime/components/Popover.vue.d.ts +79 -0
- package/dist/runtime/components/Progress.vue +70 -137
- package/dist/runtime/components/Progress.vue.d.ts +103 -0
- package/dist/runtime/components/RadioGroup.vue +59 -135
- package/dist/runtime/components/RadioGroup.vue.d.ts +88 -0
- package/dist/runtime/components/Range.vue +46 -86
- package/dist/runtime/components/Range.vue.d.ts +73 -0
- package/dist/runtime/components/Select.vue +110 -261
- package/dist/runtime/components/Select.vue.d.ts +170 -0
- package/dist/runtime/components/SelectMenu.vue +161 -348
- package/dist/runtime/components/SelectMenu.vue.d.ts +217 -0
- package/dist/runtime/components/Separator.vue +28 -72
- package/dist/runtime/components/Separator.vue.d.ts +77 -0
- package/dist/runtime/components/Sidebar.vue +15 -33
- package/dist/runtime/components/Sidebar.vue.d.ts +46 -0
- package/dist/runtime/components/SidebarBody.vue +17 -39
- package/dist/runtime/components/SidebarBody.vue.d.ts +53 -0
- package/dist/runtime/components/SidebarFooter.vue +15 -33
- package/dist/runtime/components/SidebarFooter.vue.d.ts +46 -0
- package/dist/runtime/components/SidebarHeader.vue +15 -33
- package/dist/runtime/components/SidebarHeader.vue.d.ts +46 -0
- package/dist/runtime/components/SidebarHeading.vue +15 -33
- package/dist/runtime/components/SidebarHeading.vue.d.ts +46 -0
- package/dist/runtime/components/SidebarLayout.vue +34 -71
- package/dist/runtime/components/SidebarLayout.vue.d.ts +65 -0
- package/dist/runtime/components/SidebarSection.vue +15 -33
- package/dist/runtime/components/SidebarSection.vue.d.ts +46 -0
- package/dist/runtime/components/SidebarSpacer.vue +15 -33
- package/dist/runtime/components/SidebarSpacer.vue.d.ts +46 -0
- package/dist/runtime/components/Skeleton.vue +14 -23
- package/dist/runtime/components/Skeleton.vue.d.ts +26 -0
- package/dist/runtime/components/Slideover.vue +50 -132
- package/dist/runtime/components/Slideover.vue.d.ts +127 -0
- package/dist/runtime/components/StackedLayout.vue +34 -74
- package/dist/runtime/components/StackedLayout.vue.d.ts +65 -0
- package/dist/runtime/components/Switch.vue +46 -96
- package/dist/runtime/components/Switch.vue.d.ts +77 -0
- package/dist/runtime/components/Tabs.vue +41 -106
- package/dist/runtime/components/Tabs.vue.d.ts +104 -0
- package/dist/runtime/components/Textarea.vue +92 -202
- package/dist/runtime/components/Textarea.vue.d.ts +141 -0
- package/dist/runtime/components/Toast.vue +47 -106
- package/dist/runtime/components/Toast.vue.d.ts +95 -0
- package/dist/runtime/components/Toaster.vue +70 -116
- package/dist/runtime/components/Toaster.vue.d.ts +70 -0
- package/dist/runtime/components/Tooltip.vue +36 -65
- package/dist/runtime/components/Tooltip.vue.d.ts +65 -0
- package/dist/runtime/components/content/TableWrapper.vue +24 -71
- package/dist/runtime/components/content/TableWrapper.vue.d.ts +83 -0
- package/dist/runtime/composables/useAvatarGroup.d.ts +1 -1
- package/dist/runtime/composables/useButtonGroup.d.ts +2 -2
- package/dist/runtime/composables/useComponentIcons.d.ts +3 -3
- package/dist/runtime/composables/useFormField.d.ts +2 -2
- package/dist/runtime/composables/useOverlay.d.ts +14 -7
- package/dist/runtime/composables/useOverlay.js +14 -6
- package/dist/runtime/prose/A.vue +16 -26
- package/dist/runtime/prose/A.vue.d.ts +27 -0
- package/dist/runtime/prose/Blockquote.vue +14 -26
- package/dist/runtime/prose/Blockquote.vue.d.ts +27 -0
- package/dist/runtime/prose/Code.vue +15 -32
- package/dist/runtime/prose/Code.vue.d.ts +31 -0
- package/dist/runtime/prose/Em.vue +16 -26
- package/dist/runtime/prose/Em.vue.d.ts +27 -0
- package/dist/runtime/prose/H1.vue +14 -26
- package/dist/runtime/prose/H1.vue.d.ts +27 -0
- package/dist/runtime/prose/H2.vue +14 -26
- package/dist/runtime/prose/H2.vue.d.ts +27 -0
- package/dist/runtime/prose/H3.vue +14 -26
- package/dist/runtime/prose/H3.vue.d.ts +27 -0
- package/dist/runtime/prose/H4.vue +14 -26
- package/dist/runtime/prose/H4.vue.d.ts +27 -0
- package/dist/runtime/prose/H5.vue +14 -26
- package/dist/runtime/prose/H5.vue.d.ts +27 -0
- package/dist/runtime/prose/H6.vue +14 -26
- package/dist/runtime/prose/H6.vue.d.ts +27 -0
- package/dist/runtime/prose/Hr.vue +13 -22
- package/dist/runtime/prose/Hr.vue.d.ts +19 -0
- package/dist/runtime/prose/Img.vue +13 -26
- package/dist/runtime/prose/Img.vue.d.ts +19 -0
- package/dist/runtime/prose/Li.vue +14 -26
- package/dist/runtime/prose/Li.vue.d.ts +27 -0
- package/dist/runtime/prose/Ol.vue +14 -26
- package/dist/runtime/prose/Ol.vue.d.ts +27 -0
- package/dist/runtime/prose/P.vue +14 -26
- package/dist/runtime/prose/P.vue.d.ts +27 -0
- package/dist/runtime/prose/Pre.vue +17 -33
- package/dist/runtime/prose/Pre.vue.d.ts +47 -0
- package/dist/runtime/prose/Strong.vue +14 -26
- package/dist/runtime/prose/Strong.vue.d.ts +27 -0
- package/dist/runtime/prose/Table.vue +21 -57
- package/dist/runtime/prose/Table.vue.d.ts +74 -0
- package/dist/runtime/prose/Tbody.vue +14 -26
- package/dist/runtime/prose/Tbody.vue.d.ts +27 -0
- package/dist/runtime/prose/Td.vue +14 -26
- package/dist/runtime/prose/Td.vue.d.ts +27 -0
- package/dist/runtime/prose/Th.vue +14 -26
- package/dist/runtime/prose/Th.vue.d.ts +27 -0
- package/dist/runtime/prose/Thead.vue +14 -26
- package/dist/runtime/prose/Thead.vue.d.ts +27 -0
- package/dist/runtime/prose/Tr.vue +14 -26
- package/dist/runtime/prose/Tr.vue.d.ts +27 -0
- package/dist/runtime/prose/Ul.vue +14 -26
- package/dist/runtime/prose/Ul.vue.d.ts +27 -0
- package/dist/runtime/types/form.d.ts +1 -0
- package/dist/runtime/types/utils.d.ts +42 -3
- package/dist/runtime/utils/link.d.ts +3 -3
- package/dist/runtime/utils/tv.js +2 -2
- package/dist/runtime/vue/components/Link.vue +122 -208
- package/dist/runtime/vue/components/Link.vue.d.ts +129 -0
- package/dist/shared/{b24ui-nuxt.CS9Lf0os.mjs → b24ui-nuxt.wBs9vEU5.mjs} +33 -8
- package/dist/types.d.mts +3 -5
- package/dist/unplugin.mjs +1 -1
- package/dist/vite.mjs +1 -1
- package/package.json +19 -27
- package/dist/meta.cjs +0 -72112
- package/dist/meta.d.cts +0 -72110
- package/dist/meta.d.ts +0 -72110
- package/dist/module.cjs +0 -63
- package/dist/module.d.cts +0 -15
- package/dist/module.d.ts +0 -15
- package/dist/shared/b24ui-nuxt.DrKwIWoc.cjs +0 -7721
- package/dist/types.d.ts +0 -7
- package/dist/unplugin.cjs +0 -236
- package/dist/unplugin.d.cts +0 -33
- package/dist/unplugin.d.ts +0 -33
- package/dist/vite.cjs +0 -21
- package/dist/vite.d.cts +0 -14
- package/dist/vite.d.ts +0 -14
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
2
|
+
import theme from '#build/b24ui/countdown';
|
|
3
|
+
import type { UseComponentIconsProps } from '../composables/useComponentIcons';
|
|
4
|
+
import type { ComponentConfig } from '../types/utils';
|
|
5
|
+
type Countdown = ComponentConfig<typeof theme, AppConfig, 'countdown'>;
|
|
6
|
+
export interface CountdownData {
|
|
7
|
+
days: number;
|
|
8
|
+
hours: number;
|
|
9
|
+
minutes: number;
|
|
10
|
+
seconds: number;
|
|
11
|
+
milliseconds: number;
|
|
12
|
+
totalDays: number;
|
|
13
|
+
totalHours: number;
|
|
14
|
+
totalMinutes: number;
|
|
15
|
+
totalSeconds: number;
|
|
16
|
+
totalMilliseconds: number;
|
|
17
|
+
}
|
|
18
|
+
export interface CountdownProps extends Omit<UseComponentIconsProps, 'loading' | 'trailing' | 'trailingIcon'> {
|
|
19
|
+
/**
|
|
20
|
+
* The element or component this component should render as
|
|
21
|
+
* @defaultValue 'span'
|
|
22
|
+
*/
|
|
23
|
+
as?: any;
|
|
24
|
+
/**
|
|
25
|
+
* @defaultValue 'md'
|
|
26
|
+
*/
|
|
27
|
+
size?: Countdown['variants']['size'];
|
|
28
|
+
/**
|
|
29
|
+
* Emits the countdown events
|
|
30
|
+
* @defaultValue true
|
|
31
|
+
*/
|
|
32
|
+
emitEvents?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Number of seconds to countdown
|
|
35
|
+
* @defaultValue 0
|
|
36
|
+
*/
|
|
37
|
+
seconds?: number | string;
|
|
38
|
+
/**
|
|
39
|
+
* Should seconds be divided into minutes?
|
|
40
|
+
* @defaultValue true
|
|
41
|
+
*/
|
|
42
|
+
showMinutes?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Shows a `Circle` around the countdown
|
|
45
|
+
* @defaultValue false
|
|
46
|
+
*/
|
|
47
|
+
useCircle?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* The interval time (in milliseconds) of the countdown progress
|
|
50
|
+
* @defaultValue 1000
|
|
51
|
+
*/
|
|
52
|
+
interval?: number;
|
|
53
|
+
/**
|
|
54
|
+
* Starts the countdown automatically when initialized
|
|
55
|
+
* @defaultValue true
|
|
56
|
+
*/
|
|
57
|
+
needStartImmediately?: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* Generate the current time of a specific time zone
|
|
60
|
+
* @defaultValue Date.now()
|
|
61
|
+
*/
|
|
62
|
+
now?: () => number;
|
|
63
|
+
class?: any;
|
|
64
|
+
b24ui?: Countdown['slots'];
|
|
65
|
+
}
|
|
66
|
+
export interface CountdownEmits {
|
|
67
|
+
(e: 'start' | 'end' | 'abort'): void;
|
|
68
|
+
(e: 'progress', payload: CountdownData): void;
|
|
69
|
+
}
|
|
70
|
+
export interface CountdownSlots {
|
|
71
|
+
leading(props?: {}): any;
|
|
72
|
+
default(props: CountdownData & {
|
|
73
|
+
formatTime: string;
|
|
74
|
+
}): any;
|
|
75
|
+
}
|
|
76
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CountdownProps>, {
|
|
77
|
+
as: string;
|
|
78
|
+
needStartImmediately: boolean;
|
|
79
|
+
emitEvents: boolean;
|
|
80
|
+
interval: number;
|
|
81
|
+
now: () => number;
|
|
82
|
+
seconds: number;
|
|
83
|
+
showMinutes: boolean;
|
|
84
|
+
useCircle: boolean;
|
|
85
|
+
}>>, {
|
|
86
|
+
start: () => void;
|
|
87
|
+
abort: () => void;
|
|
88
|
+
stop: () => void;
|
|
89
|
+
restart: () => void;
|
|
90
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
|
|
91
|
+
as: any;
|
|
92
|
+
emitEvents: boolean;
|
|
93
|
+
seconds: number | string;
|
|
94
|
+
showMinutes: boolean;
|
|
95
|
+
useCircle: boolean;
|
|
96
|
+
interval: number;
|
|
97
|
+
needStartImmediately: boolean;
|
|
98
|
+
now: () => number;
|
|
99
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<CountdownSlots> & CountdownSlots>;
|
|
100
|
+
export default _default;
|
|
101
|
+
type __VLS_WithDefaults<P, D> = {
|
|
102
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
|
|
103
|
+
default: D[K];
|
|
104
|
+
}> : P[K];
|
|
105
|
+
};
|
|
106
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
107
|
+
type __VLS_TypePropsToOption<T> = {
|
|
108
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
109
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
110
|
+
} : {
|
|
111
|
+
type: import('vue').PropType<T[K]>;
|
|
112
|
+
required: true;
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
116
|
+
new (): {
|
|
117
|
+
$slots: S;
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
type __VLS_PrettifyLocal<T> = {
|
|
121
|
+
[K in keyof T]: T[K];
|
|
122
|
+
} & {};
|
|
@@ -1,125 +1,53 @@
|
|
|
1
|
-
<script
|
|
2
|
-
import
|
|
3
|
-
import type { AppConfig } from '@nuxt/schema'
|
|
4
|
-
import _appConfig from '#build/app.config'
|
|
5
|
-
import theme from '#build/b24ui/description-list'
|
|
6
|
-
import { tv } from '../utils/tv'
|
|
7
|
-
import type { AvatarProps, ButtonProps, IconComponent } from '../types'
|
|
8
|
-
import type { DynamicSlots } from '../types/utils'
|
|
9
|
-
|
|
10
|
-
const appConfigDescriptionList = _appConfig as AppConfig & { b24ui: { descriptionList: Partial<typeof theme> } }
|
|
11
|
-
|
|
12
|
-
const descriptionList = tv({ extend: tv(theme), ...(appConfigDescriptionList.b24ui?.descriptionList || {}) })
|
|
13
|
-
|
|
14
|
-
type DescriptionListVariants = VariantProps<typeof descriptionList>
|
|
15
|
-
|
|
16
|
-
export interface DescriptionListItem {
|
|
17
|
-
label?: string
|
|
18
|
-
/**
|
|
19
|
-
* Display an icon on the left side.
|
|
20
|
-
* @IconComponent
|
|
21
|
-
*/
|
|
22
|
-
icon?: IconComponent
|
|
23
|
-
avatar?: AvatarProps
|
|
24
|
-
slot?: string
|
|
25
|
-
description?: string
|
|
26
|
-
/**
|
|
27
|
-
* The orientation between the content and the actions.
|
|
28
|
-
* @defaultValue 'vertical'
|
|
29
|
-
*/
|
|
30
|
-
orientation?: DescriptionListVariants['orientation']
|
|
31
|
-
/**
|
|
32
|
-
* Display a list of actions:
|
|
33
|
-
* - under the description when orientation is `vertical`
|
|
34
|
-
* - next to the description when orientation is `horizontal`
|
|
35
|
-
* `{ size: 'xs' }`{lang="ts"}
|
|
36
|
-
*/
|
|
37
|
-
actions?: ButtonProps[]
|
|
38
|
-
class?: any
|
|
39
|
-
b24ui?: Partial<typeof descriptionList.slots>
|
|
40
|
-
[key: string]: any
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export interface DescriptionListProps<T extends DescriptionListItem = DescriptionListItem> {
|
|
44
|
-
legend?: string
|
|
45
|
-
text?: string
|
|
46
|
-
/**
|
|
47
|
-
* The key used to get the label from the item.
|
|
48
|
-
* @defaultValue 'label'
|
|
49
|
-
*/
|
|
50
|
-
labelKey?: string
|
|
51
|
-
/**
|
|
52
|
-
* The key used to get the description from the item.
|
|
53
|
-
* @defaultValue 'description'
|
|
54
|
-
*/
|
|
55
|
-
descriptionKey?: string
|
|
56
|
-
items?: T[]
|
|
57
|
-
/**
|
|
58
|
-
* @defaultValue 'md'
|
|
59
|
-
*/
|
|
60
|
-
size?: DescriptionListVariants['size']
|
|
61
|
-
class?: any
|
|
62
|
-
b24ui?: Partial<typeof descriptionList.slots>
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
type SlotProps<T extends DescriptionListItem> = (props: { item: T, index: number }) => any
|
|
66
|
-
|
|
67
|
-
export type DescriptionListSlots<T extends DescriptionListItem = DescriptionListItem> = {
|
|
68
|
-
legend(props?: {}): any
|
|
69
|
-
text(props?: {}): any
|
|
70
|
-
leading: SlotProps<T>
|
|
71
|
-
label: SlotProps<T>
|
|
72
|
-
description: SlotProps<T>
|
|
73
|
-
actions: SlotProps<T>
|
|
74
|
-
content: SlotProps<T>
|
|
75
|
-
footer(props?: { b24ui: any }): any
|
|
76
|
-
} & DynamicSlots<T, undefined, { index: number }>
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/b24ui/description-list";
|
|
77
3
|
</script>
|
|
78
4
|
|
|
79
|
-
<script setup
|
|
80
|
-
import { computed } from
|
|
81
|
-
import {
|
|
82
|
-
import
|
|
83
|
-
import
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { useAppConfig } from "#imports";
|
|
8
|
+
import { get } from "../utils";
|
|
9
|
+
import { tv } from "../utils/tv";
|
|
10
|
+
import B24Avatar from "./Avatar.vue";
|
|
11
|
+
import B24Button from "./Button.vue";
|
|
12
|
+
const props = defineProps({
|
|
13
|
+
legend: { type: String, required: false },
|
|
14
|
+
text: { type: String, required: false },
|
|
15
|
+
labelKey: { type: String, required: false, default: "label" },
|
|
16
|
+
descriptionKey: { type: String, required: false, default: "description" },
|
|
17
|
+
items: { type: Array, required: false },
|
|
18
|
+
size: { type: null, required: false },
|
|
19
|
+
class: { type: null, required: false },
|
|
20
|
+
b24ui: { type: null, required: false }
|
|
21
|
+
});
|
|
22
|
+
const slots = defineSlots();
|
|
23
|
+
const appConfig = useAppConfig();
|
|
24
|
+
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.descriptionList || {} })({
|
|
92
25
|
size: props.size
|
|
93
|
-
}))
|
|
94
|
-
|
|
95
|
-
function normalizeItem(item: any) {
|
|
26
|
+
}));
|
|
27
|
+
function normalizeItem(item) {
|
|
96
28
|
if (item === null) {
|
|
97
29
|
return {
|
|
98
|
-
label:
|
|
99
|
-
description:
|
|
100
|
-
orientation:
|
|
101
|
-
}
|
|
30
|
+
label: void 0,
|
|
31
|
+
description: void 0,
|
|
32
|
+
orientation: void 0
|
|
33
|
+
};
|
|
102
34
|
}
|
|
103
|
-
|
|
104
|
-
const
|
|
105
|
-
const
|
|
106
|
-
const orientation = item?.orientation || 'vertical'
|
|
107
|
-
|
|
35
|
+
const label = get(item, props.labelKey);
|
|
36
|
+
const description = get(item, props.descriptionKey);
|
|
37
|
+
const orientation = item?.orientation || "vertical";
|
|
108
38
|
return {
|
|
109
39
|
...item,
|
|
110
40
|
label,
|
|
111
41
|
description,
|
|
112
42
|
orientation
|
|
113
|
-
}
|
|
43
|
+
};
|
|
114
44
|
}
|
|
115
|
-
|
|
116
45
|
const normalizedItems = computed(() => {
|
|
117
46
|
if (!props.items) {
|
|
118
|
-
return []
|
|
47
|
+
return [];
|
|
119
48
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
})
|
|
49
|
+
return props.items.map(normalizeItem);
|
|
50
|
+
});
|
|
123
51
|
</script>
|
|
124
52
|
|
|
125
53
|
<template>
|
|
@@ -141,49 +69,49 @@ const normalizedItems = computed(() => {
|
|
|
141
69
|
:key="index"
|
|
142
70
|
>
|
|
143
71
|
<slot
|
|
144
|
-
:name="
|
|
145
|
-
:item="
|
|
72
|
+
:name="item.slot || 'content'"
|
|
73
|
+
:item="item"
|
|
146
74
|
:index="index"
|
|
147
75
|
>
|
|
148
76
|
<dt
|
|
149
77
|
:class="b24ui.labelWrapper({
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
78
|
+
class: [
|
|
79
|
+
props.b24ui?.labelWrapper,
|
|
80
|
+
item?.b24ui?.labelWrapper
|
|
81
|
+
]
|
|
82
|
+
})"
|
|
155
83
|
>
|
|
156
84
|
<slot name="leading" :item="item" :index="index">
|
|
157
85
|
<Component
|
|
158
86
|
:is="item.icon"
|
|
159
87
|
v-if="item.icon"
|
|
160
88
|
:class="b24ui.icon({
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
89
|
+
class: [
|
|
90
|
+
props.b24ui?.icon,
|
|
91
|
+
item?.b24ui?.icon
|
|
92
|
+
]
|
|
93
|
+
})"
|
|
166
94
|
/>
|
|
167
95
|
<B24Avatar
|
|
168
96
|
v-else-if="item.avatar"
|
|
169
|
-
:size="
|
|
97
|
+
:size="props.b24ui?.avatarSize || b24ui.avatarSize()"
|
|
170
98
|
v-bind="item.avatar"
|
|
171
99
|
:class="b24ui.avatar({
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
100
|
+
class: [
|
|
101
|
+
props.b24ui?.avatar,
|
|
102
|
+
item?.b24ui?.avatar
|
|
103
|
+
]
|
|
104
|
+
})"
|
|
177
105
|
/>
|
|
178
106
|
</slot>
|
|
179
107
|
<span
|
|
180
108
|
:class="b24ui.label({
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
109
|
+
class: [
|
|
110
|
+
item?.class,
|
|
111
|
+
props.b24ui?.label,
|
|
112
|
+
item?.b24ui?.label
|
|
113
|
+
]
|
|
114
|
+
})"
|
|
187
115
|
>
|
|
188
116
|
<slot name="label" :item="item" :index="index">
|
|
189
117
|
{{ item.label }}
|
|
@@ -193,22 +121,22 @@ const normalizedItems = computed(() => {
|
|
|
193
121
|
<dd
|
|
194
122
|
:data-orientation="item.orientation"
|
|
195
123
|
:class="b24ui.descriptionWrapper({
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
124
|
+
class: [
|
|
125
|
+
props.b24ui?.descriptionWrapper,
|
|
126
|
+
item?.b24ui?.descriptionWrapper
|
|
127
|
+
],
|
|
128
|
+
orientation: item.orientation
|
|
129
|
+
})"
|
|
202
130
|
>
|
|
203
131
|
<span
|
|
204
132
|
:class="b24ui.description({
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
133
|
+
class: [
|
|
134
|
+
item?.class,
|
|
135
|
+
props.b24ui?.description,
|
|
136
|
+
item?.b24ui?.description
|
|
137
|
+
],
|
|
138
|
+
orientation: item.orientation
|
|
139
|
+
})"
|
|
212
140
|
>
|
|
213
141
|
<slot name="description" :item="item" :index="index">
|
|
214
142
|
{{ item.description }}
|
|
@@ -217,12 +145,12 @@ const normalizedItems = computed(() => {
|
|
|
217
145
|
<span
|
|
218
146
|
v-if="item.actions?.length || !!slots.actions"
|
|
219
147
|
:class="b24ui.actions({
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
148
|
+
class: [
|
|
149
|
+
props.b24ui?.actions,
|
|
150
|
+
item?.b24ui?.actions
|
|
151
|
+
],
|
|
152
|
+
orientation: item.orientation
|
|
153
|
+
})"
|
|
226
154
|
>
|
|
227
155
|
<slot name="actions" :item="item" :index="index">
|
|
228
156
|
<B24Button
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
2
|
+
import theme from '#build/b24ui/description-list';
|
|
3
|
+
import type { AvatarProps, ButtonProps, IconComponent } from '../types';
|
|
4
|
+
import type { DynamicSlots, ComponentConfig } from '../types/utils';
|
|
5
|
+
type DescriptionList = ComponentConfig<typeof theme, AppConfig, 'descriptionList'>;
|
|
6
|
+
export interface DescriptionListItem {
|
|
7
|
+
label?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Display an icon on the left side.
|
|
10
|
+
* @IconComponent
|
|
11
|
+
*/
|
|
12
|
+
icon?: IconComponent;
|
|
13
|
+
avatar?: AvatarProps;
|
|
14
|
+
slot?: string;
|
|
15
|
+
description?: string;
|
|
16
|
+
/**
|
|
17
|
+
* The orientation between the content and the actions.
|
|
18
|
+
* @defaultValue 'vertical'
|
|
19
|
+
*/
|
|
20
|
+
orientation?: DescriptionList['variants']['orientation'];
|
|
21
|
+
/**
|
|
22
|
+
* Display a list of actions:
|
|
23
|
+
* - under the description when orientation is `vertical`
|
|
24
|
+
* - next to the description when orientation is `horizontal`
|
|
25
|
+
* `{ size: 'xs' }`{lang="ts"}
|
|
26
|
+
*/
|
|
27
|
+
actions?: ButtonProps[];
|
|
28
|
+
class?: any;
|
|
29
|
+
b24ui?: DescriptionList['slots'];
|
|
30
|
+
[key: string]: any;
|
|
31
|
+
}
|
|
32
|
+
export interface DescriptionListProps<T extends DescriptionListItem = DescriptionListItem> {
|
|
33
|
+
legend?: string;
|
|
34
|
+
text?: string;
|
|
35
|
+
/**
|
|
36
|
+
* The key used to get the label from the item.
|
|
37
|
+
* @defaultValue 'label'
|
|
38
|
+
*/
|
|
39
|
+
labelKey?: string;
|
|
40
|
+
/**
|
|
41
|
+
* The key used to get the description from the item.
|
|
42
|
+
* @defaultValue 'description'
|
|
43
|
+
*/
|
|
44
|
+
descriptionKey?: string;
|
|
45
|
+
items?: T[];
|
|
46
|
+
/**
|
|
47
|
+
* @defaultValue 'md'
|
|
48
|
+
*/
|
|
49
|
+
size?: DescriptionList['variants']['size'];
|
|
50
|
+
class?: any;
|
|
51
|
+
b24ui?: DescriptionList['slots'];
|
|
52
|
+
}
|
|
53
|
+
type SlotProps<T extends DescriptionListItem> = (props: {
|
|
54
|
+
item: T;
|
|
55
|
+
index: number;
|
|
56
|
+
}) => any;
|
|
57
|
+
export type DescriptionListSlots<T extends DescriptionListItem = DescriptionListItem> = {
|
|
58
|
+
legend(props?: {}): any;
|
|
59
|
+
text(props?: {}): any;
|
|
60
|
+
leading: SlotProps<T>;
|
|
61
|
+
label: SlotProps<T>;
|
|
62
|
+
description: SlotProps<T>;
|
|
63
|
+
actions: SlotProps<T>;
|
|
64
|
+
content: SlotProps<T>;
|
|
65
|
+
footer(props?: {
|
|
66
|
+
b24ui: any;
|
|
67
|
+
}): any;
|
|
68
|
+
} & DynamicSlots<T, undefined, {
|
|
69
|
+
index: number;
|
|
70
|
+
}>;
|
|
71
|
+
declare const _default: <T extends DescriptionListItem>(__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<{
|
|
72
|
+
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DescriptionListProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
|
|
73
|
+
expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
|
|
74
|
+
attrs: any;
|
|
75
|
+
slots: Readonly<{
|
|
76
|
+
legend(props?: {}): any;
|
|
77
|
+
text(props?: {}): any;
|
|
78
|
+
leading: SlotProps<T>;
|
|
79
|
+
label: SlotProps<T>;
|
|
80
|
+
description: SlotProps<T>;
|
|
81
|
+
actions: SlotProps<T>;
|
|
82
|
+
content: SlotProps<T>;
|
|
83
|
+
footer(props?: {
|
|
84
|
+
b24ui: any;
|
|
85
|
+
}): any;
|
|
86
|
+
} & DynamicSlots<T, undefined, {
|
|
87
|
+
index: number;
|
|
88
|
+
}>> & {
|
|
89
|
+
legend(props?: {}): any;
|
|
90
|
+
text(props?: {}): any;
|
|
91
|
+
leading: SlotProps<T>;
|
|
92
|
+
label: SlotProps<T>;
|
|
93
|
+
description: SlotProps<T>;
|
|
94
|
+
actions: SlotProps<T>;
|
|
95
|
+
content: SlotProps<T>;
|
|
96
|
+
footer(props?: {
|
|
97
|
+
b24ui: any;
|
|
98
|
+
}): any;
|
|
99
|
+
} & DynamicSlots<T, undefined, {
|
|
100
|
+
index: number;
|
|
101
|
+
}>;
|
|
102
|
+
emit: {};
|
|
103
|
+
}>) => import("vue").VNode & {
|
|
104
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
105
|
+
};
|
|
106
|
+
export default _default;
|
|
107
|
+
type __VLS_PrettifyLocal<T> = {
|
|
108
|
+
[K in keyof T]: T[K];
|
|
109
|
+
} & {};
|