@zeedhi/vuetify 1.112.0 → 3.0.0

package/src/components/zd-grid/ZdGrid.vue

@@ -0,0 +1,350 @@
+<template>
+  <v-data-table
+    v-show="instance.isVisible"
+    ref="root"
+    :id="instance.name"
+    v-model="selectedRows"
+    :class="[
+      'zd-grid',
+      instance.cssClass,
+      {
+        'zd-grid--loading': instance.datasource.loading,
+        'zd-grid--cell-selection': instance.cellSelection,
+      },
+    ]"
+    :style="[
+      cssColorVars,
+      {
+        height: $formatSize(instance.height),
+        width: $formatSize(instance.width),
+        maxHeight: $formatSize(instance.maxHeight),
+        minHeight: $formatSize(instance.minHeight),
+        maxWidth: $formatSize(instance.maxWidth),
+        minWidth: $formatSize(instance.minWidth),
+      },
+      $styleObject(instance.cssStyle),
+    ]"
+    :theme="instance.theme"
+    sort-asc-icon="$collapse"
+    sort-desc-icon="$expand"
+    fixed-header
+    multi-sort
+    hide-default-footer
+    :name="instance.name"
+    :headers="headers"
+    :items="computedData"
+    :search="instance.datasource.search"
+    :density="instance.dense ? 'compact' : 'default'"
+    :loading="instance.datasource.loading"
+    :item-value="instance.datasource.uniqueKey"
+    :items-per-page="-1"
+    no-filter
+    :sort-by="sortBy"
+    disable-sort
+    return-object
+    tabindex="0"
+    @update:current-items="changeData()"
+    @update:sort-by="updateSortBy($event)"
+  >
+    <template v-slot:top>
+      <zd-grid-toolbar v-if="!hasToolbarSlot"></zd-grid-toolbar>
+      <slot name="toolbarSlot"></slot>
+    </template>
+
+    <template
+      v-slot:headers="{ columns: tableColumns, isSorted, getSortIcon, toggleSort, sortBy }"
+    >
+      <zd-grid-header-row
+        v-if="instance.showHeader"
+        :name="instance.name"
+        :selectable="instance.selectable"
+        :headerBackground="instance.headerBackground"
+        :showSelectAll="instance.showSelectAll"
+        :allselectedState="allselectedState"
+        :visibleColumns="visibleColumns"
+        :dragColumns="instance.dragColumns"
+        :headerCellTextColor="instance.headerCellTextColor"
+        :resizeColumns="instance.resizeColumns"
+        :getSortIcon="getSortIcon"
+        :toggleSort="toggleSort"
+        :sortBy="sortBy"
+        :tableColumns="tableColumns"
+        :isSorted="isSorted"
+        @resizeMousedown="resizeMouseDownHandler($event.column, $event.event)"
+        @resizeClick="resizeClickHandler($event.event)"
+        @selectAllClick="selectAllClick($event)"
+      ></zd-grid-header-row>
+    </template>
+
+    <template
+      v-if="addTopPadding()"
+      v-slot:body.prepend="{ headers }"
+    >
+      <tr>
+        <td
+          :colspan="headers.length"
+          :style="`padding-top:${scrollData.startHeight}px`"
+        >
+        </td>
+      </tr>
+    </template>
+
+    <template
+      v-if="addBottomPadding()"
+      v-slot:body.append="{ headers }"
+    >
+      <tr>
+        <td
+          :colspan="headers.length"
+          :style="`padding-top:${scrollData.endHeight}px`"
+        >
+        </td>
+      </tr>
+    </template>
+
+    <template
+      v-if="instance.datasource.data.length"
+      v-slot:body="{ items, internalItems, isSelected }"
+    >
+      <template v-for="(item, i) in items">
+        <zd-grid-row
+          v-if="shouldRender(i)"
+          :key="item.id"
+          :isSelected="isSelected(internalItems[i])"
+          :isCurrentRow="isCurrentRow(item)"
+          :selectable="instance.selectable"
+          :selectionDisabled="instance.callDisableSelection(item)"
+          :cellSelection="instance.cellSelection"
+          :isCurrent="isCurrent"
+          :columns="visibleColumns"
+          :row="item"
+          :fixedLeft="fixedLeft"
+          :fixedRight="fixedRight"
+          @cellFocus="cellFocus($event)"
+          @cellClick="cellClick($event)"
+          @click="rowClick(item, $event)"
+          @focusin="cellFocusIn($event)"
+          @checkboxClick="selectRowClick(item, !isSelected(internalItems[i]), $event)"
+        ></zd-grid-row>
+      </template>
+    </template>
+
+    <template v-slot:no-data>
+      <zd-iterable-no-data>
+        <template v-slot:errorSlot>
+          <slot name="errorSlot"></slot>
+        </template>
+        <template v-slot:noResultSlot>
+          <slot name="noResultSlot"></slot>
+        </template>
+        <template v-slot:noDataSlot>
+          <slot name="noDataSlot"></slot>
+        </template>
+      </zd-iterable-no-data>
+    </template>
+
+    <template v-slot:bottom>
+      <zd-grid-footer v-if="instance.showFooter && !hasFooterSlot"></zd-grid-footer>
+      <slot name="footerSlot"></slot>
+    </template>
+  </v-data-table>
+</template>
+
+<script lang="ts" src="./ZdGrid.ts"></script>
+
+<style lang="scss">
+.zd-grid {
+  font-size: var(--zd-font-body1-size);
+
+  &.v-table--density-compact {
+    --v-table-row-height: 29px !important;
+    --v-table-header-height: 24px !important;
+
+    .zd-grid__checkbox {
+      .v-icon {
+        font-size: 1rem;
+      }
+
+      .v-checkbox-btn {
+        min-height: unset;
+      }
+    }
+  }
+
+  &:active, &:focus, &:focus-within {
+    .zd-table-cell {
+      color: var(--v-primary-base) !important;
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  th.zd-grid__header {
+    cursor: pointer;
+  }
+
+  &__header-name {
+    font-size: var(--zd-font-body2-size);
+    opacity: 0.7;
+  }
+
+  &__header:hover {
+    .zd-grid__header-name {
+      opacity: 1;
+    }
+  }
+
+  &__header-cell {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__selectable-header, &__selectable-cell {
+    width: 44px;
+    min-width: 44px;
+  }
+
+  &__header-sort {
+    display: flex;
+    flex-direction: column;
+
+    .v-icon {
+      height: 10px;
+    }
+  }
+
+  &__sort-order {
+    text-align: center;
+    font-size: 9px;
+    height: 10px;
+  }
+
+  &__header-content {
+    display: flex;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  &__header-name {
+    display: inline-block;
+    vertical-align: bottom;
+    min-width: 23px;
+  }
+
+  &__cell-content, &__header-cell {
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+  }
+
+  background-color: var(--background-color, transparent);
+
+  &.v-theme--light {
+    --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);
+    --row-active-color: color-mix(in srgb, var(--theme-background-color), black 4%);
+
+    .zd-grid__cell--fixed, .zd-grid__action-cell--fixed {
+      background-color: var(--fixed-column-color);
+    }
+
+    .zd-grid__row {
+      &:not(&--current):hover {
+        background: color-mix(in srgb, var(--theme-background-color), black 6%) !important;
+      }
+
+      &--selected {
+        background: var(--row-active-color) !important;
+      }
+    }
+  }
+
+  &.v-theme--dark {
+    --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);
+    --row-active-color: color-mix(in srgb, var(--theme-background-color), white 22%);
+
+    .zd-grid__cell--fixed, .zd-grid__action-cell--fixed {
+      background-color: var(--fixed-column-color);
+    }
+
+    .zd-grid__row {
+      &:not(&--current):hover {
+        background: color-mix(in srgb, var(--theme-background-color), white 30%) !important;
+      }
+
+      &--selected {
+        background: var(--row-active-color) !important;
+      }
+    }
+  }
+
+  --current-row-color: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 25%);
+
+  &__row--current {
+    .zd-grid__cell--fixed {
+      color: var(--v-primary-base) !important;
+    }
+
+    &:hover {
+      background: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 20%) !important;
+    }
+  }
+
+  &__cell {
+    &:focus-visible {
+      outline: none;
+    }
+
+    &--is-current {
+      background: var(--current-row-color);
+    }
+  }
+
+  &:not(.zd-grid--cell-selection) {
+    .zd-grid__row--current {
+      background: var(--current-row-color);
+    }
+  }
+
+  &__cell--fixed, &__action-cell--fixed {
+    position: sticky;
+  }
+
+  &__header--fixed, &__action-header--fixed {
+    position: sticky;
+    z-index: 5 !important;
+  }
+
+  &__header--fixed, &__cell--fixed {
+    left: 0;
+  }
+
+  &__action-header--fixed, &__action-cell--fixed {
+    right: 0;
+  }
+
+  .zd-search {
+    flex: 0 1 200px;
+  }
+}
+
+/**
+  These styles are separate because of vuetify specificity
+*/
+.v-table.zd-grid {
+  th.zd-grid__header {
+    padding: 0 0.5rem 0.25rem 0.5rem;
+  }
+
+  td.zd-grid__cell {
+    padding: 0 0.5rem !important;
+  }
+
+  th.zd-grid__selectable-header, td.zd-grid__selectable-cell {
+    padding: 0 0.5rem;
+  }
+}
+</style>

package/src/components/zd-grid/cell/ZdGridAction.ts

@@ -0,0 +1,14 @@
+import { ComponentRender } from '@zeedhi/common';
+import { PropType, defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		actions: {
+			type: Array as PropType<ComponentRender[]>,
+			required: true,
+		},
+	},
+	setup() {
+		return {};
+	},
+});

package/src/components/zd-grid/cell/ZdGridAction.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="zd-grid__action-cell">
+    <component
+      v-for="child in actions"
+      :key="child.name"
+      :is="child.component"
+      v-bind="child"
+    ></component>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdGridAction.ts"></script>
+
+<style>
+.zd-grid__action-cell {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-height: 28px;
+}
+</style>

package/src/components/zd-grid/cell/ZdGridCell.ts

@@ -0,0 +1,69 @@
+import { Grid, GridColumn } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { NotProvidedError } from 'packages/vuetify/src/errors/not-provided';
+import { PropType, computed, defineComponent, inject } from 'vue';
+import { GetActions } from '../ZdGrid';
+
+export default defineComponent({
+	props: {
+		row: {
+			type: Object as PropType<IDictionary<any>>,
+			required: true,
+		},
+		column: {
+			type: Object as PropType<GridColumn>,
+			required: true,
+		},
+		cssClass: {
+			type: Array as PropType<(IDictionary<boolean> | string)[]>,
+			default: () => [],
+		},
+		cssStyle: {
+			type: Array as PropType<IDictionary[]>,
+			default: () => [],
+		},
+		cellSelection: {
+			type: Boolean,
+			required: true,
+		},
+		isCurrent: {
+			type: Boolean,
+		},
+	},
+	emits: ['focusin', 'click'],
+	setup(props, { emit }) {
+		const tabindex = computed(() => (props.cellSelection ? 0 : ''));
+		const getActions = inject<GetActions>('getActions');
+		const gridInstance = inject<Grid>('gridInstance');
+
+		if (!getActions || !gridInstance) {
+			throw new NotProvidedError(['getActions', 'gridInstance']);
+		}
+
+		const conditionalProps = computed(() => {
+			const { row, column } = props;
+			return gridInstance.getConditionalProps({ row, column });
+		});
+
+		const click = (event: Event) => {
+			emit('click', event);
+		};
+
+		const focusin = (event: Event) => {
+			emit('focusin', event);
+		};
+
+		const getMergedConditionals = (propName: keyof GridColumn) => {
+			return conditionalProps.value[propName] || props.column[propName];
+		};
+
+		return {
+			tabindex,
+			click,
+			focusin,
+			conditionalProps,
+			getActions,
+			getMergedConditionals,
+		};
+	},
+});

package/src/components/zd-grid/cell/ZdGridCell.vue

@@ -0,0 +1,40 @@
+<template>
+  <td
+    :tabindex="tabindex"
+    :class="[
+      'zd-grid__cell', `text-${column.align}`,
+      getMergedConditionals('cssClass'),
+      { 'zd-grid__cell--is-current': isCurrent },
+      ...cssClass,
+    ]"
+    :style="[
+      getMergedConditionals('style'),
+      getMergedConditionals('cssStyle'),
+      ...cssStyle,
+    ]"
+    @click="click"
+    @focusin="focusin($event)"
+  >
+    <slot name="prepend"></slot>
+
+    <template v-if="column.type !== 'action'">
+      <v-skeleton-loader v-if="column.loading" loading type="text"/>
+      <zd-grid-cell-content
+        v-show="!column.loading"
+        :column="column"
+        :row="row"
+        :value="row[column.name]"
+        :conditionalProps="conditionalProps"
+      ></zd-grid-cell-content>
+    </template>
+    <zd-grid-action
+      v-else
+      :actions="getActions({ row, column })"
+    ></zd-grid-action>
+  </td>
+</template>
+
+<script lang="ts" src="./ZdGridCell.ts"></script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/zd-grid/cell/ZdGridCellContent.ts

@@ -0,0 +1,72 @@
+import { Column } from '@zeedhi/common';
+import { I18n, IDictionary } from '@zeedhi/core';
+import { PropType, computed, defineComponent, inject, onMounted, onUnmounted, ref, watch } from 'vue';
+import { CalcWidth } from '../ZdGrid';
+
+export default defineComponent({
+	props: {
+		column: {
+			type: Object as PropType<Column>,
+			required: true,
+		},
+		cssClass: {
+			type: Array as PropType<(IDictionary<boolean> | string)[]>,
+			default: () => [],
+		},
+		cssStyle: {
+			type: Array as PropType<(IDictionary<boolean> | string)[]>,
+			default: () => [],
+		},
+		row: {
+			type: Object as PropType<IDictionary<any>>,
+			required: true,
+		},
+		value: {
+			type: [String, Number, Boolean, Array],
+		},
+		conditionalProps: {
+			type: [Object],
+		},
+	},
+	setup(props) {
+		const value = ref<string>('');
+		const calcWidth = inject<CalcWidth>('calcWidth');
+
+		const formattedValue = computed(() => {
+			const colName = props.column.name;
+			const newRow = { ...props.row, [colName]: props.value };
+			return props.column.formatterByRow(newRow, props.conditionalProps);
+		});
+
+		const updateValue = () => {
+			value.value = props.column.formatterByRow(props.row, props.conditionalProps);
+		};
+
+		watch(
+			formattedValue,
+			() => {
+				value.value = formattedValue.value;
+			},
+			{ immediate: true },
+		);
+
+		onMounted(() => {
+			I18n.registerChangeListener(updateValue);
+		});
+
+		onUnmounted(() => {
+			I18n.unregisterChangeListener(updateValue);
+		});
+
+		const width = computed(() => {
+			if (!calcWidth) return '';
+			return calcWidth(props.column);
+		});
+
+		return {
+			value,
+			formattedValue,
+			width,
+		};
+	},
+});

package/src/components/zd-grid/cell/ZdGridCellContent.vue

@@ -0,0 +1,31 @@
+<template>
+  <zd-tooltip-overflow
+    :overflow="column.overflow"
+    :value="value"
+    :classes="[
+      'zd-grid__cell-content',
+      ...cssClass,
+    ]"
+    :styles="[{
+      ...cssStyle,
+      width,
+    }]"
+  >
+    <slot :value="value" :formattedValue="formattedValue">{{ value }}</slot>
+  </zd-tooltip-overflow>
+</template>
+
+<script lang="ts" src="./ZdGridCellContent.ts"></script>
+
+<style lang="scss">
+.zd-grid__cell-content {
+  align-items: center;
+  align-self: center;
+  display: block;
+  font-size: var(--zd-font-body1-size);
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+</style>

package/src/components/zd-grid/cell/ZdGridCheckbox.ts

@@ -0,0 +1,41 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		cellSelection: {
+			type: Boolean,
+			required: true,
+		},
+		disabled: {
+			type: Boolean,
+			required: true,
+		},
+		isSelected: {
+			type: Boolean,
+			required: true,
+		},
+		isCurrent: {
+			type: Boolean,
+			default: false,
+		},
+		indeterminate: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['focusin', 'click'],
+	setup(_props, { emit }) {
+		const click = (event: Event) => {
+			emit('click', event);
+		};
+
+		const focusin = (event: Event) => {
+			emit('focusin', event);
+		};
+
+		return {
+			click,
+			focusin,
+		};
+	},
+});

package/src/components/zd-grid/cell/ZdGridCheckbox.vue

@@ -0,0 +1,30 @@
+<template>
+  <td
+    :tabindex="cellSelection ? 0 : ''"
+    :class="[
+      'zd-grid__cell',
+      'zd-grid__cell--fixed',
+      'zd-grid__selectable-cell',
+      { 'zd-grid__cell--is-current': isCurrent },
+    ]"
+    @focusin="focusin"
+  >
+    <v-checkbox
+      hide-details
+      color="primary"
+      class="zd-grid__checkbox"
+      :disabled="disabled"
+      :true-icon="$getIcon('checkboxOn')"
+      :false-icon="$getIcon('checkboxOff')"
+      :indeterminate-icon="$getIcon('checkboxIndeterminate')"
+      :true-value="true"
+      :false-value="false"
+      :model-value="isSelected"
+      :indeterminate="indeterminate"
+      density="compact"
+      @click="click"
+    ></v-checkbox>
+  </td>
+</template>
+
+<script lang="ts" src="./ZdGridCheckbox.ts"></script>