@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.mjs CHANGED
@@ -1,8 +1,414 @@
1
- import { ref, inject, computed, watchPostEffect, provide, reactive, renderSlot, watch, nextTick } from 'vue';
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 { px, cls, createUnitFormat } from 'tslx';
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 = ref();
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 = ref();
628
- const popupRef = ref();
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
- export { AFFIX_TARGET_KEY, affixEmits, affixProps, configProviderProps, iconProps, itemEmits, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };
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 };