@leaflink/stash 49.5.0 → 50.0.0

package/dist/FilterChip.vue.d.ts

@@ -33,29 +33,29 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FilterChipProps>, {
-    filterCount: undefined;
-    hasDropdown: boolean;
-    isDropdownOpen: boolean;
-    isRemovable: boolean;
-    isSelected: boolean;
+filterCount: undefined;
+hasDropdown: boolean;
+isDropdownOpen: boolean;
+isRemovable: boolean;
+isSelected: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    click: () => void;
-    remove: () => void;
+click: () => void;
+remove: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FilterChipProps>, {
-    filterCount: undefined;
-    hasDropdown: boolean;
-    isDropdownOpen: boolean;
-    isRemovable: boolean;
-    isSelected: boolean;
+filterCount: undefined;
+hasDropdown: boolean;
+isDropdownOpen: boolean;
+isRemovable: boolean;
+isSelected: boolean;
 }>>> & Readonly<{
-    onClick?: (() => any) | undefined;
-    onRemove?: (() => any) | undefined;
+onClick?: (() => any) | undefined;
+onRemove?: (() => any) | undefined;
 }>, {
-    isRemovable: boolean;
-    isSelected: boolean;
-    filterCount: number;
-    hasDropdown: boolean;
-    isDropdownOpen: boolean;
+isRemovable: boolean;
+isSelected: boolean;
+filterCount: number;
+hasDropdown: boolean;
+isDropdownOpen: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/FilterDrawerItem.js

@@ -1,14 +1,8 @@
-import { defineComponent as C, useSlots as F, inject as k, computed as p, openBlock as t, createElementBlock as l, createBlock as a, resolveDynamicComponent as x, withCtx as w, createElementVNode as s, toDisplayString as n, createCommentVNode as o, normalizeClass as I, unref as c, createTextVNode as g, renderSlot as D } from "vue";
+import { defineComponent as C, useSlots as F, inject as k, computed as w, openBlock as e, createElementBlock as o, createBlock as a, resolveDynamicComponent as x, withCtx as p, createElementVNode as r, toDisplayString as n, createCommentVNode as l, normalizeClass as I, unref as c, createTextVNode as g, renderSlot as D } from "vue";
 import { t as u } from "./locale.js";
 import E from "./Chip.js";
-import { D as S } from "./DataViewFilters.keys-c80ffabe.js";
+import { D as S } from "./DataViewFilters.keys-BLu07FiP.js";
 import N from "./Icon.js";
-import "lodash-es/get";
-import "./utils/colorScheme.js";
-import "./_plugin-vue_export-helper-dad06003.js";
-import "lodash-es/uniqueId";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const T = { class: "stash-filter-drawer-item" }, A = { class: "tw-flex tw-items-center tw-justify-between tw-self-stretch" }, V = { class: "tw-flex tw-flex-col tw-items-start" }, B = {
   key: 0,
   class: "tw-text-xs",
@@ -16,7 +10,7 @@ const T = { class: "stash-filter-drawer-item" }, A = { class: "tw-flex tw-items-
 }, O = {
   key: 0,
   class: "tw-gap-3 tw-p-6"
-}, P = /* @__PURE__ */ C({
+}, R = /* @__PURE__ */ C({
   __name: "FilterDrawerItem",
   props: {
     group: {},
@@ -25,28 +19,28 @@ const T = { class: "stash-filter-drawer-item" }, A = { class: "tw-flex tw-items-
   },
   emits: ["navigate"],
   setup(f, { emit: v }) {
-    const r = f, _ = v, h = F(), e = k(S.key);
-    if (!(e != null && e.useFiltersInstance))
+    const i = f, _ = v, h = F(), t = k(S.key);
+    if (!(t != null && t.useFiltersInstance))
       throw new Error(
         "FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters()."
       );
-    const { activeFiltersCounts: b } = e.useFiltersInstance, m = p(() => b.value[r.group]), i = p(() => e.drawerStyle === "cascade");
-    return (y, d) => (t(), l("div", T, [
-      (t(), a(x(i.value ? "div" : "button"), {
+    const { activeFiltersCounts: b } = t.useFiltersInstance, d = w(() => b.value[i.group]), s = w(() => t.drawerStyle === "cascade");
+    return (y, m) => (e(), o("div", T, [
+      (e(), a(x(s.value ? "div" : "button"), {
         "data-test": "stash-filter-drawer-item|dynamic-component",
         class: "tw-w-full tw-border-b tw-border-ice-500 tw-py-4 tw-outline-none focus:tw-outline-blue-500",
-        onClick: d[0] || (d[0] = (j) => i.value ? void 0 : _("navigate"))
+        onClick: m[0] || (m[0] = (j) => s.value ? void 0 : _("navigate"))
       }, {
-        default: w(() => [
-          s("div", A, [
-            s("div", V, [
-              s("h4", null, n(r.title), 1),
-              r.description ? (t(), l("div", B, n(r.description), 1)) : o("", !0)
+        default: p(() => [
+          r("div", A, [
+            r("div", V, [
+              r("h4", null, n(i.title), 1),
+              i.description ? (e(), o("div", B, n(i.description), 1)) : l("", !0)
             ]),
-            s("div", {
-              class: I(["tw-inline-flex tw-items-center tw-gap-6", { "tw-mb-0.5 tw-mr-2": i.value }])
+            r("div", {
+              class: I(["tw-inline-flex tw-items-center tw-gap-6", { "tw-mb-0.5 tw-mr-2": s.value }])
             }, [
-              m.value ? (t(), a(E, {
+              d.value ? (e(), a(E, {
                 key: 0,
                 color: "blue",
                 radius: "pill",
@@ -54,12 +48,12 @@ const T = { class: "stash-filter-drawer-item" }, A = { class: "tw-flex tw-items-
                 "aria-label": c(u)("ll.numberOfActiveFilters"),
                 title: c(u)("ll.numberOfActiveFilters")
               }, {
-                default: w(() => [
-                  g(n(m.value), 1)
+                default: p(() => [
+                  g(n(d.value), 1)
                 ]),
                 _: 1
-              }, 8, ["aria-label", "title"])) : o("", !0),
-              i.value ? o("", !0) : (t(), a(N, {
+              }, 8, ["aria-label", "title"])) : l("", !0),
+              s.value ? l("", !0) : (e(), a(N, {
                 key: 1,
                 name: "chevron-right",
                 title: c(u)("ll.viewFilterGroup")
@@ -69,13 +63,13 @@ const T = { class: "stash-filter-drawer-item" }, A = { class: "tw-flex tw-items-
         ]),
         _: 1
       })),
-      i.value && h.default ? (t(), l("div", O, [
+      s.value && h.default ? (e(), o("div", O, [
         D(y.$slots, "default")
-      ])) : o("", !0)
+      ])) : l("", !0)
     ]));
   }
 });
 export {
-  P as default
+  R as default
 };
 //# sourceMappingURL=FilterDrawerItem.js.map

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?: void;\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=\"tw-w-full tw-border-b tw-border-ice-500 tw-py-4 tw-outline-none focus:tw-outline-blue-500\"\n      @click=\"isDrawerCascade ? undefined : emit('navigate')\"\n    >\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-self-stretch\">\n        <div class=\"tw-flex tw-flex-col tw-items-start\">\n          <h4>{{ props.title }}</h4>\n          <div v-if=\"props.description\" class=\"tw-text-xs\" data-test=\"description\">\n            {{ props.description }}\n          </div>\n        </div>\n        <div class=\"tw-inline-flex tw-items-center tw-gap-6\" :class=\"{ 'tw-mb-0.5 tw-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=\"tw-gap-3 tw-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,KAERC,IAAuBC,EAAOC,EAAkC,GAAG;AAErE,QAAA,EAACF,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIE,UAAA,EAAE,qBAAAG,EAAoB,IAAIH,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?: void;\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=\"tw-w-full tw-border-b tw-border-ice-500 tw-py-4 tw-outline-none focus:tw-outline-blue-500\"\n      @click=\"isDrawerCascade ? undefined : emit('navigate')\"\n    >\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-self-stretch\">\n        <div class=\"tw-flex tw-flex-col tw-items-start\">\n          <h4>{{ props.title }}</h4>\n          <div v-if=\"props.description\" class=\"tw-text-xs\" data-test=\"description\">\n            {{ props.description }}\n          </div>\n        </div>\n        <div class=\"tw-inline-flex tw-items-center tw-gap-6\" :class=\"{ 'tw-mb-0.5 tw-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=\"tw-gap-3 tw-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,KAERC,IAAuBC,EAAOC,EAAkC,GAAG;AAErE,QAAA,EAACF,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIE,UAAA,EAAE,qBAAAG,EAAoB,IAAIH,EAAqB,oBAE/CI,IAAcC,EAAS,MAAMF,EAAoB,MAAMT,EAAM,KAAK,CAAC,GACnEY,IAAkBD,EAAS,MAAML,EAAqB,gBAAgB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDrawerItem.vue.d.ts

@@ -23,9 +23,9 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<FilterDrawerItemProps>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    navigate: () => void;
+navigate: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<FilterDrawerItemProps>>> & Readonly<{
-    onNavigate?: (() => any) | undefined;
+onNavigate?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, Readonly<FilterDrawerItemSlots> & FilterDrawerItemSlots>;
 export default _default;
 

package/dist/FilterDropdown.js

@@ -1,33 +1,17 @@
-import { defineComponent as O, inject as b, ref as y, computed as R, openBlock as u, createBlock as k, withCtx as i, createVNode as w, unref as o, createTextVNode as m, toDisplayString as f, createElementVNode as d, renderSlot as W, Transition as j, createElementBlock as J, createCommentVNode as x } from "vue";
+import { defineComponent as O, inject as b, ref as y, computed as R, openBlock as w, createBlock as k, withCtx as l, createVNode as f, unref as o, createTextVNode as p, toDisplayString as m, createElementVNode as d, renderSlot as W, Transition as j, createElementBlock as J, createCommentVNode as x } from "vue";
 import z from "lodash-es/throttle";
 import { t as C } from "./locale.js";
 import D from "./Button.js";
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as F } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
-import { D as G } from "./DataViewFilters.keys-c80ffabe.js";
+import { D as F } from "./DataView.keys-C7eaZg2G.js";
+import { D as G } from "./DataViewFilters.keys-BLu07FiP.js";
 import $ from "./Dropdown.js";
 import q from "./FilterChip.js";
-import "lodash-es/get";
-import "./Icon.js";
-import "./index-9e1095ef.js";
-import "./_plugin-vue_export-helper-dad06003.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
-import "./constants.js";
-import "./directives/clickoutside.js";
-import "./utils/calculateElementOverflow.js";
-import "./utils/helpers.js";
-import "lodash-es/camelCase";
-import "lodash-es/isFinite";
-import "lodash-es/isPlainObject";
-import "./Chip.js";
-import "./utils/colorScheme.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 = {
   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" }, yt = /* @__PURE__ */ O({
+}, 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({
   __name: "FilterDropdown",
   props: {
     label: {},
@@ -37,43 +21,43 @@ const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "t
   },
   emits: ["reset", "dismiss"],
   setup(T, { emit: I }) {
-    const s = T, c = I, { isLoading: h } = b(F.key, F.defaults), l = b(G.key);
-    if (!(l != null && l.useFiltersInstance))
+    const s = T, c = I, { isLoading: h } = b(F.key, F.defaults), i = b(G.key);
+    if (!(i != null && i.useFiltersInstance))
       throw new Error(
         "FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters()."
       );
-    const { applyFilters: E, resetFilterGroup: S, activeFiltersCounts: v, undoWorkingFilters: _ } = l.useFiltersInstance, r = y(), p = R(() => {
-      var t;
-      return (t = r.value) == null ? void 0 : t.isActive;
+    const { applyFilters: E, resetFilterGroup: S, activeFiltersCounts: v, undoWorkingFilters: _ } = i.useFiltersInstance, n = y(), u = R(() => {
+      var e;
+      return (e = n.value) == null ? void 0 : e.isActive;
     });
     function A() {
-      var e;
-      const t = p.value;
-      (e = r.value) == null || e.toggle(), t && (_(), c("dismiss"));
+      var t;
+      const e = u.value;
+      (t = n.value) == null || t.toggle(), e && (_(), c("dismiss"));
     }
     function N() {
-      var t;
-      S(s.group), c("reset"), (t = r.value) == null || t.dismiss();
+      var e;
+      S(s.group), c("reset"), (e = n.value) == null || e.dismiss();
     }
     async function V() {
-      var e, a;
-      const { preventDismiss: t } = await ((e = s.onApply) == null ? void 0 : e.call(s)) || E() || {};
-      t || (a = r.value) == null || a.dismiss();
+      var t, a;
+      const { preventDismiss: e } = await ((t = s.onApply) == null ? void 0 : t.call(s)) || E() || {};
+      e || (a = n.value) == null || a.dismiss();
     }
     function B() {
       _(), c("dismiss");
     }
-    const n = y(!1), g = z((t) => {
-      t.target && (t.target.scrollTop > 0 ? n.value = !0 : n.value = !1);
+    const r = y(!1), g = z((e) => {
+      e.target && (e.target.scrollTop > 0 ? r.value = !0 : r.value = !1);
     }, 500);
     function L() {
       setTimeout(() => {
-        n.value = !1;
+        r.value = !1;
       }, 2e3);
     }
-    return (t, e) => (u(), k($, {
+    return (e, t) => (w(), k($, {
       ref_key: "dropdownRef",
-      ref: r,
+      ref: n,
       align: "left",
       class: "stash-filter-dropdown",
       "data-test": "stash-filter-dropdown",
@@ -83,59 +67,59 @@ const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "t
       offset: { y: 6 },
       onDismiss: B
     }, {
-      toggle: i(() => [
-        w(q, {
+      toggle: l(() => [
+        f(q, {
           class: "tw-rounded-full",
           "has-dropdown": "",
-          "is-dropdown-open": p.value,
+          "is-dropdown-open": u.value,
           "filter-count": o(v)[s.group],
-          "is-selected": p.value,
+          "is-selected": u.value,
           onClick: A
         }, {
-          default: i(() => [
-            m(f(s.label), 1)
+          default: l(() => [
+            p(m(s.label), 1)
           ]),
           _: 1
         }, 8, ["is-dropdown-open", "filter-count", "is-selected"])
       ]),
-      default: i(() => [
+      default: l(() => [
         d("div", H, [
           d("div", K, [
             d("div", {
               class: "tw-h-full tw-overflow-auto tw-p-6",
-              onScroll: e[0] || (e[0] = //@ts-ignore
+              onScroll: t[0] || (t[0] = //@ts-ignore
               (...a) => o(g) && o(g)(...a)),
               onScrollend: L
             }, [
-              W(t.$slots, "default")
+              W(e.$slots, "default")
             ], 32),
-            w(j, { name: "fade" }, {
-              default: i(() => [
-                n.value ? (u(), J("div", M)) : x("", !0)
+            f(j, { name: "fade" }, {
+              default: l(() => [
+                r.value ? (w(), J("div", M)) : x("", !0)
               ]),
               _: 1
             })
           ]),
           d("footer", P, [
-            o(v)[s.group] ? (u(), k(D, {
+            o(v)[s.group] ? (w(), k(D, {
               key: 0,
               secondary: "",
               class: "tw-min-w-[100px]",
               disabled: o(h),
               onClick: N
             }, {
-              default: i(() => [
-                m(f(o(C)("ll.reset")), 1)
+              default: l(() => [
+                p(m(o(C)("ll.reset")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])) : x("", !0),
-            w(D, {
+            f(D, {
               class: "tw-min-w-[100px]",
               disabled: o(h),
               onClick: V
             }, {
-              default: i(() => [
-                m(f(o(C)("ll.apply")), 1)
+              default: l(() => [
+                p(m(o(C)("ll.apply")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -147,6 +131,6 @@ const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "t
   }
 });
 export {
-  yt as default
+  ne as default
 };
 //# sourceMappingURL=FilterDropdown.js.map

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;AAErE,QAAA,EAACD,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,cAAAE,GAAc,kBAAAC,GAAkB,qBAAAC,GAAqB,oBAAAC,MAC3DL,EAAqB,oBAEjBM,IAAcC,KACdC,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,MACiBP,KACnBV,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;;AAC1B,YAAA,EAAE,gBAAAC,MAAoB,QAAML,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,OAAsBS,EAAa,KAAK;AAE1E,MAAKa,MACHC,IAAAV,EAAY,UAAZ,QAAAU,EAAmB;AAAA,IAEvB;AAEA,aAASC,IAAY;AACA,MAAAZ,KACnBV,EAAK,SAAS;AAAA,IAChB;AAEM,UAAAuB,IAAaX,EAAI,EAAK,GACtBY,IAAWC,EAAS,CAACC,MAAiB;AAC1C,MAAKA,EAAM,WAENA,EAAM,OAAuB,YAAY,IAC5CH,EAAW,QAAQ,KAEnBA,EAAW,QAAQ;AAAA,OAEpB,GAAG;AAEN,aAASI,IAAc;AACrB,iBAAW,MAAM;AACf,QAAAJ,EAAW,QAAQ;AAAA,SAClB,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-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;AAErE,QAAA,EAACD,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,cAAAE,GAAc,kBAAAC,GAAkB,qBAAAC,GAAqB,oBAAAC,MAC3DL,EAAqB,oBAEjBM,IAAcC,KACdC,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,MACiBP,KACnBV,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;;AAC1B,YAAA,EAAE,gBAAAC,MAAoB,QAAML,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,OAAsBS,EAAa,KAAK;AAE1E,MAAKa,MACHC,IAAAV,EAAY,UAAZ,QAAAU,EAAmB;AAAA,IAEvB;AAEA,aAASC,IAAY;AACA,MAAAZ,KACnBV,EAAK,SAAS;AAAA,IAChB;AAEM,UAAAuB,IAAaX,EAAI,EAAK,GACtBY,IAAWC,EAAS,CAACC,MAAiB;AACtC,MAACA,EAAM,WAENA,EAAM,OAAuB,YAAY,IAC5CH,EAAW,QAAQ,KAEnBA,EAAW,QAAQ;AAAA,OAEpB,GAAG;AAEN,aAASI,IAAc;AACrB,iBAAW,MAAM;AACf,QAAAJ,EAAW,QAAQ;AAAA,SAClB,GAAI;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDropdown.vue.d.ts

@@ -33,19 +33,19 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FilterDropdownProps>, {
-    activeFilterCount: number;
-    onApply: () => undefined;
+activeFilterCount: number;
+onApply: () => undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    reset: () => void;
-    dismiss: () => void;
+reset: () => void;
+dismiss: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FilterDropdownProps>, {
-    activeFilterCount: number;
-    onApply: () => undefined;
+activeFilterCount: number;
+onApply: () => undefined;
 }>>> & Readonly<{
-    onReset?: (() => any) | undefined;
-    onDismiss?: (() => any) | undefined;
+onReset?: (() => any) | undefined;
+onDismiss?: (() => any) | undefined;
 }>, {
-    onApply: OnApplyFilters;
+onApply: OnApplyFilters;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/FilterSelect.js

@@ -1,17 +1,8 @@
-import { defineComponent as $, computed as p, openBlock as r, createBlock as C, withCtx as u, createElementVNode as s, createElementBlock as d, withDirectives as f, vModelCheckbox as v, createVNode as _, withKeys as h, createTextVNode as b, toDisplayString as x, unref as A, createCommentVNode as B, Fragment as E, renderList as K } from "vue";
+import { defineComponent as $, computed as p, openBlock as u, createBlock as C, withCtx as i, createElementVNode as s, createElementBlock as d, withDirectives as f, vModelCheckbox as v, createVNode as _, withKeys as h, createTextVNode as b, toDisplayString as x, unref as A, createCommentVNode as B, Fragment as E, renderList as K } from "vue";
 import { t as N } from "./locale.js";
-import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-fded4f75.js";
+import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-DjxUvSRF.js";
 import y from "./FilterChip.js";
-import "lodash-es/get";
-import "lodash-es/uniqueId";
-import "./Label.vue_vue_type_script_setup_true_lang-b6ba2f02.js";
-import "./Chip.js";
-import "./utils/colorScheme.js";
-import "./Icon.js";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./_plugin-vue_export-helper-dad06003.js";
-const D = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, O = ["id"], U = ["for"], I = ["id", "value"], L = ["for"], Y = /* @__PURE__ */ $({
+const D = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, O = ["id"], U = ["for"], I = ["id", "value"], L = ["for"], z = /* @__PURE__ */ $({
   __name: "FilterSelect",
   props: {
     name: {},
@@ -22,92 +13,92 @@ const D = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, O = ["id"], U = ["for"],
   },
   emits: ["update:modelValue"],
   setup(V, { emit: g }) {
-    const e = V, c = g, o = p({
+    const e = V, c = g, n = p({
       get() {
         return e.modelValue;
       },
-      set(t) {
-        c("update:modelValue", t);
+      set(l) {
+        c("update:modelValue", l);
       }
-    }), n = p({
+    }), o = p({
       get() {
         return e.options.length === e.modelValue.length;
       },
-      set(t) {
-        c("update:modelValue", t ? e.options.map((a) => a.value) : []);
+      set(l) {
+        c("update:modelValue", l ? e.options.map((a) => a.value) : []);
       }
     });
-    function i(t) {
-      return `${e.name}--${t.value}`;
+    function r(l) {
+      return `${e.name}--${l.value}`;
     }
-    function w(t) {
-      return e.modelValue.includes(t.value);
+    function w(l) {
+      return e.modelValue.includes(l.value);
     }
-    function k(t) {
-      const a = o.value.filter((l) => l !== t);
-      a.length === o.value.length && a.push(t), o.value = a;
+    function k(l) {
+      const a = n.value.filter((t) => t !== l);
+      a.length === n.value.length && a.push(l), n.value = a;
     }
     function S() {
-      n.value = !n.value;
+      o.value = !o.value;
     }
-    return (t, a) => (r(), C(F, {
+    return (l, a) => (u(), C(F, {
       class: "stash-filter-select",
       fieldset: "",
       label: e.label
     }, {
-      default: u(() => [
+      default: i(() => [
         s("div", D, [
-          e.canSelectAll ? (r(), d("div", {
+          e.canSelectAll ? (u(), d("div", {
             key: `${e.name}--all`
           }, [
             f(s("input", {
               id: `${e.name}--all`,
-              "onUpdate:modelValue": a[0] || (a[0] = (l) => n.value = l),
+              "onUpdate:modelValue": a[0] || (a[0] = (t) => o.value = t),
               class: "tw-sr-only",
               tabindex: "-1",
               type: "checkbox",
               value: "all"
             }, null, 8, O), [
-              [v, n.value]
+              [v, o.value]
             ]),
             s("label", {
               for: `${e.name}--all`
             }, [
               _(y, {
-                "is-selected": n.value,
+                "is-selected": o.value,
                 tabindex: "0",
                 onKeypress: h(S, ["enter"])
               }, {
-                default: u(() => [
+                default: i(() => [
                   b(x(A(N)("ll.all")), 1)
                 ]),
                 _: 1
               }, 8, ["is-selected"])
             ], 8, U)
           ])) : B("", !0),
-          (r(!0), d(E, null, K(e.options, (l) => (r(), d("div", {
-            key: i(l)
+          (u(!0), d(E, null, K(e.options, (t) => (u(), d("div", {
+            key: r(t)
           }, [
             f(s("input", {
-              id: i(l),
-              "onUpdate:modelValue": a[1] || (a[1] = (m) => o.value = m),
+              id: r(t),
+              "onUpdate:modelValue": a[1] || (a[1] = (m) => n.value = m),
               class: "tw-sr-only",
               tabindex: "-1",
               type: "checkbox",
-              value: l.value
+              value: t.value
             }, null, 8, I), [
-              [v, o.value]
+              [v, n.value]
             ]),
             s("label", {
-              for: i(l)
+              for: r(t)
             }, [
               _(y, {
-                "is-selected": w(l),
+                "is-selected": w(t),
                 tabindex: "0",
-                onKeypress: h((m) => k(l.value), ["enter"])
+                onKeypress: h((m) => k(t.value), ["enter"])
               }, {
-                default: u(() => [
-                  b(x(l.label), 1)
+                default: i(() => [
+                  b(x(t.label), 1)
                 ]),
                 _: 2
               }, 1032, ["is-selected", "onKeypress"])
@@ -120,6 +111,6 @@ const D = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, O = ["id"], U = ["for"],
   }
 });
 export {
-  Y 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 Field from '../Field/Field.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import { FilterSelectModelValue, FilterSelectOption } from './FilterSelect.types';\n\n  export interface FilterSelectProps {\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    label: 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 class=\"stash-filter-select\" fieldset :label=\"props.label\">\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":";;;;;;;;;;;;;;;;;;;;;;;;AA8BE,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;AACR,QAAAN,EAAA,qBAAqBM,IAAYR,EAAM,QAAQ,IAAI,CAACS,MAAWA,EAAO,KAAK,IAAI,CAAE,CAAA;AAAA,MACxF;AAAA,IAAA,CACD;AAED,aAASC,EAAYD,GAA4B;AACxC,aAAA,GAAGT,EAAM,SAASS,EAAO;AAAA,IAClC;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;AACN,MAAAR,EAAA,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 Field from '../Field/Field.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import { FilterSelectModelValue, FilterSelectOption } from './FilterSelect.types';\n\n  export interface FilterSelectProps {\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    label: 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 class=\"stash-filter-select\" fieldset :label=\"props.label\">\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":";;;;;;;;;;;;;;;AA8BE,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;AACR,QAAAN,EAAA,qBAAqBM,IAAYR,EAAM,QAAQ,IAAI,CAACS,MAAWA,EAAO,KAAK,IAAI,CAAE,CAAA;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;AACN,MAAAR,EAAA,QAAQ,CAACA,EAAc;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}