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

Comparing version 1.0.0 to 1.0.1

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+### [1.0.1](https://github.com/vue-a11y/vue-dark-mode/compare/v1.0.0...v1.0.1) (2020-06-11)
+
+
+### Bug Fixes
+
+* Use selector in favicon prop ([68626a7](https://github.com/vue-a11y/vue-dark-mode/commit/68626a7cd71142f90c9c94f6fe1f577430192580))
+
 ## [1.0.0](https://github.com/vue-a11y/vue-dark-mode/compare/v0.2.0...v1.0.0) (2020-06-10)
@@ -7,0 +14,0 @@

dist/vue-dark-mode.esm.js

@@ -56,4 +56,4 @@ var storage = function (storage) {
     favicon: {
-      type: Boolean,
-      default: true
+      type: [String, Boolean],
+      default: 'link[rel="icon"]'
     }
@@ -159,5 +159,7 @@ },
     toggleFavicon: function toggleFavicon (mode) {
+      var this$1 = this;
+
       if (!this.favicon) { return }
       this.$nextTick(function () {
-        var favicon = document.querySelector('link[rel="icon"]');
+        var favicon = document.querySelector(this$1.favicon);
         if (!favicon) { return }
@@ -334,3 +336,3 @@ var href = favicon.getAttribute('href');
     if (!inject) { return }
-    inject("data-v-05828192_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-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 });
 
@@ -337,0 +339,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:Boolean,default:!0}},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){this.favicon&&this.$nextTick((function(){var t=document.querySelector('link[rel="icon"]');if(t){var o=t.getAttribute("href"),r=o.substr(-4,4),n="-dark"+r;t.setAttribute("href","light"===e?o.replace(n,r):o.replace(r,n))}}))},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-05828192_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}},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}({});

dist/vue-dark-mode.ssr.js

@@ -60,4 +60,4 @@ 'use strict';
     favicon: {
-      type: Boolean,
-      default: true
+      type: [String, Boolean],
+      default: 'link[rel="icon"]'
     }
@@ -163,5 +163,7 @@ },
     toggleFavicon: function toggleFavicon (mode) {
+      var this$1 = this;
+
       if (!this.favicon) { return }
       this.$nextTick(function () {
-        var favicon = document.querySelector('link[rel="icon"]');
+        var favicon = document.querySelector(this$1.favicon);
         if (!favicon) { return }
@@ -327,3 +329,3 @@ var href = favicon.getAttribute('href');
     if (!inject) { return }
-    inject("data-v-05828192_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-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 });
 
@@ -334,3 +336,3 @@ };
   /* module identifier */
-  var __vue_module_identifier__ = "data-v-05828192";
+  var __vue_module_identifier__ = "data-v-27162d55";
   /* functional template */
@@ -337,0 +339,0 @@ var __vue_is_functional_template__ = false;

docs/guide/favicon.md

 # Favicon
 
-| prop        | Type      | default
-| ----------- | --------- | ---------- 
-| `favicon`   | Boolean   | `true`
+| prop        | Type                    | default               |  Description
+| ----------- | ----------------------- | --------------------- | ------------------------ 
+| `favicon`   | `String` \| `Boolean`   | `link[rel="icon"]`    | You can define the selector of the desired favicon (e.g. `#favicon`) or to disable this functionality, just by setting it to `false`.
 
@@ -34,3 +34,3 @@ You can switch the favicon according to the `prefers-color-scheme`.
 
-If the user has defined in his `dark` operating system as color mode preference for applications. `@vue-a11y/dark-mode` will identify and make the change to your favicon.
+If the user has defined in his `dark` operating system as color mode preference for applications, `@vue-a11y/dark-mode` will identify and make the change to your favicon.
 
@@ -37,0 +37,0 @@ e.g.

docs/guide/README.md

@@ -8,3 +8,3 @@ # Setup
 ```shell
-npm install @vue-a11y/dark-mode
+npm install -S @vue-a11y/dark-mode
 ```
@@ -11,0 +11,0 @@

docs/howto/nuxt.md

 # Nuxt.js
 
-The `@vue-a11y/dark-mode` is an option for SPA and static apps Vue.js, it does not currently support SSR.
-
-The good news is that Nuxt.js already has an incredible color mode module (`@nuxtjs/color-mode`) that you can find here: [https://github.com/nuxt-community/color-mode-module](https://github.com/nuxt-community/color-mode-module)
+Nuxt.js already has an incredible color mode module (`@nuxtjs/color-mode`) that you can find here: [https://github.com/nuxt-community/color-mode-module](https://github.com/nuxt-community/color-mode-module)

package.json

 {
   "name": "@vue-a11y/dark-mode",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A component that helps you implement \"dark-mode\" in your Vue app",
@@ -86,3 +86,3 @@ "main": "dist/vue-dark-mode.ssr.js",
     "vuepress": "^1.5.0",
-    "vuepress-theme-default-vue-a11y": "^0.1.11",
+    "vuepress-theme-default-vue-a11y": "^0.1.13",
     "watchpack": "^1.6.1"
@@ -89,0 +89,0 @@ },

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

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

511645

increased by0.1%

Lines of code

11941

increased by0.02%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes