[gem-book] Support unnamed slot

packages/duoyun-ui/docs/en/02-elements/flow.md

@@ -2,10 +2,31 @@
 
 ## Example
 
-<gbp-example
-  name="dy-flow"
-  props='{"style": "width: 100%", "graph": {"id":"root","children":[{"id":"n1","data":"Node 1"},{"id":"n2","data":"Node 2"},{"id":"n3","data":"Node 3"},{"id":"n4","data":"Node 4"},{"id":"n5","data":"Node 5"}],"edges":[{"id":"e1","sources":["n1"],"targets":["n2"]},{"id":"e2","sources":["n1"],"targets":["n3"]},{"id":"e3","sources":["n1"],"targets":["n4"]},{"id":"e4","sources":["n4"],"targets":["n5"]}]} }'
-  src="https://jspm.dev/duoyun-ui/elements/flow"></gbp-example>
+<gbp-example name="dy-flow" src="https://jspm.dev/duoyun-ui/elements/flow">
+
+```json
+{
+  "style": "width: 100%",
+  "graph": {
+    "id": "root",
+    "children": [
+      { "id": "n1", "data": "Node 1" },
+      { "id": "n2", "data": "Node 2" },
+      { "id": "n3", "data": "Node 3" },
+      { "id": "n4", "data": "Node 4" },
+      { "id": "n5", "data": "Node 5" }
+    ],
+    "edges": [
+      { "id": "e1", "sources": ["n1"], "targets": ["n2"] },
+      { "id": "e2", "sources": ["n1"], "targets": ["n3"] },
+      { "id": "e3", "sources": ["n1"], "targets": ["n4"] },
+      { "id": "e4", "sources": ["n4"], "targets": ["n5"] }
+    ]
+  }
+}
+```
+
+</gbp-example>
 
 ## API
 

packages/duoyun-ui/docs/zh/02-elements/flow.md

@@ -2,10 +2,31 @@
 
 ## Example
 
-<gbp-example
-  name="dy-flow"
-  props='{"style": "width: 100%", "graph": {"id":"root","children":[{"id":"n1","data":"Node 1"},{"id":"n2","data":"Node 2"},{"id":"n3","data":"Node 3"},{"id":"n4","data":"Node 4"},{"id":"n5","data":"Node 5"}],"edges":[{"id":"e1","sources":["n1"],"targets":["n2"]},{"id":"e2","sources":["n1"],"targets":["n3"]},{"id":"e3","sources":["n1"],"targets":["n4"]},{"id":"e4","sources":["n4"],"targets":["n5"]}]} }'
-  src="https://jspm.dev/duoyun-ui/elements/flow"></gbp-example>
+<gbp-example name="dy-flow" src="https://jspm.dev/duoyun-ui/elements/flow">
+
+```json
+{
+  "style": "width: 100%",
+  "graph": {
+    "id": "root",
+    "children": [
+      { "id": "n1", "data": "Node 1" },
+      { "id": "n2", "data": "Node 2" },
+      { "id": "n3", "data": "Node 3" },
+      { "id": "n4", "data": "Node 4" },
+      { "id": "n5", "data": "Node 5" }
+    ],
+    "edges": [
+      { "id": "e1", "sources": ["n1"], "targets": ["n2"] },
+      { "id": "e2", "sources": ["n1"], "targets": ["n3"] },
+      { "id": "e3", "sources": ["n1"], "targets": ["n4"] },
+      { "id": "e4", "sources": ["n4"], "targets": ["n5"] }
+    ]
+  }
+}
+```
+
+</gbp-example>
 
 ## API
 

packages/duoyun-ui/src/elements/action-text.ts

@@ -1,5 +1,5 @@
 import { GemElement, html } from '@mantou/gem/lib/element';
-import { adoptedStyle, customElement, attribute, state } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, state, slot } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme, getSemanticColor } from '../lib/theme';
@@ -34,6 +34,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 export class DuoyunActionTextElement extends GemElement {
+  @slot static unnamed: string;
+
   @attribute tooltip: string;
   @attribute color: string;
   @state active: boolean;

packages/duoyun-ui/src/elements/alert.ts

@@ -1,5 +1,5 @@
 // https://spectrum.adobe.com/page/in-line-alert/
-import { adoptedStyle, customElement, attribute, property } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, property, slot } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -50,6 +50,8 @@ type Status = 'positive' | 'notice' | 'negative' | 'informative' | 'default';
 @customElement('dy-alert')
 @adoptedStyle(style)
 export class DuoyunAlertElement extends GemElement {
+  @slot static unnamed: string;
+
   @attribute header: string;
   @attribute status: Status;
 

packages/duoyun-ui/src/elements/avatar.ts

@@ -37,20 +37,22 @@ const style = createCSSSheet(css`
   :host([size='large']) {
     width: 3.8em;
   }
-  .content {
+  .img {
+    display: block;
     width: 100%;
     aspect-ratio: 1;
-    position: absolute;
-    inset: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     border-radius: var(--radius);
     object-fit: cover;
     background: ${theme.hoverBackgroundColor};
     box-sizing: border-box;
   }
-  :host([status]:not([status=''])) .content {
+  .img::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: inherit;
+  }
+  :host([status]:not([status=''])) .img {
     --m: radial-gradient(
       circle at calc(100% - var(--offset)) var(--offset),
       #0000 var(--mask),
@@ -103,19 +105,13 @@ export class DuoyunAvatarElement extends GemElement {
         }
       </style>
       <dy-tooltip .content=${this.tooltip}>
-        <div class="content">
-          ${this.src &&
-          html`
-            <img
-              class="content"
-              alt=${this.alt || this.src}
-              src=${this.src}
-              part=${DuoyunAvatarElement.avatar}
-              crossorigin=${this.crossorigin}
-            />
-          `}
-          <slot></slot>
-        </div>
+        <img
+          class="img"
+          alt=${this.alt || this.src}
+          src=${this.src}
+          part=${DuoyunAvatarElement.avatar}
+          crossorigin=${this.crossorigin}
+        />
       </dy-tooltip>
       ${this.status ? html`<div class="status"></div>` : ''}
     `;

packages/duoyun-ui/src/elements/banner.ts

@@ -7,6 +7,7 @@ import {
   Emitter,
   property,
   boolattribute,
+  slot,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -82,6 +83,8 @@ type Status = 'positive' | 'notice' | 'negative' | 'default';
 @customElement('dy-banner')
 @adoptedStyle(style)
 export class DuoyunBannerElement extends GemElement {
+  @slot static unnamed: string;
+
   @boolattribute closable: boolean;
   @attribute status: Status;
 

packages/duoyun-ui/src/elements/button.ts

@@ -9,6 +9,7 @@ import {
   RefObject,
   state,
   part,
+  slot,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
@@ -88,6 +89,9 @@ const style = createCSSSheet(css`
     border-color: var(--bg);
     background: transparent;
   }
+  :host([borderless]) :where(.content, .dropdown) {
+    border-color: transparent;
+  }
   :host([color='normal']) {
     --bg: ${theme.primaryColor};
   }
@@ -135,12 +139,15 @@ const style = createCSSSheet(css`
 @adoptedStyle(focusStyle)
 @connectStore(icons)
 export class DuoyunButtonElement extends GemElement {
+  @slot static unnamed: string;
+
   @attribute type: 'solid' | 'reverse';
   @attribute color: StringList<'normal' | 'danger' | 'cancel'>;
   @boolattribute small: boolean;
   @boolattribute round: boolean;
   @boolattribute square: boolean;
   @boolattribute disabled: boolean;
+  @boolattribute borderless: boolean;
 
   @property dropdown?: ContextMenuItem[] | null;
   @property route?: RouteItem;

packages/duoyun-ui/src/elements/card.ts

@@ -103,6 +103,7 @@ export class DuoyunCardElement extends DuoyunLoadableBaseElement {
   @part static avatar: string;
 
   @slot static body: string;
+  @slot static unnamed: string;
   @slot static footer: string;
 
   @attribute avatar: string;

packages/duoyun-ui/src/elements/collapse.ts

@@ -12,6 +12,7 @@ import {
   property,
   emitter,
   Emitter,
+  slot,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, TemplateResult, html, ifDefined } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap, exportPartsMap } from '@mantou/gem/lib/utils';
@@ -85,6 +86,7 @@ export class DuoyunCollapsePanelElement extends GemElement<State> {
 
   @emitter toggle: Emitter<boolean>;
 
+  @slot static unnamed: string;
   @part static summary: string;
   @part static detail: string;
 

packages/duoyun-ui/src/elements/copy.ts

@@ -89,6 +89,7 @@ type State = {
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 export class DuoyunCopyElement extends GemElement<State> {
+  @slot static unnamed: string;
   @slot static after: string;
 
   @boolattribute silent: boolean;

packages/duoyun-ui/src/elements/drop-area.ts

@@ -6,6 +6,7 @@ import {
   emitter,
   Emitter,
   state,
+  slot,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -53,6 +54,8 @@ const style = createCSSSheet(css`
 @customElement('dy-drop-area')
 @adoptedStyle(style)
 export class DuoyunDropAreaElement extends GemElement {
+  @slot static unnamed: string;
+
   @attribute tip: string;
   /**file type */
   @attribute accept: string;

packages/duoyun-ui/src/elements/file-picker.ts

@@ -9,6 +9,7 @@ import {
   refobject,
   RefObject,
   part,
+  slot,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, repeat } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
@@ -123,6 +124,8 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme
   @part static button: string;
   @part static item: string;
 
+  @slot static unnamed: string;
+
   @attribute type: 'file' | 'image';
   @attribute accept: string;
   /**@deprecated Use children*/

packages/duoyun-ui/src/elements/flow.ts

@@ -537,8 +537,8 @@ export class DuoyunFlowElement extends DuoyunResizeBaseElement<State> {
     });
   };
 
-  #onCanvasResize = (evt: CustomEvent<DuoyunFlowCanvasElement>) => {
-    const { contentRect } = evt.detail;
+  #onCanvasResize = (evt: CustomEvent) => {
+    const { contentRect } = evt.target as DuoyunFlowCanvasElement;
     if (contentRect.width && contentRect.height && !this.loaded) {
       this.#setScale(contentRect);
     }
@@ -608,7 +608,6 @@ export class DuoyunFlowElement extends DuoyunResizeBaseElement<State> {
         .graph=${this.graph}
         .layout=${this.layout}
       ></dy-flow-canvas>
-      <slot></slot>
     `;
   };
 }

packages/duoyun-ui/src/elements/heading.ts

@@ -1,4 +1,4 @@
-import { connectStore, adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators';
+import { connectStore, adoptedStyle, customElement, attribute, slot } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -42,6 +42,8 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @connectStore(history.store)
 export class DuoyunHeadingElement extends GemElement {
+  @slot static unnamed: string;
+
   @attribute lv: '1' | '2' | '3' | '4';
 
   get #lv() {

packages/duoyun-ui/src/elements/help-text.ts

@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, slot } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -19,6 +19,8 @@ const style = createCSSSheet(css`
 @customElement('dy-help-text')
 @adoptedStyle(style)
 export class DuoyunHelpTextElement extends GemElement {
+  @slot static unnamed: string;
+
   @attribute status: 'default' | 'neutral' | 'positive' | 'negative';
 
   get #status() {

packages/duoyun-ui/src/elements/loading.ts

@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, slot } from '@mantou/gem/lib/decorators';
 import { html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -29,6 +29,8 @@ const style = createCSSSheet(css`
 @customElement('dy-loading')
 @adoptedStyle(style)
 export class DuoyunLoadingElement extends DuoyunVisibleBaseElement {
+  @slot static unnamed: string;
+
   render = () => {
     return html`
       <dy-use class="icon" .element=${icons.loading}></dy-use>

packages/duoyun-ui/src/elements/more.ts

@@ -1,4 +1,12 @@
-import { adoptedStyle, customElement, attribute, emitter, Emitter, boolattribute } from '@mantou/gem/lib/decorators';
+import {
+  adoptedStyle,
+  customElement,
+  attribute,
+  emitter,
+  Emitter,
+  boolattribute,
+  slot,
+} from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { classMap, createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
 
@@ -40,6 +48,8 @@ type State = {
 @customElement('dy-more')
 @adoptedStyle(style)
 export class DuoyunMoreElement extends GemElement<State> {
+  @slot static unnamed: string;
+
   @attribute maxheight: string;
   @attribute more: string;
   @attribute less: string;

packages/duoyun-ui/src/elements/options.ts

@@ -1,4 +1,4 @@
-import { adoptedStyle, customElement, property, boolattribute } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, property, boolattribute, slot } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
 
@@ -151,6 +151,8 @@ type State = {
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 export class DuoyunOptionsElement extends GemElement<State> {
+  @slot static unnamed: string;
+
   @boolattribute searchable: boolean;
 
   @property options?: Option[];

packages/duoyun-ui/src/elements/result.ts

@@ -1,5 +1,5 @@
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
-import { adoptedStyle, customElement, property, attribute } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, property, attribute, slot } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
@@ -44,6 +44,8 @@ const style = createCSSSheet(css`
 @customElement('dy-result')
 @adoptedStyle(style)
 export class DuoyunResultElement extends GemElement {
+  @slot static unnamed: string;
+
   @attribute status: Status;
 
   @property icon?: string | Element | DocumentFragment;