@zeedhi/vuetify 3.0.6 → 3.0.7

package/dist/components/zd-select-multiple/ZdSelectMultiple.js

@@ -0,0 +1,326 @@
+import { SelectMultiple } from '@zeedhi/common';
+import { FormatterParserProvider } from '@zeedhi/core';
+import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { buildProps } from '../../utils';
+import { getRootElement } from '../zd-component/ZdComponent';
+import { useCreateInputInstance } from '../zd-input/ZdInput';
+import { ZdSelectProps, useSelect } from '../zd-select/ZdSelect';
+/**
+ * Select Multiple component
+ */
+export const ZdSelectMultipleProps = buildProps({
+    ...ZdSelectProps,
+    value: {
+        type: [Array, String],
+        default: () => [],
+    },
+    showSelectAll: {
+        type: [Boolean, String],
+        default: false,
+    },
+    maxRows: {
+        type: [String, Number],
+        default: null,
+    },
+    limit: {
+        type: [String, Number],
+        default: null,
+    },
+    showCheckboxAll: {
+        type: [String, Boolean],
+        default: false,
+    },
+    checkboxAll: {
+        type: [String, Boolean],
+        default: false,
+    },
+});
+const selectMultipleComponent = defineComponent({
+    props: ZdSelectMultipleProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInputInstance(props, ctx, SelectMultiple);
+        const selectScope = useSelect(instance, ctx, root);
+        const element = ref();
+        const checkboxItem = ref([]);
+        let initialHeight;
+        const expandedMode = ref(false);
+        let rows = 1;
+        const lastDisplayedChip = ref(0);
+        const hasHiddenRows = ref(false);
+        const maxRowsNumber = () => {
+            return Number(instance.maxRows || Infinity);
+        };
+        const selectItem = (item) => {
+            return checkboxItem.value.includes(item);
+        };
+        const toggleItem = (item) => {
+            const index = checkboxItem.value.indexOf(item.value);
+            if (index === -1) {
+                checkboxItem.value.push(item.value);
+            }
+            else {
+                checkboxItem.value.splice(index, 1);
+            }
+        };
+        const formattedValue = computed({
+            get() {
+                return instance.formatter(instance.selectValue);
+            },
+            set(value) {
+                instance.selectValue = value.map((row) => row.originalRow);
+                instance.updateSelectValue(instance.selectValue);
+            },
+        });
+        const formattedData = computed(() => {
+            const formatted = instance.formatter(instance.datasource.data);
+            const { disabledItems } = instance;
+            if (disabledItems.length === 0)
+                return formatted;
+            const disabledValues = disabledItems.map((item) => {
+                if (item && typeof item === 'object') {
+                    return item[instance.dataValue];
+                }
+                return item;
+            });
+            const disabledKey = instance.dataDisabled || 'disabled';
+            return formatted.map((item) => ({
+                ...item,
+                [disabledKey]: disabledValues.includes(item.value),
+            }));
+        });
+        const ajustSize = () => {
+            if (instance.dense) {
+                return 'x-small';
+            }
+            return 'small';
+        };
+        const disabledLength = computed(() => {
+            return formattedData.value.filter((item) => item.disabled).length;
+        });
+        const allSelected = computed(() => {
+            const dataLength = formattedValue.value.length - instance.insertedValues.length;
+            return dataLength && dataLength === instance.datasource.total - disabledLength.value;
+        });
+        const limitValue = computed(() => {
+            return instance.isFocused ? instance.limit || Infinity : 1;
+        });
+        const moreItemsText = computed(() => {
+            const selectedLength = formattedValue.value.length;
+            let moreChip = 0;
+            if (instance.limit) {
+                moreChip = selectedLength - limitValue.value;
+            }
+            else {
+                moreChip = selectedLength - lastDisplayedChip.value - 1;
+            }
+            return instance.getMoreChipText(moreChip);
+        });
+        const getMarginX = (element) => {
+            const cs = getComputedStyle(element);
+            return parseFloat(cs.marginLeft) + parseFloat(cs.marginRight);
+        };
+        const getPaddingX = (element) => {
+            const cs = getComputedStyle(element);
+            return parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+        };
+        const getChips = () => {
+            const rootValue = getRootElement(root);
+            const chips = rootValue.value?.getElementsByClassName('v-chip');
+            const chipContainers = Array.from(chips).map((chip) => chip.parentElement);
+            return chipContainers;
+        };
+        const onSelectAll = (event) => {
+            const rootValue = getRootElement(root);
+            const input = rootValue.value?.querySelector('input');
+            input?.select();
+            nextTick(() => {
+                instance.onSelectAll(!allSelected.value, event, instance.value);
+            });
+        };
+        const checkOverflow = () => {
+            const chips = getChips();
+            if (chips.length > 0) {
+                const firstChip = chips[0];
+                if (firstChip.clientWidth < firstChip.scrollWidth) {
+                    lastDisplayedChip.value = -1;
+                    return true;
+                }
+            }
+            return false;
+        };
+        const calcDisplay = (force = false) => {
+            const chips = getChips();
+            const element = getRootElement(root);
+            if (chips.length === 0)
+                return;
+            if (element.value.offsetHeight > initialHeight || force) {
+                instance.datasource.loading = true;
+                lastDisplayedChip.value = getLastChipIndex(chips);
+                instance.datasource.loading = false;
+                return;
+            }
+            lastDisplayedChip.value = instance.value?.length || 0;
+        };
+        const getLastChipIndex = (chips) => {
+            let lastIndex = -1;
+            let filledWidth = 0;
+            const firstChip = chips[0];
+            let baseTop = firstChip.offsetTop;
+            const marginX = getMarginX(firstChip);
+            const rootElement = getRootElement(root);
+            const inputArea = rootElement.value?.querySelector('.v-field__input');
+            if (!inputArea)
+                return 0;
+            let inputWidth = inputArea.offsetWidth;
+            inputWidth -= getPaddingX(inputArea);
+            let rowCount = 1;
+            hasHiddenRows.value = chips.some((chip, index) => {
+                if (chip.offsetTop === baseTop) {
+                    const chipWidth = chip.offsetWidth + marginX;
+                    filledWidth += chipWidth;
+                    if (filledWidth <= inputWidth - 66) {
+                        lastIndex = index;
+                    }
+                    return false;
+                }
+                rowCount += 1;
+                if (rowCount <= rows) {
+                    baseTop = chip.offsetTop;
+                    filledWidth = chip.offsetWidth + marginX;
+                    lastIndex = index;
+                    return false;
+                }
+                return true;
+            });
+            if (!hasHiddenRows.value) {
+                const length = instance.value?.length || 0;
+                lastIndex = length - 1;
+            }
+            return lastIndex;
+        };
+        const refreshDisplay = () => {
+            if (instance.limit)
+                return;
+            expandedMode.value = true;
+            nextTick(() => {
+                expandedMode.value = false;
+                if (!checkOverflow()) {
+                    calcDisplay(true);
+                }
+            });
+        };
+        const isMoreVisible = (index) => {
+            if (instance.limit) {
+                return index === limitValue.value;
+            }
+            return !expandedMode.value && hasHiddenRows.value && index === lastDisplayedChip.value + 1;
+        };
+        const onLoadMoreIntersect = (isIntersecting, entries) => {
+            const { intersectionRatio } = entries[0];
+            if (intersectionRatio === 1 || !isIntersecting || instance.datasource.loading)
+                return;
+            instance.loadMore();
+        };
+        const isChipVisible = (index) => {
+            if (instance.limit) {
+                return index < limitValue.value;
+            }
+            return expandedMode.value || !hasHiddenRows.value || index <= lastDisplayedChip.value;
+        };
+        const handleResize = () => {
+            refreshDisplay();
+        };
+        const selectClick = (event) => {
+            const input = getRootElement(root);
+            if (!instance.limit) {
+                rows = maxRowsNumber();
+                nextTick(() => {
+                    calcDisplay(true);
+                });
+            }
+            instance.click(event, input.value);
+        };
+        const focus = (event) => {
+            rows = maxRowsNumber();
+            refreshDisplay();
+            selectScope.focus(event);
+        };
+        const selectBlur = (event) => {
+            if (!instance.limit && rows !== 1) {
+                rows = 1;
+                calcDisplay();
+                nextTick(() => checkOverflow());
+            }
+            else {
+                refreshDisplay();
+            }
+            selectScope.blur(event);
+        };
+        const selectFormatterFn = FormatterParserProvider.getFormatter('ZdSelect');
+        const formattedDataDiscreteText = (item) => {
+            let formatterProps;
+            if (instance.dataTextDiscrete) {
+                formatterProps = {
+                    dataText: instance.dataTextDiscrete,
+                    dataTextSeparator: instance.dataTextSeparator,
+                };
+            }
+            else {
+                formatterProps = {
+                    dataText: instance.dataText,
+                    dataTextSeparator: instance.dataTextSeparator,
+                };
+            }
+            return selectFormatterFn(item, formatterProps);
+        };
+        const removeItem = (item) => {
+            const rootValue = root.value;
+            rootValue.select(item.value, false);
+        };
+        const selectChange = (value, event) => {
+            const input = getRootElement(root);
+            instance.selectChange(value.map((item) => item.originalRow), event, input.value);
+        };
+        let observer;
+        onMounted(() => {
+            const componentRef = getRootElement(root);
+            element.value = componentRef.value;
+            observer = new ResizeObserver(handleResize);
+            observer.observe(element.value);
+            if (!element)
+                return;
+            initialHeight = element.value.offsetHeight;
+        });
+        onUnmounted(() => {
+            observer?.disconnect();
+        });
+        return {
+            ...selectScope,
+            instance,
+            root,
+            moreItemsText,
+            formattedData,
+            allSelected,
+            formattedValue,
+            limitValue,
+            onSelectAll,
+            calcDisplay,
+            getLastChipIndex,
+            refreshDisplay,
+            isMoreVisible,
+            isChipVisible,
+            removeItem,
+            selectClick,
+            selectBlur,
+            selectChange,
+            formattedDataDiscreteText,
+            ajustSize,
+            onLoadMoreIntersect,
+            selectItem,
+            toggleItem,
+            focus,
+        };
+    },
+});
+export default selectMultipleComponent;

package/dist/components/zd-svg-map/ZdSvgMap.js

@@ -0,0 +1,211 @@
+import { SvgMap } from '@zeedhi/common';
+import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { useTheme } from 'vuetify';
+import { buildProps } from '../../utils';
+import { useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+import { useCreateInputInstance } from '../zd-input/ZdInput';
+export const ZdSvgMapProps = buildProps({
+    ...ZdComponentRenderProps,
+    areaColor: {
+        type: String,
+        default: '#bdbdbd',
+    },
+    areaHoverColor: {
+        type: String,
+        default: '#999',
+    },
+    areaSelectColor: {
+        type: String,
+        default: 'primary',
+    },
+    height: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    width: {
+        type: [Number, String],
+        default: 'auto',
+    },
+    multiple: {
+        type: [Boolean, String],
+        default: false,
+    },
+    selectedArea: {
+        type: [String, Array],
+        default: '',
+    },
+    src: {
+        type: String,
+        default: '',
+    },
+    tooltipData: {
+        type: [Object, String],
+        default: null,
+    },
+    keyColumn: {
+        type: String,
+        default: '',
+    },
+});
+export default defineComponent({
+    props: ZdSvgMapProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const container = ref(null);
+        const { instance, root } = useCreateInputInstance(props, ctx, SvgMap);
+        const componentScope = useGetMethods(instance, root);
+        const theme = useTheme();
+        const showTooltip = ref(false);
+        const pathId = ref(null);
+        const cursor = reactive({
+            left: 0,
+            top: 0,
+            reverseX: false,
+            reverseY: false,
+            right: 0,
+            bottom: 0,
+        });
+        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 cssVars = computed(() => ({
+            '--area-color': ThemeColor(instance.areaColor),
+            '--area-hover-color': ThemeColor(instance.areaHoverColor),
+            '--area-select-color': ThemeColor(instance.areaSelectColor),
+        }));
+        const tooltipContent = computed(() => {
+            const { keyColumn, tooltipData } = instance;
+            if (!tooltipData)
+                return null;
+            return tooltipData.data.find((row) => row[keyColumn] === pathId.value);
+        });
+        const tooltipStyle = computed(() => {
+            const directionX = cursor.reverseX ? 'right' : 'left';
+            const directionY = cursor.reverseY ? 'bottom' : 'top';
+            const valX = cursor.reverseX ? cursor.right : cursor.left;
+            const valY = cursor.reverseY ? cursor.bottom : cursor.top;
+            return {
+                position: 'absolute',
+                [directionX]: `${valX}px`,
+                [directionY]: `${valY}px`,
+                pointerEvents: 'none',
+                maxWidth: '300px',
+                minWidth: '120px',
+                background: 'white',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.18)',
+                borderRadius: '4px',
+                padding: '8px 12px',
+                whiteSpace: 'pre-line',
+                zIndex: 9999,
+                userSelect: 'none',
+            };
+        });
+        function pathMouseMove(event, path) {
+            pathId.value = path.getAttribute(instance.keyColumn);
+            const hasId = !!pathId.value;
+            showTooltip.value = hasId;
+            if (!container.value || !hasId)
+                return;
+            const svgRect = container.value.getBoundingClientRect();
+            const offsetX = event.clientX - svgRect.left;
+            const offsetY = event.clientY - svgRect.top;
+            cursor.reverseX = offsetX > svgRect.width / 2;
+            cursor.reverseY = offsetY > svgRect.height / 2;
+            let left = offsetX + 15;
+            let top = offsetY + 20;
+            const tooltipEl = container.value.parentElement?.querySelector('.zd-svg-map__tooltip');
+            if (tooltipEl) {
+                if (left + tooltipEl.offsetWidth > svgRect.width) {
+                    left = offsetX - tooltipEl.offsetWidth - 15;
+                }
+                if (top + tooltipEl.offsetHeight > svgRect.height) {
+                    top = offsetY - tooltipEl.offsetHeight - 20;
+                }
+            }
+            cursor.left = left;
+            cursor.top = top;
+            cursor.right = svgRect.width - left;
+            cursor.bottom = svgRect.height - top;
+        }
+        function svgMouseOut() {
+            showTooltip.value = false;
+            pathId.value = null;
+        }
+        const pathMouseMoveHandlers = new WeakMap();
+        function contentChange() {
+            const paths = container.value?.querySelectorAll('path');
+            paths?.forEach((path) => {
+                const handler = (event) => pathMouseMove(event, path);
+                pathMouseMoveHandlers.set(path, handler);
+                path.addEventListener('mousemove', handler);
+            });
+            container.value?.querySelector('svg')?.addEventListener('mouseout', svgMouseOut);
+        }
+        function removeListeners() {
+            const paths = container.value?.querySelectorAll('path');
+            paths?.forEach((path) => {
+                const handler = pathMouseMoveHandlers.get(path);
+                if (handler) {
+                    path.removeEventListener('mousemove', handler);
+                    pathMouseMoveHandlers.delete(path);
+                }
+            });
+            container.value?.querySelector('svg')?.removeEventListener('mouseout', svgMouseOut);
+        }
+        function mapClick(event) {
+            if (event.target.nodeName === 'path') {
+                if (event.target.id) {
+                    instance.mapClick(event.target);
+                }
+                else {
+                    instance.mapClick(event.target.parentNode);
+                }
+            }
+        }
+        onMounted(() => {
+            if (container.value) {
+                instance.svgContainer = container.value;
+                instance.setViewBeforeUpdate(removeListeners);
+                instance.setViewUpdate(contentChange);
+            }
+        });
+        onBeforeUnmount(() => {
+            removeListeners();
+        });
+        return {
+            container,
+            showTooltip,
+            tooltipContent,
+            tooltipStyle,
+            root,
+            mapClick,
+            instance,
+            pathId,
+            cssVars,
+            ...componentScope,
+        };
+    },
+});

package/dist/components/zd-switch/ZdSwitch.js

@@ -0,0 +1,39 @@
+import { Switch } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdToggleableProps } from '../zd-toggleable/ZdToggleable';
+/**
+ * Switch component
+ */
+export const ZdSwitchProps = buildProps({
+    ...ZdToggleableProps,
+    inset: {
+        type: [Boolean, String],
+        default: false,
+    },
+});
+const switchComponent = defineComponent({
+    props: ZdSwitchProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Switch);
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        const switchChange = (value) => {
+            const rootElement = getRootElement(root);
+            ctx.emit('update:value', value);
+            instance.change(undefined, rootElement.value);
+        };
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+            switchChange,
+        };
+    },
+});
+export default switchComponent;

package/dist/components/zd-table/ZdTable.js

@@ -0,0 +1,42 @@
+import { Table } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { HeightProps } from '../../propsMixins';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdIterableProps } from '../zd-iterable/ZdIterable';
+export const ZdTableProps = buildProps({
+    ...ZdIterableProps,
+    ...HeightProps,
+    caption: {
+        type: [String, Object],
+        default() {
+            return {};
+        },
+    },
+    fillWidth: {
+        type: [String, Boolean],
+        default: false,
+    },
+    showTableHead: {
+        type: [String, Boolean],
+        default: true,
+    },
+});
+const tableComponent = defineComponent({
+    props: ZdTableProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Table);
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+        };
+    },
+});
+export default tableComponent;