@bethinkpl/design-system 42.0.0 → 44.0.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 (85) hide show
  1. package/dist/design-system.css +1 -1
  2. package/dist/design-system.js +17470 -13135
  3. package/dist/design-system.js.map +1 -1
  4. package/dist/lib/js/components/Cards/Card/Card.consts.d.ts +14 -0
  5. package/dist/lib/js/components/Cards/Card/Card.vue.d.ts +10 -5
  6. package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts +33 -15
  7. package/dist/lib/js/components/Form/PinInputField/PinInputField.consts.d.ts +14 -0
  8. package/dist/lib/js/components/Form/PinInputField/PinInputField.types.d.ts +12 -0
  9. package/dist/lib/js/components/Form/PinInputField/PinInputField.utils.d.ts +2 -0
  10. package/dist/lib/js/components/Form/PinInputField/PinInputField.vue.d.ts +91 -0
  11. package/dist/lib/js/components/Form/PinInputField/index.d.ts +5 -0
  12. package/dist/lib/js/components/Form/PinInputField/usePinInputFieldWithinForm.d.ts +8 -0
  13. package/dist/lib/js/components/Form/SelectField/SelectField.types.d.ts +26 -0
  14. package/dist/lib/js/components/Form/SelectField/SelectField.utils.d.ts +7 -0
  15. package/dist/lib/js/components/Form/SelectField/SelectField.vue.d.ts +107 -0
  16. package/dist/lib/js/components/Form/SelectField/SelectFieldOption.vue.d.ts +19 -0
  17. package/dist/lib/js/components/Form/SelectField/index.d.ts +4 -0
  18. package/dist/lib/js/components/Form/SelectField/useSelectFieldWithinForm.d.ts +8 -0
  19. package/dist/lib/js/components/Form/TextAreaField/TextAreaField.types.d.ts +9 -0
  20. package/dist/lib/js/components/Form/TextAreaField/TextAreaField.vue.d.ts +76 -0
  21. package/dist/lib/js/components/Form/TextAreaField/TextAreaFieldAutosized.vue.d.ts +6 -0
  22. package/dist/lib/js/components/Form/TextAreaField/index.d.ts +4 -0
  23. package/dist/lib/js/components/LabelValue/LabelValueItem/LabelValueItem.vue.d.ts +12 -1
  24. package/dist/lib/js/components/Pagination/Pagination.vue.d.ts +2 -0
  25. package/dist/lib/js/components/SelectList/SelectListItem/SelectListItem.vue.d.ts +2 -0
  26. package/dist/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue.d.ts +2 -0
  27. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts +33 -15
  28. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts +33 -15
  29. package/dist/lib/js/components/Toast/Toast.consts.d.ts +11 -9
  30. package/dist/lib/js/components/Toast/Toast.vue.d.ts +51 -415
  31. package/dist/lib/js/composables/useFormFieldWithinForm.d.ts +3 -3
  32. package/dist/lib/js/composables/useTextFieldWithinForm.d.ts +8 -0
  33. package/dist/lib/js/index.d.ts +6 -0
  34. package/lib/js/components/Cards/Card/Card.consts.ts +18 -0
  35. package/lib/js/components/Cards/Card/Card.spec.ts +159 -33
  36. package/lib/js/components/Cards/Card/Card.stories.ts +21 -2
  37. package/lib/js/components/Cards/Card/Card.vue +90 -23
  38. package/lib/js/components/Dropdown/Dropdown.vue +6 -10
  39. package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.spec.ts +15 -0
  40. package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.vue +5 -2
  41. package/lib/js/components/Form/Form.stories.ts +37 -2
  42. package/lib/js/components/Form/InputField/InputField.spec.ts +11 -1
  43. package/lib/js/components/Form/InputField/InputField.vue +7 -4
  44. package/lib/js/components/Form/PinInputField/PinInputField.consts.ts +18 -0
  45. package/lib/js/components/Form/PinInputField/PinInputField.spec.ts +394 -0
  46. package/lib/js/components/Form/PinInputField/PinInputField.stories.ts +124 -0
  47. package/lib/js/components/Form/PinInputField/PinInputField.types.ts +42 -0
  48. package/lib/js/components/Form/PinInputField/PinInputField.utils.ts +5 -0
  49. package/lib/js/components/Form/PinInputField/PinInputField.vue +211 -0
  50. package/lib/js/components/Form/PinInputField/index.ts +6 -0
  51. package/lib/js/components/Form/PinInputField/usePinInputFieldWithinForm.ts +29 -0
  52. package/lib/js/components/Form/SelectField/SelectField.spec.ts +495 -0
  53. package/lib/js/components/Form/SelectField/SelectField.stories.ts +282 -0
  54. package/lib/js/components/Form/SelectField/SelectField.types.ts +65 -0
  55. package/lib/js/components/Form/SelectField/SelectField.utils.ts +83 -0
  56. package/lib/js/components/Form/SelectField/SelectField.vue +342 -0
  57. package/lib/js/components/Form/SelectField/SelectFieldOption.vue +51 -0
  58. package/lib/js/components/Form/SelectField/index.ts +5 -0
  59. package/lib/js/components/Form/SelectField/useSelectFieldWithinForm.ts +27 -0
  60. package/lib/js/components/Form/TextAreaField/TextAreaField.spec.ts +341 -0
  61. package/lib/js/components/Form/TextAreaField/TextAreaField.stories.ts +99 -0
  62. package/lib/js/components/Form/TextAreaField/TextAreaField.types.ts +23 -0
  63. package/lib/js/components/Form/TextAreaField/TextAreaField.vue +190 -0
  64. package/lib/js/components/Form/TextAreaField/TextAreaFieldAutosized.vue +19 -0
  65. package/lib/js/components/Form/TextAreaField/index.ts +5 -0
  66. package/lib/js/components/LabelValue/LabelValueItem/LabelValueItem.spec.ts +26 -0
  67. package/lib/js/components/LabelValue/LabelValueItem/LabelValueItem.stories.ts +16 -3
  68. package/lib/js/components/LabelValue/LabelValueItem/LabelValueItem.vue +5 -0
  69. package/lib/js/components/LoadingBar/LoadingBar.spec.ts +84 -0
  70. package/lib/js/components/LoadingBar/LoadingBar.vue +30 -19
  71. package/lib/js/components/SelectList/SelectListItem/SelectListItem.spec.ts +77 -0
  72. package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue +4 -1
  73. package/lib/js/components/Toast/Toast.consts.ts +4 -2
  74. package/lib/js/components/Toast/Toast.spec.ts +177 -0
  75. package/lib/js/components/Toast/Toast.stories.ts +65 -31
  76. package/lib/js/components/Toast/Toast.vue +176 -195
  77. package/lib/js/composables/useFormFieldWithinForm.ts +4 -4
  78. package/lib/js/{components/Form/InputField/useInputFieldWithinForm.ts → composables/useTextFieldWithinForm.ts} +7 -2
  79. package/lib/js/index.ts +6 -0
  80. package/lib/js/styles/Shadows/Shadows.stories.scss +16 -0
  81. package/lib/js/styles/Shadows/Shadows.stories.ts +4 -0
  82. package/lib/styles/mixins/_dropdown-surface.scss +24 -0
  83. package/lib/styles/settings/_shadows.scss +18 -0
  84. package/package.json +1 -1
  85. package/dist/lib/js/components/Form/InputField/useInputFieldWithinForm.d.ts +0 -8
@@ -4,9 +4,11 @@ import { IconItem } from '../../Icons/Icon';
4
4
  declare function __VLS_template(): Readonly<{
5
5
  accessory?: () => any;
6
6
  metadata?: () => any;
7
+ text?: () => any;
7
8
  }> & {
8
9
  accessory?: () => any;
9
10
  metadata?: () => any;
11
+ text?: () => any;
10
12
  };
11
13
  declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
12
14
  iconLeft?: IconItem | null;
@@ -176,9 +176,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
176
176
  $slots: Readonly<{
177
177
  accessory?: () => any;
178
178
  metadata?: () => any;
179
+ text?: () => any;
179
180
  }> & {
180
181
  accessory?: () => any;
181
182
  metadata?: () => any;
183
+ text?: () => any;
182
184
  };
183
185
  });
184
186
  }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
@@ -419,12 +419,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
419
419
  hasRibbon: {
420
420
  type: import('vue').PropType<boolean>;
421
421
  };
422
- hasRadius: {
423
- type: import('vue').PropType<boolean>;
422
+ elevation: {
423
+ type: import('vue').PropType<import('../../Cards/Card').CardElevation>;
424
+ };
425
+ radius: {
426
+ type: import('vue').PropType<import('../../Cards/Card').CardRadius>;
424
427
  };
425
428
  backgroundColor: {
426
429
  type: import('vue').PropType<import('../../Cards/Card').CardBackgroundColor>;
427
430
  };
431
+ isFlat: {
432
+ type: import('vue').PropType<boolean>;
433
+ };
428
434
  ribbonPosition: {
429
435
  type: import('vue').PropType<import('../../Cards/Card').CardRibbonPositions>;
430
436
  };
@@ -446,12 +452,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
446
452
  loadingBarTime: {
447
453
  type: import('vue').PropType<string>;
448
454
  };
449
- isFlat: {
450
- type: import('vue').PropType<boolean>;
451
- };
452
455
  isContentScrollable: {
453
456
  type: import('vue').PropType<boolean>;
454
457
  };
458
+ hasRadius: {
459
+ type: import('vue').PropType<import('../../../utils/type.utils').RemovedProp<"renamed to radius">>;
460
+ };
455
461
  }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
456
462
  P: {};
457
463
  B: {};
@@ -478,12 +484,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
478
484
  hasRibbon: {
479
485
  type: import('vue').PropType<boolean>;
480
486
  };
481
- hasRadius: {
482
- type: import('vue').PropType<boolean>;
487
+ elevation: {
488
+ type: import('vue').PropType<import('../../Cards/Card').CardElevation>;
489
+ };
490
+ radius: {
491
+ type: import('vue').PropType<import('../../Cards/Card').CardRadius>;
483
492
  };
484
493
  backgroundColor: {
485
494
  type: import('vue').PropType<import('../../Cards/Card').CardBackgroundColor>;
486
495
  };
496
+ isFlat: {
497
+ type: import('vue').PropType<boolean>;
498
+ };
487
499
  ribbonPosition: {
488
500
  type: import('vue').PropType<import('../../Cards/Card').CardRibbonPositions>;
489
501
  };
@@ -505,12 +517,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
505
517
  loadingBarTime: {
506
518
  type: import('vue').PropType<string>;
507
519
  };
508
- isFlat: {
509
- type: import('vue').PropType<boolean>;
510
- };
511
520
  isContentScrollable: {
512
521
  type: import('vue').PropType<boolean>;
513
522
  };
523
+ hasRadius: {
524
+ type: import('vue').PropType<import('../../../utils/type.utils').RemovedProp<"renamed to radius">>;
525
+ };
514
526
  }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
515
527
  __isFragment?: never;
516
528
  __isTeleport?: never;
@@ -534,12 +546,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
534
546
  hasRibbon: {
535
547
  type: import('vue').PropType<boolean>;
536
548
  };
537
- hasRadius: {
538
- type: import('vue').PropType<boolean>;
549
+ elevation: {
550
+ type: import('vue').PropType<import('../../Cards/Card').CardElevation>;
551
+ };
552
+ radius: {
553
+ type: import('vue').PropType<import('../../Cards/Card').CardRadius>;
539
554
  };
540
555
  backgroundColor: {
541
556
  type: import('vue').PropType<import('../../Cards/Card').CardBackgroundColor>;
542
557
  };
558
+ isFlat: {
559
+ type: import('vue').PropType<boolean>;
560
+ };
543
561
  ribbonPosition: {
544
562
  type: import('vue').PropType<import('../../Cards/Card').CardRibbonPositions>;
545
563
  };
@@ -561,12 +579,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
561
579
  loadingBarTime: {
562
580
  type: import('vue').PropType<string>;
563
581
  };
564
- isFlat: {
565
- type: import('vue').PropType<boolean>;
566
- };
567
582
  isContentScrollable: {
568
583
  type: import('vue').PropType<boolean>;
569
584
  };
585
+ hasRadius: {
586
+ type: import('vue').PropType<import('../../../utils/type.utils').RemovedProp<"renamed to radius">>;
587
+ };
570
588
  }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
571
589
  $slots: Readonly<{
572
590
  header?: () => any;
@@ -480,12 +480,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
480
480
  hasRibbon: {
481
481
  type: import('vue').PropType<boolean>;
482
482
  };
483
- hasRadius: {
484
- type: import('vue').PropType<boolean>;
483
+ elevation: {
484
+ type: import('vue').PropType<import('../../Cards/Card').CardElevation>;
485
+ };
486
+ radius: {
487
+ type: import('vue').PropType<import('../../Cards/Card').CardRadius>;
485
488
  };
486
489
  backgroundColor: {
487
490
  type: import('vue').PropType<import('../../Cards/Card').CardBackgroundColor>;
488
491
  };
492
+ isFlat: {
493
+ type: import('vue').PropType<boolean>;
494
+ };
489
495
  ribbonPosition: {
490
496
  type: import('vue').PropType<import('../../Cards/Card').CardRibbonPositions>;
491
497
  };
@@ -507,12 +513,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
507
513
  loadingBarTime: {
508
514
  type: import('vue').PropType<string>;
509
515
  };
510
- isFlat: {
511
- type: import('vue').PropType<boolean>;
512
- };
513
516
  isContentScrollable: {
514
517
  type: import('vue').PropType<boolean>;
515
518
  };
519
+ hasRadius: {
520
+ type: import('vue').PropType<import('../../../utils/type.utils').RemovedProp<"renamed to radius">>;
521
+ };
516
522
  }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
517
523
  P: {};
518
524
  B: {};
@@ -539,12 +545,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
539
545
  hasRibbon: {
540
546
  type: import('vue').PropType<boolean>;
541
547
  };
542
- hasRadius: {
543
- type: import('vue').PropType<boolean>;
548
+ elevation: {
549
+ type: import('vue').PropType<import('../../Cards/Card').CardElevation>;
550
+ };
551
+ radius: {
552
+ type: import('vue').PropType<import('../../Cards/Card').CardRadius>;
544
553
  };
545
554
  backgroundColor: {
546
555
  type: import('vue').PropType<import('../../Cards/Card').CardBackgroundColor>;
547
556
  };
557
+ isFlat: {
558
+ type: import('vue').PropType<boolean>;
559
+ };
548
560
  ribbonPosition: {
549
561
  type: import('vue').PropType<import('../../Cards/Card').CardRibbonPositions>;
550
562
  };
@@ -566,12 +578,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
566
578
  loadingBarTime: {
567
579
  type: import('vue').PropType<string>;
568
580
  };
569
- isFlat: {
570
- type: import('vue').PropType<boolean>;
571
- };
572
581
  isContentScrollable: {
573
582
  type: import('vue').PropType<boolean>;
574
583
  };
584
+ hasRadius: {
585
+ type: import('vue').PropType<import('../../../utils/type.utils').RemovedProp<"renamed to radius">>;
586
+ };
575
587
  }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
576
588
  __isFragment?: never;
577
589
  __isTeleport?: never;
@@ -595,12 +607,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
595
607
  hasRibbon: {
596
608
  type: import('vue').PropType<boolean>;
597
609
  };
598
- hasRadius: {
599
- type: import('vue').PropType<boolean>;
610
+ elevation: {
611
+ type: import('vue').PropType<import('../../Cards/Card').CardElevation>;
612
+ };
613
+ radius: {
614
+ type: import('vue').PropType<import('../../Cards/Card').CardRadius>;
600
615
  };
601
616
  backgroundColor: {
602
617
  type: import('vue').PropType<import('../../Cards/Card').CardBackgroundColor>;
603
618
  };
619
+ isFlat: {
620
+ type: import('vue').PropType<boolean>;
621
+ };
604
622
  ribbonPosition: {
605
623
  type: import('vue').PropType<import('../../Cards/Card').CardRibbonPositions>;
606
624
  };
@@ -622,12 +640,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
622
640
  loadingBarTime: {
623
641
  type: import('vue').PropType<string>;
624
642
  };
625
- isFlat: {
626
- type: import('vue').PropType<boolean>;
627
- };
628
643
  isContentScrollable: {
629
644
  type: import('vue').PropType<boolean>;
630
645
  };
646
+ hasRadius: {
647
+ type: import('vue').PropType<import('../../../utils/type.utils').RemovedProp<"renamed to radius">>;
648
+ };
631
649
  }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
632
650
  $slots: Readonly<{
633
651
  header?: () => any;
@@ -3,20 +3,22 @@ import { Value } from '../../utils/type.utils';
3
3
  export declare const TOAST_SIZES: {
4
4
  readonly SMALL: "small";
5
5
  readonly MEDIUM: "medium";
6
+ readonly LARGE: "large";
6
7
  };
7
8
  export type ToastSizes = Value<typeof TOAST_SIZES>;
8
9
  export declare const TOAST_COLORS: {
9
- NEUTRAL_HEAVY: string;
10
- NEUTRAL_STRONG: string;
11
- SUCCESS: string;
12
- WARNING: string;
13
- DANGER: string;
14
- INFO: string;
10
+ readonly NEUTRAL_HEAVY: "neutralHeavy";
11
+ readonly NEUTRAL_STRONG: "neutralStrong";
12
+ readonly SUCCESS: "success";
13
+ readonly WARNING: "warning";
14
+ readonly DANGER: "danger";
15
+ readonly INFO: "info";
15
16
  };
16
17
  export type ToastColors = Value<typeof TOAST_COLORS>;
17
18
  export declare const TOAST_POSITIONS: {
18
- LEFT: string;
19
- CENTER: string;
20
- RIGHT: string;
19
+ readonly LEFT: "left";
20
+ readonly CENTER: "center";
21
+ readonly RIGHT: "right";
22
+ readonly NONE: "none";
21
23
  };
22
24
  export type ToastPositions = Value<typeof TOAST_POSITIONS>;