vue-component-media-queries/dist/index.es.js

MatchMedia component library for vue

import t from"vue";var e=function(t,e,r){return Array.isArray(e)?1===e.length&&e[0].tag?e[0]:t(r,{},e):e},r=t.extend({name:"MediaQueryProvider",props:{queries:{type:Object,required:!0},fallback:[String,Array],wrapperTag:{type:String,default:"span"},ssr:{type:Boolean}},provide:function(){return{mediaQueries:this.mediaQueries}},data:function(){var t={},e=this.fallback,r=this.queries;return Object.keys(r).forEach((function(e){t[e]=!1})),e&&(Array.isArray(e)?e.forEach((function(e){t[e]=!0})):t[e]=!0),{mediaQueries:t,matchers:[]}},beforeMount:function(){this.ssr||this.$nuxt||this.bootstrap()},mounted:function(){(this.ssr||this.$nuxt)&&this.bootstrap()},beforeDestroy:function(){this.matchers.forEach((function(t){var e=t[0],r=t[1];e.removeListener(r)}))},methods:{bootstrap:function(){var e=this,r=this.queries,i=this.mediaQueries,s=function(s){var n=r[s],o=window.matchMedia(n),h=function(r){e.$emit("change:"+s,r),t.set(i,s,r.matches)};o.addListener(h),t.set(i,s,o.matches),a.matchers.push([o,h])},a=this;for(var n in r)s(n)}},render:function(t){return e(t,this.$slots.default,this.wrapperTag)}}),i=t.extend({name:"MatchMedia",inject:{mediaQueries:{default:null}},props:{query:{type:String},fallback:{type:Boolean},wrapperTag:{type:String,default:"span"},ssr:{type:Boolean}},data:function(){return{matcher:null,matches:this.fallback}},beforeMount:function(){this.ssr||this.$nuxt||this.bootstrap()},mounted:function(){(this.ssr||this.$nuxt)&&this.bootstrap()},beforeDestroy:function(){this.matcher&&(this.matcher.removeListener(this.onMedia),this.matcher=null)},methods:{bootstrap:function(){if(this.query){var t=this.matcher=window.matchMedia(this.query);t.addListener(this.onMedia),this.matches=t.matches}},onMedia:function(t){this.$emit("change",t),this.matches=t.matches}},computed:{slotProps:function(){return this.query?{matches:this.matches}:(this.mediaQueries||console.error("\n            [vue-component-media-queries]:\n            <MatchMedia /> should be a descendant of a <MediaQueryProvider /> component tree or have a 'query' prop.\n          "),this.mediaQueries)}},render:function(t){return e(t,this.$scopedSlots.default(this.slotProps),this.wrapperTag)}});export{i as MatchMedia,r as MediaQueryProvider};