hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 4.21 kB
Source Map (JSON)
{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}