@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,166 +1,178 @@
-<script lang="ts" setup>
-import {computed, defineModel, ref, watch, watchEffect} from 'vue'
-import {cloneDeep, isEqual} from 'lodash-es'
-import type {FormDialogCallback} from '../../types/formDialog'
-
-interface Props {
-  fullscreen?: boolean
-  title?: string
-  initialData?: object
-  formData?: object
-  saveCaption?: string
-  cancelCaption?: string
-  closeCaption?: string
-  saveAndStay?: boolean
-  readonly?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  saveCaption: 'บันทึก',
-  cancelCaption: 'ยกเลิก',
-  closeCaption: 'ปิด',
-  saveAndStay: false,
-  readonly: false,
-})
-
-const isShowing = defineModel<boolean>({ default: false })
-const isSaving = ref<boolean>(false)
-const isSavedAndStay = ref<boolean>(false)
-const formPadRef = ref()
-const formData = ref<object>({})
-const formDataOriginalValue = ref<object>()
-
-const emit = defineEmits(['create', 'update'])
-
-function save() {
-  if (formPadRef.value.isValid) {
-    isSaving.value = true
-    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value), (props.saveAndStay) ? stayCallback : callback)
-  }
-}
-
-function cancel() {
-  isShowing.value = false
-}
-
-const callback: FormDialogCallback = {
-  done: function () {
-    isSaving.value = false
-    isShowing.value = false
-  },
-  error: function () {
-    isSaving.value = false
-  },
-}
-
-const stayCallback: FormDialogCallback = {
-  done: function () {
-    isSaving.value = false
-    isSavedAndStay.value = true
-  },
-  error: function () {
-    isSaving.value = false
-  },
-  setData: function (item: object) {
-    formData.value = cloneDeep(item)
-    formDataOriginalValue.value = cloneDeep(item)
-  }
-}
-
-const isDataChange = computed(() => {
-  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formDataOriginalValue.value))
-})
-
-const isCreating = computed(() => {
-  return !props.formData && !isSavedAndStay.value
-})
-
-const createOriginalValue = computed(() => {
-  return Object.assign({}, props.initialData)
-})
-
-const loadFormData = () => {
-  if (props.formData) {
-    formData.value = cloneDeep(props.formData)
-    formDataOriginalValue.value = cloneDeep(props.formData)
-  }
-  else {
-    formData.value = Object.assign({}, cloneDeep(props.initialData))
-  }
-  isSavedAndStay.value = false
-}
-
-const operation = ref({ isDataChange, isCreating, isSaving, save, cancel })
-
-watchEffect(loadFormData)
-
-watch(() => isShowing.value, (newValue) => {
-  if (newValue) loadFormData()
-})
-</script>
-
-<template>
-  <v-dialog
-    v-model="isShowing"
-    :fullscreen="fullscreen"
-    persistent
-    scrollable
-  >
-    <VCard>
-      <VToolbar>
-        <VToolbarTitle>
-          <slot name="title" :operation="operation">
-            {{ (isCreating) ? "New" : "Edit" }} {{ title }}
-          </slot>
-        </VToolbarTitle>
-        <VSpacer />
-        <VToolbarItems>
-          <VBtn
-            icon="mdi mdi-close"
-            @click="cancel"
-          />
-        </VToolbarItems>
-      </VToolbar>
-      <VCardText>
-        <form-pad
-          ref="formPadRef"
-          v-model="formData"
-          :originalData="formDataOriginalValue"
-          :readonly="readonly"
-          isolated
-        >
-          <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"
-          >
-            {{ (!isDataChange) ? closeCaption : cancelCaption }}
-          </VBtn>
-        </slot>
-      </VCardActions>
-    </VCard>
-  </v-dialog>
-</template>
+<script lang="ts" setup>
+/**
+ * FormDialog 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, defineModel, ref, watch, watchEffect} from 'vue'
+import {cloneDeep, isEqual} from 'lodash-es'
+import type {FormDialogCallback} from '../../types/formDialog'
+
+interface Props {
+  fullscreen?: boolean // Opens the dialog in fullscreen mode.
+  title?: string // Title text displayed in the component header or dialog.
+  initialData?: object // Initial form/object values used when creating a new record.
+  formData?: object // Configuration option used by Dialog.
+  saveCaption?: string // Label text for the save/confirm action button.
+  cancelCaption?: string // Label text for the cancel action button.
+  closeCaption?: string // Label text for the close action button.
+  saveAndStay?: boolean // Keeps editing context open after save for consecutive updates.
+  readonly?: boolean // renders as read-only while keeping value visible
+}
+
+/**
+ * Public props accepted by FormDialog.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
+  closeCaption: 'ปิด',
+  saveAndStay: false,
+  readonly: false,
+})
+
+const isShowing = defineModel<boolean>({ default: false })
+const isSaving = ref<boolean>(false)
+const isSavedAndStay = ref<boolean>(false)
+const formPadRef = ref()
+const formData = ref<object>({})
+const formDataOriginalValue = ref<object>()
+
+/**
+ * Custom events emitted by FormDialog.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['create', 'update'])
+
+function save() {
+  if (formPadRef.value.isValid) {
+    isSaving.value = true
+    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value), (props.saveAndStay) ? stayCallback : callback)
+  }
+}
+
+function cancel() {
+  isShowing.value = false
+}
+
+const callback: FormDialogCallback = {
+  done: function () {
+    isSaving.value = false
+    isShowing.value = false
+  },
+  error: function () {
+    isSaving.value = false
+  },
+}
+
+const stayCallback: FormDialogCallback = {
+  done: function () {
+    isSaving.value = false
+    isSavedAndStay.value = true
+  },
+  error: function () {
+    isSaving.value = false
+  },
+  setData: function (item: object) {
+    formData.value = cloneDeep(item)
+    formDataOriginalValue.value = cloneDeep(item)
+  }
+}
+
+const isDataChange = computed(() => {
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formDataOriginalValue.value))
+})
+
+const isCreating = computed(() => {
+  return !props.formData && !isSavedAndStay.value
+})
+
+const createOriginalValue = computed(() => {
+  return Object.assign({}, props.initialData)
+})
+
+const loadFormData = () => {
+  if (props.formData) {
+    formData.value = cloneDeep(props.formData)
+    formDataOriginalValue.value = cloneDeep(props.formData)
+  }
+  else {
+    formData.value = Object.assign({}, cloneDeep(props.initialData))
+  }
+  isSavedAndStay.value = false
+}
+
+const operation = ref({ isDataChange, isCreating, isSaving, save, cancel })
+
+watchEffect(loadFormData)
+
+watch(() => isShowing.value, (newValue) => {
+  if (newValue) loadFormData()
+})
+</script>
+
+<template>
+  <v-dialog
+    v-model="isShowing"
+    :fullscreen="fullscreen"
+    persistent
+    scrollable
+  >
+    <VCard>
+      <VToolbar>
+        <VToolbarTitle>
+          <slot name="title" :operation="operation">
+            {{ (isCreating) ? "New" : "Edit" }} {{ title }}
+          </slot>
+        </VToolbarTitle>
+        <VSpacer />
+        <VToolbarItems>
+          <VBtn
+            icon="mdi mdi-close"
+            @click="cancel"
+          />
+        </VToolbarItems>
+      </VToolbar>
+      <VCardText>
+        <form-pad
+          ref="formPadRef"
+          v-model="formData"
+          :originalData="formDataOriginalValue"
+          :readonly="readonly"
+          isolated
+        >
+          <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"
+          >
+            {{ (!isDataChange) ? closeCaption : cancelCaption }}
+          </VBtn>
+        </slot>
+      </VCardActions>
+    </VCard>
+  </v-dialog>
+</template>

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

@@ -1,145 +1,157 @@
-<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
-  formData?: 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
-  },
-  error: function () {
-    isSaving.value = false
-  },
-  setData: function (item: object) {
-    formData.value = cloneDeep(item)
-    formDataOriginalValue.value = cloneDeep(item)
-  }
-}
-
-const isDataChange = computed(() => {
-  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formDataOriginalValue.value))
-})
-
-const isCreating = computed(() => {
-  return !props.formData
-})
-
-const createOriginalValue = computed(() => {
-  return Object.assign({}, props.initialData)
-})
-
-const loadFormData = () => {
-  if (props.formData) {
-    formData.value = cloneDeep(props.formData)
-    formDataOriginalValue.value = cloneDeep(props.formData)
-  }
-  else {
-    formData.value = Object.assign({}, cloneDeep(props.initialData))
-  }
-}
-
-const operation = ref({ isDataChange, isCreating, isSaving, save, cancel })
-
-watchEffect(loadFormData)
-
-defineExpose({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>
+/**
+ * FormEditPad 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.
+  formData?: object // Configuration option used by EditPad.
+  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 FormEditPad.
+ * 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 FormEditPad.
+ * 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
+  },
+  error: function () {
+    isSaving.value = false
+  },
+  setData: function (item: object) {
+    formData.value = cloneDeep(item)
+    formDataOriginalValue.value = cloneDeep(item)
+  }
+}
+
+const isDataChange = computed(() => {
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formDataOriginalValue.value))
+})
+
+const isCreating = computed(() => {
+  return !props.formData
+})
+
+const createOriginalValue = computed(() => {
+  return Object.assign({}, props.initialData)
+})
+
+const loadFormData = () => {
+  if (props.formData) {
+    formData.value = cloneDeep(props.formData)
+    formDataOriginalValue.value = cloneDeep(props.formData)
+  }
+  else {
+    formData.value = Object.assign({}, cloneDeep(props.initialData))
+  }
+}
+
+const operation = ref({ isDataChange, isCreating, isSaving, save, cancel })
+
+watchEffect(loadFormData)
+
+defineExpose({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>