xdesign-vue-next/es/upload/themes/image-card.mjs.map

XDesign Component for vue-next

{"version":3,"file":"image-card.mjs","sources":["../../../src/upload/themes/image-card.tsx"],"sourcesContent":["import { defineComponent, PropType, toRefs, computed } from 'vue';\nimport Loading from '../../loading';\nimport ImageViewer from '../../image-viewer';\nimport { CommonDisplayFileProps } from '../interface';\nimport { commonProps } from '../constants';\nimport { TdUploadProps, UploadFile } from '../type';\nimport { abridgeName } from '../../_common/js/upload/utils';\nimport { UploadConfig } from '../../config-provider';\nimport { useTNodeJSX } from '../../hooks';\nimport Link from '../../link';\nimport Image from '../../image';\n\nexport interface ImageCardUploadProps extends CommonDisplayFileProps {\n  multiple: TdUploadProps['multiple'];\n  max: TdUploadProps['max'];\n  disabled?: TdUploadProps['disabled'];\n  showUploadProgress: TdUploadProps['showUploadProgress'];\n  triggerUpload?: (e: MouseEvent) => void;\n  uploadFiles?: (toFiles?: UploadFile[]) => void;\n  cancelUpload?: (context: { e: MouseEvent; file: UploadFile }) => void;\n  onPreview?: TdUploadProps['onPreview'];\n}\n\nexport default defineComponent({\n  name: 'UploadImageCard',\n\n  props: {\n    ...commonProps,\n    multiple: Boolean,\n    max: Number,\n    disabled: Boolean,\n    showUploadProgress: Boolean,\n    triggerUpload: Function as PropType<ImageCardUploadProps['triggerUpload']>,\n    uploadFiles: Function as PropType<ImageCardUploadProps['uploadFiles']>,\n    cancelUpload: Function as PropType<ImageCardUploadProps['cancelUpload']>,\n    onPreview: Function as PropType<ImageCardUploadProps['onPreview']>,\n  },\n\n  setup(props) {\n    const { displayFiles, classPrefix, multiple, max } = toRefs(props);\n    const locale = computed(() => props.locale as UploadConfig);\n    const renderTNodeJSX = useTNodeJSX();\n\n    const showTrigger = computed(() => {\n      if (multiple.value) {\n        return !max.value || displayFiles.value.length < max.value;\n      }\n      return !displayFiles.value?.[0];\n    });\n\n    const renderMainContent = (file: UploadFile, index: number) => {\n      return (\n        <div class={`${classPrefix.value}-upload__card-content ${classPrefix.value}-upload__card-box`}>\n          <Image class={`${classPrefix.value}-upload__card-image`} src={file.url || file.raw} error=\"\" />\n          <div class={`${classPrefix.value}-upload__card-mask`}>\n            <span class={`${classPrefix.value}-upload__card-mask-item`} onClick={(e) => e.stopPropagation()}>\n              <ImageViewer\n                images={displayFiles.value.map((t: UploadFile) => t.url || t.raw)}\n                defaultIndex={index}\n                trigger={(h, { open }) => {\n                  return (\n                    <icon-ri-eye-line\n                      onClick={({ e }: { e: MouseEvent }) => {\n                        props.onPreview?.({ file, index, e });\n                        open();\n                      }}\n                    />\n                  );\n                }}\n              ></ImageViewer>\n            </span>\n            {!props.disabled && (\n              <>\n                <span class={`${classPrefix.value}-upload__card-mask-item-divider`} />\n                <span class={`${classPrefix.value}-upload__card-mask-item`} onClick={(e) => e.stopPropagation()}>\n                  <icon-ri-delete-bin-2-line onClick={({ e }: { e: MouseEvent }) => props?.onRemove?.({ e, file, index })} />\n                </span>\n              </>\n            )}\n          </div>\n        </div>\n      );\n    };\n\n    const renderProgressFile = (file: UploadFile, loadCard: string) => {\n      return (\n        <div class={[loadCard, `${classPrefix.value}-upload__${props.theme}-${file.status}`]}>\n          <Loading loading={true} size=\"medium\" />\n          <p>\n            {locale.value?.progress?.uploadingText}\n            {props.showUploadProgress ? ` ${file.percent}%` : ''}\n          </p>\n        </div>\n      );\n    };\n\n    const renderFailFile = (file: UploadFile, index: number, loadCard: string) => {\n      return (\n        <div class={loadCard}>\n          <icon-ri-error-warning-fill />\n          <p>{file.response?.error || locale.value?.progress?.failText}</p>\n          <div class={`${classPrefix.value}-upload__card-mask`}>\n            <span class={`${classPrefix.value}-upload__card-mask-item`} onClick={(e) => e.stopPropagation()}>\n              <icon-ri-delete-bin-2-line onClick={({ e }: { e: MouseEvent }) => props?.onRemove?.({ e, file, index })} />\n            </span>\n          </div>\n        </div>\n      );\n    };\n\n    return () => {\n      // render custom UI with fileListDisplay\n      const customList = renderTNodeJSX('fileListDisplay', {\n        params: {\n          files: displayFiles.value,\n        },\n      });\n      if (customList) return customList;\n\n      const cardItemClasses = `${classPrefix.value}-upload__card-item ${classPrefix.value}-is-background`;\n      return (\n        <div>\n          <ul class={`${classPrefix.value}-upload__card`}>\n            {displayFiles.value?.map((file: UploadFile, index: number) => {\n              const fileNameClassName = `${classPrefix.value}-upload__card-name`;\n\n              const loadCard = `${classPrefix.value}-upload__card-container ${classPrefix.value}-upload__card-box`;\n              const fileName = props.abridgeName ? abridgeName(file.name, ...props.abridgeName) : file.name;\n              return (\n                <li class={cardItemClasses} key={index}>\n                  {file.status === 'progress' && renderProgressFile(file, loadCard)}\n                  {file.status === 'fail' && renderFailFile(file, index, loadCard)}\n                  {!['progress', 'fail'].includes(file.status) && renderMainContent(file, index)}\n                  {fileName &&\n                    (file.url ? (\n                      <Link href={file.url} class={fileNameClassName} target=\"_blank\" hover=\"color\" size=\"small\">\n                        {fileName}\n                      </Link>\n                    ) : (\n                      <span class={fileNameClassName}>{fileName}</span>\n                    ))}\n                </li>\n              );\n            })}\n\n            {showTrigger.value && !props.disabled && (\n              <li class={cardItemClasses} onClick={props.triggerUpload}>\n                <div\n                  class={[\n                    `${classPrefix.value}-upload__image-add`,\n                    `${classPrefix.value}-upload__card-container`,\n                    `${classPrefix.value}-upload__card-box`,\n                  ]}\n                >\n                  <icon-ri-add-line />\n                  <p class={`${classPrefix.value}-size-s`}>{locale.value?.triggerUploadText?.image}</p>\n                </div>\n              </li>\n            )}\n          </ul>\n        </div>\n      );\n    };\n  },\n});\n"],"names":["_isVNode","name","props","multiple","max","disabled","showUploadProgress","triggerUpload","uploadFiles","cancelUpload","onPreview","_createVNode","_resolveComponent","file","index","e","open","params"],"mappings":"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"}