@zhsz/cool-design-dv
Version:
158 lines (157 loc) • 4.69 kB
JavaScript
import { defineComponent, useAttrs, getCurrentInstance, inject, provide, ref, computed, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, renderSlot, createCommentVNode } from "vue";
import "./style.css";
import { dvLayoutVm } from "../../symbols/index.mjs";
const __default__ = defineComponent({
name: "DvBox",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
width: {},
height: {},
defaultWidth: { default: "auto" },
defaultHeight: { default: "auto" },
left: {},
top: {},
right: {},
bottom: {},
zIndex: {},
xAlign: {},
yAlign: {},
contentAlign: { default: "left" },
zoom: {},
scale: {},
fit: { type: Boolean },
visible: { type: Boolean, default: true },
position: { type: Boolean, default: true },
margin: {},
padding: {},
inline: { type: Boolean },
opacity: { default: 1 },
shadow: { type: Boolean },
layout: { type: Boolean },
weight: { default: 1 },
gap: { default: 0 },
direction: { default: "row" },
free: { type: Boolean }
},
setup(__props, { expose: __expose }) {
const $attrs = useAttrs();
const props = __props;
const instance = getCurrentInstance();
const layoutVm = inject(dvLayoutVm, null);
provide(dvLayoutVm, props.layout ? instance : null);
const boxes = ref([]);
const layoutSize = computed(() => {
if (layoutVm && !props.free) {
const { gap, direction } = layoutVm.props;
const { total: total2, boxCount: boxCount2, boxes: boxes2 } = layoutVm.exposed;
const index = boxes2.value.findIndex((n) => n.uid === (instance == null ? void 0 : instance.uid));
const gapCount = boxCount2.value - 1;
const size = `(100% - ${gap * gapCount}px) * ${props.weight} / ${total2.value}`;
const diffWeight = boxes2.value.filter((n, i) => i < index).reduce((t, n) => t + n.props.weight, 0);
const diffLen = `(100% - ${gap * gapCount}px) * ${diffWeight} / ${total2.value} + ${index * gap}px`;
if (direction === "row") {
return {
height: `calc(${size})`,
top: `calc(${diffLen})`
};
} else {
return {
width: `calc(${size})`,
left: `calc(${diffLen})`
};
}
}
return null;
});
const styles = computed(() => {
const {
inline,
margin,
padding,
position,
fit,
width,
height,
left,
top,
right,
bottom,
zIndex,
zoom,
scale,
xAlign,
yAlign,
defaultWidth,
defaultHeight
} = props;
return {
position: position ? "absolute" : "relative",
width: fit ? "100%" : width || defaultWidth,
height: fit ? "100%" : height || defaultHeight,
zoom,
left: xAlign ? null : left,
top: yAlign ? null : top,
right: xAlign ? null : right,
bottom: yAlign ? null : bottom,
transform: scale ? `scale(${scale})` : null,
display: inline ? "inline-block" : "block",
opacity: props.opacity,
margin,
padding,
zIndex,
...layoutSize.value
};
});
const classes = computed(() => {
return {
[`is-${props.xAlign}`]: !!props.xAlign,
[`is-${props.yAlign}`]: !!props.yAlign,
"is-shadow": props.shadow,
"is-center-middle": props.xAlign === "center" && props.yAlign === "middle",
[`is-content-align-${props.contentAlign}`]: !!props.contentAlign
};
});
const total = computed(() => {
return boxes.value.reduce((t, n) => t + n.props.weight, 0);
});
const boxCount = computed(() => {
return boxes.value.length;
});
function registerBox(box) {
boxes.value.push(box);
}
function unregisterBox(box) {
boxes.value = boxes.value.filter((n) => n !== box);
}
__expose({
registerBox,
unregisterBox,
total,
boxCount,
boxes
});
if (layoutVm && !props.free) {
layoutVm.exposed.registerBox(instance);
}
onBeforeUnmount(() => {
if (layoutVm && !props.free) {
unregisterBox(instance);
}
});
return (_ctx, _cache) => {
return _ctx.visible ? (openBlock(), createElementBlock("div", mergeProps({
key: 0,
class: ["my-dv-box", classes.value],
style: styles.value
}, unref($attrs)), [
renderSlot(_ctx.$slots, "default")
], 16)) : createCommentVNode("", true);
};
}
});
export {
_sfc_main as default
};