@flyanra/vue-core 1.2.0 → 1.3.0

package/src/components/form/input-renderers/form-schema-renderer/UseFormSchemaRenderer.ts

@@ -1,97 +1,97 @@
-import { type Ref, computed, ref, watch } from 'vue'
-
-import type { FormInstance } from 'element-plus'
-
-import { defaultsDeep } from 'lodash-es'
-
-import { genericFormValidator } from '../../form.utils'
-import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
-import type { T_FormSchemaRendererConfig, T_InputRendererBase } from '../input-renderer.types'
-
-import {
-  generateInputFromFormSchema,
-  getValidatorsFromInputFields
-} from './FlyFormSchemaRenderer.utils'
-
-export type T_FormSchemaRendererProps = {
-  formConfig: T_InputSchema[]
-  lookupData?: T_FormSchemaLookupData
-  modelValue?: Record<string, unknown>
-  disabled?: boolean
-}
-
-export type T_FormSchemaRendererEmits = {
-  (e: 'update:modelValue', value: T_FormSchemaRendererProps['modelValue']): void
-}
-
-type ConfigFormCompArgs = {
-  formRef: Ref<FormInstance | undefined>
-  props: T_FormSchemaRendererProps
-  emit: T_FormSchemaRendererEmits
-}
-
-export function UseFormSchemaRenderer(args: ConfigFormCompArgs) {
-  const fallbackForm = {}
-
-  const formProxy = computed<Record<string, unknown>>({
-    get: () => args.props.modelValue || fallbackForm,
-    set: (val) => args.emit('update:modelValue', val)
-  })
-
-  const generatedForm = ref<T_FormSchemaRendererConfig>()
-  const dynamicFormGenerated = ref(false)
-
-  const dynamicValidators = computed(() => {
-    const validators =
-      generatedForm.value && getValidatorsFromInputFields(generatedForm.value.inputs)
-
-    return validators || {}
-  })
-
-  async function validateForm() {
-    return args.formRef.value && genericFormValidator(args.formRef.value)
-  }
-
-  function generateDynamicForm() {
-    try {
-      if (dynamicFormGenerated.value) return
-
-      const inputs: T_InputRendererBase[] = []
-      const baseForm: T_FormSchemaRendererConfig['baseForm'] = {}
-
-      args.props.formConfig.forEach((f) => {
-        const i = generateInputFromFormSchema(f, args.props.lookupData)
-        if (i) {
-          inputs.push(i)
-          baseForm[i.key] = f.default_value
-        }
-      })
-
-      dynamicFormGenerated.value = true
-
-      defaultsDeep(args.props.modelValue, baseForm)
-
-      generatedForm.value = { inputs, baseForm }
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
-  watch(
-    () => args.props.formConfig,
-    () => {
-      dynamicFormGenerated.value = false
-      generateDynamicForm()
-    },
-    {
-      immediate: true
-    }
-  )
-
-  return {
-    dynamicValidators,
-    formProxy,
-    generatedForm,
-    validateForm
-  }
-}
+import { type Ref, computed, ref, watch } from 'vue'
+
+import type { FormInstance } from 'element-plus'
+
+import { defaultsDeep } from 'lodash-es'
+
+import { genericFormValidator } from '../../form.utils'
+import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
+import type { T_FormSchemaRendererConfig, T_InputRendererBase } from '../input-renderer.types'
+
+import {
+  generateInputFromFormSchema,
+  getValidatorsFromInputFields
+} from './FlyFormSchemaRenderer.utils'
+
+export type T_FormSchemaRendererProps = {
+  formConfig: T_InputSchema[]
+  lookupData?: T_FormSchemaLookupData
+  modelValue?: Record<string, unknown>
+  disabled?: boolean
+}
+
+export type T_FormSchemaRendererEmits = {
+  (e: 'update:modelValue', value: T_FormSchemaRendererProps['modelValue']): void
+}
+
+type ConfigFormCompArgs = {
+  formRef: Ref<FormInstance | undefined>
+  props: T_FormSchemaRendererProps
+  emit: T_FormSchemaRendererEmits
+}
+
+export function UseFormSchemaRenderer(args: ConfigFormCompArgs) {
+  const fallbackForm = {}
+
+  const formProxy = computed<Record<string, unknown>>({
+    get: () => args.props.modelValue || fallbackForm,
+    set: (val) => args.emit('update:modelValue', val)
+  })
+
+  const generatedForm = ref<T_FormSchemaRendererConfig>()
+  const dynamicFormGenerated = ref(false)
+
+  const dynamicValidators = computed(() => {
+    const validators =
+      generatedForm.value && getValidatorsFromInputFields(generatedForm.value.inputs)
+
+    return validators || {}
+  })
+
+  async function validateForm() {
+    return args.formRef.value && genericFormValidator(args.formRef.value)
+  }
+
+  function generateDynamicForm() {
+    try {
+      if (dynamicFormGenerated.value) return
+
+      const inputs: T_InputRendererBase[] = []
+      const baseForm: T_FormSchemaRendererConfig['baseForm'] = {}
+
+      args.props.formConfig.forEach((f) => {
+        const i = generateInputFromFormSchema(f, args.props.lookupData)
+        if (i) {
+          inputs.push(i)
+          baseForm[i.key] = f.default_value
+        }
+      })
+
+      dynamicFormGenerated.value = true
+
+      defaultsDeep(args.props.modelValue, baseForm)
+
+      generatedForm.value = { inputs, baseForm }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  watch(
+    () => args.props.formConfig,
+    () => {
+      dynamicFormGenerated.value = false
+      generateDynamicForm()
+    },
+    {
+      immediate: true
+    }
+  )
+
+  return {
+    dynamicValidators,
+    formProxy,
+    generatedForm,
+    validateForm
+  }
+}

package/src/components/form/input-renderers/input-renderer/FlyInputRenderer.vue

@@ -1,49 +1,49 @@
-<template>
-  <div style="width: 100%">
-    <component
-      :is="map[input.type]"
-      :model-value="modelValue"
-      :input="input"
-      @change="(v: unknown) => emit('change', v)"
-      @update:model-value="(v: unknown) => emit('update:modelValue', v)"
-      @blur="emit('blur')"
-      @focus="emit('focus')"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import FlyBoolean from '../boolean/FlyBoolean.vue'
-import FlyDateTime from '../date-time/FlyDateTime.vue'
-import type {
-  T_DynamicInputComponent,
-  T_InputRendererBase,
-  T_InputTypes
-} from '../input-renderer.types'
-import FlyNumber from '../number/FlyNumber.vue'
-import FlySelect from '../select/FlySelect.vue'
-import FlyText from '../text/FlyText.vue'
-import FlyValueUnit from '../value-unit/FlyValueUnit.vue'
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: unknown): void
-  (e: 'change', v: unknown): void
-  (e: 'blur'): void
-  (e: 'focus'): void
-}>()
-
-defineProps<{
-  modelValue?: unknown
-  input: T_InputRendererBase
-}>()
-
-const map: Record<T_InputTypes, T_DynamicInputComponent> = {
-  text: FlyText,
-  textarea: FlyText,
-  number: FlyNumber,
-  valueUnit: FlyValueUnit,
-  select: FlySelect,
-  boolean: FlyBoolean,
-  dateTime: FlyDateTime
-}
-</script>
+<template>
+  <div style="width: 100%">
+    <component
+      :is="map[input.type]"
+      :model-value="modelValue"
+      :input="input"
+      @change="(v: unknown) => emit('change', v)"
+      @update:model-value="(v: unknown) => emit('update:modelValue', v)"
+      @blur="emit('blur')"
+      @focus="emit('focus')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FlyBoolean from '../boolean/FlyBoolean.vue'
+import FlyDateTime from '../date-time/FlyDateTime.vue'
+import type {
+  T_DynamicInputComponent,
+  T_InputRendererBase,
+  T_InputTypes
+} from '../input-renderer.types'
+import FlyNumber from '../number/FlyNumber.vue'
+import FlySelect from '../select/FlySelect.vue'
+import FlyText from '../text/FlyText.vue'
+import FlyValueUnit from '../value-unit/FlyValueUnit.vue'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: unknown): void
+  (e: 'change', v: unknown): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+defineProps<{
+  modelValue?: unknown
+  input: T_InputRendererBase
+}>()
+
+const map: Record<T_InputTypes, T_DynamicInputComponent> = {
+  text: FlyText,
+  textarea: FlyText,
+  number: FlyNumber,
+  valueUnit: FlyValueUnit,
+  select: FlySelect,
+  boolean: FlyBoolean,
+  dateTime: FlyDateTime
+}
+</script>

package/src/components/form/input-renderers/input-renderer/index.ts

@@ -1,4 +1,4 @@
-import FlyInputRenderer from './FlyInputRenderer.vue'
-
-export default FlyInputRenderer
-export { FlyInputRenderer }
+import FlyInputRenderer from './FlyInputRenderer.vue'
+
+export default FlyInputRenderer
+export { FlyInputRenderer }

package/src/components/form/input-renderers/input-renderer.utils.ts

@@ -1,18 +1,18 @@
-import { isNil } from 'lodash-es'
-
-import type { T_InputTypes } from './input-renderer.types'
-
-export function getInputDisplayValue(v: unknown, inputType: T_InputTypes) {
-  switch (inputType) {
-    case 'number':
-      if (isNil(v)) return ''
-      return Number(v)
-
-    case 'text':
-    default:
-      if (isNil(v)) {
-        return ''
-      }
-      return String(v)
-  }
-}
+import { isNil } from 'lodash-es'
+
+import type { T_InputTypes } from './input-renderer.types'
+
+export function getInputDisplayValue(v: unknown, inputType: T_InputTypes) {
+  switch (inputType) {
+    case 'number':
+      if (isNil(v)) return ''
+      return Number(v)
+
+    case 'text':
+    default:
+      if (isNil(v)) {
+        return ''
+      }
+      return String(v)
+  }
+}

package/src/components/form/input-renderers/number/FlyNumber.vue

@@ -1,64 +1,64 @@
-<template>
-  <el-input
-    v-model.number="inputProxy"
-    style="width: 100%"
-    type="number"
-    v-bind="input?.attrs"
-    :placeholder="input?.placeholder"
-    @change="(val) => emit('change', displayToNumber(val))"
-    @blur="() => emit('blur')"
-    @focus="() => emit('focus')"
-  >
-  </el-input>
-</template>
-
-<script setup lang="ts">
-import { computed, watch } from 'vue'
-
-import { ElInput } from 'element-plus'
-
-import { getInputDisplayValue } from '../input-renderer.utils'
-
-import './FlyNumber.scss'
-import type { T_InputNumber, T_InputTextValues } from './FlyNumber.types'
-import { displayToNumber } from './FlyNumber.utils'
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: T_InputTextValues): void
-  (e: 'change', v: T_InputTextValues): void
-  (e: 'blur'): void
-  (e: 'focus'): void
-}>()
-
-const props = defineProps<{
-  modelValue?: unknown
-  input?: T_InputNumber
-}>()
-
-const inputProxy = computed({
-  get: () => {
-    return getInputDisplayValue(props.modelValue, 'number')
-  },
-  set: (v) => {
-    const parsed = displayToNumber(v)
-
-    emit('update:modelValue', parsed)
-    emit('change', parsed)
-  }
-})
-
-watch(
-  () => props.modelValue,
-  () => {
-    const parsed = displayToNumber(props.modelValue)
-
-    if (parsed !== props.modelValue) {
-      emit('update:modelValue', parsed)
-      emit('change', parsed)
-    }
-  },
-  {
-    immediate: true
-  }
-)
-</script>
+<template>
+  <el-input
+    v-model.number="inputProxy"
+    style="width: 100%"
+    type="number"
+    v-bind="input?.attrs"
+    :placeholder="input?.placeholder"
+    @change="(val) => emit('change', displayToNumber(val))"
+    @blur="() => emit('blur')"
+    @focus="() => emit('focus')"
+  >
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+
+import { ElInput } from 'element-plus'
+
+import { getInputDisplayValue } from '../input-renderer.utils'
+
+import './FlyNumber.scss'
+import type { T_InputNumber, T_InputTextValues } from './FlyNumber.types'
+import { displayToNumber } from './FlyNumber.utils'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: T_InputTextValues): void
+  (e: 'change', v: T_InputTextValues): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: unknown
+  input?: T_InputNumber
+}>()
+
+const inputProxy = computed({
+  get: () => {
+    return getInputDisplayValue(props.modelValue, 'number')
+  },
+  set: (v) => {
+    const parsed = displayToNumber(v)
+
+    emit('update:modelValue', parsed)
+    emit('change', parsed)
+  }
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    const parsed = displayToNumber(props.modelValue)
+
+    if (parsed !== props.modelValue) {
+      emit('update:modelValue', parsed)
+      emit('change', parsed)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>

package/src/components/form/input-renderers/regional-tenant-form-renderer/FlyRegionalTenantFormRenderer.types.ts

@@ -1,15 +1,15 @@
-import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
-
-export type T_TenantRegionalFormSection = {
-  key: string
-  fields: T_InputSchema[]
-  title: string
-  description?: string
-  lookupData?: T_FormSchemaLookupData
-  modelValue?: Record<string, unknown>
-}
-
-export type T_TenantRegionalFormProps = {
-  mainFormTitle: string
-  sections?: T_TenantRegionalFormSection[]
-}
+import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
+
+export type T_TenantRegionalFormSection = {
+  key: string
+  fields: T_InputSchema[]
+  title: string
+  description?: string
+  lookupData?: T_FormSchemaLookupData
+  modelValue?: Record<string, unknown>
+}
+
+export type T_TenantRegionalFormProps = {
+  mainFormTitle: string
+  sections?: T_TenantRegionalFormSection[]
+}