@zeedhi/vuetify 3.0.5 → 3.0.7

package/dist/components/zd-footer/ZdFooter.js

@@ -0,0 +1,77 @@
+import { Footer } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+export const ZdFooterProps = buildProps({
+    ...ZdComponentRenderProps,
+    absolute: {
+        type: [Boolean, String],
+        default: false,
+    },
+    app: {
+        type: [Boolean, String],
+        default: false,
+    },
+    centerSlot: {
+        type: Array,
+        default: () => [],
+    },
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    fixed: {
+        type: [Boolean, String],
+        default: false,
+    },
+    inset: {
+        type: [Boolean, String],
+        default: false,
+    },
+    leftSlot: {
+        type: Array,
+        default: () => [],
+    },
+    maxHeight: {
+        type: [Number, String],
+    },
+    maxWidth: {
+        type: [Number, String],
+    },
+    minHeight: {
+        type: [Number, String],
+    },
+    minWidth: {
+        type: [Number, String],
+    },
+    padless: {
+        type: [Boolean, String],
+        default: false,
+    },
+    rightSlot: {
+        type: Array,
+        default: () => [],
+    },
+    width: {
+        type: [Number, String],
+    },
+});
+const FooterComponent = defineComponent({
+    props: ZdFooterProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Footer);
+        const { click, mouseenter, mouseleave, mouseout, mouseover } = useGetMethods(instance, root);
+        return {
+            instance,
+            root,
+            click,
+            mouseenter,
+            mouseleave,
+            mouseout,
+            mouseover,
+        };
+    },
+});
+export default FooterComponent;

package/dist/components/zd-form/ZdForm.js

@@ -0,0 +1,85 @@
+import { ChildNotFoundError, Form } from '@zeedhi/common';
+import { defineComponent, onMounted } from 'vue';
+import { HeightProps } from '../../propsMixins/heightProps';
+import { WidthProps } from '../../propsMixins/widthProps';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+export const ZdFormProps = buildProps({
+    ...ZdComponentRenderProps,
+    ...HeightProps,
+    ...WidthProps,
+    align: {
+        type: String,
+    },
+    justify: {
+        type: String,
+    },
+    children: {
+        type: [String, (Array)],
+        default() {
+            return [];
+        },
+    },
+    value: {
+        type: Object,
+        default() {
+            return {};
+        },
+    },
+});
+const formComponent = defineComponent({
+    props: ZdFormProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Form);
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        const submit = (event) => {
+            const form = root.value;
+            const rootElement = getRootElement(root);
+            form?.validate().then(({ valid }) => {
+                if (valid) {
+                    ctx.emit('submit', event);
+                    instance.callSubmitEvent(event, rootElement.value);
+                }
+            });
+        };
+        const isChildVisible = (childProps) => {
+            try {
+                if (typeof childProps.name === 'string') {
+                    const childInst = instance.getChildInstance(childProps.name);
+                    return childInst.isVisible;
+                }
+            }
+            catch (e) {
+                if (!(e instanceof ChildNotFoundError)) {
+                    throw e;
+                }
+            }
+            return !!(childProps?.isVisible ?? true);
+        };
+        const updateValue = (value, childName) => {
+            instance.value[childName] = value;
+        };
+        onMounted(() => {
+            const form = root.value;
+            if (form) {
+                instance.setViewValidate(form.validate);
+                instance.setViewResetValidation(form.resetValidation);
+            }
+        });
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+            submit,
+            isChildVisible,
+            updateValue,
+        };
+    },
+});
+export default formComponent;

package/dist/components/zd-frame/ZdFrame.js

@@ -0,0 +1,76 @@
+import { Frame } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdComponentProps, useCreateInstance } from '../zd-component/ZdComponent';
+export const ZdFrameProps = buildProps({
+    ...ZdComponentProps,
+    path: {
+        type: String,
+        default: '',
+    },
+    type: {
+        type: String,
+        default: 'get',
+    },
+    params: {
+        type: [String, Object],
+        default: () => { },
+    },
+    local: {
+        type: Boolean,
+        default: false,
+    },
+    override: {
+        type: Object,
+        default: () => ({}),
+    },
+    overrideNamedProps: {
+        type: Object,
+        default: () => ({}),
+    },
+    cache: {
+        type: [Boolean, String],
+        default: false,
+    },
+    JSONCache: {
+        type: [Boolean, String],
+        default: false,
+    },
+    cacheDuration: {
+        type: Number,
+        default: 2 * 60 * 60 * 1000, // 2 hours
+    },
+    height: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    minHeight: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    maxHeight: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    width: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    minWidth: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    maxWidth: {
+        type: [Number, String],
+        default: 'auto',
+    },
+});
+const frameComponent = defineComponent({
+    props: ZdFrameProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Frame);
+        return { instance, root };
+    },
+});
+export default frameComponent;

package/dist/components/zd-frame-page/ZdFramePage.js

@@ -0,0 +1,21 @@
+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(props, ctx, FramePage);
+        return { instance, root };
+    },
+});
+export default framePageComponent;

package/dist/components/zd-grid/ZdGrid.js

@@ -0,0 +1,284 @@
+import { Grid } from '@zeedhi/common';
+import { 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 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(props, ctx, Grid);
+        const gridScope = useGridInstance({ instance, root });
+        const cellClick = ({ row, column, event }) => {
+            instance.cellClick(row, column, event, gridScope.rootEl.value);
+        };
+        const rowClick = (row, event) => {
+            instance.rowClick(row, event, gridScope.rootEl.value);
+        };
+        return {
+            ...gridScope,
+            cellClick,
+            rowClick,
+            instance,
+            root,
+        };
+    },
+});
+export function useGridInstance({ instance, root, renderedData, }) {
+    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 }) => {
+        instance.selectCell(row, column);
+    };
+    const getActions = ({ row, column }) => {
+        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;

package/dist/components/zd-grid/cell/ZdGridAction.js

@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue';
+export default defineComponent({
+    props: {
+        actions: {
+            type: Array,
+            required: true,
+        },
+    },
+    setup() {
+        return {};
+    },
+});

package/dist/components/zd-grid/cell/ZdGridCell.js

@@ -0,0 +1,59 @@
+import { computed, defineComponent, inject } from 'vue';
+import { NotProvidedError } from '../../../errors/not-provided';
+export default defineComponent({
+    props: {
+        row: {
+            type: Object,
+            required: true,
+        },
+        column: {
+            type: Object,
+            required: true,
+        },
+        cssClass: {
+            type: Array,
+            default: () => [],
+        },
+        cssStyle: {
+            type: Array,
+            default: () => [],
+        },
+        cellSelection: {
+            type: Boolean,
+            required: true,
+        },
+        isCurrent: {
+            type: Boolean,
+        },
+    },
+    emits: ['focusin', 'click'],
+    setup(props, { emit }) {
+        const tabindex = computed(() => (props.cellSelection ? 0 : ''));
+        const getActions = inject('getActions');
+        const gridInstance = inject('gridInstance');
+        if (!getActions || !gridInstance) {
+            throw new NotProvidedError(['getActions', 'gridInstance']);
+        }
+        const conditionalProps = computed(() => {
+            const { row, column } = props;
+            return gridInstance.getConditionalProps({ row, column });
+        });
+        const click = (event) => {
+            emit('click', event);
+        };
+        const focusin = (event) => {
+            emit('focusin', event);
+        };
+        const getMergedConditionals = (propName) => {
+            return conditionalProps.value[propName] || props.column[propName];
+        };
+        return {
+            tabindex,
+            click,
+            focusin,
+            conditionalProps,
+            getActions,
+            getMergedConditionals,
+        };
+    },
+});

package/dist/components/zd-grid/cell/ZdGridCellContent.js

@@ -0,0 +1,59 @@
+import { I18n } from '@zeedhi/core';
+import { computed, defineComponent, inject, onMounted, onUnmounted, ref, watch } from 'vue';
+export default defineComponent({
+    props: {
+        column: {
+            type: Object,
+            required: true,
+        },
+        cssClass: {
+            type: Array,
+            default: () => [],
+        },
+        cssStyle: {
+            type: Array,
+            default: () => [],
+        },
+        row: {
+            type: Object,
+            required: true,
+        },
+        value: {
+            type: [String, Number, Boolean, Array],
+        },
+        conditionalProps: {
+            type: [Object],
+        },
+    },
+    setup(props) {
+        const value = ref('');
+        const calcWidth = inject('calcWidth');
+        const formattedValue = computed(() => {
+            const colName = props.column.name;
+            const newRow = { ...props.row, [colName]: props.value };
+            return props.column.formatterByRow(newRow, props.conditionalProps);
+        });
+        const updateValue = () => {
+            value.value = props.column.formatterByRow(props.row, props.conditionalProps);
+        };
+        watch(formattedValue, () => {
+            value.value = formattedValue.value;
+        }, { immediate: true });
+        onMounted(() => {
+            I18n.registerChangeListener(updateValue);
+        });
+        onUnmounted(() => {
+            I18n.unregisterChangeListener(updateValue);
+        });
+        const width = computed(() => {
+            if (!calcWidth)
+                return '';
+            return calcWidth(props.column);
+        });
+        return {
+            value,
+            formattedValue,
+            width,
+        };
+    },
+});