@mlightcad/ui-components 0.0.8 → 0.0.10

package/lib/MlDropdown.vue.js

@@ -1,106 +0,0 @@
-import { computed } from 'vue';
-let __VLS_typeProps;
-const props = withDefaults(defineProps(), {
-    current: undefined
-});
-const emit = defineEmits({
-    click: null
-});
-// Filter out the current item
-const filteredItems = computed(() => {
-    return props.items.filter(item => item.name !== props.current);
-});
-const handleCommand = (command) => {
-    emit('click', command);
-};
-const __VLS_withDefaultsArg = (function (t) { return t; })({
-    current: undefined
-});
-const __VLS_fnComponent = (await import('vue')).defineComponent({
-    emits: {},
-});
-;
-let __VLS_functionalComponentProps;
-const __VLS_ctxBase = {};
-const __VLS_ctx = __VLS_ctxBase;
-let __VLS_name;
-const __VLS_localComponents = {
-    ...{},
-    ...{},
-    ...__VLS_ctxBase,
-};
-let __VLS_components;
-let __VLS_styleScopedClasses;
-__VLS_styleScopedClasses['ml-dropdown-icon'];
-// CSS variable injection 
-// CSS variable injection end 
-let __VLS_resolvedLocalAndGlobalComponents;
-const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.ElDropdown;
-/** @type { [typeof __VLS_components.ElDropdown, typeof __VLS_components.elDropdown, typeof __VLS_components.ElDropdown, typeof __VLS_components.elDropdown, ] } */
-// @ts-ignore
-const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ 'onCommand': {} }, }));
-const __VLS_2 = __VLS_1({ ...{ 'onCommand': {} }, }, ...__VLS_functionalComponentArgsRest(__VLS_1));
-let __VLS_6;
-const __VLS_7 = {
-    onCommand: (__VLS_ctx.handleCommand)
-};
-let __VLS_3;
-let __VLS_4;
-const __VLS_8 = __VLS_resolvedLocalAndGlobalComponents.ElIcon;
-/** @type { [typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ] } */
-// @ts-ignore
-const __VLS_9 = __VLS_asFunctionalComponent(__VLS_8, new __VLS_8({ size: ("30"), ...{ class: ("ml-dropdown-icon") }, }));
-const __VLS_10 = __VLS_9({ size: ("30"), ...{ class: ("ml-dropdown-icon") }, }, ...__VLS_functionalComponentArgsRest(__VLS_9));
-__VLS_elementAsFunction(__VLS_intrinsicElements.svg, __VLS_intrinsicElements.svg)({ preserveAspectRatio: ("xMidYMid meet"), viewBox: ("0 0 24 24"), width: ("1.2em"), height: ("1.2em"), "data-v-63d067da": (""), });
-__VLS_elementAsFunction(__VLS_intrinsicElements.path, __VLS_intrinsicElements.path)({ fill: ("currentColor"), d: ("m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"), });
-__VLS_nonNullable(__VLS_13.slots).default;
-const __VLS_13 = __VLS_pickFunctionalComponentCtx(__VLS_8, __VLS_10);
-__VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-{
-    const { dropdown: __VLS_thisSlot } = __VLS_nonNullable(__VLS_5.slots);
-    const __VLS_14 = __VLS_resolvedLocalAndGlobalComponents.ElDropdownMenu;
-    /** @type { [typeof __VLS_components.ElDropdownMenu, typeof __VLS_components.elDropdownMenu, typeof __VLS_components.ElDropdownMenu, typeof __VLS_components.elDropdownMenu, ] } */
-    // @ts-ignore
-    const __VLS_15 = __VLS_asFunctionalComponent(__VLS_14, new __VLS_14({}));
-    const __VLS_16 = __VLS_15({}, ...__VLS_functionalComponentArgsRest(__VLS_15));
-    for (const [item] of __VLS_getVForSourceType((__VLS_ctx.filteredItems))) {
-        const __VLS_20 = __VLS_resolvedLocalAndGlobalComponents.ElDropdownItem;
-        /** @type { [typeof __VLS_components.ElDropdownItem, typeof __VLS_components.elDropdownItem, typeof __VLS_components.ElDropdownItem, typeof __VLS_components.elDropdownItem, ] } */
-        // @ts-ignore
-        const __VLS_21 = __VLS_asFunctionalComponent(__VLS_20, new __VLS_20({ key: ((item.text)), command: ((item.name)), }));
-        const __VLS_22 = __VLS_21({ key: ((item.text)), command: ((item.name)), }, ...__VLS_functionalComponentArgsRest(__VLS_21));
-        (item.text);
-        __VLS_nonNullable(__VLS_25.slots).default;
-        const __VLS_25 = __VLS_pickFunctionalComponentCtx(__VLS_20, __VLS_22);
-    }
-    __VLS_nonNullable(__VLS_19.slots).default;
-    const __VLS_19 = __VLS_pickFunctionalComponentCtx(__VLS_14, __VLS_16);
-}
-const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
-__VLS_styleScopedClasses['ml-dropdown-icon'];
-var __VLS_slots;
-var __VLS_inheritedAttrs;
-const __VLS_refs = {};
-const __VLS_templateResult = { slots: __VLS_slots,
-    refs: $refs,
-    attrs: {},
-};
-const __VLS_internalComponent = (await import('vue')).defineComponent({
-    setup() {
-        return {
-            filteredItems: filteredItems,
-            handleCommand: handleCommand,
-        };
-    },
-    emits: {},
-    props: {},
-});
-export default (await import('vue')).defineComponent({
-    setup() {
-        return {};
-    },
-    emits: {},
-    props: {},
-});
-;
-//# sourceMappingURL=MlDropdown.vue.js.map

package/lib/MlLanguage.vue.d.ts

@@ -1,29 +0,0 @@
-import { MlDropdownMenuItem } from './MlDropdown.vue';
-/**
- * Properties of MlLanguage component
- */
-interface Props {
-    /**
-     * An array of avaiable languages
-     */
-    languages: MlDropdownMenuItem[];
-    /**
-     * Key of the current language
-     */
-    current: string;
-}
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
-    onClick?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/lib/MlLanguage.vue.js

@@ -1,67 +0,0 @@
-import MlDropdown from './MlDropdown.vue';
-const svg = '<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>';
-let __VLS_typeProps;
-const props = defineProps();
-const emit = defineEmits({
-    click: null
-});
-const handleClick = (command) => {
-    emit('click', command);
-};
-const __VLS_fnComponent = (await import('vue')).defineComponent({
-    emits: {},
-});
-;
-let __VLS_functionalComponentProps;
-const __VLS_ctxBase = {};
-const __VLS_ctx = __VLS_ctxBase;
-let __VLS_name;
-const __VLS_localComponents = {
-    ...{},
-    ...{},
-    ...__VLS_ctxBase,
-};
-let __VLS_components;
-let __VLS_styleScopedClasses;
-// CSS variable injection 
-// CSS variable injection end 
-let __VLS_resolvedLocalAndGlobalComponents;
-// @ts-ignore
-[MlDropdown,];
-// @ts-ignore
-const __VLS_0 = __VLS_asFunctionalComponent(MlDropdown, new MlDropdown({ ...{ 'onClick': {} }, icon: ((__VLS_ctx.svg)), items: ((props.languages)), current: ((props.current)), }));
-const __VLS_1 = __VLS_0({ ...{ 'onClick': {} }, icon: ((__VLS_ctx.svg)), items: ((props.languages)), current: ((props.current)), }, ...__VLS_functionalComponentArgsRest(__VLS_0));
-let __VLS_5;
-const __VLS_6 = {
-    onClick: (__VLS_ctx.handleClick)
-};
-let __VLS_2;
-let __VLS_3;
-const __VLS_4 = __VLS_pickFunctionalComponentCtx(MlDropdown, __VLS_1);
-var __VLS_slots;
-var __VLS_inheritedAttrs;
-const __VLS_refs = {};
-const __VLS_templateResult = { slots: __VLS_slots,
-    refs: $refs,
-    attrs: {},
-};
-const __VLS_internalComponent = (await import('vue')).defineComponent({
-    setup() {
-        return {
-            MlDropdown: MlDropdown,
-            svg: svg,
-            handleClick: handleClick,
-        };
-    },
-    emits: {},
-    props: {},
-});
-export default (await import('vue')).defineComponent({
-    setup() {
-        return {};
-    },
-    emits: {},
-    props: {},
-});
-;
-//# sourceMappingURL=MlLanguage.vue.js.map

package/lib/MlToolPalette.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/lib/MlToolPalette.vue.js

@@ -1,149 +0,0 @@
-import { computed, ref } from 'vue';
-// States for dialog visibility, collapse, and dock direction
-const dialogVisible = ref(true);
-const isCollapsed = ref(false);
-const dockDirection = ref('left');
-// Styles for collapsed and expanded dialog
-const dialogStyle = computed(() => {
-    const collapsedWidth = '50px'; // Width of the dialog when collapsed
-    const expandedWidth = '300px'; // Width of the dialog when expanded
-    // Adjust position and transition for collapsing/expanding
-    return isCollapsed.value
-        ? {
-            width: collapsedWidth,
-            height: '100%',
-            transition: 'width 0.3s',
-            [dockDirection.value]: '0',
-        }
-        : {
-            width: expandedWidth,
-            height: '100%',
-            transition: 'width 0.3s',
-            [dockDirection.value]: '0',
-        };
-});
-// Methods for folding and unfolding the dialog
-const fold = (direction) => {
-    dockDirection.value = direction;
-    isCollapsed.value = true;
-};
-const unfold = () => {
-    isCollapsed.value = false;
-};
-const __VLS_fnComponent = (await import('vue')).defineComponent({});
-;
-let __VLS_functionalComponentProps;
-const __VLS_ctxBase = {};
-const __VLS_ctx = __VLS_ctxBase;
-let __VLS_name;
-const __VLS_localComponents = {
-    ...{},
-    ...{},
-    ...__VLS_ctxBase,
-};
-let __VLS_components;
-let __VLS_styleScopedClasses;
-// CSS variable injection 
-// CSS variable injection end 
-let __VLS_resolvedLocalAndGlobalComponents;
-__VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("parent-container") }, });
-const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.ElDialog;
-/** @type { [typeof __VLS_components.ElDialog, typeof __VLS_components.elDialog, typeof __VLS_components.ElDialog, typeof __VLS_components.elDialog, ] } */
-// @ts-ignore
-const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ modelValue: ((__VLS_ctx.dialogVisible)), ...{ style: ((__VLS_ctx.dialogStyle)) }, ...{ class: ("foldable-dialog") }, draggable: ((true)), modal: ((false)), appendToBody: (true), }));
-const __VLS_2 = __VLS_1({ modelValue: ((__VLS_ctx.dialogVisible)), ...{ style: ((__VLS_ctx.dialogStyle)) }, ...{ class: ("foldable-dialog") }, draggable: ((true)), modal: ((false)), appendToBody: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
-__VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-{
-    const { title: __VLS_thisSlot } = __VLS_nonNullable(__VLS_5.slots);
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ((['dialog-header', __VLS_ctx.isCollapsed ? 'collapsed-title' : ''])) }, });
-    if (!__VLS_ctx.isCollapsed) {
-        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({});
-    }
-    if (!__VLS_ctx.isCollapsed) {
-        const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.ElButton;
-        /** @type { [typeof __VLS_components.ElButton, typeof __VLS_components.elButton, typeof __VLS_components.ElButton, typeof __VLS_components.elButton, ] } */
-        // @ts-ignore
-        const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ ...{ 'onClick': {} }, size: ("mini"), }));
-        const __VLS_8 = __VLS_7({ ...{ 'onClick': {} }, size: ("mini"), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
-        let __VLS_12;
-        const __VLS_13 = {
-            onClick: (...[$event]) => {
-                if (!((!__VLS_ctx.isCollapsed)))
-                    return;
-                __VLS_ctx.fold('left');
-            }
-        };
-        let __VLS_9;
-        let __VLS_10;
-        __VLS_nonNullable(__VLS_11.slots).default;
-        const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
-    }
-    if (!__VLS_ctx.isCollapsed) {
-        const __VLS_14 = __VLS_resolvedLocalAndGlobalComponents.ElButton;
-        /** @type { [typeof __VLS_components.ElButton, typeof __VLS_components.elButton, typeof __VLS_components.ElButton, typeof __VLS_components.elButton, ] } */
-        // @ts-ignore
-        const __VLS_15 = __VLS_asFunctionalComponent(__VLS_14, new __VLS_14({ ...{ 'onClick': {} }, size: ("mini"), }));
-        const __VLS_16 = __VLS_15({ ...{ 'onClick': {} }, size: ("mini"), }, ...__VLS_functionalComponentArgsRest(__VLS_15));
-        let __VLS_20;
-        const __VLS_21 = {
-            onClick: (...[$event]) => {
-                if (!((!__VLS_ctx.isCollapsed)))
-                    return;
-                __VLS_ctx.fold('right');
-            }
-        };
-        let __VLS_17;
-        let __VLS_18;
-        __VLS_nonNullable(__VLS_19.slots).default;
-        const __VLS_19 = __VLS_pickFunctionalComponentCtx(__VLS_14, __VLS_16);
-    }
-    else {
-        const __VLS_22 = __VLS_resolvedLocalAndGlobalComponents.ElButton;
-        /** @type { [typeof __VLS_components.ElButton, typeof __VLS_components.elButton, typeof __VLS_components.ElButton, typeof __VLS_components.elButton, ] } */
-        // @ts-ignore
-        const __VLS_23 = __VLS_asFunctionalComponent(__VLS_22, new __VLS_22({ ...{ 'onClick': {} }, size: ("mini"), ...{ class: ("unfold-button") }, }));
-        const __VLS_24 = __VLS_23({ ...{ 'onClick': {} }, size: ("mini"), ...{ class: ("unfold-button") }, }, ...__VLS_functionalComponentArgsRest(__VLS_23));
-        let __VLS_28;
-        const __VLS_29 = {
-            onClick: (__VLS_ctx.unfold)
-        };
-        let __VLS_25;
-        let __VLS_26;
-        __VLS_nonNullable(__VLS_27.slots).default;
-        const __VLS_27 = __VLS_pickFunctionalComponentCtx(__VLS_22, __VLS_24);
-    }
-}
-if (!__VLS_ctx.isCollapsed) {
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("dialog-content") }, });
-}
-const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
-__VLS_styleScopedClasses['parent-container'];
-__VLS_styleScopedClasses['foldable-dialog'];
-__VLS_styleScopedClasses['dialog-header'];
-__VLS_styleScopedClasses['unfold-button'];
-__VLS_styleScopedClasses['dialog-content'];
-var __VLS_slots;
-var __VLS_inheritedAttrs;
-const __VLS_refs = {};
-const __VLS_templateResult = { slots: __VLS_slots,
-    refs: $refs,
-    attrs: {},
-};
-const __VLS_internalComponent = (await import('vue')).defineComponent({
-    setup() {
-        return {
-            dialogVisible: dialogVisible,
-            isCollapsed: isCollapsed,
-            dialogStyle: dialogStyle,
-            fold: fold,
-            unfold: unfold,
-        };
-    },
-});
-export default (await import('vue')).defineComponent({
-    setup() {
-        return {};
-    },
-});
-;
-//# sourceMappingURL=MlToolPalette.vue.js.map

package/lib/MlToolbar.vue.d.ts

@@ -1,74 +0,0 @@
-/**
- * Data to descibe button appearance
- */
-export interface MlButtonData {
-    /**
-     * Icon represented by one SVG string
-     */
-    icon: string;
-    /**
-     * Text shown below icon
-     */
-    text: string;
-    /**
-     * Command string which will be passed to click event as event arguments
-     */
-    command: string;
-    /**
-     * Tooltips content when hover
-     */
-    description?: string;
-}
-/**
- * Properties of MlToolbar component
- */
-interface Props {
-    /**
-     * An array of button data
-     */
-    items: MlButtonData[];
-    /**
-     * Button size.
-     * - small: 30px
-     * - medium: 50px
-     * - large: 70px
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Layout type.
-     * - vertical: arrange button vertically
-     * - horizontal: arrange button horizontally
-     */
-    direction?: 'vertical' | 'horizontal';
-}
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
-    size: string;
-    layout: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
-    size: string;
-    layout: string;
-}>>> & {
-    onClick?: ((...args: any[]) => any) | undefined;
-}, {
-    size: "small" | "medium" | "large";
-}, {}>;
-export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/lib/MlToolbar.vue.js

@@ -1,129 +0,0 @@
-import { computed } from 'vue';
-let __VLS_typeProps;
-const props = withDefaults(defineProps(), {
-    size: 'large',
-    layout: 'horizontal'
-});
-const emit = defineEmits({
-    click: null
-});
-const buttonGroupClass = computed(() => {
-    return props.direction === 'vertical' ? 'ml-vertical-toolbar-button-group' : 'ml-horizontal-toolbar-button-group';
-});
-const buttonIconSize = computed(() => {
-    return (props.size === 'small') ? 20 : 30;
-});
-const buttonSize = computed(() => {
-    switch (props.size) {
-        case 'small':
-            return 30;
-        case 'medium':
-            return 50;
-    }
-    return 70;
-});
-const buttonTooltip = (item) => {
-    return item.description ? item.description : item.text;
-};
-const isShowButtonText = computed(() => {
-    return (props.size === 'large');
-});
-const handleCommand = (command) => {
-    emit('click', command);
-};
-const __VLS_withDefaultsArg = (function (t) { return t; })({
-    size: 'large',
-    layout: 'horizontal'
-});
-const __VLS_fnComponent = (await import('vue')).defineComponent({
-    emits: {},
-});
-;
-let __VLS_functionalComponentProps;
-const __VLS_ctxBase = {};
-const __VLS_ctx = __VLS_ctxBase;
-let __VLS_name;
-const __VLS_localComponents = {
-    ...{},
-    ...{},
-    ...__VLS_ctxBase,
-};
-let __VLS_components;
-let __VLS_styleScopedClasses;
-// CSS variable injection 
-// CSS variable injection end 
-let __VLS_resolvedLocalAndGlobalComponents;
-const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.ElButtonGroup;
-/** @type { [typeof __VLS_components.ElButtonGroup, typeof __VLS_components.elButtonGroup, typeof __VLS_components.ElButtonGroup, typeof __VLS_components.elButtonGroup, ] } */
-// @ts-ignore
-const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ class: ((__VLS_ctx.buttonGroupClass)) }, }));
-const __VLS_2 = __VLS_1({ ...{ class: ((__VLS_ctx.buttonGroupClass)) }, }, ...__VLS_functionalComponentArgsRest(__VLS_1));
-for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.items))) {
-    const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.ElTooltip;
-    /** @type { [typeof __VLS_components.ElTooltip, typeof __VLS_components.elTooltip, typeof __VLS_components.ElTooltip, typeof __VLS_components.elTooltip, ] } */
-    // @ts-ignore
-    const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ key: ((item.text)), content: ((__VLS_ctx.buttonTooltip(item))), hideAfter: ((0)), }));
-    const __VLS_8 = __VLS_7({ key: ((item.text)), content: ((__VLS_ctx.buttonTooltip(item))), hideAfter: ((0)), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
-    const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.ElButton;
-    /** @type { [typeof __VLS_components.ElButton, typeof __VLS_components.elButton, typeof __VLS_components.ElButton, typeof __VLS_components.elButton, ] } */
-    // @ts-ignore
-    const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ ...{ 'onClick': {} }, ...{ class: ("ml-toolbar-button") }, ...{ style: (({ width: __VLS_ctx.buttonSize + 'px', height: __VLS_ctx.buttonSize + 'px' })) }, key: ((index)), }));
-    const __VLS_14 = __VLS_13({ ...{ 'onClick': {} }, ...{ class: ("ml-toolbar-button") }, ...{ style: (({ width: __VLS_ctx.buttonSize + 'px', height: __VLS_ctx.buttonSize + 'px' })) }, key: ((index)), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
-    let __VLS_18;
-    const __VLS_19 = {
-        onClick: (...[$event]) => {
-            __VLS_ctx.handleCommand(item.command);
-        }
-    };
-    let __VLS_15;
-    let __VLS_16;
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({});
-    const __VLS_20 = __VLS_resolvedLocalAndGlobalComponents.ElIcon;
-    /** @type { [typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ] } */
-    // @ts-ignore
-    const __VLS_21 = __VLS_asFunctionalComponent(__VLS_20, new __VLS_20({ size: ((__VLS_ctx.buttonIconSize)), }));
-    const __VLS_22 = __VLS_21({ size: ((__VLS_ctx.buttonIconSize)), }, ...__VLS_functionalComponentArgsRest(__VLS_21));
-    __VLS_directiveAsFunction(__VLS_ctx.vHtml)(null, { ...__VLS_directiveBindingRestFields, value: (item.icon) }, null, null);
-    if (__VLS_ctx.isShowButtonText) {
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("ml-toolbar-button-text") }, });
-        (item.text);
-    }
-    __VLS_nonNullable(__VLS_17.slots).default;
-    const __VLS_17 = __VLS_pickFunctionalComponentCtx(__VLS_12, __VLS_14);
-    __VLS_nonNullable(__VLS_11.slots).default;
-    const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
-}
-__VLS_nonNullable(__VLS_5.slots).default;
-const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
-__VLS_styleScopedClasses['ml-toolbar-button'];
-__VLS_styleScopedClasses['ml-toolbar-button-text'];
-var __VLS_slots;
-var __VLS_inheritedAttrs;
-const __VLS_refs = {};
-const __VLS_templateResult = { slots: __VLS_slots,
-    refs: $refs,
-    attrs: {},
-};
-const __VLS_internalComponent = (await import('vue')).defineComponent({
-    setup() {
-        return {
-            buttonGroupClass: buttonGroupClass,
-            buttonIconSize: buttonIconSize,
-            buttonSize: buttonSize,
-            buttonTooltip: buttonTooltip,
-            isShowButtonText: isShowButtonText,
-            handleCommand: handleCommand,
-        };
-    },
-    emits: {},
-    props: {},
-});
-export default (await import('vue')).defineComponent({
-    setup() {
-        return {};
-    },
-    emits: {},
-    props: {},
-});
-;
-//# sourceMappingURL=MlToolbar.vue.js.map

package/src/composable/useBoundingRect.ts

@@ -1,87 +0,0 @@
-import { computed, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
-
-import { Position, WIDTH_OF_TITLE_BAR } from './types'
-import { useInitialRect } from './useInitialRect'
-import { useResize } from './useResize'
-import { useTransition } from './useTransition'
-
-/**
- * Get the bounding rect of the tool palette.
- * - If it is the first time to show the tool palette, return the initial size and position from CSS
- * - Otherwise, return the size and postion after resized
- * @param targetRef Input the tool palette HTML element to get its bounding rect
- * @param reversed Input flag whether to reverse cllapse icon
- * @param collapsed Input flag to indicate whether the tool palette is collapsed
- * @param movement Input dragging movement
- * @returns Return the bounding rect of the tool palette
- */
-export function useBoundingRect(
-  targetRef: Ref<HTMLElement | null>,
-  reversed: Ref<boolean>,
-  collapsed: Ref<boolean>,
-  movement: Ref<Position>
-) {
-  const windowWidth = ref(window.innerWidth)
-  const windowHeight = ref(window.innerHeight)  
-  const { initialRect } = useInitialRect(targetRef)
-  const { rect: resizedRect } = useResize(targetRef, reversed)
-  useTransition(targetRef, reversed, collapsed)
-  
-  const rect = computed(() => {
-    return resizedRect.value.width && resizedRect.value.height
-      ? resizedRect.value
-      : initialRect.value
-  })
-
-  // Modify the position of this tool palette according to current orientation
-  const setTargetPos = (xDelta: number) => {
-    if (targetRef.value && reversed.value) {
-      const rect = targetRef.value.getBoundingClientRect()
-      targetRef.value.style.left = (rect.left + xDelta) + 'px'
-    }
-  }
-
-  const updateWindowSize = () => {
-    const xDelta = window.innerWidth - windowWidth.value
-    windowWidth.value = window.innerWidth
-    windowHeight.value = window.innerHeight
-    setTargetPos(xDelta)
-  }
-
-  onMounted(() => {
-    window.addEventListener('resize', updateWindowSize)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateWindowSize)
-  })
-
-  // Watch collapsed state. If it is collapsed, store the old width in order to reuse it when expanding the tool palette
-  let oldWidth: number | null | undefined = null
-  watch(collapsed, newVal => {
-    if (newVal) {
-      oldWidth = rect.value.width
-      rect.value.width = WIDTH_OF_TITLE_BAR
-      if (reversed.value && rect.value.left && oldWidth) {
-        rect.value.left = rect.value.left + oldWidth - WIDTH_OF_TITLE_BAR
-      }
-    } else {
-      rect.value.width = oldWidth
-      if (reversed.value && rect.value.left && oldWidth) {
-        rect.value.left = rect.value.left - oldWidth + WIDTH_OF_TITLE_BAR
-      }
-      oldWidth = null
-    }
-  })
-
-  watch(movement, newVal => {
-    if (newVal && targetRef.value) {
-      const element = targetRef.value as HTMLElement
-      const temp = element.getBoundingClientRect()
-      rect.value.left = temp.left
-      rect.value.top = temp.top
-    }
-  })
-
-  return { rect }
-}