@leaflink/stash 42.4.4 → 42.5.1

package/README.md

@@ -266,6 +266,9 @@ These peer dependencies need to be installed separately by the consumer of the p
 
 ## Testing
 
+> [!TIP]
+> If you are contributing to `@leaflink/stash`, please refer to this contributing [testing](CONTRIBUTING.md#testing) section for more details on how to properly test your changes.
+
 To run tests, there's multiple npm scripts available to you:
 
 * `npm run test` - Run all tests in watch mode.
@@ -291,11 +294,18 @@ import { config, flushPromises } from '@vue/test-utils';
 config.global.plugins = [[stash, { googleMapsApiKey: 'my-key' }]];
 ```
 
-For example: if you are using the `AddressSelect` component, you need to mock the `useGoogleMaps` composable.
+### Mocking Google Maps API when testing AddressSelect
 
-```ts
-// mocks/@leaflink/stash/useGoogleMaps.js
+When testing components that use the `AddressSelect` component or `useGoogleMaps` composable, it's necessary to mock it.
+This is because the `useGoogleMaps` composable uses the `google.maps` global object, which is not available in the
+testing environment.
+
+The easiest way to do this is to mock the useGoogleMaps composable and avoid trying to mock the Google Maps API directly.
 
+Create a file in the `__mocks__` directory of the `@leaflink/stash` package, and mock the `useGoogleMaps` composable.
+
+```ts
+/* __mocks__/@leaflink/stash/useGoogleMaps.js */
 export default function () {
   return {
     getPlaceDetails: vi.fn().mockResolvedValue({
@@ -311,6 +321,20 @@ export default function () {
     },
   };
 }
+
+
+/* tests/setup-env.ts */
+import '@leaflink/dom-testing-utils/setup-env'; // to ensure lodash-es/debounce is mocked properly
+vi.mock('@leaflink/stash/useGoogleMaps');
+
+
+/* src/components/YourComponent.spec.ts */
+const user = userEvent.setup();
+// Start typing in the AddressSelect select input to trigger the useGoogleMaps mock response
+await user.type(screen.getByPlaceholderText('Search'), 'type anything');
+// The mock response will be used to populate the options - so it will always be the same
+// (id of 1 from the getPlacePredictions mock)
+await user.selectOptions(screen.getByLabelText('Bank address'), ['1']);
 ```
 
 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.

package/dist/ActionsDropdown.js

@@ -4,23 +4,18 @@ import g from "./Button.js";
 import x from "./Dropdown.js";
 import B from "./Icon.js";
 import { _ as D } from "./_plugin-vue_export-helper-dad06003.js";
-import "./get-27d90892.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
-import "./_MapCache-65811284.js";
+import "lodash-es/get";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
 import "./constants.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
 import "./utils/helpers.js";
-import "./capitalize-667d9f60.js";
-import "./_createCompounder-ae01a723.js";
-import "./isPlainObject-55c7f916.js";
-import "./_getPrototype-3e6fccd6.js";
-import "./_overArg-6d920d99.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
+import "lodash-es/camelCase";
+import "lodash-es/isFinite";
+import "lodash-es/isPlainObject";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const y = /* @__PURE__ */ c({
   name: "ll-actions-dropdown",
   __name: "ActionsDropdown",
@@ -30,20 +25,20 @@ const y = /* @__PURE__ */ c({
     contentClass: { default: "" },
     buttonText: { default: () => C("ll.actions") }
   },
-  setup(r) {
-    const o = r, t = p();
-    return (i, A) => (m(), u(x, {
+  setup(l) {
+    const o = l, t = p();
+    return (d, A) => (m(), u(x, {
       align: o.align,
       "content-class": [n(t).dropdownContent, o.contentClass],
       class: s(n(t).actionsDropdown)
     }, f({
-      toggle: e(({ isActive: l, toggle: d }) => [
+      toggle: e(({ isActive: r, toggle: i }) => [
         a(g, {
           class: s(["button flex align-middle align-justify w-full border border-blue text-blue", [n(t).actionButton, { [n(t).disabled]: o.disabled }]]),
           secondary: "",
-          "aria-expanded": l.toString(),
+          "aria-expanded": r.toString(),
           disabled: o.disabled,
-          onClick: d
+          onClick: i
         }, {
           default: e(() => [
             _(b(o.buttonText) + " ", 1),
@@ -60,7 +55,7 @@ const y = /* @__PURE__ */ c({
       o.disabled ? void 0 : {
         name: "default",
         fn: e(() => [
-          w(i.$slots, "default")
+          w(d.$slots, "default")
         ]),
         key: "0"
       }
@@ -73,8 +68,8 @@ const y = /* @__PURE__ */ c({
   actionsDropdown: M
 }, h = {
   $style: T
-}, oo = /* @__PURE__ */ D(y, [["__cssModules", h]]);
+}, U = /* @__PURE__ */ D(y, [["__cssModules", h]]);
 export {
-  oo as default
+  U as default
 };
 //# sourceMappingURL=ActionsDropdown.js.map

package/dist/ActionsDropdown.js.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AddressSelect.js

@@ -1,44 +1,33 @@
 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";
-import { d as G } from "./debounce-6aca1ca9.js";
-import { u as K } from "./uniqueId-847efe53.js";
+import G from "lodash-es/debounce";
+import K from "lodash-es/uniqueId";
 import C from "./useGoogleMaps.js";
 import { DEBOUNCE as U } from "./constants.js";
 import q from "./Select.js";
-import "./_MapCache-65811284.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
-import "./_baseAssignValue-dd1499b4.js";
-import "./identity-452d03fd.js";
-import "./_getAllKeys-5e735d41.js";
-import "./_Uint8Array-06e4d083.js";
-import "./isArrayLike-09233e52.js";
-import "./_getTag-4db47fa6.js";
-import "./_overArg-6d920d99.js";
-import "./_baseIsEqual-d594c87f.js";
-import "./get-27d90892.js";
-import "./isEmpty-2fbad344.js";
-import "./isEqual-fca467fb.js";
-import "./isPlainObject-55c7f916.js";
-import "./_getPrototype-3e6fccd6.js";
+import "lodash-es/keyBy";
+import "lodash-es/isEmpty";
+import "lodash-es/isEqual";
+import "lodash-es/isPlainObject";
 import "./useSearch.js";
-import "./searchFuzzy-13c124f8.js";
+import "lodash-es/get";
+import "./searchFuzzy-74a7de1c.js";
 import "./_commonjsHelpers-10dfc225.js";
 import "./utils/helpers.js";
-import "./capitalize-667d9f60.js";
-import "./_createCompounder-ae01a723.js";
+import "lodash-es/camelCase";
+import "lodash-es/isFinite";
 import "./clickoutside.js";
 import "./MenusPlugin-5e93f0a5.js";
 import "./Chip.js";
 import "./colors-13e95ebf.js";
 import "./utils/colorScheme.js";
 import "./Icon.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Field.vue_vue_type_script_setup_true_lang-c864abd3.js";
+import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
 import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
 import "./locale.js";
-const _ = "address-select-", Me = /* @__PURE__ */ M({
+const _ = "address-select-", ve = /* @__PURE__ */ M({
   __name: "AddressSelect",
   props: {
     apiKey: { default: void 0 },
@@ -59,38 +48,38 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
     preventEmpty: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "error"],
-  setup(g, { emit: a }) {
-    const t = g, V = S(), d = A("stashOptions"), p = h(() => t.apiKey || (d == null ? void 0 : d.googleMapsApiKey));
-    if (!p.value)
+  setup(g, { emit: l }) {
+    const t = g, V = S(), d = A("stashOptions"), u = h(() => t.apiKey || (d == null ? void 0 : d.googleMapsApiKey));
+    if (!u.value)
       throw new Error("Google Maps API key is required");
-    const { getPlaceDetails: b, getPlacePredictions: x } = C(p.value), i = n(!1), r = n(), l = n(), E = G(w, t.debounceTime), s = h(() => {
-      var e, m, u, c, f, v;
+    const { getPlaceDetails: b, getPlacePredictions: x } = C(u.value), i = n(!1), a = n(), r = n(), E = G(w, t.debounceTime), s = h(() => {
+      var e, p, m, c, f, v;
       return [
-        [(e = t.modelValue) == null ? void 0 : e.street_address, (m = t.modelValue) == null ? void 0 : m.extended_address].filter(Boolean).join(" "),
-        (u = t.modelValue) == null ? void 0 : u.city,
+        [(e = t.modelValue) == null ? void 0 : e.street_address, (p = t.modelValue) == null ? void 0 : p.extended_address].filter(Boolean).join(" "),
+        (m = t.modelValue) == null ? void 0 : m.city,
         [(c = t.modelValue) == null ? void 0 : c.state, (f = t.modelValue) == null ? void 0 : f.postal_code].filter(Boolean).join(" "),
         (v = t.modelValue) == null ? void 0 : v.country
       ].filter(Boolean).join(", ");
     });
     T(() => t.modelValue, () => {
       var o;
-      if (s.value && !((o = r.value) != null && o.length)) {
+      if (s.value && !((o = a.value) != null && o.length)) {
         const e = {
           id: t.modelValue.place_id || K(_),
           name: s.value,
           address: t.modelValue
         };
-        r.value = [e], l.value = e;
+        a.value = [e], r.value = e;
       } else
-        s.value || (l.value = void 0, r.value = []);
+        s.value || (r.value = void 0, a.value = []);
     }, { immediate: !0 });
     async function w(o) {
       i.value = !0;
       try {
-        r.value = await x(o);
+        a.value = await x(o);
       } catch (e) {
-        if (r.value = [], e != null && e.isGoogleMapsError)
-          a("error", e);
+        if (a.value = [], e != null && e.isGoogleMapsError)
+          l("error", e);
         else
           throw e;
       } finally {
@@ -98,8 +87,8 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
       }
     }
     async function B(o) {
-      if (l.value = o, !o) {
-        a("update:modelValue", {
+      if (r.value = o, !o) {
+        l("update:modelValue", {
           street_address: void 0,
           extended_address: void 0,
           city: void 0,
@@ -110,15 +99,15 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
         return;
       }
       if (o.id.startsWith(_) && o.address) {
-        a("update:modelValue", o.address);
+        l("update:modelValue", o.address);
         return;
       }
       try {
         const e = await b(o.id);
-        a("update:modelValue", e);
+        l("update:modelValue", e);
       } catch (e) {
         if (e != null && e.isGoogleMapsError)
-          a("error", e);
+          l("error", e);
         else
           throw e;
       }
@@ -128,12 +117,12 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
       "data-test": "select|address",
       disabled: t.disabled,
       loading: i.value,
-      options: r.value,
+      options: a.value,
       placeholder: t.placeholder,
       label: t.label,
       "hint-text": t.hintText,
       error: t.errorText,
-      "model-value": l.value,
+      "model-value": r.value,
       "prevent-empty": t.preventEmpty,
       "disable-filtering": "",
       onSearch: y(E),
@@ -150,6 +139,6 @@ const _ = "address-select-", Me = /* @__PURE__ */ M({
   }
 });
 export {
-  Me as default
+  ve as default
 };
 //# sourceMappingURL=AddressSelect.js.map

package/dist/AddressSelect.js.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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

@@ -1,15 +1,13 @@
-import { defineComponent as $, useSlots as b, useCssModule as B, ref as S, computed as t, withDirectives as V, openBlock as n, createElementBlock as a, normalizeClass as l, unref as s, createVNode as _, createElementVNode as m, renderSlot as w, createCommentVNode as i } from "vue";
-import { c as p } from "./capitalize-667d9f60.js";
-import { b as I, a as M } from "./statusLevels-2c64f4f8.js";
-import N from "./sticky.js";
-import v from "./Icon.js";
+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";
+import y from "lodash-es/capitalize";
+import S from "lodash-es/uniqueId";
+import { b as M, a as N } from "./statusLevels-2c64f4f8.js";
+import V from "./sticky.js";
+import p from "./Icon.js";
 import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
 import "./index-79ce320f.js";
-const z = { class: "tw-m-0" }, A = /* @__PURE__ */ $({
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
   name: "ll-alert",
   __name: "Alert",
   props: {
@@ -20,75 +18,78 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ $({
     sticky: { default: null },
     variant: { default: "outlined" }
   },
-  setup(k) {
-    const e = k, y = b(), o = B(), c = S(!0), x = t(() => I[p(e.severity)]), h = t(() => M[p(e.severity)]), r = t(() => e.variant === "filled"), C = t(() => r.value && ["warning", "success"].includes(e.severity) ? "tw-text-ice-900" : r.value && ["info", "error"].includes(e.severity) ? "tw-text-white" : `tw-text-${h.value}`), u = t(() => r.value && ["info", "error"].includes(e.severity) ? "tw-text-white" : "tw-text-ice-900"), g = t(() => r.value ? `filled-${e.severity}` : e.severity);
-    return (d, f) => c.value ? V((n(), a("div", {
+  setup(b) {
+    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");
+    return (u, v) => c.value ? B((i(), l("div", {
       key: 0,
-      class: l(["stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6", [
+      class: r(["stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6 tw-border tw-border-solid", [
+        `stash-alert--${e.severity}`,
+        `stash-alert--${e.variant}`,
+        n.value,
         {
+          "tw-my-6": e.variant === "outlined",
           // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.
-          "tw-my-6": !r.value,
-          "tw-rounded": e.radius === "standard"
-        },
-        s(o)[g.value],
-        u.value
+          "tw-rounded": e.radius === "standard",
+          "tw-border-red": e.severity === "error",
+          "tw-border-orange": e.severity === "warning",
+          "tw-border-blue": e.severity === "info",
+          "tw-border-green": e.severity === "success",
+          "tw-bg-red": e.severity === "error" && e.variant === "filled",
+          "tw-bg-orange": e.severity === "warning" && e.variant === "filled",
+          "tw-bg-blue": e.severity === "info" && e.variant === "filled",
+          "tw-bg-green": e.severity === "success" && e.variant === "filled",
+          "tw-bg-red-100": e.severity === "error" && e.variant === "outlined",
+          "tw-bg-orange-100": e.severity === "warning" && e.variant === "outlined",
+          "tw-bg-blue-100": e.severity === "info" && e.variant === "outlined",
+          "tw-bg-green-100": e.severity === "success" && e.variant === "outlined"
+        }
       ]]),
       "data-test": "stash-alert"
     }, [
-      _(v, {
-        class: l(["stash-alert__icon", [s(o).iconInfo, C.value]]),
-        name: x.value,
-        "data-test": "stash-alert|icon"
-      }, null, 8, ["class", "name"]),
-      m("div", {
-        class: l(["tw-flex tw-flex-1 tw-px-2 tw-flex-wrap", {
+      w(p, {
+        class: r(["stash-alert__icon", [t(a).iconInfo, k.value, `stash-alert__icon--${d.value}`]]),
+        name: d.value,
+        title: `${e.severity} icon`,
+        "data-test": "stash-alert|status-icon"
+      }, null, 8, ["class", "name", "title"]),
+      f("div", {
+        class: r(["tw-flex tw-flex-1 tw-px-2 tw-flex-wrap", {
           "tw-justify-center": e.centered,
           "tw-justify-between": !e.centered
         }])
       }, [
-        m("p", z, [
-          w(d.$slots, "default")
+        f("p", z, [
+          m(u.$slots, "default")
         ]),
-        s(y).link ? (n(), a("div", {
+        t(_).link ? (i(), l("div", {
           key: 0,
-          class: l(["stash-alert__link", [
-            s(o).link,
-            {
-              "tw-ml-2": e.centered
-            }
-          ]]),
+          class: r(["stash-alert__link tw-pointer tw-underline hover:tw-no-underline", [t(a).link, n.value, { "tw-ml-2": e.centered }]]),
           "data-test": "stash-alert|link"
         }, [
-          w(d.$slots, "link")
-        ], 2)) : i("", !0)
+          m(u.$slots, "link")
+        ], 2)) : o("", !0)
       ], 2),
-      e.permanent ? i("", !0) : (n(), a("button", {
+      e.permanent ? o("", !0) : (i(), l("button", {
         key: 0,
-        class: l(["stash-alert__close", [s(o).button, u.value]]),
+        class: r(["stash-alert__close", [t(a).button, n.value]]),
         type: "button",
         "data-test": "stash-alert|close",
-        onClick: f[0] || (f[0] = (K) => c.value = !1)
+        onClick: v[0] || (v[0] = (q) => c.value = !1)
       }, [
-        _(v, { name: "close" })
+        w(p, {
+          id: t(g),
+          name: "close",
+          title: "Dismiss alert"
+        }, null, 8, ["id"])
       ], 2))
     ], 2)), [
-      [s(N), e.sticky]
-    ]) : i("", !0);
+      [t(V), e.sticky]
+    ]) : o("", !0);
   }
-}), E = "_error_12xko_2", D = "_warning_12xko_6", F = "_info_12xko_10", q = "_success_12xko_14", G = "_link_12xko_18", H = {
-  error: E,
-  warning: D,
-  info: F,
-  success: q,
-  link: G,
-  "filled-error": "_filled-error_12xko_31",
-  "filled-info": "_filled-info_12xko_40",
-  "filled-warning": "_filled-warning_12xko_64",
-  "filled-success": "_filled-success_12xko_68"
-}, J = {
-  $style: H
-}, ee = /* @__PURE__ */ j(A, [["__cssModules", J]]);
+}), D = {}, E = {
+  $style: D
+}, Q = /* @__PURE__ */ j(A, [["__cssModules", E]]);
 export {
-  ee as default
+  Q as default
 };
 //# sourceMappingURL=Alert.js.map

package/dist/Alert.js.map

@@ -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 { 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 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 isFilledVariant = computed<boolean>(() => {\n    return props.variant === 'filled';\n  });\n\n  const iconColor = computed<string>(() => {\n    if (isFilledVariant.value && ['warning', 'success'].includes(props.severity)) {\n      return 'tw-text-ice-900';\n    }\n\n    if (isFilledVariant.value && ['info', 'error'].includes(props.severity)) {\n      return 'tw-text-white';\n    }\n\n    return `tw-text-${color.value}`;\n  });\n\n  const textColor = computed<string>(() => {\n    if (isFilledVariant.value && ['info', 'error'].includes(props.severity)) {\n      return 'tw-text-white';\n    }\n\n    return 'tw-text-ice-900';\n  });\n\n  const variantClass = computed<string>(() => {\n    return isFilledVariant.value ? `filled-${props.severity}` : props.severity;\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\"\n    :class=\"[\n      {\n        // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.\n        'tw-my-6': !isFilledVariant,\n        'tw-rounded': props.radius === 'standard',\n      },\n      classes[variantClass],\n      textColor,\n    ]\"\n    data-test=\"stash-alert\"\n  >\n    <Icon class=\"stash-alert__icon\" :class=\"[classes.iconInfo, iconColor]\" :name=\"icon\" data-test=\"stash-alert|icon\" />\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\"\n        :class=\"[\n          classes.link,\n          {\n            'tw-ml-2': props.centered,\n          },\n        ]\"\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, textColor]\"\n      type=\"button\"\n      data-test=\"stash-alert|close\"\n      @click=\"show = false\"\n    >\n      <Icon name=\"close\" />\n    </button>\n  </div>\n</template>\n\n<style module>\n  .error {\n    @apply tw-bg-red-100 tw-border tw-border-solid tw-border-red;\n  }\n\n  .warning {\n    @apply tw-bg-orange-100 tw-border tw-border-solid tw-border-orange;\n  }\n\n  .info {\n    @apply tw-bg-blue-100 tw-border tw-border-solid tw-border-blue;\n  }\n\n  .success {\n    @apply tw-bg-green-100 tw-border tw-border-solid tw-border-green;\n  }\n\n  .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  .filled-error {\n    @apply tw-bg-red tw-border tw-border-solid tw-border-red;\n\n    .link a,\n    .link button {\n      color: theme('colors.white');\n    }\n  }\n\n  .filled-info {\n    @apply tw-bg-blue tw-border tw-border-solid tw-border-blue;\n\n    .link a,\n    .link button {\n      color: theme('colors.white');\n    }\n  }\n\n  .link:not(:has(a, button)) {\n    color: theme('colors.ice.900');\n    cursor: pointer;\n    text-decoration: underline;\n\n    &:hover {\n      text-decoration: none;\n    }\n\n    .filled-error &,\n    .filled-info & {\n      color: theme('colors.white');\n    }\n  }\n\n  .filled-warning {\n    @apply tw-bg-orange tw-border tw-border-solid tw-border-orange;\n  }\n\n  .filled-success {\n    @apply tw-bg-green tw-border tw-border-solid tw-border-green;\n  }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule","show","ref","icon","computed","StatusIcons","capitalize","props","color","StatusColors","isFilledVariant","iconColor","textColor","variantClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAgEQA,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,IAAkBN,EAAkB,MACjCG,EAAM,YAAY,QAC1B,GAEKI,IAAYP,EAAiB,MAC7BM,EAAgB,SAAS,CAAC,WAAW,SAAS,EAAE,SAASH,EAAM,QAAQ,IAClE,oBAGLG,EAAgB,SAAS,CAAC,QAAQ,OAAO,EAAE,SAASH,EAAM,QAAQ,IAC7D,kBAGF,WAAWC,EAAM,KAAK,EAC9B,GAEKI,IAAYR,EAAiB,MAC7BM,EAAgB,SAAS,CAAC,QAAQ,OAAO,EAAE,SAASH,EAAM,QAAQ,IAC7D,kBAGF,iBACR,GAEKM,IAAeT,EAAiB,MAC7BM,EAAgB,QAAQ,UAAUH,EAAM,QAAQ,KAAKA,EAAM,QACnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppNavigationItem.js

@@ -2,11 +2,9 @@ import { defineComponent as v, ref as y, useSlots as $, resolveComponent as x, o
 import { _ as h } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
 import i from "./Icon.js";
 import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 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({
   __name: "AppNavigationItem",
   props: {
@@ -79,8 +77,8 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
   caret: j
 }, V = {
   $style: M
-}, P = /* @__PURE__ */ k(g, [["__cssModules", V]]);
+}, L = /* @__PURE__ */ k(g, [["__cssModules", V]]);
 export {
-  P as default
+  L as default
 };
 //# sourceMappingURL=AppNavigationItem.js.map

package/dist/AppNavigationItem.js.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}