@youcan/celeste 0.6.71 → 0.6.73
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/celeste.css +7 -6
- package/dist/cjs/alert.js +32 -32
- package/dist/cjs/badge.js +12 -12
- package/dist/cjs/button.js +6 -6
- package/dist/cjs/checkbox-card.js +33 -33
- package/dist/cjs/checkbox-label.js +31 -31
- package/dist/cjs/chunks/alpha-slider.js +12 -12
- package/dist/cjs/chunks/checkbox.js +7 -7
- package/dist/cjs/chunks/collapsible-content.js +6 -6
- package/dist/cjs/chunks/collapsible-trigger.js +5 -5
- package/dist/cjs/chunks/collapsible.js +6 -6
- package/dist/cjs/chunks/combobox-anchor.js +8 -8
- package/dist/cjs/chunks/content-divider.vue_vue_type_style_index_0_lang.js +15 -15
- package/dist/cjs/chunks/counter-input.js +13 -13
- package/dist/cjs/chunks/dropdown-menu-sub.js +6 -6
- package/dist/cjs/chunks/index.js +2289 -2292
- package/dist/cjs/chunks/index2.js +14 -14
- package/dist/cjs/chunks/index3.js +28 -28
- package/dist/cjs/chunks/index4.js +96 -125
- package/dist/cjs/chunks/index5.js +3381 -4086
- package/dist/cjs/chunks/modal-close.js +5 -5
- package/dist/cjs/chunks/modal-trigger.js +5 -5
- package/dist/cjs/chunks/modal.js +6 -6
- package/dist/cjs/chunks/pagination-first.js +9 -9
- package/dist/cjs/chunks/pagination-item.js +6 -6
- package/dist/cjs/chunks/pagination-last.js +9 -9
- package/dist/cjs/chunks/pagination-next.js +9 -9
- package/dist/cjs/chunks/pagination-previous.js +9 -9
- package/dist/cjs/chunks/popover.js +6 -6
- package/dist/cjs/chunks/radio-group-item.js +7 -7
- package/dist/cjs/chunks/radio-group.js +8 -8
- package/dist/cjs/chunks/rich-editor.vue_vue_type_style_index_0_scoped_dbc85b1a_lang.js +45 -742
- package/dist/cjs/chunks/scroll-area.js +11 -11
- package/dist/cjs/chunks/select-group.js +5 -5
- package/dist/cjs/chunks/select.js +7 -7
- package/dist/cjs/chunks/sheet-trigger.js +5 -5
- package/dist/cjs/chunks/sheet.js +6 -6
- package/dist/cjs/chunks/sidebar-content.js +5 -5
- package/dist/cjs/chunks/sidebar-element.js +6 -6
- package/dist/cjs/chunks/sidebar-footer.js +5 -5
- package/dist/cjs/chunks/sidebar-group-label.js +6 -6
- package/dist/cjs/chunks/sidebar-group.js +5 -5
- package/dist/cjs/chunks/sidebar-header.js +5 -5
- package/dist/cjs/chunks/sidebar-menu-action.js +6 -6
- package/dist/cjs/chunks/sidebar-menu-badge.js +4 -4
- package/dist/cjs/chunks/sidebar-menu-button.js +7 -7
- package/dist/cjs/chunks/sidebar-menu-item.js +5 -5
- package/dist/cjs/chunks/sidebar-menu-sub-button.js +6 -6
- package/dist/cjs/chunks/sidebar-menu-sub-item.js +5 -5
- package/dist/cjs/chunks/sidebar-menu-sub.js +5 -5
- package/dist/cjs/chunks/sidebar-menu.js +5 -5
- package/dist/cjs/chunks/sidebar-provider.vue_vue_type_style_index_0_lang.js +9 -9
- package/dist/cjs/chunks/sidebar-separator.vue_vue_type_style_index_0_lang.js +4 -4
- package/dist/cjs/chunks/sidebar.js +21 -21
- package/dist/cjs/chunks/slider.js +11 -11
- package/dist/cjs/chunks/sonner.js +146 -214
- package/dist/cjs/chunks/switch.js +7 -7
- package/dist/cjs/chunks/tinycolor.js +2 -2
- package/dist/cjs/chunks/tooltip-provider.js +5 -5
- package/dist/cjs/chunks/tooltip-root.js +7 -7
- package/dist/cjs/chunks/tooltip-trigger.js +6 -6
- package/dist/cjs/chunks/tooltip.js +12 -12
- package/dist/cjs/color-area.js +16 -16
- package/dist/cjs/color-picker.js +102 -102
- package/dist/cjs/color-swatch.js +11 -11
- package/dist/cjs/combobox-empty.js +7 -7
- package/dist/cjs/combobox-group.js +11 -11
- package/dist/cjs/combobox-input.js +12 -12
- package/dist/cjs/combobox-item.js +24 -24
- package/dist/cjs/combobox-list.js +12 -12
- package/dist/cjs/combobox-root.js +6 -7
- package/dist/cjs/combobox-separator.js +7 -7
- package/dist/cjs/combobox-trigger.js +8 -8
- package/dist/cjs/combobox.js +53 -54
- package/dist/cjs/command-group.js +10 -10
- package/dist/cjs/command-input.js +8 -8
- package/dist/cjs/command-item.js +7 -7
- package/dist/cjs/command-list.js +8 -8
- package/dist/cjs/command-root.js +7 -8
- package/dist/cjs/command-separator.js +7 -7
- package/dist/cjs/compact-button.js +7 -7
- package/dist/cjs/config.js +2 -2
- package/dist/cjs/digit-input-group.js +7 -7
- package/dist/cjs/digit-input-slot.js +5 -5
- package/dist/cjs/digit-input.js +7 -7
- package/dist/cjs/dropdown-menu-content.js +9 -9
- package/dist/cjs/dropdown-menu-group.js +5 -5
- package/dist/cjs/dropdown-menu-item.js +14 -14
- package/dist/cjs/dropdown-menu-label.js +7 -7
- package/dist/cjs/dropdown-menu-separator.js +4 -4
- package/dist/cjs/dropdown-menu-sub-content.js +9 -9
- package/dist/cjs/dropdown-menu-sub-trigger.js +12 -12
- package/dist/cjs/dropdown-menu-trigger.js +6 -6
- package/dist/cjs/dropdown-menu.js +7 -7
- package/dist/cjs/extra-settings.js +21 -21
- package/dist/cjs/fancy-button.js +6 -6
- package/dist/cjs/file-upload-area.js +22 -22
- package/dist/cjs/hint-text.js +8 -8
- package/dist/cjs/hue-slider.js +15 -15
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/label.js +13 -13
- package/dist/cjs/link-bubble.js +40 -40
- package/dist/cjs/link-button.js +6 -6
- package/dist/cjs/modal-body.js +5 -5
- package/dist/cjs/modal-content.js +12 -12
- package/dist/cjs/modal-footer.js +5 -5
- package/dist/cjs/modal-header.js +22 -22
- package/dist/cjs/pagination-content.js +6 -6
- package/dist/cjs/pagination-ellipsis.js +8 -8
- package/dist/cjs/pagination.js +14 -14
- package/dist/cjs/popover-content.js +30 -30
- package/dist/cjs/popover-trigger.js +5 -5
- package/dist/cjs/progress-bar.js +19 -19
- package/dist/cjs/progress-circle.js +20 -20
- package/dist/cjs/radio-group-card.js +33 -33
- package/dist/cjs/radio-group-label.js +31 -31
- package/dist/cjs/rich-editor.js +76 -76
- package/dist/cjs/scroll-bar.js +7 -7
- package/dist/cjs/segmented-control-item.js +8 -6
- package/dist/cjs/segmented-control.js +8 -8
- package/dist/cjs/select-content.js +11 -11
- package/dist/cjs/select-icon.js +5 -5
- package/dist/cjs/select-item.js +11 -11
- package/dist/cjs/select-label.js +6 -6
- package/dist/cjs/select-separator.js +4 -4
- package/dist/cjs/select-trigger.js +9 -9
- package/dist/cjs/select-value.js +6 -6
- package/dist/cjs/sheet-close.js +6 -6
- package/dist/cjs/sheet-content.js +14 -14
- package/dist/cjs/sheet-description.js +7 -7
- package/dist/cjs/sheet-footer.js +6 -6
- package/dist/cjs/sheet-header.js +5 -5
- package/dist/cjs/sheet-title.js +7 -7
- package/dist/cjs/sidebar-group-content.js +5 -5
- package/dist/cjs/sidebar-trigger.js +7 -7
- package/dist/cjs/social-button.js +8 -8
- package/dist/cjs/sonner-alert.js +8 -8
- package/dist/cjs/status-badge.js +8 -8
- package/dist/cjs/tab-menu-content.js +7 -7
- package/dist/cjs/tab-menu-item.js +11 -11
- package/dist/cjs/tab-menu-list.js +6 -6
- package/dist/cjs/tab-menu.js +6 -6
- package/dist/cjs/table-body.js +5 -5
- package/dist/cjs/table-caption.js +5 -5
- package/dist/cjs/table-cell.js +5 -5
- package/dist/cjs/table-empty.js +9 -9
- package/dist/cjs/table-footer.js +5 -5
- package/dist/cjs/table-head.js +5 -5
- package/dist/cjs/table-header.js +5 -5
- package/dist/cjs/table-row.js +8 -8
- package/dist/cjs/table.js +6 -6
- package/dist/cjs/tag.js +10 -10
- package/dist/cjs/text-input-affix.js +5 -5
- package/dist/cjs/text-input-button.js +6 -6
- package/dist/cjs/text-input.js +31 -31
- package/dist/cjs/textarea.js +9 -9
- package/dist/cjs/tooltip-content.js +20 -20
- package/dist/cjs/use-color-model.js +2 -2
- package/dist/cjs/use-delegated-props.js +2 -2
- package/dist/cjs/use-sidebar.js +1 -1
- package/dist/cjs/use-user-select.js +4 -4
- package/dist/components/color-picker/alpha-slider.d.ts +1 -1
- package/dist/components/color-picker/color-area.d.ts +1 -1
- package/dist/components/color-picker/hue-slider.d.ts +1 -1
- package/dist/components/file-upload/file-upload-area.d.ts +2 -4
- package/dist/components/rich-editor/link-bubble.d.ts +1 -3
- package/dist/es/alert.js +1 -1
- package/dist/es/badge.js +1 -1
- package/dist/es/button.js +2 -2
- package/dist/es/checkbox-card.js +3 -3
- package/dist/es/checkbox-label.js +3 -3
- package/dist/es/chunks/alpha-slider.js +1 -1
- package/dist/es/chunks/checkbox.js +5 -5
- package/dist/es/chunks/collapsible-content.js +3 -3
- package/dist/es/chunks/collapsible-trigger.js +3 -3
- package/dist/es/chunks/collapsible.js +4 -4
- package/dist/es/chunks/combobox-anchor.js +4 -4
- package/dist/es/chunks/content-divider.vue_vue_type_style_index_0_lang.js +3 -3
- package/dist/es/chunks/counter-input.js +7 -7
- package/dist/es/chunks/dropdown-menu-sub.js +4 -4
- package/dist/es/chunks/index.js +1153 -1156
- package/dist/es/chunks/index2.js +3 -3
- package/dist/es/chunks/index3.js +2 -2
- package/dist/es/chunks/index4.js +90 -119
- package/dist/es/chunks/index5.js +3394 -4099
- package/dist/es/chunks/modal-close.js +3 -3
- package/dist/es/chunks/modal-trigger.js +3 -3
- package/dist/es/chunks/modal.js +4 -4
- package/dist/es/chunks/pagination-first.js +4 -4
- package/dist/es/chunks/pagination-item.js +3 -3
- package/dist/es/chunks/pagination-last.js +4 -4
- package/dist/es/chunks/pagination-next.js +4 -4
- package/dist/es/chunks/pagination-previous.js +4 -4
- package/dist/es/chunks/popover.js +4 -4
- package/dist/es/chunks/radio-group-item.js +5 -5
- package/dist/es/chunks/radio-group.js +4 -4
- package/dist/es/chunks/rich-editor.vue_vue_type_style_index_0_scoped_dbc85b1a_lang.js +46 -743
- package/dist/es/chunks/scroll-area.js +5 -5
- package/dist/es/chunks/select-group.js +3 -3
- package/dist/es/chunks/select.js +4 -4
- package/dist/es/chunks/sheet-trigger.js +3 -3
- package/dist/es/chunks/sheet.js +4 -4
- package/dist/es/chunks/sidebar-content.js +1 -1
- package/dist/es/chunks/sidebar-element.js +2 -2
- package/dist/es/chunks/sidebar-footer.js +1 -1
- package/dist/es/chunks/sidebar-group-label.js +2 -2
- package/dist/es/chunks/sidebar-group.js +1 -1
- package/dist/es/chunks/sidebar-header.js +1 -1
- package/dist/es/chunks/sidebar-menu-action.js +2 -2
- package/dist/es/chunks/sidebar-menu-badge.js +1 -1
- package/dist/es/chunks/sidebar-menu-button.js +2 -2
- package/dist/es/chunks/sidebar-menu-item.js +1 -1
- package/dist/es/chunks/sidebar-menu-sub-button.js +2 -2
- package/dist/es/chunks/sidebar-menu-sub-item.js +1 -1
- package/dist/es/chunks/sidebar-menu-sub.js +1 -1
- package/dist/es/chunks/sidebar-menu.js +1 -1
- package/dist/es/chunks/sidebar-provider.vue_vue_type_style_index_0_lang.js +3 -3
- package/dist/es/chunks/sidebar-separator.vue_vue_type_style_index_0_lang.js +1 -1
- package/dist/es/chunks/sidebar.js +1 -1
- package/dist/es/chunks/slider.js +7 -7
- package/dist/es/chunks/sonner.js +29 -97
- package/dist/es/chunks/switch.js +5 -5
- package/dist/es/chunks/tinycolor.js +2 -2
- package/dist/es/chunks/tooltip-provider.js +3 -3
- package/dist/es/chunks/tooltip-root.js +4 -4
- package/dist/es/chunks/tooltip-trigger.js +4 -4
- package/dist/es/chunks/tooltip.js +3 -3
- package/dist/es/color-area.js +2 -2
- package/dist/es/color-picker.js +5 -5
- package/dist/es/color-swatch.js +1 -1
- package/dist/es/combobox-empty.js +3 -3
- package/dist/es/combobox-group.js +4 -4
- package/dist/es/combobox-input.js +3 -3
- package/dist/es/combobox-item.js +4 -4
- package/dist/es/combobox-list.js +6 -6
- package/dist/es/combobox-root.js +4 -5
- package/dist/es/combobox-separator.js +3 -3
- package/dist/es/combobox-trigger.js +4 -4
- package/dist/es/combobox.js +3 -4
- package/dist/es/command-group.js +4 -4
- package/dist/es/command-input.js +4 -4
- package/dist/es/command-item.js +4 -4
- package/dist/es/command-list.js +4 -4
- package/dist/es/command-root.js +4 -5
- package/dist/es/command-separator.js +3 -3
- package/dist/es/compact-button.js +2 -2
- package/dist/es/digit-input-group.js +3 -3
- package/dist/es/digit-input-slot.js +4 -4
- package/dist/es/digit-input.js +4 -4
- package/dist/es/dropdown-menu-content.js +5 -5
- package/dist/es/dropdown-menu-group.js +3 -3
- package/dist/es/dropdown-menu-item.js +4 -4
- package/dist/es/dropdown-menu-label.js +4 -4
- package/dist/es/dropdown-menu-separator.js +3 -3
- package/dist/es/dropdown-menu-sub-content.js +5 -5
- package/dist/es/dropdown-menu-sub-trigger.js +4 -4
- package/dist/es/dropdown-menu-trigger.js +4 -4
- package/dist/es/dropdown-menu.js +4 -4
- package/dist/es/extra-settings.js +1 -1
- package/dist/es/fancy-button.js +2 -2
- package/dist/es/file-upload-area.js +1 -1
- package/dist/es/hint-text.js +1 -1
- package/dist/es/hue-slider.js +3 -3
- package/dist/es/index.js +3 -3
- package/dist/es/label.js +3 -3
- package/dist/es/link-bubble.js +1 -1
- package/dist/es/link-button.js +2 -2
- package/dist/es/modal-body.js +1 -1
- package/dist/es/modal-content.js +6 -6
- package/dist/es/modal-footer.js +1 -1
- package/dist/es/modal-header.js +5 -5
- package/dist/es/pagination-content.js +3 -3
- package/dist/es/pagination-ellipsis.js +3 -3
- package/dist/es/pagination.js +4 -4
- package/dist/es/popover-content.js +7 -7
- package/dist/es/popover-trigger.js +3 -3
- package/dist/es/progress-bar.js +4 -4
- package/dist/es/progress-circle.js +4 -4
- package/dist/es/radio-group-card.js +3 -3
- package/dist/es/radio-group-label.js +3 -3
- package/dist/es/rich-editor.js +4 -4
- package/dist/es/scroll-bar.js +4 -4
- package/dist/es/segmented-control-item.js +5 -3
- package/dist/es/segmented-control.js +4 -4
- package/dist/es/select-content.js +6 -6
- package/dist/es/select-icon.js +1 -1
- package/dist/es/select-item.js +5 -5
- package/dist/es/select-label.js +3 -3
- package/dist/es/select-separator.js +3 -3
- package/dist/es/select-trigger.js +4 -4
- package/dist/es/select-value.js +3 -3
- package/dist/es/sheet-close.js +3 -3
- package/dist/es/sheet-content.js +7 -7
- package/dist/es/sheet-description.js +3 -3
- package/dist/es/sheet-footer.js +1 -1
- package/dist/es/sheet-header.js +1 -1
- package/dist/es/sheet-title.js +3 -3
- package/dist/es/sidebar-group-content.js +1 -1
- package/dist/es/sidebar-trigger.js +1 -1
- package/dist/es/social-button.js +2 -2
- package/dist/es/sonner-alert.js +1 -1
- package/dist/es/status-badge.js +1 -1
- package/dist/es/tab-menu-content.js +3 -3
- package/dist/es/tab-menu-item.js +4 -4
- package/dist/es/tab-menu-list.js +3 -3
- package/dist/es/tab-menu.js +4 -4
- package/dist/es/table-body.js +1 -1
- package/dist/es/table-caption.js +1 -1
- package/dist/es/table-cell.js +1 -1
- package/dist/es/table-empty.js +1 -1
- package/dist/es/table-footer.js +1 -1
- package/dist/es/table-head.js +1 -1
- package/dist/es/table-header.js +1 -1
- package/dist/es/table-row.js +1 -1
- package/dist/es/table.js +1 -1
- package/dist/es/tag.js +2 -2
- package/dist/es/text-input-affix.js +1 -1
- package/dist/es/text-input-button.js +1 -1
- package/dist/es/text-input.js +2 -2
- package/dist/es/textarea.js +1 -1
- package/dist/es/tooltip-content.js +6 -6
- package/dist/es/use-sidebar.js +2 -2
- package/package.json +3 -3
- package/src/components/slider/slider.vue +3 -3
package/dist/cjs/color-picker.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const
|
|
2
|
+
const Mo = require("vue");
|
|
3
3
|
const useDelegatedProps = require("./use-delegated-props.js");
|
|
4
4
|
const color = require("./color.js");
|
|
5
5
|
const index = require("./chunks/index.js");
|
|
@@ -36,7 +36,7 @@ const _hoisted_3 = { class: "celeste-color-format" };
|
|
|
36
36
|
const _hoisted_4 = { class: "celeste-color-controls" };
|
|
37
37
|
const _hoisted_5 = { class: "celeste-color-format-inputs" };
|
|
38
38
|
const _hoisted_6 = { class: "celeste-color-swatches" };
|
|
39
|
-
const _sfc_main = /* @__PURE__ */
|
|
39
|
+
const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
40
40
|
__name: "color-picker",
|
|
41
41
|
props: {
|
|
42
42
|
modelValue: { default: "hsl(240, 100%, 50%)" },
|
|
@@ -48,26 +48,26 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
48
48
|
},
|
|
49
49
|
emits: ["update:modelValue"],
|
|
50
50
|
setup(__props, { emit: __emit }) {
|
|
51
|
-
|
|
51
|
+
Mo.useCssVars((_ctx) => ({
|
|
52
52
|
"6559ad05": _ctx.modelValue
|
|
53
53
|
}));
|
|
54
54
|
const props = __props;
|
|
55
55
|
const emit = __emit;
|
|
56
56
|
const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
|
|
57
|
-
const forwarded = index.
|
|
57
|
+
const forwarded = index.xe(delegatedProps, emit);
|
|
58
58
|
const tinyColorRef = useColorModel.defineColorModel(props, emit);
|
|
59
|
-
const hueRef =
|
|
60
|
-
const currentColorFormat =
|
|
61
|
-
const eyeDropper =
|
|
62
|
-
const hex =
|
|
59
|
+
const hueRef = Mo.ref(tinyColorRef.value.toHsl().h);
|
|
60
|
+
const currentColorFormat = Mo.ref(props.defaultFormat || "hex");
|
|
61
|
+
const eyeDropper = Mo.ref(null);
|
|
62
|
+
const hex = Mo.computed({
|
|
63
63
|
get: () => tinyColorRef.value.toHexString().toUpperCase(),
|
|
64
64
|
set: () => {
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
|
-
const rgb =
|
|
67
|
+
const rgb = Mo.computed(() => {
|
|
68
68
|
return tinyColorRef.value.toRgb();
|
|
69
69
|
});
|
|
70
|
-
const hsl =
|
|
70
|
+
const hsl = Mo.computed(() => {
|
|
71
71
|
const { h, s, l } = tinyColorRef.value.toHsl();
|
|
72
72
|
return {
|
|
73
73
|
h: `${h.toFixed()}°`,
|
|
@@ -76,7 +76,7 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
76
76
|
a: tinyColorRef.value.getAlpha()
|
|
77
77
|
};
|
|
78
78
|
});
|
|
79
|
-
const hsv =
|
|
79
|
+
const hsv = Mo.computed(() => {
|
|
80
80
|
const { h, s, v } = tinyColorRef.value.toHsv();
|
|
81
81
|
return {
|
|
82
82
|
h: `${h.toFixed()}°`,
|
|
@@ -84,7 +84,7 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
84
84
|
v: `${(v * 100).toFixed()}%`
|
|
85
85
|
};
|
|
86
86
|
});
|
|
87
|
-
|
|
87
|
+
Mo.watch(tinyColorRef, (tinyColorInstance) => {
|
|
88
88
|
const newHue = tinyColorInstance.toHsl().h;
|
|
89
89
|
const saturation = tinyColorInstance.toHsl().s;
|
|
90
90
|
if (saturation === 0 && hueRef.value !== 0) {
|
|
@@ -224,71 +224,71 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
224
224
|
}
|
|
225
225
|
}
|
|
226
226
|
return (_ctx, _cache) => {
|
|
227
|
-
return
|
|
228
|
-
default:
|
|
229
|
-
|
|
230
|
-
default:
|
|
231
|
-
|
|
227
|
+
return Mo.openBlock(), Mo.createBlock(Mo.unref(popover_vue_vue_type_script_setup_true_lang._sfc_main), null, {
|
|
228
|
+
default: Mo.withCtx(() => [
|
|
229
|
+
Mo.createVNode(Mo.unref(popoverTrigger), null, {
|
|
230
|
+
default: Mo.withCtx(() => [
|
|
231
|
+
Mo.createVNode(Mo.unref(button), {
|
|
232
232
|
class: "celeste-picker-trigger",
|
|
233
233
|
intent: "neutral",
|
|
234
234
|
variant: "stroke"
|
|
235
235
|
}, {
|
|
236
|
-
default:
|
|
237
|
-
_cache[53] || (_cache[53] =
|
|
238
|
-
|
|
236
|
+
default: Mo.withCtx(() => [
|
|
237
|
+
_cache[53] || (_cache[53] = Mo.createElementVNode("span", { class: "celeste-selected-color" }, null, -1)),
|
|
238
|
+
Mo.createTextVNode(" " + Mo.toDisplayString(_ctx.label), 1)
|
|
239
239
|
]),
|
|
240
240
|
_: 1
|
|
241
241
|
})
|
|
242
242
|
]),
|
|
243
243
|
_: 1
|
|
244
244
|
}),
|
|
245
|
-
|
|
246
|
-
default:
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
modelValue:
|
|
251
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) =>
|
|
245
|
+
Mo.createVNode(Mo.unref(popoverContent), { dismissible: false }, {
|
|
246
|
+
default: Mo.withCtx(() => [
|
|
247
|
+
Mo.createElementVNode("div", Mo.mergeProps({ class: "celeste-color-picker-wrapper" }, Mo.unref(forwarded)), [
|
|
248
|
+
Mo.createElementVNode("div", _hoisted_1, [
|
|
249
|
+
Mo.createVNode(Mo.unref(colorArea), {
|
|
250
|
+
modelValue: Mo.unref(tinyColorRef),
|
|
251
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => Mo.isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
|
|
252
252
|
hue: hueRef.value
|
|
253
253
|
}, null, 8, ["modelValue", "hue"]),
|
|
254
|
-
|
|
254
|
+
Mo.createVNode(Mo.unref(hueSlider), {
|
|
255
255
|
modelValue: hueRef.value,
|
|
256
256
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hueRef.value = $event)
|
|
257
257
|
}, null, 8, ["modelValue"]),
|
|
258
|
-
|
|
259
|
-
modelValue:
|
|
260
|
-
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) =>
|
|
258
|
+
Mo.createVNode(alphaSlider_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
259
|
+
modelValue: Mo.unref(tinyColorRef),
|
|
260
|
+
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => Mo.isRef(tinyColorRef) ? tinyColorRef.value = $event : null)
|
|
261
261
|
}, null, 8, ["modelValue"]),
|
|
262
|
-
|
|
263
|
-
|
|
262
|
+
Mo.createElementVNode("div", _hoisted_2, [
|
|
263
|
+
Mo.createVNode(Mo.unref(select_vue_vue_type_script_setup_true_lang._sfc_main), {
|
|
264
264
|
modelValue: currentColorFormat.value,
|
|
265
265
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => currentColorFormat.value = $event),
|
|
266
266
|
name: "color-format"
|
|
267
267
|
}, {
|
|
268
|
-
default:
|
|
269
|
-
|
|
270
|
-
default:
|
|
271
|
-
|
|
268
|
+
default: Mo.withCtx(() => [
|
|
269
|
+
Mo.createVNode(Mo.unref(selectTrigger), { variant: "inline" }, {
|
|
270
|
+
default: Mo.withCtx(() => [
|
|
271
|
+
Mo.createVNode(Mo.unref(selectValue), {
|
|
272
272
|
placeholder: "HEX",
|
|
273
273
|
class: "celeste-selected-color-format"
|
|
274
274
|
}, {
|
|
275
|
-
default:
|
|
276
|
-
|
|
275
|
+
default: Mo.withCtx(() => [
|
|
276
|
+
Mo.createTextVNode(Mo.toDisplayString(currentColorFormat.value), 1)
|
|
277
277
|
]),
|
|
278
278
|
_: 1
|
|
279
279
|
})
|
|
280
280
|
]),
|
|
281
281
|
_: 1
|
|
282
282
|
}),
|
|
283
|
-
|
|
284
|
-
default:
|
|
285
|
-
(
|
|
286
|
-
return
|
|
283
|
+
Mo.createVNode(Mo.unref(selectContent), { width: "fit" }, {
|
|
284
|
+
default: Mo.withCtx(() => [
|
|
285
|
+
(Mo.openBlock(true), Mo.createElementBlock(Mo.Fragment, null, Mo.renderList(props.formats, (format) => {
|
|
286
|
+
return Mo.openBlock(), Mo.createBlock(Mo.unref(selectItem), {
|
|
287
287
|
key: format,
|
|
288
288
|
value: format
|
|
289
289
|
}, {
|
|
290
|
-
default:
|
|
291
|
-
|
|
290
|
+
default: Mo.withCtx(() => [
|
|
291
|
+
Mo.createElementVNode("span", _hoisted_3, Mo.toDisplayString(format), 1)
|
|
292
292
|
]),
|
|
293
293
|
_: 2
|
|
294
294
|
}, 1032, ["value"]);
|
|
@@ -299,8 +299,8 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
299
299
|
]),
|
|
300
300
|
_: 1
|
|
301
301
|
}, 8, ["modelValue"]),
|
|
302
|
-
|
|
303
|
-
eyeDropper.value ? (
|
|
302
|
+
Mo.createElementVNode("div", _hoisted_4, [
|
|
303
|
+
eyeDropper.value ? (Mo.openBlock(), Mo.createBlock(Mo.unref(button), {
|
|
304
304
|
key: 0,
|
|
305
305
|
class: "celeste-color-sip",
|
|
306
306
|
variant: "stroke",
|
|
@@ -308,13 +308,13 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
308
308
|
intent: "neutral",
|
|
309
309
|
onClick: sipColor
|
|
310
310
|
}, {
|
|
311
|
-
default:
|
|
312
|
-
|
|
311
|
+
default: Mo.withCtx(() => _cache[54] || (_cache[54] = [
|
|
312
|
+
Mo.createElementVNode("i", { class: "i-celeste-sip-line" }, null, -1)
|
|
313
313
|
])),
|
|
314
314
|
_: 1
|
|
315
|
-
})) :
|
|
316
|
-
|
|
317
|
-
currentColorFormat.value === "hex" ? (
|
|
315
|
+
})) : Mo.createCommentVNode("", true),
|
|
316
|
+
Mo.createElementVNode("div", _hoisted_5, [
|
|
317
|
+
currentColorFormat.value === "hex" ? (Mo.openBlock(), Mo.createBlock(Mo.unref(textInput), {
|
|
318
318
|
key: 0,
|
|
319
319
|
modelValue: hex.value,
|
|
320
320
|
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => hex.value = $event),
|
|
@@ -326,9 +326,9 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
326
326
|
size: "xs",
|
|
327
327
|
onBeforeinput: validateHexInput,
|
|
328
328
|
onFocusout: inputChangeHex,
|
|
329
|
-
onKeydown:
|
|
330
|
-
}, null, 8, ["modelValue", "onKeydown"])) : currentColorFormat.value === "rgb" ? (
|
|
331
|
-
|
|
329
|
+
onKeydown: Mo.withKeys(Mo.withModifiers(inputChangeHex, ["prevent"]), ["enter"])
|
|
330
|
+
}, null, 8, ["modelValue", "onKeydown"])) : currentColorFormat.value === "rgb" ? (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, { key: 1 }, [
|
|
331
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
332
332
|
modelValue: rgb.value.r,
|
|
333
333
|
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => rgb.value.r = $event),
|
|
334
334
|
autocomplete: "off",
|
|
@@ -339,12 +339,12 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
339
339
|
onBeforeinput: validateInput,
|
|
340
340
|
onFocusout: _cache[6] || (_cache[6] = (e) => inputChangeRGB(e, "r")),
|
|
341
341
|
onKeydown: [
|
|
342
|
-
_cache[7] || (_cache[7] =
|
|
343
|
-
_cache[8] || (_cache[8] =
|
|
344
|
-
_cache[9] || (_cache[9] =
|
|
342
|
+
_cache[7] || (_cache[7] = Mo.withKeys(Mo.withModifiers((e) => inputChangeRGB(e, "r"), ["prevent"]), ["enter"])),
|
|
343
|
+
_cache[8] || (_cache[8] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["up"])),
|
|
344
|
+
_cache[9] || (_cache[9] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "r"), ["prevent", "stop"]), ["down"]))
|
|
345
345
|
]
|
|
346
346
|
}, null, 8, ["modelValue"]),
|
|
347
|
-
|
|
347
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
348
348
|
modelValue: rgb.value.g,
|
|
349
349
|
"onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => rgb.value.g = $event),
|
|
350
350
|
autocomplete: "off",
|
|
@@ -355,12 +355,12 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
355
355
|
onBeforeinput: validateInput,
|
|
356
356
|
onFocusout: _cache[11] || (_cache[11] = (e) => inputChangeRGB(e, "g")),
|
|
357
357
|
onKeydown: [
|
|
358
|
-
_cache[12] || (_cache[12] =
|
|
359
|
-
_cache[13] || (_cache[13] =
|
|
360
|
-
_cache[14] || (_cache[14] =
|
|
358
|
+
_cache[12] || (_cache[12] = Mo.withKeys(Mo.withModifiers((e) => inputChangeRGB(e, "g"), ["prevent"]), ["enter"])),
|
|
359
|
+
_cache[13] || (_cache[13] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["up"])),
|
|
360
|
+
_cache[14] || (_cache[14] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "g"), ["prevent", "stop"]), ["down"]))
|
|
361
361
|
]
|
|
362
362
|
}, null, 8, ["modelValue"]),
|
|
363
|
-
|
|
363
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
364
364
|
modelValue: rgb.value.b,
|
|
365
365
|
"onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => rgb.value.b = $event),
|
|
366
366
|
autocomplete: "off",
|
|
@@ -371,13 +371,13 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
371
371
|
onBeforeinput: validateInput,
|
|
372
372
|
onFocusout: _cache[16] || (_cache[16] = (e) => inputChangeRGB(e, "b")),
|
|
373
373
|
onKeydown: [
|
|
374
|
-
_cache[17] || (_cache[17] =
|
|
375
|
-
_cache[18] || (_cache[18] =
|
|
376
|
-
_cache[19] || (_cache[19] =
|
|
374
|
+
_cache[17] || (_cache[17] = Mo.withKeys(Mo.withModifiers((e) => inputChangeRGB(e, "b"), ["prevent"]), ["enter"])),
|
|
375
|
+
_cache[18] || (_cache[18] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["up"])),
|
|
376
|
+
_cache[19] || (_cache[19] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "b"), ["prevent", "stop"]), ["down"]))
|
|
377
377
|
]
|
|
378
378
|
}, null, 8, ["modelValue"])
|
|
379
|
-
], 64)) : currentColorFormat.value === "hsl" ? (
|
|
380
|
-
|
|
379
|
+
], 64)) : currentColorFormat.value === "hsl" ? (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, { key: 2 }, [
|
|
380
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
381
381
|
modelValue: hsl.value.h,
|
|
382
382
|
"onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => hsl.value.h = $event),
|
|
383
383
|
autocomplete: "off",
|
|
@@ -388,12 +388,12 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
388
388
|
onBeforeinput: validateInput,
|
|
389
389
|
onFocusout: _cache[21] || (_cache[21] = (e) => inputChangeHSL(e, "h")),
|
|
390
390
|
onKeydown: [
|
|
391
|
-
_cache[22] || (_cache[22] =
|
|
392
|
-
_cache[23] || (_cache[23] =
|
|
393
|
-
_cache[24] || (_cache[24] =
|
|
391
|
+
_cache[22] || (_cache[22] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSL(e, "h"), ["prevent"]), ["enter"])),
|
|
392
|
+
_cache[23] || (_cache[23] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
|
|
393
|
+
_cache[24] || (_cache[24] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
|
|
394
394
|
]
|
|
395
395
|
}, null, 8, ["modelValue"]),
|
|
396
|
-
|
|
396
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
397
397
|
modelValue: hsl.value.s,
|
|
398
398
|
"onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => hsl.value.s = $event),
|
|
399
399
|
autocomplete: "off",
|
|
@@ -404,12 +404,12 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
404
404
|
onBeforeinput: validateInput,
|
|
405
405
|
onFocusout: _cache[26] || (_cache[26] = (e) => inputChangeHSL(e, "s")),
|
|
406
406
|
onKeydown: [
|
|
407
|
-
_cache[27] || (_cache[27] =
|
|
408
|
-
_cache[28] || (_cache[28] =
|
|
409
|
-
_cache[29] || (_cache[29] =
|
|
407
|
+
_cache[27] || (_cache[27] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSL(e, "s"), ["prevent"]), ["enter"])),
|
|
408
|
+
_cache[28] || (_cache[28] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
|
|
409
|
+
_cache[29] || (_cache[29] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
|
|
410
410
|
]
|
|
411
411
|
}, null, 8, ["modelValue"]),
|
|
412
|
-
|
|
412
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
413
413
|
modelValue: hsl.value.l,
|
|
414
414
|
"onUpdate:modelValue": _cache[30] || (_cache[30] = ($event) => hsl.value.l = $event),
|
|
415
415
|
autocomplete: "off",
|
|
@@ -420,13 +420,13 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
420
420
|
onBeforeinput: validateInput,
|
|
421
421
|
onFocusout: _cache[31] || (_cache[31] = (e) => inputChangeHSL(e, "l")),
|
|
422
422
|
onKeydown: [
|
|
423
|
-
_cache[32] || (_cache[32] =
|
|
424
|
-
_cache[33] || (_cache[33] =
|
|
425
|
-
_cache[34] || (_cache[34] =
|
|
423
|
+
_cache[32] || (_cache[32] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSL(e, "l"), ["prevent"]), ["enter"])),
|
|
424
|
+
_cache[33] || (_cache[33] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["up"])),
|
|
425
|
+
_cache[34] || (_cache[34] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "l"), ["prevent", "stop"]), ["down"]))
|
|
426
426
|
]
|
|
427
427
|
}, null, 8, ["modelValue"])
|
|
428
|
-
], 64)) : currentColorFormat.value === "hsb" ? (
|
|
429
|
-
|
|
428
|
+
], 64)) : currentColorFormat.value === "hsb" ? (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, { key: 3 }, [
|
|
429
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
430
430
|
modelValue: hsv.value.h,
|
|
431
431
|
"onUpdate:modelValue": _cache[35] || (_cache[35] = ($event) => hsv.value.h = $event),
|
|
432
432
|
autocomplete: "off",
|
|
@@ -437,12 +437,12 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
437
437
|
onBeforeinput: validateInput,
|
|
438
438
|
onFocusout: _cache[36] || (_cache[36] = (e) => inputChangeHSB(e, "h")),
|
|
439
439
|
onKeydown: [
|
|
440
|
-
_cache[37] || (_cache[37] =
|
|
441
|
-
_cache[38] || (_cache[38] =
|
|
442
|
-
_cache[39] || (_cache[39] =
|
|
440
|
+
_cache[37] || (_cache[37] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSB(e, "h"), ["prevent"]), ["enter"])),
|
|
441
|
+
_cache[38] || (_cache[38] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["up"])),
|
|
442
|
+
_cache[39] || (_cache[39] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "h"), ["prevent", "stop"]), ["down"]))
|
|
443
443
|
]
|
|
444
444
|
}, null, 8, ["modelValue"]),
|
|
445
|
-
|
|
445
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
446
446
|
modelValue: hsv.value.s,
|
|
447
447
|
"onUpdate:modelValue": _cache[40] || (_cache[40] = ($event) => hsv.value.s = $event),
|
|
448
448
|
autocomplete: "off",
|
|
@@ -453,12 +453,12 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
453
453
|
onBeforeinput: validateInput,
|
|
454
454
|
onFocusout: _cache[41] || (_cache[41] = (e) => inputChangeHSB(e, "s")),
|
|
455
455
|
onKeydown: [
|
|
456
|
-
_cache[42] || (_cache[42] =
|
|
457
|
-
_cache[43] || (_cache[43] =
|
|
458
|
-
_cache[44] || (_cache[44] =
|
|
456
|
+
_cache[42] || (_cache[42] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSB(e, "s"), ["prevent"]), ["enter"])),
|
|
457
|
+
_cache[43] || (_cache[43] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["up"])),
|
|
458
|
+
_cache[44] || (_cache[44] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "s"), ["prevent", "stop"]), ["down"]))
|
|
459
459
|
]
|
|
460
460
|
}, null, 8, ["modelValue"]),
|
|
461
|
-
|
|
461
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
462
462
|
modelValue: hsv.value.v,
|
|
463
463
|
"onUpdate:modelValue": _cache[45] || (_cache[45] = ($event) => hsv.value.v = $event),
|
|
464
464
|
autocomplete: "off",
|
|
@@ -469,37 +469,37 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
469
469
|
onBeforeinput: validateInput,
|
|
470
470
|
onFocusout: _cache[46] || (_cache[46] = (e) => inputChangeHSB(e, "v")),
|
|
471
471
|
onKeydown: [
|
|
472
|
-
_cache[47] || (_cache[47] =
|
|
473
|
-
_cache[48] || (_cache[48] =
|
|
474
|
-
_cache[49] || (_cache[49] =
|
|
472
|
+
_cache[47] || (_cache[47] = Mo.withKeys(Mo.withModifiers((e) => inputChangeHSB(e, "v"), ["prevent"]), ["enter"])),
|
|
473
|
+
_cache[48] || (_cache[48] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["up"])),
|
|
474
|
+
_cache[49] || (_cache[49] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "v"), ["prevent", "stop"]), ["down"]))
|
|
475
475
|
]
|
|
476
476
|
}, null, 8, ["modelValue"])
|
|
477
|
-
], 64)) :
|
|
478
|
-
|
|
477
|
+
], 64)) : Mo.createCommentVNode("", true),
|
|
478
|
+
Mo.createVNode(Mo.unref(textInput), {
|
|
479
479
|
autocomplete: "off",
|
|
480
480
|
name: "alpha",
|
|
481
481
|
placeholder: "100",
|
|
482
482
|
type: "text",
|
|
483
483
|
class: "color-input",
|
|
484
484
|
size: "xs",
|
|
485
|
-
value: `${(
|
|
485
|
+
value: `${(Mo.unref(tinyColorRef).getAlpha() * 100).toFixed()}%`,
|
|
486
486
|
onBeforeinput: validateInput,
|
|
487
487
|
onFocusout: inputChangeAlpha,
|
|
488
488
|
onKeydown: [
|
|
489
|
-
|
|
490
|
-
_cache[50] || (_cache[50] =
|
|
491
|
-
_cache[51] || (_cache[51] =
|
|
489
|
+
Mo.withKeys(Mo.withModifiers(inputChangeAlpha, ["prevent", "stop"]), ["enter"]),
|
|
490
|
+
_cache[50] || (_cache[50] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["up"])),
|
|
491
|
+
_cache[51] || (_cache[51] = Mo.withKeys(Mo.withModifiers((e) => handleColorValueKeyDown(e, "a"), ["prevent", "stop"]), ["down"]))
|
|
492
492
|
]
|
|
493
493
|
}, null, 8, ["value", "onKeydown"])
|
|
494
494
|
])
|
|
495
495
|
])
|
|
496
496
|
])
|
|
497
497
|
]),
|
|
498
|
-
|
|
499
|
-
_ctx.$slots.swatches ?
|
|
498
|
+
Mo.createElementVNode("div", _hoisted_6, [
|
|
499
|
+
_ctx.$slots.swatches ? Mo.renderSlot(_ctx.$slots, "swatches", { key: 0 }, void 0, true) : (Mo.openBlock(), Mo.createBlock(colorSwatch, {
|
|
500
500
|
key: 1,
|
|
501
|
-
modelValue:
|
|
502
|
-
"onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) =>
|
|
501
|
+
modelValue: Mo.unref(tinyColorRef),
|
|
502
|
+
"onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) => Mo.isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
|
|
503
503
|
label: _ctx.colorSwatchLabel,
|
|
504
504
|
hue: hueRef.value
|
|
505
505
|
}, null, 8, ["modelValue", "label", "hue"]))
|
package/dist/cjs/color-swatch.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const
|
|
2
|
+
const Mo = require("vue");
|
|
3
3
|
const color = require("./color.js");
|
|
4
4
|
const tinycolor = require("./chunks/tinycolor.js");
|
|
5
5
|
const useColorModel = require("./use-color-model.js");
|
|
@@ -9,7 +9,7 @@ const _hoisted_1 = { class: "celeste-color-swatch" };
|
|
|
9
9
|
const _hoisted_2 = { class: "swatch-label" };
|
|
10
10
|
const _hoisted_3 = { class: "color-palette" };
|
|
11
11
|
const _hoisted_4 = ["aria-selected", "title", "aria-label", "onClick", "onKeydown"];
|
|
12
|
-
const _sfc_main = /* @__PURE__ */
|
|
12
|
+
const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
13
13
|
__name: "color-swatch",
|
|
14
14
|
props: {
|
|
15
15
|
modelValue: {},
|
|
@@ -19,13 +19,13 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
19
19
|
},
|
|
20
20
|
emits: ["update:modelValue"],
|
|
21
21
|
setup(__props, { emit: __emit }) {
|
|
22
|
-
|
|
22
|
+
Mo.useCssVars((_ctx) => ({
|
|
23
23
|
"608e7b2a": activeSwatchColorBg.value
|
|
24
24
|
}));
|
|
25
25
|
const props = __props;
|
|
26
26
|
const emit = __emit;
|
|
27
27
|
const tinyColorRef = useColorModel.defineColorModel(props, emit);
|
|
28
|
-
const activeSwatchColorBg =
|
|
28
|
+
const activeSwatchColorBg = Mo.computed(() => {
|
|
29
29
|
return `0 0 0 2px var(--color-bg-white-0), 0 0 0 4px ${tinyColorRef.value.toRgbString()}`;
|
|
30
30
|
});
|
|
31
31
|
function handleSwatchColorClick(newColor) {
|
|
@@ -35,21 +35,21 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
35
35
|
return tinyColorRef.value.toHex8String().toLocaleLowerCase() === tinycolor.tinycolor(color2).toHex8String().toLocaleLowerCase();
|
|
36
36
|
}
|
|
37
37
|
return (_ctx, _cache) => {
|
|
38
|
-
return
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
(
|
|
42
|
-
return
|
|
38
|
+
return Mo.openBlock(), Mo.createElementBlock("div", _hoisted_1, [
|
|
39
|
+
Mo.createElementVNode("span", _hoisted_2, Mo.toDisplayString(_ctx.label), 1),
|
|
40
|
+
Mo.createElementVNode("div", _hoisted_3, [
|
|
41
|
+
(Mo.openBlock(true), Mo.createElementBlock(Mo.Fragment, null, Mo.renderList(_ctx.swatch, (swatchColor) => {
|
|
42
|
+
return Mo.openBlock(), Mo.createElementBlock("div", {
|
|
43
43
|
key: swatchColor,
|
|
44
44
|
class: "palette-color",
|
|
45
|
-
style:
|
|
45
|
+
style: Mo.normalizeStyle({ background: swatchColor }),
|
|
46
46
|
"aria-selected": isSwatchColorSelected(swatchColor.toLowerCase()),
|
|
47
47
|
title: swatchColor,
|
|
48
48
|
"aria-label": `Color:${swatchColor}`,
|
|
49
49
|
role: "option",
|
|
50
50
|
tabindex: "0",
|
|
51
51
|
onClick: ($event) => handleSwatchColorClick(swatchColor),
|
|
52
|
-
onKeydown:
|
|
52
|
+
onKeydown: Mo.withKeys(($event) => handleSwatchColorClick(swatchColor), ["space"])
|
|
53
53
|
}, null, 44, _hoisted_4);
|
|
54
54
|
}), 128))
|
|
55
55
|
])
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const
|
|
2
|
+
const Mo = require("vue");
|
|
3
3
|
const clsx = require("./chunks/clsx.js");
|
|
4
4
|
const index = require("./chunks/index.js");
|
|
5
5
|
;/* empty css */
|
|
6
6
|
const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
|
|
7
|
-
const _sfc_main = /* @__PURE__ */
|
|
7
|
+
const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
8
8
|
__name: "combobox-empty",
|
|
9
9
|
props: {
|
|
10
10
|
asChild: { type: Boolean },
|
|
@@ -13,16 +13,16 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
13
13
|
},
|
|
14
14
|
setup(__props) {
|
|
15
15
|
const props = __props;
|
|
16
|
-
const delegatedProps =
|
|
16
|
+
const delegatedProps = Mo.computed(() => {
|
|
17
17
|
const { class: _, ...delegated } = props;
|
|
18
18
|
return delegated;
|
|
19
19
|
});
|
|
20
20
|
return (_ctx, _cache) => {
|
|
21
|
-
return
|
|
22
|
-
class:
|
|
21
|
+
return Mo.openBlock(), Mo.createBlock(Mo.unref(index.Zv), Mo.mergeProps(delegatedProps.value, {
|
|
22
|
+
class: Mo.unref(clsx.clsx)("celeste-dropdown-empty-list", props.class)
|
|
23
23
|
}), {
|
|
24
|
-
default:
|
|
25
|
-
|
|
24
|
+
default: Mo.withCtx(() => [
|
|
25
|
+
Mo.renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
26
26
|
]),
|
|
27
27
|
_: 3
|
|
28
28
|
}, 16, ["class"]);
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const
|
|
2
|
+
const Mo = require("vue");
|
|
3
3
|
const clsx = require("./chunks/clsx.js");
|
|
4
4
|
const index = require("./chunks/index.js");
|
|
5
5
|
;/* empty css */
|
|
6
6
|
const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
|
|
7
|
-
const _sfc_main = /* @__PURE__ */
|
|
7
|
+
const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
8
8
|
__name: "combobox-group",
|
|
9
9
|
props: {
|
|
10
10
|
asChild: { type: Boolean },
|
|
@@ -14,25 +14,25 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
14
14
|
},
|
|
15
15
|
setup(__props) {
|
|
16
16
|
const props = __props;
|
|
17
|
-
const delegatedProps =
|
|
17
|
+
const delegatedProps = Mo.computed(() => {
|
|
18
18
|
const { class: _, ...delegated } = props;
|
|
19
19
|
return delegated;
|
|
20
20
|
});
|
|
21
21
|
return (_ctx, _cache) => {
|
|
22
|
-
return
|
|
23
|
-
class:
|
|
22
|
+
return Mo.openBlock(), Mo.createBlock(Mo.unref(index.qv), Mo.mergeProps(delegatedProps.value, {
|
|
23
|
+
class: Mo.unref(clsx.clsx)(props.class, "celeste-dropdown-items-group")
|
|
24
24
|
}), {
|
|
25
|
-
default:
|
|
26
|
-
_ctx.heading ? (
|
|
25
|
+
default: Mo.withCtx(() => [
|
|
26
|
+
_ctx.heading ? (Mo.openBlock(), Mo.createBlock(Mo.unref(index.Yv), {
|
|
27
27
|
key: 0,
|
|
28
28
|
class: ""
|
|
29
29
|
}, {
|
|
30
|
-
default:
|
|
31
|
-
|
|
30
|
+
default: Mo.withCtx(() => [
|
|
31
|
+
Mo.createTextVNode(Mo.toDisplayString(_ctx.heading), 1)
|
|
32
32
|
]),
|
|
33
33
|
_: 1
|
|
34
|
-
})) :
|
|
35
|
-
|
|
34
|
+
})) : Mo.createCommentVNode("", true),
|
|
35
|
+
Mo.renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
36
36
|
]),
|
|
37
37
|
_: 3
|
|
38
38
|
}, 16, ["class"]);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const
|
|
2
|
+
const Mo = require("vue");
|
|
3
3
|
const clsx = require("./chunks/clsx.js");
|
|
4
4
|
const index = require("./chunks/index.js");
|
|
5
5
|
const textInput = require("./text-input.js");
|
|
6
6
|
;/* empty css */
|
|
7
7
|
const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
|
|
8
|
-
const _sfc_main = /* @__PURE__ */
|
|
8
|
+
const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
9
9
|
__name: "combobox-input",
|
|
10
|
-
props: /* @__PURE__ */
|
|
10
|
+
props: /* @__PURE__ */ Mo.mergeModels({
|
|
11
11
|
type: {},
|
|
12
12
|
disabled: { type: Boolean },
|
|
13
13
|
autoFocus: { type: Boolean },
|
|
@@ -23,12 +23,12 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
23
23
|
emits: ["update:modelValue"],
|
|
24
24
|
setup(__props) {
|
|
25
25
|
const props = __props;
|
|
26
|
-
const model =
|
|
27
|
-
const comboboxInputProps =
|
|
26
|
+
const model = Mo.useModel(__props, "modelValue");
|
|
27
|
+
const comboboxInputProps = Mo.computed(() => {
|
|
28
28
|
const { class: _class, textInputProps: _textInputProps, ...rest } = props;
|
|
29
29
|
return rest;
|
|
30
30
|
});
|
|
31
|
-
const textInputProps =
|
|
31
|
+
const textInputProps = Mo.computed(() => {
|
|
32
32
|
return {
|
|
33
33
|
type: "search",
|
|
34
34
|
size: "sm",
|
|
@@ -37,20 +37,20 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
|
|
|
37
37
|
};
|
|
38
38
|
});
|
|
39
39
|
return (_ctx, _cache) => {
|
|
40
|
-
return
|
|
41
|
-
class:
|
|
40
|
+
return Mo.openBlock(), Mo.createBlock(Mo.unref(index.Wv), Mo.mergeProps(comboboxInputProps.value, {
|
|
41
|
+
class: Mo.unref(clsx.clsx)("celeste-dropdown-input", props.class),
|
|
42
42
|
readonly: !props.searchable,
|
|
43
43
|
as: "div"
|
|
44
44
|
}), {
|
|
45
|
-
default:
|
|
46
|
-
|
|
45
|
+
default: Mo.withCtx(() => [
|
|
46
|
+
Mo.createVNode(textInput, Mo.mergeProps(textInputProps.value, {
|
|
47
47
|
modelValue: model.value,
|
|
48
48
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
|
|
49
49
|
readonly: !props.searchable,
|
|
50
50
|
style: !props.searchable ? "opacity: 0; height: 1px; padding: 0; border: none;" : ""
|
|
51
51
|
}), {
|
|
52
|
-
leadingIcon:
|
|
53
|
-
|
|
52
|
+
leadingIcon: Mo.withCtx(() => _cache[1] || (_cache[1] = [
|
|
53
|
+
Mo.createElementVNode("i", { "i-celeste-search-2-line": "" }, null, -1)
|
|
54
54
|
])),
|
|
55
55
|
_: 1
|
|
56
56
|
}, 16, ["modelValue", "readonly", "style"])
|