@hoci/components 0.5.8 → 0.6.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.
Files changed (6) hide show
  1. package/dist/index.cjs +37 -36
  2. package/dist/index.d.cts +21 -40
  3. package/dist/index.d.mts +21 -40
  4. package/dist/index.d.ts +21 -40
  5. package/dist/index.mjs +37 -36
  6. package/package.json +5 -5
package/dist/index.cjs CHANGED
@@ -17,14 +17,10 @@ const HiAffix = vue.defineComponent({
17
17
  },
18
18
  setup(props, context) {
19
19
  const { className, wrapperRef, isFixed, placeholderStyle, fixedStyle } = core.useAffix(props, context);
20
- return () => vue.h(
21
- props.as,
22
- { ref: wrapperRef },
23
- [
24
- isFixed.value && vue.h("div", { style: placeholderStyle.value }),
25
- vue.h("div", { class: className.value, style: fixedStyle.value }, vue.renderSlot(context.slots, "default"))
26
- ]
27
- );
20
+ return () => vue.h(props.as, { ref: wrapperRef }, [
21
+ isFixed.value && vue.h("div", { style: placeholderStyle.value }),
22
+ vue.h("div", { class: className.value, style: fixedStyle.value }, vue.renderSlot(context.slots, "default"))
23
+ ]);
28
24
  }
29
25
  });
30
26
 
@@ -57,9 +53,9 @@ const affixProps = shared.defineHookProps(
57
53
  type: [String, Object, Function]
58
54
  },
59
55
  /**
60
- * @zh z-index 值
61
- * @en Z index value
62
- */
56
+ * @zh z-index 值
57
+ * @en Z index value
58
+ */
63
59
  zIndex: {
64
60
  type: Number,
65
61
  default: 998
@@ -77,7 +73,7 @@ function getTargetRect(target) {
77
73
  shared.defineHookComponent({
78
74
  props: affixProps,
79
75
  setup(props, { emit }) {
80
- const wrapperRef = vue.ref(null);
76
+ const wrapperRef = vue.ref();
81
77
  const wrapperRect = shared.toReactive(core$1.useElementBounding(wrapperRef));
82
78
  const parentRef = vue.inject(AFFIX_TARGET_KEY, void 0);
83
79
  const targetRef = shared.useElement(props.target, parentRef);
@@ -158,7 +154,7 @@ function provideAffixTarget(target) {
158
154
  const HiAffixTarget = vue.defineComponent({
159
155
  name: "HiAffixTarget",
160
156
  setup(_, context) {
161
- const targetRef = vue.ref(null);
157
+ const targetRef = vue.ref();
162
158
  provideAffixTarget(targetRef);
163
159
  return () => vue.h("div", {
164
160
  ref: targetRef,
@@ -310,7 +306,7 @@ const selectionProps = shared.defineHookProps({
310
306
  * 多选模式
311
307
  */
312
308
  multiple: {
313
- type: [Boolean, Number],
309
+ type: [Boolean, Number, Array],
314
310
  default: () => false
315
311
  },
316
312
  /**
@@ -351,7 +347,8 @@ function useSelectionContext() {
351
347
  itemClass: "",
352
348
  activateEvent: sharedConfig.activateEvent,
353
349
  label: null,
354
- multiple: false
350
+ multiple: false,
351
+ limit: [0, Number.POSITIVE_INFINITY]
355
352
  });
356
353
  }
357
354
  const useSelectionList = shared.defineHookComponent({
@@ -392,16 +389,26 @@ const useSelectionList = shared.defineHookComponent({
392
389
  function isActive(value) {
393
390
  return actives.includes(value);
394
391
  }
392
+ const multipleActive = vue.computed(() => !!props.multiple);
393
+ const multipleLimit = vue.computed(() => {
394
+ if (Array.isArray(props.multiple)) {
395
+ if (props.multiple[1] === void 0) {
396
+ return [props.multiple[0], Number.POSITIVE_INFINITY];
397
+ }
398
+ return props.multiple;
399
+ }
400
+ return [0, Number.POSITIVE_INFINITY];
401
+ });
395
402
  function activate(value) {
403
+ const [min, max] = multipleLimit.value;
396
404
  if (isActive(value)) {
397
- if (props.multiple || props.clearable) {
405
+ if (multipleActive.value && actives.length > min || props.clearable) {
398
406
  actives.splice(actives.indexOf(value), 1);
399
407
  emitChange();
400
408
  }
401
409
  } else {
402
410
  if (props.multiple) {
403
- const limit = typeof props.multiple === "number" ? props.multiple : Number.POSITIVE_INFINITY;
404
- if (actives.length < limit) {
411
+ if (actives.length < max) {
405
412
  actives.push(value);
406
413
  emitChange();
407
414
  }
@@ -439,7 +446,8 @@ const useSelectionList = shared.defineHookComponent({
439
446
  disabledClass: vue.computed(() => tslx.cls(props.disabledClass)),
440
447
  itemClass: vue.computed(() => tslx.cls(props.itemClass)),
441
448
  label: vue.computed(() => props.label),
442
- multiple: vue.computed(() => props.multiple),
449
+ multiple: multipleActive,
450
+ limit: multipleLimit,
443
451
  clearable: vue.computed(() => props.clearable),
444
452
  defaultValue: vue.computed(() => props.defaultValue),
445
453
  activateEvent: vue.computed(() => props.activateEvent ?? sharedConfig.activateEvent),
@@ -505,7 +513,7 @@ const HiTabs = vue.defineComponent({
505
513
  let component = selection.renderItem();
506
514
  if (props.keepAlive) {
507
515
  component = vue.h(vue.KeepAlive, {
508
- ...typeof props.keepAlive == "object" ? props.keepAlive : {}
516
+ ...typeof props.keepAlive === "object" ? props.keepAlive : {}
509
517
  }, component);
510
518
  }
511
519
  if (context.slots.content) {
@@ -541,9 +549,6 @@ const itemProps = shared.defineHookProps({
541
549
  type: Boolean,
542
550
  default: () => true
543
551
  },
544
- key: {
545
- type: [String, Number, Symbol]
546
- },
547
552
  activateEvent: {
548
553
  type: String
549
554
  },
@@ -568,7 +573,7 @@ const useSelectionItem = shared.defineHookComponent({
568
573
  };
569
574
  const label = vue.computed(() => {
570
575
  let label2 = props.label ?? context.label;
571
- if (label2 && typeof label2 == "function") {
576
+ if (label2 && typeof label2 === "function") {
572
577
  label2 = label2(props.value);
573
578
  }
574
579
  return Array.isArray(label2) ? label2 : [label2];
@@ -589,7 +594,7 @@ const useSelectionItem = shared.defineHookComponent({
589
594
  remove();
590
595
  remove = init({
591
596
  id: Math.random().toString(16).slice(2),
592
- label: typeof props.label == "string" ? props.label : void 0,
597
+ label: typeof props.label === "string" ? props.label : void 0,
593
598
  value,
594
599
  render
595
600
  });
@@ -630,15 +635,11 @@ const HiTabPane = vue.defineComponent({
630
635
  setup(props, context) {
631
636
  const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
632
637
  return () => {
633
- return vue.h(
634
- "div",
635
- {
636
- class: className.value,
637
- [`on${tslx.capitalize(activateEvent.value)}`]: activate,
638
- disabled: isDisabled.value
639
- },
640
- label.value
641
- );
638
+ return vue.h("div", {
639
+ class: className.value,
640
+ [`on${tslx.capitalize(activateEvent.value)}`]: activate,
641
+ disabled: isDisabled.value
642
+ }, label.value);
642
643
  };
643
644
  }
644
645
  });
@@ -699,11 +700,11 @@ const components = {
699
700
  HiTabs: HiTabs
700
701
  };
701
702
 
702
- const install = (app) => {
703
+ function install(app) {
703
704
  for (const key in components) {
704
705
  app.component(key, components[key]);
705
706
  }
706
- };
707
+ }
707
708
 
708
709
  exports.HiAffix = HiAffix;
709
710
  exports.HiAffixTarget = HiAffixTarget;
package/dist/index.d.cts CHANGED
@@ -2,7 +2,6 @@ import * as vue from 'vue';
2
2
  import { PropType, KeepAliveProps, App } from 'vue';
3
3
  import * as _hoci_core from '@hoci/core';
4
4
  import * as _hoci_shared from '@hoci/shared';
5
- import { ElementLike, ActivateEvent } from '@hoci/shared';
6
5
 
7
6
  declare const HiAffix: vue.DefineComponent<{
8
7
  as: {
@@ -22,7 +21,7 @@ declare const HiAffix: vue.DefineComponent<{
22
21
  default: string;
23
22
  };
24
23
  target: {
25
- type: vue.PropType<string | HTMLElement>;
24
+ type: vue.PropType<string | Element | (() => Element | null | undefined)>;
26
25
  };
27
26
  zIndex: {
28
27
  type: NumberConstructor;
@@ -48,7 +47,7 @@ declare const HiAffix: vue.DefineComponent<{
48
47
  default: string;
49
48
  };
50
49
  target: {
51
- type: vue.PropType<string | HTMLElement>;
50
+ type: vue.PropType<string | Element | (() => Element | null | undefined)>;
52
51
  };
53
52
  zIndex: {
54
53
  type: NumberConstructor;
@@ -95,7 +94,7 @@ declare const HiSelection: vue.DefineComponent<{
95
94
  type: vue.PropType<string | ((val?: any) => string) | null>;
96
95
  };
97
96
  multiple: {
98
- type: (NumberConstructor | BooleanConstructor)[];
97
+ type: vue.PropType<boolean | number | [number, number?]>;
99
98
  default: () => false;
100
99
  };
101
100
  clearable: {
@@ -139,7 +138,7 @@ declare const HiSelection: vue.DefineComponent<{
139
138
  type: vue.PropType<string | ((val?: any) => string) | null>;
140
139
  };
141
140
  multiple: {
142
- type: (NumberConstructor | BooleanConstructor)[];
141
+ type: vue.PropType<boolean | number | [number, number?]>;
143
142
  default: () => false;
144
143
  };
145
144
  clearable: {
@@ -159,7 +158,7 @@ declare const HiSelection: vue.DefineComponent<{
159
158
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
160
159
  onReject?: ((...args: any[]) => any) | undefined;
161
160
  }, {
162
- multiple: number | boolean;
161
+ multiple: number | boolean | [number, (number | undefined)?];
163
162
  modelValue: any;
164
163
  activeClass: string | string[] | Record<string, boolean>;
165
164
  itemClass: string | string[] | Record<string, boolean>;
@@ -180,15 +179,12 @@ declare const HiItem: vue.DefineComponent<{
180
179
  default(): string;
181
180
  };
182
181
  label: {
183
- type: vue.PropType<_hoci_core.ElementLike | ((val: any) => string) | null>;
182
+ type: vue.PropType<string | ((val: any) => string) | _hoci_core.ElementLike | null>;
184
183
  };
185
184
  keepAlive: {
186
185
  type: BooleanConstructor;
187
186
  default: () => true;
188
187
  };
189
- key: {
190
- type: vue.PropType<string | number | symbol>;
191
- };
192
188
  activateEvent: {
193
189
  type: vue.PropType<_hoci_core.ActivateEvent>;
194
190
  };
@@ -208,15 +204,12 @@ declare const HiItem: vue.DefineComponent<{
208
204
  default(): string;
209
205
  };
210
206
  label: {
211
- type: vue.PropType<_hoci_core.ElementLike | ((val: any) => string) | null>;
207
+ type: vue.PropType<string | ((val: any) => string) | _hoci_core.ElementLike | null>;
212
208
  };
213
209
  keepAlive: {
214
210
  type: BooleanConstructor;
215
211
  default: () => true;
216
212
  };
217
- key: {
218
- type: vue.PropType<string | number | symbol>;
219
- };
220
213
  activateEvent: {
221
214
  type: vue.PropType<_hoci_core.ActivateEvent>;
222
215
  };
@@ -366,13 +359,10 @@ declare const HiConfigProvider: vue.DefineComponent<{
366
359
  type: StringConstructor;
367
360
  };
368
361
  icon: {
369
- type: vue.PropType<Partial<{
370
- size: number | undefined;
371
- sizeUnit: string | undefined;
372
- }>>;
362
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["icon"]>>;
373
363
  };
374
364
  activateEvent: {
375
- type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
365
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["activateEvent"]>>;
376
366
  };
377
367
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
378
368
  [key: string]: any;
@@ -381,13 +371,10 @@ declare const HiConfigProvider: vue.DefineComponent<{
381
371
  type: StringConstructor;
382
372
  };
383
373
  icon: {
384
- type: vue.PropType<Partial<{
385
- size: number | undefined;
386
- sizeUnit: string | undefined;
387
- }>>;
374
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["icon"]>>;
388
375
  };
389
376
  activateEvent: {
390
- type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
377
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["activateEvent"]>>;
391
378
  };
392
379
  }>>, {}, {}>;
393
380
 
@@ -438,7 +425,7 @@ declare const HiTabs: vue.DefineComponent<{
438
425
  type: PropType<string | ((val?: any) => string) | null>;
439
426
  };
440
427
  multiple: {
441
- type: (NumberConstructor | BooleanConstructor)[];
428
+ type: PropType<boolean | number | [number, number?]>;
442
429
  default: () => false;
443
430
  };
444
431
  clearable: {
@@ -500,7 +487,7 @@ declare const HiTabs: vue.DefineComponent<{
500
487
  type: PropType<string | ((val?: any) => string) | null>;
501
488
  };
502
489
  multiple: {
503
- type: (NumberConstructor | BooleanConstructor)[];
490
+ type: PropType<boolean | number | [number, number?]>;
504
491
  default: () => false;
505
492
  };
506
493
  clearable: {
@@ -514,7 +501,7 @@ declare const HiTabs: vue.DefineComponent<{
514
501
  type: PropType<_hoci_shared.ActivateEvent>;
515
502
  };
516
503
  }>>, {
517
- multiple: number | boolean;
504
+ multiple: number | boolean | [number, (number | undefined)?];
518
505
  modelValue: any;
519
506
  activeClass: string | string[] | Record<string, boolean>;
520
507
  itemClass: string | string[] | Record<string, boolean>;
@@ -534,17 +521,14 @@ declare const HiTabPane: vue.DefineComponent<{
534
521
  default(): string;
535
522
  };
536
523
  label: {
537
- type: vue.PropType<ElementLike | ((val: any) => string) | null>;
524
+ type: vue.PropType<string | ((val: any) => string) | _hoci_shared.ElementLike | null>;
538
525
  };
539
526
  keepAlive: {
540
527
  type: BooleanConstructor;
541
528
  default: () => true;
542
529
  };
543
- key: {
544
- type: vue.PropType<string | number | symbol>;
545
- };
546
530
  activateEvent: {
547
- type: vue.PropType<ActivateEvent>;
531
+ type: vue.PropType<_hoci_shared.ActivateEvent>;
548
532
  };
549
533
  disabled: {
550
534
  type: BooleanConstructor;
@@ -558,17 +542,14 @@ declare const HiTabPane: vue.DefineComponent<{
558
542
  default(): string;
559
543
  };
560
544
  label: {
561
- type: vue.PropType<ElementLike | ((val: any) => string) | null>;
545
+ type: vue.PropType<string | ((val: any) => string) | _hoci_shared.ElementLike | null>;
562
546
  };
563
547
  keepAlive: {
564
548
  type: BooleanConstructor;
565
549
  default: () => true;
566
550
  };
567
- key: {
568
- type: vue.PropType<string | number | symbol>;
569
- };
570
551
  activateEvent: {
571
- type: vue.PropType<ActivateEvent>;
552
+ type: vue.PropType<_hoci_shared.ActivateEvent>;
572
553
  };
573
554
  disabled: {
574
555
  type: BooleanConstructor;
@@ -615,7 +596,7 @@ declare const HiPopover: vue.DefineComponent<{
615
596
  default: () => false;
616
597
  };
617
598
  teleport: {
618
- type: vue.PropType<string | boolean | HTMLElement>;
599
+ type: vue.PropType<string | HTMLElement | boolean>;
619
600
  default: () => true;
620
601
  };
621
602
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -653,7 +634,7 @@ declare const HiPopover: vue.DefineComponent<{
653
634
  default: () => false;
654
635
  };
655
636
  teleport: {
656
- type: vue.PropType<string | boolean | HTMLElement>;
637
+ type: vue.PropType<string | HTMLElement | boolean>;
657
638
  default: () => true;
658
639
  };
659
640
  }>> & {
@@ -670,6 +651,6 @@ declare const HiPopover: vue.DefineComponent<{
670
651
  as: string;
671
652
  }, {}>;
672
653
 
673
- declare const install: (app: App) => void;
654
+ declare function install(app: App): void;
674
655
 
675
656
  export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/dist/index.d.mts CHANGED
@@ -2,7 +2,6 @@ import * as vue from 'vue';
2
2
  import { PropType, KeepAliveProps, App } from 'vue';
3
3
  import * as _hoci_core from '@hoci/core';
4
4
  import * as _hoci_shared from '@hoci/shared';
5
- import { ElementLike, ActivateEvent } from '@hoci/shared';
6
5
 
7
6
  declare const HiAffix: vue.DefineComponent<{
8
7
  as: {
@@ -22,7 +21,7 @@ declare const HiAffix: vue.DefineComponent<{
22
21
  default: string;
23
22
  };
24
23
  target: {
25
- type: vue.PropType<string | HTMLElement>;
24
+ type: vue.PropType<string | Element | (() => Element | null | undefined)>;
26
25
  };
27
26
  zIndex: {
28
27
  type: NumberConstructor;
@@ -48,7 +47,7 @@ declare const HiAffix: vue.DefineComponent<{
48
47
  default: string;
49
48
  };
50
49
  target: {
51
- type: vue.PropType<string | HTMLElement>;
50
+ type: vue.PropType<string | Element | (() => Element | null | undefined)>;
52
51
  };
53
52
  zIndex: {
54
53
  type: NumberConstructor;
@@ -95,7 +94,7 @@ declare const HiSelection: vue.DefineComponent<{
95
94
  type: vue.PropType<string | ((val?: any) => string) | null>;
96
95
  };
97
96
  multiple: {
98
- type: (NumberConstructor | BooleanConstructor)[];
97
+ type: vue.PropType<boolean | number | [number, number?]>;
99
98
  default: () => false;
100
99
  };
101
100
  clearable: {
@@ -139,7 +138,7 @@ declare const HiSelection: vue.DefineComponent<{
139
138
  type: vue.PropType<string | ((val?: any) => string) | null>;
140
139
  };
141
140
  multiple: {
142
- type: (NumberConstructor | BooleanConstructor)[];
141
+ type: vue.PropType<boolean | number | [number, number?]>;
143
142
  default: () => false;
144
143
  };
145
144
  clearable: {
@@ -159,7 +158,7 @@ declare const HiSelection: vue.DefineComponent<{
159
158
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
160
159
  onReject?: ((...args: any[]) => any) | undefined;
161
160
  }, {
162
- multiple: number | boolean;
161
+ multiple: number | boolean | [number, (number | undefined)?];
163
162
  modelValue: any;
164
163
  activeClass: string | string[] | Record<string, boolean>;
165
164
  itemClass: string | string[] | Record<string, boolean>;
@@ -180,15 +179,12 @@ declare const HiItem: vue.DefineComponent<{
180
179
  default(): string;
181
180
  };
182
181
  label: {
183
- type: vue.PropType<_hoci_core.ElementLike | ((val: any) => string) | null>;
182
+ type: vue.PropType<string | ((val: any) => string) | _hoci_core.ElementLike | null>;
184
183
  };
185
184
  keepAlive: {
186
185
  type: BooleanConstructor;
187
186
  default: () => true;
188
187
  };
189
- key: {
190
- type: vue.PropType<string | number | symbol>;
191
- };
192
188
  activateEvent: {
193
189
  type: vue.PropType<_hoci_core.ActivateEvent>;
194
190
  };
@@ -208,15 +204,12 @@ declare const HiItem: vue.DefineComponent<{
208
204
  default(): string;
209
205
  };
210
206
  label: {
211
- type: vue.PropType<_hoci_core.ElementLike | ((val: any) => string) | null>;
207
+ type: vue.PropType<string | ((val: any) => string) | _hoci_core.ElementLike | null>;
212
208
  };
213
209
  keepAlive: {
214
210
  type: BooleanConstructor;
215
211
  default: () => true;
216
212
  };
217
- key: {
218
- type: vue.PropType<string | number | symbol>;
219
- };
220
213
  activateEvent: {
221
214
  type: vue.PropType<_hoci_core.ActivateEvent>;
222
215
  };
@@ -366,13 +359,10 @@ declare const HiConfigProvider: vue.DefineComponent<{
366
359
  type: StringConstructor;
367
360
  };
368
361
  icon: {
369
- type: vue.PropType<Partial<{
370
- size: number | undefined;
371
- sizeUnit: string | undefined;
372
- }>>;
362
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["icon"]>>;
373
363
  };
374
364
  activateEvent: {
375
- type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
365
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["activateEvent"]>>;
376
366
  };
377
367
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
378
368
  [key: string]: any;
@@ -381,13 +371,10 @@ declare const HiConfigProvider: vue.DefineComponent<{
381
371
  type: StringConstructor;
382
372
  };
383
373
  icon: {
384
- type: vue.PropType<Partial<{
385
- size: number | undefined;
386
- sizeUnit: string | undefined;
387
- }>>;
374
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["icon"]>>;
388
375
  };
389
376
  activateEvent: {
390
- type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
377
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["activateEvent"]>>;
391
378
  };
392
379
  }>>, {}, {}>;
393
380
 
@@ -438,7 +425,7 @@ declare const HiTabs: vue.DefineComponent<{
438
425
  type: PropType<string | ((val?: any) => string) | null>;
439
426
  };
440
427
  multiple: {
441
- type: (NumberConstructor | BooleanConstructor)[];
428
+ type: PropType<boolean | number | [number, number?]>;
442
429
  default: () => false;
443
430
  };
444
431
  clearable: {
@@ -500,7 +487,7 @@ declare const HiTabs: vue.DefineComponent<{
500
487
  type: PropType<string | ((val?: any) => string) | null>;
501
488
  };
502
489
  multiple: {
503
- type: (NumberConstructor | BooleanConstructor)[];
490
+ type: PropType<boolean | number | [number, number?]>;
504
491
  default: () => false;
505
492
  };
506
493
  clearable: {
@@ -514,7 +501,7 @@ declare const HiTabs: vue.DefineComponent<{
514
501
  type: PropType<_hoci_shared.ActivateEvent>;
515
502
  };
516
503
  }>>, {
517
- multiple: number | boolean;
504
+ multiple: number | boolean | [number, (number | undefined)?];
518
505
  modelValue: any;
519
506
  activeClass: string | string[] | Record<string, boolean>;
520
507
  itemClass: string | string[] | Record<string, boolean>;
@@ -534,17 +521,14 @@ declare const HiTabPane: vue.DefineComponent<{
534
521
  default(): string;
535
522
  };
536
523
  label: {
537
- type: vue.PropType<ElementLike | ((val: any) => string) | null>;
524
+ type: vue.PropType<string | ((val: any) => string) | _hoci_shared.ElementLike | null>;
538
525
  };
539
526
  keepAlive: {
540
527
  type: BooleanConstructor;
541
528
  default: () => true;
542
529
  };
543
- key: {
544
- type: vue.PropType<string | number | symbol>;
545
- };
546
530
  activateEvent: {
547
- type: vue.PropType<ActivateEvent>;
531
+ type: vue.PropType<_hoci_shared.ActivateEvent>;
548
532
  };
549
533
  disabled: {
550
534
  type: BooleanConstructor;
@@ -558,17 +542,14 @@ declare const HiTabPane: vue.DefineComponent<{
558
542
  default(): string;
559
543
  };
560
544
  label: {
561
- type: vue.PropType<ElementLike | ((val: any) => string) | null>;
545
+ type: vue.PropType<string | ((val: any) => string) | _hoci_shared.ElementLike | null>;
562
546
  };
563
547
  keepAlive: {
564
548
  type: BooleanConstructor;
565
549
  default: () => true;
566
550
  };
567
- key: {
568
- type: vue.PropType<string | number | symbol>;
569
- };
570
551
  activateEvent: {
571
- type: vue.PropType<ActivateEvent>;
552
+ type: vue.PropType<_hoci_shared.ActivateEvent>;
572
553
  };
573
554
  disabled: {
574
555
  type: BooleanConstructor;
@@ -615,7 +596,7 @@ declare const HiPopover: vue.DefineComponent<{
615
596
  default: () => false;
616
597
  };
617
598
  teleport: {
618
- type: vue.PropType<string | boolean | HTMLElement>;
599
+ type: vue.PropType<string | HTMLElement | boolean>;
619
600
  default: () => true;
620
601
  };
621
602
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -653,7 +634,7 @@ declare const HiPopover: vue.DefineComponent<{
653
634
  default: () => false;
654
635
  };
655
636
  teleport: {
656
- type: vue.PropType<string | boolean | HTMLElement>;
637
+ type: vue.PropType<string | HTMLElement | boolean>;
657
638
  default: () => true;
658
639
  };
659
640
  }>> & {
@@ -670,6 +651,6 @@ declare const HiPopover: vue.DefineComponent<{
670
651
  as: string;
671
652
  }, {}>;
672
653
 
673
- declare const install: (app: App) => void;
654
+ declare function install(app: App): void;
674
655
 
675
656
  export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/dist/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import * as vue from 'vue';
2
2
  import { PropType, KeepAliveProps, App } from 'vue';
3
3
  import * as _hoci_core from '@hoci/core';
4
4
  import * as _hoci_shared from '@hoci/shared';
5
- import { ElementLike, ActivateEvent } from '@hoci/shared';
6
5
 
7
6
  declare const HiAffix: vue.DefineComponent<{
8
7
  as: {
@@ -22,7 +21,7 @@ declare const HiAffix: vue.DefineComponent<{
22
21
  default: string;
23
22
  };
24
23
  target: {
25
- type: vue.PropType<string | HTMLElement>;
24
+ type: vue.PropType<string | Element | (() => Element | null | undefined)>;
26
25
  };
27
26
  zIndex: {
28
27
  type: NumberConstructor;
@@ -48,7 +47,7 @@ declare const HiAffix: vue.DefineComponent<{
48
47
  default: string;
49
48
  };
50
49
  target: {
51
- type: vue.PropType<string | HTMLElement>;
50
+ type: vue.PropType<string | Element | (() => Element | null | undefined)>;
52
51
  };
53
52
  zIndex: {
54
53
  type: NumberConstructor;
@@ -95,7 +94,7 @@ declare const HiSelection: vue.DefineComponent<{
95
94
  type: vue.PropType<string | ((val?: any) => string) | null>;
96
95
  };
97
96
  multiple: {
98
- type: (NumberConstructor | BooleanConstructor)[];
97
+ type: vue.PropType<boolean | number | [number, number?]>;
99
98
  default: () => false;
100
99
  };
101
100
  clearable: {
@@ -139,7 +138,7 @@ declare const HiSelection: vue.DefineComponent<{
139
138
  type: vue.PropType<string | ((val?: any) => string) | null>;
140
139
  };
141
140
  multiple: {
142
- type: (NumberConstructor | BooleanConstructor)[];
141
+ type: vue.PropType<boolean | number | [number, number?]>;
143
142
  default: () => false;
144
143
  };
145
144
  clearable: {
@@ -159,7 +158,7 @@ declare const HiSelection: vue.DefineComponent<{
159
158
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
160
159
  onReject?: ((...args: any[]) => any) | undefined;
161
160
  }, {
162
- multiple: number | boolean;
161
+ multiple: number | boolean | [number, (number | undefined)?];
163
162
  modelValue: any;
164
163
  activeClass: string | string[] | Record<string, boolean>;
165
164
  itemClass: string | string[] | Record<string, boolean>;
@@ -180,15 +179,12 @@ declare const HiItem: vue.DefineComponent<{
180
179
  default(): string;
181
180
  };
182
181
  label: {
183
- type: vue.PropType<_hoci_core.ElementLike | ((val: any) => string) | null>;
182
+ type: vue.PropType<string | ((val: any) => string) | _hoci_core.ElementLike | null>;
184
183
  };
185
184
  keepAlive: {
186
185
  type: BooleanConstructor;
187
186
  default: () => true;
188
187
  };
189
- key: {
190
- type: vue.PropType<string | number | symbol>;
191
- };
192
188
  activateEvent: {
193
189
  type: vue.PropType<_hoci_core.ActivateEvent>;
194
190
  };
@@ -208,15 +204,12 @@ declare const HiItem: vue.DefineComponent<{
208
204
  default(): string;
209
205
  };
210
206
  label: {
211
- type: vue.PropType<_hoci_core.ElementLike | ((val: any) => string) | null>;
207
+ type: vue.PropType<string | ((val: any) => string) | _hoci_core.ElementLike | null>;
212
208
  };
213
209
  keepAlive: {
214
210
  type: BooleanConstructor;
215
211
  default: () => true;
216
212
  };
217
- key: {
218
- type: vue.PropType<string | number | symbol>;
219
- };
220
213
  activateEvent: {
221
214
  type: vue.PropType<_hoci_core.ActivateEvent>;
222
215
  };
@@ -366,13 +359,10 @@ declare const HiConfigProvider: vue.DefineComponent<{
366
359
  type: StringConstructor;
367
360
  };
368
361
  icon: {
369
- type: vue.PropType<Partial<{
370
- size: number | undefined;
371
- sizeUnit: string | undefined;
372
- }>>;
362
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["icon"]>>;
373
363
  };
374
364
  activateEvent: {
375
- type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
365
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["activateEvent"]>>;
376
366
  };
377
367
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
378
368
  [key: string]: any;
@@ -381,13 +371,10 @@ declare const HiConfigProvider: vue.DefineComponent<{
381
371
  type: StringConstructor;
382
372
  };
383
373
  icon: {
384
- type: vue.PropType<Partial<{
385
- size: number | undefined;
386
- sizeUnit: string | undefined;
387
- }>>;
374
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["icon"]>>;
388
375
  };
389
376
  activateEvent: {
390
- type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
377
+ type: vue.PropType<Partial<_hoci_core.SharedConfig["activateEvent"]>>;
391
378
  };
392
379
  }>>, {}, {}>;
393
380
 
@@ -438,7 +425,7 @@ declare const HiTabs: vue.DefineComponent<{
438
425
  type: PropType<string | ((val?: any) => string) | null>;
439
426
  };
440
427
  multiple: {
441
- type: (NumberConstructor | BooleanConstructor)[];
428
+ type: PropType<boolean | number | [number, number?]>;
442
429
  default: () => false;
443
430
  };
444
431
  clearable: {
@@ -500,7 +487,7 @@ declare const HiTabs: vue.DefineComponent<{
500
487
  type: PropType<string | ((val?: any) => string) | null>;
501
488
  };
502
489
  multiple: {
503
- type: (NumberConstructor | BooleanConstructor)[];
490
+ type: PropType<boolean | number | [number, number?]>;
504
491
  default: () => false;
505
492
  };
506
493
  clearable: {
@@ -514,7 +501,7 @@ declare const HiTabs: vue.DefineComponent<{
514
501
  type: PropType<_hoci_shared.ActivateEvent>;
515
502
  };
516
503
  }>>, {
517
- multiple: number | boolean;
504
+ multiple: number | boolean | [number, (number | undefined)?];
518
505
  modelValue: any;
519
506
  activeClass: string | string[] | Record<string, boolean>;
520
507
  itemClass: string | string[] | Record<string, boolean>;
@@ -534,17 +521,14 @@ declare const HiTabPane: vue.DefineComponent<{
534
521
  default(): string;
535
522
  };
536
523
  label: {
537
- type: vue.PropType<ElementLike | ((val: any) => string) | null>;
524
+ type: vue.PropType<string | ((val: any) => string) | _hoci_shared.ElementLike | null>;
538
525
  };
539
526
  keepAlive: {
540
527
  type: BooleanConstructor;
541
528
  default: () => true;
542
529
  };
543
- key: {
544
- type: vue.PropType<string | number | symbol>;
545
- };
546
530
  activateEvent: {
547
- type: vue.PropType<ActivateEvent>;
531
+ type: vue.PropType<_hoci_shared.ActivateEvent>;
548
532
  };
549
533
  disabled: {
550
534
  type: BooleanConstructor;
@@ -558,17 +542,14 @@ declare const HiTabPane: vue.DefineComponent<{
558
542
  default(): string;
559
543
  };
560
544
  label: {
561
- type: vue.PropType<ElementLike | ((val: any) => string) | null>;
545
+ type: vue.PropType<string | ((val: any) => string) | _hoci_shared.ElementLike | null>;
562
546
  };
563
547
  keepAlive: {
564
548
  type: BooleanConstructor;
565
549
  default: () => true;
566
550
  };
567
- key: {
568
- type: vue.PropType<string | number | symbol>;
569
- };
570
551
  activateEvent: {
571
- type: vue.PropType<ActivateEvent>;
552
+ type: vue.PropType<_hoci_shared.ActivateEvent>;
572
553
  };
573
554
  disabled: {
574
555
  type: BooleanConstructor;
@@ -615,7 +596,7 @@ declare const HiPopover: vue.DefineComponent<{
615
596
  default: () => false;
616
597
  };
617
598
  teleport: {
618
- type: vue.PropType<string | boolean | HTMLElement>;
599
+ type: vue.PropType<string | HTMLElement | boolean>;
619
600
  default: () => true;
620
601
  };
621
602
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -653,7 +634,7 @@ declare const HiPopover: vue.DefineComponent<{
653
634
  default: () => false;
654
635
  };
655
636
  teleport: {
656
- type: vue.PropType<string | boolean | HTMLElement>;
637
+ type: vue.PropType<string | HTMLElement | boolean>;
657
638
  default: () => true;
658
639
  };
659
640
  }>> & {
@@ -670,6 +651,6 @@ declare const HiPopover: vue.DefineComponent<{
670
651
  as: string;
671
652
  }, {}>;
672
653
 
673
- declare const install: (app: App) => void;
654
+ declare function install(app: App): void;
674
655
 
675
656
  export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/dist/index.mjs CHANGED
@@ -15,14 +15,10 @@ const HiAffix = defineComponent({
15
15
  },
16
16
  setup(props, context) {
17
17
  const { className, wrapperRef, isFixed, placeholderStyle, fixedStyle } = useAffix(props, context);
18
- return () => h(
19
- props.as,
20
- { ref: wrapperRef },
21
- [
22
- isFixed.value && h("div", { style: placeholderStyle.value }),
23
- h("div", { class: className.value, style: fixedStyle.value }, renderSlot(context.slots, "default"))
24
- ]
25
- );
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
+ ]);
26
22
  }
27
23
  });
28
24
 
@@ -55,9 +51,9 @@ const affixProps = defineHookProps(
55
51
  type: [String, Object, Function]
56
52
  },
57
53
  /**
58
- * @zh z-index 值
59
- * @en Z index value
60
- */
54
+ * @zh z-index 值
55
+ * @en Z index value
56
+ */
61
57
  zIndex: {
62
58
  type: Number,
63
59
  default: 998
@@ -75,7 +71,7 @@ function getTargetRect(target) {
75
71
  defineHookComponent({
76
72
  props: affixProps,
77
73
  setup(props, { emit }) {
78
- const wrapperRef = ref(null);
74
+ const wrapperRef = ref();
79
75
  const wrapperRect = toReactive(useElementBounding(wrapperRef));
80
76
  const parentRef = inject(AFFIX_TARGET_KEY, void 0);
81
77
  const targetRef = useElement(props.target, parentRef);
@@ -156,7 +152,7 @@ function provideAffixTarget(target) {
156
152
  const HiAffixTarget = defineComponent({
157
153
  name: "HiAffixTarget",
158
154
  setup(_, context) {
159
- const targetRef = ref(null);
155
+ const targetRef = ref();
160
156
  provideAffixTarget(targetRef);
161
157
  return () => h("div", {
162
158
  ref: targetRef,
@@ -308,7 +304,7 @@ const selectionProps = defineHookProps({
308
304
  * 多选模式
309
305
  */
310
306
  multiple: {
311
- type: [Boolean, Number],
307
+ type: [Boolean, Number, Array],
312
308
  default: () => false
313
309
  },
314
310
  /**
@@ -349,7 +345,8 @@ function useSelectionContext() {
349
345
  itemClass: "",
350
346
  activateEvent: sharedConfig.activateEvent,
351
347
  label: null,
352
- multiple: false
348
+ multiple: false,
349
+ limit: [0, Number.POSITIVE_INFINITY]
353
350
  });
354
351
  }
355
352
  const useSelectionList = defineHookComponent({
@@ -390,16 +387,26 @@ const useSelectionList = defineHookComponent({
390
387
  function isActive(value) {
391
388
  return actives.includes(value);
392
389
  }
390
+ const multipleActive = computed(() => !!props.multiple);
391
+ const multipleLimit = computed(() => {
392
+ if (Array.isArray(props.multiple)) {
393
+ if (props.multiple[1] === void 0) {
394
+ return [props.multiple[0], Number.POSITIVE_INFINITY];
395
+ }
396
+ return props.multiple;
397
+ }
398
+ return [0, Number.POSITIVE_INFINITY];
399
+ });
393
400
  function activate(value) {
401
+ const [min, max] = multipleLimit.value;
394
402
  if (isActive(value)) {
395
- if (props.multiple || props.clearable) {
403
+ if (multipleActive.value && actives.length > min || props.clearable) {
396
404
  actives.splice(actives.indexOf(value), 1);
397
405
  emitChange();
398
406
  }
399
407
  } else {
400
408
  if (props.multiple) {
401
- const limit = typeof props.multiple === "number" ? props.multiple : Number.POSITIVE_INFINITY;
402
- if (actives.length < limit) {
409
+ if (actives.length < max) {
403
410
  actives.push(value);
404
411
  emitChange();
405
412
  }
@@ -437,7 +444,8 @@ const useSelectionList = defineHookComponent({
437
444
  disabledClass: computed(() => cls(props.disabledClass)),
438
445
  itemClass: computed(() => cls(props.itemClass)),
439
446
  label: computed(() => props.label),
440
- multiple: computed(() => props.multiple),
447
+ multiple: multipleActive,
448
+ limit: multipleLimit,
441
449
  clearable: computed(() => props.clearable),
442
450
  defaultValue: computed(() => props.defaultValue),
443
451
  activateEvent: computed(() => props.activateEvent ?? sharedConfig.activateEvent),
@@ -503,7 +511,7 @@ const HiTabs = defineComponent({
503
511
  let component = selection.renderItem();
504
512
  if (props.keepAlive) {
505
513
  component = h(KeepAlive, {
506
- ...typeof props.keepAlive == "object" ? props.keepAlive : {}
514
+ ...typeof props.keepAlive === "object" ? props.keepAlive : {}
507
515
  }, component);
508
516
  }
509
517
  if (context.slots.content) {
@@ -539,9 +547,6 @@ const itemProps = defineHookProps({
539
547
  type: Boolean,
540
548
  default: () => true
541
549
  },
542
- key: {
543
- type: [String, Number, Symbol]
544
- },
545
550
  activateEvent: {
546
551
  type: String
547
552
  },
@@ -566,7 +571,7 @@ const useSelectionItem = defineHookComponent({
566
571
  };
567
572
  const label = computed(() => {
568
573
  let label2 = props.label ?? context.label;
569
- if (label2 && typeof label2 == "function") {
574
+ if (label2 && typeof label2 === "function") {
570
575
  label2 = label2(props.value);
571
576
  }
572
577
  return Array.isArray(label2) ? label2 : [label2];
@@ -587,7 +592,7 @@ const useSelectionItem = defineHookComponent({
587
592
  remove();
588
593
  remove = init({
589
594
  id: Math.random().toString(16).slice(2),
590
- label: typeof props.label == "string" ? props.label : void 0,
595
+ label: typeof props.label === "string" ? props.label : void 0,
591
596
  value,
592
597
  render
593
598
  });
@@ -628,15 +633,11 @@ const HiTabPane = defineComponent({
628
633
  setup(props, context) {
629
634
  const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
630
635
  return () => {
631
- return h(
632
- "div",
633
- {
634
- class: className.value,
635
- [`on${capitalize(activateEvent.value)}`]: activate,
636
- disabled: isDisabled.value
637
- },
638
- label.value
639
- );
636
+ return h("div", {
637
+ class: className.value,
638
+ [`on${capitalize(activateEvent.value)}`]: activate,
639
+ disabled: isDisabled.value
640
+ }, label.value);
640
641
  };
641
642
  }
642
643
  });
@@ -697,10 +698,10 @@ const components = {
697
698
  HiTabs: HiTabs
698
699
  };
699
700
 
700
- const install = (app) => {
701
+ function install(app) {
701
702
  for (const key in components) {
702
703
  app.component(key, components[key]);
703
704
  }
704
- };
705
+ }
705
706
 
706
707
  export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hoci/components",
3
- "version": "0.5.8",
3
+ "version": "0.6.0",
4
4
  "description": "",
5
5
  "author": "Chizuki <chizukicn@outlook.com>",
6
6
  "license": "MIT",
@@ -13,8 +13,8 @@
13
13
  "exports": {
14
14
  ".": {
15
15
  "types": "./dist/index.d.ts",
16
- "require": "./dist/index.cjs",
17
- "import": "./dist/index.mjs"
16
+ "import": "./dist/index.mjs",
17
+ "require": "./dist/index.cjs"
18
18
  },
19
19
  "./*": "./dist/*"
20
20
  },
@@ -31,8 +31,8 @@
31
31
  "dependencies": {
32
32
  "maybe-types": "^0.2.0",
33
33
  "tslx": "^0.1.1",
34
- "@hoci/core": "0.5.8",
35
- "@hoci/shared": "0.5.8"
34
+ "@hoci/core": "0.6.0",
35
+ "@hoci/shared": "0.6.0"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "unbuild",