{"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      'upload-list',\n      'list-' + listType,\n      { 'is-disabled': disabled }\n    ]\"\n    name=\"list\"\n  >\n    <li\n      v-for=\"(file, index) in files\"\n      :key=\"file.uid || file.name\"\n      :class=\"[\n        'item',\n        '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=\"focusing = false\"\n    >\n      <slot :file=\"file\" :index=\"index\">\n        <slot name=\"file-preview\" :file=\"file\" :index=\"index\">\n          <img\n            v-if=\"file.status !== 'uploading' && ['card', 'picture'].includes(listType)\"\n            class=\"item-thumb\"\n            :src=\"file.url\"\n            :crossorigin=\"crossorigin\"\n            alt=\"\"\n          >\n        </slot>\n        <slot name=\"file-icon\" :file=\"file\" :index=\"index\">\n          <hl-icon :type=\"file.status\" class=\"file-icon\">\n            <system-file />\n          </hl-icon>\n        </slot>\n        <div class=\"item-content\">\n          <a class=\"item-name\" :title=\"file.name\" @click=\"handlePreview(file)\">\n            {{ file.name }}\n          </a>\n          <hl-progress\n            v-if=\"file.status === 'uploading'\"\n            :show-as=\"listType === 'card' ? 'circle' : 'line'\"\n            :percentage=\"Number(file.percentage)\"\n          />\n        </div>\n        <div class=\"item-status\">\n          <hl-icon\n            :class=\"{\n              'icon-status': true,\n              'success': listType === 'text',\n              'icon-check': ['card', 'picture'].includes(listType)\n            }\"\n          >\n            <system-checked />\n          </hl-icon>\n          <hl-icon v-if=\"!disabled\" class=\"icon-close\" :title=\"t('hl.upload.deleteTip')\" @click=\"handleRemove(file)\">\n            <system-close />\n          </hl-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        </div>\n\n        <span v-if=\"listType === 'card'\" class=\"item-actions\">\n          <span\n            class=\"item-preview\"\n            @click.prevent=\"handlePreview(file)\"\n          >\n            <hl-icon name=\"ZoomIn\">\n              <system-zoom-in />\n            </hl-icon>\n          </span>\n          <span\n            v-if=\"!disabled\"\n            class=\"item-delete\"\n            @click=\"handleRemove(file)\"\n          >\n            <hl-icon>\n              <system-close />\n            </hl-icon>\n          </span>\n        </span>\n      </slot>\n    </li>\n    <slot name=\"append\"></slot>\n  </transition-group>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue'\nimport HlProgress from '@hongluan-ui/components/progress'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { SystemChecked, SystemZoomIn, SystemClose, SystemFile } from '@hongluan-ui/components/system-icon'\nimport { useLocale, useConsistentProp } from '@hongluan-ui/hooks'\n\nimport { uploadListEmits, uploadListProps } from './upload-list'\nimport type { UploadFile } from './upload'\n\ndefineOptions({\n  name: 'UploadList',\n})\n\ndefineProps(uploadListProps)\nconst emit = defineEmits(uploadListEmits)\n\nconst { t } = useLocale()\nconst { disabled } = useConsistentProp()\n\nconst focusing = ref(false)\n\nconst handleRemove = (file: UploadFile) => {\n  emit('remove', file)\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;oCAqGc;AAAA,EACZ,MAAM;AACR;;;;;;AAKA,UAAM,EAAE,MAAM;AACd,UAAM,EAAE,aAAa;AAErB,UAAM,WAAW,IAAI,KAAK;AAE1B,UAAM,eAAe,CAAC,SAAqB;AACzC,WAAK,UAAU,IAAI;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}