@mdui/shared 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021-present zdhxiong@gmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# @mdui/shared
+
+mdui 内部使用的公共代码
+
+## 安装
+
+```bash
+npm install @mdui/shared --save
+```
+
+
+
+
+

package/controllers/form.d.ts

@@ -0,0 +1,53 @@
+import '@mdui/jq/methods/attr.js';
+import '@mdui/jq/methods/css.js';
+import type { FormControl, FormControlValue } from '@mdui/jq/shared/form.js';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * 在执行表单的 reset() 方法后，使用该 WeakMap 存储指定表单中所有的表单控件
+ * 在表单控件中监听值变更后，需要从该 WeakMap 中判断是否存在该表单控件，
+ * 若存在，则 invalid 设置为 false（不显示验证不通过样式），同时从 WeakMap 中移除该表单控件
+ */
+export declare const formResets: WeakMap<HTMLFormElement, Set<FormControl>>;
+export interface FormControllerOptions {
+    form: (control: FormControl) => HTMLFormElement | null;
+    name: (control: FormControl) => string;
+    value: (control: FormControl) => FormControlValue | undefined;
+    defaultValue: (control: FormControl) => FormControlValue;
+    setValue: (control: FormControl, value: FormControlValue) => void;
+    disabled: (control: FormControl) => boolean;
+    reportValidity: (control: FormControl) => boolean;
+}
+export declare class FormController implements ReactiveController {
+    private host;
+    private form?;
+    private options;
+    constructor(host: ReactiveControllerHost & FormControl, options?: Partial<FormControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /**
+     * 获取当前表单控件关联的 `<form>` 元素
+     */
+    getForm(): HTMLFormElement | null;
+    /**
+     * 重置整个表单，所有表单控件恢复成默认值
+     */
+    reset(invoker?: HTMLElement & {
+        name: string;
+        value: string;
+    }): void;
+    /**
+     * 提交整个表单
+     */
+    submit(invoker?: HTMLElement & {
+        name: string;
+        value: string;
+    }): void;
+    private attachForm;
+    private detachForm;
+    private doAction;
+    private onFormData;
+    private onFormSubmit;
+    private onFormReset;
+    private reportFormValidity;
+}

package/controllers/form.js

@@ -0,0 +1,214 @@
+/**
+ * 参考：https://github.com/shoelace-style/shoelace/blob/next/src/internal/form.ts
+ */
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/attr.js';
+import '@mdui/jq/methods/css.js';
+import { formCollections } from '@mdui/jq/shared/form.js';
+import { isFunction, isString, isUndefined } from '@mdui/jq/shared/helper.js';
+/**
+ * 在执行 `<form>` 元素的 reportValidity() 时，不会执行 mdui 组件的 reportValidity() 方法，
+ * 因此在 mdui 表单控件的 hostConnected 中把 `<form>` 的 reportValidity 替换为自定义方法，
+ * hostDisconnected 中恢复为 原生 reportValidity 方法
+ *
+ * 该 WeakMap 用于存储指定 `<form>` 的原生 reportValidity 方法
+ *
+ * 日后使用 ElementInternals 可不再进行该处理，但当前 safari 浏览器不支持。
+ */
+const reportValidityOverloads = new WeakMap();
+/**
+ * 在执行表单的 reset() 方法后，使用该 WeakMap 存储指定表单中所有的表单控件
+ * 在表单控件中监听值变更后，需要从该 WeakMap 中判断是否存在该表单控件，
+ * 若存在，则 invalid 设置为 false（不显示验证不通过样式），同时从 WeakMap 中移除该表单控件
+ */
+export const formResets = new WeakMap();
+export class FormController {
+    constructor(host, options) {
+        (this.host = host).addController(this);
+        this.options = {
+            form: (control) => {
+                const formId = $(control).attr('form');
+                if (formId) {
+                    const root = control.getRootNode();
+                    return root.getElementById(formId);
+                }
+                return control.closest('form');
+            },
+            name: (control) => control.name,
+            value: (control) => control.value,
+            defaultValue: (control) => control.defaultValue,
+            setValue: (control, value) => (control.value = value),
+            disabled: (control) => control.disabled,
+            reportValidity: (control) => isFunction(control.reportValidity) ? control.reportValidity() : true,
+            ...options,
+        };
+        this.onFormData = this.onFormData.bind(this);
+        this.onFormSubmit = this.onFormSubmit.bind(this);
+        this.onFormReset = this.onFormReset.bind(this);
+        this.reportFormValidity = this.reportFormValidity.bind(this);
+    }
+    hostConnected() {
+        this.form = this.options.form(this.host);
+        if (this.form) {
+            this.attachForm(this.form);
+        }
+    }
+    hostDisconnected() {
+        this.detachForm();
+    }
+    hostUpdated() {
+        const form = this.options.form(this.host);
+        if (!form) {
+            this.detachForm();
+        }
+        if (form && this.form !== form) {
+            this.detachForm();
+            this.attachForm(form);
+        }
+    }
+    /**
+     * 获取当前表单控件关联的 `<form>` 元素
+     */
+    getForm() {
+        var _a;
+        return (_a = this.form) !== null && _a !== void 0 ? _a : null;
+    }
+    /**
+     * 重置整个表单，所有表单控件恢复成默认值
+     */
+    reset(invoker) {
+        this.doAction('reset', invoker);
+    }
+    /**
+     * 提交整个表单
+     */
+    submit(invoker) {
+        this.doAction('submit', invoker);
+    }
+    attachForm(form) {
+        if (!form) {
+            this.form = undefined;
+            return;
+        }
+        this.form = form;
+        if (formCollections.has(this.form)) {
+            formCollections.get(this.form).add(this.host);
+        }
+        else {
+            formCollections.set(this.form, new Set([this.host]));
+        }
+        this.form.addEventListener('formdata', this.onFormData);
+        this.form.addEventListener('submit', this.onFormSubmit);
+        this.form.addEventListener('reset', this.onFormReset);
+        if (!reportValidityOverloads.has(this.form)) {
+            reportValidityOverloads.set(this.form, this.form.reportValidity);
+            this.form.reportValidity = () => this.reportFormValidity();
+        }
+    }
+    detachForm() {
+        if (this.form) {
+            formCollections.get(this.form).delete(this.host);
+            this.form.removeEventListener('formdata', this.onFormData);
+            this.form.removeEventListener('submit', this.onFormSubmit);
+            this.form.removeEventListener('reset', this.onFormReset);
+            if (reportValidityOverloads.has(this.form) &&
+                !formCollections.get(this.form).size) {
+                this.form.reportValidity = reportValidityOverloads.get(this.form);
+                reportValidityOverloads.delete(this.form);
+            }
+        }
+    }
+    doAction(type, invoker) {
+        if (!this.form) {
+            return;
+        }
+        const $button = $(`<button type="${type}">`).css({
+            position: 'absolute',
+            width: 0,
+            height: 0,
+            clipPath: 'inset(50%)',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+        });
+        const button = $button[0];
+        if (invoker) {
+            button.name = invoker.name;
+            button.value = invoker.value;
+            [
+                'formaction',
+                'formenctype',
+                'formmethod',
+                'formnovalidate',
+                'formtarget',
+            ].forEach((attr) => {
+                $button.attr(attr, $(invoker).attr(attr));
+            });
+        }
+        this.form.append(button);
+        button.click();
+        button.remove();
+    }
+    onFormData(event) {
+        const disabled = this.options.disabled(this.host);
+        const name = this.options.name(this.host);
+        const value = this.options.value(this.host);
+        // 对于按钮，仅在 type="submit" 时，才提交值。已在 doAction() 方法中把 name、value 注入到 <button> 元素上
+        const isButton = [
+            'mdui-button',
+            'mdui-button-icon',
+            'mdui-chip',
+            'mdui-fab',
+            'mdui-segmented-button',
+        ].includes(this.host.tagName.toLowerCase());
+        if (!disabled &&
+            !isButton &&
+            isString(name) &&
+            name &&
+            !isUndefined(value)) {
+            if (Array.isArray(value)) {
+                value.forEach((val) => {
+                    event.formData.append(name, val.toString());
+                });
+            }
+            else {
+                event.formData.append(name, value.toString());
+            }
+        }
+    }
+    onFormSubmit(event) {
+        const disabled = this.options.disabled(this.host);
+        const reportValidity = this.options.reportValidity;
+        if (this.form &&
+            !this.form.noValidate &&
+            !disabled &&
+            !reportValidity(this.host)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    onFormReset() {
+        if (this.form) {
+            this.options.setValue(this.host, this.options.defaultValue(this.host));
+            // 取消 invalid 状态。
+            // 此外，还需要在各个组件内，监听值的变更，判断 formResets 中是否存在当前表单控件。若存在则 invalid 设为 false；不存在则设置为 checkValidity() 的值
+            // @ts-ignore
+            this.host.invalid = false;
+            if (formResets.has(this.form)) {
+                formResets.get(this.form).add(this.host);
+            }
+            else {
+                formResets.set(this.form, new Set([this.host]));
+            }
+        }
+    }
+    reportFormValidity() {
+        if (this.form && !this.form.noValidate) {
+            for (const element of this.form.querySelectorAll('*')) {
+                if (isFunction(element.reportValidity) && !element.reportValidity()) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+}

package/controllers/has-slot.d.ts

@@ -0,0 +1,17 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+type SlotName = '[default]' | string;
+/**
+ * 检查指定的 slot 是否存在
+ */
+export declare class HasSlotController implements ReactiveController {
+    private host;
+    private slotNames;
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: SlotName[]);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    test(slotName: SlotName): boolean;
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    private onSlotChange;
+}
+export {};

package/controllers/has-slot.js

@@ -0,0 +1,46 @@
+/**
+ * 检查指定的 slot 是否存在
+ */
+export class HasSlotController {
+    constructor(host, ...slotNames) {
+        this.slotNames = [];
+        (this.host = host).addController(this);
+        this.slotNames = slotNames;
+        this.onSlotChange = this.onSlotChange.bind(this);
+    }
+    hostConnected() {
+        this.host.shadowRoot.addEventListener('slotchange', this.onSlotChange);
+    }
+    hostDisconnected() {
+        this.host.shadowRoot.removeEventListener('slotchange', this.onSlotChange);
+    }
+    test(slotName) {
+        return slotName === '[default]'
+            ? this.hasDefaultSlot()
+            : this.hasNamedSlot(slotName);
+    }
+    hasDefaultSlot() {
+        return [...this.host.childNodes].some((node) => {
+            if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
+                return true;
+            }
+            if (node.nodeType === node.ELEMENT_NODE) {
+                const el = node;
+                if (!el.hasAttribute('slot')) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+    hasNamedSlot(name) {
+        return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+    }
+    onSlotChange(event) {
+        const slot = event.target;
+        if ((this.slotNames.includes('[default]') && !slot.name) ||
+            (slot.name && this.slotNames.includes(slot.name))) {
+            this.host.requestUpdate();
+        }
+    }
+}

package/controllers/hover.d.ts

@@ -0,0 +1,34 @@
+import '@mdui/jq/methods/off.js';
+import '@mdui/jq/methods/on.js';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { Ref } from 'lit/directives/ref.js';
+/**
+ * 检查当前鼠标是否放在指定元素上，及进入、离开元素执行对于的回调
+ */
+export declare class HoverController implements ReactiveController {
+    /**
+     * 当前鼠标是否放在元素上
+     */
+    isHover: boolean;
+    private readonly host;
+    private readonly elementRef;
+    private readonly uniqueID;
+    private readonly enterEventName;
+    private readonly leaveEventName;
+    private mouseEnterItems;
+    private mouseLeaveItems;
+    constructor(host: ReactiveControllerHost & Element, elementRef: Ref<HTMLElement>);
+    hostDisconnected(): void;
+    /**
+     * 指定鼠标移入时的回调函数
+     * @param callback
+     * @param one 是否仅执行一次
+     */
+    onMouseEnter(callback: () => void, one?: boolean): void;
+    /**
+     * 指定鼠标移出时的回调函数
+     * @param callback
+     * @param one 是否仅执行一次
+     */
+    onMouseLeave(callback: () => void, one?: boolean): void;
+}

package/controllers/hover.js

@@ -0,0 +1,62 @@
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/off.js';
+import '@mdui/jq/methods/on.js';
+import { uniqueId } from '../helpers/uniqueId.js';
+/**
+ * 检查当前鼠标是否放在指定元素上，及进入、离开元素执行对于的回调
+ */
+export class HoverController {
+    constructor(host, elementRef) {
+        /**
+         * 当前鼠标是否放在元素上
+         */
+        this.isHover = false;
+        this.uniqueID = uniqueId();
+        this.enterEventName = `mouseenter.${this.uniqueID}.hoverController`;
+        this.leaveEventName = `mouseleave.${this.uniqueID}.hoverController`;
+        this.mouseEnterItems = [];
+        this.mouseLeaveItems = [];
+        (this.host = host).addController(this);
+        this.elementRef = elementRef;
+        this.host.updateComplete.then(() => {
+            $(this.elementRef.value)
+                .on(this.enterEventName, () => {
+                this.isHover = true;
+                this.mouseEnterItems.forEach((item, index, items) => {
+                    item.callback();
+                    if (item.one) {
+                        items.splice(index, 1);
+                    }
+                });
+            })
+                .on(this.leaveEventName, () => {
+                this.isHover = false;
+                this.mouseLeaveItems.forEach((item, index, items) => {
+                    item.callback();
+                    if (item.one) {
+                        items.splice(index, 1);
+                    }
+                });
+            });
+        });
+    }
+    hostDisconnected() {
+        $(this.elementRef.value).off(this.enterEventName).off(this.leaveEventName);
+    }
+    /**
+     * 指定鼠标移入时的回调函数
+     * @param callback
+     * @param one 是否仅执行一次
+     */
+    onMouseEnter(callback, one = false) {
+        this.mouseEnterItems.push({ callback, one });
+    }
+    /**
+     * 指定鼠标移出时的回调函数
+     * @param callback
+     * @param one 是否仅执行一次
+     */
+    onMouseLeave(callback, one = false) {
+        this.mouseLeaveItems.push({ callback, one });
+    }
+}

package/decorators/default-value.d.ts

@@ -0,0 +1,16 @@
+/**
+ * defaultValue 装饰器。在 attribute 属性变更时，若值和 property 值不一致，则会保存新的 attribute 值
+ *
+ * 用于在调用表单的 reset() 方法时，还原成初始值
+ *
+ * @property({ reflect: true }) value = '';
+ * @defaultValue() defaultValue = '';
+ *
+ * @property({ type: Boolean, reflect: true }) checked = false;
+ * @defaultValue('checked') defaultChecked = false;
+ */
+import type { ReactiveElement } from 'lit';
+/**
+ * @param propertyName 对应的属性名
+ */
+export declare function defaultValue(propertyName?: string): (proto: ReactiveElement, key: string) => void;

package/decorators/default-value.js

@@ -0,0 +1,40 @@
+/**
+ * defaultValue 装饰器。在 attribute 属性变更时，若值和 property 值不一致，则会保存新的 attribute 值
+ *
+ * 用于在调用表单的 reset() 方法时，还原成初始值
+ *
+ * @property({ reflect: true }) value = '';
+ * @defaultValue() defaultValue = '';
+ *
+ * @property({ type: Boolean, reflect: true }) checked = false;
+ * @defaultValue('checked') defaultChecked = false;
+ */
+import { defaultConverter } from 'lit';
+import { isFunction, isString } from '@mdui/jq/shared/helper.js';
+/**
+ * @param propertyName 对应的属性名
+ */
+export function defaultValue(propertyName = 'value') {
+    return (proto, key) => {
+        const constructor = proto.constructor;
+        const attributeChangedCallback = constructor.prototype.attributeChangedCallback;
+        constructor.prototype.attributeChangedCallback = function (name, old, value) {
+            var _a;
+            const options = constructor.getPropertyOptions(propertyName);
+            const attributeName = isString(options.attribute)
+                ? options.attribute
+                : propertyName;
+            if (name === attributeName) {
+                const converter = options.converter || defaultConverter;
+                const fromAttribute = isFunction(converter)
+                    ? converter
+                    : (_a = converter === null || converter === void 0 ? void 0 : converter.fromAttribute) !== null && _a !== void 0 ? _a : defaultConverter.fromAttribute;
+                const newValue = fromAttribute(value, options.type);
+                if (this[propertyName] !== newValue) {
+                    this[key] = newValue;
+                }
+            }
+            attributeChangedCallback.call(this, name, old, value);
+        };
+    };
+}

package/decorators/watch.d.ts

@@ -0,0 +1,17 @@
+/**
+ * watch 装饰器。在 @property 或 @state 属性变更时，且在组件更新前触发
+ *
+ * 如果要等属性变更后，且组件更新完成再执行，可以在函数中执行 `await this.updateComplete`
+ * 如果要等组件首次渲染完后再监听属性，可以传入第二个参数 true。或者在函数中通过 `this.hasUpdated` 进行判断
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *
+ * }
+ */
+import type { LitElement } from 'lit';
+/**
+ * @param propName 监听的属性名
+ * @param waitUntilFirstUpdate 是否等首次渲染完后再监听
+ */
+export declare function watch(propName: string, waitUntilFirstUpdate?: boolean): <T extends LitElement>(proto: T, functionName: string) => void;

package/decorators/watch.js

@@ -0,0 +1,37 @@
+/**
+ * watch 装饰器。在 @property 或 @state 属性变更时，且在组件更新前触发
+ *
+ * 如果要等属性变更后，且组件更新完成再执行，可以在函数中执行 `await this.updateComplete`
+ * 如果要等组件首次渲染完后再监听属性，可以传入第二个参数 true。或者在函数中通过 `this.hasUpdated` 进行判断
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *
+ * }
+ */
+/**
+ * @param propName 监听的属性名
+ * @param waitUntilFirstUpdate 是否等首次渲染完后再监听
+ */
+export function watch(propName, waitUntilFirstUpdate = false) {
+    return (proto, functionName) => {
+        // @ts-ignore
+        const { update } = proto;
+        if (propName in proto) {
+            // @ts-ignore
+            proto.update = function (changedProperties) {
+                if (changedProperties.has(propName)) {
+                    const oldValue = changedProperties.get(propName);
+                    const newValue = this[propName];
+                    if (oldValue !== newValue) {
+                        if (!waitUntilFirstUpdate || this.hasUpdated) {
+                            // @ts-ignore
+                            this[functionName](oldValue, newValue);
+                        }
+                    }
+                }
+                update.call(this, changedProperties);
+            };
+        }
+    };
+}

package/helpers/animate.d.ts

@@ -0,0 +1,2 @@
+export declare function animateTo(el: HTMLElement | undefined, keyframes: Keyframe[], options: KeyframeAnimationOptions): Promise<unknown>;
+export declare function stopAnimations(el?: HTMLElement): Promise<unknown>;

package/helpers/animate.js

@@ -0,0 +1,37 @@
+import { isNumber } from '@mdui/jq/shared/helper.js';
+export function animateTo(el, keyframes, options) {
+    if (!el) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+        if (options.duration === Infinity) {
+            throw new Error('Promise-based animations must be finite.');
+        }
+        if (isNumber(options.duration) && isNaN(options.duration)) {
+            options.duration = 0;
+        }
+        if (options.easing === '') {
+            options.easing = 'linear';
+        }
+        const animation = el.animate(keyframes, options);
+        animation.addEventListener('cancel', resolve, { once: true });
+        animation.addEventListener('finish', resolve, { once: true });
+    });
+}
+export function stopAnimations(el) {
+    if (!el) {
+        return Promise.resolve();
+    }
+    return Promise.all(el.getAnimations().map((animation) => {
+        return new Promise((resolve) => {
+            const handleAnimationEvent = requestAnimationFrame(resolve);
+            animation.addEventListener('cancel', () => handleAnimationEvent, {
+                once: true,
+            });
+            animation.addEventListener('finish', () => handleAnimationEvent, {
+                once: true,
+            });
+            animation.cancel();
+        });
+    }));
+}

package/helpers/breakpoint.d.ts

@@ -0,0 +1,49 @@
+import '@mdui/jq/methods/innerWidth.js';
+import type { JQ } from '@mdui/jq/shared/core.js';
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * 获取断点对象，通过返回的对象可用于判断指定宽度、或指定元素的宽度、或当前窗口宽度与各个断点值的关系
+ *
+ * * 未传入参数时，获取的是 `window` 的宽度对应的断点对象
+ * * 若传入数值，则获取的是该数值宽度对应的断点对象
+ * * 若传入 CSS 选择器，则获取的是该选择器对应元素的宽度对应的断点对象
+ * * 若传入 HTML 元素，则获取的是该元素的宽度对应的断点对象
+ * * 若传入 JQ 对象，则获取的是该 JQ 对象中的元素的宽度对应的断点对象
+ *
+ * 返回的对象包含以下方法：
+ *
+ * * `up(breakpoint)`：判断当前宽度是否大于指定断点值
+ * * `down(breakpoint)`：判断当前宽度是否小于指定断点值
+ * * `only(breakpoint)`：判断当前宽度是否在指定断点值内
+ * * `not(breakpoint)`：判断当前宽度是否不在指定断点值内
+ * * `between(startBreakpoint, endBreakpoint)`：判断当前宽度是否在指定断点值之间
+ */
+export declare const breakpoint: (width?: number | string | HTMLElement | JQ<HTMLElement>) => {
+    /**
+     * 当前宽度是否大于指定断点值
+     * @param breakpoint
+     */
+    up(breakpoint: Breakpoint): boolean;
+    /**
+     * 当前宽度是否小于指定断点值
+     * @param breakpoint
+     */
+    down(breakpoint: Breakpoint): boolean;
+    /**
+     * 当前宽度是否在指定断点值内
+     * @param breakpoint
+     */
+    only(breakpoint: Breakpoint): boolean;
+    /**
+     * 当前宽度是否不在指定断点值内
+     * @param breakpoint
+     */
+    not(breakpoint: Breakpoint): boolean;
+    /**
+     * 当前宽度是否在指定断点值之间
+     * @param startBreakpoint
+     * @param endBreakpoint
+     * @returns
+     */
+    between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
+};