@leaflink/stash 42.5.0 → 42.5.2

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 } 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  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   * 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   * 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    pageSize?: number;\n\n    /**\n     * Opt-out of displaying pagination. Hides the pagination buttons and page stats.\n     */\n    disablePagination?: boolean;\n\n    /**\n     * The total number of records available.\n     * Used to auto-enable pagination when results exist.\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     * 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    variant: undefined,\n  });\n\n  const emit =\n    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  // #region pagination\n  const internalPage = ref(1);\n  const isPaginationEnabled = computed(() => !props.disablePagination && props.totalDataCount > 0);\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 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      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      isLoading: computed(() => props.isLoading),\n      isEmpty: computed(() => props.data.length === 0),\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 tw-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=\"isPaginationEnabled && !isWithinModule && pageCount > 1\"\n      class=\"tw-mt-6\"\n      :class=\"classes.paginate\"\n      :current-page=\"internalPage\"\n      :list-length=\"props.totalDataCount\"\n      :page-size=\"props.pageSize\"\n      @set-page=\"(page: number) => setPage(page, { shouldEmit: true })\"\n    />\n  </div>\n</template>\n\n<style module>\n  .paginate ul {\n    margin: 0;\n  }\n</style>\n"],"names":["deserializeSortValue","sort","order","serializeSortValue","id","getNextSort","newId","newOrder","oldId","oldOrder","DataViewVariant","classes","useCssModule","rootRef","ref","moduleInjection","inject","MODULE_INJECTION","computedVariant","computed","props","_a","isWithinModule","internalPage","isPaginationEnabled","pageCount","setPage","page","shouldEmit","emitUpdate","emit","_b","goPrevPage","goNextPage","watch","internalSort","internalSortId","internalSortOrder","updateCurrentSort","sortId","sortOrder","nextSort","internalSearch","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 } 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  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   * 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   * 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    pageSize?: number;\n\n    /**\n     * Opt-out of displaying pagination. Hides the pagination buttons and page stats.\n     */\n    disablePagination?: boolean;\n\n    /**\n     * The total number of records available.\n     * Used to auto-enable pagination when results exist.\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     * 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    variant: undefined,\n  });\n\n  const emit =\n    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  // #region pagination\n  const internalPage = ref(1);\n  const isPaginationEnabled = computed(() => !props.disablePagination && props.totalDataCount > 0);\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 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      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      isLoading: computed(() => props.isLoading),\n      isEmpty: computed(() => props.data.length === 0),\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 tw-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=\"isPaginationEnabled && !isWithinModule && pageCount > 1\"\n      class=\"tw-mt-6\"\n      :class=\"classes.paginate\"\n      :current-page=\"internalPage\"\n      :list-length=\"props.totalDataCount\"\n      :page-size=\"props.pageSize\"\n      @set-page=\"(page: number) => setPage(page, { shouldEmit: true })\"\n    />\n  </div>\n</template>\n\n<style module>\n  .paginate ul {\n    margin: 0;\n  }\n</style>\n"],"names":["deserializeSortValue","sort","order","serializeSortValue","id","getNextSort","newId","newOrder","oldId","oldOrder","DataViewVariant","classes","useCssModule","rootRef","ref","moduleInjection","inject","MODULE_INJECTION","computedVariant","computed","props","_a","isWithinModule","internalPage","isPaginationEnabled","pageCount","setPage","page","shouldEmit","emitUpdate","emit","_b","goPrevPage","goNextPage","watch","internalSort","internalSortId","internalSortOrder","updateCurrentSort","sortId","sortOrder","nextSort","internalSearch","updateCurrentSearch","searchTerm","internalFilters","updateCurrentFilters","newFilters","cloneDeep","provide","DATA_VIEW_INJECTION","__expose"],"mappings":"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"}

package/dist/DataViewFilters.js

@@ -1,80 +1,70 @@
-import { ref as x, computed as D, defineComponent as R, useSlots as W, inject as j, provide as M, watch as O, openBlock as p, createBlock as v, normalizeClass as J, unref as e, withCtx as a, mergeProps as P, createCommentVNode as c, createElementBlock as z, createElementVNode as C, renderSlot as V, createVNode as I, createTextVNode as h, toDisplayString as _ } from "vue";
+import { ref as x, computed as D, defineComponent as R, useSlots as W, inject as j, provide as M, watch as O, openBlock as c, createBlock as v, normalizeClass as J, unref as t, withCtx as a, mergeProps as P, createCommentVNode as p, createElementBlock as z, createElementVNode as C, renderSlot as V, createVNode as I, createTextVNode as h, toDisplayString as _ } from "vue";
 import Q from "./useMediaQuery.js";
 import { SCREEN_SIZES as U } from "./constants.js";
 import { t as n } from "./locale.js";
 import { _ as Z } from "./Box.vue_vue_type_script_setup_true_lang-69e5176b.js";
 import A from "./Button.js";
-import T from "./Icon.js";
+import T from "lodash-es/cloneDeep";
+import $ from "./Icon.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
-import { D as $ } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import { D as G } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import q from "./FilterChip.js";
 import { _ as H } from "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
 import K from "./Modal.js";
 import X from "./SearchBar.js";
 import { D as Y } from "./DataViewFilters.keys-c80ffabe.js";
-import { c as G } from "./cloneDeep-5bc375b0.js";
 import { i as L } from "./isDefined-2ce6cde4.js";
-import "./get-27d90892.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
-import "./_MapCache-65811284.js";
+import "lodash-es/get";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Chip.js";
 import "./colors-13e95ebf.js";
 import "./utils/colorScheme.js";
 import "./Backdrop.js";
 import "./Input.js";
+import "lodash-es/isNil";
 import "./utils/i18n.js";
-import "./Field.vue_vue_type_script_setup_true_lang-c864abd3.js";
-import "./_Uint8Array-06e4d083.js";
-import "./isArrayLike-09233e52.js";
-import "./_initCloneObject-161353b9.js";
-import "./_baseAssignValue-dd1499b4.js";
-import "./_getPrototype-3e6fccd6.js";
-import "./_overArg-6d920d99.js";
-import "./_getAllKeys-5e735d41.js";
-import "./_getTag-4db47fa6.js";
-function zt({
+import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
+function Te({
   schema: i,
-  dataViewRef: m
+  dataViewRef: w
 }) {
-  const t = x({}), u = x({});
+  const e = x({}), u = x({});
   for (const l in i)
-    t.value[l] = i[l].defaultValue, u.value[l] = i[l].defaultValue;
-  const F = m;
+    e.value[l] = i[l].defaultValue, u.value[l] = i[l].defaultValue;
+  const F = w;
   function B() {
-    t.value = G(u.value), F.value.updateCurrentFilters(t.value, { shouldEmit: !0 });
+    e.value = T(u.value), F.value.updateCurrentFilters(e.value, { shouldEmit: !0 });
   }
   function g() {
     for (const l in i)
-      t.value[l] = i[l].defaultValue, u.value[l] = i[l].defaultValue;
-    F.value.updateCurrentFilters(t.value, { shouldEmit: !0 });
+      e.value[l] = i[l].defaultValue, u.value[l] = i[l].defaultValue;
+    F.value.updateCurrentFilters(e.value, { shouldEmit: !0 });
   }
   function b(l) {
     for (const r in i)
-      i[r].group === l && (t.value[r] = i[r].defaultValue, u.value[r] = i[r].defaultValue);
-    F.value.updateCurrentFilters(t.value, { shouldEmit: !0 });
+      i[r].group === l && (e.value[r] = i[r].defaultValue, u.value[r] = i[r].defaultValue);
+    F.value.updateCurrentFilters(e.value, { shouldEmit: !0 });
   }
   function E() {
-    u.value = G(t.value);
+    u.value = T(e.value);
   }
   const N = D(() => {
     var r;
     const l = {};
-    for (const w in i) {
-      const o = i[w], f = t.value[w];
+    for (const m in i) {
+      const o = i[m], f = e.value[m];
       (((r = o.isActive) == null ? void 0 : r.call(o, f)) || L(f)) && o.group && (l[o.group] = (l[o.group] ?? 0) + 1);
     }
     return l;
   }), k = D(() => {
     var r;
     let l = 0;
-    for (const w in i) {
-      const o = i[w], f = t.value[w];
+    for (const m in i) {
+      const o = i[m], f = e.value[m];
       (((r = o.isActive) == null ? void 0 : r.call(o, f)) || L(f)) && (l += 1);
     }
     return l;
@@ -87,14 +77,14 @@ function zt({
     undoWorkingFilters: E,
     activeFiltersCounts: N,
     totalActiveFiltersCount: k,
-    appliedFilters: t,
+    appliedFilters: e,
     workingFilters: u
   };
 }
-const tt = {
+const ee = {
   key: 1,
   class: "tw-col-span-12 tw-row-start-2 md:tw-row-start-1 md:tw-col-start-7 lg:tw-col-start-5 lg:tw-col-span-8"
-}, et = { class: "tw-hidden md:tw-block" }, lt = { class: "tw-flex tw-gap-4" }, rt = { class: "tw-inline-flex tw-items-center tw-gap-3" }, st = { class: "tw-flex tw-flex-col-reverse lg:tw-flex-row lg:tw-justify-end tw-gap-gutter" }, Qt = /* @__PURE__ */ R({
+}, te = { class: "tw-hidden md:tw-block" }, le = { class: "tw-flex tw-gap-4" }, re = { class: "tw-inline-flex tw-items-center tw-gap-3" }, se = { class: "tw-flex tw-flex-col-reverse lg:tw-flex-row lg:tw-justify-end tw-gap-gutter" }, $e = /* @__PURE__ */ R({
   __name: "DataViewFilters",
   props: {
     filtersLabelText: { default: n("ll.filterBy") },
@@ -107,72 +97,72 @@ const tt = {
     activeGroup: { default: "" }
   },
   emits: ["open-drawer", "dismiss", "previous", "reset-group", "reset-all"],
-  setup(i, { emit: m }) {
-    const t = i, u = W(), F = Q(`(min-width: ${U.lg})`), {
+  setup(i, { emit: w }) {
+    const e = i, u = W(), F = Q(`(min-width: ${U.lg})`), {
       density: B,
       isLoading: g,
       isWithinModule: b,
       currentSearch: E,
       updateCurrentSearch: N
-    } = j($.key, $.defaults);
-    M(Y.key, { useFiltersInstance: t.useFiltersInstance });
+    } = j(G.key, G.defaults);
+    M(Y.key, { useFiltersInstance: e.useFiltersInstance });
     const k = D(() => {
       var s;
-      return ((s = t.useFiltersInstance) == null ? void 0 : s.totalActiveFiltersCount.value) ?? 0;
+      return ((s = e.useFiltersInstance) == null ? void 0 : s.totalActiveFiltersCount.value) ?? 0;
     }), l = D(
       () => {
         var s;
-        return ((s = t.useFiltersInstance) == null ? void 0 : s.activeFiltersCounts.value[t.activeGroup]) ?? 0;
+        return ((s = e.useFiltersInstance) == null ? void 0 : s.activeFiltersCounts.value[e.activeGroup]) ?? 0;
       }
     ), r = x(!1);
-    async function w() {
+    async function m() {
       var d, y;
-      const { preventDismiss: s } = await ((d = t.onApply) == null ? void 0 : d.call(t)) || ((y = t.useFiltersInstance) == null ? void 0 : y.applyFilters()) || {};
+      const { preventDismiss: s } = await ((d = e.onApply) == null ? void 0 : d.call(e)) || ((y = e.useFiltersInstance) == null ? void 0 : y.applyFilters()) || {};
       s || (r.value = !1);
     }
     function o() {
       var s;
-      (s = t.useFiltersInstance) == null || s.resetFilterGroup(t.activeGroup), m("reset-group"), r.value = !1;
+      (s = e.useFiltersInstance) == null || s.resetFilterGroup(e.activeGroup), w("reset-group"), r.value = !1;
     }
     function f() {
       var s;
-      (s = t.useFiltersInstance) == null || s.resetAllFilters(), m("reset-all"), r.value = !1;
+      (s = e.useFiltersInstance) == null || s.resetAllFilters(), w("reset-all"), r.value = !1;
     }
     function S() {
       var s;
-      (s = t.useFiltersInstance) == null || s.undoWorkingFilters(), r.value = !1, m("dismiss");
+      (s = e.useFiltersInstance) == null || s.undoWorkingFilters(), r.value = !1, w("dismiss");
     }
     return O(r, () => {
-      r.value && m("open-drawer");
-    }), (s, d) => (p(), v(Z, {
-      class: J(["stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6", { "lg:tw-p-6": e(B) === "comfortable", "tw-mb-3": !e(b) }]),
-      radius: e(b) ? "none" : "rounded",
+      r.value && w("open-drawer");
+    }), (s, d) => (c(), v(Z, {
+      class: J(["stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6", { "lg:tw-p-6": t(B) === "comfortable", "tw-mb-3": !t(b) }]),
+      radius: t(b) ? "none" : "rounded",
       "data-test": "stash-data-view-filters",
       "disable-padding": ""
     }, {
       default: a(() => [
-        t.showSearch ? (p(), v(X, P({
+        e.showSearch ? (c(), v(X, P({
           key: 0,
           class: "tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-4",
           "data-test": "stash-data-view-filters|search-bar",
-          "is-loading": e(g),
-          label: e(n)("ll.search"),
-          "model-value": e(E)
-        }, t.searchBarProps, {
-          onSearch: d[0] || (d[0] = (y) => e(N)(y, { shouldEmit: !0 }))
-        }), null, 16, ["is-loading", "label", "model-value"])) : c("", !0),
-        e(u).default ? (p(), z("div", tt, [
-          C("div", et, [
+          "is-loading": t(g),
+          label: t(n)("ll.search"),
+          "model-value": t(E)
+        }, e.searchBarProps, {
+          onSearch: d[0] || (d[0] = (y) => t(N)(y, { shouldEmit: !0 }))
+        }), null, 16, ["is-loading", "label", "model-value"])) : p("", !0),
+        t(u).default ? (c(), z("div", ee, [
+          C("div", te, [
             V(s.$slots, "filters-label", {}, () => [
               I(H, null, {
                 default: a(() => [
-                  h(_(t.filtersLabelText), 1)
+                  h(_(e.filtersLabelText), 1)
                 ]),
                 _: 1
               })
             ])
           ]),
-          C("div", lt, [
+          C("div", le, [
             I(q, {
               secondary: "",
               class: "!tw-flex tw-w-full tw-justify-center tw-gap-4 md:!tw-inline-flex md:tw-w-auto",
@@ -181,94 +171,94 @@ const tt = {
               onClick: d[1] || (d[1] = (y) => r.value = !0)
             }, {
               default: a(() => [
-                C("span", rt, [
-                  I(T, {
+                C("span", re, [
+                  I($, {
                     name: "filter-line",
                     class: "tw-text-ice-700"
                   }),
-                  C("span", null, _(e(n)("ll.filters")), 1)
+                  C("span", null, _(t(n)("ll.filters")), 1)
                 ])
               ]),
               _: 1
             }, 8, ["filter-count"]),
-            e(F) ? V(s.$slots, "default", { key: 0 }) : c("", !0),
-            k.value > 0 && e(F) ? (p(), v(A, {
+            t(F) ? V(s.$slots, "default", { key: 0 }) : p("", !0),
+            k.value > 0 && t(F) ? (c(), v(A, {
               key: 1,
               inline: "",
               onClick: f
             }, {
               default: a(() => [
-                h(_(e(n)("ll.resetAll")), 1)
+                h(_(t(n)("ll.resetAll")), 1)
               ]),
               _: 1
-            })) : c("", !0)
+            })) : p("", !0)
           ])
-        ])) : c("", !0),
-        e(u).drawer ? (p(), v(K, P({
+        ])) : p("", !0),
+        t(u).drawer ? (c(), v(K, P({
           key: 2,
           "data-test": "stash-data-view-filters|drawer",
           "disable-body-padding": "",
           position: "right",
           "is-open": r.value,
-          title: e(n)("ll.allFilters")
-        }, t.drawerProps, { onDismiss: S }), {
+          title: t(n)("ll.allFilters")
+        }, e.drawerProps, { onDismiss: S }), {
           headerAction: a(() => [
-            t.showDrawerPreviousButton ? (p(), v(A, {
+            e.showDrawerPreviousButton ? (c(), v(A, {
               key: 0,
               icon: "",
               class: "tw-text-ice-100",
               "data-test": "stash-data-view-filters|drawer-previous-button",
-              "aria-label": e(n)("ll.previous"),
-              title: e(n)("ll.previous"),
-              onClick: d[2] || (d[2] = (y) => m("previous"))
+              "aria-label": t(n)("ll.previous"),
+              title: t(n)("ll.previous"),
+              onClick: d[2] || (d[2] = (y) => w("previous"))
             }, {
               default: a(() => [
-                I(T, { name: "chevron-left" })
+                I($, { name: "chevron-left" })
               ]),
               _: 1
-            }, 8, ["aria-label", "title"])) : c("", !0)
+            }, 8, ["aria-label", "title"])) : p("", !0)
           ]),
           footer: a(() => [
-            C("div", st, [
-              !t.showDrawerPreviousButton && k.value > 0 ? (p(), v(A, {
+            C("div", se, [
+              !e.showDrawerPreviousButton && k.value > 0 ? (c(), v(A, {
                 key: 0,
                 secondary: "",
-                disabled: e(g),
+                disabled: t(g),
                 onClick: f
               }, {
                 default: a(() => [
-                  h(_(e(n)("ll.resetAll")), 1)
+                  h(_(t(n)("ll.resetAll")), 1)
                 ]),
                 _: 1
-              }, 8, ["disabled"])) : c("", !0),
-              t.showDrawerPreviousButton && l.value > 0 ? (p(), v(A, {
+              }, 8, ["disabled"])) : p("", !0),
+              e.showDrawerPreviousButton && l.value > 0 ? (c(), v(A, {
                 key: 1,
                 secondary: "",
-                disabled: e(g),
+                disabled: t(g),
                 onClick: o
               }, {
                 default: a(() => [
-                  h(_(e(n)("ll.reset")), 1)
+                  h(_(t(n)("ll.reset")), 1)
                 ]),
                 _: 1
-              }, 8, ["disabled"])) : c("", !0),
-              t.showDrawerPreviousButton ? (p(), v(A, {
+              }, 8, ["disabled"])) : p("", !0),
+              e.showDrawerPreviousButton ? (c(), v(A, {
                 key: 2,
-                disabled: e(g),
-                onClick: w
+                disabled: t(g),
+                onClick: m
               }, {
                 default: a(() => [
-                  h(_(e(n)("ll.apply")), 1)
+                  h(_(t(n)("ll.apply")), 1)
                 ]),
                 _: 1
-              }, 8, ["disabled"])) : c("", !0)
+              }, 8, ["disabled"])) : p("", !0)
             ])
           ]),
           default: a(() => [
             V(s.$slots, "drawer")
           ]),
           _: 3
-        }, 16, ["is-open", "title"])) : c("", !0)
+        }, 16, ["is-open", "title"])) : p("", !0)
       ]),
       _: 3
     }, 8, ["class", "radius"]));
@@ -276,7 +266,7 @@ const tt = {
 });
 export {
   Y as DATA_VIEW_FILTERS_UTILS_INJECTION,
-  Qt as default,
-  zt as useFilters
+  $e as default,
+  Te as useFilters
 };
 //# sourceMappingURL=DataViewFilters.js.map

package/dist/DataViewFilters.js.map

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