@scalar/components 0.13.35 → 0.13.36
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/dist/components/ScalarCombobox/ScalarComboboxOption.vue.d.ts.map +1 -1
- package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.js +15 -11
- package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.d.ts +23 -0
- package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.d.ts.map +1 -0
- package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.js +28 -0
- package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue2.js +4 -0
- package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts.map +1 -1
- package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.js +88 -75
- package/dist/components/ScalarForm/ScalarForm.stories.d.ts +8 -0
- package/dist/components/ScalarForm/ScalarForm.stories.d.ts.map +1 -0
- package/dist/components/ScalarForm/ScalarForm.test.d.ts +2 -0
- package/dist/components/ScalarForm/ScalarForm.test.d.ts.map +1 -0
- package/dist/components/ScalarForm/ScalarForm.vue.d.ts +26 -0
- package/dist/components/ScalarForm/ScalarForm.vue.d.ts.map +1 -0
- package/dist/components/ScalarForm/ScalarForm.vue.js +19 -0
- package/dist/components/ScalarForm/ScalarForm.vue2.js +4 -0
- package/dist/components/ScalarForm/ScalarFormField.vue.d.ts +26 -0
- package/dist/components/ScalarForm/ScalarFormField.vue.d.ts.map +1 -0
- package/dist/components/ScalarForm/ScalarFormSection.vue.d.ts +14 -0
- package/dist/components/ScalarForm/ScalarFormSection.vue.d.ts.map +1 -0
- package/dist/components/ScalarForm/index.d.ts +2 -0
- package/dist/components/ScalarForm/index.d.ts.map +1 -0
- package/dist/components/ScalarTextArea/ScalarTextArea.stories.d.ts +7 -0
- package/dist/components/ScalarTextArea/ScalarTextArea.stories.d.ts.map +1 -0
- package/dist/components/ScalarTextArea/ScalarTextArea.test.d.ts +2 -0
- package/dist/components/ScalarTextArea/ScalarTextArea.test.d.ts.map +1 -0
- package/dist/components/ScalarTextArea/ScalarTextArea.vue.d.ts +19 -0
- package/dist/components/ScalarTextArea/ScalarTextArea.vue.d.ts.map +1 -0
- package/dist/components/ScalarTextArea/ScalarTextArea.vue.js +44 -0
- package/dist/components/ScalarTextArea/ScalarTextArea.vue2.js +4 -0
- package/dist/components/ScalarTextArea/index.d.ts +2 -0
- package/dist/components/ScalarTextArea/index.d.ts.map +1 -0
- package/dist/components/ScalarTextInput/ScalarTextInput.stories.d.ts +9 -0
- package/dist/components/ScalarTextInput/ScalarTextInput.stories.d.ts.map +1 -0
- package/dist/components/ScalarTextInput/ScalarTextInput.test.d.ts +2 -0
- package/dist/components/ScalarTextInput/ScalarTextInput.test.d.ts.map +1 -0
- package/dist/components/ScalarTextInput/ScalarTextInput.vue.d.ts +29 -0
- package/dist/components/ScalarTextInput/ScalarTextInput.vue.d.ts.map +1 -0
- package/dist/components/ScalarTextInput/ScalarTextInput.vue.js +72 -0
- package/dist/components/ScalarTextInput/ScalarTextInput.vue2.js +4 -0
- package/dist/components/ScalarTextInput/index.d.ts +2 -0
- package/dist/components/ScalarTextInput/index.d.ts.map +1 -0
- package/dist/hooks/useBindCx.d.ts +13 -0
- package/dist/hooks/useBindCx.d.ts.map +1 -1
- package/dist/hooks/useBindCx.js +21 -10
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +107 -103
- package/dist/style.css +1 -1
- package/package.json +4 -4
- package/dist/components/ScalarTextField/ScalarTextField.stories.d.ts +0 -345
- package/dist/components/ScalarTextField/ScalarTextField.stories.d.ts.map +0 -1
- package/dist/components/ScalarTextField/ScalarTextField.test.d.ts +0 -2
- package/dist/components/ScalarTextField/ScalarTextField.test.d.ts.map +0 -1
- package/dist/components/ScalarTextField/ScalarTextField.vue.d.ts +0 -45
- package/dist/components/ScalarTextField/ScalarTextField.vue.d.ts.map +0 -1
- package/dist/components/ScalarTextField/ScalarTextField.vue.js +0 -7
- package/dist/components/ScalarTextField/ScalarTextField.vue2.js +0 -110
- package/dist/components/ScalarTextField/index.d.ts +0 -2
- package/dist/components/ScalarTextField/index.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarComboboxOption.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarComboboxOption.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"names":[],"mappings":"AA4DA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,kBAAkB,CAAA;AAIzB,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,wBAAwB,CAAA;IAChC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AA+BF,iBAAS,cAAc;WA2ET,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;4FAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as s, openBlock as l, createElementBlock as
|
|
2
|
-
import { cva as
|
|
1
|
+
import { defineComponent as s, openBlock as l, createElementBlock as r, normalizeClass as n, unref as t, createVNode as i, normalizeStyle as c, createElementVNode as p, renderSlot as m, createBlock as d, withModifiers as u, createCommentVNode as f } from "vue";
|
|
2
|
+
import { cva as b, cx as y } from "../../cva.js";
|
|
3
3
|
import v from "../ScalarListbox/ScalarListboxCheckbox.vue.js";
|
|
4
4
|
import k from "../ScalarIcon/ScalarIcon.vue.js";
|
|
5
|
-
const g = { class: "inline-block min-w-0 flex-1 truncate text-c-1" },
|
|
5
|
+
const g = ["aria-selected"], B = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, $ = /* @__PURE__ */ s({
|
|
6
6
|
__name: "ScalarComboboxOption",
|
|
7
7
|
props: {
|
|
8
8
|
active: { type: Boolean },
|
|
@@ -11,8 +11,8 @@ const g = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, w = /* @__
|
|
|
11
11
|
isDeletable: { type: Boolean }
|
|
12
12
|
},
|
|
13
13
|
emits: ["delete"],
|
|
14
|
-
setup(
|
|
15
|
-
const
|
|
14
|
+
setup(h) {
|
|
15
|
+
const a = b({
|
|
16
16
|
base: [
|
|
17
17
|
// Group
|
|
18
18
|
"group/item",
|
|
@@ -28,27 +28,31 @@ const g = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, w = /* @__
|
|
|
28
28
|
active: { true: "bg-b-2" }
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
return (e, o) => (l(),
|
|
32
|
-
|
|
31
|
+
return (e, o) => (l(), r("li", {
|
|
32
|
+
"aria-selected": e.selected,
|
|
33
|
+
class: n(t(y)(t(a)({ active: e.active, selected: e.selected }))),
|
|
34
|
+
role: "option",
|
|
35
|
+
tabindex: "-1"
|
|
33
36
|
}, [
|
|
34
37
|
i(t(v), {
|
|
35
38
|
selected: e.selected,
|
|
36
39
|
style: c(e.style)
|
|
37
40
|
}, null, 8, ["selected", "style"]),
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
p("span", B, [
|
|
42
|
+
m(e.$slots, "default")
|
|
40
43
|
]),
|
|
41
44
|
e.isDeletable ? (l(), d(t(k), {
|
|
42
45
|
key: 0,
|
|
46
|
+
"aria-label": "Delete",
|
|
43
47
|
class: "text-c-2 opacity-0 group-hover/item:opacity-100",
|
|
44
48
|
icon: "Delete",
|
|
45
49
|
size: "md",
|
|
46
50
|
thickness: "1.5",
|
|
47
51
|
onClick: o[0] || (o[0] = u((x) => e.$emit("delete"), ["stop"]))
|
|
48
52
|
})) : f("", !0)
|
|
49
|
-
],
|
|
53
|
+
], 10, g));
|
|
50
54
|
}
|
|
51
55
|
});
|
|
52
56
|
export {
|
|
53
|
-
|
|
57
|
+
$ as default
|
|
54
58
|
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
id?: string;
|
|
3
|
+
hidden?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare function __VLS_template(): {
|
|
6
|
+
attrs: Partial<{}>;
|
|
7
|
+
slots: {
|
|
8
|
+
label?(_: {}): any;
|
|
9
|
+
default?(_: {}): any;
|
|
10
|
+
};
|
|
11
|
+
refs: {};
|
|
12
|
+
rootEl: HTMLDivElement;
|
|
13
|
+
};
|
|
14
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
15
|
+
declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
16
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
17
|
+
export default _default;
|
|
18
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
19
|
+
new (): {
|
|
20
|
+
$slots: S;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=ScalarComboboxOptionGroup.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarComboboxOptionGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptionGroup.vue"],"names":[],"mappings":"AA6BA,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AASF,iBAAS,cAAc;WA+CT,OAAO,IAA6B;;uBATvB,GAAG;yBACD,GAAG;;;;EAa/B;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,6SAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { defineComponent as t, useId as a, openBlock as o, createElementBlock as d, renderSlot as l, createCommentVNode as i } from "vue";
|
|
2
|
+
const n = ["id", "aria-labelledby", "role"], r = ["id"], m = /* @__PURE__ */ t({
|
|
3
|
+
__name: "ScalarComboboxOptionGroup",
|
|
4
|
+
props: {
|
|
5
|
+
id: { default: () => a() },
|
|
6
|
+
hidden: { type: Boolean, default: !1 }
|
|
7
|
+
},
|
|
8
|
+
setup(s) {
|
|
9
|
+
return (e, p) => (o(), d("div", {
|
|
10
|
+
id: e.id,
|
|
11
|
+
"aria-labelledby": e.id ? `${e.id}-label` : void 0,
|
|
12
|
+
class: "contents",
|
|
13
|
+
role: e.hidden ? void 0 : "group"
|
|
14
|
+
}, [
|
|
15
|
+
e.hidden ? i("", !0) : (o(), d("div", {
|
|
16
|
+
key: 0,
|
|
17
|
+
id: `${e.id}-label`,
|
|
18
|
+
class: "min-w-0 truncate px-2.5 py-1.5 text-left text-c-2"
|
|
19
|
+
}, [
|
|
20
|
+
l(e.$slots, "label")
|
|
21
|
+
], 8, r)),
|
|
22
|
+
l(e.$slots, "default")
|
|
23
|
+
], 8, n));
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
export {
|
|
27
|
+
m as default
|
|
28
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAkMA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,MAAM,EACX,KAAK,WAAW,EAEjB,MAAM,SAAS,CAAA;AAIhB,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AAiHF,iBAAS,cAAc;WAsKT,OAAO,IAA6B;;;;EAKjD;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;kFAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { nanoid as Q } from "nanoid";
|
|
1
|
+
import { defineComponent as O, useId as q, computed as b, ref as D, onMounted as F, watch as G, openBlock as c, createElementBlock as y, Fragment as $, createElementVNode as w, createVNode as U, unref as j, withDirectives as C, withKeys as x, withModifiers as h, vModelText as H, renderSlot as S, renderList as B, createBlock as M, withCtx as V, createTextVNode as E, toDisplayString as N, normalizeStyle as J, createCommentVNode as P, vShow as Q } from "vue";
|
|
3
2
|
import R from "./ScalarComboboxOption.vue.js";
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
class: "min-w-0 truncate px-2.5 py-1.5 text-left text-c-2"
|
|
9
|
-
}, ne = /* @__PURE__ */ A({
|
|
3
|
+
import W from "./ScalarComboboxOptionGroup.vue.js";
|
|
4
|
+
import { isGroups as L } from "./types.js";
|
|
5
|
+
import X from "../ScalarIcon/ScalarIcon.vue.js";
|
|
6
|
+
const Y = { class: "relative flex" }, Z = ["aria-activedescendant", "placeholder"], _ = ["aria-multiselectable"], ne = /* @__PURE__ */ O({
|
|
10
7
|
inheritAttrs: !1,
|
|
11
8
|
__name: "ScalarComboboxOptions",
|
|
12
9
|
props: {
|
|
@@ -17,107 +14,123 @@ const X = { class: "relative flex" }, Y = ["placeholder"], Z = {
|
|
|
17
14
|
isDeletable: { type: Boolean }
|
|
18
15
|
},
|
|
19
16
|
emits: ["update:modelValue", "delete"],
|
|
20
|
-
setup(
|
|
21
|
-
var
|
|
22
|
-
const o =
|
|
23
|
-
function
|
|
24
|
-
return `${
|
|
17
|
+
setup(T, { emit: z }) {
|
|
18
|
+
var I;
|
|
19
|
+
const o = T, A = z, m = `scalar-combobox-items-${q()}`;
|
|
20
|
+
function p(e) {
|
|
21
|
+
return `${m}-${e.id}`;
|
|
25
22
|
}
|
|
26
23
|
const f = b(
|
|
27
|
-
() =>
|
|
28
|
-
),
|
|
29
|
-
() =>
|
|
30
|
-
),
|
|
31
|
-
|
|
24
|
+
() => L(o.options) ? o.options.flatMap((e) => e.options) : o.options
|
|
25
|
+
), K = b(
|
|
26
|
+
() => L(o.options) ? o.options : [{ label: "", options: o.options }]
|
|
27
|
+
), i = D(""), a = D(((I = o.modelValue) == null ? void 0 : I[0]) ?? f.value[0]);
|
|
28
|
+
F(async () => {
|
|
32
29
|
var e;
|
|
33
|
-
|
|
30
|
+
i.value = "", a.value = ((e = o.modelValue) == null ? void 0 : e[0]) ?? f.value[0], s.value.length !== 0 && setTimeout(() => {
|
|
34
31
|
var t;
|
|
35
|
-
(t = document == null ? void 0 : document.getElementById(
|
|
32
|
+
(t = document == null ? void 0 : document.getElementById(p(s.value[0]))) == null || t.scrollIntoView({ block: "center" });
|
|
36
33
|
}, 10);
|
|
37
|
-
}),
|
|
38
|
-
() =>
|
|
34
|
+
}), G(
|
|
35
|
+
() => i.value,
|
|
39
36
|
() => a.value = v.value[0]
|
|
40
37
|
);
|
|
41
38
|
const v = b(
|
|
42
|
-
() =>
|
|
39
|
+
() => i.value === "" ? f.value : f.value.filter((e) => e.label.toLowerCase().includes(i.value.toLowerCase()))
|
|
43
40
|
), s = b({
|
|
44
41
|
get: () => o.modelValue ?? [],
|
|
45
|
-
set: (e) => e &&
|
|
42
|
+
set: (e) => e && A("update:modelValue", e)
|
|
46
43
|
});
|
|
47
|
-
function
|
|
44
|
+
function g(e) {
|
|
48
45
|
o.multiselect ? s.value.some((t) => t.id === e.id) ? s.value = s.value.filter((t) => t.id !== e.id) : s.value = [...s.value, e] : s.value = [e];
|
|
49
46
|
}
|
|
50
47
|
function k(e) {
|
|
51
48
|
var l;
|
|
52
|
-
const t = v.value,
|
|
53
|
-
|
|
49
|
+
const t = v.value, r = t.findIndex((d) => d.id === a.value.id) + e;
|
|
50
|
+
r < 0 || r > t.length - 1 || (a.value = t[r], (l = document == null ? void 0 : document.getElementById(p(a.value))) == null || l.scrollIntoView({
|
|
54
51
|
behavior: "smooth",
|
|
55
52
|
block: "nearest"
|
|
56
53
|
}));
|
|
57
54
|
}
|
|
58
|
-
return (e, t) => (
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
return (e, t) => (c(), y($, null, [
|
|
56
|
+
w("div", Y, [
|
|
57
|
+
U(j(X), {
|
|
61
58
|
class: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3",
|
|
62
59
|
icon: "Search",
|
|
63
60
|
size: "md"
|
|
64
61
|
}),
|
|
65
|
-
|
|
66
|
-
"onUpdate:modelValue": t[0] || (t[0] = (n) =>
|
|
62
|
+
C(w("input", {
|
|
63
|
+
"onUpdate:modelValue": t[0] || (t[0] = (n) => i.value = n),
|
|
64
|
+
"aria-activedescendant": a.value ? p(a.value) : void 0,
|
|
67
65
|
"aria-autocomplete": "list",
|
|
68
|
-
"aria-controls":
|
|
69
|
-
class: "min-w-0 flex-1 rounded
|
|
66
|
+
"aria-controls": m,
|
|
67
|
+
class: "min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1",
|
|
70
68
|
"data-1p-ignore": "",
|
|
71
69
|
placeholder: e.placeholder,
|
|
72
70
|
role: "combobox",
|
|
73
71
|
tabindex: "0",
|
|
74
72
|
type: "text",
|
|
75
73
|
onKeydown: [
|
|
76
|
-
t[1] || (t[1] = h(
|
|
77
|
-
t[2] || (t[2] = h(
|
|
78
|
-
t[3] || (t[3] = h(
|
|
74
|
+
t[1] || (t[1] = x(h((n) => k(1), ["prevent"]), ["down"])),
|
|
75
|
+
t[2] || (t[2] = x(h((n) => g(a.value), ["prevent"]), ["enter"])),
|
|
76
|
+
t[3] || (t[3] = x(h((n) => k(-1), ["prevent"]), ["up"]))
|
|
79
77
|
]
|
|
80
|
-
}, null, 40,
|
|
81
|
-
[
|
|
78
|
+
}, null, 40, Z), [
|
|
79
|
+
[H, i.value]
|
|
82
80
|
])
|
|
83
81
|
]),
|
|
84
|
-
|
|
85
|
-
id:
|
|
86
|
-
|
|
82
|
+
C(w("ul", {
|
|
83
|
+
id: m,
|
|
84
|
+
"aria-multiselectable": e.multiselect,
|
|
85
|
+
class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0",
|
|
86
|
+
role: "listbox",
|
|
87
|
+
tabindex: "-1"
|
|
87
88
|
}, [
|
|
88
|
-
|
|
89
|
-
(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
89
|
+
S(e.$slots, "before"),
|
|
90
|
+
(c(!0), y($, null, B(K.value, (n, r) => (c(), M(W, {
|
|
91
|
+
id: `${m}-group-${r}`,
|
|
92
|
+
key: r,
|
|
93
|
+
hidden: (
|
|
94
|
+
// Only show the group label if there are some results
|
|
95
|
+
!n.options.some((l) => v.value.some((d) => d.id === l.id)) || // And it has a label
|
|
96
|
+
!n.label
|
|
97
|
+
)
|
|
98
|
+
}, {
|
|
99
|
+
label: V(() => [
|
|
100
|
+
E(N(n.label), 1)
|
|
101
|
+
]),
|
|
102
|
+
default: V(() => [
|
|
103
|
+
(c(!0), y($, null, B(v.value, (l) => {
|
|
104
|
+
var d;
|
|
105
|
+
return c(), y($, {
|
|
106
|
+
key: l.id
|
|
107
|
+
}, [
|
|
108
|
+
n.options.some((u) => u.id === l.id) ? (c(), M(R, {
|
|
109
|
+
key: 0,
|
|
110
|
+
id: p(l),
|
|
111
|
+
active: ((d = a.value) == null ? void 0 : d.id) === l.id,
|
|
112
|
+
isDeletable: l.isDeletable ?? e.isDeletable,
|
|
113
|
+
selected: s.value.some((u) => u.id === l.id),
|
|
114
|
+
style: J(e.multiselect ? "checkbox" : "radio"),
|
|
115
|
+
onClick: (u) => g(l),
|
|
116
|
+
onDelete: (u) => e.$emit("delete", l),
|
|
117
|
+
onMousedown: t[4] || (t[4] = h(() => {
|
|
118
|
+
}, ["prevent"])),
|
|
119
|
+
onMouseenter: (u) => a.value = l
|
|
120
|
+
}, {
|
|
121
|
+
default: V(() => [
|
|
122
|
+
E(N(l.label), 1)
|
|
123
|
+
]),
|
|
124
|
+
_: 2
|
|
125
|
+
}, 1032, ["id", "active", "isDeletable", "selected", "style", "onClick", "onDelete", "onMouseenter"])) : P("", !0)
|
|
126
|
+
], 64);
|
|
127
|
+
}), 128))
|
|
128
|
+
]),
|
|
129
|
+
_: 2
|
|
130
|
+
}, 1032, ["id", "hidden"]))), 128)),
|
|
131
|
+
S(e.$slots, "after")
|
|
132
|
+
], 8, _), [
|
|
133
|
+
[Q, v.value.length || e.$slots.before || e.$slots.after]
|
|
121
134
|
])
|
|
122
135
|
], 64));
|
|
123
136
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
2
|
+
declare const meta: Meta;
|
|
3
|
+
export default meta;
|
|
4
|
+
type Story = StoryObj<typeof meta>;
|
|
5
|
+
export declare const Base: Story;
|
|
6
|
+
export declare const WithSections: Story;
|
|
7
|
+
export declare const WithFields: Story;
|
|
8
|
+
//# sourceMappingURL=ScalarForm.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarForm.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarForm.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AASrD,QAAA,MAAM,IAAI,EAAE,IAqBX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,YAAY,EAAE,KAsB1B,CAAA;AACD,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarForm.test.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarForm.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scalar Form component
|
|
3
|
+
*
|
|
4
|
+
* A form for creating and editing data.
|
|
5
|
+
*
|
|
6
|
+
* Automatically calls preventDefault on the form submit event.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* <ScalarForm>
|
|
10
|
+
* <!-- Form content -->
|
|
11
|
+
* </ScalarForm>
|
|
12
|
+
*/
|
|
13
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
14
|
+
submit: (event: SubmitEvent) => any;
|
|
15
|
+
}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
|
|
16
|
+
onSubmit?: ((event: SubmitEvent) => any) | undefined;
|
|
17
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
|
|
18
|
+
default?(_: {}): any;
|
|
19
|
+
}>;
|
|
20
|
+
export default _default;
|
|
21
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
22
|
+
new (): {
|
|
23
|
+
$slots: S;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=ScalarForm.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarForm.vue"],"names":[],"mappings":"AAuCA;;;;;;;;;;;GAWG;;;;;;qBA8C0B,GAAG;;AA7ChC,wBA6EC;AAKD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { defineComponent as n, openBlock as s, createElementBlock as m, mergeProps as i, unref as f, withModifiers as l, renderSlot as u } from "vue";
|
|
2
|
+
import { useBindCx as p } from "../../hooks/useBindCx.js";
|
|
3
|
+
const a = {}, x = /* @__PURE__ */ n({
|
|
4
|
+
...a,
|
|
5
|
+
inheritAttrs: !1,
|
|
6
|
+
__name: "ScalarForm",
|
|
7
|
+
emits: ["submit"],
|
|
8
|
+
setup(_) {
|
|
9
|
+
const { cx: r } = p();
|
|
10
|
+
return (e, t) => (s(), m("form", i(f(r)("flex flex-col"), {
|
|
11
|
+
onSubmit: t[0] || (t[0] = l((o) => e.$emit("submit", o), ["prevent"]))
|
|
12
|
+
}), [
|
|
13
|
+
u(e.$slots, "default")
|
|
14
|
+
], 16));
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
export {
|
|
18
|
+
x as default
|
|
19
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scalar Form Field component
|
|
3
|
+
*
|
|
4
|
+
* A single form input field with a label.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* <ScalarFormField>
|
|
8
|
+
* <template #label>Input Label</template>
|
|
9
|
+
* <ScalarTextInput ... />
|
|
10
|
+
* </ScalarFormField>
|
|
11
|
+
*/
|
|
12
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
13
|
+
error?: boolean;
|
|
14
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
|
|
15
|
+
error?: boolean;
|
|
16
|
+
}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
17
|
+
label?(_: {}): any;
|
|
18
|
+
default?(_: {}): any;
|
|
19
|
+
}>;
|
|
20
|
+
export default _default;
|
|
21
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
22
|
+
new (): {
|
|
23
|
+
$slots: S;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=ScalarFormField.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarFormField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormField.vue"],"names":[],"mappings":"AA8CA;;;;;;;;;;GAUG;;YAIO,OAAO;;YAAP,OAAO;;mBAuDU,GAAG;qBACD,GAAG;;AA3DhC,wBA2FC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scalar Form Section component
|
|
3
|
+
*
|
|
4
|
+
* A collection of form fields grouped together with a title.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* <ScalarFormSection>
|
|
8
|
+
* <template #label>Section Label</template>
|
|
9
|
+
* <!-- Section content -->
|
|
10
|
+
* </ScalarFormSection>
|
|
11
|
+
*/
|
|
12
|
+
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
13
|
+
export default _default;
|
|
14
|
+
//# sourceMappingURL=ScalarFormSection.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarFormSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormSection.vue"],"names":[],"mappings":"AA2BA;;;;;;;;;;GAUG;;AACH,wBACC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
2
|
+
declare const meta: Meta;
|
|
3
|
+
export default meta;
|
|
4
|
+
type Story = StoryObj<typeof meta>;
|
|
5
|
+
export declare const Base: Story;
|
|
6
|
+
export declare const WithMaxHeight: Story;
|
|
7
|
+
//# sourceMappingURL=ScalarTextArea.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarTextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI,EAAE,IAeX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,aAAa,EAAE,KAI3B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarTextArea.test.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scalar Text Area component
|
|
3
|
+
*
|
|
4
|
+
* A wrapper around the HTML textarea element with a focusable container.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* <ScalarTextArea v-model="model" />
|
|
8
|
+
*/
|
|
9
|
+
declare const _default: import("vue").DefineComponent<{
|
|
10
|
+
modelValue?: string;
|
|
11
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
12
|
+
"update:modelValue": (value: string) => any;
|
|
13
|
+
}, string, import("vue").PublicProps, Readonly<{
|
|
14
|
+
modelValue?: string;
|
|
15
|
+
}> & Readonly<{
|
|
16
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
17
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
18
|
+
export default _default;
|
|
19
|
+
//# sourceMappingURL=ScalarTextArea.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"names":[],"mappings":"AAwDA;;;;;;;GAOG;;iBA0BU,MAAM;;;;iBAAN,MAAM;;;;AAzBnB,wBA0GC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { defineComponent as d, useModel as f, onMounted as c, openBlock as p, createElementBlock as x, mergeProps as i, unref as r, withDirectives as v, createElementVNode as b, vModelText as _ } from "vue";
|
|
2
|
+
import { useTextareaAutosize as g } from "@vueuse/core";
|
|
3
|
+
import { useBindCx as h } from "../../hooks/useBindCx.js";
|
|
4
|
+
const k = {}, C = /* @__PURE__ */ d({
|
|
5
|
+
...k,
|
|
6
|
+
inheritAttrs: !1,
|
|
7
|
+
__name: "ScalarTextArea",
|
|
8
|
+
props: {
|
|
9
|
+
modelValue: {},
|
|
10
|
+
modelModifiers: {}
|
|
11
|
+
},
|
|
12
|
+
emits: ["update:modelValue"],
|
|
13
|
+
setup(a) {
|
|
14
|
+
const t = f(a, "modelValue"), { textarea: o } = g({
|
|
15
|
+
input: t,
|
|
16
|
+
styleProp: "minHeight"
|
|
17
|
+
}), { classCx: m, otherAttrs: s } = h();
|
|
18
|
+
return c(() => {
|
|
19
|
+
var n;
|
|
20
|
+
"autofocus" in s.value && ((n = o.value) == null || n.focus());
|
|
21
|
+
}), (n, e) => (p(), x("div", i(
|
|
22
|
+
r(m)(
|
|
23
|
+
"bg-b-1.5 custom-scroll flex min-h-0 shrink cursor-text items-center gap-0.75 rounded-md border px-3 py-2.5 outline-offset-[-1px] focus-within:bg-b-1 has-[input:focus-visible]:outline"
|
|
24
|
+
),
|
|
25
|
+
{
|
|
26
|
+
onClick: e[1] || (e[1] = (l) => {
|
|
27
|
+
var u;
|
|
28
|
+
return (u = r(o)) == null ? void 0 : u.focus();
|
|
29
|
+
})
|
|
30
|
+
}
|
|
31
|
+
), [
|
|
32
|
+
v(b("textarea", i({
|
|
33
|
+
ref_key: "textarea",
|
|
34
|
+
ref: o,
|
|
35
|
+
"onUpdate:modelValue": e[0] || (e[0] = (l) => t.value = l)
|
|
36
|
+
}, r(s), { class: "w-full resize-none border-none bg-transparent text-sm focus-within:outline-none" }), null, 16), [
|
|
37
|
+
[_, t.value]
|
|
38
|
+
])
|
|
39
|
+
], 16));
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
export {
|
|
43
|
+
C as default
|
|
44
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
2
|
+
declare const meta: Meta;
|
|
3
|
+
export default meta;
|
|
4
|
+
type Story = StoryObj<typeof meta>;
|
|
5
|
+
export declare const Base: Story;
|
|
6
|
+
export declare const WithPrefix: Story;
|
|
7
|
+
export declare const WithSuffix: Story;
|
|
8
|
+
export declare const WithError: Story;
|
|
9
|
+
//# sourceMappingURL=ScalarTextInput.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarTextInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAavB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalarTextInput.test.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.test.ts"],"names":[],"mappings":""}
|