@ramathibodi/nuxt-commons 0.1.16 → 0.1.18

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.16"
+  "version": "0.1.18"
 }

package/dist/runtime/components/document/TemplateBuilder.vue

@@ -18,6 +18,10 @@ const headers = ref([
     key: 'operation',
     width: '120px',
   },
+  {
+    title: 'Rec No.',
+    key: 'recNo',
+  },
   {
     title: 'Input Type',
     key: 'inputType',
@@ -99,6 +103,9 @@ const ruleOptions = (inputType: string) => (value: any) => {
         Convert To Advance
       </VBtn>
     </template>
+    <template #item.recNo="{internalItem}">
+      {{ internalItem.index }}
+    </template>
     <template #form="{ data, rules }">
       <v-container fluid>
         <v-row dense>

package/dist/runtime/components/label/DateAgo.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { DateTime, type ToRelativeOptions } from "luxon";
+import { computed } from "vue";
+
+interface Props {
+  modelValue: DateTime;
+  locale?: 'TH' | 'EN';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'TH',
+});
+
+const timeAgo = computed(() => {
+  const now = DateTime.now();
+  const diff = now.diff(props.modelValue, ['years', 'months', 'days', 'hours', 'minutes', 'seconds']).toObject();
+
+  let unit: ToRelativeOptions['unit'] = 'seconds';
+  if (diff.years && diff.years > 0) {
+    unit = 'years';
+  } else if (diff.months && diff.months > 0) {
+    unit = 'months';
+  } else if (diff.days && diff.days > 0) {
+    unit = 'days';
+  } else if (diff.hours && diff.hours > 0) {
+    unit = 'hours';
+  } else if (diff.minutes && diff.minutes > 0) {
+    unit = 'minutes';
+  }
+
+  return props.modelValue.setLocale(props.locale).toRelative({ unit });
+});
+</script>
+
+<template>
+  <span>{{ timeAgo }}</span>
+</template>
+
+<style scoped>
+
+</style>

package/dist/runtime/components/label/Field.vue

@@ -1,42 +1,100 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue';
+
 interface Props {
-  label: string
-  value?: string  | null | undefined
-  horizontal?: boolean
+  label: string;
+  value?: string | null;
+  horizontal?: boolean;
+  size?: 'large' | 'medium';
+  truncate?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  label: '', value: '',
-})
+  label: '',
+  value: '',
+  horizontal: false,
+  size: 'large',
+  truncate: false,
+});
+
+const valueText = ref<HTMLElement | null>(null);
+const isTooltip = ref(false);
+
+const calSize = computed(() => (props.size === 'medium' ? 'text-subtitle-1' : 'text-h6'));
+const calTruncate = computed(() => (props.truncate ? 'text-truncate' : ''));
+
+const setTruncate = (event: Event) => {
+  const target = event.target as HTMLElement;
+  isTooltip.value = target.offsetWidth < target.scrollWidth;
+};
+
 </script>
 
 <template>
-  <div v-if="horizontal" class="d-flex align-end" :="$attrs">
-    <div class="text-medium-emphasis">
-      <slot name="label">
-        {{ label }}:
-      </slot>
+  <div
+      v-if="props.horizontal"
+      class="d-flex align-top"
+      v-bind="$attrs"
+      @resize="setTruncate"
+  >
+    <div class="text-medium-emphasis text-no-wrap">
+      <slot name="label">{{ props.label }}:</slot>
     </div>
-    <div class="ml-1">
+    <div :class="`ml-1 ${calTruncate}`" ref="valueText">
       <slot name="value">
-        {{ value }}
+        <div v-if="!props.truncate">{{ props.value }}</div>
+        <div
+            v-else
+            @mouseover="setTruncate"
+            @mouseout="isTooltip = false"
+        >
+          <v-tooltip :model-value="isTooltip" location="bottom">
+            <template #activator="{ props }">
+              <div
+                  class="text-truncate"
+                  v-bind="isTooltip ? props : ''"
+              >
+                {{ value }}
+              </div>
+            </template>
+            <span>{{ value }}</span>
+          </v-tooltip>
+        </div>
       </slot>
     </div>
   </div>
-  <v-card v-else variant="flat" :="$attrs">
-  <VCardSubtitle class="ma-0 pa-0 text-black">
-    <slot name="label">
-      {{ label }}
-    </slot>
-  </VCardSubtitle>
-  <VCardText class="text-h6 pa-0 mb-2">
-    <slot name="value">
-      {{ value }}
-    </slot>
-  </VCardText>
-</v-card>
+
+  <v-card v-else variant="text" v-bind="$attrs">
+    <VCardSubtitle class="ma-0 pa-0 text-black">
+      <slot name="label">{{ props.label }}</slot>
+    </VCardSubtitle>
+    <VCardText :class="`pa-0 mb-2 ${calSize}`">
+      <div :class="calTruncate" ref="valueText">
+        <slot name="value">
+          <div v-if="!props.truncate">{{ props.value }}</div>
+          <div
+              v-else
+              @mouseover="setTruncate"
+              @mouseout="isTooltip = false"
+          >
+            <v-tooltip :model-value="isTooltip" location="bottom">
+              <template #activator="{ props }">
+                <div
+                    class="text-truncate"
+                    v-bind="isTooltip ? props : ''"
+                >
+                  {{ value }}
+                </div>
+              </template>
+              <span>{{ value }}</span>
+            </v-tooltip>
+          </div>
+        </slot>
+      </div>
+    </VCardText>
+  </v-card>
 </template>
 
-<style lang="">
+<style scoped>
 
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -116,5 +116,5 @@
     "vitest": "^1.5.1",
     "vue-tsc": "^1.8.27"
   },
-  "packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"
+  "packageManager": "pnpm@9.7.1+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247"
 }