tav-ui/lib/packages/components/drawer/src/drawer2.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var antDesignVue = require('ant-design-vue');
var index = require('../../container-scroll/index2.js');
require('../../../locales/index2.js');
var useAttrs = require('../../../hooks/core/useAttrs2.js');
var basic = require('../../../utils/basic2.js');
var is = require('../../../utils/is2.js');
var DrawerFooter = require('./components/DrawerFooter2.js');
var DrawerHeader = require('./components/DrawerHeader2.js');
var DrawerClose = require('./components/DrawerClose2.js');
var types = require('./types2.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
var transfer = require('../../../locales/transfer2.js');

const _sfc_main = vue.defineComponent({
  name: "TaDrawer",
  components: { Drawer: antDesignVue.Drawer, ScrollContainer: index.TaContainerScroll, DrawerFooter: DrawerFooter["default"], DrawerHeader: DrawerHeader["default"], DrawerClose: DrawerClose["default"] },
  inheritAttrs: false,
  props: types.drawerProps,
  emits: ["visible-change", "ok", "close", "register"],
  setup(props, { emit }) {
    const visibleRef = vue.ref(false);
    const attrs = useAttrs.useAttrs();
    const propsRef = vue.ref(null);
    const prefixCls = "ta-basic-drawer";
    const drawerInstance = {
      setDrawerProps,
      emitVisible: void 0
    };
    const instance = vue.getCurrentInstance();
    instance && emit("register", drawerInstance, instance.uid);
    const getMergeProps = vue.computed(() => {
      return {
        ...props,
        ...vue.unref(propsRef)
      };
    });
    const getProps = vue.computed(() => {
      const opt = {
        placement: "right",
        ...vue.unref(attrs),
        ...vue.unref(getMergeProps),
        visible: vue.unref(visibleRef)
      };
      opt.title = void 0;
      const { isDetail, width, wrapClassName, getContainer } = opt;
      if (isDetail) {
        if (!width) {
          opt.width = "100%";
        }
        const detailCls = `${prefixCls}__detail`;
        opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
        if (!getContainer) {
          opt.getContainer = ".ta-layout-content";
        }
      }
      return opt;
    });
    const getBindValues = vue.computed(() => {
      return {
        ...attrs,
        ...vue.unref(getProps)
      };
    });
    const getFooterHeight = vue.computed(() => {
      const { footerHeight, showFooter } = vue.unref(getProps);
      if (showFooter && footerHeight) {
        return is.isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace("px", "")}px`;
      }
      return `0px`;
    });
    const getScrollContentStyle = vue.computed(() => {
      const footerHeight = vue.unref(getFooterHeight);
      return {
        position: "relative",
        height: `calc(100% - ${footerHeight})`
      };
    });
    vue.watch(() => props.visible, (newVal, oldVal) => {
      if (newVal !== oldVal)
        visibleRef.value = newVal;
    }, { deep: true });
    vue.watch(() => visibleRef.value, (visible) => {
      vue.nextTick(() => {
        emit("visible-change", visible);
        instance && drawerInstance.emitVisible?.(visible, instance.uid);
      });
    });
    async function onClose(e) {
      const { closeFunc } = vue.unref(getProps);
      emit("close", e);
      if (closeFunc && is.isFunction(closeFunc)) {
        const res = await closeFunc();
        visibleRef.value = !res;
        return;
      }
      visibleRef.value = false;
    }
    function setDrawerProps(props2) {
      propsRef.value = basic.deepMerge(vue.unref(propsRef) || {}, props2);
      if (Reflect.has(props2, "visible")) {
        visibleRef.value = !!props2.visible;
      }
    }
    function handleOk() {
      emit("ok");
    }
    return {
      tavI18n: transfer.tavI18n,
      onClose,
      prefixCls,
      getMergeProps,
      getScrollContentStyle,
      getProps,
      getBindValues,
      getFooterHeight,
      handleOk
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_DrawerClose = vue.resolveComponent("DrawerClose");
  const _component_DrawerHeader = vue.resolveComponent("DrawerHeader");
  const _component_ScrollContainer = vue.resolveComponent("ScrollContainer");
  const _component_DrawerFooter = vue.resolveComponent("DrawerFooter");
  const _component_Drawer = vue.resolveComponent("Drawer", true);
  const _directive_loading = vue.resolveDirective("loading");
  return vue.openBlock(), vue.createBlock(_component_Drawer, vue.mergeProps({ class: _ctx.prefixCls }, _ctx.getBindValues, { onClose: _ctx.onClose }), vue.createSlots({
    default: vue.withCtx(() => [
      vue.withDirectives(vue.createVNode(_component_ScrollContainer, {
        style: vue.normalizeStyle(_ctx.getScrollContentStyle),
        "loading-tip": _ctx.getProps.loadingText || _ctx.tavI18n("Tav.common.loadingText")
      }, {
        default: vue.withCtx(() => [
          vue.renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 8, ["style", "loading-tip"]), [
        [_directive_loading, _ctx.getProps.loading]
      ]),
      vue.createVNode(_component_DrawerFooter, vue.mergeProps(_ctx.getProps, {
        height: _ctx.getFooterHeight,
        onClose: _ctx.onClose,
        onOk: _ctx.handleOk
      }), vue.createSlots({ _: 2 }, [
        vue.renderList(Object.keys(_ctx.$slots), (item) => {
          return {
            name: item,
            fn: vue.withCtx((data) => [
              vue.renderSlot(_ctx.$slots, item, vue.normalizeProps(vue.guardReactiveProps(data || {})))
            ])
          };
        })
      ]), 1040, ["height", "onClose", "onOk"])
    ]),
    _: 2
  }, [
    !_ctx.$slots.closeIcon ? {
      name: "closeIcon",
      fn: vue.withCtx(() => [
        vue.createVNode(_component_DrawerClose, { onCancel: _ctx.onClose }, null, 8, ["onCancel"])
      ])
    } : void 0,
    !_ctx.$slots.title ? {
      name: "title",
      fn: vue.withCtx(() => [
        vue.createVNode(_component_DrawerHeader, {
          title: _ctx.getMergeProps.title,
          "is-detail": _ctx.isDetail,
          "show-detail-back": _ctx.showDetailBack,
          onClose: _ctx.onClose
        }, {
          titleToolbar: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "titleToolbar")
          ]),
          _: 3
        }, 8, ["title", "is-detail", "show-detail-back", "onClose"])
      ])
    } : {
      name: "title",
      fn: vue.withCtx(() => [
        vue.renderSlot(_ctx.$slots, "title")
      ])
    }
  ]), 1040, ["class", "onClose"]);
}
var Drawer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/drawer/src/drawer.vue"]]);

exports["default"] = Drawer;
//# sourceMappingURL=drawer2.js.map