nuance-ui 0.2.1 → 0.2.5
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/LICENSE.md +9 -9
- package/README.md +75 -75
- package/dist/module.json +1 -1
- package/dist/runtime/components/action-icon/action-icon-section.vue +3 -3
- package/dist/runtime/components/action-icon/action-icon.vue +22 -22
- package/dist/runtime/components/alert.vue +128 -128
- package/dist/runtime/components/app-shell/app-shell-aside.vue +30 -30
- package/dist/runtime/components/app-shell/app-shell-footer.vue +29 -29
- package/dist/runtime/components/app-shell/app-shell-header.vue +30 -30
- package/dist/runtime/components/app-shell/app-shell-navbar.vue +34 -34
- package/dist/runtime/components/app-shell/app-shell-section.vue +10 -10
- package/dist/runtime/components/app-shell/app-shell.vue +34 -34
- package/dist/runtime/components/avatar/avatar-group.vue +3 -3
- package/dist/runtime/components/avatar/avatar.vue +14 -14
- package/dist/runtime/components/background-image.vue +18 -18
- package/dist/runtime/components/badge.vue +159 -160
- package/dist/runtime/components/box.vue +3 -3
- package/dist/runtime/components/breadcrumbs.vue +78 -78
- package/dist/runtime/components/button/button-group.vue +3 -3
- package/dist/runtime/components/button/button.vue +37 -37
- package/dist/runtime/components/button/unstyled-button.vue +23 -23
- package/dist/runtime/components/calendar/calendar.vue +60 -60
- package/dist/runtime/components/calendar/ui/core/calendar-cell.vue +115 -115
- package/dist/runtime/components/calendar/ui/core/calendar-header.vue +95 -95
- package/dist/runtime/components/calendar/ui/core/calendar-root.vue +3 -3
- package/dist/runtime/components/calendar/ui/levels/calendar-decade.vue +40 -40
- package/dist/runtime/components/calendar/ui/levels/calendar-month.vue +77 -77
- package/dist/runtime/components/calendar/ui/levels/calendar-year.vue +40 -40
- package/dist/runtime/components/card/card-section.vue +3 -3
- package/dist/runtime/components/card/card.vue +3 -3
- package/dist/runtime/components/checkbox/checkbox-card.vue +36 -36
- package/dist/runtime/components/checkbox/checkbox-group.vue +16 -16
- package/dist/runtime/components/checkbox/checkbox-indicator.vue +116 -116
- package/dist/runtime/components/checkbox/checkbox.vue +140 -140
- package/dist/runtime/components/chip/chip-group.vue +2 -2
- package/dist/runtime/components/chip/chip.vue +200 -200
- package/dist/runtime/components/combobox/combobox-dropdown.vue +14 -14
- package/dist/runtime/components/combobox/combobox-empty.vue +3 -3
- package/dist/runtime/components/combobox/combobox-group.vue +21 -21
- package/dist/runtime/components/combobox/combobox-option-list.vue +3 -3
- package/dist/runtime/components/combobox/combobox-option.vue +26 -26
- package/dist/runtime/components/combobox/combobox-options-dropdown.vue +28 -28
- package/dist/runtime/components/combobox/combobox-root.vue +3 -3
- package/dist/runtime/components/combobox/combobox-target.vue +3 -3
- package/dist/runtime/components/container.vue +8 -8
- package/dist/runtime/components/date-time-picker.vue +65 -65
- package/dist/runtime/components/dialog/ui/dialog-close-button.vue +11 -11
- package/dist/runtime/components/dialog/ui/dialog-header.vue +5 -5
- package/dist/runtime/components/dialog/ui/dialog-root.vue +20 -20
- package/dist/runtime/components/dialog/ui/dialog-title.vue +5 -5
- package/dist/runtime/components/drawer/drawer-close-button.vue +3 -3
- package/dist/runtime/components/drawer/drawer-header.vue +3 -3
- package/dist/runtime/components/drawer/drawer-root.vue +15 -15
- package/dist/runtime/components/drawer/drawer-title.vue +3 -3
- package/dist/runtime/components/files/file-upload-button.vue +12 -12
- package/dist/runtime/components/files/file-upload-icon.vue +1 -1
- package/dist/runtime/components/input/date-picker.vue +85 -85
- package/dist/runtime/components/input/email-input.vue +21 -21
- package/dist/runtime/components/input/number-input.vue +132 -132
- package/dist/runtime/components/input/password-input.vue +28 -28
- package/dist/runtime/components/input/text-input.vue +33 -33
- package/dist/runtime/components/input/ui/button-input.vue +64 -64
- package/dist/runtime/components/input/ui/input-base.vue +283 -283
- package/dist/runtime/components/input/ui/input-inline.vue +105 -105
- package/dist/runtime/components/input/ui/input-label.vue +4 -4
- package/dist/runtime/components/input/ui/input-wrapper.vue +54 -54
- package/dist/runtime/components/input/ui/spin-input.vue +69 -69
- package/dist/runtime/components/link/link-button.vue +16 -16
- package/dist/runtime/components/link/link.vue +10 -10
- package/dist/runtime/components/loader/_loaders/bars-loader.vue +5 -5
- package/dist/runtime/components/loader/_loaders/dots-loader.vue +5 -5
- package/dist/runtime/components/loader/_loaders/oval-loader.vue +1 -1
- package/dist/runtime/components/loader/loader.vue +1 -1
- package/dist/runtime/components/modal/modal-close-button.vue +3 -3
- package/dist/runtime/components/modal/modal-header.vue +3 -3
- package/dist/runtime/components/modal/modal-root.vue +13 -13
- package/dist/runtime/components/modal/modal-title.vue +3 -3
- package/dist/runtime/components/nav-link/nav-icon-link.vue +15 -15
- package/dist/runtime/components/nav-link/nav-link.vue +130 -130
- package/dist/runtime/components/paper.vue +33 -33
- package/dist/runtime/components/popover/popover-dropdown.vue +69 -70
- package/dist/runtime/components/popover/popover-target.vue +8 -8
- package/dist/runtime/components/popover/popover.vue +1 -1
- package/dist/runtime/components/progress/progress-label.vue +3 -3
- package/dist/runtime/components/progress/progress-root.vue +3 -3
- package/dist/runtime/components/progress/progress-section.vue +8 -8
- package/dist/runtime/components/progress/progress.vue +9 -9
- package/dist/runtime/components/renderless/renderless.vue +3 -3
- package/dist/runtime/components/roving-focus/roving-focus-item.vue +14 -14
- package/dist/runtime/components/roving-focus/roving-focus.vue +3 -3
- package/dist/runtime/components/select/select.vue +59 -59
- package/dist/runtime/components/table/table.d.ts +30 -30
- package/dist/runtime/components/table/ui/table-sort-icon.vue +1 -1
- package/dist/runtime/components/table/ui/table-sortable-header.vue +11 -11
- package/dist/runtime/components/table/ui/table.vue +295 -295
- package/dist/runtime/components/tabs/tabs-list.vue +10 -10
- package/dist/runtime/components/tabs/tabs-panel.vue +11 -11
- package/dist/runtime/components/tabs/tabs-root.vue +8 -8
- package/dist/runtime/components/tabs/tabs-tab.vue +20 -20
- package/dist/runtime/components/text.vue +67 -67
- package/dist/runtime/components/textarea.vue +34 -34
- package/dist/runtime/components/time-picker/time-picker.vue +230 -230
- package/dist/runtime/components/title.vue +14 -14
- package/dist/runtime/components/transition/transition.vue +3 -3
- package/dist/runtime/components/tree/_ui/tree-item.vue +128 -129
- package/dist/runtime/components/tree/_ui/tree-root.vue +21 -21
- package/dist/runtime/components/tree/tree.vue +20 -20
- package/dist/runtime/components/visually-hidden/visually-hidden-input.vue +1 -1
- package/dist/runtime/components/visually-hidden/visually-hidden.vue +9 -9
- package/dist/runtime/modals/_confirm-modal/confirm-modal.vue +31 -31
- package/dist/runtime/modals/modals-provider.vue +10 -10
- package/dist/runtime/styles/dark-theme.css +1 -1
- package/package.json +30 -10
|
@@ -57,17 +57,17 @@ useProvideTabsContext({
|
|
|
57
57
|
</script>
|
|
58
58
|
|
|
59
59
|
<template>
|
|
60
|
-
<Box
|
|
61
|
-
:is
|
|
62
|
-
:style
|
|
60
|
+
<Box
|
|
61
|
+
:is
|
|
62
|
+
:style
|
|
63
63
|
:mod='[mod, {
|
|
64
64
|
orientation,
|
|
65
65
|
inverted: orientation === "horizontal" && inverted,
|
|
66
66
|
placement: orientation === "vertical" && placement,
|
|
67
67
|
variant
|
|
68
|
-
}]'
|
|
69
|
-
:class='css.root'
|
|
70
|
-
>
|
|
71
|
-
<slot />
|
|
72
|
-
</Box>
|
|
68
|
+
}]'
|
|
69
|
+
:class='css.root'
|
|
70
|
+
>
|
|
71
|
+
<slot />
|
|
72
|
+
</Box>
|
|
73
73
|
</template>
|
|
@@ -12,30 +12,30 @@ const active = computed(() => value === ctx?.active.value);
|
|
|
12
12
|
</script>
|
|
13
13
|
|
|
14
14
|
<template>
|
|
15
|
-
<UnstyledButton
|
|
16
|
-
:id='ctx?.getTabId(value)'
|
|
15
|
+
<UnstyledButton
|
|
16
|
+
:id='ctx?.getTabId(value)'
|
|
17
17
|
:mod='[mod, {
|
|
18
18
|
variant: ctx?.variant,
|
|
19
19
|
active,
|
|
20
20
|
orientation: ctx?.orientation,
|
|
21
21
|
inverted: ctx?.inverted,
|
|
22
22
|
placement: ctx?.orientation === "vertical" && ctx.placement
|
|
23
|
-
}]'
|
|
24
|
-
:class='css.tab'
|
|
25
|
-
role='tab'
|
|
26
|
-
:aria-selected='active'
|
|
27
|
-
:tabindex='$attrs?.tabIndex !== void 0 ? $attrs?.tabIndex : active || ctx?.active.value === null ? 0 : -1'
|
|
28
|
-
:aria-controls='ctx?.getPanelId(value)'
|
|
29
|
-
@click='ctx?.onUpdate(value)'
|
|
30
|
-
>
|
|
31
|
-
<span v-if='$slots.leftSection' :class='css.tabSection' data-position='left'>
|
|
32
|
-
<slot name='leftSection' />
|
|
33
|
-
</span>
|
|
34
|
-
<span v-if='$slots.default' :class='css.tabLabel'>
|
|
35
|
-
<slot />
|
|
36
|
-
</span>
|
|
37
|
-
<span v-if='$slots.rightSection' :class='css.tabSection' data-position='right'>
|
|
38
|
-
<slot name='rightSection' />
|
|
39
|
-
</span>
|
|
40
|
-
</UnstyledButton>
|
|
23
|
+
}]'
|
|
24
|
+
:class='css.tab'
|
|
25
|
+
role='tab'
|
|
26
|
+
:aria-selected='active'
|
|
27
|
+
:tabindex='$attrs?.tabIndex !== void 0 ? $attrs?.tabIndex : active || ctx?.active.value === null ? 0 : -1'
|
|
28
|
+
:aria-controls='ctx?.getPanelId(value)'
|
|
29
|
+
@click='ctx?.onUpdate(value)'
|
|
30
|
+
>
|
|
31
|
+
<span v-if='$slots.leftSection' :class='css.tabSection' data-position='left'>
|
|
32
|
+
<slot name='leftSection' />
|
|
33
|
+
</span>
|
|
34
|
+
<span v-if='$slots.default' :class='css.tabLabel'>
|
|
35
|
+
<slot />
|
|
36
|
+
</span>
|
|
37
|
+
<span v-if='$slots.rightSection' :class='css.tabSection' data-position='right'>
|
|
38
|
+
<slot name='rightSection' />
|
|
39
|
+
</span>
|
|
40
|
+
</UnstyledButton>
|
|
41
41
|
</template>
|
|
@@ -51,74 +51,74 @@ const style = computed(() => useStyleResolver((theme) => ({
|
|
|
51
51
|
</script>
|
|
52
52
|
|
|
53
53
|
<template>
|
|
54
|
-
<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style>
|
|
55
|
-
<slot />
|
|
56
|
-
</Box>
|
|
54
|
+
<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style>
|
|
55
|
+
<slot />
|
|
56
|
+
</Box>
|
|
57
57
|
</template>
|
|
58
58
|
|
|
59
59
|
<style module lang="postcss">
|
|
60
|
-
.root {
|
|
61
|
-
--text-fz: var(--font-size-sm);
|
|
62
|
-
--text-lh: var(--line-height-sm);
|
|
63
|
-
--text-color: inherit;
|
|
64
|
-
--text-fw: normal;
|
|
65
|
-
--text-gradient: none;
|
|
66
|
-
--text-line-clamp: none;
|
|
67
|
-
|
|
68
|
-
margin: 0;
|
|
69
|
-
padding: 0;
|
|
70
|
-
|
|
71
|
-
font-size: var(--text-fz);
|
|
72
|
-
font-weight: var(--text-fw);
|
|
73
|
-
line-height: var(--text-lh);
|
|
74
|
-
color: var(--text-color);
|
|
75
|
-
text-decoration: none;
|
|
76
|
-
-webkit-tap-highlight-color: transparent;
|
|
77
|
-
|
|
78
|
-
&:where([data-truncate]) {
|
|
79
|
-
overflow: hidden;
|
|
80
|
-
|
|
81
|
-
text-overflow: ellipsis;
|
|
82
|
-
white-space: nowrap;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
&:where([data-truncate='start']) {
|
|
86
|
-
direction: rtl;
|
|
87
|
-
|
|
88
|
-
text-align: right;
|
|
89
|
-
|
|
90
|
-
@mixin where-rtl {
|
|
91
|
-
direction: ltr;
|
|
92
|
-
|
|
93
|
-
text-align: left;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
&:where([data-variant='gradient']) {
|
|
98
|
-
background-image: var(--text-gradient);
|
|
99
|
-
-webkit-background-clip: text;
|
|
100
|
-
background-clip: text;
|
|
101
|
-
-webkit-text-fill-color: transparent;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
&:where([data-line-clamp]) {
|
|
105
|
-
overflow: hidden;
|
|
106
|
-
display: -webkit-box;
|
|
107
|
-
-webkit-box-orient: vertical;
|
|
108
|
-
-webkit-line-clamp: var(--text-line-clamp);
|
|
109
|
-
|
|
110
|
-
text-overflow: ellipsis;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
&:where([data-inherit]) {
|
|
114
|
-
font-size: inherit;
|
|
115
|
-
font-weight: inherit;
|
|
116
|
-
line-height: inherit;
|
|
117
|
-
color: inherit;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
&:where([data-inline]) {
|
|
121
|
-
line-height: 1;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
60
|
+
.root {
|
|
61
|
+
--text-fz: var(--font-size-sm);
|
|
62
|
+
--text-lh: var(--line-height-sm);
|
|
63
|
+
--text-color: inherit;
|
|
64
|
+
--text-fw: normal;
|
|
65
|
+
--text-gradient: none;
|
|
66
|
+
--text-line-clamp: none;
|
|
67
|
+
|
|
68
|
+
margin: 0;
|
|
69
|
+
padding: 0;
|
|
70
|
+
|
|
71
|
+
font-size: var(--text-fz);
|
|
72
|
+
font-weight: var(--text-fw);
|
|
73
|
+
line-height: var(--text-lh);
|
|
74
|
+
color: var(--text-color);
|
|
75
|
+
text-decoration: none;
|
|
76
|
+
-webkit-tap-highlight-color: transparent;
|
|
77
|
+
|
|
78
|
+
&:where([data-truncate]) {
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
|
|
81
|
+
text-overflow: ellipsis;
|
|
82
|
+
white-space: nowrap;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&:where([data-truncate='start']) {
|
|
86
|
+
direction: rtl;
|
|
87
|
+
|
|
88
|
+
text-align: right;
|
|
89
|
+
|
|
90
|
+
@mixin where-rtl {
|
|
91
|
+
direction: ltr;
|
|
92
|
+
|
|
93
|
+
text-align: left;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&:where([data-variant='gradient']) {
|
|
98
|
+
background-image: var(--text-gradient);
|
|
99
|
+
-webkit-background-clip: text;
|
|
100
|
+
background-clip: text;
|
|
101
|
+
-webkit-text-fill-color: transparent;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&:where([data-line-clamp]) {
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
display: -webkit-box;
|
|
107
|
+
-webkit-box-orient: vertical;
|
|
108
|
+
-webkit-line-clamp: var(--text-line-clamp);
|
|
109
|
+
|
|
110
|
+
text-overflow: ellipsis;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&:where([data-inherit]) {
|
|
114
|
+
font-size: inherit;
|
|
115
|
+
font-weight: inherit;
|
|
116
|
+
line-height: inherit;
|
|
117
|
+
color: inherit;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&:where([data-inline]) {
|
|
121
|
+
line-height: 1;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
124
|
</style>
|
|
@@ -32,40 +32,40 @@ defineExpose({
|
|
|
32
32
|
</script>
|
|
33
33
|
|
|
34
34
|
<template>
|
|
35
|
-
<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
|
|
36
|
-
<InputBase>
|
|
37
|
-
<template v-if='!!$slots.leftSection' #leftSection>
|
|
38
|
-
<slot name='leftSection' />
|
|
39
|
-
</template>
|
|
40
|
-
|
|
41
|
-
<template #default='{ id, css }'>
|
|
42
|
-
<textarea
|
|
43
|
-
v-bind='{ ...$attrs, class: void 0 }'
|
|
44
|
-
:id
|
|
45
|
-
ref='input'
|
|
46
|
-
v-model='model'
|
|
47
|
-
:class='[css, $style.textarea]'
|
|
48
|
-
:required='props.required'
|
|
49
|
-
:disabled='props.required'
|
|
50
|
-
:readonly='props.readonly'
|
|
51
|
-
/>
|
|
52
|
-
</template>
|
|
53
|
-
|
|
54
|
-
<template v-if='!!$slots.rightSection' #rightSection>
|
|
55
|
-
<slot name='rightSection' />
|
|
56
|
-
</template>
|
|
57
|
-
</InputBase>
|
|
58
|
-
|
|
59
|
-
<template v-if='!!$slots.label' #label>
|
|
60
|
-
<slot name='label' />
|
|
61
|
-
</template>
|
|
62
|
-
<template v-if='!!$slots.error' #error>
|
|
63
|
-
<slot name='error' />
|
|
64
|
-
</template>
|
|
65
|
-
<template v-if='!!$slots.description' #description>
|
|
66
|
-
<slot name='description' />
|
|
67
|
-
</template>
|
|
68
|
-
</InputWrapper>
|
|
35
|
+
<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
|
|
36
|
+
<InputBase>
|
|
37
|
+
<template v-if='!!$slots.leftSection' #leftSection>
|
|
38
|
+
<slot name='leftSection' />
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<template #default='{ id, css }'>
|
|
42
|
+
<textarea
|
|
43
|
+
v-bind='{ ...$attrs, class: void 0 }'
|
|
44
|
+
:id
|
|
45
|
+
ref='input'
|
|
46
|
+
v-model='model'
|
|
47
|
+
:class='[css, $style.textarea]'
|
|
48
|
+
:required='props.required'
|
|
49
|
+
:disabled='props.required'
|
|
50
|
+
:readonly='props.readonly'
|
|
51
|
+
/>
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<template v-if='!!$slots.rightSection' #rightSection>
|
|
55
|
+
<slot name='rightSection' />
|
|
56
|
+
</template>
|
|
57
|
+
</InputBase>
|
|
58
|
+
|
|
59
|
+
<template v-if='!!$slots.label' #label>
|
|
60
|
+
<slot name='label' />
|
|
61
|
+
</template>
|
|
62
|
+
<template v-if='!!$slots.error' #error>
|
|
63
|
+
<slot name='error' />
|
|
64
|
+
</template>
|
|
65
|
+
<template v-if='!!$slots.description' #description>
|
|
66
|
+
<slot name='description' />
|
|
67
|
+
</template>
|
|
68
|
+
</InputWrapper>
|
|
69
69
|
</template>
|
|
70
70
|
|
|
71
71
|
<style module>
|