Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@vue-a11y/dark-mode
Advanced tools
@vue-a11y/dark-mode - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
@@ -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 @@ |
@@ -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 @@ }; |
@@ -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}({}); |
@@ -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; |
| # 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. |
@@ -8,3 +8,3 @@ # Setup | ||
| ```shell | ||
| npm install @vue-a11y/dark-mode | ||
| npm install -S @vue-a11y/dark-mode | ||
| ``` | ||
@@ -11,0 +11,0 @@ |
| # 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) |
| { | ||
| "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 @@ }, |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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 riskPackage 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
- increased by0.1%
511645
- Lines of code
- increased by0.02%
11941
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes