Aleksandr Bautin
1 year ago
8 changed files with 336 additions and 12 deletions
@ -0,0 +1,98 @@
|
||||
<template> |
||||
<div class="drag-drop-uploader"> |
||||
<div class="drag-drop-area" @dragover="handleDragOver" @drop="handleDrop"> |
||||
<template v-if="uploadedFiles.length === 0"> |
||||
<button class="button" type="button" @click="openFileInput"> |
||||
Add File |
||||
</button> |
||||
<p>...or drag and drop a file.</p> |
||||
</template> |
||||
<template v-else> |
||||
<button |
||||
class="button" |
||||
type="button" |
||||
v-if="uploadedFiles.length > 0" |
||||
@click="openFileInput" |
||||
> |
||||
Change |
||||
</button> |
||||
<p>{{ uploadedFiles.at(-1).name }}</p> |
||||
</template> |
||||
</div> |
||||
<input |
||||
type="file" |
||||
ref="fileInput" |
||||
style="display: none" |
||||
@change="handleFileInput" |
||||
multiple |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
uploadedFiles: [], |
||||
}; |
||||
}, |
||||
methods: { |
||||
handleDragOver(event) { |
||||
event.preventDefault(); |
||||
}, |
||||
handleDrop(event) { |
||||
event.preventDefault(); |
||||
const files = event.dataTransfer.files; |
||||
this.uploadFiles(files); |
||||
}, |
||||
openFileInput() { |
||||
this.$refs.fileInput.click(); |
||||
}, |
||||
handleFileInput(event) { |
||||
const files = event.target.files; |
||||
this.uploadFiles(files); |
||||
}, |
||||
uploadFiles(files) { |
||||
console.log(files); |
||||
for (let i = 0; i < files.length; i++) { |
||||
this.uploadedFiles.push(files[i]); |
||||
} |
||||
}, |
||||
change() { |
||||
this.openFileInput(); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.drag-drop-uploader { |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.drag-drop-area { |
||||
display: grid; |
||||
align-content: center; |
||||
border: 2px dashed #ccc; |
||||
border-radius: 10px; |
||||
padding: 20px; |
||||
text-align: center; |
||||
} |
||||
|
||||
ul { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.button { |
||||
justify-self: center; |
||||
border: 0; |
||||
border-radius: 0.5rem; |
||||
height: 3rem; |
||||
background-color: #e36464; |
||||
color: #363e5e; |
||||
font-size: 1.3rem; |
||||
font-weight: 500; |
||||
padding: 0 1rem; |
||||
cursor: pointer; |
||||
} |
||||
</style> |
||||
@ -1,2 +1,3 @@
|
||||
export const myDomains = "my-domains"; |
||||
export const mintCollection = "mint-collection"; |
||||
export const addTemplate = "add-template"; |
||||
|
||||
@ -0,0 +1,134 @@
|
||||
<template> |
||||
<DarkLayout> |
||||
<form class="form"> |
||||
<div class="input-wrapper"> |
||||
<label for="template-name">Template name</label> |
||||
<input v-model="name" class="input" id="template-name" type="text" /> |
||||
</div> |
||||
<DragDropUploader class="dnd" /> |
||||
<div v-for="(_, i) in fields" class="input-wrapper"> |
||||
<div class="fields-wrapper"> |
||||
<div class="input-wrapper"> |
||||
<label :for="`field-${i}`">Field {{ i + 1 }}</label> |
||||
<input |
||||
placeholder="Name" |
||||
v-model="fields[i].name" |
||||
class="input" |
||||
:id="`field-${i}`" |
||||
type="text" |
||||
/> |
||||
</div> |
||||
<div> |
||||
<input |
||||
placeholder="Value" |
||||
v-model="fields[i].value" |
||||
class="input" |
||||
:id="`field-${i}`" |
||||
type="text" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<button |
||||
class="button button-plus" |
||||
style="justify-self: start" |
||||
type="button" |
||||
@click="fields.push({ name: '', value: '' })" |
||||
> |
||||
+ |
||||
</button> |
||||
<button class="button" type="button">Submit</button> |
||||
</form> |
||||
<template v-slot:header> |
||||
<router-link to="/find"> |
||||
<button class="b darkish back"> |
||||
<img src="../assets/icons/ton_left.svg" alt="TON" /> |
||||
Back |
||||
</button> |
||||
</router-link> |
||||
</template> |
||||
</DarkLayout> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref } from "vue"; |
||||
import DarkLayout from "../components/DarkLayout.vue"; |
||||
import DragDropUploader from "@/components/DnD.vue"; |
||||
|
||||
const name = ref(""); |
||||
|
||||
const fields = ref([{ name: "", value: "" }]); |
||||
</script> |
||||
|
||||
<style> |
||||
.input-wrapper { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: start; |
||||
} |
||||
|
||||
.input { |
||||
display: block; |
||||
width: 100%; |
||||
min-height: 40px; |
||||
border: 0; |
||||
border-radius: 10px; |
||||
padding: 12px 24px; |
||||
background-color: #4e5a88; |
||||
color: white; |
||||
font-size: 24px; |
||||
font-family: "Raleway", serif; |
||||
} |
||||
|
||||
input::-webkit-outer-spin-button, |
||||
input::-webkit-inner-spin-button { |
||||
-webkit-appearance: none; |
||||
margin: 0; |
||||
} |
||||
|
||||
.form { |
||||
display: grid; |
||||
gap: 24px; |
||||
min-width: 600px; |
||||
} |
||||
|
||||
.button { |
||||
border: 0; |
||||
border-radius: 0.5rem; |
||||
height: 3rem; |
||||
background-color: #e36464; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
place-items: center; |
||||
justify-self: end; |
||||
color: #363e5e; |
||||
font-size: 1.3rem; |
||||
font-weight: 500; |
||||
padding: 0 1rem; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.button-plus { |
||||
background-color: #4e5a88; |
||||
color: white; |
||||
} |
||||
|
||||
.info { |
||||
width: 600px; |
||||
font-size: 16px; |
||||
text-align: right; |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.fields-wrapper { |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
align-items: end; |
||||
gap: 40px; |
||||
} |
||||
|
||||
.dnd { |
||||
width: 600px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue