@zeedhi/teknisa-components-vuetify 3.1.0 → 3.2.0

package/src/components/tek-grid/column-header/TekGridHeaderRow.ts

@@ -1,147 +0,0 @@
-import { Column, GridColumn } from '@zeedhi/common';
-import { IDynamicFilterItem, TekGridColumn } from '@zeedhi/teknisa-components-common';
-import { IDictionary } from '@zeedhi/core';
-import { PropType, UnwrapRef, defineComponent, inject } from 'vue';
-import { ResizeParams, CalcWidth } from '@zeedhi/vuetify';
-
-export default defineComponent({
-	props: {
-		selectable: {
-			type: Boolean,
-			default: false,
-		},
-		headerBackground: {
-			type: String,
-			default: '',
-		},
-		showSelectAll: {
-			type: Boolean,
-			default: false,
-		},
-		allselectedState: {
-			type: Number,
-			default: 0,
-		},
-		visibleColumns: {
-			type: Array as PropType<GridColumn[]>,
-			default: () => [],
-		},
-		dragColumns: {
-			type: Boolean,
-			default: false,
-		},
-		headerCellTextColor: {
-			type: String,
-			default: '',
-		},
-		resizeColumns: {
-			type: Boolean,
-			default: false,
-		},
-		getSortIcon: {
-			type: Function,
-			default: () => {},
-		},
-		isSorted: {
-			type: Function,
-			default: () => {},
-		},
-		toggleSort: {
-			type: Function,
-			default: () => {},
-		},
-		tableColumns: {
-			type: Array as PropType<any[]>,
-			default: () => [],
-		},
-		sortBy: {
-			type: Array as PropType<any[]>,
-			default: () => [],
-		},
-		disableCheckbox: {
-			type: Boolean,
-			default: false,
-		},
-		sortable: {
-			type: Boolean,
-			default: true,
-		},
-		name: {
-			type: String,
-			default: '',
-		},
-		modelValue: {
-			type: Object as PropType<IDictionary<IDynamicFilterItem[]>>,
-			default: () => [],
-		},
-		instanceName: {
-			type: String,
-			required: true,
-		},
-		filterRelationsDatasource: {
-			type: [Object, null],
-			required: false,
-		},
-		filterOperationsDatasource: {
-			type: [Object, null],
-			required: false,
-		},
-		columnFilterButton: {
-			type: Boolean,
-			required: true,
-		},
-		columnHasFilter: {
-			type: Function as PropType<(columnName: string) => boolean>,
-			required: true,
-		},
-		level: {
-			type: Number,
-			default: 0,
-		},
-	},
-	emits: ['selectAllClick', 'resizeMousedown', 'resizeClick', 'update:modelValue'],
-	setup(props, { emit }) {
-		const calcWidth = inject<CalcWidth>('calcWidth');
-
-		if (!calcWidth) {
-			// TODO: use NotProvidedError
-			throw new Error('calcWidth');
-		}
-
-		const selectAllClick = (event: Event) => {
-			emit('selectAllClick', event);
-		};
-
-		const resizeMousedown = (column: GridColumn, event: ResizeParams) => {
-			emit('resizeMousedown', { event, column });
-		};
-
-		const resizeClick = (event: Event) => {
-			emit('resizeClick', { event });
-		};
-
-		const findOrderIndex = (sortBy: readonly any[], column: UnwrapRef<Column>) => {
-			return sortBy.findIndex((sort) => sort.key === column.name);
-		};
-
-		const updateModelValue = (columnName: string, value: IDynamicFilterItem[]) => {
-			const modelValue = { ...props.modelValue };
-			modelValue[columnName] = value;
-			emit('update:modelValue', modelValue);
-		};
-
-		const showFilterButton = (column: TekGridColumn) => {
-			return column.type !== 'action' && props.columnFilterButton && column.filterable;
-		};
-
-		return {
-			calcWidth,
-			resizeMousedown,
-			resizeClick,
-			findOrderIndex,
-			updateModelValue,
-			showFilterButton,
-			selectAllClick,
-		};
-	},
-});

package/src/components/tek-grid/column-header/TekGridHeaderRow.vue

@@ -1,78 +0,0 @@
-<template>
-  <zd-grid-header-row
-    :name="name"
-    :selectable="selectable"
-    :headerBackground="headerBackground"
-    :showSelectAll="showSelectAll"
-    :allselectedState="allselectedState"
-    :visibleColumns="visibleColumns"
-    :dragColumns="dragColumns"
-    :headerCellTextColor="headerCellTextColor"
-    :resizeColumns="resizeColumns"
-    :getSortIcon="getSortIcon"
-    :toggleSort="toggleSort"
-    :sortBy="sortBy"
-    :tableColumns="tableColumns"
-    :isSorted="isSorted"
-    :disableCheckbox="disableCheckbox"
-    @selectAllClick="selectAllClick"
-  >
-    <template #default="{ column, index, isHovering }">
-      <zd-grid-column-header
-        :cssStyle="{
-          'color': headerCellTextColor,
-          width: calcWidth(column),
-        }"
-        :action="column.type === 'action'"
-        :overflow="column.overflow"
-        :helperText="column.helperText"
-        :label="column.label"
-        :columnAlign="column.align"
-        :orderIndex="findOrderIndex(sortBy, column)"
-        :isSortable="sortable && column.sortable"
-        :resizeColumns="resizeColumns"
-        :sortIcon="getSortIcon(tableColumns[index])"
-        :isSorted="isSorted(tableColumns[index])"
-        :isHovering="isHovering"
-        @click="toggleSort(tableColumns[index])"
-        @resizeMousedown="resizeMousedown(column, $event)"
-        @resizeClick="resizeClick($event)"
-      >
-        <template #prepend v-if="index === 0">
-          <tek-grid-indentation
-            :level="level"
-            :show-divider="false"
-          ></tek-grid-indentation>
-        </template>
-        <template #label>
-          <span
-            v-if="column.aggregation"
-            class="tek-grid-column-aggregation"
-          >({{ $t(`TEKGRID_AGGREGATION_${column.aggregation}`) }})
-          </span>
-        </template>
-
-        <template
-          #append="{ isHovering }"
-          v-if="showFilterButton(column)"
-        >
-          <tek-grid-column-filter
-            :modelValue="modelValue[column.name]"
-            :hasFilterData="columnHasFilter(column.name)"
-            :column="column"
-            :instanceName="instanceName"
-            :filterRelationsDatasource="filterRelationsDatasource"
-            :filterOperationsDatasource="filterOperationsDatasource"
-            :isHovering="isHovering"
-            :multiple="!!filterRelationsDatasource && !!filterOperationsDatasource"
-            @update:modelValue="updateModelValue(column.name, $event)"
-          ></tek-grid-column-filter>
-        </template>
-      </zd-grid-column-header>
-    </template>
-  </zd-grid-header-row>
-</template>
-
-<script lang="ts" src="./TekGridHeaderRow.ts"></script>
-
-<style lang="scss"></style>

package/src/components/tek-grid/columns-button/TekGridColumnsButton.ts

@@ -1,97 +0,0 @@
-import { TekGrid, TekGridColumnsButton } from '@zeedhi/teknisa-components-common';
-import sortable from 'sortablejs';
-import { ComponentPublicInstance, computed, defineComponent, mergeProps, nextTick, ref, watch } from 'vue';
-import { ZdIterableColumnsButtonProps, useButtonInstance, useCreateInstance } from '@zeedhi/vuetify';
-import optionsModal from './TekGridColumnsOptionsModal';
-
-export const TekGridColumnsButtonProps = {
-	...ZdIterableColumnsButtonProps,
-	hideGroups: {
-		type: [Boolean, String],
-		default: false,
-	},
-};
-
-const tekGridColumnsButton = defineComponent({
-	props: TekGridColumnsButtonProps,
-	inheritAttrs: false,
-	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<TekGridColumnsButton, ComponentPublicInstance>(
-			props,
-			ctx,
-			TekGridColumnsButton,
-			TekGridColumnsButtonProps,
-		);
-		const buttonScope = useButtonInstance({ instance, root });
-
-		const menuIsOpened = ref(false);
-
-		const sortableInitialized = ref(false);
-
-		const teste = (a: any) => {
-			console.warn(a);
-		};
-
-		watch(menuIsOpened, () => {
-			if (!menuIsOpened.value || sortableInitialized.value) return;
-
-			sortableInitialized.value = true;
-			nextTick(() => {
-				const columnsTableBody = document.querySelector(`#${instance.name}_columns_table tbody`);
-				if (columnsTableBody) {
-					sortable.create(columnsTableBody as HTMLElement, {
-						handle: '.sortHandle',
-						dragClass: 'tek-grid-columns-button-sortable-drag',
-						onEnd: sortEnd,
-					});
-				}
-			});
-		});
-
-		const gridGroupColumnNames = computed(() => {
-			return instance.iterableComponent.columns.filter((column) => column.grouped).map((column) => column.name) || [];
-		});
-
-		const sortEnd = (event: any) => {
-			const grid: TekGrid = instance.iterableComponent as any;
-			const newOrder = Array.from(event.srcElement.querySelectorAll('tr')).map((row: any) => row.getAttribute('name'));
-			const groupColumnNames: string[] = [];
-			const newColumns = newOrder.map((columnName) => {
-				const column = grid.getColumn(columnName);
-				if (column.grouped) {
-					groupColumnNames.push(columnName);
-				}
-
-				return column;
-			});
-			const ignoredColumns = grid.columns.filter((column) => instance.ignoreColumns.indexOf(column.name) !== -1);
-			grid.columns = newColumns.concat(ignoredColumns);
-
-			if (grid.updateGrouping && JSON.stringify(groupColumnNames) !== JSON.stringify(gridGroupColumnNames)) {
-				grid.updateGrouping();
-			}
-			grid.changeLayout();
-		};
-
-		const moreOptions = () => {
-			optionsModal.show(instance);
-		};
-
-		const close = () => {
-			menuIsOpened.value = false;
-		};
-
-		return {
-			...buttonScope,
-			instance,
-			root,
-			menuIsOpened,
-			moreOptions,
-			close,
-			teste,
-			mergeProps,
-		};
-	},
-});
-
-export default tekGridColumnsButton;

package/src/components/tek-grid/columns-button/TekGridColumnsButton.vue

@@ -1,273 +0,0 @@
-<template>
-  <v-menu
-    :id="instance.name"
-    v-model="menuIsOpened"
-    :class="['zd-iterable-columns-button', 'tek-grid-columns-button', instance.cssClass]"
-    :style="instance.cssStyle"
-    :closeOnContentClick="false"
-    offset-y
-    content-class="zd-iterable-columns-button-options tek-grid-columns-button-options"
-  >
-    <template v-slot:activator="{ props: onMenu }">
-      <v-tooltip bottom>
-        <template v-slot:activator="{ props: onTooltip }">
-          <zd-activator-wrapper
-            :child-props="{
-              component: 'ZdButton',
-              name: instance.name,
-              instanceObject: instance,
-            }"
-            v-bind="mergeProps(onMenu, onTooltip)"
-          ></zd-activator-wrapper>
-        </template>
-        <span>{{ $t('TEKGRID_COLUMNS') }}</span>
-      </v-tooltip>
-    </template>
-
-    <v-card class="zd-pa-2">
-      <div class="tek-grid-columns-button-table-wrapper zd-mb-2">
-        <table class="tek-grid-columns-button-table" :id="instance.name + '_columns_table'">
-          <thead>
-            <tr>
-              <th><!--Name--></th>
-              <th>{{ $t('TEKGRID_COLUMN_VISIBLE') }}</th>
-              <th v-if="!instance.hideGroups">{{ $t('TEKGRID_COLUMN_GROUPED') }}</th>
-              <th v-if="!instance.hideGroups">{{ $t('TEKGRID_COLUMN_AGGREGATION') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="column in instance.filteredColumns()"
-              :key="column.name"
-              :name="column.name"
-            >
-              <td class="tek-grid-columns-button-column-name sortHandle">
-                <span>⦙⦙</span>{{ $t(column.label) }}
-              </td>
-              <td>
-                <zd-checkbox
-                  :name="instance.name + '_column_visible_' + column.name"
-                  :value="column.grouped || column.isVisible"
-                  :events="{
-                    change: instance.controller.showHideTekColumn.bind(instance.controller, column)
-                  }"
-                />
-              </td>
-              <td v-if="!instance.hideGroups">
-                <zd-checkbox
-                  v-if="column.type !== 'action'"
-                  :name="instance.name + '_column_grouped_' + column.name"
-                  :value="column.grouped"
-                  :events="{
-                    change: instance.controller.changeGroupedColumn.bind(instance.controller, column)
-                  }"
-                />
-              </td>
-              <td v-if="!instance.hideGroups" class="tek-grid-columns-button-column-aggregation">
-                <zd-select
-                  v-if="column.type !== 'action'"
-                  :name="instance.name + '_column_aggregation_' + column.name"
-                  v-bind="{
-                    value: column.aggregation,
-                    disabled: column.grouped  || !column.isVisible,
-                    events: {
-                      change: instance.controller.changeAggregationColumn.bind(instance.controller, column)
-                    },
-                    dataText: 'text',
-                    dataValue: 'value',
-                    autocomplete: false,
-                    showHelper: false,
-                    showLabel: false,
-                    datasource: {
-                      data: instance.getAggregationSelectData(),
-                    },
-                  }"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="tek-grid-columns-button-table-footer">
-        <zd-button
-          :name="instance.name + '_columns_table_footer_button'"
-          label="TEKGRID_MORE_OPTIONS"
-          small
-          outline
-          cssClass="zd-ma-2 zd-mr-1"
-          @click="moreOptions()"
-        ></zd-button>
-        <zd-button
-          :name="instance.name + '_columns_table_footer_close'"
-          label="TEKGRID_CLOSE"
-          small
-          cssClass="zd-ma-2 zd-ml-1"
-          @click="close()"
-        ></zd-button>
-      </div>
-    </v-card>
-  </v-menu>
-</template>
-
-<script lang="ts" src="./TekGridColumnsButton.ts"></script>
-
-<style lang="scss">
-.tek-grid-columns-button-options {
-  max-height: 250px;
-  display: flex;
-  flex-direction: column;
-  background-color: #fff;
-
-  &.theme--dark {
-    background-color: #1e1e1e
-  }
-
-  .tek-grid-columns-button-table-wrapper {
-    flex: 1;
-    overflow-y: auto;
-
-    .tek-grid-columns-button-table {
-      font-size: 13px;
-      border-spacing: 0;
-      width: 100%;
-
-      thead {
-        tr {
-          th {
-            padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);
-            white-space: nowrap;
-            text-align: left;
-            position: sticky;
-            top: 0;
-            z-index: 10;
-            background-color: var(--zd-background-base);
-          }
-        }
-      }
-
-      tbody {
-        tr {
-          td {
-            padding: var(--spacing-1) var(--spacing-2);
-            white-space: nowrap;
-
-            &.tek-grid-columns-button-column-name {
-              cursor: -webkit-grab;
-
-              > span {
-                padding-right: 4px;
-              }
-            }
-
-            &.tek-grid-columns-button-column-aggregation {
-              max-width: 150px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .tek-grid-columns-button-table-footer {
-    display: flex;
-
-    .zd-button {
-      flex: 1;
-    }
-  }
-}
-
-.tek-grid-columns-button-sortable-drag {
-  background: white;
-}
-
-// column options modal
-.tek-grid-column-option-box {
-  margin: var(--spacing-1);
-  background: #ccc;
-  padding: 2px var(--spacing-1);
-  cursor: pointer;
-
-  > * {
-    display: inline-block;
-  }
-
-  > .zd-icon {
-    font-size: 0.9rem;
-    margin-left: var(--spacing-2);
-  }
-
-  &.tek-grid-column-option-grouped-true {
-    cursor: default;
-    background: #fafafa;
-
-    > .zd-icon {
-      display: none;
-    }
-  }
-
-  &.tek-grid-column-option-selected-true {
-    background: var(--v-primary-base);
-    color: white;
-
-    > .zd-icon {
-      color: white;
-    }
-  }
-}
-
-
-.tek-grid-column-option-container-col {
-  position: relative;
-
-  .tek-grid-column-option-container {
-    background: #eee;
-    padding: var(--spacing-1);
-    max-height: 100px;
-    min-height: 42px;
-    align-content: center;
-    position: relative;
-
-    .tek-iterable-footer {
-      display: none !important;
-    }
-
-    .zd-text.no-data {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      font-size: 0.7rem;
-    }
-  }
-
-  .tek-grid-column-option-label {
-    font-weight: var(--zd-font-body2-weight);
-  }
-
-  .tek-grid-column-option-select-all {
-    position: absolute;
-    top: 0.5rem;
-    right: var(--spacing-1);
-    color: var(--v-primary-base);
-    cursor: pointer;
-    font-size: 0.8rem;
-  }
-
-  .tek-grid-column-option-drop-here {
-    position: absolute;
-    z-index: 100;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 35px;
-  }
-}
-
-.tek-grid-column-option-detail-name {
-  color: var(--v-primary-base);
-  font-weight: var(--zd-font-body2-weight);
-  font-size: 1.1rem;
-  margin-top: var(--spacing-6);
-}
-</style>