@scalar/components 0.12.20 → 0.12.21

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.
@@ -1,10 +1,10 @@
1
1
  import type { StoryObj } from '@storybook/vue3';
2
- import type { Option } from './types';
2
+ import type { Option, OptionGroup } from './types.js';
3
3
  declare const meta: {
4
4
  component: {
5
5
  new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
6
6
  options: {
7
- type: import("vue").PropType<Option[]>;
7
+ type: import("vue").PropType<Option[] | OptionGroup[]>;
8
8
  required: true;
9
9
  };
10
10
  modelValue: {
@@ -31,7 +31,7 @@ declare const meta: {
31
31
  "update:modelValue": (v: Option) => void;
32
32
  }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
33
33
  options: {
34
- type: import("vue").PropType<Option[]>;
34
+ type: import("vue").PropType<Option[] | OptionGroup[]>;
35
35
  required: true;
36
36
  };
37
37
  modelValue: {
@@ -63,7 +63,7 @@ declare const meta: {
63
63
  Defaults: {};
64
64
  }, Readonly<import("vue").ExtractPropTypes<{
65
65
  options: {
66
- type: import("vue").PropType<Option[]>;
66
+ type: import("vue").PropType<Option[] | OptionGroup[]>;
67
67
  required: true;
68
68
  };
69
69
  modelValue: {
@@ -92,7 +92,7 @@ declare const meta: {
92
92
  __isSuspense?: never;
93
93
  } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
94
94
  options: {
95
- type: import("vue").PropType<Option[]>;
95
+ type: import("vue").PropType<Option[] | OptionGroup[]>;
96
96
  required: true;
97
97
  };
98
98
  modelValue: {
@@ -136,5 +136,7 @@ declare const meta: {
136
136
  export default meta;
137
137
  type Story = StoryObj<typeof meta>;
138
138
  export declare const Base: Story;
139
+ export declare const Groups: Story;
139
140
  export declare const Multiselect: Story;
141
+ export declare const MultiselectGroups: Story;
140
142
  //# sourceMappingURL=ScalarCombobox.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ScalarCombobox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAY6B,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAWlC,eAAO,MAAM,IAAI,EAAE,KA0BlB,CAAA;AACD,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAA"}
1
+ {"version":3,"file":"ScalarCombobox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAElD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAY6B,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAqClC,eAAO,MAAM,IAAI,EAAE,KA0BlB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA0BpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAA"}
@@ -1,16 +1,16 @@
1
1
  import type { FloatingOptions } from '../ScalarFloating';
2
- import type { Option } from './types';
2
+ import type { Option, OptionGroup } from './types.js';
3
3
  declare function __VLS_template(): {
4
4
  default?(_: {}): any;
5
5
  };
6
6
  declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<{
7
- options: Option[];
7
+ options: Option[] | OptionGroup[];
8
8
  modelValue?: Option;
9
9
  placeholder?: string;
10
10
  } & Omit<FloatingOptions, "middleware">>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
11
  "update:modelValue": (v: Option) => void;
12
12
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
13
- options: Option[];
13
+ options: Option[] | OptionGroup[];
14
14
  modelValue?: Option;
15
15
  placeholder?: string;
16
16
  } & Omit<FloatingOptions, "middleware">>>> & {
@@ -1 +1 @@
1
- {"version":3,"file":"ScalarCombobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAuBrC,iBAAS,cAAc;qBAuDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aA3FR,MAAM,EAAE;iBACJ,MAAM;kBACL,MAAM;;;;aAFX,MAAM,EAAE;iBACJ,MAAM;kBACL,MAAM;;;UAgGtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
1
+ {"version":3,"file":"ScalarCombobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAuBlD,iBAAS,cAAc;qBAuDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aA3FR,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM;kBACL,MAAM;;;;aAFX,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM;kBACL,MAAM;;;UAgGtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
@@ -1,16 +1,16 @@
1
1
  import type { FloatingOptions } from '../ScalarFloating';
2
- import type { Option } from './types';
2
+ import type { Option, OptionGroup } from './types.js';
3
3
  declare function __VLS_template(): {
4
4
  default?(_: {}): any;
5
5
  };
6
6
  declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<{
7
- options: Option[];
7
+ options: Option[] | OptionGroup[];
8
8
  modelValue?: Option[];
9
9
  placeholder?: string;
10
10
  } & Omit<FloatingOptions, "middleware">>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
11
  "update:modelValue": (v: Option[]) => void;
12
12
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
13
- options: Option[];
13
+ options: Option[] | OptionGroup[];
14
14
  modelValue?: Option[];
15
15
  placeholder?: string;
16
16
  } & Omit<FloatingOptions, "middleware">>>> & {
@@ -1 +1 @@
1
- {"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAuBrC,iBAAS,cAAc;qBAqDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aAzFR,MAAM,EAAE;iBACJ,MAAM,EAAE;kBACP,MAAM;;;;aAFX,MAAM,EAAE;iBACJ,MAAM,EAAE;kBACP,MAAM;;;UA8FtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
1
+ {"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAuBlD,iBAAS,cAAc;qBAqDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aAzFR,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM,EAAE;kBACP,MAAM;;;;aAFX,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM,EAAE;kBACP,MAAM;;;UA8FtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
@@ -4,9 +4,11 @@ declare function __VLS_template(): {
4
4
  declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<{
5
5
  active?: boolean;
6
6
  selected?: boolean;
7
+ style?: "radio" | "checkbox";
7
8
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
8
9
  active?: boolean;
9
10
  selected?: boolean;
11
+ style?: "radio" | "checkbox";
10
12
  }>>>, {}, {}>;
11
13
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
12
14
  export default _default;
@@ -1 +1 @@
1
- {"version":3,"file":"ScalarComboboxOption.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"names":[],"mappings":"AA2EA,iBAAS,cAAc;qBAkDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aA/FV,OAAO;eACL,OAAO;;aADT,OAAO;eACL,OAAO;aAoGlB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
1
+ {"version":3,"file":"ScalarComboboxOption.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"names":[],"mappings":"AA8EA,iBAAS,cAAc;qBAuDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aApGV,OAAO;eACL,OAAO;YACV,OAAO,GAAG,UAAU;;aAFnB,OAAO;eACL,OAAO;YACV,OAAO,GAAG,UAAU;aAwG5B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
@@ -1,19 +1,19 @@
1
- import { defineComponent as s, openBlock as n, createElementBlock as c, normalizeClass as r, unref as t, createElementVNode as o, createVNode as l, renderSlot as i } from "vue";
2
- import { cva as p, cx as m } from "../../cva.js";
3
- import d from "../ScalarIcon/ScalarIcon.vue.js";
4
- const u = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, h = /* @__PURE__ */ s({
1
+ import { defineComponent as a, openBlock as n, createElementBlock as c, normalizeClass as r, unref as t, createElementVNode as o, createVNode as l, renderSlot as i } from "vue";
2
+ import { cva as p, cx as d } from "../../cva.js";
3
+ import u from "../ScalarIcon/ScalarIcon.vue.js";
4
+ const m = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, g = /* @__PURE__ */ a({
5
5
  __name: "ScalarComboboxOption",
6
6
  props: {
7
7
  active: { type: Boolean },
8
- selected: { type: Boolean }
8
+ selected: { type: Boolean },
9
+ style: {}
9
10
  },
10
- setup(f) {
11
- const a = p({
11
+ setup(b) {
12
+ const s = p({
12
13
  base: [
13
14
  // Layout
14
15
  "group",
15
16
  "flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5 text-left",
16
- "first-of-type:mt-0.75 last-of-type:mb-0.75",
17
17
  // Text / background style
18
18
  "truncate bg-transparent text-c-1",
19
19
  // Interaction
@@ -24,24 +24,27 @@ const u = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, h = /* @__
24
24
  active: { true: "bg-b-2" }
25
25
  }
26
26
  });
27
- return (e, b) => (n(), c("li", {
28
- class: r(t(m)(t(a)({ active: e.active, selected: e.selected })))
27
+ return (e, f) => (n(), c("li", {
28
+ class: r(t(d)(t(s)({ active: e.active, selected: e.selected })))
29
29
  }, [
30
30
  o("div", {
31
- class: r(["flex size-4 items-center justify-center rounded-full p-0.75 group-hover:shadow-border", e.selected ? "bg-blue text-b-1" : "text-transparent"])
31
+ class: r(["flex size-4 items-center justify-center p-0.75 group-hover:shadow-border", [
32
+ e.selected ? "bg-blue text-b-1" : "text-transparent",
33
+ e.style === "checkbox" ? "rounded" : "rounded-full"
34
+ ]])
32
35
  }, [
33
- l(t(d), {
36
+ l(t(u), {
34
37
  class: "relative top-[0.5px] size-2.5",
35
38
  icon: "Checkmark",
36
39
  thickness: "2.5"
37
40
  })
38
41
  ], 2),
39
- o("span", u, [
42
+ o("span", m, [
40
43
  i(e.$slots, "default")
41
44
  ])
42
45
  ], 2));
43
46
  }
44
47
  });
45
48
  export {
46
- h as default
49
+ g as default
47
50
  };
@@ -1,6 +1,6 @@
1
- import type { Option } from './types';
1
+ import { type Option, type OptionGroup } from './types.js';
2
2
  declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
3
- options: Option[];
3
+ options: Option[] | OptionGroup[];
4
4
  modelValue?: Option[];
5
5
  placeholder?: string;
6
6
  open?: boolean;
@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
8
8
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
9
9
  "update:modelValue": (v: Option[]) => void;
10
10
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
11
- options: Option[];
11
+ options: Option[] | OptionGroup[];
12
12
  modelValue?: Option[];
13
13
  placeholder?: string;
14
14
  open?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;;aAK1B,MAAM,EAAE;iBACJ,MAAM,EAAE;kBACP,MAAM;WACb,OAAO;kBACA,OAAO;;;;aAJZ,MAAM,EAAE;iBACJ,MAAM,EAAE;kBACP,MAAM;WACb,OAAO;kBACA,OAAO;;;;AA4MvB,wBAOG;AAOH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
1
+ {"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAwJA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,WAAW,EAAY,MAAM,SAAS,CAAA;;aAKtD,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM,EAAE;kBACP,MAAM;WACb,OAAO;kBACA,OAAO;;;;aAJZ,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM,EAAE;kBACP,MAAM;WACb,OAAO;kBACA,OAAO;;;;AA8PvB,wBAOG;AAOH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
@@ -1,8 +1,12 @@
1
- import { defineComponent as B, ref as h, watch as y, computed as V, openBlock as u, createElementBlock as g, Fragment as C, createElementVNode as c, createVNode as I, unref as v, withDirectives as k, withKeys as m, withModifiers as p, vModelText as M, renderList as L, createBlock as N, withCtx as A, createTextVNode as D, toDisplayString as E, vShow as K } from "vue";
2
- import { nanoid as T } from "nanoid";
3
- import q from "./ScalarComboboxOption.vue.js";
4
- import z from "../ScalarIcon/ScalarIcon.vue.js";
5
- const F = { class: "relative flex" }, O = ["aria-controls", "placeholder"], U = ["id"], P = /* @__PURE__ */ B({
1
+ import { defineComponent as E, computed as f, ref as S, watch as M, openBlock as i, createElementBlock as u, Fragment as p, createElementVNode as b, createVNode as K, unref as w, withDirectives as $, withKeys as h, withModifiers as x, vModelText as T, renderList as B, toDisplayString as I, createCommentVNode as _, createBlock as q, normalizeStyle as F, withCtx as G, createTextVNode as O, vShow as U } from "vue";
2
+ import { nanoid as j } from "nanoid";
3
+ import H from "./ScalarComboboxOption.vue.js";
4
+ import { isGroups as N } from "./types.js";
5
+ import J from "../ScalarIcon/ScalarIcon.vue.js";
6
+ const P = { class: "relative flex" }, Q = ["aria-controls", "placeholder"], R = ["id"], W = {
7
+ key: 0,
8
+ class: "min-w-0 truncate px-2 py-1.5 text-left text-c-2"
9
+ }, le = /* @__PURE__ */ E({
6
10
  inheritAttrs: !1,
7
11
  __name: "ScalarComboboxOptions",
8
12
  props: {
@@ -13,79 +17,95 @@ const F = { class: "relative flex" }, O = ["aria-controls", "placeholder"], U =
13
17
  multiselect: { type: Boolean }
14
18
  },
15
19
  emits: ["update:modelValue"],
16
- setup(S, { emit: _ }) {
17
- var b;
18
- const o = S, $ = _, f = T(), a = h(""), i = h(((b = o.modelValue) == null ? void 0 : b[0]) ?? o.options[0]);
19
- y(
20
+ setup(L, { emit: z }) {
21
+ var g;
22
+ const o = L, A = z, k = j(), y = f(
23
+ () => N(o.options) ? o.options.flatMap((t) => t.options) : o.options
24
+ ), D = f(
25
+ () => N(o.options) ? o.options : [{ label: "", options: o.options }]
26
+ ), s = S(""), r = S(((g = o.modelValue) == null ? void 0 : g[0]) ?? y.value[0]);
27
+ M(
20
28
  () => o.open,
21
- () => a.value = ""
22
- ), y(
23
- () => a.value,
24
- () => i.value = d.value[0]
29
+ () => s.value = ""
30
+ ), M(
31
+ () => s.value,
32
+ () => r.value = d.value[0]
25
33
  );
26
- const d = V(
27
- () => a.value === "" ? o.options : o.options.filter((t) => t.label.toLowerCase().includes(a.value.toLowerCase()))
28
- ), n = V({
34
+ const d = f(
35
+ () => s.value === "" ? y.value : y.value.filter((t) => t.label.toLowerCase().includes(s.value.toLowerCase()))
36
+ ), a = f({
29
37
  get: () => o.modelValue ?? [],
30
- set: (t) => t && $("update:modelValue", t)
38
+ set: (t) => t && A("update:modelValue", t)
31
39
  });
32
- function x(t) {
33
- o.multiselect ? n.value.some((e) => e.id === t.id) ? n.value = n.value.filter((e) => e.id !== t.id) : n.value = [...n.value, t] : n.value = [t];
40
+ function V(t) {
41
+ o.multiselect ? a.value.some((e) => e.id === t.id) ? a.value = a.value.filter((e) => e.id !== t.id) : a.value = [...a.value, t] : a.value = [t];
34
42
  }
35
- function w(t) {
36
- const e = d.value, r = e.findIndex((s) => s.id === i.value.id) + t;
37
- r < 0 || r > e.length - 1 || (i.value = e[r]);
43
+ function C(t) {
44
+ const e = d.value, c = e.findIndex((l) => l.id === r.value.id) + t;
45
+ c < 0 || c > e.length - 1 || (r.value = e[c]);
38
46
  }
39
- return (t, e) => (u(), g(C, null, [
40
- c("div", F, [
41
- I(v(z), {
47
+ return (t, e) => (i(), u(p, null, [
48
+ b("div", P, [
49
+ K(w(J), {
42
50
  class: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-c-3",
43
51
  icon: "Search",
44
52
  size: "sm"
45
53
  }),
46
- k(c("input", {
47
- "onUpdate:modelValue": e[0] || (e[0] = (l) => a.value = l),
54
+ $(b("input", {
55
+ "onUpdate:modelValue": e[0] || (e[0] = (n) => s.value = n),
48
56
  "aria-autocomplete": "list",
49
- "aria-controls": v(f),
57
+ "aria-controls": w(k),
50
58
  class: "min-w-0 flex-1 rounded-none border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 outline-none",
59
+ "data-1p-ignore": "",
51
60
  placeholder: t.placeholder,
52
61
  role: "combobox",
53
62
  tabindex: "0",
54
63
  type: "text",
55
64
  onKeydown: [
56
- e[1] || (e[1] = m(p((l) => w(1), ["prevent"]), ["down"])),
57
- e[2] || (e[2] = m(p((l) => x(i.value), ["prevent"]), ["enter"])),
58
- e[3] || (e[3] = m(p((l) => w(-1), ["prevent"]), ["up"]))
65
+ e[1] || (e[1] = h(x((n) => C(1), ["prevent"]), ["down"])),
66
+ e[2] || (e[2] = h(x((n) => V(r.value), ["prevent"]), ["enter"])),
67
+ e[3] || (e[3] = h(x((n) => C(-1), ["prevent"]), ["up"]))
59
68
  ]
60
- }, null, 40, O), [
61
- [M, a.value]
69
+ }, null, 40, Q), [
70
+ [T, s.value]
62
71
  ])
63
72
  ]),
64
- k(c("ul", {
65
- id: v(f),
73
+ $(b("ul", {
74
+ id: w(k),
66
75
  class: "border-t p-0.75"
67
76
  }, [
68
- (u(!0), g(C, null, L(d.value, (l) => {
69
- var r;
70
- return u(), N(q, {
71
- key: l.id,
72
- active: ((r = i.value) == null ? void 0 : r.id) === l.id,
73
- selected: n.value.some((s) => s.id === l.id),
74
- onClick: (s) => x(l),
75
- onMouseenter: (s) => i.value = l
76
- }, {
77
- default: A(() => [
78
- D(E(l.label), 1)
79
- ]),
80
- _: 2
81
- }, 1032, ["active", "selected", "onClick", "onMouseenter"]);
82
- }), 128))
83
- ], 8, U), [
84
- [K, d.value.length]
77
+ (i(!0), u(p, null, B(D.value, (n, c) => (i(), u(p, { key: c }, [
78
+ n.label && // Only show the group label if there are some results
79
+ n.options.some((l) => d.value.some((m) => m.id === l.id)) ? (i(), u("div", W, I(n.label), 1)) : _("", !0),
80
+ (i(!0), u(p, null, B(d.value, (l) => {
81
+ var m;
82
+ return i(), u(p, {
83
+ key: l.id
84
+ }, [
85
+ n.options.some((v) => v.id === l.id) ? (i(), q(H, {
86
+ key: 0,
87
+ active: ((m = r.value) == null ? void 0 : m.id) === l.id,
88
+ selected: a.value.some((v) => v.id === l.id),
89
+ style: F(t.multiselect ? "checkbox" : "radio"),
90
+ onClick: (v) => V(l),
91
+ onMousedown: e[4] || (e[4] = x(() => {
92
+ }, ["prevent"])),
93
+ onMouseenter: (v) => r.value = l
94
+ }, {
95
+ default: G(() => [
96
+ O(I(l.label), 1)
97
+ ]),
98
+ _: 2
99
+ }, 1032, ["active", "selected", "style", "onClick", "onMouseenter"])) : _("", !0)
100
+ ], 64);
101
+ }), 128))
102
+ ], 64))), 128))
103
+ ], 8, R), [
104
+ [U, d.value.length]
85
105
  ])
86
106
  ], 64));
87
107
  }
88
108
  });
89
109
  export {
90
- P as default
110
+ le as default
91
111
  };
@@ -1,4 +1,4 @@
1
1
  export { default as ScalarCombobox } from './ScalarCombobox.vue.js';
2
2
  export { default as ScalarComboboxMultiselect } from './ScalarComboboxMultiselect.vue.js';
3
- export type { Option as ScalarComboboxOption } from './types';
3
+ export type { Option as ScalarComboboxOption } from './types.js';
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -3,4 +3,10 @@ export type Option = {
3
3
  label: string;
4
4
  [x: string]: any;
5
5
  };
6
+ export type OptionGroup = {
7
+ label: string;
8
+ options: Option[];
9
+ };
10
+ export declare const isGroup: (option: Option | OptionGroup) => option is OptionGroup;
11
+ export declare const isGroups: (options: Option[] | OptionGroup[]) => options is OptionGroup[];
6
12
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;CACjB,CAAA"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,OAAO,WACV,MAAM,GAAG,WAAW,KAC3B,MAAM,IAAI,WAEZ,CAAA;AAED,eAAO,MAAM,QAAQ,YACV,MAAM,EAAE,GAAG,WAAW,EAAE,KAChC,OAAO,IAAI,WAAW,EAExB,CAAA"}
@@ -0,0 +1,5 @@
1
+ const r = (o) => o.options !== void 0, s = (o) => r(o[0]);
2
+ export {
3
+ r as isGroup,
4
+ s as isGroups
5
+ };
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "url": "https://github.com/scalar/scalar.git",
11
11
  "directory": "packages/components"
12
12
  },
13
- "version": "0.12.20",
13
+ "version": "0.12.21",
14
14
  "engines": {
15
15
  "node": ">=18"
16
16
  },
@@ -70,9 +70,9 @@
70
70
  "vite-plugin-dts": "^3.6.3",
71
71
  "vite-svg-loader": "^5.1.0",
72
72
  "vitest": "^1.6.0",
73
+ "@scalar/build-tooling": "0.1.10",
73
74
  "@scalar/themes": "0.9.16",
74
- "@scalar/use-toasts": "0.7.4",
75
- "@scalar/build-tooling": "0.1.10"
75
+ "@scalar/use-toasts": "0.7.4"
76
76
  },
77
77
  "scripts": {
78
78
  "build": "pnpm typegen:icons && pnpm build-only",