@zeedhi/teknisa-components-vuetify 3.0.4 → 3.2.0

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

@@ -1,513 +0,0 @@
-import { IModal, Modal, ModalService } from '@zeedhi/common';
-import { TekGridColumnsButton } from '@zeedhi/teknisa-components-common';
-import { Loader } from '@zeedhi/core';
-import { UnwrapNestedRefs } from 'vue';
-import TekGridColumnsOptionsController from './TekGridColumnsOptionsController';
-
-export default class TekGridColumnsOptionsModal {
-	private static controllerName = `TekGridColumnsOptionsController_${Date.now()}`;
-
-	private static modalDef: IModal = {
-		name: 'tekGridColumnsOptionsModal',
-		title: '',
-		persistent: true,
-		grid: {
-			sm: 11,
-			md: 9,
-		},
-		children: [
-			{
-				name: 'tekGridColumnsOptionsCloseButtonContainer',
-				component: 'ZdContainer',
-				cssClass: 'zd-pa-0 zd-mb-6 zd-display-flex',
-				children: [
-					{
-						name: 'tekGridColumnsOptionsTitleText',
-						component: 'ZdText',
-						text: 'TEKGRID_COLUMNS_OPTIONS',
-						cssClass: 'zd-theme-font-title',
-					},
-					{
-						name: 'tekGridColumnsOptionsFilterSpacer',
-						component: 'VSpacer',
-					},
-					{
-						name: 'tekGridColumnsOptionsCloseModalButton',
-						component: 'ZdModalCloseButton',
-						small: true,
-						modalName: 'tekGridColumnsOptionsModal',
-					},
-				],
-			},
-			{
-				name: 'tekGridColumnsOptionsSearchRow',
-				component: 'ZdRow',
-				children: [
-					{
-						name: 'tekGridColumnsOptionsSearchCol',
-						component: 'ZdCol',
-						cols: 12,
-						children: [
-							{
-								name: 'tekGridColumnsOptionsSearchInput',
-								component: 'ZdTextInput',
-								showLabel: false,
-								showHelper: false,
-								placeholder: 'SEARCH',
-								appendIcon: 'magnify',
-								value: `{{${TekGridColumnsOptionsModal.controllerName}.searchValue}}`,
-							},
-						],
-					},
-				],
-			},
-			{
-				name: 'tekGridColumnsOptionsFixedRow',
-				component: 'ZdRow',
-				children: [
-					{
-						name: 'tekGridColumnsOptionsFixedCol',
-						component: 'ZdCol',
-						cols: 12,
-						cssClass: 'tek-grid-column-option-container-col',
-						children: [
-							{
-								name: 'tekGridColumnsOptionsFixedLabel',
-								component: 'ZdText',
-								text: 'TEKGRID_FIXED_COLUMNS',
-								cssClass: 'tek-grid-column-option-label',
-							},
-							{
-								name: 'tekGridColumnsOptionsFixedSelectAll',
-								component: 'ZdText',
-								text: 'TEKGRID_SELECT_ALL',
-								cssClass: 'tek-grid-column-option-select-all',
-								events: {
-									click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
-								},
-							},
-							{
-								name: 'tekGridColumnsOptionsFixedDropHere',
-								component: 'ZdText',
-								text: 'TEKGRID_DROP_COLUMNS',
-								cssClass: 'tek-grid-column-option-drop-here',
-								isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoFixedColumns}}`,
-							},
-							{
-								name: 'tekGridColumnsOptionsFixedColumns',
-								component: 'TekIterableComponentRender',
-								id: 'tekGridColumnsOptionsFixedColumns',
-								cssClass: 'tek-grid-column-option-container',
-								datasource: {
-									uniqueKey: 'name',
-									data: `{{${TekGridColumnsOptionsModal.controllerName}.fixedColumnData}}`,
-								},
-								noDataSlot: [],
-								events: {
-									onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
-								},
-								componentMetadata: {
-									name: 'tekGridColumnsOptionsFixedColumn_<<row.name>>',
-									component: 'ZdTag',
-									columnName: '<<row.name>>',
-									cssClass:
-										'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
-									tag: 'div',
-									children: [
-										{
-											name: 'tekGridColumnsOptionsFixedColumnText_<<row.name>>',
-											columnName: '<<row.name>>',
-											component: 'ZdText',
-											text: '<<row.label>><<row.aggregationText>>',
-										},
-										{
-											name: 'tekGridColumnsOptionsFixedColumnRemove_<<row.name>>',
-											columnName: '<<row.name>>',
-											component: 'ZdIcon',
-											iconName: 'close',
-											events: {
-												click: `{{${TekGridColumnsOptionsModal.controllerName}.columnFixedRemoveClick}}`,
-											},
-										},
-									],
-									events: {
-										click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
-									},
-								},
-							},
-						],
-					},
-				],
-			},
-			{
-				name: 'tekGridColumnsOptionsVisibleRow',
-				component: 'ZdRow',
-				children: [
-					{
-						name: 'tekGridColumnsOptionsVisibleCol',
-						component: 'ZdCol',
-						cols: 12,
-						cssClass: 'tek-grid-column-option-container-col',
-						children: [
-							{
-								name: 'tekGridColumnsOptionsVisibleLabel',
-								component: 'ZdText',
-								text: 'TEKGRID_VISIBLE_COLUMNS',
-								cssClass: 'tek-grid-column-option-label',
-							},
-							{
-								name: 'tekGridColumnsOptionsVisibleSelectAll',
-								component: 'ZdText',
-								text: 'TEKGRID_SELECT_ALL',
-								cssClass: 'tek-grid-column-option-select-all',
-								events: {
-									click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
-								},
-							},
-							{
-								name: 'tekGridColumnsOptionsVisibleDropHere',
-								component: 'ZdText',
-								text: 'TEKGRID_DROP_COLUMNS',
-								cssClass: 'tek-grid-column-option-drop-here',
-								isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoVisibleColumns}}`,
-							},
-							{
-								name: 'tekGridColumnsOptionsVisibleColumns',
-								component: 'TekIterableComponentRender',
-								id: 'tekGridColumnsOptionsVisibleColumns',
-								cssClass: 'tek-grid-column-option-container',
-								datasource: {
-									uniqueKey: 'name',
-									data: `{{${TekGridColumnsOptionsModal.controllerName}.visibleColumnData}}`,
-								},
-								noDataSlot: [],
-								events: {
-									onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
-								},
-								componentMetadata: {
-									name: 'tekGridColumnsOptionsVisibleColumn_<<row.name>>',
-									component: 'ZdTag',
-									columnName: '<<row.name>>',
-									cssClass:
-										'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
-									tag: 'div',
-									children: [
-										{
-											name: 'tekGridColumnsOptionsVisibleColumnText_<<row.name>>',
-											columnName: '<<row.name>>',
-											component: 'ZdText',
-											text: '<<row.label>><<row.aggregationText>>',
-										},
-										{
-											name: 'tekGridColumnsOptionsVisibleColumnRemove_<<row.name>>',
-											columnName: '<<row.name>>',
-											component: 'ZdIcon',
-											iconName: 'close',
-											events: {
-												click: `{{${TekGridColumnsOptionsModal.controllerName}.columnVisibleRemoveClick}}`,
-											},
-										},
-									],
-									events: {
-										click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
-									},
-								},
-							},
-						],
-					},
-				],
-			},
-			{
-				name: 'tekGridColumnsOptionsGroupedRow',
-				component: 'ZdRow',
-				isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
-				children: [
-					{
-						name: 'tekGridColumnsOptionsGroupedCol',
-						component: 'ZdCol',
-						cssClass: 'tek-grid-column-option-container-col',
-						cols: 12,
-						children: [
-							{
-								name: 'tekGridColumnsOptionsGroupedLabel',
-								component: 'ZdText',
-								text: 'TEKGRID_GROUPED_COLUMNS',
-								cssClass: 'tek-grid-column-option-label',
-							},
-							{
-								name: 'tekGridColumnsOptionsGroupedSelectAll',
-								component: 'ZdText',
-								text: 'TEKGRID_SELECT_ALL',
-								cssClass: 'tek-grid-column-option-select-all',
-								events: {
-									click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
-								},
-							},
-							{
-								name: 'tekGridColumnsOptionsGroupedDropHere',
-								component: 'ZdText',
-								text: 'TEKGRID_DROP_COLUMNS',
-								cssClass: 'tek-grid-column-option-drop-here',
-								isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoGroupedColumns}}`,
-							},
-							{
-								name: 'tekGridColumnsOptionsGroupedColumns',
-								component: 'TekIterableComponentRender',
-								id: 'tekGridColumnsOptionsGroupedColumns',
-								cssClass: 'tek-grid-column-option-container',
-								datasource: {
-									uniqueKey: 'name',
-									data: `{{${TekGridColumnsOptionsModal.controllerName}.groupedColumnData}}`,
-								},
-								noDataSlot: [],
-								events: {
-									onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
-								},
-								componentMetadata: {
-									name: 'tekGridColumnsOptionsGroupedColumn_<<row.name>>',
-									component: 'ZdTag',
-									columnName: '<<row.name>>',
-									cssClass:
-										'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
-									tag: 'div',
-									children: [
-										{
-											name: 'tekGridColumnsOptionsGroupedColumnText_<<row.name>>',
-											columnName: '<<row.name>>',
-											component: 'ZdText',
-											text: '<<row.label>><<row.aggregationText>>',
-										},
-										{
-											name: 'tekGridColumnsOptionsGroupedColumnRemove_<<row.name>>',
-											columnName: '<<row.name>>',
-											component: 'ZdIcon',
-											iconName: 'close',
-											events: {
-												click: `{{${TekGridColumnsOptionsModal.controllerName}.columnGroupedRemoveClick}}`,
-											},
-										},
-									],
-									events: {
-										click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
-									},
-								},
-							},
-						],
-					},
-				],
-			},
-			{
-				name: 'tekGridColumnsOptionsOtherRow',
-				component: 'ZdRow',
-				children: [
-					{
-						name: 'tekGridColumnsOptionsOtherCol',
-						component: 'ZdCol',
-						cssClass: 'tek-grid-column-option-container-col',
-						cols: 12,
-						children: [
-							{
-								name: 'tekGridColumnsOptionsOtherLabel',
-								component: 'ZdText',
-								text: 'TEKGRID_OTHER_COLUMNS',
-								cssClass: 'tek-grid-column-option-label',
-							},
-							{
-								name: 'tekGridColumnsOptionsOtherSelectAll',
-								component: 'ZdText',
-								text: 'TEKGRID_SELECT_ALL',
-								cssClass: 'tek-grid-column-option-select-all',
-								events: {
-									click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
-								},
-							},
-							{
-								name: 'tekGridColumnsOptionsOtherDropHere',
-								component: 'ZdText',
-								text: 'TEKGRID_DROP_COLUMNS',
-								cssClass: 'tek-grid-column-option-drop-here',
-								isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoOtherColumns}}`,
-							},
-							{
-								name: 'tekGridColumnsOptionsOtherColumns',
-								component: 'TekIterableComponentRender',
-								id: 'tekGridColumnsOptionsOtherColumns',
-								cssClass: 'tek-grid-column-option-container',
-								datasource: {
-									uniqueKey: 'name',
-									data: `{{${TekGridColumnsOptionsModal.controllerName}.otherColumnData}}`,
-								},
-								noDataSlot: [],
-								events: {
-									onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
-								},
-								componentMetadata: {
-									name: 'tekGridColumnsOptionsOtherColumn_<<row.name>>',
-									component: 'ZdText',
-									columnName: '<<row.name>>',
-									text: '<<row.label>><<row.aggregationText>>',
-									cssClass:
-										'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
-									events: {
-										click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
-									},
-								},
-							},
-						],
-					},
-				],
-			},
-			{
-				name: 'tekGridColumnsOptionsDetailColumnName',
-				component: 'ZdText',
-				cssClass: 'tek-grid-column-option-detail-name',
-				text: `{{${TekGridColumnsOptionsModal.controllerName}.detailColumnName}}`,
-				grid: {
-					xs: 12,
-				},
-			},
-			{
-				name: 'tekGridColumnsOptionsDetailRow',
-				component: 'ZdRow',
-				children: [
-					{
-						name: 'tekGridColumnsOptionsDetailCol',
-						component: 'ZdCol',
-						cols: 12,
-						children: [
-							{
-								name: 'tekGridColumnsOptionsDetailForm',
-								component: 'ZdForm',
-								cssClass: 'tek-grid-column-option-detail-form',
-								children: [
-									{
-										name: 'tekGridColumnsOptionsColumnLabel',
-										component: 'ZdTextInput',
-										label: 'TEKGRID_COLUMN_LABEL',
-										showHelper: false,
-										clearable: false,
-										disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSingleSelection}}`,
-										value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnLabel}}`,
-										grid: {
-											xs: 12,
-											md: 5,
-										},
-									},
-									{
-										name: 'tekGridColumnsOptionsColumnAlignment',
-										component: 'ZdSelect',
-										autocomplete: false,
-										label: 'TEKGRID_COLUMN_ALIGNMENT',
-										disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSelectedColumn}}`,
-										showHelper: false,
-										clearable: false,
-										grid: {
-											xs: 6,
-											md: 2,
-										},
-										dataText: 'text',
-										dataValue: 'value',
-										datasource: {
-											data: [
-												{ text: 'TEKGRID_LEFT', value: 'left' },
-												{ text: 'TEKGRID_CENTER', value: 'center' },
-												{ text: 'TEKGRID_RIGHT', value: 'right' },
-											],
-											translate: 'text',
-										},
-										events: {
-											change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
-											onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
-										},
-									},
-									{
-										name: 'tekGridColumnsOptionsColumnAggregation',
-										component: 'ZdSelect',
-										isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
-										autocomplete: false,
-										label: 'TEKGRID_COLUMN_AGGREGATION',
-										showHelper: false,
-										disabled: `{{${TekGridColumnsOptionsModal.controllerName}.groupInSelection}}`,
-										dataText: 'text',
-										dataValue: 'value',
-										grid: {
-											xs: 6,
-											md: 2,
-										},
-										datasource: {
-											data: `{{${TekGridColumnsOptionsModal.controllerName}.aggregationData}}`,
-										},
-										events: {
-											change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
-											onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
-										},
-									},
-									{
-										name: 'tekGridColumnsOptionsColumnGroupOpened',
-										component: 'ZdCheckbox',
-										isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
-										cssClass: 'zd-form-input-align',
-										disabled: `{{${TekGridColumnsOptionsModal.controllerName}.notGroupInSelection}}`,
-										label: 'TEKGRID_COLUMN_GROUP_OPENED',
-										value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnGroupOpened}}`,
-										grid: {
-											xs: 6,
-											md: 3,
-										},
-									},
-								],
-							},
-						],
-					},
-				],
-			},
-			{
-				name: 'tekGridColumnsOptionsDetailFooter',
-				component: 'ZdFooter',
-				padless: true,
-				color: 'transparent',
-				cssClass: 'zd-mt-6',
-				rightSlot: [
-					{
-						name: 'tekGridColumnsOptionsDetailCancel',
-						component: 'ZdButton',
-						outline: true,
-						label: 'TEKGRID_CANCEL',
-						events: {
-							click: `{{${TekGridColumnsOptionsModal.controllerName}.cancelChanges}}`,
-						},
-					},
-					{
-						name: 'tekGridColumnsOptionsDetailApply',
-						component: 'ZdButton',
-						label: 'TEKGRID_APPLY',
-						events: {
-							click: `{{${TekGridColumnsOptionsModal.controllerName}.applyChanges}}`,
-						},
-					},
-				],
-			},
-		],
-	};
-
-	private static modal: Modal;
-
-	public static show(instance: UnwrapNestedRefs<TekGridColumnsButton>) {
-		if (!TekGridColumnsOptionsModal.modal) {
-			TekGridColumnsOptionsModal.modal = ModalService.create(TekGridColumnsOptionsModal.modalDef);
-			Loader.addController(TekGridColumnsOptionsModal.controllerName, TekGridColumnsOptionsController, [
-				TekGridColumnsOptionsModal.modal,
-			]);
-		}
-
-		const controller = Loader.getInstance(TekGridColumnsOptionsModal.controllerName);
-		controller.instance = instance;
-		TekGridColumnsOptionsModal.modal.show();
-	}
-
-	public static hide() {
-		if (TekGridColumnsOptionsModal.modal) {
-			TekGridColumnsOptionsModal.modal.hide();
-		}
-	}
-}

package/src/components/tek-grid/filter-button/TekGridFilterButton.ts

@@ -1,47 +0,0 @@
-import { Button } from '@zeedhi/common';
-import { TekGridFilterButton } from '@zeedhi/teknisa-components-common';
-import { IEventParam } from '@zeedhi/core';
-import { ComponentPublicInstance, defineComponent } from 'vue';
-import { ZdButtonProps, useButtonInstance, useCreateInstance } from '@zeedhi/vuetify';
-
-export const TekGridFilterButtonProps = {
-	...ZdButtonProps,
-	gridName: {
-		type: String,
-		default: '',
-	},
-	grid: {
-		type: [Object, String],
-		default: () => {},
-	},
-	showCheckboxAll: {
-		type: [Boolean, String],
-		default: false,
-	},
-};
-
-const tekGridFilterButtonComponent = defineComponent({
-	props: TekGridFilterButtonProps,
-	inheritAttrs: false,
-	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<TekGridFilterButton, ComponentPublicInstance>(
-			props,
-			ctx,
-			TekGridFilterButton,
-		);
-		const buttonScope = useButtonInstance({ instance, root });
-
-		const filterClick = ({ event }: IEventParam<Button>) => {
-			instance.click(event);
-		};
-
-		return {
-			...buttonScope,
-			instance,
-			root,
-			filterClick,
-		};
-	},
-});
-
-export default tekGridFilterButtonComponent;

package/src/components/tek-grid/filter-button/TekGridFilterButton.vue

@@ -1,28 +0,0 @@
-<template>
-  <zd-button
-    :id="`instance.name`"
-    :name="`${instance.name}_name`"
-    v-bind="{
-      icon: true,
-      cssClass: 'tek-grid-filter-button',
-      iconName: 'mdi-filter',
-      isVisible: instance.grid.filterButton,
-      events: {
-        click: filterClick,
-      },
-    }"
-  />
-</template>
-
-<script lang="ts" src="./TekGridFilterButton.ts"></script>
-
-<style lang="scss">
-.zd-container.tek-grid-filter-content-container {
-  position: relative;
-  left: calc(var(--zd-default-padding) * -1) !important;
-  padding-left: var(--zd-default-padding) !important;
-  width: calc(100% + var(--zd-default-padding) * 2) !important;
-  padding-right: var(--zd-default-padding) !important;
-  max-width: none !important;
-}
-</style>

package/src/components/tek-grid/indentation/TekGridIndentation.ts

@@ -1,21 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {
-		showDivider: {
-			type: Boolean,
-			default: true,
-		},
-		level: {
-			type: Number,
-			default: 0,
-		},
-		footer: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		return {};
-	},
-});

package/src/components/tek-grid/indentation/TekGridIndentation.vue

@@ -1,33 +0,0 @@
-<template>
-  <span
-    v-for="n in level"
-    :key="n"
-    :class="[
-      'tek-grid-indentation',
-      {
-        'tek-grid-indentation--corner': footer && n === level,
-        'tek-grid-indentation--divider': showDivider,
-      }
-    ]"
-  ></span>
-</template>
-
-<script lang="ts" src="./TekGridIndentation"></script>
-
-<style lang="scss">
-.tek-grid-indentation {
-  display: flex;
-  width: 8px;
-  margin-left: 10px;
-  height: 100%;
-
-  &--divider {
-    border-left: solid 1px #ccc;
-  }
-
-  &--corner {
-    height: 60%;
-    border-bottom: 1px solid #ccc;
-  }
-}
-</style>