@aplus-frontend/ui 0.0.14 → 0.0.16

package/lib/src/business/title/style.css

@@ -1,7 +1,7 @@
 .aplus-ap-title {
   position: relative;
   width: 100%;
-  height: 32px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -12,17 +12,12 @@
   position: absolute;
   content: '';
   left: 0;
-  top: 6px;
+  top: 2px;
   width: 3px;
-  height: 20px;
+  height: 16px;
   background: #0070ff;
   border-radius: 0px 4px 4px 0px;
-}
-.aplus-ap-title--aplus::before {
-  background: #0070ff;
-}
-.aplus-ap-title--admin::before {
-  background: #34b77c;
+  z-index: 1;
 }
 .aplus-ap-title__prefix {
   font-weight: bold;
@@ -34,6 +29,31 @@
   margin-left: 5px;
   color: #8896b0;
 }
+.aplus-ap-title--admin {
+  height: 22px;
+  padding-left: 14px;
+}
+.aplus-ap-title--admin::before {
+  top: 7px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #34b77c;
+  background: #fff;
+  z-index: 1;
+}
+.aplus-ap-title--admin .aplus-ap-title__prefix {
+  font-weight: bold;
+  color: #333;
+  display: flex;
+  align-items: center;
+}
+.aplus-ap-title--admin .aplus-ap-title__prefix .anticon-question-circle {
+  margin-left: 5px;
+  color: #8896b0;
+}
 .aplus-ap-title__suffix {
   color: #526a90;
 }

package/lib/src/editable-table/hooks/use-get-columns.d.ts

@@ -1,5 +1,28 @@
-import { EditableTableFormItemProps, EditableTableProps, EditableColumnType } from '../interface';
-import { ComputedRef } from 'vue';
+import { EditableTableFormItemProps, EditableTableProps } from '../interface';
+import { ComputedRef, VNode, RendererNode, RendererElement } from 'vue';
+import { TableColumnType } from 'ant-design-vue';
+import { ValueEnum } from '../..';
 
-declare const useGetColumns: (props: EditableTableProps | EditableTableFormItemProps) => ComputedRef< EditableColumnType<any, any>[]>;
+declare const useGetColumns: (props: EditableTableProps | EditableTableFormItemProps) => ComputedRef<(Omit< TableColumnType<any>, "children" | "customRender"> & {
+    children?: (Omit< TableColumnType<any>, "children" | "customRender"> & any) | undefined;
+    tooltip?: string | undefined;
+    copyable?: boolean | undefined;
+    editable?: boolean | ((text: any, record: any, index: number) => boolean) | undefined;
+    valueEnum?: ValueEnum | undefined;
+    customRenderFormItem?: ((config: Omit< TableColumnType<any>, "children" | "customRender"> & any) => any) | undefined;
+    valueType?: any;
+    fieldProps?: any;
+    customRender?: ((opt: {
+        value: any;
+        text: any;
+        record: any;
+        index: number;
+        renderIndex: number;
+        column: TableColumnType<any>;
+        editable?: boolean | undefined;
+        originalNode?: VNode<RendererNode, RendererElement, {
+            [key: string]: any;
+        }> | undefined;
+    }) => any) | undefined;
+})[]>;
 export default useGetColumns;

package/lib/src/editable-table/hooks/use-get-columns.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("vue"),h=require("lodash-unified"),q=require("../utils.js"),d=require("../../ap-table/utils.js");require("../../config-provider/index.js");const s=require("../../ap-table/constants.js"),C=require("ant-design-vue"),F=require("../../config-provider/hooks/use-locale.js"),R=a=>{const{t:i}=F.useLocale(),b=u.computed(()=>{let n=a.columns;return n?(n=n.map(e=>({...e,customRender({value:l,...t}){if(e.customRender)return e.customRender({value:l,...t,column:e});{if(h.isFunction(e.editable)?e.editable(t.text,t.record,t.index):!!e.editable){const y=q.getEditableComponent(e.valueType),o=d.updateFormProps(e,d.getFieldProps(e.fieldProps,{value:l,...t})),r={};a.onFieldChange&&(r[`onUpdate:${o.valuePropName||"value"}`]=T=>{var c;return(c=a.onFieldChange)==null?void 0:c.call(a,t.index,e.dataIndex,T)});const x={name:[a.name,t.index,e.dataIndex],...o||{},placeholder:d.getPlaceholder(i,e.valueType,o==null?void 0:o.placeholder),field:{style:"width: 100%",...(o==null?void 0:o.field)||{},...r}};return u.createVNode(y,x,null)}const p=s.apTableRenderItemMap[e.valueType],g=d.getTableRenderProps(e,{value:l,...t});return f(e,l,u.createVNode(p,u.mergeProps(g,{mode:"read"}),null))}}})),n):[]});function f(n,e,l){return s.noRenderAsFormItemValueList.includes(n.valueType)?l:n.copyable||n.ellipsis?u.createVNode(C.Typography.Text,{copyable:n.copyable?{text:e,tooltip:!1}:!1,ellipsis:n.ellipsis?{tooltip:e}:!1,content:l},null):l}return b};exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("vue"),h=require("lodash-unified"),q=require("../utils.js"),r=require("../../ap-table/utils.js");require("../../config-provider/index.js");const f=require("../../ap-table/constants.js"),C=require("ant-design-vue"),F=require("../../config-provider/hooks/use-locale.js"),R=a=>{const{t:g}=F.useLocale(),p=u.computed(()=>{let n=a.columns;return n?(n=n.map(e=>({...e,customRender({value:o,...t}){const s=h.isFunction(e.editable)?e.editable(t.text,t.record,t.index):!!e.editable;let d;if(s){const c=q.getEditableComponent(e.valueType),l=r.updateFormProps(e,r.getFieldProps(e.fieldProps,{value:o,...t})),i={};a.onFieldChange&&(i[`onUpdate:${l.valuePropName||"value"}`]=T=>{var b;return(b=a.onFieldChange)==null?void 0:b.call(a,t.index,e.dataIndex,T)});const x={name:[a.name,t.index,e.dataIndex],...l||{},placeholder:r.getPlaceholder(g,e.valueType,l==null?void 0:l.placeholder),field:{style:"width: 100%",...(l==null?void 0:l.field)||{},...i}};d=u.createVNode(c,x,null)}else{const c=f.apTableRenderItemMap[e.valueType],l=r.getTableRenderProps(e,{value:o,...t});d=y(e,o,u.createVNode(c,u.mergeProps(l,{mode:"read"}),null))}return e.customRender?e.customRender({value:o,...t,column:e,editable:s,originalNode:d}):d}})),n):[]});function y(n,e,o){return f.noRenderAsFormItemValueList.includes(n.valueType)?o:n.copyable||n.ellipsis?u.createVNode(C.Typography.Text,{copyable:n.copyable?{text:e,tooltip:!1}:!1,ellipsis:n.ellipsis?{tooltip:e}:!1,content:o},null):o}return p};exports.default=R;

package/lib/src/editable-table/interface.d.ts

@@ -1,10 +1,12 @@
 import { ColumnType, TableProps } from 'ant-design-vue/es/table';
-import { ApTableValueFields, ValueEnum } from '../ap-table';
+import { ApTableValueFields, ApTableValueTypes, ValueEnum } from '../ap-table';
 import { NamePath, ValidateOptions } from 'ant-design-vue/es/form/interface';
 import { DataIndex } from 'ant-design-vue/es/vc-table/interface';
 import { FormItemProps } from 'ant-design-vue';
+import { VNode } from 'vue';
 
-export type EditableColumnType<ValueType extends keyof ApTableValueFields = 'text', RecordType = any> = Omit<ColumnType<RecordType>, 'children'> & {
+export type EditableColumnType<RecordType = any, ValueType extends ApTableValueTypes = ApTableValueTypes> = ValueType extends ApTableValueTypes ? Omit<ColumnType<RecordType>, 'children' | 'customRender'> & {
+    children?: EditableColumnType<RecordType, ValueType>;
     /**
      * 在title之后展示一个icon并触发tooltip
      */
@@ -25,11 +27,11 @@ export type EditableColumnType<ValueType extends keyof ApTableValueFields = 'tex
      * 自定义表单
      * @deprecated 未实现，请使用`customRender`
      */
-    customRenderFormItem?: (config: EditableColumnType<ValueType, RecordType>) => any;
+    customRenderFormItem?: (config: EditableColumnType<RecordType, ValueType>) => any;
     /**
      * 指定值类型（将会用于普通列和可编辑表格的渲染）
      */
-    valueType?: keyof ApTableValueFields;
+    valueType?: ValueType;
     /**
      * 值类型额外配置的参数（支持函数）
      */
@@ -39,14 +41,29 @@ export type EditableColumnType<ValueType extends keyof ApTableValueFields = 'tex
         record: RecordType;
         index: number;
         renderIndex: number;
-        column: EditableColumnType<ValueType, RecordType>;
+        column: EditableColumnType<RecordType, ValueType>;
     }) => ApTableValueFields[ValueType]);
-};
+    /**
+     * 自定义渲染，添加了`editable`以及`originalNode`
+     * @param opt
+     * @returns
+     */
+    customRender?: (opt: {
+        value: any;
+        text: any;
+        record: RecordType;
+        index: number;
+        renderIndex: number;
+        column: ColumnType<RecordType>;
+        editable?: boolean;
+        originalNode?: VNode;
+    }) => any;
+} : never;
 export type EditableTableProps<RecordType = any> = Omit<TableProps<RecordType>, 'columns' | 'dataSource'> & {
     /**
      * 列配置
      */
-    columns?: EditableColumnType<any, RecordType>[];
+    columns?: EditableColumnType<RecordType, any>[];
     /**
      * 表格数据v-model
      */

package/lib/src/editable-table/style/index.css

@@ -1,12 +1,5 @@
-.aplus-editable-table .ant-table-cell:has(> .ant-form-item) {
-  padding-top: 20px !important;
-  padding-bottom: 0 !important;
-}
 .aplus-editable-table .ant-form-item {
-  margin-bottom: 20px;
-}
-.aplus-editable-table .ant-form-item-explain-error {
-  line-height: 20px;
+  margin-bottom: 0px;
 }
 .aplus-editable-table__header-cell--required {
   color: #FF4D4F;
@@ -44,3 +37,9 @@
 .aplus-editable-table-admin tr > td.ant-table-cell {
   border-top-color: #E9E9E9;
 }
+.aplus-editable-table .ant-table-middle .ant-table-cell {
+  padding: 12px 16px !important;
+}
+.aplus-editable-table .ant-table-small .ant-table-cell {
+  padding: 9px 16px !important;
+}

package/lib/src/theme/antd-global-overwrite/admin/index.css

@@ -157,7 +157,7 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   vertical-align: -0.18em;
   margin-inline-end: 9px;
 }
-.ant-modal-root .ant-modal-close {
+.ant-modal-root .ant-modal .ant-modal-close {
   top: 0;
   right: 0;
   width: auto;
@@ -167,28 +167,28 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   outline: none;
   cursor: default;
 }
-.ant-modal-root .ant-modal-close:hover {
+.ant-modal-root .ant-modal .ant-modal-close:hover {
   color: #666666;
   background-color: transparent;
 }
-.ant-modal-root .ant-modal-close-x {
+.ant-modal-root .ant-modal .ant-modal-close-x {
   display: inline-block;
   width: 96px;
   height: 54px;
   line-height: 54px;
   text-align: start;
 }
-.ant-modal-root .ant-modal-close-x > div {
+.ant-modal-root .ant-modal .ant-modal-close-x > div {
   height: 100%;
 }
-.ant-modal-root .ant-modal-close-x > span {
+.ant-modal-root .ant-modal .ant-modal-close-x > span {
   display: inline-block;
   margin-left: 48px;
   padding: 10px;
   cursor: pointer;
   transition: all 0.2s;
 }
-.ant-modal-root .ant-modal-close-x > span:hover {
+.ant-modal-root .ant-modal .ant-modal-close-x > span:hover {
   color: #ed6f6f;
 }
 .ant-modal-root .ant-modal .ant-modal-content {

package/lib/src/theme/antd-global-overwrite/admin/modal.css

@@ -1,4 +1,4 @@
-.ant-modal-root .ant-modal-close {
+.ant-modal-root .ant-modal .ant-modal-close {
   top: 0;
   right: 0;
   width: auto;
@@ -8,28 +8,28 @@
   outline: none;
   cursor: default;
 }
-.ant-modal-root .ant-modal-close:hover {
+.ant-modal-root .ant-modal .ant-modal-close:hover {
   color: #666666;
   background-color: transparent;
 }
-.ant-modal-root .ant-modal-close-x {
+.ant-modal-root .ant-modal .ant-modal-close-x {
   display: inline-block;
   width: 96px;
   height: 54px;
   line-height: 54px;
   text-align: start;
 }
-.ant-modal-root .ant-modal-close-x > div {
+.ant-modal-root .ant-modal .ant-modal-close-x > div {
   height: 100%;
 }
-.ant-modal-root .ant-modal-close-x > span {
+.ant-modal-root .ant-modal .ant-modal-close-x > span {
   display: inline-block;
   margin-left: 48px;
   padding: 10px;
   cursor: pointer;
   transition: all 0.2s;
 }
-.ant-modal-root .ant-modal-close-x > span:hover {
+.ant-modal-root .ant-modal .ant-modal-close-x > span:hover {
   color: #ed6f6f;
 }
 .ant-modal-root .ant-modal .ant-modal-content {

package/lib/src/theme/antd-global-overwrite/aplus/index.css

@@ -182,7 +182,7 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   vertical-align: -0.18em;
   margin-inline-end: 9px;
 }
-.ant-modal-root .ant-modal-close {
+.ant-modal-root .ant-modal .ant-modal-close {
   top: 0;
   right: 0;
   width: auto;
@@ -192,28 +192,28 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   outline: none;
   cursor: default;
 }
-.ant-modal-root .ant-modal-close:hover {
+.ant-modal-root .ant-modal .ant-modal-close:hover {
   color: #8796b0;
   background-color: transparent;
 }
-.ant-modal-root .ant-modal-close-x {
+.ant-modal-root .ant-modal .ant-modal-close-x {
   display: inline-block;
   width: 96px;
   height: 54px;
   line-height: 54px;
   text-align: start;
 }
-.ant-modal-root .ant-modal-close-x > div {
+.ant-modal-root .ant-modal .ant-modal-close-x > div {
   height: 100%;
 }
-.ant-modal-root .ant-modal-close-x > span {
+.ant-modal-root .ant-modal .ant-modal-close-x > span {
   display: inline-block;
   margin-left: 48px;
   padding: 10px;
   cursor: pointer;
   transition: all 0.2s;
 }
-.ant-modal-root .ant-modal-close-x > span:hover {
+.ant-modal-root .ant-modal .ant-modal-close-x > span:hover {
   color: #ed6f6f;
 }
 .ant-modal-root .ant-modal .ant-modal-content {

package/lib/src/theme/antd-global-overwrite/aplus/modal.css

@@ -1,4 +1,4 @@
-.ant-modal-root .ant-modal-close {
+.ant-modal-root .ant-modal .ant-modal-close {
   top: 0;
   right: 0;
   width: auto;
@@ -8,28 +8,28 @@
   outline: none;
   cursor: default;
 }
-.ant-modal-root .ant-modal-close:hover {
+.ant-modal-root .ant-modal .ant-modal-close:hover {
   color: #8796b0;
   background-color: transparent;
 }
-.ant-modal-root .ant-modal-close-x {
+.ant-modal-root .ant-modal .ant-modal-close-x {
   display: inline-block;
   width: 96px;
   height: 54px;
   line-height: 54px;
   text-align: start;
 }
-.ant-modal-root .ant-modal-close-x > div {
+.ant-modal-root .ant-modal .ant-modal-close-x > div {
   height: 100%;
 }
-.ant-modal-root .ant-modal-close-x > span {
+.ant-modal-root .ant-modal .ant-modal-close-x > span {
   display: inline-block;
   margin-left: 48px;
   padding: 10px;
   cursor: pointer;
   transition: all 0.2s;
 }
-.ant-modal-root .ant-modal-close-x > span:hover {
+.ant-modal-root .ant-modal .ant-modal-close-x > span:hover {
   color: #ed6f6f;
 }
 .ant-modal-root .ant-modal .ant-modal-content {

package/lib/src/theme/ap-table/ap-table.css

@@ -72,3 +72,9 @@
 .aplus-ap-table-table-admin tr > td.ant-table-cell {
   border-top-color: #E9E9E9;
 }
+.aplus-ap-table .ant-table-middle .ant-table-cell {
+  padding: 12px 16px !important;
+}
+.aplus-ap-table .ant-table-small .ant-table-cell {
+  padding: 9px 16px !important;
+}

package/lib/src/theme/ap-title/ap-title.css

@@ -1,7 +1,7 @@
 .aplus-ap-title {
   position: relative;
   width: 100%;
-  height: 32px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -12,17 +12,12 @@
   position: absolute;
   content: '';
   left: 0;
-  top: 6px;
+  top: 2px;
   width: 3px;
-  height: 20px;
+  height: 16px;
   background: #0070ff;
   border-radius: 0px 4px 4px 0px;
-}
-.aplus-ap-title--aplus::before {
-  background: #0070ff;
-}
-.aplus-ap-title--admin::before {
-  background: #34b77c;
+  z-index: 1;
 }
 .aplus-ap-title__prefix {
   font-weight: bold;
@@ -34,6 +29,31 @@
   margin-left: 5px;
   color: #8896b0;
 }
+.aplus-ap-title--admin {
+  height: 22px;
+  padding-left: 14px;
+}
+.aplus-ap-title--admin::before {
+  top: 7px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #34b77c;
+  background: #fff;
+  z-index: 1;
+}
+.aplus-ap-title--admin .aplus-ap-title__prefix {
+  font-weight: bold;
+  color: #333;
+  display: flex;
+  align-items: center;
+}
+.aplus-ap-title--admin .aplus-ap-title__prefix .anticon-question-circle {
+  margin-left: 5px;
+  color: #8896b0;
+}
 .aplus-ap-title__suffix {
   color: #526a90;
 }

package/lib/src/theme/editable-table/index.css

@@ -1,12 +1,5 @@
-.aplus-editable-table .ant-table-cell:has(> .ant-form-item) {
-  padding-top: 20px !important;
-  padding-bottom: 0 !important;
-}
 .aplus-editable-table .ant-form-item {
-  margin-bottom: 20px;
-}
-.aplus-editable-table .ant-form-item-explain-error {
-  line-height: 20px;
+  margin-bottom: 0px;
 }
 .aplus-editable-table__header-cell--required {
   color: #FF4D4F;
@@ -44,3 +37,9 @@
 .aplus-editable-table-admin tr > td.ant-table-cell {
   border-top-color: #E9E9E9;
 }
+.aplus-editable-table .ant-table-middle .ant-table-cell {
+  padding: 12px 16px !important;
+}
+.aplus-editable-table .ant-table-small .ant-table-cell {
+  padding: 9px 16px !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aplus-frontend/ui",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "files": [