aesth-vue-range-input - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/aesth-vue-range-input.esm.js

@@ -1,131 +0,1 @@
-function styleInject(css, ref) {
-  if ( ref === void 0 ) { ref = {}; }
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "\ninput {\n  position: relative;\n  -webkit-appearance: none;\n  margin: 0;\n  padding: 5px 0;\n  height: 19px;\n  width: var(--range-width);\n}\ninput:focus-visible {\n  outline: 2px solid var(--progress-color);\n}\ninput::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::before {\n  position: absolute;\n  content: \"\";\n  top: 13px;\n  left: 0;\n  width: var(--webkit-progress);\n  height: 3px;\n  background-color: var(--progress-color);\n  cursor: pointer;\n}\ninput::-webkit-slider-thumb {\n  position: relative;\n  -webkit-appearance: none;\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n  margin: calc((var(--thumb-size) / 2) - var(--thumb-size)) 0 0 0;\n}\ninput:active::-webkit-slider-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\ninput::-moz-range-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::-moz-range-progress {\n  height: 3px;\n  background-color: var(--progress-color);\n}\ninput::-moz-focus-outer {\n  border: 0;\n}\ninput::-moz-range-thumb {\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n}\ninput:active::-moz-range-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\n";
-styleInject(css_248z);
-
-var AesthVueRangeInput = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{ref:"range",style:({
-    '--range-width': _vm.rangeWidth,
-    '--progress-color': _vm.progressColor,
-    '--track-color': _vm.buffered
-      ? ("linear-gradient(90deg, " + (_vm.buffered.color) + " " + (_vm.buffered.width) + ", " + _vm.trackColor + " " + (_vm.buffered.width) + ")")
-      : _vm.trackColor,
-    '--thumb-border-radius': _vm.squaredThumb ? '0' : '50%',
-    '--thumb-border-color': _vm.thumbBorderColor,
-    '--thumb-size': _vm.thumbSize,
-  }),attrs:{"type":"range","max":_vm.max},domProps:{"value":_vm.value},on:{"input":function($event){return _vm.$emit('input', $event.target.value)}}})},
-staticRenderFns: [],
-  props: {
-    value: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    rangeWidth: {
-      type: String,
-      required: false,
-      default: "100%",
-    },
-    progressColor: {
-      type: String,
-      required: false,
-      default: "#000c",
-    },
-    buffered: {
-      type: Object,
-      required: false,
-      // default: function () {
-      //   return {
-      //     width: "50%",
-      //     color: "#0003",
-      //   };
-      // },
-    },
-    trackColor: {
-      type: String,
-      required: false,
-      default: "#0003",
-    },
-    squaredThumb: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    thumbBorderColor: {
-      type: String,
-      required: false,
-      default: "#000",
-    },
-    thumbSize: {
-      type: String,
-      required: false,
-      default: "20px",
-    },
-    max: {
-      type: Number,
-      required: false,
-      default: 100,
-    },
-  },
-  computed: {
-    updateWebkitProgress: function updateWebkitProgress() {
-      var progress = (this.value / this.max) * 100 + "%";
-      return this.$refs.range.style.setProperty("--webkit-progress", progress);
-    },
-  },
-  mounted: function mounted() {
-    this.updateWebkitProgress;
-  },
-  watch: {
-    value: function value() {
-      this.updateWebkitProgress;
-    },
-  },
-};
-
-function install(Vue) {
-  if (install.installed) { return; }
-  install.installed = true;
-  Vue.component("AesthVueRangeInput", AesthVueRangeInput);
-}
-
-var plugin = {
-  install: install,
-};
-
-var GlobalVue = null;
-if (typeof window !== "undefined") {
-  GlobalVue = window.Vue;
-} else if (typeof global !== "undefined") {
-  GlobalVue = global.Vue;
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin);
-}
-
-export { AesthVueRangeInput as default, install };
+!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('\ninput {\n  position: relative;\n  -webkit-appearance: none;\n  margin: 0;\n  padding: 5px 0;\n  height: 19px;\n  width: var(--range-width);\n}\ninput:focus-visible {\n  outline: 2px solid var(--progress-color);\n}\ninput::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::before {\n  position: absolute;\n  content: "";\n  top: 13px;\n  left: 0;\n  width: var(--webkit-progress);\n  height: 3px;\n  background-color: var(--progress-color);\n  cursor: pointer;\n}\ninput::-webkit-slider-thumb {\n  position: relative;\n  -webkit-appearance: none;\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n  margin: calc((var(--thumb-size) / 2) - var(--thumb-size)) 0 0 0;\n}\ninput:active::-webkit-slider-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\ninput::-moz-range-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::-moz-range-progress {\n  height: 3px;\n  background-color: var(--progress-color);\n}\ninput::-moz-focus-outer {\n  border: 0;\n}\ninput::-moz-range-thumb {\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n}\ninput:active::-moz-range-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\n');var e={render:function(){var e=this,r=e.$createElement;return(e._self._c||r)("input",{ref:"range",style:{"--range-width":e.rangeWidth,"--progress-color":e.progressColor,"--track-color":e.buffered?"linear-gradient(90deg, "+e.buffered.color+" "+e.buffered.width+", "+e.trackColor+" "+e.buffered.width+")":e.trackColor,"--thumb-border-radius":e.squaredThumb?"0":"50%","--thumb-border-color":e.thumbBorderColor,"--thumb-size":e.thumbSize},attrs:{type:"range",max:e.max},domProps:{value:e.value},on:{input:function(r){return e.$emit("input",r.target.value)}}})},staticRenderFns:[],props:{value:{type:Number,required:!1,default:0},rangeWidth:{type:String,required:!1,default:"100%"},progressColor:{type:String,required:!1,default:"#000c"},buffered:{type:Object,required:!1},trackColor:{type:String,required:!1,default:"#0003"},squaredThumb:{type:Boolean,required:!1,default:!1},thumbBorderColor:{type:String,required:!1,default:"#000"},thumbSize:{type:String,required:!1,default:"20px"},max:{type:Number,required:!1,default:100}},computed:{updateWebkitProgress:function(){var e=this.value/this.max*100+"%";return this.$refs.range.style.setProperty("--webkit-progress",e)}},mounted:function(){this.updateWebkitProgress},watch:{value:function(){this.updateWebkitProgress}}};function r(t){r.installed||(r.installed=!0,t.component("AesthVueRangeInput",e))}var t={install:r},n=null;"undefined"!=typeof window?n=window.Vue:"undefined"!=typeof global&&(n=global.Vue),n&&n.use(t);export{e as default,r as install};

dist/aesth-vue-range-input.min.js

@@ -1,141 +0,1 @@
-var AesthVueRangeInput = (function (exports) {
-  'use strict';
-
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) { ref = {}; }
-    var insertAt = ref.insertAt;
-
-    if (!css || typeof document === 'undefined') { return; }
-
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-      } else {
-        head.appendChild(style);
-      }
-    } else {
-      head.appendChild(style);
-    }
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
-
-  var css_248z = "\ninput {\n  position: relative;\n  -webkit-appearance: none;\n  margin: 0;\n  padding: 5px 0;\n  height: 19px;\n  width: var(--range-width);\n}\ninput:focus-visible {\n  outline: 2px solid var(--progress-color);\n}\ninput::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::before {\n  position: absolute;\n  content: \"\";\n  top: 13px;\n  left: 0;\n  width: var(--webkit-progress);\n  height: 3px;\n  background-color: var(--progress-color);\n  cursor: pointer;\n}\ninput::-webkit-slider-thumb {\n  position: relative;\n  -webkit-appearance: none;\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n  margin: calc((var(--thumb-size) / 2) - var(--thumb-size)) 0 0 0;\n}\ninput:active::-webkit-slider-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\ninput::-moz-range-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::-moz-range-progress {\n  height: 3px;\n  background-color: var(--progress-color);\n}\ninput::-moz-focus-outer {\n  border: 0;\n}\ninput::-moz-range-thumb {\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n}\ninput:active::-moz-range-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\n";
-  styleInject(css_248z);
-
-  var AesthVueRangeInput = {
-  render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{ref:"range",style:({
-      '--range-width': _vm.rangeWidth,
-      '--progress-color': _vm.progressColor,
-      '--track-color': _vm.buffered
-        ? ("linear-gradient(90deg, " + (_vm.buffered.color) + " " + (_vm.buffered.width) + ", " + _vm.trackColor + " " + (_vm.buffered.width) + ")")
-        : _vm.trackColor,
-      '--thumb-border-radius': _vm.squaredThumb ? '0' : '50%',
-      '--thumb-border-color': _vm.thumbBorderColor,
-      '--thumb-size': _vm.thumbSize,
-    }),attrs:{"type":"range","max":_vm.max},domProps:{"value":_vm.value},on:{"input":function($event){return _vm.$emit('input', $event.target.value)}}})},
-  staticRenderFns: [],
-    props: {
-      value: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      rangeWidth: {
-        type: String,
-        required: false,
-        default: "100%",
-      },
-      progressColor: {
-        type: String,
-        required: false,
-        default: "#000c",
-      },
-      buffered: {
-        type: Object,
-        required: false,
-        // default: function () {
-        //   return {
-        //     width: "50%",
-        //     color: "#0003",
-        //   };
-        // },
-      },
-      trackColor: {
-        type: String,
-        required: false,
-        default: "#0003",
-      },
-      squaredThumb: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      thumbBorderColor: {
-        type: String,
-        required: false,
-        default: "#000",
-      },
-      thumbSize: {
-        type: String,
-        required: false,
-        default: "20px",
-      },
-      max: {
-        type: Number,
-        required: false,
-        default: 100,
-      },
-    },
-    computed: {
-      updateWebkitProgress: function updateWebkitProgress() {
-        var progress = (this.value / this.max) * 100 + "%";
-        return this.$refs.range.style.setProperty("--webkit-progress", progress);
-      },
-    },
-    mounted: function mounted() {
-      this.updateWebkitProgress;
-    },
-    watch: {
-      value: function value() {
-        this.updateWebkitProgress;
-      },
-    },
-  };
-
-  function install(Vue) {
-    if (install.installed) { return; }
-    install.installed = true;
-    Vue.component("AesthVueRangeInput", AesthVueRangeInput);
-  }
-
-  var plugin = {
-    install: install,
-  };
-
-  var GlobalVue = null;
-  if (typeof window !== "undefined") {
-    GlobalVue = window.Vue;
-  } else if (typeof global !== "undefined") {
-    GlobalVue = global.Vue;
-  }
-  if (GlobalVue) {
-    GlobalVue.use(plugin);
-  }
-
-  exports["default"] = AesthVueRangeInput;
-  exports.install = install;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-  return exports;
-
-})({});
+var AesthVueRangeInput=function(e){"use strict";!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('\ninput {\n  position: relative;\n  -webkit-appearance: none;\n  margin: 0;\n  padding: 5px 0;\n  height: 19px;\n  width: var(--range-width);\n}\ninput:focus-visible {\n  outline: 2px solid var(--progress-color);\n}\ninput::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::before {\n  position: absolute;\n  content: "";\n  top: 13px;\n  left: 0;\n  width: var(--webkit-progress);\n  height: 3px;\n  background-color: var(--progress-color);\n  cursor: pointer;\n}\ninput::-webkit-slider-thumb {\n  position: relative;\n  -webkit-appearance: none;\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n  margin: calc((var(--thumb-size) / 2) - var(--thumb-size)) 0 0 0;\n}\ninput:active::-webkit-slider-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\ninput::-moz-range-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::-moz-range-progress {\n  height: 3px;\n  background-color: var(--progress-color);\n}\ninput::-moz-focus-outer {\n  border: 0;\n}\ninput::-moz-range-thumb {\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n}\ninput:active::-moz-range-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\n');var r={render:function(){var e=this,r=e.$createElement;return(e._self._c||r)("input",{ref:"range",style:{"--range-width":e.rangeWidth,"--progress-color":e.progressColor,"--track-color":e.buffered?"linear-gradient(90deg, "+e.buffered.color+" "+e.buffered.width+", "+e.trackColor+" "+e.buffered.width+")":e.trackColor,"--thumb-border-radius":e.squaredThumb?"0":"50%","--thumb-border-color":e.thumbBorderColor,"--thumb-size":e.thumbSize},attrs:{type:"range",max:e.max},domProps:{value:e.value},on:{input:function(r){return e.$emit("input",r.target.value)}}})},staticRenderFns:[],props:{value:{type:Number,required:!1,default:0},rangeWidth:{type:String,required:!1,default:"100%"},progressColor:{type:String,required:!1,default:"#000c"},buffered:{type:Object,required:!1},trackColor:{type:String,required:!1,default:"#0003"},squaredThumb:{type:Boolean,required:!1,default:!1},thumbBorderColor:{type:String,required:!1,default:"#000"},thumbSize:{type:String,required:!1,default:"20px"},max:{type:Number,required:!1,default:100}},computed:{updateWebkitProgress:function(){var e=this.value/this.max*100+"%";return this.$refs.range.style.setProperty("--webkit-progress",e)}},mounted:function(){this.updateWebkitProgress},watch:{value:function(){this.updateWebkitProgress}}};function t(e){t.installed||(t.installed=!0,e.component("AesthVueRangeInput",r))}var n={install:t},o=null;return"undefined"!=typeof window?o=window.Vue:"undefined"!=typeof global&&(o=global.Vue),o&&o.use(n),e.default=r,e.install=t,Object.defineProperty(e,"__esModule",{value:!0}),e}({});

dist/aesth-vue-range-input.umd.js

@@ -1,142 +0,1 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.AesthVueRangeInput = {}));
-})(this, (function (exports) { 'use strict';
-
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) { ref = {}; }
-    var insertAt = ref.insertAt;
-
-    if (!css || typeof document === 'undefined') { return; }
-
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-      } else {
-        head.appendChild(style);
-      }
-    } else {
-      head.appendChild(style);
-    }
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
-
-  var css_248z = "\ninput {\n  position: relative;\n  -webkit-appearance: none;\n  margin: 0;\n  padding: 5px 0;\n  height: 19px;\n  width: var(--range-width);\n}\ninput:focus-visible {\n  outline: 2px solid var(--progress-color);\n}\ninput::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::before {\n  position: absolute;\n  content: \"\";\n  top: 13px;\n  left: 0;\n  width: var(--webkit-progress);\n  height: 3px;\n  background-color: var(--progress-color);\n  cursor: pointer;\n}\ninput::-webkit-slider-thumb {\n  position: relative;\n  -webkit-appearance: none;\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n  margin: calc((var(--thumb-size) / 2) - var(--thumb-size)) 0 0 0;\n}\ninput:active::-webkit-slider-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\ninput::-moz-range-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::-moz-range-progress {\n  height: 3px;\n  background-color: var(--progress-color);\n}\ninput::-moz-focus-outer {\n  border: 0;\n}\ninput::-moz-range-thumb {\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n}\ninput:active::-moz-range-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\n";
-  styleInject(css_248z);
-
-  var AesthVueRangeInput = {
-  render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{ref:"range",style:({
-      '--range-width': _vm.rangeWidth,
-      '--progress-color': _vm.progressColor,
-      '--track-color': _vm.buffered
-        ? ("linear-gradient(90deg, " + (_vm.buffered.color) + " " + (_vm.buffered.width) + ", " + _vm.trackColor + " " + (_vm.buffered.width) + ")")
-        : _vm.trackColor,
-      '--thumb-border-radius': _vm.squaredThumb ? '0' : '50%',
-      '--thumb-border-color': _vm.thumbBorderColor,
-      '--thumb-size': _vm.thumbSize,
-    }),attrs:{"type":"range","max":_vm.max},domProps:{"value":_vm.value},on:{"input":function($event){return _vm.$emit('input', $event.target.value)}}})},
-  staticRenderFns: [],
-    props: {
-      value: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      rangeWidth: {
-        type: String,
-        required: false,
-        default: "100%",
-      },
-      progressColor: {
-        type: String,
-        required: false,
-        default: "#000c",
-      },
-      buffered: {
-        type: Object,
-        required: false,
-        // default: function () {
-        //   return {
-        //     width: "50%",
-        //     color: "#0003",
-        //   };
-        // },
-      },
-      trackColor: {
-        type: String,
-        required: false,
-        default: "#0003",
-      },
-      squaredThumb: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      thumbBorderColor: {
-        type: String,
-        required: false,
-        default: "#000",
-      },
-      thumbSize: {
-        type: String,
-        required: false,
-        default: "20px",
-      },
-      max: {
-        type: Number,
-        required: false,
-        default: 100,
-      },
-    },
-    computed: {
-      updateWebkitProgress: function updateWebkitProgress() {
-        var progress = (this.value / this.max) * 100 + "%";
-        return this.$refs.range.style.setProperty("--webkit-progress", progress);
-      },
-    },
-    mounted: function mounted() {
-      this.updateWebkitProgress;
-    },
-    watch: {
-      value: function value() {
-        this.updateWebkitProgress;
-      },
-    },
-  };
-
-  function install(Vue) {
-    if (install.installed) { return; }
-    install.installed = true;
-    Vue.component("AesthVueRangeInput", AesthVueRangeInput);
-  }
-
-  var plugin = {
-    install: install,
-  };
-
-  var GlobalVue = null;
-  if (typeof window !== "undefined") {
-    GlobalVue = window.Vue;
-  } else if (typeof global !== "undefined") {
-    GlobalVue = global.Vue;
-  }
-  if (GlobalVue) {
-    GlobalVue.use(plugin);
-  }
-
-  exports["default"] = AesthVueRangeInput;
-  exports.install = install;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).AesthVueRangeInput={})}(this,(function(e){"use strict";!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('\ninput {\n  position: relative;\n  -webkit-appearance: none;\n  margin: 0;\n  padding: 5px 0;\n  height: 19px;\n  width: var(--range-width);\n}\ninput:focus-visible {\n  outline: 2px solid var(--progress-color);\n}\ninput::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::before {\n  position: absolute;\n  content: "";\n  top: 13px;\n  left: 0;\n  width: var(--webkit-progress);\n  height: 3px;\n  background-color: var(--progress-color);\n  cursor: pointer;\n}\ninput::-webkit-slider-thumb {\n  position: relative;\n  -webkit-appearance: none;\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n  margin: calc((var(--thumb-size) / 2) - var(--thumb-size)) 0 0 0;\n}\ninput:active::-webkit-slider-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\ninput::-moz-range-track {\n  width: 100%;\n  height: 3px;\n  cursor: pointer;\n  background: var(--track-color);\n}\ninput::-moz-range-progress {\n  height: 3px;\n  background-color: var(--progress-color);\n}\ninput::-moz-focus-outer {\n  border: 0;\n}\ninput::-moz-range-thumb {\n  box-sizing: content-box;\n  border: 1px solid var(--thumb-border-color);\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: var(--thumb-border-radius);\n  background-color: #fff;\n  cursor: pointer;\n}\ninput:active::-moz-range-thumb {\n  transform: scale(1.2);\n  background: var(--thumb-border-color);\n}\n');var r={render:function(){var e=this,r=e.$createElement;return(e._self._c||r)("input",{ref:"range",style:{"--range-width":e.rangeWidth,"--progress-color":e.progressColor,"--track-color":e.buffered?"linear-gradient(90deg, "+e.buffered.color+" "+e.buffered.width+", "+e.trackColor+" "+e.buffered.width+")":e.trackColor,"--thumb-border-radius":e.squaredThumb?"0":"50%","--thumb-border-color":e.thumbBorderColor,"--thumb-size":e.thumbSize},attrs:{type:"range",max:e.max},domProps:{value:e.value},on:{input:function(r){return e.$emit("input",r.target.value)}}})},staticRenderFns:[],props:{value:{type:Number,required:!1,default:0},rangeWidth:{type:String,required:!1,default:"100%"},progressColor:{type:String,required:!1,default:"#000c"},buffered:{type:Object,required:!1},trackColor:{type:String,required:!1,default:"#0003"},squaredThumb:{type:Boolean,required:!1,default:!1},thumbBorderColor:{type:String,required:!1,default:"#000"},thumbSize:{type:String,required:!1,default:"20px"},max:{type:Number,required:!1,default:100}},computed:{updateWebkitProgress:function(){var e=this.value/this.max*100+"%";return this.$refs.range.style.setProperty("--webkit-progress",e)}},mounted:function(){this.updateWebkitProgress},watch:{value:function(){this.updateWebkitProgress}}};function t(e){t.installed||(t.installed=!0,e.component("AesthVueRangeInput",r))}var n={install:t},o=null;"undefined"!=typeof window?o=window.Vue:"undefined"!=typeof global&&(o=global.Vue),o&&o.use(n),e.default=r,e.install=t,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "aesth-vue-range-input",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
@@ -54,2 +54,3 @@ "description": "a completely customizable and aesthetic vue range input component.",
     "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue2": "^0.8.1",
@@ -56,0 +57,0 @@ "vue": "^2.6.11",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

17791

decreased by-20.94%

Dev dependency count

18

increased by5.88%

Lines of code

42

decreased by-89.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes