@ramathibodi/nuxt-commons 0.1.41 → 0.1.42

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.41",
+  "version": "0.1.42",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/runtime/components/document/TemplateBuilder.vue

@@ -3,6 +3,7 @@ import {computed, ref, watch} from 'vue'
 import * as prettier from 'prettier'
 import prettierPluginHtml from 'prettier/plugins/html'
 import {useDocumentTemplate, validationRulesRegex,optionStringToChoiceObject} from '../../composables/document/template'
+import {cloneDeep} from "lodash-es";
 
 interface Props {
   title?: string
@@ -13,10 +14,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits(['update:modelValue'])
-const modelValue = defineModel<string>()
+const modelValue = defineModel<string|Record<string, any>[]>()
 
+const advanceModeCode = ref<string>()
 const isAdvanceMode = computed(() => {
-  return modelValue.value && !isValidJsonArrayOfObjects(modelValue.value)
+  return modelValue.value && ((typeof modelValue.value === "string") && !isValidJsonArrayOfObjects(modelValue.value))
 })
 
 const templateItems = ref<Record<string, any>[]>([])
@@ -70,6 +72,11 @@ const formTableHeaders = ref([
     title: 'Width',
     key: 'width',
   },
+  {
+    title: 'Action',
+    key: 'action',
+    width: '120px',
+  },
 ])
 
 const choiceHeaders = ref([
@@ -81,6 +88,11 @@ const choiceHeaders = ref([
     title: 'Value',
     key: 'value',
   },
+  {
+    title: 'Action',
+    key: 'action',
+    width: '120px',
+  },
 ])
 
 
@@ -99,9 +111,15 @@ watch(templateItems, (newValue) => {
 }, { deep: true })
 
 watch(modelValue, (newValue) => {
-  if (isValidJsonArrayOfObjects(newValue)) templateItems.value = JSON.parse(newValue as string)
+  if (typeof newValue === "string" && isValidJsonArrayOfObjects(newValue)) templateItems.value = JSON.parse(newValue as string)
+  else if (typeof newValue === "string") advanceModeCode.value = newValue
+  else if (newValue) templateItems.value = cloneDeep(newValue)
 }, { deep: true, immediate: true })
 
+watch(advanceModeCode, (newValue)=>{
+  if (isAdvanceMode.value) modelValue.value = newValue
+})
+
 async function convertToAdvanceMode() {
   if (!isAdvanceMode.value) {
     modelValue.value = await prettier.format(useDocumentTemplate(templateItems.value).replaceAll('>', '>\n'), { parser: 'html', plugins: [prettierPluginHtml] })
@@ -197,7 +215,7 @@ const ruleOptions = (inputType: string) => (value: any) => {
               :rules="[rules.require()]"
               type="number"
             />
-            <form-hidden v-model="data.inputOptions" :item-value="data.inputType" :hook="()=>undefined"></form-hidden>
+            <form-hidden v-model="data.inputOptions" :item-value="data.inputType" :hook="(_result: any,model: any,newValue: any,oldValue: any)=>{return (newValue && oldValue) ? undefined : model}"></form-hidden>
           </v-col>
           <v-col cols="4" v-if="!notRequireLabel.includes(data.inputType)">
             <v-text-field
@@ -367,10 +385,22 @@ const ruleOptions = (inputType: string) => (value: any) => {
       <template v-if="props.item.inputAttributes">
         <b>Input Attributes :</b> {{ props.item.inputAttributes }}<br>
       </template>
+      <template v-if="props.item.columnAttributes">
+        <b>Column Attributes :</b> {{ props.item.columnAttributes }}<br>
+      </template>
+      <template v-if="props.item.conditionalDisplay">
+        <b>Conditional Display :</b> {{ props.item.conditionalDisplay }}<br>
+      </template>
+      <template v-if="props.item.computedValue">
+        <b>Computed Value :</b> {{ props.item.computedValue }}<br>
+      </template>
+      <template v-if="props.item.retrievedValue">
+        <b>Retrieved Value :</b> {{ props.item.retrievedValue }}<br>
+      </template>
     </template>
   </FormTable>
   <FormCodeEditor
       v-else
-      v-model="modelValue"
+      v-model="advanceModeCode"
   />
 </template>

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

@@ -11,10 +11,10 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
-watch(() => props.itemValue, (newValue) => {
+watch(() => props.itemValue, (newValue,oldValue) => {
   const resultValue = cloneDeep(newValue)
   if (props.hook) {
-    Promise.resolve(props.hook(resultValue, props.modelValue)).then((result) => {
+    Promise.resolve(props.hook(resultValue, props.modelValue,newValue,oldValue)).then((result) => {
       emit('update:modelValue', result)
     }).catch(e => void e)
   }

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

@@ -41,15 +41,16 @@ function templateItemToString(item, parentTemplates) {
     item.inputAttributes = `${item.inputAttributes?.trim() || ""} dense`.trim();
   }
   let templateString;
+  const validationRules = item.validationRules ? buildValidationRules(item.validationRules) || "" : "";
   switch (item.inputType) {
     case "CustomCode":
       templateString = item.inputCustomCode || "";
       break;
     case "VRadio":
+      templateString = `<v-radio-group v-model="data.${item.variableName || ""}"${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #label>${item.inputLabel}</template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      break;
     case "VRadioInline":
-      const inlineAttr = item.inputType === "VRadioInline" ? " inline" : "";
-      const validationRules = item.validationRules ? buildValidationRules(item.validationRules) || "" : "";
-      templateString = `<v-radio-group v-model="data.${item.variableName || ""}"${inlineAttr}${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #prepend>${item.inputLabel}</template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      templateString = `<v-radio-group v-model="data.${item.variableName || ""}" inline ${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #prepend><span class="opacity-60">${item.inputLabel}</span></template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
       break;
     case "Separator":
       templateString = "</v-row><v-row dense>";
@@ -65,7 +66,7 @@ function templateItemToString(item, parentTemplates) {
       break;
     case "DocumentForm":
       const parentTemplatesString = typeof parentTemplates === "string" ? parentTemplates : parentTemplates.join("|");
-      templateString = `<document-form v-model="data" templateCode="${item.inputOptions || ""}" parent-templates="${parentTemplatesString}"></document-form>`;
+      templateString = `<document-form :model-value="data" templateCode="${item.inputOptions || ""}" parent-templates="${parentTemplatesString}"></document-form>`;
       break;
     default:
       templateString = processDefaultTemplate(item, void 0, optionString);

package/package.json

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