@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.
- package/dist/celeste.css +85 -559
- package/dist/cjs/chunks/index2.js +28 -0
- package/dist/cjs/color-picker.js +6 -4
- package/dist/cjs/color-swatch.js +3 -3
- package/dist/cjs/file-upload-area.js +280 -0
- package/dist/cjs/index.js +0 -9
- package/dist/components/color-picker/color-picker.d.ts +2 -0
- package/dist/components/color-picker/color-swatch.d.ts +1 -2
- package/dist/components/file-upload/file-upload-area.d.ts +43 -0
- package/dist/components/file-upload/index.d.ts +2 -0
- package/dist/components/index.d.ts +0 -1
- package/dist/es/chunks/index2.js +30 -2
- package/dist/es/color-picker.js +6 -4
- package/dist/es/color-swatch.js +3 -3
- package/dist/es/file-upload-area.js +281 -0
- package/dist/es/index.js +0 -9
- package/package.json +9 -9
- package/src/components/color-picker/color-picker.vue +4 -0
- package/src/components/color-picker/color-swatch.vue +1 -2
- package/src/components/file-upload/file-upload-area.vue +229 -0
- package/src/components/file-upload/index.ts +2 -0
- package/src/components/file-upload/stories/file-upload-area.stories.ts +76 -0
- package/src/components/index.ts +0 -1
- package/dist/cjs/context-menu-item.js +0 -134
- package/dist/cjs/dropdown-item.js +0 -99
- package/dist/cjs/dropdown.js +0 -290
- package/dist/components/dropdown/context-menu-item.d.ts +0 -39
- package/dist/components/dropdown/dropdown-item.d.ts +0 -30
- package/dist/components/dropdown/dropdown.d.ts +0 -55
- package/dist/components/dropdown/index.d.ts +0 -6
- package/dist/es/context-menu-item.js +0 -135
- package/dist/es/dropdown-item.js +0 -100
- package/dist/es/dropdown.js +0 -291
- package/src/components/dropdown/context-menu-item.vue +0 -317
- package/src/components/dropdown/dropdown-item.vue +0 -184
- package/src/components/dropdown/dropdown.vue +0 -650
- package/src/components/dropdown/index.ts +0 -8
- package/src/components/dropdown/stories/context-menu-item.stories.ts +0 -51
- package/src/components/dropdown/stories/dropdown-item.stories.ts +0 -33
- package/src/components/dropdown/stories/dropdown.stories.ts +0 -53
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const Mo = require("vue");
|
|
3
|
+
function tryOnScopeDispose(fn) {
|
|
4
|
+
if (Mo.getCurrentScope()) {
|
|
5
|
+
Mo.onScopeDispose(fn);
|
|
6
|
+
return true;
|
|
7
|
+
}
|
|
8
|
+
return false;
|
|
9
|
+
}
|
|
3
10
|
function toReactive(objectRef) {
|
|
4
11
|
if (!Mo.isRef(objectRef))
|
|
5
12
|
return Mo.reactive(objectRef);
|
|
@@ -40,5 +47,26 @@ function reactiveOmit(obj, ...keys) {
|
|
|
40
47
|
const predicate = flatKeys[0];
|
|
41
48
|
return reactiveComputed(() => typeof predicate === "function" ? Object.fromEntries(Object.entries(Mo.toRefs(obj)).filter(([k, v]) => !predicate(Mo.toValue(v), k))) : Object.fromEntries(Object.entries(Mo.toRefs(obj)).filter((e) => !flatKeys.includes(e[0]))));
|
|
42
49
|
}
|
|
50
|
+
const isClient = typeof window !== "undefined" && typeof document !== "undefined";
|
|
43
51
|
typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
|
|
52
|
+
const toString = Object.prototype.toString;
|
|
53
|
+
const isObject = (val) => toString.call(val) === "[object Object]";
|
|
54
|
+
function toArray(value) {
|
|
55
|
+
return Array.isArray(value) ? value : [value];
|
|
56
|
+
}
|
|
57
|
+
function watchImmediate(source, cb, options) {
|
|
58
|
+
return Mo.watch(
|
|
59
|
+
source,
|
|
60
|
+
cb,
|
|
61
|
+
{
|
|
62
|
+
...options,
|
|
63
|
+
immediate: true
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
exports.isClient = isClient;
|
|
68
|
+
exports.isObject = isObject;
|
|
44
69
|
exports.reactiveOmit = reactiveOmit;
|
|
70
|
+
exports.toArray = toArray;
|
|
71
|
+
exports.tryOnScopeDispose = tryOnScopeDispose;
|
|
72
|
+
exports.watchImmediate = watchImmediate;
|
package/dist/cjs/color-picker.js
CHANGED
|
@@ -41,12 +41,13 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
41
41
|
label: { default: "Pick Color" },
|
|
42
42
|
class: {},
|
|
43
43
|
formats: { default: () => ["hex", "rgb", "hsl", "hsb"] },
|
|
44
|
-
defaultFormat: {}
|
|
44
|
+
defaultFormat: {},
|
|
45
|
+
colorSwatchLabel: { default: "Recommended Colors" }
|
|
45
46
|
},
|
|
46
47
|
emits: ["update:modelValue"],
|
|
47
48
|
setup(__props, { emit: __emit }) {
|
|
48
49
|
Mo.useCssVars((_ctx) => ({
|
|
49
|
-
"
|
|
50
|
+
"6559ad05": _ctx.modelValue
|
|
50
51
|
}));
|
|
51
52
|
const props = __props;
|
|
52
53
|
const emit = __emit;
|
|
@@ -497,8 +498,9 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
497
498
|
key: 1,
|
|
498
499
|
modelValue: Mo.unref(tinyColorRef),
|
|
499
500
|
"onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) => Mo.isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
|
|
501
|
+
label: _ctx.colorSwatchLabel,
|
|
500
502
|
hue: hueRef.value
|
|
501
|
-
}, null, 8, ["modelValue", "hue"]))
|
|
503
|
+
}, null, 8, ["modelValue", "label", "hue"]))
|
|
502
504
|
])
|
|
503
505
|
], 16)
|
|
504
506
|
]),
|
|
@@ -510,5 +512,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
510
512
|
};
|
|
511
513
|
}
|
|
512
514
|
});
|
|
513
|
-
const colorPicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
515
|
+
const colorPicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-8814818c"]]);
|
|
514
516
|
module.exports = colorPicker;
|
package/dist/cjs/color-swatch.js
CHANGED
|
@@ -11,14 +11,14 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
11
11
|
__name: "color-swatch",
|
|
12
12
|
props: {
|
|
13
13
|
modelValue: {},
|
|
14
|
-
label: {
|
|
14
|
+
label: {},
|
|
15
15
|
swatch: { default: () => color.DEFAULT_SWATCH },
|
|
16
16
|
defaultColor: {}
|
|
17
17
|
},
|
|
18
18
|
emits: ["update:modelValue"],
|
|
19
19
|
setup(__props, { emit: __emit }) {
|
|
20
20
|
Mo.useCssVars((_ctx) => ({
|
|
21
|
-
"
|
|
21
|
+
"608e7b2a": activeSwatchColorBg.value
|
|
22
22
|
}));
|
|
23
23
|
const props = __props;
|
|
24
24
|
const emit = __emit;
|
|
@@ -55,5 +55,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
|
-
const ColorSwatch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
58
|
+
const ColorSwatch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-e0b25a98"]]);
|
|
59
59
|
module.exports = ColorSwatch;
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const Mo = require("vue");
|
|
3
|
+
const button = require("./button.js");
|
|
4
|
+
const index = require("./chunks/index2.js");
|
|
5
|
+
const clsx = require("./chunks/clsx.js");
|
|
6
|
+
const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
|
|
7
|
+
const defaultWindow = index.isClient ? window : void 0;
|
|
8
|
+
function unrefElement(elRef) {
|
|
9
|
+
var _a;
|
|
10
|
+
const plain = Mo.toValue(elRef);
|
|
11
|
+
return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
|
|
12
|
+
}
|
|
13
|
+
function useEventListener(...args) {
|
|
14
|
+
const cleanups = [];
|
|
15
|
+
const cleanup = () => {
|
|
16
|
+
cleanups.forEach((fn) => fn());
|
|
17
|
+
cleanups.length = 0;
|
|
18
|
+
};
|
|
19
|
+
const register = (el, event, listener, options) => {
|
|
20
|
+
el.addEventListener(event, listener, options);
|
|
21
|
+
return () => el.removeEventListener(event, listener, options);
|
|
22
|
+
};
|
|
23
|
+
const firstParamTargets = Mo.computed(() => {
|
|
24
|
+
const test = index.toArray(Mo.toValue(args[0])).filter((e) => e != null);
|
|
25
|
+
return test.every((e) => typeof e !== "string") ? test : void 0;
|
|
26
|
+
});
|
|
27
|
+
const stopWatch = index.watchImmediate(
|
|
28
|
+
() => {
|
|
29
|
+
var _a, _b;
|
|
30
|
+
return [
|
|
31
|
+
(_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
|
|
32
|
+
index.toArray(Mo.toValue(firstParamTargets.value ? args[1] : args[0])),
|
|
33
|
+
index.toArray(Mo.unref(firstParamTargets.value ? args[2] : args[1])),
|
|
34
|
+
// @ts-expect-error - TypeScript gets the correct types, but somehow still complains
|
|
35
|
+
Mo.toValue(firstParamTargets.value ? args[3] : args[2])
|
|
36
|
+
];
|
|
37
|
+
},
|
|
38
|
+
([raw_targets, raw_events, raw_listeners, raw_options]) => {
|
|
39
|
+
cleanup();
|
|
40
|
+
if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
|
|
41
|
+
return;
|
|
42
|
+
const optionsClone = index.isObject(raw_options) ? { ...raw_options } : raw_options;
|
|
43
|
+
cleanups.push(
|
|
44
|
+
...raw_targets.flatMap(
|
|
45
|
+
(el) => raw_events.flatMap(
|
|
46
|
+
(event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
|
|
47
|
+
)
|
|
48
|
+
)
|
|
49
|
+
);
|
|
50
|
+
},
|
|
51
|
+
{ flush: "post" }
|
|
52
|
+
);
|
|
53
|
+
const stop = () => {
|
|
54
|
+
stopWatch();
|
|
55
|
+
cleanup();
|
|
56
|
+
};
|
|
57
|
+
index.tryOnScopeDispose(cleanup);
|
|
58
|
+
return stop;
|
|
59
|
+
}
|
|
60
|
+
function useDropZone(target, options = {}) {
|
|
61
|
+
var _a, _b;
|
|
62
|
+
const isOverDropZone = Mo.shallowRef(false);
|
|
63
|
+
const files = Mo.shallowRef(null);
|
|
64
|
+
let counter = 0;
|
|
65
|
+
let isValid = true;
|
|
66
|
+
if (index.isClient) {
|
|
67
|
+
const _options = typeof options === "function" ? { onDrop: options } : options;
|
|
68
|
+
const multiple = (_a = _options.multiple) != null ? _a : true;
|
|
69
|
+
const preventDefaultForUnhandled = (_b = _options.preventDefaultForUnhandled) != null ? _b : false;
|
|
70
|
+
const getFiles = (event) => {
|
|
71
|
+
var _a2, _b2;
|
|
72
|
+
const list = Array.from((_b2 = (_a2 = event.dataTransfer) == null ? void 0 : _a2.files) != null ? _b2 : []);
|
|
73
|
+
return list.length === 0 ? null : multiple ? list : [list[0]];
|
|
74
|
+
};
|
|
75
|
+
const checkDataTypes = (types) => {
|
|
76
|
+
const dataTypes = Mo.unref(_options.dataTypes);
|
|
77
|
+
if (typeof dataTypes === "function")
|
|
78
|
+
return dataTypes(types);
|
|
79
|
+
if (!(dataTypes == null ? void 0 : dataTypes.length))
|
|
80
|
+
return true;
|
|
81
|
+
if (types.length === 0)
|
|
82
|
+
return false;
|
|
83
|
+
return types.every(
|
|
84
|
+
(type) => dataTypes.some((allowedType) => type.includes(allowedType))
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
const checkValidity = (items) => {
|
|
88
|
+
const types = Array.from(items != null ? items : []).map((item) => item.type);
|
|
89
|
+
const dataTypesValid = checkDataTypes(types);
|
|
90
|
+
const multipleFilesValid = multiple || items.length <= 1;
|
|
91
|
+
return dataTypesValid && multipleFilesValid;
|
|
92
|
+
};
|
|
93
|
+
const isSafari = () => /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent) && !("chrome" in window);
|
|
94
|
+
const handleDragEvent = (event, eventType) => {
|
|
95
|
+
var _a2, _b2, _c, _d, _e, _f;
|
|
96
|
+
const dataTransferItemList = (_a2 = event.dataTransfer) == null ? void 0 : _a2.items;
|
|
97
|
+
isValid = (_b2 = dataTransferItemList && checkValidity(dataTransferItemList)) != null ? _b2 : false;
|
|
98
|
+
if (preventDefaultForUnhandled) {
|
|
99
|
+
event.preventDefault();
|
|
100
|
+
}
|
|
101
|
+
if (!isSafari() && !isValid) {
|
|
102
|
+
if (event.dataTransfer) {
|
|
103
|
+
event.dataTransfer.dropEffect = "none";
|
|
104
|
+
}
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
event.preventDefault();
|
|
108
|
+
if (event.dataTransfer) {
|
|
109
|
+
event.dataTransfer.dropEffect = "copy";
|
|
110
|
+
}
|
|
111
|
+
const currentFiles = getFiles(event);
|
|
112
|
+
switch (eventType) {
|
|
113
|
+
case "enter":
|
|
114
|
+
counter += 1;
|
|
115
|
+
isOverDropZone.value = true;
|
|
116
|
+
(_c = _options.onEnter) == null ? void 0 : _c.call(_options, null, event);
|
|
117
|
+
break;
|
|
118
|
+
case "over":
|
|
119
|
+
(_d = _options.onOver) == null ? void 0 : _d.call(_options, null, event);
|
|
120
|
+
break;
|
|
121
|
+
case "leave":
|
|
122
|
+
counter -= 1;
|
|
123
|
+
if (counter === 0)
|
|
124
|
+
isOverDropZone.value = false;
|
|
125
|
+
(_e = _options.onLeave) == null ? void 0 : _e.call(_options, null, event);
|
|
126
|
+
break;
|
|
127
|
+
case "drop":
|
|
128
|
+
counter = 0;
|
|
129
|
+
isOverDropZone.value = false;
|
|
130
|
+
if (isValid) {
|
|
131
|
+
files.value = currentFiles;
|
|
132
|
+
(_f = _options.onDrop) == null ? void 0 : _f.call(_options, currentFiles, event);
|
|
133
|
+
}
|
|
134
|
+
break;
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
useEventListener(target, "dragenter", (event) => handleDragEvent(event, "enter"));
|
|
138
|
+
useEventListener(target, "dragover", (event) => handleDragEvent(event, "over"));
|
|
139
|
+
useEventListener(target, "dragleave", (event) => handleDragEvent(event, "leave"));
|
|
140
|
+
useEventListener(target, "drop", (event) => handleDragEvent(event, "drop"));
|
|
141
|
+
}
|
|
142
|
+
return {
|
|
143
|
+
files,
|
|
144
|
+
isOverDropZone
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
const _hoisted_1 = ["data-over-drop-zone"];
|
|
148
|
+
const _hoisted_2 = { class: "celeste-file-upload-area-content" };
|
|
149
|
+
const _hoisted_3 = { class: "celeste-file-upload-area-label" };
|
|
150
|
+
const _hoisted_4 = {
|
|
151
|
+
key: 0,
|
|
152
|
+
class: "celeste-file-upload-area-description"
|
|
153
|
+
};
|
|
154
|
+
const _hoisted_5 = ["multiple", "accept"];
|
|
155
|
+
const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
156
|
+
__name: "file-upload-area",
|
|
157
|
+
props: /* @__PURE__ */ Mo.mergeModels({
|
|
158
|
+
label: { default: "Choose a file or drag & drop it here." },
|
|
159
|
+
description: { default: "JPEG, PNG, PDF, and MP4 formats, up to 50 MB." },
|
|
160
|
+
labelOnDrop: { default: "Drop file to upload" },
|
|
161
|
+
triggerLabel: { default: "Browse Files" },
|
|
162
|
+
maxSize: { default: 2e3 },
|
|
163
|
+
maxFiles: { default: 5 },
|
|
164
|
+
multiple: { type: Boolean, default: false },
|
|
165
|
+
icon: { default: "i-celeste-upload-cloud-2-line" },
|
|
166
|
+
accept: {},
|
|
167
|
+
onTriggerClick: {},
|
|
168
|
+
class: {}
|
|
169
|
+
}, {
|
|
170
|
+
"modelValue": { default: [] },
|
|
171
|
+
"modelModifiers": {}
|
|
172
|
+
}),
|
|
173
|
+
emits: /* @__PURE__ */ Mo.mergeModels(["error"], ["update:modelValue"]),
|
|
174
|
+
setup(__props, { emit: __emit }) {
|
|
175
|
+
const props = __props;
|
|
176
|
+
const emit = __emit;
|
|
177
|
+
const files = Mo.useModel(__props, "modelValue");
|
|
178
|
+
const dropZoneRef = Mo.useTemplateRef("dropZoneRef");
|
|
179
|
+
const { isOverDropZone } = useDropZone(dropZoneRef, { onDrop });
|
|
180
|
+
function handleUpload(e) {
|
|
181
|
+
const input = e.target;
|
|
182
|
+
const newFiles = Array.from(input.files ?? []);
|
|
183
|
+
const filesToProcess = newFiles.slice(0, props.maxFiles);
|
|
184
|
+
const rejectedFiles = newFiles.slice(props.maxFiles);
|
|
185
|
+
if (rejectedFiles.length > 0) {
|
|
186
|
+
emit("error", {
|
|
187
|
+
message: "Files exceeded upload limit",
|
|
188
|
+
type: "count",
|
|
189
|
+
files: rejectedFiles
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
const validFiles = filesToProcess.filter(isValidFile);
|
|
193
|
+
files.value = [...validFiles];
|
|
194
|
+
}
|
|
195
|
+
function onDrop(droppedFiles) {
|
|
196
|
+
if (!(droppedFiles == null ? void 0 : droppedFiles.length))
|
|
197
|
+
return;
|
|
198
|
+
const filesToProcess = droppedFiles.slice(0, props.maxFiles);
|
|
199
|
+
const rejectedFiles = droppedFiles.slice(props.maxFiles);
|
|
200
|
+
if (rejectedFiles.length > 0) {
|
|
201
|
+
emit("error", {
|
|
202
|
+
message: "Files exceeded upload limit",
|
|
203
|
+
type: "count",
|
|
204
|
+
files: rejectedFiles
|
|
205
|
+
});
|
|
206
|
+
}
|
|
207
|
+
const validFiles = filesToProcess.filter(isValidFile);
|
|
208
|
+
files.value = [...validFiles];
|
|
209
|
+
}
|
|
210
|
+
function isValidFile(file) {
|
|
211
|
+
var _a;
|
|
212
|
+
const maxBytes = props.maxSize * 1024;
|
|
213
|
+
if (file.size > maxBytes) {
|
|
214
|
+
emit("error", {
|
|
215
|
+
message: `File too large: ${file.name}`,
|
|
216
|
+
type: "size",
|
|
217
|
+
files: [file]
|
|
218
|
+
});
|
|
219
|
+
return false;
|
|
220
|
+
}
|
|
221
|
+
const acceptableTypes = ((_a = props.accept) == null ? void 0 : _a.split(",")) ?? [];
|
|
222
|
+
if (acceptableTypes.length > 0 && !acceptableTypes.includes(file.type)) {
|
|
223
|
+
emit("error", {
|
|
224
|
+
message: "Unsupported type",
|
|
225
|
+
type: "type",
|
|
226
|
+
files: [file]
|
|
227
|
+
});
|
|
228
|
+
return false;
|
|
229
|
+
}
|
|
230
|
+
return true;
|
|
231
|
+
}
|
|
232
|
+
function handleTriggerClick(e) {
|
|
233
|
+
if (props.onTriggerClick) {
|
|
234
|
+
e.preventDefault();
|
|
235
|
+
props.onTriggerClick();
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
return (_ctx, _cache) => {
|
|
239
|
+
return Mo.openBlock(), Mo.createElementBlock("label", {
|
|
240
|
+
ref_key: "dropZoneRef",
|
|
241
|
+
ref: dropZoneRef,
|
|
242
|
+
class: Mo.normalizeClass(Mo.unref(clsx.clsx)(
|
|
243
|
+
"celeste-file-upload-area",
|
|
244
|
+
props.class
|
|
245
|
+
)),
|
|
246
|
+
"data-over-drop-zone": Mo.unref(isOverDropZone)
|
|
247
|
+
}, [
|
|
248
|
+
Mo.createElementVNode("i", {
|
|
249
|
+
class: Mo.normalizeClass(_ctx.icon)
|
|
250
|
+
}, null, 2),
|
|
251
|
+
Mo.createElementVNode("div", _hoisted_2, [
|
|
252
|
+
Mo.createElementVNode("span", _hoisted_3, Mo.toDisplayString(Mo.unref(isOverDropZone) ? _ctx.labelOnDrop : _ctx.label), 1),
|
|
253
|
+
!Mo.unref(isOverDropZone) ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_4, Mo.toDisplayString(_ctx.description), 1)) : Mo.createCommentVNode("", true)
|
|
254
|
+
]),
|
|
255
|
+
!Mo.unref(isOverDropZone) ? (Mo.openBlock(), Mo.createBlock(button, {
|
|
256
|
+
key: 0,
|
|
257
|
+
"as-child": "",
|
|
258
|
+
intent: "neutral",
|
|
259
|
+
variant: "stroke",
|
|
260
|
+
size: "xs",
|
|
261
|
+
class: "celeste-file-upload-area-trigger",
|
|
262
|
+
onClick: handleTriggerClick
|
|
263
|
+
}, {
|
|
264
|
+
default: Mo.withCtx(() => [
|
|
265
|
+
Mo.createElementVNode("span", null, Mo.toDisplayString(_ctx.triggerLabel), 1)
|
|
266
|
+
]),
|
|
267
|
+
_: 1
|
|
268
|
+
})) : Mo.createCommentVNode("", true),
|
|
269
|
+
Mo.createElementVNode("input", Mo.mergeProps(_ctx.$attrs, {
|
|
270
|
+
type: "file",
|
|
271
|
+
multiple: _ctx.multiple,
|
|
272
|
+
accept: _ctx.accept,
|
|
273
|
+
onChange: handleUpload
|
|
274
|
+
}), null, 16, _hoisted_5)
|
|
275
|
+
], 10, _hoisted_1);
|
|
276
|
+
};
|
|
277
|
+
}
|
|
278
|
+
});
|
|
279
|
+
const fileUploadArea = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6e8a873e"]]);
|
|
280
|
+
module.exports = fileUploadArea;
|
package/dist/cjs/index.js
CHANGED
|
@@ -31,9 +31,6 @@ const counterInput_vue_vue_type_style_index_0_lang = require("./chunks/counter-i
|
|
|
31
31
|
const digitInputGroup = require("./digit-input-group.js");
|
|
32
32
|
const digitInputSlot = require("./digit-input-slot.js");
|
|
33
33
|
const digitInput = require("./digit-input.js");
|
|
34
|
-
const contextMenuItem = require("./context-menu-item.js");
|
|
35
|
-
const dropdownItem = require("./dropdown-item.js");
|
|
36
|
-
const dropdown = require("./dropdown.js");
|
|
37
34
|
const dropdownMenuContent = require("./dropdown-menu-content.js");
|
|
38
35
|
const dropdownMenuGroup = require("./dropdown-menu-group.js");
|
|
39
36
|
const dropdownMenuItem = require("./dropdown-menu-item.js");
|
|
@@ -116,13 +113,10 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
|
|
|
116
113
|
ComboboxTrigger: comboboxTrigger,
|
|
117
114
|
CompactButton: compactButton,
|
|
118
115
|
ContentDivider: contentDivider_vue_vue_type_style_index_0_lang._sfc_main,
|
|
119
|
-
ContextMenuItem: contextMenuItem,
|
|
120
116
|
CounterInput: counterInput_vue_vue_type_style_index_0_lang._sfc_main,
|
|
121
117
|
DigitInput: digitInput,
|
|
122
118
|
DigitInputGroup: digitInputGroup,
|
|
123
119
|
DigitInputSlot: digitInputSlot,
|
|
124
|
-
Dropdown: dropdown,
|
|
125
|
-
DropdownItem: dropdownItem,
|
|
126
120
|
DropdownMenu: dropdownMenu,
|
|
127
121
|
DropdownMenuContent: dropdownMenuContent,
|
|
128
122
|
DropdownMenuGroup: dropdownMenuGroup,
|
|
@@ -271,9 +265,6 @@ exports.CounterInput = counterInput_vue_vue_type_style_index_0_lang._sfc_main;
|
|
|
271
265
|
exports.DigitInputGroup = digitInputGroup;
|
|
272
266
|
exports.DigitInputSlot = digitInputSlot;
|
|
273
267
|
exports.DigitInput = digitInput;
|
|
274
|
-
exports.ContextMenuItem = contextMenuItem;
|
|
275
|
-
exports.DropdownItem = dropdownItem;
|
|
276
|
-
exports.Dropdown = dropdown;
|
|
277
268
|
exports.DropdownMenuContent = dropdownMenuContent;
|
|
278
269
|
exports.DropdownMenuGroup = dropdownMenuGroup;
|
|
279
270
|
exports.DropdownMenuItem = dropdownMenuItem;
|
|
@@ -7,6 +7,7 @@ export interface ColorPickerProps {
|
|
|
7
7
|
class?: HTMLAttributes['class'];
|
|
8
8
|
formats?: ColorFormat[];
|
|
9
9
|
defaultFormat?: ColorFormat;
|
|
10
|
+
colorSwatchLabel?: string;
|
|
10
11
|
}
|
|
11
12
|
export interface ColorPickerEmits {
|
|
12
13
|
'update:modelValue': [value: string];
|
|
@@ -36,6 +37,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Co
|
|
|
36
37
|
label: string;
|
|
37
38
|
modelValue: string | tinycolor.ColorInput;
|
|
38
39
|
formats: ColorFormat[];
|
|
40
|
+
colorSwatchLabel: string;
|
|
39
41
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
|
|
40
42
|
swatches?(_: {}): any;
|
|
41
43
|
}>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { default as tinycolor } from 'tinycolor2';
|
|
2
2
|
export interface ColorSwatchProps {
|
|
3
3
|
modelValue: tinycolor.Instance;
|
|
4
|
-
label
|
|
4
|
+
label: string;
|
|
5
5
|
swatch?: string[];
|
|
6
6
|
defaultColor?: string;
|
|
7
7
|
}
|
|
@@ -13,7 +13,6 @@ declare const _default: import('vue').DefineComponent<ColorSwatchProps, {}, {},
|
|
|
13
13
|
}, string, import('vue').PublicProps, Readonly<ColorSwatchProps> & Readonly<{
|
|
14
14
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
15
15
|
}>, {
|
|
16
|
-
label: string;
|
|
17
16
|
swatch: string[];
|
|
18
17
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
19
18
|
export default _default;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'vue';
|
|
2
|
+
export interface FileUploadAreaProps {
|
|
3
|
+
label?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
labelOnDrop?: string;
|
|
6
|
+
triggerLabel?: string;
|
|
7
|
+
maxSize?: number;
|
|
8
|
+
maxFiles?: number;
|
|
9
|
+
multiple?: boolean;
|
|
10
|
+
icon?: string;
|
|
11
|
+
accept?: InputHTMLAttributes['accept'];
|
|
12
|
+
onTriggerClick?: () => void;
|
|
13
|
+
class?: InputHTMLAttributes['class'];
|
|
14
|
+
}
|
|
15
|
+
export interface FileError {
|
|
16
|
+
message: string;
|
|
17
|
+
type: 'size' | 'type' | 'count';
|
|
18
|
+
files: File[];
|
|
19
|
+
}
|
|
20
|
+
export interface FileUploadAreaEmit {
|
|
21
|
+
error: [error: FileError];
|
|
22
|
+
}
|
|
23
|
+
declare const _default: import('vue').DefineComponent<{
|
|
24
|
+
modelValue?: File[];
|
|
25
|
+
} & FileUploadAreaProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
26
|
+
error: (error: FileError) => any;
|
|
27
|
+
"update:modelValue": (value: File[]) => any;
|
|
28
|
+
}, string, import('vue').PublicProps, Readonly<{
|
|
29
|
+
modelValue?: File[];
|
|
30
|
+
} & FileUploadAreaProps> & Readonly<{
|
|
31
|
+
onError?: ((error: FileError) => any) | undefined;
|
|
32
|
+
"onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
|
|
33
|
+
}>, {
|
|
34
|
+
label: string;
|
|
35
|
+
description: string;
|
|
36
|
+
icon: string;
|
|
37
|
+
multiple: boolean;
|
|
38
|
+
labelOnDrop: string;
|
|
39
|
+
triggerLabel: string;
|
|
40
|
+
maxSize: number;
|
|
41
|
+
maxFiles: number;
|
|
42
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
|
|
43
|
+
export default _default;
|
package/dist/es/chunks/index2.js
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
import { computed, toRefs, toValue, isRef, reactive, unref } from "vue";
|
|
1
|
+
import { computed, toRefs, toValue, getCurrentScope, onScopeDispose, isRef, reactive, unref, watch } from "vue";
|
|
2
|
+
function tryOnScopeDispose(fn) {
|
|
3
|
+
if (getCurrentScope()) {
|
|
4
|
+
onScopeDispose(fn);
|
|
5
|
+
return true;
|
|
6
|
+
}
|
|
7
|
+
return false;
|
|
8
|
+
}
|
|
2
9
|
function toReactive(objectRef) {
|
|
3
10
|
if (!isRef(objectRef))
|
|
4
11
|
return reactive(objectRef);
|
|
@@ -39,7 +46,28 @@ function reactiveOmit(obj, ...keys) {
|
|
|
39
46
|
const predicate = flatKeys[0];
|
|
40
47
|
return reactiveComputed(() => typeof predicate === "function" ? Object.fromEntries(Object.entries(toRefs(obj)).filter(([k, v]) => !predicate(toValue(v), k))) : Object.fromEntries(Object.entries(toRefs(obj)).filter((e) => !flatKeys.includes(e[0]))));
|
|
41
48
|
}
|
|
49
|
+
const isClient = typeof window !== "undefined" && typeof document !== "undefined";
|
|
42
50
|
typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
|
|
51
|
+
const toString = Object.prototype.toString;
|
|
52
|
+
const isObject = (val) => toString.call(val) === "[object Object]";
|
|
53
|
+
function toArray(value) {
|
|
54
|
+
return Array.isArray(value) ? value : [value];
|
|
55
|
+
}
|
|
56
|
+
function watchImmediate(source, cb, options) {
|
|
57
|
+
return watch(
|
|
58
|
+
source,
|
|
59
|
+
cb,
|
|
60
|
+
{
|
|
61
|
+
...options,
|
|
62
|
+
immediate: true
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
}
|
|
43
66
|
export {
|
|
44
|
-
|
|
67
|
+
tryOnScopeDispose as a,
|
|
68
|
+
isObject as b,
|
|
69
|
+
isClient as i,
|
|
70
|
+
reactiveOmit as r,
|
|
71
|
+
toArray as t,
|
|
72
|
+
watchImmediate as w
|
|
45
73
|
};
|
package/dist/es/color-picker.js
CHANGED
|
@@ -40,12 +40,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
40
40
|
label: { default: "Pick Color" },
|
|
41
41
|
class: {},
|
|
42
42
|
formats: { default: () => ["hex", "rgb", "hsl", "hsb"] },
|
|
43
|
-
defaultFormat: {}
|
|
43
|
+
defaultFormat: {},
|
|
44
|
+
colorSwatchLabel: { default: "Recommended Colors" }
|
|
44
45
|
},
|
|
45
46
|
emits: ["update:modelValue"],
|
|
46
47
|
setup(__props, { emit: __emit }) {
|
|
47
48
|
useCssVars((_ctx) => ({
|
|
48
|
-
"
|
|
49
|
+
"6559ad05": _ctx.modelValue
|
|
49
50
|
}));
|
|
50
51
|
const props = __props;
|
|
51
52
|
const emit = __emit;
|
|
@@ -496,8 +497,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
496
497
|
key: 1,
|
|
497
498
|
modelValue: unref(tinyColorRef),
|
|
498
499
|
"onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) => isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
|
|
500
|
+
label: _ctx.colorSwatchLabel,
|
|
499
501
|
hue: hueRef.value
|
|
500
|
-
}, null, 8, ["modelValue", "hue"]))
|
|
502
|
+
}, null, 8, ["modelValue", "label", "hue"]))
|
|
501
503
|
])
|
|
502
504
|
], 16)
|
|
503
505
|
]),
|
|
@@ -509,7 +511,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
509
511
|
};
|
|
510
512
|
}
|
|
511
513
|
});
|
|
512
|
-
const colorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
514
|
+
const colorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8814818c"]]);
|
|
513
515
|
export {
|
|
514
516
|
colorPicker as default
|
|
515
517
|
};
|
package/dist/es/color-swatch.js
CHANGED
|
@@ -10,14 +10,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
10
10
|
__name: "color-swatch",
|
|
11
11
|
props: {
|
|
12
12
|
modelValue: {},
|
|
13
|
-
label: {
|
|
13
|
+
label: {},
|
|
14
14
|
swatch: { default: () => DEFAULT_SWATCH },
|
|
15
15
|
defaultColor: {}
|
|
16
16
|
},
|
|
17
17
|
emits: ["update:modelValue"],
|
|
18
18
|
setup(__props, { emit: __emit }) {
|
|
19
19
|
useCssVars((_ctx) => ({
|
|
20
|
-
"
|
|
20
|
+
"608e7b2a": activeSwatchColorBg.value
|
|
21
21
|
}));
|
|
22
22
|
const props = __props;
|
|
23
23
|
const emit = __emit;
|
|
@@ -54,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
54
54
|
};
|
|
55
55
|
}
|
|
56
56
|
});
|
|
57
|
-
const ColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
57
|
+
const ColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e0b25a98"]]);
|
|
58
58
|
export {
|
|
59
59
|
ColorSwatch as default
|
|
60
60
|
};
|