mdui 1.0.2 → 2.0.0

package/components/range-slider/index.js

@@ -0,0 +1,210 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/css.js';
+import { FormController, formResets } from '@mdui/shared/controllers/form.js';
+import { defaultValue } from '@mdui/shared/decorators/default-value.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { SliderBase } from '../slider/slider-base.js';
+/**
+ * @summary 范围滑块组件
+ *
+ * ```html
+ * <mdui-range-slider></mdui-range-slider>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 在值发生了变更，且失去了焦点时，将触发该事件
+ * @event input - 值变更时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @csspart track-inactive - 未激活状态的轨道
+ * @csspart track-active - 已激活状态的轨道
+ * @csspart handle - 操作杆
+ * @csspart label - 提示文本
+ * @csspart tickmark - 刻度标记
+ */
+export let RangeSlider = class RangeSlider extends SliderBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+         */
+        this.defaultValue = [];
+        /**
+         * 当前操作的是哪一个 handle
+         */
+        this.currentHandle = 'start';
+        this.rippleStartRef = createRef();
+        this.rippleEndRef = createRef();
+        this.handleStartRef = createRef();
+        this.handleEndRef = createRef();
+        this.formController = new FormController(this);
+        this._value = [];
+        this.getRippleIndex = () => {
+            if (this.hoverHandle) {
+                return this.hoverHandle === 'start' ? 0 : 1;
+            }
+            return this.currentHandle === 'start' ? 0 : 1;
+        };
+    }
+    /**
+     * 滑块的值，为数组格式；将于表单数据一起提交
+     *
+     * NOTE:
+     * 该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     */
+    get value() {
+        return this._value;
+    }
+    set value(_value) {
+        const oldValue = [...this._value];
+        this._value = _value;
+        this.requestUpdate('value', oldValue);
+        this.updateComplete.then(() => {
+            var _a;
+            this.updateStyle();
+            // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
+            const form = this.formController.getForm();
+            if (form && ((_a = formResets.get(form)) === null || _a === void 0 ? void 0 : _a.has(this))) {
+                this.invalid = false;
+                formResets.get(form).delete(this);
+            }
+            else {
+                this.invalid = !this.inputRef.value.checkValidity();
+            }
+        });
+    }
+    get rippleElement() {
+        return [this.rippleStartRef.value, this.rippleEndRef.value];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.value = [this.min, this.max];
+        if (!this.defaultValue.length) {
+            this.defaultValue = [...this.value];
+        }
+        // 在轨道上点击时，计算出点击位置在 <input type="range"> 元素上的值
+        // 若该值在 this.value 的两个值中间位置的左侧，则表示操作的是左侧的值，否则操作的是右侧的值
+        const getCurrentHandle = (event) => {
+            const $this = $(this);
+            // 计算出鼠标悬浮位置的值，<mdui-range-slider> 元素的左右两侧有内边距，计算时要去除内边距
+            const paddingLeft = parseFloat($this.css('padding-left'));
+            const paddingRight = parseFloat($this.css('padding-right'));
+            const percent = (event.offsetX - paddingLeft) /
+                (this.clientWidth - paddingLeft - paddingRight);
+            const pointerValue = (this.max - this.min) * percent + this.min;
+            // 计算 this.value 两个值中间位置的值
+            const middleValue = (this.value[1] - this.value[0]) / 2 + this.value[0];
+            return pointerValue > middleValue ? 'end' : 'start';
+        };
+        const onTouchStart = () => {
+            if (!this.disabled) {
+                this.labelVisible = true;
+            }
+        };
+        const onTouchEnd = () => {
+            if (!this.disabled) {
+                this.labelVisible = false;
+            }
+        };
+        this.addEventListener('touchstart', onTouchStart);
+        this.addEventListener('mousedown', onTouchStart);
+        this.addEventListener('touchend', onTouchEnd);
+        this.addEventListener('mouseup', onTouchEnd);
+        // 按下鼠标时，计算当前操作的是起始值还是结束值
+        this.addEventListener('pointerdown', (event) => {
+            this.currentHandle = getCurrentHandle(event);
+        });
+        // 移动鼠标时，修改 mdui-ripple 的 hover 状态
+        this.addEventListener('pointermove', (event) => {
+            const currentHandle = getCurrentHandle(event);
+            if (this.hoverHandle !== currentHandle) {
+                this.endHover(event);
+                this.hoverHandle = currentHandle;
+                this.startHover(event);
+            }
+        });
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.updateStyle();
+    }
+    /**
+     * <input /> 用于提供拖拽操作
+     * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
+     */
+    render() {
+        return html `<label><input ${ref(this.inputRef)} type="range" step="${this.step}" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}" @input="${this.onInput}" @change="${this.onChange}"><div part="track-inactive" class="track-inactive"></div><div ${ref(this.trackActiveRef)} part="track-active" class="track-active"></div><div ${ref(this.handleStartRef)} part="handle" class="handle start" style="${styleMap({
+            'z-index': this.currentHandle === 'start' ? '2' : '1',
+        })}"><div class="elevation"></div><mdui-ripple ${ref(this.rippleStartRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value[0])}</div><div ${ref(this.handleEndRef)} part="handle" class="handle end" style="${styleMap({
+            'z-index': this.currentHandle === 'end' ? '2' : '1',
+        })}"><div class="elevation"></div><mdui-ripple ${ref(this.rippleEndRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value[1])}</div>${when(this.tickmarks, () => map(this.getCandidateValues(), (value) => html `<div part="tickmark" class="tickmark ${classMap({
+            active: value > this.value[0] && value < this.value[1],
+        })}" style="${styleMap({
+            left: `${((value - this.min) / this.max) * 100}%`,
+            display: value === this.value[0] || value === this.value[1]
+                ? 'none'
+                : 'block',
+        })}"></div>`))}</label>`;
+    }
+    updateStyle() {
+        const getPercent = (value) => ((value - this.min) / (this.max - this.min)) * 100;
+        const startPercent = getPercent(this.value[0]);
+        const endPercent = getPercent(this.value[1]);
+        this.trackActiveRef.value.style.width = `${endPercent - startPercent}%`;
+        this.trackActiveRef.value.style.left = `${startPercent}%`;
+        this.handleStartRef.value.style.left = `${startPercent}%`;
+        this.handleEndRef.value.style.left = `${endPercent}%`;
+    }
+    onInput() {
+        const isStart = this.currentHandle === 'start';
+        const value = parseFloat(this.inputRef.value.value);
+        const startValue = this.value[0];
+        const endValue = this.value[1];
+        const doInput = () => {
+            emit(this, 'input');
+            this.updateStyle();
+        };
+        if (isStart) {
+            if (value <= endValue) {
+                this.value = [value, endValue];
+                doInput();
+            }
+            else if (startValue !== endValue) {
+                this.value = [endValue, endValue];
+                doInput();
+            }
+        }
+        else {
+            if (value >= startValue) {
+                this.value = [startValue, value];
+                doInput();
+            }
+            else if (startValue !== endValue) {
+                this.value = [startValue, startValue];
+                doInput();
+            }
+        }
+    }
+};
+RangeSlider.styles = [SliderBase.styles];
+__decorate([
+    defaultValue()
+], RangeSlider.prototype, "defaultValue", void 0);
+__decorate([
+    state()
+], RangeSlider.prototype, "currentHandle", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], RangeSlider.prototype, "value", null);
+RangeSlider = __decorate([
+    customElement('mdui-range-slider')
+], RangeSlider);

package/components/range-slider.d.ts

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

package/components/range-slider.js

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

package/components/ripple/index.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import '@mdui/jq/methods/addClass.js';
+import '@mdui/jq/methods/children.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/data.js';
+import '@mdui/jq/methods/each.js';
+import '@mdui/jq/methods/filter.js';
+import '@mdui/jq/methods/innerHeight.js';
+import '@mdui/jq/methods/innerWidth.js';
+import '@mdui/jq/methods/offset.js';
+import '@mdui/jq/methods/on.js';
+import '@mdui/jq/methods/prependTo.js';
+import '@mdui/jq/methods/remove.js';
+import type { TemplateResult, CSSResultGroup } from 'lit';
+/**
+ * 处理点击时的涟漪动画；及添加 hover、focused、dragged 的背景色
+ * 背景色通过在 .surface 元素上添加对应的 class 实现
+ * 阴影在 ripple-mixin 中处理，通过在 :host 元素上添加 attribute 供 CSS 选择器添加样式
+ */
+export declare class Ripple extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 是否禁用涟漪动画
+     */
+    noRipple: boolean;
+    private hover;
+    private focused;
+    private dragged;
+    private readonly surfaceRef;
+    startPress(event?: Event): void;
+    endPress(): void;
+    startHover(): void;
+    endHover(): void;
+    startFocus(): void;
+    endFocus(): void;
+    startDrag(): void;
+    endDrag(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-ripple': Ripple;
+    }
+}

package/components/ripple/index.js

@@ -0,0 +1,173 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/addClass.js';
+import '@mdui/jq/methods/children.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/data.js';
+import '@mdui/jq/methods/each.js';
+import '@mdui/jq/methods/filter.js';
+import '@mdui/jq/methods/innerHeight.js';
+import '@mdui/jq/methods/innerWidth.js';
+import '@mdui/jq/methods/offset.js';
+import '@mdui/jq/methods/on.js';
+import '@mdui/jq/methods/prependTo.js';
+import '@mdui/jq/methods/remove.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { style } from './style.js';
+/**
+ * 处理点击时的涟漪动画；及添加 hover、focused、dragged 的背景色
+ * 背景色通过在 .surface 元素上添加对应的 class 实现
+ * 阴影在 ripple-mixin 中处理，通过在 :host 元素上添加 attribute 供 CSS 选择器添加样式
+ */
+export let Ripple = class Ripple extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否禁用涟漪动画
+         */
+        this.noRipple = false;
+        this.hover = false;
+        this.focused = false;
+        this.dragged = false;
+        this.surfaceRef = createRef();
+    }
+    startPress(event) {
+        if (this.noRipple) {
+            return;
+        }
+        const $surface = $(this.surfaceRef.value);
+        const surfaceHeight = $surface.innerHeight();
+        const surfaceWidth = $surface.innerWidth();
+        // 点击位置坐标
+        let touchStartX;
+        let touchStartY;
+        if (!event) {
+            // 未传入事件对象，涟漪从中间扩散
+            touchStartX = surfaceWidth / 2;
+            touchStartY = surfaceHeight / 2;
+        }
+        else {
+            // 传入了事件对象，涟漪从点击位置扩散
+            const touchPosition = typeof TouchEvent !== 'undefined' &&
+                event instanceof TouchEvent &&
+                event.touches.length
+                ? event.touches[0]
+                : event;
+            const offset = $surface.offset();
+            // 点击位置不在 surface 内，不执行
+            if (touchPosition.pageX < offset.left ||
+                touchPosition.pageX > offset.left + surfaceWidth ||
+                touchPosition.pageY < offset.top ||
+                touchPosition.pageY > offset.top + surfaceHeight) {
+                return;
+            }
+            touchStartX = touchPosition.pageX - offset.left;
+            touchStartY = touchPosition.pageY - offset.top;
+        }
+        // 涟漪直径
+        const diameter = Math.max(Math.pow(Math.pow(surfaceHeight, 2) + Math.pow(surfaceWidth, 2), 0.5), 48);
+        // 涟漪扩散动画
+        const translateX = `${-touchStartX + surfaceWidth / 2}px`;
+        const translateY = `${-touchStartY + surfaceHeight / 2}px`;
+        const translate = `translate3d(${translateX}, ${translateY}, 0) scale(1)`;
+        // 涟漪 DOM 元素
+        $('<div class="wave"></div>')
+            .css({
+            width: diameter,
+            height: diameter,
+            marginTop: -diameter / 2,
+            marginLeft: -diameter / 2,
+            left: touchStartX,
+            top: touchStartY,
+        })
+            .each((_, wave) => {
+            wave.style.setProperty('--mdui-comp-ripple-transition-x', translateX);
+            wave.style.setProperty('--mdui-comp-ripple-transition-y', translateY);
+        })
+            .prependTo(this.surfaceRef.value)
+            .each((_, wave) => wave.clientLeft) // 重绘
+            .css('transform', translate)
+            .on('animationend', function (e) {
+            const event = e;
+            if (event.animationName === 'mdui-comp-ripple-radius-in') {
+                $(this).data('filled', true); // 扩散动画完成后，添加标记
+            }
+        });
+    }
+    endPress() {
+        const $waves = $(this.surfaceRef.value)
+            .children()
+            .filter((_, wave) => !$(wave).data('removing'))
+            .data('removing', true);
+        const hideAndRemove = ($waves) => {
+            $waves
+                .addClass('out')
+                .each((_, wave) => wave.clientLeft) // 重绘
+                .on('animationend', function () {
+                $(this).remove();
+            });
+        };
+        // 扩散动画未完成，先完成扩散，再隐藏并移除
+        $waves
+            .filter((_, wave) => !$(wave).data('filled'))
+            .on('animationend', function (e) {
+            const event = e;
+            if (event.animationName === 'mdui-comp-ripple-radius-in') {
+                hideAndRemove($(this));
+            }
+        });
+        // 扩散动画已完成，直接隐藏并移除
+        hideAndRemove($waves.filter((_, wave) => !!$(wave).data('filled')));
+    }
+    startHover() {
+        this.hover = true;
+    }
+    endHover() {
+        this.hover = false;
+    }
+    startFocus() {
+        this.focused = true;
+    }
+    endFocus() {
+        this.focused = false;
+    }
+    startDrag() {
+        this.dragged = true;
+    }
+    endDrag() {
+        this.dragged = false;
+    }
+    render() {
+        return html `<div ${ref(this.surfaceRef)} class="surface ${classMap({
+            hover: this.hover,
+            focused: this.focused,
+            dragged: this.dragged,
+        })}"></div>`;
+    }
+};
+Ripple.styles = [componentStyle, style];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'no-ripple',
+    })
+], Ripple.prototype, "noRipple", void 0);
+__decorate([
+    state()
+], Ripple.prototype, "hover", void 0);
+__decorate([
+    state()
+], Ripple.prototype, "focused", void 0);
+__decorate([
+    state()
+], Ripple.prototype, "dragged", void 0);
+Ripple = __decorate([
+    customElement('mdui-ripple')
+], Ripple);

package/components/ripple/ripple-mixin.d.ts

@@ -0,0 +1,28 @@
+import '@mdui/jq/methods/index.js';
+import './index.js';
+import type { Ripple } from './index.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LitElement } from 'lit';
+export declare class RippleMixinInterface extends LitElement {
+    noRipple: boolean;
+    protected getRippleIndex: () => number | undefined;
+    protected get rippleElement(): Ripple | Ripple[] | NodeListOf<Ripple>;
+    protected get rippleDisabled(): boolean | boolean[];
+    protected get rippleTarget(): HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>;
+    protected startHover(event: PointerEvent): void;
+    protected endHover(event: PointerEvent): void;
+}
+/**
+ * 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 declare const RippleMixin: <T extends Constructor<LitElement>>(superclass: T) => Constructor<RippleMixinInterface> & T;