@youcan/celeste 0.6.54 → 0.6.56

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 (40) hide show
  1. package/dist/celeste.css +86 -560
  2. package/dist/cjs/chunks/index2.js +28 -0
  3. package/dist/cjs/color-picker.js +6 -4
  4. package/dist/cjs/color-swatch.js +3 -3
  5. package/dist/cjs/file-upload-area.js +280 -0
  6. package/dist/cjs/index.js +3 -9
  7. package/dist/components/color-picker/color-picker.d.ts +2 -0
  8. package/dist/components/color-picker/color-swatch.d.ts +1 -2
  9. package/dist/components/file-upload/file-upload-area.d.ts +43 -0
  10. package/dist/components/file-upload/index.d.ts +2 -0
  11. package/dist/components/index.d.ts +1 -1
  12. package/dist/es/chunks/index2.js +30 -2
  13. package/dist/es/color-picker.js +6 -4
  14. package/dist/es/color-swatch.js +3 -3
  15. package/dist/es/file-upload-area.js +281 -0
  16. package/dist/es/index.js +3 -9
  17. package/package.json +9 -9
  18. package/src/components/color-picker/color-picker.vue +4 -0
  19. package/src/components/color-picker/color-swatch.vue +1 -2
  20. package/src/components/file-upload/file-upload-area.vue +229 -0
  21. package/src/components/file-upload/index.ts +2 -0
  22. package/src/components/file-upload/stories/file-upload-area.stories.ts +76 -0
  23. package/src/components/index.ts +1 -1
  24. package/dist/cjs/context-menu-item.js +0 -134
  25. package/dist/cjs/dropdown-item.js +0 -99
  26. package/dist/cjs/dropdown.js +0 -290
  27. package/dist/components/dropdown/context-menu-item.d.ts +0 -39
  28. package/dist/components/dropdown/dropdown-item.d.ts +0 -30
  29. package/dist/components/dropdown/dropdown.d.ts +0 -55
  30. package/dist/components/dropdown/index.d.ts +0 -6
  31. package/dist/es/context-menu-item.js +0 -135
  32. package/dist/es/dropdown-item.js +0 -100
  33. package/dist/es/dropdown.js +0 -291
  34. package/src/components/dropdown/context-menu-item.vue +0 -317
  35. package/src/components/dropdown/dropdown-item.vue +0 -184
  36. package/src/components/dropdown/dropdown.vue +0 -650
  37. package/src/components/dropdown/index.ts +0 -8
  38. package/src/components/dropdown/stories/context-menu-item.stories.ts +0 -51
  39. package/src/components/dropdown/stories/dropdown-item.stories.ts +0 -33
  40. package/src/components/dropdown/stories/dropdown.stories.ts +0 -53
@@ -1,55 +0,0 @@
1
- import { BadgeProps } from '../badge/badge';
2
- export interface Dropdown {
3
- disabled?: boolean;
4
- icon?: string;
5
- placeholder: string;
6
- error?: boolean;
7
- size?: 'xs' | 'sm' | 'md';
8
- type?: 'normal' | 'compact' | 'inline' | 'compact-input';
9
- position?: 'top' | 'bottom';
10
- align?: 'start' | 'end' | 'center';
11
- multiple?: boolean;
12
- emptyLabel?: string;
13
- searchable?: boolean;
14
- options: SelectedType[];
15
- badgeProps?: BadgeProps;
16
- }
17
- export interface SelectedType {
18
- value: any;
19
- label: string;
20
- icon?: string;
21
- image?: string;
22
- [key: string]: any;
23
- }
24
- declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
25
- modelValue?: SelectedType | SelectedType[] | undefined;
26
- } & Dropdown, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
27
- "update:modelValue": (value: SelectedType | SelectedType[] | undefined) => any;
28
- }, string, import('vue').PublicProps, Readonly<{
29
- modelValue?: SelectedType | SelectedType[] | undefined;
30
- } & Dropdown> & Readonly<{
31
- "onUpdate:modelValue"?: ((value: SelectedType | SelectedType[] | undefined) => any) | undefined;
32
- }>, {
33
- size: "xs" | "sm" | "md";
34
- type: "normal" | "compact" | "inline" | "compact-input";
35
- disabled: boolean;
36
- align: "start" | "end" | "center";
37
- position: "top" | "bottom";
38
- placeholder: string;
39
- multiple: boolean;
40
- searchable: boolean;
41
- emptyLabel: string;
42
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>, {
43
- image?(_: {
44
- model: SelectedType;
45
- }): any;
46
- prefix?(_: {
47
- class: string;
48
- }): any;
49
- }>;
50
- export default _default;
51
- type __VLS_WithTemplateSlots<T, S> = T & {
52
- new (): {
53
- $slots: S;
54
- };
55
- };
@@ -1,6 +0,0 @@
1
- export * from './context-menu-item';
2
- export { default as ContextMenuItem } from './context-menu-item';
3
- export * from './dropdown-item';
4
- export { default as DropdownItem } from './dropdown-item';
5
- export * from './dropdown';
6
- export { default as Dropdown } from './dropdown';
@@ -1,135 +0,0 @@
1
- import { defineComponent, mergeModels, useModel, computed, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createCommentVNode, createElementVNode, toDisplayString, createBlock, mergeProps, createVNode, withCtx, normalizeProps } from "vue";
2
- import { c as clsx } from "./chunks/clsx.js";
3
- import { p as mg, r as hg } from "./chunks/index.js";
4
- import Badge from "./badge.js";
5
- import Button from "./button.js";
6
- import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
7
- const _hoisted_1 = ["aria-disabled"];
8
- const _hoisted_2 = { class: "celeste-context-menu-item-info" };
9
- const _hoisted_3 = ["innerHTML"];
10
- const _hoisted_4 = {
11
- key: 0,
12
- class: "celeste-context-menu-item-sublabel"
13
- };
14
- const _hoisted_5 = {
15
- key: 0,
16
- class: "celeste-context-menu-item-description"
17
- };
18
- const _hoisted_6 = {
19
- key: 2,
20
- class: "celeste-context-menu-item-shortcut"
21
- };
22
- const _hoisted_7 = { class: "celeste-context-menu-item-switch" };
23
- const _hoisted_8 = { class: "celeste-context-menu-item-button" };
24
- const _hoisted_9 = {
25
- key: 3,
26
- class: "celeste-context-menu-item-suffix"
27
- };
28
- const _sfc_main = /* @__PURE__ */ defineComponent({
29
- __name: "context-menu-item",
30
- props: /* @__PURE__ */ mergeModels({
31
- size: { default: "sm" },
32
- class: {},
33
- label: {},
34
- sublabel: {},
35
- description: {},
36
- disabled: { type: Boolean, default: false },
37
- focused: { type: Boolean, default: false },
38
- badgeProps: {},
39
- shortcut: {},
40
- toggle: { type: Boolean },
41
- selected: { type: Boolean },
42
- buttonProps: {},
43
- rightIcon: {}
44
- }, {
45
- "selected": { type: Boolean },
46
- "selectedModifiers": {}
47
- }),
48
- emits: ["update:selected"],
49
- setup(__props) {
50
- const props = __props;
51
- const selectedModel = useModel(__props, "selected");
52
- const mergedBadgeProps = computed(() => ({
53
- ...props.badgeProps,
54
- disabled: props.disabled
55
- }));
56
- const mergedButtonProps = computed(() => {
57
- return props.buttonProps ? {
58
- size: props.size === "sm" ? "xxs" : "xs",
59
- variant: props.size === "sm" ? "ghost" : "lighter",
60
- disabled: props.disabled,
61
- ...props.buttonProps
62
- } : null;
63
- });
64
- return (_ctx, _cache) => {
65
- return openBlock(), createElementBlock("div", {
66
- tabindex: "0",
67
- "aria-disabled": _ctx.disabled,
68
- class: normalizeClass(unref(clsx)(
69
- "celeste-context-menu-item",
70
- `celeste-context-menu-item-size-${_ctx.size}`,
71
- { "celeste-context-menu-item-disabled": _ctx.disabled },
72
- { "celeste-context-menu-item-selected": __props.selected },
73
- { "celeste-context-menu-item-focused": _ctx.focused }
74
- ))
75
- }, [
76
- _ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
77
- key: 0,
78
- class: normalizeClass(unref(clsx)(
79
- "celeste-context-menu-item-prefix",
80
- `celeste-context-menu-item-prefix-${_ctx.size}`
81
- ))
82
- }, [
83
- renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
84
- ], 2)) : createCommentVNode("", true),
85
- createElementVNode("div", _hoisted_2, [
86
- createElementVNode("div", {
87
- class: normalizeClass(unref(clsx)(
88
- "celeste-context-menu-item-header",
89
- `celeste-context-menu-item-header-${_ctx.size}`
90
- ))
91
- }, [
92
- createElementVNode("span", {
93
- class: "celeste-context-menu-item-label",
94
- innerHTML: _ctx.label
95
- }, null, 8, _hoisted_3),
96
- _ctx.sublabel ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.sublabel), 1)) : createCommentVNode("", true)
97
- ], 2),
98
- props.description && props.size === "lg" ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
99
- ]),
100
- mergedBadgeProps.value ? (openBlock(), createBlock(Badge, mergeProps({ key: 1 }, mergedBadgeProps.value, { class: "celeste-context-menu-item-badge" }), null, 16)) : createCommentVNode("", true),
101
- _ctx.shortcut ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.shortcut), 1)) : createCommentVNode("", true),
102
- createElementVNode("span", _hoisted_7, [
103
- createVNode(unref(mg), {
104
- checked: selectedModel.value,
105
- "onUpdate:checked": _cache[0] || (_cache[0] = ($event) => selectedModel.value = $event),
106
- disabled: _ctx.disabled,
107
- class: "celeste-switch-root"
108
- }, {
109
- default: withCtx(() => [
110
- createVNode(unref(hg), { class: "celeste-switch-thumb" })
111
- ]),
112
- _: 1
113
- }, 8, ["checked", "disabled"])
114
- ]),
115
- createElementVNode("span", _hoisted_8, [
116
- mergedButtonProps.value ? (openBlock(), createBlock(Button, normalizeProps(mergeProps({ key: 0 }, mergedButtonProps.value)), {
117
- default: withCtx(() => [
118
- renderSlot(_ctx.$slots, "button-label", {}, void 0, true)
119
- ]),
120
- _: 3
121
- }, 16)) : createCommentVNode("", true)
122
- ]),
123
- _ctx.rightIcon ? (openBlock(), createElementBlock("span", _hoisted_9, [
124
- createElementVNode("i", {
125
- class: normalizeClass(_ctx.rightIcon)
126
- }, null, 2)
127
- ])) : createCommentVNode("", true)
128
- ], 10, _hoisted_1);
129
- };
130
- }
131
- });
132
- const contextMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3d94f388"]]);
133
- export {
134
- contextMenuItem as default
135
- };
@@ -1,100 +0,0 @@
1
- import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, withKeys, createBlock, createCommentVNode, renderSlot, createElementVNode, toDisplayString } from "vue";
2
- import { c as clsx } from "./chunks/clsx.js";
3
- import { _ as _sfc_main$1 } from "./chunks/checkbox.vue_vue_type_style_index_0_lang.js";
4
- import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
5
- const _hoisted_1 = ["aria-disabled"];
6
- const _hoisted_2 = { class: "celeste-dropdown-item-info" };
7
- const _hoisted_3 = ["innerHTML"];
8
- const _hoisted_4 = {
9
- key: 0,
10
- class: "celeste-dropdown-item-sublabel"
11
- };
12
- const _hoisted_5 = {
13
- key: 0,
14
- class: "celeste-dropdown-item-description"
15
- };
16
- const _hoisted_6 = {
17
- key: 2,
18
- class: "celeste-dropdown-item-suffix"
19
- };
20
- const _hoisted_7 = {
21
- key: 3,
22
- class: "i-celeste-check-fill"
23
- };
24
- const _sfc_main = /* @__PURE__ */ defineComponent({
25
- __name: "dropdown-item",
26
- props: {
27
- class: {},
28
- label: {},
29
- size: { default: "sm" },
30
- checkbox: { type: Boolean },
31
- sublabel: {},
32
- description: {},
33
- selected: { type: [Boolean, String], default: false },
34
- disabled: { type: Boolean, default: false },
35
- focused: { type: Boolean, default: false }
36
- },
37
- emits: ["update:selected"],
38
- setup(__props, { emit: __emit }) {
39
- const props = __props;
40
- const emit = __emit;
41
- function toggleSelection() {
42
- if (!props.disabled && props.checkbox) {
43
- emit("update:selected", !props.selected);
44
- }
45
- }
46
- return (_ctx, _cache) => {
47
- return openBlock(), createElementBlock("div", {
48
- tabindex: "0",
49
- "aria-disabled": _ctx.disabled,
50
- class: normalizeClass(unref(clsx)(
51
- "celeste-dropdown-item",
52
- { "celeste-dropdown-item-disabled": _ctx.disabled },
53
- { "celeste-dropdown-item-selected": _ctx.selected },
54
- { "celeste-dropdown-item-focused": _ctx.focused }
55
- )),
56
- onKeydown: withKeys(toggleSelection, ["enter"]),
57
- onClick: toggleSelection
58
- }, [
59
- _ctx.checkbox && _ctx.size === "sm" ? (openBlock(), createBlock(_sfc_main$1, {
60
- key: 0,
61
- checked: _ctx.selected,
62
- disabled: _ctx.disabled,
63
- "onUpdate:checked": _cache[0] || (_cache[0] = (value) => _ctx.$emit("update:selected", value))
64
- }, null, 8, ["checked", "disabled"])) : createCommentVNode("", true),
65
- _ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
66
- key: 1,
67
- class: normalizeClass(unref(clsx)(
68
- "celeste-dropdown-item-prefix",
69
- `celeste-dropdown-item-prefix-${_ctx.size}`
70
- ))
71
- }, [
72
- renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
73
- ], 2)) : createCommentVNode("", true),
74
- createElementVNode("div", _hoisted_2, [
75
- createElementVNode("div", {
76
- class: normalizeClass(unref(clsx)(
77
- "celeste-dropdown-item-header",
78
- `celeste-dropdown-item-header-${_ctx.size}`
79
- ))
80
- }, [
81
- createElementVNode("span", {
82
- class: "celeste-dropdown-item-label",
83
- innerHTML: _ctx.label
84
- }, null, 8, _hoisted_3),
85
- _ctx.sublabel ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.sublabel), 1)) : createCommentVNode("", true)
86
- ], 2),
87
- props.description && props.size === "lg" ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
88
- ]),
89
- _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_6, [
90
- renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
91
- ])) : createCommentVNode("", true),
92
- _ctx.selected ? (openBlock(), createElementBlock("i", _hoisted_7)) : createCommentVNode("", true)
93
- ], 42, _hoisted_1);
94
- };
95
- }
96
- });
97
- const DropdownItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a0a634ce"]]);
98
- export {
99
- DropdownItem as default
100
- };
@@ -1,291 +0,0 @@
1
- import { defineComponent, mergeModels, useModel, ref, computed, watch, openBlock, createElementBlock, withKeys, createVNode, unref, withCtx, normalizeClass, createElementVNode, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, toDisplayString, createBlock, createSlots, Fragment, renderList } from "vue";
2
- import { c as clsx } from "./chunks/clsx.js";
3
- import { a4 as Hv, j as jv, a6 as Uv, a2 as Xv, a3 as Jv, a5 as tm, Z as Zv, Y as qv, a0 as Qv } from "./chunks/index.js";
4
- import Badge from "./badge.js";
5
- import TextInput from "./text-input.js";
6
- import DropdownItem from "./dropdown-item.js";
7
- import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
8
- const _hoisted_1 = { class: "celeste-dropdown-anchor-trigger-prefix" };
9
- const _hoisted_2 = {
10
- key: 0,
11
- class: "celeste-dropdown-anchor-trigger-prefix-selected"
12
- };
13
- const _hoisted_3 = { key: 1 };
14
- const _hoisted_4 = ["src"];
15
- const _hoisted_5 = {
16
- key: 0,
17
- class: "celeste-dropdown-input"
18
- };
19
- const _hoisted_6 = { key: 0 };
20
- const _hoisted_7 = { key: 1 };
21
- const _hoisted_8 = {
22
- key: 2,
23
- class: "celeste-input-badge"
24
- };
25
- const _hoisted_9 = {
26
- key: 0,
27
- class: "celeste-dropdown-search"
28
- };
29
- const _hoisted_10 = ["src"];
30
- const _sfc_main = /* @__PURE__ */ defineComponent({
31
- __name: "dropdown",
32
- props: /* @__PURE__ */ mergeModels({
33
- disabled: { type: Boolean, default: false },
34
- icon: {},
35
- placeholder: { default: "Placeholder" },
36
- error: { type: Boolean },
37
- size: { default: "sm" },
38
- type: { default: "normal" },
39
- position: { default: "bottom" },
40
- align: { default: "start" },
41
- multiple: { type: Boolean, default: false },
42
- emptyLabel: { default: "No options available" },
43
- searchable: { type: Boolean, default: false },
44
- options: {},
45
- badgeProps: {}
46
- }, {
47
- "modelValue": {},
48
- "modelModifiers": {}
49
- }),
50
- emits: ["update:modelValue"],
51
- setup(__props) {
52
- const props = __props;
53
- const model = useModel(__props, "modelValue");
54
- const searched = ref("");
55
- const isSearchedFocused = ref(false);
56
- const isOpen = ref(false);
57
- function toggleDropdown() {
58
- isOpen.value = true;
59
- focusedItemIndex.value = -1;
60
- }
61
- const filteredOptions = computed(() => {
62
- if (!props.searchable || !searched.value)
63
- return props.options;
64
- return props.options.filter(
65
- (option) => option.label.toLowerCase().includes(searched.value.toLowerCase())
66
- );
67
- });
68
- function optionIsSelected(option) {
69
- if (!props.multiple) {
70
- return model.value && !Array.isArray(model.value) ? option.value === model.value.value : false;
71
- }
72
- return Array.isArray(model.value) ? model.value.some((selectedOption) => selectedOption.value === option.value) : false;
73
- }
74
- function toggleSelection(isSelected, option) {
75
- if (props.multiple && Array.isArray(model.value)) {
76
- model.value = isSelected ? model.value.filter((o) => o.value !== option.value) : [...model.value, option];
77
- return;
78
- }
79
- model.value = isSelected ? void 0 : option;
80
- }
81
- const mergedBadgeProps = computed(() => ({
82
- ...props.badgeProps,
83
- disabled: props.disabled
84
- }));
85
- const focusedItemIndex = ref(-1);
86
- function handleKeydown(event) {
87
- if (!isOpen.value)
88
- return;
89
- switch (event.key) {
90
- case "ArrowDown":
91
- event.preventDefault();
92
- if (focusedItemIndex.value < filteredOptions.value.length - 1) {
93
- focusedItemIndex.value++;
94
- } else {
95
- focusedItemIndex.value = 0;
96
- }
97
- break;
98
- case "ArrowUp":
99
- event.preventDefault();
100
- if (focusedItemIndex.value > 0) {
101
- focusedItemIndex.value--;
102
- } else {
103
- focusedItemIndex.value = filteredOptions.value.length - 1;
104
- }
105
- break;
106
- case "Enter":
107
- event.preventDefault();
108
- if (focusedItemIndex.value >= 0 && focusedItemIndex.value < filteredOptions.value.length) {
109
- const option = filteredOptions.value[focusedItemIndex.value];
110
- toggleSelection(optionIsSelected(option), option);
111
- }
112
- break;
113
- }
114
- }
115
- watch(filteredOptions, () => {
116
- if (focusedItemIndex.value >= filteredOptions.value.length) {
117
- focusedItemIndex.value = filteredOptions.value.length - 1;
118
- }
119
- });
120
- return (_ctx, _cache) => {
121
- return openBlock(), createElementBlock("div", {
122
- class: "celeste-dropdown-wrapper",
123
- tabindex: "0",
124
- onKeydown: [
125
- withKeys(toggleDropdown, ["enter"]),
126
- withKeys(toggleDropdown, ["space"])
127
- ]
128
- }, [
129
- createVNode(unref(Hv), {
130
- modelValue: model.value,
131
- "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => model.value = $event),
132
- open: isOpen.value,
133
- disabled: _ctx.disabled,
134
- multiple: props.multiple,
135
- class: "celeste-dropdown-root",
136
- "display-value": (v) => v.label,
137
- "onUpdate:open": _cache[5] || (_cache[5] = (val) => isOpen.value = val),
138
- onKeydown: handleKeydown
139
- }, {
140
- default: withCtx(() => [
141
- createVNode(unref(jv), { tabindex: "0" }, {
142
- default: withCtx(() => [
143
- createVNode(unref(Uv), {
144
- class: normalizeClass(unref(clsx)(
145
- "celeste-dropdown-anchor-trigger",
146
- `celeste-dropdown-anchor-trigger-size-${props.size}`,
147
- `celeste-dropdown-anchor-trigger-type-${props.type}`,
148
- { "celeste-dropdown-anchor-trigger-error": props.error },
149
- { "celeste-dropdown-anchor-trigger-disabled": props.disabled },
150
- { "celeste-dropdown-anchor-trigger-filled": model.value },
151
- { "celeste-dropdown-anchor-trigger-focused": isOpen.value }
152
- )),
153
- as: "div",
154
- disabled: _ctx.disabled
155
- }, {
156
- default: withCtx(() => [
157
- createElementVNode("div", _hoisted_1, [
158
- model.value && !Array.isArray(model.value) ? (openBlock(), createElementBlock("div", _hoisted_2, [
159
- model.value.icon ? (openBlock(), createElementBlock("i", {
160
- key: 0,
161
- class: normalizeClass(model.value.icon)
162
- }, null, 2)) : createCommentVNode("", true),
163
- model.value.image ? (openBlock(), createElementBlock("div", _hoisted_3, [
164
- renderSlot(_ctx.$slots, "image", normalizeProps(guardReactiveProps({ model: model.value })), () => [
165
- createElementVNode("img", {
166
- src: model.value.image,
167
- alt: "Selected option",
168
- class: "selected-dropdown-image"
169
- }, null, 8, _hoisted_4)
170
- ], true)
171
- ])) : createCommentVNode("", true)
172
- ])) : renderSlot(_ctx.$slots, "prefix", {
173
- key: 1,
174
- class: "celeste-dropdown-anchor-trigger-prefix-default"
175
- }, void 0, true)
176
- ]),
177
- _ctx.type !== "inline" ? (openBlock(), createElementBlock("div", _hoisted_5, [
178
- _ctx.multiple ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.placeholder), 1)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(model.value && !Array.isArray(model.value) ? model.value.label : props.placeholder), 1)),
179
- mergedBadgeProps.value ? (openBlock(), createElementBlock("span", _hoisted_8, [
180
- createVNode(Badge, normalizeProps(guardReactiveProps(mergedBadgeProps.value)), null, 16)
181
- ])) : createCommentVNode("", true)
182
- ])) : createCommentVNode("", true),
183
- _cache[6] || (_cache[6] = createElementVNode("div", { class: "celeste-dropdown-trigger" }, [
184
- createElementVNode("i", { class: "i-celeste-arrow-down-s-line" })
185
- ], -1))
186
- ]),
187
- _: 3
188
- }, 8, ["class", "disabled"])
189
- ]),
190
- _: 3
191
- }),
192
- !_ctx.disabled ? (openBlock(), createBlock(unref(Xv), {
193
- key: 0,
194
- dismissable: "",
195
- "avoid-collisions": true,
196
- class: normalizeClass(["celeste-dropdown-content", unref(clsx)(
197
- "celeste-dropdown-content",
198
- `celeste-dropdown-content-size-${_ctx.position}`,
199
- `celeste-dropdown-content-align-${_ctx.align}`
200
- )])
201
- }, {
202
- default: withCtx(() => [
203
- createVNode(unref(Jv), { class: "celeste-dropdown-items-viewport" }, {
204
- default: withCtx(() => [
205
- _ctx.searchable ? (openBlock(), createElementBlock("div", _hoisted_9, [
206
- createVNode(TextInput, {
207
- modelValue: searched.value,
208
- "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searched.value = $event),
209
- type: "search",
210
- size: "sm",
211
- placeholder: "Search",
212
- onFocus: _cache[2] || (_cache[2] = ($event) => isSearchedFocused.value = true),
213
- onBlur: _cache[3] || (_cache[3] = ($event) => isSearchedFocused.value = false)
214
- }, createSlots({
215
- prefix: withCtx(() => [
216
- _cache[7] || (_cache[7] = createElementVNode("i", { class: "i-celeste-search-2-line" }, null, -1))
217
- ]),
218
- _: 2
219
- }, [
220
- isSearchedFocused.value ? {
221
- name: "suffix",
222
- fn: withCtx(() => [
223
- createElementVNode("div", {
224
- onClick: _cache[0] || (_cache[0] = () => searched.value = "")
225
- }, _cache[8] || (_cache[8] = [
226
- createElementVNode("i", { class: "i-celeste-close-line" }, null, -1)
227
- ]))
228
- ]),
229
- key: "0"
230
- } : void 0
231
- ]), 1032, ["modelValue"]),
232
- createVNode(unref(tm), { class: "celeste-dropdown-separator" })
233
- ])) : createCommentVNode("", true),
234
- createVNode(unref(Zv), { class: "celeste-dropdown-empty-list" }),
235
- createVNode(unref(qv), { class: "celeste-dropdown-items-group" }, {
236
- default: withCtx(() => [
237
- (openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (option, index) => {
238
- return openBlock(), createBlock(unref(Qv), {
239
- key: option.value,
240
- value: option,
241
- disabled: _ctx.disabled,
242
- class: "celeste-dropdown-item",
243
- tabindex: "0"
244
- }, {
245
- default: withCtx(() => [
246
- createVNode(DropdownItem, {
247
- label: option.label,
248
- checkbox: props.multiple,
249
- selected: optionIsSelected(option),
250
- disabled: props.disabled,
251
- focused: index === focusedItemIndex.value
252
- }, {
253
- prefix: withCtx(() => [
254
- option.icon ? (openBlock(), createElementBlock("i", {
255
- key: 0,
256
- class: normalizeClass(option.icon)
257
- }, null, 2)) : createCommentVNode("", true),
258
- option.image ? (openBlock(), createElementBlock("img", {
259
- key: 1,
260
- src: option.image,
261
- alt: "option",
262
- class: "celeste-dropdown-item-image"
263
- }, null, 8, _hoisted_10)) : createCommentVNode("", true)
264
- ]),
265
- _: 2
266
- }, 1032, ["label", "checkbox", "selected", "disabled", "focused"]),
267
- createVNode(unref(tm))
268
- ]),
269
- _: 2
270
- }, 1032, ["value", "disabled"]);
271
- }), 128))
272
- ]),
273
- _: 1
274
- })
275
- ]),
276
- _: 1
277
- })
278
- ]),
279
- _: 1
280
- }, 8, ["class"])) : createCommentVNode("", true)
281
- ]),
282
- _: 3
283
- }, 8, ["modelValue", "open", "disabled", "multiple", "display-value"])
284
- ], 32);
285
- };
286
- }
287
- });
288
- const dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-13b7b76a"]]);
289
- export {
290
- dropdown as default
291
- };