@mlightcad/ui-components 0.0.6 → 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,14 +1,159 @@
-import { ElIcon as g, ElButton as y, ElTooltip as C, ElButtonGroup as T } from "element-plus/es";
+(function(){"use strict";try{if(typeof document<"u"){var 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/button-group/style/css";
 import "element-plus/es/components/tooltip/style/css";
 import "element-plus/es/components/button/style/css";
-import "element-plus/es/components/icon/style/css";
-import { defineComponent as B, computed as r, openBlock as l, createBlock as i, normalizeClass as E, withCtx as u, createElementBlock as m, Fragment as M, renderList as S, normalizeStyle as w, createElementVNode as I, createVNode as L, toDisplayString as N, createCommentVNode as V } from "vue";
-const G = {
+const 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__ */ 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)), ge = /* @__PURE__ */ D({
+  __name: "MlDropdown",
+  props: {
+    icon: {},
+    items: {},
+    current: { default: void 0 }
+  },
+  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);
+    };
+    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: M(() => [
+                  ae(A(a.text), 1)
+                ]),
+                _: 2
+              }, 1032, ["command"]))), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        default: M(() => [
+          $(u, {
+            size: "30",
+            class: "ml-dropdown-icon"
+          }, {
+            default: M(() => [
+              Le
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+}), 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: {},
+    current: {}
+  },
+  emits: {
+    click: null
+  },
+  setup(e, { emit: l }) {
+    const n = e, t = l, o = (c) => {
+      t("click", c);
+    };
+    return (c, s) => (_(), E(Y, {
+      icon: Me,
+      items: n.languages,
+      current: n.current,
+      onClick: o
+    }, null, 8, ["items", "current"]));
+  }
+}), ze = {
   key: 0,
   class: "ml-toolbar-button-text"
-}, H = /* @__PURE__ */ B({
+}, Ee = /* @__PURE__ */ D({
   __name: "MlToolbar",
   props: {
     items: {},
@@ -18,43 +163,43 @@ const G = {
   emits: {
     click: null
   },
-  setup(e, { emit: c }) {
-    const t = e, s = c, a = r(() => t.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), _ = r(() => t.size === "small" ? 20 : 30), p = r(() => {
-      switch (t.size) {
+  setup(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;
-    }), d = (o) => o.description ? o.description : o.text, b = r(() => t.size === "large"), f = (o) => {
-      s("click", o);
+    }), v = (r) => r.description ? r.description : r.text, u = L(() => n.size === "large"), h = (r) => {
+      t("click", r);
     };
-    return (o, O) => {
-      const v = g, h = y, k = C, x = T;
-      return l(), i(x, {
-        class: E(a.value)
+    return (r, i) => {
+      const a = S, p = ne, x = oe, y = ie;
+      return _(), E(y, {
+        class: J(o.value)
       }, {
-        default: u(() => [
-          (l(!0), m(M, null, S(o.items, (n, z) => (l(), i(k, {
-            key: n.text,
-            content: d(n),
+        default: M(() => [
+          (_(!0), b(O, null, F(r.items, (w, d) => (_(), E(x, {
+            key: w.text,
+            content: v(w),
             "hide-after": 0
           }, {
-            default: u(() => [
-              (l(), i(h, {
+            default: M(() => [
+              (_(), E(p, {
                 class: "ml-toolbar-button",
-                style: w({ width: p.value + "px", height: p.value + "px" }),
-                key: z,
-                onClick: ($) => f(n.command)
+                style: K({ width: s.value + "px", height: s.value + "px" }),
+                key: d,
+                onClick: (m) => h(w.command)
               }, {
-                default: u(() => [
-                  I("div", null, [
-                    L(v, {
-                      size: _.value,
-                      innerHTML: n.icon
+                default: M(() => [
+                  g("div", null, [
+                    $(a, {
+                      size: c.value,
+                      innerHTML: w.icon
                     }, null, 8, ["size", "innerHTML"]),
-                    b.value ? (l(), m("div", G, N(n.text), 1)) : V("", !0)
+                    u.value ? (_(), b("div", ze, A(w.text), 1)) : Q("", !0)
                   ])
                 ]),
                 _: 2
@@ -67,18 +212,294 @@ const G = {
       }, 8, ["class"]);
     };
   }
-}), D = (e, c) => {
-  const t = e.__vccOpts || e;
-  for (const [s, a] of c)
-    t[s] = a;
-  return t;
-}, F = /* @__PURE__ */ D(H, [["__scopeId", "data-v-0fe7ba99"]]), R = {
+}), 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(e) {
-    e.component("MlToolbar", F);
+    e.component("MlCollapse", Y), e.component("MlDropdown", Y), e.component("MlLanguage", ye), e.component("MlToolbar", Ce), e.component("MlToolPalette", Pe);
   }
 };
 export {
-  F as MlToolbar,
-  R as default
+  we as MlCollapse,
+  Y as MlDropdown,
+  ye as MlLanguage,
+  Pe as MlToolPalette,
+  Ce as MlToolbar,
+  Je as default
 };

package/dist/ui-components.umd.js

@@ -1 +1,2 @@
-(function(t,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/button-group/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/style/css"),require("element-plus/es/components/icon/style/css"),require("vue")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/button-group/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css","element-plus/es/components/icon/style/css","vue"],o):(t=typeof globalThis<"u"?globalThis:t||self,o(t.UIComponents={},t.es,null,null,null,null,null,t.Vue))})(this,function(t,o,g,z,C,M,q,e){"use strict";const m={key:0,class:"ml-toolbar-button-text"},p=((l,r)=>{const n=l.__vccOpts||l;for(const[i,u]of r)n[i]=u;return n})(e.defineComponent({__name:"MlToolbar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(l,{emit:r}){const n=l,i=r,u=e.computed(()=>n.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),_=e.computed(()=>n.size==="small"?20:30),a=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),b=s=>s.description?s.description:s.text,f=e.computed(()=>n.size==="large"),y=s=>{i("click",s)};return(s,w)=>{const k=o.ElIcon,h=o.ElButton,x=o.ElTooltip,B=o.ElButtonGroup;return e.openBlock(),e.createBlock(B,{class:e.normalizeClass(u.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.items,(c,T)=>(e.openBlock(),e.createBlock(x,{key:c.text,content:b(c),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(h,{class:"ml-toolbar-button",style:e.normalizeStyle({width:a.value+"px",height:a.value+"px"}),key:T,onClick:$=>y(c.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(k,{size:_.value,innerHTML:c.icon},null,8,["size","innerHTML"]),f.value?(e.openBlock(),e.createElementBlock("div",m,e.toDisplayString(c.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-0fe7ba99"]]),d={install(l){l.component("MlToolbar",p)}};t.MlToolbar=p,t.default=d,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(){"use strict";try{if(typeof document<"u"){var 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)}})();
+(function(_,w){typeof exports=="object"&&typeof module<"u"?w(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"],w):(_=typeof globalThis<"u"?globalThis:_||self,w(_.UIComponents={},_.es,null,null,_.Vue))})(this,function(_,w,ne,oe,e){"use strict";const N={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},W=[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 P(t,o){return e.openBlock(),e.createElementBlock("svg",N,[...W])}const V={render:P},H={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 Y(t,o){return e.openBlock(),e.createElementBlock("svg",H,[...q])}const T={render:Y},$=e.defineComponent({__name:"MlCollapse",props:e.mergeModels({size:{default:18},reverse:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels({change:null},["update:modelValue"]),setup(t,{emit:o}){const l=t,n=e.useModel(t,"modelValue"),s=o,u=e.computed(()=>l.reverse?n.value?V:T:n.value?T:V),c=e.computed(()=>`${l.size}px`),m=()=>{s("change",n.value),n.value=!n.value};return(r,f)=>{const d=w.ElIcon;return e.openBlock(),e.createBlock(d,{size:c.value,onClick:m},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(u.value)))]),_:1},8,["size"])}}}),A=(t=>(e.pushScopeId("data-v-3fc33b5d"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em","data-v-63d067da":""},[e.createElementVNode("path",{fill:"currentColor",d:"m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"})],-1)),G=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:o}){const l=t,n=o,s=e.computed(()=>l.items.filter(c=>c.name!==l.current)),u=c=>{n("click",c)};return(c,m)=>{const r=w.ElIcon,f=w.ElDropdownItem,d=w.ElDropdownMenu,i=w.ElDropdown;return e.openBlock(),e.createBlock(i,{onCommand:u},{dropdown:e.withCtx(()=>[e.createVNode(d,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,a=>(e.openBlock(),e.createBlock(f,{key:a.text,command:a.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.text),1)]),_:2},1032,["command"]))),128))]),_:1})]),default:e.withCtx(()=>[e.createVNode(r,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[A]),_:1})]),_:1})}}}),z=(t,o)=>{const l=t.__vccOpts||t;for(const[n,s]of o)l[n]=s;return l},B=z(G,[["__scopeId","data-v-3fc33b5d"]]),U='<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:o}){const l=t,n=o,s=u=>{n("click",u)};return(u,c)=>(e.openBlock(),e.createBlock(B,{icon:U,items:l.languages,current:l.current,onClick:s},null,8,["items","current"]))}}),X={key:0,class:"ml-toolbar-button-text"},D=z(e.defineComponent({__name:"MlToolbar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(t,{emit:o}){const l=t,n=o,s=e.computed(()=>l.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),u=e.computed(()=>l.size==="small"?20:30),c=e.computed(()=>{switch(l.size){case"small":return 30;case"medium":return 50}return 70}),m=d=>d.description?d.description:d.text,r=e.computed(()=>l.size==="large"),f=d=>{n("click",d)};return(d,i)=>{const a=w.ElIcon,v=w.ElButton,y=w.ElTooltip,M=w.ElButtonGroup;return e.openBlock(),e.createBlock(M,{class:e.normalizeClass(s.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.items,(x,p)=>(e.openBlock(),e.createBlock(y,{key:x.text,content:m(x),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(v,{class:"ml-toolbar-button",style:e.normalizeStyle({width:c.value+"px",height:c.value+"px"}),key:p,onClick:h=>f(x.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(a,{size:u.value,innerHTML:x.icon},null,8,["size","innerHTML"]),r.value?(e.openBlock(),e.createElementBlock("div",X,e.toDisplayString(x.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-27b5412a"]]),C=20;function O(t){const o=e.ref({});let l=!1;const n=()=>{if(!l&&t.value){const s=t.value.getBoundingClientRect();o.value.left=s.left,o.value.top=s.top,o.value.width=s.width,o.value.height=s.height,l=!0}};return e.onMounted(()=>{t.value&&e.nextTick(()=>{n()})}),e.watch(t,s=>{s&&e.nextTick(()=>{n()})}),{isIntialized:l,initialRect:o}}function F(t,o=e.ref(!1),l={width:20,height:40}){const n=e.ref({width:null,height:null,left:null,top:null}),s=e.ref(!1);let u=0,c=0,m=0,r=0,f=0;const d=5,i=e.ref(null),a=p=>{if(t.value)if(s.value){const h=p.clientX-r,g=p.clientY-f;(i.value==="left"||i.value==="left-bottom-corner")&&(n.value.width=Math.max(l.width,c-h),n.value.left=u+h,t.value.style.left=n.value.left+"px",t.value.style.width=n.value.width+"px"),(i.value==="right"||i.value==="right-bottom-corner")&&(n.value.width=Math.max(l.width,c+h),t.value.style.width=n.value.width+"px"),(i.value==="bottom"||i.value==="left-bottom-corner"||i.value==="right-bottom-corner")&&(n.value.height=Math.max(l.height,m+g),t.value.style.height=n.value.height+"px")}else{const h=t.value.getBoundingClientRect(),g=p.clientX-h.left,L=p.clientY-h.top,E=g<=d,k=g>=h.width-d,b=L>=h.height-d;E&&b&&o.value?(t.value.style.cursor="nesw-resize",i.value="left-bottom-corner"):k&&b&&!o.value?(t.value.style.cursor="nwse-resize",i.value="right-bottom-corner"):E&&o.value?(t.value.style.cursor="ew-resize",i.value="left"):k&&!o.value?(t.value.style.cursor="ew-resize",i.value="right"):b?(t.value.style.cursor="ns-resize",i.value="bottom"):(t.value.style.cursor="",i.value=null)}},v=p=>{if(!t.value||!i.value)return;const h=t.value.getBoundingClientRect();r=p.clientX,f=p.clientY,c=h.width,m=h.height,u=h.left,n.value.width=c,n.value.height=m,n.value.left=h.left,n.value.top=h.top,s.value=!0,document.addEventListener("mousemove",a),document.addEventListener("mouseup",y)},y=()=>{s.value=!1,i.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",y)},M=()=>{t.value&&(t.value.removeEventListener("mousedown",v),t.value.removeEventListener("mousemove",a)),document.removeEventListener("mouseup",y)},x=()=>{t.value&&(t.value.addEventListener("mousedown",v),t.value.addEventListener("mousemove",a))};return e.onMounted(()=>{t.value&&x()}),e.onBeforeUnmount(()=>{M()}),e.watch(t,p=>{p?x():M()}),{rect:n,isResizing:s}}function j(t,o,l){function n(){t.value&&(t.value.style.transition="")}const s=()=>{t.value&&t.value.removeEventListener("transitionend",n)},u=()=>{t.value&&t.value.addEventListener("transitionend",n)};e.onMounted(()=>{t.value&&t.value.addEventListener("transitionend",n)}),e.onBeforeUnmount(()=>{t.value&&t.value.removeEventListener("transitionend",n)}),e.watch(t,c=>{c?u():s()}),e.watch(l,()=>{if(t.value){const c=t.value;o.value?c.style.transition="width 0.3s ease-out, left 0.3s ease-out":c.style.transition="width 0.3s ease"}})}function J(t,o,l,n){const s=e.ref(window.innerWidth),u=e.ref(window.innerHeight),{initialRect:c}=O(t),{rect:m}=F(t,o);j(t,o,l);const r=e.computed(()=>m.value.width&&m.value.height?m.value:c.value),f=a=>{if(t.value&&o.value){const v=t.value.getBoundingClientRect();t.value.style.left=v.left+a+"px"}},d=()=>{const a=window.innerWidth-s.value;s.value=window.innerWidth,u.value=window.innerHeight,f(a)};e.onMounted(()=>{window.addEventListener("resize",d)}),e.onUnmounted(()=>{window.removeEventListener("resize",d)});let i=null;return e.watch(l,a=>{a?(i=r.value.width,r.value.width=C,o.value&&r.value.left&&i&&(r.value.left=r.value.left+i-C)):(r.value.width=i,o.value&&r.value.left&&i&&(r.value.left=r.value.left-i+C),i=null)}),e.watch(n,a=>{if(a&&t.value){const y=t.value.getBoundingClientRect();r.value.left=y.left,r.value.top=y.top}}),{rect:r}}function K(t,o){const l=e.ref(!1),n=e.ref({x:0,y:0}),s=e.ref({x:0,y:0}),u=e.computed(()=>({x:n.value.x-s.value.x,y:n.value.y-s.value.y})),c=()=>{if(t.value){const a=t.value.getBoundingClientRect();s.value.x=a.left,s.value.y=a.top,n.value.x=a.left,n.value.y=a.top}},m=()=>{t.value&&t.value.addEventListener("mousedown",f)},r=()=>{t.value&&t.value.removeEventListener("mousedown",f)},f=()=>{l.value=!0,document.addEventListener("mousemove",d),document.addEventListener("mouseup",i)},d=a=>{if(l.value){const v=window.innerWidth,y=window.innerHeight,M=t.value,x=M.offsetWidth,p=M.offsetHeight,h=n.value.x+a.movementX,g=n.value.y+a.movementY;n.value.x=Math.max(o?o.value.leftGap:0,Math.min(h,v-x));const L=o&&o.value.container?o.value.container.clientWidth:0,E=v-L-x;if(n.value.x=Math.min(o?E-o.value.rightGap:E,n.value.x),n.value.y=Math.max(0,Math.min(g,y-p)),o!=null&&o.value.container){const k=o==null?void 0:o.value.container;k.style.left=n.value.x+"px",k.style.top=n.value.y+"px"}}},i=()=>{l.value=!1,document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",i)};return e.onMounted(()=>{t.value&&e.nextTick(()=>{c(),m()})}),e.onUnmounted(()=>{t.value&&(c(),t.value.removeEventListener("mousedown",f))}),e.watch(t,a=>{a?e.nextTick(()=>{c(),m()}):r()}),{isDragging:l,movement:u,position:n}}function Q(t,o){const l=e.ref(!1),n=e.ref("left"),{isDragging:s,movement:u,position:c}=K(t,o);return e.watch(u,m=>{if(m&&o.value.container){const f=o.value.container.getBoundingClientRect();f.left<=o.value.leftGap?(n.value="left",l.value=!0):window.innerWidth-f.left-f.width-C<=o.value.rightGap?(n.value="right",l.value=!0):l.value=!1}}),{docked:l,orientation:n,isDragging:s,movement:u,position:c}}const Z=(t=>(e.pushScopeId("data-v-d69f63b3"),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)),R={class:"ml-tool-palette-title"},ee={class:"ml-tool-palette-content"},S=z(e.defineComponent({__name:"MlToolPalette",props:e.mergeModels({title:{default:""}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["close"],["update:modelValue"]),setup(t,{emit:o}){const l=t,n=e.useModel(t,"modelValue"),s=o,u=e.ref(!1),c=e.ref(null),m=e.ref(null),r=e.computed(()=>i.value==="right"),f=e.computed(()=>({leftGap:0,rightGap:0,container:m.value})),{docked:d,orientation:i,movement:a}=Q(c,f),{rect:v}=J(m,r,u,a),y=e.computed(()=>({left:`${v.value.left}px`,top:`${v.value.top}px`,width:`${v.value.width}px`,height:d.value?"100%":`${v.value.height}px`})),M=p=>{u.value=p},x=()=>{n.value=!1;const p=m.value;s("close",{x:p?p.clientLeft:0,y:p?p.clientTop:0})};return(p,h)=>{const g=w.ElIcon;return n.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:m,style:e.normalizeStyle([y.value]),class:"ml-tool-palette-dialog"},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(i)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:c,class:"ml-tool-palette-title-bar"},[e.createVNode(g,{size:18,class:"ml-tool-palette-dialog-icon",onClick:x},{default:e.withCtx(()=>[Z]),_:1}),e.createVNode($,{class:"ml-tool-palette-dialog-icon",modelValue:u.value,"onUpdate:modelValue":h[0]||(h[0]=L=>u.value=L),reverse:r.value,onChange:M},null,8,["modelValue","reverse"]),e.createElementVNode("span",R,e.toDisplayString(l.title),1)],512),e.createElementVNode("div",ee,[e.renderSlot(p.$slots,"default",{},void 0,!0)])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-d69f63b3"]]),te={install(t){t.component("MlCollapse",B),t.component("MlDropdown",B),t.component("MlLanguage",I),t.component("MlToolbar",D),t.component("MlToolPalette",S)}};_.MlCollapse=$,_.MlDropdown=B,_.MlLanguage=I,_.MlToolPalette=S,_.MlToolbar=D,_.default=te,Object.defineProperties(_,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});