@mlightcad/ui-components 0.0.15 → 0.1.0

package/README.md

@@ -9,6 +9,8 @@ The following components are included in this package.
 - Tool Palette: one dockable, resizable, and floating window, which is quite similar to AutoCAD Tool Palette.
 - Toolbar: one toolbar which can be easily customized by one array of button data. 
 
+You can play with them through [this live demo](https://mlight-lee.github.io/ui-components/).
+
 ### Tool Palette
 
 AutoCAD uses [tool palettes](https://help.autodesk.com/view/ACD/2025/ENU/?guid=GUID-167A8594-92CB-4FCC-B72C-0F546383E97C) to organize blocks, hatches, and custom tools in a tabbed window. Tool Palette component is quite similar to one in AutoCAD. It supports the following features.

package/dist/ui-components.es.js

@@ -1,81 +1,81 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-vertical-toolbar-button-group[data-v-d5511111]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-d5511111]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-d5511111]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-d5511111]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-11a64c54]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-tool-palette-dialog-icon[data-v-11a64c54]{border-bottom:1px solid var(--el-border-color)}.ml-tool-palette-dialog-layout[data-v-11a64c54]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-11a64c54]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;background-color:var(--el-fill-color)}.ml-tool-palette-title[data-v-11a64c54]{pointer-events:none;margin-top:10px;margin-bottom:10px;font-size:small;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-tool-palette-content[data-v-11a64c54]{-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;background-color:var(--el-fill-color);overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-11a64c54]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-11a64c54],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-11a64c54]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-11a64c54]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { ElIcon as A, ElDropdownItem as se, ElDropdownMenu as ie, ElDropdown as ue, ElButton as ae, ElTooltip as ce, ElButtonGroup as re } from "element-plus/es";
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-toggle-button[data-v-b676e93b]{border:none;padding:0;cursor:pointer;width:var(--0547f26d);height:var(--0547f26d)}.ml-vertical-toolbar-button-group[data-v-5261c686]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-5261c686]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-5261c686]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-5261c686]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-8645db4f]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-tool-palette-dialog-icon[data-v-8645db4f]{border-bottom:1px solid var(--el-border-color);cursor:default}.ml-tool-palette-dialog-icon[data-v-8645db4f]:hover{color:var(--el-color-primary)}.ml-tool-palette-dialog-layout[data-v-8645db4f]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-8645db4f]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;background-color:var(--el-fill-color)}.ml-tool-palette-title[data-v-8645db4f]{pointer-events:none;margin-top:10px;margin-bottom:10px;font-size:small;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-tool-palette-content[data-v-8645db4f]{-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;background-color:var(--el-fill-color);overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-8645db4f]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-8645db4f],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-8645db4f]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-8645db4f]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { ElIcon as H, ElDropdownItem as ue, ElDropdownMenu as ae, ElDropdown as ce, ElButton as Q, ElTooltip as Z, ElButtonGroup as re } from "element-plus/es";
 import "element-plus/es/components/base/style/css";
 import "element-plus/es/components/icon/style/css";
-import { openBlock as y, createElementBlock as I, createElementVNode as z, defineComponent as V, mergeModels as Y, useModel as K, computed as g, createBlock as W, withCtx as k, resolveDynamicComponent as Q, createVNode as S, Fragment as Z, renderList as P, createTextVNode as ve, toDisplayString as U, pushScopeId as R, popScopeId as ee, renderSlot as O, normalizeClass as te, normalizeStyle as X, createCommentVNode as ne, ref as m, onMounted as D, onUnmounted as F, watch as L, onBeforeUnmount as le, unref as G } from "vue";
+import { openBlock as M, createElementBlock as I, createElementVNode as E, defineComponent as S, mergeModels as V, useModel as U, computed as p, createBlock as $, withCtx as B, resolveDynamicComponent as P, createVNode as D, Fragment as R, renderList as ee, createTextVNode as ve, toDisplayString as F, pushScopeId as te, popScopeId as ne, renderSlot as O, useCssVars as de, normalizeClass as le, normalizeStyle as X, createCommentVNode as oe, ref as m, onMounted as Y, onUnmounted as G, watch as L, onBeforeUnmount as se, unref as j } from "vue";
 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/button-group/style/css";
 import "element-plus/es/components/tooltip/style/css";
 import "element-plus/es/components/button/style/css";
-const de = {
+import "element-plus/es/components/button-group/style/css";
+const me = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
-}, me = /* @__PURE__ */ z("path", {
+}, he = /* @__PURE__ */ E("path", {
   fill: "currentColor",
   d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"
-}, null, -1), he = [
-  me
+}, null, -1), fe = [
+  he
 ];
-function fe(e, s) {
-  return y(), I("svg", de, [...he]);
+function pe(e, s) {
+  return M(), I("svg", me, [...fe]);
 }
-const j = { render: fe }, pe = {
+const q = { render: pe }, _e = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
-}, we = /* @__PURE__ */ z("path", {
+}, we = /* @__PURE__ */ E("path", {
   fill: "currentColor",
   d: "M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
-}, null, -1), _e = [
+}, null, -1), ge = [
   we
 ];
-function ge(e, s) {
-  return y(), I("svg", pe, [..._e]);
+function Le(e, s) {
+  return M(), I("svg", _e, [...ge]);
 }
-const q = { render: ge }, Le = /* @__PURE__ */ V({
+const J = { render: Le }, xe = /* @__PURE__ */ S({
   __name: "MlCollapse",
-  props: /* @__PURE__ */ Y({
+  props: /* @__PURE__ */ V({
     size: { default: 18 },
     reverse: { type: Boolean, default: !1 }
   }, {
     modelValue: { default: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ Y(["change"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
   setup(e, { emit: s }) {
-    const t = e, o = K(e, "modelValue"), l = s, n = g(() => t.reverse ? o.value ? j : q : o.value ? q : j), u = g(() => `${t.size}px`), d = () => {
+    const t = e, o = U(e, "modelValue"), l = s, n = p(() => t.reverse ? o.value ? q : J : o.value ? J : q), u = p(() => `${t.size}px`), d = () => {
       l("change", o.value), o.value = !o.value;
     };
     return (i, a) => {
-      const r = A;
-      return y(), W(r, {
+      const r = H;
+      return M(), $(r, {
         size: u.value,
         onClick: d
       }, {
-        default: k(() => [
-          (y(), W(Q(n.value)))
+        default: B(() => [
+          (M(), $(P(n.value)))
         ]),
         _: 1
       }, 8, ["size"]);
     };
   }
-}), xe = (e) => (R("data-v-3fc33b5d"), e = e(), ee(), e), ye = /* @__PURE__ */ xe(() => /* @__PURE__ */ z("svg", {
+}), Me = (e) => (te("data-v-3fc33b5d"), e = e(), ne(), e), be = /* @__PURE__ */ Me(() => /* @__PURE__ */ E("svg", {
   preserveAspectRatio: "xMidYMid meet",
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em",
   "data-v-63d067da": ""
 }, [
-  /* @__PURE__ */ z("path", {
+  /* @__PURE__ */ E("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)), Me = /* @__PURE__ */ V({
+], -1)), ye = /* @__PURE__ */ S({
   __name: "MlDropdown",
   props: {
     icon: {},
@@ -86,21 +86,21 @@ const q = { render: ge }, Le = /* @__PURE__ */ V({
     click: null
   },
   setup(e, { emit: s }) {
-    const t = e, o = s, l = g(() => t.items.filter((u) => u.name !== t.current)), n = (u) => {
+    const t = e, o = s, l = p(() => t.items.filter((u) => u.name !== t.current)), n = (u) => {
       o("click", u);
     };
     return (u, d) => {
-      const i = A, a = se, r = ie, w = ue;
-      return y(), W(w, { onCommand: n }, {
-        dropdown: k(() => [
-          S(r, null, {
-            default: k(() => [
-              (y(!0), I(Z, null, P(l.value, (c) => (y(), W(a, {
+      const i = H, a = ue, r = ae, _ = ce;
+      return M(), $(_, { onCommand: n }, {
+        dropdown: B(() => [
+          D(r, null, {
+            default: B(() => [
+              (M(!0), I(R, null, ee(l.value, (c) => (M(), $(a, {
                 key: c.text,
                 command: c.name
               }, {
-                default: k(() => [
-                  ve(U(c.text), 1)
+                default: B(() => [
+                  ve(F(c.text), 1)
                 ]),
                 _: 2
               }, 1032, ["command"]))), 128))
@@ -108,13 +108,13 @@ const q = { render: ge }, Le = /* @__PURE__ */ V({
             _: 1
           })
         ]),
-        default: k(() => [
-          S(i, {
+        default: B(() => [
+          D(i, {
             size: "30",
             class: "ml-dropdown-icon"
           }, {
-            default: k(() => [
-              ye
+            default: B(() => [
+              be
             ]),
             _: 1
           })
@@ -123,12 +123,12 @@ const q = { render: ge }, Le = /* @__PURE__ */ V({
       });
     };
   }
-}), H = (e, s) => {
+}), A = (e, s) => {
   const t = e.__vccOpts || e;
   for (const [o, l] of s)
     t[o] = l;
   return t;
-}, N = /* @__PURE__ */ H(Me, [["__scopeId", "data-v-3fc33b5d"]]), Ee = '<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>', be = /* @__PURE__ */ V({
+}, N = /* @__PURE__ */ A(ye, [["__scopeId", "data-v-3fc33b5d"]]), ze = '<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>', Ee = /* @__PURE__ */ S({
   __name: "MlLanguage",
   props: {
     languages: {},
@@ -141,28 +141,62 @@ const q = { render: ge }, Le = /* @__PURE__ */ V({
     const t = e, o = s, l = (n) => {
       o("click", n);
     };
-    return (n, u) => (y(), W(N, {
-      icon: Ee,
+    return (n, u) => (M(), $(N, {
+      icon: ze,
       items: t.languages,
       current: t.current,
       onClick: l
     }, null, 8, ["items", "current"]));
   }
-}), ze = {}, Ce = { class: "ml-status-bar" }, Be = { class: "ml-status-bar-left" }, ke = { class: "ml-status-bar-right" };
+}), Ce = {}, Be = { class: "ml-status-bar" }, ke = { class: "ml-status-bar-left" }, Te = { class: "ml-status-bar-right" };
 function $e(e, s) {
-  return y(), I("div", Ce, [
-    z("div", Be, [
+  return M(), I("div", Be, [
+    E("div", ke, [
       O(e.$slots, "left", {}, void 0, !0)
     ]),
-    z("div", ke, [
+    E("div", Te, [
       O(e.$slots, "right", {}, void 0, !0)
     ])
   ]);
 }
-const Te = /* @__PURE__ */ H(ze, [["render", $e], ["__scopeId", "data-v-d6a59cf0"]]), We = {
+const We = /* @__PURE__ */ A(Ce, [["render", $e], ["__scopeId", "data-v-d6a59cf0"]]), Ie = /* @__PURE__ */ S({
+  __name: "MlToggleButton",
+  props: /* @__PURE__ */ V({
+    size: { default: 30 },
+    data: {}
+  }, {
+    modelValue: { default: !1 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ V(["click"], ["update:modelValue"]),
+  setup(e, { emit: s }) {
+    de((a) => ({
+      "0547f26d": u.value
+    }));
+    const t = e, o = U(e, "modelValue"), l = s, n = p(() => o.value ? t.data.onIcon : t.data.offIcon), u = p(() => t.size + "px"), d = p(() => o.value ? t.data.onTooltip : t.data.offTooltip), i = () => {
+      o.value = !o.value, l("click", o.value);
+    };
+    return (a, r) => {
+      const _ = Q, c = Z;
+      return M(), $(c, {
+        content: d.value,
+        "hide-after": 0
+      }, {
+        default: B(() => [
+          D(_, {
+            class: "ml-toggle-button",
+            icon: n.value,
+            onClick: i
+          }, null, 8, ["icon"])
+        ]),
+        _: 1
+      }, 8, ["content"]);
+    };
+  }
+}), Ve = /* @__PURE__ */ A(Ie, [["__scopeId", "data-v-b676e93b"]]), De = {
   key: 0,
   class: "ml-toolbar-button-text"
-}, Ie = /* @__PURE__ */ V({
+}, Se = /* @__PURE__ */ S({
   __name: "MlToolBar",
   props: {
     items: {},
@@ -173,7 +207,7 @@ const Te = /* @__PURE__ */ H(ze, [["render", $e], ["__scopeId", "data-v-d6a59cf0
     click: null
   },
   setup(e, { emit: s }) {
-    const t = e, o = s, l = g(() => t.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), n = g(() => t.size === "small" ? 20 : 30), u = g(() => {
+    const t = e, o = s, l = p(() => t.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), n = p(() => t.size === "small" ? 20 : 30), u = p(() => {
       switch (t.size) {
         case "small":
           return 30;
@@ -181,36 +215,36 @@ const Te = /* @__PURE__ */ H(ze, [["render", $e], ["__scopeId", "data-v-d6a59cf0
           return 50;
       }
       return 70;
-    }), d = (r) => r.description ? r.description : r.text, i = g(() => t.size === "large"), a = (r) => {
+    }), d = (r) => r.description ? r.description : r.text, i = p(() => t.size === "large"), a = (r) => {
       o("click", r);
     };
-    return (r, w) => {
-      const c = A, h = ae, v = ce, f = re;
-      return y(), W(f, {
-        class: te(l.value)
+    return (r, _) => {
+      const c = H, h = Q, v = Z, f = re;
+      return M(), $(f, {
+        class: le(l.value)
       }, {
-        default: k(() => [
-          (y(!0), I(Z, null, P(r.items, (x, C) => (y(), W(v, {
+        default: B(() => [
+          (M(!0), I(R, null, ee(r.items, (x, C) => (M(), $(v, {
             key: x.text,
             content: d(x),
             "hide-after": 0
           }, {
-            default: k(() => [
-              (y(), W(h, {
+            default: B(() => [
+              (M(), $(h, {
                 class: "ml-toolbar-button",
                 style: X({ width: u.value + "px", height: u.value + "px" }),
                 key: C,
-                onClick: (B) => a(x.command)
+                onClick: (k) => a(x.command)
               }, {
-                default: k(() => [
-                  z("div", null, [
-                    S(c, { size: n.value }, {
-                      default: k(() => [
-                        (y(), W(Q(x.icon)))
+                default: B(() => [
+                  E("div", null, [
+                    D(c, { size: n.value }, {
+                      default: B(() => [
+                        (M(), $(P(x.icon)))
                       ]),
                       _: 2
                     }, 1032, ["size"]),
-                    i.value ? (y(), I("div", We, U(x.text), 1)) : ne("", !0)
+                    i.value ? (M(), I("div", De, F(x.text), 1)) : oe("", !0)
                   ])
                 ]),
                 _: 2
@@ -223,8 +257,8 @@ const Te = /* @__PURE__ */ H(ze, [["render", $e], ["__scopeId", "data-v-d6a59cf0
       }, 8, ["class"]);
     };
   }
-}), De = /* @__PURE__ */ H(Ie, [["__scopeId", "data-v-d5511111"]]), J = 20;
-function Se(e, s, t) {
+}), Ye = /* @__PURE__ */ A(Se, [["__scopeId", "data-v-5261c686"]]), K = 20;
+function Ae(e, s, t) {
   const o = m(!1), l = (i) => {
     if (t.value && e.value) {
       const a = e.value.getBoundingClientRect(), r = i.clientX < a.left || i.clientX > a.right || i.clientY < a.top || i.clientY > a.bottom;
@@ -237,9 +271,9 @@ function Se(e, s, t) {
   }, d = () => {
     s.value && s.value.removeEventListener("mousemove", n), e.value && e.value.removeEventListener("mousemove", n);
   };
-  return D(() => {
+  return Y(() => {
     window.addEventListener("mousemove", l);
-  }), F(() => {
+  }), G(() => {
     window.removeEventListener("mousemove", l);
   }), L(t, (i) => {
     i && (o.value = !1);
@@ -247,8 +281,8 @@ function Se(e, s, t) {
     i ? u() : d();
   }), { autoOpened: o };
 }
-function Ve(e, s, t) {
-  const o = m(!1), l = m(null), n = m(null), u = { x: 0, y: 0 }, d = g(() => l.value == null || n.value == null ? { x: 0, y: 0 } : {
+function He(e, s, t) {
+  const o = m(!1), l = m(null), n = m(null), u = { x: 0, y: 0 }, d = p(() => l.value == null || n.value == null ? { x: 0, y: 0 } : {
     x: l.value.x - n.value.x,
     y: l.value.y - n.value.y
   }), i = () => {
@@ -263,10 +297,10 @@ function Ve(e, s, t) {
       };
     }
   }, a = () => {
-    e.value && e.value.addEventListener("mousedown", w);
+    e.value && e.value.addEventListener("mousedown", _);
   }, r = () => {
-    e.value && e.value.removeEventListener("mousedown", w);
-  }, w = (v) => {
+    e.value && e.value.removeEventListener("mousedown", _);
+  }, _ = (v) => {
     if (e.value != null) {
       if (s && s.value) {
         const f = s.value.getBoundingClientRect();
@@ -276,32 +310,32 @@ function Ve(e, s, t) {
     }
   }, c = (v) => {
     if (o.value && n.value && l.value) {
-      const f = window.innerWidth, x = window.innerHeight, C = e.value, B = C.getBoundingClientRect(), b = B.width, p = B.height, T = n.value.x + (v.clientX - u.x), E = n.value.y + (v.clientY - u.y);
+      const f = window.innerWidth, x = window.innerHeight, C = e.value, k = C.getBoundingClientRect(), z = k.width, w = k.height, W = n.value.x + (v.clientX - u.x), y = n.value.y + (v.clientY - u.y);
       l.value.x = Math.max(
         t ? t.value.offset.value.left : 0,
-        T
+        W
       );
-      const _ = f - b;
+      const g = f - z;
       l.value.x = Math.min(
-        t ? _ - t.value.offset.value.right : _,
+        t ? g - t.value.offset.value.right : g,
         l.value.x
       ), l.value.y = Math.max(
         t ? t.value.offset.value.top : 0,
-        Math.min(E, x - p)
+        Math.min(y, x - w)
       );
-      const M = x - p;
+      const b = x - w;
       l.value.y = Math.min(
-        t ? M - t.value.offset.value.bottom : M,
+        t ? b - t.value.offset.value.bottom : b,
         l.value.y
       ), C.style.left = l.value.x + "px", C.style.top = l.value.y + "px";
     }
   }, h = () => {
     o.value = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", h);
   };
-  return D(() => {
+  return Y(() => {
     e.value && (i(), a());
-  }), F(() => {
-    e.value && e.value.removeEventListener("mousedown", w);
+  }), G(() => {
+    e.value && e.value.removeEventListener("mousedown", _);
   }), L(e, (v) => {
     v ? (i(), a()) : r();
   }), {
@@ -310,8 +344,8 @@ function Ve(e, s, t) {
     position: l
   };
 }
-function Ye(e, s, t) {
-  const o = m(!1), l = m("left"), { isDragging: n, movement: u, position: d } = Ve(
+function Oe(e, s, t) {
+  const o = m(!1), l = m("left"), { isDragging: n, movement: u, position: d } = He(
     e,
     s,
     t
@@ -329,7 +363,7 @@ function Ye(e, s, t) {
     position: d
   };
 }
-function Ae(e, s, t, o) {
+function Xe(e, s, t, o) {
   const l = m(null), n = m(null), u = m(null), d = m(null);
   return L(e, (i, a) => {
     l.value = a;
@@ -346,15 +380,15 @@ function Ae(e, s, t, o) {
     lastHeight: d
   };
 }
-function He(e, s, t, o) {
-  const l = m(e.value.width), n = m(e.value.left), u = g(() => e.value.width), d = g(() => e.value.left), i = g(() => t.value ? t.value.x : null);
+function Ne(e, s, t, o) {
+  const l = m(e.value.width), n = m(e.value.left), u = p(() => e.value.width), d = p(() => e.value.left), i = p(() => t.value ? t.value.x : null);
   return L([u, d], ([a, r]) => {
     (l.value == null || n.value == null || s.value) && (l.value = a, n.value = r);
   }), L(i, (a) => {
     o.value && t.value && (n.value = a);
   }), { left: n, width: l };
 }
-function Oe(e, s = m({ left: 0, right: 0, top: 0, bottom: 0 })) {
+function Ue(e, s = m({ left: 0, right: 0, top: 0, bottom: 0 })) {
   const t = m({});
   let o = !1;
   const l = () => {
@@ -363,7 +397,7 @@ function Oe(e, s = m({ left: 0, right: 0, top: 0, bottom: 0 })) {
       t.value.left = Math.max(n.left, s.value.left), t.value.top = Math.max(n.top, s.value.top), t.value.width = n.width, t.value.height = n.height, o = !0;
     }
   };
-  return D(() => {
+  return Y(() => {
     e.value && l();
   }), L(e, (n) => {
     n && l();
@@ -372,49 +406,49 @@ function Oe(e, s = m({ left: 0, right: 0, top: 0, bottom: 0 })) {
     initialRect: t
   };
 }
-function Xe(e, s = m(!1), t = m(!1), o = m({ left: 0, right: 0, top: 0, bottom: 0 }), l = { width: 20, height: 40 }) {
-  const { initialRect: n } = Oe(e, o), u = m(!1);
-  let d = 0, i = 0, a = 0, r = 0, w = 0;
-  const c = 5, h = m(null), v = (b) => {
+function Fe(e, s = m(!1), t = m(!1), o = m({ left: 0, right: 0, top: 0, bottom: 0 }), l = { width: 20, height: 40 }) {
+  const { initialRect: n } = Ue(e, o), u = m(!1);
+  let d = 0, i = 0, a = 0, r = 0, _ = 0;
+  const c = 5, h = m(null), v = (z) => {
     if (!(!e.value || s.value))
       if (u.value) {
-        const p = b.clientX - r, T = b.clientY - w;
+        const w = z.clientX - r, W = z.clientY - _;
         if (h.value === "left" || h.value === "left-bottom-corner") {
-          const E = i - p;
-          E > l.width && (n.value.width = E, n.value.left = d + p, e.value.style.left = n.value.left + "px", e.value.style.width = n.value.width + "px");
+          const y = i - w;
+          y > l.width && (n.value.width = y, n.value.left = d + w, e.value.style.left = n.value.left + "px", e.value.style.width = n.value.width + "px");
         }
         if (h.value === "right" || h.value === "right-bottom-corner") {
-          const E = i + p;
-          E > l.width && (n.value.width = E, e.value.style.width = n.value.width + "px");
+          const y = i + w;
+          y > l.width && (n.value.width = y, e.value.style.width = n.value.width + "px");
         }
         if (h.value === "bottom" || h.value === "left-bottom-corner" || h.value === "right-bottom-corner") {
-          const E = a + T;
-          E > l.height && (n.value.height = E, e.value.style.height = n.value.height + "px");
+          const y = a + W;
+          y > l.height && (n.value.height = y, e.value.style.height = n.value.height + "px");
         }
       } else {
-        const p = e.value.getBoundingClientRect(), T = b.clientX - p.left, E = b.clientY - p.top, _ = T <= c, M = T >= p.width - c, $ = E >= p.height - c;
-        _ && $ && t.value ? (e.value.style.cursor = "nesw-resize", h.value = "left-bottom-corner") : M && $ && !t.value ? (e.value.style.cursor = "nwse-resize", h.value = "right-bottom-corner") : _ && t.value ? (e.value.style.cursor = "ew-resize", h.value = "left") : M && !t.value ? (e.value.style.cursor = "ew-resize", h.value = "right") : $ ? (e.value.style.cursor = "ns-resize", h.value = "bottom") : (e.value.style.cursor = "", h.value = null);
+        const w = e.value.getBoundingClientRect(), W = z.clientX - w.left, y = z.clientY - w.top, g = W <= c, b = W >= w.width - c, T = y >= w.height - c;
+        g && T && t.value ? (e.value.style.cursor = "nesw-resize", h.value = "left-bottom-corner") : b && T && !t.value ? (e.value.style.cursor = "nwse-resize", h.value = "right-bottom-corner") : g && t.value ? (e.value.style.cursor = "ew-resize", h.value = "left") : b && !t.value ? (e.value.style.cursor = "ew-resize", h.value = "right") : T ? (e.value.style.cursor = "ns-resize", h.value = "bottom") : (e.value.style.cursor = "", h.value = null);
       }
-  }, f = (b) => {
+  }, f = (z) => {
     if (!e.value || !h.value) return;
-    const p = e.value.getBoundingClientRect();
-    r = b.clientX, w = b.clientY, i = p.width, a = p.height, d = p.left, n.value.width = i, n.value.height = a, n.value.left = p.left, n.value.top = p.top, u.value = !0, document.addEventListener("mousemove", v), document.addEventListener("mouseup", x);
+    const w = e.value.getBoundingClientRect();
+    r = z.clientX, _ = z.clientY, i = w.width, a = w.height, d = w.left, n.value.width = i, n.value.height = a, n.value.left = w.left, n.value.top = w.top, u.value = !0, document.addEventListener("mousemove", v), document.addEventListener("mouseup", x);
   }, x = () => {
     u.value = !1, h.value = null, e.value && (e.value.style.cursor = ""), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", x);
   }, C = () => {
     e.value && (e.value.removeEventListener("mousedown", f), e.value.removeEventListener("mousemove", v)), document.removeEventListener("mouseup", x);
-  }, B = () => {
+  }, k = () => {
     e.value && (e.value.addEventListener("mousedown", f), e.value.addEventListener("mousemove", v));
   };
-  return D(() => {
-    e.value && B();
-  }), le(() => {
+  return Y(() => {
+    e.value && k();
+  }), se(() => {
     C();
-  }), L(e, (b) => {
-    b ? B() : C();
+  }), L(e, (z) => {
+    z ? k() : C();
   }), { rect: n, isResizing: u };
 }
-function Ne(e, s, t, o) {
+function Ge(e, s, t, o) {
   const l = () => {
     if (e.value) {
       const i = e.value;
@@ -427,9 +461,9 @@ function Ne(e, s, t, o) {
   }, d = () => {
     e.value && e.value.addEventListener("transitionend", n);
   };
-  D(() => {
+  Y(() => {
     e.value && e.value.addEventListener("transitionend", n);
-  }), le(() => {
+  }), se(() => {
     e.value && e.value.removeEventListener("transitionend", n);
   }), L(e, (i) => {
     i ? d() : u();
@@ -439,78 +473,78 @@ function Ne(e, s, t, o) {
     l();
   });
 }
-function Ue(e, s, t, o) {
-  const l = m(window.innerWidth), n = m(window.innerHeight), { docked: u, orientation: d, movement: i, position: a, isDragging: r } = Ye(
+function je(e, s, t, o) {
+  const l = m(window.innerWidth), n = m(window.innerHeight), { docked: u, orientation: d, movement: i, position: a, isDragging: r } = Oe(
     e,
     s,
     o
-  ), w = g(() => d.value === "right"), { rect: c, isResizing: h } = Xe(
+  ), _ = p(() => d.value === "right"), { rect: c, isResizing: h } = Fe(
     e,
     t,
-    w,
+    _,
     o.value.offset
-  ), { width: v, left: f } = He(
+  ), { width: v, left: f } = Ne(
     c,
     h,
     a,
     r
-  ), { lastTop: x, lastHeight: C } = Ae(
-    g(() => c.value.left),
-    g(() => c.value.top),
-    g(() => c.value.width),
-    g(() => c.value.height)
-  ), { autoOpened: B } = Se(e, s, t);
-  Ne(e, w, t, B);
-  const b = (_) => {
+  ), { lastTop: x, lastHeight: C } = Xe(
+    p(() => c.value.left),
+    p(() => c.value.top),
+    p(() => c.value.width),
+    p(() => c.value.height)
+  ), { autoOpened: k } = Ae(e, s, t);
+  Ge(e, _, t, k);
+  const z = (g) => {
     if (e.value) {
-      const M = e.value.getBoundingClientRect(), $ = M.left + _;
-      if (w.value) {
-        c.value.left = $;
-        const oe = window.innerWidth - M.width - M.left;
-        M.left <= 0 && oe >= 0 && _ < 0 && (c.value.left = Math.max(0, $)), window.innerWidth - M.width <= 0 && (c.value.left = window.innerWidth - M.width);
+      const b = e.value.getBoundingClientRect(), T = b.left + g;
+      if (_.value) {
+        c.value.left = T;
+        const ie = window.innerWidth - b.width - b.left;
+        b.left <= 0 && ie >= 0 && g < 0 && (c.value.left = Math.max(0, T)), window.innerWidth - b.width <= 0 && (c.value.left = window.innerWidth - b.width);
       } else
-        M.left + M.width >= window.innerWidth && _ < 0 && (c.value.left = Math.max(0, $));
+        b.left + b.width >= window.innerWidth && g < 0 && (c.value.left = Math.max(0, T));
     }
-  }, p = () => {
-    const _ = window.innerWidth - l.value;
-    l.value = window.innerWidth, n.value = window.innerHeight, b(_);
+  }, w = () => {
+    const g = window.innerWidth - l.value;
+    l.value = window.innerWidth, n.value = window.innerHeight, z(g);
   };
-  D(() => {
-    window.addEventListener("resize", p);
-  }), F(() => {
-    window.removeEventListener("resize", p);
+  Y(() => {
+    window.addEventListener("resize", w);
+  }), G(() => {
+    window.removeEventListener("resize", w);
   });
-  const T = (_) => {
-    _ ? (c.value.width = J, w.value && f.value && v.value && (c.value.left = f.value + v.value - J)) : (c.value.width = v.value, w.value && f.value && v.value && (c.value.left = f.value));
-  }, E = () => {
+  const W = (g) => {
+    g ? (c.value.width = K, _.value && f.value && v.value && (c.value.left = f.value + v.value - K)) : (c.value.width = v.value, _.value && f.value && v.value && (c.value.left = f.value));
+  }, y = () => {
     u.value ? (c.value.top = o.value.offset.value.top, c.value.height = window.innerHeight - o.value.offset.value.top - o.value.offset.value.bottom) : (c.value.top = x.value, c.value.height = C.value);
   };
   return L(u, () => {
-    E();
-  }), L(t, (_) => {
-    T(_);
-  }), L(B, (_) => {
-    t.value && !r.value && T(!_);
-  }), L(i, (_) => {
-    if (_ && e.value) {
-      const $ = e.value.getBoundingClientRect();
-      c.value.left = $.left, c.value.top = $.top;
+    y();
+  }), L(t, (g) => {
+    W(g);
+  }), L(k, (g) => {
+    t.value && !r.value && W(!g);
+  }), L(i, (g) => {
+    if (g && e.value) {
+      const T = e.value.getBoundingClientRect();
+      c.value.left = T.left, c.value.top = T.top;
     }
-  }), { rect: c, orientation: d, reversed: w };
+  }), { rect: c, orientation: d, reversed: _ };
 }
-const Fe = (e) => (R("data-v-11a64c54"), e = e(), ee(), e), Ge = /* @__PURE__ */ Fe(() => /* @__PURE__ */ z("svg", {
+const qe = (e) => (te("data-v-8645db4f"), e = e(), ne(), e), Je = /* @__PURE__ */ qe(() => /* @__PURE__ */ E("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
 }, [
-  /* @__PURE__ */ z("path", {
+  /* @__PURE__ */ E("path", {
     fill: "currentColor",
     d: "M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
   })
-], -1)), je = { class: "ml-tool-palette-title" }, qe = { class: "ml-tool-palette-content" }, Je = /* @__PURE__ */ V({
+], -1)), Ke = { class: "ml-tool-palette-title" }, Qe = { class: "ml-tool-palette-content" }, Ze = /* @__PURE__ */ S({
   __name: "MlToolPalette",
-  props: /* @__PURE__ */ Y({
+  props: /* @__PURE__ */ V({
     title: { default: "" },
     leftOffset: { default: 0 },
     rightOffset: { default: 0 },
@@ -520,9 +554,9 @@ const Fe = (e) => (R("data-v-11a64c54"), e = e(), ee(), e), Ge = /* @__PURE__ */
     modelValue: { default: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ Y(["close"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ V(["close"], ["update:modelValue"]),
   setup(e, { emit: s }) {
-    const t = e, o = K(e, "modelValue"), l = s, n = m(!1), u = m(null), d = m(null), i = g(() => ({
+    const t = e, o = U(e, "modelValue"), l = s, n = m(!1), u = m(null), d = m(null), i = p(() => ({
       offset: m({
         left: t.leftOffset,
         right: t.rightOffset,
@@ -532,13 +566,13 @@ const Fe = (e) => (R("data-v-11a64c54"), e = e(), ee(), e), Ge = /* @__PURE__ */
     })), {
       rect: a,
       orientation: r,
-      reversed: w
-    } = Ue(d, u, n, i), c = g(() => ({
+      reversed: _
+    } = je(d, u, n, i), c = p(() => ({
       left: `${a.value.left}px`,
       top: `${a.value.top}px`,
       width: `${a.value.width}px`,
       height: `${a.value.height}px`
-    })), h = g(() => w.value ? {
+    })), h = p(() => _.value ? {
       borderLeft: "1px solid var(--el-border-color)",
       borderRight: null
     } : {
@@ -553,60 +587,61 @@ const Fe = (e) => (R("data-v-11a64c54"), e = e(), ee(), e), Ge = /* @__PURE__ */
       });
     };
     return (f, x) => {
-      const C = A;
-      return o.value ? (y(), I("div", {
+      const C = H;
+      return o.value ? (M(), I("div", {
         key: 0,
         ref_key: "toolPaletteElement",
         ref: d,
         style: X([c.value]),
         class: "ml-tool-palette-dialog"
       }, [
-        z("div", {
-          class: te(["ml-tool-palette-dialog-layout", G(r)])
+        E("div", {
+          class: le(["ml-tool-palette-dialog-layout", j(r)])
         }, [
-          z("div", {
+          E("div", {
             ref_key: "titleBarElement",
             ref: u,
             class: "ml-tool-palette-title-bar",
             style: X(h.value)
           }, [
-            S(C, {
+            D(C, {
               size: 18,
               class: "ml-tool-palette-dialog-icon",
               onClick: v
             }, {
-              default: k(() => [
-                Ge
+              default: B(() => [
+                Je
               ]),
               _: 1
             }),
-            S(Le, {
+            D(xe, {
               class: "ml-tool-palette-dialog-icon",
               modelValue: n.value,
-              "onUpdate:modelValue": x[0] || (x[0] = (B) => n.value = B),
-              reverse: G(w)
+              "onUpdate:modelValue": x[0] || (x[0] = (k) => n.value = k),
+              reverse: j(_)
             }, null, 8, ["modelValue", "reverse"]),
-            z("span", je, U(t.title), 1)
+            E("span", Ke, F(t.title), 1)
           ], 4),
-          z("div", qe, [
+          E("div", Qe, [
             O(f.$slots, "default", {}, void 0, !0)
           ])
         ], 2)
-      ], 4)) : ne("", !0);
+      ], 4)) : oe("", !0);
     };
   }
-}), Ke = /* @__PURE__ */ H(Je, [["__scopeId", "data-v-11a64c54"]]), it = {
+}), Pe = /* @__PURE__ */ A(Ze, [["__scopeId", "data-v-8645db4f"]]), ct = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   install(e) {
-    e.component("MlCollapse", N), e.component("MlDropdown", N), e.component("MlLanguage", be), e.component("MlStatusBar", Te), e.component("MlToolBar", De), e.component("MlToolPalette", Ke);
+    e.component("MlCollapse", N), e.component("MlDropdown", N), e.component("MlLanguage", Ee), e.component("MlStatusBar", We), e.component("MlToggleButton", Ve), e.component("MlToolBar", Ye), e.component("MlToolPalette", Pe);
   }
 };
 export {
-  Le as MlCollapse,
+  xe as MlCollapse,
   N as MlDropdown,
-  be as MlLanguage,
-  Te as MlStatusBar,
-  De as MlToolBar,
-  Ke as MlToolPalette,
-  it as default
+  Ee as MlLanguage,
+  We as MlStatusBar,
+  Ve as MlToggleButton,
+  Ye as MlToolBar,
+  Pe as MlToolPalette,
+  ct as default
 };

package/dist/ui-components.umd.js

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-vertical-toolbar-button-group[data-v-d5511111]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-d5511111]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-d5511111]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-d5511111]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-11a64c54]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-tool-palette-dialog-icon[data-v-11a64c54]{border-bottom:1px solid var(--el-border-color)}.ml-tool-palette-dialog-layout[data-v-11a64c54]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-11a64c54]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;background-color:var(--el-fill-color)}.ml-tool-palette-title[data-v-11a64c54]{pointer-events:none;margin-top:10px;margin-bottom:10px;font-size:small;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-tool-palette-content[data-v-11a64c54]{-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;background-color:var(--el-fill-color);overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-11a64c54]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-11a64c54],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-11a64c54]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-11a64c54]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-(function(L,x){typeof exports=="object"&&typeof module<"u"?x(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/icon/style/css"),require("vue"),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/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/icon/style/css","vue","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/button-group/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css"],x):(L=typeof globalThis<"u"?globalThis:L||self,x(L.UIComponents={},L.es,null,null,L.Vue))})(this,function(L,x,pe,fe,e){"use strict";const Y={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},A=[e.createElementVNode("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"},null,-1)];function H(t,i){return e.openBlock(),e.createElementBlock("svg",Y,[...A])}const $={render:H},X={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},q=[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"},null,-1)];function U(t,i){return e.openBlock(),e.createElementBlock("svg",X,[...q])}const T={render:U},S=e.defineComponent({__name:"MlCollapse",props:e.mergeModels({size:{default:18},reverse:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(t,{emit:i}){const n=t,s=e.useModel(t,"modelValue"),l=i,o=e.computed(()=>n.reverse?s.value?$:T:s.value?T:$),c=e.computed(()=>`${n.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(a,r)=>{const d=x.ElIcon;return e.openBlock(),e.createBlock(d,{size:c.value,onClick:h},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.value)))]),_:1},8,["size"])}}}),F=(t=>(e.pushScopeId("data-v-3fc33b5d"),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)),j=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:i}){const n=t,s=i,l=e.computed(()=>n.items.filter(c=>c.name!==n.current)),o=c=>{s("click",c)};return(c,h)=>{const a=x.ElIcon,r=x.ElDropdownItem,d=x.ElDropdownMenu,w=x.ElDropdown;return e.openBlock(),e.createBlock(w,{onCommand:o},{dropdown:e.withCtx(()=>[e.createVNode(d,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,u=>(e.openBlock(),e.createBlock(r,{key:u.text,command:u.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.text),1)]),_:2},1032,["command"]))),128))]),_:1})]),default:e.withCtx(()=>[e.createVNode(a,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[F]),_:1})]),_:1})}}}),z=(t,i)=>{const n=t.__vccOpts||t;for(const[s,l]of i)n[s]=l;return n},V=z(j,[["__scopeId","data-v-3fc33b5d"]]),G='<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>',I=e.defineComponent({__name:"MlLanguage",props:{languages:{},current:{}},emits:{click:null},setup(t,{emit:i}){const n=t,s=i,l=o=>{s("click",o)};return(o,c)=>(e.openBlock(),e.createBlock(V,{icon:G,items:n.languages,current:n.current,onClick:l},null,8,["items","current"]))}}),J={},K={class:"ml-status-bar"},Q={class:"ml-status-bar-left"},Z={class:"ml-status-bar-right"};function P(t,i){return e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",Q,[e.renderSlot(t.$slots,"left",{},void 0,!0)]),e.createElementVNode("div",Z,[e.renderSlot(t.$slots,"right",{},void 0,!0)])])}const N=z(J,[["render",P],["__scopeId","data-v-d6a59cf0"]]),R={key:0,class:"ml-toolbar-button-text"},W=z(e.defineComponent({__name:"MlToolBar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(t,{emit:i}){const n=t,s=i,l=e.computed(()=>n.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),o=e.computed(()=>n.size==="small"?20:30),c=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),h=d=>d.description?d.description:d.text,a=e.computed(()=>n.size==="large"),r=d=>{s("click",d)};return(d,w)=>{const u=x.ElIcon,p=x.ElButton,m=x.ElTooltip,f=x.ElButtonGroup;return e.openBlock(),e.createBlock(f,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.items,(g,M)=>(e.openBlock(),e.createBlock(m,{key:g.text,content:h(g),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(p,{class:"ml-toolbar-button",style:e.normalizeStyle({width:c.value+"px",height:c.value+"px"}),key:M,onClick:k=>r(g.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(u,{size:o.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.icon)))]),_:2},1032,["size"]),a.value?(e.openBlock(),e.createElementBlock("div",R,e.toDisplayString(g.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-d5511111"]]),D=20;function ee(t,i,n){const s=e.ref(!1),l=a=>{if(n.value&&t.value){const r=t.value.getBoundingClientRect(),d=a.clientX<r.left||a.clientX>r.right||a.clientY<r.top||a.clientY>r.bottom;s.value=!d}},o=()=>{n.value&&(s.value=!0)},c=()=>{i.value&&i.value.addEventListener("mousemove",o),t.value&&t.value.addEventListener("mousemove",o)},h=()=>{i.value&&i.value.removeEventListener("mousemove",o),t.value&&t.value.removeEventListener("mousemove",o)};return e.onMounted(()=>{window.addEventListener("mousemove",l)}),e.onUnmounted(()=>{window.removeEventListener("mousemove",l)}),e.watch(n,a=>{a&&(s.value=!1)}),e.watch(t,a=>{a?c():h()}),{autoOpened:s}}function te(t,i,n){const s=e.ref(!1),l=e.ref(null),o=e.ref(null),c={x:0,y:0},h=e.computed(()=>l.value==null||o.value==null?{x:0,y:0}:{x:l.value.x-o.value.x,y:l.value.y-o.value.y}),a=()=>{if(t.value){const m=t.value.getBoundingClientRect();o.value={x:m.left,y:m.top},l.value={x:m.left,y:m.top}}},r=()=>{t.value&&t.value.addEventListener("mousedown",w)},d=()=>{t.value&&t.value.removeEventListener("mousedown",w)},w=m=>{if(t.value!=null){if(i&&i.value){const f=i.value.getBoundingClientRect();if(m.clientX<f.left||m.clientX>f.right||m.clientY<f.top||m.clientY>f.bottom)return}s.value=!0,c.x=m.clientX,c.y=m.clientY,a(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",p)}},u=m=>{if(s.value&&o.value&&l.value){const f=window.innerWidth,g=window.innerHeight,M=t.value,k=M.getBoundingClientRect(),E=k.width,v=k.height,b=o.value.x+(m.clientX-c.x),B=o.value.y+(m.clientY-c.y);l.value.x=Math.max(n?n.value.offset.value.left:0,b);const _=f-E;l.value.x=Math.min(n?_-n.value.offset.value.right:_,l.value.x),l.value.y=Math.max(n?n.value.offset.value.top:0,Math.min(B,g-v));const y=g-v;l.value.y=Math.min(n?y-n.value.offset.value.bottom:y,l.value.y),M.style.left=l.value.x+"px",M.style.top=l.value.y+"px"}},p=()=>{s.value=!1,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",p)};return e.onMounted(()=>{t.value&&(a(),r())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",w)}),e.watch(t,m=>{m?(a(),r()):d()}),{isDragging:s,movement:h,position:l}}function ne(t,i,n){const s=e.ref(!1),l=e.ref("left"),{isDragging:o,movement:c,position:h}=te(t,i,n);return e.watch(c,a=>{if(a&&t.value){const d=t.value.getBoundingClientRect();d.left<=n.value.offset.value.left?(l.value="left",s.value=!0):window.innerWidth-d.left-d.width<=n.value.offset.value.right?(l.value="right",s.value=!0):s.value=!1}}),{docked:s,orientation:l,isDragging:o,movement:c,position:h}}function oe(t,i,n,s){const l=e.ref(null),o=e.ref(null),c=e.ref(null),h=e.ref(null);return e.watch(t,(a,r)=>{l.value=r}),e.watch(i,(a,r)=>{o.value=r}),e.watch(n,(a,r)=>{c.value=r}),e.watch(s,(a,r)=>{h.value=r}),{lastLeft:l,lastTop:o,lastWidth:c,lastHeight:h}}function le(t,i,n,s){const l=e.ref(t.value.width),o=e.ref(t.value.left),c=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),a=e.computed(()=>n.value?n.value.x:null);return e.watch([c,h],([r,d])=>{(l.value==null||o.value==null||i.value)&&(l.value=r,o.value=d)}),e.watch(a,r=>{s.value&&n.value&&(o.value=r)}),{left:o,width:l}}function se(t,i=e.ref({left:0,right:0,top:0,bottom:0})){const n=e.ref({});let s=!1;const l=()=>{if(!s&&t.value){const o=t.value.getBoundingClientRect();n.value.left=Math.max(o.left,i.value.left),n.value.top=Math.max(o.top,i.value.top),n.value.width=o.width,n.value.height=o.height,s=!0}};return e.onMounted(()=>{t.value&&l()}),e.watch(t,o=>{o&&l()}),{isIntialized:s,initialRect:n}}function ie(t,i=e.ref(!1),n=e.ref(!1),s=e.ref({left:0,right:0,top:0,bottom:0}),l={width:20,height:40}){const{initialRect:o}=se(t,s),c=e.ref(!1);let h=0,a=0,r=0,d=0,w=0;const u=5,p=e.ref(null),m=E=>{if(!(!t.value||i.value))if(c.value){const v=E.clientX-d,b=E.clientY-w;if(p.value==="left"||p.value==="left-bottom-corner"){const B=a-v;B>l.width&&(o.value.width=B,o.value.left=h+v,t.value.style.left=o.value.left+"px",t.value.style.width=o.value.width+"px")}if(p.value==="right"||p.value==="right-bottom-corner"){const B=a+v;B>l.width&&(o.value.width=B,t.value.style.width=o.value.width+"px")}if(p.value==="bottom"||p.value==="left-bottom-corner"||p.value==="right-bottom-corner"){const B=r+b;B>l.height&&(o.value.height=B,t.value.style.height=o.value.height+"px")}}else{const v=t.value.getBoundingClientRect(),b=E.clientX-v.left,B=E.clientY-v.top,_=b<=u,y=b>=v.width-u,C=B>=v.height-u;_&&C&&n.value?(t.value.style.cursor="nesw-resize",p.value="left-bottom-corner"):y&&C&&!n.value?(t.value.style.cursor="nwse-resize",p.value="right-bottom-corner"):_&&n.value?(t.value.style.cursor="ew-resize",p.value="left"):y&&!n.value?(t.value.style.cursor="ew-resize",p.value="right"):C?(t.value.style.cursor="ns-resize",p.value="bottom"):(t.value.style.cursor="",p.value=null)}},f=E=>{if(!t.value||!p.value)return;const v=t.value.getBoundingClientRect();d=E.clientX,w=E.clientY,a=v.width,r=v.height,h=v.left,o.value.width=a,o.value.height=r,o.value.left=v.left,o.value.top=v.top,c.value=!0,document.addEventListener("mousemove",m),document.addEventListener("mouseup",g)},g=()=>{c.value=!1,p.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",g)},M=()=>{t.value&&(t.value.removeEventListener("mousedown",f),t.value.removeEventListener("mousemove",m)),document.removeEventListener("mouseup",g)},k=()=>{t.value&&(t.value.addEventListener("mousedown",f),t.value.addEventListener("mousemove",m))};return e.onMounted(()=>{t.value&&k()}),e.onBeforeUnmount(()=>{M()}),e.watch(t,E=>{E?k():M()}),{rect:o,isResizing:c}}function ae(t,i,n,s){const l=()=>{if(t.value){const a=t.value;i.value?a.style.transition="width 0.3s ease-out, left 0.3s ease-out":a.style.transition="width 0.3s ease"}},o=()=>{t.value&&(t.value.style.transition="")},c=()=>{t.value&&t.value.removeEventListener("transitionend",o)},h=()=>{t.value&&t.value.addEventListener("transitionend",o)};e.onMounted(()=>{t.value&&t.value.addEventListener("transitionend",o)}),e.onBeforeUnmount(()=>{t.value&&t.value.removeEventListener("transitionend",o)}),e.watch(t,a=>{a?h():c()}),e.watch(n,()=>{l()}),e.watch(s,()=>{l()})}function ce(t,i,n,s){const l=e.ref(window.innerWidth),o=e.ref(window.innerHeight),{docked:c,orientation:h,movement:a,position:r,isDragging:d}=ne(t,i,s),w=e.computed(()=>h.value==="right"),{rect:u,isResizing:p}=ie(t,n,w,s.value.offset),{width:m,left:f}=le(u,p,r,d),{lastTop:g,lastHeight:M}=oe(e.computed(()=>u.value.left),e.computed(()=>u.value.top),e.computed(()=>u.value.width),e.computed(()=>u.value.height)),{autoOpened:k}=ee(t,i,n);ae(t,w,n,k);const E=_=>{if(t.value){const y=t.value.getBoundingClientRect(),C=y.left+_;if(w.value){u.value.left=C;const he=window.innerWidth-y.width-y.left;y.left<=0&&he>=0&&_<0&&(u.value.left=Math.max(0,C)),window.innerWidth-y.width<=0&&(u.value.left=window.innerWidth-y.width)}else y.left+y.width>=window.innerWidth&&_<0&&(u.value.left=Math.max(0,C))}},v=()=>{const _=window.innerWidth-l.value;l.value=window.innerWidth,o.value=window.innerHeight,E(_)};e.onMounted(()=>{window.addEventListener("resize",v)}),e.onUnmounted(()=>{window.removeEventListener("resize",v)});const b=_=>{_?(u.value.width=D,w.value&&f.value&&m.value&&(u.value.left=f.value+m.value-D)):(u.value.width=m.value,w.value&&f.value&&m.value&&(u.value.left=f.value))},B=()=>{c.value?(u.value.top=s.value.offset.value.top,u.value.height=window.innerHeight-s.value.offset.value.top-s.value.offset.value.bottom):(u.value.top=g.value,u.value.height=M.value)};return e.watch(c,()=>{B()}),e.watch(n,_=>{b(_)}),e.watch(k,_=>{n.value&&!d.value&&b(!_)}),e.watch(a,_=>{if(_&&t.value){const C=t.value.getBoundingClientRect();u.value.left=C.left,u.value.top=C.top}}),{rect:u,orientation:h,reversed:w}}const re=(t=>(e.pushScopeId("data-v-11a64c54"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"})],-1)),ue={class:"ml-tool-palette-title"},de={class:"ml-tool-palette-content"},O=z(e.defineComponent({__name:"MlToolPalette",props:e.mergeModels({title:{default:""},leftOffset:{default:0},rightOffset:{default:0},topOffset:{default:0},bottomOffset:{default:0}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["close"],["update:modelValue"]),setup(t,{emit:i}){const n=t,s=e.useModel(t,"modelValue"),l=i,o=e.ref(!1),c=e.ref(null),h=e.ref(null),a=e.computed(()=>({offset:e.ref({left:n.leftOffset,right:n.rightOffset,top:n.topOffset,bottom:n.bottomOffset})})),{rect:r,orientation:d,reversed:w}=ce(h,c,o,a),u=e.computed(()=>({left:`${r.value.left}px`,top:`${r.value.top}px`,width:`${r.value.width}px`,height:`${r.value.height}px`})),p=e.computed(()=>w.value?{borderLeft:"1px solid var(--el-border-color)",borderRight:null}:{borderLeft:null,borderRight:"1px solid var(--el-border-color)"}),m=()=>{s.value=!1;const f=h.value;l("close",{x:f?f.clientLeft:0,y:f?f.clientTop:0})};return(f,g)=>{const M=x.ElIcon;return s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:h,style:e.normalizeStyle([u.value]),class:"ml-tool-palette-dialog"},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(d)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:c,class:"ml-tool-palette-title-bar",style:e.normalizeStyle(p.value)},[e.createVNode(M,{size:18,class:"ml-tool-palette-dialog-icon",onClick:m},{default:e.withCtx(()=>[re]),_:1}),e.createVNode(S,{class:"ml-tool-palette-dialog-icon",modelValue:o.value,"onUpdate:modelValue":g[0]||(g[0]=k=>o.value=k),reverse:e.unref(w)},null,8,["modelValue","reverse"]),e.createElementVNode("span",ue,e.toDisplayString(n.title),1)],4),e.createElementVNode("div",de,[e.renderSlot(f.$slots,"default",{},void 0,!0)])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-11a64c54"]]),me={install(t){t.component("MlCollapse",V),t.component("MlDropdown",V),t.component("MlLanguage",I),t.component("MlStatusBar",N),t.component("MlToolBar",W),t.component("MlToolPalette",O)}};L.MlCollapse=S,L.MlDropdown=V,L.MlLanguage=I,L.MlStatusBar=N,L.MlToolBar=W,L.MlToolPalette=O,L.default=me,Object.defineProperties(L,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-toggle-button[data-v-b676e93b]{border:none;padding:0;cursor:pointer;width:var(--0547f26d);height:var(--0547f26d)}.ml-vertical-toolbar-button-group[data-v-5261c686]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-5261c686]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-5261c686]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-5261c686]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-8645db4f]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-tool-palette-dialog-icon[data-v-8645db4f]{border-bottom:1px solid var(--el-border-color);cursor:default}.ml-tool-palette-dialog-icon[data-v-8645db4f]:hover{color:var(--el-color-primary)}.ml-tool-palette-dialog-layout[data-v-8645db4f]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-8645db4f]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;background-color:var(--el-fill-color)}.ml-tool-palette-title[data-v-8645db4f]{pointer-events:none;margin-top:10px;margin-bottom:10px;font-size:small;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-tool-palette-content[data-v-8645db4f]{-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;background-color:var(--el-fill-color);overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-8645db4f]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-8645db4f],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-8645db4f]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-8645db4f]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(B,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/icon/style/css"),require("vue"),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/tooltip/style/css"),require("element-plus/es/components/button/style/css"),require("element-plus/es/components/button-group/style/css")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/icon/style/css","vue","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/tooltip/style/css","element-plus/es/components/button/style/css","element-plus/es/components/button-group/style/css"],y):(B=typeof globalThis<"u"?globalThis:B||self,y(B.UIComponents={},B.es,null,null,B.Vue))})(this,function(B,y,fe,ve,e){"use strict";const A={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},H=[e.createElementVNode("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"},null,-1)];function X(t,i){return e.openBlock(),e.createElementBlock("svg",A,[...H])}const V={render:X},q={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},U=[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"},null,-1)];function F(t,i){return e.openBlock(),e.createElementBlock("svg",q,[...U])}const $={render:F},I=e.defineComponent({__name:"MlCollapse",props:e.mergeModels({size:{default:18},reverse:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(t,{emit:i}){const o=t,s=e.useModel(t,"modelValue"),l=i,n=e.computed(()=>o.reverse?s.value?V:$:s.value?$:V),a=e.computed(()=>`${o.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(c,r)=>{const d=y.ElIcon;return e.openBlock(),e.createBlock(d,{size:a.value,onClick:h},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.value)))]),_:1},8,["size"])}}}),j=(t=>(e.pushScopeId("data-v-3fc33b5d"),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)),G=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:i}){const o=t,s=i,l=e.computed(()=>o.items.filter(a=>a.name!==o.current)),n=a=>{s("click",a)};return(a,h)=>{const c=y.ElIcon,r=y.ElDropdownItem,d=y.ElDropdownMenu,v=y.ElDropdown;return e.openBlock(),e.createBlock(v,{onCommand:n},{dropdown:e.withCtx(()=>[e.createVNode(d,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,u=>(e.openBlock(),e.createBlock(r,{key:u.text,command:u.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.text),1)]),_:2},1032,["command"]))),128))]),_:1})]),default:e.withCtx(()=>[e.createVNode(c,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[j]),_:1})]),_:1})}}}),z=(t,i)=>{const o=t.__vccOpts||t;for(const[s,l]of i)o[s]=l;return o},T=z(G,[["__scopeId","data-v-3fc33b5d"]]),J='<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>',S=e.defineComponent({__name:"MlLanguage",props:{languages:{},current:{}},emits:{click:null},setup(t,{emit:i}){const o=t,s=i,l=n=>{s("click",n)};return(n,a)=>(e.openBlock(),e.createBlock(T,{icon:J,items:o.languages,current:o.current,onClick:l},null,8,["items","current"]))}}),K={},Q={class:"ml-status-bar"},Z={class:"ml-status-bar-left"},P={class:"ml-status-bar-right"};function R(t,i){return e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",Z,[e.renderSlot(t.$slots,"left",{},void 0,!0)]),e.createElementVNode("div",P,[e.renderSlot(t.$slots,"right",{},void 0,!0)])])}const N=z(K,[["render",R],["__scopeId","data-v-d6a59cf0"]]),W=z(e.defineComponent({__name:"MlToggleButton",props:e.mergeModels({size:{default:30},data:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:e.mergeModels(["click"],["update:modelValue"]),setup(t,{emit:i}){e.useCssVars(r=>({"0547f26d":a.value}));const o=t,s=e.useModel(t,"modelValue"),l=i,n=e.computed(()=>s.value?o.data.onIcon:o.data.offIcon),a=e.computed(()=>o.size+"px"),h=e.computed(()=>s.value?o.data.onTooltip:o.data.offTooltip),c=()=>{s.value=!s.value,l("click",s.value)};return(r,d)=>{const v=y.ElButton,u=y.ElTooltip;return e.openBlock(),e.createBlock(u,{content:h.value,"hide-after":0},{default:e.withCtx(()=>[e.createVNode(v,{class:"ml-toggle-button",icon:n.value,onClick:c},null,8,["icon"])]),_:1},8,["content"])}}}),[["__scopeId","data-v-b676e93b"]]),ee={key:0,class:"ml-toolbar-button-text"},D=z(e.defineComponent({__name:"MlToolBar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(t,{emit:i}){const o=t,s=i,l=e.computed(()=>o.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),n=e.computed(()=>o.size==="small"?20:30),a=e.computed(()=>{switch(o.size){case"small":return 30;case"medium":return 50}return 70}),h=d=>d.description?d.description:d.text,c=e.computed(()=>o.size==="large"),r=d=>{s("click",d)};return(d,v)=>{const u=y.ElIcon,p=y.ElButton,m=y.ElTooltip,f=y.ElButtonGroup;return e.openBlock(),e.createBlock(f,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.items,(g,E)=>(e.openBlock(),e.createBlock(m,{key:g.text,content:h(g),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(p,{class:"ml-toolbar-button",style:e.normalizeStyle({width:a.value+"px",height:a.value+"px"}),key:E,onClick:k=>r(g.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(u,{size:n.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.icon)))]),_:2},1032,["size"]),c.value?(e.openBlock(),e.createElementBlock("div",ee,e.toDisplayString(g.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-5261c686"]]),O=20;function te(t,i,o){const s=e.ref(!1),l=c=>{if(o.value&&t.value){const r=t.value.getBoundingClientRect(),d=c.clientX<r.left||c.clientX>r.right||c.clientY<r.top||c.clientY>r.bottom;s.value=!d}},n=()=>{o.value&&(s.value=!0)},a=()=>{i.value&&i.value.addEventListener("mousemove",n),t.value&&t.value.addEventListener("mousemove",n)},h=()=>{i.value&&i.value.removeEventListener("mousemove",n),t.value&&t.value.removeEventListener("mousemove",n)};return e.onMounted(()=>{window.addEventListener("mousemove",l)}),e.onUnmounted(()=>{window.removeEventListener("mousemove",l)}),e.watch(o,c=>{c&&(s.value=!1)}),e.watch(t,c=>{c?a():h()}),{autoOpened:s}}function oe(t,i,o){const s=e.ref(!1),l=e.ref(null),n=e.ref(null),a={x:0,y:0},h=e.computed(()=>l.value==null||n.value==null?{x:0,y:0}:{x:l.value.x-n.value.x,y:l.value.y-n.value.y}),c=()=>{if(t.value){const m=t.value.getBoundingClientRect();n.value={x:m.left,y:m.top},l.value={x:m.left,y:m.top}}},r=()=>{t.value&&t.value.addEventListener("mousedown",v)},d=()=>{t.value&&t.value.removeEventListener("mousedown",v)},v=m=>{if(t.value!=null){if(i&&i.value){const f=i.value.getBoundingClientRect();if(m.clientX<f.left||m.clientX>f.right||m.clientY<f.top||m.clientY>f.bottom)return}s.value=!0,a.x=m.clientX,a.y=m.clientY,c(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",p)}},u=m=>{if(s.value&&n.value&&l.value){const f=window.innerWidth,g=window.innerHeight,E=t.value,k=E.getBoundingClientRect(),x=k.width,w=k.height,b=n.value.x+(m.clientX-a.x),M=n.value.y+(m.clientY-a.y);l.value.x=Math.max(o?o.value.offset.value.left:0,b);const _=f-x;l.value.x=Math.min(o?_-o.value.offset.value.right:_,l.value.x),l.value.y=Math.max(o?o.value.offset.value.top:0,Math.min(M,g-w));const L=g-w;l.value.y=Math.min(o?L-o.value.offset.value.bottom:L,l.value.y),E.style.left=l.value.x+"px",E.style.top=l.value.y+"px"}},p=()=>{s.value=!1,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",p)};return e.onMounted(()=>{t.value&&(c(),r())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",v)}),e.watch(t,m=>{m?(c(),r()):d()}),{isDragging:s,movement:h,position:l}}function ne(t,i,o){const s=e.ref(!1),l=e.ref("left"),{isDragging:n,movement:a,position:h}=oe(t,i,o);return e.watch(a,c=>{if(c&&t.value){const d=t.value.getBoundingClientRect();d.left<=o.value.offset.value.left?(l.value="left",s.value=!0):window.innerWidth-d.left-d.width<=o.value.offset.value.right?(l.value="right",s.value=!0):s.value=!1}}),{docked:s,orientation:l,isDragging:n,movement:a,position:h}}function le(t,i,o,s){const l=e.ref(null),n=e.ref(null),a=e.ref(null),h=e.ref(null);return e.watch(t,(c,r)=>{l.value=r}),e.watch(i,(c,r)=>{n.value=r}),e.watch(o,(c,r)=>{a.value=r}),e.watch(s,(c,r)=>{h.value=r}),{lastLeft:l,lastTop:n,lastWidth:a,lastHeight:h}}function se(t,i,o,s){const l=e.ref(t.value.width),n=e.ref(t.value.left),a=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),c=e.computed(()=>o.value?o.value.x:null);return e.watch([a,h],([r,d])=>{(l.value==null||n.value==null||i.value)&&(l.value=r,n.value=d)}),e.watch(c,r=>{s.value&&o.value&&(n.value=r)}),{left:n,width:l}}function ie(t,i=e.ref({left:0,right:0,top:0,bottom:0})){const o=e.ref({});let s=!1;const l=()=>{if(!s&&t.value){const n=t.value.getBoundingClientRect();o.value.left=Math.max(n.left,i.value.left),o.value.top=Math.max(n.top,i.value.top),o.value.width=n.width,o.value.height=n.height,s=!0}};return e.onMounted(()=>{t.value&&l()}),e.watch(t,n=>{n&&l()}),{isIntialized:s,initialRect:o}}function ce(t,i=e.ref(!1),o=e.ref(!1),s=e.ref({left:0,right:0,top:0,bottom:0}),l={width:20,height:40}){const{initialRect:n}=ie(t,s),a=e.ref(!1);let h=0,c=0,r=0,d=0,v=0;const u=5,p=e.ref(null),m=x=>{if(!(!t.value||i.value))if(a.value){const w=x.clientX-d,b=x.clientY-v;if(p.value==="left"||p.value==="left-bottom-corner"){const M=c-w;M>l.width&&(n.value.width=M,n.value.left=h+w,t.value.style.left=n.value.left+"px",t.value.style.width=n.value.width+"px")}if(p.value==="right"||p.value==="right-bottom-corner"){const M=c+w;M>l.width&&(n.value.width=M,t.value.style.width=n.value.width+"px")}if(p.value==="bottom"||p.value==="left-bottom-corner"||p.value==="right-bottom-corner"){const M=r+b;M>l.height&&(n.value.height=M,t.value.style.height=n.value.height+"px")}}else{const w=t.value.getBoundingClientRect(),b=x.clientX-w.left,M=x.clientY-w.top,_=b<=u,L=b>=w.width-u,C=M>=w.height-u;_&&C&&o.value?(t.value.style.cursor="nesw-resize",p.value="left-bottom-corner"):L&&C&&!o.value?(t.value.style.cursor="nwse-resize",p.value="right-bottom-corner"):_&&o.value?(t.value.style.cursor="ew-resize",p.value="left"):L&&!o.value?(t.value.style.cursor="ew-resize",p.value="right"):C?(t.value.style.cursor="ns-resize",p.value="bottom"):(t.value.style.cursor="",p.value=null)}},f=x=>{if(!t.value||!p.value)return;const w=t.value.getBoundingClientRect();d=x.clientX,v=x.clientY,c=w.width,r=w.height,h=w.left,n.value.width=c,n.value.height=r,n.value.left=w.left,n.value.top=w.top,a.value=!0,document.addEventListener("mousemove",m),document.addEventListener("mouseup",g)},g=()=>{a.value=!1,p.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",g)},E=()=>{t.value&&(t.value.removeEventListener("mousedown",f),t.value.removeEventListener("mousemove",m)),document.removeEventListener("mouseup",g)},k=()=>{t.value&&(t.value.addEventListener("mousedown",f),t.value.addEventListener("mousemove",m))};return e.onMounted(()=>{t.value&&k()}),e.onBeforeUnmount(()=>{E()}),e.watch(t,x=>{x?k():E()}),{rect:n,isResizing:a}}function ae(t,i,o,s){const l=()=>{if(t.value){const c=t.value;i.value?c.style.transition="width 0.3s ease-out, left 0.3s ease-out":c.style.transition="width 0.3s ease"}},n=()=>{t.value&&(t.value.style.transition="")},a=()=>{t.value&&t.value.removeEventListener("transitionend",n)},h=()=>{t.value&&t.value.addEventListener("transitionend",n)};e.onMounted(()=>{t.value&&t.value.addEventListener("transitionend",n)}),e.onBeforeUnmount(()=>{t.value&&t.value.removeEventListener("transitionend",n)}),e.watch(t,c=>{c?h():a()}),e.watch(o,()=>{l()}),e.watch(s,()=>{l()})}function re(t,i,o,s){const l=e.ref(window.innerWidth),n=e.ref(window.innerHeight),{docked:a,orientation:h,movement:c,position:r,isDragging:d}=ne(t,i,s),v=e.computed(()=>h.value==="right"),{rect:u,isResizing:p}=ce(t,o,v,s.value.offset),{width:m,left:f}=se(u,p,r,d),{lastTop:g,lastHeight:E}=le(e.computed(()=>u.value.left),e.computed(()=>u.value.top),e.computed(()=>u.value.width),e.computed(()=>u.value.height)),{autoOpened:k}=te(t,i,o);ae(t,v,o,k);const x=_=>{if(t.value){const L=t.value.getBoundingClientRect(),C=L.left+_;if(v.value){u.value.left=C;const pe=window.innerWidth-L.width-L.left;L.left<=0&&pe>=0&&_<0&&(u.value.left=Math.max(0,C)),window.innerWidth-L.width<=0&&(u.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&_<0&&(u.value.left=Math.max(0,C))}},w=()=>{const _=window.innerWidth-l.value;l.value=window.innerWidth,n.value=window.innerHeight,x(_)};e.onMounted(()=>{window.addEventListener("resize",w)}),e.onUnmounted(()=>{window.removeEventListener("resize",w)});const b=_=>{_?(u.value.width=O,v.value&&f.value&&m.value&&(u.value.left=f.value+m.value-O)):(u.value.width=m.value,v.value&&f.value&&m.value&&(u.value.left=f.value))},M=()=>{a.value?(u.value.top=s.value.offset.value.top,u.value.height=window.innerHeight-s.value.offset.value.top-s.value.offset.value.bottom):(u.value.top=g.value,u.value.height=E.value)};return e.watch(a,()=>{M()}),e.watch(o,_=>{b(_)}),e.watch(k,_=>{o.value&&!d.value&&b(!_)}),e.watch(c,_=>{if(_&&t.value){const C=t.value.getBoundingClientRect();u.value.left=C.left,u.value.top=C.top}}),{rect:u,orientation:h,reversed:v}}const ue=(t=>(e.pushScopeId("data-v-8645db4f"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"})],-1)),de={class:"ml-tool-palette-title"},me={class:"ml-tool-palette-content"},Y=z(e.defineComponent({__name:"MlToolPalette",props:e.mergeModels({title:{default:""},leftOffset:{default:0},rightOffset:{default:0},topOffset:{default:0},bottomOffset:{default:0}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["close"],["update:modelValue"]),setup(t,{emit:i}){const o=t,s=e.useModel(t,"modelValue"),l=i,n=e.ref(!1),a=e.ref(null),h=e.ref(null),c=e.computed(()=>({offset:e.ref({left:o.leftOffset,right:o.rightOffset,top:o.topOffset,bottom:o.bottomOffset})})),{rect:r,orientation:d,reversed:v}=re(h,a,n,c),u=e.computed(()=>({left:`${r.value.left}px`,top:`${r.value.top}px`,width:`${r.value.width}px`,height:`${r.value.height}px`})),p=e.computed(()=>v.value?{borderLeft:"1px solid var(--el-border-color)",borderRight:null}:{borderLeft:null,borderRight:"1px solid var(--el-border-color)"}),m=()=>{s.value=!1;const f=h.value;l("close",{x:f?f.clientLeft:0,y:f?f.clientTop:0})};return(f,g)=>{const E=y.ElIcon;return s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:h,style:e.normalizeStyle([u.value]),class:"ml-tool-palette-dialog"},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(d)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:a,class:"ml-tool-palette-title-bar",style:e.normalizeStyle(p.value)},[e.createVNode(E,{size:18,class:"ml-tool-palette-dialog-icon",onClick:m},{default:e.withCtx(()=>[ue]),_:1}),e.createVNode(I,{class:"ml-tool-palette-dialog-icon",modelValue:n.value,"onUpdate:modelValue":g[0]||(g[0]=k=>n.value=k),reverse:e.unref(v)},null,8,["modelValue","reverse"]),e.createElementVNode("span",de,e.toDisplayString(o.title),1)],4),e.createElementVNode("div",me,[e.renderSlot(f.$slots,"default",{},void 0,!0)])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-8645db4f"]]),he={install(t){t.component("MlCollapse",T),t.component("MlDropdown",T),t.component("MlLanguage",S),t.component("MlStatusBar",N),t.component("MlToggleButton",W),t.component("MlToolBar",D),t.component("MlToolPalette",Y)}};B.MlCollapse=I,B.MlDropdown=T,B.MlLanguage=S,B.MlStatusBar=N,B.MlToggleButton=W,B.MlToolBar=D,B.MlToolPalette=Y,B.default=he,Object.defineProperties(B,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/index.d.ts

@@ -2,11 +2,14 @@ import MlCollapse from './components/MlCollapse.vue';
 import MlDropdown from './components/MlDropdown.vue';
 import MlLanguage from './components/MlLanguage.vue';
 import MlStatusBar from './components/MlStatusBar.vue';
+import MlToggleButton from './components/MlToggleButton.vue';
 import MlToolBar from './components/MlToolBar.vue';
 import MlToolPalette from './components/MlToolPalette.vue';
-export { MlCollapse, MlDropdown, MlLanguage, MlStatusBar, MlToolBar, MlToolPalette };
+export { MlCollapse, MlDropdown, MlLanguage, MlStatusBar, MlToggleButton, MlToolBar, MlToolPalette };
 export type { MlDropdownMenuItem } from './components/MlDropdown.vue';
+export type { MlToggleButtonData } from './components/MlToggleButton.vue';
 export type { MlButtonData } from './components/MlToolBar.vue';
+export * from './components/types';
 declare const _default: {
     install(app: any): void;
 };

package/lib/index.js

@@ -2,9 +2,11 @@ import MlCollapse from './components/MlCollapse.vue';
 import MlDropdown from './components/MlDropdown.vue';
 import MlLanguage from './components/MlLanguage.vue';
 import MlStatusBar from './components/MlStatusBar.vue';
+import MlToggleButton from './components/MlToggleButton.vue';
 import MlToolBar from './components/MlToolBar.vue';
 import MlToolPalette from './components/MlToolPalette.vue';
-export { MlCollapse, MlDropdown, MlLanguage, MlStatusBar, MlToolBar, MlToolPalette };
+export { MlCollapse, MlDropdown, MlLanguage, MlStatusBar, MlToggleButton, MlToolBar, MlToolPalette };
+export * from './components/types';
 // Optionally, export them as a plugin for Vue
 export default {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13,6 +15,7 @@ export default {
         app.component('MlDropdown', MlDropdown);
         app.component('MlLanguage', MlLanguage);
         app.component('MlStatusBar', MlStatusBar);
+        app.component('MlToggleButton', MlToggleButton);
         app.component('MlToolBar', MlToolBar);
         app.component('MlToolPalette', MlToolPalette);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlightcad/ui-components",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "description": "One common UI component library based on Element Plus",
   "license": "MIT",
   "author": "MLight Lee <mlight.lee@outlook.com>",
@@ -14,6 +14,8 @@
     "vue",
     "element plus",
     "cad",
+    "AutoCAD",
+    "tool palette",
     "mlight"
   ],
   "main": "dist/ui-components.umd.js",

package/src/components/MlToggleButton.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-tooltip :content="tooltip" :hide-after="0">
+    <el-button class="ml-toggle-button" :icon="icon" @click="handleClicked" />
+  </el-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { MlIconType } from './types'
+
+/**
+ * Data to descibe toggle button
+ */
+export interface MlToggleButtonData {
+  /**
+   * Icon used when button is 'on'
+   */
+  onIcon: MlIconType
+  /**
+   * Icon used when button is 'off'.
+   */
+  offIcon: MlIconType
+  /**
+   * Tooltip when button is 'on'
+   */
+  onTooltip: string
+  /**
+   * Tooltip when button is 'off'
+   */
+  offTooltip: string
+}
+
+/**
+ * Properties of MlToggleButton component
+ */
+interface Props {
+  /**
+   * Button size
+   */
+  size?: number | string
+  /**
+   * Data to descibe toggle button
+   */
+  data: MlToggleButtonData
+}
+
+interface Events {
+  /**
+   * Trigger this event when toggle button is clicked.
+   * @param state New state of toggle button
+   */
+  (e: 'click', state: boolean): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 30,
+})
+const on = defineModel({ default: false })
+const emit = defineEmits<Events>()
+
+const icon = computed(() => {
+  return on.value ? props.data.onIcon : props.data.offIcon
+})
+
+const size = computed(() => {
+  return props.size + 'px'
+})
+
+const tooltip = computed(() => {
+  return on.value ? props.data.onTooltip : props.data.offTooltip
+})
+
+const handleClicked = () => {
+  on.value = !on.value
+  emit('click', on.value)
+}
+</script>
+
+<style scoped>
+.ml-toggle-button {
+  border: none;
+  padding: 0px;
+  cursor: pointer;
+  width: v-bind(size);
+  height: v-bind(size);
+}
+</style>

package/src/components/MlToolBar.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, DefineComponent } from 'vue'
+import { computed } from 'vue'
 
-export type MlIconType = () => DefineComponent
+import { MlIconType } from './types'
 
 /**
  * Data to descibe button appearance

package/src/components/MlToolPalette.vue

@@ -160,6 +160,11 @@ const handleClose = () => {
 
 .ml-tool-palette-dialog-icon {
   border-bottom: 1px solid var(--el-border-color);
+  cursor: default; /* Override parent move cursor on icon */
+}
+
+.ml-tool-palette-dialog-icon:hover {
+  color: var(--el-color-primary);
 }
 
 .ml-tool-palette-dialog-layout {

package/src/components/types.ts

@@ -0,0 +1,3 @@
+import { DefineComponent } from 'vue'
+
+export type MlIconType = () => DefineComponent

package/src/index.ts

@@ -2,6 +2,7 @@ import MlCollapse from './components/MlCollapse.vue'
 import MlDropdown from './components/MlDropdown.vue'
 import MlLanguage from './components/MlLanguage.vue'
 import MlStatusBar from './components/MlStatusBar.vue'
+import MlToggleButton from './components/MlToggleButton.vue'
 import MlToolBar from './components/MlToolBar.vue'
 import MlToolPalette from './components/MlToolPalette.vue'
 export {
@@ -9,11 +10,14 @@ export {
   MlDropdown,
   MlLanguage,
   MlStatusBar,
+  MlToggleButton,
   MlToolBar,
   MlToolPalette
 }
 export type { MlDropdownMenuItem } from './components/MlDropdown.vue'
+export type { MlToggleButtonData } from './components/MlToggleButton.vue'
 export type { MlButtonData } from './components/MlToolBar.vue'
+export * from './components/types'
 
 // Optionally, export them as a plugin for Vue
 export default {
@@ -23,6 +27,7 @@ export default {
     app.component('MlDropdown', MlDropdown)
     app.component('MlLanguage', MlLanguage)
     app.component('MlStatusBar', MlStatusBar)
+    app.component('MlToggleButton', MlToggleButton)
     app.component('MlToolBar', MlToolBar)
     app.component('MlToolPalette', MlToolPalette)
   }