@leaflink/stash 53.4.0 → 53.4.2

package/dist/DataView.js

@@ -4,36 +4,36 @@ import { M as V } from "./Module.keys-DcqBbvvT.js";
 import O from "./Paginate.js";
 import { a as w, D as tt } from "./DataView.keys-aSOnA4AD.js";
 import { _ as et } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function _(a) {
-  const o = a[0] === "-" ? "desc" : "asc";
-  return { id: o === "asc" ? a : a.slice(1), order: o };
+function x(e) {
+  const o = e[0] === "-" ? "desc" : "asc";
+  return { id: o === "asc" ? e : e.slice(1), order: o };
 }
-function at({ id: a, order: o }) {
-  return `${o === "desc" ? "-" : ""}${a}`;
+function at({ id: e, order: o }) {
+  return `${o === "desc" ? "-" : ""}${e}`;
 }
-function nt({ newId: a, newOrder: o, oldId: f, oldOrder: t }) {
-  if (a) {
-    if (a !== f)
-      return at({ id: a, order: o || "asc" });
+function nt({ newId: e, newOrder: o, oldId: f, oldOrder: t }) {
+  if (e) {
+    if (e !== f)
+      return at({ id: e, order: o || "asc" });
     if (!o && !t)
-      return a;
+      return e;
     if (!(!o && t === "desc")) {
       if (!o && t === "asc")
-        return `-${a}`;
+        return `-${e}`;
       if (o === "asc" && !t)
-        return a;
+        return e;
       if (!(o === "asc" && t === "asc")) {
         if (o === "asc" && t === "desc")
-          return a;
+          return e;
         if (o === "desc" && !t)
-          return `-${a}`;
+          return `-${e}`;
         if (!(o === "desc" && t === "desc") && o === "desc" && t === "asc")
-          return `-${a}`;
+          return `-${e}`;
       }
     }
   }
 }
-var ot = /* @__PURE__ */ ((a) => (a.Table = "table", a))(ot || {});
+var ot = /* @__PURE__ */ ((e) => (e.Table = "table", e))(ot || {});
 const it = /* @__PURE__ */ U({
   __name: "DataView",
   props: {
@@ -51,25 +51,25 @@ const it = /* @__PURE__ */ U({
     isLoading: { type: Boolean }
   },
   emits: ["update", "update:currentFilters", "update:currentPage", "update:currentSearch", "update:currentSort"],
-  setup(a, { expose: o, emit: f }) {
-    const t = a, d = f, $ = J(), P = l(null), C = W(V.key, V.defaults), L = n(() => {
-      var e;
+  setup(e, { expose: o, emit: f }) {
+    const t = e, d = f, $ = J(), P = l(null), C = W(V.key, V.defaults), L = n(() => {
+      var a;
       if (t.variant)
         return t.variant;
-      if (((e = C.variant) == null ? void 0 : e.value) === "table")
+      if (((a = C.variant) == null ? void 0 : a.value) === "table")
         return "table";
-    }), x = n(() => C.variant !== void 0), T = n(() => {
-      var e;
-      return (e = C.includeDataviewPagination) == null ? void 0 : e.value;
-    }), u = l(1), B = n(() => !t.disablePagination && t.totalDataCount > 0), E = n(() => t.totalDataCount === 1 / 0 && !t.hasNextPage), v = n(() => Math.ceil(t.totalDataCount / t.pageSize)), r = function(e, { shouldEmit: i } = {}) {
+    }), _ = n(() => C.variant !== void 0), T = n(() => {
+      var a;
+      return (a = C.includeDataviewPagination) == null ? void 0 : a.value;
+    }), u = l(1), B = n(() => !t.disablePagination && t.totalDataCount > 0), E = n(() => t.totalDataCount === 1 / 0 && !t.hasNextPage), v = n(() => Math.ceil(t.totalDataCount / t.pageSize)), r = function(a, { shouldEmit: i } = {}) {
       var c, h;
-      u.value = e, i && (S(), d("update:currentPage", e, t.pageSize)), Number((c = P.value) == null ? void 0 : c.getBoundingClientRect().top) < 0 && ((h = P.value) == null || h.scrollIntoView({ behavior: "smooth", block: "start" }));
-    }, D = function({ shouldEmit: e } = {}) {
+      u.value = a, i && (S(), d("update:currentPage", a, t.pageSize)), Number((c = P.value) == null ? void 0 : c.getBoundingClientRect().top) < 0 && ((h = P.value) == null || h.scrollIntoView({ behavior: "smooth", block: "start" }));
+    }, D = function({ shouldEmit: a } = {}) {
       const i = Math.max(u.value - 1, 1);
-      r(i, { shouldEmit: e });
-    }, b = function({ shouldEmit: e } = {}) {
+      r(i, { shouldEmit: a });
+    }, b = function({ shouldEmit: a } = {}) {
       const i = Math.min(u.value + 1, v.value);
-      r(i, { shouldEmit: e });
+      r(i, { shouldEmit: a });
     };
     y(
       () => t.currentPage,
@@ -79,22 +79,22 @@ const it = /* @__PURE__ */ U({
       { immediate: !0 }
     );
     const s = l(void 0), N = n(
-      () => s.value ? _(s.value).id : void 0
+      () => s.value ? x(s.value).id : void 0
     ), M = n(
-      () => s.value ? _(s.value).order : void 0
-    ), p = function(e, { sortOrder: i, shouldEmit: c } = {}) {
-      const { id: h, order: R } = _(s.value || ""), k = nt({ newId: e, newOrder: i, oldId: h, oldOrder: R });
+      () => s.value ? x(s.value).order : void 0
+    ), g = function(a, { sortOrder: i, shouldEmit: c } = {}) {
+      const { id: h, order: R } = x(s.value || ""), k = nt({ newId: a, newOrder: i, oldId: h, oldOrder: R });
       s.value = k, r(1), c && (S(), d("update:currentSort", k));
     };
     y(
       () => t.currentSort,
       () => {
-        p(t.currentSort);
+        g(t.currentSort);
       },
       { immediate: !0 }
     );
-    const g = l(""), j = l(!1), A = l(!1), m = function(e, { shouldEmit: i } = {}) {
-      g.value = e || "", r(1), i && (S(), d("update:currentSearch", e));
+    const p = l(""), j = l(!1), A = l(!1), m = function(a, { shouldEmit: i } = {}) {
+      p.value = a || "", r(1), i && (S(), d("update:currentSearch", a));
     };
     y(
       () => t.currentSearch,
@@ -103,15 +103,15 @@ const it = /* @__PURE__ */ U({
       },
       { immediate: !0 }
     );
-    const z = l({}), F = function(e, { shouldEmit: i } = {}) {
-      z.value = e, r(1), i && (S(), d("update:currentFilters", e));
+    const z = l({}), F = function(a, { shouldEmit: i } = {}) {
+      z.value = a, r(1), i && (S(), d("update:currentFilters", a));
     };
     function S() {
       d("update", {
         page: u.value,
         pageSize: t.pageSize,
         ordering: s.value,
-        search: g.value,
+        search: p.value,
         filters: Y(z.value)
       });
     }
@@ -131,9 +131,9 @@ const it = /* @__PURE__ */ U({
         // Sorting
         currentSortId: N,
         currentSortOrder: M,
-        updateCurrentSort: p,
+        updateCurrentSort: g,
         // Search
-        currentSearch: n(() => g.value),
+        currentSearch: n(() => p.value),
         updateCurrentSearch: m,
         // Miscellaneous
         density: n(() => t.density),
@@ -141,7 +141,7 @@ const it = /* @__PURE__ */ U({
         isEmpty: n(() => t.data.length === 0),
         isSelectable: A,
         isLoading: n(() => t.isLoading),
-        isWithinModule: x,
+        isWithinModule: _,
         variant: L
       })
     ), o({
@@ -151,18 +151,18 @@ const it = /* @__PURE__ */ U({
       goPrevPage: D,
       goNextPage: b,
       ordering: n(() => s.value),
-      updateCurrentSort: p,
-      search: n(() => g.value),
+      updateCurrentSort: g,
+      search: n(() => p.value),
       updateCurrentSearch: m,
       filters: n(() => z.value),
       updateCurrentFilters: F
-    }), (e, i) => (I(), Z("div", {
+    }), (a, i) => (I(), Z("div", {
       ref_key: "rootRef",
       ref: P,
       class: "stash-data-view relative",
       "data-test": "stash-data-view"
     }, [
-      q(e.$slots, "default", {
+      q(a.$slots, "default", {
         currentPage: u.value,
         currentSortId: N.value,
         currentSortOrder: M.value,
@@ -172,10 +172,10 @@ const it = /* @__PURE__ */ U({
         pageCount: v.value,
         setPage: r,
         totalDataCount: t.totalDataCount,
-        updateCurrentSort: p,
+        updateCurrentSort: g,
         updateCurrentSearch: m
       }),
-      B.value && (!x.value || T.value) && v.value > 1 && !t.hideBottomPagination ? (I(), H(O, {
+      B.value && (!_.value || T.value) && v.value > 1 && !t.hideBottomPagination ? (I(), H(O, {
         key: 0,
         class: Q(["mt-6", X($).paginate]),
         "current-page": u.value,
@@ -191,13 +191,13 @@ const it = /* @__PURE__ */ U({
   paginate: rt
 }, st = {
   $style: ut
-}, gt = /* @__PURE__ */ et(it, [["__cssModules", st]]);
+}, pt = /* @__PURE__ */ et(it, [["__cssModules", st]]);
 export {
   tt as DATA_VIEW_INJECTION,
   w as DEFAULT_PAGE_SIZE,
   ot as DataViewVariant,
-  gt as default,
-  _ as deserializeSortValue,
+  pt as default,
+  x as deserializeSortValue,
   nt as getNextSort,
   at as serializeSortValue
 };

package/dist/DataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataView.js","sources":["../src/components/DataView/DataView.utils.ts","../src/components/DataView/DataView.types.ts","../src/components/DataView/DataView.vue"],"sourcesContent":["import { SortId, SortOrder, SortValue, SortValueDeserialized } from './DataView.types';\n\n/**\n * Receives a SortValue (ex: `'-product_name'`) and returns an object with a `id` and an `order`.\n */\nexport function deserializeSortValue(sort: SortValue): SortValueDeserialized {\n  const order = sort[0] === '-' ? 'desc' : 'asc';\n  const id = order === 'asc' ? sort : sort.slice(1);\n\n  return { id, order };\n}\n\n/**\n * Receives an object with a `id` and an `order` and returns a SortValue (ex: `'-product_name'`).\n */\nexport function serializeSortValue({ id, order }: SortValueDeserialized): SortValue {\n  return `${order === 'desc' ? '-' : ''}${id}`;\n}\n\ninterface GetNextSortArgs {\n  newId: SortId | undefined;\n  newOrder?: SortOrder;\n  oldId?: SortId;\n  oldOrder?: SortOrder;\n}\n\n/**\n * Given new and old sorting data, it returns the next sorting value using the following sorting cycle:\n *\n *     \"unsorted --> ascending --> descending --> unsorted\"\n */\nexport function getNextSort({ newId, newOrder, oldId, oldOrder }: GetNextSortArgs): SortValue | undefined {\n  if (!newId) {\n    return undefined;\n  }\n\n  if (newId !== oldId) {\n    // if sorting by a new field, sort ascending\n    return serializeSortValue({ id: newId, order: newOrder || 'asc' });\n  }\n\n  /**\n   * `newOrder` and `oldOrder` can each have 3 different values: undefined, 'asc', or 'desc'.\n   * Therefore, there are 9 possible combinations (3 times 3). See below:\n   */\n\n  // #region newOrder: undefined\n  if (!newOrder && !oldOrder) {\n    return newId; // ascending\n  }\n\n  if (!newOrder && oldOrder === 'desc') {\n    return undefined; // unsorted\n  }\n\n  if (!newOrder && oldOrder === 'asc') {\n    return `-${newId}`; // descending\n  }\n  // #endregion\n\n  // #region newOrder: asc\n  if (newOrder === 'asc' && !oldOrder) {\n    return newId;\n  }\n\n  if (newOrder === 'asc' && oldOrder === 'asc') {\n    return undefined;\n  }\n\n  if (newOrder === 'asc' && oldOrder === 'desc') {\n    return newId;\n  }\n  // #endregion\n\n  // #region newOrder: desc\n  if (newOrder === 'desc' && !oldOrder) {\n    return `-${newId}`;\n  }\n\n  if (newOrder === 'desc' && oldOrder === 'desc') {\n    return undefined;\n  }\n\n  if (newOrder === 'desc' && oldOrder === 'asc') {\n    return `-${newId}`;\n  }\n  // #endregion\n}\n","import { ComputedRef, Ref } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum DataViewVariant {\n  Table = 'table',\n}\n\nexport type DataViewVariants = `${DataViewVariant}`;\n\n/**\n * A unique id for a sorting strategy. If the order is descending, it must begin with \"-\" (a hyphen/dash).\n *\n * Ex: `'product_name'` if ascending or `'-product_name'` if descending\n */\nexport type SortValue = string;\n\n/**\n * The SortValue with its leading hyphen/dash removed\n */\nexport type SortId = string;\n\n/**\n * Determined by whether or not there is a leading hyphen/dash in the SortValue\n */\nexport type SortOrder = 'asc' | 'desc';\n\n/**\n * A deserialized instance of a `SortValue`.\n */\nexport type SortValueDeserialized = {\n  id: SortId;\n  order: SortOrder;\n};\n\n/** Updates the DataView internal state with the given sortId */\nexport type UpdateCurrentSort = (\n  sortId: SortId | undefined,\n  options?: {\n    sortOrder?: SortOrder;\n    /** If true, emits the `update:currentSort` and `update` events from DataView */\n    shouldEmit?: boolean;\n  },\n) => void;\n\n/** Updates the DataView internal state with the given page */\nexport type SetPage = (\n  page: number,\n  options?: {\n    /** If true, emits the `update:currentPage` and `update` events from DataView */\n    shouldEmit?: boolean;\n  },\n) => void;\n\n/** Updates the DataView internal state with the previous page */\nexport type GoPrevPage = (options?: {\n  /** If true, emits the `update:currentPage` and `update` events from DataView */\n  shouldEmit?: boolean;\n}) => void;\n\n/** Updates the DataView internal state with the next page */\nexport type GoNextPage = (options?: {\n  /** If true, emits the `update:currentPage` and `update` events from DataView */\n  shouldEmit?: boolean;\n}) => void;\n\n/** Updates the DataView internal state with the given searchTerm */\nexport type UpdateCurrentSearch = (\n  searchTerm?: string,\n  options?: {\n    /** If true, emits the `update:currentSearch` and `update` events from DataView */\n    shouldEmit?: boolean;\n  },\n) => void;\n\n/** Updates the DataView internal state with the given filter values */\nexport type UpdateCurrentFilters<FilterValues = object> = (\n  newFilters: FilterValues,\n  options?: {\n    /** If true, emits the `update:currentSearch` and `update` events from DataView */\n    shouldEmit?: boolean;\n  },\n) => void;\n\nexport interface UpdateEvent<FilterValues = object> {\n  page?: number;\n  pageSize?: number;\n  ordering?: string;\n  search?: string;\n  filters?: FilterValues;\n}\n\nexport interface DataViewInjection {\n  currentPage: ComputedRef<number>;\n\n  /** Optional override for the next button disabled state  */\n  isPaginateNextDisabled: ComputedRef<boolean>;\n\n  isPaginationEnabled: ComputedRef<boolean>;\n\n  pageCount: ComputedRef<number>;\n\n  pageSize: ComputedRef<number>;\n\n  totalDataCount: ComputedRef<number>;\n\n  /** Updates the DataView internal state with the given page */\n  setPage: SetPage;\n\n  /** Updates the DataView internal state with the previous page */\n  goPrevPage: GoPrevPage;\n\n  /** Updates the DataView internal state with the next page */\n  goNextPage: GoNextPage;\n\n  currentSortId: ComputedRef<SortId | undefined>;\n\n  currentSortOrder: ComputedRef<SortOrder | undefined>;\n\n  /** Updates the DataView internal state with the given sortId */\n  updateCurrentSort: UpdateCurrentSort;\n\n  currentSearch: ComputedRef<string>;\n\n  /** Updates the DataView internal state with the given searchTerm */\n  updateCurrentSearch: UpdateCurrentSearch;\n\n  /**\n   * The DataView's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities | undefined>;\n\n  /**\n   * Defines if a DataView has a Toolbar rendered. This prop is updated when DataViewToolbar exists and is mounted.\n   */\n  hasToolbar?: Ref<boolean>;\n\n  /**\n   * Enables certain loading indicators to be displayed within the DataView.\n   */\n  isLoading?: ComputedRef<boolean>;\n\n  /**\n   * Enables certain empty states to be displayed within the DataView.\n   */\n  isEmpty?: ComputedRef<boolean>;\n\n  /**\n   * Allows Table to control whether or not a DataViewToolbar should show a checkmark\n   */\n  isSelectable?: Ref<boolean>;\n\n  /**\n   * Whether or not the DataView is rendered within a Module; the value is inferred based on being\n   * able to inject details from Module.\n   *\n   * Note: This is sent to DataView child components so they only need to worry about interfacing\n   * with the DataViewInjection API.\n   */\n  isWithinModule: ComputedRef<boolean>;\n\n  /**\n   * The DataView's variant; the default value is undefined.\n   */\n  variant: ComputedRef<DataViewVariants | undefined>;\n}\n","<script lang=\"ts\">\n  export * from './DataView.constants';\n  export * from './DataView.keys';\n  export * from './DataView.types';\n  export * from './DataView.utils';\n</script>\n\n<script setup lang=\"ts\">\n  import cloneDeep from 'lodash-es/cloneDeep';\n  import { computed, inject, provide, ref, useCssModule, watch } from 'vue';\n\n  import { SpacingDensities } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import Paginate from '../Paginate/Paginate.vue';\n  import { DEFAULT_PAGE_SIZE } from './DataView.constants';\n  import { DATA_VIEW_INJECTION } from './DataView.keys';\n  import {\n    DataViewVariants,\n    GoNextPage,\n    GoPrevPage,\n    SetPage,\n    SortId,\n    SortOrder,\n    SortValue,\n    UpdateCurrentFilters,\n    UpdateCurrentSearch,\n    UpdateCurrentSort,\n    UpdateEvent,\n  } from './DataView.types';\n  import { deserializeSortValue, getNextSort } from './DataView.utils';\n\n  export interface DataViewProps {\n    /**\n     * Can be used to provide the initial page.\n     * Also, it can be used to control the active page with `v-model:current-page=\"myPage\"`.\n     */\n    currentPage?: number;\n\n    /**\n     * Can be used to set the initial search term.\n     * Also, it can be used to control the active search term with `v-model:current-search=\"mySearchTerm\"`.\n     */\n    currentSearch?: string;\n\n    /**\n     * Can be used to provide the initial sort order.\n     * Also, it can be used to control the active sort order with `v-model:current-sort=\"mySortOrder\"`.\n     */\n    currentSort?: SortValue;\n\n    /**\n     * A list of records. If pagination is enabled, `data` must be only the current page of records.\n     */\n    data?: object[];\n\n    /**\n     * Controls the DataView's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * The number of records to display per page.\n     */\n    pageSize?: number;\n\n    /**\n     * Opt-out of displaying pagination. Hides the pagination buttons and page stats.\n     */\n    disablePagination?: boolean;\n\n    /**\n     * Hides the bottom pagination without disabling the pagination from the toolbar\n     */\n    hideBottomPagination?: boolean;\n\n    /**\n     * The total number of records available.\n     * Used to auto-enable pagination when results exist.\n     * Use `Infinity` for activating 'n of many' pagination\n     * DataView does not paginate data for you; instead, `props.data` should always show\n     * the current page of results.\n     */\n    totalDataCount?: number;\n\n    /**\n     * Whether there is a next page of data or not as informed by the server.\n     * This only applies when`totalDataCount=\"Infinity\"` to determine if the \"Next\" pagination button should be disabled.\n     */\n    hasNextPage?: boolean;\n\n    /**\n     * DataView variant. The default value is `undefined`. Will default to `table` when used within\n     * a `<Module variant=\"table\">`.\n     */\n    variant?: DataViewVariants;\n\n    isLoading?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewProps>(), {\n    currentPage: 1,\n    currentSearch: undefined,\n    currentSort: undefined,\n    data: () => [],\n    density: 'comfortable',\n    pageSize: DEFAULT_PAGE_SIZE,\n    disablePagination: false,\n    totalDataCount: 0,\n    hasNextPage: undefined,\n    hideBottomPagination: false,\n    variant: undefined,\n  });\n\n  const emit = defineEmits<{\n    (e: 'update', state: UpdateEvent): void;\n    (e: 'update:currentFilters', newFilters: object): void;\n    (e: 'update:currentPage', page: number, pageSize: number): void;\n    (e: 'update:currentSearch', searchTerm?: string): void;\n    (e: 'update:currentSort', payload?: SortValue): void;\n  }>();\n\n  const classes = useCssModule();\n  const rootRef = ref<HTMLElement | null>(null);\n  const moduleInjection = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n  const computedVariant = computed<DataViewVariants | undefined>(() => {\n    if (props.variant) {\n      return props.variant;\n    }\n\n    if (moduleInjection.variant?.value === 'table') {\n      return 'table';\n    }\n\n    return undefined;\n  });\n  const isWithinModule = computed(() => moduleInjection.variant !== undefined);\n\n  const includeBottomPaginationInModule = computed(() => moduleInjection.includeDataviewPagination?.value);\n\n  // #region pagination\n  const internalPage = ref(1);\n  const isPaginationEnabled = computed(() => !props.disablePagination && props.totalDataCount > 0);\n  const isPaginateNextDisabled = computed(() => props.totalDataCount === Infinity && !props.hasNextPage);\n  const pageCount = computed(() => Math.ceil(props.totalDataCount / props.pageSize));\n\n  const setPage: SetPage = function (page: number, { shouldEmit } = {}) {\n    internalPage.value = page;\n\n    if (shouldEmit) {\n      emitUpdate();\n      emit('update:currentPage', page, props.pageSize);\n    }\n\n    if (Number(rootRef.value?.getBoundingClientRect().top) < 0) {\n      rootRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }\n  };\n\n  const goPrevPage: GoPrevPage = function ({ shouldEmit } = {}) {\n    const page = Math.max(internalPage.value - 1, 1);\n\n    setPage(page, { shouldEmit });\n  };\n\n  /** Updates the DataView internal state with the previous page */\n  const goNextPage: GoNextPage = function ({ shouldEmit } = {}) {\n    const page = Math.min(internalPage.value + 1, pageCount.value);\n\n    setPage(page, { shouldEmit });\n  };\n\n  watch(\n    () => props.currentPage,\n    () => {\n      setPage(props.currentPage);\n    },\n    { immediate: true },\n  );\n  // #endregion pagination\n\n  // #region sorting\n  const internalSort = ref<SortValue | undefined>(undefined);\n\n  const internalSortId = computed<SortId | undefined>(() =>\n    internalSort.value ? deserializeSortValue(internalSort.value).id : undefined,\n  );\n  const internalSortOrder = computed<SortOrder | undefined>(() =>\n    internalSort.value ? deserializeSortValue(internalSort.value).order : undefined,\n  );\n\n  const updateCurrentSort: UpdateCurrentSort = function (sortId, { sortOrder, shouldEmit } = {}) {\n    const { id: oldId, order: oldOrder } = deserializeSortValue(internalSort.value || '');\n    const nextSort = getNextSort({ newId: sortId, newOrder: sortOrder, oldId, oldOrder });\n\n    internalSort.value = nextSort;\n    setPage(1);\n\n    if (shouldEmit) {\n      emitUpdate();\n      emit('update:currentSort', nextSort);\n    }\n  };\n\n  watch(\n    () => props.currentSort,\n    () => {\n      updateCurrentSort(props.currentSort);\n    },\n    { immediate: true },\n  );\n  // #endregion sorting\n\n  // #region search\n  const internalSearch = ref('');\n\n  const hasToolbar = ref(false);\n  const isSelectable = ref(false);\n\n  const updateCurrentSearch: UpdateCurrentSearch = function (searchTerm, { shouldEmit } = {}) {\n    internalSearch.value = searchTerm || '';\n    setPage(1);\n\n    if (shouldEmit) {\n      emitUpdate();\n      emit('update:currentSearch', searchTerm);\n    }\n  };\n\n  watch(\n    () => props.currentSearch,\n    () => {\n      updateCurrentSearch(props.currentSearch);\n    },\n    { immediate: true },\n  );\n  // #endregion search\n\n  // #region filters\n  const internalFilters = ref<object>({});\n\n  const updateCurrentFilters: UpdateCurrentFilters = function (newFilters: object, { shouldEmit } = {}) {\n    internalFilters.value = newFilters;\n    setPage(1);\n\n    if (shouldEmit) {\n      emitUpdate();\n      emit('update:currentFilters', newFilters);\n    }\n  };\n  // #endregion filters\n\n  function emitUpdate() {\n    emit('update', {\n      page: internalPage.value,\n      pageSize: props.pageSize,\n      ordering: internalSort.value,\n      search: internalSearch.value,\n      filters: cloneDeep(internalFilters.value),\n    });\n  }\n\n  provide(\n    DATA_VIEW_INJECTION.key,\n    Object.freeze({\n      // Pagination\n      currentPage: computed(() => internalPage.value),\n      isPaginationEnabled,\n      isPaginateNextDisabled,\n      pageCount,\n      pageSize: computed(() => props.pageSize),\n      totalDataCount: computed(() => props.totalDataCount),\n      setPage,\n      goPrevPage,\n      goNextPage,\n\n      // Sorting\n      currentSortId: internalSortId,\n      currentSortOrder: internalSortOrder,\n      updateCurrentSort,\n\n      // Search\n      currentSearch: computed(() => internalSearch.value),\n      updateCurrentSearch,\n\n      // Miscellaneous\n      density: computed(() => props.density),\n      hasToolbar,\n      isEmpty: computed(() => props.data.length === 0),\n      isSelectable,\n      isLoading: computed(() => props.isLoading),\n      isWithinModule,\n      variant: computedVariant,\n    }),\n  );\n\n  defineExpose({\n    page: computed(() => internalPage.value),\n    pageSize: computed(() => props.pageSize),\n    setPage,\n    goPrevPage,\n    goNextPage,\n    ordering: computed(() => internalSort.value),\n    updateCurrentSort,\n    search: computed(() => internalSearch.value),\n    updateCurrentSearch,\n    filters: computed(() => internalFilters.value),\n    updateCurrentFilters,\n  });\n</script>\n\n<template>\n  <div ref=\"rootRef\" class=\"stash-data-view relative\" data-test=\"stash-data-view\">\n    <!-- @slot default -->\n    <slot\n      :current-page=\"internalPage\"\n      :current-sort-id=\"internalSortId\"\n      :current-sort-order=\"internalSortOrder\"\n      :data=\"data\"\n      :go-prev-page=\"goPrevPage\"\n      :go-next-page=\"goNextPage\"\n      :page-count=\"pageCount\"\n      :set-page=\"setPage\"\n      :total-data-count=\"props.totalDataCount\"\n      :update-current-sort=\"updateCurrentSort\"\n      :update-current-search=\"updateCurrentSearch\"\n    ></slot>\n\n    <Paginate\n      v-if=\"\n        isPaginationEnabled &&\n        (!isWithinModule || includeBottomPaginationInModule) &&\n        pageCount > 1 &&\n        !props.hideBottomPagination\n      \"\n      class=\"mt-6\"\n      :class=\"classes.paginate\"\n      :current-page=\"internalPage\"\n      :is-next-disabled=\"isLoading || isPaginateNextDisabled\"\n      :list-length=\"props.totalDataCount\"\n      :page-size=\"props.pageSize\"\n      :variant=\"props.totalDataCount === Infinity ? 'stats' : 'standard'\"\n      @set-page=\"(page: number) => setPage(page, { shouldEmit: true })\"\n    />\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .paginate ul {\n      margin: 0;\n    }\n  }\n</style>\n"],"names":["deserializeSortValue","sort","order","serializeSortValue","id","getNextSort","newId","newOrder","oldId","oldOrder","DataViewVariant","props","__props","emit","__emit","classes","useCssModule","rootRef","ref","moduleInjection","inject","MODULE_INJECTION","computedVariant","computed","_a","isWithinModule","includeBottomPaginationInModule","internalPage","isPaginationEnabled","isPaginateNextDisabled","pageCount","setPage","page","shouldEmit","emitUpdate","_b","goPrevPage","goNextPage","watch","internalSort","internalSortId","internalSortOrder","updateCurrentSort","sortId","sortOrder","nextSort","internalSearch","hasToolbar","isSelectable","updateCurrentSearch","searchTerm","internalFilters","updateCurrentFilters","newFilters","cloneDeep","provide","DATA_VIEW_INJECTION","__expose"],"mappings":"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"}
+{"version":3,"file":"DataView.js","sources":["../src/components/DataView/DataView.utils.ts","../src/components/DataView/DataView.types.ts","../src/components/DataView/DataView.vue"],"sourcesContent":["import { SortId, SortOrder, SortValue, SortValueDeserialized } from './DataView.types';\n\n/**\n * Receives a SortValue (ex: `'-product_name'`) and returns an object with a `id` and an `order`.\n */\nexport function deserializeSortValue(sort: SortValue): SortValueDeserialized {\n  const order = sort[0] === '-' ? 'desc' : 'asc';\n  const id = order === 'asc' ? sort : sort.slice(1);\n\n  return { id, order };\n}\n\n/**\n * Receives an object with a `id` and an `order` and returns a SortValue (ex: `'-product_name'`).\n */\nexport function serializeSortValue({ id, order }: SortValueDeserialized): SortValue {\n  return `${order === 'desc' ? '-' : ''}${id}`;\n}\n\ninterface GetNextSortArgs {\n  newId: SortId | undefined;\n  newOrder?: SortOrder;\n  oldId?: SortId;\n  oldOrder?: SortOrder;\n}\n\n/**\n * Given new and old sorting data, it returns the next sorting value using the following sorting cycle:\n *\n *     \"unsorted --> ascending --> descending --> unsorted\"\n */\nexport function getNextSort({ newId, newOrder, oldId, oldOrder }: GetNextSortArgs): SortValue | undefined {\n  if (!newId) {\n    return undefined;\n  }\n\n  if (newId !== oldId) {\n    // if sorting by a new field, sort ascending\n    return serializeSortValue({ id: newId, order: newOrder || 'asc' });\n  }\n\n  /**\n   * `newOrder` and `oldOrder` can each have 3 different values: undefined, 'asc', or 'desc'.\n   * Therefore, there are 9 possible combinations (3 times 3). See below:\n   */\n\n  // #region newOrder: undefined\n  if (!newOrder && !oldOrder) {\n    return newId; // ascending\n  }\n\n  if (!newOrder && oldOrder === 'desc') {\n    return undefined; // unsorted\n  }\n\n  if (!newOrder && oldOrder === 'asc') {\n    return `-${newId}`; // descending\n  }\n  // #endregion\n\n  // #region newOrder: asc\n  if (newOrder === 'asc' && !oldOrder) {\n    return newId;\n  }\n\n  if (newOrder === 'asc' && oldOrder === 'asc') {\n    return undefined;\n  }\n\n  if (newOrder === 'asc' && oldOrder === 'desc') {\n    return newId;\n  }\n  // #endregion\n\n  // #region newOrder: desc\n  if (newOrder === 'desc' && !oldOrder) {\n    return `-${newId}`;\n  }\n\n  if (newOrder === 'desc' && oldOrder === 'desc') {\n    return undefined;\n  }\n\n  if (newOrder === 'desc' && oldOrder === 'asc') {\n    return `-${newId}`;\n  }\n  // #endregion\n}\n","import { ComputedRef, Ref } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum DataViewVariant {\n  Table = 'table',\n}\n\nexport type DataViewVariants = `${DataViewVariant}`;\n\n/**\n * A unique id for a sorting strategy. If the order is descending, it must begin with \"-\" (a hyphen/dash).\n *\n * Ex: `'product_name'` if ascending or `'-product_name'` if descending\n */\nexport type SortValue = string;\n\n/**\n * The SortValue with its leading hyphen/dash removed\n */\nexport type SortId = string;\n\n/**\n * Determined by whether or not there is a leading hyphen/dash in the SortValue\n */\nexport type SortOrder = 'asc' | 'desc';\n\n/**\n * A deserialized instance of a `SortValue`.\n */\nexport type SortValueDeserialized = {\n  id: SortId;\n  order: SortOrder;\n};\n\n/** Updates the DataView internal state with the given sortId */\nexport type UpdateCurrentSort = (\n  sortId: SortId | undefined,\n  options?: {\n    sortOrder?: SortOrder;\n    /** If true, emits the `update:currentSort` and `update` events from DataView */\n    shouldEmit?: boolean;\n  },\n) => void;\n\n/** Updates the DataView internal state with the given page */\nexport type SetPage = (\n  page: number,\n  options?: {\n    /** If true, emits the `update:currentPage` and `update` events from DataView */\n    shouldEmit?: boolean;\n  },\n) => void;\n\n/** Updates the DataView internal state with the previous page */\nexport type GoPrevPage = (options?: {\n  /** If true, emits the `update:currentPage` and `update` events from DataView */\n  shouldEmit?: boolean;\n}) => void;\n\n/** Updates the DataView internal state with the next page */\nexport type GoNextPage = (options?: {\n  /** If true, emits the `update:currentPage` and `update` events from DataView */\n  shouldEmit?: boolean;\n}) => void;\n\n/** Updates the DataView internal state with the given searchTerm */\nexport type UpdateCurrentSearch = (\n  searchTerm?: string,\n  options?: {\n    /** If true, emits the `update:currentSearch` and `update` events from DataView */\n    shouldEmit?: boolean;\n  },\n) => void;\n\n/** Updates the DataView internal state with the given filter values */\nexport type UpdateCurrentFilters<FilterValues = object> = (\n  newFilters: FilterValues,\n  options?: {\n    /** If true, emits the `update:currentSearch` and `update` events from DataView */\n    shouldEmit?: boolean;\n  },\n) => void;\n\nexport interface UpdateEvent<FilterValues = object> {\n  page?: number;\n  pageSize?: number;\n  ordering?: string;\n  search?: string;\n  filters?: FilterValues;\n}\n\nexport interface DataViewInjection {\n  currentPage: ComputedRef<number>;\n\n  /** Optional override for the next button disabled state  */\n  isPaginateNextDisabled: ComputedRef<boolean>;\n\n  isPaginationEnabled: ComputedRef<boolean>;\n\n  pageCount: ComputedRef<number>;\n\n  pageSize: ComputedRef<number>;\n\n  totalDataCount: ComputedRef<number>;\n\n  /** Updates the DataView internal state with the given page */\n  setPage: SetPage;\n\n  /** Updates the DataView internal state with the previous page */\n  goPrevPage: GoPrevPage;\n\n  /** Updates the DataView internal state with the next page */\n  goNextPage: GoNextPage;\n\n  currentSortId: ComputedRef<SortId | undefined>;\n\n  currentSortOrder: ComputedRef<SortOrder | undefined>;\n\n  /** Updates the DataView internal state with the given sortId */\n  updateCurrentSort: UpdateCurrentSort;\n\n  currentSearch: ComputedRef<string>;\n\n  /** Updates the DataView internal state with the given searchTerm */\n  updateCurrentSearch: UpdateCurrentSearch;\n\n  /**\n   * The DataView's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities | undefined>;\n\n  /**\n   * Defines if a DataView has a Toolbar rendered. This prop is updated when DataViewToolbar exists and is mounted.\n   */\n  hasToolbar?: Ref<boolean>;\n\n  /**\n   * Enables certain loading indicators to be displayed within the DataView.\n   */\n  isLoading?: ComputedRef<boolean>;\n\n  /**\n   * Enables certain empty states to be displayed within the DataView.\n   */\n  isEmpty?: ComputedRef<boolean>;\n\n  /**\n   * Allows Table to control whether or not a DataViewToolbar should show a checkmark\n   */\n  isSelectable?: Ref<boolean>;\n\n  /**\n   * Whether or not the DataView is rendered within a Module; the value is inferred based on being\n   * able to inject details from Module.\n   *\n   * Note: This is sent to DataView child components so they only need to worry about interfacing\n   * with the DataViewInjection API.\n   */\n  isWithinModule: ComputedRef<boolean>;\n\n  /**\n   * The DataView's variant; the default value is undefined.\n   */\n  variant: ComputedRef<DataViewVariants | undefined>;\n}\n","<script lang=\"ts\">\n  export * from './DataView.constants';\n  export * from './DataView.keys';\n  export * from './DataView.types';\n  export * from './DataView.utils';\n</script>\n\n<script setup lang=\"ts\">\n  import cloneDeep from 'lodash-es/cloneDeep';\n  import { computed, inject, provide, ref, useCssModule, watch } from 'vue';\n\n  import { SpacingDensities } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import Paginate from '../Paginate/Paginate.vue';\n  import { DEFAULT_PAGE_SIZE } from './DataView.constants';\n  import { DATA_VIEW_INJECTION } from './DataView.keys';\n  import {\n    DataViewVariants,\n    GoNextPage,\n    GoPrevPage,\n    SetPage,\n    SortId,\n    SortOrder,\n    SortValue,\n    UpdateCurrentFilters,\n    UpdateCurrentSearch,\n    UpdateCurrentSort,\n    UpdateEvent,\n  } from './DataView.types';\n  import { deserializeSortValue, getNextSort } from './DataView.utils';\n\n  export interface DataViewProps {\n    /**\n     * Can be used to provide the initial page.\n     * Also, it can be used to control the active page with `v-model:current-page=\"myPage\"`.\n     */\n    currentPage?: number;\n\n    /**\n     * Can be used to set the initial search term.\n     * Also, it can be used to control the active search term with `v-model:current-search=\"mySearchTerm\"`.\n     */\n    currentSearch?: string;\n\n    /**\n     * Can be used to provide the initial sort order.\n     * Also, it can be used to control the active sort order with `v-model:current-sort=\"mySortOrder\"`.\n     */\n    currentSort?: SortValue;\n\n    /**\n     * A list of records. If pagination is enabled, `data` must be only the current page of records.\n     */\n    data?: object[];\n\n    /**\n     * Controls the DataView's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * The number of records to display per page.\n     */\n    pageSize?: number;\n\n    /**\n     * Opt-out of displaying pagination. Hides the pagination buttons and page stats.\n     */\n    disablePagination?: boolean;\n\n    /**\n     * Hides the bottom pagination without disabling the pagination from the toolbar\n     */\n    hideBottomPagination?: boolean;\n\n    /**\n     * The total number of records available.\n     * Used to auto-enable pagination when results exist.\n     * Use `Infinity` for activating 'n of many' pagination\n     * DataView does not paginate data for you; instead, `props.data` should always show\n     * the current page of results.\n     */\n    totalDataCount?: number;\n\n    /**\n     * Whether there is a next page of data or not as informed by the server.\n     * This only applies when`totalDataCount=\"Infinity\"` to determine if the \"Next\" pagination button should be disabled.\n     */\n    hasNextPage?: boolean;\n\n    /**\n     * DataView variant. The default value is `undefined`. Will default to `table` when used within\n     * a `<Module variant=\"table\">`.\n     */\n    variant?: DataViewVariants;\n\n    isLoading?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewProps>(), {\n    currentPage: 1,\n    currentSearch: undefined,\n    currentSort: undefined,\n    data: () => [],\n    density: 'comfortable',\n    pageSize: DEFAULT_PAGE_SIZE,\n    disablePagination: false,\n    totalDataCount: 0,\n    hasNextPage: undefined,\n    hideBottomPagination: false,\n    variant: undefined,\n  });\n\n  const emit = defineEmits<{\n    (e: 'update', state: UpdateEvent): void;\n    (e: 'update:currentFilters', newFilters: object): void;\n    (e: 'update:currentPage', page: number, pageSize: number): void;\n    (e: 'update:currentSearch', searchTerm?: string): void;\n    (e: 'update:currentSort', payload?: SortValue): void;\n  }>();\n\n  const classes = useCssModule();\n  const rootRef = ref<HTMLElement | null>(null);\n  const moduleInjection = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n  const computedVariant = computed<DataViewVariants | undefined>(() => {\n    if (props.variant) {\n      return props.variant;\n    }\n\n    if (moduleInjection.variant?.value === 'table') {\n      return 'table';\n    }\n\n    return undefined;\n  });\n  const isWithinModule = computed(() => moduleInjection.variant !== undefined);\n\n  const includeBottomPaginationInModule = computed(() => moduleInjection.includeDataviewPagination?.value);\n\n  // #region pagination\n  const internalPage = ref(1);\n  const isPaginationEnabled = computed(() => !props.disablePagination && props.totalDataCount > 0);\n  const isPaginateNextDisabled = computed(() => props.totalDataCount === Infinity && !props.hasNextPage);\n  const pageCount = computed(() => Math.ceil(props.totalDataCount / props.pageSize));\n\n  const setPage: SetPage = function (page: number, { shouldEmit } = {}) {\n    internalPage.value = page;\n\n    if (shouldEmit) {\n      emitUpdate();\n      emit('update:currentPage', page, props.pageSize);\n    }\n\n    if (Number(rootRef.value?.getBoundingClientRect().top) < 0) {\n      rootRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }\n  };\n\n  const goPrevPage: GoPrevPage = function ({ shouldEmit } = {}) {\n    const page = Math.max(internalPage.value - 1, 1);\n\n    setPage(page, { shouldEmit });\n  };\n\n  /** Updates the DataView internal state with the previous page */\n  const goNextPage: GoNextPage = function ({ shouldEmit } = {}) {\n    const page = Math.min(internalPage.value + 1, pageCount.value);\n\n    setPage(page, { shouldEmit });\n  };\n\n  watch(\n    () => props.currentPage,\n    () => {\n      setPage(props.currentPage);\n    },\n    { immediate: true },\n  );\n  // #endregion pagination\n\n  // #region sorting\n  const internalSort = ref<SortValue | undefined>(undefined);\n\n  const internalSortId = computed<SortId | undefined>(() =>\n    internalSort.value ? deserializeSortValue(internalSort.value).id : undefined,\n  );\n  const internalSortOrder = computed<SortOrder | undefined>(() =>\n    internalSort.value ? deserializeSortValue(internalSort.value).order : undefined,\n  );\n\n  const updateCurrentSort: UpdateCurrentSort = function (sortId, { sortOrder, shouldEmit } = {}) {\n    const { id: oldId, order: oldOrder } = deserializeSortValue(internalSort.value || '');\n    const nextSort = getNextSort({ newId: sortId, newOrder: sortOrder, oldId, oldOrder });\n\n    internalSort.value = nextSort;\n    setPage(1);\n\n    if (shouldEmit) {\n      emitUpdate();\n      emit('update:currentSort', nextSort);\n    }\n  };\n\n  watch(\n    () => props.currentSort,\n    () => {\n      updateCurrentSort(props.currentSort);\n    },\n    { immediate: true },\n  );\n  // #endregion sorting\n\n  // #region search\n  const internalSearch = ref('');\n\n  const hasToolbar = ref(false);\n  const isSelectable = ref(false);\n\n  const updateCurrentSearch: UpdateCurrentSearch = function (searchTerm, { shouldEmit } = {}) {\n    internalSearch.value = searchTerm || '';\n    setPage(1);\n\n    if (shouldEmit) {\n      emitUpdate();\n      emit('update:currentSearch', searchTerm);\n    }\n  };\n\n  watch(\n    () => props.currentSearch,\n    () => {\n      updateCurrentSearch(props.currentSearch);\n    },\n    { immediate: true },\n  );\n  // #endregion search\n\n  // #region filters\n  const internalFilters = ref<object>({});\n\n  const updateCurrentFilters: UpdateCurrentFilters = function (newFilters: object, { shouldEmit } = {}) {\n    internalFilters.value = newFilters;\n    setPage(1);\n\n    if (shouldEmit) {\n      emitUpdate();\n      emit('update:currentFilters', newFilters);\n    }\n  };\n  // #endregion filters\n\n  function emitUpdate() {\n    emit('update', {\n      page: internalPage.value,\n      pageSize: props.pageSize,\n      ordering: internalSort.value,\n      search: internalSearch.value,\n      filters: cloneDeep(internalFilters.value),\n    });\n  }\n\n  provide(\n    DATA_VIEW_INJECTION.key,\n    Object.freeze({\n      // Pagination\n      currentPage: computed(() => internalPage.value),\n      isPaginationEnabled,\n      isPaginateNextDisabled,\n      pageCount,\n      pageSize: computed(() => props.pageSize),\n      totalDataCount: computed(() => props.totalDataCount),\n      setPage,\n      goPrevPage,\n      goNextPage,\n\n      // Sorting\n      currentSortId: internalSortId,\n      currentSortOrder: internalSortOrder,\n      updateCurrentSort,\n\n      // Search\n      currentSearch: computed(() => internalSearch.value),\n      updateCurrentSearch,\n\n      // Miscellaneous\n      density: computed(() => props.density),\n      hasToolbar,\n      isEmpty: computed(() => props.data.length === 0),\n      isSelectable,\n      isLoading: computed(() => props.isLoading),\n      isWithinModule,\n      variant: computedVariant,\n    }),\n  );\n\n  defineExpose({\n    page: computed(() => internalPage.value),\n    pageSize: computed(() => props.pageSize),\n    setPage,\n    goPrevPage,\n    goNextPage,\n    ordering: computed(() => internalSort.value),\n    updateCurrentSort,\n    search: computed(() => internalSearch.value),\n    updateCurrentSearch,\n    filters: computed(() => internalFilters.value),\n    updateCurrentFilters,\n  });\n</script>\n\n<template>\n  <div ref=\"rootRef\" class=\"stash-data-view relative\" data-test=\"stash-data-view\">\n    <!-- @slot default -->\n    <slot\n      :current-page=\"internalPage\"\n      :current-sort-id=\"internalSortId\"\n      :current-sort-order=\"internalSortOrder\"\n      :data=\"data\"\n      :go-prev-page=\"goPrevPage\"\n      :go-next-page=\"goNextPage\"\n      :page-count=\"pageCount\"\n      :set-page=\"setPage\"\n      :total-data-count=\"props.totalDataCount\"\n      :update-current-sort=\"updateCurrentSort\"\n      :update-current-search=\"updateCurrentSearch\"\n    ></slot>\n\n    <Paginate\n      v-if=\"\n        isPaginationEnabled &&\n        (!isWithinModule || includeBottomPaginationInModule) &&\n        pageCount > 1 &&\n        !props.hideBottomPagination\n      \"\n      class=\"mt-6\"\n      :class=\"classes.paginate\"\n      :current-page=\"internalPage\"\n      :is-next-disabled=\"isLoading || isPaginateNextDisabled\"\n      :list-length=\"props.totalDataCount\"\n      :page-size=\"props.pageSize\"\n      :variant=\"props.totalDataCount === Infinity ? 'stats' : 'standard'\"\n      @set-page=\"(page: number) => setPage(page, { shouldEmit: true })\"\n    />\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .paginate ul {\n      margin: 0;\n    }\n  }\n</style>\n"],"names":["deserializeSortValue","sort","order","serializeSortValue","id","getNextSort","newId","newOrder","oldId","oldOrder","DataViewVariant","props","__props","emit","__emit","classes","useCssModule","rootRef","ref","moduleInjection","inject","MODULE_INJECTION","computedVariant","computed","_a","isWithinModule","includeBottomPaginationInModule","internalPage","isPaginationEnabled","isPaginateNextDisabled","pageCount","setPage","page","shouldEmit","emitUpdate","_b","goPrevPage","goNextPage","watch","internalSort","internalSortId","internalSortOrder","updateCurrentSort","sortId","sortOrder","nextSort","internalSearch","hasToolbar","isSelectable","updateCurrentSearch","searchTerm","internalFilters","updateCurrentFilters","newFilters","cloneDeep","provide","DATA_VIEW_INJECTION","__expose","_createElementBlock","_renderSlot","_ctx","_createBlock","Paginate","_normalizeClass","_unref","_cache"],"mappings":";;;;;;AAKO,SAASA,EAAqBC,GAAwC;AAC3E,QAAMC,IAAQD,EAAK,CAAC,MAAM,MAAM,SAAS;AAGzC,SAAO,EAAE,IAFEC,MAAU,QAAQD,IAAOA,EAAK,MAAM,CAAC,GAEnC,OAAAC,EAAA;AACf;AAKO,SAASC,GAAmB,EAAE,IAAAC,GAAI,OAAAF,KAA2C;AAClF,SAAO,GAAGA,MAAU,SAAS,MAAM,EAAE,GAAGE,CAAE;AAC5C;AAcO,SAASC,GAAY,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,GAAO,UAAAC,KAAoD;AACxG,MAAKH,GAIL;AAAA,QAAIA,MAAUE;AAEZ,aAAOL,GAAmB,EAAE,IAAIG,GAAO,OAAOC,KAAY,OAAO;AASnE,QAAI,CAACA,KAAY,CAACE;AAChB,aAAOH;AAGT,QAAI,GAACC,KAAYE,MAAa,SAI9B;AAAA,UAAI,CAACF,KAAYE,MAAa;AAC5B,eAAO,IAAIH,CAAK;AAKlB,UAAIC,MAAa,SAAS,CAACE;AACzB,eAAOH;AAGT,UAAI,EAAAC,MAAa,SAASE,MAAa,QAIvC;AAAA,YAAIF,MAAa,SAASE,MAAa;AACrC,iBAAOH;AAKT,YAAIC,MAAa,UAAU,CAACE;AAC1B,iBAAO,IAAIH,CAAK;AAGlB,YAAI,EAAAC,MAAa,UAAUE,MAAa,WAIpCF,MAAa,UAAUE,MAAa;AACtC,iBAAO,IAAIH,CAAK;AAAA;AAAA;AAAA;AAGpB;ACnFO,IAAKI,uBAAAA,OACVA,EAAA,QAAQ,SADEA,IAAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;AC+FV,UAAMC,IAAQC,GAcRC,IAAOC,GAQPC,IAAUC,EAAA,GACVC,IAAUC,EAAwB,IAAI,GACtCC,IAAkBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ,GACxEC,IAAkBC,EAAuC,MAAM;;AACnE,UAAIZ,EAAM;AACR,eAAOA,EAAM;AAGf,YAAIa,IAAAL,EAAgB,YAAhB,gBAAAK,EAAyB,WAAU;AACrC,eAAO;AAAA,IAIX,CAAC,GACKC,IAAiBF,EAAS,MAAMJ,EAAgB,YAAY,MAAS,GAErEO,IAAkCH,EAAS,MAAA;;AAAM,cAAAC,IAAAL,EAAgB,8BAAhB,gBAAAK,EAA2C;AAAA,KAAK,GAGjGG,IAAeT,EAAI,CAAC,GACpBU,IAAsBL,EAAS,MAAM,CAACZ,EAAM,qBAAqBA,EAAM,iBAAiB,CAAC,GACzFkB,IAAyBN,EAAS,MAAMZ,EAAM,mBAAmB,SAAY,CAACA,EAAM,WAAW,GAC/FmB,IAAYP,EAAS,MAAM,KAAK,KAAKZ,EAAM,iBAAiBA,EAAM,QAAQ,CAAC,GAE3EoB,IAAmB,SAAUC,GAAc,EAAE,YAAAC,EAAA,IAAe,CAAA,GAAI;;AACpE,MAAAN,EAAa,QAAQK,GAEjBC,MACFC,EAAA,GACArB,EAAK,sBAAsBmB,GAAMrB,EAAM,QAAQ,IAG7C,QAAOa,IAAAP,EAAQ,UAAR,gBAAAO,EAAe,wBAAwB,GAAG,IAAI,OACvDW,IAAAlB,EAAQ,UAAR,QAAAkB,EAAe,eAAe,EAAE,UAAU,UAAU,OAAO;IAE/D,GAEMC,IAAyB,SAAU,EAAE,YAAAH,EAAA,IAAe,CAAA,GAAI;AAC5D,YAAMD,IAAO,KAAK,IAAIL,EAAa,QAAQ,GAAG,CAAC;AAE/C,MAAAI,EAAQC,GAAM,EAAE,YAAAC,GAAY;AAAA,IAC9B,GAGMI,IAAyB,SAAU,EAAE,YAAAJ,EAAA,IAAe,CAAA,GAAI;AAC5D,YAAMD,IAAO,KAAK,IAAIL,EAAa,QAAQ,GAAGG,EAAU,KAAK;AAE7D,MAAAC,EAAQC,GAAM,EAAE,YAAAC,GAAY;AAAA,IAC9B;AAEA,IAAAK;AAAA,MACE,MAAM3B,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAoB,EAAQpB,EAAM,WAAW;AAAA,MAC3B;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAKpB,UAAM4B,IAAerB,EAA2B,MAAS,GAEnDsB,IAAiBjB;AAAA,MAA6B,MAClDgB,EAAa,QAAQvC,EAAqBuC,EAAa,KAAK,EAAE,KAAK;AAAA,IAAA,GAE/DE,IAAoBlB;AAAA,MAAgC,MACxDgB,EAAa,QAAQvC,EAAqBuC,EAAa,KAAK,EAAE,QAAQ;AAAA,IAAA,GAGlEG,IAAuC,SAAUC,GAAQ,EAAE,WAAAC,GAAW,YAAAX,EAAA,IAAe,IAAI;AAC7F,YAAM,EAAE,IAAIzB,GAAO,OAAOC,MAAaT,EAAqBuC,EAAa,SAAS,EAAE,GAC9EM,IAAWxC,GAAY,EAAE,OAAOsC,GAAQ,UAAUC,GAAW,OAAApC,GAAO,UAAAC,GAAU;AAEpF,MAAA8B,EAAa,QAAQM,GACrBd,EAAQ,CAAC,GAELE,MACFC,EAAA,GACArB,EAAK,sBAAsBgC,CAAQ;AAAA,IAEvC;AAEA,IAAAP;AAAA,MACE,MAAM3B,EAAM;AAAA,MACZ,MAAM;AACJ,QAAA+B,EAAkB/B,EAAM,WAAW;AAAA,MACrC;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAKpB,UAAMmC,IAAiB5B,EAAI,EAAE,GAEvB6B,IAAa7B,EAAI,EAAK,GACtB8B,IAAe9B,EAAI,EAAK,GAExB+B,IAA2C,SAAUC,GAAY,EAAE,YAAAjB,EAAA,IAAe,CAAA,GAAI;AAC1F,MAAAa,EAAe,QAAQI,KAAc,IACrCnB,EAAQ,CAAC,GAELE,MACFC,EAAA,GACArB,EAAK,wBAAwBqC,CAAU;AAAA,IAE3C;AAEA,IAAAZ;AAAA,MACE,MAAM3B,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAsC,EAAoBtC,EAAM,aAAa;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAKpB,UAAMwC,IAAkBjC,EAAY,EAAE,GAEhCkC,IAA6C,SAAUC,GAAoB,EAAE,YAAApB,EAAA,IAAe,CAAA,GAAI;AACpG,MAAAkB,EAAgB,QAAQE,GACxBtB,EAAQ,CAAC,GAELE,MACFC,EAAA,GACArB,EAAK,yBAAyBwC,CAAU;AAAA,IAE5C;AAGA,aAASnB,IAAa;AACpB,MAAArB,EAAK,UAAU;AAAA,QACb,MAAMc,EAAa;AAAA,QACnB,UAAUhB,EAAM;AAAA,QAChB,UAAU4B,EAAa;AAAA,QACvB,QAAQO,EAAe;AAAA,QACvB,SAASQ,EAAUH,EAAgB,KAAK;AAAA,MAAA,CACzC;AAAA,IACH;AAEA,WAAAI;AAAA,MACEC,GAAoB;AAAA,MACpB,OAAO,OAAO;AAAA;AAAA,QAEZ,aAAajC,EAAS,MAAMI,EAAa,KAAK;AAAA,QAC9C,qBAAAC;AAAA,QACA,wBAAAC;AAAA,QACA,WAAAC;AAAA,QACA,UAAUP,EAAS,MAAMZ,EAAM,QAAQ;AAAA,QACvC,gBAAgBY,EAAS,MAAMZ,EAAM,cAAc;AAAA,QACnD,SAAAoB;AAAA,QACA,YAAAK;AAAA,QACA,YAAAC;AAAA;AAAA,QAGA,eAAeG;AAAA,QACf,kBAAkBC;AAAA,QAClB,mBAAAC;AAAA;AAAA,QAGA,eAAenB,EAAS,MAAMuB,EAAe,KAAK;AAAA,QAClD,qBAAAG;AAAA;AAAA,QAGA,SAAS1B,EAAS,MAAMZ,EAAM,OAAO;AAAA,QACrC,YAAAoC;AAAA,QACA,SAASxB,EAAS,MAAMZ,EAAM,KAAK,WAAW,CAAC;AAAA,QAC/C,cAAAqC;AAAA,QACA,WAAWzB,EAAS,MAAMZ,EAAM,SAAS;AAAA,QACzC,gBAAAc;AAAA,QACA,SAASH;AAAA,MAAA,CACV;AAAA,IAAA,GAGHmC,EAAa;AAAA,MACX,MAAMlC,EAAS,MAAMI,EAAa,KAAK;AAAA,MACvC,UAAUJ,EAAS,MAAMZ,EAAM,QAAQ;AAAA,MACvC,SAAAoB;AAAA,MACA,YAAAK;AAAA,MACA,YAAAC;AAAA,MACA,UAAUd,EAAS,MAAMgB,EAAa,KAAK;AAAA,MAC3C,mBAAAG;AAAA,MACA,QAAQnB,EAAS,MAAMuB,EAAe,KAAK;AAAA,MAC3C,qBAAAG;AAAA,MACA,SAAS1B,EAAS,MAAM4B,EAAgB,KAAK;AAAA,MAC7C,sBAAAC;AAAA,IAAA,CACD,mBAIDM,EAgCM,OAAA;AAAA,eAhCG;AAAA,MAAJ,KAAIzC;AAAA,MAAU,OAAM;AAAA,MAA2B,aAAU;AAAA,IAAA;MAE5D0C,EAYQC,EAAA,QAAA,WAAA;AAAA,QAXL,aAAcjC,EAAA;AAAA,QACd,eAAiBa,EAAA;AAAA,QACjB,kBAAoBC,EAAA;AAAA,QACpB,MAAM7B,EAAA;AAAA,QACN,YAAAwB;AAAA,QACA,YAAAC;AAAA,QACA,WAAYP,EAAA;AAAA,QACZ,SAAAC;AAAA,QACA,gBAAkBpB,EAAM;AAAA,QACxB,mBAAA+B;AAAA,QACA,qBAAAO;AAAA,MAAA;MAIcrB,EAAA,UAAiC,CAAAH,EAAA,SAAkBC,EAAA,UAA4CI,EAAA,QAAS,KAAiB,CAAAnB,EAAM,6BADhJkD,EAeEC,GAAA;AAAA;QARA,OAAKC,EAAA,CAAC,QACEC,EAAAjD,CAAA,EAAQ,QAAQ,CAAA;AAAA,QACvB,gBAAcY,EAAA;AAAA,QACd,oBAAkBf,EAAA,aAAaiB,EAAA;AAAA,QAC/B,eAAalB,EAAM;AAAA,QACnB,aAAWA,EAAM;AAAA,QACjB,SAASA,EAAM,mBAAmB,QAAQ,UAAA;AAAA,QAC1C,WAAQsD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAGjC,MAAiBD,EAAQC,GAAI,EAAA,YAAA,IAAA;AAAA,MAAA;;;;;;;;"}

package/dist/DataViewFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewFilters.js","sources":["../src/components/DataViewFilters/DataViewFilters.types.ts","../src/components/DataViewFilters/useFilters.ts","../src/components/DataViewFilters/DataViewFilters.vue"],"sourcesContent":["import { UseFiltersReturnType } from './useFilters';\n\n/**\n * A function that is called when the user clicks one of the \"Apply\" buttons in DataViewFilters.\n *\n * A return value of `{ preventDismiss: true }` can be used to prevent the DataViewFilters drawer or a FilterDropdown from closing, such as when some filters have invalid values.\n */\nexport type OnApplyFilters = () => Promise<{ preventDismiss?: boolean } | void> | { preventDismiss?: boolean } | void;\n\nexport enum DrawerStyle {\n  /** Displays all groups and their fields without the need for navigating submenus. */\n  Cascade = 'cascade',\n  /** Displays only group names or fields; navigation between the group names and a submenu of fields is required. */\n  Nested = 'nested',\n}\n\nexport type DrawerStyles = `${DrawerStyle}`;\n\nexport interface DataViewFiltersUtilsInjection {\n  useFiltersInstance?: UseFiltersReturnType;\n  drawerStyle?: DrawerStyles;\n}\n","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 { DrawerStyles, 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?: DrawerStyles;\n    drawerProps?: ModalProps;\n    /**\n     * @deprecated The `activeGroup` prop is a sufficient replacement for this prop. A falsy `activeGroup` will hide the button and a truthy `activeGroup` will show it (when the `drawerStyle` is 'nested').\n     *\n     * **Note:** This prop has no effect when using a \"cascade\" `drawerStyle`.\n     */\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    /**\n     * The name of the active filter group. The active filter group is determined by which instance of FilterDropdown or FilterDrawerItem is open.\n     *\n     * **Note:** This prop is required when using a \"nested\" `drawerStyle`, but has no effect when using a \"cascade\" `drawerStyle`.\n     */\n    activeGroup?: string;\n  }\n\n  export interface DataViewFiltersSlots {\n    default?: () => unknown;\n    drawer?: () => unknown;\n    'filters-label'?: () => unknown;\n  }\n\n  const props = withDefaults(defineProps<DataViewFiltersProps>(), {\n    filtersLabelText: t('ll.filterBy'),\n    isLoading: false,\n    drawerStyle: 'cascade',\n    drawerProps: undefined,\n    searchBarProps: undefined,\n    showDrawerPreviousButton: false,\n    showSearch: true,\n    useFiltersInstance: undefined,\n    onApply: undefined,\n    activeGroup: undefined,\n  });\n\n  const emit = 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  const isViewingGroupsMenu = computed(() => props.drawerStyle === 'nested' && !props.activeGroup);\n  const isViewingSingleGroup = computed(() => props.drawerStyle === 'nested' && props.activeGroup);\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, {\n    useFiltersInstance: props.useFiltersInstance,\n    drawerStyle: props.drawerStyle,\n  });\n\n  const totalActiveFiltersCount = computed(() => props.useFiltersInstance?.totalActiveFiltersCount.value ?? 0);\n  /** The number of active filters in the currently active group. This is only used when the drawerStyle is 'nested'. */\n  const activeGroupActiveFiltersCount = computed(\n    () => Number(props.activeGroup && 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    if (!props.activeGroup) {\n      return;\n    }\n\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 grid grid-cols-12 gap-6 p-3\"\n    :class=\"{ 'lg:p-6': density === 'comfortable', '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=\"col-span-12 md:col-span-6 lg: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=\"col-span-12 row-start-2 md:col-start-7 md:row-start-1 lg:col-span-8 lg:col-start-5\"\n    >\n      <div class=\"hidden md:block\">\n        <slot name=\"filters-label\">\n          <Label>{{ props.filtersLabelText }}</Label>\n        </slot>\n      </div>\n      <div class=\"flex gap-4\">\n        <FilterChip\n          secondary\n          class=\"!md:inline-flex !flex w-full justify-center gap-4 md:w-auto\"\n          data-test=\"stash-data-view-filters|drawer-toggle-button\"\n          :filter-count=\"totalActiveFiltersCount\"\n          @click=\"isDrawerOpen = true\"\n        >\n          <span class=\"inline-flex items-center gap-3\">\n            <Icon name=\"filter-line\" class=\"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      size=\"narrow\"\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=\"isViewingSingleGroup\"\n          icon\n          class=\"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=\"flex justify-end gap-gutter\">\n          <Button v-if=\"totalActiveFiltersCount === 0\" secondary @click=\"onDismiss\">\n            {{ t('ll.cancel') }}\n          </Button>\n          <Button\n            v-if=\"(isViewingGroupsMenu || props.drawerStyle === 'cascade') && totalActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetAllClick\"\n          >\n            {{ t('ll.resetAll') }}\n          </Button>\n          <Button\n            v-if=\"isViewingSingleGroup && activeGroupActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetGroupClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button\n            v-if=\"isViewingSingleGroup || 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":["DrawerStyle","useFilters","schema","dataViewRef","appliedFilters","ref","workingFilters","filterName","dvRef","applyFilters","cloneDeep","resetAllFilters","resetFilterGroup","group","undoWorkingFilters","activeFiltersCounts","computed","counts","config","value","_a","isDefined","totalActiveFiltersCount","count","props","__props","emit","__emit","slots","_useSlots","isDesktop","useMediaQuery","SCREEN_SIZES","isViewingGroupsMenu","isViewingSingleGroup","density","isDataViewLoading","isWithinModule","currentSearch","updateCurrentSearch","inject","DATA_VIEW_INJECTION","provide","DATA_VIEW_FILTERS_UTILS_INJECTION","activeGroupActiveFiltersCount","isDrawerOpen","handleApplyClick","preventDismiss","_b","handleResetGroupClick","handleResetAllClick","onDismiss","watch"],"mappings":"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"}
+{"version":3,"file":"DataViewFilters.js","sources":["../src/components/DataViewFilters/DataViewFilters.types.ts","../src/components/DataViewFilters/useFilters.ts","../src/components/DataViewFilters/DataViewFilters.vue"],"sourcesContent":["import { UseFiltersReturnType } from './useFilters';\n\n/**\n * A function that is called when the user clicks one of the \"Apply\" buttons in DataViewFilters.\n *\n * A return value of `{ preventDismiss: true }` can be used to prevent the DataViewFilters drawer or a FilterDropdown from closing, such as when some filters have invalid values.\n */\nexport type OnApplyFilters = () => Promise<{ preventDismiss?: boolean } | void> | { preventDismiss?: boolean } | void;\n\nexport enum DrawerStyle {\n  /** Displays all groups and their fields without the need for navigating submenus. */\n  Cascade = 'cascade',\n  /** Displays only group names or fields; navigation between the group names and a submenu of fields is required. */\n  Nested = 'nested',\n}\n\nexport type DrawerStyles = `${DrawerStyle}`;\n\nexport interface DataViewFiltersUtilsInjection {\n  useFiltersInstance?: UseFiltersReturnType;\n  drawerStyle?: DrawerStyles;\n}\n","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 { DrawerStyles, 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?: DrawerStyles;\n    drawerProps?: ModalProps;\n    /**\n     * @deprecated The `activeGroup` prop is a sufficient replacement for this prop. A falsy `activeGroup` will hide the button and a truthy `activeGroup` will show it (when the `drawerStyle` is 'nested').\n     *\n     * **Note:** This prop has no effect when using a \"cascade\" `drawerStyle`.\n     */\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    /**\n     * The name of the active filter group. The active filter group is determined by which instance of FilterDropdown or FilterDrawerItem is open.\n     *\n     * **Note:** This prop is required when using a \"nested\" `drawerStyle`, but has no effect when using a \"cascade\" `drawerStyle`.\n     */\n    activeGroup?: string;\n  }\n\n  export interface DataViewFiltersSlots {\n    default?: () => unknown;\n    drawer?: () => unknown;\n    'filters-label'?: () => unknown;\n  }\n\n  const props = withDefaults(defineProps<DataViewFiltersProps>(), {\n    filtersLabelText: t('ll.filterBy'),\n    isLoading: false,\n    drawerStyle: 'cascade',\n    drawerProps: undefined,\n    searchBarProps: undefined,\n    showDrawerPreviousButton: false,\n    showSearch: true,\n    useFiltersInstance: undefined,\n    onApply: undefined,\n    activeGroup: undefined,\n  });\n\n  const emit = 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  const isViewingGroupsMenu = computed(() => props.drawerStyle === 'nested' && !props.activeGroup);\n  const isViewingSingleGroup = computed(() => props.drawerStyle === 'nested' && props.activeGroup);\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, {\n    useFiltersInstance: props.useFiltersInstance,\n    drawerStyle: props.drawerStyle,\n  });\n\n  const totalActiveFiltersCount = computed(() => props.useFiltersInstance?.totalActiveFiltersCount.value ?? 0);\n  /** The number of active filters in the currently active group. This is only used when the drawerStyle is 'nested'. */\n  const activeGroupActiveFiltersCount = computed(\n    () => Number(props.activeGroup && 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    if (!props.activeGroup) {\n      return;\n    }\n\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 grid grid-cols-12 gap-6 p-3\"\n    :class=\"{ 'lg:p-6': density === 'comfortable', '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=\"col-span-12 md:col-span-6 lg: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=\"col-span-12 row-start-2 md:col-start-7 md:row-start-1 lg:col-span-8 lg:col-start-5\"\n    >\n      <div class=\"hidden md:block\">\n        <slot name=\"filters-label\">\n          <Label>{{ props.filtersLabelText }}</Label>\n        </slot>\n      </div>\n      <div class=\"flex gap-4\">\n        <FilterChip\n          secondary\n          class=\"!md:inline-flex !flex w-full justify-center gap-4 md:w-auto\"\n          data-test=\"stash-data-view-filters|drawer-toggle-button\"\n          :filter-count=\"totalActiveFiltersCount\"\n          @click=\"isDrawerOpen = true\"\n        >\n          <span class=\"inline-flex items-center gap-3\">\n            <Icon name=\"filter-line\" class=\"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      size=\"narrow\"\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=\"isViewingSingleGroup\"\n          icon\n          class=\"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=\"flex justify-end gap-gutter\">\n          <Button v-if=\"totalActiveFiltersCount === 0\" secondary @click=\"onDismiss\">\n            {{ t('ll.cancel') }}\n          </Button>\n          <Button\n            v-if=\"(isViewingGroupsMenu || props.drawerStyle === 'cascade') && totalActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetAllClick\"\n          >\n            {{ t('ll.resetAll') }}\n          </Button>\n          <Button\n            v-if=\"isViewingSingleGroup && activeGroupActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetGroupClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button\n            v-if=\"isViewingSingleGroup || 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":["DrawerStyle","useFilters","schema","dataViewRef","appliedFilters","ref","workingFilters","filterName","dvRef","applyFilters","cloneDeep","resetAllFilters","resetFilterGroup","group","undoWorkingFilters","activeFiltersCounts","computed","counts","config","value","_a","isDefined","totalActiveFiltersCount","count","props","__props","emit","__emit","slots","_useSlots","isDesktop","useMediaQuery","SCREEN_SIZES","isViewingGroupsMenu","isViewingSingleGroup","density","isDataViewLoading","isWithinModule","currentSearch","updateCurrentSearch","inject","DATA_VIEW_INJECTION","provide","DATA_VIEW_FILTERS_UTILS_INJECTION","activeGroupActiveFiltersCount","isDrawerOpen","handleApplyClick","preventDismiss","_b","handleResetGroupClick","handleResetAllClick","onDismiss","watch","_createBlock","Box","_normalizeClass","_unref","_openBlock","SearchBar","_mergeProps","t","_cache","searchTerm","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_createVNode","Label","_createTextVNode","_toDisplayString","_hoisted_3","FilterChip","_hoisted_4","Icon","Button","Modal","_hoisted_5"],"mappings":"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"}

package/dist/DataViewSortButton.js

@@ -46,8 +46,8 @@ const v = {
               _: 1
             })
           ]),
-          _: 2
-        }, 1032, ["aria-expanded", "onClick"])
+          _: 1
+        }, 8, ["aria-expanded", "onClick"])
       ]),
       default: o(() => [
         c("ul", v, [

package/dist/DataViewSortButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { inject, useCssModule } 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 Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import { SortOption } from './DataViewSortButton.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * An array of sort options to display in the dropdown.\n     */\n    sortOptions?: SortOption[];\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    sortOptions: () => [],\n  });\n  const classes = useCssModule();\n\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n</script>\n\n<template>\n  <Dropdown\n    v-if=\"props.sortOptions.length\"\n    align=\"left\"\n    class=\"stash-data-view-sort-button\"\n    data-test=\"stash-data-view-sort-button\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        icon-label\n        :aria-expanded=\"isActive.toString()\"\n        class=\"text-blue-500\"\n        data-test=\"stash-data-view-sort-button|sort-menu-button\"\n        @click=\"toggle\"\n      >\n        <IconLabel icon=\"sort\" stacked>\n          {{ t('ll.sort') }}\n        </IconLabel>\n      </Button>\n    </template>\n    <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n      <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'bg-blue-100 text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'asc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n        >\n          <Button inline class=\"h-9\">\n            {{ sortOption.labelAsc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n              name=\"check\"\n              class=\"ml-auto text-blue-500\"\n            />\n          </Button>\n        </li>\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'bg-blue-100 text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'desc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n        >\n          <Button inline class=\"h-9\">\n            {{ sortOption.labelDesc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n              name=\"check\"\n              class=\"ml-auto text-blue-500\"\n            />\n          </Button>\n        </li>\n      </template>\n    </ul>\n  </Dropdown>\n</template>\n\n<style module>\n  @layer utilities {\n    .dropdown__item > button {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBE,UAAMA,IAAQC,GAGRC,IAAUC,EAAA,GAEV,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { inject, useCssModule } 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 Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import { SortOption } from './DataViewSortButton.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * An array of sort options to display in the dropdown.\n     */\n    sortOptions?: SortOption[];\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    sortOptions: () => [],\n  });\n  const classes = useCssModule();\n\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n</script>\n\n<template>\n  <Dropdown\n    v-if=\"props.sortOptions.length\"\n    align=\"left\"\n    class=\"stash-data-view-sort-button\"\n    data-test=\"stash-data-view-sort-button\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        icon-label\n        :aria-expanded=\"isActive.toString()\"\n        class=\"text-blue-500\"\n        data-test=\"stash-data-view-sort-button|sort-menu-button\"\n        @click=\"toggle\"\n      >\n        <IconLabel icon=\"sort\" stacked>\n          {{ t('ll.sort') }}\n        </IconLabel>\n      </Button>\n    </template>\n    <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n      <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'bg-blue-100 text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'asc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n        >\n          <Button inline class=\"h-9\">\n            {{ sortOption.labelAsc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n              name=\"check\"\n              class=\"ml-auto text-blue-500\"\n            />\n          </Button>\n        </li>\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'bg-blue-100 text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'desc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n        >\n          <Button inline class=\"h-9\">\n            {{ sortOption.labelDesc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n              name=\"check\"\n              class=\"ml-auto text-blue-500\"\n            />\n          </Button>\n        </li>\n      </template>\n    </ul>\n  </Dropdown>\n</template>\n\n<style module>\n  @layer utilities {\n    .dropdown__item > button {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION","_createBlock","Dropdown","_withCtx","isActive","toggle","_createVNode","Button","IconLabel","_unref","t","_createElementVNode","_hoisted_1","_openBlock","_createElementBlock","_Fragment","_renderList","sortOption","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBE,UAAMA,IAAQC,GAGRC,IAAUC,EAAA,GAEV,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;qBAMdR,EAAM,YAAY,eAD1BS,EAyDWC,GAAA;AAAA;MAvDT,OAAM;AAAA,MACN,OAAM;AAAA,MACN,aAAU;AAAA,IAAA;MAEC,QAAMC,EACf,CAUS,EAXU,UAAAC,GAAU,QAAAC,QAAM;AAAA,QACnCC,EAUSC,GAAA;AAAA,UATP,cAAA;AAAA,UACC,iBAAeH,EAAS,SAAA;AAAA,UACzB,OAAM;AAAA,UACN,aAAU;AAAA,UACT,SAAOC;AAAA,QAAA;qBAER,MAEY;AAAA,YAFZC,EAEYE,GAAA;AAAA,cAFD,MAAK;AAAA,cAAO,SAAA;AAAA,YAAA;yBACrB,MAAkB;AAAA,oBAAfC,EAAAC,CAAA,EAAC,SAAA,CAAA,GAAA,CAAA;AAAA,cAAA;;;;;;;iBAIV,MAqCK;AAAA,QArCLC,EAqCK,MArCLC,GAqCK;AAAA,WApCHC,EAAA,EAAA,GAAAC,EAmCWC,GAAA,MAAAC,EAnCoBxB,EAAM,cAApByB;YAAuC,KAAAA,EAAW;AAAA,UAAA;YACjEN,EAgBK,MAAA;AAAA,cAfH,UAAM,0BAAwB;AAAA,gBACRF,EAAAf,CAAA,EAAQ;AAAA,gBAA0D,EAAA,4BAAAuB,EAAW,OAAOR,EAAAb,CAAA,KAAiBa,EAAAZ,CAAA,MAAgB,MAAA;AAAA,cAAA;cAI1I,SAAK,MAAQY,EAAAX,CAAA,EAAkBmB,EAAW,IAAE,EAAA,WAAA,OAAA,YAAA,GAAA,CAAA;AAAA,YAAA;cAE7CX,EAOSC,GAAA;AAAA,gBAPD,QAAA;AAAA,gBAAO,OAAM;AAAA,cAAA;2BACnB,MAAyB;AAAA,sBAAtBU,EAAW,QAAQ,IAAG,KACzB,CAAA;AAAA,kBACQA,EAAW,OAAOR,EAAAb,CAAA,KAAiBa,EAAAZ,CAAA,MAAgB,cAD3DI,EAIEiB,GAAA;AAAA;oBAFA,MAAK;AAAA,oBACL,OAAM;AAAA,kBAAA;;;;;YAIZP,EAgBK,MAAA;AAAA,cAfH,UAAM,0BAAwB;AAAA,gBACRF,EAAAf,CAAA,EAAQ;AAAA,gBAA0D,EAAA,4BAAAuB,EAAW,OAAOR,EAAAb,CAAA,KAAiBa,EAAAZ,CAAA,MAAgB,OAAA;AAAA,cAAA;cAI1I,SAAK,MAAQY,EAAAX,CAAA,EAAkBmB,EAAW,IAAE,EAAA,WAAA,QAAA,YAAA,GAAA,CAAA;AAAA,YAAA;cAE7CX,EAOSC,GAAA;AAAA,gBAPD,QAAA;AAAA,gBAAO,OAAM;AAAA,cAAA;2BACnB,MAA0B;AAAA,sBAAvBU,EAAW,SAAS,IAAG,KAC1B,CAAA;AAAA,kBACQA,EAAW,OAAOR,EAAAb,CAAA,KAAiBa,EAAAZ,CAAA,MAAgB,eAD3DI,EAIEiB,GAAA;AAAA;oBAFA,MAAK;AAAA,oBACL,OAAM;AAAA,kBAAA;;;;;;;;;;;;;;;;"}

package/dist/DataViewToolbar.js

@@ -148,14 +148,14 @@ const ue = { class: "flex place-items-center" }, pe = {
                   icon: "ellipsis",
                   stacked: ""
                 }, {
-                  default: r(() => f[2] || (f[2] = [
-                    ae(" More ")
-                  ])),
+                  default: r(() => [...f[2] || (f[2] = [
+                    ae(" More ", -1)
+                  ])]),
                   _: 1
                 })
               ]),
-              _: 2
-            }, 1032, ["onClick"])
+              _: 1
+            }, 8, ["onClick"])
           ]),
           "more-actions": r(() => [
             R(m.$slots, "more-actions")

package/dist/DataViewToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/useActionsWidth.ts","../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["import { ComputedRef, nextTick, onBeforeUnmount, onMounted, Ref, ref, ShallowRef, watch } from 'vue';\n\nexport interface UseActionsWidthOptions {\n  toolbarEl: ShallowRef<HTMLElement | null>;\n  paginationEl: ShallowRef<HTMLElement | null>;\n  checkboxEl: ShallowRef<{ $el: HTMLElement } | null>;\n  isPaginationEnabled: ComputedRef<boolean> | undefined;\n  isSelectable: Ref<boolean> | undefined;\n  isEmpty: ComputedRef<boolean> | undefined;\n}\n\nexport function useActionsWidth(options: UseActionsWidthOptions) {\n  const { toolbarEl, paginationEl, checkboxEl, isPaginationEnabled, isSelectable, isEmpty } = options;\n\n  const actionsWidth = ref<string | null>(null);\n  let toolbarResizeObserver: ResizeObserver | null = null;\n  let paginationResizeObserver: ResizeObserver | null = null;\n\n  const updateActionsWidth = () => {\n    if (!toolbarEl.value) return;\n\n    const toolbarWidth = toolbarEl.value.getBoundingClientRect().width;\n    let paginationWidth = 0;\n    let checkboxWidth = 0;\n\n    // Calculate pagination width if pagination is enabled\n    if (isPaginationEnabled?.value && paginationEl.value) {\n      paginationWidth = paginationEl.value.getBoundingClientRect().width;\n    }\n\n    // Calculate checkbox width if selectable and not empty\n    if (isSelectable?.value && !isEmpty?.value && checkboxEl.value?.$el) {\n      checkboxWidth = checkboxEl.value.$el.getBoundingClientRect().width;\n    }\n\n    // Get computed styles to calculate padding\n    const computedStyle = window.getComputedStyle(toolbarEl.value);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n\n    const availableWidth = Math.max(0, toolbarWidth - paginationWidth - checkboxWidth - paddingLeft - paddingRight);\n    actionsWidth.value = `${availableWidth}px`;\n  };\n\n  const setupResizeObserver = () => {\n    if (!toolbarEl.value) return;\n\n    // Observe toolbar element\n    toolbarResizeObserver = new ResizeObserver(() => {\n      nextTick(() => {\n        updateActionsWidth();\n      });\n    });\n    toolbarResizeObserver.observe(toolbarEl.value);\n\n    // Observe pagination element if it exists\n    if (paginationEl.value) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(paginationEl.value);\n    }\n  };\n\n  const cleanupResizeObserver = () => {\n    if (toolbarResizeObserver) {\n      toolbarResizeObserver.disconnect();\n      toolbarResizeObserver = null;\n    }\n    if (paginationResizeObserver) {\n      paginationResizeObserver.disconnect();\n      paginationResizeObserver = null;\n    }\n  };\n\n  onMounted(() => {\n    nextTick(() => {\n      updateActionsWidth();\n      setupResizeObserver();\n    });\n  });\n\n  onBeforeUnmount(() => {\n    cleanupResizeObserver();\n  });\n\n  // Watch for changes in conditions that affect element visibility\n  watch([isPaginationEnabled, isSelectable, isEmpty], () => {\n    nextTick(() => {\n      updateActionsWidth();\n    });\n  });\n\n  // Watch for pagination element changes to setup/cleanup observer\n  watch(paginationEl, (newPaginationEl) => {\n    // Cleanup old observer if it exists\n    if (paginationResizeObserver) {\n      paginationResizeObserver.disconnect();\n      paginationResizeObserver = null;\n    }\n\n    // Setup new observer if pagination element exists\n    if (newPaginationEl) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(newPaginationEl);\n    }\n  });\n\n  return {\n    actionsWidth,\n    updateActionsWidth,\n  };\n}\n","<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, useCssModule, useTemplateRef } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import MoreActions from '../MoreActions/MoreActions.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n  import { useActionsWidth } from './useActionsWidth';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n\n    /**\n     * The number of selected items. Used to display selected items count in the toolbar.\n     */\n    selectedItemsCount?: number;\n\n    /**\n     * When DataView has tabs above it, we need to remove the top left rounded corner\n     */\n    hasTabsAbove?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: undefined,\n    someRowsSelected: false,\n    selectedItemsCount: undefined,\n    hasTabsAbove: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  // Refs for width calculation\n  const toolbarRef = useTemplateRef('toolbarEl');\n  const paginationRef = useTemplateRef('paginationEl');\n  const checkboxRef = useTemplateRef('checkboxEl');\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginateNextDisabled,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n    isEmpty,\n    isLoading,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n  const classes = useCssModule();\n\n  const { actionsWidth } = useActionsWidth({\n    toolbarEl: toolbarRef,\n    paginationEl: paginationRef,\n    checkboxEl: checkboxRef,\n    isPaginationEnabled,\n    isSelectable,\n    isEmpty,\n  });\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (props.radius) {\n      return props.radius;\n    }\n\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      if (props.hasTabsAbove) {\n        return 'rounded-top-right';\n      }\n\n      return 'rounded-top';\n    }\n\n    return 'rounded';\n  });\n\n  const pageStats = usePaginationStats({ currentPage, pageSize, totalItems: totalDataCount });\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    ref=\"toolbarEl\"\n    class=\"stash-data-view-toolbar flex min-h-15 items-center justify-between bg-white py-1.5 shadow\"\n    :class=\"{\n      'border-t border-ice-200': isWithinModule,\n      'rounded-tr': computedRadius === 'rounded-top-right',\n      rounded: computedRadius === 'rounded',\n      'rounded-t': computedRadius === 'rounded-top',\n      'mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'px-3': density === 'compact',\n      'px-3 lg:px-6': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"flex place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable && !isEmpty\"\n        ref=\"checkboxEl\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        :disabled=\"isLoading\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <template v-if=\"$slots['more-actions']\">\n        <MoreActions\n          more-button-align=\"together\"\n          :width=\"actionsWidth || undefined\"\n          actions-container-class=\"flex items-center gap-x-2 lg:mr-6 lg:gap-x-6\"\n        >\n          <template #toggle=\"{ toggle }\">\n            <Button\n              icon-label\n              class=\"text-blue-500\"\n              data-test=\"stash-data-view-sort-button|sort-menu-button\"\n              @click=\"toggle\"\n            >\n              <IconLabel icon=\"ellipsis\" stacked> More </IconLabel>\n            </Button>\n          </template>\n          <slot></slot>\n          <template #more-actions>\n            <slot name=\"more-actions\"></slot>\n          </template>\n        </MoreActions>\n      </template>\n      <template v-else>\n        <div :class=\"classes.actions\" class=\"stash-data-view-toolbar__actions flex items-center gap-x-2 lg:gap-x-4\">\n          <slot></slot>\n        </div>\n      </template>\n    </div>\n\n    <!-- Pagination -->\n    <div\n      v-if=\"isPaginationEnabled\"\n      ref=\"paginationEl\"\n      class=\"stash-data-view-toolbar__pagination flex shrink-0 items-center\"\n    >\n      <slot name=\"selected-stats\">\n        <span v-if=\"props.someRowsSelected && props.selectedItemsCount !== undefined\" class=\"mx-1.5\">\n          {{ t('ll.listView.numberOfTotalSelected', { num: props.selectedItemsCount, total: totalDataCount }) }}\n        </span>\n      </slot>\n      <slot name=\"page-stats\">\n        <span v-if=\"!props.hidePageStats\" class=\"mx-1.5 hidden md:block\">\n          {{ t('ll.pageStats', pageStats) }}\n        </span>\n      </slot>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          :aria-label=\"t('ll.previous')\"\n          class=\"size-9 p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"isLoading || currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" size=\"dense\" />\n        </Button>\n        <Button\n          icon\n          :aria-label=\"t('ll.next')\"\n          class=\"size-9 p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"isLoading || isPaginateNextDisabled || currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" size=\"dense\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .actions :global(.stash-button) {\n      min-width: auto;\n      padding: 0 0.5rem;\n\n      &:first-child {\n        margin-left: -0.5rem;\n      }\n    }\n  }\n</style>\n"],"names":["useActionsWidth","options","toolbarEl","paginationEl","checkboxEl","isPaginationEnabled","isSelectable","isEmpty","actionsWidth","ref","toolbarResizeObserver","paginationResizeObserver","updateActionsWidth","toolbarWidth","paginationWidth","checkboxWidth","_a","computedStyle","paddingLeft","paddingRight","availableWidth","setupResizeObserver","nextTick","cleanupResizeObserver","onMounted","onBeforeUnmount","watch","newPaginationEl","props","__props","emit","__emit","toolbarRef","useTemplateRef","paginationRef","checkboxRef","isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginateNextDisabled","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","classes","useCssModule","computedRadius","computed","pageStats","usePaginationStats","onSelect","onBeforeMount"],"mappings":"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"}
+{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/useActionsWidth.ts","../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["import { ComputedRef, nextTick, onBeforeUnmount, onMounted, Ref, ref, ShallowRef, watch } from 'vue';\n\nexport interface UseActionsWidthOptions {\n  toolbarEl: ShallowRef<HTMLElement | null>;\n  paginationEl: ShallowRef<HTMLElement | null>;\n  checkboxEl: ShallowRef<{ $el: HTMLElement } | null>;\n  isPaginationEnabled: ComputedRef<boolean> | undefined;\n  isSelectable: Ref<boolean> | undefined;\n  isEmpty: ComputedRef<boolean> | undefined;\n}\n\nexport function useActionsWidth(options: UseActionsWidthOptions) {\n  const { toolbarEl, paginationEl, checkboxEl, isPaginationEnabled, isSelectable, isEmpty } = options;\n\n  const actionsWidth = ref<string | null>(null);\n  let toolbarResizeObserver: ResizeObserver | null = null;\n  let paginationResizeObserver: ResizeObserver | null = null;\n\n  const updateActionsWidth = () => {\n    if (!toolbarEl.value) return;\n\n    const toolbarWidth = toolbarEl.value.getBoundingClientRect().width;\n    let paginationWidth = 0;\n    let checkboxWidth = 0;\n\n    // Calculate pagination width if pagination is enabled\n    if (isPaginationEnabled?.value && paginationEl.value) {\n      paginationWidth = paginationEl.value.getBoundingClientRect().width;\n    }\n\n    // Calculate checkbox width if selectable and not empty\n    if (isSelectable?.value && !isEmpty?.value && checkboxEl.value?.$el) {\n      checkboxWidth = checkboxEl.value.$el.getBoundingClientRect().width;\n    }\n\n    // Get computed styles to calculate padding\n    const computedStyle = window.getComputedStyle(toolbarEl.value);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n\n    const availableWidth = Math.max(0, toolbarWidth - paginationWidth - checkboxWidth - paddingLeft - paddingRight);\n    actionsWidth.value = `${availableWidth}px`;\n  };\n\n  const setupResizeObserver = () => {\n    if (!toolbarEl.value) return;\n\n    // Observe toolbar element\n    toolbarResizeObserver = new ResizeObserver(() => {\n      nextTick(() => {\n        updateActionsWidth();\n      });\n    });\n    toolbarResizeObserver.observe(toolbarEl.value);\n\n    // Observe pagination element if it exists\n    if (paginationEl.value) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(paginationEl.value);\n    }\n  };\n\n  const cleanupResizeObserver = () => {\n    if (toolbarResizeObserver) {\n      toolbarResizeObserver.disconnect();\n      toolbarResizeObserver = null;\n    }\n    if (paginationResizeObserver) {\n      paginationResizeObserver.disconnect();\n      paginationResizeObserver = null;\n    }\n  };\n\n  onMounted(() => {\n    nextTick(() => {\n      updateActionsWidth();\n      setupResizeObserver();\n    });\n  });\n\n  onBeforeUnmount(() => {\n    cleanupResizeObserver();\n  });\n\n  // Watch for changes in conditions that affect element visibility\n  watch([isPaginationEnabled, isSelectable, isEmpty], () => {\n    nextTick(() => {\n      updateActionsWidth();\n    });\n  });\n\n  // Watch for pagination element changes to setup/cleanup observer\n  watch(paginationEl, (newPaginationEl) => {\n    // Cleanup old observer if it exists\n    if (paginationResizeObserver) {\n      paginationResizeObserver.disconnect();\n      paginationResizeObserver = null;\n    }\n\n    // Setup new observer if pagination element exists\n    if (newPaginationEl) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(newPaginationEl);\n    }\n  });\n\n  return {\n    actionsWidth,\n    updateActionsWidth,\n  };\n}\n","<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, useCssModule, useTemplateRef } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import MoreActions from '../MoreActions/MoreActions.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n  import { useActionsWidth } from './useActionsWidth';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n\n    /**\n     * The number of selected items. Used to display selected items count in the toolbar.\n     */\n    selectedItemsCount?: number;\n\n    /**\n     * When DataView has tabs above it, we need to remove the top left rounded corner\n     */\n    hasTabsAbove?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: undefined,\n    someRowsSelected: false,\n    selectedItemsCount: undefined,\n    hasTabsAbove: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  // Refs for width calculation\n  const toolbarRef = useTemplateRef('toolbarEl');\n  const paginationRef = useTemplateRef('paginationEl');\n  const checkboxRef = useTemplateRef('checkboxEl');\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginateNextDisabled,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n    isEmpty,\n    isLoading,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n  const classes = useCssModule();\n\n  const { actionsWidth } = useActionsWidth({\n    toolbarEl: toolbarRef,\n    paginationEl: paginationRef,\n    checkboxEl: checkboxRef,\n    isPaginationEnabled,\n    isSelectable,\n    isEmpty,\n  });\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (props.radius) {\n      return props.radius;\n    }\n\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      if (props.hasTabsAbove) {\n        return 'rounded-top-right';\n      }\n\n      return 'rounded-top';\n    }\n\n    return 'rounded';\n  });\n\n  const pageStats = usePaginationStats({ currentPage, pageSize, totalItems: totalDataCount });\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    ref=\"toolbarEl\"\n    class=\"stash-data-view-toolbar flex min-h-15 items-center justify-between bg-white py-1.5 shadow\"\n    :class=\"{\n      'border-t border-ice-200': isWithinModule,\n      'rounded-tr': computedRadius === 'rounded-top-right',\n      rounded: computedRadius === 'rounded',\n      'rounded-t': computedRadius === 'rounded-top',\n      'mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'px-3': density === 'compact',\n      'px-3 lg:px-6': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"flex place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable && !isEmpty\"\n        ref=\"checkboxEl\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        :disabled=\"isLoading\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <template v-if=\"$slots['more-actions']\">\n        <MoreActions\n          more-button-align=\"together\"\n          :width=\"actionsWidth || undefined\"\n          actions-container-class=\"flex items-center gap-x-2 lg:mr-6 lg:gap-x-6\"\n        >\n          <template #toggle=\"{ toggle }\">\n            <Button\n              icon-label\n              class=\"text-blue-500\"\n              data-test=\"stash-data-view-sort-button|sort-menu-button\"\n              @click=\"toggle\"\n            >\n              <IconLabel icon=\"ellipsis\" stacked> More </IconLabel>\n            </Button>\n          </template>\n          <slot></slot>\n          <template #more-actions>\n            <slot name=\"more-actions\"></slot>\n          </template>\n        </MoreActions>\n      </template>\n      <template v-else>\n        <div :class=\"classes.actions\" class=\"stash-data-view-toolbar__actions flex items-center gap-x-2 lg:gap-x-4\">\n          <slot></slot>\n        </div>\n      </template>\n    </div>\n\n    <!-- Pagination -->\n    <div\n      v-if=\"isPaginationEnabled\"\n      ref=\"paginationEl\"\n      class=\"stash-data-view-toolbar__pagination flex shrink-0 items-center\"\n    >\n      <slot name=\"selected-stats\">\n        <span v-if=\"props.someRowsSelected && props.selectedItemsCount !== undefined\" class=\"mx-1.5\">\n          {{ t('ll.listView.numberOfTotalSelected', { num: props.selectedItemsCount, total: totalDataCount }) }}\n        </span>\n      </slot>\n      <slot name=\"page-stats\">\n        <span v-if=\"!props.hidePageStats\" class=\"mx-1.5 hidden md:block\">\n          {{ t('ll.pageStats', pageStats) }}\n        </span>\n      </slot>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          :aria-label=\"t('ll.previous')\"\n          class=\"size-9 p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"isLoading || currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" size=\"dense\" />\n        </Button>\n        <Button\n          icon\n          :aria-label=\"t('ll.next')\"\n          class=\"size-9 p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"isLoading || isPaginateNextDisabled || currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" size=\"dense\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .actions :global(.stash-button) {\n      min-width: auto;\n      padding: 0 0.5rem;\n\n      &:first-child {\n        margin-left: -0.5rem;\n      }\n    }\n  }\n</style>\n"],"names":["useActionsWidth","options","toolbarEl","paginationEl","checkboxEl","isPaginationEnabled","isSelectable","isEmpty","actionsWidth","ref","toolbarResizeObserver","paginationResizeObserver","updateActionsWidth","toolbarWidth","paginationWidth","checkboxWidth","_a","computedStyle","paddingLeft","paddingRight","availableWidth","setupResizeObserver","nextTick","cleanupResizeObserver","onMounted","onBeforeUnmount","watch","newPaginationEl","props","__props","emit","__emit","toolbarRef","useTemplateRef","paginationRef","checkboxRef","isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginateNextDisabled","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","classes","useCssModule","computedRadius","computed","pageStats","usePaginationStats","onSelect","onBeforeMount","_createElementBlock","_unref","_createElementVNode","_hoisted_1","_createBlock","Checkbox","t","$slots","MoreActions","_withCtx","toggle","_createVNode","Button","IconLabel","_cache","_renderSlot","_ctx","_normalizeClass","_openBlock","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4","_Fragment","Icon"],"mappings":";;;;;;;;;;;;AAWO,SAASA,GAAgBC,GAAiC;AAC/D,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,YAAAC,GAAY,qBAAAC,GAAqB,cAAAC,GAAc,SAAAC,MAAYN,GAEtFO,IAAeC,EAAmB,IAAI;AAC5C,MAAIC,IAA+C,MAC/CC,IAAkD;AAEtD,QAAMC,IAAqB,MAAM;;AAC/B,QAAI,CAACV,EAAU,MAAO;AAEtB,UAAMW,IAAeX,EAAU,MAAM,sBAAA,EAAwB;AAC7D,QAAIY,IAAkB,GAClBC,IAAgB;AAGpB,IAAIV,KAAA,QAAAA,EAAqB,SAASF,EAAa,UAC7CW,IAAkBX,EAAa,MAAM,sBAAA,EAAwB,QAI3DG,KAAA,QAAAA,EAAc,SAAS,EAACC,KAAA,QAAAA,EAAS,YAASS,IAAAZ,EAAW,UAAX,QAAAY,EAAkB,SAC9DD,IAAgBX,EAAW,MAAM,IAAI,sBAAA,EAAwB;AAI/D,UAAMa,IAAgB,OAAO,iBAAiBf,EAAU,KAAK,GACvDgB,IAAc,WAAWD,EAAc,WAAW,KAAK,GACvDE,IAAe,WAAWF,EAAc,YAAY,KAAK,GAEzDG,IAAiB,KAAK,IAAI,GAAGP,IAAeC,IAAkBC,IAAgBG,IAAcC,CAAY;AAC9G,IAAAX,EAAa,QAAQ,GAAGY,CAAc;AAAA,EACxC,GAEMC,IAAsB,MAAM;AAChC,IAAKnB,EAAU,UAGfQ,IAAwB,IAAI,eAAe,MAAM;AAC/C,MAAAY,EAAS,MAAM;AACb,QAAAV,EAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC,GACDF,EAAsB,QAAQR,EAAU,KAAK,GAGzCC,EAAa,UACfQ,IAA2B,IAAI,eAAe,MAAM;AAClD,MAAAW,EAAS,MAAM;AACb,QAAAV,EAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC,GACDD,EAAyB,QAAQR,EAAa,KAAK;AAAA,EAEvD,GAEMoB,IAAwB,MAAM;AAClC,IAAIb,MACFA,EAAsB,WAAA,GACtBA,IAAwB,OAEtBC,MACFA,EAAyB,WAAA,GACzBA,IAA2B;AAAA,EAE/B;AAEA,SAAAa,EAAU,MAAM;AACd,IAAAF,EAAS,MAAM;AACb,MAAAV,EAAA,GACAS,EAAA;AAAA,IACF,CAAC;AAAA,EACH,CAAC,GAEDI,EAAgB,MAAM;AACpB,IAAAF,EAAA;AAAA,EACF,CAAC,GAGDG,EAAM,CAACrB,GAAqBC,GAAcC,CAAO,GAAG,MAAM;AACxD,IAAAe,EAAS,MAAM;AACb,MAAAV,EAAA;AAAA,IACF,CAAC;AAAA,EACH,CAAC,GAGDc,EAAMvB,GAAc,CAACwB,MAAoB;AAEvC,IAAIhB,MACFA,EAAyB,WAAA,GACzBA,IAA2B,OAIzBgB,MACFhB,IAA2B,IAAI,eAAe,MAAM;AAClD,MAAAW,EAAS,MAAM;AACb,QAAAV,EAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC,GACDD,EAAyB,QAAQgB,CAAe;AAAA,EAEpD,CAAC,GAEM;AAAA,IACL,cAAAnB;AAAA,IACA,oBAAAI;AAAA,EAAA;AAEJ;;;;;;;;;;;;;;;;;;;;;;;ACrEE,UAAMgB,IAAQC,GASRC,IAAOC,GAKPC,IAAaC,EAAe,WAAW,GACvCC,IAAgBD,EAAe,cAAc,GAC7CE,IAAcF,EAAe,YAAY,GAEzC;AAAA,MACJ,gBAAAG;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,wBAAAC;AAAA,MACA,qBAAApC;AAAA,MACA,cAAAC;AAAA,MACA,WAAAoC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAAAvC;AAAA,MACA,WAAAwC;AAAA,IAAA,IACEC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAczC,EAAI,CAAC,GACnB0C,IAAUC,EAAA,GAEV,EAAE,cAAA5C,EAAA,IAAiBR,GAAgB;AAAA,MACvC,WAAWgC;AAAA,MACX,cAAcE;AAAA,MACd,YAAYC;AAAA,MACZ,qBAAA9B;AAAA,MACA,cAAAC;AAAA,MACA,SAAAC;AAAA,IAAA,CACD,GAEK8C,IAAiBC,GAA0B,MAC3C1B,EAAM,SACDA,EAAM,SAGXQ,EAAe,QACV,SAGLC,EAAgB,UAAU,UACxBT,EAAM,eACD,sBAGF,gBAGF,SACR,GAEK2B,IAAYC,GAAmB,EAAE,aAAAjB,GAAa,UAAAI,GAAU,YAAYC,GAAgB;AAE1F,aAASa,IAAW;AAClB,MAAA3B,EAAK,QAAQ,GAOboB,EAAY;AAAA,IACd;AAEA,WAAAQ,GAAc,MAAM;AAClB,MAAIlB,MACFA,EAAW,QAAQ;AAAA,IAEvB,CAAC,mBAIDmB,EA8FM,OAAA;AAAA,MA7FJ,KAAI;AAAA,MACJ,UAAM,6FAA2F;AAAA,mCACtDC,EAAAxB,CAAA;AAAA,sBAAoCiB,EAAA,UAAc;AAAA,iBAAyCA,EAAA,UAAc;AAAA,qBAAmCA,EAAA,UAAc;AAAA,QAAkC,QAAAO,EAAAvB,CAAA,kBAAgCuB,EAAAxB,CAAA;AAAA,gBAA8BwB,EAAAtB,CAAA,MAAO;AAAA,wBAAsCsB,EAAAtB,CAAA,MAAO;AAAA,MAAA;MASzV,aAAU;AAAA,IAAA;MAEVuB,GAuCM,OAvCNC,IAuCM;AAAA,QArCIF,EAAAtD,CAAA,MAAiBsD,EAAArD,CAAA,UADzBwD,EAUEC,IAAA;AAAA,UARA,KAAI;AAAA,UACH,KAAKd,EAAA;AAAA,UACL,SAAStB,EAAM;AAAA,UACf,eAAeA,EAAM,oBAAgB,CAAKA,EAAM;AAAA,UAChD,OAAOgC,EAAAK,CAAA,EAAC,cAAA;AAAA,UACR,UAAUL,EAAAb,CAAA;AAAA,UACV,0BAAsBU;AAAA,UACtB,oBAAgBA;AAAA,QAAA;QAEHS,EAAAA,OAAM,cAAA,UACpBH,EAmBcI,IAAA;AAAA;UAlBZ,qBAAkB;AAAA,UACjB,OAAOP,EAAApD,CAAA,KAAgB;AAAA,UACxB,2BAAwB;AAAA,QAAA;UAEb,QAAM4D,EACf,CAOS,EARU,QAAAC,QAAM;AAAA,YACzBC,EAOSC,GAAA;AAAA,cANP,cAAA;AAAA,cACA,OAAM;AAAA,cACN,aAAU;AAAA,cACT,SAAOF;AAAA,YAAA;yBAER,MAAqD;AAAA,gBAArDC,EAAqDE,IAAA;AAAA,kBAA1C,MAAK;AAAA,kBAAW,SAAA;AAAA,gBAAA;6BAAQ,MAAM,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,uBAAN,UAAM,EAAA;AAAA,kBAAA;;;;;;;UAIlC,kBACT,MAAiC;AAAA,YAAjCC,EAAiCC,EAAA,QAAA,cAAA;AAAA,UAAA;qBAFnC,MAAa;AAAA,YAAbD,EAAaC,EAAA,QAAA,SAAA;AAAA,UAAA;;kCAOfhB,EAEM,OAAA;AAAA;UAFA,OAAKiB,EAAA,CAAEhB,EAAAT,CAAA,EAAQ,SAAe,uEAAuE,CAAA;AAAA,QAAA;UACzGuB,EAAaC,EAAA,QAAA,SAAA;AAAA,QAAA;;MAOXf,EAAAvD,CAAA,KADRwE,KAAAlB,EAqCM,OArCNmB,IAqCM;AAAA,QAhCJJ,EAIOC,gCAJP,MAIO;AAAA,UAHO/C,EAAM,oBAAoBA,EAAM,uBAAuB,eAAnE+B,EAEO,QAFPoB,IAEOC,EADFpB,EAAAK,CAAA,8CAA8CrC,EAAM,oBAAkB,OAASgC,EAAAhB,CAAA,EAAA,CAAc,CAAA,GAAA,CAAA;;QAGpG8B,EAIOC,4BAJP,MAIO;AAAA,UAHQ/C,EAAM,6BAAnBiD,EAAA,GAAAlB,EAEO,QAFPsB,IAEOD,EADFpB,EAAAK,CAAA,kBAAkBL,EAAAL,CAAA,CAAS,CAAA,GAAA,CAAA;AAAA;QAGlBK,EAAAlB,CAAA,IAAS,UAAzBiB,EAqBWuB,IAAA,EAAA,KAAA,KAAA;AAAA,UApBTZ,EASSC,GAAA;AAAA,YARP,MAAA;AAAA,YACC,cAAYX,EAAAK,CAAA,EAAC,aAAA;AAAA,YACd,OAAM;AAAA,YACN,aAAU;AAAA,YACT,UAAUL,EAAAb,CAAA,KAAaa,EAAArB,CAAA,MAAW;AAAA,YAClC,gCAAOqB,EAAAf,CAAA,EAAU,EAAA,YAAA,IAAA;AAAA,UAAA;uBAElB,MAAyC;AAAA,cAAzCyB,EAAyCa,GAAA;AAAA,gBAAnC,MAAK;AAAA,gBAAe,MAAK;AAAA,cAAA;;;;UAEjCb,EASSC,GAAA;AAAA,YARP,MAAA;AAAA,YACC,cAAYX,EAAAK,CAAA,EAAC,SAAA;AAAA,YACd,OAAM;AAAA,YACN,aAAU;AAAA,YACT,UAAUL,EAAAb,CAAA,KAAaa,QAA0BA,EAAArB,CAAA,MAAgBqB,EAAAlB,CAAA;AAAA,YACjE,gCAAOkB,EAAAd,CAAA,EAAU,EAAA,YAAA,IAAA;AAAA,UAAA;uBAElB,MAA0C;AAAA,cAA1CwB,EAA0Ca,GAAA;AAAA,gBAApC,MAAK;AAAA,gBAAgB,MAAK;AAAA,cAAA;;;;;;;;;;;;;"}