plain-design 0.0.97 → 1.0.0-beta.10

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

@@ -0,0 +1,224 @@
+import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {defer} from "plain-utils/utils/defer";
+import {Image, ImagePropsOptions} from "../Image";
+import {$image} from "../$image";
+import {Icon} from "../Icon";
+import {PlainObject} from "plain-utils/utils/event";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {$file, FileServiceDefaultAccept, FileServiceUploadConfig} from "../$file";
+import $configuration from "../$configuration";
+import {iUploadService} from "../$upload/createUploadService";
+import i18n from "../i18n";
+
+/**
+ * ImageUploader的状态
+ * empty          当前无图片
+ * pending        加载中
+ * success        图片加载成功或者上传成功
+ * error          图片加载失败
+ * fail           图片上传失败
+ * upload         图片加载中
+ * @author  韦胜健
+ * @date    2022.10.5 15:42
+ */
+export const eImageUploaderStatus = createEnum(["empty", "pending", "success", "error", "fail", "upload",] as const);
+
+export const ImageUploader = designComponent({
+  name: 'image-uploader',
+  props: {
+    ...EditProps,
+    ...ImagePropsOptions,
+    modelValue: { type: String },                                                             // 图片路径
+    width: { type: [String, Number], default: '80px' },                                       // 图片宽度
+    height: { type: [String, Number], default: '80px' },                                      // 图片高度
+    accept: { type: String, default: FileServiceDefaultAccept.image },                        // 选择文件的时候，图片类型
+    uploadConfig: { type: Object as PropType<Omit<FileServiceUploadConfig, 'file'>> },        // 上传配置信息对象
+    previewImage: { type: String },                                                           // 预览的时候显示的图片
+    handleDelete: { type: Function as PropType<() => void | Promise<void>> },                 // 自定义删除图片逻辑
+    handleUpload: { type: Function as PropType<(file: File) => void | Promise<void>> },       // 自定义上传图片逻辑
+    handlePreview: { type: Function as PropType<(url?: string) => void> },                    // 自定义预览逻辑
+    urlPrefix: { type: String },
+    service: { type: Object as PropType<iUploadService> },
+  },
+  inheritPropsType: HTMLDivElement,
+  emits: {
+    onUpdateModelValue: (val?: string) => true,
+    onLoadSuccess: (url: string) => true,
+    onLoadError: (e: string | Event) => true,
+    onUploadSuccess: (resp: PlainObject | string) => true,
+    onUploadProgress: (percent: number, e: ProgressEvent) => true,
+    onUploadFail: (e: any) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const upload = props.service || $configuration.use('upload');
+
+    const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { autoWatch: false });
+
+    const { editComputed } = useEdit();
+
+    const state = reactive({
+      status: eImageUploaderStatus.empty as typeof eImageUploaderStatus.TYPE,
+      percent: null as null | number,
+      chooseBase64: undefined as string | undefined,
+    });
+
+    watch(() => props.modelValue, val => {
+      model.value = Image.formatImagePath(val, urlPrefix.value);
+      state.chooseBase64 = undefined;
+      if (!model.value) {
+        return state.status = eImageUploaderStatus.empty;
+      }
+      state.status = eImageUploaderStatus.pending;
+      const image = new window.Image();
+      image.onload = () => {
+        state.status = eImageUploaderStatus.success;
+        emit.onLoadSuccess(model.value!);
+      };
+      image.onerror = (e) => {
+        state.status = eImageUploaderStatus.error;
+        emit.onLoadError(e);
+      };
+      image.src = model.value;
+    }, { immediate: true });
+
+    const classes = useClasses(() => [
+      getComponentCls('image-uploader'),
+      `image-uploader-status-${state.status}`,
+      {
+        'image-disabled': editComputed.value.disabled,
+        'image-editable': editComputed.value.editable,
+      }
+    ]);
+
+    const styles = useStyles(style => {
+      if (!!props.height) {style.height = unit(props.height);}
+      if (!!props.width) {style.width = unit(props.width);}
+    });
+
+    const methods = {
+      choose: async () => {
+        const dfd = defer<void | string | Record<string, string>>();
+        const file = await $file.chooseImage() as File;
+        state.chooseBase64 = await $file.readAsDataURL(file) as string;
+
+        if (!!props.handleUpload) {
+          await props.handleUpload(file);
+          dfd.resolve();
+        } else if (!!props.uploadConfig || !!upload) {
+          const config = deepcopy(props.uploadConfig);
+          state.status = eImageUploaderStatus.upload;
+          const publicUploadConfig: Omit<FileServiceUploadConfig, 'action' | 'filename'> = {
+            file,
+            onProgress: (percent, e) => {
+              if (!!config?.onProgress) config.onProgress(percent, e);
+              console.log('percent', percent);
+              state.percent = percent;
+              emit.onUploadProgress(percent, e);
+            },
+            onSuccess: (resp) => {
+              if (!!config?.onSuccess) config.onSuccess(resp);
+              console.log('upload success, resp:', resp);
+              model.value = String(state.chooseBase64);
+              state.chooseBase64 = undefined;
+              state.status = eImageUploaderStatus.success;
+              emit.onUploadSuccess(resp);
+              dfd.resolve(resp);
+            },
+            onError: (e) => {
+              if (!!config?.onError) config.onError(e);
+              console.log('upload fail, e:', e);
+              state.status = eImageUploaderStatus.fail;
+              emit.onUploadFail(e);
+              dfd.reject(e);
+            },
+          };
+
+          if (!!config) {
+            (upload?.upload || $file.upload)({ ...publicUploadConfig, ...config });
+          } else {
+            if (!!upload) {
+              upload.upload(publicUploadConfig);
+            }
+          }
+        } else {
+          dfd.reject('image-uploader: no props.uploadConfig and props.handleUpload, do nothing');
+        }
+
+        return dfd.promise;
+      },
+    };
+
+    const handler = {
+      onClick: async () => {
+        if (!editComputed.value.editable) return;
+        await methods.choose();
+      },
+      onClickImage: async () => {
+        if (state.status === eImageUploaderStatus.error) {
+          return await handler.onClick();
+        }
+        const url = Image.formatImagePath(props.previewImage! || model.value! || state.chooseBase64!, urlPrefix.value);
+        if (!!props.handlePreview) {
+          return props.handlePreview(url);
+        } else {
+          !!url && $image.preview(url);
+        }
+      },
+      onClickDelete: async () => {
+        if (!!props.handleDelete) {
+          await props.handleDelete();
+        }
+        model.value = undefined;
+        state.chooseBase64 = undefined;
+      },
+    };
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} style={styles.value} ref={onRef.el}>
+          {(!!model.value || !!state.chooseBase64) && (
+            <Image
+              src={model.value || state.chooseBase64}
+              fit={props.fit}
+              alt={props.alt}
+              position={props.position}
+              previewOnClick={false}
+              height={props.height}
+              width={props.width}
+              urlPrefix={urlPrefix.value}
+              onClick={handler.onClickImage}
+            />
+          )}
+          {state.status === eImageUploaderStatus.empty && <div className="image-uploader-empty" onClick={handler.onClick}>
+            <Icon icon="pi-image"/>
+            <span>{i18n('file.toBeUpload').d('待上传')}</span>
+          </div>}
+          {state.status === eImageUploaderStatus.fail && <div className="image-uploader-fail" onClick={handler.onClick}>
+            <Icon icon="pi-image-close"/>
+            <span>{i18n('file.uploadFailed').d('上传失败')}</span>
+          </div>}
+          <div className="image-uploader-button-group">
+            <div className="image-uploader-button" onClick={handler.onClick}>
+              <Icon icon="pi-upload"/>
+            </div>
+            <div className="image-uploader-button" onClick={handler.onClickDelete}>
+              <Icon icon="pi-close"/>
+            </div>
+          </div>
+        </div>
+      )
+    };
+  },
+});
+
+export default ImageUploader;

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

@@ -0,0 +1,400 @@
+@include prefix(input) {
+  display: inline-flex;
+  width: 100%;
+  align-items: stretch;
+  box-sizing: border-box;
+  transition: all .1s cubic-bezier(0, 0, 1, 1);
+  border: solid 1px transparent;
+  position: relative;
+
+  /*重置input，textarea的默认样式*/
+  input, textarea {
+    padding: 0;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: inherit;
+
+    &::placeholder {
+      color: plv(text-placeholder);
+    }
+
+    &::-ms-clear {
+      display: none;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none !important;
+      margin: 0;
+    }
+
+    &:-webkit-autofill {
+      background-color: transparent !important;
+      -webkit-transition: background-color 10000s cubic-bezier(1, -100, 1, -100) 0s !important;
+    }
+  }
+
+  /*input-box负责撑开高度*/
+  .input-box {
+    min-width: 0;
+    border: none;
+    background-color: transparent;
+    box-sizing: border-box;
+    line-height: 1.5715;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    color: plv(text-2);
+  }
+
+  /*input-fill负责撑开宽度*/
+  .input-fill {
+    flex: 1;
+  }
+
+  /*所有的直接子节点，垂直居中，加上左右边距，除了第一个直接子节点之外，其他节点都加上左边框*/
+  & > div, & > span, & > input, & > textarea {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding-right: plv(input-padding-x);
+    padding-left: plv(input-padding-x);
+
+    &:not(:first-child) {
+      border-left: solid 1px plv(border-color);
+    }
+  }
+
+  /*prefix icon and suffix icon*/
+
+  /*prefix icon右侧的input-box不需要左边框以及左边距*/
+  .input-prefix-icon {
+    & + .input-box {
+      padding-left: 0;
+      border-left: none;
+    }
+  }
+
+  .input-suffix-icon-wrapper {
+    position: relative;
+    box-sizing: content-box;
+    cursor: pointer;
+    user-select: none;
+    padding: 0;
+
+    /*suffix icon wrapper不需要左边框，左边距有冗余的宽度实现*/
+    &:not(:first-child) {
+      border-left: none;
+    }
+
+    &, & .input-suffix-icon, & .input-suffix-clear {
+      transition: all ease 300ms;
+    }
+
+    &:active {
+      opacity: 0.5;
+      transition: none;
+    }
+
+    /*suffix icon wrapper里边的icon，clear以及loading 覆盖显示*/
+    .input-suffix-icon, .input-suffix-clear, .#{componentName(loading)} {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: auto;
+      width: auto;
+    }
+  }
+
+  /*suffix clear默认不显示，hover的时候才显示*/
+  .input-suffix-icon-wrapper {
+    .input-suffix-clear {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &.input-has-suffix-clear:hover {
+    .input-suffix-icon-wrapper {
+      .input-suffix-clear {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .input-suffix-icon {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    &.input-has-suffix-icon {
+      &.input-empty {
+        .input-suffix-icon-wrapper {
+          .input-suffix-clear {
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          .input-suffix-icon {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+      }
+    }
+  }
+
+  /*有clear，suffix icon或者loading的时候，input-box不需要右边距*/
+  &.input-has-suffix-clear, &.input-has-suffix-icon, &.input-loading {
+    .input-box {
+      padding-right: 0;
+    }
+  }
+
+  &.input-loading {
+    .input-suffix-icon, .input-suffix-clear {
+      display: none;
+    }
+  }
+
+  /*input size*/
+
+  @include sizeMixin(input, ()) {
+    &.input-shape-square {
+      border-radius: $border-radius;
+    }
+    &.input-shape-round {
+      border-radius: calc(#{$height} - 2px);
+    }
+    font-size: $font-size;
+    .input-box {
+      font-size: $font-size;
+      height: calc(#{$height} - 2px);
+    }
+
+    /*prefix icon以及suffix icon的宽度与高度相同，显示为正方形*/
+    .input-prefix-icon {
+      width: $height;
+    }
+    .input-suffix-icon-wrapper {
+      width: 18px;
+    }
+
+    &.input-size-mini {
+      .input-box {
+        line-height: 1.667;
+      }
+    }
+  }
+
+  /*input status*/
+
+  @include statusMixin(input) {
+
+    &.input-mode-flat {
+      background-color: $color-light-1;
+      border-color: $color-light-3;
+    }
+    &.input-mode-stroke {
+      background-color: plv(background-color);
+      border-color: $color-3;
+    }
+    @include hover(input) {
+      background-color: $color-light-3;
+      border-color: $color-light-4;
+    }
+    @include focus(input) {
+      border-color: $color-5;
+      /*background-color: $color-light-1;
+      box-shadow: 0 0 0 2px $color-2;*/
+      background-color: plv(background-color);
+      box-shadow: 0 0 0 2px $color-2;
+      z-index: 2;
+    }
+    .input-suffix-icon-wrapper {
+      color: $color-6;
+    }
+  }
+
+  /*input align*/
+  /*@formatter:off*/
+  &.input-align-left { .input-box{text-align: left} }
+  &.input-align-center { .input-box{text-align: center} }
+  &.input-align-right { .input-box{text-align: right} }
+  /*@formatter:on*/
+
+  .input-suffix-max-length {
+    font-size: 12px;
+  }
+
+  &.input-disabled {
+    background-color: plv(secondary-light-1) !important;
+    border-color: plv(secondary-light-2) !important;
+
+    .input-prefix-icon, .input-suffix-icon {
+      color: plv(text-3);
+    }
+
+    &, & * {
+      cursor: not-allowed !important;
+    }
+  }
+
+  /*---------------------------------------multiple-------------------------------------------*/
+
+  &.input-multiple {
+    vertical-align: 0.05em;
+
+    .input-box.input-tag-container {
+      height: auto;
+      cursor: text;
+      padding-bottom: 0;
+
+      .input-tag {
+        font-size: 12px;
+        //max-width: 100%;
+        margin-right: 3px;
+        background-color: plv(secondary-1);
+        padding: 0 4px;
+        border-radius: plv(box-size-normal-border-radius);
+        border: solid 1px plv(border-color);
+        box-sizing: border-box;
+        white-space: nowrap;
+        line-height: 1.5;
+
+        @include prefix(icon) {
+          cursor: pointer;
+        }
+
+        &.input-tag-takeover {
+          width: 0;
+          white-space: nowrap;
+          overflow: hidden;
+          padding-left: 0;
+          padding-right: 0;
+          margin-right: 0;
+          border: none;
+        }
+      }
+
+      & > * {
+        margin-bottom: 3px;
+      }
+
+      &:not(.input-tag-container-wrap) {
+        flex-wrap: nowrap;
+        overflow: hidden;
+        background-color: inherit;
+
+        & > * {
+          flex-grow: 0;
+          flex-shrink: 0;
+        }
+
+        .custom-auto-width-input {
+          position: sticky;
+          right: 0;
+          background-color: inherit;
+        }
+      }
+    }
+
+    @include sizeMixin(input, ()) {
+      .input-tag-container {
+        display: inline-flex;
+        flex-wrap: wrap;
+        border-radius: plv(box-size-#{$name}-border-radius);
+
+        & > * {
+          padding: 0;
+          height: calc(#{$height} - 8px);
+        }
+
+        .input-tag {
+          border-radius: $border-radius;
+          height: calc(#{$height} - 8px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+
+    &:not(.input-empty) {
+      .input-box.input-tag-container {
+        padding-left: 3px;
+      }
+    }
+
+    &.input-empty {
+      .input-tag-container {
+        .custom-auto-width-input {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  /*---------------------------------------textarea-------------------------------------------*/
+
+  &.input-textarea {
+    vertical-align: 0.05em;
+
+    .input-textarea-container {
+      padding: 0;
+      height: auto;
+
+      span, textarea {
+        display: inline-block;
+        padding: 3px 12px;
+        box-sizing: border-box;
+        line-height: 1.5715;
+        word-break: break-all;
+      }
+
+      span {
+        opacity: 0;
+        pointer-events: none;
+        min-height: calc(30px + 2em);
+        //height: 30px;
+      }
+
+      textarea {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+        resize: vertical;
+        max-height: 100%;
+        min-height: 100%;
+      }
+
+      &:not(.input-textarea-has-height) {
+        textarea {
+          overflow: hidden;
+        }
+      }
+
+      &.input-textarea-has-height {
+        span, textarea {
+          overflow: auto;
+        }
+      }
+    }
+
+    .input-suffix-max-length {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      padding-bottom: 4px;
+      border: none;
+      pointer-events: none;
+    }
+  }
+}