plain-design 0.0.68 → 0.0.72

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "plain-design",
-  "version": "0.0.68",
+  "version": "0.0.72",
   "description": "",
   "main": "dist/plain-design.min.js",
+  "module": "dist/plain-design.commonjs.min.js",
   "typings": "src/index.ts",
   "files": [
     "dist",

package/src/packages/PlAddress/index.tsx

@@ -16,6 +16,7 @@ import PlSelectOption from "../PlSelectOption";
 let watchParentChange = false
 
 export const PlAddress = designComponent({
+    name: 'pl-address',
     props: {
         ...EditProps,
         ...StyleProps,

package/src/packages/PlColorButton/color-button.scss

@@ -1,25 +1,26 @@
 @include theme {
-    .pl-color-button {
-        border-radius: 2px;
-        height: 24px;
-        width: 24px;
-        border: solid 1px $ibc;
-        padding: 2px;
-        box-sizing: border-box;
-        display: inline-block;
-        cursor: pointer;
+  .pl-color-button {
+    border-radius: 2px;
+    height: 24px;
+    width: 24px;
+    border: solid 1px $ibc;
+    padding: 2px;
+    box-sizing: border-box;
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: middle;
 
-        .pl-color-button-background {
-            background-size: 7px 7px;
-            border-radius: 2px;
-            box-sizing: border-box;
-            height: 100%;
-            width: 100%;
+    .pl-color-button-background {
+      background-size: 7px 7px;
+      border-radius: 2px;
+      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
 
-            .pl-color-button-color {
-                height: 100%;
-                width: 100%;
-            }
-        }
+      .pl-color-button-color {
+        height: 100%;
+        width: 100%;
+      }
     }
-}
+  }
+}

package/src/packages/PlFormItem/index.tsx

@@ -191,7 +191,7 @@ export const PlFormItem = designComponent({
                         )}
                         {!!invalidate.value && !form.props.hideValidateMessage && (
                             <div className="pl-form-item-message">
-                                <PlIcon icon="el-icon-error" status="error"/>
+                                <PlIcon icon="el-icon-warning" status="error"/>
                                 <span>{invalidate.value.message}</span>
                             </div>
                         )}

package/src/packages/PlIcon/index.tsx

@@ -42,6 +42,7 @@ registry('el-icon-', async (icon) => {
 })
 
 export const PlIcon = designComponent({
+    name: 'pl-icon',
     props: {
         icon: {type: String},                       // 图标名称
         status: {type: String},                     // 图标状态
@@ -91,4 +92,4 @@ export const PlIcon = designComponent({
     },
 })
 
-export default PlIcon
+export default PlIcon

package/src/packages/PlInputGroup/index.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import './input-group.scss'
 
 export const PlInputGroup = designComponent({
+    name: 'pl-input-group',
     props: {
         block: {type: Boolean}
     },
@@ -22,4 +23,4 @@ export const PlInputGroup = designComponent({
     },
 })
 
-export default PlInputGroup
+export default PlInputGroup

package/src/packages/PlLoading/index.tsx

@@ -6,6 +6,7 @@ import {useClasses} from "plain-design-composition";
 import './loading.scss'
 
 export const PlLoading = designComponent({
+    name: 'pl-loading',
     props: {
         type: {type: String, default: 'alpha'},
         status: {type: String, default: null},
@@ -42,4 +43,4 @@ export const PlLoading = designComponent({
     },
 })
 
-export default PlLoading
+export default PlLoading

package/src/packages/PlObject/index.tsx

@@ -17,6 +17,7 @@ export const PlObjectPropsOption = {
 }
 
 export const PlObject = designComponent({
+    name: 'pl-object',
     props: {
         ...EditProps,
         ...StyleProps,

package/src/packages/PlOv/index.tsx

@@ -8,6 +8,7 @@ import useOv from "../useOv";
 import PlSelectOption from "../PlSelectOption";
 
 export const PlOv = designComponent({
+    name: 'pl-ov',
     props: {
         ...EditProps,
         ...StyleProps,

package/src/packages/PlSelect/index.tsx

@@ -298,7 +298,7 @@ export const PlSelect = designComponent({
                                 placeholder={inputBinding.value.placeholder!}
                                 default={({item, index}: { item: SelectOption, index: number }) => (
                                     <React.Fragment key={index}>
-                                        <span>{item.props.label}</span>,
+                                        <span>{item.props.label}</span>
                                         <PlIcon icon="el-icon-close" {...createEventListener({onClick: () => handler.onClickItemCloseIcon(item, index)})}/>
                                     </React.Fragment>
                                 )}

package/src/packages/PlTab/index.tsx

@@ -4,6 +4,7 @@ import {TabCollector} from "../PlTabs";
 import React from 'react';
 
 export const PlTab = designComponent({
+    name: 'pl-tab',
     inheritAttrs: false,
     props: {
         title: {type: String},                              // 页签标题

package/src/packages/PlTable/plc/standard/plc-expand.tsx

@@ -12,6 +12,7 @@ import {PlcScopeSlotsOptions} from "../utils/plc.scope-slots";
 import {useExternalPlc} from "../core/useExternalPlc";
 
 export default designComponent({
+    name: 'plc-expand',
     props: {
         ...createPlcPropOptions({
             autoFixedLeft: true,
@@ -109,4 +110,4 @@ export default designComponent({
             render,
         }
     },
-})
+})

package/src/packages/PlTable/table.scss

@@ -383,6 +383,10 @@
   .plt-cell {
     & > * {
       vertical-align: middle;
+
+      &.pl-icon {
+        vertical-align: middle;
+      }
     }
 
     & > .pl-input {

package/src/packages/PlTablePro/index.tsx

@@ -6,6 +6,7 @@ import {iTableProRenderConfig} from "../createUseTableOption/use/use.hooks";
 import PlLoadingMask from "../PlLoadingMask";
 
 export const PlTablePro = designComponent({
+    name: 'pl-table-pro',
     props: {
         option: {type: Object as PropType<tTableOption>, required: true},
         loading: {type: Boolean},

package/src/packages/PlTabs/index.tsx

@@ -10,6 +10,7 @@ import {PlTabsHeaderVertical} from "./header/vertical/TabsHeaderVertical";
 import PlIcon from "../PlIcon";
 
 export const PlTabs = designComponent({
+    name: 'pl-tabs',
     props: {
         modelValue: {type: [String, Number]},                   // 双向绑定值，控制当前显示的tab
         closeable: {type: Boolean},                             // 是否显示关闭按钮，会派发onClose事件

package/src/packages/PlTree/tree.scss

@@ -52,6 +52,8 @@
         }
 
         & > * {
+          display: flex;
+          align-items: center;
           margin-right: 8px;
           color: $colorPrimary;
           user-select: none;
@@ -98,4 +100,4 @@
       }
     }
   }
-}
+}

package/src/packages/PlcAddress/index.tsx

@@ -9,6 +9,7 @@ import {tDefaultFilterConfigParam} from "../PlFilter/FilterConfig";
 import {iAddressService} from "../useAddress/useAddress.utils";
 
 export const PlcAddress = designComponent({
+    name: 'plc-address',
     props: {
         ...PlcPropsOptions,
         filterName: {type: String, default: 'address'},

package/src/packages/PlcImage/index.tsx

@@ -10,6 +10,7 @@ import PlImageUploader from "../PlImageUploader";
 import {$$image} from "../../index";
 
 export const PlcImage = designComponent({
+    name: 'plc-image',
     props: {
         ...PlcPropsOptions,
         ...PlObjectPropsOption,
@@ -86,4 +87,4 @@ export const PlcImage = designComponent({
     },
 })
 
-export default PlcImage
+export default PlcImage

package/src/packages/PlcObject/index.tsx

@@ -6,6 +6,7 @@ import {useExternalPlc} from "../PlTable/plc/core/useExternalPlc";
 import React from "react";
 
 export const PlcObject = designComponent({
+    name: 'plc-object',
     props: {
         ...PlcPropsOptions,
         ...PlObjectPropsOption,

package/src/packages/PlcOperator/index.tsx

@@ -10,6 +10,7 @@ import React from "react";
  * @date    2021/7/15 21:56
  */
 export const PlcOperator = designComponent({
+    name: 'plc-operator',
     props: {
         ...createPlcPropOptions({
             fixed: 'right',
@@ -41,4 +42,4 @@ export const PlcOperator = designComponent({
     },
 })
 
-export default PlcOperator
+export default PlcOperator

package/src/packages/PlcOv/index.tsx

@@ -10,6 +10,7 @@ import {tDefaultFilterConfigParam} from "../PlFilter/FilterConfig";
 import {iOvService} from "../useOv/useOv.utils";
 
 export const PlcOv = designComponent({
+    name: 'plc-ov',
     props: {
         ...PlcPropsOptions,
         ...PlObjectPropsOption,

package/src/packages/createUseTableOption/index.tsx

@@ -17,6 +17,7 @@ import {iFilterData} from "../PlFilter/FilterConfig";
 import {useTableOptionSortState} from "./use/use.sort.state";
 import {useTableOptionFilterState} from "./use/use.filter.state";
 import {useTableOptionCache} from "./use/use.cache";
+import {PlcIndex} from "../PlcIndex";
 
 export function createUseTableOption<D = any>(defaultConfig: iTableProDefaultConfig) {
     return (customConfig: iTableProConfig<D>) => {
@@ -134,6 +135,8 @@ export function createUseTableOption<D = any>(defaultConfig: iTableProDefaultCon
         /*收集config.render中的列信息*/
         hooks.onColumns.use((prev) => {
             return <>
+                {/*适配 plain-ui 本来是放use.base-table里边的*/}
+                <PlcIndex start={pagination.pageState.page * pagination.pageState.size}/>
                 {prev}
                 {!!config.render && config.render()}
             </>

package/src/packages/createUseTableOption/use/filter/useDistinctFilter.tsx

@@ -12,7 +12,7 @@ import {tTableOptionHooks} from "../use.hooks";
 import {toArray} from "../../../../utils/toArray";
 import {tTableOptionMethods} from "../use.methods";
 import {tPlTable} from "../../../PlTable";
-import {findRreactElement} from "../../../../utils/findReactElement";
+import {findReactElement} from "../../../../utils/findReactElement";
 import {tTableOptionFilter} from "../use.filter.state";
 import PlButton from "../../../PlButton";
 import {TableNode} from "../../../PlTable/table/use/useTableNode";
@@ -179,7 +179,7 @@ export function useTableOptionDistinctFilter({hooks, methods, customConfig, filt
         const sortData = await hooks.onCollectSortData.exec([])
 
         const tableSlots = freezeState.baseTableRef()!.slots.default()
-        const findReactNode = findRreactElement(tableSlots, ({props: {title, field}}) => title === plc.props.title && field === plc.props.field)
+        const findReactNode = findReactElement(tableSlots, ({props: {title, field}}) => title === plc.props.title && field === plc.props.field)
         // console.log({tableSlots, findReactNode,})
 
         const Content = designPage(() => {

package/src/packages/createUseTableOption/use/use.base-table.tsx

@@ -56,7 +56,6 @@ export function useTableOptionBaseTable(
                     sort={sortState.sortQueryData.value}
                     onCollectPlcData={hooks.onCollectPlcData.exec}
                 >
-                    <PlcIndex start={pagination.pageState.page * pagination.pageState.size}/>
                     {hooks.onColumns.exec([])}
                 </PlTable>
             )

package/src/packages/createUseTableOption/use/use.methods.tsx

@@ -205,6 +205,8 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
 
             const editInline = async () => {
                 tableState.editingWhenAddRow = true
+                /*适配 plain-ui*/
+                await nextTick()
                 tableState.list.unshift(newRowData)
                 await nextTick()
                 const newNode = freezeState.table.flatNodes.value[0]
@@ -271,6 +273,8 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
             newRows = await Promise.all(newRows.map((item) => hooks.onHandleNewRow.exec(item)))
 
             tableState.editingWhenAddRow = true
+            /*适配 plain-ui*/
+            await nextTick()
             tableState.list.unshift(...newRows)
             await nextTick()
             const newNodes = freezeState.table.flatNodes.value.slice(0, newRows.length)

package/src/packages/createUseTableOption/use/use.paginaiton.tsx

@@ -1,4 +1,4 @@
-import {computed, reactive} from "plain-design-composition";
+import {computed, nextTick, reactive} from "plain-design-composition";
 import {tTableOptionConfig} from "../createUseTableOption.utils";
 import PlPagination from "../../PlPagination";
 import React from "react";
@@ -68,7 +68,8 @@ export function useTableOptionPagination({tableState, config, hooks, onPrev, onN
             }),
             new Promise<number>((resolve) => {
                 const eject = hooks.onRefTable.use((baseTable) => {
-                    resolve(baseTable.refs.el!.offsetHeight)
+                    /*nextTick 为适配plain-ui，否则此时 el.offsetHeight 高度为0*/
+                    nextTick().then(() => resolve(baseTable.refs.el!.offsetHeight))
                     eject()
                 })
             })

package/src/packages/useMessage/PlMessage.scss

@@ -54,7 +54,7 @@
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
-    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
     position: relative;
 
     .pl-icon {