plain-design 3.0.1 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -46,7 +46,7 @@
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@peryl/react-compose": "0.0.225",
+    "@peryl/react-compose": "0.0.229",
     "@peryl/utils": "0.1.73",
     "@types/classnames": "^2.2.11",
     "@types/node": "^20.8.6",

package/src/packages/components/$file/index.tsx

@@ -3,10 +3,17 @@ import {$message} from "../$message";
 import i18n from "../i18n";
 import $configuration from "../$configuration";
 import {createSimpleDate} from "../createSimpleDate";
+import {createEffects} from "@peryl/utils/createEffects";
+import {addElementListener} from "@peryl/utils/addElementListener";
+import {addWindowListener} from "@peryl/utils/addWindowListener";
+import {delay} from "@peryl/utils/delay";
 
+/*单个文件对象数据类型*/
 export type FileServiceSingleFile = File & { calcSize: number, data?: any }
+/*文件自定义校验函数类型*/
 export type FileServiceValidator = (file: FileServiceSingleFile) => boolean | undefined
 
+/*选择文件时的参数类型*/
 export type FileServiceChooseFileConfig = {
   multiple?: boolean,                 // 是否多选
   accept?: string,                    // 选择的文件类型， input组件的accept属性值
@@ -14,6 +21,7 @@ export type FileServiceChooseFileConfig = {
   max?: number,                       // 最大文件大小
 }
 
+/*文件上传失败时的数据类型*/
 export type FileServiceUploadErrorEvent = Error & {
   status: number,
   method: string,
@@ -21,6 +29,7 @@ export type FileServiceUploadErrorEvent = Error & {
   config: FileServiceUploadConfig,
 }
 
+/*文件上传方法参数类型*/
 export type FileServiceUploadConfig = {
   action: string,                             // 上传地址
   file: File | File[],                        // 上传的文件
@@ -33,6 +42,7 @@ export type FileServiceUploadConfig = {
   onError?: (e: FileServiceUploadErrorEvent | ProgressEvent) => void,
 }
 
+/*选择文件类型的内置文件类型别名*/
 export const FileServiceDefaultAccept = {
   // image: 'image/gif, image/jpeg, image/png, image/jpg',
   image: 'bmp,jpg,jpeg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif'.split(',').map(i => `image/${i}`).join(', '),
@@ -41,6 +51,9 @@ export const FileServiceDefaultAccept = {
 
 export function createFileService() {
 
+  /*选择文件副作用对象，每次选择文件之后都需要清理掉选择文件时产生的副作用*/
+  const { effects: chooseEffects } = createEffects();
+
   /**
    * 选择文件
    * @author  韦胜健
@@ -48,51 +61,84 @@ export function createFileService() {
    */
   const chooseFile = (config?: FileServiceChooseFileConfig) => {
     config = config || {};
-    const input = getInput();
-
-    /*multiple*/
-    if (config.multiple) {
-      input.setAttribute('multiple', 'multiple');
-    } else {
-      input.removeAttribute('multiple');
-    }
-    /*accept*/
-    if (!!config.accept) {
-      const defaultInputAccept = FileServiceDefaultAccept[config.accept];
-      input.setAttribute('accept', defaultInputAccept || config.accept);
-    } else {
-      input.removeAttribute('accept');
-    }
+    chooseEffects.clear();
+    const inputElement = (() => {
+      const input = getInput();
+      /*multiple*/
+      if (config.multiple) {
+        input.setAttribute('multiple', 'multiple');
+      } else {
+        input.removeAttribute('multiple');
+      }
+      /*accept*/
+      if (!!config.accept) {
+        const defaultInputAccept = FileServiceDefaultAccept[config.accept];
+        input.setAttribute('accept', defaultInputAccept || config.accept);
+      } else {
+        input.removeAttribute('accept');
+      }
+      return input;
+    })();
     const dfd = defer<FileServiceSingleFile | FileServiceSingleFile[]>();
 
-    if (!!input.__change) {
-      input.value = null as any;
-      input.removeEventListener('change', input.__change);
-    }
-    input.__change = (e) => {
-      const targetFiles = (e as any).target.files as FileServiceSingleFile[];
-      const files = [];
-      for (let i = 0; i < targetFiles.length; i++) {
-        const file = targetFiles[i];
-        file.calcSize = Number((file.size / (1024 * 1024)).toFixed(2));
-        if (!!config!.validator && !config!.validator(file)) return;
-        if (!!config!.max && file.calcSize > config!.max) {
-          return $message.error(
-            i18n.$it('file.oversize', { filename: file.name, filesize: file.calcSize, max: config!.max }).d(`[${file.name}]大小为${file.calcSize}MB，超过最大限制${config!.max}MB`),
-            { time: 5000 });
+    chooseEffects.clear();
+
+    const resolve = (value: FileServiceSingleFile | FileServiceSingleFile[]) => {
+      dfd.resolve(value);
+      chooseEffects.clear();
+    };
+
+    const reject = (reason: string) => {
+      dfd.reject(reason);
+      chooseEffects.clear();
+    };
+
+    const handlers = {
+      /*input变化之后说明用户选择了文件*/
+      onInputChange: (e: Event) => {
+        const targetFiles = (e as any).target.files as FileServiceSingleFile[];
+        const files = [];
+        for (let i = 0; i < targetFiles.length; i++) {
+          const file = targetFiles[i];
+          file.calcSize = Number((file.size / (1024 * 1024)).toFixed(2));
+          if (!!config!.validator && !config!.validator(file)) {
+            reject("File validator failed.");
+            return;
+          }
+          if (!!config!.max && file.calcSize > config!.max) {
+            reject("File size unavailable.");
+            return $message.error(
+              i18n.$it('file.oversize', { filename: file.name, filesize: file.calcSize, max: config!.max }).d(`[${file.name}]大小为${file.calcSize}MB，超过最大限制${config!.max}MB`),
+              { time: 5000 }
+            );
+          }
+          files.push(file);
         }
-        files.push(file);
+        resolve(config!.multiple ? files : files[0]);
+      },
+      /*
+      window focus之后，不论用户选择了文件还是取消选择文件，
+      都会触发浏览器窗口的focus方法，
+      这里主要用来处理用户取消选择文件时的处理动作
+      取消选择文件时调用dfd的reject方法
+      */
+      onWindowFocus: async () => {
+        await delay(300);
+        if (!inputElement.value) {dfd.reject('cancel');}
       }
-      dfd.resolve(config!.multiple ? files : files[0]);
     };
-    input.addEventListener('change', input.__change);
-    input.click();
+
+    chooseEffects.push(addElementListener(inputElement, 'change', handlers.onInputChange));
+    chooseEffects.push(() => inputElement.value = '');
+    chooseEffects.push(addWindowListener('focus', handlers.onWindowFocus));
+
+    inputElement.click();
 
     return dfd.promise;
   };
 
   /**
-   * 选择tupiuan
+   * 选择图片
    * @author  韦胜健
    * @date    2021/1/1 17:03
    */
@@ -207,8 +253,9 @@ export function createFileService() {
   };
 }
 
+/*获取一个input type为file的input元素，用来选择文件*/
 const getInput = (() => {
-  let input: HTMLInputElement & { __change?: (e: Event) => void };
+  let input: HTMLInputElement;
   return () => {
     if (!input) {
       input = document.createElement('input');
@@ -230,13 +277,11 @@ function getError(config: FileServiceUploadConfig, xhr: XMLHttpRequest) {
   } else {
     message = `file to post ${config.action} ${xhr.status}`;
   }
-
   const error = new Error(message) as FileServiceUploadErrorEvent;
   error.status = xhr.status;
   error.method = 'post';
   error.url = config.action;
   error.config = config;
-
   return error;
 }
 

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

@@ -11,7 +11,7 @@ export const Application = designComponent({
   name: 'application',
   props: {
     configuration: { type: Object as PropType<DeepPartial<iApplicationConfiguration>>, },
-    defaultInputMode: { type: String as PropType<typeof InputMode.TYPE>, default: InputMode.flat },
+    defaultInputMode: { type: String as PropType<typeof InputMode.TYPE>, default: InputMode.stroke },
     defaultButtonMode: { type: String as PropType<typeof ThemeMode.TYPE>, default: ThemeMode.stroke },
   },
   slots: ['default'],

package/src/packages/components/Button/button.scss

@@ -38,6 +38,7 @@
     @include statusMixin(button) {
       background-color: $color-6;
       border-color: $color-6;
+      outline-color: $color-6;
       color: plv(pbfc);
       @include hover(button) {
         background-color: $color-4;
@@ -60,6 +61,7 @@
       color: plv(text-2);
       background-color: $color-light-2;
       border-color: $color-light-2;
+      outline-color: $color-4;
 
       &:not(.button-status-secondary) {
         color: $color-6;
@@ -91,6 +93,7 @@
     @include statusMixin(button) {
       background-color: transparent;
       border-color: $color-6;
+      outline-color: $color-6;
       color: $color-6;
 
       @include active(button) {
@@ -113,6 +116,7 @@
     @include statusMixin(button) {
       background-color: plv(bg-2);
       border-color: plv(secondary-light-3);
+      outline-color: plv(primary-4);
       color: plv(text-2);
 
       @include active(button) {

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

@@ -4,13 +4,13 @@ import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {throttle} from "@peryl/utils/throttle";
 import {unit} from "@peryl/utils/unit";
-import {useClickWave} from "../../directives/ClickWave";
 import {Icon} from "../Icon";
 import {Loading} from "../Loading";
 import {ButtonGroup} from "../ButtonGroup";
 import {AutoLoadingObserver} from "../AutoLoadingObserver";
 import {useCollapseStyles} from "../../uses/useCollapseStyles";
 import {createEffects} from "@peryl/utils/createEffects";
+import {useClickRipple} from "../../directives/ClickRipple/useClickRipple";
 
 export const Button = designComponent({
   name: '-button',
@@ -132,7 +132,7 @@ export const Button = designComponent({
       style.width = unit(numberState.width);
     });
 
-    useClickWave({ elGetter: () => refs.el, optionsGetter: () => ({ size: () => styleComputed.value.size, disabled: !editComputed.value.editable }), });
+    useClickRipple({ elGetter: () => refs.el, optionsGetter: () => ({ size: () => styleComputed.value.size, disabled: !editComputed.value.editable || mode.value === 'text' }), });
 
     const { loadingCollapse, iconCollapse } = (() => {
       const active = () => ({

package/src/packages/components/Input/index.scss

@@ -235,7 +235,7 @@
     }
     &:not(.input-mode-text) {
       @include hover(input) {
-        background-color: $color-light-3;
+        //background-color: $color-light-3;
         border-color: $color-light-4;
       }
     }
@@ -252,6 +252,15 @@
     }
   }
 
+  &.input-status-secondary {
+    &:not(.input-mode-text) {
+      @include hover(input) {
+        //background-color: $color-light-3;
+        border-color: plv(primary-6);
+      }
+    }
+  }
+
   /*input align*/
   /*@formatter:off*/
   &.input-align-left { .input-box{text-align: left} }

package/src/packages/components/InputNumber/number.scss

@@ -9,6 +9,7 @@
     cursor: pointer;
     user-select: none;
     transition: background-color ease 300ms;
+    border-radius: inherit;
 
     &:hover {
       background-color: plv(secondary-light-1);

package/src/packages/components/InputNumber/useInputNumber.public.tsx

@@ -4,7 +4,6 @@ import {useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
 import {roundFixed} from "@peryl/utils/roundFixed";
 import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
-import {useClickWave} from "../../directives/ClickWave";
 import {NumberResize} from "./NumberResize";
 import {NumberButtonTypes} from "./number.utils";
 import {Input} from "../Input";
@@ -274,9 +273,6 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
     onInput: (val: any) => {hooks.onInput.exec(val);},
   };
 
-  useClickWave({ elGetter: () => refs.add, optionsGetter: () => ({ disabled: !editComputed.value.editable }) });
-  useClickWave({ elGetter: () => refs.sub, optionsGetter: () => ({ disabled: !editComputed.value.editable }) });
-
   /**
    * 点击加减按钮的时候阻止事件冒泡，避免触发打开suggestion面板
    * @author  韦胜健

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

@@ -25,7 +25,7 @@ export const Scroll = designComponent({
     scrollX: { type: Boolean },                                                                       // 可以横向滚动
     scrollY: { type: Boolean, default: true },                                                        // 可以纵向滚动
     hideScrollbar: { type: Boolean },                                                                 // 隐藏滚动条
-    alwaysShowScrollbar: { type: Boolean },                                                           // 一直显示滚动条
+    alwaysShowScrollbar: { type: Boolean, default: true },                                            // 一直显示滚动条
     fitContentWidth: { type: Boolean },                                                               // 适配内容宽度
     fitContentHeight: { type: Boolean },                                                              // 适配内容高度
     fitHostWidth: { type: Boolean },                                                                  // 适配容器宽度

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

@@ -10,6 +10,7 @@ import ClientZoom from "../ClientZoom";
 import {addWindowListener} from '@peryl/utils/addWindowListener';
 import i18n from "../i18n";
 import Button from "../Button";
+import {InputMode} from "../../uses/useStyle";
 
 export const ThemeEditor = designComponent({
   name: 'theme-editor',
@@ -28,7 +29,7 @@ export const ThemeEditor = designComponent({
       shape: PageThemeUtils.state.shape || 'square',
       zoom: PageThemeUtils.state.zoom || null,
       primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
-      inputMode: PageThemeUtils.state.inputMode || 'flat',
+      inputMode: PageThemeUtils.state.inputMode || InputMode.stroke,
       buttonMode: PageThemeUtils.state.buttonMode || 'flat',
     });
 

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

@@ -1,10 +1,10 @@
 import {computed, designComponent, getComponentCls, iFocusEvent, iKeyboardEvent, iMouseEvent, reactive, useClasses, useModel, useRefs} from "@peryl/react-compose";
-import {useClickWave} from "../../directives/ClickWave";
 import './toggle.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
 import i18n from "../i18n";
+import {useClickRipple} from "../../directives/ClickRipple/useClickRipple";
 
 export const Toggle = designComponent({
   name: '-toggle',
@@ -90,7 +90,7 @@ export const Toggle = designComponent({
       blur: emit.onBlur,
     };
 
-    useClickWave({ elGetter: () => refs.el, optionsGetter: () => ({ disabled: !editComputed.value.editable }) });
+    useClickRipple({ elGetter: () => refs.el, optionsGetter: () => ({ disabled: !editComputed.value.editable }) });
 
     return {
       refer: { refs },

package/src/packages/components/Toggle/toggle.scss

@@ -114,6 +114,7 @@
     }
 
     @include statusMixin(toggle) {
+      outline-color: $color-6;
       &.toggle-on {
         background-color: $color-6;
       }

package/src/packages/directives/ClickRipple/click-ripple.scss

@@ -0,0 +1,16 @@
+@include comp(wave-node) {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  display: block;
+  pointer-events: none;
+  transition: all 300ms ease;
+  outline: solid 0;
+  outline-color: inherit;
+  opacity: 0.5;
+
+  &[wave-node-hide] {
+    outline-width: 6px;
+    opacity: 0.05;
+  }
+}

package/src/packages/directives/ClickRipple/useClickRipple.tsx

@@ -0,0 +1,93 @@
+import {getComponentCls, onBeforeUnmount, watch} from '@peryl/react-compose';
+import './click-ripple.scss';
+import {delay} from "@peryl/utils/delay";
+import {ThemeSize} from "../../uses/useStyle";
+import {createEffects} from "@peryl/utils/createEffects";
+import {addClass} from "@peryl/utils/addClass";
+import {hasClass} from "@peryl/utils/hasClass";
+import {findParentElement} from "@peryl/utils/findParentElement";
+
+export interface ClickWaveOptions {
+  disabled?: boolean,
+  size?: () => typeof ThemeSize.TYPE,
+}
+
+function createClickWaveManager(el: HTMLElement, o?: ClickWaveOptions | string) {
+  let option: ClickWaveOptions;
+
+  const updateOption = (o?: ClickWaveOptions | string) => {
+    o = o || {};
+    if (typeof o === "string") {o = { size: o as any };}
+    option = o;
+  };
+
+  updateOption(o);
+
+  const onClick = async (e: MouseEvent) => {
+    // console.log('click ripple', e.target);
+    if (option.disabled) return;
+    let target = e.target as HTMLElement;
+    let container: HTMLElement | null = null;
+    if (!hasClass(target, 'plain-click-node')) {
+      container = target.querySelector('.plain-click-node') as HTMLElement | null;
+    } else {
+      container = target;
+    }
+    if (!container) {
+      container = findParentElement(target, i => hasClass(i, 'plain-click-node'));
+    }
+    if (!container) {return;}
+
+    const spanElement = document.createElement('span');
+    addClass(spanElement, getComponentCls('wave-node'));
+    container.appendChild(spanElement);
+    await delay(0);
+    spanElement.setAttribute('wave-node-hide', '');
+    await delay(300);
+    container.removeChild(spanElement);
+  };
+
+  el.addEventListener('click', onClick, true);
+
+  return {
+    updateOption,
+    destroy: () => {el.removeEventListener('click', onClick, true);},
+  };
+}
+
+type WaveManager = ReturnType<typeof createClickWaveManager>
+
+/**
+ * 代替 plain-ui for Vue3.0 中 v-click-wave 指令
+ * @author  韦胜健
+ * @date    2021/3/16 11:03
+ */
+export function useClickRipple(
+  {
+    elGetter,
+    optionsGetter,
+  }: {
+    elGetter: () => HTMLElement | undefined | null,
+    optionsGetter: () => string | ClickWaveOptions,
+  }) {
+
+  let waveManager = null as null | WaveManager;
+  const { effects } = createEffects();
+
+  watch(elGetter, async el => {
+    await delay(0);
+    effects.clear();
+    if (!!el) {
+      const manager = createClickWaveManager(el, !!optionsGetter ? optionsGetter() : undefined);
+      waveManager = manager;
+      effects.push(() => {
+        manager.destroy();
+        waveManager = null;
+      });
+    }
+  }, { immediate: true });
+
+  !!optionsGetter && watch(optionsGetter, opt => {!!waveManager && waveManager.updateOption(opt);});
+
+  onBeforeUnmount(() => {effects.clear();});
+}

package/src/packages/directives/ClickWave/click-wave.scss

@@ -1,8 +1,8 @@
 $waves: (
   large:6px,
-  normal:4px,
-  small:4px,
-  mini:4px,
+  normal:3px,
+  small:3px,
+  mini:3px,
 );
 
 @each $key, $value in $waves {