@hoci/components 0.5.9 → 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 +505 -145
- package/dist/index.d.cts +308 -269
- package/dist/index.d.mts +308 -269
- package/dist/index.d.ts +308 -269
- package/dist/index.mjs +499 -140
- package/package.json +3 -4
package/dist/index.mjs
CHANGED
|
@@ -1,26 +1,314 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { useElementBounding, useElementVisibility, useEventListener, syncRef, isDefined, tryOnScopeDispose } from '@vueuse/core';
|
|
4
|
-
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, valuePropType, labelPropType, classPropType, useSharedConfig, getFirstChilld } from '@hoci/shared';
|
|
2
|
+
import { getCurrentInstance, onMounted, nextTick, getCurrentScope, onScopeDispose, watch, unref, ref, inject, computed, watchPostEffect, provide, defineComponent, h, renderSlot, Teleport, reactive, KeepAlive } from 'vue';
|
|
5
3
|
import { px, capitalize, cls } from 'tslx';
|
|
4
|
+
import { affixProps as affixProps$1, useAffix, configProviderProps, provideSharedConfig, fileUploadEmits, fileUploadProps, useFileUpload, iconProps, useIcon, itemEmits as itemEmits$1, itemProps as itemProps$1, useSelectionItem as useSelectionItem$1, popoverEmits, popoverProps, usePopover, selectionEmits as selectionEmits$1, selectionProps as selectionProps$1, useSelectionList as useSelectionList$1, switchEmits, switchProps, useSwitch } from '@hoci/core';
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
var _a;
|
|
7
|
+
const isClient = typeof window !== "undefined";
|
|
8
|
+
const isString = (val) => typeof val === "string";
|
|
9
|
+
const noop = () => {
|
|
10
|
+
};
|
|
11
|
+
isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
|
|
12
|
+
|
|
13
|
+
function resolveUnref(r) {
|
|
14
|
+
return typeof r === "function" ? r() : unref(r);
|
|
15
|
+
}
|
|
16
|
+
function identity(arg) {
|
|
17
|
+
return arg;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function tryOnScopeDispose(fn) {
|
|
21
|
+
if (getCurrentScope()) {
|
|
22
|
+
onScopeDispose(fn);
|
|
23
|
+
return true;
|
|
24
|
+
}
|
|
25
|
+
return false;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function isDefined(v) {
|
|
29
|
+
return unref(v) != null;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function syncRef(left, right, options = {}) {
|
|
33
|
+
var _a, _b;
|
|
34
|
+
const {
|
|
35
|
+
flush = "sync",
|
|
36
|
+
deep = false,
|
|
37
|
+
immediate = true,
|
|
38
|
+
direction = "both",
|
|
39
|
+
transform = {}
|
|
40
|
+
} = options;
|
|
41
|
+
let watchLeft;
|
|
42
|
+
let watchRight;
|
|
43
|
+
const transformLTR = (_a = transform.ltr) != null ? _a : (v) => v;
|
|
44
|
+
const transformRTL = (_b = transform.rtl) != null ? _b : (v) => v;
|
|
45
|
+
if (direction === "both" || direction === "ltr") {
|
|
46
|
+
watchLeft = watch(left, (newValue) => right.value = transformLTR(newValue), { flush, deep, immediate });
|
|
47
|
+
}
|
|
48
|
+
if (direction === "both" || direction === "rtl") {
|
|
49
|
+
watchRight = watch(right, (newValue) => left.value = transformRTL(newValue), { flush, deep, immediate });
|
|
50
|
+
}
|
|
51
|
+
return () => {
|
|
52
|
+
watchLeft == null ? void 0 : watchLeft();
|
|
53
|
+
watchRight == null ? void 0 : watchRight();
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
function tryOnMounted(fn, sync = true) {
|
|
58
|
+
if (getCurrentInstance())
|
|
59
|
+
onMounted(fn);
|
|
60
|
+
else if (sync)
|
|
61
|
+
fn();
|
|
62
|
+
else
|
|
63
|
+
nextTick(fn);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function unrefElement(elRef) {
|
|
67
|
+
var _a;
|
|
68
|
+
const plain = resolveUnref(elRef);
|
|
69
|
+
return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const defaultWindow = isClient ? window : void 0;
|
|
73
|
+
|
|
74
|
+
function useEventListener(...args) {
|
|
75
|
+
let target;
|
|
76
|
+
let events;
|
|
77
|
+
let listeners;
|
|
78
|
+
let options;
|
|
79
|
+
if (isString(args[0]) || Array.isArray(args[0])) {
|
|
80
|
+
[events, listeners, options] = args;
|
|
81
|
+
target = defaultWindow;
|
|
82
|
+
} else {
|
|
83
|
+
[target, events, listeners, options] = args;
|
|
84
|
+
}
|
|
85
|
+
if (!target)
|
|
86
|
+
return noop;
|
|
87
|
+
if (!Array.isArray(events))
|
|
88
|
+
events = [events];
|
|
89
|
+
if (!Array.isArray(listeners))
|
|
90
|
+
listeners = [listeners];
|
|
91
|
+
const cleanups = [];
|
|
92
|
+
const cleanup = () => {
|
|
93
|
+
cleanups.forEach((fn) => fn());
|
|
94
|
+
cleanups.length = 0;
|
|
95
|
+
};
|
|
96
|
+
const register = (el, event, listener) => {
|
|
97
|
+
el.addEventListener(event, listener, options);
|
|
98
|
+
return () => el.removeEventListener(event, listener, options);
|
|
99
|
+
};
|
|
100
|
+
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
101
|
+
cleanup();
|
|
102
|
+
if (!el)
|
|
103
|
+
return;
|
|
104
|
+
cleanups.push(...events.flatMap((event) => {
|
|
105
|
+
return listeners.map((listener) => register(el, event, listener));
|
|
106
|
+
}));
|
|
107
|
+
}, { immediate: true, flush: "post" });
|
|
108
|
+
const stop = () => {
|
|
109
|
+
stopWatch();
|
|
110
|
+
cleanup();
|
|
111
|
+
};
|
|
112
|
+
tryOnScopeDispose(stop);
|
|
113
|
+
return stop;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
function useSupported(callback, sync = false) {
|
|
117
|
+
const isSupported = ref();
|
|
118
|
+
const update = () => isSupported.value = Boolean(callback());
|
|
119
|
+
update();
|
|
120
|
+
tryOnMounted(update, sync);
|
|
121
|
+
return isSupported;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
125
|
+
const globalKey = "__vueuse_ssr_handlers__";
|
|
126
|
+
_global[globalKey] = _global[globalKey] || {};
|
|
127
|
+
|
|
128
|
+
var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
|
|
129
|
+
var __hasOwnProp$f = Object.prototype.hasOwnProperty;
|
|
130
|
+
var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
|
|
131
|
+
var __objRest$2 = (source, exclude) => {
|
|
132
|
+
var target = {};
|
|
133
|
+
for (var prop in source)
|
|
134
|
+
if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
135
|
+
target[prop] = source[prop];
|
|
136
|
+
if (source != null && __getOwnPropSymbols$f)
|
|
137
|
+
for (var prop of __getOwnPropSymbols$f(source)) {
|
|
138
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
|
|
139
|
+
target[prop] = source[prop];
|
|
14
140
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
141
|
+
return target;
|
|
142
|
+
};
|
|
143
|
+
function useResizeObserver(target, callback, options = {}) {
|
|
144
|
+
const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]);
|
|
145
|
+
let observer;
|
|
146
|
+
const isSupported = useSupported(() => window && "ResizeObserver" in window);
|
|
147
|
+
const cleanup = () => {
|
|
148
|
+
if (observer) {
|
|
149
|
+
observer.disconnect();
|
|
150
|
+
observer = void 0;
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
154
|
+
cleanup();
|
|
155
|
+
if (isSupported.value && window && el) {
|
|
156
|
+
observer = new ResizeObserver(callback);
|
|
157
|
+
observer.observe(el, observerOptions);
|
|
158
|
+
}
|
|
159
|
+
}, { immediate: true, flush: "post" });
|
|
160
|
+
const stop = () => {
|
|
161
|
+
cleanup();
|
|
162
|
+
stopWatch();
|
|
163
|
+
};
|
|
164
|
+
tryOnScopeDispose(stop);
|
|
165
|
+
return {
|
|
166
|
+
isSupported,
|
|
167
|
+
stop
|
|
168
|
+
};
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
function useElementBounding(target, options = {}) {
|
|
172
|
+
const {
|
|
173
|
+
reset = true,
|
|
174
|
+
windowResize = true,
|
|
175
|
+
windowScroll = true,
|
|
176
|
+
immediate = true
|
|
177
|
+
} = options;
|
|
178
|
+
const height = ref(0);
|
|
179
|
+
const bottom = ref(0);
|
|
180
|
+
const left = ref(0);
|
|
181
|
+
const right = ref(0);
|
|
182
|
+
const top = ref(0);
|
|
183
|
+
const width = ref(0);
|
|
184
|
+
const x = ref(0);
|
|
185
|
+
const y = ref(0);
|
|
186
|
+
function update() {
|
|
187
|
+
const el = unrefElement(target);
|
|
188
|
+
if (!el) {
|
|
189
|
+
if (reset) {
|
|
190
|
+
height.value = 0;
|
|
191
|
+
bottom.value = 0;
|
|
192
|
+
left.value = 0;
|
|
193
|
+
right.value = 0;
|
|
194
|
+
top.value = 0;
|
|
195
|
+
width.value = 0;
|
|
196
|
+
x.value = 0;
|
|
197
|
+
y.value = 0;
|
|
198
|
+
}
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
201
|
+
const rect = el.getBoundingClientRect();
|
|
202
|
+
height.value = rect.height;
|
|
203
|
+
bottom.value = rect.bottom;
|
|
204
|
+
left.value = rect.left;
|
|
205
|
+
right.value = rect.right;
|
|
206
|
+
top.value = rect.top;
|
|
207
|
+
width.value = rect.width;
|
|
208
|
+
x.value = rect.x;
|
|
209
|
+
y.value = rect.y;
|
|
22
210
|
}
|
|
23
|
-
|
|
211
|
+
useResizeObserver(target, update);
|
|
212
|
+
watch(() => unrefElement(target), (ele) => !ele && update());
|
|
213
|
+
if (windowScroll)
|
|
214
|
+
useEventListener("scroll", update, { capture: true, passive: true });
|
|
215
|
+
if (windowResize)
|
|
216
|
+
useEventListener("resize", update, { passive: true });
|
|
217
|
+
tryOnMounted(() => {
|
|
218
|
+
if (immediate)
|
|
219
|
+
update();
|
|
220
|
+
});
|
|
221
|
+
return {
|
|
222
|
+
height,
|
|
223
|
+
bottom,
|
|
224
|
+
left,
|
|
225
|
+
right,
|
|
226
|
+
top,
|
|
227
|
+
width,
|
|
228
|
+
x,
|
|
229
|
+
y,
|
|
230
|
+
update
|
|
231
|
+
};
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
|
|
235
|
+
const elementIsVisible = ref(false);
|
|
236
|
+
const testBounding = () => {
|
|
237
|
+
if (!window)
|
|
238
|
+
return;
|
|
239
|
+
const document = window.document;
|
|
240
|
+
const el = unrefElement(element);
|
|
241
|
+
if (!el) {
|
|
242
|
+
elementIsVisible.value = false;
|
|
243
|
+
} else {
|
|
244
|
+
const rect = el.getBoundingClientRect();
|
|
245
|
+
elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
|
|
249
|
+
if (window) {
|
|
250
|
+
useEventListener(scrollTarget || window, "scroll", testBounding, {
|
|
251
|
+
capture: false,
|
|
252
|
+
passive: true
|
|
253
|
+
});
|
|
254
|
+
}
|
|
255
|
+
return elementIsVisible;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
var SwipeDirection;
|
|
259
|
+
(function(SwipeDirection2) {
|
|
260
|
+
SwipeDirection2["UP"] = "UP";
|
|
261
|
+
SwipeDirection2["RIGHT"] = "RIGHT";
|
|
262
|
+
SwipeDirection2["DOWN"] = "DOWN";
|
|
263
|
+
SwipeDirection2["LEFT"] = "LEFT";
|
|
264
|
+
SwipeDirection2["NONE"] = "NONE";
|
|
265
|
+
})(SwipeDirection || (SwipeDirection = {}));
|
|
266
|
+
|
|
267
|
+
var __defProp = Object.defineProperty;
|
|
268
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
269
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
270
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
271
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
272
|
+
var __spreadValues = (a, b) => {
|
|
273
|
+
for (var prop in b || (b = {}))
|
|
274
|
+
if (__hasOwnProp.call(b, prop))
|
|
275
|
+
__defNormalProp(a, prop, b[prop]);
|
|
276
|
+
if (__getOwnPropSymbols)
|
|
277
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
278
|
+
if (__propIsEnum.call(b, prop))
|
|
279
|
+
__defNormalProp(a, prop, b[prop]);
|
|
280
|
+
}
|
|
281
|
+
return a;
|
|
282
|
+
};
|
|
283
|
+
const _TransitionPresets = {
|
|
284
|
+
easeInSine: [0.12, 0, 0.39, 0],
|
|
285
|
+
easeOutSine: [0.61, 1, 0.88, 1],
|
|
286
|
+
easeInOutSine: [0.37, 0, 0.63, 1],
|
|
287
|
+
easeInQuad: [0.11, 0, 0.5, 0],
|
|
288
|
+
easeOutQuad: [0.5, 1, 0.89, 1],
|
|
289
|
+
easeInOutQuad: [0.45, 0, 0.55, 1],
|
|
290
|
+
easeInCubic: [0.32, 0, 0.67, 0],
|
|
291
|
+
easeOutCubic: [0.33, 1, 0.68, 1],
|
|
292
|
+
easeInOutCubic: [0.65, 0, 0.35, 1],
|
|
293
|
+
easeInQuart: [0.5, 0, 0.75, 0],
|
|
294
|
+
easeOutQuart: [0.25, 1, 0.5, 1],
|
|
295
|
+
easeInOutQuart: [0.76, 0, 0.24, 1],
|
|
296
|
+
easeInQuint: [0.64, 0, 0.78, 0],
|
|
297
|
+
easeOutQuint: [0.22, 1, 0.36, 1],
|
|
298
|
+
easeInOutQuint: [0.83, 0, 0.17, 1],
|
|
299
|
+
easeInExpo: [0.7, 0, 0.84, 0],
|
|
300
|
+
easeOutExpo: [0.16, 1, 0.3, 1],
|
|
301
|
+
easeInOutExpo: [0.87, 0, 0.13, 1],
|
|
302
|
+
easeInCirc: [0.55, 0, 1, 0.45],
|
|
303
|
+
easeOutCirc: [0, 0.55, 0.45, 1],
|
|
304
|
+
easeInOutCirc: [0.85, 0, 0.15, 1],
|
|
305
|
+
easeInBack: [0.36, 0, 0.66, -0.56],
|
|
306
|
+
easeOutBack: [0.34, 1.56, 0.64, 1],
|
|
307
|
+
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
|
|
308
|
+
};
|
|
309
|
+
__spreadValues({
|
|
310
|
+
linear: identity
|
|
311
|
+
}, _TransitionPresets);
|
|
24
312
|
|
|
25
313
|
const affixProps = defineHookProps(
|
|
26
314
|
{
|
|
@@ -71,7 +359,7 @@ function getTargetRect(target) {
|
|
|
71
359
|
defineHookComponent({
|
|
72
360
|
props: affixProps,
|
|
73
361
|
setup(props, { emit }) {
|
|
74
|
-
const wrapperRef =
|
|
362
|
+
const wrapperRef = elementRef();
|
|
75
363
|
const wrapperRect = toReactive(useElementBounding(wrapperRef));
|
|
76
364
|
const parentRef = inject(AFFIX_TARGET_KEY, void 0);
|
|
77
365
|
const targetRef = useElement(props.target, parentRef);
|
|
@@ -152,7 +440,7 @@ function provideAffixTarget(target) {
|
|
|
152
440
|
const HiAffixTarget = defineComponent({
|
|
153
441
|
name: "HiAffixTarget",
|
|
154
442
|
setup(_, context) {
|
|
155
|
-
const targetRef =
|
|
443
|
+
const targetRef = elementRef();
|
|
156
444
|
provideAffixTarget(targetRef);
|
|
157
445
|
return () => h("div", {
|
|
158
446
|
ref: targetRef,
|
|
@@ -161,19 +449,94 @@ const HiAffixTarget = defineComponent({
|
|
|
161
449
|
}
|
|
162
450
|
});
|
|
163
451
|
|
|
164
|
-
const
|
|
165
|
-
name: "
|
|
452
|
+
const HiAffix = defineComponent({
|
|
453
|
+
name: "HiAffix",
|
|
166
454
|
props: {
|
|
167
|
-
...
|
|
455
|
+
...affixProps$1,
|
|
168
456
|
as: {
|
|
169
457
|
type: String,
|
|
170
458
|
default: "div"
|
|
171
459
|
}
|
|
172
460
|
},
|
|
173
|
-
emits: selectionEmits$1,
|
|
174
461
|
setup(props, context) {
|
|
175
|
-
const {
|
|
176
|
-
return () => h(props.as, {},
|
|
462
|
+
const { className, wrapperRef, isFixed, placeholderStyle, fixedStyle } = useAffix(props, context);
|
|
463
|
+
return () => h(props.as, { ref: wrapperRef }, [
|
|
464
|
+
isFixed.value && h("div", { style: placeholderStyle.value }),
|
|
465
|
+
h("div", { class: className.value, style: fixedStyle.value }, renderSlot(context.slots, "default"))
|
|
466
|
+
]);
|
|
467
|
+
}
|
|
468
|
+
});
|
|
469
|
+
|
|
470
|
+
const HiConfigProvider = defineComponent({
|
|
471
|
+
props: {
|
|
472
|
+
...configProviderProps,
|
|
473
|
+
as: {
|
|
474
|
+
type: String
|
|
475
|
+
}
|
|
476
|
+
},
|
|
477
|
+
setup(props, context) {
|
|
478
|
+
provideSharedConfig(props);
|
|
479
|
+
return () => {
|
|
480
|
+
const content = renderSlot(context.slots, "default", void 0);
|
|
481
|
+
if (props.as) {
|
|
482
|
+
return h(props.as, content);
|
|
483
|
+
}
|
|
484
|
+
return content;
|
|
485
|
+
};
|
|
486
|
+
}
|
|
487
|
+
});
|
|
488
|
+
|
|
489
|
+
const HiFileUpload = defineComponent({
|
|
490
|
+
name: "HiFileUpload",
|
|
491
|
+
props: {
|
|
492
|
+
...fileUploadProps,
|
|
493
|
+
accept: {
|
|
494
|
+
type: String,
|
|
495
|
+
default: "*/*"
|
|
496
|
+
},
|
|
497
|
+
as: {
|
|
498
|
+
type: String,
|
|
499
|
+
default: "div"
|
|
500
|
+
}
|
|
501
|
+
},
|
|
502
|
+
emits: fileUploadEmits,
|
|
503
|
+
setup(props, context) {
|
|
504
|
+
const { slots } = context;
|
|
505
|
+
const { fileInputRef, files, openFileInput } = useFileUpload(props, context);
|
|
506
|
+
return () => {
|
|
507
|
+
return h(props.as, {
|
|
508
|
+
onClick: openFileInput
|
|
509
|
+
}, [
|
|
510
|
+
h("input", {
|
|
511
|
+
ref: fileInputRef,
|
|
512
|
+
type: "file",
|
|
513
|
+
accept: props.accept,
|
|
514
|
+
multiple: props.multiple,
|
|
515
|
+
style: { display: "none" }
|
|
516
|
+
}),
|
|
517
|
+
renderSlot(slots, "default", {
|
|
518
|
+
files: files.value
|
|
519
|
+
})
|
|
520
|
+
]);
|
|
521
|
+
};
|
|
522
|
+
}
|
|
523
|
+
});
|
|
524
|
+
|
|
525
|
+
const HiIcon = defineComponent({
|
|
526
|
+
props: {
|
|
527
|
+
...iconProps,
|
|
528
|
+
as: {
|
|
529
|
+
type: String,
|
|
530
|
+
default: "div"
|
|
531
|
+
}
|
|
532
|
+
},
|
|
533
|
+
setup(props, context) {
|
|
534
|
+
const { style } = useIcon(props, context);
|
|
535
|
+
return () => {
|
|
536
|
+
return h(props.as, {
|
|
537
|
+
style: style.value
|
|
538
|
+
});
|
|
539
|
+
};
|
|
177
540
|
}
|
|
178
541
|
});
|
|
179
542
|
|
|
@@ -204,24 +567,64 @@ const HiItem = defineComponent({
|
|
|
204
567
|
}
|
|
205
568
|
});
|
|
206
569
|
|
|
207
|
-
const
|
|
570
|
+
const HiPopover = defineComponent({
|
|
571
|
+
name: "HiPopover",
|
|
208
572
|
props: {
|
|
209
|
-
...
|
|
573
|
+
...popoverProps,
|
|
210
574
|
as: {
|
|
211
575
|
type: String,
|
|
212
576
|
default: "div"
|
|
213
577
|
}
|
|
214
578
|
},
|
|
579
|
+
emits: popoverEmits,
|
|
215
580
|
setup(props, context) {
|
|
216
|
-
const {
|
|
581
|
+
const { triggerRef, popupClass, events, popupRef, popupStyle } = usePopover(props, context);
|
|
217
582
|
return () => {
|
|
583
|
+
let content = h(
|
|
584
|
+
"div",
|
|
585
|
+
{
|
|
586
|
+
class: popupClass.value,
|
|
587
|
+
style: popupStyle.value,
|
|
588
|
+
ref: popupRef
|
|
589
|
+
},
|
|
590
|
+
renderSlot(context.slots, "popup")
|
|
591
|
+
);
|
|
592
|
+
if (props.teleport) {
|
|
593
|
+
content = h(
|
|
594
|
+
Teleport,
|
|
595
|
+
{
|
|
596
|
+
to: props.teleport === true ? "body" : props.teleport
|
|
597
|
+
},
|
|
598
|
+
content
|
|
599
|
+
);
|
|
600
|
+
}
|
|
218
601
|
return h(props.as, {
|
|
219
|
-
|
|
220
|
-
|
|
602
|
+
ref: triggerRef,
|
|
603
|
+
...events
|
|
604
|
+
}, [
|
|
605
|
+
renderSlot(context.slots, "default"),
|
|
606
|
+
content
|
|
607
|
+
]);
|
|
221
608
|
};
|
|
222
609
|
}
|
|
223
610
|
});
|
|
224
611
|
|
|
612
|
+
const HiSelection = defineComponent({
|
|
613
|
+
name: "HiSelection",
|
|
614
|
+
props: {
|
|
615
|
+
...selectionProps$1,
|
|
616
|
+
as: {
|
|
617
|
+
type: String,
|
|
618
|
+
default: "div"
|
|
619
|
+
}
|
|
620
|
+
},
|
|
621
|
+
emits: selectionEmits$1,
|
|
622
|
+
setup(props, context) {
|
|
623
|
+
const { render } = useSelectionList$1(props, context);
|
|
624
|
+
return () => h(props.as, {}, render());
|
|
625
|
+
}
|
|
626
|
+
});
|
|
627
|
+
|
|
225
628
|
const HiSwitch = defineComponent({
|
|
226
629
|
name: "HiSwitch",
|
|
227
630
|
props: {
|
|
@@ -251,25 +654,6 @@ const HiSwitch = defineComponent({
|
|
|
251
654
|
}
|
|
252
655
|
});
|
|
253
656
|
|
|
254
|
-
const HiConfigProvider = defineComponent({
|
|
255
|
-
props: {
|
|
256
|
-
...configProviderProps,
|
|
257
|
-
as: {
|
|
258
|
-
type: String
|
|
259
|
-
}
|
|
260
|
-
},
|
|
261
|
-
setup(props, context) {
|
|
262
|
-
provideSharedConfig(props);
|
|
263
|
-
return () => {
|
|
264
|
-
const content = renderSlot(context.slots, "default", void 0);
|
|
265
|
-
if (props.as) {
|
|
266
|
-
return h(props.as, content);
|
|
267
|
-
}
|
|
268
|
-
return content;
|
|
269
|
-
};
|
|
270
|
-
}
|
|
271
|
-
});
|
|
272
|
-
|
|
273
657
|
const selectionProps = defineHookProps({
|
|
274
658
|
modelValue: {
|
|
275
659
|
type: valuePropType,
|
|
@@ -304,7 +688,7 @@ const selectionProps = defineHookProps({
|
|
|
304
688
|
* 多选模式
|
|
305
689
|
*/
|
|
306
690
|
multiple: {
|
|
307
|
-
type: [Boolean, Number],
|
|
691
|
+
type: [Boolean, Number, Array],
|
|
308
692
|
default: () => false
|
|
309
693
|
},
|
|
310
694
|
/**
|
|
@@ -345,7 +729,8 @@ function useSelectionContext() {
|
|
|
345
729
|
itemClass: "",
|
|
346
730
|
activateEvent: sharedConfig.activateEvent,
|
|
347
731
|
label: null,
|
|
348
|
-
multiple: false
|
|
732
|
+
multiple: false,
|
|
733
|
+
limit: [0, Number.POSITIVE_INFINITY]
|
|
349
734
|
});
|
|
350
735
|
}
|
|
351
736
|
const useSelectionList = defineHookComponent({
|
|
@@ -386,16 +771,26 @@ const useSelectionList = defineHookComponent({
|
|
|
386
771
|
function isActive(value) {
|
|
387
772
|
return actives.includes(value);
|
|
388
773
|
}
|
|
774
|
+
const multipleActive = computed(() => !!props.multiple);
|
|
775
|
+
const multipleLimit = computed(() => {
|
|
776
|
+
if (Array.isArray(props.multiple)) {
|
|
777
|
+
if (props.multiple[1] === void 0) {
|
|
778
|
+
return [props.multiple[0], Number.POSITIVE_INFINITY];
|
|
779
|
+
}
|
|
780
|
+
return props.multiple;
|
|
781
|
+
}
|
|
782
|
+
return [0, Number.POSITIVE_INFINITY];
|
|
783
|
+
});
|
|
389
784
|
function activate(value) {
|
|
785
|
+
const [min, max] = multipleLimit.value;
|
|
390
786
|
if (isActive(value)) {
|
|
391
|
-
if (
|
|
787
|
+
if (multipleActive.value && actives.length > min || props.clearable) {
|
|
392
788
|
actives.splice(actives.indexOf(value), 1);
|
|
393
789
|
emitChange();
|
|
394
790
|
}
|
|
395
791
|
} else {
|
|
396
792
|
if (props.multiple) {
|
|
397
|
-
|
|
398
|
-
if (actives.length < limit) {
|
|
793
|
+
if (actives.length < max) {
|
|
399
794
|
actives.push(value);
|
|
400
795
|
emitChange();
|
|
401
796
|
}
|
|
@@ -433,7 +828,8 @@ const useSelectionList = defineHookComponent({
|
|
|
433
828
|
disabledClass: computed(() => cls(props.disabledClass)),
|
|
434
829
|
itemClass: computed(() => cls(props.itemClass)),
|
|
435
830
|
label: computed(() => props.label),
|
|
436
|
-
multiple:
|
|
831
|
+
multiple: multipleActive,
|
|
832
|
+
limit: multipleLimit,
|
|
437
833
|
clearable: computed(() => props.clearable),
|
|
438
834
|
defaultValue: computed(() => props.defaultValue),
|
|
439
835
|
activateEvent: computed(() => props.activateEvent ?? sharedConfig.activateEvent),
|
|
@@ -467,60 +863,6 @@ const useSelectionList = defineHookComponent({
|
|
|
467
863
|
}
|
|
468
864
|
});
|
|
469
865
|
|
|
470
|
-
const HiTabs = defineComponent({
|
|
471
|
-
props: {
|
|
472
|
-
...selectionProps,
|
|
473
|
-
headerClass: {
|
|
474
|
-
type: classPropType
|
|
475
|
-
},
|
|
476
|
-
as: {
|
|
477
|
-
type: String,
|
|
478
|
-
default: "div"
|
|
479
|
-
},
|
|
480
|
-
headerAs: {
|
|
481
|
-
type: String,
|
|
482
|
-
default: "div"
|
|
483
|
-
},
|
|
484
|
-
contentAs: {
|
|
485
|
-
type: String,
|
|
486
|
-
default: "div"
|
|
487
|
-
},
|
|
488
|
-
contentClass: {
|
|
489
|
-
type: classPropType
|
|
490
|
-
},
|
|
491
|
-
keepAlive: {
|
|
492
|
-
type: [Boolean, Object],
|
|
493
|
-
default: false
|
|
494
|
-
}
|
|
495
|
-
},
|
|
496
|
-
setup(props, context) {
|
|
497
|
-
const selection = useSelectionList(props, context);
|
|
498
|
-
return () => {
|
|
499
|
-
let component = selection.renderItem();
|
|
500
|
-
if (props.keepAlive) {
|
|
501
|
-
component = h(KeepAlive, {
|
|
502
|
-
...typeof props.keepAlive === "object" ? props.keepAlive : {}
|
|
503
|
-
}, component);
|
|
504
|
-
}
|
|
505
|
-
if (context.slots.content) {
|
|
506
|
-
component = context.slots.content({
|
|
507
|
-
component
|
|
508
|
-
});
|
|
509
|
-
} else {
|
|
510
|
-
component = h(props.contentAs, {
|
|
511
|
-
class: props.contentClass
|
|
512
|
-
}, component);
|
|
513
|
-
}
|
|
514
|
-
return h(props.as, [
|
|
515
|
-
h(props.headerAs, {
|
|
516
|
-
class: props.headerClass
|
|
517
|
-
}, renderSlot(context.slots, "default")),
|
|
518
|
-
component
|
|
519
|
-
]);
|
|
520
|
-
};
|
|
521
|
-
}
|
|
522
|
-
});
|
|
523
|
-
|
|
524
866
|
const itemProps = defineHookProps({
|
|
525
867
|
value: {
|
|
526
868
|
type: valuePropType,
|
|
@@ -614,10 +956,12 @@ const useSelectionItem = defineHookComponent({
|
|
|
614
956
|
});
|
|
615
957
|
|
|
616
958
|
const HiTabPane = defineComponent({
|
|
959
|
+
name: "HiTabPane",
|
|
617
960
|
props: {
|
|
618
961
|
...itemProps
|
|
619
962
|
},
|
|
620
963
|
emits: itemEmits,
|
|
964
|
+
inheritAttrs: true,
|
|
621
965
|
setup(props, context) {
|
|
622
966
|
const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
|
|
623
967
|
return () => {
|
|
@@ -630,43 +974,57 @@ const HiTabPane = defineComponent({
|
|
|
630
974
|
}
|
|
631
975
|
});
|
|
632
976
|
|
|
633
|
-
const
|
|
634
|
-
name: "
|
|
977
|
+
const HiTabs = defineComponent({
|
|
978
|
+
name: "HiTabs",
|
|
635
979
|
props: {
|
|
636
|
-
...
|
|
980
|
+
...selectionProps,
|
|
981
|
+
headerClass: {
|
|
982
|
+
type: classPropType
|
|
983
|
+
},
|
|
637
984
|
as: {
|
|
638
985
|
type: String,
|
|
639
986
|
default: "div"
|
|
987
|
+
},
|
|
988
|
+
headerAs: {
|
|
989
|
+
type: String,
|
|
990
|
+
default: "div"
|
|
991
|
+
},
|
|
992
|
+
contentAs: {
|
|
993
|
+
type: String,
|
|
994
|
+
default: "div"
|
|
995
|
+
},
|
|
996
|
+
contentClass: {
|
|
997
|
+
type: classPropType
|
|
998
|
+
},
|
|
999
|
+
keepAlive: {
|
|
1000
|
+
type: [Boolean, Object],
|
|
1001
|
+
default: false
|
|
640
1002
|
}
|
|
641
1003
|
},
|
|
642
|
-
|
|
1004
|
+
inheritAttrs: true,
|
|
643
1005
|
setup(props, context) {
|
|
644
|
-
const
|
|
1006
|
+
const selection = useSelectionList(props, context);
|
|
645
1007
|
return () => {
|
|
646
|
-
let
|
|
647
|
-
|
|
648
|
-
{
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
ref: popupRef
|
|
652
|
-
},
|
|
653
|
-
renderSlot(context.slots, "popup")
|
|
654
|
-
);
|
|
655
|
-
if (props.teleport) {
|
|
656
|
-
content = h(
|
|
657
|
-
Teleport,
|
|
658
|
-
{
|
|
659
|
-
to: props.teleport === true ? "body" : props.teleport
|
|
660
|
-
},
|
|
661
|
-
content
|
|
662
|
-
);
|
|
1008
|
+
let component = selection.renderItem();
|
|
1009
|
+
if (props.keepAlive) {
|
|
1010
|
+
component = h(KeepAlive, {
|
|
1011
|
+
...typeof props.keepAlive === "object" ? props.keepAlive : {}
|
|
1012
|
+
}, component);
|
|
663
1013
|
}
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
1014
|
+
if (context.slots.content) {
|
|
1015
|
+
component = context.slots.content({
|
|
1016
|
+
component
|
|
1017
|
+
});
|
|
1018
|
+
} else {
|
|
1019
|
+
component = h(props.contentAs, {
|
|
1020
|
+
class: props.contentClass
|
|
1021
|
+
}, component);
|
|
1022
|
+
}
|
|
1023
|
+
return h(props.as, [
|
|
1024
|
+
h(props.headerAs, {
|
|
1025
|
+
class: props.headerClass
|
|
1026
|
+
}, renderSlot(context.slots, "default")),
|
|
1027
|
+
component
|
|
670
1028
|
]);
|
|
671
1029
|
};
|
|
672
1030
|
}
|
|
@@ -677,6 +1035,7 @@ const components = {
|
|
|
677
1035
|
HiAffix: HiAffix,
|
|
678
1036
|
HiAffixTarget: HiAffixTarget,
|
|
679
1037
|
HiConfigProvider: HiConfigProvider,
|
|
1038
|
+
HiFileUpload: HiFileUpload,
|
|
680
1039
|
HiIcon: HiIcon,
|
|
681
1040
|
HiItem: HiItem,
|
|
682
1041
|
HiPopover: HiPopover,
|
|
@@ -692,4 +1051,4 @@ function install(app) {
|
|
|
692
1051
|
}
|
|
693
1052
|
}
|
|
694
1053
|
|
|
695
|
-
export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
|
|
1054
|
+
export { HiAffix, HiAffixTarget, HiConfigProvider, HiFileUpload, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
|