responsive-media 1.0.4 → 1.0.6

package/README.md

@@ -100,12 +100,30 @@ setResponsiveConfig({
 });
 ```
 
+
+## Getting CSS media query strings
+
+You can get the generated CSS media query strings for each breakpoint:
+
+```ts
+import { getResponsiveMediaQueries } from 'responsive-media';
+
+const mediaQueries = getResponsiveMediaQueries();
+console.log(mediaQueries);
+// {
+//   mobile: '(max-width: 767px)',
+//   tablet: '(min-width: 768px) and (max-width: 1023px)',
+//   desktop: '(min-width: 1024px)'
+// }
+```
+
 ## Exported entities
 - responsiveState
 - ResponsiveConfig
 - setResponsiveConfig
 - ResponsivePlugin (Vue)
 - useResponsive (Vue)
+- getResponsiveMediaQueries
 
 ## Breakpoint config format
 

package/dist/create-responsive.d.ts

@@ -7,11 +7,20 @@ declare class ReactiveResponsiveState {
     private listeners;
     proxy: ResponsiveState;
     private queries;
+    private mediaQueries;
     constructor();
     private applyConfig;
+    /**
+     * Получить объект сгенерированных CSS media-запросов для каждого брейкпоинта.
+     */
+    getMediaQueries(): Record<string, string>;
     setConfig(config: Record<string, MediaQueryConfig>): void;
     subscribe(listener: ResponsiveListener): () => boolean;
     private notify;
 }
+/**
+ * Получить объект сгенерированных CSS media-запросов для каждого брейкпоинта.
+ */
+export declare function getResponsiveMediaQueries(): Record<string, string>;
 export declare const responsiveState: ReactiveResponsiveState;
 export declare function setResponsiveConfig(config: Record<string, MediaQueryConfig>): void;

package/dist/create-responsive.js

@@ -3,6 +3,7 @@ class ReactiveResponsiveState {
     constructor() {
         this.listeners = new Set();
         this.queries = {};
+        this.mediaQueries = {};
         this.state = {};
         this.proxy = new Proxy(this.state, {
             set: (target, prop, value) => {
@@ -23,6 +24,7 @@ class ReactiveResponsiveState {
             query.onchange = null;
         });
         this.queries = {};
+        this.mediaQueries = {};
         Object.keys(this.state).forEach(key => delete this.state[key]);
         Object.entries(config).forEach(([key, conditions]) => {
             // Формируем строку media-запроса из массива условий
@@ -34,6 +36,7 @@ class ReactiveResponsiveState {
                 return `(${cond.type}: ${val})`;
             })
                 .join(' and ');
+            this.mediaQueries[key] = mq;
             const query = window.matchMedia(mq);
             this.queries[key] = query;
             this.proxy[key] = query.matches;
@@ -43,6 +46,12 @@ class ReactiveResponsiveState {
         });
         this.notify();
     }
+    /**
+     * Получить объект сгенерированных CSS media-запросов для каждого брейкпоинта.
+     */
+    getMediaQueries() {
+        return { ...this.mediaQueries };
+    }
     setConfig(config) {
         this.applyConfig(config);
     }
@@ -55,6 +64,12 @@ class ReactiveResponsiveState {
         this.listeners.forEach(listener => listener(this.proxy));
     }
 }
+/**
+ * Получить объект сгенерированных CSS media-запросов для каждого брейкпоинта.
+ */
+export function getResponsiveMediaQueries() {
+    return responsiveState.getMediaQueries();
+}
 export const responsiveState = new ReactiveResponsiveState();
 export function setResponsiveConfig(config) {
     responsiveState.setConfig(config);

package/dist/vue-responsive.js

@@ -1,15 +1,13 @@
-import { inject, readonly, reactive } from '@vue/runtime-core';
+import { inject, 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
+        vueReactiveState = reactive({ ...responsiveState.proxy });
         responsiveState.subscribe((state) => {
             Object.keys(state).forEach(key => {
                 // @ts-ignore
@@ -25,7 +23,7 @@ export const ResponsivePlugin = {
             setResponsiveConfig(config);
         }
         if (!vueReactiveState) {
-            vueReactiveState = readonly(reactive({ ...responsiveState.proxy }));
+            vueReactiveState = reactive({ ...responsiveState.proxy });
             responsiveState.subscribe((state) => {
                 Object.keys(state).forEach(key => {
                     // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-media",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A utility for reactive state based on CSS media queries. Includes integration with Vue 3 (Composition API).",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",