apply debug changes

components/home/PopularCategories.vue

@@ -46,9 +46,10 @@ const style = (bg) => `background: linear-gradient(143.73deg, ${bg.from} 5.62%,
             }
 
             ul {
-                @apply rtl grid grid-rows-2 grid-flow-col gap-[1.9rem] w-max mx-auto lg:gap-0 lg:gap-y-8;
+                @apply rtl grid grid-rows-2 grid-flow-col justify-items-center gap-[1.9rem] w-max mx-auto lg:gap-0 lg:gap-y-8;
 
                 li {
+                    @apply justify-self-center;
                     a {
                         @apply m-auto flex flex-col items-center;
                         @apply w-[4.6rem] h-[6rem] justify-between;

components/panel/PorfileMenu.vue

@@ -2,7 +2,7 @@
     <ul class="profile-menu">
         <li v-for="(item, i) in menu.profile" :key="i">
             <template v-if="i != 2 || user?.profile?.confirmToSales">
-                <component :is="item.link ? 'router-link': 'div'" :to="'/panel/' + item.url" @click="handleClick(item.key)"
+                <component :is="item.url ? 'router-link': 'div'" :to="'/panel/' + item.url" @click="handleClick(item.key)"
                     v-ripple>
                     <i :class="item.icon"></i>
                     <span>{{ item.label }}</span>

components/panel/dialog/password/Change.vue

@@ -13,10 +13,10 @@
                 </li>
             </ul>
             <Button v-bind="btns.save.props" :loading="loading" @click="save()" />
-            <div>
+            <!-- <div>
                 <p>{{ $t("forgetPassword") }}</p>
                 <Button v-bind="btns.recovery.props" @click="recovery()" />
-            </div>
+            </div> -->
         </div>
     </dialog>
 </template>
@@ -77,7 +77,7 @@ watch(computed(() => form), (value, old) => {
     @apply w-full lg:w-[61.6rem] lg:h-[36.9rem] bg-white rounded-t-2xl lg:rounded-2xl flex p-6 lg:p-4 lg:pl-6 relative;
 
     &::after {
-        @apply content-['_'] absolute inset-x-0 bottom-28 h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
+        @apply content-['_'] absolute inset-x-0 bottom-16 h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
     }
 
     &>img {
@@ -98,10 +98,10 @@ watch(computed(() => form), (value, old) => {
         }
 
         &>button:nth-of-type(1) {
-            @apply self-end -mt-2 -ml-2;
+            @apply self-end -ml-5 -mt-5 lg:-mt-2 lg:-ml-2;;
 
             .p-button-icon {
-                @apply text-sm text-[#333333];
+                @apply text-xl text-[#333333];
                 @apply lg:text-[2em] lg:text-[#b2b2b29b];
             }
         }

components/product/Card.vue

@@ -56,7 +56,7 @@ const numberFormat = (number) =>
 
 <style lang="scss">
 .product-card {
-    box-shadow: 0px 2px 10px 0px #87C29A;
+    box-shadow: 0px 2px 14px 0px #e5eef5;
     @apply bg-white rounded-[0.6rem] border flex flex-col relative;
 
     &>img {

components/product/Wrapper.vue

@@ -18,9 +18,13 @@
 const { swiper, btns } = inject('init')
 const { device, dialog } = inject('service')
 const product = inject('data')
+const token = useCookie('token')
+const router = useRouter()
 
 const handleClick = () => {
+    if (token.value)
         dialog.show(resolveComponent('ProductDialogReport'), product)
+    else router.push('/auth/login')
 }
 </script>
 

components/product/comment/Summary.vue

@@ -14,9 +14,13 @@
 const { btns } = inject('init')
 const product = inject('data')
 const { dialog } = inject('service')
+const token = useCookie('token')
+const router = useRouter()
 
 const handleClick = () => {
+    if (token.value)
         dialog.show(resolveComponent('ProductCommentDialogForm'), product)
+    else router.push('/auth/login')
 }
 </script>
 

components/product/comment/dialog/Form.vue

@@ -13,7 +13,7 @@
                     <component :is="item.is" ref="chips" :id="key" v-bind="item.props" v-model="form[key]" />
                     <label :for="key">{{ item.label }}</label>
                     <template v-if="['positive', 'negative'].includes(key)">
-                        <Button icon="isax isax-add" severity="secondary" text @click="addChip(i)" />
+                        <Button icon="isax isax-add" severity="secondary" text @click="addChip(key)" />
                     </template> 
                     <small v-if="errors[key]">{{ errors[key] }}</small>
                 </li>
@@ -76,8 +76,9 @@ const submit = async () => {
 
 }
 
-const addChip = (i) => {
+const addChip = (key) => {
-    chips.value[i].addItem(new Event('keydown'), chips.value[i].$data.inputValue, true)
+    const index = ['title', 'positive', 'negative'].indexOf(key)
+    chips.value[index]?.addItem(new Event('keydown'), chips.value[index].$data.inputValue, true)
 }
 
 const starsClass = (i) => (i > (form?.point || 0) ? 'opacity-25' : '')
@@ -158,6 +159,10 @@ watch(computed(() => form), (value, old) => {
 
                         .p-chips-token {
                             @apply ltr my-1;
+
+                            .p-chips-token-label {
+                                @apply font-vazir;
+                            }
                         }
                     }
                 }

components/product/dialog/Menu.vue

@@ -2,7 +2,7 @@
     <div class="product-menu">
         <ul>
             <li v-for="({ icon, label, click }, i) in meta.init.menu" :key="i" >
-                <div @click="click" v-ripple>
+                <div @click="click(dialogRef)" v-ripple>
                     <i :class="icon" />
                     <span>{{ label }}</span>
                 </div>
@@ -13,6 +13,7 @@
 
 <script setup>
 const { meta } = useRoute()
+const dialogRef = inject('dialogRef')
 </script>
 
 <style lang="scss">

initialize/mobile.js

@@ -1,5 +1,5 @@
 export default () => {
-    const store = useUserStore()
+    const token = useCookie('token')
 
     return reactive({
         btns: {
@@ -41,7 +41,7 @@ export default () => {
                 },
             },
             profile: {
-                to: computed(() => store.token ? '/panel/profile' : '/auth/login'),
+                to: computed(() => token.value ? '/panel/profile' : '/auth/login'),
                 props: {
                     icon: "isax isax-user", rounded: true, severity: "secondary", text: true,
                 },

initialize/product.js

@@ -1,13 +1,14 @@
-import ProductDialogReminder from '../components/product/dialog/Reminder.vue'
+import ProductDialogReminder from "../components/product/dialog/Reminder.vue";
-import ProductDialogMenu from '../components/product/dialog/Menu.vue'
+import ProductDialogMenu from "../components/product/dialog/Menu.vue";
-import ProductDialogShare from '../components/product/dialog/Share.vue'
+import ProductDialogShare from "../components/product/dialog/Share.vue";
-import ProductDialogLineChart from '../components/product/dialog/LineChart.vue'
+import ProductDialogLineChart from "../components/product/dialog/LineChart.vue";
 
 export default (data) => {
-    const { dialog, t } = inject('service')
+  const { dialog, t } = inject("service");
-    const fevorites = useFavoritesStore()
+  const fevorites = useFavoritesStore();
-    const cart = useCartStore()
+  const cart = useCartStore();
-    const router = useRouter()
+  const token = useCookie("token");
+  const router = useRouter();
 
   const confg = reactive({
     btns: {
@@ -19,188 +20,283 @@ export default (data) => {
           iconPos: "right",
           rounded: true,
           text: true,
-                }
+        },
       },
       arrows: [
         { icon: "isax isax-arrow-right-3", rounded: true, swiper: true },
         { icon: "isax isax-arrow-left-2", rounded: true, swiper: true },
       ],
       close: {
-                props: { icon: 'isax isax-close-circle', severity: 'secondary', rounded: true, text: true }
+        props: {
+          icon: "isax isax-close-circle",
+          severity: "secondary",
+          rounded: true,
+          text: true,
+        },
       },
       shares: {
         copyLink: {
           props: {
-                        label: t("copyLink"), icon: "isax isax-document-copy", severity: "secondary", iconPos: "right", outlined: true,
+            label: t("copyLink"),
-                    }
+            icon: "isax isax-document-copy",
+            severity: "secondary",
+            iconPos: "right",
+            outlined: true,
+          },
         },
         telegram: {
           props: {
-                        label: t("telegram"), icon: "isax isax-send-2", severity: "primary", iconPos: "right",
+            label: t("telegram"),
-                    }
+            icon: "isax isax-send-2",
+            severity: "primary",
+            iconPos: "right",
+          },
         },
         whatsapp: {
           props: {
-                        label: t("whatsapp"), icon: "isax isax-call4", severity: "success", iconPos: "right",
+            label: t("whatsapp"),
-                    }
+            icon: "isax isax-call4",
-                }
+            severity: "success",
+            iconPos: "right",
+          },
+        },
       },
       submit: {
         props: {
-                    label: t('submitComment'), outlined: true
+          label: t("submitComment"),
-                }
+          outlined: true,
+        },
       },
       sort: {
         createdAt: {
           props: {
-                        label: t("newest"), severity: "secondary", text: true,
+            label: t("newest"),
-                    }
+            severity: "secondary",
+            text: true,
+          },
         },
         point: {
           props: {
-                        label: t("mostUseful"), severity: "secondary", text: true,
+            label: t("mostUseful"),
-                    }
+            severity: "secondary",
+            text: true,
+          },
+        },
       },
-            }
     },
     swiper: {
-            gallery: { pagination: { dynamicBullets: true }, modules: [SwiperPagination] },
+      gallery: {
+        pagination: { dynamicBullets: true },
+        modules: [SwiperPagination],
+      },
       similars: {
-                slidesPerView: 'auto',
+        slidesPerView: "auto",
         modules: [SwiperNavigation],
         navigation: {
           prevEl: "div>button[swiper]:first-of-type",
           nextEl: "div>button[swiper]:last-of-type",
         },
-            }
+      },
     },
     chart: {
       setChartData: (prices, dates) => {
-                var ctx = document.getElementsByTagName('canvas')[0].getContext('2d')
+        var ctx = document.getElementsByTagName("canvas")[0].getContext("2d");
-                var gradient = ctx.createLinearGradient(0, 0, 0, 400)
+        var gradient = ctx.createLinearGradient(0, 0, 0, 400);
-                gradient.addColorStop(0, 'rgba(1, 86, 153, 0.62')
+        gradient.addColorStop(0, "rgba(1, 86, 153, 0.62)");
-                gradient.addColorStop(1, 'rgba(1, 86, 153, 0)')
+        gradient.addColorStop(1, "rgba(1, 86, 153, 0)");
-                const labels = []
+        const labels = [];
-                const data = []
+        const data = [];
         prices
-                    .filter((item) => {
+          // .filter((item) => {
-                        return (
+          //     return (
-                            new Date(item.date) >= new Date(dates.from) &&
+          //         new Date(item.date) >= new Date(dates.from) &&
-                            new Date(item.date) <= new Date(dates.to)
+          //         new Date(item.date) <= new Date(dates.to)
-                        )
+          //     )
-                    })
+          // })
           .forEach(({ date, price }) => {
             labels.push(
-                            new Date(date).toLocaleDateString('fa', { month: 'long', year: 'numeric' })
+              new Date(date).toLocaleDateString("fa", {
-                        )
+                month: "long",
-                        data.push(price + ' T')
+                year: "numeric",
               })
+            );
+            data.push(price);
+          });
 
         return {
           labels,
           datasets: [
             {
-                            label: '', data, fill: true, tension: 0.4, borderColor: '#379956', backgroundColor: gradient
+              label: "",
-                        }
+              data,
-                    ]
+              fill: true,
-                }
+              tension: 0.4,
+              borderColor: "#379956",
+              backgroundColor: gradient,
+            },
+          ],
+        };
       },
       setChartOptions: () => {
         return {
           maintainAspectRatio: false,
           aspectRatio: 0.6,
           plugins: { legend: { display: false } },
-                    scales: { x: { grid: { display: false } } }
+          scales: {
-                }
+            x: { grid: { display: false } },
-            }
+            y: {
+              display: true,
+              title: {
+                display: true,
+                text: "Toman",
+              },
+            },
+          },
+        };
+      },
     },
     menu: {
       share: {
-                label: t('shareProduct'), icon: "isax isax-share",
+        label: t("shareProduct"),
-                click: () => dialog.show(ProductDialogShare, data)
+        icon: "isax isax-share",
+        click: () => dialog.show(ProductDialogShare, data),
       },
       reminder: {
-                label: t('amazingInformation'), icon: "isax isax-notification4",
+        label: t("amazingInformation"),
-                click: () => dialog.show(ProductDialogReminder, data)
+        icon: "isax isax-notification4",
+        click: (dialogRef) => {
+          if (token.value) dialog.show(ProductDialogReminder, data);
+          else {
+            dialogRef.close();
+            router.push("/auth/login");
+          }
+        },
       },
       chart: {
-                label: t('priceChart'), icon: "isax isax-chart-2",
+        label: t("priceChart"),
-                click: () => dialog.show(ProductDialogLineChart, data)
+        icon: "isax isax-chart-2",
+        click: () => dialog.show(ProductDialogLineChart, data),
       },
       compare: {
-                label: t('compareProduct'), icon: "isax isax-row-horizontal4",
+        label: t("compareProduct"),
-                click: () => router.push('/compare/' + data.id)
+        icon: "isax isax-row-horizontal4",
-            }
+        click: () => router.push("/compare/" + data.id),
+      },
     },
     options: {
       favorite: {
         props: {
-                    severity: "secondary", text: true, rounded: true,
+          severity: "secondary",
-                    icon: computed(() =>
+          text: true,
-                        `isax isax-heart${fevorites.find(data.id) ? '5' : ''}`
+          rounded: true,
-                    )
+          icon: computed(
+            () => `isax isax-heart${fevorites.find(data.id) ? "5" : ""}`
+          ),
+        },
+        click: () => {
+          if (token.value) fevorites.update(data.id);
+          else router.push("/auth/login");
         },
-                click: () => fevorites.update(data.id)
       },
       cart: {
         props: {
-                    icon: "isax isax-shopping-cart", severity: "secondary", text: true, rounded: true,
+          icon: "isax isax-shopping-cart",
-                    badges: computed(() => cart.items.length)
+          severity: "secondary",
+          text: true,
+          rounded: true,
+          badges: computed(() => cart.items.length),
         },
-                click: () => router.push('/checkout/cart')
+        click: () => router.push("/checkout/cart"),
       },
       menu: {
         props: {
-                    icon: "isax isax-more rotate-90", severity: "secondary", text: true, rounded: true,
+          icon: "isax isax-more rotate-90",
+          severity: "secondary",
+          text: true,
+          rounded: true,
         },
-                click: () => dialog.show(ProductDialogMenu, confg.menu, { dismissableMask: true })
+        click: () =>
+          dialog.show(ProductDialogMenu, confg.menu, { dismissableMask: true }),
       },
     },
     actions: {
       favorite: {
         props: {
-                    severity: "secondary", text: true, rounded: true, icon: computed(() => {
+          severity: "secondary",
-                        const like = fevorites.find(data.id)
+          text: true,
-                        return `isax isax-heart${like ? '5' : ''}`
+          rounded: true,
-                    })
+          icon: computed(() => {
+            const like = fevorites.find(data.id);
+            return `isax isax-heart${like ? "5" : ""}`;
+          }),
+        },
+        click: () => {
+          if (token.value) fevorites.update(data.id);
+          else router.push("/auth/login");
         },
-                click: () => fevorites.update(data.id),
       },
       share: {
         props: {
-                    icon: "isax isax-share", severity: "secondary", text: true, rounded: true,
+          icon: "isax isax-share",
+          severity: "secondary",
+          text: true,
+          rounded: true,
         },
-                click: () => dialog.show(ProductDialogShare, data)
+        click: () => dialog.show(ProductDialogShare, data),
       },
       reminder: {
         props: {
-                    icon: "isax isax-notification4", severity: "secondary", text: true, rounded: true,
+          icon: "isax isax-notification4",
+          severity: "secondary",
+          text: true,
+          rounded: true,
         },
-                click: () => dialog.show(ProductDialogReminder, data)
+        click: () => {
+            if (token.value)
+                dialog.show(ProductDialogReminder, data)
+            else router.push('/auth/login')
+        }
       },
       chart: {
         props: {
-                    icon: "isax isax-chart-2", severity: "secondary", text: true, rounded: true,
+          icon: "isax isax-chart-2",
+          severity: "secondary",
+          text: true,
+          rounded: true,
         },
-                click: () => dialog.show(ProductDialogLineChart, data)
+        click: () => dialog.show(ProductDialogLineChart, data),
       },
       compare: {
         props: {
-                    icon: "isax isax-row-horizontal4", severity: "secondary", text: true, rounded: true,
+          icon: "isax isax-row-horizontal4",
+          severity: "secondary",
+          text: true,
+          rounded: true,
         },
-                click: () => router.push('/compare/' + data.id)
+        click: () => router.push("/compare/" + data.id),
       },
     },
     checkboxes: {
       reminder: ["sms", "notif", "email"],
       report: [
-                "incorrectName", "inappropriatePhoto", "incorrectSpecs", "incorrectDesc", "notOriginal", "duplicate",
+        "incorrectName",
-            ]
+        "inappropriatePhoto",
+        "incorrectSpecs",
+        "incorrectDesc",
+        "notOriginal",
+        "duplicate",
+      ],
     },
     sorts: [
-            "mostRelevant", "mostVisited", "newest", "bestselling", "cheapest", "mostExpensive", "buyersSuggestion",
+      "mostRelevant",
-        ]
+      "mostVisited",
-    })
+      "newest",
+      "bestselling",
+      "cheapest",
+      "mostExpensive",
+      "buyersSuggestion",
+    ],
+  });
 
   return confg;
-}
+};

layouts/mobile.vue

@@ -15,7 +15,7 @@ const { config } = useAttrs()
 const { header = true, navigation = true } = config.mobile
 provide('config', config)
 
-const { status, data } = await useFetch('/api/headers')
+const { status, data, error } = await useFetch('/api/headers')
 
 if (status.value == 'success')
     sidebar.props = { menu: data.value }