@leaflink/stash 52.0.2 → 53.0.0

package/dist/FilterChip.js

@@ -1,9 +1,9 @@
-import { defineComponent as f, useCssModule as v, computed as h, createBlock as w, openBlock as a, normalizeClass as s, unref as t, withCtx as b, createElementVNode as C, renderSlot as k, createElementBlock as n, createCommentVNode as i, toDisplayString as y, createVNode as D } from "vue";
+import { defineComponent as f, useCssModule as y, computed as h, createBlock as v, openBlock as s, normalizeClass as l, unref as t, withCtx as b, createElementVNode as C, renderSlot as w, createElementBlock as n, createCommentVNode as i, toDisplayString as k, createVNode as D } from "vue";
 import { t as c } from "./locale.js";
 import x from "./Chip.js";
 import B from "./Icon.js";
 import { _ as F } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const O = { class: "tw-flex tw-items-center" }, R = ["aria-label", "title"], S = { key: 1 }, N = /* @__PURE__ */ f({
+const O = { class: "flex items-center" }, R = ["aria-label", "title"], S = { key: 1 }, N = /* @__PURE__ */ f({
   __name: "FilterChip",
   props: {
     filterCount: { default: void 0 },
@@ -14,17 +14,17 @@ const O = { class: "tw-flex tw-items-center" }, R = ["aria-label", "title"], S =
   },
   emits: ["click", "remove"],
   setup(d, { emit: p }) {
-    const e = d, l = p, o = v(), r = h(() => Number(e.filterCount) > 0);
+    const e = d, a = p, o = y(), r = h(() => Number(e.filterCount) > 0);
     function m() {
-      l("click");
+      a("click");
     }
     function _() {
-      l("remove");
+      a("remove");
     }
-    return (u, E) => (a(), w(x, {
+    return (u, E) => (s(), v(x, {
       "should-override-colors": "",
       tabindex: "0",
-      class: s(["stash-filter-chip tw-text-sm tw-font-normal tw-normal-case tw-leading-5 tw-text-ice-900", [
+      class: l(["stash-filter-chip text-sm font-normal normal-case leading-5 text-ice-900", [
         t(o).root,
         {
           [t(o)["is-selected"]]: e.isSelected,
@@ -41,19 +41,19 @@ const O = { class: "tw-flex tw-items-center" }, R = ["aria-label", "title"], S =
     }, {
       default: b(() => [
         C("div", O, [
-          k(u.$slots, "default"),
-          r.value ? (a(), n("span", {
+          w(u.$slots, "default"),
+          r.value ? (s(), n("span", {
             key: 0,
             "data-test": "span|filter-count",
-            class: s(t(o)["filter-count"]),
+            class: l(t(o)["filter-count"]),
             "aria-label": t(c)("ll.numberOfActiveFilters"),
             title: t(c)("ll.numberOfActiveFilters")
-          }, y(e.filterCount), 11, R)) : i("", !0),
-          e.hasDropdown ? (a(), n("span", S, [
+          }, k(e.filterCount), 11, R)) : i("", !0),
+          e.hasDropdown ? (s(), n("span", S, [
             D(B, {
               "data-test": "icon|caret",
               name: "caret-down",
-              class: s([
+              class: l([
                 t(o).caret,
                 {
                   [t(o)["caret-rotate"]]: e.isDropdownOpen
@@ -66,15 +66,15 @@ const O = { class: "tw-flex tw-items-center" }, R = ["aria-label", "title"], S =
       _: 3
     }, 8, ["class", "is-removable"]));
   }
-}), M = "_root_1avat_5", V = "_caret_1avat_94", g = {
+}), M = "_root_3y20y_8", V = "_caret_3y20y_97", g = {
   root: M,
-  "is-selected": "_is-selected_1avat_24",
-  "is-removable": "_is-removable_1avat_36",
-  "has-filter-count": "_has-filter-count_1avat_49",
-  "has-dropdown": "_has-dropdown_1avat_54",
-  "filter-count": "_filter-count_1avat_67",
+  "is-selected": "_is-selected_3y20y_27",
+  "is-removable": "_is-removable_3y20y_39",
+  "has-filter-count": "_has-filter-count_3y20y_52",
+  "has-dropdown": "_has-dropdown_3y20y_57",
+  "filter-count": "_filter-count_3y20y_70",
   caret: V,
-  "caret-rotate": "_caret-rotate_1avat_105"
+  "caret-rotate": "_caret-rotate_3y20y_108"
 }, A = {
   $style: g
 }, G = /* @__PURE__ */ F(N, [["__cssModules", A]]);

package/dist/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.js","sources":["../src/components/FilterChip/FilterChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Chip from '../Chip/Chip.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface FilterChipProps {\n    /**\n     * Used for conditionally rendering filter count chip\n     */\n    filterCount?: number;\n\n    /**\n     * Use for conditionally rendering caret\n     */\n    hasDropdown?: boolean;\n\n    /**\n     * Used for styling when `hasDropdown` is true\n     */\n    isDropdownOpen?: boolean;\n\n    /**\n     * Used for conditionally rendering close icon and exposing remove event\n     */\n    isRemovable?: boolean;\n\n    /**\n     * Used for conditionally applying styles\n     */\n    isSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FilterChipProps>(), {\n    filterCount: undefined,\n    hasDropdown: false,\n    isDropdownOpen: false,\n    isRemovable: false,\n    isSelected: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'click'): void;\n    (e: 'remove'): void;\n  }>();\n\n  const classes = useCssModule();\n  const hasFilterCount = computed(() => Number(props.filterCount) > 0);\n\n  function handleClick() {\n    emit('click');\n  }\n\n  function handleRemove() {\n    emit('remove');\n  }\n</script>\n\n<template>\n  <Chip\n    should-override-colors\n    tabindex=\"0\"\n    class=\"stash-filter-chip tw-text-sm tw-font-normal tw-normal-case tw-leading-5 tw-text-ice-900\"\n    radius=\"pill\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['is-selected']]: props.isSelected,\n        [classes['is-removable']]: props.isRemovable,\n        [classes['is-dropdown-open']]: props.isDropdownOpen,\n        [classes['has-dropdown']]: props.hasDropdown,\n        [classes['has-filter-count']]: hasFilterCount,\n      },\n    ]\"\n    :is-removable=\"props.isSelected && props.isRemovable && !props.hasDropdown\"\n    @click=\"handleClick\"\n    @remove=\"handleRemove\"\n  >\n    <div class=\"tw-flex tw-items-center\">\n      <!-- @slot default -->\n      <slot></slot>\n\n      <span\n        v-if=\"hasFilterCount\"\n        data-test=\"span|filter-count\"\n        :class=\"classes['filter-count']\"\n        :aria-label=\"t('ll.numberOfActiveFilters')\"\n        :title=\"t('ll.numberOfActiveFilters')\"\n      >\n        {{ props.filterCount }}\n      </span>\n\n      <span v-if=\"props.hasDropdown\">\n        <Icon\n          data-test=\"icon|caret\"\n          name=\"caret-down\"\n          :class=\"[\n            classes.caret,\n            {\n              [classes['caret-rotate']]: props.isDropdownOpen,\n            },\n          ]\"\n        />\n      </span>\n    </div>\n  </Chip>\n</template>\n\n<style module>\n  /**\n    many styles declared here are overriding styles defined in Chip\n  */\n  .root {\n    background-color: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    cursor: pointer;\n    height: theme('spacing.9');\n    padding-left: theme('spacing.3');\n    padding-right: theme('spacing.3');\n  }\n\n  .root:focus {\n    box-shadow: 0 0 0 4px rgb(0 123 255 / 15%);\n    outline: none;\n  }\n\n  .root:hover {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected {\n    color: var(--color-white);\n    background-color: var(--color-blue-500);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected:hover {\n    color: var(--color-white);\n    background-color: var(--color-blue-700);\n    border: 1px solid var(--color-blue-700);\n  }\n\n  .root.is-selected.is-removable {\n    background-color: var(--color-blue-500);\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button) {\n    margin-right: -1px;\n    padding-right: theme('spacing.3');\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button):hover {\n    background-color: var(--color-blue-700);\n  }\n\n  .root.is-selected.has-filter-count:hover {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .root.has-dropdown {\n    padding-right: theme('spacing[1.5]');\n  }\n\n  .root.has-filter-count:hover {\n    background-color: var(--color-blue-100);\n    color: var(--color-ice-900);\n  }\n\n  .root label {\n    cursor: pointer;\n  }\n\n  .filter-count {\n    display: inline-flex;\n    align-items: center;\n    border-radius: 5em;\n    height: 16px;\n    padding: 0 8px;\n    margin-left: theme('spacing[1.5]');\n    font-size: 10px;\n    font-weight: bold;\n    background-color: var(--color-blue-500);\n    color: var(--color-white);\n  }\n\n  .is-selected .filter-count {\n    background-color: var(--color-blue-700);\n  }\n\n  .is-selected:hover .filter-count {\n    background-color: var(--color-white);\n    color: var(--color-blue-700);\n  }\n\n  .is-selected.is-removable .filter-count {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .caret {\n    color: var(--color-ice-700);\n    margin-left: theme('spacing[1.5]');\n    transform: rotate(0);\n    transition: all 0.5s;\n  }\n\n  .is-selected .caret {\n    color: var(--color-white);\n  }\n\n  .caret-rotate {\n    transform: rotate(-180deg);\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","hasFilterCount","computed","handleClick","handleRemove"],"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"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDrawerItem.js

@@ -1,15 +1,15 @@
-import { defineComponent as C, useSlots as F, inject as k, computed as w, createElementBlock as o, openBlock as e, createBlock as a, createCommentVNode as r, resolveDynamicComponent as x, withCtx as p, createElementVNode as l, toDisplayString as n, 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 p, createElementBlock as o, openBlock as e, createBlock as a, createCommentVNode as r, resolveDynamicComponent as x, withCtx as f, createElementVNode as l, toDisplayString as n, 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-BLu07FiP.js";
 import N from "./Icon.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 = {
+const T = { class: "stash-filter-drawer-item" }, A = { class: "flex items-center justify-between self-stretch" }, V = { class: "flex flex-col items-start" }, B = {
   key: 0,
-  class: "tw-text-xs",
+  class: "text-xs",
   "data-test": "description"
 }, O = {
   key: 0,
-  class: "tw-gap-3 tw-p-6"
+  class: "gap-3 p-6"
 }, R = /* @__PURE__ */ C({
   __name: "FilterDrawerItem",
   props: {
@@ -18,27 +18,27 @@ const T = { class: "stash-filter-drawer-item" }, A = { class: "tw-flex tw-items-
     description: {}
   },
   emits: ["navigate"],
-  setup(f, { emit: v }) {
-    const i = f, _ = v, h = F(), t = k(S.key);
+  setup(v, { emit: _ }) {
+    const i = v, h = _, b = 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 } = t.useFiltersInstance, d = w(() => b.value[i.group]), s = w(() => t.drawerStyle === "cascade");
+    const { activeFiltersCounts: w } = t.useFiltersInstance, d = p(() => w.value[i.group]), s = p(() => 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: m[0] || (m[0] = (j) => s.value ? void 0 : _("navigate"))
+        class: "outline-hidden w-full border-b border-ice-500 py-4 focus:outline-blue-500",
+        onClick: m[0] || (m[0] = (j) => s.value ? void 0 : h("navigate"))
       }, {
-        default: p(() => [
+        default: f(() => [
           l("div", A, [
             l("div", V, [
               l("h4", null, n(i.title), 1),
               i.description ? (e(), o("div", B, n(i.description), 1)) : r("", !0)
             ]),
             l("div", {
-              class: I(["tw-inline-flex tw-items-center tw-gap-6", { "tw-mb-0.5 tw-mr-2": s.value }])
+              class: I(["inline-flex items-center gap-6", { "mb-0.5 mr-2": s.value }])
             }, [
               d.value ? (e(), a(E, {
                 key: 0,
@@ -48,7 +48,7 @@ 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: p(() => [
+                default: f(() => [
                   g(n(d.value), 1)
                 ]),
                 _: 1
@@ -63,7 +63,7 @@ const T = { class: "stash-filter-drawer-item" }, A = { class: "tw-flex tw-items-
         ]),
         _: 1
       })),
-      s.value && h.default ? (e(), o("div", O, [
+      s.value && b.default ? (e(), o("div", O, [
         D(y.$slots, "default")
       ])) : r("", !0)
     ]));

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=\"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,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"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDropdown.js

@@ -1,4 +1,4 @@
-import { defineComponent as O, inject as b, ref as y, computed as R, createBlock as k, openBlock as w, withCtx as l, createElementVNode as d, createVNode as f, unref as o, renderSlot as W, Transition as j, createElementBlock as J, createCommentVNode as x, createTextVNode as p, toDisplayString as m } from "vue";
+import { defineComponent as O, inject as b, ref as y, computed as R, createBlock as k, openBlock as f, withCtx as l, createElementVNode as d, createVNode as p, unref as t, renderSlot as W, Transition as j, createElementBlock as J, createCommentVNode as x, createTextVNode as m, toDisplayString as w } from "vue";
 import z from "lodash-es/throttle";
 import { t as C } from "./locale.js";
 import D from "./Button.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-flex-1 tw-overflow-hidden tw-rounded-t" }, M = {
+const H = { class: "flex h-full flex-col rounded" }, K = { class: "flex-1 overflow-hidden 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-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({
+  class: "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20px] bg-scroll-shadow"
+}, P = { 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" }, ne = /* @__PURE__ */ O({
   __name: "FilterDropdown",
   props: {
     label: {},
@@ -31,17 +31,17 @@ const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "t
       return (e = n.value) == null ? void 0 : e.isActive;
     });
     function A() {
-      var t;
+      var o;
       const e = u.value;
-      (t = n.value) == null || t.toggle(), e && (_(), c("dismiss"));
+      (o = n.value) == null || o.toggle(), e && (_(), c("dismiss"));
     }
     function N() {
       var e;
       S(s.group), c("reset"), (e = n.value) == null || e.dismiss();
     }
     async function V() {
-      var t, a;
-      const { preventDismiss: e } = await ((t = s.onApply) == null ? void 0 : t.call(s)) || E() || {};
+      var o, a;
+      const { preventDismiss: e } = await ((o = s.onApply) == null ? void 0 : o.call(s)) || E() || {};
       e || (a = n.value) == null || a.dismiss();
     }
     function B() {
@@ -55,7 +55,7 @@ const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "t
         r.value = !1;
       }, 2e3);
     }
-    return (e, t) => (w(), k($, {
+    return (e, o) => (f(), k($, {
       ref_key: "dropdownRef",
       ref: n,
       align: "left",
@@ -63,21 +63,21 @@ 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-[400px]",
+      "content-class": "w-full max-w-[600px] h-[400px]",
       offset: { y: 6 },
       onDismiss: B
     }, {
       toggle: l(() => [
-        f(q, {
-          class: "tw-rounded-full",
+        p(q, {
+          class: "rounded-full",
           "has-dropdown": "",
           "is-dropdown-open": u.value,
-          "filter-count": o(v)[s.group],
+          "filter-count": t(v)[s.group],
           "is-selected": u.value,
           onClick: A
         }, {
           default: l(() => [
-            p(m(s.label), 1)
+            m(w(s.label), 1)
           ]),
           _: 1
         }, 8, ["is-dropdown-open", "filter-count", "is-selected"])
@@ -86,40 +86,40 @@ 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-relative tw-h-full tw-overflow-auto tw-p-6",
-              onScroll: t[0] || (t[0] = //@ts-ignore
-              (...a) => o(g) && o(g)(...a)),
+              class: "relative h-full overflow-auto p-6",
+              onScroll: o[0] || (o[0] = //@ts-ignore
+              (...a) => t(g) && t(g)(...a)),
               onScrollend: L
             }, [
               W(e.$slots, "default")
             ], 32),
-            f(j, { name: "fade" }, {
+            p(j, { name: "fade" }, {
               default: l(() => [
-                r.value ? (w(), J("div", M)) : x("", !0)
+                r.value ? (f(), J("div", M)) : x("", !0)
               ]),
               _: 1
             })
           ]),
           d("footer", P, [
-            o(v)[s.group] ? (w(), k(D, {
+            t(v)[s.group] ? (f(), k(D, {
               key: 0,
               secondary: "",
-              class: "tw-min-w-[100px]",
-              disabled: o(h),
+              class: "min-w-[100px]",
+              disabled: t(h),
               onClick: N
             }, {
               default: l(() => [
-                p(m(o(C)("ll.reset")), 1)
+                m(w(t(C)("ll.reset")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])) : x("", !0),
-            f(D, {
-              class: "tw-min-w-[100px]",
-              disabled: o(h),
+            p(D, {
+              class: "min-w-[100px]",
+              disabled: t(h),
               onClick: V
             }, {
               default: l(() => [
-                p(m(o(C)("ll.apply")), 1)
+                m(w(t(C)("ll.apply")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])

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-[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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterSelect.js

@@ -1,8 +1,8 @@
-import { defineComponent as C, computed as v, createBlock as $, 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 w, unref as E, Fragment as K, renderList as N } from "vue";
+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-DI6z3AE9.js";
-import V from "./FilterChip.js";
-const I = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, L = ["id"], T = ["for"], M = ["id", "value"], R = ["for", "onClick"], z = /* @__PURE__ */ C({
+import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.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",
   props: {
     name: {},
@@ -24,36 +24,36 @@ const I = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, L = ["id"], T = ["for"],
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(g, { emit: k }) {
-    const e = g, p = k, o = v({
+  setup(k, { emit: S }) {
+    const e = k, p = S, o = v({
       get() {
         return e.modelValue;
       },
-      set(l) {
-        p("update:modelValue", l);
+      set(t) {
+        p("update:modelValue", t);
       }
     }), n = v({
       get() {
         return e.options.length === e.modelValue.length;
       },
-      set(l) {
-        p("update:modelValue", l ? e.options.map((a) => a.value) : []);
+      set(t) {
+        p("update:modelValue", t ? e.options.map((a) => a.value) : []);
       }
     });
-    function r(l) {
-      return `${e.name}--${l.value}`;
+    function r(t) {
+      return `${e.name}--${t.value}`;
     }
-    function S(l) {
-      return e.modelValue.includes(l.value);
+    function C(t) {
+      return e.modelValue.includes(t.value);
     }
-    function m(l) {
-      const a = o.value.filter((t) => t !== l);
-      a.length === o.value.length && a.push(l), o.value = a;
+    function m(t) {
+      const a = o.value.filter((l) => l !== t);
+      a.length === o.value.length && a.push(t), o.value = a;
     }
     function f() {
       n.value = !n.value;
     }
-    return (l, a) => (i(), $(F, O(e, {
+    return (t, a) => (i(), w(F, O(e, {
       class: "stash-filter-select",
       "data-test": "stash-filter-select",
       fieldset: ""
@@ -65,8 +65,8 @@ const I = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, L = ["id"], T = ["for"],
           }, [
             y(s("input", {
               id: `${e.name}--all`,
-              "onUpdate:modelValue": a[0] || (a[0] = (t) => n.value = t),
-              class: "tw-sr-only",
+              "onUpdate:modelValue": a[0] || (a[0] = (l) => n.value = l),
+              class: "sr-only",
               tabindex: "-1",
               type: "checkbox",
               value: "all"
@@ -77,42 +77,42 @@ const I = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, L = ["id"], T = ["for"],
               for: `${e.name}--all`,
               onClick: _(f, ["prevent"])
             }, [
-              b(V, {
+              b(g, {
                 "is-selected": n.value,
                 tabindex: "0",
                 onKeypress: x(f, ["enter"])
               }, {
                 default: u(() => [
-                  B(w(E(D)("ll.all")), 1)
+                  B(V(E(D)("ll.all")), 1)
                 ]),
                 _: 1
               }, 8, ["is-selected"])
             ], 8, T)
           ])) : A("", !0),
-          (i(!0), c(K, null, N(e.options, (t) => (i(), c("div", {
-            key: r(t)
+          (i(!0), c(K, null, N(e.options, (l) => (i(), c("div", {
+            key: r(l)
           }, [
             y(s("input", {
-              id: r(t),
+              id: r(l),
               "onUpdate:modelValue": a[1] || (a[1] = (d) => o.value = d),
-              class: "tw-sr-only",
+              class: "sr-only",
               tabindex: "-1",
               type: "checkbox",
-              value: t.value
+              value: l.value
             }, null, 8, M), [
               [h, o.value]
             ]),
             s("label", {
-              for: r(t),
-              onClick: _((d) => m(t.value), ["prevent"])
+              for: r(l),
+              onClick: _((d) => m(l.value), ["prevent"])
             }, [
-              b(V, {
-                "is-selected": S(t),
+              b(g, {
+                "is-selected": C(l),
                 tabindex: "0",
-                onKeypress: x((d) => m(t.value), ["enter"])
+                onKeypress: x((d) => m(l.value), ["enter"])
               }, {
                 default: u(() => [
-                  B(w(t.label), 1)
+                  B(V(l.label), 1)
                 ]),
                 _: 2
               }, 1032, ["is-selected", "onKeypress"])

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        <!--  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=\"tw-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"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}