From a47b28f9ffe383e62e3ce95c838a59a7c2f2d830 Mon Sep 17 00:00:00 2001
From: mantou132 <709922234@qq.com>
Date: Wed, 2 Oct 2024 18:22:30 +0800
Subject: [PATCH] [duoyun-ui] Closed #122, #133

---
 packages/duoyun-ui/src/elements/form.ts     |   2 +-
 packages/duoyun-ui/src/elements/sort-box.ts |  96 +++++++++++++++++
 packages/duoyun-ui/src/lib/styles.ts        |  36 +++----
 packages/duoyun-ui/src/locales/en.ts        |   1 +
 packages/duoyun-ui/src/locales/zh.ts        |   1 +
 packages/duoyun-ui/src/patterns/form.ts     | 112 +++++++++++++++++---
 packages/gem-examples/src/console/api.ts    |   2 +-
 packages/gem-examples/src/console/users.ts  |  13 ++-
 packages/gem/src/elements/base/gesture.ts   |  24 +++--
 9 files changed, 240 insertions(+), 47 deletions(-)
 create mode 100644 packages/duoyun-ui/src/elements/sort-box.ts

diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts
index 52d3335c..c53d1526 100644
--- a/packages/duoyun-ui/src/elements/form.ts
+++ b/packages/duoyun-ui/src/elements/form.ts
@@ -356,7 +356,7 @@ export class DuoyunFormItemElement extends GemElement {
   render = () => {
     const { invalidMessage } = this.#state;
     return html`
-      ${this.#type === 'checkbox'
+      ${this.#type === 'checkbox' || !this.label
         ? ''
         : html`
             <label class="label" part=${DuoyunFormItemElement.label} @click=${() => this.focus()}>
diff --git a/packages/duoyun-ui/src/elements/sort-box.ts b/packages/duoyun-ui/src/elements/sort-box.ts
new file mode 100644
index 00000000..143c8d4f
--- /dev/null
+++ b/packages/duoyun-ui/src/elements/sort-box.ts
@@ -0,0 +1,96 @@
+import { GemElement, createCSSSheet } from '@mantou/gem/lib/element';
+import { adoptedStyle, boolattribute, customElement, emitter, mounted, type Emitter } from '@mantou/gem/lib/decorators';
+import { addListener, css } from '@mantou/gem/lib/utils';
+
+import { blockContainer } from '../lib/styles';
+import { theme } from '../lib/theme';
+
+import { DuoyunGestureElement } from './gesture';
+import type { PanEventDetail } from './gesture';
+
+const style = createCSSSheet(css`
+  :where(dy-sort-item[handle], dy-sort-handle):state(grabbing) {
+    cursor: grabbing;
+
+    * {
+      pointer-event: none;
+    }
+  }
+  dy-sort-item[handle]:state(grabbing),
+  dy-sort-item:has(:state(grabbing)) {
+    position: relative;
+    z-index: ${theme.popupZIndex};
+  }
+`);
+
+export type SortEventDetail = { new: number; old: number };
+
+/**
+ * @customElement dy-sort-box
+ */
+@customElement('dy-sort-box')
+@adoptedStyle(style)
+@adoptedStyle(blockContainer)
+export class DuoyunSortBoxElement extends GemElement {
+  @emitter sort: Emitter<SortEventDetail>;
+
+  #listeners: (undefined | (() => void)[])[] = [];
+
+  #removeListeners = () => {
+    this.#listeners.forEach((e) => e?.forEach((ee) => ee()));
+  };
+
+  #listen = () => {
+    this.#removeListeners();
+    const items = [...this.querySelectorAll<DuoyunSortItemElement>('dy-sort-item')];
+    const handles = items.map((item) =>
+      item.handle ? item : item.querySelector<DuoyunSortHandleElement>('dy-sort-handle'),
+    );
+    this.#listeners = handles.map((e, index) => {
+      if (!e) return;
+      const item = items[index];
+      let itemTranslate = [0, 0];
+      const removeEnd = addListener(e, 'end', ({ detail }: CustomEvent<PointerEvent>) => {
+        itemTranslate = [0, 0];
+        item.style.translate = 'none';
+        const itemsRect = items.map((i) => i.getBoundingClientRect());
+        const newIndex = itemsRect.findIndex(
+          (i) => i.left <= detail.x && i.right > detail.x && i.top <= detail.y && i.bottom > detail.y,
+        );
+        if (newIndex === -1) return;
+        this.sort({ new: newIndex, old: index });
+      });
+      const removePan = addListener(e, 'pan', ({ detail }: CustomEvent<PanEventDetail>) => {
+        itemTranslate[0] += detail.x;
+        itemTranslate[1] += detail.y;
+        item.style.translate = itemTranslate.map((p) => p + 'px').join(' ');
+      });
+      return [removeEnd, removePan];
+    });
+  };
+
+  @mounted()
+  #init = () => {
+    this.#listen();
+    const ob = new MutationObserver(this.#listen);
+    ob.observe(this, { subtree: true, childList: true });
+    return () => {
+      ob.disconnect();
+      this.#removeListeners();
+    };
+  };
+}
+
+/**
+ * @customElement dy-sort-item
+ */
+@customElement('dy-sort-item')
+export class DuoyunSortItemElement extends DuoyunGestureElement {
+  @boolattribute handle: boolean;
+}
+
+/**
+ * @customElement dy-sort-handle
+ */
+@customElement('dy-sort-handle')
+export class DuoyunSortHandleElement extends DuoyunGestureElement {}
diff --git a/packages/duoyun-ui/src/lib/styles.ts b/packages/duoyun-ui/src/lib/styles.ts
index 6637318c..8a75aeae 100644
--- a/packages/duoyun-ui/src/lib/styles.ts
+++ b/packages/duoyun-ui/src/lib/styles.ts
@@ -17,36 +17,32 @@ export const focusStyle = createCSSSheet(css`
   }
 `);
 
-export const blockContainer = createCSSSheet(css`
-  :host(:where(:not([hidden]))),
-  :where(:scope:not([hidden])) {
-    display: block;
-  }
-`);
+function createContainer(display: string) {
+  return createCSSSheet(css`
+    @layer {
+      :host(:where(:not([hidden]))),
+      :where(:scope:not([hidden])) {
+        display: ${display};
+      }
+    }
+  `);
+}
 
-export const flexContainer = createCSSSheet(css`
-  :host(:where(:not([hidden]))),
-  :where(:scope:not([hidden])) {
-    display: flex;
-  }
-`);
+export const blockContainer = createContainer('block');
 
-export const contentsContainer = createCSSSheet(css`
-  :host(:where(:not([hidden]))),
-  :where(:scope:not([hidden])) {
-    display: contents;
-  }
-`);
+export const flexContainer = createContainer('flex');
+
+export const contentsContainer = createContainer('contents');
 
 /** render empty content */
 export const noneTemplate = html`
   <style>
     :host {
-      display: none;
+      display: none !important;
     }
     @scope {
       :scope {
-        display: none;
+        display: none !important;
       }
     }
   </style>
diff --git a/packages/duoyun-ui/src/locales/en.ts b/packages/duoyun-ui/src/locales/en.ts
index ddbaba49..ace75f0d 100644
--- a/packages/duoyun-ui/src/locales/en.ts
+++ b/packages/duoyun-ui/src/locales/en.ts
@@ -18,6 +18,7 @@ export default {
   copySuccess: 'Copy success',
   copyFail: 'Copy fail',
   add: 'Add',
+  remove: 'Remove',
   search: 'Search',
   filter: 'Filter',
   loading: 'Loading',
diff --git a/packages/duoyun-ui/src/locales/zh.ts b/packages/duoyun-ui/src/locales/zh.ts
index 1f668734..f130b4f6 100644
--- a/packages/duoyun-ui/src/locales/zh.ts
+++ b/packages/duoyun-ui/src/locales/zh.ts
@@ -20,6 +20,7 @@ const lang: typeof en = {
   copySuccess: '复制成功',
   copyFail: '复制失败',
   add: '新增',
+  remove: '移除',
   search: '搜索',
   filter: '过滤',
   loading: '加载中',
diff --git a/packages/duoyun-ui/src/patterns/form.ts b/packages/duoyun-ui/src/patterns/form.ts
index c3aa9575..2ae2039c 100644
--- a/packages/duoyun-ui/src/patterns/form.ts
+++ b/packages/duoyun-ui/src/patterns/form.ts
@@ -20,20 +20,19 @@ import { DuoyunDatePickerElement } from '../elements/date-picker';
 import { DuoyunDateRangePickerElement } from '../elements/date-range-picker';
 import { DuoyunPickerElement } from '../elements/picker';
 import { locale } from '../lib/locale';
+import type { SortEventDetail } from '../elements/sort-box';
 
 import '../elements/form';
-
-// ts 5.4
-declare global {
-  interface MapConstructor {
-    /**
-     * Groups members of an iterable according to the return value of the passed callback.
-     * @param items An iterable.
-     * @param keySelector A callback which will be invoked for each item in items.
-     */
-    groupBy<K, T>(items: Iterable<T>, keySelector: (item: T, index: number) => K): Map<K, T[]>;
-  }
-}
+import '../elements/button';
+import '../elements/space';
+import '../elements/sort-box';
+
+type ListOptions = {
+  add?: boolean | string | TemplateResult;
+  remove?: boolean | string | TemplateResult;
+  initItem?: any;
+  sortable?: boolean;
+};
 
 type FormItemProps<T = unknown> = {
   label: string;
@@ -69,6 +68,9 @@ type FormItemProps<T = unknown> = {
 
   /**update field setting for any field change */
   update?: (data: T) => Partial<FormItemProps<T>>;
+
+  // array field
+  list?: boolean | ListOptions;
 };
 
 export type FormItem<T = unknown> =
@@ -86,6 +88,14 @@ const style = createCSSSheet(css`
   dy-form {
     width: 100%;
   }
+  dy-sort-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 1em;
+    dy-form-item:first-of-type {
+      flex-grow: 1;
+    }
+  }
   .template {
     margin-block-end: 1em;
     font-size: 0.875em;
@@ -160,23 +170,29 @@ export class DyPatFormElement<T = Record<string, unknown>> extends GemElement {
     });
   };
 
-  #onChange = ({ detail }: CustomEvent<any>) => {
+  #changeData = (detail: any) => {
     const data = Object.keys(detail).reduce((prev, key) => {
       const val = detail[key];
       const path = key.split(',');
-      Reflect.set(readProp(prev, path.slice(0, -1), { fill: true }), path.at(-1)!, val);
+      const prop = path.at(-1)!;
+      const root = readProp(prev, path.slice(0, -1), { fill: true });
+      Reflect.set(root, prop, val);
       return prev;
     }, {} as any);
     this.state({ data });
 
     this.#forEachFormItems((props) => {
-      if (!props.update && props.type !== 'number') return;
+      if (!props.list && !props.update && props.type !== 'number') return;
 
       const path = Array.isArray(props.field) ? props.field : [props.field];
       const wrapObj = readProp(data, path.slice(0, -1) as string[]);
       const lastKey = path.at(-1)!;
       const val = wrapObj[lastKey];
 
+      if (props.list && val && !Array.isArray(val)) {
+        Reflect.set(wrapObj, lastKey, Array.from({ ...val, length: Object.keys(val).length }));
+      }
+
       if (props.type === 'number') {
         Reflect.set(wrapObj, lastKey, Number(val) || 0);
       }
@@ -193,6 +209,8 @@ export class DyPatFormElement<T = Record<string, unknown>> extends GemElement {
     });
   };
 
+  #onChange = ({ detail }: CustomEvent<any>) => this.#changeData(detail);
+
   #onOptionsChange = async (props: FormItemProps<T>, input: string) => {
     if (!props.getOptions) return;
     const { optionsRecord, data } = this.state;
@@ -401,6 +419,67 @@ export class DyPatFormElement<T = Record<string, unknown>> extends GemElement {
     `;
   };
 
+  #renderItemList = (item: FormItemProps<T>) => {
+    const { add = true, remove = true, initItem, sortable } = typeof item.list === 'boolean' ? {} : item.list || {};
+    const addTemplate = typeof add === 'boolean' ? locale.add : add;
+    const removeTemplate = typeof remove === 'boolean' ? '' : remove;
+    const path = [item.field].flat() as string[];
+    const prop = path.at(-1)!;
+    const value = readProp(this.state.data!, path) as any[] | undefined;
+    const onSort = ({ detail }: CustomEvent<SortEventDetail>) => {
+      [value![detail.new], value![detail.old]] = [value![detail.old], value![detail.new]];
+      this.state();
+    };
+    const addEle = () => {
+      const root = readProp(this.state.data!, path.slice(0, -1), { fill: true });
+      if (!root[prop]) root[prop] = [];
+      root[prop].push(initItem);
+      this.state();
+    };
+    const removeEle = (index: number) => {
+      value!.splice(index, 1);
+      this.state();
+    };
+    return html`
+      <dy-form-item style="margin-bottom: 0" label=${item.label}></dy-form-item>
+      <dy-sort-box @sort=${onSort}>
+        ${value?.map(
+          (e, index) => html`
+            <dy-sort-item>
+              ${sortable && !item.disabled
+                ? html`
+                    <dy-sort-handle>
+                      <dy-button .icon=${icons.menu} square color="cancel"></dy-button>
+                    </dy-sort-handle>
+                  `
+                : ''}
+              ${this.#renderItem({ ...item, field: [...path, index] as string[], label: '' })}
+              <dy-form-item ?hidden=${item.disabled}>
+                <dy-space>
+                  ${removeTemplate
+                    ? html`${removeTemplate}`
+                    : html`
+                        <dy-button
+                          @click=${() => removeEle(index)}
+                          .icon=${icons.delete}
+                          square
+                          round
+                          color="cancel"
+                          title=${locale.remove}
+                        ></dy-button>
+                      `}
+                </dy-space>
+              </dy-form-item>
+            </dy-sort-item>
+          `,
+        )}
+      </dy-sort-box>
+      <dy-form-item>
+        <dy-button .disabled=${item.disabled} .icon=${icons.add} @click=${addEle}>${addTemplate}</dy-button>
+      </dy-form-item>
+    `;
+  };
+
   #renderInlineGroup = (items: FormItemProps<T>[]) => {
     return html`<dy-form-item-inline-group>${this.#renderItems(items)}</dy-form-item-inline-group>`;
   };
@@ -423,6 +502,9 @@ export class DyPatFormElement<T = Record<string, unknown>> extends GemElement {
             </details>
           `;
         }
+        if (item.list) {
+          return this.#renderItemList(item);
+        }
         const inputs = inputGroup.get(item.label);
         if (inputs) {
           switch (inputs.length) {
diff --git a/packages/gem-examples/src/console/api.ts b/packages/gem-examples/src/console/api.ts
index dd0fa1d8..89fe8c23 100644
--- a/packages/gem-examples/src/console/api.ts
+++ b/packages/gem-examples/src/console/api.ts
@@ -28,7 +28,7 @@ const EXAMPLE = {
   updated: 0,
 };
 
-export type Item = typeof EXAMPLE;
+export type Item = typeof EXAMPLE & { social?: string[] };
 
 export async function fetchItemsWithArgs(args: FetchEventDetail): Promise<PaginationRes<Item>> {
   console.log('args:', args);
diff --git a/packages/gem-examples/src/console/users.ts b/packages/gem-examples/src/console/users.ts
index 13f81789..877a10a4 100644
--- a/packages/gem-examples/src/console/users.ts
+++ b/packages/gem-examples/src/console/users.ts
@@ -8,6 +8,7 @@ import { createForm } from 'duoyun-ui/patterns/form';
 import { sleep } from 'duoyun-ui/lib/timer';
 import { createPaginationStore } from 'duoyun-ui/helper/store';
 import type { FetchEventDetail, PatTableColumn } from 'duoyun-ui/patterns/table';
+import type { Modify } from 'duoyun-ui/lib/types';
 
 import type { Item } from './api';
 import { fetchItemsWithArgs } from './api';
@@ -22,6 +23,7 @@ const pagination = createPaginationStore<Item>({
 });
 
 const initItem = {
+  social: [''],
   username: 'Mantou',
   name: '',
   company: {
@@ -32,7 +34,7 @@ const initItem = {
   updated: Date.now(),
 };
 
-type NewItem = typeof initItem;
+type NewItem = Modify<typeof initItem, { social?: string[] }>;
 
 @customElement('console-page-users')
 export class ConsolePageItemElement extends GemElement {
@@ -169,6 +171,15 @@ export class ConsolePageItemElement extends GemElement {
         },
       },
     ],
+    {
+      type: 'text',
+      field: ['social'],
+      label: 'Social',
+      list: {
+        initItem: '',
+        sortable: true,
+      },
+    },
     {
       label: 'Company Info',
       fieldset: [
diff --git a/packages/gem/src/elements/base/gesture.ts b/packages/gem/src/elements/base/gesture.ts
index 2e6ec682..e89a3e95 100644
--- a/packages/gem/src/elements/base/gesture.ts
+++ b/packages/gem/src/elements/base/gesture.ts
@@ -1,6 +1,6 @@
 import { createCSSSheet, GemElement } from '../../lib/element';
 import type { Emitter } from '../../lib/decorators';
-import { adoptedStyle, attribute, emitter, mounted } from '../../lib/decorators';
+import { adoptedStyle, attribute, emitter, mounted, state } from '../../lib/decorators';
 import { css } from '../../lib/utils';
 
 export type PanEventDetail = {
@@ -46,10 +46,12 @@ function angleAB(
 }
 
 const style = createCSSSheet(css`
-  :scope:where(:not([hidden])) {
-    display: block;
-    user-select: none;
-    touch-action: attr(touch-action, none);
+  @layer {
+    :scope:where(:not([hidden])) {
+      display: block;
+      user-select: none;
+      touch-action: attr(touch-action, none);
+    }
   }
 `);
 
@@ -74,11 +76,13 @@ export class GemGestureElement extends GemElement {
   @emitter pinch: Emitter<PinchEventDetail>;
   @emitter rotate: Emitter<RotateEventDetail>;
   @emitter swipe: Emitter<SwipeEventDetail>;
-  @emitter press: Emitter<null>;
-  @emitter end: Emitter<null>;
+  @emitter press: Emitter<PointerEvent>;
+  @emitter end: Emitter<PointerEvent>;
 
   @attribute touchAction: string;
 
+  @state grabbing: boolean;
+
   #pressed = false; // 触发 press 之后不触发其他事件
   #pressTimer = 0;
 
@@ -134,6 +138,7 @@ export class GemGestureElement extends GemElement {
   };
 
   #onStart = (evt: PointerEvent) => {
+    this.grabbing = true;
     evt.stopPropagation();
     this.setPointerCapture(evt.pointerId);
     this._movesMap.set(evt.pointerId, []);
@@ -141,7 +146,7 @@ export class GemGestureElement extends GemElement {
     if (evt.isPrimary) {
       this.#pressed = false;
       this.#pressTimer = window.setTimeout(() => {
-        this.press(null);
+        this.press(evt);
         this.#pressed = true;
       }, 251);
     }
@@ -212,7 +217,8 @@ export class GemGestureElement extends GemElement {
     window.clearTimeout(this.#pressTimer);
 
     if (this._movesMap.size === 1) {
-      this.end(null);
+      this.grabbing = false;
+      this.end(evt);
     }
 
     // auto release: https://javascript.info/pointer-events#pointer-capturing