@leaflink/stash 51.11.0 → 51.11.1

package/dist/Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js","sources":["../src/components/Expand/Expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { onMounted, ref } from 'vue';\n\n  defineOptions({\n    name: 'll-expand',\n  });\n\n  export type ExpandOuterElement = 'div' | 'td' | 'li';\n\n  export interface ExpandProps {\n    /**\n     * The root element to use as the root element the expand transition gets applied to\n     */\n    is?: ExpandOuterElement;\n\n    /**\n     * Dictates whether the content is expanded or collapsed\n     */\n    isExpanded?: boolean;\n\n    /**\n     * Whether to only render content on expand\n     */\n    isLazy?: boolean;\n\n    /**\n     * The name of the transition to pass to the transition component\n     * @see: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions\n     */\n    transitionName?: string;\n  }\n\n  const props = withDefaults(defineProps<ExpandProps>(), {\n    is: 'div',\n    isExpanded: false,\n    isLazy: false,\n    transitionName: 'expand',\n  });\n\n  const emit = defineEmits<{\n    (e: 'after-expand'): void;\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n\n  onMounted(() => {\n    if (!props.isExpanded && contentRef.value) {\n      contentRef.value.style.overflow = 'hidden';\n    }\n  });\n\n  /**\n   * Expands the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onExpand = (element) => {\n    // Trick to calculate the height of the hidden element\n    element.style.visibility = 'hidden';\n    element.style.height = 'auto';\n\n    const height = element.offsetHeight;\n\n    // Restore default styling\n    element.style.visibility = '';\n    element.style.display = '';\n\n    // Set height on the element to zero\n    element.style.height = 0;\n\n    // Set expanded height after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = `${height}px`;\n    });\n  };\n\n  /**\n   * Resores default styling after the expand animation is completed\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const afterExpand = (element) => {\n    element.style.height = '';\n    element.style.overflow = '';\n    emit('after-expand');\n  };\n\n  /**\n   * Collapses the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onCollapse = (element) => {\n    const height = element.offsetHeight;\n\n    // Set height to the expanded height\n    element.style.height = `${height}px`;\n    element.style.overflow = 'hidden';\n\n    // Set height to zero after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = 0;\n    });\n  };\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    class=\"stash-expand\"\n    data-test=\"stash-expand\"\n    :class=\"{\n      'stash-expand--expanded': isExpanded,\n      'stash-expand--collapsed': !isExpanded,\n    }\"\n  >\n    <transition :name=\"transitionName\" @after-enter=\"afterExpand\" @enter=\"onExpand\" @leave=\"onCollapse\">\n      <template v-if=\"isLazy\">\n        <div v-if=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n      <template v-else>\n        <div v-show=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n    </transition>\n  </component>\n</template>\n"],"names":["props","__props","emit","__emit","contentRef","ref","onMounted","onExpand","element","height","afterExpand","onCollapse","_createBlock","_resolveDynamicComponent","isExpanded","_createVNode","_Transition","transitionName","isLazy","_createElementBlock","_Fragment","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAOC,GAIPC,IAAaC,EAAwB,IAAI;AAE/C,IAAAC,EAAU,MAAM;AACd,MAAI,CAACN,EAAM,cAAcI,EAAW,UAClCA,EAAW,MAAM,MAAM,WAAW;AAAA,IAEtC,CAAC;AAOD,UAAMG,IAAW,CAACC,MAAY;AAE5B,MAAAA,EAAQ,MAAM,aAAa,UAC3BA,EAAQ,MAAM,SAAS;AAEvB,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,aAAa,IAC3BA,EAAQ,MAAM,UAAU,IAGxBA,EAAQ,MAAM,SAAS,GAGvB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS,GAAGC,CAAM;AAAA,MAClC,CAAC;AAAA,IACH,GAOMC,IAAc,CAACF,MAAY;AAC/B,MAAAA,EAAQ,MAAM,SAAS,IACvBA,EAAQ,MAAM,WAAW,IACzBN,EAAK,cAAc;AAAA,IACrB,GAOMS,IAAa,CAACH,MAAY;AAC9B,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,SAAS,GAAGC,CAAM,MAChCD,EAAQ,MAAM,WAAW,UAGzB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;2BAIAI,EAqBYC,EApBLb,EAAM,EAAE,GAAA;AAAA,MACb,UAAM,gBAAc;AAAA,kCAEsBc,EAAAA;AAAAA,oCAA8CA,EAAAA;AAAAA,MAAAA;MADxF,aAAU;AAAA,IAAA;iBAMV,MAWa;AAAA,QAXbC,EAWaC,GAAA;AAAA,UAXA,MAAMC,EAAAA;AAAAA,UAAiB,cAAaP;AAAA,UAAc,SAAOH;AAAA,UAAW,SAAOI;AAAA,QAAA;qBACtF,MAIW;AAAA,YAJKO,EAAAA,eAAhBC,EAIWC,GAAA,EAAA,KAAA,KAAA;AAAA,cAHEN,EAAAA,mBAAXK,EAEM,OAAA;AAAA;yBAFqB;AAAA,gBAAJ,KAAIf;AAAA,cAAA;gBACzBiB,EAAaC,EAAA,QAAA,SAAA;AAAA,cAAA;8BAIfH,EAEM,OAAA;AAAA;uBAFuB;AAAA,cAAJ,KAAIf;AAAA,YAAA;cAC3BiB,EAAaC,EAAA,QAAA,SAAA;AAAA,YAAA;kBADFR,EAAAA,UAAU;AAAA,YAAA;;;;;;;;;"}
+{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js","sources":["../src/components/Expand/Expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { onMounted, ref } from 'vue';\n\n  defineOptions({\n    name: 'll-expand',\n  });\n\n  export type ExpandOuterElement = 'div' | 'td' | 'li';\n\n  export interface ExpandProps {\n    /**\n     * The root element to use as the root element the expand transition gets applied to\n     */\n    is?: ExpandOuterElement;\n\n    /**\n     * Dictates whether the content is expanded or collapsed\n     */\n    isExpanded?: boolean;\n\n    /**\n     * Whether to only render content on expand\n     */\n    isLazy?: boolean;\n\n    /**\n     * The name of the transition to pass to the transition component\n     * @see: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions\n     */\n    transitionName?: string;\n  }\n\n  const props = withDefaults(defineProps<ExpandProps>(), {\n    is: 'div',\n    isExpanded: false,\n    isLazy: false,\n    transitionName: 'expand',\n  });\n\n  const emit = defineEmits<{\n    (e: 'after-expand'): void;\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n\n  onMounted(() => {\n    if (!props.isExpanded && contentRef.value) {\n      contentRef.value.style.overflow = 'hidden';\n    }\n  });\n\n  /**\n   * Expands the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onExpand = (element) => {\n    // Trick to calculate the height of the hidden element\n    element.style.visibility = 'hidden';\n    element.style.height = 'auto';\n\n    const height = element.offsetHeight;\n\n    // Restore default styling\n    element.style.visibility = '';\n    element.style.display = '';\n\n    // Set height on the element to zero\n    element.style.height = 0;\n\n    // Set expanded height after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = `${height}px`;\n    });\n  };\n\n  /**\n   * Resores default styling after the expand animation is completed\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const afterExpand = (element) => {\n    element.style.height = '';\n    element.style.overflow = '';\n    emit('after-expand');\n  };\n\n  /**\n   * Collapses the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onCollapse = (element) => {\n    const height = element.offsetHeight;\n\n    // Set height to the expanded height\n    element.style.height = `${height}px`;\n    element.style.overflow = 'hidden';\n\n    // Set height to zero after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = 0;\n    });\n  };\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    class=\"stash-expand\"\n    data-test=\"stash-expand\"\n    :class=\"{\n      'stash-expand--expanded': isExpanded,\n      'stash-expand--collapsed': !isExpanded,\n    }\"\n  >\n    <transition :name=\"transitionName\" @after-enter=\"afterExpand\" @enter=\"onExpand\" @leave=\"onCollapse\">\n      <template v-if=\"isLazy\">\n        <div v-if=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n      <template v-else>\n        <div v-show=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n    </transition>\n  </component>\n</template>\n"],"names":["props","__props","emit","__emit","contentRef","ref","onMounted","onExpand","element","height","afterExpand","onCollapse"],"mappings":";;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAOC,GAIPC,IAAaC,EAAwB,IAAI;AAE/C,IAAAC,EAAU,MAAM;AACd,MAAI,CAACN,EAAM,cAAcI,EAAW,UACvBA,EAAA,MAAM,MAAM,WAAW;AAAA,IACpC,CACD;AAOK,UAAAG,IAAW,CAACC,MAAY;AAE5B,MAAAA,EAAQ,MAAM,aAAa,UAC3BA,EAAQ,MAAM,SAAS;AAEvB,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,aAAa,IAC3BA,EAAQ,MAAM,UAAU,IAGxBA,EAAQ,MAAM,SAAS,GAGvB,sBAAsB,MAAM;AAClB,QAAAA,EAAA,MAAM,SAAS,GAAGC,CAAM;AAAA,MAAA,CACjC;AAAA,IACH,GAOMC,IAAc,CAACF,MAAY;AAC/B,MAAAA,EAAQ,MAAM,SAAS,IACvBA,EAAQ,MAAM,WAAW,IACzBN,EAAK,cAAc;AAAA,IACrB,GAOMS,IAAa,CAACH,MAAY;AAC9B,YAAMC,IAASD,EAAQ;AAGf,MAAAA,EAAA,MAAM,SAAS,GAAGC,CAAM,MAChCD,EAAQ,MAAM,WAAW,UAGzB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS;AAAA,MAAA,CACxB;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Field.vue.d.ts

@@ -1,19 +1,68 @@
 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 const _default: __VLS_WithTemplateSlots<DefineComponent<FieldProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<FieldProps> & Readonly<{}>, {
-id: string;
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps>, {
+addBottomSpace: boolean;
+errorText: undefined;
+hintText: undefined;
+id: undefined;
+errorId: undefined;
+isRequired: boolean;
+label: undefined;
+showOptionalInLabel: boolean;
+isLabelSrOnly: boolean;
 fieldset: boolean;
-label: string;
+isDisabled: boolean;
+disabled: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps>, {
+addBottomSpace: boolean;
+errorText: undefined;
+hintText: undefined;
+id: undefined;
+errorId: undefined;
+isRequired: boolean;
+label: undefined;
+showOptionalInLabel: boolean;
+isLabelSrOnly: boolean;
+fieldset: boolean;
+isDisabled: boolean;
+disabled: boolean;
+}>>> & Readonly<{}>, {
 disabled: boolean;
+fieldset: boolean;
+label: string;
+id: string;
 isRequired: boolean;
 isDisabled: boolean;
 addBottomSpace: boolean;
@@ -22,7 +71,7 @@ hintText: string;
 errorId: string;
 showOptionalInLabel: boolean;
 isLabelSrOnly: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {
         fieldId: string;
         fieldErrorId: string;

package/dist/Field.vue_vue_type_script_setup_true_lang-DI6z3AE9.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-DI6z3AE9.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { FieldProps } from './Field.types';\n\n  export * from './Field.types';\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  defineOptions({\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    isLabelSrOnly: false,\n    fieldset: false,\n    isDisabled: false,\n    disabled: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('stash-field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('stash-field-error-'));\n  const labelId = computed(() => uniqueId('stash-field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    data-test=\"stash-field\"\n    class=\"stash-field\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n      { 'stash-field--disabled': props.isDisabled || props.disabled },\n      { 'stash-field--is-read-only': props.isReadOnly },\n      { 'stash-field--is-required': props.isRequired },\n      { 'stash-field--has-error': hasError },\n    ]\"\n    v-bind=\"rootAttrs\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :is-sr-only=\"props.isLabelSrOnly\"\n      :legend=\"props.fieldset\"\n      :disabled=\"props.isDisabled || props.disabled\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <slot\n      :field-id=\"fieldId\"\n      :field-error-id=\"fieldErrorId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :is-read-only=\"props.isReadOnly\"\n      :disabled=\"props.isDisabled || props.disabled\"\n      :label-id=\"labelId\"\n      :show-optional-in-label=\"props.showOptionalInLabel\"\n    ></slot>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"stash-field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span\n      v-else-if=\"props.hintText && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      {{ props.hintText }}\n    </span>\n\n    <div\n      v-else-if=\"slots.hint && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      <!-- @slot for displaying hint text below the field -->\n      <slot name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","fieldId","computed","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","Label","isRequired","_createTextVNode","_toDisplayString","_renderSlot","_ctx","_createElementBlock","_hoisted_1","_openBlock","_hoisted_2","_hoisted_3"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAcRC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAUC,EAAS,MAAMP,EAAM,MAAMQ,EAAS,cAAc,CAAC,GAC7DC,IAAeF,EAAS,MAAMP,EAAM,WAAWQ,EAAS,oBAAoB,CAAC,GAC7EE,IAAUH,EAAS,MAAMC,EAAS,oBAAoB,CAAC,GACvDG,IAAWJ,EAAS,MAAM,CAAC,CAACP,EAAM,SAAS,GAC3CY,IAAiBL,EAAS,MAAOP,EAAM,WAAW,aAAa,KAAM,GAIrEa,IAAYN,EAAS,MAAM;AAC/B,YAAM,EAAE,aAAAO,GAAa,GAAGC,EAAA,IAAeb;AAEvC,aAAOa;AAAA,IACT,CAAC;2BAIDC,EAkEYC,EAjELL,EAAA,KAAc,GADrBM,EAkEY;AAAA,MAhEV,aAAU;AAAA,MACV,QAAM,eAAa;AAAA,QACS,EAAA,UAAAlB,EAAM,SAAA;AAAA,QAA+B,EAAA,WAAAA,EAAM,kBAAc,CAAKA,EAAM,aAAS,CAAKA,EAAM,YAAQ,CAAKmB,EAAAf,CAAA,EAAM,KAAA;AAAA,QAA2B,EAAA,WAAAJ,EAAM,mBAAmBA,EAAM,aAAaA,EAAM,YAAYmB,EAAAf,CAAA,EAAM,MAAA;AAAA,QAA0C,EAAA,yBAAAJ,EAAM,cAAcA,EAAM,SAAA;AAAA,QAAiD,EAAA,6BAAAA,EAAM,WAAA;AAAA,QAAkD,EAAA,4BAAAA,EAAM,WAAA;AAAA,oCAAgDW,EAAA,MAAA;AAAA,MAAQ;OASzcE,EAAA,KAAS,GAAA;AAAA,iBAEjB,MAYQ;AAAA,QAXAb,EAAM,cADdgB,EAYQI,GAAA;AAAA;UAVL,IAAIV,EAAA;AAAA,UACJ,KAAKJ,EAAA;AAAA,UACL,aAAWK,EAAA;AAAA,UACX,eAAaU,EAAAA;AAAAA,UACb,iBAAerB,EAAM;AAAA,UACrB,cAAYA,EAAM;AAAA,UAClB,QAAQA,EAAM;AAAA,UACd,UAAUA,EAAM,cAAcA,EAAM;AAAA,QAAA;qBAErC,MAAiB;AAAA,YAAdsB,EAAAC,EAAAvB,EAAM,KAAK,GAAA,CAAA;AAAA,UAAA;;;QAIhBwB,EASQC,EAAA,QAAA,WAAA;AAAA,UARL,SAAUnB,EAAA;AAAA,UACV,cAAgBG,EAAA;AAAA,UAChB,UAAWE,EAAA;AAAA,UACX,YAAaU,EAAAA;AAAAA,UACb,YAAcrB,EAAM;AAAA,UACpB,UAAUA,EAAM,cAAcA,EAAM;AAAA,UACpC,SAAUU,EAAA;AAAA,UACV,qBAAwBV,EAAM;AAAA,QAAA;QAIzBA,EAAM,kBADd0B,EAOO,QAAA;AAAA;UALJ,IAAIjB,EAAA;AAAA,UACL,OAAM;AAAA,UACN,aAAU;AAAA,QAAA,GAEPc,EAAAvB,EAAM,SAAS,GAAA,GAAA2B,CAAA,KAIP3B,EAAM,YAAQ,CAAKA,EAAM,cADtC4B,EAAA,GAAAF,EAMO,QANPG,GAMON,EADFvB,EAAM,QAAQ,GAAA,CAAA,KAINmB,EAAAf,CAAA,EAAM,QAAI,CAAKJ,EAAM,cADlC4B,EAAA,GAAAF,EAOM,OAPNI,GAOM;AAAA,UADJN,EAAyBC,EAAA,QAAA,MAAA;AAAA,QAAA;;;;;;"}
+{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-DI6z3AE9.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { FieldProps } from './Field.types';\n\n  export * from './Field.types';\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  defineOptions({\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    isLabelSrOnly: false,\n    fieldset: false,\n    isDisabled: false,\n    disabled: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('stash-field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('stash-field-error-'));\n  const labelId = computed(() => uniqueId('stash-field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    data-test=\"stash-field\"\n    class=\"stash-field\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n      { 'stash-field--disabled': props.isDisabled || props.disabled },\n      { 'stash-field--is-read-only': props.isReadOnly },\n      { 'stash-field--is-required': props.isRequired },\n      { 'stash-field--has-error': hasError },\n    ]\"\n    v-bind=\"rootAttrs\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :is-sr-only=\"props.isLabelSrOnly\"\n      :legend=\"props.fieldset\"\n      :disabled=\"props.isDisabled || props.disabled\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <slot\n      :field-id=\"fieldId\"\n      :field-error-id=\"fieldErrorId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :is-read-only=\"props.isReadOnly\"\n      :disabled=\"props.isDisabled || props.disabled\"\n      :label-id=\"labelId\"\n      :show-optional-in-label=\"props.showOptionalInLabel\"\n    ></slot>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"stash-field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span\n      v-else-if=\"props.hintText && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      {{ props.hintText }}\n    </span>\n\n    <div\n      v-else-if=\"slots.hint && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      <!-- @slot for displaying hint text below the field -->\n      <slot name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","fieldId","computed","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAcRC,IAAQC,EAAS,GACjBC,IAAQC,EAAS,GACjBC,IAAUC,EAAS,MAAMP,EAAM,MAAMQ,EAAS,cAAc,CAAC,GAC7DC,IAAeF,EAAS,MAAMP,EAAM,WAAWQ,EAAS,oBAAoB,CAAC,GAC7EE,IAAUH,EAAS,MAAMC,EAAS,oBAAoB,CAAC,GACvDG,IAAWJ,EAAS,MAAM,CAAC,CAACP,EAAM,SAAS,GAC3CY,IAAiBL,EAAS,MAAOP,EAAM,WAAW,aAAa,KAAM,GAIrEa,IAAYN,EAAS,MAAM;AAC/B,YAAM,EAAE,aAAAO,GAAa,GAAGC,EAAA,IAAeb;AAEhC,aAAAa;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FileUpload.js

@@ -1,11 +1,11 @@
-import { defineComponent as q, useCssModule as K, ref as C, inject as Q, useAttrs as W, computed as h, createElementBlock as i, openBlock as s, normalizeClass as c, unref as l, withDirectives as Z, createVNode as w, withModifiers as p, withCtx as b, renderSlot as I, createTextVNode as S, toDisplayString as u, createElementVNode as v, createCommentVNode as U, Fragment as k, createBlock as ee, renderList as te, mergeProps as le, vShow as se } from "vue";
+import { defineComponent as q, useCssModule as K, ref as U, inject as Q, useAttrs as W, computed as w, createElementBlock as r, openBlock as n, normalizeClass as c, unref as l, withDirectives as Z, createVNode as g, withModifiers as p, withCtx as I, renderSlot as S, createTextVNode as N, toDisplayString as u, createElementVNode as v, createCommentVNode as k, Fragment as R, createBlock as ee, renderList as te, mergeProps as le, vShow as se } from "vue";
 import ne from "@leaflink/snitch";
 import { I as oe } from "./index-D6bxWkZ1.js";
 import { t as f } from "./locale.js";
-import N from "./Button.js";
+import F from "./Button.js";
 import ae from "./Icon.js";
 import { _ as ie } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const F = {
+const M = {
   CSV: {
     EXTENSION: ["csv"],
     MIME_TYPES: ["text/csv", "application/octet-stream", "application/vnd.ms-excel"],
@@ -37,7 +37,7 @@ const F = {
     ILLUSTRATION: "csv"
   }
 };
-var g = /* @__PURE__ */ ((m) => (m.Dense = "dense", m.Standard = "standard", m))(g || {});
+var h = /* @__PURE__ */ ((m) => (m.Dense = "dense", m.Standard = "standard", m))(h || {});
 const re = { key: 0 }, de = { class: "tw-text-ice-900" }, ce = {
   key: 0,
   class: "tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700"
@@ -52,16 +52,16 @@ const re = { key: 0 }, de = { class: "tw-text-ice-900" }, ce = {
     size: { default: "standard" }
   },
   emits: ["file-select", "file-delete", "file-error"],
-  setup(m, { emit: R }) {
-    const n = m, r = K(), E = R, y = C(!1), T = C(), A = Q("stashOptions"), O = W(), X = h(() => {
-      const e = { ...O };
+  setup(m, { emit: A }) {
+    const o = m, d = K(), E = A, y = U(!1), T = U(), _ = Q("stashOptions"), x = W(), X = w(() => {
+      const e = { ...x };
       return delete e["data-test"], delete e.class, delete e.type, delete e.accept, e;
     });
-    function M(e, t) {
+    function D(e, t) {
       return e.concat(t);
     }
-    const _ = h(() => n.fileTypes.map((e) => F[e].MIME_TYPES).reduce(M)), x = h(() => n.fileTypes.map((e) => F[e].EXTENSION).reduce(M)), Y = h(() => `${A?.staticPath}/illustrations/FileUpload/${F[n.fileTypes[0]].ILLUSTRATION}.svg`);
-    function D() {
+    const b = w(() => o.fileTypes.map((e) => M[e].MIME_TYPES).reduce(D)), O = w(() => o.fileTypes.map((e) => M[e].EXTENSION).reduce(D)), Y = w(() => `${_ == null ? void 0 : _.staticPath}/illustrations/FileUpload/${M[o.fileTypes[0]].ILLUSTRATION}.svg`);
+    function L() {
       T.value && (T.value.value = "", T.value.click());
     }
     function $() {
@@ -72,23 +72,23 @@ const re = { key: 0 }, de = { class: "tw-text-ice-900" }, ce = {
     }
     function B(e) {
       const t = f("ll.fileUpload.errors.incorrectFileType", {
-        fileTypes: x.value.join(", ")
+        fileTypes: O.value.join(", ")
       });
       E("file-error", t), ne.log(e);
     }
     async function V(e) {
-      if (!_.value.length) return !0;
-      const t = await Promise.all(e.map((a) => H(a)));
-      if (!(!!t.length && t.every((a) => _.value.includes(a))))
+      if (!b.value.length) return !0;
+      const t = await Promise.all(e.map((i) => H(i)));
+      if (!(!!t.length && t.every((i) => b.value.includes(i))))
         throw new Error("One or more files contains an unacceptable mime type.");
-      if (!e.every((a) => {
-        const P = a.name.split(".").pop();
-        return P && x.value.includes(P);
+      if (!e.every((i) => {
+        const C = i.name.split(".").pop();
+        return C && O.value.includes(C);
       }))
         throw new Error("One or more files contains an unacceptable extension.");
       return !0;
     }
-    async function L(e) {
+    async function P(e) {
       try {
         await V(e), E("file-select", { files: e });
       } catch (t) {
@@ -96,57 +96,59 @@ const re = { key: 0 }, de = { class: "tw-text-ice-900" }, ce = {
       }
     }
     function z(e) {
-      const t = [...e.target?.files || []];
-      L(t);
+      var s;
+      const t = [...((s = e.target) == null ? void 0 : s.files) || []];
+      P(t);
     }
     function G(e) {
-      if (n.disabled)
+      var s;
+      if (o.disabled)
         return;
-      const t = [...e.dataTransfer?.files || []];
-      return y.value = !1, L(t);
+      const t = [...((s = e.dataTransfer) == null ? void 0 : s.files) || []];
+      return y.value = !1, P(t);
     }
     function J(e) {
       E("file-delete", e);
     }
     function H(e) {
-      return new Promise((t, d) => {
+      return new Promise((t, s) => {
         if (e.type)
           return t(e.type);
         if (window.FileReader) {
-          const o = new FileReader();
-          o.onload = () => {
-            const a = o.result && o.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/) ? o.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0] : "";
-            t(a);
-          }, o.readAsDataURL(e);
+          const a = new FileReader();
+          a.onload = () => {
+            const i = a.result && a.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/) ? a.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0] : "";
+            t(i);
+          }, a.readAsDataURL(e);
         } else
-          d(new Error("Failed to read file."));
+          s(new Error("Failed to read file."));
       });
     }
-    return (e, t) => (s(), i("div", {
-      class: c(["stash-file-upload", l(O).class]),
+    return (e, t) => (n(), r("div", {
+      class: c(["stash-file-upload", l(x).class]),
       "data-test": "stash-file-upload"
     }, [
-      e.buttonOnly ? (s(), i("div", re, [
-        w(N, {
+      e.buttonOnly ? (n(), r("div", re, [
+        g(F, {
           secondary: "",
           type: "button",
-          disabled: n.disabled,
-          onClick: p(D, ["stop", "prevent"])
+          disabled: o.disabled,
+          onClick: p(L, ["stop", "prevent"])
         }, {
-          default: b(() => [
-            I(e.$slots, "submitText", {}, () => [
-              S(u(l(f)("ll.fileUpload.uploadFile")), 1)
+          default: I(() => [
+            S(e.$slots, "submitText", {}, () => [
+              N(u(l(f)("ll.fileUpload.uploadFile")), 1)
             ])
           ]),
           _: 3
         }, 8, ["disabled"])
-      ])) : (s(), i("div", {
+      ])) : (n(), r("div", {
         key: 1,
         class: c(["tw-rounded tw-p-6", [
-          l(r)["file-dropbox"],
+          l(d)["file-dropbox"],
           {
-            [l(r)["is-dragging"]]: y.value,
-            [l(r)["is-disabled"]]: n.disabled
+            [l(d)["is-dragging"]]: y.value,
+            [l(d)["is-disabled"]]: o.disabled
           }
         ]]),
         onDragover: p($, ["prevent"]),
@@ -154,55 +156,55 @@ const re = { key: 0 }, de = { class: "tw-text-ice-900" }, ce = {
         onDragleave: p(j, ["prevent"])
       }, [
         v("div", {
-          class: c(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center", [{ "tw-items-center md:tw-flex-row": e.size === l(g).Dense }]])
+          class: c(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center", [{ "tw-items-center md:tw-flex-row": e.size === l(h).Dense }]])
         }, [
-          e.files.length ? (s(!0), i(k, { key: 1 }, te(e.files, (d) => (s(), i("div", {
-            key: d.name
+          e.files.length ? (n(!0), r(R, { key: 1 }, te(e.files, (s) => (n(), r("div", {
+            key: s.name
           }, [
-            w(ae, { name: "file" }),
-            v("span", null, u(d.name), 1),
-            w(N, {
-              class: c([l(r)["remove-button"], l(r).button]),
-              onClick: p((o) => J(d), ["stop", "prevent"])
+            g(ae, { name: "file" }),
+            v("span", null, u(s.name), 1),
+            g(F, {
+              class: c([l(d)["remove-button"], l(d).button]),
+              onClick: p((a) => J(s), ["stop", "prevent"])
             }, {
-              default: b(() => [
-                S(u(l(f)("ll.fileUpload.remove")), 1)
+              default: I(() => [
+                N(u(l(f)("ll.fileUpload.remove")), 1)
               ]),
-              _: 1
-            }, 8, ["class", "onClick"])
-          ]))), 128)) : (s(), i(k, { key: 0 }, [
-            e.size !== l(g).Dense ? (s(), ee(l(oe), {
+              _: 2
+            }, 1032, ["class", "onClick"])
+          ]))), 128)) : (n(), r(R, { key: 0 }, [
+            e.size !== l(h).Dense ? (n(), ee(l(oe), {
               key: 0,
               src: Y.value,
               name: "file",
               width: "84",
               height: "96"
-            }, null, 8, ["src"])) : U("", !0),
+            }, null, 8, ["src"])) : k("", !0),
             v("span", de, u(l(f)("ll.fileUpload.dragDropFileHere")), 1),
             v("span", {
               class: c(
-                e.size === l(g).Dense ? "md:tw-ml-1.5 md:tw-mr-3 md:tw-my-0 tw-my-1.5 tw-text-ice-900" : "tw-mt-1.5 tw-my-1.5"
+                e.size === l(h).Dense ? "md:tw-ml-1.5 md:tw-mr-3 md:tw-my-0 tw-my-1.5 tw-text-ice-900" : "tw-mt-1.5 tw-my-1.5"
               )
             }, u(l(f)("ll.fileUpload.or")), 3),
-            w(N, {
-              class: c(["tw-mt-1.5", l(r)["file-select-button"]]),
+            g(F, {
+              class: c(["tw-mt-1.5", l(d)["file-select-button"]]),
               secondary: "",
               type: "button",
               disabled: e.disabled,
-              onClick: p(D, ["stop", "prevent"])
+              onClick: p(L, ["stop", "prevent"])
             }, {
-              default: b(() => [
-                I(e.$slots, "submitText", {}, () => [
-                  S(u(l(f)("ll.fileUpload.uploadFile")), 1)
+              default: I(() => [
+                S(e.$slots, "submitText", {}, () => [
+                  N(u(l(f)("ll.fileUpload.uploadFile")), 1)
                 ])
               ]),
               _: 3
             }, 8, ["class", "disabled"])
           ], 64))
         ], 2),
-        e.$slots.hint && !e.files.length ? (s(), i("div", ce, [
-          I(e.$slots, "hint")
-        ])) : U("", !0)
+        e.$slots.hint && !e.files.length ? (n(), r("div", ce, [
+          S(e.$slots, "hint")
+        ])) : k("", !0)
       ], 34)),
       Z(v("input", le(X.value, {
         ref_key: "fileUploadRef",
@@ -210,8 +212,8 @@ const re = { key: 0 }, de = { class: "tw-text-ice-900" }, ce = {
         "data-test": "stash-file-upload|input",
         type: "file",
         disabled: e.disabled,
-        accept: _.value.join(","),
-        multiple: n.multiple,
+        accept: b.value.join(","),
+        multiple: o.multiple,
         onChange: z
       }), null, 16, pe), [
         [se, !1]
@@ -229,8 +231,8 @@ const re = { key: 0 }, de = { class: "tw-text-ice-900" }, ce = {
   $style: me
 }, be = /* @__PURE__ */ ie(ue, [["__cssModules", ve]]);
 export {
-  F as FILE_TYPES,
-  g as FileUploadSizes,
+  M as FILE_TYPES,
+  h as FileUploadSizes,
   be as default
 };
 //# sourceMappingURL=FileUpload.js.map

package/dist/FileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","sources":["../src/components/FileUpload/FileUpload.constants.ts","../src/components/FileUpload/FileUpload.vue"],"sourcesContent":["export const FILE_TYPES = {\n  CSV: {\n    EXTENSION: ['csv'],\n    MIME_TYPES: ['text/csv', 'application/octet-stream', 'application/vnd.ms-excel'],\n    ILLUSTRATION: 'csv',\n  },\n  PDF: {\n    EXTENSION: ['pdf'],\n    MIME_TYPES: ['application/pdf'],\n    ILLUSTRATION: 'pdf',\n  },\n  PNG: {\n    EXTENSION: ['png'],\n    MIME_TYPES: ['image/png'],\n    ILLUSTRATION: 'image',\n  },\n  JPEG: {\n    EXTENSION: ['jpg', 'jpeg'],\n    MIME_TYPES: ['image/jpeg'],\n    ILLUSTRATION: 'image',\n  },\n  DOC: {\n    EXTENSION: ['doc', 'docx'],\n    MIME_TYPES: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n    ILLUSTRATION: 'document',\n  },\n  XLS: {\n    EXTENSION: ['xls', 'xlsx'],\n    MIME_TYPES: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n    ILLUSTRATION: 'csv',\n  },\n};\n\nexport enum FileUploadSizes {\n  Dense = 'dense',\n  Standard = 'standard',\n}\n\nexport type FileUploadSize = `${FileUploadSizes}`;\n","<script lang=\"ts\">\n  export * from './FileUpload.constants';\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, ref, useAttrs, useCssModule } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashProvideState } from '../../../types/misc';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { FILE_TYPES, FileUploadSize, FileUploadSizes } from './FileUpload.constants';\n\n  export type FileType = 'CSV' | 'PDF' | 'PNG' | 'JPEG' | 'DOC' | 'XLS';\n\n  export interface FileUploadProps {\n    /**\n     * Files to display in the component\n     */\n    files?: File[];\n\n    /**\n     * Accepted file types\n     */\n    fileTypes?: FileType[];\n\n    /**\n     * Should display only the button\n     */\n    buttonOnly?: boolean;\n\n    /**\n     * Allows upload of multiple files\n     */\n    multiple?: boolean;\n\n    /**\n     * Is the input disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Component size\n     */\n    size?: FileUploadSize;\n  }\n\n  const props = withDefaults(defineProps<FileUploadProps>(), {\n    files: () => [],\n    fileTypes: () => ['CSV', 'PDF', 'PNG', 'JPEG', 'DOC', 'XLS'],\n    buttonOnly: false,\n    disabled: false,\n    multiple: false,\n    size: 'standard',\n  });\n\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'file-select', { files }: { files: FileUploadProps['files'] }): void;\n    (e: 'file-delete', file: File): void;\n    (e: 'file-error', message: string): void;\n  }>();\n\n  const isDraggingOver = ref(false);\n  const fileUploadRef = ref<HTMLInputElement>();\n\n  const stashOptions = inject<StashProvideState>('stashOptions');\n  const attributes = useAttrs();\n\n  const inputAttrs = computed(() => {\n    const attrs = { ...attributes };\n\n    delete attrs['data-test'];\n    delete attrs.class;\n    delete attrs.type;\n    delete attrs.accept;\n\n    return attrs;\n  });\n\n  function concatArraysToFirst(a: string[], b: string[]) {\n    return a.concat(b);\n  }\n\n  const acceptedMimeTypes = computed(() => {\n    return props.fileTypes.map((fileType) => FILE_TYPES[fileType].MIME_TYPES).reduce(concatArraysToFirst);\n  });\n\n  const acceptedFileExtensions = computed(() => {\n    return props.fileTypes.map((fileType) => FILE_TYPES[fileType].EXTENSION).reduce(concatArraysToFirst);\n  });\n\n  const illustrationPath = computed(() => {\n    return `${stashOptions?.staticPath}/illustrations/FileUpload/${FILE_TYPES[props.fileTypes[0]].ILLUSTRATION}.svg`;\n  });\n\n  function openFileDialog() {\n    if (fileUploadRef.value) {\n      fileUploadRef.value.value = '';\n      fileUploadRef.value.click();\n    }\n  }\n\n  function handleDragEnter() {\n    isDraggingOver.value = true;\n  }\n\n  function handleDragLeave() {\n    isDraggingOver.value = false;\n  }\n\n  function handleFileError(error: Error) {\n    const message = t('ll.fileUpload.errors.incorrectFileType', {\n      fileTypes: acceptedFileExtensions.value.join(', '),\n    });\n\n    emit('file-error', message);\n\n    logger.log(error);\n  }\n\n  async function areFileTypesAccepted(files: File[]) {\n    if (!acceptedMimeTypes.value.length) return true;\n\n    const mimeTypes = await Promise.all(files.map((file) => readMimeType(file)));\n\n    const allCorrectMimeTypes =\n      !!mimeTypes.length && mimeTypes.every((mimeType) => acceptedMimeTypes.value.includes(mimeType));\n\n    if (!allCorrectMimeTypes) {\n      throw new Error('One or more files contains an unacceptable mime type.');\n    }\n\n    const allCorrectFileExtensions = files.every((file) => {\n      const extension = file.name.split('.').pop();\n\n      return extension && acceptedFileExtensions.value.includes(extension);\n    });\n\n    if (!allCorrectFileExtensions) {\n      throw new Error('One or more files contains an unacceptable extension.');\n    }\n\n    return true;\n  }\n\n  async function processFiles(files: File[]) {\n    try {\n      await areFileTypesAccepted(files);\n\n      emit('file-select', { files });\n    } catch (error) {\n      handleFileError(error as Error);\n    }\n  }\n\n  /**\n   * Sets file(s) to selected file(s) from dialogue\n   * @param {Object} event - file select event that contains file(s)\n   * @returns {Array} An array of files\n   */\n  function handleFileInput(event: Event) {\n    const files = [...((event.target as HTMLInputElement)?.files || [])];\n\n    processFiles(files);\n  }\n\n  /**\n   * Sets file to dropped file if it is proper file type\n   * @param {Object} event - file select event that contains file\n   */\n  function handleDropFile(event: DragEvent) {\n    if (props.disabled) {\n      return;\n    }\n\n    const files = [...(event.dataTransfer?.files || [])];\n\n    isDraggingOver.value = false;\n\n    return processFiles(files);\n  }\n\n  function handleFileDelete(file: File) {\n    emit('file-delete', file);\n  }\n\n  function readMimeType(file: File): Promise<string> {\n    return new Promise((resolve, reject) => {\n      if (file.type) {\n        return resolve(file.type);\n      } else if (window.FileReader) {\n        const fileReader = new FileReader();\n\n        fileReader.onload = () => {\n          const mimeType =\n            fileReader.result && (fileReader.result as string).match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)\n              ? ((fileReader.result as string).match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/) as string[])[0]\n              : '';\n\n          resolve(mimeType);\n        };\n\n        fileReader.readAsDataURL(file);\n      } else {\n        reject(new Error('Failed to read file.'));\n      }\n    });\n  }\n</script>\n\n<template>\n  <div class=\"stash-file-upload\" :class=\"attributes.class\" data-test=\"stash-file-upload\">\n    <div v-if=\"buttonOnly\">\n      <Button secondary type=\"button\" :disabled=\"props.disabled\" @click.stop.prevent=\"openFileDialog\">\n        <slot name=\"submitText\">\n          {{ t('ll.fileUpload.uploadFile') }}\n        </slot>\n      </Button>\n    </div>\n    <div\n      v-else\n      class=\"tw-rounded tw-p-6\"\n      :class=\"[\n        classes['file-dropbox'],\n        {\n          [classes['is-dragging']]: isDraggingOver,\n          [classes['is-disabled']]: props.disabled,\n        },\n      ]\"\n      @dragover.prevent=\"handleDragEnter\"\n      @drop.prevent=\"handleDropFile\"\n      @dragleave.prevent=\"handleDragLeave\"\n    >\n      <div\n        class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center\"\n        :class=\"[{ 'tw-items-center md:tw-flex-row': size === FileUploadSizes.Dense }]\"\n      >\n        <template v-if=\"!files.length\">\n          <InlineSvg v-if=\"size !== FileUploadSizes.Dense\" :src=\"illustrationPath\" name=\"file\" width=\"84\" height=\"96\" />\n          <span class=\"tw-text-ice-900\">\n            {{ t('ll.fileUpload.dragDropFileHere') }}\n          </span>\n          <span\n            :class=\"\n              size === FileUploadSizes.Dense\n                ? 'md:tw-ml-1.5 md:tw-mr-3 md:tw-my-0 tw-my-1.5 tw-text-ice-900'\n                : 'tw-mt-1.5 tw-my-1.5'\n            \"\n          >\n            {{ t('ll.fileUpload.or') }}\n          </span>\n          <Button\n            class=\"tw-mt-1.5\"\n            secondary\n            type=\"button\"\n            :class=\"classes['file-select-button']\"\n            :disabled=\"disabled\"\n            @click.stop.prevent=\"openFileDialog\"\n          >\n            <!-- @slot for custom submit text -->\n            <slot name=\"submitText\">{{ t('ll.fileUpload.uploadFile') }}</slot>\n          </Button>\n        </template>\n        <template v-else>\n          <div v-for=\"file in files\" :key=\"file.name\">\n            <Icon name=\"file\" />\n            <span>{{ file.name }}</span>\n            <Button :class=\"[classes['remove-button'], classes['button']]\" @click.stop.prevent=\"handleFileDelete(file)\">\n              {{ t('ll.fileUpload.remove') }}\n            </Button>\n          </div>\n        </template>\n      </div>\n      <div v-if=\"$slots.hint && !files.length\" class=\"tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700\">\n        <!-- @slot for displaying helpful text and/or links -->\n        <slot name=\"hint\"></slot>\n      </div>\n    </div>\n    <input\n      v-show=\"false\"\n      v-bind=\"inputAttrs\"\n      ref=\"fileUploadRef\"\n      data-test=\"stash-file-upload|input\"\n      type=\"file\"\n      :disabled=\"disabled\"\n      :accept=\"acceptedMimeTypes.join(',')\"\n      :multiple=\"props.multiple\"\n      @change=\"handleFileInput\"\n    />\n  </div>\n</template>\n\n<style module>\n  .file-dropbox {\n    background: var(--color-ice-200);\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23C5C9D4FF' stroke-width='1' stroke-dasharray='5 %2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    border: theme('borderWidth.DEFAULT') solid var(--color-ice-500);\n    border-color: transparent;\n  }\n\n  .is-dragging {\n    background-image: none;\n    border-color: var(--color-ice-500);\n\n    & > * {\n      pointer-events: none;\n    }\n  }\n\n  .is-disabled {\n    cursor: no-drop;\n  }\n\n  /* Constrain the upload icon for drag/drop to the required size */\n  .upload-icon {\n    height: 98px;\n    width: 84px;\n  }\n\n  .remove-button.button {\n    background: transparent;\n    border: none;\n    color: var(--color-red-500);\n\n    &:hover {\n      background: transparent;\n      border: none;\n    }\n  }\n</style>\n"],"names":["FILE_TYPES","FileUploadSizes","props","__props","classes","useCssModule","emit","__emit","isDraggingOver","ref","fileUploadRef","stashOptions","inject","attributes","useAttrs","inputAttrs","computed","attrs","concatArraysToFirst","a","b","acceptedMimeTypes","fileType","acceptedFileExtensions","illustrationPath","openFileDialog","handleDragEnter","handleDragLeave","handleFileError","error","message","t","logger","areFileTypesAccepted","files","mimeTypes","file","readMimeType","mimeType","extension","processFiles","handleFileInput","event","handleDropFile","handleFileDelete","resolve","reject","fileReader","_createElementBlock","_normalizeClass","_unref","buttonOnly","_hoisted_1","_createVNode","Button","_renderSlot","_ctx","_createElementVNode","size","_Fragment","_renderList","Icon","_toDisplayString","_withModifiers","$event","_createBlock","InlineSvg","_hoisted_2","disabled","$slots","_openBlock","_hoisted_3","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"FileUpload.js","sources":["../src/components/FileUpload/FileUpload.constants.ts","../src/components/FileUpload/FileUpload.vue"],"sourcesContent":["export const FILE_TYPES = {\n  CSV: {\n    EXTENSION: ['csv'],\n    MIME_TYPES: ['text/csv', 'application/octet-stream', 'application/vnd.ms-excel'],\n    ILLUSTRATION: 'csv',\n  },\n  PDF: {\n    EXTENSION: ['pdf'],\n    MIME_TYPES: ['application/pdf'],\n    ILLUSTRATION: 'pdf',\n  },\n  PNG: {\n    EXTENSION: ['png'],\n    MIME_TYPES: ['image/png'],\n    ILLUSTRATION: 'image',\n  },\n  JPEG: {\n    EXTENSION: ['jpg', 'jpeg'],\n    MIME_TYPES: ['image/jpeg'],\n    ILLUSTRATION: 'image',\n  },\n  DOC: {\n    EXTENSION: ['doc', 'docx'],\n    MIME_TYPES: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n    ILLUSTRATION: 'document',\n  },\n  XLS: {\n    EXTENSION: ['xls', 'xlsx'],\n    MIME_TYPES: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n    ILLUSTRATION: 'csv',\n  },\n};\n\nexport enum FileUploadSizes {\n  Dense = 'dense',\n  Standard = 'standard',\n}\n\nexport type FileUploadSize = `${FileUploadSizes}`;\n","<script lang=\"ts\">\n  export * from './FileUpload.constants';\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, ref, useAttrs, useCssModule } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashProvideState } from '../../../types/misc';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { FILE_TYPES, FileUploadSize, FileUploadSizes } from './FileUpload.constants';\n\n  export type FileType = 'CSV' | 'PDF' | 'PNG' | 'JPEG' | 'DOC' | 'XLS';\n\n  export interface FileUploadProps {\n    /**\n     * Files to display in the component\n     */\n    files?: File[];\n\n    /**\n     * Accepted file types\n     */\n    fileTypes?: FileType[];\n\n    /**\n     * Should display only the button\n     */\n    buttonOnly?: boolean;\n\n    /**\n     * Allows upload of multiple files\n     */\n    multiple?: boolean;\n\n    /**\n     * Is the input disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Component size\n     */\n    size?: FileUploadSize;\n  }\n\n  const props = withDefaults(defineProps<FileUploadProps>(), {\n    files: () => [],\n    fileTypes: () => ['CSV', 'PDF', 'PNG', 'JPEG', 'DOC', 'XLS'],\n    buttonOnly: false,\n    disabled: false,\n    multiple: false,\n    size: 'standard',\n  });\n\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'file-select', { files }: { files: FileUploadProps['files'] }): void;\n    (e: 'file-delete', file: File): void;\n    (e: 'file-error', message: string): void;\n  }>();\n\n  const isDraggingOver = ref(false);\n  const fileUploadRef = ref<HTMLInputElement>();\n\n  const stashOptions = inject<StashProvideState>('stashOptions');\n  const attributes = useAttrs();\n\n  const inputAttrs = computed(() => {\n    const attrs = { ...attributes };\n\n    delete attrs['data-test'];\n    delete attrs.class;\n    delete attrs.type;\n    delete attrs.accept;\n\n    return attrs;\n  });\n\n  function concatArraysToFirst(a: string[], b: string[]) {\n    return a.concat(b);\n  }\n\n  const acceptedMimeTypes = computed(() => {\n    return props.fileTypes.map((fileType) => FILE_TYPES[fileType].MIME_TYPES).reduce(concatArraysToFirst);\n  });\n\n  const acceptedFileExtensions = computed(() => {\n    return props.fileTypes.map((fileType) => FILE_TYPES[fileType].EXTENSION).reduce(concatArraysToFirst);\n  });\n\n  const illustrationPath = computed(() => {\n    return `${stashOptions?.staticPath}/illustrations/FileUpload/${FILE_TYPES[props.fileTypes[0]].ILLUSTRATION}.svg`;\n  });\n\n  function openFileDialog() {\n    if (fileUploadRef.value) {\n      fileUploadRef.value.value = '';\n      fileUploadRef.value.click();\n    }\n  }\n\n  function handleDragEnter() {\n    isDraggingOver.value = true;\n  }\n\n  function handleDragLeave() {\n    isDraggingOver.value = false;\n  }\n\n  function handleFileError(error: Error) {\n    const message = t('ll.fileUpload.errors.incorrectFileType', {\n      fileTypes: acceptedFileExtensions.value.join(', '),\n    });\n\n    emit('file-error', message);\n\n    logger.log(error);\n  }\n\n  async function areFileTypesAccepted(files: File[]) {\n    if (!acceptedMimeTypes.value.length) return true;\n\n    const mimeTypes = await Promise.all(files.map((file) => readMimeType(file)));\n\n    const allCorrectMimeTypes =\n      !!mimeTypes.length && mimeTypes.every((mimeType) => acceptedMimeTypes.value.includes(mimeType));\n\n    if (!allCorrectMimeTypes) {\n      throw new Error('One or more files contains an unacceptable mime type.');\n    }\n\n    const allCorrectFileExtensions = files.every((file) => {\n      const extension = file.name.split('.').pop();\n\n      return extension && acceptedFileExtensions.value.includes(extension);\n    });\n\n    if (!allCorrectFileExtensions) {\n      throw new Error('One or more files contains an unacceptable extension.');\n    }\n\n    return true;\n  }\n\n  async function processFiles(files: File[]) {\n    try {\n      await areFileTypesAccepted(files);\n\n      emit('file-select', { files });\n    } catch (error) {\n      handleFileError(error as Error);\n    }\n  }\n\n  /**\n   * Sets file(s) to selected file(s) from dialogue\n   * @param {Object} event - file select event that contains file(s)\n   * @returns {Array} An array of files\n   */\n  function handleFileInput(event: Event) {\n    const files = [...((event.target as HTMLInputElement)?.files || [])];\n\n    processFiles(files);\n  }\n\n  /**\n   * Sets file to dropped file if it is proper file type\n   * @param {Object} event - file select event that contains file\n   */\n  function handleDropFile(event: DragEvent) {\n    if (props.disabled) {\n      return;\n    }\n\n    const files = [...(event.dataTransfer?.files || [])];\n\n    isDraggingOver.value = false;\n\n    return processFiles(files);\n  }\n\n  function handleFileDelete(file: File) {\n    emit('file-delete', file);\n  }\n\n  function readMimeType(file: File): Promise<string> {\n    return new Promise((resolve, reject) => {\n      if (file.type) {\n        return resolve(file.type);\n      } else if (window.FileReader) {\n        const fileReader = new FileReader();\n\n        fileReader.onload = () => {\n          const mimeType =\n            fileReader.result && (fileReader.result as string).match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)\n              ? ((fileReader.result as string).match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/) as string[])[0]\n              : '';\n\n          resolve(mimeType);\n        };\n\n        fileReader.readAsDataURL(file);\n      } else {\n        reject(new Error('Failed to read file.'));\n      }\n    });\n  }\n</script>\n\n<template>\n  <div class=\"stash-file-upload\" :class=\"attributes.class\" data-test=\"stash-file-upload\">\n    <div v-if=\"buttonOnly\">\n      <Button secondary type=\"button\" :disabled=\"props.disabled\" @click.stop.prevent=\"openFileDialog\">\n        <slot name=\"submitText\">\n          {{ t('ll.fileUpload.uploadFile') }}\n        </slot>\n      </Button>\n    </div>\n    <div\n      v-else\n      class=\"tw-rounded tw-p-6\"\n      :class=\"[\n        classes['file-dropbox'],\n        {\n          [classes['is-dragging']]: isDraggingOver,\n          [classes['is-disabled']]: props.disabled,\n        },\n      ]\"\n      @dragover.prevent=\"handleDragEnter\"\n      @drop.prevent=\"handleDropFile\"\n      @dragleave.prevent=\"handleDragLeave\"\n    >\n      <div\n        class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center\"\n        :class=\"[{ 'tw-items-center md:tw-flex-row': size === FileUploadSizes.Dense }]\"\n      >\n        <template v-if=\"!files.length\">\n          <InlineSvg v-if=\"size !== FileUploadSizes.Dense\" :src=\"illustrationPath\" name=\"file\" width=\"84\" height=\"96\" />\n          <span class=\"tw-text-ice-900\">\n            {{ t('ll.fileUpload.dragDropFileHere') }}\n          </span>\n          <span\n            :class=\"\n              size === FileUploadSizes.Dense\n                ? 'md:tw-ml-1.5 md:tw-mr-3 md:tw-my-0 tw-my-1.5 tw-text-ice-900'\n                : 'tw-mt-1.5 tw-my-1.5'\n            \"\n          >\n            {{ t('ll.fileUpload.or') }}\n          </span>\n          <Button\n            class=\"tw-mt-1.5\"\n            secondary\n            type=\"button\"\n            :class=\"classes['file-select-button']\"\n            :disabled=\"disabled\"\n            @click.stop.prevent=\"openFileDialog\"\n          >\n            <!-- @slot for custom submit text -->\n            <slot name=\"submitText\">{{ t('ll.fileUpload.uploadFile') }}</slot>\n          </Button>\n        </template>\n        <template v-else>\n          <div v-for=\"file in files\" :key=\"file.name\">\n            <Icon name=\"file\" />\n            <span>{{ file.name }}</span>\n            <Button :class=\"[classes['remove-button'], classes['button']]\" @click.stop.prevent=\"handleFileDelete(file)\">\n              {{ t('ll.fileUpload.remove') }}\n            </Button>\n          </div>\n        </template>\n      </div>\n      <div v-if=\"$slots.hint && !files.length\" class=\"tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700\">\n        <!-- @slot for displaying helpful text and/or links -->\n        <slot name=\"hint\"></slot>\n      </div>\n    </div>\n    <input\n      v-show=\"false\"\n      v-bind=\"inputAttrs\"\n      ref=\"fileUploadRef\"\n      data-test=\"stash-file-upload|input\"\n      type=\"file\"\n      :disabled=\"disabled\"\n      :accept=\"acceptedMimeTypes.join(',')\"\n      :multiple=\"props.multiple\"\n      @change=\"handleFileInput\"\n    />\n  </div>\n</template>\n\n<style module>\n  .file-dropbox {\n    background: var(--color-ice-200);\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23C5C9D4FF' stroke-width='1' stroke-dasharray='5 %2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    border: theme('borderWidth.DEFAULT') solid var(--color-ice-500);\n    border-color: transparent;\n  }\n\n  .is-dragging {\n    background-image: none;\n    border-color: var(--color-ice-500);\n\n    & > * {\n      pointer-events: none;\n    }\n  }\n\n  .is-disabled {\n    cursor: no-drop;\n  }\n\n  /* Constrain the upload icon for drag/drop to the required size */\n  .upload-icon {\n    height: 98px;\n    width: 84px;\n  }\n\n  .remove-button.button {\n    background: transparent;\n    border: none;\n    color: var(--color-red-500);\n\n    &:hover {\n      background: transparent;\n      border: none;\n    }\n  }\n</style>\n"],"names":["FILE_TYPES","FileUploadSizes","props","__props","classes","useCssModule","emit","__emit","isDraggingOver","ref","fileUploadRef","stashOptions","inject","attributes","useAttrs","inputAttrs","computed","attrs","concatArraysToFirst","a","b","acceptedMimeTypes","fileType","acceptedFileExtensions","illustrationPath","openFileDialog","handleDragEnter","handleDragLeave","handleFileError","error","message","t","logger","areFileTypesAccepted","files","mimeTypes","file","readMimeType","mimeType","extension","processFiles","handleFileInput","event","_a","handleDropFile","handleFileDelete","resolve","reject","fileReader"],"mappings":"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"}

package/dist/FileUpload.vue.d.ts

@@ -1,37 +1,71 @@
 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 const _default: __VLS_WithTemplateSlots<DefineComponent<FileUploadProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FileUploadProps>, {
+files: () => never[];
+fileTypes: () => string[];
+buttonOnly: boolean;
+disabled: boolean;
+multiple: boolean;
+size: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "file-select": (args_0: {
 files: FileUploadProps['files'];
-}) => any;
-"file-delete": (file: File) => any;
-"file-error": (message: string) => any;
-}, string, PublicProps, Readonly<FileUploadProps> & Readonly<{
+}) => void;
+"file-delete": (file: File) => void;
+"file-error": (message: string) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FileUploadProps>, {
+files: () => never[];
+fileTypes: () => string[];
+buttonOnly: boolean;
+disabled: boolean;
+multiple: boolean;
+size: string;
+}>>> & Readonly<{
 "onFile-select"?: ((args_0: {
 files: FileUploadProps['files'];
 }) => any) | undefined;
 "onFile-delete"?: ((file: File) => any) | undefined;
 "onFile-error"?: ((message: string) => any) | undefined;
 }>, {
-size: "standard" | "dense";
 disabled: boolean;
+size: "standard" | "dense";
 multiple: boolean;
 files: File[];
 fileTypes: FileType[];
 buttonOnly: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-fileUploadRef: HTMLInputElement;
-}, HTMLDivElement>, {
-    submitText?(_: {}): any;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     submitText?(_: {}): any;
     hint?(_: {}): any;
 }>;

package/dist/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.js","sources":["../src/components/FilterChip/FilterChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Chip from '../Chip/Chip.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface FilterChipProps {\n    /**\n     * Used for conditionally rendering filter count chip\n     */\n    filterCount?: number;\n\n    /**\n     * Use for conditionally rendering caret\n     */\n    hasDropdown?: boolean;\n\n    /**\n     * Used for styling when `hasDropdown` is true\n     */\n    isDropdownOpen?: boolean;\n\n    /**\n     * Used for conditionally rendering close icon and exposing remove event\n     */\n    isRemovable?: boolean;\n\n    /**\n     * Used for conditionally applying styles\n     */\n    isSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FilterChipProps>(), {\n    filterCount: undefined,\n    hasDropdown: false,\n    isDropdownOpen: false,\n    isRemovable: false,\n    isSelected: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'click'): void;\n    (e: 'remove'): void;\n  }>();\n\n  const classes = useCssModule();\n  const hasFilterCount = computed(() => Number(props.filterCount) > 0);\n\n  function handleClick() {\n    emit('click');\n  }\n\n  function handleRemove() {\n    emit('remove');\n  }\n</script>\n\n<template>\n  <Chip\n    should-override-colors\n    tabindex=\"0\"\n    class=\"stash-filter-chip tw-text-sm tw-font-normal tw-normal-case tw-leading-5 tw-text-ice-900\"\n    radius=\"pill\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['is-selected']]: props.isSelected,\n        [classes['is-removable']]: props.isRemovable,\n        [classes['is-dropdown-open']]: props.isDropdownOpen,\n        [classes['has-dropdown']]: props.hasDropdown,\n        [classes['has-filter-count']]: hasFilterCount,\n      },\n    ]\"\n    :is-removable=\"props.isSelected && props.isRemovable && !props.hasDropdown\"\n    @click=\"handleClick\"\n    @remove=\"handleRemove\"\n  >\n    <div class=\"tw-flex tw-items-center\">\n      <!-- @slot default -->\n      <slot></slot>\n\n      <span\n        v-if=\"hasFilterCount\"\n        data-test=\"span|filter-count\"\n        :class=\"classes['filter-count']\"\n        :aria-label=\"t('ll.numberOfActiveFilters')\"\n        :title=\"t('ll.numberOfActiveFilters')\"\n      >\n        {{ props.filterCount }}\n      </span>\n\n      <span v-if=\"props.hasDropdown\">\n        <Icon\n          data-test=\"icon|caret\"\n          name=\"caret-down\"\n          :class=\"[\n            classes.caret,\n            {\n              [classes['caret-rotate']]: props.isDropdownOpen,\n            },\n          ]\"\n        />\n      </span>\n    </div>\n  </Chip>\n</template>\n\n<style module>\n  /**\n    many styles declared here are overriding styles defined in Chip\n  */\n  .root {\n    background-color: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    cursor: pointer;\n    height: theme('spacing.9');\n    padding-left: theme('spacing.3');\n    padding-right: theme('spacing.3');\n  }\n\n  .root:focus {\n    box-shadow: 0 0 0 4px rgb(0 123 255 / 15%);\n    outline: none;\n  }\n\n  .root:hover {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected {\n    color: var(--color-white);\n    background-color: var(--color-blue-500);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected:hover {\n    color: var(--color-white);\n    background-color: var(--color-blue-700);\n    border: 1px solid var(--color-blue-700);\n  }\n\n  .root.is-selected.is-removable {\n    background-color: var(--color-blue-500);\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button) {\n    margin-right: -1px;\n    padding-right: theme('spacing.3');\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button):hover {\n    background-color: var(--color-blue-700);\n  }\n\n  .root.is-selected.has-filter-count:hover {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .root.has-dropdown {\n    padding-right: theme('spacing[1.5]');\n  }\n\n  .root.has-filter-count:hover {\n    background-color: var(--color-blue-100);\n    color: var(--color-ice-900);\n  }\n\n  .root label {\n    cursor: pointer;\n  }\n\n  .filter-count {\n    display: inline-flex;\n    align-items: center;\n    border-radius: 5em;\n    height: 16px;\n    padding: 0 8px;\n    margin-left: theme('spacing[1.5]');\n    font-size: 10px;\n    font-weight: bold;\n    background-color: var(--color-blue-500);\n    color: var(--color-white);\n  }\n\n  .is-selected .filter-count {\n    background-color: var(--color-blue-700);\n  }\n\n  .is-selected:hover .filter-count {\n    background-color: var(--color-white);\n    color: var(--color-blue-700);\n  }\n\n  .is-selected.is-removable .filter-count {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .caret {\n    color: var(--color-ice-700);\n    margin-left: theme('spacing[1.5]');\n    transform: rotate(0);\n    transition: all 0.5s;\n  }\n\n  .is-selected .caret {\n    color: var(--color-white);\n  }\n\n  .caret-rotate {\n    transform: rotate(-180deg);\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","hasFilterCount","computed","handleClick","handleRemove","_createBlock","Chip","_unref","_createElementVNode","_hoisted_1","_renderSlot","_ctx","_createElementBlock","t","_toDisplayString","_hoisted_2","_hoisted_3","_createVNode","Icon","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GAQRC,IAAOC,GAKPC,IAAUC,EAAA,GACVC,IAAiBC,EAAS,MAAM,OAAOP,EAAM,WAAW,IAAI,CAAC;AAEnE,aAASQ,IAAc;AACrB,MAAAN,EAAK,OAAO;AAAA,IACd;AAEA,aAASO,IAAe;AACtB,MAAAP,EAAK,QAAQ;AAAA,IACf;2BAIAQ,EA8COC,GAAA;AAAA,MA7CL,0BAAA;AAAA,MACA,UAAS;AAAA,MACT,UAAM,2FAAyF;AAAA,QAE/EC,EAAAR,CAAA,EAAQ;AAAA;WAAuBQ,EAAAR,CAAA,EAAO,aAAA,CAAA,GAAkBJ,EAAM;AAAA,WAAqBY,EAAAR,CAAA,EAAO,cAAA,CAAA,GAAmBJ,EAAM;AAAA,WAAsBY,EAAAR,CAAA,EAAO,kBAAA,CAAA,GAAuBJ,EAAM;AAAA,WAAyBY,EAAAR,CAAA,EAAO,cAAA,CAAA,GAAmBJ,EAAM;AAAA,UAAsB,CAAAY,EAAAR,CAAA,wBAA8BE,EAAA;AAAA,QAAA;AAAA;MAD1S,QAAO;AAAA,MAWN,gBAAcN,EAAM,cAAcA,EAAM,eAAW,CAAKA,EAAM;AAAA,MAC9D,SAAOQ;AAAA,MACP,UAAQC;AAAA,IAAA;iBAET,MA0BM;AAAA,QA1BNI,EA0BM,OA1BNC,GA0BM;AAAA,UAxBJC,EAAaC,EAAA,QAAA,SAAA;AAAA,UAGLV,EAAA,cADRW,EAQO,QAAA;AAAA;YANL,aAAU;AAAA,YACT,SAAOL,EAAAR,CAAA,EAAO,cAAA,CAAA;AAAA,YACd,cAAYQ,EAAAM,CAAA,EAAC,0BAAA;AAAA,YACb,OAAON,EAAAM,CAAA,EAAC,0BAAA;AAAA,UAAA,GAENC,EAAAnB,EAAM,WAAW,GAAA,IAAAoB,CAAA;UAGVpB,EAAM,oBAAlBiB,EAWO,QAAAI,GAAA;AAAA,YAVLC,EASEC,GAAA;AAAA,cARA,aAAU;AAAA,cACV,MAAK;AAAA,cACJ,OAAKC,EAAA;AAAA,gBAAgBZ,EAAAR,CAAA,EAAQ;AAAA;mBAAoCQ,EAAAR,CAAA,EAAO,cAAA,CAAA,GAAmBJ,EAAM;AAAA,gBAAA;AAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FilterChip.js","sources":["../src/components/FilterChip/FilterChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Chip from '../Chip/Chip.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface FilterChipProps {\n    /**\n     * Used for conditionally rendering filter count chip\n     */\n    filterCount?: number;\n\n    /**\n     * Use for conditionally rendering caret\n     */\n    hasDropdown?: boolean;\n\n    /**\n     * Used for styling when `hasDropdown` is true\n     */\n    isDropdownOpen?: boolean;\n\n    /**\n     * Used for conditionally rendering close icon and exposing remove event\n     */\n    isRemovable?: boolean;\n\n    /**\n     * Used for conditionally applying styles\n     */\n    isSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FilterChipProps>(), {\n    filterCount: undefined,\n    hasDropdown: false,\n    isDropdownOpen: false,\n    isRemovable: false,\n    isSelected: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'click'): void;\n    (e: 'remove'): void;\n  }>();\n\n  const classes = useCssModule();\n  const hasFilterCount = computed(() => Number(props.filterCount) > 0);\n\n  function handleClick() {\n    emit('click');\n  }\n\n  function handleRemove() {\n    emit('remove');\n  }\n</script>\n\n<template>\n  <Chip\n    should-override-colors\n    tabindex=\"0\"\n    class=\"stash-filter-chip tw-text-sm tw-font-normal tw-normal-case tw-leading-5 tw-text-ice-900\"\n    radius=\"pill\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['is-selected']]: props.isSelected,\n        [classes['is-removable']]: props.isRemovable,\n        [classes['is-dropdown-open']]: props.isDropdownOpen,\n        [classes['has-dropdown']]: props.hasDropdown,\n        [classes['has-filter-count']]: hasFilterCount,\n      },\n    ]\"\n    :is-removable=\"props.isSelected && props.isRemovable && !props.hasDropdown\"\n    @click=\"handleClick\"\n    @remove=\"handleRemove\"\n  >\n    <div class=\"tw-flex tw-items-center\">\n      <!-- @slot default -->\n      <slot></slot>\n\n      <span\n        v-if=\"hasFilterCount\"\n        data-test=\"span|filter-count\"\n        :class=\"classes['filter-count']\"\n        :aria-label=\"t('ll.numberOfActiveFilters')\"\n        :title=\"t('ll.numberOfActiveFilters')\"\n      >\n        {{ props.filterCount }}\n      </span>\n\n      <span v-if=\"props.hasDropdown\">\n        <Icon\n          data-test=\"icon|caret\"\n          name=\"caret-down\"\n          :class=\"[\n            classes.caret,\n            {\n              [classes['caret-rotate']]: props.isDropdownOpen,\n            },\n          ]\"\n        />\n      </span>\n    </div>\n  </Chip>\n</template>\n\n<style module>\n  /**\n    many styles declared here are overriding styles defined in Chip\n  */\n  .root {\n    background-color: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    cursor: pointer;\n    height: theme('spacing.9');\n    padding-left: theme('spacing.3');\n    padding-right: theme('spacing.3');\n  }\n\n  .root:focus {\n    box-shadow: 0 0 0 4px rgb(0 123 255 / 15%);\n    outline: none;\n  }\n\n  .root:hover {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected {\n    color: var(--color-white);\n    background-color: var(--color-blue-500);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected:hover {\n    color: var(--color-white);\n    background-color: var(--color-blue-700);\n    border: 1px solid var(--color-blue-700);\n  }\n\n  .root.is-selected.is-removable {\n    background-color: var(--color-blue-500);\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button) {\n    margin-right: -1px;\n    padding-right: theme('spacing.3');\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button):hover {\n    background-color: var(--color-blue-700);\n  }\n\n  .root.is-selected.has-filter-count:hover {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .root.has-dropdown {\n    padding-right: theme('spacing[1.5]');\n  }\n\n  .root.has-filter-count:hover {\n    background-color: var(--color-blue-100);\n    color: var(--color-ice-900);\n  }\n\n  .root label {\n    cursor: pointer;\n  }\n\n  .filter-count {\n    display: inline-flex;\n    align-items: center;\n    border-radius: 5em;\n    height: 16px;\n    padding: 0 8px;\n    margin-left: theme('spacing[1.5]');\n    font-size: 10px;\n    font-weight: bold;\n    background-color: var(--color-blue-500);\n    color: var(--color-white);\n  }\n\n  .is-selected .filter-count {\n    background-color: var(--color-blue-700);\n  }\n\n  .is-selected:hover .filter-count {\n    background-color: var(--color-white);\n    color: var(--color-blue-700);\n  }\n\n  .is-selected.is-removable .filter-count {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .caret {\n    color: var(--color-ice-700);\n    margin-left: theme('spacing[1.5]');\n    transform: rotate(0);\n    transition: all 0.5s;\n  }\n\n  .is-selected .caret {\n    color: var(--color-white);\n  }\n\n  .caret-rotate {\n    transform: rotate(-180deg);\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","hasFilterCount","computed","handleClick","handleRemove"],"mappings":";;;;;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GAQRC,IAAOC,GAKPC,IAAUC,EAAa,GACvBC,IAAiBC,EAAS,MAAM,OAAOP,EAAM,WAAW,IAAI,CAAC;AAEnE,aAASQ,IAAc;AACrB,MAAAN,EAAK,OAAO;AAAA,IAAA;AAGd,aAASO,IAAe;AACtB,MAAAP,EAAK,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}