@farris/ui-vue/components/dropdown/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as B, onMounted as Y, defineComponent as M, createVNode as g, withDirectives as A, vShow as z, Teleport as K, Fragment as U, inject as I } from "vue";
import { isPlainObject as _, cloneDeep as Z } from "lodash-es";
const G = {}, J = {};
function W(e) {
  const { properties: t, title: a, ignore: n } = e, i = n && Array.isArray(n), l = Object.keys(t).reduce((c, u) => ((!i || !n.find(($) => $ === u)) && (c[u] = t[u].type === "object" && t[u].properties ? W(t[u]) : Z(t[u].default)), c), {});
  if (a && (!i || !n.find((c) => c === "id"))) {
    const c = a.toLowerCase().replace(/-/g, "_");
    l.id = `${c}_${Math.random().toString().slice(2, 6)}`;
  }
  return l;
}
function ee(e) {
  const { properties: t, title: a, required: n } = e;
  if (n && Array.isArray(n)) {
    const i = n.reduce((l, c) => (l[c] = t[c].type === "object" && t[c].properties ? W(t[c]) : Z(t[c].default), l), {});
    if (a && n.find((l) => l === "id")) {
      const l = a.toLowerCase().replace(/-/g, "_");
      i.id = `${l}_${Math.random().toString().slice(2, 6)}`;
    }
    return i;
  }
  return {
    type: a
  };
}
function Q(e, t = {}, a) {
  const n = G[e];
  if (n) {
    let i = ee(n);
    const l = J[e];
    return i = l ? l({ getSchemaByType: Q }, i, t, a) : i, i;
  }
  return null;
}
function te(e, t) {
  const a = W(t);
  return Object.keys(a).reduce((n, i) => (Object.prototype.hasOwnProperty.call(e, i) && (n[i] && _(n[i]) && _(e[i] || !e[i]) ? Object.assign(n[i], e[i] || {}) : n[i] = e[i]), n), a), a;
}
function P(e, t) {
  return Object.keys(e).filter((n) => e[n] != null).reduce((n, i) => {
    if (t.has(i)) {
      const l = t.get(i);
      if (typeof l == "string")
        n[l] = e[i];
      else {
        const c = l(i, e[i], e);
        Object.assign(n, c);
      }
    } else
      n[i] = e[i];
    return n;
  }, {});
}
function ne(e, t, a = /* @__PURE__ */ new Map()) {
  const n = te(e, t);
  return P(n, a);
}
function oe(e = {}) {
  function t(s, d, r, y) {
    if (typeof r == "number")
      return y[s].length === r;
    if (typeof r == "object") {
      const h = Object.keys(r)[0], b = r[h];
      if (h === "not")
        return Number(y[s].length) !== Number(b);
      if (h === "moreThan")
        return Number(y[s].length) >= Number(b);
      if (h === "lessThan")
        return Number(y[s].length) <= Number(b);
    }
    return !1;
  }
  function a(s, d, r, y) {
    return y[s] && y[s].propertyValue && String(y[s].propertyValue.value) === String(r);
  }
  const n = /* @__PURE__ */ new Map([
    ["length", t],
    ["getProperty", a]
  ]);
  Object.keys(e).reduce((s, d) => (s.set(d, e[d]), s), n);
  function i(s, d) {
    const r = s;
    return typeof d == "number" ? [{ target: r, operator: "length", param: null, value: Number(d) }] : typeof d == "boolean" ? [{ target: r, operator: "getProperty", param: s, value: !!d }] : typeof d == "object" ? Object.keys(d).map((y) => {
      if (y === "length")
        return { target: r, operator: "length", param: null, value: d[y] };
      const h = y, b = d[y];
      return { target: r, operator: "getProperty", param: h, value: b };
    }) : [];
  }
  function l(s) {
    return Object.keys(s).reduce((r, y) => {
      const h = i(y, s[y]);
      return r.push(...h), r;
    }, []);
  }
  function c(s, d) {
    if (n.has(s.operator)) {
      const r = n.get(s.operator);
      return r && r(s.target, s.param, s.value, d) || !1;
    }
    return !1;
  }
  function u(s, d) {
    return l(s).reduce((h, b) => h && c(b, d), !0);
  }
  function $(s, d) {
    const r = Object.keys(s), y = r.includes("allOf"), h = r.includes("anyOf"), b = y || h, p = (b ? s[b ? y ? "allOf" : "anyOf" : "allOf"] : [s]).map((E) => u(E, d));
    return y ? !p.includes(!1) : p.includes(!0);
  }
  return { parseValueSchema: $ };
}
const ie = {}, re = {};
oe();
function se(e, t, a = /* @__PURE__ */ new Map(), n = (c, u, $, s) => u, i = {}, l = (c) => c) {
  return G[t.title] = t, J[t.title] = n, ie[t.title] = i, re[t.title] = l, (c = {}, u = !0) => {
    if (!u)
      return P(c, a);
    const $ = ne(c, t, a), s = Object.keys(e).reduce((d, r) => (d[r] = e[r].default, d), {});
    return Object.assign(s, $);
  };
}
function ae(e, t) {
  return { customClass: t.class, customStyle: t.style };
}
function le(e, t, a) {
  return t;
}
const ce = /* @__PURE__ */ new Map([
  ["appearance", ae]
]), ue = "https://json-schema.org/draft/2020-12/schema", de = "https://farris-design.gitee.io/dropdown.schema.json", fe = "dropdown", pe = "A Farris Component", ye = "object", me = {
  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
  }
}, ge = [
  "id",
  "type"
], be = {
  $schema: ue,
  $id: de,
  title: fe,
  description: pe,
  type: ye,
  properties: me,
  required: ge
}, he = "dropdown", we = "A Farris Component", ve = "object", Se = {
  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: he,
  description: we,
  type: ve,
  categories: Se
}, q = {
  /** 默认展开或折叠 */
  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: () => {
  } }
}, X = se(q, be, ce, le, De);
function x(e, t) {
  let a;
  const n = B(e.show), i = B(), l = B(), c = B(), u = 10;
  Y(() => {
    a = l.value;
  });
  const $ = (p = 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"
    ], E = Array.from(document.body.querySelectorAll(o.join(","))).filter((S) => S).map((S) => {
      const { display: N, zIndex: R } = window.getComputedStyle(S);
      return N === "none" ? 0 : parseInt(R, 10);
    }).filter((S) => S);
    let k = Math.max(...E);
    return k < 1040 && (k = 1040), k + p;
  }, s = (p, o) => {
    const {
      height: E,
      left: k,
      top: S,
      width: N
    } = p.getBoundingClientRect(), { width: R, height: f, top: v } = o.getBoundingClientRect();
    if (p.className.indexOf("dropdown-submenu") > -1 || p.closest(".dropdown-submenu") || p.classList.contains("dropright")) {
      const m = window.innerWidth - k - p.offsetWidth, D = window.innerHeight - S, { position: T } = getComputedStyle(o);
      if (T === "fixed") {
        let O = k + p.offsetWidth;
        o.offsetWidth > m && k > m && (O = k - R), o.style.left = O + "px", o.style.right = "auto", window.innerHeight - 2 * u < o.offsetHeight ? (o.style.top = u + "px", o.style.bottom = u + "px", o.style.maxHeight = window.innerHeight - 2 * u + "px", o.style.overflowY = "auto", o.className += " dropdown-menu-maxheight") : D < o.offsetHeight ? (o.style.top = "auto", o.style.bottom = u + "px") : (o.style.top = S + "px", o.style.bottom = "auto");
      } else {
        if (o.offsetWidth > m) {
          const O = -R;
          o.style.left = O + "px";
        }
        window.innerHeight - 2 * u < o.offsetHeight ? (o.style.top = -1 * (S - u) + "px", o.style.bottom = "auto", o.style.maxHeight = window.innerHeight - 2 * u + "px", o.style.overflowY = "auto", o.className += " dropdown-menu-maxheight") : D < o.offsetHeight && (o.style.top = D - o.offsetHeight - u + "px", o.style.bottom = "auto");
      }
    } else {
      const { marginTop: m, marginBottom: D } = getComputedStyle(o);
      let T = 0;
      const O = Math.ceil(parseFloat(m)) + Math.ceil(parseFloat(D));
      let j = S + E, V = k;
      window.innerHeight - j - O < f && (j = S - f, j < 0 && (window.innerHeight - S - E > S ? (j = S + E, T = window.innerHeight - j - O - u) : (j = u, T = S - j - O))), window.innerWidth - k < R && window.innerWidth - k < k + N && (V = k - R + N), document.body.append(o), o.style.cssText = `position:fixed;bottom:unset;left:${V}px
             !important;top:${j}px !important;right: unset;${T ? "max-height:" + T + "px;overflow-y:auto;" : ""}`, T && (o.className += " dropdown-menu-maxheight"), o.style.zIndex = $().toString();
    }
  }, d = () => {
    s(i.value, l.value);
  }, r = () => {
    e.hover || (n.value = !1, document.removeEventListener("click", r), a.removeEventListener("click", r), document.removeEventListener("scroll", r), a.removeEventListener("scroll", r));
  };
  return {
    show: n,
    dropdownRef: i,
    dropdownMenuRef: l,
    clickEventRef: c,
    showDropMenu: (p) => {
      e.hover || e.disabled || (p == null || p.stopPropagation(), n.value || setTimeout(() => {
        d();
      }), n.value = !n.value, document.addEventListener("click", r), document.addEventListener("scroll", r), e.hideOnClick || (a.addEventListener("click", (o) => {
        o.stopPropagation();
      }), a.addEventListener("scroll", (o) => {
        o.stopPropagation();
      })));
    },
    hoverDropdown: (p) => {
      e.hover && (n.value || setTimeout(() => {
      }), n.value = !n.value);
    },
    leftButtonClick: () => {
    },
    closeDropMenu: r,
    selectItem: (p) => {
      t.emit("select", p);
    },
    resolveSize: (p) => {
      const o = /px|em|rem|pt|%/;
      return o.test(p) ? `${parseInt(p, 10)}${p.match(o)[0]}` : `${p}px`;
    }
  };
}
const Be = {
  /** 下拉框标签 */
  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: () => {
  } }
}, C = /* @__PURE__ */ M({
  name: "FDropdownItem",
  props: Be,
  emits: ["select"],
  setup(e, t) {
    const a = B(e.value), n = B(e.label), i = B(e.disabled), l = B(e.active), c = B(e.divide), u = () => {
      i.value || t.emit("select", e);
    };
    return () => g("div", null, [A(g("div", {
      class: "dropdown-divider"
    }, null), [[z, c.value]]), g("li", {
      class: `dropdown-item${l.value ? " active" : ""} ${i.value ? " disabled" : ""}`,
      onClick: u,
      title: a.value.toString()
    }, [n.value])]);
  }
}), F = /* @__PURE__ */ M({
  name: "FDropdown",
  props: q,
  emits: ["select"],
  setup(e, t) {
    const a = B(e.model), {
      show: n,
      dropdownMenuRef: i,
      dropdownRef: l,
      clickEventRef: c,
      showDropMenu: u,
      hoverDropdown: $,
      leftButtonClick: s,
      closeDropMenu: d,
      selectItem: r,
      resolveSize: y
    } = x(e, t);
    function h(b) {
      t.emit("select", b);
    }
    return () => g("div", {
      ref: l
    }, [g("div", {
      class: ["farris-dropdown", "btn-group", {
        dropup: e.position === "top"
      }, {
        dropdown: e.position === "bottom"
      }, {
        dropleft: e.position === "left"
      }, {
        dropright: e.position === "right"
      }]
    }, [e.splitButton && g("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: s
    }, [e.title]), g("span", {
      ref: c,
      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: u,
      onMouseenter: $,
      onMouseleave: $
    }, [A(g("span", {
      class: "sr-only"
    }, null), [[z, e.splitButton]]), e.splitButton ? "" : e.title, A(g("span", {
      class: `f-icon ${e.iconClass.toString()}`
    }, null), [[z, e.iconClass]])]), g(K, {
      to: "body"
    }, {
      default: () => [g("div", {
        ref: i,
        class: `dropdown-menu${n.value ? " show" : ""}`
      }, [g(U, null, [a.value.map(({
        label: b,
        value: H,
        disabled: L,
        active: p,
        divide: o
      }) => g(C, {
        value: H.toString(),
        label: b,
        disabled: L,
        active: p,
        divide: o,
        onSelect: (E) => h(E)
      }, null))])])]
    })])]);
  }
});
function ke(e, t, a) {
  var R;
  const n = "", i = "", l = B();
  function c() {
    return (t == null ? void 0 : t.schema.componentType) !== "frame";
  }
  function u() {
    return !1;
  }
  function $() {
    return (t == null ? void 0 : t.schema.componentType) !== "frame";
  }
  function s() {
    return (t == null ? void 0 : t.schema.componentType) === "frame";
  }
  function d(f) {
    if (!f || !f.value)
      return null;
    if (f.value.schema && f.value.schema.type === "component")
      return f.value;
    const v = B(f == null ? void 0 : f.value.parent), w = d(v);
    return w || null;
  }
  function r(f = t) {
    var D;
    const { componentInstance: v, designerItemElementRef: w } = f;
    if (!v || !v.value)
      return null;
    const { getCustomButtons: m } = v.value;
    return v.value.canMove || m && ((D = m()) != null && D.length) ? w : r(f.parent);
  }
  function y(f) {
    return !!a;
  }
  function h() {
    return (t == null ? void 0 : t.schema.label) || (t == null ? void 0 : t.schema.title) || (t == null ? void 0 : t.schema.name);
  }
  function b() {
  }
  function H(f, v) {
    var w;
    !f || !v || (w = t == null ? void 0 : t.setupContext) == null || w.emit("dragEnd");
  }
  function L(f, v) {
    const { componentType: w } = f;
    let m = Q(w, f, v);
    const D = w.toLowerCase().replace(/-/g, "_");
    return m && !m.id && m.type === w && (m.id = `${D}_${Math.random().toString().slice(2, 6)}`), m;
  }
  function p(f) {
  }
  function o(...f) {
  }
  function E(f) {
    if (!f)
      return;
    const v = t == null ? void 0 : t.schema, { formSchemaUtils: w } = f;
    if (v && w.getExpressions().length) {
      const m = w.getExpressions().findIndex((D) => D.target === v.id);
      m > -1 && w.getExpressions().splice(m, 1);
    }
  }
  function k(f) {
    E(f), t != null && t.schema.contents && t.schema.contents.map((v) => {
      let w = v.id;
      v.type === "component-ref" && (w = v.component);
      const m = e.value.querySelectorAll(`#${w}-design-item`);
      m != null && m.length && Array.from(m).map((D) => {
        var T;
        (T = D == null ? void 0 : D.componentInstance) != null && T.value.onRemoveComponent && D.componentInstance.value.onRemoveComponent(f);
      });
    });
  }
  function S() {
  }
  function N(f) {
  }
  return l.value = {
    canMove: c(),
    canSelectParent: u(),
    canDelete: $(),
    canNested: !s(),
    contents: t == null ? void 0 : t.schema.contents,
    elementRef: e,
    parent: (R = t == null ? void 0 : t.parent) == null ? void 0 : R.componentInstance,
    schema: t == null ? void 0 : t.schema,
    styles: n,
    designerClass: i,
    canAccepts: y,
    getBelongedComponentInstance: d,
    getDraggableDesignItemElement: r,
    getDraggingDisplayText: h,
    getPropConfig: o,
    getDragScopeElement: b,
    onAcceptMovedChildElement: H,
    onChildElementMovedOut: p,
    addNewChildComponentSchema: L,
    triggerBelongedComponentToMoveWhenMoved: B(!1),
    triggerBelongedComponentToDeleteWhenDeleted: B(!1),
    onRemoveComponent: k,
    getCustomButtons: S,
    onPropertyChanged: N
  }, l;
}
const $e = /* @__PURE__ */ M({
  name: "FDropdownDesign",
  props: q,
  emits: ["select"],
  setup(e, t) {
    const a = B(e.model), {
      show: n,
      showDropMenu: i,
      hoverDropdown: l,
      leftButtonClick: c,
      closeDropMenu: u,
      selectItem: $,
      resolveSize: s
    } = x(e, t);
    function d(b) {
      t.emit("select", b);
    }
    const r = B(), y = I("design-item-context"), h = ke(r, y);
    return Y(() => {
      r.value.componentInstance = h;
    }), t.expose(h.value), () => g("div", {
      ref: r
    }, [g("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 && g("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: c
    }, [e.title]), g("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: i,
      onMouseenter: l,
      onMouseleave: l
    }, [A(g("span", {
      class: "sr-only"
    }, null), [[z, e.splitButton]]), e.splitButton ? "" : e.title, A(g("span", {
      class: `f-icon ${e.iconClass.toString()}`
    }, null), [[z, e.iconClass]])]), g("div", {
      class: `dropdown-menu${n.value ? " show" : ""}`
    }, [g(U, null, [a.value.map(({
      label: b,
      value: H,
      disabled: L,
      active: p,
      divide: o
    }) => g(C, {
      value: H.toString(),
      label: b,
      disabled: L,
      active: p,
      divide: o,
      onSelect: (E) => d(E)
    }, null))])])])]);
  }
}), Re = {
  install(e) {
    e.component(F.name, F);
  },
  register(e, t, a, n) {
    e.dropdown = F, t.dropdown = X;
  },
  registerDesigner(e, t, a) {
    e.dropdown = $e, t.dropdown = X;
  }
};
export {
  F as Dropdown,
  Re as default,
  q as dropdownProps,
  X as propsResolver
};