skeleton-loader-vue/dist/skeleton-loader-vue.ssr.js

A simple, customizable skeleton loader for your vue app

'use strict';Object.defineProperty(exports,'__esModule',{value:true});//
//
//
//
var script = {
  props: {
    height: {
      type: [Number, String],
      default: 100
    },
    width: {
      type: [Number, String],
      default: 100
    },
    color: {
      type: String,
      default: 'rgba(0, 0, 0, 0.12)'
    },
    animation: {
      type: String,
      default: 'wave'
    }
  },
  computed: {
    bindClass: function bindClass() {
      return "animation--".concat(this.animation);
    }
  },
  mounted: function mounted() {
    var width = typeof this.width === 'number' ? "".concat(this.width, "px") : this.width;
    var height = typeof this.width === 'number' ? "".concat(this.height, "px") : this.height;
    var background = "".concat(this.color);
    var loader = this.$el;
    loader.style.setProperty('width', width);
    loader.style.setProperty('height', height);
    loader.style.setProperty('background-color', background);
  }
};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
    if (typeof shadowMode !== 'boolean') {
        createInjectorSSR = createInjector;
        createInjector = shadowMode;
        shadowMode = false;
    }
    // Vue.extend constructor export interop.
    const options = typeof script === 'function' ? script.options : script;
    // render functions
    if (template && template.render) {
        options.render = template.render;
        options.staticRenderFns = template.staticRenderFns;
        options._compiled = true;
        // functional template
        if (isFunctionalTemplate) {
            options.functional = true;
        }
    }
    // scopedId
    if (scopeId) {
        options._scopeId = scopeId;
    }
    let hook;
    if (moduleIdentifier) {
        // server build
        hook = function (context) {
            // 2.3 injection
            context =
                context || // cached call
                    (this.$vnode && this.$vnode.ssrContext) || // stateful
                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
            // 2.2 with runInNewContext: true
            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                context = __VUE_SSR_CONTEXT__;
            }
            // inject component styles
            if (style) {
                style.call(this, createInjectorSSR(context));
            }
            // register component module identifier for async chunk inference
            if (context && context._registeredComponents) {
                context._registeredComponents.add(moduleIdentifier);
            }
        };
        // used by ssr in case component is cached and beforeCreate
        // never gets called
        options._ssrRegister = hook;
    }
    else if (style) {
        hook = shadowMode
            ? function (context) {
                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
            }
            : function (context) {
                style.call(this, createInjector(context));
            };
    }
    if (hook) {
        if (options.functional) {
            // register for functional component in vue file
            const originalRender = options.render;
            options.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context);
            };
        }
        else {
            // inject component registration as beforeCreate hook
            const existing = options.beforeCreate;
            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
    }
    return script;
}function createInjectorSSR(context) {
    if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__;
    }
    if (!context)
        return () => { };
    if (!('styles' in context)) {
        context._styles = context._styles || {};
        Object.defineProperty(context, 'styles', {
            enumerable: true,
            get: () => context._renderStyles(context._styles)
        });
        context._renderStyles = context._renderStyles || renderStyles;
    }
    return (id, style) => addStyle(id, style, context);
}
function addStyle(id, css, context) {
    const group =  css.media || 'default' ;
    const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
    if (!style.ids.includes(id)) {
        style.media = css.media;
        style.ids.push(id);
        let code = css.source;
        style.css += code + '\n';
    }
}
function renderStyles(styles) {
    let css = '';
    for (const key in styles) {
        const style = styles[key];
        css +=
            '<style data-vue-ssr-id="' +
                Array.from(style.ids).join(' ') +
                '"' +
                (style.media ? ' media="' + style.media + '"' : '') +
                '>' +
                style.css +
                '</style>';
    }
    return css;
}/* script */
var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    staticClass: "loader loader--circle",
    class: _vm.bindClass
  }, []);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
  if (!inject) return;
  inject("data-v-c49d1d20_0", {
    source: ".loader--circle[data-v-c49d1d20]{overflow:hidden;width:100px;height:100px;background-color:red;border-radius:50%;position:relative}.loader--circle[data-v-c49d1d20]::before{content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0}",
    map: undefined,
    media: undefined
  });
};
/* scoped */


var __vue_scope_id__ = "data-v-c49d1d20";
/* module identifier */

var __vue_module_identifier__ = "data-v-c49d1d20";
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, createInjectorSSR, undefined);//
//
//
//
var script$1 = {
  props: {
    height: {
      type: [Number, String],
      default: 100
    },
    width: {
      type: [Number, String],
      default: 200
    },
    color: {
      type: String,
      default: 'rgba(0, 0, 0, 0.12)'
    },
    animation: {
      type: String,
      default: 'wave'
    },
    type: {
      type: String,
      default: 'rect'
    },
    rounded: {
      type: Boolean,
      default: false
    },
    radius: {
      type: [Number, String],
      default: 0
    }
  },
  computed: {
    style: function style() {
      return {
        width: typeof this.width === 'number' ? "".concat(this.width, "px") : this.width,
        height: typeof this.width === 'number' ? "".concat(this.height, "px") : this.height,
        'background-color': "".concat(this.color),
        'border-radius': this.rounded ? "".concat(this.radius, "px") : 0
      };
    },
    bindClass: function bindClass() {
      return "animation--".concat(this.animation, " shape--").concat(this.type, " shape--").concat(this.rounded ? 'round' : 'flat');
    }
  },
  mounted: function mounted() {
    var width = typeof this.width === 'number' ? "".concat(this.width, "px") : this.width;
    var height = typeof this.width === 'number' ? "".concat(this.height, "px") : this.height;
    var background = "".concat(this.color);
    var borderRadius = this.rounded ? "".concat(this.radius, "px") : 0;
    var loader = this.$el;
    loader.style.setProperty('width', width);
    loader.style.setProperty('height', height);
    loader.style.setProperty('background-color', background);
    loader.style.setProperty('border-radius', borderRadius);
  }
};/* script */
var __vue_script__$1 = script$1;
/* template */

var __vue_render__$1 = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    staticClass: "loader",
    class: _vm.bindClass
  }, []);
};

var __vue_staticRenderFns__$1 = [];
/* style */

var __vue_inject_styles__$1 = function __vue_inject_styles__(inject) {
  if (!inject) return;
  inject("data-v-39eb697a_0", {
    source: ".loader[data-v-39eb697a]{overflow:hidden;position:relative}.loader[data-v-39eb697a]::before{content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0}.shape--text[data-v-39eb697a]{height:20px}.shape--round[data-v-39eb697a]{border-radius:8px}",
    map: undefined,
    media: undefined
  });
};
/* scoped */


var __vue_scope_id__$1 = "data-v-39eb697a";
/* module identifier */

var __vue_module_identifier__$1 = "data-v-39eb697a";
/* functional template */

var __vue_is_functional_template__$1 = false;
/* style inject shadow dom */

var __vue_component__$1 = /*#__PURE__*/normalizeComponent({
  render: __vue_render__$1,
  staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, createInjectorSSR, undefined);//
var script$2 = {
  components: {
    CircleLoader: __vue_component__,
    SquareLoader: __vue_component__$1
  },
  props: {
    type: {
      type: String,
      default: 'rect'
    },
    size: {
      type: [Number, String]
    },
    animation: {
      type: String,
      default: 'wave'
    },
    height: {
      type: [Number, String]
    },
    width: {
      type: [Number, String]
    },
    color: {
      type: String,
      default: 'rgba(0, 0, 0, 0.12)'
    },
    waveColor: {
      type: String
    },
    rounded: {
      type: Boolean,
      default: false
    },
    radius: {
      type: [Number, String],
      default: 8
    }
  },
  computed: {
    loaderWidth: function loaderWidth() {
      if (this.size) {
        return this.size;
      } else {
        return this.width;
      }
    },
    loaderHeight: function loaderHeight() {
      if (this.size) {
        return this.size;
      } else {
        return this.height;
      }
    }
  },
  mounted: function mounted() {
    if (this.waveColor) {
      this.$el.style.setProperty('--gradient-color', this.waveColor);
    }
  }
};/* script */
var __vue_script__$2 = script$2;
/* template */

var __vue_render__$2 = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _vm.type === 'circle' ? _c('circle-loader', {
    attrs: {
      "width": _vm.loaderWidth,
      "height": _vm.loaderHeight,
      "animation": _vm.animation,
      "color": _vm.color
    }
  }) : _c('square-loader', {
    attrs: {
      "width": _vm.loaderWidth,
      "height": _vm.loaderHeight,
      "animation": _vm.animation,
      "type": _vm.type,
      "color": _vm.color,
      "rounded": _vm.rounded,
      "radius": _vm.radius
    }
  });
};

var __vue_staticRenderFns__$2 = [];
/* style */

var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
  if (!inject) return;
  inject("data-v-28d24b2c_0", {
    source: ".loader{width:fit-content;cursor:wait;--gradient-color:rgba(255, 255, 255, 0.5)}@keyframes fade{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(.85)}100%{transform:scale(1)}}@keyframes pulse-x{0%{transform:scaleX(1)}50%{transform:scaleX(.75)}100%{transform:scaleX(1)}}@keyframes pulse-y{0%{transform:scaleY(1)}50%{transform:scaleY(.75)}100%{transform:scaleY(1)}}@keyframes wave{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.animation--fade{animation:fade 1.5s linear .5s infinite}.animation--wave::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);background:linear-gradient(90deg,transparent,var(--gradient-color),transparent);animation:wave 1.5s linear .5s infinite}.animation--pulse-x{animation:pulse-x 1.5s linear .5s infinite}.animation--pulse-y{animation:pulse-y 1.5s linear .5s infinite}.animation--pulse{animation:pulse 1.5s linear .5s infinite}",
    map: undefined,
    media: undefined
  });
};
/* scoped */


var __vue_scope_id__$2 = undefined;
/* module identifier */

var __vue_module_identifier__$2 = "data-v-28d24b2c";
/* functional template */

var __vue_is_functional_template__$2 = false;
/* style inject shadow dom */

var __vue_component__$2 = /*#__PURE__*/normalizeComponent({
  render: __vue_render__$2,
  staticRenderFns: __vue_staticRenderFns__$2
}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, createInjectorSSR, undefined);// Import vue components

var install = function installSkeletonLoaderVue(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component('skeleton-loader-vue', __vue_component__$2);
}; // Create module definition for Vue.use()


var plugin = {
  install: install
}; // To auto-install on non-es builds, when vue is found
// eslint-disable-next-line no-redeclare

/* global window, global */

{
  var GlobalVue = null;

  if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
  } else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue;
  }

  if (GlobalVue) {
    GlobalVue.use(plugin);
  }
}

__vue_component__$2.install = install; // Export component by default
exports.default=__vue_component__$2;