@ramathibodi/nuxt-commons 0.1.14 → 0.1.15

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

@@ -1,216 +1,216 @@
-<script lang="ts" setup>
-import Datepicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
-import {nextTick, ref, watch, watchEffect,computed} from 'vue'
-import {type dateFormat, Datetime} from '../../utils/datetime'
-
-interface IDobPrecision {
-  yearMonthDay: string
-  yearMonth: string
-  year: string
-}
-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')[]
-  dobPrecisionText?: IDobPrecision
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  readonly: false,
-  locale: 'TH',
-  format: 'shortDate',
-  pickerOnly: false,
-  flow: () => ['year', 'month', 'calendar'],
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const dobPrecisionText = computed(() => {
-  if (props.dobPrecisionText) return props.dobPrecisionText
-  else return {
-    yearMonthDay: 'YMD',
-    yearMonth: 'YM',
-    year: 'Y',
-  }
-})
-const dobPrecisionChoice = ref<('yearMonthDay' | 'yearMonth' | 'year')[]>(['yearMonthDay', 'yearMonth', 'year'])
-const dobPrecisionSelected = defineModel<'yearMonthDay' | 'yearMonth' | 'year'>('dobPrecision', { default: 'yearMonthDay' })
-
-const dobPrecisionDisplay = computed(() => {
-  return (dobPrecisionSelected.value) ? dobPrecisionText.value[dobPrecisionSelected.value] : dobPrecisionText.value['yearMonthDay']
-})
-
-const changeDobPrecision = () => {
-  if (dobPrecisionSelected.value && dobPrecisionChoice.value.includes(dobPrecisionSelected.value)) {
-    dobPrecisionSelected.value = dobPrecisionChoice.value[(dobPrecisionChoice.value.indexOf(dobPrecisionSelected.value) + 1) % dobPrecisionChoice.value.length]
-  }
-  else {
-    dobPrecisionSelected.value = dobPrecisionChoice.value[0]
-  }
-}
-
-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 {
-    if (dobPrecisionSelected.value=="yearMonth") {
-      dateTime.luxonDateTime = dateTime.luxonDateTime.startOf('month')
-    }
-    if (dobPrecisionSelected.value=="year") {
-      dateTime.luxonDateTime = dateTime.luxonDateTime.startOf('year')
-    }
-    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
-
-  let displayFormat = props.format
-  if (dobPrecisionSelected.value=="yearMonth") {
-    displayFormat = "MMM yyyy"
-  }
-  if (dobPrecisionSelected.value=="year") {
-    displayFormat = "yyyy"
-  }
-
-  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
-  return dateTime.toFormat(displayFormat, props.locale)
-}
-
-function handleTextFieldClear() {
-  resetDatePicker()
-}
-
-function resetDatePicker() {
-  selectedDate.value = null
-  displayedDate.value = null
-}
-
-watchEffect(() => {
-  if (!isTextFieldFocused.value && selectedDate.value) {
-    displayedDate.value = formatDate(selectedDate.value)
-  }
-  else {
-    displayedDate.value = selectedDate.value
-  }
-})
-
-watch(selectedDate, (newValue) => {
-  emit('update:modelValue', newValue)
-})
-
-watch(() => props.modelValue, () => {
-  updateDate(props.modelValue || null)
-}, { immediate: true })
-
-watch(dobPrecisionSelected,()=>{
-  updateDate(selectedDate.value)
-})
-
-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>
-          <span
-            style="cursor: pointer;"
-            class="font-weight-medium"
-            @click="changeDobPrecision"
-          >{{ dobPrecisionDisplay }}</span>
-          &nbsp;
-          <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 {nextTick, ref, watch, watchEffect,computed} from 'vue'
+import {type dateFormat, Datetime} from '../../utils/datetime'
+
+interface IDobPrecision {
+  yearMonthDay: string
+  yearMonth: string
+  year: string
+}
+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')[]
+  dobPrecisionText?: IDobPrecision
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+  locale: 'TH',
+  format: 'shortDate',
+  pickerOnly: false,
+  flow: () => ['year', 'month', 'calendar'],
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const dobPrecisionText = computed(() => {
+  if (props.dobPrecisionText) return props.dobPrecisionText
+  else return {
+    yearMonthDay: 'YMD',
+    yearMonth: 'YM',
+    year: 'Y',
+  }
+})
+const dobPrecisionChoice = ref<('yearMonthDay' | 'yearMonth' | 'year')[]>(['yearMonthDay', 'yearMonth', 'year'])
+const dobPrecisionSelected = defineModel<'yearMonthDay' | 'yearMonth' | 'year'>('dobPrecision', { default: 'yearMonthDay' })
+
+const dobPrecisionDisplay = computed(() => {
+  return (dobPrecisionSelected.value) ? dobPrecisionText.value[dobPrecisionSelected.value] : dobPrecisionText.value['yearMonthDay']
+})
+
+const changeDobPrecision = () => {
+  if (dobPrecisionSelected.value && dobPrecisionChoice.value.includes(dobPrecisionSelected.value)) {
+    dobPrecisionSelected.value = dobPrecisionChoice.value[(dobPrecisionChoice.value.indexOf(dobPrecisionSelected.value) + 1) % dobPrecisionChoice.value.length]
+  }
+  else {
+    dobPrecisionSelected.value = dobPrecisionChoice.value[0]
+  }
+}
+
+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 {
+    if (dobPrecisionSelected.value=="yearMonth") {
+      dateTime.luxonDateTime = dateTime.luxonDateTime.startOf('month')
+    }
+    if (dobPrecisionSelected.value=="year") {
+      dateTime.luxonDateTime = dateTime.luxonDateTime.startOf('year')
+    }
+    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
+
+  let displayFormat = props.format
+  if (dobPrecisionSelected.value=="yearMonth") {
+    displayFormat = "MMM yyyy"
+  }
+  if (dobPrecisionSelected.value=="year") {
+    displayFormat = "yyyy"
+  }
+
+  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
+  return dateTime.toFormat(displayFormat, props.locale)
+}
+
+function handleTextFieldClear() {
+  resetDatePicker()
+}
+
+function resetDatePicker() {
+  selectedDate.value = null
+  displayedDate.value = null
+}
+
+watchEffect(() => {
+  if (!isTextFieldFocused.value && selectedDate.value) {
+    displayedDate.value = formatDate(selectedDate.value)
+  }
+  else {
+    displayedDate.value = selectedDate.value
+  }
+})
+
+watch(selectedDate, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+watch(() => props.modelValue, () => {
+  updateDate(props.modelValue || null)
+}, { immediate: true })
+
+watch(dobPrecisionSelected,()=>{
+  updateDate(selectedDate.value)
+})
+
+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>
+          <span
+            style="cursor: pointer;"
+            class="font-weight-medium"
+            @click="changeDobPrecision"
+          >{{ dobPrecisionDisplay }}</span>
+          &nbsp;
+          <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/CodeEditor.vue

@@ -1,37 +1,37 @@
-<script setup lang="ts">
-import {Codemirror} from 'vue-codemirror'
-import {oneDark} from '@codemirror/theme-one-dark'
-import {javascript} from '@codemirror/lang-javascript'
-import {html} from '@codemirror/lang-html'
-import {vue as vueLang} from '@codemirror/lang-vue'
-
-interface Props {
-  height?: string | number
-  minHeight?: string | number
-  lang?: 'html' | 'javascript' | 'vue'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  height: '100%',
-  minHeight: '20em',
-  lang: 'vue',
-})
-
-const extensions = [oneDark]
-if (props.lang == 'vue') {
-  extensions.push(vueLang({ base: html({ autoCloseTags: true, matchClosingTags: true, selfClosingTags: true }) }))
-}
-else {
-  extensions.push(javascript({ typescript: true }))
-}
-
-const model = defineModel<string>()
-</script>
-
-<template>
-  <codemirror
-    v-model="model"
-    :extensions="extensions"
-    :style="{ height: height, minHeight: minHeight }"
-  />
-</template>
+<script setup lang="ts">
+import {Codemirror} from 'vue-codemirror'
+import {oneDark} from '@codemirror/theme-one-dark'
+import {javascript} from '@codemirror/lang-javascript'
+import {html} from '@codemirror/lang-html'
+import {vue as vueLang} from '@codemirror/lang-vue'
+
+interface Props {
+  height?: string | number
+  minHeight?: string | number
+  lang?: 'html' | 'javascript' | 'vue'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: '100%',
+  minHeight: '20em',
+  lang: 'vue',
+})
+
+const extensions = [oneDark]
+if (props.lang == 'vue') {
+  extensions.push(vueLang({ base: html({ autoCloseTags: true, matchClosingTags: true, selfClosingTags: true }) }))
+}
+else {
+  extensions.push(javascript({ typescript: true }))
+}
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <codemirror
+    v-model="model"
+    :extensions="extensions"
+    :style="{ height: height, minHeight: minHeight }"
+  />
+</template>