t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
78 lines (77 loc) • 2.38 kB
JavaScript
import { defineComponent as c, ref as b, watch as d, openBlock as s, createBlock as p, unref as f, withCtx as m, createElementVNode as l, renderSlot as n, toDisplayString as v, createCommentVNode as r, createElementBlock as u } from "vue";
import { Props as C, Emits as E } from "./index3.js";
import { FCloseBtn as y } from "../../close-btn/index.js";
import { FPopup as z } from "../../popup/index.js";
const B = { class: "f-drawer" }, _ = { class: "f-drawer__header" }, $ = { class: "f-drawer__header-title" }, I = {
key: 0,
class: "f-drawer__body"
}, O = {
key: 1,
class: "f-drawer__footer"
}, D = c({
name: "FDrawer"
}), S = /* @__PURE__ */ c({
...D,
props: C,
emits: E,
setup(k, { emit: h }) {
const t = k, o = b(t.visible), a = () => {
h("update:visible", !1);
};
return d(
() => o.value,
(e) => {
e || a();
}
), d(
() => t.visible,
(e) => {
o.value = e;
}
), (e, i) => (s(), p(f(z), {
visible: o.value,
"onUpdate:visible": i[0] || (i[0] = (w) => o.value = w),
"append-to-body": e.appendToBody,
"show-mask": e.showMask,
"mask-close": e.maskClose,
"z-index": e.zIndex,
"mask-blur": e.maskBlur,
direction: e.direction,
"popup-size": e.size,
onOpen: e.open,
onOpenEnd: e.openEnd,
onClose: e.close,
onCloseEnd: e.closeEnd
}, {
default: m(() => [
l("div", B, [
l("header", _, [
n(e.$slots, "header", {}, () => [
l("span", $, v(e.title), 1),
e.showCloseIcon ? (s(), p(f(y), {
key: 0,
icon: e.closeIcon,
onClick: a
}, {
default: m(() => [
n(e.$slots, "closeIcon")
]),
_: 3
}, 8, ["icon"])) : r("", !0)
])
]),
e.$slots.default ? (s(), u("section", I, [
n(e.$slots, "default")
])) : r("", !0),
e.$slots.footer ? (s(), u("footer", O, [
n(e.$slots, "footer")
])) : r("", !0)
])
]),
_: 3
}, 8, ["visible", "append-to-body", "show-mask", "mask-close", "z-index", "mask-blur", "direction", "popup-size", "onOpen", "onOpenEnd", "onClose", "onCloseEnd"]));
}
});
export {
S as default
};