@leaflink/stash 42.5.0 → 42.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (223) hide show
  1. package/README.md +24 -3
  2. package/dist/ActionsDropdown.js +15 -20
  3. package/dist/ActionsDropdown.js.map +1 -1
  4. package/dist/AddressSelect.js +34 -45
  5. package/dist/AddressSelect.js.map +1 -1
  6. package/dist/Alert.js +11 -13
  7. package/dist/Alert.js.map +1 -1
  8. package/dist/AppNavigationItem.js +4 -6
  9. package/dist/AppNavigationItem.js.map +1 -1
  10. package/dist/AppTopbar.js +13 -15
  11. package/dist/AppTopbar.js.map +1 -1
  12. package/dist/ButtonGroup.js +12 -14
  13. package/dist/ButtonGroup.js.map +1 -1
  14. package/dist/CardMedia.js +9 -11
  15. package/dist/CardMedia.js.map +1 -1
  16. package/dist/Carousel.js +41 -44
  17. package/dist/Carousel.js.map +1 -1
  18. package/dist/Checkbox.js +9 -11
  19. package/dist/Checkbox.js.map +1 -1
  20. package/dist/ChevronToggle.js +2 -4
  21. package/dist/ChevronToggle.js.map +1 -1
  22. package/dist/Chip.js +4 -6
  23. package/dist/Chip.js.map +1 -1
  24. package/dist/ContextSwitcher.js +12 -17
  25. package/dist/ContextSwitcher.js.map +1 -1
  26. package/dist/Copy.js +19 -24
  27. package/dist/Copy.js.map +1 -1
  28. package/dist/CurrencyInput.js +8 -13
  29. package/dist/CurrencyInput.js.map +1 -1
  30. package/dist/DataView.js +48 -59
  31. package/dist/DataView.js.map +1 -1
  32. package/dist/DataViewFilters.js +87 -97
  33. package/dist/DataViewFilters.js.map +1 -1
  34. package/dist/DataViewSortButton.js +14 -18
  35. package/dist/DataViewSortButton.js.map +1 -1
  36. package/dist/DataViewToolbar.js +12 -14
  37. package/dist/DataViewToolbar.js.map +1 -1
  38. package/dist/DatePicker.js +8 -18
  39. package/dist/DatePicker.js.map +1 -1
  40. package/dist/Dialog.js +6 -9
  41. package/dist/Dialog.js.map +1 -1
  42. package/dist/Dropdown.js +15 -20
  43. package/dist/Dropdown.js.map +1 -1
  44. package/dist/EmptyState.js +10 -13
  45. package/dist/EmptyState.js.map +1 -1
  46. package/dist/Field.js +3 -6
  47. package/dist/Field.js.map +1 -1
  48. package/dist/{Field.vue_vue_type_script_setup_true_lang-c864abd3.js → Field.vue_vue_type_script_setup_true_lang-475832fe.js} +2 -2
  49. package/dist/{Field.vue_vue_type_script_setup_true_lang-c864abd3.js.map → Field.vue_vue_type_script_setup_true_lang-475832fe.js.map} +1 -1
  50. package/dist/FileUpload.js +27 -30
  51. package/dist/FileUpload.js.map +1 -1
  52. package/dist/FilterChip.js +10 -13
  53. package/dist/FilterChip.js.map +1 -1
  54. package/dist/FilterDrawerItem.js +5 -8
  55. package/dist/FilterDrawerItem.js.map +1 -1
  56. package/dist/FilterDropdown.js +73 -88
  57. package/dist/FilterDropdown.js.map +1 -1
  58. package/dist/FilterSelect.js +15 -18
  59. package/dist/FilterSelect.js.map +1 -1
  60. package/dist/Filters.js +67 -78
  61. package/dist/Filters.js.map +1 -1
  62. package/dist/HttpError.js +4 -7
  63. package/dist/HttpError.js.map +1 -1
  64. package/dist/Icon.js +236 -14
  65. package/dist/Icon.js.map +1 -1
  66. package/dist/Icon.vue.d.ts +2 -2
  67. package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js +11 -0
  68. package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js.map +1 -0
  69. package/dist/IconLabel.js +4 -6
  70. package/dist/IconLabel.js.map +1 -1
  71. package/dist/Illustration.js +6 -8
  72. package/dist/Illustration.js.map +1 -1
  73. package/dist/Image.js +39 -49
  74. package/dist/Image.js.map +1 -1
  75. package/dist/InlineEdit.js +10 -12
  76. package/dist/InlineEdit.js.map +1 -1
  77. package/dist/Input.js +50 -55
  78. package/dist/Input.js.map +1 -1
  79. package/dist/InputOptions.js +20 -29
  80. package/dist/InputOptions.js.map +1 -1
  81. package/dist/Label.js +1 -4
  82. package/dist/Label.js.map +1 -1
  83. package/dist/LicenseChip.js +7 -9
  84. package/dist/LicenseChip.js.map +1 -1
  85. package/dist/ListItem.js +11 -13
  86. package/dist/ListItem.js.map +1 -1
  87. package/dist/ListView.js +47 -58
  88. package/dist/ListView.js.map +1 -1
  89. package/dist/Metric.js +6 -8
  90. package/dist/Metric.js.map +1 -1
  91. package/dist/Modal.js +16 -19
  92. package/dist/Modal.js.map +1 -1
  93. package/dist/Modals.js +16 -26
  94. package/dist/Modals.js.map +1 -1
  95. package/dist/ModalsPlugin.js +12 -22
  96. package/dist/ModalsPlugin.js.map +1 -1
  97. package/dist/ObfuscateText.js +7 -9
  98. package/dist/ObfuscateText.js.map +1 -1
  99. package/dist/PageNavigation.js +25 -29
  100. package/dist/PageNavigation.js.map +1 -1
  101. package/dist/Paginate.js +29 -31
  102. package/dist/Paginate.js.map +1 -1
  103. package/dist/QuickAction.js +13 -15
  104. package/dist/QuickAction.js.map +1 -1
  105. package/dist/RadioGroup.js +86 -89
  106. package/dist/RadioGroup.js.map +1 -1
  107. package/dist/SearchBar.js +18 -20
  108. package/dist/SearchBar.js.map +1 -1
  109. package/dist/Select.js +13 -23
  110. package/dist/Select.js.map +1 -1
  111. package/dist/SelectStatus.js +26 -36
  112. package/dist/SelectStatus.js.map +1 -1
  113. package/dist/Step.js +19 -21
  114. package/dist/Step.js.map +1 -1
  115. package/dist/Switch.js +8 -10
  116. package/dist/Switch.js.map +1 -1
  117. package/dist/Tab.js +25 -30
  118. package/dist/Tab.js.map +1 -1
  119. package/dist/Table.js +19 -21
  120. package/dist/Table.js.map +1 -1
  121. package/dist/TableCell.js +21 -22
  122. package/dist/TableCell.js.map +1 -1
  123. package/dist/TableHeaderCell.js +4 -4
  124. package/dist/TableHeaderRow.js +7 -9
  125. package/dist/TableHeaderRow.js.map +1 -1
  126. package/dist/TableRow.js +22 -24
  127. package/dist/TableRow.js.map +1 -1
  128. package/dist/Tabs.js +11 -16
  129. package/dist/Tabs.js.map +1 -1
  130. package/dist/{Tabs.vue_vue_type_script_setup_true_lang-ba383fda.js → Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js} +3 -3
  131. package/dist/{Tabs.vue_vue_type_script_setup_true_lang-ba383fda.js.map → Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js.map} +1 -1
  132. package/dist/Textarea.js +10 -13
  133. package/dist/Textarea.js.map +1 -1
  134. package/dist/Toast.js +8 -10
  135. package/dist/Toast.js.map +1 -1
  136. package/dist/Toasts.js +14 -25
  137. package/dist/Toasts.js.map +1 -1
  138. package/dist/ToastsPlugin.js +14 -25
  139. package/dist/ToastsPlugin.js.map +1 -1
  140. package/dist/components.css +1 -1
  141. package/dist/index.js +53 -62
  142. package/dist/index.js.map +1 -1
  143. package/dist/locale.js +12 -15
  144. package/dist/locale.js.map +1 -1
  145. package/dist/{searchFuzzy-13c124f8.js → searchFuzzy-74a7de1c.js} +2 -2
  146. package/dist/{searchFuzzy-13c124f8.js.map → searchFuzzy-74a7de1c.js.map} +1 -1
  147. package/dist/storage.js +6 -11
  148. package/dist/storage.js.map +1 -1
  149. package/dist/tooltip.js +21 -26
  150. package/dist/tooltip.js.map +1 -1
  151. package/dist/useGoogleMaps.js +91 -226
  152. package/dist/useGoogleMaps.js.map +1 -1
  153. package/dist/useModals.js +21 -31
  154. package/dist/useModals.js.map +1 -1
  155. package/dist/useSearch.js +17 -22
  156. package/dist/useSearch.js.map +1 -1
  157. package/dist/useToasts.js +25 -36
  158. package/dist/useToasts.js.map +1 -1
  159. package/dist/useValidation.js +79 -108
  160. package/dist/useValidation.js.map +1 -1
  161. package/dist/utils/calculateElementOverflow.js +9 -14
  162. package/dist/utils/calculateElementOverflow.js.map +1 -1
  163. package/dist/utils/createQueryString.js +9 -15
  164. package/dist/utils/createQueryString.js.map +1 -1
  165. package/dist/utils/helpers.js +46 -59
  166. package/dist/utils/helpers.js.map +1 -1
  167. package/dist/utils/i18n.js +17 -20
  168. package/dist/utils/i18n.js.map +1 -1
  169. package/dist/utils/searchFuzzy.js +7 -12
  170. package/dist/utils/searchFuzzy.js.map +1 -1
  171. package/dist/utils/storage.js +10 -15
  172. package/dist/utils/storage.js.map +1 -1
  173. package/dist/viewable.js +26 -34
  174. package/dist/viewable.js.map +1 -1
  175. package/package.json +2 -4
  176. package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js +0 -243
  177. package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js.map +0 -1
  178. package/dist/_MapCache-65811284.js +0 -188
  179. package/dist/_MapCache-65811284.js.map +0 -1
  180. package/dist/_Uint8Array-06e4d083.js +0 -66
  181. package/dist/_Uint8Array-06e4d083.js.map +0 -1
  182. package/dist/_baseAssignValue-dd1499b4.js +0 -22
  183. package/dist/_baseAssignValue-dd1499b4.js.map +0 -1
  184. package/dist/_baseIsEqual-d594c87f.js +0 -171
  185. package/dist/_baseIsEqual-d594c87f.js.map +0 -1
  186. package/dist/_createCompounder-ae01a723.js +0 -245
  187. package/dist/_createCompounder-ae01a723.js.map +0 -1
  188. package/dist/_getAllKeys-5e735d41.js +0 -44
  189. package/dist/_getAllKeys-5e735d41.js.map +0 -1
  190. package/dist/_getPrototype-3e6fccd6.js +0 -7
  191. package/dist/_getPrototype-3e6fccd6.js.map +0 -1
  192. package/dist/_getTag-4db47fa6.js +0 -47
  193. package/dist/_getTag-4db47fa6.js.map +0 -1
  194. package/dist/_initCloneObject-161353b9.js +0 -88
  195. package/dist/_initCloneObject-161353b9.js.map +0 -1
  196. package/dist/_overArg-6d920d99.js +0 -9
  197. package/dist/_overArg-6d920d99.js.map +0 -1
  198. package/dist/capitalize-667d9f60.js +0 -42
  199. package/dist/capitalize-667d9f60.js.map +0 -1
  200. package/dist/cloneDeep-5bc375b0.js +0 -146
  201. package/dist/cloneDeep-5bc375b0.js.map +0 -1
  202. package/dist/debounce-6aca1ca9.js +0 -86
  203. package/dist/debounce-6aca1ca9.js.map +0 -1
  204. package/dist/get-27d90892.js +0 -66
  205. package/dist/get-27d90892.js.map +0 -1
  206. package/dist/identity-452d03fd.js +0 -20
  207. package/dist/identity-452d03fd.js.map +0 -1
  208. package/dist/isArrayLike-09233e52.js +0 -61
  209. package/dist/isArrayLike-09233e52.js.map +0 -1
  210. package/dist/isEmpty-2fbad344.js +0 -23
  211. package/dist/isEmpty-2fbad344.js.map +0 -1
  212. package/dist/isEqual-fca467fb.js +0 -8
  213. package/dist/isEqual-fca467fb.js.map +0 -1
  214. package/dist/isObjectLike-54341556.js +0 -39
  215. package/dist/isObjectLike-54341556.js.map +0 -1
  216. package/dist/isPlainObject-55c7f916.js +0 -16
  217. package/dist/isPlainObject-55c7f916.js.map +0 -1
  218. package/dist/merge-b14fad9d.js +0 -124
  219. package/dist/merge-b14fad9d.js.map +0 -1
  220. package/dist/toString-7d5bf363.js +0 -29
  221. package/dist/toString-7d5bf363.js.map +0 -1
  222. package/dist/uniqueId-847efe53.js +0 -10
  223. package/dist/uniqueId-847efe53.js.map +0 -1
package/README.md CHANGED
@@ -294,11 +294,18 @@ import { config, flushPromises } from '@vue/test-utils';
294
294
  config.global.plugins = [[stash, { googleMapsApiKey: 'my-key' }]];
295
295
  ```
296
296
 
297
- For example: if you are using the `AddressSelect` component, you need to mock the `useGoogleMaps` composable.
297
+ ### Mocking Google Maps API when testing AddressSelect
298
298
 
299
- ```ts
300
- // mocks/@leaflink/stash/useGoogleMaps.js
299
+ When testing components that use the `AddressSelect` component or `useGoogleMaps` composable, it's necessary to mock it.
300
+ This is because the `useGoogleMaps` composable uses the `google.maps` global object, which is not available in the
301
+ testing environment.
302
+
303
+ The easiest way to do this is to mock the useGoogleMaps composable and avoid trying to mock the Google Maps API directly.
301
304
 
305
+ Create a file in the `__mocks__` directory of the `@leaflink/stash` package, and mock the `useGoogleMaps` composable.
306
+
307
+ ```ts
308
+ /* __mocks__/@leaflink/stash/useGoogleMaps.js */
302
309
  export default function () {
303
310
  return {
304
311
  getPlaceDetails: vi.fn().mockResolvedValue({
@@ -314,6 +321,20 @@ export default function () {
314
321
  },
315
322
  };
316
323
  }
324
+
325
+
326
+ /* tests/setup-env.ts */
327
+ import '@leaflink/dom-testing-utils/setup-env'; // to ensure lodash-es/debounce is mocked properly
328
+ vi.mock('@leaflink/stash/useGoogleMaps');
329
+
330
+
331
+ /* src/components/YourComponent.spec.ts */
332
+ const user = userEvent.setup();
333
+ // Start typing in the AddressSelect select input to trigger the useGoogleMaps mock response
334
+ await user.type(screen.getByPlaceholderText('Search'), 'type anything');
335
+ // The mock response will be used to populate the options - so it will always be the same
336
+ // (id of 1 from the getPlacePredictions mock)
337
+ await user.selectOptions(screen.getByLabelText('Bank address'), ['1']);
317
338
  ```
318
339
 
319
340
  It's also encouraged the use of [@leaflink/dom-testing-utils](https://github.com/LeafLink/dom-testing-utils) for testing utilities like global and local test setup, mocking endpoints, clean up components, get selected options and more. Checkout the [documention](https://github.com/LeafLink/dom-testing-utils) for learning more about this package.
@@ -4,23 +4,18 @@ import g from "./Button.js";
4
4
  import x from "./Dropdown.js";
5
5
  import B from "./Icon.js";
6
6
  import { _ as D } from "./_plugin-vue_export-helper-dad06003.js";
7
- import "./get-27d90892.js";
8
- import "./isObjectLike-54341556.js";
9
- import "./toString-7d5bf363.js";
10
- import "./_MapCache-65811284.js";
7
+ import "lodash-es/get";
11
8
  import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
12
9
  import "./constants.js";
13
10
  import "./clickoutside.js";
14
11
  import "./utils/calculateElementOverflow.js";
15
12
  import "./utils/helpers.js";
16
- import "./capitalize-667d9f60.js";
17
- import "./_createCompounder-ae01a723.js";
18
- import "./isPlainObject-55c7f916.js";
19
- import "./_getPrototype-3e6fccd6.js";
20
- import "./_overArg-6d920d99.js";
21
- import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
22
- import "./uniqueId-847efe53.js";
13
+ import "lodash-es/camelCase";
14
+ import "lodash-es/isFinite";
15
+ import "lodash-es/isPlainObject";
16
+ import "lodash-es/uniqueId";
23
17
  import "./index-79ce320f.js";
18
+ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
24
19
  const y = /* @__PURE__ */ c({
25
20
  name: "ll-actions-dropdown",
26
21
  __name: "ActionsDropdown",
@@ -30,20 +25,20 @@ const y = /* @__PURE__ */ c({
30
25
  contentClass: { default: "" },
31
26
  buttonText: { default: () => C("ll.actions") }
32
27
  },
33
- setup(r) {
34
- const o = r, t = p();
35
- return (i, A) => (m(), u(x, {
28
+ setup(l) {
29
+ const o = l, t = p();
30
+ return (d, A) => (m(), u(x, {
36
31
  align: o.align,
37
32
  "content-class": [n(t).dropdownContent, o.contentClass],
38
33
  class: s(n(t).actionsDropdown)
39
34
  }, f({
40
- toggle: e(({ isActive: l, toggle: d }) => [
35
+ toggle: e(({ isActive: r, toggle: i }) => [
41
36
  a(g, {
42
37
  class: s(["button flex align-middle align-justify w-full border border-blue text-blue", [n(t).actionButton, { [n(t).disabled]: o.disabled }]]),
43
38
  secondary: "",
44
- "aria-expanded": l.toString(),
39
+ "aria-expanded": r.toString(),
45
40
  disabled: o.disabled,
46
- onClick: d
41
+ onClick: i
47
42
  }, {
48
43
  default: e(() => [
49
44
  _(b(o.buttonText) + " ", 1),
@@ -60,7 +55,7 @@ const y = /* @__PURE__ */ c({
60
55
  o.disabled ? void 0 : {
61
56
  name: "default",
62
57
  fn: e(() => [
63
- w(i.$slots, "default")
58
+ w(d.$slots, "default")
64
59
  ]),
65
60
  key: "0"
66
61
  }
@@ -73,8 +68,8 @@ const y = /* @__PURE__ */ c({
73
68
  actionsDropdown: M
74
69
  }, h = {
75
70
  $style: T
76
- }, oo = /* @__PURE__ */ D(y, [["__cssModules", h]]);
71
+ }, U = /* @__PURE__ */ D(y, [["__cssModules", h]]);
77
72
  export {
78
- oo as default
73
+ U as default
79
74
  };
80
75
  //# sourceMappingURL=ActionsDropdown.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ActionsDropdown.js","sources":["../src/components/ActionsDropdown/ActionsDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { useCssModule } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-actions-dropdown',\n });\n\n export interface ActionsDropdownProps {\n /**\n * Used to position the dropdown relative to target\n * Options: left, right\n */\n align?: 'left' | 'right';\n /**\n * Indicates whether the trigger button is disabled or not\n */\n disabled?: boolean;\n /**\n * Class to be applied to the dropdown content\n */\n contentClass?: string;\n /**\n * Text to be displayed on the trigger button\n */\n buttonText?: string;\n }\n\n const props = withDefaults(defineProps<ActionsDropdownProps>(), {\n align: 'left',\n disabled: false,\n contentClass: '',\n buttonText: () => t('ll.actions'),\n });\n\n const classes = useCssModule();\n</script>\n\n<template>\n <Dropdown\n :align=\"props.align\"\n :content-class=\"[classes.dropdownContent, props.contentClass]\"\n :class=\"classes.actionsDropdown\"\n >\n <template #toggle=\"{ isActive, toggle }\">\n <Button\n class=\"button flex align-middle align-justify w-full border border-blue text-blue\"\n secondary\n :aria-expanded=\"isActive.toString()\"\n :class=\"[classes.actionButton, { [classes.disabled]: props.disabled }]\"\n :disabled=\"props.disabled\"\n @click=\"toggle\"\n >\n {{ props.buttonText }} <Icon class=\"tw-ml-1.5\" name=\"caret-down\" />\n </Button>\n </template>\n\n <template v-if=\"!props.disabled\" #default>\n <!-- @slot Dropdown content -->\n <slot></slot>\n </template>\n </Dropdown>\n</template>\n\n<style module>\n .actionButton {\n min-width: 156px;\n white-space: normal;\n }\n\n .actionButton:hover {\n background-color: var(--color-blue-100);\n border-color: var(--color-blue) !important;\n }\n\n .disabled {\n background-color: var(--color-ice-100) !important;\n border-color: var(--color-ice-500) !important;\n color: var(--color-ice-500) !important;\n }\n\n .dropdownContent {\n margin-top: 4px;\n }\n\n .dropdownContent:global(.dropdown__content) {\n margin-left: 0;\n margin-right: 0;\n max-width: 90vw;\n }\n\n .dropdownContent:global(.dropdown__content)::after {\n display: none;\n }\n\n @media screen(md) {\n .actionsDropdown {\n min-width: 156px;\n }\n\n .dropdownContent:global(.dropdown__content) {\n min-width: 156px;\n }\n }\n</style>\n"],"names":["classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuCQA,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ActionsDropdown.js","sources":["../src/components/ActionsDropdown/ActionsDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { useCssModule } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-actions-dropdown',\n });\n\n export interface ActionsDropdownProps {\n /**\n * Used to position the dropdown relative to target\n * Options: left, right\n */\n align?: 'left' | 'right';\n /**\n * Indicates whether the trigger button is disabled or not\n */\n disabled?: boolean;\n /**\n * Class to be applied to the dropdown content\n */\n contentClass?: string;\n /**\n * Text to be displayed on the trigger button\n */\n buttonText?: string;\n }\n\n const props = withDefaults(defineProps<ActionsDropdownProps>(), {\n align: 'left',\n disabled: false,\n contentClass: '',\n buttonText: () => t('ll.actions'),\n });\n\n const classes = useCssModule();\n</script>\n\n<template>\n <Dropdown\n :align=\"props.align\"\n :content-class=\"[classes.dropdownContent, props.contentClass]\"\n :class=\"classes.actionsDropdown\"\n >\n <template #toggle=\"{ isActive, toggle }\">\n <Button\n class=\"button flex align-middle align-justify w-full border border-blue text-blue\"\n secondary\n :aria-expanded=\"isActive.toString()\"\n :class=\"[classes.actionButton, { [classes.disabled]: props.disabled }]\"\n :disabled=\"props.disabled\"\n @click=\"toggle\"\n >\n {{ props.buttonText }} <Icon class=\"tw-ml-1.5\" name=\"caret-down\" />\n </Button>\n </template>\n\n <template v-if=\"!props.disabled\" #default>\n <!-- @slot Dropdown content -->\n <slot></slot>\n </template>\n </Dropdown>\n</template>\n\n<style module>\n .actionButton {\n min-width: 156px;\n white-space: normal;\n }\n\n .actionButton:hover {\n background-color: var(--color-blue-100);\n border-color: var(--color-blue) !important;\n }\n\n .disabled {\n background-color: var(--color-ice-100) !important;\n border-color: var(--color-ice-500) !important;\n color: var(--color-ice-500) !important;\n }\n\n .dropdownContent {\n margin-top: 4px;\n }\n\n .dropdownContent:global(.dropdown__content) {\n margin-left: 0;\n margin-right: 0;\n max-width: 90vw;\n }\n\n .dropdownContent:global(.dropdown__content)::after {\n display: none;\n }\n\n @media screen(md) {\n .actionsDropdown {\n min-width: 156px;\n }\n\n .dropdownContent:global(.dropdown__content) {\n min-width: 156px;\n }\n }\n</style>\n"],"names":["classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuCQA,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,44 +1,33 @@
1
1
  import { defineComponent as M, useSlots as S, inject as A, computed as h, ref as n, watch as T, openBlock as I, createBlock as P, unref as y, createSlots as j, withCtx as k, renderSlot as D } from "vue";
2
- import { d as G } from "./debounce-6aca1ca9.js";
3
- import { u as K } from "./uniqueId-847efe53.js";
2
+ import G from "lodash-es/debounce";
3
+ import K from "lodash-es/uniqueId";
4
4
  import C from "./useGoogleMaps.js";
5
5
  import { DEBOUNCE as U } from "./constants.js";
6
6
  import q from "./Select.js";
7
- import "./_MapCache-65811284.js";
8
- import "./isObjectLike-54341556.js";
9
- import "./toString-7d5bf363.js";
10
- import "./_baseAssignValue-dd1499b4.js";
11
- import "./identity-452d03fd.js";
12
- import "./_getAllKeys-5e735d41.js";
13
- import "./_Uint8Array-06e4d083.js";
14
- import "./isArrayLike-09233e52.js";
15
- import "./_getTag-4db47fa6.js";
16
- import "./_overArg-6d920d99.js";
17
- import "./_baseIsEqual-d594c87f.js";
18
- import "./get-27d90892.js";
19
- import "./isEmpty-2fbad344.js";
20
- import "./isEqual-fca467fb.js";
21
- import "./isPlainObject-55c7f916.js";
22
- import "./_getPrototype-3e6fccd6.js";
7
+ import "lodash-es/keyBy";
8
+ import "lodash-es/isEmpty";
9
+ import "lodash-es/isEqual";
10
+ import "lodash-es/isPlainObject";
23
11
  import "./useSearch.js";
24
- import "./searchFuzzy-13c124f8.js";
12
+ import "lodash-es/get";
13
+ import "./searchFuzzy-74a7de1c.js";
25
14
  import "./_commonjsHelpers-10dfc225.js";
26
15
  import "./utils/helpers.js";
27
- import "./capitalize-667d9f60.js";
28
- import "./_createCompounder-ae01a723.js";
16
+ import "lodash-es/camelCase";
17
+ import "lodash-es/isFinite";
29
18
  import "./clickoutside.js";
30
19
  import "./MenusPlugin-5e93f0a5.js";
31
20
  import "./Chip.js";
32
21
  import "./colors-13e95ebf.js";
33
22
  import "./utils/colorScheme.js";
34
23
  import "./Icon.js";
35
- import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
36
24
  import "./index-79ce320f.js";
25
+ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
37
26
  import "./_plugin-vue_export-helper-dad06003.js";
38
- import "./Field.vue_vue_type_script_setup_true_lang-c864abd3.js";
27
+ import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
39
28
  import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
40
29
  import "./locale.js";
41
- const _ = "address-select-", Me = /* @__PURE__ */ M({
30
+ const _ = "address-select-", ve = /* @__PURE__ */ M({
42
31
  __name: "AddressSelect",
43
32
  props: {
44
33
  apiKey: { default: void 0 },
@@ -59,38 +48,38 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
59
48
  preventEmpty: { type: Boolean, default: !1 }
60
49
  },
61
50
  emits: ["update:modelValue", "error"],
62
- setup(g, { emit: a }) {
63
- const t = g, V = S(), d = A("stashOptions"), p = h(() => t.apiKey || (d == null ? void 0 : d.googleMapsApiKey));
64
- if (!p.value)
51
+ setup(g, { emit: l }) {
52
+ const t = g, V = S(), d = A("stashOptions"), u = h(() => t.apiKey || (d == null ? void 0 : d.googleMapsApiKey));
53
+ if (!u.value)
65
54
  throw new Error("Google Maps API key is required");
66
- const { getPlaceDetails: b, getPlacePredictions: x } = C(p.value), i = n(!1), r = n(), l = n(), E = G(w, t.debounceTime), s = h(() => {
67
- var e, m, u, c, f, v;
55
+ const { getPlaceDetails: b, getPlacePredictions: x } = C(u.value), i = n(!1), a = n(), r = n(), E = G(w, t.debounceTime), s = h(() => {
56
+ var e, p, m, c, f, v;
68
57
  return [
69
- [(e = t.modelValue) == null ? void 0 : e.street_address, (m = t.modelValue) == null ? void 0 : m.extended_address].filter(Boolean).join(" "),
70
- (u = t.modelValue) == null ? void 0 : u.city,
58
+ [(e = t.modelValue) == null ? void 0 : e.street_address, (p = t.modelValue) == null ? void 0 : p.extended_address].filter(Boolean).join(" "),
59
+ (m = t.modelValue) == null ? void 0 : m.city,
71
60
  [(c = t.modelValue) == null ? void 0 : c.state, (f = t.modelValue) == null ? void 0 : f.postal_code].filter(Boolean).join(" "),
72
61
  (v = t.modelValue) == null ? void 0 : v.country
73
62
  ].filter(Boolean).join(", ");
74
63
  });
75
64
  T(() => t.modelValue, () => {
76
65
  var o;
77
- if (s.value && !((o = r.value) != null && o.length)) {
66
+ if (s.value && !((o = a.value) != null && o.length)) {
78
67
  const e = {
79
68
  id: t.modelValue.place_id || K(_),
80
69
  name: s.value,
81
70
  address: t.modelValue
82
71
  };
83
- r.value = [e], l.value = e;
72
+ a.value = [e], r.value = e;
84
73
  } else
85
- s.value || (l.value = void 0, r.value = []);
74
+ s.value || (r.value = void 0, a.value = []);
86
75
  }, { immediate: !0 });
87
76
  async function w(o) {
88
77
  i.value = !0;
89
78
  try {
90
- r.value = await x(o);
79
+ a.value = await x(o);
91
80
  } catch (e) {
92
- if (r.value = [], e != null && e.isGoogleMapsError)
93
- a("error", e);
81
+ if (a.value = [], e != null && e.isGoogleMapsError)
82
+ l("error", e);
94
83
  else
95
84
  throw e;
96
85
  } finally {
@@ -98,8 +87,8 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
98
87
  }
99
88
  }
100
89
  async function B(o) {
101
- if (l.value = o, !o) {
102
- a("update:modelValue", {
90
+ if (r.value = o, !o) {
91
+ l("update:modelValue", {
103
92
  street_address: void 0,
104
93
  extended_address: void 0,
105
94
  city: void 0,
@@ -110,15 +99,15 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
110
99
  return;
111
100
  }
112
101
  if (o.id.startsWith(_) && o.address) {
113
- a("update:modelValue", o.address);
102
+ l("update:modelValue", o.address);
114
103
  return;
115
104
  }
116
105
  try {
117
106
  const e = await b(o.id);
118
- a("update:modelValue", e);
107
+ l("update:modelValue", e);
119
108
  } catch (e) {
120
109
  if (e != null && e.isGoogleMapsError)
121
- a("error", e);
110
+ l("error", e);
122
111
  else
123
112
  throw e;
124
113
  }
@@ -128,12 +117,12 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
128
117
  "data-test": "select|address",
129
118
  disabled: t.disabled,
130
119
  loading: i.value,
131
- options: r.value,
120
+ options: a.value,
132
121
  placeholder: t.placeholder,
133
122
  label: t.label,
134
123
  "hint-text": t.hintText,
135
124
  error: t.errorText,
136
- "model-value": l.value,
125
+ "model-value": r.value,
137
126
  "prevent-empty": t.preventEmpty,
138
127
  "disable-filtering": "",
139
128
  onSearch: y(E),
@@ -150,6 +139,6 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
150
139
  }
151
140
  });
152
141
  export {
153
- Me as default
142
+ ve as default
154
143
  };
155
144
  //# sourceMappingURL=AddressSelect.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AddressSelect.js","sources":["../src/components/AddressSelect/AddressSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import debounce from 'lodash-es/debounce';\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useSlots, watch } from 'vue';\n\n import { StashProvideState } from '../../../types/misc';\n import useGoogleMaps, { type Address, type AddressOption } from '../../composables/useGoogleMaps/useGoogleMaps';\n import { DEBOUNCE } from '../../constants';\n import Select from '../Select/Select.vue';\n\n export interface AddressSelectProps {\n /**\n * Google Maps API Key. This takes precedence over the key defined in stashOptions\n */\n apiKey?: string;\n /**\n * Wether the Select is disabled or not\n */\n disabled?: boolean;\n /**\n * Select placeholder\n */\n placeholder?: string;\n /**\n * Debounce time in milliseconds to perform API requests on search\n */\n debounceTime?: number;\n /**\n * Model value address\n */\n modelValue: Address;\n /**\n * Hint text to be passed down to Select component\n */\n hintText?: string;\n /**\n * Error text to be passed down to Select component\n */\n errorText?: string;\n /**\n * Label text to be passed down to Select component\n */\n label?: string;\n /**\n * Disallows values from being de-selected\n */\n preventEmpty?: boolean;\n }\n\n const props = withDefaults(defineProps<AddressSelectProps>(), {\n disabled: false,\n placeholder: 'Type an address',\n debounceTime: DEBOUNCE.MEDIUM,\n modelValue: () => ({\n street_address: undefined,\n extended_address: undefined,\n city: undefined,\n state: undefined,\n postal_code: undefined,\n country: undefined,\n }),\n hintText: undefined,\n errorText: undefined,\n label: undefined,\n preventEmpty: false,\n apiKey: undefined,\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the model value changes\n */\n (e: 'update:modelValue', value: Address): void,\n /**\n * Emitted when an error occurs while reaching out to Google's API\n */\n (e: 'error', value: unknown): void\n }>();\n\n const slots = useSlots();\n const stashOptions = inject<StashProvideState>('stashOptions');\n\n const googleMapsApiKey = computed(() => props.apiKey || stashOptions?.googleMapsApiKey);\n\n if (!googleMapsApiKey.value) {\n throw new Error('Google Maps API key is required');\n }\n\n const { getPlaceDetails, getPlacePredictions } = useGoogleMaps(googleMapsApiKey.value);\n\n const ID_PREFIX = 'address-select-';\n\n const isLoading = ref(false);\n const options = ref<Array<AddressOption>>();\n const internalValue = ref<AddressOption>();\n\n const debouncedSearch = debounce(search, props.debounceTime);\n\n const formattedAddress = computed(() => {\n const formattedAddress = [\n [props.modelValue?.street_address, props.modelValue?.extended_address].filter(Boolean).join(' '),\n props.modelValue?.city,\n [props.modelValue?.state, props.modelValue?.postal_code].filter(Boolean).join(' '),\n props.modelValue?.country\n ].filter(Boolean).join(', ');\n\n return formattedAddress;\n });\n\n // When we don't have options just yet, we need to create them on our own\n watch(() => props.modelValue, () => {\n if (formattedAddress.value && !options.value?.length) {\n const option = {\n id: props.modelValue.place_id || uniqueId(ID_PREFIX),\n name: formattedAddress.value,\n address: props.modelValue,\n };\n\n options.value = [option];\n internalValue.value = option;\n } else if (!formattedAddress.value) {\n internalValue.value = undefined;\n options.value = [];\n }\n }, { immediate: true });\n\n async function search(query: string) {\n isLoading.value = true;\n\n try {\n options.value = await getPlacePredictions(query);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } catch (error: any) {\n options.value = [];\n if (error?.isGoogleMapsError) {\n emit('error', error);\n } else {\n throw error;\n }\n } finally {\n isLoading.value = false;\n }\n }\n\n async function select(option: AddressOption) {\n internalValue.value = option;\n\n // When an option is de-selected, the option will be undefined\n if (!option) {\n emit('update:modelValue', {\n street_address: undefined,\n extended_address: undefined,\n city: undefined,\n state: undefined,\n postal_code: undefined,\n country: undefined,\n });\n return;\n }\n\n // When an option does not have a google place id, we don't want to fetch it's details\n if (option.id.startsWith(ID_PREFIX) && option.address) {\n emit('update:modelValue', option.address);\n return;\n }\n\n try {\n const address = await getPlaceDetails(option.id);\n emit('update:modelValue', address);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } catch (error: any) {\n if (error?.isGoogleMapsError) {\n emit('error', error);\n } else {\n throw error;\n }\n }\n }\n</script>\n\n<template>\n <Select\n single\n data-test=\"select|address\"\n :disabled=\"props.disabled\"\n :loading=\"isLoading\"\n :options=\"options\"\n :placeholder=\"props.placeholder\"\n :label=\"props.label\"\n :hint-text=\"props.hintText\"\n :error=\"props.errorText\"\n :model-value=\"internalValue\"\n :prevent-empty=\"props.preventEmpty\"\n disable-filtering\n @search=\"debouncedSearch\"\n @update:model-value=\"select\"\n >\n <template v-if=\"slots.hint\" #hint>\n <slot name=\"hint\"></slot>\n </template>\n </Select>\n</template>\n"],"names":["ID_PREFIX","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","props","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","emit","select","address"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FE,MAAMA,IAAY;;;;;;;;;;;;;;;;;;;;;;iBAXZC,IAAQC,KACRC,IAAeC,EAA0B,cAAc,GAEvDC,IAAmBC,EAAS,MAAMC,EAAM,WAAUJ,KAAA,gBAAAA,EAAc,iBAAgB;AAElF,QAAA,CAACE,EAAiB;AACd,YAAA,IAAI,MAAM,iCAAiC;AAGnD,UAAM,EAAE,iBAAAG,GAAiB,qBAAAC,EAAA,IAAwBC,EAAcL,EAAiB,KAAK,GAI/EM,IAAYC,EAAI,EAAK,GACrBC,IAAUD,KACVE,IAAgBF,KAEhBG,IAAkBC,EAASC,GAAQV,EAAM,YAAY,GAErDW,IAAmBZ,EAAS,MAAM;;AAQ/BY,aAPkB;AAAA,QACvB,EAACC,IAAAZ,EAAM,eAAN,gBAAAY,EAAkB,iBAAgBC,IAAAb,EAAM,eAAN,gBAAAa,EAAkB,gBAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SAC/FC,IAAAd,EAAM,eAAN,gBAAAc,EAAkB;AAAA,QAClB,EAACC,IAAAf,EAAM,eAAN,gBAAAe,EAAkB,QAAOC,IAAAhB,EAAM,eAAN,gBAAAgB,EAAkB,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SACjFC,IAAAjB,EAAM,eAAN,gBAAAiB,EAAkB;AAAA,MAClB,EAAA,OAAO,OAAO,EAAE,KAAK,IAAI;AAAA,IAEpB,CACR;AAGK,IAAAC,EAAA,MAAMlB,EAAM,YAAY,MAAM;;AAClC,UAAIW,EAAiB,SAAS,GAACC,IAAAN,EAAQ,UAAR,QAAAM,EAAe,SAAQ;AACpD,cAAMO,IAAS;AAAA,UACb,IAAInB,EAAM,WAAW,YAAYoB,EAAS3B,CAAS;AAAA,UACnD,MAAMkB,EAAiB;AAAA,UACvB,SAASX,EAAM;AAAA,QAAA;AAGT,QAAAM,EAAA,QAAQ,CAACa,CAAM,GACvBZ,EAAc,QAAQY;AAAA,MAAA;AACxB,QAAYR,EAAiB,UAC3BJ,EAAc,QAAQ,QACtBD,EAAQ,QAAQ;IAClB,GACC,EAAE,WAAW,GAAA,CAAM;AAEtB,mBAAeI,EAAOW,GAAe;AACnC,MAAAjB,EAAU,QAAQ;AAEd,UAAA;AACM,QAAAE,EAAA,QAAQ,MAAMJ,EAAoBmB,CAAK;AAAA,eAExCC,GAAY;AAEnB,YADAhB,EAAQ,QAAQ,IACZgB,KAAA,QAAAA,EAAO;AACT,UAAAC,EAAK,SAASD,CAAK;AAAA;AAEb,gBAAAA;AAAA,MACR,UACA;AACA,QAAAlB,EAAU,QAAQ;AAAA,MACpB;AAAA,IACF;AAEA,mBAAeoB,EAAOL,GAAuB;AAI3C,UAHAZ,EAAc,QAAQY,GAGlB,CAACA,GAAQ;AACX,QAAAI,EAAK,qBAAqB;AAAA,UACxB,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAa;AAAA,UACb,SAAS;AAAA,QAAA,CACV;AACD;AAAA,MACF;AAGA,UAAIJ,EAAO,GAAG,WAAW1B,CAAS,KAAK0B,EAAO,SAAS;AAChD,QAAAI,EAAA,qBAAqBJ,EAAO,OAAO;AACxC;AAAA,MACF;AAEI,UAAA;AACF,cAAMM,IAAU,MAAMxB,EAAgBkB,EAAO,EAAE;AAC/C,QAAAI,EAAK,qBAAqBE,CAAO;AAAA,eAE1BH,GAAY;AACnB,YAAIA,KAAA,QAAAA,EAAO;AACT,UAAAC,EAAK,SAASD,CAAK;AAAA;AAEb,gBAAAA;AAAA,MAEV;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"AddressSelect.js","sources":["../src/components/AddressSelect/AddressSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import debounce from 'lodash-es/debounce';\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useSlots, watch } from 'vue';\n\n import { StashProvideState } from '../../../types/misc';\n import useGoogleMaps, { type Address, type AddressOption } from '../../composables/useGoogleMaps/useGoogleMaps';\n import { DEBOUNCE } from '../../constants';\n import Select from '../Select/Select.vue';\n\n export interface AddressSelectProps {\n /**\n * Google Maps API Key. This takes precedence over the key defined in stashOptions\n */\n apiKey?: string;\n /**\n * Wether the Select is disabled or not\n */\n disabled?: boolean;\n /**\n * Select placeholder\n */\n placeholder?: string;\n /**\n * Debounce time in milliseconds to perform API requests on search\n */\n debounceTime?: number;\n /**\n * Model value address\n */\n modelValue: Address;\n /**\n * Hint text to be passed down to Select component\n */\n hintText?: string;\n /**\n * Error text to be passed down to Select component\n */\n errorText?: string;\n /**\n * Label text to be passed down to Select component\n */\n label?: string;\n /**\n * Disallows values from being de-selected\n */\n preventEmpty?: boolean;\n }\n\n const props = withDefaults(defineProps<AddressSelectProps>(), {\n disabled: false,\n placeholder: 'Type an address',\n debounceTime: DEBOUNCE.MEDIUM,\n modelValue: () => ({\n street_address: undefined,\n extended_address: undefined,\n city: undefined,\n state: undefined,\n postal_code: undefined,\n country: undefined,\n }),\n hintText: undefined,\n errorText: undefined,\n label: undefined,\n preventEmpty: false,\n apiKey: undefined,\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the model value changes\n */\n (e: 'update:modelValue', value: Address): void,\n /**\n * Emitted when an error occurs while reaching out to Google's API\n */\n (e: 'error', value: unknown): void\n }>();\n\n const slots = useSlots();\n const stashOptions = inject<StashProvideState>('stashOptions');\n\n const googleMapsApiKey = computed(() => props.apiKey || stashOptions?.googleMapsApiKey);\n\n if (!googleMapsApiKey.value) {\n throw new Error('Google Maps API key is required');\n }\n\n const { getPlaceDetails, getPlacePredictions } = useGoogleMaps(googleMapsApiKey.value);\n\n const ID_PREFIX = 'address-select-';\n\n const isLoading = ref(false);\n const options = ref<Array<AddressOption>>();\n const internalValue = ref<AddressOption>();\n\n const debouncedSearch = debounce(search, props.debounceTime);\n\n const formattedAddress = computed(() => {\n const formattedAddress = [\n [props.modelValue?.street_address, props.modelValue?.extended_address].filter(Boolean).join(' '),\n props.modelValue?.city,\n [props.modelValue?.state, props.modelValue?.postal_code].filter(Boolean).join(' '),\n props.modelValue?.country\n ].filter(Boolean).join(', ');\n\n return formattedAddress;\n });\n\n // When we don't have options just yet, we need to create them on our own\n watch(() => props.modelValue, () => {\n if (formattedAddress.value && !options.value?.length) {\n const option = {\n id: props.modelValue.place_id || uniqueId(ID_PREFIX),\n name: formattedAddress.value,\n address: props.modelValue,\n };\n\n options.value = [option];\n internalValue.value = option;\n } else if (!formattedAddress.value) {\n internalValue.value = undefined;\n options.value = [];\n }\n }, { immediate: true });\n\n async function search(query: string) {\n isLoading.value = true;\n\n try {\n options.value = await getPlacePredictions(query);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } catch (error: any) {\n options.value = [];\n if (error?.isGoogleMapsError) {\n emit('error', error);\n } else {\n throw error;\n }\n } finally {\n isLoading.value = false;\n }\n }\n\n async function select(option: AddressOption) {\n internalValue.value = option;\n\n // When an option is de-selected, the option will be undefined\n if (!option) {\n emit('update:modelValue', {\n street_address: undefined,\n extended_address: undefined,\n city: undefined,\n state: undefined,\n postal_code: undefined,\n country: undefined,\n });\n return;\n }\n\n // When an option does not have a google place id, we don't want to fetch it's details\n if (option.id.startsWith(ID_PREFIX) && option.address) {\n emit('update:modelValue', option.address);\n return;\n }\n\n try {\n const address = await getPlaceDetails(option.id);\n emit('update:modelValue', address);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } catch (error: any) {\n if (error?.isGoogleMapsError) {\n emit('error', error);\n } else {\n throw error;\n }\n }\n }\n</script>\n\n<template>\n <Select\n single\n data-test=\"select|address\"\n :disabled=\"props.disabled\"\n :loading=\"isLoading\"\n :options=\"options\"\n :placeholder=\"props.placeholder\"\n :label=\"props.label\"\n :hint-text=\"props.hintText\"\n :error=\"props.errorText\"\n :model-value=\"internalValue\"\n :prevent-empty=\"props.preventEmpty\"\n disable-filtering\n @search=\"debouncedSearch\"\n @update:model-value=\"select\"\n >\n <template v-if=\"slots.hint\" #hint>\n <slot name=\"hint\"></slot>\n </template>\n </Select>\n</template>\n"],"names":["ID_PREFIX","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","props","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","emit","select","address"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FE,MAAMA,IAAY;;;;;;;;;;;;;;;;;;;;;;iBAXZC,IAAQC,KACRC,IAAeC,EAA0B,cAAc,GAEvDC,IAAmBC,EAAS,MAAMC,EAAM,WAAUJ,KAAA,gBAAAA,EAAc,iBAAgB;AAElF,QAAA,CAACE,EAAiB;AACd,YAAA,IAAI,MAAM,iCAAiC;AAGnD,UAAM,EAAE,iBAAAG,GAAiB,qBAAAC,EAAA,IAAwBC,EAAcL,EAAiB,KAAK,GAI/EM,IAAYC,EAAI,EAAK,GACrBC,IAAUD,KACVE,IAAgBF,KAEhBG,IAAkBC,EAASC,GAAQV,EAAM,YAAY,GAErDW,IAAmBZ,EAAS,MAAM;;AAQ/BY,aAPkB;AAAA,QACvB,EAACC,IAAAZ,EAAM,eAAN,gBAAAY,EAAkB,iBAAgBC,IAAAb,EAAM,eAAN,gBAAAa,EAAkB,gBAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SAC/FC,IAAAd,EAAM,eAAN,gBAAAc,EAAkB;AAAA,QAClB,EAACC,IAAAf,EAAM,eAAN,gBAAAe,EAAkB,QAAOC,IAAAhB,EAAM,eAAN,gBAAAgB,EAAkB,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SACjFC,IAAAjB,EAAM,eAAN,gBAAAiB,EAAkB;AAAA,MAClB,EAAA,OAAO,OAAO,EAAE,KAAK,IAAI;AAAA,IAEpB,CACR;AAGK,IAAAC,EAAA,MAAMlB,EAAM,YAAY,MAAM;;AAClC,UAAIW,EAAiB,SAAS,GAACC,IAAAN,EAAQ,UAAR,QAAAM,EAAe,SAAQ;AACpD,cAAMO,IAAS;AAAA,UACb,IAAInB,EAAM,WAAW,YAAYoB,EAAS3B,CAAS;AAAA,UACnD,MAAMkB,EAAiB;AAAA,UACvB,SAASX,EAAM;AAAA,QAAA;AAGT,QAAAM,EAAA,QAAQ,CAACa,CAAM,GACvBZ,EAAc,QAAQY;AAAA,MAAA;AACxB,QAAYR,EAAiB,UAC3BJ,EAAc,QAAQ,QACtBD,EAAQ,QAAQ;IAClB,GACC,EAAE,WAAW,GAAA,CAAM;AAEtB,mBAAeI,EAAOW,GAAe;AACnC,MAAAjB,EAAU,QAAQ;AAEd,UAAA;AACM,QAAAE,EAAA,QAAQ,MAAMJ,EAAoBmB,CAAK;AAAA,eAExCC,GAAY;AAEnB,YADAhB,EAAQ,QAAQ,IACZgB,KAAA,QAAAA,EAAO;AACT,UAAAC,EAAK,SAASD,CAAK;AAAA;AAEb,gBAAAA;AAAA,MACR,UACA;AACA,QAAAlB,EAAU,QAAQ;AAAA,MACpB;AAAA,IACF;AAEA,mBAAeoB,EAAOL,GAAuB;AAI3C,UAHAZ,EAAc,QAAQY,GAGlB,CAACA,GAAQ;AACX,QAAAI,EAAK,qBAAqB;AAAA,UACxB,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAa;AAAA,UACb,SAAS;AAAA,QAAA,CACV;AACD;AAAA,MACF;AAGA,UAAIJ,EAAO,GAAG,WAAW1B,CAAS,KAAK0B,EAAO,SAAS;AAChD,QAAAI,EAAA,qBAAqBJ,EAAO,OAAO;AACxC;AAAA,MACF;AAEI,UAAA;AACF,cAAMM,IAAU,MAAMxB,EAAgBkB,EAAO,EAAE;AAC/C,QAAAI,EAAK,qBAAqBE,CAAO;AAAA,eAE1BH,GAAY;AACnB,YAAIA,KAAA,QAAAA,EAAO;AACT,UAAAC,EAAK,SAASD,CAAK;AAAA;AAEb,gBAAAA;AAAA,MAEV;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/Alert.js CHANGED
@@ -1,14 +1,12 @@
1
1
  import { defineComponent as x, useSlots as $, useCssModule as C, ref as I, computed as s, withDirectives as B, openBlock as i, createElementBlock as l, normalizeClass as r, createVNode as w, unref as t, createElementVNode as f, renderSlot as m, createCommentVNode as o } from "vue";
2
- import { c as y } from "./capitalize-667d9f60.js";
3
- import { u as S } from "./uniqueId-847efe53.js";
2
+ import y from "lodash-es/capitalize";
3
+ import S from "lodash-es/uniqueId";
4
4
  import { b as M, a as N } from "./statusLevels-2c64f4f8.js";
5
5
  import V from "./sticky.js";
6
6
  import p from "./Icon.js";
7
7
  import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
8
- import "./toString-7d5bf363.js";
9
- import "./isObjectLike-54341556.js";
10
- import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
11
8
  import "./index-79ce320f.js";
9
+ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
12
10
  const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
13
11
  name: "ll-alert",
14
12
  __name: "Alert",
@@ -21,8 +19,8 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
21
19
  variant: { default: "outlined" }
22
20
  },
23
21
  setup(b) {
24
- const e = b, g = S("close-icon"), _ = $(), a = C(), c = I(!0), u = s(() => M[y(e.severity)]), h = s(() => N[y(e.severity)]), k = s(() => e.variant === "filled" && ["warning", "success"].includes(e.severity) ? "tw-text-ice-900" : e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : `tw-text-${h.value}`), n = s(() => e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : "tw-text-ice-900");
25
- return (d, v) => c.value ? B((i(), l("div", {
22
+ const e = b, g = S("close-icon"), _ = $(), a = C(), c = I(!0), d = s(() => M[y(e.severity)]), h = s(() => N[y(e.severity)]), k = s(() => e.variant === "filled" && ["warning", "success"].includes(e.severity) ? "tw-text-ice-900" : e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : `tw-text-${h.value}`), n = s(() => e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : "tw-text-ice-900");
23
+ return (u, v) => c.value ? B((i(), l("div", {
26
24
  key: 0,
27
25
  class: r(["stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6 tw-border tw-border-solid", [
28
26
  `stash-alert--${e.severity}`,
@@ -49,8 +47,8 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
49
47
  "data-test": "stash-alert"
50
48
  }, [
51
49
  w(p, {
52
- class: r(["stash-alert__icon", [t(a).iconInfo, k.value, `stash-alert__icon--${u.value}`]]),
53
- name: u.value,
50
+ class: r(["stash-alert__icon", [t(a).iconInfo, k.value, `stash-alert__icon--${d.value}`]]),
51
+ name: d.value,
54
52
  title: `${e.severity} icon`,
55
53
  "data-test": "stash-alert|status-icon"
56
54
  }, null, 8, ["class", "name", "title"]),
@@ -61,14 +59,14 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
61
59
  }])
62
60
  }, [
63
61
  f("p", z, [
64
- m(d.$slots, "default")
62
+ m(u.$slots, "default")
65
63
  ]),
66
64
  t(_).link ? (i(), l("div", {
67
65
  key: 0,
68
66
  class: r(["stash-alert__link tw-pointer tw-underline hover:tw-no-underline", [t(a).link, n.value, { "tw-ml-2": e.centered }]]),
69
67
  "data-test": "stash-alert|link"
70
68
  }, [
71
- m(d.$slots, "link")
69
+ m(u.$slots, "link")
72
70
  ], 2)) : o("", !0)
73
71
  ], 2),
74
72
  e.permanent ? o("", !0) : (i(), l("button", {
@@ -90,8 +88,8 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
90
88
  }
91
89
  }), D = {}, E = {
92
90
  $style: D
93
- }, U = /* @__PURE__ */ j(A, [["__cssModules", E]]);
91
+ }, Q = /* @__PURE__ */ j(A, [["__cssModules", E]]);
94
92
  export {
95
- U as default
93
+ Q as default
96
94
  };
97
95
  //# sourceMappingURL=Alert.js.map
package/dist/Alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.js","sources":["../src/components/Alert/Alert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import capitalize from 'lodash-es/capitalize';\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, ref, useCssModule, useSlots } from 'vue';\n\n import { StatusColor, StatusColors, StatusIcon, StatusIcons, StatusSeverity } from '../../../types/statusLevels';\n import vSticky from '../../directives/sticky/sticky';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-alert',\n });\n\n export interface AlertProps {\n /**\n * Determines if the alert is centered\n */\n centered?: boolean;\n\n /**\n * Determines if the alert is permanent (doesn't have a close button).\n */\n permanent?: boolean;\n\n /**\n * The type of border radius to use. Available types:\n *\n * - `none` - no border radius\n * - `standard` - 4px border radius\n */\n radius?: 'none' | 'standard';\n\n /**\n * The type of alert. Available types:\n *\n * - `info`\n * - `success`\n * - `warning`\n * - `error`\n */\n severity?: StatusSeverity;\n\n /**\n * Determines if the alert is sticky. By default, it's not sticky. The provided `number` value is a top offset of alert.\n */\n sticky?: number | null;\n\n /**\n * The variant of alert. Available variants:\n *\n * - `filled` - previously alert component\n * - `outlined` - previously banner component\n */\n variant?: 'outlined' | 'filled';\n }\n\n const props = withDefaults(defineProps<AlertProps>(), {\n centered: false,\n permanent: false,\n radius: 'standard',\n severity: 'info',\n sticky: null,\n variant: 'outlined',\n });\n\n const iconId = uniqueId('close-icon');\n const slots = useSlots();\n const classes = useCssModule();\n const show = ref(true);\n const icon = computed<StatusIcon>(() => StatusIcons[capitalize(props.severity)]);\n const color = computed<StatusColor>(() => StatusColors[capitalize(props.severity)]);\n\n const iconColor = computed<string>(() => {\n if (props.variant === 'filled' && ['warning', 'success'].includes(props.severity)) {\n return 'tw-text-ice-900';\n }\n\n if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n return 'tw-text-white';\n }\n\n return `tw-text-${color.value}`;\n });\n\n const computedTextColor = computed<string>(() => {\n if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n return 'tw-text-white';\n }\n\n return 'tw-text-ice-900';\n });\n</script>\n\n<template>\n <div\n v-if=\"show\"\n v-sticky=\"props.sticky\"\n class=\"stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6 tw-border tw-border-solid\"\n :class=\"[\n `stash-alert--${props.severity}`,\n `stash-alert--${props.variant}`,\n computedTextColor,\n {\n 'tw-my-6': props.variant === 'outlined', // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.\n 'tw-rounded': props.radius === 'standard',\n 'tw-border-red': props.severity === 'error',\n 'tw-border-orange': props.severity === 'warning',\n 'tw-border-blue': props.severity === 'info',\n 'tw-border-green': props.severity === 'success',\n 'tw-bg-red': props.severity === 'error' && props.variant === 'filled',\n 'tw-bg-orange': props.severity === 'warning' && props.variant === 'filled',\n 'tw-bg-blue': props.severity === 'info' && props.variant === 'filled',\n 'tw-bg-green': props.severity === 'success' && props.variant === 'filled',\n 'tw-bg-red-100': props.severity === 'error' && props.variant === 'outlined',\n 'tw-bg-orange-100': props.severity === 'warning' && props.variant === 'outlined',\n 'tw-bg-blue-100': props.severity === 'info' && props.variant === 'outlined',\n 'tw-bg-green-100': props.severity === 'success' && props.variant === 'outlined',\n },\n ]\"\n data-test=\"stash-alert\"\n >\n <Icon\n class=\"stash-alert__icon\"\n :class=\"[classes.iconInfo, iconColor, `stash-alert__icon--${icon}`]\"\n :name=\"icon\"\n :title=\"`${props.severity} icon`\"\n data-test=\"stash-alert|status-icon\"\n />\n\n <!-- Alert text elements -->\n <div\n class=\"tw-flex tw-flex-1 tw-px-2 tw-flex-wrap\"\n :class=\"{\n 'tw-justify-center': props.centered,\n 'tw-justify-between': !props.centered,\n }\"\n >\n <p class=\"tw-m-0\">\n <slot></slot>\n </p>\n\n <div\n v-if=\"slots.link\"\n class=\"stash-alert__link tw-pointer tw-underline hover:tw-no-underline\"\n :class=\"[classes.link, computedTextColor, { 'tw-ml-2': props.centered }]\"\n data-test=\"stash-alert|link\"\n >\n <slot name=\"link\"></slot>\n </div>\n </div>\n\n <button\n v-if=\"!props.permanent\"\n class=\"stash-alert__close\"\n :class=\"[classes.button, computedTextColor]\"\n type=\"button\"\n data-test=\"stash-alert|close\"\n @click=\"show = false\"\n >\n <Icon :id=\"iconId\" name=\"close\" title=\"Dismiss alert\" />\n </button>\n </div>\n</template>\n\n<style module>\n :global(.stash-alert__link) {\n a,\n button {\n color: theme('colors.ice.900');\n cursor: pointer;\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n :global(.stash-alert--filled.stash-alert--error),\n :global(.stash-alert--filled.stash-alert--info) {\n :global(.stash-alert__link) a,\n :global(.stash-alert__link) button {\n color: theme('colors.white');\n }\n }\n</style>\n"],"names":["iconId","uniqueId","slots","useSlots","classes","useCssModule","show","ref","icon","computed","StatusIcons","capitalize","props","color","StatusColors","iconColor","computedTextColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAiEQA,IAASC,EAAS,YAAY,GAC9BC,IAAQC,KACRC,IAAUC,KACVC,IAAOC,EAAI,EAAI,GACfC,IAAOC,EAAqB,MAAMC,EAAYC,EAAWC,EAAM,QAAQ,CAAC,CAAC,GACzEC,IAAQJ,EAAsB,MAAMK,EAAaH,EAAWC,EAAM,QAAQ,CAAC,CAAC,GAE5EG,IAAYN,EAAiB,MAC7BG,EAAM,YAAY,YAAY,CAAC,WAAW,SAAS,EAAE,SAASA,EAAM,QAAQ,IACvE,oBAGLA,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,WAAWC,EAAM,KAAK,EAC9B,GAEKG,IAAoBP,EAAiB,MACrCG,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,iBACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Alert.js","sources":["../src/components/Alert/Alert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import capitalize from 'lodash-es/capitalize';\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, ref, useCssModule, useSlots } from 'vue';\n\n import { StatusColor, StatusColors, StatusIcon, StatusIcons, StatusSeverity } from '../../../types/statusLevels';\n import vSticky from '../../directives/sticky/sticky';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-alert',\n });\n\n export interface AlertProps {\n /**\n * Determines if the alert is centered\n */\n centered?: boolean;\n\n /**\n * Determines if the alert is permanent (doesn't have a close button).\n */\n permanent?: boolean;\n\n /**\n * The type of border radius to use. Available types:\n *\n * - `none` - no border radius\n * - `standard` - 4px border radius\n */\n radius?: 'none' | 'standard';\n\n /**\n * The type of alert. Available types:\n *\n * - `info`\n * - `success`\n * - `warning`\n * - `error`\n */\n severity?: StatusSeverity;\n\n /**\n * Determines if the alert is sticky. By default, it's not sticky. The provided `number` value is a top offset of alert.\n */\n sticky?: number | null;\n\n /**\n * The variant of alert. Available variants:\n *\n * - `filled` - previously alert component\n * - `outlined` - previously banner component\n */\n variant?: 'outlined' | 'filled';\n }\n\n const props = withDefaults(defineProps<AlertProps>(), {\n centered: false,\n permanent: false,\n radius: 'standard',\n severity: 'info',\n sticky: null,\n variant: 'outlined',\n });\n\n const iconId = uniqueId('close-icon');\n const slots = useSlots();\n const classes = useCssModule();\n const show = ref(true);\n const icon = computed<StatusIcon>(() => StatusIcons[capitalize(props.severity)]);\n const color = computed<StatusColor>(() => StatusColors[capitalize(props.severity)]);\n\n const iconColor = computed<string>(() => {\n if (props.variant === 'filled' && ['warning', 'success'].includes(props.severity)) {\n return 'tw-text-ice-900';\n }\n\n if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n return 'tw-text-white';\n }\n\n return `tw-text-${color.value}`;\n });\n\n const computedTextColor = computed<string>(() => {\n if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n return 'tw-text-white';\n }\n\n return 'tw-text-ice-900';\n });\n</script>\n\n<template>\n <div\n v-if=\"show\"\n v-sticky=\"props.sticky\"\n class=\"stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6 tw-border tw-border-solid\"\n :class=\"[\n `stash-alert--${props.severity}`,\n `stash-alert--${props.variant}`,\n computedTextColor,\n {\n 'tw-my-6': props.variant === 'outlined', // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.\n 'tw-rounded': props.radius === 'standard',\n 'tw-border-red': props.severity === 'error',\n 'tw-border-orange': props.severity === 'warning',\n 'tw-border-blue': props.severity === 'info',\n 'tw-border-green': props.severity === 'success',\n 'tw-bg-red': props.severity === 'error' && props.variant === 'filled',\n 'tw-bg-orange': props.severity === 'warning' && props.variant === 'filled',\n 'tw-bg-blue': props.severity === 'info' && props.variant === 'filled',\n 'tw-bg-green': props.severity === 'success' && props.variant === 'filled',\n 'tw-bg-red-100': props.severity === 'error' && props.variant === 'outlined',\n 'tw-bg-orange-100': props.severity === 'warning' && props.variant === 'outlined',\n 'tw-bg-blue-100': props.severity === 'info' && props.variant === 'outlined',\n 'tw-bg-green-100': props.severity === 'success' && props.variant === 'outlined',\n },\n ]\"\n data-test=\"stash-alert\"\n >\n <Icon\n class=\"stash-alert__icon\"\n :class=\"[classes.iconInfo, iconColor, `stash-alert__icon--${icon}`]\"\n :name=\"icon\"\n :title=\"`${props.severity} icon`\"\n data-test=\"stash-alert|status-icon\"\n />\n\n <!-- Alert text elements -->\n <div\n class=\"tw-flex tw-flex-1 tw-px-2 tw-flex-wrap\"\n :class=\"{\n 'tw-justify-center': props.centered,\n 'tw-justify-between': !props.centered,\n }\"\n >\n <p class=\"tw-m-0\">\n <slot></slot>\n </p>\n\n <div\n v-if=\"slots.link\"\n class=\"stash-alert__link tw-pointer tw-underline hover:tw-no-underline\"\n :class=\"[classes.link, computedTextColor, { 'tw-ml-2': props.centered }]\"\n data-test=\"stash-alert|link\"\n >\n <slot name=\"link\"></slot>\n </div>\n </div>\n\n <button\n v-if=\"!props.permanent\"\n class=\"stash-alert__close\"\n :class=\"[classes.button, computedTextColor]\"\n type=\"button\"\n data-test=\"stash-alert|close\"\n @click=\"show = false\"\n >\n <Icon :id=\"iconId\" name=\"close\" title=\"Dismiss alert\" />\n </button>\n </div>\n</template>\n\n<style module>\n :global(.stash-alert__link) {\n a,\n button {\n color: theme('colors.ice.900');\n cursor: pointer;\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n :global(.stash-alert--filled.stash-alert--error),\n :global(.stash-alert--filled.stash-alert--info) {\n :global(.stash-alert__link) a,\n :global(.stash-alert__link) button {\n color: theme('colors.white');\n }\n }\n</style>\n"],"names":["iconId","uniqueId","slots","useSlots","classes","useCssModule","show","ref","icon","computed","StatusIcons","capitalize","props","color","StatusColors","iconColor","computedTextColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAiEQA,IAASC,EAAS,YAAY,GAC9BC,IAAQC,KACRC,IAAUC,KACVC,IAAOC,EAAI,EAAI,GACfC,IAAOC,EAAqB,MAAMC,EAAYC,EAAWC,EAAM,QAAQ,CAAC,CAAC,GACzEC,IAAQJ,EAAsB,MAAMK,EAAaH,EAAWC,EAAM,QAAQ,CAAC,CAAC,GAE5EG,IAAYN,EAAiB,MAC7BG,EAAM,YAAY,YAAY,CAAC,WAAW,SAAS,EAAE,SAASA,EAAM,QAAQ,IACvE,oBAGLA,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,WAAWC,EAAM,KAAK,EAC9B,GAEKG,IAAoBP,EAAiB,MACrCG,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,iBACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -2,11 +2,9 @@ import { defineComponent as v, ref as y, useSlots as $, resolveComponent as x, o
2
2
  import { _ as h } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
3
3
  import i from "./Icon.js";
4
4
  import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
5
- import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
6
- import "./uniqueId-847efe53.js";
7
- import "./toString-7d5bf363.js";
8
- import "./isObjectLike-54341556.js";
5
+ import "lodash-es/uniqueId";
9
6
  import "./index-79ce320f.js";
7
+ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
10
8
  const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "text-truncate" }, B = { key: 1 }, I = { class: "flex-1 flex items-center overflow-hidden" }, N = { class: "text-truncate" }, g = /* @__PURE__ */ v({
11
9
  __name: "AppNavigationItem",
12
10
  props: {
@@ -79,8 +77,8 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
79
77
  caret: j
80
78
  }, V = {
81
79
  $style: M
82
- }, P = /* @__PURE__ */ k(g, [["__cssModules", V]]);
80
+ }, L = /* @__PURE__ */ k(g, [["__cssModules", V]]);
83
81
  export {
84
- P as default
82
+ L as default
85
83
  };
86
84
  //# sourceMappingURL=AppNavigationItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, useSlots } from 'vue';\n import { type RouteLocationRaw } from 'vue-router';\n\n import Expand from '../Expand/Expand.vue';\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n\n export interface AppNavigationItemProps {\n /**\n * Location to navigate to\n */\n to: RouteLocationRaw,\n /**\n * Icon to render on the left side\n */\n icon: IconName;\n /**\n * Text label to render\n */\n label: string;\n /**\n * Indicates whether the route is active or not\n */\n isActive?: boolean;\n }\n\n const isExpanded = ref(false);\n\n const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n isActive: false,\n });\n\n const slots = useSlots();\n</script>\n\n<template>\n <li>\n <router-link\n v-if=\"!slots['sub-items']\"\n :to=\"props.to\"\n :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n :active-class=\"$style.active\"\n class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n >\n <div class=\"flex-1 flex items-center overflow-hidden\">\n <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n <span class=\"text-truncate\">{{ props.label }}</span>\n </div>\n <!-- @slot Default component slot, for content to the right side of item -->\n <slot></slot>\n </router-link>\n <div v-else>\n <button\n :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n @click=\"() => (isExpanded = !isExpanded)\"\n >\n <div class=\"flex-1 flex items-center overflow-hidden\">\n <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n <span class=\"text-truncate\">{{ props.label }}</span>\n </div>\n <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n </button>\n <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n <ul :class=\"$style['sub-items']\">\n <!-- @slot Sub items component slot, for rendering nested navigation items -->\n <slot name=\"sub-items\"></slot>\n </ul>\n </Expand>\n </div>\n </li>\n</template>\n\n<style module>\n .item {\n border-left: 6px solid transparent;\n color: var(--color-ice);\n padding: 10px 12px;\n transition: background-color 150ms;\n }\n\n .item:hover,\n .item:focus {\n text-decoration: none;\n background: #140e35;\n }\n\n .sub-items .item {\n padding-left: 40px;\n }\n\n .expanded {\n background-color: #263256;\n }\n\n .active {\n color: var(--color-seafoam);\n border-color: var(--color-seafoam);\n background: #140e35;\n }\n\n .caret {\n transition: transform 300ms ease-in-out;\n }\n\n .expanded .caret {\n transform: rotate(-90deg);\n }\n</style>\n"],"names":["isExpanded","ref","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;;;iBA2BQA,IAAaC,EAAI,EAAK,GAMtBC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, useSlots } from 'vue';\n import { type RouteLocationRaw } from 'vue-router';\n\n import Expand from '../Expand/Expand.vue';\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n\n export interface AppNavigationItemProps {\n /**\n * Location to navigate to\n */\n to: RouteLocationRaw,\n /**\n * Icon to render on the left side\n */\n icon: IconName;\n /**\n * Text label to render\n */\n label: string;\n /**\n * Indicates whether the route is active or not\n */\n isActive?: boolean;\n }\n\n const isExpanded = ref(false);\n\n const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n isActive: false,\n });\n\n const slots = useSlots();\n</script>\n\n<template>\n <li>\n <router-link\n v-if=\"!slots['sub-items']\"\n :to=\"props.to\"\n :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n :active-class=\"$style.active\"\n class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n >\n <div class=\"flex-1 flex items-center overflow-hidden\">\n <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n <span class=\"text-truncate\">{{ props.label }}</span>\n </div>\n <!-- @slot Default component slot, for content to the right side of item -->\n <slot></slot>\n </router-link>\n <div v-else>\n <button\n :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n @click=\"() => (isExpanded = !isExpanded)\"\n >\n <div class=\"flex-1 flex items-center overflow-hidden\">\n <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n <span class=\"text-truncate\">{{ props.label }}</span>\n </div>\n <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n </button>\n <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n <ul :class=\"$style['sub-items']\">\n <!-- @slot Sub items component slot, for rendering nested navigation items -->\n <slot name=\"sub-items\"></slot>\n </ul>\n </Expand>\n </div>\n </li>\n</template>\n\n<style module>\n .item {\n border-left: 6px solid transparent;\n color: var(--color-ice);\n padding: 10px 12px;\n transition: background-color 150ms;\n }\n\n .item:hover,\n .item:focus {\n text-decoration: none;\n background: #140e35;\n }\n\n .sub-items .item {\n padding-left: 40px;\n }\n\n .expanded {\n background-color: #263256;\n }\n\n .active {\n color: var(--color-seafoam);\n border-color: var(--color-seafoam);\n background: #140e35;\n }\n\n .caret {\n transition: transform 300ms ease-in-out;\n }\n\n .expanded .caret {\n transform: rotate(-90deg);\n }\n</style>\n"],"names":["isExpanded","ref","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;iBA2BQA,IAAaC,EAAI,EAAK,GAMtBC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/AppTopbar.js CHANGED
@@ -1,10 +1,8 @@
1
- import { openBlock as d, createElementBlock as n, createStaticVNode as h, defineComponent as c, createElementVNode as t, normalizeClass as l, createVNode as a, unref as m, renderSlot as o } from "vue";
2
- import p from "./Icon.js";
3
- import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
4
- import "./uniqueId-847efe53.js";
5
- import "./toString-7d5bf363.js";
6
- import "./isObjectLike-54341556.js";
1
+ import { openBlock as n, createElementBlock as p, createStaticVNode as h, defineComponent as c, createElementVNode as t, normalizeClass as i, createVNode as a, unref as m, renderSlot as o } from "vue";
2
+ import d from "./Icon.js";
3
+ import "lodash-es/uniqueId";
7
4
  import "./index-79ce320f.js";
5
+ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
8
6
  import "./_plugin-vue_export-helper-dad06003.js";
9
7
  const C = {
10
8
  viewBox: "0 0 104 24",
@@ -14,12 +12,12 @@ const C = {
14
12
  f
15
13
  ];
16
14
  function b(r, w) {
17
- return d(), n("svg", C, V);
15
+ return n(), p("svg", C, V);
18
16
  }
19
17
  const H = { render: b }, u = {
20
18
  "data-test": "stash-app-topbar",
21
19
  class: "stash-app-topbar tw-absolute tw-top-0 tw-left-0"
22
- }, x = ["href"], _ = { class: "tw-flex tw-items-center" }, g = { class: "tw-ml-6" }, v = { class: "tw-hidden xl:tw-block tw-pl-3" }, O = /* @__PURE__ */ c({
20
+ }, x = ["href"], _ = { class: "tw-flex tw-items-center" }, g = { class: "tw-ml-6" }, v = { class: "tw-hidden xl:tw-block tw-pl-3" }, y = /* @__PURE__ */ c({
23
21
  __name: "AppTopbar",
24
22
  props: {
25
23
  sidebarOpened: { type: Boolean, default: !1 },
@@ -28,18 +26,18 @@ const H = { render: b }, u = {
28
26
  emits: ["toggle-sidebar"],
29
27
  setup(r, { emit: w }) {
30
28
  const s = r;
31
- return (e, i) => (d(), n("header", u, [
29
+ return (e, l) => (n(), p("header", u, [
32
30
  t("div", {
33
- class: l(["tw-fixed tw-top-0 tw-pl-3 tw-flex tw-items-center tw-h-topbar tw-w-sidebar xl:tw-text-white tw-transition-colors tw-duration-500", {
31
+ class: i(["tw-fixed tw-top-0 tw-pl-3 tw-flex tw-items-center tw-h-topbar tw-w-sidebar xl:tw-text-white tw-transition-colors tw-duration-500", {
34
32
  "tw-text-white tw-z-[1001]": s.sidebarOpened,
35
33
  "tw-text-purple-500 tw-z-[401]": !s.sidebarOpened
36
34
  }])
37
35
  }, [
38
36
  t("button", {
39
37
  class: "xl:tw-hidden",
40
- onClick: i[0] || (i[0] = (M) => w("toggle-sidebar"))
38
+ onClick: l[0] || (l[0] = (M) => w("toggle-sidebar"))
41
39
  }, [
42
- a(p, {
40
+ a(d, {
43
41
  name: "menu",
44
42
  class: "tw-mr-3",
45
43
  "aria-label": "open sidebar navigation"
@@ -49,7 +47,7 @@ const H = { render: b }, u = {
49
47
  href: s.href,
50
48
  class: "tw-flex tw-items-center tw-text-inherit"
51
49
  }, [
52
- a(p, {
50
+ a(d, {
53
51
  name: "logo-ll",
54
52
  class: "tw-mr-1.5",
55
53
  size: "large"
@@ -58,7 +56,7 @@ const H = { render: b }, u = {
58
56
  ], 8, x)
59
57
  ], 2),
60
58
  t("div", {
61
- class: l([[e.$attrs.class], "tw-fixed tw-top-0 tw-w-full tw-pr-3 tw-py-3 tw-z-page tw-shadow-md tw-flex tw-items-center tw-justify-between tw-flex-row-reverse tw-bg-white tw-h-topbar tw-pl-sidebar"])
59
+ class: i([[e.$attrs.class], "tw-fixed tw-top-0 tw-w-full tw-pr-3 tw-py-3 tw-z-page tw-shadow-md tw-flex tw-items-center tw-justify-between tw-flex-row-reverse tw-bg-white tw-h-topbar tw-pl-sidebar"])
62
60
  }, [
63
61
  t("div", _, [
64
62
  o(e.$slots, "actions"),
@@ -74,6 +72,6 @@ const H = { render: b }, u = {
74
72
  }
75
73
  });
76
74
  export {
77
- O as default
75
+ y as default
78
76
  };
79
77
  //# sourceMappingURL=AppTopbar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AppTopbar.js","sources":["../assets/logos/leaflink-wordmark.svg?component"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = {\n viewBox: \"0 0 104 24\",\n fill: \"currentColor\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}\nconst _hoisted_2 = /*#__PURE__*/_createStaticVNode(\"<g id=\\\"wordmark\\\"><path d=\\\"M0.265137 0.248474H4.14784V23.8197H0.265137V0.248474Z\\\"></path><path d=\\\"M22.5861 17.1265H10.4927C10.9258 19.2695 12.6034 20.358 14.915 20.358C16.623 20.358 18.2313 19.6982 19.1693 18.446L21.7486 20.3913C20.3082 22.6331 17.561 23.8197 14.7132 23.8197C10.0242 23.8197 6.47314 20.589 6.47314 15.7754C6.47314 10.8628 10.2251 7.76257 14.6803 7.76257C19.1693 7.76257 22.6866 10.8313 22.6866 15.6424C22.682 16.1386 22.6485 16.6341 22.5861 17.1265ZM18.8004 14.4558C18.5657 12.3461 16.9244 11.1262 14.747 11.1262C12.6363 11.1262 10.9621 12.1151 10.4927 14.4558H18.8004Z\\\"></path><path d=\\\"M41.6276 8.09331V23.8197H37.7414V21.4133C36.67 23.0611 34.4589 23.8197 32.5448 23.8197C28.4247 23.8197 24.8364 20.6879 24.8364 15.7754C24.8364 10.8313 28.3875 7.76257 32.5084 7.76257C34.4848 7.76257 36.6657 8.52123 37.7336 10.1366V8.09076L41.6276 8.09331ZM37.6747 15.7421C37.6747 13.0382 35.3969 11.324 33.1528 11.324C30.7407 11.324 28.7642 13.1704 28.7642 15.7421C28.7642 18.3139 30.7407 20.2259 33.1528 20.2259C35.5311 20.2259 37.6747 18.446 37.6747 15.7421Z\\\"></path><path d=\\\"M48.9973 7.07127V8.42322H52.4808V11.4919H48.9973V23.8197H45.1145V7.26904C45.1145 2.85092 47.2547 0.180267 51.6103 0.180267H53.4534L52.3812 3.74085C49.7335 3.74085 48.9635 5.19167 48.9973 7.07127Z\\\"></path><path d=\\\"M56.1824 0.250153H60.0677V23.8197H56.1824V0.250153Z\\\"></path><path d=\\\"M62.9927 2.98303C62.9927 1.63109 64.1654 0.642273 65.539 0.642273C66.946 0.642273 68.051 1.63109 68.051 2.98303C68.051 4.30173 66.946 5.32379 65.539 5.32379C64.1688 5.32379 62.9927 4.30173 62.9927 2.98303ZM63.5989 8.42321H67.485V23.8197H63.5989V8.42321Z\\\"></path><path d=\\\"M85.9341 15.1829V23.8197H82.0491V15.5444C82.0491 13.1047 80.5411 11.8517 78.7991 11.8517C77.0231 11.8517 74.8151 12.8081 74.8151 15.7728V23.8172H70.9241V8.4232H74.8101V10.8628C75.6131 8.95 78.0591 8.09332 79.6671 8.09332C83.6901 8.09332 85.9341 10.6975 85.9341 15.1829Z\\\"></path><path d=\\\"M99.0731 23.8197L92.9751 16.8299V23.8197H89.0901V0.248474H92.9751V13.3349L97.4641 8.42323H102.523L96.1581 15.1489L103.996 23.8197H99.0731Z\\\"></path></g>\", 1)\nconst _hoisted_3 = [\n _hoisted_2\n]\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, _hoisted_3))\n}\nexport default { render: render }"],"names":["_hoisted_1","_hoisted_2","_createStaticVNode","_hoisted_3","render","_ctx","_cache","_openBlock","_createElementBlock","LeafLinkWordmark"],"mappings":";;;;;;;;AAEA,MAAMA,IAAa;AAAA,EACjB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AACT,GACMC,IAA0BC,gBAAAA,EAAmB,4hEAA8iE,CAAC,GAC5lEC,IAAa;AAAA,EACjBF;AACF;AAEO,SAASG,EAAOC,GAAMC,GAAQ;AACnC,SAAQC,EAAY,GAAEC,EAAoB,OAAOR,GAAYG,CAAU;AACzE;AACA,MAAeM,IAAA,EAAE,QAAQL,EAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"AppTopbar.js","sources":["../assets/logos/leaflink-wordmark.svg?component"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = {\n viewBox: \"0 0 104 24\",\n fill: \"currentColor\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}\nconst _hoisted_2 = /*#__PURE__*/_createStaticVNode(\"<g id=\\\"wordmark\\\"><path d=\\\"M0.265137 0.248474H4.14784V23.8197H0.265137V0.248474Z\\\"></path><path d=\\\"M22.5861 17.1265H10.4927C10.9258 19.2695 12.6034 20.358 14.915 20.358C16.623 20.358 18.2313 19.6982 19.1693 18.446L21.7486 20.3913C20.3082 22.6331 17.561 23.8197 14.7132 23.8197C10.0242 23.8197 6.47314 20.589 6.47314 15.7754C6.47314 10.8628 10.2251 7.76257 14.6803 7.76257C19.1693 7.76257 22.6866 10.8313 22.6866 15.6424C22.682 16.1386 22.6485 16.6341 22.5861 17.1265ZM18.8004 14.4558C18.5657 12.3461 16.9244 11.1262 14.747 11.1262C12.6363 11.1262 10.9621 12.1151 10.4927 14.4558H18.8004Z\\\"></path><path d=\\\"M41.6276 8.09331V23.8197H37.7414V21.4133C36.67 23.0611 34.4589 23.8197 32.5448 23.8197C28.4247 23.8197 24.8364 20.6879 24.8364 15.7754C24.8364 10.8313 28.3875 7.76257 32.5084 7.76257C34.4848 7.76257 36.6657 8.52123 37.7336 10.1366V8.09076L41.6276 8.09331ZM37.6747 15.7421C37.6747 13.0382 35.3969 11.324 33.1528 11.324C30.7407 11.324 28.7642 13.1704 28.7642 15.7421C28.7642 18.3139 30.7407 20.2259 33.1528 20.2259C35.5311 20.2259 37.6747 18.446 37.6747 15.7421Z\\\"></path><path d=\\\"M48.9973 7.07127V8.42322H52.4808V11.4919H48.9973V23.8197H45.1145V7.26904C45.1145 2.85092 47.2547 0.180267 51.6103 0.180267H53.4534L52.3812 3.74085C49.7335 3.74085 48.9635 5.19167 48.9973 7.07127Z\\\"></path><path d=\\\"M56.1824 0.250153H60.0677V23.8197H56.1824V0.250153Z\\\"></path><path d=\\\"M62.9927 2.98303C62.9927 1.63109 64.1654 0.642273 65.539 0.642273C66.946 0.642273 68.051 1.63109 68.051 2.98303C68.051 4.30173 66.946 5.32379 65.539 5.32379C64.1688 5.32379 62.9927 4.30173 62.9927 2.98303ZM63.5989 8.42321H67.485V23.8197H63.5989V8.42321Z\\\"></path><path d=\\\"M85.9341 15.1829V23.8197H82.0491V15.5444C82.0491 13.1047 80.5411 11.8517 78.7991 11.8517C77.0231 11.8517 74.8151 12.8081 74.8151 15.7728V23.8172H70.9241V8.4232H74.8101V10.8628C75.6131 8.95 78.0591 8.09332 79.6671 8.09332C83.6901 8.09332 85.9341 10.6975 85.9341 15.1829Z\\\"></path><path d=\\\"M99.0731 23.8197L92.9751 16.8299V23.8197H89.0901V0.248474H92.9751V13.3349L97.4641 8.42323H102.523L96.1581 15.1489L103.996 23.8197H99.0731Z\\\"></path></g>\", 1)\nconst _hoisted_3 = [\n _hoisted_2\n]\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, _hoisted_3))\n}\nexport default { render: render }"],"names":["_hoisted_1","_hoisted_2","_createStaticVNode","_hoisted_3","render","_ctx","_cache","_openBlock","_createElementBlock","LeafLinkWordmark"],"mappings":";;;;;;AAEA,MAAMA,IAAa;AAAA,EACjB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AACT,GACMC,IAA0BC,gBAAAA,EAAmB,4hEAA8iE,CAAC,GAC5lEC,IAAa;AAAA,EACjBF;AACF;AAEO,SAASG,EAAOC,GAAMC,GAAQ;AACnC,SAAQC,EAAY,GAAEC,EAAoB,OAAOR,GAAYG,CAAU;AACzE;AACA,MAAeM,IAAA,EAAE,QAAQL,EAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}