@leaflink/stash 46.7.3 → 47.0.0

package/dist/DataView.js

@@ -1,25 +1,25 @@
-import { defineComponent as A, useCssModule as F, ref as d, inject as T, computed as r, watch as D, provide as j, openBlock as V, createElementBlock as R, renderSlot as U, createBlock as J, normalizeClass as W, unref as G, createCommentVNode as Z } from "vue";
-import q from "lodash-es/cloneDeep";
+import { defineComponent as F, useCssModule as j, ref as l, inject as R, computed as r, watch as D, provide as U, openBlock as V, createElementBlock as J, renderSlot as W, createBlock as G, normalizeClass as Z, unref as q, createCommentVNode as H } from "vue";
+import K from "lodash-es/cloneDeep";
 import { M as $ } from "./Module.keys-2cc7d830.js";
-import H from "./Paginate.js";
-import { a as K, D as Q, s as X } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
-import { _ as Y } from "./_plugin-vue_export-helper-dad06003.js";
+import Q from "./Paginate.js";
+import { a as X, D as Y, s as w } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
+import { _ as O } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Icon.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-function _(e) {
+function b(e) {
   const n = e[0] === "-" ? "desc" : "asc";
   return { id: n === "asc" ? e : e.slice(1), order: n };
 }
-function w({ id: e, order: n }) {
+function tt({ id: e, order: n }) {
   return `${n === "desc" ? "-" : ""}${e}`;
 }
-function O({ newId: e, newOrder: n, oldId: i, oldOrder: t }) {
+function et({ newId: e, newOrder: n, oldId: i, oldOrder: t }) {
   if (e) {
     if (e !== i)
-      return w({ id: e, order: n || "asc" });
+      return tt({ id: e, order: n || "asc" });
     if (!n && !t)
       return e;
     if (!(!n && t === "desc")) {
@@ -38,8 +38,8 @@ function O({ newId: e, newOrder: n, oldId: i, oldOrder: t }) {
     }
   }
 }
-var tt = /* @__PURE__ */ ((e) => (e.Table = "table", e))(tt || {});
-const et = /* @__PURE__ */ A({
+var at = /* @__PURE__ */ ((e) => (e.Table = "table", e))(at || {});
+const rt = /* @__PURE__ */ F({
   __name: "DataView",
   props: {
     currentPage: { default: 1 },
@@ -47,7 +47,7 @@ const et = /* @__PURE__ */ A({
     currentSort: { default: void 0 },
     data: { default: () => [] },
     density: { default: "comfortable" },
-    pageSize: { default: K },
+    pageSize: { default: X },
     disablePagination: { type: Boolean, default: !1 },
     totalDataCount: { default: 0 },
     variant: { default: void 0 },
@@ -55,15 +55,15 @@ const et = /* @__PURE__ */ A({
   },
   emits: ["update", "update:currentFilters", "update:currentPage", "update:currentSearch", "update:currentSort"],
   setup(e, { expose: n, emit: i }) {
-    const t = e, x = F(), h = d(null), b = T($.key, $.defaults), B = r(() => {
+    const t = e, x = j(), h = l(null), _ = R($.key, $.defaults), B = r(() => {
       var a;
       if (t.variant)
         return t.variant;
-      if (((a = b.variant) == null ? void 0 : a.value) === "table")
+      if (((a = _.variant) == null ? void 0 : a.value) === "table")
         return "table";
-    }), y = r(() => b.variant !== void 0), s = d(1), E = r(() => !t.disablePagination && t.totalDataCount > 0), p = r(() => Math.ceil(t.totalDataCount / t.pageSize)), u = function(a, { shouldEmit: o } = {}) {
-      var l, S;
-      s.value = a, o && (m(), i("update:currentPage", a, t.pageSize)), Number((l = h.value) == null ? void 0 : l.getBoundingClientRect().top) < 0 && ((S = h.value) == null || S.scrollIntoView({ behavior: "smooth", block: "start" }));
+    }), y = r(() => _.variant !== void 0), s = l(1), E = r(() => !t.disablePagination && t.totalDataCount > 0), p = r(() => Math.ceil(t.totalDataCount / t.pageSize)), u = function(a, { shouldEmit: o } = {}) {
+      var d, m;
+      s.value = a, o && (S(), i("update:currentPage", a, t.pageSize)), Number((d = h.value) == null ? void 0 : d.getBoundingClientRect().top) < 0 && ((m = h.value) == null || m.scrollIntoView({ behavior: "smooth", block: "start" }));
     }, C = function({ shouldEmit: a } = {}) {
       const o = Math.max(s.value - 1, 1);
       u(o, { shouldEmit: a });
@@ -78,13 +78,13 @@ const et = /* @__PURE__ */ A({
       },
       { immediate: !0 }
     );
-    const c = d(void 0), M = r(
-      () => c.value ? _(c.value).id : void 0
+    const c = l(void 0), M = r(
+      () => c.value ? b(c.value).id : void 0
     ), k = r(
-      () => c.value ? _(c.value).order : void 0
-    ), f = function(a, { sortOrder: o, shouldEmit: l } = {}) {
-      const { id: S, order: L } = _(c.value || ""), N = O({ newId: a, newOrder: o, oldId: S, oldOrder: L });
-      c.value = N, u(1), l && (m(), i("update:currentSort", N));
+      () => c.value ? b(c.value).order : void 0
+    ), f = function(a, { sortOrder: o, shouldEmit: d } = {}) {
+      const { id: m, order: A } = b(c.value || ""), N = et({ newId: a, newOrder: o, oldId: m, oldOrder: A });
+      c.value = N, u(1), d && (S(), i("update:currentSort", N));
     };
     D(
       () => t.currentSort,
@@ -93,8 +93,8 @@ const et = /* @__PURE__ */ A({
       },
       { immediate: !0 }
     );
-    const v = d(""), g = function(a, { shouldEmit: o } = {}) {
-      v.value = a || "", u(1), o && (m(), i("update:currentSearch", a));
+    const v = l(""), I = l(!1), L = l(!1), g = function(a, { shouldEmit: o } = {}) {
+      v.value = a || "", u(1), o && (S(), i("update:currentSearch", a));
     };
     D(
       () => t.currentSearch,
@@ -103,20 +103,20 @@ const et = /* @__PURE__ */ A({
       },
       { immediate: !0 }
     );
-    const z = d({}), I = function(a, { shouldEmit: o } = {}) {
-      z.value = a, u(1), o && (m(), i("update:currentFilters", a));
+    const z = l({}), T = function(a, { shouldEmit: o } = {}) {
+      z.value = a, u(1), o && (S(), i("update:currentFilters", a));
     };
-    function m() {
+    function S() {
       i("update", {
         page: s.value,
         pageSize: t.pageSize,
         ordering: c.value,
         search: v.value,
-        filters: q(z.value)
+        filters: K(z.value)
       });
     }
-    return j(
-      Q.key,
+    return U(
+      Y.key,
       Object.freeze({
         // Pagination
         currentPage: r(() => s.value),
@@ -136,8 +136,10 @@ const et = /* @__PURE__ */ A({
         updateCurrentSearch: g,
         // Miscellaneous
         density: r(() => t.density),
-        isLoading: r(() => t.isLoading),
+        hasToolbar: I,
         isEmpty: r(() => t.data.length === 0),
+        isSelectable: L,
+        isLoading: r(() => t.isLoading),
         isWithinModule: y,
         variant: B
       })
@@ -152,14 +154,14 @@ const et = /* @__PURE__ */ A({
       search: r(() => v.value),
       updateCurrentSearch: g,
       filters: r(() => z.value),
-      updateCurrentFilters: I
-    }), (a, o) => (V(), R("div", {
+      updateCurrentFilters: T
+    }), (a, o) => (V(), J("div", {
       ref_key: "rootRef",
       ref: h,
       class: "stash-data-view tw-relative",
       "data-test": "stash-data-view"
     }, [
-      U(a.$slots, "default", {
+      W(a.$slots, "default", {
         currentPage: s.value,
         currentSortId: M.value,
         currentSortOrder: k.value,
@@ -172,26 +174,26 @@ const et = /* @__PURE__ */ A({
         updateCurrentSort: f,
         updateCurrentSearch: g
       }),
-      E.value && !y.value && p.value > 1 ? (V(), J(H, {
+      E.value && !y.value && p.value > 1 ? (V(), G(Q, {
         key: 0,
-        class: W(["tw-mt-6", G(x).paginate]),
+        class: Z(["tw-mt-6", q(x).paginate]),
         "current-page": s.value,
         "list-length": t.totalDataCount,
         "page-size": t.pageSize,
-        onSetPage: o[0] || (o[0] = (l) => u(l, { shouldEmit: !0 }))
-      }, null, 8, ["class", "current-page", "list-length", "page-size"])) : Z("", !0)
+        onSetPage: o[0] || (o[0] = (d) => u(d, { shouldEmit: !0 }))
+      }, null, 8, ["class", "current-page", "list-length", "page-size"])) : H("", !0)
     ], 512));
   }
-}), at = {
-  $style: X
-}, vt = /* @__PURE__ */ Y(et, [["__cssModules", at]]);
+}), nt = {
+  $style: w
+}, St = /* @__PURE__ */ O(rt, [["__cssModules", nt]]);
 export {
-  Q as DATA_VIEW_INJECTION,
-  K as DEFAULT_PAGE_SIZE,
-  tt as DataViewVariant,
-  vt as default,
-  _ as deserializeSortValue,
-  O as getNextSort,
-  w as serializeSortValue
+  Y as DATA_VIEW_INJECTION,
+  X as DEFAULT_PAGE_SIZE,
+  at as DataViewVariant,
+  St as default,
+  b as deserializeSortValue,
+  et as getNextSort,
+  tt as serializeSortValue
 };
 //# sourceMappingURL=DataView.js.map

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, 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  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    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 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      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 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","hasToolbar","isSelectable","updateCurrentSearch","searchTerm","internalFilters","updateCurrentFilters","newFilters","cloneDeep","provide","DATA_VIEW_INJECTION","__expose"],"mappings":";;;;;;;;;;;AAKO,SAASA,EAAqBC,GAAwC;AAC3E,QAAMC,IAAQD,EAAK,CAAC,MAAM,MAAM,SAAS;AAGlC,SAAA,EAAE,IAFEC,MAAU,QAAQD,IAAOA,EAAK,MAAM,CAAC,GAEnC,OAAAC;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;AAS/D,QAAA,CAACA,KAAY,CAACE;AACT,aAAAH;AAGL,QAAA,GAACC,KAAYE,MAAa,SAI1B;AAAA,UAAA,CAACF,KAAYE,MAAa;AAC5B,eAAO,IAAIH,CAAK;AAKd,UAAAC,MAAa,SAAS,CAACE;AAClB,eAAAH;AAGL,UAAA,EAAAC,MAAa,SAASE,MAAa,QAInC;AAAA,YAAAF,MAAa,SAASE,MAAa;AAC9B,iBAAAH;AAKL,YAAAC,MAAa,UAAU,CAACE;AAC1B,iBAAO,IAAIH,CAAK;AAGd,YAAA,EAAAC,MAAa,UAAUE,MAAa,WAIpCF,MAAa,UAAUE,MAAa;AACtC,iBAAO,IAAIH,CAAK;AAAA;AAAA;AAAA;AAGpB;ACnFY,IAAAI,uBAAAA,OACVA,EAAA,QAAQ,SADEA,IAAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;iBCqGJC,IAAUC,KACVC,IAAUC,EAAwB,IAAI,GACtCC,IAAkBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ,GACxEC,IAAkBC,EAAuC,MAAM;;AACnE,UAAIC,EAAM;AACR,eAAOA,EAAM;AAGX,YAAAC,IAAAN,EAAgB,YAAhB,gBAAAM,EAAyB,WAAU;AAC9B,eAAA;AAAA,IAGF,CACR,GACKC,IAAiBH,EAAS,MAAMJ,EAAgB,YAAY,MAAS,GAGrEQ,IAAeT,EAAI,CAAC,GACpBU,IAAsBL,EAAS,MAAM,CAACC,EAAM,qBAAqBA,EAAM,iBAAiB,CAAC,GACzFK,IAAYN,EAAS,MAAM,KAAK,KAAKC,EAAM,iBAAiBA,EAAM,QAAQ,CAAC,GAE3EM,IAAmB,SAAUC,GAAc,EAAE,YAAAC,EAAW,IAAI,CAAA,GAAI;;AACpE,MAAAL,EAAa,QAAQI,GAEjBC,MACSC,KACNC,EAAA,sBAAsBH,GAAMP,EAAM,QAAQ,IAG7C,QAAOC,IAAAR,EAAQ,UAAR,gBAAAQ,EAAe,wBAAwB,GAAG,IAAI,OACvDU,IAAAlB,EAAQ,UAAR,QAAAkB,EAAe,eAAe,EAAE,UAAU,UAAU,OAAO;IAC7D,GAGIC,IAAyB,SAAU,EAAE,YAAAJ,EAAW,IAAI,CAAA,GAAI;AAC5D,YAAMD,IAAO,KAAK,IAAIJ,EAAa,QAAQ,GAAG,CAAC;AAEvC,MAAAG,EAAAC,GAAM,EAAE,YAAAC,EAAA,CAAY;AAAA,IAAA,GAIxBK,IAAyB,SAAU,EAAE,YAAAL,EAAW,IAAI,CAAA,GAAI;AAC5D,YAAMD,IAAO,KAAK,IAAIJ,EAAa,QAAQ,GAAGE,EAAU,KAAK;AAErD,MAAAC,EAAAC,GAAM,EAAE,YAAAC,EAAA,CAAY;AAAA,IAAA;AAG9B,IAAAM;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAM,EAAQN,EAAM,WAAW;AAAA,MAC3B;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA;AAKd,UAAAe,IAAerB,EAA2B,MAAS,GAEnDsB,IAAiBjB;AAAA,MAA6B,MAClDgB,EAAa,QAAQnC,EAAqBmC,EAAa,KAAK,EAAE,KAAK;AAAA,IAAA,GAE/DE,IAAoBlB;AAAA,MAAgC,MACxDgB,EAAa,QAAQnC,EAAqBmC,EAAa,KAAK,EAAE,QAAQ;AAAA,IAAA,GAGlEG,IAAuC,SAAUC,GAAQ,EAAE,WAAAC,GAAW,YAAAZ,EAAW,IAAI,IAAI;AACvF,YAAA,EAAE,IAAIpB,GAAO,OAAOC,MAAaT,EAAqBmC,EAAa,SAAS,EAAE,GAC9EM,IAAWpC,GAAY,EAAE,OAAOkC,GAAQ,UAAUC,GAAW,OAAAhC,GAAO,UAAAC,EAAA,CAAU;AAEpF,MAAA0B,EAAa,QAAQM,GACrBf,EAAQ,CAAC,GAELE,MACSC,KACXC,EAAK,sBAAsBW,CAAQ;AAAA,IACrC;AAGF,IAAAP;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAkB,EAAkBlB,EAAM,WAAW;AAAA,MACrC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA;AAKd,UAAAsB,IAAiB5B,EAAI,EAAE,GAEvB6B,IAAa7B,EAAI,EAAK,GACtB8B,IAAe9B,EAAI,EAAK,GAExB+B,IAA2C,SAAUC,GAAY,EAAE,YAAAlB,EAAW,IAAI,CAAA,GAAI;AAC1F,MAAAc,EAAe,QAAQI,KAAc,IACrCpB,EAAQ,CAAC,GAELE,MACSC,KACXC,EAAK,wBAAwBgB,CAAU;AAAA,IACzC;AAGF,IAAAZ;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAyB,EAAoBzB,EAAM,aAAa;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA;AAKd,UAAA2B,IAAkBjC,EAAY,CAAA,CAAE,GAEhCkC,IAA6C,SAAUC,GAAoB,EAAE,YAAArB,EAAW,IAAI,CAAA,GAAI;AACpG,MAAAmB,EAAgB,QAAQE,GACxBvB,EAAQ,CAAC,GAELE,MACSC,KACXC,EAAK,yBAAyBmB,CAAU;AAAA,IAC1C;AAIF,aAASpB,IAAa;AACpB,MAAAC,EAAK,UAAU;AAAA,QACb,MAAMP,EAAa;AAAA,QACnB,UAAUH,EAAM;AAAA,QAChB,UAAUe,EAAa;AAAA,QACvB,QAAQO,EAAe;AAAA,QACvB,SAASQ,EAAUH,EAAgB,KAAK;AAAA,MAAA,CACzC;AAAA,IACH;AAEA,WAAAI;AAAA,MACEC,EAAoB;AAAA,MACpB,OAAO,OAAO;AAAA;AAAA,QAEZ,aAAajC,EAAS,MAAMI,EAAa,KAAK;AAAA,QAC9C,qBAAAC;AAAA,QACA,WAAAC;AAAA,QACA,UAAUN,EAAS,MAAMC,EAAM,QAAQ;AAAA,QACvC,gBAAgBD,EAAS,MAAMC,EAAM,cAAc;AAAA,QACnD,SAAAM;AAAA,QACA,YAAAM;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,MAAMC,EAAM,OAAO;AAAA,QACrC,YAAAuB;AAAA,QACA,SAASxB,EAAS,MAAMC,EAAM,KAAK,WAAW,CAAC;AAAA,QAC/C,cAAAwB;AAAA,QACA,WAAWzB,EAAS,MAAMC,EAAM,SAAS;AAAA,QACzC,gBAAAE;AAAA,QACA,SAASJ;AAAA,MAAA,CACV;AAAA,IAAA,GAGUmC,EAAA;AAAA,MACX,MAAMlC,EAAS,MAAMI,EAAa,KAAK;AAAA,MACvC,UAAUJ,EAAS,MAAMC,EAAM,QAAQ;AAAA,MACvC,SAAAM;AAAA,MACA,YAAAM;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DataView.vue.d.ts

@@ -6,6 +6,7 @@ import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { InjectionKey } from 'vue';
 import { PropType } from 'vue';
+import { Ref } from 'vue';
 import { VNodeProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -64,6 +65,10 @@ export declare interface DataViewInjection {
      * The DataView's padding; the default value is "comfortable". On small screens, the density will always be "compact".
      */
     density: ComputedRef<SpacingDensities | undefined>;
+    /**
+     * Defines if a DataView has a Toolbar rendered. This prop is updated when DataViewToolbar exists and is mounted.
+     */
+    hasToolbar?: Ref<boolean>;
     /**
      * Enables certain loading indicators to be displayed within the DataView.
      */
@@ -72,6 +77,10 @@ export declare interface DataViewInjection {
      * Enables certain empty states to be displayed within the DataView.
      */
     isEmpty?: ComputedRef<boolean>;
+    /**
+     * Allows Table to control whether or not a DataViewToolbar should show a checkmark
+     */
+    isSelectable?: Ref<boolean>;
     /**
      * Whether or not the DataView is rendered within a Module; the value is inferred based on being
      * able to inject details from Module.

package/dist/{DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js → DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js}

@@ -1,12 +1,12 @@
-import { computed as e } from "vue";
-const t = 12, o = Object.freeze({
+import { computed as e, ref as t } from "vue";
+const a = 12, n = Object.freeze({
   key: Symbol("DATA_VIEW_INJECTION_KEY"),
   defaults: Object.freeze({
     // Pagination
     currentPage: e(() => 1),
     isPaginationEnabled: e(() => !1),
     pageCount: e(() => 1),
-    pageSize: e(() => t),
+    pageSize: e(() => a),
     totalDataCount: e(() => 0),
     setPage() {
     },
@@ -28,18 +28,19 @@ const t = 12, o = Object.freeze({
     // Miscellanous
     density: e(() => {
     }),
-    isLoading: e(() => !1),
     isEmpty: e(() => !1),
+    isLoading: e(() => !1),
+    isSelectable: t(!1),
     isWithinModule: e(() => !1),
     variant: e(() => {
     })
   })
-}), a = "_paginate_1jnlh_2", n = {
-  paginate: a
+}), r = "_paginate_1jnlh_2", s = {
+  paginate: r
 };
 export {
-  o as D,
-  t as a,
-  n as s
+  n as D,
+  a,
+  s
 };
-//# sourceMappingURL=DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js.map
+//# sourceMappingURL=DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js.map

package/dist/DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js","sources":["../src/components/DataView/DataView.constants.ts","../src/components/DataView/DataView.keys.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE = 12;\n","import { computed, ref } from 'vue';\n\nimport { InjectionWithDefaults } from '../../../types/utils';\nimport { DEFAULT_PAGE_SIZE } from './DataView.constants';\nimport { DataViewInjection } from './DataView.types';\n\n// See: https://vuejs.org/guide/typescript/composition-api.html#typing-provide-inject\n\n/**\n * Miscellaneous data that is not related to pagination, sorting, or searching.\n * TODO: merge all DataView injections into one. https://leaflink.atlassian.net/browse/STASH-507\n */\nexport const DATA_VIEW_INJECTION: InjectionWithDefaults<DataViewInjection> = Object.freeze({\n  key: Symbol('DATA_VIEW_INJECTION_KEY'),\n  defaults: Object.freeze({\n    // Pagination\n    currentPage: computed(() => 1),\n    isPaginationEnabled: computed(() => false),\n    pageCount: computed(() => 1),\n    pageSize: computed(() => DEFAULT_PAGE_SIZE),\n    totalDataCount: computed(() => 0),\n    setPage() {},\n    goPrevPage() {},\n    goNextPage() {},\n\n    // Sorting\n    currentSortId: computed(() => undefined),\n    currentSortOrder: computed(() => undefined),\n    updateCurrentSort() {},\n\n    // Search\n    currentSearch: computed(() => ''),\n    updateCurrentSearch() {},\n\n    // Miscellanous\n    density: computed(() => undefined),\n    isEmpty: computed(() => false),\n    isLoading: computed(() => false),\n    isSelectable: ref(false),\n    isWithinModule: computed(() => false),\n    variant: computed(() => undefined),\n  }),\n});\n"],"names":["DEFAULT_PAGE_SIZE","DATA_VIEW_INJECTION","computed","ref"],"mappings":";AAAO,MAAMA,IAAoB,ICYpBC,IAAgE,OAAO,OAAO;AAAA,EACzF,KAAK,OAAO,yBAAyB;AAAA,EACrC,UAAU,OAAO,OAAO;AAAA;AAAA,IAEtB,aAAaC,EAAS,MAAM,CAAC;AAAA,IAC7B,qBAAqBA,EAAS,MAAM,EAAK;AAAA,IACzC,WAAWA,EAAS,MAAM,CAAC;AAAA,IAC3B,UAAUA,EAAS,MAAMF,CAAiB;AAAA,IAC1C,gBAAgBE,EAAS,MAAM,CAAC;AAAA,IAChC,UAAU;AAAA,IAAC;AAAA,IACX,aAAa;AAAA,IAAC;AAAA,IACd,aAAa;AAAA,IAAC;AAAA;AAAA,IAGd,eAAeA,EAAS,MAAM;AAAA,KAAS;AAAA,IACvC,kBAAkBA,EAAS,MAAM;AAAA,KAAS;AAAA,IAC1C,oBAAoB;AAAA,IAAC;AAAA;AAAA,IAGrB,eAAeA,EAAS,MAAM,EAAE;AAAA,IAChC,sBAAsB;AAAA,IAAC;AAAA;AAAA,IAGvB,SAASA,EAAS,MAAM;AAAA,KAAS;AAAA,IACjC,SAASA,EAAS,MAAM,EAAK;AAAA,IAC7B,WAAWA,EAAS,MAAM,EAAK;AAAA,IAC/B,cAAcC,EAAI,EAAK;AAAA,IACvB,gBAAgBD,EAAS,MAAM,EAAK;AAAA,IACpC,SAASA,EAAS,MAAM;AAAA,KAAS;AAAA,EAAA,CAClC;AACH,CAAC;;;"}

package/dist/DataViewFilters.js

@@ -7,7 +7,7 @@ import A from "./Button.js";
 import T from "lodash-es/cloneDeep";
 import $ from "./Icon.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as G } 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-5c180dba.js";
 import q from "./FilterChip.js";
 import { _ as H } from "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import K from "./Modal.js";

package/dist/DataViewSortButton.js

@@ -4,7 +4,7 @@ import u from "./Button.js";
 import "lodash-es/cloneDeep";
 import h from "./Icon.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as C } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import { D as C } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import E from "./Dropdown.js";
 import I from "./IconLabel.js";
 import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";

package/dist/DataViewToolbar.js

@@ -1,91 +1,114 @@
-import { defineComponent as S, inject as V, computed as g, openBlock as o, createElementBlock as r, normalizeClass as N, unref as t, createElementVNode as D, renderSlot as B, toDisplayString as I, createCommentVNode as d, Fragment as T, createVNode as n, withCtx as b } from "vue";
-import { t as $ } from "./locale.js";
-import h from "./Button.js";
+import { defineComponent as T, inject as A, ref as M, computed as x, onBeforeMount as $, openBlock as a, createElementBlock as n, normalizeClass as j, unref as e, createElementVNode as k, createBlock as z, createCommentVNode as r, renderSlot as U, toDisplayString as W, Fragment as F, createVNode as s, withCtx as S } from "vue";
+import { t as y } from "./locale.js";
+import _ from "./Button.js";
+import J from "./Checkbox.js";
 import "lodash-es/cloneDeep";
-import x from "./Icon.js";
+import C from "./Icon.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as _ } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import { D as B } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "lodash-es/get";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./_plugin-vue_export-helper-dad06003.js";
+import "@leaflink/snitch";
 import "lodash-es/uniqueId";
+import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const j = { class: "tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6" }, z = {
+const K = { class: "tw-flex tw-place-items-center" }, O = { class: "tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6" }, q = {
   key: 0,
   class: "tw-flex tw-items-center"
-}, A = {
+}, G = {
   key: 0,
   class: "tw-mr-1.5 tw-text-xs"
-}, X = /* @__PURE__ */ S({
+}, ce = /* @__PURE__ */ T({
   __name: "DataViewToolbar",
   props: {
+    allRowsSelected: { type: Boolean, default: !1 },
     hidePageStats: { type: Boolean, default: !1 },
-    radius: { default: "rounded" }
+    radius: { default: "rounded" },
+    someRowsSelected: { type: Boolean, default: !1 }
   },
-  setup(y) {
-    const u = y, {
-      isWithinModule: s,
-      variant: m,
-      density: p,
-      currentPage: a,
-      isPaginationEnabled: C,
-      pageCount: c,
-      pageSize: w,
-      totalDataCount: f,
-      goPrevPage: k,
-      goNextPage: E
-    } = V(_.key, _.defaults), v = g(() => s.value ? "none" : m.value === "table" ? "rounded-top" : u.radius), P = g(() => {
-      const i = w.value * (a.value - 1) + 1, e = Math.min(w.value * a.value, f.value), l = f.value;
-      return $("ll.pageStats", { from: i, to: e, total: l });
+  emits: ["select"],
+  setup(E, { emit: P }) {
+    const o = E, {
+      isWithinModule: i,
+      variant: u,
+      density: m,
+      currentPage: l,
+      hasToolbar: p,
+      isPaginationEnabled: V,
+      isSelectable: N,
+      pageCount: w,
+      pageSize: f,
+      totalDataCount: v,
+      goPrevPage: R,
+      goNextPage: D
+    } = A(B.key, B.defaults), h = M(0), b = x(() => i.value ? "none" : u.value === "table" ? "rounded-top" : o.radius), I = x(() => {
+      const d = f.value * (l.value - 1) + 1, t = Math.min(f.value * l.value, v.value), c = v.value;
+      return y("ll.pageStats", { from: d, to: t, total: c });
     });
-    return (i, e) => (o(), r("div", {
-      class: N(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5", {
-        "tw-border-t tw-border-ice-200": t(s),
-        "tw-rounded": v.value === "rounded",
-        "tw-rounded-t": v.value === "rounded-top",
-        "tw-mb-3": t(m) !== "table" && !t(s),
-        "tw-px-0": t(p) === "compact",
-        "lg:tw-px-3": t(p) === "comfortable"
+    function g() {
+      P("select"), h.value++;
+    }
+    return $(() => {
+      p && (p.value = !0);
+    }), (d, t) => (a(), n("div", {
+      class: j(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5", {
+        "tw-border-t tw-border-ice-200": e(i),
+        "tw-rounded": b.value === "rounded",
+        "tw-rounded-t": b.value === "rounded-top",
+        "tw-mb-3": e(u) !== "table" && !e(i),
+        "tw-px-0": e(m) === "compact",
+        "lg:tw-px-3": e(m) === "comfortable"
       }]),
       "data-test": "stash-data-view-toolbar"
     }, [
-      D("div", j, [
-        B(i.$slots, "default")
+      k("div", K, [
+        e(N) ? (a(), z(J, {
+          key: h.value,
+          checked: o.allRowsSelected,
+          indeterminate: o.someRowsSelected && !o.allRowsSelected,
+          title: e(y)("ll.selectAll"),
+          "onUpdate:indeterminate": g,
+          "onUpdate:checked": g
+        }, null, 8, ["checked", "indeterminate", "title"])) : r("", !0),
+        k("div", O, [
+          U(d.$slots, "default")
+        ])
       ]),
-      t(C) ? (o(), r("div", z, [
-        u.hidePageStats ? d("", !0) : (o(), r("span", A, I(P.value), 1)),
-        t(c) > 1 ? (o(), r(T, { key: 1 }, [
-          n(h, {
+      e(V) ? (a(), n("div", q, [
+        o.hidePageStats ? r("", !0) : (a(), n("span", G, W(I.value), 1)),
+        e(w) > 1 ? (a(), n(F, { key: 1 }, [
+          s(_, {
             icon: "",
             class: "tw-h-9 tw-w-9 tw-p-1.5",
             "data-test": "button|prev-page",
-            disabled: t(a) === 1,
-            onClick: e[0] || (e[0] = (l) => t(k)({ shouldEmit: !0 }))
+            disabled: e(l) === 1,
+            onClick: t[0] || (t[0] = (c) => e(R)({ shouldEmit: !0 }))
           }, {
-            default: b(() => [
-              n(x, { name: "chevron-left" })
+            default: S(() => [
+              s(C, { name: "chevron-left" })
             ]),
             _: 1
           }, 8, ["disabled"]),
-          n(h, {
+          s(_, {
             icon: "",
             class: "tw-h-9 tw-w-9 tw-p-1.5",
             "data-test": "button|next-page",
-            disabled: t(a) === t(c),
-            onClick: e[1] || (e[1] = (l) => t(E)({ shouldEmit: !0 }))
+            disabled: e(l) === e(w),
+            onClick: t[1] || (t[1] = (c) => e(D)({ shouldEmit: !0 }))
           }, {
-            default: b(() => [
-              n(x, { name: "chevron-right" })
+            default: S(() => [
+              s(C, { name: "chevron-right" })
             ]),
             _: 1
           }, 8, ["disabled"])
-        ], 64)) : d("", !0)
-      ])) : d("", !0)
+        ], 64)) : r("", !0)
+      ])) : r("", !0)
     ], 2));
   }
 });
 export {
-  X as default
+  ce as default
 };
 //# sourceMappingURL=DataViewToolbar.js.map

package/dist/DataViewToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject } 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 Icon from '../Icon/Icon.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n\n  export interface DataViewToolbarProps {\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  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    hidePageStats: false,\n    radius: 'rounded',\n  });\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    isPaginationEnabled,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-top';\n    }\n\n    return props.radius;\n  });\n\n  // #region pagination\n  const pageStats = computed(() => {\n    const from = pageSize.value * (currentPage.value - 1) + 1;\n    const to = Math.min(pageSize.value * currentPage.value, totalDataCount.value);\n    const total = totalDataCount.value;\n\n    return t('ll.pageStats', { from, to, total });\n  });\n  // #endregion pagination\n</script>\n\n<template>\n  <div\n    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6\">\n      <!-- @slot default -->\n      <slot></slot>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5 tw-text-xs\">\n        {{ pageStats }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["isWithinModule","dataViewVariant","density","currentPage","isPaginationEnabled","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","inject","DATA_VIEW_INJECTION","computedRadius","computed","props","pageStats","from","to","total","t"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;iBA0BQ;AAAA,MACJ,gBAAAA;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAiBC,EAA0B,MAC3Cb,EAAe,QACV,SAGLC,EAAgB,UAAU,UACrB,gBAGFa,EAAM,MACd,GAGKC,IAAYF,EAAS,MAAM;AAC/B,YAAMG,IAAOV,EAAS,SAASH,EAAY,QAAQ,KAAK,GAClDc,IAAK,KAAK,IAAIX,EAAS,QAAQH,EAAY,OAAOI,EAAe,KAAK,GACtEW,IAAQX,EAAe;AAE7B,aAAOY,EAAE,gBAAgB,EAAE,MAAAH,GAAM,IAAAC,GAAI,OAAAC,GAAO;AAAA,IAAA,CAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref } from 'vue';\n\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 { ToolbarRadiuses } from './DataViewToolbar.types';\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  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: 'rounded',\n    someRowsSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'select'): void;\n    }>();\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-top';\n    }\n\n    return props.radius;\n  });\n\n  // #region pagination\n  const pageStats = computed(() => {\n    const from = pageSize.value * (currentPage.value - 1) + 1;\n    const to = Math.min(pageSize.value * currentPage.value, totalDataCount.value);\n    const total = totalDataCount.value;\n\n    return t('ll.pageStats', { from, to, total });\n  });\n  // #endregion pagination\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    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <div class=\"tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6\">\n        <!-- @slot default -->\n        <slot></slot>\n      </div>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5 tw-text-xs\">\n        {{ pageStats }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginationEnabled","isSelectable","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","inject","DATA_VIEW_INJECTION","checkboxKey","ref","computedRadius","computed","props","pageStats","from","to","total","t","onSelect","emit","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+CQ;AAAA,MACJ,gBAAAA;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAcC,EAAI,CAAC,GAEnBC,IAAiBC,EAA0B,MAC3CjB,EAAe,QACV,SAGLC,EAAgB,UAAU,UACrB,gBAGFiB,EAAM,MACd,GAGKC,IAAYF,EAAS,MAAM;AAC/B,YAAMG,IAAOZ,EAAS,SAASL,EAAY,QAAQ,KAAK,GAClDkB,IAAK,KAAK,IAAIb,EAAS,QAAQL,EAAY,OAAOM,EAAe,KAAK,GACtEa,IAAQb,EAAe;AAE7B,aAAOc,EAAE,gBAAgB,EAAE,MAAAH,GAAM,IAAAC,GAAI,OAAAC,GAAO;AAAA,IAAA,CAC7C;AAGD,aAASE,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODX,EAAA;AAAA,IACd;AAEA,WAAAY,EAAc,MAAM;AAClB,MAAItB,MACFA,EAAW,QAAQ;AAAA,IACrB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DataViewToolbar.vue.d.ts

@@ -34,6 +34,11 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 export declare interface DataViewToolbarProps {
+    /**
+     * When DataView has `variant="table"` and Table has `is-selectable` enabled, it provides a way to flag
+     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.
+     */
+    allRowsSelected?: boolean;
     /**
      * Hides the page statistics (ex: "1 - 12 of 20") in the toolbar
      */
@@ -42,17 +47,33 @@ export declare interface DataViewToolbarProps {
      * Controls the corners of DataViewToolbar with the "border-radius" CSS property. The default value is "rounded".
      */
     radius?: ToolbarRadiuses;
+    /**
+     * When DataView has variant="table" and Table has `is-selectable` enabled, it provides a way to flag
+     * a checkbox whenever one or more, but not all rows are selected, just like the standalone
+     * version on TableHeaderRow.
+     */
+    someRowsSelected?: boolean;
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewToolbarProps>, {
+    allRowsSelected: boolean;
     hidePageStats: boolean;
     radius: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewToolbarProps>, {
+    someRowsSelected: boolean;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    select: () => void;
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewToolbarProps>, {
+    allRowsSelected: boolean;
     hidePageStats: boolean;
     radius: string;
-}>>>, {
+    someRowsSelected: boolean;
+}>>> & {
+    onSelect?: (() => any) | undefined;
+}, {
     radius: "none" | "rounded" | "rounded-top";
+    allRowsSelected: boolean;
     hidePageStats: boolean;
+    someRowsSelected: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/dist/FilterDropdown.js

@@ -6,7 +6,7 @@ import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as F } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import { D as F } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import { D as z } from "./DataViewFilters.keys-c80ffabe.js";
 import G from "./Dropdown.js";
 import $ from "./FilterChip.js";

package/dist/ListView.vue.d.ts

@@ -564,9 +564,9 @@ declare const _default: DefineComponent<{
     items: unknown[];
     loading: boolean;
     pageSize: number;
+    isSelectable: boolean;
     disablePersistency: boolean;
     validationSchema: Function;
-    isSelectable: boolean;
     hideBulkActionOptions: boolean;
     hideNumberOfTotalSelected: boolean;
     emptyStateText: string;

package/dist/Table.js

@@ -1,16 +1,16 @@
-import { defineComponent as B, inject as w, computed as a, provide as C, openBlock as n, createElementBlock as L, normalizeClass as b, unref as m, normalizeStyle as H, createElementVNode as u, renderSlot as p, createBlock as v, withCtx as r, createVNode as i } from "vue";
+import { defineComponent as C, inject as b, computed as a, provide as L, onBeforeMount as H, openBlock as n, createElementBlock as N, normalizeClass as v, unref as m, normalizeStyle as D, createElementVNode as u, renderSlot as p, createBlock as g, withCtx as r, createVNode as i } from "vue";
 import "lodash-es/cloneDeep";
-import { M as g } from "./Module.keys-2cc7d830.js";
+import { M as h } from "./Module.keys-2cc7d830.js";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as h } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
-import N from "./EmptyState.js";
-import D from "./Loading.js";
-import E from "./TableCell.js";
-import k from "./TableRow.js";
-import { T as I } from "./Table.keys-cf93df19.js";
-import { S as V } from "./misc-76697f61.js";
+import { D as E } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
+import V from "./EmptyState.js";
+import I from "./Loading.js";
+import k from "./TableCell.js";
+import S from "./TableRow.js";
+import { T as A } from "./Table.keys-cf93df19.js";
+import { S as O } from "./misc-76697f61.js";
 import "./locale.js";
 import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
@@ -26,8 +26,8 @@ import "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
 import "./Button.js";
 import "./Icon.js";
 import "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
-var A = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(A || {}), O = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))(O || {});
-const J = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, pt = /* @__PURE__ */ B({
+var J = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(J || {}), M = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))(M || {});
+const $ = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ft = /* @__PURE__ */ C({
   __name: "Table",
   props: {
     density: { default: void 0 },
@@ -46,63 +46,66 @@ const J = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
     const t = e, {
       density: x,
       variant: c,
-      isLoading: S,
-      isEmpty: _
-    } = w(h.key, h.defaults), { variant: s } = w(g.key, g.defaults), f = a(() => (s == null ? void 0 : s.value) === "table" || c.value === "table" ? "rounded-bottom" : t.radius), l = a(() => t.stickyHeader ? "scroll" : t.layout), y = a(() => {
+      isEmpty: _,
+      isLoading: B,
+      isSelectable: f
+    } = b(E.key, E.defaults), { variant: s } = b(h.key, h.defaults), y = a(() => (s == null ? void 0 : s.value) === "table" || c.value === "table" ? "rounded-bottom" : t.radius), l = a(() => t.stickyHeader ? "scroll" : t.layout), w = a(() => {
       var o, d;
       return !!((o = t.stickyHeader) != null && o.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
       ((d = t.stickyHeader) == null ? void 0 : d.listLength) > 3);
     }), T = a(() => {
       var o;
       return {
-        maxHeight: y.value ? (o = t.stickyHeader) == null ? void 0 : o.maxHeight : ""
+        maxHeight: w.value ? (o = t.stickyHeader) == null ? void 0 : o.maxHeight : ""
       };
     });
-    return C(I.key, {
-      density: a(() => t.density || x.value || V.Comfortable),
+    return L(A.key, {
+      density: a(() => t.density || x.value || O.Comfortable),
       hasCustomExpandToggle: a(() => t.hasCustomExpandToggle),
       hasActions: a(() => t.hasActions),
       isExpandable: a(() => t.isExpandable),
       isSelectable: a(() => t.isSelectable && !t.isLoading && !t.isEmpty),
       layout: l
-    }), (o, d) => (n(), L("div", {
-      class: b(["stash-table tw-relative", [
-        { "tw-rounded": f.value === "rounded" },
-        { "tw-rounded-b": f.value === "rounded-bottom" },
+    }), H(() => {
+      f && (f.value = t.isSelectable);
+    }), (o, d) => (n(), N("div", {
+      class: v(["stash-table tw-relative", [
+        { "tw-rounded": y.value === "rounded" },
+        { "tw-rounded-b": y.value === "rounded-bottom" },
         { "tw-border-t tw-border-ice-200": m(c) === "table" },
         { "tw-overflow-auto tw-shadow": l.value === "scroll" },
         { "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": l.value === "stack" },
-        { "tw-min-h-[300px]": y.value && !t.isLoading }
+        { "tw-min-h-[300px]": w.value && !t.isLoading }
         // prevent the table from collapsing on small screen heights when the max-height is dynamic
       ]]),
       "data-test": "stash-table",
-      style: H(T.value)
+      style: D(T.value)
     }, [
-      u("table", J, [
+      u("table", $, [
         u("thead", {
-          class: b(["tw-border-b tw-border-ice-200", {
+          class: v(["tw-border-b tw-border-ice-200", {
             "tw-hidden lg:tw-table-header-group": l.value === "stack"
           }])
         }, [
           p(o.$slots, "head")
         ], 2),
         u("tbody", null, [
-          t.isLoading || m(S) ? (n(), v(k, { key: 0 }, {
+          t.isLoading || m(B) ? (n(), g(S, { key: 0 }, {
             default: r(() => [
-              i(E, { colspan: "100%" }, {
+              i(k, { colspan: "100%" }, {
                 default: r(() => [
-                  i(D)
+                  i(I)
                 ]),
                 _: 1
               })
             ]),
             _: 1
-          })) : t.isEmpty || m(_) ? (n(), v(k, { key: 1 }, {
+          })) : t.isEmpty || m(_) ? (n(), g(S, { key: 1 }, {
             default: r(() => [
-              i(E, { colspan: "100%" }, {
+              i(k, { colspan: "100%" }, {
                 default: r(() => [
                   p(o.$slots, "empty", {}, () => [
-                    i(N, {
+                    i(V, {
                       class: "tw-w-full tw-bg-white",
                       text: t.emptyStateText
                     }, null, 8, ["text"])
@@ -119,9 +122,9 @@ const J = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
   }
 });
 export {
-  A as Layout,
-  I as TABLE_INJECTION,
-  O as TableRadius,
-  pt as default
+  J as Layout,
+  A as TABLE_INJECTION,
+  M as TableRadius,
+  ft as default
 };
 //# sourceMappingURL=Table.js.map

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table'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     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isLoading: isDataViewLoading,\n    isEmpty: isDataViewEmpty,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(() => props.isSelectable && !props.isLoading && !props.isEmpty),\n    layout: computedLayout,\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto tw-shadow': computedLayout === 'scroll' },\n      { 'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack' },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","dataViewDensity","dataViewVariant","isDataViewLoading","isDataViewEmpty","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","props","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;iBCkFJ;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,SAASC;AAAA,IACP,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBL,EAAgB,UAAU,UACrB,mBAGFS,EAAM,MACd,GAEKC,IAAiBF,EAAkB,MACnCC,EAAM,eACD,WAGFA,EAAM,MACd,GAEKE,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAH,EAAM,iBAAN,QAAAG,EAAoB;AAAA,QACpBC,IAAAJ,EAAM,iBAAN,gBAAAI,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAH,EAAM,iBAAN,gBAAAG,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMC,EAAM,WAAWV,EAAgB,SAASkB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMC,EAAM,qBAAqB;AAAA,MACjE,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,cAAcD,EAAS,MAAMC,EAAM,YAAY;AAAA,MAC/C,cAAcD,EAAS,MAAMC,EAAM,gBAAgB,CAACA,EAAM,aAAa,CAACA,EAAM,OAAO;AAAA,MACrF,QAAQC;AAAA,IAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table'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     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, provide } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(() => props.isSelectable && !props.isLoading && !props.isEmpty),\n    layout: computedLayout,\n  });\n\n  onBeforeMount(() => {\n    /**\n     * To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists.\n     */\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto tw-shadow': computedLayout === 'scroll' },\n      { 'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack' },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","props","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;iBCkFJ;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFU,EAAM,MACd,GAEKC,IAAiBF,EAAkB,MACnCC,EAAM,eACD,WAGFA,EAAM,MACd,GAEKE,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAH,EAAM,iBAAN,QAAAG,EAAoB;AAAA,QACpBC,IAAAJ,EAAM,iBAAN,gBAAAI,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAH,EAAM,iBAAN,gBAAAG,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMC,EAAM,WAAWX,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMC,EAAM,qBAAqB;AAAA,MACjE,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,cAAcD,EAAS,MAAMC,EAAM,YAAY;AAAA,MAC/C,cAAcD,EAAS,MAAMC,EAAM,gBAAgB,CAACA,EAAM,aAAa,CAACA,EAAM,OAAO;AAAA,MACrF,QAAQC;AAAA,IAAA,CACT,GAEDQ,EAAc,MAAM;AAIlB,MAAIhB,MACFA,EAAqB,QAAQO,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableCell.js

@@ -3,7 +3,7 @@ import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";

package/dist/TableHeaderCell.js

@@ -2,7 +2,7 @@ import { defineComponent as k, useCssModule as T, inject as u, computed as p, op
 import "lodash-es/cloneDeep";
 import f from "./Icon.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";

package/dist/TableHeaderRow.js

@@ -1,74 +1,78 @@
-import { defineComponent as f, inject as _, ref as b, openBlock as t, createElementBlock as k, unref as o, createBlock as s, normalizeClass as r, withCtx as y, createCommentVNode as i, renderSlot as x } from "vue";
-import { t as T } from "./locale.js";
-import C from "./Checkbox.js";
+import { defineComponent as T, inject as p, ref as u, onMounted as R, openBlock as l, createElementBlock as x, unref as e, createBlock as r, normalizeClass as a, withCtx as C, createCommentVNode as w, renderSlot as E } from "vue";
+import { t as S } from "./locale.js";
+import B from "./Checkbox.js";
+import { D as f } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
-import { T as R } from "./Table.keys-cf93df19.js";
+import { T as I } from "./Table.keys-cf93df19.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
-import m from "./TableHeaderCell.js";
-import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
+import h from "./TableHeaderCell.js";
+import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "@leaflink/snitch";
 import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./index-79ce320f.js";
 import "./Icon.js";
-const B = {
-  class: "stash-table-header-row",
-  "data-test": "stash-table-header-row"
-}, E = /* @__PURE__ */ f({
+const v = /* @__PURE__ */ T({
   __name: "TableHeaderRow",
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
     someRowsSelected: { type: Boolean, default: !1 }
   },
   emits: ["select"],
-  setup(p, { emit: d }) {
-    const l = p, a = _(R.key);
-    if (!a)
+  setup(_, { emit: b }) {
+    const s = _, c = p(I.key);
+    if (!c)
       throw new Error("TableHeaderRow must be used within a Table component");
-    const { hasCustomExpandToggle: w, isExpandable: h, isSelectable: u } = a, c = b(0);
-    function n() {
-      d("select"), c.value++;
+    const { hasCustomExpandToggle: k, isExpandable: y, isSelectable: n } = c, { hasToolbar: t } = p(f.key, f.defaults), i = u(0), m = u();
+    function d() {
+      b("select"), i.value++;
     }
-    return (e, I) => (t(), k("tr", B, [
-      o(u) ? (t(), s(m, {
+    return R(() => {
+      t != null && t.value && n.value && m.value.getElementsByTagName("th")[0].setAttribute("colspan", 2);
+    }), (o, g) => (l(), x("tr", {
+      ref_key: "headerRow",
+      ref: m,
+      class: "stash-table-header-row",
+      "data-test": "stash-table-header-row"
+    }, [
+      !e(t) && e(n) ? (l(), r(h, {
         key: 0,
-        class: r(["stash-table-header-row__selection-cell tw-min-w-[48px]", e.$style["row-control-cell"]])
+        class: a(["stash-table-header-row__selection-cell tw-min-w-[48px]", o.$style["row-control-cell"]])
       }, {
-        default: y(() => [
-          (t(), s(C, {
-            key: c.value,
-            class: r(e.$style["row-selection-checkbox"]),
-            checked: l.allRowsSelected,
-            indeterminate: l.someRowsSelected && !l.allRowsSelected,
-            title: o(T)("ll.selectAll"),
-            "onUpdate:indeterminate": n,
-            "onUpdate:checked": n
+        default: C(() => [
+          (l(), r(B, {
+            key: i.value,
+            class: a(o.$style["row-selection-checkbox"]),
+            checked: s.allRowsSelected,
+            indeterminate: s.someRowsSelected && !s.allRowsSelected,
+            title: e(S)("ll.selectAll"),
+            "onUpdate:indeterminate": d,
+            "onUpdate:checked": d
           }, null, 8, ["class", "checked", "indeterminate", "title"]))
         ]),
         _: 1
-      }, 8, ["class"])) : i("", !0),
-      o(h) && !o(w) ? (t(), s(m, {
+      }, 8, ["class"])) : w("", !0),
+      e(y) && !e(k) ? (l(), r(h, {
         key: 1,
-        class: r(e.$style["row-control-cell"]),
+        class: a(o.$style["row-control-cell"]),
         "data-test": "table-row-header-expansion-cell"
-      }, null, 8, ["class"])) : i("", !0),
-      x(e.$slots, "default")
-    ]));
+      }, null, 8, ["class"])) : w("", !0),
+      E(o.$slots, "default")
+    ], 512));
   }
-}), $ = {
+}), A = {
   "row-selection-checkbox": "_row-selection-checkbox_1eq6o_2",
   "row-control-cell": "_row-control-cell_1eq6o_8"
-}, H = {
-  $style: $
-}, X = /* @__PURE__ */ S(E, [["__cssModules", H]]);
+}, $ = {
+  $style: A
+}, ee = /* @__PURE__ */ N(v, [["__cssModules", $]]);
 export {
-  X as default
+  ee as default
 };
 //# sourceMappingURL=TableHeaderRow.js.map

package/dist/TableHeaderRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'select'): void;\n    }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const checkboxKey = ref(0);\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</script>\n\n<template>\n  <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <TableHeaderCell\n      v-if=\"isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n    >\n      <Checkbox\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","checkboxKey","ref","onSelect","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExDM,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODH,EAAA;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, onMounted, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.keys';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'select'): void;\n    }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const { hasToolbar } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n  const headerRow = ref();\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  onMounted(() => {\n    /**\n     * Whenever a Table is selectable _and_ is within a DataView with a toolbar, we pick the first header cell and add a colspan=2.\n     * This allows Checkboxes within each row to be rendered as a standalone cell, removing friction on the developer to add the checkbox each time.\n     */\n    if (hasToolbar?.value && isSelectable.value) {\n      headerRow.value.getElementsByTagName('th')[0].setAttribute('colspan', 2);\n    }\n  });\n</script>\n\n<template>\n  <tr ref=\"headerRow\" class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <TableHeaderCell\n      v-if=\"!hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n    >\n      <Checkbox\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","headerRow","onSelect","emit","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExD,EAAE,YAAAM,EAAW,IAAIL,EAAOM,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC,GACnBC,IAAYD;AAElB,aAASE,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODJ,EAAA;AAAA,IACd;AAEA,WAAAK,EAAU,MAAM;AAKV,MAAAP,KAAA,QAAAA,EAAY,SAASD,EAAa,SAC1BK,EAAA,MAAM,qBAAqB,IAAI,EAAE,CAAC,EAAE,aAAa,WAAW,CAAC;AAAA,IACzE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableRow.js

@@ -7,7 +7,7 @@ import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js
 import "lodash-es/cloneDeep";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "46.7.3",
+  "version": "47.0.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",

package/dist/DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js","sources":["../src/components/DataView/DataView.constants.ts","../src/components/DataView/DataView.keys.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE = 12;\n","import { computed } from 'vue';\n\nimport { InjectionWithDefaults } from '../../../types/utils';\nimport { DEFAULT_PAGE_SIZE } from './DataView.constants';\nimport { DataViewInjection } from './DataView.types';\n\n// See: https://vuejs.org/guide/typescript/composition-api.html#typing-provide-inject\n\n/**\n * Miscellaneous data that is not related to pagination, sorting, or searching.\n * TODO: merge all DataView injections into one. https://leaflink.atlassian.net/browse/STASH-507\n */\nexport const DATA_VIEW_INJECTION: InjectionWithDefaults<DataViewInjection> = Object.freeze({\n  key: Symbol('DATA_VIEW_INJECTION_KEY'),\n  defaults: Object.freeze({\n    // Pagination\n    currentPage: computed(() => 1),\n    isPaginationEnabled: computed(() => false),\n    pageCount: computed(() => 1),\n    pageSize: computed(() => DEFAULT_PAGE_SIZE),\n    totalDataCount: computed(() => 0),\n    setPage() {},\n    goPrevPage() {},\n    goNextPage() {},\n\n    // Sorting\n    currentSortId: computed(() => undefined),\n    currentSortOrder: computed(() => undefined),\n    updateCurrentSort() {},\n\n    // Search\n    currentSearch: computed(() => ''),\n    updateCurrentSearch() {},\n\n    // Miscellanous\n    density: computed(() => undefined),\n    isLoading: computed(() => false),\n    isEmpty: computed(() => false),\n    isWithinModule: computed(() => false),\n    variant: computed(() => undefined),\n  }),\n});\n"],"names":["DEFAULT_PAGE_SIZE","DATA_VIEW_INJECTION","computed"],"mappings":";AAAO,MAAMA,IAAoB,ICYpBC,IAAgE,OAAO,OAAO;AAAA,EACzF,KAAK,OAAO,yBAAyB;AAAA,EACrC,UAAU,OAAO,OAAO;AAAA;AAAA,IAEtB,aAAaC,EAAS,MAAM,CAAC;AAAA,IAC7B,qBAAqBA,EAAS,MAAM,EAAK;AAAA,IACzC,WAAWA,EAAS,MAAM,CAAC;AAAA,IAC3B,UAAUA,EAAS,MAAMF,CAAiB;AAAA,IAC1C,gBAAgBE,EAAS,MAAM,CAAC;AAAA,IAChC,UAAU;AAAA,IAAC;AAAA,IACX,aAAa;AAAA,IAAC;AAAA,IACd,aAAa;AAAA,IAAC;AAAA;AAAA,IAGd,eAAeA,EAAS,MAAM;AAAA,KAAS;AAAA,IACvC,kBAAkBA,EAAS,MAAM;AAAA,KAAS;AAAA,IAC1C,oBAAoB;AAAA,IAAC;AAAA;AAAA,IAGrB,eAAeA,EAAS,MAAM,EAAE;AAAA,IAChC,sBAAsB;AAAA,IAAC;AAAA;AAAA,IAGvB,SAASA,EAAS,MAAM;AAAA,KAAS;AAAA,IACjC,WAAWA,EAAS,MAAM,EAAK;AAAA,IAC/B,SAASA,EAAS,MAAM,EAAK;AAAA,IAC7B,gBAAgBA,EAAS,MAAM,EAAK;AAAA,IACpC,SAASA,EAAS,MAAM;AAAA,KAAS;AAAA,EAAA,CAClC;AACH,CAAC;;;"}