@deck9/ui 0.17.0-next.1 → 0.17.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/README.md +107 -11
- package/dist/Button/Button.vue.d.ts +6 -2
- package/dist/Menu/MenuContainer.vue.d.ts +5 -0
- package/dist/Select/Select.vue.d.ts +18 -5
- package/dist/Spinner/Spinner.vue.d.ts +28 -1
- package/dist/src/ui.mjs +432 -508
- package/dist/src/ui.umd.js +2 -2
- package/package.json +6 -8
package/dist/src/ui.mjs
CHANGED
|
@@ -1,167 +1,41 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
prefix: q,
|
|
19
|
-
iconName: W,
|
|
20
|
-
width: J,
|
|
21
|
-
height: K,
|
|
22
|
-
ligatures: A,
|
|
23
|
-
unicode: X,
|
|
24
|
-
svgPathData: Y,
|
|
25
|
-
aliases: A
|
|
26
|
-
};
|
|
27
|
-
F.add(
|
|
28
|
-
e.faAlignCenter,
|
|
29
|
-
e.faAlignLeft,
|
|
30
|
-
e.faAlignRight,
|
|
31
|
-
e.faArrowRight,
|
|
32
|
-
e.faArrowUp19,
|
|
33
|
-
e.faAsterisk,
|
|
34
|
-
e.faAt,
|
|
35
|
-
e.faBold,
|
|
36
|
-
e.faBolt,
|
|
37
|
-
e.faCalendar,
|
|
38
|
-
e.faChartPie,
|
|
39
|
-
e.faCheck,
|
|
40
|
-
e.faCheckCircle,
|
|
41
|
-
e.faChevronDown,
|
|
42
|
-
e.faChevronLeft,
|
|
43
|
-
e.faChevronRight,
|
|
44
|
-
e.faChevronUp,
|
|
45
|
-
e.faCircleCheck,
|
|
46
|
-
e.faCircleNodes,
|
|
47
|
-
e.faCircleNotch,
|
|
48
|
-
e.faClipboard,
|
|
49
|
-
e.faCloudDownload,
|
|
50
|
-
e.faCloudUpload,
|
|
51
|
-
e.faCode,
|
|
52
|
-
e.faCodeBranch,
|
|
53
|
-
e.faCodeFork,
|
|
54
|
-
e.faCog,
|
|
55
|
-
e.faCompass,
|
|
56
|
-
e.faCrown,
|
|
57
|
-
e.faDiagramProject,
|
|
58
|
-
e.faDoorOpen,
|
|
59
|
-
e.faDotCircle,
|
|
60
|
-
e.faEllipsis,
|
|
61
|
-
e.faEllipsisVertical,
|
|
62
|
-
e.faEnvelope,
|
|
63
|
-
e.faExclamationTriangle,
|
|
64
|
-
e.faExternalLink,
|
|
65
|
-
e.faEye,
|
|
66
|
-
e.faEyeDropper,
|
|
67
|
-
e.faEyeSlash,
|
|
68
|
-
e.faFileLines,
|
|
69
|
-
e.faFilePdf,
|
|
70
|
-
e.faFileUpload,
|
|
71
|
-
e.faFileVideo,
|
|
72
|
-
e.faFileWaveform,
|
|
73
|
-
e.faFilter,
|
|
74
|
-
e.faFilter,
|
|
75
|
-
e.faFingerprint,
|
|
76
|
-
e.faFont,
|
|
77
|
-
e.faGears,
|
|
78
|
-
e.faGlobe,
|
|
79
|
-
e.faGripHorizontal,
|
|
80
|
-
e.faGripVertical,
|
|
81
|
-
e.faHandPointRight,
|
|
82
|
-
e.faHandPointRight,
|
|
83
|
-
e.faHashtag,
|
|
84
|
-
e.faHeading,
|
|
85
|
-
e.faHeart,
|
|
86
|
-
e.faImage,
|
|
87
|
-
e.faInfoCircle,
|
|
88
|
-
e.faItalic,
|
|
89
|
-
e.faLayerGroup,
|
|
90
|
-
e.faLink,
|
|
91
|
-
e.faLinkSlash,
|
|
92
|
-
e.faList,
|
|
93
|
-
e.faListOl,
|
|
94
|
-
e.faListUl,
|
|
95
|
-
e.faLocationArrow,
|
|
96
|
-
e.faLocationCrosshairs,
|
|
97
|
-
e.faLock,
|
|
98
|
-
e.faLockOpen,
|
|
99
|
-
e.faMedal,
|
|
100
|
-
e.faMessage,
|
|
101
|
-
e.faMicrochip,
|
|
102
|
-
e.faPencilAlt,
|
|
103
|
-
e.faPenToSquare,
|
|
104
|
-
e.faPhone,
|
|
105
|
-
e.faPlayCircle,
|
|
106
|
-
e.faPlus,
|
|
107
|
-
e.faPlusCircle,
|
|
108
|
-
e.faPoo,
|
|
109
|
-
e.faPuzzlePiece,
|
|
110
|
-
e.faQuestion,
|
|
111
|
-
e.faQuoteLeft,
|
|
112
|
-
e.faQuoteRight,
|
|
113
|
-
e.faReply,
|
|
114
|
-
e.faReplyAll,
|
|
115
|
-
e.faRightLong,
|
|
116
|
-
e.faRobot,
|
|
117
|
-
e.faSave,
|
|
118
|
-
e.faShield,
|
|
119
|
-
e.faSignal,
|
|
120
|
-
e.faSignature,
|
|
121
|
-
e.faSignature,
|
|
122
|
-
e.faSquareCheck,
|
|
123
|
-
e.faStar,
|
|
124
|
-
e.faStrikethrough,
|
|
125
|
-
e.faTerminal,
|
|
126
|
-
e.faTextSlash,
|
|
127
|
-
e.faTimes,
|
|
128
|
-
e.faTrash,
|
|
129
|
-
e.faTree,
|
|
130
|
-
e.faTrophy,
|
|
131
|
-
e.faTurnDown,
|
|
132
|
-
e.faUnderline,
|
|
133
|
-
e.faUpload,
|
|
134
|
-
e.faUser,
|
|
135
|
-
e.faUserShield,
|
|
136
|
-
e.faWandMagicSparkles,
|
|
137
|
-
// Brands
|
|
138
|
-
B.faTwitter,
|
|
139
|
-
B.faInstagram,
|
|
140
|
-
B.faGithub,
|
|
141
|
-
B.faLinkedin,
|
|
142
|
-
B.faFacebook,
|
|
143
|
-
// Custom
|
|
144
|
-
$e.definition
|
|
145
|
-
);
|
|
146
|
-
const Le = [...Object.keys(F.definitions.fas)].sort(), N = [...Object.keys(F.definitions.fab)].sort(), x = /* @__PURE__ */ v({
|
|
1
|
+
import { defineComponent as $, computed as D, openBlock as a, createBlock as C, unref as d, mergeProps as P, createCommentVNode as f, createElementBlock as i, normalizeClass as b, createElementVNode as c, toDisplayString as g, createVNode as k, ref as z, watch as I, Fragment as E, withDirectives as J, vModelText as Q, normalizeStyle as F, withCtx as x, renderSlot as T, Teleport as W, Transition as O, Comment as X, normalizeProps as Y, guardReactiveProps as Z, resolveDynamicComponent as ee, onMounted as R, createTextVNode as j, renderList as G, onUnmounted as te } from "vue";
|
|
2
|
+
import { library as se, findIconDefinition as U } from "@fortawesome/fontawesome-svg-core";
|
|
3
|
+
import { FontAwesomeIcon as le } from "@fortawesome/vue-fontawesome";
|
|
4
|
+
import { faCheck as oe, faChevronDown as ae, faCircleNotch as ne, faEllipsis as re, faEyeDropper as ie } from "@fortawesome/free-solid-svg-icons";
|
|
5
|
+
import { v4 as H } from "uuid";
|
|
6
|
+
import { useEyeDropper as de } from "@vueuse/core";
|
|
7
|
+
import { Menu as ue, MenuButton as ce, MenuItems as me, MenuItem as fe, Listbox as pe, ListboxButton as be, ListboxOptions as ge, ListboxOption as ye, Switch as he } from "@headlessui/vue";
|
|
8
|
+
import { useFloating as ke, autoUpdate as ve, offset as _e, flip as xe, shift as $e } from "@floating-ui/vue";
|
|
9
|
+
const K = [
|
|
10
|
+
oe,
|
|
11
|
+
ae,
|
|
12
|
+
ne,
|
|
13
|
+
re,
|
|
14
|
+
ie
|
|
15
|
+
];
|
|
16
|
+
se.add(...K);
|
|
17
|
+
const yt = K.map(({ iconName: l }) => l), ht = [], w = /* @__PURE__ */ $({
|
|
147
18
|
__name: "Icon",
|
|
148
19
|
props: {
|
|
149
20
|
name: { default: "user" }
|
|
150
21
|
},
|
|
151
|
-
setup(
|
|
152
|
-
const
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
22
|
+
setup(l) {
|
|
23
|
+
const n = l, e = D(() => {
|
|
24
|
+
const t = n.name, s = U({ prefix: "fab", iconName: t }) ?? U({ prefix: "fas", iconName: t });
|
|
25
|
+
return s || console.warn(
|
|
26
|
+
"could not load icon, because it is not available",
|
|
27
|
+
n.name
|
|
28
|
+
), s;
|
|
29
|
+
});
|
|
30
|
+
return (t, s) => e.value ? (a(), C(d(le), P({
|
|
157
31
|
key: 0,
|
|
158
|
-
icon:
|
|
159
|
-
}, t.$attrs), null, 16, ["icon"])) :
|
|
32
|
+
icon: e.value
|
|
33
|
+
}, t.$attrs), null, 16, ["icon"])) : f("", !0);
|
|
160
34
|
}
|
|
161
|
-
}),
|
|
35
|
+
}), we = ["aria-label", "disabled", "aria-disabled", "aria-busy"], Ce = {
|
|
162
36
|
key: 0,
|
|
163
37
|
class: "absolute inset-0 flex items-center justify-center"
|
|
164
|
-
},
|
|
38
|
+
}, kt = /* @__PURE__ */ $({
|
|
165
39
|
__name: "Button",
|
|
166
40
|
props: {
|
|
167
41
|
label: {},
|
|
@@ -172,135 +46,146 @@ const Le = [...Object.keys(F.definitions.fas)].sort(), N = [...Object.keys(F.def
|
|
|
172
46
|
icon: {},
|
|
173
47
|
iconPosition: { default: "right" }
|
|
174
48
|
},
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
"text-
|
|
180
|
-
"text-
|
|
181
|
-
"text-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
"
|
|
186
|
-
|
|
187
|
-
"px-
|
|
49
|
+
emits: ["click"],
|
|
50
|
+
setup(l, { emit: n }) {
|
|
51
|
+
const e = l, t = n, s = D(() => {
|
|
52
|
+
const o = {
|
|
53
|
+
"text-white bg-blue-600 border-transparent hover:bg-blue-700 active:bg-blue-700 dark:ring-blue-800 ring-offset-2 dark:ring-offset-grey-900": e.color === "primary",
|
|
54
|
+
"text-blue-600 bg-grey-100 border-transparent hover:bg-blue-100 hover:text-blue-700 active:bg-grey-100 ring-blue-300 ring-offset-2 dark:ring-offset-grey-900": e.color === "light",
|
|
55
|
+
"text-grey-50 bg-grey-700 border-transparent hover:bg-grey-800 active:bg-grey-700 ring-grey-500 dark:ring-grey-400 dark:ring-opacity-50 ring-offset-2 dark:ring-offset-grey-900": e.color === "dark",
|
|
56
|
+
"text-red-50 bg-red-500 border-transparent hover:bg-red-600 active:bg-red-600 ring-red-400 dark:ring-red-400 dark:ring-opacity-50 ring-offset-2 dark:ring-offset-red-900": e.color === "danger"
|
|
57
|
+
}, p = {
|
|
58
|
+
"pointer-events-none opacity-75 cursor-not-allowed": e.isDisabled,
|
|
59
|
+
"cursor-default": e.isLoading
|
|
60
|
+
}, _ = {
|
|
61
|
+
"px-4 py-1 text-xs leading-5 mono-100 rounded-lg": e.size === "small",
|
|
62
|
+
"px-5 py-2 text-sm leading-4 font-medium rounded-lg": e.size === "medium",
|
|
63
|
+
"px-8 py-3 text-base leading-6 font-medium rounded-lg": e.size === "large"
|
|
188
64
|
};
|
|
189
65
|
return {
|
|
190
|
-
...
|
|
191
|
-
...
|
|
192
|
-
...
|
|
66
|
+
...o,
|
|
67
|
+
...p,
|
|
68
|
+
..._
|
|
193
69
|
};
|
|
194
|
-
}),
|
|
195
|
-
const
|
|
196
|
-
"mr-2 -ml-1": ["small", "medium"].includes(
|
|
197
|
-
"mr-4 -ml-2": ["large"].includes(
|
|
198
|
-
},
|
|
199
|
-
"ml-3 -mr-1": ["small", "medium"].includes(
|
|
200
|
-
"ml-3 -mr-3": ["large"].includes(
|
|
201
|
-
},
|
|
202
|
-
"text-white":
|
|
203
|
-
"text-blue-600":
|
|
204
|
-
"text-grey-50":
|
|
70
|
+
}), u = D(() => {
|
|
71
|
+
const o = {
|
|
72
|
+
"mr-2 -ml-1": ["small", "medium"].includes(e.size) && e.iconPosition === "left",
|
|
73
|
+
"mr-4 -ml-2": ["large"].includes(e.size) && e.iconPosition === "left"
|
|
74
|
+
}, p = {
|
|
75
|
+
"ml-3 -mr-1": ["small", "medium"].includes(e.size) && e.iconPosition === "right",
|
|
76
|
+
"ml-3 -mr-3": ["large"].includes(e.size) && e.iconPosition === "right"
|
|
77
|
+
}, _ = {
|
|
78
|
+
"text-white": e.color === "primary",
|
|
79
|
+
"text-blue-600": e.color === "light",
|
|
80
|
+
"text-grey-50": e.color === "dark"
|
|
205
81
|
};
|
|
206
82
|
return {
|
|
207
|
-
...
|
|
208
|
-
...
|
|
209
|
-
...
|
|
83
|
+
...o,
|
|
84
|
+
...p,
|
|
85
|
+
..._
|
|
210
86
|
};
|
|
211
87
|
});
|
|
212
|
-
|
|
213
|
-
|
|
88
|
+
function v(o) {
|
|
89
|
+
if (e.isLoading) {
|
|
90
|
+
o.preventDefault();
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
t("click", o);
|
|
94
|
+
}
|
|
95
|
+
return (o, p) => (a(), i("button", {
|
|
96
|
+
class: b(["relative inline-flex items-center focus:outline-none focus:ring active:ring transition duration-150 ease-in-out", s.value]),
|
|
214
97
|
type: "button",
|
|
215
|
-
"aria-label":
|
|
216
|
-
disabled:
|
|
217
|
-
"aria-
|
|
98
|
+
"aria-label": o.label,
|
|
99
|
+
disabled: o.isDisabled,
|
|
100
|
+
"aria-disabled": o.isLoading || void 0,
|
|
101
|
+
"aria-busy": o.isLoading,
|
|
102
|
+
onClick: v
|
|
218
103
|
}, [
|
|
219
104
|
c("div", {
|
|
220
|
-
class: b(!
|
|
105
|
+
class: b(!o.isLoading || "invisible")
|
|
221
106
|
}, [
|
|
222
|
-
|
|
107
|
+
o.icon && o.iconPosition === "left" ? (a(), C(w, {
|
|
223
108
|
key: 0,
|
|
224
|
-
name:
|
|
225
|
-
class: b(
|
|
226
|
-
}, null, 8, ["name", "class"])) :
|
|
227
|
-
c("span", null,
|
|
228
|
-
|
|
109
|
+
name: o.icon,
|
|
110
|
+
class: b(u.value)
|
|
111
|
+
}, null, 8, ["name", "class"])) : f("", !0),
|
|
112
|
+
c("span", null, g(o.label), 1),
|
|
113
|
+
o.icon && o.iconPosition === "right" ? (a(), C(w, {
|
|
229
114
|
key: 1,
|
|
230
|
-
name:
|
|
231
|
-
class: b(
|
|
232
|
-
}, null, 8, ["name", "class"])) :
|
|
115
|
+
name: o.icon,
|
|
116
|
+
class: b(u.value)
|
|
117
|
+
}, null, 8, ["name", "class"])) : f("", !0)
|
|
233
118
|
], 2),
|
|
234
|
-
|
|
235
|
-
|
|
119
|
+
o.isLoading ? (a(), i("span", Ce, [
|
|
120
|
+
k(w, {
|
|
236
121
|
class: "animate-spin",
|
|
237
122
|
name: "circle-notch"
|
|
238
123
|
})
|
|
239
|
-
])) :
|
|
240
|
-
], 10,
|
|
124
|
+
])) : f("", !0)
|
|
125
|
+
], 10, we));
|
|
241
126
|
}
|
|
242
|
-
}),
|
|
127
|
+
}), Ve = { class: "relative flex items-start" }, De = ["checked", "id"], ze = { class: "ml-2 text-sm leading-5 peer-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:[&>label]:cursor-not-allowed" }, Be = ["for"], Le = {
|
|
243
128
|
key: 0,
|
|
244
129
|
class: "block text-xs text-grey-400 font-normal mono-0 casual-60"
|
|
245
|
-
},
|
|
130
|
+
}, Se = {
|
|
246
131
|
inheritAttrs: !1
|
|
247
|
-
},
|
|
248
|
-
...
|
|
132
|
+
}, vt = /* @__PURE__ */ $({
|
|
133
|
+
...Se,
|
|
249
134
|
__name: "Checkbox",
|
|
250
135
|
props: {
|
|
251
|
-
id: { default: () =>
|
|
136
|
+
id: { default: () => H() },
|
|
252
137
|
label: {},
|
|
253
138
|
modelValue: { type: Boolean },
|
|
254
139
|
description: {}
|
|
255
140
|
},
|
|
256
141
|
emits: ["update:modelValue"],
|
|
257
|
-
setup(
|
|
258
|
-
const
|
|
259
|
-
|
|
142
|
+
setup(l, { emit: n }) {
|
|
143
|
+
const e = n, t = (s) => {
|
|
144
|
+
e("update:modelValue", s.target.checked);
|
|
260
145
|
};
|
|
261
|
-
return (
|
|
262
|
-
c("input",
|
|
146
|
+
return (s, u) => (a(), i("div", Ve, [
|
|
147
|
+
c("input", P({
|
|
263
148
|
class: "peer mt-0.5 h-4 w-4 border-grey-600 dark:text-blue-500 dark:border-grey-300 dark:checked:border-blue-500 dark:focus:ring-blue-900 dark:focus:ring-offset-grey-800 rounded-sm disabled:opacity-50 disabled:cursor-not-allowed",
|
|
264
149
|
type: "checkbox",
|
|
265
|
-
checked:
|
|
266
|
-
onChange:
|
|
267
|
-
id:
|
|
268
|
-
},
|
|
269
|
-
c("div",
|
|
150
|
+
checked: s.modelValue,
|
|
151
|
+
onChange: t,
|
|
152
|
+
id: s.id
|
|
153
|
+
}, s.$attrs), null, 16, De),
|
|
154
|
+
c("div", ze, [
|
|
270
155
|
c("label", {
|
|
271
|
-
for:
|
|
156
|
+
for: s.id,
|
|
272
157
|
class: "font-medium text-grey-700 dark:text-grey-200 casual-25"
|
|
273
|
-
},
|
|
274
|
-
|
|
158
|
+
}, g(s.label), 9, Be),
|
|
159
|
+
s.description ? (a(), i("p", Le, g(s.description), 1)) : f("", !0)
|
|
275
160
|
])
|
|
276
161
|
]));
|
|
277
162
|
}
|
|
278
163
|
});
|
|
279
|
-
function
|
|
280
|
-
const
|
|
281
|
-
"pl-3 pr-10 py-2": !
|
|
282
|
-
"pl-4 pr-10 py-3": !
|
|
283
|
-
"pl-6 pr-10 py-3": !
|
|
284
|
-
"pl-10 pr-10 py-1": (
|
|
285
|
-
"pl-12 pr-10 py-3": (
|
|
286
|
-
"w-full block":
|
|
287
|
-
})),
|
|
288
|
-
"pointer-events-none opacity-50 cursor-not-allowed":
|
|
289
|
-
})),
|
|
290
|
-
"text-xs leading-4":
|
|
291
|
-
"text-sm leading-4":
|
|
292
|
-
"text-base leading-5":
|
|
164
|
+
function A(l) {
|
|
165
|
+
const n = D(() => ({
|
|
166
|
+
"pl-3 pr-10 py-2": !l.icon && l.type !== "color" && l.size === "small",
|
|
167
|
+
"pl-4 pr-10 py-3": !l.icon && l.type !== "color" && l.size === "medium",
|
|
168
|
+
"pl-6 pr-10 py-3": !l.icon && l.type !== "color" && l.size === "large",
|
|
169
|
+
"pl-10 pr-10 py-1": (l.icon || l.type === "color") && l.size === "small",
|
|
170
|
+
"pl-12 pr-10 py-3": (l.icon || l.type === "color") && (l.size === "medium" || l.size === "large"),
|
|
171
|
+
"w-full block": l.block === !0
|
|
172
|
+
})), e = D(() => ({
|
|
173
|
+
"pointer-events-none opacity-50 cursor-not-allowed": l.isDisabled
|
|
174
|
+
})), t = D(() => ({
|
|
175
|
+
"text-xs leading-4": l.size === "small",
|
|
176
|
+
"text-sm leading-4": l.size === "medium",
|
|
177
|
+
"text-base leading-5": l.size === "large"
|
|
293
178
|
}));
|
|
294
179
|
return {
|
|
295
|
-
inputClasses:
|
|
296
|
-
disabledClasses:
|
|
297
|
-
textSizeClasses:
|
|
180
|
+
inputClasses: n,
|
|
181
|
+
disabledClasses: e,
|
|
182
|
+
textSizeClasses: t
|
|
298
183
|
};
|
|
299
184
|
}
|
|
300
|
-
const
|
|
185
|
+
const Pe = ["placeholder", "type", "min", "max", "disabled", "value"], Me = { class: "absolute inset-y-2 left-2 w-8 cursor-pointer" }, Ie = ["disabled"], Te = ["disabled"], Ee = {
|
|
301
186
|
inheritAttrs: !1
|
|
302
|
-
},
|
|
303
|
-
...
|
|
187
|
+
}, _t = /* @__PURE__ */ $({
|
|
188
|
+
...Ee,
|
|
304
189
|
__name: "Input",
|
|
305
190
|
props: {
|
|
306
191
|
modelValue: {},
|
|
@@ -315,187 +200,201 @@ const Te = ["placeholder", "type", "min", "max", "disabled", "value"], Ae = { cl
|
|
|
315
200
|
showColorPicker: { type: Boolean }
|
|
316
201
|
},
|
|
317
202
|
emits: ["update:modelValue"],
|
|
318
|
-
setup(
|
|
319
|
-
const
|
|
203
|
+
setup(l, { expose: n, emit: e }) {
|
|
204
|
+
const t = l, s = z(null), u = z(t.modelValue ?? ""), v = (r) => t.type === "number" && r !== "" && r !== null ? Number(r) : r;
|
|
320
205
|
I(
|
|
321
|
-
() =>
|
|
322
|
-
(
|
|
323
|
-
typeof
|
|
206
|
+
() => t.modelValue,
|
|
207
|
+
(r) => {
|
|
208
|
+
typeof r < "u" && r !== v(u.value) && (u.value = r);
|
|
324
209
|
}
|
|
325
210
|
);
|
|
326
|
-
const
|
|
327
|
-
isSupported:
|
|
328
|
-
open:
|
|
329
|
-
sRGBHex:
|
|
330
|
-
} =
|
|
331
|
-
|
|
211
|
+
const o = e, { inputClasses: p, disabledClasses: _, textSizeClasses: V } = A(t), y = D(() => t.type === "color" ? "text" : t.type), {
|
|
212
|
+
isSupported: M,
|
|
213
|
+
open: m,
|
|
214
|
+
sRGBHex: N
|
|
215
|
+
} = de(), h = () => {
|
|
216
|
+
m();
|
|
332
217
|
};
|
|
333
|
-
I(
|
|
334
|
-
|
|
218
|
+
I(N, (r) => {
|
|
219
|
+
u.value = r, o("update:modelValue", r);
|
|
335
220
|
});
|
|
336
|
-
const
|
|
337
|
-
|
|
338
|
-
},
|
|
339
|
-
const
|
|
340
|
-
if (typeof
|
|
221
|
+
const B = function(r) {
|
|
222
|
+
u.value = (r == null ? void 0 : r.target).value, o("update:modelValue", v(u.value));
|
|
223
|
+
}, S = function() {
|
|
224
|
+
const r = v(u.value);
|
|
225
|
+
if (typeof r != "number")
|
|
341
226
|
return;
|
|
342
|
-
const
|
|
343
|
-
Math.max(
|
|
344
|
-
|
|
227
|
+
const L = Math.min(
|
|
228
|
+
Math.max(r, t.min ?? -1 / 0),
|
|
229
|
+
t.max ?? 1 / 0
|
|
345
230
|
);
|
|
346
|
-
|
|
231
|
+
L !== r && (u.value = L, o("update:modelValue", L));
|
|
347
232
|
};
|
|
348
|
-
return
|
|
233
|
+
return n({
|
|
349
234
|
focus: () => {
|
|
350
|
-
var
|
|
351
|
-
|
|
235
|
+
var r;
|
|
236
|
+
t.isDisabled || (r = s.value) == null || r.focus();
|
|
352
237
|
}
|
|
353
|
-
}), (
|
|
354
|
-
class: b(["relative", [
|
|
238
|
+
}), (r, L) => (a(), i("div", {
|
|
239
|
+
class: b(["relative", [r.block ? "w-full block" : "inline-block"]])
|
|
355
240
|
}, [
|
|
356
|
-
c("input",
|
|
357
|
-
class: ["relative mono-50 bg-white text-grey-800 placeholder:text-grey-400 placeholder:font-normal border-grey-300 dark:bg-grey-800 dark:text-grey-100 dark:placeholder:text-grey-500 dark:border-grey-700 focus:border-blue-400 focus:ring-blue-400 dark:focus:border-blue-800 dark:focus:ring-blue-800 rounded", [d(
|
|
358
|
-
placeholder:
|
|
359
|
-
type:
|
|
360
|
-
min:
|
|
361
|
-
max:
|
|
362
|
-
disabled:
|
|
363
|
-
value:
|
|
364
|
-
},
|
|
241
|
+
c("input", P({
|
|
242
|
+
class: ["relative mono-50 bg-white text-grey-800 placeholder:text-grey-400 placeholder:font-normal border-grey-300 dark:bg-grey-800 dark:text-grey-100 dark:placeholder:text-grey-500 dark:border-grey-700 focus:border-blue-400 focus:ring-blue-400 dark:focus:border-blue-800 dark:focus:ring-blue-800 rounded", [d(p), d(V), d(_)]],
|
|
243
|
+
placeholder: r.placeholder,
|
|
244
|
+
type: y.value,
|
|
245
|
+
min: r.min,
|
|
246
|
+
max: r.max,
|
|
247
|
+
disabled: r.isDisabled,
|
|
248
|
+
value: u.value
|
|
249
|
+
}, r.$attrs, {
|
|
365
250
|
ref_key: "inputElement",
|
|
366
|
-
ref:
|
|
367
|
-
onInput:
|
|
368
|
-
onChange:
|
|
369
|
-
}), null, 16,
|
|
370
|
-
|
|
371
|
-
c("label",
|
|
372
|
-
|
|
251
|
+
ref: s,
|
|
252
|
+
onInput: B,
|
|
253
|
+
onChange: S
|
|
254
|
+
}), null, 16, Pe),
|
|
255
|
+
r.type === "color" ? (a(), i(E, { key: 0 }, [
|
|
256
|
+
c("label", Me, [
|
|
257
|
+
J(c("input", {
|
|
373
258
|
class: "invisible",
|
|
374
259
|
type: "color",
|
|
375
|
-
disabled:
|
|
376
|
-
"onUpdate:modelValue":
|
|
377
|
-
onInput:
|
|
378
|
-
}, null, 40,
|
|
379
|
-
[
|
|
260
|
+
disabled: r.isDisabled,
|
|
261
|
+
"onUpdate:modelValue": L[0] || (L[0] = (q) => u.value = q),
|
|
262
|
+
onInput: B
|
|
263
|
+
}, null, 40, Ie), [
|
|
264
|
+
[Q, u.value]
|
|
380
265
|
]),
|
|
381
266
|
c("span", {
|
|
382
267
|
class: "border-1 absolute inset-0 block rounded border border-grey-600/25 bg-clip-border shadow",
|
|
383
|
-
style:
|
|
268
|
+
style: F(`background-color: ${u.value}`)
|
|
384
269
|
}, null, 4)
|
|
385
270
|
]),
|
|
386
|
-
d(
|
|
271
|
+
d(M) && r.showColorPicker ? (a(), i("button", {
|
|
387
272
|
key: 0,
|
|
388
273
|
type: "button",
|
|
389
274
|
class: "absolute inset-y-2 right-2 h-7 w-7 rounded-full hover:bg-grey-200",
|
|
390
|
-
disabled:
|
|
391
|
-
onClick:
|
|
275
|
+
disabled: r.isDisabled,
|
|
276
|
+
onClick: h
|
|
392
277
|
}, [
|
|
393
|
-
|
|
278
|
+
k(w, {
|
|
394
279
|
size: "xs",
|
|
395
280
|
name: "eyedropper"
|
|
396
281
|
})
|
|
397
|
-
], 8,
|
|
398
|
-
], 64)) :
|
|
282
|
+
], 8, Te)) : f("", !0)
|
|
283
|
+
], 64)) : r.icon ? (a(), i("span", {
|
|
399
284
|
key: 1,
|
|
400
|
-
class: b(["absolute left-0 inset-y-0 inline-flex items-center justify-center text-grey-700 dark:text-grey-100 px-4", d(
|
|
285
|
+
class: b(["absolute left-0 inset-y-0 inline-flex items-center justify-center text-grey-700 dark:text-grey-100 px-4", d(V)])
|
|
401
286
|
}, [
|
|
402
|
-
|
|
403
|
-
], 2)) :
|
|
287
|
+
k(w, { name: r.icon }, null, 8, ["name"])
|
|
288
|
+
], 2)) : f("", !0)
|
|
404
289
|
], 2));
|
|
405
290
|
}
|
|
406
|
-
}),
|
|
291
|
+
}), Ae = { class: "inline-block text-grey-700 dark:text-grey-200 text-sm font-medium casual-20" }, Ne = ["id", "for"], je = {
|
|
407
292
|
key: 0,
|
|
408
293
|
class: "block text-xs text-grey-400 font-normal mono-0 casual-60"
|
|
409
|
-
},
|
|
294
|
+
}, xt = /* @__PURE__ */ $({
|
|
410
295
|
__name: "Label",
|
|
411
296
|
props: {
|
|
412
297
|
id: {},
|
|
413
298
|
label: {},
|
|
414
299
|
description: {}
|
|
415
300
|
},
|
|
416
|
-
setup(
|
|
417
|
-
return (
|
|
301
|
+
setup(l) {
|
|
302
|
+
return (n, e) => (a(), i("span", Ae, [
|
|
418
303
|
c("label", {
|
|
419
|
-
id:
|
|
420
|
-
for:
|
|
421
|
-
},
|
|
422
|
-
|
|
304
|
+
id: n.id ? `${n.id}-label` : void 0,
|
|
305
|
+
for: n.id
|
|
306
|
+
}, g(n.label), 9, Ne),
|
|
307
|
+
n.description ? (a(), i("span", je, g(n.description), 1)) : f("", !0)
|
|
423
308
|
]));
|
|
424
309
|
}
|
|
425
|
-
}),
|
|
310
|
+
}), Ue = {
|
|
311
|
+
key: 0,
|
|
312
|
+
class: "sr-only"
|
|
313
|
+
}, $t = /* @__PURE__ */ $({
|
|
426
314
|
__name: "MenuContainer",
|
|
427
315
|
props: {
|
|
428
316
|
position: { default: "left" },
|
|
429
|
-
usePortal: { type: [Boolean, String], default: !1 }
|
|
317
|
+
usePortal: { type: [Boolean, String], default: !1 },
|
|
318
|
+
label: { default: "Open menu" }
|
|
430
319
|
},
|
|
431
|
-
setup(
|
|
432
|
-
const
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
320
|
+
setup(l) {
|
|
321
|
+
const n = l, e = (o = []) => o.some(
|
|
322
|
+
(p) => typeof p.children == "string" ? p.type !== X && p.children.trim() !== "" : Array.isArray(p.children) && e(p.children)
|
|
323
|
+
), t = z(null), s = z(null), u = n.position === "left" ? "bottom-end" : "bottom-start", { floatingStyles: v } = ke(t, s, {
|
|
324
|
+
placement: u,
|
|
325
|
+
// left/top instead of a transform, so the transition's translate isn't overridden
|
|
326
|
+
transform: !1,
|
|
327
|
+
whileElementsMounted: ve,
|
|
328
|
+
middleware: [_e(6), xe(), $e({ padding: 6 })]
|
|
436
329
|
});
|
|
437
|
-
return (
|
|
330
|
+
return (o, p) => (a(), C(d(ue), {
|
|
438
331
|
as: "div",
|
|
439
332
|
class: "inline-block text-left"
|
|
440
333
|
}, {
|
|
441
|
-
default:
|
|
442
|
-
|
|
334
|
+
default: x(({ open: _ }) => [
|
|
335
|
+
k(d(ce), {
|
|
443
336
|
class: "focus:outline-none",
|
|
444
337
|
ref_key: "reference",
|
|
445
|
-
ref:
|
|
338
|
+
ref: t
|
|
446
339
|
}, {
|
|
447
|
-
default:
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
340
|
+
default: x(() => {
|
|
341
|
+
var V, y;
|
|
342
|
+
return [
|
|
343
|
+
T(o.$slots, "button", {}, () => [
|
|
344
|
+
k(d(w), {
|
|
345
|
+
class: "fill-current",
|
|
346
|
+
name: "ellipsis-h"
|
|
347
|
+
})
|
|
348
|
+
]),
|
|
349
|
+
e((y = (V = o.$slots).button) == null ? void 0 : y.call(V)) ? f("", !0) : (a(), i("span", Ue, g(o.label), 1))
|
|
350
|
+
];
|
|
351
|
+
}),
|
|
455
352
|
_: 3
|
|
456
353
|
}, 512),
|
|
457
|
-
(
|
|
458
|
-
to: typeof
|
|
459
|
-
disabled: !
|
|
354
|
+
(a(), C(W, {
|
|
355
|
+
to: typeof o.usePortal == "string" ? o.usePortal : "body",
|
|
356
|
+
disabled: !o.usePortal
|
|
460
357
|
}, [
|
|
461
|
-
|
|
462
|
-
class: "
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
y
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
358
|
+
k(O, {
|
|
359
|
+
"enter-active-class": "transition duration-200 ease-in-out",
|
|
360
|
+
"enter-from-class": "transform -translate-y-4 opacity-0",
|
|
361
|
+
"enter-to-class": "transform opacity-100",
|
|
362
|
+
"leave-active-class": "transition duration-100 ease-in-out",
|
|
363
|
+
"leave-from-class": "transform opacity-100",
|
|
364
|
+
"leave-to-class": "transform -translate-y-2 opacity-0"
|
|
365
|
+
}, {
|
|
366
|
+
default: x(() => [
|
|
367
|
+
_ ? (a(), i("div", {
|
|
368
|
+
key: 0,
|
|
369
|
+
class: "w-56 z-20",
|
|
370
|
+
style: F(d(v)),
|
|
371
|
+
ref_key: "floating",
|
|
372
|
+
ref: s
|
|
373
|
+
}, [
|
|
374
|
+
k(d(me), {
|
|
375
|
+
static: "",
|
|
477
376
|
class: b([
|
|
478
377
|
"z-40 mt-1 p-1 bg-white rounded shadow-lg text-grey-700 focus:outline-none w-full"
|
|
479
378
|
])
|
|
480
379
|
}, {
|
|
481
|
-
default:
|
|
482
|
-
|
|
380
|
+
default: x(() => [
|
|
381
|
+
T(o.$slots, "default")
|
|
483
382
|
]),
|
|
484
383
|
_: 3
|
|
485
384
|
})
|
|
486
|
-
]),
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
385
|
+
], 4)) : f("", !0)
|
|
386
|
+
]),
|
|
387
|
+
_: 2
|
|
388
|
+
}, 1024)
|
|
490
389
|
], 8, ["to", "disabled"]))
|
|
491
390
|
]),
|
|
492
391
|
_: 3
|
|
493
392
|
}));
|
|
494
393
|
}
|
|
495
|
-
}),
|
|
394
|
+
}), Fe = {
|
|
496
395
|
key: 0,
|
|
497
396
|
class: "bg-grey-300 px-2 rounded-lg max-w-[66px] truncate"
|
|
498
|
-
},
|
|
397
|
+
}, wt = /* @__PURE__ */ $({
|
|
499
398
|
__name: "MenuLink",
|
|
500
399
|
props: {
|
|
501
400
|
label: {},
|
|
@@ -503,18 +402,18 @@ const Te = ["placeholder", "type", "min", "max", "disabled", "value"], Ae = { cl
|
|
|
503
402
|
disabled: { type: Boolean },
|
|
504
403
|
as: {}
|
|
505
404
|
},
|
|
506
|
-
setup(
|
|
507
|
-
return (
|
|
508
|
-
default:
|
|
509
|
-
(
|
|
405
|
+
setup(l) {
|
|
406
|
+
return (n, e) => (a(), C(d(fe), Y(Z({ disabled: n.disabled })), {
|
|
407
|
+
default: x(({ active: t }) => [
|
|
408
|
+
(a(), C(ee(n.as || "span"), {
|
|
510
409
|
class: b(["flex items-center justify-between px-4 py-2 text-xs leading-5 transition-colors duration-100 rounded-lg", [
|
|
511
|
-
|
|
512
|
-
|
|
410
|
+
t ? "bg-grey-200" : "",
|
|
411
|
+
n.disabled ? "opacity-50 pointer-events-none" : "hover:bg-grey-200 focus:bg-grey-200 focus:outline-none"
|
|
513
412
|
]])
|
|
514
413
|
}, {
|
|
515
|
-
default:
|
|
516
|
-
c("span", null,
|
|
517
|
-
|
|
414
|
+
default: x(() => [
|
|
415
|
+
c("span", null, g(n.label), 1),
|
|
416
|
+
n.meta ? (a(), i("span", Fe, g(n.meta), 1)) : f("", !0)
|
|
518
417
|
]),
|
|
519
418
|
_: 2
|
|
520
419
|
}, 1032, ["class"]))
|
|
@@ -522,19 +421,19 @@ const Te = ["placeholder", "type", "min", "max", "disabled", "value"], Ae = { cl
|
|
|
522
421
|
_: 1
|
|
523
422
|
}, 16));
|
|
524
423
|
}
|
|
525
|
-
}),
|
|
424
|
+
}), Oe = { class: "relative" }, Re = {
|
|
526
425
|
key: 0,
|
|
527
426
|
class: "absolute left-0 inset-y-0 inline-flex items-center justify-center text-grey-700 dark:text-grey-100 px-4 pointer-events-none"
|
|
528
|
-
},
|
|
427
|
+
}, Ge = {
|
|
529
428
|
key: 1,
|
|
530
429
|
class: "block truncate"
|
|
531
|
-
},
|
|
430
|
+
}, He = {
|
|
532
431
|
key: 2,
|
|
533
432
|
class: "text-grey-500 truncate"
|
|
534
|
-
},
|
|
433
|
+
}, Ke = { class: "absolute right-0 inset-y-0 inline-flex items-center justify-center text-grey-700 dark:text-grey-100 px-4 pointer-events-none" }, qe = { class: "absolute right-2 inset-y-0 flex items-center" }, Je = {
|
|
535
434
|
key: 0,
|
|
536
435
|
class: "bg-grey-500 text-grey-100 rounded text-xs px-2 py-1"
|
|
537
|
-
},
|
|
436
|
+
}, Ct = /* @__PURE__ */ $({
|
|
538
437
|
__name: "Select",
|
|
539
438
|
props: {
|
|
540
439
|
id: {},
|
|
@@ -544,54 +443,60 @@ const Te = ["placeholder", "type", "min", "max", "disabled", "value"], Ae = { cl
|
|
|
544
443
|
placeholder: {},
|
|
545
444
|
isDisabled: { type: Boolean, default: !1 },
|
|
546
445
|
options: {},
|
|
547
|
-
disabledBadge: {}
|
|
446
|
+
disabledBadge: {},
|
|
447
|
+
by: {}
|
|
548
448
|
},
|
|
549
449
|
emits: ["update:modelValue"],
|
|
550
|
-
setup(
|
|
551
|
-
const
|
|
552
|
-
|
|
450
|
+
setup(l, { emit: n }) {
|
|
451
|
+
const e = l, t = z(e.modelValue ?? null), s = n, u = (m) => typeof e.by == "string" ? m[e.by] : m.id, { inputClasses: v, disabledClasses: o, textSizeClasses: p } = A(e), _ = z(!1), V = () => {
|
|
452
|
+
_.value = !!e.id && !!document.getElementById(`${e.id}-label`);
|
|
553
453
|
};
|
|
554
|
-
|
|
555
|
-
const
|
|
556
|
-
() =>
|
|
454
|
+
R(V), I(() => e.id, V, { flush: "post" });
|
|
455
|
+
const y = D(
|
|
456
|
+
() => _.value ? `${e.id}-label ${e.id}` : void 0
|
|
557
457
|
);
|
|
558
458
|
I(
|
|
559
|
-
() =>
|
|
560
|
-
(
|
|
561
|
-
|
|
459
|
+
() => e.modelValue,
|
|
460
|
+
(m) => {
|
|
461
|
+
t.value = m ?? null;
|
|
562
462
|
}
|
|
563
463
|
);
|
|
564
|
-
const
|
|
565
|
-
|
|
464
|
+
const M = (m) => {
|
|
465
|
+
t.value = m, s("update:modelValue", m);
|
|
566
466
|
};
|
|
567
|
-
return (
|
|
467
|
+
return (m, N) => (a(), C(d(pe), {
|
|
568
468
|
as: "div",
|
|
569
|
-
"model-value":
|
|
570
|
-
"onUpdate:modelValue":
|
|
571
|
-
|
|
469
|
+
"model-value": t.value,
|
|
470
|
+
"onUpdate:modelValue": M,
|
|
471
|
+
by: m.by,
|
|
472
|
+
disabled: m.isDisabled
|
|
572
473
|
}, {
|
|
573
|
-
default:
|
|
574
|
-
c("div",
|
|
575
|
-
|
|
576
|
-
id:
|
|
577
|
-
"aria-labelledby":
|
|
578
|
-
class: b(["w-full mono-50 bg-white text-grey-800 placeholder-grey-600 border border-grey-300 dark:bg-grey-800 dark:text-grey-100 dark:placeholder-grey-400 dark:border-grey-700 focus:ring-2 focus:border-blue-400 focus:ring-blue-400 focus:outline-none dark:focus:border-blue-800 dark:focus:ring-blue-800 cursor-default rounded font-normal text-left", [d(
|
|
474
|
+
default: x(() => [
|
|
475
|
+
c("div", Oe, [
|
|
476
|
+
k(d(be), {
|
|
477
|
+
id: m.id,
|
|
478
|
+
"aria-labelledby": y.value,
|
|
479
|
+
class: b(["w-full mono-50 bg-white text-grey-800 placeholder-grey-600 border border-grey-300 dark:bg-grey-800 dark:text-grey-100 dark:placeholder-grey-400 dark:border-grey-700 focus:ring-2 focus:border-blue-400 focus:ring-blue-400 focus:outline-none dark:focus:border-blue-800 dark:focus:ring-blue-800 cursor-default rounded font-normal text-left", [d(v), d(p), d(o)]])
|
|
579
480
|
}, {
|
|
580
|
-
default:
|
|
581
|
-
var
|
|
481
|
+
default: x(() => {
|
|
482
|
+
var h;
|
|
582
483
|
return [
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
name: ((
|
|
484
|
+
m.icon ? (a(), i("span", Re, [
|
|
485
|
+
k(w, {
|
|
486
|
+
name: ((h = t.value) == null ? void 0 : h.icon) ?? m.icon
|
|
586
487
|
}, null, 8, ["name"])
|
|
587
|
-
])) :
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
488
|
+
])) : f("", !0),
|
|
489
|
+
t.value ? (a(), i("span", Ge, [
|
|
490
|
+
T(m.$slots, "option", {
|
|
491
|
+
option: t.value,
|
|
492
|
+
active: !1,
|
|
493
|
+
selected: !0
|
|
494
|
+
}, () => [
|
|
495
|
+
j(g(t.value.label), 1)
|
|
496
|
+
])
|
|
497
|
+
])) : (a(), i("span", He, g(m.placeholder), 1)),
|
|
498
|
+
c("span", Ke, [
|
|
499
|
+
k(w, {
|
|
595
500
|
class: "text-grey-400",
|
|
596
501
|
name: "chevron-down",
|
|
597
502
|
"aria-hidden": "true"
|
|
@@ -599,89 +504,93 @@ const Te = ["placeholder", "type", "min", "max", "disabled", "value"], Ae = { cl
|
|
|
599
504
|
])
|
|
600
505
|
];
|
|
601
506
|
}),
|
|
602
|
-
_:
|
|
507
|
+
_: 3
|
|
603
508
|
}, 8, ["id", "aria-labelledby", "class"]),
|
|
604
|
-
|
|
509
|
+
k(O, {
|
|
605
510
|
"leave-active-class": "transition ease-in duration-100",
|
|
606
511
|
"leave-from-class": "opacity-100",
|
|
607
512
|
"leave-to-class": "opacity-0"
|
|
608
513
|
}, {
|
|
609
|
-
default:
|
|
610
|
-
|
|
611
|
-
default:
|
|
612
|
-
(
|
|
514
|
+
default: x(() => [
|
|
515
|
+
k(d(ge), { class: "absolute z-10 mt-1 w-full bg-white dark:bg-grey-700 dark:text-grey-50 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" }, {
|
|
516
|
+
default: x(() => [
|
|
517
|
+
(a(!0), i(E, null, G(m.options, (h) => (a(), C(d(ye), {
|
|
613
518
|
as: "template",
|
|
614
|
-
key:
|
|
615
|
-
value:
|
|
616
|
-
disabled:
|
|
519
|
+
key: u(h),
|
|
520
|
+
value: h,
|
|
521
|
+
disabled: h.disabled
|
|
617
522
|
}, {
|
|
618
|
-
default:
|
|
523
|
+
default: x(({ active: B, selected: S }) => [
|
|
619
524
|
c("li", {
|
|
620
525
|
class: b([
|
|
621
|
-
|
|
526
|
+
B ? "text-white bg-blue-500" : "text-grey-900 dark:text-grey-50",
|
|
622
527
|
"cursor-default select-none relative py-2 pl-3 pr-12",
|
|
623
|
-
{ "opacity-50 bg-grey-100":
|
|
528
|
+
{ "opacity-50 bg-grey-100": h.disabled }
|
|
624
529
|
])
|
|
625
530
|
}, [
|
|
626
|
-
c("div",
|
|
627
|
-
|
|
531
|
+
c("div", qe, [
|
|
532
|
+
h.disabled && m.disabledBadge ? (a(), i("span", Je, g(m.disabledBadge), 1)) : f("", !0)
|
|
628
533
|
]),
|
|
629
534
|
c("span", {
|
|
630
535
|
class: b([
|
|
631
|
-
|
|
536
|
+
S ? "font-semibold" : "font-normal",
|
|
632
537
|
"block truncate"
|
|
633
538
|
])
|
|
634
539
|
}, [
|
|
635
|
-
|
|
540
|
+
h.icon ? (a(), C(w, {
|
|
636
541
|
key: 0,
|
|
637
542
|
class: "inline-block mr-1",
|
|
638
|
-
name:
|
|
639
|
-
}, null, 8, ["name"])) :
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
543
|
+
name: h.icon
|
|
544
|
+
}, null, 8, ["name"])) : f("", !0),
|
|
545
|
+
T(m.$slots, "option", {
|
|
546
|
+
option: h,
|
|
547
|
+
active: B,
|
|
548
|
+
selected: S
|
|
549
|
+
}, () => [
|
|
550
|
+
j(g(h.label), 1)
|
|
551
|
+
])
|
|
643
552
|
], 2),
|
|
644
|
-
|
|
553
|
+
S ? (a(), i("span", {
|
|
645
554
|
key: 0,
|
|
646
555
|
class: b([
|
|
647
|
-
|
|
556
|
+
B ? "text-blue-100" : "text-blue-500",
|
|
648
557
|
"absolute inset-y-0 right-0 flex items-center pr-4"
|
|
649
558
|
])
|
|
650
559
|
}, [
|
|
651
|
-
|
|
560
|
+
k(w, {
|
|
652
561
|
name: "check",
|
|
653
562
|
class: "h-5 w-5",
|
|
654
563
|
"aria-hidden": "true"
|
|
655
564
|
})
|
|
656
|
-
], 2)) :
|
|
565
|
+
], 2)) : f("", !0)
|
|
657
566
|
], 2)
|
|
658
567
|
]),
|
|
659
568
|
_: 2
|
|
660
569
|
}, 1032, ["value", "disabled"]))), 128))
|
|
661
570
|
]),
|
|
662
|
-
_:
|
|
571
|
+
_: 3
|
|
663
572
|
})
|
|
664
573
|
]),
|
|
665
|
-
_:
|
|
574
|
+
_: 3
|
|
666
575
|
})
|
|
667
576
|
])
|
|
668
577
|
]),
|
|
669
|
-
_:
|
|
670
|
-
}, 8, ["model-value", "disabled"]));
|
|
578
|
+
_: 3
|
|
579
|
+
}, 8, ["model-value", "by", "disabled"]));
|
|
671
580
|
}
|
|
672
|
-
}),
|
|
581
|
+
}), Qe = { class: "animate-pulse" }, We = { class: "flex items-center justify-between space-x-4" }, Xe = {
|
|
673
582
|
key: 0,
|
|
674
583
|
class: "w-12 h-12 bg-current rounded-full shrink-0"
|
|
675
|
-
},
|
|
584
|
+
}, Ye = {
|
|
676
585
|
key: 1,
|
|
677
586
|
class: "w-full h-8 bg-current rounded-lg"
|
|
678
|
-
},
|
|
587
|
+
}, Ze = {
|
|
679
588
|
key: 0,
|
|
680
589
|
class: "mt-6 space-y-2"
|
|
681
|
-
},
|
|
590
|
+
}, et = {
|
|
682
591
|
key: 1,
|
|
683
592
|
class: "w-1/3 h-10 mt-6 bg-current rounded-lg"
|
|
684
|
-
},
|
|
593
|
+
}, Vt = /* @__PURE__ */ $({
|
|
685
594
|
__name: "Skeleton",
|
|
686
595
|
props: {
|
|
687
596
|
avatar: { type: Boolean, default: !1 },
|
|
@@ -689,71 +598,86 @@ const Te = ["placeholder", "type", "min", "max", "disabled", "value"], Ae = { cl
|
|
|
689
598
|
lines: { default: 3 },
|
|
690
599
|
footer: { type: Boolean, default: !1 }
|
|
691
600
|
},
|
|
692
|
-
setup(
|
|
693
|
-
const
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
l.title ? (o(), u("div", ta)) : m("", !0)
|
|
601
|
+
setup(l) {
|
|
602
|
+
const n = l, e = ["mr-4", "mr-5", "mr-6", "mr-8", "mr-10", "mr-16", "mr-24", "mr-32"], t = D(
|
|
603
|
+
() => Array.from({ length: Math.max(0, Math.floor(n.lines)) }, () => ({
|
|
604
|
+
margin: e[Math.floor(Math.random() * e.length)]
|
|
605
|
+
}))
|
|
606
|
+
);
|
|
607
|
+
return (s, u) => (a(), i("div", Qe, [
|
|
608
|
+
c("div", We, [
|
|
609
|
+
s.avatar ? (a(), i("div", Xe)) : f("", !0),
|
|
610
|
+
s.title ? (a(), i("div", Ye)) : f("", !0)
|
|
703
611
|
]),
|
|
704
|
-
|
|
705
|
-
(
|
|
706
|
-
class: b(["h-4 bg-current rounded-lg",
|
|
707
|
-
key:
|
|
612
|
+
t.value.length > 0 ? (a(), i("div", Ze, [
|
|
613
|
+
(a(!0), i(E, null, G(t.value, (v, o) => (a(), i("div", {
|
|
614
|
+
class: b(["h-4 bg-current rounded-lg", v.margin]),
|
|
615
|
+
key: o
|
|
708
616
|
}, null, 2))), 128))
|
|
709
|
-
])) :
|
|
710
|
-
|
|
617
|
+
])) : f("", !0),
|
|
618
|
+
s.footer ? (a(), i("div", et)) : f("", !0)
|
|
711
619
|
]));
|
|
712
620
|
}
|
|
713
|
-
}),
|
|
621
|
+
}), tt = {
|
|
622
|
+
role: "status",
|
|
623
|
+
class: "inline-flex align-[-0.125em]"
|
|
624
|
+
}, st = { class: "sr-only" }, lt = {
|
|
625
|
+
inheritAttrs: !1
|
|
626
|
+
}, Dt = /* @__PURE__ */ $({
|
|
627
|
+
...lt,
|
|
714
628
|
__name: "Spinner",
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
629
|
+
props: {
|
|
630
|
+
label: { default: "Loading" }
|
|
631
|
+
},
|
|
632
|
+
setup(l) {
|
|
633
|
+
const n = z(!1);
|
|
634
|
+
let e;
|
|
635
|
+
return R(() => {
|
|
636
|
+
e = setTimeout(() => n.value = !0, 100);
|
|
637
|
+
}), te(() => clearTimeout(e)), (t, s) => (a(), i("span", tt, [
|
|
638
|
+
k(d(w), P({
|
|
639
|
+
class: "animate-spin",
|
|
640
|
+
name: "circle-notch"
|
|
641
|
+
}, t.$attrs), null, 16),
|
|
642
|
+
c("span", st, g(n.value ? t.label : ""), 1)
|
|
643
|
+
]));
|
|
720
644
|
}
|
|
721
|
-
}),
|
|
645
|
+
}), ot = { class: "sr-only" }, zt = /* @__PURE__ */ $({
|
|
722
646
|
__name: "Switch",
|
|
723
647
|
props: {
|
|
724
|
-
id: { default: () =>
|
|
648
|
+
id: { default: () => H() },
|
|
725
649
|
label: {},
|
|
726
650
|
modelValue: { type: Boolean },
|
|
727
651
|
onLabel: { default: "on" },
|
|
728
652
|
offLabel: { default: "off" }
|
|
729
653
|
},
|
|
730
654
|
emits: ["update:modelValue", "change"],
|
|
731
|
-
setup(
|
|
732
|
-
const
|
|
733
|
-
|
|
655
|
+
setup(l, { emit: n }) {
|
|
656
|
+
const e = n, t = (s) => {
|
|
657
|
+
e("update:modelValue", s), e("change", s);
|
|
734
658
|
};
|
|
735
|
-
return (
|
|
736
|
-
id:
|
|
737
|
-
modelValue:
|
|
738
|
-
class: b([
|
|
739
|
-
"onUpdate:modelValue":
|
|
659
|
+
return (s, u) => (a(), C(d(he), {
|
|
660
|
+
id: s.id,
|
|
661
|
+
modelValue: s.modelValue,
|
|
662
|
+
class: b([s.modelValue ? "bg-blue-700" : "bg-grey-700", "relative inline-flex items-center h-6 transition rounded-full w-14 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-grey-900 focus:ring-blue-300"]),
|
|
663
|
+
"onUpdate:modelValue": t
|
|
740
664
|
}, {
|
|
741
|
-
default:
|
|
665
|
+
default: x(() => [
|
|
742
666
|
c("span", {
|
|
743
|
-
class: b(["absolute text-xs text-center text-white inset-x-2",
|
|
744
|
-
},
|
|
745
|
-
c("span",
|
|
667
|
+
class: b(["absolute text-xs text-center text-white inset-x-2", s.modelValue ? "pr-3" : "pl-3"])
|
|
668
|
+
}, g(s.modelValue === !0 ? s.onLabel : s.offLabel), 3),
|
|
669
|
+
c("span", ot, g(s.label), 1),
|
|
746
670
|
c("span", {
|
|
747
|
-
class: b([
|
|
671
|
+
class: b([s.modelValue ? "translate-x-9" : "translate-x-1", "inline-block w-4 h-4 transition bg-white rounded-full"])
|
|
748
672
|
}, null, 2)
|
|
749
673
|
]),
|
|
750
674
|
_: 1
|
|
751
675
|
}, 8, ["id", "modelValue", "class"]));
|
|
752
676
|
}
|
|
753
|
-
}),
|
|
677
|
+
}), at = { class: "relative" }, nt = ["disabled", "value"], rt = {
|
|
754
678
|
inheritAttrs: !1
|
|
755
|
-
},
|
|
756
|
-
...
|
|
679
|
+
}, Bt = /* @__PURE__ */ $({
|
|
680
|
+
...rt,
|
|
757
681
|
__name: "Textarea",
|
|
758
682
|
props: {
|
|
759
683
|
modelValue: {},
|
|
@@ -762,43 +686,43 @@ const Te = ["placeholder", "type", "min", "max", "disabled", "value"], Ae = { cl
|
|
|
762
686
|
block: { type: Boolean }
|
|
763
687
|
},
|
|
764
688
|
emits: ["update:modelValue"],
|
|
765
|
-
setup(
|
|
766
|
-
const
|
|
767
|
-
|
|
768
|
-
},
|
|
769
|
-
return
|
|
689
|
+
setup(l, { expose: n, emit: e }) {
|
|
690
|
+
const t = l, s = e, { inputClasses: u, disabledClasses: v, textSizeClasses: o } = A(t), p = function(y) {
|
|
691
|
+
s("update:modelValue", (y == null ? void 0 : y.target).value);
|
|
692
|
+
}, _ = z(null);
|
|
693
|
+
return n({
|
|
770
694
|
focus: () => {
|
|
771
|
-
|
|
695
|
+
t.isDisabled || _.value.focus();
|
|
772
696
|
}
|
|
773
|
-
}), (
|
|
774
|
-
c("textarea",
|
|
775
|
-
class: ["mono-50 bg-white text-grey-800 placeholder:text-grey-400 placeholder:font-normal border-grey-300 dark:bg-grey-800 dark:text-grey-100 dark:placeholder:text-grey-500 dark:border-grey-700 focus:border-blue-400 focus:ring-blue-400 dark:focus:border-blue-800 dark:focus:ring-blue-800 rounded", [d(
|
|
776
|
-
disabled:
|
|
777
|
-
value:
|
|
778
|
-
},
|
|
697
|
+
}), (y, M) => (a(), i("div", at, [
|
|
698
|
+
c("textarea", P({
|
|
699
|
+
class: ["mono-50 bg-white text-grey-800 placeholder:text-grey-400 placeholder:font-normal border-grey-300 dark:bg-grey-800 dark:text-grey-100 dark:placeholder:text-grey-500 dark:border-grey-700 focus:border-blue-400 focus:ring-blue-400 dark:focus:border-blue-800 dark:focus:ring-blue-800 rounded", [d(u), d(o), d(v)]],
|
|
700
|
+
disabled: y.isDisabled,
|
|
701
|
+
value: y.modelValue ?? ""
|
|
702
|
+
}, y.$attrs, {
|
|
779
703
|
ref_key: "input",
|
|
780
|
-
ref:
|
|
704
|
+
ref: _,
|
|
781
705
|
cols: "56",
|
|
782
706
|
rows: "8",
|
|
783
|
-
onInput:
|
|
707
|
+
onInput: p
|
|
784
708
|
}), `
|
|
785
|
-
`, 16,
|
|
709
|
+
`, 16, nt)
|
|
786
710
|
]));
|
|
787
711
|
}
|
|
788
712
|
});
|
|
789
713
|
export {
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
714
|
+
kt as D9Button,
|
|
715
|
+
vt as D9Checkbox,
|
|
716
|
+
w as D9Icon,
|
|
717
|
+
_t as D9Input,
|
|
718
|
+
xt as D9Label,
|
|
719
|
+
$t as D9Menu,
|
|
720
|
+
wt as D9MenuLink,
|
|
721
|
+
Ct as D9Select,
|
|
722
|
+
Vt as D9Skeleton,
|
|
723
|
+
Dt as D9Spinner,
|
|
724
|
+
zt as D9Switch,
|
|
725
|
+
Bt as D9Textarea,
|
|
726
|
+
ht as brands,
|
|
727
|
+
yt as icons
|
|
804
728
|
};
|