mdui 1.0.2 → 2.0.0

package/components/navigation-rail/navigation-rail.d.ts

@@ -0,0 +1,87 @@
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import '@mdui/jq/methods/innerWidth.js';
+import { LayoutItemBase } from '../layout/layout-item-base.js';
+import type { LayoutPlacement } from '../layout/helper.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 侧边导航栏组件。需与 `<mdui-navigation-rail-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-navigation-rail>
+ * ..<mdui-navigation-rail-item icon="watch_later">Recent</mdui-navigation-rail-item>
+ * ..<mdui-navigation-rail-item icon="image">Images</mdui-navigation-rail-item>
+ * ..<mdui-navigation-rail-item icon="library_music">Library</mdui-navigation-rail-item>
+ * </mdui-navigation-rail>
+ * ```
+ *
+ * @event change - 值变化时触发
+ *
+ * @slot - `<mdui-navigation-rail-item>` 组件
+ * @slot top - 顶部的元素
+ * @slot bottom - 底部的元素
+ *
+ * @csspart top - 顶部元素的容器
+ * @csspart bottom - 底部元素的容器
+ * @csspart items - `<mdui-navigation-rail-item>` 组件的容器
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export declare class NavigationRail extends LayoutItemBase {
+    static styles: CSSResultGroup;
+    /**
+     * 当前选中的 `<mdui-navigation-rail-item>` 的值
+     */
+    value?: string;
+    /**
+     * 导航栏的位置。可选值为：
+     *
+     * * `left`：显示在左侧
+     * * `right`：显示在右侧
+     */
+    placement: /*显示在左侧*/ 'left' | /*显示在右侧*/ 'right';
+    /**
+     * 导航栏中的 `<mdui-navigation-rail-item>` 元素的对齐方式。可选值为：
+     *
+     * * `start`：顶部对齐
+     * * `center`：居中对齐
+     * * `end`：底部对齐
+     */
+    alignment: /*顶部对齐*/ 'start' | /*居中对齐*/ 'center' | /*底部对齐*/ 'end';
+    /**
+     * 默认导航栏相对于 `body` 元素显示，该参数设置为 `true` 时，导航栏将相对于它的父元素显示
+     *
+     * Note:
+     * 设置了该属性时，必须手动在父元素上设置样式 `position: relative;`
+     */
+    contained: boolean;
+    /**
+     * 是否在导航栏和页面内容之间添加分割线
+     */
+    divider: boolean;
+    private activeKey;
+    private readonly hasSlotController;
+    private hasSetDefaultValue;
+    protected get layoutPlacement(): LayoutPlacement;
+    private get items();
+    private get parentTarget();
+    private get isRight();
+    private get paddingValue();
+    private onActiveKeyChange;
+    private onValueChange;
+    private onContainedChange;
+    private onPlacementChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+    private onClick;
+    private updateActive;
+    private onSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-navigation-rail': NavigationRail;
+    }
+}

package/components/navigation-rail/navigation-rail.js

@@ -0,0 +1,230 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import '@mdui/jq/methods/innerWidth.js';
+import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { LayoutItemBase } from '../layout/layout-item-base.js';
+import { navigationRailStyle } from './navigation-rail-style.js';
+/**
+ * @summary 侧边导航栏组件。需与 `<mdui-navigation-rail-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-navigation-rail>
+ * ..<mdui-navigation-rail-item icon="watch_later">Recent</mdui-navigation-rail-item>
+ * ..<mdui-navigation-rail-item icon="image">Images</mdui-navigation-rail-item>
+ * ..<mdui-navigation-rail-item icon="library_music">Library</mdui-navigation-rail-item>
+ * </mdui-navigation-rail>
+ * ```
+ *
+ * @event change - 值变化时触发
+ *
+ * @slot - `<mdui-navigation-rail-item>` 组件
+ * @slot top - 顶部的元素
+ * @slot bottom - 底部的元素
+ *
+ * @csspart top - 顶部元素的容器
+ * @csspart bottom - 底部元素的容器
+ * @csspart items - `<mdui-navigation-rail-item>` 组件的容器
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export let NavigationRail = class NavigationRail extends LayoutItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 导航栏的位置。可选值为：
+         *
+         * * `left`：显示在左侧
+         * * `right`：显示在右侧
+         */
+        this.placement = 'left';
+        /**
+         * 导航栏中的 `<mdui-navigation-rail-item>` 元素的对齐方式。可选值为：
+         *
+         * * `start`：顶部对齐
+         * * `center`：居中对齐
+         * * `end`：底部对齐
+         */
+        this.alignment = 'start';
+        /**
+         * 默认导航栏相对于 `body` 元素显示，该参数设置为 `true` 时，导航栏将相对于它的父元素显示
+         *
+         * Note:
+         * 设置了该属性时，必须手动在父元素上设置样式 `position: relative;`
+         */
+        this.contained = false;
+        /**
+         * 是否在导航栏和页面内容之间添加分割线
+         */
+        this.divider = false;
+        // 因为 navigation-rail-item 的 value 可能会重复，所以在每个 navigation-rail-item 元素上都添加了一个唯一的 key，通过 activeKey 来记录激活状态的 key
+        this.activeKey = 0;
+        this.hasSlotController = new HasSlotController(this, 'top', 'bottom');
+        // 是否已完成初始 value 的设置。首次设置初始值时，不触发 change 事件
+        this.hasSetDefaultValue = false;
+    }
+    get layoutPlacement() {
+        return this.placement;
+    }
+    // 所有的子项元素
+    get items() {
+        return $(this)
+            .find('mdui-navigation-rail-item')
+            .get();
+    }
+    get parentTarget() {
+        return this.contained || this.isParentLayout
+            ? this.parentElement
+            : document.body;
+    }
+    get isRight() {
+        return this.placement === 'right';
+    }
+    get paddingValue() {
+        return ['fixed', 'absolute'].includes($(this).css('position'))
+            ? this.offsetWidth
+            : undefined;
+    }
+    onActiveKeyChange() {
+        // 根据 activeKey 读取对应 navigation-rail-item 的值
+        const item = this.items.find((item) => item.key === this.activeKey);
+        this.value = item === null || item === void 0 ? void 0 : item.value;
+        if (this.hasSetDefaultValue) {
+            emit(this, 'change');
+        }
+        else {
+            this.hasSetDefaultValue = true;
+        }
+    }
+    onValueChange() {
+        var _a;
+        const item = this.items.find((item) => item.value === this.value);
+        this.activeKey = (_a = item === null || item === void 0 ? void 0 : item.key) !== null && _a !== void 0 ? _a : 0;
+        this.updateActive();
+    }
+    // 首次渲染在 @watch('placement') 中已经执行，这里跳过
+    onContainedChange() {
+        if (this.isParentLayout) {
+            return;
+        }
+        $(document.body).css({
+            paddingLeft: this.contained || this.isRight ? null : this.paddingValue,
+            paddingRight: this.contained || !this.isRight ? null : this.paddingValue,
+        });
+        $(this.parentElement).css({
+            paddingLeft: this.contained && !this.isRight ? this.paddingValue : null,
+            paddingRight: this.contained && this.isRight ? this.paddingValue : null,
+        });
+    }
+    onPlacementChange() {
+        var _a;
+        (_a = this.layoutManager) === null || _a === void 0 ? void 0 : _a.updateLayout(this);
+        this.items.forEach((item) => {
+            item.placement = this.placement;
+        });
+        if (this.isParentLayout) {
+            return;
+        }
+        $(this.parentTarget).css({
+            paddingLeft: this.isRight ? null : this.paddingValue,
+            paddingRight: this.isRight ? this.paddingValue : null,
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.isParentLayout) {
+            $(this.parentTarget).css({
+                paddingLeft: this.isRight ? null : this.paddingValue,
+                paddingRight: this.isRight ? this.paddingValue : null,
+            });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (!this.isParentLayout) {
+            $(this.parentTarget).css({
+                paddingLeft: this.isRight ? undefined : null,
+                paddingRight: this.isRight ? null : undefined,
+            });
+        }
+    }
+    render() {
+        const hasTopSlot = this.hasSlotController.test('top');
+        const hasBottomSlot = this.hasSlotController.test('bottom');
+        return html `${when(hasTopSlot, () => html `<slot name="top" part="top" class="top"></slot>`)} <span class="top-spacer"></span><slot part="items" class="items" @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><span class="bottom-spacer"></span> ${when(hasBottomSlot, () => html `<slot name="bottom" part="bottom" class="bottom"></slot>`)}`;
+    }
+    onClick(event) {
+        // event.button 为 0 时，为鼠标左键点击。忽略鼠标中键和右键
+        if (event.button) {
+            return;
+        }
+        const target = event.target;
+        const item = target.closest('mdui-navigation-rail-item');
+        this.activeKey = item.key;
+        this.updateActive();
+    }
+    updateActive() {
+        this.items.forEach((item) => (item.active = this.activeKey === item.key));
+    }
+    onSlotChange() {
+        this.items.forEach((item) => {
+            item.placement = this.placement;
+        });
+    }
+};
+NavigationRail.styles = [
+    componentStyle,
+    navigationRailStyle,
+];
+__decorate([
+    property({ reflect: true })
+], NavigationRail.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+    // eslint-disable-next-line prettier/prettier
+], NavigationRail.prototype, "placement", void 0);
+__decorate([
+    property({ reflect: true })
+], NavigationRail.prototype, "alignment", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], NavigationRail.prototype, "contained", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], NavigationRail.prototype, "divider", void 0);
+__decorate([
+    state()
+], NavigationRail.prototype, "activeKey", void 0);
+__decorate([
+    watch('activeKey')
+], NavigationRail.prototype, "onActiveKeyChange", null);
+__decorate([
+    watch('value')
+], NavigationRail.prototype, "onValueChange", null);
+__decorate([
+    watch('contained', true)
+], NavigationRail.prototype, "onContainedChange", null);
+__decorate([
+    watch('placement')
+], NavigationRail.prototype, "onPlacementChange", null);
+NavigationRail = __decorate([
+    customElement('mdui-navigation-rail')
+], NavigationRail);

package/components/navigation-rail-item.d.ts

@@ -0,0 +1 @@
+export * from './navigation-rail/navigation-rail-item.js';

package/components/navigation-rail-item.js

@@ -0,0 +1 @@
+export * from './navigation-rail/navigation-rail-item.js';

package/components/navigation-rail.d.ts

@@ -0,0 +1 @@
+export * from './navigation-rail/navigation-rail.js';

package/components/navigation-rail.js

@@ -0,0 +1 @@
+export * from './navigation-rail/navigation-rail.js';

package/components/radio/radio-group-style.d.ts

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

package/components/radio/radio-group-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const radioGroupStyle = css `:host{display:inline-block}fieldset{border:none;padding:0;margin:0;min-width:0}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}`;

package/components/radio/radio-group.d.ts

@@ -0,0 +1,103 @@
+import { LitElement } from 'lit';
+import '@mdui/jq/methods/closest.js';
+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-radio>` 组件配合使用
+ *
+ * ```html
+ * <mdui-radio-group value="chinese">
+ * ..<mdui-radio value="chinese">Chinese</mdui-radio>
+ * ..<mdui-radio value="english">English</mdui-radio>
+ * </mdui-radio-group>
+ * ```
+ *
+ * @event change - 选中值变化时触发
+ * @event input - 选中值变化时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @slot - `<mdui-radio>` 元素
+ */
+export declare class RadioGroup extends LitElement implements FormControl {
+    static styles: CSSResultGroup;
+    /**
+     * 是否为禁用状态
+     */
+    disabled: boolean;
+    /**
+     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     *
+     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     */
+    form?: string;
+    /**
+     * 单选框名称，将与表单数据一起提交
+     */
+    name: string;
+    /**
+     * 单选框的值，将于表单数据一起提交
+     */
+    value: string;
+    /**
+     * 默认选中的值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+     */
+    defaultValue: string;
+    /**
+     * 提交表单时，是否必须选中其中一个单选框
+     */
+    required: boolean;
+    /**
+     * 是否验证未通过
+     */
+    private invalid;
+    private readonly inputRef;
+    private readonly formController;
+    /**
+     * 表单验证状态对象
+     */
+    get validity(): ValidityState;
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage(): string;
+    private get radios();
+    private get radiosEnabled();
+    private onValueChange;
+    private onInvalidChange;
+    private onDisabledChange;
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     */
+    checkValidity(): boolean;
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     *
+     * 验证未通过时，还将在组件上显示未通过的提示。
+     */
+    reportValidity(): boolean;
+    /**
+     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     *
+     * @param message 自定义的提示文本
+     */
+    setCustomValidity(message: string): void;
+    protected render(): TemplateResult;
+    private updateRadioFocusable;
+    private onRadioClick;
+    /**
+     * 在内部的 `<mdui-radio>` 上按下按键时，在 `<mdui-radio>` 之间切换焦点
+     */
+    private onKeyDown;
+    private onSlotChange;
+    /**
+     * slot 中的 mdui-radio 的 checked 变更时触发的事件
+     */
+    private onCheckedChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-radio-group': RadioGroup;
+    }
+}