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 myDomains = "my-domains"; |
||||||
export const mintCollection = "mint-collection"; |
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