@farris/ui-vue 1.7.2 → 1.7.4

package/components/dropdown/index.esm.js

@@ -1,6 +1,143 @@
-import { ref as d, onMounted as W, defineComponent as $, createVNode as a, withDirectives as z, vShow as N, Teleport as A, Fragment as X } from "vue";
-import { withInstall as Y } from "../common/index.esm.js";
-const O = {
+import { ref as u, onMounted as E, defineComponent as W, createVNode as n, withDirectives as L, vShow as T, Teleport as V, Fragment as X, inject as Z } from "vue";
+import { resolveAppearance as G, createPropsResolver as J } from "../dynamic-resolver/index.esm.js";
+import { useDesignerComponent as K } from "../designer-canvas/index.esm.js";
+function Q(e, l, a) {
+  return l;
+}
+const U = /* @__PURE__ */ new Map([
+  ["appearance", G]
+]), _ = "https://json-schema.org/draft/2020-12/schema", M = "https://farris-design.gitee.io/dropdown.schema.json", P = "dropdown", ee = "A Farris Component", te = "object", oe = {
+  id: {
+    description: "The unique identifier for dropdown",
+    type: "string"
+  },
+  type: {
+    description: "The type string of dropdown",
+    type: "string",
+    default: "dropdown"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  binding: {
+    description: "",
+    type: "object",
+    default: {}
+  },
+  disable: {
+    type: "string",
+    default: !1
+  },
+  editable: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  placeholder: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  readonly: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  require: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  tabindex: {
+    description: "",
+    type: "number",
+    default: -1
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  }
+}, ne = [
+  "id",
+  "type"
+], ie = {
+  $schema: _,
+  $id: M,
+  title: P,
+  description: ee,
+  type: te,
+  properties: oe,
+  required: ne
+}, se = "dropdown", le = "A Farris Component", re = "object", ae = {
+  basic: {
+    description: "Basic Infomation",
+    title: "基本信息",
+    properties: {
+      id: {
+        description: "组件标识",
+        title: "标识",
+        type: "string",
+        readonly: !0
+      },
+      type: {
+        description: "组件类型",
+        title: "控件类型",
+        type: "select",
+        editor: {
+          type: "waiting for modification",
+          enum: []
+        }
+      }
+    }
+  },
+  behavior: {
+    description: "Basic Infomation",
+    title: "行为",
+    properties: {
+      readonly: {
+        description: "",
+        title: "只读",
+        type: "string"
+      },
+      required: {
+        description: "",
+        title: "必填",
+        type: "boolean"
+      },
+      visible: {
+        description: "",
+        title: "可见",
+        type: "boolean"
+      },
+      placeholder: {
+        description: "",
+        title: "提示文本",
+        type: "string"
+      },
+      tabindex: {
+        description: "",
+        title: "tab索引",
+        type: "number"
+      }
+    }
+  }
+}, de = {
+  title: se,
+  description: le,
+  type: re,
+  categories: ae
+}, z = {
   /** 默认展开或折叠
    * 注意：
    * 1、这个属性在出现滚动条的情况下，滚动会导致收折，看不到展开的面板。
@@ -36,14 +173,14 @@ const O = {
   },
   onSelect: { type: Function, default: () => {
   } }
-};
-function j(e, g) {
-  let f;
-  const l = d(e.show), v = d(), c = d(), b = d(), i = 10;
-  W(() => {
-    f = c.value;
+}, N = J(z, ie, U, Q, de);
+function Y(e, l) {
+  let a;
+  const i = u(e.show), f = u(), p = u(), b = u(), s = 10;
+  E(() => {
+    a = p.value;
   });
-  const S = (o = 1) => {
+  const y = (o = 1) => {
     const t = [
       "body>.f-datagrid-settings-simple-host",
       "body>div",
@@ -54,72 +191,72 @@ function j(e, g) {
       "body>.popover.show",
       "body>filter-row-panel>.f-datagrid-filter-panel",
       "body>.f-section-maximize"
-    ], r = Array.from(document.body.querySelectorAll(t.join(","))).filter((s) => s).map((s) => {
-      const { display: C, zIndex: w } = window.getComputedStyle(s);
-      return C === "none" ? 0 : parseInt(w, 10);
-    }).filter((s) => s);
-    let n = Math.max(...r);
-    return n < 1040 && (n = 1040), n + o;
-  }, D = (o, t) => {
+    ], m = Array.from(document.body.querySelectorAll(t.join(","))).filter((r) => r).map((r) => {
+      const { display: R, zIndex: B } = window.getComputedStyle(r);
+      return R === "none" ? 0 : parseInt(B, 10);
+    }).filter((r) => r);
+    let c = Math.max(...m);
+    return c < 1040 && (c = 1040), c + o;
+  }, S = (o, t) => {
     const {
-      height: r,
-      left: n,
-      top: s,
-      width: C
-    } = o.getBoundingClientRect(), { width: w, height: E, top: G } = t.getBoundingClientRect();
+      height: m,
+      left: c,
+      top: r,
+      width: R
+    } = o.getBoundingClientRect(), { width: B, height: A, top: pe } = t.getBoundingClientRect();
     if (o.className.indexOf("dropdown-submenu") > -1 || o.closest(".dropdown-submenu") || o.classList.contains("dropright")) {
-      const h = window.innerWidth - n - o.offsetWidth, x = window.innerHeight - s, { position: y } = getComputedStyle(t);
-      if (y === "fixed") {
-        let m = n + o.offsetWidth;
-        t.offsetWidth > h && n > h && (m = n - w), t.style.left = m + "px", t.style.right = "auto", window.innerHeight - 2 * i < t.offsetHeight ? (t.style.top = i + "px", t.style.bottom = i + "px", t.style.maxHeight = window.innerHeight - 2 * i + "px", t.style.overflowY = "auto", t.className += " dropdown-menu-maxheight") : x < t.offsetHeight ? (t.style.top = "auto", t.style.bottom = i + "px") : (t.style.top = s + "px", t.style.bottom = "auto");
+      const H = window.innerWidth - c - o.offsetWidth, k = window.innerHeight - r, { position: h } = getComputedStyle(t);
+      if (h === "fixed") {
+        let g = c + o.offsetWidth;
+        t.offsetWidth > H && c > H && (g = c - B), t.style.left = g + "px", t.style.right = "auto", window.innerHeight - 2 * s < t.offsetHeight ? (t.style.top = s + "px", t.style.bottom = s + "px", t.style.maxHeight = window.innerHeight - 2 * s + "px", t.style.overflowY = "auto", t.className += " dropdown-menu-maxheight") : k < t.offsetHeight ? (t.style.top = "auto", t.style.bottom = s + "px") : (t.style.top = r + "px", t.style.bottom = "auto");
       } else {
-        if (t.offsetWidth > h) {
-          const m = -w;
-          t.style.left = m + "px";
+        if (t.offsetWidth > H) {
+          const g = -B;
+          t.style.left = g + "px";
         }
-        window.innerHeight - 2 * i < t.offsetHeight ? (t.style.top = -1 * (s - i) + "px", t.style.bottom = "auto", t.style.maxHeight = window.innerHeight - 2 * i + "px", t.style.overflowY = "auto", t.className += " dropdown-menu-maxheight") : x < t.offsetHeight && (t.style.top = x - t.offsetHeight - i + "px", t.style.bottom = "auto");
+        window.innerHeight - 2 * s < t.offsetHeight ? (t.style.top = -1 * (r - s) + "px", t.style.bottom = "auto", t.style.maxHeight = window.innerHeight - 2 * s + "px", t.style.overflowY = "auto", t.className += " dropdown-menu-maxheight") : k < t.offsetHeight && (t.style.top = k - t.offsetHeight - s + "px", t.style.bottom = "auto");
       }
     } else {
-      const { marginTop: h, marginBottom: x } = getComputedStyle(t);
-      let y = 0;
-      const m = Math.ceil(parseFloat(h)) + Math.ceil(parseFloat(x));
-      let p = s + r, T = n;
-      window.innerHeight - p - m < E && (p = s - E, p < 0 && (window.innerHeight - s - r > s ? (p = s + r, y = window.innerHeight - p - m - i) : (p = i, y = s - p - m))), window.innerWidth - n < w && window.innerWidth - n < n + C && (T = n - w + C), document.body.append(t), t.style.cssText = `position:fixed;bottom:unset;left:${T}px
-             !important;top:${p}px !important;right: unset;${y ? "max-height:" + y + "px;overflow-y:auto;" : ""}`, y && (t.className += " dropdown-menu-maxheight"), t.style.zIndex = S().toString();
+      const { marginTop: H, marginBottom: k } = getComputedStyle(t);
+      let h = 0;
+      const g = Math.ceil(parseFloat(H)) + Math.ceil(parseFloat(k));
+      let w = r + m, q = c;
+      window.innerHeight - w - g < A && (w = r - A, w < 0 && (window.innerHeight - r - m > r ? (w = r + m, h = window.innerHeight - w - g - s) : (w = s, h = r - w - g))), window.innerWidth - c < B && window.innerWidth - c < c + R && (q = c - B + R), document.body.append(t), t.style.cssText = `position:fixed;bottom:unset;left:${q}px
+             !important;top:${w}px !important;right: unset;${h ? "max-height:" + h + "px;overflow-y:auto;" : ""}`, h && (t.className += " dropdown-menu-maxheight"), t.style.zIndex = y().toString();
     }
-  }, B = () => {
-    D(v.value, c.value);
-  }, u = () => {
-    e.hover || (l.value = !1, c.value.style = null, document.removeEventListener("click", u), f.removeEventListener("click", u), document.removeEventListener("scroll", u), f.removeEventListener("scroll", u));
-  }, k = (o = null, t = !1) => {
+  }, v = () => {
+    S(f.value, p.value);
+  }, d = () => {
+    e.hover || (i.value = !1, p.value.style = null, document.removeEventListener("click", d), a.removeEventListener("click", d), document.removeEventListener("scroll", d), a.removeEventListener("scroll", d));
+  }, x = (o = null, t = !1) => {
     e.hover || e.disabled || (o == null || o.stopPropagation(), t ? (setTimeout(() => {
-      B();
-    }), l.value = !0) : (l.value || setTimeout(() => {
-      B();
-    }), l.value = !l.value), document.addEventListener("click", u), document.addEventListener("scroll", u), e.hideOnClick || (f.addEventListener("click", (r) => {
-      r.stopPropagation();
-    }), f.addEventListener("scroll", (r) => {
-      r.stopPropagation();
+      v();
+    }), i.value = !0) : (i.value || setTimeout(() => {
+      v();
+    }), i.value = !i.value), document.addEventListener("click", d), document.addEventListener("scroll", d), e.hideOnClick || (a.addEventListener("click", (m) => {
+      m.stopPropagation();
+    }), a.addEventListener("scroll", (m) => {
+      m.stopPropagation();
     })));
   };
   return {
-    show: l,
-    dropdownRef: v,
-    dropdownMenuRef: c,
+    show: i,
+    dropdownRef: f,
+    dropdownMenuRef: p,
     clickEventRef: b,
     showDropMenu: (o) => {
-      k(o, !1);
+      x(o, !1);
     },
-    showDropMenuByForce: k,
+    showDropMenuByForce: x,
     hoverDropdown: (o) => {
-      e.hover && (l.value || setTimeout(() => {
-      }), l.value = !l.value);
+      e.hover && (i.value || setTimeout(() => {
+      }), i.value = !i.value);
     },
     leftButtonClick: () => {
     },
-    closeDropMenu: u,
+    closeDropMenu: d,
     selectItem: (o) => {
-      g.emit("select", o);
+      l.emit("select", o);
     },
     resolveSize: (o) => {
       const t = /px|em|rem|pt|%/;
@@ -127,7 +264,7 @@ function j(e, g) {
     }
   };
 }
-const q = {
+const ce = {
   /** 下拉框标签 */
   label: { type: String, default: "XM1" },
   /** 下拉框名称 */
@@ -138,44 +275,42 @@ const q = {
   divide: { type: Boolean, default: !1 },
   onSelect: { type: Function, default: () => {
   } }
-}, V = /* @__PURE__ */ $({
+}, O = /* @__PURE__ */ W({
   name: "FDropdownItem",
-  props: q,
+  props: ce,
   emits: ["select"],
-  setup(e, g) {
-    const f = d(e.value), l = d(e.label), v = d(e.disabled), c = d(e.active), b = d(e.divide), i = () => {
-      v.value || g.emit("select", e);
+  setup(e, l) {
+    const a = u(e.value), i = u(e.label), f = u(e.disabled), p = u(e.active), b = u(e.divide), s = () => {
+      f.value || l.emit("select", e);
     };
-    return () => a("div", null, [z(a("div", {
+    return () => n("div", null, [L(n("div", {
       class: "dropdown-divider"
-    }, null), [[N, b.value]]), a("li", {
-      class: `dropdown-item${c.value ? " active" : ""} ${v.value ? " disabled" : ""}`,
-      onClick: i,
-      title: f.value.toString()
-    }, [l.value])]);
+    }, null), [[T, b.value]]), n("li", {
+      class: `dropdown-item${p.value ? " active" : ""} ${f.value ? " disabled" : ""}`,
+      onClick: s,
+      title: a.value.toString()
+    }, [i.value])]);
   }
-}), Z = /* @__PURE__ */ $({
+}), F = /* @__PURE__ */ W({
   name: "FDropdown",
-  props: O,
+  props: z,
   emits: ["select"],
-  setup(e, g) {
-    const f = d(e.model), {
-      show: l,
-      dropdownMenuRef: v,
-      dropdownRef: c,
+  setup(e, l) {
+    const a = u(e.model), {
+      show: i,
+      dropdownMenuRef: f,
+      dropdownRef: p,
       clickEventRef: b,
-      showDropMenu: i,
-      hoverDropdown: S,
-      leftButtonClick: D,
-      showDropMenuByForce: B,
-      closeDropMenu: u,
-      selectItem: k,
-      resolveSize: R
-    } = j(e, g);
-    function L(H) {
-      u(), g.emit("select", H);
+      showDropMenu: s,
+      hoverDropdown: y,
+      leftButtonClick: S,
+      showDropMenuByForce: v,
+      closeDropMenu: d
+    } = Y(e, l);
+    function x(C) {
+      d(), l.emit("select", C);
     }
-    function I() {
+    function D() {
       return [{
         "dropdown-item": e.nest
       }, {
@@ -200,11 +335,11 @@ const q = {
         disabled: e.disabled
       }];
     }
-    return W(() => {
-      l.value && B(null, !0);
-    }), () => a("div", {
-      ref: c
-    }, [a("div", {
+    return E(() => {
+      i.value && v(null, !0);
+    }), () => n("div", {
+      ref: p
+    }, [n("div", {
       class: ["farris-dropdown", "btn-group", {
         dropup: e.position === "top"
       }, {
@@ -214,50 +349,164 @@ const q = {
       }, {
         dropright: e.position === "right"
       }]
-    }, [e.splitButton && a("span", {
-      class: ["btn", ...I()],
+    }, [e.splitButton && n("span", {
+      class: ["btn", ...D()],
       style: "width:100%",
-      onClick: D
-    }, [e.title]), a("span", {
+      onClick: S
+    }, [e.title]), n("span", {
       ref: b,
       class: ["dropdown-toggle", {
         btn: !e.nest
       }, {
         "dropdown-toggle-split": e.splitButton
-      }, ...I()],
+      }, ...D()],
       style: "width:100%",
-      onClick: i,
-      onMouseenter: S,
-      onMouseleave: S
-    }, [e.splitButton ? "" : e.title, e.iconClass && a("span", {
+      onClick: s,
+      onMouseenter: y,
+      onMouseleave: y
+    }, [e.splitButton ? "" : e.title, e.iconClass && n("span", {
       class: `f-icon ${e.iconClass}`
-    }, null)]), a(A, {
+    }, null)]), n(V, {
       to: "body"
     }, {
-      default: () => [a("div", {
-        ref: v,
-        class: `dropdown-menu${l.value ? " show" : ""}`
-      }, [a(X, null, [f.value.map(({
-        label: H,
-        value: F,
-        disabled: o,
-        active: t,
-        divide: r
-      }) => a(V, {
-        value: F.toString(),
-        label: H,
-        disabled: o,
-        active: t,
-        divide: r,
-        onSelect: (n) => L(n)
+      default: () => [n("div", {
+        ref: f,
+        class: `dropdown-menu${i.value ? " show" : ""}`
+      }, [n(X, null, [a.value.map(({
+        label: C,
+        value: $,
+        disabled: I,
+        active: j,
+        divide: o
+      }) => n(O, {
+        value: $.toString(),
+        label: C,
+        disabled: I,
+        active: j,
+        divide: o,
+        onSelect: (t) => x(t)
       }, null))])])]
     })])]);
   }
-}), U = Y(Z);
+}), ue = /* @__PURE__ */ W({
+  name: "FDropdownDesign",
+  props: z,
+  emits: ["select"],
+  setup(e, l) {
+    const a = u(e.model), {
+      show: i,
+      showDropMenu: f,
+      hoverDropdown: p,
+      leftButtonClick: b
+    } = Y(e, l);
+    function s(d) {
+      l.emit("select", d);
+    }
+    const y = u(), S = Z("design-item-context"), v = K(y, S);
+    return E(() => {
+      y.value.componentInstance = v;
+    }), l.expose(v.value), () => n("div", {
+      ref: y
+    }, [n("div", {
+      class: ["farris-dropdown", "btn-group", {
+        dropup: e.position === "top"
+      }, {
+        dropdown: e.position === "bottom"
+      }, {
+        dropleft: e.position === "left"
+      }, {
+        dropright: e.position === "right"
+      }],
+      style: {
+        width: e.width
+      }
+    }, [e.splitButton && n("span", {
+      class: ["btn", {
+        "dropdown-item": e.nest
+      }, {
+        "btn-lg": e.size === "large"
+      }, {
+        "btn-sm": e.size === "small"
+      }, {
+        "btn-primary": e.type === "primary"
+      }, {
+        "btn-success": e.type === "success"
+      }, {
+        "btn-warning": e.type === "warning"
+      }, {
+        "btn-danger": e.type === "danger"
+      }, {
+        "btn-info": e.type === "info"
+      }],
+      style: "width:100%",
+      onClick: b
+    }, [e.title]), n("span", {
+      class: ["dropdown-toggle", {
+        btn: !e.nest
+      }, {
+        "dropdown-item": e.nest
+      }, {
+        "dropdown-toggle-split": e.splitButton
+      }, {
+        "btn-lg": e.size === "large"
+      }, {
+        "btn-sm": e.size === "small"
+      }, {
+        "btn-primary": e.type === "primary"
+      }, {
+        "btn-success": e.type === "success"
+      }, {
+        "btn-warning": e.type === "warning"
+      }, {
+        "btn-danger": e.type === "danger"
+      }, {
+        "btn-info": e.type === "info"
+      }, {
+        "btn-secondary": e.type === "secondary"
+      }, {
+        "btn-link": e.type === "link"
+      }, {
+        disabled: e.disabled
+      }],
+      style: "width:100%",
+      onClick: f,
+      onMouseenter: p,
+      onMouseleave: p
+    }, [L(n("span", {
+      class: "sr-only"
+    }, null), [[T, e.splitButton]]), e.splitButton ? "" : e.title, L(n("span", {
+      class: `f-icon ${e.iconClass.toString()}`
+    }, null), [[T, e.iconClass]])]), n("div", {
+      class: `dropdown-menu${i.value ? " show" : ""}`
+    }, [n(X, null, [a.value.map(({
+      label: d,
+      value: x,
+      disabled: D,
+      active: C,
+      divide: $
+    }) => n(O, {
+      value: x.toString(),
+      label: d,
+      disabled: D,
+      active: C,
+      divide: $,
+      onSelect: (I) => s(I)
+    }, null))])])])]);
+  }
+}), we = {
+  install(e) {
+    e.component(F.name, F);
+  },
+  register(e, l, a, i) {
+    e.dropdown = F, l.dropdown = N;
+  },
+  registerDesigner(e, l, a) {
+    e.dropdown = ue, l.dropdown = N;
+  }
+};
 export {
-  Z as Dropdown,
-  V as FDropdownItem,
-  U as default,
-  O as dropdownProps,
-  j as useDropdown
+  F as Dropdown,
+  we as default,
+  z as dropdownProps,
+  N as propsResolver
 };

package/components/dropdown/index.umd.cjs

@@ -1,2 +1,2 @@
-(function(d,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../common/index.umd.js"],o):(d=typeof globalThis<"u"?globalThis:d||self,o(d.dropdown={},d.Vue,d.common))})(this,function(d,o,R){"use strict";const I={show:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},title:{type:String,default:"下拉示例"},size:{type:String,default:""},type:{type:String,default:"primary"},iconClass:{type:String,default:""},active:{type:Boolean,default:!1},splitButton:{type:Boolean,default:!1},position:{type:String,default:"bottom"},model:{type:Array,default:[{label:"项目一",value:"XM1"},{label:"项目二",value:"XM2"},{label:"项目三",value:"XM3"}]},onSelect:{type:Function,default:()=>{}}};function L(t,g){let f;const r=o.ref(t.show),w=o.ref(),m=o.ref(),h=o.ref(),i=10;o.onMounted(()=>{f=m.value});const S=(n=1)=>{const e=["body>.f-datagrid-settings-simple-host","body>div","body>farris-dialog>.farris-modal.show","body>.farris-modal.show","body>farris-filter-panel>.f-filter-panel-wrapper","body .f-sidebar-show>.f-sidebar-main","body>.popover.show","body>filter-row-panel>.f-datagrid-filter-panel","body>.f-section-maximize"],a=Array.from(document.body.querySelectorAll(e.join(","))).filter(l=>l).map(l=>{const{display:H,zIndex:b}=window.getComputedStyle(l);return H==="none"?0:parseInt(b,10)}).filter(l=>l);let s=Math.max(...a);return s<1040&&(s=1040),s+n},D=(n,e)=>{const{height:a,left:s,top:l,width:H}=n.getBoundingClientRect(),{width:b,height:W,top:X}=e.getBoundingClientRect();if(n.className.indexOf("dropdown-submenu")>-1||n.closest(".dropdown-submenu")||n.classList.contains("dropright")){const v=window.innerWidth-s-n.offsetWidth,x=window.innerHeight-l,{position:y}=getComputedStyle(e);if(y==="fixed"){let u=s+n.offsetWidth;e.offsetWidth>v&&s>v&&(u=s-b),e.style.left=u+"px",e.style.right="auto",window.innerHeight-2*i<e.offsetHeight?(e.style.top=i+"px",e.style.bottom=i+"px",e.style.maxHeight=window.innerHeight-2*i+"px",e.style.overflowY="auto",e.className+=" dropdown-menu-maxheight"):x<e.offsetHeight?(e.style.top="auto",e.style.bottom=i+"px"):(e.style.top=l+"px",e.style.bottom="auto")}else{if(e.offsetWidth>v){const u=-b;e.style.left=u+"px"}window.innerHeight-2*i<e.offsetHeight?(e.style.top=-1*(l-i)+"px",e.style.bottom="auto",e.style.maxHeight=window.innerHeight-2*i+"px",e.style.overflowY="auto",e.className+=" dropdown-menu-maxheight"):x<e.offsetHeight&&(e.style.top=x-e.offsetHeight-i+"px",e.style.bottom="auto")}}else{const{marginTop:v,marginBottom:x}=getComputedStyle(e);let y=0;const u=Math.ceil(parseFloat(v))+Math.ceil(parseFloat(x));let p=l+a,$=s;window.innerHeight-p-u<W&&(p=l-W,p<0&&(window.innerHeight-l-a>l?(p=l+a,y=window.innerHeight-p-u-i):(p=i,y=l-p-u))),window.innerWidth-s<b&&window.innerWidth-s<s+H&&($=s-b+H),document.body.append(e),e.style.cssText=`position:fixed;bottom:unset;left:${$}px
-             !important;top:${p}px !important;right: unset;${y?"max-height:"+y+"px;overflow-y:auto;":""}`,y&&(e.className+=" dropdown-menu-maxheight"),e.style.zIndex=S().toString()}},B=()=>{D(w.value,m.value)},c=()=>{t.hover||(r.value=!1,m.value.style=null,document.removeEventListener("click",c),f.removeEventListener("click",c),document.removeEventListener("scroll",c),f.removeEventListener("scroll",c))},N=(n=null,e=!1)=>{t.hover||t.disabled||(n==null||n.stopPropagation(),e?(setTimeout(()=>{B()}),r.value=!0):(r.value||setTimeout(()=>{B()}),r.value=!r.value),document.addEventListener("click",c),document.addEventListener("scroll",c),t.hideOnClick||(f.addEventListener("click",a=>{a.stopPropagation()}),f.addEventListener("scroll",a=>{a.stopPropagation()})))};return{show:r,dropdownRef:w,dropdownMenuRef:m,clickEventRef:h,showDropMenu:n=>{N(n,!1)},showDropMenuByForce:N,hoverDropdown:n=>{t.hover&&(r.value||setTimeout(()=>{}),r.value=!r.value)},leftButtonClick:()=>{},closeDropMenu:c,selectItem:n=>{g.emit("select",n)},resolveSize:n=>{const e=/px|em|rem|pt|%/;return e.test(n)?`${parseInt(n,10)}${n.match(e)[0]}`:`${n}px`}}}const z={label:{type:String,default:"XM1"},value:{type:String||Number,default:"项目一"},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1},divide:{type:Boolean,default:!1},onSelect:{type:Function,default:()=>{}}},T=o.defineComponent({name:"FDropdownItem",props:z,emits:["select"],setup(t,g){const f=o.ref(t.value),r=o.ref(t.label),w=o.ref(t.disabled),m=o.ref(t.active),h=o.ref(t.divide),i=()=>{w.value||g.emit("select",t)};return()=>o.createVNode("div",null,[o.withDirectives(o.createVNode("div",{class:"dropdown-divider"},null),[[o.vShow,h.value]]),o.createVNode("li",{class:`dropdown-item${m.value?" active":""} ${w.value?" disabled":""}`,onClick:i,title:f.value.toString()},[r.value])])}}),V=o.defineComponent({name:"FDropdown",props:I,emits:["select"],setup(t,g){const f=o.ref(t.model),{show:r,dropdownMenuRef:w,dropdownRef:m,clickEventRef:h,showDropMenu:i,hoverDropdown:S,leftButtonClick:D,showDropMenuByForce:B,closeDropMenu:c,selectItem:N,resolveSize:A}=L(t,g);function F(C){c(),g.emit("select",C)}function k(){return[{"dropdown-item":t.nest},{"btn-lg":t.size==="large"},{"btn-sm":t.size==="small"},{"btn-primary":t.type==="primary"},{"btn-success":t.type==="success"},{"btn-warning":t.type==="warning"},{"btn-danger":t.type==="danger"},{"btn-info":t.type==="info"},{"btn-secondary":t.type==="secondary"},{"btn-link":t.type==="link"},{disabled:t.disabled}]}return o.onMounted(()=>{r.value&&B(null,!0)}),()=>o.createVNode("div",{ref:m},[o.createVNode("div",{class:["farris-dropdown","btn-group",{dropup:t.position==="top"},{dropdown:t.position==="bottom"},{dropleft:t.position==="left"},{dropright:t.position==="right"}]},[t.splitButton&&o.createVNode("span",{class:["btn",...k()],style:"width:100%",onClick:D},[t.title]),o.createVNode("span",{ref:h,class:["dropdown-toggle",{btn:!t.nest},{"dropdown-toggle-split":t.splitButton},...k()],style:"width:100%",onClick:i,onMouseenter:S,onMouseleave:S},[t.splitButton?"":t.title,t.iconClass&&o.createVNode("span",{class:`f-icon ${t.iconClass}`},null)]),o.createVNode(o.Teleport,{to:"body"},{default:()=>[o.createVNode("div",{ref:w,class:`dropdown-menu${r.value?" show":""}`},[o.createVNode(o.Fragment,null,[f.value.map(({label:C,value:E,disabled:n,active:e,divide:a})=>o.createVNode(T,{value:E.toString(),label:C,disabled:n,active:e,divide:a,onSelect:s=>F(s)},null))])])]})])])}}),j=R.withInstall(V);d.Dropdown=V,d.FDropdownItem=T,d.default=j,d.dropdownProps=I,d.useDropdown=L,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f.dropdown={},f.Vue,f.dynamicResolver,f.designerCanvas))})(this,function(f,t,T,z){"use strict";function A(e,r,l){return r}const X=new Map([["appearance",T.resolveAppearance]]),M={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/dropdown.schema.json",title:"dropdown",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for dropdown",type:"string"},type:{description:"The type string of dropdown",type:"string",default:"dropdown"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},disable:{type:"string",default:!1},editable:{description:"",type:"boolean",default:!0},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},require:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},visible:{description:"",type:"boolean",default:!0}},required:["id","type"]},O={title:"dropdown",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}},behavior:{description:"Basic Infomation",title:"行为",properties:{readonly:{description:"",title:"只读",type:"string"},required:{description:"",title:"必填",type:"boolean"},visible:{description:"",title:"可见",type:"boolean"},placeholder:{description:"",title:"提示文本",type:"string"},tabindex:{description:"",title:"tab索引",type:"number"}}}}},V={show:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},title:{type:String,default:"下拉示例"},size:{type:String,default:""},type:{type:String,default:"primary"},iconClass:{type:String,default:""},active:{type:Boolean,default:!1},splitButton:{type:Boolean,default:!1},position:{type:String,default:"bottom"},model:{type:Array,default:[{label:"项目一",value:"XM1"},{label:"项目二",value:"XM2"},{label:"项目三",value:"XM3"}]},onSelect:{type:Function,default:()=>{}}},F=T.createPropsResolver(V,M,X,A,O);function j(e,r){let l;const i=t.ref(e.show),m=t.ref(),p=t.ref(),b=t.ref(),s=10;t.onMounted(()=>{l=p.value});const y=(n=1)=>{const o=["body>.f-datagrid-settings-simple-host","body>div","body>farris-dialog>.farris-modal.show","body>.farris-modal.show","body>farris-filter-panel>.f-filter-panel-wrapper","body .f-sidebar-show>.f-sidebar-main","body>.popover.show","body>filter-row-panel>.f-datagrid-filter-panel","body>.f-section-maximize"],u=Array.from(document.body.querySelectorAll(o.join(","))).filter(d=>d).map(d=>{const{display:R,zIndex:S}=window.getComputedStyle(d);return R==="none"?0:parseInt(S,10)}).filter(d=>d);let c=Math.max(...u);return c<1040&&(c=1040),c+n},B=(n,o)=>{const{height:u,left:c,top:d,width:R}=n.getBoundingClientRect(),{width:S,height:E,top:se}=o.getBoundingClientRect();if(n.className.indexOf("dropdown-submenu")>-1||n.closest(".dropdown-submenu")||n.classList.contains("dropright")){const N=window.innerWidth-c-n.offsetWidth,$=window.innerHeight-d,{position:v}=getComputedStyle(o);if(v==="fixed"){let g=c+n.offsetWidth;o.offsetWidth>N&&c>N&&(g=c-S),o.style.left=g+"px",o.style.right="auto",window.innerHeight-2*s<o.offsetHeight?(o.style.top=s+"px",o.style.bottom=s+"px",o.style.maxHeight=window.innerHeight-2*s+"px",o.style.overflowY="auto",o.className+=" dropdown-menu-maxheight"):$<o.offsetHeight?(o.style.top="auto",o.style.bottom=s+"px"):(o.style.top=d+"px",o.style.bottom="auto")}else{if(o.offsetWidth>N){const g=-S;o.style.left=g+"px"}window.innerHeight-2*s<o.offsetHeight?(o.style.top=-1*(d-s)+"px",o.style.bottom="auto",o.style.maxHeight=window.innerHeight-2*s+"px",o.style.overflowY="auto",o.className+=" dropdown-menu-maxheight"):$<o.offsetHeight&&(o.style.top=$-o.offsetHeight-s+"px",o.style.bottom="auto")}}else{const{marginTop:N,marginBottom:$}=getComputedStyle(o);let v=0;const g=Math.ceil(parseFloat(N))+Math.ceil(parseFloat($));let w=d+u,W=c;window.innerHeight-w-g<E&&(w=d-E,w<0&&(window.innerHeight-d-u>d?(w=d+u,v=window.innerHeight-w-g-s):(w=s,v=d-w-g))),window.innerWidth-c<S&&window.innerWidth-c<c+R&&(W=c-S+R),document.body.append(o),o.style.cssText=`position:fixed;bottom:unset;left:${W}px
+             !important;top:${w}px !important;right: unset;${v?"max-height:"+v+"px;overflow-y:auto;":""}`,v&&(o.className+=" dropdown-menu-maxheight"),o.style.zIndex=y().toString()}},h=()=>{B(m.value,p.value)},a=()=>{e.hover||(i.value=!1,p.value.style=null,document.removeEventListener("click",a),l.removeEventListener("click",a),document.removeEventListener("scroll",a),l.removeEventListener("scroll",a))},x=(n=null,o=!1)=>{e.hover||e.disabled||(n==null||n.stopPropagation(),o?(setTimeout(()=>{h()}),i.value=!0):(i.value||setTimeout(()=>{h()}),i.value=!i.value),document.addEventListener("click",a),document.addEventListener("scroll",a),e.hideOnClick||(l.addEventListener("click",u=>{u.stopPropagation()}),l.addEventListener("scroll",u=>{u.stopPropagation()})))};return{show:i,dropdownRef:m,dropdownMenuRef:p,clickEventRef:b,showDropMenu:n=>{x(n,!1)},showDropMenuByForce:x,hoverDropdown:n=>{e.hover&&(i.value||setTimeout(()=>{}),i.value=!i.value)},leftButtonClick:()=>{},closeDropMenu:a,selectItem:n=>{r.emit("select",n)},resolveSize:n=>{const o=/px|em|rem|pt|%/;return o.test(n)?`${parseInt(n,10)}${n.match(o)[0]}`:`${n}px`}}}const Y={label:{type:String,default:"XM1"},value:{type:String||Number,default:"项目一"},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1},divide:{type:Boolean,default:!1},onSelect:{type:Function,default:()=>{}}},L=t.defineComponent({name:"FDropdownItem",props:Y,emits:["select"],setup(e,r){const l=t.ref(e.value),i=t.ref(e.label),m=t.ref(e.disabled),p=t.ref(e.active),b=t.ref(e.divide),s=()=>{m.value||r.emit("select",e)};return()=>t.createVNode("div",null,[t.withDirectives(t.createVNode("div",{class:"dropdown-divider"},null),[[t.vShow,b.value]]),t.createVNode("li",{class:`dropdown-item${p.value?" active":""} ${m.value?" disabled":""}`,onClick:s,title:l.value.toString()},[i.value])])}}),H=t.defineComponent({name:"FDropdown",props:V,emits:["select"],setup(e,r){const l=t.ref(e.model),{show:i,dropdownMenuRef:m,dropdownRef:p,clickEventRef:b,showDropMenu:s,hoverDropdown:y,leftButtonClick:B,showDropMenuByForce:h,closeDropMenu:a}=j(e,r);function x(C){a(),r.emit("select",C)}function D(){return[{"dropdown-item":e.nest},{"btn-lg":e.size==="large"},{"btn-sm":e.size==="small"},{"btn-primary":e.type==="primary"},{"btn-success":e.type==="success"},{"btn-warning":e.type==="warning"},{"btn-danger":e.type==="danger"},{"btn-info":e.type==="info"},{"btn-secondary":e.type==="secondary"},{"btn-link":e.type==="link"},{disabled:e.disabled}]}return t.onMounted(()=>{i.value&&h(null,!0)}),()=>t.createVNode("div",{ref:p},[t.createVNode("div",{class:["farris-dropdown","btn-group",{dropup:e.position==="top"},{dropdown:e.position==="bottom"},{dropleft:e.position==="left"},{dropright:e.position==="right"}]},[e.splitButton&&t.createVNode("span",{class:["btn",...D()],style:"width:100%",onClick:B},[e.title]),t.createVNode("span",{ref:b,class:["dropdown-toggle",{btn:!e.nest},{"dropdown-toggle-split":e.splitButton},...D()],style:"width:100%",onClick:s,onMouseenter:y,onMouseleave:y},[e.splitButton?"":e.title,e.iconClass&&t.createVNode("span",{class:`f-icon ${e.iconClass}`},null)]),t.createVNode(t.Teleport,{to:"body"},{default:()=>[t.createVNode("div",{ref:m,class:`dropdown-menu${i.value?" show":""}`},[t.createVNode(t.Fragment,null,[l.value.map(({label:C,value:k,disabled:I,active:q,divide:n})=>t.createVNode(L,{value:k.toString(),label:C,disabled:I,active:q,divide:n,onSelect:o=>x(o)},null))])])]})])])}}),_=t.defineComponent({name:"FDropdownDesign",props:V,emits:["select"],setup(e,r){const l=t.ref(e.model),{show:i,showDropMenu:m,hoverDropdown:p,leftButtonClick:b}=j(e,r);function s(a){r.emit("select",a)}const y=t.ref(),B=t.inject("design-item-context"),h=z.useDesignerComponent(y,B);return t.onMounted(()=>{y.value.componentInstance=h}),r.expose(h.value),()=>t.createVNode("div",{ref:y},[t.createVNode("div",{class:["farris-dropdown","btn-group",{dropup:e.position==="top"},{dropdown:e.position==="bottom"},{dropleft:e.position==="left"},{dropright:e.position==="right"}],style:{width:e.width}},[e.splitButton&&t.createVNode("span",{class:["btn",{"dropdown-item":e.nest},{"btn-lg":e.size==="large"},{"btn-sm":e.size==="small"},{"btn-primary":e.type==="primary"},{"btn-success":e.type==="success"},{"btn-warning":e.type==="warning"},{"btn-danger":e.type==="danger"},{"btn-info":e.type==="info"}],style:"width:100%",onClick:b},[e.title]),t.createVNode("span",{class:["dropdown-toggle",{btn:!e.nest},{"dropdown-item":e.nest},{"dropdown-toggle-split":e.splitButton},{"btn-lg":e.size==="large"},{"btn-sm":e.size==="small"},{"btn-primary":e.type==="primary"},{"btn-success":e.type==="success"},{"btn-warning":e.type==="warning"},{"btn-danger":e.type==="danger"},{"btn-info":e.type==="info"},{"btn-secondary":e.type==="secondary"},{"btn-link":e.type==="link"},{disabled:e.disabled}],style:"width:100%",onClick:m,onMouseenter:p,onMouseleave:p},[t.withDirectives(t.createVNode("span",{class:"sr-only"},null),[[t.vShow,e.splitButton]]),e.splitButton?"":e.title,t.withDirectives(t.createVNode("span",{class:`f-icon ${e.iconClass.toString()}`},null),[[t.vShow,e.iconClass]])]),t.createVNode("div",{class:`dropdown-menu${i.value?" show":""}`},[t.createVNode(t.Fragment,null,[l.value.map(({label:a,value:x,disabled:D,active:C,divide:k})=>t.createVNode(L,{value:x.toString(),label:a,disabled:D,active:C,divide:k,onSelect:I=>s(I)},null))])])])])}}),Z={install(e){e.component(H.name,H)},register(e,r,l,i){e.dropdown=H,r.dropdown=F},registerDesigner(e,r,l){e.dropdown=_,r.dropdown=F}};f.Dropdown=H,f.default=Z,f.dropdownProps=V,f.propsResolver=F,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});