@leaflink/stash 51.11.0 → 51.12.0

package/README.md

@@ -15,6 +15,9 @@ level. This project is intended to be used across our digital product portfolio.
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 ## Table of Contents
 
+- [Development Setup](#development-setup)
+  - [Installing pnpm](#installing-pnpm)
+  - [Installing Dependencies](#installing-dependencies)
 - [Quick Start](#quick-start)
 - [Usage](#usage)
   - [Example](#example)
@@ -36,6 +39,32 @@ level. This project is intended to be used across our digital product portfolio.
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## Development Setup
+
+This project uses **pnpm** as the package manager. Please ensure you have pnpm installed before contributing.
+
+### Installing pnpm
+
+```bash
+# Using npm
+npm install -g pnpm
+
+# Using Homebrew (macOS)
+brew install pnpm
+
+# Using curl
+curl -fsSL https://get.pnpm.io/install.sh | sh -
+```
+
+### Installing Dependencies
+
+```bash
+pnpm install
+```
+
+> ⚠️ **Important**: This project enforces pnpm usage. Other package managers (npm, yarn) will be blocked by the
+> preinstall script.
+
 ## Quick Start
 
 Stash requires Vue 3 and Tailwind CSS 3. To get started, install the package and its peer dependencies:
@@ -221,18 +250,18 @@ Most operations are run using `npm run` and are defined in `package.json`. Check
 
 A few commonly used commands are:
 
-- `npm run docs` will start the docs using Vitepress dev server on port `5180`.
-- `npm run lint` will lint all vue/js files with eslint & lint css with `stylelint`. Optionally you can just lint js or
-  css with the `lint:js` and `lint:css` scripts respectively. You can run `npm run lint --fix` to auto-fix code styles.
-- `npm test <file>` when we want to run a single spec during active development.
-- `npm test` runs all unit and integration tests with Vitest. `--watch` is enabled by default and you can pass any other
-  Vitest options to this script that you'd like.
-- `npm run test:ci` will run tests and generate coverage. Used in CI, but nothing stopping you from using it locally if
-  you want to run with coverage.
-- `npm run type-check` will run the TypeScript compiler and perform a static analysis of the code and report any type
+- `pnpm docs` will start the docs using Vitepress dev server on port `5180`.
+- `pnpm lint` will lint all vue/js files with eslint & lint css with `stylelint`. Optionally you can just lint js or css
+  with the `lint:js` and `lint:css` scripts respectively. You can run `npm run lint --fix` to auto-fix code styles.
+- `pnpm test <file>` when we want to run a single spec during active development.
+- `pnpm test` runs all unit and integration tests with Vitest. `--watch` is enabled by default and you can pass any
+  other Vitest options to this script that you'd like.
+- `pnpm test:ci` will run tests and generate coverage. Used in CI, but nothing stopping you from using it locally if you
+  want to run with coverage.
+- `pnpm type-check` will run the TypeScript compiler and perform a static analysis of the code and report any type
   errors it finds.
-- `npm run build` will build the application and prepare it for production.
-- `npm run build-ts` will build the application, perform a static analysis to find any type errors and prepare it for
+- `pnpm build` will build the application and prepare it for production.
+- `pnpm build-ts` will build the application, perform a static analysis to find any type errors and prepare it for
   production.
 
 ## Legacy Styles
@@ -467,7 +496,7 @@ Usually you will want to copy assets from the package installed in your `node_mo
 For projects using Vite, you can do it using the `copy` rollup plugin and adding to your plugins array:
 
 ```sh
-npm install -D rollup-plugin-copy
+pnpm add -D rollup-plugin-copy
 ```
 
 ```ts

package/dist/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../src/components/Accordion/Accordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule, useSlots, watch } from 'vue';\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 AccordionProps {\n    /**\n     * The filename of the icon that will be displayed on the left side of the header\n     */\n    icon?: IconName;\n\n    /**\n     * Title of the Accordion, displayed in the header\n     */\n    title?: string;\n\n    /**\n     * Whether the Accordion is expanded or not\n     */\n    isExpanded?: boolean;\n  }\n\n  type ToggleState = {\n    isExpanded: boolean;\n  };\n\n  const props = withDefaults(defineProps<AccordionProps>(), {\n    icon: 'circle-info',\n    title: undefined,\n    isExpanded: false,\n  });\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    (e: 'toggle', state: ToggleState): void;\n    (e: 'open' | 'close'): void;\n  }>();\n\n  const classes = useCssModule();\n\n  if (!props.title && !slots.header) {\n    throw new Error('Either a title prop or header slot must be provided');\n  }\n\n  const localIsExpanded = ref(props.isExpanded);\n\n  function emitEvents() {\n    emit('toggle', { isExpanded: localIsExpanded.value });\n    emit(localIsExpanded.value ? 'open' : 'close');\n  }\n\n  const toggle = () => {\n    localIsExpanded.value = !localIsExpanded.value;\n    emitEvents();\n  };\n\n  watch(\n    () => props.isExpanded,\n    (newVal) => {\n      localIsExpanded.value = newVal;\n      emitEvents();\n    },\n  );\n</script>\n\n<template>\n  <div class=\"stash-accordion tw-rounded tw-border tw-border-ice-500 tw-bg-white\" data-test=\"stash-accordion\">\n    <div\n      tabindex=\"0\"\n      data-test=\"stash-accordion|toggle\"\n      class=\"stash-accordion__toggle tw-flex tw-items-center\"\n      :class=\"[classes.toggle, localIsExpanded && classes['toggle--open']]\"\n      @click=\"toggle\"\n      @keypress.enter=\"toggle\"\n      @keypress.space.prevent=\"toggle\"\n    >\n      <div v-if=\"slots.header\">\n        <!-- @slot Accordion header -->\n        <slot name=\"header\"> </slot>\n      </div>\n      <template v-else>\n        <Icon class=\"tw-text-blue-500\" size=\"dense\" :name=\"props.icon\" data-test=\"stash-accordion|toggle-icon\" />\n        <div class=\"tw-flex-1 tw-select-none tw-font-medium tw-leading-5 tw-text-ice-900\">\n          {{ props.title }}\n        </div>\n      </template>\n\n      <Icon\n        class=\"tw-ml-auto tw-justify-center tw-text-ice-900 tw-transition-transform tw-duration-300\"\n        size=\"dense\"\n        name=\"chevron-down\"\n        data-test=\"stash-accordion|toggle-chevron\"\n        :class=\"{ 'tw-rotate-180': localIsExpanded }\"\n      />\n    </div>\n    <hr v-show=\"localIsExpanded\" class=\"tw-mx-[18px] tw-h-px tw-bg-ice-200\" />\n    <Expand :is-expanded=\"localIsExpanded\">\n      <div class=\"stash-accordion__content tw-p-[18px]\" data-test=\"stash-accordion|content\">\n        <!-- @slot Accordion content -->\n        <slot></slot>\n      </div>\n    </Expand>\n  </div>\n</template>\n\n<style module>\n  .toggle {\n    @apply tw-outline-none tw-ring-blue-500 tw-ring-opacity-15;\n\n    display: flex;\n    cursor: pointer;\n    gap: theme('gap[1.5]');\n    padding: 17px;\n    outline: none;\n    border-radius: theme('borderRadius.DEFAULT');\n\n    &:focus-visible {\n      @apply tw-ring-4;\n      border-color: var(--color-ice-900);\n      padding: 15px;\n      border-width: 2px;\n    }\n\n    &--open {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-ice-100);\n      }\n    }\n\n    &:active {\n      background-color: var(--color-ice-200);\n    }\n\n    &:active + hr,\n    &:hover + hr {\n      opacity: 0;\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","classes","useCssModule","localIsExpanded","ref","emitEvents","toggle","watch","newVal","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_unref","_hoisted_3","_renderSlot","_ctx","_Fragment","_createVNode","Icon","_hoisted_4","_toDisplayString","_withDirectives","_hoisted_5","Expand","_hoisted_6"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAQC,GAKRC,IAAQC,EAAA,GAERC,IAAOC,GAKPC,IAAUC,EAAA;AAEhB,QAAI,CAACP,EAAM,SAAS,CAACE,EAAM;AACzB,YAAM,IAAI,MAAM,qDAAqD;AAGvE,UAAMM,IAAkBC,EAAIT,EAAM,UAAU;AAE5C,aAASU,IAAa;AACpB,MAAAN,EAAK,UAAU,EAAE,YAAYI,EAAgB,OAAO,GACpDJ,EAAKI,EAAgB,QAAQ,SAAS,OAAO;AAAA,IAC/C;AAEA,UAAMG,IAAS,MAAM;AACnB,MAAAH,EAAgB,QAAQ,CAACA,EAAgB,OACzCE,EAAA;AAAA,IACF;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,CAACa,MAAW;AACV,QAAAL,EAAgB,QAAQK,GACxBH,EAAA;AAAA,MACF;AAAA,IAAA,cAKFI,EAAA,GAAAC,EAoCM,OApCNC,GAoCM;AAAA,MAnCJC,EA2BM,OAAA;AAAA,QA1BJ,UAAS;AAAA,QACT,aAAU;AAAA,QACV,OAAKC,EAAA,CAAC,mDAAiD,CAC9CC,EAAAb,CAAA,EAAQ,QAAQE,EAAA,SAAmBW,EAAAb,CAAA,EAAO,cAAA,CAAA,CAAA,CAAA;AAAA,QAClD,SAAOK;AAAA,QACP,YAAQ;AAAA,YAAQA,GAAM,CAAA,OAAA,CAAA;AAAA,cACEA,GAAM,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,QAAA;AAAA;QAEpBQ,EAAAjB,CAAA,EAAM,eAAjBa,EAGM,OAAAK,GAAA;AAAA,UADJC,EAA4BC,EAAA,QAAA,QAAA;AAAA,QAAA,YAE9BP,EAKWQ,GAAA,EAAA,KAAA,KAAA;AAAA,UAJTC,EAAyGC,GAAA;AAAA,YAAnG,OAAM;AAAA,YAAmB,MAAK;AAAA,YAAS,MAAMzB,EAAM;AAAA,YAAM,aAAU;AAAA,UAAA;UACzEiB,EAEM,OAFNS,GAEMC,EADD3B,EAAM,KAAK,GAAA,CAAA;AAAA,QAAA;QAIlBwB,EAMEC,GAAA;AAAA,UALA,OAAKP,EAAA,CAAC,wFAAsF,EAAA,iBAIjEV,EAAA,MAAA,CAAe,CAAA;AAAA,UAH1C,MAAK;AAAA,UACL,MAAK;AAAA,UACL,aAAU;AAAA,QAAA;;MAIdoB,EAAAX,EAA0E,MAA1EY,GAA0E,MAAA,GAAA,GAAA;AAAA,YAA9DrB,EAAA,KAAe;AAAA,MAAA;MAC3BgB,EAKSM,GAAA,EALA,eAAatB,EAAA,SAAe;AAAA,mBACnC,MAGM;AAAA,UAHNS,EAGM,OAHNc,GAGM;AAAA,YADJV,EAAaC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../src/components/Accordion/Accordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule, useSlots, watch } from 'vue';\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 AccordionProps {\n    /**\n     * The filename of the icon that will be displayed on the left side of the header\n     */\n    icon?: IconName;\n\n    /**\n     * Title of the Accordion, displayed in the header\n     */\n    title?: string;\n\n    /**\n     * Whether the Accordion is expanded or not\n     */\n    isExpanded?: boolean;\n  }\n\n  type ToggleState = {\n    isExpanded: boolean;\n  };\n\n  const props = withDefaults(defineProps<AccordionProps>(), {\n    icon: 'circle-info',\n    title: undefined,\n    isExpanded: false,\n  });\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    (e: 'toggle', state: ToggleState): void;\n    (e: 'open' | 'close'): void;\n  }>();\n\n  const classes = useCssModule();\n\n  if (!props.title && !slots.header) {\n    throw new Error('Either a title prop or header slot must be provided');\n  }\n\n  const localIsExpanded = ref(props.isExpanded);\n\n  function emitEvents() {\n    emit('toggle', { isExpanded: localIsExpanded.value });\n    emit(localIsExpanded.value ? 'open' : 'close');\n  }\n\n  const toggle = () => {\n    localIsExpanded.value = !localIsExpanded.value;\n    emitEvents();\n  };\n\n  watch(\n    () => props.isExpanded,\n    (newVal) => {\n      localIsExpanded.value = newVal;\n      emitEvents();\n    },\n  );\n</script>\n\n<template>\n  <div class=\"stash-accordion tw-rounded tw-border tw-border-ice-500 tw-bg-white\" data-test=\"stash-accordion\">\n    <div\n      tabindex=\"0\"\n      data-test=\"stash-accordion|toggle\"\n      class=\"stash-accordion__toggle tw-flex tw-items-center\"\n      :class=\"[classes.toggle, localIsExpanded && classes['toggle--open']]\"\n      @click=\"toggle\"\n      @keypress.enter=\"toggle\"\n      @keypress.space.prevent=\"toggle\"\n    >\n      <div v-if=\"slots.header\">\n        <!-- @slot Accordion header -->\n        <slot name=\"header\"> </slot>\n      </div>\n      <template v-else>\n        <Icon class=\"tw-text-blue-500\" size=\"dense\" :name=\"props.icon\" data-test=\"stash-accordion|toggle-icon\" />\n        <div class=\"tw-flex-1 tw-select-none tw-font-medium tw-leading-5 tw-text-ice-900\">\n          {{ props.title }}\n        </div>\n      </template>\n\n      <Icon\n        class=\"tw-ml-auto tw-justify-center tw-text-ice-900 tw-transition-transform tw-duration-300\"\n        size=\"dense\"\n        name=\"chevron-down\"\n        data-test=\"stash-accordion|toggle-chevron\"\n        :class=\"{ 'tw-rotate-180': localIsExpanded }\"\n      />\n    </div>\n    <hr v-show=\"localIsExpanded\" class=\"tw-mx-[18px] tw-h-px tw-bg-ice-200\" />\n    <Expand :is-expanded=\"localIsExpanded\">\n      <div class=\"stash-accordion__content tw-p-[18px]\" data-test=\"stash-accordion|content\">\n        <!-- @slot Accordion content -->\n        <slot></slot>\n      </div>\n    </Expand>\n  </div>\n</template>\n\n<style module>\n  .toggle {\n    @apply tw-outline-none tw-ring-blue-500 tw-ring-opacity-15;\n\n    display: flex;\n    cursor: pointer;\n    gap: theme('gap[1.5]');\n    padding: 17px;\n    outline: none;\n    border-radius: theme('borderRadius.DEFAULT');\n\n    &:focus-visible {\n      @apply tw-ring-4;\n      border-color: var(--color-ice-900);\n      padding: 15px;\n      border-width: 2px;\n    }\n\n    &--open {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-ice-100);\n      }\n    }\n\n    &:active {\n      background-color: var(--color-ice-200);\n    }\n\n    &:active + hr,\n    &:hover + hr {\n      opacity: 0;\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","classes","useCssModule","localIsExpanded","ref","emitEvents","toggle","watch","newVal"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAQC,GAKRC,IAAQC,EAAA,GAERC,IAAOC,GAKPC,IAAUC,EAAA;AAEhB,QAAI,CAACP,EAAM,SAAS,CAACE,EAAM;AACzB,YAAM,IAAI,MAAM,qDAAqD;AAGvE,UAAMM,IAAkBC,EAAIT,EAAM,UAAU;AAE5C,aAASU,IAAa;AACpB,MAAAN,EAAK,UAAU,EAAE,YAAYI,EAAgB,OAAO,GACpDJ,EAAKI,EAAgB,QAAQ,SAAS,OAAO;AAAA,IAC/C;AAEA,UAAMG,IAAS,MAAM;AACnB,MAAAH,EAAgB,QAAQ,CAACA,EAAgB,OACzCE,EAAA;AAAA,IACF;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,CAACa,MAAW;AACV,QAAAL,EAAgB,QAAQK,GACxBH,EAAA;AAAA,MACF;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion.vue.d.ts

@@ -1,15 +1,38 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare interface AccordionProps {
+export declare interface AccordionProps {
     /**
      * The filename of the icon that will be displayed on the left side of the header
      */
@@ -24,19 +47,27 @@ declare interface AccordionProps {
     isExpanded?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<AccordionProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AccordionProps>, {
+icon: string;
+title: undefined;
+isExpanded: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 toggle: (state: ToggleState) => void;
 close: () => void;
 open: () => void;
-}, string, PublicProps, Readonly<AccordionProps> & Readonly<{
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AccordionProps>, {
+icon: string;
+title: undefined;
+isExpanded: boolean;
+}>>> & Readonly<{
 onClose?: (() => any) | undefined;
 onToggle?: ((state: ToggleState) => any) | undefined;
 onOpen?: (() => any) | undefined;
 }>, {
-title: string;
-icon: "search" | "sort" | "submit" | "combine" | "split" | "link" | "close" | "copy" | "message" | "menu" | "hazard" | "circle-warning" | "circle-info" | "circle-check" | "action-dots" | "activity" | "alert-bell" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "badge-discount" | "badge-seller-elite" | "badge-seller-power" | "badge-seller-verified" | "bank" | "book-customer" | "building-office" | "bulk-add" | "calendar-reschedule" | "calendar" | "camera" | "caret-down" | "caret-up" | "change-log" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-close" | "circle-dollar" | "circle-empty" | "circle-partial" | "circle-percent" | "circle-question-mark" | "circle-slash" | "circle-status" | "clipboard-checkmark" | "clipboard-inventory" | "cloud-share" | "compass" | "contact" | "contract" | "credit-card" | "credit-profile" | "dashboard" | "document-accept" | "document-invoice" | "document-recieved" | "document-sent" | "document-view" | "document" | "dolly" | "download" | "edit" | "ellipsis" | "envelope-open" | "envelope" | "equals" | "export" | "face-id" | "face" | "figma" | "file-csv" | "file" | "filter-funnel" | "filter-line" | "fingerprint" | "flag" | "folder" | "folder-bar-graph" | "folder-orders" | "font-bold" | "font-clear-format" | "font-italic" | "font-underline" | "gear" | "github" | "globe" | "graph-bar-chart" | "graph-line-chart" | "graph-pie-chart" | "hazard-outline" | "headset-agent" | "headset-mic" | "heart-filled" | "heart-outline" | "help-question-mark" | "hide" | "history" | "home" | "image" | "import" | "keyboard-return" | "tier-1" | "tier-2" | "tier-3" | "license-approved" | "license-certificate" | "lightbulb" | "link-add" | "link-unlink" | "list-bulleted" | "list-items" | "list-numbered" | "loading-big" | "loading-empty" | "loading-small" | "location" | "lock-unlock" | "lock" | "logo-facebook" | "logo-instagram" | "logo-linkedin" | "logo-ll" | "logo-metrc" | "logo-plaid" | "logo-x" | "logo-youtube" | "logout" | "medical" | "megaphone-sound" | "megaphone" | "message-dispute" | "message-reply" | "minus" | "mj-leaf" | "money" | "note-add" | "note" | "open-in-new" | "paperclip" | "paper-plane" | "performance" | "phone" | "plus" | "preview" | "print" | "product-menu-manage" | "product-menu-search" | "product-menu" | "queue-add" | "queue" | "recent" | "refresh" | "register" | "reorder" | "reply" | "report-download" | "sample" | "save" | "scale-law" | "scale-weight" | "seed-cycle" | "share" | "shop-bag-browse" | "shop-bag-reorder" | "shop-bag" | "shop-basket" | "shop-cart-add" | "shop-cart" | "show" | "sign-dollar" | "sign-percent" | "star-filled" | "star-outline" | "start" | "storefront" | "swap-horizontal" | "swap-vertical" | "tag-star" | "tag" | "tag-leaf" | "test-results" | "ticket-star" | "ticket" | "tool-dropper" | "tool-wrench" | "transfer" | "trashcan" | "truck" | "upload" | "user-add" | "user-admin" | "user-check" | "user-group" | "user" | "view-card" | "view-detailed" | "view-list" | "warehouse" | "working";
 isExpanded: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
+title: string;
+icon: "close" | "copy" | "submit" | "sort" | "search" | "split" | "link" | "tag" | "menu" | "image" | "action-dots" | "activity" | "alert-bell" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "badge-discount" | "badge-seller-elite" | "badge-seller-power" | "badge-seller-verified" | "bank" | "book-customer" | "building-office" | "bulk-add" | "calendar-reschedule" | "calendar" | "camera" | "caret-down" | "caret-up" | "change-log" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-check" | "circle-close" | "circle-dollar" | "circle-empty" | "circle-info" | "circle-partial" | "circle-percent" | "circle-question-mark" | "circle-slash" | "circle-status" | "circle-warning" | "clipboard-checkmark" | "clipboard-inventory" | "cloud-share" | "combine" | "compass" | "contact" | "contract" | "credit-card" | "credit-profile" | "dashboard" | "document-accept" | "document-invoice" | "document-recieved" | "document-sent" | "document-view" | "document" | "dolly" | "download" | "edit" | "ellipsis" | "envelope-open" | "envelope" | "equals" | "export" | "face-id" | "face" | "figma" | "file-csv" | "file" | "filter-funnel" | "filter-line" | "fingerprint" | "flag" | "folder" | "folder-bar-graph" | "folder-orders" | "font-bold" | "font-clear-format" | "font-italic" | "font-underline" | "gear" | "github" | "globe" | "graph-bar-chart" | "graph-line-chart" | "graph-pie-chart" | "hazard" | "hazard-outline" | "headset-agent" | "headset-mic" | "heart-filled" | "heart-outline" | "help-question-mark" | "hide" | "history" | "home" | "import" | "keyboard-return" | "tier-1" | "tier-2" | "tier-3" | "license-approved" | "license-certificate" | "lightbulb" | "link-add" | "link-unlink" | "list-bulleted" | "list-items" | "list-numbered" | "loading-big" | "loading-empty" | "loading-small" | "location" | "lock-unlock" | "lock" | "logo-facebook" | "logo-instagram" | "logo-linkedin" | "logo-ll" | "logo-metrc" | "logo-plaid" | "logo-x" | "logo-youtube" | "logout" | "medical" | "megaphone-sound" | "megaphone" | "message-dispute" | "message-reply" | "message" | "minus" | "mj-leaf" | "money" | "note-add" | "note" | "open-in-new" | "paperclip" | "paper-plane" | "performance" | "phone" | "plus" | "preview" | "print" | "product-menu-manage" | "product-menu-search" | "product-menu" | "queue-add" | "queue" | "recent" | "refresh" | "register" | "reorder" | "reply" | "report-download" | "sample" | "save" | "scale-law" | "scale-weight" | "seed-cycle" | "share" | "shop-bag-browse" | "shop-bag-reorder" | "shop-bag" | "shop-basket" | "shop-cart-add" | "shop-cart" | "show" | "sign-dollar" | "sign-percent" | "star-filled" | "star-outline" | "start" | "storefront" | "swap-horizontal" | "swap-vertical" | "tag-star" | "tag-leaf" | "test-results" | "ticket-star" | "ticket" | "tool-dropper" | "tool-wrench" | "transfer" | "trashcan" | "truck" | "upload" | "user-add" | "user-admin" | "user-check" | "user-group" | "user" | "view-card" | "view-detailed" | "view-list" | "warehouse" | "working";
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     header?(_: {}): any;
     default?(_: {}): any;
 }>;

package/dist/ActionsDropdown.js

@@ -35,8 +35,8 @@ const y = /* @__PURE__ */ i({
               name: "caret-down"
             })
           ]),
-          _: 1
-        }, 8, ["aria-expanded", "class", "disabled", "onClick"])
+          _: 2
+        }, 1032, ["aria-expanded", "class", "disabled", "onClick"])
       ]),
       _: 2
     }, [

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 tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-border-blue-500 tw-text-blue-500\"\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-500) !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":["props","__props","classes","useCssModule","_createBlock","Dropdown","_unref","_normalizeClass","_withCtx","isActive","toggle","_createVNode","Button","Icon","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAUC,EAAA;2BAIhBC,EAsBWC,GAAA;AAAA,MArBR,OAAOL,EAAM;AAAA,MACb,kBAAgBM,EAAAJ,CAAA,EAAQ,iBAAiBF,EAAM,YAAY;AAAA,MAC3D,OAAKO,EAAED,EAAAJ,CAAA,EAAQ,eAAe;AAAA,IAAA;MAEpB,QAAMM,EACf,CASS,EAVU,UAAAC,GAAU,QAAAC,QAAM;AAAA,QACnCC,EASSC,GAAA;AAAA,UARP,OAAKL,EAAA,CAAC,6GAA2G,CAGxGD,EAAAJ,CAAA,EAAQ,cAAY,EAAA,CAAKI,EAAAJ,CAAA,EAAQ,QAAQ,GAAGF,EAAM,SAAA,CAAQ,CAAA,CAAA;AAAA,UAFnE,WAAA;AAAA,UACC,iBAAeS,EAAS,SAAA;AAAA,UAExB,UAAUT,EAAM;AAAA,UAChB,SAAOU;AAAA,QAAA;qBAER,MAAsB;AAAA,gBAAnBV,EAAM,UAAU,IAAG,KAAC,CAAA;AAAA,YAAAW,EAA4CE,GAAA;AAAA,cAAtC,OAAM;AAAA,cAAY,MAAK;AAAA,YAAA;;;;;;;MAIvCb,EAAM;cAAW;AAAA,cAEhC,MAAa;AAAA,UAAbc,EAAaC,EAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;"}
+{"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 tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-border-blue-500 tw-text-blue-500\"\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-500) !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":["props","__props","classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAUC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ActionsDropdown.vue.d.ts

@@ -1 +1,75 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare interface ActionsDropdownProps {
+    /**
+     * Used to position the dropdown relative to target
+     * Options: left, right
+     */
+    align?: 'left' | 'right';
+    /**
+     * Indicates whether the trigger button is disabled or not
+     */
+    disabled?: boolean;
+    /**
+     * Class to be applied to the dropdown content
+     */
+    contentClass?: string;
+    /**
+     * Text to be displayed on the trigger button
+     */
+    buttonText?: string;
+}
+
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ActionsDropdownProps>, {
+align: string;
+disabled: boolean;
+contentClass: string;
+buttonText: () => any;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ActionsDropdownProps>, {
+align: string;
+disabled: boolean;
+contentClass: string;
+buttonText: () => any;
+}>>> & Readonly<{}>, {
+disabled: boolean;
+align: "left" | "right";
+contentClass: string;
+buttonText: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+
 export { }

package/dist/AddressSelect.js

@@ -1,16 +1,16 @@
-import { defineComponent as x, useSlots as E, inject as w, computed as u, ref as i, watch as B, createBlock as M, openBlock as S, unref as c, createSlots as A, withCtx as T, renderSlot as I } from "vue";
-import P from "lodash-es/debounce";
-import j from "lodash-es/uniqueId";
-import k from "./useGoogleMaps.js";
-import { DEBOUNCE as D } from "./constants.js";
-import G from "./Select.js";
-const p = "address-select-", L = /* @__PURE__ */ x({
+import { defineComponent as S, useSlots as A, inject as T, computed as h, ref as n, watch as I, createBlock as P, openBlock as j, unref as y, createSlots as k, withCtx as D, renderSlot as G } from "vue";
+import K from "lodash-es/debounce";
+import C from "lodash-es/uniqueId";
+import U from "./useGoogleMaps.js";
+import { DEBOUNCE as q } from "./constants.js";
+import F from "./Select.js";
+const _ = "address-select-", $ = /* @__PURE__ */ S({
   __name: "AddressSelect",
   props: {
     apiKey: { default: void 0 },
     disabled: { type: Boolean, default: !1 },
     placeholder: { default: "Type an address" },
-    debounceTime: { default: D.MEDIUM },
+    debounceTime: { default: q.MEDIUM },
     modelValue: { default: () => ({
       street_address: void 0,
       extended_address: void 0,
@@ -25,45 +25,49 @@ const p = "address-select-", L = /* @__PURE__ */ x({
     preventEmpty: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "error"],
-  setup(m, { emit: f }) {
-    const e = m, l = f, v = E(), h = w("stashOptions"), n = u(() => e.apiKey || h?.googleMapsApiKey);
-    if (!n.value)
+  setup(g, { emit: V }) {
+    const t = g, l = V, b = A(), s = T("stashOptions"), u = h(() => t.apiKey || (s == null ? void 0 : s.googleMapsApiKey));
+    if (!u.value)
       throw new Error("Google Maps API key is required");
-    const { getPlaceDetails: y, getPlacePredictions: _ } = k(n.value), r = i(!1), a = i(), d = i(), g = P(V, e.debounceTime), s = u(() => [
-      [e.modelValue?.street_address, e.modelValue?.extended_address].filter(Boolean).join(" "),
-      e.modelValue?.city,
-      [e.modelValue?.state, e.modelValue?.postal_code].filter(Boolean).join(" "),
-      e.modelValue?.country
-    ].filter(Boolean).join(", "));
-    B(
-      () => e.modelValue,
+    const { getPlaceDetails: x, getPlacePredictions: E } = U(u.value), r = n(!1), a = n(), d = n(), w = K(B, t.debounceTime), i = h(() => {
+      var e, c, m, p, f, v;
+      return [
+        [(e = t.modelValue) == null ? void 0 : e.street_address, (c = t.modelValue) == null ? void 0 : c.extended_address].filter(Boolean).join(" "),
+        (m = t.modelValue) == null ? void 0 : m.city,
+        [(p = t.modelValue) == null ? void 0 : p.state, (f = t.modelValue) == null ? void 0 : f.postal_code].filter(Boolean).join(" "),
+        (v = t.modelValue) == null ? void 0 : v.country
+      ].filter(Boolean).join(", ");
+    });
+    I(
+      () => t.modelValue,
       () => {
-        if (s.value && !a.value?.length) {
-          const t = {
-            id: e.modelValue.place_id || j(p),
-            name: s.value,
-            address: e.modelValue
+        var o;
+        if (i.value && !((o = a.value) != null && o.length)) {
+          const e = {
+            id: t.modelValue.place_id || C(_),
+            name: i.value,
+            address: t.modelValue
           };
-          a.value = [t], d.value = t;
-        } else s.value || (d.value = void 0, a.value = []);
+          a.value = [e], d.value = e;
+        } else i.value || (d.value = void 0, a.value = []);
       },
       { immediate: !0 }
     );
-    async function V(t) {
+    async function B(o) {
       r.value = !0;
       try {
-        a.value = await _(t);
-      } catch (o) {
-        if (a.value = [], o?.isGoogleMapsError)
-          l("error", o);
+        a.value = await E(o);
+      } catch (e) {
+        if (a.value = [], e != null && e.isGoogleMapsError)
+          l("error", e);
         else
-          throw o;
+          throw e;
       } finally {
         r.value = !1;
       }
     }
-    async function b(t) {
-      if (d.value = t, !t) {
+    async function M(o) {
+      if (d.value = o, !o) {
         l("update:modelValue", {
           street_address: void 0,
           extended_address: void 0,
@@ -74,40 +78,40 @@ const p = "address-select-", L = /* @__PURE__ */ x({
         });
         return;
       }
-      if (t.id.startsWith(p) && t.address) {
-        l("update:modelValue", t.address);
+      if (o.id.startsWith(_) && o.address) {
+        l("update:modelValue", o.address);
         return;
       }
       try {
-        const o = await y(t.id);
-        l("update:modelValue", o);
-      } catch (o) {
-        if (o?.isGoogleMapsError)
-          l("error", o);
+        const e = await x(o.id);
+        l("update:modelValue", e);
+      } catch (e) {
+        if (e != null && e.isGoogleMapsError)
+          l("error", e);
         else
-          throw o;
+          throw e;
       }
     }
-    return (t, o) => (S(), M(G, {
+    return (o, e) => (j(), P(F, {
       single: "",
       "data-test": "select|address",
-      disabled: e.disabled,
+      disabled: t.disabled,
       loading: r.value,
       options: a.value,
-      placeholder: e.placeholder,
-      label: e.label,
-      "hint-text": e.hintText,
-      error: e.errorText,
+      placeholder: t.placeholder,
+      label: t.label,
+      "hint-text": t.hintText,
+      error: t.errorText,
       "model-value": d.value,
-      "prevent-empty": e.preventEmpty,
+      "prevent-empty": t.preventEmpty,
       "disable-filtering": "",
-      onSearch: c(g),
-      "onUpdate:modelValue": b
-    }, A({ _: 2 }, [
-      c(v).hint ? {
+      onSearch: y(w),
+      "onUpdate:modelValue": M
+    }, k({ _: 2 }, [
+      y(b).hint ? {
         name: "hint",
-        fn: T(() => [
-          I(t.$slots, "hint")
+        fn: D(() => [
+          G(o.$slots, "hint")
         ]),
         key: "0"
       } : void 0
@@ -115,6 +119,6 @@ const p = "address-select-", L = /* @__PURE__ */ x({
   }
 });
 export {
-  L as default
+  $ 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    ]\n      .filter(Boolean)\n      .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(\n    () => props.modelValue,\n    () => {\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    },\n    { immediate: true },\n  );\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","props","__props","emit","__emit","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","watch","option","uniqueId","query","error","select","address","_createBlock","Select","_unref","_renderSlot","_ctx"],"mappings":"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"}
+{"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    ]\n      .filter(Boolean)\n      .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(\n    () => props.modelValue,\n    () => {\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    },\n    { immediate: true },\n  );\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","props","__props","emit","__emit","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","select","address"],"mappings":"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"}

package/dist/AddressSelect.vue.d.ts

@@ -1,8 +1,31 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -48,7 +71,7 @@ declare interface Address {
     place_id?: string;
 }
 
-declare interface AddressSelectProps {
+export declare interface AddressSelectProps {
     /**
      * Google Maps API Key. This takes precedence over the key defined in stashOptions
      */
@@ -87,23 +110,57 @@ declare interface AddressSelectProps {
     preventEmpty?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<AddressSelectProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-error: (value: unknown) => any;
-"update:modelValue": (value: Address) => any;
-}, string, PublicProps, Readonly<AddressSelectProps> & Readonly<{
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AddressSelectProps>, {
+disabled: boolean;
+placeholder: string;
+debounceTime: 1000;
+modelValue: () => {
+street_address: undefined;
+extended_address: undefined;
+city: undefined;
+state: undefined;
+postal_code: undefined;
+country: undefined;
+};
+hintText: undefined;
+errorText: undefined;
+label: undefined;
+preventEmpty: boolean;
+apiKey: undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: Address) => void;
+error: (value: unknown) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AddressSelectProps>, {
+disabled: boolean;
+placeholder: string;
+debounceTime: 1000;
+modelValue: () => {
+street_address: undefined;
+extended_address: undefined;
+city: undefined;
+state: undefined;
+postal_code: undefined;
+country: undefined;
+};
+hintText: undefined;
+errorText: undefined;
+label: undefined;
+preventEmpty: boolean;
+apiKey: undefined;
+}>>> & Readonly<{
 onError?: ((value: unknown) => any) | undefined;
 "onUpdate:modelValue"?: ((value: Address) => any) | undefined;
 }>, {
-label: string;
-placeholder: string;
 disabled: boolean;
+label: string;
 errorText: string;
 hintText: string;
+placeholder: string;
 preventEmpty: boolean;
 modelValue: Address;
 apiKey: string;
 debounceTime: number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     hint?(_: {}): any;
 }>;
 export default _default;