@finema/finework-layer 0.2.77 → 0.2.79

package/app/app.config.ts

@@ -1,144 +1,144 @@
-export default defineAppConfig({
-  core: {
-    is_thai_year: true,
-    is_thai_month: true,
-    date_format: 'dd MMM yyyy',
-    month_format: 'MMM yyyy',
-    date_time_format: 'dd MMM yyyy HH:mm',
-    color: '#335AFF',
-    limit_per_page: 10,
-    locale: 'en',
-  },
-  ui: {
-    dialog: {
-      slots: {
-        base: [
-          'bg-[url(/dialog-bg.png)] bg-no-repeat bg-top-left bg-size-[220px]',
-        ],
-      },
-    },
-    card: {
-      variants: {
-        variant: {
-          soft: {
-            root: 'bg-elevated/50 divide-y divide-default',
-          },
-        },
-      },
-      defaultVariants: {
-        variant: 'soft',
-      },
-
-    },
-    tabs: {
-      slots: {
-        list: 'p-0 ',
-        label: ' font-bold  ',
-        leadingIcon: 'hover:!text-primary',
-      },
-      variants: {
-        variant: {
-          pill: {
-            list: 'bg-white rounded-sm',
-            trigger: 'grow',
-            indicator: 'rounded-md shadow-xs',
-          },
-          link: {
-            list: 'border-default',
-            indicator: 'rounded-none',
-            trigger: 'focus:outline-none',
-          },
-        },
-        orientation: {
-          horizontal: {
-            root: 'flex-col',
-            list: 'w-full ',
-            indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) ',
-            trigger: 'justify-center ',
-          },
-          vertical: {
-            list: 'flex-col',
-            trigger: '!px-3 py-2 text-sm gap-3',
-            indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) ',
-          },
-        },
-        size: {
-          lg: {
-            trigger: 'px-4 py-2 text-sm gap-3',
-            leadingIcon: 'size-6',
-            leadingAvatarSize: '2xs',
-          },
-        },
-      },
-      compoundVariants: [
-        {
-          orientation: 'horizontal',
-          variant: 'pill',
-          class: {
-            root: ' px-4 py-2 bg-white rounded-xl',
-            indicator: 'inset-y-5 ',
-            label: 'text-[#344054]',
-            trigger: 'data-[state=active]:bg-[#F9FAFB]',
-          },
-        },
-        {
-          orientation: 'vertical',
-          variant: 'pill',
-          class: {
-            indicator: 'inset-x-1',
-            list: 'items-center gap-3 xl:gap-5',
-            root: 'p-4 bg-white rounded-xl',
-            label: 'text-[#344054]',
-            trigger: 'data-[state=active]:bg-[#F9FAFB]',
-          },
-        },
-        {
-          orientation: 'horizontal',
-          variant: 'link',
-          class: {
-            list: 'border-b -mb-px',
-            indicator: '-bottom-px h-px',
-            trigger: 'data-[state=active]:text-primary ',
-          },
-        },
-        {
-          orientation: 'vertical',
-          variant: 'link',
-          class: {
-            list: 'border-none -ms-px gap-1',
-            indicator: '-start-px w-px !w-[2px] !left-[-2px]',
-          },
-        },
-        {
-          color: 'primary',
-          variant: 'pill',
-          class: {
-            indicator: 'bg-[#F9FAFB]',
-            trigger: 'data-[state=active]:text-primary',
-          },
-        },
-
-      ],
-      defaultVariants: {
-        color: 'primary',
-        variant: 'pill',
-        size: 'lg',
-      },
-    },
-    table: {
-      slots: {
-        th: 'text-[#222222] whitespace-nowrap border-r border-[#EAECF0] last:border-0 bg-[#F9FAFB]',
-        td: 'text-[#222222] border-r border-[#EAECF0] last:border-0',
-      },
-    },
-    button: {
-      compoundVariants: [
-        {
-          color: 'error',
-          variant: 'outline',
-          class: 'ring ring-inset ring-[#FDA29B] text-[#B42318] hover:bg-error/10 active:bg-error/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-error',
-        },
-      ],
-    },
-  },
-})
+export default defineAppConfig({
+  core: {
+    is_thai_year: true,
+    is_thai_month: true,
+    date_format: 'dd MMM yyyy',
+    month_format: 'MMM yyyy',
+    date_time_format: 'dd MMM yyyy HH:mm',
+    color: '#335AFF',
+    limit_per_page: 10,
+    locale: 'en',
+  },
+  ui: {
+    dialog: {
+      slots: {
+        base: [
+          'bg-[url(/dialog-bg.png)] bg-no-repeat bg-top-left bg-size-[220px]',
+        ],
+      },
+    },
+    card: {
+      variants: {
+        variant: {
+          soft: {
+            root: 'bg-elevated/50 divide-y divide-default',
+          },
+        },
+      },
+      defaultVariants: {
+        variant: 'soft',
+      },
+
+    },
+    tabs: {
+      slots: {
+        list: 'p-0 ',
+        label: ' font-bold  ',
+        leadingIcon: 'hover:!text-primary',
+      },
+      variants: {
+        variant: {
+          pill: {
+            list: 'bg-white rounded-sm',
+            trigger: 'grow',
+            indicator: 'rounded-md shadow-xs',
+          },
+          link: {
+            list: 'border-default',
+            indicator: 'rounded-none',
+            trigger: 'focus:outline-none',
+          },
+        },
+        orientation: {
+          horizontal: {
+            root: 'flex-col',
+            list: 'w-full ',
+            indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) ',
+            trigger: 'justify-center ',
+          },
+          vertical: {
+            list: 'flex-col',
+            trigger: '!px-3 py-2 text-sm gap-3',
+            indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) ',
+          },
+        },
+        size: {
+          lg: {
+            trigger: 'px-4 py-2 text-sm gap-3',
+            leadingIcon: 'size-6',
+            leadingAvatarSize: '2xs',
+          },
+        },
+      },
+      compoundVariants: [
+        {
+          orientation: 'horizontal',
+          variant: 'pill',
+          class: {
+            root: ' px-4 py-2 bg-white rounded-xl',
+            indicator: 'inset-y-5 ',
+            label: 'text-[#344054]',
+            trigger: 'data-[state=active]:bg-[#F9FAFB]',
+          },
+        },
+        {
+          orientation: 'vertical',
+          variant: 'pill',
+          class: {
+            indicator: 'inset-x-1',
+            list: 'items-center gap-3 xl:gap-5',
+            root: 'p-4 bg-white rounded-xl',
+            label: 'text-[#344054]',
+            trigger: 'data-[state=active]:bg-[#F9FAFB]',
+          },
+        },
+        {
+          orientation: 'horizontal',
+          variant: 'link',
+          class: {
+            list: 'border-b -mb-px',
+            indicator: '-bottom-px h-px',
+            trigger: 'data-[state=active]:text-primary ',
+          },
+        },
+        {
+          orientation: 'vertical',
+          variant: 'link',
+          class: {
+            list: 'border-none -ms-px gap-1',
+            indicator: '-start-px w-px !w-[2px] !left-[-2px]',
+          },
+        },
+        {
+          color: 'primary',
+          variant: 'pill',
+          class: {
+            indicator: 'bg-[#F9FAFB]',
+            trigger: 'data-[state=active]:text-primary',
+          },
+        },
+
+      ],
+      defaultVariants: {
+        color: 'primary',
+        variant: 'pill',
+        size: 'lg',
+      },
+    },
+    table: {
+      slots: {
+        th: 'text-[#222222] whitespace-nowrap border-r border-[#EAECF0] last:border-0 bg-[#F9FAFB]',
+        td: 'text-[#222222] border-r border-[#EAECF0] last:border-0',
+      },
+    },
+    button: {
+      compoundVariants: [
+        {
+          color: 'error',
+          variant: 'outline',
+          class: 'ring ring-inset ring-[#FDA29B] text-[#B42318] hover:bg-error/10 active:bg-error/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-error',
+        },
+      ],
+    },
+  },
+})

package/app/app.vue

@@ -1,10 +1,10 @@
-<template>
-  <App
-    :toaster="{
-      position: 'top-right',
-      progress: false,
-    }"
-  >
-    <NuxtPage />
-  </App>
-</template>
+<template>
+  <App
+    :toaster="{
+      position: 'top-right',
+      progress: false,
+    }"
+  >
+    <NuxtPage />
+  </App>
+</template>

package/app/assets/css/main.css

@@ -1,78 +1,78 @@
-@import "tailwindcss";
-
-@theme static{
-  --color-main: #1570EF;
-  --color-main-50: #EFF8FF;
-  --color-main-100: #D1E9FF;
-  --color-main-200: #B2DDFF;
-  --color-main-300: #84CAFF;
-  --color-main-400: #53B1FD;
-  --color-main-500: #2E90FA;
-  --color-main-600: #1570EF;
-  --color-main-700: #175CD3;
-  --color-main-800: #1849A9;
-  --color-main-900: #194185;
-  --color-main-950: #102A56;
-
-  --color-warning: #DC6803;
-  --color-warning-50: #FFFAEB;
-  --color-warning-100: #FEF0C7;
-  --color-warning-200: #FEDF89;
-  --color-warning-300: #FEC84B;
-  --color-warning-400: #FDB022;
-  --color-warning-500: #F79009;
-  --color-warning-600: #DC6803;
-  --color-warning-700: #B54708;
-  --color-warning-800: #93370D;
-  --color-warning-900: #7A2E0E;
-  --color-warning-950: #4E1D09;
-
-  --color-success: #079455;
-  --color-success-50: #ECFDF3;
-  --color-success-100: #DCFAE6;
-  --color-success-200: #ABEFC6;
-  --color-success-300: #75E0A7;
-  --color-success-400: #47CD89;
-  --color-success-500: #17B26A;
-  --color-success-600: #079455;
-  --color-success-700: #067647;
-  --color-success-800: #085D3A;
-  --color-success-900: #074D31;
-  --color-success-950: #053321;
-
-  --color-error: #D92D20 !important;
-  --color-error-50: #FEF3F2;
-  --color-error-100: #FEE4E2;
-  --color-error-200: #FECDCA;
-  --color-error-300: #FDA29B;
-  --color-error-400: #F97066;
-  --color-error-500: #F04438;
-  --color-error-600: #D92D20 !important;
-  --color-error-700: #B42318;
-  --color-error-800: #912018;
-  --color-error-900: #7A271A;
-  --color-error-950: #55160C;
-
-  --color-gray: #475467;
-  --color-gray-50: #F9FAFB;
-  --color-gray-100: #F2F4F7;
-  --color-gray-200: #EAECF0;
-  --color-gray-300: #D0D5DD;
-  --color-gray-400: #98A2B3;
-  --color-gray-500: #667085;
-  --color-gray-600: #475467;
-  --color-gray-700: #344054;
-  --color-gray-800: #182230;
-  --color-gray-900: #101828;
-  --color-gray-950: #0C111D;
-}
-:root {
-  --color-background: var(--color-gray-50);
-  --ui-primary:#1570EF;
-  --ui-error: #D92D20;
-  --ui-success: #079455;
-}
-
-body {
-  @apply bg-[var(--color-background)];
+@import "tailwindcss";
+
+@theme static{
+  --color-main: #1570EF;
+  --color-main-50: #EFF8FF;
+  --color-main-100: #D1E9FF;
+  --color-main-200: #B2DDFF;
+  --color-main-300: #84CAFF;
+  --color-main-400: #53B1FD;
+  --color-main-500: #2E90FA;
+  --color-main-600: #1570EF;
+  --color-main-700: #175CD3;
+  --color-main-800: #1849A9;
+  --color-main-900: #194185;
+  --color-main-950: #102A56;
+
+  --color-warning: #DC6803;
+  --color-warning-50: #FFFAEB;
+  --color-warning-100: #FEF0C7;
+  --color-warning-200: #FEDF89;
+  --color-warning-300: #FEC84B;
+  --color-warning-400: #FDB022;
+  --color-warning-500: #F79009;
+  --color-warning-600: #DC6803;
+  --color-warning-700: #B54708;
+  --color-warning-800: #93370D;
+  --color-warning-900: #7A2E0E;
+  --color-warning-950: #4E1D09;
+
+  --color-success: #079455;
+  --color-success-50: #ECFDF3;
+  --color-success-100: #DCFAE6;
+  --color-success-200: #ABEFC6;
+  --color-success-300: #75E0A7;
+  --color-success-400: #47CD89;
+  --color-success-500: #17B26A;
+  --color-success-600: #079455;
+  --color-success-700: #067647;
+  --color-success-800: #085D3A;
+  --color-success-900: #074D31;
+  --color-success-950: #053321;
+
+  --color-error: #D92D20 !important;
+  --color-error-50: #FEF3F2;
+  --color-error-100: #FEE4E2;
+  --color-error-200: #FECDCA;
+  --color-error-300: #FDA29B;
+  --color-error-400: #F97066;
+  --color-error-500: #F04438;
+  --color-error-600: #D92D20 !important;
+  --color-error-700: #B42318;
+  --color-error-800: #912018;
+  --color-error-900: #7A271A;
+  --color-error-950: #55160C;
+
+  --color-gray: #475467;
+  --color-gray-50: #F9FAFB;
+  --color-gray-100: #F2F4F7;
+  --color-gray-200: #EAECF0;
+  --color-gray-300: #D0D5DD;
+  --color-gray-400: #98A2B3;
+  --color-gray-500: #667085;
+  --color-gray-600: #475467;
+  --color-gray-700: #344054;
+  --color-gray-800: #182230;
+  --color-gray-900: #101828;
+  --color-gray-950: #0C111D;
+}
+:root {
+  --color-background: var(--color-gray-50);
+  --ui-primary:#1570EF;
+  --ui-error: #D92D20;
+  --ui-success: #079455;
+}
+
+body {
+  @apply bg-[var(--color-background)];
 }

package/app/components/Button/ActionIcon.vue

@@ -1,29 +1,29 @@
-<template>
-  <Button
-    size="lg"
-    variant="ghost"
-    :icon="icon"
-    :color="color"
-    square
-    :disabled="disabled"
-    :loading="loading"
-    :to="to"
-    @click="$emit('click')"
-  />
-</template>
-
-<script lang="ts" setup>
-defineEmits<{
-  (e: 'click'): void
-}>()
-
-withDefaults(defineProps<{
-  to?: string
-  icon: string
-  color?: 'neutral' | 'error' | 'primary' | 'success' | 'warning' | 'info'
-  disabled?: boolean
-  loading?: boolean
-}>(), {
-  color: 'neutral',
-})
-</script>
+<template>
+  <Button
+    size="lg"
+    variant="ghost"
+    :icon="icon"
+    :color="color"
+    square
+    :disabled="disabled"
+    :loading="loading"
+    :to="to"
+    @click="$emit('click')"
+  />
+</template>
+
+<script lang="ts" setup>
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+withDefaults(defineProps<{
+  to?: string
+  icon: string
+  color?: 'neutral' | 'error' | 'primary' | 'success' | 'warning' | 'info'
+  disabled?: boolean
+  loading?: boolean
+}>(), {
+  color: 'neutral',
+})
+</script>

package/app/components/Button/Back.vue

@@ -1,22 +1,22 @@
-<template>
-  <Button
-    icon="ph:caret-left"
-    variant="outline"
-    color="neutral"
-    :to="to"
-    @click="$emit('click')"
-  >
-    {{ label || 'กลับ' }}
-  </Button>
-</template>
-
-<script lang="ts" setup>
-defineEmits<{
-  (e: 'click'): void
-}>()
-
-defineProps<{
-  to?: string
-  label?: string
-}>()
-</script>
+<template>
+  <Button
+    icon="ph:caret-left"
+    variant="outline"
+    color="neutral"
+    :to="to"
+    @click="$emit('click')"
+  >
+    {{ label || 'กลับ' }}
+  </Button>
+</template>
+
+<script lang="ts" setup>
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+defineProps<{
+  to?: string
+  label?: string
+}>()
+</script>

package/app/components/Format/Currency.vue

@@ -1,17 +1,17 @@
-<template>
-  <component :is="props.as || 'span'">
-    {{ getValue }} {{ unit ? unit : '' }}
-  </component>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-  value: number | string | null | undefined
-  as?: string
-  unit?: string
-}>()
-
-const getValue = computed(() => {
-  return NumberHelper.toCurrency(props.value)
-})
-</script>
+<template>
+  <component :is="props.as || 'span'">
+    {{ getValue }} {{ unit ? unit : '' }}
+  </component>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  value: number | string | null | undefined
+  as?: string
+  unit?: string
+}>()
+
+const getValue = computed(() => {
+  return NumberHelper.toCurrency(props.value)
+})
+</script>

package/app/components/Format/Date.vue

@@ -1,24 +1,24 @@
-<template>
-  <component
-    :is="props.as || 'span'"
-    :title="getValue"
-  >
-    {{ getValue ?? '–' }}
-  </component>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-  value: string | Date
-  as?: string
-}>()
-
-const config = useAppConfig()
-const localeInject = inject('locale')
-
-const getValue = computed(() => {
-  return (localeInject ?? config.core.locale) === 'th'
-    ? TimeHelper.displayDateThai(props.value)
-    : TimeHelper.displayDate(props.value)
-})
-</script>
+<template>
+  <component
+    :is="props.as || 'span'"
+    :title="getValue"
+  >
+    {{ getValue ?? '–' }}
+  </component>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  value: string | Date
+  as?: string
+}>()
+
+const config = useAppConfig()
+const localeInject = inject('locale')
+
+const getValue = computed(() => {
+  return (localeInject ?? config.core.locale) === 'th'
+    ? TimeHelper.displayDateThai(props.value)
+    : TimeHelper.displayDate(props.value)
+})
+</script>