@finema/finework-layer 0.2.38 → 0.2.40

package/.playground/app/pages/layout-admin.vue

@@ -5,20 +5,65 @@
     is-sidebar-group
     full-screen
   >
-    <p>dasdasd</p>
-    <Card> asdasdasdasdasdasd </Card>
-    <div class="bg-white p-4">
-      <Tabs
-        variant="link"
-        :items="items"
-        class="w-full"
-      />
-      <Tabs
-        orientation="vertical"
-        :items="items"
-        class="w-full"
-      />
-    </div>
+    <NuxtLayout>
+      <TeleportSafe to="#page-filters">
+        <div class="mb-4 flex items-center justify-between gap-1">
+          <div class="font-bold">
+            Filters
+            <Badge
+              v-if="countForm"
+              class="size-6 items-center justify-center rounded-full"
+              :label="countForm"
+            />
+          </div>
+          <Button
+            label="Clear all"
+            variant="ghost"
+            class="text-muted p-0 text-sm"
+            @click="form.resetForm()"
+          />
+        </div>
+        <FormFields
+          :form="form"
+          :options="formFields"
+          class="grid w-full gap-x-3"
+        />
+      </TeleportSafe>
+      <div class="mb-4 flex gap-4">
+        <FormFields
+          :form="form"
+          :options="formSearchFields"
+          class="w-full max-w-[600px] gap-3"
+        />
+        <Button
+          icon="material-symbols:filter-list-rounded"
+          variant="outline"
+          color="neutral"
+          class="w-fit"
+          @click="showFilter = !showFilter"
+        >
+          Filters
+          <Badge
+            v-if="countForm"
+            class="size-6 items-center justify-center rounded-full"
+            :label="countForm"
+          />
+        </Button>
+      </div>
+      <Card> asdasdasdasdasdasd </Card>
+      <div class="bg-white p-4">
+        <Tabs
+          variant="link"
+          :items="items"
+          class="w-full"
+        />
+        <Tabs
+          orientation="vertical"
+          :items="items"
+          class="w-full"
+        />
+      </div>
+    </NuxtLayout>
   </LayoutAdmin>
 </template>
 
@@ -26,6 +71,7 @@
 import type { NavigationMenuItem } from '@nuxt/ui'
 
 const auth = useAuth()
+const showFilter = useState('pageFilterOpen')
 const items = ref([
   {
     label: 'Account',
@@ -53,6 +99,32 @@ useApp().definePage({
   ],
 })
 
+const form = useForm({
+  validationSchema: toTypedSchema(
+    v.object({
+      q: v.optional(v.pipe(v.string()), ''),
+      status: v.optional(v.pipe(v.string()), ''),
+      user_id: v.optional(v.pipe(v.string()), ''),
+      date_range: v.nullish(
+        v.object({
+          start: v.union([v.date(), v.string()]),
+          end: v.union([v.date(), v.string()]),
+        }),
+      ),
+    }),
+  ),
+})
+
+const countForm = computed(
+  () =>
+    [
+      form.values.q,
+      form.values.status,
+      form.values.user_id,
+      form.values.date_range?.start || form.values.date_range?.end,
+    ].filter(Boolean).length,
+)
+
 auth.me.set({
   id: 'edab2396-2b6f-4855-b04e-a7c9ae9b70ae',
   created_at: '2025-09-02T10:16:37.195Z',
@@ -152,4 +224,64 @@ const sidebarItems: NavigationMenuItem[] = [
     ],
   },
 ]
+
+const formSearchFields = createFormFields(() => [
+  {
+    type: INPUT_TYPES.SEARCH,
+    props: {
+      name: 'q',
+      placeholder: 'ค้นหา',
+    },
+  },
+])
+
+const formFields = createFormFields(() => [
+  {
+    type: INPUT_TYPES.SEARCH,
+    props: {
+      name: 'q',
+      placeholder: 'ค้นหา',
+    },
+  },
+  {
+    type: INPUT_TYPES.DATE_RANGE,
+    props: {
+      label: 'Tender Date',
+      name: 'date_range',
+      placeholder: 'ระบุช่วงเวลา Tender Date',
+      clearable: true,
+    },
+  },
+  {
+    type: INPUT_TYPES.SELECT,
+    props: {
+      name: 'user_id',
+      label: 'Main Responsibility',
+      placeholder: 'Main Responsibility',
+      options: [
+        {
+          value: 'test',
+          label: 'test',
+        },
+      ],
+      searchable: true,
+      clearable: true,
+    },
+  },
+  {
+    type: INPUT_TYPES.SELECT,
+    props: {
+      name: 'status',
+      label: 'status',
+      placeholder: 'All Status',
+      clearable: true,
+      options: [
+        {
+          value: 'test',
+          label: 'test',
+        },
+      ],
+    },
+  },
+])
 </script>

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [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)
+
+### Features
+
+* filter ([93ff377](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/93ff377a0f40af2247bb89905d82a6700588a978))
+
 ## [0.2.38](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.37...0.2.38) (2025-10-30)
 
 ## [0.2.37](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.36...0.2.37) (2025-10-29)

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex min-h-screen flex-1">
+  <div class="relative flex min-h-screen flex-1 overflow-hidden">
     <div
       :class="[
         `
@@ -113,49 +113,96 @@
           </DropdownMenu>
         </div>
       </nav>
-      <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%]',
-          ]"
+
+      <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 }"
         >
-          <Breadcrumb
-            v-if="
-              !app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1
-            "
-            :items="breadcrumbsItems"
-            class="mb-6"
-            :ui="{
-              item: 'max-w-2/3',
-              list: 'w-full',
-            }"
+          <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"
           />
+          <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-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"
+            v-show="showFilter"
+            class="fixed inset-0 z-50 flex flex-col bg-black/30 md:hidden!"
+            @click.self="showFilter = false"
           >
-            <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
+              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>
-            <div id="page-header" />
           </div>
-          <slot />
-        </main>
+        </Transition>
       </div>
     </div>
   </div>
@@ -166,6 +213,7 @@ 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
@@ -174,9 +222,17 @@ 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,
@@ -216,4 +272,22 @@ 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/nuxt.config.ts

@@ -10,6 +10,9 @@ const {
 
 export default defineNuxtConfig({
   modules: ['@nuxt/eslint', '@nuxt/test-utils', '@finema/core'],
+  imports: {
+    dirs: ['./constants', './loaders', './loaders/pmo', './helpers', './types'],
+  },
   devtools: {
     enabled: true,
   },

package/package.json

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