@thienvu18/designable-shared 2.0.0 → 2.0.2

package/esm/observer.js

@@ -1,43 +1,40 @@
 export class LayoutObserver {
-    constructor(observer = () => { }) {
-        this.connected = false;
-        this.observe = (target) => {
-            if (!target)
-                return;
-            this.resizeObserver?.observe(target);
-            try {
-                this.performanceObserver?.observe({
-                    entryTypes: ['paint', 'element', 'layout-shift', 'event'],
-                });
-            }
-            catch (e) { }
-            this.mutationObserver?.observe(target, {
-                attributeFilter: ['style'],
-                attributes: true,
-            });
-            this.connected = true;
-        };
-        this.disconnect = () => {
-            if (this.connected) {
-                this.resizeObserver?.disconnect();
-                this.performanceObserver?.disconnect();
-                this.mutationObserver?.disconnect();
-            }
-            this.connected = false;
-        };
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => observer());
-        }
-        if (typeof PerformanceObserver !== 'undefined') {
-            try {
-                this.performanceObserver = new PerformanceObserver(() => {
-                    observer();
-                });
-            }
-            catch (e) { }
-        }
-        if (typeof MutationObserver !== 'undefined') {
-            this.mutationObserver = new MutationObserver(() => observer());
-        }
+  constructor(observer = () => {}) {
+    this.connected = false
+    this.observe = (target) => {
+      if (!target) return
+      this.resizeObserver?.observe(target)
+      try {
+        this.performanceObserver?.observe({
+          entryTypes: ['paint', 'element', 'layout-shift', 'event'],
+        })
+      } catch (e) {}
+      this.mutationObserver?.observe(target, {
+        attributeFilter: ['style'],
+        attributes: true,
+      })
+      this.connected = true
     }
+    this.disconnect = () => {
+      if (this.connected) {
+        this.resizeObserver?.disconnect()
+        this.performanceObserver?.disconnect()
+        this.mutationObserver?.disconnect()
+      }
+      this.connected = false
+    }
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => observer())
+    }
+    if (typeof PerformanceObserver !== 'undefined') {
+      try {
+        this.performanceObserver = new PerformanceObserver(() => {
+          observer()
+        })
+      } catch (e) {}
+    }
+    if (typeof MutationObserver !== 'undefined') {
+      this.mutationObserver = new MutationObserver(() => observer())
+    }
+  }
 }

package/esm/request-idle.d.ts

@@ -1,10 +1,13 @@
-import 'requestidlecallback';
+import 'requestidlecallback'
 export interface IIdleDeadline {
-    didTimeout: boolean;
-    timeRemaining: () => DOMHighResTimeStamp;
+  didTimeout: boolean
+  timeRemaining: () => DOMHighResTimeStamp
 }
 export interface IdleCallbackOptions {
-    timeout?: number;
+  timeout?: number
 }
-export declare const requestIdle: (callback: (params: IIdleDeadline) => void, options?: IdleCallbackOptions) => number;
-export declare const cancelIdle: (id: number) => void;
+export declare const requestIdle: (
+  callback: (params: IIdleDeadline) => void,
+  options?: IdleCallbackOptions
+) => number
+export declare const cancelIdle: (id: number) => void

package/esm/request-idle.js

@@ -1,8 +1,8 @@
-import 'requestidlecallback';
-import { globalThisPolyfill } from './globalThisPolyfill';
+import 'requestidlecallback'
+import { globalThisPolyfill } from './globalThisPolyfill'
 export const requestIdle = (callback, options) => {
-    return globalThisPolyfill['requestIdleCallback'](callback, options);
-};
+  return globalThisPolyfill['requestIdleCallback'](callback, options)
+}
 export const cancelIdle = (id) => {
-    globalThisPolyfill['cancelIdleCallback'](id);
-};
+  globalThisPolyfill['cancelIdleCallback'](id)
+}

package/esm/scroller.d.ts

@@ -1,10 +1,26 @@
-import { IPoint } from './coordinate';
-export type ScrollDirection = 'begin' | 'end';
+import { IPoint } from './coordinate'
+export type ScrollDirection = 'begin' | 'end'
 export interface IAutoScrollBasicInfo {
-    direction: ScrollDirection;
-    speedFactor: number;
-    speed: number;
+  direction: ScrollDirection
+  speedFactor: number
+  speed: number
 }
-export declare const calcAutoScrollBasicInfo: (point: IPoint, axis: 'x' | 'y', viewport: DOMRect, maxSpeed?: number) => IAutoScrollBasicInfo | null;
-export declare const updateScrollValue: (element: HTMLElement | Window, axis: 'x' | 'y', value: number, callback?: (scrollValue: number) => void) => void;
-export declare const scrollAnimate: (element: HTMLElement | Window, axis: 'x' | 'y', direction: 'begin' | 'end', speed: number, callback?: (scrollValue: number) => void) => () => void;
+export declare const calcAutoScrollBasicInfo: (
+  point: IPoint,
+  axis: 'x' | 'y',
+  viewport: DOMRect,
+  maxSpeed?: number
+) => IAutoScrollBasicInfo | null
+export declare const updateScrollValue: (
+  element: HTMLElement | Window,
+  axis: 'x' | 'y',
+  value: number,
+  callback?: (scrollValue: number) => void
+) => void
+export declare const scrollAnimate: (
+  element: HTMLElement | Window,
+  axis: 'x' | 'y',
+  direction: 'begin' | 'end',
+  speed: number,
+  callback?: (scrollValue: number) => void
+) => () => void

package/esm/scroller.js

@@ -1,82 +1,85 @@
-import { createUniformSpeedAnimation, calcSpeedFactor } from './animation';
-import { isFn, isWindow } from './types';
-const MAX_SPEED = 80; // px/s
-export const calcAutoScrollBasicInfo = (point, axis, viewport, maxSpeed = MAX_SPEED) => {
-    const { left, right, top, bottom } = viewport;
-    const { x, y } = point;
-    let begin;
-    let end;
-    let pos;
-    let speedFactor;
-    if (axis === 'x') {
-        begin = left;
-        end = right;
-        pos = x;
+import { calcSpeedFactor, createUniformSpeedAnimation } from './animation'
+import { isFn, isWindow } from './types'
+const MAX_SPEED = 80 // px/s
+export const calcAutoScrollBasicInfo = (
+  point,
+  axis,
+  viewport,
+  maxSpeed = MAX_SPEED
+) => {
+  const { left, right, top, bottom } = viewport
+  const { x, y } = point
+  let begin
+  let end
+  let pos
+  let speedFactor
+  if (axis === 'x') {
+    begin = left
+    end = right
+    pos = x
+  } else {
+    begin = top
+    end = bottom
+    pos = y
+  }
+  const scrollerSize = end - begin
+  const moveDistance = scrollerSize > 400 ? 100 : scrollerSize / 3
+  if (end - pos < moveDistance) {
+    return {
+      direction: 'end',
+      speedFactor,
+      speed: maxSpeed * calcSpeedFactor(end - pos, moveDistance),
     }
-    else {
-        begin = top;
-        end = bottom;
-        pos = y;
+  } else if (pos - begin < moveDistance) {
+    return {
+      direction: 'begin',
+      speedFactor,
+      speed: maxSpeed * calcSpeedFactor(pos - begin, moveDistance),
     }
-    const scrollerSize = end - begin;
-    const moveDistance = scrollerSize > 400 ? 100 : scrollerSize / 3;
-    if (end - pos < moveDistance) {
-        return {
-            direction: 'end',
-            speedFactor,
-            speed: maxSpeed * calcSpeedFactor(end - pos, moveDistance),
-        };
-    }
-    else if (pos - begin < moveDistance) {
-        return {
-            direction: 'begin',
-            speedFactor,
-            speed: maxSpeed * calcSpeedFactor(pos - begin, moveDistance),
-        };
-    }
-    return null;
-};
+  }
+  return null
+}
 export const updateScrollValue = (element, axis, value, callback) => {
-    if (element) {
-        if (!isWindow(element)) {
-            if (axis === 'x') {
-                if (element.scrollLeft + value > element.scrollWidth)
-                    return;
-                element.scrollLeft += value;
-                if (isFn(callback)) {
-                    callback(element.scrollLeft);
-                }
-            }
-            else {
-                if (element.scrollTop + value > element.scrollHeight)
-                    return;
-                element.scrollTop += value;
-                if (isFn(callback)) {
-                    callback(element.scrollTop);
-                }
-            }
+  if (element) {
+    if (!isWindow(element)) {
+      if (axis === 'x') {
+        if (element.scrollLeft + value > element.scrollWidth) return
+        element.scrollLeft += value
+        if (isFn(callback)) {
+          callback(element.scrollLeft)
         }
-        else {
-            if (axis === 'x') {
-                element.scrollBy({
-                    left: value,
-                    behavior: 'smooth',
-                });
-            }
-            else {
-                element.scrollBy({
-                    top: value,
-                    behavior: 'smooth',
-                });
-            }
-            if (isFn(callback)) {
-                callback(value);
-            }
+      } else {
+        if (element.scrollTop + value > element.scrollHeight) return
+        element.scrollTop += value
+        if (isFn(callback)) {
+          callback(element.scrollTop)
         }
+      }
+    } else {
+      if (axis === 'x') {
+        element.scrollBy({
+          left: value,
+          behavior: 'smooth',
+        })
+      } else {
+        element.scrollBy({
+          top: value,
+          behavior: 'smooth',
+        })
+      }
+      if (isFn(callback)) {
+        callback(value)
+      }
     }
-};
+  }
+}
 export const scrollAnimate = (element, axis, direction, speed, callback) => {
-    return createUniformSpeedAnimation(speed, (delta) => {
-        updateScrollValue(element, axis, direction === 'begin' ? 0 - delta : delta, callback);
-    });
-};
+  return createUniformSpeedAnimation(speed, (delta) => {
+    updateScrollValue(
+      element,
+      axis,
+      direction === 'begin' ? 0 - delta : delta,
+      callback
+    )
+  })
+}

package/esm/subscribable.d.ts

@@ -1,14 +1,14 @@
-declare const UNSUBSCRIBE_ID_SYMBOL: unique symbol;
+declare const UNSUBSCRIBE_ID_SYMBOL: unique symbol
 export interface ISubscriber<Payload = any> {
-    (payload: Payload): void | boolean;
+  (payload: Payload): void | boolean
 }
 export declare class Subscribable<ExtendsType = any> {
-    private subscribers;
-    dispatch<T extends ExtendsType = any>(event: T, context?: any): boolean;
-    subscribe(subscriber: ISubscriber): {
-        (): void;
-        [UNSUBSCRIBE_ID_SYMBOL]: number;
-    };
-    unsubscribe: (id?: number | string | (() => void)) => void;
+  private subscribers
+  dispatch<T extends ExtendsType = any>(event: T, context?: any): boolean
+  subscribe(subscriber: ISubscriber): {
+    (): void
+    [UNSUBSCRIBE_ID_SYMBOL]: number
+  }
+  unsubscribe: (id?: number | string | (() => void)) => void
 }
-export {};
+export {}

package/esm/subscribable.js

@@ -1,48 +1,47 @@
-import { isFn } from './types';
-const UNSUBSCRIBE_ID_SYMBOL = Symbol('UNSUBSCRIBE_ID_SYMBOL');
+import { isFn } from './types'
+const UNSUBSCRIBE_ID_SYMBOL = Symbol('UNSUBSCRIBE_ID_SYMBOL')
 export class Subscribable {
-    constructor() {
-        this.subscribers = {
-            index: 0,
-        };
-        this.unsubscribe = (id) => {
-            if (id === undefined || id === null) {
-                for (const key in this.subscribers) {
-                    this.unsubscribe(key);
-                }
-                return;
-            }
-            if (!isFn(id)) {
-                delete this.subscribers[id];
-            }
-            else {
-                delete this.subscribers[id[UNSUBSCRIBE_ID_SYMBOL]];
-            }
-        };
+  constructor() {
+    this.subscribers = {
+      index: 0,
     }
-    dispatch(event, context) {
-        let interrupted = false;
+    this.unsubscribe = (id) => {
+      if (id === undefined || id === null) {
         for (const key in this.subscribers) {
-            if (isFn(this.subscribers[key])) {
-                event['context'] = context;
-                if (this.subscribers[key](event) === false) {
-                    interrupted = true;
-                }
-            }
+          this.unsubscribe(key)
         }
-        return interrupted ? false : true;
+        return
+      }
+      if (!isFn(id)) {
+        delete this.subscribers[id]
+      } else {
+        delete this.subscribers[id[UNSUBSCRIBE_ID_SYMBOL]]
+      }
     }
-    subscribe(subscriber) {
-        let id;
-        if (isFn(subscriber)) {
-            id = this.subscribers.index + 1;
-            this.subscribers[id] = subscriber;
-            this.subscribers.index++;
+  }
+  dispatch(event, context) {
+    let interrupted = false
+    for (const key in this.subscribers) {
+      if (isFn(this.subscribers[key])) {
+        event['context'] = context
+        if (this.subscribers[key](event) === false) {
+          interrupted = true
         }
-        const unsubscribe = () => {
-            this.unsubscribe(id);
-        };
-        unsubscribe[UNSUBSCRIBE_ID_SYMBOL] = id;
-        return unsubscribe;
+      }
     }
+    return interrupted ? false : true
+  }
+  subscribe(subscriber) {
+    let id
+    if (isFn(subscriber)) {
+      id = this.subscribers.index + 1
+      this.subscribers[id] = subscriber
+      this.subscribers.index++
+    }
+    const unsubscribe = () => {
+      this.unsubscribe(id)
+    }
+    unsubscribe[UNSUBSCRIBE_ID_SYMBOL] = id
+    return unsubscribe
+  }
 }

package/esm/types.d.ts

@@ -1,13 +1,13 @@
-export declare const getType: (obj: any) => any;
-export declare const isFn: (obj: unknown) => obj is (...args: any[]) => any;
-export declare const isWindow: (obj: unknown) => obj is Window;
-export declare const isHTMLElement: (obj: any) => obj is HTMLElement;
-export declare const isArr: (arg: any) => arg is any[];
-export declare const isPlainObj: (obj: unknown) => obj is object;
-export declare const isStr: (obj: unknown) => obj is string;
-export declare const isBool: (obj: unknown) => obj is boolean;
-export declare const isNum: (obj: unknown) => obj is number;
-export declare const isObj: (val: unknown) => val is object;
-export declare const isRegExp: (obj: unknown) => obj is RegExp;
-export declare const isValid: (val: any) => boolean;
-export declare const isValidNumber: (val: any) => val is number;
+export declare const getType: (obj: any) => any
+export declare const isFn: (obj: unknown) => obj is (...args: any[]) => any
+export declare const isWindow: (obj: unknown) => obj is Window
+export declare const isHTMLElement: (obj: any) => obj is HTMLElement
+export declare const isArr: (arg: any) => arg is any[]
+export declare const isPlainObj: (obj: unknown) => obj is object
+export declare const isStr: (obj: unknown) => obj is string
+export declare const isBool: (obj: unknown) => obj is boolean
+export declare const isNum: (obj: unknown) => obj is number
+export declare const isObj: (val: unknown) => val is object
+export declare const isRegExp: (obj: unknown) => obj is RegExp
+export declare const isValid: (val: any) => boolean
+export declare const isValidNumber: (val: any) => val is number

package/esm/types.js

@@ -1,21 +1,20 @@
-const isType = (type) => (obj) => obj != null &&
-    (Array.isArray(type) ? type : [type]).some((t) => getType(obj) === `[object ${t}]`);
-export const getType = (obj) => Object.prototype.toString.call(obj);
-export const isFn = isType([
-    'Function',
-    'AsyncFunction',
-    'GeneratorFunction',
-]);
-export const isWindow = isType('Window');
+const isType = (type) => (obj) =>
+  obj != null &&
+  (Array.isArray(type) ? type : [type]).some(
+    (t) => getType(obj) === `[object ${t}]`
+  )
+export const getType = (obj) => Object.prototype.toString.call(obj)
+export const isFn = isType(['Function', 'AsyncFunction', 'GeneratorFunction'])
+export const isWindow = isType('Window')
 export const isHTMLElement = (obj) => {
-    return obj?.['nodeName'] || obj?.['tagName'];
-};
-export const isArr = Array.isArray;
-export const isPlainObj = isType('Object');
-export const isStr = isType('String');
-export const isBool = isType('Boolean');
-export const isNum = isType('Number');
-export const isObj = (val) => typeof val === 'object';
-export const isRegExp = isType('RegExp');
-export const isValid = (val) => val !== null && val !== undefined;
-export const isValidNumber = (val) => !isNaN(val) && isNum(val);
+  return obj?.['nodeName'] || obj?.['tagName']
+}
+export const isArr = Array.isArray
+export const isPlainObj = isType('Object')
+export const isStr = isType('String')
+export const isBool = isType('Boolean')
+export const isNum = isType('Number')
+export const isObj = (val) => typeof val === 'object'
+export const isRegExp = isType('RegExp')
+export const isValid = (val) => val !== null && val !== undefined
+export const isValidNumber = (val) => !isNaN(val) && isNum(val)

package/esm/uid.d.ts

@@ -1 +1 @@
-export declare function uid(len?: number): string;
+export declare function uid(len?: number): string

package/esm/uid.js

@@ -1,9 +1,9 @@
-let IDX = 36, HEX = '';
-while (IDX--)
-    HEX += IDX.toString(36);
+let IDX = 36,
+  HEX = ''
+while (IDX--) HEX += IDX.toString(36)
 export function uid(len) {
-    let str = '', num = len || 11;
-    while (num--)
-        str += HEX[(Math.random() * 36) | 0];
-    return str;
+  let str = '',
+    num = len || 11
+  while (num--) str += HEX[(Math.random() * 36) | 0]
+  return str
 }

package/lib/animation.d.ts

@@ -1,2 +1,8 @@
-export declare const createUniformSpeedAnimation: (speed: number, callback: (delta: number) => void) => () => void;
-export declare const calcSpeedFactor: (delta?: number, threshold?: number) => number;
+export declare const createUniformSpeedAnimation: (
+  speed: number,
+  callback: (delta: number) => void
+) => () => void
+export declare const calcSpeedFactor: (
+  delta?: number,
+  threshold?: number
+) => number

package/lib/animation.js

@@ -1,38 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcSpeedFactor = exports.createUniformSpeedAnimation = void 0;
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.calcSpeedFactor = exports.createUniformSpeedAnimation = void 0
 const createUniformSpeedAnimation = (speed = 10, callback) => {
-    let request = null;
-    let startTime = null;
-    const start = () => {
-        if (request)
-            return;
-        request = requestAnimationFrame((timestamp) => {
-            if (startTime === null) {
-                startTime = timestamp;
-            }
-            const deltaTime = timestamp - startTime;
-            const delta = (deltaTime / 1000) * speed;
-            callback(delta);
-            request = null;
-            start();
-        });
-    };
-    start();
-    return () => {
-        if (request) {
-            cancelAnimationFrame(request);
-            request = null;
-        }
-        startTime = null;
-    };
-};
-exports.createUniformSpeedAnimation = createUniformSpeedAnimation;
+  let request = null
+  let startTime = null
+  const start = () => {
+    if (request) return
+    request = requestAnimationFrame((timestamp) => {
+      if (startTime === null) {
+        startTime = timestamp
+      }
+      const deltaTime = timestamp - startTime
+      const delta = (deltaTime / 1000) * speed
+      callback(delta)
+      request = null
+      start()
+    })
+  }
+  start()
+  return () => {
+    if (request) {
+      cancelAnimationFrame(request)
+      request = null
+    }
+    startTime = null
+  }
+}
+exports.createUniformSpeedAnimation = createUniformSpeedAnimation
 //越接近阈值，速度越小，越远离阈值，速度越大
 const calcSpeedFactor = (delta = 0, threshold = Infinity) => {
-    if (threshold >= delta) {
-        return (threshold - delta) / threshold;
-    }
-    return 0;
-};
-exports.calcSpeedFactor = calcSpeedFactor;
+  if (threshold >= delta) {
+    return (threshold - delta) / threshold
+  }
+  return 0
+}
+exports.calcSpeedFactor = calcSpeedFactor