vue-responsiveness
Version:
A tiny, performant, and intuitive Vue 3 plugin for working with responsive breakpoints and media queries at runtime.
2 lines (1 loc) • 3.12 kB
JavaScript
(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(n=typeof globalThis<"u"?globalThis:n||self,r(n.VueResponsiveness={},n.Vue))})(this,function(n,r){"use strict";const x={Ant_Design:{xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1600},Bootstrap_3:{xs:0,sm:576,lg:992},Bootstrap_4:{xs:0,sm:576,md:768,lg:992,xl:1200},Bootstrap_5:{xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1400},Bulma:{mobile:0,tablet:769,desktop:1024,widescreen:1216,fullhd:1408},Chakra:{xs:0,sm:480,md:768,lg:992,xl:1280,"2xl":1472},Foundation:{small:0,medium:640,large:1024,xlarge:1200,xxlarge:1440},Ionic:{xs:0,sm:576,md:768,lg:992,xl:1200},Master_CSS:{"3xs":360,"2xs":480,xs:600,sm:768,md:1024,lg:1280,xl:1440,"2xl":1600,"3xl":1920,"4xl":2560},Material_Design:{xs:0,sm_8:600,sm_12:905,md:1240,lg:1440},Materialize:{s:0,m:600,l:992,xl:1200},Material_UI:{xs:0,sm:600,md:960,lg:1260,xl:1920},Quasar:{xs:0,sm:600,md:1024,lg:1440,xl:1920},Semantic_UI:{mobile:0,tablet:768,small_monitor:992,large_monitor:1200},Skeleton:{mobile:0,phablet:400,tablet:550,desktop:750,desktop_hd:1e3,desktop_hd_lg:1200},Tailwind_CSS:{xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536},Vuetify:{xs:0,sm:600,md:960,lg:1280,xl:1920},Windi_CSS:{xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536}};let t;const h={install(g,b=x.Bootstrap_5){const d=Object.entries(b).sort(([,s],[,e])=>Number(s)-Number(e)).reduce((s,[e,l],i,o)=>{var a;return s[e]={min:l?`(min-width: ${l}px)`:"",max:(a=o[i+1])!=null&&a[1]?`(max-width: ${o[i+1][1]-.1}px)`:""},s},{});t=r.reactive({isMin:r.computed(()=>s=>{var e;return((e=t[s])==null?void 0:e.min)||!1}),isMax:r.computed(()=>s=>{var e;return((e=t[s])==null?void 0:e.max)||!1}),isOnly:r.computed(()=>s=>{var e;return((e=t[s])==null?void 0:e.only)||!1}),current:r.computed(()=>Object.keys(d).find(s=>t[s].only)||""),hover:"hover",orientation:"landscape",prefers:{colorScheme:"light",contrast:"no-preference",reducedMotion:"no-preference"},...Object.keys(d).reduce((s,e)=>(s[e]={min:!1,max:!1,only:!1},s),{})}),typeof window<"u"&&(Object.entries(d).forEach(([e,l])=>{const i={min:window.matchMedia(l.min),max:window.matchMedia(l.max)};Object.entries(i).forEach(([o,a])=>{const c=({matches:m})=>{const{min:f,max:p}={...t[e],[o]:m};t[e]={min:f,max:p,only:f&&p}};a.addEventListener("change",c),c(a)})}),[["orientation",["portrait","landscape"]],["hover",["none","hover"]],["prefers-color-scheme",["dark","light"],"colorScheme"],["prefers-contrast",["more","less","custom","no-preference"],"contrast"],["prefers-reduced-motion",["reduce","no-preference"],"reducedMotion"]].forEach(([e,l,i])=>{l.forEach(o=>{const a=window.matchMedia(`(${e}: ${o})`),c=m=>{if(m.matches)switch(e){case"orientation":{t[e]=o;break}case"hover":{t[e]=o;break}default:switch(i){case"colorScheme":t.prefers[i]=o;break;case"contrast":t.prefers[i]=o;break;case"reducedMotion":t.prefers[i]=o;break}}};a.addEventListener("change",c),c(a)})})),g.config.globalProperties.$matches=t}},u=()=>t;n.Presets=x,n.VueResponsiveness=h,n.useMatches=u,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});