Closed #140

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

@@ -2,10 +2,39 @@
 
 ## Example
 
-<gbp-example
-  name="dy-divider"
-  props='{"style": "width: 100%; align-self: center;", "size": "large", "color": "currentColor"}'
-  src="https://esm.sh/duoyun-ui/elements/divider"></gbp-example>
+<gbp-example name="dy-divider" src="https://esm.sh/duoyun-ui/elements/divider">
+
+```json
+{
+  "style": "width: 100%;",
+  "innerHTML": "Label"
+}
+```
+
+</gbp-example>
+
+<gbp-example name="dy-divider" src="https://esm.sh/duoyun-ui/elements/divider">
+
+```json
+{
+  "style": "height: 100px;",
+  "innerHTML": "Label",
+  "orientation": "vertical"
+}
+```
+
+</gbp-example>
+
+<gbp-example name="dy-divider" src="https://esm.sh/duoyun-ui/elements/divider">
+
+```json
+{
+  "style": "width: 100%;",
+  "size": "large"
+}
+```
+
+</gbp-example>
 
 ## API
 

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

@@ -2,10 +2,39 @@
 
 ## Example
 
-<gbp-example
-  name="dy-divider"
-  props='{"style": "width: 100%; align-self: center;", "size": "large", "color": "currentColor"}'
-  src="https://esm.sh/duoyun-ui/elements/divider"></gbp-example>
+<gbp-example name="dy-divider" src="https://esm.sh/duoyun-ui/elements/divider">
+
+```json
+{
+  "style": "width: 100%;",
+  "innerHTML": "Label"
+}
+```
+
+</gbp-example>
+
+<gbp-example name="dy-divider" src="https://esm.sh/duoyun-ui/elements/divider">
+
+```json
+{
+  "style": "height: 100px;",
+  "innerHTML": "标签",
+  "orientation": "vertical"
+}
+```
+
+</gbp-example>
+
+<gbp-example name="dy-divider" src="https://esm.sh/duoyun-ui/elements/divider">
+
+```json
+{
+  "style": "width: 100%;",
+  "size": "large"
+}
+```
+
+</gbp-example>
 
 ## API
 

packages/duoyun-ui/src/elements/color-panel.ts

@@ -68,9 +68,7 @@ const style = createCSSSheet(css`
     width: 1.8em;
   }
   .hue-bar {
-    background-image: linear-gradient(
-      ${Array.from({ length: 15 }, (_, i) => `hsl(${360 - (360 / (15 - 1)) * i}, 100%, 50%)`).join(',')}
-    );
+    background-image: linear-gradient(0deg in hsl longer hue, red, red);
   }
   .alpha-bar {
     background: var(--alpha);

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

@@ -1,22 +1,63 @@
-// https://spectrum.adobe.com/page/divider/
-import { adoptedStyle, customElement, attribute, aria, shadow, effect } from '@mantou/gem/lib/decorators';
-import { GemElement, createCSSSheet } from '@mantou/gem/lib/element';
+import {
+  adoptedStyle,
+  customElement,
+  attribute,
+  aria,
+  shadow,
+  effect,
+  template,
+  slot,
+} from '@mantou/gem/lib/decorators';
+import { html, GemElement, createCSSSheet } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
 import { createDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 
-const elementTheme = createDecoratorTheme({ width: '', height: '', color: '' });
+const elementTheme = createDecoratorTheme({ color: '' });
 
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
-    display: block;
-    border-radius: 10px;
     align-self: stretch;
-    background: currentColor;
-    width: ${elementTheme.width};
-    height: ${elementTheme.height};
-    color: ${elementTheme.color};
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    --size: 1px;
+  }
+  :host([orientation='vertical']) {
+    writing-mode: sideways-rl;
+  }
+  :host([size='medium']) {
+    font-weight: 500;
+    --size: 2px;
+  }
+  :host([size='large']) {
+    font-weight: 700;
+    --size: 4px;
+  }
+  :host([position='start']) .start,
+  :host([position='end']) .end {
+    display: none;
+  }
+  slot {
+    color: ${theme.textColor};
+    display: inline;
+  }
+  :host(:not([position='start'], [position='end'])) slot {
+    margin-inline: -4px;
+  }
+  slot::slotted(*) {
+    margin-inline: -1em;
+  }
+  .collapse {
+    margin-inline: -1em;
+  }
+  .line,
+  .collapse {
+    border-radius: 10px;
+    flex-grow: 1;
+    background: ${elementTheme.color};
+    block-size: var(--size);
   }
 `);
 
@@ -30,39 +71,17 @@ const style = createCSSSheet(css`
 @aria({ role: 'separator' })
 @shadow()
 export class DuoyunDividerElement extends GemElement {
+  @slot static unnamed: string;
+
   @attribute size: 'small' | 'medium' | 'large';
   @attribute color: string;
   @attribute orientation: 'horizontal' | 'vertical';
+  @attribute position: 'start' | 'center' | 'end';
 
   get #orientation() {
     return this.orientation || 'horizontal';
   }
 
-  get #size() {
-    switch (this.size) {
-      case 'large':
-        return '4px';
-      case 'medium':
-        return '2px';
-      default:
-        return '1px';
-    }
-  }
-
-  get #height() {
-    if (this.#orientation === 'vertical') {
-      return 'auto';
-    }
-    return this.#size;
-  }
-
-  get #width() {
-    if (this.#orientation === 'vertical') {
-      return this.#size;
-    }
-    return 'auto';
-  }
-
   get #color() {
     if (this.color) return getSemanticColor(this.color) || this.color;
     switch (this.size) {
@@ -79,5 +98,16 @@ export class DuoyunDividerElement extends GemElement {
   };
 
   @elementTheme()
-  #theme = () => ({ width: this.#width, height: this.#height, color: this.#color });
+  #theme = () => ({ color: this.#color });
+
+  @template()
+  #content = () => {
+    return html`
+      <span class="line start"></span>
+      <slot>
+        <div class="collapse"></div>
+      </slot>
+      <span class="line end"></span>
+    `;
+  };
 }

packages/duoyun-ui/src/lib/timer.ts

@@ -36,6 +36,10 @@ export function sleep(ms = 3000) {
   return new Promise((res) => setTimeout(res, ms));
 }
 
+export function nextFrame() {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+}
+
 export function throttle<T extends (...args: any) => any>(
   fn: T,
   wait = 500,

packages/gem-book/src/plugins/example.ts

@@ -197,7 +197,7 @@ class _GbpExampleElement extends GemBookPluginElement {
           ? key.replace(/@(\w)/, (_, c) => 'on' + c.toUpperCase())
           : String(value)
         : this.#jsonStringify(value);
-    const kString = key.startsWith('@') ? key : `.${key}`;
+    const kString = key.startsWith('@') || key === 'style' ? key : `.${key}`;
     const hasMultipleLine = vString.includes('\n');
     const indentValue = hasMultipleLine ? `\n${this.#addIndentation(vString, 4)}\n` : vString;
     return html`${isNewLine ? html`<br />${this.#addIndentation('')}` : ' '}<span class="attribute">${kString}</span

packages/gem/src/lib/store.ts

@@ -2,19 +2,19 @@ import { addMicrotask, createUpdater } from './utils';
 
 export type Store<T = any> = ReturnType<typeof createUpdater<T>>;
 
-export const StoreListenerMap = new WeakMap<Store<any>, Set<() => void>>();
+export const _StoreListenerMap = new WeakMap<Store<any>, Set<() => void>>();
 
 export function createStore<T = any>(originStore: T) {
   const store = createUpdater(originStore, (value?: Partial<T>) => {
     Object.assign(store, value);
-    StoreListenerMap.get(store)?.forEach((func) => addMicrotask(func));
+    _StoreListenerMap.get(store)?.forEach((func) => addMicrotask(func));
   });
-  StoreListenerMap.set(store, new Set<() => void>());
+  _StoreListenerMap.set(store, new Set<() => void>());
   return store;
 }
 
 export function connect(store: Store<any>, func: () => void) {
-  const listeners = StoreListenerMap.get(store);
+  const listeners = _StoreListenerMap.get(store);
   listeners?.add(func);
   return () => listeners?.delete(func);
 }

packages/gem/src/test/store.test.ts

@@ -1,4 +1,4 @@
-import { StoreListenerMap, createStore, connect } from '../lib/store';
+import { _StoreListenerMap, createStore, connect } from '../lib/store';
 
 import { expect, aTimeout } from './utils';
 
@@ -7,7 +7,7 @@ describe('store 测试', () => {
     const origin = { a: 1 };
     const store = createStore(origin);
     expect({ ...store }).to.deep.equal(origin);
-    expect(!!StoreListenerMap.get(store)).to.equal(true);
+    expect(!!_StoreListenerMap.get(store)).to.equal(true);
   });
   it('update store', async () => {
     const store = createStore({ a: 1 });