1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- 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
- };
|