@mlightcad/ui-components 0.0.10 → 0.0.12

package/README.md

@@ -92,7 +92,7 @@ Features above can be customized by the following properties.
 
 ```javascript
 /**
- * Properties of MLToolbar components
+ * Properties of MLToolBar components
  */
 interface Props {
   /**
@@ -115,7 +115,7 @@ interface Props {
 }
 ```
 
-Buttons in toolbar are described by the following data.
+Buttons in toolbar are described by the following data. Property `icon` can be icon provided by Element Plus or icon imported through `vite-svg-loader`.
 
 ```javascript
 /**
@@ -123,9 +123,9 @@ Buttons in toolbar are described by the following data.
  */
 export interface MlButtonData {
   /**
-   * Icon represented by one SVG string
+   * Icon represented by one vue component
    */
-  icon: string
+  icon: Component 
   /**
    * Text shown below icon
    */
@@ -141,32 +141,30 @@ export interface MlButtonData {
 }
 ```
 
-Usage of this component is as follows. To simplify example code, we use the same SVG icon for all button in toolbar.
+Usage of this component is as follows. 
 
 ```javascript
 <script setup lang="ts">
 import '@mlightcad/ui-components/dist/style.css'
 import { MlButtonData, MlToolbar } from '@mlightcad/ui-components'
 import { reactive } from 'vue'
-
-const svg =
-  '<svg data-v-d0da8fdb="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357.12 357.12 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a351.616 351.616 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357.12 357.12 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088-24.512 11.968a294.113 294.113 0 0 0-34.816 20.096l-22.656 15.36-116.224-25.088-65.28 113.152 79.68 88.192-1.92 27.136a293.12 293.12 0 0 0 0 40.192l1.92 27.136-79.808 88.192 65.344 113.152 116.224-25.024 22.656 15.296a294.113 294.113 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152 24.448-11.904a288.282 288.282 0 0 0 34.752-20.096l22.592-15.296 116.288 25.024 65.28-113.152-79.744-88.192 1.92-27.136a293.12 293.12 0 0 0 0-40.256l-1.92-27.136 79.808-88.128-65.344-113.152-116.288 24.96-22.592-15.232a287.616 287.616 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384m0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256"></path></svg>'
+import { Delete, Edit, Search } from '@element-plus/icons-vue'
 
 const data = reactive<MlButtonData[]>([
   {
-    icon: svg,
+    icon: Edit,
     text: 'Edit',
     command: 'edit',
     description: 'This is description for edit button'
   },
   {
-    icon: svg,
+    icon: Delete,
     text: 'Delete',
     command: 'delete',
     description: 'This is description for delete button'
   },
   {
-    icon: svg,
+    icon: Search,
     text: 'Search',
     command: 'search',
     description: 'This is description for search button'
@@ -180,7 +178,7 @@ const handleCommand = (command: string) => {
 
 <template>
   <div>
-    <ml-toolbar :items="data1" layout="vertical" @click="handleCommand"/>
+    <ml-toolbar :items="data" layout="vertical" @click="handleCommand"/>
   </div>
 </template>
 

package/dist/ui-components.es.js

@@ -1,8 +1,8 @@
-(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-b0c9d107]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--el-border-color);box-shadow:0 -2px 1-px #0000003d}.ml-status-bar-left[data-v-b0c9d107],.ml-status-bar-right[data-v-b0c9d107]{display:flex;align-items:center}.ml-status-bar-left[data-v-b0c9d107]>*{margin-right:10px}.ml-status-bar-right[data-v-b0c9d107]>*{margin-left:10px}.ml-vertical-toolbar-button-group[data-v-27b5412a]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-27b5412a]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-27b5412a]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-27b5412a]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-539d98d3]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;border:1px solid;border-radius:4px}.ml-tool-palette-dialog-icon[data-v-539d98d3]{border-bottom:1px solid}.ml-tool-palette-dialog-layout[data-v-539d98d3]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-539d98d3]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;border:1px}.ml-tool-palette-title[data-v-539d98d3]{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-539d98d3]{pointer-events:none;-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;align-items:center;background-color:#fff;overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-539d98d3]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-539d98d3],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-539d98d3]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-539d98d3]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { ElIcon as Y, ElDropdownItem as oe, ElDropdownMenu as ie, ElDropdown as se, ElButton as ue, ElTooltip as ae, ElButtonGroup as ce } 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-b0c9d107]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--el-border-color);box-shadow:0 -2px 1-px #0000003d}.ml-status-bar-left[data-v-b0c9d107],.ml-status-bar-right[data-v-b0c9d107]{display:flex;align-items:center}.ml-status-bar-left[data-v-b0c9d107]>*{margin-right:10px}.ml-status-bar-right[data-v-b0c9d107]>*{margin-left:10px}.ml-vertical-toolbar-button-group[data-v-fe5399ea]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-fe5399ea]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-fe5399ea]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-fe5399ea]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-539d98d3]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;border:1px solid;border-radius:4px}.ml-tool-palette-dialog-icon[data-v-539d98d3]{border-bottom:1px solid}.ml-tool-palette-dialog-layout[data-v-539d98d3]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-539d98d3]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;border:1px}.ml-tool-palette-title[data-v-539d98d3]{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-539d98d3]{pointer-events:none;-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;align-items:center;background-color:#fff;overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-539d98d3]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-539d98d3],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-539d98d3]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-539d98d3]{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";
 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 S, mergeModels as V, useModel as J, computed as L, createBlock as W, withCtx as T, resolveDynamicComponent as re, createVNode as H, Fragment as K, renderList as Q, createTextVNode as ve, toDisplayString as N, pushScopeId as Z, popScopeId as P, renderSlot as O, normalizeClass as R, normalizeStyle as ee, createCommentVNode as te, ref as m, onMounted as D, onUnmounted as U, watch as _, onBeforeUnmount as ne, unref as F } from "vue";
+import { openBlock as M, createElementBlock as I, createElementVNode as b, defineComponent as V, mergeModels as Y, useModel as J, computed as L, createBlock as W, withCtx as B, resolveDynamicComponent as K, createVNode as S, Fragment as Q, renderList as Z, createTextVNode as ve, toDisplayString as N, pushScopeId as P, popScopeId as R, renderSlot as O, normalizeClass as ee, normalizeStyle as te, createCommentVNode as ne, ref as m, onMounted as D, onUnmounted as U, watch as _, onBeforeUnmount as le, unref as F } 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";
@@ -14,68 +14,68 @@ const de = {
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
-}, me = /* @__PURE__ */ z("path", {
+}, me = /* @__PURE__ */ b("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
 ];
-function fe(e, i) {
-  return y(), I("svg", de, [...he]);
+function fe(e, s) {
+  return M(), I("svg", de, [...he]);
 }
 const G = { render: fe }, pe = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
-}, we = /* @__PURE__ */ z("path", {
+}, we = /* @__PURE__ */ b("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 = [
   we
 ];
-function ge(e, i) {
-  return y(), I("svg", pe, [..._e]);
+function ge(e, s) {
+  return M(), I("svg", pe, [..._e]);
 }
-const j = { render: ge }, Le = /* @__PURE__ */ S({
+const j = { render: ge }, Le = /* @__PURE__ */ V({
   __name: "MlCollapse",
-  props: /* @__PURE__ */ V({
+  props: /* @__PURE__ */ Y({
     size: { default: 18 },
     reverse: { type: Boolean, default: !1 }
   }, {
     modelValue: { default: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
-  setup(e, { emit: i }) {
-    const t = e, o = J(e, "modelValue"), l = i, n = L(() => t.reverse ? o.value ? G : j : o.value ? j : G), u = L(() => `${t.size}px`), d = () => {
+  emits: /* @__PURE__ */ Y(["change"], ["update:modelValue"]),
+  setup(e, { emit: s }) {
+    const t = e, o = J(e, "modelValue"), l = s, n = L(() => t.reverse ? o.value ? G : j : o.value ? j : G), u = L(() => `${t.size}px`), d = () => {
       l("change", o.value), o.value = !o.value;
     };
-    return (s, a) => {
-      const v = Y;
-      return y(), W(v, {
+    return (i, a) => {
+      const v = A;
+      return M(), W(v, {
         size: u.value,
         onClick: d
       }, {
-        default: T(() => [
-          (y(), W(re(n.value)))
+        default: B(() => [
+          (M(), W(K(n.value)))
         ]),
         _: 1
       }, 8, ["size"]);
     };
   }
-}), xe = (e) => (Z("data-v-3fc33b5d"), e = e(), P(), e), Me = /* @__PURE__ */ xe(() => /* @__PURE__ */ z("svg", {
+}), xe = (e) => (P("data-v-3fc33b5d"), e = e(), R(), e), Me = /* @__PURE__ */ xe(() => /* @__PURE__ */ b("svg", {
   preserveAspectRatio: "xMidYMid meet",
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em",
   "data-v-63d067da": ""
 }, [
-  /* @__PURE__ */ z("path", {
+  /* @__PURE__ */ b("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)), ye = /* @__PURE__ */ S({
+], -1)), ye = /* @__PURE__ */ V({
   __name: "MlDropdown",
   props: {
     icon: {},
@@ -85,21 +85,21 @@ const j = { render: ge }, Le = /* @__PURE__ */ S({
   emits: {
     click: null
   },
-  setup(e, { emit: i }) {
-    const t = e, o = i, l = L(() => t.items.filter((u) => u.name !== t.current)), n = (u) => {
+  setup(e, { emit: s }) {
+    const t = e, o = s, l = L(() => t.items.filter((u) => u.name !== t.current)), n = (u) => {
       o("click", u);
     };
     return (u, d) => {
-      const s = Y, a = oe, v = ie, g = se;
-      return y(), W(g, { onCommand: n }, {
-        dropdown: T(() => [
-          H(v, null, {
-            default: T(() => [
-              (y(!0), I(K, null, Q(l.value, (c) => (y(), W(a, {
+      const i = A, a = se, v = ie, g = ue;
+      return M(), W(g, { onCommand: n }, {
+        dropdown: B(() => [
+          S(v, null, {
+            default: B(() => [
+              (M(!0), I(Q, null, Z(l.value, (c) => (M(), W(a, {
                 key: c.text,
                 command: c.name
               }, {
-                default: T(() => [
+                default: B(() => [
                   ve(N(c.text), 1)
                 ]),
                 _: 2
@@ -108,12 +108,12 @@ const j = { render: ge }, Le = /* @__PURE__ */ S({
             _: 1
           })
         ]),
-        default: T(() => [
-          H(s, {
+        default: B(() => [
+          S(i, {
             size: "30",
             class: "ml-dropdown-icon"
           }, {
-            default: T(() => [
+            default: B(() => [
               Me
             ]),
             _: 1
@@ -123,12 +123,12 @@ const j = { render: ge }, Le = /* @__PURE__ */ S({
       });
     };
   }
-}), A = (e, i) => {
+}), H = (e, s) => {
   const t = e.__vccOpts || e;
-  for (const [o, l] of i)
+  for (const [o, l] of s)
     t[o] = l;
   return t;
-}, X = /* @__PURE__ */ A(ye, [["__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__ */ S({
+}, X = /* @__PURE__ */ H(ye, [["__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>', ze = /* @__PURE__ */ V({
   __name: "MlLanguage",
   props: {
     languages: {},
@@ -137,33 +137,33 @@ const j = { render: ge }, Le = /* @__PURE__ */ S({
   emits: {
     click: null
   },
-  setup(e, { emit: i }) {
-    const t = e, o = i, l = (n) => {
+  setup(e, { emit: s }) {
+    const t = e, o = s, l = (n) => {
       o("click", n);
     };
-    return (n, u) => (y(), W(X, {
+    return (n, u) => (M(), W(X, {
       icon: Ee,
       items: t.languages,
       current: t.current,
       onClick: l
     }, null, 8, ["items", "current"]));
   }
-}), ze = {}, Ce = { class: "ml-status-bar" }, Be = { class: "ml-status-bar-left" }, Te = { class: "ml-status-bar-right" };
-function ke(e, i) {
-  return y(), I("div", Ce, [
-    z("div", Be, [
+}), be = {}, Ce = { class: "ml-status-bar" }, Be = { class: "ml-status-bar-left" }, ke = { class: "ml-status-bar-right" };
+function $e(e, s) {
+  return M(), I("div", Ce, [
+    b("div", Be, [
       O(e.$slots, "left", {}, void 0, !0)
     ]),
-    z("div", Te, [
+    b("div", ke, [
       O(e.$slots, "right", {}, void 0, !0)
     ])
   ]);
 }
-const $e = /* @__PURE__ */ A(ze, [["render", ke], ["__scopeId", "data-v-b0c9d107"]]), We = {
+const Te = /* @__PURE__ */ H(be, [["render", $e], ["__scopeId", "data-v-b0c9d107"]]), We = {
   key: 0,
   class: "ml-toolbar-button-text"
-}, Ie = /* @__PURE__ */ S({
-  __name: "MlToolbar",
+}, Ie = /* @__PURE__ */ V({
+  __name: "MlToolBar",
   props: {
     items: {},
     size: { default: "large" },
@@ -172,8 +172,8 @@ const $e = /* @__PURE__ */ A(ze, [["render", ke], ["__scopeId", "data-v-b0c9d107
   emits: {
     click: null
   },
-  setup(e, { emit: i }) {
-    const t = e, o = i, l = L(() => t.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), n = L(() => t.size === "small" ? 20 : 30), u = L(() => {
+  setup(e, { emit: s }) {
+    const t = e, o = s, l = L(() => t.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), n = L(() => t.size === "small" ? 20 : 30), u = L(() => {
       switch (t.size) {
         case "small":
           return 30;
@@ -181,34 +181,36 @@ const $e = /* @__PURE__ */ A(ze, [["render", ke], ["__scopeId", "data-v-b0c9d107
           return 50;
       }
       return 70;
-    }), d = (v) => v.description ? v.description : v.text, s = L(() => t.size === "large"), a = (v) => {
+    }), d = (v) => v.description ? v.description : v.text, i = L(() => t.size === "large"), a = (v) => {
       o("click", v);
     };
     return (v, g) => {
-      const c = Y, h = ue, r = ae, p = ce;
-      return y(), W(p, {
-        class: R(l.value)
+      const c = A, h = ae, r = ce, p = re;
+      return M(), W(p, {
+        class: ee(l.value)
       }, {
-        default: T(() => [
-          (y(!0), I(K, null, Q(v.items, (x, C) => (y(), W(r, {
+        default: B(() => [
+          (M(!0), I(Q, null, Z(v.items, (x, C) => (M(), W(r, {
             key: x.text,
             content: d(x),
             "hide-after": 0
           }, {
-            default: T(() => [
-              (y(), W(h, {
+            default: B(() => [
+              (M(), W(h, {
                 class: "ml-toolbar-button",
-                style: ee({ width: u.value + "px", height: u.value + "px" }),
+                style: te({ width: u.value + "px", height: u.value + "px" }),
                 key: C,
-                onClick: (k) => a(x.command)
+                onClick: ($) => a(x.command)
               }, {
-                default: T(() => [
-                  z("div", null, [
-                    H(c, {
-                      size: n.value,
-                      innerHTML: x.icon
-                    }, null, 8, ["size", "innerHTML"]),
-                    s.value ? (y(), I("div", We, N(x.text), 1)) : te("", !0)
+                default: B(() => [
+                  b("div", null, [
+                    S(c, { size: n.value }, {
+                      default: B(() => [
+                        (M(), W(K(x.icon)))
+                      ]),
+                      _: 2
+                    }, 1032, ["size"]),
+                    i.value ? (M(), I("div", We, N(x.text), 1)) : ne("", !0)
                   ])
                 ]),
                 _: 2
@@ -221,35 +223,35 @@ const $e = /* @__PURE__ */ A(ze, [["render", ke], ["__scopeId", "data-v-b0c9d107
       }, 8, ["class"]);
     };
   }
-}), De = /* @__PURE__ */ A(Ie, [["__scopeId", "data-v-27b5412a"]]), q = 20;
-function He(e, i, t) {
-  const o = m(!1), l = (s) => {
+}), De = /* @__PURE__ */ H(Ie, [["__scopeId", "data-v-fe5399ea"]]), q = 20;
+function Se(e, s, t) {
+  const o = m(!1), l = (i) => {
     if (t.value && e.value) {
-      const a = e.value.getBoundingClientRect(), v = s.clientX < a.left || s.clientX > a.right || s.clientY < a.top || s.clientY > a.bottom;
+      const a = e.value.getBoundingClientRect(), v = i.clientX < a.left || i.clientX > a.right || i.clientY < a.top || i.clientY > a.bottom;
       o.value = !v;
     }
   }, n = () => {
     t.value && (o.value = !0);
   }, u = () => {
-    i.value && i.value.addEventListener("mousemove", n), e.value && e.value.addEventListener("mousemove", n);
+    s.value && s.value.addEventListener("mousemove", n), e.value && e.value.addEventListener("mousemove", n);
   }, d = () => {
-    i.value && i.value.removeEventListener("mousemove", n), e.value && e.value.removeEventListener("mousemove", n);
+    s.value && s.value.removeEventListener("mousemove", n), e.value && e.value.removeEventListener("mousemove", n);
   };
   return D(() => {
     window.addEventListener("mousemove", l);
   }), U(() => {
     window.removeEventListener("mousemove", l);
-  }), _(t, (s) => {
-    s && (o.value = !1);
-  }), _(e, (s) => {
-    s ? u() : d();
+  }), _(t, (i) => {
+    i && (o.value = !1);
+  }), _(e, (i) => {
+    i ? u() : d();
   }), { autoOpened: o };
 }
-function Se(e, i, t) {
+function Ve(e, s, t) {
   const o = m(!1), l = m(null), n = m(null), u = { x: 0, y: 0 }, d = L(() => l.value == null || n.value == null ? { x: 0, y: 0 } : {
     x: l.value.x - n.value.x,
     y: l.value.y - n.value.y
-  }), s = () => {
+  }), i = () => {
     if (e.value) {
       const r = e.value.getBoundingClientRect();
       n.value = {
@@ -266,20 +268,20 @@ function Se(e, i, t) {
     e.value && e.value.removeEventListener("mousedown", g);
   }, g = (r) => {
     if (e.value != null) {
-      if (i && i.value) {
-        const p = i.value.getBoundingClientRect();
+      if (s && s.value) {
+        const p = s.value.getBoundingClientRect();
         if (r.clientX < p.left || r.clientX > p.right || r.clientY < p.top || r.clientY > p.bottom) return;
       }
-      o.value = !0, u.x = r.clientX, u.y = r.clientY, s(), document.addEventListener("mousemove", c), document.addEventListener("mouseup", h);
+      o.value = !0, u.x = r.clientX, u.y = r.clientY, i(), document.addEventListener("mousemove", c), document.addEventListener("mouseup", h);
     }
   }, c = (r) => {
     if (o.value && n.value && l.value) {
-      const p = window.innerWidth, x = window.innerHeight, C = e.value, k = C.getBoundingClientRect(), b = k.width, f = k.height, $ = n.value.x + (r.clientX - u.x), E = n.value.y + (r.clientY - u.y);
+      const p = window.innerWidth, x = window.innerHeight, C = e.value, $ = C.getBoundingClientRect(), z = $.width, f = $.height, T = n.value.x + (r.clientX - u.x), E = n.value.y + (r.clientY - u.y);
       l.value.x = Math.max(
         t ? t.value.offset.value.left : 0,
-        $
+        T
       );
-      const w = p - b;
+      const w = p - z;
       l.value.x = Math.min(
         t ? w - t.value.offset.value.right : w,
         l.value.x
@@ -287,9 +289,9 @@ function Se(e, i, t) {
         t ? t.value.offset.value.top : 0,
         Math.min(E, x - f)
       );
-      const M = x - f;
+      const y = x - f;
       l.value.y = Math.min(
-        t ? M - t.value.offset.value.bottom : M,
+        t ? y - t.value.offset.value.bottom : y,
         l.value.y
       ), C.style.left = l.value.x + "px", C.style.top = l.value.y + "px";
     }
@@ -297,25 +299,25 @@ function Se(e, i, t) {
     o.value = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", h);
   };
   return D(() => {
-    e.value && (s(), a());
+    e.value && (i(), a());
   }), U(() => {
     e.value && e.value.removeEventListener("mousedown", g);
   }), _(e, (r) => {
-    r ? (s(), a()) : v();
+    r ? (i(), a()) : v();
   }), {
     isDragging: o,
     movement: d,
     position: l
   };
 }
-function Ve(e, i, t) {
-  const o = m(!1), l = m("left"), { isDragging: n, movement: u, position: d } = Se(
+function Ye(e, s, t) {
+  const o = m(!1), l = m("left"), { isDragging: n, movement: u, position: d } = Ve(
     e,
-    i,
+    s,
     t
   );
-  return _(u, (s) => {
-    if (s && e.value) {
+  return _(u, (i) => {
+    if (i && e.value) {
       const v = e.value.getBoundingClientRect();
       v.left <= t.value.offset.value.left ? (l.value = "left", o.value = !0) : window.innerWidth - v.left - v.width <= t.value.offset.value.right ? (l.value = "right", o.value = !0) : o.value = !1;
     }
@@ -327,15 +329,15 @@ function Ve(e, i, t) {
     position: d
   };
 }
-function Ye(e, i, t, o) {
+function Ae(e, s, t, o) {
   const l = m(null), n = m(null), u = m(null), d = m(null);
-  return _(e, (s, a) => {
+  return _(e, (i, a) => {
     l.value = a;
-  }), _(i, (s, a) => {
+  }), _(s, (i, a) => {
     n.value = a;
-  }), _(t, (s, a) => {
+  }), _(t, (i, a) => {
     u.value = a;
-  }), _(o, (s, a) => {
+  }), _(o, (i, a) => {
     d.value = a;
   }), {
     lastLeft: l,
@@ -344,21 +346,21 @@ function Ye(e, i, t, o) {
     lastHeight: d
   };
 }
-function Ae(e, i, t, o) {
-  const l = m(e.value.width), n = m(e.value.left), u = L(() => e.value.width), d = L(() => e.value.left), s = L(() => t.value ? t.value.x : null);
+function He(e, s, t, o) {
+  const l = m(e.value.width), n = m(e.value.left), u = L(() => e.value.width), d = L(() => e.value.left), i = L(() => t.value ? t.value.x : null);
   return _([u, d], ([a, v]) => {
-    (l.value == null || n.value == null || i.value) && (l.value = a, n.value = v);
-  }), _(s, (a) => {
+    (l.value == null || n.value == null || s.value) && (l.value = a, n.value = v);
+  }), _(i, (a) => {
     o.value && t.value && (n.value = a);
   }), { left: n, width: l };
 }
-function Oe(e, i = m({ left: 0, right: 0, top: 0, bottom: 0 })) {
+function Oe(e, s = m({ left: 0, right: 0, top: 0, bottom: 0 })) {
   const t = m({});
   let o = !1;
   const l = () => {
     if (!o && e.value) {
       const n = e.value.getBoundingClientRect();
-      t.value.left = Math.max(n.left, i.value.left), t.value.top = Math.max(n.top, i.value.top), t.value.width = n.width, t.value.height = n.height, o = !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(() => {
@@ -370,53 +372,53 @@ function Oe(e, i = m({ left: 0, right: 0, top: 0, bottom: 0 })) {
     initialRect: t
   };
 }
-function Xe(e, i = m(!1), t = m(!1), o = m({ left: 0, right: 0, top: 0, bottom: 0 }), l = { width: 20, height: 40 }) {
+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, s = 0, a = 0, v = 0, g = 0;
-  const c = 5, h = m(null), r = (b) => {
-    if (!(!e.value || i.value))
+  let d = 0, i = 0, a = 0, v = 0, g = 0;
+  const c = 5, h = m(null), r = (z) => {
+    if (!(!e.value || s.value))
       if (u.value) {
-        const f = b.clientX - v, $ = b.clientY - g;
+        const f = z.clientX - v, T = z.clientY - g;
         if (h.value === "left" || h.value === "left-bottom-corner") {
-          const E = s - f;
+          const E = i - f;
           E > l.width && (n.value.width = E, n.value.left = d + f, 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 = s + f;
+          const E = i + f;
           E > l.width && (n.value.width = E, 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 + $;
+          const E = a + T;
           E > l.height && (n.value.height = E, e.value.style.height = n.value.height + "px");
         }
       } else {
-        const f = e.value.getBoundingClientRect(), $ = b.clientX - f.left, E = b.clientY - f.top, w = $ <= c, M = $ >= f.width - c, B = E >= f.height - c;
-        w && B && t.value ? (e.value.style.cursor = "nesw-resize", h.value = "left-bottom-corner") : M && B && !t.value ? (e.value.style.cursor = "nwse-resize", h.value = "right-bottom-corner") : w && t.value ? (e.value.style.cursor = "ew-resize", h.value = "left") : M && !t.value ? (e.value.style.cursor = "ew-resize", h.value = "right") : B ? (e.value.style.cursor = "ns-resize", h.value = "bottom") : (e.value.style.cursor = "", h.value = null);
+        const f = e.value.getBoundingClientRect(), T = z.clientX - f.left, E = z.clientY - f.top, w = T <= c, y = T >= f.width - c, k = E >= f.height - c;
+        w && k && t.value ? (e.value.style.cursor = "nesw-resize", h.value = "left-bottom-corner") : y && k && !t.value ? (e.value.style.cursor = "nwse-resize", h.value = "right-bottom-corner") : w && t.value ? (e.value.style.cursor = "ew-resize", h.value = "left") : y && !t.value ? (e.value.style.cursor = "ew-resize", h.value = "right") : k ? (e.value.style.cursor = "ns-resize", h.value = "bottom") : (e.value.style.cursor = "", h.value = null);
       }
-  }, p = (b) => {
+  }, p = (z) => {
     if (!e.value || !h.value) return;
     const f = e.value.getBoundingClientRect();
-    v = b.clientX, g = b.clientY, s = f.width, a = f.height, d = f.left, n.value.width = s, n.value.height = a, n.value.left = f.left, n.value.top = f.top, u.value = !0, document.addEventListener("mousemove", r), document.addEventListener("mouseup", x);
+    v = z.clientX, g = z.clientY, i = f.width, a = f.height, d = f.left, n.value.width = i, n.value.height = a, n.value.left = f.left, n.value.top = f.top, u.value = !0, document.addEventListener("mousemove", r), document.addEventListener("mouseup", x);
   }, x = () => {
     u.value = !1, h.value = null, e.value && (e.value.style.cursor = ""), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", x);
   }, C = () => {
     e.value && (e.value.removeEventListener("mousedown", p), e.value.removeEventListener("mousemove", r)), document.removeEventListener("mouseup", x);
-  }, k = () => {
+  }, $ = () => {
     e.value && (e.value.addEventListener("mousedown", p), e.value.addEventListener("mousemove", r));
   };
   return D(() => {
-    e.value && k();
-  }), ne(() => {
+    e.value && $();
+  }), le(() => {
     C();
-  }), _(e, (b) => {
-    b ? k() : C();
+  }), _(e, (z) => {
+    z ? $() : C();
   }), { rect: n, isResizing: u };
 }
-function Ne(e, i, t, o) {
+function Ne(e, s, t, o) {
   const l = () => {
     if (e.value) {
-      const s = e.value;
-      i.value ? s.style.transition = "width 0.3s ease-out, left 0.3s ease-out" : s.style.transition = "width 0.3s ease";
+      const i = e.value;
+      s.value ? i.style.transition = "width 0.3s ease-out, left 0.3s ease-out" : i.style.transition = "width 0.3s ease";
     }
   }, n = () => {
     e.value && (e.value.style.transition = "");
@@ -427,58 +429,58 @@ function Ne(e, i, t, o) {
   };
   D(() => {
     e.value && e.value.addEventListener("transitionend", n);
-  }), ne(() => {
+  }), le(() => {
     e.value && e.value.removeEventListener("transitionend", n);
-  }), _(e, (s) => {
-    s ? d() : u();
+  }), _(e, (i) => {
+    i ? d() : u();
   }), _(t, () => {
     l();
   }), _(o, () => {
     l();
   });
 }
-function Ue(e, i, t, o) {
-  const l = m(window.innerWidth), n = m(window.innerHeight), { docked: u, orientation: d, movement: s, position: a, isDragging: v } = Ve(
+function Ue(e, s, t, o) {
+  const l = m(window.innerWidth), n = m(window.innerHeight), { docked: u, orientation: d, movement: i, position: a, isDragging: v } = Ye(
     e,
-    i,
+    s,
     o
   ), g = L(() => d.value === "right"), { rect: c, isResizing: h } = Xe(
     e,
     t,
     g,
     o.value.offset
-  ), { width: r, left: p } = Ae(
+  ), { width: r, left: p } = He(
     c,
     h,
     a,
     v
-  ), { lastTop: x, lastHeight: C } = Ye(
+  ), { lastTop: x, lastHeight: C } = Ae(
     L(() => c.value.left),
     L(() => c.value.top),
     L(() => c.value.width),
     L(() => c.value.height)
-  ), { autoOpened: k } = He(e, i, t);
-  Ne(e, g, t, k);
-  const b = (w) => {
+  ), { autoOpened: $ } = Se(e, s, t);
+  Ne(e, g, t, $);
+  const z = (w) => {
     if (e.value) {
-      const M = e.value.getBoundingClientRect(), B = M.left + w;
+      const y = e.value.getBoundingClientRect(), k = y.left + w;
       if (g.value) {
-        c.value.left = B;
-        const le = window.innerWidth - M.width - M.left;
-        M.left <= 0 && le >= 0 && w < 0 && (c.value.left = Math.max(0, B)), window.innerWidth - M.width <= 0 && (c.value.left = window.innerWidth - M.width);
+        c.value.left = k;
+        const oe = window.innerWidth - y.width - y.left;
+        y.left <= 0 && oe >= 0 && w < 0 && (c.value.left = Math.max(0, k)), window.innerWidth - y.width <= 0 && (c.value.left = window.innerWidth - y.width);
       } else
-        M.left + M.width >= window.innerWidth && w < 0 && (c.value.left = Math.max(0, B));
+        y.left + y.width >= window.innerWidth && w < 0 && (c.value.left = Math.max(0, k));
     }
   }, f = () => {
     const w = window.innerWidth - l.value;
-    l.value = window.innerWidth, n.value = window.innerHeight, b(w);
+    l.value = window.innerWidth, n.value = window.innerHeight, z(w);
   };
   D(() => {
     window.addEventListener("resize", f);
   }), U(() => {
     window.removeEventListener("resize", f);
   });
-  const $ = (w) => {
+  const T = (w) => {
     w ? (c.value.width = q, g.value && p.value && r.value && (c.value.left = p.value + r.value - q)) : (c.value.width = r.value, g.value && p.value && r.value && (c.value.left = p.value));
   }, E = () => {
     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);
@@ -486,29 +488,29 @@ function Ue(e, i, t, o) {
   return _(u, () => {
     E();
   }), _(t, (w) => {
-    $(w);
-  }), _(k, (w) => {
-    t.value && !v.value && $(!w);
-  }), _(s, (w) => {
+    T(w);
+  }), _($, (w) => {
+    t.value && !v.value && T(!w);
+  }), _(i, (w) => {
     if (w && e.value) {
-      const B = e.value.getBoundingClientRect();
-      c.value.left = B.left, c.value.top = B.top;
+      const k = e.value.getBoundingClientRect();
+      c.value.left = k.left, c.value.top = k.top;
     }
   }), { rect: c, orientation: d, reversed: g };
 }
-const Fe = (e) => (Z("data-v-539d98d3"), e = e(), P(), e), Ge = /* @__PURE__ */ Fe(() => /* @__PURE__ */ z("svg", {
+const Fe = (e) => (P("data-v-539d98d3"), e = e(), R(), e), Ge = /* @__PURE__ */ Fe(() => /* @__PURE__ */ b("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
 }, [
-  /* @__PURE__ */ z("path", {
+  /* @__PURE__ */ b("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__ */ S({
+], -1)), je = { class: "ml-tool-palette-title" }, qe = { class: "ml-tool-palette-content" }, Je = /* @__PURE__ */ V({
   __name: "MlToolPalette",
-  props: /* @__PURE__ */ V({
+  props: /* @__PURE__ */ Y({
     title: { default: "" },
     leftOffset: { default: 0 },
     rightOffset: { default: 0 },
@@ -518,9 +520,9 @@ const Fe = (e) => (Z("data-v-539d98d3"), e = e(), P(), e), Ge = /* @__PURE__ */
     modelValue: { default: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ V(["close"], ["update:modelValue"]),
-  setup(e, { emit: i }) {
-    const t = e, o = J(e, "modelValue"), l = i, n = m(!1), u = m(null), d = m(null), s = L(() => ({
+  emits: /* @__PURE__ */ Y(["close"], ["update:modelValue"]),
+  setup(e, { emit: s }) {
+    const t = e, o = J(e, "modelValue"), l = s, n = m(!1), u = m(null), d = m(null), i = L(() => ({
       offset: m({
         left: t.leftOffset,
         right: t.rightOffset,
@@ -531,7 +533,7 @@ const Fe = (e) => (Z("data-v-539d98d3"), e = e(), P(), e), Ge = /* @__PURE__ */
       rect: a,
       orientation: v,
       reversed: g
-    } = Ue(d, u, n, s), c = L(() => ({
+    } = Ue(d, u, n, i), c = L(() => ({
       left: `${a.value.left}px`,
       top: `${a.value.top}px`,
       width: `${a.value.width}px`,
@@ -545,59 +547,59 @@ const Fe = (e) => (Z("data-v-539d98d3"), e = e(), P(), e), Ge = /* @__PURE__ */
       });
     };
     return (r, p) => {
-      const x = Y;
-      return o.value ? (y(), I("div", {
+      const x = A;
+      return o.value ? (M(), I("div", {
         key: 0,
         ref_key: "toolPaletteElement",
         ref: d,
-        style: ee([c.value]),
+        style: te([c.value]),
         class: "ml-tool-palette-dialog"
       }, [
-        z("div", {
-          class: R(["ml-tool-palette-dialog-layout", F(v)])
+        b("div", {
+          class: ee(["ml-tool-palette-dialog-layout", F(v)])
         }, [
-          z("div", {
+          b("div", {
             ref_key: "titleBarElement",
             ref: u,
             class: "ml-tool-palette-title-bar"
           }, [
-            H(x, {
+            S(x, {
               size: 18,
               class: "ml-tool-palette-dialog-icon",
               onClick: h
             }, {
-              default: T(() => [
+              default: B(() => [
                 Ge
               ]),
               _: 1
             }),
-            H(Le, {
+            S(Le, {
               class: "ml-tool-palette-dialog-icon",
               modelValue: n.value,
               "onUpdate:modelValue": p[0] || (p[0] = (C) => n.value = C),
               reverse: F(g)
             }, null, 8, ["modelValue", "reverse"]),
-            z("span", je, N(t.title), 1)
+            b("span", je, N(t.title), 1)
           ], 512),
-          z("div", qe, [
+          b("div", qe, [
             O(r.$slots, "default", {}, void 0, !0)
           ])
         ], 2)
-      ], 4)) : te("", !0);
+      ], 4)) : ne("", !0);
     };
   }
-}), Ke = /* @__PURE__ */ A(Je, [["__scopeId", "data-v-539d98d3"]]), st = {
+}), Ke = /* @__PURE__ */ H(Je, [["__scopeId", "data-v-539d98d3"]]), it = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   install(e) {
-    e.component("MlCollapse", X), e.component("MlDropdown", X), e.component("MlLanguage", be), e.component("MlStatusBar", $e), e.component("MlToolbar", De), e.component("MlToolPalette", Ke);
+    e.component("MlCollapse", X), e.component("MlDropdown", X), e.component("MlLanguage", ze), e.component("MlStatusBar", Te), e.component("MlToolbar", De), e.component("MlToolPalette", Ke);
   }
 };
 export {
   Le as MlCollapse,
   X as MlDropdown,
-  be as MlLanguage,
-  $e as MlStatusBar,
+  ze as MlLanguage,
+  Te as MlStatusBar,
+  De as MlToolBar,
   Ke as MlToolPalette,
-  De as MlToolbar,
-  st as default
+  it 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-b0c9d107]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--el-border-color);box-shadow:0 -2px 1-px #0000003d}.ml-status-bar-left[data-v-b0c9d107],.ml-status-bar-right[data-v-b0c9d107]{display:flex;align-items:center}.ml-status-bar-left[data-v-b0c9d107]>*{margin-right:10px}.ml-status-bar-right[data-v-b0c9d107]>*{margin-left:10px}.ml-vertical-toolbar-button-group[data-v-27b5412a]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-27b5412a]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-27b5412a]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-27b5412a]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-539d98d3]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;border:1px solid;border-radius:4px}.ml-tool-palette-dialog-icon[data-v-539d98d3]{border-bottom:1px solid}.ml-tool-palette-dialog-layout[data-v-539d98d3]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-539d98d3]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;border:1px}.ml-tool-palette-title[data-v-539d98d3]{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-539d98d3]{pointer-events:none;-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;align-items:center;background-color:#fff;overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-539d98d3]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-539d98d3],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-539d98d3]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-539d98d3]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-(function(y,E){typeof exports=="object"&&typeof module<"u"?E(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"],E):(y=typeof globalThis<"u"?globalThis:y||self,E(y.UIComponents={},y.es,null,null,y.Vue))})(this,function(y,E,pe,fe,e){"use strict";const O={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},Y=[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 A(t,i){return e.openBlock(),e.createElementBlock("svg",O,[...Y])}const V={render:A},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 $={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?V:$:s.value?$:V),a=e.computed(()=>`${n.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(c,r)=>{const m=E.ElIcon;return e.openBlock(),e.createBlock(m,{size:a.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(a=>a.name!==n.current)),o=a=>{s("click",a)};return(a,h)=>{const c=E.ElIcon,r=E.ElDropdownItem,m=E.ElDropdownMenu,_=E.ElDropdown;return e.openBlock(),e.createBlock(_,{onCommand:o},{dropdown:e.withCtx(()=>[e.createVNode(m,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(()=>[F]),_:1})]),_:1})}}}),z=(t,i)=>{const n=t.__vccOpts||t;for(const[s,l]of i)n[s]=l;return n},T=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,a)=>(e.openBlock(),e.createBlock(T,{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-b0c9d107"]]),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),a=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),h=m=>m.description?m.description:m.text,c=e.computed(()=>n.size==="large"),r=m=>{s("click",m)};return(m,_)=>{const u=E.ElIcon,p=E.ElButton,d=E.ElTooltip,v=E.ElButtonGroup;return e.openBlock(),e.createBlock(v,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.items,(g,B)=>(e.openBlock(),e.createBlock(d,{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:B,onClick:C=>r(g.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(u,{size:o.value,innerHTML:g.icon},null,8,["size","innerHTML"]),c.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-27b5412a"]]),D=20;function ee(t,i,n){const s=e.ref(!1),l=c=>{if(n.value&&t.value){const r=t.value.getBoundingClientRect(),m=c.clientX<r.left||c.clientX>r.right||c.clientY<r.top||c.clientY>r.bottom;s.value=!m}},o=()=>{n.value&&(s.value=!0)},a=()=>{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,c=>{c&&(s.value=!1)}),e.watch(t,c=>{c?a():h()}),{autoOpened:s}}function te(t,i,n){const s=e.ref(!1),l=e.ref(null),o=e.ref(null),a={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}),c=()=>{if(t.value){const d=t.value.getBoundingClientRect();o.value={x:d.left,y:d.top},l.value={x:d.left,y:d.top}}},r=()=>{t.value&&t.value.addEventListener("mousedown",_)},m=()=>{t.value&&t.value.removeEventListener("mousedown",_)},_=d=>{if(t.value!=null){if(i&&i.value){const v=i.value.getBoundingClientRect();if(d.clientX<v.left||d.clientX>v.right||d.clientY<v.top||d.clientY>v.bottom)return}s.value=!0,a.x=d.clientX,a.y=d.clientY,c(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",p)}},u=d=>{if(s.value&&o.value&&l.value){const v=window.innerWidth,g=window.innerHeight,B=t.value,C=B.getBoundingClientRect(),x=C.width,f=C.height,b=o.value.x+(d.clientX-a.x),M=o.value.y+(d.clientY-a.y);l.value.x=Math.max(n?n.value.offset.value.left:0,b);const w=v-x;l.value.x=Math.min(n?w-n.value.offset.value.right:w,l.value.x),l.value.y=Math.max(n?n.value.offset.value.top:0,Math.min(M,g-f));const L=g-f;l.value.y=Math.min(n?L-n.value.offset.value.bottom:L,l.value.y),B.style.left=l.value.x+"px",B.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",_)}),e.watch(t,d=>{d?(c(),r()):m()}),{isDragging:s,movement:h,position:l}}function ne(t,i,n){const s=e.ref(!1),l=e.ref("left"),{isDragging:o,movement:a,position:h}=te(t,i,n);return e.watch(a,c=>{if(c&&t.value){const m=t.value.getBoundingClientRect();m.left<=n.value.offset.value.left?(l.value="left",s.value=!0):window.innerWidth-m.left-m.width<=n.value.offset.value.right?(l.value="right",s.value=!0):s.value=!1}}),{docked:s,orientation:l,isDragging:o,movement:a,position:h}}function oe(t,i,n,s){const l=e.ref(null),o=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)=>{o.value=r}),e.watch(n,(c,r)=>{a.value=r}),e.watch(s,(c,r)=>{h.value=r}),{lastLeft:l,lastTop:o,lastWidth:a,lastHeight:h}}function le(t,i,n,s){const l=e.ref(t.value.width),o=e.ref(t.value.left),a=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),c=e.computed(()=>n.value?n.value.x:null);return e.watch([a,h],([r,m])=>{(l.value==null||o.value==null||i.value)&&(l.value=r,o.value=m)}),e.watch(c,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),a=e.ref(!1);let h=0,c=0,r=0,m=0,_=0;const u=5,p=e.ref(null),d=x=>{if(!(!t.value||i.value))if(a.value){const f=x.clientX-m,b=x.clientY-_;if(p.value==="left"||p.value==="left-bottom-corner"){const M=c-f;M>l.width&&(o.value.width=M,o.value.left=h+f,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 M=c+f;M>l.width&&(o.value.width=M,t.value.style.width=o.value.width+"px")}if(p.value==="bottom"||p.value==="left-bottom-corner"||p.value==="right-bottom-corner"){const M=r+b;M>l.height&&(o.value.height=M,t.value.style.height=o.value.height+"px")}}else{const f=t.value.getBoundingClientRect(),b=x.clientX-f.left,M=x.clientY-f.top,w=b<=u,L=b>=f.width-u,k=M>=f.height-u;w&&k&&n.value?(t.value.style.cursor="nesw-resize",p.value="left-bottom-corner"):L&&k&&!n.value?(t.value.style.cursor="nwse-resize",p.value="right-bottom-corner"):w&&n.value?(t.value.style.cursor="ew-resize",p.value="left"):L&&!n.value?(t.value.style.cursor="ew-resize",p.value="right"):k?(t.value.style.cursor="ns-resize",p.value="bottom"):(t.value.style.cursor="",p.value=null)}},v=x=>{if(!t.value||!p.value)return;const f=t.value.getBoundingClientRect();m=x.clientX,_=x.clientY,c=f.width,r=f.height,h=f.left,o.value.width=c,o.value.height=r,o.value.left=f.left,o.value.top=f.top,a.value=!0,document.addEventListener("mousemove",d),document.addEventListener("mouseup",g)},g=()=>{a.value=!1,p.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",g)},B=()=>{t.value&&(t.value.removeEventListener("mousedown",v),t.value.removeEventListener("mousemove",d)),document.removeEventListener("mouseup",g)},C=()=>{t.value&&(t.value.addEventListener("mousedown",v),t.value.addEventListener("mousemove",d))};return e.onMounted(()=>{t.value&&C()}),e.onBeforeUnmount(()=>{B()}),e.watch(t,x=>{x?C():B()}),{rect:o,isResizing:a}}function ce(t,i,n,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"}},o=()=>{t.value&&(t.value.style.transition="")},a=()=>{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,c=>{c?h():a()}),e.watch(n,()=>{l()}),e.watch(s,()=>{l()})}function ae(t,i,n,s){const l=e.ref(window.innerWidth),o=e.ref(window.innerHeight),{docked:a,orientation:h,movement:c,position:r,isDragging:m}=ne(t,i,s),_=e.computed(()=>h.value==="right"),{rect:u,isResizing:p}=ie(t,n,_,s.value.offset),{width:d,left:v}=le(u,p,r,m),{lastTop:g,lastHeight:B}=oe(e.computed(()=>u.value.left),e.computed(()=>u.value.top),e.computed(()=>u.value.width),e.computed(()=>u.value.height)),{autoOpened:C}=ee(t,i,n);ce(t,_,n,C);const x=w=>{if(t.value){const L=t.value.getBoundingClientRect(),k=L.left+w;if(_.value){u.value.left=k;const he=window.innerWidth-L.width-L.left;L.left<=0&&he>=0&&w<0&&(u.value.left=Math.max(0,k)),window.innerWidth-L.width<=0&&(u.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&w<0&&(u.value.left=Math.max(0,k))}},f=()=>{const w=window.innerWidth-l.value;l.value=window.innerWidth,o.value=window.innerHeight,x(w)};e.onMounted(()=>{window.addEventListener("resize",f)}),e.onUnmounted(()=>{window.removeEventListener("resize",f)});const b=w=>{w?(u.value.width=D,_.value&&v.value&&d.value&&(u.value.left=v.value+d.value-D)):(u.value.width=d.value,_.value&&v.value&&d.value&&(u.value.left=v.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=B.value)};return e.watch(a,()=>{M()}),e.watch(n,w=>{b(w)}),e.watch(C,w=>{n.value&&!m.value&&b(!w)}),e.watch(c,w=>{if(w&&t.value){const k=t.value.getBoundingClientRect();u.value.left=k.left,u.value.top=k.top}}),{rect:u,orientation:h,reversed:_}}const re=(t=>(e.pushScopeId("data-v-539d98d3"),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"},H=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),a=e.ref(null),h=e.ref(null),c=e.computed(()=>({offset:e.ref({left:n.leftOffset,right:n.rightOffset,top:n.topOffset,bottom:n.bottomOffset})})),{rect:r,orientation:m,reversed:_}=ae(h,a,o,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=()=>{s.value=!1;const d=h.value;l("close",{x:d?d.clientLeft:0,y:d?d.clientTop:0})};return(d,v)=>{const g=E.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(m)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:a,class:"ml-tool-palette-title-bar"},[e.createVNode(g,{size:18,class:"ml-tool-palette-dialog-icon",onClick:p},{default:e.withCtx(()=>[re]),_:1}),e.createVNode(S,{class:"ml-tool-palette-dialog-icon",modelValue:o.value,"onUpdate:modelValue":v[0]||(v[0]=B=>o.value=B),reverse:e.unref(_)},null,8,["modelValue","reverse"]),e.createElementVNode("span",ue,e.toDisplayString(n.title),1)],512),e.createElementVNode("div",de,[e.renderSlot(d.$slots,"default",{},void 0,!0)])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-539d98d3"]]),me={install(t){t.component("MlCollapse",T),t.component("MlDropdown",T),t.component("MlLanguage",I),t.component("MlStatusBar",N),t.component("MlToolbar",W),t.component("MlToolPalette",H)}};y.MlCollapse=S,y.MlDropdown=T,y.MlLanguage=I,y.MlStatusBar=N,y.MlToolPalette=H,y.MlToolbar=W,y.default=me,Object.defineProperties(y,{__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-b0c9d107]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--el-border-color);box-shadow:0 -2px 1-px #0000003d}.ml-status-bar-left[data-v-b0c9d107],.ml-status-bar-right[data-v-b0c9d107]{display:flex;align-items:center}.ml-status-bar-left[data-v-b0c9d107]>*{margin-right:10px}.ml-status-bar-right[data-v-b0c9d107]>*{margin-left:10px}.ml-vertical-toolbar-button-group[data-v-fe5399ea]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-fe5399ea]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-fe5399ea]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-fe5399ea]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-539d98d3]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;border:1px solid;border-radius:4px}.ml-tool-palette-dialog-icon[data-v-539d98d3]{border-bottom:1px solid}.ml-tool-palette-dialog-layout[data-v-539d98d3]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-539d98d3]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;border:1px}.ml-tool-palette-title[data-v-539d98d3]{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-539d98d3]{pointer-events:none;-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;align-items:center;background-color:#fff;overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-539d98d3]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-539d98d3],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-539d98d3]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-539d98d3]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(y,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):(y=typeof globalThis<"u"?globalThis:y||self,x(y.UIComponents={},y.es,null,null,y.Vue))})(this,function(y,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:$),a=e.computed(()=>`${n.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(c,r)=>{const m=x.ElIcon;return e.openBlock(),e.createBlock(m,{size:a.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(a=>a.name!==n.current)),o=a=>{s("click",a)};return(a,h)=>{const c=x.ElIcon,r=x.ElDropdownItem,m=x.ElDropdownMenu,_=x.ElDropdown;return e.openBlock(),e.createBlock(_,{onCommand:o},{dropdown:e.withCtx(()=>[e.createVNode(m,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(()=>[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,a)=>(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-b0c9d107"]]),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),a=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),h=m=>m.description?m.description:m.text,c=e.computed(()=>n.size==="large"),r=m=>{s("click",m)};return(m,_)=>{const u=x.ElIcon,p=x.ElButton,d=x.ElTooltip,v=x.ElButtonGroup;return e.openBlock(),e.createBlock(v,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.items,(g,M)=>(e.openBlock(),e.createBlock(d,{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:M,onClick:C=>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"]),c.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-fe5399ea"]]),D=20;function ee(t,i,n){const s=e.ref(!1),l=c=>{if(n.value&&t.value){const r=t.value.getBoundingClientRect(),m=c.clientX<r.left||c.clientX>r.right||c.clientY<r.top||c.clientY>r.bottom;s.value=!m}},o=()=>{n.value&&(s.value=!0)},a=()=>{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,c=>{c&&(s.value=!1)}),e.watch(t,c=>{c?a():h()}),{autoOpened:s}}function te(t,i,n){const s=e.ref(!1),l=e.ref(null),o=e.ref(null),a={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}),c=()=>{if(t.value){const d=t.value.getBoundingClientRect();o.value={x:d.left,y:d.top},l.value={x:d.left,y:d.top}}},r=()=>{t.value&&t.value.addEventListener("mousedown",_)},m=()=>{t.value&&t.value.removeEventListener("mousedown",_)},_=d=>{if(t.value!=null){if(i&&i.value){const v=i.value.getBoundingClientRect();if(d.clientX<v.left||d.clientX>v.right||d.clientY<v.top||d.clientY>v.bottom)return}s.value=!0,a.x=d.clientX,a.y=d.clientY,c(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",p)}},u=d=>{if(s.value&&o.value&&l.value){const v=window.innerWidth,g=window.innerHeight,M=t.value,C=M.getBoundingClientRect(),B=C.width,f=C.height,b=o.value.x+(d.clientX-a.x),E=o.value.y+(d.clientY-a.y);l.value.x=Math.max(n?n.value.offset.value.left:0,b);const w=v-B;l.value.x=Math.min(n?w-n.value.offset.value.right:w,l.value.x),l.value.y=Math.max(n?n.value.offset.value.top:0,Math.min(E,g-f));const L=g-f;l.value.y=Math.min(n?L-n.value.offset.value.bottom:L,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&&(c(),r())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",_)}),e.watch(t,d=>{d?(c(),r()):m()}),{isDragging:s,movement:h,position:l}}function ne(t,i,n){const s=e.ref(!1),l=e.ref("left"),{isDragging:o,movement:a,position:h}=te(t,i,n);return e.watch(a,c=>{if(c&&t.value){const m=t.value.getBoundingClientRect();m.left<=n.value.offset.value.left?(l.value="left",s.value=!0):window.innerWidth-m.left-m.width<=n.value.offset.value.right?(l.value="right",s.value=!0):s.value=!1}}),{docked:s,orientation:l,isDragging:o,movement:a,position:h}}function oe(t,i,n,s){const l=e.ref(null),o=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)=>{o.value=r}),e.watch(n,(c,r)=>{a.value=r}),e.watch(s,(c,r)=>{h.value=r}),{lastLeft:l,lastTop:o,lastWidth:a,lastHeight:h}}function le(t,i,n,s){const l=e.ref(t.value.width),o=e.ref(t.value.left),a=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),c=e.computed(()=>n.value?n.value.x:null);return e.watch([a,h],([r,m])=>{(l.value==null||o.value==null||i.value)&&(l.value=r,o.value=m)}),e.watch(c,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),a=e.ref(!1);let h=0,c=0,r=0,m=0,_=0;const u=5,p=e.ref(null),d=B=>{if(!(!t.value||i.value))if(a.value){const f=B.clientX-m,b=B.clientY-_;if(p.value==="left"||p.value==="left-bottom-corner"){const E=c-f;E>l.width&&(o.value.width=E,o.value.left=h+f,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 E=c+f;E>l.width&&(o.value.width=E,t.value.style.width=o.value.width+"px")}if(p.value==="bottom"||p.value==="left-bottom-corner"||p.value==="right-bottom-corner"){const E=r+b;E>l.height&&(o.value.height=E,t.value.style.height=o.value.height+"px")}}else{const f=t.value.getBoundingClientRect(),b=B.clientX-f.left,E=B.clientY-f.top,w=b<=u,L=b>=f.width-u,k=E>=f.height-u;w&&k&&n.value?(t.value.style.cursor="nesw-resize",p.value="left-bottom-corner"):L&&k&&!n.value?(t.value.style.cursor="nwse-resize",p.value="right-bottom-corner"):w&&n.value?(t.value.style.cursor="ew-resize",p.value="left"):L&&!n.value?(t.value.style.cursor="ew-resize",p.value="right"):k?(t.value.style.cursor="ns-resize",p.value="bottom"):(t.value.style.cursor="",p.value=null)}},v=B=>{if(!t.value||!p.value)return;const f=t.value.getBoundingClientRect();m=B.clientX,_=B.clientY,c=f.width,r=f.height,h=f.left,o.value.width=c,o.value.height=r,o.value.left=f.left,o.value.top=f.top,a.value=!0,document.addEventListener("mousemove",d),document.addEventListener("mouseup",g)},g=()=>{a.value=!1,p.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",g)},M=()=>{t.value&&(t.value.removeEventListener("mousedown",v),t.value.removeEventListener("mousemove",d)),document.removeEventListener("mouseup",g)},C=()=>{t.value&&(t.value.addEventListener("mousedown",v),t.value.addEventListener("mousemove",d))};return e.onMounted(()=>{t.value&&C()}),e.onBeforeUnmount(()=>{M()}),e.watch(t,B=>{B?C():M()}),{rect:o,isResizing:a}}function ce(t,i,n,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"}},o=()=>{t.value&&(t.value.style.transition="")},a=()=>{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,c=>{c?h():a()}),e.watch(n,()=>{l()}),e.watch(s,()=>{l()})}function ae(t,i,n,s){const l=e.ref(window.innerWidth),o=e.ref(window.innerHeight),{docked:a,orientation:h,movement:c,position:r,isDragging:m}=ne(t,i,s),_=e.computed(()=>h.value==="right"),{rect:u,isResizing:p}=ie(t,n,_,s.value.offset),{width:d,left:v}=le(u,p,r,m),{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:C}=ee(t,i,n);ce(t,_,n,C);const B=w=>{if(t.value){const L=t.value.getBoundingClientRect(),k=L.left+w;if(_.value){u.value.left=k;const he=window.innerWidth-L.width-L.left;L.left<=0&&he>=0&&w<0&&(u.value.left=Math.max(0,k)),window.innerWidth-L.width<=0&&(u.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&w<0&&(u.value.left=Math.max(0,k))}},f=()=>{const w=window.innerWidth-l.value;l.value=window.innerWidth,o.value=window.innerHeight,B(w)};e.onMounted(()=>{window.addEventListener("resize",f)}),e.onUnmounted(()=>{window.removeEventListener("resize",f)});const b=w=>{w?(u.value.width=D,_.value&&v.value&&d.value&&(u.value.left=v.value+d.value-D)):(u.value.width=d.value,_.value&&v.value&&d.value&&(u.value.left=v.value))},E=()=>{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=M.value)};return e.watch(a,()=>{E()}),e.watch(n,w=>{b(w)}),e.watch(C,w=>{n.value&&!m.value&&b(!w)}),e.watch(c,w=>{if(w&&t.value){const k=t.value.getBoundingClientRect();u.value.left=k.left,u.value.top=k.top}}),{rect:u,orientation:h,reversed:_}}const re=(t=>(e.pushScopeId("data-v-539d98d3"),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),a=e.ref(null),h=e.ref(null),c=e.computed(()=>({offset:e.ref({left:n.leftOffset,right:n.rightOffset,top:n.topOffset,bottom:n.bottomOffset})})),{rect:r,orientation:m,reversed:_}=ae(h,a,o,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=()=>{s.value=!1;const d=h.value;l("close",{x:d?d.clientLeft:0,y:d?d.clientTop:0})};return(d,v)=>{const g=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(m)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:a,class:"ml-tool-palette-title-bar"},[e.createVNode(g,{size:18,class:"ml-tool-palette-dialog-icon",onClick:p},{default:e.withCtx(()=>[re]),_:1}),e.createVNode(S,{class:"ml-tool-palette-dialog-icon",modelValue:o.value,"onUpdate:modelValue":v[0]||(v[0]=M=>o.value=M),reverse:e.unref(_)},null,8,["modelValue","reverse"]),e.createElementVNode("span",ue,e.toDisplayString(n.title),1)],512),e.createElementVNode("div",de,[e.renderSlot(d.$slots,"default",{},void 0,!0)])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-539d98d3"]]),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)}};y.MlCollapse=S,y.MlDropdown=V,y.MlLanguage=I,y.MlStatusBar=N,y.MlToolBar=W,y.MlToolPalette=O,y.default=me,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/index.d.ts

@@ -2,11 +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 MlToolbar from './components/MlToolbar.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, MlToolBar, MlToolPalette };
 export type { MlDropdownMenuItem } from './components/MlDropdown.vue';
-export type { MlButtonData } from './components/MlToolbar.vue';
+export type { MlButtonData } from './components/MlToolBar.vue';
 declare const _default: {
     install(app: any): void;
 };

package/lib/index.js

@@ -2,9 +2,9 @@ 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 MlToolbar from './components/MlToolbar.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, MlToolBar, MlToolPalette };
 // Optionally, export them as a plugin for Vue
 export default {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13,7 +13,7 @@ export default {
         app.component('MlDropdown', MlDropdown);
         app.component('MlLanguage', MlLanguage);
         app.component('MlStatusBar', MlStatusBar);
-        app.component('MlToolbar', MlToolbar);
+        app.component('MlToolbar', MlToolBar);
         app.component('MlToolPalette', MlToolPalette);
     }
 };

package/package.json

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

package/src/components/{MlToolbar.vue → MlToolBar.vue}

@@ -13,8 +13,9 @@
         @click="handleCommand(item.command)"
       >
         <div>
-          <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
-          <el-icon :size="buttonIconSize" v-html="item.icon" />
+          <el-icon :size="buttonIconSize">
+            <component :is="item.icon" />
+          </el-icon>
           <div v-if="isShowButtonText" class="ml-toolbar-button-text">
             {{ item.text }}
           </div>
@@ -25,16 +26,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, DefineComponent } from 'vue'
+
+export type MlIconType = () => DefineComponent
 
 /**
  * Data to descibe button appearance
  */
 export interface MlButtonData {
   /**
-   * Icon represented by one SVG string
+   * Icon represented by one vue component
    */
-  icon: string
+  icon: MlIconType
   /**
    * Text shown below icon
    */
@@ -50,7 +53,7 @@ export interface MlButtonData {
 }
 
 /**
- * Properties of MlToolbar component
+ * Properties of MlToolBar component
  */
 interface Props {
   /**

package/src/index.ts

@@ -2,18 +2,18 @@ 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 MlToolbar from './components/MlToolbar.vue'
+import MlToolBar from './components/MlToolBar.vue'
 import MlToolPalette from './components/MlToolPalette.vue'
 export {
   MlCollapse,
   MlDropdown,
   MlLanguage,
   MlStatusBar,
-  MlToolbar,
+  MlToolBar,
   MlToolPalette
 }
 export type { MlDropdownMenuItem } from './components/MlDropdown.vue'
-export type { MlButtonData } from './components/MlToolbar.vue'
+export type { MlButtonData } from './components/MlToolBar.vue'
 
 // Optionally, export them as a plugin for Vue
 export default {
@@ -23,7 +23,7 @@ export default {
     app.component('MlDropdown', MlDropdown)
     app.component('MlLanguage', MlLanguage)
     app.component('MlStatusBar', MlStatusBar)
-    app.component('MlToolbar', MlToolbar)
+    app.component('MlToolBar', MlToolBar)
     app.component('MlToolPalette', MlToolPalette)
   }
 }