@leaflink/stash 43.0.1 → 43.2.0

package/dist/DataViewFilters.js

@@ -1,4 +1,4 @@
-import { ref as x, computed as D, defineComponent as R, useSlots as W, inject as j, provide as M, watch as O, openBlock as c, createBlock as v, normalizeClass as J, unref as t, withCtx as o, mergeProps as P, createCommentVNode as p, createElementBlock as z, createElementVNode as C, renderSlot as V, createVNode as I, createTextVNode as h, toDisplayString as _ } from "vue";
+import { ref as x, computed as S, defineComponent as R, useSlots as W, inject as j, provide as M, watch as O, openBlock as c, createBlock as v, normalizeClass as J, unref as t, withCtx as o, mergeProps as P, createCommentVNode as f, createElementBlock as z, createElementVNode as C, renderSlot as V, createVNode as I, createTextVNode as h, toDisplayString as _ } from "vue";
 import Q from "./useMediaQuery.js";
 import { SCREEN_SIZES as U } from "./constants.js";
 import { t as n } from "./locale.js";
@@ -28,53 +28,53 @@ import "lodash-es/isNil";
 import "./utils/i18n.js";
 import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
 function Pe({
-  schema: i,
+  schema: a,
   dataViewRef: w
 }) {
   const e = x({}), u = x({});
-  for (const l in i)
-    e.value[l] = i[l].defaultValue, u.value[l] = i[l].defaultValue;
-  const F = w;
-  function B() {
-    e.value = T(u.value), F.value.updateCurrentFilters(e.value, { shouldEmit: !0 });
+  for (const l in a)
+    e.value[l] = a[l].defaultValue, u.value[l] = a[l].defaultValue;
+  const y = w;
+  function D() {
+    e.value = T(u.value), y.value.updateCurrentFilters(e.value, { shouldEmit: !0 });
   }
-  function g() {
-    for (const l in i)
-      e.value[l] = i[l].defaultValue, u.value[l] = i[l].defaultValue;
-    F.value.updateCurrentFilters(e.value, { shouldEmit: !0 });
+  function F() {
+    for (const l in a)
+      e.value[l] = a[l].defaultValue, u.value[l] = a[l].defaultValue;
+    y.value.updateCurrentFilters(e.value, { shouldEmit: !0 });
   }
   function b(l) {
-    for (const r in i)
-      i[r].group === l && (e.value[r] = i[r].defaultValue, u.value[r] = i[r].defaultValue);
-    F.value.updateCurrentFilters(e.value, { shouldEmit: !0 });
+    for (const r in a)
+      a[r].group === l && (e.value[r] = a[r].defaultValue, u.value[r] = a[r].defaultValue);
+    y.value.updateCurrentFilters(e.value, { shouldEmit: !0 });
   }
-  function E() {
+  function B() {
     u.value = T(e.value);
   }
-  const N = D(() => {
+  const E = S(() => {
     var r;
     const l = {};
-    for (const m in i) {
-      const a = i[m], f = e.value[m];
-      (((r = a.isActive) == null ? void 0 : r.call(a, f)) || L(f)) && a.group && (l[a.group] = (l[a.group] ?? 0) + 1);
+    for (const m in a) {
+      const i = a[m], p = e.value[m];
+      (((r = i.isActive) == null ? void 0 : r.call(i, p)) || L(p)) && i.group && (l[i.group] = (l[i.group] ?? 0) + 1);
     }
     return l;
-  }), k = D(() => {
+  }), k = S(() => {
     var r;
     let l = 0;
-    for (const m in i) {
-      const a = i[m], f = e.value[m];
-      (((r = a.isActive) == null ? void 0 : r.call(a, f)) || L(f)) && (l += 1);
+    for (const m in a) {
+      const i = a[m], p = e.value[m];
+      (((r = i.isActive) == null ? void 0 : r.call(i, p)) || L(p)) && (l += 1);
     }
     return l;
   });
   return {
-    applyFilters: B,
-    resetAllFilters: g,
+    applyFilters: D,
+    resetAllFilters: F,
     // @ts-expect-error "could be instantiated with a different subtype": TODO: figure out how to resolve the types
     resetFilterGroup: b,
-    undoWorkingFilters: E,
-    activeFiltersCounts: N,
+    undoWorkingFilters: B,
+    activeFiltersCounts: E,
     totalActiveFiltersCount: k,
     appliedFilters: e,
     workingFilters: u
@@ -89,6 +89,7 @@ const ee = {
     filtersLabelText: { default: n("ll.filterBy") },
     searchBarProps: { default: void 0 },
     showSearch: { type: Boolean, default: !0 },
+    drawerStyle: { default: "nested" },
     drawerProps: { default: void 0 },
     showDrawerPreviousButton: { type: Boolean, default: !1 },
     useFiltersInstance: { default: void 0 },
@@ -96,45 +97,45 @@ const ee = {
     activeGroup: { default: "" }
   },
   emits: ["open-drawer", "dismiss", "previous", "reset-group", "reset-all"],
-  setup(i, { emit: w }) {
-    const e = i, u = W(), F = Q(`(min-width: ${U.lg})`), {
-      density: B,
-      isLoading: g,
+  setup(a, { emit: w }) {
+    const e = a, u = W(), y = Q(`(min-width: ${U.lg})`), {
+      density: D,
+      isLoading: F,
       isWithinModule: b,
-      currentSearch: E,
-      updateCurrentSearch: N
+      currentSearch: B,
+      updateCurrentSearch: E
     } = j(G.key, G.defaults);
-    M(Y.key, { useFiltersInstance: e.useFiltersInstance });
-    const k = D(() => {
+    M(Y.key, { useFiltersInstance: e.useFiltersInstance, drawerStyle: e.drawerStyle });
+    const k = S(() => {
       var s;
       return ((s = e.useFiltersInstance) == null ? void 0 : s.totalActiveFiltersCount.value) ?? 0;
-    }), l = D(
+    }), l = S(
       () => {
         var s;
         return ((s = e.useFiltersInstance) == null ? void 0 : s.activeFiltersCounts.value[e.activeGroup]) ?? 0;
       }
     ), r = x(!1);
     async function m() {
-      var d, y;
-      const { preventDismiss: s } = await ((d = e.onApply) == null ? void 0 : d.call(e)) || ((y = e.useFiltersInstance) == null ? void 0 : y.applyFilters()) || {};
+      var d, g;
+      const { preventDismiss: s } = await ((d = e.onApply) == null ? void 0 : d.call(e)) || ((g = e.useFiltersInstance) == null ? void 0 : g.applyFilters()) || {};
       s || (r.value = !1);
     }
-    function a() {
+    function i() {
       var s;
       (s = e.useFiltersInstance) == null || s.resetFilterGroup(e.activeGroup), w("reset-group"), r.value = !1;
     }
-    function f() {
+    function p() {
       var s;
       (s = e.useFiltersInstance) == null || s.resetAllFilters(), w("reset-all"), r.value = !1;
     }
-    function S() {
+    function N() {
       var s;
       (s = e.useFiltersInstance) == null || s.undoWorkingFilters(), r.value = !1, w("dismiss");
     }
     return O(r, () => {
       r.value && w("open-drawer");
     }), (s, d) => (c(), v(Z, {
-      class: J(["stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6", { "lg:tw-p-6": t(B) === "comfortable", "tw-mb-3": !t(b) }]),
+      class: J(["stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6", { "lg:tw-p-6": t(D) === "comfortable", "tw-mb-3": !t(b) }]),
       radius: t(b) ? "none" : "rounded",
       "data-test": "stash-data-view-filters",
       "disable-padding": ""
@@ -144,12 +145,12 @@ const ee = {
           key: 0,
           class: "tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-4",
           "data-test": "stash-data-view-filters|search-bar",
-          "is-loading": t(g),
+          "is-loading": t(F),
           label: t(n)("ll.search"),
-          "model-value": t(E)
+          "model-value": t(B)
         }, e.searchBarProps, {
-          onSearch: d[0] || (d[0] = (y) => t(N)(y, { shouldEmit: !0 }))
-        }), null, 16, ["is-loading", "label", "model-value"])) : p("", !0),
+          onSearch: d[0] || (d[0] = (g) => t(E)(g, { shouldEmit: !0 }))
+        }), null, 16, ["is-loading", "label", "model-value"])) : f("", !0),
         t(u).default ? (c(), z("div", ee, [
           C("div", te, [
             V(s.$slots, "filters-label", {}, () => [
@@ -167,7 +168,7 @@ const ee = {
               class: "!tw-flex tw-w-full tw-justify-center tw-gap-4 md:!tw-inline-flex md:tw-w-auto",
               "data-test": "stash-data-view-filters|drawer-toggle-button",
               "filter-count": k.value,
-              onClick: d[1] || (d[1] = (y) => r.value = !0)
+              onClick: d[1] || (d[1] = (g) => r.value = !0)
             }, {
               default: o(() => [
                 C("span", re, [
@@ -180,19 +181,19 @@ const ee = {
               ]),
               _: 1
             }, 8, ["filter-count"]),
-            t(F) ? V(s.$slots, "default", { key: 0 }) : p("", !0),
-            k.value > 0 && t(F) ? (c(), v(A, {
+            t(y) ? V(s.$slots, "default", { key: 0 }) : f("", !0),
+            k.value > 0 && t(y) ? (c(), v(A, {
               key: 1,
               inline: "",
-              onClick: f
+              onClick: p
             }, {
               default: o(() => [
                 h(_(t(n)("ll.resetAll")), 1)
               ]),
               _: 1
-            })) : p("", !0)
+            })) : f("", !0)
           ])
-        ])) : p("", !0),
+        ])) : f("", !0),
         t(u).drawer ? (c(), v(K, P({
           key: 2,
           "data-test": "stash-data-view-filters|drawer",
@@ -200,7 +201,7 @@ const ee = {
           position: "right",
           "is-open": r.value,
           title: t(n)("ll.allFilters")
-        }, e.drawerProps, { onDismiss: S }), {
+        }, e.drawerProps, { onDismiss: N }), {
           headerAction: o(() => [
             e.showDrawerPreviousButton ? (c(), v(A, {
               key: 0,
@@ -209,55 +210,55 @@ const ee = {
               "data-test": "stash-data-view-filters|drawer-previous-button",
               "aria-label": t(n)("ll.previous"),
               title: t(n)("ll.previous"),
-              onClick: d[2] || (d[2] = (y) => w("previous"))
+              onClick: d[2] || (d[2] = (g) => w("previous"))
             }, {
               default: o(() => [
                 I($, { name: "chevron-left" })
               ]),
               _: 1
-            }, 8, ["aria-label", "title"])) : p("", !0)
+            }, 8, ["aria-label", "title"])) : f("", !0)
           ]),
           footer: o(() => [
             C("div", se, [
               !e.showDrawerPreviousButton && k.value > 0 ? (c(), v(A, {
                 key: 0,
                 secondary: "",
-                disabled: t(g),
-                onClick: f
+                disabled: t(F),
+                onClick: p
               }, {
                 default: o(() => [
                   h(_(t(n)("ll.resetAll")), 1)
                 ]),
                 _: 1
-              }, 8, ["disabled"])) : p("", !0),
-              e.showDrawerPreviousButton && l.value > 0 ? (c(), v(A, {
+              }, 8, ["disabled"])) : f("", !0),
+              (e.showDrawerPreviousButton || e.drawerStyle === "cascade") && l.value > 0 ? (c(), v(A, {
                 key: 1,
                 secondary: "",
-                disabled: t(g),
-                onClick: a
+                disabled: t(F),
+                onClick: i
               }, {
                 default: o(() => [
                   h(_(t(n)("ll.reset")), 1)
                 ]),
                 _: 1
-              }, 8, ["disabled"])) : p("", !0),
-              e.showDrawerPreviousButton ? (c(), v(A, {
+              }, 8, ["disabled"])) : f("", !0),
+              e.showDrawerPreviousButton || e.drawerStyle === "cascade" ? (c(), v(A, {
                 key: 2,
-                disabled: t(g),
+                disabled: t(F),
                 onClick: m
               }, {
                 default: o(() => [
                   h(_(t(n)("ll.apply")), 1)
                 ]),
                 _: 1
-              }, 8, ["disabled"])) : p("", !0)
+              }, 8, ["disabled"])) : f("", !0)
             ])
           ]),
           default: o(() => [
             V(s.$slots, "drawer")
           ]),
           _: 3
-        }, 16, ["is-open", "title"])) : p("", !0)
+        }, 16, ["is-open", "title"])) : f("", !0)
       ]),
       _: 3
     }, 8, ["class", "radius"]));

package/dist/DataViewFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewFilters.js","sources":["../src/components/DataViewFilters/useFilters.ts","../src/components/DataViewFilters/DataViewFilters.vue"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep';\nimport { computed, ComputedRef, Ref, ref } from 'vue';\n\nimport isDefined from '../../composables/useValidation/utils/isDefined';\nimport DataView from '../DataView/DataView.vue';\n\ntype DataViewInstance = InstanceType<typeof DataView>;\n\n/**\n * Contains metadata and configuration for the filters.\n * @see https://www.typescriptlang.org/docs/handbook/2/mapped-types.html\n */\nexport type UseFiltersSchema<Values extends object, Groups extends string> = {\n  [Property in keyof Values]: {\n    defaultValue?: Values[Property];\n    group?: Groups;\n    isActive?: (value: Values[Property]) => boolean;\n  };\n};\n\nexport interface UseFiltersArgs<Values extends object, Groups extends string> {\n  schema: UseFiltersSchema<Values, Groups>;\n  /** A ref for an instance of DataView */\n  dataViewRef: Ref<unknown>; // Note: using `Ref<InstanceType<typeof DataView>>` here causes type errors when providing a value for this argument\n}\n\nexport interface UseFiltersReturnType<Values = object, Groups extends string = string> {\n  applyFilters: () => void;\n  resetAllFilters: () => void;\n  resetFilterGroup: (group: string) => void; // Note: group is intentionally not typed as `Groups` since there is no way to pass in a Groups type to UseFiltersReturnType within DataViewFilters.vue\n  undoWorkingFilters: () => void;\n  activeFiltersCounts: ComputedRef<Record<Groups, number>>;\n  totalActiveFiltersCount: ComputedRef<number>;\n  appliedFilters: Ref<Values>;\n  workingFilters: Ref<Values>;\n}\n\n/**\n * Provides utility functions for working with `DataViewFilters`.\n */\nexport function useFilters<Values extends object, Groups extends string>({\n  schema,\n  dataViewRef,\n}: UseFiltersArgs<Values, Groups>): UseFiltersReturnType<Values, Groups> {\n  const appliedFilters = ref({}) as Ref<Values>;\n  const workingFilters = ref({}) as Ref<Values>;\n\n  for (const filterName in schema) {\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    appliedFilters.value[filterName] = schema[filterName].defaultValue;\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    workingFilters.value[filterName] = schema[filterName].defaultValue;\n  }\n\n  const dvRef = dataViewRef as Ref<DataViewInstance>;\n\n  /**\n   * For when an \"Apply\" button is clicked. It does the following:\n   *   1) applies the working filter state\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function applyFilters() {\n    appliedFilters.value = cloneDeep(workingFilters.value);\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset all\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to all filters\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetAllFilters() {\n    for (const filterName in schema) {\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      appliedFilters.value[filterName] = schema[filterName].defaultValue;\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      workingFilters.value[filterName] = schema[filterName].defaultValue;\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to the given filter group\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetFilterGroup(group: Groups) {\n    for (const filterName in schema) {\n      if (schema[filterName].group === group) {\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        appliedFilters.value[filterName] = schema[filterName].defaultValue;\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        workingFilters.value[filterName] = schema[filterName].defaultValue;\n      }\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * Resets the `workingFilters` to match the `appliedFilters`. This can be used when the FilterDrawer or a FilterDropdown is dismissed without clicking \"Reset\" or \"Apply\".\n   */\n  function undoWorkingFilters() {\n    workingFilters.value = cloneDeep(appliedFilters.value);\n  }\n\n  const activeFiltersCounts = computed(() => {\n    const counts = {} as Record<Groups, number>;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive && config.group) {\n        counts[config.group] = (counts[config.group] ?? 0) + 1;\n      }\n    }\n\n    return counts;\n  });\n\n  const totalActiveFiltersCount = computed(() => {\n    let count = 0;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive) {\n        count += 1;\n      }\n    }\n\n    return count;\n  });\n\n  return {\n    applyFilters,\n    resetAllFilters,\n    // @ts-expect-error \"could be instantiated with a different subtype\": TODO: figure out how to resolve the types\n    resetFilterGroup,\n    undoWorkingFilters,\n    activeFiltersCounts,\n    totalActiveFiltersCount,\n    appliedFilters,\n    workingFilters,\n  };\n}\n\nexport default useFilters;\n","<script lang=\"ts\">\n  export * from './DataViewFilters.keys';\n  export * from './DataViewFilters.types';\n  export * from './useFilters';\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, ref, watch } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import { SCREEN_SIZES } from '../../constants';\n  import { t } from '../../locale';\n  import Box from '../Box/Box.vue';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Label from '../Label/Label.vue';\n  import Modal, { type ModalProps } from '../Modal/Modal.vue';\n  import SearchBar, { SearchBarProps } from '../SearchBar/SearchBar.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from './DataViewFilters.keys';\n  import type { OnApplyFilters } from './DataViewFilters.types';\n  import type { UseFiltersReturnType } from './useFilters';\n\n  export interface DataViewFiltersProps {\n    filtersLabelText?: string;\n    /**\n     * Props to pass to the `SearchBar` component.\n     */\n    searchBarProps?: SearchBarProps;\n    showSearch?: boolean;\n    drawerProps?: ModalProps;\n    showDrawerPreviousButton?: boolean;\n    /**\n     * Required when using filters. This prop should contain the return value of the `useFilters()` composable.\n     */\n    useFiltersInstance?: UseFiltersReturnType;\n    onApply?: OnApplyFilters;\n    /** The name of the active filter group. The active filter group is determined by which instance of FilterDropdown or FilterDrawerItem is open. */\n    activeGroup?: string;\n  }\n\n  export interface DataViewFiltersSlots {\n    default?: void;\n    drawer?: void;\n    'filters-label'?: void;\n  }\n\n  const props = withDefaults(defineProps<DataViewFiltersProps>(), {\n    filtersLabelText: t('ll.filterBy'),\n    isLoading: false,\n    drawerProps: undefined,\n    searchBarProps: undefined,\n    showDrawerPreviousButton: false,\n    showSearch: true,\n    useFiltersInstance: undefined,\n    onApply: undefined,\n    activeGroup: '',\n  });\n\n  const emit =\n    defineEmits<{\n      /** When the drawer is opened */\n      (e: 'open-drawer'): void;\n      /** When the drawer is dismissed */\n      (e: 'dismiss'): void;\n      /** When the \"Previous\" button in the header is clicked */\n      (e: 'previous'): void;\n      /** When the \"Reset\" button is clicked while viewing a filter group */\n      (e: 'reset-group'): void;\n      /** When one of the \"Reset All\" buttons is clicked */\n      (e: 'reset-all'): void;\n    }>();\n\n  const slots = defineSlots<DataViewFiltersSlots>();\n\n  const isDesktop = useMediaQuery(`(min-width: ${SCREEN_SIZES.lg})`);\n\n  const {\n    density,\n    isLoading: isDataViewLoading,\n    isWithinModule,\n    currentSearch,\n    updateCurrentSearch,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  provide(DATA_VIEW_FILTERS_UTILS_INJECTION.key, { useFiltersInstance: props.useFiltersInstance });\n\n  const totalActiveFiltersCount = computed(() => props.useFiltersInstance?.totalActiveFiltersCount.value ?? 0);\n  const activeGroupActiveFiltersCount = computed(\n    () => props.useFiltersInstance?.activeFiltersCounts.value[props.activeGroup] ?? 0,\n  );\n  const isDrawerOpen = ref(false);\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || props.useFiltersInstance?.applyFilters() || {};\n\n    if (!preventDismiss) {\n      isDrawerOpen.value = false;\n    }\n  }\n\n  function handleResetGroupClick() {\n    props.useFiltersInstance?.resetFilterGroup(props.activeGroup);\n    emit('reset-group');\n    isDrawerOpen.value = false;\n  }\n\n  function handleResetAllClick() {\n    props.useFiltersInstance?.resetAllFilters();\n    emit('reset-all');\n    isDrawerOpen.value = false;\n  }\n\n  function onDismiss() {\n    props.useFiltersInstance?.undoWorkingFilters();\n    isDrawerOpen.value = false;\n    emit('dismiss');\n  }\n\n  watch(isDrawerOpen, () => {\n    if (isDrawerOpen.value) {\n      emit('open-drawer');\n    }\n  });\n</script>\n\n<template>\n  <Box\n    class=\"stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6\"\n    :class=\"{ 'lg:tw-p-6': density === 'comfortable', 'tw-mb-3': !isWithinModule }\"\n    :radius=\"isWithinModule ? 'none' : 'rounded'\"\n    data-test=\"stash-data-view-filters\"\n    disable-padding\n  >\n    <SearchBar\n      v-if=\"props.showSearch\"\n      class=\"tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-4\"\n      data-test=\"stash-data-view-filters|search-bar\"\n      :is-loading=\"isDataViewLoading\"\n      :label=\"t('ll.search')\"\n      :model-value=\"currentSearch\"\n      v-bind=\"props.searchBarProps\"\n      @search=\"(searchTerm) => updateCurrentSearch(searchTerm, { shouldEmit: true })\"\n    />\n    <div\n      v-if=\"slots.default\"\n      class=\"tw-col-span-12 tw-row-start-2 md:tw-row-start-1 md:tw-col-start-7 lg:tw-col-start-5 lg:tw-col-span-8\"\n    >\n      <div class=\"tw-hidden md:tw-block\">\n        <slot name=\"filters-label\">\n          <Label>{{ props.filtersLabelText }}</Label>\n        </slot>\n      </div>\n      <div class=\"tw-flex tw-gap-4\">\n        <FilterChip\n          secondary\n          class=\"!tw-flex tw-w-full tw-justify-center tw-gap-4 md:!tw-inline-flex md:tw-w-auto\"\n          data-test=\"stash-data-view-filters|drawer-toggle-button\"\n          :filter-count=\"totalActiveFiltersCount\"\n          @click=\"isDrawerOpen = true\"\n        >\n          <span class=\"tw-inline-flex tw-items-center tw-gap-3\">\n            <Icon name=\"filter-line\" class=\"tw-text-ice-700\" />\n            <span>{{ t('ll.filters') }}</span>\n          </span>\n        </FilterChip>\n        <slot v-if=\"isDesktop\"></slot>\n        <Button v-if=\"totalActiveFiltersCount > 0 && isDesktop\" inline @click=\"handleResetAllClick\">\n          {{ t('ll.resetAll') }}\n        </Button>\n      </div>\n    </div>\n    <Modal\n      v-if=\"slots.drawer\"\n      data-test=\"stash-data-view-filters|drawer\"\n      disable-body-padding\n      position=\"right\"\n      :is-open=\"isDrawerOpen\"\n      :title=\"t('ll.allFilters')\"\n      v-bind=\"props.drawerProps\"\n      @dismiss=\"onDismiss\"\n    >\n      <template #headerAction>\n        <Button\n          v-if=\"props.showDrawerPreviousButton\"\n          icon\n          class=\"tw-text-ice-100\"\n          data-test=\"stash-data-view-filters|drawer-previous-button\"\n          :aria-label=\"t('ll.previous')\"\n          :title=\"t('ll.previous')\"\n          @click=\"emit('previous')\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n\n      <slot name=\"drawer\"></slot>\n\n      <template #footer>\n        <div class=\"tw-flex tw-flex-col-reverse lg:tw-flex-row lg:tw-justify-end tw-gap-gutter\">\n          <Button\n            v-if=\"!props.showDrawerPreviousButton && totalActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetAllClick\"\n          >\n            {{ t('ll.resetAll') }}\n          </Button>\n          <Button\n            v-if=\"props.showDrawerPreviousButton && activeGroupActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetGroupClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button v-if=\"props.showDrawerPreviousButton\" :disabled=\"isDataViewLoading\" @click=\"handleApplyClick\">\n            {{ t('ll.apply') }}\n          </Button>\n        </div>\n      </template>\n    </Modal>\n  </Box>\n</template>\n"],"names":["useFilters","schema","dataViewRef","appliedFilters","ref","workingFilters","filterName","dvRef","applyFilters","cloneDeep","resetAllFilters","resetFilterGroup","group","undoWorkingFilters","activeFiltersCounts","computed","counts","config","value","_a","isDefined","totalActiveFiltersCount","count","slots","_useSlots","isDesktop","useMediaQuery","SCREEN_SIZES","density","isDataViewLoading","isWithinModule","currentSearch","updateCurrentSearch","inject","DATA_VIEW_INJECTION","provide","DATA_VIEW_FILTERS_UTILS_INJECTION","props","activeGroupActiveFiltersCount","isDrawerOpen","handleApplyClick","preventDismiss","_b","handleResetGroupClick","emit","handleResetAllClick","onDismiss","watch"],"mappings":"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"}
+{"version":3,"file":"DataViewFilters.js","sources":["../src/components/DataViewFilters/useFilters.ts","../src/components/DataViewFilters/DataViewFilters.vue"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep';\nimport { computed, ComputedRef, Ref, ref } from 'vue';\n\nimport isDefined from '../../composables/useValidation/utils/isDefined';\nimport DataView from '../DataView/DataView.vue';\n\ntype DataViewInstance = InstanceType<typeof DataView>;\n\n/**\n * Contains metadata and configuration for the filters.\n * @see https://www.typescriptlang.org/docs/handbook/2/mapped-types.html\n */\nexport type UseFiltersSchema<Values extends object, Groups extends string> = {\n  [Property in keyof Values]: {\n    defaultValue?: Values[Property];\n    group?: Groups;\n    isActive?: (value: Values[Property]) => boolean;\n  };\n};\n\nexport interface UseFiltersArgs<Values extends object, Groups extends string> {\n  schema: UseFiltersSchema<Values, Groups>;\n  /** A ref for an instance of DataView */\n  dataViewRef: Ref<unknown>; // Note: using `Ref<InstanceType<typeof DataView>>` here causes type errors when providing a value for this argument\n}\n\nexport interface UseFiltersReturnType<Values = object, Groups extends string = string> {\n  applyFilters: () => void;\n  resetAllFilters: () => void;\n  resetFilterGroup: (group: string) => void; // Note: group is intentionally not typed as `Groups` since there is no way to pass in a Groups type to UseFiltersReturnType within DataViewFilters.vue\n  undoWorkingFilters: () => void;\n  activeFiltersCounts: ComputedRef<Record<Groups, number>>;\n  totalActiveFiltersCount: ComputedRef<number>;\n  appliedFilters: Ref<Values>;\n  workingFilters: Ref<Values>;\n}\n\n/**\n * Provides utility functions for working with `DataViewFilters`.\n */\nexport function useFilters<Values extends object, Groups extends string>({\n  schema,\n  dataViewRef,\n}: UseFiltersArgs<Values, Groups>): UseFiltersReturnType<Values, Groups> {\n  const appliedFilters = ref({}) as Ref<Values>;\n  const workingFilters = ref({}) as Ref<Values>;\n\n  for (const filterName in schema) {\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    appliedFilters.value[filterName] = schema[filterName].defaultValue;\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    workingFilters.value[filterName] = schema[filterName].defaultValue;\n  }\n\n  const dvRef = dataViewRef as Ref<DataViewInstance>;\n\n  /**\n   * For when an \"Apply\" button is clicked. It does the following:\n   *   1) applies the working filter state\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function applyFilters() {\n    appliedFilters.value = cloneDeep(workingFilters.value);\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset all\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to all filters\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetAllFilters() {\n    for (const filterName in schema) {\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      appliedFilters.value[filterName] = schema[filterName].defaultValue;\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      workingFilters.value[filterName] = schema[filterName].defaultValue;\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to the given filter group\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetFilterGroup(group: Groups) {\n    for (const filterName in schema) {\n      if (schema[filterName].group === group) {\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        appliedFilters.value[filterName] = schema[filterName].defaultValue;\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        workingFilters.value[filterName] = schema[filterName].defaultValue;\n      }\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * Resets the `workingFilters` to match the `appliedFilters`. This can be used when the FilterDrawer or a FilterDropdown is dismissed without clicking \"Reset\" or \"Apply\".\n   */\n  function undoWorkingFilters() {\n    workingFilters.value = cloneDeep(appliedFilters.value);\n  }\n\n  const activeFiltersCounts = computed(() => {\n    const counts = {} as Record<Groups, number>;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive && config.group) {\n        counts[config.group] = (counts[config.group] ?? 0) + 1;\n      }\n    }\n\n    return counts;\n  });\n\n  const totalActiveFiltersCount = computed(() => {\n    let count = 0;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive) {\n        count += 1;\n      }\n    }\n\n    return count;\n  });\n\n  return {\n    applyFilters,\n    resetAllFilters,\n    // @ts-expect-error \"could be instantiated with a different subtype\": TODO: figure out how to resolve the types\n    resetFilterGroup,\n    undoWorkingFilters,\n    activeFiltersCounts,\n    totalActiveFiltersCount,\n    appliedFilters,\n    workingFilters,\n  };\n}\n\nexport default useFilters;\n","<script lang=\"ts\">\n  export * from './DataViewFilters.keys';\n  export * from './DataViewFilters.types';\n  export * from './useFilters';\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, ref, watch } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import { SCREEN_SIZES } from '../../constants';\n  import { t } from '../../locale';\n  import Box from '../Box/Box.vue';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Label from '../Label/Label.vue';\n  import Modal, { type ModalProps } from '../Modal/Modal.vue';\n  import SearchBar, { SearchBarProps } from '../SearchBar/SearchBar.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from './DataViewFilters.keys';\n  import type { DrawerStyle, OnApplyFilters } from './DataViewFilters.types';\n  import type { UseFiltersReturnType } from './useFilters';\n\n  export interface DataViewFiltersProps {\n    filtersLabelText?: string;\n    /**\n     * Props to pass to the `SearchBar` component.\n     */\n    searchBarProps?: SearchBarProps;\n    showSearch?: boolean;\n    /** 'cascade' displays all fields within every filter group; 'nested' displays only the group names and requires clicking a group to view its fields */\n    drawerStyle?: DrawerStyle;\n    drawerProps?: ModalProps;\n    showDrawerPreviousButton?: boolean;\n    /**\n     * Required when using filters. This prop should contain the return value of the `useFilters()` composable.\n     */\n    useFiltersInstance?: UseFiltersReturnType;\n    onApply?: OnApplyFilters;\n    /** The name of the active filter group. The active filter group is determined by which instance of FilterDropdown or FilterDrawerItem is open. */\n    activeGroup?: string;\n  }\n\n  export interface DataViewFiltersSlots {\n    default?: void;\n    drawer?: void;\n    'filters-label'?: void;\n  }\n\n  const props = withDefaults(defineProps<DataViewFiltersProps>(), {\n    filtersLabelText: t('ll.filterBy'),\n    isLoading: false,\n    drawerStyle: 'nested',\n    drawerProps: undefined,\n    searchBarProps: undefined,\n    showDrawerPreviousButton: false,\n    showSearch: true,\n    useFiltersInstance: undefined,\n    onApply: undefined,\n    activeGroup: '',\n  });\n\n  const emit =\n    defineEmits<{\n      /** When the drawer is opened */\n      (e: 'open-drawer'): void;\n      /** When the drawer is dismissed */\n      (e: 'dismiss'): void;\n      /** When the \"Previous\" button in the header is clicked */\n      (e: 'previous'): void;\n      /** When the \"Reset\" button is clicked while viewing a filter group */\n      (e: 'reset-group'): void;\n      /** When one of the \"Reset All\" buttons is clicked */\n      (e: 'reset-all'): void;\n    }>();\n\n  const slots = defineSlots<DataViewFiltersSlots>();\n\n  const isDesktop = useMediaQuery(`(min-width: ${SCREEN_SIZES.lg})`);\n\n  const {\n    density,\n    isLoading: isDataViewLoading,\n    isWithinModule,\n    currentSearch,\n    updateCurrentSearch,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  provide(DATA_VIEW_FILTERS_UTILS_INJECTION.key, { useFiltersInstance: props.useFiltersInstance, drawerStyle: props.drawerStyle});\n\n  const totalActiveFiltersCount = computed(() => props.useFiltersInstance?.totalActiveFiltersCount.value ?? 0);\n  const activeGroupActiveFiltersCount = computed(\n    () => props.useFiltersInstance?.activeFiltersCounts.value[props.activeGroup] ?? 0,\n  );\n  const isDrawerOpen = ref(false);\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || props.useFiltersInstance?.applyFilters() || {};\n\n    if (!preventDismiss) {\n      isDrawerOpen.value = false;\n    }\n  }\n\n  function handleResetGroupClick() {\n    props.useFiltersInstance?.resetFilterGroup(props.activeGroup);\n    emit('reset-group');\n    isDrawerOpen.value = false;\n  }\n\n  function handleResetAllClick() {\n    props.useFiltersInstance?.resetAllFilters();\n    emit('reset-all');\n    isDrawerOpen.value = false;\n  }\n\n  function onDismiss() {\n    props.useFiltersInstance?.undoWorkingFilters();\n    isDrawerOpen.value = false;\n    emit('dismiss');\n  }\n\n  watch(isDrawerOpen, () => {\n    if (isDrawerOpen.value) {\n      emit('open-drawer');\n    }\n  });\n</script>\n\n<template>\n  <Box\n    class=\"stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6\"\n    :class=\"{ 'lg:tw-p-6': density === 'comfortable', 'tw-mb-3': !isWithinModule }\"\n    :radius=\"isWithinModule ? 'none' : 'rounded'\"\n    data-test=\"stash-data-view-filters\"\n    disable-padding\n  >\n    <SearchBar\n      v-if=\"props.showSearch\"\n      class=\"tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-4\"\n      data-test=\"stash-data-view-filters|search-bar\"\n      :is-loading=\"isDataViewLoading\"\n      :label=\"t('ll.search')\"\n      :model-value=\"currentSearch\"\n      v-bind=\"props.searchBarProps\"\n      @search=\"(searchTerm) => updateCurrentSearch(searchTerm, { shouldEmit: true })\"\n    />\n    <div\n      v-if=\"slots.default\"\n      class=\"tw-col-span-12 tw-row-start-2 md:tw-row-start-1 md:tw-col-start-7 lg:tw-col-start-5 lg:tw-col-span-8\"\n    >\n      <div class=\"tw-hidden md:tw-block\">\n        <slot name=\"filters-label\">\n          <Label>{{ props.filtersLabelText }}</Label>\n        </slot>\n      </div>\n      <div class=\"tw-flex tw-gap-4\">\n        <FilterChip\n          secondary\n          class=\"!tw-flex tw-w-full tw-justify-center tw-gap-4 md:!tw-inline-flex md:tw-w-auto\"\n          data-test=\"stash-data-view-filters|drawer-toggle-button\"\n          :filter-count=\"totalActiveFiltersCount\"\n          @click=\"isDrawerOpen = true\"\n        >\n          <span class=\"tw-inline-flex tw-items-center tw-gap-3\">\n            <Icon name=\"filter-line\" class=\"tw-text-ice-700\" />\n            <span>{{ t('ll.filters') }}</span>\n          </span>\n        </FilterChip>\n        <slot v-if=\"isDesktop\"></slot>\n        <Button v-if=\"totalActiveFiltersCount > 0 && isDesktop\" inline @click=\"handleResetAllClick\">\n          {{ t('ll.resetAll') }}\n        </Button>\n      </div>\n    </div>\n    <Modal\n      v-if=\"slots.drawer\"\n      data-test=\"stash-data-view-filters|drawer\"\n      disable-body-padding\n      position=\"right\"\n      :is-open=\"isDrawerOpen\"\n      :title=\"t('ll.allFilters')\"\n      v-bind=\"props.drawerProps\"\n      @dismiss=\"onDismiss\"\n    >\n      <template #headerAction>\n        <Button\n          v-if=\"props.showDrawerPreviousButton\"\n          icon\n          class=\"tw-text-ice-100\"\n          data-test=\"stash-data-view-filters|drawer-previous-button\"\n          :aria-label=\"t('ll.previous')\"\n          :title=\"t('ll.previous')\"\n          @click=\"emit('previous')\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n\n      <slot name=\"drawer\"></slot>\n\n      <template #footer>\n        <div class=\"tw-flex tw-flex-col-reverse lg:tw-flex-row lg:tw-justify-end tw-gap-gutter\">\n          <Button\n            v-if=\"!props.showDrawerPreviousButton && totalActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetAllClick\"\n          >\n            {{ t('ll.resetAll') }}\n          </Button>\n          <Button\n            v-if=\"\n              (props.showDrawerPreviousButton || props.drawerStyle === 'cascade') && activeGroupActiveFiltersCount > 0\n            \"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetGroupClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button\n            v-if=\"props.showDrawerPreviousButton || props.drawerStyle === 'cascade'\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleApplyClick\"\n          >\n            {{ t('ll.apply') }}\n          </Button>\n        </div>\n      </template>\n    </Modal>\n  </Box>\n</template>\n"],"names":["useFilters","schema","dataViewRef","appliedFilters","ref","workingFilters","filterName","dvRef","applyFilters","cloneDeep","resetAllFilters","resetFilterGroup","group","undoWorkingFilters","activeFiltersCounts","computed","counts","config","value","_a","isDefined","totalActiveFiltersCount","count","slots","_useSlots","isDesktop","useMediaQuery","SCREEN_SIZES","density","isDataViewLoading","isWithinModule","currentSearch","updateCurrentSearch","inject","DATA_VIEW_INJECTION","provide","DATA_VIEW_FILTERS_UTILS_INJECTION","props","activeGroupActiveFiltersCount","isDrawerOpen","handleApplyClick","preventDismiss","_b","handleResetGroupClick","emit","handleResetAllClick","onDismiss","watch"],"mappings":"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"}

package/dist/DataViewFilters.vue.d.ts

@@ -45,6 +45,8 @@ export declare interface DataViewFiltersProps {
      */
     searchBarProps?: SearchBarProps;
     showSearch?: boolean;
+    /** 'cascade' displays all fields within every filter group; 'nested' displays only the group names and requires clicking a group to view its fields */
+    drawerStyle?: DrawerStyle;
     drawerProps?: ModalProps;
     showDrawerPreviousButton?: boolean;
     /**
@@ -64,11 +66,13 @@ export declare interface DataViewFiltersSlots {
 
 export declare interface DataViewFiltersUtilsInjection {
     useFiltersInstance?: UseFiltersReturnType;
+    drawerStyle?: DrawerStyle;
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewFiltersProps>, {
     filtersLabelText: any;
     isLoading: boolean;
+    drawerStyle: string;
     drawerProps: undefined;
     searchBarProps: undefined;
     showDrawerPreviousButton: boolean;
@@ -85,6 +89,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewFiltersProps>, {
     filtersLabelText: any;
     isLoading: boolean;
+    drawerStyle: string;
     drawerProps: undefined;
     searchBarProps: undefined;
     showDrawerPreviousButton: boolean;
@@ -102,6 +107,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     filtersLabelText: string;
     searchBarProps: SearchBarProps;
     showSearch: boolean;
+    drawerStyle: DrawerStyle;
     drawerProps: ModalProps;
     showDrawerPreviousButton: boolean;
     useFiltersInstance: UseFiltersReturnType<object, string>;
@@ -110,6 +116,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }, {}>, Readonly<DataViewFiltersSlots>>;
 export default _default;
 
+export declare type DrawerStyle = 'cascade' | 'nested';
+
 declare interface Injection<T> {
     key: InjectionKey<T>;
 }

package/dist/FilterDrawerItem.js

@@ -1,19 +1,22 @@
-import { defineComponent as w, inject as f, computed as _, openBlock as o, createElementBlock as l, createElementVNode as t, toDisplayString as r, createCommentVNode as c, createBlock as v, unref as a, withCtx as h, createTextVNode as b, createVNode as x } from "vue";
-import { t as m } from "./locale.js";
-import F from "./Chip.js";
-import { D as I } from "./DataViewFilters.keys-c80ffabe.js";
-import C from "./Icon.js";
+import { defineComponent as y, useSlots as C, inject as F, computed as p, openBlock as t, createElementBlock as a, createBlock as n, resolveDynamicComponent as k, withCtx as w, createElementVNode as s, toDisplayString as c, createCommentVNode as o, normalizeClass as x, unref as l, createTextVNode as I, renderSlot as g } from "vue";
+import { t as u } from "./locale.js";
+import D from "./Chip.js";
+import { D as E } from "./DataViewFilters.keys-c80ffabe.js";
+import S from "./Icon.js";
 import "lodash-es/get";
 import "./utils/colorScheme.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const g = { class: "tw-py-4" }, k = { class: "tw-flex tw-justify-between tw-items-center tw-self-stretch" }, y = { class: "tw-flex tw-flex-col tw-items-start" }, D = {
+const N = { class: "stash-filter-drawer-item" }, T = { class: "tw-flex tw-justify-between tw-items-center tw-self-stretch" }, A = { class: "tw-flex tw-flex-col tw-items-start" }, V = {
   key: 0,
   class: "tw-text-xs",
   "data-test": "description"
-}, E = { class: "tw-inline-flex tw-items-center tw-gap-6" }, q = /* @__PURE__ */ w({
+}, B = {
+  key: 0,
+  class: "tw-p-6 tw-gap-3"
+}, M = /* @__PURE__ */ y({
   __name: "FilterDrawerItem",
   props: {
     group: {},
@@ -21,45 +24,58 @@ const g = { class: "tw-py-4" }, k = { class: "tw-flex tw-justify-between tw-item
     description: {}
   },
   emits: ["navigate"],
-  setup(u, { emit: p }) {
-    const e = u, i = f(I.key);
-    if (!(i != null && i.useFiltersInstance))
+  setup(f, { emit: v }) {
+    const r = f, _ = C(), e = F(E.key);
+    if (!(e != null && e.useFiltersInstance))
       throw new Error(
         "FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters()."
       );
-    const { activeFiltersCounts: d } = i.useFiltersInstance, s = _(() => d.value[e.group]);
-    return (N, n) => (o(), l("div", g, [
-      t("button", {
-        class: "tw-w-full tw-outline-none focus:tw-outline-blue-500 tw-border-b tw-border-ice-500",
-        onClick: n[0] || (n[0] = (T) => p("navigate"))
-      }, [
-        t("div", k, [
-          t("div", y, [
-            t("h4", null, r(e.title), 1),
-            e.description ? (o(), l("div", D, r(e.description), 1)) : c("", !0)
-          ]),
-          t("div", E, [
-            s.value ? (o(), v(F, {
-              key: 0,
-              color: "blue",
-              radius: "pill",
-              shade: "main",
-              "aria-label": a(m)("ll.numberOfActiveFilters"),
-              title: a(m)("ll.numberOfActiveFilters")
-            }, {
-              default: h(() => [
-                b(r(s.value), 1)
-              ]),
-              _: 1
-            }, 8, ["aria-label", "title"])) : c("", !0),
-            x(C, { name: "chevron-right" })
+    const { activeFiltersCounts: h } = e.useFiltersInstance, m = p(() => h.value[r.group]), i = p(() => e.drawerStyle === "cascade");
+    return (b, d) => (t(), a("div", N, [
+      (t(), n(k(i.value ? "div" : "button"), {
+        "data-test": "stash-filter-drawer-item|dynamic-component",
+        class: "tw-w-full tw-py-4 tw-outline-none focus:tw-outline-blue-500 tw-border-b tw-border-ice-500",
+        onClick: d[0] || (d[0] = (O) => i.value ? void 0 : v("navigate"))
+      }, {
+        default: w(() => [
+          s("div", T, [
+            s("div", A, [
+              s("h4", null, c(r.title), 1),
+              r.description ? (t(), a("div", V, c(r.description), 1)) : o("", !0)
+            ]),
+            s("div", {
+              class: x(["tw-inline-flex tw-items-center tw-gap-6", { "tw-mr-2 tw-mb-0.5": i.value }])
+            }, [
+              m.value ? (t(), n(D, {
+                key: 0,
+                color: "blue",
+                radius: "pill",
+                shade: "main",
+                "aria-label": l(u)("ll.numberOfActiveFilters"),
+                title: l(u)("ll.numberOfActiveFilters")
+              }, {
+                default: w(() => [
+                  I(c(m.value), 1)
+                ]),
+                _: 1
+              }, 8, ["aria-label", "title"])) : o("", !0),
+              i.value ? o("", !0) : (t(), n(S, {
+                key: 1,
+                name: "chevron-right",
+                title: l(u)("ll.viewFilterGroup")
+              }, null, 8, ["title"]))
+            ], 2)
           ])
-        ])
-      ])
+        ]),
+        _: 1
+      })),
+      i.value && l(_).default ? (t(), a("div", B, [
+        g(b.$slots, "default")
+      ])) : o("", !0)
     ]));
   }
 });
 export {
-  q as default
+  M 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  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</script>\n\n<template>\n  <div class=\"tw-py-4\">\n    <button\n      class=\"tw-w-full tw-outline-none focus:tw-outline-blue-500 tw-border-b tw-border-ice-500\"\n      @click=\"emit('navigate')\"\n    >\n      <div class=\"tw-flex tw-justify-between tw-items-center 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\">\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 name=\"chevron-right\" />\n        </div>\n      </div>\n    </button>\n  </div>\n</template>\n"],"names":["dataViewFiltersUtils","inject","DATA_VIEW_FILTERS_UTILS_INJECTION","activeFiltersCounts","activeCount","computed","props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBAqBQA,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,MAAMG,EAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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-py-4 tw-outline-none focus:tw-outline-blue-500 tw-border-b tw-border-ice-500\"\n      @click=\"isDrawerCascade ? undefined : emit('navigate')\"\n    >\n      <div class=\"tw-flex tw-justify-between tw-items-center 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-mr-2 tw-mb-0.5': 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-p-6 tw-gap-3\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n"],"names":["slots","_useSlots","dataViewFiltersUtils","inject","DATA_VIEW_FILTERS_UTILS_INJECTION","activeFiltersCounts","activeCount","computed","props","isDrawerCascade"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyBQA,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,MAAMG,EAAM,KAAK,CAAC,GACnEC,IAAkBF,EAAS,MAAML,EAAqB,gBAAgB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDrawerItem.vue.d.ts

@@ -17,11 +17,17 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 
-declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<FilterDrawerItemProps>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<FilterDrawerItemProps>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     navigate: () => void;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<FilterDrawerItemProps>>> & {
     onNavigate?: (() => any) | undefined;
-}, {}, {}>;
+}, {}, {}>, Readonly<FilterDrawerItemSlots>>;
 export default _default;
 
 export declare interface FilterDrawerItemEmits {
@@ -35,4 +41,8 @@ export declare interface FilterDrawerItemProps {
     description?: string;
 }
 
+export declare interface FilterDrawerItemSlots {
+    default?: void;
+}
+
 export { }