@ramathibodi/nuxt-commons 0.1.14 → 0.1.16

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

@@ -1,217 +1,217 @@
-<script lang="ts" setup>
-/* eslint-disable @typescript-eslint/no-explicit-any,import/no-self-import */
-import {
-  compile,
-  computed,
-  defineComponent,
-  defineOptions,
-  inject,
-  onMounted,
-  ref,
-  shallowRef,
-  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 FormPad from './Pad.vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props {
-  modelValue?: object
-  template?: any
-  templateScript?: string
-  disabled?: boolean
-  readonly?: boolean
-  isolated?: boolean
-  decoration?: object
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  readonly: false,
-  isolated: false,
-  decoration: () => { return {} },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const disabled = ref(props.disabled)
-const readonly = ref(props.readonly)
-const decoration = ref(props.decoration)
-
-watch(() => props.disabled, (newValue) => {
-  disabled.value = newValue
-})
-
-watch(() => props.readonly, (newValue) => {
-  readonly.value = newValue
-})
-
-watch(() => props.decoration, (newValue) => {
-  decoration.value = newValue
-}, { deep: true })
-
-const { rules } = useRules()
-
-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', ...Object.keys(vueFunctions), templateScript)
-})
-
-const formPad = ref()
-const formInjectKey = Symbol.for('vuetify:form')
-const formInjected = ref()
-
-const formData = ref<any>({})
-
-watch(formData, (newValue) => {
-  emit('update:modelValue', newValue)
-}, { deep: true })
-
-watch(() => props.modelValue, (newValue) => {
-  formData.value = isObject(newValue) ? newValue : {}
-}, { deep: true, immediate: true })
-
-const formComponent = shallowRef()
-
-function buildFormComponent() {
-  if (!trimmedTemplate.value) return
-  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" :decoration="decoration" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided,decoration }">' + trimmedTemplate.value + '</template></form-pad>'
-    compile(componentTemplate)
-    formComponent.value = defineComponent({
-      components: { FormPad },
-      props: {
-        modelValue: { type: Object, default: undefined },
-        disabled: { type: Boolean, default: false },
-        readonly: { type: Boolean, default: false },
-        decoration: { type: Object, default: () => { return {} } },
-        isolated: { type: Boolean, default: false },
-      },
-      emits: ['update:modelValue'],
-      setup(props, ctx) {
-        const formComponentData = ref<any>({})
-        const formPadTemplate = ref<any>({})
-        watch(formComponentData, (newValue) => {
-          ctx.emit('update:modelValue', newValue)
-        }, { deep: true })
-        watch(() => props.modelValue, (newValue) => {
-          formComponentData.value = isObject(newValue) ? newValue : {}
-        }, { deep: true, immediate: true })
-        const isValid = computed(() => formPadTemplate.value.isValid)
-        return {
-          formComponentData,
-          formPadTemplate,
-          reset: () => formPadTemplate.value.reset(),
-          validate: () => formPadTemplate.value.validate(),
-          resetValidate: () => formPadTemplate.value.resetValidate(),
-          isValid,
-          ...templateScriptFunction.value(props, ctx, ...Object.values(vueFunctions)),
-        }
-      },
-      template: componentTemplate,
-    })
-  }
-  catch (e) {
-    formComponent.value = null
-    console.error(e)
-  }
-  console.warn = originalConsoleError
-}
-
-function reset() {
-  if (!formInjected.value) formPad.value.reset()
-  else formInjected.value.items.forEach((item: any) => item.reset())
-}
-
-function validate() {
-  if (!formInjected.value) formPad.value.validate()
-  else formInjected.value.items.forEach((item: any) => item.validate())
-}
-
-function resetValidate() {
-  if (!formInjected.value) formPad.value.resetValidate()
-  else formInjected.value.items.forEach((item: any) => item.resetValidate())
-}
-
-const isValid = computed(() => {
-  validate()
-  return formInjected.value ? formInjected.value.isValid || false : formPad.value.isValid || false
-})
-
-onMounted(() => {
-  if (!props.isolated) formInjected.value = inject(formInjectKey, false)
-  buildFormComponent()
-})
-
-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,
-  disabled,
-  readonly,
-  reset,
-  validate,
-  resetValidate,
-})
-</script>
-
-<template>
-  <v-form
-    v-if="!formInjected && !trimmedTemplate"
-    ref="formPad"
-    :disabled="disabled"
-    :readonly="readonly"
-    :class="$attrs.class"
-  >
-    <template #default="formProvided">
-      <slot
-        :data="formData"
-        :form-provided="formProvided"
-        :is-disabled="disabled"
-        :is-readonly="readonly"
-        :rules="rules"
-        :decoration="decoration"
-      />
-    </template>
-  </v-form>
-  <template v-if="formInjected && !trimmedTemplate">
-    <slot
-      :data="formData"
-      :form-provided="formInjected"
-      :is-disabled="disabled"
-      :is-readonly="readonly"
-      :rules="rules"
-      :decoration="decoration"
-    />
-  </template>
-  <component
-    :is="formComponent"
-    v-if="trimmedTemplate"
-    ref="formPad"
-    v-model="formData"
-    :disabled="disabled"
-    :readonly="readonly"
-    :decoration="decoration"
-    :isolated="isolated"
-    :class="$attrs.class"
-  />
-</template>
+<script lang="ts" setup>
+/* eslint-disable @typescript-eslint/no-explicit-any,import/no-self-import */
+import {
+  compile,
+  computed,
+  defineComponent,
+  defineOptions,
+  inject,
+  onMounted,
+  ref,
+  shallowRef,
+  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 FormPad from './Pad.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props {
+  modelValue?: object
+  template?: any
+  templateScript?: string
+  disabled?: boolean
+  readonly?: boolean
+  isolated?: boolean
+  decoration?: object
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  readonly: false,
+  isolated: false,
+  decoration: () => { return {} },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const disabled = ref(props.disabled)
+const readonly = ref(props.readonly)
+const decoration = ref(props.decoration)
+
+watch(() => props.disabled, (newValue) => {
+  disabled.value = newValue
+})
+
+watch(() => props.readonly, (newValue) => {
+  readonly.value = newValue
+})
+
+watch(() => props.decoration, (newValue) => {
+  decoration.value = newValue
+}, { deep: true })
+
+const { rules } = useRules()
+
+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', ...Object.keys(vueFunctions), templateScript)
+})
+
+const formPad = ref()
+const formInjectKey = Symbol.for('vuetify:form')
+const formInjected = ref()
+
+const formData = ref<any>({})
+
+watch(formData, (newValue) => {
+  emit('update:modelValue', newValue)
+}, { deep: true })
+
+watch(() => props.modelValue, (newValue) => {
+  formData.value = isObject(newValue) ? newValue : {}
+}, { deep: true, immediate: true })
+
+const formComponent = shallowRef()
+
+function buildFormComponent() {
+  if (!trimmedTemplate.value) return
+  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" :decoration="decoration" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided,decoration }">' + trimmedTemplate.value + '</template></form-pad>'
+    compile(componentTemplate)
+    formComponent.value = defineComponent({
+      components: { FormPad },
+      props: {
+        modelValue: { type: Object, default: undefined },
+        disabled: { type: Boolean, default: false },
+        readonly: { type: Boolean, default: false },
+        decoration: { type: Object, default: () => { return {} } },
+        isolated: { type: Boolean, default: false },
+      },
+      emits: ['update:modelValue'],
+      setup(props, ctx) {
+        const formComponentData = ref<any>({})
+        const formPadTemplate = ref<any>({})
+        watch(formComponentData, (newValue) => {
+          ctx.emit('update:modelValue', newValue)
+        }, { deep: true })
+        watch(() => props.modelValue, (newValue) => {
+          formComponentData.value = isObject(newValue) ? newValue : {}
+        }, { deep: true, immediate: true })
+        const isValid = computed(() => formPadTemplate.value.isValid)
+        return {
+          formComponentData,
+          formPadTemplate,
+          reset: () => formPadTemplate.value.reset(),
+          validate: () => formPadTemplate.value.validate(),
+          resetValidate: () => formPadTemplate.value.resetValidate(),
+          isValid,
+          ...templateScriptFunction.value(props, ctx, ...Object.values(vueFunctions)),
+        }
+      },
+      template: componentTemplate,
+    })
+  }
+  catch (e) {
+    formComponent.value = null
+    console.error(e)
+  }
+  console.warn = originalConsoleError
+}
+
+function reset() {
+  if (!formInjected.value) formPad.value.reset()
+  else formInjected.value.items.forEach((item: any) => item.reset())
+}
+
+function validate() {
+  if (!formInjected.value) formPad.value.validate()
+  else formInjected.value.items.forEach((item: any) => item.validate())
+}
+
+function resetValidate() {
+  if (!formInjected.value) formPad.value.resetValidate()
+  else formInjected.value.items.forEach((item: any) => item.resetValidate())
+}
+
+const isValid = computed(() => {
+  validate()
+  return formInjected.value ? formInjected.value.isValid || false : formPad.value.isValid || false
+})
+
+onMounted(() => {
+  if (!props.isolated) formInjected.value = inject(formInjectKey, false)
+  buildFormComponent()
+})
+
+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,
+  disabled,
+  readonly,
+  reset,
+  validate,
+  resetValidate,
+})
+</script>
+
+<template>
+  <v-form
+    v-if="!formInjected && !trimmedTemplate"
+    ref="formPad"
+    :disabled="disabled"
+    :readonly="readonly"
+    :class="$attrs.class"
+  >
+    <template #default="formProvided">
+      <slot
+        :data="formData"
+        :form-provided="formProvided"
+        :is-disabled="disabled"
+        :is-readonly="readonly"
+        :rules="rules"
+        :decoration="decoration"
+      />
+    </template>
+  </v-form>
+  <template v-if="formInjected && !trimmedTemplate">
+    <slot
+      :data="formData"
+      :form-provided="formInjected"
+      :is-disabled="disabled"
+      :is-readonly="readonly"
+      :rules="rules"
+      :decoration="decoration"
+    />
+  </template>
+  <component
+    :is="formComponent"
+    v-if="trimmedTemplate"
+    ref="formPad"
+    v-model="formData"
+    :disabled="disabled"
+    :readonly="readonly"
+    :decoration="decoration"
+    :isolated="isolated"
+    :class="$attrs.class"
+  />
+</template>