@js-toolkit/web-utils 1.66.0 → 1.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@js-toolkit/web-utils",
-  "version": "1.66.0",
+  "version": "1.67.0",
   "description": "Web utils",
   "author": "VZH",
   "license": "MIT",
@@ -20,11 +20,11 @@
     "@js-toolkit/node-utils": "1.2.6"
   },
   "devDependencies": {
-    "@eslint/compat": "2.0.0",
+    "@eslint/compat": "2.0.1",
     "@eslint/eslintrc": "3.3.3",
     "@eslint/js": "9.39.2",
-    "@js-toolkit/configs": "3.99.0",
-    "@js-toolkit/utils": "1.60.3",
+    "@js-toolkit/configs": "3.99.1",
+    "@js-toolkit/utils": "1.61.0",
     "@types/eslint": "9.6.1",
     "@types/lodash.throttle": "4.1.9",
     "@types/uuid": "11.0.0",
@@ -33,17 +33,17 @@
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-import-x": "4.16.1",
-    "eslint-plugin-prettier": "5.5.4",
+    "eslint-plugin-prettier": "5.5.5",
     "lodash.throttle": "4.1.1",
-    "prettier": "3.7.4",
+    "prettier": "3.8.0",
     "reconnecting-websocket": "4.4.0",
     "rimraf": "6.1.2",
-    "terser": "5.44.1",
+    "terser": "5.46.0",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.50.0",
-    "ua-parser-js": "2.0.7",
+    "typescript-eslint": "8.53.1",
+    "ua-parser-js": "2.0.8",
     "uuid": "13.0.0",
-    "webpack": "5.104.0",
+    "webpack": "5.104.1",
     "yargs": "18.0.0"
   }
 }

package/responsive/MediaQuery.d.ts

@@ -0,0 +1,18 @@
+import { MediaQueryListener, type MediaQueryEventHandler } from './MediaQueryListener';
+import type { ViewSize } from './ViewSize';
+export type { MediaQueryEvent, MediaQueryEventHandler } from './MediaQueryListener';
+export declare abstract class MediaQuery {
+    private static _listener;
+    static get listener(): MediaQueryListener;
+    static get isInitialized(): boolean;
+    static get currentViewSize(): ViewSize;
+    static get currentViewSizeValues(): ViewSize.Values;
+    static addListener(listener: MediaQueryEventHandler): void;
+    static removeListener(listener: MediaQueryEventHandler): boolean;
+    /**
+     * Init all media queries for handle changes.
+     * Safe for multiple calls.
+     */
+    static init(): ViewSize;
+    static destroy(): void;
+}

package/responsive/MediaQuery.js

@@ -0,0 +1 @@
+import{MediaQueryListener}from"./MediaQueryListener";export class MediaQuery{static _listener;static get listener(){if(!this._listener)throw new Error("Media queries is not initialized. You should initialize it before by call `init` method.");return this._listener}static get isInitialized(){return null!=this._listener}static get currentViewSize(){return this.listener.currentViewSize}static get currentViewSizeValues(){return this.listener.currentViewSizeQuery}static addListener(e){this.listener.addListener(e)}static removeListener(e){return this.listener.removeListener(e)}static init(){return this._listener??=new MediaQueryListener,this.currentViewSize}static destroy(){this._listener&&this._listener.destroy()}}

package/responsive/MediaQueryListener.d.ts

@@ -0,0 +1,19 @@
+import { ViewSize } from './ViewSize';
+export interface MediaQueryEvent extends Pick<MediaQueryListEvent, 'matches'> {
+    readonly viewSize: ViewSize;
+}
+export type MediaQueryEventHandler = (event: MediaQueryEvent) => void;
+export declare class MediaQueryListener implements Disposable {
+    private _currentViewSize;
+    private readonly mediaQueries;
+    private readonly listeners;
+    readonly queries: Readonly<Record<ViewSize, string>>;
+    get currentViewSize(): ViewSize;
+    get currentViewSizeQuery(): ViewSize.Values;
+    /** Init all media queries for handle changes. */
+    constructor();
+    addListener(listener: MediaQueryEventHandler): void;
+    removeListener(listener: MediaQueryEventHandler): boolean;
+    destroy(): void;
+    [Symbol.dispose](): void;
+}

package/responsive/MediaQueryListener.js

@@ -0,0 +1 @@
+import{ViewSize}from"./ViewSize";import{getViewSizeQueryMap}from"./getViewSizeQueryMap";export class MediaQueryListener{_currentViewSize;mediaQueries=[];listeners=new Set;queries;get currentViewSize(){if(!this._currentViewSize)throw new Error(`Media queries is not initialized properly. Current view size is ${String(this._currentViewSize)}.`);return this._currentViewSize}get currentViewSizeQuery(){return ViewSize.values[this.currentViewSize]}constructor(){this.queries=getViewSizeQueryMap(),Object.entries(this.queries).forEach(([e,i])=>{const r=ViewSize.of(e),t=window.matchMedia(i);this.mediaQueries.push(t),t.onchange=({matches:e})=>{e&&(this._currentViewSize=r),this.listeners.forEach(i=>i({viewSize:r,matches:e}))},t.matches&&(this._currentViewSize=r)})}addListener(e){this.listeners.add(e)}removeListener(e){return this.listeners.delete(e)}destroy(){this.mediaQueries.splice(0,this.mediaQueries.length).forEach(e=>{e.onchange=null}),this.listeners.clear()}[Symbol.dispose](){return this.destroy()}}

package/responsive/ViewSize.d.ts

@@ -0,0 +1,45 @@
+export declare enum ViewSize {
+    /** minWidth=0, maxWidth=319 */
+    xxxxs = 1,
+    /** minWidth=320, maxWidth=479 */
+    xxxs = 2,
+    /** minWidth=480, maxWidth=639 */
+    xxs = 3,
+    /** minWidth=640, maxWidth=827 */
+    xs = 4,
+    /** minWidth=828, maxWidth=1023 */
+    s = 5,
+    /** minWidth=1024, maxWidth=1365 */
+    m = 6,
+    /** minWidth=1366, maxWidth=1599 */
+    l = 7,
+    /** minWidth=1600, maxWidth=1919 */
+    xl = 8,
+    /** minWidth=1920, maxWidth=2559 */
+    xxl = 9,
+    /** minWidth=2560, maxWidth=3839 */
+    xxxl = 10,
+    /** minWidth=3840, maxWidth=7679 */
+    xxxxl = 11,
+    /** minWidth=7680, maxWidth=Number.MAX_SAFE_INTEGER */
+    xxxxxl = 12
+}
+export declare namespace ViewSize {
+    type Type = ExtractKeysOfType<typeof ViewSize, number>;
+    type Keys = keyof Type;
+    interface Values {
+        readonly minWidth: number;
+        readonly maxWidth: number;
+    }
+    /** All values are unique. */
+    const values: Readonly<Record<ViewSize, Values>>;
+    function of(viewSizeNumber: string): ViewSize;
+    function keyOf(viewSize: ViewSize): Keys;
+    /** Sorted values. */
+    const valueList: readonly (readonly [ViewSize, Values])[];
+    function get(width: number): ViewSize;
+    function lt(size: ViewSize, than: ViewSize): boolean;
+    function lte(size: ViewSize, than: ViewSize): boolean;
+    function gt(size: ViewSize, than: ViewSize): boolean;
+    function gte(size: ViewSize, than: ViewSize): boolean;
+}

package/responsive/ViewSize.js

@@ -0,0 +1 @@
+export var ViewSize;!function(x){x[x.xxxxs=1]="xxxxs",x[x.xxxs=2]="xxxs",x[x.xxs=3]="xxs",x[x.xs=4]="xs",x[x.s=5]="s",x[x.m=6]="m",x[x.l=7]="l",x[x.xl=8]="xl",x[x.xxl=9]="xxl",x[x.xxxl=10]="xxxl",x[x.xxxxl=11]="xxxxl",x[x.xxxxxl=12]="xxxxxl"}(ViewSize||(ViewSize={})),function(x){function i(i){const t=+i,n=Number.isFinite(t)?x[t]:i;return x[n]}x.values={[x.xxxxs]:{minWidth:0,maxWidth:319},[x.xxxs]:{minWidth:320,maxWidth:479},[x.xxs]:{minWidth:480,maxWidth:639},[x.xs]:{minWidth:640,maxWidth:827},[x.s]:{minWidth:828,maxWidth:1023},[x.m]:{minWidth:1024,maxWidth:1365},[x.l]:{minWidth:1366,maxWidth:1599},[x.xl]:{minWidth:1600,maxWidth:1919},[x.xxl]:{minWidth:1920,maxWidth:2559},[x.xxxl]:{minWidth:2560,maxWidth:3839},[x.xxxxl]:{minWidth:3840,maxWidth:7679},[x.xxxxxl]:{minWidth:7680,maxWidth:Number.MAX_SAFE_INTEGER}},x.of=i,x.keyOf=function(i){return x[i]},x.valueList=Object.entries(x.values).map(([x,t])=>[i(x),t]).sort(([,x],[,i])=>x.minWidth-i.minWidth),x.get=function(i){return x.valueList.find(([,x])=>i>=x.minWidth&&i<=x.maxWidth)?.[0]??x.valueList.at(-1)[0]},x.lt=function(x,i){return x<i},x.lte=function(x,i){return x<=i},x.gt=function(x,i){return x>i},x.gte=function(x,i){return x>=i}}(ViewSize||(ViewSize={}));

package/responsive/getViewSizeQueryMap.d.ts

@@ -0,0 +1,2 @@
+import { ViewSize } from './ViewSize';
+export declare function getViewSizeQueryMap(): Record<ViewSize, string>;

package/responsive/getViewSizeQueryMap.js

@@ -0,0 +1 @@
+import{ViewSize}from"./ViewSize";export function getViewSizeQueryMap(){return ViewSize.valueList.reduce((e,[i,{minWidth:t,maxWidth:n}])=>(e[i]=`only screen and (min-width: ${t}px) and (max-width: ${n}px)`,e),{})}