{"version":3,"file":"fs-cropper-uploader-c3fbe88c.mjs","sources":["../src/uploader/components/fs-cropper-uploader.vue","../src/uploader/components/fs-cropper-uploader.vue"],"sourcesContent":["<template>\n  <div class=\"fs-cropper-uploader\" :class=\"{ 'is-disabled': computedProps.disabled }\">\n    <div class=\"image-list\">\n      <component :is=\"ui.imageGroup.name\">\n        <div v-for=\"(item, index) in listRef\" :key=\"index\" class=\"image-item\">\n          <component :is=\"ui.image.name\" class=\"image\" :src=\"getImageSrc(item)\" v-bind=\"computedProps.img\">\n            <template #placeholder>\n              <div class=\"image-slot\">\n                <fs-loading :loading=\"true\" />\n              </div>\n            </template>\n          </component>\n          <div class=\"delete\">\n            <fs-icon v-if=\"!computedProps.disabled\" :icon=\"ui.icons.remove\" @click=\"removeImage(index as number)\" />\n            <fs-icon :icon=\"ui.icons.search\" @click=\"preview(item)\" />\n          </div>\n          <div v-if=\"item.status === 'uploading'\" class=\"status-uploading\">\n            <component :is=\"ui.progress.name\" type=\"circle\" :percentage=\"item.progress\" :width=\"70\" />\n          </div>\n          <div v-else-if=\"item.status === 'done'\" class=\"status-done\">\n            <fs-icon :icon=\"ui.icons.check\" class=\"status-down-icon\" />\n          </div>\n        </div>\n        <div\n          v-if=\"computedProps.limit <= 0 || computedProps.limit > listRef.length\"\n          class=\"image-item image-plus\"\n          @click=\"addNewImage\"\n        >\n          <fs-icon :icon=\"ui.icons.plus\" class=\"cropper-uploader-icon\" />\n        </div>\n      </component>\n    </div>\n    <fs-cropper\n      ref=\"cropperRef\"\n      :title=\"computedProps.title\"\n      :cropper-height=\"computedProps.cropperHeight\"\n      :dialog-width=\"computedProps.dialogWidth\"\n      :accept=\"computedProps.accept\"\n      :upload-tip=\"computedProps.uploadTip\"\n      :max-size=\"computedProps.maxSize\"\n      :cropper=\"computedProps.cropper\"\n      :compress-quality=\"computedProps.compressQuality\"\n      output=\"all\"\n      @done=\"cropComplete\"\n      @ready=\"doReady\"\n    />\n    <div class=\"fs-cropper-preview\" :class=\"{ open: previewVisible }\" @click=\"closePreview\">\n      <div class=\"fs-cropper-preview-content\">\n        <img v-if=\"previewUrl\" :src=\"previewUrl\" class=\"preview-image\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, reactive, ref, Ref, watch } from \"vue\";\nimport { useUi } from \"@fast-crud/fast-crud\";\nimport { FsUploaderDoUploadOptions } from \"../d/type\";\nimport { useUploader } from \"./utils\";\n\n/**\n * 图片裁剪上传组件,封装了fs-cropper\n * fs-cropper内部封装了[cropperjs](https://github.com/fengyuanchen/cropperjs)\n */\nexport default defineComponent({\n  name: \"FsCropperUploader\",\n  props: {\n    /**\n     * 初始图片url,或者是数组\n     */\n    modelValue: {\n      type: [String, Object, Array]\n    },\n    img: {},\n    /**\n     * 上传后端类型，[form, cos, qiniu , alioss]\n     */\n    type: {\n      type: String\n    },\n    /**\n     *  上传提示\n     */\n    uploadTip: {\n      type: String\n    },\n    /**\n     * 对话框标题\n     */\n    title: String,\n    /**\n     * cropper的高度，默认为浏览器可视窗口高度的40%，最小270\n     */\n    cropperHeight: {\n      type: [String, Number]\n    },\n    /**\n     * 对话框宽度，默认50%\n     */\n    dialogWidth: {\n      type: [String, Number],\n      default: \"50%\"\n    },\n    /**\n     * 图片大小限制，单位MB\n     */\n    maxSize: {\n      type: Number,\n      default: 5\n    },\n    /**\n     * 图片数量限制,0为不限制\n     */\n    limit: {\n      type: Number,\n      default: 1\n    },\n    /**\n     * 可接收的文件后缀\n     */\n    accept: {\n      type: String,\n      default: \".jpg, .jpeg, .png, .gif, .webp\"\n    },\n    /**\n     * [cropperjs的参数](https://github.com/fengyuanchen/cropperjs)\n     */\n    cropper: {\n      type: Object\n    },\n    /**\n     * FsUploaderXXX的配置，会临时覆盖全局上传配置参数\n     */\n    uploader: {\n      type: Object\n    },\n    /**\n     * 压缩质量\n     */\n    compressQuality: {\n      type: Number,\n      default: 0.8\n    },\n    /**\n     *  构建下载url方法,不影响提交的value\n     */\n    buildUrl: {\n      type: Function,\n      default: async function (value: any) {\n        return typeof value === \"object\" ? value.url : value;\n      }\n    },\n    /**\n     * 返回值类型\n     * 支持：`[url,key,object]`\n     */\n    valueType: {\n      type: String, // url ,key, object\n      default: \"url\"\n    },\n    /**\n     * 是否禁用\n     */\n    disabled: {}\n  },\n  emits: [\"update:modelValue\", \"change\", \"ready\"],\n  setup(props: any, ctx: any) {\n    const { ui } = useUi();\n    const cropperRef: Ref = ref();\n    const uploaderImplRef: Ref = ref();\n\n    const indexRef: Ref = ref();\n    const listRef: Ref = ref([]);\n    const formValidator = ui.formItem.injectFormItemContext();\n    // eslint-disable-next-line vue/no-setup-props-destructure\n    // @ts-ignore\n    let emitValue: any = props.modelValue;\n    // eslint-disable-next-line vue/no-setup-props-destructure\n    // @ts-ignore\n    initValue(props.modelValue);\n\n    async function initValue(value: any) {\n      const list: any = [];\n      if (value == null || value === \"\") {\n        listRef.value = list;\n        return;\n      }\n      if (typeof value === \"string\") {\n        // @ts-ignore\n        list.push({ url: await props.buildUrl(value), value: value, status: \"done\" });\n      } else if (Array.isArray(value)) {\n        for (const item of value) {\n          // @ts-ignore\n          list.push({ url: await props.buildUrl(item), value: item, status: \"done\" });\n        }\n      } else if (typeof value === \"object\") {\n        // @ts-ignore\n        list.push({ url: await props.buildUrl(value), value, status: \"done\" });\n      } else {\n        for (const item of value) {\n          // @ts-ignore\n          list.push({ url: await props.buildUrl(item), value: item, status: \"done\" });\n        }\n      }\n      listRef.value = list;\n    }\n    function addNewImage() {\n      // @ts-ignore\n      if (props.disabled) {\n        return;\n      }\n      indexRef.value = undefined;\n      cropperRef.value.clear();\n      cropperRef.value.open();\n    }\n    function removeImage(index: number) {\n      listRef.value.splice(index, 1);\n      doEmit();\n    }\n    function hasUploading() {\n      const fileList: any = listRef.value;\n      if (fileList && fileList.length > 0) {\n        for (const item of fileList) {\n          if (item.status === \"uploading\") {\n            return true;\n          }\n        }\n      }\n      return false;\n    }\n    async function cropComplete(ret: any) {\n      const blob = ret.blob;\n      const dataUrl = ret.dataUrl;\n      const file = ret.file;\n      const filename = file.name;\n      const blobFile = new File([blob], filename, { type: blob.type });\n\n      // 开始上传\n      const item: any = reactive({\n        url: undefined,\n        dataUrl: dataUrl,\n        status: \"uploading\",\n        progress: 0\n      });\n      const onProgress = (e: any) => {\n        item.progress = e.percent;\n      };\n      const onError = (e: any) => {\n        item.status = \"error\";\n        item.message = \"文件上传出错:\" + e.message;\n        console.error(e);\n      };\n      const option = {\n        file: blobFile,\n        onProgress,\n        onError,\n        fileName: filename\n      };\n      listRef.value.push(item);\n      try {\n        const uploaded = await doUpload(option);\n        let value = uploaded;\n        // @ts-ignore\n        if (props.valueType !== \"object\") {\n          // @ts-ignore\n          value = uploaded[props.valueType];\n        }\n        // @ts-ignore\n        item.url = await props.buildUrl(value);\n        item.value = value;\n        item.status = \"done\";\n        doEmit();\n      } catch (e) {\n        onError(e);\n      }\n    }\n\n    async function doUpload(option: FsUploaderDoUploadOptions) {\n      // @ts-ignore\n      option.options = props.uploader || {};\n      const { getUploaderImpl } = useUploader();\n      let uploaderRef = await getUploaderImpl(option.options.type);\n      if (uploaderRef == null) {\n        throw new Error(\"Sorry，The component is not ready yet\");\n      }\n      return await uploaderRef?.upload(option);\n    }\n\n    async function doEmit() {\n      const list = [];\n      for (const item of listRef.value) {\n        if (typeof item === \"string\") {\n          list.push(item);\n        } else {\n          list.push(item.value);\n        }\n      }\n      let ret = list;\n      // @ts-ignore\n      if (props.limit === 1) {\n        ret = list && list.length > 0 ? list[0] : undefined;\n      }\n      emitValue = ret;\n      ctx.emit(\"update:modelValue\", ret);\n      await formValidator.onChange();\n      await formValidator.onBlur();\n    }\n\n    function getImageSrc(item: any) {\n      return item.dataUrl ? item.dataUrl : item.url;\n    }\n\n    const previewVisible = ref(false);\n    const previewUrl = ref();\n    function preview(item: any) {\n      previewVisible.value = true;\n      previewUrl.value = getImageSrc(item);\n    }\n    function closePreview() {\n      previewVisible.value = false;\n      previewUrl.value = null;\n    }\n    watch(\n      () => {\n        // @ts-ignore\n        return props.modelValue;\n      },\n      async (val: any) => {\n        ctx.emit(\"change\", val);\n        if (val === emitValue) {\n          return;\n        }\n        await initValue(val);\n      }\n    );\n    const current = getCurrentInstance();\n    function doReady(context: any) {\n      ctx.emit(\"ready\", {\n        uploaderRef: current,\n        ...context\n      });\n    }\n\n    const computedProps = computed(() => {\n      return {\n        ...props\n      };\n    });\n    return {\n      ui,\n      cropperRef,\n      uploaderImplRef,\n      indexRef,\n      listRef,\n      addNewImage,\n      hasUploading,\n      cropComplete,\n      doUpload,\n      removeImage,\n      getImageSrc,\n      previewUrl,\n      previewVisible,\n      preview,\n      closePreview,\n      doReady,\n      computedProps\n    };\n  }\n});\n</script>\n\n<style lang=\"less\">\n.fs-cropper-uploader {\n  .fs-box {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .el-image-viewer__close {\n    color: #fff;\n  }\n  &.is-disabled {\n    .image-list {\n      .image-item {\n        cursor: not-allowed;\n      }\n    }\n    i {\n      cursor: not-allowed;\n    }\n  }\n  .image-list {\n    display: flex;\n    justify-content: left;\n    align-items: center;\n    flex-wrap: wrap;\n    .image-item {\n      width: 100px;\n      height: 100px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: #fbfdff;\n      border: 1px solid #c0ccda;\n      border-radius: 6px;\n      position: relative;\n      margin-right: 8px;\n      margin-bottom: 8px;\n      cursor: pointer;\n      overflow: hidden;\n      &.image-plus {\n        border: 1px dashed #c0ccda;\n      }\n      .cropper-uploader-icon {\n        vertical-align: top;\n        font-size: 28px;\n        color: #8c939d;\n      }\n      .image {\n        width: 100px;\n      }\n\n      .delete {\n        border-radius: 6px;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        cursor: default;\n        text-align: center;\n        color: #fff;\n        opacity: 0;\n        font-size: 20px;\n        background-color: rgba(0, 0, 0, 0.9);\n        -webkit-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n        &:hover {\n          opacity: 0.9;\n        }\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        i {\n          cursor: pointer;\n        }\n\n        display: flex;\n        > * {\n          margin: 5px;\n        }\n      }\n      .status-uploading {\n        border-radius: 6px;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        cursor: default;\n        text-align: center;\n        color: #fff;\n        opacity: 1;\n        font-size: 20px;\n        background-color: rgba(0, 0, 0, 0.5);\n        -webkit-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        .el-progress {\n          width: 70px;\n          height: 70px;\n          .el-progress__text {\n            color: #fff;\n          }\n        }\n      }\n      .status-done {\n        position: absolute;\n        right: -15px;\n        top: -6px;\n        width: 40px;\n        height: 24px;\n        background: #13ce66;\n        text-align: center;\n        -webkit-transform: rotate(45deg);\n        transform: rotate(45deg);\n        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);\n        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        .status-down-icon {\n          font-size: 12px;\n          margin-top: 11px;\n          color: #fff;\n          -webkit-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n        }\n      }\n    }\n  }\n\n  .fs-cropper-preview {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(183, 180, 180, 0.7);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    visibility: hidden;\n    z-index: 10000;\n    &.open {\n      visibility: visible;\n    }\n    .fs-cropper-preview-content {\n      max-height: 800px;\n      max-width: 800px;\n      img {\n        max-height: 800px;\n        max-width: 800px;\n        object-fit: contain;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"fs-cropper-uploader\" :class=\"{ 'is-disabled': computedProps.disabled }\">\n    <div class=\"image-list\">\n      <component :is=\"ui.imageGroup.name\">\n        <div v-for=\"(item, index) in listRef\" :key=\"index\" class=\"image-item\">\n          <component :is=\"ui.image.name\" class=\"image\" :src=\"getImageSrc(item)\" v-bind=\"computedProps.img\">\n            <template #placeholder>\n              <div class=\"image-slot\">\n                <fs-loading :loading=\"true\" />\n              </div>\n            </template>\n          </component>\n          <div class=\"delete\">\n            <fs-icon v-if=\"!computedProps.disabled\" :icon=\"ui.icons.remove\" @click=\"removeImage(index as number)\" />\n            <fs-icon :icon=\"ui.icons.search\" @click=\"preview(item)\" />\n          </div>\n          <div v-if=\"item.status === 'uploading'\" class=\"status-uploading\">\n            <component :is=\"ui.progress.name\" type=\"circle\" :percentage=\"item.progress\" :width=\"70\" />\n          </div>\n          <div v-else-if=\"item.status === 'done'\" class=\"status-done\">\n            <fs-icon :icon=\"ui.icons.check\" class=\"status-down-icon\" />\n          </div>\n        </div>\n        <div\n          v-if=\"computedProps.limit <= 0 || computedProps.limit > listRef.length\"\n          class=\"image-item image-plus\"\n          @click=\"addNewImage\"\n        >\n          <fs-icon :icon=\"ui.icons.plus\" class=\"cropper-uploader-icon\" />\n        </div>\n      </component>\n    </div>\n    <fs-cropper\n      ref=\"cropperRef\"\n      :title=\"computedProps.title\"\n      :cropper-height=\"computedProps.cropperHeight\"\n      :dialog-width=\"computedProps.dialogWidth\"\n      :accept=\"computedProps.accept\"\n      :upload-tip=\"computedProps.uploadTip\"\n      :max-size=\"computedProps.maxSize\"\n      :cropper=\"computedProps.cropper\"\n      :compress-quality=\"computedProps.compressQuality\"\n      output=\"all\"\n      @done=\"cropComplete\"\n      @ready=\"doReady\"\n    />\n    <div class=\"fs-cropper-preview\" :class=\"{ open: previewVisible }\" @click=\"closePreview\">\n      <div class=\"fs-cropper-preview-content\">\n        <img v-if=\"previewUrl\" :src=\"previewUrl\" class=\"preview-image\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, reactive, ref, Ref, watch } from \"vue\";\nimport { useUi } from \"@fast-crud/fast-crud\";\nimport { FsUploaderDoUploadOptions } from \"../d/type\";\nimport { useUploader } from \"./utils\";\n\n/**\n * 图片裁剪上传组件,封装了fs-cropper\n * fs-cropper内部封装了[cropperjs](https://github.com/fengyuanchen/cropperjs)\n */\nexport default defineComponent({\n  name: \"FsCropperUploader\",\n  props: {\n    /**\n     * 初始图片url,或者是数组\n     */\n    modelValue: {\n      type: [String, Object, Array]\n    },\n    img: {},\n    /**\n     * 上传后端类型，[form, cos, qiniu , alioss]\n     */\n    type: {\n      type: String\n    },\n    /**\n     *  上传提示\n     */\n    uploadTip: {\n      type: String\n    },\n    /**\n     * 对话框标题\n     */\n    title: String,\n    /**\n     * cropper的高度，默认为浏览器可视窗口高度的40%，最小270\n     */\n    cropperHeight: {\n      type: [String, Number]\n    },\n    /**\n     * 对话框宽度，默认50%\n     */\n    dialogWidth: {\n      type: [String, Number],\n      default: \"50%\"\n    },\n    /**\n     * 图片大小限制，单位MB\n     */\n    maxSize: {\n      type: Number,\n      default: 5\n    },\n    /**\n     * 图片数量限制,0为不限制\n     */\n    limit: {\n      type: Number,\n      default: 1\n    },\n    /**\n     * 可接收的文件后缀\n     */\n    accept: {\n      type: String,\n      default: \".jpg, .jpeg, .png, .gif, .webp\"\n    },\n    /**\n     * [cropperjs的参数](https://github.com/fengyuanchen/cropperjs)\n     */\n    cropper: {\n      type: Object\n    },\n    /**\n     * FsUploaderXXX的配置，会临时覆盖全局上传配置参数\n     */\n    uploader: {\n      type: Object\n    },\n    /**\n     * 压缩质量\n     */\n    compressQuality: {\n      type: Number,\n      default: 0.8\n    },\n    /**\n     *  构建下载url方法,不影响提交的value\n     */\n    buildUrl: {\n      type: Function,\n      default: async function (value: any) {\n        return typeof value === \"object\" ? value.url : value;\n      }\n    },\n    /**\n     * 返回值类型\n     * 支持：`[url,key,object]`\n     */\n    valueType: {\n      type: String, // url ,key, object\n      default: \"url\"\n    },\n    /**\n     * 是否禁用\n     */\n    disabled: {}\n  },\n  emits: [\"update:modelValue\", \"change\", \"ready\"],\n  setup(props: any, ctx: any) {\n    const { ui } = useUi();\n    const cropperRef: Ref = ref();\n    const uploaderImplRef: Ref = ref();\n\n    const indexRef: Ref = ref();\n    const listRef: Ref = ref([]);\n    const formValidator = ui.formItem.injectFormItemContext();\n    // eslint-disable-next-line vue/no-setup-props-destructure\n    // @ts-ignore\n    let emitValue: any = props.modelValue;\n    // eslint-disable-next-line vue/no-setup-props-destructure\n    // @ts-ignore\n    initValue(props.modelValue);\n\n    async function initValue(value: any) {\n      const list: any = [];\n      if (value == null || value === \"\") {\n        listRef.value = list;\n        return;\n      }\n      if (typeof value === \"string\") {\n        // @ts-ignore\n        list.push({ url: await props.buildUrl(value), value: value, status: \"done\" });\n      } else if (Array.isArray(value)) {\n        for (const item of value) {\n          // @ts-ignore\n          list.push({ url: await props.buildUrl(item), value: item, status: \"done\" });\n        }\n      } else if (typeof value === \"object\") {\n        // @ts-ignore\n        list.push({ url: await props.buildUrl(value), value, status: \"done\" });\n      } else {\n        for (const item of value) {\n          // @ts-ignore\n          list.push({ url: await props.buildUrl(item), value: item, status: \"done\" });\n        }\n      }\n      listRef.value = list;\n    }\n    function addNewImage() {\n      // @ts-ignore\n      if (props.disabled) {\n        return;\n      }\n      indexRef.value = undefined;\n      cropperRef.value.clear();\n      cropperRef.value.open();\n    }\n    function removeImage(index: number) {\n      listRef.value.splice(index, 1);\n      doEmit();\n    }\n    function hasUploading() {\n      const fileList: any = listRef.value;\n      if (fileList && fileList.length > 0) {\n        for (const item of fileList) {\n          if (item.status === \"uploading\") {\n            return true;\n          }\n        }\n      }\n      return false;\n    }\n    async function cropComplete(ret: any) {\n      const blob = ret.blob;\n      const dataUrl = ret.dataUrl;\n      const file = ret.file;\n      const filename = file.name;\n      const blobFile = new File([blob], filename, { type: blob.type });\n\n      // 开始上传\n      const item: any = reactive({\n        url: undefined,\n        dataUrl: dataUrl,\n        status: \"uploading\",\n        progress: 0\n      });\n      const onProgress = (e: any) => {\n        item.progress = e.percent;\n      };\n      const onError = (e: any) => {\n        item.status = \"error\";\n        item.message = \"文件上传出错:\" + e.message;\n        console.error(e);\n      };\n      const option = {\n        file: blobFile,\n        onProgress,\n        onError,\n        fileName: filename\n      };\n      listRef.value.push(item);\n      try {\n        const uploaded = await doUpload(option);\n        let value = uploaded;\n        // @ts-ignore\n        if (props.valueType !== \"object\") {\n          // @ts-ignore\n          value = uploaded[props.valueType];\n        }\n        // @ts-ignore\n        item.url = await props.buildUrl(value);\n        item.value = value;\n        item.status = \"done\";\n        doEmit();\n      } catch (e) {\n        onError(e);\n      }\n    }\n\n    async function doUpload(option: FsUploaderDoUploadOptions) {\n      // @ts-ignore\n      option.options = props.uploader || {};\n      const { getUploaderImpl } = useUploader();\n      let uploaderRef = await getUploaderImpl(option.options.type);\n      if (uploaderRef == null) {\n        throw new Error(\"Sorry，The component is not ready yet\");\n      }\n      return await uploaderRef?.upload(option);\n    }\n\n    async function doEmit() {\n      const list = [];\n      for (const item of listRef.value) {\n        if (typeof item === \"string\") {\n          list.push(item);\n        } else {\n          list.push(item.value);\n        }\n      }\n      let ret = list;\n      // @ts-ignore\n      if (props.limit === 1) {\n        ret = list && list.length > 0 ? list[0] : undefined;\n      }\n      emitValue = ret;\n      ctx.emit(\"update:modelValue\", ret);\n      await formValidator.onChange();\n      await formValidator.onBlur();\n    }\n\n    function getImageSrc(item: any) {\n      return item.dataUrl ? item.dataUrl : item.url;\n    }\n\n    const previewVisible = ref(false);\n    const previewUrl = ref();\n    function preview(item: any) {\n      previewVisible.value = true;\n      previewUrl.value = getImageSrc(item);\n    }\n    function closePreview() {\n      previewVisible.value = false;\n      previewUrl.value = null;\n    }\n    watch(\n      () => {\n        // @ts-ignore\n        return props.modelValue;\n      },\n      async (val: any) => {\n        ctx.emit(\"change\", val);\n        if (val === emitValue) {\n          return;\n        }\n        await initValue(val);\n      }\n    );\n    const current = getCurrentInstance();\n    function doReady(context: any) {\n      ctx.emit(\"ready\", {\n        uploaderRef: current,\n        ...context\n      });\n    }\n\n    const computedProps = computed(() => {\n      return {\n        ...props\n      };\n    });\n    return {\n      ui,\n      cropperRef,\n      uploaderImplRef,\n      indexRef,\n      listRef,\n      addNewImage,\n      hasUploading,\n      cropComplete,\n      doUpload,\n      removeImage,\n      getImageSrc,\n      previewUrl,\n      previewVisible,\n      preview,\n      closePreview,\n      doReady,\n      computedProps\n    };\n  }\n});\n</script>\n\n<style lang=\"less\">\n.fs-cropper-uploader {\n  .fs-box {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .el-image-viewer__close {\n    color: #fff;\n  }\n  &.is-disabled {\n    .image-list {\n      .image-item {\n        cursor: not-allowed;\n      }\n    }\n    i {\n      cursor: not-allowed;\n    }\n  }\n  .image-list {\n    display: flex;\n    justify-content: left;\n    align-items: center;\n    flex-wrap: wrap;\n    .image-item {\n      width: 100px;\n      height: 100px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: #fbfdff;\n      border: 1px solid #c0ccda;\n      border-radius: 6px;\n      position: relative;\n      margin-right: 8px;\n      margin-bottom: 8px;\n      cursor: pointer;\n      overflow: hidden;\n      &.image-plus {\n        border: 1px dashed #c0ccda;\n      }\n      .cropper-uploader-icon {\n        vertical-align: top;\n        font-size: 28px;\n        color: #8c939d;\n      }\n      .image {\n        width: 100px;\n      }\n\n      .delete {\n        border-radius: 6px;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        cursor: default;\n        text-align: center;\n        color: #fff;\n        opacity: 0;\n        font-size: 20px;\n        background-color: rgba(0, 0, 0, 0.9);\n        -webkit-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n        &:hover {\n          opacity: 0.9;\n        }\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        i {\n          cursor: pointer;\n        }\n\n        display: flex;\n        > * {\n          margin: 5px;\n        }\n      }\n      .status-uploading {\n        border-radius: 6px;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        cursor: default;\n        text-align: center;\n        color: #fff;\n        opacity: 1;\n        font-size: 20px;\n        background-color: rgba(0, 0, 0, 0.5);\n        -webkit-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        .el-progress {\n          width: 70px;\n          height: 70px;\n          .el-progress__text {\n            color: #fff;\n          }\n        }\n      }\n      .status-done {\n        position: absolute;\n        right: -15px;\n        top: -6px;\n        width: 40px;\n        height: 24px;\n        background: #13ce66;\n        text-align: center;\n        -webkit-transform: rotate(45deg);\n        transform: rotate(45deg);\n        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);\n        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        .status-down-icon {\n          font-size: 12px;\n          margin-top: 11px;\n          color: #fff;\n          -webkit-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n        }\n      }\n    }\n  }\n\n  .fs-cropper-preview {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(183, 180, 180, 0.7);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    visibility: hidden;\n    z-index: 10000;\n    &.open {\n      visibility: visible;\n    }\n    .fs-cropper-preview-content {\n      max-height: 800px;\n      max-width: 800px;\n      img {\n        max-height: 800px;\n        max-width: 800px;\n        object-fit: contain;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_sfc_main","defineComponent","value","props","ctx","ui","useUi","cropperRef","ref","uploaderImplRef","indexRef","listRef","formValidator","emitValue","initValue","list","item","addNewImage","removeImage","index","doEmit","hasUploading","fileList","cropComplete","ret","blob","dataUrl","filename","blobFile","reactive","onProgress","e","onError","option","uploaded","doUpload","getUploaderImpl","useUploader","uploaderRef","getImageSrc","previewVisible","previewUrl","preview","closePreview","watch","val","current","getCurrentInstance","doReady","context","computedProps","computed","_hoisted_1","_hoisted_4","_hoisted_5","_resolveComponent","_normalizeClass","_ctx","_createElementVNode","_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_createElementBlock","_Fragment","_renderList","_mergeProps","_hoisted_2","_hoisted_3","_createCommentVNode","_component_fs_icon","_createVNode","_cache","args","_hoisted_6"],"mappings":";;;;AAgEA,MAAAA,KAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC9B;AAAA,IACA,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAIA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO;AAAA;AAAA;AAAA;AAAA,IAIP,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,MAAM;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA,IAIA,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAIA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAIA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAIA,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAIA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAIA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS,eAAgBC,GAAY;AACnC,eAAO,OAAOA,KAAU,WAAWA,EAAM,MAAMA;AAAA,MACjD;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAW;AAAA,MACT,MAAM;AAAA;AAAA,MACN,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAIA,UAAU,CAAC;AAAA,EACb;AAAA,EACA,OAAO,CAAC,qBAAqB,UAAU,OAAO;AAAA,EAC9C,MAAMC,GAAYC,GAAU;AACpB,UAAA,EAAE,IAAAC,MAAOC,MACTC,IAAkBC,KAClBC,IAAuBD,KAEvBE,IAAgBF,KAChBG,IAAeH,EAAI,CAAA,CAAE,GACrBI,IAAgBP,EAAG,SAAS,sBAAsB;AAGxD,QAAIQ,IAAiBV,EAAM;AAG3B,IAAAW,EAAUX,EAAM,UAAU;AAE1B,mBAAeW,EAAUZ,GAAY;AACnC,YAAMa,IAAY,CAAA;AACd,UAAAb,KAAS,QAAQA,MAAU,IAAI;AACjC,QAAAS,EAAQ,QAAQI;AAChB;AAAA,MACF;AACI,UAAA,OAAOb,KAAU;AAEd,QAAAa,EAAA,KAAK,EAAE,KAAK,MAAMZ,EAAM,SAASD,CAAK,GAAG,OAAAA,GAAc,QAAQ,OAAQ,CAAA;AAAA,eACnE,MAAM,QAAQA,CAAK;AAC5B,mBAAWc,KAAQd;AAEjB,UAAAa,EAAK,KAAK,EAAE,KAAK,MAAMZ,EAAM,SAASa,CAAI,GAAG,OAAOA,GAAM,QAAQ,OAAQ,CAAA;AAAA,eAEnE,OAAOd,KAAU;AAErB,QAAAa,EAAA,KAAK,EAAE,KAAK,MAAMZ,EAAM,SAASD,CAAK,GAAG,OAAAA,GAAO,QAAQ,OAAQ,CAAA;AAAA;AAErE,mBAAWc,KAAQd;AAEjB,UAAAa,EAAK,KAAK,EAAE,KAAK,MAAMZ,EAAM,SAASa,CAAI,GAAG,OAAOA,GAAM,QAAQ,OAAQ,CAAA;AAG9E,MAAAL,EAAQ,QAAQI;AAAA,IAClB;AACA,aAASE,IAAc;AAErB,MAAId,EAAM,aAGVO,EAAS,QAAQ,QACjBH,EAAW,MAAM,SACjBA,EAAW,MAAM;IACnB;AACA,aAASW,EAAYC,GAAe;AAC1B,MAAAR,EAAA,MAAM,OAAOQ,GAAO,CAAC,GACtBC;IACT;AACA,aAASC,IAAe;AACtB,YAAMC,IAAgBX,EAAQ;AAC1B,UAAAW,KAAYA,EAAS,SAAS;AAChC,mBAAWN,KAAQM;AACb,cAAAN,EAAK,WAAW;AACX,mBAAA;AAAA;AAIN,aAAA;AAAA,IACT;AACA,mBAAeO,EAAaC,GAAU;AACpC,YAAMC,IAAOD,EAAI,MACXE,IAAUF,EAAI,SAEdG,IADOH,EAAI,KACK,MAChBI,IAAW,IAAI,KAAK,CAACH,CAAI,GAAGE,GAAU,EAAE,MAAMF,EAAK,KAAA,CAAM,GAGzDT,IAAYa,EAAS;AAAA,QACzB,KAAK;AAAA,QACL,SAAAH;AAAA,QACA,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA,CACX,GACKI,IAAa,CAACC,MAAW;AAC7B,QAAAf,EAAK,WAAWe,EAAE;AAAA,MAAA,GAEdC,IAAU,CAACD,MAAW;AAC1B,QAAAf,EAAK,SAAS,SACTA,EAAA,UAAU,YAAYe,EAAE,SAC7B,QAAQ,MAAMA,CAAC;AAAA,MAAA,GAEXE,IAAS;AAAA,QACb,MAAML;AAAA,QACN,YAAAE;AAAA,QACA,SAAAE;AAAA,QACA,UAAUL;AAAA,MAAA;AAEJ,MAAAhB,EAAA,MAAM,KAAKK,CAAI;AACnB,UAAA;AACI,cAAAkB,IAAW,MAAMC,EAASF,CAAM;AACtC,YAAI/B,IAAQgC;AAER,QAAA/B,EAAM,cAAc,aAEdD,IAAAgC,EAAS/B,EAAM,SAAS,IAGlCa,EAAK,MAAM,MAAMb,EAAM,SAASD,CAAK,GACrCc,EAAK,QAAQd,GACbc,EAAK,SAAS,QACPI;eACAW,GAAG;AACV,QAAAC,EAAQD,CAAC;AAAA,MACX;AAAA,IACF;AAEA,mBAAeI,EAASF,GAAmC;AAElD,MAAAA,EAAA,UAAU9B,EAAM,YAAY,CAAA;AAC7B,YAAA,EAAE,iBAAAiC,MAAoBC;AAC5B,UAAIC,IAAc,MAAMF,EAAgBH,EAAO,QAAQ,IAAI;AAC3D,UAAIK,KAAe;AACX,cAAA,IAAI,MAAM,sCAAsC;AAEjD,aAAA,OAAMA,KAAA,gBAAAA,EAAa,OAAOL;AAAA,IACnC;AAEA,mBAAeb,IAAS;AACtB,YAAML,IAAO,CAAA;AACF,iBAAAC,KAAQL,EAAQ;AACrB,QAAA,OAAOK,KAAS,WAClBD,EAAK,KAAKC,CAAI,IAETD,EAAA,KAAKC,EAAK,KAAK;AAGxB,UAAIQ,IAAMT;AAEN,MAAAZ,EAAM,UAAU,MAClBqB,IAAMT,KAAQA,EAAK,SAAS,IAAIA,EAAK,CAAC,IAAI,SAEhCF,IAAAW,GACRpB,EAAA,KAAK,qBAAqBoB,CAAG,GACjC,MAAMZ,EAAc,YACpB,MAAMA,EAAc;IACtB;AAEA,aAAS2B,EAAYvB,GAAW;AAC9B,aAAOA,EAAK,UAAUA,EAAK,UAAUA,EAAK;AAAA,IAC5C;AAEM,UAAAwB,IAAiBhC,EAAI,EAAK,GAC1BiC,IAAajC;AACnB,aAASkC,EAAQ1B,GAAW;AAC1B,MAAAwB,EAAe,QAAQ,IACZC,EAAA,QAAQF,EAAYvB,CAAI;AAAA,IACrC;AACA,aAAS2B,IAAe;AACtB,MAAAH,EAAe,QAAQ,IACvBC,EAAW,QAAQ;AAAA,IACrB;AACA,IAAAG;AAAA,MACE,MAESzC,EAAM;AAAA,MAEf,OAAO0C,MAAa;AAElB,QADIzC,EAAA,KAAK,UAAUyC,CAAG,GAClBA,MAAQhC,KAGZ,MAAMC,EAAU+B,CAAG;AAAA,MACrB;AAAA,IAAA;AAEF,UAAMC,IAAUC;AAChB,aAASC,EAAQC,GAAc;AAC7B,MAAA7C,EAAI,KAAK,SAAS;AAAA,QAChB,aAAa0C;AAAA,QACb,GAAGG;AAAA,MAAA,CACJ;AAAA,IACH;AAEM,UAAAC,IAAgBC,EAAS,OACtB;AAAA,MACL,GAAGhD;AAAA,IAAA,EAEN;AACM,WAAA;AAAA,MACL,IAAAE;AAAA,MACA,YAAAE;AAAA,MACA,iBAAAE;AAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAA,MACA,aAAAM;AAAA,MACA,cAAAI;AAAA,MACA,cAAAE;AAAA,MACA,UAAAY;AAAA,MACA,aAAAjB;AAAA,MACA,aAAAqB;AAAA,MACA,YAAAE;AAAA,MACA,gBAAAD;AAAA,MACA,SAAAE;AAAA,MACA,cAAAC;AAAA,MACA,SAAAK;AAAA,MACA,eAAAE;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;ACpWc,MAAAE,KAAA,EAAA,OAAM,wEAI6BC,KAAM;AAAA,EAAA,KAAA;AAAA;GAGNC,KAAM;AAAA,EAAA,KAAA;AAAA;;;mDAlBtDC,EAkDM,YAAA;;IAjDJ,OA6BMC,EAAA,CAAA,uBAAA,EAAA,eAAAC,EAAA,cAAA,SAAA,CAAA,CAAA;AAAA,EAAA,GAAA;AAAA,IA3BmCC,EAAA,OAAAN,IAAA;AAAA,OAArCO,EAAA,GAAAC,EAAAC,EAkBMJ,gBAlBuB9C,IAAO,GAAA,MAAA;AAAA,QAAA,SAAAmD,EAAA,MAAA;AAAA,aAAQ,EAAK,GAAAC,EAAAC,GAAA,MAAAC,EAAAR,EAAA,SAAA,CAAAzC,GAAAG,OAAOwC,EAAA,GAAaI,EAAA,OAAA;AAAA,YAAA,KAAA5C;AAAA;;eACA,GAAAyC,EAAAC,EAAAJ,EAAA,GAAA,MAAA,IAAA,GAAAS,EAAA;AAAA,cAAA,OAAA;AAAA,cACtD,KAAAT,EAAA,YACTzC,CAEM;AAAA,YAAA,GAAA,EAFN,SAEM,GAAA,GAAAyC,EAAA,cAAA,GAAA,GAAA;AAAA,cAAA,aADJK,EAA8B,MAAA;AAAA,gBAAAJ,EAAA,OAAAS,IAAA;AAAA;;;cAIpC,GAAA;AAAA,YAAA,GACkBjB,MAAAA,CAAAA,KAAAA,CAAAA;AAAAA,YAAAA,EAAAA,OAAhBkB,IAAwG;AAAA,cAAAX,EAAA,cAAA,WAC9FY,EAAe,IAAM,EAAA,KADyEV,KAAvDC,EAAaU,GAAA;AAAA,gBAAG,KAAA;AAAA,gBAAA,MAAAb,EAAA,GAAA,MAAA;AAAA;iBACP,MAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA,cAA3Bc,EAAQD,GAAE5B;AAAAA,gBAAAA,MAAAA,EAAAA,GAAAA,MAAAA;AAAAA;cAEhC,GAAI,MAAC,GAAM,CAAA,QAAA,SAAA,CAAA;AAAA,YAAA,CAAA;AAAA,0CAC2B,GAAAqB,EAAA,OAAAV,IAAA;AAAA,eAAAM,EAAA,GAAcC,EAAaC,EAAAJ,EAAA,GAAA,SAAA,IAAA,GAAA;AAAA,gBAAG,MAAK;AAAA,gBAAA,YAAAzC,EAAA;AAAA;cAEpE,GAAI,MAAC,GAAM,CAAA,YAAA,CAAA;AAAA,YAAA,CACzB,KAAAA,EAAA,WAA2D,eAA7B+C,EAAA,OAAAT,IAAA;AAAA,cAAAiB,EAAQD,GAAkB;AAAA,gBAAA,MAAAb,EAAA,GAAA,MAAA;AAAA;;;UAIpDP,CAAAA,EAAAA,GAAAA,GAAAA;AAAAA,yFACuBa,EAAA,OAAA;AAAA,YAC5B,KAAA;AAAA,YAAA,OAAA;AAAA,YAED,SAA+DS,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAhB,EAAA,eAAAA,EAAA,YAAA,GAAAgB,CAAA;AAAA,UAAA,GAAA;AAAA,cAA1BH,GAAuB;AAAA,cAAA,MAAAb,EAAA,GAAA,MAAA;AAAA;;;;;MAIlE,CAAA;AAAA,IAAA,CAAA;AAAA,MAEUP,GAAmB;AAAA,MAC1B,KAAA;AAAA,MACA,OAAcA,EAAAA,cAAAA;AAAAA,MACd,kBAAQA,EAAoB,cAAA;AAAA,MAC5B,gBAAYA,EAAc,cAAA;AAAA,MAC1B,QAAUA,EAAAA,cAAAA;AAAAA,MACV,cAASA,EAAc,cAAA;AAAA,MACvB,YAAkBA,EAAAA,cAAAA;AAAAA,MACnB,SAAOO,EAAK,cAAA;AAAA,MACX,oBAAMlC,EAAY,cAAA;AAAA,MAClB,QAAK;AAAA,MAAA,QAAAkC,EAAA;AAAA,MAER,SAAAA,EAAA;AAAA,IAAK,GAAA,MAAK,GAAC,CAAA,SAAA,kBAAA,gBAAqCjB,UAAc,cAAA,YAAA,WAAA,oBAAA,UAAA,SAAA,CAAA;AAAA,IAAUkB,EAAA,OAAA;AAAA,MAAA,OAAAF,EAAA,CAAA,sBAAA,EAAA,MAAAC,EAAA,eAAA,CAAA,CAAA;AAAA,MACtE,SAAAe,EAAA,CAAA,MAEMA,EAFN,CAEM,IAAA,IAAAC,MAAAhB,EAAA,gBAAAA,EAAA,aAAA,GAAAgB,CAAA;AAAA,IAAA,GAAA;AAAA,MADJf,EAAA,OAAAgB,IAAA;AAAA,QAAAjB,EAAA,cAAAE,KAAuCI,EAAA,OAAA;AAAA,UAAE,KAAK;AAAA,UAAA,KAAAN,EAAA;AAAA;;;;;;;"}