vuetify 3.0.6 → 3.1.0

package/lib/labs/VDataTable/VDataTable.sass

@@ -0,0 +1,106 @@
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-data-table
+  width: 100%
+
+.v-data-table__table
+  width: 100%
+  border-collapse: separate
+  border-spacing: 0
+
+.v-data-table__tr
+  &--focus
+    border: 1px dotted black
+
+.v-data-table
+  .v-table__wrapper
+    > table
+      > thead,
+        tbody
+        > tr
+          > td,
+            th
+            background: rgb(var(--v-theme-surface))
+
+            &.v-data-table-column--align-end
+              text-align: end
+
+              .v-data-table-header__content
+                flex-direction: row-reverse
+
+            &.v-data-table-column--no-padding
+              padding: 0 8px
+
+          > th
+            align-items: center
+
+          > th.v-data-table__th--sortable:hover
+              cursor: pointer
+              color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
+
+          > th:not(.v-data-table__th--sorted)
+              .v-data-table-header__sort-icon
+                opacity: 0
+
+              &:hover
+                .v-data-table-header__sort-icon
+                  opacity: 0.5
+
+.v-data-table-column--fixed
+  position: sticky
+  z-index: 2
+  left: 0
+
+.v-data-table-column--last-fixed
+  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+.v-data-table-group-header-row
+  td
+    background: lightgrey
+
+    > span
+      padding-left: 5px
+
+.v-data-table--loading
+  .v-data-table__td
+    opacity: 0.3
+
+.v-data-table__progress
+  th
+    position: relative
+    border: none !important
+    height: auto !important
+
+.v-data-table-group-header-row__column
+  padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important
+
+.v-data-table-header__content
+  display: flex
+  align-items: center
+
+.v-data-table-header__sort-badge
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  font-size: 0.875rem
+  padding: 4px
+  border-radius: 50%
+  background: $data-table-header-sort-badge-color
+  min-width: $data-table-header-sort-badge-size
+  min-height: $data-table-header-sort-badge-size
+  width: $data-table-header-sort-badge-size
+  height: $data-table-header-sort-badge-size
+
+.v-data-table-headers__loader
+  bottom: auto
+  top: 0
+  left: 0
+  position: absolute
+  right: 0
+  width: 100%
+  z-index: 1
+
+.v-data-table-rows-no-data
+  text-align: center

package/lib/labs/VDataTable/VDataTableColumn.mjs

@@ -0,0 +1,37 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { convertToUnit, defineFunctionalComponent } from "../../util/index.mjs";
+export const VDataTableColumn = defineFunctionalComponent({
+  align: {
+    type: String,
+    default: 'start'
+  },
+  fixed: Boolean,
+  fixedOffset: [Number, String],
+  height: [Number, String],
+  lastFixed: Boolean,
+  noPadding: Boolean,
+  tag: String,
+  width: [Number, String]
+}, (props, _ref) => {
+  var _slots$default;
+  let {
+    slots,
+    attrs
+  } = _ref;
+  const Tag = props.tag ?? 'td';
+  return _createVNode(Tag, _mergeProps({
+    "class": ['v-data-table__td', {
+      'v-data-table-column--fixed': props.fixed,
+      'v-data-table-column--last-fixed': props.lastFixed,
+      'v-data-table-column--no-padding': props.noPadding
+    }, `v-data-table-column--align-${props.align}`],
+    "style": {
+      height: convertToUnit(props.height),
+      width: convertToUnit(props.width),
+      left: convertToUnit(props.fixedOffset || null)
+    }
+  }, attrs), {
+    default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+  });
+});
+//# sourceMappingURL=VDataTableColumn.mjs.map

package/lib/labs/VDataTable/VDataTableColumn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDataTableColumn.mjs","names":["convertToUnit","defineFunctionalComponent","VDataTableColumn","align","type","String","default","fixed","Boolean","fixedOffset","Number","height","lastFixed","noPadding","tag","width","props","slots","attrs","Tag","left"],"sources":["../../../src/labs/VDataTable/VDataTableColumn.tsx"],"sourcesContent":["import { convertToUnit, defineFunctionalComponent } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const VDataTableColumn = defineFunctionalComponent({\n  align: {\n    type: String as PropType<'start' | 'center' | 'end'>,\n    default: 'start',\n  },\n  fixed: Boolean,\n  fixedOffset: [Number, String],\n  height: [Number, String],\n  lastFixed: Boolean,\n  noPadding: Boolean,\n  tag: String,\n  width: [Number, String],\n}, (props, { slots, attrs }) => {\n  const Tag = props.tag ?? 'td'\n  return (\n    <Tag\n      class={[\n        'v-data-table__td',\n        {\n          'v-data-table-column--fixed': props.fixed,\n          'v-data-table-column--last-fixed': props.lastFixed,\n          'v-data-table-column--no-padding': props.noPadding,\n        },\n        `v-data-table-column--align-${props.align}`,\n      ]}\n      style={{\n        height: convertToUnit(props.height),\n        width: convertToUnit(props.width),\n        left: convertToUnit(props.fixedOffset || null),\n      }}\n      { ...attrs }\n    >\n      { slots.default?.() }\n    </Tag>\n  )\n})\n"],"mappings":";SAASA,aAAa,EAAEC,yBAAyB;AAGjD,OAAO,MAAMC,gBAAgB,GAAGD,yBAAyB,CAAC;EACxDE,KAAK,EAAE;IACLC,IAAI,EAAEC,MAA8C;IACpDC,OAAO,EAAE;EACX,CAAC;EACDC,KAAK,EAAEC,OAAO;EACdC,WAAW,EAAE,CAACC,MAAM,EAAEL,MAAM,CAAC;EAC7BM,MAAM,EAAE,CAACD,MAAM,EAAEL,MAAM,CAAC;EACxBO,SAAS,EAAEJ,OAAO;EAClBK,SAAS,EAAEL,OAAO;EAClBM,GAAG,EAAET,MAAM;EACXU,KAAK,EAAE,CAACL,MAAM,EAAEL,MAAM;AACxB,CAAC,EAAE,CAACW,KAAK,WAAuB;EAAA;EAAA,IAArB;IAAEC,KAAK;IAAEC;EAAM,CAAC;EACzB,MAAMC,GAAG,GAAGH,KAAK,CAACF,GAAG,IAAI,IAAI;EAC7B;IAAA,SAEW,CACL,kBAAkB,EAClB;MACE,4BAA4B,EAAEE,KAAK,CAACT,KAAK;MACzC,iCAAiC,EAAES,KAAK,CAACJ,SAAS;MAClD,iCAAiC,EAAEI,KAAK,CAACH;IAC3C,CAAC,EACA,8BAA6BG,KAAK,CAACb,KAAM,EAAC,CAC5C;IAAA,SACM;MACLQ,MAAM,EAAEX,aAAa,CAACgB,KAAK,CAACL,MAAM,CAAC;MACnCI,KAAK,EAAEf,aAAa,CAACgB,KAAK,CAACD,KAAK,CAAC;MACjCK,IAAI,EAAEpB,aAAa,CAACgB,KAAK,CAACP,WAAW,IAAI,IAAI;IAC/C;EAAC,GACIS,KAAK;IAAA,kCAERD,KAAK,CAACX,OAAO,qBAAb,oBAAAW,KAAK,CAAY;EAAA;AAGzB,CAAC,CAAC"}

package/lib/labs/VDataTable/VDataTableFooter.css

@@ -0,0 +1,22 @@
+.v-data-table-footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0 8px;
+  justify-content: flex-end;
+}
+
+.v-data-table-footer__items-per-page {
+  padding-inline-end: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.v-data-table-footer__items-per-page > span {
+  padding-inline-end: 24px;
+}
+
+.v-data-table-footer__info {
+  display: flex;
+  padding-inline-end: 24px;
+}

package/lib/labs/VDataTable/VDataTableFooter.mjs

@@ -0,0 +1,105 @@
+import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+// Styles
+import "./VDataTableFooter.css";
+
+// Components
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { VSelect } from "../../components/VSelect/index.mjs"; // Composables
+import { usePagination } from "./composables/paginate.mjs"; // Utilities
+import { defineComponent } from "../../util/index.mjs"; // Types
+export const VDataTableFooter = defineComponent({
+  name: 'VDataTableFooter',
+  props: {
+    prevIcon: {
+      type: String,
+      default: '$prev'
+    },
+    nextIcon: {
+      type: String,
+      default: '$next'
+    },
+    firstIcon: {
+      type: String,
+      default: '$first'
+    },
+    lastIcon: {
+      type: String,
+      default: '$last'
+    },
+    itemsPerPageOptions: {
+      type: Array,
+      default: () => [{
+        value: 10,
+        title: '10'
+      }, {
+        value: 25,
+        title: '25'
+      }, {
+        value: 50,
+        title: '50'
+      }, {
+        value: 100,
+        title: '100'
+      }, {
+        value: -1,
+        title: 'All'
+      }]
+    },
+    showCurrentPage: Boolean
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      page,
+      pageCount,
+      startIndex,
+      stopIndex,
+      itemsLength,
+      itemsPerPage
+    } = usePagination();
+    return () => {
+      var _slots$prepend;
+      return _createVNode("div", {
+        "class": "v-data-table-footer"
+      }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots), _createVNode("div", {
+        "class": "v-data-table-footer__items-per-page"
+      }, [_createVNode("span", null, [_createTextVNode("Items per page:")]), _createVNode(VSelect, {
+        "items": props.itemsPerPageOptions,
+        "modelValue": itemsPerPage.value,
+        "onUpdate:modelValue": v => itemsPerPage.value = Number(v),
+        "density": "compact",
+        "variant": "outlined",
+        "hide-details": true
+      }, null)]), _createVNode("div", {
+        "class": "v-data-table-footer__info"
+      }, [_createVNode("div", null, [(startIndex.value ?? -1) + 1, _createTextVNode(" - "), stopIndex.value ?? 0, _createTextVNode(" of "), itemsLength.value ?? 0])]), _createVNode("div", {
+        "class": "v-data-table-footer__pagination"
+      }, [_createVNode(VBtn, {
+        "icon": props.firstIcon,
+        "variant": "plain",
+        "onClick": () => page.value = 1,
+        "disabled": page.value === 1
+      }, null), _createVNode(VBtn, {
+        "icon": props.prevIcon,
+        "variant": "plain",
+        "onClick": () => page.value = Math.max(1, page.value - 1),
+        "disabled": page.value === 1
+      }, null), props.showCurrentPage && _createVNode("div", {
+        "key": "page"
+      }, [_createTextVNode("page.value")]), _createVNode(VBtn, {
+        "icon": props.nextIcon,
+        "variant": "plain",
+        "onClick": () => page.value = Math.min(pageCount.value, page.value + 1),
+        "disabled": page.value === pageCount.value
+      }, null), _createVNode(VBtn, {
+        "icon": props.lastIcon,
+        "variant": "plain",
+        "onClick": () => page.value = pageCount.value,
+        "disabled": page.value === pageCount.value
+      }, null)])]);
+    };
+  }
+});
+//# sourceMappingURL=VDataTableFooter.mjs.map

package/lib/labs/VDataTable/VDataTableFooter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDataTableFooter.mjs","names":["VBtn","VSelect","usePagination","defineComponent","VDataTableFooter","name","props","prevIcon","type","String","default","nextIcon","firstIcon","lastIcon","itemsPerPageOptions","Array","value","title","showCurrentPage","Boolean","setup","slots","page","pageCount","startIndex","stopIndex","itemsLength","itemsPerPage","prepend","v","Number","Math","max","min"],"sources":["../../../src/labs/VDataTable/VDataTableFooter.tsx"],"sourcesContent":["// Styles\nimport './VDataTableFooter.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VSelect } from '@/components/VSelect'\n\n// Composables\nimport { usePagination } from './composables/paginate'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { InternalItem } from '@/composables/items'\n\nexport const VDataTableFooter = defineComponent({\n  name: 'VDataTableFooter',\n\n  props: {\n    prevIcon: {\n      type: String,\n      default: '$prev',\n    },\n    nextIcon: {\n      type: String,\n      default: '$next',\n    },\n    firstIcon: {\n      type: String,\n      default: '$first',\n    },\n    lastIcon: {\n      type: String,\n      default: '$last',\n    },\n    itemsPerPageOptions: {\n      type: Array as PropType<InternalItem[]>,\n      default: () => ([\n        { value: 10, title: '10' },\n        { value: 25, title: '25' },\n        { value: 50, title: '50' },\n        { value: 100, title: '100' },\n        { value: -1, title: 'All' },\n      ]),\n    },\n    showCurrentPage: Boolean,\n  },\n\n  setup (props, { slots }) {\n    const { page, pageCount, startIndex, stopIndex, itemsLength, itemsPerPage } = usePagination()\n\n    return () => (\n      <div\n        class=\"v-data-table-footer\"\n      >\n        { slots.prepend?.() }\n        <div class=\"v-data-table-footer__items-per-page\">\n          <span>Items per page:</span>\n          <VSelect\n            items={ props.itemsPerPageOptions }\n            modelValue={ itemsPerPage.value }\n            onUpdate:modelValue={ v => itemsPerPage.value = Number(v) }\n            density=\"compact\"\n            variant=\"outlined\"\n            hide-details\n          />\n        </div>\n        <div class=\"v-data-table-footer__info\">\n          <div>{ (startIndex.value ?? -1) + 1 } - { stopIndex.value ?? 0 } of { itemsLength.value ?? 0 }</div>\n        </div>\n        <div class=\"v-data-table-footer__pagination\">\n          <VBtn\n            icon={ props.firstIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = 1 }\n            disabled={ page.value === 1 }\n          />\n          <VBtn\n            icon={ props.prevIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = Math.max(1, page.value - 1) }\n            disabled={ page.value === 1 }\n          />\n          { props.showCurrentPage && (\n            <div key=\"page\">page.value</div>\n          ) }\n          <VBtn\n            icon={ props.nextIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = Math.min(pageCount.value, page.value + 1) }\n            disabled={ page.value === pageCount.value }\n          />\n          <VBtn\n            icon={ props.lastIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = pageCount.value }\n            disabled={ page.value === pageCount.value }\n          />\n        </div>\n      </div>\n    )\n  },\n})\n"],"mappings":"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"}

package/lib/labs/VDataTable/VDataTableFooter.sass

@@ -0,0 +1,23 @@
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-data-table-footer
+  display: flex
+  align-items: center
+  flex-wrap: wrap
+  padding: $data-table-footer-padding
+  justify-content: flex-end
+
+.v-data-table-footer__items-per-page
+  padding-inline-end: 24px
+  display: flex
+  align-items: center
+  justify-content: space-between
+
+  > span
+    padding-inline-end: 24px
+
+.v-data-table-footer__info
+  display: flex
+  padding-inline-end: 24px

package/lib/labs/VDataTable/VDataTableGroupHeaderRow.mjs

@@ -0,0 +1,88 @@
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+// Components
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { VCheckboxBtn } from "../../components/VCheckbox/index.mjs";
+import { VDataTableColumn } from "./VDataTableColumn.mjs"; // Composables
+import { useHeaders } from "./composables/headers.mjs";
+import { useSelection } from "./composables/select.mjs";
+import { useGroupBy } from "./composables/group.mjs"; // Utilities
+import { computed } from 'vue';
+import { defineComponent } from "../../util/index.mjs"; // Types
+export const VDataTableGroupHeaderRow = defineComponent({
+  name: 'VDataTableGroupHeaderRow',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      opened,
+      toggleGroup,
+      extractRows
+    } = useGroupBy();
+    const {
+      isSelected,
+      isSomeSelected,
+      select
+    } = useSelection();
+    const {
+      columns
+    } = useHeaders();
+    const rows = computed(() => {
+      return extractRows([props.item]);
+    });
+    return () => _createVNode("tr", {
+      "class": "v-data-table-group-header-row",
+      "style": {
+        '--v-data-table-group-header-row-depth': props.item.depth
+      }
+    }, [columns.value.map(column => {
+      if (column.key === 'data-table-group') {
+        var _slots$dataTableGro;
+        const icon = opened.value.has(props.item.id) ? '$expand' : '$next';
+        const onClick = () => toggleGroup(props.item.id);
+        return ((_slots$dataTableGro = slots['data-table-group']) == null ? void 0 : _slots$dataTableGro.call(slots, {
+          item: props.item,
+          count: rows.value.length,
+          props: {
+            icon,
+            onClick
+          }
+        })) ?? _createVNode(VDataTableColumn, {
+          "class": "v-data-table-group-header-row__column"
+        }, {
+          default: () => [_createVNode(VBtn, {
+            "size": "small",
+            "variant": "text",
+            "icon": icon,
+            "onClick": onClick
+          }, null), _createVNode("span", null, [props.item.value]), _createVNode("span", null, [_createTextVNode("("), rows.value.length, _createTextVNode(")")])]
+        });
+      }
+      if (column.key === 'data-table-select') {
+        var _slots$dataTableSel;
+        const modelValue = isSelected(rows.value);
+        const indeterminate = isSomeSelected(rows.value) && !modelValue;
+        const selectGroup = v => select(rows.value, v);
+        return ((_slots$dataTableSel = slots['data-table-select']) == null ? void 0 : _slots$dataTableSel.call(slots, {
+          props: {
+            modelValue,
+            indeterminate,
+            'onUpdate:modelValue': selectGroup
+          }
+        })) ?? _createVNode("td", null, [_createVNode(VCheckboxBtn, {
+          "modelValue": modelValue,
+          "indeterminate": indeterminate,
+          "onUpdate:modelValue": selectGroup
+        }, null)]);
+      }
+      return _createVNode("td", null, null);
+    })]);
+  }
+});
+//# sourceMappingURL=VDataTableGroupHeaderRow.mjs.map

package/lib/labs/VDataTable/VDataTableGroupHeaderRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDataTableGroupHeaderRow.mjs","names":["VBtn","VCheckboxBtn","VDataTableColumn","useHeaders","useSelection","useGroupBy","computed","defineComponent","VDataTableGroupHeaderRow","name","props","item","type","Object","required","setup","slots","opened","toggleGroup","extractRows","isSelected","isSomeSelected","select","columns","rows","depth","value","map","column","key","icon","has","id","onClick","count","length","modelValue","indeterminate","selectGroup","v"],"sources":["../../../src/labs/VDataTable/VDataTableGroupHeaderRow.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VDataTableColumn } from './VDataTableColumn'\n\n// Composables\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useGroupBy } from './composables/group'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { GroupHeaderItem } from './types'\n\nexport const VDataTableGroupHeaderRow = defineComponent({\n  name: 'VDataTableGroupHeaderRow',\n\n  props: {\n    item: {\n      type: Object as PropType<GroupHeaderItem>,\n      required: true,\n    },\n  },\n\n  setup (props, { slots }) {\n    const { opened, toggleGroup, extractRows } = useGroupBy()\n    const { isSelected, isSomeSelected, select } = useSelection()\n    const { columns } = useHeaders()\n\n    const rows = computed(() => {\n      return extractRows([props.item])\n    })\n\n    return () => (\n      <tr\n        class=\"v-data-table-group-header-row\"\n        style={{\n          '--v-data-table-group-header-row-depth': props.item.depth,\n        }}\n      >\n        { columns.value.map(column => {\n          if (column.key === 'data-table-group') {\n            const icon = opened.value.has(props.item.id) ? '$expand' : '$next'\n            const onClick = () => toggleGroup(props.item.id)\n\n            return slots['data-table-group']?.({ item: props.item, count: rows.value.length, props: { icon, onClick } }) ?? (\n              <VDataTableColumn class=\"v-data-table-group-header-row__column\">\n                <VBtn\n                  size=\"small\"\n                  variant=\"text\"\n                  icon={ icon }\n                  onClick={ onClick }\n                />\n                <span>{ props.item.value }</span>\n                <span>({ rows.value.length })</span>\n              </VDataTableColumn>\n            )\n          }\n\n          if (column.key === 'data-table-select') {\n            const modelValue = isSelected(rows.value)\n            const indeterminate = isSomeSelected(rows.value) && !modelValue\n            const selectGroup = (v: boolean) => select(rows.value, v)\n            return slots['data-table-select']?.({ props: { modelValue, indeterminate, 'onUpdate:modelValue': selectGroup } }) ?? (\n              <td>\n                <VCheckboxBtn\n                  modelValue={ modelValue }\n                  indeterminate={ indeterminate }\n                  onUpdate:modelValue={ selectGroup }\n                />\n              </td>\n            )\n          }\n\n          return <td />\n        })}\n      </tr>\n    )\n  },\n})\n"],"mappings":";AAAA;AAAA,SACSA,IAAI;AAAA,SACJC,YAAY;AAAA,SACZC,gBAAgB,kCAEzB;AAAA,SACSC,UAAU;AAAA,SACVC,YAAY;AAAA,SACZC,UAAU,mCAEnB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,eAAe,gCAExB;AAIA,OAAO,MAAMC,wBAAwB,GAAGD,eAAe,CAAC;EACtDE,IAAI,EAAE,0BAA0B;EAEhCC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJC,IAAI,EAAEC,MAAmC;MACzCC,QAAQ,EAAE;IACZ;EACF,CAAC;EAEDC,KAAK,CAAEL,KAAK,QAAa;IAAA,IAAX;MAAEM;IAAM,CAAC;IACrB,MAAM;MAAEC,MAAM;MAAEC,WAAW;MAAEC;IAAY,CAAC,GAAGd,UAAU,EAAE;IACzD,MAAM;MAAEe,UAAU;MAAEC,cAAc;MAAEC;IAAO,CAAC,GAAGlB,YAAY,EAAE;IAC7D,MAAM;MAAEmB;IAAQ,CAAC,GAAGpB,UAAU,EAAE;IAEhC,MAAMqB,IAAI,GAAGlB,QAAQ,CAAC,MAAM;MAC1B,OAAOa,WAAW,CAAC,CAACT,KAAK,CAACC,IAAI,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO;MAAA,SAEG,+BAA+B;MAAA,SAC9B;QACL,uCAAuC,EAAED,KAAK,CAACC,IAAI,CAACc;MACtD;IAAC,IAECF,OAAO,CAACG,KAAK,CAACC,GAAG,CAACC,MAAM,IAAI;MAC5B,IAAIA,MAAM,CAACC,GAAG,KAAK,kBAAkB,EAAE;QAAA;QACrC,MAAMC,IAAI,GAAGb,MAAM,CAACS,KAAK,CAACK,GAAG,CAACrB,KAAK,CAACC,IAAI,CAACqB,EAAE,CAAC,GAAG,SAAS,GAAG,OAAO;QAClE,MAAMC,OAAO,GAAG,MAAMf,WAAW,CAACR,KAAK,CAACC,IAAI,CAACqB,EAAE,CAAC;QAEhD,OAAO,wBAAAhB,KAAK,CAAC,kBAAkB,CAAC,qBAAzB,yBAAAA,KAAK,EAAuB;UAAEL,IAAI,EAAED,KAAK,CAACC,IAAI;UAAEuB,KAAK,EAAEV,IAAI,CAACE,KAAK,CAACS,MAAM;UAAEzB,KAAK,EAAE;YAAEoB,IAAI;YAAEG;UAAQ;QAAE,CAAC,CAAC;UAAA,SAClF;QAAuC;UAAA;YAAA,QAEtD,OAAO;YAAA,WACJ,MAAM;YAAA,QACPH,IAAI;YAAA,WACDG;UAAO,sCAEXvB,KAAK,CAACC,IAAI,CAACe,KAAK,uDACfF,IAAI,CAACE,KAAK,CAACS,MAAM;QAAA,EAE7B;MACH;MAEA,IAAIP,MAAM,CAACC,GAAG,KAAK,mBAAmB,EAAE;QAAA;QACtC,MAAMO,UAAU,GAAGhB,UAAU,CAACI,IAAI,CAACE,KAAK,CAAC;QACzC,MAAMW,aAAa,GAAGhB,cAAc,CAACG,IAAI,CAACE,KAAK,CAAC,IAAI,CAACU,UAAU;QAC/D,MAAME,WAAW,GAAIC,CAAU,IAAKjB,MAAM,CAACE,IAAI,CAACE,KAAK,EAAEa,CAAC,CAAC;QACzD,OAAO,wBAAAvB,KAAK,CAAC,mBAAmB,CAAC,qBAA1B,yBAAAA,KAAK,EAAwB;UAAEN,KAAK,EAAE;YAAE0B,UAAU;YAAEC,aAAa;YAAE,qBAAqB,EAAEC;UAAY;QAAE,CAAC,CAAC;UAAA,cAG9FF,UAAU;UAAA,iBACPC,aAAa;UAAA,uBACPC;QAAW,UAGtC;MACH;MAEA;IACF,CAAC,CAAC,EAEL;EACH;AACF,CAAC,CAAC"}

package/lib/labs/VDataTable/VDataTableHeaders.mjs

@@ -0,0 +1,143 @@
+import { resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode } from "vue";
+// Components
+import { VCheckboxBtn } from "../../components/VCheckbox/index.mjs";
+import { VDataTableColumn } from "./VDataTableColumn.mjs";
+import { VIcon } from "../../components/VIcon/index.mjs"; // Composables
+import { IconValue } from "../../composables/icons.mjs";
+import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { useHeaders } from "./composables/headers.mjs";
+import { useSelection } from "./composables/select.mjs";
+import { useSort } from "./composables/sort.mjs"; // Utilities
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs"; // Types
+export const VDataTableHeaders = defineComponent({
+  name: 'VDataTableHeaders',
+  props: {
+    color: String,
+    sticky: Boolean,
+    multiSort: Boolean,
+    sortAscIcon: {
+      type: IconValue,
+      default: '$sortAsc'
+    },
+    sortDescIcon: {
+      type: IconValue,
+      default: '$sortDesc'
+    },
+    ...makeLoaderProps()
+  },
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    const {
+      toggleSort,
+      sortBy
+    } = useSort();
+    const {
+      someSelected,
+      allSelected,
+      selectAll
+    } = useSelection();
+    const {
+      columns,
+      headers
+    } = useHeaders();
+    const {
+      loaderClasses
+    } = useLoader(props);
+    const getFixedStyles = (column, y) => {
+      if (!props.sticky && !column.fixed) return null;
+      return {
+        position: 'sticky',
+        zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined,
+        // TODO: This needs to account for possible previous fixed columns.
+        left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,
+        // TODO: This needs to account for possible row/colspan of previous columns
+        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined
+      };
+    };
+    function getSortIcon(id) {
+      const item = sortBy.value.find(item => item.key === id);
+      if (!item) return props.sortAscIcon;
+      return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon;
+    }
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(props, 'color');
+    const VDataTableHeaderCell = _ref2 => {
+      let {
+        column,
+        x,
+        y
+      } = _ref2;
+      const isSorted = !!sortBy.value.find(x => x.key === column.key);
+      const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand';
+      return _createVNode(VDataTableColumn, {
+        "tag": "th",
+        "align": column.align,
+        "class": ['v-data-table__th', {
+          'v-data-table__th--sortable': column.sortable,
+          'v-data-table__th--sorted': isSorted
+        }, loaderClasses.value],
+        "style": {
+          width: convertToUnit(column.width),
+          minWidth: convertToUnit(column.width),
+          ...getFixedStyles(column, y)
+        },
+        "colspan": column.colspan,
+        "rowspan": column.rowspan,
+        "onClick": column.sortable ? () => toggleSort(column.key) : undefined,
+        "lastFixed": column.lastFixed,
+        "noPadding": noPadding
+      }, {
+        default: () => {
+          const slotName = `column.${column.key}`;
+          const slotProps = {
+            column,
+            selectAll
+          };
+          if (slots[slotName]) return slots[slotName](slotProps);
+          if (column.key === 'data-table-select') {
+            var _slots$columnDataTa;
+            return ((_slots$columnDataTa = slots['column.data-table-select']) == null ? void 0 : _slots$columnDataTa.call(slots, slotProps)) ?? _createVNode(VCheckboxBtn, {
+              "modelValue": allSelected.value,
+              "indeterminate": someSelected.value && !allSelected.value,
+              "onUpdate:modelValue": selectAll
+            }, null);
+          }
+          return _createVNode("div", {
+            "class": "v-data-table-header__content"
+          }, [_createVNode("span", null, [column.title]), column.sortable && _createVNode(VIcon, {
+            "key": "icon",
+            "class": "v-data-table-header__sort-icon",
+            "icon": getSortIcon(column.key)
+          }, null), props.multiSort && isSorted && _createVNode("div", {
+            "key": "badge",
+            "class": ['v-data-table-header__sort-badge', ...backgroundColorClasses.value],
+            "style": backgroundColorStyles.value
+          }, [sortBy.value.findIndex(x => x.key === column.key) + 1])]);
+        }
+      });
+    };
+    useRender(() => _createVNode(_Fragment, null, [headers.value.map((row, y) => _createVNode("tr", null, [row.map((column, x) => _createVNode(VDataTableHeaderCell, {
+      "column": column,
+      "x": x,
+      "y": y
+    }, null))])), props.loading && _createVNode("tr", {
+      "class": "v-data-table__progress"
+    }, [_createVNode("th", {
+      "colspan": columns.value.length
+    }, [_createVNode(LoaderSlot, {
+      "name": "v-data-table-headers",
+      "active": true,
+      "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+      "indeterminate": true
+    }, {
+      default: slots.loader
+    })])])]));
+  }
+});
+//# sourceMappingURL=VDataTableHeaders.mjs.map

package/lib/labs/VDataTable/VDataTableHeaders.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDataTableHeaders.mjs","names":["VCheckboxBtn","VDataTableColumn","VIcon","IconValue","LoaderSlot","makeLoaderProps","useLoader","useBackgroundColor","useHeaders","useSelection","useSort","convertToUnit","defineComponent","useRender","VDataTableHeaders","name","props","color","String","sticky","Boolean","multiSort","sortAscIcon","type","default","sortDescIcon","setup","slots","emit","toggleSort","sortBy","someSelected","allSelected","selectAll","columns","headers","loaderClasses","getFixedStyles","column","y","fixed","position","zIndex","undefined","left","fixedOffset","top","getSortIcon","id","item","value","find","key","order","backgroundColorClasses","backgroundColorStyles","VDataTableHeaderCell","x","isSorted","noPadding","align","sortable","width","minWidth","colspan","rowspan","lastFixed","slotName","slotProps","title","findIndex","map","row","loading","length","loader"],"sources":["../../../src/labs/VDataTable/VDataTableHeaders.tsx"],"sourcesContent":["// Components\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\n\n// Utilities\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\n// Types\nimport type { InternalDataTableHeader } from './types'\n\nexport const VDataTableHeaders = defineComponent({\n  name: 'VDataTableHeaders',\n\n  props: {\n    color: String,\n    sticky: Boolean,\n    multiSort: Boolean,\n    sortAscIcon: {\n      type: IconValue,\n      default: '$sortAsc',\n    },\n    sortDescIcon: {\n      type: IconValue,\n      default: '$sortDesc',\n    },\n\n    ...makeLoaderProps(),\n  },\n\n  setup (props, { slots, emit }) {\n    const { toggleSort, sortBy } = useSort()\n    const { someSelected, allSelected, selectAll } = useSelection()\n    const { columns, headers } = useHeaders()\n    const { loaderClasses } = useLoader(props)\n\n    const getFixedStyles = (column: InternalDataTableHeader, y: number) => {\n      if (!props.sticky && !column.fixed) return null\n\n      return {\n        position: 'sticky',\n        zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined, // TODO: This needs to account for possible previous fixed columns.\n        left: column.fixed ? convertToUnit(column.fixedOffset) : undefined, // TODO: This needs to account for possible row/colspan of previous columns\n        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,\n      }\n    }\n\n    function getSortIcon (id: string) {\n      const item = sortBy.value.find(item => item.key === id)\n\n      if (!item) return props.sortAscIcon\n\n      return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon\n    }\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {\n      const isSorted = !!sortBy.value.find(x => x.key === column.key)\n      const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'\n\n      return (\n        <VDataTableColumn\n          tag=\"th\"\n          align={ column.align }\n          class={[\n            'v-data-table__th',\n            {\n              'v-data-table__th--sortable': column.sortable,\n              'v-data-table__th--sorted': isSorted,\n            },\n            loaderClasses.value,\n          ]}\n          style={{\n            width: convertToUnit(column.width),\n            minWidth: convertToUnit(column.width),\n            ...getFixedStyles(column, y),\n          }}\n          colspan={column.colspan}\n          rowspan={column.rowspan}\n          onClick={column.sortable ? () => toggleSort(column.key) : undefined}\n          lastFixed={column.lastFixed}\n          noPadding={noPadding}\n        >\n          {{\n            default: () => {\n              const slotName = `column.${column.key}`\n              const slotProps = {\n                column,\n                selectAll,\n              }\n\n              if (slots[slotName]) return slots[slotName]!(slotProps)\n\n              if (column.key === 'data-table-select') {\n                return slots['column.data-table-select']?.(slotProps) ?? (\n                  <VCheckboxBtn\n                    modelValue={ allSelected.value }\n                    indeterminate={ someSelected.value && !allSelected.value }\n                    onUpdate:modelValue={ selectAll }\n                  />\n                )\n              }\n\n              return (\n                <div class=\"v-data-table-header__content\">\n                  <span>{ column.title }</span>\n                  { column.sortable && (\n                    <VIcon\n                      key=\"icon\"\n                      class=\"v-data-table-header__sort-icon\"\n                      icon={ getSortIcon(column.key) }\n                    />\n                  )}\n                  { props.multiSort && isSorted && (\n                    <div\n                      key=\"badge\"\n                      class={[\n                        'v-data-table-header__sort-badge',\n                        ...backgroundColorClasses.value,\n                      ]}\n                      style={backgroundColorStyles.value}\n                    >\n                      {sortBy.value.findIndex(x => x.key === column.key) + 1}\n                    </div>\n                  ) }\n                </div>\n              )\n            },\n          }}\n        </VDataTableColumn>\n      )\n    }\n\n    useRender(() => (\n      <>\n        { headers.value.map((row, y) => (\n          <tr>\n            { row.map((column, x) => (\n              <VDataTableHeaderCell column={ column} x={ x } y={ y } />\n            )) }\n          </tr>\n        )) }\n\n        { props.loading && (\n          <tr class=\"v-data-table__progress\">\n            <th colspan={ columns.value.length }>\n\n            <LoaderSlot\n              name=\"v-data-table-headers\"\n              active\n              color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n              indeterminate\n              v-slots={{ default: slots.loader }}\n            />\n            </th>\n          </tr>\n        )}\n      </>\n    ))\n  },\n})\n"],"mappings":"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"}

package/lib/labs/VDataTable/VDataTableRow.mjs

@@ -0,0 +1,75 @@
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
+// Components
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { VCheckboxBtn } from "../../components/VCheckbox/index.mjs"; // Composables
+import { useExpanded } from "./composables/expand.mjs";
+import { useHeaders } from "./composables/headers.mjs";
+import { useSelection } from "./composables/select.mjs";
+import { VDataTableColumn } from "./VDataTableColumn.mjs"; // Utilities
+import { defineComponent, useRender } from "../../util/index.mjs"; // Types
+export const VDataTableRow = defineComponent({
+  name: 'VDataTableRow',
+  props: {
+    item: Object
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      isSelected,
+      toggleSelect
+    } = useSelection();
+    const {
+      isExpanded,
+      toggleExpand
+    } = useExpanded();
+    const {
+      columns
+    } = useHeaders();
+    useRender(() => _createVNode("tr", {
+      "class": ['v-data-table__tr']
+    }, [!columns.value.length && _createVNode(VDataTableColumn, {
+      "key": "no-data"
+    }, slots), props.item && columns.value.map((column, i) => _createVNode(VDataTableColumn, {
+      "align": column.align,
+      "fixed": column.fixed,
+      "fixedOffset": column.fixedOffset,
+      "lastFixed": column.lastFixed,
+      "noPadding": column.key === 'data-table-select' || column.key === 'data-table-expand',
+      "width": column.width
+    }, {
+      default: () => {
+        const item = props.item;
+        const slotName = `item.${column.key}`;
+        const slotProps = {
+          item: props.item,
+          columns: columns.value,
+          isSelected,
+          toggleSelect,
+          isExpanded,
+          toggleExpand
+        };
+        if (slots[slotName]) return slots[slotName](slotProps);
+        if (column.key === 'data-table-select') {
+          var _slots$itemDataTabl;
+          return ((_slots$itemDataTabl = slots['item.data-table-select']) == null ? void 0 : _slots$itemDataTabl.call(slots, slotProps)) ?? _createVNode(VCheckboxBtn, {
+            "modelValue": isSelected([item]),
+            "onClick": () => toggleSelect(item)
+          }, null);
+        }
+        if (column.key === 'data-table-expand') {
+          var _slots$itemDataTabl2;
+          return ((_slots$itemDataTabl2 = slots['item.data-table-expand']) == null ? void 0 : _slots$itemDataTabl2.call(slots, slotProps)) ?? _createVNode(VBtn, {
+            "icon": isExpanded(item) ? '$collapse' : '$expand',
+            "size": "small",
+            "variant": "text",
+            "onClick": () => toggleExpand(item)
+          }, null);
+        }
+        return item.columns[column.key];
+      }
+    }))]));
+  }
+});
+//# sourceMappingURL=VDataTableRow.mjs.map