@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.
- package/dist/celeste.css +874 -1348
- 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 +15 -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/combobox/combobox-list.d.ts +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-sub-content.d.ts +2 -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 +1 -1
- package/dist/components/popover/popover-content.d.ts +2 -2
- 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 +66 -60
- 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 +1 -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
|
@@ -11,6 +11,11 @@ const socialButton = require("./social-button.js");
|
|
|
11
11
|
const checkboxCard = require("./checkbox-card.js");
|
|
12
12
|
const checkboxLabel = require("./checkbox-label.js");
|
|
13
13
|
const checkbox_vue_vue_type_style_index_0_lang = require("./chunks/checkbox.vue_vue_type_style_index_0_lang.js");
|
|
14
|
+
const alphaSlider_vue_vue_type_script_setup_true_lang = require("./chunks/alpha-slider.js");
|
|
15
|
+
const colorArea = require("./color-area.js");
|
|
16
|
+
const colorPicker = require("./color-picker.js");
|
|
17
|
+
const colorSwatch = require("./color-swatch.js");
|
|
18
|
+
const hueSlider = require("./hue-slider.js");
|
|
14
19
|
const comboboxAnchor_vue_vue_type_script_setup_true_lang = require("./chunks/combobox-anchor.js");
|
|
15
20
|
const comboboxEmpty = require("./combobox-empty.js");
|
|
16
21
|
const comboboxGroup = require("./combobox-group.js");
|
|
@@ -26,9 +31,6 @@ const counterInput_vue_vue_type_style_index_0_lang = require("./chunks/counter-i
|
|
|
26
31
|
const digitInputGroup = require("./digit-input-group.js");
|
|
27
32
|
const digitInputSlot = require("./digit-input-slot.js");
|
|
28
33
|
const digitInput = require("./digit-input.js");
|
|
29
|
-
const contextMenuItem = require("./context-menu-item.js");
|
|
30
|
-
const dropdownItem = require("./dropdown-item.js");
|
|
31
|
-
const dropdown = require("./dropdown.js");
|
|
32
34
|
const dropdownMenuContent = require("./dropdown-menu-content.js");
|
|
33
35
|
const dropdownMenuGroup = require("./dropdown-menu-group.js");
|
|
34
36
|
const dropdownMenuItem = require("./dropdown-menu-item.js");
|
|
@@ -90,11 +92,15 @@ const Mo = require("vue");
|
|
|
90
92
|
const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
91
93
|
__proto__: null,
|
|
92
94
|
Alert: alert,
|
|
95
|
+
AlphaSlider: alphaSlider_vue_vue_type_script_setup_true_lang._sfc_main,
|
|
93
96
|
Badge: badge,
|
|
94
97
|
Button: button,
|
|
95
98
|
Checkbox: checkbox_vue_vue_type_style_index_0_lang._sfc_main,
|
|
96
99
|
CheckboxCard: checkboxCard,
|
|
97
100
|
CheckboxLabel: checkboxLabel,
|
|
101
|
+
ColorArea: colorArea,
|
|
102
|
+
ColorPicker: colorPicker,
|
|
103
|
+
ColorSwatch: colorSwatch,
|
|
98
104
|
Combobox: combobox,
|
|
99
105
|
ComboboxAnchor: comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main,
|
|
100
106
|
ComboboxEmpty: comboboxEmpty,
|
|
@@ -107,13 +113,10 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
|
|
|
107
113
|
ComboboxTrigger: comboboxTrigger,
|
|
108
114
|
CompactButton: compactButton,
|
|
109
115
|
ContentDivider: contentDivider_vue_vue_type_style_index_0_lang._sfc_main,
|
|
110
|
-
ContextMenuItem: contextMenuItem,
|
|
111
116
|
CounterInput: counterInput_vue_vue_type_style_index_0_lang._sfc_main,
|
|
112
117
|
DigitInput: digitInput,
|
|
113
118
|
DigitInputGroup: digitInputGroup,
|
|
114
119
|
DigitInputSlot: digitInputSlot,
|
|
115
|
-
Dropdown: dropdown,
|
|
116
|
-
DropdownItem: dropdownItem,
|
|
117
120
|
DropdownMenu: dropdownMenu,
|
|
118
121
|
DropdownMenuContent: dropdownMenuContent,
|
|
119
122
|
DropdownMenuGroup: dropdownMenuGroup,
|
|
@@ -126,6 +129,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
|
|
|
126
129
|
DropdownMenuTrigger: dropdownMenuTrigger,
|
|
127
130
|
FancyButton: fancyButton,
|
|
128
131
|
HintText: hintText,
|
|
132
|
+
HueSlider: hueSlider,
|
|
129
133
|
Label: label,
|
|
130
134
|
LinkButton: linkButton,
|
|
131
135
|
Modal: modal_vue_vue_type_script_setup_true_lang._sfc_main,
|
|
@@ -241,6 +245,11 @@ exports.SocialButton = socialButton;
|
|
|
241
245
|
exports.CheckboxCard = checkboxCard;
|
|
242
246
|
exports.CheckboxLabel = checkboxLabel;
|
|
243
247
|
exports.Checkbox = checkbox_vue_vue_type_style_index_0_lang._sfc_main;
|
|
248
|
+
exports.AlphaSlider = alphaSlider_vue_vue_type_script_setup_true_lang._sfc_main;
|
|
249
|
+
exports.ColorArea = colorArea;
|
|
250
|
+
exports.ColorPicker = colorPicker;
|
|
251
|
+
exports.ColorSwatch = colorSwatch;
|
|
252
|
+
exports.HueSlider = hueSlider;
|
|
244
253
|
exports.ComboboxAnchor = comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main;
|
|
245
254
|
exports.ComboboxEmpty = comboboxEmpty;
|
|
246
255
|
exports.ComboboxGroup = comboboxGroup;
|
|
@@ -256,9 +265,6 @@ exports.CounterInput = counterInput_vue_vue_type_style_index_0_lang._sfc_main;
|
|
|
256
265
|
exports.DigitInputGroup = digitInputGroup;
|
|
257
266
|
exports.DigitInputSlot = digitInputSlot;
|
|
258
267
|
exports.DigitInput = digitInput;
|
|
259
|
-
exports.ContextMenuItem = contextMenuItem;
|
|
260
|
-
exports.DropdownItem = dropdownItem;
|
|
261
|
-
exports.Dropdown = dropdown;
|
|
262
268
|
exports.DropdownMenuContent = dropdownMenuContent;
|
|
263
269
|
exports.DropdownMenuGroup = dropdownMenuGroup;
|
|
264
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;
|
|
@@ -23,9 +23,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
23
23
|
onFocusOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any) | undefined;
|
|
24
24
|
onInteractOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent | import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any) | undefined;
|
|
25
25
|
}>, {
|
|
26
|
-
position: "inline" | "popper";
|
|
27
26
|
sideOffset: number;
|
|
28
27
|
align: import('node_modules/radix-vue/dist/Popper').Align;
|
|
28
|
+
position: "inline" | "popper";
|
|
29
29
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
30
30
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
31
31
|
export default _default;
|
|
@@ -17,17 +17,17 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
17
17
|
pointerDownOutside: (event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent) => any;
|
|
18
18
|
focusOutside: (event: import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any;
|
|
19
19
|
interactOutside: (event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent | import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any;
|
|
20
|
-
entryFocus: (event: Event) => any;
|
|
21
20
|
openAutoFocus: (event: Event) => any;
|
|
22
21
|
closeAutoFocus: (event: Event) => any;
|
|
22
|
+
entryFocus: (event: Event) => any;
|
|
23
23
|
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
24
24
|
onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
|
|
25
25
|
onPointerDownOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent) => any) | undefined;
|
|
26
26
|
onFocusOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any) | undefined;
|
|
27
27
|
onInteractOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent | import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any) | undefined;
|
|
28
|
-
onEntryFocus?: ((event: Event) => any) | undefined;
|
|
29
28
|
onOpenAutoFocus?: ((event: Event) => any) | undefined;
|
|
30
29
|
onCloseAutoFocus?: ((event: Event) => any) | undefined;
|
|
30
|
+
onEntryFocus?: ((event: Event) => any) | undefined;
|
|
31
31
|
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
32
32
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
33
33
|
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;
|
|
@@ -2,11 +2,11 @@ export * from './alert';
|
|
|
2
2
|
export * from './badge';
|
|
3
3
|
export * from './button';
|
|
4
4
|
export * from './checkbox';
|
|
5
|
+
export * from './color-picker';
|
|
5
6
|
export * from './combobox';
|
|
6
7
|
export * from './content-divider';
|
|
7
8
|
export * from './counter-input';
|
|
8
9
|
export * from './digit-input';
|
|
9
|
-
export * from './dropdown';
|
|
10
10
|
export * from './dropdown-menu';
|
|
11
11
|
export * from './hint-text';
|
|
12
12
|
export * from './label';
|
|
@@ -28,9 +28,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Po
|
|
|
28
28
|
onOpenAutoFocus?: ((event: Event) => any) | undefined;
|
|
29
29
|
onCloseAutoFocus?: ((event: Event) => any) | undefined;
|
|
30
30
|
}>, {
|
|
31
|
-
side: "
|
|
32
|
-
dismissible: boolean;
|
|
31
|
+
side: "left" | "right" | "bottom" | "top";
|
|
33
32
|
showTail: boolean;
|
|
33
|
+
dismissible: boolean;
|
|
34
34
|
iconSize: "sm" | "md" | "lg" | "xl" | "xxl";
|
|
35
35
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
|
|
36
36
|
default?(_: {}): any;
|
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
|
};
|