@mlightcad/ui-components 0.0.7 → 0.0.8

package/README.md

@@ -6,8 +6,60 @@ This is one common UI component library based on Element Plus.
 
 The following components are included in this package.
 
+- Tool Palette: one dockable, resizable, and floating window, which is quite similar to AutoCAD Tool Palette.
 - Toolbar: one toolbar which can be easily customized by one array of button data. 
 
+### Tool Palette
+
+AutoCAD uses [tool palettes](https://help.autodesk.com/view/ACD/2025/ENU/?guid=GUID-167A8594-92CB-4FCC-B72C-0F546383E97C) to organize blocks, hatches, and custom tools in a tabbed window. Tool Palette component is quite similar to one in AutoCAD. It supports the following features.
+
+- Dockable: dock to the left or right side of the window
+- Folderable: roll open or closed as your need
+- Auto-hide: roll open and closed as the cursor moves across it. When this option is cleared, the full tool palette stays open continuously.
+
+<img src="./doc/palette.jpg" width="400" height="92" alt="Tool Palette Example">
+
+You can customize tool palette by the following properties. More properties will be coming soon.
+
+```javascript
+/**
+ * Properties of MlToolPalette component
+ */
+interface Props {
+  /**
+   * The title of tool palette dialog
+   */
+  title?: string
+}
+```
+
+It is quite easy to use it.
+
+```javascript
+<script lang="ts" setup>
+import { MlToolPalette } from '@mlightcad/ui-components'
+const toolPaletteVisible = ref<boolean>(false)
+</script>
+
+<template>
+  <ml-tool-palette
+    class="tool-palette"
+    v-model="toolPaletteVisible"
+    title="Tool Palette Test"
+  >
+    <span>Tool Palette Test</span>
+  </ml-tool-palette>
+</template>
+
+<style scoped>
+.tool-palette {
+  position: fixed;
+  top: 55px;
+  width: 400px;
+}
+</style>
+```
+
 ### Toolbar
 
 Toolbar component has the followiing features.

package/dist/ui-components.es.js

@@ -1,26 +1,83 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-05cd92db],.ml-dropdown-icon[data-v-05cd92db]:hover{outline:none;border:none}.ml-vertical-toolbar-button-group[data-v-7e12291d]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-7e12291d]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-7e12291d]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-7e12291d]{margin-left:0;margin-top:5px}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { ElIcon as k, ElDropdownItem as B, ElDropdownMenu as S, ElDropdown as V, ElButton as D, ElTooltip as N, ElButtonGroup as $ } from "element-plus/es";
+(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";
 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 "element-plus/es/components/dropdown/style/css";
 import "element-plus/es/components/dropdown-menu/style/css";
 import "element-plus/es/components/dropdown-item/style/css";
-import "element-plus/es/components/icon/style/css";
-import { defineComponent as w, computed as p, openBlock as n, createBlock as u, withCtx as c, createVNode as v, createElementBlock as g, Fragment as z, renderList as M, createTextVNode as G, toDisplayString as C, pushScopeId as H, popScopeId as R, createElementVNode as f, normalizeClass as Y, normalizeStyle as F, createCommentVNode as O } from "vue";
 import "element-plus/es/components/button-group/style/css";
 import "element-plus/es/components/tooltip/style/css";
 import "element-plus/es/components/button/style/css";
-const j = (t) => (H("data-v-05cd92db"), t = t(), R(), t), q = /* @__PURE__ */ j(() => /* @__PURE__ */ f("svg", {
+const re = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 1024 1024"
+}, ve = /* @__PURE__ */ g("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
+];
+function me(e, l) {
+  return _(), b("svg", re, [...de]);
+}
+const X = { render: me }, he = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 1024 1024"
+}, pe = /* @__PURE__ */ g("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
+];
+function _e(e, l) {
+  return _(), b("svg", he, [...fe]);
+}
+const U = { render: _e }, we = /* @__PURE__ */ D({
+  __name: "MlCollapse",
+  props: /* @__PURE__ */ W({
+    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;
+    };
+    return (u, h) => {
+      const r = S;
+      return _(), E(r, {
+        size: s.value,
+        onClick: v
+      }, {
+        default: M(() => [
+          (_(), E(se(c.value)))
+        ]),
+        _: 1
+      }, 8, ["size"]);
+    };
+  }
+}), xe = (e) => (j("data-v-3fc33b5d"), e = e(), q(), e), Le = /* @__PURE__ */ xe(() => /* @__PURE__ */ g("svg", {
   preserveAspectRatio: "xMidYMid meet",
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em",
   "data-v-63d067da": ""
 }, [
-  /* @__PURE__ */ f("path", {
+  /* @__PURE__ */ g("path", {
     fill: "currentColor",
     d: "m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"
   })
-], -1)), J = /* @__PURE__ */ w({
+], -1)), ge = /* @__PURE__ */ D({
   __name: "MlDropdown",
   props: {
     icon: {},
@@ -30,22 +87,22 @@ const j = (t) => (H("data-v-05cd92db"), t = t(), R(), t), q = /* @__PURE__ */ j(
   emits: {
     click: null
   },
-  setup(t, { emit: r }) {
-    const e = t, a = r, s = p(() => e.items.filter((l) => l.name !== e.current)), i = (l) => {
-      a("click", l);
+  setup(e, { emit: l }) {
+    const n = e, t = l, o = L(() => n.items.filter((s) => s.name !== n.current)), c = (s) => {
+      t("click", s);
     };
-    return (l, x) => {
-      const _ = k, h = B, o = S, b = V;
-      return n(), u(b, { onCommand: i }, {
-        dropdown: c(() => [
-          v(o, null, {
-            default: c(() => [
-              (n(!0), g(z, null, M(s.value, (d) => (n(), u(h, {
-                key: d.text,
-                command: d.name
+    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
               }, {
-                default: c(() => [
-                  G(C(d.text), 1)
+                default: M(() => [
+                  ae(A(a.text), 1)
                 ]),
                 _: 2
               }, 1032, ["command"]))), 128))
@@ -53,13 +110,13 @@ const j = (t) => (H("data-v-05cd92db"), t = t(), R(), t), q = /* @__PURE__ */ j(
             _: 1
           })
         ]),
-        default: c(() => [
-          v(_, {
+        default: M(() => [
+          $(u, {
             size: "30",
             class: "ml-dropdown-icon"
           }, {
-            default: c(() => [
-              q
+            default: M(() => [
+              Le
             ]),
             _: 1
           })
@@ -68,12 +125,12 @@ const j = (t) => (H("data-v-05cd92db"), t = t(), R(), t), q = /* @__PURE__ */ j(
       });
     };
   }
-}), L = (t, r) => {
-  const e = t.__vccOpts || t;
-  for (const [a, s] of r)
-    e[a] = s;
-  return e;
-}, y = /* @__PURE__ */ L(J, [["__scopeId", "data-v-05cd92db"]]), K = '<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>', P = /* @__PURE__ */ w({
+}), 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({
   __name: "MlLanguage",
   props: {
     languages: {},
@@ -82,21 +139,21 @@ const j = (t) => (H("data-v-05cd92db"), t = t(), R(), t), q = /* @__PURE__ */ j(
   emits: {
     click: null
   },
-  setup(t, { emit: r }) {
-    const e = t, a = r, s = (i) => {
-      a("click", i);
+  setup(e, { emit: l }) {
+    const n = e, t = l, o = (c) => {
+      t("click", c);
     };
-    return (i, l) => (n(), u(y, {
-      icon: K,
-      items: e.languages,
-      current: e.current,
-      onClick: s
+    return (c, s) => (_(), E(Y, {
+      icon: Me,
+      items: n.languages,
+      current: n.current,
+      onClick: o
     }, null, 8, ["items", "current"]));
   }
-}), Q = {
+}), ze = {
   key: 0,
   class: "ml-toolbar-button-text"
-}, U = /* @__PURE__ */ w({
+}, Ee = /* @__PURE__ */ D({
   __name: "MlToolbar",
   props: {
     items: {},
@@ -106,43 +163,43 @@ const j = (t) => (H("data-v-05cd92db"), t = t(), R(), t), q = /* @__PURE__ */ j(
   emits: {
     click: null
   },
-  setup(t, { emit: r }) {
-    const e = t, a = r, s = p(() => e.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), i = p(() => e.size === "small" ? 20 : 30), l = p(() => {
-      switch (e.size) {
+  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) {
         case "small":
           return 30;
         case "medium":
           return 50;
       }
       return 70;
-    }), x = (o) => o.description ? o.description : o.text, _ = p(() => e.size === "large"), h = (o) => {
-      a("click", o);
+    }), v = (r) => r.description ? r.description : r.text, u = L(() => n.size === "large"), h = (r) => {
+      t("click", r);
     };
-    return (o, b) => {
-      const d = k, E = D, I = N, T = $;
-      return n(), u(T, {
-        class: Y(s.value)
+    return (r, i) => {
+      const a = S, p = ne, x = oe, y = ie;
+      return _(), E(y, {
+        class: J(o.value)
       }, {
-        default: c(() => [
-          (n(!0), g(z, null, M(o.items, (m, A) => (n(), u(I, {
-            key: m.text,
-            content: x(m),
+        default: M(() => [
+          (_(!0), b(O, null, F(r.items, (w, d) => (_(), E(x, {
+            key: w.text,
+            content: v(w),
             "hide-after": 0
           }, {
-            default: c(() => [
-              (n(), u(E, {
+            default: M(() => [
+              (_(), E(p, {
                 class: "ml-toolbar-button",
-                style: F({ width: l.value + "px", height: l.value + "px" }),
-                key: A,
-                onClick: (X) => h(m.command)
+                style: K({ width: s.value + "px", height: s.value + "px" }),
+                key: d,
+                onClick: (m) => h(w.command)
               }, {
-                default: c(() => [
-                  f("div", null, [
-                    v(d, {
-                      size: i.value,
-                      innerHTML: m.icon
+                default: M(() => [
+                  g("div", null, [
+                    $(a, {
+                      size: c.value,
+                      innerHTML: w.icon
                     }, null, 8, ["size", "innerHTML"]),
-                    _.value ? (n(), g("div", Q, C(m.text), 1)) : O("", !0)
+                    u.value ? (_(), b("div", ze, A(w.text), 1)) : Q("", !0)
                   ])
                 ]),
                 _: 2
@@ -155,14 +212,294 @@ const j = (t) => (H("data-v-05cd92db"), t = t(), R(), t), q = /* @__PURE__ */ j(
       }, 8, ["class"]);
     };
   }
-}), W = /* @__PURE__ */ L(U, [["__scopeId", "data-v-7e12291d"]]), it = {
+}), 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;
+    }
+  };
+  return I(() => {
+    e.value && H(() => {
+      t();
+    });
+  }), C(e, (o) => {
+    o && H(() => {
+      t();
+    });
+  }), {
+    isIntialized: n,
+    initialRect: l
+  };
+}
+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");
+      } 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);
+      }
+  }, 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);
+  }, 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));
+  };
+  return I(() => {
+    e.value && w();
+  }), Z(() => {
+    y();
+  }), C(e, (d) => {
+    d ? w() : y();
+  }), { rect: t, isResizing: o };
+}
+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, () => {
+    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";
+    }
+  });
+}
+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);
+  };
+  I(() => {
+    window.addEventListener("resize", r);
+  }), R(() => {
+    window.removeEventListener("resize", r);
+  });
+  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 = () => {
+    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;
+    }
+  }, 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);
+  };
+  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
+  };
+}
+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;
+    }
+  }), {
+    docked: n,
+    orientation: t,
+    isDragging: o,
+    movement: c,
+    position: s
+  };
+}
+const Ie = (e) => (j("data-v-d69f63b3"), e = e(), q(), e), Ve = /* @__PURE__ */ Ie(() => /* @__PURE__ */ g("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 1024 1024"
+}, [
+  /* @__PURE__ */ g("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({
+  __name: "MlToolPalette",
+  props: /* @__PURE__ */ W({
+    title: { default: "" }
+  }, {
+    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
+      });
+    };
+    return (d, m) => {
+      const z = S;
+      return t.value ? (_(), b("div", {
+        key: 0,
+        ref_key: "toolPaletteElement",
+        ref: v,
+        style: K([x.value]),
+        class: "ml-tool-palette-dialog"
+      }, [
+        g("div", {
+          class: J(["ml-tool-palette-dialog-layout", ue(i)])
+        }, [
+          g("div", {
+            ref_key: "titleBarElement",
+            ref: s,
+            class: "ml-tool-palette-title-bar"
+          }, [
+            $(z, {
+              size: 18,
+              class: "ml-tool-palette-dialog-icon",
+              onClick: w
+            }, {
+              default: M(() => [
+                Ve
+              ]),
+              _: 1
+            }),
+            $(we, {
+              class: "ml-tool-palette-dialog-icon",
+              modelValue: c.value,
+              "onUpdate:modelValue": m[0] || (m[0] = (k) => c.value = k),
+              reverse: u.value,
+              onChange: y
+            }, null, 8, ["modelValue", "reverse"]),
+            g("span", We, A(n.title), 1)
+          ], 512),
+          g("div", He, [
+            ce(d.$slots, "default", {}, void 0, !0)
+          ])
+        ], 2)
+      ], 4)) : Q("", !0);
+    };
+  }
+}), Pe = /* @__PURE__ */ G(Se, [["__scopeId", "data-v-d69f63b3"]]), Je = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  install(t) {
-    t.component("MlDropdown", y), t.component("MlLanguage", P), t.component("MlToolbar", W);
+  install(e) {
+    e.component("MlCollapse", Y), e.component("MlDropdown", Y), e.component("MlLanguage", ye), e.component("MlToolbar", Ce), e.component("MlToolPalette", Pe);
   }
 };
 export {
-  P as MlLanguage,
-  W as MlToolbar,
-  it as default
+  we as MlCollapse,
+  Y as MlDropdown,
+  ye as MlLanguage,
+  Pe as MlToolPalette,
+  Ce as MlToolbar,
+  Je as default
 };