@youcan/celeste 0.6.54 → 0.6.55

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