element-plus/es/components/upload/src/upload-list.mjs.map

A Component Library for Vue 3

{"version":3,"file":"upload-list.mjs","sources":["../../../../../../packages/components/upload/src/upload-list.vue"],"sourcesContent":["<template>\n  <transition-group\n    tag=\"ul\"\n    :class=\"[\n      nsUpload.b('list'),\n      nsUpload.bm('list', listType),\n      nsUpload.is('disabled', disabled),\n    ]\"\n    :name=\"nsList.b()\"\n  >\n    <li\n      v-for=\"file in files\"\n      :key=\"file.uid || file\"\n      :class=\"[\n        nsUpload.be('list', 'item'),\n        nsUpload.is(file.status),\n        { focusing },\n      ]\"\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=\"\n            file.status !== 'uploading' &&\n            ['picture-card', 'picture'].includes(listType)\n          \"\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\n          v-if=\"!disabled\"\n          :class=\"nsIcon.m('close')\"\n          @click=\"handleRemove(file)\"\n        >\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')\">{{\n          t('el.upload.deleteTip')\n        }}</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\n          v-if=\"listType === 'picture-card'\"\n          :class=\"nsUpload.be('list', 'item-actions')\"\n        >\n          <span\n            :class=\"nsUpload.be('list', 'item-preview')\"\n            @click=\"handlePreview(file)\"\n          >\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-plus/components/icon'\nimport {\n  Document,\n  Delete,\n  Close,\n  ZoomIn,\n  Check,\n  CircleCheck,\n} from '@element-plus/icons-vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport ElProgress from '@element-plus/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 { t } = useLocale()\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      t,\n      nsUpload,\n      nsIcon,\n      nsList,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_normalizeClass","_createElementBlock","_withKeys","_createCommentVNode","_withCtx"],"mappings":";;;;;;;;;;AAgHA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,OAAO,CAAC;AAAA,EACR,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,MAAM;AACd,UAAM,WAAW,aAAa;AAC9B,UAAM,SAAS,aAAa;AAC5B,UAAM,SAAS,aAAa;AAE5B,UAAM,cAAc,CAAC,SAAqB;AACxC,YAAM,cAAc;AAAA;AAGtB,UAAM,gBAAgB,CAAC,MAAa;AAClC;AAAC,MAAC,EAAE,OAAuB;AAAA;AAG7B,UAAM,eAAe,CAAC,SAAqB;AACzC,WAAK,UAAU;AAAA;AAEjB,WAAO;AAAA,MACL,UAAU,IAAI;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;SAtKEA,aAAIC;AAAA,IACP,KAAK;AAAA,WAAUC,eAAU;AAAA,MAAgB,cAAS,EAAE;AAAA,MAA0B,cAAS,GAAE,aAAa;AAAA;;;;2BAOvG;AAAA,qDAiFK;eA/EGF,aAAYG,mBAAI;AAAA,UACrB,KAAK;AAAA,UAAY,sBAAW;AAAA,YAA0B,cAAS,GAAG,QAAK;AAAA,0BAAmB;AAAA;;UAM1F,UAAO;AAAA,UACP,WAAKC,uCAAE,kBAAQ;AAAA,UACf,SAAI,sCAAE,gBAAQ;AAAA,UACd,QAAK,2CAAE;AAAA;WAER;AAAA;;cAMK,KAAK;AAAA,cACL,OAAKF,eAAQ;AAAA,cACd,KAAI,KAAE;AAAA;wCAERG,mBAGI;AAAA,+BAHK,KAAE;AAAA,cAAmC,OAAKH,eAAE,cAAY,WAAI;AAAA;eACnE;AAAA,0BAAe,oBAAE;AAAA;;yBAAsBI,QAAY;AAAA;;;oBAAU;AAAA;eAG/D,IAaQ;AAAA,+BAbK,SAAE;AAAA;eAEL;AAAA,gCADR;gBAEG,KAAK;AAAA;;yBAENA,QAAgB;AAAA;;;mDAElB,oBAKU;gBAHP,KAAK;AAAA;;yBAENA,QAAS;AAAA;;;;eAIJ;AAAA;cACN,KAAK;AAAA,cACL,OAAKJ,eAAE,cAAY;AAAA;;uBAEpBI,QAAS;AAAA;;;8CAEXD;AAAA,YACAA;AAAA,YACAA;AAAA,+BACkB;AAAA;cAAG,KAAK;AAAA,oCACxB,KAAC;AAAA,qEAGKA,mBAAW;AAAA;cAChB,KAAI;AAAA,cACJ,wBAAc,iBAAQ;AAAA,cACtB,gBAAa,KAAK,aAAU;AAAA,cAC7B;AAAA;mEAGMA,mBAAQ;AAAA,8BADhB;cAEG,KAAK;AAAA;eAEN;AAAA,iCACQ,QAAE;AAAA,gBACP,OAAKH,eAAE,iBAAc,QAAI;AAAA;iBAE1B;AAAA,4BAAe,oBAAE;AAAA;;2BAAqBI,QAAW;AAAA;;;;iBAG1C,IAAQ;AAAA;gBACd,KAAK;AAAA,gBACL,OAAKJ,eAAE,cAAY,GAAC,QAAI;AAAA;iBAEzB;AAAA,4BAAe,oBAAE;AAAA;;2BAAoBI,QAAU;AAAA;;;;;;;;;;;;;;;;;"}