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
|
@@ -51,136 +51,135 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
|
|
|
51
51
|
</script>
|
|
52
52
|
|
|
53
53
|
<template>
|
|
54
|
-
<li :class='$style.item' role='presentation'>
|
|
55
|
-
<RovingFocusItem>
|
|
56
|
-
<Button
|
|
57
|
-
:size='ctx.size'
|
|
58
|
-
:color='ctx.color'
|
|
59
|
-
:variant='ctx.variant'
|
|
60
|
-
:disabled
|
|
61
|
-
role='treeitem'
|
|
62
|
-
:classes='$style'
|
|
63
|
-
:aria-level='level'
|
|
64
|
-
:aria-selected='selected'
|
|
65
|
-
:mod='{ active, selected, "tree-item": path }'
|
|
66
|
-
right-section-p-e='all'
|
|
67
|
-
@click.prevent='handleClick'
|
|
68
|
-
@keydown.prevent='handleKeyDown'
|
|
69
|
-
>
|
|
70
|
-
<template #leftSection>
|
|
71
|
-
<template v-if='pending'>
|
|
72
|
-
<Loader :class='$style.icon' />
|
|
73
|
-
</template>
|
|
74
|
-
|
|
75
|
-
<template v-else-if='isFolder'>
|
|
76
|
-
<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
|
|
77
|
-
<Icon v-else :class='$style.icon' :name='icon' />
|
|
78
|
-
</template>
|
|
79
|
-
|
|
80
|
-
<template v-else>
|
|
81
|
-
<Icon
|
|
82
|
-
:class='$style.icon'
|
|
83
|
-
:name='fileIcon'
|
|
84
|
-
:style='{ color: color && getThemeColor(color, theme) }'
|
|
85
|
-
/>
|
|
86
|
-
</template>
|
|
87
|
-
</template>
|
|
88
|
-
|
|
89
|
-
{{ name ?? path }}
|
|
90
|
-
|
|
91
|
-
<template v-if='isFolder' #rightSection>
|
|
92
|
-
<ActionIcon
|
|
93
|
-
icon='gravity-ui:chevron-down'
|
|
94
|
-
size='sm'
|
|
95
|
-
:color='ctx.color'
|
|
96
|
-
:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
|
|
97
|
-
:mod='{ expanded }'
|
|
98
|
-
variant='subtle'
|
|
99
|
-
@click.stop='ctx.toggle("expand", path)'
|
|
100
|
-
/>
|
|
101
|
-
</template>
|
|
102
|
-
</Button>
|
|
103
|
-
</RovingFocusItem>
|
|
104
|
-
|
|
105
|
-
<UTransition name='scale-y'>
|
|
106
|
-
<ul
|
|
107
|
-
v-if='expanded && data && data.length > 0'
|
|
108
|
-
:class='$style.list'
|
|
109
|
-
role='group'
|
|
110
|
-
>
|
|
111
|
-
<TreeItem
|
|
112
|
-
v-for='child in data'
|
|
113
|
-
:key='child.path'
|
|
114
|
-
v-bind='child'
|
|
115
|
-
:path='child.path'
|
|
116
|
-
:level='level + 1'
|
|
117
|
-
/>
|
|
118
|
-
</ul>
|
|
119
|
-
</UTransition>
|
|
120
|
-
</li>
|
|
54
|
+
<li :class='$style.item' role='presentation'>
|
|
55
|
+
<RovingFocusItem>
|
|
56
|
+
<Button
|
|
57
|
+
:size='ctx.size'
|
|
58
|
+
:color='ctx.color'
|
|
59
|
+
:variant='ctx.variant'
|
|
60
|
+
:disabled
|
|
61
|
+
role='treeitem'
|
|
62
|
+
:classes='$style'
|
|
63
|
+
:aria-level='level'
|
|
64
|
+
:aria-selected='selected'
|
|
65
|
+
:mod='{ active, selected, "tree-item": path }'
|
|
66
|
+
right-section-p-e='all'
|
|
67
|
+
@click.prevent='handleClick'
|
|
68
|
+
@keydown.prevent='handleKeyDown'
|
|
69
|
+
>
|
|
70
|
+
<template #leftSection>
|
|
71
|
+
<template v-if='pending'>
|
|
72
|
+
<Loader :class='$style.icon' />
|
|
73
|
+
</template>
|
|
74
|
+
|
|
75
|
+
<template v-else-if='isFolder'>
|
|
76
|
+
<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
|
|
77
|
+
<Icon v-else :class='$style.icon' :name='icon' />
|
|
78
|
+
</template>
|
|
79
|
+
|
|
80
|
+
<template v-else>
|
|
81
|
+
<Icon
|
|
82
|
+
:class='$style.icon'
|
|
83
|
+
:name='fileIcon'
|
|
84
|
+
:style='{ color: color && getThemeColor(color, theme) }'
|
|
85
|
+
/>
|
|
86
|
+
</template>
|
|
87
|
+
</template>
|
|
88
|
+
|
|
89
|
+
{{ name ?? path }}
|
|
90
|
+
|
|
91
|
+
<template v-if='isFolder' #rightSection>
|
|
92
|
+
<ActionIcon
|
|
93
|
+
icon='gravity-ui:chevron-down'
|
|
94
|
+
size='sm'
|
|
95
|
+
:color='ctx.color'
|
|
96
|
+
:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
|
|
97
|
+
:mod='{ expanded }'
|
|
98
|
+
variant='subtle'
|
|
99
|
+
@click.stop='ctx.toggle("expand", path)'
|
|
100
|
+
/>
|
|
101
|
+
</template>
|
|
102
|
+
</Button>
|
|
103
|
+
</RovingFocusItem>
|
|
104
|
+
|
|
105
|
+
<UTransition name='scale-y'>
|
|
106
|
+
<ul
|
|
107
|
+
v-if='expanded && data && data.length > 0'
|
|
108
|
+
:class='$style.list'
|
|
109
|
+
role='group'
|
|
110
|
+
>
|
|
111
|
+
<TreeItem
|
|
112
|
+
v-for='child in data'
|
|
113
|
+
:key='child.path'
|
|
114
|
+
v-bind='child'
|
|
115
|
+
:path='child.path'
|
|
116
|
+
:level='level + 1'
|
|
117
|
+
/>
|
|
118
|
+
</ul>
|
|
119
|
+
</UTransition>
|
|
120
|
+
</li>
|
|
121
121
|
</template>
|
|
122
122
|
|
|
123
123
|
<style module lang="postcss">
|
|
124
|
-
.item {
|
|
125
|
-
display: grid;
|
|
126
|
-
gap: .25rem;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.icon {
|
|
130
|
-
--loader-size: var(--tree-icon-size);
|
|
131
|
-
|
|
132
|
-
width: var(--tree-icon-size);
|
|
133
|
-
height: var(--tree-icon-size);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.chevron {
|
|
137
|
-
color: var(--color-dimmed);
|
|
138
|
-
|
|
139
|
-
transition: transform .3s ease-in-out;
|
|
140
|
-
|
|
141
|
-
&:hover {
|
|
142
|
-
color: var(--color-dimmed);
|
|
143
|
-
|
|
144
|
-
background-color: transparent;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
&[data-expanded] .chevron-icon {
|
|
148
|
-
transform: rotate(-180deg);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
.
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
&[data-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
}
|
|
124
|
+
.item {
|
|
125
|
+
display: grid;
|
|
126
|
+
gap: .25rem;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.icon {
|
|
130
|
+
--loader-size: var(--tree-icon-size);
|
|
131
|
+
|
|
132
|
+
width: var(--tree-icon-size);
|
|
133
|
+
height: var(--tree-icon-size);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.chevron {
|
|
137
|
+
color: var(--color-dimmed);
|
|
138
|
+
|
|
139
|
+
transition: transform .3s ease-in-out;
|
|
140
|
+
|
|
141
|
+
&:hover {
|
|
142
|
+
color: var(--color-dimmed);
|
|
143
|
+
|
|
144
|
+
background-color: transparent;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
&[data-expanded] .chevron-icon {
|
|
148
|
+
transform: rotate(-180deg);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.list {
|
|
153
|
+
display: grid;
|
|
154
|
+
gap: .25rem;
|
|
155
|
+
|
|
156
|
+
margin-inline-start: 1rem;
|
|
157
|
+
|
|
158
|
+
padding-inline-start: .75rem;
|
|
159
|
+
border-left: 1px solid var(--color-gray-4);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.root {
|
|
163
|
+
.inner {
|
|
164
|
+
display: grid;
|
|
165
|
+
grid-template-columns: auto 1fr auto;
|
|
166
|
+
|
|
167
|
+
color: var(--color-text);
|
|
168
|
+
|
|
169
|
+
.label {
|
|
170
|
+
font-weight: 500;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&[data-active],
|
|
175
|
+
&[data-selected] {
|
|
176
|
+
.inner {
|
|
177
|
+
color: var(--button-color);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
&[data-selected] {
|
|
182
|
+
background: alpha(var(--button-color), .1);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
186
185
|
</style>
|
|
@@ -64,28 +64,28 @@ if (removable) {
|
|
|
64
64
|
</script>
|
|
65
65
|
|
|
66
66
|
<template>
|
|
67
|
-
<RovingFocus :attr :loop :orientation>
|
|
68
|
-
<Box
|
|
69
|
-
is='ul'
|
|
70
|
-
ref='parent'
|
|
71
|
-
role='tree'
|
|
72
|
-
:style
|
|
73
|
-
:class='$style.root'
|
|
74
|
-
@keydown.esc.prevent='selected = []'
|
|
75
|
-
>
|
|
76
|
-
<slot />
|
|
77
|
-
</Box>
|
|
78
|
-
</RovingFocus>
|
|
67
|
+
<RovingFocus :attr :loop :orientation>
|
|
68
|
+
<Box
|
|
69
|
+
is='ul'
|
|
70
|
+
ref='parent'
|
|
71
|
+
role='tree'
|
|
72
|
+
:style
|
|
73
|
+
:class='$style.root'
|
|
74
|
+
@keydown.esc.prevent='selected = []'
|
|
75
|
+
>
|
|
76
|
+
<slot />
|
|
77
|
+
</Box>
|
|
78
|
+
</RovingFocus>
|
|
79
79
|
</template>
|
|
80
80
|
|
|
81
81
|
<style module lang="postcss">
|
|
82
|
-
.root {
|
|
83
|
-
--tree-icon-size: var(--spacing-md);
|
|
84
|
-
|
|
85
|
-
display: flex;
|
|
86
|
-
flex-direction: column;
|
|
87
|
-
gap: .25rem;
|
|
88
|
-
|
|
89
|
-
padding-inline-start: 0;
|
|
90
|
-
}
|
|
82
|
+
.root {
|
|
83
|
+
--tree-icon-size: var(--spacing-md);
|
|
84
|
+
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
gap: .25rem;
|
|
88
|
+
|
|
89
|
+
padding-inline-start: 0;
|
|
90
|
+
}
|
|
91
91
|
</style>
|
|
@@ -33,24 +33,24 @@ onMounted(execute);
|
|
|
33
33
|
</script>
|
|
34
34
|
|
|
35
35
|
<template>
|
|
36
|
-
<TreeRoot
|
|
37
|
-
v-bind='props'
|
|
38
|
-
v-model:active='active'
|
|
39
|
-
v-model:selected='selected'
|
|
40
|
-
v-model:expanded='expanded'
|
|
41
|
-
:load-branch
|
|
42
|
-
:size
|
|
43
|
-
:color
|
|
44
|
-
:variant
|
|
45
|
-
:filter
|
|
46
|
-
@delete='(path) => $emit("delete", path)'
|
|
47
|
-
>
|
|
48
|
-
<UTreeItem
|
|
49
|
-
v-for='item in root'
|
|
50
|
-
:key='item.path'
|
|
51
|
-
v-bind='item'
|
|
52
|
-
:path='item.path'
|
|
53
|
-
:level='1'
|
|
54
|
-
/>
|
|
55
|
-
</TreeRoot>
|
|
36
|
+
<TreeRoot
|
|
37
|
+
v-bind='props'
|
|
38
|
+
v-model:active='active'
|
|
39
|
+
v-model:selected='selected'
|
|
40
|
+
v-model:expanded='expanded'
|
|
41
|
+
:load-branch
|
|
42
|
+
:size
|
|
43
|
+
:color
|
|
44
|
+
:variant
|
|
45
|
+
:filter
|
|
46
|
+
@delete='(path) => $emit("delete", path)'
|
|
47
|
+
>
|
|
48
|
+
<UTreeItem
|
|
49
|
+
v-for='item in root'
|
|
50
|
+
:key='item.path'
|
|
51
|
+
v-bind='item'
|
|
52
|
+
:path='item.path'
|
|
53
|
+
:level='1'
|
|
54
|
+
/>
|
|
55
|
+
</TreeRoot>
|
|
56
56
|
</template>
|
|
@@ -8,15 +8,15 @@ const { feature, ...rest } = defineProps({
|
|
|
8
8
|
</script>
|
|
9
9
|
|
|
10
10
|
<template>
|
|
11
|
-
<Box
|
|
12
|
-
:aria-hidden='feature === "focusable" ? "true" : void 0'
|
|
13
|
-
:data-hidden='feature === "fully-hidden" ? "true" : void 0'
|
|
14
|
-
:tabindex='feature === "fully-hidden" ? "-1" : void 0'
|
|
15
|
-
v-bind='rest'
|
|
16
|
-
class='root'
|
|
17
|
-
>
|
|
18
|
-
<slot />
|
|
19
|
-
</Box>
|
|
11
|
+
<Box
|
|
12
|
+
:aria-hidden='feature === "focusable" ? "true" : void 0'
|
|
13
|
+
:data-hidden='feature === "fully-hidden" ? "true" : void 0'
|
|
14
|
+
:tabindex='feature === "fully-hidden" ? "-1" : void 0'
|
|
15
|
+
v-bind='rest'
|
|
16
|
+
class='root'
|
|
17
|
+
>
|
|
18
|
+
<slot />
|
|
19
|
+
</Box>
|
|
20
20
|
</template>
|
|
21
21
|
|
|
22
22
|
<style scoped>
|
|
@@ -45,37 +45,37 @@ async function hanleConfirm() {
|
|
|
45
45
|
</script>
|
|
46
46
|
|
|
47
47
|
<template>
|
|
48
|
-
<ModalRoot v-model:open='opened' v-bind='rest' :close-on-click-outside size='sm'>
|
|
49
|
-
<ModalHeader>
|
|
50
|
-
<Title order='4'>
|
|
51
|
-
{{ title }}
|
|
52
|
-
</Title>
|
|
53
|
-
<ModalCloseButton />
|
|
54
|
-
</ModalHeader>
|
|
55
|
-
|
|
56
|
-
<p v-if='body' :class='$style.body'>
|
|
57
|
-
{{ body }}
|
|
58
|
-
</p>
|
|
59
|
-
|
|
60
|
-
<footer :class='$style.footer'>
|
|
61
|
-
<Button
|
|
62
|
-
variant='default'
|
|
63
|
-
v-bind='cancelProps'
|
|
64
|
-
@click='handleCancel()'
|
|
65
|
-
>
|
|
66
|
-
{{ labels?.cancel ?? "Cancel" }}
|
|
67
|
-
</Button>
|
|
68
|
-
<Button
|
|
69
|
-
variant='filled'
|
|
70
|
-
v-bind='confirmProps'
|
|
71
|
-
:color="variant === 'danger' ? 'red' : void 0"
|
|
72
|
-
:loading
|
|
73
|
-
@click='hanleConfirm()'
|
|
74
|
-
>
|
|
75
|
-
{{ labels?.confirm ?? "Confirm" }}
|
|
76
|
-
</Button>
|
|
77
|
-
</footer>
|
|
78
|
-
</ModalRoot>
|
|
48
|
+
<ModalRoot v-model:open='opened' v-bind='rest' :close-on-click-outside size='sm'>
|
|
49
|
+
<ModalHeader>
|
|
50
|
+
<Title order='4'>
|
|
51
|
+
{{ title }}
|
|
52
|
+
</Title>
|
|
53
|
+
<ModalCloseButton />
|
|
54
|
+
</ModalHeader>
|
|
55
|
+
|
|
56
|
+
<p v-if='body' :class='$style.body'>
|
|
57
|
+
{{ body }}
|
|
58
|
+
</p>
|
|
59
|
+
|
|
60
|
+
<footer :class='$style.footer'>
|
|
61
|
+
<Button
|
|
62
|
+
variant='default'
|
|
63
|
+
v-bind='cancelProps'
|
|
64
|
+
@click='handleCancel()'
|
|
65
|
+
>
|
|
66
|
+
{{ labels?.cancel ?? "Cancel" }}
|
|
67
|
+
</Button>
|
|
68
|
+
<Button
|
|
69
|
+
variant='filled'
|
|
70
|
+
v-bind='confirmProps'
|
|
71
|
+
:color="variant === 'danger' ? 'red' : void 0"
|
|
72
|
+
:loading
|
|
73
|
+
@click='hanleConfirm()'
|
|
74
|
+
>
|
|
75
|
+
{{ labels?.confirm ?? "Confirm" }}
|
|
76
|
+
</Button>
|
|
77
|
+
</footer>
|
|
78
|
+
</ModalRoot>
|
|
79
79
|
</template>
|
|
80
80
|
|
|
81
81
|
<style module>
|
|
@@ -9,14 +9,14 @@ defineExpose({
|
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
11
|
<template>
|
|
12
|
-
<ClientOnly>
|
|
13
|
-
<div id='nui-modals-root'>
|
|
14
|
-
<component
|
|
15
|
-
:is='entry.component'
|
|
16
|
-
v-for='[id, entry] in $props.manager?.modals ?? $modals.modals'
|
|
17
|
-
:key='id'
|
|
18
|
-
v-bind='entry.props'
|
|
19
|
-
/>
|
|
20
|
-
</div>
|
|
21
|
-
</ClientOnly>
|
|
12
|
+
<ClientOnly>
|
|
13
|
+
<div id='nui-modals-root'>
|
|
14
|
+
<component
|
|
15
|
+
:is='entry.component'
|
|
16
|
+
v-for='[id, entry] in $props.manager?.modals ?? $modals.modals'
|
|
17
|
+
:key='id'
|
|
18
|
+
v-bind='entry.props'
|
|
19
|
+
/>
|
|
20
|
+
</div>
|
|
21
|
+
</ClientOnly>
|
|
22
22
|
</template>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{@mixin dark-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-white);--color-text:var(--color-slate-3);--color-body:var(--color-slate-9);--color-aside:var(--color-slate-7);--color-header:var(--color-slate-8);--color-error:var(--color-red-7);--color-placeholder:var(--color-dark-3);--color-anchor:var(--color-blue-4);--color-default:var(--color-dark-6);--color-default-hover:var(--color-dark-5);--color-default-color:var(--color-white);--color-default-border:var(--color-dark-4);--color-dimmed:var(--color-slate-5);--color-disabled:var(--color-dark-6);--color-disabled-text:var(--color-dark-3);--color-disabled-border:var(--color-gray-6);--color-dark-color:var(--color-dark-4);--color-dark-filled:var(--color-dark-8);--color-dark-filled-hover:var(--color-dark-9);--color-dark-light:rgba(46,46,46,.15);--color-dark-light-hover:rgba(46,46,46,.2);--color-dark-light-color:var(--color-dark-3);--color-dark-outline:var(--color-dark-4);--color-dark-outline-hover:rgba(66,66,66,.05);--color-slate-filled:var(--color-slate-6);--color-slate-filled-hover:var(--color-slate-7);--color-slate-light:alpha(var(--color-slate-3),.15);--color-slate-light-hover:var(--color-slate-2);--color-slate-light-color:var(--color-slate-8);--color-slate-outline:var(--color-slate-5);--color-slate-outline-hover:alpha(var(--color-slate-5),.1);--color-gray-color:var(--color-gray-4);--color-gray-filled:var(--color-gray-8);--color-gray-filled-hover:var(--color-gray-9);--color-gray-light:
|
|
1
|
+
:root{@mixin dark-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-white);--color-text:var(--color-slate-3);--color-body:var(--color-slate-9);--color-aside:var(--color-slate-7);--color-header:var(--color-slate-8);--color-error:var(--color-red-7);--color-placeholder:var(--color-dark-3);--color-anchor:var(--color-blue-4);--color-default:var(--color-dark-6);--color-default-hover:var(--color-dark-5);--color-default-color:var(--color-white);--color-default-border:var(--color-dark-4);--color-dimmed:var(--color-slate-5);--color-disabled:var(--color-dark-6);--color-disabled-text:var(--color-dark-3);--color-disabled-border:var(--color-gray-6);--color-dark-color:var(--color-dark-4);--color-dark-filled:var(--color-dark-8);--color-dark-filled-hover:var(--color-dark-9);--color-dark-light:rgba(46,46,46,.15);--color-dark-light-hover:rgba(46,46,46,.2);--color-dark-light-color:var(--color-dark-3);--color-dark-outline:var(--color-dark-4);--color-dark-outline-hover:rgba(66,66,66,.05);--color-slate-filled:var(--color-slate-6);--color-slate-filled-hover:var(--color-slate-7);--color-slate-light:alpha(var(--color-slate-3),.15);--color-slate-light-hover:var(--color-slate-2);--color-slate-light-color:var(--color-slate-8);--color-slate-outline:var(--color-slate-5);--color-slate-outline-hover:alpha(var(--color-slate-5),.1);--color-gray-color:var(--color-gray-4);--color-gray-filled:var(--color-gray-8);--color-gray-filled-hover:var(--color-gray-9);--color-gray-light:rgba(134,142,150,.15);--color-gray-light-hover:rgba(134,142,150,.2);--color-gray-light-color:var(--color-gray-3);--color-gray-outline:var(--color-gray-4);--color-gray-outline-hover:rgba(206,212,218,.05);--color-red-color:var(--color-red-4);--color-red-filled:var(--color-red-8);--color-red-filled-hover:var(--color-red-9);--color-red-light:rgba(250,82,82,.15);--color-red-light-hover:rgba(250,82,82,.2);--color-red-light-color:var(--color-red-3);--color-red-outline:var(--color-red-4);--color-red-outline-hover:rgba(255,135,135,.05);--color-pink-color:var(--color-pink-4);--color-pink-filled:var(--color-pink-8);--color-pink-filled-hover:var(--color-pink-9);--color-pink-light:rgba(230,73,128,.15);--color-pink-light-hover:rgba(230,73,128,.2);--color-pink-light-color:var(--color-pink-3);--color-pink-outline:var(--color-pink-4);--color-pink-outline-hover:rgba(247,131,172,.05);--color-grape-color:var(--color-grape-4);--color-grape-filled:var(--color-grape-8);--color-grape-filled-hover:var(--color-grape-9);--color-grape-light:rgba(190,75,219,.15);--color-grape-light-hover:rgba(190,75,219,.2);--color-grape-light-color:var(--color-grape-3);--color-grape-outline:var(--color-grape-4);--color-grape-outline-hover:rgba(218,119,242,.05);--color-violet-color:var(--color-violet-4);--color-violet-filled:var(--color-violet-8);--color-violet-filled-hover:var(--color-violet-9);--color-violet-light:rgba(121,80,242,.15);--color-violet-light-hover:rgba(121,80,242,.2);--color-violet-light-color:var(--color-violet-3);--color-violet-outline:var(--color-violet-4);--color-violet-outline-hover:rgba(151,117,250,.05);--color-indigo-color:var(--color-indigo-4);--color-indigo-filled:var(--color-indigo-8);--color-indigo-filled-hover:var(--color-indigo-9);--color-indigo-light:rgba(76,110,245,.15);--color-indigo-light-hover:rgba(76,110,245,.2);--color-indigo-light-color:var(--color-indigo-3);--color-indigo-outline:var(--color-indigo-4);--color-indigo-outline-hover:rgba(116,143,252,.05);--color-blue-color:var(--color-blue-4);--color-blue-filled:var(--color-blue-8);--color-blue-filled-hover:var(--color-blue-9);--color-blue-light:rgba(34,139,230,.15);--color-blue-light-hover:rgba(34,139,230,.2);--color-blue-light-color:var(--color-blue-3);--color-blue-outline:var(--color-blue-4);--color-blue-outline-hover:rgba(77,171,247,.05);--color-cyan-color:var(--color-cyan-4);--color-cyan-filled:var(--color-cyan-8);--color-cyan-filled-hover:var(--color-cyan-9);--color-cyan-light:rgba(21,170,191,.15);--color-cyan-light-hover:rgba(21,170,191,.2);--color-cyan-light-color:var(--color-cyan-3);--color-cyan-outline:var(--color-cyan-4);--color-cyan-outline-hover:rgba(59,201,219,.05);--color-teal-color:var(--color-teal-4);--color-teal-filled:var(--color-teal-8);--color-teal-filled-hover:var(--color-teal-9);--color-teal-light:rgba(18,184,134,.15);--color-teal-light-hover:rgba(18,184,134,.2);--color-teal-light-color:var(--color-teal-3);--color-teal-outline:var(--color-teal-4);--color-teal-outline-hover:rgba(56,217,169,.05);--color-green-color:var(--color-green-4);--color-green-filled:var(--color-green-8);--color-green-filled-hover:var(--color-green-9);--color-green-light:rgba(64,192,87,.15);--color-green-light-hover:rgba(64,192,87,.2);--color-green-light-color:var(--color-green-3);--color-green-outline:var(--color-green-4);--color-green-outline-hover:rgba(105,219,124,.05);--color-lime-color:var(--color-lime-4);--color-lime-filled:var(--color-lime-8);--color-lime-filled-hover:var(--color-lime-9);--color-lime-light:rgba(130,201,30,.15);--color-lime-light-hover:rgba(130,201,30,.2);--color-lime-light-color:var(--color-lime-3);--color-lime-outline:var(--color-lime-4);--color-lime-outline-hover:rgba(169,227,75,.05);--color-yellow-color:var(--color-yellow-4);--color-yellow-filled:var(--color-yellow-8);--color-yellow-filled-hover:var(--color-yellow-9);--color-yellow-light:rgba(250,176,5,.15);--color-yellow-light-hover:rgba(250,176,5,.2);--color-yellow-light-color:var(--color-yellow-3);--color-yellow-outline:var(--color-yellow-4);--color-yellow-outline-hover:rgba(255,212,59,.05);--color-orange-color:var(--color-orange-4);--color-orange-filled:var(--color-orange-8);--color-orange-filled-hover:var(--color-orange-9);--color-orange-light:rgba(253,126,20,.15);--color-orange-light-hover:rgba(253,126,20,.2);--color-orange-light-color:var(--color-orange-3);--color-orange-outline:var(--color-orange-4);--color-orange-outline-hover:rgba(255,169,77,.05)}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nuance-ui",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"description": "A UI
|
|
3
|
+
"version": "0.2.5",
|
|
4
|
+
"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/Igor-Iugin/nuance-ui.git"
|
|
@@ -12,15 +12,35 @@
|
|
|
12
12
|
".": {
|
|
13
13
|
"types": "./dist/types.d.mts",
|
|
14
14
|
"import": "./dist/module.mjs"
|
|
15
|
+
},
|
|
16
|
+
"./composals": {
|
|
17
|
+
"types": "./dist/runtime/composals/index.d.ts",
|
|
18
|
+
"import": "./dist/runtime/composals/index.js"
|
|
19
|
+
},
|
|
20
|
+
"./components": {
|
|
21
|
+
"types": "./dist/runtime/components/index.d.ts",
|
|
22
|
+
"import": "./dist/runtime/components/index.js"
|
|
23
|
+
},
|
|
24
|
+
"./modals": {
|
|
25
|
+
"types": "./dist/runtime/modals/index.d.ts",
|
|
26
|
+
"import": "./dist/runtime/modals/index.js"
|
|
27
|
+
},
|
|
28
|
+
"./helpers": {
|
|
29
|
+
"types": "./dist/runtime/helpers/index.d.ts",
|
|
30
|
+
"import": "./dist/runtime/helpers/index.js"
|
|
31
|
+
},
|
|
32
|
+
"./utils": {
|
|
33
|
+
"types": "./dist/runtime/utils/index.d.ts",
|
|
34
|
+
"import": "./dist/runtime/utils/index.js"
|
|
35
|
+
},
|
|
36
|
+
"./types": {
|
|
37
|
+
"types": "./dist/runtime/types/index.d.ts",
|
|
38
|
+
"import": "./dist/runtime/types/index.js"
|
|
15
39
|
}
|
|
16
40
|
},
|
|
17
41
|
"main": "./dist/module.mjs",
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
".": [
|
|
21
|
-
"./dist/types.d.mts"
|
|
22
|
-
]
|
|
23
|
-
}
|
|
42
|
+
"publishConfig": {
|
|
43
|
+
"access": "public"
|
|
24
44
|
},
|
|
25
45
|
"files": [
|
|
26
46
|
"dist"
|
|
@@ -66,14 +86,14 @@
|
|
|
66
86
|
"@nuxt/eslint": "1.10.0",
|
|
67
87
|
"@nuxt/eslint-config": "^1.13.0",
|
|
68
88
|
"@nuxt/module-builder": "^1.0.2",
|
|
69
|
-
"@nuxt/schema": "^4.
|
|
89
|
+
"@nuxt/schema": "^4.4.2",
|
|
70
90
|
"@nuxt/test-utils": "^4.0.0",
|
|
71
91
|
"@nuxtjs/color-mode": "^4.0.0",
|
|
72
92
|
"@nuxtjs/stylelint-module": "^5.2.1",
|
|
73
93
|
"@types/node": "latest",
|
|
74
94
|
"changelogen": "^0.6.2",
|
|
75
95
|
"eslint": "^9.39.2",
|
|
76
|
-
"nuxt": "^4.
|
|
96
|
+
"nuxt": "^4.4.2",
|
|
77
97
|
"postcss": "^8.5.6",
|
|
78
98
|
"postcss-preset-mantine": "^1.18.0",
|
|
79
99
|
"postcss-simple-vars": "^7.0.1",
|