@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,144 +1,156 @@
-<script lang="ts" setup>
-import {computed, defineExpose, ref, watchEffect} from 'vue'
-import {cloneDeep, isEqual} from 'lodash-es'
-import type {FormDialogCallback} from '../../types/formDialog'
-import FormPadComponent from './Pad.vue'
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof FormPadComponent['$props']> {
-  title?: string
-  initialData?: object
-  saveCaption?: string
-  cancelCaption?: string
-  readonly?: boolean
-  showTitle?: boolean
-  skipValidation?:boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  saveCaption: 'บันทึก',
-  cancelCaption: 'ยกเลิก',
-  readonly: false,
-  showTitle: false,
-  skipValidation:false
-})
-
-const isSaving = ref<boolean>(false)
-const formPadRef = ref()
-const formData = ref<object>({})
-const formDataOriginalValue = ref<object>()
-
-const emit = defineEmits(['create', 'update'])
-
-function save() {
-  if (props.skipValidation || formPadRef.value?.isValid) {
-    isSaving.value = true
-    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value), callback)
-  }
-}
-
-function cancel() {
-  reset()
-}
-
-function reset() {
-  formDataOriginalValue.value = undefined
-  formPadRef.value?.reset()
-  loadFormData()
-}
-
-const callback: FormDialogCallback = {
-  done: function () {
-    isSaving.value = false
-    reset()
-  },
-  error: function () {
-    isSaving.value = false
-  },
-}
-
-const isDataChange = computed(() => {
-  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formDataOriginalValue.value))
-})
-
-const isCreating = computed(() => {
-  return !formDataOriginalValue.value
-})
-
-const createOriginalValue = computed(() => {
-  return Object.assign({}, props.initialData)
-})
-
-const loadFormData = () => {
-  if (formDataOriginalValue.value) {
-    formData.value = cloneDeep(formDataOriginalValue.value)
-  }
-  else {
-    formData.value = Object.assign({}, cloneDeep(props.initialData))
-  }
-}
-
-const operation = ref({ isDataChange, isCreating, isSaving, save, cancel })
-
-watchEffect(loadFormData)
-
-function setOriginalData(originalData?: object) {
-  formDataOriginalValue.value = originalData
-}
-
-defineExpose({setOriginalData,operation,formPad: formPadRef})
-</script>
-
-<template>
-    <VCard flat>
-      <VToolbar v-if="showTitle">
-        <slot name="titleToolbar" :operation="operation">
-          <VToolbarTitle>
-            <slot name="title" :operation="operation">
-              {{ (isCreating) ? "New" : "Edit" }} {{ title }}
-            </slot>
-          </VToolbarTitle>
-        </slot>
-      </VToolbar>
-      <VCardText>
-        <form-pad
-            ref="formPadRef"
-            v-model="formData"
-            :originalData="formDataOriginalValue"
-            :readonly="readonly"
-            isolated
-            v-bind="$attrs"
-        >
-          <template #default="slotData">
-            <slot
-                v-bind="slotData"
-                :is-creating="isCreating"
-                :is-data-change="isDataChange"
-            />
-          </template>
-        </form-pad>
-      </VCardText>
-      <VCardActions>
-        <slot name="action" :operation="operation">
-          <VSpacer />
-          <VBtn
-              color="primary"
-              variant="flat"
-              :loading="isSaving"
-              :disabled="!isDataChange"
-              @click="save"
-              v-if="!readonly"
-          >
-            {{ saveCaption }}
-          </VBtn>
-          <VBtn
-              color="error"
-              variant="flat"
-              :disabled="isSaving"
-              @click="cancel"
-          >
-            {{ cancelCaption }}
-          </VBtn>
-        </slot>
-      </VCardActions>
-    </VCard>
-</template>
+<script lang="ts" setup>
+/**
+ * FormActionPad 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 {computed, defineExpose, ref, watchEffect} from 'vue'
+import {cloneDeep, isEqual} from 'lodash-es'
+import type {FormDialogCallback} from '../../types/formDialog'
+import FormPadComponent from './Pad.vue'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof FormPadComponent['$props']> {
+  title?: string // Title text displayed in the component header or dialog.
+  initialData?: object // Initial form/object values used when creating a new record.
+  saveCaption?: string // Label text for the save/confirm action button.
+  cancelCaption?: string // Label text for the cancel action button.
+  readonly?: boolean // renders as read-only while keeping value visible
+  showTitle?: boolean // Shows or hides the component title/header area.
+  skipValidation?: boolean // Skips form validation before emitting save actions.
+}
+
+/**
+ * Public props accepted by FormActionPad.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
+  readonly: false,
+  showTitle: false,
+  skipValidation:false
+})
+
+const isSaving = ref<boolean>(false)
+const formPadRef = ref()
+const formData = ref<object>({})
+const formDataOriginalValue = ref<object>()
+
+/**
+ * Custom events emitted by FormActionPad.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['create', 'update'])
+
+function save() {
+  if (props.skipValidation || formPadRef.value?.isValid) {
+    isSaving.value = true
+    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value), callback)
+  }
+}
+
+function cancel() {
+  reset()
+}
+
+function reset() {
+  formDataOriginalValue.value = undefined
+  formPadRef.value?.reset()
+  loadFormData()
+}
+
+const callback: FormDialogCallback = {
+  done: function () {
+    isSaving.value = false
+    reset()
+  },
+  error: function () {
+    isSaving.value = false
+  },
+}
+
+const isDataChange = computed(() => {
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formDataOriginalValue.value))
+})
+
+const isCreating = computed(() => {
+  return !formDataOriginalValue.value
+})
+
+const createOriginalValue = computed(() => {
+  return Object.assign({}, props.initialData)
+})
+
+const loadFormData = () => {
+  if (formDataOriginalValue.value) {
+    formData.value = cloneDeep(formDataOriginalValue.value)
+  }
+  else {
+    formData.value = Object.assign({}, cloneDeep(props.initialData))
+  }
+}
+
+const operation = ref({ isDataChange, isCreating, isSaving, save, cancel })
+
+watchEffect(loadFormData)
+
+function setOriginalData(originalData?: object) {
+  formDataOriginalValue.value = originalData
+}
+
+defineExpose({setOriginalData,operation,formPad: formPadRef})
+</script>
+
+<template>
+    <VCard flat>
+      <VToolbar v-if="showTitle">
+        <slot name="titleToolbar" :operation="operation">
+          <VToolbarTitle>
+            <slot name="title" :operation="operation">
+              {{ (isCreating) ? "New" : "Edit" }} {{ title }}
+            </slot>
+          </VToolbarTitle>
+        </slot>
+      </VToolbar>
+      <VCardText>
+        <form-pad
+            ref="formPadRef"
+            v-model="formData"
+            :originalData="formDataOriginalValue"
+            :readonly="readonly"
+            isolated
+            v-bind="$attrs"
+        >
+          <template #default="slotData">
+            <slot
+                v-bind="slotData"
+                :is-creating="isCreating"
+                :is-data-change="isDataChange"
+            />
+          </template>
+        </form-pad>
+      </VCardText>
+      <VCardActions>
+        <slot name="action" :operation="operation">
+          <VSpacer />
+          <VBtn
+              color="primary"
+              variant="flat"
+              :loading="isSaving"
+              :disabled="!isDataChange"
+              @click="save"
+              v-if="!readonly"
+          >
+            {{ saveCaption }}
+          </VBtn>
+          <VBtn
+              color="error"
+              variant="flat"
+              :disabled="isSaving"
+              @click="cancel"
+          >
+            {{ cancelCaption }}
+          </VBtn>
+        </slot>
+      </VCardActions>
+    </VCard>
+</template>

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

@@ -1,104 +1,116 @@
-<script lang="ts" setup>
-import '@vuepic/vue-datepicker/dist/main.css'
-import {computed, onMounted, ref} from 'vue'
-import {VTextField} from "vuetify/components/VTextField";
-import {isArray} from "lodash-es";
-
-interface IDobPrecision {
-  yearMonthDay: string
-  yearMonth: string
-  year: string
-  estimated: string
-}
-
-interface Props {
-  flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
-  dobPrecisionText?: IDobPrecision
-  rules?: typeof VTextField['rules']
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  flow: () => ['year', 'month', 'calendar'],
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const modelValue = defineModel<string>()
-
-const dobPrecisionText = computed(() => {
-  if (props.dobPrecisionText) return props.dobPrecisionText
-  else return {
-    yearMonthDay: 'YMD',
-    yearMonth: 'YM',
-    year: 'Y',
-    estimated: 'EST',
-  }
-})
-const dobPrecisionChoice = ref<('yearMonthDay' | 'yearMonth' | 'year' | 'estimated')[]>(['yearMonthDay', 'yearMonth', 'year', 'estimated'])
-const dobPrecisionSelected = defineModel<'yearMonthDay' | 'yearMonth' | 'year' | 'estimated'>('dobPrecision')
-onMounted(()=>{
-  if (!dobPrecisionSelected.value) {
-    dobPrecisionSelected.value = '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 computedRules = computed(() => {
-  if (props.rules && isArray(props.rules)) {
-    return props.rules.includes("DateHappen") ? props.rules : props.rules.concat("DateHappen")
-  } else {
-    return ['DateHappen']
-  }
-})
-
-const dobFormat = computed(() => {
-  let displayFormat : string|undefined = undefined
-  if (dobPrecisionSelected.value=="yearMonth") {
-    displayFormat = "MMM yyyy"
-  }
-  if (dobPrecisionSelected.value=="year") {
-    displayFormat = "yyyy"
-  }
-  if (dobPrecisionSelected.value=="estimated") {
-    displayFormat = "~ MMM yyyy"
-  }
-  return displayFormat
-})
-</script>
-
-<template>
-  <FormDate
-      v-model="modelValue"
-      :flow="props.flow"
-      :format="dobFormat"
-      :rules="computedRules"
-  >
-    <template #append="{ isReadonly, isDisabled, activatorProps, toggleMenuOpen}">
-      <span
-          style="cursor: pointer;"
-          class="font-weight-medium"
-          @click="(isReadonly.value || isDisabled.value) ? undefined : changeDobPrecision()"
-      >{{ dobPrecisionDisplay }}</span>
-      &nbsp;
-      <v-icon
-          :disabled="isReadonly.value || isDisabled.value"
-          v-bind="activatorProps"
-          @click="toggleMenuOpen('icon')"
-      >
-        fa:fa-regular fa-calendar
-      </v-icon>
-    </template>
-  </FormDate>
-</template>
+<script lang="ts" setup>
+/**
+ * FormBirthdate 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 '@vuepic/vue-datepicker/dist/main.css'
+import {computed, onMounted, ref} from 'vue'
+import {VTextField} from "vuetify/components/VTextField";
+import {isArray} from "lodash-es";
+
+interface IDobPrecision {
+  yearMonthDay: string
+  yearMonth: string
+  year: string
+  estimated: string
+}
+
+interface Props {
+  flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[] // picker navigation flow order shown to users
+  dobPrecisionText?: IDobPrecision // Label map for birthdate precision values (day/month/year).
+  rules?: typeof VTextField['rules'] // validation rules applied before accepting input
+}
+
+/**
+ * Public props accepted by FormBirthdate.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  flow: () => ['year', 'month', 'calendar'],
+})
+
+/**
+ * Custom events emitted by FormBirthdate.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+
+const modelValue = defineModel<string>()
+
+const dobPrecisionText = computed(() => {
+  if (props.dobPrecisionText) return props.dobPrecisionText
+  else return {
+    yearMonthDay: 'YMD',
+    yearMonth: 'YM',
+    year: 'Y',
+    estimated: 'EST',
+  }
+})
+const dobPrecisionChoice = ref<('yearMonthDay' | 'yearMonth' | 'year' | 'estimated')[]>(['yearMonthDay', 'yearMonth', 'year', 'estimated'])
+const dobPrecisionSelected = defineModel<'yearMonthDay' | 'yearMonth' | 'year' | 'estimated'>('dobPrecision')
+onMounted(()=>{
+  if (!dobPrecisionSelected.value) {
+    dobPrecisionSelected.value = '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 computedRules = computed(() => {
+  if (props.rules && isArray(props.rules)) {
+    return props.rules.includes("DateHappen") ? props.rules : props.rules.concat("DateHappen")
+  } else {
+    return ['DateHappen']
+  }
+})
+
+const dobFormat = computed(() => {
+  let displayFormat : string|undefined = undefined
+  if (dobPrecisionSelected.value=="yearMonth") {
+    displayFormat = "MMM yyyy"
+  }
+  if (dobPrecisionSelected.value=="year") {
+    displayFormat = "yyyy"
+  }
+  if (dobPrecisionSelected.value=="estimated") {
+    displayFormat = "~ MMM yyyy"
+  }
+  return displayFormat
+})
+</script>
+
+<template>
+  <FormDate
+      v-model="modelValue"
+      :flow="props.flow"
+      :format="dobFormat"
+      :rules="computedRules"
+  >
+    <template #append="{ isReadonly, isDisabled, activatorProps, toggleMenuOpen}">
+      <span
+          style="cursor: pointer;"
+          class="font-weight-medium"
+          @click="(isReadonly.value || isDisabled.value) ? undefined : changeDobPrecision()"
+      >{{ dobPrecisionDisplay }}</span>
+      &nbsp;
+      <v-icon
+          :disabled="isReadonly.value || isDisabled.value"
+          v-bind="activatorProps"
+          @click="toggleMenuOpen('icon')"
+      >
+        fa:fa-regular fa-calendar
+      </v-icon>
+    </template>
+  </FormDate>
+</template>