@zeedhi/teknisa-components-vuetify 1.117.1 → 3.0.1

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

@@ -0,0 +1,513 @@
+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_${new Date().getTime()}`;
+
+	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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,33 @@
+<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>