@ramathibodi/nuxt-commons 0.0.10 → 0.1.0

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.0.10"
+  "version": "0.1.0"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addTypeTemplate } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addPlugin, addTypeTemplate } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -18,15 +18,20 @@ const module = defineNuxtModule({
       global: true
     });
     addImportsDir(resolver.resolve("runtime/composables/**"));
+    addPlugin({
+      src: resolver.resolve("runtime/plugins/permission")
+    });
+    addTypeTemplate({
+      src: resolver.resolve("runtime/types/modules.d.ts"),
+      filename: "types/modules.d.ts"
+    });
+    addTypeTemplate({
+      src: resolver.resolve("runtime/types/alert.d.ts"),
+      filename: "types/alert.d.ts"
+    });
     addTypeTemplate({
-      filename: "types/modules.d.ts",
-      getContents: () => `
-        declare module 'painterro';
-        declare module "@zxing/browser"
-        declare module "vue-signature-pad"
-        declare module "accounting"
-        declare module "pdf-vue3"
-      `
+      src: resolver.resolve("runtime/types/menu.d.ts"),
+      filename: "types/menu.d.ts"
     });
   }
 });

package/dist/runtime/components/ExportCSV.vue

@@ -42,13 +42,13 @@ function exportFile() {
     @click="exportFile"
   >
     <template
-      v-for="(_, slot, index) in ($slots as {})"
+      v-for="(_, name, index) in ($slots as {})"
       :key="index"
-      #[slot]="scope"
+      #[name]="slotData"
     >
       <slot
-        :name="slot"
-        v-bind="{ scope }"
+        :name="name"
+        v-bind="(slotData as object)"
       />
     </template>
   </VBtn>

package/dist/runtime/components/FileBtn.vue

@@ -25,9 +25,15 @@ const openFileInput = () => {
   fileInput.value?.click()
 }
 
+const reset = () => {
+  files.value = undefined
+}
+
 watch(files, () => {
   emit('update:modelValue', files.value)
 }, { deep: true })
+
+defineExpose({ reset })
 </script>
 
 <template>
@@ -36,13 +42,13 @@ watch(files, () => {
     @click="openFileInput"
   >
     <template
-      v-for="(_, slot, index) in ($slots as {})"
+      v-for="(_, name, index) in ($slots as {})"
       :key="index"
-      #[slot]="scope"
+      #[name]="slotData"
     >
       <slot
-        :name="slot"
-        v-bind="{ scope }"
+        :name="name"
+        v-bind="(slotData as object)"
       />
     </template>
   </v-btn>

package/dist/runtime/components/ImportCSV.vue

@@ -9,6 +9,7 @@ const emit = defineEmits<{
 }>()
 
 const loading = ref(false)
+const fileBtnRef = ref()
 
 function uploadedFile(files: File[] | File | undefined) {
   if (!files) {
@@ -34,6 +35,7 @@ function uploadedFile(files: File[] | File | undefined) {
     const workbook = XLSX.read(e.target?.result)
     emit('import', XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]))
     loading.value = false
+    fileBtnRef.value.reset()
   }
   loading.value = true
   reader.readAsArrayBuffer(files)
@@ -42,6 +44,7 @@ function uploadedFile(files: File[] | File | undefined) {
 
 <template>
   <FileBtn
+    ref="fileBtnRef"
     v-bind="$attrs"
     color="primary"
     :loading="loading"
@@ -51,13 +54,13 @@ function uploadedFile(files: File[] | File | undefined) {
     @update:model-value="uploadedFile"
   >
     <template
-      v-for="(_, slot, index) in ($slots as {})"
+      v-for="(_, name, index) in ($slots as {})"
       :key="index"
-      #[slot]="scope"
+      #[name]="slotData"
     >
       <slot
-        :name="slot"
-        v-bind="{ scope }"
+        :name="name"
+        v-bind="(slotData as object)"
       />
     </template>
   </FileBtn>

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

@@ -0,0 +1,217 @@
+<script lang="ts" setup>
+import {computed, ref, watch} from 'vue'
+import * as prettier from 'prettier'
+import prettierPluginHtml from 'prettier/plugins/html'
+import {useDocumentTemplate, validationRulesRegex} from '../../composables/document/template'
+
+interface Props {
+  modelValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isAdvanceMode = computed(() => {
+  return props.modelValue && !isValidJsonArrayOfObjects(props.modelValue)
+})
+
+const templateItems = ref<Record<string, any>>([])
+const templateAdvanceCode = ref<string | undefined>()
+
+const headers = ref([
+  { title: '',
+    key: 'operation',
+    width: '100px',
+  },
+  {
+    title: 'Input Type',
+    key: 'inputType',
+  },
+  {
+    title: 'Width',
+    key: 'width',
+  },
+  {
+    title: 'Input Label',
+    key: 'inputLabel',
+  },
+  {
+    title: 'Variable Name',
+    key: 'variableName',
+  },
+  {
+    title: 'Configuration',
+    key: 'configuration',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    width: '120px',
+  },
+])
+
+function isValidJsonArrayOfObjects(str: string | undefined) {
+  try {
+    const parsed = JSON.parse(str as string)
+    return Array.isArray(parsed) && parsed.every(item => typeof item === 'object' && item !== null && !Array.isArray(item))
+  }
+  catch (e) {
+    return false
+  }
+}
+
+watch(templateItems, (newValue) => {
+  if (!isAdvanceMode.value) emit('update:modelValue', JSON.stringify(newValue))
+}, { deep: true })
+
+watch(templateAdvanceCode, (newValue) => {
+  if (isAdvanceMode.value) emit('update:modelValue', newValue)
+})
+
+watch(() => props.modelValue, (newValue) => {
+  if (isValidJsonArrayOfObjects(newValue)) templateItems.value = JSON.parse(newValue as string)
+  else templateAdvanceCode.value = newValue
+}, { deep: true, immediate: true })
+
+async function convertToAdvanceMode() {
+  if (!isAdvanceMode.value) {
+    emit('update:modelValue', await prettier.format(useDocumentTemplate(templateItems.value).replaceAll('>', '>\n'), { parser: 'html', plugins: [prettierPluginHtml] }))
+  }
+}
+
+const inputTypeChoice = ref(['VTextField', 'VTextarea', 'VSelect','VAutocomplete','FormDate','FormTime','FormDateTime','VCombobox', 'VRadio', 'VRadioInline', 'VCheckbox','VSwitch', 'MasterAutocomplete', 'Header', 'Separator', 'CustomCode'])
+const requireOption = ref(['VSelect','VAutocomplete','VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete'])
+const notRequireVariable = ref(['Header', 'Separator', 'CustomCode'])
+const notRequireLabel = ref(['Separator', 'CustomCode'])
+
+const choiceOption = ref(['VSelect', 'VRadio', 'VRadioInline'])
+
+const ruleOptions = (inputType: string) => (value: any) => {
+  if (choiceOption.value.includes(inputType) && !(/^[^'",]+(,[^'",]+)*$/.test(value))) return 'Invalid options format'
+
+  return true
+}
+</script>
+
+<template>
+  <FormTable
+    v-if="!isAdvanceMode"
+    v-model="templateItems"
+    :headers="headers"
+    title="Document Template"
+  >
+    <template #toolbarItems>
+      <VBtn
+        color="primary"
+        variant="flat"
+        @click="convertToAdvanceMode()"
+      >
+        Convert To Advance
+      </VBtn>
+    </template>
+    <template #form="{ data, rules }">
+      <v-container fluid>
+        <v-row dense>
+          <v-col cols="3">
+            <v-combobox
+              v-model="data.inputType"
+              label="Input Type"
+              :items="inputTypeChoice"
+              :rules="[rules.require()]"
+            />
+          </v-col>
+          <v-col
+            v-if="data.inputType!='Separator'"
+            cols="1"
+          >
+            <v-text-field
+              v-model="data.width"
+              label="Width"
+              :rules="[rules.require()]"
+              type="number"
+            />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field
+              v-if="!notRequireLabel.includes(data.inputType)"
+              v-model="data.inputLabel"
+              label="Input Label"
+              :rules="[rules.require()]"
+            />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field
+              v-if="!notRequireVariable.includes(data.inputType)"
+              v-model="data.variableName"
+              label="Variable Name"
+              :rules="[rules.require()]"
+            />
+          </v-col>
+          <v-col
+            v-if="data.inputType!='CustomCode'"
+            cols="12"
+          >
+            <v-textarea
+              v-model="data.inputOptions"
+              label="Input Options"
+              auto-grow
+              :rules="[rules.requireIf(requireOption.includes(data.inputType)), ruleOptions(data.inputType)]"
+            />
+          </v-col>
+          <v-col v-if="data.inputType!='CustomCode'">
+            <v-text-field
+              v-model="data.validationRules"
+              label="Validation Rules"
+              :rules="[rules.regex(validationRulesRegex)]"
+            />
+          </v-col>
+          <v-col v-if="data.inputType!='CustomCode'">
+            <v-text-field
+              v-model="data.inputAttributes"
+              label="Input Attributes"
+            />
+          </v-col>
+          <v-col v-if="data.inputType!='Separator'">
+            <v-text-field
+                v-model="data.columnAttributes"
+                label="Column Attributes"
+            />
+          </v-col>
+          <v-col
+            v-if="data.inputType=='CustomCode'"
+            cols="12"
+          >
+            <v-textarea
+              v-model="data.inputCustomCode"
+              label="Custom Code"
+              auto-grow
+              :rules="[rules.require()]"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </template>
+    <template #item.configuration="props">
+      <template v-if="props.item.inputType=='CustomCode'">
+        <b>Custom Code :</b><br>
+        <span style="white-space: pre-line">{{ props.item.inputCustomCode }}</span>
+      </template>
+      <template v-if="props.item.validationRules">
+        <b>Validation Rules :</b> {{ props.item.validationRules }}<br>
+      </template>
+      <template v-if="props.item.inputOptions">
+        <b>Input Options :</b> {{ props.item.inputOptions }}<br>
+      </template>
+      <template v-if="props.item.inputAttributes">
+        <b>Input Attributes :</b> {{ props.item.inputAttributes }}<br>
+      </template>
+    </template>
+  </FormTable>
+  <v-textarea
+    v-else
+    v-model="templateAdvanceCode"
+  />
+</template>

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

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import { ref, defineModel, computed, watch, watchEffect } from 'vue'
+import { cloneDeep, isEqual } from 'lodash-es'
+
+export interface FormDialogCallback {
+  done: Function
+  error: Function
+}
+
+interface Props {
+  maxWidth?: number | string
+  fullscreen?: boolean
+  title?: string
+  initialData?: object
+  formData?: object
+  saveCaption?: string
+  cancelCaption?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
+})
+
+const isShowing = defineModel<boolean>({ default: false })
+const isSaving = ref<boolean>(false)
+const formPadRef = ref()
+const formData = ref<object>({})
+
+const emit = defineEmits(['create', 'update'])
+
+function save() {
+  if (formPadRef.value.isValid) {
+    isSaving.value = true
+    emit((isCreating.value) ? 'create' : 'update', formData.value, callback)
+  }
+}
+
+function cancel() {
+  isShowing.value = false
+}
+
+const callback: FormDialogCallback = {
+  done: function () {
+    isSaving.value = false
+    isShowing.value = false
+  },
+  error: function () {
+    isSaving.value = false
+  },
+}
+
+const isDataChange = computed(() => {
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, props.formData))
+})
+
+const isCreating = computed(() => {
+  return !props.formData
+})
+
+const createOriginalValue = computed(() => {
+  return Object.assign({}, props.initialData)
+})
+
+watchEffect(() => {
+  if (props.formData) {
+    formData.value = cloneDeep(props.formData)
+  }
+  else {
+    formData.value = Object.assign({}, props.initialData)
+  }
+})
+
+watch(() => isShowing.value, (newValue) => {
+  if (!newValue) formPadRef.value.reset()
+})
+</script>
+
+<template>
+  <v-dialog
+    v-model="isShowing"
+    :fullscreen="fullscreen"
+    :max-width="maxWidth"
+    persistent
+    scrollable
+  >
+    <VCard>
+      <VToolbar>
+        <VToolbarTitle>
+          <slot name="title">
+            {{ (isCreating) ? "New" : "Edit" }} {{ title }}
+          </slot>
+        </VToolbarTitle>
+        <VSpacer />
+        <VToolbarItems>
+          <VBtn
+            icon="mdi mdi-close"
+            @click="cancel"
+          />
+        </VToolbarItems>
+      </VToolbar>
+      <VCardText>
+        <form-pad
+          ref="formPadRef"
+          v-model="formData"
+        >
+          <template #default="slotData">
+            <slot
+              v-bind="slotData"
+              :is-creating="isCreating"
+              :is-data-change="isDataChange"
+            />
+          </template>
+        </form-pad>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          color="primary"
+          variant="flat"
+          :loading="isSaving"
+          :disabled="!isDataChange"
+          @click="save"
+        >
+          {{ saveCaption }}
+        </VBtn>
+        <VBtn
+          color="error"
+          variant="flat"
+          :disabled="isSaving"
+          @click="cancel"
+        >
+          {{ cancelCaption }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </v-dialog>
+</template>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
+interface Props {
+  itemValue?: any
+  hook?: Function
+  modelValue?: any
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+
+watch(() => props.itemValue, (newValue) => {
+  const resultValue = cloneDeep(newValue)
+  if (props.hook) {
+    Promise.resolve(props.hook(resultValue, props.modelValue)).then((result) => {
+      emit('update:modelValue', result)
+    }).catch(e => void e)
+  }
+  else {
+    emit('update:modelValue', resultValue)
+  }
+}, { deep: true, immediate: true })
+</script>
+
+<template>
+  <input
+    type="hidden"
+    v-bind="$attrs"
+  >
+</template>

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

@@ -1,11 +1,16 @@
 <script lang="ts" setup>
 /* eslint-disable @typescript-eslint/no-explicit-any,import/no-self-import */
-import { compile, defineComponent, inject, onMounted, ref, shallowRef, watch, computed, withDefaults } from 'vue'
+import { compile, defineComponent, inject, onMounted, ref, shallowRef, watch, computed, withDefaults, defineOptions } 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 FormPad from './Pad.vue'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 interface Props {
   modelValue?: object
   template?: any
@@ -34,13 +39,15 @@ watch(() => props.readonly, (newValue) => {
 
 const { rules } = useRules()
 
-const trimmedTemplate = computed(() => props.template?.trim() || '')
+const trimmedTemplate = ref<string>('')
+
+const vueFunctions = { ref, shallowRef, computed, watch, onMounted }
 
 const templateScriptFunction = computed(() => {
   let templateScript = props.templateScript?.trim() || 'return {}'
   const pattern = /^\s*[{[].*[}\]]\s*$/
   if (pattern.test(templateScript)) templateScript = 'return {}'
-  return Function('props', 'ctx', templateScript)
+  return Function('props', 'ctx', ...Object.keys(vueFunctions), templateScript)
 })
 
 const formPad = ref()
@@ -91,7 +98,7 @@ function buildFormComponent() {
           validate: () => formPadTemplate.value.validate(),
           resetValidate: () => formPadTemplate.value.resetValidate(),
           isValid,
-          ...templateScriptFunction.value(props, ctx),
+          ...templateScriptFunction.value(props, ctx, ...Object.values(vueFunctions)),
         }
       },
       template: componentTemplate,
@@ -129,8 +136,11 @@ onMounted(() => {
   buildFormComponent()
 })
 
-watchDebounced(() => props.template, buildFormComponent, { debounce: 1000, maxWait: 5000 })
-watchDebounced(() => props.templateScript, buildFormComponent, { debounce: 1000, maxWait: 5000 })
+watchDebounced(() => props.template, (newValue) => {
+  trimmedTemplate.value = useDocumentTemplate(newValue).trim() || ''
+  buildFormComponent()
+}, { debounce: 500, maxWait: 5000, deep: true, immediate: true })
+watchDebounced(() => props.templateScript, buildFormComponent, { debounce: 500, maxWait: 5000 })
 
 defineExpose({
   isValid,
@@ -148,6 +158,7 @@ defineExpose({
     ref="formPad"
     :disabled="disabled"
     :readonly="readonly"
+    :class="$attrs.class"
   >
     <template #default="formProvided">
       <slot
@@ -175,5 +186,6 @@ defineExpose({
     v-model="formData"
     :disabled="disabled"
     :readonly="readonly"
+    :class="$attrs.class"
   />
 </template>