@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,259 +1,271 @@
-<script lang="ts" setup>
-import { ref, watch, watchEffect, nextTick, defineExpose, computed} from 'vue'
-import { VTextField } from 'vuetify/components/VTextField'
-import Datepicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
-import { isArray, isString } from "lodash-es";
-import { type dateFormat, Datetime } from '../../utils/datetime'
-import { useRules } from "../../composables/utils/validation";
-import { th } from 'date-fns/locale';
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
-  locale?: 'TH' | 'EN'
-  format?: dateFormat | string
-  modelValue?: string | null
-  holiday?: object[] | undefined
-  minDate?: Date | string
-  maxDate?: Date | string
-  pickerOnly?: boolean
-  flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
-  rules?: typeof VTextField['rules']
-
-  defaultDate?: boolean | string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  locale: 'TH',
-  format: 'shortDate',
-  pickerOnly: false,
-  flow: () => [],
-
-  defaultDate: false,
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const computedRules = computed(() => {
-  if (props.rules && isArray(props.rules)) {
-
-    const ruleConfig = {
-      singleModifier: ['DateFuture', 'DateHappen'],
-      twoPartModifier: ['DateAfter', 'DateBefore', 'DateEqual']
-    };
-
-    const ruleMapping : Record<string,Function> = {
-      'DateFuture' : useRules().DateFuture,
-      'DateHappen' : useRules().DateHappen,
-      '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(selectedDate.value)
-    };
-
-    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 selectedDate = ref<string | null>(null)
-const displayedDate = ref<string | null>(null)
-
-const isMenuOpen = ref(false)
-const isTextFieldFocused = ref(false)
-const hasTextFieldInput = ref(false)
-
-function handleTextFieldFocus(event: Event) {
-  isTextFieldFocused.value = true
-  nextTick(() => {
-    (event.target as HTMLInputElement).select()
-  })
-}
-
-function handleTextFieldInput() {
-  if (!hasTextFieldInput.value) {
-    hasTextFieldInput.value = true
-    isMenuOpen.value = false
-  }
-}
-
-function handleTextFieldBlur() {
-  if (hasTextFieldInput.value) {
-    updateDate(displayedDate.value)
-    hasTextFieldInput.value = false
-  }
-  isTextFieldFocused.value = false
-}
-
-function handleTextFieldEnterKey() {
-  handleTextFieldBlur()
-}
-
-function updateDatePicker(dateString: string | null) {
-  isMenuOpen.value = false
-  updateDate(dateString)
-}
-
-function updateDate(dateString: string | null) {
-  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
-  if (!dateTime.luxonDateTime.isValid) {
-    displayedDate.value = null
-    selectedDate.value = null
-  }
-  else {
-    selectedDate.value = dateTime.toFormat('yyyy-MM-dd', 'EN')
-    displayedDate.value = selectedDate.value
-  }
-
-  if (!isTextFieldFocused.value) displayedDate.value = formatDate(displayedDate.value)
-}
-
-function formatDate(dateString: string | null) {
-  if (!dateString) return null
-
-  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
-  return dateTime.toFormat(props.format, props.locale)
-}
-
-function handleTextFieldClear() {
-  resetDatePicker()
-}
-
-function resetDatePicker() {
-  selectedDate.value = null
-  displayedDate.value = null
-}
-
-watchEffect(() => {
-  if (!isTextFieldFocused.value && selectedDate.value) {
-    const dateTime = Datetime().fromString(selectedDate.value, undefined, props.locale)
-    displayedDate.value = dateTime.toFormat(props.format, props.locale)
-  }
-  else {
-    displayedDate.value = selectedDate.value
-  }
-})
-
-watch(selectedDate, (newValue) => {
-  emit('update:modelValue', newValue)
-})
-
-watch(() => props.modelValue, (newValue,oldValue) => {
-  if (!oldValue && !newValue && props.defaultDate) {
-    if (!oldValue && !newValue && props.defaultDate) {
-      let defaultDate: string | null = null;
-
-      if (props.defaultDate === true) {
-        defaultDate = Datetime().now().toFormat('yyyy-MM-dd', 'EN');
-      } else if (typeof props.defaultDate === 'string' &&/^[+-]?\d+$/.test(props.defaultDate.trim())) {
-        defaultDate = Datetime().now().luxonDateTime
-            .plus({ days: Number(props.defaultDate) })
-            .toFormat('yyyy-MM-dd');
-      } else {
-        const dateTime = Datetime().fromString(props.defaultDate)
-        if (dateTime.luxonDateTime.isValid) defaultDate = dateTime.toFormat('yyyy-MM-dd')
-      }
-
-      updateDate(defaultDate);
-    } else {
-      updateDate(newValue ?? null);
-    }
-  } else {
-    updateDate(props.modelValue || null)
-  }
-}, { immediate: true })
-
-function toggleMenuOpen(trigger: string) {
-  if ((trigger === 'textField' && props.pickerOnly) || (trigger === 'icon' && !props.pickerOnly)) {
-    if (!props.readonly) isMenuOpen.value = true
-  }
-}
-
-const textFieldRef = ref<VTextField>()
-function validate() {
-  textFieldRef.value?.validate()
-}
-function resetValidation() {
-  textFieldRef.value?.resetValidation()
-}
-
-defineExpose({
-  reset : resetDatePicker,validate,resetValidation, isValid: textFieldRef.value?.isValid
-})
-</script>
-
-<template>
-  <v-menu
-      v-model="isMenuOpen"
-      :open-on-click="false"
-  >
-    <template #activator="{ props: activatorProps }">
-      <v-text-field
-          ref="textFieldRef"
-          v-model="displayedDate"
-          :rules="computedRules"
-          v-bind="$attrs"
-          @focus="handleTextFieldFocus"
-          @blur="handleTextFieldBlur"
-          @keydown="handleTextFieldInput"
-          @keyup.enter="handleTextFieldEnterKey"
-          @click:clear="handleTextFieldClear"
-          @click="toggleMenuOpen('textField')"
-      >
-        <template #append="appendProps">
-          <slot name="append" v-bind="appendProps" :toggleMenuOpen="toggleMenuOpen" :activatorProps="activatorProps">
-            <v-icon
-                :disabled="appendProps.isReadonly?.value || appendProps.isDisabled?.value"
-                v-bind="activatorProps"
-                @click="toggleMenuOpen('icon')"
-            >
-              fa:fa-regular fa-calendar
-            </v-icon>
-          </slot>
-        </template>
-      </v-text-field>
-    </template>
-    <Datepicker
-        v-model="selectedDate"
-        model-type="yyyy-MM-dd"
-        :enable-time-picker="false"
-        :flow="flow"
-        :min-date="props.minDate"
-        :max-date="props.maxDate"
-        auto-apply
-        inline
-        :locale="locale"
-        :format-locale="(locale=='TH') ? th : undefined"
-        @update:model-value="updateDatePicker"
-    >
-      <template #year="{value}" v-if="locale=='TH'">
-        {{value+543}}
-      </template>
-      <template #year-overlay-value="{value}" v-if="locale=='TH'">
-        {{value+543}}
-      </template>
-    </Datepicker>
-  </v-menu>
+<script lang="ts" setup>
+/**
+ * FormDate 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, watch, watchEffect, nextTick, defineExpose, computed} from 'vue'
+import { VTextField } from 'vuetify/components/VTextField'
+import Datepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { isArray, isString } from "lodash-es";
+import { type dateFormat, Datetime } from '../../utils/datetime'
+import { useRules } from "../../composables/utils/validation";
+import { th } from 'date-fns/locale';
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
+  locale?: 'TH' | 'EN' // Locale used for date/time formatting and localized labels.
+  format?: dateFormat | string // Output format used when converting the value for display or emit.
+  modelValue?: string | null // Bound value for v-model synchronization with the parent component.
+  holiday?: object[] | undefined // Holiday date list used to decorate or block specific dates.
+  minDate?: Date | string // earliest selectable date allowed by business rules
+  maxDate?: Date | string // latest selectable date allowed by business rules
+  pickerOnly?: boolean // forces value selection through picker interaction only
+  flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[] // picker navigation flow order shown to users
+  rules?: typeof VTextField['rules'] // validation rules applied before accepting input
+
+  defaultDate?: boolean | string // default date behavior/value when model is initially empty
+}
+
+/**
+ * Public props accepted by FormDate.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'TH',
+  format: 'shortDate',
+  pickerOnly: false,
+  flow: () => [],
+
+  defaultDate: false,
+})
+
+/**
+ * Custom events emitted by FormDate.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+
+const computedRules = computed(() => {
+  if (props.rules && isArray(props.rules)) {
+
+    const ruleConfig = {
+      singleModifier: ['DateFuture', 'DateHappen'],
+      twoPartModifier: ['DateAfter', 'DateBefore', 'DateEqual']
+    };
+
+    const ruleMapping : Record<string,Function> = {
+      'DateFuture' : useRules().DateFuture,
+      'DateHappen' : useRules().DateHappen,
+      '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(selectedDate.value)
+    };
+
+    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 selectedDate = ref<string | null>(null)
+const displayedDate = ref<string | null>(null)
+
+const isMenuOpen = ref(false)
+const isTextFieldFocused = ref(false)
+const hasTextFieldInput = ref(false)
+
+function handleTextFieldFocus(event: Event) {
+  isTextFieldFocused.value = true
+  nextTick(() => {
+    (event.target as HTMLInputElement).select()
+  })
+}
+
+function handleTextFieldInput() {
+  if (!hasTextFieldInput.value) {
+    hasTextFieldInput.value = true
+    isMenuOpen.value = false
+  }
+}
+
+function handleTextFieldBlur() {
+  if (hasTextFieldInput.value) {
+    updateDate(displayedDate.value)
+    hasTextFieldInput.value = false
+  }
+  isTextFieldFocused.value = false
+}
+
+function handleTextFieldEnterKey() {
+  handleTextFieldBlur()
+}
+
+function updateDatePicker(dateString: string | null) {
+  isMenuOpen.value = false
+  updateDate(dateString)
+}
+
+function updateDate(dateString: string | null) {
+  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
+  if (!dateTime.luxonDateTime.isValid) {
+    displayedDate.value = null
+    selectedDate.value = null
+  }
+  else {
+    selectedDate.value = dateTime.toFormat('yyyy-MM-dd', 'EN')
+    displayedDate.value = selectedDate.value
+  }
+
+  if (!isTextFieldFocused.value) displayedDate.value = formatDate(displayedDate.value)
+}
+
+function formatDate(dateString: string | null) {
+  if (!dateString) return null
+
+  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
+  return dateTime.toFormat(props.format, props.locale)
+}
+
+function handleTextFieldClear() {
+  resetDatePicker()
+}
+
+function resetDatePicker() {
+  selectedDate.value = null
+  displayedDate.value = null
+}
+
+watchEffect(() => {
+  if (!isTextFieldFocused.value && selectedDate.value) {
+    const dateTime = Datetime().fromString(selectedDate.value, undefined, props.locale)
+    displayedDate.value = dateTime.toFormat(props.format, props.locale)
+  }
+  else {
+    displayedDate.value = selectedDate.value
+  }
+})
+
+watch(selectedDate, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+watch(() => props.modelValue, (newValue,oldValue) => {
+  if (!oldValue && !newValue && props.defaultDate) {
+    if (!oldValue && !newValue && props.defaultDate) {
+      let defaultDate: string | null = null;
+
+      if (props.defaultDate === true) {
+        defaultDate = Datetime().now().toFormat('yyyy-MM-dd', 'EN');
+      } else if (typeof props.defaultDate === 'string' &&/^[+-]?\d+$/.test(props.defaultDate.trim())) {
+        defaultDate = Datetime().now().luxonDateTime
+            .plus({ days: Number(props.defaultDate) })
+            .toFormat('yyyy-MM-dd');
+      } else {
+        const dateTime = Datetime().fromString(props.defaultDate)
+        if (dateTime.luxonDateTime.isValid) defaultDate = dateTime.toFormat('yyyy-MM-dd')
+      }
+
+      updateDate(defaultDate);
+    } else {
+      updateDate(newValue ?? null);
+    }
+  } else {
+    updateDate(props.modelValue || null)
+  }
+}, { immediate: true })
+
+function toggleMenuOpen(trigger: string) {
+  if ((trigger === 'textField' && props.pickerOnly) || (trigger === 'icon' && !props.pickerOnly)) {
+    if (!props.readonly) isMenuOpen.value = true
+  }
+}
+
+const textFieldRef = ref<VTextField>()
+function validate() {
+  textFieldRef.value?.validate()
+}
+function resetValidation() {
+  textFieldRef.value?.resetValidation()
+}
+
+defineExpose({
+  reset : resetDatePicker,validate,resetValidation, isValid: textFieldRef.value?.isValid
+})
+</script>
+
+<template>
+  <v-menu
+      v-model="isMenuOpen"
+      :open-on-click="false"
+  >
+    <template #activator="{ props: activatorProps }">
+      <v-text-field
+          ref="textFieldRef"
+          v-model="displayedDate"
+          :rules="computedRules"
+          v-bind="$attrs"
+          @focus="handleTextFieldFocus"
+          @blur="handleTextFieldBlur"
+          @keydown="handleTextFieldInput"
+          @keyup.enter="handleTextFieldEnterKey"
+          @click:clear="handleTextFieldClear"
+          @click="toggleMenuOpen('textField')"
+      >
+        <template #append="appendProps">
+          <slot name="append" v-bind="appendProps" :toggleMenuOpen="toggleMenuOpen" :activatorProps="activatorProps">
+            <v-icon
+                :disabled="appendProps.isReadonly?.value || appendProps.isDisabled?.value"
+                v-bind="activatorProps"
+                @click="toggleMenuOpen('icon')"
+            >
+              fa:fa-regular fa-calendar
+            </v-icon>
+          </slot>
+        </template>
+      </v-text-field>
+    </template>
+    <Datepicker
+        v-model="selectedDate"
+        model-type="yyyy-MM-dd"
+        :enable-time-picker="false"
+        :flow="flow"
+        :min-date="props.minDate"
+        :max-date="props.maxDate"
+        auto-apply
+        inline
+        :locale="locale"
+        :format-locale="(locale=='TH') ? th : undefined"
+        @update:model-value="updateDatePicker"
+    >
+      <template #year="{value}" v-if="locale=='TH'">
+        {{value+543}}
+      </template>
+      <template #year-overlay-value="{value}" v-if="locale=='TH'">
+        {{value+543}}
+      </template>
+    </Datepicker>
+  </v-menu>
 </template>