@finema/finework-layer 0.2.67 → 0.2.69

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

@@ -1,275 +1,275 @@
-<template>
-  <LayoutAdmin
-    label="Test Layout"
-    :sidebar-items="sidebarItems"
-    is-sidebar-group
-    root-app-path="/layout-admin"
-  >
-    <NuxtLayout>
-      <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>
-      <InfoItemList
-        :items="[
-          {
-            label: 'Status:',
-            value: 'Active',
-          },
-          {
-            label: '',
-            value: '42',
-          },
-        ]"
-      />
-    </NuxtLayout>
-  </LayoutAdmin>
-</template>
-
-<script lang="ts" setup>
-import type { NavigationMenuItem } from '@nuxt/ui'
-
-const auth = useAuth()
-const showFilter = useState('pageFilterOpen')
-const items = ref([
-  {
-    label: 'Account',
-    icon: 'i-lucide-user',
-    content: 'This is the account content.',
-  },
-  {
-    label: 'Password',
-    icon: 'i-lucide-lock',
-    content: 'This is the password content.',
-  },
-])
-
-useApp().definePage({
-  title: 'Test Layout',
-  breadcrumbs: [
-    {
-      label: 'Home',
-      to: '/',
-    },
-    {
-      label: 'Test Layout',
-      to: '/test-layout',
-    },
-  ],
-})
-
-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',
-  updated_at: '2025-10-11T10:14:10.296Z',
-  email: 'long@finema.co',
-  full_name: 'Passakon Puttasuwan',
-  display_name: 'Long',
-  position: 'Technical Specialist',
-  team_code: 'DEV',
-  company: 'finema',
-  avatar_url:
-    'https://avatars.slack-edge.com/2023-09-25/5968557597936_c750902e3ffc4f690d80_512.jpg',
-  slack_id: 'U0147KLKKH8',
-  azure_id: 'fd7fbb55-a249-4b79-b439-2270981bd3ae',
-  is_active: true,
-  joined_date: '2025-09-02T00:00:00Z',
-  access_level: {
-    user_id: 'edab2396-2b6f-4855-b04e-a7c9ae9b70ae',
-    clockin: 'ADMIN',
-    timesheet: 'ADMIN',
-    pmo: 'SUPER',
-    setting: 'SUPER',
-    created_at: '2025-08-15T16:40:29.319Z',
-    updated_at: '2025-09-30T10:14:59.228Z',
-  },
-  team: {
-    id: 'ef2abb00-d57f-4a38-a5d1-660ee63d2e1f',
-    created_at: '2025-08-26T10:36:53.598Z',
-    updated_at: '2025-10-01T06:00:29.941Z',
-    name: 'Developer Team',
-    code: 'DEV',
-    color: 'violet',
-    description: '',
-    working_start_at: '12:02:00',
-    working_end_at: '20:00:00',
-    created_by_id: null,
-    updated_by_id: '96d3ec63-be14-41c6-9268-ea8095d2a73b',
-    deleted_by_id: null,
-  },
-})
-
-const sidebarItems: NavigationMenuItem[] = [
-  {
-    children: [
-      {
-        label: 'Submenu 1',
-        to: '/layout-admin',
-        icon: 'i-heroicons-outline:home',
-      },
-      {
-        label: 'Submenu 2',
-        to: '/layout-admin/test/1',
-        icon: 'i-heroicons-outline:home',
-      },
-    ],
-  },
-  {
-    label: 'DASHBOARD',
-    children: [
-      {
-        label: 'Submenu 1',
-        to: '/submenu',
-        icon: 'i-heroicons-outline:home',
-      },
-      {
-        label: 'Submenu 2',
-        to: '/submenu/layout-admin',
-        icon: 'i-heroicons-outline:home',
-      },
-    ],
-  },
-  {
-    label: 'Users',
-    children: [
-      {
-        label: 'Submenu 1',
-        to: '/submenu1',
-        icon: 'i-heroicons-outline:home',
-      },
-      {
-        label: 'Submenu 2',
-        to: '/layout-admin',
-        icon: 'i-heroicons-outline:home',
-        children: [
-          {
-            label: 'Submenu 2-1',
-            to: '/layout-admin/1',
-            icon: 'i-heroicons-outline:home',
-          },
-          {
-            label: 'Submenu 2-2',
-            to: '/layout-admin/2',
-          },
-        ],
-      },
-    ],
-  },
-]
-
-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>
+<template>
+  <LayoutAdmin
+    label="Test Layout"
+    :sidebar-items="sidebarItems"
+    is-sidebar-group
+    root-app-path="/layout-admin"
+  >
+    <NuxtLayout>
+      <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>
+      <InfoItemList
+        :items="[
+          {
+            label: 'Status:',
+            value: 'Active',
+          },
+          {
+            label: '',
+            value: '42',
+          },
+        ]"
+      />
+    </NuxtLayout>
+  </LayoutAdmin>
+</template>
+
+<script lang="ts" setup>
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const auth = useAuth()
+const showFilter = useState('pageFilterOpen')
+const items = ref([
+  {
+    label: 'Account',
+    icon: 'i-lucide-user',
+    content: 'This is the account content.',
+  },
+  {
+    label: 'Password',
+    icon: 'i-lucide-lock',
+    content: 'This is the password content.',
+  },
+])
+
+useApp().definePage({
+  title: 'Test Layout',
+  breadcrumbs: [
+    {
+      label: 'Home',
+      to: '/',
+    },
+    {
+      label: 'Test Layout',
+      to: '/test-layout',
+    },
+  ],
+})
+
+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',
+  updated_at: '2025-10-11T10:14:10.296Z',
+  email: 'long@finema.co',
+  full_name: 'Passakon Puttasuwan',
+  display_name: 'Long',
+  position: 'Technical Specialist',
+  team_code: 'DEV',
+  company: 'finema',
+  avatar_url:
+    'https://avatars.slack-edge.com/2023-09-25/5968557597936_c750902e3ffc4f690d80_512.jpg',
+  slack_id: 'U0147KLKKH8',
+  azure_id: 'fd7fbb55-a249-4b79-b439-2270981bd3ae',
+  is_active: true,
+  joined_date: '2025-09-02T00:00:00Z',
+  access_level: {
+    user_id: 'edab2396-2b6f-4855-b04e-a7c9ae9b70ae',
+    clockin: 'ADMIN',
+    timesheet: 'ADMIN',
+    pmo: 'SUPER',
+    setting: 'SUPER',
+    created_at: '2025-08-15T16:40:29.319Z',
+    updated_at: '2025-09-30T10:14:59.228Z',
+  },
+  team: {
+    id: 'ef2abb00-d57f-4a38-a5d1-660ee63d2e1f',
+    created_at: '2025-08-26T10:36:53.598Z',
+    updated_at: '2025-10-01T06:00:29.941Z',
+    name: 'Developer Team',
+    code: 'DEV',
+    color: 'violet',
+    description: '',
+    working_start_at: '12:02:00',
+    working_end_at: '20:00:00',
+    created_by_id: null,
+    updated_by_id: '96d3ec63-be14-41c6-9268-ea8095d2a73b',
+    deleted_by_id: null,
+  },
+})
+
+const sidebarItems: NavigationMenuItem[] = [
+  {
+    children: [
+      {
+        label: 'Submenu 1',
+        to: '/layout-admin',
+        icon: 'i-heroicons-outline:home',
+      },
+      {
+        label: 'Submenu 2',
+        to: '/layout-admin/test/1',
+        icon: 'i-heroicons-outline:home',
+      },
+    ],
+  },
+  {
+    label: 'DASHBOARD',
+    children: [
+      {
+        label: 'Submenu 1',
+        to: '/submenu',
+        icon: 'i-heroicons-outline:home',
+      },
+      {
+        label: 'Submenu 2',
+        to: '/submenu/layout-admin',
+        icon: 'i-heroicons-outline:home',
+      },
+    ],
+  },
+  {
+    label: 'Users',
+    children: [
+      {
+        label: 'Submenu 1',
+        to: '/submenu1',
+        icon: 'i-heroicons-outline:home',
+      },
+      {
+        label: 'Submenu 2',
+        to: '/layout-admin',
+        icon: 'i-heroicons-outline:home',
+        children: [
+          {
+            label: 'Submenu 2-1',
+            to: '/layout-admin/1',
+            icon: 'i-heroicons-outline:home',
+          },
+          {
+            label: 'Submenu 2-2',
+            to: '/layout-admin/2',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+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>