plain-design 1.0.0-beta.4 → 1.0.0-beta.6

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

@@ -1,215 +1,215 @@
-import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
-import {closeDialogServiceHook, destroyDialogServiceHook, dialogCustomOptionKeys, DialogServiceEditType, iDialogServiceCustomOption, iDialogServiceOption} from "./dialog.service.utils";
-import {computed, createHooks, getComponentCls, reactive, ref, toRaw, useRefs} from "plain-design-composition";
-import {Dialog} from "../Dialog";
-import {i18n} from "../../i18n";
-import {DialogAlign, DialogCloseType, DialogPositions} from "../Dialog/utils/dialog.utils";
-import './dialog-service.scss';
-import {Button} from "../Button";
-import Icon from "../Icon";
-import {ThemeStatusIcons} from "../Application/theme/theme.utils";
-import Input from "../Input";
-import InputNumber from "../InputNumber";
-
-/**
- * 弹框服务单个组件
- * @author  韦胜健
- * @date    2022.5.3 14:29
- */
-export const DialogService = createApplicationServiceComponent<iDialogServiceOption>({
-  name: 'dialog-service',
-  setup: ({ option, destroy }) => {
-
-    const onClose = createHooks<() => void>();
-
-    const { refs, onRef } = useRefs({ input: Input, number: InputNumber, });
-
-    const isShow = ref(false);
-    const isOpen = ref(false);
-
-    const state = reactive({
-      option,
-      editValue: null as any,
-    });
-
-    const targetOption = computed(() => {
-      const customOption: iDialogServiceCustomOption = {};
-      const dialogProps: Partial<typeof Dialog.use.props> = {};
-      Object.keys(state.option).forEach((key) => {
-        if (dialogCustomOptionKeys.indexOf(key) > -1) {
-          (customOption as any)[key] = (state.option as any)[key];
-        } else {
-          (dialogProps as any)[key] = (state.option as any)[key];
-        }
-      });
-      if (!dialogProps.position) {dialogProps.position = DialogPositions.center;}
-
-      /**
-       * 以下设置只会在弹框为居中位置的时候才会启用
-       * @author  韦胜健
-       * @date    2022.5.4 21:54
-       */
-      if (dialogProps.position === DialogPositions.center) {
-        if (!dialogProps.headAlign) {dialogProps.headAlign = DialogAlign.center;}
-        if (!dialogProps.contentAlign) {dialogProps.contentAlign = DialogAlign.center;}
-        if (!dialogProps.footAlign) {dialogProps.footAlign = DialogAlign.center;}
-        if (dialogProps.closeType === undefined) {dialogProps.closeType = DialogCloseType.triangle;}
-        if (dialogProps.maxWidth == null) {dialogProps.maxWidth = '50vw';}
-        if (dialogProps.maxHeight == null) {dialogProps.maxHeight = '80vh';}
-        if (dialogProps.movable == null) {dialogProps.movable = true;}
-      }
-
-      dialogProps.externalClass = `${dialogProps.externalClass || ''} ${getComponentCls('dialog-service')}`.trim();
-      if (!!customOption.status) {dialogProps.externalClass = `${dialogProps.externalClass || ''} dialog-service-status-${customOption.status}`;}
-      return {
-        customOption,
-        dialogProps,
-      };
-    });
-
-    async function service(option: iDialogServiceOption) {
-      state.option = option;
-      state.editValue = option.editValue;
-      isShow.value = true;
-    }
-
-    function hide() {isShow.value = false;}
-
-    /**
-     * 关闭dialog service观察者对象，没有id表示关闭所有弹框服务
-     * @author  韦胜健
-     * @date    2022.5.4 21:46
-     */
-    closeDialogServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());});
-
-    /**
-     * 销毁dialog service观察者对象，用来销毁hold类型的服务
-     * @author  韦胜健
-     * @date    2022/6/2 18:00
-     */
-    destroyDialogServiceHook.use(opt => {
-      if (opt === state.option || opt === toRaw(state.option)) {
-        if (!isOpen.value) {
-          /*如果已经关闭，则直接销毁*/
-          destroy();
-        } else {
-          /*没有关闭则等待关闭之后销毁*/
-          isShow.value = false;
-          const eject = onClose.use(() => {
-            eject();
-            destroy();
-          });
-        }
-      }
-    });
-
-    onClose.use(() => {
-      targetOption.value.dialogProps.onClose?.();
-      /*如果服务为持有服务，则关闭时不销毁*/
-      !targetOption.value.customOption.hold && destroy();
-    });
-
-    return {
-      refer: {
-        service,
-        hide,
-        isShow,
-        isOpen,
-      },
-      render: () => {
-        /*---------------------------------------head-------------------------------------------*/
-        const head = () => (
-          <div className="dialog-service-head">
-            {!!targetOption.value.customOption.status && <Icon icon={ThemeStatusIcons[targetOption.value.customOption.status]}/>}
-            <span>{targetOption.value.dialogProps.title || i18n('base.defaultTitle').d('提示')}</span>
-          </div>
-        );
-        /*---------------------------------------foot-------------------------------------------*/
-        const foot = () => !targetOption.value.dialogProps.confirmButton && !targetOption.value.dialogProps.cancelButton && (
-          <Button mode="fill" label={i18n('base.close').d('关闭')} onClick={hide} status={targetOption.value.customOption.status || undefined}/>
-        );
-        /*---------------------------------------default-------------------------------------------*/
-        let defaultSlot = null as any;
-        const dialogProps = { ...targetOption.value.dialogProps };
-
-        /*wrap handleConfirm*/
-        dialogProps.handleConfirm = async (close: () => void) => targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
-
-        /*wrap onClose*/
-        dialogProps.onClose = () => onClose.exec(undefined);
-
-        /*wrap onOpen*/
-        const { onOpen } = dialogProps;
-        dialogProps.onOpen = () => {
-          onOpen?.();
-          refs.input?.focus();
-          refs.number?.focus();
-        };
-
-        /*wrap onEnter*/
-        const { editType } = targetOption.value.customOption;
-        const onEnter = async () => {
-          const flag = await targetOption.value.customOption.handleConfirm?.({ editValue: state.editValue, close: hide });
-          if (flag === false) {
-            return;
-          }
-          hide();
-        };
-
-        switch (editType) {
-          case DialogServiceEditType.input:
-            defaultSlot = (
-              <Input
-                width="300px"
-                ref={onRef.input}
-                v-model={state.editValue}
-                readonly={option.editReadonly}
-                onEnter={onEnter}
-              />
-            );
-            break;
-          case DialogServiceEditType.number:
-            defaultSlot = (
-              <InputNumber
-                width="300"
-                ref={onRef.number}
-                v-model={state.editValue}
-                readonly={option.editReadonly}
-                onEnter={onEnter}
-              />
-            );
-            break;
-          case DialogServiceEditType.textarea:
-            defaultSlot = (
-              <Input
-                ref={onRef.input}
-                height="300px"
-                width="400px"
-                textarea
-                v-model={state.editValue}
-                readonly={option.editReadonly}
-                onEnter={onEnter}
-              />
-            );
-            break;
-          default:
-            defaultSlot = targetOption.value.customOption.render?.() || targetOption.value.customOption.message;
-            break;
-        }
-
-        return (
-          <Dialog
-            {...dialogProps}
-            v-model={isShow.value}
-            v-model:open={isOpen.value}>
-            {{
-              head,
-              foot,
-              default: () => defaultSlot,
-            }}
-          </Dialog>
-        );
-      }
-    };
-  },
-});
+import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
+import {closeDialogServiceHook, destroyDialogServiceHook, dialogCustomOptionKeys, DialogServiceEditType, iDialogServiceCustomOption, iDialogServiceOption} from "./dialog.service.utils";
+import {computed, createHooks, getComponentCls, reactive, ref, toRaw, useRefs} from "plain-design-composition";
+import {Dialog} from "../Dialog";
+import {i18n} from "../../i18n";
+import {DialogAlign, DialogCloseType, DialogPositions} from "../Dialog/utils/dialog.utils";
+import './dialog-service.scss';
+import {Button} from "../Button";
+import Icon from "../Icon";
+import {ThemeStatusIcons} from "../Application/theme/theme.utils";
+import Input from "../Input";
+import InputNumber from "../InputNumber";
+
+/**
+ * 弹框服务单个组件
+ * @author  韦胜健
+ * @date    2022.5.3 14:29
+ */
+export const DialogService = createApplicationServiceComponent<iDialogServiceOption>({
+  name: 'dialog-service',
+  setup: ({ option, destroy }) => {
+
+    const onClose = createHooks<() => void>();
+
+    const { refs, onRef } = useRefs({ input: Input, number: InputNumber, });
+
+    const isShow = ref(false);
+    const isOpen = ref(false);
+
+    const state = reactive({
+      option,
+      editValue: null as any,
+    });
+
+    const targetOption = computed(() => {
+      const customOption: iDialogServiceCustomOption = {};
+      const dialogProps: Partial<typeof Dialog.use.props> = {};
+      Object.keys(state.option).forEach((key) => {
+        if (dialogCustomOptionKeys.indexOf(key) > -1) {
+          (customOption as any)[key] = (state.option as any)[key];
+        } else {
+          (dialogProps as any)[key] = (state.option as any)[key];
+        }
+      });
+      if (!dialogProps.position) {dialogProps.position = DialogPositions.center;}
+
+      /**
+       * 以下设置只会在弹框为居中位置的时候才会启用
+       * @author  韦胜健
+       * @date    2022.5.4 21:54
+       */
+      if (dialogProps.position === DialogPositions.center) {
+        if (!dialogProps.headAlign) {dialogProps.headAlign = DialogAlign.center;}
+        if (!dialogProps.contentAlign) {dialogProps.contentAlign = DialogAlign.center;}
+        if (!dialogProps.footAlign) {dialogProps.footAlign = DialogAlign.center;}
+        if (dialogProps.closeType === undefined) {dialogProps.closeType = DialogCloseType.triangle;}
+        if (dialogProps.maxWidth == null) {dialogProps.maxWidth = '50vw';}
+        if (dialogProps.maxHeight == null) {dialogProps.maxHeight = '80vh';}
+        if (dialogProps.movable == null) {dialogProps.movable = true;}
+      }
+
+      dialogProps.externalClass = `${dialogProps.externalClass || ''} ${getComponentCls('dialog-service')}`.trim();
+      if (!!customOption.status) {dialogProps.externalClass = `${dialogProps.externalClass || ''} dialog-service-status-${customOption.status}`;}
+      return {
+        customOption,
+        dialogProps,
+      };
+    });
+
+    async function service(option: iDialogServiceOption) {
+      state.option = option;
+      state.editValue = option.editValue;
+      isShow.value = true;
+    }
+
+    function hide() {isShow.value = false;}
+
+    /**
+     * 关闭dialog service观察者对象，没有id表示关闭所有弹框服务
+     * @author  韦胜健
+     * @date    2022.5.4 21:46
+     */
+    closeDialogServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());});
+
+    /**
+     * 销毁dialog service观察者对象，用来销毁hold类型的服务
+     * @author  韦胜健
+     * @date    2022/6/2 18:00
+     */
+    destroyDialogServiceHook.use(opt => {
+      if (opt === state.option || opt === toRaw(state.option)) {
+        if (!isOpen.value) {
+          /*如果已经关闭，则直接销毁*/
+          destroy();
+        } else {
+          /*没有关闭则等待关闭之后销毁*/
+          isShow.value = false;
+          const eject = onClose.use(() => {
+            eject();
+            destroy();
+          });
+        }
+      }
+    });
+
+    onClose.use(() => {
+      targetOption.value.dialogProps.onClose?.();
+      /*如果服务为持有服务，则关闭时不销毁*/
+      !targetOption.value.customOption.hold && destroy();
+    });
+
+    return {
+      refer: {
+        service,
+        hide,
+        isShow,
+        isOpen,
+      },
+      render: () => {
+        /*---------------------------------------head-------------------------------------------*/
+        const head = () => (
+          <div className="dialog-service-head">
+            {!!targetOption.value.customOption.status && <Icon icon={ThemeStatusIcons[targetOption.value.customOption.status]}/>}
+            <span>{targetOption.value.dialogProps.title || i18n('base.defaultTitle').d('提示')}</span>
+          </div>
+        );
+        /*---------------------------------------foot-------------------------------------------*/
+        const foot = () => !targetOption.value.dialogProps.confirmButton && !targetOption.value.dialogProps.cancelButton && (
+          <Button mode="fill" label={i18n('base.close').d('关闭')} onClick={hide} status={targetOption.value.customOption.status || undefined}/>
+        );
+        /*---------------------------------------default-------------------------------------------*/
+        let defaultSlot = null as any;
+        const dialogProps = { ...targetOption.value.dialogProps };
+
+        /*wrap handleConfirm*/
+        dialogProps.handleConfirm = async (close: () => void) => targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
+
+        /*wrap onClose*/
+        dialogProps.onClose = () => onClose.exec(undefined);
+
+        /*wrap onOpen*/
+        const { onOpen } = dialogProps;
+        dialogProps.onOpen = () => {
+          onOpen?.();
+          refs.input?.focus();
+          refs.number?.focus();
+        };
+
+        /*wrap onEnter*/
+        const { editType } = targetOption.value.customOption;
+        const onEnter = async () => {
+          const flag = await targetOption.value.customOption.handleConfirm?.({ editValue: state.editValue, close: hide });
+          if (flag === false) {
+            return;
+          }
+          hide();
+        };
+
+        switch (editType) {
+          case DialogServiceEditType.input:
+            defaultSlot = (
+              <Input
+                width="300px"
+                ref={onRef.input}
+                v-model={state.editValue}
+                readonly={option.editReadonly}
+                onEnter={onEnter}
+              />
+            );
+            break;
+          case DialogServiceEditType.number:
+            defaultSlot = (
+              <InputNumber
+                width="300"
+                ref={onRef.number}
+                v-model={state.editValue}
+                readonly={option.editReadonly}
+                onEnter={onEnter}
+              />
+            );
+            break;
+          case DialogServiceEditType.textarea:
+            defaultSlot = (
+              <Input
+                ref={onRef.input}
+                height="300px"
+                width="400px"
+                textarea
+                v-model={state.editValue}
+                readonly={option.editReadonly}
+                onEnter={onEnter}
+              />
+            );
+            break;
+          default:
+            defaultSlot = targetOption.value.customOption.render?.() || targetOption.value.customOption.message;
+            break;
+        }
+
+        return (
+          <Dialog
+            {...dialogProps}
+            v-model={isShow.value}
+            v-model:open={isOpen.value}>
+            {{
+              head,
+              foot,
+              default: () => defaultSlot,
+            }}
+          </Dialog>
+        );
+      }
+    };
+  },
+});

package/src/packages/components/useDialog/dialog-service.scss

@@ -1,50 +1,50 @@
-@include prefix(dialog-service) {
-  &.dialog-position-center {
-    & > .dialog-content {
-      .dialog-head {
-        border-bottom: initial;
-
-        .dialog-service-head {
-          font-size: plv('font-size-large');
-          font-weight: 700;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-
-          @include prefix('icon') {
-            font-size: 48px;
-            margin-bottom: 0.25em;
-          }
-        }
-      }
-
-      .dialog-foot {
-        border-top: initial;
-      }
-    }
-
-    @include statusMixin(dialog-service) {
-      & > .dialog-content {
-        .dialog-head {
-          height: auto;
-          padding-top: 8px;
-
-          .dialog-service-head {
-            @include comp(icon) {
-              color: $color-6;
-            }
-          }
-
-          .dialog-head-close {
-            &:hover {
-
-              &:after {
-                background-color: $color-6;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@include prefix(dialog-service) {
+  &.dialog-position-center {
+    & > .dialog-content {
+      .dialog-head {
+        border-bottom: initial;
+
+        .dialog-service-head {
+          font-size: plv('font-size-large');
+          font-weight: 700;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          @include prefix('icon') {
+            font-size: 48px;
+            margin-bottom: 0.25em;
+          }
+        }
+      }
+
+      .dialog-foot {
+        border-top: initial;
+      }
+    }
+
+    @include statusMixin(dialog-service) {
+      & > .dialog-content {
+        .dialog-head {
+          height: auto;
+          padding-top: 8px;
+
+          .dialog-service-head {
+            @include comp(icon) {
+              color: $color-6;
+            }
+          }
+
+          .dialog-head-close {
+            &:hover {
+
+              &:after {
+                background-color: $color-6;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}