@zeedhi/teknisa-components-vuetify 1.117.1 → 3.0.1

package/src/components/tek-grid/layout-options/TekGridLayoutOptions.ts

@@ -0,0 +1,119 @@
+import { Input } from '@zeedhi/common';
+import { ITekGridLayout, TekGridLayoutOptions, TekRestDatasource } from '@zeedhi/teknisa-components-common';
+import { IEventParam } from '@zeedhi/core';
+import { defineComponent, mergeProps, onMounted, ref } from 'vue';
+import { ZdComponentRenderProps, useCreateInstance } from '@zeedhi/vuetify';
+import { useTableLayout } from '../../../composables/useTableLayout';
+
+export const TekGridLayoutOptionsProps = {
+	...ZdComponentRenderProps,
+	// Zeedhi 3.0
+};
+
+const layoutOptionsComponent = defineComponent({
+	props: TekGridLayoutOptionsProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<TekGridLayoutOptions>(props, ctx, TekGridLayoutOptions);
+
+		const { applyLayout: applyTekGridLayout, getColumnElements, getTableWidth } = useTableLayout();
+
+		onMounted(() => {
+			instance.viewApplyLayout = applyLayout;
+			instance.viewGetCurrentLayout = getCurrentLayout;
+		});
+
+		const confirmLayoutClick = ({ component }: IEventParam<Input>) => {
+			const layoutName = component.value;
+			if (layoutName) {
+				const newLayout: ITekGridLayout = getCurrentLayout(layoutName);
+				instance.newLayout(newLayout);
+			}
+
+			menuActive.value = false;
+			component.value = '';
+		};
+
+		const datasourceDynamicFilter = () => {
+			const datasource = instance.grid.datasource;
+			if (datasource instanceof TekRestDatasource) return datasource.dynamicFilter;
+			return {};
+		};
+
+		const changeLayout = (layout: ITekGridLayout) => {
+			instance.updateLayout(layout.name, getCurrentLayout(layout.name));
+		};
+
+		const applyLayout = (layout?: ITekGridLayout) => {
+			const defaultLayout = {
+				originalDatasourceOrder: instance.originalDatasourceOrder,
+				originalDatasourceFilter: instance.originalDatasourceFilter,
+				originalColumnProps: instance.originalColumnProps,
+				originalDatasourceDynamicFilter: instance.originalDatasourceDynamicFilter,
+			};
+			applyTekGridLayout({ layout, defaultLayout, changeLayoutCallback: changeLayout });
+			menuActive.value = false;
+		};
+
+		const getCurrentLayout = (layoutName: string) => {
+			const { grid } = instance;
+
+			const gridWidth = getTableWidth();
+			const columnElementsDict = getColumnElements();
+
+			return {
+				name: layoutName,
+				gridWidth,
+				order: grid.datasource.order,
+				filter: grid.datasource.filter,
+				dynamicFilter: datasourceDynamicFilter(),
+				columns: grid.columns.map((column: any, index) => {
+					const columnElement = columnElementsDict[index];
+					return {
+						name: column.name,
+						label: column.label,
+						align: column.align,
+						width: columnElement ? window.getComputedStyle(columnElement).width : 'unset',
+						minWidth: column.minWidth,
+						maxWidth: column.maxWidth,
+						isVisible: column.isVisible,
+						fixed: column.fixed,
+						grouped: column.grouped,
+						groupOpened: column.groupOpened,
+						aggregation: column.aggregation,
+						filterHelperValue: instance.getHelperValue(column),
+					};
+				}),
+			};
+		};
+
+		const menuActive = ref(false);
+
+		const applyOrUpdateLayout = (event: Event, layoutName: string) => {
+			if (instance.layoutEdited) {
+				instance.updateLayout(layoutName, getCurrentLayout(layoutName));
+				event.stopImmediatePropagation();
+				menuActive.value = false;
+			} else {
+				instance.applyLayout(layoutName);
+			}
+		};
+
+		const deleteLayout = (event: Event, layoutName: string) => {
+			instance.deleteLayout(layoutName);
+			event.stopImmediatePropagation();
+		};
+
+		return {
+			instance,
+			root,
+			menuActive,
+			confirmLayoutClick,
+			applyOrUpdateLayout,
+			deleteLayout,
+			mergeProps,
+		};
+	},
+});
+
+export default layoutOptionsComponent;

package/src/components/tek-grid/layout-options/TekGridLayoutOptions.vue

@@ -0,0 +1,172 @@
+<template>
+  <v-menu
+    :id="instance.name"
+    :name="instance.name"
+    :class="['tek-grid-layout-options', instance.cssClass]"
+    :style="instance.cssStyle"
+    v-model="menuActive"
+    offset-y
+    :closeOnContentClick="false"
+  >
+    <template v-slot:activator="{ props: onMenu }">
+      <v-tooltip bottom>
+        <template v-slot:activator="{ props: onTooltip }">
+          <v-badge
+            v-show="instance.isVisible"
+            overlap
+            class="tek-grid-layout-options-badge"
+            dot
+            :offsetX="12"
+            :offsetY="12"
+            :value="instance.layoutEdited"
+          >
+            <zd-activator-wrapper
+              ref="root"
+              v-bind="mergeProps(onMenu, onTooltip)"
+              :child-props="{
+                component: 'ZdButton',
+                name: instance.name + '_button',
+                icon: true,
+                iconName: 'mdi-table-star',
+                isVisible: instance.isVisible,
+              }"
+            ></zd-activator-wrapper>
+          </v-badge>
+        </template>
+        <span>{{ $t('LAYOUT') + (instance.currentLayoutName || $t('DEFAULT_LAYOUT')) }}</span>
+      </v-tooltip>
+    </template>
+    <v-list>
+      <v-list-item
+        :class="['tek-grid-layout-item-header', { edited: instance.layoutEdited }]"
+      >
+        {{ instance.layoutEdited ? $t('LAYOUT_MODIFIED') : $t('LAYOUT_NOT_MODIFIED')}}
+      </v-list-item>
+      <v-list-item>
+        <zd-text-input
+          :name="instance.name+'_new_layout'"
+          ref="inputNewLayout"
+          v-bind="{
+            showHelper: false,
+            showLabel: false,
+            placeholder: 'NEW_LAYOUT',
+            appendOuterIcon: 'mdi-check',
+            autofocus: true,
+            autofill: false,
+            keyMap: {
+              enter: {
+                event: confirmLayoutClick,
+                input: true,
+                active: true,
+              },
+            },
+            events: {
+              appendOuterIconClick: confirmLayoutClick,
+            },
+          }"
+        />
+      </v-list-item>
+      <v-list-item
+        v-if="!instance.layoutEdited"
+        :class="['tek-grid-layout-item', {
+          selected: instance.currentLayoutName === ''
+        }]"
+        @click="instance.applyLayout('')"
+      >
+      {{ $t('DEFAULT_LAYOUT') }}
+      </v-list-item>
+      <v-list-item
+        v-for="item in instance.layoutNames"
+        :key="item"
+        :class="['tek-grid-layout-item', {
+          selected: item === instance.currentLayoutName
+        }]"
+        @click="applyOrUpdateLayout($event, item)"
+      >
+        {{ item }}
+        <span v-if="!instance.layoutEdited" class="tek-grid-layout-item-buttons">
+          <zd-button
+            :name="'tek-grid-layout-item-delete_' + instance.name + item"
+            v-bind="{
+              small: true,
+              icon: true,
+              iconName: 'mdi-trash-can-outline',
+              events: {
+                click: ({ event }) => { deleteLayout(event, item) },
+              },
+            }"
+          />
+        </span>
+      </v-list-item>
+      <v-list-item
+        v-if="instance.layoutEdited"
+        :class="['tek-grid-layout-item-discard']"
+        @click="instance.discardChanges()"
+      >
+        <zd-button small color="error darken-2" width="100%" name="tek-grid-layout-item-discard-changes" label="LAYOUT_DISCART_CHANGES"></zd-button>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts" src="./TekGridLayoutOptions.ts"></script>
+
+<style lang="scss">
+.tek-grid-layout-options {
+  &-badge {
+    .v-badge__badge {
+      font-size: var(--zd-font-caption-size);
+      font-weight: var(--zd-font-caption-weight);
+      line-height: 14px;
+      pointer-events: none;
+      background-color: var(--zd-badge-background-color) !important;
+
+      span {
+        color: var(--zd-badge-text-color) !important;
+      }
+    }
+  }
+}
+
+.tek-grid-layout-item {
+  font-size: 13px;
+  cursor: pointer;
+  min-height: 30px;
+
+  &.selected {
+    font-weight: 700;
+  }
+
+  &:hover {
+    &.theme--light {
+      background: #eee;
+    }
+  }
+
+  .tek-grid-layout-item-buttons {
+    position: absolute;
+    right: 16px;
+
+    .v-icon {
+      font-size: 18px;
+    }
+  }
+}
+
+.tek-grid-layout-item-header {
+  max-width: 270px;
+  font-size: 13px;
+  font-weight: bold;
+  color: var(--v-primary-base) !important;
+  line-height: 18px;
+
+  &.edited {
+    color: var(--v-error-darken2) !important;
+  }
+}
+
+.tek-grid-layout-item-discard {
+  min-height: 30px;
+  padding-top: 10px;
+}
+</style>

package/src/components/tek-grid/row/TekGridFooterRow.ts

@@ -0,0 +1,62 @@
+import { GridColumn } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { PropType, defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		isSelected: {
+			type: Boolean,
+			required: true,
+		},
+		selectable: {
+			type: Boolean,
+			required: true,
+		},
+		selectionDisabled: {
+			type: Boolean,
+			required: true,
+		},
+		cellSelection: {
+			type: Boolean,
+			required: true,
+		},
+		isCurrent: {
+			type: Function as PropType<(args: { row: IDictionary; column?: GridColumn }) => boolean>,
+			required: true,
+		},
+		columns: {
+			type: Array as PropType<GridColumn[]>,
+			required: true,
+		},
+		row: {
+			type: Object as PropType<IDictionary>,
+			required: true,
+		},
+		fixedLeft: {
+			type: Object as PropType<IDictionary>,
+			required: true,
+		},
+		fixedRight: {
+			type: Object as PropType<IDictionary>,
+			required: true,
+		},
+	},
+	emits: ['focusin'],
+	setup(props, { emit }) {
+		const focusin = (event: Event) => {
+			emit('focusin', { event, row: props.row });
+		};
+
+		const getLevel = (row: IDictionary) => {
+			if (!row.groupHeaders) return 0;
+
+			const { length } = row.groupHeaders;
+			return length + 1;
+		};
+
+		return {
+			focusin,
+			getLevel,
+		};
+	},
+});

package/src/components/tek-grid/row/TekGridFooterRow.vue

@@ -0,0 +1,64 @@
+<template>
+  <table-row
+    :cssClass="[
+      'tek-grid-footer-row',
+      { 'tek-grid-footer-row--summary': row.groupSummary }
+    ]"
+  >
+    <td
+      v-if="selectable"
+      :class="[
+        'zd-grid__cell',
+        'zd-grid__cell--fixed',
+        'zd-grid__selectable-cell',
+      ]"
+    ></td>
+    <zd-grid-cell
+      v-for="(column, index) in columns" :key="column.name"
+      :row="row"
+      :column="column"
+      :cssClass="[
+        {
+          'zd-grid__cell--fixed': column.fixed,
+          'zd-grid__action-cell--fixed': column.actionFixed,
+        },
+      ]"
+      :cssStyle="[{
+        left: column.fixed ? fixedLeft[column.name] : 'unset',
+        right: column.actionFixed ? fixedRight[column.name] : 'unset',
+      }]"
+      :cellSelection="cellSelection"
+      :isCurrent="isCurrent({ row, column })"
+      v-memo="[row, column, fixedLeft, fixedRight, cellSelection, isCurrent({ row, column })]"
+      @focus="cellFocus($event, column)"
+      @focusin="focusin($event, column)"
+    >
+      <template #prepend>
+        <tek-grid-indentation
+          v-if="index === 0"
+          footer
+          :level="getLevel(row)"
+        ></tek-grid-indentation>
+      </template>
+    </zd-grid-cell>
+  </table-row>
+</template>
+
+<script lang="ts" src="./TekGridFooterRow"></script>
+
+<style lang="scss">
+.tek-grid-footer-row {
+  &--summary {
+    background: var(--row-active-color);
+
+    .zd-grid__cell-content {
+      font-size: 15px;
+    }
+  }
+
+  .zd-grid__cell-content {
+    padding: 0 8px;
+    font-weight: bold;
+  }
+}
+</style>

package/src/components/tek-grid/row/TekGridGroupRow.ts

@@ -0,0 +1,65 @@
+import { GridColumn } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { PropType, defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		isSelected: {
+			type: Boolean,
+			required: true,
+		},
+		isCurrentRow: {
+			type: Boolean,
+			required: true,
+		},
+		selectable: {
+			type: Boolean,
+			required: true,
+		},
+		selectionDisabled: {
+			type: Boolean,
+			required: true,
+		},
+		cellSelection: {
+			type: Boolean,
+			required: true,
+		},
+		isCurrent: {
+			type: Function as PropType<(args: { row: IDictionary; column?: GridColumn }) => boolean>,
+			required: true,
+		},
+		row: {
+			type: Object as PropType<IDictionary>,
+			required: true,
+		},
+		indeterminate: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	emits: ['click', 'checkboxClick', 'focusin', 'expandClick'],
+	setup(props, { emit }) {
+		const click = (event: Event) => {
+			emit('click', event);
+		};
+
+		const checkboxClick = (event: Event) => {
+			emit('checkboxClick', event);
+		};
+
+		const focusin = (event: Event) => {
+			emit('focusin', { event, row: props.row });
+		};
+
+		const expandClick = (event: Event) => {
+			emit('expandClick', { event, row: props.row });
+		};
+
+		return {
+			click,
+			focusin,
+			checkboxClick,
+			expandClick,
+		};
+	},
+});

package/src/components/tek-grid/row/TekGridGroupRow.vue

@@ -0,0 +1,65 @@
+<template>
+  <table-row
+    :class="[
+      'tek-grid-group-row',
+      { 'tek-grid-row-group--summary': row.groupSummary }
+    ]"
+    :isCurrentRow="isCurrentRow"
+    @click="click($event)"
+  >
+    <zd-grid-checkbox
+      v-if="selectable"
+      :disabled="selectionDisabled"
+      :isSelected="isSelected"
+      :indeterminate="indeterminate"
+      :cellSelection="cellSelection"
+      :isCurrent="isCurrent({ row })"
+      @focusin="focusin($event)"
+      @click.stop="checkboxClick($event)"
+    />
+
+    <td
+      :colspan="999"
+      :class="
+        [
+          'zd-grid__cell',
+          'text-left',
+          'tek-grid-group-cell',
+          'zd-grid__cell--fixed',
+        ]"
+      :style="`left: ${(selectable ? 40 : 0)}px`"
+      :tabindex="cellSelection ? 0 : ''"
+    >
+      <span
+        :class="[
+          'tek-grid-group-cell__container'
+        ]"
+        :style="`left: ${(selectable ? 48 : 8)}px`"
+      >
+        <tek-grid-indentation
+          :level="row.groupHeaders.length"
+        ></tek-grid-indentation>
+        <v-icon
+          :class="{ closed: !row.groupOpened }"
+          @click="expandClick($event)"
+          :key="`${row.groupIndex}_${row.groupValue}`"
+        >{{ $getIcon('expand') }}</v-icon>
+        <span class="tek-grid__group-text zd-ml-2">{{ (row.groupLabel? row.groupLabel + ': ': '') + row.groupValue }}</span>
+      </span>
+    </td>
+  </table-row>
+</template>
+
+<script lang="ts" src="./TekGridGroupRow"></script>
+
+<style lang="scss">
+.tek-grid-group-cell {
+  font-weight: bold;
+
+  &__container {
+    height: 100%;
+    align-items: center;
+    position: sticky;
+  }
+}
+</style>

package/src/components/tek-user-info/TekUserInfo.ts

@@ -0,0 +1,51 @@
+import { ZdUserInfoProps } from '@zeedhi/zd-user-info-vue';
+import { defineComponent } from 'vue';
+import { TekUserInfo as TekUserInfoClass } from '@zeedhi/teknisa-components-common';
+import type { IComponentRender } from '@zeedhi/common';
+import { useCreateInstance, useGetMethods } from '@zeedhi/vuetify';
+
+export const TekUserInfoProps ={
+  ...ZdUserInfoProps,
+  aboutImage: {
+    type: String,
+    default: '',
+  },
+  defaultEmail: {
+    type: String,
+    default: '',
+  },
+  versionInfo: {
+    type: [Object, String],
+    default: null,
+  },
+  versionUrl: {
+    type: String,
+    default: '',
+  },
+  bottomSlot: {
+    type: Array as () => IComponentRender[],
+    default: undefined,
+  },
+};
+
+const tekUserInfoComponent = defineComponent({
+  props: TekUserInfoProps,
+  inheritAttrs: false,
+  setup(props, ctx) {
+    const { instance, root } = useCreateInstance<TekUserInfoClass>(props, ctx, TekUserInfoClass);
+
+    const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+    return {
+      instance,
+      root,
+      click,
+      focus,
+      blur,
+      mouseenter,
+      mouseleave,
+    };
+  }
+})
+
+export default tekUserInfoComponent;

package/src/components/tek-user-info/TekUserInfo.vue

@@ -0,0 +1,53 @@
+<template>
+  <zd-user-info
+    :id="instance.name"
+    :instance-object="instance"
+    name="user-info"
+  >
+  </zd-user-info>
+</template>
+
+<script lang="ts" src="./TekUserInfo.ts"></script>
+
+<style lang="scss">
+.about-modal {
+  flex-grow: 0;
+  overflow-y: unset;
+  width: auto;
+  border: 3px solid var(--v-primary-base);
+
+  .zd-modal-card, .zd-modal-card-text, .zd-modal-container, .zd-tabs {
+    height: 100%;
+  }
+
+  .v-card-text {
+    font-size: .875rem !important;
+  }
+
+  .zd-modal-card-text{
+    padding: 8px !important;
+  }
+
+  .zd-modal-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .zd-tabs, .v-tabs-items {
+    overflow-y: auto;
+  }
+
+  .zd-image-valid{
+    width: 50%;
+    align-items: center;
+  }
+
+  #basic-user-info_version_tabs{
+    height: 300px !important;
+  }  
+
+  #basic-user-info_about_image {
+    text-align: center;
+  }
+}
+</style>

package/src/components/tek-user-info/TekUserInfoList.ts

@@ -0,0 +1,39 @@
+import { TekUserInfoList as TekUserInfoListClass } from '@zeedhi/teknisa-components-common';
+import { defineComponent } from 'vue';
+import { useCreateInstance, useGetMethods, ZdListProps } from '@zeedhi/vuetify';
+
+
+const TekUserInfoListProps = {
+  ...ZdListProps,
+  parentName: {
+    type: String,
+    default: '',
+  },
+  dense: {
+    type: [Boolean, String],
+    default: true,
+  },
+};
+
+const tekUserInfoListComponent = defineComponent({
+  props: TekUserInfoListProps,
+  inheritAttrs: false,
+  setup(props,ctx) {
+    const { instance, root } = useCreateInstance<TekUserInfoListClass>(props, ctx, TekUserInfoListClass);
+
+    const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+    return {
+      instance,
+      root,
+      click,
+      focus,
+      blur,
+      mouseenter,
+      mouseleave,
+    }; 
+  }
+
+})
+
+export default tekUserInfoListComponent;

package/src/components/tek-user-info/TekUserInfoList.vue

@@ -0,0 +1,12 @@
+<template>
+  <zd-list
+    :id="instance.name"
+    :instance-object="instance"
+    name="list"
+  ></zd-list>
+</template>
+
+<script lang="ts" src="./TekUserInfoList.ts"></script>
+
+<style lang="scss">
+</style>