[duoyun-ui] Closed #191

mantou132 · Sep 1, 2024 · e8d87f7 · e8d87f7
1 parent 5f44a43
commit e8d87f7
Show file tree

Hide file tree

Showing 16 changed files with 170 additions and 70 deletions.
diff --git a/packages/duoyun-ui/docs/en/02-elements/empty.md b/packages/duoyun-ui/docs/en/02-elements/empty.md
@@ -4,6 +4,7 @@
 
 <gbp-example
   name="dy-empty"
+  props='{"icon":"icons.delete"}'
   src="https://esm.sh/duoyun-ui/elements/empty"></gbp-example>
 
 ## API

diff --git a/packages/duoyun-ui/docs/zh/02-elements/empty.md b/packages/duoyun-ui/docs/zh/02-elements/empty.md
@@ -4,6 +4,7 @@
 
 <gbp-example
   name="dy-empty"
+  props='{"icon":"icons.delete"}'
   src="https://esm.sh/duoyun-ui/elements/empty"></gbp-example>
 
 ## API

diff --git a/packages/duoyun-ui/src/elements/card.ts b/packages/duoyun-ui/src/elements/card.ts
@@ -1,12 +1,13 @@
 // https://spectrum.adobe.com/page/cards/
 import { adoptedStyle, customElement, attribute, property, part, slot, shadow, aria } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, html, TemplateResult } from '@mantou/gem/lib/element';
+import { createCSSSheet, html } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
 import { icons } from '../lib/icons';
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
+import { StringList } from '../lib/types';
 
 import { DuoyunLoadableBaseElement } from './base/loadable';
 import { ContextMenuItem, ContextMenu } from './contextmenu';
@@ -105,16 +106,19 @@ export class DuoyunCardElement extends DuoyunLoadableBaseElement {
   @part static preview: string;
   @part static avatar: string;
 
+  @slot static header: string;
+  @slot static detail: string;
+  @slot static detailRight: string;
   @slot static body: string;
   @slot static unnamed: string;
   @slot static footer: string;
 
   @attribute avatar: string;
   @attribute preview: string;
 
-  @property header?: string | TemplateResult;
-  @property detail?: string | TemplateResult;
-  @property detailRight?: string | TemplateResult;
+  @attribute header: StringList<'slot'>;
+  @attribute detail: string;
+  @attribute detailRight: string;
   @property actions?: ActionItem[];
   @attribute crossorigin: 'anonymous' | 'use-credentials';
 
@@ -149,9 +153,9 @@ export class DuoyunCardElement extends DuoyunLoadableBaseElement {
       ${this.header
         ? html`
             <div class="header">
-              <div class="title">${this.header}</div>
-              <div class="detail">${this.detail}</div>
-              <div class="detail right">${this.detailRight}</div>
+              <div class="title"><slot name=${DuoyunCardElement.header}>${this.header}</slot></div>
+              <div class="detail"><slot name=${DuoyunCardElement.detail}>${this.detail}</slot></div>
+              <div class="detail right"><slot name=${DuoyunCardElement.detailRight}>${this.detailRight}</slot></div>
               ${this.actions
                 ? html`
                     <dy-use

diff --git a/packages/duoyun-ui/src/elements/collapse.ts b/packages/duoyun-ui/src/elements/collapse.ts
@@ -77,12 +77,12 @@ const panelStyle = createCSSSheet(css`
 @shadow()
 export class DuoyunCollapsePanelElement extends GemElement {
   @slot static unnamed: string;
-  @part static summary: string;
+  @part @slot static summary: string;
   @part static detail: string;
 
   @boolattribute searchable: boolean;
 
-  @property summary?: string | TemplateResult;
+  @attribute summary: string;
 
   @emitter toggle: Emitter<boolean>;
 
@@ -109,7 +109,7 @@ export class DuoyunCollapsePanelElement extends GemElement {
         @click=${this.toggleState}
       >
         <dy-use class=${classMap({ icon: true, expand: preExpand })} .element=${icons.right}></dy-use>
-        <span class="title">${this.summary}</span>
+        <span class="title"><slot name=${DuoyunCollapsePanelElement.summary}>${this.summary}</slot></span>
       </div>
       ${expand || this.searchable
         ? html`

diff --git a/packages/duoyun-ui/src/elements/compartment.ts b/packages/duoyun-ui/src/elements/compartment.ts
@@ -10,7 +10,7 @@ import { contentsContainer } from '../lib/styles';
 @adoptedStyle(contentsContainer)
 @shadow()
 export class DuoyunCompartmentElement extends GemElement {
-  @property content?: string | number | TemplateResult;
+  @property content?: string | number | TemplateResult | Element | Element[];
 
   render = () => {
     return html`${this.content}`;

diff --git a/packages/duoyun-ui/src/elements/empty.ts b/packages/duoyun-ui/src/elements/empty.ts
@@ -1,8 +1,17 @@
-import { connectStore, adoptedStyle, customElement, property, shadow } from '@mantou/gem/lib/decorators';
-import { GemElement, html, TemplateResult, createCSSSheet } from '@mantou/gem/lib/element';
+import {
+  connectStore,
+  adoptedStyle,
+  customElement,
+  property,
+  shadow,
+  attribute,
+  slot,
+} from '@mantou/gem/lib/decorators';
+import { GemElement, html, createCSSSheet, render } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
 
 import { locale } from '../lib/locale';
+import { theme } from '../lib/theme';
 
 import './use';
 
@@ -13,9 +22,10 @@ const style = createCSSSheet(css`
     align-items: center;
     justify-content: center;
     gap: 1em;
+    color: ${theme.describeColor};
   }
   .icon {
-    width: 3em;
+    width: 5em;
   }
 `);
 
@@ -27,13 +37,21 @@ const style = createCSSSheet(css`
 @connectStore(locale)
 @shadow()
 export class DuoyunEmptyElement extends GemElement {
+  @slot static unnamed: string;
+
   @property icon?: string | Element | DocumentFragment;
-  @property description?: string | TemplateResult;
+  @attribute text: string;
+  @attribute slotName: string;
 
   render = () => {
+    if (this.slotName && !this.text) {
+      render(html`<slot name=${this.slotName}></slot>`, this);
+    } else {
+      this.innerHTML = '';
+    }
     return html`
       ${this.icon ? html`<dy-use class="icon" .element=${this.icon}></dy-use>` : ''}
-      <div>${this.description || locale.noData}</div>
+      <div><slot>${this.text || locale.noData}</slot></div>
     `;
   };
 }
diff --git a/packages/duoyun-ui/src/elements/meter.ts b/packages/duoyun-ui/src/elements/meter.ts
@@ -8,8 +8,9 @@ import {
   aria,
   shadow,
   effect,
+  slot,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
+import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
 import { css, styleMap } from '@mantou/gem/lib/utils';
 
 import { theme, getSemanticColor } from '../lib/theme';
@@ -60,15 +61,18 @@ const style = createCSSSheet(css`
 @aria({ role: 'meter' })
 @shadow()
 export class DuoyunMeterElement extends GemElement {
+  @slot static label: string;
+  @slot static valueLabel: string;
+
   /**range: 0-100 */
   @numattribute value: number;
   @numattribute max: number;
   @numattribute min: number;
   @attribute color: StringList<'positive' | 'informative' | 'negative' | 'notice'>;
   @attribute layout: 'stack' | 'flat';
+  @attribute label: string;
+  @attribute valueLabel: StringList<'percentage'>;
 
-  @property label?: string | TemplateResult;
-  @property valueLabel?: 'percentage' | TemplateResult;
   @property calculateColor = () => {
     const progress = this.#progress;
     if (progress > 0.9) return theme.negativeColor;
@@ -110,8 +114,8 @@ export class DuoyunMeterElement extends GemElement {
   render = () => {
     return html`
       <div class="text">
-        <span class="label">${this.label}</span>
-        <span class="value-label">${this.#valueLabel}</span>
+        <span class="label"><slot name=${DuoyunMeterElement.label}>${this.label}</slot></span>
+        <span class="value-label"><slot name=${DuoyunMeterElement.valueLabel}>${this.valueLabel}</slot></span>
       </div>
       <div class="track">
         <div class="value" style=${styleMap({ width: this.#percentage, color: this.#color })}></div>

diff --git a/packages/duoyun-ui/src/elements/modal.ts b/packages/duoyun-ui/src/elements/modal.ts
@@ -125,6 +125,7 @@ const style2 = createCSSSheet({
 export interface ModalOptions {
   header?: string | TemplateResult;
   body?: string | TemplateResult;
+  footer?: string | TemplateResult;
   /**render body only */
   customize?: boolean;
   maskClosable?: boolean;
@@ -154,12 +155,11 @@ export interface ModalOpenOptions<T> {
 @shadow({ delegatesFocus: true })
 export class DuoyunModalElement extends GemElement {
   @part static dialog: string;
-  @part static heading: string;
   @part static divider: string;
+  @part @slot static header: string;
   @part static body: string;
-  @part @slot static footer: string;
-  // break change: body -> unnamed
   @slot static unnamed: string;
+  @part @slot static footer: string;
 
   @boolattribute open: boolean;
   @boolattribute customize: boolean;
@@ -169,18 +169,22 @@ export class DuoyunModalElement extends GemElement {
   @boolattribute disableDefaultCancelBtn: boolean;
   @boolattribute disableDefaultOKBtn: boolean;
   @boolattribute dangerDefaultOkBtn: boolean;
+  @attribute header: string;
+  @attribute body: string;
 
   @emitter close: Emitter;
   @emitter ok: Emitter;
   @emitter maskclick: Emitter;
 
-  @property header?: string | TemplateResult;
-  @property body?: string | TemplateResult;
   @property openAnimation: PropertyIndexedKeyframes | Keyframe[] = slideInUp;
   @property closeAnimation: PropertyIndexedKeyframes | Keyframe[] = fadeOut;
 
   @state closing: boolean;
 
+  headerSlot?: string | TemplateResult;
+  bodySlot?: string | TemplateResult;
+  footerSlot?: string | TemplateResult;
+
   // Cannot be used for dynamic forms
   static open<T = Element>(options: ModalOptions & ModalOpenOptions<T>) {
     const modal = new this({ ...options, open: true });
@@ -230,23 +234,25 @@ export class DuoyunModalElement extends GemElement {
       open,
       customize,
       maskClosable,
-      cancelText,
-      okText,
+      cancelText = '',
+      okText = '',
       body,
+      footer,
       disableDefaultCancelBtn,
       disableDefaultOKBtn,
       dangerDefaultOkBtn,
     } = options;
-    if (header) this.header = header;
-    if (customize) this.customize = customize;
-    if (maskClosable) this.maskClosable = maskClosable;
-    if (open) this.open = open;
-    if (cancelText) this.cancelText = cancelText;
-    if (okText) this.okText = okText;
-    if (disableDefaultCancelBtn) this.disableDefaultCancelBtn = disableDefaultCancelBtn;
-    if (disableDefaultOKBtn) this.disableDefaultOKBtn = disableDefaultOKBtn;
-    if (dangerDefaultOkBtn) this.dangerDefaultOkBtn = dangerDefaultOkBtn;
-    if (body) this.body = body;
+    this.headerSlot = header;
+    this.bodySlot = body;
+    this.footerSlot = footer;
+    this.customize = !!customize;
+    this.maskClosable = !!maskClosable;
+    this.open = !!open;
+    this.cancelText = cancelText;
+    this.okText = okText;
+    this.disableDefaultCancelBtn = !!disableDefaultCancelBtn;
+    this.disableDefaultOKBtn = !!disableDefaultOKBtn;
+    this.dangerDefaultOkBtn = !!dangerDefaultOkBtn;
   }
 
   #maskRef = createRef<HTMLElement>();
@@ -316,7 +322,7 @@ export class DuoyunModalElement extends GemElement {
               aria-modal="true"
               class="dialog absolute"
             >
-              ${this.body || html`<slot></slot>`}
+              ${this.body || this.bodySlot || html`<slot></slot>`}
             </div>
           `
         : html`
@@ -330,26 +336,30 @@ export class DuoyunModalElement extends GemElement {
             >
               ${this.header
                 ? html`
-                    <div part=${DuoyunModalElement.heading} role="heading" aria-level="1" class="header">
-                      ${this.header}
+                    <div part=${DuoyunModalElement.header} role="heading" aria-level="1" class="header">
+                      <slot name=${DuoyunModalElement.header}>${this.header || this.headerSlot}</slot>
                     </div>
                     <dy-divider part=${DuoyunModalElement.divider} class="header-divider" size="medium"></dy-divider>
                   `
                 : ''}
               <dy-scroll-box class="body" part=${DuoyunModalElement.body}>
-                <slot ref=${this.#bodyRef.ref}>${this.body}</slot>
+                <slot ref=${this.#bodyRef.ref}>${this.body || this.bodySlot}</slot>
               </dy-scroll-box>
               <div class="footer" part=${DuoyunModalElement.footer}>
                 <slot name=${DuoyunModalElement.footer}>
-                  <dy-button ?hidden=${this.disableDefaultCancelBtn} @click=${this.#close} .color=${'cancel'}>
-                    ${this.cancelText || locale.cancel}
-                  </dy-button>
-                  <dy-button
-                    ?hidden=${this.disableDefaultOKBtn}
-                    .color=${this.dangerDefaultOkBtn ? 'danger' : 'normal'}
-                    @click=${this.#ok}
-                    >${this.okText || locale.ok}</dy-button
-                  >
+                  ${this.footerSlot ||
+                  html`
+                    <dy-button ?hidden=${this.disableDefaultCancelBtn} @click=${this.#close} .color=${'cancel'}>
+                      ${this.cancelText || locale.cancel}
+                    </dy-button>
+                    <dy-button
+                      ?hidden=${this.disableDefaultOKBtn}
+                      .color=${this.dangerDefaultOkBtn ? 'danger' : 'normal'}
+                      @click=${this.#ok}
+                    >
+                      ${this.okText || locale.ok}
+                    </dy-button>
+                  `}
                 </slot>
               </div>
             </div>

diff --git a/packages/duoyun-ui/src/elements/popover.ts b/packages/duoyun-ui/src/elements/popover.ts
@@ -67,6 +67,7 @@ export class DuoyunPopoverElement extends GemElement {
   @attribute trigger: 'click' | 'hover';
   @attribute position: Position | 'auto';
 
+  // 不能通过 slot 元素支持
   @property content?: string | TemplateResult;
 
   @emitter open: Emitter<null>;

diff --git a/packages/duoyun-ui/src/elements/result.ts b/packages/duoyun-ui/src/elements/result.ts
@@ -1,8 +1,9 @@
-import { GemElement, html, TemplateResult, createCSSSheet } from '@mantou/gem/lib/element';
+import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
 import { adoptedStyle, customElement, property, attribute, slot, shadow } from '@mantou/gem/lib/decorators';
 import { css } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
+import { StringList } from '../lib/types';
 
 import { Status, getStatusColor } from './status-light';
 
@@ -45,14 +46,16 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @shadow()
 export class DuoyunResultElement extends GemElement {
+  @slot static header: string;
+  @slot static description: string;
   @slot static unnamed: string;
 
   @attribute status: Status;
+  @attribute header: StringList<'slot'>;
+  @attribute description: StringList<'slot'>;
 
   @property icon?: string | Element | DocumentFragment;
   @property illustrator?: string | Element | DocumentFragment;
-  @property header?: string | TemplateResult;
-  @property description?: string | TemplateResult;
 
   get #status() {
     return this.status || 'default';
@@ -66,8 +69,20 @@ export class DuoyunResultElement extends GemElement {
     return html`
       ${this.icon ? html`<dy-use class="icon" style="color:${this.#color}" .element=${this.icon}></dy-use>` : ''}
       ${this.illustrator ? html`<dy-use class="illustrator" .element=${this.illustrator}></dy-use>` : ''}
-      ${this.header ? html`<dy-heading lv="2" class="header">${this.header}</dy-heading>` : ''}
-      ${this.description ? html`<dy-paragraph class="description">${this.description}</dy-paragraph>` : ''}
+      ${this.header
+        ? html`
+            <dy-heading lv="2" class="header">
+              <slot name=${DuoyunResultElement.header}>${this.header}</slot>
+            </dy-heading>
+          `
+        : ''}
+      ${this.description
+        ? html`
+            <dy-paragraph class="description">
+              <slot name=${DuoyunResultElement.description}>${this.description}</slot>
+            </dy-paragraph>
+          `
+        : ''}
       <slot></slot>
     `;
   };