{"version":3,"file":"upload-list.vue2.mjs","sources":["../../../../../packages/components/upload/src/upload-list.vue"],"sourcesContent":["<template>\n  <transition-group\n    tag=\"ul\"\n    :class=\"[nsUpload.b('list'), nsUpload.bm('list', listType), nsUpload.is('disabled', disabled)]\"\n    :name=\"nsList.b()\"\n  >\n    <li\n      v-for=\"file in files\"\n      :key=\"file.uid || file\"\n      :class=\"[nsUpload.be('list', 'item'), nsUpload.is(file.status), { focusing }]\"\n      tabindex=\"0\"\n      @keydown.delete=\"!disabled && handleRemove(file)\"\n      @focus=\"focusing = true\"\n      @blur=\"focusing = false\"\n      @click=\"onFileClicked\"\n    >\n      <slot :file=\"file\">\n        <img\n          v-if=\"file.status !== 'uploading' && ['picture-card', 'picture'].includes(listType)\"\n          :class=\"nsUpload.be('list', 'item-thumbnail')\"\n          :src=\"file.url\"\n          alt=\"\"\n        />\n        <a :class=\"nsUpload.be('list', 'item-name')\" @click=\"handleClick(file)\">\n          <el-icon :class=\"nsIcon.m('document')\"><document /></el-icon>\n          {{ file.name }}\n        </a>\n        <label :class=\"nsUpload.be('list', 'item-status-label')\">\n          <el-icon\n            v-if=\"listType === 'text'\"\n            :class=\"[nsIcon.m('upload-success'), nsIcon.m('circle-check')]\"\n          >\n            <circle-check />\n          </el-icon>\n          <el-icon\n            v-else-if=\"['picture-card', 'picture'].includes(listType)\"\n            :class=\"[nsIcon.m('upload-success'), nsIcon.m('check')]\"\n          >\n            <check />\n          </el-icon>\n        </label>\n        <el-icon v-if=\"!disabled\" :class=\"nsIcon.m('close')\" @click=\"handleRemove(file)\">\n          <close />\n        </el-icon>\n        <!-- Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn-->\n        <!-- This is a bug which needs to be fixed -->\n        <!-- TODO: Fix the incorrect navigation interaction -->\n        <i v-if=\"!disabled\" :class=\"nsIcon.m('close-tip')\">按 delete 键可删除</i>\n        <el-progress\n          v-if=\"file.status === 'uploading'\"\n          :type=\"listType === 'picture-card' ? 'circle' : 'line'\"\n          :stroke-width=\"listType === 'picture-card' ? 6 : 2\"\n          :percentage=\"+file.percentage\"\n          style=\"margin-top: 0.5rem\"\n        />\n        <span v-if=\"listType === 'picture-card'\" :class=\"nsUpload.be('list', 'item-actions')\">\n          <span :class=\"nsUpload.be('list', 'item-preview')\" @click=\"handlePreview(file)\">\n            <el-icon :class=\"nsIcon.m('zoom-in')\"><zoom-in /></el-icon>\n          </span>\n          <span\n            v-if=\"!disabled\"\n            :class=\"nsUpload.be('list', 'item-delete')\"\n            @click=\"handleRemove(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('delete')\"><delete /></el-icon>\n          </span>\n        </span>\n      </slot>\n    </li>\n  </transition-group>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue'\nimport { NOOP } from '@vue/shared'\nimport { ElIcon } from '@element-ultra/components/icon'\nimport { Document, Delete, Close, ZoomIn, Check, CircleCheck } from 'icon-ultra'\nimport { useNamespace } from '@element-ultra/hooks'\nimport ElProgress from '@element-ultra/components/progress'\n\nimport type { PropType } from 'vue'\nimport type { UploadFile } from './upload.type'\n\nexport default defineComponent({\n  name: 'ElUploadList',\n  components: {\n    ElProgress,\n    ElIcon,\n    Document,\n    Delete,\n    Close,\n    ZoomIn,\n    Check,\n    CircleCheck\n  },\n  props: {\n    files: {\n      type: Array as PropType<UploadFile[]>,\n      default: () => [] as File[]\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    handlePreview: {\n      type: Function as PropType<(file: UploadFile) => void>,\n      default: () => NOOP\n    },\n    listType: {\n      type: String as PropType<'picture' | 'picture-card' | 'text'>,\n      default: 'text'\n    }\n  },\n  emits: ['remove'],\n  setup(props, { emit }) {\n    const nsUpload = useNamespace('upload')\n    const nsIcon = useNamespace('icon')\n    const nsList = useNamespace('list')\n\n    const handleClick = (file: UploadFile) => {\n      props.handlePreview(file)\n    }\n\n    const onFileClicked = (e: Event) => {\n      ;(e.target as HTMLElement).focus()\n    }\n\n    const handleRemove = (file: UploadFile) => {\n      emit('remove', file)\n    }\n    return {\n      focusing: ref(false),\n      handleClick,\n      handleRemove,\n      onFileClicked,\n      nsUpload,\n      nsIcon,\n      nsList\n    }\n  }\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAkFA,gBAAe,eAAgB,CAAA;AAAA,EAC7B,IAAM,EAAA,cAAA;AAAA,EACN,UAAY,EAAA;AAAA,IACV,UAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,GACF;AAAA,EACA,KAAO,EAAA;AAAA,IACL,KAAO,EAAA;AAAA,MACL,IAAM,EAAA,KAAA;AAAA,MACN,OAAA,EAAS,MAAM,EAAC;AAAA,KAClB;AAAA,IACA,QAAU,EAAA;AAAA,MACR,IAAM,EAAA,OAAA;AAAA,MACN,OAAS,EAAA,KAAA;AAAA,KACX;AAAA,IACA,aAAe,EAAA;AAAA,MACb,IAAM,EAAA,QAAA;AAAA,MACN,SAAS,MAAM,IAAA;AAAA,KACjB;AAAA,IACA,QAAU,EAAA;AAAA,MACR,IAAM,EAAA,MAAA;AAAA,MACN,OAAS,EAAA,MAAA;AAAA,KACX;AAAA,GACF;AAAA,EACA,KAAA,EAAO,CAAC,QAAQ,CAAA;AAAA,EAChB,KAAM,CAAA,KAAA,EAAO,EAAE,IAAA,EAAQ,EAAA;AACrB,IAAM,MAAA,QAAA,GAAW,aAAa,QAAQ,CAAA,CAAA;AACtC,IAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAClC,IAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAElC,IAAM,MAAA,WAAA,GAAc,CAAC,IAAqB,KAAA;AACxC,MAAA,KAAA,CAAM,cAAc,IAAI,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEA,IAAM,MAAA,aAAA,GAAgB,CAAC,CAAa,KAAA;AAClC,MAAA,CAAA;AAAC,MAAC,CAAA,CAAE,OAAuB,KAAM,EAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAM,MAAA,YAAA,GAAe,CAAC,IAAqB,KAAA;AACzC,MAAA,IAAA,CAAK,UAAU,IAAI,CAAA,CAAA;AAAA,KACrB,CAAA;AACA,IAAO,OAAA;AAAA,MACL,QAAA,EAAU,IAAI,KAAK,CAAA;AAAA,MACnB,WAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAC,CAAA;;;;"}