@farris/ui-vue/designer/drawer/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { resolveAppearance as W, createPropsResolver as z } from "../../components/dynamic-resolver/index.esm.js";
import { withInstall as G } from "../../components/common/index.esm.js";
import { defineComponent as A, ref as m, computed as i, watch as $, createVNode as t, Teleport as j, Transition as b, withModifiers as k, withDirectives as J, vShow as Q, Fragment as X, inject as V, onMounted as Y } from "vue";
import { useI18n as Z } from "vue-i18n";
import { UseTemplateDragAndDropRules as _, useDesignerComponent as O, FDesignerInnerItem as ee } from "../../components/designer-canvas/index.esm.js";
import te, { responseToolbarResolver as N } from "../../components/response-toolbar/index.esm.js";
import { BaseControlProperty as re } from "../../components/property-panel/index.esm.js";
const x = {
  /** 背景色 */
  backgroundColor: { type: String, default: "#fff" },
  /**
   * 关闭对话框前事件， 是个函数，返回true或者false
   */
  beforeClose: { type: Function, default: () => !0 },
  /**
   * 自定义抽屉样式
   */
  class: { type: String, default: "" },
  /**
   * 自定义抽屉蒙层样式
   */
  modalClass: { type: String, default: "" },
  /** 高度 */
  height: { type: String, default: 300 },
  /** 打开关闭抽屉 */
  modelValue: { type: Boolean, default: !1 },
  /** 从哪个位置呼出 */
  position: { type: String, default: "right" },
  /** 抽屉插入位置 */
  appendTo: { type: String, default: "body" },
  /** 是否展示打开抽屉入口 */
  showEntry: { type: Boolean, default: !1 },
  /** 是否展示关闭按钮 */
  showClose: { type: Boolean, default: !0 },
  /** 是否展示遮罩层 */
  // mask: { type: Boolean, default: true },
  /** 点击遮罩是否关闭抽屉 */
  allowClickMaskToClose: { type: Boolean, default: !0 },
  /** 标题 */
  title: { type: String, default: "" },
  /** 宽度 */
  width: { type: String, default: 300 },
  /**
   * 渲染的DOM容器
   */
  host: { type: Object, default: "body" },
  showHeader: { type: Boolean, default: !0 },
  showFooter: { type: Boolean, default: !0 },
  buttons: { type: Array, default: [] }
};
function oe() {
  const { t: e } = Z();
  return { drawerLocale: {
    cancel: e("drawer.cancel") || "取消",
    confirm: e("drawer.confirm") || "确定"
  } };
}
const ne = /* @__PURE__ */ A({
  name: "FDrawer",
  props: x,
  emits: ["afterClose", "update:modelValue"],
  setup(e, r) {
    const {
      drawerLocale: s
    } = oe(), c = m(e.modelValue), a = m(e.buttons), y = i(() => ({
      "f-drawer": !0,
      // 在某个DOM内部打开抽屉
      "f-drawer-inline": typeof e.host == "string" ? e.host !== "body" : document.querySelector(e.host) !== document.body
    }));
    i(() => ({}));
    const h = i(() => {
      const o = {};
      return e.maskClass && e.maskClass.split(" ").forEach((n) => {
        o[n] = !0;
      }), {
        "f-drawer-mask": !0,
        ...o
      };
    }), d = i(() => {
      const o = {};
      return e.maskClass && e.class.split(" ").forEach((n) => {
        o[n] = !0;
      }), {
        "f-drawer-wrapper": !0,
        [`f-drawer-wrapper-${e.position}`]: !0,
        ...o
      };
    }), w = i(() => {
      const o = e.width;
      return typeof o == "string" ? o : typeof o == "number" ? `${o}px` : "20%";
    }), p = i(() => {
      const o = e.height;
      return typeof o == "string" ? o : typeof o == "number" ? `${o}px` : "20%";
    }), f = i(() => `f-drawer-${e.position}`), g = (o) => {
      Promise.resolve().then(() => {
        var n;
        return (n = e.beforeClose) == null ? void 0 : n.call(e);
      }).then((n) => {
        n && (c.value = !1, r.emit("update:modelValue", c.value), r.emit("afterClose"));
      });
    }, T = (o) => {
      g();
    };
    $(() => e.modelValue, (o, n) => {
      o !== n && (c.value = o);
    });
    const P = {
      close: () => {
        c.value = !1;
      }
    };
    async function B(o, n) {
      o.handle && await o.handle(n, P) && r.emit("closed", n);
    }
    const S = () => !a.value || !a.value.length ? [{
      id: "drawer-footer-cancel",
      text: s.cancel,
      class: "btn btn-secondary mr-2",
      handle: g
    }, {
      id: "drawer-footer-confirm",
      text: s.confirm,
      class: "btn btn-primary",
      handle: T
    }] : a.value;
    function C() {
      const o = S();
      return t(X, null, [o && o.map((n) => {
        const v = m(n.disabled);
        return t("button", {
          id: n.id,
          type: "button",
          disabled: v.value,
          class: n.class + (n.iconClass ? " btn-icontext" : ""),
          onClick: (I) => {
            B(n, I);
          }
        }, [!!n.iconClass && t("i", {
          class: n.iconClass
        }, null), n.text]);
      })]);
    }
    function F() {
      return r.slots.footerTemplate ? r.slots.footerTemplate() : C();
    }
    return () => t(j, {
      to: e.host
    }, {
      default: () => [t("div", {
        class: y.value,
        id: e.id
      }, [t(b, {
        name: "f-drawer-mask",
        appear: !0
      }, {
        default: () => [c.value && t("div", {
          class: h.value,
          onClick: k((o) => {
            e.allowClickMaskToClose && g();
          }, ["stop"])
        }, null)]
      }), t(b, {
        name: f.value
      }, {
        default: () => {
          var o, n;
          return [J(t("div", {
            class: d.value,
            style: {
              width: w.value,
              height: p.value,
              backgroundColor: e.backgroundColor
            }
          }, [t("div", {
            class: "f-drawer-container"
          }, [e.showHeader && t("div", {
            class: "f-drawer-header"
          }, [t("div", {
            class: "f-drawer-title"
          }, [r.slots.headerTemplate ? r.slots.headerTemplate() : e.title]), e.showClose && t("div", {
            class: "f-drawer-close"
          }, [t("span", {
            class: "f-icon f-icon-close",
            onClick: k((v) => {
              g();
            }, ["stop"])
          }, null)])]), t("div", {
            class: "f-drawer-body"
          }, [(n = (o = r.slots).content) == null ? void 0 : n.call(o)]), e.showFooter && t("div", {
            class: "f-drawer-footer px-2"
          }, [F()])])]), [[Q, c.value]])];
        }
      })])]
    });
  }
});
class se extends re {
  constructor(r, s) {
    super(r, s);
  }
  getPropertyConfig(r) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(r), this.propertyConfig.categories.appearance = this.getAppearanceConfig(r), this.getBehaviorConfig(), this.propertyConfig;
  }
  getBehaviorConfig() {
    this.propertyConfig.categories.behavior = {
      title: "行为",
      description: "Behavior",
      properties: {
        title: {
          title: "标题",
          description: "标题",
          type: "string"
        },
        position: {
          title: "显示位置",
          description: "抽屉显示位置",
          type: "select",
          default: "right",
          editor: {
            type: "combo-list",
            textField: "name",
            valueField: "value",
            editable: !1,
            data: [
              { value: "left", name: "左侧" },
              { value: "right", name: "右侧" }
            ]
          }
        },
        width: {
          title: "宽度",
          description: "抽屉宽度",
          type: "number"
        },
        showMask: {
          title: "显示遮罩",
          description: "是否显示遮罩",
          type: "boolean",
          default: !0,
          visible: !1
        },
        showFooter: {
          title: "显示底部",
          description: "是否显示底部",
          type: "boolean",
          default: !0
        }
      },
      setPropertyRelates(r, s) {
        if (r)
          switch (r && r.propertyID) {
            case "title": {
              r.needRefreshControlTree = !0;
              break;
            }
          }
      }
    };
  }
}
function ae(e, r) {
  new _();
  function s() {
    return !1;
  }
  function c() {
    return !1;
  }
  function a() {
    return !1;
  }
  function y() {
    return !0;
  }
  function h() {
    return "position: absolute !important;border: none !important;left: 0;right: 0;padding: 0;";
  }
  function d(w) {
    const p = new se(w, r), { schema: f } = e;
    return p.getPropertyConfig(f);
  }
  return { canAccepts: s, checkCanDeleteComponent: c, checkCanMoveComponent: a, hideNestedPaddingInDesginerView: y, getStyles: h, getPropsConfig: d };
}
const H = Object.assign({}, x, {
  componentId: { type: String, default: "" }
}), D = /* @__PURE__ */ A({
  name: "FDrawerDesign",
  props: H,
  setup(e, r) {
    const s = m(), c = V("designer-host-service"), a = V("design-item-context"), y = ae(a, c), h = O(s, a, y), d = m(a.schema.toolbar || {
      type: "response-toolbar",
      buttons: []
    }), w = m(N(d.value));
    $(() => a.schema.toolbar, () => {
      d.value = a.schema.toolbar || {
        type: "response-toolbar",
        buttons: []
      }, w.value = N(d.value);
    }, {
      deep: !0
    });
    const p = i(() => [...w.value.items]);
    Y(() => {
      s.value.componentInstance = h;
    }), r.expose(h.value);
    const f = m(e.modelValue);
    $(() => e.modelValue, () => {
      f.value = e.modelValue;
    });
    const g = i(() => ["f-drawer-wrapper", `f-drawer-wrapper-${e.position}`, e.wrapperClass]), T = i(() => {
      const l = e.width, u = e.height, R = typeof l == "string" ? l : typeof l == "number" ? `${l}px` : "20%", M = typeof u == "string" ? u : typeof u == "number" ? `${u}px` : "20%";
      return {
        width: R,
        height: M,
        backgroundColor: e.backgroundColor
      };
    }), P = i(() => ["f-drawer-entry", `f-drawer-entry-${e.position}`, e.entryClass]), B = i(() => `f-icon-arrow-chevron-${{
      left: "right",
      right: "left",
      top: "down",
      bottom: "up"
    }[e.position] ?? "right"}`), S = i(() => `f-drawer-${e.position}`), C = () => {
      f.value = !1;
    }, F = () => {
      f.value = !0;
    }, o = () => t("div", {
      class: P.value,
      onClick: F
    }, [r.slots.button ? r.slots.button() : t("div", {
      class: "f-drawer-entry-icon"
    }, [t("span", {
      class: `f-icon ${B.value}`
    }, null)])]), n = () => t(b, {
      name: "f-drawer-mask",
      appear: !0
    }, {
      default: () => [f.value && e.showMask && t("div", {
        class: "f-drawer-mask",
        onClick: e.closeByMask && k(C, ["stop"])
      }, null)]
    });
    function v(l, u, R, M) {
      a && a.setupContext && a.setupContext.emit("selectionChange", l, u, R, M);
    }
    const I = () => {
      if (p.value && p.value.length > 0)
        return t(ee, {
          modelValue: d.value,
          "onUpdate:modelValue": (l) => d.value = l,
          canAdd: !0,
          childType: "response-toolbar-item",
          childLabel: "按钮",
          contentKey: "buttons",
          id: d.value.id,
          componentId: e.componentId,
          onSelectionChange: v
        }, {
          default: () => [t(te, {
            customClass: "w-100",
            items: p.value,
            componentId: e.componentId
          }, null)]
        });
    }, L = () => t("div", {
      class: "f-drawer-close"
    }, [t("span", {
      class: "f-icon f-icon-close",
      onClick: k(C, ["stop"])
    }, null)]), q = () => t("div", {
      class: "f-drawer-header"
    }, [t("div", {
      class: "f-drawer-header-left"
    }, [t("div", {
      class: "f-drawer-title"
    }, [r.slots.title ? r.slots.title() : e.title])]), t("div", {
      class: "f-drawer-header-right"
    }, [I(), e.showClose && L()])]), U = () => t(b, {
      name: S.value,
      appear: !0
    }, {
      default: () => {
        var l, u;
        return [f.value && t("div", {
          class: g.value,
          style: T.value
        }, [t("div", {
          class: "f-drawer-container"
        }, [q(), t("div", {
          class: "f-drawer-body"
        }, [(u = (l = r.slots).default) == null ? void 0 : u.call(l)])])])];
      }
    }), K = () => t(j, {
      to: ".editorPanel "
    }, {
      default: () => [t("div", {
        class: "f-drawer"
      }, [n(), U()])]
    });
    return () => t("div", {
      ref: s
    }, [K(), o()]);
  }
});
function ie(e, r, s) {
  return r;
}
const le = /* @__PURE__ */ new Map([
  ["appearance", W]
]), ce = "https://json-schema.org/draft/2020-12/schema", de = "https://farris-design.gitee.io/drawer.schema.json", ue = "drawer", fe = "A Farris Component", pe = "object", me = {
  id: {
    description: "The unique identifier for drawer",
    type: "string"
  },
  type: {
    description: "The type string of drawer",
    type: "string",
    default: "drawer"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  title: {
    description: "",
    type: "string",
    default: "标题"
  },
  position: {
    description: "",
    type: "string",
    default: "right"
  },
  width: {
    description: "",
    type: "number"
  },
  showMask: {
    description: "",
    type: "boolean",
    default: !0
  },
  showHeader: {
    description: "",
    type: "boolean",
    default: !0
  },
  showFooter: {
    description: "",
    type: "boolean",
    default: !0
  },
  toolbar: {
    description: "",
    type: "object",
    properties: {
      appearance: {
        description: "",
        type: "object",
        properties: {
          class: {
            type: "string",
            default: "col-3"
          }
        }
      },
      id: {
        description: "",
        type: "string"
      },
      type: {
        description: "",
        type: "string",
        default: "response-toolbar"
      },
      alignment: {
        description: "The alignment of Response Toolbar Button.",
        type: "string",
        default: "right"
      },
      buttons: {
        description: "The items of Response Toolbar.",
        type: "array",
        default: []
      }
    }
  }
}, he = [
  "id",
  "type",
  "contents"
], we = {
  $schema: ce,
  $id: de,
  title: ue,
  description: fe,
  type: pe,
  properties: me,
  required: he
}, E = z(H, we, le, ie);
D.register = (e, r, s) => {
  e.drawer = ne, r.drawer = E;
};
D.registerDesigner = (e, r, s) => {
  e.drawer = D, r.drawer = E;
};
const Te = G(D);
export {
  Te as default,
  x as drawerProps,
  E as propsResolver
};