nft-gallery/components/shared/DragDrop.vue at 7f47d70fd25c31abb04e090a266262355749945a · kodadot/nft-gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<template>
  <transition name="fade">
    <NeoUpload
      v-model="selectedFile"
      drag-drop
      native
      expanded
      class="hover-color"
      :accept="accept"
      @update:model-value="onFileSelected"
    >
      <div class="text-center flex justify-center p-5">
        <div
          v-if="!selectedFile"
          class="flex flex-col limit-width"
        >
          <slot name="title">
            <span class="mb-4 text-left">{{ title }}</span>
          </slot>
          <KIcon
            :name="icon"
            class="icon-size text-k-grey py-3"
            custom-size="fa-2x"
            pack="fass"
          />
          <p class="text-k-grey mt-8">
            {{ subtitle }}
          </p>
        </div>
        <img
          v-else-if="loading"
          src="~/assets/svg/preloader.svg"
          width="200"
        >
        <div
          v-else
          class="flex items-center"
        >
          <div class="flex flex-col justify-between">
            <KIcon
              name="i-mdi:check-circle-outline"
              class="check-icon text-k-green"
            />
            <div class="flex items-center mt-6 flex-col">
              <span class="text-k-grey mr-5 mb-4">
                {{ selectedFile?.name }} {{ $t('uploaded') }}
              </span>
              <span class="text-k-grey mr-5">
                {{ subtitle }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </NeoUpload>
  </transition>
</template>

<script setup lang="ts">
import { NeoUpload } from '@kodadot1/brick'

const { $i18n } = useNuxtApp()

const props = withDefaults(
  defineProps<{
    accept: string
    title?: string
    icon?: string
    subtitle?: string
    disabled?: boolean
    loading?: boolean
  }>(),
  {
    accept: '',
    title: '',
    icon: 'i-mdi:cloud-arrow-up',
    subtitle: undefined,
    disabled: false,
  },
)

const selectedFile = ref<File | null>(null)
const emit = defineEmits(['fileSelected'])
const subtitle = computed(() => props.subtitle || $i18n.t('dropUpload'))

watch(selectedFile, (newFile, oldFile) => {
  if (!newFile && oldFile) {
    selectedFile.value = oldFile
  }
})

const onFileSelected = (file: File) => {
  if (file) {
    selectedFile.value = file
    emit('fileSelected', file)
  }
}
</script>

<style lang="scss" scoped>
.icon-size {
  font-size: 3.5rem;
}

.check-icon {
  font-size: 2.5rem;
}

.limit-width {
  max-width: 25rem;
}
.hover-color:deep(.o-upl__draggable--hovered) {
  background-color: var(--k-primary-light);
}
</style>