@meve/ui/es/skeleton/index.js

Argon design system components library

import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
import { createNamespace, inherit } from '../utils/create';
import { props } from './props';
import { toSizeUnit } from '../utils/elements';
import { toNumber } from '../utils/shared';



var _createNamespace = createNamespace('skeleton'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

function Skeleton(h, props, slots, ctx) {
  var loading = props.loading,
      avatar = props.avatar,
      avatarSize = props.avatarSize,
      title = props.title,
      titleWidth = props.titleWidth,
      rows = props.rows,
      rowsWidth = props.rowsWidth,
      fullscreen = props.fullscreen,
      card = props.card,
      cardHeight = props.cardHeight,
      fullscreenZIndex = props.fullscreenZIndex;

  var renderData = function renderData() {
    return h("div", {
      "class": namespace('__data')
    }, [slots.default == null ? void 0 : slots.default()]);
  };

  var renderAvatar = function renderAvatar() {
    return h("div", {
      "class": namespace('__avatar'),
      "style": {
        width: toSizeUnit(avatarSize),
        height: toSizeUnit(avatarSize)
      }
    }, [h("div", {
      "class": namespace('--animation')
    })]);
  };

  var renderTitle = function renderTitle() {
    return h("div", {
      "class": namespace('__title'),
      "style": {
        width: toSizeUnit(titleWidth)
      }
    }, [h("div", {
      "class": namespace('--animation')
    })]);
  };

  var renderRow = function renderRow() {
    return Array.from({
      length: toNumber(rows)
    }).map(function (row, index) {
      return h("div", {
        "class": namespace('__row'),
        "key": row,
        "style": {
          width: toSizeUnit(rowsWidth[index])
        }
      }, [h("div", {
        "class": namespace('--animation')
      })]);
    });
  };

  var renderCard = function renderCard() {
    return h("div", {
      "class": namespace('__card'),
      "style": {
        height: toSizeUnit(cardHeight)
      }
    }, [h("div", {
      "class": namespace('--animation')
    })]);
  };

  var renderContent = function renderContent() {
    return h("div", {
      "class": namespace('__content')
    }, [card && renderCard(), h("div", {
      "class": namespace('__article')
    }, [avatar && renderAvatar(), h("div", {
      "class": namespace('__section')
    }, [title && renderTitle(), renderRow()])])]);
  };

  var renderFullscreen = function renderFullscreen() {
    return h("div", {
      "class": namespace('__fullscreen'),
      "style": {
        zIndex: toNumber(fullscreenZIndex)
      }
    }, [h("div", {
      "class": namespace('--animation')
    })]);
  };

  return h("div", _mergeJSXProps([{
    "class": [namespace(), 'm--box']
  }, inherit(ctx)]), [!loading && renderData(), loading && !fullscreen && renderContent(), loading && fullscreen && renderFullscreen()]);
}

Skeleton.props = props;
var SkeletonPlugin = createComponent(Skeleton);
export var _SkeletonComponent = SkeletonPlugin;
export default SkeletonPlugin;