@ramathibodi/nuxt-commons 0.1.61 → 0.1.63

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.61",
+  "version": "0.1.63",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

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

@@ -12,11 +12,10 @@ import {
   watch,
   withDefaults
 } from 'vue'
-import {isObject} from 'lodash-es'
 import {watchDebounced} from '@vueuse/core'
 import {useRules} from '../../composables/utils/validation'
 import {useDocumentTemplate} from '../../composables/document/template'
-import { isArray, isString, isPlainObject, isEqual } from 'lodash-es'
+import { isObject, isArray, isString, isPlainObject, isEqual } from 'lodash-es'
 import FormPad from './Pad.vue'
 
 defineOptions({
@@ -85,7 +84,7 @@ const formInjected = ref()
 const formData = ref<any>({})
 
 function isBlankString(v: unknown): v is string {
-  return isString(v) && v.length === 0
+  return isString(v) && v.trim().length === 0
 }
 
 function sanitizeBlankStrings(val: any, original?: any): void {
@@ -101,6 +100,8 @@ function sanitizeBlankStrings(val: any, original?: any): void {
         val.splice(i, 1)
       } else if (isPlainObject(item) || isArray(item)) {
         sanitizeBlankStrings(item,{})
+      } else {
+        if (item && typeof item.trimEnd == "function") val[i] = item.trimEnd()
       }
     }
     return
@@ -111,9 +112,12 @@ function sanitizeBlankStrings(val: any, original?: any): void {
       const v = val[key]
       if (isBlankString(v)) {
         if (original && !Object.keys(original).includes(key)) delete val[key]
+        else val[key] = null
       } else if (isPlainObject(v) || isArray(v)) {
         let originalChild = (original && (isPlainObject(original[key]) || isArray(original[key]))) ? original[key] : {}
         sanitizeBlankStrings(v, originalChild)
+      } else {
+        if (v && typeof v.trimEnd == "function") val[key] = v.trimEnd()
       }
     }
   }
@@ -128,6 +132,37 @@ watch(() => props.modelValue, (newValue) => {
   formData.value = isObject(newValue) ? newValue : {}
 }, { deep: true, immediate: true })
 
+function diffPaths(
+    a: any,
+    b: any,
+    base: string[] = [],
+    out: string[] = []
+): string[] {
+  const keys = new Set<string>([
+    ...Object.keys(a ?? {}),
+    ...Object.keys(b ?? {}),
+  ])
+
+  for (const k of keys) {
+    const av = a?.[k]
+    const bv = b?.[k]
+    if (!av && !bv) continue // ignore when both are falsy
+
+    const path = [...base, k]
+
+    if (isPlainObject(av) && isPlainObject(bv)) {
+      diffPaths(av, bv, path, out)
+      continue
+    }
+
+    if (!isEqual(av, bv)) {
+      out.push(path.join('.'))
+    }
+  }
+
+  return out
+}
+
 const injectedClass = computed<Record<string, string>>(() => {
   const data = (formData.value ?? {}) as Record<string, any>
   const result: Record<string, string> = {}
@@ -135,13 +170,11 @@ const injectedClass = computed<Record<string, string>>(() => {
   if (!props.dirtyOnCreate && !props.originalData) return result
 
   const original = (props.originalData ?? {}) as Record<string, any>
+  const cls = props.dirtyClass || 'form-data-dirty'
+
+  const paths = diffPaths(data, original)
+  for (const p of paths) result[p] = cls
 
-  for (const key of Object.keys(data)) {
-    if (!isEqual(data[key], original[key])) {
-      if (!data[key] && !original[key]) continue
-      result[key] = props.dirtyClass || 'form-data-dirty'
-    }
-  }
   return result
 })
 
@@ -282,5 +315,5 @@ defineExpose({
   />
 </template>
 <style>
-.form-data-dirty,.form-data-dirty *{color:color-mix(in srgb,currentColor 70%,rgb(var(--v-theme-primary)))!important;text-shadow:0 0 .02em currentColor}
+.form-data-dirty,.form-data-dirty:not(.v-input--error) *{color:color-mix(in srgb,currentColor 70%,rgb(var(--v-theme-primary)))!important;text-shadow:0 0 .02em currentColor}
 </style>

package/dist/runtime/components/model/Pad.vue

@@ -10,10 +10,16 @@ defineOptions({
 })
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof EditPad['$props']> {
+  title?: string
+  saveCaption?: string
+  cancelCaption?: string
 }
 
 const props = withDefaults(defineProps<Props & GraphqlModelItemProps>(), {
   fields: () => ['*'],
+
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
 })
 
 const emit = defineEmits(['create', 'update'])
@@ -75,7 +81,7 @@ defineExpose({ operation, formPad: editPad.value?.formPad })
             :disabled="!slotData.operation?.isDataChange || !canSave"
             @click="slotData.operation?.save"
         >
-          {{ saveCaption }}
+          {{ props.saveCaption }}
         </VBtn>
         <VBtn
             color="error"
@@ -83,15 +89,13 @@ defineExpose({ operation, formPad: editPad.value?.formPad })
             :disabled="isLoading"
             @click="slotData.operation?.cancel"
         >
-          {{ cancelCaption }}
+          {{ props.cancelCaption }}
         </VBtn>
       </slot>
     </template>
     <template #default="slotData">
       <slot
           v-bind="slotData"
-          :is-creating="isCreating"
-          :is-data-change="isDataChange"
       />
     </template>
   </FormEditPad>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",