'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.cjs');
var useConfigInject = require('../../config-provider/src/hooks/useConfigInject.cjs');
var index = require('../style/index.cjs');
var Title = require('./Title.cjs');
var Paragraph = require('./Paragraph.cjs');
var Element = require('./Element.cjs');
var props = require('./props.cjs');
var initDefaultProps = require('../../../utils/vue/initDefaultProps.cjs');
var _class = require('../../../utils/dom/class.cjs');

function getComponentProps(prop) {
  if (prop && typeof prop === "object")
    return prop;
  return {};
}
function getAvatarBasicProps(hasTitle, hasParagraph) {
  if (hasTitle && !hasParagraph) {
    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) {
  const basicProps = {};
  if (!hasAvatar || !hasTitle)
    basicProps.width = "61%";
  if (!hasAvatar && hasTitle)
    basicProps.rows = 3;
  else
    basicProps.rows = 2;
  return basicProps;
}
var ASkeleton = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ASkeleton",
  inheritAttrs: false,
  props: initDefaultProps.initDefaultProps(props.skeletonProps(), {
    avatar: false,
    title: true,
    paragraph: true
  }),
  setup(props, {
    slots,
    attrs
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject.default("skeleton", props);
    const [wrapSSR, hashId] = index.default(prefixCls);
    return () => {
      var _a;
      const {
        loading,
        avatar,
        title,
        paragraph,
        active,
        round
      } = props;
      const pre = prefixCls.value;
      if (loading || props.loading === void 0) {
        const hasAvatar = !!avatar || avatar === "";
        const hasTitle = !!title || title === "";
        const hasParagraph = !!paragraph || paragraph === "";
        let avatarNode;
        if (hasAvatar) {
          const avatarProps = {
            prefixCls: `${pre}-avatar`,
            ...getAvatarBasicProps(hasTitle, hasParagraph),
            ...getComponentProps(avatar)
          };
          avatarNode = vue.createVNode("div", {
            "class": `${pre}-header`
          }, [vue.createVNode(Element.default, avatarProps, null)]);
        }
        let contentNode;
        if (hasTitle || hasParagraph) {
          let $title;
          if (hasTitle) {
            const titleProps = {
              prefixCls: `${pre}-title`,
              ...getTitleBasicProps(hasAvatar, hasParagraph),
              ...getComponentProps(title)
            };
            $title = vue.createVNode(Title.default, titleProps, null);
          }
          let paragraphNode;
          if (hasParagraph) {
            const paragraphProps = {
              prefixCls: `${pre}-paragraph`,
              ...getParagraphBasicProps(hasAvatar, hasTitle),
              ...getComponentProps(paragraph)
            };
            paragraphNode = vue.createVNode(Paragraph.default, paragraphProps, null);
          }
          contentNode = vue.createVNode("div", {
            "class": `${pre}-content`
          }, [$title, paragraphNode]);
        }
        const cls = _class.classNames(pre, {
          [`${pre}-with-avatar`]: hasAvatar,
          [`${pre}-active`]: active,
          [`${pre}-rtl`]: direction.value === "rtl",
          [`${pre}-round`]: round,
          [hashId.value]: true,
          [`${attrs.class}`]: true
        });
        return wrapSSR(vue.createVNode("div", {
          "class": cls
        }, [avatarNode, contentNode]));
      }
      return (_a = slots.default) == null ? void 0 : _a.call(slots);
    };
  }
});

exports.default = ASkeleton;
//# sourceMappingURL=Skeleton.cjs.map
