移动目录

mdui_patched/components/icon/index.d.ts

@@ -0,0 +1,31 @@
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
+import type { TemplateResult, CSSResultGroup } from 'lit';
+/**
+ * @summary 图标组件
+ *
+ * ```html
+ * <mdui-icon name="search"></mdui-icon>
+ * ```
+ *
+ * @slot - `svg` 图标的内容
+ */
+export declare class Icon extends MduiElement<IconEventMap> {
+    static styles: CSSResultGroup;
+    /**
+     * Material Icons 图标名
+     */
+    name?: string;
+    /**
+     * svg 图标的路径
+     */
+    src?: string;
+    private readonly hasSlotController;
+    protected render(): TemplateResult;
+}
+export interface IconEventMap {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-icon': Icon;
+    }
+}

mdui_patched/components/icon/index.js

@@ -0,0 +1,59 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { until } from 'lit/directives/until.js';
+import { ajax } from '@mdui/jq/functions/ajax.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
+import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { style } from './style.js';
+/**
+ * @summary 图标组件
+ *
+ * ```html
+ * <mdui-icon name="search"></mdui-icon>
+ * ```
+ *
+ * @slot - `svg` 图标的内容
+ */
+let Icon = class Icon extends MduiElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, '[default]');
+    }
+    render() {
+        const renderDefault = () => {
+            if (this.name) {
+                const [name, variant] = this.name.split('--');
+                const familyMap = new Map([
+                    ['outlined', 'Material Icons Outlined'],
+                    ['filled', 'Material Icons'],
+                    ['rounded', 'Material Icons Round'],
+                    ['sharp', 'Material Icons Sharp'],
+                    ['two-tone', 'Material Icons Two Tone'],
+                ]);
+                return html `<span translate="no" style="${styleMap({ fontFamily: familyMap.get(variant) })}">${name}</span>`;
+            }
+            if (this.src) {
+                return html `${until(ajax({ url: this.src }).then(unsafeSVG))}`;
+            }
+            return html ``;
+        };
+        return this.hasSlotController.test('[default]')
+            ? html `<slot></slot>`
+            : renderDefault();
+    }
+};
+Icon.styles = [componentStyle, style];
+__decorate([
+    property({ reflect: true })
+], Icon.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], Icon.prototype, "src", void 0);
+Icon = __decorate([
+    customElement('mdui-icon')
+], Icon);
+export { Icon };

mdui_patched/components/icon/style.d.ts

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

mdui_patched/components/icon/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{display:inline-block;width:1em;height:1em;font-weight:400;font-family:'Material Icons';font-display:block;font-style:normal;line-height:1;direction:ltr;letter-spacing:normal;white-space:nowrap;text-transform:none;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale;font-size:1.5rem}::slotted(svg),svg{width:100%;height:100%;fill:currentcolor}`;