hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
162 lines (159 loc) • 6.87 kB
JavaScript
import { defineComponent, ref, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, mergeProps, withModifiers, renderSlot, createElementBlock, Fragment, renderList, toDisplayString, createCommentVNode, vShow } from 'vue';
import { HlScrollbar, HlGroup, HlThumb, HlIcon, SystemClose, useLocale, PREFIX } from 'hongluan-ui';
import { usePrefix } from '../../../utils/util.mjs';
import { dockContainerProps, dockContainerEmits } from './dock-container.mjs';
import { useDockContainer } from './use-dock-container.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
const _sfc_main = defineComponent({
name: "DockContainer",
components: {
HlScrollbar,
HlGroup,
HlThumb,
HlIcon,
SystemClose
},
directives: {},
inheritAttrs: false,
props: dockContainerProps,
emits: dockContainerEmits,
setup(props) {
const { prefix } = usePrefix();
const scrollbarRef = ref();
const { t } = useLocale();
const dialogRef = ref();
const dialog = useDockContainer(props, scrollbarRef);
return {
prefix,
t,
hlPrefix: PREFIX.toLowerCase(),
dialogRef,
scrollbarRef,
...dialog
};
}
});
const _hoisted_1 = { class: "panel-body" };
const _hoisted_2 = { class: "dock-items" };
const _hoisted_3 = { class: "item-content" };
const _hoisted_4 = {
key: 0,
class: "dock-placeholder media"
};
const _hoisted_5 = ["title"];
const _hoisted_6 = ["src"];
const _hoisted_7 = ["src"];
const _hoisted_8 = { class: "item-title" };
const _hoisted_9 = ["onClick"];
const _hoisted_10 = {
key: 1,
class: "empty-text"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hl_thumb = resolveComponent("hl-thumb");
const _component_system_close = resolveComponent("system-close");
const _component_hl_icon = resolveComponent("hl-icon");
const _component_hl_group = resolveComponent("hl-group");
const _component_hl_scrollbar = resolveComponent("hl-scrollbar");
return openBlock(), createBlock(Teleport, { to: "body" }, [
createVNode(Transition, {
name: _ctx.animName,
onAfterEnter: _ctx.afterEnter,
onAfterLeave: _ctx.afterLeave,
onBeforeLeave: _ctx.beforeLeave
}, {
default: withCtx(() => [
withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, {
class: [
_ctx.prefix + "-dock-container",
_ctx.hlPrefix + "-panel",
"at-" + _ctx.placement,
_ctx.customClass
],
style: [
{
width: _ctx.width,
height: _ctx.height,
zIndex: _ctx.zIndex,
"--dock-item-width": _ctx.itemWidth,
"--dock-item-height": _ctx.itemHeight
}
],
"aria-modal": "true",
role: "drawer",
"aria-label": "drawer",
onClick: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["stop"]))
}), [
createElementVNode("div", _hoisted_1, [
renderSlot(_ctx.$slots, "default", { data: "dockItems" }, () => [
_ctx.dockItems.length ? (openBlock(), createBlock(_component_hl_scrollbar, {
key: 0,
ref: "scrollbarRef",
class: "scrollbar"
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dockItems, (item) => {
return openBlock(), createBlock(_component_hl_group, {
key: item.id,
class: "dock-item",
dir: "vertical",
onClick: withModifiers(($event) => _ctx.restoreDockItem(item.id), ["stop"])
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_3, [
!item.snapshot ? (openBlock(), createElementBlock("div", _hoisted_4)) : typeof item.snapshot === "string" ? (openBlock(), createElementBlock("p", {
key: 1,
class: "media text",
title: item.snapshot
}, toDisplayString(item.snapshot), 9, _hoisted_5)) : item.snapshot.type === "image" ? (openBlock(), createBlock(_component_hl_thumb, {
key: 2,
src: item.snapshot.url,
class: "media full",
fit: "cover"
}, null, 8, ["src"])) : item.snapshot.type === "video" ? (openBlock(), createElementBlock("video", {
key: 3,
src: item.snapshot.url,
class: "media"
}, null, 8, _hoisted_6)) : item.snapshot.type === "audio" ? (openBlock(), createElementBlock("audio", {
key: 4,
src: item.snapshot.url,
class: "media",
controls: "controls"
}, null, 8, _hoisted_7)) : createCommentVNode("v-if", true)
]),
createElementVNode("div", _hoisted_8, toDisplayString(item.title), 1),
createElementVNode("div", {
class: "item-close",
onClick: withModifiers(($event) => _ctx.closeDockItem(item.id), ["stop"])
}, [
createVNode(_component_hl_icon, null, {
default: withCtx(() => [
createVNode(_component_system_close)
]),
_: 1
})
], 8, _hoisted_9)
]),
_: 2
}, 1032, ["onClick"]);
}), 128))
])
]),
_: 1
}, 512)) : createCommentVNode("v-if", true),
_ctx.dockItems.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_10, toDisplayString(_ctx.t("hl.table.emptyText")), 1)) : createCommentVNode("v-if", true)
])
])
], 16), [
[vShow, _ctx.visible]
])
]),
_: 3
}, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
]);
}
var DockContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { DockContainer as default };
//# sourceMappingURL=dock-container2.mjs.map