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

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [1.1.0](https://github.com/vue-a11y/vue-dark-mode/compare/v1.0.1...v1.1.0) (2020-06-23)
+
+
+### Features
+
+* Modify color mode when the defaultMode prop changes ([5604170](https://github.com/vue-a11y/vue-dark-mode/commit/560417083ec95adca1ba0b36eb3b1ab3bd31555e))
+
 ### [1.0.1](https://github.com/vue-a11y/vue-dark-mode/compare/v1.0.0...v1.0.1) (2020-06-11)
@@ -7,0 +14,0 @@

dist/vue-dark-mode.esm.js

@@ -114,2 +114,6 @@ var storage = function (storage) {
 
+  watch: {
+    defaultMode: 'handleSetMode'
+  },
+
   created: function created () {
@@ -190,2 +194,6 @@ if (this.getPrefersColorScheme && this.isSystem) {
       var selectedMode = this.getNextMode;
+      this.handleSetMode(selectedMode);
+    },
+
+    handleSetMode: function handleSetMode (selectedMode) {
       this.handleColorModeClass('remove');
@@ -336,3 +344,3 @@ this.currentMode = selectedMode === 'system' ? this.getPrefersColorScheme : selectedMode;
     if (!inject) { return }
-    inject("data-v-27162d55_0", { source: ".vue-dark-mode{appearance:none;-webkit-appearance:none;-moz-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: undefined, media: undefined });
+    inject("data-v-18a1fd71_0", { source: ".vue-dark-mode{appearance:none;-webkit-appearance:none;-moz-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: undefined, media: undefined });
 
@@ -339,0 +347,0 @@ };

dist/vue-dark-mode.min.js

@@ -1,1 +0,1 @@
-var VueDarkMode=function(e){"use strict";function t(e){return window.matchMedia("(prefers-color-scheme: "+e+")")}var o={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},className:{type:String,validator:function(e){return e.includes("%cm")},default:"%cm-mode"},storage:{type:[String,Object],validator:function(e){return"string"==typeof e?["localStorage","sessionStorage"].includes(e):Object.keys(e).every((function(e){return["getItem","setItem"].includes(e)}))},default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,validator:function(e){return e.includes("%cm")},default:"toggle to %cm mode color"},ariaLive:{type:String,validator:function(e){return e.includes("%cm")},default:"%cm color mode is enabled"},favicon:{type:[String,Boolean],default:'link[rel="icon"]'}},data:function(){return{chosenMode:null,currentMode:null,listenerDark:null,metaThemeColorElement:null}},computed:{getPrefersColorScheme:function(){if(this.$isServer)return this.getStorage.getItem("colorModePrefer");var e=null;return["dark","light"].forEach((function(o){t(o).matches&&(e=o)})),e},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]},getStorage:function(){return"string"!=typeof this.storage?this.storage:!this.$isServer&&function(e){return{getItem:function(t){return window[e].getItem(t)},setItem:function(t,o){return window[e].setItem(t,o)}}}(this.storage)},getStorageColorMode:function(){return this.getStorage?this.getStorage.getItem("colorMode"):this.defaultMode},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.metaThemeColorElement=document.querySelector('meta[name="theme-color"]'),this.listenerDark=t("dark"),this.listenerDark.addListener(this.handlePreferColorScheme),this.toggleFavicon(this.getPrefersColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,this.getStorage&&(this.getStorage.setItem("colorMode",this.chosenMode),"system"===this.chosenMode&&this.getStorage.setItem("colorModePrefer",this.getPrefersColorScheme)),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme]),this.$emit("change-mode",this.chosenMode)},setMetaThemeColor:function(e){var t=this;e&&this.$nextTick((function(){t.metaThemeColorElement&&t.metaThemeColorElement.setAttribute("content",e)}))},toggleFavicon:function(e){var t=this;this.favicon&&this.$nextTick((function(){var o=document.querySelector(t.favicon);if(o){var r=o.getAttribute("href"),n=r.substr(-4,4),i="-dark"+n;o.setAttribute("href","light"===e?r.replace(i,n):r.replace(n,i))}}))},handleColorModeClass:function(e){var t=""+this.className.replace(/%cm/g,this.currentMode);if(!this.$isServer)return document.documentElement.classList[e](t);this.$ssrContext.colorModeClass="system"===this.currentMode?""+this.className.replace(/%cm/g,this.getPrefersColorScheme):t},handlePreferColorScheme:function(e){var t=e.matches?"dark":"light";this.toggleFavicon(t),this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=t,this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var r,n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var i={};var s=function(e,t,o,r,n,i,s,a,l,d){"boolean"!=typeof s&&(l=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,n&&(h.functional=!0)),r&&(h._scopeId=r),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,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=c):t&&(c=s?function(e){t.call(this,d(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-27162d55_0",{source:".vue-dark-mode{appearance:none;-webkit-appearance:none;-moz-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})}),o,void 0,!1,void 0,!1,(function(e){return function(e,t){return function(e,t){var o=n?t.media||"default":e,s=i[o]||(i[o]={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===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(a),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,d=document.createTextNode(a),c=s.element.childNodes;c[l]&&s.element.removeChild(c[l]),c.length?s.element.insertBefore(d,c[l]):s.element.appendChild(d)}}}(e,t)}}),void 0,void 0);function a(e){a.installed||(a.installed=!0,e.component("DarkMode",s))}return"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(a),e.DarkMode=s,e.default=a,e}({});
+var VueDarkMode=function(e){"use strict";function t(e){return window.matchMedia("(prefers-color-scheme: "+e+")")}var o={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},className:{type:String,validator:function(e){return e.includes("%cm")},default:"%cm-mode"},storage:{type:[String,Object],validator:function(e){return"string"==typeof e?["localStorage","sessionStorage"].includes(e):Object.keys(e).every((function(e){return["getItem","setItem"].includes(e)}))},default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,validator:function(e){return e.includes("%cm")},default:"toggle to %cm mode color"},ariaLive:{type:String,validator:function(e){return e.includes("%cm")},default:"%cm color mode is enabled"},favicon:{type:[String,Boolean],default:'link[rel="icon"]'}},data:function(){return{chosenMode:null,currentMode:null,listenerDark:null,metaThemeColorElement:null}},computed:{getPrefersColorScheme:function(){if(this.$isServer)return this.getStorage.getItem("colorModePrefer");var e=null;return["dark","light"].forEach((function(o){t(o).matches&&(e=o)})),e},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]},getStorage:function(){return"string"!=typeof this.storage?this.storage:!this.$isServer&&function(e){return{getItem:function(t){return window[e].getItem(t)},setItem:function(t,o){return window[e].setItem(t,o)}}}(this.storage)},getStorageColorMode:function(){return this.getStorage?this.getStorage.getItem("colorMode"):this.defaultMode},isSystem:function(){return"system"===this.getStorageColorMode}},watch:{defaultMode:"handleSetMode"},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.metaThemeColorElement=document.querySelector('meta[name="theme-color"]'),this.listenerDark=t("dark"),this.listenerDark.addListener(this.handlePreferColorScheme),this.toggleFavicon(this.getPrefersColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,this.getStorage&&(this.getStorage.setItem("colorMode",this.chosenMode),"system"===this.chosenMode&&this.getStorage.setItem("colorModePrefer",this.getPrefersColorScheme)),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme]),this.$emit("change-mode",this.chosenMode)},setMetaThemeColor:function(e){var t=this;e&&this.$nextTick((function(){t.metaThemeColorElement&&t.metaThemeColorElement.setAttribute("content",e)}))},toggleFavicon:function(e){var t=this;this.favicon&&this.$nextTick((function(){var o=document.querySelector(t.favicon);if(o){var r=o.getAttribute("href"),n=r.substr(-4,4),i="-dark"+n;o.setAttribute("href","light"===e?r.replace(i,n):r.replace(n,i))}}))},handleColorModeClass:function(e){var t=""+this.className.replace(/%cm/g,this.currentMode);if(!this.$isServer)return document.documentElement.classList[e](t);this.$ssrContext.colorModeClass="system"===this.currentMode?""+this.className.replace(/%cm/g,this.getPrefersColorScheme):t},handlePreferColorScheme:function(e){var t=e.matches?"dark":"light";this.toggleFavicon(t),this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=t,this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleSetMode(e)},handleSetMode:function(e){this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var r,n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var i={};var s=function(e,t,o,r,n,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,n&&(h.functional=!0)),r&&(h._scopeId=r),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-18a1fd71_0",{source:".vue-dark-mode{appearance:none;-webkit-appearance:none;-moz-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})}),o,void 0,!1,void 0,!1,(function(e){return function(e,t){return function(e,t){var o=n?t.media||"default":e,s=i[o]||(i[o]={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===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.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 a(e){a.installed||(a.installed=!0,e.component("DarkMode",s))}return"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(a),e.DarkMode=s,e.default=a,e}({});

dist/vue-dark-mode.ssr.js

@@ -118,2 +118,6 @@ 'use strict';
 
+  watch: {
+    defaultMode: 'handleSetMode'
+  },
+
   created: function created () {
@@ -194,2 +198,6 @@ if (this.getPrefersColorScheme && this.isSystem) {
       var selectedMode = this.getNextMode;
+      this.handleSetMode(selectedMode);
+    },
+
+    handleSetMode: function handleSetMode (selectedMode) {
       this.handleColorModeClass('remove');
@@ -329,3 +337,3 @@ this.currentMode = selectedMode === 'system' ? this.getPrefersColorScheme : selectedMode;
     if (!inject) { return }
-    inject("data-v-27162d55_0", { source: ".vue-dark-mode{appearance:none;-webkit-appearance:none;-moz-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: undefined, media: undefined });
+    inject("data-v-18a1fd71_0", { source: ".vue-dark-mode{appearance:none;-webkit-appearance:none;-moz-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: undefined, media: undefined });
 
@@ -336,3 +344,3 @@ };
   /* module identifier */
-  var __vue_module_identifier__ = "data-v-27162d55";
+  var __vue_module_identifier__ = "data-v-18a1fd71";
   /* functional template */
@@ -339,0 +347,0 @@ var __vue_is_functional_template__ = false;

package.json

 {
   "name": "@vue-a11y/dark-mode",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A component that helps you implement \"dark-mode\" in your Vue app",
@@ -5,0 +5,0 @@ "main": "dist/vue-dark-mode.ssr.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

512459

increased by0.16%

Lines of code

11954

increased by0.11%

No dependency changes