@zeedhi/vuetify 3.0.5 → 3.0.7

package/dist/components/tek-grid/row/TekGridFooterRow.js

@@ -0,0 +1,57 @@
+import { 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,
+            required: true,
+        },
+        columns: {
+            type: Array,
+            required: true,
+        },
+        row: {
+            type: Object,
+            required: true,
+        },
+        fixedLeft: {
+            type: Object,
+            required: true,
+        },
+        fixedRight: {
+            type: Object,
+            required: true,
+        },
+    },
+    emits: ['focusin'],
+    setup(props, { emit }) {
+        const focusin = (event) => {
+            emit('focusin', { event, row: props.row });
+        };
+        const getLevel = (row) => {
+            if (!row.groupHeaders)
+                return 0;
+            const { length } = row.groupHeaders;
+            return length + 1;
+        };
+        return {
+            focusin,
+            getLevel,
+        };
+    },
+});

package/dist/components/tek-grid/row/TekGridGroupRow.js

@@ -0,0 +1,58 @@
+import { 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,
+            required: true,
+        },
+        row: {
+            type: Object,
+            required: true,
+        },
+        indeterminate: {
+            type: Boolean,
+            required: true,
+        },
+    },
+    emits: ['click', 'checkboxClick', 'focusin', 'expandClick'],
+    setup(props, { emit }) {
+        const click = (event) => {
+            emit('click', event);
+        };
+        const checkboxClick = (event) => {
+            emit('checkboxClick', event);
+        };
+        const focusin = (event) => {
+            emit('focusin', { event, row: props.row });
+        };
+        const expandClick = (event) => {
+            emit('expandClick', { event, row: props.row });
+        };
+        return {
+            click,
+            focusin,
+            checkboxClick,
+            expandClick,
+        };
+    },
+});

package/dist/components/tooltip-overflow/ZdTooltipOverflow.js

@@ -0,0 +1,56 @@
+import { computed, defineComponent, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
+export default defineComponent({
+    props: {
+        overflow: {
+            type: [String, Number],
+        },
+        value: {
+            type: [String, Number, Boolean],
+        },
+        classes: {
+            type: Array,
+            default: () => [],
+        },
+        styles: {
+            type: Array,
+            default: () => [],
+        },
+        tag: {
+            type: String,
+            default: 'span',
+        },
+    },
+    emits: ['click'],
+    setup(props, { emit }) {
+        let observer;
+        const labelRef = useTemplateRef('value');
+        const clientWidth = ref(0);
+        onMounted(() => {
+            observer = new ResizeObserver(() => {
+                if (labelRef.value) {
+                    clientWidth.value = labelRef.value.clientWidth;
+                }
+            });
+            if (labelRef.value)
+                observer.observe(labelRef.value);
+        });
+        onUnmounted(() => {
+            if (observer)
+                observer.disconnect();
+        });
+        const tooltipDisabled = computed(() => {
+            const labelEl = labelRef.value;
+            if (!labelEl)
+                return true;
+            const overflow = clientWidth.value < labelEl.scrollWidth;
+            return !(overflow || Number.isInteger(props.overflow));
+        });
+        const click = (event) => {
+            emit('click', event);
+        };
+        const isNumber = (overflow) => {
+            return typeof overflow === 'number' || !Number.isNaN(Number(overflow));
+        };
+        return { tooltipDisabled, click, isNumber };
+    },
+});

package/dist/components/zd-activator-wrapper/ZdActivatorWrapper.js

@@ -0,0 +1,33 @@
+import { defineComponent } from 'vue';
+/**
+ * Component used as a wrapper for zeedhi components to make the events
+ * compatible with VTooltip and VMenu
+ */
+const component = defineComponent({
+    props: {
+        childProps: {
+            type: Object,
+            required: true,
+        },
+        parent: {
+            type: Object,
+        },
+    },
+    inheritAttrs: false,
+    setup(_props, ctx) {
+        /**
+         * Receives a zd-event and reemits in a format compatible with VTooltip and VMenu
+         */
+        const reemitEvent = (param, name) => {
+            if (param instanceof Event) {
+                ctx.emit(name, param);
+                return;
+            }
+            ctx.emit(name, param.event);
+        };
+        return {
+            reemitEvent,
+        };
+    },
+});
+export default component;

package/dist/components/zd-alert/ZdAlert.js

@@ -0,0 +1,112 @@
+import { Alert, AlertService } from '@zeedhi/common';
+import { defineComponent, nextTick, reactive, watch } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+export const ZdAlertProps = buildProps({
+    ...ZdComponentRenderProps,
+    multiple: {
+        type: String,
+        default: 'replace',
+    },
+});
+const alertComponent = defineComponent({
+    props: ZdAlertProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Alert);
+        const manager = AlertService.instantiateManager(props.multiple);
+        const managerProxy = reactive(manager);
+        AlertService.registerManager(managerProxy);
+        const alerts = AlertService.alertsManager.visibleInstances;
+        // TODO: use Anchor type exported by vuetify on vuetify@3.6.0 release
+        // https://github.com/vuetifyjs/vuetify/issues/16680
+        const getAlertLocation = (alert) => {
+            let horizontalLocation = 'center';
+            let verticalLocation = 'center';
+            if (alert.right) {
+                horizontalLocation = 'right';
+            }
+            else if (alert.left) {
+                horizontalLocation = 'left';
+            }
+            if (alert.top) {
+                verticalLocation = 'top';
+            }
+            else if (alert.bottom) {
+                verticalLocation = 'bottom';
+            }
+            return `${verticalLocation} ${horizontalLocation}`;
+        };
+        const arrangeStackItems = () => {
+            const components = Array.from(document.querySelectorAll('.zd-alert'));
+            if (!Array.isArray(components))
+                return;
+            const totalShift = {
+                'top-left': 0,
+                'top-right': 0,
+                'top-center': 0,
+                'bottom-left': 0,
+                'bottom-right': 0,
+                'bottom-center': 0,
+            };
+            const calculateComponentOffset = (component) => {
+                if (!component)
+                    return;
+                const element = component;
+                const content = element.querySelector('.v-snackbar__wrapper');
+                if (!content)
+                    return;
+                const isTop = element.classList.contains('v-snackbar--top');
+                const isBottom = element.classList.contains('v-snackbar--bottom');
+                const isLeft = element.classList.contains('v-snackbar--left');
+                const isRight = element.classList.contains('v-snackbar--right');
+                const isCenter = element.classList.contains('v-snackbar--center');
+                let vertical = 'bottom';
+                let horizontal = 'center';
+                if (isTop) {
+                    vertical = 'top';
+                }
+                else if (isBottom) {
+                    vertical = 'bottom';
+                }
+                if (isLeft) {
+                    horizontal = 'left';
+                }
+                else if (isRight) {
+                    horizontal = 'right';
+                }
+                else if (isCenter) {
+                    horizontal = 'center';
+                }
+                const totalShiftKey = `${vertical}-${horizontal}`;
+                content.style[vertical] = `${totalShift[totalShiftKey]}px`;
+                const height = content.offsetHeight;
+                const margin = 8;
+                totalShift[totalShiftKey] += height + margin;
+            };
+            components.forEach((element) => {
+                nextTick(() => calculateComponentOffset(element));
+            });
+        };
+        watch(alerts, () => {
+            nextTick(arrangeStackItems);
+        });
+        const remove = (index) => {
+            AlertService.remove(index);
+        };
+        const hide = (index) => {
+            AlertService.hide(index);
+        };
+        return {
+            instance,
+            root,
+            alerts,
+            remove,
+            hide,
+            getAlertLocation,
+            arrangeStackItems,
+        };
+    },
+});
+export default alertComponent;

package/dist/components/zd-badge/ZdBadge.js

@@ -0,0 +1,28 @@
+import { Badge } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+export const ZdBadgeProps = buildProps({
+    ...ZdComponentRenderProps,
+    badge: {
+        type: [Number, String],
+        default: 0,
+    },
+    showBadgeCounter: {
+        type: [Boolean, String],
+        default: true,
+    },
+});
+const badgeComponent = defineComponent({
+    props: ZdBadgeProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Badge);
+        return {
+            instance,
+            root,
+        };
+    },
+});
+export default badgeComponent;

package/dist/components/zd-breadcrumbs/ZdBreadcrumbs.js

@@ -0,0 +1,55 @@
+import { Breadcrumbs } from '@zeedhi/common';
+import { useTranslation } from 'i18next-vue';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+/**
+ * Breadcrumbs component
+ */
+export const ZdBreadcrumbsProps = buildProps({
+    ...ZdComponentRenderProps,
+    divider: {
+        type: String,
+        default: '/',
+    },
+    iconName: {
+        type: String,
+        default: '',
+    },
+    items: {
+        type: [Array, String],
+        default: () => [],
+    },
+    large: {
+        type: [Boolean, String],
+        default: false,
+    },
+    small: {
+        type: [Boolean, String],
+        default: false,
+    },
+});
+const breadcrumbsComponent = defineComponent({
+    props: ZdBreadcrumbsProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Breadcrumbs);
+        const { t } = useTranslation();
+        const getTranslatedItems = () => {
+            return instance.items.map((item) => {
+                item.title = t(item.text);
+                return item;
+            });
+        };
+        const { click } = useGetMethods(instance, root);
+        return {
+            instance,
+            root,
+            getTranslatedItems,
+            click,
+            t,
+        };
+    },
+});
+export default breadcrumbsComponent;

package/dist/components/zd-button/ZdButton.js

@@ -0,0 +1,230 @@
+import { Button } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { getIconPlugin } from '../../utils/plugins';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+export const ZdButtonProps = buildProps({
+    ...ZdComponentRenderProps,
+    absolute: {
+        type: [Boolean, String],
+        default: false,
+    },
+    block: {
+        type: [Boolean, String],
+        default: false,
+    },
+    bottom: {
+        type: [Boolean, String],
+        default: false,
+    },
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    disabled: {
+        type: [Boolean, String],
+        default: false,
+    },
+    fab: {
+        type: [Boolean, String],
+        default: false,
+    },
+    fixed: {
+        type: [Boolean, String],
+        default: false,
+    },
+    flat: {
+        type: [Boolean, String],
+        default: false,
+    },
+    href: {
+        type: String,
+        default: '',
+    },
+    icon: {
+        type: [Boolean, String],
+        default: false,
+    },
+    iconName: {
+        type: String,
+        default: '',
+    },
+    label: {
+        type: String,
+        default: '',
+    },
+    large: {
+        type: [Boolean, String],
+        default: false,
+    },
+    left: {
+        type: [Boolean, String],
+        default: false,
+    },
+    outline: {
+        type: [Boolean, String],
+        default: false,
+    },
+    reverse: {
+        type: [Boolean, String],
+        default: false,
+    },
+    right: {
+        type: [Boolean, String],
+        default: false,
+    },
+    round: {
+        type: [Boolean, String, Number],
+        default: false,
+    },
+    small: {
+        type: [Boolean, String],
+        default: false,
+    },
+    target: {
+        type: String,
+        default: '_self',
+    },
+    tile: {
+        type: [Boolean, String],
+        default: false,
+    },
+    to: {
+        type: String,
+        default: '',
+    },
+    top: {
+        type: [Boolean, String],
+        default: false,
+    },
+    type: {
+        type: String,
+        default: 'button',
+    },
+    width: {
+        type: [Number, String],
+        default: '',
+    },
+    // Zeedhi 3.0
+    active: {
+        type: [Boolean, String],
+        default: undefined,
+    },
+    appendIcon: {
+        type: String,
+    },
+    border: {
+        type: [String, Number, Boolean],
+        default: false,
+    },
+    density: {
+        type: String,
+        default: 'default',
+    },
+    elevation: {
+        type: [String, Number],
+    },
+    loading: {
+        type: [String, Boolean],
+        default: false,
+    },
+    position: {
+        type: String,
+    },
+    prependIcon: {
+        type: String,
+    },
+    replace: {
+        type: [Boolean, String],
+        default: false,
+    },
+    ripple: {
+        type: [String, Boolean],
+        default: true,
+    },
+    selectedClass: {
+        type: String,
+    },
+    size: {
+        type: String,
+    },
+    stacked: {
+        type: [String, Boolean],
+        default: false,
+    },
+    tag: {
+        type: String,
+    },
+    variant: {
+        type: String,
+    },
+});
+export function useButtonInstance({ instance, root, }) {
+    const { click, focus, blur, mouseenter, mouseleave, mouseout, mouseover } = useGetMethods(instance, root);
+    const getIcon = (type) => {
+        if (type === 'append') {
+            return (getIconPlugin(instance.appendIcon) ||
+                (!instance.icon && instance.reverse && getIconPlugin(instance.iconName)) ||
+                undefined);
+        }
+        return (getIconPlugin(instance.prependIcon) ||
+            (!instance.icon && !instance.reverse && getIconPlugin(instance.iconName)) ||
+            undefined);
+    };
+    const getPosition = () => instance.position || (instance.absolute && 'absolute') || (instance.fixed && 'fixed') || undefined;
+    const getCssPositioning = () => {
+        const result = {};
+        if (instance.absolute || instance.fixed) {
+            if (instance.top)
+                result.top = '16px';
+            if (instance.bottom)
+                result.bottom = '16px';
+            if (instance.left)
+                result.left = '16px';
+            if (instance.right)
+                result.right = '16px';
+        }
+        return result;
+    };
+    const getSize = () => instance.size || (instance.small && 'small') || (instance.large && 'large') || 'default';
+    const getVariant = () => instance.variant || (instance.outline && 'outlined') || ((instance.flat || instance.icon) && 'text') || 'elevated';
+    const getRounded = () => {
+        if (instance.tile)
+            return '0';
+        if (instance.round)
+            return 'pill';
+        return undefined;
+    };
+    return {
+        instance,
+        root,
+        click,
+        focus,
+        blur,
+        mouseenter,
+        mouseleave,
+        mouseout,
+        mouseover,
+        getIcon,
+        getPosition,
+        getSize,
+        getVariant,
+        getCssPositioning,
+        getRounded,
+    };
+}
+const buttonComponent = defineComponent({
+    props: ZdButtonProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Button);
+        const buttonScope = useButtonInstance({ instance, root });
+        return {
+            ...buttonScope,
+            instance,
+            root,
+        };
+    },
+});
+export default buttonComponent;