vue-viewports 3.1.2 → 4.0.0

package/README.md

@@ -1,73 +1,146 @@
 # vue-viewports
 
-> define your custom viewports and use them in your components
+> Named, reactive, `matchMedia`-based viewport breakpoints for Vue 3 — a tiny plugin **and** composable.
 
-## Features
+[![npm version](https://img.shields.io/npm/v/vue-viewports.svg)](https://www.npmjs.com/package/vue-viewports)
+[![CI](https://github.com/scaccogatto/vue-viewports/actions/workflows/ci.yml/badge.svg)](https://github.com/scaccogatto/vue-viewports/actions/workflows/ci.yml)
+[![minzipped size](https://img.shields.io/bundlephobia/minzip/vue-viewports)](https://bundlephobia.com/package/vue-viewports)
+[![license](https://img.shields.io/npm/l/vue-viewports.svg)](./LICENSE)
 
-- Uses [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
-- Exposes a fully updated viewport name
+Define your breakpoints once, get the **current viewport** reactively in every component. No resize listeners, no debouncing — it is backed by the browser's [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and updates only when a breakpoint is actually crossed.
 
-## Installation
+- **Reactive everywhere** — the current viewport is a shared `ref`; templates, `computed`, and `watch` all update automatically.
+- **Two APIs** — a Vue plugin (`$currentViewport` on every component) and a `useViewport()` composable.
+- **Typed** — ships first-class TypeScript types and a single bundled `.d.ts`.
+- **Tiny & zero-dependency** — < 1 kB gzipped, `vue` is the only (peer) dependency.
+- **ESM + CJS** — works with Vite and bundlers.
 
-### npm
+## Installation
 
 ```shell
-npm install vue-viewports --save-dev
+npm install vue-viewports
 ```
 
-### Vue's main.js
+Requires **Vue 3.3+**.
+
+## Usage
+
+### Composable (`<script setup>`)
 
-```js
+```vue
+<script setup lang="ts">
+import { useViewport } from 'vue-viewports'
+
+const viewport = useViewport()
+// viewport.value is { rule, label } | undefined
+</script>
+
+<template>
+  <p>Current viewport: {{ viewport?.label ?? 'unknown' }}</p>
+  <DesktopNav v-if="viewport?.label === 'desktop'" />
+  <MobileNav v-else />
+</template>
+```
+
+`useViewport()` returns a `readonly` ref. It lazily initializes the [default breakpoints](#default-breakpoints) on first use, so it works without the plugin. The value is `undefined` while no breakpoint matches (e.g. a width below the smallest `rule`).
+
+### Plugin
+
+Install the plugin to expose `$currentViewport` on every component and to register your own breakpoints app-wide.
+
+```ts
+import { createApp } from 'vue'
 import VueViewports from 'vue-viewports'
+import App from './App.vue'
+
+createApp(App)
+  .use(VueViewports) // default breakpoints
+  .mount('#app')
+```
 
-const options = [
-  {
-    rule: '320px',
-    label: 'mobile'
-  },
-  {
-    rule: '768px',
-    label: 'tablet'
-  },
-  {
-    rule: '1024px',
-    label: 'desktop'
-  },
-  {
-    rule: '1920px',
-    label: 'hd-desktop'
-  },
-  {
-    rule: '2560px',
-    label: 'qhd-desktop'
-  },
-  {
-    rule: '3840px',
-    label: 'uhd-desktop'
-  }
-]
-
-Vue.use(VueViewports, options)
+With custom breakpoints:
+
+```ts
+createApp(App)
+  .use(VueViewports, [
+    { rule: '600px', label: 'small' },
+    { rule: '900px', label: 'medium' },
+    { rule: '1200px', label: 'large' },
+  ])
+  .mount('#app')
+```
+
+Then, in any component:
+
+```vue
+<template>
+  <header :class="$currentViewport?.label">…</header>
+</template>
 ```
 
-### Arguments
+The plugin is **authoritative**: installing it (re)configures the shared state, overriding any defaults a composable may have lazily set up.
 
-- options [optional]: object defining a set of `{ rule: value, label: value }` where 'rule' is the number value where the viewport starts (included) and the 'label' is the viewport's name, **defaults** on previous example
+### Custom breakpoints with the composable
 
-## Example
+You can also configure breakpoints without the plugin by calling `setupViewports` once (e.g. in your entry file):
+
+```ts
+import { setupViewports } from 'vue-viewports'
+
+setupViewports([{ rule: '600px', label: 'small' }, { rule: '1200px', label: 'large' }])
+```
 
-```js
-{
-  if (this.$currentViewport.label === 'tablet') {
-    // from 768px (included) to 1024px (excluded)
-  } else {
-    // anything else
-  }
+## API
+
+| Export | Description |
+| --- | --- |
+| `default` / `VueViewports` | Vue 3 plugin. `app.use(VueViewports, viewports?)`. |
+| `useViewport()` | Composable returning `Readonly<Ref<ViewportMatch \| undefined>>`. |
+| `setupViewports(viewports?)` | Imperatively (re)configure breakpoints; returns a teardown function. Idempotent. |
+| `defaultViewports` | The built-in breakpoints. |
+| `toMediaQuery(rule)` | `'768px'` → `'(min-width: 768px)'`. |
+| `computeMatch(viewports)` | Pure-ish helper: the largest currently matching viewport. |
+| `viewportInjectionKey` | `InjectionKey` for the readonly ref provided by the plugin. |
+| `$currentViewport` | Component property added by the plugin: `ViewportMatch \| undefined`. |
+
+### Types
+
+```ts
+interface ViewportConfig {
+  readonly rule: string // CSS length used as `min-width`, e.g. '768px'
+  readonly label: string // your name for the viewport, e.g. 'tablet'
 }
+type ViewportMatch = ViewportConfig
+type ViewportConfigList = readonly ViewportConfig[]
 ```
 
-## Variables
+`rule` is the width at which the viewport **starts** (inclusive); the matching viewport is the largest one whose `min-width` is satisfied.
+
+### Default breakpoints
+
+| label | starts at (`min-width`) |
+| --- | --- |
+| `mobile` | `320px` |
+| `tablet` | `768px` |
+| `desktop` | `1024px` |
+| `hd-desktop` | `1920px` |
+| `qhd-desktop` | `2560px` |
+| `uhd-desktop` | `3840px` |
+
+## Migrating from v3 (Vue 2)
+
+`v4` is a full Vue 3 + TypeScript rewrite. The old `v3.x` line (Vue 2) remains installable for legacy projects: `npm install vue-viewports@3`.
+
+| v3.x (Vue 2) | v4 (Vue 3) |
+| --- | --- |
+| `Vue.use(VueViewports, options)` | `createApp(App).use(VueViewports, options)` |
+| `this.$currentViewport` | `this.$currentViewport` (unchanged) or `useViewport()` |
+| Object getters `{ rule, label }` | Plain reactive `{ rule, label }` object |
+| Not reactive ([#6](https://github.com/scaccogatto/vue-viewports/issues/6)) | Fully reactive (`ref`-backed) |
+| Bundled a `matchMedia` polyfill | Uses the native `matchMedia` API |
+
+The `options` shape (`[{ rule, label }]`) is unchanged, so most apps only need to swap `Vue.use` for `createApp(...).use`.
 
-- `$currentViewport`: the current viewport object, defined by `rule`, `label`; `undefined` if no match.
+## License
 
-> Feel free to contribute and ask questions!
+[MIT](./LICENSE) © Marco Boffo

package/dist/composable.d.ts

@@ -0,0 +1,16 @@
+import { DeepReadonly, Ref } from 'vue';
+import { ViewportMatch } from './types';
+/**
+ * Reactive access to the current viewport from any component.
+ *
+ * ```ts
+ * const viewport = useViewport()
+ * watchEffect(() => console.log(viewport.value?.label))
+ * ```
+ *
+ * If the {@link VueViewports} plugin has been installed, this returns the state
+ * configured there. Otherwise it lazily initializes the default breakpoints on
+ * first call (no-op during SSR). The value is `undefined` until the first match
+ * is computed and whenever no viewport matches.
+ */
+export declare const useViewport: () => DeepReadonly<Ref<ViewportMatch | undefined>>;

package/dist/core.d.ts

@@ -0,0 +1,33 @@
+import { DeepReadonly, Ref } from 'vue';
+import { ViewportConfig, ViewportConfigList, ViewportMatch } from './types';
+/**
+ * Sensible default breakpoints, ordered from smallest to largest.
+ * Override them by passing your own list to the plugin or composable.
+ */
+export declare const defaultViewports: ViewportConfigList;
+/** `'768px'` -> `'(min-width: 768px)'`. */
+export declare const toMediaQuery: (rule: string) => string;
+/**
+ * The largest viewport whose `min-width` currently matches, or `undefined`
+ * when none match. Pure with respect to its input: reads only `matchMedia`.
+ */
+export declare const computeMatch: (viewports: ViewportConfigList) => ViewportMatch | undefined;
+/**
+ * Register `matchMedia` listeners for every viewport and keep
+ * {@link currentViewport} in sync. Idempotent: tears down any previous setup
+ * first. Returns a teardown function that removes the listeners.
+ */
+export declare const setupViewports: (viewports?: ViewportConfigList) => (() => void);
+/**
+ * Lazily set up the default viewports on first read from a composable, but
+ * only if a plugin (which is authoritative) has not already done so and the
+ * environment exposes `matchMedia` (skipped during SSR).
+ */
+export declare const ensureViewports: () => void;
+/** Readonly handle to the shared reactive state, for composables. */
+export declare const viewportRef: () => DeepReadonly<Ref<ViewportMatch | undefined>>;
+/** Current value without subscribing reactively — used by the plugin getter. */
+export declare const currentViewportValue: () => ViewportMatch | undefined;
+/** Reset all state. Intended for tests. */
+export declare const resetViewports: () => void;
+export type { ViewportConfig, ViewportConfigList, ViewportMatch };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { VueViewports, VueViewports as default, viewportInjectionKey } from './plugin';
+export { useViewport } from './composable';
+export { defaultViewports, setupViewports, toMediaQuery, computeMatch } from './core';
+export type { ViewportConfig, ViewportConfigList, ViewportMatch } from './types';

package/dist/plugin.d.ts

@@ -0,0 +1,31 @@
+import { InjectionKey, Plugin } from 'vue';
+import { viewportRef } from './core';
+import { ViewportConfigList, ViewportMatch } from './types';
+/** Inject key for the readonly current-viewport ref. */
+export declare const viewportInjectionKey: InjectionKey<ReturnType<typeof viewportRef>>;
+/**
+ * Vue 3 plugin. Sets up `matchMedia` listeners for the given viewports and
+ * exposes the current one as:
+ *
+ * - `this.$currentViewport` on every component (Options & global), and
+ * - an injectable readonly ref via {@link viewportInjectionKey}.
+ *
+ * ```ts
+ * import { createApp } from 'vue'
+ * import VueViewports from 'vue-viewports'
+ *
+ * createApp(App).use(VueViewports).mount('#app')
+ * // or with custom breakpoints:
+ * createApp(App).use(VueViewports, [{ rule: '600px', label: 'small' }])
+ * ```
+ *
+ * The plugin is authoritative: installing it always (re)configures the shared
+ * state, overriding any lazy defaults a composable may have set up.
+ */
+export declare const VueViewports: Plugin<[ViewportConfigList?]>;
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        /** The current viewport, or `undefined` when none matches. */
+        readonly $currentViewport: ViewportMatch | undefined;
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A single viewport definition.
+ *
+ * `rule` is the CSS length at which the viewport starts (used as `min-width`),
+ * e.g. `'768px'`. `label` is the human-readable name, e.g. `'tablet'`.
+ */
+export interface ViewportConfig {
+    readonly rule: string;
+    readonly label: string;
+}
+/**
+ * The currently matching viewport, or `undefined` when no viewport matches
+ * (e.g. a width smaller than the smallest configured `rule`).
+ */
+export type ViewportMatch = ViewportConfig;
+export type ViewportConfigList = readonly ViewportConfig[];

package/dist/vue-viewports.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("vue");var t=[{rule:`320px`,label:`mobile`},{rule:`768px`,label:`tablet`},{rule:`1024px`,label:`desktop`},{rule:`1920px`,label:`hd-desktop`},{rule:`2560px`,label:`qhd-desktop`},{rule:`3840px`,label:`uhd-desktop`}],n=(0,e.ref)(void 0),r,i=!1,a=e=>`(min-width: ${e})`,o=e=>Number.parseFloat(e),s=e=>{let t=[...e].sort((e,t)=>o(e.rule)-o(t.rule)).filter(e=>window.matchMedia(a(e.rule)).matches).at(-1);return t?{rule:t.rule,label:t.label}:void 0},c=(e=t)=>{r?.();let o=e.map(e=>window.matchMedia(a(e.rule))),c=()=>{n.value=s(e)};o.forEach(e=>e.addEventListener(`change`,c)),c(),i=!0;let l=()=>{o.forEach(e=>e.removeEventListener(`change`,c)),r===l&&(r=void 0)};return r=l,l},l=()=>{i||typeof window>`u`||typeof window.matchMedia!=`function`||c(t)},u=()=>(0,e.readonly)(n),d=()=>n.value,f=Symbol(`vue-viewports`),p={install(e,n=t){c(n),Object.defineProperty(e.config.globalProperties,"$currentViewport",{configurable:!0,enumerable:!0,get:()=>d()}),e.provide(f,u())}},m=()=>(l(),u());exports.VueViewports=p,exports.default=p,exports.computeMatch=s,exports.defaultViewports=t,exports.setupViewports=c,exports.toMediaQuery=a,exports.useViewport=m,exports.viewportInjectionKey=f;

package/dist/vue-viewports.js

@@ -1 +1,54 @@
-!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.VueViewports=n():t.VueViewports=n()}(this,function(){return function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=13)}([function(t,n){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n){var e=t.exports={version:"2.5.1"};"number"==typeof __e&&(__e=e)},function(t,n,e){var r=e(34)("wks"),o=e(10),i=e(0).Symbol,u="function"==typeof i;(t.exports=function(t){return r[t]||(r[t]=u&&i[t]||(u?i:o)("Symbol."+t))}).store=r},function(t,n,e){var r=e(17),o=e(22);t.exports=e(5)?function(t,n,e){return r.f(t,n,o(1,e))}:function(t,n,e){return t[n]=e,t}},function(t,n,e){t.exports=!e(9)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=[{rule:"320px",label:"mobile"},{rule:"768px",label:"tablet"},{rule:"1024px",label:"desktop"},{rule:"1920px",label:"hd-desktop"},{rule:"2560px",label:"qhd-desktop"},{rule:"3840px",label:"uhd-desktop"}],o={sizes:void 0,matchMedia:[],currentMatch:void 0};n.defaultOptions=r,n.store=o},function(t,n,e){var r=e(0),o=e(2),i=e(4),u=e(23),c=e(11),f=function(t,n,e){var a,s,p,l,d=t&f.F,v=t&f.G,y=t&f.S,h=t&f.P,x=t&f.B,b=v?r:y?r[n]||(r[n]={}):(r[n]||{}).prototype,w=v?o:o[n]||(o[n]={}),m=w.prototype||(w.prototype={});v&&(e=n);for(a in e)s=!d&&b&&void 0!==b[a],p=(s?b:e)[a],l=x&&s?c(p,r):h&&"function"==typeof p?c(Function.call,p):p,b&&u(b,a,p,t&f.U),w[a]!=p&&i(w,a,l),h&&m[a]!=p&&(m[a]=p)};r.core=o,f.F=1,f.G=2,f.S=4,f.P=8,f.B=16,f.W=32,f.U=64,f.R=128,t.exports=f},function(t,n){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,n){var e=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+r).toString(36))}},function(t,n,e){var r=e(25);t.exports=function(t,n,e){if(r(t),void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 2:return function(e,r){return t.call(n,e,r)};case 3:return function(e,r,o){return t.call(n,e,r,o)}}return function(){return t.apply(n,arguments)}}},function(t,n){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=e(7),o=e(14),i={install:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:r.defaultOptions;r.store.sizes=n;var e=r.store.sizes.map(o.toMatchMedia);r.store.matchMedia=e,r.store.matchMedia.forEach(function(t){return t.addListener(o.updateMatchStatus)}),r.store.matchMedia.forEach(o.updateMatchStatus),window.Object.defineProperty(t.prototype,"$currentViewport",{get:function(){return i._getPublicObject()}})},get currentViewport(){return r.store.currentMatch},_getPublicObject:function(){if(void 0!==i.currentViewport){var t=i.currentViewport,n=t.rule,e=t.label;return{get rule(){return n},get label(){return e}}}}};n.default=i,"undefined"!=typeof window&&window.Vue&&window.Vue.use(i)},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.updateMatchStatus=n.toMediaQuery=n.toMatchMedia=void 0,e(15),e(36);var r=e(7),o=function(t){return window.matchMedia(i(t.rule))},i=function(t){return"(min-width: "+t+")"},u=function(t){var n=t.media,e=t.matches,o=r.store.sizes.find(function(t){return n.includes(t.rule)}).rule;r.store.currentMatch=e?r.store.sizes.find(function(t){return t.rule===o}):r.store.sizes.slice(0).reverse().find(function(t){return window.matchMedia(i(t.rule)).matches})};n.toMatchMedia=o,n.toMediaQuery=i,n.updateMatchStatus=u},function(t,n,e){e(16),t.exports=e(2).Array.find},function(t,n,e){"use strict";var r=e(8),o=e(26)(5),i=!0;"find"in[]&&Array(1).find(function(){i=!1}),r(r.P+r.F*i,"Array",{find:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),e(35)("find")},function(t,n,e){var r=e(18),o=e(19),i=e(21),u=Object.defineProperty;n.f=e(5)?Object.defineProperty:function(t,n,e){if(r(t),n=i(n,!0),r(e),o)try{return u(t,n,e)}catch(t){}if("get"in e||"set"in e)throw TypeError("Accessors not supported!");return"value"in e&&(t[n]=e.value),t}},function(t,n,e){var r=e(1);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,n,e){t.exports=!e(5)&&!e(9)(function(){return 7!=Object.defineProperty(e(20)("div"),"a",{get:function(){return 7}}).a})},function(t,n,e){var r=e(1),o=e(0).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,n,e){var r=e(1);t.exports=function(t,n){if(!r(t))return t;var e,o;if(n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;if("function"==typeof(e=t.valueOf)&&!r(o=e.call(t)))return o;if(!n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n,e){var r=e(0),o=e(4),i=e(24),u=e(10)("src"),c=Function.toString,f=(""+c).split("toString");e(2).inspectSource=function(t){return c.call(t)},(t.exports=function(t,n,e,c){var a="function"==typeof e;a&&(i(e,"name")||o(e,"name",n)),t[n]!==e&&(a&&(i(e,u)||o(e,u,t[n]?""+t[n]:f.join(String(n)))),t===r?t[n]=e:c?t[n]?t[n]=e:o(t,n,e):(delete t[n],o(t,n,e)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[u]||c.call(this)})},function(t,n){var e={}.hasOwnProperty;t.exports=function(t,n){return e.call(t,n)}},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n,e){var r=e(11),o=e(27),i=e(28),u=e(29),c=e(31);t.exports=function(t,n){var e=1==t,f=2==t,a=3==t,s=4==t,p=6==t,l=5==t||p,d=n||c;return function(n,c,v){for(var y,h,x=i(n),b=o(x),w=r(c,v,3),m=u(b.length),g=0,M=e?d(n,m):f?d(n,0):void 0;m>g;g++)if((l||g in b)&&(y=b[g],h=w(y,g,x),t))if(e)M[g]=h;else if(h)switch(t){case 3:return!0;case 5:return y;case 6:return g;case 2:M.push(y)}else if(s)return!1;return p?-1:a||s?s:M}}},function(t,n,e){var r=e(6);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,n,e){var r=e(12);t.exports=function(t){return Object(r(t))}},function(t,n,e){var r=e(30),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,n){var e=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:e)(t)}},function(t,n,e){var r=e(32);t.exports=function(t,n){return new(r(t))(n)}},function(t,n,e){var r=e(1),o=e(33),i=e(3)("species");t.exports=function(t){var n;return o(t)&&(n=t.constructor,"function"!=typeof n||n!==Array&&!o(n.prototype)||(n=void 0),r(n)&&null===(n=n[i])&&(n=void 0)),void 0===n?Array:n}},function(t,n,e){var r=e(6);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,n,e){var r=e(0),o=r["__core-js_shared__"]||(r["__core-js_shared__"]={});t.exports=function(t){return o[t]||(o[t]={})}},function(t,n,e){var r=e(3)("unscopables"),o=Array.prototype;void 0==o[r]&&e(4)(o,r,{}),t.exports=function(t){o[r][t]=!0}},function(t,n,e){e(37),t.exports=e(2).String.includes},function(t,n,e){"use strict";var r=e(8),o=e(38);r(r.P+r.F*e(40)("includes"),"String",{includes:function(t){return!!~o(this,t,"includes").indexOf(t,arguments.length>1?arguments[1]:void 0)}})},function(t,n,e){var r=e(39),o=e(12);t.exports=function(t,n,e){if(r(n))throw TypeError("String#"+e+" doesn't accept regex!");return String(o(t))}},function(t,n,e){var r=e(1),o=e(6),i=e(3)("match");t.exports=function(t){var n;return r(t)&&(void 0!==(n=t[i])?!!n:"RegExp"==o(t))}},function(t,n,e){var r=e(3)("match");t.exports=function(t){var n=/./;try{"/./"[t](n)}catch(e){try{return n[r]=!1,!"/./"[t](n)}catch(t){}}return!0}}])});
+import { readonly as e, ref as t } from "vue";
+//#region src/core.ts
+var n = [
+	{
+		rule: "320px",
+		label: "mobile"
+	},
+	{
+		rule: "768px",
+		label: "tablet"
+	},
+	{
+		rule: "1024px",
+		label: "desktop"
+	},
+	{
+		rule: "1920px",
+		label: "hd-desktop"
+	},
+	{
+		rule: "2560px",
+		label: "qhd-desktop"
+	},
+	{
+		rule: "3840px",
+		label: "uhd-desktop"
+	}
+], r = t(void 0), i, a = !1, o = (e) => `(min-width: ${e})`, s = (e) => Number.parseFloat(e), c = (e) => {
+	let t = [...e].sort((e, t) => s(e.rule) - s(t.rule)).filter((e) => window.matchMedia(o(e.rule)).matches).at(-1);
+	return t ? {
+		rule: t.rule,
+		label: t.label
+	} : void 0;
+}, l = (e = n) => {
+	i?.();
+	let t = e.map((e) => window.matchMedia(o(e.rule))), s = () => {
+		r.value = c(e);
+	};
+	t.forEach((e) => e.addEventListener("change", s)), s(), a = !0;
+	let l = () => {
+		t.forEach((e) => e.removeEventListener("change", s)), i === l && (i = void 0);
+	};
+	return i = l, l;
+}, u = () => {
+	a || typeof window > "u" || typeof window.matchMedia != "function" || l(n);
+}, d = () => e(r), f = () => r.value, p = Symbol("vue-viewports"), m = { install(e, t = n) {
+	l(t), Object.defineProperty(e.config.globalProperties, "$currentViewport", {
+		configurable: !0,
+		enumerable: !0,
+		get: () => f()
+	}), e.provide(p, d());
+} }, h = () => (u(), d());
+//#endregion
+export { m as VueViewports, m as default, c as computeMatch, n as defaultViewports, l as setupViewports, o as toMediaQuery, h as useViewport, p as viewportInjectionKey };

package/package.json

@@ -1,35 +1,75 @@
 {
   "name": "vue-viewports",
-  "version": "3.1.2",
-  "description": "define your custom viewports and use them in your components",
+  "version": "4.0.0",
+  "description": "Named, reactive, matchMedia-based viewport breakpoints for Vue 3 — a tiny plugin and composable.",
+  "type": "module",
   "author": {
     "name": "Marco Boffo",
     "email": "marcoboffo.waves@gmail.com"
   },
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/scaccogatto/vue-viewports.git"
+    "url": "git+https://github.com/scaccogatto/vue-viewports.git"
   },
-  "main": "dist/vue-viewports.js",
-  "license": "MIT",
+  "homepage": "https://github.com/scaccogatto/vue-viewports#readme",
+  "bugs": {
+    "url": "https://github.com/scaccogatto/vue-viewports/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "viewport",
+    "viewports",
+    "responsive",
+    "breakpoints",
+    "media-query",
+    "matchmedia",
+    "composable",
+    "plugin"
+  ],
+  "sideEffects": false,
+  "main": "./dist/vue-viewports.cjs",
+  "module": "./dist/vue-viewports.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-viewports.js",
+      "require": "./dist/vue-viewports.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "start": "webpack -p --config webpack.config.js",
-    "lint": "eslint src/**"
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build"
   },
-  "dependencies": {
-    "vue": "^2.5.9"
+  "peerDependencies": {
+    "vue": "^3.3.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "eslint": "^4.12.1",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-node": "^5.2.1",
-    "eslint-plugin-promise": "^3.6.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "webpack": "^3.8.1"
+    "@eslint/js": "^10.0.1",
+    "@vitest/coverage-v8": "^4.1.9",
+    "@vue/test-utils": "^2.4.11",
+    "eslint": "^10.6.0",
+    "jsdom": "^29.1.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.62.0",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.9",
+    "vue": "^3.5.39"
+  },
+  "engines": {
+    "node": ">=20"
   }
 }

package/.babelrc

@@ -1,16 +0,0 @@
-{
-  "presets": [
-    [
-      "env",
-      {
-        "targets": {
-          "browsers": [
-            "last 2 versions",
-            "ie >= 11"
-          ]
-        }
-      }
-    ]
-  ],
-  "comments": false
-}

package/.eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-  'extends': 'standard'
-}

package/.travis.yml

@@ -1,24 +0,0 @@
-language: node_js
-
-node_js:
-  - lts/carbon
-
-install:
-  - npm install
-
-script:
-  - npm run start
-
-cache:
-  directories:
-  - node_modules
-
-deploy:
-  provider: npm
-  email: marcoboffo.waves@gmail.com
-  skip_cleanup: true
-  api_key:
-    secure: O232hq84yuYDU7vXTXc8Mu9UFdEL7rpA/9b+E8WDd4O7m/BWbeHdG1VTLK4FHq2jP27jekVGB1WpmrM+wiSg5TpYm0l0540iqadv6x1VBGeEkTdY44M3I93UbmDa6rM7w9vxdU3jm2LweS59PnXWeKAMDQ3FKlDKnIL/Rw1eKGlAVdRDFGY2lMpMmQQNvLXXMCchcceLDLAElcIRPi3CGpjYttpTlFbTayaRkObwHuZphCOB/9e3t/0ZtCM5W9iWBe6F+2+WoOLgL+qMVv7b1r458CWR3wS7FyLzT/jg9sl06Uqhcau6W29HfH2RnCYuS4uuNIITtDRKn6xOGLJr3XmJbhsqTDGVk6ybvnI20ltkOXZNDaMFYrWaEN+ibl/2c4itGUTsUg/EAMV7s37+W3rcB0Q3BPFXw3zFDT0AyVEpXpo6hvcti+leodZ2JA6CUco/KHPov31lfr6zh7B+TyFNQrFJeAVKTLng5TLJlkPQOe3fVFrZZmqKaD+s73EI/kGvgwclcoWqu2pVoEE/S7x6lwKFsT4nmw8Q0AGuJ2YTOTNw2Ky0S1siBeEFAlThST9HqaGL9qwDHOiO/4E1croGpuJjT6Xf472H43orCP+s9RFg506I9+Qy0cq2qI+ouBk7EIqpxdTAt/Rm55RnDVMjyj7moIbM2QzEgrWeR+8=
-  on:
-    tags: true
-    repo: scaccogatto/vue-viewports

package/src/index.js

@@ -1,50 +0,0 @@
-import { store, defaultOptions } from './store'
-import { toMatchMedia, updateMatchStatus } from './matchMedia'
-
-const VueViewports = {
-  install (Vue, options = defaultOptions) {
-    // save sizes
-    store.sizes = options
-
-    // create matchMediaObjects https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
-    const matchMedia = store.sizes.map(toMatchMedia)
-
-    // save it
-    store.matchMedia = matchMedia
-
-    // add listeners
-    store.matchMedia.forEach(matchMediaObj => matchMediaObj.addListener(updateMatchStatus))
-
-    // first trigger
-    store.matchMedia.forEach(updateMatchStatus)
-
-    // global call
-    window.Object.defineProperty(Vue.prototype, '$currentViewport', {
-      get: () => VueViewports._getPublicObject()
-    })
-  },
-  get currentViewport () {
-    return store.currentMatch
-  },
-  _getPublicObject () {
-    const { currentViewport } = VueViewports
-    if (typeof currentViewport !== 'undefined') {
-      const { rule, label } = VueViewports.currentViewport
-      return {
-        get rule () {
-          return rule
-        },
-        get label () {
-          return label
-        }
-      }
-    }
-  }
-}
-
-export default VueViewports
-
-// in-browser load
-if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.use(VueViewports)
-}

package/src/matchMedia.js

@@ -1,22 +0,0 @@
-import 'core-js/fn/array/find'
-import 'core-js/fn/string/includes'
-import { store } from './store'
-
-const toMatchMedia = size => window.matchMedia(toMediaQuery(size.rule))
-
-const toMediaQuery = rule => `(min-width: ${rule})`
-
-const updateMatchStatus = ({ media, matches }) => {
-  // find the store rule, matching the event
-  const rule = store.sizes.find(size => media.includes(size.rule)).rule
-
-  if (matches) {
-    // if it matches, just set the rule
-    store.currentMatch = store.sizes.find(size => size.rule === rule)
-  } else {
-    // if it does not,find the greater matching rule and apply
-    store.currentMatch = store.sizes.slice(0).reverse().find(size => window.matchMedia(toMediaQuery(size.rule)).matches)
-  }
-}
-
-export { toMatchMedia, toMediaQuery, updateMatchStatus }

package/src/store.js

@@ -1,34 +0,0 @@
-const defaultOptions = [
-  {
-    rule: '320px',
-    label: 'mobile'
-  },
-  {
-    rule: '768px',
-    label: 'tablet'
-  },
-  {
-    rule: '1024px',
-    label: 'desktop'
-  },
-  {
-    rule: '1920px',
-    label: 'hd-desktop'
-  },
-  {
-    rule: '2560px',
-    label: 'qhd-desktop'
-  },
-  {
-    rule: '3840px',
-    label: 'uhd-desktop'
-  }
-]
-
-const store = {
-  sizes: undefined,
-  matchMedia: [],
-  currentMatch: undefined
-}
-
-export { defaultOptions, store }

package/webpack.config.js

@@ -1,27 +0,0 @@
-const webpack = require('webpack')
-const path = require('path')
-
-const config = {
-  entry: path.resolve(__dirname, 'src', 'index.js'),
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'vue-viewports.js',
-    library: 'VueViewports',
-    libraryTarget: 'umd'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        include: path.resolve(__dirname, 'src'),
-        exclude: /node_modules/,
-        use: 'babel-loader'
-      }
-    ]
-  },
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin()
-  ]
-}
-
-module.exports = config