dm-vue3-ui/es/drawer/index.vue.js

This Components Library will help get you started developing in Vue 3.

import { Button, Drawer } from "ant-design-vue/es";
import { defineComponent, useSlots, computed, openBlock, createBlock, mergeProps, unref, isRef, createSlots, withCtx, createVNode, createElementVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
import { CloseCircleFilled } from "@ant-design/icons-vue";
import { useVModel } from "@vueuse/core";
import { $t } from "../i18n/index";
const _hoisted_1 = { class: "dm-drawer__container" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "dm-drawer"
  },
  __name: "index",
  props: {
    modelValue: { type: Boolean },
    title: {},
    footer: { type: Boolean, default: () => true },
    okText: { default: "" },
    cancelText: { default: "" },
    spinning: { type: Boolean, default: false },
    prefixCls: { default: "dm-ui" },
    okButtonProps: { default: () => ({}) },
    cancelButtonProps: { default: () => ({}) }
  },
  emits: ["update:modelValue", "confirm", "cancel"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const slots = useSlots();
    const drawerVisible = useVModel(props, "modelValue", emit);
    const showFooter = computed(() => slots.footer || props.footer);
    const confirmHandler = () => {
      emit("confirm");
    };
    const cancelHandler = (e) => {
      drawerVisible.value = false;
      emit("cancel", e);
    };
    return (_ctx, _cache) => {
      const _component_a_button = Button;
      const _component_a_drawer = Drawer;
      return openBlock(), createBlock(_component_a_drawer, mergeProps({
        maskClosable: !showFooter.value,
        visible: unref(drawerVisible),
        "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(drawerVisible) ? drawerVisible.value = $event : null),
        class: "dm-drawer",
        destroyOnClose: "",
        closable: !showFooter.value,
        prefixCls: `${props.prefixCls}-drawer`
      }, _ctx.$attrs), createSlots({
        closeIcon: withCtx(() => [
          createVNode(unref(CloseCircleFilled), { style: { fontSize: "24px", color: "#939ABD" } })
        ]),
        default: withCtx(() => [
          createElementVNode("div", _hoisted_1, [
            renderSlot(_ctx.$slots, "default")
          ])
        ]),
        _: 2
      }, [
        _ctx.$slots.title || props.title ? {
          name: "title",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "title", {}, () => [
              createTextVNode(toDisplayString(props.title), 1)
            ])
          ]),
          key: "0"
        } : void 0,
        _ctx.$slots.extra ? {
          name: "extra",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "extra")
          ]),
          key: "1"
        } : void 0,
        showFooter.value ? {
          name: "footer",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "footer", {}, () => [
              createVNode(_component_a_button, mergeProps(props.okButtonProps, {
                loading: props.spinning,
                type: "primary",
                prefixCls: `${props.prefixCls}-btn`,
                onClick: confirmHandler
              }), {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(props.okText || unref($t)("datePicker.confirm")), 1)
                ]),
                _: 1
              }, 16, ["loading", "prefixCls"]),
              createVNode(_component_a_button, mergeProps(props.cancelButtonProps, {
                prefixCls: `${props.prefixCls}-btn`,
                onClick: cancelHandler
              }), {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(props.cancelText || unref($t)("cronPicker.cancel")), 1)
                ]),
                _: 1
              }, 16, ["prefixCls"])
            ])
          ]),
          key: "2"
        } : void 0
      ]), 1040, ["maskClosable", "visible", "closable", "prefixCls"]);
    };
  }
});
const index_vue_vue_type_style_index_0_lang = "";
export {
  _sfc_main as default
};