@vue-ui-kit/ant 1.1.1 → 1.2.0

package/src/packages/store/renderStore.tsx

@@ -1,4 +1,4 @@
-import { RenderFormParams, RenderOptions, RenderTableParams } from '#/antProxy';
+import { RenderFormParams, RenderOptions, RenderTableParams } from '#/antProxy'
 import {
   Button,
   Dropdown,
@@ -20,13 +20,13 @@ import {
   Textarea,
   TimePicker,
   TreeSelect,
-} from 'ant-design-vue';
-import { set, isFunction, merge, omit } from 'lodash-es';
-import { ButtonProps } from 'ant-design-vue/lib/button';
-import { noValue, valued } from '@/utils/is';
-import TableInput from '@/renders/TableInput.vue';
-import Icon from '@/renders/Icon';
-import { computed } from 'vue';
+} from 'ant-design-vue'
+import { set, isFunction, merge, omit } from 'lodash-es'
+import { ButtonProps } from 'ant-design-vue/lib/button'
+import { noValue, valued } from '@/utils/is'
+import TableInput from '@/renders/TableInput.vue'
+import Icon from '@/renders/Icon'
+import { computed } from 'vue'
 
 interface BtnOptions extends ButtonProps {
   content?: string;
@@ -84,7 +84,7 @@ const antDefaultProps = {
     filterOption: (input: string, option: IOption) =>
       option.label && option.label.toLowerCase().includes(input.toLowerCase()),
   },
-};
+}
 const defaultProps: Recordable = {
   PercentInput: {
     controls: false,
@@ -92,7 +92,10 @@ const defaultProps: Recordable = {
     max: 100,
     addonAfter: '%',
   },
-};
+  autoComplete: {
+    inputProps: {}
+  }
+}
 const componentsMap = {
   $input: Input,
   AInput: Input,
@@ -119,16 +122,16 @@ const componentsMap = {
   $time: TimePicker,
   ATimePicker: TimePicker,
   ATreeSelect: TreeSelect,
-};
+}
 const renderBasic = (name: string) => {
-  const DynamicComponent = componentsMap[name];
+  const DynamicComponent = componentsMap[name]
   return {
-    renderItemContent(
+    renderItemContent (
       { props = {}, attrs = {}, events = {}, defaultValue }: RenderOptions,
       { data, field }: RenderFormParams,
     ) {
       if (valued(defaultValue) && valued(field) && noValue(data[field!])) {
-        data[field!] = defaultValue;
+        data[field!] = defaultValue
       }
       return field ? (
         <DynamicComponent
@@ -137,19 +140,19 @@ const renderBasic = (name: string) => {
           {...attrs}
           {...merge({}, antDefaultProps[name], props)}
           onChange={(...arg) => {
-            events.change?.({ data, field }, ...arg);
+            events.change?.({ data, field }, ...arg)
           }}
         />
       ) : (
         <DynamicComponent is={name} {...props} />
-      );
+      )
     },
-    renderDefault(
+    renderDefault (
       { props = antDefaultProps[name] ?? {}, attrs = {}, events = {}, defaultValue }: RenderOptions,
       { data, row, field }: RenderTableParams,
     ) {
       if (valued(defaultValue) && valued(field) && noValue(row[field!])) {
-        row[field!] = defaultValue;
+        row[field!] = defaultValue
       }
       return field ? (
         <DynamicComponent
@@ -158,15 +161,15 @@ const renderBasic = (name: string) => {
           {...attrs}
           {...merge({}, antDefaultProps[name], props)}
           onChange={(...arg) => {
-            events.change?.({ data, row, field }, ...arg);
+            events.change?.({ data, row, field }, ...arg)
           }}
         />
       ) : (
         <DynamicComponent is={name} {...props} />
-      );
+      )
     },
-  };
-};
+  }
+}
 
 const renderBtn = (btnOpt: BtnOptions, params: RenderTableParams) =>
   btnOpt.dropdowns && btnOpt.dropdowns.length > 0 ? (
@@ -182,7 +185,7 @@ const renderBtn = (btnOpt: BtnOptions, params: RenderTableParams) =>
               'clickEvt',
               'dropdowns',
             ])}
-            icon={btnOpt.icon ? <Icon icon={btnOpt.icon} /> : null}
+            icon={btnOpt.icon ? <Icon icon={btnOpt.icon}/> : null}
           >
             {btnOpt.content || (btnOpt?.getContent?.(params) ?? '')}
           </Button>
@@ -205,21 +208,21 @@ const renderBtn = (btnOpt: BtnOptions, params: RenderTableParams) =>
         'clickEvt',
         'dropdowns',
       ])}
-      icon={btnOpt.icon ? <Icon icon={btnOpt.icon} /> : null}
+      icon={btnOpt.icon ? <Icon icon={btnOpt.icon}/> : null}
       onClick={() => {
         if (btnOpt?.clickEvt) {
-          btnOpt.clickEvt(params);
+          btnOpt.clickEvt(params)
         }
       }}
     >
       {btnOpt.content || (btnOpt?.getContent?.(params) ?? '')}
     </Button>
-  );
+  )
 const renders = {
   ...Object.fromEntries(Object.keys(componentsMap).map((name) => [name, renderBasic(name)])),
   //简单按钮
   $button: {
-    renderItemContent(
+    renderItemContent (
       { props = {}, events = {} }: RenderOptions,
       { data, field }: RenderFormParams,
       defaultHandler: {
@@ -229,19 +232,19 @@ const renders = {
       return (
         <Button
           {...omit(props, ['content'])}
-          icon={props.icon ? <Icon icon={props.icon} /> : null}
+          icon={props.icon ? <Icon icon={props.icon}/> : null}
           onClick={() => {
-            events.click?.({ data, field });
+            events.click?.({ data, field })
             if (props.htmlType === 'reset' && defaultHandler?.reset) {
-              defaultHandler.reset({ data, field });
+              defaultHandler.reset({ data, field })
             }
           }}
         >
           {props.content}
         </Button>
-      );
+      )
     },
-    renderDefault(
+    renderDefault (
       { props = {}, events = {} }: RenderOptions,
       { row, field }: RenderTableParams,
       defaultHandler: {
@@ -251,25 +254,25 @@ const renders = {
       return (
         <Button
           {...omit(props, ['content'])}
-          icon={props.icon ? <Icon icon={props.icon} /> : null}
+          icon={props.icon ? <Icon icon={props.icon}/> : null}
           onClick={() => {
-            events.click?.({ row, field });
+            events.click?.({ row, field })
             if (props.htmlType === 'reset' && defaultHandler?.reset) {
-              defaultHandler.reset({ row, field });
+              defaultHandler.reset({ row, field })
             }
             if (props.htmlType === 'pick' && defaultHandler?.pick) {
-              defaultHandler.pick({ row, field });
+              defaultHandler.pick({ row, field })
             }
           }}
         >
           {props.content}
         </Button>
-      );
+      )
     },
   },
   // 简单按钮组
   $buttons: {
-    renderItemContent(
+    renderItemContent (
       { props = {}, children = [] }: RenderOptions,
       { data, field }: RenderFormParams,
       defaultHandler: {
@@ -281,11 +284,11 @@ const renders = {
           {children.map((m) => (
             <Button
               {...omit(Object.assign(props, m.props), ['content'])}
-              icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
+              icon={m.props.icon ? <Icon icon={m.props.icon}/> : null}
               onClick={() => {
-                m.events?.click?.({ data, field });
+                m.events?.click?.({ data, field })
                 if (m.props.htmlType === 'reset' && defaultHandler?.reset) {
-                  defaultHandler.reset({ data, field });
+                  defaultHandler.reset({ data, field })
                 }
               }}
             >
@@ -293,9 +296,9 @@ const renders = {
             </Button>
           ))}
         </span>
-      );
+      )
     },
-    renderDefault(
+    renderDefault (
       { props = {}, children = [] }: RenderOptions,
       { data, row, field }: RenderTableParams,
     ) {
@@ -304,49 +307,67 @@ const renders = {
           {children.map((m) => (
             <Button
               {...omit(Object.assign(props, m.props), ['content'])}
-              icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
+              icon={m.props.icon ? <Icon icon={m.props.icon}/> : null}
               onClick={() => {
-                m.events?.click?.({ data, row, field });
+                m.events?.click?.({ data, row, field })
               }}
             >
               {m.props.content}
             </Button>
           ))}
         </span>
-      );
+      )
     },
   },
   ButtonTree: {
-    renderDefault({ children = [], props = {} as Recordable }, params: RenderTableParams) {
+    renderDefault ({ children = [], props = {} as Recordable }, params: RenderTableParams) {
       return (
         <span class={props.noGap ? 'align-no-gap-box' : 'align-gap-box'}>
           {(children as BtnOptions[]).map((item) => renderBtn(item, params)) ?? []}
         </span>
-      );
+      )
     },
   },
   $radio: {
-    renderItemContent({ props = {}, options }: RenderOptions, { data, field }: RenderFormParams) {
+    renderItemContent ({ props = {}, options }: RenderOptions, { data, field }: RenderFormParams) {
       return valued(field) ? (
         <RadioGroup
           v-model:value={data[field!]}
           {...props}
           options={props.options ?? options ?? []}
         />
-      ) : null;
+      ) : null
     },
-    renderDefault({ props = {}, options }: RenderOptions, { row, field }: RenderTableParams) {
+    renderDefault ({ props = {}, options }: RenderOptions, { row, field }: RenderTableParams) {
       return valued(field) ? (
         <RadioGroup
           v-model:value={row[field!]}
           {...props}
           options={props.options ?? options ?? []}
         />
-      ) : null;
+      ) : null
     },
   },
+  $autoComplete: {
+    renderItemContent ({ props = {}, events = {} }: RenderOptions, {
+      data,
+      field
+    }: RenderFormParams) {
+      return (valued(field) ?
+        <AutoComplete v-model:value={data[field!]} {...props}
+                      onChange={(...arg) => {
+                        events.change?.({ data, field }, ...arg)
+                      }}>
+          {{
+            default: () =>
+              <a-input {...(Object.assign({}, defaultProps.autoComplete.inputProps, props.inputProps ?? {}))}/>
+          }}
+        
+        </AutoComplete> : null)
+    }
+  },
   $switch: {
-    renderItemContent(
+    renderItemContent (
       { props = {}, events = {} }: RenderOptions,
       { data, field }: RenderFormParams,
     ) {
@@ -355,14 +376,14 @@ const renders = {
           v-model:checked={data[field!]}
           {...props}
           onChange={(...arg) => {
-            events.change?.({ data, field }, ...arg);
+            events.change?.({ data, field }, ...arg)
           }}
         />
-      ) : null;
+      ) : null
     },
   },
   $checkbox: {
-    renderItemContent(
+    renderItemContent (
       { props = {}, options, events = {} }: RenderOptions,
       { data, field }: RenderFormParams,
     ) {
@@ -372,40 +393,40 @@ const renders = {
           {...props}
           options={props.options ?? options ?? []}
           onChange={(...arg) => {
-            events.change?.({ data, field }, ...arg);
+            events.change?.({ data, field }, ...arg)
           }}
         />
-      ) : null;
+      ) : null
     },
-    renderDefault({ props = {}, options }: RenderOptions, { row, field }: RenderTableParams) {
+    renderDefault ({ props = {}, options }: RenderOptions, { row, field }: RenderTableParams) {
       return valued(field) ? (
         <CheckboxGroup
           v-model:value={row[field!]}
           {...props}
           options={props.options ?? options ?? []}
         />
-      ) : null;
+      ) : null
     },
   },
   $paragraph: {
-    renderDefault({ props = {} }: RenderOptions, { row, field }: RenderTableParams) {
+    renderDefault ({ props = {} }: RenderOptions, { row, field }: RenderTableParams) {
       const defaultProps = {
         ellipsis: {
           expandable: true,
           rows: 3,
         },
-      };
-      const content = props.getContent?.({ row, field }) ?? (valued(field) ? row[field!] : '');
+      }
+      const content = props.getContent?.({ row, field }) ?? (valued(field) ? row[field!] : '')
       return valued(field) ? (
         <TypographyParagraph
           {...merge({}, defaultProps, omit(props, ['content', 'getContent']))}
           content={content}
         />
-      ) : null;
+      ) : null
     },
   },
   $tableInput: {
-    renderItemContent(
+    renderItemContent (
       { props = {}, handleTrigger }: RenderOptions,
       { data, field }: RenderFormParams,
     ) {
@@ -414,28 +435,28 @@ const renders = {
           v-model={data[field!]}
           onTrigger={() => {
             if (handleTrigger && isFunction(handleTrigger)) {
-              handleTrigger(props.cusFields ?? field);
+              handleTrigger(props.cusFields ?? field)
             }
           }}
           editColumns={props.editColumns ?? []}
           tableConfig={props.tableConfig ?? {}}
         />
-      ) : null;
+      ) : null
     },
   },
   PercentInput: {
-    renderItemContent(
+    renderItemContent (
       { props = {}, attrs = {} }: RenderOptions,
       { data, field }: RenderFormParams,
     ) {
-      const rate = props.parse ? 100 : 1;
+      const rate = props.parse ? 100 : 1
       if (valued(field)) {
         const percentage = computed({
           get: () => (data[field!] ?? 0) * rate,
           set: (val) => {
-            data[field!] = (val ?? 0) / rate;
+            data[field!] = (val ?? 0) / rate
           },
-        });
+        })
         return (
           <div class="flex items-center">
             {props.info ? <span class="pr-4">{props.info}</span> : null}
@@ -446,20 +467,20 @@ const renders = {
               {...merge({}, defaultProps.PercentInput, omit(props, ['info']))}
             />
           </div>
-        );
+        )
       } else {
-        return null;
+        return null
       }
     },
-    renderDefault({ props = {}, attrs = {} }: RenderOptions, { row, field }: RenderTableParams) {
-      const rate = props.parse ? 100 : 1;
+    renderDefault ({ props = {}, attrs = {} }: RenderOptions, { row, field }: RenderTableParams) {
+      const rate = props.parse ? 100 : 1
       if (valued(field)) {
         const percentage = computed({
           get: () => (row[field!] ?? 0) * rate,
           set: (val) => {
-            set(row, field!, (val ?? 0) / rate);
+            set(row, field!, (val ?? 0) / rate)
           },
-        });
+        })
         return [
           props.info ? <span class="pr-4">{props.info}</span> : null,
           <a-input-number
@@ -468,21 +489,21 @@ const renders = {
             v-model:value={percentage.value}
             {...merge({}, defaultProps.PercentInput, omit(props, ['info']))}
           />,
-        ];
+        ]
       } else {
-        return null;
+        return null
       }
     },
   },
   TreeSelect: {
-    renderItemContent({ props = {} }: RenderOptions, { data, field }: RenderFormParams) {
-      return valued(field) ? <TreeSelect v-model:value={data[field!]} {...props} /> : null;
+    renderItemContent ({ props = {} }: RenderOptions, { data, field }: RenderFormParams) {
+      return valued(field) ? <TreeSelect v-model:value={data[field!]} {...props} /> : null
     },
-    renderDefault({ props = {} }: RenderOptions, { row, field }: RenderTableParams) {
-      return valued(field) ? <TreeSelect v-model:value={row[field!]} {...props} /> : null;
+    renderDefault ({ props = {} }: RenderOptions, { row, field }: RenderTableParams) {
+      return valued(field) ? <TreeSelect v-model:value={row[field!]} {...props} /> : null
     },
   },
-};
+}
 export const addRender = (
   name: string,
   {
@@ -502,14 +523,14 @@ export const addRender = (
   },
 ) => {
   if (renders.hasOwnProperty(name)) {
-    console.warn(`render ${name} already exists`);
+    console.warn(`render ${name} already exists`)
   }
   renders[name] = {
     renderItemContent,
     renderDefault,
-  };
-};
+  }
+}
 export default {
   renders,
   addRender,
-};
+}