[duoyun-ui] Fixed <dy-list>

mantou132 · Jan 23, 2024 · 13da6a4 · 13da6a4
1 parent 1399e90
commit 13da6a4
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 79 deletions.
diff --git a/packages/duoyun-ui/docs/en/01-guide/README.md b/packages/duoyun-ui/docs/en/01-guide/README.md
@@ -39,15 +39,21 @@ Toast.open('error', 'An error occurred');
 DuoyunUI supports an ESM method independently uses an element, such as adding a keyboard access to your website(press <kbd>f</kbd> list all focusable elements):
 
 ```ts
-import('https://esm.sh/duoyun-ui/elements/keyboard-access').then(({ DuoyunKeyboardAccessElement }) =>
-  document.body.append(new DuoyunKeyboardAccessElement()),
+import('https://esm.sh/duoyun-ui/elements/keyboard-access').then(
+  ({ DuoyunKeyboardAccessElement }) =>
+    document.body.append(new DuoyunKeyboardAccessElement()),
 );
 ```
 
 For example, enable input recording mode:
 
 ```ts
-import('https://esm.sh/duoyun-ui/elements/input-capture').then(({ DuoyunInputCaptureElement }) =>
-  document.body.append(new DuoyunInputCaptureElement()),
+import('https://esm.sh/duoyun-ui/elements/input-capture').then(
+  ({ DuoyunInputCaptureElement }) =>
+    document.body.append(new DuoyunInputCaptureElement()),
 );
 ```
+
+## Feedback DuoyunUI
+
+Please visit [GitHub](https://github.com/mantou132/gem)
diff --git a/packages/duoyun-ui/docs/en/02-elements/cascader-picker.md b/packages/duoyun-ui/docs/en/02-elements/cascader-picker.md
@@ -1,12 +1,23 @@
 # `<dy-cascader-picker>`
 
-## Example
+## `<dy-cascader-picker>` Example
 
 <gbp-example
   name="dy-cascader-picker"
   props='{"placeholder": "Please choose", "multiple": true, "value": [["Option 2"]], "options": [{"label": "Option 1", "children": [{"label": "Option 1.1"}]}, {"label": "Option 2"}, {"label": "Option 3"}], "@change": "(evt) => evt.target.value = evt.detail"}'
   src="https://esm.sh/duoyun-ui/elements/cascader-picker"></gbp-example>
 
-## API
+## `<dy-cascader-picker>` API
 
 <gbp-api src="/src/elements/cascader-picker.ts"></gbp-api>
+
+## `<dy-cascader>` Example
+
+<gbp-example
+  name="dy-cascader"
+  props='{"style": "width: 100%;", "placeholder": "Please choose", "value": ["Option 2"], "options": [{"label": "Option 1", "children": [{"label": "Option 1.1"}]}, {"label": "Option 2"}, {"label": "Option 3"}]}'
+  src="https://esm.sh/duoyun-ui/elements/cascader"></gbp-example>
+
+## `<dy-cascader>` API
+
+<gbp-api src="/src/elements/cascader.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/en/02-elements/cascader.md b/packages/duoyun-ui/docs/en/02-elements/cascader.md
@@ -1,12 +1,3 @@
-# `<dy-cascader>`
-
-## Example
-
-<gbp-example
-  name="dy-cascader"
-  props='{"style": "width: 100%;", "placeholder": "Please choose", "value": ["Option 2"], "options": [{"label": "Option 1", "children": [{"label": "Option 1.1"}]}, {"label": "Option 2"}, {"label": "Option 3"}]}'
-  src="https://esm.sh/duoyun-ui/elements/cascader"></gbp-example>
-
-## API
-
-<gbp-api src="/src/elements/cascader.ts"></gbp-api>
+---
+redirect: ./cascader-picker.md
+---
diff --git a/packages/duoyun-ui/docs/en/02-elements/color-panel.md b/packages/duoyun-ui/docs/en/02-elements/color-panel.md
@@ -1,12 +1,3 @@
-# `<dy-color-panel>`
-
-## Example
-
-<gbp-example
-  name="dy-color-panel"
-  props='{"alpha": true, "value": "#e5e", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://esm.sh/duoyun-ui/elements/color-panel"></gbp-example>
-
-## API
-
-<gbp-api src="/src/elements/color-panel.ts"></gbp-api>
+---
+redirect: ./color-picker.md
+---
diff --git a/packages/duoyun-ui/docs/en/02-elements/color-picker.md b/packages/duoyun-ui/docs/en/02-elements/color-picker.md
@@ -1,11 +1,15 @@
 # `<dy-color-picker>`
 
-## Example
+## `<dy-color-picker>` Example
 
 <gbp-example name="dy-color-picker" src="https://esm.sh/duoyun-ui/elements/color-picker">
 
 ```json
 [
+  {
+    "value": "#418eec",
+    "disabled": true
+  },
   {
     "alpha": true,
     "value": "#e5e",
@@ -16,6 +20,24 @@
 
 </gbp-example>
 
-## API
+## `<dy-color-picker>` API
 
 <gbp-api src="/src/elements/color-picker.ts"></gbp-api>
+
+## `<dy-color-panel>` Example
+
+<gbp-example name="dy-color-panel" src="https://esm.sh/duoyun-ui/elements/color-panel">
+
+```json
+{
+  "alpha": true,
+  "value": "#e5e",
+  "@change": "(evt) => evt.target.value = evt.detail"
+}
+```
+
+</gbp-example>
+
+## `<dy-color-panel>` API
+
+<gbp-api src="/src/elements/color-panel.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/en/02-elements/date-panel.md b/packages/duoyun-ui/docs/en/02-elements/date-panel.md
@@ -1,12 +1,3 @@
-# `<dy-date-panel>`
-
-## Example
-
-<gbp-example
-  name="dy-date-panel"
-  props='{"style": "width: 300px;"}'
-  src="https://esm.sh/duoyun-ui/elements/date-panel"></gbp-example>
-
-## API
-
-<gbp-api src="/src/elements/date-panel.ts"></gbp-api>
+---
+redirect: ./date-picker.md
+---
diff --git a/packages/duoyun-ui/docs/en/02-elements/date-picker.md b/packages/duoyun-ui/docs/en/02-elements/date-picker.md
@@ -1,6 +1,6 @@
 # `<dy-date-picker>`
 
-## Example
+## `<dy-date-picker>` Example
 
 <gbp-example name="dy-date-picker" src="https://esm.sh/duoyun-ui/elements/date-picker">
 
@@ -25,6 +25,17 @@
 
 </gbp-example>
 
-## API
+## `<dy-date-picker>` API
 
 <gbp-api src="/src/elements/date-picker.ts"></gbp-api>
+
+## `<dy-date-panel>` Example
+
+<gbp-example
+  name="dy-date-panel"
+  props='{"style": "width: 300px;"}'
+  src="https://esm.sh/duoyun-ui/elements/date-panel"></gbp-example>
+
+## `<dy-date-panel>` API
+
+<gbp-api src="/src/elements/date-panel.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/en/02-elements/date-range-panel.md b/packages/duoyun-ui/docs/en/02-elements/date-range-panel.md
@@ -1,12 +1,3 @@
-# `<dy-date-range-panel>`
-
-## Example
-
-<gbp-example
-  name="dy-date-range-panel"
-  props='{"style": "width: 360px;"}'
-  src="https://esm.sh/duoyun-ui/elements/date-range-panel"></gbp-example>
-
-## API
-
-<gbp-api src="/src/elements/date-range-panel.ts"></gbp-api>
+---
+redirect: ./date-range-picker.md
+---
diff --git a/packages/duoyun-ui/docs/en/02-elements/date-range-picker.md b/packages/duoyun-ui/docs/en/02-elements/date-range-picker.md
@@ -1,6 +1,6 @@
 # `<dy-date-range-picker>`
 
-## Example
+## `<dy-date-range-picker>` Example
 
 <gbp-example name="dy-date-range-picker" src="https://esm.sh/duoyun-ui/elements/date-range-picker">
 
@@ -21,6 +21,17 @@
 
 </gbp-example>
 
-## API
+## `<dy-date-range-picker>` API
 
 <gbp-api src="/src/elements/date-range-picker.ts"></gbp-api>
+
+## `<dy-date-range-panel>` Example
+
+<gbp-example
+  name="dy-date-range-panel"
+  props='{"style": "width: 360px;"}'
+  src="https://esm.sh/duoyun-ui/elements/date-range-panel"></gbp-example>
+
+## `<dy-date-range-panel>` API
+
+<gbp-api src="/src/elements/date-range-panel.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/en/02-elements/time-panel.md b/packages/duoyun-ui/docs/en/02-elements/time-panel.md
@@ -1,12 +1,3 @@
-# `<dy-time-panel>`
-
-## Example
-
-<gbp-example
-  name="dy-time-panel"
-  props='{"style": "width: 10em; height: 200px;", "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://esm.sh/duoyun-ui/elements/time-panel"></gbp-example>
-
-## API
-
-<gbp-api src="/src/elements/time-panel.ts"></gbp-api>
+---
+redirect: ./time-picker.md
+---
diff --git a/packages/duoyun-ui/docs/en/02-elements/time-picker.md b/packages/duoyun-ui/docs/en/02-elements/time-picker.md
@@ -1,12 +1,23 @@
 # `<dy-time-picker>`
 
-## Example
+## `<dy-time-picker>` Example
 
 <gbp-example
   name="dy-time-picker"
   props='{"value": 1644475003294, "clearable": true, "@clear": "(evt) => evt.target.value = null", "@change": "(evt) => evt.target.value = evt.detail"}'
   src="https://esm.sh/duoyun-ui/elements/time-picker"></gbp-example>
 
-## API
+## `<dy-time-picker>` API
 
 <gbp-api src="/src/elements/time-picker.ts"></gbp-api>
+
+## `<dy-time-panel>`Example
+
+<gbp-example
+  name="dy-time-panel"
+  props='{"style": "width: 10em; height: 200px;", "@change": "(evt) => evt.target.value = evt.detail"}'
+  src="https://esm.sh/duoyun-ui/elements/time-panel"></gbp-example>
+
+## `<dy-time-panel>` API
+
+<gbp-api src="/src/elements/time-panel.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/zh/02-elements/time-panel.md b/packages/duoyun-ui/docs/zh/02-elements/time-panel.md
@@ -1,3 +1,3 @@
 ---
-redirect: time-picker.md
+redirect: ./time-picker.md
 ---
diff --git a/packages/duoyun-ui/package.json b/packages/duoyun-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "duoyun-ui",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "A lightweight desktop UI component library, implemented using Gem",
   "keywords": [
     "frontend",

diff --git a/packages/duoyun-ui/src/elements/list.ts b/packages/duoyun-ui/src/elements/list.ts
@@ -10,6 +10,7 @@ import {
   emitter,
   Emitter,
   boolattribute,
+  attribute,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { addListener, createCSSSheet, css, LinkedList, LinkedListItem, styled, styleMap } from '@mantou/gem/lib/utils';
@@ -87,6 +88,7 @@ export class DuoyunListElement extends GemElement<State> {
   @property key?: any; // 除了 items 提供另外一种方式来更新
   @property renderItem?: (item: any) => TemplateResult;
   @boolattribute debug: boolean;
+  @attribute itemexportparts: string;
 
   /**enable infinite scroll, virtualization render */
   @boolattribute infinite: boolean;
@@ -274,10 +276,13 @@ export class DuoyunListElement extends GemElement<State> {
 
   #appendItems = (items: any[], oldItems?: any[]) => {
     if (!oldItems) return;
+    const oldFirst = oldItems.at(0);
     let beforeHeight = 0;
-    for (let i = 0; i < items.length; i++) {
-      if (this.getKey!(items[i]) === this.getKey!(oldItems[0])) break;
-      if (this.#isLeftItem(i)) beforeHeight += this.#getRowHeight();
+    if (oldFirst) {
+      for (let i = 0; i < items.length; i++) {
+        if (this.getKey!(items[i]) === this.getKey!(oldFirst)) break;
+        if (this.#isLeftItem(i)) beforeHeight += this.#getRowHeight();
+      }
     }
     if (beforeHeight) {
       // 有向前（上）加载数据，必须是列数的倍数
@@ -398,6 +403,7 @@ export class DuoyunListElement extends GemElement<State> {
     if (!this.#keyElementMap.has(key)) {
       const ele = new DuoyunListItemElement();
       ele.setAttribute('part', DuoyunListElement.item);
+      ele.setAttribute('exportparts', this.itemexportparts);
       ele.addEventListener('resize', this.#onItemResize);
       ele.addEventListener('show', () => this.itemshow(this.#keyItemMap.get(key)));
       ele.intersectionRoot = this.scrollContainer;