@zhsz/cool-design-dv
Version:
158 lines (157 loc) • 4.72 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("./style.css");
const index = require("../../symbols/index.js");
const __default__ = vue.defineComponent({
name: "DvBox",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ vue.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 = vue.useAttrs();
const props = __props;
const instance = vue.getCurrentInstance();
const layoutVm = vue.inject(index.dvLayoutVm, null);
vue.provide(index.dvLayoutVm, props.layout ? instance : null);
const boxes = vue.ref([]);
const layoutSize = vue.computed(() => {
if (layoutVm && !props.free) {
const { gap, direction } = layoutVm.props;
const { total: total2, boxCount: boxCount2, boxes: boxes2 } = layoutVm.exposed;
const index2 = 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 < index2).reduce((t, n) => t + n.props.weight, 0);
const diffLen = `(100% - ${gap * gapCount}px) * ${diffWeight} / ${total2.value} + ${index2 * gap}px`;
if (direction === "row") {
return {
height: `calc(${size})`,
top: `calc(${diffLen})`
};
} else {
return {
width: `calc(${size})`,
left: `calc(${diffLen})`
};
}
}
return null;
});
const styles = vue.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 = vue.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 = vue.computed(() => {
return boxes.value.reduce((t, n) => t + n.props.weight, 0);
});
const boxCount = vue.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);
}
vue.onBeforeUnmount(() => {
if (layoutVm && !props.free) {
unregisterBox(instance);
}
});
return (_ctx, _cache) => {
return _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
key: 0,
class: ["my-dv-box", classes.value],
style: styles.value
}, vue.unref($attrs)), [
vue.renderSlot(_ctx.$slots, "default")
], 16)) : vue.createCommentVNode("", true);
};
}
});
exports.default = _sfc_main;