[duoyun-ui] <dy-pat-form> support input group

packages/duoyun-ui/docs/en/01-guide/20-form.md

@@ -157,7 +157,7 @@ export class MyEleElement extends GemElement {
         <dy-form-item
           .rules=${
             [
-              /** support validtor */
+              /** support validator */
             ]
           }
         >

packages/duoyun-ui/docs/zh/01-guide/20-form.md

@@ -155,7 +155,7 @@ export class MyEleElement extends GemElement {
         <dy-form-item
           .rules=${
             [
-              /** support validtor */
+              /** support validator */
             ]
           }
         >

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

@@ -219,6 +219,10 @@ type FormItemRule = {
  * @attr disabled
  * @attr searchable
  * @attr clearable
+ * @attr rows
+ * @attr step
+ * @attr min
+ * @attr max
  */
 @customElement('dy-form-item')
 @adoptedStyle(formItemStyle)
@@ -241,7 +245,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
     | 'radio-group'
     | 'select'
     | 'textarea'
-    | 'slot';
+    | 'slot'; // need value and change custom event
   @boolattribute multiple: boolean; // picker/select/text
   @attribute name: string;
   @attribute label: string;
@@ -266,8 +270,6 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
   @numattribute min: number;
   @numattribute max: number;
 
-  @property rules?: FormItemRule[];
-
   /**@deprecated */
   @property dataList?: DataList | PickerOption[] | SelectOption[];
   @property options?: DataList | PickerOption[] | SelectOption[];
@@ -300,6 +302,10 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
       if (this.#type === 'slot') {
         this.#itemchange(evt.detail);
       }
+      // `dy-input-group` 触发
+      if (!this.name && this.value === undefined) {
+        this.clearInvalidMessage();
+      }
     });
   }
 
@@ -520,7 +526,12 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
     this.setState({ invalidMessage: undefined });
   }
 
+  rules?: FormItemRule[];
+
+  // 不绑定 `value` 将只支持 `validator`
   async valid() {
+    if (this.hidden) return true;
+
     const rules = [...(this.rules || [])];
     if (this.required && !rules.find((e) => 'required' in e)) {
       rules.push({ required: true });

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

@@ -420,7 +420,8 @@ const inputGroupStyle = createCSSSheet(css`
     z-index: 1;
   }
   dy-input-group > * {
-    flex-grow: 1;
+    flex-grow: 10;
+    width: 0;
   }
   dy-input-group > :not(:last-child) {
     border-top-right-radius: 0;

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

@@ -169,7 +169,6 @@ export class DuoyunTableElement<T = any, K = any> extends GemElement {
 
   @property noData?: string | TemplateResult;
 
-  /**@deprecated */
   @property rowKey?: string | string[];
   @property getKey?: (record: T) => K;
   @property expandedRowRender?: (record: T) => undefined | string | TemplateResult;

packages/duoyun-ui/src/helper/error.ts

@@ -1,3 +1,6 @@
+/**
+ * effect module, handle other module error
+ */
 import { Toast } from '../elements/toast';
 import { ignoredPromiseReasonSet } from '../lib/utils';
 
@@ -8,16 +11,18 @@ addEventListener('beforeunload', () => {
   setTimeout(() => (unloading = false), 1000);
 });
 
+// TODO: configurable, support regexp, handle
+const ignoreError = [
+  // chrome
+  'ResizeObserver',
+  'Script error.',
+];
+
 function printError(err: Error | ErrorEvent | DOMException) {
-  if (err instanceof DOMException && err.name === 'AbortError') {
-    return;
-  }
-  const ignoreError = [
-    // chrome
-    'ResizeObserver',
-    'Script error.',
-  ];
-  if (unloading || ignoreError.some((msg) => err.message?.startsWith(msg))) return;
+  if (unloading) return;
+  if (err instanceof DOMException && err.name === 'AbortError') return;
+  if (ignoreError.some((msg) => err.message?.startsWith(msg))) return;
+
   Toast.open('error', err.message || String(err));
 }
 

packages/duoyun-ui/src/helper/store.ts

@@ -30,6 +30,7 @@ export type PaginationStore<T> = {
   items: Partial<{ [id: string]: T }>;
   // 正在加载，避免重复请求
   loader: Partial<Record<string, Promise<T>>>;
+  // 用来触发 `<dy-pro-table>` fetch 事件
   updatedItem?: T;
 };
 
@@ -47,7 +48,7 @@ type PaginationStoreOptions<T> = {
 export function createPaginationStore<T extends Record<string, any>>(options: PaginationStoreOptions<T>) {
   const { idKey = 'id', storageKey, cacheItems, pageContainItem, ...rest } = options;
 
-  const cacheExcludeKeys: (keyof PaginationStore<T>)[] = ['loader'];
+  const cacheExcludeKeys: (keyof PaginationStore<T>)[] = ['loader', 'updatedItem'];
   if (!cacheItems) cacheExcludeKeys.push('items');
 
   const initStore: PaginationStore<T> = {

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

@@ -104,9 +104,23 @@ export function proxyObject(object: Record<string | symbol | number, any>) {
   });
 }
 
+type ReadPropOptions = {
+  fill?: boolean;
+  onlyFillIntermediate?: boolean;
+};
 /**Deep read prop */
-export function readProp(obj: Record<string, any>, paths: string | number | symbol | string[]) {
-  return Array.isArray(paths) ? paths.reduce((p, c) => p?.[c], obj) : obj[paths as string];
+export function readProp(
+  obj: Record<string, any>,
+  paths: string | number | symbol | string[],
+  options: ReadPropOptions = {},
+) {
+  if (!Array.isArray(paths)) return obj[paths as string];
+  const len = paths.length;
+  return paths.reduce((p, c, i) => {
+    if (!options.fill) return p?.[c];
+    if (options.onlyFillIntermediate && i === len - 1) return p[c];
+    return (p[c] ||= {});
+  }, obj);
 }
 
 /**Only let the last add Promise take effect, don’t care about the order of Resolve */