@mdui/shared 1.0.0

package/mixin.less

@@ -0,0 +1,380 @@
+@mdui-root-font-size: 16;
+
+@mdui-breakpoint-xs: 0px;
+@mdui-breakpoint-xs-max: 599.98px;
+@mdui-breakpoint-sm: 600px;
+@mdui-breakpoint-sm-max: 839.98px;
+@mdui-breakpoint-md: 840px;
+@mdui-breakpoint-md-max: 1079.98px;
+@mdui-breakpoint-lg: 1080px;
+@mdui-breakpoint-lg-max: 1439.98px;
+@mdui-breakpoint-xl: 1440px;
+@mdui-breakpoint-xl-max: 1919.98px;
+@mdui-breakpoint-xxl: 1920px;
+
+// px 值转 rem
+//
+// 输入: .px(font-size: 24)
+// 输出: font-size: 1.5rem
+.px(@name, @px) {
+  @{name}: unit((@px / @mdui-root-font-size), rem);
+}
+
+// 系统变量
+//
+// 输入: .sys(font-size, typescale-label-large-size)
+// 输出: font-size: var(--mdui-typescale-label-large-size, 0.875rem)
+.sys(@name, @value) {
+  @{name}: ~"var(--mdui-@{value})";
+}
+
+// 颜色值
+//
+// 输入: .color(on-primary, 30%, background-color)
+// 输出: background-color: rgb(var(--mdui-color-on-primary, 255, 255, 255))
+.color(@rgb, @opacity: 1, @name: color) {
+  @cssVariable: "--mdui-color-@{rgb}";
+
+  & when (@opacity =1) {
+    @{name}: ~"rgb(var(@{cssVariable}))";
+  }
+
+  & when not (@opacity =1) {
+    @{name}: ~"rgba(var(@{cssVariable}), @{opacity})";
+  }
+}
+
+.background-color(@rgb, @opacity: 1) {
+  .color(@rgb, @opacity, background-color);
+}
+
+.border-color(@rgb, @opacity: 1) {
+  .color(@rgb, @opacity, border-color);
+}
+
+.stroke(@rgb, @opacity: 1) {
+  .color(@rgb, @opacity, stroke);
+}
+
+.caret-color(@rgb, @opacity: 1) {
+  .color(@rgb, @opacity, caret-color);
+}
+
+// 设置边框
+//
+// 输入: .border(1px, solid, primary, border)
+// 输出: border: 1px solid rgb(103,80,164)
+//
+// 输入: .border(1px, solid, primary, 30%, border-top)
+// 输出: border-top: 1px solid rgba(103,80,164,30%)
+.border(@width, @style, @rgb, @opacity: 1, @name: border) {
+  @cssVariable: "--mdui-color-@{rgb}";
+
+  & when (@opacity =1) {
+    & when (isnumber(@width)) {
+      @widthRem: unit((@width / @mdui-root-font-size), rem);
+
+      @{name}: ~"@{widthRem} @{style} rgb(var(@{cssVariable}))";
+    }
+
+    & when not (isnumber(@width)) {
+      @{name}: ~"@{width} @{style} rgb(var(@{cssVariable}))";
+    }
+  }
+
+  & when not (@opacity =1) {
+    & when (isnumber(@width)) {
+      @widthRem: unit((@width / @mdui-root-font-size), rem);
+
+      @{name}: ~"@{widthRem} @{style} rgba(var(@{cssVariable}), @{opacity})";
+    }
+
+    & when not (isnumber(@width)) {
+      @{name}: ~"@{width} @{style} rgba(var(@{cssVariable}), @{opacity})";
+    }
+  }
+}
+
+.border-top(@width, @style, @rgb, @opacity: 1) {
+  .border(@width, @style, @rgb, @opacity, border-top);
+}
+
+.border-right(@width, @style, @rgb, @opacity: 1) {
+  .border(@width, @style, @rgb, @opacity, border-right);
+}
+
+.border-bottom(@width, @style, @rgb, @opacity: 1) {
+  .border(@width, @style, @rgb, @opacity, border-bottom);
+}
+
+.border-left(@width, @style, @rgb, @opacity: 1) {
+  .border(@width, @style, @rgb, @opacity, border-left);
+}
+
+.border-width(@width) {
+  .px(border-width, @width);
+}
+
+// 设置 border-radius
+//
+// 输入：.corner(medium)
+// 输出：border-radius: 0.75rem;
+.shape-corner(@value, @placement: null) {
+  @cssVariable: "--mdui-shape-corner-@{value}";
+
+  & when (@placement =null) {
+    border-radius: ~"var(@{cssVariable})";
+  }
+
+  & when (@placement =top) {
+    border-radius: ~"var(@{cssVariable}) var(@{cssVariable}) 0 0";
+  }
+
+  & when (@placement =bottom) {
+    border-radius: ~"0 0 var(@{cssVariable}) var(@{cssVariable})";
+  }
+
+  & when (@placement =start) {
+    border-radius: ~"var(@{cssVariable}) 0 0 var(@{cssVariable})";
+  }
+
+  & when (@placement =end) {
+    border-radius: ~"0 var(@{cssVariable}) var(@{cssVariable}) 0";
+  }
+
+  & when (@placement =top-start) {
+    border-top-left-radius: ~"var(@{cssVariable})";
+  }
+
+  & when (@placement = top-end) {
+    border-top-right-radius: ~"var(@{cssVariable})";
+  }
+
+  & when (@placement = bottom-start) {
+    border-bottom-left-radius: ~"var(@{cssVariable})";
+  }
+
+  & when (@placement = bottom-end) {
+    border-bottom-right-radius: ~"var(@{cssVariable})";
+  }
+}
+
+.border-radius(@value, @placement: null) {
+  & when (@placement =null) {
+    .px(border-radius, @value);
+  }
+
+  & when (@placement =top) {
+    .px(border-top-left-radius, @value);
+    .px(border-top-right-radius, @value);
+  }
+
+  & when (@placement =bottom) {
+    .px(border-bottom-right-radius, @value);
+    .px(border-bottom-left-radius, @value);
+  }
+
+  & when (@placement =start) {
+    .px(border-top-left-radius, @value);
+    .px(border-bottom-left-radius, @value);
+  }
+
+  & when (@placement =end) {
+    .px(border-top-right-radius, @value);
+    .px(border-bottom-right-radius, @value);
+  }
+}
+
+// padding 或 margin 值中的 px 转 rem。传 1 - 4 个参数都行
+//
+// 输入: .padding(24)
+// 输出: padding: 1.5rem
+.padding(@top, @right: null, @bottom: null, @left: null, @name: padding) {
+  & when (@right =null) and (@bottom =null) and (@left =null) {
+    @{name}: unit((@top / @mdui-root-font-size), rem);
+  }
+
+  & when (not(@right =null)) and (@bottom =null) and (@left =null) {
+    @{name}: unit((@top / @mdui-root-font-size), rem) unit((@right / @mdui-root-font-size), rem);
+  }
+
+  & when (not(@right =null)) and (not(@bottom =null)) and (@left =null) {
+    @{name}: unit((@top / @mdui-root-font-size), rem) unit((@right / @mdui-root-font-size), rem) unit((@bottom / @mdui-root-font-size), rem);
+  }
+
+  & when (not(@right =null)) and (not(@bottom =null)) and (not(@left =null)) {
+    @{name}: unit((@top / @mdui-root-font-size), rem) unit((@right / @mdui-root-font-size), rem) unit((@bottom / @mdui-root-font-size), rem) unit((@left / @mdui-root-font-size), rem);
+  }
+}
+
+.margin(@top, @right: null, @bottom: null, @left: null) {
+  .padding(@top, @right, @bottom, @left, margin);
+}
+
+.padding-top(@value) {
+  .px(padding-top, @value);
+}
+
+.padding-right(@value) {
+  .px(padding-right, @value);
+}
+
+.padding-bottom(@value) {
+  .px(padding-bottom, @value);
+}
+
+.padding-left(@value) {
+  .px(padding-left, @value);
+}
+
+.margin-top(@value) {
+  .px(margin-top, @value);
+}
+
+.margin-right(@value) {
+  .px(margin-right, @value);
+}
+
+.margin-bottom(@value) {
+  .px(margin-bottom, @value);
+}
+
+.margin-left(@value) {
+  .px(margin-left, @value);
+}
+
+// 设置 box-shadow，使用该 mixin 时，需要自行在元素上添加 transition-property: box-shadow
+.elevation(@value) {
+  .sys(box-shadow, ~"elevation-level@{value}");
+}
+
+.state-layer-color(@rgb) {
+  .sys(--mdui-comp-ripple-state-layer-color, ~"color-@{rgb}");
+}
+
+.translate(@x, @y) {
+  transform: translate(unit((@x / @mdui-root-font-size), rem), unit((@y / @mdui-root-font-size), rem));
+}
+
+.translate-x(@x) {
+  transform: translateX(unit((@x / @mdui-root-font-size), rem));
+}
+
+.translate-y(@y) {
+  transform: translateY(unit((@y / @mdui-root-font-size), rem));
+}
+
+.font-size(@value) {
+  & when (isnumber(@value)) {
+    .px(font-size, @value);
+  }
+
+  & when not (isnumber(@value)) {
+    .sys(font-size, ~"typescale-@{value}-size");
+  }
+}
+
+.font-weight(@value) {
+  .sys(font-weight, ~"typescale-@{value}-weight");
+}
+
+.letter-spacing(@value) {
+  .sys(letter-spacing, ~"typescale-@{value}-tracking");
+}
+
+.height(@value) {
+  .px(height, @value);
+}
+
+.line-height(@value) {
+  & when (isnumber(@value)) {
+    .px(line-height, @value);
+  }
+
+  & when not (isnumber(@value)) {
+    .sys(line-height, ~"typescale-@{value}-line-height");
+  }
+}
+
+.typescale(@name) {
+  .font-size(@name);
+  .font-weight(@name);
+  .letter-spacing(@name);
+  .line-height(@name);
+}
+
+.width(@value) {
+  .px(width, @value);
+}
+
+.min-width(@value) {
+  .px(min-width, @value);
+}
+
+.max-width(@value) {
+  .px(max-width, @value);
+}
+
+.min-height(@value) {
+  .px(min-height, @value);
+}
+
+.top(@value) {
+  .px(top, @value);
+}
+
+.right(@value) {
+  .px(right, @value);
+}
+
+.bottom(@value) {
+  .px(bottom, @value);
+}
+
+.left(@value) {
+  .px(left, @value);
+}
+
+.opacity(@value) {
+  .sys(opacity, ~"state-layer-@{value}");
+}
+
+.animation-timing-function(@value) {
+  .sys(animation-timing-function, ~"motion-easing-@{value}");
+}
+
+// 生成 transition
+//
+// @duration 为 short1、short2 等
+// @timing-function 为 standard、standard-accelerate、emphasized 等
+// @delay 可以为整数，表示毫秒；也可以为 short1、short2 等
+.transition(@property, @duration, @timing-function, @delay: 0) {
+  @durationVariable: "--mdui-motion-duration-@{duration}";
+  @timingFunctionVariable: "--mdui-motion-easing-@{timing-function}";
+
+  & when (@delay =0) {
+    transition: ~"@{property} var(@{durationVariable}) var(@{timingFunctionVariable})";
+  }
+
+  & when not (@delay =0) {
+    & when (isnumber(@delay)) {
+      transition: ~"@{property} var(@{durationVariable}) var(@{timingFunctionVariable}) @{delay}ms";
+    }
+
+    & when not (isnumber(@delay)) {
+      transition: ~"@{property} var(@{durationVariable}) var(@{timingFunctionVariable}) var(--mdui-motion-duration-@{delay})";
+    }
+  }
+}
+
+.transition-timing-function(@value) {
+  .sys(transition-timing-function, ~"motion-easing-@{value}");
+}
+
+.transition-duration(@value) {
+  .sys(transition-duration, ~"motion-duration-@{value}");
+}
+
+.transition-delay(@value) {
+  .sys(transition-delay, ~"motion-duration-@{value}");
+}

package/mixins/anchor.d.ts

@@ -0,0 +1,22 @@
+import { nothing } from 'lit';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LitElement, TemplateResult } from 'lit';
+import type { DirectiveResult } from 'lit/directive.js';
+import type { RefDirective } from 'lit/directives/ref.js';
+type RenderAnchorOptions = {
+    id?: string;
+    className?: string;
+    part?: string;
+    content?: TemplateResult | typeof nothing | (TemplateResult | typeof nothing)[];
+    tabindex?: number;
+    refDirective?: DirectiveResult<typeof RefDirective>;
+};
+export declare class AnchorMixinInterface extends LitElement {
+    href?: string;
+    download?: string;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    rel?: 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag';
+    protected renderAnchor(options: RenderAnchorOptions): TemplateResult;
+}
+export declare const AnchorMixin: <T extends Constructor<LitElement>>(superclass: T) => Constructor<AnchorMixinInterface> & T;
+export {};

package/mixins/anchor.js

@@ -0,0 +1,25 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+export const AnchorMixin = (superclass) => {
+    class AnchorMixinClass extends superclass {
+        renderAnchor({ id, className, part, content = html `<slot></slot>`, refDirective, }) {
+            return html `<a ${refDirective} id="${ifDefined(id)}" class="_a ${className ? className : ''}" part="${ifDefined(part)}" href="${ifDefined(this.href)}" download="${ifDefined(this.download)}" target="${ifDefined(this.target)}" rel="${ifDefined(this.rel)}">${content}</a>`;
+        }
+    }
+    __decorate([
+        property({ reflect: true })
+    ], AnchorMixinClass.prototype, "href", void 0);
+    __decorate([
+        property({ reflect: true })
+    ], AnchorMixinClass.prototype, "download", void 0);
+    __decorate([
+        property({ reflect: true })
+    ], AnchorMixinClass.prototype, "target", void 0);
+    __decorate([
+        property({ reflect: true })
+    ], AnchorMixinClass.prototype, "rel", void 0);
+    // @ts-ignore
+    return AnchorMixinClass;
+};

package/mixins/focusable.d.ts

@@ -0,0 +1,19 @@
+import '@mdui/jq/methods/attr.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/each.js';
+import '@mdui/jq/methods/removeAttr.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LitElement } from 'lit';
+export declare class FocusableMixinInterface extends LitElement {
+    autofocus: boolean;
+    tabIndex: number;
+    protected get focusDisabled(): boolean;
+    protected get focusElement(): HTMLElement | null | undefined;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    click(): void;
+}
+/**
+ * 参考：https://github.com/adobe/spectrum-web-components/blob/main/packages/shared/src/focusable.ts
+ */
+export declare const FocusableMixin: <T extends Constructor<LitElement>>(superclass: T) => Constructor<FocusableMixinInterface> & T;

package/mixins/focusable.js

@@ -0,0 +1,251 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { getDocument } from 'ssr-window';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/attr.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/each.js';
+import '@mdui/jq/methods/removeAttr.js';
+import { booleanConverter } from '../helpers/decorator.js';
+let isClick = true;
+const document = getDocument();
+document.addEventListener('pointerdown', () => {
+    isClick = true;
+});
+document.addEventListener('keydown', () => {
+    isClick = false;
+});
+/**
+ * 参考：https://github.com/adobe/spectrum-web-components/blob/main/packages/shared/src/focusable.ts
+ */
+export const FocusableMixin = (superclass) => {
+    class FocusableMixinClass extends superclass {
+        constructor() {
+            super(...arguments);
+            /**
+             * 是否在页面加载完成后自动获得焦点
+             */
+            this.autofocus = false;
+            /**
+             * 是否获得了焦点，不管是鼠标点击，还是键盘切换获得的焦点，都会添加该属性
+             * 添加到 :host 元素上，供 CSS 选择器添加样式
+             */
+            this.focused = false;
+            /**
+             * 是否通过键盘切换获得了焦点
+             * 添加到 :host 元素上，供 CSS 选择器添加样式
+             */
+            this.focusVisible = false;
+            this._manipulatingTabindex = false;
+            this._tabIndex = 0;
+        }
+        /**
+         * 通过 Tab 键在元素之间切换焦点时，tabIndex 属性指定了元素获取焦点的顺序
+         */
+        get tabIndex() {
+            const $this = $(this);
+            if (this.focusElement === this) {
+                return Number($this.attr('tabindex') || -1);
+            }
+            const tabIndexAttribute = Number($this.attr('tabindex') || 0);
+            if (this.focusDisabled || tabIndexAttribute < 0) {
+                return -1;
+            }
+            if (!this.focusElement) {
+                return tabIndexAttribute;
+            }
+            return this.focusElement.tabIndex;
+        }
+        set tabIndex(tabIndex) {
+            if (this._manipulatingTabindex) {
+                this._manipulatingTabindex = false;
+                return;
+            }
+            const $this = $(this);
+            if (this.focusElement === this) {
+                if (tabIndex !== null) {
+                    this._tabIndex = tabIndex;
+                }
+                $this.attr('tabindex', this.focusDisabled ? null : tabIndex);
+                return;
+            }
+            const onPointerDown = () => {
+                if (this.tabIndex === -1) {
+                    this.tabIndex = 0;
+                    this.focus({ preventScroll: true });
+                }
+            };
+            if (tabIndex === -1) {
+                this.addEventListener('pointerdown', onPointerDown);
+            }
+            else {
+                this._manipulatingTabindex = true;
+                this.removeEventListener('pointerdown', onPointerDown);
+            }
+            if (tabIndex === -1 || this.focusDisabled) {
+                $this.attr('tabindex', -1);
+                if (tabIndex !== -1) {
+                    this.manageFocusElementTabindex(tabIndex);
+                }
+                return;
+            }
+            if (!this.hasAttribute('tabindex')) {
+                this._manipulatingTabindex = false;
+            }
+            this.manageFocusElementTabindex(tabIndex);
+        }
+        /**
+         * 父类要实现该属性，表示是否禁用 focus 状态
+         */
+        get focusDisabled() {
+            throw new Error('Must implement focusDisabled getter!');
+        }
+        /**
+         * 最终获得焦点的元素
+         */
+        get focusElement() {
+            throw new Error('Must implement focusElement getter!');
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.updateComplete.then(() => {
+                requestAnimationFrame(() => {
+                    this.manageAutoFocus();
+                });
+            });
+        }
+        /**
+         * 模拟鼠标点击元素
+         */
+        click() {
+            if (this.focusDisabled) {
+                return;
+            }
+            if (this.focusElement !== this) {
+                this.focusElement.click();
+            }
+            else {
+                HTMLElement.prototype.click.apply(this);
+            }
+        }
+        /**
+         * 将焦点设置在当前元素。
+         *
+         * 可传入一个对象作为参数。对象属性为：
+         *
+         * * `preventScroll`：默认情况下，在聚焦后会滚动页面，以将聚焦的元素滚动到视图中。可将该属性设为 `true` 以阻止页面滚动。
+         */
+        focus(options) {
+            if (this.focusDisabled || !this.focusElement) {
+                return;
+            }
+            if (this.focusElement !== this) {
+                this.focusElement.focus(options);
+            }
+            else {
+                HTMLElement.prototype.focus.apply(this, [options]);
+            }
+        }
+        /**
+         * 从当前元素中移除焦点
+         */
+        blur() {
+            if (this.focusElement !== this) {
+                this.focusElement.blur();
+            }
+            else {
+                HTMLElement.prototype.blur.apply(this);
+            }
+        }
+        firstUpdated(changedProperties) {
+            super.firstUpdated(changedProperties);
+            this.focusElement.addEventListener('focus', () => {
+                this.focused = true;
+                this.focusVisible = !isClick;
+            });
+            this.focusElement.addEventListener('blur', () => {
+                this.focused = false;
+                this.focusVisible = false;
+            });
+        }
+        update(changedProperties) {
+            if (this._lastFocusDisabled === undefined ||
+                this._lastFocusDisabled !== this.focusDisabled) {
+                this._lastFocusDisabled = this.focusDisabled;
+                const $this = $(this);
+                if (this.focusDisabled) {
+                    $this.removeAttr('tabindex');
+                }
+                else {
+                    if (this.focusElement === this) {
+                        this._manipulatingTabindex = true;
+                        $this.attr('tabindex', this._tabIndex);
+                    }
+                    else if (this.tabIndex > -1) {
+                        $this.removeAttr('tabindex');
+                    }
+                }
+            }
+            super.update(changedProperties);
+        }
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (this.focused && this.focusDisabled) {
+                this.blur();
+            }
+        }
+        async manageFocusElementTabindex(tabIndex) {
+            if (!this.focusElement) {
+                await this.updateComplete;
+            }
+            if (tabIndex === null) {
+                this.focusElement.removeAttribute('tabindex');
+            }
+            else {
+                this.focusElement.tabIndex = tabIndex;
+            }
+        }
+        manageAutoFocus() {
+            if (this.autofocus) {
+                this.dispatchEvent(new KeyboardEvent('keydown', {
+                    code: 'Tab',
+                }));
+                this.focusElement.focus();
+            }
+        }
+    }
+    __decorate([
+        property({
+            type: Boolean,
+            /**
+             * 哪些属性需要 reflect: true？
+             * 一般所有属性都需要 reflect，但以下情况除外：
+             * 1. 会频繁变更的属性
+             * 2. 属性同步会造成较大性能开销的属性
+             * 3. 复杂类型属性（数组、对象等，仅提供 property，不提供 attribute）
+             */
+            reflect: true,
+            converter: booleanConverter,
+        })
+    ], FocusableMixinClass.prototype, "autofocus", void 0);
+    __decorate([
+        property({
+            type: Boolean,
+            reflect: true,
+            converter: booleanConverter,
+        })
+    ], FocusableMixinClass.prototype, "focused", void 0);
+    __decorate([
+        property({
+            type: Boolean,
+            reflect: true,
+            converter: booleanConverter,
+            attribute: 'focus-visible',
+        })
+    ], FocusableMixinClass.prototype, "focusVisible", void 0);
+    __decorate([
+        property({ type: Number, reflect: true, attribute: 'tabindex' })
+    ], FocusableMixinClass.prototype, "tabIndex", null);
+    // @ts-ignore
+    return FocusableMixinClass;
+};