plain-design 1.0.0-beta.22 → 1.0.0-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.24",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -19,7 +19,7 @@
   "peerDependencies": {
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
-    "plain-design-composition": "^0.0.169",
+    "plain-design-composition": "^0.0.177",
     "react": "^18.0.1",
     "react-dom": "^18.0.1"
   },
@@ -68,7 +68,7 @@
     "fork-ts-checker-webpack-plugin": "^6.2.4",
     "mini-css-extract-plugin": "^1.4.1",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "^0.0.170-beta.1",
+    "plain-design-composition": "^0.0.177",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/components/CascadePanel/list/CascadeListPanelItem.tsx

@@ -59,13 +59,13 @@ export const CascadeListPanelItem = designComponent({
               return (
                 <VirtualList data={props.treeNodes} size={CascadePanelVirtualSize[panel.styleComputed.value.size]} dynamicSize>
                   {{
-                    default: ({ item: treeNode, index, virtualIndex }: { item: iTreeNode, index: number, virtualIndex: number }) => (
+                    default: ({ item: treeNode, index, vIndex, vid }: { item: iTreeNode, index: number, vIndex: number, vid: string }) => (
                       <CascadeListPanelNode
-                        data-vid={index}
+                        data-vid={vid}
                         treeNode={treeNode}
                         treeNodes={props.treeNodes}
                         index={index}
-                        key={virtualIndex}
+                        key={vIndex}
                         handleClickNode={props.handleClickNode}
                         {...props.nodeAttrs}
                       >

package/src/packages/components/Select/createPublicSelectRender.tsx

@@ -236,7 +236,7 @@ export function createPublicSelectRender(
                   const { virtualRowSize } = props;
                   return virtualRowSize == null ? SelectDefaultVirtualRowSize[styleComputed.value.size] : virtualRowSize;
                 })()}>
-                  {{ default: ({ item, index }: { item: iSelectOptionProps, index: number }) => <SelectOption {...item} index={index} key={index}/> }}
+                  {{ default: ({ item, index, vIndex }: { item: iSelectOptionProps, index: number, vIndex: number }) => <SelectOption {...item} index={index} key={vIndex}/> }}
                 </VirtualList>
               </div>) : (
                 matchOptionPropsList.map((i, index) => (<SelectOption {...i} index={index}/>))

package/src/packages/components/Table/standard/PlcExpand.tsx

@@ -65,9 +65,9 @@ export const PlcExpand = designComponent({
        * @author  韦胜健
        * @date    2022/11/17 10:46
        */
-      renderExpand: (node: iTableNode) => {
+      renderExpand: (node: iTableNode, vIndex: number, vid: string, index: number) => {
         return (
-          <tr className="plt-row plt-expand-row" key={`expand_${node.state.index}`}>
+          <tr className="plt-row plt-expand-row" key={`expand_${table.props.virtualRowType === 'virtualIndex' ? vIndex : index}`} data-vid={vid}>
             <td className="plt-cell" rowSpan={1} colSpan={totalSpan.value}>
               <div className="plt-expand-body" style={expandStyles.value}>
                 {scopeSlots.expand({ node, row: node.data })}
@@ -128,29 +128,21 @@ export const PlcExpand = designComponent({
       },
     };
 
-    /**
-     * 不允许启用行虚拟滚动
-     * @author  韦胜健
-     * @date    2022/11/17 13:56
-     */
-    onBeforeUnmount(table.hooks.onEnableVirtual.use(() => false));
-
     /**
      * 拦截行渲染
      * @author  韦胜健
      * @date    2022/11/17 14:15
      */
-    onBeforeUnmount(table.hooks.onRenderRow.use((scope) => {
-      const { node, row, content } = scope;
-      if (!utils.isExpand(row)) {return;}
-      return {
-        node,
-        row,
-        content: <>
-          {content}
-          {utils.renderExpand(node)}
-        </>
-      };
+    onBeforeUnmount(table.hooks.onTableMessyData.use(({ data }) => {
+      const newData = [] as any[];
+      data.forEach(item => {
+        newData.push(item);
+        if (typeof item === "function") {return;}
+        if (utils.isExpand(item.data)) {
+          newData.push((param: any) => utils.renderExpand(item, param.vIndex, param.vid, param.index));
+        }
+      });
+      return { data: newData };
     }));
 
     /**

package/src/packages/components/Table/table/Table.tsx

@@ -108,6 +108,8 @@ export const Table = designComponent({
      */
     const { bodyNodes, summaryNodes } = useTableNode({ props, formValidator, dataRef });
 
+    const tableBodyNodes = computed(() => hooks.onTableMessyData.exec({ data: [...bodyNodes.value] }).data);
+
     const showRows = computed((): number => {
       const bodyRows = bodyNodes.value.length;
       if (props.showRows === 'auto') {
@@ -323,9 +325,10 @@ export const Table = designComponent({
               <VirtualTable
                 ref={onRefVirtual}
                 height={tableHeight.value || undefined}
-                data={bodyNodes.value}
+                data={tableBodyNodes.value}
                 headData={plcData.value?.headPlcListArray}
                 size={numberState.bodyRowHeight}
+                dynamicSize={props.dynamicSize}
                 headSize={numberState.headRowHeight}
                 width={plcData.value!.targetTableWidth!}
                 summaryData={summaryNodes.value}
@@ -351,8 +354,12 @@ export const Table = designComponent({
                       </tr>
                     ))
                   ),
-                  default: ({ item, index, virtualIndex }) => (
-                    <PltRow table={refer} node={item} vid={index} key={virtualIndex}/>
+                  default: ({ item, vid, vIndex, index }) => (
+                    typeof item !== "function" ? (
+                      <PltRow table={refer} node={item} vid={vid} key={props.virtualRowType === 'virtualIndex' ? vIndex : index}/>
+                    ) : (
+                      item({ vid, vIndex, index })
+                    )
                   ),
                 }}
               />

package/src/packages/components/Table/table/utils/createTableHooks.ts

@@ -1,6 +1,6 @@
 import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "plain-design-composition";
 import {tPlcType} from "../../plc/utils/plc.utils";
-import {iTableNode} from "./table.utils";
+import {iTableMessyData, iTableNode} from "./table.utils";
 import {PlainObject} from "plain-utils/utils/event";
 import {VirtualTable} from "../../../VirtualTable";
 
@@ -52,6 +52,8 @@ export const createTableHooks = () => {
     onRenderRow: createSyncHooks<(scope: { node: iTableNode, row: any, content: RenderNode }) => void>(),
     /*表格数据*/
     onData: createSyncHooks<(scope: { data: PlainObject[] | undefined }) => void>(true),
+    /*表格渲染行数据（其中的行数据不一定是tableNode）*/
+    onTableMessyData: createSyncHooks<(scope: { data: iTableMessyData[] }) => void>(true),
     /*处理行样式*/
     onRowClass: createSyncHooks<(data: { node: iTableNode, classList: any[] }) => void>(true),
     /*鼠标移动经过row时*/

package/src/packages/components/Table/table/utils/table.utils.ts

@@ -1,5 +1,5 @@
 import {StyleProps, ThemeSize} from "../../../../uses/useStyle";
-import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, StyleProperties, tSlotsType} from "plain-design-composition";
+import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, RenderNode, StyleProperties, tSlotsType} from "plain-design-composition";
 import {PlainObject} from "plain-utils/utils/event";
 import {eFormValidateTrigger, iFormValidatePropsType, iValidateResult} from "../../../Form/validate/validate.utils";
 import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
@@ -28,7 +28,9 @@ export const TablePropsOptions = {
   headRowHeight: { type: [String, Number] },                            // 表头行高
   bodyRowHeight: { type: [String, Number] },                            // 表体行高
   virtual: { type: Boolean },                                           // 开启虚拟行滚动
+  virtualRowType: { type: String as PropType<'virtualIndex' | 'realIndex'>, }, // 虚拟滚动的行渲染类型，virtualIndex意思为使用虚拟的行索引作为key渲染行，好处是虚拟滚动时完全复用行组件实例；realIndex意味着虚拟滚动时新的行会重新初始化
   virtualColumn: { type: Boolean },                                     // 开启虚拟列滚动
+  dynamicSize: { type: Boolean },                                       // 行虚拟滚动时启用动态高度
   colDraggable: { type: Boolean },                                      // 列是否可拖拽移动
   rowDraggable: { type: Boolean },                                      // 行是否可以拖拽移动
   sort: { type: [Object, Array] as PropType<TablePropsSort> },          // 当前排序字段
@@ -130,6 +132,9 @@ export interface iTableNode {
   saveEdit: (newRow?: PlainObject) => Promise<void>,  // 保存编辑，将editRow以及newRow（请求得到的新对象）覆盖data
 }
 
+export type iTableMessyRender = (data: { vIndex: number, vid: string }) => RenderNode
+export type iTableMessyData = iTableNode | iTableMessyRender
+
 /**
  * 创建table node节点数据
  * @author  韦胜健

package/src/packages/components/ThemeEditor/index.tsx

@@ -0,0 +1,160 @@
+import './theme-editor.scss';
+import {designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
+import Icon from "../Icon";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {unit} from "plain-utils/string/unit";
+import {Select} from '../Select';
+import {SelectOption} from "../SelectOption";
+import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
+import ClientZoom from "../ClientZoom";
+import {addWindowListener} from 'plain-utils/dom/addWindowListener';
+
+export const ThemeEditor = designComponent({
+  name: 'theme-editor',
+  props: {
+    bottom: { type: Number, default: 55 }
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const state = reactive({
+      isExpand: false,
+
+      size: PageThemeUtils.state.size || 'normal',
+      dark: PageThemeUtils.state.dark ? 'dark' : 'light',
+      shape: PageThemeUtils.state.shape || 'square',
+      zoom: PageThemeUtils.state.zoom || null,
+      primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
+      inputMode: PageThemeUtils.state.inputMode || 'flat',
+    });
+
+    const applicationConfiguration = ApplicationConfigurationProvider.inject();
+
+    const classes = useClasses(() => [
+      getComponentCls('theme-editor'),
+      {
+        'is-expand': state.isExpand
+      }
+    ]);
+
+    const styles = useStyles((style) => {
+      style.bottom = unit(props.bottom);
+    });
+
+    const handler = {
+      handleClickInner: () => {state.isExpand = !state.isExpand;},
+      onSizeChange: () => {PageThemeUtils.size(state.size);},
+      onShapeChange: () => {PageThemeUtils.shape(state.shape);},
+      onZoomChange: () => {
+        PageThemeUtils.zoom(state.zoom);
+        ClientZoom.set(state.zoom);
+      },
+      onDarkChange: () => {
+        const val = !state.dark ? false : state.dark === 'dark';
+        PageThemeUtils.toggle(val);
+      },
+      onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
+      onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
+    };
+
+    const publicPopperAttrs = {};
+
+    onBeforeUnmount(
+      addWindowListener('click', (e) => {
+        if (!refs.el?.contains(e.target as HTMLElement) && !!state.isExpand) {
+          state.isExpand = false;
+        }
+      })
+    );
+
+    return () => (
+      <div className={classes.value} style={styles.value} ref={onRef.el}>
+        <div className="theme-editor-inner" onClick={handler.handleClickInner}>
+          <Icon icon={state.isExpand ? 'pi-close' : applicationConfiguration.value.theme.dark ? 'pi-moon-fill' : 'pi-sun-fill'}/>
+        </div>
+        {state.isExpand && (
+          <div className="theme-editor-form">
+            <div>
+              <div>输入框类型</div>
+              <div>
+                <Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" placeholder="输入框" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label="输入框:填充" val="flat"/>
+                  <SelectOption label="输入框:描边" val="stroke"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>主题颜色</div>
+              <div>
+                <Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" placeholder="主题色" popperAttrs={publicPopperAttrs}>
+                  {Object.entries(ThemePrimaryColors).map(([key, value]) => (
+                    <SelectOption label={value!.label} val={key} key={key}>
+                      {!!value!.primary && <span style={{ height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', background: value!.primary }}/>}
+                      <span>{value!.label}</span>
+                    </SelectOption>
+                  ))}
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>大小尺寸</div>
+              <div>
+                <Select v-model={state.size} onChange={handler.onSizeChange} size="mini" placeholder="主题尺寸" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label="大尺寸" val="large"/>
+                  <SelectOption label="中等尺寸" val="normal"/>
+                  <SelectOption label="小尺寸" val="small"/>
+                  <SelectOption label="极小尺寸" val="mini"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>黑白主题</div>
+              <div>
+                <Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" placeholder="黑白主题" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label="黑色主题" val="dark"/>
+                  <SelectOption label="白色主题" val="light"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>圆角类型</div>
+              <div>
+                <Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" placeholder="圆角类型" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label="圆角" val="round"/>
+                  <SelectOption label="小圆角" val="square"/>
+                  <SelectOption label="无圆角" val="none"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>大小缩放</div>
+              <Select v-model={state.zoom} onChange={handler.onZoomChange} size="mini" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
+                <SelectOption label="0.6" val={0.6}/>
+                <SelectOption label="0.7" val={0.7}/>
+                <SelectOption label="0.8" val={0.8}/>
+                <SelectOption label="0.9" val={0.9}/>
+                <SelectOption label="1.0" val={null}/>
+                <SelectOption label="1.1" val={1.1}/>
+                <SelectOption label="1.2" val={1.2}/>
+                <SelectOption label="1.3" val={1.3}/>
+                <SelectOption label="1.4" val={1.4}/>
+                <SelectOption label="1.5" val={1.5}/>
+                <SelectOption label="1.6" val={1.6}/>
+                <SelectOption label="1.7" val={1.7}/>
+                <SelectOption label="1.8" val={1.8}/>
+                <SelectOption label="1.9" val={1.9}/>
+                <SelectOption label="2.0" val={2.0}/>
+              </Select>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/src/packages/components/ThemeEditor/theme-editor.scss

@@ -0,0 +1,94 @@
+@include comp(theme-editor) {
+  position: fixed;
+  right: 0;
+  border-right: none;
+  padding: 5px 10px 5px 5px;
+  border-top-left-radius: 999px;
+  border-bottom-left-radius: 999px;
+  box-sizing: border-box;
+  transition: all ease 300ms;
+  overflow-y: hidden;
+  z-index: 99999;
+
+  &:before {
+    content: '';
+    background-color: plv(primary-light-2);
+    border-radius: inherit;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .theme-editor-inner {
+    position: absolute;
+    z-index: 1;
+    bottom: 5px;
+    right: 10px;
+    cursor: pointer;
+    height: calc(#{plv(box-size-normal-height)} * 1.5);
+    width: calc(#{plv(box-size-normal-height)} * 1.5);
+    border-radius: calc(#{plv(box-size-normal-height)} * 1.5);
+    background-color: plv(primary-6);
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    transition: all ease 300ms;
+  }
+
+  &.is-expand {
+    width: 300px;
+    height: 260px;
+    border-top-left-radius: plv(box-size-normal-border-radius);
+    border-bottom-left-radius: plv(box-size-normal-border-radius);
+
+    &:before {
+      background-color: plv(background-color);
+      border: solid 1px plv(border-color);
+    }
+
+    .theme-editor-inner {
+      border-radius: plv(box-size-normal-border-radius);
+      background-color: transparent;
+      color: plv(text-2);
+
+      &:hover {
+        background-color: plv(secondary-2);
+      }
+    }
+  }
+
+  &:not(.is-expand) {
+    width: calc(#{plv(box-size-normal-height)} * 1.5 + 15px);
+    height: calc(#{plv(box-size-normal-height)} * 1.5 + 10px);
+  }
+
+  .theme-editor-form {
+    padding: 8px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+
+    & > div {
+      width: calc(50% - 4px);
+      font-size: 12px;
+      color: plv(text-2);
+      margin-bottom: 20px;
+
+      &:nth-child(2n) {
+        margin-left: 8px;
+      }
+
+      & > div {
+        &:first-child {
+          margin-left: 10px;
+          margin-bottom: 4px;
+        }
+      }
+    }
+  }
+}

package/src/packages/components/Tree/RenderTreeNode.tsx

@@ -11,7 +11,7 @@ export const RenderTreeNode = designComponent({
   props: {
     multiple: { type: Boolean },
     treeNode: { type: Object as PropType<iTreeNode>, required: true },
-    dataVid: { type: Number },
+    dataVid: { type: String },
   },
   setup({ props }) {
 

package/src/packages/components/Tree/index.tsx

@@ -92,9 +92,9 @@ export const Tree = designComponent({
                 return (
                   <VirtualList data={treeCore.flatNodeComputedData.value} ref={treeCore.onRef.list} size={props.virtualSize != null ? props.virtualSize : TreeSizeToRowHeight[styleComputed.value.size]} dynamicSize={props.virtualDynamicSize}>
                     {{
-                      content: ({ data }: { data: { item: iTreeNode, index: number }[] }) => (
+                      content: ({ data }: { data: { item: iTreeNode, index: number, vIndex: number, vid: string }[] }) => (
                         <div className="tree-node-list">
-                          {data.map(({ item }, flatIndex) => <RenderTreeNode key={flatIndex} treeNode={item} dataVid={item.flatIndex} multiple={props.multiple}/>)}
+                          {data.map(({ item, vid }, flatIndex) => <RenderTreeNode key={flatIndex} treeNode={item} dataVid={vid} multiple={props.multiple}/>)}
                         </div>
                       )
                     }}
@@ -104,7 +104,7 @@ export const Tree = designComponent({
                 const content = (
                   <div className="tree-node-list">
                     {treeCore.flatNodeComputedData.value.map((item) => (
-                      <RenderTreeNode key={item.key} treeNode={item} dataVid={item.flatIndex} multiple={props.multiple}/>
+                      <RenderTreeNode key={item.key} treeNode={item} dataVid={item.key} multiple={props.multiple}/>
                     ))}
                   </div>
                 );

package/src/packages/components/VirtualList/index.tsx

@@ -19,7 +19,7 @@ export const VirtualList = designComponent({
     onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
   },
   scopeSlots: {
-    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
+    default: (scope: { item: any, index: number, vid: string, vIndex: number }) => {},
     content: (scope: { data: any[] }) => {},
   },
   setup({ props, scopeSlots, event: { emit } }) {
@@ -48,8 +48,8 @@ export const VirtualList = designComponent({
               <div className="virtual-list-content" style={virtual.contentStyles.value} ref={onRef.content}>
                 {scopeSlots.content.isExist() ?
                   scopeSlots.content({ data: list }, null) :
-                  list.map((node, virtualIndex) =>
-                    scopeSlots.default({ item: node.item, index: node.index, virtualIndex })
+                  list.map((node, vIndex) =>
+                    scopeSlots.default({ item: node.item, index: node.index, vid: node.id, vIndex })
                   )}
               </div>
             </div>