@mdui/shared 1.0.2 → 1.0.4

package/base/mdui-element.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export type UnpackCustomEvent<T> = T extends CustomEvent<infer U> ? U : never;
+export declare class MduiElement<E> extends LitElement {
+    /**
+     * 触发自定义事件。若返回 false，表示事件被取消
+     * @param type
+     * @param options 通常只用到 cancelable 和 detail；bubbles、composed 统一不用
+     */
+    protected emit<K extends keyof E, D extends UnpackCustomEvent<E[K]>>(type: K, options?: CustomEventInit<D>): boolean;
+}
+export interface MduiElement<E> {
+    addEventListener<K extends keyof M, M extends E & HTMLElementEventMap>(type: K, listener: (this: this, ev: M[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M, M extends E & HTMLElementEventMap>(type: K, listener: (this: this, ev: M[K]) => unknown, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}

package/base/mdui-element.js

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+export class MduiElement extends LitElement {
+    /**
+     * 触发自定义事件。若返回 false，表示事件被取消
+     * @param type
+     * @param options 通常只用到 cancelable 和 detail；bubbles、composed 统一不用
+     */
+    emit(type, options) {
+        const event = new CustomEvent(type, Object.assign({
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail: {},
+        }, options));
+        return this.dispatchEvent(event);
+    }
+}

package/helpers/observeResize.js

@@ -16,17 +16,17 @@ export const observeResize = (target, callback) => {
     const result = {
         unobserve: () => {
             $target.each((_, target) => {
-                const coArr = weakMap.get(target) ?? [];
-                const index = coArr.findIndex((co) => co.key === key);
+                const options = weakMap.get(target);
+                const index = options.coArr.findIndex((co) => co.key === key);
                 if (index !== -1) {
-                    coArr.splice(index, 1);
+                    options.coArr.splice(index, 1);
                 }
-                if (!coArr.length) {
+                if (!options.coArr.length) {
                     observer.unobserve(target);
                     weakMap.delete(target);
                 }
                 else {
-                    weakMap.set(target, coArr);
+                    weakMap.set(target, options);
                 }
             });
         },
@@ -37,8 +37,9 @@ export const observeResize = (target, callback) => {
         observer = new ResizeObserver((entries) => {
             entries.forEach((entry) => {
                 const target = entry.target;
-                const coArr = weakMap.get(target);
-                coArr.forEach((co) => {
+                const options = weakMap.get(target);
+                options.entry = entry;
+                options.coArr.forEach((co) => {
                     co.callback.call(result, entry, result);
                 });
             });
@@ -46,10 +47,14 @@ export const observeResize = (target, callback) => {
     }
     // 添加监听
     $target.each((_, target) => {
+        const options = weakMap.get(target) ?? { coArr: [] };
+        // 同一个元素已添加过监听后，再次添加新的监听时，不会立即执行回调函数，所以这里手动调用一次回调函数
+        if (options.coArr.length && options.entry) {
+            callback.call(result, options.entry, result);
+        }
+        options.coArr.push({ callback, key });
+        weakMap.set(target, options);
         observer.observe(target);
-        const coArr = weakMap.get(target) ?? [];
-        coArr.push({ callback, key });
-        weakMap.set(target, coArr);
     });
     return result;
 };

package/helpers/scroll.d.ts

@@ -10,15 +10,19 @@ import '@mdui/jq/methods/width.js';
  * @param fresh 是否重新计算
  */
 export declare const getScrollBarSize: (fresh?: boolean) => number;
+/**
+ * 判断指定元素当前是否有滚动条
+ */
+export declare const hasScrollbar: (target: HTMLElement) => boolean;
 /**
  * 锁定指定元素，禁止滚动。对同一个元素多次调用此方法，只会锁定一次
  * @param source 由该元素触发锁定
- * @param target 锁定该元素的滚动状态，默认为 body
+ * @param target 锁定该元素的滚动状态，默认为 html
  */
 export declare const lockScreen: (source: HTMLElement, target?: HTMLElement) => void;
 /**
  * 解除指定元素的滚动状态锁定。
  * @param source 由该元素触发锁定
- * @param target 锁定该元素的滚动状态，默认为 body
+ * @param target 锁定该元素的滚动状态，默认为 html
  */
 export declare const unlockScreen: (source: HTMLElement, target?: HTMLElement) => void;

package/helpers/scroll.js

@@ -47,33 +47,41 @@ export const getScrollBarSize = (fresh) => {
     }
     return scrollBarSizeCached;
 };
+/**
+ * 判断指定元素当前是否有滚动条
+ */
+export const hasScrollbar = (target) => {
+    return target.scrollHeight > target.clientHeight;
+};
 const lockMap = new WeakMap();
 const className = 'mdui-lock-screen';
 /**
  * 锁定指定元素，禁止滚动。对同一个元素多次调用此方法，只会锁定一次
  * @param source 由该元素触发锁定
- * @param target 锁定该元素的滚动状态，默认为 body
+ * @param target 锁定该元素的滚动状态，默认为 html
  */
 export const lockScreen = (source, target) => {
     const document = getDocument();
-    target ??= document.body;
+    target ??= document.documentElement;
     if (!lockMap.has(target)) {
         lockMap.set(target, new Set());
     }
     const lock = lockMap.get(target);
     lock.add(source);
-    $(target)
-        .addClass(className)
-        .css('width', `calc(100% - ${getScrollBarSize()}px)`);
+    const $target = $(target);
+    if (hasScrollbar(target)) {
+        $target.css('width', `calc(100% - ${getScrollBarSize()}px)`);
+    }
+    $target.addClass(className);
 };
 /**
  * 解除指定元素的滚动状态锁定。
  * @param source 由该元素触发锁定
- * @param target 锁定该元素的滚动状态，默认为 body
+ * @param target 锁定该元素的滚动状态，默认为 html
  */
 export const unlockScreen = (source, target) => {
     const document = getDocument();
-    target ??= document.body;
+    target ??= document.documentElement;
     const lock = lockMap.get(target);
     if (!lock) {
         return;

package/mixins/anchor.d.ts

@@ -11,7 +11,7 @@ type RenderAnchorOptions = {
     tabIndex?: number;
     refDirective?: DirectiveResult<typeof RefDirective>;
 };
-export declare class AnchorMixinInterface extends LitElement {
+export declare class AnchorMixinInterface {
     href?: string;
     download?: string;
     target?: '_blank' | '_parent' | '_self' | '_top';

package/mixins/anchor.js

@@ -20,6 +20,5 @@ export const AnchorMixin = (superclass) => {
     __decorate([
         property({ reflect: true })
     ], AnchorMixinClass.prototype, "rel", void 0);
-    // @ts-ignore
     return AnchorMixinClass;
 };

package/mixins/focusable.d.ts

@@ -4,7 +4,7 @@ import '@mdui/jq/methods/each.js';
 import '@mdui/jq/methods/removeAttr.js';
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { LitElement } from 'lit';
-export declare class FocusableMixinInterface extends LitElement {
+export declare class FocusableMixinInterface {
     autofocus: boolean;
     tabIndex: number;
     protected get focusDisabled(): boolean;

package/mixins/focusable.js

@@ -24,7 +24,7 @@ export const FocusableMixin = (superclass) => {
         constructor() {
             super(...arguments);
             /**
-             * 是否在页面加载完成后自动获得焦点
+             * 是否在页面加载完成后自动获取焦点
              */
             this.autofocus = false;
             /**
@@ -42,7 +42,7 @@ export const FocusableMixin = (superclass) => {
             this._tabIndex = 0;
         }
         /**
-         * 通过 Tab 键在元素之间切换焦点时，tabIndex 属性指定了元素获取焦点的顺序
+         * 元素在使用 Tab 键切换焦点时的顺序
          */
         get tabIndex() {
             const $this = $(this);
@@ -131,11 +131,11 @@ export const FocusableMixin = (superclass) => {
             }
         }
         /**
-         * 将焦点设置在当前元素。
+         * 将焦点设置到当前元素。
          *
-         * 可传入一个对象作为参数。对象属性为：
+         * 可以传入一个对象作为参数，该对象的属性包括：
          *
-         * * `preventScroll`：默认情况下，在聚焦后会滚动页面，以将聚焦的元素滚动到视图中。可将该属性设为 `true` 以阻止页面滚动。
+         * * `preventScroll`：默认情况下，元素获取焦点后，页面会滚动以将该元素滚动到视图中。如果不希望页面滚动，可以将此属性设置为 `true`。
          */
         focus(options) {
             if (this.focusDisabled || !this.focusElement) {
@@ -149,7 +149,7 @@ export const FocusableMixin = (superclass) => {
             }
         }
         /**
-         * 从当前元素中移除焦点
+         * 移除当前元素的焦点
          */
         blur() {
             if (this.focusElement !== this) {
@@ -246,8 +246,7 @@ export const FocusableMixin = (superclass) => {
         })
     ], FocusableMixinClass.prototype, "focusVisible", void 0);
     __decorate([
-        property({ type: Number })
+        property({ type: Number, attribute: 'tabindex' })
     ], FocusableMixinClass.prototype, "tabIndex", null);
-    // @ts-ignore
     return FocusableMixinClass;
 };

package/mixins/scrollBehavior.d.ts

@@ -5,7 +5,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { LitElement } from 'lit';
 type ScrollBehavior = 'hide' | 'shrink' | 'elevate';
 export type ScrollPaddingPosition = 'top' | 'bottom';
-export declare class ScrollBehaviorMixinInterface extends LitElement {
+export declare class ScrollBehaviorMixinInterface {
     scrollTarget?: string | HTMLElement | JQ<HTMLElement>;
     scrollBehavior?: ScrollBehavior;
     scrollThreshold?: number;

package/mixins/scrollBehavior.js

@@ -48,6 +48,7 @@ export const ScrollBehaviorMixin = (superclass) => {
             if ((oldValue && !newValue) || (!oldValue && newValue)) {
                 this.updateContainerPadding();
             }
+            // @ts-ignore
             if (!this.scrollBehavior) {
                 return;
             }
@@ -71,6 +72,7 @@ export const ScrollBehaviorMixin = (superclass) => {
             if (!listening) {
                 return;
             }
+            // @ts-ignore
             if (this.scrollBehavior) {
                 this.updateScrollTop(listening);
                 listening.addEventListener('scroll', this.onListeningScroll);
@@ -98,6 +100,7 @@ export const ScrollBehaviorMixin = (superclass) => {
          * @param behavior 为数组时，只要其中一个行为在 scrollBehavior 中，即返回 `true`
          */
         hasScrollBehavior(behavior) {
+            // @ts-ignore
             const behaviors = (this.scrollBehavior?.split(' ') ??
                 []);
             if (Array.isArray(behavior)) {
@@ -193,9 +196,6 @@ export const ScrollBehaviorMixin = (superclass) => {
     __decorate([
         property({ attribute: 'scroll-target' })
     ], ScrollBehaviorMixinClass.prototype, "scrollTarget", void 0);
-    __decorate([
-        property({ reflect: true, attribute: 'scroll-behavior' })
-    ], ScrollBehaviorMixinClass.prototype, "scrollBehavior", void 0);
     __decorate([
         property({ type: Number, reflect: true, attribute: 'scroll-threshold' })
     ], ScrollBehaviorMixinClass.prototype, "scrollThreshold", void 0);
@@ -205,6 +205,5 @@ export const ScrollBehaviorMixin = (superclass) => {
     __decorate([
         watch('scrollBehavior')
     ], ScrollBehaviorMixinClass.prototype, "onScrollBehaviorChange", null);
-    // @ts-ignore
     return ScrollBehaviorMixinClass;
 };

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@mdui/shared",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "mdui 项目的公共部分",
   "type": "module",
   "files": [
+    "base",
     "controllers",
     "decorators",
     "helpers",

package/helpers/event.d.ts

@@ -1,7 +0,0 @@
-/**
- * 触发自定义事件
- * @param element
- * @param type
- * @param options 通常只用到 cancelable 和 detail；bubbles、composed 统一不用
- */
-export declare const emit: (element: HTMLElement, type: string, options?: CustomEventInit) => CustomEvent;

package/helpers/event.js

@@ -1,17 +0,0 @@
-/**
- * 触发自定义事件
- * @param element
- * @param type
- * @param options 通常只用到 cancelable 和 detail；bubbles、composed 统一不用
- */
-export const emit = (element, type, options) => {
-    const event = new CustomEvent(type, {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-        detail: {},
-        ...options,
-    });
-    element.dispatchEvent(event);
-    return event;
-};