@mlightcad/ui-components 0.0.8 → 0.0.10

package/dist/ui-components.es.js

@@ -1,83 +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-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-d69f63b3]{cursor:default;width:300px;min-width:var(--collapsed-width);position:absolute;border:1px solid;border-radius:4px}.ml-tool-palette-dialog-icon[data-v-d69f63b3]{border-bottom:1px solid}.ml-tool-palette-dialog-layout[data-v-d69f63b3]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-d69f63b3]{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-d69f63b3]{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-d69f63b3]{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-d69f63b3]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-d69f63b3],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-d69f63b3]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-d69f63b3]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { ElIcon as S, ElDropdownItem as ee, ElDropdownMenu as te, ElDropdown as le, ElButton as ne, ElTooltip as oe, ElButtonGroup as ie } 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-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";
 import "element-plus/es/components/base/style/css";
 import "element-plus/es/components/icon/style/css";
-import { openBlock as _, createElementBlock as b, createElementVNode as g, defineComponent as D, mergeModels as W, useModel as N, computed as L, createBlock as E, withCtx as M, resolveDynamicComponent as se, createVNode as $, Fragment as O, renderList as F, createTextVNode as ae, toDisplayString as A, pushScopeId as j, popScopeId as q, normalizeClass as J, normalizeStyle as K, createCommentVNode as Q, ref as f, onMounted as I, nextTick as H, watch as C, onBeforeUnmount as Z, onUnmounted as R, unref as ue, renderSlot as ce } from "vue";
+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 "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 re = {
+const de = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
-}, ve = /* @__PURE__ */ g("path", {
+}, me = /* @__PURE__ */ z("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), de = [
-  ve
+}, null, -1), he = [
+  me
 ];
-function me(e, l) {
-  return _(), b("svg", re, [...de]);
+function fe(e, i) {
+  return y(), I("svg", de, [...he]);
 }
-const X = { render: me }, he = {
+const G = { render: fe }, pe = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
-}, pe = /* @__PURE__ */ g("path", {
+}, we = /* @__PURE__ */ z("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), fe = [
-  pe
+}, null, -1), _e = [
+  we
 ];
-function _e(e, l) {
-  return _(), b("svg", he, [...fe]);
+function ge(e, i) {
+  return y(), I("svg", pe, [..._e]);
 }
-const U = { render: _e }, we = /* @__PURE__ */ D({
+const j = { render: ge }, Le = /* @__PURE__ */ S({
   __name: "MlCollapse",
-  props: /* @__PURE__ */ W({
+  props: /* @__PURE__ */ V({
     size: { default: 18 },
     reverse: { type: Boolean, default: !1 }
   }, {
     modelValue: { default: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ W({
-    change: null
-  }, ["update:modelValue"]),
-  setup(e, { emit: l }) {
-    const n = e, t = N(e, "modelValue"), o = l, c = L(() => n.reverse ? t.value ? X : U : t.value ? U : X), s = L(() => `${n.size}px`), v = () => {
-      o("change", t.value), t.value = !t.value;
+  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 = () => {
+      l("change", o.value), o.value = !o.value;
     };
-    return (u, h) => {
-      const r = S;
-      return _(), E(r, {
-        size: s.value,
-        onClick: v
+    return (s, a) => {
+      const v = Y;
+      return y(), W(v, {
+        size: u.value,
+        onClick: d
       }, {
-        default: M(() => [
-          (_(), E(se(c.value)))
+        default: T(() => [
+          (y(), W(re(n.value)))
         ]),
         _: 1
       }, 8, ["size"]);
     };
   }
-}), xe = (e) => (j("data-v-3fc33b5d"), e = e(), q(), e), Le = /* @__PURE__ */ xe(() => /* @__PURE__ */ g("svg", {
+}), xe = (e) => (Z("data-v-3fc33b5d"), e = e(), P(), e), Me = /* @__PURE__ */ xe(() => /* @__PURE__ */ z("svg", {
   preserveAspectRatio: "xMidYMid meet",
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em",
   "data-v-63d067da": ""
 }, [
-  /* @__PURE__ */ g("path", {
+  /* @__PURE__ */ z("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)), ge = /* @__PURE__ */ D({
+], -1)), ye = /* @__PURE__ */ S({
   __name: "MlDropdown",
   props: {
     icon: {},
@@ -87,22 +85,22 @@ const U = { render: _e }, we = /* @__PURE__ */ D({
   emits: {
     click: null
   },
-  setup(e, { emit: l }) {
-    const n = e, t = l, o = L(() => n.items.filter((s) => s.name !== n.current)), c = (s) => {
-      t("click", s);
+  setup(e, { emit: i }) {
+    const t = e, o = i, l = L(() => t.items.filter((u) => u.name !== t.current)), n = (u) => {
+      o("click", u);
     };
-    return (s, v) => {
-      const u = S, h = ee, r = te, i = le;
-      return _(), E(i, { onCommand: c }, {
-        dropdown: M(() => [
-          $(r, null, {
-            default: M(() => [
-              (_(!0), b(O, null, F(o.value, (a) => (_(), E(h, {
-                key: a.text,
-                command: a.name
+    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, {
+                key: c.text,
+                command: c.name
               }, {
-                default: M(() => [
-                  ae(A(a.text), 1)
+                default: T(() => [
+                  ve(N(c.text), 1)
                 ]),
                 _: 2
               }, 1032, ["command"]))), 128))
@@ -110,13 +108,13 @@ const U = { render: _e }, we = /* @__PURE__ */ D({
             _: 1
           })
         ]),
-        default: M(() => [
-          $(u, {
+        default: T(() => [
+          H(s, {
             size: "30",
             class: "ml-dropdown-icon"
           }, {
-            default: M(() => [
-              Le
+            default: T(() => [
+              Me
             ]),
             _: 1
           })
@@ -125,12 +123,12 @@ const U = { render: _e }, we = /* @__PURE__ */ D({
       });
     };
   }
-}), G = (e, l) => {
-  const n = e.__vccOpts || e;
-  for (const [t, o] of l)
-    n[t] = o;
-  return n;
-}, Y = /* @__PURE__ */ G(ge, [["__scopeId", "data-v-3fc33b5d"]]), Me = '<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>', ye = /* @__PURE__ */ D({
+}), A = (e, i) => {
+  const t = e.__vccOpts || e;
+  for (const [o, l] of i)
+    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({
   __name: "MlLanguage",
   props: {
     languages: {},
@@ -139,21 +137,32 @@ const U = { render: _e }, we = /* @__PURE__ */ D({
   emits: {
     click: null
   },
-  setup(e, { emit: l }) {
-    const n = e, t = l, o = (c) => {
-      t("click", c);
+  setup(e, { emit: i }) {
+    const t = e, o = i, l = (n) => {
+      o("click", n);
     };
-    return (c, s) => (_(), E(Y, {
-      icon: Me,
-      items: n.languages,
-      current: n.current,
-      onClick: o
+    return (n, u) => (y(), W(X, {
+      icon: Ee,
+      items: t.languages,
+      current: t.current,
+      onClick: l
     }, null, 8, ["items", "current"]));
   }
-}), ze = {
+}), 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, [
+      O(e.$slots, "left", {}, void 0, !0)
+    ]),
+    z("div", Te, [
+      O(e.$slots, "right", {}, void 0, !0)
+    ])
+  ]);
+}
+const $e = /* @__PURE__ */ A(ze, [["render", ke], ["__scopeId", "data-v-b0c9d107"]]), We = {
   key: 0,
   class: "ml-toolbar-button-text"
-}, Ee = /* @__PURE__ */ D({
+}, Ie = /* @__PURE__ */ S({
   __name: "MlToolbar",
   props: {
     items: {},
@@ -163,43 +172,43 @@ const U = { render: _e }, we = /* @__PURE__ */ D({
   emits: {
     click: null
   },
-  setup(e, { emit: l }) {
-    const n = e, t = l, o = L(() => n.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), c = L(() => n.size === "small" ? 20 : 30), s = L(() => {
-      switch (n.size) {
+  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(() => {
+      switch (t.size) {
         case "small":
           return 30;
         case "medium":
           return 50;
       }
       return 70;
-    }), v = (r) => r.description ? r.description : r.text, u = L(() => n.size === "large"), h = (r) => {
-      t("click", r);
+    }), d = (v) => v.description ? v.description : v.text, s = L(() => t.size === "large"), a = (v) => {
+      o("click", v);
     };
-    return (r, i) => {
-      const a = S, p = ne, x = oe, y = ie;
-      return _(), E(y, {
-        class: J(o.value)
+    return (v, g) => {
+      const c = Y, h = ue, r = ae, p = ce;
+      return y(), W(p, {
+        class: R(l.value)
       }, {
-        default: M(() => [
-          (_(!0), b(O, null, F(r.items, (w, d) => (_(), E(x, {
-            key: w.text,
-            content: v(w),
+        default: T(() => [
+          (y(!0), I(K, null, Q(v.items, (x, C) => (y(), W(r, {
+            key: x.text,
+            content: d(x),
             "hide-after": 0
           }, {
-            default: M(() => [
-              (_(), E(p, {
+            default: T(() => [
+              (y(), W(h, {
                 class: "ml-toolbar-button",
-                style: K({ width: s.value + "px", height: s.value + "px" }),
-                key: d,
-                onClick: (m) => h(w.command)
+                style: ee({ width: u.value + "px", height: u.value + "px" }),
+                key: C,
+                onClick: (k) => a(x.command)
               }, {
-                default: M(() => [
-                  g("div", null, [
-                    $(a, {
-                      size: c.value,
-                      innerHTML: w.icon
+                default: T(() => [
+                  z("div", null, [
+                    H(c, {
+                      size: n.value,
+                      innerHTML: x.icon
                     }, null, 8, ["size", "innerHTML"]),
-                    u.value ? (_(), b("div", ze, A(w.text), 1)) : Q("", !0)
+                    s.value ? (y(), I("div", We, N(x.text), 1)) : te("", !0)
                   ])
                 ]),
                 _: 2
@@ -212,294 +221,383 @@ const U = { render: _e }, we = /* @__PURE__ */ D({
       }, 8, ["class"]);
     };
   }
-}), Ce = /* @__PURE__ */ G(Ee, [["__scopeId", "data-v-27b5412a"]]), V = 20;
-function be(e) {
-  const l = f({});
-  let n = !1;
-  const t = () => {
-    if (!n && e.value) {
-      const o = e.value.getBoundingClientRect();
-      l.value.left = o.left, l.value.top = o.top, l.value.width = o.width, l.value.height = o.height, n = !0;
+}), De = /* @__PURE__ */ A(Ie, [["__scopeId", "data-v-27b5412a"]]), q = 20;
+function He(e, i, t) {
+  const o = m(!1), l = (s) => {
+    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;
+      o.value = !v;
+    }
+  }, n = () => {
+    t.value && (o.value = !0);
+  }, u = () => {
+    i.value && i.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);
+  };
+  return D(() => {
+    window.addEventListener("mousemove", l);
+  }), U(() => {
+    window.removeEventListener("mousemove", l);
+  }), _(t, (s) => {
+    s && (o.value = !1);
+  }), _(e, (s) => {
+    s ? u() : d();
+  }), { autoOpened: o };
+}
+function Se(e, i, 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 = () => {
+    if (e.value) {
+      const r = e.value.getBoundingClientRect();
+      n.value = {
+        x: r.left,
+        y: r.top
+      }, l.value = {
+        x: r.left,
+        y: r.top
+      };
+    }
+  }, a = () => {
+    e.value && e.value.addEventListener("mousedown", g);
+  }, v = () => {
+    e.value && e.value.removeEventListener("mousedown", g);
+  }, g = (r) => {
+    if (e.value != null) {
+      if (i && i.value) {
+        const p = i.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);
+    }
+  }, 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);
+      l.value.x = Math.max(
+        t ? t.value.offset.value.left : 0,
+        $
+      );
+      const w = p - b;
+      l.value.x = Math.min(
+        t ? w - t.value.offset.value.right : w,
+        l.value.x
+      ), l.value.y = Math.max(
+        t ? t.value.offset.value.top : 0,
+        Math.min(E, x - f)
+      );
+      const M = x - f;
+      l.value.y = Math.min(
+        t ? M - t.value.offset.value.bottom : M,
+        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(() => {
+    e.value && (s(), a());
+  }), U(() => {
+    e.value && e.value.removeEventListener("mousedown", g);
+  }), _(e, (r) => {
+    r ? (s(), 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(
+    e,
+    i,
+    t
+  );
+  return _(u, (s) => {
+    if (s && 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;
+    }
+  }), {
+    docked: o,
+    orientation: l,
+    isDragging: n,
+    movement: u,
+    position: d
+  };
+}
+function Ye(e, i, t, o) {
+  const l = m(null), n = m(null), u = m(null), d = m(null);
+  return _(e, (s, a) => {
+    l.value = a;
+  }), _(i, (s, a) => {
+    n.value = a;
+  }), _(t, (s, a) => {
+    u.value = a;
+  }), _(o, (s, a) => {
+    d.value = a;
+  }), {
+    lastLeft: l,
+    lastTop: n,
+    lastWidth: u,
+    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);
+  return _([u, d], ([a, v]) => {
+    (l.value == null || n.value == null || i.value) && (l.value = a, n.value = v);
+  }), _(s, (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 })) {
+  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;
     }
   };
-  return I(() => {
-    e.value && H(() => {
-      t();
-    });
-  }), C(e, (o) => {
-    o && H(() => {
-      t();
-    });
+  return D(() => {
+    e.value && l();
+  }), _(e, (n) => {
+    n && l();
   }), {
-    isIntialized: n,
-    initialRect: l
+    isIntialized: o,
+    initialRect: t
   };
 }
-function ke(e, l = f(!1), n = { width: 20, height: 40 }) {
-  const t = f({
-    width: null,
-    height: null,
-    left: null,
-    top: null
-  }), o = f(!1);
-  let c = 0, s = 0, v = 0, u = 0, h = 0;
-  const r = 5, i = f(
-    null
-  ), a = (d) => {
-    if (e.value)
-      if (o.value) {
-        const m = d.clientX - u, z = d.clientY - h;
-        (i.value === "left" || i.value === "left-bottom-corner") && (t.value.width = Math.max(
-          n.width,
-          s - m
-        ), t.value.left = c + m, e.value.style.left = t.value.left + "px", e.value.style.width = t.value.width + "px"), (i.value === "right" || i.value === "right-bottom-corner") && (t.value.width = Math.max(
-          n.width,
-          s + m
-        ), e.value.style.width = t.value.width + "px"), (i.value === "bottom" || i.value === "left-bottom-corner" || i.value === "right-bottom-corner") && (t.value.height = Math.max(
-          n.height,
-          v + z
-        ), e.value.style.height = t.value.height + "px");
+function Xe(e, i = 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))
+      if (u.value) {
+        const f = b.clientX - v, $ = b.clientY - g;
+        if (h.value === "left" || h.value === "left-bottom-corner") {
+          const E = s - 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;
+          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 + $;
+          E > l.height && (n.value.height = E, e.value.style.height = n.value.height + "px");
+        }
       } else {
-        const m = e.value.getBoundingClientRect(), z = d.clientX - m.left, k = d.clientY - m.top, B = z <= r, T = z >= m.width - r, P = k >= m.height - r;
-        B && P && l.value ? (e.value.style.cursor = "nesw-resize", i.value = "left-bottom-corner") : T && P && !l.value ? (e.value.style.cursor = "nwse-resize", i.value = "right-bottom-corner") : B && l.value ? (e.value.style.cursor = "ew-resize", i.value = "left") : T && !l.value ? (e.value.style.cursor = "ew-resize", i.value = "right") : P ? (e.value.style.cursor = "ns-resize", i.value = "bottom") : (e.value.style.cursor = "", i.value = null);
+        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);
       }
-  }, p = (d) => {
-    if (!e.value || !i.value) return;
-    const m = e.value.getBoundingClientRect();
-    u = d.clientX, h = d.clientY, s = m.width, v = m.height, c = m.left, t.value.width = s, t.value.height = v, t.value.left = m.left, t.value.top = m.top, o.value = !0, document.addEventListener("mousemove", a), document.addEventListener("mouseup", x);
+  }, p = (b) => {
+    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);
   }, x = () => {
-    o.value = !1, i.value = null, e.value && (e.value.style.cursor = ""), document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", x);
-  }, y = () => {
-    e.value && (e.value.removeEventListener("mousedown", p), e.value.removeEventListener("mousemove", a)), document.removeEventListener("mouseup", x);
-  }, w = () => {
-    e.value && (e.value.addEventListener("mousedown", p), e.value.addEventListener("mousemove", a));
+    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 I(() => {
-    e.value && w();
-  }), Z(() => {
-    y();
-  }), C(e, (d) => {
-    d ? w() : y();
-  }), { rect: t, isResizing: o };
+  return D(() => {
+    e.value && k();
+  }), ne(() => {
+    C();
+  }), _(e, (b) => {
+    b ? k() : C();
+  }), { rect: n, isResizing: u };
 }
-function Be(e, l, n) {
-  function t() {
-    e.value && (e.value.style.transition = "");
-  }
-  const o = () => {
-    e.value && e.value.removeEventListener("transitionend", t);
-  }, c = () => {
-    e.value && e.value.addEventListener("transitionend", t);
-  };
-  I(() => {
-    e.value && e.value.addEventListener("transitionend", t);
-  }), Z(() => {
-    e.value && e.value.removeEventListener("transitionend", t);
-  }), C(e, (s) => {
-    s ? c() : o();
-  }), C(n, () => {
+function Ne(e, i, t, o) {
+  const l = () => {
     if (e.value) {
       const s = e.value;
-      l.value ? s.style.transition = "width 0.3s ease-out, left 0.3s ease-out" : s.style.transition = "width 0.3s ease";
+      i.value ? s.style.transition = "width 0.3s ease-out, left 0.3s ease-out" : s.style.transition = "width 0.3s ease";
     }
-  });
-}
-function Te(e, l, n, t) {
-  const o = f(window.innerWidth), c = f(window.innerHeight), { initialRect: s } = be(e), { rect: v } = ke(e, l);
-  Be(e, l, n);
-  const u = L(() => v.value.width && v.value.height ? v.value : s.value), h = (a) => {
-    if (e.value && l.value) {
-      const p = e.value.getBoundingClientRect();
-      e.value.style.left = p.left + a + "px";
-    }
-  }, r = () => {
-    const a = window.innerWidth - o.value;
-    o.value = window.innerWidth, c.value = window.innerHeight, h(a);
+  }, n = () => {
+    e.value && (e.value.style.transition = "");
+  }, u = () => {
+    e.value && e.value.removeEventListener("transitionend", n);
+  }, d = () => {
+    e.value && e.value.addEventListener("transitionend", n);
   };
-  I(() => {
-    window.addEventListener("resize", r);
-  }), R(() => {
-    window.removeEventListener("resize", r);
+  D(() => {
+    e.value && e.value.addEventListener("transitionend", n);
+  }), ne(() => {
+    e.value && e.value.removeEventListener("transitionend", n);
+  }), _(e, (s) => {
+    s ? d() : u();
+  }), _(t, () => {
+    l();
+  }), _(o, () => {
+    l();
   });
-  let i = null;
-  return C(n, (a) => {
-    a ? (i = u.value.width, u.value.width = V, l.value && u.value.left && i && (u.value.left = u.value.left + i - V)) : (u.value.width = i, l.value && u.value.left && i && (u.value.left = u.value.left - i + V), i = null);
-  }), C(t, (a) => {
-    if (a && e.value) {
-      const x = e.value.getBoundingClientRect();
-      u.value.left = x.left, u.value.top = x.top;
-    }
-  }), { rect: u };
 }
-function $e(e, l) {
-  const n = f(!1), t = f({ x: 0, y: 0 }), o = f({ x: 0, y: 0 }), c = L(() => ({
-    x: t.value.x - o.value.x,
-    y: t.value.y - o.value.y
-  })), s = () => {
+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(
+    e,
+    i,
+    o
+  ), g = L(() => d.value === "right"), { rect: c, isResizing: h } = Xe(
+    e,
+    t,
+    g,
+    o.value.offset
+  ), { width: r, left: p } = Ae(
+    c,
+    h,
+    a,
+    v
+  ), { lastTop: x, lastHeight: C } = Ye(
+    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) => {
     if (e.value) {
-      const a = e.value.getBoundingClientRect();
-      o.value.x = a.left, o.value.y = a.top, t.value.x = a.left, t.value.y = a.top;
+      const M = e.value.getBoundingClientRect(), B = M.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);
+      } else
+        M.left + M.width >= window.innerWidth && w < 0 && (c.value.left = Math.max(0, B));
     }
-  }, v = () => {
-    e.value && e.value.addEventListener("mousedown", h);
-  }, u = () => {
-    e.value && e.value.removeEventListener("mousedown", h);
-  }, h = () => {
-    n.value = !0, document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
-  }, r = (a) => {
-    if (n.value) {
-      const p = window.innerWidth, x = window.innerHeight, y = e.value, w = y.offsetWidth, d = y.offsetHeight, m = t.value.x + a.movementX, z = t.value.y + a.movementY;
-      t.value.x = Math.max(
-        l ? l.value.leftGap : 0,
-        Math.min(m, p - w)
-      );
-      const k = l && l.value.container ? l.value.container.clientWidth : 0, B = p - k - w;
-      if (t.value.x = Math.min(
-        l ? B - l.value.rightGap : B,
-        t.value.x
-      ), t.value.y = Math.max(
-        0,
-        Math.min(z, x - d)
-      ), l != null && l.value.container) {
-        const T = l == null ? void 0 : l.value.container;
-        T.style.left = t.value.x + "px", T.style.top = t.value.y + "px";
-      }
-    }
-  }, i = () => {
-    n.value = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i);
+  }, f = () => {
+    const w = window.innerWidth - l.value;
+    l.value = window.innerWidth, n.value = window.innerHeight, b(w);
   };
-  return I(() => {
-    e.value && H(() => {
-      s(), v();
-    });
-  }), R(() => {
-    e.value && (s(), e.value.removeEventListener("mousedown", h));
-  }), C(e, (a) => {
-    a ? H(() => {
-      s(), v();
-    }) : u();
-  }), {
-    isDragging: n,
-    movement: c,
-    position: t
+  D(() => {
+    window.addEventListener("resize", f);
+  }), U(() => {
+    window.removeEventListener("resize", f);
+  });
+  const $ = (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);
   };
-}
-function De(e, l) {
-  const n = f(!1), t = f("left"), { isDragging: o, movement: c, position: s } = $e(e, l);
-  return C(c, (v) => {
-    if (v && l.value.container) {
-      const h = l.value.container.getBoundingClientRect();
-      h.left <= l.value.leftGap ? (t.value = "left", n.value = !0) : window.innerWidth - h.left - h.width - V <= l.value.rightGap ? (t.value = "right", n.value = !0) : n.value = !1;
+  return _(u, () => {
+    E();
+  }), _(t, (w) => {
+    $(w);
+  }), _(k, (w) => {
+    t.value && !v.value && $(!w);
+  }), _(s, (w) => {
+    if (w && e.value) {
+      const B = e.value.getBoundingClientRect();
+      c.value.left = B.left, c.value.top = B.top;
     }
-  }), {
-    docked: n,
-    orientation: t,
-    isDragging: o,
-    movement: c,
-    position: s
-  };
+  }), { rect: c, orientation: d, reversed: g };
 }
-const Ie = (e) => (j("data-v-d69f63b3"), e = e(), q(), e), Ve = /* @__PURE__ */ Ie(() => /* @__PURE__ */ g("svg", {
+const Fe = (e) => (Z("data-v-539d98d3"), e = e(), P(), e), Ge = /* @__PURE__ */ Fe(() => /* @__PURE__ */ z("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
 }, [
-  /* @__PURE__ */ g("path", {
+  /* @__PURE__ */ z("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)), We = { class: "ml-tool-palette-title" }, He = { class: "ml-tool-palette-content" }, Se = /* @__PURE__ */ D({
+], -1)), je = { class: "ml-tool-palette-title" }, qe = { class: "ml-tool-palette-content" }, Je = /* @__PURE__ */ S({
   __name: "MlToolPalette",
-  props: /* @__PURE__ */ W({
-    title: { default: "" }
+  props: /* @__PURE__ */ V({
+    title: { default: "" },
+    leftOffset: { default: 0 },
+    rightOffset: { default: 0 },
+    topOffset: { default: 0 },
+    bottomOffset: { default: 0 }
   }, {
     modelValue: { default: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ W(["close"], ["update:modelValue"]),
-  setup(e, { emit: l }) {
-    const n = e, t = N(e, "modelValue"), o = l, c = f(!1), s = f(null), v = f(null), u = L(() => i.value === "right"), h = L(() => ({
-      leftGap: 0,
-      rightGap: 0,
-      container: v.value
-    })), { docked: r, orientation: i, movement: a } = De(
-      s,
-      h
-    ), { rect: p } = Te(
-      v,
-      u,
-      c,
-      a
-    ), x = L(() => ({
-      left: `${p.value.left}px`,
-      top: `${p.value.top}px`,
-      width: `${p.value.width}px`,
-      height: r.value ? "100%" : `${p.value.height}px`
-    })), y = (d) => {
-      c.value = d;
-    }, w = () => {
-      t.value = !1;
-      const d = v.value;
-      o("close", {
-        x: d ? d.clientLeft : 0,
-        y: d ? d.clientTop : 0
+  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(() => ({
+      offset: m({
+        left: t.leftOffset,
+        right: t.rightOffset,
+        top: t.topOffset,
+        bottom: t.bottomOffset
+      })
+    })), {
+      rect: a,
+      orientation: v,
+      reversed: g
+    } = Ue(d, u, n, s), c = L(() => ({
+      left: `${a.value.left}px`,
+      top: `${a.value.top}px`,
+      width: `${a.value.width}px`,
+      height: `${a.value.height}px`
+    })), h = () => {
+      o.value = !1;
+      const r = d.value;
+      l("close", {
+        x: r ? r.clientLeft : 0,
+        y: r ? r.clientTop : 0
       });
     };
-    return (d, m) => {
-      const z = S;
-      return t.value ? (_(), b("div", {
+    return (r, p) => {
+      const x = Y;
+      return o.value ? (y(), I("div", {
         key: 0,
         ref_key: "toolPaletteElement",
-        ref: v,
-        style: K([x.value]),
+        ref: d,
+        style: ee([c.value]),
         class: "ml-tool-palette-dialog"
       }, [
-        g("div", {
-          class: J(["ml-tool-palette-dialog-layout", ue(i)])
+        z("div", {
+          class: R(["ml-tool-palette-dialog-layout", F(v)])
         }, [
-          g("div", {
+          z("div", {
             ref_key: "titleBarElement",
-            ref: s,
+            ref: u,
             class: "ml-tool-palette-title-bar"
           }, [
-            $(z, {
+            H(x, {
               size: 18,
               class: "ml-tool-palette-dialog-icon",
-              onClick: w
+              onClick: h
             }, {
-              default: M(() => [
-                Ve
+              default: T(() => [
+                Ge
               ]),
               _: 1
             }),
-            $(we, {
+            H(Le, {
               class: "ml-tool-palette-dialog-icon",
-              modelValue: c.value,
-              "onUpdate:modelValue": m[0] || (m[0] = (k) => c.value = k),
-              reverse: u.value,
-              onChange: y
+              modelValue: n.value,
+              "onUpdate:modelValue": p[0] || (p[0] = (C) => n.value = C),
+              reverse: F(g)
             }, null, 8, ["modelValue", "reverse"]),
-            g("span", We, A(n.title), 1)
+            z("span", je, N(t.title), 1)
           ], 512),
-          g("div", He, [
-            ce(d.$slots, "default", {}, void 0, !0)
+          z("div", qe, [
+            O(r.$slots, "default", {}, void 0, !0)
           ])
         ], 2)
-      ], 4)) : Q("", !0);
+      ], 4)) : te("", !0);
     };
   }
-}), Pe = /* @__PURE__ */ G(Se, [["__scopeId", "data-v-d69f63b3"]]), Je = {
+}), Ke = /* @__PURE__ */ A(Je, [["__scopeId", "data-v-539d98d3"]]), st = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   install(e) {
-    e.component("MlCollapse", Y), e.component("MlDropdown", Y), e.component("MlLanguage", ye), e.component("MlToolbar", Ce), e.component("MlToolPalette", Pe);
+    e.component("MlCollapse", X), e.component("MlDropdown", X), e.component("MlLanguage", be), e.component("MlStatusBar", $e), e.component("MlToolbar", De), e.component("MlToolPalette", Ke);
   }
 };
 export {
-  we as MlCollapse,
-  Y as MlDropdown,
-  ye as MlLanguage,
-  Pe as MlToolPalette,
-  Ce as MlToolbar,
-  Je as default
+  Le as MlCollapse,
+  X as MlDropdown,
+  be as MlLanguage,
+  $e as MlStatusBar,
+  Ke as MlToolPalette,
+  De as MlToolbar,
+  st as default
 };