@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

package/dist/runtime/components/form/DateTime.vue

@@ -1,208 +1,220 @@
-<script lang="ts" setup>
-import {ref, computed, watch, watchEffect, nextTick, useAttrs} from 'vue'
-import {union, isBoolean, isArray, isString, omit} from 'lodash-es'
-import { VTextField } from 'vuetify/components/VTextField'
-import { type dateFormat, Datetime } from '../../utils/datetime'
-import { useRules } from '../../composables/utils/validation'
-
-interface Props {
-  modelValue?: string | null
-  format?: dateFormat | string
-  label?: string
-  enableSeconds?: boolean
-  rules?: typeof import('vuetify/components')['VTextField']['rules']
-  dateRules?: typeof import('vuetify/components')['VTextField']['rules']
-  timeRules?: typeof import('vuetify/components')['VTextField']['rules']
-  dense?: boolean
-  pickerOnly?: boolean
-  minDate?: Date | string
-  maxDate?: Date | string
-  readonly?: boolean
-  locale?: 'TH' | 'EN'
-
-  defaultDate?: boolean | string,
-  defaultDateTime?: boolean | string,
-  fixedDate?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  dense: false,
-  locale: 'TH',
-  enableSeconds: false,
-  format: 'shortDate',
-  pickerOnly: false,
-  readonly: false,
-  defaultDate: false,
-  defaultDateTime: false,
-  fixedDate: false,
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const attrs = useAttrs()
-const plainAttrs = computed(() => {
-  return omit(attrs, ['modelValue', 'onUpdate:modelValue','defaultDate','defaultDateTime','fixedDate'])
-})
-
-const dateRef = ref<VTextField>()
-const timeRef = ref<VTextField>()
-
-const computedRules = computed(() => {
-  const isoDateString = Datetime().fromString(`${datePart.value}T${timePart.value}`).toISO()
-
-  if (props.rules && isArray(props.rules)) {
-
-    const ruleConfig = {
-      singleModifier: ['DateFuture', 'DatetimeFuture', 'DateHappen', 'DatetimeHappen'],
-      twoPartModifier: ['DateAfter', 'DateBefore', 'DateEqual']
-    };
-
-    const ruleMapping : Record<string,Function> = {
-      'DateFuture' : useRules().DateFuture,
-      'DatetimeFuture' : useRules().DatetimeFuture,
-      'DateHappen' : useRules().DateHappen,
-      'DatetimeHappen' : useRules().DatetimeHappen,
-      'DateAfter' : useRules().DateAfter,
-      'DateBefore' : useRules().DatetimeFuture,
-      'DateEqual' : useRules().DateEqual,
-    }
-
-    const applyRule = (ruleName: string, modifier: any) => {
-      if (props.readonly) return true
-      const ruleFunc = ruleMapping[ruleName](...Object.values(modifier))
-      return ruleFunc(isoDateString)
-    };
-
-    return props.rules.map((rule) => {
-      if (isString(rule)) {
-        const ruleParts = rule.split('#')
-        const baseRule = ruleParts[0]
-
-        if (ruleConfig.singleModifier.includes(baseRule)) {
-          const modifiers = ruleParts.slice(1).join('#').trim() || undefined
-          return applyRule(baseRule, { modifiers });
-        }
-
-        if (ruleConfig.twoPartModifier.includes(baseRule)) {
-          const [modifier1, ...modifierRest] = ruleParts.slice(1)
-          const combinedModifier = modifierRest.join('#') || undefined
-          return applyRule(baseRule, { modifier1, combinedModifier })
-        }
-      }
-      return rule
-    })
-  } else {
-    return props.rules
-  }
-})
-
-const computedDateRules = computed(() => union(computedRules.value, props.dateRules))
-const computedTimeRules = computed(() => union(computedRules.value, props.timeRules))
-
-const datePart = ref<string | null>(null)
-const timePart = ref<string | null>(null)
-const pauseEmit = ref(true)
-
-function reset() {
-  datePart.value = null
-  timePart.value = null
-  if (props.defaultDateTime) {
-    const dateTime = (isBoolean(props.defaultDateTime)) ? Datetime().now() : Datetime().fromString(props.defaultDateTime)
-    if (dateTime.luxonDateTime.isValid) {
-      datePart.value = dateTime.toFormat('yyyy-MM-dd')
-      timePart.value = dateTime.toFormat('HH:mm:ss')
-    }
-  } else {
-    if (props.defaultDate) {
-      if (props.defaultDate === true) {
-        datePart.value = Datetime().now().toFormat('yyyy-MM-dd', 'EN');
-      } else if (typeof props.defaultDate === 'string' &&/^[+-]?\d+$/.test(props.defaultDate.trim())) {
-        datePart.value = Datetime().now().luxonDateTime
-            .plus({ days: Number(props.defaultDate) })
-            .toFormat('yyyy-MM-dd');
-      } else {
-        const dateTime = Datetime().fromString(props.defaultDate)
-        if (dateTime.luxonDateTime.isValid) datePart.value = dateTime.toFormat('yyyy-MM-dd')
-      }
-    }
-  }
-}
-
-watchEffect(() => {
-  if (!pauseEmit.value) {
-    if (datePart.value && timePart.value) {
-      emit('update:modelValue', Datetime().fromString(`${datePart.value}T${timePart.value}`).toISO())
-    }
-    else if (!datePart.value) {
-      emit('update:modelValue', null)
-    }
-  }
-})
-
-watch(computedDateRules,()=>{
-  if (!props.readonly) nextTick(()=>dateRef.value?.validate())
-},{
-  deep: true
-})
-
-watch(computedTimeRules,()=>{
-  if (!props.readonly) nextTick(()=>timeRef.value?.validate())
-},{
-  deep: true
-})
-
-watch(() => props.modelValue, () => {
-  pauseEmit.value = true
-  if (!props.modelValue) {
-    reset()
-  }
-  else {
-    const dateTime = Datetime().fromString(props.modelValue)
-    if (dateTime.luxonDateTime.isValid) {
-      datePart.value = dateTime.toFormat('yyyy-MM-dd')
-      timePart.value = dateTime.toFormat('HH:mm:ss')
-    }
-    else {
-      reset()
-    }
-  }
-  pauseEmit.value = false
-}, { immediate: true })
-</script>
-
-<template>
-  <v-container
-      :fluid="true"
-      class="pa-0"
-  >
-    <v-row :dense="dense">
-      <v-col cols="8">
-        <FormDate
-            v-model="datePart"
-            ref="dateRef"
-            :rules="computedDateRules"
-            :label="label"
-            :format="format"
-            :picker-only="pickerOnly"
-            :readonly="readonly"
-            :disabled="fixedDate"
-            :min-date="minDate"
-            :max-date="maxDate"
-            v-bind="plainAttrs"
-        />
-      </v-col>
-      <v-col cols="4">
-        <FormTime
-            v-model="timePart"
-            ref="timeRef"
-            :rules="computedTimeRules"
-            :label="label"
-            :enable-seconds="enableSeconds"
-            :picker-only="pickerOnly"
-            :readonly="readonly"
-            v-bind="plainAttrs"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
+<script lang="ts" setup>
+/**
+ * FormDateTime is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {ref, computed, watch, watchEffect, nextTick, useAttrs} from 'vue'
+import {union, isBoolean, isArray, isString, omit} from 'lodash-es'
+import { VTextField } from 'vuetify/components/VTextField'
+import { type dateFormat, Datetime } from '../../utils/datetime'
+import { useRules } from '../../composables/utils/validation'
+
+interface Props {
+  modelValue?: string | null // Bound value for v-model synchronization with the parent component.
+  format?: dateFormat | string // Output format used when converting the value for display or emit.
+  label?: string // UI label displayed to end users
+  enableSeconds?: boolean // Includes seconds selector in the time picker.
+  rules?: typeof import('vuetify/components')['VTextField']['rules'] // validation rules applied before accepting input
+  dateRules?: typeof import('vuetify/components')['VTextField']['rules'] // date value used by component logic and display
+  timeRules?: typeof import('vuetify/components')['VTextField']['rules'] // time value used by component logic and display
+  dense?: boolean // Configuration option used by DateTime.
+  pickerOnly?: boolean // forces value selection through picker interaction only
+  minDate?: Date | string // earliest selectable date allowed by business rules
+  maxDate?: Date | string // latest selectable date allowed by business rules
+  readonly?: boolean // renders as read-only while keeping value visible
+  locale?: 'TH' | 'EN' // Locale used for date/time formatting and localized labels.
+
+  defaultDate?: boolean | string, // default date behavior/value when model is initially empty
+  defaultDateTime?: boolean | string, // date value used by component logic and display
+  fixedDate?: boolean // date value used by component logic and display
+}
+
+/**
+ * Public props accepted by FormDateTime.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  dense: false,
+  locale: 'TH',
+  enableSeconds: false,
+  format: 'shortDate',
+  pickerOnly: false,
+  readonly: false,
+  defaultDate: false,
+  defaultDateTime: false,
+  fixedDate: false,
+})
+
+/**
+ * Custom events emitted by FormDateTime.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  return omit(attrs, ['modelValue', 'onUpdate:modelValue','defaultDate','defaultDateTime','fixedDate'])
+})
+
+const dateRef = ref<VTextField>()
+const timeRef = ref<VTextField>()
+
+const computedRules = computed(() => {
+  const isoDateString = Datetime().fromString(`${datePart.value}T${timePart.value}`).toISO()
+
+  if (props.rules && isArray(props.rules)) {
+
+    const ruleConfig = {
+      singleModifier: ['DateFuture', 'DatetimeFuture', 'DateHappen', 'DatetimeHappen'],
+      twoPartModifier: ['DateAfter', 'DateBefore', 'DateEqual']
+    };
+
+    const ruleMapping : Record<string,Function> = {
+      'DateFuture' : useRules().DateFuture,
+      'DatetimeFuture' : useRules().DatetimeFuture,
+      'DateHappen' : useRules().DateHappen,
+      'DatetimeHappen' : useRules().DatetimeHappen,
+      'DateAfter' : useRules().DateAfter,
+      'DateBefore' : useRules().DatetimeFuture,
+      'DateEqual' : useRules().DateEqual,
+    }
+
+    const applyRule = (ruleName: string, modifier: any) => {
+      if (props.readonly) return true
+      const ruleFunc = ruleMapping[ruleName](...Object.values(modifier))
+      return ruleFunc(isoDateString)
+    };
+
+    return props.rules.map((rule) => {
+      if (isString(rule)) {
+        const ruleParts = rule.split('#')
+        const baseRule = ruleParts[0]
+
+        if (ruleConfig.singleModifier.includes(baseRule)) {
+          const modifiers = ruleParts.slice(1).join('#').trim() || undefined
+          return applyRule(baseRule, { modifiers });
+        }
+
+        if (ruleConfig.twoPartModifier.includes(baseRule)) {
+          const [modifier1, ...modifierRest] = ruleParts.slice(1)
+          const combinedModifier = modifierRest.join('#') || undefined
+          return applyRule(baseRule, { modifier1, combinedModifier })
+        }
+      }
+      return rule
+    })
+  } else {
+    return props.rules
+  }
+})
+
+const computedDateRules = computed(() => union(computedRules.value, props.dateRules))
+const computedTimeRules = computed(() => union(computedRules.value, props.timeRules))
+
+const datePart = ref<string | null>(null)
+const timePart = ref<string | null>(null)
+const pauseEmit = ref(true)
+
+function reset() {
+  datePart.value = null
+  timePart.value = null
+  if (props.defaultDateTime) {
+    const dateTime = (isBoolean(props.defaultDateTime)) ? Datetime().now() : Datetime().fromString(props.defaultDateTime)
+    if (dateTime.luxonDateTime.isValid) {
+      datePart.value = dateTime.toFormat('yyyy-MM-dd')
+      timePart.value = dateTime.toFormat('HH:mm:ss')
+    }
+  } else {
+    if (props.defaultDate) {
+      if (props.defaultDate === true) {
+        datePart.value = Datetime().now().toFormat('yyyy-MM-dd', 'EN');
+      } else if (typeof props.defaultDate === 'string' &&/^[+-]?\d+$/.test(props.defaultDate.trim())) {
+        datePart.value = Datetime().now().luxonDateTime
+            .plus({ days: Number(props.defaultDate) })
+            .toFormat('yyyy-MM-dd');
+      } else {
+        const dateTime = Datetime().fromString(props.defaultDate)
+        if (dateTime.luxonDateTime.isValid) datePart.value = dateTime.toFormat('yyyy-MM-dd')
+      }
+    }
+  }
+}
+
+watchEffect(() => {
+  if (!pauseEmit.value) {
+    if (datePart.value && timePart.value) {
+      emit('update:modelValue', Datetime().fromString(`${datePart.value}T${timePart.value}`).toISO())
+    }
+    else if (!datePart.value) {
+      emit('update:modelValue', null)
+    }
+  }
+})
+
+watch(computedDateRules,()=>{
+  if (!props.readonly) nextTick(()=>dateRef.value?.validate())
+},{
+  deep: true
+})
+
+watch(computedTimeRules,()=>{
+  if (!props.readonly) nextTick(()=>timeRef.value?.validate())
+},{
+  deep: true
+})
+
+watch(() => props.modelValue, () => {
+  pauseEmit.value = true
+  if (!props.modelValue) {
+    reset()
+  }
+  else {
+    const dateTime = Datetime().fromString(props.modelValue)
+    if (dateTime.luxonDateTime.isValid) {
+      datePart.value = dateTime.toFormat('yyyy-MM-dd')
+      timePart.value = dateTime.toFormat('HH:mm:ss')
+    }
+    else {
+      reset()
+    }
+  }
+  pauseEmit.value = false
+}, { immediate: true })
+</script>
+
+<template>
+  <v-container
+      :fluid="true"
+      class="pa-0"
+  >
+    <v-row :dense="dense">
+      <v-col cols="8">
+        <FormDate
+            v-model="datePart"
+            ref="dateRef"
+            :rules="computedDateRules"
+            :label="label"
+            :format="format"
+            :picker-only="pickerOnly"
+            :readonly="readonly"
+            :disabled="fixedDate"
+            :min-date="minDate"
+            :max-date="maxDate"
+            v-bind="plainAttrs"
+        />
+      </v-col>
+      <v-col cols="4">
+        <FormTime
+            v-model="timePart"
+            ref="timeRef"
+            :rules="computedTimeRules"
+            :label="label"
+            :enable-seconds="enableSeconds"
+            :picker-only="pickerOnly"
+            :readonly="readonly"
+            v-bind="plainAttrs"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>