@ramathibodi/nuxt-commons 0.1.6 → 0.1.7

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.6"
+  "version": "0.1.7"
 }

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

@@ -184,10 +184,9 @@ const ruleOptions = (inputType: string) => (value: any) => {
             v-if="data.inputType=='CustomCode'"
             cols="12"
           >
-            <v-textarea
+            <FormCodeEditor
               v-model="data.inputCustomCode"
               label="Custom Code"
-              auto-grow
               :rules="[rules.require()]"
             />
           </v-col>
@@ -210,7 +209,7 @@ const ruleOptions = (inputType: string) => (value: any) => {
       </template>
     </template>
   </FormTable>
-  <v-textarea
+  <FormCodeEditor
     v-else
     v-model="templateAdvanceCode"
   />

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Codemirror } from 'vue-codemirror'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { javascript } from '@codemirror/lang-javascript'
+import { html } from '@codemirror/lang-html'
+import { vue } from '@codemirror/lang-vue'
+
+interface Props {
+  height?: string | number
+  minHeight?: string | number
+  lang?: 'html' | 'javascript' | 'vue'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: '100%',
+  minHeight: '20em',
+  lang: 'vue',
+})
+
+const extensions = [oneDark]
+if (props.lang == 'vue') {
+  extensions.push(vue({ base: html({ autoCloseTags: true, matchClosingTags: true, selfClosingTags: true }) }))
+}
+else {
+  extensions.push(javascript({ typescript: true }))
+}
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <codemirror
+      v-model="model"
+      :extensions="extensions"
+      :style="{ height: height, minHeight: minHeight }"
+  />
+</template>

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

@@ -32,7 +32,7 @@ const emit = defineEmits(['create', 'update'])
 function save() {
   if (formPadRef.value.isValid) {
     isSaving.value = true
-    emit((isCreating.value) ? 'create' : 'update', formData.value, callback)
+    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value) , callback)
   }
 }
 
@@ -62,17 +62,19 @@ const createOriginalValue = computed(() => {
   return Object.assign({}, props.initialData)
 })
 
-watchEffect(() => {
+const loadFormData = () => {
   if (props.formData) {
     formData.value = cloneDeep(props.formData)
-  }
-  else {
+  } else {
     formData.value = Object.assign({}, props.initialData)
   }
-})
+}
+
+watchEffect(loadFormData)
 
 watch(() => isShowing.value, (newValue) => {
   if (!newValue) formPadRef.value.reset()
+  else loadFormData()
 })
 </script>
 
@@ -103,6 +105,7 @@ watch(() => isShowing.value, (newValue) => {
         <form-pad
           ref="formPadRef"
           v-model="formData"
+          isolated
         >
           <template #default="slotData">
             <slot

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

@@ -17,11 +17,13 @@ interface Props {
   templateScript?: string
   disabled?: boolean
   readonly?: boolean
+  isolated?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   readonly: false,
+  isolated: false,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -71,7 +73,7 @@ function buildFormComponent() {
   const originalConsoleError = console.warn
   console.warn = (error) => { throw new Error(error) } // eslint-disable-line
   try {
-    const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :disabled="disabled" :readonly="readonly"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided }">' + trimmedTemplate.value + '</template></form-pad>'
+    const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :disabled="disabled" :readonly="readonly" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided }">' + trimmedTemplate.value + '</template></form-pad>'
     compile(componentTemplate)
     formComponent.value = defineComponent({
       components: { FormPad },
@@ -79,6 +81,7 @@ function buildFormComponent() {
         modelValue: { type: Object, default: undefined },
         disabled: { type: Boolean, default: false },
         readonly: { type: Boolean, default: false },
+        isolated: { type: Boolean, default: false },
       },
       emits: ['update:modelValue'],
       setup(props, ctx) {
@@ -113,17 +116,17 @@ function buildFormComponent() {
 
 function reset() {
   if (!formInjected.value) formPad.value.reset()
-  else formInjected.value.reset()
+  else formInjected.value.items.forEach((item: any)=>item.reset())
 }
 
 function validate() {
   if (!formInjected.value) formPad.value.validate()
-  else formInjected.value.validate()
+  else formInjected.value.items.forEach((item: any)=>item.validate())
 }
 
 function resetValidate() {
   if (!formInjected.value) formPad.value.resetValidate()
-  else formInjected.value.resetValidate()
+  else formInjected.value.items.forEach((item: any)=>item.resetValidate())
 }
 
 const isValid = computed(() => {
@@ -132,7 +135,7 @@ const isValid = computed(() => {
 })
 
 onMounted(() => {
-  formInjected.value = inject(formInjectKey, false)
+  if (!props.isolated) formInjected.value = inject(formInjectKey, false)
   buildFormComponent()
 })
 
@@ -186,6 +189,7 @@ defineExpose({
     v-model="formData"
     :disabled="disabled"
     :readonly="readonly"
+    :isolated="isolated"
     :class="$attrs.class"
   />
 </template>

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

@@ -2,7 +2,7 @@
 import { VDataTable } from 'vuetify/components/VDataTable'
 import { ref, watch, nextTick, defineOptions,computed,useAttrs } from 'vue'
 import type { FormDialogCallback } from './Dialog.vue'
-import {omit} from 'lodash-es'
+import { omit } from 'lodash-es'
 defineOptions({
   inheritAttrs: false,
 })
@@ -64,7 +64,8 @@ watch(items, (newValue) => {
 }, { deep: true })
 
 function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
-  item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
+  if (items.value.length>0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
+  else item[props.modelKey] = 1
 
   items.value.push(item)
 

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

@@ -23,9 +23,8 @@ function templateItemToString(item) {
     if (item.inputType == "MasterAutocomplete") {
       optionString += 'groupKey="' + item.inputOptions + '" ';
     }
-    if (item.inputType == "VSelect") {
+    if (item.inputType == "VSelect" || item.inputType == "VAutocomplete" || item.inputType == "VCombobox") {
       const choice = optionStringToChoiceObject(item.inputOptions);
-      console.log(choice);
       optionString = `item-value="value" item-title="label" :items='` + JSON.stringify(choice).replaceAll("'", "'") + "' ";
     }
     if (item.inputType == "VRadio" || item.inputType == "VRadioInline") {
@@ -40,7 +39,7 @@ function templateItemToString(item) {
     item.inputAttributes = (item.inputAttributes?.trim() + " dense").trim();
   if (item.validationRules)
     validationRules = buildValidationRules(item.validationRules);
-  let templateString = "";
+  let templateString;
   switch (item.inputType) {
     case "CustomCode":
       templateString = `${item.inputCustomCode}`;

package/dist/runtime/types/modules.d.ts

@@ -3,5 +3,5 @@ declare module '@zxing/browser'
 declare module 'vue-signature-pad'
 declare module 'accounting'
 declare module 'pdf-vue3'
-declare module "prettier"
-declare module "prettier/plugins/html"
+declare module 'prettier'
+declare module 'prettier/plugins/html'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -39,6 +39,10 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-vue": "^0.1.3",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@fullcalendar/core": "^6.1.11",
     "@fullcalendar/daygrid": "^6.1.11",
@@ -65,6 +69,7 @@
     "print-js": "^1.6.0",
     "uid": "^2.0.2",
     "vue": "^3.4.25",
+    "vue-codemirror": "^6.1.1",
     "vue-signature-pad": "^3.0.2",
     "vuetify": "^3.6.8",
     "prettier": "3.3.2",