responsive-media 1.0.5 → 1.0.7

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,14 @@ declare class ReactiveResponsiveState {
     private listeners;
     proxy: ResponsiveState;
     private queries;
+    private mediaQueries;
     constructor();
     private applyConfig;
+    getMediaQueries(): Record<string, string>;
     setConfig(config: Record<string, MediaQueryConfig>): void;
     subscribe(listener: ResponsiveListener): () => boolean;
     private notify;
 }
+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,9 +24,9 @@ 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-запроса из массива условий
             const mq = conditions
                 .map(cond => {
                 const val = typeof cond.value === 'number' && !String(cond.type).includes('aspect-ratio')
@@ -34,6 +35,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 +45,9 @@ class ReactiveResponsiveState {
         });
         this.notify();
     }
+    getMediaQueries() {
+        return { ...this.mediaQueries };
+    }
     setConfig(config) {
         this.applyConfig(config);
     }
@@ -55,6 +60,9 @@ class ReactiveResponsiveState {
         this.listeners.forEach(listener => listener(this.proxy));
     }
 }
+export function getResponsiveMediaQueries() {
+    return responsiveState.getMediaQueries();
+}
 export const responsiveState = new ReactiveResponsiveState();
 export function setResponsiveConfig(config) {
     responsiveState.setConfig(config);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-media",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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",