@scalar/components 0.13.35 → 0.13.37

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.
Files changed (60) hide show
  1. package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.d.ts.map +1 -1
  2. package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.js +15 -11
  3. package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.d.ts +23 -0
  4. package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.d.ts.map +1 -0
  5. package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue.js +28 -0
  6. package/dist/components/ScalarCombobox/ScalarComboboxOptionGroup.vue2.js +4 -0
  7. package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts.map +1 -1
  8. package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.js +88 -75
  9. package/dist/components/ScalarForm/ScalarForm.stories.d.ts +8 -0
  10. package/dist/components/ScalarForm/ScalarForm.stories.d.ts.map +1 -0
  11. package/dist/components/ScalarForm/ScalarForm.test.d.ts +2 -0
  12. package/dist/components/ScalarForm/ScalarForm.test.d.ts.map +1 -0
  13. package/dist/components/ScalarForm/ScalarForm.vue.d.ts +26 -0
  14. package/dist/components/ScalarForm/ScalarForm.vue.d.ts.map +1 -0
  15. package/dist/components/ScalarForm/ScalarForm.vue.js +19 -0
  16. package/dist/components/ScalarForm/ScalarForm.vue2.js +4 -0
  17. package/dist/components/ScalarForm/ScalarFormField.vue.d.ts +26 -0
  18. package/dist/components/ScalarForm/ScalarFormField.vue.d.ts.map +1 -0
  19. package/dist/components/ScalarForm/ScalarFormSection.vue.d.ts +14 -0
  20. package/dist/components/ScalarForm/ScalarFormSection.vue.d.ts.map +1 -0
  21. package/dist/components/ScalarForm/index.d.ts +2 -0
  22. package/dist/components/ScalarForm/index.d.ts.map +1 -0
  23. package/dist/components/ScalarTextArea/ScalarTextArea.stories.d.ts +7 -0
  24. package/dist/components/ScalarTextArea/ScalarTextArea.stories.d.ts.map +1 -0
  25. package/dist/components/ScalarTextArea/ScalarTextArea.test.d.ts +2 -0
  26. package/dist/components/ScalarTextArea/ScalarTextArea.test.d.ts.map +1 -0
  27. package/dist/components/ScalarTextArea/ScalarTextArea.vue.d.ts +19 -0
  28. package/dist/components/ScalarTextArea/ScalarTextArea.vue.d.ts.map +1 -0
  29. package/dist/components/ScalarTextArea/ScalarTextArea.vue.js +44 -0
  30. package/dist/components/ScalarTextArea/ScalarTextArea.vue2.js +4 -0
  31. package/dist/components/ScalarTextArea/index.d.ts +2 -0
  32. package/dist/components/ScalarTextArea/index.d.ts.map +1 -0
  33. package/dist/components/ScalarTextInput/ScalarTextInput.stories.d.ts +9 -0
  34. package/dist/components/ScalarTextInput/ScalarTextInput.stories.d.ts.map +1 -0
  35. package/dist/components/ScalarTextInput/ScalarTextInput.test.d.ts +2 -0
  36. package/dist/components/ScalarTextInput/ScalarTextInput.test.d.ts.map +1 -0
  37. package/dist/components/ScalarTextInput/ScalarTextInput.vue.d.ts +29 -0
  38. package/dist/components/ScalarTextInput/ScalarTextInput.vue.d.ts.map +1 -0
  39. package/dist/components/ScalarTextInput/ScalarTextInput.vue.js +72 -0
  40. package/dist/components/ScalarTextInput/ScalarTextInput.vue2.js +4 -0
  41. package/dist/components/ScalarTextInput/index.d.ts +2 -0
  42. package/dist/components/ScalarTextInput/index.d.ts.map +1 -0
  43. package/dist/hooks/useBindCx.d.ts +13 -0
  44. package/dist/hooks/useBindCx.d.ts.map +1 -1
  45. package/dist/hooks/useBindCx.js +21 -10
  46. package/dist/index.d.ts +3 -1
  47. package/dist/index.d.ts.map +1 -1
  48. package/dist/index.js +107 -103
  49. package/dist/style.css +1 -1
  50. package/package.json +5 -5
  51. package/dist/components/ScalarTextField/ScalarTextField.stories.d.ts +0 -345
  52. package/dist/components/ScalarTextField/ScalarTextField.stories.d.ts.map +0 -1
  53. package/dist/components/ScalarTextField/ScalarTextField.test.d.ts +0 -2
  54. package/dist/components/ScalarTextField/ScalarTextField.test.d.ts.map +0 -1
  55. package/dist/components/ScalarTextField/ScalarTextField.vue.d.ts +0 -45
  56. package/dist/components/ScalarTextField/ScalarTextField.vue.d.ts.map +0 -1
  57. package/dist/components/ScalarTextField/ScalarTextField.vue.js +0 -7
  58. package/dist/components/ScalarTextField/ScalarTextField.vue2.js +0 -110
  59. package/dist/components/ScalarTextField/index.d.ts +0 -2
  60. 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":"AAuDA,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
+ {"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 a, normalizeClass as n, unref as t, createVNode as i, normalizeStyle as c, createElementVNode as m, renderSlot as p, createBlock as d, withModifiers as u, createCommentVNode as f } from "vue";
2
- import { cva as y, cx as b } from "../../cva.js";
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" }, w = /* @__PURE__ */ s({
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(B) {
15
- const r = y({
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(), a("li", {
32
- class: n(t(b)(t(r)({ active: e.active, selected: e.selected })))
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
- m("span", g, [
39
- p(e.$slots, "default")
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
- ], 2));
53
+ ], 10, g));
50
54
  }
51
55
  });
52
56
  export {
53
- w as default
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
+ };
@@ -0,0 +1,4 @@
1
+ import f from "./ScalarComboboxOptionGroup.vue.js";
2
+ export {
3
+ f as default
4
+ };
@@ -1 +1 @@
1
- {"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AA6LA,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;WA+JT,OAAO,IAA6B;;;;EAKjD;AAoBD,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
+ {"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 A, computed as b, ref as I, onMounted as K, watch as O, openBlock as i, createElementBlock as c, Fragment as p, createElementVNode as $, createVNode as q, unref as F, withDirectives as D, withKeys as h, withModifiers as y, vModelText as G, renderSlot as C, renderList as S, toDisplayString as B, createCommentVNode as M, createBlock as U, normalizeStyle as j, withCtx as H, createTextVNode as J, vShow as P } from "vue";
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 { isGroups as E } from "./types.js";
5
- import W from "../ScalarIcon/ScalarIcon.vue.js";
6
- const X = { class: "relative flex" }, Y = ["placeholder"], Z = {
7
- key: 0,
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(N, { emit: L }) {
21
- var g;
22
- const o = N, T = L, x = `scalar-combobox-items-${Q()}`;
23
- function w(e) {
24
- return `${x}-${e.id}`;
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
- () => E(o.options) ? o.options.flatMap((e) => e.options) : o.options
28
- ), z = b(
29
- () => E(o.options) ? o.options : [{ label: "", options: o.options }]
30
- ), r = I(""), a = I(((g = o.modelValue) == null ? void 0 : g[0]) ?? f.value[0]);
31
- K(async () => {
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
- r.value = "", a.value = ((e = o.modelValue) == null ? void 0 : e[0]) ?? f.value[0], s.value.length !== 0 && setTimeout(() => {
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(w(s.value[0]))) == null || t.scrollIntoView({ block: "center" });
32
+ (t = document == null ? void 0 : document.getElementById(p(s.value[0]))) == null || t.scrollIntoView({ block: "center" });
36
33
  }, 10);
37
- }), O(
38
- () => r.value,
34
+ }), G(
35
+ () => i.value,
39
36
  () => a.value = v.value[0]
40
37
  );
41
38
  const v = b(
42
- () => r.value === "" ? f.value : f.value.filter((e) => e.label.toLowerCase().includes(r.value.toLowerCase()))
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 && T("update:modelValue", e)
42
+ set: (e) => e && A("update:modelValue", e)
46
43
  });
47
- function V(e) {
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, m = t.findIndex((u) => u.id === a.value.id) + e;
53
- m < 0 || m > t.length - 1 || (a.value = t[m], (l = document == null ? void 0 : document.getElementById(w(a.value))) == null || l.scrollIntoView({
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) => (i(), c(p, null, [
59
- $("div", X, [
60
- q(F(W), {
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
- D($("input", {
66
- "onUpdate:modelValue": t[0] || (t[0] = (n) => r.value = 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": x,
69
- class: "min-w-0 flex-1 rounded-none border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 outline-none",
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(y((n) => k(1), ["prevent"]), ["down"])),
77
- t[2] || (t[2] = h(y((n) => V(a.value), ["prevent"]), ["enter"])),
78
- t[3] || (t[3] = h(y((n) => k(-1), ["prevent"]), ["up"]))
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, Y), [
81
- [G, r.value]
78
+ }, null, 40, Z), [
79
+ [H, i.value]
82
80
  ])
83
81
  ]),
84
- D($("ul", {
85
- id: x,
86
- class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0"
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
- C(e.$slots, "before"),
89
- (i(!0), c(p, null, S(z.value, (n, m) => (i(), c(p, { key: m }, [
90
- n.label && // Only show the group label if there are some results
91
- n.options.some((l) => v.value.some((u) => u.id === l.id)) ? (i(), c("div", Z, B(n.label), 1)) : M("", !0),
92
- (i(!0), c(p, null, S(v.value, (l) => {
93
- var u;
94
- return i(), c(p, {
95
- key: l.id
96
- }, [
97
- n.options.some((d) => d.id === l.id) ? (i(), U(R, {
98
- key: 0,
99
- id: w(l),
100
- active: ((u = a.value) == null ? void 0 : u.id) === l.id,
101
- isDeletable: l.isDeletable ?? e.isDeletable,
102
- selected: s.value.some((d) => d.id === l.id),
103
- style: j(e.multiselect ? "checkbox" : "radio"),
104
- onClick: (d) => V(l),
105
- onDelete: (d) => e.$emit("delete", l),
106
- onMousedown: t[4] || (t[4] = y(() => {
107
- }, ["prevent"])),
108
- onMouseenter: (d) => a.value = l
109
- }, {
110
- default: H(() => [
111
- J(B(l.label), 1)
112
- ]),
113
- _: 2
114
- }, 1032, ["id", "active", "isDeletable", "selected", "style", "onClick", "onDelete", "onMouseenter"])) : M("", !0)
115
- ], 64);
116
- }), 128))
117
- ], 64))), 128)),
118
- C(e.$slots, "after")
119
- ], 512), [
120
- [P, v.value.length || e.$slots.before || e.$slots.after]
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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ScalarForm.test.d.ts.map
@@ -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,4 @@
1
+ import f from "./ScalarForm.vue.js";
2
+ export {
3
+ f as default
4
+ };
@@ -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,2 @@
1
+ export { default as ScalarForm } from './ScalarForm.vue.js';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ScalarTextArea.test.d.ts.map
@@ -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,4 @@
1
+ import f from "./ScalarTextArea.vue.js";
2
+ export {
3
+ f as default
4
+ };
@@ -0,0 +1,2 @@
1
+ export { default as ScalarTextArea } from './ScalarTextArea.vue.js';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ScalarTextInput.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScalarTextInput.test.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.test.ts"],"names":[],"mappings":""}