@gitlab/ui/dist/components/base/skeleton_loader/skeleton_loader.js

GitLab UI Components

import _range from 'lodash/range';
import { uid } from '../../../utils/utils';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var DEFAULT_LINE_MAX_WIDTH = 235;
var DEFAULT_LINE_WIDTH_PERCENTAGES = [65, 100, 85];
var DEFAULT_LINE_HEIGHT = 10;
var DEFAULT_LINE_SPACING = 4;
var DEFAULT_SVG_WIDTH = 400;
var DEFAULT_SVG_HEIGHT = 130;
var script = {
  name: 'GlSkeletonLoader',
  functional: true,
  props: {
    width: {
      type: Number,
      default: null,
      required: false
    },
    height: {
      type: Number,
      default: null,
      required: false
    },
    preserveAspectRatio: {
      type: String,
      default: 'xMidYMid meet',
      required: false
    },
    baseUrl: {
      type: String,
      default: '',
      required: false
    },
    uniqueKey: {
      type: String,
      default: function _default() {
        return uid();
      },
      required: false
    },
    lines: {
      type: Number,
      default: 3,
      required: false
    },
    equalWidthLines: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  render: function render(createElement, _ref) {
    var props = _ref.props,
        slots = _ref.slots;

    var slotIsSet = function slotIsSet() {
      return slots().default;
    };

    var propValueOrDefault = function propValueOrDefault(name, defaultValue) {
      return props[name] !== null ? props[name] : defaultValue;
    };

    var width = function width() {
      if (slotIsSet()) {
        return propValueOrDefault('width', DEFAULT_SVG_WIDTH);
      }

      return propValueOrDefault('width', DEFAULT_LINE_MAX_WIDTH);
    };

    var height = function height() {
      if (slotIsSet()) {
        return propValueOrDefault('height', DEFAULT_SVG_HEIGHT);
      }

      return propValueOrDefault('height', props.lines * DEFAULT_LINE_HEIGHT + (props.lines - 1) * DEFAULT_LINE_SPACING);
    };

    var lineWidth = function lineWidth(index) {
      if (props.equalWidthLines) {
        return '100%';
      }

      return "".concat(DEFAULT_LINE_WIDTH_PERCENTAGES[index % DEFAULT_LINE_WIDTH_PERCENTAGES.length], "%");
    };

    var svg = createElement('svg', {
      class: {
        'gl-skeleton-loader': true,
        'gl-w-full gl-h-full': !slotIsSet()
      },
      attrs: {
        viewBox: "0 0 ".concat(width(), " ").concat(height()),
        version: '1.1',
        preserveAspectRatio: props.preserveAspectRatio
      }
    }, [createElement('title', {}, ['Loading']), createElement('rect', {
      style: {
        fill: "url(".concat(props.baseUrl, "#").concat(props.uniqueKey, "-idGradient)")
      },
      attrs: {
        'clip-path': "url(".concat(props.baseUrl, "#").concat(props.uniqueKey, "-idClip)"),
        x: 0,
        y: 0,
        width: width(),
        height: height()
      }
    }), createElement('defs', {}, [createElement('clipPath', {
      attrs: {
        id: "".concat(props.uniqueKey, "-idClip")
      }
    }, slotIsSet() ? slots().default : _range(props.lines).map(function (index) {
      return createElement('rect', {
        key: index,
        attrs: {
          y: index * DEFAULT_LINE_HEIGHT + index * DEFAULT_LINE_SPACING,
          width: lineWidth(index),
          height: DEFAULT_LINE_HEIGHT,
          rx: 4
        }
      });
    })), createElement('linearGradient', {
      attrs: {
        id: "".concat(props.uniqueKey, "-idGradient")
      }
    }, [createElement('stop', {
      class: 'primary-stop',
      attrs: {
        offset: '0%'
      }
    }, [createElement('animate', {
      attrs: {
        attributeName: 'offset',
        values: '-2; 1',
        dur: '1s',
        repeatCount: 'indefinite'
      }
    })]), createElement('stop', {
      class: 'secondary-stop',
      attrs: {
        offset: '50%'
      }
    }, [createElement('animate', {
      attrs: {
        attributeName: 'offset',
        values: '-1.5; 1.5',
        dur: '1s',
        repeatCount: 'indefinite'
      }
    })]), createElement('stop', {
      class: 'primary-stop',
      attrs: {
        offset: '100%'
      }
    }, [createElement('animate', {
      attrs: {
        attributeName: 'offset',
        values: '-1; 2',
        dur: '1s',
        repeatCount: 'indefinite'
      }
    })])])])]);

    if (slotIsSet()) {
      return svg;
    }

    return createElement('div', {
      class: 'gl-skeleton-loader-default-container gl-max-w-full',
      style: {
        width: props.width !== null ? "".concat(props.width, "px") : null,
        height: props.height !== null ? "".concat(props.height, "px") : null
      }
    }, [svg]);
  }
};

/* script */
const __vue_script__ = script;

/* template */

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = undefined;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    {},
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;