@youcan/celeste 0.6.53 → 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 (43) hide show
  1. package/dist/celeste.css +874 -1348
  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 +15 -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/combobox/combobox-list.d.ts +1 -1
  10. package/dist/components/dropdown-menu/dropdown-menu-sub-content.d.ts +2 -2
  11. package/dist/components/file-upload/file-upload-area.d.ts +43 -0
  12. package/dist/components/file-upload/index.d.ts +2 -0
  13. package/dist/components/index.d.ts +1 -1
  14. package/dist/components/popover/popover-content.d.ts +2 -2
  15. package/dist/es/chunks/index2.js +30 -2
  16. package/dist/es/color-picker.js +6 -4
  17. package/dist/es/color-swatch.js +3 -3
  18. package/dist/es/file-upload-area.js +281 -0
  19. package/dist/es/index.js +66 -60
  20. package/package.json +9 -9
  21. package/src/components/color-picker/color-picker.vue +4 -0
  22. package/src/components/color-picker/color-swatch.vue +1 -2
  23. package/src/components/file-upload/file-upload-area.vue +229 -0
  24. package/src/components/file-upload/index.ts +2 -0
  25. package/src/components/file-upload/stories/file-upload-area.stories.ts +76 -0
  26. package/src/components/index.ts +1 -1
  27. package/dist/cjs/context-menu-item.js +0 -134
  28. package/dist/cjs/dropdown-item.js +0 -99
  29. package/dist/cjs/dropdown.js +0 -290
  30. package/dist/components/dropdown/context-menu-item.d.ts +0 -39
  31. package/dist/components/dropdown/dropdown-item.d.ts +0 -30
  32. package/dist/components/dropdown/dropdown.d.ts +0 -55
  33. package/dist/components/dropdown/index.d.ts +0 -6
  34. package/dist/es/context-menu-item.js +0 -135
  35. package/dist/es/dropdown-item.js +0 -100
  36. package/dist/es/dropdown.js +0 -291
  37. package/src/components/dropdown/context-menu-item.vue +0 -317
  38. package/src/components/dropdown/dropdown-item.vue +0 -184
  39. package/src/components/dropdown/dropdown.vue +0 -650
  40. package/src/components/dropdown/index.ts +0 -8
  41. package/src/components/dropdown/stories/context-menu-item.stories.ts +0 -51
  42. package/src/components/dropdown/stories/dropdown-item.stories.ts +0 -33
  43. package/src/components/dropdown/stories/dropdown.stories.ts +0 -53
@@ -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
- };
@@ -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
- multiple: boolean;
37
- placeholder: string;
38
- searchable: boolean;
39
- position: "top" | "bottom";
40
- align: "start" | "end" | "center";
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
- };