init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,82 @@
+<template>
+    <div class="seller-upload-image">
+        <div v-if="!source" @drop.prevent="chooseImage('dataTransfer', $event)" @dragover.prevent>
+            <i class="isax isax-gallery-export"></i>
+            <p>{{ 'cover' in $attrs ? $t('coverImage') : '&nbsp;' }}</p>
+            <h2>{{ $t('forUploadImages') }} </h2>
+            <span @click="showImages()">{{ $t('clickHere') }}</span>
+        </div>
+        <div v-else>
+            <img :src="source" />
+            <Button :label="$t('placement')" severity="secondary" text raised @click="showImages()" />
+            <Button :label="$t('delete')" severity="secondary" text raised @click="deleteImage()" />
+        </div>
+        <input ref="input" type="file" hidden @input="chooseImage('target', $event)">
+    </div>
+</template>
+
+<script setup>
+const image = defineModel()
+const input = ref()
+const source = ref()
+
+const showImages = () => input.value.click();
+const deleteImage = () => {
+    image.value = null
+    source.value = null
+    input.value.value = null
+}
+const chooseImage = (name, e) => {
+    const binaryData = [];
+    binaryData.push(e[name].files[0]);
+    source.value = URL.createObjectURL(new Blob(binaryData, { type: "image" }))
+    image.value = e[name].files[0];
+}
+
+onMounted(() => {
+    if(image.value) source.value = image.value
+})
+</script>
+
+<style lang="scss">
+.seller-upload-image {
+    @apply w-[21.4rem] h-[21.4rem] lg:w-[24.8rem] lg:h-[24.8rem] bg-white;
+
+    &>div:not(:has(img)) {
+        @apply h-full flex flex-col justify-center items-center border border-[#47B556] border-dashed rounded-[0.6rem];
+
+
+        i {
+            @apply text-[3.1em] lg:text-[3.8em] text-[#47B556];
+        }
+
+        p {
+            @apply text-[#7F7F7F] text-[0.6em] lg:text-sm font-medium font-vazir mt-6;
+        }
+
+        h2 {
+            @apply text-[#333333] text-sm lg:text-lg font-medium font-vazir mt-1.5;
+        }
+
+        span {
+            @apply text-[#47B556] text-sm lg:text-lg font-medium font-vazir cursor-pointer;
+        }
+    }
+
+    &>div:has(img) {
+        @apply h-full flex flex-col gap-3 justify-center items-center relative;
+
+        img {
+            @apply h-full w-full absolute object-cover rounded-[0.6rem];
+        }
+
+        button {
+            @apply w-[7.5rem] h-[3.1rem] bg-white z-[1];
+        }
+
+        &::after{
+            @apply bg-[#47B556]/20 absolute content-['_'] inset-0 rounded-[0.6rem];
+        }
+    }
+}
+</style>