90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
import { defineComponent, createVNode as _createVNode, Fragment as _Fragment, mergeProps as _mergeProps } from "vue";
|
|
import { addUnit, truthProp, numericProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
|
|
import SkeletonTitle from "../skeleton-title/index.mjs";
|
|
import SkeletonAvatar from "../skeleton-avatar/index.mjs";
|
|
import SkeletonParagraph, { DEFAULT_ROW_WIDTH } from "../skeleton-paragraph/index.mjs";
|
|
const [name, bem] = createNamespace("skeleton");
|
|
const DEFAULT_LAST_ROW_WIDTH = "60%";
|
|
const skeletonProps = {
|
|
row: makeNumericProp(0),
|
|
round: Boolean,
|
|
title: Boolean,
|
|
titleWidth: numericProp,
|
|
avatar: Boolean,
|
|
avatarSize: numericProp,
|
|
avatarShape: makeStringProp("round"),
|
|
loading: truthProp,
|
|
animate: truthProp,
|
|
rowWidth: {
|
|
type: [Number, String, Array],
|
|
default: DEFAULT_ROW_WIDTH
|
|
}
|
|
};
|
|
var stdin_default = defineComponent({
|
|
name,
|
|
inheritAttrs: false,
|
|
props: skeletonProps,
|
|
setup(props, {
|
|
slots,
|
|
attrs
|
|
}) {
|
|
const renderAvatar = () => {
|
|
if (props.avatar) {
|
|
return _createVNode(SkeletonAvatar, {
|
|
"avatarShape": props.avatarShape,
|
|
"avatarSize": props.avatarSize
|
|
}, null);
|
|
}
|
|
};
|
|
const renderTitle = () => {
|
|
if (props.title) {
|
|
return _createVNode(SkeletonTitle, {
|
|
"round": props.round,
|
|
"titleWidth": props.titleWidth
|
|
}, null);
|
|
}
|
|
};
|
|
const getRowWidth = (index) => {
|
|
const {
|
|
rowWidth
|
|
} = props;
|
|
if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
|
|
return DEFAULT_LAST_ROW_WIDTH;
|
|
}
|
|
if (Array.isArray(rowWidth)) {
|
|
return rowWidth[index];
|
|
}
|
|
return rowWidth;
|
|
};
|
|
const renderRows = () => Array(+props.row).fill("").map((_, i) => _createVNode(SkeletonParagraph, {
|
|
"key": i,
|
|
"round": props.round,
|
|
"rowWidth": addUnit(getRowWidth(i))
|
|
}, null));
|
|
const renderContents = () => {
|
|
if (slots.template) {
|
|
return slots.template();
|
|
}
|
|
return _createVNode(_Fragment, null, [renderAvatar(), _createVNode("div", {
|
|
"class": bem("content")
|
|
}, [renderTitle(), renderRows()])]);
|
|
};
|
|
return () => {
|
|
var _a;
|
|
if (!props.loading) {
|
|
return (_a = slots.default) == null ? void 0 : _a.call(slots);
|
|
}
|
|
return _createVNode("div", _mergeProps({
|
|
"class": bem({
|
|
animate: props.animate,
|
|
round: props.round
|
|
})
|
|
}, attrs), [renderContents()]);
|
|
};
|
|
}
|
|
});
|
|
export {
|
|
stdin_default as default,
|
|
skeletonProps
|
|
};
|