@hoci/core 0.6.0 → 0.7.0
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/index.cjs +640 -165
- package/dist/index.d.cts +407 -359
- package/dist/index.d.mts +407 -359
- package/dist/index.d.ts +407 -359
- package/dist/index.mjs +624 -159
- package/package.json +2 -3
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,414 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useElementBounding, useElementVisibility, useEventListener, syncRef, isDefined, tryOnScopeDispose, useVModel, onClickOutside } from '@vueuse/core';
|
|
3
|
-
import { defineHookProps, defineHookEmits, defineHookComponent, toReactive, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType, useSharedConfig, getFirstChilld } from '@hoci/shared';
|
|
1
|
+
import { defineHookProps, defineHookEmits, defineHookComponent, elementRef, toReactive, useElement, throttleByRaf, isWindow, useSharedConfig, valuePropType, labelPropType, classPropType, getFirstChilld } from '@hoci/shared';
|
|
4
2
|
export * from '@hoci/shared';
|
|
5
|
-
import {
|
|
3
|
+
import { getCurrentInstance, onMounted, nextTick, getCurrentScope, onScopeDispose, unref, watch, ref, computed, inject, watchPostEffect, provide, reactive, renderSlot } from 'vue';
|
|
4
|
+
import { px, createUnitFormat, cls } from 'tslx';
|
|
5
|
+
|
|
6
|
+
var _a;
|
|
7
|
+
const isClient = typeof window !== "undefined";
|
|
8
|
+
const isDef = (val) => typeof val !== "undefined";
|
|
9
|
+
const isFunction = (val) => typeof val === "function";
|
|
10
|
+
const isString = (val) => typeof val === "string";
|
|
11
|
+
const noop = () => {
|
|
12
|
+
};
|
|
13
|
+
isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
|
|
14
|
+
|
|
15
|
+
function resolveUnref(r) {
|
|
16
|
+
return typeof r === "function" ? r() : unref(r);
|
|
17
|
+
}
|
|
18
|
+
function identity(arg) {
|
|
19
|
+
return arg;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
function tryOnScopeDispose(fn) {
|
|
23
|
+
if (getCurrentScope()) {
|
|
24
|
+
onScopeDispose(fn);
|
|
25
|
+
return true;
|
|
26
|
+
}
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function isDefined(v) {
|
|
31
|
+
return unref(v) != null;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function syncRef(left, right, options = {}) {
|
|
35
|
+
var _a, _b;
|
|
36
|
+
const {
|
|
37
|
+
flush = "sync",
|
|
38
|
+
deep = false,
|
|
39
|
+
immediate = true,
|
|
40
|
+
direction = "both",
|
|
41
|
+
transform = {}
|
|
42
|
+
} = options;
|
|
43
|
+
let watchLeft;
|
|
44
|
+
let watchRight;
|
|
45
|
+
const transformLTR = (_a = transform.ltr) != null ? _a : (v) => v;
|
|
46
|
+
const transformRTL = (_b = transform.rtl) != null ? _b : (v) => v;
|
|
47
|
+
if (direction === "both" || direction === "ltr") {
|
|
48
|
+
watchLeft = watch(left, (newValue) => right.value = transformLTR(newValue), { flush, deep, immediate });
|
|
49
|
+
}
|
|
50
|
+
if (direction === "both" || direction === "rtl") {
|
|
51
|
+
watchRight = watch(right, (newValue) => left.value = transformRTL(newValue), { flush, deep, immediate });
|
|
52
|
+
}
|
|
53
|
+
return () => {
|
|
54
|
+
watchLeft == null ? void 0 : watchLeft();
|
|
55
|
+
watchRight == null ? void 0 : watchRight();
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function tryOnMounted(fn, sync = true) {
|
|
60
|
+
if (getCurrentInstance())
|
|
61
|
+
onMounted(fn);
|
|
62
|
+
else if (sync)
|
|
63
|
+
fn();
|
|
64
|
+
else
|
|
65
|
+
nextTick(fn);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function unrefElement(elRef) {
|
|
69
|
+
var _a;
|
|
70
|
+
const plain = resolveUnref(elRef);
|
|
71
|
+
return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
const defaultWindow = isClient ? window : void 0;
|
|
75
|
+
|
|
76
|
+
function useEventListener(...args) {
|
|
77
|
+
let target;
|
|
78
|
+
let events;
|
|
79
|
+
let listeners;
|
|
80
|
+
let options;
|
|
81
|
+
if (isString(args[0]) || Array.isArray(args[0])) {
|
|
82
|
+
[events, listeners, options] = args;
|
|
83
|
+
target = defaultWindow;
|
|
84
|
+
} else {
|
|
85
|
+
[target, events, listeners, options] = args;
|
|
86
|
+
}
|
|
87
|
+
if (!target)
|
|
88
|
+
return noop;
|
|
89
|
+
if (!Array.isArray(events))
|
|
90
|
+
events = [events];
|
|
91
|
+
if (!Array.isArray(listeners))
|
|
92
|
+
listeners = [listeners];
|
|
93
|
+
const cleanups = [];
|
|
94
|
+
const cleanup = () => {
|
|
95
|
+
cleanups.forEach((fn) => fn());
|
|
96
|
+
cleanups.length = 0;
|
|
97
|
+
};
|
|
98
|
+
const register = (el, event, listener) => {
|
|
99
|
+
el.addEventListener(event, listener, options);
|
|
100
|
+
return () => el.removeEventListener(event, listener, options);
|
|
101
|
+
};
|
|
102
|
+
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
103
|
+
cleanup();
|
|
104
|
+
if (!el)
|
|
105
|
+
return;
|
|
106
|
+
cleanups.push(...events.flatMap((event) => {
|
|
107
|
+
return listeners.map((listener) => register(el, event, listener));
|
|
108
|
+
}));
|
|
109
|
+
}, { immediate: true, flush: "post" });
|
|
110
|
+
const stop = () => {
|
|
111
|
+
stopWatch();
|
|
112
|
+
cleanup();
|
|
113
|
+
};
|
|
114
|
+
tryOnScopeDispose(stop);
|
|
115
|
+
return stop;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
function onClickOutside(target, handler, options = {}) {
|
|
119
|
+
const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
|
|
120
|
+
if (!window)
|
|
121
|
+
return;
|
|
122
|
+
let shouldListen = true;
|
|
123
|
+
let fallback;
|
|
124
|
+
const shouldIgnore = (event) => {
|
|
125
|
+
return ignore.some((target2) => {
|
|
126
|
+
if (typeof target2 === "string") {
|
|
127
|
+
return Array.from(window.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
|
|
128
|
+
} else {
|
|
129
|
+
const el = unrefElement(target2);
|
|
130
|
+
return el && (event.target === el || event.composedPath().includes(el));
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
};
|
|
134
|
+
const listener = (event) => {
|
|
135
|
+
window.clearTimeout(fallback);
|
|
136
|
+
const el = unrefElement(target);
|
|
137
|
+
if (!el || el === event.target || event.composedPath().includes(el))
|
|
138
|
+
return;
|
|
139
|
+
if (event.detail === 0)
|
|
140
|
+
shouldListen = !shouldIgnore(event);
|
|
141
|
+
if (!shouldListen) {
|
|
142
|
+
shouldListen = true;
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
handler(event);
|
|
146
|
+
};
|
|
147
|
+
const cleanup = [
|
|
148
|
+
useEventListener(window, "click", listener, { passive: true, capture }),
|
|
149
|
+
useEventListener(window, "pointerdown", (e) => {
|
|
150
|
+
const el = unrefElement(target);
|
|
151
|
+
if (el)
|
|
152
|
+
shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
|
|
153
|
+
}, { passive: true }),
|
|
154
|
+
useEventListener(window, "pointerup", (e) => {
|
|
155
|
+
if (e.button === 0) {
|
|
156
|
+
const path = e.composedPath();
|
|
157
|
+
e.composedPath = () => path;
|
|
158
|
+
fallback = window.setTimeout(() => listener(e), 50);
|
|
159
|
+
}
|
|
160
|
+
}, { passive: true }),
|
|
161
|
+
detectIframe && useEventListener(window, "blur", (event) => {
|
|
162
|
+
var _a;
|
|
163
|
+
const el = unrefElement(target);
|
|
164
|
+
if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
|
|
165
|
+
handler(event);
|
|
166
|
+
})
|
|
167
|
+
].filter(Boolean);
|
|
168
|
+
const stop = () => cleanup.forEach((fn) => fn());
|
|
169
|
+
return stop;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
function useSupported(callback, sync = false) {
|
|
173
|
+
const isSupported = ref();
|
|
174
|
+
const update = () => isSupported.value = Boolean(callback());
|
|
175
|
+
update();
|
|
176
|
+
tryOnMounted(update, sync);
|
|
177
|
+
return isSupported;
|
|
178
|
+
}
|
|
179
|
+
function cloneFnJSON(source) {
|
|
180
|
+
return JSON.parse(JSON.stringify(source));
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
184
|
+
const globalKey = "__vueuse_ssr_handlers__";
|
|
185
|
+
_global[globalKey] = _global[globalKey] || {};
|
|
186
|
+
|
|
187
|
+
var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
|
|
188
|
+
var __hasOwnProp$f = Object.prototype.hasOwnProperty;
|
|
189
|
+
var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
|
|
190
|
+
var __objRest$2 = (source, exclude) => {
|
|
191
|
+
var target = {};
|
|
192
|
+
for (var prop in source)
|
|
193
|
+
if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
194
|
+
target[prop] = source[prop];
|
|
195
|
+
if (source != null && __getOwnPropSymbols$f)
|
|
196
|
+
for (var prop of __getOwnPropSymbols$f(source)) {
|
|
197
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
|
|
198
|
+
target[prop] = source[prop];
|
|
199
|
+
}
|
|
200
|
+
return target;
|
|
201
|
+
};
|
|
202
|
+
function useResizeObserver(target, callback, options = {}) {
|
|
203
|
+
const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]);
|
|
204
|
+
let observer;
|
|
205
|
+
const isSupported = useSupported(() => window && "ResizeObserver" in window);
|
|
206
|
+
const cleanup = () => {
|
|
207
|
+
if (observer) {
|
|
208
|
+
observer.disconnect();
|
|
209
|
+
observer = void 0;
|
|
210
|
+
}
|
|
211
|
+
};
|
|
212
|
+
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
213
|
+
cleanup();
|
|
214
|
+
if (isSupported.value && window && el) {
|
|
215
|
+
observer = new ResizeObserver(callback);
|
|
216
|
+
observer.observe(el, observerOptions);
|
|
217
|
+
}
|
|
218
|
+
}, { immediate: true, flush: "post" });
|
|
219
|
+
const stop = () => {
|
|
220
|
+
cleanup();
|
|
221
|
+
stopWatch();
|
|
222
|
+
};
|
|
223
|
+
tryOnScopeDispose(stop);
|
|
224
|
+
return {
|
|
225
|
+
isSupported,
|
|
226
|
+
stop
|
|
227
|
+
};
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
function useElementBounding(target, options = {}) {
|
|
231
|
+
const {
|
|
232
|
+
reset = true,
|
|
233
|
+
windowResize = true,
|
|
234
|
+
windowScroll = true,
|
|
235
|
+
immediate = true
|
|
236
|
+
} = options;
|
|
237
|
+
const height = ref(0);
|
|
238
|
+
const bottom = ref(0);
|
|
239
|
+
const left = ref(0);
|
|
240
|
+
const right = ref(0);
|
|
241
|
+
const top = ref(0);
|
|
242
|
+
const width = ref(0);
|
|
243
|
+
const x = ref(0);
|
|
244
|
+
const y = ref(0);
|
|
245
|
+
function update() {
|
|
246
|
+
const el = unrefElement(target);
|
|
247
|
+
if (!el) {
|
|
248
|
+
if (reset) {
|
|
249
|
+
height.value = 0;
|
|
250
|
+
bottom.value = 0;
|
|
251
|
+
left.value = 0;
|
|
252
|
+
right.value = 0;
|
|
253
|
+
top.value = 0;
|
|
254
|
+
width.value = 0;
|
|
255
|
+
x.value = 0;
|
|
256
|
+
y.value = 0;
|
|
257
|
+
}
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
const rect = el.getBoundingClientRect();
|
|
261
|
+
height.value = rect.height;
|
|
262
|
+
bottom.value = rect.bottom;
|
|
263
|
+
left.value = rect.left;
|
|
264
|
+
right.value = rect.right;
|
|
265
|
+
top.value = rect.top;
|
|
266
|
+
width.value = rect.width;
|
|
267
|
+
x.value = rect.x;
|
|
268
|
+
y.value = rect.y;
|
|
269
|
+
}
|
|
270
|
+
useResizeObserver(target, update);
|
|
271
|
+
watch(() => unrefElement(target), (ele) => !ele && update());
|
|
272
|
+
if (windowScroll)
|
|
273
|
+
useEventListener("scroll", update, { capture: true, passive: true });
|
|
274
|
+
if (windowResize)
|
|
275
|
+
useEventListener("resize", update, { passive: true });
|
|
276
|
+
tryOnMounted(() => {
|
|
277
|
+
if (immediate)
|
|
278
|
+
update();
|
|
279
|
+
});
|
|
280
|
+
return {
|
|
281
|
+
height,
|
|
282
|
+
bottom,
|
|
283
|
+
left,
|
|
284
|
+
right,
|
|
285
|
+
top,
|
|
286
|
+
width,
|
|
287
|
+
x,
|
|
288
|
+
y,
|
|
289
|
+
update
|
|
290
|
+
};
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
|
|
294
|
+
const elementIsVisible = ref(false);
|
|
295
|
+
const testBounding = () => {
|
|
296
|
+
if (!window)
|
|
297
|
+
return;
|
|
298
|
+
const document = window.document;
|
|
299
|
+
const el = unrefElement(element);
|
|
300
|
+
if (!el) {
|
|
301
|
+
elementIsVisible.value = false;
|
|
302
|
+
} else {
|
|
303
|
+
const rect = el.getBoundingClientRect();
|
|
304
|
+
elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
|
|
305
|
+
}
|
|
306
|
+
};
|
|
307
|
+
watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
|
|
308
|
+
if (window) {
|
|
309
|
+
useEventListener(scrollTarget || window, "scroll", testBounding, {
|
|
310
|
+
capture: false,
|
|
311
|
+
passive: true
|
|
312
|
+
});
|
|
313
|
+
}
|
|
314
|
+
return elementIsVisible;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
var SwipeDirection;
|
|
318
|
+
(function(SwipeDirection2) {
|
|
319
|
+
SwipeDirection2["UP"] = "UP";
|
|
320
|
+
SwipeDirection2["RIGHT"] = "RIGHT";
|
|
321
|
+
SwipeDirection2["DOWN"] = "DOWN";
|
|
322
|
+
SwipeDirection2["LEFT"] = "LEFT";
|
|
323
|
+
SwipeDirection2["NONE"] = "NONE";
|
|
324
|
+
})(SwipeDirection || (SwipeDirection = {}));
|
|
325
|
+
|
|
326
|
+
var __defProp = Object.defineProperty;
|
|
327
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
328
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
329
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
330
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
331
|
+
var __spreadValues = (a, b) => {
|
|
332
|
+
for (var prop in b || (b = {}))
|
|
333
|
+
if (__hasOwnProp.call(b, prop))
|
|
334
|
+
__defNormalProp(a, prop, b[prop]);
|
|
335
|
+
if (__getOwnPropSymbols)
|
|
336
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
337
|
+
if (__propIsEnum.call(b, prop))
|
|
338
|
+
__defNormalProp(a, prop, b[prop]);
|
|
339
|
+
}
|
|
340
|
+
return a;
|
|
341
|
+
};
|
|
342
|
+
const _TransitionPresets = {
|
|
343
|
+
easeInSine: [0.12, 0, 0.39, 0],
|
|
344
|
+
easeOutSine: [0.61, 1, 0.88, 1],
|
|
345
|
+
easeInOutSine: [0.37, 0, 0.63, 1],
|
|
346
|
+
easeInQuad: [0.11, 0, 0.5, 0],
|
|
347
|
+
easeOutQuad: [0.5, 1, 0.89, 1],
|
|
348
|
+
easeInOutQuad: [0.45, 0, 0.55, 1],
|
|
349
|
+
easeInCubic: [0.32, 0, 0.67, 0],
|
|
350
|
+
easeOutCubic: [0.33, 1, 0.68, 1],
|
|
351
|
+
easeInOutCubic: [0.65, 0, 0.35, 1],
|
|
352
|
+
easeInQuart: [0.5, 0, 0.75, 0],
|
|
353
|
+
easeOutQuart: [0.25, 1, 0.5, 1],
|
|
354
|
+
easeInOutQuart: [0.76, 0, 0.24, 1],
|
|
355
|
+
easeInQuint: [0.64, 0, 0.78, 0],
|
|
356
|
+
easeOutQuint: [0.22, 1, 0.36, 1],
|
|
357
|
+
easeInOutQuint: [0.83, 0, 0.17, 1],
|
|
358
|
+
easeInExpo: [0.7, 0, 0.84, 0],
|
|
359
|
+
easeOutExpo: [0.16, 1, 0.3, 1],
|
|
360
|
+
easeInOutExpo: [0.87, 0, 0.13, 1],
|
|
361
|
+
easeInCirc: [0.55, 0, 1, 0.45],
|
|
362
|
+
easeOutCirc: [0, 0.55, 0.45, 1],
|
|
363
|
+
easeInOutCirc: [0.85, 0, 0.15, 1],
|
|
364
|
+
easeInBack: [0.36, 0, 0.66, -0.56],
|
|
365
|
+
easeOutBack: [0.34, 1.56, 0.64, 1],
|
|
366
|
+
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
|
|
367
|
+
};
|
|
368
|
+
__spreadValues({
|
|
369
|
+
linear: identity
|
|
370
|
+
}, _TransitionPresets);
|
|
371
|
+
|
|
372
|
+
function useVModel(props, key, emit, options = {}) {
|
|
373
|
+
var _a, _b, _c;
|
|
374
|
+
const {
|
|
375
|
+
clone = false,
|
|
376
|
+
passive = false,
|
|
377
|
+
eventName,
|
|
378
|
+
deep = false,
|
|
379
|
+
defaultValue
|
|
380
|
+
} = options;
|
|
381
|
+
const vm = getCurrentInstance();
|
|
382
|
+
const _emit = emit || (vm == null ? void 0 : vm.emit) || ((_a = vm == null ? void 0 : vm.$emit) == null ? void 0 : _a.bind(vm)) || ((_c = (_b = vm == null ? void 0 : vm.proxy) == null ? void 0 : _b.$emit) == null ? void 0 : _c.bind(vm == null ? void 0 : vm.proxy));
|
|
383
|
+
let event = eventName;
|
|
384
|
+
if (!key) {
|
|
385
|
+
{
|
|
386
|
+
key = "modelValue";
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
event = eventName || event || `update:${key.toString()}`;
|
|
390
|
+
const cloneFn = (val) => !clone ? val : isFunction(clone) ? clone(val) : cloneFnJSON(val);
|
|
391
|
+
const getValue = () => isDef(props[key]) ? cloneFn(props[key]) : defaultValue;
|
|
392
|
+
if (passive) {
|
|
393
|
+
const initialValue = getValue();
|
|
394
|
+
const proxy = ref(initialValue);
|
|
395
|
+
watch(() => props[key], (v) => proxy.value = cloneFn(v));
|
|
396
|
+
watch(proxy, (v) => {
|
|
397
|
+
if (v !== props[key] || deep)
|
|
398
|
+
_emit(event, v);
|
|
399
|
+
}, { deep });
|
|
400
|
+
return proxy;
|
|
401
|
+
} else {
|
|
402
|
+
return computed({
|
|
403
|
+
get() {
|
|
404
|
+
return getValue();
|
|
405
|
+
},
|
|
406
|
+
set(value) {
|
|
407
|
+
_emit(event, value);
|
|
408
|
+
}
|
|
409
|
+
});
|
|
410
|
+
}
|
|
411
|
+
}
|
|
6
412
|
|
|
7
413
|
const affixProps = defineHookProps(
|
|
8
414
|
{
|
|
@@ -53,7 +459,7 @@ function getTargetRect(target) {
|
|
|
53
459
|
const useAffix = defineHookComponent({
|
|
54
460
|
props: affixProps,
|
|
55
461
|
setup(props, { emit }) {
|
|
56
|
-
const wrapperRef =
|
|
462
|
+
const wrapperRef = elementRef();
|
|
57
463
|
const wrapperRect = toReactive(useElementBounding(wrapperRef));
|
|
58
464
|
const parentRef = inject(AFFIX_TARGET_KEY, void 0);
|
|
59
465
|
const targetRef = useElement(props.target, parentRef);
|
|
@@ -131,6 +537,150 @@ function provideAffixTarget(target) {
|
|
|
131
537
|
provide(AFFIX_TARGET_KEY, target);
|
|
132
538
|
}
|
|
133
539
|
|
|
540
|
+
const configProviderProps = defineHookProps({
|
|
541
|
+
icon: {
|
|
542
|
+
type: Object
|
|
543
|
+
},
|
|
544
|
+
activateEvent: {
|
|
545
|
+
type: String
|
|
546
|
+
}
|
|
547
|
+
});
|
|
548
|
+
|
|
549
|
+
const fileUploadProps = defineHookProps({
|
|
550
|
+
modelValue: {
|
|
551
|
+
type: [File, Array],
|
|
552
|
+
default: () => []
|
|
553
|
+
},
|
|
554
|
+
multiple: {
|
|
555
|
+
type: Boolean,
|
|
556
|
+
default: false
|
|
557
|
+
}
|
|
558
|
+
});
|
|
559
|
+
const fileUploadEmits = defineHookEmits([
|
|
560
|
+
"update:modelValue",
|
|
561
|
+
"change"
|
|
562
|
+
]);
|
|
563
|
+
const useFileUpload = defineHookComponent({
|
|
564
|
+
props: fileUploadProps,
|
|
565
|
+
emits: fileUploadEmits,
|
|
566
|
+
setup(props, { emit }) {
|
|
567
|
+
const fileInputRef = elementRef();
|
|
568
|
+
const files = ref([]);
|
|
569
|
+
watch(props.modelValue, (value) => {
|
|
570
|
+
if (value instanceof File) {
|
|
571
|
+
files.value.push(value);
|
|
572
|
+
} else if (Array.isArray(value)) {
|
|
573
|
+
files.value.push(...value);
|
|
574
|
+
}
|
|
575
|
+
if (props.multiple) {
|
|
576
|
+
files.value.splice(1, files.value.length - 1);
|
|
577
|
+
}
|
|
578
|
+
}, {
|
|
579
|
+
immediate: true,
|
|
580
|
+
deep: true
|
|
581
|
+
});
|
|
582
|
+
const openFileInput = () => {
|
|
583
|
+
fileInputRef.value?.click();
|
|
584
|
+
};
|
|
585
|
+
useEventListener(fileInputRef, "change", (event) => {
|
|
586
|
+
const newFiles = event.target.files;
|
|
587
|
+
let value = [];
|
|
588
|
+
if (newFiles) {
|
|
589
|
+
if (props.multiple) {
|
|
590
|
+
value = Array.from(newFiles);
|
|
591
|
+
files.value.push(...value);
|
|
592
|
+
} else {
|
|
593
|
+
value = Array.from(newFiles)[0];
|
|
594
|
+
files.value = value ? [value] : [];
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
emit("update:modelValue", value);
|
|
598
|
+
emit("change", value);
|
|
599
|
+
});
|
|
600
|
+
return {
|
|
601
|
+
fileInputRef,
|
|
602
|
+
files,
|
|
603
|
+
openFileInput
|
|
604
|
+
};
|
|
605
|
+
}
|
|
606
|
+
});
|
|
607
|
+
|
|
608
|
+
const iconProps = defineHookProps({
|
|
609
|
+
src: {
|
|
610
|
+
type: String,
|
|
611
|
+
required: true
|
|
612
|
+
},
|
|
613
|
+
size: {
|
|
614
|
+
type: [Number, String]
|
|
615
|
+
},
|
|
616
|
+
width: {
|
|
617
|
+
type: [Number, String]
|
|
618
|
+
},
|
|
619
|
+
height: {
|
|
620
|
+
type: [Number, String]
|
|
621
|
+
},
|
|
622
|
+
color: {
|
|
623
|
+
type: String,
|
|
624
|
+
default: "currentColor"
|
|
625
|
+
},
|
|
626
|
+
mask: {
|
|
627
|
+
type: [Boolean, String],
|
|
628
|
+
default: () => "auto"
|
|
629
|
+
}
|
|
630
|
+
});
|
|
631
|
+
const isSvg = (src) => src.endsWith(".svg") || src.startsWith("data:image/svg+xml");
|
|
632
|
+
const useIcon = defineHookComponent({
|
|
633
|
+
props: iconProps,
|
|
634
|
+
setup(props, context) {
|
|
635
|
+
const sharedConfig = useSharedConfig("icon");
|
|
636
|
+
const sizeStyle = computed(() => {
|
|
637
|
+
const s = props.size ?? sharedConfig.size;
|
|
638
|
+
const unit = createUnitFormat(sharedConfig.sizeUnit ?? "px");
|
|
639
|
+
const size = s ? unit(s) : void 0;
|
|
640
|
+
const w = props.width ?? size;
|
|
641
|
+
const h = props.height ?? size;
|
|
642
|
+
const width = w ? unit(w) : void 0;
|
|
643
|
+
const height = h ? unit(h) : void 0;
|
|
644
|
+
return {
|
|
645
|
+
width,
|
|
646
|
+
height
|
|
647
|
+
};
|
|
648
|
+
});
|
|
649
|
+
const dynamicStyle = computed(() => {
|
|
650
|
+
const mask = props.mask === "auto" ? isSvg(props.src) : props.mask;
|
|
651
|
+
if (!mask) {
|
|
652
|
+
return {
|
|
653
|
+
"background-image": "var(--icon-url)",
|
|
654
|
+
"background-size": "100% 100%"
|
|
655
|
+
};
|
|
656
|
+
}
|
|
657
|
+
return {
|
|
658
|
+
"mask": "var(--icon-url) no-repeat",
|
|
659
|
+
"mask-size": "100% 100%",
|
|
660
|
+
"-webkit-mask": "var(--icon-url) no-repeat",
|
|
661
|
+
"-webkit-mask-size": "100% 100%",
|
|
662
|
+
"background-color": props.color
|
|
663
|
+
};
|
|
664
|
+
});
|
|
665
|
+
const staticStyle = computed(() => {
|
|
666
|
+
return {
|
|
667
|
+
"--icon-url": `url("${props.src}")`
|
|
668
|
+
};
|
|
669
|
+
});
|
|
670
|
+
const style = computed(() => {
|
|
671
|
+
return {
|
|
672
|
+
...staticStyle.value,
|
|
673
|
+
...dynamicStyle.value,
|
|
674
|
+
...sizeStyle.value,
|
|
675
|
+
...context.attrs.style ?? {}
|
|
676
|
+
};
|
|
677
|
+
});
|
|
678
|
+
return {
|
|
679
|
+
style
|
|
680
|
+
};
|
|
681
|
+
}
|
|
682
|
+
});
|
|
683
|
+
|
|
134
684
|
const selectionProps = defineHookProps({
|
|
135
685
|
modelValue: {
|
|
136
686
|
type: valuePropType,
|
|
@@ -432,157 +982,6 @@ const useSelectionItem = defineHookComponent({
|
|
|
432
982
|
}
|
|
433
983
|
});
|
|
434
984
|
|
|
435
|
-
const switchProps = defineHookProps({
|
|
436
|
-
modelValue: {
|
|
437
|
-
type: Boolean,
|
|
438
|
-
default: () => false
|
|
439
|
-
},
|
|
440
|
-
class: {
|
|
441
|
-
type: classPropType
|
|
442
|
-
},
|
|
443
|
-
activeClass: {
|
|
444
|
-
type: classPropType
|
|
445
|
-
},
|
|
446
|
-
unactiveClass: {
|
|
447
|
-
type: classPropType
|
|
448
|
-
},
|
|
449
|
-
activateEvent: {
|
|
450
|
-
type: String
|
|
451
|
-
},
|
|
452
|
-
disabled: {
|
|
453
|
-
type: Boolean,
|
|
454
|
-
default: () => false
|
|
455
|
-
},
|
|
456
|
-
disabledClass: {
|
|
457
|
-
type: classPropType
|
|
458
|
-
}
|
|
459
|
-
});
|
|
460
|
-
const switchEmits = defineHookEmits(["update:modelValue", "change", "reject"]);
|
|
461
|
-
const useSwitch = defineHookComponent({
|
|
462
|
-
props: switchProps,
|
|
463
|
-
emits: switchEmits,
|
|
464
|
-
setup(props, context) {
|
|
465
|
-
const modelValue = useVModel(props, "modelValue", context.emit, {
|
|
466
|
-
passive: true,
|
|
467
|
-
defaultValue: false
|
|
468
|
-
});
|
|
469
|
-
const toggle = function(value) {
|
|
470
|
-
if (props.disabled) {
|
|
471
|
-
context.emit("reject", value);
|
|
472
|
-
return;
|
|
473
|
-
}
|
|
474
|
-
const oldValue = modelValue.value;
|
|
475
|
-
const newValue = typeof value === "boolean" ? value : !oldValue;
|
|
476
|
-
if (newValue !== oldValue) {
|
|
477
|
-
modelValue.value = newValue;
|
|
478
|
-
context.emit("change", newValue);
|
|
479
|
-
}
|
|
480
|
-
};
|
|
481
|
-
const isDisabled = computed(() => props.disabled);
|
|
482
|
-
const className = computed(() => {
|
|
483
|
-
return cls([
|
|
484
|
-
props.class,
|
|
485
|
-
modelValue.value ? props.activeClass : props.unactiveClass,
|
|
486
|
-
isDisabled.value ? props.disabledClass : ""
|
|
487
|
-
]);
|
|
488
|
-
});
|
|
489
|
-
const sharedConfig = useSharedConfig();
|
|
490
|
-
const activateEvent = computed(() => props.activateEvent ?? sharedConfig.activateEvent);
|
|
491
|
-
return {
|
|
492
|
-
toggle,
|
|
493
|
-
modelValue,
|
|
494
|
-
className,
|
|
495
|
-
isDisabled,
|
|
496
|
-
activateEvent
|
|
497
|
-
};
|
|
498
|
-
}
|
|
499
|
-
});
|
|
500
|
-
|
|
501
|
-
const iconProps = defineHookProps({
|
|
502
|
-
src: {
|
|
503
|
-
type: String,
|
|
504
|
-
required: true
|
|
505
|
-
},
|
|
506
|
-
size: {
|
|
507
|
-
type: [Number, String]
|
|
508
|
-
},
|
|
509
|
-
width: {
|
|
510
|
-
type: [Number, String]
|
|
511
|
-
},
|
|
512
|
-
height: {
|
|
513
|
-
type: [Number, String]
|
|
514
|
-
},
|
|
515
|
-
color: {
|
|
516
|
-
type: String,
|
|
517
|
-
default: "currentColor"
|
|
518
|
-
},
|
|
519
|
-
mask: {
|
|
520
|
-
type: [Boolean, String],
|
|
521
|
-
default: () => "auto"
|
|
522
|
-
}
|
|
523
|
-
});
|
|
524
|
-
const isSvg = (src) => src.endsWith(".svg") || src.startsWith("data:image/svg+xml");
|
|
525
|
-
const useIcon = defineHookComponent({
|
|
526
|
-
props: iconProps,
|
|
527
|
-
setup(props, context) {
|
|
528
|
-
const sharedConfig = useSharedConfig("icon");
|
|
529
|
-
const sizeStyle = computed(() => {
|
|
530
|
-
const s = props.size ?? sharedConfig.size;
|
|
531
|
-
const unit = createUnitFormat(sharedConfig.sizeUnit ?? "px");
|
|
532
|
-
const size = s ? unit(s) : void 0;
|
|
533
|
-
const w = props.width ?? size;
|
|
534
|
-
const h = props.height ?? size;
|
|
535
|
-
const width = w ? unit(w) : void 0;
|
|
536
|
-
const height = h ? unit(h) : void 0;
|
|
537
|
-
return {
|
|
538
|
-
width,
|
|
539
|
-
height
|
|
540
|
-
};
|
|
541
|
-
});
|
|
542
|
-
const dynamicStyle = computed(() => {
|
|
543
|
-
const mask = props.mask === "auto" ? isSvg(props.src) : props.mask;
|
|
544
|
-
if (!mask) {
|
|
545
|
-
return {
|
|
546
|
-
"background-image": "var(--icon-url)",
|
|
547
|
-
"background-size": "100% 100%"
|
|
548
|
-
};
|
|
549
|
-
}
|
|
550
|
-
return {
|
|
551
|
-
"mask": "var(--icon-url) no-repeat",
|
|
552
|
-
"mask-size": "100% 100%",
|
|
553
|
-
"-webkit-mask": "var(--icon-url) no-repeat",
|
|
554
|
-
"-webkit-mask-size": "100% 100%",
|
|
555
|
-
"background-color": props.color
|
|
556
|
-
};
|
|
557
|
-
});
|
|
558
|
-
const staticStyle = computed(() => {
|
|
559
|
-
return {
|
|
560
|
-
"--icon-url": `url("${props.src}")`
|
|
561
|
-
};
|
|
562
|
-
});
|
|
563
|
-
const style = computed(() => {
|
|
564
|
-
return {
|
|
565
|
-
...staticStyle.value,
|
|
566
|
-
...dynamicStyle.value,
|
|
567
|
-
...sizeStyle.value,
|
|
568
|
-
...context.attrs.style ?? {}
|
|
569
|
-
};
|
|
570
|
-
});
|
|
571
|
-
return {
|
|
572
|
-
style
|
|
573
|
-
};
|
|
574
|
-
}
|
|
575
|
-
});
|
|
576
|
-
|
|
577
|
-
const configProviderProps = defineHookProps({
|
|
578
|
-
icon: {
|
|
579
|
-
type: Object
|
|
580
|
-
},
|
|
581
|
-
activateEvent: {
|
|
582
|
-
type: String
|
|
583
|
-
}
|
|
584
|
-
});
|
|
585
|
-
|
|
586
985
|
const popoverProps = defineHookProps({
|
|
587
986
|
popupClass: {
|
|
588
987
|
type: String
|
|
@@ -624,8 +1023,8 @@ const usePopover = defineHookComponent({
|
|
|
624
1023
|
const visible = useVModel(props, "visible", context.emit, {
|
|
625
1024
|
passive: true
|
|
626
1025
|
});
|
|
627
|
-
const triggerRef =
|
|
628
|
-
const popupRef =
|
|
1026
|
+
const triggerRef = elementRef();
|
|
1027
|
+
const popupRef = elementRef();
|
|
629
1028
|
const validate = (event) => {
|
|
630
1029
|
const events2 = Array.isArray(event) ? event : [event];
|
|
631
1030
|
return !props.disabled && events2.includes(props.triggerEvent);
|
|
@@ -816,4 +1215,70 @@ const usePopover = defineHookComponent({
|
|
|
816
1215
|
}
|
|
817
1216
|
});
|
|
818
1217
|
|
|
819
|
-
|
|
1218
|
+
const switchProps = defineHookProps({
|
|
1219
|
+
modelValue: {
|
|
1220
|
+
type: Boolean,
|
|
1221
|
+
default: () => false
|
|
1222
|
+
},
|
|
1223
|
+
class: {
|
|
1224
|
+
type: classPropType
|
|
1225
|
+
},
|
|
1226
|
+
activeClass: {
|
|
1227
|
+
type: classPropType
|
|
1228
|
+
},
|
|
1229
|
+
unactiveClass: {
|
|
1230
|
+
type: classPropType
|
|
1231
|
+
},
|
|
1232
|
+
activateEvent: {
|
|
1233
|
+
type: String
|
|
1234
|
+
},
|
|
1235
|
+
disabled: {
|
|
1236
|
+
type: Boolean,
|
|
1237
|
+
default: () => false
|
|
1238
|
+
},
|
|
1239
|
+
disabledClass: {
|
|
1240
|
+
type: classPropType
|
|
1241
|
+
}
|
|
1242
|
+
});
|
|
1243
|
+
const switchEmits = defineHookEmits(["update:modelValue", "change", "reject"]);
|
|
1244
|
+
const useSwitch = defineHookComponent({
|
|
1245
|
+
props: switchProps,
|
|
1246
|
+
emits: switchEmits,
|
|
1247
|
+
setup(props, context) {
|
|
1248
|
+
const modelValue = useVModel(props, "modelValue", context.emit, {
|
|
1249
|
+
passive: true,
|
|
1250
|
+
defaultValue: false
|
|
1251
|
+
});
|
|
1252
|
+
const toggle = function(value) {
|
|
1253
|
+
if (props.disabled) {
|
|
1254
|
+
context.emit("reject", value);
|
|
1255
|
+
return;
|
|
1256
|
+
}
|
|
1257
|
+
const oldValue = modelValue.value;
|
|
1258
|
+
const newValue = typeof value === "boolean" ? value : !oldValue;
|
|
1259
|
+
if (newValue !== oldValue) {
|
|
1260
|
+
modelValue.value = newValue;
|
|
1261
|
+
context.emit("change", newValue);
|
|
1262
|
+
}
|
|
1263
|
+
};
|
|
1264
|
+
const isDisabled = computed(() => props.disabled);
|
|
1265
|
+
const className = computed(() => {
|
|
1266
|
+
return cls([
|
|
1267
|
+
props.class,
|
|
1268
|
+
modelValue.value ? props.activeClass : props.unactiveClass,
|
|
1269
|
+
isDisabled.value ? props.disabledClass : ""
|
|
1270
|
+
]);
|
|
1271
|
+
});
|
|
1272
|
+
const sharedConfig = useSharedConfig();
|
|
1273
|
+
const activateEvent = computed(() => props.activateEvent ?? sharedConfig.activateEvent);
|
|
1274
|
+
return {
|
|
1275
|
+
toggle,
|
|
1276
|
+
modelValue,
|
|
1277
|
+
className,
|
|
1278
|
+
isDisabled,
|
|
1279
|
+
activateEvent
|
|
1280
|
+
};
|
|
1281
|
+
}
|
|
1282
|
+
});
|
|
1283
|
+
|
|
1284
|
+
export { AFFIX_TARGET_KEY, affixEmits, affixProps, configProviderProps, fileUploadEmits, fileUploadProps, iconProps, itemEmits, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useFileUpload, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };
|