yuang-framework-ui-pc/lib/ele-drawer/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../icons");
const ReceiverView = require("../ele-config-provider/components/receiver-view");
const util = require("../ele-pro-layout/util");
const util$1 = require("../ele-dialog/util");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleDrawer",
  components: { ElDrawer: elementPlus.ElDrawer, ElIcon: elementPlus.ElIcon, CloseOutlined: icons.CloseOutlined, ReceiverView },
  props: props.drawerProps,
  emits: elementPlus.drawerEmits,
  setup(props2, { emit }) {
    const layoutState = util.useLayoutState();
    const drawerRef = vue.ref(null);
    const isActivated = vue.ref(true);
    const drawerClass = vue.computed(() => {
      const classes = ["ele-drawer"];
      if (!props2.modelValue) {
        classes.push("ele-drawer-closed");
      }
      if (!isActivated.value && props2.modelValue) {
        classes.push("ele-drawer-hide");
      }
      if (props2.inner) {
        classes.push("ele-drawer-inner");
      }
      if (props2.modalClass) {
        classes.push(props2.modalClass);
      }
      return classes.join(" ");
    });
    const teleportTo = vue.computed(() => {
      return util$1.getDialogContainer(
        props2.inner,
        false,
        props2.appendTo,
        layoutState.modalsEl
      );
    });
    const teleportDisabled = vue.computed(() => {
      const appendTo = props2.appendTo || "body";
      const disabled = appendTo === "body" ? !props2.appendToBody : false;
      return props2.inner ? false : disabled;
    });
    const handleClose = () => {
      if (drawerRef.value && drawerRef.value.handleClose) {
        drawerRef.value.handleClose();
      }
    };
    const updateModelValue = (value) => {
      emit("update:modelValue", value);
    };
    const handleDrawerOpen = () => {
      emit("open");
    };
    const handleDrawerOpened = () => {
      emit("opened");
    };
    const handleDrawerClose = () => {
      emit("close");
    };
    const handleDrawerClosed = () => {
      emit("closed");
    };
    const handleDrawerOpenAutoFocus = () => {
      emit("openAutoFocus");
    };
    const handleDrawerCloseAutoFocus = () => {
      emit("closeAutoFocus");
    };
    vue.onActivated(() => {
      isActivated.value = true;
    });
    vue.onDeactivated(() => {
      isActivated.value = false;
    });
    return {
      drawerRef,
      drawerClass,
      teleportTo,
      teleportDisabled,
      handleClose,
      updateModelValue,
      handleDrawerOpen,
      handleDrawerOpened,
      handleDrawerClose,
      handleDrawerClosed,
      handleDrawerOpenAutoFocus,
      handleDrawerCloseAutoFocus
    };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_CloseOutlined = vue.resolveComponent("CloseOutlined");
  const _component_ElIcon = vue.resolveComponent("ElIcon");
  const _component_ReceiverView = vue.resolveComponent("ReceiverView");
  const _component_ElDrawer = vue.resolveComponent("ElDrawer");
  return vue.openBlock(), vue.createBlock(vue.Teleport, {
    to: _ctx.teleportTo,
    disabled: _ctx.teleportDisabled
  }, [
    vue.createVNode(_component_ElDrawer, vue.mergeProps(_ctx.$attrs, {
      ref: "drawerRef",
      modelValue: _ctx.modelValue,
      appendToBody: false,
      lockScroll: _ctx.inner ? false : _ctx.lockScroll,
      beforeClose: _ctx.beforeClose,
      closeOnClickModal: _ctx.closeOnClickModal,
      closeOnPressEscape: _ctx.closeOnPressEscape,
      openDelay: _ctx.openDelay,
      closeDelay: _ctx.closeDelay,
      destroyOnClose: _ctx.destroyOnClose,
      modal: _ctx.modal,
      direction: _ctx.direction,
      showClose: false,
      size: _ctx.size,
      title: _ctx.title,
      withHeader: _ctx.withHeader,
      modalClass: _ctx.drawerClass,
      zIndex: _ctx.zIndex,
      headerAriaLevel: _ctx.headerAriaLevel,
      onOpen: _ctx.handleDrawerOpen,
      onOpened: _ctx.handleDrawerOpened,
      onClose: _ctx.handleDrawerClose,
      onClosed: _ctx.handleDrawerClosed,
      onOpenAutoFocus: _ctx.handleDrawerOpenAutoFocus,
      onCloseAutoFocus: _ctx.handleDrawerCloseAutoFocus,
      "onUpdate:modelValue": _ctx.updateModelValue
    }), vue.createSlots({
      header: vue.withCtx(({ close }) => [
        vue.createElementVNode("div", {
          class: "ele-drawer-header",
          style: vue.normalizeStyle(_ctx.headerStyle)
        }, [
          vue.createElementVNode("div", {
            role: "heading",
            class: "ele-drawer-title",
            style: vue.normalizeStyle(_ctx.titleStyle)
          }, [
            vue.renderSlot(_ctx.$slots, "header", {}, () => [
              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
            ])
          ], 4),
          _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: "ele-drawer-close",
            style: vue.normalizeStyle(_ctx.closeBtnStyle),
            onClick: close
          }, [
            vue.renderSlot(_ctx.$slots, "closeBtn", {}, () => [
              vue.createVNode(_component_ElIcon, null, {
                default: vue.withCtx(() => [
                  vue.createVNode(_component_CloseOutlined)
                ]),
                _: 1
              })
            ])
          ], 12, _hoisted_1)) : vue.createCommentVNode("", true)
        ], 4)
      ]),
      default: vue.withCtx(() => [
        vue.createVNode(_component_ReceiverView, {
          wrapPosition: false,
          class: "ele-drawer-body",
          style: vue.normalizeStyle(_ctx.bodyStyle)
        }, {
          default: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
        }, 8, ["style"])
      ]),
      _: 2
    }, [
      _ctx.$slots.footer ? {
        name: "footer",
        fn: vue.withCtx(() => [
          vue.createElementVNode("div", {
            class: "ele-drawer-footer",
            style: vue.normalizeStyle(_ctx.footerStyle)
          }, [
            vue.renderSlot(_ctx.$slots, "footer")
          ], 4)
        ]),
        key: "0"
      } : void 0
    ]), 1040, ["modelValue", "lockScroll", "beforeClose", "closeOnClickModal", "closeOnPressEscape", "openDelay", "closeDelay", "destroyOnClose", "modal", "direction", "size", "title", "withHeader", "modalClass", "zIndex", "headerAriaLevel", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus", "onUpdate:modelValue"])
  ], 8, ["to", "disabled"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;