@mlightcad/ui-components 0.0.6 → 0.0.7

package/dist/ui-components.es.js

@@ -1,14 +1,102 @@
-import { ElIcon as g, ElButton as y, ElTooltip as C, ElButtonGroup as T } from "element-plus/es";
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-05cd92db],.ml-dropdown-icon[data-v-05cd92db]:hover{outline:none;border:none}.ml-vertical-toolbar-button-group[data-v-7e12291d]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-7e12291d]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-7e12291d]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-7e12291d]{margin-left:0;margin-top:5px}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { ElIcon as k, ElDropdownItem as B, ElDropdownMenu as S, ElDropdown as V, ElButton as D, ElTooltip as N, ElButtonGroup as $ } from "element-plus/es";
 import "element-plus/es/components/base/style/css";
+import "element-plus/es/components/dropdown/style/css";
+import "element-plus/es/components/dropdown-menu/style/css";
+import "element-plus/es/components/dropdown-item/style/css";
+import "element-plus/es/components/icon/style/css";
+import { defineComponent as w, computed as p, openBlock as n, createBlock as u, withCtx as c, createVNode as v, createElementBlock as g, Fragment as z, renderList as M, createTextVNode as G, toDisplayString as C, pushScopeId as H, popScopeId as R, createElementVNode as f, normalizeClass as Y, normalizeStyle as F, createCommentVNode as O } from "vue";
 import "element-plus/es/components/button-group/style/css";
 import "element-plus/es/components/tooltip/style/css";
 import "element-plus/es/components/button/style/css";
-import "element-plus/es/components/icon/style/css";
-import { defineComponent as B, computed as r, openBlock as l, createBlock as i, normalizeClass as E, withCtx as u, createElementBlock as m, Fragment as M, renderList as S, normalizeStyle as w, createElementVNode as I, createVNode as L, toDisplayString as N, createCommentVNode as V } from "vue";
-const G = {
+const j = (t) => (H("data-v-05cd92db"), t = t(), R(), t), q = /* @__PURE__ */ j(() => /* @__PURE__ */ f("svg", {
+  preserveAspectRatio: "xMidYMid meet",
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  "data-v-63d067da": ""
+}, [
+  /* @__PURE__ */ f("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"
+  })
+], -1)), J = /* @__PURE__ */ w({
+  __name: "MlDropdown",
+  props: {
+    icon: {},
+    items: {},
+    current: { default: void 0 }
+  },
+  emits: {
+    click: null
+  },
+  setup(t, { emit: r }) {
+    const e = t, a = r, s = p(() => e.items.filter((l) => l.name !== e.current)), i = (l) => {
+      a("click", l);
+    };
+    return (l, x) => {
+      const _ = k, h = B, o = S, b = V;
+      return n(), u(b, { onCommand: i }, {
+        dropdown: c(() => [
+          v(o, null, {
+            default: c(() => [
+              (n(!0), g(z, null, M(s.value, (d) => (n(), u(h, {
+                key: d.text,
+                command: d.name
+              }, {
+                default: c(() => [
+                  G(C(d.text), 1)
+                ]),
+                _: 2
+              }, 1032, ["command"]))), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        default: c(() => [
+          v(_, {
+            size: "30",
+            class: "ml-dropdown-icon"
+          }, {
+            default: c(() => [
+              q
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+}), L = (t, r) => {
+  const e = t.__vccOpts || t;
+  for (const [a, s] of r)
+    e[a] = s;
+  return e;
+}, y = /* @__PURE__ */ L(J, [["__scopeId", "data-v-05cd92db"]]), K = '<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>', P = /* @__PURE__ */ w({
+  __name: "MlLanguage",
+  props: {
+    languages: {},
+    current: {}
+  },
+  emits: {
+    click: null
+  },
+  setup(t, { emit: r }) {
+    const e = t, a = r, s = (i) => {
+      a("click", i);
+    };
+    return (i, l) => (n(), u(y, {
+      icon: K,
+      items: e.languages,
+      current: e.current,
+      onClick: s
+    }, null, 8, ["items", "current"]));
+  }
+}), Q = {
   key: 0,
   class: "ml-toolbar-button-text"
-}, H = /* @__PURE__ */ B({
+}, U = /* @__PURE__ */ w({
   __name: "MlToolbar",
   props: {
     items: {},
@@ -18,43 +106,43 @@ const G = {
   emits: {
     click: null
   },
-  setup(e, { emit: c }) {
-    const t = e, s = c, a = r(() => t.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), _ = r(() => t.size === "small" ? 20 : 30), p = r(() => {
-      switch (t.size) {
+  setup(t, { emit: r }) {
+    const e = t, a = r, s = p(() => e.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), i = p(() => e.size === "small" ? 20 : 30), l = p(() => {
+      switch (e.size) {
         case "small":
           return 30;
         case "medium":
           return 50;
       }
       return 70;
-    }), d = (o) => o.description ? o.description : o.text, b = r(() => t.size === "large"), f = (o) => {
-      s("click", o);
+    }), x = (o) => o.description ? o.description : o.text, _ = p(() => e.size === "large"), h = (o) => {
+      a("click", o);
     };
-    return (o, O) => {
-      const v = g, h = y, k = C, x = T;
-      return l(), i(x, {
-        class: E(a.value)
+    return (o, b) => {
+      const d = k, E = D, I = N, T = $;
+      return n(), u(T, {
+        class: Y(s.value)
       }, {
-        default: u(() => [
-          (l(!0), m(M, null, S(o.items, (n, z) => (l(), i(k, {
-            key: n.text,
-            content: d(n),
+        default: c(() => [
+          (n(!0), g(z, null, M(o.items, (m, A) => (n(), u(I, {
+            key: m.text,
+            content: x(m),
             "hide-after": 0
           }, {
-            default: u(() => [
-              (l(), i(h, {
+            default: c(() => [
+              (n(), u(E, {
                 class: "ml-toolbar-button",
-                style: w({ width: p.value + "px", height: p.value + "px" }),
-                key: z,
-                onClick: ($) => f(n.command)
+                style: F({ width: l.value + "px", height: l.value + "px" }),
+                key: A,
+                onClick: (X) => h(m.command)
               }, {
-                default: u(() => [
-                  I("div", null, [
-                    L(v, {
-                      size: _.value,
-                      innerHTML: n.icon
+                default: c(() => [
+                  f("div", null, [
+                    v(d, {
+                      size: i.value,
+                      innerHTML: m.icon
                     }, null, 8, ["size", "innerHTML"]),
-                    b.value ? (l(), m("div", G, N(n.text), 1)) : V("", !0)
+                    _.value ? (n(), g("div", Q, C(m.text), 1)) : O("", !0)
                   ])
                 ]),
                 _: 2
@@ -67,18 +155,14 @@ const G = {
       }, 8, ["class"]);
     };
   }
-}), D = (e, c) => {
-  const t = e.__vccOpts || e;
-  for (const [s, a] of c)
-    t[s] = a;
-  return t;
-}, F = /* @__PURE__ */ D(H, [["__scopeId", "data-v-0fe7ba99"]]), R = {
+}), W = /* @__PURE__ */ L(U, [["__scopeId", "data-v-7e12291d"]]), it = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  install(e) {
-    e.component("MlToolbar", F);
+  install(t) {
+    t.component("MlDropdown", y), t.component("MlLanguage", P), t.component("MlToolbar", W);
   }
 };
 export {
-  F as MlToolbar,
-  R as default
+  P as MlLanguage,
+  W as MlToolbar,
+  it as default
 };

package/dist/ui-components.umd.js

@@ -1 +1,2 @@
-(function(t,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/button-group/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/style/css"),require("element-plus/es/components/icon/style/css"),require("vue")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/button-group/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css","element-plus/es/components/icon/style/css","vue"],o):(t=typeof globalThis<"u"?globalThis:t||self,o(t.UIComponents={},t.es,null,null,null,null,null,t.Vue))})(this,function(t,o,g,z,C,M,q,e){"use strict";const m={key:0,class:"ml-toolbar-button-text"},p=((l,r)=>{const n=l.__vccOpts||l;for(const[i,u]of r)n[i]=u;return n})(e.defineComponent({__name:"MlToolbar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(l,{emit:r}){const n=l,i=r,u=e.computed(()=>n.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),_=e.computed(()=>n.size==="small"?20:30),a=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),b=s=>s.description?s.description:s.text,f=e.computed(()=>n.size==="large"),y=s=>{i("click",s)};return(s,w)=>{const k=o.ElIcon,h=o.ElButton,x=o.ElTooltip,B=o.ElButtonGroup;return e.openBlock(),e.createBlock(B,{class:e.normalizeClass(u.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.items,(c,T)=>(e.openBlock(),e.createBlock(x,{key:c.text,content:b(c),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(h,{class:"ml-toolbar-button",style:e.normalizeStyle({width:a.value+"px",height:a.value+"px"}),key:T,onClick:$=>y(c.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(k,{size:_.value,innerHTML:c.icon},null,8,["size","innerHTML"]),f.value?(e.openBlock(),e.createElementBlock("div",m,e.toDisplayString(c.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-0fe7ba99"]]),d={install(l){l.component("MlToolbar",p)}};t.MlToolbar=p,t.default=d,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-05cd92db],.ml-dropdown-icon[data-v-05cd92db]:hover{outline:none;border:none}.ml-vertical-toolbar-button-group[data-v-7e12291d]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-7e12291d]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-7e12291d]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-7e12291d]{margin-left:0;margin-top:5px}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(l,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/dropdown/style/css"),require("element-plus/es/components/dropdown-menu/style/css"),require("element-plus/es/components/dropdown-item/style/css"),require("element-plus/es/components/icon/style/css"),require("vue"),require("element-plus/es/components/button-group/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/style/css")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/dropdown/style/css","element-plus/es/components/dropdown-menu/style/css","element-plus/es/components/dropdown-item/style/css","element-plus/es/components/icon/style/css","vue","element-plus/es/components/button-group/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css"],n):(l=typeof globalThis<"u"?globalThis:l||self,n(l.UIComponents={},l.es,null,null,null,null,null,l.Vue))})(this,function(l,n,V,I,S,q,A,e){"use strict";const b=(t=>(e.pushScopeId("data-v-05cd92db"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em","data-v-63d067da":""},[e.createElementVNode("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"})],-1)),x=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:r}){const o=t,i=r,p=e.computed(()=>o.items.filter(c=>c.name!==o.current)),a=c=>{i("click",c)};return(c,g)=>{const u=n.ElIcon,_=n.ElDropdownItem,s=n.ElDropdownMenu,y=n.ElDropdown;return e.openBlock(),e.createBlock(y,{onCommand:a},{dropdown:e.withCtx(()=>[e.createVNode(s,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,m=>(e.openBlock(),e.createBlock(_,{key:m.text,command:m.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(m.text),1)]),_:2},1032,["command"]))),128))]),_:1})]),default:e.withCtx(()=>[e.createVNode(u,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[b]),_:1})]),_:1})}}}),h=(t,r)=>{const o=t.__vccOpts||t;for(const[i,p]of r)o[i]=p;return o},f=h(x,[["__scopeId","data-v-05cd92db"]]),C='<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>',w=e.defineComponent({__name:"MlLanguage",props:{languages:{},current:{}},emits:{click:null},setup(t,{emit:r}){const o=t,i=r,p=a=>{i("click",a)};return(a,c)=>(e.openBlock(),e.createBlock(f,{icon:C,items:o.languages,current:o.current,onClick:p},null,8,["items","current"]))}}),B={key:0,class:"ml-toolbar-button-text"},k=h(e.defineComponent({__name:"MlToolbar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(t,{emit:r}){const o=t,i=r,p=e.computed(()=>o.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),a=e.computed(()=>o.size==="small"?20:30),c=e.computed(()=>{switch(o.size){case"small":return 30;case"medium":return 50}return 70}),g=s=>s.description?s.description:s.text,u=e.computed(()=>o.size==="large"),_=s=>{i("click",s)};return(s,y)=>{const m=n.ElIcon,z=n.ElButton,L=n.ElTooltip,E=n.ElButtonGroup;return e.openBlock(),e.createBlock(E,{class:e.normalizeClass(p.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.items,(d,T)=>(e.openBlock(),e.createBlock(L,{key:d.text,content:g(d),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(z,{class:"ml-toolbar-button",style:e.normalizeStyle({width:c.value+"px",height:c.value+"px"}),key:T,onClick:$=>_(d.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(m,{size:a.value,innerHTML:d.icon},null,8,["size","innerHTML"]),u.value?(e.openBlock(),e.createElementBlock("div",B,e.toDisplayString(d.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-7e12291d"]]),M={install(t){t.component("MlDropdown",f),t.component("MlLanguage",w),t.component("MlToolbar",k)}};l.MlLanguage=w,l.MlToolbar=k,l.default=M,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

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/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,5 +1,7 @@
+import MlLanguage from './MlLanguage.vue';
 import MlToolbar from './MlToolbar.vue';
-export { MlToolbar };
+export { MlLanguage, MlToolbar };
+export type { MlDropdownMenuItem } from './MlDropdown.vue';
 export type { MlButtonData } from './MlToolbar.vue';
 declare const _default: {
     install(app: any): void;

package/lib/index.js

@@ -1,9 +1,13 @@
+import MlDropdown from './MlDropdown.vue';
+import MlLanguage from './MlLanguage.vue';
 import MlToolbar from './MlToolbar.vue';
-export { MlToolbar };
+export { MlLanguage, MlToolbar };
 // Optionally, export them as a plugin for Vue
 export default {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     install(app) {
+        app.component('MlDropdown', MlDropdown);
+        app.component('MlLanguage', MlLanguage);
         app.component('MlToolbar', MlToolbar);
     }
 };

package/package.json

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

package/src/MlDropdown.vue

@@ -0,0 +1,83 @@
+<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/MlLanguage.vue

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

package/src/MlToolbar.vue

@@ -48,7 +48,7 @@ export interface MlButtonData {
 }
 
 /**
- * Properties of MLToolbar components
+ * Properties of MlToolbar component
  */
 interface Props {
   /**

package/src/index.ts

@@ -1,11 +1,16 @@
+import MlDropdown from './MlDropdown.vue'
+import MlLanguage from './MlLanguage.vue'
 import MlToolbar from './MlToolbar.vue'
-export { MlToolbar }
+export { MlLanguage, MlToolbar }
+export type { MlDropdownMenuItem } from './MlDropdown.vue'
 export type { MlButtonData } from './MlToolbar.vue'
 
 // Optionally, export them as a plugin for Vue
 export default {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   install(app: any) {
+    app.component('MlDropdown', MlDropdown)
+    app.component('MlLanguage', MlLanguage)
     app.component('MlToolbar', MlToolbar)
   }
 }

package/dist/style.css

@@ -1 +0,0 @@
-.ml-vertical-toolbar-button-group[data-v-0fe7ba99]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-0fe7ba99]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-0fe7ba99]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-0fe7ba99]{margin-left:0;margin-top:5px}