responsive-media 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,123 @@
+npm install responsive-media
+
+# responsive-media
+
+A utility for reactive state based on CSS media queries. Includes integration with Vue 3 (Composition API).
+
+## Installation
+
+```
+npm install responsive-media
+```
+
+## Usage without Vue
+
+### Getting the state
+
+```ts
+import { responsiveState } from 'responsive-media';
+
+// Get the current state:
+const { mobile, tablet, desktop } = responsiveState.proxy;
+
+console.log('isMobile:', mobile);
+console.log('isTablet:', tablet);
+console.log('isDesktop:', desktop);
+```
+
+### Subscribing to changes
+
+```ts
+// Subscribe to state changes:
+const unsubscribe = responsiveState.subscribe((state) => {
+  console.log('State changed:', state);
+  // state.mobile, state.tablet, state.desktop
+});
+
+// To unsubscribe:
+unsubscribe();
+```
+
+## Usage with Vue 3 (Composition API)
+
+### Plugin registration
+
+```ts
+import { createApp } from 'vue';
+import { ResponsivePlugin, ResponsiveConfig } from 'responsive-media';
+import App from './App.vue';
+
+const app = createApp(App);
+
+// Use default breakpoints:
+app.use(ResponsivePlugin);
+
+// Or provide your own breakpoints (now you can combine conditions):
+app.use(ResponsivePlugin, {
+  ...ResponsiveConfig, // keep default breakpoints
+  myCustom: [
+    { type: 'min-width', value: 1200 },
+    { type: 'aspect-ratio', value: '16/9' },
+  ], // add your own with multiple conditions
+  mobile: [
+    { type: 'max-width', value: 500 },
+    { type: 'orientation', value: 'portrait' },
+  ], // override default with multiple conditions
+});
+
+app.mount('#app');
+```
+
+### Usage in a component
+
+```ts
+<script setup lang="ts">
+import { useResponsive } from 'responsive-media';
+
+const responsive = useResponsive();
+
+// responsive.mobile, responsive.tablet, responsive.desktop, etc.
+</script>
+```
+
+## Customizing breakpoints
+
+You can override or add your own breakpoints using the setResponsiveConfig function. Now each breakpoint can be an array of conditions (they will be combined with and):
+
+```ts
+import { setResponsiveConfig, ResponsiveConfig } from 'responsive-media';
+
+setResponsiveConfig({
+  ...ResponsiveConfig, // keep default
+  myCustom: [
+    { type: 'min-width', value: 1200 },
+    { type: 'aspect-ratio', value: '16/9' },
+  ], // add your own breakpoint with multiple conditions
+  mobile: [
+    { type: 'max-width', value: 500 },
+    { type: 'orientation', value: 'portrait' },
+  ], // override default with multiple conditions
+});
+```
+
+## Exported entities
+- responsiveState
+- ResponsiveConfig
+- setResponsiveConfig
+- ResponsivePlugin (Vue)
+- useResponsive (Vue)
+
+## Breakpoint config format
+
+Each breakpoint is now described by an array of conditions (MediaQueryConfig = MediaQueryCondition[]), where each condition is an object with type and value. All conditions within a breakpoint are combined with and (e.g., `(max-width: 600px) and (aspect-ratio: 16/9)`).
+
+## Author
+
+Danil Lisin Vladimirovich aka Macrulez
+
+GitHub: [macrulezru](https://github.com/macrulezru)
+
+Website: [macrulez.ru](https://macrulez.ru/)
+
+## License
+MIT

package/dist/create-responsive.d.ts

@@ -0,0 +1,17 @@
+import { type Breakpoint, type MediaQueryConfig } from './responsive.enum';
+export type { MediaQueryConfig };
+type ResponsiveState = Record<Breakpoint, boolean>;
+type ResponsiveListener = (state: ResponsiveState) => void;
+declare class ReactiveResponsiveState {
+    private state;
+    private listeners;
+    proxy: ResponsiveState;
+    private queries;
+    constructor();
+    private applyConfig;
+    setConfig(config: Record<string, MediaQueryConfig>): void;
+    subscribe(listener: ResponsiveListener): () => boolean;
+    private notify;
+}
+export declare const responsiveState: ReactiveResponsiveState;
+export declare function setResponsiveConfig(config: Record<string, MediaQueryConfig>): void;

package/dist/create-responsive.js

@@ -0,0 +1,61 @@
+import { ResponsiveConfig } from './responsive.enum';
+class ReactiveResponsiveState {
+    constructor() {
+        this.listeners = new Set();
+        this.queries = {};
+        this.state = {};
+        this.proxy = new Proxy(this.state, {
+            set: (target, prop, value) => {
+                if (target[prop] !== value) {
+                    target[prop] = value;
+                    this.notify();
+                }
+                return true;
+            },
+            get: (target, prop) => {
+                return target[prop];
+            },
+        });
+        this.applyConfig(ResponsiveConfig);
+    }
+    applyConfig(config) {
+        Object.entries(this.queries).forEach(([key, query]) => {
+            query.onchange = null;
+        });
+        this.queries = {};
+        Object.keys(this.state).forEach(key => delete this.state[key]);
+        Object.entries(config).forEach(([key, conditions]) => {
+            // Формируем строку media-запроса из массива условий
+            const mq = conditions
+                .map(cond => {
+                const val = typeof cond.value === 'number' && !String(cond.type).includes('aspect-ratio')
+                    ? cond.value + 'px'
+                    : cond.value;
+                return `(${cond.type}: ${val})`;
+            })
+                .join(' and ');
+            const query = window.matchMedia(mq);
+            this.queries[key] = query;
+            this.proxy[key] = query.matches;
+            query.addEventListener('change', (e) => {
+                this.proxy[key] = e.matches;
+            });
+        });
+        this.notify();
+    }
+    setConfig(config) {
+        this.applyConfig(config);
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        listener(this.proxy);
+        return () => this.listeners.delete(listener);
+    }
+    notify() {
+        this.listeners.forEach(listener => listener(this.proxy));
+    }
+}
+export const responsiveState = new ReactiveResponsiveState();
+export function setResponsiveConfig(config) {
+    responsiveState.setConfig(config);
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './responsive.enum';
+export * from './create-responsive';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './responsive.enum';
+export * from './create-responsive';

package/dist/responsive.enum.d.ts

@@ -0,0 +1,7 @@
+export type Breakpoint = 'mobile' | 'tablet' | 'desktop';
+export interface MediaQueryCondition {
+    type: 'width' | 'min-width' | 'max-width' | 'height' | 'min-height' | 'max-height' | 'aspect-ratio' | 'min-aspect-ratio' | 'max-aspect-ratio' | 'orientation' | 'resolution' | 'min-resolution' | 'max-resolution' | 'color' | 'min-color' | 'max-color' | 'color-index' | 'min-color-index' | 'max-color-index' | 'monochrome' | 'min-monochrome' | 'max-monochrome' | 'scan' | 'grid';
+    value: number | string;
+}
+export type MediaQueryConfig = MediaQueryCondition[];
+export declare const ResponsiveConfig: Record<Breakpoint, MediaQueryConfig>;

package/dist/responsive.enum.js

@@ -0,0 +1,11 @@
+export const ResponsiveConfig = {
+    mobile: [
+        { type: 'max-width', value: 600 },
+    ],
+    tablet: [
+        { type: 'max-width', value: 960 },
+    ],
+    desktop: [
+        { type: 'min-width', value: 961 },
+    ],
+};

package/dist/vue-responsive.d.ts

@@ -0,0 +1,8 @@
+import type { App } from '@vue/runtime-core';
+import type { MediaQueryConfig } from './create-responsive';
+export declare function useResponsive(): any;
+type ResponsiveConfigType = Record<string, MediaQueryConfig>;
+export declare const ResponsivePlugin: {
+    install(app: App, config?: ResponsiveConfigType): void;
+};
+export {};

package/dist/vue-responsive.js

@@ -0,0 +1,38 @@
+import { inject, readonly, reactive } from '@vue/runtime-core';
+import { responsiveState, setResponsiveConfig } from './create-responsive';
+const RESPONSIVE_KEY = Symbol('responsiveState');
+let vueReactiveState = null;
+export function useResponsive() {
+    // Получаем реактивный объект из provide/inject или создаём локально
+    const injected = inject(RESPONSIVE_KEY);
+    if (injected)
+        return injected;
+    if (!vueReactiveState) {
+        vueReactiveState = readonly(reactive({ ...responsiveState.proxy }));
+        // Синхронизируем с изменениями responsiveState
+        responsiveState.subscribe((state) => {
+            Object.keys(state).forEach(key => {
+                // @ts-ignore
+                vueReactiveState[key] = state[key];
+            });
+        });
+    }
+    return vueReactiveState;
+}
+export const ResponsivePlugin = {
+    install(app, config) {
+        if (config) {
+            setResponsiveConfig(config);
+        }
+        if (!vueReactiveState) {
+            vueReactiveState = readonly(reactive({ ...responsiveState.proxy }));
+            responsiveState.subscribe((state) => {
+                Object.keys(state).forEach(key => {
+                    // @ts-ignore
+                    vueReactiveState[key] = state[key];
+                });
+            });
+        }
+        app.provide(RESPONSIVE_KEY, vueReactiveState);
+    },
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "responsive-media",
+  "version": "1.0.0",
+  "description": "Утилита для реактивного состояния на основе CSS media queries без зависимостей.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourusername/responsive-media.git"
+  },
+  "keywords": [
+    "responsive",
+    "media-query",
+    "typescript",
+    "reactive",
+    "utility"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/vue": "^1.0.31",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^10.7.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.27"
+  }
+}