From 76b2fa4771cb898e09017c88d6ebf7f93d9ab46c Mon Sep 17 00:00:00 2001
From: MoreStrive <minhnguyenyh2020@gmail.com>
Date: Mon, 8 Jul 2024 17:03:33 +0700
Subject: [PATCH] minhnt-dev: scroll smooth

---
 assets/styles/style.scss                       |  1 +
 .../templates/sections/articles/Default.vue    | 18 ++++++++----------
 nuxt.config.ts                                 |  4 ++++
 plugins/scroll.plugin.ts                       |  5 +++++
 4 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 plugins/scroll.plugin.ts

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index 4ac11b6..ca167d5 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -20,6 +20,7 @@ $color-line: #EDEDED;
 body {
     font-size: 14px;
     font-family: $font-raleway;
+    scroll-behavior: smooth;
 }
 
 // %headings {
diff --git a/components/dynamic-page/page-component/templates/sections/articles/Default.vue b/components/dynamic-page/page-component/templates/sections/articles/Default.vue
index 52343ae..ddf89dc 100644
--- a/components/dynamic-page/page-component/templates/sections/articles/Default.vue
+++ b/components/dynamic-page/page-component/templates/sections/articles/Default.vue
@@ -4,10 +4,7 @@ import { getInputValue } from "@/utils/parseSQL";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 const router = useRouter();
 const route = useRoute();
-
-const store = reactive({
-  component: useDynamicPageStore(),
-});
+import { useScroll } from '@vueuse/core';
 
 const _props = defineProps<{
   dataResult?: any[];
@@ -108,10 +105,11 @@ const mapActivesToItems = (index: number) => {
   }
   return {};
 };
+
 </script>
 
 <template>
-  <section v-if="listArticleByCategory?.length > 0">
+  <section :id="`cpn_[${_props.component.id}]`" v-if="listArticleByCategory?.length > 0">
     <div class="section-container">
       <div class="section-layout" :style="designObject['div.section']">
         <template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory" :key="index">
@@ -126,13 +124,13 @@ const mapActivesToItems = (index: number) => {
           />
         </template>
         <div class="button-page flex">
-          <span class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
+          <a :href="`#cpn_[${_props.component.id}]`" class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
             <Icon name="ooui:previous-ltr"></Icon>
-          </span>
-          <span :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</span>
-          <span class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
+          </a>
+          <a :href="`#cpn_[${_props.component.id}]`" :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)" :key="index">{{ index + 1 }}</a>
+          <a :href="`#cpn_[${_props.component.id}]`" class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
             <Icon name="ooui:previous-rtl"></Icon>
-          </span>
+          </a>
         </div>
       </div>
     </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index afb9559..ecc29b6 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -15,6 +15,10 @@ export default defineNuxtConfig({
     },
   },
 
+  plugins: [
+    '~/plugins/scroll.plugin',
+  ],
+
   modules: [
     '@nuxt/image',
     "@unocss/nuxt",
diff --git a/plugins/scroll.plugin.ts b/plugins/scroll.plugin.ts
new file mode 100644
index 0000000..6137cff
--- /dev/null
+++ b/plugins/scroll.plugin.ts
@@ -0,0 +1,5 @@
+export default defineNuxtPlugin((nuxtApp : any) => {
+    nuxtApp.$router.options.scrollBehavior = () => {
+      return { left: 0, top: 0 }
+    }
+})
\ No newline at end of file