urnovl-web-components 0.0.205 → 0.0.207

package/dist/cjs/breakpoint-_1iXUwY8.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var is = require('./is-DimABIBB.js');
+require('./appendTo-BfKC9xDf.js');
+var helper = require('./helper-DkREoOSw.js');
+
+/**
+ * 断点相关的 js 函数
+ * 这些函数直接导出到 mdui 全局对象下，供应用使用。框架内部使用时，为避免循环依赖，从 @mdui/shared 包内导入
+ */
+/**
+ * 获取断点对象，通过返回的对象可用于判断指定宽度、或指定元素的宽度、或当前窗口宽度与各个断点值的关系
+ *
+ * * 未传入参数时，获取的是 `window` 的宽度对应的断点对象
+ * * 若传入数值，则获取的是该数值宽度对应的断点对象
+ * * 若传入 CSS 选择器，则获取的是该选择器对应元素的宽度对应的断点对象
+ * * 若传入 HTML 元素，则获取的是该元素的宽度对应的断点对象
+ * * 若传入 JQ 对象，则获取的是该 JQ 对象中的元素的宽度对应的断点对象
+ *
+ * 返回的对象包含以下方法：
+ *
+ * * `up(breakpoint)`：判断当前宽度是否大于指定断点值
+ * * `down(breakpoint)`：判断当前宽度是否小于指定断点值
+ * * `only(breakpoint)`：判断当前宽度是否在指定断点值内
+ * * `not(breakpoint)`：判断当前宽度是否不在指定断点值内
+ * * `between(startBreakpoint, endBreakpoint)`：判断当前宽度是否在指定断点值之间
+ */
+const breakpoint = (width) => {
+    const window = is.getWindow();
+    const document = is.getDocument();
+    const computedStyle = window.getComputedStyle(document.documentElement);
+    // 容器的宽度
+    const containerWidth = helper.isElement(width)
+        ? is.$(width).innerWidth()
+        : helper.isNumber(width)
+            ? width
+            : is.$(window).innerWidth();
+    // 断点对应的宽度值
+    const getBreakpointValue = (breakpoint) => {
+        const width = computedStyle
+            .getPropertyValue(`--mdui-breakpoint-${breakpoint}`)
+            .toLowerCase();
+        return parseFloat(width);
+    };
+    // 获取比指定断点更大的一个断点
+    const getNextBreakpoint = (breakpoint) => {
+        switch (breakpoint) {
+            case 'xs':
+                return 'sm';
+            case 'sm':
+                return 'md';
+            case 'md':
+                return 'lg';
+            case 'lg':
+                return 'xl';
+            case 'xl':
+                return 'xxl';
+        }
+    };
+    return {
+        /**
+         * 当前宽度是否大于指定断点值
+         * @param breakpoint
+         */
+        up(breakpoint) {
+            return containerWidth >= getBreakpointValue(breakpoint);
+        },
+        /**
+         * 当前宽度是否小于指定断点值
+         * @param breakpoint
+         */
+        down(breakpoint) {
+            return containerWidth < getBreakpointValue(breakpoint);
+        },
+        /**
+         * 当前宽度是否在指定断点值内
+         * @param breakpoint
+         */
+        only(breakpoint) {
+            if (breakpoint === 'xxl') {
+                return this.up(breakpoint);
+            }
+            else {
+                return this.up(breakpoint) && this.down(getNextBreakpoint(breakpoint));
+            }
+        },
+        /**
+         * 当前宽度是否不在指定断点值内
+         * @param breakpoint
+         */
+        not(breakpoint) {
+            return !this.only(breakpoint);
+        },
+        /**
+         * 当前宽度是否在指定断点值之间
+         * @param startBreakpoint
+         * @param endBreakpoint
+         * @returns
+         */
+        between(startBreakpoint, endBreakpoint) {
+            return this.up(startBreakpoint) && this.down(endBreakpoint);
+        },
+    };
+};
+
+exports.breakpoint = breakpoint;
+
+//# sourceMappingURL=breakpoint-_1iXUwY8.js.map

package/dist/cjs/clear-D2hfzKws.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var componentStyle = require('./component-style-C49svGaE.js');
+var svgTag = require('./svg-tag-DmYkL2ug.js');
+
+let IconClear = class IconClear extends componentStyle.h {
+    render() {
+        return svgTag.svgTag('<path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>');
+    }
+};
+IconClear.styles = svgTag.style;
+IconClear = componentStyle.__decorate([
+    componentStyle.t('mdui-icon-clear')
+], IconClear);
+
+//# sourceMappingURL=clear-D2hfzKws.js.map

package/dist/cjs/index-DjruzFrH.js

@@ -0,0 +1,402 @@
+'use strict';
+
+var componentStyle = require('./component-style-C49svGaE.js');
+var helper = require('./helper-DkREoOSw.js');
+var ref = require('./ref-Bm1egJzs.js');
+var when = require('./when-CHOvjp4h.js');
+var is = require('./is-DimABIBB.js');
+require('./appendTo-BfKC9xDf.js');
+var watch = require('./watch-MAiBzcfm.js');
+var motion = require('./motion-D8QvPMRc.js');
+var breakpoint = require('./breakpoint-_1iXUwY8.js');
+var scroll = require('./scroll-Gq3-NfOa.js');
+var observeResize = require('./observeResize-DAgqwwZc.js');
+var layoutItemBase = require('./layout-item-base-CC-JZRal.js');
+
+const style = componentStyle.i `:host{--shape-corner:var(--mdui-shape-corner-large);--z-index:2200;display:none;position:fixed;top:0;bottom:0;left:0;z-index:1;width:22.5rem}:host([placement=right]){left:initial;right:0}:host([mobile]),:host([modal]:not([modal=false i])){top:0!important;right:0;bottom:0!important;width:initial;z-index:var(--z-index)}:host([placement=right][mobile]),:host([placement=right][modal]:not([modal=false i])){left:0}:host([contained]:not([contained=false i])){position:absolute}.overlay{position:absolute;inset:0;z-index:inherit;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto;z-index:inherit;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level0)}:host([mobile]) .panel,:host([modal]:not([modal=false i])) .panel{border-radius:0 var(--shape-corner) var(--shape-corner) 0;max-width:80%;width:22.5rem;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([placement=right]) .panel{left:initial;right:0}:host([placement=right][mobile]) .panel,:host([placement=right][modal]:not([modal=false i])) .panel{border-radius:var(--shape-corner) 0 0 var(--shape-corner)}`;
+
+/**
+ * 在手机端，`modal` 始终为 `true`；大于手机端时，`modal` 属性才开始生效
+ *
+ * @summary 侧边抽屉栏组件
+ *
+ * ```html
+ * <mdui-navigation-drawer>content</mdui-navigation-drawer>
+ * ```
+ *
+ * @event open - 抽屉栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏打开
+ * @event opened - 抽屉栏打开动画完成之后触发
+ * @event close - 抽屉栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏关闭
+ * @event closed - 抽屉栏关闭动画完成之后触发
+ * @event overlay-click - 点击遮罩层时触发
+ *
+ * @slot - 抽屉栏中的内容
+ *
+ * @csspart overlay - 遮罩层
+ * @csspart panel - 抽屉栏容器
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
+ */
+let NavigationDrawer = class NavigationDrawer extends layoutItemBase.LayoutItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否打开抽屉栏
+         */
+        this.open = false;
+        /**
+         * 抽屉栏打开时，是否显示遮罩层
+         *
+         * 在窄屏设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint)），会始终显示遮罩层，无视该参数
+         */
+        this.modal = false;
+        /**
+         * 在有遮罩层的情况下，按下 ESC 键是否关闭抽屉栏
+         */
+        this.closeOnEsc = false;
+        /**
+         * 点击遮罩层时，是否关闭抽屉栏
+         */
+        this.closeOnOverlayClick = false;
+        /**
+         * 抽屉栏的位置。可选值包括：
+         *
+         * * `left`：左侧
+         * * `right`：右侧
+         */
+        this.placement = 'left';
+        /**
+         * 默认情况下，抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时，抽屉栏将相对于其父元素显示。
+         *
+         * **Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。
+         */
+        this.contained = false;
+        // 断点为 mobile 时为 `true` 时，强制使用遮罩层
+        this.mobile = false;
+        this.overlayRef = ref.ii();
+        this.panelRef = ref.ii();
+        this.definedController = new is.DefinedController(this, {
+            needDomReady: true,
+        });
+    }
+    get layoutPlacement() {
+        return this.placement;
+    }
+    get lockTarget() {
+        return this.contained || this.isParentLayout
+            ? this.parentElement
+            : document.documentElement;
+    }
+    get isModal() {
+        return this.mobile || this.modal;
+    }
+    // contained 变更后，修改监听尺寸变化的元素。为 true 时，监听父元素；为 false 时，监听 body
+    async onContainedChange() {
+        await this.definedController.whenDefined();
+        this.observeResize?.unobserve();
+        this.setObserveResize();
+    }
+    onPlacementChange() {
+        if (this.isParentLayout) {
+            this.layoutManager.updateLayout(this);
+        }
+    }
+    async onMobileChange() {
+        if (!this.open || this.isParentLayout || this.contained) {
+            return;
+        }
+        await this.definedController.whenDefined();
+        if (this.isModal) {
+            scroll.lockScreen(this, this.lockTarget);
+            await this.getLockTargetAnimate(false, 0);
+        }
+        else {
+            scroll.unlockScreen(this, this.lockTarget);
+            await this.getLockTargetAnimate(true, 0);
+        }
+    }
+    async onOpenChange() {
+        let panel = this.panelRef.value;
+        let overlay = this.overlayRef.value;
+        const isRight = this.placement === 'right';
+        const easingLinear = motion.getEasing(this, 'linear');
+        const easingEmphasized = motion.getEasing(this, 'emphasized');
+        // 在当前 drawer 位于 layout 中时，设置所有 layout-item 和 layout-main 元素的 transition 样式
+        const setLayoutTransition = (duration, easing) => {
+            is.$(this.layoutManager.getItemsAndMain()).css('transition', helper.isNull(duration) ? null : `all ${duration}ms ${easing}`);
+        };
+        // 停止原有动画
+        const stopOldAnimations = async () => {
+            const elements = [];
+            if (this.isModal) {
+                elements.push(overlay, panel);
+            }
+            else if (!this.isParentLayout) {
+                elements.push(this.lockTarget);
+            }
+            if (this.isParentLayout) {
+                const layoutItems = this.layoutManager.getItemsAndMain();
+                const layoutIndex = layoutItems.indexOf(this);
+                elements.push(...layoutItems.slice(layoutIndex));
+            }
+            if (!this.isModal && !elements.includes(this)) {
+                elements.push(this);
+            }
+            await Promise.all(elements.map((element) => motion.stopAnimations(element)));
+        };
+        // 打开
+        // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
+        if (this.open) {
+            const hasUpdated = this.hasUpdated;
+            if (!hasUpdated) {
+                await this.updateComplete;
+                panel = this.panelRef.value;
+                overlay = this.overlayRef.value;
+            }
+            if (hasUpdated) {
+                const eventProceeded = this.emit('open', { cancelable: true });
+                if (!eventProceeded) {
+                    return;
+                }
+            }
+            await this.definedController.whenDefined();
+            this.style.display = 'block';
+            this.originalTrigger = document.activeElement;
+            if (this.isModal) {
+                this.modalHelper.activate();
+                if (!this.contained) {
+                    scroll.lockScreen(this, this.lockTarget);
+                }
+            }
+            await stopOldAnimations();
+            // 设置聚焦
+            requestAnimationFrame(() => {
+                const autoFocusTarget = this.querySelector('[autofocus]');
+                if (autoFocusTarget) {
+                    autoFocusTarget.focus({ preventScroll: true });
+                }
+                else {
+                    panel.focus({ preventScroll: true });
+                }
+            });
+            const duration = motion.getDuration(this, 'long2');
+            const animations = [];
+            // 模态框 drawer，显示 overlay 动画
+            if (this.isModal) {
+                animations.push(motion.animateTo(overlay, [{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 1 }], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingLinear,
+                }));
+            }
+            // 不位于 layout 中，父元素 padding 变化的动画
+            else if (!this.isParentLayout) {
+                animations.push(this.getLockTargetAnimate(true, hasUpdated ? duration : 0));
+            }
+            // 若位于 layout 中，则 layout-main 的 padding 变化需要有和 drawer 相同的动画
+            // 但首次渲染不执行动画
+            if (this.isParentLayout && hasUpdated) {
+                setLayoutTransition(duration, easingEmphasized);
+                this.layoutManager.updateLayout(this);
+            }
+            // drawer 显示动画
+            animations.push(motion.animateTo(this.isModal ? panel : this, [
+                { transform: `translateX(${isRight ? '' : '-'}100%)` },
+                { transform: 'translateX(0)' },
+            ], {
+                duration: hasUpdated ? duration : 0,
+                easing: easingEmphasized,
+            }));
+            await Promise.all(animations);
+            if (!this.open) {
+                return;
+            }
+            // 若位于 layout 中，则 drawer 动画完成后，移除 layout-main 的动画
+            if (this.isParentLayout && hasUpdated) {
+                setLayoutTransition(null);
+            }
+            if (hasUpdated) {
+                this.emit('opened');
+            }
+        }
+        else if (this.hasUpdated) {
+            // 关闭
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
+                return;
+            }
+            await this.definedController.whenDefined();
+            if (this.isModal) {
+                this.modalHelper.deactivate();
+            }
+            await stopOldAnimations();
+            const duration = motion.getDuration(this, 'short4');
+            const animations = [];
+            // 模态框 drawer，显示 overlay 动画
+            if (this.isModal) {
+                animations.push(motion.animateTo(overlay, [{ opacity: 1 }, { opacity: 0 }], {
+                    duration,
+                    easing: easingLinear,
+                }));
+            }
+            // 不位于 layout 中，父元素 padding 变化的动画
+            else if (!this.isParentLayout) {
+                animations.push(this.getLockTargetAnimate(false, duration));
+            }
+            // 若位于 layout 中，则 layout-main 的 padding 变化需要有和 drawer 相同的动画
+            if (this.isParentLayout) {
+                setLayoutTransition(duration, easingEmphasized);
+                // 关闭动画开始时，drawer 的宽度不变。等到关闭动画结束，drawer 的宽度才变为 0
+                // 为了 layout-main 的动画能在关闭动画开始时就执行，强制调用 updateLayout 更新布局
+                this.layoutManager.updateLayout(this, { width: 0 });
+            }
+            // drawer 显示动画
+            animations.push(motion.animateTo(this.isModal ? panel : this, [
+                { transform: 'translateX(0)' },
+                { transform: `translateX(${isRight ? '' : '-'}100%)` },
+            ], { duration, easing: easingEmphasized }));
+            await Promise.all(animations);
+            if (this.open) {
+                return;
+            }
+            // 若位于 layout 中，则 drawer 动画结束后，移除 layout-main 的动画
+            if (this.isParentLayout) {
+                setLayoutTransition(null);
+            }
+            this.style.display = 'none';
+            if (this.isModal && !this.contained) {
+                scroll.unlockScreen(this, this.lockTarget);
+            }
+            // 抽屉栏关闭后，恢复焦点到原有的元素上
+            const trigger = this.originalTrigger;
+            if (helper.isFunction(trigger?.focus)) {
+                setTimeout(() => trigger.focus());
+            }
+            this.emit('closed');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.modalHelper = new scroll.Modal(this);
+        this.definedController.whenDefined().then(() => {
+            this.setObserveResize();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        scroll.unlockScreen(this, this.lockTarget);
+        this.observeResize?.unobserve();
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.addEventListener('keydown', (event) => {
+            if (this.open &&
+                this.closeOnEsc &&
+                event.key === 'Escape' &&
+                this.isModal) {
+                event.stopPropagation();
+                this.open = false;
+            }
+        });
+    }
+    render() {
+        return componentStyle.ke `${when.nn(this.isModal, () => componentStyle.ke `<div ${ref.Kt(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}"></div>`)}<slot ${ref.Kt(this.panelRef)} part="panel" class="panel" tabindex="0"></slot>`;
+    }
+    setObserveResize() {
+        this.observeResize = observeResize.observeResize(this.contained ? this.parentElement : document.documentElement, () => {
+            const target = this.contained ? this.parentElement : undefined;
+            this.mobile = breakpoint.breakpoint(target).down('md');
+            // 若位于 layout 中，且为模态化，则重新布局时，占据的宽度为 0
+            if (this.isParentLayout) {
+                this.layoutManager.updateLayout(this, {
+                    width: this.isModal ? 0 : undefined,
+                });
+            }
+        });
+    }
+    onOverlayClick() {
+        this.emit('overlay-click');
+        if (this.closeOnOverlayClick) {
+            this.open = false;
+        }
+    }
+    getLockTargetAnimate(open, duration) {
+        const paddingName = this.placement === 'right' ? 'paddingRight' : 'paddingLeft';
+        const panelWidth = is.$(this.panelRef.value).innerWidth() + 'px';
+        return motion.animateTo(this.lockTarget, [
+            { [paddingName]: open ? 0 : panelWidth },
+            { [paddingName]: open ? panelWidth : 0 },
+        ], {
+            duration,
+            easing: motion.getEasing(this, 'emphasized'),
+            fill: 'forwards',
+        });
+    }
+};
+NavigationDrawer.styles = [componentStyle.componentStyle, style];
+componentStyle.__decorate([
+    helper.n({
+        type: Boolean,
+        reflect: true,
+        converter: is.booleanConverter,
+    })
+], NavigationDrawer.prototype, "open", void 0);
+componentStyle.__decorate([
+    helper.n({
+        type: Boolean,
+        reflect: true,
+        converter: is.booleanConverter,
+    })
+], NavigationDrawer.prototype, "modal", void 0);
+componentStyle.__decorate([
+    helper.n({
+        type: Boolean,
+        reflect: true,
+        converter: is.booleanConverter,
+        attribute: 'close-on-esc',
+    })
+], NavigationDrawer.prototype, "closeOnEsc", void 0);
+componentStyle.__decorate([
+    helper.n({
+        type: Boolean,
+        reflect: true,
+        converter: is.booleanConverter,
+        attribute: 'close-on-overlay-click',
+    })
+], NavigationDrawer.prototype, "closeOnOverlayClick", void 0);
+componentStyle.__decorate([
+    helper.n({ reflect: true })
+    // eslint-disable-next-line prettier/prettier
+], NavigationDrawer.prototype, "placement", void 0);
+componentStyle.__decorate([
+    helper.n({
+        type: Boolean,
+        reflect: true,
+        converter: is.booleanConverter,
+    })
+], NavigationDrawer.prototype, "contained", void 0);
+componentStyle.__decorate([
+    helper.n({
+        type: Boolean,
+        reflect: true,
+        converter: is.booleanConverter,
+    })
+], NavigationDrawer.prototype, "mobile", void 0);
+componentStyle.__decorate([
+    watch.watch('contained', true)
+], NavigationDrawer.prototype, "onContainedChange", null);
+componentStyle.__decorate([
+    watch.watch('placement', true)
+], NavigationDrawer.prototype, "onPlacementChange", null);
+componentStyle.__decorate([
+    watch.watch('mobile', true),
+    watch.watch('modal', true)
+], NavigationDrawer.prototype, "onMobileChange", null);
+componentStyle.__decorate([
+    watch.watch('open')
+], NavigationDrawer.prototype, "onOpenChange", null);
+NavigationDrawer = componentStyle.__decorate([
+    componentStyle.t('mdui-navigation-drawer')
+], NavigationDrawer);
+
+//# sourceMappingURL=index-DjruzFrH.js.map