@bethinkpl/design-system 30.1.2 → 30.3.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.
Files changed (80) hide show
  1. package/dist/design-system.css +1 -1
  2. package/dist/design-system.js +26604 -272
  3. package/dist/design-system.js.map +1 -1
  4. package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts +5 -0
  5. package/dist/lib/js/components/Cards/Card/Card.vue.d.ts +2 -0
  6. package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts +14 -0
  7. package/dist/lib/js/components/Chip/Chip.vue.d.ts +10 -0
  8. package/dist/lib/js/components/DatePickers/DateBox/DateBox.vue.d.ts +5 -0
  9. package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +5 -0
  10. package/dist/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue.d.ts +5 -0
  11. package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts +48 -14
  12. package/dist/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue.d.ts +5 -0
  13. package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts +15 -0
  14. package/dist/lib/js/components/Form/Checkbox/Checkbox.consts.d.ts +18 -5
  15. package/dist/lib/js/components/Form/Checkbox/Checkbox.vue.d.ts +31 -461
  16. package/dist/lib/js/components/Form/Checkbox/index.d.ts +2 -0
  17. package/dist/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.consts.d.ts +9 -0
  18. package/dist/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.types.d.ts +12 -0
  19. package/dist/lib/js/components/Form/CheckboxGroupField/index.d.ts +1 -0
  20. package/dist/lib/js/components/Form/FormControlLabel/FormControlLabel.consts.d.ts +13 -0
  21. package/dist/lib/js/components/Form/FormControlLabel/FormControlLabel.vue.d.ts +28 -0
  22. package/dist/lib/js/components/Form/FormField/FormField.types.d.ts +1 -0
  23. package/dist/lib/js/components/Form/FormField/FormField.utils.d.ts +2 -2
  24. package/dist/lib/js/components/Form/InputField/useInputFieldWithinForm.d.ts +1 -1
  25. package/dist/lib/js/components/Form/RadioButton/RadioButton.vue.d.ts +5 -0
  26. package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts +10 -0
  27. package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts +10 -0
  28. package/dist/lib/js/components/Icons/Icon/Icon.consts.d.ts +5 -0
  29. package/dist/lib/js/components/Modal/Modal.vue.d.ts +5 -0
  30. package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts +10 -0
  31. package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts +10 -0
  32. package/dist/lib/js/components/Outline/OutlineItem/OutlineItem.vue.d.ts +5 -0
  33. package/dist/lib/js/components/Pagination/Pagination.vue.d.ts +15 -0
  34. package/dist/lib/js/components/ProgressBar/ProgressBar.vue.d.ts +5 -0
  35. package/dist/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue.d.ts +5 -0
  36. package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +70 -469
  37. package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts +70 -469
  38. package/dist/lib/js/components/SelectList/SelectListItem/SelectListItem.vue.d.ts +5 -0
  39. package/dist/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue.d.ts +5 -0
  40. package/dist/lib/js/components/SelectionTile/SelectionTile.vue.d.ts +29 -1533
  41. package/dist/lib/js/components/Statuses/AccessStatus/AccessStatus.vue.d.ts +5 -0
  42. package/dist/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue.d.ts +5 -0
  43. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts +24 -0
  44. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts +24 -0
  45. package/dist/lib/js/components/Switch/Switch.vue.d.ts +5 -0
  46. package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts +5 -0
  47. package/dist/lib/js/components/Toast/Toast.vue.d.ts +9 -0
  48. package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts +5 -0
  49. package/dist/lib/js/composables/useFormFieldWithinForm.d.ts +7 -0
  50. package/dist/lib/js/icons/fontawesome.d.ts +5 -0
  51. package/lib/js/components/Cards/Card/Card.spec.ts +23 -0
  52. package/lib/js/components/Cards/Card/Card.stories.ts +1 -0
  53. package/lib/js/components/Cards/Card/Card.vue +21 -4
  54. package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue +13 -13
  55. package/lib/js/components/Form/Checkbox/Checkbox.consts.ts +27 -10
  56. package/lib/js/components/Form/Checkbox/Checkbox.spec.ts +294 -0
  57. package/lib/js/components/Form/Checkbox/Checkbox.stories.ts +60 -19
  58. package/lib/js/components/Form/Checkbox/Checkbox.vue +272 -55
  59. package/lib/js/components/Form/Checkbox/index.ts +2 -0
  60. package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.consts.ts +11 -0
  61. package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.spec.ts +268 -0
  62. package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.stories.ts +92 -0
  63. package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.types.ts +13 -0
  64. package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.vue +97 -0
  65. package/lib/js/components/Form/CheckboxGroupField/index.ts +1 -0
  66. package/lib/js/components/Form/Form.stories.ts +67 -0
  67. package/lib/js/components/Form/FormControlLabel/FormControlLabel.consts.ts +16 -0
  68. package/lib/js/components/Form/FormControlLabel/FormControlLabel.vue +61 -0
  69. package/lib/js/components/Form/FormField/FormField.types.ts +2 -1
  70. package/lib/js/components/Form/FormField/FormField.utils.ts +14 -10
  71. package/lib/js/components/Form/FormField/FormField.vue +3 -2
  72. package/lib/js/components/Form/InputField/InputField.vue +1 -7
  73. package/lib/js/components/Form/InputField/useInputFieldWithinForm.ts +4 -29
  74. package/lib/js/components/RichList/RichListItem/RichListItem.vue +11 -8
  75. package/lib/js/components/SelectionTile/SelectionTile.vue +64 -95
  76. package/lib/js/composables/useFormFieldWithinForm.ts +26 -0
  77. package/lib/js/composables/useLegacyI18n.ts +0 -1
  78. package/lib/js/icons/fontawesome.ts +10 -0
  79. package/lib/styles/settings/_animations.scss +3 -0
  80. package/package.json +7 -2
@@ -47,6 +47,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
47
47
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
48
48
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
49
49
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
50
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
50
51
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
51
52
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
52
53
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -219,6 +220,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
219
220
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
220
221
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
221
222
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
223
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
222
224
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
223
225
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
224
226
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -248,6 +250,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
248
250
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
249
251
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
250
252
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
253
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
254
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
255
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
251
256
  }>;
252
257
  ICON_SIZES: Readonly<{
253
258
  XXX_SMALL: string;
@@ -45,6 +45,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
45
45
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
46
46
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
47
47
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
48
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
48
49
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
49
50
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
50
51
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -217,6 +218,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
217
218
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
218
219
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
219
220
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
221
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
220
222
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
221
223
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
222
224
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -246,6 +248,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
246
248
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
247
249
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
248
250
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
251
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
252
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
253
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
249
254
  }>;
250
255
  ICON_SIZES: Readonly<{
251
256
  XXX_SMALL: string;
@@ -64,6 +64,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
64
64
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
65
65
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
66
66
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
67
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
67
68
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
68
69
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
69
70
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -236,6 +237,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
236
237
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
237
238
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
238
239
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
240
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
239
241
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
240
242
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
241
243
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -265,6 +267,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
265
267
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
266
268
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
267
269
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
270
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
271
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
272
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
268
273
  }>;
269
274
  ICON_BUTTON_COLORS: Readonly<{
270
275
  readonly PRIMARY: "primary";
@@ -445,6 +450,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
445
450
  });
446
451
  DsCard: {
447
452
  new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
453
+ contentHasPadding: {
454
+ type: import('vue').PropType<boolean>;
455
+ };
448
456
  headerHasPadding: {
449
457
  type: import('vue').PropType<boolean>;
450
458
  };
@@ -495,6 +503,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
495
503
  M: {};
496
504
  Defaults: {};
497
505
  }, Readonly<import('vue').ExtractPropTypes<{
506
+ contentHasPadding: {
507
+ type: import('vue').PropType<boolean>;
508
+ };
498
509
  headerHasPadding: {
499
510
  type: import('vue').PropType<boolean>;
500
511
  };
@@ -542,6 +553,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
542
553
  __isTeleport?: never;
543
554
  __isSuspense?: never;
544
555
  } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
556
+ contentHasPadding: {
557
+ type: import('vue').PropType<boolean>;
558
+ };
545
559
  headerHasPadding: {
546
560
  type: import('vue').PropType<boolean>;
547
561
  };
@@ -688,6 +702,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
688
702
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
689
703
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
690
704
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
705
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
691
706
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
692
707
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
693
708
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -860,6 +875,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
860
875
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
861
876
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
862
877
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
878
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
863
879
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
864
880
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
865
881
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -889,6 +905,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
889
905
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
890
906
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
891
907
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
908
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
909
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
910
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
892
911
  }>;
893
912
  ICON_SIZES: Readonly<{
894
913
  XXX_SMALL: string;
@@ -1218,6 +1237,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1218
1237
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
1219
1238
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1220
1239
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
1240
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1221
1241
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1222
1242
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1223
1243
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1390,6 +1410,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1390
1410
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1391
1411
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1392
1412
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
1413
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1393
1414
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1394
1415
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1395
1416
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1419,6 +1440,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1419
1440
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1420
1441
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1421
1442
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
1443
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1444
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1445
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1422
1446
  }>;
1423
1447
  ICON_SIZES: Readonly<{
1424
1448
  XXX_SMALL: string;
@@ -83,6 +83,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
83
83
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
84
84
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
85
85
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
86
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
86
87
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
87
88
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
88
89
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -255,6 +256,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
255
256
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
256
257
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
257
258
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
259
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
258
260
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
259
261
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
260
262
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -284,6 +286,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
284
286
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
285
287
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
286
288
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
289
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
290
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
291
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
287
292
  }>;
288
293
  ICON_SIZES: Readonly<{
289
294
  XXX_SMALL: string;
@@ -418,6 +423,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
418
423
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
419
424
  DsCard: {
420
425
  new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
426
+ contentHasPadding: {
427
+ type: import('vue').PropType<boolean>;
428
+ };
421
429
  headerHasPadding: {
422
430
  type: import('vue').PropType<boolean>;
423
431
  };
@@ -468,6 +476,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
468
476
  M: {};
469
477
  Defaults: {};
470
478
  }, Readonly<import('vue').ExtractPropTypes<{
479
+ contentHasPadding: {
480
+ type: import('vue').PropType<boolean>;
481
+ };
471
482
  headerHasPadding: {
472
483
  type: import('vue').PropType<boolean>;
473
484
  };
@@ -515,6 +526,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
515
526
  __isTeleport?: never;
516
527
  __isSuspense?: never;
517
528
  } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
529
+ contentHasPadding: {
530
+ type: import('vue').PropType<boolean>;
531
+ };
518
532
  headerHasPadding: {
519
533
  type: import('vue').PropType<boolean>;
520
534
  };
@@ -661,6 +675,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
661
675
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
662
676
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
663
677
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
678
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
664
679
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
665
680
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
666
681
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -833,6 +848,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
833
848
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
834
849
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
835
850
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
851
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
836
852
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
837
853
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
838
854
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -862,6 +878,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
862
878
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
863
879
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
864
880
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
881
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
882
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
883
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
865
884
  }>;
866
885
  ICON_SIZES: Readonly<{
867
886
  XXX_SMALL: string;
@@ -1364,6 +1383,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1364
1383
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
1365
1384
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1366
1385
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
1386
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1367
1387
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1368
1388
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1369
1389
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1536,6 +1556,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1536
1556
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1537
1557
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1538
1558
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
1559
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1539
1560
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1540
1561
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1541
1562
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1565,6 +1586,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1565
1586
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1566
1587
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1567
1588
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
1589
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1590
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1591
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1568
1592
  }>;
1569
1593
  ICON_SIZES: Readonly<{
1570
1594
  XXX_SMALL: string;
@@ -83,6 +83,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
83
83
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
84
84
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
85
85
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
86
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
86
87
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
87
88
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
88
89
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -255,6 +256,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
255
256
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
256
257
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
257
258
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
259
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
258
260
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
259
261
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
260
262
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -284,6 +286,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
284
286
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
285
287
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
286
288
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
289
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
290
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
291
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
287
292
  }>;
288
293
  ICON_SIZES: Readonly<{
289
294
  XXX_SMALL: string;
@@ -43,6 +43,7 @@ export declare const data: () => {
43
43
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
44
44
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
45
45
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
46
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
46
47
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
47
48
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
48
49
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -215,6 +216,7 @@ export declare const data: () => {
215
216
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
216
217
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
217
218
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
219
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
218
220
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
219
221
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
220
222
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -244,6 +246,9 @@ export declare const data: () => {
244
246
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
245
247
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
246
248
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
249
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
250
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
251
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
247
252
  }>;
248
253
  BANNER_COLORS: Readonly<{
249
254
  readonly DEFAULT: "default";
@@ -243,6 +243,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
243
243
  });
244
244
  DsCard: {
245
245
  new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
246
+ contentHasPadding: {
247
+ type: PropType<boolean>;
248
+ };
246
249
  headerHasPadding: {
247
250
  type: PropType<boolean>;
248
251
  };
@@ -293,6 +296,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
293
296
  M: {};
294
297
  Defaults: {};
295
298
  }, Readonly<import('vue').ExtractPropTypes<{
299
+ contentHasPadding: {
300
+ type: PropType<boolean>;
301
+ };
296
302
  headerHasPadding: {
297
303
  type: PropType<boolean>;
298
304
  };
@@ -340,6 +346,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
340
346
  __isTeleport?: never;
341
347
  __isSuspense?: never;
342
348
  } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
349
+ contentHasPadding: {
350
+ type: PropType<boolean>;
351
+ };
343
352
  headerHasPadding: {
344
353
  type: PropType<boolean>;
345
354
  };
@@ -99,6 +99,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
99
99
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
100
100
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
101
101
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
102
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
102
103
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
103
104
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
104
105
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -271,6 +272,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
271
272
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
272
273
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
273
274
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
275
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
274
276
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
275
277
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
276
278
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -300,6 +302,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
300
302
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
301
303
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
302
304
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
305
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
306
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
307
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
303
308
  }>;
304
309
  TOGGLE_BUTTON_COLORS: Readonly<{
305
310
  readonly NEUTRAL: "neutral";
@@ -0,0 +1,7 @@
1
+ import { MaybeRefOrGetter, Ref } from 'vue';
2
+
3
+ export declare function useFormFieldWithinForm<T = string>(name: MaybeRefOrGetter<string | undefined>, modelValue: Ref<T | undefined>): {
4
+ field: import('vee-validate').FieldContext<string[]> | null;
5
+ value: Ref<T | undefined, T | undefined> | Ref<string[], string[]>;
6
+ errors: Ref<string[], string[]>;
7
+ };
@@ -30,6 +30,7 @@ export declare const FONTAWESOME_ICONS: {
30
30
  readonly FA_BOLT: import('@fortawesome/fontawesome-common-types').IconDefinition;
31
31
  readonly FA_BOOK_BLANK: import('@fortawesome/fontawesome-common-types').IconDefinition;
32
32
  readonly FA_BOOK_COPY: import('@fortawesome/fontawesome-common-types').IconDefinition;
33
+ readonly FA_BOOK_OPEN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
33
34
  readonly FA_BOOK_SKULL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
34
35
  readonly FA_BOOK_MEDICAL_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
35
36
  readonly FA_BOOK_SPARKLES_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -202,6 +203,7 @@ export declare const FONTAWESOME_ICONS: {
202
203
  readonly FA_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
203
204
  readonly FA_SQUARE_LIST_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
204
205
  readonly FA_SQUARE_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
206
+ readonly FA_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
205
207
  readonly FA_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
206
208
  readonly FA_STAR_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
207
209
  readonly FA_STAR: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -231,6 +233,9 @@ export declare const FONTAWESOME_ICONS: {
231
233
  readonly FA_WINDOW_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
232
234
  readonly FA_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
233
235
  readonly FAD_SPINNER_THIRD: import('@fortawesome/fontawesome-common-types').IconDefinition;
236
+ readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
237
+ readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
238
+ readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
234
239
  };
235
240
  export declare function initialize(): void;
236
241
  export declare function initializeWithDomWatcher(): void;
@@ -55,6 +55,29 @@ describe('Card', () => {
55
55
  expect(component.text()).toContain(footer);
56
56
  });
57
57
 
58
+ it('should render content slot with padding by default', () => {
59
+ const content = 'Wpłynąlem na suchego przestwór oceanu';
60
+ const component = createComponent({
61
+ slots: {
62
+ content: () => [h('span', content)],
63
+ },
64
+ });
65
+
66
+ expect(component.find('.ds-card__content').classes()).toContain('-ds-withPadding');
67
+ });
68
+
69
+ it('should render content slot without padding if contentHasPadding is false', () => {
70
+ const content = 'Wpłynąlem na suchego przestwór oceanu';
71
+ const component = createComponent({
72
+ props: { contentHasPadding: false },
73
+ slots: {
74
+ content: () => [h('span', content)],
75
+ },
76
+ });
77
+
78
+ expect(component.find('.ds-card__content').classes()).not.toContain('-ds-withPadding');
79
+ });
80
+
58
81
  it('should render header slot with padding', () => {
59
82
  const header = 'Wpłynąlem na suchego przestwór oceanu';
60
83
  const component = createComponent({
@@ -39,6 +39,7 @@ const args = {
39
39
  header: 'header slot',
40
40
  content: 'content slot that supports <b>HTML markup</b>',
41
41
  footer: 'footer slot',
42
+ contentHasPadding: true,
42
43
  headerHasPadding: false,
43
44
  footerHasPadding: false,
44
45
  paddingSize: CARD_PADDING_SIZES.SMALL,
@@ -45,7 +45,10 @@
45
45
  <div
46
46
  v-if="$slots.content"
47
47
  class="ds-card__content"
48
- :class="{ '-ds-scrollable': isContentScrollable }"
48
+ :class="{
49
+ '-ds-scrollable': isContentScrollable,
50
+ '-ds-withPadding': contentHasPadding,
51
+ }"
49
52
  >
50
53
  <slot name="content" />
51
54
  </div>
@@ -118,10 +121,14 @@
118
121
  }
119
122
 
120
123
  &__content {
121
- padding: $space-s;
124
+ padding: $space-s 0;
122
125
 
123
- #{$root}.-ds-paddingLarge & {
124
- padding: $space-s $space-l;
126
+ &.-ds-withPadding {
127
+ padding: $space-s;
128
+
129
+ #{$root}.-ds-paddingLarge & {
130
+ padding: $space-s $space-l;
131
+ }
125
132
  }
126
133
 
127
134
  &.-ds-scrollable {
@@ -157,6 +164,13 @@
157
164
  border-top-left-radius: $card-border-radius;
158
165
  border-top-right-radius: 0;
159
166
  }
167
+
168
+ .-ds-leftBorder & {
169
+ height: 100%;
170
+ left: 0;
171
+ position: absolute;
172
+ top: 0;
173
+ }
160
174
  }
161
175
  }
162
176
  </style>
@@ -180,6 +194,8 @@ import {
180
194
  } from './Card.consts';
181
195
 
182
196
  const {
197
+ // only contentHasPadding is true by default for backward compatibility
198
+ contentHasPadding = true,
183
199
  headerHasPadding = false,
184
200
  footerHasPadding = false,
185
201
  paddingSize = CARD_PADDING_SIZES.SMALL,
@@ -195,6 +211,7 @@ const {
195
211
  isFlat = false,
196
212
  isContentScrollable = false,
197
213
  } = defineProps<{
214
+ contentHasPadding?: boolean;
198
215
  headerHasPadding?: boolean;
199
216
  footerHasPadding?: boolean;
200
217
  paddingSize?: CardPaddingSize;
@@ -56,6 +56,7 @@
56
56
  </div>
57
57
  <icon-button
58
58
  v-if="isClosable"
59
+ :color="ICON_COLORS.NEUTRAL"
59
60
  :icon="ICONS.FA_XMARK"
60
61
  :size="ICON_BUTTON_SIZES.MEDIUM"
61
62
  :touchable="false"
@@ -71,7 +72,7 @@
71
72
  @import '../../../../styles/settings/typography/tokens';
72
73
  @import '../../../../styles/settings/colors/tokens';
73
74
 
74
- $minimal-drawer-header-height: 82px;
75
+ $minimal-drawer-header-height: 58px;
75
76
 
76
77
  .ds-drawerHeader {
77
78
  display: flex;
@@ -127,7 +128,7 @@ $minimal-drawer-header-height: 82px;
127
128
  }
128
129
 
129
130
  &__titleText {
130
- @include heading-s-default-bold-uppercase;
131
+ @include heading-s-default-bold;
131
132
 
132
133
  &.-ds-neutralStrong {
133
134
  color: $color-neutral-text-strong;
@@ -150,7 +151,7 @@ $minimal-drawer-header-height: 82px;
150
151
  display: flex;
151
152
  justify-content: space-between;
152
153
  min-height: $minimal-drawer-header-height;
153
- padding: $space-m $space-xs;
154
+ padding: $space-xs;
154
155
  }
155
156
 
156
157
  &__actions {
@@ -168,7 +169,7 @@ import IconButton from '../../Buttons/IconButton/IconButton.vue';
168
169
  import Chip from '../../Chip/Chip.vue';
169
170
  import Icon from '../../Icons/Icon/Icon.vue';
170
171
  import { BUTTON_TYPES } from '../../Buttons/Button';
171
- import { ICON_SIZES, ICONS } from '../../Icons/Icon';
172
+ import { ICON_COLORS, ICON_SIZES, ICONS } from '../../Icons/Icon';
172
173
  import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
173
174
  import { ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
174
175
  import { DRAWER_HEADER_TITLE_COLORS, DrawerHeaderTitleColor } from './DrawerHeader.consts';
@@ -239,16 +240,15 @@ export default defineComponent({
239
240
  setup() {
240
241
  const { t } = useLegacyI18n();
241
242
 
242
- return { t };
243
- },
244
- data() {
245
243
  return {
246
- BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
247
- DIVIDER_SIZES: Object.freeze(DIVIDER_SIZES),
248
- DIVIDER_PROMINENCES: Object.freeze(DIVIDER_PROMINENCES),
249
- ICONS: Object.freeze(ICONS),
250
- ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
251
- ICON_SIZES: Object.freeze(ICON_SIZES),
244
+ t,
245
+ BUTTON_TYPES,
246
+ DIVIDER_SIZES,
247
+ DIVIDER_PROMINENCES,
248
+ ICONS,
249
+ ICON_BUTTON_SIZES,
250
+ ICON_SIZES,
251
+ ICON_COLORS,
252
252
  };
253
253
  },
254
254
  });
@@ -1,15 +1,32 @@
1
- import {
2
- SELECTION_CONTROL_SIZE,
3
- SELECTION_CONTROL_STATE,
4
- } from '../SelectionControl/SelectionControl.consts';
1
+ import { Value } from '../../../utils/type.utils';
5
2
 
6
- export const CHECKBOX_SIZE = {
7
- ...SELECTION_CONTROL_SIZE,
3
+ export const CHECKBOX_SIZES = {
4
+ X_SMALL: 'x-small',
5
+ SMALL: 'small',
6
+ MEDIUM: 'medium',
8
7
  } as const;
9
8
 
10
- export type CheckboxSize = (typeof CHECKBOX_SIZE)[keyof typeof CHECKBOX_SIZE];
11
- export const CHECKBOX_STATE = {
12
- ...SELECTION_CONTROL_STATE,
9
+ export type CheckboxSize = Value<typeof CHECKBOX_SIZES>;
10
+
11
+ export const CHECKBOX_STATES = {
12
+ DEFAULT: 'default',
13
+ DISABLED: 'disabled',
14
+ ERROR: 'error',
15
+ } as const;
16
+
17
+ export type CheckboxState = Value<typeof CHECKBOX_STATES>;
18
+
19
+ export const CHECKBOX_VALUES = {
20
+ CHECKED: true,
21
+ UNCHECKED: false,
22
+ INDETERMINATE: 'indeterminate',
23
+ } as const;
24
+
25
+ export type CheckboxValue = Value<typeof CHECKBOX_VALUES>;
26
+
27
+ export const CHECKBOX_ELEVATIONS = {
28
+ NONE: 'none',
29
+ X_SMALL: 'x-small',
13
30
  } as const;
14
31
 
15
- export type CheckboxState = (typeof CHECKBOX_STATE)[keyof typeof CHECKBOX_STATE];
32
+ export type CheckboxElevation = Value<typeof CHECKBOX_ELEVATIONS>;