@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.mjs CHANGED
@@ -1,26 +1,314 @@
1
- import { defineComponent, h, renderSlot, ref, inject, computed, watchPostEffect, provide, reactive, KeepAlive, watch, Teleport } from 'vue';
2
- import { affixProps as affixProps$1, useAffix, selectionProps as selectionProps$1, selectionEmits as selectionEmits$1, useSelectionList as useSelectionList$1, itemProps as itemProps$1, itemEmits as itemEmits$1, useSelectionItem as useSelectionItem$1, iconProps, useIcon, switchProps, switchEmits, useSwitch, configProviderProps, provideSharedConfig, popoverProps, popoverEmits, usePopover } from '@hoci/core';
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
- const HiAffix = defineComponent({
8
- name: "HiAffix",
9
- props: {
10
- ...affixProps$1,
11
- as: {
12
- type: String,
13
- default: "div"
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
- setup(props, context) {
17
- const { className, wrapperRef, isFixed, placeholderStyle, fixedStyle } = useAffix(props, context);
18
- return () => h(props.as, { ref: wrapperRef }, [
19
- isFixed.value && h("div", { style: placeholderStyle.value }),
20
- h("div", { class: className.value, style: fixedStyle.value }, renderSlot(context.slots, "default"))
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 = ref(null);
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 = ref(null);
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 HiSelection = defineComponent({
165
- name: "HiSelection",
452
+ const HiAffix = defineComponent({
453
+ name: "HiAffix",
166
454
  props: {
167
- ...selectionProps$1,
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 { render } = useSelectionList$1(props, context);
176
- return () => h(props.as, {}, render());
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 HiIcon = defineComponent({
570
+ const HiPopover = defineComponent({
571
+ name: "HiPopover",
208
572
  props: {
209
- ...iconProps,
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 { style } = useIcon(props, context);
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
- style: style.value
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 (props.multiple || props.clearable) {
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
- const limit = typeof props.multiple === "number" ? props.multiple : Number.POSITIVE_INFINITY;
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: computed(() => props.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 HiPopover = defineComponent({
634
- name: "HiPopover",
977
+ const HiTabs = defineComponent({
978
+ name: "HiTabs",
635
979
  props: {
636
- ...popoverProps,
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
- emits: popoverEmits,
1004
+ inheritAttrs: true,
643
1005
  setup(props, context) {
644
- const { triggerRef, popupClass, events, popupRef, popupStyle } = usePopover(props, context);
1006
+ const selection = useSelectionList(props, context);
645
1007
  return () => {
646
- let content = h(
647
- "div",
648
- {
649
- class: popupClass.value,
650
- style: popupStyle.value,
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
- return h(props.as, {
665
- ref: triggerRef,
666
- ...events
667
- }, [
668
- renderSlot(context.slots, "default"),
669
- content
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 };