mdui 1.0.2 → 2.0.0

package/components/ripple/ripple-mixin.js

@@ -0,0 +1,258 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/index.js';
+import { isArrayLike } from '@mdui/jq/shared/helper.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import './index.js';
+/**
+ * hover, pressed, dragged 三个属性用于添加到 rippleTarget 属性指定的元素上，供 CSS 选择题添加样式
+ *
+ * TODO: dragged 功能
+ *
+ * NOTE:
+ * 不支持触控的屏幕上事件顺序为：pointerdown -> (8ms) -> mousedown -> pointerup -> (1ms) -> mouseup -> (1ms) -> click
+ *
+ * 支持触控的屏幕上事件顺序为：pointerdown -> (8ms) -> touchstart -> pointerup -> (1ms) -> touchend -> (5ms) -> mousedown -> mouseup -> click
+ * pointermove 比较灵敏，有可能触发了 pointermove 但没有触发 touchmove
+ *
+ * 支持触摸笔的屏幕上事件顺序为：todo
+ */
+export const RippleMixin = (superclass) => {
+    class Mixin extends superclass {
+        constructor() {
+            super(...arguments);
+            /**
+             * 是否禁用涟漪动画
+             */
+            this.noRipple = false;
+            /**
+             * 当前激活的是第几个 <mdui-ripple>。仅一个组件中有多个 <mdui-ripple> 时可以使用该属性
+             * 若值为 undefined，则组件中所有 <mdui-ripple> 都激活
+             */
+            this.rippleIndex = undefined;
+            /**
+             * 获取当前激活的是第几个 <mdui-ripple>。仅一个组件中有多个 <mdui-ripple> 时可以使用该属性
+             * 若值为 undefined，则组件中所有 <mdui-ripple> 都激活
+             * 可在子类中手动指定该方法，指定需要激活的 ripple
+             */
+            this.getRippleIndex = () => this.rippleIndex;
+        }
+        /**
+         * 子类要添加该属性，指向 <mdui-ripple> 元素
+         * 如果一个组件中包含多个 <mdui-ripple> 元素，则这里可以是一个数组或 NodeList
+         */
+        get rippleElement() {
+            throw new Error('Must implement rippleElement getter!');
+        }
+        /**
+         * 子类要实现该属性，表示是否禁用 ripple
+         * 如果一个组件中包含多个 <mdui-ripple> 元素，则这里可以是一个数组；也可以是单个值，同时控制多个 <mdui-ripple> 元素
+         */
+        get rippleDisabled() {
+            throw new Error('Must implement rippleDisabled getter!');
+        }
+        /**
+         * 当前 <mdui-ripple> 元素相对于哪个元素存在，即 hover、pressed、dragged 属性要添加到哪个元素上，默认为 :host
+         * 如果需要修改该属性，则子类可以实现该属性
+         * 如果一个组件中包含多个 <mdui-ripple> 元素，则这里可以是一个数组；也可以是单个值，同时控制多个 <mdui-ripple> 元素
+         */
+        get rippleTarget() {
+            return this;
+        }
+        firstUpdated(changedProperties) {
+            super.firstUpdated(changedProperties);
+            const $rippleTarget = $(this.rippleTarget);
+            // 监听到事件时，是在第几个 <mdui-ripple> 上触发的事件，记录到 this.rippleIndex 中
+            const setRippleIndex = (event) => {
+                if (isArrayLike(this.rippleTarget)) {
+                    this.rippleIndex = $rippleTarget.index(event.target);
+                }
+            };
+            const rippleTargetArr = isArrayLike(this.rippleTarget)
+                ? this.rippleTarget
+                : [this.rippleTarget];
+            rippleTargetArr.forEach((rippleTarget) => {
+                rippleTarget.addEventListener('pointerdown', (event) => {
+                    setRippleIndex(event);
+                    this.startPress(event);
+                });
+                rippleTarget.addEventListener('pointerenter', (event) => {
+                    setRippleIndex(event);
+                    this.startHover(event);
+                });
+                rippleTarget.addEventListener('pointerleave', (event) => {
+                    setRippleIndex(event);
+                    this.endHover(event);
+                });
+                rippleTarget.addEventListener('focus', (event) => {
+                    setRippleIndex(event);
+                    this.startFocus();
+                });
+                rippleTarget.addEventListener('blur', (event) => {
+                    setRippleIndex(event);
+                    this.endFocus();
+                });
+            });
+        }
+        /**
+         * 若存在多个 <mdui-ripple>，但 rippleTarget 为同一个，则 hover 状态无法在多个 <mdui-ripple> 之间切换
+         * 所以把 startHover 和 endHover 设置为 protected，供子类调用
+         * 子类中，在 getRippleIndex() 的返回值变更前调用 endHover(event)，变更后调用 startHover(event)
+         */
+        startHover(event) {
+            if (event.pointerType !== 'mouse' || this.isRippleDisabled()) {
+                return;
+            }
+            this.getRippleTarget().setAttribute('hover', '');
+            this.getRippleElement().startHover();
+        }
+        endHover(event) {
+            if (event.pointerType !== 'mouse' || this.isRippleDisabled()) {
+                return;
+            }
+            this.getRippleTarget().removeAttribute('hover');
+            this.getRippleElement().endHover();
+        }
+        /**
+         * 当前激活的 <mdui-ripple> 元素是否被禁用
+         */
+        isRippleDisabled() {
+            const disabled = this.rippleDisabled;
+            if (!Array.isArray(disabled)) {
+                return disabled;
+            }
+            const rippleIndex = this.getRippleIndex();
+            if (rippleIndex !== undefined) {
+                return disabled[rippleIndex];
+            }
+            return disabled.length ? disabled[0] : false;
+        }
+        /**
+         * 获取当前激活的 <mdui-ripple> 元素实例
+         */
+        getRippleElement() {
+            const ripple = this.rippleElement;
+            if (!isArrayLike(ripple)) {
+                return ripple;
+            }
+            const rippleIndex = this.getRippleIndex();
+            if (rippleIndex !== undefined) {
+                return ripple[rippleIndex];
+            }
+            return ripple[0];
+        }
+        /**
+         * 获取当前激活的 <mdui-ripple> 元素相对于哪个元素存在
+         */
+        getRippleTarget() {
+            const target = this.rippleTarget;
+            if (!isArrayLike(target)) {
+                return target;
+            }
+            const rippleIndex = this.getRippleIndex();
+            if (rippleIndex !== undefined) {
+                return target[rippleIndex];
+            }
+            return target[0];
+        }
+        startFocus() {
+            if (this.isRippleDisabled()) {
+                return;
+            }
+            this.getRippleElement().startFocus();
+        }
+        endFocus() {
+            if (this.isRippleDisabled()) {
+                return;
+            }
+            this.getRippleElement().endFocus();
+        }
+        startPress(event) {
+            // 为鼠标时操作，仅响应鼠标左键点击
+            if (this.isRippleDisabled() || event.button) {
+                return;
+            }
+            const target = this.getRippleTarget();
+            target.setAttribute('pressed', '');
+            // 手指触摸触发涟漪
+            if (['touch', 'pen'].includes(event.pointerType)) {
+                let hidden = false;
+                // 手指触摸后，延迟一段时间触发涟漪，避免手指滑动时也触发涟漪
+                let timer = setTimeout(() => {
+                    timer = 0;
+                    this.getRippleElement().startPress(event);
+                }, 70);
+                const hideRipple = () => {
+                    // 如果手指没有移动，且涟漪动画还没有开始，则开始涟漪动画
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = 0;
+                        this.getRippleElement().startPress(event);
+                    }
+                    if (!hidden) {
+                        hidden = true;
+                        this.endPress();
+                    }
+                    target.removeEventListener('pointerup', hideRipple);
+                    target.removeEventListener('pointercancel', hideRipple);
+                };
+                // 手指移动后，移除涟漪动画
+                const touchMove = () => {
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = 0;
+                    }
+                    target.removeEventListener('touchmove', touchMove);
+                };
+                // pointermove 事件过于灵敏，可能在未触发 touchmove 的情况下，触发了 pointermove 事件，导致正常的点击操作没有显示涟漪
+                // 因此这里监听 touchmove 事件
+                target.addEventListener('touchmove', touchMove);
+                target.addEventListener('pointerup', hideRipple);
+                target.addEventListener('pointercancel', hideRipple);
+            }
+            // 鼠标点击触发涟漪，点击后立即触发涟漪（仅鼠标左键能触发涟漪）
+            if (event.pointerType === 'mouse' && event.button === 0) {
+                const hideRipple = () => {
+                    this.endPress();
+                    target.removeEventListener('pointerup', hideRipple);
+                    target.removeEventListener('pointercancel', hideRipple);
+                    target.removeEventListener('pointerleave', hideRipple);
+                };
+                this.getRippleElement().startPress(event);
+                target.addEventListener('pointerup', hideRipple);
+                target.addEventListener('pointercancel', hideRipple);
+                target.addEventListener('pointerleave', hideRipple);
+            }
+        }
+        endPress() {
+            if (this.isRippleDisabled()) {
+                return;
+            }
+            this.getRippleTarget().removeAttribute('pressed');
+            this.getRippleElement().endPress();
+        }
+        startDrag() {
+            if (this.isRippleDisabled()) {
+                return;
+            }
+            this.getRippleElement().startDrag();
+        }
+        endDrag() {
+            if (this.isRippleDisabled()) {
+                return;
+            }
+            this.getRippleElement().endDrag();
+        }
+    }
+    __decorate([
+        property({
+            type: Boolean,
+            reflect: true,
+            converter: booleanConverter,
+            attribute: 'no-ripple',
+        })
+    ], Mixin.prototype, "noRipple", void 0);
+    // @ts-ignore
+    return Mixin;
+};

package/components/ripple/style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/components/ripple/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{position:absolute;top:0;left:0;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.surface{position:absolute;top:0;left:0;width:100%;height:100%;transition-duration:280ms;transition-property:background-color;pointer-events:none;transition-timing-function:var(--mdui-motion-easing-standard)}.hover{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-hover))}:host-context([focus-visible]) .focused{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-focus))}.dragged{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-dragged))}.wave{position:absolute;z-index:1;background-color:rgb(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)));border-radius:50%;transform:translate3d(0,0,0) scale(.4);opacity:0;animation:225ms ease 0s 1 normal forwards running mdui-comp-ripple-radius-in,75ms ease 0s 1 normal forwards running mdui-comp-ripple-opacity-in;pointer-events:none}.out{transform:translate3d(var(--mdui-comp-ripple-transition-x,0),var(--mdui-comp-ripple-transition-y,0),0) scale(1);animation:150ms ease 0s 1 normal none running mdui-comp-ripple-opacity-out}@keyframes mdui-comp-ripple-radius-in{from{transform:translate3d(0,0,0) scale(.4);animation-timing-function:var(--mdui-motion-easing-standard)}to{transform:translate3d(var(--mdui-comp-ripple-transition-x,0),var(--mdui-comp-ripple-transition-y,0),0) scale(1)}}@keyframes mdui-comp-ripple-opacity-in{from{opacity:0;animation-timing-function:linear}to{opacity:var(--mdui-state-layer-pressed)}}@keyframes mdui-comp-ripple-opacity-out{from{animation-timing-function:linear;opacity:var(--mdui-state-layer-pressed)}to{opacity:0}}`;

package/components/ripple.d.ts

@@ -0,0 +1 @@
+export * from './ripple/index.js';

package/components/ripple.js

@@ -0,0 +1 @@
+export * from './ripple/index.js';

package/components/segmented-button/segmented-button-group-style.d.ts

@@ -0,0 +1 @@
+export declare const segmentedButtonGroupStyle: import("lit").CSSResult;

package/components/segmented-button/segmented-button-group-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const segmentedButtonGroupStyle = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;height:2.5rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height);color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([full-width]){display:flex;flex-wrap:nowrap}input,select{position:absolute;width:100%;height:100%;padding:0;opacity:0;pointer-events:none}`;

package/components/segmented-button/segmented-button-group.d.ts

@@ -0,0 +1,125 @@
+import { LitElement } from 'lit';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import type { FormControl } from '@mdui/jq/shared/form.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 分段按钮组件。需与 `<mdui-segmented-button>` 组件配合使用
+ *
+ * ```html
+ * <mdui-segmented-button-group>
+ * ..<mdui-segmented-button>Day</mdui-segmented-button>
+ * ..<mdui-segmented-button>Week</mdui-segmented-button>
+ * ..<mdui-segmented-button>Month</mdui-segmented-button>
+ * </mdui-segmented-button-group>
+ * ```
+ *
+ * @event change - 选中的值变更时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @slot - `<mdui-segmented-button>` 组件
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class SegmentedButtonGroup extends LitElement implements FormControl {
+    static styles: CSSResultGroup;
+    /**
+     * 是否填满父元素宽度
+     */
+    fullWidth: boolean;
+    /**
+     * 分段按钮的可选中状态。默认为不可选中。可选值为：
+     *
+     * * `single`：最多只能选中一个
+     * * `multiple`：可以选中多个
+     */
+    selects?: /*最多只能选中一个*/ 'single' | /*可以选中多个*/ 'multiple';
+    /**
+     * 是否为禁用状态
+     */
+    disabled: boolean;
+    /**
+     * 提交表单时，是否必须选中
+     */
+    required: boolean;
+    /**
+     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     *
+     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     */
+    form?: string;
+    /**
+     * 提交表单时的名称，将与表单数据一起提交
+     */
+    name: string;
+    /**
+     * 当前选中的 `<mdui-segmented-button>` 的值
+     *
+     * Note:
+     * 该属性的 HTML 属性始终为字符串，且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值
+     * 该属性的 JavaScript 属性值在 `selects="single"` 时为字符串，在 `selects="multiple"` 时为字符串数组。
+     * 所以，在 `selects="multiple"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     */
+    value: string | string[];
+    /**
+     * 默认选中的值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+     */
+    defaultValue: string | string[];
+    private selectedKeys;
+    /**
+     * 是否验证未通过
+     */
+    private invalid;
+    private hasSetDefaultValue;
+    private readonly inputRef;
+    private readonly formController;
+    /**
+     * 表单验证状态对象
+     */
+    get validity(): ValidityState;
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage(): string;
+    private get items();
+    private get itemsEnabled();
+    private get isSingle();
+    private get isMultiple();
+    private get isSelectable();
+    private onSelectsChange;
+    private onSelectedKeysChange;
+    private onValueChange;
+    private onInvalidChange;
+    private onDisabledChange;
+    connectedCallback(): void;
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     */
+    checkValidity(): boolean;
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     *
+     * 验证未通过时，还将在组件上显示未通过的提示。
+     */
+    reportValidity(): boolean;
+    /**
+     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     *
+     * @param message 自定义的提示文本
+     */
+    setCustomValidity(message: string): void;
+    protected render(): TemplateResult;
+    private updateSelected;
+    private selectOne;
+    private onClick;
+    /**
+     * 在隐藏的 `<input>` 或 `<select>` 上按下按键时，切换选中状态
+     */
+    private onInputKeyDown;
+    private onSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-segmented-button-group': SegmentedButtonGroup;
+    }
+}