tav-ui
Version:
191 lines (188 loc) • 6.77 kB
JavaScript
import { defineComponent, ref, getCurrentInstance, computed, unref, watch, nextTick, resolveComponent, resolveDirective, openBlock, createBlock, mergeProps, createSlots, withCtx, withDirectives, createVNode, normalizeStyle, renderSlot, renderList, normalizeProps, guardReactiveProps } from 'vue';
import { Drawer as Drawer$1 } from 'ant-design-vue';
import { TaContainerScroll } from '../../container-scroll/index2.mjs';
import '../../../locales/index2.mjs';
import { useAttrs } from '../../../hooks/core/useAttrs2.mjs';
import { deepMerge } from '../../../utils/basic2.mjs';
import { isNumber, isFunction } from '../../../utils/is2.mjs';
import DrawerFooter from './components/DrawerFooter2.mjs';
import DrawerHeader from './components/DrawerHeader2.mjs';
import DrawerClose from './components/DrawerClose2.mjs';
import { drawerProps } from './types2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
import { tavI18n } from '../../../locales/transfer2.mjs';
const _sfc_main = defineComponent({
name: "TaDrawer",
components: { Drawer: Drawer$1, ScrollContainer: TaContainerScroll, DrawerFooter, DrawerHeader, DrawerClose },
inheritAttrs: false,
props: drawerProps,
emits: ["visible-change", "ok", "close", "register"],
setup(props, { emit }) {
const visibleRef = ref(false);
const attrs = useAttrs();
const propsRef = ref(null);
const prefixCls = "ta-basic-drawer";
const drawerInstance = {
setDrawerProps,
emitVisible: void 0
};
const instance = getCurrentInstance();
instance && emit("register", drawerInstance, instance.uid);
const getMergeProps = computed(() => {
return {
...props,
...unref(propsRef)
};
});
const getProps = computed(() => {
const opt = {
placement: "right",
...unref(attrs),
...unref(getMergeProps),
visible: 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 = computed(() => {
return {
...attrs,
...unref(getProps)
};
});
const getFooterHeight = computed(() => {
const { footerHeight, showFooter } = unref(getProps);
if (showFooter && footerHeight) {
return isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace("px", "")}px`;
}
return `0px`;
});
const getScrollContentStyle = computed(() => {
const footerHeight = unref(getFooterHeight);
return {
position: "relative",
height: `calc(100% - ${footerHeight})`
};
});
watch(() => props.visible, (newVal, oldVal) => {
if (newVal !== oldVal)
visibleRef.value = newVal;
}, { deep: true });
watch(() => visibleRef.value, (visible) => {
nextTick(() => {
emit("visible-change", visible);
instance && drawerInstance.emitVisible?.(visible, instance.uid);
});
});
async function onClose(e) {
const { closeFunc } = unref(getProps);
emit("close", e);
if (closeFunc && isFunction(closeFunc)) {
const res = await closeFunc();
visibleRef.value = !res;
return;
}
visibleRef.value = false;
}
function setDrawerProps(props2) {
propsRef.value = deepMerge(unref(propsRef) || {}, props2);
if (Reflect.has(props2, "visible")) {
visibleRef.value = !!props2.visible;
}
}
function handleOk() {
emit("ok");
}
return {
tavI18n,
onClose,
prefixCls,
getMergeProps,
getScrollContentStyle,
getProps,
getBindValues,
getFooterHeight,
handleOk
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_DrawerClose = resolveComponent("DrawerClose");
const _component_DrawerHeader = resolveComponent("DrawerHeader");
const _component_ScrollContainer = resolveComponent("ScrollContainer");
const _component_DrawerFooter = resolveComponent("DrawerFooter");
const _component_Drawer = resolveComponent("Drawer", true);
const _directive_loading = resolveDirective("loading");
return openBlock(), createBlock(_component_Drawer, mergeProps({ class: _ctx.prefixCls }, _ctx.getBindValues, { onClose: _ctx.onClose }), createSlots({
default: withCtx(() => [
withDirectives(createVNode(_component_ScrollContainer, {
style: normalizeStyle(_ctx.getScrollContentStyle),
"loading-tip": _ctx.getProps.loadingText || _ctx.tavI18n("Tav.common.loadingText")
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["style", "loading-tip"]), [
[_directive_loading, _ctx.getProps.loading]
]),
createVNode(_component_DrawerFooter, mergeProps(_ctx.getProps, {
height: _ctx.getFooterHeight,
onClose: _ctx.onClose,
onOk: _ctx.handleOk
}), createSlots({ _: 2 }, [
renderList(Object.keys(_ctx.$slots), (item) => {
return {
name: item,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
])
};
})
]), 1040, ["height", "onClose", "onOk"])
]),
_: 2
}, [
!_ctx.$slots.closeIcon ? {
name: "closeIcon",
fn: withCtx(() => [
createVNode(_component_DrawerClose, { onCancel: _ctx.onClose }, null, 8, ["onCancel"])
])
} : void 0,
!_ctx.$slots.title ? {
name: "title",
fn: withCtx(() => [
createVNode(_component_DrawerHeader, {
title: _ctx.getMergeProps.title,
"is-detail": _ctx.isDetail,
"show-detail-back": _ctx.showDetailBack,
onClose: _ctx.onClose
}, {
titleToolbar: withCtx(() => [
renderSlot(_ctx.$slots, "titleToolbar")
]),
_: 3
}, 8, ["title", "is-detail", "show-detail-back", "onClose"])
])
} : {
name: "title",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "title")
])
}
]), 1040, ["class", "onClose"]);
}
var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/drawer/src/drawer.vue"]]);
export { Drawer as default };
//# sourceMappingURL=drawer2.mjs.map