@finema/finework-layer 0.2.138 → 0.2.140

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.2.140](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.139...0.2.140) (2026-02-17)
+
+### Features
+
+* refactor TimeFromNow component and add RelativeTimeFromNow component for enhanced date formatting ([b7c9d76](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/b7c9d76dfdc8f5ec901daa582fec4e16db1ccd20))
+
+## [0.2.139](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.138...0.2.139) (2026-02-16)
+
+### Bug Fixes
+
+* adjust table header and cell styles for pinned variants ([54fa9bb](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/54fa9bbaeb3b1f3f9d143424b0207f90e287b489))
+
 ## [0.2.138](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.137...0.2.138) (2026-02-16)
 
 ### Features

package/app/app.config.ts

@@ -133,8 +133,8 @@ export default defineAppConfig({
       variants: {
         pinned: {
           true: {
-            th: 'sticky bg-[#F9FAFB] data-[pinned=left]:left-0 data-[pinned=right]:right-0 z-[100] ',
-            td: 'sticky bg-white data-[pinned=left]:left-0 data-[pinned=right]:right-0   ',
+            th: 'sticky translate-x-px bg-[#F9FAFB] data-[pinned=left]:left-0 data-[pinned=right]:right-0 z-[100] ',
+            td: 'sticky translate-x-px bg-white data-[pinned=left]:left-0 data-[pinned=right]:right-0   ',
           },
         },
       },

package/app/components/Format/RelativeTimeFromNow.vue

@@ -0,0 +1,106 @@
+<template>
+  <component
+    :is="props.as || 'span'"
+    :title="TimeHelper.displayDateTime(props.value)"
+  >
+    {{ getValue }}
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { differenceInDays, differenceInHours, differenceInMinutes, differenceInMonths, differenceInWeeks, startOfDay, addDays } from 'date-fns'
+
+const props = defineProps<{
+  value: string | Date
+  as?: string
+}>()
+
+const config = useAppConfig()
+const localeInject = inject('locale')
+
+const isThaiLocale = computed(() => {
+  return (localeInject ?? config.core.locale) === 'th'
+})
+
+const getValue = computed(() => {
+  const targetDate = new Date(props.value)
+  const now = new Date()
+
+  const nowDate = startOfDay(now)
+  const dueDateOnly = startOfDay(targetDate)
+
+  if (nowDate > dueDateOnly) {
+    const dueDateEnd = addDays(dueDateOnly, 1)
+
+    const months = differenceInMonths(now, dueDateEnd)
+
+    if (months > 0) {
+      if (isThaiLocale.value) {
+        return months === 1 ? '1 เดือนที่แล้ว' : `${months} เดือนที่แล้ว`
+      }
+
+      return months === 1 ? '1 month ago' : `${months} months ago`
+    }
+
+    const weeks = differenceInWeeks(now, dueDateEnd)
+
+    if (weeks > 0) {
+      if (isThaiLocale.value) {
+        return weeks === 1 ? '1 สัปดาห์ที่แล้ว' : `${weeks} สัปดาห์ที่แล้ว`
+      }
+
+      return weeks === 1 ? '1 week ago' : `${weeks} weeks ago`
+    }
+
+    const days = differenceInDays(now, dueDateEnd)
+
+    if (days > 0) {
+      if (isThaiLocale.value) {
+        return days === 1 ? '1 วันที่แล้ว' : `${days} วันที่แล้ว`
+      }
+
+      return days === 1 ? '1 day ago' : `${days} days ago`
+    }
+
+    const hours = differenceInHours(now, dueDateEnd)
+
+    if (hours > 0) {
+      if (isThaiLocale.value) {
+        return hours === 1 ? '1 ชม.ที่แล้ว' : `${hours} ชม.ที่แล้ว`
+      }
+
+      return hours === 1 ? '1hr ago' : `${hours}hr ago`
+    }
+
+    const minutes = differenceInMinutes(now, dueDateEnd)
+
+    if (minutes > 0) {
+      if (isThaiLocale.value) {
+        return minutes === 1 ? '1 นาทีที่แล้ว' : `${minutes} นาทีที่แล้ว`
+      }
+
+      return minutes === 1 ? '1m ago' : `${minutes}m ago`
+    }
+
+    return isThaiLocale.value ? 'เมื่อสักครู่' : 'just now'
+  }
+
+  if (nowDate.getTime() === dueDateOnly.getTime()) {
+    return isThaiLocale.value ? 'วันนี้' : 'Today'
+  }
+
+  const tomorrow = addDays(nowDate, 1)
+
+  if (tomorrow.getTime() === dueDateOnly.getTime()) {
+    return isThaiLocale.value ? 'พรุ่งนี้' : 'Tomorrow'
+  }
+
+  const days = differenceInDays(dueDateOnly, nowDate)
+
+  if (isThaiLocale.value) {
+    return `อีก ${days} วัน`
+  }
+
+  return `in ${days}d`
+})
+</script>

package/app/components/Format/TimeFromNow.vue

@@ -8,72 +8,32 @@
 </template>
 
 <script lang="ts" setup>
-import { differenceInDays, differenceInHours, differenceInMinutes, differenceInMonths, differenceInWeeks, startOfDay, addDays } from 'date-fns'
+import { formatDistanceToNow, differenceInDays } from 'date-fns'
+import * as locales from 'date-fns/locale'
 
 const props = defineProps<{
   value: string | Date
   as?: string
 }>()
 
-const getValue = computed(() => {
-  const targetDate = new Date(props.value)
-  const now = new Date()
-
-  // Compare only the date part
-  const nowDate = startOfDay(now)
-  const dueDateOnly = startOfDay(targetDate)
-
-  if (nowDate > dueDateOnly) {
-    const dueDateEnd = addDays(dueDateOnly, 1)
-
-    const months = differenceInMonths(now, dueDateEnd)
-
-    if (months > 0) {
-      return months === 1 ? '1 month ago' : `${months} months ago`
-    }
-
-    const weeks = differenceInWeeks(now, dueDateEnd)
-
-    if (weeks > 0) {
-      return weeks === 1 ? '1 week ago' : `${weeks} weeks ago`
-    }
-
-    const days = differenceInDays(now, dueDateEnd)
-
-    if (days > 0) {
-      return days === 1 ? '1 day ago' : `${days} days ago`
-    }
+const config = useAppConfig()
+const localeInject = inject('locale')
 
-    const hours = differenceInHours(now, dueDateEnd)
-
-    if (hours > 0) {
-      return hours === 1 ? '1hr ago' : `${hours}hr ago`
-    }
-
-    const minutes = differenceInMinutes(now, dueDateEnd)
-
-    if (minutes > 0) {
-      return minutes === 1 ? '1m ago' : `${minutes}m ago`
-    }
-
-    return 'just now'
-  }
-
-  // Today
-  if (nowDate.getTime() === dueDateOnly.getTime()) {
-    return 'Today'
-  }
+const getValue = computed(() => {
+  const locale = (localeInject ?? config.core.locale) === 'th'
+    ? locales.th
+    : locales.enUS
 
-  // Tomorrow
-  const tomorrow = addDays(nowDate, 1)
+  const targetDate = new Date(props.value)
+  const daysDiff = differenceInDays(new Date(), targetDate)
 
-  if (tomorrow.getTime() === dueDateOnly.getTime()) {
-    return 'Tomorrow'
+  if (daysDiff <= 6) {
+    return formatDistanceToNow(targetDate, {
+      addSuffix: true,
+      locale,
+    })
   }
 
-  // In X days (future)
-  const days = differenceInDays(dueDateOnly, nowDate)
-
-  return `in ${days}d`
+  return TimeHelper.displayDateTime(props.value)
 })
 </script>

package/package.json

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