107 lines
3.5 KiB
JavaScript
107 lines
3.5 KiB
JavaScript
import { w as withInstall } from "../badge/index2.js";
|
|
import { defineComponent, computed, h, renderSlot, isVNode, Comment, Fragment, createTextVNode } from "vue";
|
|
var index = /* @__PURE__ */ (() => ".layui-space{display:inline-flex}.layui-space-horizontal .layui-space-item{display:flex;align-items:center}.layui-space-vertical{flex-direction:column}.layui-space-wrap{flex-wrap:wrap}.layui-space-fill{display:flex}.layui-space-align-start{align-items:flex-start}.layui-space-align-center{align-items:center}.layui-space-align-end{align-items:flex-end}.layui-space-align-baseline{align-items:baseline}.layui-space-item{width:inherit}\n")();
|
|
const _sfc_main = defineComponent({
|
|
name: "LaySpace",
|
|
props: {
|
|
align: {
|
|
type: String
|
|
},
|
|
direction: {
|
|
type: String,
|
|
default: "horizontal"
|
|
},
|
|
fill: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
size: {
|
|
type: [Number, String, Array],
|
|
default: "sm"
|
|
},
|
|
wrap: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
setup(props, { slots }) {
|
|
const computAlign = computed(() => {
|
|
var _a;
|
|
return (_a = props.align) != null ? _a : props.direction === "horizontal" ? "center" : "";
|
|
});
|
|
const spaceClass = computed(() => [
|
|
"layui-space",
|
|
{
|
|
[`layui-space-align-${computAlign.value}`]: computAlign.value,
|
|
[`layui-space-${props.direction}`]: props.direction,
|
|
[`layui-space-wrap`]: props.wrap,
|
|
[`layui-space-fill`]: props.fill
|
|
}
|
|
]);
|
|
const spaceStyle = computed(() => {
|
|
const sizeMap = { xs: "4px", sm: "8px", md: "16px", lg: "24px" };
|
|
let gap = "";
|
|
if (Array.isArray(props.size)) {
|
|
gap = props.size.map((size) => {
|
|
if (typeof size === "number") {
|
|
return `${size}px`;
|
|
}
|
|
if (typeof size === "string") {
|
|
return sizeMap[size] || size;
|
|
}
|
|
return size;
|
|
}).join(" ");
|
|
} else if (typeof props.size === "string") {
|
|
gap = sizeMap[props.size] || props.size;
|
|
} else if (typeof props.size === "number") {
|
|
gap = `${props.size}px`;
|
|
}
|
|
return {
|
|
gap
|
|
};
|
|
});
|
|
const itemStyle = computed(() => [
|
|
props.fill ? { flexGrow: 1, minWidth: "100%" } : {}
|
|
]);
|
|
const extractChildren = () => {
|
|
const result = [];
|
|
const children = renderSlot(slots, "default").children;
|
|
const elementData = Array.isArray(children) ? [...children] : [];
|
|
while (elementData.length) {
|
|
const vnode = elementData.shift();
|
|
if (vnode === null)
|
|
continue;
|
|
if (Array.isArray(vnode)) {
|
|
elementData.unshift(...vnode);
|
|
}
|
|
if (!isVNode(vnode) || vnode.type === Comment)
|
|
continue;
|
|
if (vnode.type === Fragment && Array.isArray(vnode.children)) {
|
|
elementData.unshift(vnode.children);
|
|
} else if (typeof vnode === "string" || typeof vnode === "number") {
|
|
result.push(createTextVNode(vnode));
|
|
} else {
|
|
result.push(vnode);
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
return () => {
|
|
const children = extractChildren();
|
|
return h("div", {
|
|
class: spaceClass.value,
|
|
style: spaceStyle.value
|
|
}, children.map((child, index2) => {
|
|
var _a;
|
|
return h("div", {
|
|
key: (_a = child.key) != null ? _a : `item-${index2}`,
|
|
class: "layui-space-item",
|
|
style: itemStyle.value
|
|
}, h(child));
|
|
}));
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { component as default };
|