@ramathibodi/nuxt-commons 0.1.60 → 0.1.62

package/dist/module.json

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

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

@@ -103,6 +103,7 @@ defineExpose({setOriginalData,operation,formPad: formPadRef})
         <form-pad
             ref="formPadRef"
             v-model="formData"
+            :originalData="formDataOriginalValue"
             :readonly="readonly"
             isolated
             v-bind="$attrs"

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

@@ -125,6 +125,7 @@ watch(() => isShowing.value, (newValue) => {
         <form-pad
           ref="formPadRef"
           v-model="formData"
+          :originalData="formDataOriginalValue"
           :readonly="readonly"
           isolated
         >

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

@@ -104,6 +104,7 @@ defineExpose({operation,formPad:formPadRef})
       <form-pad
           ref="formPadRef"
           v-model="formData"
+          :originalData="formDataOriginalValue"
           :readonly="readonly"
           isolated
           v-bind="$attrs"

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 } from 'lodash-es'
+import { isObject, isArray, isString, isPlainObject, isEqual } from 'lodash-es'
 import FormPad from './Pad.vue'
 
 defineOptions({
@@ -25,6 +24,7 @@ defineOptions({
 
 interface Props {
   modelValue?: object
+  originalData?: object
   template?: any
   templateScript?: string
   disabled?: boolean
@@ -32,6 +32,8 @@ interface Props {
   isolated?: boolean
   decoration?: object
   parentTemplates?: string|string[]
+  dirtyClass?: string
+  dirtyOnCreate?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,6 +42,8 @@ const props = withDefaults(defineProps<Props>(), {
   isolated: false,
   decoration: () => { return {} },
   parentTemplates: (): string[] => [],
+  dirtyClass: "form-data-dirty",
+  dirtyOnCreate: false
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -80,39 +84,43 @@ 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): boolean {
-  let changed = false
+function sanitizeBlankStrings(val: any, original?: any): void {
+  if (!original && props.originalData) {
+    sanitizeBlankStrings(val, props.originalData)
+    return
+  }
 
   if (isArray(val)) {
     for (let i = val.length - 1; i >= 0; i--) {
       const item = val[i]
       if (isBlankString(item)) {
-        val.splice(i, 1) // remove array element
-        changed = true
+        val.splice(i, 1)
       } else if (isPlainObject(item) || isArray(item)) {
-        if (sanitizeBlankStrings(item)) changed = true
+        sanitizeBlankStrings(item,{})
+      } else {
+        if (item && typeof item.trimEnd == "function") val[i] = item.trimEnd()
       }
     }
-    return changed
+    return
   }
 
   if (isPlainObject(val)) {
     for (const key of Object.keys(val)) {
       const v = val[key]
       if (isBlankString(v)) {
-        delete val[key] // remove property directly
-        changed = true
+        if (original && !Object.keys(original).includes(key)) delete val[key]
+        else val[key] = null
       } else if (isPlainObject(v) || isArray(v)) {
-        if (sanitizeBlankStrings(v)) changed = true
+        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()
       }
     }
-    return changed
   }
-
-  return false
 }
 
 watch(formData, (newValue) => {
@@ -124,6 +132,52 @@ 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> = {}
+
+  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
+
+  return result
+})
+
 const formComponent = shallowRef()
 
 function buildFormComponent() {
@@ -131,12 +185,13 @@ function buildFormComponent() {
   const originalConsoleError = console.warn
   console.warn = (error: any) => { throw new Error(error) } // eslint-disable-line
   try {
-    const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :disabled="disabled" :readonly="readonly" :decoration="decoration" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided,decoration }">' + trimmedTemplate.value + '</template></form-pad>'
+    const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :originalData="originalData" :disabled="disabled" :readonly="readonly" :decoration="decoration" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided,decoration,injectedClass }">' + trimmedTemplate.value + '</template></form-pad>'
     compile(componentTemplate)
     formComponent.value = defineComponent({
       components: { FormPad },
       props: {
         modelValue: { type: Object, default: undefined },
+        originalData: { type: Object, default: undefined },
         disabled: { type: Boolean, default: false },
         readonly: { type: Boolean, default: false },
         decoration: { type: Object, default: () => { return {} } },
@@ -231,6 +286,7 @@ defineExpose({
         :is-readonly="readonly"
         :rules="rules"
         :decoration="decoration"
+        :injectedClass="injectedClass"
       />
     </template>
   </v-form>
@@ -242,6 +298,7 @@ defineExpose({
       :is-readonly="readonly"
       :rules="rules"
       :decoration="decoration"
+      :injectedClass="injectedClass"
     />
   </template>
   <component
@@ -249,6 +306,7 @@ defineExpose({
     v-if="trimmedTemplate"
     ref="formPad"
     v-model="formData"
+    :originalData="originalData"
     :disabled="disabled"
     :readonly="readonly"
     :decoration="decoration"
@@ -256,3 +314,6 @@ defineExpose({
     :class="$attrs.class"
   />
 </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}
+</style>

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

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { computed, useTemplateRef, defineExpose } from 'vue'
 import { type GraphqlModelItemProps, useGraphqlModelItem } from '../../composables/graphqlModelItem'
+import type {FormDialogCallback} from '../../types/formDialog'
 import EditPad from '../form/EditPad.vue'
+import {useDialog} from "../../composables/dialog";
 
 defineOptions({
   inheritAttrs: false,
@@ -12,8 +14,13 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof EditPad['$props']>
 
 const props = withDefaults(defineProps<Props & GraphqlModelItemProps>(), {
   fields: () => ['*'],
+
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
 })
 
+const emit = defineEmits(['create', 'update'])
+
 const { item,
   canCreate, canUpdate,
   createItem, updateItem,
@@ -27,11 +34,25 @@ const operation : any = computed(()=>{
   return Object.assign({},editPad.value?.operation,{canSave,reload,item})
 })
 
+const onCreateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  createItem(item,callback).then(()=>{
+    useDialog().notify({message: "Data created successfully",type: 'success',title:"Success"})
+    emit("create",item,callback)
+  })
+}
+
+const onUpdateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  updateItem(item,callback).then(()=>{
+    useDialog().notify({message: "Data updated successfully",type: 'success',title:"Success"})
+    emit("update",item,callback)
+  })
+}
+
 defineExpose({ operation, formPad: editPad.value?.formPad })
 </script>
 
 <template>
-  <FormEditPad v-bind="$attrs" :form-data="item" ref="editPadRef" @create="createItem" @update="updateItem">
+  <FormEditPad v-bind="$attrs" :form-data="item" ref="editPadRef" @create="onCreateItem" @update="onUpdateItem">
     <template #titleToolbar>
       <slot name="titleToolbar" :operation="operation">
         <VToolbarTitle>
@@ -57,7 +78,7 @@ defineExpose({ operation, formPad: editPad.value?.formPad })
             :disabled="!slotData.operation?.isDataChange || !canSave"
             @click="slotData.operation?.save"
         >
-          {{ saveCaption }}
+          {{ props.saveCaption }}
         </VBtn>
         <VBtn
             color="error"
@@ -65,15 +86,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/dist/runtime/components/model/Table.vue

@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   onlyOwnerEdit: false,
 })
 
-const emit = defineEmits(['open:dialog','close:dialog'])
+const emit = defineEmits(['open:dialog','close:dialog','create','update','delete'])
 const attrs = useAttrs()
 const plainAttrs = computed(() => {
   const returnAttrs = clone(attrs)
@@ -95,7 +95,25 @@ function openDialogReadonly(item?: object) {
 
 async function confirmDeleteItem(item: Record<string, any>, callback?: FormDialogCallback) {
   let confirm = await useDialog().confirm({message: "Do you want to delete record?"})
-  if (confirm) deleteItem(item,callback)
+  if (confirm) onDeleteItem(item,callback)
+}
+
+const onCreateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  createItem(item,callback).then(()=>{
+    emit("create",item,callback)
+  })
+}
+
+const onUpdateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  updateItem(item,callback).then(()=>{
+    emit("update",item,callback)
+  })
+}
+
+const onDeleteItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  deleteItem(item,callback).then(()=>{
+    emit("delete",item,callback)
+  })
 }
 
 const canEditRow = function (item: Record<string, any>) {
@@ -301,8 +319,8 @@ defineExpose({ reload,operation })
       :fullscreen="dialogFullscreen"
       :initial-data="computedInitialData"
       :form-data="currentItem"
-      @create="createItem"
-      @update="updateItem"
+      @create="onCreateItem"
+      @update="onUpdateItem"
       @afterLeave="emit('close:dialog')"
       :saveAndStay="saveAndStay"
       :readonly="isDialogReadonly"

package/dist/runtime/composables/document/template.js

@@ -89,7 +89,7 @@ export function templateItemToString(inputItem, parentTemplates, dataVariable =
 }
 function columnWrapTemplateItemString(item, parentTemplates, dataVariable = "data") {
   let templateString = templateItemToString(item, parentTemplates, dataVariable);
-  if (!["Separator", "FormHidden"].includes(item.inputType)) templateString = `<v-col${item.width ? ` cols="${item.width}"` : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}${item.customClass ? ` class="${item.customClass}"` : ""}${item.customStyle ? ` class="${item.customStyle}"` : ""}>${templateString}</v-col>`;
+  if (!["Separator", "FormHidden"].includes(item.inputType)) templateString = `<v-col${item.width ? ` cols="${item.width}"` : ""}${item.columnAttributes ? " " + item.columnAttributes : ""} :class="(injectedClass) ? injectedClass['${item.variableName || ""}'] : undefined"${item.customClass ? ` class="${item.customClass}"` : ""}${item.customStyle ? ` class="${item.customStyle}"` : ""}>${templateString}</v-col>`;
   if (["Header", "DocumentForm"].includes(item.inputType)) templateString = `</v-row><v-row dense${item.customClass ? ` class="${item.customClass}"` : ""}${item.customStyle ? ` class="${item.customStyle}"` : ""}>${templateString}</v-row><v-row dense>`;
   return templateString || "";
 }

package/dist/runtime/composables/utils/validation.d.ts

@@ -11,6 +11,11 @@ export declare function useRules(): {
     lengthGreater: (length: number, customError?: string) => (value: any) => string | true;
     lengthLess: (length: number, customError?: string) => (value: any) => string | true;
     telephone: (customError?: string) => (value: any) => string | true;
+    telephoneSingle: (customError?: string) => (value: any) => string | true;
+    internationalTelephone: (customError?: string) => (value: any) => string | true;
+    internationalTelephoneSingle: (customError?: string) => (value: any) => string | true;
+    mobilePhone: (customError?: string) => (value: any) => string | true;
+    mobilePhoneSingle: (customError?: string) => (value: any) => string | true;
     email: (customError?: string) => (value: any) => string | true;
     regex: (regex: RegExp | string, customError?: string) => (value: any) => string | true;
     idcard: (customError?: string) => (value: any) => string | true;
@@ -34,6 +39,11 @@ export declare function useRules(): {
         lengthGreater: (length: number, customError?: string) => (value: any) => string | true;
         lengthLess: (length: number, customError?: string) => (value: any) => string | true;
         telephone: (customError?: string) => (value: any) => string | true;
+        telephoneSingle: (customError?: string) => (value: any) => string | true;
+        internationalTelephone: (customError?: string) => (value: any) => string | true;
+        internationalTelephoneSingle: (customError?: string) => (value: any) => string | true;
+        mobilePhone: (customError?: string) => (value: any) => string | true;
+        mobilePhoneSingle: (customError?: string) => (value: any) => string | true;
         email: (customError?: string) => (value: any) => string | true;
         regex: (regex: RegExp | string, customError?: string) => (value: any) => string | true;
         idcard: (customError?: string) => (value: any) => string | true;
@@ -57,6 +67,11 @@ export declare function useRules(): {
         lengthGreater: (length: number, customError?: string) => (value: any) => string | true;
         lengthLess: (length: number, customError?: string) => (value: any) => string | true;
         telephone: (customError?: string) => (value: any) => string | true;
+        telephoneSingle: (customError?: string) => (value: any) => string | true;
+        internationalTelephone: (customError?: string) => (value: any) => string | true;
+        internationalTelephoneSingle: (customError?: string) => (value: any) => string | true;
+        mobilePhone: (customError?: string) => (value: any) => string | true;
+        mobilePhoneSingle: (customError?: string) => (value: any) => string | true;
         email: (customError?: string) => (value: any) => string | true;
         regex: (regex: RegExp | string, customError?: string) => (value: any) => string | true;
         idcard: (customError?: string) => (value: any) => string | true;
@@ -80,6 +95,11 @@ export declare function useRules(): {
         lengthGreater: (length: number, customError?: string) => (value: any) => string | true;
         lengthLess: (length: number, customError?: string) => (value: any) => string | true;
         telephone: (customError?: string) => (value: any) => string | true;
+        telephoneSingle: (customError?: string) => (value: any) => string | true;
+        internationalTelephone: (customError?: string) => (value: any) => string | true;
+        internationalTelephoneSingle: (customError?: string) => (value: any) => string | true;
+        mobilePhone: (customError?: string) => (value: any) => string | true;
+        mobilePhoneSingle: (customError?: string) => (value: any) => string | true;
         email: (customError?: string) => (value: any) => string | true;
         regex: (regex: RegExp | string, customError?: string) => (value: any) => string | true;
         idcard: (customError?: string) => (value: any) => string | true;

package/dist/runtime/composables/utils/validation.js

@@ -14,7 +14,12 @@ export function useRules() {
   const length = (length2, customError = `Length must be ${length2}`) => (value) => condition(!value || value.length == length2, customError);
   const lengthGreater = (length2, customError = `Length must be greater than ${length2}`) => (value) => condition(!value || value.length >= length2, customError);
   const lengthLess = (length2, customError = `Length must be less than ${length2}`) => (value) => condition(!value || value.length <= length2, customError);
-  const telephone = (customError = "Invalid telephone number") => (value) => condition(!value || /^(?:\s*(?:0[2-57]\d{7}|0[689]\d{8})(?:#\d{1,5})?\s*(?:\([^()]+\)\s*)?(?:,(?=.+))?)*$/.test(value), customError);
+  const telephone = (customError = "Invalid telephone number") => (value) => condition(!value || /^(?:\s*(?:\+66|0)\s?(?:[2-57](?:[\s-]?\d){7}|[689](?:[\s-]?\d){8})(?:#\d{1,5})?\s*(?:\([^()]+\)\s*)?(?:,(?=\s*\+?6?0)|,|$))*$/.test(value), customError);
+  const telephoneSingle = (customError = "Invalid telephone number") => (value) => condition(!value || /^\s*(?:\+66|0)\s?(?:[2-57](?:[\s-]?\d){7}|[689](?:[\s-]?\d){8})(?:#\d{1,5})?\s*(?:\([^()]+\)\s*)?$/.test(value), customError);
+  const internationalTelephone = (customError = "Invalid telephone number") => (value) => condition(!value || /^(?:\s*(?:\+?\d{1,3}[-\s]?)?(?:0?\d{1,4}[-\s]?)?\d{3,4}[-\s]?\d{3,4}(?:#\d{1,5})?\s*(?:\([^()]+\)\s*)?(?:,(?=\s*\+?\d)|,|$))*$/.test(value), customError);
+  const internationalTelephoneSingle = (customError = "Invalid telephone number") => (value) => condition(!value || /^\s*(?:\+?\d{1,3}[-\s]?)?(?:0?\d{1,4}[-\s]?)?\d{3,4}[-\s]?\d{3,4}(?:#\d{1,5})?\s*(?:\([^()]+\)\s*)?$/.test(value), customError);
+  const mobilePhone = (customError = "Invalid telephone number") => (value) => condition(!value || /^(?:\s*(?:\+66|0)\s?(?:6\d{8}|8\d{8}|9\d{8})\s*(?:,(?=\s*\+?6?0)|,|$))*$/.test(value), customError);
+  const mobilePhoneSingle = (customError = "Invalid telephone number") => (value) => condition(!value || /^\s*(?:\+66|0)\s?(?:6\d{8}|8\d{8}|9\d{8})\s*$/.test(value), customError);
   const email = (customError = "Invalid email address") => (value) => condition(!value || /^([\w\-.]+)@([\w\-.]+)\.([a-z]{2,5})$/i.test(value), customError);
   const regex = (regex2, customError = "Invalid format") => (value) => condition(!value || new RegExp(regex2).test(value), customError);
   const idcard = (customError = "Invalid ID Card format") => (value) => condition(!value || /^\d{13}$/.test(value) && (11 - [...value].slice(0, 12).reduce((sum, n, i) => sum + +n * (13 - i), 0) % 11) % 10 === +value[12], customError);
@@ -38,6 +43,11 @@ export function useRules() {
     lengthGreater,
     lengthLess,
     telephone,
+    telephoneSingle,
+    internationalTelephone,
+    internationalTelephoneSingle,
+    mobilePhone,
+    mobilePhoneSingle,
     email,
     regex,
     idcard,

package/package.json

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