@zeedhi/teknisa-components-vuetify 3.1.0 → 3.2.0

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

@@ -1,124 +0,0 @@
-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,
-			TekGridLayoutOptionsProps,
-		);
-
-		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

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

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

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

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

@@ -1,65 +0,0 @@
-<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-loading/TekLoading.ts

@@ -1,30 +0,0 @@
-import { Loading } from '@zeedhi/teknisa-components-common';
-import { useCreateInstance, ZdLoadingProps } from '@zeedhi/vuetify';
-import { defineComponent } from 'vue';
-
-export const TekLoadingProps = {
-	...ZdLoadingProps,
-	text: {
-		type: String,
-		default: '',
-	},
-	image: {
-		type: String,
-		default: undefined,
-	},
-};
-
-const loadingComponent = defineComponent({
-	props: TekLoadingProps,
-	inheritAttrs: false,
-	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Loading>(props, ctx, Loading, TekLoadingProps);
-
-		return {
-			instance,
-			root,
-		};
-	},
-});
-
-export default loadingComponent;

package/src/components/tek-loading/TekLoading.vue

@@ -1,18 +0,0 @@
-<template>
-  <zd-loading
-    ref="root"
-    v-bind="{
-      name: instance.name,
-      text: instance.text,
-      image: instance.image,
-      zIndex: instance.zIndex,
-      textColor,
-      loadingColor,
-      size,
-      loadingWidth,
-      opacity,
-    }"
-  />
-</template>
-
-<script lang="ts" src="./TekLoading.ts"></script>

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

@@ -1,52 +0,0 @@
-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,
-		watch: false,
-  },
-};
-
-const tekUserInfoComponent = defineComponent({
-  props: TekUserInfoProps,
-  inheritAttrs: false,
-  setup(props, ctx) {
-    const { instance, root } = useCreateInstance<TekUserInfoClass>(props, ctx, TekUserInfoClass, TekUserInfoProps);
-
-    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

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