@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,166 +1,178 @@
-<script lang="ts" setup>
-import { ref, watch, watchEffect, nextTick, defineExpose } from 'vue'
-import { VTextField } from 'vuetify/components/VTextField'
-import Datepicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
-import { Datetime } from '../../utils/datetime'
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
-  enableSeconds?: boolean
-  locale?: 'TH' | 'EN'
-  pickerOnly?: boolean
-  modelValue?: string | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  locale: 'TH',
-  pickerOnly: false,
-  enableSeconds: false,
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const time = ref<string | null>(null)
-const tempTime = ref<string | null>(null)
-const isMenuOpen = ref(false)
-const isTextFieldFocused = ref(false)
-const isTextFieldTyped = ref(false)
-
-function onTextFieldFocus(event: Event) {
-  isTextFieldFocused.value = true
-  nextTick(() => {
-    (event.target as HTMLInputElement).select()
-  })
-}
-
-function onTextFieldTyped() {
-  if (!isTextFieldTyped.value) {
-    isTextFieldTyped.value = true
-    isMenuOpen.value = false
-  }
-}
-
-function onTextFieldBlur() {
-  if (isTextFieldTyped.value) {
-    setTime(tempTime.value)
-    isTextFieldTyped.value = false
-  }
-  isTextFieldFocused.value = false
-}
-
-function onTextFieldEnterKey() {
-  onTextFieldBlur()
-}
-
-function onTextFieldClear() {
-  reset()
-}
-
-function reset() {
-  time.value = null
-  tempTime.value = null
-}
-
-function setTime(TimeString: string | null) {
-  const dateTime = Datetime().fromStringTime(TimeString, undefined, props.locale)
-  if (!dateTime.luxonDateTime.isValid) {
-    tempTime.value = null
-    time.value = null
-  }
-  else {
-    time.value = dateTime.toFormat('HH:mm:ss', 'EN')
-    tempTime.value = time.value
-  }
-}
-
-function setDatePicker(DateString: string | null) {
-  setTime(DateString)
-}
-
-watchEffect(() => {
-  if (!isTextFieldFocused.value && time.value) {
-    const dateTime = Datetime().fromString(time.value, undefined, props.locale)
-    tempTime.value = dateTime.toFormat((props.enableSeconds) ? 'HH:mm:ss' : 'HH:mm', props.locale)
-  }
-  else {
-    tempTime.value = time.value
-  }
-})
-
-watch(time, (newValue) => {
-  if (!isMenuOpen.value) emit('update:modelValue', newValue)
-})
-
-watch(isMenuOpen, () => {
-  if (isMenuOpen.value && !time.value) {
-    time.value = Datetime().now().toFormat((props.enableSeconds) ? 'HH:mm:ss' : 'HH:mm:00')
-  }
-  if (!isMenuOpen.value) emit('update:modelValue', time.value)
-})
-
-watch(() => props.modelValue, () => {
-  setTime(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,validate,resetValidation, isValid: textFieldRef.value?.isValid
-})
-</script>
-
-<template>
-  <v-menu
-      v-model="isMenuOpen"
-      :close-on-content-click="false"
-      :open-on-click="false"
-  >
-    <template #activator="{ props }">
-      <v-text-field
-          ref="textFieldRef"
-          v-model="tempTime"
-          v-bind="$attrs"
-          @focus="onTextFieldFocus"
-          @blur="onTextFieldBlur"
-          @keydown="onTextFieldTyped"
-          @keyup.enter="onTextFieldEnterKey"
-          @click:clear="onTextFieldClear"
-          @click="toggleMenuOpen('textField')"
-      >
-        <template #append="{ isReadonly, isDisabled }">
-          <v-icon
-              :disabled="isReadonly.value || isDisabled.value"
-              v-bind="props"
-              @click="toggleMenuOpen('icon')"
-          >
-            fa:fa-regular fa-clock
-          </v-icon>
-        </template>
-      </v-text-field>
-    </template>
-    <Datepicker
-        v-model="time"
-        model-type="HH:mm:ss"
-        :enable-seconds="enableSeconds"
-        minutes-grid-increment="1"
-        time-picker
-        auto-apply
-        :close-on-auto-apply="false"
-        inline
-        :locale="locale"
-        @update:model-value="setDatePicker"
-    />
-  </v-menu>
+<script lang="ts" setup>
+/**
+ * FormTime 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 } from 'vue'
+import { VTextField } from 'vuetify/components/VTextField'
+import Datepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { Datetime } from '../../utils/datetime'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
+  enableSeconds?: boolean // Includes seconds selector in the time picker.
+  locale?: 'TH' | 'EN' // Locale used for date/time formatting and localized labels.
+  pickerOnly?: boolean // forces value selection through picker interaction only
+  modelValue?: string | null // Bound value for v-model synchronization with the parent component.
+}
+
+/**
+ * Public props accepted by FormTime.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'TH',
+  pickerOnly: false,
+  enableSeconds: false,
+})
+
+/**
+ * Custom events emitted by FormTime.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+
+const time = ref<string | null>(null)
+const tempTime = ref<string | null>(null)
+const isMenuOpen = ref(false)
+const isTextFieldFocused = ref(false)
+const isTextFieldTyped = ref(false)
+
+function onTextFieldFocus(event: Event) {
+  isTextFieldFocused.value = true
+  nextTick(() => {
+    (event.target as HTMLInputElement).select()
+  })
+}
+
+function onTextFieldTyped() {
+  if (!isTextFieldTyped.value) {
+    isTextFieldTyped.value = true
+    isMenuOpen.value = false
+  }
+}
+
+function onTextFieldBlur() {
+  if (isTextFieldTyped.value) {
+    setTime(tempTime.value)
+    isTextFieldTyped.value = false
+  }
+  isTextFieldFocused.value = false
+}
+
+function onTextFieldEnterKey() {
+  onTextFieldBlur()
+}
+
+function onTextFieldClear() {
+  reset()
+}
+
+function reset() {
+  time.value = null
+  tempTime.value = null
+}
+
+function setTime(TimeString: string | null) {
+  const dateTime = Datetime().fromStringTime(TimeString, undefined, props.locale)
+  if (!dateTime.luxonDateTime.isValid) {
+    tempTime.value = null
+    time.value = null
+  }
+  else {
+    time.value = dateTime.toFormat('HH:mm:ss', 'EN')
+    tempTime.value = time.value
+  }
+}
+
+function setDatePicker(DateString: string | null) {
+  setTime(DateString)
+}
+
+watchEffect(() => {
+  if (!isTextFieldFocused.value && time.value) {
+    const dateTime = Datetime().fromString(time.value, undefined, props.locale)
+    tempTime.value = dateTime.toFormat((props.enableSeconds) ? 'HH:mm:ss' : 'HH:mm', props.locale)
+  }
+  else {
+    tempTime.value = time.value
+  }
+})
+
+watch(time, (newValue) => {
+  if (!isMenuOpen.value) emit('update:modelValue', newValue)
+})
+
+watch(isMenuOpen, () => {
+  if (isMenuOpen.value && !time.value) {
+    time.value = Datetime().now().toFormat((props.enableSeconds) ? 'HH:mm:ss' : 'HH:mm:00')
+  }
+  if (!isMenuOpen.value) emit('update:modelValue', time.value)
+})
+
+watch(() => props.modelValue, () => {
+  setTime(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,validate,resetValidation, isValid: textFieldRef.value?.isValid
+})
+</script>
+
+<template>
+  <v-menu
+      v-model="isMenuOpen"
+      :close-on-content-click="false"
+      :open-on-click="false"
+  >
+    <template #activator="{ props }">
+      <v-text-field
+          ref="textFieldRef"
+          v-model="tempTime"
+          v-bind="$attrs"
+          @focus="onTextFieldFocus"
+          @blur="onTextFieldBlur"
+          @keydown="onTextFieldTyped"
+          @keyup.enter="onTextFieldEnterKey"
+          @click:clear="onTextFieldClear"
+          @click="toggleMenuOpen('textField')"
+      >
+        <template #append="{ isReadonly, isDisabled }">
+          <v-icon
+              :disabled="isReadonly.value || isDisabled.value"
+              v-bind="props"
+              @click="toggleMenuOpen('icon')"
+          >
+            fa:fa-regular fa-clock
+          </v-icon>
+        </template>
+      </v-text-field>
+    </template>
+    <Datepicker
+        v-model="time"
+        model-type="HH:mm:ss"
+        :enable-seconds="enableSeconds"
+        minutes-grid-increment="1"
+        time-picker
+        auto-apply
+        :close-on-auto-apply="false"
+        inline
+        :locale="locale"
+        @update:model-value="setDatePicker"
+    />
+  </v-menu>
 </template>