@leaflink/stash 53.4.9 → 53.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/DataTable/index.js +577 -541
  2. package/dist/DataTable/index.js.map +1 -1
  3. package/dist/Table.js +116 -101
  4. package/dist/Table.js.map +1 -1
  5. package/dist/Table.vue.d.ts +21 -0
  6. package/dist/TableHeaderCell.js +43 -39
  7. package/dist/TableHeaderCell.js.map +1 -1
  8. package/dist/components.css +1 -1
  9. package/package.json +1 -1
package/dist/TableHeaderCell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableHeaderCell.js","sources":["../src/components/TableHeaderCell/TableHeaderCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import type { Header } from '@tanstack/vue-table';\n import { computed, inject, useCssModule } from 'vue';\n\n import { DATA_VIEW_INJECTION, SortValueDeserialized } from '../DataView/DataView.vue';\n import Icon from '../Icon/Icon.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n\n export interface TableHeaderCellProps {\n /**\n * A unique value correlated to the data in this header's column (without a leading hyphen/dash).\n * For example: `'product_name'` (with no leading dash/hyphen).\n */\n sortId?: SortValueDeserialized['id'];\n\n /**\n * TanStack header instance passed when Table is in schema-driven mode.\n * When provided, sorting is controlled by TanStack instead of DataView.\n * Typed as any so DataTable can pass Header<TData, unknown> without a type assertion.\n */\n schemaDrivenHeader?: Header<any, any>;\n }\n\n const props = withDefaults(defineProps<TableHeaderCellProps>(), {\n sortId: '',\n schemaDrivenHeader: undefined,\n });\n const classes = useCssModule();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n if (!tableInjection) {\n throw new Error('TableHeaderCell must be used within a Table component');\n }\n\n const { density, hasActions } = tableInjection;\n\n const hasSchemaDrivenHeader = computed(() => !!props.schemaDrivenHeader);\n\n // #region sorting\n const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n DATA_VIEW_INJECTION.key,\n DATA_VIEW_INJECTION.defaults,\n );\n\n const isSortable = computed(() => {\n if (hasSchemaDrivenHeader.value) {\n return props.schemaDrivenHeader!.column.getCanSort();\n }\n return !!props.sortId;\n });\n\n const isActiveSort = computed(() => {\n if (hasSchemaDrivenHeader.value) {\n return !!props.schemaDrivenHeader!.column.getIsSorted();\n }\n return currentSortId.value === props.sortId;\n });\n\n const sortDirection = computed<'asc' | 'desc' | false>(() => {\n if (hasSchemaDrivenHeader.value) {\n return props.schemaDrivenHeader!.column.getIsSorted();\n }\n if (isActiveSort.value && currentSortOrder.value) {\n return currentSortOrder.value;\n }\n return false;\n });\n\n function onRootClick(event: MouseEvent) {\n if (hasSchemaDrivenHeader.value) {\n props.schemaDrivenHeader!.column.getToggleSortingHandler()?.(event);\n return;\n }\n\n if (isSortable.value && typeof updateCurrentSort === 'function') {\n updateCurrentSort(props.sortId, { shouldEmit: true });\n }\n }\n // #endregion sorting\n</script>\n\n<template>\n <th\n class=\"stash-table-header-cell border-b border-r border-ice-200 p-3 text-xs font-medium text-ice-900\"\n :class=\"[\n classes.root,\n {\n 'bg-white': !isActiveSort,\n 'stash-table-header-cell--sorted bg-blue-100': isActiveSort,\n [classes['root--density-compact']]: density === 'compact',\n [classes['root--density-comfortable']]: density === 'comfortable',\n [classes['has-actions']]: hasActions,\n 'cursor-pointer': isSortable,\n },\n ]\"\n data-test=\"stash-table-header-cell\"\n @click=\"onRootClick\"\n >\n <div class=\"flex justify-between\" :class=\"classes['content-wrapper']\">\n <!-- @slot default -->\n <slot></slot>\n <div v-if=\"isSortable\" class=\"relative h-4 w-3\">\n <Icon\n v-if=\"!isActiveSort || sortDirection === 'asc'\"\n class=\"absolute text-ice-700\"\n :class=\"[classes.caret, classes['caret-up']]\"\n data-test=\"icon|caret-up\"\n name=\"caret-up\"\n size=\"dense\"\n />\n <Icon\n v-if=\"!isActiveSort || sortDirection === 'desc'\"\n class=\"absolute text-ice-700\"\n :class=\"[classes.caret, classes['caret-down']]\"\n data-test=\"icon|caret-down\"\n name=\"caret-down\"\n size=\"dense\"\n />\n </div>\n </div>\n </th>\n</template>\n\n<style module>\n @reference \"../../../styles/main.css\";\n\n @layer utilities {\n .root {\n border-left: none;\n border-top: none;\n position: sticky;\n top: 0;\n z-index: 1;\n }\n\n .root:last-of-type {\n border-right: 0;\n }\n\n .has-actions:last-of-type .content-wrapper {\n justify-content: flex-end !important;\n }\n\n .caret-up {\n top: -5px;\n }\n\n .caret-down {\n top: 2px;\n }\n\n :global(.stash-table-header-cell--sorted) .caret {\n top: -2px; /* vertically center the caret icon */\n }\n\n @media (width >= theme(--breakpoint-lg)) {\n .root--density-comfortable:last-of-type {\n padding-right: 24px;\n }\n\n .root--density-comfortable:first-of-type:not(\n :global(.stash-table-header-row__selection-cell),\n :global(.stash-table-row__selection-cell)\n ) {\n padding-left: 24px;\n }\n }\n }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","hasSchemaDrivenHeader","computed","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","isActiveSort","sortDirection","onRootClick","event","_a","_createElementBlock","_unref","_createElementVNode","_normalizeClass","_renderSlot","_ctx","_openBlock","_hoisted_1","_createBlock","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBE,UAAMA,IAAQC,GAIRC,IAAUC,EAAA,GAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,SAAAG,GAAS,YAAAC,EAAA,IAAeJ,GAE1BK,IAAwBC,EAAS,MAAM,CAAC,CAACV,EAAM,kBAAkB,GAGjE,EAAE,eAAAW,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBR;AAAA,MAC7DS,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAGhBC,IAAaL,EAAS,MACtBD,EAAsB,QACjBT,EAAM,mBAAoB,OAAO,WAAA,IAEnC,CAAC,CAACA,EAAM,MAChB,GAEKgB,IAAeN,EAAS,MACxBD,EAAsB,QACjB,CAAC,CAACT,EAAM,mBAAoB,OAAO,YAAA,IAErCW,EAAc,UAAUX,EAAM,MACtC,GAEKiB,IAAgBP,EAAiC,MACjDD,EAAsB,QACjBT,EAAM,mBAAoB,OAAO,YAAA,IAEtCgB,EAAa,SAASJ,EAAiB,QAClCA,EAAiB,QAEnB,EACR;AAED,aAASM,EAAYC,GAAmB;;AACtC,UAAIV,EAAsB,OAAO;AAC/B,SAAAW,IAAApB,EAAM,mBAAoB,OAAO,wBAAA,MAAjC,QAAAoB,EAA6DD;AAC7D;AAAA,MACF;AAEA,MAAIJ,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBb,EAAM,QAAQ,EAAE,YAAY,IAAM;AAAA,IAExD;2BAKAqB,EAsCK,MAAA;AAAA,MArCH,UAAM,iGAA+F;AAAA,QACrFC,EAAApB,CAAA,EAAQ;AAAA;uBAAmCc,EAAA;AAAA,yDAAqEA,EAAA;AAAA,UAAuB,CAAAM,EAAApB,CAAA,6BAAmCoB,EAAAf,CAAA,MAAO;AAAA,UAAyB,CAAAe,EAAApB,CAAA,iCAAuCoB,EAAAf,CAAA,MAAO;AAAA,UAA6B,CAAAe,EAAApB,CAAA,mBAAyBoB,EAAAd,CAAA;AAAA,4BAAsCO,EAAA;AAAA,QAAA;AAAA;MAWpW,aAAU;AAAA,MACT,SAAOG;AAAA,IAAA;MAERK,EAqBM,OAAA;AAAA,QArBD,OAAKC,EAAA,CAAC,wBAA+BF,EAAApB,CAAA,EAAO,iBAAA,CAAA,CAAA;AAAA,MAAA;QAE/CuB,EAAaC,EAAA,QAAA,SAAA;AAAA,QACFX,EAAA,SAAXY,EAAA,GAAAN,EAiBM,OAjBNO,GAiBM;AAAA,UAfK,CAAAZ,EAAA,SAAgBC,EAAA,UAAa,cADtCY,EAOEC,GAAA;AAAA;YALA,UAAM,yBAAuB,CACpBR,KAAQ,OAAOA,EAAApB,CAAA,EAAO,UAAA,CAAA,CAAA,CAAA;AAAA,YAC/B,aAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;UAGE,CAAAc,EAAA,SAAgBC,EAAA,UAAa,eADtCY,EAOEC,GAAA;AAAA;YALA,UAAM,yBAAuB,CACpBR,KAAQ,OAAOA,EAAApB,CAAA,EAAO,YAAA,CAAA,CAAA,CAAA;AAAA,YAC/B,aAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TableHeaderCell.js","sources":["../src/components/TableHeaderCell/TableHeaderCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import type { Header } from '@tanstack/vue-table';\n import { computed, inject, useCssModule } from 'vue';\n\n import { DATA_VIEW_INJECTION, SortValueDeserialized } from '../DataView/DataView.vue';\n import Icon from '../Icon/Icon.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n\n export interface TableHeaderCellProps {\n /**\n * A unique value correlated to the data in this header's column (without a leading hyphen/dash).\n * For example: `'product_name'` (with no leading dash/hyphen).\n */\n sortId?: SortValueDeserialized['id'];\n\n /**\n * TanStack header instance passed when Table is in schema-driven mode.\n * When provided, sorting is controlled by TanStack instead of DataView.\n * Typed as any so DataTable can pass Header<TData, unknown> without a type assertion.\n */\n schemaDrivenHeader?: Header<any, any>;\n }\n\n const props = withDefaults(defineProps<TableHeaderCellProps>(), {\n sortId: '',\n schemaDrivenHeader: undefined,\n });\n const classes = useCssModule();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n if (!tableInjection) {\n throw new Error('TableHeaderCell must be used within a Table component');\n }\n\n const { density, hasActions } = tableInjection;\n\n const hasSchemaDrivenHeader = computed(() => !!props.schemaDrivenHeader);\n\n const isPinnedHeader = computed(\n () => hasSchemaDrivenHeader.value && !!props.schemaDrivenHeader!.column.getIsPinned(),\n );\n\n // #region sorting\n const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n DATA_VIEW_INJECTION.key,\n DATA_VIEW_INJECTION.defaults,\n );\n\n const isSortable = computed(() => {\n if (hasSchemaDrivenHeader.value) {\n return props.schemaDrivenHeader!.column.getCanSort();\n }\n return !!props.sortId;\n });\n\n const isActiveSort = computed(() => {\n if (hasSchemaDrivenHeader.value) {\n return !!props.schemaDrivenHeader!.column.getIsSorted();\n }\n return currentSortId.value === props.sortId;\n });\n\n const sortDirection = computed<'asc' | 'desc' | false>(() => {\n if (hasSchemaDrivenHeader.value) {\n return props.schemaDrivenHeader!.column.getIsSorted();\n }\n if (isActiveSort.value && currentSortOrder.value) {\n return currentSortOrder.value;\n }\n return false;\n });\n\n function onRootClick(event: MouseEvent) {\n if (hasSchemaDrivenHeader.value) {\n props.schemaDrivenHeader!.column.getToggleSortingHandler()?.(event);\n return;\n }\n\n if (isSortable.value && typeof updateCurrentSort === 'function') {\n updateCurrentSort(props.sortId, { shouldEmit: true });\n }\n }\n // #endregion sorting\n</script>\n\n<template>\n <th\n class=\"stash-table-header-cell border-b border-r border-ice-200 p-3 text-xs font-medium text-ice-900\"\n :class=\"[\n classes.root,\n {\n 'bg-white': !isActiveSort,\n 'stash-table-header-cell--sorted bg-blue-100': isActiveSort,\n [classes['root--density-compact']]: density === 'compact',\n [classes['root--density-comfortable']]: density === 'comfortable',\n [classes['has-actions']]: hasActions,\n [classes['pinned-sticky']]: isPinnedHeader,\n 'cursor-pointer': isSortable,\n },\n ]\"\n data-test=\"stash-table-header-cell\"\n @click=\"onRootClick\"\n >\n <div class=\"flex justify-between\" :class=\"classes['content-wrapper']\">\n <!-- @slot default -->\n <slot></slot>\n <div v-if=\"isSortable\" class=\"relative h-4 w-3\">\n <Icon\n v-if=\"!isActiveSort || sortDirection === 'asc'\"\n class=\"absolute text-ice-700\"\n :class=\"[classes.caret, classes['caret-up']]\"\n data-test=\"icon|caret-up\"\n name=\"caret-up\"\n size=\"dense\"\n />\n <Icon\n v-if=\"!isActiveSort || sortDirection === 'desc'\"\n class=\"absolute text-ice-700\"\n :class=\"[classes.caret, classes['caret-down']]\"\n data-test=\"icon|caret-down\"\n name=\"caret-down\"\n size=\"dense\"\n />\n </div>\n </div>\n </th>\n</template>\n\n<style module>\n @reference \"../../../styles/main.css\";\n\n @layer utilities {\n .root {\n border-left: none;\n border-top: none;\n position: sticky;\n top: 0;\n z-index: 1;\n }\n\n .root:last-of-type {\n border-right: 0;\n }\n\n .pinned-sticky {\n z-index: 2;\n }\n\n .has-actions:last-of-type .content-wrapper {\n justify-content: flex-end !important;\n }\n\n .caret-up {\n top: -5px;\n }\n\n .caret-down {\n top: 2px;\n }\n\n :global(.stash-table-header-cell--sorted) .caret {\n top: -2px; /* vertically center the caret icon */\n }\n\n @media (width >= theme(--breakpoint-lg)) {\n .root--density-comfortable:last-of-type {\n padding-right: 24px;\n }\n\n .root--density-comfortable:first-of-type:not(\n :global(.stash-table-header-row__selection-cell),\n :global(.stash-table-row__selection-cell)\n ) {\n padding-left: 24px;\n }\n }\n }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","hasSchemaDrivenHeader","computed","isPinnedHeader","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","isActiveSort","sortDirection","onRootClick","event","_a","_createElementBlock","_unref","_createElementVNode","_normalizeClass","_renderSlot","_ctx","_openBlock","_hoisted_1","_createBlock","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBE,UAAMA,IAAQC,GAIRC,IAAUC,EAAA,GAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,SAAAG,GAAS,YAAAC,EAAA,IAAeJ,GAE1BK,IAAwBC,EAAS,MAAM,CAAC,CAACV,EAAM,kBAAkB,GAEjEW,IAAiBD;AAAA,MACrB,MAAMD,EAAsB,SAAS,CAAC,CAACT,EAAM,mBAAoB,OAAO,YAAA;AAAA,IAAY,GAIhF,EAAE,eAAAY,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBT;AAAA,MAC7DU,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAGhBC,IAAaN,EAAS,MACtBD,EAAsB,QACjBT,EAAM,mBAAoB,OAAO,WAAA,IAEnC,CAAC,CAACA,EAAM,MAChB,GAEKiB,IAAeP,EAAS,MACxBD,EAAsB,QACjB,CAAC,CAACT,EAAM,mBAAoB,OAAO,YAAA,IAErCY,EAAc,UAAUZ,EAAM,MACtC,GAEKkB,IAAgBR,EAAiC,MACjDD,EAAsB,QACjBT,EAAM,mBAAoB,OAAO,YAAA,IAEtCiB,EAAa,SAASJ,EAAiB,QAClCA,EAAiB,QAEnB,EACR;AAED,aAASM,EAAYC,GAAmB;;AACtC,UAAIX,EAAsB,OAAO;AAC/B,SAAAY,IAAArB,EAAM,mBAAoB,OAAO,wBAAA,MAAjC,QAAAqB,EAA6DD;AAC7D;AAAA,MACF;AAEA,MAAIJ,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBd,EAAM,QAAQ,EAAE,YAAY,IAAM;AAAA,IAExD;2BAKAsB,EAuCK,MAAA;AAAA,MAtCH,UAAM,iGAA+F;AAAA,QACrFC,EAAArB,CAAA,EAAQ;AAAA;uBAAmCe,EAAA;AAAA,yDAAqEA,EAAA;AAAA,UAAuB,CAAAM,EAAArB,CAAA,6BAAmCqB,EAAAhB,CAAA,MAAO;AAAA,UAAyB,CAAAgB,EAAArB,CAAA,iCAAuCqB,EAAAhB,CAAA,MAAO;AAAA,UAA6B,CAAAgB,EAAArB,CAAA,mBAAyBqB,EAAAf,CAAA;AAAA,UAAqB,CAAAe,EAAArB,CAAA,qBAA2BS,EAAA;AAAA,4BAA0CK,EAAA;AAAA,QAAA;AAAA;MAYxZ,aAAU;AAAA,MACT,SAAOG;AAAA,IAAA;MAERK,EAqBM,OAAA;AAAA,QArBD,OAAKC,EAAA,CAAC,wBAA+BF,EAAArB,CAAA,EAAO,iBAAA,CAAA,CAAA;AAAA,MAAA;QAE/CwB,EAAaC,EAAA,QAAA,SAAA;AAAA,QACFX,EAAA,SAAXY,EAAA,GAAAN,EAiBM,OAjBNO,GAiBM;AAAA,UAfK,CAAAZ,EAAA,SAAgBC,EAAA,UAAa,cADtCY,EAOEC,GAAA;AAAA;YALA,UAAM,yBAAuB,CACpBR,KAAQ,OAAOA,EAAArB,CAAA,EAAO,UAAA,CAAA,CAAA,CAAA;AAAA,YAC/B,aAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;UAGE,CAAAe,EAAA,SAAgBC,EAAA,UAAa,eADtCY,EAOEC,GAAA;AAAA;YALA,UAAM,yBAAuB,CACpBR,KAAQ,OAAOA,EAAArB,CAAA,EAAO,YAAA,CAAA,CAAA,CAAA;AAAA,YAC/B,aAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;;;;;;;;;;;;;;;;;"}