@leaflink/stash 51.12.6 → 51.12.7

package/dist/FilterDropdown.js

@@ -8,10 +8,10 @@ import { D as F } from "./DataView.keys-aSOnA4AD.js";
 import { D as G } from "./DataViewFilters.keys-BLu07FiP.js";
 import $ from "./Dropdown.js";
 import q from "./FilterChip.js";
-const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "tw-relative tw-grow tw-overflow-hidden tw-rounded-t" }, M = {
+const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "tw-flex-1 tw-overflow-hidden tw-rounded-t" }, M = {
   key: 0,
   class: "tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-h-[20px] tw-bg-scroll-shadow"
-}, P = { class: "tw-flex tw-justify-end tw-gap-6 tw-rounded-b tw-border tw-border-solid tw-border-x-ice-100 tw-border-b-ice-100 tw-border-t-ice-200 tw-bg-ice-100 tw-p-3.5" }, ne = /* @__PURE__ */ O({
+}, P = { class: "tw-flex tw-shrink-0 tw-justify-end tw-gap-6 tw-rounded-b tw-border tw-border-solid tw-border-x-ice-100 tw-border-b-ice-100 tw-border-t-ice-200 tw-bg-ice-100 tw-p-3.5" }, ne = /* @__PURE__ */ O({
   __name: "FilterDropdown",
   props: {
     label: {},
@@ -63,7 +63,7 @@ const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "t
       "data-test": "stash-filter-dropdown",
       "fluid-content": "",
       "close-manually": "",
-      "content-class": "tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]",
+      "content-class": "tw-w-full tw-max-w-[600px] tw-h-[400px]",
       offset: { y: 6 },
       onDismiss: B
     }, {
@@ -86,7 +86,7 @@ const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "t
         d("div", H, [
           d("div", K, [
             d("div", {
-              class: "tw-h-full tw-overflow-auto tw-p-6",
+              class: "tw-relative tw-h-full tw-overflow-auto tw-p-6",
               onScroll: t[0] || (t[0] = //@ts-ignore
               (...a) => o(g) && o(g)(...a)),
               onScrollend: L

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=\"tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]\"\n    :offset=\"{ y: 6 }\"\n    @dismiss=\"onDismiss\"\n  >\n    <template #toggle>\n      <FilterChip\n        class=\"tw-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=\"tw-flex tw-h-full tw-flex-col tw-rounded\">\n        <div class=\"tw-relative tw-grow tw-overflow-hidden tw-rounded-t\">\n          <div class=\"tw-h-full tw-overflow-auto tw-p-6\" @scroll=\"onScroll\" @scrollend=\"onScrollEnd\">\n            <slot></slot>\n          </div>\n          <Transition name=\"fade\">\n            <div\n              v-if=\"showShadow\"\n              class=\"tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-h-[20px] tw-bg-scroll-shadow\"\n            ></div>\n          </Transition>\n        </div>\n\n        <footer\n          class=\"tw-flex tw-justify-end tw-gap-6 tw-rounded-b tw-border tw-border-solid tw-border-x-ice-100 tw-border-b-ice-100 tw-border-t-ice-200 tw-bg-ice-100 tw-p-3.5\"\n        >\n          <Button\n            v-if=\"activeFiltersCounts[props.group]\"\n            secondary\n            class=\"tw-min-w-[100px]\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button class=\"tw-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=\"tw-w-full tw-max-w-[600px] tw-h-[400px]\"\n    :offset=\"{ y: 6 }\"\n    @dismiss=\"onDismiss\"\n  >\n    <template #toggle>\n      <FilterChip\n        class=\"tw-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=\"tw-flex tw-h-full tw-flex-col tw-rounded\">\n        <div class=\"tw-flex-1 tw-overflow-hidden tw-rounded-t\">\n          <div class=\"tw-relative tw-h-full tw-overflow-auto tw-p-6\" @scroll=\"onScroll\" @scrollend=\"onScrollEnd\">\n            <slot></slot>\n          </div>\n          <Transition name=\"fade\">\n            <div\n              v-if=\"showShadow\"\n              class=\"tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-h-[20px] tw-bg-scroll-shadow\"\n            ></div>\n          </Transition>\n        </div>\n\n        <footer\n          class=\"tw-flex tw-shrink-0 tw-justify-end tw-gap-6 tw-rounded-b tw-border tw-border-solid tw-border-x-ice-100 tw-border-b-ice-100 tw-border-t-ice-200 tw-bg-ice-100 tw-p-3.5\"\n        >\n          <Button\n            v-if=\"activeFiltersCounts[props.group]\"\n            secondary\n            class=\"tw-min-w-[100px]\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button class=\"tw-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterSelect.js

@@ -1,8 +1,8 @@
-import { defineComponent as k, computed as m, createBlock as $, openBlock as r, mergeProps as C, withCtx as d, createElementVNode as s, createElementBlock as u, createCommentVNode as O, withDirectives as f, vModelCheckbox as v, createVNode as y, withKeys as h, createTextVNode as _, toDisplayString as b, unref as A, Fragment as E, renderList as K } from "vue";
-import { t as N } from "./locale.js";
-import { _ as D } from "./Field.vue_vue_type_script_setup_true_lang-DI6z3AE9.js";
-import x from "./FilterChip.js";
-const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, I = ["id"], L = ["for"], T = ["id", "value"], R = ["for"], j = /* @__PURE__ */ k({
+import { defineComponent as $, computed as f, createBlock as C, openBlock as r, mergeProps as F, withCtx as d, createElementVNode as s, createElementBlock as u, createCommentVNode as O, withDirectives as v, vModelCheckbox as y, createVNode as h, withKeys as _, createTextVNode as b, toDisplayString as x, unref as A, Fragment as D, renderList as E } from "vue";
+import { t as K } from "./locale.js";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-DI6z3AE9.js";
+import B from "./FilterChip.js";
+const I = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, L = ["id"], T = ["for"], R = ["id", "value"], U = ["for"], z = /* @__PURE__ */ $({
   __name: "FilterSelect",
   props: {
     name: {},
@@ -24,97 +24,103 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, I = ["id"], L = ["for"],
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(B, { emit: V }) {
-    const e = B, c = V, o = m({
+  setup(g, { emit: V }) {
+    const l = g, c = V, a = f({
       get() {
-        return e.modelValue;
+        return l.modelValue;
       },
-      set(t) {
-        c("update:modelValue", t);
+      set(e) {
+        c("update:modelValue", e);
       }
-    }), n = m({
+    }), n = f({
       get() {
-        return e.options.length === e.modelValue.length;
+        return l.options.length === l.modelValue.length;
       },
-      set(t) {
-        c("update:modelValue", t ? e.options.map((a) => a.value) : []);
+      set(e) {
+        c("update:modelValue", e ? l.options.map((t) => t.value) : []);
       }
     });
-    function i(t) {
-      return `${e.name}--${t.value}`;
+    function i(e) {
+      return `${l.name}--${e.value}`;
     }
-    function g(t) {
-      return e.modelValue.includes(t.value);
+    function w(e) {
+      return l.modelValue.includes(e.value);
     }
-    function w(t) {
-      const a = o.value.filter((l) => l !== t);
-      a.length === o.value.length && a.push(t), o.value = a;
+    function S(e) {
+      const t = a.value.filter((o) => o !== e);
+      t.length === a.value.length && t.push(e), a.value = t;
     }
-    function S() {
+    function k() {
       n.value = !n.value;
     }
-    return (t, a) => (r(), $(D, C(e, {
+    function p(e) {
+      var t;
+      e.preventDefault(), (t = e.target) == null || t.blur();
+    }
+    return (e, t) => (r(), C(N, F(l, {
       class: "stash-filter-select",
       "data-test": "stash-filter-select",
       fieldset: ""
     }), {
       default: d(() => [
-        s("div", F, [
-          e.canSelectAll ? (r(), u("div", {
-            key: `${e.name}--all`
+        s("div", I, [
+          l.canSelectAll ? (r(), u("div", {
+            key: `${l.name}--all`
           }, [
-            f(s("input", {
-              id: `${e.name}--all`,
-              "onUpdate:modelValue": a[0] || (a[0] = (l) => n.value = l),
+            v(s("input", {
+              id: `${l.name}--all`,
+              "onUpdate:modelValue": t[0] || (t[0] = (o) => n.value = o),
               class: "tw-sr-only",
               tabindex: "-1",
               type: "checkbox",
-              value: "all"
-            }, null, 8, I), [
-              [v, n.value]
+              value: "all",
+              onFocus: p
+            }, null, 40, L), [
+              [y, n.value]
             ]),
             s("label", {
-              for: `${e.name}--all`
+              for: `${l.name}--all`
             }, [
-              y(x, {
+              h(B, {
                 "is-selected": n.value,
                 tabindex: "0",
-                onKeypress: h(S, ["enter"])
+                onKeypress: _(k, ["enter"])
               }, {
                 default: d(() => [
-                  _(b(A(N)("ll.all")), 1)
+                  b(x(A(K)("ll.all")), 1)
                 ]),
                 _: 1
               }, 8, ["is-selected"])
-            ], 8, L)
+            ], 8, T)
           ])) : O("", !0),
-          (r(!0), u(E, null, K(e.options, (l) => (r(), u("div", {
-            key: i(l)
+          (r(!0), u(D, null, E(l.options, (o) => (r(), u("div", {
+            key: i(o)
           }, [
-            f(s("input", {
-              id: i(l),
-              "onUpdate:modelValue": a[1] || (a[1] = (p) => o.value = p),
+            v(s("input", {
+              id: i(o),
+              "onUpdate:modelValue": t[1] || (t[1] = (m) => a.value = m),
               class: "tw-sr-only",
               tabindex: "-1",
               type: "checkbox",
-              value: l.value
-            }, null, 8, T), [
-              [v, o.value]
+              value: o.value,
+              onFocus: p
+            }, null, 40, R), [
+              [y, a.value]
             ]),
             s("label", {
-              for: i(l)
+              for: i(o)
             }, [
-              y(x, {
-                "is-selected": g(l),
+              h(B, {
+                "is-selected": w(o),
                 tabindex: "0",
-                onKeypress: h((p) => w(l.value), ["enter"])
+                onKeypress: _((m) => S(o.value), ["enter"])
               }, {
                 default: d(() => [
-                  _(b(l.label), 1)
+                  b(x(o.label), 1)
                 ]),
                 _: 2
               }, 1032, ["is-selected", "onKeypress"])
-            ], 8, R)
+            ], 8, U)
           ]))), 128))
         ])
       ]),
@@ -123,6 +129,6 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, I = ["id"], L = ["for"],
   }
 });
 export {
-  j as default
+  z as default
 };
 //# sourceMappingURL=FilterSelect.js.map

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=\"tw-flex tw-flex-wrap tw-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=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          value=\"all\"\n        />\n        <label :for=\"`${props.name}--all`\">\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=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          :value=\"option.value\"\n        />\n        <label :for=\"getOptionId(option)\">\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\n  // Prevent the scroll from being triggered when the focus is on the input\n  function preventScroll(event: FocusEvent) {\n    event.preventDefault();\n    (event.target as HTMLElement)?.blur();\n  }\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-filter-select\" data-test=\"stash-filter-select\" fieldset>\n    <div class=\"tw-flex tw-flex-wrap tw-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=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          value=\"all\"\n          @focus=\"preventScroll\"\n        />\n        <label :for=\"`${props.name}--all`\">\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=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          :value=\"option.value\"\n          @focus=\"preventScroll\"\n        />\n        <label :for=\"getOptionId(option)\">\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","preventScroll","event","_a"],"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;AAGA,aAASS,EAAcC,GAAmB;;AACxC,MAAAA,EAAM,eAAA,IACLC,IAAAD,EAAM,WAAN,QAAAC,EAA8B;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "51.12.6",
+  "version": "51.12.7",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",