@vue-a11y/dark-mode - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

.eslintrc.js

 module.exports = {
   root: true,
   env: {
+    "cypress/globals": true,
     browser: true,
@@ -8,2 +9,3 @@ node: true
   plugins: [
+    'cypress',
     'vuejs-accessibility'
@@ -10,0 +12,0 @@ ],

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+### [0.1.3](https://github.com/vue-a11y/vue-dark-mode/compare/v0.1.2...v0.1.3) (2020-05-08)
+
+
+### Bug Fixes
+
+* Update rollup plugins and build for production ([d540257](https://github.com/vue-a11y/vue-dark-mode/commit/d5402571432c216b5882c29e6ca48f363b693b1c))
+
 ### 0.1.2 (2020-05-08)
@@ -7,0 +14,0 @@

dist/vue-dark-mode.esm.js

@@ -1,1 +0,1 @@
-var e={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},storage:{type:String,default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,default:"toggle to %cm mode color"},ariaLive:{type:String,default:"%cm color mode is enabled"}},data:function(){return{elementMetaThemeColor:null,chosenMode:null,currentMode:null,listenerDark:null}},computed:{getPrefersColorScheme:function(){var e=this,r=null;return["dark","light"].forEach((function(t){e.getMediaQueryList(t).matches&&(r=t)})),r},getAriaLabel:function(){return this.ariaLabel.replace(/%cm/g,this.getNextMode)},getAriaLive:function(){return this.ariaLive.replace(/%cm/g,this.chosenMode)},getNextMode:function(){var e=this,r=this.modes.findIndex((function(r){return r===e.chosenMode}));return this.modes[r===this.modes.length-1?0:r+1]},getStorageColorMode:function(){return window[this.storage].getItem("colorMode")},isSystem:function(){return"system"===this.getStorageColorMode}},created:function(){if(this.getPrefersColorScheme&&this.isSystem)return this.currentMode=this.getPrefersColorScheme,this.setMode("system");var e=this.getStorageColorMode||this.defaultMode;this.currentMode=e,this.setMode(e)},mounted:function(){this.elementMetaThemeColor=document.querySelector('meta[name="theme-color"]'),this.listenerDark=this.getMediaQueryList("dark"),this.listenerDark.addListener(this.handlePreferColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,window[this.storage].setItem("colorMode",this.chosenMode),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme])},getMediaQueryList:function(e){return window.matchMedia("(prefers-color-scheme: "+e+")")},setMetaThemeColor:function(e){var r=this;e&&this.$nextTick((function(){r.elementMetaThemeColor&&r.elementMetaThemeColor.setAttribute("content",e)}))},handleColorModeClass:function(e){return document.documentElement.classList[e](this.currentMode+"-mode")},handlePreferColorScheme:function(e){this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=e.matches?"dark":"light",this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var r,t="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var n={};var o=e,s=function(){var e=this,r=e.$createElement,t=e._self._c||r;return t("button",{staticClass:"vue-dark-mode",attrs:{"aria-label":e.getAriaLabel,title:e.getAriaLabel},on:{click:e.toggleColorMode}},[t("span",{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{textContent:e._s(e.getAriaLive)}}),e._v(" "),e._t("default",null,{mode:e.chosenMode})],2)};s._withStripped=!0;var i=function(e,r,t,n,o,s,i,a,d,l){"boolean"!=typeof i&&(d=a,a=i,i=!1);var h,c="function"==typeof t?t.options:t;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),n&&(c._scopeId=n),s?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},c._ssrRegister=h):r&&(h=i?function(e){r.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){r.call(this,a(e))}),h)if(c.functional){var m=c.render;c.render=function(e,r){return h.call(r),m(e,r)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,h):[h]}return t}({render:s,staticRenderFns:[]},(function(e){e&&e("data-v-c87b52f4_0",{source:"\n.vue-dark-mode {\r\n  appearance: none;\r\n  background-color: transparent;\r\n  color: inherit;\r\n  border: none;\r\n  cursor: pointer;\n}\n.visually-hidden {\r\n  position: absolute;\r\n  white-space: nowrap;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  border: 0;\r\n  padding: 0;\r\n  clip: rect(0 0 0 0);\r\n  clip-path: inset(50%);\r\n  margin: -1px;\n}\r\n",map:{version:3,sources:["D:\\Work\\Projetos\\Open-source\\Github\\Organization\\vue-a11y\\repositories\\vue-dark-mode\\src\\vue-dark-mode.vue"],names:[],mappings:";AA2JA;EACA,gBAAA;EACA,6BAAA;EACA,cAAA;EACA,YAAA;EACA,eAAA;AACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;EACA,mBAAA;EACA,qBAAA;EACA,YAAA;AACA",file:"vue-dark-mode.vue",sourcesContent:["<template>\r\n  <button\r\n    :aria-label=\"getAriaLabel\"\r\n    :title=\"getAriaLabel\"\r\n    class=\"vue-dark-mode\"\r\n    @click=\"toggleColorMode\"\r\n  >\r\n    <span\r\n      class=\"visually-hidden\"\r\n      aria-live=\"assertive\"\r\n      v-text=\"getAriaLive\"\r\n    />\r\n    <slot :mode=\"chosenMode\" />\r\n  </button>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'DarkMode',\r\n\r\n  props: {\r\n    defaultMode: {\r\n      type: String,\r\n      default: 'light'\r\n    },\r\n    modes: {\r\n      type: Array,\r\n      default () {\r\n        return ['light', 'dark', 'system']\r\n      }\r\n    },\r\n    storage: {\r\n      type: String,\r\n      default: 'localStorage'\r\n    },\r\n    metaThemeColor: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    ariaLabel: {\r\n      type: String,\r\n      default: 'toggle to %cm mode color'\r\n    },\r\n    ariaLive: {\r\n      type: String,\r\n      default: '%cm color mode is enabled'\r\n    }\r\n  },\r\n\r\n  data () {\r\n    return {\r\n      elementMetaThemeColor: null,\r\n      chosenMode: null,\r\n      currentMode: null,\r\n      listenerDark: null\r\n    }\r\n  },\r\n\r\n  computed: {\r\n    getPrefersColorScheme () {\r\n      const colorSchemeTypes = ['dark', 'light']\r\n      let colorScheme = null\r\n      colorSchemeTypes.forEach(type => {\r\n        if (this.getMediaQueryList(type).matches) {\r\n          colorScheme = type\r\n        }\r\n      })\r\n      return colorScheme\r\n    },\r\n\r\n    getAriaLabel () {\r\n      return this.ariaLabel.replace(/%cm/g, this.getNextMode)\r\n    },\r\n\r\n    getAriaLive () {\r\n      return this.ariaLive.replace(/%cm/g, this.chosenMode)\r\n    },\r\n\r\n    getNextMode () {\r\n      const currentIndex = this.modes.findIndex(mode => mode === this.chosenMode)\r\n      return this.modes[currentIndex === (this.modes.length - 1) ? 0 : currentIndex + 1]\r\n    },\r\n\r\n    getStorageColorMode () {\r\n      return window[this.storage].getItem('colorMode')\r\n    },\r\n\r\n    isSystem () {\r\n      return this.getStorageColorMode === 'system'\r\n    }\r\n  },\r\n\r\n  created () {\r\n    if (this.getPrefersColorScheme && this.isSystem) {\r\n      this.currentMode = this.getPrefersColorScheme\r\n      return this.setMode('system')\r\n    }\r\n    const colorMode = this.getStorageColorMode || this.defaultMode\r\n    this.currentMode = colorMode\r\n    this.setMode(colorMode)\r\n  },\r\n\r\n  mounted () {\r\n    this.elementMetaThemeColor = document.querySelector('meta[name=\"theme-color\"]')\r\n    this.listenerDark = this.getMediaQueryList('dark')\r\n    this.listenerDark.addListener(this.handlePreferColorScheme)\r\n  },\r\n\r\n  beforeDestroy () {\r\n    this.listenerDark.removeListener(this.handlePreferColorScheme)\r\n  },\r\n\r\n  methods: {\r\n    setMode (chosenMode) {\r\n      this.chosenMode = chosenMode\r\n      window[this.storage].setItem('colorMode', this.chosenMode)\r\n      this.handleColorModeClass('add')\r\n      if (Object.keys(this.metaThemeColor).length) this.setMetaThemeColor(this.metaThemeColor[this.currentMode] || this.metaThemeColor[this.getPrefersColorScheme])\r\n    },\r\n\r\n    getMediaQueryList (type) {\r\n      return window.matchMedia(`(prefers-color-scheme: ${type})`)\r\n    },\r\n\r\n    setMetaThemeColor (color) {\r\n      if (color) {\r\n        this.$nextTick(() => {\r\n          if (this.elementMetaThemeColor) this.elementMetaThemeColor.setAttribute('content', color)\r\n        })\r\n      }\r\n    },\r\n\r\n    handleColorModeClass (action) {\r\n      return document.documentElement.classList[action](`${this.currentMode}-mode`)\r\n    },\r\n\r\n    handlePreferColorScheme (e) {\r\n      if (this.isSystem) {\r\n        this.handleColorModeClass('remove')\r\n        this.currentMode = e.matches ? 'dark' : 'light'\r\n        this.setMode('system')\r\n      }\r\n    },\r\n\r\n    toggleColorMode () {\r\n      const selectedMode = this.getNextMode\r\n      this.handleColorModeClass('remove')\r\n      this.currentMode = selectedMode === 'system' ? this.getPrefersColorScheme : selectedMode\r\n      this.setMode(selectedMode)\r\n    }\r\n  }\r\n}\r\n<\/script>\r\n\r\n<style>\r\n.vue-dark-mode {\r\n  appearance: none;\r\n  background-color: transparent;\r\n  color: inherit;\r\n  border: none;\r\n  cursor: pointer;\r\n}\r\n\r\n.visually-hidden {\r\n  position: absolute;\r\n  white-space: nowrap;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  border: 0;\r\n  padding: 0;\r\n  clip: rect(0 0 0 0);\r\n  clip-path: inset(50%);\r\n  margin: -1px;\r\n}\r\n</style>\r\n"]},media:void 0})}),o,void 0,!1,void 0,!1,(function(e){return function(e,o){return function(e,o){var s=t?o.media||"default":e,i=n[s]||(n[s]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var a=o.source;if(o.map&&(a+="\n/*# sourceURL="+o.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",o.media&&i.element.setAttribute("media",o.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(a),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var d=i.ids.size-1,l=document.createTextNode(a),h=i.element.childNodes;h[d]&&i.element.removeChild(h[d]),h.length?i.element.insertBefore(l,h[d]):i.element.appendChild(l)}}}(e,o)}}),void 0,void 0);function a(e){a.installed||(a.installed=!0,e.component("VueDarkMode",i))}"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(a);export default a;
+var e={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},storage:{type:String,default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,default:"toggle to %cm mode color"},ariaLive:{type:String,default:"%cm color mode is enabled"}},data:function(){return{elementMetaThemeColor:null,chosenMode:null,currentMode:null,listenerDark:null}},computed:{getPrefersColorScheme:function(){var e=this,t=null;return["dark","light"].forEach((function(o){e.getMediaQueryList(o).matches&&(t=o)})),t},getAriaLabel:function(){return this.ariaLabel.replace(/%cm/g,this.getNextMode)},getAriaLive:function(){return this.ariaLive.replace(/%cm/g,this.chosenMode)},getNextMode:function(){var e=this,t=this.modes.findIndex((function(t){return t===e.chosenMode}));return this.modes[t===this.modes.length-1?0:t+1]},getStorageColorMode:function(){return window[this.storage].getItem("colorMode")},isSystem:function(){return"system"===this.getStorageColorMode}},created:function(){if(this.getPrefersColorScheme&&this.isSystem)return this.currentMode=this.getPrefersColorScheme,this.setMode("system");var e=this.getStorageColorMode||this.defaultMode;this.currentMode=e,this.setMode(e)},mounted:function(){this.elementMetaThemeColor=document.querySelector('meta[name="theme-color"]'),this.listenerDark=this.getMediaQueryList("dark"),this.listenerDark.addListener(this.handlePreferColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,window[this.storage].setItem("colorMode",this.chosenMode),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme])},getMediaQueryList:function(e){return window.matchMedia("(prefers-color-scheme: "+e+")")},setMetaThemeColor:function(e){var t=this;e&&this.$nextTick((function(){t.elementMetaThemeColor&&t.elementMetaThemeColor.setAttribute("content",e)}))},handleColorModeClass:function(e){return document.documentElement.classList[e](this.currentMode+"-mode")},handlePreferColorScheme:function(e){this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=e.matches?"dark":"light",this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var t,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var n={};var r=function(e,t,o,n,r,i,s,a,d,l){"boolean"!=typeof s&&(d=a,a=s,s=!1);var c,h="function"==typeof o?o.options:o;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,r&&(h.functional=!0)),n&&(h._scopeId=n),i?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=c):t&&(c=s?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),c)if(h.functional){var u=h.render;h.render=function(e,t){return c.call(t),u(e,t)}}else{var m=h.beforeCreate;h.beforeCreate=m?[].concat(m,c):[c]}return o}({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("button",{staticClass:"vue-dark-mode",attrs:{"aria-label":e.getAriaLabel,title:e.getAriaLabel},on:{click:e.toggleColorMode}},[o("span",{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{textContent:e._s(e.getAriaLive)}}),e._v(" "),e._t("default",null,{mode:e.chosenMode})],2)},staticRenderFns:[]},(function(e){e&&e("data-v-14bf49b6_0",{source:".vue-dark-mode{appearance:none;background-color:transparent;color:inherit;border:none;cursor:pointer}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}",map:void 0,media:void 0})}),e,void 0,!1,void 0,!1,(function(e){return function(e,r){return function(e,r){var i=o?r.media||"default":e,s=n[i]||(n[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var a=r.source;if(r.map&&(a+="\n/*# sourceURL="+r.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",r.media&&s.element.setAttribute("media",r.media),void 0===t&&(t=document.head||document.getElementsByTagName("head")[0]),t.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(a),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var d=s.ids.size-1,l=document.createTextNode(a),c=s.element.childNodes;c[d]&&s.element.removeChild(c[d]),c.length?s.element.insertBefore(l,c[d]):s.element.appendChild(l)}}}(e,r)}}),void 0,void 0);function i(e){i.installed||(i.installed=!0,e.component("VueDarkMode",r))}"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(i);export default i;

dist/vue-dark-mode.min.js

@@ -1,1 +0,1 @@
-var VueDarkMode=function(e){"use strict";var r={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},storage:{type:String,default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,default:"toggle to %cm mode color"},ariaLive:{type:String,default:"%cm color mode is enabled"}},data:function(){return{elementMetaThemeColor:null,chosenMode:null,currentMode:null,listenerDark:null}},computed:{getPrefersColorScheme:function(){var e=this,r=null;return["dark","light"].forEach((function(t){e.getMediaQueryList(t).matches&&(r=t)})),r},getAriaLabel:function(){return this.ariaLabel.replace(/%cm/g,this.getNextMode)},getAriaLive:function(){return this.ariaLive.replace(/%cm/g,this.chosenMode)},getNextMode:function(){var e=this,r=this.modes.findIndex((function(r){return r===e.chosenMode}));return this.modes[r===this.modes.length-1?0:r+1]},getStorageColorMode:function(){return window[this.storage].getItem("colorMode")},isSystem:function(){return"system"===this.getStorageColorMode}},created:function(){if(this.getPrefersColorScheme&&this.isSystem)return this.currentMode=this.getPrefersColorScheme,this.setMode("system");var e=this.getStorageColorMode||this.defaultMode;this.currentMode=e,this.setMode(e)},mounted:function(){this.elementMetaThemeColor=document.querySelector('meta[name="theme-color"]'),this.listenerDark=this.getMediaQueryList("dark"),this.listenerDark.addListener(this.handlePreferColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,window[this.storage].setItem("colorMode",this.chosenMode),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme])},getMediaQueryList:function(e){return window.matchMedia("(prefers-color-scheme: "+e+")")},setMetaThemeColor:function(e){var r=this;e&&this.$nextTick((function(){r.elementMetaThemeColor&&r.elementMetaThemeColor.setAttribute("content",e)}))},handleColorModeClass:function(e){return document.documentElement.classList[e](this.currentMode+"-mode")},handlePreferColorScheme:function(e){this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=e.matches?"dark":"light",this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var t,n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var o={};var s=r,i=function(){var e=this,r=e.$createElement,t=e._self._c||r;return t("button",{staticClass:"vue-dark-mode",attrs:{"aria-label":e.getAriaLabel,title:e.getAriaLabel},on:{click:e.toggleColorMode}},[t("span",{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{textContent:e._s(e.getAriaLive)}}),e._v(" "),e._t("default",null,{mode:e.chosenMode})],2)};i._withStripped=!0;var a=function(e,r,t,n,o,s,i,a,d,l){"boolean"!=typeof i&&(d=a,a=i,i=!1);var h,c="function"==typeof t?t.options:t;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),n&&(c._scopeId=n),s?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},c._ssrRegister=h):r&&(h=i?function(e){r.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){r.call(this,a(e))}),h)if(c.functional){var m=c.render;c.render=function(e,r){return h.call(r),m(e,r)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,h):[h]}return t}({render:i,staticRenderFns:[]},(function(e){e&&e("data-v-c87b52f4_0",{source:"\n.vue-dark-mode {\r\n  appearance: none;\r\n  background-color: transparent;\r\n  color: inherit;\r\n  border: none;\r\n  cursor: pointer;\n}\n.visually-hidden {\r\n  position: absolute;\r\n  white-space: nowrap;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  border: 0;\r\n  padding: 0;\r\n  clip: rect(0 0 0 0);\r\n  clip-path: inset(50%);\r\n  margin: -1px;\n}\r\n",map:{version:3,sources:["D:\\Work\\Projetos\\Open-source\\Github\\Organization\\vue-a11y\\repositories\\vue-dark-mode\\src\\vue-dark-mode.vue"],names:[],mappings:";AA2JA;EACA,gBAAA;EACA,6BAAA;EACA,cAAA;EACA,YAAA;EACA,eAAA;AACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;EACA,mBAAA;EACA,qBAAA;EACA,YAAA;AACA",file:"vue-dark-mode.vue",sourcesContent:["<template>\r\n  <button\r\n    :aria-label=\"getAriaLabel\"\r\n    :title=\"getAriaLabel\"\r\n    class=\"vue-dark-mode\"\r\n    @click=\"toggleColorMode\"\r\n  >\r\n    <span\r\n      class=\"visually-hidden\"\r\n      aria-live=\"assertive\"\r\n      v-text=\"getAriaLive\"\r\n    />\r\n    <slot :mode=\"chosenMode\" />\r\n  </button>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'DarkMode',\r\n\r\n  props: {\r\n    defaultMode: {\r\n      type: String,\r\n      default: 'light'\r\n    },\r\n    modes: {\r\n      type: Array,\r\n      default () {\r\n        return ['light', 'dark', 'system']\r\n      }\r\n    },\r\n    storage: {\r\n      type: String,\r\n      default: 'localStorage'\r\n    },\r\n    metaThemeColor: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    ariaLabel: {\r\n      type: String,\r\n      default: 'toggle to %cm mode color'\r\n    },\r\n    ariaLive: {\r\n      type: String,\r\n      default: '%cm color mode is enabled'\r\n    }\r\n  },\r\n\r\n  data () {\r\n    return {\r\n      elementMetaThemeColor: null,\r\n      chosenMode: null,\r\n      currentMode: null,\r\n      listenerDark: null\r\n    }\r\n  },\r\n\r\n  computed: {\r\n    getPrefersColorScheme () {\r\n      const colorSchemeTypes = ['dark', 'light']\r\n      let colorScheme = null\r\n      colorSchemeTypes.forEach(type => {\r\n        if (this.getMediaQueryList(type).matches) {\r\n          colorScheme = type\r\n        }\r\n      })\r\n      return colorScheme\r\n    },\r\n\r\n    getAriaLabel () {\r\n      return this.ariaLabel.replace(/%cm/g, this.getNextMode)\r\n    },\r\n\r\n    getAriaLive () {\r\n      return this.ariaLive.replace(/%cm/g, this.chosenMode)\r\n    },\r\n\r\n    getNextMode () {\r\n      const currentIndex = this.modes.findIndex(mode => mode === this.chosenMode)\r\n      return this.modes[currentIndex === (this.modes.length - 1) ? 0 : currentIndex + 1]\r\n    },\r\n\r\n    getStorageColorMode () {\r\n      return window[this.storage].getItem('colorMode')\r\n    },\r\n\r\n    isSystem () {\r\n      return this.getStorageColorMode === 'system'\r\n    }\r\n  },\r\n\r\n  created () {\r\n    if (this.getPrefersColorScheme && this.isSystem) {\r\n      this.currentMode = this.getPrefersColorScheme\r\n      return this.setMode('system')\r\n    }\r\n    const colorMode = this.getStorageColorMode || this.defaultMode\r\n    this.currentMode = colorMode\r\n    this.setMode(colorMode)\r\n  },\r\n\r\n  mounted () {\r\n    this.elementMetaThemeColor = document.querySelector('meta[name=\"theme-color\"]')\r\n    this.listenerDark = this.getMediaQueryList('dark')\r\n    this.listenerDark.addListener(this.handlePreferColorScheme)\r\n  },\r\n\r\n  beforeDestroy () {\r\n    this.listenerDark.removeListener(this.handlePreferColorScheme)\r\n  },\r\n\r\n  methods: {\r\n    setMode (chosenMode) {\r\n      this.chosenMode = chosenMode\r\n      window[this.storage].setItem('colorMode', this.chosenMode)\r\n      this.handleColorModeClass('add')\r\n      if (Object.keys(this.metaThemeColor).length) this.setMetaThemeColor(this.metaThemeColor[this.currentMode] || this.metaThemeColor[this.getPrefersColorScheme])\r\n    },\r\n\r\n    getMediaQueryList (type) {\r\n      return window.matchMedia(`(prefers-color-scheme: ${type})`)\r\n    },\r\n\r\n    setMetaThemeColor (color) {\r\n      if (color) {\r\n        this.$nextTick(() => {\r\n          if (this.elementMetaThemeColor) this.elementMetaThemeColor.setAttribute('content', color)\r\n        })\r\n      }\r\n    },\r\n\r\n    handleColorModeClass (action) {\r\n      return document.documentElement.classList[action](`${this.currentMode}-mode`)\r\n    },\r\n\r\n    handlePreferColorScheme (e) {\r\n      if (this.isSystem) {\r\n        this.handleColorModeClass('remove')\r\n        this.currentMode = e.matches ? 'dark' : 'light'\r\n        this.setMode('system')\r\n      }\r\n    },\r\n\r\n    toggleColorMode () {\r\n      const selectedMode = this.getNextMode\r\n      this.handleColorModeClass('remove')\r\n      this.currentMode = selectedMode === 'system' ? this.getPrefersColorScheme : selectedMode\r\n      this.setMode(selectedMode)\r\n    }\r\n  }\r\n}\r\n<\/script>\r\n\r\n<style>\r\n.vue-dark-mode {\r\n  appearance: none;\r\n  background-color: transparent;\r\n  color: inherit;\r\n  border: none;\r\n  cursor: pointer;\r\n}\r\n\r\n.visually-hidden {\r\n  position: absolute;\r\n  white-space: nowrap;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  border: 0;\r\n  padding: 0;\r\n  clip: rect(0 0 0 0);\r\n  clip-path: inset(50%);\r\n  margin: -1px;\r\n}\r\n</style>\r\n"]},media:void 0})}),s,void 0,!1,void 0,!1,(function(e){return function(e,r){return function(e,r){var s=n?r.media||"default":e,i=o[s]||(o[s]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var a=r.source;if(r.map&&(a+="\n/*# sourceURL="+r.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",r.media&&i.element.setAttribute("media",r.media),void 0===t&&(t=document.head||document.getElementsByTagName("head")[0]),t.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(a),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var d=i.ids.size-1,l=document.createTextNode(a),h=i.element.childNodes;h[d]&&i.element.removeChild(h[d]),h.length?i.element.insertBefore(l,h[d]):i.element.appendChild(l)}}}(e,r)}}),void 0,void 0);function d(e){d.installed||(d.installed=!0,e.component("VueDarkMode",a))}return"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(d),e.default=d,e}({});
+var VueDarkMode=function(e){"use strict";var t={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},storage:{type:String,default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,default:"toggle to %cm mode color"},ariaLive:{type:String,default:"%cm color mode is enabled"}},data:function(){return{elementMetaThemeColor:null,chosenMode:null,currentMode:null,listenerDark:null}},computed:{getPrefersColorScheme:function(){var e=this,t=null;return["dark","light"].forEach((function(o){e.getMediaQueryList(o).matches&&(t=o)})),t},getAriaLabel:function(){return this.ariaLabel.replace(/%cm/g,this.getNextMode)},getAriaLive:function(){return this.ariaLive.replace(/%cm/g,this.chosenMode)},getNextMode:function(){var e=this,t=this.modes.findIndex((function(t){return t===e.chosenMode}));return this.modes[t===this.modes.length-1?0:t+1]},getStorageColorMode:function(){return window[this.storage].getItem("colorMode")},isSystem:function(){return"system"===this.getStorageColorMode}},created:function(){if(this.getPrefersColorScheme&&this.isSystem)return this.currentMode=this.getPrefersColorScheme,this.setMode("system");var e=this.getStorageColorMode||this.defaultMode;this.currentMode=e,this.setMode(e)},mounted:function(){this.elementMetaThemeColor=document.querySelector('meta[name="theme-color"]'),this.listenerDark=this.getMediaQueryList("dark"),this.listenerDark.addListener(this.handlePreferColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,window[this.storage].setItem("colorMode",this.chosenMode),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme])},getMediaQueryList:function(e){return window.matchMedia("(prefers-color-scheme: "+e+")")},setMetaThemeColor:function(e){var t=this;e&&this.$nextTick((function(){t.elementMetaThemeColor&&t.elementMetaThemeColor.setAttribute("content",e)}))},handleColorModeClass:function(e){return document.documentElement.classList[e](this.currentMode+"-mode")},handlePreferColorScheme:function(e){this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=e.matches?"dark":"light",this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var o,n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var r={};var i=function(e,t,o,n,r,i,s,a,d,l){"boolean"!=typeof s&&(d=a,a=s,s=!1);var c,h="function"==typeof o?o.options:o;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,r&&(h.functional=!0)),n&&(h._scopeId=n),i?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=c):t&&(c=s?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),c)if(h.functional){var u=h.render;h.render=function(e,t){return c.call(t),u(e,t)}}else{var m=h.beforeCreate;h.beforeCreate=m?[].concat(m,c):[c]}return o}({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("button",{staticClass:"vue-dark-mode",attrs:{"aria-label":e.getAriaLabel,title:e.getAriaLabel},on:{click:e.toggleColorMode}},[o("span",{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{textContent:e._s(e.getAriaLive)}}),e._v(" "),e._t("default",null,{mode:e.chosenMode})],2)},staticRenderFns:[]},(function(e){e&&e("data-v-14bf49b6_0",{source:".vue-dark-mode{appearance:none;background-color:transparent;color:inherit;border:none;cursor:pointer}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}",map:void 0,media:void 0})}),t,void 0,!1,void 0,!1,(function(e){return function(e,t){return function(e,t){var i=n?t.media||"default":e,s=r[i]||(r[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(a),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var d=s.ids.size-1,l=document.createTextNode(a),c=s.element.childNodes;c[d]&&s.element.removeChild(c[d]),c.length?s.element.insertBefore(l,c[d]):s.element.appendChild(l)}}}(e,t)}}),void 0,void 0);function s(e){s.installed||(s.installed=!0,e.component("VueDarkMode",i))}return"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(s),e.default=s,e}({});

dist/vue-dark-mode.umd.js

@@ -1,1 +0,1 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((e=e||self).VueDarkMode={})}(this,(function(e){"use strict";var r={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},storage:{type:String,default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,default:"toggle to %cm mode color"},ariaLive:{type:String,default:"%cm color mode is enabled"}},data:function(){return{elementMetaThemeColor:null,chosenMode:null,currentMode:null,listenerDark:null}},computed:{getPrefersColorScheme:function(){var e=this,r=null;return["dark","light"].forEach((function(t){e.getMediaQueryList(t).matches&&(r=t)})),r},getAriaLabel:function(){return this.ariaLabel.replace(/%cm/g,this.getNextMode)},getAriaLive:function(){return this.ariaLive.replace(/%cm/g,this.chosenMode)},getNextMode:function(){var e=this,r=this.modes.findIndex((function(r){return r===e.chosenMode}));return this.modes[r===this.modes.length-1?0:r+1]},getStorageColorMode:function(){return window[this.storage].getItem("colorMode")},isSystem:function(){return"system"===this.getStorageColorMode}},created:function(){if(this.getPrefersColorScheme&&this.isSystem)return this.currentMode=this.getPrefersColorScheme,this.setMode("system");var e=this.getStorageColorMode||this.defaultMode;this.currentMode=e,this.setMode(e)},mounted:function(){this.elementMetaThemeColor=document.querySelector('meta[name="theme-color"]'),this.listenerDark=this.getMediaQueryList("dark"),this.listenerDark.addListener(this.handlePreferColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,window[this.storage].setItem("colorMode",this.chosenMode),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme])},getMediaQueryList:function(e){return window.matchMedia("(prefers-color-scheme: "+e+")")},setMetaThemeColor:function(e){var r=this;e&&this.$nextTick((function(){r.elementMetaThemeColor&&r.elementMetaThemeColor.setAttribute("content",e)}))},handleColorModeClass:function(e){return document.documentElement.classList[e](this.currentMode+"-mode")},handlePreferColorScheme:function(e){this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=e.matches?"dark":"light",this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var t,n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var o={};var s=r,i=function(){var e=this,r=e.$createElement,t=e._self._c||r;return t("button",{staticClass:"vue-dark-mode",attrs:{"aria-label":e.getAriaLabel,title:e.getAriaLabel},on:{click:e.toggleColorMode}},[t("span",{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{textContent:e._s(e.getAriaLive)}}),e._v(" "),e._t("default",null,{mode:e.chosenMode})],2)};i._withStripped=!0;var a=function(e,r,t,n,o,s,i,a,d,l){"boolean"!=typeof i&&(d=a,a=i,i=!1);var c,h="function"==typeof t?t.options:t;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,o&&(h.functional=!0)),n&&(h._scopeId=n),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},h._ssrRegister=c):r&&(c=i?function(e){r.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){r.call(this,a(e))}),c)if(h.functional){var m=h.render;h.render=function(e,r){return c.call(r),m(e,r)}}else{var u=h.beforeCreate;h.beforeCreate=u?[].concat(u,c):[c]}return t}({render:i,staticRenderFns:[]},(function(e){e&&e("data-v-c87b52f4_0",{source:"\n.vue-dark-mode {\r\n  appearance: none;\r\n  background-color: transparent;\r\n  color: inherit;\r\n  border: none;\r\n  cursor: pointer;\n}\n.visually-hidden {\r\n  position: absolute;\r\n  white-space: nowrap;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  border: 0;\r\n  padding: 0;\r\n  clip: rect(0 0 0 0);\r\n  clip-path: inset(50%);\r\n  margin: -1px;\n}\r\n",map:{version:3,sources:["D:\\Work\\Projetos\\Open-source\\Github\\Organization\\vue-a11y\\repositories\\vue-dark-mode\\src\\vue-dark-mode.vue"],names:[],mappings:";AA2JA;EACA,gBAAA;EACA,6BAAA;EACA,cAAA;EACA,YAAA;EACA,eAAA;AACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;EACA,mBAAA;EACA,qBAAA;EACA,YAAA;AACA",file:"vue-dark-mode.vue",sourcesContent:["<template>\r\n  <button\r\n    :aria-label=\"getAriaLabel\"\r\n    :title=\"getAriaLabel\"\r\n    class=\"vue-dark-mode\"\r\n    @click=\"toggleColorMode\"\r\n  >\r\n    <span\r\n      class=\"visually-hidden\"\r\n      aria-live=\"assertive\"\r\n      v-text=\"getAriaLive\"\r\n    />\r\n    <slot :mode=\"chosenMode\" />\r\n  </button>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'DarkMode',\r\n\r\n  props: {\r\n    defaultMode: {\r\n      type: String,\r\n      default: 'light'\r\n    },\r\n    modes: {\r\n      type: Array,\r\n      default () {\r\n        return ['light', 'dark', 'system']\r\n      }\r\n    },\r\n    storage: {\r\n      type: String,\r\n      default: 'localStorage'\r\n    },\r\n    metaThemeColor: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    ariaLabel: {\r\n      type: String,\r\n      default: 'toggle to %cm mode color'\r\n    },\r\n    ariaLive: {\r\n      type: String,\r\n      default: '%cm color mode is enabled'\r\n    }\r\n  },\r\n\r\n  data () {\r\n    return {\r\n      elementMetaThemeColor: null,\r\n      chosenMode: null,\r\n      currentMode: null,\r\n      listenerDark: null\r\n    }\r\n  },\r\n\r\n  computed: {\r\n    getPrefersColorScheme () {\r\n      const colorSchemeTypes = ['dark', 'light']\r\n      let colorScheme = null\r\n      colorSchemeTypes.forEach(type => {\r\n        if (this.getMediaQueryList(type).matches) {\r\n          colorScheme = type\r\n        }\r\n      })\r\n      return colorScheme\r\n    },\r\n\r\n    getAriaLabel () {\r\n      return this.ariaLabel.replace(/%cm/g, this.getNextMode)\r\n    },\r\n\r\n    getAriaLive () {\r\n      return this.ariaLive.replace(/%cm/g, this.chosenMode)\r\n    },\r\n\r\n    getNextMode () {\r\n      const currentIndex = this.modes.findIndex(mode => mode === this.chosenMode)\r\n      return this.modes[currentIndex === (this.modes.length - 1) ? 0 : currentIndex + 1]\r\n    },\r\n\r\n    getStorageColorMode () {\r\n      return window[this.storage].getItem('colorMode')\r\n    },\r\n\r\n    isSystem () {\r\n      return this.getStorageColorMode === 'system'\r\n    }\r\n  },\r\n\r\n  created () {\r\n    if (this.getPrefersColorScheme && this.isSystem) {\r\n      this.currentMode = this.getPrefersColorScheme\r\n      return this.setMode('system')\r\n    }\r\n    const colorMode = this.getStorageColorMode || this.defaultMode\r\n    this.currentMode = colorMode\r\n    this.setMode(colorMode)\r\n  },\r\n\r\n  mounted () {\r\n    this.elementMetaThemeColor = document.querySelector('meta[name=\"theme-color\"]')\r\n    this.listenerDark = this.getMediaQueryList('dark')\r\n    this.listenerDark.addListener(this.handlePreferColorScheme)\r\n  },\r\n\r\n  beforeDestroy () {\r\n    this.listenerDark.removeListener(this.handlePreferColorScheme)\r\n  },\r\n\r\n  methods: {\r\n    setMode (chosenMode) {\r\n      this.chosenMode = chosenMode\r\n      window[this.storage].setItem('colorMode', this.chosenMode)\r\n      this.handleColorModeClass('add')\r\n      if (Object.keys(this.metaThemeColor).length) this.setMetaThemeColor(this.metaThemeColor[this.currentMode] || this.metaThemeColor[this.getPrefersColorScheme])\r\n    },\r\n\r\n    getMediaQueryList (type) {\r\n      return window.matchMedia(`(prefers-color-scheme: ${type})`)\r\n    },\r\n\r\n    setMetaThemeColor (color) {\r\n      if (color) {\r\n        this.$nextTick(() => {\r\n          if (this.elementMetaThemeColor) this.elementMetaThemeColor.setAttribute('content', color)\r\n        })\r\n      }\r\n    },\r\n\r\n    handleColorModeClass (action) {\r\n      return document.documentElement.classList[action](`${this.currentMode}-mode`)\r\n    },\r\n\r\n    handlePreferColorScheme (e) {\r\n      if (this.isSystem) {\r\n        this.handleColorModeClass('remove')\r\n        this.currentMode = e.matches ? 'dark' : 'light'\r\n        this.setMode('system')\r\n      }\r\n    },\r\n\r\n    toggleColorMode () {\r\n      const selectedMode = this.getNextMode\r\n      this.handleColorModeClass('remove')\r\n      this.currentMode = selectedMode === 'system' ? this.getPrefersColorScheme : selectedMode\r\n      this.setMode(selectedMode)\r\n    }\r\n  }\r\n}\r\n<\/script>\r\n\r\n<style>\r\n.vue-dark-mode {\r\n  appearance: none;\r\n  background-color: transparent;\r\n  color: inherit;\r\n  border: none;\r\n  cursor: pointer;\r\n}\r\n\r\n.visually-hidden {\r\n  position: absolute;\r\n  white-space: nowrap;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  border: 0;\r\n  padding: 0;\r\n  clip: rect(0 0 0 0);\r\n  clip-path: inset(50%);\r\n  margin: -1px;\r\n}\r\n</style>\r\n"]},media:void 0})}),s,void 0,!1,void 0,!1,(function(e){return function(e,r){return function(e,r){var s=n?r.media||"default":e,i=o[s]||(o[s]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var a=r.source;if(r.map&&(a+="\n/*# sourceURL="+r.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",r.media&&i.element.setAttribute("media",r.media),void 0===t&&(t=document.head||document.getElementsByTagName("head")[0]),t.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(a),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var d=i.ids.size-1,l=document.createTextNode(a),c=i.element.childNodes;c[d]&&i.element.removeChild(c[d]),c.length?i.element.insertBefore(l,c[d]):i.element.appendChild(l)}}}(e,r)}}),void 0,void 0);function d(e){d.installed||(d.installed=!0,e.component("VueDarkMode",a))}"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(d),e.default=d,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).VueDarkMode={})}(this,(function(e){"use strict";var t={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},storage:{type:String,default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,default:"toggle to %cm mode color"},ariaLive:{type:String,default:"%cm color mode is enabled"}},data:function(){return{elementMetaThemeColor:null,chosenMode:null,currentMode:null,listenerDark:null}},computed:{getPrefersColorScheme:function(){var e=this,t=null;return["dark","light"].forEach((function(o){e.getMediaQueryList(o).matches&&(t=o)})),t},getAriaLabel:function(){return this.ariaLabel.replace(/%cm/g,this.getNextMode)},getAriaLive:function(){return this.ariaLive.replace(/%cm/g,this.chosenMode)},getNextMode:function(){var e=this,t=this.modes.findIndex((function(t){return t===e.chosenMode}));return this.modes[t===this.modes.length-1?0:t+1]},getStorageColorMode:function(){return window[this.storage].getItem("colorMode")},isSystem:function(){return"system"===this.getStorageColorMode}},created:function(){if(this.getPrefersColorScheme&&this.isSystem)return this.currentMode=this.getPrefersColorScheme,this.setMode("system");var e=this.getStorageColorMode||this.defaultMode;this.currentMode=e,this.setMode(e)},mounted:function(){this.elementMetaThemeColor=document.querySelector('meta[name="theme-color"]'),this.listenerDark=this.getMediaQueryList("dark"),this.listenerDark.addListener(this.handlePreferColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,window[this.storage].setItem("colorMode",this.chosenMode),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme])},getMediaQueryList:function(e){return window.matchMedia("(prefers-color-scheme: "+e+")")},setMetaThemeColor:function(e){var t=this;e&&this.$nextTick((function(){t.elementMetaThemeColor&&t.elementMetaThemeColor.setAttribute("content",e)}))},handleColorModeClass:function(e){return document.documentElement.classList[e](this.currentMode+"-mode")},handlePreferColorScheme:function(e){this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=e.matches?"dark":"light",this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var o,n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var r={};var i=function(e,t,o,n,r,i,s,a,d,l){"boolean"!=typeof s&&(d=a,a=s,s=!1);var c,h="function"==typeof o?o.options:o;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,r&&(h.functional=!0)),n&&(h._scopeId=n),i?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=c):t&&(c=s?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),c)if(h.functional){var u=h.render;h.render=function(e,t){return c.call(t),u(e,t)}}else{var m=h.beforeCreate;h.beforeCreate=m?[].concat(m,c):[c]}return o}({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("button",{staticClass:"vue-dark-mode",attrs:{"aria-label":e.getAriaLabel,title:e.getAriaLabel},on:{click:e.toggleColorMode}},[o("span",{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{textContent:e._s(e.getAriaLive)}}),e._v(" "),e._t("default",null,{mode:e.chosenMode})],2)},staticRenderFns:[]},(function(e){e&&e("data-v-14bf49b6_0",{source:".vue-dark-mode{appearance:none;background-color:transparent;color:inherit;border:none;cursor:pointer}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}",map:void 0,media:void 0})}),t,void 0,!1,void 0,!1,(function(e){return function(e,t){return function(e,t){var i=n?t.media||"default":e,s=r[i]||(r[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(a),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var d=s.ids.size-1,l=document.createTextNode(a),c=s.element.childNodes;c[d]&&s.element.removeChild(c[d]),c.length?s.element.insertBefore(l,c[d]):s.element.appendChild(l)}}}(e,t)}}),void 0,void 0);function s(e){s.installed||(s.installed=!0,e.component("VueDarkMode",i))}"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(s),e.default=s,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@vue-a11y/dark-mode",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A component that helps you implement \"dark-mode\" in your Vue app",
@@ -51,3 +51,6 @@ "main": "dist/vue-dark-mode.umd.js",
   "devDependencies": {
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
+    "@rollup/plugin-replace": "^2.3.2",
     "@vue/eslint-config-standard": "^5.1.0",
@@ -60,3 +63,5 @@ "@vue/test-utils": "^1.0.0-beta.30",
     "chokidar": "^3.3.1",
+    "cypress": "^4.5.0",
     "eslint": "^6.8.0",
+    "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-import": "^2.20.0",
@@ -71,4 +76,2 @@ "eslint-plugin-node": "^11.0.0",
     "rollup": "^1.29.0",
-    "rollup-plugin-buble": "^0.19.8",
-    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-eslint": "^7.0.0",
@@ -75,0 +78,0 @@ "rollup-plugin-livereload": "^1.0.4",

rollup.config.dev.js

@@ -0,8 +1,8 @@
+import buble from '@rollup/plugin-buble'
+import resolve from '@rollup/plugin-node-resolve'
+import chokidar from 'chokidar'
+import { eslint } from 'rollup-plugin-eslint'
+import livereload from 'rollup-plugin-livereload'
+import serve from 'rollup-plugin-serve'
 import vue from 'rollup-plugin-vue'
-import serve from 'rollup-plugin-serve'
-import livereload from 'rollup-plugin-livereload'
-import buble from 'rollup-plugin-buble'
-import { eslint } from 'rollup-plugin-eslint'
-import chokidar from 'chokidar'
-import resolve from '@rollup/plugin-node-resolve'
 
@@ -9,0 +9,0 @@ export default {

rollup.config.prod.js

@@ -1,3 +0,4 @@
-import buble from 'rollup-plugin-buble'
-import commonjs from 'rollup-plugin-commonjs'
+import buble from '@rollup/plugin-buble'
+import commonjs from '@rollup/plugin-commonjs'
+import replace from '@rollup/plugin-replace'
 import { terser } from 'rollup-plugin-terser'
@@ -10,5 +11,11 @@ import vue from 'rollup-plugin-vue'
     commonjs(),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
     vue({
       css: true,
-      compileTemplate: true
+      compileTemplate: true,
+      template: {
+        isProduction: true
+      }
     }),
@@ -15,0 +22,0 @@ buble(),

No alert changes

Improved metrics

Number of package files

37

increased by2.78%

Worsened metrics

Total package byte prevSize

51353

decreased by-22.21%

Dev dependency count

33

increased by10%

Lines of code

264

decreased by-10.81%

No dependency changes