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 = () => {
-    dialog.show(resolveComponent('ProductDialogReport'), product)
+    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 = () => {
-    dialog.show(resolveComponent('ProductCommentDialogForm'), product)
+    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) => {
-    chips.value[i].addItem(new Event('keydown'), chips.value[i].$data.inputValue, true)
+const addChip = (key) => {
+    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">