mdui 1.0.2 → 2.0.0

package/components/switch.d.ts

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

package/components/switch.js

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

package/components/tab-panel.d.ts

@@ -0,0 +1 @@
+export * from './tabs/tab-panel.js';

package/components/tab-panel.js

@@ -0,0 +1 @@
+export * from './tabs/tab-panel.js';

package/components/tab.d.ts

@@ -0,0 +1 @@
+export * from './tabs/tab.js';

package/components/tab.js

@@ -0,0 +1 @@
+export * from './tabs/tab.js';

package/components/tabs/tab-panel-style.d.ts

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

package/components/tabs/tab-panel-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const tabPanelStyle = css `:host{display:block;overflow-y:auto;flex:1 1 auto}:host(:not([active])){display:none}`;

package/components/tabs/tab-panel.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 选项卡面板项组件。需与 `<mdui-tabs>` 和 `<mdui-tab>` 组件配合使用
+ *
+ * ```html
+ * <mdui-tabs value="tab-1">
+ * ..<mdui-tab value="tab-1">Tab 1</mdui-tab>
+ * ..<mdui-tab value="tab-2">Tab 2</mdui-tab>
+ * ..<mdui-tab value="tab-3">Tab 3</mdui-tab>
+ *
+ * ..<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
+ * </mdui-tabs>
+ * ```
+ *
+ * @slot - 选项卡面板内容
+ */
+export declare class TabPanel extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 该选项卡面板的值
+     */
+    value?: string;
+    /**
+     * 是否为激活状态，由 `<mdui-tabs>` 组件控制该状态
+     */
+    protected active: boolean;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-tab-panel': TabPanel;
+    }
+}

package/components/tabs/tab-panel.js

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { tabPanelStyle } from './tab-panel-style.js';
+/**
+ * @summary 选项卡面板项组件。需与 `<mdui-tabs>` 和 `<mdui-tab>` 组件配合使用
+ *
+ * ```html
+ * <mdui-tabs value="tab-1">
+ * ..<mdui-tab value="tab-1">Tab 1</mdui-tab>
+ * ..<mdui-tab value="tab-2">Tab 2</mdui-tab>
+ * ..<mdui-tab value="tab-3">Tab 3</mdui-tab>
+ *
+ * ..<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
+ * </mdui-tabs>
+ * ```
+ *
+ * @slot - 选项卡面板内容
+ */
+export let TabPanel = class TabPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否为激活状态，由 `<mdui-tabs>` 组件控制该状态
+         */
+        this.active = false;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+TabPanel.styles = [
+    componentStyle,
+    tabPanelStyle,
+];
+__decorate([
+    property({ reflect: true })
+], TabPanel.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], TabPanel.prototype, "active", void 0);
+TabPanel = __decorate([
+    customElement('mdui-tab-panel')
+], TabPanel);

package/components/tabs/tab-style.d.ts

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

package/components/tabs/tab-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const tabStyle = css `:host{position:relative;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.container{display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%}.preset{flex-direction:column;min-height:3rem;padding:.625rem 1rem}:host([inline]) .preset{flex-direction:row}.icon-container,.label-container{position:relative;display:flex;align-items:center;justify-content:center}.icon-container ::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.icon-container ::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.label-container ::slotted([slot=badge]){position:absolute;left:100%;bottom:100%;transform:translate(-.75rem,.625rem)}.label-container ::slotted([slot=badge][variant=small]){transform:translate(-.375rem,.375rem)}.icon,.label{display:flex;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .icon,:host([focused]) .label,:host([hover]) .icon,:host([hover]) .label,:host([pressed]) .icon,:host([pressed]) .label{color:rgb(var(--mdui-color-on-surface))}:host([active]) .icon,:host([active]) .label{color:rgb(var(--mdui-color-primary))}:host([active][variant=secondary]) .icon,:host([active][variant=secondary]) .label{color:rgb(var(--mdui-color-on-surface))}.icon{font-size:1.5rem}.label{font-size:var(--mdui-typescale-title-small-size);font-weight:var(--mdui-typescale-title-small-weight);letter-spacing:var(--mdui-typescale-title-small-tracking);line-height:var(--mdui-typescale-title-small-line-height)}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit;color:inherit}`;

package/components/tabs/tab.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+import '../icon.js';
+import type { Ripple } from '../ripple/index.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+/**
+ * @summary 选项卡项组件。需与 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件配合使用
+ *
+ * ```html
+ * <mdui-tabs value="tab-1">
+ * ..<mdui-tab value="tab-1">Tab 1</mdui-tab>
+ * ..<mdui-tab value="tab-2">Tab 2</mdui-tab>
+ * ..<mdui-tab value="tab-3">Tab 3</mdui-tab>
+ *
+ * ..<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
+ * </mdui-tabs>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ *
+ * @slot - 选项卡导航项的文本
+ * @slot icon - 选项卡导航项中的图标
+ * @slot badge - 徽标
+ * @slot custom - 自定义整个选项卡导航项中的内容
+ *
+ * @csspart container - 导航项容器
+ * @csspart icon - 导航项中的图标
+ * @csspart label - 导航项的文本
+ */
+export declare class Tab extends Tab_base {
+    static styles: CSSResultGroup;
+    /**
+     * 该选项卡导航项的值
+     */
+    value?: string;
+    /**
+     * Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     */
+    icon?: string;
+    /**
+     * 是否把图标和文本水平排列
+     */
+    inline: boolean;
+    /**
+     * 是否为激活状态，由 `<mdui-tabs>` 组件控制该参数
+     */
+    protected active: boolean;
+    /**
+     * 选项卡形状。由 `<mdui-tabs>` 组件控制该参数
+     */
+    protected variant: 'primary' | 'secondary';
+    protected readonly key: number;
+    private readonly rippleRef;
+    private readonly hasSlotController;
+    protected get rippleElement(): Ripple;
+    protected get rippleDisabled(): boolean;
+    protected get focusElement(): HTMLElement;
+    protected get focusDisabled(): boolean;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-tab': Tab;
+    }
+}
+export {};

package/components/tabs/tab.js

@@ -0,0 +1,110 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
+import cc from 'classcat';
+import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
+import '../icon.js';
+import { RippleMixin } from '../ripple/ripple-mixin.js';
+import { tabStyle } from './tab-style.js';
+/**
+ * @summary 选项卡项组件。需与 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件配合使用
+ *
+ * ```html
+ * <mdui-tabs value="tab-1">
+ * ..<mdui-tab value="tab-1">Tab 1</mdui-tab>
+ * ..<mdui-tab value="tab-2">Tab 2</mdui-tab>
+ * ..<mdui-tab value="tab-3">Tab 3</mdui-tab>
+ *
+ * ..<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
+ * </mdui-tabs>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ *
+ * @slot - 选项卡导航项的文本
+ * @slot icon - 选项卡导航项中的图标
+ * @slot badge - 徽标
+ * @slot custom - 自定义整个选项卡导航项中的内容
+ *
+ * @csspart container - 导航项容器
+ * @csspart icon - 导航项中的图标
+ * @csspart label - 导航项的文本
+ */
+export let Tab = class Tab extends RippleMixin(FocusableMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否把图标和文本水平排列
+         */
+        this.inline = false;
+        /**
+         * 是否为激活状态，由 `<mdui-tabs>` 组件控制该参数
+         */
+        this.active = false;
+        /**
+         * 选项卡形状。由 `<mdui-tabs>` 组件控制该参数
+         */
+        this.variant = 'primary';
+        // 每一个 `<mdui-tab>` 元素都添加一个唯一的 key
+        this.key = uniqueId();
+        this.rippleRef = createRef();
+        this.hasSlotController = new HasSlotController(this, 'icon', 'custom');
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    get rippleDisabled() {
+        return false;
+    }
+    get focusElement() {
+        return this;
+    }
+    get focusDisabled() {
+        return false;
+    }
+    render() {
+        const hasIcon = this.icon || this.hasSlotController.test('icon');
+        const hasCustomSlot = this.hasSlotController.test('custom');
+        const renderBadge = () => html `<slot name="badge"></slot>`;
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><div part="container" class="container ${cc({ preset: !hasCustomSlot })}"><slot name="custom"><div class="icon-container">${when(hasIcon || this.icon, renderBadge)}<slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot></div><div class="label-container">${when(!hasIcon, renderBadge)}<slot part="label" class="label"></slot></div></slot></div>`;
+    }
+};
+Tab.styles = [componentStyle, tabStyle];
+__decorate([
+    property({ reflect: true })
+], Tab.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], Tab.prototype, "icon", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Tab.prototype, "inline", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Tab.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], Tab.prototype, "variant", void 0);
+Tab = __decorate([
+    customElement('mdui-tab')
+], Tab);

package/components/tabs/tabs-style.d.ts

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

package/components/tabs/tabs-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const tabsStyle = css `:host{position:relative;display:flex}:host([placement^=top]){flex-direction:column}:host([placement^=bottom]){flex-direction:column-reverse}:host([placement^=left]){flex-direction:row}:host([placement^=right]){flex-direction:row-reverse}.container{position:relative;display:flex;flex:0 0 auto;overflow-x:auto;background-color:rgb(var(--mdui-color-surface))}:host([placement^=bottom]) .container,:host([placement^=top]) .container{flex-direction:row}:host([placement^=left]) .container,:host([placement^=right]) .container{flex-direction:column}:host([placement$='-start']) .container{justify-content:flex-start}:host([placement=bottom]) .container,:host([placement=left]) .container,:host([placement=right]) .container,:host([placement=top]) .container{justify-content:center}:host([placement$='-end']) .container{justify-content:flex-end}.container::after{content:' ';position:absolute;background-color:rgb(var(--mdui-color-surface-variant))}:host([placement^=bottom]) .container::after,:host([placement^=top]) .container::after{left:0;width:100%;height:.0625rem}:host([placement^=top]) .container::after{bottom:0}:host([placement^=bottom]) .container::after{top:0}:host([placement^=left]) .container::after,:host([placement^=right]) .container::after{top:0;height:100%;width:.0625rem}:host([placement^=left]) .container::after{right:0}:host([placement^=right]) .container::after{left:0}.indicator{position:absolute;z-index:1;transition-duration:var(--mdui-motion-duration-medium2);transition-timing-function:var(--mdui-motion-easing-standard-decelerate);background-color:rgb(var(--mdui-color-primary))}:host([placement^=bottom]) .indicator,:host([placement^=top]) .indicator{transition-property:transform,left,width}:host([placement^=left]) .indicator,:host([placement^=right]) .indicator{transition-property:transform,top,height}:host([placement^=top]) .indicator{bottom:0}:host([placement^=bottom]) .indicator{top:0}:host([placement^=left]) .indicator{right:0}:host([placement^=right]) .indicator{left:0}:host([placement^=bottom][variant=primary]) .indicator,:host([placement^=top][variant=primary]) .indicator{height:.1875rem}:host([placement^=bottom][variant=secondary]) .indicator,:host([placement^=top][variant=secondary]) .indicator{height:.125rem}:host([placement^=left][variant=primary]) .indicator,:host([placement^=right][variant=primary]) .indicator{width:.1875rem}:host([placement^=left][variant=secondary]) .indicator,:host([placement^=right][variant=secondary]) .indicator{width:.125rem}:host([placement^=top][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-top-right-radius:.1875rem}:host([placement^=bottom][variant=primary]) .indicator{border-bottom-right-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=left][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=right][variant=primary]) .indicator{border-top-right-radius:.1875rem;border-bottom-right-radius:.1875rem}:host([full-width]) ::slotted(mdui-tab){flex:1}`;

package/components/tabs/tabs.d.ts

@@ -0,0 +1,87 @@
+import { LitElement } from 'lit';
+import '@mdui/jq/methods/children.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 选项卡组件。需与 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件配合使用
+ *
+ * ```html
+ * <mdui-tabs value="tab-1">
+ * ..<mdui-tab value="tab-1">Tab 1</mdui-tab>
+ * ..<mdui-tab value="tab-2">Tab 2</mdui-tab>
+ * ..<mdui-tab value="tab-3">Tab 3</mdui-tab>
+ *
+ * ..<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
+ * </mdui-tabs>
+ * ```
+ *
+ * @event change - 选中的值变化时触发
+ *
+ * @slot - `<mdui-tab>` 元素
+ * @slot panel - `<mdui-tab-panel>` 元素
+ *
+ * @csspart container - `<mdui-tab>` 元素的容器
+ * @csspart indicator - 激活状态指示器
+ */
+export declare class Tabs extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 选项卡形状。可选值为：
+     *
+     * * `primary`：位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面时，可使用该形状的选项卡
+     * * `secondary`：位于页面中，用于切换一组相关内容时，可使用该形状的选项卡
+     */
+    variant: /*位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面时，可使用该形状的选项卡*/ 'primary' | /*位于页面中，用于切换一组相关内容时，可使用该形状的选项卡*/ 'secondary';
+    /**
+     * 当前激活的 `<mdui-tab>` 的值
+     */
+    value?: string;
+    /**
+     * 选项卡位置。默认为 `top-start`。可选值为：
+     *
+     * * `top-start`：位于上方，且左对齐
+     * * `top`：位于上方，且居中对齐
+     * * `top-end`：位于上方，且右对齐
+     * * `bottom-start`：位于下方，且左对齐
+     * * `bottom`：位于下方，且居中对齐
+     * * `bottom-end`：位于下方，且右对齐
+     * * `left-start`：位于左侧，且顶部对齐
+     * * `left`：位于左侧，且居中对齐
+     * * `left-end`：位于左侧，且底部对齐
+     * * `right-start`：位于右侧，且顶部对齐
+     * * `right`：位于右侧，且居中对齐
+     * * `right-end`：位于右侧，且底部对齐
+     */
+    placement: /*位于上方，且左对齐*/ 'top-start' | /*位于上方，且居中对齐*/ 'top' | /*位于上方，且右对齐*/ 'top-end' | /*位于下方，且左对齐*/ 'bottom-start' | /*位于下方，且居中对齐*/ 'bottom' | /*位于下方，且右对齐*/ 'bottom-end' | /*位于左侧，且顶部对齐*/ 'left-start' | /*位于左侧，且居中对齐*/ 'left' | /*位于左侧，且底部对齐*/ 'left-end' | /*位于右侧，且顶部对齐*/ 'right-start' | /*位于右侧，且居中对齐*/ 'right' | /*位于右侧，且底部对齐*/ 'right-end';
+    /**
+     * 是否填满父元素宽度
+     */
+    fullWidth: boolean;
+    private activeKey;
+    private activeTab?;
+    private observeResize?;
+    private tabs;
+    private panels;
+    private readonly containerRef;
+    private readonly indicatorRef;
+    private onActiveKeyChange;
+    private onValueChange;
+    private onIndicatorChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+    private syncTabsAndPanels;
+    private onSlotChange;
+    private onClick;
+    private updateActive;
+    private updateIndicator;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-tabs': Tabs;
+    }
+}

package/components/tabs/tabs.js

@@ -0,0 +1,221 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/children.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.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 { observeResize } from '@mdui/shared/helpers/observeResize.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { tabsStyle } from './tabs-style.js';
+/**
+ * @summary 选项卡组件。需与 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件配合使用
+ *
+ * ```html
+ * <mdui-tabs value="tab-1">
+ * ..<mdui-tab value="tab-1">Tab 1</mdui-tab>
+ * ..<mdui-tab value="tab-2">Tab 2</mdui-tab>
+ * ..<mdui-tab value="tab-3">Tab 3</mdui-tab>
+ *
+ * ..<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
+ * ..<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
+ * </mdui-tabs>
+ * ```
+ *
+ * @event change - 选中的值变化时触发
+ *
+ * @slot - `<mdui-tab>` 元素
+ * @slot panel - `<mdui-tab-panel>` 元素
+ *
+ * @csspart container - `<mdui-tab>` 元素的容器
+ * @csspart indicator - 激活状态指示器
+ */
+export let Tabs = class Tabs extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 选项卡形状。可选值为：
+         *
+         * * `primary`：位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面时，可使用该形状的选项卡
+         * * `secondary`：位于页面中，用于切换一组相关内容时，可使用该形状的选项卡
+         */
+        this.variant = 'primary';
+        /**
+         * 选项卡位置。默认为 `top-start`。可选值为：
+         *
+         * * `top-start`：位于上方，且左对齐
+         * * `top`：位于上方，且居中对齐
+         * * `top-end`：位于上方，且右对齐
+         * * `bottom-start`：位于下方，且左对齐
+         * * `bottom`：位于下方，且居中对齐
+         * * `bottom-end`：位于下方，且右对齐
+         * * `left-start`：位于左侧，且顶部对齐
+         * * `left`：位于左侧，且居中对齐
+         * * `left-end`：位于左侧，且底部对齐
+         * * `right-start`：位于右侧，且顶部对齐
+         * * `right`：位于右侧，且居中对齐
+         * * `right-end`：位于右侧，且底部对齐
+         */
+        this.placement = 'top-start';
+        /**
+         * 是否填满父元素宽度
+         */
+        this.fullWidth = false;
+        // 因为 tab 的 value 可能会重复，所以在每个 tab 元素上都添加了一个唯一的 key，通过 activeKey 来记录激活状态的 key
+        this.activeKey = 0;
+        this.tabs = [];
+        this.panels = [];
+        this.containerRef = createRef();
+        this.indicatorRef = createRef();
+    }
+    onActiveKeyChange() {
+        var _a;
+        // 根据 activeKey 读取对应 tab 的值
+        this.value = (_a = this.tabs.find((tab) => tab.key === this.activeKey)) === null || _a === void 0 ? void 0 : _a.value;
+        emit(this, 'change');
+    }
+    onValueChange() {
+        var _a;
+        const tab = this.tabs.find((tab) => tab.value === this.value);
+        this.activeKey = (_a = tab === null || tab === void 0 ? void 0 : tab.key) !== null && _a !== void 0 ? _a : 0;
+        this.updateActive();
+    }
+    onIndicatorChange() {
+        this.updateIndicator();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncTabsAndPanels();
+        this.updateComplete.then(() => {
+            this.observeResize = observeResize(this.containerRef.value, () => this.updateIndicator());
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+    }
+    render() {
+        return html `<div ${ref(this.containerRef)} part="container" class="container"><slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><div ${ref(this.indicatorRef)} part="indicator" class="indicator"></div></div><slot name="panel" @slotchange="${this.onSlotChange}"></slot>`;
+    }
+    syncTabsAndPanels() {
+        this.tabs = $(this).find('mdui-tab').get();
+        this.panels = $(this)
+            .find('mdui-tab-panel[slot="panel"]')
+            .get();
+    }
+    onSlotChange() {
+        this.syncTabsAndPanels();
+        this.updateActive();
+    }
+    onClick(event) {
+        // event.button 为 0 时，为鼠标左键点击。忽略鼠标中键和右键
+        if (event.button) {
+            return;
+        }
+        const target = event.target;
+        const tab = target.closest('mdui-tab');
+        this.activeKey = tab.key;
+        this.updateActive();
+    }
+    updateActive() {
+        this.activeTab = this.tabs
+            .map((tab) => {
+            tab.active = this.activeKey === tab.key;
+            return tab;
+        })
+            .find((tab) => tab.active);
+        this.panels.forEach((panel) => { var _a; return (panel.active = panel.value === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.value)); });
+        this.updateIndicator();
+    }
+    async updateIndicator() {
+        await this.updateComplete;
+        const activeTab = this.activeTab;
+        const $indicator = $(this.indicatorRef.value);
+        const isVertical = this.placement.startsWith('left') || this.placement.startsWith('right');
+        // 没有激活的，不显示指示器
+        if (!activeTab) {
+            $indicator.css({
+                transform: isVertical ? 'scaleY(0)' : 'scaleX(0)',
+            });
+            return;
+        }
+        const $activeTab = $(activeTab);
+        const offsetTop = activeTab.offsetTop;
+        const offsetLeft = activeTab.offsetLeft;
+        const commonStyle = isVertical
+            ? { transform: 'scaleY(1)', width: '', left: '' }
+            : { transform: 'scaleX(1)', height: '', top: '' };
+        let shownStyle = {};
+        if (this.variant === 'primary') {
+            const customSlots = $activeTab.find(':scope > [slot="custom"]').get();
+            const children = customSlots.length
+                ? customSlots
+                : $(activeTab.renderRoot)
+                    .find('slot[name="custom"]')
+                    .children()
+                    .get();
+            if (isVertical) {
+                // 最上方的元素的顶部，距离容器顶部距离
+                const top = Math.min(...children.map((child) => child.offsetTop)) + offsetTop;
+                // 最下方的元素的底部，距离容器顶部的距离
+                const bottom = Math.max(...children.map((child) => child.offsetTop + child.offsetHeight)) + offsetTop;
+                shownStyle = { top, height: bottom - top };
+            }
+            else {
+                // 最左侧的元素的左侧，距离容器左侧的距离
+                const left = Math.min(...children.map((child) => child.offsetLeft)) + offsetLeft;
+                // 最右侧的元素的右侧，距离容器左侧的距离
+                const right = Math.max(...children.map((child) => child.offsetLeft + child.offsetWidth)) + offsetLeft;
+                shownStyle = { left, width: right - left };
+            }
+        }
+        if (this.variant === 'secondary') {
+            shownStyle = isVertical
+                ? { top: offsetTop, height: activeTab.offsetHeight }
+                : { left: offsetLeft, width: activeTab.offsetWidth };
+        }
+        $indicator.css({ ...commonStyle, ...shownStyle });
+    }
+};
+Tabs.styles = [componentStyle, tabsStyle];
+__decorate([
+    property({ reflect: true })
+], Tabs.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], Tabs.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], Tabs.prototype, "placement", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'full-width',
+    })
+], Tabs.prototype, "fullWidth", void 0);
+__decorate([
+    state()
+], Tabs.prototype, "activeKey", void 0);
+__decorate([
+    watch('activeKey', true)
+], Tabs.prototype, "onActiveKeyChange", null);
+__decorate([
+    watch('value')
+], Tabs.prototype, "onValueChange", null);
+__decorate([
+    watch('variant', true),
+    watch('placement', true),
+    watch('fullWidth', true)
+], Tabs.prototype, "onIndicatorChange", null);
+Tabs = __decorate([
+    customElement('mdui-tabs')
+], Tabs);

package/components/tabs.d.ts

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

package/components/tabs.js

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