@leaflink/stash 53.4.1 → 53.4.3

package/dist/{Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.js → Field.vue_vue_type_script_setup_true_lang-D2I8xDEW.js}

@@ -1,5 +1,5 @@
-import { defineComponent as I, useAttrs as O, useSlots as T, computed as t, createBlock as c, openBlock as l, resolveDynamicComponent as w, mergeProps as R, unref as d, withCtx as b, createCommentVNode as m, renderSlot as y, createElementBlock as o, createTextVNode as k, toDisplayString as r } from "vue";
-import n from "lodash-es/uniqueId";
+import { defineComponent as O, useAttrs as T, useSlots as _, computed as t, createBlock as b, openBlock as s, resolveDynamicComponent as w, mergeProps as R, unref as o, withCtx as m, createCommentVNode as y, renderSlot as x, createElementBlock as r, createTextVNode as k, toDisplayString as n } from "vue";
+import f from "lodash-es/uniqueId";
 import { _ as q } from "./Label.vue_vue_type_script_setup_true_lang-xwY3X-iV.js";
 const S = ["id"], D = {
   key: 2,
@@ -9,7 +9,7 @@ const S = ["id"], D = {
   key: 3,
   class: "stash-field-hint mt-1 whitespace-pre-line text-xs",
   "data-test": "stash-field-hint"
-}, C = /* @__PURE__ */ I({
+}, C = /* @__PURE__ */ O({
   inheritAttrs: !1,
   __name: "Field",
   props: {
@@ -27,58 +27,58 @@ const S = ["id"], D = {
     isDisabled: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 }
   },
-  setup(v) {
-    const e = v, x = O(), a = T(), f = t(() => e.id || n("stash-field-")), h = t(() => e.errorId || n("stash-field-error-")), u = t(() => n("stash-field-label-")), i = t(() => !!e.errorText), B = t(() => e.fieldset ? "fieldset" : "div"), _ = t(() => {
-      const { placeholder: s, ...p } = x;
+  setup(l) {
+    const e = l, v = T(), a = _(), h = t(() => e.id || f("stash-field-")), u = t(() => e.errorId || f("stash-field-error-")), c = t(() => f("stash-field-label-")), i = t(() => !!e.errorText), B = t(() => e.fieldset ? "fieldset" : "div"), I = t(() => {
+      const { placeholder: d, ...p } = v;
       return p;
     });
-    return (s, p) => (l(), c(w(B.value), R({
+    return (d, p) => (s(), b(w(B.value), R({
       "data-test": "stash-field",
       class: ["stash-field", [
         { "p-0": e.fieldset },
-        { "mb-9": e.addBottomSpace && !e.errorText && !e.hintText && !d(a).hint },
-        { "mb-4": e.addBottomSpace && (e.errorText || e.hintText || d(a).hint) },
+        { "mb-9": e.addBottomSpace && !e.errorText && !e.hintText && !o(a).hint },
+        { "mb-4": e.addBottomSpace && (e.errorText || e.hintText || o(a).hint) },
         { "stash-field--disabled": e.isDisabled || e.disabled },
         { "stash-field--is-read-only": e.isReadOnly },
         { "stash-field--is-required": e.isRequired },
         { "stash-field--has-error": i.value }
       ]]
-    }, _.value), {
-      default: b(() => [
-        e.label ? (l(), c(q, {
+    }, I.value), {
+      default: m(() => [
+        e.label ? (s(), b(q, {
           key: 0,
-          id: u.value,
-          for: f.value,
+          id: c.value,
+          for: h.value,
           "has-error": i.value,
-          "is-required": s.isRequired,
+          "is-required": l.isRequired,
           "show-optional": e.showOptionalInLabel,
           "is-sr-only": e.isLabelSrOnly,
           legend: e.fieldset,
           disabled: e.isDisabled || e.disabled
         }, {
-          default: b(() => [
-            k(r(e.label), 1)
+          default: m(() => [
+            k(n(e.label), 1)
           ]),
           _: 1
-        }, 8, ["id", "for", "has-error", "is-required", "show-optional", "is-sr-only", "legend", "disabled"])) : m("", !0),
-        y(s.$slots, "default", {
-          fieldId: f.value,
-          fieldErrorId: h.value,
+        }, 8, ["id", "for", "has-error", "is-required", "show-optional", "is-sr-only", "legend", "disabled"])) : y("", !0),
+        x(d.$slots, "default", {
+          fieldId: h.value,
+          fieldErrorId: u.value,
           hasError: i.value,
-          isRequired: s.isRequired,
+          isRequired: l.isRequired,
           isReadOnly: e.isReadOnly,
           disabled: e.isDisabled || e.disabled,
-          labelId: u.value,
+          labelId: c.value,
           showOptionalInLabel: e.showOptionalInLabel
         }),
-        e.errorText ? (l(), o("span", {
+        e.errorText ? (s(), r("span", {
           key: 1,
-          id: h.value,
+          id: u.value,
           class: "stash-field-error mt-1 block whitespace-pre-line text-xs text-red-500",
           "data-test": "stash-field-error"
-        }, r(e.errorText), 9, S)) : e.hintText && !e.isReadOnly ? (l(), o("span", D, r(e.hintText), 1)) : d(a).hint && !e.isReadOnly ? (l(), o("div", E, [
-          y(s.$slots, "hint")
-        ])) : m("", !0)
+        }, n(e.errorText), 9, S)) : e.hintText && !e.isReadOnly ? (s(), r("span", D, n(e.hintText), 1)) : o(a).hint && !e.isReadOnly ? (s(), r("div", E, [
+          x(d.$slots, "hint")
+        ])) : y("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
@@ -87,4 +87,4 @@ const S = ["id"], D = {
 export {
   C as _
 };
-//# sourceMappingURL=Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.js.map
+//# sourceMappingURL=Field.vue_vue_type_script_setup_true_lang-D2I8xDEW.js.map

package/dist/{Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.js.map → Field.vue_vue_type_script_setup_true_lang-D2I8xDEW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.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      { 'p-0': props.fieldset },\n      { 'mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { '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 mt-1 block whitespace-pre-line text-xs 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 mt-1 block whitespace-pre-line 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 mt-1 whitespace-pre-line 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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-D2I8xDEW.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      { 'p-0': props.fieldset },\n      { 'mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { '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 mt-1 block whitespace-pre-line text-xs 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 mt-1 block whitespace-pre-line 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 mt-1 whitespace-pre-line 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","_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,QACM,EAAA,OAAAlB,EAAM,SAAA;AAAA,QAA4B,EAAA,QAAAA,EAAM,kBAAc,CAAKA,EAAM,aAAS,CAAKA,EAAM,YAAQ,CAAKmB,EAAAf,CAAA,EAAM,KAAA;AAAA,QAAwB,EAAA,QAAAJ,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;OAShcE,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,eAAaV,EAAA;AAAA,UACb,iBAAeD,EAAM;AAAA,UACrB,cAAYA,EAAM;AAAA,UAClB,QAAQA,EAAM;AAAA,UACd,UAAUA,EAAM,cAAcA,EAAM;AAAA,QAAA;qBAErC,MAAiB;AAAA,YAAdqB,EAAAC,EAAAtB,EAAM,KAAK,GAAA,CAAA;AAAA,UAAA;;;QAIhBuB,EASQC,EAAA,QAAA,WAAA;AAAA,UARL,SAAUlB,EAAA;AAAA,UACV,cAAgBG,EAAA;AAAA,UAChB,UAAWE,EAAA;AAAA,UACX,YAAaV,EAAA;AAAA,UACb,YAAcD,EAAM;AAAA,UACpB,UAAUA,EAAM,cAAcA,EAAM;AAAA,UACpC,SAAUU,EAAA;AAAA,UACV,qBAAwBV,EAAM;AAAA,QAAA;QAIzBA,EAAM,kBADdyB,EAOO,QAAA;AAAA;UALJ,IAAIhB,EAAA;AAAA,UACL,OAAM;AAAA,UACN,aAAU;AAAA,QAAA,GAEPa,EAAAtB,EAAM,SAAS,GAAA,GAAA0B,CAAA,KAIP1B,EAAM,YAAQ,CAAKA,EAAM,cADtC2B,EAAA,GAAAF,EAMO,QANPG,GAMON,EADFtB,EAAM,QAAQ,GAAA,CAAA,KAINmB,EAAAf,CAAA,EAAM,QAAI,CAAKJ,EAAM,cADlC2B,EAAA,GAAAF,EAOM,OAPNI,GAOM;AAAA,UADJN,EAAyBC,EAAA,QAAA,MAAA;AAAA,QAAA;;;;;;"}

package/dist/FileUpload.js

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

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=\"rounded 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=\"flex flex-col items-center justify-center text-center\"\n        :class=\"[{ 'items-center md: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=\"text-ice-900\">\n            {{ t('ll.fileUpload.dragDropFileHere') }}\n          </span>\n          <span\n            :class=\"size === FileUploadSizes.Dense ? 'md:ml-1.5 md:mr-3 md:my-0 my-1.5 text-ice-900' : 'mt-1.5 my-1.5'\"\n          >\n            {{ t('ll.fileUpload.or') }}\n          </span>\n          <Button\n            class=\"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=\"mt-6 text-center text-xs 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  @layer utilities {\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: 1px 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  }\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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"}
+{"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=\"rounded 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=\"flex flex-col items-center justify-center text-center\"\n        :class=\"[{ 'items-center md: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=\"text-ice-900\">\n            {{ t('ll.fileUpload.dragDropFileHere') }}\n          </span>\n          <span\n            :class=\"size === FileUploadSizes.Dense ? 'md:ml-1.5 md:mr-3 md:my-0 my-1.5 text-ice-900' : 'mt-1.5 my-1.5'\"\n          >\n            {{ t('ll.fileUpload.or') }}\n          </span>\n          <Button\n            class=\"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=\"mt-6 text-center text-xs 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  @layer utilities {\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: 1px 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  }\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","_createElementBlock","_normalizeClass","_unref","_hoisted_1","_createVNode","Button","_renderSlot","_ctx","_createElementVNode","_Fragment","_renderList","Icon","_toDisplayString","_withModifiers","$event","_createBlock","InlineSvg","_hoisted_2","$slots","_openBlock","_hoisted_3","_mergeProps"],"mappings":"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"}

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 text-sm font-normal normal-case leading-5 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=\"flex 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  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\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: --spacing(9);\n      padding-left: --spacing(3);\n      padding-right: --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: --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: --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: --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: --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  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","hasFilterCount","computed","handleClick","handleRemove"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 text-sm font-normal normal-case leading-5 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=\"flex 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  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\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: --spacing(9);\n      padding-left: --spacing(3);\n      padding-right: --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: --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: --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: --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: --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  }\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,4EAA0E;AAAA,QAEhEC,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;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterChip.vue.d.ts

@@ -48,8 +48,8 @@ isDropdownOpen: boolean;
 isRemovable: boolean;
 isSelected: boolean;
 }>>> & Readonly<{
-onClick?: (() => any) | undefined;
 onRemove?: (() => any) | undefined;
+onClick?: (() => any) | undefined;
 }>, {
 isRemovable: boolean;
 isSelected: boolean;

package/dist/FilterDrawerItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDrawerItem.js","sources":["../src/components/FilterDrawerItem/FilterDrawerItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, inject } from 'vue';\n\n  import { t } from '../../locale';\n  import Chip from '../Chip/Chip.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface FilterDrawerItemProps {\n    /** The name of a filter group */\n    group: string;\n    title: string;\n    description?: string;\n  }\n  const props = defineProps<FilterDrawerItemProps>();\n\n  export interface FilterDrawerItemEmits {\n    (e: 'navigate');\n  }\n  const emit = defineEmits<FilterDrawerItemEmits>();\n\n  export interface FilterDrawerItemSlots {\n    default?: () => unknown;\n  }\n\n  const slots = defineSlots<FilterDrawerItemSlots>();\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { activeFiltersCounts } = dataViewFiltersUtils.useFiltersInstance;\n\n  const activeCount = computed(() => activeFiltersCounts.value[props.group]);\n  const isDrawerCascade = computed(() => dataViewFiltersUtils.drawerStyle === 'cascade');\n</script>\n\n<template>\n  <div class=\"stash-filter-drawer-item\">\n    <component\n      :is=\"isDrawerCascade ? 'div' : 'button'\"\n      data-test=\"stash-filter-drawer-item|dynamic-component\"\n      class=\"outline-hidden w-full border-b border-ice-500 py-4 focus:outline-blue-500\"\n      @click=\"isDrawerCascade ? undefined : emit('navigate')\"\n    >\n      <div class=\"flex items-center justify-between self-stretch\">\n        <div class=\"flex flex-col items-start\">\n          <h4>{{ props.title }}</h4>\n          <div v-if=\"props.description\" class=\"text-xs\" data-test=\"description\">\n            {{ props.description }}\n          </div>\n        </div>\n        <div class=\"inline-flex items-center gap-6\" :class=\"{ 'mb-0.5 mr-2': isDrawerCascade }\">\n          <Chip\n            v-if=\"activeCount\"\n            color=\"blue\"\n            radius=\"pill\"\n            shade=\"main\"\n            :aria-label=\"t('ll.numberOfActiveFilters')\"\n            :title=\"t('ll.numberOfActiveFilters')\"\n          >\n            {{ activeCount }}\n          </Chip>\n          <Icon v-if=\"!isDrawerCascade\" name=\"chevron-right\" :title=\"t('ll.viewFilterGroup')\" />\n        </div>\n      </div>\n    </component>\n    <div v-if=\"isDrawerCascade && slots.default\" class=\"gap-3 p-6\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","slots","_useSlots","dataViewFiltersUtils","inject","DATA_VIEW_FILTERS_UTILS_INJECTION","activeFiltersCounts","activeCount","computed","isDrawerCascade"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAKRC,IAAOC,GAMPC,IAAQC,EAAA,GAERC,IAAuBC,EAAOC,EAAkC,GAAG;AAEzE,QAAI,EAACF,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,qBAAAG,MAAwBH,EAAqB,oBAE/CI,IAAcC,EAAS,MAAMF,EAAoB,MAAMT,EAAM,KAAK,CAAC,GACnEY,IAAkBD,EAAS,MAAML,EAAqB,gBAAgB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FilterDrawerItem.js","sources":["../src/components/FilterDrawerItem/FilterDrawerItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, inject } from 'vue';\n\n  import { t } from '../../locale';\n  import Chip from '../Chip/Chip.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface FilterDrawerItemProps {\n    /** The name of a filter group */\n    group: string;\n    title: string;\n    description?: string;\n  }\n  const props = defineProps<FilterDrawerItemProps>();\n\n  export interface FilterDrawerItemEmits {\n    (e: 'navigate');\n  }\n  const emit = defineEmits<FilterDrawerItemEmits>();\n\n  export interface FilterDrawerItemSlots {\n    default?: () => unknown;\n  }\n\n  const slots = defineSlots<FilterDrawerItemSlots>();\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { activeFiltersCounts } = dataViewFiltersUtils.useFiltersInstance;\n\n  const activeCount = computed(() => activeFiltersCounts.value[props.group]);\n  const isDrawerCascade = computed(() => dataViewFiltersUtils.drawerStyle === 'cascade');\n</script>\n\n<template>\n  <div class=\"stash-filter-drawer-item\">\n    <component\n      :is=\"isDrawerCascade ? 'div' : 'button'\"\n      data-test=\"stash-filter-drawer-item|dynamic-component\"\n      class=\"outline-hidden w-full border-b border-ice-500 py-4 focus:outline-blue-500\"\n      @click=\"isDrawerCascade ? undefined : emit('navigate')\"\n    >\n      <div class=\"flex items-center justify-between self-stretch\">\n        <div class=\"flex flex-col items-start\">\n          <h4>{{ props.title }}</h4>\n          <div v-if=\"props.description\" class=\"text-xs\" data-test=\"description\">\n            {{ props.description }}\n          </div>\n        </div>\n        <div class=\"inline-flex items-center gap-6\" :class=\"{ 'mb-0.5 mr-2': isDrawerCascade }\">\n          <Chip\n            v-if=\"activeCount\"\n            color=\"blue\"\n            radius=\"pill\"\n            shade=\"main\"\n            :aria-label=\"t('ll.numberOfActiveFilters')\"\n            :title=\"t('ll.numberOfActiveFilters')\"\n          >\n            {{ activeCount }}\n          </Chip>\n          <Icon v-if=\"!isDrawerCascade\" name=\"chevron-right\" :title=\"t('ll.viewFilterGroup')\" />\n        </div>\n      </div>\n    </component>\n    <div v-if=\"isDrawerCascade && slots.default\" class=\"gap-3 p-6\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","slots","_useSlots","dataViewFiltersUtils","inject","DATA_VIEW_FILTERS_UTILS_INJECTION","activeFiltersCounts","activeCount","computed","isDrawerCascade","_openBlock","_createElementBlock","_hoisted_1","_createBlock","_resolveDynamicComponent","_cache","$event","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4","_normalizeClass","Chip","_unref","t","Icon","_hoisted_5","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAKRC,IAAOC,GAMPC,IAAQC,EAAA,GAERC,IAAuBC,EAAOC,EAAkC,GAAG;AAEzE,QAAI,EAACF,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,qBAAAG,MAAwBH,EAAqB,oBAE/CI,IAAcC,EAAS,MAAMF,EAAoB,MAAMT,EAAM,KAAK,CAAC,GACnEY,IAAkBD,EAAS,MAAML,EAAqB,gBAAgB,SAAS;sBAIrFO,EAAA,GAAAC,EAgCM,OAhCNC,GAgCM;AAAA,OA/BJF,EAAA,GAAAG,EA2BYC,EA1BLL,EAAA,QAAe,QAAA,QAAA,GAAA;AAAA,QACpB,aAAU;AAAA,QACV,OAAM;AAAA,QACL,SAAKM,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEP,EAAA,QAAkB,SAAYV,EAAI,UAAA;AAAA,MAAA;mBAE1C,MAoBM;AAAA,UApBNkB,EAoBM,OApBNC,GAoBM;AAAA,YAnBJD,EAKM,OALNE,GAKM;AAAA,cAJJF,EAA0B,MAAA,MAAAG,EAAnBvB,EAAM,KAAK,GAAA,CAAA;AAAA,cACPA,EAAM,eAAjBa,EAAA,GAAAC,EAEM,OAFNU,GAEMD,EADDvB,EAAM,WAAW,GAAA,CAAA;;YAGxBoB,EAYM,OAAA;AAAA,cAZD,OAAKK,EAAA,CAAC,kCAAgC,EAAA,eAA0Bb,EAAA,OAAe,CAAA;AAAA,YAAA;cAE1EF,EAAA,cADRM,EASOU,GAAA;AAAA;gBAPL,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,OAAM;AAAA,gBACL,cAAYC,EAAAC,CAAA,EAAC,0BAAA;AAAA,gBACb,OAAOD,EAAAC,CAAA,EAAC,0BAAA;AAAA,cAAA;2BAET,MAAiB;AAAA,sBAAdlB,EAAA,KAAW,GAAA,CAAA;AAAA,gBAAA;;;cAEHE,EAAA,0BAAbI,EAAsFa,GAAA;AAAA;gBAAxD,MAAK;AAAA,gBAAiB,OAAOF,EAAAC,CAAA,EAAC,oBAAA;AAAA,cAAA;;;;;;MAIvDhB,EAAA,SAAmBR,EAAM,WAApCS,KAAAC,EAEM,OAFNgB,GAEM;AAAA,QADJC,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/dist/FilterDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.js","sources":["../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import throttle from 'lodash-es/throttle';\n  import { computed, inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n\n  export interface FilterDropdownProps {\n    label: string;\n    /** The name of a filter group */\n    group: string;\n    onApply?: OnApplyFilters;\n  }\n  const props = withDefaults(defineProps<FilterDropdownProps>(), {\n    activeFilterCount: 0,\n    onApply: () => undefined,\n  });\n\n  const emit = defineEmits<{\n    (e: 'reset'): void;\n    (e: 'dismiss'): void;\n  }>();\n\n  const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n    dataViewFiltersUtils.useFiltersInstance;\n\n  const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n  const isOpen = computed(() => dropdownRef.value?.isActive);\n\n  function onToggleButtonClick() {\n    const wasOpen = isOpen.value;\n\n    dropdownRef.value?.toggle();\n\n    if (wasOpen) {\n      undoWorkingFilters();\n      emit('dismiss');\n    }\n  }\n\n  function handleResetClick() {\n    resetFilterGroup(props.group);\n    emit('reset');\n    dropdownRef.value?.dismiss();\n  }\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n    if (!preventDismiss) {\n      dropdownRef.value?.dismiss();\n    }\n  }\n\n  function onDismiss() {\n    undoWorkingFilters();\n    emit('dismiss');\n  }\n\n  const showShadow = ref(false);\n  const onScroll = throttle((event: Event) => {\n    if (!event.target) return;\n\n    if ((event.target as HTMLElement).scrollTop > 0) {\n      showShadow.value = true;\n    } else {\n      showShadow.value = false;\n    }\n  }, 500);\n\n  function onScrollEnd() {\n    setTimeout(() => {\n      showShadow.value = false;\n    }, 2000);\n  }\n</script>\n\n<template>\n  <Dropdown\n    ref=\"dropdownRef\"\n    align=\"left\"\n    class=\"stash-filter-dropdown\"\n    data-test=\"stash-filter-dropdown\"\n    fluid-content\n    close-manually\n    content-class=\"w-full max-w-[600px] h-[400px]\"\n    :offset=\"{ y: 6 }\"\n    @dismiss=\"onDismiss\"\n  >\n    <template #toggle>\n      <FilterChip\n        class=\"rounded-full\"\n        has-dropdown\n        :is-dropdown-open=\"isOpen\"\n        :filter-count=\"activeFiltersCounts[props.group]\"\n        :is-selected=\"isOpen\"\n        @click=\"onToggleButtonClick\"\n      >\n        {{ props.label }}\n      </FilterChip>\n    </template>\n    <template #default>\n      <div class=\"flex h-full flex-col rounded\">\n        <div class=\"flex-1 overflow-hidden rounded-t\">\n          <div class=\"relative h-full overflow-auto p-6\" @scroll=\"onScroll\" @scrollend=\"onScrollEnd\">\n            <slot></slot>\n          </div>\n          <Transition name=\"fade\">\n            <div\n              v-if=\"showShadow\"\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20px] bg-scroll-shadow\"\n            ></div>\n          </Transition>\n        </div>\n\n        <footer\n          class=\"flex shrink-0 justify-end gap-6 rounded-b border border-solid border-x-ice-100 border-b-ice-100 border-t-ice-200 bg-ice-100 p-3.5\"\n        >\n          <Button\n            v-if=\"activeFiltersCounts[props.group]\"\n            secondary\n            class=\"min-w-[100px]\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button class=\"min-w-[100px]\" :disabled=\"isDataViewLoading\" @click=\"handleApplyClick\">\n            {{ t('ll.apply') }}\n          </Button>\n        </footer>\n      </div>\n    </template>\n  </Dropdown>\n</template>\n"],"names":["props","__props","emit","__emit","isDataViewLoading","inject","DATA_VIEW_INJECTION","dataViewFiltersUtils","DATA_VIEW_FILTERS_UTILS_INJECTION","applyFilters","resetFilterGroup","activeFiltersCounts","undoWorkingFilters","dropdownRef","ref","isOpen","computed","_a","onToggleButtonClick","wasOpen","handleResetClick","handleApplyClick","preventDismiss","_b","onDismiss","showShadow","onScroll","throttle","event","onScrollEnd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkBE,UAAMA,IAAQC,GAKRC,IAAOC,GAKP,EAAE,WAAWC,MAAsBC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE/FC,IAAuBF,EAAOG,EAAkC,GAAG;AAEzE,QAAI,EAACD,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,cAAAE,GAAc,kBAAAC,GAAkB,qBAAAC,GAAqB,oBAAAC,EAAA,IAC3DL,EAAqB,oBAEjBM,IAAcC,EAAA,GACdC,IAASC,EAAS,MAAA;;AAAM,cAAAC,IAAAJ,EAAY,UAAZ,gBAAAI,EAAmB;AAAA,KAAQ;AAEzD,aAASC,IAAsB;;AAC7B,YAAMC,IAAUJ,EAAO;AAEvB,OAAAE,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB,UAEfE,MACFP,EAAA,GACAV,EAAK,SAAS;AAAA,IAElB;AAEA,aAASkB,IAAmB;;AAC1B,MAAAV,EAAiBV,EAAM,KAAK,GAC5BE,EAAK,OAAO,IACZe,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB;AAAA,IACrB;AAEA,mBAAeI,IAAmB;;AAChC,YAAM,EAAE,gBAAAC,MAAoB,QAAML,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,OAAsBS,EAAA,KAAkB,CAAA;AAE1E,MAAKa,MACHC,IAAAV,EAAY,UAAZ,QAAAU,EAAmB;AAAA,IAEvB;AAEA,aAASC,IAAY;AACnB,MAAAZ,EAAA,GACAV,EAAK,SAAS;AAAA,IAChB;AAEA,UAAMuB,IAAaX,EAAI,EAAK,GACtBY,IAAWC,EAAS,CAACC,MAAiB;AAC1C,MAAKA,EAAM,WAENA,EAAM,OAAuB,YAAY,IAC5CH,EAAW,QAAQ,KAEnBA,EAAW,QAAQ;AAAA,IAEvB,GAAG,GAAG;AAEN,aAASI,IAAc;AACrB,iBAAW,MAAM;AACf,QAAAJ,EAAW,QAAQ;AAAA,MACrB,GAAG,GAAI;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FilterDropdown.js","sources":["../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import throttle from 'lodash-es/throttle';\n  import { computed, inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n\n  export interface FilterDropdownProps {\n    label: string;\n    /** The name of a filter group */\n    group: string;\n    onApply?: OnApplyFilters;\n  }\n  const props = withDefaults(defineProps<FilterDropdownProps>(), {\n    activeFilterCount: 0,\n    onApply: () => undefined,\n  });\n\n  const emit = defineEmits<{\n    (e: 'reset'): void;\n    (e: 'dismiss'): void;\n  }>();\n\n  const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n    dataViewFiltersUtils.useFiltersInstance;\n\n  const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n  const isOpen = computed(() => dropdownRef.value?.isActive);\n\n  function onToggleButtonClick() {\n    const wasOpen = isOpen.value;\n\n    dropdownRef.value?.toggle();\n\n    if (wasOpen) {\n      undoWorkingFilters();\n      emit('dismiss');\n    }\n  }\n\n  function handleResetClick() {\n    resetFilterGroup(props.group);\n    emit('reset');\n    dropdownRef.value?.dismiss();\n  }\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n    if (!preventDismiss) {\n      dropdownRef.value?.dismiss();\n    }\n  }\n\n  function onDismiss() {\n    undoWorkingFilters();\n    emit('dismiss');\n  }\n\n  const showShadow = ref(false);\n  const onScroll = throttle((event: Event) => {\n    if (!event.target) return;\n\n    if ((event.target as HTMLElement).scrollTop > 0) {\n      showShadow.value = true;\n    } else {\n      showShadow.value = false;\n    }\n  }, 500);\n\n  function onScrollEnd() {\n    setTimeout(() => {\n      showShadow.value = false;\n    }, 2000);\n  }\n</script>\n\n<template>\n  <Dropdown\n    ref=\"dropdownRef\"\n    align=\"left\"\n    class=\"stash-filter-dropdown\"\n    data-test=\"stash-filter-dropdown\"\n    fluid-content\n    close-manually\n    content-class=\"w-full max-w-[600px] h-[400px]\"\n    :offset=\"{ y: 6 }\"\n    @dismiss=\"onDismiss\"\n  >\n    <template #toggle>\n      <FilterChip\n        class=\"rounded-full\"\n        has-dropdown\n        :is-dropdown-open=\"isOpen\"\n        :filter-count=\"activeFiltersCounts[props.group]\"\n        :is-selected=\"isOpen\"\n        @click=\"onToggleButtonClick\"\n      >\n        {{ props.label }}\n      </FilterChip>\n    </template>\n    <template #default>\n      <div class=\"flex h-full flex-col rounded\">\n        <div class=\"flex-1 overflow-hidden rounded-t\">\n          <div class=\"relative h-full overflow-auto p-6\" @scroll=\"onScroll\" @scrollend=\"onScrollEnd\">\n            <slot></slot>\n          </div>\n          <Transition name=\"fade\">\n            <div\n              v-if=\"showShadow\"\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20px] bg-scroll-shadow\"\n            ></div>\n          </Transition>\n        </div>\n\n        <footer\n          class=\"flex shrink-0 justify-end gap-6 rounded-b border border-solid border-x-ice-100 border-b-ice-100 border-t-ice-200 bg-ice-100 p-3.5\"\n        >\n          <Button\n            v-if=\"activeFiltersCounts[props.group]\"\n            secondary\n            class=\"min-w-[100px]\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button class=\"min-w-[100px]\" :disabled=\"isDataViewLoading\" @click=\"handleApplyClick\">\n            {{ t('ll.apply') }}\n          </Button>\n        </footer>\n      </div>\n    </template>\n  </Dropdown>\n</template>\n"],"names":["props","__props","emit","__emit","isDataViewLoading","inject","DATA_VIEW_INJECTION","dataViewFiltersUtils","DATA_VIEW_FILTERS_UTILS_INJECTION","applyFilters","resetFilterGroup","activeFiltersCounts","undoWorkingFilters","dropdownRef","ref","isOpen","computed","_a","onToggleButtonClick","wasOpen","handleResetClick","handleApplyClick","preventDismiss","_b","onDismiss","showShadow","onScroll","throttle","event","onScrollEnd","_createBlock","Dropdown","_createVNode","FilterChip","_unref","_createTextVNode","_toDisplayString","_createElementVNode","_hoisted_1","_hoisted_2","_cache","args","_renderSlot","_ctx","_Transition","_openBlock","_createElementBlock","_hoisted_3","_hoisted_4","Button","t"],"mappings":"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"}

package/dist/FilterSelect.js

@@ -1,6 +1,6 @@
 import { defineComponent as $, computed as v, createBlock as w, openBlock as i, mergeProps as O, withCtx as u, createElementVNode as s, createElementBlock as c, createCommentVNode as A, withDirectives as y, vModelCheckbox as h, withModifiers as _, createVNode as b, withKeys as x, createTextVNode as B, toDisplayString as V, unref as E, Fragment as K, renderList as N } from "vue";
 import { t as D } from "./locale.js";
-import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.js";
+import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-D2I8xDEW.js";
 import g from "./FilterChip.js";
 const I = { class: "flex flex-wrap gap-1.5" }, L = ["id"], T = ["for"], M = ["id", "value"], R = ["for", "onClick"], z = /* @__PURE__ */ $({
   __name: "FilterSelect",

package/dist/FilterSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSelect.js","sources":["../src/components/FilterSelect/FilterSelect.vue"],"sourcesContent":["<script lang=\"ts\">\n  export * from './FilterSelect.types';\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  import { t } from '../../locale';\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import { FilterSelectModelValue, FilterSelectOption } from './FilterSelect.types';\n\n  export interface FilterSelectProps extends FieldProps {\n    /**\n     * The name attribute for the `<input>` elements. It is also used as a unique field to differentiate FilterSelect instances.\n     */\n    name: string;\n\n    options: FilterSelectOption[];\n\n    modelValue: FilterSelectModelValue;\n\n    /**\n     * When true, this prop adds an \"All\" option for selecting all options.\n     */\n    canSelectAll?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FilterSelectProps>(), {\n    canSelectAll: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'update:modelValue', value: FilterSelectModelValue): void;\n  }>();\n\n  /**\n   * @see: https://vuejs.org/guide/components/v-model.html#component-v-model\n   */\n  const selected = computed({\n    get() {\n      return props.modelValue;\n    },\n    set(value) {\n      emit('update:modelValue', value);\n    },\n  });\n\n  const isAllSelected = computed({\n    get() {\n      return props.options.length === props.modelValue.length;\n    },\n    set(isChecked) {\n      emit('update:modelValue', isChecked ? props.options.map((option) => option.value) : []);\n    },\n  });\n\n  function getOptionId(option: FilterSelectOption) {\n    return `${props.name}--${option.value}`;\n  }\n\n  function isOptionSelected(option: FilterSelectOption) {\n    return props.modelValue.includes(option.value);\n  }\n\n  function onEnter(enteredValue: FilterSelectOption['value']) {\n    const newSelected = selected.value.filter((value) => value !== enteredValue);\n\n    if (newSelected.length === selected.value.length) {\n      newSelected.push(enteredValue);\n    }\n\n    selected.value = newSelected;\n  }\n\n  function onEnterAll() {\n    isAllSelected.value = !isAllSelected.value;\n  }\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-filter-select\" data-test=\"stash-filter-select\" fieldset>\n    <div class=\"flex flex-wrap gap-1.5\">\n      <div v-if=\"props.canSelectAll\" :key=\"`${props.name}--all`\">\n        <input\n          :id=\"`${props.name}--all`\"\n          v-model=\"isAllSelected\"\n          class=\"sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          value=\"all\"\n        />\n        <!--  Prevent the native scroll behavior when clicking the label -->\n        <label :for=\"`${props.name}--all`\" @click.prevent=\"onEnterAll\">\n          <FilterChip :is-selected=\"isAllSelected\" tabindex=\"0\" @keypress.enter=\"onEnterAll\">\n            {{ t('ll.all') }}\n          </FilterChip>\n        </label>\n      </div>\n      <div v-for=\"option in props.options\" :key=\"getOptionId(option)\">\n        <input\n          :id=\"getOptionId(option)\"\n          v-model=\"selected\"\n          class=\"sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          :value=\"option.value\"\n        />\n        <!--  Prevent the native scroll behavior when clicking the label -->\n        <label :for=\"getOptionId(option)\" @click.prevent=\"onEnter(option.value)\">\n          <FilterChip :is-selected=\"isOptionSelected(option)\" tabindex=\"0\" @keypress.enter=\"onEnter(option.value)\">\n            {{ option.label }}\n          </FilterChip>\n        </label>\n      </div>\n    </div>\n  </Field>\n</template>\n"],"names":["props","__props","emit","__emit","selected","computed","value","isAllSelected","isChecked","option","getOptionId","isOptionSelected","onEnter","enteredValue","newSelected","onEnterAll"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BE,UAAMA,IAAQC,GAIRC,IAAOC,GAOPC,IAAWC,EAAS;AAAA,MACxB,MAAM;AACJ,eAAOL,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAJ,EAAK,qBAAqBI,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOL,EAAM,QAAQ,WAAWA,EAAM,WAAW;AAAA,MACnD;AAAA,MACA,IAAIQ,GAAW;AACb,QAAAN,EAAK,qBAAqBM,IAAYR,EAAM,QAAQ,IAAI,CAACS,MAAWA,EAAO,KAAK,IAAI,CAAA,CAAE;AAAA,MACxF;AAAA,IAAA,CACD;AAED,aAASC,EAAYD,GAA4B;AAC/C,aAAO,GAAGT,EAAM,IAAI,KAAKS,EAAO,KAAK;AAAA,IACvC;AAEA,aAASE,EAAiBF,GAA4B;AACpD,aAAOT,EAAM,WAAW,SAASS,EAAO,KAAK;AAAA,IAC/C;AAEA,aAASG,EAAQC,GAA2C;AAC1D,YAAMC,IAAcV,EAAS,MAAM,OAAO,CAACE,MAAUA,MAAUO,CAAY;AAE3E,MAAIC,EAAY,WAAWV,EAAS,MAAM,UACxCU,EAAY,KAAKD,CAAY,GAG/BT,EAAS,QAAQU;AAAA,IACnB;AAEA,aAASC,IAAa;AACpB,MAAAR,EAAc,QAAQ,CAACA,EAAc;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FilterSelect.js","sources":["../src/components/FilterSelect/FilterSelect.vue"],"sourcesContent":["<script lang=\"ts\">\n  export * from './FilterSelect.types';\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  import { t } from '../../locale';\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import { FilterSelectModelValue, FilterSelectOption } from './FilterSelect.types';\n\n  export interface FilterSelectProps extends FieldProps {\n    /**\n     * The name attribute for the `<input>` elements. It is also used as a unique field to differentiate FilterSelect instances.\n     */\n    name: string;\n\n    options: FilterSelectOption[];\n\n    modelValue: FilterSelectModelValue;\n\n    /**\n     * When true, this prop adds an \"All\" option for selecting all options.\n     */\n    canSelectAll?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FilterSelectProps>(), {\n    canSelectAll: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'update:modelValue', value: FilterSelectModelValue): void;\n  }>();\n\n  /**\n   * @see: https://vuejs.org/guide/components/v-model.html#component-v-model\n   */\n  const selected = computed({\n    get() {\n      return props.modelValue;\n    },\n    set(value) {\n      emit('update:modelValue', value);\n    },\n  });\n\n  const isAllSelected = computed({\n    get() {\n      return props.options.length === props.modelValue.length;\n    },\n    set(isChecked) {\n      emit('update:modelValue', isChecked ? props.options.map((option) => option.value) : []);\n    },\n  });\n\n  function getOptionId(option: FilterSelectOption) {\n    return `${props.name}--${option.value}`;\n  }\n\n  function isOptionSelected(option: FilterSelectOption) {\n    return props.modelValue.includes(option.value);\n  }\n\n  function onEnter(enteredValue: FilterSelectOption['value']) {\n    const newSelected = selected.value.filter((value) => value !== enteredValue);\n\n    if (newSelected.length === selected.value.length) {\n      newSelected.push(enteredValue);\n    }\n\n    selected.value = newSelected;\n  }\n\n  function onEnterAll() {\n    isAllSelected.value = !isAllSelected.value;\n  }\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-filter-select\" data-test=\"stash-filter-select\" fieldset>\n    <div class=\"flex flex-wrap gap-1.5\">\n      <div v-if=\"props.canSelectAll\" :key=\"`${props.name}--all`\">\n        <input\n          :id=\"`${props.name}--all`\"\n          v-model=\"isAllSelected\"\n          class=\"sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          value=\"all\"\n        />\n        <!--  Prevent the native scroll behavior when clicking the label -->\n        <label :for=\"`${props.name}--all`\" @click.prevent=\"onEnterAll\">\n          <FilterChip :is-selected=\"isAllSelected\" tabindex=\"0\" @keypress.enter=\"onEnterAll\">\n            {{ t('ll.all') }}\n          </FilterChip>\n        </label>\n      </div>\n      <div v-for=\"option in props.options\" :key=\"getOptionId(option)\">\n        <input\n          :id=\"getOptionId(option)\"\n          v-model=\"selected\"\n          class=\"sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          :value=\"option.value\"\n        />\n        <!--  Prevent the native scroll behavior when clicking the label -->\n        <label :for=\"getOptionId(option)\" @click.prevent=\"onEnter(option.value)\">\n          <FilterChip :is-selected=\"isOptionSelected(option)\" tabindex=\"0\" @keypress.enter=\"onEnter(option.value)\">\n            {{ option.label }}\n          </FilterChip>\n        </label>\n      </div>\n    </div>\n  </Field>\n</template>\n"],"names":["props","__props","emit","__emit","selected","computed","value","isAllSelected","isChecked","option","getOptionId","isOptionSelected","onEnter","enteredValue","newSelected","onEnterAll","_createBlock","Field","_mergeProps","_createElementVNode","_hoisted_1","_createElementBlock","$event","_createVNode","FilterChip","_unref","t","_openBlock","_Fragment","_renderList","_withModifiers","_withKeys","_createTextVNode","_toDisplayString"],"mappings":"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"}