init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,65 @@
+<template>
+    <div class="compare-product">
+        <template v-if="ids.length > 1">
+            <Button icon="isax isax-close-circle5" severity="secondary" text rounded @click="remove" />
+        </template>
+        <img :src="coverImage" :alt="title">
+        <h2>{{ title }}</h2>
+        <span>{{ numberFormat(price) }} <small>{{ $t('priceUnit') }}</small></span>
+        <Button :label="$t('addToCart')" @click="handleClick" />
+    </div>
+</template>
+
+<script setup>
+const props = defineProps(['data'])
+const { coverImage, title, price, _id: id } = props.data
+
+const route = useRoute()
+const router = useRouter()
+const ids = route.params.ids.split('-')
+const remove = () => {
+    const temp = ids.filter((item) => item != id)
+    router.push('/compare/' + temp.join('-'))
+}
+
+const handleClick = () => { }
+
+const numberFormat = (number) =>
+    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
+</script>
+
+<style lang="scss">
+.compare-product {
+    @apply relative flex flex-col items-center gap-4 w-[10.7rem] h-[16.6rem] lg:w-[28.1rem] lg:h-[25.6rem] pb-[1.7rem];
+
+    &>button.p-button-icon-only {
+        @apply absolute left-0 -top-4 p-0 text-[1.4em] lg:text-[1.6em] #{!important};
+    }
+
+    img {
+        @apply w-20 h-20 lg:w-[12.5rem] lg:h-[12.5rem];
+    }
+
+    &>h2 {
+        @apply w-[8.4rem] lg:w-[18.8rem] text-center text-zinc-800 text-sm lg:text-lg font-medium font-vazir mt-2.5 mb-0.5;
+        @apply truncate;
+    }
+
+
+    &>span {
+        @apply text-zinc-800 text-sm lg:text-lg font-medium font-vazir;
+
+        small {
+            @apply text-zinc-800 text-[0.7em] lg:text-[0.8em] font-medium font-vazir;
+        }
+    }
+
+    &>button:last-child {
+        @apply w-[6.4rem] h-[2.1rem] p-0 lg:w-[9.8rem] lg:h-12 shrink-0;
+
+        .p-button-label {
+            @apply text-white text-xs lg:text-base font-bold font-iran-sans;
+        }
+    }
+}
+</style>
@@ -0,0 +1,57 @@
+<template>
+    <section class="compare-product-list">
+        <ul>
+            <template v-for="(product, i) in items" :key="i">
+                <li v-if="i > 0">
+                    <span></span>
+                </li>
+                <li>
+                    <CompareProductCard :data="product" />
+                </li>
+            </template>
+            <li v-if="ids.length < (device == 'mobile' ? 2 : 3)">
+                <Button :label="$t('selectProduct')" outlined @click="handleCLick" />
+            </li>
+        </ul>
+    </section>
+</template>
+
+<script setup>
+const { data: items } = inject('data')
+const { device, dialog } = inject('service')
+const route = useRoute()
+const ids = route.params.ids.split('-')
+
+const handleCLick = () => {
+    dialog.show(resolveComponent('CompareDialogSelection'))
+}
+</script>
+
+<style lang="scss">
+.compare-product-list {
+    @apply w-full max-w-[112.3rem] mx-auto pt-[3.3rem] lg:pt-[4.4rem];
+
+    ul {
+        @apply flex gap-3 lg:border-b justify-center lg:justify-start;
+
+        li {
+            &:last-child:has(.p-button-outlined) {
+                @apply flex justify-center items-center w-[10.7rem] h-[16.6rem] lg:w-[28.1rem] lg:h-[25.6rem];
+
+                button {
+                    @apply w-[6.2rem] h-[2.6rem] lg:w-[8.1rem] lg:h-[3.3rem];
+
+                    span {
+                        @apply text-xs font-bold font-vazir lg:text-base lg:font-iran-sans
+                    }
+                }
+            }
+
+            &:has(>span) {
+                @apply self-stretch w-px bg-neutral-200;
+                
+            }
+        }
+    }
+}
+</style>