@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.
- package/dist/components/ScalarCombobox/ScalarCombobox.stories.d.ts +7 -5
- package/dist/components/ScalarCombobox/ScalarCombobox.stories.d.ts.map +1 -1
- package/dist/components/ScalarCombobox/ScalarCombobox.vue.d.ts +3 -3
- package/dist/components/ScalarCombobox/ScalarCombobox.vue.d.ts.map +1 -1
- package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.d.ts +3 -3
- package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.d.ts.map +1 -1
- package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.d.ts +2 -0
- package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.d.ts.map +1 -1
- package/dist/components/ScalarCombobox/ScalarComboboxOption.vue.js +17 -14
- package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts +3 -3
- package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts.map +1 -1
- package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.js +73 -53
- package/dist/components/ScalarCombobox/index.d.ts +1 -1
- package/dist/components/ScalarCombobox/types.d.ts +6 -0
- package/dist/components/ScalarCombobox/types.d.ts.map +1 -1
- package/dist/components/ScalarCombobox/types.js +5 -0
- package/package.json +3 -3
|
@@ -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;
|
|
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;
|
|
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;
|
|
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":"
|
|
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
|
|
2
|
-
import { cva as p, cx as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
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(
|
|
11
|
-
const
|
|
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,
|
|
28
|
-
class: r(t(
|
|
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
|
|
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(
|
|
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",
|
|
42
|
+
o("span", m, [
|
|
40
43
|
i(e.$slots, "default")
|
|
41
44
|
])
|
|
42
45
|
], 2));
|
|
43
46
|
}
|
|
44
47
|
});
|
|
45
48
|
export {
|
|
46
|
-
|
|
49
|
+
g as default
|
|
47
50
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type
|
|
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":"
|
|
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
|
|
2
|
-
import { nanoid as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
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(
|
|
17
|
-
var
|
|
18
|
-
const o =
|
|
19
|
-
|
|
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
|
-
() =>
|
|
22
|
-
),
|
|
23
|
-
() =>
|
|
24
|
-
() =>
|
|
29
|
+
() => s.value = ""
|
|
30
|
+
), M(
|
|
31
|
+
() => s.value,
|
|
32
|
+
() => r.value = d.value[0]
|
|
25
33
|
);
|
|
26
|
-
const d =
|
|
27
|
-
() =>
|
|
28
|
-
),
|
|
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 &&
|
|
38
|
+
set: (t) => t && A("update:modelValue", t)
|
|
31
39
|
});
|
|
32
|
-
function
|
|
33
|
-
o.multiselect ?
|
|
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
|
|
36
|
-
const e = d.value,
|
|
37
|
-
|
|
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) => (
|
|
40
|
-
|
|
41
|
-
|
|
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
|
-
|
|
47
|
-
"onUpdate:modelValue": e[0] || (e[0] = (
|
|
54
|
+
$(b("input", {
|
|
55
|
+
"onUpdate:modelValue": e[0] || (e[0] = (n) => s.value = n),
|
|
48
56
|
"aria-autocomplete": "list",
|
|
49
|
-
"aria-controls":
|
|
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] =
|
|
57
|
-
e[2] || (e[2] =
|
|
58
|
-
e[3] || (e[3] =
|
|
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,
|
|
61
|
-
[
|
|
69
|
+
}, null, 40, Q), [
|
|
70
|
+
[T, s.value]
|
|
62
71
|
])
|
|
63
72
|
]),
|
|
64
|
-
|
|
65
|
-
id:
|
|
73
|
+
$(b("ul", {
|
|
74
|
+
id: w(k),
|
|
66
75
|
class: "border-t p-0.75"
|
|
67
76
|
}, [
|
|
68
|
-
(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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
|
-
|
|
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"}
|
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.
|
|
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",
|