@leaflink/stash 44.0.0-beta.1 → 44.0.0-beta.3

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 (166) hide show
  1. package/dist/ActionsDropdown.js +9 -9
  2. package/dist/ActionsDropdown.js.map +1 -1
  3. package/dist/AddressSelect.js +12 -11
  4. package/dist/AddressSelect.js.map +1 -1
  5. package/dist/Alert.js +2 -2
  6. package/dist/Alert.js.map +1 -1
  7. package/dist/AppNavigationItem.js +15 -15
  8. package/dist/AppNavigationItem.js.map +1 -1
  9. package/dist/AppSidebar.js +17 -17
  10. package/dist/AppSidebar.js.map +1 -1
  11. package/dist/AppTopbar.js +12 -12
  12. package/dist/Avatar.js +12 -12
  13. package/dist/Avatar.js.map +1 -1
  14. package/dist/Backdrop.js +1 -1
  15. package/dist/Backdrop.js.map +1 -1
  16. package/dist/Badge.js +12 -12
  17. package/dist/Badge.js.map +1 -1
  18. package/dist/Button.js +1 -1
  19. package/dist/Button.js.map +1 -1
  20. package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js +17 -0
  21. package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js.map +1 -0
  22. package/dist/ButtonGroup.js +26 -26
  23. package/dist/ButtonGroup.js.map +1 -1
  24. package/dist/Card.js +3 -3
  25. package/dist/Card.js.map +1 -1
  26. package/dist/CardHeader.js +3 -3
  27. package/dist/CardMedia.js +1 -1
  28. package/dist/CardMedia.js.map +1 -1
  29. package/dist/Carousel.js +24 -24
  30. package/dist/Carousel.js.map +1 -1
  31. package/dist/Checkbox.js +27 -26
  32. package/dist/Checkbox.js.map +1 -1
  33. package/dist/{Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js → Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js} +1 -1
  34. package/dist/Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js.map +1 -0
  35. package/dist/ChevronToggle.js +1 -1
  36. package/dist/Chip.js +1 -1
  37. package/dist/Chip.js.map +1 -1
  38. package/dist/ConfirmationCodeInput.js +21 -21
  39. package/dist/ConfirmationCodeInput.js.map +1 -1
  40. package/dist/ContextSwitcher.js +6 -5
  41. package/dist/ContextSwitcher.js.map +1 -1
  42. package/dist/Copy.js +1 -1
  43. package/dist/CurrencyInput.js +2 -2
  44. package/dist/DataView.js +1 -1
  45. package/dist/DataViewFilters.js +7 -7
  46. package/dist/DataViewFilters.js.map +1 -1
  47. package/dist/DataViewSortButton.js +5 -5
  48. package/dist/DataViewSortButton.js.map +1 -1
  49. package/dist/DataViewToolbar.js +4 -4
  50. package/dist/DataViewToolbar.js.map +1 -1
  51. package/dist/DatePicker.js +8 -8
  52. package/dist/DatePicker.js.map +1 -1
  53. package/dist/DescriptionListTerm.js +1 -1
  54. package/dist/DescriptionListTerm.js.map +1 -1
  55. package/dist/Dialog.js +34 -34
  56. package/dist/Dialog.js.map +1 -1
  57. package/dist/Dropdown.js +3 -3
  58. package/dist/Dropdown.js.map +1 -1
  59. package/dist/EmptyState.js +1 -1
  60. package/dist/EmptyState.js.map +1 -1
  61. package/dist/Field.js +2 -2
  62. package/dist/{Field.vue_vue_type_script_setup_true_lang-475832fe.js → Field.vue_vue_type_script_setup_true_lang-42cf79d4.js} +5 -5
  63. package/dist/{Field.vue_vue_type_script_setup_true_lang-475832fe.js.map → Field.vue_vue_type_script_setup_true_lang-42cf79d4.js.map} +1 -1
  64. package/dist/FileUpload.js +25 -25
  65. package/dist/FileUpload.js.map +1 -1
  66. package/dist/FilterChip.js +32 -32
  67. package/dist/FilterChip.js.map +1 -1
  68. package/dist/FilterDrawerItem.js +4 -4
  69. package/dist/FilterDrawerItem.js.map +1 -1
  70. package/dist/FilterDropdown.js +19 -19
  71. package/dist/FilterDropdown.js.map +1 -1
  72. package/dist/FilterSelect.js +2 -2
  73. package/dist/Filters.js +7 -6
  74. package/dist/Filters.js.map +1 -1
  75. package/dist/HttpError.js +30 -30
  76. package/dist/HttpError.js.map +1 -1
  77. package/dist/IconLabel.js +1 -1
  78. package/dist/IconLabel.js.map +1 -1
  79. package/dist/InlineEdit.js +3 -3
  80. package/dist/InlineEdit.js.map +1 -1
  81. package/dist/Input.js +37 -37
  82. package/dist/Input.js.map +1 -1
  83. package/dist/InputOptions.js +37 -36
  84. package/dist/InputOptions.js.map +1 -1
  85. package/dist/Label.js +1 -1
  86. package/dist/{Label.vue_vue_type_script_setup_true_lang-1d29d98a.js → Label.vue_vue_type_script_setup_true_lang-c5589919.js} +2 -2
  87. package/dist/{Label.vue_vue_type_script_setup_true_lang-1d29d98a.js.map → Label.vue_vue_type_script_setup_true_lang-c5589919.js.map} +1 -1
  88. package/dist/ListItem.js +6 -5
  89. package/dist/ListItem.js.map +1 -1
  90. package/dist/ListView.js +55 -54
  91. package/dist/ListView.js.map +1 -1
  92. package/dist/Menu.js +1 -1
  93. package/dist/Menu.js.map +1 -1
  94. package/dist/Metric.js +4 -4
  95. package/dist/Metric.js.map +1 -1
  96. package/dist/Modal.js +21 -21
  97. package/dist/Modal.js.map +1 -1
  98. package/dist/Module.js +2 -2
  99. package/dist/Module.js.map +1 -1
  100. package/dist/ModuleContent.js +2 -2
  101. package/dist/ModuleContent.js.map +1 -1
  102. package/dist/ModuleFooter.js +11 -11
  103. package/dist/ModuleFooter.js.map +1 -1
  104. package/dist/ModuleHeader.js +6 -6
  105. package/dist/ModuleHeader.js.map +1 -1
  106. package/dist/ObfuscateText.js +1 -1
  107. package/dist/PageHeader.js +3 -3
  108. package/dist/PageHeader.js.map +1 -1
  109. package/dist/PageNavigation.js +2 -2
  110. package/dist/Paginate.js +1 -1
  111. package/dist/Paginate.js.map +1 -1
  112. package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js +11 -0
  113. package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js.map +1 -0
  114. package/dist/QuickAction.js +11 -11
  115. package/dist/QuickAction.js.map +1 -1
  116. package/dist/Radio.js +2 -2
  117. package/dist/Radio.js.map +1 -1
  118. package/dist/RadioGroup.js +44 -44
  119. package/dist/RadioGroup.js.map +1 -1
  120. package/dist/RadioNew.js +14 -14
  121. package/dist/SearchBar.js +21 -21
  122. package/dist/SearchBar.js.map +1 -1
  123. package/dist/Select.js +187 -186
  124. package/dist/Select.js.map +1 -1
  125. package/dist/SelectStatus.js +22 -21
  126. package/dist/SelectStatus.js.map +1 -1
  127. package/dist/Step.js +37 -37
  128. package/dist/Step.js.map +1 -1
  129. package/dist/Switch.js +26 -25
  130. package/dist/Switch.js.map +1 -1
  131. package/dist/Tab.js +3 -2
  132. package/dist/Tab.js.map +1 -1
  133. package/dist/{Tab.vue_vue_type_script_setup_true_lang-b810bee8.js → Tab.vue_vue_type_script_setup_true_lang-4a40f015.js} +23 -22
  134. package/dist/Tab.vue_vue_type_script_setup_true_lang-4a40f015.js.map +1 -0
  135. package/dist/Table.js +20 -19
  136. package/dist/Table.js.map +1 -1
  137. package/dist/TableCell.js +22 -21
  138. package/dist/TableCell.js.map +1 -1
  139. package/dist/TableHeaderCell.js +7 -6
  140. package/dist/TableHeaderCell.js.map +1 -1
  141. package/dist/TableHeaderRow.js +6 -5
  142. package/dist/TableHeaderRow.js.map +1 -1
  143. package/dist/TableRow.js +24 -23
  144. package/dist/TableRow.js.map +1 -1
  145. package/dist/Tabs.js +2 -2
  146. package/dist/{Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js → Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js} +3 -3
  147. package/dist/{Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js.map → Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js.map} +1 -1
  148. package/dist/Textarea.js +2 -2
  149. package/dist/components.css +1 -1
  150. package/dist/index.js +21 -20
  151. package/dist/index.js.map +1 -1
  152. package/dist/storage.js +3 -2
  153. package/dist/storage.js.map +1 -1
  154. package/dist/useGoogleMaps.js.map +1 -1
  155. package/dist/utils/storage.js +30 -29
  156. package/dist/utils/storage.js.map +1 -1
  157. package/package.json +2 -2
  158. package/styles/_base.scss +1 -1
  159. package/styles/_core.scss +1 -1
  160. package/styles/elements/_links.scss +1 -1
  161. package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js +0 -17
  162. package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js.map +0 -1
  163. package/dist/Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js.map +0 -1
  164. package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js +0 -11
  165. package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map +0 -1
  166. package/dist/Tab.vue_vue_type_script_setup_true_lang-b810bee8.js.map +0 -1
package/dist/Backdrop.js CHANGED
@@ -2,7 +2,7 @@ import { openBlock as e, createElementBlock as r, renderSlot as o } from "vue";
2
2
  import { _ as s } from "./_plugin-vue_export-helper-dad06003.js";
3
3
  const a = {}, c = {
4
4
  "aria-hidden": "true",
5
- class: "stash-backdrop tw-fixed tw-z-behind tw-bg-black/50 tw-inset-0",
5
+ class: "stash-backdrop tw-fixed tw-inset-0 tw-z-behind tw-bg-black/50",
6
6
  "data-test": "stash-backdrop"
7
7
  };
8
8
  function d(t, n) {
@@ -1 +1 @@
1
- {"version":3,"file":"Backdrop.js","sources":["../src/components/Backdrop/Backdrop.vue"],"sourcesContent":["<template>\n <div\n aria-hidden=\"true\"\n class=\"stash-backdrop tw-fixed tw-z-behind tw-bg-black/50 tw-inset-0\"\n data-test=\"stash-backdrop\"\n >\n <slot></slot>\n </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cAEIA,IAAkB;AAAA,EAClB,eAAqE;AAAA,EACrE,OAAA;AAAA;;AAHF,SAAAC,EAAAC,GAAAC,GAAA;SAKeC,EAAA,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}
1
+ {"version":3,"file":"Backdrop.js","sources":["../src/components/Backdrop/Backdrop.vue"],"sourcesContent":["<template>\n <div\n aria-hidden=\"true\"\n class=\"stash-backdrop tw-fixed tw-inset-0 tw-z-behind tw-bg-black/50\"\n data-test=\"stash-backdrop\"\n >\n <slot></slot>\n </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cAEIA,IAAkB;AAAA,EAClB,eAAqE;AAAA,EACrE,OAAA;AAAA;;AAHF,SAAAC,EAAAC,GAAAC,GAAA;SAKeC,EAAA,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}
package/dist/Badge.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent as u, useCssModule as g, computed as l, ref as w, watch as m, openBlock as b, createElementBlock as v, renderSlot as h, withDirectives as _, createElementVNode as r, normalizeClass as c, unref as i, normalizeStyle as x, toDisplayString as y, vShow as B } from "vue";
1
+ import { defineComponent as u, useCssModule as g, computed as r, ref as w, watch as m, openBlock as v, createElementBlock as b, renderSlot as h, withDirectives as _, createElementVNode as d, normalizeClass as c, unref as i, normalizeStyle as x, toDisplayString as y, vShow as B } from "vue";
2
2
  import { _ as D } from "./_plugin-vue_export-helper-dad06003.js";
3
3
  const S = {
4
4
  class: "stash-badge tw-relative tw-inline-block",
@@ -21,12 +21,12 @@ const S = {
21
21
  variant: { default: "standard" }
22
22
  },
23
23
  setup(p) {
24
- const t = p, o = g(), s = l(() => {
24
+ const t = p, o = g(), s = r(() => {
25
25
  const e = parseInt(t.content, 10), a = parseInt(t.max, 10);
26
26
  return e != t.content || a != t.max ? t.content : e > a ? `${a}+` : e;
27
- }), d = (e) => e === 0 ? "0" : `${e}px`, f = l(() => ({
28
- top: t.offset.top !== void 0 ? d(t.offset.top) : void 0,
29
- right: t.offset.right !== void 0 ? d(t.offset.right) : void 0
27
+ }), l = (e) => e === 0 ? "0" : `${e}px`, f = r(() => ({
28
+ top: t.offset.top !== void 0 ? l(t.offset.top) : void 0,
29
+ right: t.offset.right !== void 0 ? l(t.offset.right) : void 0
30
30
  })), n = w(!1);
31
31
  return m(
32
32
  () => t.content,
@@ -35,9 +35,9 @@ const S = {
35
35
  n.value = !1;
36
36
  }, 1e3));
37
37
  }
38
- ), (e, a) => (b(), v("span", S, [
38
+ ), (e, a) => (v(), b("span", S, [
39
39
  h(e.$slots, "default"),
40
- _(r("span", {
40
+ _(d("span", {
41
41
  "data-test": "stash-badge|content-wrapper",
42
42
  class: c([
43
43
  {
@@ -48,9 +48,9 @@ const S = {
48
48
  ]),
49
49
  style: x(t.variant === "dot" || t.position === "top-right" ? f.value : "")
50
50
  }, [
51
- r("span", {
51
+ d("span", {
52
52
  "data-test": "stash-badge|content",
53
- class: c(["tw-text-white tw-font-semibold tw-rounded-full tw-text-[10px] tw-text-center tw-whitespace-nowrap tw-leading-[0.875rem] tw-inline-block", [
53
+ class: c(["tw-inline-block tw-whitespace-nowrap tw-rounded-full tw-text-center tw-text-[10px] tw-font-semibold tw-leading-[0.875rem] tw-text-white", [
54
54
  {
55
55
  "tw-animate-grow": n.value,
56
56
  "tw-bg-red-500": t.color === "red" && !t.isDisabled,
@@ -69,9 +69,9 @@ const S = {
69
69
  ]));
70
70
  }
71
71
  }), k = {
72
- "badge-standard": "_badge-standard_1b1so_2",
73
- "badge-dot": "_badge-dot_1b1so_8",
74
- "top-right": "_top-right_1b1so_15"
72
+ "badge-standard": "_badge-standard_fulr7_2",
73
+ "badge-dot": "_badge-dot_fulr7_8",
74
+ "top-right": "_top-right_fulr7_15"
75
75
  }, M = {
76
76
  $style: k
77
77
  }, E = /* @__PURE__ */ D(C, [["__cssModules", M]]);
package/dist/Badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { computed, ref, useCssModule, watch } from 'vue';\n\n defineOptions({\n name: 'll-badge',\n });\n\n const classes = useCssModule();\n\n export interface BadgeProps {\n /**\n * If true, the badge will animate when the content changes\n */\n animate?: boolean;\n\n /**\n * Color of the badge\n * Options: 'red' or 'blue'\n */\n color?: 'red' | 'blue';\n\n /**\n * The badge's content\n */\n content?: number | string;\n\n /**\n * Shows a gray badge with content\n */\n isDisabled?: boolean;\n\n /**\n * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n */\n max?: number | string;\n\n /**\n * Offset to adjust the badge's position. It does not apply to inline position badges.\n */\n offset?: {\n top?: number;\n right?: number;\n };\n\n /**\n * Badge position. Options:\n *\n * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n * - top-right: will overlap the badge over whatever is passed in the default slot\n */\n position?: 'top-right' | 'inline';\n\n /**\n * The badge will be hidden if the content is `0` unless this prop is set to true.\n */\n showZero?: boolean;\n\n /**\n * Badge variant\n */\n variant?: 'dot' | 'standard';\n }\n\n const props = withDefaults(defineProps<BadgeProps>(), {\n animate: false,\n color: 'red',\n content: undefined,\n isDisabled: false,\n max: 99,\n position: 'top-right',\n offset: () => ({\n top: undefined,\n right: undefined,\n }),\n showZero: false,\n variant: 'standard',\n });\n\n const computedContent = computed(() => {\n const numericContent = parseInt(props.content as string, 10);\n const numericMax = parseInt(props.max as string, 10);\n // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n // but this check will fail like we want it to.\n // eslint-disable-next-line eqeqeq\n if (numericContent != props.content || numericMax != props.max) {\n return props.content;\n }\n\n return numericContent > numericMax ? `${numericMax}+` : numericContent;\n });\n\n const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n const computedOffsetStyle = computed(() => ({\n top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n }));\n\n const playAnimation = ref(false);\n\n watch(\n () => props.content,\n (value, oldValue) => {\n if (!props.animate) {\n return;\n }\n\n if (oldValue !== value) {\n playAnimation.value = true;\n\n setTimeout(() => {\n playAnimation.value = false;\n }, 1000);\n }\n },\n );\n</script>\n\n<template>\n <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n <slot />\n <span\n v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n data-test=\"stash-badge|content-wrapper\"\n :class=\"[\n {\n [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n 'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n 'tw-ml-1.5': props.position === 'inline',\n },\n ]\"\n :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n >\n <span\n data-test=\"stash-badge|content\"\n class=\"\n tw-text-white\n tw-font-semibold\n tw-rounded-full\n tw-text-[10px]\n tw-text-center\n tw-whitespace-nowrap\n tw-leading-[0.875rem]\n tw-inline-block\n \"\n :class=\"[\n {\n 'tw-animate-grow': playAnimation,\n 'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n 'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n 'tw-absolute': props.variant === 'dot',\n 'tw-bg-ice-200 tw-text-white': props.isDisabled,\n [classes['badge-dot']]: props.variant === 'dot',\n [classes['badge-standard']]: props.variant === 'standard',\n 'tw-px-1.5': props.variant !== 'dot',\n },\n ]\"\n >\n {{ props.variant === 'dot' ? null : computedContent }}\n </span>\n </span>\n </span>\n</template>\n\n<style module>\n .badge-standard {\n height: 15px;\n line-height: 1.05rem;\n vertical-align: middle;\n }\n\n .badge-dot {\n border: 2px solid theme('colors.ice.100');\n height: 10px;\n right: 0;\n width: 10px;\n }\n\n .top-right {\n top: 0;\n right: 0;\n transform: translateX(50%) translateY(-48%);\n }\n</style>\n"],"names":["classes","useCssModule","computedContent","computed","numericContent","props","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAOQA,IAAUC,KAuEVC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASC,EAAM,SAAmB,EAAE,GACrDC,IAAa,SAASD,EAAM,KAAe,EAAE;AAKnD,aAAID,KAAkBC,EAAM,WAAWC,KAAcD,EAAM,MAClDA,EAAM,UAGRD,IAAiBE,IAAa,GAAGA,CAAU,MAAMF;AAAA,IAAA,CACzD,GAEKG,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,IAAsBN,EAAS,OAAO;AAAA,MAC1C,KAAKE,EAAM,OAAO,QAAQ,SAAYE,EAAuBF,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYE,EAAuBF,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIK,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACG,GAAOK,MAAa;AACf,QAACR,EAAM,WAIPQ,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { computed, ref, useCssModule, watch } from 'vue';\n\n defineOptions({\n name: 'll-badge',\n });\n\n const classes = useCssModule();\n\n export interface BadgeProps {\n /**\n * If true, the badge will animate when the content changes\n */\n animate?: boolean;\n\n /**\n * Color of the badge\n * Options: 'red' or 'blue'\n */\n color?: 'red' | 'blue';\n\n /**\n * The badge's content\n */\n content?: number | string;\n\n /**\n * Shows a gray badge with content\n */\n isDisabled?: boolean;\n\n /**\n * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n */\n max?: number | string;\n\n /**\n * Offset to adjust the badge's position. It does not apply to inline position badges.\n */\n offset?: {\n top?: number;\n right?: number;\n };\n\n /**\n * Badge position. Options:\n *\n * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n * - top-right: will overlap the badge over whatever is passed in the default slot\n */\n position?: 'top-right' | 'inline';\n\n /**\n * The badge will be hidden if the content is `0` unless this prop is set to true.\n */\n showZero?: boolean;\n\n /**\n * Badge variant\n */\n variant?: 'dot' | 'standard';\n }\n\n const props = withDefaults(defineProps<BadgeProps>(), {\n animate: false,\n color: 'red',\n content: undefined,\n isDisabled: false,\n max: 99,\n position: 'top-right',\n offset: () => ({\n top: undefined,\n right: undefined,\n }),\n showZero: false,\n variant: 'standard',\n });\n\n const computedContent = computed(() => {\n const numericContent = parseInt(props.content as string, 10);\n const numericMax = parseInt(props.max as string, 10);\n // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n // but this check will fail like we want it to.\n // eslint-disable-next-line eqeqeq\n if (numericContent != props.content || numericMax != props.max) {\n return props.content;\n }\n\n return numericContent > numericMax ? `${numericMax}+` : numericContent;\n });\n\n const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n const computedOffsetStyle = computed(() => ({\n top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n }));\n\n const playAnimation = ref(false);\n\n watch(\n () => props.content,\n (value, oldValue) => {\n if (!props.animate) {\n return;\n }\n\n if (oldValue !== value) {\n playAnimation.value = true;\n\n setTimeout(() => {\n playAnimation.value = false;\n }, 1000);\n }\n },\n );\n</script>\n\n<template>\n <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n <slot />\n <span\n v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n data-test=\"stash-badge|content-wrapper\"\n :class=\"[\n {\n [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n 'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n 'tw-ml-1.5': props.position === 'inline',\n },\n ]\"\n :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n >\n <span\n data-test=\"stash-badge|content\"\n class=\"\n tw-inline-block\n tw-whitespace-nowrap\n tw-rounded-full\n tw-text-center\n tw-text-[10px]\n tw-font-semibold\n tw-leading-[0.875rem]\n tw-text-white\n \"\n :class=\"[\n {\n 'tw-animate-grow': playAnimation,\n 'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n 'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n 'tw-absolute': props.variant === 'dot',\n 'tw-bg-ice-200 tw-text-white': props.isDisabled,\n [classes['badge-dot']]: props.variant === 'dot',\n [classes['badge-standard']]: props.variant === 'standard',\n 'tw-px-1.5': props.variant !== 'dot',\n },\n ]\"\n >\n {{ props.variant === 'dot' ? null : computedContent }}\n </span>\n </span>\n </span>\n</template>\n\n<style module>\n .badge-standard {\n height: 15px;\n line-height: 1.05rem;\n vertical-align: middle;\n }\n\n .badge-dot {\n border: 2px solid var(--color-ice-100);\n height: 10px;\n right: 0;\n width: 10px;\n }\n\n .top-right {\n top: 0;\n right: 0;\n transform: translateX(50%) translateY(-48%);\n }\n</style>\n"],"names":["classes","useCssModule","computedContent","computed","numericContent","props","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAOQA,IAAUC,KAuEVC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASC,EAAM,SAAmB,EAAE,GACrDC,IAAa,SAASD,EAAM,KAAe,EAAE;AAKnD,aAAID,KAAkBC,EAAM,WAAWC,KAAcD,EAAM,MAClDA,EAAM,UAGRD,IAAiBE,IAAa,GAAGA,CAAU,MAAMF;AAAA,IAAA,CACzD,GAEKG,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,IAAsBN,EAAS,OAAO;AAAA,MAC1C,KAAKE,EAAM,OAAO,QAAQ,SAAYE,EAAuBF,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYE,EAAuBF,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIK,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACG,GAAOK,MAAa;AACf,QAACR,EAAM,WAIPQ,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/Button.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { defineComponent as f, computed as c, openBlock as a, createElementBlock as n, normalizeClass as r, renderSlot as s } from "vue";
2
- import { s as i } from "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
2
+ import { s as i } from "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
3
3
  import { _ as d } from "./_plugin-vue_export-helper-dad06003.js";
4
4
  const y = ["href"];
5
5
  var u = /* @__PURE__ */ ((t) => (t.Primary = "primary", t.Secondary = "secondary", t.Tertiary = "tertiary", t.Icon = "icon", t.IconLabel = "iconLabel", t.Inline = "inline", t))(u || {});
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { computed } from 'vue';\n\n defineOptions({\n name: 'll-button',\n });\n\n export interface ButtonProps {\n /**\n * Renders the secondary variant\n */\n secondary?: boolean;\n /**\n * Renders the button as a container for an Icon\n */\n icon?: boolean;\n /**\n * Renders the button as a container for an IconLabel\n */\n iconLabel?: boolean;\n /**\n * Renders the tertiary variant\n */\n tertiary?: boolean;\n /**\n * Renders the component inline\n */\n inline?: boolean;\n /**\n * Renders a color variant\n */\n color?: 'blue' | 'red';\n /**\n * Button link. If defined, the button will render as an `<a />` tag.\n */\n href?: string;\n }\n\n const props = withDefaults(defineProps<ButtonProps>(), {\n secondary: false,\n icon: false,\n iconLabel: false,\n tertiary: false,\n inline: false,\n color: undefined,\n href: '',\n });\n\n enum ButtonTypes {\n Primary = 'primary',\n Secondary = 'secondary',\n Tertiary = 'tertiary',\n Icon = 'icon',\n IconLabel = 'iconLabel',\n Inline = 'inline',\n }\n\n type ButtonType = `${ButtonTypes}`;\n\n const buttonType = computed<ButtonType>(() => {\n for (const type of Object.values(ButtonTypes)) {\n if (props[type]) {\n return type;\n }\n }\n\n return ButtonTypes.Primary;\n });\n</script>\n\n<template>\n <a\n v-if=\"props.href\"\n data-test=\"ll-button\"\n class=\"stash-button\"\n :class=\"[$style.button, $style[`button--${buttonType}`], { [$style[`button--${props.color}`]]: props.color }]\"\n :href=\"props.href\"\n >\n <!-- @slot default -->\n <slot></slot>\n </a>\n <button\n v-else\n data-test=\"ll-button\"\n class=\"stash-button\"\n :class=\"[$style.button, $style[`button--${buttonType}`], { [$style[`button--${props.color}`]]: props.color }]\"\n >\n <!-- @slot default -->\n <slot></slot>\n </button>\n</template>\n\n<style module>\n .button {\n border-radius: var(--border-radius);\n border-width: 1px;\n display: inline-block;\n font-size: 0.875rem;\n font-weight: var(--font-weight-semibold);\n line-height: 2.125rem;\n margin: 0;\n min-width: 144px;\n padding: 0 var(--ll-space-2);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n @media screen(lg) {\n /* `focus` and `hover` should be added only for large screens */\n .button:focus {\n box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n outline: none;\n }\n\n .button:hover {\n text-decoration: none;\n }\n }\n\n .button[disabled] {\n cursor: default;\n pointer-events: none;\n }\n\n /* Solid treatment */\n .button--solid {\n background-color: var(--button-color);\n border-color: transparent;\n color: var(--text-color);\n }\n\n @media screen(lg) {\n /* `hover` should be added only for large screens */\n .button--solid:hover {\n background-color: var(--button-hover-color);\n }\n }\n\n .button--solid:active {\n background-color: var(--button-hover-color);\n }\n\n .button--solid[disabled] {\n --button-color: var(--color-ice) !important;\n }\n\n /* Ghost treatment */\n .button--ghost {\n background-color: rgb(0 0 0 / 0%);\n border-color: var(--button-color);\n color: var(--text-color);\n }\n\n @media screen(lg) {\n /* `hover` should be added only for large screens */\n .button--ghost:hover {\n background-color: var(--button-hover-color);\n }\n }\n\n .button--ghost:active {\n background-color: var(--button-hover-color);\n }\n\n .button--ghost[disabled] {\n --button-color: var(--color-ice) !important;\n --text-color: var(--color-ice) !important;\n }\n\n /* Types */\n .button--primary {\n composes: button--solid;\n --button-color: var(--color-blue);\n --button-hover-color: var(--color-blue-hover);\n --text-color: var(--color-white);\n }\n\n .button--secondary {\n composes: button--ghost;\n --button-color: var(--color-ice);\n --button-hover-color: var(--color-ice-700-hover);\n --text-color: var(--color-ice-700);\n }\n\n .button--tertiary {\n composes: button--ghost;\n --button-color: var(--color-white);\n --button-hover-color: var(--color-white-hover);\n --text-color: var(--color-white);\n }\n\n .button--icon,\n .button--iconLabel {\n /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n border: 0;\n border-radius: var(--border-radius);\n height: var(--ll-space-5);\n min-width: var(--ll-space-5);\n text-decoration: none;\n }\n\n .button--icon {\n padding: var(--ll-space-2);\n width: var(--ll-space-5);\n }\n\n .button--iconLabel {\n padding: 0;\n width: unset;\n }\n\n @media screen(lg) {\n /* `hover` should be added only for large screens */\n .button--icon:hover,\n .button--iconLabel:hover {\n text-decoration: none;\n }\n }\n\n .button--icon svg,\n .button--iconLabel svg {\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n\n .button--icon[disabled] svg,\n .button--iconLabel[disabled],\n .button--iconLabel[disabled] svg {\n color: var(--color-ice);\n }\n\n .button--inline {\n border: 0;\n color: var(--color-blue);\n font-weight: var(--font-weight-medium);\n line-height: 1.5;\n min-width: 0;\n padding: 0;\n }\n\n .button--inline:hover {\n text-decoration: underline;\n }\n\n .button--inline[disabled] {\n color: var(--color-ice-900);\n }\n\n /* Colors */\n .button--blue.button--primary,\n .button--blue.button--secondary {\n --button-color: var(--color-blue);\n }\n\n .button--blue.button--primary {\n --button-hover-color: var(--color-blue-hover);\n }\n\n .button--blue.button--secondary {\n --text-color: var(--color-blue);\n --button-hover-color: var(--button-secondary-blue-hover);\n }\n\n .button--red.button--primary,\n .button--red.button--secondary {\n --button-color: var(--color-red);\n }\n\n .button--red.button--primary {\n --button-hover-color: var(--color-red-hover);\n }\n\n .button--red.button--secondary {\n --text-color: var(--color-red);\n --button-hover-color: var(--button-secondary-red-hover);\n }\n\n /**\n * Button Grid\n * TODO: Move into separate component\n * https://leaflink.atlassian.net/browse/STASH-230\n * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n */\n :global(.button-grid) > .button,\n :global(.header-button-grid) > .button {\n width: 50%;\n }\n\n :global(.button-grid) > .button + .button {\n margin-left: var(--ll-space-3);\n }\n\n @media screen(md) {\n :global(.button-grid) > .button {\n width: auto;\n }\n }\n\n :global(.header-button-grid) > .button + .button {\n margin-left: var(--ll-space-3);\n }\n\n @media screen(lg) {\n :global(.header-button-grid) > .button {\n width: auto;\n }\n }\n</style>\n"],"names":["ButtonTypes","buttonType","computed","type","props"],"mappings":";;;;AAgDE,IAAKA,sBAAAA,OACHA,EAAA,UAAU,WACVA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,SAAS,UANNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;iBAWCC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AACtC,YAAAI,EAAMD,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { computed } from 'vue';\n\n defineOptions({\n name: 'll-button',\n });\n\n export interface ButtonProps {\n /**\n * Renders the secondary variant\n */\n secondary?: boolean;\n /**\n * Renders the button as a container for an Icon\n */\n icon?: boolean;\n /**\n * Renders the button as a container for an IconLabel\n */\n iconLabel?: boolean;\n /**\n * Renders the tertiary variant\n */\n tertiary?: boolean;\n /**\n * Renders the component inline\n */\n inline?: boolean;\n /**\n * Renders a color variant\n */\n color?: 'blue' | 'red';\n /**\n * Button link. If defined, the button will render as an `<a />` tag.\n */\n href?: string;\n }\n\n const props = withDefaults(defineProps<ButtonProps>(), {\n secondary: false,\n icon: false,\n iconLabel: false,\n tertiary: false,\n inline: false,\n color: undefined,\n href: '',\n });\n\n enum ButtonTypes {\n Primary = 'primary',\n Secondary = 'secondary',\n Tertiary = 'tertiary',\n Icon = 'icon',\n IconLabel = 'iconLabel',\n Inline = 'inline',\n }\n\n type ButtonType = `${ButtonTypes}`;\n\n const buttonType = computed<ButtonType>(() => {\n for (const type of Object.values(ButtonTypes)) {\n if (props[type]) {\n return type;\n }\n }\n\n return ButtonTypes.Primary;\n });\n</script>\n\n<template>\n <a\n v-if=\"props.href\"\n data-test=\"ll-button\"\n class=\"stash-button\"\n :class=\"[$style.button, $style[`button--${buttonType}`], { [$style[`button--${props.color}`]]: props.color }]\"\n :href=\"props.href\"\n >\n <!-- @slot default -->\n <slot></slot>\n </a>\n <button\n v-else\n data-test=\"ll-button\"\n class=\"stash-button\"\n :class=\"[$style.button, $style[`button--${buttonType}`], { [$style[`button--${props.color}`]]: props.color }]\"\n >\n <!-- @slot default -->\n <slot></slot>\n </button>\n</template>\n\n<style module>\n .button {\n border-radius: var(--border-radius);\n border-width: 1px;\n display: inline-block;\n font-size: 0.875rem;\n font-weight: var(--font-weight-semibold);\n line-height: 2.125rem;\n margin: 0;\n min-width: 144px;\n padding: 0 var(--ll-space-2);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n @media screen(lg) {\n /* `focus` and `hover` should be added only for large screens */\n .button:focus {\n box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n outline: none;\n }\n\n .button:hover {\n text-decoration: none;\n }\n }\n\n .button[disabled] {\n cursor: default;\n pointer-events: none;\n }\n\n /* Solid treatment */\n .button--solid {\n background-color: var(--button-color);\n border-color: transparent;\n color: var(--text-color);\n }\n\n @media screen(lg) {\n /* `hover` should be added only for large screens */\n .button--solid:hover {\n background-color: var(--button-hover-color);\n }\n }\n\n .button--solid:active {\n background-color: var(--button-hover-color);\n }\n\n .button--solid[disabled] {\n --button-color: var(--color-ice-500) !important;\n }\n\n /* Ghost treatment */\n .button--ghost {\n background-color: rgb(0 0 0 / 0%);\n border-color: var(--button-color);\n color: var(--text-color);\n }\n\n @media screen(lg) {\n /* `hover` should be added only for large screens */\n .button--ghost:hover {\n background-color: var(--button-hover-color);\n }\n }\n\n .button--ghost:active {\n background-color: var(--button-hover-color);\n }\n\n .button--ghost[disabled] {\n --button-color: var(--color-ice-500) !important;\n --text-color: var(--color-ice-500) !important;\n }\n\n /* Types */\n .button--primary {\n composes: button--solid;\n --button-color: var(--color-blue-500);\n --button-hover-color: var(--color-blue-hover);\n --text-color: var(--color-white);\n }\n\n .button--secondary {\n composes: button--ghost;\n --button-color: var(--color-ice-500);\n --button-hover-color: var(--color-ice-700-hover);\n --text-color: var(--color-ice-700);\n }\n\n .button--tertiary {\n composes: button--ghost;\n --button-color: var(--color-white);\n --button-hover-color: var(--color-white-hover);\n --text-color: var(--color-white);\n }\n\n .button--icon,\n .button--iconLabel {\n /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n border: 0;\n border-radius: var(--border-radius);\n height: var(--ll-space-5);\n min-width: var(--ll-space-5);\n text-decoration: none;\n }\n\n .button--icon {\n padding: var(--ll-space-2);\n width: var(--ll-space-5);\n }\n\n .button--iconLabel {\n padding: 0;\n width: unset;\n }\n\n @media screen(lg) {\n /* `hover` should be added only for large screens */\n .button--icon:hover,\n .button--iconLabel:hover {\n text-decoration: none;\n }\n }\n\n .button--icon svg,\n .button--iconLabel svg {\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n\n .button--icon[disabled] svg,\n .button--iconLabel[disabled],\n .button--iconLabel[disabled] svg {\n color: var(--color-ice-500);\n }\n\n .button--inline {\n border: 0;\n color: var(--color-blue-500);\n font-weight: var(--font-weight-medium);\n line-height: 1.5;\n min-width: 0;\n padding: 0;\n }\n\n .button--inline:hover {\n text-decoration: underline;\n }\n\n .button--inline[disabled] {\n color: var(--color-ice-900);\n }\n\n /* Colors */\n .button--blue.button--primary,\n .button--blue.button--secondary {\n --button-color: var(--color-blue-500);\n }\n\n .button--blue.button--primary {\n --button-hover-color: var(--color-blue-hover);\n }\n\n .button--blue.button--secondary {\n --text-color: var(--color-blue-500);\n --button-hover-color: var(--button-secondary-blue-hover);\n }\n\n .button--red.button--primary,\n .button--red.button--secondary {\n --button-color: var(--color-red-500);\n }\n\n .button--red.button--primary {\n --button-hover-color: var(--color-red-hover);\n }\n\n .button--red.button--secondary {\n --text-color: var(--color-red-500);\n --button-hover-color: var(--button-secondary-red-hover);\n }\n\n /**\n * Button Grid\n * TODO: Move into separate component\n * https://leaflink.atlassian.net/browse/STASH-230\n * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n */\n :global(.button-grid) > .button,\n :global(.header-button-grid) > .button {\n width: 50%;\n }\n\n :global(.button-grid) > .button + .button {\n margin-left: var(--ll-space-3);\n }\n\n @media screen(md) {\n :global(.button-grid) > .button {\n width: auto;\n }\n }\n\n :global(.header-button-grid) > .button + .button {\n margin-left: var(--ll-space-3);\n }\n\n @media screen(lg) {\n :global(.header-button-grid) > .button {\n width: auto;\n }\n }\n</style>\n"],"names":["ButtonTypes","buttonType","computed","type","props"],"mappings":";;;;AAgDE,IAAKA,sBAAAA,OACHA,EAAA,UAAU,WACVA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,SAAS,UANNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;iBAWCC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AACtC,YAAAI,EAAMD,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,17 @@
1
+ const t = "_button_trcic_2", o = {
2
+ button: t,
3
+ "button--solid": "_button--solid_trcic_36",
4
+ "button--ghost": "_button--ghost_trcic_58",
5
+ "button--primary": "_button--primary_trcic_81 _button--solid_trcic_36",
6
+ "button--secondary": "_button--secondary_trcic_88 _button--ghost_trcic_58",
7
+ "button--tertiary": "_button--tertiary_trcic_95 _button--ghost_trcic_58",
8
+ "button--icon": "_button--icon_trcic_102",
9
+ "button--iconLabel": "_button--iconLabel_trcic_103",
10
+ "button--inline": "_button--inline_trcic_143",
11
+ "button--blue": "_button--blue_trcic_161",
12
+ "button--red": "_button--red_trcic_175"
13
+ };
14
+ export {
15
+ o as s
16
+ };
17
+ //# sourceMappingURL=Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
@@ -1,12 +1,12 @@
1
- import { defineComponent as m, computed as r, ref as b, openBlock as n, createElementBlock as s, normalizeClass as p, Fragment as g, renderList as $, withModifiers as y, toDisplayString as B } from "vue";
2
- import h from "lodash-es/uniqueId";
3
- import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
4
- const C = ["data-test"], G = ["data-test", "disabled", "onClick"], w = {
1
+ import { defineComponent as m, computed as r, ref as b, openBlock as l, createElementBlock as s, normalizeClass as p, Fragment as g, renderList as $, withModifiers as y, toDisplayString as w } from "vue";
2
+ import B from "lodash-es/uniqueId";
3
+ import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
4
+ const k = ["data-test"], x = ["data-test", "disabled", "onClick"], C = {
5
5
  name: "ll-button-group"
6
- }, D = /* @__PURE__ */ m({
7
- ...w,
6
+ }, G = /* @__PURE__ */ m({
7
+ ...C,
8
8
  props: {
9
- groupName: { default: h() },
9
+ groupName: { default: B() },
10
10
  options: {},
11
11
  fullWidth: { type: Boolean, default: !1 },
12
12
  disabled: { type: Boolean, default: !1 },
@@ -19,7 +19,7 @@ const C = ["data-test"], G = ["data-test", "disabled", "onClick"], w = {
19
19
  var o;
20
20
  i.value && ((o = a.value) == null ? void 0 : o.id) === t.id ? a.value = null : a.value = t, _("input", a.value);
21
21
  }
22
- return (t, o) => (n(), s("div", {
22
+ return (t, o) => (l(), s("div", {
23
23
  class: p([
24
24
  "flex",
25
25
  t.$style.buttonGroup,
@@ -29,29 +29,29 @@ const C = ["data-test"], G = ["data-test", "disabled", "onClick"], w = {
29
29
  ]),
30
30
  "data-test": `button-group-${t.$props.groupName}`
31
31
  }, [
32
- (n(!0), s(g, null, $(e.options, (l) => {
32
+ (l(!0), s(g, null, $(e.options, (n) => {
33
33
  var c, d;
34
- return n(), s("button", {
35
- key: `${e.groupName}-${l.id}`,
36
- class: p([t.$style.button, { [t.$style.active]: ((c = a.value) == null ? void 0 : c.id) === l.id }]),
37
- "data-test": `${e.groupName}-button-${((d = a.value) == null ? void 0 : d.id) === l.id ? "active" : "inactive"}`,
34
+ return l(), s("button", {
35
+ key: `${e.groupName}-${n.id}`,
36
+ class: p([t.$style.button, { [t.$style.active]: ((c = a.value) == null ? void 0 : c.id) === n.id }]),
37
+ "data-test": `${e.groupName}-button-${((d = a.value) == null ? void 0 : d.id) === n.id ? "active" : "inactive"}`,
38
38
  tabindex: 0,
39
39
  disabled: e.disabled,
40
- onClick: y((E) => f(l), ["prevent"])
41
- }, B(l.text), 11, G);
40
+ onClick: y((z) => f(n), ["prevent"])
41
+ }, w(n.text), 11, x);
42
42
  }), 128))
43
- ], 10, C));
43
+ ], 10, k));
44
44
  }
45
- }), N = "_buttonGroup_15lt7_176", M = "_button_15lt7_176", S = "_single_15lt7_190", W = "_active_15lt7_202", q = {
46
- buttonGroup: N,
47
- button: M,
48
- single: S,
49
- active: W,
50
- "can-deactivate": "_can-deactivate_15lt7_215"
51
- }, z = {
52
- $style: q
53
- }, j = /* @__PURE__ */ k(D, [["__cssModules", z]]);
45
+ }), D = "_buttonGroup_1cnwx_176", N = "_button_1cnwx_176", M = "_single_1cnwx_190", S = "_active_1cnwx_202", W = {
46
+ buttonGroup: D,
47
+ button: N,
48
+ single: M,
49
+ active: S,
50
+ "can-deactivate": "_can-deactivate_1cnwx_215"
51
+ }, q = {
52
+ $style: W
53
+ }, L = /* @__PURE__ */ h(G, [["__cssModules", q]]);
54
54
  export {
55
- j as default
55
+ L as default
56
56
  };
57
57
  //# sourceMappingURL=ButtonGroup.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n /**\n * @deprecated use RadioGroup instead with `variant=\"button\"`.\n * RadioGroup uses pretty much the same API as the ButtonGroup,\n * but every button is a radio element which makes more sense semantically.\n */\n export default {\n name: 'll-button-group',\n };\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, ref } from 'vue';\n\n export interface ButtonGroupOption {\n id: string;\n active?: boolean;\n text: string;\n }\n\n export interface ButtonGroupProps {\n /**\n * A name for the group, useful when multiple ButtonGroups exist on the page\n */\n groupName?: string;\n\n /**\n * The list of buttons to render\n */\n options: ButtonGroupOption[];\n\n /**\n * Whether the group should expand to the parent's width\n */\n fullWidth?: boolean;\n\n /**\n * Whether the entire group should be disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the active button can be deactivated\n */\n allowDeactivate?: boolean;\n }\n\n const props = withDefaults(defineProps<ButtonGroupProps>(), {\n groupName: uniqueId(),\n fullWidth: false,\n disabled: false,\n allowDeactivate: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'input', activeButton: ButtonGroupOption | null): void;\n }>();\n\n const isSingleButton = computed(() => props.options.length === 1);\n\n const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n const activeButton = ref(props.options.find((o) => o.active) || null);\n\n function onClick(clickedOption: ButtonGroupOption) {\n if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n activeButton.value = null;\n } else {\n activeButton.value = clickedOption;\n }\n\n emit('input', activeButton.value);\n }\n</script>\n\n<template>\n <div\n :class=\"[\n 'flex',\n $style.buttonGroup,\n { 'w-full': props.fullWidth },\n { [$style.single]: isSingleButton },\n { [$style['can-deactivate']]: canDeactivate },\n ]\"\n :data-test=\"`button-group-${$props.groupName}`\"\n >\n <button\n v-for=\"option in props.options\"\n :key=\"`${props.groupName}-${option.id}`\"\n :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n :tabindex=\"0\"\n :disabled=\"props.disabled\"\n @click.prevent=\"onClick(option)\"\n >\n {{ option.text }}\n </button>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n // full width buttons\n .buttonGroup:global(.w-full) > button {\n flex: 1 1 50%;\n max-width: 100%;\n }\n\n .button {\n border: 1px solid var(--color-ice);\n border-radius: 0;\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-body);\n min-width: 100px;\n padding: 7px 8px;\n }\n\n .single .button {\n border: 1px solid var(--color-ice-700);\n color: var(--color-ice-700);\n }\n\n .button:focus,\n .button:hover {\n border: 1px solid var(--color-blue) !important;\n color: var(--color-blue);\n z-index: 1;\n }\n\n .button.active {\n background-color: var(--color-blue-100);\n border: 1px solid var(--color-blue) !important;\n color: var(--color-blue);\n cursor: default;\n z-index: 1;\n }\n\n .button.active + button {\n border-left: 1px solid transparent;\n }\n\n .single .button.active,\n .can-deactivate .button.active {\n cursor: pointer;\n }\n\n .button[disabled] {\n color: var(--color-ice);\n cursor: default;\n pointer-events: none;\n }\n\n .button:focus {\n box-shadow: none;\n outline: 0;\n }\n\n .button:not(:first-child) {\n margin-left: -1px;\n }\n\n .button:not(:last-child) {\n border-right: 1px solid transparent;\n }\n\n .button:first-child {\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n\n .button:last-child {\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n</style>\n"],"names":["isSingleButton","computed","props","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","emit"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAoDMA,IAAiBC,EAAS,MAAMC,EAAM,QAAQ,WAAW,CAAC,GAE1DC,IAAgBF,EAAS,MAAMC,EAAM,mBAAmBF,EAAe,KAAK,GAE5EI,IAAeC,EAAIH,EAAM,QAAQ,KAAK,CAACI,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBE,EAAA,SAASN,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n /**\n * @deprecated use RadioGroup instead with `variant=\"button\"`.\n * RadioGroup uses pretty much the same API as the ButtonGroup,\n * but every button is a radio element which makes more sense semantically.\n */\n export default {\n name: 'll-button-group',\n };\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, ref } from 'vue';\n\n export interface ButtonGroupOption {\n id: string;\n active?: boolean;\n text: string;\n }\n\n export interface ButtonGroupProps {\n /**\n * A name for the group, useful when multiple ButtonGroups exist on the page\n */\n groupName?: string;\n\n /**\n * The list of buttons to render\n */\n options: ButtonGroupOption[];\n\n /**\n * Whether the group should expand to the parent's width\n */\n fullWidth?: boolean;\n\n /**\n * Whether the entire group should be disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the active button can be deactivated\n */\n allowDeactivate?: boolean;\n }\n\n const props = withDefaults(defineProps<ButtonGroupProps>(), {\n groupName: uniqueId(),\n fullWidth: false,\n disabled: false,\n allowDeactivate: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'input', activeButton: ButtonGroupOption | null): void;\n }>();\n\n const isSingleButton = computed(() => props.options.length === 1);\n\n const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n const activeButton = ref(props.options.find((o) => o.active) || null);\n\n function onClick(clickedOption: ButtonGroupOption) {\n if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n activeButton.value = null;\n } else {\n activeButton.value = clickedOption;\n }\n\n emit('input', activeButton.value);\n }\n</script>\n\n<template>\n <div\n :class=\"[\n 'flex',\n $style.buttonGroup,\n { 'w-full': props.fullWidth },\n { [$style.single]: isSingleButton },\n { [$style['can-deactivate']]: canDeactivate },\n ]\"\n :data-test=\"`button-group-${$props.groupName}`\"\n >\n <button\n v-for=\"option in props.options\"\n :key=\"`${props.groupName}-${option.id}`\"\n :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n :tabindex=\"0\"\n :disabled=\"props.disabled\"\n @click.prevent=\"onClick(option)\"\n >\n {{ option.text }}\n </button>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n // full width buttons\n .buttonGroup:global(.w-full) > button {\n flex: 1 1 50%;\n max-width: 100%;\n }\n\n .button {\n border: 1px solid var(--color-ice-500);\n border-radius: 0;\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-body);\n min-width: 100px;\n padding: 7px 8px;\n }\n\n .single .button {\n border: 1px solid var(--color-ice-700);\n color: var(--color-ice-700);\n }\n\n .button:focus,\n .button:hover {\n border: 1px solid var(--color-blue-500) !important;\n color: var(--color-blue-500);\n z-index: 1;\n }\n\n .button.active {\n background-color: var(--color-blue-100);\n border: 1px solid var(--color-blue-500) !important;\n color: var(--color-blue-500);\n cursor: default;\n z-index: 1;\n }\n\n .button.active + button {\n border-left: 1px solid transparent;\n }\n\n .single .button.active,\n .can-deactivate .button.active {\n cursor: pointer;\n }\n\n .button[disabled] {\n color: var(--color-ice-500);\n cursor: default;\n pointer-events: none;\n }\n\n .button:focus {\n box-shadow: none;\n outline: 0;\n }\n\n .button:not(:first-child) {\n margin-left: -1px;\n }\n\n .button:not(:last-child) {\n border-right: 1px solid transparent;\n }\n\n .button:first-child {\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n\n .button:last-child {\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n</style>\n"],"names":["isSingleButton","computed","props","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","emit"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAoDMA,IAAiBC,EAAS,MAAMC,EAAM,QAAQ,WAAW,CAAC,GAE1DC,IAAgBF,EAAS,MAAMC,EAAM,mBAAmBF,EAAe,KAAK,GAE5EI,IAAeC,EAAIH,EAAM,QAAQ,KAAK,CAACI,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBE,EAAA,SAASN,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/Card.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent as w, useSlots as i, openBlock as a, createElementBlock as r, unref as s, normalizeClass as n, createElementVNode as l, renderSlot as o, createCommentVNode as f } from "vue";
2
2
  const p = {
3
- class: "stash-card tw-border tw-rounded tw-shadow-md tw-inline-block tw-relative tw-bg-white",
3
+ class: "stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md",
4
4
  "data-test": "stash-card"
5
5
  }, h = /* @__PURE__ */ w({
6
6
  __name: "Card",
@@ -13,7 +13,7 @@ const p = {
13
13
  s(t)["top-left"] || s(t)["top-right"] ? (a(), r("div", {
14
14
  key: 0,
15
15
  "data-test": "card-actions",
16
- class: n([{ "tw-absolute tw-top-0 tw-w-full": c.detachActions }, "tw-flex tw-justify-between tw-items-start tw-flex-wrap tw-p-6"])
16
+ class: n([{ "tw-absolute tw-top-0 tw-w-full": c.detachActions }, "tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-p-6"])
17
17
  }, [
18
18
  l("div", null, [
19
19
  o(e.$slots, "top-left")
@@ -23,7 +23,7 @@ const p = {
23
23
  ])
24
24
  ], 2)) : f("", !0),
25
25
  l("div", {
26
- class: n({ "tw-flex tw-flex-col tw-gap-y-6 tw-h-full tw-mb-6": s(t).default })
26
+ class: n({ "tw-mb-6 tw-flex tw-h-full tw-flex-col tw-gap-y-6": s(t).default })
27
27
  }, [
28
28
  o(e.$slots, "default")
29
29
  ], 2)
package/dist/Card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { useSlots } from 'vue';\n\n export interface CardProps {\n /**\n * Detach the actions from the top of the card, making them absolute-positioned.\n * @default false\n */\n detachActions?: boolean;\n }\n\n const props = withDefaults(defineProps<CardProps>(), {\n detachActions: false,\n });\n\n const slots = useSlots();\n</script>\n\n<template>\n <article\n class=\"stash-card tw-border tw-rounded tw-shadow-md tw-inline-block tw-relative tw-bg-white\"\n data-test=\"stash-card\"\n >\n <div\n v-if=\"slots['top-left'] || slots['top-right']\"\n data-test=\"card-actions\"\n :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n class=\"tw-flex tw-justify-between tw-items-start tw-flex-wrap tw-p-6\"\n >\n <div>\n <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n <slot name=\"top-left\"></slot>\n </div>\n <div>\n <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n <slot name=\"top-right\"></slot>\n </div>\n </div>\n\n <div :class=\"{ 'tw-flex tw-flex-col tw-gap-y-6 tw-h-full tw-mb-6': slots['default'] }\">\n <!-- @slot Default slot, for rendering card subcomponents -->\n <slot></slot>\n </div>\n </article>\n</template>\n"],"names":["slots","useSlots"],"mappings":";;;;;;;;;;iBAeQA,IAAQC;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { useSlots } from 'vue';\n\n export interface CardProps {\n /**\n * Detach the actions from the top of the card, making them absolute-positioned.\n * @default false\n */\n detachActions?: boolean;\n }\n\n const props = withDefaults(defineProps<CardProps>(), {\n detachActions: false,\n });\n\n const slots = useSlots();\n</script>\n\n<template>\n <article\n class=\"stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md\"\n data-test=\"stash-card\"\n >\n <div\n v-if=\"slots['top-left'] || slots['top-right']\"\n data-test=\"card-actions\"\n :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n class=\"tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-p-6\"\n >\n <div>\n <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n <slot name=\"top-left\"></slot>\n </div>\n <div>\n <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n <slot name=\"top-right\"></slot>\n </div>\n </div>\n\n <div :class=\"{ 'tw-mb-6 tw-flex tw-h-full tw-flex-col tw-gap-y-6': slots['default'] }\">\n <!-- @slot Default slot, for rendering card subcomponents -->\n <slot></slot>\n </div>\n </article>\n</template>\n"],"names":["slots","useSlots"],"mappings":";;;;;;;;;;iBAeQA,IAAQC;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,13 +1,13 @@
1
1
  import { defineComponent as r, openBlock as e, createElementBlock as s, createElementVNode as n, toDisplayString as a, createCommentVNode as o } from "vue";
2
2
  const d = {
3
- class: "stash-card-header tw-px-6 tw-text-ice-900 tw-font-medium",
3
+ class: "stash-card-header tw-px-6 tw-font-medium tw-text-ice-900",
4
4
  "data-test": "stash-card-header"
5
5
  }, i = { class: "tw-text-base" }, l = {
6
6
  key: 0,
7
- class: "tw-mt-1.5 tw-mb-0"
7
+ class: "tw-mb-0 tw-mt-1.5"
8
8
  }, m = {
9
9
  key: 1,
10
- class: "tw-text-ice-700 tw-mt-1.5"
10
+ class: "tw-mt-1.5 tw-text-ice-700"
11
11
  }, u = /* @__PURE__ */ r({
12
12
  __name: "CardHeader",
13
13
  props: {
package/dist/CardMedia.js CHANGED
@@ -18,7 +18,7 @@ const h = {
18
18
  return (E, e) => (l(), c("div", h, [
19
19
  s.value || o.value ? (l(), c("div", {
20
20
  key: 0,
21
- class: n([d(r).placeholder, "tw-bg-ice-200 tw-flex tw-items-center tw-justify-center tw-rounded-t tw-w-full"])
21
+ class: n([d(r).placeholder, "tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-t tw-bg-ice-200"])
22
22
  }, [
23
23
  p(w, {
24
24
  name: "image",
@@ -1 +1 @@
1
- {"version":3,"file":"CardMedia.js","sources":["../src/components/CardMedia/CardMedia.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, useCssModule } from 'vue';\n\n import Icon from '../Icon/Icon.vue';\n\n export interface CardMediaProps {\n /**\n * The image source.\n */\n src: string;\n /**\n * The image alternative text.\n */\n alt?: string;\n }\n\n const isLoading = ref(true);\n\n const hasErrored = ref(false);\n\n const props = defineProps<CardMediaProps>();\n\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"stash-card-media\" data-test=\"stash-card-media\">\n <div\n v-if=\"isLoading || hasErrored\"\n :class=\"classes.placeholder\"\n class=\"tw-bg-ice-200 tw-flex tw-items-center tw-justify-center tw-rounded-t tw-w-full\"\n >\n <Icon name=\"image\" :class=\"classes.iconSize\" />\n </div>\n <img\n :src=\"props.src\"\n class=\"tw-w-full tw-rounded-t\"\n :alt=\"props.alt\"\n @load=\"() => (isLoading = false)\"\n @error=\"() => (hasErrored = true)\"\n />\n </div>\n</template>\n\n<style module>\n .placeholder {\n height: 300px;\n width: 100%;\n }\n\n .iconSize {\n width: 189px;\n height: 189px;\n }\n</style>\n"],"names":["isLoading","ref","hasErrored","classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;iBAgBQA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAItBE,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CardMedia.js","sources":["../src/components/CardMedia/CardMedia.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, useCssModule } from 'vue';\n\n import Icon from '../Icon/Icon.vue';\n\n export interface CardMediaProps {\n /**\n * The image source.\n */\n src: string;\n /**\n * The image alternative text.\n */\n alt?: string;\n }\n\n const isLoading = ref(true);\n\n const hasErrored = ref(false);\n\n const props = defineProps<CardMediaProps>();\n\n const classes = useCssModule();\n</script>\n\n<template>\n <div class=\"stash-card-media\" data-test=\"stash-card-media\">\n <div\n v-if=\"isLoading || hasErrored\"\n :class=\"classes.placeholder\"\n class=\"tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-t tw-bg-ice-200\"\n >\n <Icon name=\"image\" :class=\"classes.iconSize\" />\n </div>\n <img\n :src=\"props.src\"\n class=\"tw-w-full tw-rounded-t\"\n :alt=\"props.alt\"\n @load=\"() => (isLoading = false)\"\n @error=\"() => (hasErrored = true)\"\n />\n </div>\n</template>\n\n<style module>\n .placeholder {\n height: 300px;\n width: 100%;\n }\n\n .iconSize {\n width: 189px;\n height: 189px;\n }\n</style>\n"],"names":["isLoading","ref","hasErrored","classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;iBAgBQA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAItBE,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/Carousel.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent as Y, inject as b, reactive as M, ref as d, h as S, provide as A, onMounted as Ie, nextTick as Ee, onUnmounted as je, computed as xe, watch as ae, cloneVNode as _e, Fragment as j, useAttrs as Be, openBlock as x, createElementBlock as T, createVNode as De, unref as _, mergeProps as Re, withCtx as oe, createBlock as ke, createCommentVNode as Ae, renderList as le, renderSlot as Pe, createElementVNode as Te, normalizeClass as H } from "vue";
1
+ import { defineComponent as Y, inject as S, reactive as M, ref as d, h as b, provide as A, onMounted as Ie, nextTick as Ee, onUnmounted as je, computed as xe, watch as ae, cloneVNode as _e, Fragment as j, useAttrs as Be, openBlock as x, createElementBlock as T, createVNode as De, unref as _, mergeProps as Re, withCtx as oe, createBlock as ke, createCommentVNode as Ae, renderList as le, renderSlot as Pe, createElementVNode as Te, normalizeClass as H } from "vue";
2
2
  import { t as E } from "./locale.js";
3
3
  import { _ as Ve } from "./_plugin-vue_export-helper-dad06003.js";
4
4
  import "lodash-es/get";
@@ -219,8 +219,8 @@ function Ye(t = "", n = {}) {
219
219
  var We = Y({
220
220
  name: "ARIA",
221
221
  setup() {
222
- const t = b("config", M(Object.assign({}, p))), n = b("currentSlide", d(0)), e = b("slidesCount", d(0));
223
- return () => S("div", {
222
+ const t = S("config", M(Object.assign({}, p))), n = S("currentSlide", d(0)), e = S("slidesCount", d(0));
223
+ return () => b("div", {
224
224
  class: ["carousel__liveregion", "carousel__sr-only"],
225
225
  "aria-live": "polite",
226
226
  "aria-atomic": "true"
@@ -364,15 +364,15 @@ var We = Y({
364
364
  width: "100%"
365
365
  };
366
366
  });
367
- function be() {
367
+ function Se() {
368
368
  G(), V(), F(), R(), me();
369
369
  }
370
370
  Object.keys(Ce).forEach((a) => {
371
- ["modelValue"].includes(a) || ae(() => t[a], be);
371
+ ["modelValue"].includes(a) || ae(() => t[a], Se);
372
372
  }), ae(() => t.modelValue, (a) => {
373
373
  a !== r.value && L(Number(a));
374
374
  }), ae(v, F), e("before-init"), G();
375
- const Se = {
375
+ const be = {
376
376
  config: l,
377
377
  slidesCount: v,
378
378
  slideWidth: h,
@@ -389,14 +389,14 @@ var We = Y({
389
389
  updateSlidesData: F,
390
390
  updateSlideWidth: R,
391
391
  initDefaultConfigs: G,
392
- restartCarousel: be,
392
+ restartCarousel: Se,
393
393
  slideTo: L,
394
394
  next: z,
395
395
  prev: J,
396
396
  nav: he,
397
- data: Se
397
+ data: be
398
398
  });
399
- const K = n.default || n.slides, Q = n.addons, ye = M(Se);
399
+ const K = n.default || n.slides, Q = n.addons, ye = M(be);
400
400
  return () => {
401
401
  const a = Ne(K == null ? void 0 : K(ye)), m = (Q == null ? void 0 : Q(ye)) || [];
402
402
  a.forEach((ee, te) => ee.props.index = te);
@@ -414,13 +414,13 @@ var We = Y({
414
414
  f = [...ee, ...a, ...te];
415
415
  }
416
416
  c.value = a, v.value = Math.max(a.length, 1);
417
- const k = S("ol", {
417
+ const k = b("ol", {
418
418
  class: "carousel__track",
419
419
  style: Me.value,
420
420
  onMousedownCapture: l.mouseDrag ? ve : null,
421
421
  onTouchstartPassiveCapture: l.touchDrag ? ve : null
422
- }, f), Z = S("div", { class: "carousel__viewport" }, k);
423
- return S("section", {
422
+ }, f), Z = b("div", { class: "carousel__viewport" }, k);
423
+ return b("section", {
424
424
  ref: i,
425
425
  class: {
426
426
  carousel: !0,
@@ -434,7 +434,7 @@ var We = Y({
434
434
  tabindex: "0",
435
435
  onMouseenter: Oe,
436
436
  onMouseleave: Le
437
- }, [Z, m, S(We)]);
437
+ }, [Z, m, b(We)]);
438
438
  };
439
439
  }
440
440
  }), se;
@@ -451,11 +451,11 @@ function qe(t) {
451
451
  return t in se;
452
452
  }
453
453
  const ue = (t) => {
454
- const n = b("config", M(Object.assign({}, p))), e = String(t.name), o = `icon${e.charAt(0).toUpperCase() + e.slice(1)}`;
454
+ const n = S("config", M(Object.assign({}, p))), e = String(t.name), o = `icon${e.charAt(0).toUpperCase() + e.slice(1)}`;
455
455
  if (!e || typeof e != "string" || !qe(e))
456
456
  return;
457
- const s = Fe[e], i = S("path", { d: s }), c = n.i18n[o] || t.title || e, h = S("title", c);
458
- return S("svg", {
457
+ const s = Fe[e], i = b("path", { d: s }), c = n.i18n[o] || t.title || e, h = b("title", c);
458
+ return b("svg", {
459
459
  class: "carousel__icon",
460
460
  viewBox: "0 0 24 24",
461
461
  role: "img",
@@ -464,7 +464,7 @@ const ue = (t) => {
464
464
  };
465
465
  ue.props = { name: String, title: String };
466
466
  const Je = (t, { slots: n, attrs: e }) => {
467
- const { next: o, prev: s } = n || {}, i = b("config", M(Object.assign({}, p))), c = b("maxSlide", d(1)), h = b("minSlide", d(1)), v = b("currentSlide", d(1)), l = b("nav", {}), { dir: u, wrapAround: w, i18n: r } = i, g = u === "rtl", B = S("button", {
467
+ const { next: o, prev: s } = n || {}, i = S("config", M(Object.assign({}, p))), c = S("maxSlide", d(1)), h = S("minSlide", d(1)), v = S("currentSlide", d(1)), l = S("nav", {}), { dir: u, wrapAround: w, i18n: r } = i, g = u === "rtl", B = b("button", {
468
468
  type: "button",
469
469
  class: [
470
470
  "carousel__prev",
@@ -473,7 +473,7 @@ const Je = (t, { slots: n, attrs: e }) => {
473
473
  ],
474
474
  "aria-label": r.ariaPreviousSlide,
475
475
  onClick: l.prev
476
- }, (s == null ? void 0 : s()) || S(ue, { name: g ? "arrowRight" : "arrowLeft" })), C = S("button", {
476
+ }, (s == null ? void 0 : s()) || b(ue, { name: g ? "arrowRight" : "arrowLeft" })), C = b("button", {
477
477
  type: "button",
478
478
  class: [
479
479
  "carousel__next",
@@ -482,7 +482,7 @@ const Je = (t, { slots: n, attrs: e }) => {
482
482
  ],
483
483
  "aria-label": r.ariaNextSlide,
484
484
  onClick: l.next
485
- }, (o == null ? void 0 : o()) || S(ue, { name: g ? "arrowLeft" : "arrowRight" }));
485
+ }, (o == null ? void 0 : o()) || b(ue, { name: g ? "arrowLeft" : "arrowRight" }));
486
486
  return [B, C];
487
487
  };
488
488
  var Ke = Y({
@@ -498,13 +498,13 @@ var Ke = Y({
498
498
  }
499
499
  },
500
500
  setup(t, { slots: n }) {
501
- const e = b("config", M(Object.assign({}, p))), o = b("currentSlide", d(0)), s = b("slidesToScroll", d(0)), i = b("isSliding", d(!1)), c = () => t.index === o.value, h = () => t.index === o.value - 1, v = () => t.index === o.value + 1, l = () => {
501
+ const e = S("config", M(Object.assign({}, p))), o = S("currentSlide", d(0)), s = S("slidesToScroll", d(0)), i = S("isSliding", d(!1)), c = () => t.index === o.value, h = () => t.index === o.value - 1, v = () => t.index === o.value + 1, l = () => {
502
502
  const u = Math.floor(s.value), w = Math.ceil(s.value + e.itemsToShow - 1);
503
503
  return t.index >= u && t.index <= w;
504
504
  };
505
505
  return () => {
506
506
  var u;
507
- return S("li", {
507
+ return b("li", {
508
508
  style: { width: `${100 / e.itemsToShow}%` },
509
509
  class: {
510
510
  carousel__slide: !0,
@@ -618,7 +618,7 @@ const Qe = ["src", "title"], Ze = {
618
618
  onClick: (B) => c.value = g
619
619
  }, [
620
620
  Te("img", {
621
- class: H(["tw-rounded pagination-tile", [
621
+ class: H(["pagination-tile tw-rounded", [
622
622
  {
623
623
  "is-current-tile": c.value === g,
624
624
  "tw-rounded-full": o.paginationTileRadius === "full"
@@ -636,14 +636,14 @@ const Qe = ["src", "title"], Ze = {
636
636
  }, [
637
637
  (x(!0), T(j, null, le(u.slides, (r, g) => (x(), T("li", {
638
638
  key: r.imageUrl,
639
- class: H(["tw-rounded-full tw-inline-block", ["pagination-dot", [c.value === g ? "tw-bg-blue-500" : "tw-bg-blue-100"]]])
639
+ class: H(["tw-inline-block tw-rounded-full", ["pagination-dot", [c.value === g ? "tw-bg-blue-500" : "tw-bg-blue-100"]]])
640
640
  }, null, 2))), 128))
641
641
  ], 2))
642
642
  ], 64))
643
643
  ], 64));
644
644
  }
645
645
  });
646
- const rt = /* @__PURE__ */ Ve(nt, [["__scopeId", "data-v-3c1b8edd"]]);
646
+ const rt = /* @__PURE__ */ Ve(nt, [["__scopeId", "data-v-1590da01"]]);
647
647
  export {
648
648
  rt as default
649
649
  };