Make product description collapsable

frontend/components/product/ProductHero/ProductDescription.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+// types
+
+type Props = {
+    description: string;
+};
+
+// props
+
+defineProps<Props>();
+
+// state
+
+const descriptionEl = ref<HTMLDivElement | null>(null);
+const descriptionElScrollHeight = ref(0);
+const isDescriptionCollapsed = ref(true);
+
+// watch
+
+watch(
+    () => descriptionEl.value?.scrollHeight,
+    (nv) => {
+        descriptionElScrollHeight.value = nv ?? 0;
+    },
+    {
+        immediate: true,
+    }
+);
+</script>
+
+<template>
+    <div
+        :class="descriptionElScrollHeight > 500 ? 'mb-20' : ''"
+        class="relative"
+    >
+        <div
+            ref="descriptionEl"
+            :class="descriptionElScrollHeight > 500 && isDescriptionCollapsed ? 'mask-b-from-0% max-h-[300px]' : ''"
+            class="py-8 leading-[200%] max -sm:text-sm text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
+            v-html="description"
+        />
+        <div
+            v-if="descriptionElScrollHeight > 500"
+            :class="isDescriptionCollapsed ? 'absolute' : ''"
+            class="bottom-0 inset-x-0 flex items-center justify-center"
+        >
+            <Button
+                @click="isDescriptionCollapsed = !isDescriptionCollapsed"
+                variant="primary"
+                size="md"
+                class="rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
+            >
+                مشاهده
+                {{ isDescriptionCollapsed ? "بیشتر" : "کمتر" }}
+            </Button>
+        </div>
+    </div>
+</template>

frontend/components/product/ProductHero/index.vue

@@ -73,8 +73,8 @@ watch(
                 to="#"
                 class="typo-label-sm"
             >
-                {{ product!.category.name }}</NuxtLink
-            >
+                {{ product!.category.name }}
+            </NuxtLink>
             <h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg:typo-h-2">
                 {{ product!.name }}
             </h1>
@@ -161,10 +161,7 @@ watch(
                 />
             </div>
 
-            <div
-                class="py-8 leading-[200%] max -sm:text-sm text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
-                v-html="product!.description"
-            />
+            <ProductDescription :description="product!.description" />
 
             <div class="flex items-center gap-4">
                 <span class="typo-md sm:typo-p-lg"> تنوع رنگی : </span>