@meve/ui/es/loading/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';



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

function Loading(h, props, slots, ctx) {
  var color = props.color,
      size = props.size,
      loading = props.loading,
      description = props.description,
      rotate = props.rotate;
  var loadingSize = toSizeUnit(size);

  var getOpacityClass = function getOpacityClass() {
    return loading && slots.default ? namespace('--opacity-visible') : namespace('--opacity-hidden');
  };

  var getAllowTouchClass = function getAllowTouchClass() {
    return !loading && namespace('--allow-touch');
  };

  var getOverlayClass = function getOverlayClass() {
    return slots.default && namespace('--overlay');
  };

  var getRotateClass = function getRotateClass() {
    return rotate && namespace('--rotate');
  };

  var getDescription = function getDescription() {
    if (slots.description) {
      return slots.description == null ? void 0 : slots.description();
    }

    if (description) {
      return h("div", {
        "class": namespace('__description')
      }, [description]);
    }
  };

  var renderSvg = function renderSvg() {
    return h("svg", {
      "style": {
        width: loadingSize,
        height: loadingSize,
        color: color
      },
      "attrs": {
        "viewBox": "25 25 50 50"
      }
    }, [h("circle", {
      "attrs": {
        "cx": "50",
        "cy": "50",
        "r": "20",
        "fill": "none"
      }
    })]);
  };

  var renderMask = function renderMask() {
    var _slots$icon;

    return h("div", {
      "class": [namespace('__mask-container'), getAllowTouchClass(), getOverlayClass()]
    }, [h("div", {
      "class": [namespace('__mask'), getOpacityClass()]
    }), h("div", {
      "class": [namespace('__circle'), getRotateClass()],
      "directives": [{
        name: "show",
        value: loading
      }]
    }, [(_slots$icon = slots.icon == null ? void 0 : slots.icon()) != null ? _slots$icon : renderSvg()]), h("div", {
      "class": namespace('__description-container'),
      "style": {
        color: color
      },
      "directives": [{
        name: "show",
        value: loading
      }]
    }, [getDescription()])]);
  };

  return h("div", _mergeJSXProps([{
    "class": [namespace(), 'm--box']
  }, inherit(ctx)]), [slots.default == null ? void 0 : slots.default(), renderMask()]);
}

Loading.props = props;
var LoadingPlugin = createComponent(Loading);
export var _LoadingComponent = LoadingPlugin;
export default LoadingPlugin;