@leaflink/stash 46.2.0 → 46.4.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 (54) hide show
  1. package/assets/illustrations/spot/digital-payments.svg +8 -13
  2. package/assets/illustrations/vignette/api.svg +1 -0
  3. package/assets/illustrations/vignette/bank.svg +1 -21
  4. package/assets/illustrations/vignette/basket.svg +1 -0
  5. package/assets/illustrations/vignette/brand-menu.svg +1 -0
  6. package/assets/illustrations/vignette/calendar.svg +1 -0
  7. package/assets/illustrations/vignette/dashboard.svg +1 -0
  8. package/assets/illustrations/vignette/deals.svg +1 -0
  9. package/assets/illustrations/vignette/document-search.svg +1 -0
  10. package/assets/illustrations/vignette/edit.svg +1 -0
  11. package/assets/illustrations/vignette/empty-tray.svg +1 -0
  12. package/assets/illustrations/vignette/graph.svg +1 -0
  13. package/assets/illustrations/vignette/integrations.svg +1 -0
  14. package/assets/illustrations/vignette/light-bulb.svg +1 -0
  15. package/assets/illustrations/vignette/map.svg +1 -0
  16. package/assets/illustrations/vignette/megaphone.svg +1 -0
  17. package/assets/illustrations/vignette/messages.svg +1 -0
  18. package/assets/illustrations/vignette/money-bank.svg +1 -0
  19. package/assets/illustrations/vignette/notifications.svg +1 -0
  20. package/assets/illustrations/vignette/orders-empty.svg +1 -0
  21. package/assets/illustrations/vignette/payments.svg +1 -0
  22. package/assets/illustrations/vignette/pie-chart.svg +1 -0
  23. package/assets/illustrations/vignette/products.svg +1 -71
  24. package/assets/illustrations/vignette/search-storefront.svg +1 -1
  25. package/assets/illustrations/vignette/search.svg +1 -0
  26. package/assets/illustrations/vignette/store.svg +1 -0
  27. package/assets/illustrations/vignette/todo.svg +1 -1
  28. package/assets/illustrations/vignette/truck.svg +1 -0
  29. package/assets/illustrations/vignette/users.svg +1 -0
  30. package/assets/illustrations/vignette/warehouse-delivery.svg +1 -0
  31. package/assets/illustrations/vignette/warehouse.svg +1 -38
  32. package/dist/EmptyState.js +62 -27
  33. package/dist/EmptyState.js.map +1 -1
  34. package/dist/EmptyState.vue.d.ts +68 -4
  35. package/dist/HttpError.js +1 -1
  36. package/dist/Illustration.js +2 -2
  37. package/dist/Illustration.vue.d.ts +27 -1
  38. package/dist/Illustration.vue_vue_type_script_setup_true_lang-664fa82f.js +56 -0
  39. package/dist/Illustration.vue_vue_type_script_setup_true_lang-664fa82f.js.map +1 -0
  40. package/dist/ListView.js +7 -6
  41. package/dist/ListView.js.map +1 -1
  42. package/dist/Table.js +50 -49
  43. package/dist/Table.js.map +1 -1
  44. package/dist/TableCell.js +4 -2
  45. package/dist/TableCell.js.map +1 -1
  46. package/dist/TableHeaderCell.js +3 -2
  47. package/dist/TableHeaderCell.js.map +1 -1
  48. package/dist/TableHeaderRow.js +7 -6
  49. package/dist/TableHeaderRow.js.map +1 -1
  50. package/dist/TableRow.js +3 -2
  51. package/dist/TableRow.js.map +1 -1
  52. package/package.json +1 -1
  53. package/dist/Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js +0 -56
  54. package/dist/Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js.map +0 -1
package/dist/TableCell.js CHANGED
@@ -5,6 +5,7 @@ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
5
5
  import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
6
6
  import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
7
7
  import "lodash-es/get";
8
+ import "./Illustration.vue_vue_type_script_setup_true_lang-664fa82f.js";
8
9
  import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
9
10
  import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
10
11
  import { T as y, s as C } from "./Table.keys-cf93df19.js";
@@ -12,6 +13,7 @@ import "@leaflink/snitch";
12
13
  import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
13
14
  import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
14
15
  import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
16
+ import "./index-79ce320f.js";
15
17
  const T = {
16
18
  key: 0,
17
19
  class: "tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden"
@@ -49,8 +51,8 @@ const T = {
49
51
  }
50
52
  }), x = {
51
53
  $style: C
52
- }, L = /* @__PURE__ */ h(k, [["__cssModules", x]]);
54
+ }, V = /* @__PURE__ */ h(k, [["__cssModules", x]]);
53
55
  export {
54
- L as default
56
+ V as default
55
57
  };
56
58
  //# sourceMappingURL=TableCell.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.js","sources":["../src/components/TableCell/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { TABLE_INJECTION } from '../Table/Table.vue';\n\n export interface TableCellProps {\n /**\n * If true, displays the cell as a control (vs data) cell without a background color on mobile when Table is in the stacked layout\n */\n isControl?: boolean;\n /**\n * If true, displays the header inside the cell on mobile and tablet screens when Table is in the stacked layout\n */\n mobileHeader?: string;\n }\n\n const props = withDefaults(defineProps<TableCellProps>(), {\n isControl: false,\n mobileHeader: '',\n });\n const classes = useCssModule();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n if (!tableInjection) {\n throw new Error('TableCell must be used within a Table component');\n }\n\n const { density, hasActions, layout } = tableInjection;\n</script>\n\n<template>\n <td\n class=\"stash-table-cell\"\n data-test=\"stash-table-cell\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['root--density-compact']]: density === 'compact',\n [classes['root--density-comfortable']]: density === 'comfortable',\n [classes['has-actions']]: hasActions,\n 'tw-p-3': layout === 'scroll',\n 'tw-p-1.5': layout === 'stack',\n 'lg:tw-p-3': density === 'compact',\n 'lg:tw-px-3 lg:tw-py-6': density === 'comfortable',\n [classes['is-control']]: props.isControl,\n },\n ]\"\n >\n <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden\">\n {{ props.mobileHeader }}\n </div>\n <!-- @slot default -->\n <slot></slot>\n </td>\n</template>\n\n<style module>\n .root {\n border: 0;\n }\n\n .layout--scroll {\n background-color: var(--color-white);\n border: none;\n border-bottom: 1px solid var(--color-ice-200);\n }\n\n .layout--scroll.has-actions:last-of-type {\n text-align: center;\n }\n\n .layout--stack {\n background-color: var(--color-ice-100);\n border-radius: theme('borderRadius.DEFAULT');\n }\n\n .layout--stack.has-actions:last-of-type {\n background-color: transparent;\n position: absolute;\n right: 0;\n top: 0;\n }\n\n .layout--stack.is-control {\n background-color: transparent;\n }\n\n /* On large screens, layout--stack should match layout--scroll */\n @media screen('lg') {\n .layout--stack {\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-ice-200);\n border-radius: initial;\n }\n\n .layout--stack.has-actions:last-of-type {\n background-color: var(--color-white);\n position: initial;\n right: initial;\n text-align: center;\n top: initial;\n }\n\n .layout--stack.is-control {\n background-color: var(--color-white);\n }\n\n .root--density-comfortable:last-of-type:not(.has-actions) {\n padding-right: 24px;\n }\n\n .root--density-comfortable:first-of-type:not(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell), :global(.stash-table-row__toggle-expansion-cell)) {\n padding-left: 24px;\n }\n }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBAoBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TableCell.js","sources":["../src/components/TableCell/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { TABLE_INJECTION } from '../Table/Table.vue';\n\n export interface TableCellProps {\n /**\n * If true, displays the cell as a control (vs data) cell without a background color on mobile when Table is in the stacked layout\n */\n isControl?: boolean;\n /**\n * If true, displays the header inside the cell on mobile and tablet screens when Table is in the stacked layout\n */\n mobileHeader?: string;\n }\n\n const props = withDefaults(defineProps<TableCellProps>(), {\n isControl: false,\n mobileHeader: '',\n });\n const classes = useCssModule();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n if (!tableInjection) {\n throw new Error('TableCell must be used within a Table component');\n }\n\n const { density, hasActions, layout } = tableInjection;\n</script>\n\n<template>\n <td\n class=\"stash-table-cell\"\n data-test=\"stash-table-cell\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['root--density-compact']]: density === 'compact',\n [classes['root--density-comfortable']]: density === 'comfortable',\n [classes['has-actions']]: hasActions,\n 'tw-p-3': layout === 'scroll',\n 'tw-p-1.5': layout === 'stack',\n 'lg:tw-p-3': density === 'compact',\n 'lg:tw-px-3 lg:tw-py-6': density === 'comfortable',\n [classes['is-control']]: props.isControl,\n },\n ]\"\n >\n <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden\">\n {{ props.mobileHeader }}\n </div>\n <!-- @slot default -->\n <slot></slot>\n </td>\n</template>\n\n<style module>\n .root {\n border: 0;\n }\n\n .layout--scroll {\n background-color: var(--color-white);\n border: none;\n border-bottom: 1px solid var(--color-ice-200);\n }\n\n .layout--scroll.has-actions:last-of-type {\n text-align: center;\n }\n\n .layout--stack {\n background-color: var(--color-ice-100);\n border-radius: theme('borderRadius.DEFAULT');\n }\n\n .layout--stack.has-actions:last-of-type {\n background-color: transparent;\n position: absolute;\n right: 0;\n top: 0;\n }\n\n .layout--stack.is-control {\n background-color: transparent;\n }\n\n /* On large screens, layout--stack should match layout--scroll */\n @media screen('lg') {\n .layout--stack {\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-ice-200);\n border-radius: initial;\n }\n\n .layout--stack.has-actions:last-of-type {\n background-color: var(--color-white);\n position: initial;\n right: initial;\n text-align: center;\n top: initial;\n }\n\n .layout--stack.is-control {\n background-color: var(--color-white);\n }\n\n .root--density-comfortable:last-of-type:not(.has-actions) {\n padding-right: 24px;\n }\n\n .root--density-comfortable:first-of-type:not(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell), :global(.stash-table-row__toggle-expansion-cell)) {\n padding-left: 24px;\n }\n }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;iBAoBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -4,6 +4,7 @@ import f from "./Icon.js";
4
4
  import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
5
5
  import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
6
6
  import "lodash-es/get";
7
+ import "./Illustration.vue_vue_type_script_setup_true_lang-664fa82f.js";
7
8
  import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
8
9
  import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
9
10
  import { T as N } from "./Table.keys-cf93df19.js";
@@ -81,8 +82,8 @@ const A = {
81
82
  "root--density-comfortable": "_root--density-comfortable_rrm9i_31"
82
83
  }, M = {
83
84
  $style: H
84
- }, Y = /* @__PURE__ */ S(B, [["__cssModules", M]]);
85
+ }, Z = /* @__PURE__ */ S(B, [["__cssModules", M]]);
85
86
  export {
86
- Y as default
87
+ Z as default
87
88
  };
88
89
  //# sourceMappingURL=TableHeaderCell.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TableHeaderCell.js","sources":["../src/components/TableHeaderCell/TableHeaderCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { computed, inject, useCssModule } from 'vue';\n\n import { DATA_VIEW_INJECTION, SortValueDeserialized } from '../DataView/DataView.vue';\n import Icon from '../Icon/Icon.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n\n export interface TableHeaderCellProps {\n /**\n * A unique value correlated to the data in this header's column (without a leading hyphen/dash).\n * For example: `'product_name'` (with no leading dash/hyphen).\n */\n sortId?: SortValueDeserialized['id'];\n }\n\n const props = withDefaults(defineProps<TableHeaderCellProps>(), {\n sortId: '',\n });\n const classes = useCssModule();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n if (!tableInjection) {\n throw new Error('TableHeaderCell must be used within a Table component');\n }\n\n const { density, hasActions } = tableInjection;\n\n // #region sorting\n const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n DATA_VIEW_INJECTION.key,\n DATA_VIEW_INJECTION.defaults,\n );\n const isSortable = computed(() => !!props.sortId);\n const isActiveSort = computed(() => currentSortId.value === props.sortId);\n\n function onRootClick() {\n if (isSortable.value && typeof updateCurrentSort === 'function') {\n updateCurrentSort(props.sortId, { shouldEmit: true });\n }\n }\n // #endregion sorting\n</script>\n\n<template>\n <th\n class=\"\n stash-table-header-cell\n tw-border-b tw-border-r tw-border-ice-200 tw-p-3 tw-text-xs tw-font-medium tw-text-ice-900\n \"\n :class=\"[\n classes.root,\n {\n 'tw-bg-white': !isActiveSort,\n 'stash-table-header-cell--sorted tw-bg-blue-100': isActiveSort,\n [classes['root--density-compact']]: density === 'compact',\n [classes['root--density-comfortable']]: density === 'comfortable',\n [classes['has-actions']]: hasActions,\n 'tw-cursor-pointer': isSortable,\n },\n ]\"\n data-test=\"stash-table-header-cell\"\n @click=\"onRootClick\"\n >\n <div class=\"tw-flex tw-justify-between\" :class=\"classes['content-wrapper']\">\n <!-- @slot default -->\n <slot></slot>\n <div v-if=\"isSortable\" class=\"tw-relative tw-h-4 tw-w-3\">\n <Icon\n v-if=\"!isActiveSort || currentSortOrder === 'asc'\"\n class=\"tw-absolute tw-text-ice-700\"\n :class=\"[classes.caret, classes['caret-up']]\"\n data-test=\"icon|caret-up\"\n name=\"caret-up\"\n size=\"dense\"\n />\n <Icon\n v-if=\"!isActiveSort || currentSortOrder === 'desc'\"\n class=\"tw-absolute tw-text-ice-700\"\n :class=\"[classes.caret, classes['caret-down']]\"\n data-test=\"icon|caret-down\"\n name=\"caret-down\"\n size=\"dense\"\n />\n </div>\n </div>\n </th>\n</template>\n\n<style module>\n .root {\n border-left: none;\n border-top: none;\n position: sticky;\n top: 0;\n z-index: 1;\n }\n\n .root:last-of-type {\n border-right: 0;\n }\n\n .has-actions:last-of-type .content-wrapper {\n justify-content: flex-end !important;\n }\n\n .caret-up {\n top: -5px;\n }\n\n .caret-down {\n top: 2px;\n }\n\n :global(.stash-table-header-cell--sorted) .caret {\n top: -2px; /* vertically center the caret icon */\n }\n\n @media screen('lg') {\n .root--density-comfortable:last-of-type {\n padding-right: 24px;\n }\n\n .root--density-comfortable:first-of-type:not(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell)) {\n padding-left: 24px;\n }\n }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","computed","props","isActiveSort","onRootClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBAkBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGnE,UAAA,EAAE,SAAAG,GAAS,YAAAC,EAAe,IAAAJ,GAG1B,EAAE,eAAAK,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAN;AAAA,MAC7DO,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAEhBC,IAAaC,EAAS,MAAM,CAAC,CAACC,EAAM,MAAM,GAC1CC,IAAeF,EAAS,MAAML,EAAc,UAAUM,EAAM,MAAM;AAExE,aAASE,IAAc;AACrB,MAAIJ,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBI,EAAM,QAAQ,EAAE,YAAY,GAAM,CAAA;AAAA,IAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TableHeaderCell.js","sources":["../src/components/TableHeaderCell/TableHeaderCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { computed, inject, useCssModule } from 'vue';\n\n import { DATA_VIEW_INJECTION, SortValueDeserialized } from '../DataView/DataView.vue';\n import Icon from '../Icon/Icon.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n\n export interface TableHeaderCellProps {\n /**\n * A unique value correlated to the data in this header's column (without a leading hyphen/dash).\n * For example: `'product_name'` (with no leading dash/hyphen).\n */\n sortId?: SortValueDeserialized['id'];\n }\n\n const props = withDefaults(defineProps<TableHeaderCellProps>(), {\n sortId: '',\n });\n const classes = useCssModule();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n if (!tableInjection) {\n throw new Error('TableHeaderCell must be used within a Table component');\n }\n\n const { density, hasActions } = tableInjection;\n\n // #region sorting\n const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n DATA_VIEW_INJECTION.key,\n DATA_VIEW_INJECTION.defaults,\n );\n const isSortable = computed(() => !!props.sortId);\n const isActiveSort = computed(() => currentSortId.value === props.sortId);\n\n function onRootClick() {\n if (isSortable.value && typeof updateCurrentSort === 'function') {\n updateCurrentSort(props.sortId, { shouldEmit: true });\n }\n }\n // #endregion sorting\n</script>\n\n<template>\n <th\n class=\"\n stash-table-header-cell\n tw-border-b tw-border-r tw-border-ice-200 tw-p-3 tw-text-xs tw-font-medium tw-text-ice-900\n \"\n :class=\"[\n classes.root,\n {\n 'tw-bg-white': !isActiveSort,\n 'stash-table-header-cell--sorted tw-bg-blue-100': isActiveSort,\n [classes['root--density-compact']]: density === 'compact',\n [classes['root--density-comfortable']]: density === 'comfortable',\n [classes['has-actions']]: hasActions,\n 'tw-cursor-pointer': isSortable,\n },\n ]\"\n data-test=\"stash-table-header-cell\"\n @click=\"onRootClick\"\n >\n <div class=\"tw-flex tw-justify-between\" :class=\"classes['content-wrapper']\">\n <!-- @slot default -->\n <slot></slot>\n <div v-if=\"isSortable\" class=\"tw-relative tw-h-4 tw-w-3\">\n <Icon\n v-if=\"!isActiveSort || currentSortOrder === 'asc'\"\n class=\"tw-absolute tw-text-ice-700\"\n :class=\"[classes.caret, classes['caret-up']]\"\n data-test=\"icon|caret-up\"\n name=\"caret-up\"\n size=\"dense\"\n />\n <Icon\n v-if=\"!isActiveSort || currentSortOrder === 'desc'\"\n class=\"tw-absolute tw-text-ice-700\"\n :class=\"[classes.caret, classes['caret-down']]\"\n data-test=\"icon|caret-down\"\n name=\"caret-down\"\n size=\"dense\"\n />\n </div>\n </div>\n </th>\n</template>\n\n<style module>\n .root {\n border-left: none;\n border-top: none;\n position: sticky;\n top: 0;\n z-index: 1;\n }\n\n .root:last-of-type {\n border-right: 0;\n }\n\n .has-actions:last-of-type .content-wrapper {\n justify-content: flex-end !important;\n }\n\n .caret-up {\n top: -5px;\n }\n\n .caret-down {\n top: 2px;\n }\n\n :global(.stash-table-header-cell--sorted) .caret {\n top: -2px; /* vertically center the caret icon */\n }\n\n @media screen('lg') {\n .root--density-comfortable:last-of-type {\n padding-right: 24px;\n }\n\n .root--density-comfortable:first-of-type:not(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell)) {\n padding-left: 24px;\n }\n }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","computed","props","isActiveSort","onRootClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGnE,UAAA,EAAE,SAAAG,GAAS,YAAAC,EAAe,IAAAJ,GAG1B,EAAE,eAAAK,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAN;AAAA,MAC7DO,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAEhBC,IAAaC,EAAS,MAAM,CAAC,CAACC,EAAM,MAAM,GAC1CC,IAAeF,EAAS,MAAML,EAAc,UAAUM,EAAM,MAAM;AAExE,aAASE,IAAc;AACrB,MAAIJ,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBI,EAAM,QAAQ,EAAE,YAAY,GAAM,CAAA;AAAA,IAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -6,6 +6,7 @@ import "lodash-es/uniqueId";
6
6
  import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
7
7
  import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
8
8
  import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
9
+ import "./Illustration.vue_vue_type_script_setup_true_lang-664fa82f.js";
9
10
  import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
10
11
  import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
11
12
  import { T as R } from "./Table.keys-cf93df19.js";
@@ -15,8 +16,8 @@ import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
15
16
  import "lodash-es/get";
16
17
  import "@leaflink/snitch";
17
18
  import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
18
- import "./Icon.js";
19
19
  import "./index-79ce320f.js";
20
+ import "./Icon.js";
20
21
  const B = {
21
22
  class: "stash-table-header-row",
22
23
  "data-test": "stash-table-header-row"
@@ -27,13 +28,13 @@ const B = {
27
28
  someRowsSelected: { type: Boolean, default: !1 }
28
29
  },
29
30
  emits: ["select"],
30
- setup(d, { emit: p }) {
31
- const l = d, a = _(R.key);
31
+ setup(p, { emit: d }) {
32
+ const l = p, a = _(R.key);
32
33
  if (!a)
33
34
  throw new Error("TableHeaderRow must be used within a Table component");
34
35
  const { hasCustomExpandToggle: w, isExpandable: h, isSelectable: u } = a, c = b(0);
35
36
  function n() {
36
- p("select"), c.value++;
37
+ d("select"), c.value++;
37
38
  }
38
39
  return (e, I) => (t(), k("tr", B, [
39
40
  o(u) ? (t(), s(m, {
@@ -66,8 +67,8 @@ const B = {
66
67
  "row-control-cell": "_row-control-cell_1eq6o_8"
67
68
  }, H = {
68
69
  $style: $
69
- }, W = /* @__PURE__ */ S(E, [["__cssModules", H]]);
70
+ }, X = /* @__PURE__ */ S(E, [["__cssModules", H]]);
70
71
  export {
71
- W as default
72
+ X as default
72
73
  };
73
74
  //# sourceMappingURL=TableHeaderRow.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, ref } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox from '../Checkbox/Checkbox.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n export interface TableHeaderRowProps {\n allRowsSelected?: boolean;\n someRowsSelected?: boolean;\n }\n\n const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n allRowsSelected: false,\n someRowsSelected: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'select'): void;\n }>();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableHeaderRow must be used within a Table component');\n }\n\n const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n const checkboxKey = ref(0);\n\n function onSelect() {\n emit('select');\n\n /**\n * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n */\n checkboxKey.value++;\n }\n</script>\n\n<template>\n <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n <TableHeaderCell\n v-if=\"isSelectable\"\n class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n :class=\"$style['row-control-cell']\"\n >\n <Checkbox\n :key=\"checkboxKey\"\n :class=\"$style['row-selection-checkbox']\"\n :checked=\"props.allRowsSelected\"\n :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n :title=\"t('ll.selectAll')\"\n @update:indeterminate=\"onSelect\"\n @update:checked=\"onSelect\"\n />\n </TableHeaderCell>\n <TableHeaderCell\n v-if=\"isExpandable && !hasCustomExpandToggle\"\n :class=\"$style['row-control-cell']\"\n data-test=\"table-row-header-expansion-cell\"\n />\n <!-- @slot default -->\n <slot></slot>\n </tr>\n</template>\n\n<style module>\n .row-selection-checkbox label {\n padding: 0;\n min-height: theme('spacing.6');\n vertical-align: middle;\n }\n\n .row-control-cell {\n border-right: 0;\n }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","checkboxKey","ref","onSelect","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExDM,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODH,EAAA;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, ref } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox from '../Checkbox/Checkbox.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n export interface TableHeaderRowProps {\n allRowsSelected?: boolean;\n someRowsSelected?: boolean;\n }\n\n const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n allRowsSelected: false,\n someRowsSelected: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'select'): void;\n }>();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableHeaderRow must be used within a Table component');\n }\n\n const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n const checkboxKey = ref(0);\n\n function onSelect() {\n emit('select');\n\n /**\n * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n */\n checkboxKey.value++;\n }\n</script>\n\n<template>\n <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n <TableHeaderCell\n v-if=\"isSelectable\"\n class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n :class=\"$style['row-control-cell']\"\n >\n <Checkbox\n :key=\"checkboxKey\"\n :class=\"$style['row-selection-checkbox']\"\n :checked=\"props.allRowsSelected\"\n :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n :title=\"t('ll.selectAll')\"\n @update:indeterminate=\"onSelect\"\n @update:checked=\"onSelect\"\n />\n </TableHeaderCell>\n <TableHeaderCell\n v-if=\"isExpandable && !hasCustomExpandToggle\"\n :class=\"$style['row-control-cell']\"\n data-test=\"table-row-header-expansion-cell\"\n />\n <!-- @slot default -->\n <slot></slot>\n </tr>\n</template>\n\n<style module>\n .row-selection-checkbox label {\n padding: 0;\n min-height: theme('spacing.6');\n vertical-align: middle;\n }\n\n .row-control-cell {\n border-right: 0;\n }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","checkboxKey","ref","onSelect","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExDM,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODH,EAAA;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/TableRow.js CHANGED
@@ -8,6 +8,7 @@ import "lodash-es/cloneDeep";
8
8
  import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
9
9
  import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
10
10
  import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
11
+ import "./Illustration.vue_vue_type_script_setup_true_lang-664fa82f.js";
11
12
  import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
12
13
  import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
13
14
  import T from "./TableCell.js";
@@ -126,8 +127,8 @@ const Q = /* @__PURE__ */ A({
126
127
  }
127
128
  }), W = {
128
129
  $style: H
129
- }, Ee = /* @__PURE__ */ K(Q, [["__cssModules", W]]);
130
+ }, ve = /* @__PURE__ */ K(Q, [["__cssModules", W]]);
130
131
  export {
131
- Ee as default
132
+ ve as default
132
133
  };
133
134
  //# sourceMappingURL=TableRow.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n import Expand from '../Expand/Expand.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableCell from '../TableCell/TableCell.vue';\n\n defineOptions({ inheritAttrs: false });\n\n export interface TableRowProps {\n hideExpansionDivider?: boolean;\n isExpanded?: boolean;\n isSelected?: boolean;\n isSelectDisabled?: boolean;\n }\n\n const props = withDefaults(defineProps<TableRowProps>(), {\n /**\n * If true, hides the divider between the parent row and expansion row\n */\n hideExpansionDivider: false,\n isExpanded: false,\n isSelected: false,\n isSelectDisabled: false,\n });\n\n const emit =\n defineEmits<{\n 'update:isSelected': [isChecked: CheckboxProps['checked']];\n 'update:isExpanded': [isExpanded: boolean];\n }>();\n\n const attrs = useAttrs();\n const classes = useCssModule();\n const slots = useSlots();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableRow must be used within a Table component');\n }\n\n const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n const isRowExpanded = ref(props.isExpanded);\n const isRowExpandable = computed(() => isExpandable && !!slots.expansion);\n\n const childCellCount = computed(() => {\n let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n if (isSelectable.value) {\n count += 1;\n }\n\n if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n count += 1;\n }\n\n return count;\n });\n const rowId = uniqueId('table-row-');\n\n function toggleExpand(value?: boolean) {\n if (!isRowExpandable.value) {\n throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n }\n\n const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n isRowExpanded.value = isExpanded;\n emit('update:isExpanded', isExpanded);\n }\n\n watch(\n () => props.isExpanded,\n () => toggleExpand(props.isExpanded),\n );\n</script>\n\n<template>\n <tr\n class=\"stash-table-row\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['is-expandable']]: isRowExpandable,\n [classes['is-expanded']]: isRowExpanded,\n [classes['root--hidden-divider']]: hideExpansionDivider,\n 'tw-p-gutter': layout === 'stack',\n 'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n 'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n },\n ]\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <TableCell\n v-if=\"isSelectable\"\n is-control\n class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n :class=\"classes['row-control-cell']\"\n data-test=\"stash-table-row|selection-cell\"\n >\n <Checkbox\n :class=\"classes['row-selection-checkbox']\"\n :checked=\"props.isSelected\"\n :disabled=\"props.isSelectDisabled\"\n :title=\"t('ll.select.self')\"\n @update:checked=\"emit('update:isSelected', $event)\"\n />\n </TableCell>\n <TableCell\n v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n data-test=\"stash-table-row|custom-expansion-cell\"\n is-control\n :class=\"classes['row-control-cell']\"\n >\n <ChevronToggle\n :aria-controls=\"rowId\"\n :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n :direction=\"isRowExpanded ? 'up' : 'down'\"\n :is-expanded=\"isRowExpanded\"\n @click=\"toggleExpand\"\n />\n </TableCell>\n <!-- @slot default -->\n <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n </tr>\n <tr\n v-if=\"isRowExpandable\"\n class=\"stash-table-row stash-table-row--expandable\"\n :class=\"classes['row-expansion']\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <Expand\n is=\"td\"\n :id=\"rowId\"\n class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n data-test=\"stash-table-row|expansion-cell\"\n :class=\"classes['row-expansion-content']\"\n :colspan=\"childCellCount\"\n :is-expanded=\"isRowExpanded\"\n >\n <!-- @slot expansion, for expandable content -->\n <slot name=\"expansion\"></slot>\n </Expand>\n </tr>\n</template>\n\n<style module>\n .root {\n border: 0;\n }\n\n /**\n * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n */\n .is-expandable > td {\n border-bottom-color: var(--color-ice-200);\n transition: border-bottom-color 0.5s;\n }\n\n .root--hidden-divider.is-expanded > td {\n transition: border-bottom-color 0s;\n /**\n * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n */\n border-bottom-color: transparent;\n }\n\n .layout--scroll {\n border-radius: 0;\n box-shadow: none !important;\n margin: 0;\n }\n\n .layout--scroll:last-of-type {\n border: 0;\n }\n\n .layout--scroll:last-of-type td {\n border-bottom: none;\n }\n\n .layout--stack {\n align-items: stretch;\n background-color: var(--color-white);\n column-gap: var(--grid-gutter);\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n position: relative;\n row-gap: var(--grid-gutter);\n }\n\n .layout--stack:not(.is-expanded) {\n border-radius: theme('borderRadius.DEFAULT');\n transition: border-radius 0.5s;\n }\n\n .layout--stack.is-expanded {\n border-top-left-radius: theme('borderRadius.DEFAULT');\n border-top-right-radius: theme('borderRadius.DEFAULT');\n }\n\n .row-selection-checkbox label {\n padding: 0;\n min-height: theme('spacing.6');\n vertical-align: middle;\n }\n\n .layout--stack .row-control-cell {\n display: flex;\n align-items: center;\n min-width: 0;\n }\n\n /* On mobile, display controls on their own row, pushing other cells below */\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: 1;\n }\n\n .row-expansion-content {\n box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n }\n\n .layout--stack + .row-expansion,\n .layout--stack + .row-expansion > .row-expansion-content {\n display: block;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: 1px solid var(--color-ice-200);\n border-bottom-left-radius: theme('borderRadius.DEFAULT');\n border-bottom-right-radius: theme('borderRadius.DEFAULT');\n margin-bottom: theme('spacing.6');\n }\n\n .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n border-top: none;\n }\n\n /* On large screens, match the styles for layout-SCROLL */\n @media screen('lg') {\n .layout--stack {\n align-items: unset;\n background-color: unset;\n border: 0;\n border-bottom: 1px solid var(--color-ice-200);\n border-radius: 0;\n box-shadow: none;\n column-gap: unset;\n display: table-row;\n grid-template-columns: unset;\n row-gap: unset;\n }\n\n .layout--stack:last-of-type {\n border-bottom: 0;\n }\n\n .layout--stack .row-control-cell {\n display: table-cell;\n }\n\n .layout--stack + .row-expansion {\n display: table-row;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: unset;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n display: table-cell;\n margin-bottom: unset;\n }\n\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: unset;\n }\n }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,KAAgB,CAAC,CAACP,EAAM,SAAS,GAElEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n import Expand from '../Expand/Expand.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableCell from '../TableCell/TableCell.vue';\n\n defineOptions({ inheritAttrs: false });\n\n export interface TableRowProps {\n hideExpansionDivider?: boolean;\n isExpanded?: boolean;\n isSelected?: boolean;\n isSelectDisabled?: boolean;\n }\n\n const props = withDefaults(defineProps<TableRowProps>(), {\n /**\n * If true, hides the divider between the parent row and expansion row\n */\n hideExpansionDivider: false,\n isExpanded: false,\n isSelected: false,\n isSelectDisabled: false,\n });\n\n const emit =\n defineEmits<{\n 'update:isSelected': [isChecked: CheckboxProps['checked']];\n 'update:isExpanded': [isExpanded: boolean];\n }>();\n\n const attrs = useAttrs();\n const classes = useCssModule();\n const slots = useSlots();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableRow must be used within a Table component');\n }\n\n const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n const isRowExpanded = ref(props.isExpanded);\n const isRowExpandable = computed(() => isExpandable && !!slots.expansion);\n\n const childCellCount = computed(() => {\n let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n if (isSelectable.value) {\n count += 1;\n }\n\n if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n count += 1;\n }\n\n return count;\n });\n const rowId = uniqueId('table-row-');\n\n function toggleExpand(value?: boolean) {\n if (!isRowExpandable.value) {\n throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n }\n\n const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n isRowExpanded.value = isExpanded;\n emit('update:isExpanded', isExpanded);\n }\n\n watch(\n () => props.isExpanded,\n () => toggleExpand(props.isExpanded),\n );\n</script>\n\n<template>\n <tr\n class=\"stash-table-row\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['is-expandable']]: isRowExpandable,\n [classes['is-expanded']]: isRowExpanded,\n [classes['root--hidden-divider']]: hideExpansionDivider,\n 'tw-p-gutter': layout === 'stack',\n 'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n 'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n },\n ]\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <TableCell\n v-if=\"isSelectable\"\n is-control\n class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n :class=\"classes['row-control-cell']\"\n data-test=\"stash-table-row|selection-cell\"\n >\n <Checkbox\n :class=\"classes['row-selection-checkbox']\"\n :checked=\"props.isSelected\"\n :disabled=\"props.isSelectDisabled\"\n :title=\"t('ll.select.self')\"\n @update:checked=\"emit('update:isSelected', $event)\"\n />\n </TableCell>\n <TableCell\n v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n data-test=\"stash-table-row|custom-expansion-cell\"\n is-control\n :class=\"classes['row-control-cell']\"\n >\n <ChevronToggle\n :aria-controls=\"rowId\"\n :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n :direction=\"isRowExpanded ? 'up' : 'down'\"\n :is-expanded=\"isRowExpanded\"\n @click=\"toggleExpand\"\n />\n </TableCell>\n <!-- @slot default -->\n <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n </tr>\n <tr\n v-if=\"isRowExpandable\"\n class=\"stash-table-row stash-table-row--expandable\"\n :class=\"classes['row-expansion']\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <Expand\n is=\"td\"\n :id=\"rowId\"\n class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n data-test=\"stash-table-row|expansion-cell\"\n :class=\"classes['row-expansion-content']\"\n :colspan=\"childCellCount\"\n :is-expanded=\"isRowExpanded\"\n >\n <!-- @slot expansion, for expandable content -->\n <slot name=\"expansion\"></slot>\n </Expand>\n </tr>\n</template>\n\n<style module>\n .root {\n border: 0;\n }\n\n /**\n * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n */\n .is-expandable > td {\n border-bottom-color: var(--color-ice-200);\n transition: border-bottom-color 0.5s;\n }\n\n .root--hidden-divider.is-expanded > td {\n transition: border-bottom-color 0s;\n /**\n * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n */\n border-bottom-color: transparent;\n }\n\n .layout--scroll {\n border-radius: 0;\n box-shadow: none !important;\n margin: 0;\n }\n\n .layout--scroll:last-of-type {\n border: 0;\n }\n\n .layout--scroll:last-of-type td {\n border-bottom: none;\n }\n\n .layout--stack {\n align-items: stretch;\n background-color: var(--color-white);\n column-gap: var(--grid-gutter);\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n position: relative;\n row-gap: var(--grid-gutter);\n }\n\n .layout--stack:not(.is-expanded) {\n border-radius: theme('borderRadius.DEFAULT');\n transition: border-radius 0.5s;\n }\n\n .layout--stack.is-expanded {\n border-top-left-radius: theme('borderRadius.DEFAULT');\n border-top-right-radius: theme('borderRadius.DEFAULT');\n }\n\n .row-selection-checkbox label {\n padding: 0;\n min-height: theme('spacing.6');\n vertical-align: middle;\n }\n\n .layout--stack .row-control-cell {\n display: flex;\n align-items: center;\n min-width: 0;\n }\n\n /* On mobile, display controls on their own row, pushing other cells below */\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: 1;\n }\n\n .row-expansion-content {\n box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n }\n\n .layout--stack + .row-expansion,\n .layout--stack + .row-expansion > .row-expansion-content {\n display: block;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: 1px solid var(--color-ice-200);\n border-bottom-left-radius: theme('borderRadius.DEFAULT');\n border-bottom-right-radius: theme('borderRadius.DEFAULT');\n margin-bottom: theme('spacing.6');\n }\n\n .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n border-top: none;\n }\n\n /* On large screens, match the styles for layout-SCROLL */\n @media screen('lg') {\n .layout--stack {\n align-items: unset;\n background-color: unset;\n border: 0;\n border-bottom: 1px solid var(--color-ice-200);\n border-radius: 0;\n box-shadow: none;\n column-gap: unset;\n display: table-row;\n grid-template-columns: unset;\n row-gap: unset;\n }\n\n .layout--stack:last-of-type {\n border-bottom: 0;\n }\n\n .layout--stack .row-control-cell {\n display: table-cell;\n }\n\n .layout--stack + .row-expansion {\n display: table-row;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: unset;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n display: table-cell;\n margin-bottom: unset;\n }\n\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: unset;\n }\n }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,KAAgB,CAAC,CAACP,EAAM,SAAS,GAElEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leaflink/stash",
3
- "version": "46.2.0",
3
+ "version": "46.4.0",
4
4
  "description": "LeafLink's design system.",
5
5
  "homepage": "https://stash.leaflink.com",
6
6
  "main": "./dist/index.ts",
@@ -1,56 +0,0 @@
1
- import { defineComponent as u, inject as d, computed as t, openBlock as h, createBlock as g, unref as y, normalizeClass as k } from "vue";
2
- import f from "lodash-es/uniqueId";
3
- import { I as v } from "./index-79ce320f.js";
4
- var c = /* @__PURE__ */ ((i) => (i.Approved = "approved", i.Avatar = "avatar", i.Barcode = "barcode", i.Calendar = "calendar", i.Cartridge = "cartridge", i.Celebrate = "celebrate", i.ChatBubble = "chat-bubble", i.CheckBox = "check-box", i.CheckCircle = "check-circle", i.Click = "click", i.Cocktail = "cocktail", i.Confirmation = "confirmation", i.Connnect = "connnect", i.Cookie = "cookie", i.CreditCard = "credit-card", i.Crm = "crm", i.Cultivation = "cultivation", i.Data = "data", i.DeliveryCompleted = "delivery-completed", i.Delivery = "delivery", i.DigitalPayments = "digital-payments", i.Discover = "discover", i.Diversity = "diversity", i.Drink = "drink", i.Dolly = "dolly", i.EasyReconciliations = "easy-reconciliations", i.Efficiency = "efficiency", i.Error = "error", i.FinancialGrowth = "financial-growth", i.FinancialInstitution = "financial-institution", i.Focus = "focus", i.FulfillmentIssues = "fulfillment-issues", i.Growth = "growth", i.Handshake = "handshake", i.Hierarchy = "hierarchy", i.Home = "home", i.Laptop = "laptop", i.Licenses = "licenses", i.LightBulb = "light-bulb", i.LightbulbError = "lightbulb-error", i.LineChart = "line-chart", i.Link = "link", i.LocationPin = "location-pin", i.Lock = "lock", i.Messaging = "messaging", i.Microchip = "microchip", i.MissingData = "missing-data", i.MoneyTransfer = "money-transfer", i.Money = "money", i.NoInventoryAccess = "no-inventory-access", i.NoInventory = "no-inventory", i.NoPromote = "no-promote", i.PackageReceived = "package-received", i.Package = "package", i.PaymentProcessing = "payment-processing", i.Phone = "phone", i.PieChart = "pie-chart", i.ProductCycle = "product-cycle", i.Puzzle = "puzzle", i.Receipt = "receipt", i.Retail = "retail", i.SearchingDocument = "searching-document", i.ShoppingBasket = "shopping-basket", i.Shopping = "shopping", i.Sign = "sign", i.Smile = "smile", i.Speed = "speed", i.Time = "time", i.Tools = "tools", i.Truck = "truck", i.User = "user", i.Warehouse = "warehouse", i.Warning = "warning", i.XCircle = "x-circle", i))(c || {});
5
- const C = Object.values(c);
6
- var l = /* @__PURE__ */ ((i) => (i.Bank = "bank", i.SearchStorefront = "search-storefront", i.Todo = "todo", i.Warehouse = "warehouse", i))(l || {});
7
- const b = Object.values(l);
8
- var r = /* @__PURE__ */ ((i) => (i.Spot = "spot", i.Vignette = "vignette", i.Scene = "scene", i))(r || {});
9
- const B = /* @__PURE__ */ u({
10
- __name: "Illustration",
11
- props: {
12
- id: { default: f("ll-illustration-") },
13
- name: {},
14
- title: { default: "" },
15
- size: { default: 48 },
16
- type: { default: r.Spot },
17
- fillColor: { default: "blue" },
18
- strokeColor: { default: "purple-500" },
19
- staticPath: { default: "" }
20
- },
21
- setup(i) {
22
- const e = i;
23
- if (e.type === r.Scene)
24
- throw new Error(
25
- "Scene illustration types are not supported. Illustrations will need to be uploaded under ./assets/illustrations/scene. Illustrations to be provided by design."
26
- );
27
- if (e.type === r.Spot && !C.includes(e.name) || e.type === r.Vignette && !b.includes(e.name))
28
- throw new Error(
29
- `${e.type} illustration name ${e.name} not found. Did you check that you are using the correct type for your illustration?`
30
- );
31
- const n = d("stashOptions", {
32
- staticPath: "/static"
33
- }), s = t(() => e.type === r.Spot), o = t(() => s.value ? "0" : !1), a = t(() => e.staticPath || (n == null ? void 0 : n.staticPath));
34
- return (w, P) => (h(), g(y(v), {
35
- id: e.id,
36
- class: k(["tw-inline-block tw-align-middle", {
37
- [`tw-text-${e.fillColor}-400 tw-stroke-${e.strokeColor}`]: s.value
38
- }]),
39
- title: e.title,
40
- height: e.size,
41
- width: e.size,
42
- "stroke-width": o.value,
43
- fill: "none",
44
- src: `${a.value}/illustrations/${e.type}/${e.name}.svg`
45
- }, null, 8, ["id", "class", "title", "height", "width", "stroke-width", "src"]));
46
- }
47
- });
48
- export {
49
- r as I,
50
- c as S,
51
- l as V,
52
- B as _,
53
- C as s,
54
- b as v
55
- };
56
- //# sourceMappingURL=Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js","sources":["../src/components/Illustration/Illustration.models.ts","../src/components/Illustration/Illustration.vue"],"sourcesContent":["/**\n * Enum to strongly map between a friendly name and file name of the illustration\n */\nexport enum SpotName {\n Approved = 'approved',\n Avatar = 'avatar',\n Barcode = 'barcode',\n Calendar = 'calendar',\n Cartridge = 'cartridge',\n Celebrate = 'celebrate',\n ChatBubble = 'chat-bubble',\n CheckBox = 'check-box',\n CheckCircle = 'check-circle',\n Click = 'click',\n Cocktail = 'cocktail',\n Confirmation = 'confirmation',\n Connnect = 'connnect',\n Cookie = 'cookie',\n CreditCard = 'credit-card',\n Crm = 'crm',\n Cultivation = 'cultivation',\n Data = 'data',\n DeliveryCompleted = 'delivery-completed',\n Delivery = 'delivery',\n DigitalPayments = 'digital-payments',\n Discover = 'discover',\n Diversity = 'diversity',\n Drink = 'drink',\n Dolly = 'dolly',\n EasyReconciliations = 'easy-reconciliations',\n Efficiency = 'efficiency',\n Error = 'error',\n FinancialGrowth = 'financial-growth',\n FinancialInstitution = 'financial-institution',\n Focus = 'focus',\n FulfillmentIssues = 'fulfillment-issues',\n Growth = 'growth',\n Handshake = 'handshake',\n Hierarchy = 'hierarchy',\n Home = 'home',\n Laptop = 'laptop',\n Licenses = 'licenses',\n LightBulb = 'light-bulb',\n LightbulbError = 'lightbulb-error',\n LineChart = 'line-chart',\n Link = 'link',\n LocationPin = 'location-pin',\n Lock = 'lock',\n Messaging = 'messaging',\n Microchip = 'microchip',\n MissingData = 'missing-data',\n MoneyTransfer = 'money-transfer',\n Money = 'money',\n NoInventoryAccess = 'no-inventory-access',\n NoInventory = 'no-inventory',\n NoPromote = 'no-promote',\n PackageReceived = 'package-received',\n Package = 'package',\n PaymentProcessing = 'payment-processing',\n Phone = 'phone',\n PieChart = 'pie-chart',\n ProductCycle = 'product-cycle',\n Puzzle = 'puzzle',\n Receipt = 'receipt',\n Retail = 'retail',\n SearchingDocument = 'searching-document',\n ShoppingBasket = 'shopping-basket',\n Shopping = 'shopping',\n Sign = 'sign',\n Smile = 'smile',\n Speed = 'speed',\n Time = 'time',\n Tools = 'tools',\n Truck = 'truck',\n User = 'user',\n Warehouse = 'warehouse',\n Warning = 'warning',\n XCircle = 'x-circle',\n}\n\nexport type SpotNames = `${SpotName}`;\n\n/**\n * String array of all illustration names\n */\nexport const spotNames = Object.values(SpotName);\n\nexport enum VignetteName {\n Bank = 'bank',\n SearchStorefront = 'search-storefront',\n Todo = 'todo',\n Warehouse = 'warehouse',\n}\n\nexport type VignetteNames = `${VignetteName}`;\n\n/**\n * String array of all vignette names\n */\nexport const vignetteNames = Object.values(VignetteName);\n\n/**\n * Types of illustrations that map to the subfolder under ./assets/illustrations/<type>\n */\nexport enum IllustrationType {\n Spot = 'spot',\n Vignette = 'vignette',\n // Scene is not implemented, but adding it for future work mentioned in STASH-61.\n Scene = 'scene',\n}\n\nexport type IllustrationTypes = `${IllustrationType}`;\n","<script lang=\"ts\">\n export * from './Illustration.models';\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject } from 'vue';\n import InlineSvg from 'vue-inline-svg';\n\n import { StashPrimaryColor, StashPrimaryColorGroup } from '../../../types/colors';\n import { StashProvideState } from '../../../types/misc';\n import {\n IllustrationType,\n IllustrationTypes,\n SpotName,\n SpotNames,\n spotNames,\n VignetteName,\n VignetteNames,\n vignetteNames,\n } from './Illustration.models';\n\n export interface IllustrationProps {\n id?: string;\n\n /**\n * The filename of the icon that should be displayed\n */\n name: SpotNames | VignetteNames;\n\n /**\n * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n * browsers usually display it as a tooltip and screen readers use this.\n */\n title?: string;\n\n /**\n * The size in pixels of the illustration. This number will be used for width and height\n */\n size?: number;\n\n /**\n * Type of the illustration\n */\n type?: IllustrationTypes;\n\n /**\n * The fill color for the illustration. This component will use the 400 shade of the color\n * per design's request. Defaults to teal.\n */\n fillColor?: StashPrimaryColorGroup;\n\n /**\n * The color theme for the illustration. This component will use the standard 500 shade of the color.\n * Defaults to purple\n */\n strokeColor?: StashPrimaryColor;\n\n /**\n * Illustration's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n */\n staticPath?: string;\n }\n\n const props = withDefaults(defineProps<IllustrationProps>(), {\n id: uniqueId('ll-illustration-'),\n title: '',\n size: 48,\n type: IllustrationType.Spot,\n fillColor: 'blue',\n strokeColor: 'purple-500',\n staticPath: '',\n });\n\n if (props.type === IllustrationType.Scene) {\n throw new Error(\n 'Scene illustration types are not supported. Illustrations will need to be uploaded under ./assets/illustrations/scene. Illustrations to be provided by design.',\n );\n }\n\n if (\n (props.type === IllustrationType.Spot && !spotNames.includes(props.name as SpotName)) ||\n (props.type === IllustrationType.Vignette && !vignetteNames.includes(props.name as VignetteName))\n ) {\n throw new Error(\n `${props.type} illustration name ${props.name} not found. Did you check that you are using the correct type for your illustration?`,\n );\n }\n\n const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n staticPath: '/static',\n });\n\n const isSpotIllustration = computed(() => props.type === IllustrationType.Spot);\n\n /**\n * Browsers won't add the `stroke-width` attribute if it is set to false.\n * However, setting it to specific number value affects vignettes\n */\n const strokeWidth = computed<boolean | string>(() => {\n return isSpotIllustration.value ? '0' : false;\n });\n\n const computedStaticPath = computed(() => {\n return props.staticPath || stashOptions?.staticPath;\n });\n</script>\n\n<template>\n <!-- InlineSvg package (https://github.com/shrpne/vue-inline-svg) swaps external svgs and puts\n them inline so we can style them with CSS -->\n <!-- Having to override fill to be none and stroke to be zero so the exported svgs from Figma\n that do not have those attributes specified do not get a default one applied -->\n <InlineSvg\n :id=\"props.id\"\n class=\"tw-inline-block tw-align-middle\"\n :class=\"{\n [`tw-text-${props.fillColor}-400 tw-stroke-${props.strokeColor}`]: isSpotIllustration,\n }\"\n :title=\"props.title\"\n :height=\"props.size\"\n :width=\"props.size\"\n :stroke-width=\"strokeWidth\"\n fill=\"none\"\n :src=\"`${computedStaticPath}/illustrations/${props.type}/${props.name}.svg`\"\n />\n</template>\n"],"names":["SpotName","spotNames","VignetteName","vignetteNames","IllustrationType","props","stashOptions","inject","isSpotIllustration","computed","strokeWidth","computedStaticPath"],"mappings":";;;AAGY,IAAAA,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,aAAa,eACbA,EAAA,WAAW,aACXA,EAAA,cAAc,gBACdA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,eAAe,gBACfA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,aAAa,eACbA,EAAA,MAAM,OACNA,EAAA,cAAc,eACdA,EAAA,OAAO,QACPA,EAAA,oBAAoB,sBACpBA,EAAA,WAAW,YACXA,EAAA,kBAAkB,oBAClBA,EAAA,WAAW,YACXA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,sBAAsB,wBACtBA,EAAA,aAAa,cACbA,EAAA,QAAQ,SACRA,EAAA,kBAAkB,oBAClBA,EAAA,uBAAuB,yBACvBA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,YAAY,cACZA,EAAA,iBAAiB,mBACjBA,EAAA,YAAY,cACZA,EAAA,OAAO,QACPA,EAAA,cAAc,gBACdA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,cAAc,gBACdA,EAAA,gBAAgB,kBAChBA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,uBACpBA,EAAA,cAAc,gBACdA,EAAA,YAAY,cACZA,EAAA,kBAAkB,oBAClBA,EAAA,UAAU,WACVA,EAAA,oBAAoB,sBACpBA,EAAA,QAAQ,SACRA,EAAA,WAAW,aACXA,EAAA,eAAe,iBACfA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,oBAAoB,sBACpBA,EAAA,iBAAiB,mBACjBA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,UAAU,YA1EAA,IAAAA,KAAA,CAAA,CAAA;AAkFC,MAAAC,IAAY,OAAO,OAAOD,CAAQ;AAEnC,IAAAE,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,mBAAmB,qBACnBA,EAAA,OAAO,QACPA,EAAA,YAAY,aAJFA,IAAAA,KAAA,CAAA,CAAA;AAYC,MAAAC,IAAgB,OAAO,OAAOD,CAAY;AAK3C,IAAAE,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YAEXA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;AC9BN,QAAAC,EAAM,SAASD,EAAiB;AAClC,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,QACGC,EAAM,SAASD,EAAiB,QAAQ,CAACH,EAAU,SAASI,EAAM,IAAgB,KAClFA,EAAM,SAASD,EAAiB,YAAY,CAACD,EAAc,SAASE,EAAM,IAAoB;AAE/F,YAAM,IAAI;AAAA,QACR,GAAGA,EAAM,IAAI,sBAAsBA,EAAM,IAAI;AAAA,MAAA;AAI3C,UAAAC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAqBC,EAAS,MAAMJ,EAAM,SAASD,EAAiB,IAAI,GAMxEM,IAAcD,EAA2B,MACtCD,EAAmB,QAAQ,MAAM,EACzC,GAEKG,IAAqBF,EAAS,MAC3BJ,EAAM,eAAcC,KAAA,gBAAAA,EAAc,WAC1C;;;;;;;;;;;;;;;"}