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

Farris Vue, a Farris Design based Vue3 component library.

import { withInstall as V } from "../common/index.esm.js";
import { defineComponent as D, ref as u, computed as l, watch as P, createVNode as o, Teleport as I, Transition as f, withModifiers as m, withDirectives as L, vShow as N, Fragment as E } from "vue";
import { useI18n as M } from "vue-i18n";
const $ = {
  /** 背景色 */
  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 x() {
  const { t } = M();
  return { drawerLocale: {
    cancel: t("drawer.cancel") || "取消",
    confirm: t("drawer.confirm") || "确定"
  } };
}
const H = /* @__PURE__ */ D({
  name: "FDrawer",
  props: $,
  emits: ["afterClose", "update:modelValue"],
  setup(t, r) {
    const {
      drawerLocale: c
    } = x(), s = u(t.modelValue), i = u(t.buttons), w = l(() => ({
      "f-drawer": !0,
      // 在某个DOM内部打开抽屉
      "f-drawer-inline": typeof t.host == "string" ? t.host !== "body" : document.querySelector(t.host) !== document.body
    }));
    l(() => ({}));
    const h = l(() => {
      const e = {};
      return t.maskClass && t.maskClass.split(" ").forEach((a) => {
        e[a] = !0;
      }), {
        "f-drawer-mask": !0,
        ...e
      };
    }), y = l(() => {
      const e = {};
      return t.maskClass && t.class.split(" ").forEach((a) => {
        e[a] = !0;
      }), {
        "f-drawer-wrapper": !0,
        [`f-drawer-wrapper-${t.position}`]: !0,
        ...e
      };
    }), C = l(() => {
      const e = t.width;
      return typeof e == "string" ? e : typeof e == "number" ? `${e}px` : "20%";
    }), v = l(() => {
      const e = t.height;
      return typeof e == "string" ? e : typeof e == "number" ? `${e}px` : "20%";
    }), g = l(() => `f-drawer-${t.position}`), n = (e) => {
      Promise.resolve().then(() => {
        var a;
        return (a = t.beforeClose) == null ? void 0 : a.call(t);
      }).then((a) => {
        a && (s.value = !1, r.emit("update:modelValue", s.value), r.emit("afterClose"));
      });
    }, b = (e) => {
      n();
    };
    P(() => t.modelValue, (e, a) => {
      e !== a && (s.value = e);
    });
    const k = {
      close: () => {
        s.value = !1;
      }
    };
    async function B(e, a) {
      e.handle && await e.handle(a, k) && r.emit("closed", a);
    }
    const S = () => !i.value || !i.value.length ? [{
      id: "drawer-footer-cancel",
      text: c.cancel,
      class: "btn btn-secondary mr-2",
      handle: n
    }, {
      id: "drawer-footer-confirm",
      text: c.confirm,
      class: "btn btn-primary",
      handle: b
    }] : i.value;
    function p() {
      const e = S();
      return o(E, null, [e && e.map((a) => {
        const d = u(a.disabled);
        return o("button", {
          id: a.id,
          type: "button",
          disabled: d.value,
          class: a.class + (a.iconClass ? " btn-icontext" : ""),
          onClick: (T) => {
            B(a, T);
          }
        }, [!!a.iconClass && o("i", {
          class: a.iconClass
        }, null), a.text]);
      })]);
    }
    function F() {
      return r.slots.footerTemplate ? r.slots.footerTemplate() : p();
    }
    return () => o(I, {
      to: t.host
    }, {
      default: () => [o("div", {
        class: w.value,
        id: t.id
      }, [o(f, {
        name: "f-drawer-mask",
        appear: !0
      }, {
        default: () => [s.value && o("div", {
          class: h.value,
          onClick: m((e) => {
            t.allowClickMaskToClose && n();
          }, ["stop"])
        }, null)]
      }), o(f, {
        name: g.value
      }, {
        default: () => {
          var e, a;
          return [L(o("div", {
            class: y.value,
            style: {
              width: C.value,
              height: v.value,
              backgroundColor: t.backgroundColor
            }
          }, [o("div", {
            class: "f-drawer-container"
          }, [t.showHeader && o("div", {
            class: "f-drawer-header"
          }, [o("div", {
            class: "f-drawer-title"
          }, [r.slots.headerTemplate ? r.slots.headerTemplate() : t.title]), t.showClose && o("div", {
            class: "f-drawer-close"
          }, [o("span", {
            class: "f-icon f-icon-close",
            onClick: m((d) => {
              n();
            }, ["stop"])
          }, null)])]), o("div", {
            class: "f-drawer-body"
          }, [(a = (e = r.slots).content) == null ? void 0 : a.call(e)]), t.showFooter && o("div", {
            class: "f-drawer-footer px-2"
          }, [F()])])]), [[N, s.value]])];
        }
      })])]
    });
  }
}), O = V(H);
export {
  H as FDrawer,
  O as default,
  $ as drawerProps
};