@ramathibodi/nuxt-commons 0.1.14 → 0.1.15

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

@@ -1,158 +1,158 @@
-<script lang="ts" setup>
-import { ref, watch, watchEffect, nextTick } from 'vue'
-import Datepicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
-import { Datetime } from '../../utils/datetime'
-
-interface Props {
-  readonly?: boolean
-  enableSeconds?: boolean
-  locale?: 'TH' | 'EN'
-  pickerOnly?: boolean
-  modelValue?: string | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  readonly: false,
-  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 })
-
-const isOpenMenu = (value: string) => {
-  if (value === 'txtField' && props.pickerOnly) {
-    isMenuOpen.value = true
-  }
-  else if (value === 'icon' && !props.pickerOnly) {
-    isMenuOpen.value = true
-  }
-}
-</script>
-
-<template>
-  <v-menu
-    v-model="isMenuOpen"
-    :close-on-content-click="false"
-    :open-on-click="false"
-  >
-    <template #activator="{ props }">
-      <v-text-field
-        ref="textField"
-        v-model="tempTime"
-        :readonly="readonly"
-        v-bind="$attrs"
-        @focus="onTextFieldFocus"
-        @blur="onTextFieldBlur"
-        @keydown="onTextFieldTyped"
-        @keyup.enter="onTextFieldEnterKey"
-        @click:clear="onTextFieldClear"
-        @click="isOpenMenu('txtField')"
-      >
-        <template #append-inner>
-          <v-icon
-            v-bind="props"
-            @click="isOpenMenu('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>
+<script lang="ts" setup>
+import { ref, watch, watchEffect, nextTick } from 'vue'
+import Datepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { Datetime } from '../../utils/datetime'
+
+interface Props {
+  readonly?: boolean
+  enableSeconds?: boolean
+  locale?: 'TH' | 'EN'
+  pickerOnly?: boolean
+  modelValue?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+  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 })
+
+const isOpenMenu = (value: string) => {
+  if (value === 'txtField' && props.pickerOnly) {
+    isMenuOpen.value = true
+  }
+  else if (value === 'icon' && !props.pickerOnly) {
+    isMenuOpen.value = true
+  }
+}
+</script>
+
+<template>
+  <v-menu
+    v-model="isMenuOpen"
+    :close-on-content-click="false"
+    :open-on-click="false"
+  >
+    <template #activator="{ props }">
+      <v-text-field
+        ref="textField"
+        v-model="tempTime"
+        :readonly="readonly"
+        v-bind="$attrs"
+        @focus="onTextFieldFocus"
+        @blur="onTextFieldBlur"
+        @keydown="onTextFieldTyped"
+        @keyup.enter="onTextFieldEnterKey"
+        @click:clear="onTextFieldClear"
+        @click="isOpenMenu('txtField')"
+      >
+        <template #append-inner>
+          <v-icon
+            v-bind="props"
+            @click="isOpenMenu('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>