@vue-ui-kit/ant 1.2.0 → 1.3.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,
@@ -93,9 +93,9 @@ const defaultProps: Recordable = {
     addonAfter: '%',
   },
   autoComplete: {
-    inputProps: {}
-  }
-}
+    inputProps: {},
+  },
+};
 const componentsMap = {
   $input: Input,
   AInput: Input,
@@ -122,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
@@ -140,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
@@ -161,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 ? (
@@ -185,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>
@@ -208,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: {
@@ -232,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: {
@@ -254,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: {
@@ -284,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 });
                 }
               }}
             >
@@ -296,9 +296,9 @@ const renders = {
             </Button>
           ))}
         </span>
-      )
+      );
     },
-    renderDefault (
+    renderDefault(
       { props = {}, children = [] }: RenderOptions,
       { data, row, field }: RenderTableParams,
     ) {
@@ -307,67 +307,73 @@ 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)
-                      }}>
+    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 ?? {}))}/>
+            default: () => (
+              <a-input
+                {...Object.assign({}, defaultProps.autoComplete.inputProps, props.inputProps ?? {})}
+              />
+            ),
           }}
-        
-        </AutoComplete> : null)
-    }
+        </AutoComplete>
+      ) : null;
+    },
   },
   $switch: {
-    renderItemContent (
+    renderItemContent(
       { props = {}, events = {} }: RenderOptions,
       { data, field }: RenderFormParams,
     ) {
@@ -376,14 +382,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,
     ) {
@@ -393,40 +399,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,
     ) {
@@ -435,28 +441,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}
@@ -467,20 +473,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
@@ -489,21 +495,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,
   {
@@ -523,14 +529,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,
-}
+};

package/src/packages/styles/index.scss

@@ -11,6 +11,20 @@
   width: 100%;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.py-4x {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.px-2x {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
 .h-0 {
   height: 0;
 }
@@ -90,6 +104,18 @@
     .ant-form-item {
       margin-bottom: 0;
 
+      &.p-required {
+        .ant-form-item-label > label:before {
+          display: inline-block;
+          margin-inline-end: 4px;
+          color: #ff4d4f;
+          font-size: 14px;
+          font-family: SimSun, sans-serif;
+          line-height: 1;
+          content: '*';
+        }
+      }
+
       .ant-form-item-label {
         display: flex;
         align-items: start;
@@ -165,6 +191,12 @@
       }
     }
   }
+
+  .ant-pagination-options {
+    .ant-select {
+      width: 100px;
+    }
+  }
 }
 
 //endregion