@mlightcad/ui-components 0.0.6 → 0.0.8

package/lib/MlDropdown.vue.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Data to descibe dropdown menu item
+ */
+export interface MlDropdownMenuItem {
+    /**
+     * Key of the dropdown menu item
+     */
+    name: string;
+    /**
+     * Text shown in dropdown menu item
+     */
+    text: string;
+}
+/**
+ * Properties of MlDropdown component
+ */
+interface Props {
+    /**
+     * Dropdown icon represented by one SVG string
+     */
+    icon: string;
+    /**
+     * An array of avaiable language
+     */
+    items: MlDropdownMenuItem[];
+    /**
+     * Key of the current selected dropdown menu item
+     */
+    current?: string;
+}
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    current: undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    current: undefined;
+}>>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    current: string;
+}, {}>;
+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/MlDropdown.vue.js

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,149 @@
+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

@@ -20,7 +20,7 @@ export interface MlButtonData {
     description?: string;
 }
 /**
- * Properties of MLToolbar components
+ * Properties of MlToolbar component
  */
 interface Props {
     /**

package/lib/index.d.ts

@@ -1,6 +1,11 @@
-import MlToolbar from './MlToolbar.vue';
-export { MlToolbar };
-export type { MlButtonData } from './MlToolbar.vue';
+import MlCollapse from './components/MlCollapse.vue';
+import MlDropdown from './components/MlDropdown.vue';
+import MlLanguage from './components/MlLanguage.vue';
+import MlToolbar from './components/MlToolbar.vue';
+import MlToolPalette from './components/MlToolPalette.vue';
+export { MlCollapse, MlDropdown, MlLanguage, MlToolbar, MlToolPalette };
+export type { MlDropdownMenuItem } from './components/MlDropdown.vue';
+export type { MlButtonData } from './components/MlToolbar.vue';
 declare const _default: {
     install(app: any): void;
 };

package/lib/index.js

@@ -1,10 +1,18 @@
-import MlToolbar from './MlToolbar.vue';
-export { MlToolbar };
+import MlCollapse from './components/MlCollapse.vue';
+import MlDropdown from './components/MlDropdown.vue';
+import MlLanguage from './components/MlLanguage.vue';
+import MlToolbar from './components/MlToolbar.vue';
+import MlToolPalette from './components/MlToolPalette.vue';
+export { MlCollapse, MlDropdown, MlLanguage, MlToolbar, MlToolPalette };
 // Optionally, export them as a plugin for Vue
 export default {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     install(app) {
+        app.component('MlCollapse', MlDropdown);
+        app.component('MlDropdown', MlDropdown);
+        app.component('MlLanguage', MlLanguage);
         app.component('MlToolbar', MlToolbar);
+        app.component('MlToolPalette', MlToolPalette);
     }
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlightcad/ui-components",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "One common UI component library based on Element Plus",
   "license": "MIT",
   "author": "MLight Lee <mlight.lee@outlook.com>",

package/src/components/MlCollapse.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-icon :size="iconSize" @click="handleClicked">
+    <component :is="icon" />
+  </el-icon>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import arrowLeft from '../svg/arrow-left.svg'
+import arrowRight from '../svg/arrow-right.svg'
+
+/**
+ * Properties of MlCllapse component
+ */
+interface Props {
+  /**
+   * Size of collapse icon
+   */
+  size?: number
+  /**
+   * Flag whether to reverse left/right direction of icon
+   */
+  reverse?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 18,
+  reverse: false
+})
+const isCollapsed = defineModel({ default: true })
+const emit = defineEmits({
+  change: null
+})
+
+const icon = computed(() => {
+  if (props.reverse) {
+    return isCollapsed.value ? arrowLeft : arrowRight
+  } else {
+    return isCollapsed.value ? arrowRight : arrowLeft
+  }
+})
+
+// Icon size
+const iconSize = computed(() => {
+  return `${props.size}px`
+})
+
+const handleClicked = () => {
+  emit('change', isCollapsed.value)
+  isCollapsed.value = !isCollapsed.value
+}
+</script>
+
+<style scoped></style>

package/src/components/MlDropdown.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-dropdown @command="handleCommand">
+    <el-icon size="30" class="ml-dropdown-icon">
+      <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>
+    </el-icon>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="item in filteredItems"
+          :key="item.text"
+          :command="item.name"
+        >
+          {{ item.text }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * Data to descibe dropdown menu item
+ */
+export interface MlDropdownMenuItem {
+  /**
+   * Key of the dropdown menu item
+   */
+  name: string
+  /**
+   * Text shown in dropdown menu item
+   */
+  text: string
+}
+
+/**
+ * Properties of MlDropdown component
+ */
+interface Props {
+  /**
+   * Dropdown icon represented by one SVG string
+   */
+  icon: string
+  /**
+   * An array of avaiable language
+   */
+  items: MlDropdownMenuItem[]
+  /**
+   * Key of the current selected dropdown menu item
+   */
+  current?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  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: string) => {
+  emit('click', command)
+}
+</script>
+
+<style scoped>
+.ml-dropdown-icon {
+  outline: none;
+  border: none;
+}
+
+.ml-dropdown-icon:hover {
+  outline: none;
+  border: none;
+}
+</style>

package/src/components/MlLanguage.vue

@@ -0,0 +1,41 @@
+<template>
+  <ml-dropdown
+    :icon="svg"
+    :items="props.languages"
+    :current="props.current"
+    @click="handleClick"
+  />
+</template>
+
+<script setup lang="ts">
+import MlDropdown, { MlDropdownMenuItem } 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>'
+
+/**
+ * Properties of MlLanguage component
+ */
+interface Props {
+  /**
+   * An array of avaiable languages
+   */
+  languages: MlDropdownMenuItem[]
+  /**
+   * Key of the current language
+   */
+  current: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits({
+  click: null
+})
+
+const handleClick = (command: string) => {
+  emit('click', command)
+}
+</script>
+
+<style scoped></style>