@ramathibodi/nuxt-commons 0.1.37 → 0.1.39

package/dist/runtime/components/master/Autocomplete.vue

@@ -1,113 +1,56 @@
 <script lang="ts" setup>
 import {VAutocomplete} from 'vuetify/components/VAutocomplete'
-import {concat, isEmpty, sortBy} from 'lodash-es'
-import {computed, ref, watch,watchEffect} from 'vue'
-import {watchDebounced} from '@vueuse/core'
-import {useFuzzy} from '../../composables/utils/fuzzy'
-import {useGraphQl} from '../../composables/graphql'
+import {concat} from 'lodash-es'
+import {computed} from 'vue'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
-  fuzzy?: boolean
+  sortBy?: 'itemCode' | 'itemValue'
+  showCode?: boolean
+
   groupKey: string
+  itemCodes?: string[]
   lang?: 'TH' | 'EN'
-  fields?: string[]
+  fields?: Array<string | object>
   noDataText?: string
   filterText?: string
   waitForFilter?: boolean
   waitForFilterText?: string
-  modelValue?: string
-  sortBy?: 'itemCode' | 'itemValue'
-  showCode?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  fuzzy: false,
-  noDataText: 'ไม่พบข้อมูล',
+  sortBy: 'itemValue',
+  showCode: false,
+
   lang: 'TH',
+  noDataText: 'ไม่พบข้อมูล',
   waitForFilter: false,
-  sortBy: 'itemValue',
-  showCode: false
 })
 
-const emit = defineEmits(['update:modelValue'])
-
-const masterItems = ref<Array<any>>([])
-const items = ref<Array<any>>([])
-const selectedItem = ref<any>()
-
-const searchData = ref<string>('')
-
-const isLoading = ref(false)
-const isErrorLoading = ref(false)
-
-function query(groupKey: string, filterText: string | undefined) {
+const computedModelName = computed(()=>{
   let operation = 'masterItemByGroupKey'
+  if (props.filterText) operation = 'masterItemByGroupKeyAndFilterText'
+  if (props.itemCodes && props.itemCodes.length>0) operation = 'masterItemByGroupKeyAndItemCodeIn'
+  if (props.waitForFilter && !props.filterText) operation = ""
+  return operation
+})
 
-  const variables: Record<string, any> = { groupKey: { value: groupKey, required: true } }
-  if (filterText) {
-    variables['filterText'] = { value: filterText }
-    operation = 'masterItemByGroupKeyAndFilterText'
+const computedModelBy = computed(()=>{
+  let modelBy : Record<string,any> = {groupKey: props.groupKey}
+  if (props.filterText) {
+    modelBy["filterText"] = props.filterText
   }
-
-  let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
-  if (props.fields) fields = concat(fields, props.fields)
-
-  isLoading.value = true
-
-  useGraphQl().queryPromise(operation, fields, variables).then((result: any) => {
-    masterItems.value = result
-    items.value = result
-    isErrorLoading.value = false
-  }).catch((_error) => {
-    isErrorLoading.value = true
-  }).finally(() => {
-    isLoading.value = false
-  })
-}
-
-watchEffect(()=>{
-  if (props.waitForFilter && !props.filterText) {
-    masterItems.value = []
-    items.value = []
-    selectedItem.value = undefined
-  } else {
-    query(props.groupKey, props.filterText)
+  if (props.itemCodes && props.itemCodes.length>0) {
+    modelBy["itemCodes"] = props.itemCodes
   }
+  return modelBy
 })
 
-watch(() => props.modelValue, (newValue) => {
-  selectedItem.value = newValue
-}, { immediate: true })
-
-watch(selectedItem, (newValue) => {
-  emit('update:modelValue', newValue)
+const computedFields = computed(()=>{
+  return concat(['itemCode', 'itemValue', 'itemValueAlternative'],props.fields)
 })
 
-async function fuzzySearch() {
-  if (props.fuzzy) {
-    if (isEmpty(searchData.value)) {
-      items.value = masterItems.value
-    }
-    else {
-      let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
-      if (props.fields) fields = concat(fields, props.fields)
-
-      const results: any = useFuzzy(searchData.value, masterItems.value, fields)
-      items.value = []
-      if (results.value.length) {
-        for (let i = 0; results.value.length > i; i++) {
-          if (results.value[i].item) items.value.push(results.value[i].item)
-        }
-      }
-    }
-  }
-}
-
-watchDebounced(searchData, fuzzySearch, { debounce: 1000, maxWait: 5000 })
-
 const itemTitleField = computed(() => {
-  if (props.lang == 'TH') return 'itemValue'
-  else return 'itemValueAlternative'
+  return (props.lang == 'TH') ? 'itemValue' : 'itemValueAlternative'
 })
 
 const computedNoDataText = computed(() => {
@@ -116,64 +59,34 @@ const computedNoDataText = computed(() => {
 })
 
 const computedSortBy = computed(()=>{
-  let sortByField = props.sortBy
-  if (sortByField == 'itemValue') {
+  if (props.sortBy == 'itemValue') {
     if (props.showCode) return ['itemCode']
     else return [itemTitleField.value,'itemValue','itemCode']
   } else {
-    return [sortByField]
-  }
-})
-
-const computedItems = computed(()=>{
-  if (props.fuzzy && !isEmpty(searchData.value)) {
-    return items.value
-  } else {
-    return sortBy(items.value, computedSortBy.value)
+    return [props.sortBy]
   }
 })
 </script>
 
 <template>
-  <v-autocomplete
-    v-model="selectedItem"
-    v-model:search="searchData"
-    v-bind="$attrs"
-    :items="computedItems"
-    :no-filter="props.fuzzy"
-    :item-title="itemTitleField"
-    item-value="itemCode"
-    :no-data-text="computedNoDataText"
-    :loading="isLoading"
+  <model-autocomplete
+      :model-name="computedModelName"
+      :model-by="computedModelBy"
+      :fields="computedFields"
+      :sort-by="computedSortBy"
+      :item-title="itemTitleField"
+      item-value="itemCode"
+      :no-data-text="computedNoDataText"
+      :show-code="props.showCode"
   >
-    <!-- @ts-ignore -->
     <template
-      v-for="(_, name, index) in ($slots as {})"
-      :key="index"
-      #[name]="slotData"
-    >
-      <slot
-        :name="name"
-        v-bind="((slotData || {}) as object)"
-        :operation="operation"
-      />
-    </template>
-    <template
-      v-if="!$slots.item"
-      #item="{ props, item }"
+        v-if="!$slots.item"
+        #item="{ props, item }"
     >
       <v-list-item
-        v-bind="props"
-        :title="(showCode ? item.raw.itemCode+'-' : '')+(item.title || item.raw.itemValue || item.raw.itemCode)"
+          v-bind="props"
+          :title="(showCode ? item.raw.itemCode+'-' : '')+(item.title || item.raw.itemValue || item.raw.itemCode)"
       />
     </template>
-    <template
-      v-if="isErrorLoading"
-      #append
-    >
-      <v-icon color="error">
-        mdi mdi-alert
-      </v-icon>
-    </template>
-  </v-autocomplete>
+  </model-autocomplete>
 </template>

package/dist/runtime/components/master/label.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { computedAsync } from '@vueuse/core'
-import { useGraphQl } from '../../composables/graphql'
-
 interface Props {
   groupKey?: string | null
   itemCode?: string | null
   locale?: string
+
   notFoundText?: string
   placeholder?: string
 }
@@ -14,24 +12,27 @@ const props = withDefaults(defineProps<Props>(), {
   locale: 'TH',
 })
 
-const masterItemValue = computedAsync<string>(async () => {
-  if (props.groupKey && props.itemCode) {
-    try {
-      const result = await useGraphQl().queryPromise<any>("masterItemByGroupKeyAndItemCode",['itemValue', 'itemValueAlternative'],{ groupKey: props.groupKey, itemCode: props.itemCode })
-
-      if (result) {
-        return props.locale === 'TH'
-          ? result.itemValue
-          : result.itemValueAlternative || result.itemValue
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  }
+const computedNotFoundText =  computed(()=>{
   return props.notFoundText || `${props.itemCode}`
-}, props.placeholder || `${props.groupKey}(${props.itemCode})`)
+})
+
+const computedPlaceholder = computed(()=>{
+  return props.placeholder || `${props.groupKey}(${props.itemCode})`
+})
+
+const computedItemTitle = computed(()=>{
+  return (props.locale == 'TH')
+      ? "itemValue"
+      :  (result : Record<string,any>) => result["itemValueAlternative"] || result["itemValue"]
+})
 </script>
 
 <template>
-  {{ masterItemValue }}
+  <model-label
+      model-name="masterItemByGroupKeyAndItemCode"
+      :model-by="{groupKey: props.groupKey, itemCode: props.itemCode}"
+      :item-title="computedItemTitle"
+      :not-found-text="computedNotFoundText"
+      :placeholder="computedPlaceholder"
+  ></model-label>
 </template>

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

@@ -8,7 +8,7 @@ import {useGraphQlOperation} from "../../composables/graphqlOperation";
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
   fuzzy?: boolean
-  sortBy?: string
+  sortBy?: string | string[]
   showCode?: boolean
 
   modelName: string
@@ -48,21 +48,28 @@ watchEffect(()=>{
     variables[props.serverSearchKey] = searchData.value
   }
 
-  isLoading.value = true
+  if (props.modelName) {
+    isLoading.value = true
 
-  useGraphQlOperation('Query',props.modelName,fields,variables,props.cache).then((result: any) => {
-    if (isArray(result)) {
-      modelItems.value = result
-      items.value = result
-      isErrorLoading.value = false
-    } else {
+    useGraphQlOperation('Query',props.modelName,fields,variables,props.cache).then((result: any) => {
+      if (isArray(result)) {
+        modelItems.value = result
+        items.value = result
+        isErrorLoading.value = false
+      } else {
+        isErrorLoading.value = true
+      }
+    }).catch((_error) => {
+      modelItems.value = []
+      items.value = []
       isErrorLoading.value = true
-    }
-  }).catch((_error) => {
-    isErrorLoading.value = true
-  }).finally(() => {
-    isLoading.value = false
-  })
+    }).finally(() => {
+      isLoading.value = false
+    })
+  } else {
+    modelItems.value = []
+    items.value = []
+  }
 })
 
 async function fuzzySearch() {
@@ -88,12 +95,12 @@ async function fuzzySearch() {
 watchDebounced(searchData, fuzzySearch, { debounce: 1000, maxWait: 5000 })
 
 const computedItems = computed(()=>{
-  let sortByField = props.sortBy || ((props.showCode) ? props.itemValue : props.itemTitle)
+  let sortByField = (!props.sortBy || typeof props.sortBy === "string") ?  [props.sortBy || ((props.showCode) ? props.itemValue : props.itemTitle)] : props.sortBy
 
   if (props.fuzzy && !isEmpty(searchData.value)) {
     return items.value
   } else {
-    return sortBy(items.value, [sortByField])
+    return sortBy(items.value, sortByField)
   }
 })
 </script>
@@ -117,7 +124,6 @@ const computedItems = computed(()=>{
       <slot
           :name="name"
           v-bind="((slotData || {}) as object)"
-          :operation="operation"
       />
     </template>
     <template

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

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { computedAsync } from '@vueuse/core'
 import { useGraphQlOperation } from '../../composables/graphqlOperation'
+import {concat} from "lodash-es";
 
 interface Props {
   modelName: string
   modelBy?: object
-  itemTitle: string
+  itemTitle: string | ((result:Record<string,any>)=>void)
   fields?: Array<string | object>
   cache?: boolean
 
@@ -19,14 +20,16 @@ const props = withDefaults(defineProps<Props>(), {
 
 const modelItemValue = computedAsync<string>(async () => {
   if (props.modelName && props.itemTitle) {
-    let fields: any[] = [props.itemTitle]
+    let fields: any[] = (typeof props.itemTitle === "string") ? [props.itemTitle] : []
+    if (props.fields) fields = concat(fields, props.fields)
+
     const variables: Record<string, any> = Object.assign({},props.modelBy)
+    const result : Record<string, any> = await useGraphQlOperation('Query',props.modelName,fields,variables,props.cache)
 
     try {
-      const result : Record<string, any> = await useGraphQlOperation('Query',props.modelName,fields,variables,props.cache)
-
       if (result) {
-        return result[props.itemTitle]
+        if (typeof props.itemTitle === "string") return result[props.itemTitle]
+        else return props.itemTitle(result)
       }
     } catch (e) {
       console.error(e)

package/dist/runtime/composables/document/template.d.ts

@@ -1,2 +1,24 @@
+export interface DocumentTemplateItem {
+    inputType: string;
+    width?: string | number;
+    inputLabel?: string;
+    variableName?: string;
+    validationRules?: string;
+    inputOptions?: string | object;
+    inputAttributes?: string;
+    inputCustomCode?: string;
+    columnAttributes?: string;
+    conditionalDisplay?: string;
+    computedValue?: string;
+    retrievedValue?: string;
+}
+export interface ChoiceItem {
+    label: string;
+    value: string;
+}
 export declare const validationRulesRegex: RegExp;
-export declare function useDocumentTemplate(items: string | object): string;
+export declare function useDocumentTemplate(items: string | object, parentTemplates?: string | string[]): string;
+export declare function optionStringToChoiceObject(option: string | object): ChoiceItem[];
+export declare function escapeObjectForInlineBinding(obj: object): string;
+export declare function buildValidationRules(validationString: string): string;
+export declare function processDefaultTemplate(item: DocumentTemplateItem, insideTemplate?: string, optionString?: string, validationRules?: string): string;

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

@@ -1,5 +1,7 @@
+import { processTemplateFormTable } from "./templateFormTable.js";
+import { processTemplateFormHidden } from "./templateFormHidden.js";
 export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?)(,(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?))*$/;
-export function useDocumentTemplate(items) {
+export function useDocumentTemplate(items, parentTemplates) {
   if (!items) return "";
   if (typeof items === "string") {
     try {
@@ -11,94 +13,108 @@ export function useDocumentTemplate(items) {
   if (!Array.isArray(items) || !items.every((item) => typeof item === "object" && item !== null)) {
     return "";
   }
-  let templateString = items.map((item) => templateItemToString(item)).join("");
-  templateString = `<v-container fluid><v-row dense>${templateString}</v-row></v-container>`;
-  return templateString;
+  const templateString = items.map((item) => templateItemToString(item, parentTemplates || [])).join("");
+  return !parentTemplates || parentTemplates.length == 0 ? `<v-container fluid><v-row dense>${templateString}</v-row></v-container>` : `<v-row dense>${templateString}</v-row>`;
 }
-function templateItemToString(item) {
+function templateItemToString(item, parentTemplates) {
   let optionString = "";
-  let validationRules = "";
   if (item.inputOptions) {
-    if (item.inputType == "MasterAutocomplete") {
-      optionString += 'groupKey="' + item.inputOptions + '" ';
+    if (item.inputType === "MasterAutocomplete") {
+      optionString += `groupKey="${item.inputOptions}" `;
     }
-    if (item.inputType == "VSelect" || item.inputType == "VAutocomplete" || item.inputType == "VCombobox") {
+    if (["VSelect", "VAutocomplete", "VCombobox"].includes(item.inputType)) {
       const choice = optionStringToChoiceObject(item.inputOptions);
-      optionString = `item-value="value" item-title="label" :items='` + JSON.stringify(choice).replaceAll("'", "&#39;") + "' ";
+      optionString = `item-value="value" item-title="label" :items='${escapeObjectForInlineBinding(choice)}' `;
     }
-    if (item.inputType == "VRadio" || item.inputType == "VRadioInline") {
+    if (["VRadio", "VRadioInline"].includes(item.inputType)) {
       const choice = optionStringToChoiceObject(item.inputOptions);
-      optionString = choice.map((choiceItem) => `<v-radio label="${choiceItem.label}" value="${choiceItem.value}" ${item.inputAttributes ? " " + item.inputAttributes : ""}></v-radio>`).join("");
+      optionString = choice.map((choiceItem) => `<v-radio label="${choiceItem.label || ""}" value="${choiceItem.value || ""}" ${item.inputAttributes ? " " + item.inputAttributes : ""}></v-radio>`).join("");
     }
-    if (item.inputType == "Header") {
-      optionString = item.inputOptions.split(",").join(" ");
+    if (item.inputType === "Header") {
+      if (typeof item.inputOptions === "string") optionString = item.inputOptions.split(",").join(" ");
     }
   }
-  if (item.inputType == "FormDateTime" && !item.inputAttributes?.includes("dense")) item.inputAttributes = (item.inputAttributes?.trim() + " dense").trim();
-  if (item.validationRules) validationRules = buildValidationRules(item.validationRules);
+  if (item.conditionalDisplay) {
+    item.inputAttributes = `${item.inputAttributes?.trim() || ""} v-if="${item.conditionalDisplay}"`.trim();
+  }
+  if (item.inputType === "FormDateTime" && !item.inputAttributes?.includes("dense")) {
+    item.inputAttributes = `${item.inputAttributes?.trim() || ""} dense`.trim();
+  }
   let templateString;
   switch (item.inputType) {
     case "CustomCode":
-      templateString = `${item.inputCustomCode}`;
+      templateString = item.inputCustomCode || "";
       break;
     case "VRadio":
-      templateString = `<v-radio-group v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${validationRules ? " " + validationRules.trim() : ""}>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
-      break;
     case "VRadioInline":
-      templateString = `<v-radio-group v-model="data.${item.variableName}" inline${validationRules ? " " + validationRules.trim() : ""}><template #prepend>${item.inputLabel || item.variableName}</template>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      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>`;
       break;
     case "Separator":
-      templateString = `</v-row><v-row dense>`;
+      templateString = "</v-row><v-row dense>";
       break;
     case "Header":
-      templateString = `<div class="${optionString ? optionString.trim() : "text-h4 font-weight-medium"}">${item.inputLabel || item.variableName}</div>`;
+      templateString = `<div class="${optionString || "text-h4 font-weight-medium"}">${item.inputLabel || item.variableName || ""}</div>`;
       break;
     case "FormTable":
-      templateString = `<form-table v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${validationRules ? " " + validationRules.trim() : ""} ${item.inputAttributes ? " " + item.inputAttributes : ""}>${optionString ? " " + optionString.trim() : ""}
-                            <template #form>${item.inputFormTable}</template>
-                        </form-table>`;
+      templateString = processTemplateFormTable(item, parentTemplates);
       break;
     case "FormHidden":
-      templateString = `${item.inputOptions} / ${item.inputFormHidden} <form-hidden v-model="data.${item.variableName}" :item-value="${item.inputOptions ? item.inputOptions : "data"}" :hook="() => {${item.inputFormHidden}}">
-                        </form-hidden>`;
+      templateString = processTemplateFormHidden(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>`;
       break;
     default:
-      templateString = `<${item.inputType} v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}></${item.inputType}>`;
+      templateString = processDefaultTemplate(item, void 0, optionString);
+  }
+  if (!["Separator"].includes(item.inputType)) templateString = `<v-col${item.width ? ` cols="${item.width}"` : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col>`;
+  if (["Header", "DocumentForm"].includes(item.inputType)) templateString = `</v-row><v-row dense>${templateString}</v-row><v-row dense>`;
+  if (item.computedValue && item.variableName) {
+    templateString = `${templateString || ""}<FormHidden v-model="data.${item.variableName}" :item-value="data" :hook="()=>${item.computedValue}"/>`.trim();
   }
-  if (!["Separator", "Header"].includes(item.inputType)) templateString = `<v-col${item.width ? ' cols="' + item.width + '"' : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col>`;
-  if (["Header"].includes(item.inputType)) templateString = `</v-row><v-row dense><v-col${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col></v-row><v-row dense>`;
-  return templateString;
+  return templateString || "";
 }
-function optionStringToChoiceObject(option) {
-  let returnObject = [];
-  if (/^[^'",]+(,[^'",]+)*$/.test(option.trim())) {
-    returnObject = option.split(",").map((item) => {
+export function optionStringToChoiceObject(option) {
+  if (typeof option === "string") {
+    if (!/^[^'",]+(,[^'",]+)*$/.test(option.trim())) return [];
+    return option.split(",").map((item) => {
       item = item.trim();
       if (item.includes("|")) {
         const [label, value] = item.split("|").map((str) => str.trim().replace(/^['"]|['"]$/g, ""));
-        return { label, value };
-      } else {
-        item = item.replace(/^['"]|['"]$/g, "");
-        return { label: item, value: item };
+        return { label: label || "", value: value || "" };
       }
+      item = item.replace(/^['"]|['"]$/g, "");
+      return { label: item, value: item };
     });
   }
-  return returnObject;
+  if (Array.isArray(option) && option.every((item) => typeof item === "object" && item !== null)) {
+    return option.sort((a, b) => (a.id ?? Infinity) - (b.id ?? Infinity)).map((item) => ({
+      label: item.label || item.value || "",
+      // Default to empty string if label is undefined
+      value: item.value || ""
+      // Default to empty string if value is undefined
+    }));
+  }
+  return [];
+}
+export function escapeObjectForInlineBinding(obj) {
+  return JSON.stringify(obj).replace(/'/g, "&#39;");
 }
-function buildValidationRules(validationString) {
-  validationString = validationString.trim();
-  if (validationString.startsWith("[")) validationString = validationString.substring(1);
-  if (validationString.endsWith("]")) validationString = validationString.substring(0, validationString.length - 1);
+export function buildValidationRules(validationString) {
+  validationString = validationString.replace(/^\[|]$/g, "").trim();
   if (!validationRulesRegex.test(validationString)) return "";
-  validationString = validationString.split(",").map((rule) => {
+  const rules = validationString.split(",").map((rule) => {
     rule = rule.trim();
-    if (!rule.startsWith("rules.")) {
-      rule = "rules." + rule;
-    }
-    if (!/\(.+\)$/.test(rule)) {
-      rule = rule + "()";
-    }
-    return rule.replaceAll('"', "'");
-  }).join(",");
-  return `:rules="[${validationString}]"`;
+    if (!rule.startsWith("rules.")) rule = `rules.${rule}`;
+    if (!/\(.+\)$/.test(rule)) rule += "()";
+    return rule.replace(/"/g, "'");
+  });
+  return `:rules="[${rules.join(",")}]"`;
+}
+export function processDefaultTemplate(item, insideTemplate, optionString, validationRules) {
+  if (!validationRules) validationRules = item.validationRules ? buildValidationRules(item.validationRules) || "" : "";
+  return `<${item.inputType} v-model="data.${item.variableName || ""}" label="${item.inputLabel || item.variableName || ""}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}>${insideTemplate || ""}</${item.inputType}>`;
 }

package/dist/runtime/composables/document/templateFormHidden.d.ts

@@ -0,0 +1,2 @@
+import { type DocumentTemplateItem } from './template.js';
+export declare function processTemplateFormHidden(item: DocumentTemplateItem, parentTemplates: string | string[]): string;

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

@@ -0,0 +1,10 @@
+export function processTemplateFormHidden(item, parentTemplates) {
+  let formHiddenOptions = Object.assign({ itemValue: "", hook: "" }, item.inputOptions);
+  if (formHiddenOptions.hook.trim()) {
+    formHiddenOptions.hook = formHiddenOptions.hook.replace(/\n/g, ";").trim();
+    if (!/^return\s/.test(formHiddenOptions.hook)) {
+      formHiddenOptions.hook = `return ${formHiddenOptions.hook}`;
+    }
+  }
+  return `<form-hidden v-model="data.${item.variableName || ""}" :item-value="${formHiddenOptions.itemValue || "data"}" :hook="(data,modelValue) => {${formHiddenOptions.hook}}"></form-hidden>`;
+}

package/dist/runtime/composables/document/templateFormTable.d.ts

@@ -0,0 +1,2 @@
+import { type DocumentTemplateItem } from './template.js';
+export declare function processTemplateFormTable(item: DocumentTemplateItem, parentTemplates: string | string[]): string;

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

@@ -0,0 +1,9 @@
+import {
+  escapeObjectForInlineBinding,
+  processDefaultTemplate,
+  useDocumentTemplate
+} from "./template.js";
+export function processTemplateFormTable(item, parentTemplates) {
+  let tableOptions = Object.assign({ title: item.inputLabel || "", formTemplate: "" }, item.inputOptions);
+  return processDefaultTemplate(item, `<template #form="{data,rules}">${useDocumentTemplate(tableOptions.formTemplate)}</template>`, `title="${tableOptions.title}" :headers='${escapeObjectForInlineBinding(tableOptions.headers || {})}'`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -115,5 +115,5 @@
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.29"
   },
-  "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
 }