| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _typeof from "@babel/runtime/helpers/esm/typeof";
- import { createVNode as _createVNode } from "vue";
- import { defineComponent } from 'vue';
- import classNames from '../_util/classNames';
- import { initDefaultProps } from '../_util/props-util';
- import Title from './Title';
- import Paragraph from './Paragraph';
- import useConfigInject from '../_util/hooks/useConfigInject';
- import Element from './Element';
- export var skeletonProps = function skeletonProps() {
- return {
- active: {
- type: Boolean,
- default: undefined
- },
- loading: {
- type: Boolean,
- default: undefined
- },
- prefixCls: String,
- avatar: {
- type: [Boolean, Object],
- default: undefined
- },
- title: {
- type: [Boolean, Object],
- default: undefined
- },
- paragraph: {
- type: [Boolean, Object],
- default: undefined
- },
- round: {
- type: Boolean,
- default: undefined
- }
- };
- };
- function getComponentProps(prop) {
- if (prop && _typeof(prop) === 'object') {
- return prop;
- }
- return {};
- }
- function getAvatarBasicProps(hasTitle, hasParagraph) {
- if (hasTitle && !hasParagraph) {
- // Square avatar
- return {
- size: 'large',
- shape: 'square'
- };
- }
- return {
- size: 'large',
- shape: 'circle'
- };
- }
- function getTitleBasicProps(hasAvatar, hasParagraph) {
- if (!hasAvatar && hasParagraph) {
- return {
- width: '38%'
- };
- }
- if (hasAvatar && hasParagraph) {
- return {
- width: '50%'
- };
- }
- return {};
- }
- function getParagraphBasicProps(hasAvatar, hasTitle) {
- var basicProps = {};
- // Width
- if (!hasAvatar || !hasTitle) {
- basicProps.width = '61%';
- }
- // Rows
- if (!hasAvatar && hasTitle) {
- basicProps.rows = 3;
- } else {
- basicProps.rows = 2;
- }
- return basicProps;
- }
- var Skeleton = defineComponent({
- compatConfig: {
- MODE: 3
- },
- name: 'ASkeleton',
- props: initDefaultProps(skeletonProps(), {
- avatar: false,
- title: true,
- paragraph: true
- }),
- setup: function setup(props, _ref) {
- var slots = _ref.slots;
- var _useConfigInject = useConfigInject('skeleton', props),
- prefixCls = _useConfigInject.prefixCls,
- direction = _useConfigInject.direction;
- return function () {
- var _slots$default;
- var loading = props.loading,
- avatar = props.avatar,
- title = props.title,
- paragraph = props.paragraph,
- active = props.active,
- round = props.round;
- var pre = prefixCls.value;
- if (loading || props.loading === undefined) {
- var _classNames;
- var hasAvatar = !!avatar || avatar === '';
- var hasTitle = !!title || title === '';
- var hasParagraph = !!paragraph || paragraph === '';
- // Avatar
- var avatarNode;
- if (hasAvatar) {
- var avatarProps = _objectSpread(_objectSpread({
- prefixCls: "".concat(pre, "-avatar")
- }, getAvatarBasicProps(hasTitle, hasParagraph)), getComponentProps(avatar));
- avatarNode = _createVNode("div", {
- "class": "".concat(pre, "-header")
- }, [_createVNode(Element, avatarProps, null)]);
- }
- var contentNode;
- if (hasTitle || hasParagraph) {
- // Title
- var $title;
- if (hasTitle) {
- var titleProps = _objectSpread(_objectSpread({
- prefixCls: "".concat(pre, "-title")
- }, getTitleBasicProps(hasAvatar, hasParagraph)), getComponentProps(title));
- $title = _createVNode(Title, titleProps, null);
- }
- // Paragraph
- var paragraphNode;
- if (hasParagraph) {
- var paragraphProps = _objectSpread(_objectSpread({
- prefixCls: "".concat(pre, "-paragraph")
- }, getParagraphBasicProps(hasAvatar, hasTitle)), getComponentProps(paragraph));
- paragraphNode = _createVNode(Paragraph, paragraphProps, null);
- }
- contentNode = _createVNode("div", {
- "class": "".concat(pre, "-content")
- }, [$title, paragraphNode]);
- }
- var cls = classNames(pre, (_classNames = {}, _defineProperty(_classNames, "".concat(pre, "-with-avatar"), hasAvatar), _defineProperty(_classNames, "".concat(pre, "-active"), active), _defineProperty(_classNames, "".concat(pre, "-rtl"), direction.value === 'rtl'), _defineProperty(_classNames, "".concat(pre, "-round"), round), _classNames));
- return _createVNode("div", {
- "class": cls
- }, [avatarNode, contentNode]);
- }
- return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
- };
- }
- });
- export default Skeleton;
|