vue-toggles 1.1.4 → 2.0.0

package/dist/vue-toggles.esm.js

@@ -1,417 +0,0 @@
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-var script = {
-  name: 'VueToggles',
-  props: {
-    value: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    reverse: {
-      type: Boolean,
-      default: false,
-    },
-    checkedText: {
-      type: String,
-      default: null,
-    },
-    uncheckedText: {
-      type: String,
-      default: null,
-    },
-    width: {
-      type: [Number, String],
-      default: 75,
-    },
-    height: {
-      type: [Number, String],
-      default: 25,
-    },
-    uncheckedBg: {
-      type: String,
-      default: '#939393',
-    },
-    checkedBg: {
-      type: String,
-      default: '#5850ec',
-    },
-    dotColor: {
-      type: String,
-      default: '#fff',
-    },
-    fontSize: {
-      type: [Number, String],
-      default: '12',
-    },
-    checkedColor: {
-      type: String,
-      default: '#fff',
-    },
-    uncheckedColor: {
-      type: String,
-      default: '#fff',
-    },
-    fontWeight: {
-      type: [Number, String],
-      default: 'normal',
-    },
-  },
-  computed: {
-    bgStyle: function bgStyle() {
-      var styles = {
-        width: ((this.width) + "px"),
-        height: ((this.height) + "px"),
-        background: this.value ? this.checkedBg : this.uncheckedBg,
-        opacity: this.disabled ? '0.5' : '1',
-        cursor: !this.disabled ? 'pointer' : 'not-allowed',
-      };
-
-      return styles;
-    },
-    dotStyle: function dotStyle() {
-      var styles = {
-        background: this.dotColor,
-        width: ((this.height - 8) + "px"),
-        height: ((this.height - 8) + "px"),
-        'min-width': ((this.height - 8) + "px"),
-        'min-height': ((this.height - 8) + "px"),
-        'margin-left': this.value ? ((this.width - (this.height - 3)) + "px") : '5px',
-      };
-
-      if ((!this.value && this.reverse) || (this.value && !this.reverse)) {
-        styles.marginLeft = (this.width - (this.height - 3)) + "px";
-      } else if ((this.value && this.reverse) || (!this.value && !this.reverse)) {
-        styles.marginLeft = '5px';
-      }
-
-      return styles;
-    },
-    textStyle: function textStyle() {
-      var styles = {
-        'font-weight': this.fontWeight,
-        'font-size': ((this.fontSize) + "px"),
-        color: this.value && !this.disabled ? this.checkedColor : this.uncheckedColor,
-        right: this.value ? ((this.height - 3) + "px") : 'auto',
-        left: this.value ? 'auto' : ((this.height - 3) + "px"),
-      };
-
-      if (!this.value && this.reverse) {
-        styles.right = (this.height - 3) + "px";
-        styles.left = 'auto';
-      } else if (this.value && this.reverse) {
-        styles.left = (this.height - 3) + "px";
-        styles.right = 'auto';
-      }
-
-      return styles;
-    },
-  },
-};
-
-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.
-    var 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;
-    }
-    var 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
-            var originalRender = options.render;
-            options.render = function renderWithStyleInjection(h, context) {
-                hook.call(context);
-                return originalRender(h, context);
-            };
-        }
-        else {
-            // inject component registration as beforeCreate hook
-            var existing = options.beforeCreate;
-            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-        }
-    }
-    return script;
-}
-
-var isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return function (id, style) { return addStyle(id, style); };
-}
-var HEAD;
-var styles = {};
-function addStyle(id, css) {
-    var group = isOldIE ? css.media || 'default' : id;
-    var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        var code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                { style.element.setAttribute('media', css.media); }
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            var index = style.ids.size - 1;
-            var textNode = document.createTextNode(code);
-            var nodes = style.element.childNodes;
-            if (nodes[index])
-                { style.element.removeChild(nodes[index]); }
-            if (nodes.length)
-                { style.element.insertBefore(textNode, nodes[index]); }
-            else
-                { style.element.appendChild(textNode); }
-        }
-    }
-}
-
-/* script */
-var __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "span",
-    {
-      staticClass: "vue-toggles",
-      style: _vm.bgStyle,
-      attrs: {
-        role: "switch",
-        tabindex: "0",
-        "aria-checked": _vm.value ? "true" : "false",
-        "aria-readonly": _vm.disabled ? "true" : "false"
-      },
-      on: {
-        click: function($event) {
-          !_vm.disabled ? _vm.$emit("click", _vm.value) : null;
-        },
-        keyup: [
-          function($event) {
-            if (
-              !$event.type.indexOf("key") &&
-              _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
-            ) {
-              return null
-            }
-            $event.preventDefault();
-            !_vm.disabled ? _vm.$emit("click", _vm.value) : null;
-          },
-          function($event) {
-            if (
-              !$event.type.indexOf("key") &&
-              _vm._k($event.keyCode, "space", 32, $event.key, [" ", "Spacebar"])
-            ) {
-              return null
-            }
-            $event.preventDefault();
-            !_vm.disabled ? _vm.$emit("click", _vm.value) : null;
-          }
-        ]
-      }
-    },
-    [
-      _c(
-        "span",
-        {
-          staticClass: "dot",
-          style: _vm.dotStyle,
-          attrs: { "aria-hidden": "true" }
-        },
-        [
-          _c(
-            "span",
-            {
-              directives: [
-                {
-                  name: "show",
-                  rawName: "v-show",
-                  value: _vm.checkedText && _vm.value,
-                  expression: "checkedText && value"
-                }
-              ],
-              staticClass: "text",
-              style: _vm.textStyle
-            },
-            [_vm._v("\n      " + _vm._s(_vm.checkedText) + "\n    ")]
-          ),
-          _vm._v(" "),
-          _c(
-            "span",
-            {
-              directives: [
-                {
-                  name: "show",
-                  rawName: "v-show",
-                  value: _vm.uncheckedText && !_vm.value,
-                  expression: "uncheckedText && !value"
-                }
-              ],
-              staticClass: "text",
-              style: _vm.textStyle
-            },
-            [_vm._v("\n      " + _vm._s(_vm.uncheckedText) + "\n    ")]
-          )
-        ]
-      )
-    ]
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-ce3b9412_0", { source: "\n.vue-toggles {\r\n  display: flex;\r\n  align-items: center;\r\n  border-radius: 9999px;\r\n  overflow: hidden;\r\n  transition: background-color ease 0.2s, width ease 0.2s, height ease 0.2s;\n}\n.vue-toggles .dot {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  border-radius: 9999px;\r\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\r\n  transition: margin ease 0.2s;\n}\n.vue-toggles .text {\r\n  position: absolute;\r\n  font-family: inherit;\r\n  user-select: none;\r\n  white-space: nowrap;\n}\n@media all and (-ms-high-contrast: none) {\n.vue-toggles .text {\r\n    /* IE11 fix */\r\n    top: 50%;\r\n    transform: translateY(-50%);\n}\n}\n@media (prefers-reduced-motion) {\r\n  /* disable animations if user have a reduced motion setting */\n.vue-toggles,\r\n  .vue-toggles *,\r\n  .vue-toggles *::before,\r\n  .vue-toggles *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n    transition-duration: none !important;\n}\n}\r\n", map: {"version":3,"sources":["D:\\Folder\\codetemp\\vue-toggles\\src\\VueToggles.vue"],"names":[],"mappings":";AA2IA;EACA,aAAA;EACA,mBAAA;EACA,qBAAA;EACA,gBAAA;EACA,yEAAA;AACA;AAEA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,qBAAA;EACA,2EAAA;EACA,4BAAA;AACA;AAEA;EACA,kBAAA;EACA,oBAAA;EACA,iBAAA;EACA,mBAAA;AACA;AAEA;AACA;IACA,aAAA;IACA,QAAA;IACA,2BAAA;AACA;AACA;AAEA;EACA,6DAAA;AACA;;;;IAIA,0BAAA;IACA,2BAAA;IACA,oCAAA;AACA;AACA","file":"VueToggles.vue","sourcesContent":["<template>\r\n  <span\r\n    class=\"vue-toggles\"\r\n    :style=\"bgStyle\"\r\n    role=\"switch\"\r\n    tabindex=\"0\"\r\n    :aria-checked=\"value ? 'true' : 'false'\"\r\n    :aria-readonly=\"disabled ? 'true' : 'false'\"\r\n    @click=\"!disabled ? $emit('click', value) : null\"\r\n    @keyup.enter.prevent=\"!disabled ? $emit('click', value) : null\"\r\n    @keyup.space.prevent=\"!disabled ? $emit('click', value) : null\"\r\n  >\r\n    <span aria-hidden=\"true\" :style=\"dotStyle\" class=\"dot\">\r\n      <span v-show=\"checkedText && value\" :style=\"textStyle\" class=\"text\">\r\n        {{ checkedText }}\r\n      </span>\r\n\r\n      <span v-show=\"uncheckedText && !value\" :style=\"textStyle\" class=\"text\">\r\n        {{ uncheckedText }}\r\n      </span>\r\n    </span>\r\n  </span>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'VueToggles',\r\n  props: {\r\n    value: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    disabled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    reverse: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    checkedText: {\r\n      type: String,\r\n      default: null,\r\n    },\r\n    uncheckedText: {\r\n      type: String,\r\n      default: null,\r\n    },\r\n    width: {\r\n      type: [Number, String],\r\n      default: 75,\r\n    },\r\n    height: {\r\n      type: [Number, String],\r\n      default: 25,\r\n    },\r\n    uncheckedBg: {\r\n      type: String,\r\n      default: '#939393',\r\n    },\r\n    checkedBg: {\r\n      type: String,\r\n      default: '#5850ec',\r\n    },\r\n    dotColor: {\r\n      type: String,\r\n      default: '#fff',\r\n    },\r\n    fontSize: {\r\n      type: [Number, String],\r\n      default: '12',\r\n    },\r\n    checkedColor: {\r\n      type: String,\r\n      default: '#fff',\r\n    },\r\n    uncheckedColor: {\r\n      type: String,\r\n      default: '#fff',\r\n    },\r\n    fontWeight: {\r\n      type: [Number, String],\r\n      default: 'normal',\r\n    },\r\n  },\r\n  computed: {\r\n    bgStyle() {\r\n      const styles = {\r\n        width: `${this.width}px`,\r\n        height: `${this.height}px`,\r\n        background: this.value ? this.checkedBg : this.uncheckedBg,\r\n        opacity: this.disabled ? '0.5' : '1',\r\n        cursor: !this.disabled ? 'pointer' : 'not-allowed',\r\n      };\r\n\r\n      return styles;\r\n    },\r\n    dotStyle() {\r\n      const styles = {\r\n        background: this.dotColor,\r\n        width: `${this.height - 8}px`,\r\n        height: `${this.height - 8}px`,\r\n        'min-width': `${this.height - 8}px`,\r\n        'min-height': `${this.height - 8}px`,\r\n        'margin-left': this.value ? `${this.width - (this.height - 3)}px` : '5px',\r\n      };\r\n\r\n      if ((!this.value && this.reverse) || (this.value && !this.reverse)) {\r\n        styles.marginLeft = `${this.width - (this.height - 3)}px`;\r\n      } else if ((this.value && this.reverse) || (!this.value && !this.reverse)) {\r\n        styles.marginLeft = '5px';\r\n      }\r\n\r\n      return styles;\r\n    },\r\n    textStyle() {\r\n      const styles = {\r\n        'font-weight': this.fontWeight,\r\n        'font-size': `${this.fontSize}px`,\r\n        color: this.value && !this.disabled ? this.checkedColor : this.uncheckedColor,\r\n        right: this.value ? `${this.height - 3}px` : 'auto',\r\n        left: this.value ? 'auto' : `${this.height - 3}px`,\r\n      };\r\n\r\n      if (!this.value && this.reverse) {\r\n        styles.right = `${this.height - 3}px`;\r\n        styles.left = 'auto';\r\n      } else if (this.value && this.reverse) {\r\n        styles.left = `${this.height - 3}px`;\r\n        styles.right = 'auto';\r\n      }\r\n\r\n      return styles;\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style>\r\n.vue-toggles {\r\n  display: flex;\r\n  align-items: center;\r\n  border-radius: 9999px;\r\n  overflow: hidden;\r\n  transition: background-color ease 0.2s, width ease 0.2s, height ease 0.2s;\r\n}\r\n\r\n.vue-toggles .dot {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  border-radius: 9999px;\r\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\r\n  transition: margin ease 0.2s;\r\n}\r\n\r\n.vue-toggles .text {\r\n  position: absolute;\r\n  font-family: inherit;\r\n  user-select: none;\r\n  white-space: nowrap;\r\n}\r\n\r\n@media all and (-ms-high-contrast: none) {\r\n  .vue-toggles .text {\r\n    /* IE11 fix */\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion) {\r\n  /* disable animations if user have a reduced motion setting */\r\n  .vue-toggles,\r\n  .vue-toggles *,\r\n  .vue-toggles *::before,\r\n  .vue-toggles *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n    transition-duration: none !important;\r\n  }\r\n}\r\n</style>\r\n"]}, media: undefined });
-
-  };
-  /* scoped */
-  var __vue_scope_id__ = undefined;
-  /* module identifier */
-  var __vue_module_identifier__ = undefined;
-  /* functional template */
-  var __vue_is_functional_template__ = false;
-  /* style inject SSR */
-  
-  /* 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,
-    createInjector,
-    undefined,
-    undefined
-  );
-
-// Declare install function executed by Vue.use()
-function install(Vue) {
-  if (install.installed) { return; }
-  install.installed = true;
-  Vue.component('VueToggles', __vue_component__);
-}
-
-// Create module definition for Vue.use()
-var plugin = {
-  install: install,
-};
-
-// Auto-install when vue is found (eg. in browser via <script> tag)
-var GlobalVue = null;
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue;
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue;
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin);
-}
-
-export { __vue_component__ as default, install };

package/dist/vue-toggles.ssr.css

@@ -1,40 +0,0 @@
-
-.vue-toggles {
-  display: flex;
-  align-items: center;
-  border-radius: 9999px;
-  overflow: hidden;
-  transition: background-color ease 0.2s, width ease 0.2s, height ease 0.2s;
-}
-.vue-toggles .dot {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-radius: 9999px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  transition: margin ease 0.2s;
-}
-.vue-toggles .text {
-  position: absolute;
-  font-family: inherit;
-  user-select: none;
-  white-space: nowrap;
-}
-@media all and (-ms-high-contrast: none) {
-.vue-toggles .text {
-    /* IE11 fix */
-    top: 50%;
-    transform: translateY(-50%);
-}
-}
-@media (prefers-reduced-motion) {
-  /* disable animations if user have a reduced motion setting */
-.vue-toggles,
-  .vue-toggles *,
-  .vue-toggles *::before,
-  .vue-toggles *::after {
-    animation: none !important;
-    transition: none !important;
-    transition-duration: none !important;
-}
-}