移动目录

mdui_patched/components/badge/index.d.ts

@@ -0,0 +1,31 @@
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 徽标组件
+ *
+ * ```html
+ * <mdui-badge>12</mdui-badge>
+ * ```
+ *
+ * @slot - 徽标中显示的文本
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class Badge extends MduiElement<BadgeEventMap> {
+    static styles: CSSResultGroup;
+    /**
+     * 徽标的形状。可选值包括：
+     *
+     * * `small`：小型徽标，不显示文本
+     * * `large`：大型徽标，会显示文本
+     */
+    variant: /*小型徽标，不显示文本*/ 'small' | /*大型徽标，会显示文本*/ 'large';
+    protected render(): TemplateResult;
+}
+export interface BadgeEventMap {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-badge': Badge;
+    }
+}

mdui_patched/components/badge/index.js

@@ -0,0 +1,44 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { style } from './style.js';
+/**
+ * @summary 徽标组件
+ *
+ * ```html
+ * <mdui-badge>12</mdui-badge>
+ * ```
+ *
+ * @slot - 徽标中显示的文本
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+let Badge = class Badge extends MduiElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 徽标的形状。可选值包括：
+         *
+         * * `small`：小型徽标，不显示文本
+         * * `large`：大型徽标，会显示文本
+         */
+        this.variant = 'large';
+    }
+    render() {
+        if (this.variant === 'small') {
+            return nothingTemplate;
+        }
+        return html `<slot></slot>`;
+    }
+};
+Badge.styles = [componentStyle, style];
+__decorate([
+    property({ reflect: true })
+], Badge.prototype, "variant", void 0);
+Badge = __decorate([
+    customElement('mdui-badge')
+], Badge);
+export { Badge };

mdui_patched/components/badge/style.d.ts

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

mdui_patched/components/badge/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--shape-corner);padding-left:.25rem;padding-right:.25rem;color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error));height:1rem;min-width:1rem;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height)}:host([variant=small]){min-width:0;padding:0;width:.375rem;height:.375rem}`;