@finema/finework-layer 0.2.40 → 0.2.42

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.2.42](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.41...0.2.42) (2025-10-31)
+
+### Bug Fixes
+
+* layout ([120936a](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/120936a020d8a86a8a912c62734ee754e699f380))
+
+## [0.2.41](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.40...0.2.41) (2025-10-31)
+
+### Bug Fixes
+
+* close filter when change path ([1155826](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/115582692e93d88b1c9c59a6ee1b0322233c8aff))
+
 ## [0.2.40](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.39...0.2.40) (2025-10-31)
 
 ## [0.2.39](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.38...0.2.39) (2025-10-31)

package/app/components/Layout/Admin/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex min-h-screen flex-1 overflow-hidden">
+  <div class="relative flex min-h-screen flex-1">
     <div
       :class="[
         `
@@ -113,96 +113,49 @@
           </DropdownMenu>
         </div>
       </nav>
-
-      <div class="flex transition-all">
-        <div
-          class="flex-1 bg-gray-50 pt-[64px] transition-[padding] duration-300 ease-in-out lg:pt-[72px]"
-          :class="{ 'md:pr-80': showFilter }"
+      <div class="w-full bg-gray-50 pt-[64px] lg:pt-[72px]">
+        <main
+          :class="[
+            'mx-auto min-h-full flex-1 px-6 py-10 lg:px-8',
+            fullScreen ? 'w-full 2xl:max-w-[90%]' : 'max-w-7xl 2xl:max-w-[70%]',
+          ]"
         >
-          <main
-            :class="[
-              'mx-auto min-h-full flex-1 px-6 py-10 lg:px-8',
-              fullScreen ? 'w-full' : 'max-w-7xl 2xl:max-w-[70%]',
-            ]"
-          >
-            <Breadcrumb
-              v-if="
-                !app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1
-              "
-              :items="breadcrumbsItems"
-              class="mb-6"
-              :ui="{
-                item: 'max-w-2/3',
-                list: 'w-full',
-              }"
-            />
-            <div
-              v-if="app.pageMeta.title"
-              class="mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4 lg:flex-row lg:items-start"
-            >
-              <div class="flex flex-1 flex-col">
-                <h1
-                  class="text-3xl font-bold wrap-break-word lg:max-w-2/3"
-                  :title="app.pageMeta.title"
-                >
-                  {{ app.pageMeta.title }}
-                  <span id="page-title-extra" />
-                </h1>
-
-                <div id="page-subtitle" />
-                <p
-                  v-if="app.pageMeta.sub_title"
-                  class="text-[#475467]"
-                >
-                  {{ app.pageMeta.sub_title }}
-                </p>
-              </div>
-              <div id="page-header" />
-            </div>
-            <slot />
-          </main>
-        </div>
-        <DefineTemplate>
-          <Button
-            icon="i-heroicons-x-mark"
-            variant="ghost"
-            color="neutral"
-            class="mb-3 ml-auto flex p-0 md:mt-3"
-            @click="showFilter = false"
+          <Breadcrumb
+            v-if="
+              !app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1
+            "
+            :items="breadcrumbsItems"
+            class="mb-6"
+            :ui="{
+              item: 'max-w-2/3',
+              list: 'w-full',
+            }"
           />
-          <div id="page-filters" />
-        </DefineTemplate>
-        <!-- แผง Filter (push ข้างๆ)  Desktop -->
-        <div
-          v-if="!isMobile"
-          v-show="showFilter"
-          class="fixed top-0 right-0 hidden h-screen w-80 transform flex-col border-l border-gray-200 bg-white shadow-lg transition-transform duration-300 ease-in-out md:flex!"
-          :class="showFilter ? 'translate-x-0' : 'translate-x-full'"
-        >
-          <div class="flex-1 overflow-y-auto px-4 pt-[64px]! lg:pt-[72px]!">
-            <ReuseTemplate />
-          </div>
-        </div>
-        <!-- mobile -->
-        <Transition
-          v-else
-          name="slide-up"
-        >
           <div
-            v-show="showFilter"
-            class="fixed inset-0 z-50 flex flex-col bg-black/30 md:hidden!"
-            @click.self="showFilter = false"
+            v-if="app.pageMeta.title"
+            class="mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4 lg:flex-row lg:items-start"
           >
-            <div
-              class="mt-auto flex max-h-[80vh] w-full flex-col rounded-t-2xl bg-white shadow-lg"
-            >
-              <!-- scrollable content -->
-              <div class="flex-1 overflow-y-auto p-4">
-                <ReuseTemplate />
-              </div>
+            <div class="flex flex-1 flex-col">
+              <h1
+                class="text-3xl font-bold wrap-break-word lg:max-w-2/3"
+                :title="app.pageMeta.title"
+              >
+                {{ app.pageMeta.title }}
+                <span id="page-title-extra" />
+              </h1>
+
+              <div id="page-subtitle" />
+              <p
+                v-if="app.pageMeta.sub_title"
+                class="text-[#475467]"
+              >
+                {{ app.pageMeta.sub_title }}
+              </p>
             </div>
+            <div id="page-header" />
           </div>
-        </Transition>
+          <slot />
+        </main>
       </div>
     </div>
   </div>
@@ -213,7 +166,6 @@ import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
 import { computed } from 'vue'
 import Sidebar from './Sidebar.vue'
 import Apps from '../Apps.vue'
-import { createReusableTemplate, useBreakpoints } from '@vueuse/core'
 
 defineProps<{
   label: string
@@ -222,17 +174,9 @@ defineProps<{
   fullScreen?: boolean
 }>()
 
-const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
 const app = useApp()
 const isShowSidebarMobile = ref(false)
-const showFilter = useState('pageFilterOpen', () => false)
 const auth = useAuth()
-const breakpoints = useBreakpoints({
-  mobile: 0,
-  desktop: 768,
-})
-
-const isMobile = breakpoints.smaller('desktop')
 // Cookie to store user preference for desktop
 const isCollapsed = useCookie<boolean>('app.admin.sidebar.isCollapsed', {
   default: () => false,
@@ -272,22 +216,4 @@ const breadcrumbsItems = computed(() => {
 
   return [home, ...extra]
 })
-
-watch(isMobile, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    window.location.reload()
-  }
-})
 </script>
-
-<style scoped>
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-}
-.slide-enter-from,
-.slide-leave-to {
-  transform: translateX(100%);
-  opacity: 0;
-}
-</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finema/finework-layer",
   "type": "module",
-  "version": "0.2.40",
+  "version": "0.2.42",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground -o",