@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,144 +1,152 @@
-<script setup lang="ts">
-import { DateTime } from "luxon";
-import { computed } from "vue";
-
-type Unit = 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds';
-type Locale = 'th' | 'en' | 'en-US' | 'th-TH';
-
-interface Props {
-  modelValue: DateTime;
-  endDate?: DateTime;
-  locale?: Locale;
-  showSuffix?: boolean;
-  units?: Unit[];
-  zeroBase?: boolean; // true = start at 0, false = start at 1 (inclusive)
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  locale: 'th',
-  showSuffix: true,
-  zeroBase: true,
-});
-
-// Fallback map: map complex locale (e.g., en-US) to base (e.g., en)
-const normalizeLocale = (locale: Locale): 'en' | 'th' => {
-  if (locale.startsWith('en')) return 'en';
-  if (locale.startsWith('th')) return 'th';
-  return 'th'; // default fallback
-};
-
-const labelsEnPlural: Record<Unit, string> = {
-  years: 'years',
-  months: 'months',
-  days: 'days',
-  hours: 'hours',
-  minutes: 'minutes',
-  seconds: 'seconds',
-};
-const labelsEnSingular: Record<Unit, string> = {
-  years: 'year',
-  months: 'month',
-  days: 'day',
-  hours: 'hour',
-  minutes: 'minute',
-  seconds: 'second',
-};
-
-const localizedLabels: Record<'en' | 'th', Record<Unit, string>> = {
-  en: labelsEnPlural, // จะสลับเป็น singular ตามค่าจริงตอน render
-  th: {
-    years: 'ปี',
-    months: 'เดือน',
-    days: 'วัน',
-    hours: 'ชั่วโมง',
-    minutes: 'นาที',
-    seconds: 'วินาที',
-  },
-};
-
-const localizedSuffix: Record<'en' | 'th', string> = {
-  en: 'ago',
-  th: 'ที่ผ่านมา',
-};
-
-const outputText = computed(() => {
-  const base = props.endDate ?? DateTime.now(); // ใช้ endDate ถ้ามี ไม่งั้น now
-  const baseLocale = normalizeLocale(props.locale);
-
-  const units: Unit[] = props.units?.length
-      ? props.units
-      : ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];
-
-  const diffObj = base.diff(props.modelValue, units).toObject();
-
-  // helper: คืน label ตาม singular/plural (เฉพาะ en)
-  const labelFor = (unit: Unit, value: number) => {
-    if (baseLocale === 'en') {
-      return value === 1 ? labelsEnSingular[unit] : labelsEnPlural[unit];
-    }
-    return localizedLabels[baseLocale][unit];
-  };
-
-  // ---------- โหมด single unit ----------
-  if (!props.units) {
-    const foundUnit = units.find((unit) => (diffObj[unit] ?? 0) >= 1);
-    if (foundUnit) {
-      const raw = Math.floor(diffObj[foundUnit] ?? 0); // >= 1
-      const value = props.zeroBase ? raw : raw + 1;     // inclusive (+1)
-      const label = labelFor(foundUnit, value);
-      const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-      return `${value} ${label}${suffix ? ` ${suffix}` : ''}`;
-    }
-
-    // ถ้าไม่มีหน่วยใด >= 1 ให้ใช้หน่วยเล็กสุด
-    const lastUnit = units.at(-1)!;
-    const raw = Math.max(0, Math.floor(diffObj[lastUnit] ?? 0));
-    const value = props.zeroBase ? raw : 1; // inclusive: อย่างน้อย 1
-    const label = labelFor(lastUnit, value);
-    const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-    return `${value} ${label}${suffix ? ` ${suffix}` : ''}`;
-  }
-
-  // ---------- โหมด multi-unit ----------
-  // เก็บค่าแบบตัวเลขก่อน แล้วค่อยเรนเดอร์
-  const values = units.map((unit) => ({
-    unit,
-    raw: Math.max(0, Math.floor(diffObj[unit] ?? 0)),
-  }));
-
-  // เลือกหน่วยที่เล็กที่สุด
-  const smallest = values[values.length - 1];
-
-  // ถ้ามีค่าอย่างน้อยหนึ่งหน่วย > 0 และเป็น inclusive (zeroBase=false) => +1 ที่หน่วยเล็กสุด
-  const anyPositive = values.some((v) => v.raw > 0);
-  const adjusted = values.map((v, idx) => {
-    if (!props.zeroBase && anyPositive && idx === values.length - 1) {
-      return { ...v, raw: v.raw + 1 };
-    }
-    return v;
-  });
-
-  // สร้างข้อความจากหน่วยที่มีค่า > 0
-  const parts = adjusted
-      .filter((v) => v.raw > 0)
-      .map((v) => `${v.raw} ${labelFor(v.unit, v.raw)}`);
-
-  // หากทั้งหมดเป็น 0:
-  if (parts.length === 0) {
-    const minValue = props.zeroBase ? 0 : 1;
-    const label = labelFor(smallest.unit, minValue);
-    const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-    return `${minValue} ${label}${suffix ? ` ${suffix}` : ''}`;
-  }
-
-  const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-  return `${parts.join(' ')}${suffix ? ` ${suffix}` : ''}`;
-});
-</script>
-
-<template>
-<span>
-  <i v-if="props.zeroBase" class="mdi mdi-clock-time-twelve-outline"></i>
-  <span v-if="props.zeroBase">&nbsp;</span>{{ outputText }}
-</span>
-</template>
+<script setup lang="ts">
+/**
+ * LabelDateCount renders read-only label output with formatting logic for display-oriented model values.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { DateTime } from "luxon";
+import { computed } from "vue";
+
+type Unit = 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds';
+type Locale = 'th' | 'en' | 'en-US' | 'th-TH';
+
+interface Props {
+  modelValue: DateTime; // Bound value for v-model synchronization with the parent component.
+  endDate?: DateTime; // date value used by component logic and display
+  locale?: Locale; // Locale used for date/time formatting and localized labels.
+  showSuffix?: boolean; // Appends relative-time suffix text like "ago" or "in".
+  units?: Unit[]; // Time units allowed in relative date calculations.
+  zeroBase?: boolean; // true = start at 0, false = start at 1 (inclusive)
+}
+
+/**
+ * Public props accepted by LabelDateCount.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'th',
+  showSuffix: true,
+  zeroBase: true,
+});
+
+// Fallback map: map complex locale (e.g., en-US) to base (e.g., en)
+const normalizeLocale = (locale: Locale): 'en' | 'th' => {
+  if (locale.startsWith('en')) return 'en';
+  if (locale.startsWith('th')) return 'th';
+  return 'th'; // default fallback
+};
+
+const labelsEnPlural: Record<Unit, string> = {
+  years: 'years',
+  months: 'months',
+  days: 'days',
+  hours: 'hours',
+  minutes: 'minutes',
+  seconds: 'seconds',
+};
+const labelsEnSingular: Record<Unit, string> = {
+  years: 'year',
+  months: 'month',
+  days: 'day',
+  hours: 'hour',
+  minutes: 'minute',
+  seconds: 'second',
+};
+
+const localizedLabels: Record<'en' | 'th', Record<Unit, string>> = {
+  en: labelsEnPlural, // จะสลับเป็น singular ตามค่าจริงตอน render
+  th: {
+    years: 'ปี',
+    months: 'เดือน',
+    days: 'วัน',
+    hours: 'ชั่วโมง',
+    minutes: 'นาที',
+    seconds: 'วินาที',
+  },
+};
+
+const localizedSuffix: Record<'en' | 'th', string> = {
+  en: 'ago',
+  th: 'ที่ผ่านมา',
+};
+
+const outputText = computed(() => {
+  const base = props.endDate ?? DateTime.now(); // ใช้ endDate ถ้ามี ไม่งั้น now
+  const baseLocale = normalizeLocale(props.locale);
+
+  const units: Unit[] = props.units?.length
+      ? props.units
+      : ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];
+
+  const diffObj = base.diff(props.modelValue, units).toObject();
+
+  // helper: คืน label ตาม singular/plural (เฉพาะ en)
+  const labelFor = (unit: Unit, value: number) => {
+    if (baseLocale === 'en') {
+      return value === 1 ? labelsEnSingular[unit] : labelsEnPlural[unit];
+    }
+    return localizedLabels[baseLocale][unit];
+  };
+
+  // ---------- โหมด single unit ----------
+  if (!props.units) {
+    const foundUnit = units.find((unit) => (diffObj[unit] ?? 0) >= 1);
+    if (foundUnit) {
+      const raw = Math.floor(diffObj[foundUnit] ?? 0); // >= 1
+      const value = props.zeroBase ? raw : raw + 1;     // inclusive (+1)
+      const label = labelFor(foundUnit, value);
+      const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
+      return `${value} ${label}${suffix ? ` ${suffix}` : ''}`;
+    }
+
+    // ถ้าไม่มีหน่วยใด >= 1 ให้ใช้หน่วยเล็กสุด
+    const lastUnit = units.at(-1)!;
+    const raw = Math.max(0, Math.floor(diffObj[lastUnit] ?? 0));
+    const value = props.zeroBase ? raw : 1; // inclusive: อย่างน้อย 1
+    const label = labelFor(lastUnit, value);
+    const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
+    return `${value} ${label}${suffix ? ` ${suffix}` : ''}`;
+  }
+
+  // ---------- โหมด multi-unit ----------
+  // เก็บค่าแบบตัวเลขก่อน แล้วค่อยเรนเดอร์
+  const values = units.map((unit) => ({
+    unit,
+    raw: Math.max(0, Math.floor(diffObj[unit] ?? 0)),
+  }));
+
+  // เลือกหน่วยที่เล็กที่สุด
+  const smallest = values[values.length - 1];
+
+  // ถ้ามีค่าอย่างน้อยหนึ่งหน่วย > 0 และเป็น inclusive (zeroBase=false) => +1 ที่หน่วยเล็กสุด
+  const anyPositive = values.some((v) => v.raw > 0);
+  const adjusted = values.map((v, idx) => {
+    if (!props.zeroBase && anyPositive && idx === values.length - 1) {
+      return { ...v, raw: v.raw + 1 };
+    }
+    return v;
+  });
+
+  // สร้างข้อความจากหน่วยที่มีค่า > 0
+  const parts = adjusted
+      .filter((v) => v.raw > 0)
+      .map((v) => `${v.raw} ${labelFor(v.unit, v.raw)}`);
+
+  // หากทั้งหมดเป็น 0:
+  if (parts.length === 0) {
+    const minValue = props.zeroBase ? 0 : 1;
+    const label = labelFor(smallest.unit, minValue);
+    const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
+    return `${minValue} ${label}${suffix ? ` ${suffix}` : ''}`;
+  }
+
+  const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
+  return `${parts.join(' ')}${suffix ? ` ${suffix}` : ''}`;
+});
+</script>
+
+<template>
+<span>
+  <i v-if="props.zeroBase" class="mdi mdi-clock-time-twelve-outline"></i>
+  <span v-if="props.zeroBase">&nbsp;</span>{{ outputText }}
+</span>
+</template>

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

@@ -1,105 +1,113 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-interface Props {
-  label: string;
-  value?: string | null;
-  horizontal?: boolean;
-  size?: 'large' | 'medium';
-  truncate?: boolean;
-  notFoundText?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: '',
-  value: '',
-  horizontal: false,
-  size: 'large',
-  truncate: false,
-  notFoundText : '-'
-});
-
-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;
-};
-const valueData = computed(()=>{
-  return (props.value) ? props.value : props.notFoundText
-})
-
-</script>
-
-<template>
-  <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 ${calTruncate}`" ref="valueText">
-      <slot name="value" :value="valueData">
-        <div v-if="!props.truncate">{{ valueData }}</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 : ''"
-              >
-                {{ valueData }}
-              </div>
-            </template>
-            <span>{{ valueData }}</span>
-          </v-tooltip>
-        </div>
-      </slot>
-    </div>
-  </div>
-
-  <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" :value="valueData">
-          <div v-if="!props.truncate">{{ valueData }}</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 : ''"
-                >
-                  {{ valueData }}
-                </div>
-              </template>
-              <span>{{ valueData }}</span>
-            </v-tooltip>
-          </div>
-        </slot>
-      </div>
-    </VCardText>
-  </v-card>
-</template>
-
+<script lang="ts" setup>
+/**
+ * LabelField renders read-only label output with formatting logic for display-oriented model values.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { computed, ref } from 'vue';
+
+interface Props {
+  label: string; // UI label displayed to end users
+  value?: string | null; // Raw value rendered by this label field component.
+  horizontal?: boolean; // Renders label and value in a horizontal layout.
+  size?: 'large' | 'medium'; // Visual size preset controlling text and spacing.
+  truncate?: boolean; // Truncates long text and keeps full value in tooltip/title.
+  notFoundText?: string // Text shown when the resolved value or label is unavailable.
+}
+
+/**
+ * Public props accepted by LabelField.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  value: '',
+  horizontal: false,
+  size: 'large',
+  truncate: false,
+  notFoundText : '-'
+});
+
+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;
+};
+const valueData = computed(()=>{
+  return (props.value) ? props.value : props.notFoundText
+})
+
+</script>
+
+<template>
+  <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 ${calTruncate}`" ref="valueText">
+      <slot name="value" :value="valueData">
+        <div v-if="!props.truncate">{{ valueData }}</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 : ''"
+              >
+                {{ valueData }}
+              </div>
+            </template>
+            <span>{{ valueData }}</span>
+          </v-tooltip>
+        </div>
+      </slot>
+    </div>
+  </div>
+
+  <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" :value="valueData">
+          <div v-if="!props.truncate">{{ valueData }}</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 : ''"
+                >
+                  {{ valueData }}
+                </div>
+              </template>
+              <span>{{ valueData }}</span>
+            </v-tooltip>
+          </div>
+        </slot>
+      </div>
+    </VCardText>
+  </v-card>
+</template>
+
 <style scoped>
 
-</style>
+</style>

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

@@ -1,29 +1,37 @@
-<script lang="ts" setup>
-import currency from 'currency.js'
-import { computed } from 'vue'
-
-interface Props {
-  modelValue: number
-  decimal?: number
-  currency?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: 0,
-  decimal: 2,
-  currency: '',
-})
-
-const formattedCurrency = computed(() => {
-  return currency(props.modelValue, {
-    pattern: `# !`,
-    symbol: props.currency,
-    separator: ',',
-    precision: props.decimal,
-  }).format()
-})
-</script>
-
-<template>
-  {{ formattedCurrency }}
-</template>
+<script lang="ts" setup>
+/**
+ * LabelFormatMoney renders read-only label output with formatting logic for display-oriented model values.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import currency from 'currency.js'
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: number // Bound value for v-model synchronization with the parent component.
+  decimal?: number // Number of decimal places used for currency formatting.
+  currency?: string // Currency symbol or code displayed with formatted values.
+}
+
+/**
+ * Public props accepted by LabelFormatMoney.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  decimal: 2,
+  currency: '',
+})
+
+const formattedCurrency = computed(() => {
+  return currency(props.modelValue, {
+    pattern: `# !`,
+    symbol: props.currency,
+    separator: ',',
+    precision: props.decimal,
+  }).format()
+})
+</script>
+
+<template>
+  {{ formattedCurrency }}
+</template>