duoyun-ui 2.1.0 → 2.2.1

package/elements/avatar.d.ts

@@ -1,17 +1,6 @@
 import { GemElement } from '@mantou/gem/lib/element';
 import type { Status } from './status-light';
 import './tooltip';
-/**
- * @customElement dy-avatar
- * @attr src
- * @attr alt
- * @attr status
- * @attr background
- * @attr tooltip
- * @attr size
- * @attr square
- * @attr crossorigin
- */
 export declare class DuoyunAvatarElement extends GemElement {
     #private;
     static avatar: string;
@@ -22,7 +11,7 @@ export declare class DuoyunAvatarElement extends GemElement {
     size: 'small' | 'medium' | 'large';
     crossorigin: 'anonymous' | 'use-credentials';
     square: boolean;
-    render: () => import("@mantou/gem/lib/element").TemplateResult;
+    render: () => import("@mantou/gem/lib/lit-html").TemplateResult;
 }
 export type AvatarItem = {
     src?: string;
@@ -32,9 +21,6 @@ export type AvatarItem = {
     square?: boolean;
     onClick?: (evt: Event) => void;
 };
-/**
- * @customElement dy-avatar-group
- */
 export declare class DuoyunAvatarGroupElement extends GemElement {
     #private;
     static avatar: string;
@@ -44,6 +30,6 @@ export declare class DuoyunAvatarGroupElement extends GemElement {
     /**@deprecated */
     data?: AvatarItem[];
     items?: AvatarItem[];
-    render: () => import("@mantou/gem/lib/element").TemplateResult;
+    render: () => import("@mantou/gem/lib/lit-html").TemplateResult;
 }
 //# sourceMappingURL=avatar.d.ts.map

package/elements/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../src/elements/avatar.ts"],"names":[],"mappings":"AAWA,OAAO,EAAkB,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAM3E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,WAAW,CAAC;AA6DnB;;;;;;;;;;GAUG;AACH,qBAGa,mBAAoB,SAAQ,UAAU;;IAC3C,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,WAAW,EAAE,WAAW,GAAG,iBAAiB,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAK/B,MAAM,yDAaJ;CACH;AA6BD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF;;GAEG;AACH,qBAIa,wBAAyB,SAAQ,UAAU;;IAChD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAEd,GAAG,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,WAAW,EAAE,WAAW,GAAG,iBAAiB,CAAC;IAExD,iBAAiB;IACP,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IA6B/B,MAAM,yDAkBJ;CACH"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../src/elements/avatar.ts"],"names":[],"mappings":"AAYA,OAAO,EAAO,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAIhE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,WAAW,CAAC;AAmEnB,qBAGa,mBAAoB,SAAQ,UAAU;;IAC3C,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,WAAW,EAAE,WAAW,GAAG,iBAAiB,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAK/B,MAAM,0DAeJ;CACH;AA6BD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,qBAGa,wBAAyB,SAAQ,UAAU;;IAChD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAEd,GAAG,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,WAAW,EAAE,WAAW,GAAG,iBAAiB,CAAC;IAExD,iBAAiB;IACP,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IA6B/B,MAAM,0DAeJ;CACH"}

package/elements/avatar.js

@@ -32,15 +32,15 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { adoptedStyle, customElement, attribute, property, boolattribute, numattribute, part, aria, shadow, } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
-import { css, exportPartsMap } from '@mantou/gem/lib/utils';
 import { createDecoratorTheme } from '@mantou/gem/helper/theme';
+import { adoptedStyle, aria, attribute, boolattribute, customElement, numattribute, part, property, shadow, } from '@mantou/gem/lib/decorators';
+import { css, GemElement, html } from '@mantou/gem/lib/element';
+import { exportPartsMap } from '@mantou/gem/lib/utils';
 import { theme } from '../lib/theme';
 import { getStatusColor } from './status-light';
 import './tooltip';
 const elementTheme = createDecoratorTheme({ color: '' });
-const style = createCSSSheet(css `
+const style = css `
   :host(:where(:not([hidden]))) {
     cursor: default;
     display: inline-block;
@@ -62,8 +62,14 @@ const style = createCSSSheet(css `
   :host([size='large']) {
     width: 3.8em;
   }
-  .img {
-    display: block;
+  .slot:has-slotted {
+    place-items: center;
+    place-content: center;
+    border-color: ${theme.textColor};
+  }
+  .img,
+  .slot:has-slotted {
+    display: flex;
     width: 100%;
     aspect-ratio: 1;
     border-radius: var(--radius);
@@ -95,18 +101,7 @@ const style = createCSSSheet(css `
     transform: translate(50%, -50%);
     background-color: ${elementTheme.color};
   }
-`);
-/**
- * @customElement dy-avatar
- * @attr src
- * @attr alt
- * @attr status
- * @attr background
- * @attr tooltip
- * @attr size
- * @attr square
- * @attr crossorigin
- */
+`;
 let DuoyunAvatarElement = (() => {
     let _classDecorators = [customElement('dy-avatar'), adoptedStyle(style), shadow()];
     let _classDescriptor;
@@ -178,15 +173,17 @@ let DuoyunAvatarElement = (() => {
         render = (__runInitializers(this, _private_theme_extraInitializers), () => {
             return html `
       <dy-tooltip .content=${this.tooltip}>
-        <img
-          class="img"
-          alt=${this.alt || this.src}
-          src=${this.src}
-          part=${DuoyunAvatarElement.avatar}
-          crossorigin=${this.crossorigin}
-        />
+        <slot class="slot">
+          <img
+            class="img"
+            alt=${this.alt || this.src}
+            src=${this.src}
+            part=${DuoyunAvatarElement.avatar}
+            crossorigin=${this.crossorigin}
+          />
+        </slot>
       </dy-tooltip>
-      ${this.status ? html `<div class="status"></div>` : ''}
+      <div v-if=${!!this.status} class="status"></div>
     `;
         });
         static {
@@ -197,8 +194,8 @@ let DuoyunAvatarElement = (() => {
     return DuoyunAvatarElement = _classThis;
 })();
 export { DuoyunAvatarElement };
-const groupStyle = createCSSSheet(css `
-  :host(:where(:not([hidden]))) {
+const groupStyle = css `
+  :scope:where(:not([hidden])) {
     display: flex;
   }
   .item:not(:first-child) {
@@ -222,13 +219,10 @@ const groupStyle = createCSSSheet(css `
   .item:hover + .item:last-child {
     --m: var(--m-left);
   }
-`);
-/**
- * @customElement dy-avatar-group
- */
+`;
 let DuoyunAvatarGroupElement = (() => {
     var _a;
-    let _classDecorators = [customElement('dy-avatar-group'), adoptedStyle(groupStyle), aria({ role: 'list' }), shadow()];
+    let _classDecorators = [customElement('dy-avatar-group'), adoptedStyle(groupStyle), aria({ role: 'list' })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
@@ -307,18 +301,15 @@ let DuoyunAvatarGroupElement = (() => {
             const rest = this.#items.slice(this.#max);
             return html `
       ${this.#items.slice(0, this.#max).map((avatar) => this.#renderAvatar(avatar))}
-      ${rest.length
-                ? html `
-            <dy-avatar
-              exportparts=${DuoyunAvatarElement.avatar}
-              class="item"
-              role="listitem"
-              .tooltip=${rest.map((e) => e.alt).join()}
-            >
-              +${rest.length}
-            </dy-avatar>
-          `
-                : ''}
+      <dy-avatar
+        v-if=${!!rest.length}
+        exportparts=${DuoyunAvatarElement.avatar}
+        class="item"
+        role="listitem"
+        .tooltip=${rest.map((e) => e.alt).join()}
+      >
+        +${rest.length}
+      </dy-avatar>
     `;
         };
         static {

package/elements/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../src/elements/avatar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../src/elements/avatar.ts"],"names":[],"mappings":"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"}

package/elements/badge.d.ts

@@ -1,9 +1,6 @@
 import { GemElement } from '@mantou/gem/lib/element';
 import type { StringList } from '../lib/types';
 import './use';
-/**
- * @customElement dy-badge
- */
 export declare class DuoyunBadgeElement extends GemElement {
     #private;
     static unnamed: string;
@@ -16,6 +13,6 @@ export declare class DuoyunBadgeElement extends GemElement {
     max: number;
     inline: boolean;
     icon?: string | Element | DocumentFragment;
-    render: () => import("@mantou/gem/lib/element").TemplateResult;
+    render: () => import("@mantou/gem/lib/lit-html").TemplateResult;
 }
 //# sourceMappingURL=badge.d.ts.map

package/elements/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../src/elements/badge.ts"],"names":[],"mappings":"AAaA,OAAO,EAA6B,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAKtF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,OAAO,CAAC;AA0Df;;GAEG;AACH,qBAIa,kBAAmB,SAAQ,UAAU;;IAC1C,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAEvB,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;IAEhB,KAAK,EAAE,UAAU,CAAC,UAAU,GAAG,aAAa,GAAG,QAAQ,CAAC,CAAC;IACpE,+BAA+B;IACpB,KAAK,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IAEnB,MAAM,EAAE,OAAO,CAAC;IAEb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,gBAAgB,CAAC;IAsBrD,MAAM,yDAgBJ;CACH"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../src/elements/badge.ts"],"names":[],"mappings":"AAaA,OAAO,EAAkB,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAK3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,OAAO,CAAC;AA0Df,qBAIa,kBAAmB,SAAQ,UAAU;;IAC1C,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAEvB,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;IAEhB,KAAK,EAAE,UAAU,CAAC,UAAU,GAAG,aAAa,GAAG,QAAQ,CAAC,CAAC;IACpE,+BAA+B;IACpB,KAAK,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IAEnB,MAAM,EAAE,OAAO,CAAC;IAEb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,gBAAgB,CAAC;IAsBrD,MAAM,0DAaJ;CACH"}

package/elements/badge.js

@@ -32,13 +32,13 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { adoptedStyle, customElement, attribute, part, slot, numattribute, property, boolattribute, state, shadow, mounted, } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, createRef, GemElement, html } from '@mantou/gem/lib/element';
-import { classMap, css } from '@mantou/gem/lib/utils';
+import { adoptedStyle, attribute, boolattribute, customElement, mounted, numattribute, part, property, shadow, slot, state, } from '@mantou/gem/lib/decorators';
+import { createRef, css, GemElement, html } from '@mantou/gem/lib/element';
+import { classMap } from '@mantou/gem/lib/utils';
 import { contentsContainer } from '../lib/styles';
 import { getSemanticColor, theme } from '../lib/theme';
 import './use';
-const style = createCSSSheet(css `
+const style = css `
   .badge {
     display: flex;
     align-items: center;
@@ -92,10 +92,7 @@ const style = createCSSSheet(css `
       right: 0;
     }
   }
-`);
-/**
- * @customElement dy-badge
- */
+`;
 let DuoyunBadgeElement = (() => {
     let _classDecorators = [customElement('dy-badge'), adoptedStyle(style), adoptedStyle(contentsContainer), shadow()];
     let _classDescriptor;
@@ -129,6 +126,9 @@ let DuoyunBadgeElement = (() => {
     let _icon_decorators;
     let _icon_initializers = [];
     let _icon_extraInitializers = [];
+    let _private_onSlotChange_decorators;
+    let _private_onSlotChange_initializers = [];
+    let _private_onSlotChange_extraInitializers = [];
     let _private_init_decorators;
     let _private_init_initializers = [];
     let _private_init_extraInitializers = [];
@@ -145,6 +145,7 @@ let DuoyunBadgeElement = (() => {
             _max_decorators = [numattribute];
             _inline_decorators = [state];
             _icon_decorators = [property];
+            _private_onSlotChange_decorators = [mounted()];
             _private_init_decorators = [mounted()];
             __esDecorate(null, null, _static_unnamed_decorators, { kind: "field", name: "unnamed", static: true, private: false, access: { has: obj => "unnamed" in obj, get: obj => obj.unnamed, set: (obj, value) => { obj.unnamed = value; } }, metadata: _metadata }, _static_unnamed_initializers, _static_unnamed_extraInitializers);
             __esDecorate(null, null, _static_badge_decorators, { kind: "field", name: "badge", static: true, private: false, access: { has: obj => "badge" in obj, get: obj => obj.badge, set: (obj, value) => { obj.badge = value; } }, metadata: _metadata }, _static_badge_initializers, _static_badge_extraInitializers);
@@ -155,6 +156,7 @@ let DuoyunBadgeElement = (() => {
             __esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
             __esDecorate(null, null, _inline_decorators, { kind: "field", name: "inline", static: false, private: false, access: { has: obj => "inline" in obj, get: obj => obj.inline, set: (obj, value) => { obj.inline = value; } }, metadata: _metadata }, _inline_initializers, _inline_extraInitializers);
             __esDecorate(null, null, _icon_decorators, { kind: "field", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+            __esDecorate(null, null, _private_onSlotChange_decorators, { kind: "field", name: "#onSlotChange", static: false, private: true, access: { has: obj => #onSlotChange in obj, get: obj => obj.#onSlotChange, set: (obj, value) => { obj.#onSlotChange = value; } }, metadata: _metadata }, _private_onSlotChange_initializers, _private_onSlotChange_extraInitializers);
             __esDecorate(null, null, _private_init_decorators, { kind: "field", name: "#init", static: false, private: true, access: { has: obj => #init in obj, get: obj => obj.#init, set: (obj, value) => { obj.#init = value; } }, metadata: _metadata }, _private_init_initializers, _private_init_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             DuoyunBadgeElement = _classThis = _classDescriptor.value;
@@ -177,28 +179,24 @@ let DuoyunBadgeElement = (() => {
         get #color() {
             return getSemanticColor(this.color) || this.color || theme.negativeColor;
         }
-        #onSlotChange = () => {
-            this.inline = !this.#slotRef.element.assignedElements({ flatten: true }).length;
-        };
-        #init = __runInitializers(this, _private_init_initializers, () => {
-            this.inline = !this.childNodes.length;
-            this.#slotRef.element?.addEventListener('slotchange', this.#onSlotChange);
+        #onSlotChange = __runInitializers(this, _private_onSlotChange_initializers, () => {
+            this.inline = !this.#slotRef.value.assignedElements({ flatten: true }).length;
         });
+        #init = (__runInitializers(this, _private_onSlotChange_extraInitializers), __runInitializers(this, _private_init_initializers, () => {
+            this.#slotRef.value?.addEventListener('slotchange', this.#onSlotChange);
+        }));
         render = (__runInitializers(this, _private_init_extraInitializers), () => {
             const value = Number(this.count) > this.#max ? `${this.#max}+` : `${this.count}`;
             return html `
-      <slot ref=${this.#slotRef.ref}></slot>
-      ${this.count || this.icon || this.dot
-                ? html `
-            <span
-              class=${classMap({ badge: true, long: value.length > 1 })}
-              part=${DuoyunBadgeElement.badge}
-              style="background:${this.#color}"
-            >
-              ${this.dot ? '' : this.icon ? html `<dy-use class="icon" .element=${this.icon}></dy-use>` : value}
-            </span>
-          `
-                : ''}
+      <slot ${this.#slotRef}></slot>
+      <span
+        v-if=${!!(this.count || this.icon || this.dot)}
+        class=${classMap({ badge: true, long: value.length > 1 })}
+        part=${DuoyunBadgeElement.badge}
+        style="background:${this.#color}"
+      >
+        ${this.dot ? '' : this.icon ? html `<dy-use class="icon" .element=${this.icon}></dy-use>` : value}
+      </span>
     `;
         });
         static {

package/elements/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../src/elements/badge.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../src/elements/badge.ts"],"names":[],"mappings":"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"}

package/elements/banner.d.ts

@@ -3,9 +3,6 @@ import { GemElement } from '@mantou/gem/lib/element';
 import './use';
 import './divider';
 type Status = 'positive' | 'notice' | 'negative' | 'default';
-/**
- * @customElement dy-banner
- */
 export declare class DuoyunBannerElement extends GemElement {
     #private;
     static unnamed: string;
@@ -16,7 +13,7 @@ export declare class DuoyunBannerElement extends GemElement {
         handle: () => void;
     };
     close: Emitter<null>;
-    render: () => import("@mantou/gem/lib/element").TemplateResult;
+    render: () => import("@mantou/gem/lib/lit-html").TemplateResult;
 }
 export {};
 //# sourceMappingURL=banner.d.ts.map

package/elements/banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../src/elements/banner.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAY1D,OAAO,EAAkB,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAO3E,OAAO,OAAO,CAAC;AACf,OAAO,WAAW,CAAC;AA0DnB,KAAK,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAE7D;;GAEG;AACH,qBAIa,mBAAoB,SAAQ,UAAU;;IAC3C,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IAEhB,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAE/C,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAa9B,MAAM,yDA0BJ;CACH"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../src/elements/banner.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAY1D,OAAO,EAAO,UAAU,EAAQ,MAAM,yBAAyB,CAAC;AAMhE,OAAO,OAAO,CAAC;AACf,OAAO,WAAW,CAAC;AA0DnB,KAAK,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAE7D,qBAIa,mBAAoB,SAAQ,UAAU;;IAC3C,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IAEhB,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAE/C,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAa9B,MAAM,0DAmBJ;CACH"}

package/elements/banner.js

@@ -32,15 +32,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { adoptedStyle, customElement, attribute, emitter, property, boolattribute, slot, shadow, aria, } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
-import { css } from '@mantou/gem/lib/utils';
-import { theme } from '../lib/theme';
-import { icons } from '../lib/icons';
+import { adoptedStyle, aria, attribute, boolattribute, customElement, emitter, property, shadow, slot, } from '@mantou/gem/lib/decorators';
+import { css, GemElement, html } from '@mantou/gem/lib/element';
 import { commonHandle } from '../lib/hotkeys';
+import { icons } from '../lib/icons';
+import { theme } from '../lib/theme';
 import './use';
 import './divider';
-const style = createCSSSheet(css `
+const style = css `
   :host(:where(:not([hidden]))) {
     display: flex;
     align-items: flex-start;
@@ -94,10 +93,7 @@ const style = createCSSSheet(css `
   .close:hover {
     opacity: 1;
   }
-`);
-/**
- * @customElement dy-banner
- */
+`;
 let DuoyunBannerElement = (() => {
     let _classDecorators = [customElement('dy-banner'), adoptedStyle(style), shadow({ delegatesFocus: true }), aria({ role: 'banner' })];
     let _classDescriptor;
@@ -155,28 +151,21 @@ let DuoyunBannerElement = (() => {
         render = (__runInitializers(this, _close_extraInitializers), () => {
             const icon = this.#icon;
             return html `
-      ${icon ? html `<dy-use class="icon" .element=${icon}></dy-use>` : ''}
-      <div class="content">
-        <slot></slot>
-      </div>
-      ${this.action
-                ? html `
-            <button class="action" @keydown=${commonHandle} @click=${this.action.handle}>${this.action.text}</button>
-          `
-                : ''}
-      ${this.closable
-                ? html `
-            <dy-divider class="divider" orientation="vertical"></dy-divider>
-            <dy-use
-              role="button"
-              class="close"
-              tabindex="0"
-              .element=${icons.close}
-              @click=${() => this.close(null)}
-              @keydown=${commonHandle}
-            ></dy-use>
-          `
-                : ''}
+      <dy-use v-if=${!!icon} class="icon" .element=${icon}></dy-use>
+      <div class="content"><slot></slot></div>
+      <button v-if=${!!this.action} class="action" @keydown=${commonHandle} @click=${this.action?.handle}>
+        ${this.action?.text}
+      </button>
+      <dy-divider v-if=${this.closable} class="divider" orientation="vertical"></dy-divider>
+      <dy-use
+        v-if=${this.closable}
+        role="button"
+        class="close"
+        tabindex="0"
+        .element=${icons.close}
+        @click=${() => this.close(null)}
+        @keydown=${commonHandle}
+      ></dy-use>
     `;
         });
         static {

package/elements/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../src/elements/banner.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,SAAS,EACT,OAAO,EACP,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,OAAO,CAAC;AACf,OAAO,WAAW,CAAC;AAEnB,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAA;;;;kBAId,KAAK,CAAC,YAAY;;;;;;;;;;kBAUlB,KAAK,CAAC,aAAa;;;kBAGnB,KAAK,CAAC,WAAW;;;kBAGjB,KAAK,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCpC,CAAC,CAAC;AAIH;;GAEG;IAKU,mBAAmB;4BAJ/B,aAAa,CAAC,WAAW,CAAC,EAC1B,YAAY,CAAC,KAAK,CAAC,EACnB,MAAM,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,EAChC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;;;;sBACgB,UAAU;;;;;;;;;;;;;;;;mCAAlB,SAAQ,WAAU;;;;0CAChD,IAAI;oCAEJ,aAAa;kCACb,SAAS;kCAET,QAAQ;iCAER,OAAO;YAPF,6KAAO,OAAO,6BAAP,OAAO,uGAAS;YAEd,0KAAA,QAAQ,6BAAR,QAAQ,2FAAU;YACtB,oKAAA,MAAM,6BAAN,MAAM,uFAAS;YAEhB,oKAAA,MAAM,6BAAN,MAAM,uFAAwC;YAE/C,iKAAA,KAAK,6BAAL,KAAK,qFAAgB;YARhC,6KAgDC;;;;QA/CO,MAAM,CAAC,OAAO,uEAAS;QAEd,QAAQ,2DAAU;QACtB,MAAM,iHAAS;QAEhB,MAAM,+GAAwC;QAE/C,KAAK,8GAAgB;QAE9B,IAAI,KAAK;YACP,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;gBACpB,KAAK,UAAU;oBACb,OAAO,KAAK,CAAC,OAAO,CAAC;gBACvB,KAAK,QAAQ;oBACX,OAAO,KAAK,CAAC,OAAO,CAAC;gBACvB,KAAK,UAAU;oBACb,OAAO,KAAK,CAAC,KAAK,CAAC;YACvB,CAAC;QACH,CAAC;QAED,MAAM,uDAAG,GAAG,EAAE;YACZ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;YACxB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE;;;;QAIjE,IAAI,CAAC,MAAM;gBACX,CAAC,CAAC,IAAI,CAAA;8CACgC,YAAY,WAAW,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI;WAChG;gBACH,CAAC,CAAC,EAAE;QACJ,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA;;;;;;yBAMW,KAAK,CAAC,KAAK;uBACb,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;yBACpB,YAAY;;WAE1B;gBACH,CAAC,CAAC,EAAE;KACP,CAAC;QACJ,CAAC,EAAC;;;YA/CS,uDAAmB;;;;;SAAnB,mBAAmB"}
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../src/elements/banner.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,aAAa,EACb,aAAa,EACb,OAAO,EACP,QAAQ,EACR,MAAM,EACN,IAAI,GACL,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,OAAO,OAAO,CAAC;AACf,OAAO,WAAW,CAAC;AAEnB,MAAM,KAAK,GAAG,GAAG,CAAA;;;;kBAIC,KAAK,CAAC,YAAY;;;;;;;;;;kBAUlB,KAAK,CAAC,aAAa;;;kBAGnB,KAAK,CAAC,WAAW;;;kBAGjB,KAAK,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCpC,CAAC;IAQW,mBAAmB;4BAJ/B,aAAa,CAAC,WAAW,CAAC,EAC1B,YAAY,CAAC,KAAK,CAAC,EACnB,MAAM,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,EAChC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;;;;sBACgB,UAAU;;;;;;;;;;;;;;;;mCAAlB,SAAQ,WAAU;;;;0CAChD,IAAI;oCAEJ,aAAa;kCACb,SAAS;kCAET,QAAQ;iCAER,OAAO;YAPF,6KAAO,OAAO,6BAAP,OAAO,uGAAS;YAEd,0KAAA,QAAQ,6BAAR,QAAQ,2FAAU;YACtB,oKAAA,MAAM,6BAAN,MAAM,uFAAS;YAEhB,oKAAA,MAAM,6BAAN,MAAM,uFAAwC;YAE/C,iKAAA,KAAK,6BAAL,KAAK,qFAAgB;YARhC,6KAyCC;;;;QAxCO,MAAM,CAAC,OAAO,uEAAS;QAEd,QAAQ,2DAAU;QACtB,MAAM,iHAAS;QAEhB,MAAM,+GAAwC;QAE/C,KAAK,8GAAgB;QAE9B,IAAI,KAAK;YACP,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;gBACpB,KAAK,UAAU;oBACb,OAAO,KAAK,CAAC,OAAO,CAAC;gBACvB,KAAK,QAAQ;oBACX,OAAO,KAAK,CAAC,OAAO,CAAC;gBACvB,KAAK,UAAU;oBACb,OAAO,KAAK,CAAC,KAAK,CAAC;YACvB,CAAC;QACH,CAAC;QAED,MAAM,uDAAG,GAAG,EAAE;YACZ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;YACxB,OAAO,IAAI,CAAA;qBACM,CAAC,CAAC,IAAI,0BAA0B,IAAI;;qBAEpC,CAAC,CAAC,IAAI,CAAC,MAAM,4BAA4B,YAAY,WAAW,IAAI,CAAC,MAAM,EAAE,MAAM;UAC9F,IAAI,CAAC,MAAM,EAAE,IAAI;;yBAEF,IAAI,CAAC,QAAQ;;eAEvB,IAAI,CAAC,QAAQ;;;;mBAIT,KAAK,CAAC,KAAK;iBACb,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;mBACpB,YAAY;;KAE1B,CAAC;QACJ,CAAC,EAAC;;;YAxCS,uDAAmB;;;;;SAAnB,mBAAmB"}

package/elements/bar-chart.d.ts

@@ -3,9 +3,6 @@ export interface Sequence {
     label: string;
     values: (number | null)[];
 }
-/**
- * @customElement dy-bar-chart
- */
 export declare class DuoyunBarChartElement extends DuoyunChartBaseElement {
     #private;
     series?: string[];
@@ -17,6 +14,6 @@ export declare class DuoyunBarChartElement extends DuoyunChartBaseElement {
     };
     onMouseMove: (index: number, evt: MouseEvent, sort: boolean, seqIndex?: number) => void;
     onMouseOut: () => void;
-    render: () => import("@mantou/gem/lib/element").TemplateResult;
+    render: () => import("@mantou/gem/lib/lit-html").TemplateResult;
 }
 //# sourceMappingURL=bar-chart.d.ts.map

package/elements/bar-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../src/elements/bar-chart.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAItD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;CAC3B;AAYD;;GAEG;AACH,qBAEa,qBAAsB,SAAQ,sBAAsB;;IACrD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,SAAK;IACX,KAAK,UAAS;IACd,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEjC,IAAI;uBACa,MAAM,GAAG,IAAI;MAC5B;IA2BF,WAAW,UAAW,MAAM,OAAO,UAAU,QAAQ,OAAO,6BA+B1D;IAEF,UAAU,aAER;IAEF,MAAM,yDAuDJ;CACH"}
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../src/elements/bar-chart.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAItD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;CAC3B;AAYD,qBAEa,qBAAsB,SAAQ,sBAAsB;;IACrD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,SAAK;IACX,KAAK,UAAS;IACd,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEjC,IAAI;uBACa,MAAM,GAAG,IAAI;MAC5B;IA2BF,WAAW,UAAW,MAAM,OAAO,UAAU,QAAQ,OAAO,6BA+B1D;IAEF,UAAU,aAER;IAEF,MAAM,0DAyDJ;CACH"}

package/elements/bar-chart.js

@@ -32,13 +32,12 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { customElement, property, adoptedStyle, memo } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, html, svg } from '@mantou/gem/lib/element';
-import { css } from '@mantou/gem/lib/utils';
+import { adoptedStyle, customElement, memo, property } from '@mantou/gem/lib/decorators';
+import { css, html, svg } from '@mantou/gem/lib/element';
 import { theme } from '../lib/theme';
 import { DuoyunChartBaseElement } from './base/chart';
 import { ChartTooltip } from './chart-tooltip';
-const style = createCSSSheet(css `
+const style = css `
   .col:hover .rect {
     fill: ${theme.hoverBackgroundColor};
     opacity: 0.2;
@@ -46,10 +45,7 @@ const style = createCSSSheet(css `
   .bar:hover {
     filter: brightness(1.05);
   }
-`);
-/**
- * @customElement dy-bar-chart
- */
+`;
 let DuoyunBarChartElement = (() => {
     let _classDecorators = [customElement('dy-bar-chart'), adoptedStyle(style)];
     let _classDescriptor;
@@ -106,7 +102,7 @@ let DuoyunBarChartElement = (() => {
             if (!this.series?.length)
                 return;
             const seqList = this.sequences.map((e) => e.values);
-            this.#stackSequences = seqList.map((_, index) => this.mergeNumberValues(seqList.slice(0, index + 1)));
+            this.#stackSequences = seqList.map((_, index) => this._mergeNumberValues(seqList.slice(0, index + 1)));
             const xMin = 0;
             const xMax = this.series.length;
             let yMin = Infinity;
@@ -118,9 +114,9 @@ let DuoyunBarChartElement = (() => {
                 });
             });
             this.xStep = xMax;
-            this.initXAxi(xMin, xMax);
-            this.initYAxi(yMin, yMax);
-            this.initViewBox();
+            this._initXAxi(xMin, xMax);
+            this._initYAxi(yMin, yMax);
+            this._initViewBox();
         });
         onMouseMove = (__runInitializers(this, _private_calc_extraInitializers), (index, evt, sort, seqIndex = -1) => {
             let tooltipValues = this.sequences?.map(({ values, label }, i) => {
@@ -142,9 +138,9 @@ let DuoyunBarChartElement = (() => {
                 tooltipValues = tooltipValues?.sort((a, b) => {
                     const an = Number(a.originValue);
                     const bn = Number(b.originValue);
-                    if (isNaN(an))
+                    if (Number.isNaN(an))
                         return 1;
-                    if (isNaN(bn))
+                    if (Number.isNaN(bn))
                         return -1;
                     return an > bn ? -1 : 1;
                 });
@@ -161,43 +157,47 @@ let DuoyunBarChartElement = (() => {
         };
         render = () => {
             if (this.loading)
-                return this.renderLoading();
+                return this._renderLoading();
             if (this.noData)
-                return this.renderNotData();
+                return this._renderNotData();
             if (!this.contentRect.width || !this.sequences || !this.series)
                 return html ``;
             return html `
       ${svg `
-        <svg aria-hidden="true" part=${DuoyunChartBaseElement.chart} xmlns="http://www.w3.org/2000/svg" viewBox=${this.viewBox.join(' ')}>
-          ${this.renderXAxi({ centerLabel: true })}
-          ${this.renderYAxi()}
+        <svg
+          aria-hidden="true"
+          part=${DuoyunChartBaseElement.chart}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox=${this._viewBox.join(' ')}
+        >
+          ${this._renderXAxi({ centerLabel: true })} ${this._renderYAxi()}
           ${this.series.map((_value, i, _, width = 1) => svg `
               <g class="col" @click=${() => this.indexclick(i)} @pointerout=${this.onMouseOut}>
                 <rect
                   @pointermove=${(evt) => this.onMouseMove(i, evt, false)}
                   class="rect"
                   fill="transparent"
-                  x=${(i + 0.5 - width / 2) / this.xAxiUnit}
+                  x=${(i + 0.5 - width / 2) / this._xAxiUnit}
                   y=${0}
-                  width=${width / this.xAxiUnit}
-                  height=${this.stageHeight}
+                  width=${width / this._xAxiUnit}
+                  height=${this._stageHeight}
                 />
-                ${this.sequences.map(({ values }, index, sequences, value = values[i], total = 0.6, height = (value || 0) - this.yAxiMin, seqWidth = this.stack ? total : (total - this.gutter * (sequences.length - 1)) / sequences.length, offsetX = this.stack ? 0 : index * (this.gutter + seqWidth), offsetY = this.stack
-                ? (this.#stackSequences[index - 1] ? this.#stackSequences[index - 1][i] : 0) - this.yAxiMin
+                ${this.sequences.map(({ values }, index, sequences, value = values[i], total = 0.6, height = (value || 0) - this._yAxiMin, seqWidth = this.stack ? total : (total - this.gutter * (sequences.length - 1)) / sequences.length, offsetX = this.stack ? 0 : index * (this.gutter + seqWidth), offsetY = this.stack
+                ? (this.#stackSequences[index - 1] ? this.#stackSequences[index - 1][i] : 0) - this._yAxiMin
                 : 0) => svg `
                     <rect
                       @pointermove=${(evt) => this.onMouseMove(i, evt, false, index)}
                       class="bar"
                       fill=${this.colors[index]}
-                      x=${(i + (1 - total) / 2 + offsetX) / this.xAxiUnit}
-                      y=${this.stageHeight - (height + offsetY) / this.yAxiUnit}
-                      width=${seqWidth / this.xAxiUnit}
-                      height=${height / this.yAxiUnit}
+                      x=${(i + (1 - total) / 2 + offsetX) / this._xAxiUnit}
+                      y=${this._stageHeight - (height + offsetY) / this._yAxiUnit}
+                      width=${seqWidth / this._xAxiUnit}
+                      height=${height / this._yAxiUnit}
                     />
                   `)}
               </g>
             `)}
-          ${this.renderMarkLines()}
+          ${this._renderMarkLines()}
         </svg>
       `}
     `;