plain-design 1.0.0-beta.17 → 1.0.0-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.19",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -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.169",
+    "plain-design-composition": "^0.0.170-beta.1",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/components/AutoTable/use/useTableOption.methods.tsx

@@ -161,6 +161,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
       }
     };
     const reload = async (reloadParam?: { size?: number }) => {
+      if (!state.isInit) {state.isInit = true;}
       await load({
         page: 1,
         size: reloadParam?.size,
@@ -488,6 +489,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
   })();
 
   hooks.onTableSetup.use(() => {
+    if (state.isInit) {return;}
     if (config.loadOnStart !== false) {pageMethods.reload();}
   });
 

package/src/packages/components/AutoTable/use/useTableOption.state.tsx

@@ -14,6 +14,7 @@ declare module '../utils/TableOption.space' {
 
 export const useTableOptionState = AutoModule.createRegistration(({ config, hooks }) => {
   const state: TableOptionSpace.iTableOptionState = reactive({
+    isInit: false,
     getTable: () => null,
     getAutoTable: () => null,
     list: [],

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -118,6 +118,7 @@ export namespace TableOptionSpace {
    * @date    2023/2/7 9:47
    */
   export interface iTableOptionState {
+    isInit: boolean,
     getTable: () => null | iTableRefer,
     getAutoTable: () => null | iAutoTableRefer;
     list: PlainObject[],

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

@@ -34,6 +34,7 @@ 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(),
@@ -42,6 +43,7 @@ export const RenderTreeNode = designComponent({
 
     const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
     const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
+    const isLeaf = cacheComputed(() => props.treeNode.isLeaf());
 
     const connectorClassesList = computed(() => {
 

package/src/packages/components/Tree/tree.scss

@@ -193,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);
     }
   }

package/src/packages/components/TreeCore/createTreeProps.ts

@@ -32,7 +32,7 @@ export const TreePropsOptions = {
   customDraggier: { type: Boolean as PropType<iTreeProps["customDraggier"]> },
   isAllowDraggable: { type: Function as PropType<iTreeProps["isAllowDraggable"]> },
   isAllowDroppable: { type: Function as PropType<iTreeProps["isAllowDroppable"]> },
-  leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-file' as string },
+  leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-drive-file' as string },
   folderCollapseIcon: { type: String as PropType<iTreeProps["folderCollapseIcon"]>, default: 'pi-caret-right' as string },
   folderExpandIcon: { type: String as PropType<iTreeProps["folderExpandIcon"]>, default: 'pi-down' as string },
   expanderCover: { type: Boolean as PropType<iTreeProps["expanderCover"]>, default: true },

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

@@ -69,7 +69,7 @@ export const TreeNodeWithMenu = designComponent({
                 v-slots={{
                   default: () => btn,
                   popper: () => (
-                    props.dropdownOptions!.map((option, index) => {
+                    props.dropdownOptions?.map((option, index) => {
                       const { renderDefault, renderContent, ...leftOption } = option;
                       const vSlots = {} as any;
                       if (!!renderDefault) {vSlots.default = () => renderDefault();}

package/src/packages/components/useDialog/DialogService.tsx

@@ -10,6 +10,7 @@ import Icon from "../Icon";
 import {ThemeStatusIcons} from "../Application/theme/theme.utils";
 import Input from "../Input";
 import InputNumber from "../InputNumber";
+import $message from "../$message";
 
 /**
  * 弹框服务单个组件
@@ -133,7 +134,15 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
         const dialogProps = { ...targetOption.value.dialogProps };
 
         /*wrap handleConfirm*/
-        dialogProps.handleConfirm = async (close: () => void) => targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
+        dialogProps.handleConfirm = async (close: () => void) => {
+          if (!!targetOption.value.customOption.editRequired) {
+            if (state.editValue == null || !state.editValue.trim().length) {
+              $message.warn('不能为空！');
+              return false;
+            }
+          }
+          return targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
+        };
 
         /*wrap onClose*/
         dialogProps.onClose = () => onClose.exec(undefined);
@@ -165,6 +174,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;
@@ -176,6 +186,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;
@@ -189,6 +200,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;

package/src/packages/uses/useEdit.ts

@@ -74,6 +74,10 @@ export const useEdit = useFunctionWrapper(
       }
     }
 
+    onBeforeUnmount(() => {
+      editComputed.effect.stop();
+    });
+
     return {
       editState,
       editComputed,

package/src/packages/uses/useStyle.tsx

@@ -1,4 +1,4 @@
-import {computed, inject, PropType, provide} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, PropType, provide} from "plain-design-composition";
 import {useFunctionWrapper} from "./useFunctionWrapper";
 import {createEnum} from "plain-utils/utils/createEnum";
 import {ApplicationConfigurationProvider} from "../components/Application/utils/application.utils";
@@ -62,6 +62,14 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
 
   provide(USE_STYLE_PROVIDER, styleComputed);
 
+  onBeforeUnmount(() => {
+    setTimeout(() => {
+      (styleComputed.value as any).ctx = null;
+      (styleComputed.value as any).parent = null;
+      styleComputed.effect.stop();
+    });
+  });
+
   return { styleComputed };
 });
 

package/src/pages/index/components/AutoTable/AutoHeightAutoRow.tsx

@@ -1,14 +1,19 @@
 import {designPage} from "plain-design-composition";
 import {useTableOption} from "../../../module/useTableOption";
 import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
+import TableOptionSpace from "../../../../packages/components/TableOptionSpace";
+
+let option: TableOptionSpace.iTableOption;
 
 export const demo1 = designPage(() => {
 
-  const option = useTableOption({
-    url: '/demo',
-    showRowsMode: 'auto',
-    fill: true,
-  });
+  if (!option) {
+    option = useTableOption({
+      url: '/demo',
+      showRowsMode: 'auto',
+      fill: true,
+    });
+  }
 
 
   const onClick = () => {

package/src/pages/index/components/service/DemoDialogService.tsx

@@ -195,6 +195,7 @@ export const demoInput = designPage(() => {
       <Button label={'input'} onClick={() => $dialog({
         editType: 'input',
         editValue: inputValue,
+        editRequired: true,
         handleConfirm: ({ editValue }) => {
           inputValue = editValue;
           $message(String(editValue));