plain-design 1.0.0-beta.3 → 1.0.0-beta.31

package/src/packages/components/Table/table/use/useTableDraggier.row.tsx

@@ -9,6 +9,7 @@ import {hasClass} from "plain-utils/dom/hasClass";
 import {addClass} from "plain-utils/dom/addClass";
 import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierRow(
   {
@@ -85,9 +86,10 @@ export function useTableDraggierRow(
     };
     let prevClientY = 0;
     const update = (e?: MouseEvent) => {
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
       const moveIndex = (() => {
         const hostRect = staticState!.bodyHostEl.getBoundingClientRect();
-        let index = Math.floor((((e?.clientY || prevClientY) - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
+        let index = Math.floor(((clientY - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
         if (index < 0) {index = 0;}
         if (index > bodyNodes.value.length - 1) {
           index = bodyNodes.value.length - 1;
@@ -95,7 +97,7 @@ export function useTableDraggierRow(
         return index;
       })();
       if (moveIndex !== move.state.index) {move.state.index = moveIndex;}
-      if (!!e) {prevClientY = e.clientY;}
+      if (!!e) {prevClientY = clientY;}
     };
     return { state, update, start, get staticState() {return staticState;} };
   })();
@@ -188,9 +190,10 @@ export function useTableDraggierRow(
     };
 
     const start = (e: iMouseEvent, node: iTableNode) => {
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
       const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
       const rowRect = rowEl.getBoundingClientRect();
-      staticState = { startY: e.clientY, startTop: rowRect.top, node, rowEl, data: null, };
+      staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
       /*清理状态*/
       draggierEffects.push(() => {staticState = null;});
     };
@@ -199,11 +202,13 @@ export function useTableDraggierRow(
     const update = (e?: MouseEvent) => {
       if (!staticState) {return;}
 
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
+
       let isDragging = !!staticState.data;
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientY - staticState.startY) > 5) {
+        if (!!e && Math.abs(clientY - staticState.startY) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -214,7 +219,7 @@ export function useTableDraggierRow(
         return;
       }
 
-      const durY = (e?.clientY || prevClientY) - staticState.startY;
+      const durY = clientY - staticState.startY;
       let top = staticState.startTop + durY;
       const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
       if (top < minTop) {
@@ -229,7 +234,7 @@ export function useTableDraggierRow(
 
       staticState.data!.cloneRowEl.style.top = `${top}px`;
       if (!!e) {
-        prevClientY = e.clientY;
+        prevClientY = clientY;
       }
 
       /*更细move 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,172 @@
+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);
+        if (val && state.primaryKey === 'dark') {
+          state.primaryKey = 'light';
+          handler.onPrimaryChange();
+        } else if (!val && state.primaryKey === 'light') {
+          state.primaryKey = 'dark';
+          handler.onPrimaryChange();
+        }
+      },
+      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;
+        }
+      })
+    );
+
+    const publicBlockStyles = { height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', border: `solid 1px var(--${getComponentCls('secondary-3')})` };
+
+    return () => (
+      <div className={classes.value} style={styles.value} ref={onRef.el}>
+        <div className="theme-editor-inner" onClick={handler.handleClickInner}>
+          <div className="theme-editor-inner-cover"/>
+          <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}>
+                      <div className={getComponentCls('theme-editor-block-item')}>
+                        {!!value!.primary && <span style={{ ...publicBlockStyles, background: value!.primary }}/>}
+                        <span>{value!.label}</span>
+                      </div>
+                    </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,105 @@
+@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: plv(pbfc);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    transition: all ease 300ms;
+
+    .theme-editor-inner-cover {
+      position: absolute;
+      inset: 0;
+      user-select: none;
+    }
+  }
+
+  &.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;
+        }
+      }
+    }
+  }
+}
+
+@include comp(theme-editor-block-item){
+  display: flex;
+  align-items: center;
+}

package/src/packages/components/ThemePrimaryColors/index.ts

@@ -0,0 +1,5 @@
+import {ThemePrimaryColors} from "../PageThemeUtils";
+
+export default ThemePrimaryColors;
+
+export {ThemePrimaryColors};

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 }) {
 
@@ -34,13 +34,16 @@ export const RenderTreeNode = designComponent({
       getComponentCls('tree-node'),
       {
         'tree-node-current': tree.state.current === props.treeNode.key,
+        'tree-node-lead': isLeaf.value,
         'tree-node-single-check': !props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
+        'tree-node-multi-check': props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
         'tree-node-disable-check': !props.treeNode.isCheckAble(),
       }
     ]);
 
     const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
     const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
+    const isLeaf = cacheComputed(() => props.treeNode.isLeaf());
 
     const connectorClassesList = computed(() => {
 
@@ -89,6 +92,7 @@ export const RenderTreeNode = designComponent({
        */
       onClickNodeContent: () => {
         if (props.treeNode.empty) {return;}
+        if (tree.draggier.value?.isDragging()) {return;}
         tree.hooks.onClickNodeContent.exec({ treeNode: props.treeNode, el: refs.el! });
       },
       /**
@@ -124,7 +128,7 @@ export const RenderTreeNode = designComponent({
                 />
             }
           </div>
-          {tree.props.draggable && (
+          {tree.props.draggable && !tree.props.customDraggier && (
             <div
               className={classnames(['tree-node-draggier', { 'tree-node-draggier-disable': !tree.utils.isAllowDraggable(props.treeNode) }])}
               onMouseDown={handler.onMousedownDraggier.value}

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/Tree/tree.scss

@@ -3,6 +3,7 @@
   align-items: center;
   line-height: 22px;
   padding-bottom: 1px;
+  position: relative;
 
   .tree-node-operator > div, .tree-node-content {
     transition: background-color linear 150ms, color linear 150ms;
@@ -88,19 +89,43 @@
   .tree-node-content {
     padding: 5px 8px;
     color: plv(text-2);
+  }
 
-    &:hover {
+  .tree-node-operator, .tree-node-content {
+    position: relative;
+    z-index: 2;
+  }
+
+  &:after {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    border-radius: plv(border-radius-normal);
+    content: '';
+    transition: background-color ease 0.3s;
+  }
+
+  &:hover:not(.tree-node-current):not(.tree-node-single-check) {
+    cursor: pointer;
+
+    &:after {
       background-color: plv(background-hover);
-      cursor: pointer;
+      content: '';
     }
   }
 
-  &.tree-node-current, &.tree-node-single-check {
-    .tree-node-content {
-      &, &:hover {
-        background-color: plv(primary-light-1);
-        color: plv(primary-6);
-      }
+  &.tree-node-current, &.tree-node-single-check, &.tree-node-multi-check {
+
+    .tree-node-operator, .tree-node-content {
+      color: plv(primary-6);
+    }
+
+    &:after {
+      background-color: plv(primary-light-1);
+      content: '';
     }
   }
 
@@ -168,9 +193,16 @@
   }
 
   &.tree-expander-cover {
+    @include comp(tree-node) {
+      &:not(.tree-node-lead) {
+        .tree-node-expander {
+          background-color: plv(secondary-2);
+        }
+      }
+    }
+
     .tree-node-expander {
       border-radius: 2px;
-      background-color: plv(secondary-2);
       transform: scale(0.75);
     }
   }
@@ -216,6 +248,7 @@
 @include comp(tree-draggier-indicator) {
   position: fixed;
   pointer-events: none;
+  z-index: 10;
 
   &[data-available=true] {
     background-color: plv(primary-6);

package/src/packages/components/TreeCore/TreeCore.type.tsx

@@ -63,6 +63,8 @@ export interface iTreeProps {
   getNodeIcon?: (node: iTreeNode) => string,
   /*是否开启拖拽节点功能*/
   draggable?: boolean,
+  /*自定义draggier按钮*/
+  customDraggier?: boolean,
   /*判断节点是否可以拖拽*/
   isAllowDraggable?: (treeNode: iTreeNode) => boolean | void,
   /*判断节点是否可以放置*/

package/src/packages/components/TreeCore/createTreeCore.tsx

@@ -327,7 +327,11 @@ export function createTreeCore(
     hooks.onClickExpandIcon.use(({ treeNode }) => {methods.toggleExpand(treeNode);})
   );
   effects.push(
-    hooks.onClickNodeContent.use(({ treeNode }) => {methods.singleSelect(treeNode);})
+    hooks.onClickNodeContent.use(({ treeNode }) => {
+      methods.singleSelect(treeNode);
+      if (props.expandOnClickNode) {methods.toggleExpand(treeNode);}
+      if (props.checkOnClickNode) {methods.toggleCheck(treeNode);}
+    })
   );
   effects.push(
     hooks.onClickCheckbox.use(({ treeNode }) => {