@ramathibodi/nuxt-commons 0.1.14 → 0.1.15

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

@@ -1,163 +1,163 @@
-<script lang="ts" setup>
-import Datepicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
-import { ref, watch, watchEffect, nextTick } from 'vue'
-import { type dateFormat, Datetime } from '../../utils/datetime'
-
-interface Props {
-  readonly?: boolean
-  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')[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  readonly: false,
-  locale: 'TH',
-  format: 'shortDate',
-  pickerOnly: false,
-  flow: () => [],
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-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, () => {
-  updateDate(props.modelValue || null)
-}, { immediate: true })
-
-function toggleMenuOpen(trigger: string) {
-  if ((trigger === 'textField' && props.pickerOnly) || (trigger === 'icon' && !props.pickerOnly)) {
-    isMenuOpen.value = true
-  }
-}
-</script>
-
-<template>
-  <v-menu
-    v-model="isMenuOpen"
-    :open-on-click="false"
-  >
-    <template #activator="{ props: activatorProps }">
-      <v-text-field
-        ref="textField"
-        v-model="displayedDate"
-        :readonly="readonly"
-        v-bind="$attrs"
-        @focus="handleTextFieldFocus"
-        @blur="handleTextFieldBlur"
-        @keydown="handleTextFieldInput"
-        @keyup.enter="handleTextFieldEnterKey"
-        @click:clear="handleTextFieldClear"
-        @click="toggleMenuOpen('textField')"
-      >
-        <template #append-inner>
-          <v-icon
-            v-bind="activatorProps"
-            @click="toggleMenuOpen('icon')"
-          >
-            fa:fa-regular fa-calendar
-          </v-icon>
-        </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"
-      @update:model-value="updateDatePicker"
-    />
-  </v-menu>
-</template>
+<script lang="ts" setup>
+import Datepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { ref, watch, watchEffect, nextTick } from 'vue'
+import { type dateFormat, Datetime } from '../../utils/datetime'
+
+interface Props {
+  readonly?: boolean
+  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')[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+  locale: 'TH',
+  format: 'shortDate',
+  pickerOnly: false,
+  flow: () => [],
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+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, () => {
+  updateDate(props.modelValue || null)
+}, { immediate: true })
+
+function toggleMenuOpen(trigger: string) {
+  if ((trigger === 'textField' && props.pickerOnly) || (trigger === 'icon' && !props.pickerOnly)) {
+    isMenuOpen.value = true
+  }
+}
+</script>
+
+<template>
+  <v-menu
+    v-model="isMenuOpen"
+    :open-on-click="false"
+  >
+    <template #activator="{ props: activatorProps }">
+      <v-text-field
+        ref="textField"
+        v-model="displayedDate"
+        :readonly="readonly"
+        v-bind="$attrs"
+        @focus="handleTextFieldFocus"
+        @blur="handleTextFieldBlur"
+        @keydown="handleTextFieldInput"
+        @keyup.enter="handleTextFieldEnterKey"
+        @click:clear="handleTextFieldClear"
+        @click="toggleMenuOpen('textField')"
+      >
+        <template #append-inner>
+          <v-icon
+            v-bind="activatorProps"
+            @click="toggleMenuOpen('icon')"
+          >
+            fa:fa-regular fa-calendar
+          </v-icon>
+        </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"
+      @update:model-value="updateDatePicker"
+    />
+  </v-menu>
+</template>

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

@@ -1,107 +1,107 @@
-<script lang="ts" setup>
-import { ref, computed, watch, watchEffect } from 'vue'
-import { union } from 'lodash-es'
-import { type dateFormat, Datetime } from '../../utils/datetime'
-
-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'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  dense: false,
-  locale: 'TH',
-  enableSeconds: false,
-  format: 'shortDate',
-  pickerOnly: false,
-  readonly: false,
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const computedDateRules = computed(() => union(props.rules, props.dateRules))
-const computedTimeRules = computed(() => union(props.rules, props.timeRules))
-
-const datePart = ref<string | null>(null)
-const timePart = ref<string | null>(null)
-const pauseEmit = ref(false)
-
-function reset() {
-  datePart.value = null
-  timePart.value = null
-}
-
-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(() => 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"
-          :rules="computedDateRules"
-          :label="label"
-          :format="format"
-          :picker-only="pickerOnly"
-          :readonly="readonly"
-          :min-date="minDate"
-          :max-date="maxDate"
-          v-bind="$attrs"
-        />
-      </v-col>
-      <v-col cols="4">
-        <FormTime
-          v-model="timePart"
-          :rules="computedTimeRules"
-          :label="label"
-          :enable-seconds="enableSeconds"
-          :picker-only="pickerOnly"
-          :readonly="readonly"
-          v-bind="$attrs"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
+<script lang="ts" setup>
+import { ref, computed, watch, watchEffect } from 'vue'
+import { union } from 'lodash-es'
+import { type dateFormat, Datetime } from '../../utils/datetime'
+
+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'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dense: false,
+  locale: 'TH',
+  enableSeconds: false,
+  format: 'shortDate',
+  pickerOnly: false,
+  readonly: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const computedDateRules = computed(() => union(props.rules, props.dateRules))
+const computedTimeRules = computed(() => union(props.rules, props.timeRules))
+
+const datePart = ref<string | null>(null)
+const timePart = ref<string | null>(null)
+const pauseEmit = ref(false)
+
+function reset() {
+  datePart.value = null
+  timePart.value = null
+}
+
+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(() => 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"
+          :rules="computedDateRules"
+          :label="label"
+          :format="format"
+          :picker-only="pickerOnly"
+          :readonly="readonly"
+          :min-date="minDate"
+          :max-date="maxDate"
+          v-bind="$attrs"
+        />
+      </v-col>
+      <v-col cols="4">
+        <FormTime
+          v-model="timePart"
+          :rules="computedTimeRules"
+          :label="label"
+          :enable-seconds="enableSeconds"
+          :picker-only="pickerOnly"
+          :readonly="readonly"
+          v-bind="$attrs"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>