@zeedhi/vuetify 1.112.0 → 3.0.0

package/src/components/zd-frame-page/ZdFramePage.ts

@@ -0,0 +1,25 @@
+import { FramePage } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdFrameProps } from '../zd-frame/ZdFrame';
+
+export const ZdFramePageProps = buildProps({
+	...ZdFrameProps,
+	name: {
+		type: String,
+		default: '',
+	},
+});
+
+const framePageComponent = defineComponent({
+	props: ZdFramePageProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<FramePage>(props, ctx, FramePage);
+
+		return { instance, root };
+	},
+});
+
+export default framePageComponent;

package/src/components/zd-frame-page/ZdFramePage.vue

@@ -0,0 +1,18 @@
+<template>
+  <zd-frame
+    :id="`${instance.name}_frame_page`"
+    :name="`${instance.name}_frame_page`"
+    :path="instance.path"
+    :instance-object="instance"
+    class="zd-frame-page"
+  />
+</template>
+
+<script lang="ts" src="./ZdFramePage.ts"></script>
+
+<style lang="scss">
+  .zd-frame-page {
+    display: block;
+    height: 100% !important;
+  }
+</style>

package/src/components/zd-grid/ZdGrid.ts

@@ -0,0 +1,341 @@
+import { Column, Grid, GridColumn, IComponent, IComponentRender, IGrid } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import {
+	ComponentPublicInstance,
+	ComputedRef,
+	ShallowRef,
+	UnwrapNestedRefs,
+	UnwrapRef,
+	computed,
+	defineComponent,
+	provide,
+	watch,
+} from 'vue';
+import { useCellSelection } from '../../composables/cellSelection';
+import { useColumnDrag } from '../../composables/columnDrag';
+import { useColumnResize } from '../../composables/columnResize';
+import { useDensity } from '../../composables/density';
+import { useFixedColumns } from '../../composables/fixedColumns';
+import { useGridColorVars } from '../../composables/gridColorVars';
+import { useGridColumns } from '../../composables/gridColumns';
+import { useGridSelection } from '../../composables/gridSelection';
+import { useGridSorting } from '../../composables/gridSorting';
+import { useHasSlot } from '../../composables/hasSlot';
+import { useTableNavigation } from '../../composables/tableNavigation';
+import { useVirtualScroll } from '../../composables/virtualScroll';
+import { useWatchUrl } from '../../composables/watchUrl';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdIterableProps } from '../zd-iterable/ZdIterable';
+import { provideGridInstance } from './composables/grid-instance';
+
+export type CalcWidth = (column: UnwrapRef<Column>) => string | undefined;
+export type GetActions = ({ row, column }: { row: IDictionary; column: GridColumn }) => IComponent[];
+export type GetConditionalProps = ({ row, column }: { row: IDictionary; column: Column }) => Partial<IComponentRender>;
+
+export const ZdGridProps = buildProps({
+	...ZdIterableProps,
+	cellSelection: {
+		type: [Boolean, String],
+		default: false,
+	},
+	dense: {
+		type: [Boolean, String],
+		default: true,
+	},
+	disableSelection: {
+		type: [String, Function],
+		default: undefined,
+	},
+	dragColumns: {
+		type: [Boolean, String],
+		default: false,
+	},
+	errorSlot: {
+		type: Array,
+		default: () => [],
+	},
+	fillHeight: {
+		type: [Boolean, String],
+		default: false,
+	},
+	footerSlot: {
+		type: Array,
+		default: () => [
+			{ name: '<<NAME>>_iterablePagination', component: 'ZdIterablePagination' },
+			{
+				name: '<<NAME>>_iterableInfoDiv',
+				component: 'ZdTag',
+				cssClass: 'zd-grid-div-footer',
+				tag: 'div',
+				children: [
+					{
+						name: '<<NAME>>_iterablePageSize',
+						component: 'ZdIterablePageSize',
+						iterableComponentName: '<<NAME>>',
+					},
+					{
+						name: '<<NAME>>_iterablePageInfo',
+						component: 'ZdIterablePageInfo',
+						iterableComponentName: '<<NAME>>',
+					},
+				],
+			},
+		],
+	},
+	headerBackground: {
+		type: String,
+	},
+	headerCellTextColor: {
+		type: String,
+		default: '',
+	},
+	height: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	loadingText: {
+		type: String,
+		default: 'LOADING',
+	},
+	maxHeight: {
+		type: [Number, String],
+		default: 'none',
+	},
+	maxWidth: {
+		type: [Number, String],
+		default: 'none',
+	},
+	minHeight: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	minWidth: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	noDataSlot: {
+		type: Array,
+		default: () => [
+			{
+				name: '<<NAME>>_no-data',
+				component: 'ZdText',
+				cssClass: 'no-data',
+				text: 'NO_DATA',
+			},
+		],
+	},
+	noDataText: {
+		type: String,
+		default: 'NO_DATA',
+	},
+	noResultSlot: {
+		type: Array,
+		default: () => [
+			{
+				name: '<<NAME>>_no-result',
+				component: 'ZdText',
+				cssClass: 'no-result',
+				text: 'NO_RESULT',
+			},
+		],
+	},
+	noResultsText: {
+		type: String,
+		default: 'NO_RESULT',
+	},
+	resizeColumns: {
+		type: [Boolean, String],
+		default: false,
+	},
+	rowStyleConditions: {
+		type: [Function, String],
+		default: () => {},
+	},
+	selectable: {
+		type: [Boolean, String],
+		default: false,
+	},
+	selectAllPages: {
+		type: [Boolean, String],
+		default: false,
+	},
+	showFooter: {
+		type: [Boolean, String],
+		default: true,
+	},
+	showHeader: {
+		type: [Boolean, String],
+		default: true,
+	},
+	showSelectAll: {
+		type: [Boolean, String],
+		default: true,
+	},
+	toolbarSlot: {
+		type: Array,
+		default: () => [
+			{
+				name: '<<NAME>>_gridSearch',
+				component: 'ZdSearch',
+				cssClass: 'zd-grid-search',
+			},
+		],
+	},
+	width: {
+		type: [Number, String],
+		default: '100%',
+	},
+	backgroundColor: {
+		type: [String],
+		default: 'transparent',
+	},
+});
+
+const gridComponent = defineComponent({
+	props: ZdGridProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Grid, ComponentPublicInstance>(props, ctx, Grid);
+
+		const gridScope = useGridInstance({ instance, root });
+
+		const cellClick = ({ row, column, event }: { row: IDictionary<any>; column: GridColumn; event: Event }) => {
+			instance.cellClick(row, column, event, gridScope.rootEl.value);
+		};
+
+		const rowClick = (row: IDictionary<any>, event: Event) => {
+			instance.rowClick(row, event, gridScope.rootEl.value);
+		};
+
+		return {
+			...gridScope,
+			cellClick,
+			rowClick,
+			instance,
+			root,
+		};
+	},
+});
+
+export function useGridInstance({
+	instance,
+	root,
+	renderedData,
+}: {
+	instance: UnwrapNestedRefs<IGrid>;
+	root: Readonly<ShallowRef<ComponentPublicInstance | null>>;
+	renderedData?: ComputedRef<IDictionary<any>[]>;
+}) {
+	useWatchUrl(instance);
+
+	const rootEl = getRootElement(root);
+	useColumnDrag({ instance, rootEl });
+	useTableNavigation({ instance, rootEl });
+
+	const { updateFixedColumns, fixedLeft, fixedRight } = useFixedColumns({ instance, rootEl });
+
+	const { resizeMouseDownHandler, resizeClickHandler, calcWidth } = useColumnResize({
+		instance,
+		rootEl,
+		onResizeCallback: updateFixedColumns,
+	});
+
+	const { density } = useDensity({ instance });
+
+	const { headers, visibleColumns } = useGridColumns({ instance, rootEl });
+
+	const computedData = computed(() => instance.getData());
+
+	const { selectedRows, allselectedState, selectAllClick, selectRowClick } = useGridSelection({ instance, rootEl });
+
+	const { isCurrent, cellFocusIn, isCurrentRow } = useCellSelection({ instance });
+
+	const { calcScrollData, scrollData, addTopPadding, addBottomPadding, shouldRender } = useVirtualScroll({
+		instance,
+		rootEl,
+		renderedData: renderedData || computedData,
+	});
+
+	const cellFocus = ({ row, column }: { row: IDictionary; column: GridColumn }) => {
+		instance.selectCell(row, column);
+	};
+
+	const getActions: GetActions = ({ row, column }: { row: IDictionary; column: GridColumn }) => {
+		return column.childrenProps.map((child) => instance.getActionComponent(child, column, row));
+	};
+
+	const { sortBy, updateSortBy } = useGridSorting({ instance });
+
+	const changeData = () => {
+		if (!computedData.value.length) return;
+
+		instance.changeData(computedData.value);
+		const { selectedRows, datasource } = instance;
+		const searchableData = [...datasource.data];
+		const { uniqueKey } = instance.datasource;
+
+		instance.selectedRows = selectedRows.map((row) => {
+			const index = searchableData.findIndex((dataRow) => dataRow[uniqueKey] === row[uniqueKey]);
+			return index !== -1 ? searchableData.splice(index, 1)[0] : row;
+		});
+
+		calcScrollData();
+	};
+
+	watch(
+		() => computedData.value,
+		() => {
+			changeData();
+		},
+		{ deep: true, immediate: true },
+	);
+
+	const { cssColorVars } = useGridColorVars({ instance });
+
+	provideGridInstance(instance);
+
+	provide('calcWidth', calcWidth);
+	provide('getActions', getActions);
+
+	const slots = useHasSlot();
+
+	const hasToolbarSlot = !!slots.toolbarSlot?.hasContent;
+	const hasFooterSlot = !!slots.footerSlot?.hasContent;
+
+	return {
+		rootEl,
+		scrollData,
+		visibleColumns,
+		sortBy,
+		updateSortBy,
+		selectRowClick,
+		selectAllClick,
+		allselectedState,
+		cellFocusIn,
+		isCurrentRow,
+		cssColorVars,
+		getActions,
+		cellFocus,
+		isCurrent,
+		hasFooterSlot,
+		instance,
+		root,
+		headers,
+		computedData,
+		density,
+		changeData,
+		fixedLeft,
+		resizeClickHandler,
+		resizeMouseDownHandler,
+		hasToolbarSlot,
+		fixedRight,
+		calcWidth,
+		selectedRows,
+		addTopPadding,
+		addBottomPadding,
+		shouldRender,
+	};
+}
+
+export default gridComponent;