@zeedhi/vuetify 3.0.6 → 3.0.8

package/dist/components/zd-tooltip/ZdTooltip.js

@@ -0,0 +1,92 @@
+import { Tooltip } from '@zeedhi/common';
+import { computed, defineComponent, mergeProps } from 'vue';
+import { buildProps } from '../../utils';
+import ZdActivatorWrapper from '../zd-activator-wrapper/ZdActivatorWrapper.vue';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+export const ZdTooltipProps = buildProps({
+    ...ZdComponentRenderProps,
+    bottom: {
+        type: [Boolean, String],
+        default: false,
+    },
+    color: {
+        type: String,
+        default: '',
+    },
+    disabled: {
+        type: [Boolean, String],
+        default: false,
+    },
+    label: {
+        type: String,
+        default: '',
+    },
+    left: {
+        type: [Boolean, String],
+        default: false,
+    },
+    maxWidth: {
+        type: [Number, String],
+        default: undefined,
+    },
+    minWidth: {
+        type: [Number, String],
+        default: undefined,
+    },
+    nudge: {
+        type: [Number, String],
+        default: 10,
+    },
+    openOnClick: {
+        type: [Boolean, String],
+        default: false,
+    },
+    openOnFocus: {
+        type: [Boolean, String],
+        default: true,
+    },
+    openOnHover: {
+        type: [Boolean, String],
+        default: true,
+    },
+    right: {
+        type: [Boolean, String],
+        default: false,
+    },
+    top: {
+        type: [Boolean, String],
+        default: false,
+    },
+    // Zeedhi 3.0
+});
+const tooltipComponent = defineComponent({
+    props: ZdTooltipProps,
+    inheritAttrs: false,
+    components: {
+        ZdActivatorWrapper,
+    },
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Tooltip);
+        const getLocation = () => {
+            if (instance.right)
+                return 'right';
+            if (instance.left)
+                return 'left';
+            if (instance.top)
+                return 'top';
+            if (instance.bottom)
+                return 'bottom';
+        };
+        const location = computed(() => {
+            return getLocation();
+        });
+        return {
+            instance,
+            root,
+            location,
+            mergeProps,
+        };
+    },
+});
+export default tooltipComponent;

package/dist/components/zd-tree/ZdTree.js

@@ -0,0 +1,315 @@
+import { Tree, } from '@zeedhi/common';
+import { computed, defineComponent, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue';
+import { useTheme } from 'vuetify';
+import { buildProps } from '../../utils/buildProps';
+import { setFillHeight } from '../../utils/fillHeight';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+import ZdTreeAfterTitle from './ZdTreeAfterTitle.vue';
+import ZdTreeCheckbox from './ZdTreeCheckbox.vue';
+export const ZdTreeProps = buildProps({
+    ...ZdComponentRenderProps,
+    nodes: {
+        type: [Array, String],
+        default: () => [],
+    },
+    itemIconName: {
+        type: String,
+        default: '',
+    },
+    groupIconName: {
+        type: String,
+        default: '',
+    },
+    openedIconName: {
+        type: String,
+        default: '',
+    },
+    closedIconName: {
+        type: String,
+        default: '',
+    },
+    allowMultiSelect: {
+        type: [String, Boolean],
+        default: true,
+    },
+    allowDragDrop: {
+        type: [String, Boolean],
+        default: true,
+    },
+    afterTitleSlot: {
+        type: [String, Object],
+        default: () => [],
+    },
+    toolbarSlot: {
+        type: Array,
+        default: () => [],
+    },
+    titleSlot: {
+        type: Array,
+        default: () => [],
+    },
+    datasource: {
+        type: Object,
+        default: () => ({}),
+    },
+    parentField: {
+        type: String,
+        default: '',
+    },
+    titleField: {
+        type: String,
+        default: '',
+    },
+    dataField: {
+        type: String,
+        default: '',
+    },
+    checkedField: {
+        type: String,
+        default: 'checked',
+    },
+    checkbox: {
+        type: [Boolean, String],
+        default: false,
+    },
+    openLevelOnLoad: {
+        type: [String, Number, Boolean],
+        default: false,
+    },
+    disableCheckbox: {
+        type: [String, Function],
+        default: undefined,
+    },
+    height: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    minHeight: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    maxHeight: {
+        type: [Number, String],
+        default: 'none',
+    },
+    width: {
+        type: [Number, String],
+        default: '100%',
+    },
+    minWidth: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    maxWidth: {
+        type: [Number, String],
+        default: 'none',
+    },
+    fillHeight: {
+        type: [Boolean, String],
+        default: false,
+    },
+});
+export default defineComponent({
+    name: 'ZdTree',
+    components: { ZdTreeCheckbox, ZdTreeAfterTitle },
+    props: ZdTreeProps,
+    setup(props, ctx) {
+        const treeRef = ref();
+        const { instance, root } = useCreateInstance(props, ctx, Tree);
+        const selectedNodesTitle = ref('');
+        const beforeNodeState = ref({});
+        const proxy = getCurrentInstance()?.proxy;
+        const theme = useTheme();
+        function ThemeColor(color = '') {
+            if (!color)
+                return '';
+            if (color[0] === '#')
+                return color;
+            const parts = color.split(' ');
+            let themeColors;
+            let idx;
+            idx = parts.indexOf('light');
+            if (idx !== -1) {
+                themeColors = theme.themes.value.light.colors;
+                parts.splice(idx, 1);
+            }
+            else {
+                idx = parts.indexOf('dark');
+                if (idx !== -1) {
+                    themeColors = theme.themes.value.dark.colors;
+                    parts.splice(idx, 1);
+                }
+                else {
+                    themeColors = theme.current.value.colors;
+                }
+            }
+            return themeColors[parts[0]] || parts[0];
+        }
+        const cssColorVars = computed(() => ({
+            '--current-row-color': `${ThemeColor('primary')}40`,
+            '--current-row-hover-color': `${ThemeColor('primary')}30`,
+        }));
+        const nodeChange = () => {
+            treeRef.value?.traverse((node) => {
+                instance.reapplyConditions(node);
+            });
+        };
+        const refsMap = ref({});
+        function getAfterTitleEls(rootEl) {
+            return Array.from(rootEl.querySelectorAll('.zd-tree-after-title'));
+        }
+        function getMaxOffset(els) {
+            const siblings = els.map((el) => el.previousElementSibling instanceof HTMLElement ? el.previousElementSibling : null);
+            return siblings.reduce((result, el) => {
+                if (!el)
+                    return result;
+                const style = getComputedStyle(el);
+                const offset = el.offsetLeft + el.offsetWidth + parseFloat(style.marginLeft || '0') + parseFloat(style.marginRight || '0');
+                return offset > result ? offset : result;
+            }, 0);
+        }
+        function setAfterTitleMargin(rootEl) {
+            if (!rootEl)
+                return;
+            const els = getAfterTitleEls(rootEl);
+            const maxOffset = getMaxOffset(els);
+            els.forEach((el) => {
+                el.style.left = `${maxOffset}px`;
+            });
+        }
+        function addObserver(node) {
+            if (!node.pathStr)
+                return;
+            const ref = refsMap.value[node.pathStr];
+            const el = ref;
+            const observer = new ResizeObserver(() => {
+                const root = treeRef.value?.$el || treeRef.value;
+                if (root)
+                    setAfterTitleMargin(root);
+            });
+            if (el.parentElement) {
+                observer.observe(el.parentElement);
+            }
+        }
+        onMounted(() => {
+            instance.setTree(treeRef.value);
+            nodeChange();
+            const rootEl = (treeRef.value?.$el || treeRef.value);
+            if (!rootEl)
+                return;
+            const observeAfterTitleSlots = () => {
+                const afterTitleEls = rootEl.querySelectorAll('.zd-tree-after-title');
+                afterTitleEls.forEach((el) => {
+                    if (!el.parentElement)
+                        return;
+                    if (!el._hasObserver) {
+                        const resizeObserver = new ResizeObserver(() => setAfterTitleMargin(rootEl));
+                        resizeObserver.observe(el.parentElement);
+                        el._hasObserver = true;
+                    }
+                });
+            };
+            setAfterTitleMargin(rootEl);
+            observeAfterTitleSlots();
+            if (instance.fillHeight)
+                setFillHeight(rootEl);
+            const mutationObserver = new MutationObserver(() => {
+                setAfterTitleMargin(rootEl);
+                observeAfterTitleSlots();
+            });
+            mutationObserver.observe(rootEl, { childList: true, subtree: true });
+        });
+        watch(() => instance.nodes, () => {
+            nextTick(() => {
+                const rootEl = (treeRef.value?.$el || treeRef.value);
+                if (!rootEl)
+                    return;
+                setAfterTitleMargin(rootEl);
+                // registra ResizeObserver nos novos afterTitleSlots
+                const afterTitleEls = rootEl.querySelectorAll('.zd-tree-after-title');
+                afterTitleEls.forEach((el) => {
+                    if (!el.parentElement)
+                        return;
+                    const observer = new ResizeObserver(() => setAfterTitleMargin(rootEl));
+                    observer.observe(el.parentElement);
+                });
+            });
+        }, { deep: true });
+        watch(() => instance.datasource?.data?.length, () => {
+            instance.createNodesFromDatasource();
+        });
+        const onNodeDrop = (nodes, position, event) => {
+            instance.nodeDrop(nodes, position, event, proxy?.$el);
+            nextTick(() => nodeChange());
+        };
+        const onNodeSelect = (nodes, event) => {
+            const prevCount = Object.keys(beforeNodeState.value).length;
+            beforeNodeState.value = {};
+            if (prevCount <= nodes.length || event.ctrlKey || event.metaKey) {
+                nodes.forEach((node) => {
+                    beforeNodeState.value[JSON.stringify(node.path)] = node.isSelected;
+                });
+            }
+            instance.nodeSelect(nodes, event, proxy?.$el);
+            selectedNodesTitle.value = nodes.map((n) => n.title).join(', ');
+            nextTick(() => nodeChange());
+        };
+        const onNodeClick = (node, event) => {
+            if (beforeNodeState.value[JSON.stringify(node.path)] &&
+                (Object.keys(beforeNodeState.value).length === 1 || event.ctrlKey || event.metaKey)) {
+                treeRef.value?.updateNode(node.path, { isSelected: false });
+            }
+            instance.nodeClick(node, event, proxy?.$el);
+        };
+        const onNodeDblClick = (node, event) => {
+            instance.nodeDblClick(node, event, proxy?.$el);
+        };
+        const instanceNode = (node) => (node?.path ? instance.getNode(node.path) : undefined);
+        const nodeCheck = (node, event) => {
+            instance.nodeCheck(node, event, proxy?.$el);
+        };
+        const toggleNode = (node) => {
+            if (treeRef.value && typeof treeRef.value.toggleNode === 'function') {
+                treeRef.value.toggleNode(node);
+            }
+            else {
+                node.isExpanded = !node.isExpanded;
+            }
+            updateAfterTitlePositions();
+        };
+        function updateAfterTitlePositions() {
+            nextTick(() => {
+                const rootEl = (treeRef.value?.$el || treeRef.value);
+                if (!rootEl)
+                    return;
+                setAfterTitleMargin(rootEl);
+                const afterTitleEls = rootEl.querySelectorAll('.zd-tree-after-title');
+                afterTitleEls.forEach((el) => {
+                    if (!el.parentElement)
+                        return;
+                    if (!el._hasObserver) {
+                        const observer = new ResizeObserver(() => setAfterTitleMargin(rootEl));
+                        observer.observe(el.parentElement);
+                        el._hasObserver = true;
+                    }
+                });
+            });
+        }
+        return {
+            root,
+            treeRef,
+            instance,
+            selectedNodesTitle,
+            cssColorVars,
+            onNodeDrop,
+            onNodeSelect,
+            onNodeClick,
+            onNodeDblClick,
+            instanceNode,
+            nodeCheck,
+            toggleNode,
+            addObserver,
+        };
+    },
+});

package/dist/components/zd-tree/ZdTreeAfterTitle.js

@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils/buildProps';
+export const ZdTreeAfterTitleProps = buildProps({
+    afterTitleSlot: {
+        type: Object,
+    },
+    node: {
+        type: Object,
+    },
+});
+const treeAfterTitleComponent = defineComponent({
+    props: ZdTreeAfterTitleProps,
+    setup() {
+        return {};
+    },
+});
+export default treeAfterTitleComponent;

package/dist/components/zd-tree/ZdTreeCheckbox.js

@@ -0,0 +1,97 @@
+import { computed, defineComponent, nextTick, ref, watch } from 'vue';
+import { buildProps } from '../../utils/buildProps';
+export const ZdTreeCheckboxProps = buildProps({
+    node: {
+        type: Object,
+        default: null,
+    },
+    checkedField: {
+        type: String,
+        default: 'checked',
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+});
+export default defineComponent({
+    props: ZdTreeCheckboxProps,
+    setup(props, { emit }) {
+        const localNode = ref(props.node);
+        const checkedField = ref(props.checkedField);
+        let isUpdatingFromChildren = false;
+        const childrenCheck = computed(() => {
+            if (isUpdatingFromChildren)
+                return localNode.value?.data?.[checkedField.value] || false;
+            return localNode.value?.children?.every((child) => child.data?.[checkedField.value]) || false;
+        });
+        watch(childrenCheck, (newVal, oldVal) => {
+            if (isUpdatingFromChildren || newVal === oldVal)
+                return;
+            if (localNode.value?.data && localNode.value.data[checkedField.value] !== newVal) {
+                isUpdatingFromChildren = true;
+                localNode.value.data[checkedField.value] = newVal;
+                nextTick(() => {
+                    isUpdatingFromChildren = false;
+                });
+            }
+        });
+        const isIndeterminate = computed(() => {
+            const total = localNode.value?.children?.length || 0;
+            const checked = localNode.value?.children?.filter((child) => child.data?.[checkedField.value]).length || 0;
+            return checked > 0 && checked < total;
+        });
+        const checkboxValue = computed({
+            get: () => localNode.value?.data?.[checkedField.value] || false,
+            set: (value) => {
+                if (localNode.value?.data) {
+                    isUpdatingFromChildren = true;
+                    localNode.value.data[checkedField.value] = value;
+                    // Propaga para os filhos
+                    if (localNode.value.children?.length) {
+                        toggleChildren(localNode.value.children, value);
+                    }
+                    nextTick(() => {
+                        isUpdatingFromChildren = false;
+                    });
+                }
+            },
+        });
+        function toggleChildren(nodes, value) {
+            nodes.forEach((node) => {
+                if (node.data) {
+                    // Crie um novo objeto para data, evitando mutação direta
+                    node.data = { ...node.data, [checkedField.value]: value };
+                }
+                if (node.children?.length)
+                    toggleChildren(node.children, value);
+            });
+        }
+        function checkboxToggle() {
+            const currentValue = localNode.value?.data?.[checkedField.value] || false;
+            const newValue = !currentValue;
+            // Atualiza o nó atual
+            if (localNode.value?.data) {
+                localNode.value.data[checkedField.value] = newValue;
+            }
+            // Propaga para os filhos
+            if (localNode.value?.children?.length) {
+                toggleChildren(localNode.value.children, newValue);
+            }
+        }
+        function click(event) {
+            if (props.disabled)
+                return;
+            checkboxToggle();
+            emit('click', event);
+        }
+        return {
+            localNode,
+            checkedField,
+            childrenCheck,
+            isIndeterminate,
+            checkboxValue,
+            click,
+        };
+    },
+});

package/dist/components/zd-tree-grid/ZdTreeGrid.js

@@ -0,0 +1,101 @@
+import { TreeGrid } from '@zeedhi/common';
+import { computed, defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdGridProps, useGridInstance } from '../zd-grid/ZdGrid';
+export const ZdTreeGridProps = buildProps({
+    ...ZdGridProps,
+    parentField: {
+        type: String,
+        default: '',
+    },
+    openLevelOnLoad: {
+        type: [String, Number, Boolean],
+        default: false,
+    },
+    fetchOnDemand: {
+        type: [String, Boolean],
+        default: true,
+    },
+    flat: {
+        type: [String, Boolean],
+        default: false,
+    },
+    detach: {
+        type: [String, Boolean],
+        default: false,
+    },
+    fieldHasChild: {
+        type: String,
+        default: '',
+    },
+    footerSlot: {
+        type: Array,
+        default: () => [],
+    },
+});
+const treeGridComponent = defineComponent({
+    props: ZdTreeGridProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TreeGrid);
+        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);
+        };
+        const computedData = computed(() => {
+            return instance.treeDataStructure.searchHasNoData
+                ? []
+                : instance.treeDataStructure.treeData || instance.getData();
+        });
+        const isOpened = (row) => {
+            return instance.treeDataStructure.isOpened(row);
+        };
+        const getKeysFrom = (data) => {
+            const { uniqueKey } = instance.datasource;
+            return data.map((toggledRow) => toggledRow[uniqueKey]);
+        };
+        /**
+         * Checks whether this row's selection state is indeterminate
+         * @param row
+         * @returns `true` if it is indeterminate
+         */
+        const isIndeterminate = (row) => {
+            const { uniqueKey } = instance.datasource;
+            const arrSelection = instance.selectAllPages ? instance.selectionState.except : instance.selectedRows;
+            const selectedKeys = getKeysFrom(arrSelection);
+            const childSelectionCount = row.tree__children?.reduce((result, child) => {
+                const isSelected = instance.callDisableSelection(child) || selectedKeys.includes(child[uniqueKey]);
+                return isSelected ? result + 1 : result;
+            }, 0);
+            return childSelectionCount > 0 && childSelectionCount < row.tree__children.length;
+        };
+        const hasChildOnDemand = (row) => {
+            return instance.treeDataStructure.hasChildOnDemand(row);
+        };
+        const toggleExpand = (row, rowIndex, event) => {
+            event?.stopPropagation();
+            return instance.toggleExpand(row, rowIndex);
+        };
+        const isSelected = (item) => {
+            return !!gridScope.selectedRows.value.find((row) => row[instance.datasource.uniqueKey] === item.value[instance.datasource.uniqueKey]);
+        };
+        return {
+            ...gridScope,
+            cellClick,
+            rowClick,
+            instance,
+            root,
+            computedData,
+            isOpened,
+            isIndeterminate,
+            hasChildOnDemand,
+            toggleExpand,
+            isSelected,
+        };
+    },
+});
+export default treeGridComponent;

package/dist/components/zd-tree-grid/cell/ZdTreeGridCell.js

@@ -0,0 +1,81 @@
+import { computed, defineComponent, inject } from 'vue';
+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,
+        },
+        hasChildOnDemand: {
+            type: Boolean,
+        },
+        showExpandIcon: {
+            type: Boolean,
+        },
+        isFirstCell: {
+            type: Boolean,
+        },
+    },
+    emits: ['focusin', 'click', 'expandIconClick'],
+    setup(props, { emit }) {
+        const tabindex = computed(() => (props.cellSelection ? 0 : ''));
+        const getActions = inject('getActions');
+        const gridInstance = inject('gridInstance');
+        if (!getActions || !gridInstance) {
+            throw new Error('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];
+        };
+        const expandIconClick = (event) => {
+            emit('expandIconClick', event);
+        };
+        const highlightSearchResult = (text) => {
+            if (typeof text !== 'string')
+                return text;
+            if (gridInstance.datasource.search) {
+                const reg = new RegExp(gridInstance.datasource.search, 'gi');
+                return text.replace(reg, (value) => `<span class="search-result">${value}</span>`);
+            }
+            return text;
+        };
+        return {
+            tabindex,
+            click,
+            focusin,
+            conditionalProps,
+            getActions,
+            getMergedConditionals,
+            expandIconClick,
+            highlightSearchResult,
+        };
+    },
+});