vue-toggles 1.1.4 → 2.0.0

package/dist/vue-toggles.ssr.js

@@ -1,361 +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;
-}
-
-/* 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__ = undefined;
-  /* scoped */
-  var __vue_scope_id__ = undefined;
-  /* module identifier */
-  var __vue_module_identifier__ = undefined;
-  /* functional template */
-  var __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* 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,
-    undefined,
-    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/src/VueToggles.vue

@@ -1,183 +0,0 @@
-<template>
-  <span
-    class="vue-toggles"
-    :style="bgStyle"
-    role="switch"
-    tabindex="0"
-    :aria-checked="value ? 'true' : 'false'"
-    :aria-readonly="disabled ? 'true' : 'false'"
-    @click="!disabled ? $emit('click', value) : null"
-    @keyup.enter.prevent="!disabled ? $emit('click', value) : null"
-    @keyup.space.prevent="!disabled ? $emit('click', value) : null"
-  >
-    <span aria-hidden="true" :style="dotStyle" class="dot">
-      <span v-show="checkedText && value" :style="textStyle" class="text">
-        {{ checkedText }}
-      </span>
-
-      <span v-show="uncheckedText && !value" :style="textStyle" class="text">
-        {{ uncheckedText }}
-      </span>
-    </span>
-  </span>
-</template>
-
-<script>
-export default {
-  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() {
-      const 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() {
-      const 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() {
-      const 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;
-    },
-  },
-};
-</script>
-
-<style>
-.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;
-  }
-}
-</style>

package/src/index.d.ts

@@ -1 +0,0 @@
-declare module 'vue-toggles';

package/src/wrapper.js

@@ -1,27 +0,0 @@
-import VueToggles from './VueToggles.vue';
-
-// Declare install function executed by Vue.use()
-export function install(Vue) {
-  if (install.installed) return;
-  install.installed = true;
-  Vue.component('VueToggles', VueToggles);
-}
-
-// Create module definition for Vue.use()
-const plugin = {
-  install,
-};
-
-// Auto-install when vue is found (eg. in browser via <script> tag)
-let GlobalVue = null;
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue;
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue;
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin);
-}
-
-// To allow use as module (npm/webpack/etc.) export component
-export default VueToggles;