@zeedhi/vuetify 3.0.6 → 3.0.7

package/dist/components/zd-tabs/ZdTab.js

@@ -0,0 +1,92 @@
+import { Tab } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { useDensity } from '../../composables';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+export const ZdTabProps = buildProps({
+    ...ZdComponentRenderProps,
+    disabled: {
+        type: [Boolean, String],
+        default: false,
+    },
+    index: {
+        type: [Number, String],
+    },
+    tabTitle: {
+        type: [String],
+    },
+    tabName: {
+        type: [String],
+    },
+    color: {
+        type: [String],
+        default: 'primary',
+    },
+    dense: {
+        type: [Boolean],
+        default: true,
+    },
+    direction: {
+        type: [String],
+        default: 'horizontal',
+    },
+    fixed: {
+        type: [Boolean, String],
+        default: false,
+    },
+    iconName: {
+        type: [Boolean, String, Number],
+        default: false,
+    },
+    rounded: {
+        type: [Boolean, String],
+        default: false,
+    },
+    selectedClass: {
+        type: [String],
+        default: 'zd-tab--selected',
+    },
+    value: {
+        type: [Object, String],
+    },
+    variant: {
+        type: [String],
+        default: 'text',
+    },
+    width: {
+        type: [Number, String],
+    },
+});
+/**
+ * Tabs component
+ */
+const tabComponent = defineComponent({
+    props: ZdTabProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Tab);
+        const { density } = useDensity({ instance });
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        const clickTab = (event) => {
+            ctx.emit('click', event);
+        };
+        const keydown = (event) => {
+            ctx.emit('keydown', event);
+        };
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+            // methods
+            clickTab,
+            keydown,
+            density,
+        };
+    },
+});
+export default tabComponent;

package/dist/components/zd-tabs/ZdTabItem.js

@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+export const ZdTabItemProps = buildProps({
+    ...ZdComponentRenderProps,
+    index: {
+        type: [Number],
+    },
+    lazyLoad: {
+        type: [Boolean],
+    },
+});
+const tabItemComponent = defineComponent({
+    props: ZdTabItemProps,
+    inheritAttrs: false,
+});
+export default tabItemComponent;

package/dist/components/zd-tabs/ZdTabs.js

@@ -0,0 +1,84 @@
+import { Tabs } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { useDensity } from '../../composables';
+import { HeightProps } from '../../propsMixins/heightProps';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+export const ZdTabsProps = buildProps({
+    ...ZdComponentRenderProps,
+    ...HeightProps,
+    activeTab: {
+        type: [Number, String],
+        default: 0,
+    },
+    tabs: {
+        type: [Array],
+        default: () => [],
+    },
+    color: {
+        type: [String],
+        default: 'primary',
+    },
+    backgroudColor: {
+        type: [String],
+        default: undefined,
+    },
+    density: {
+        type: [String],
+        default: 'compact',
+    },
+    direction: {
+        type: [String],
+        default: 'horizontal',
+    },
+    disabled: {
+        type: [Boolean, String],
+        default: false,
+    },
+    grow: {
+        type: [Boolean, String],
+        default: false,
+    },
+    max: {
+        type: [Number, String],
+    },
+});
+/**
+ * Tabs component
+ */
+const tabsComponent = defineComponent({
+    props: ZdTabsProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Tabs);
+        const { density } = useDensity({ instance });
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        const change = (event) => {
+            const rootElement = getRootElement(root);
+            instance.change(event, rootElement.value);
+        };
+        const keydown = (event, index) => {
+            const rootElement = getRootElement(root);
+            instance.beforeChange(event, index, rootElement.value);
+        };
+        const clickTab = (event, index) => {
+            const rootElement = getRootElement(root);
+            instance.beforeChange(event, index, rootElement.value);
+        };
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+            clickTab,
+            keydown,
+            change,
+            density,
+        };
+    },
+});
+export default tabsComponent;

package/dist/components/zd-tag/ZdTag.js

@@ -0,0 +1,34 @@
+import { Tag } 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 ZdTagProps = buildProps({
+    ...ZdComponentRenderProps,
+    name: {
+        type: String,
+        required: false,
+    },
+    tag: {
+        type: String,
+        required: true,
+    },
+});
+const tagComponent = defineComponent({
+    props: ZdTagProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Tag);
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+        };
+    },
+});
+export default tagComponent;

package/dist/components/zd-text/ZdText.js

@@ -0,0 +1,35 @@
+import { Text } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdComponentProps, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+export const ZdTextProps = buildProps({
+    ...ZdComponentProps,
+    compile: {
+        type: [Boolean, String],
+        default: false,
+    },
+    text: {
+        type: [String, (Array)],
+        default: '',
+    },
+    tag: {
+        type: String,
+        default: 'p',
+    },
+});
+const textComponent = defineComponent({
+    props: ZdTextProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Text);
+        const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
+        return {
+            instance,
+            root,
+            click,
+            mouseenter,
+            mouseleave,
+        };
+    },
+});
+export default textComponent;

package/dist/components/zd-text-input/ZdTextInput.js

@@ -0,0 +1,174 @@
+import { TextInput } from '@zeedhi/common';
+import { computed, defineComponent, nextTick, onMounted, } from 'vue';
+import { useTheme } from 'vuetify';
+import { useMaska } from '../../composables/maska';
+import { HeightProps } from '../../propsMixins/heightProps';
+import { WidthProps } from '../../propsMixins/widthProps';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdInputProps, useInput } from '../zd-input/ZdInput';
+export const ZdTextInputProps = buildProps({
+    ...ZdInputProps,
+    ...HeightProps,
+    ...WidthProps,
+    appendIcon: {
+        type: String,
+        default: '',
+    },
+    appendOuterIcon: {
+        type: String,
+        default: '',
+    },
+    prefix: {
+        type: String,
+        default: '',
+    },
+    prependIcon: {
+        type: String,
+        default: '',
+    },
+    prependOuterIcon: {
+        type: String,
+        default: '',
+    },
+    suffix: {
+        type: String,
+        default: '',
+    },
+    valueWithPrefix: {
+        type: [Boolean, String],
+        default: false,
+    },
+    valueWithSuffix: {
+        type: [Boolean, String],
+        default: false,
+    },
+    type: {
+        type: String,
+        default: '',
+    },
+    // Zeedhi 3.0
+    disableMaska: {
+        type: Boolean,
+        default: false,
+    },
+    inputMode: {
+        type: String,
+        default: '',
+    },
+});
+const textInputComponent = defineComponent({
+    props: ZdTextInputProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TextInput);
+        const textInputScope = useTextInput(instance, ctx, root);
+        const { maskOptions } = useMaska(instance, { disable: props.disableMaska });
+        return {
+            ...textInputScope,
+            maskOptions,
+        };
+    },
+});
+export default textInputComponent;
+export function useTextInput(instance, ctx, root) {
+    const inputScope = useInput(instance, ctx, root);
+    const theme = useTheme();
+    const appendIconClick = (event) => {
+        inputScope.root.value.$el.focus();
+        const newEvent = cloneClickEvent(event);
+        const rootElement = getRootElement(root);
+        instance.appendIconClick(newEvent, rootElement.value);
+    };
+    const prependIconClick = (event) => {
+        inputScope.root.value.$el.focus();
+        const newEvent = cloneClickEvent(event);
+        const rootElement = getRootElement(root);
+        instance.prependIconClick(newEvent, rootElement.value);
+    };
+    const prependOuterIconClick = (event) => {
+        inputScope.root.value.$el.focus();
+        const newEvent = cloneClickEvent(event);
+        const rootElement = getRootElement(root);
+        instance.prependOuterIconClick(newEvent, rootElement.value);
+    };
+    const appendOuterIconClick = (event) => {
+        inputScope.root.value.$el.focus();
+        const newEvent = cloneClickEvent(event);
+        const rootElement = getRootElement(root);
+        instance.appendOuterIconClick(newEvent, rootElement.value);
+    };
+    const cloneClickEvent = (event) => {
+        if (!event)
+            return undefined;
+        const clone = {};
+        /* eslint-disable guard-for-in, no-restricted-syntax */
+        for (const key in event) {
+            const desc = Object.getOwnPropertyDescriptor(event, key);
+            if (desc && (desc.get || desc.set))
+                Object.defineProperty(clone, key, desc);
+            else
+                clone[key] = event[key];
+        }
+        Object.setPrototypeOf(clone, event);
+        clone.defaultPrevented = false;
+        return clone;
+    };
+    onMounted(() => {
+        const rootElement = getRootElement(root);
+        if (rootElement.value?.querySelector) {
+            const clearableButton = rootElement.value.querySelector('div.v-input__icon.v-input__icon--clear button');
+            clearableButton?.setAttribute('tabIndex', '-1');
+        }
+    });
+    const blur = (event) => {
+        const rootElement = getRootElement(root);
+        instance.blur(event, rootElement.value);
+    };
+    const focus = (event) => {
+        const rootElement = getRootElement(root);
+        instance.focus(event, rootElement.value);
+    };
+    const setBlur = () => {
+        nextTick(() => {
+            const rootElement = getRootElement(root);
+            rootElement.value?.getElementsByTagName('input')[0].blur();
+        });
+    };
+    const getIconClickEvents = () => {
+        const events = {};
+        if (instance.events.appendIconClick) {
+            events['click:appendInner'] = appendIconClick;
+        }
+        if (instance.events.appendOuterIconClick) {
+            events['click:append'] = appendOuterIconClick;
+        }
+        if (instance.events.prependOuterIconClick) {
+            events['click:prepend'] = prependOuterIconClick;
+        }
+        if (instance.events.prependIconClick) {
+            events['click:prependInner'] = prependIconClick;
+        }
+        return events;
+    };
+    const cssVars = computed(() => {
+        const color = instance.color;
+        return {
+            '--input-color': theme.current.value.colors[color] || color,
+        };
+    });
+    return {
+        ...inputScope,
+        instance,
+        root,
+        cssVars,
+        blur,
+        focus,
+        appendIconClick,
+        prependIconClick,
+        appendOuterIconClick,
+        prependOuterIconClick,
+        setBlur,
+        getIconClickEvents,
+    };
+}

package/dist/components/zd-textarea/ZdTextarea.js

@@ -0,0 +1,76 @@
+import { Textarea } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdTextInputProps, useTextInput } from '../zd-text-input/ZdTextInput';
+export const ZdTextareaProps = buildProps({
+    ...ZdTextInputProps,
+    autoGrow: {
+        type: [Boolean, String],
+        default: false,
+    },
+    backgroundColor: {
+        type: String,
+        default: '',
+    },
+    clearIcon: {
+        type: String,
+        default: 'clear',
+    },
+    counter: {
+        type: [Boolean, String, Number],
+        default: undefined,
+    },
+    filled: {
+        type: [Boolean, String],
+        default: false,
+    },
+    loading: {
+        type: [Boolean, String],
+        default: false,
+    },
+    resize: {
+        type: [Boolean, String],
+        default: false,
+    },
+    rounded: {
+        type: [Boolean, String],
+        default: false,
+    },
+    rowHeight: {
+        type: [Number, String],
+        default: 24,
+    },
+    rows: {
+        type: [Number, String],
+        default: 5,
+    },
+    height: {
+        type: [String, Number],
+        default: 'auto',
+    },
+    fillHeight: {
+        type: [String, Number, Boolean],
+        default: false,
+    },
+});
+const textareaComponent = defineComponent({
+    props: ZdTextareaProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Textarea);
+        const { click, mouseenter, mouseleave, focus, blur } = useGetMethods(instance, root);
+        const textInputScope = useTextInput(instance, ctx, root);
+        return {
+            ...textInputScope,
+            instance,
+            root,
+            click,
+            mouseenter,
+            mouseleave,
+            focus,
+            blur,
+        };
+    },
+});
+export default textareaComponent;

package/dist/components/zd-time/ZdTime.js

@@ -0,0 +1,159 @@
+import { Time } from '@zeedhi/common';
+import { dayjs } from '@zeedhi/core';
+import { computed, defineComponent, nextTick, ref } from 'vue';
+import { buildProps } from '../../utils/buildProps';
+import { useCreateInstance } from '..';
+import { ZdTextInputProps } from '../zd-text-input/ZdTextInput';
+import { useIsMobile } from '../../composables/useIsMobile';
+export const ZdTimeProps = buildProps({
+    ...ZdTextInputProps,
+    allowedHours: {
+        type: [Array, String],
+        default: undefined,
+    },
+    allowedMinutes: {
+        type: [Array, String],
+        default: undefined,
+    },
+    allowedSeconds: {
+        type: [Array, String],
+        default: undefined,
+    },
+    autofill: {
+        type: [Boolean, String],
+        default: false,
+    },
+    timeFormat: {
+        type: String,
+        default: 'ampm',
+    },
+    fullWidth: {
+        type: [String, Boolean],
+        default: false,
+    },
+    maxTime: {
+        type: String,
+        default: '',
+    },
+    minTime: {
+        type: String,
+        default: '',
+    },
+    scrollable: {
+        type: [String, Boolean],
+        default: false,
+    },
+    showTimePicker: {
+        type: [String, Boolean],
+        default: false,
+    },
+    useSeconds: {
+        type: [String, Boolean],
+        default: false,
+    },
+    mask: {
+        type: String,
+        default: undefined,
+    },
+    valueFormat: {
+        type: String,
+        required: false,
+    },
+    inputFormat: {
+        type: String,
+        required: false,
+    },
+    displayFormat: {
+        type: String,
+        required: false,
+    },
+    inputMode: {
+        type: String,
+        required: false,
+        default: 'none',
+    },
+});
+export default defineComponent({
+    name: 'ZdTime',
+    props: ZdTimeProps,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, Time);
+        const { isMobile } = useIsMobile();
+        const textInputInstance = ref(null);
+        const pickerRef = ref(null);
+        const convert = (value, toPicker = true) => {
+            if (!value)
+                return null;
+            const { valueFormat, useSeconds } = instance;
+            const pickerFormat = useSeconds ? 'HH:mm:ss' : 'HH:mm';
+            return toPicker ? dayjs(value, valueFormat).format(pickerFormat) : dayjs(value, pickerFormat).format(valueFormat);
+        };
+        const pickerMinTime = computed(() => convert(instance.minTime));
+        const pickerMaxTime = computed(() => convert(instance.maxTime));
+        const onChangeTimePicker = () => {
+            if (!instance.isoValue || instance.isoValue.length < 7)
+                return;
+            const textInput = textInputInstance.value?.$refs?.input || textInputInstance.value?.$children?.[0];
+            textInput?.validate(false);
+        };
+        const setFocus = (selectAll = false) => {
+            nextTick(() => {
+                textInputInstance.value?.focus();
+                if (selectAll) {
+                    nextTick(() => {
+                        textInputInstance.value?.$el?.querySelector('input')?.select();
+                    });
+                }
+            });
+        };
+        const getEvents = (props) => {
+            const events = {};
+            Object.entries(props).forEach(([key, fn]) => {
+                events[key] = (e) => {
+                    if (e && typeof e.stopPropagation === 'function')
+                        fn(e);
+                };
+            });
+            return events;
+        };
+        const onSelectTime = (time, event) => {
+            instance.selectTime(time, event, root.value);
+        };
+        const onPickerMousedown = (event) => {
+            event.preventDefault();
+        };
+        const pickerMounted = () => {
+            pickerRef.value?.$el?.addEventListener('mousedown', onPickerMousedown);
+        };
+        const pickerDestroyed = () => {
+            pickerRef.value?.$el?.removeEventListener('mousedown', onPickerMousedown);
+        };
+        const handleOkClick = () => {
+            instance.showTimePicker = false;
+        };
+        const handleClearClick = () => {
+            instance.isoValue = '';
+        };
+        const setBlur = () => {
+            textInputInstance.value?.blur();
+        };
+        return {
+            root,
+            textInputInstance,
+            pickerRef,
+            instance,
+            onChangeTimePicker,
+            setFocus,
+            pickerMinTime,
+            pickerMaxTime,
+            onSelectTime,
+            pickerMounted,
+            pickerDestroyed,
+            getEvents,
+            isMobile,
+            handleOkClick,
+            handleClearClick,
+            setBlur,
+        };
+    },
+});

package/dist/components/zd-toggleable/ZdToggleable.js

@@ -0,0 +1,13 @@
+import { buildProps } from '../../utils';
+import { ZdInputProps } from '../zd-input/ZdInput';
+export const ZdToggleableProps = buildProps({
+    ...ZdInputProps,
+    falseValue: {
+        type: [Boolean, String, Number, Object],
+        default: false,
+    },
+    trueValue: {
+        type: [Boolean, String, Number, Object],
+        default: true,
+    },
+});