@hoci/components 0.5.0 → 0.5.1

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 CHANGED
@@ -119,17 +119,19 @@ const HiSwitch = vue.defineComponent({
119
119
 
120
120
  const HiConfigProvider = vue.defineComponent({
121
121
  props: {
122
- icon: {
123
- type: Object
124
- },
125
- activateEvent: {
122
+ ...core.configProviderProps,
123
+ as: {
126
124
  type: String
127
125
  }
128
126
  },
129
127
  setup(props, context) {
130
128
  core.provideSharedConfig(props);
131
129
  return () => {
132
- return vue.renderSlot(context.slots, "default", void 0);
130
+ const content = vue.renderSlot(context.slots, "default", void 0);
131
+ if (props.as) {
132
+ return vue.h(props.as, content);
133
+ }
134
+ return content;
133
135
  };
134
136
  }
135
137
  });
@@ -300,7 +302,7 @@ const useSelectionList = shared.defineHookComponent({
300
302
  }));
301
303
  const renderItem = () => {
302
304
  const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
303
- return props.multiple ? children : children[0];
305
+ return props.multiple ? children : shared.getFirstChilld(children);
304
306
  };
305
307
  const slotData = {
306
308
  isActive,
@@ -327,9 +329,6 @@ const HiTabs = vue.defineComponent({
327
329
  headerClass: {
328
330
  type: shared.classPropType
329
331
  },
330
- contentClass: {
331
- type: shared.classPropType
332
- },
333
332
  as: {
334
333
  type: String,
335
334
  default: "div"
@@ -341,19 +340,38 @@ const HiTabs = vue.defineComponent({
341
340
  contentAs: {
342
341
  type: String,
343
342
  default: "div"
343
+ },
344
+ contentClass: {
345
+ type: shared.classPropType
346
+ },
347
+ keepAlive: {
348
+ type: [Boolean, Object],
349
+ default: false
344
350
  }
345
351
  },
346
352
  setup(props, context) {
347
353
  const selection = useSelectionList(props, context);
348
354
  return () => {
349
- const content = selection.renderItem();
355
+ let component = selection.renderItem();
356
+ if (props.keepAlive) {
357
+ component = vue.h(vue.KeepAlive, {
358
+ ...typeof props.keepAlive == "object" ? props.keepAlive : {}
359
+ }, component);
360
+ }
361
+ if (context.slots.content) {
362
+ component = context.slots.content({
363
+ component
364
+ });
365
+ } else {
366
+ component = vue.h(props.contentAs, {
367
+ class: props.contentClass
368
+ }, component);
369
+ }
350
370
  return vue.h(props.as, [
351
371
  vue.h(props.headerAs, {
352
372
  class: props.headerClass
353
373
  }, vue.renderSlot(context.slots, "default")),
354
- vue.h(props.contentAs, {
355
- class: props.contentClass
356
- }, content)
374
+ component
357
375
  ]);
358
376
  };
359
377
  }
@@ -402,12 +420,10 @@ const useSelectionItem = shared.defineHookComponent({
402
420
  return Array.isArray(label2) ? label2 : [label2];
403
421
  });
404
422
  function render() {
405
- return vue.renderSlot(slots, "default", {
423
+ return slots.default?.({
406
424
  active: context.isActive(props.value),
407
425
  activate
408
- }, () => {
409
- return label.value;
410
- });
426
+ }) ?? label.value.filter(Boolean);
411
427
  }
412
428
  let remove = () => {
413
429
  };
@@ -472,12 +488,55 @@ const HiTabPane = vue.defineComponent({
472
488
  }
473
489
  });
474
490
 
491
+ const HiPopover = vue.defineComponent({
492
+ name: "HiPopover",
493
+ props: {
494
+ ...core.popoverProps,
495
+ as: {
496
+ type: String,
497
+ default: "div"
498
+ }
499
+ },
500
+ emits: core.popoverEmits,
501
+ setup(props, context) {
502
+ const { triggerRef, popupClass, events, popupRef, popupStyle } = core.usePopover(props, context);
503
+ return () => {
504
+ let content = vue.h(
505
+ "div",
506
+ {
507
+ class: popupClass.value,
508
+ style: popupStyle.value,
509
+ ref: popupRef
510
+ },
511
+ vue.renderSlot(context.slots, "popup")
512
+ );
513
+ if (props.teleport) {
514
+ content = vue.h(
515
+ vue.Teleport,
516
+ {
517
+ to: props.teleport === true ? "body" : props.teleport
518
+ },
519
+ content
520
+ );
521
+ }
522
+ return vue.h(props.as, {
523
+ ref: triggerRef,
524
+ ...events
525
+ }, [
526
+ vue.renderSlot(context.slots, "default"),
527
+ content
528
+ ]);
529
+ };
530
+ }
531
+ });
532
+
475
533
  const components = {
476
534
  __proto__: null,
477
535
  HiAffix: HiAffix,
478
536
  HiConfigProvider: HiConfigProvider,
479
537
  HiIcon: HiIcon,
480
538
  HiItem: HiItem,
539
+ HiPopover: HiPopover,
481
540
  HiSelection: HiSelection,
482
541
  HiSwitch: HiSwitch,
483
542
  HiTabPane: HiTabPane,
@@ -494,6 +553,7 @@ exports.HiAffix = HiAffix;
494
553
  exports.HiConfigProvider = HiConfigProvider;
495
554
  exports.HiIcon = HiIcon;
496
555
  exports.HiItem = HiItem;
556
+ exports.HiPopover = HiPopover;
497
557
  exports.HiSelection = HiSelection;
498
558
  exports.HiSwitch = HiSwitch;
499
559
  exports.HiTabPane = HiTabPane;
package/dist/index.d.cts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as vue from 'vue';
2
- import { PropType, App } from 'vue';
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
5
  import { ElementLike, ActivateEvent } from '@hoci/shared';
@@ -365,35 +365,38 @@ declare const HiSwitch: vue.DefineComponent<{
365
365
  }, {}>;
366
366
 
367
367
  declare const HiConfigProvider: vue.DefineComponent<{
368
+ as: {
369
+ type: StringConstructor;
370
+ };
368
371
  icon: {
369
- type: PropType<Partial<{
372
+ type: vue.PropType<Partial<{
370
373
  size: number | undefined;
371
374
  sizeUnit: string | undefined;
372
375
  }>>;
373
376
  };
374
377
  activateEvent: {
375
- type: PropType<Partial<_hoci_core.ActivateEvent>>;
378
+ type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
376
379
  };
377
380
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
378
381
  [key: string]: any;
379
382
  }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
383
+ as: {
384
+ type: StringConstructor;
385
+ };
380
386
  icon: {
381
- type: PropType<Partial<{
387
+ type: vue.PropType<Partial<{
382
388
  size: number | undefined;
383
389
  sizeUnit: string | undefined;
384
390
  }>>;
385
391
  };
386
392
  activateEvent: {
387
- type: PropType<Partial<_hoci_core.ActivateEvent>>;
393
+ type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
388
394
  };
389
395
  }>>, {}, {}>;
390
396
 
391
397
  declare const HiTabs: vue.DefineComponent<{
392
398
  headerClass: {
393
- type: vue.PropType<string | string[] | Record<string, boolean>>;
394
- };
395
- contentClass: {
396
- type: vue.PropType<string | string[] | Record<string, boolean>>;
399
+ type: PropType<string | string[] | Record<string, boolean>>;
397
400
  };
398
401
  as: {
399
402
  type: StringConstructor;
@@ -407,28 +410,35 @@ declare const HiTabs: vue.DefineComponent<{
407
410
  type: StringConstructor;
408
411
  default: string;
409
412
  };
413
+ contentClass: {
414
+ type: PropType<string | string[] | Record<string, boolean>>;
415
+ };
416
+ keepAlive: {
417
+ type: PropType<boolean | KeepAliveProps>;
418
+ default: boolean;
419
+ };
410
420
  modelValue: {
411
- type: vue.PropType<any>;
421
+ type: PropType<any>;
412
422
  default: () => null;
413
423
  };
414
424
  activeClass: {
415
- type: vue.PropType<string | string[] | Record<string, boolean>>;
425
+ type: PropType<string | string[] | Record<string, boolean>>;
416
426
  default: string;
417
427
  };
418
428
  itemClass: {
419
- type: vue.PropType<string | string[] | Record<string, boolean>>;
429
+ type: PropType<string | string[] | Record<string, boolean>>;
420
430
  default: string;
421
431
  };
422
432
  disabledClass: {
423
- type: vue.PropType<string | string[] | Record<string, boolean>>;
433
+ type: PropType<string | string[] | Record<string, boolean>>;
424
434
  default: string;
425
435
  };
426
436
  unactiveClass: {
427
- type: vue.PropType<string | string[] | Record<string, boolean>>;
437
+ type: PropType<string | string[] | Record<string, boolean>>;
428
438
  default: string;
429
439
  };
430
440
  label: {
431
- type: vue.PropType<string | ((val?: any) => string) | null>;
441
+ type: PropType<string | ((val?: any) => string) | null>;
432
442
  };
433
443
  multiple: {
434
444
  type: (NumberConstructor | BooleanConstructor)[];
@@ -438,20 +448,17 @@ declare const HiTabs: vue.DefineComponent<{
438
448
  type: BooleanConstructor;
439
449
  };
440
450
  defaultValue: {
441
- type: vue.PropType<any>;
451
+ type: PropType<any>;
442
452
  default: () => null;
443
453
  };
444
454
  activateEvent: {
445
- type: vue.PropType<_hoci_shared.ActivateEvent>;
455
+ type: PropType<_hoci_shared.ActivateEvent>;
446
456
  };
447
457
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
448
458
  [key: string]: any;
449
459
  }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
450
460
  headerClass: {
451
- type: vue.PropType<string | string[] | Record<string, boolean>>;
452
- };
453
- contentClass: {
454
- type: vue.PropType<string | string[] | Record<string, boolean>>;
461
+ type: PropType<string | string[] | Record<string, boolean>>;
455
462
  };
456
463
  as: {
457
464
  type: StringConstructor;
@@ -465,28 +472,35 @@ declare const HiTabs: vue.DefineComponent<{
465
472
  type: StringConstructor;
466
473
  default: string;
467
474
  };
475
+ contentClass: {
476
+ type: PropType<string | string[] | Record<string, boolean>>;
477
+ };
478
+ keepAlive: {
479
+ type: PropType<boolean | KeepAliveProps>;
480
+ default: boolean;
481
+ };
468
482
  modelValue: {
469
- type: vue.PropType<any>;
483
+ type: PropType<any>;
470
484
  default: () => null;
471
485
  };
472
486
  activeClass: {
473
- type: vue.PropType<string | string[] | Record<string, boolean>>;
487
+ type: PropType<string | string[] | Record<string, boolean>>;
474
488
  default: string;
475
489
  };
476
490
  itemClass: {
477
- type: vue.PropType<string | string[] | Record<string, boolean>>;
491
+ type: PropType<string | string[] | Record<string, boolean>>;
478
492
  default: string;
479
493
  };
480
494
  disabledClass: {
481
- type: vue.PropType<string | string[] | Record<string, boolean>>;
495
+ type: PropType<string | string[] | Record<string, boolean>>;
482
496
  default: string;
483
497
  };
484
498
  unactiveClass: {
485
- type: vue.PropType<string | string[] | Record<string, boolean>>;
499
+ type: PropType<string | string[] | Record<string, boolean>>;
486
500
  default: string;
487
501
  };
488
502
  label: {
489
- type: vue.PropType<string | ((val?: any) => string) | null>;
503
+ type: PropType<string | ((val?: any) => string) | null>;
490
504
  };
491
505
  multiple: {
492
506
  type: (NumberConstructor | BooleanConstructor)[];
@@ -496,11 +510,11 @@ declare const HiTabs: vue.DefineComponent<{
496
510
  type: BooleanConstructor;
497
511
  };
498
512
  defaultValue: {
499
- type: vue.PropType<any>;
513
+ type: PropType<any>;
500
514
  default: () => null;
501
515
  };
502
516
  activateEvent: {
503
- type: vue.PropType<_hoci_shared.ActivateEvent>;
517
+ type: PropType<_hoci_shared.ActivateEvent>;
504
518
  };
505
519
  }>>, {
506
520
  multiple: number | boolean;
@@ -511,6 +525,7 @@ declare const HiTabs: vue.DefineComponent<{
511
525
  unactiveClass: string | string[] | Record<string, boolean>;
512
526
  clearable: boolean;
513
527
  defaultValue: any;
528
+ keepAlive: boolean | KeepAliveProps;
514
529
  as: string;
515
530
  headerAs: string;
516
531
  contentAs: string;
@@ -568,6 +583,94 @@ declare const HiTabPane: vue.DefineComponent<{
568
583
  keepAlive: boolean;
569
584
  }, {}>;
570
585
 
586
+ declare const HiPopover: vue.DefineComponent<{
587
+ as: {
588
+ type: StringConstructor;
589
+ default: string;
590
+ };
591
+ popupClass: {
592
+ type: StringConstructor;
593
+ };
594
+ placement: {
595
+ type: vue.PropType<_hoci_core.Placement>;
596
+ default: () => "auto";
597
+ };
598
+ triggerEvent: {
599
+ type: vue.PropType<_hoci_core.TriggerEvent>;
600
+ default: () => "hover";
601
+ };
602
+ offset: {
603
+ type: NumberConstructor;
604
+ default: () => 8;
605
+ };
606
+ lazy: {
607
+ type: BooleanConstructor;
608
+ default: () => false;
609
+ };
610
+ visible: {
611
+ type: BooleanConstructor;
612
+ default: () => false;
613
+ };
614
+ disabled: {
615
+ type: BooleanConstructor;
616
+ default: () => false;
617
+ };
618
+ teleport: {
619
+ type: vue.PropType<string | boolean | HTMLElement>;
620
+ default: () => true;
621
+ };
622
+ }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
623
+ [key: string]: any;
624
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:visible")[], "change" | "update:visible", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
625
+ as: {
626
+ type: StringConstructor;
627
+ default: string;
628
+ };
629
+ popupClass: {
630
+ type: StringConstructor;
631
+ };
632
+ placement: {
633
+ type: vue.PropType<_hoci_core.Placement>;
634
+ default: () => "auto";
635
+ };
636
+ triggerEvent: {
637
+ type: vue.PropType<_hoci_core.TriggerEvent>;
638
+ default: () => "hover";
639
+ };
640
+ offset: {
641
+ type: NumberConstructor;
642
+ default: () => 8;
643
+ };
644
+ lazy: {
645
+ type: BooleanConstructor;
646
+ default: () => false;
647
+ };
648
+ visible: {
649
+ type: BooleanConstructor;
650
+ default: () => false;
651
+ };
652
+ disabled: {
653
+ type: BooleanConstructor;
654
+ default: () => false;
655
+ };
656
+ teleport: {
657
+ type: vue.PropType<string | boolean | HTMLElement>;
658
+ default: () => true;
659
+ };
660
+ }>> & {
661
+ onChange?: ((...args: any[]) => any) | undefined;
662
+ "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
663
+ }, {
664
+ offset: number;
665
+ visible: boolean;
666
+ disabled: boolean;
667
+ placement: _hoci_core.Placement;
668
+ triggerEvent: _hoci_core.TriggerEvent;
669
+ lazy: boolean;
670
+ teleport: string | boolean | HTMLElement;
671
+ as: string;
672
+ }, {}>;
673
+
571
674
  declare const install: (app: App) => void;
572
675
 
573
- export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
676
+ export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as vue from 'vue';
2
- import { PropType, App } from 'vue';
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
5
  import { ElementLike, ActivateEvent } from '@hoci/shared';
@@ -365,35 +365,38 @@ declare const HiSwitch: vue.DefineComponent<{
365
365
  }, {}>;
366
366
 
367
367
  declare const HiConfigProvider: vue.DefineComponent<{
368
+ as: {
369
+ type: StringConstructor;
370
+ };
368
371
  icon: {
369
- type: PropType<Partial<{
372
+ type: vue.PropType<Partial<{
370
373
  size: number | undefined;
371
374
  sizeUnit: string | undefined;
372
375
  }>>;
373
376
  };
374
377
  activateEvent: {
375
- type: PropType<Partial<_hoci_core.ActivateEvent>>;
378
+ type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
376
379
  };
377
380
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
378
381
  [key: string]: any;
379
382
  }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
383
+ as: {
384
+ type: StringConstructor;
385
+ };
380
386
  icon: {
381
- type: PropType<Partial<{
387
+ type: vue.PropType<Partial<{
382
388
  size: number | undefined;
383
389
  sizeUnit: string | undefined;
384
390
  }>>;
385
391
  };
386
392
  activateEvent: {
387
- type: PropType<Partial<_hoci_core.ActivateEvent>>;
393
+ type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
388
394
  };
389
395
  }>>, {}, {}>;
390
396
 
391
397
  declare const HiTabs: vue.DefineComponent<{
392
398
  headerClass: {
393
- type: vue.PropType<string | string[] | Record<string, boolean>>;
394
- };
395
- contentClass: {
396
- type: vue.PropType<string | string[] | Record<string, boolean>>;
399
+ type: PropType<string | string[] | Record<string, boolean>>;
397
400
  };
398
401
  as: {
399
402
  type: StringConstructor;
@@ -407,28 +410,35 @@ declare const HiTabs: vue.DefineComponent<{
407
410
  type: StringConstructor;
408
411
  default: string;
409
412
  };
413
+ contentClass: {
414
+ type: PropType<string | string[] | Record<string, boolean>>;
415
+ };
416
+ keepAlive: {
417
+ type: PropType<boolean | KeepAliveProps>;
418
+ default: boolean;
419
+ };
410
420
  modelValue: {
411
- type: vue.PropType<any>;
421
+ type: PropType<any>;
412
422
  default: () => null;
413
423
  };
414
424
  activeClass: {
415
- type: vue.PropType<string | string[] | Record<string, boolean>>;
425
+ type: PropType<string | string[] | Record<string, boolean>>;
416
426
  default: string;
417
427
  };
418
428
  itemClass: {
419
- type: vue.PropType<string | string[] | Record<string, boolean>>;
429
+ type: PropType<string | string[] | Record<string, boolean>>;
420
430
  default: string;
421
431
  };
422
432
  disabledClass: {
423
- type: vue.PropType<string | string[] | Record<string, boolean>>;
433
+ type: PropType<string | string[] | Record<string, boolean>>;
424
434
  default: string;
425
435
  };
426
436
  unactiveClass: {
427
- type: vue.PropType<string | string[] | Record<string, boolean>>;
437
+ type: PropType<string | string[] | Record<string, boolean>>;
428
438
  default: string;
429
439
  };
430
440
  label: {
431
- type: vue.PropType<string | ((val?: any) => string) | null>;
441
+ type: PropType<string | ((val?: any) => string) | null>;
432
442
  };
433
443
  multiple: {
434
444
  type: (NumberConstructor | BooleanConstructor)[];
@@ -438,20 +448,17 @@ declare const HiTabs: vue.DefineComponent<{
438
448
  type: BooleanConstructor;
439
449
  };
440
450
  defaultValue: {
441
- type: vue.PropType<any>;
451
+ type: PropType<any>;
442
452
  default: () => null;
443
453
  };
444
454
  activateEvent: {
445
- type: vue.PropType<_hoci_shared.ActivateEvent>;
455
+ type: PropType<_hoci_shared.ActivateEvent>;
446
456
  };
447
457
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
448
458
  [key: string]: any;
449
459
  }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
450
460
  headerClass: {
451
- type: vue.PropType<string | string[] | Record<string, boolean>>;
452
- };
453
- contentClass: {
454
- type: vue.PropType<string | string[] | Record<string, boolean>>;
461
+ type: PropType<string | string[] | Record<string, boolean>>;
455
462
  };
456
463
  as: {
457
464
  type: StringConstructor;
@@ -465,28 +472,35 @@ declare const HiTabs: vue.DefineComponent<{
465
472
  type: StringConstructor;
466
473
  default: string;
467
474
  };
475
+ contentClass: {
476
+ type: PropType<string | string[] | Record<string, boolean>>;
477
+ };
478
+ keepAlive: {
479
+ type: PropType<boolean | KeepAliveProps>;
480
+ default: boolean;
481
+ };
468
482
  modelValue: {
469
- type: vue.PropType<any>;
483
+ type: PropType<any>;
470
484
  default: () => null;
471
485
  };
472
486
  activeClass: {
473
- type: vue.PropType<string | string[] | Record<string, boolean>>;
487
+ type: PropType<string | string[] | Record<string, boolean>>;
474
488
  default: string;
475
489
  };
476
490
  itemClass: {
477
- type: vue.PropType<string | string[] | Record<string, boolean>>;
491
+ type: PropType<string | string[] | Record<string, boolean>>;
478
492
  default: string;
479
493
  };
480
494
  disabledClass: {
481
- type: vue.PropType<string | string[] | Record<string, boolean>>;
495
+ type: PropType<string | string[] | Record<string, boolean>>;
482
496
  default: string;
483
497
  };
484
498
  unactiveClass: {
485
- type: vue.PropType<string | string[] | Record<string, boolean>>;
499
+ type: PropType<string | string[] | Record<string, boolean>>;
486
500
  default: string;
487
501
  };
488
502
  label: {
489
- type: vue.PropType<string | ((val?: any) => string) | null>;
503
+ type: PropType<string | ((val?: any) => string) | null>;
490
504
  };
491
505
  multiple: {
492
506
  type: (NumberConstructor | BooleanConstructor)[];
@@ -496,11 +510,11 @@ declare const HiTabs: vue.DefineComponent<{
496
510
  type: BooleanConstructor;
497
511
  };
498
512
  defaultValue: {
499
- type: vue.PropType<any>;
513
+ type: PropType<any>;
500
514
  default: () => null;
501
515
  };
502
516
  activateEvent: {
503
- type: vue.PropType<_hoci_shared.ActivateEvent>;
517
+ type: PropType<_hoci_shared.ActivateEvent>;
504
518
  };
505
519
  }>>, {
506
520
  multiple: number | boolean;
@@ -511,6 +525,7 @@ declare const HiTabs: vue.DefineComponent<{
511
525
  unactiveClass: string | string[] | Record<string, boolean>;
512
526
  clearable: boolean;
513
527
  defaultValue: any;
528
+ keepAlive: boolean | KeepAliveProps;
514
529
  as: string;
515
530
  headerAs: string;
516
531
  contentAs: string;
@@ -568,6 +583,94 @@ declare const HiTabPane: vue.DefineComponent<{
568
583
  keepAlive: boolean;
569
584
  }, {}>;
570
585
 
586
+ declare const HiPopover: vue.DefineComponent<{
587
+ as: {
588
+ type: StringConstructor;
589
+ default: string;
590
+ };
591
+ popupClass: {
592
+ type: StringConstructor;
593
+ };
594
+ placement: {
595
+ type: vue.PropType<_hoci_core.Placement>;
596
+ default: () => "auto";
597
+ };
598
+ triggerEvent: {
599
+ type: vue.PropType<_hoci_core.TriggerEvent>;
600
+ default: () => "hover";
601
+ };
602
+ offset: {
603
+ type: NumberConstructor;
604
+ default: () => 8;
605
+ };
606
+ lazy: {
607
+ type: BooleanConstructor;
608
+ default: () => false;
609
+ };
610
+ visible: {
611
+ type: BooleanConstructor;
612
+ default: () => false;
613
+ };
614
+ disabled: {
615
+ type: BooleanConstructor;
616
+ default: () => false;
617
+ };
618
+ teleport: {
619
+ type: vue.PropType<string | boolean | HTMLElement>;
620
+ default: () => true;
621
+ };
622
+ }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
623
+ [key: string]: any;
624
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:visible")[], "change" | "update:visible", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
625
+ as: {
626
+ type: StringConstructor;
627
+ default: string;
628
+ };
629
+ popupClass: {
630
+ type: StringConstructor;
631
+ };
632
+ placement: {
633
+ type: vue.PropType<_hoci_core.Placement>;
634
+ default: () => "auto";
635
+ };
636
+ triggerEvent: {
637
+ type: vue.PropType<_hoci_core.TriggerEvent>;
638
+ default: () => "hover";
639
+ };
640
+ offset: {
641
+ type: NumberConstructor;
642
+ default: () => 8;
643
+ };
644
+ lazy: {
645
+ type: BooleanConstructor;
646
+ default: () => false;
647
+ };
648
+ visible: {
649
+ type: BooleanConstructor;
650
+ default: () => false;
651
+ };
652
+ disabled: {
653
+ type: BooleanConstructor;
654
+ default: () => false;
655
+ };
656
+ teleport: {
657
+ type: vue.PropType<string | boolean | HTMLElement>;
658
+ default: () => true;
659
+ };
660
+ }>> & {
661
+ onChange?: ((...args: any[]) => any) | undefined;
662
+ "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
663
+ }, {
664
+ offset: number;
665
+ visible: boolean;
666
+ disabled: boolean;
667
+ placement: _hoci_core.Placement;
668
+ triggerEvent: _hoci_core.TriggerEvent;
669
+ lazy: boolean;
670
+ teleport: string | boolean | HTMLElement;
671
+ as: string;
672
+ }, {}>;
673
+
571
674
  declare const install: (app: App) => void;
572
675
 
573
- export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
676
+ export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as vue from 'vue';
2
- import { PropType, App } from 'vue';
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
5
  import { ElementLike, ActivateEvent } from '@hoci/shared';
@@ -365,35 +365,38 @@ declare const HiSwitch: vue.DefineComponent<{
365
365
  }, {}>;
366
366
 
367
367
  declare const HiConfigProvider: vue.DefineComponent<{
368
+ as: {
369
+ type: StringConstructor;
370
+ };
368
371
  icon: {
369
- type: PropType<Partial<{
372
+ type: vue.PropType<Partial<{
370
373
  size: number | undefined;
371
374
  sizeUnit: string | undefined;
372
375
  }>>;
373
376
  };
374
377
  activateEvent: {
375
- type: PropType<Partial<_hoci_core.ActivateEvent>>;
378
+ type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
376
379
  };
377
380
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
378
381
  [key: string]: any;
379
382
  }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
383
+ as: {
384
+ type: StringConstructor;
385
+ };
380
386
  icon: {
381
- type: PropType<Partial<{
387
+ type: vue.PropType<Partial<{
382
388
  size: number | undefined;
383
389
  sizeUnit: string | undefined;
384
390
  }>>;
385
391
  };
386
392
  activateEvent: {
387
- type: PropType<Partial<_hoci_core.ActivateEvent>>;
393
+ type: vue.PropType<Partial<_hoci_core.ActivateEvent>>;
388
394
  };
389
395
  }>>, {}, {}>;
390
396
 
391
397
  declare const HiTabs: vue.DefineComponent<{
392
398
  headerClass: {
393
- type: vue.PropType<string | string[] | Record<string, boolean>>;
394
- };
395
- contentClass: {
396
- type: vue.PropType<string | string[] | Record<string, boolean>>;
399
+ type: PropType<string | string[] | Record<string, boolean>>;
397
400
  };
398
401
  as: {
399
402
  type: StringConstructor;
@@ -407,28 +410,35 @@ declare const HiTabs: vue.DefineComponent<{
407
410
  type: StringConstructor;
408
411
  default: string;
409
412
  };
413
+ contentClass: {
414
+ type: PropType<string | string[] | Record<string, boolean>>;
415
+ };
416
+ keepAlive: {
417
+ type: PropType<boolean | KeepAliveProps>;
418
+ default: boolean;
419
+ };
410
420
  modelValue: {
411
- type: vue.PropType<any>;
421
+ type: PropType<any>;
412
422
  default: () => null;
413
423
  };
414
424
  activeClass: {
415
- type: vue.PropType<string | string[] | Record<string, boolean>>;
425
+ type: PropType<string | string[] | Record<string, boolean>>;
416
426
  default: string;
417
427
  };
418
428
  itemClass: {
419
- type: vue.PropType<string | string[] | Record<string, boolean>>;
429
+ type: PropType<string | string[] | Record<string, boolean>>;
420
430
  default: string;
421
431
  };
422
432
  disabledClass: {
423
- type: vue.PropType<string | string[] | Record<string, boolean>>;
433
+ type: PropType<string | string[] | Record<string, boolean>>;
424
434
  default: string;
425
435
  };
426
436
  unactiveClass: {
427
- type: vue.PropType<string | string[] | Record<string, boolean>>;
437
+ type: PropType<string | string[] | Record<string, boolean>>;
428
438
  default: string;
429
439
  };
430
440
  label: {
431
- type: vue.PropType<string | ((val?: any) => string) | null>;
441
+ type: PropType<string | ((val?: any) => string) | null>;
432
442
  };
433
443
  multiple: {
434
444
  type: (NumberConstructor | BooleanConstructor)[];
@@ -438,20 +448,17 @@ declare const HiTabs: vue.DefineComponent<{
438
448
  type: BooleanConstructor;
439
449
  };
440
450
  defaultValue: {
441
- type: vue.PropType<any>;
451
+ type: PropType<any>;
442
452
  default: () => null;
443
453
  };
444
454
  activateEvent: {
445
- type: vue.PropType<_hoci_shared.ActivateEvent>;
455
+ type: PropType<_hoci_shared.ActivateEvent>;
446
456
  };
447
457
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
448
458
  [key: string]: any;
449
459
  }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
450
460
  headerClass: {
451
- type: vue.PropType<string | string[] | Record<string, boolean>>;
452
- };
453
- contentClass: {
454
- type: vue.PropType<string | string[] | Record<string, boolean>>;
461
+ type: PropType<string | string[] | Record<string, boolean>>;
455
462
  };
456
463
  as: {
457
464
  type: StringConstructor;
@@ -465,28 +472,35 @@ declare const HiTabs: vue.DefineComponent<{
465
472
  type: StringConstructor;
466
473
  default: string;
467
474
  };
475
+ contentClass: {
476
+ type: PropType<string | string[] | Record<string, boolean>>;
477
+ };
478
+ keepAlive: {
479
+ type: PropType<boolean | KeepAliveProps>;
480
+ default: boolean;
481
+ };
468
482
  modelValue: {
469
- type: vue.PropType<any>;
483
+ type: PropType<any>;
470
484
  default: () => null;
471
485
  };
472
486
  activeClass: {
473
- type: vue.PropType<string | string[] | Record<string, boolean>>;
487
+ type: PropType<string | string[] | Record<string, boolean>>;
474
488
  default: string;
475
489
  };
476
490
  itemClass: {
477
- type: vue.PropType<string | string[] | Record<string, boolean>>;
491
+ type: PropType<string | string[] | Record<string, boolean>>;
478
492
  default: string;
479
493
  };
480
494
  disabledClass: {
481
- type: vue.PropType<string | string[] | Record<string, boolean>>;
495
+ type: PropType<string | string[] | Record<string, boolean>>;
482
496
  default: string;
483
497
  };
484
498
  unactiveClass: {
485
- type: vue.PropType<string | string[] | Record<string, boolean>>;
499
+ type: PropType<string | string[] | Record<string, boolean>>;
486
500
  default: string;
487
501
  };
488
502
  label: {
489
- type: vue.PropType<string | ((val?: any) => string) | null>;
503
+ type: PropType<string | ((val?: any) => string) | null>;
490
504
  };
491
505
  multiple: {
492
506
  type: (NumberConstructor | BooleanConstructor)[];
@@ -496,11 +510,11 @@ declare const HiTabs: vue.DefineComponent<{
496
510
  type: BooleanConstructor;
497
511
  };
498
512
  defaultValue: {
499
- type: vue.PropType<any>;
513
+ type: PropType<any>;
500
514
  default: () => null;
501
515
  };
502
516
  activateEvent: {
503
- type: vue.PropType<_hoci_shared.ActivateEvent>;
517
+ type: PropType<_hoci_shared.ActivateEvent>;
504
518
  };
505
519
  }>>, {
506
520
  multiple: number | boolean;
@@ -511,6 +525,7 @@ declare const HiTabs: vue.DefineComponent<{
511
525
  unactiveClass: string | string[] | Record<string, boolean>;
512
526
  clearable: boolean;
513
527
  defaultValue: any;
528
+ keepAlive: boolean | KeepAliveProps;
514
529
  as: string;
515
530
  headerAs: string;
516
531
  contentAs: string;
@@ -568,6 +583,94 @@ declare const HiTabPane: vue.DefineComponent<{
568
583
  keepAlive: boolean;
569
584
  }, {}>;
570
585
 
586
+ declare const HiPopover: vue.DefineComponent<{
587
+ as: {
588
+ type: StringConstructor;
589
+ default: string;
590
+ };
591
+ popupClass: {
592
+ type: StringConstructor;
593
+ };
594
+ placement: {
595
+ type: vue.PropType<_hoci_core.Placement>;
596
+ default: () => "auto";
597
+ };
598
+ triggerEvent: {
599
+ type: vue.PropType<_hoci_core.TriggerEvent>;
600
+ default: () => "hover";
601
+ };
602
+ offset: {
603
+ type: NumberConstructor;
604
+ default: () => 8;
605
+ };
606
+ lazy: {
607
+ type: BooleanConstructor;
608
+ default: () => false;
609
+ };
610
+ visible: {
611
+ type: BooleanConstructor;
612
+ default: () => false;
613
+ };
614
+ disabled: {
615
+ type: BooleanConstructor;
616
+ default: () => false;
617
+ };
618
+ teleport: {
619
+ type: vue.PropType<string | boolean | HTMLElement>;
620
+ default: () => true;
621
+ };
622
+ }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
623
+ [key: string]: any;
624
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:visible")[], "change" | "update:visible", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
625
+ as: {
626
+ type: StringConstructor;
627
+ default: string;
628
+ };
629
+ popupClass: {
630
+ type: StringConstructor;
631
+ };
632
+ placement: {
633
+ type: vue.PropType<_hoci_core.Placement>;
634
+ default: () => "auto";
635
+ };
636
+ triggerEvent: {
637
+ type: vue.PropType<_hoci_core.TriggerEvent>;
638
+ default: () => "hover";
639
+ };
640
+ offset: {
641
+ type: NumberConstructor;
642
+ default: () => 8;
643
+ };
644
+ lazy: {
645
+ type: BooleanConstructor;
646
+ default: () => false;
647
+ };
648
+ visible: {
649
+ type: BooleanConstructor;
650
+ default: () => false;
651
+ };
652
+ disabled: {
653
+ type: BooleanConstructor;
654
+ default: () => false;
655
+ };
656
+ teleport: {
657
+ type: vue.PropType<string | boolean | HTMLElement>;
658
+ default: () => true;
659
+ };
660
+ }>> & {
661
+ onChange?: ((...args: any[]) => any) | undefined;
662
+ "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
663
+ }, {
664
+ offset: number;
665
+ visible: boolean;
666
+ disabled: boolean;
667
+ placement: _hoci_core.Placement;
668
+ triggerEvent: _hoci_core.TriggerEvent;
669
+ lazy: boolean;
670
+ teleport: string | boolean | HTMLElement;
671
+ as: string;
672
+ }, {}>;
673
+
571
674
  declare const install: (app: App) => void;
572
675
 
573
- export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
676
+ export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
- import { defineComponent, h, renderSlot, reactive, computed, provide, inject, watch } from 'vue';
2
- import { affixProps, useAffix, selectionProps as selectionProps$1, selectionEmits as selectionEmits$1, useSelectionList as useSelectionList$1, itemProps as itemProps$1, useSelectionItem as useSelectionItem$1, iconProps, useIcon, switchProps, switchEmits, useSwitch, provideSharedConfig } from '@hoci/core';
1
+ import { defineComponent, h, renderSlot, reactive, computed, provide, inject, KeepAlive, watch, Teleport } from 'vue';
2
+ import { affixProps, useAffix, selectionProps as selectionProps$1, selectionEmits as selectionEmits$1, useSelectionList as useSelectionList$1, itemProps as itemProps$1, useSelectionItem as useSelectionItem$1, iconProps, useIcon, switchProps, switchEmits, useSwitch, configProviderProps, provideSharedConfig, popoverProps, popoverEmits, usePopover } from '@hoci/core';
3
3
  import { capitalize, cls } from 'tslx';
4
- import { defineHookProps, valuePropType, classPropType, labelPropType, defineHookEmits, defineHookComponent, useSharedConfig } from '@hoci/shared';
4
+ import { defineHookProps, valuePropType, classPropType, labelPropType, defineHookEmits, defineHookComponent, useSharedConfig, getFirstChilld } from '@hoci/shared';
5
5
  import { syncRef, toReactive, isDefined, tryOnScopeDispose } from '@vueuse/core';
6
6
 
7
7
  const HiAffix = defineComponent({
@@ -117,17 +117,19 @@ const HiSwitch = defineComponent({
117
117
 
118
118
  const HiConfigProvider = defineComponent({
119
119
  props: {
120
- icon: {
121
- type: Object
122
- },
123
- activateEvent: {
120
+ ...configProviderProps,
121
+ as: {
124
122
  type: String
125
123
  }
126
124
  },
127
125
  setup(props, context) {
128
126
  provideSharedConfig(props);
129
127
  return () => {
130
- return renderSlot(context.slots, "default", void 0);
128
+ const content = renderSlot(context.slots, "default", void 0);
129
+ if (props.as) {
130
+ return h(props.as, content);
131
+ }
132
+ return content;
131
133
  };
132
134
  }
133
135
  });
@@ -298,7 +300,7 @@ const useSelectionList = defineHookComponent({
298
300
  }));
299
301
  const renderItem = () => {
300
302
  const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
301
- return props.multiple ? children : children[0];
303
+ return props.multiple ? children : getFirstChilld(children);
302
304
  };
303
305
  const slotData = {
304
306
  isActive,
@@ -325,9 +327,6 @@ const HiTabs = defineComponent({
325
327
  headerClass: {
326
328
  type: classPropType
327
329
  },
328
- contentClass: {
329
- type: classPropType
330
- },
331
330
  as: {
332
331
  type: String,
333
332
  default: "div"
@@ -339,19 +338,38 @@ const HiTabs = defineComponent({
339
338
  contentAs: {
340
339
  type: String,
341
340
  default: "div"
341
+ },
342
+ contentClass: {
343
+ type: classPropType
344
+ },
345
+ keepAlive: {
346
+ type: [Boolean, Object],
347
+ default: false
342
348
  }
343
349
  },
344
350
  setup(props, context) {
345
351
  const selection = useSelectionList(props, context);
346
352
  return () => {
347
- const content = selection.renderItem();
353
+ let component = selection.renderItem();
354
+ if (props.keepAlive) {
355
+ component = h(KeepAlive, {
356
+ ...typeof props.keepAlive == "object" ? props.keepAlive : {}
357
+ }, component);
358
+ }
359
+ if (context.slots.content) {
360
+ component = context.slots.content({
361
+ component
362
+ });
363
+ } else {
364
+ component = h(props.contentAs, {
365
+ class: props.contentClass
366
+ }, component);
367
+ }
348
368
  return h(props.as, [
349
369
  h(props.headerAs, {
350
370
  class: props.headerClass
351
371
  }, renderSlot(context.slots, "default")),
352
- h(props.contentAs, {
353
- class: props.contentClass
354
- }, content)
372
+ component
355
373
  ]);
356
374
  };
357
375
  }
@@ -400,12 +418,10 @@ const useSelectionItem = defineHookComponent({
400
418
  return Array.isArray(label2) ? label2 : [label2];
401
419
  });
402
420
  function render() {
403
- return renderSlot(slots, "default", {
421
+ return slots.default?.({
404
422
  active: context.isActive(props.value),
405
423
  activate
406
- }, () => {
407
- return label.value;
408
- });
424
+ }) ?? label.value.filter(Boolean);
409
425
  }
410
426
  let remove = () => {
411
427
  };
@@ -470,12 +486,55 @@ const HiTabPane = defineComponent({
470
486
  }
471
487
  });
472
488
 
489
+ const HiPopover = defineComponent({
490
+ name: "HiPopover",
491
+ props: {
492
+ ...popoverProps,
493
+ as: {
494
+ type: String,
495
+ default: "div"
496
+ }
497
+ },
498
+ emits: popoverEmits,
499
+ setup(props, context) {
500
+ const { triggerRef, popupClass, events, popupRef, popupStyle } = usePopover(props, context);
501
+ return () => {
502
+ let content = h(
503
+ "div",
504
+ {
505
+ class: popupClass.value,
506
+ style: popupStyle.value,
507
+ ref: popupRef
508
+ },
509
+ renderSlot(context.slots, "popup")
510
+ );
511
+ if (props.teleport) {
512
+ content = h(
513
+ Teleport,
514
+ {
515
+ to: props.teleport === true ? "body" : props.teleport
516
+ },
517
+ content
518
+ );
519
+ }
520
+ return h(props.as, {
521
+ ref: triggerRef,
522
+ ...events
523
+ }, [
524
+ renderSlot(context.slots, "default"),
525
+ content
526
+ ]);
527
+ };
528
+ }
529
+ });
530
+
473
531
  const components = {
474
532
  __proto__: null,
475
533
  HiAffix: HiAffix,
476
534
  HiConfigProvider: HiConfigProvider,
477
535
  HiIcon: HiIcon,
478
536
  HiItem: HiItem,
537
+ HiPopover: HiPopover,
479
538
  HiSelection: HiSelection,
480
539
  HiSwitch: HiSwitch,
481
540
  HiTabPane: HiTabPane,
@@ -488,4 +547,4 @@ const install = (app) => {
488
547
  }
489
548
  };
490
549
 
491
- export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
550
+ export { HiAffix, 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.0",
3
+ "version": "0.5.1",
4
4
  "description": "",
5
5
  "author": "chizuki",
6
6
  "license": "MIT",
@@ -25,15 +25,14 @@
25
25
  "dist/"
26
26
  ],
27
27
  "peerDependencies": {
28
- "@vueuse/core": ">=10",
29
- "vue": "^3.3.4"
28
+ "vue": "^3.0.0-0"
30
29
  },
31
30
  "dependencies": {
32
- "@vueuse/core": "^10.5.0",
31
+ "@vueuse/core": ">=10.5.0",
33
32
  "maybe-types": "^0.1.0",
34
33
  "tslx": "^0.1.1",
35
- "@hoci/core": "0.5.0",
36
- "@hoci/shared": "0.5.0"
34
+ "@hoci/shared": "0.5.1",
35
+ "@hoci/core": "0.5.1"
37
36
  },
38
37
  "scripts": {
39
38
  "build": "unbuild",