@flyanra/vue-core 1.0.1 → 1.2.0

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

@@ -1,221 +1,221 @@
-import type { FormItemRule } from 'element-plus'
-
-import { checkInputRange } from '../../../../utils/validators'
-import {
-  checkInputRangeValidator,
-  requiredField,
-  requiredFieldArray,
-  requiredFieldNumber,
-  requiredFieldNumberSelect,
-  requiredFieldValueUnit
-} from '../../input-validators'
-import type {
-  T_FormSchemaLookupData,
-  T_InputSchema,
-  T_InputSchemaSelect,
-  T_InputSchemaValueUnit
-} from '../form-schema.types'
-import type { T_InputRendererBase } from '../input-renderer.types'
-import type { T_InputSelectOption } from '../select/FlySelect.types'
-
-export function getValidatorsFromInputFields(fields: T_InputRendererBase[]) {
-  const validators = fields.reduce(
-    (p, c) => {
-      if (c.validations) {
-        p[c.key] = c.validations
-      }
-      return p
-    },
-    {} as Record<string, FormItemRule[]>
-  )
-
-  return validators
-}
-
-export function generateInputFromFormSchema(
-  field: T_InputSchema,
-  lookupData?: T_FormSchemaLookupData
-) {
-  switch (field.type) {
-    case 'text': {
-      const selectInput: T_InputRendererBase = {
-        label: field.label,
-        type: field.type,
-        key: field.unique_key,
-        attrs: {
-          maxlength: field.config?.maxLength,
-          minlength: field.config?.minLength,
-          showWordLimit: true,
-          type: field.config?.type || field.type,
-          rows: field.config?.rows
-        },
-        placeholder: field.placeholder,
-        tooltip: field.tooltip,
-        validations: generateFormRule(field)
-      }
-
-      return selectInput
-    }
-    case 'select': {
-      const selectInput: T_InputRendererBase = {
-        label: field.label,
-        type: field.type,
-        key: field.unique_key,
-        attrs: {
-          multiple: field.config.multiple
-        },
-        placeholder: field.placeholder,
-        tooltip: field.tooltip,
-        validations: generateFormRule(field),
-        config: {
-          options: generateSelectOptionsFromSchema(field, lookupData)
-        }
-      }
-
-      return selectInput
-    }
-    case 'valueUnit': {
-      const selectInput: T_InputRendererBase = {
-        label: field.label,
-        type: field.type,
-        key: field.unique_key,
-        attrs: {},
-        placeholder: field.placeholder,
-        tooltip: field.tooltip,
-        validations: generateFormRule(field),
-        config: {
-          options: generateSelectOptionsFromSchema(field, lookupData)
-        }
-      }
-
-      return selectInput
-    }
-    case 'number': {
-      const selectInput: T_InputRendererBase = {
-        label: field.label,
-        type: field.type,
-        key: field.unique_key,
-        attrs: {},
-        placeholder: field.placeholder,
-        tooltip: field.tooltip,
-        validations: generateFormRule(field)
-      }
-
-      return selectInput
-    }
-    case 'boolean': {
-      const selectInput: T_InputRendererBase = {
-        label: field.label,
-        type: field.type,
-        key: field.unique_key,
-        attrs: {
-          activeText: field.config?.activeText,
-          inactiveText: field.config?.inactiveText
-        },
-        placeholder: field.placeholder,
-        tooltip: field.tooltip,
-        validations: generateFormRule(field)
-      }
-
-      return selectInput
-    }
-    case 'dateTime': {
-      const selectInput: T_InputRendererBase = {
-        label: field.label,
-        type: field.type,
-        key: field.unique_key,
-        placeholder: field.placeholder,
-        tooltip: field.tooltip,
-        validations: generateFormRule(field),
-        config: {
-          inputType: field.config?.inputType
-        }
-      }
-
-      return selectInput
-    }
-    default:
-      break
-  }
-}
-
-export function generateFormRule(field: T_InputSchema): FormItemRule[] {
-  const validations = field.validation
-  const rules: FormItemRule[] = []
-
-  if (validations?.required) {
-    switch (field.type) {
-      case 'text': {
-        rules.push(requiredField(field.label, 'blur', true))
-
-        if (field.validation?.minLength || field.validation?.maxLength) {
-          rules.push(
-            checkInputRangeValidator(
-              checkInputRange(
-                field.label,
-                {
-                  min: field.validation?.minLength,
-                  max: field.validation?.maxLength
-                },
-                undefined,
-                undefined
-              ),
-              'blur'
-            )
-          )
-        }
-
-        break
-      }
-
-      case 'dateTime': {
-        rules.push(requiredField(field.label, 'blur', true))
-        break
-      }
-
-      case 'number': {
-        rules.push(requiredFieldNumber(field.label, 'change'))
-        break
-      }
-
-      case 'select': {
-        if (field.config.multiple) {
-          rules.push(requiredFieldArray(field.label, 'change', true))
-        } else {
-          rules.push(requiredField(field.label, 'change', true))
-        }
-        break
-      }
-
-      case 'valueUnit': {
-        if (field.config.valueType === 'text') {
-          rules.push(
-            requiredFieldValueUnit(field.label, 'change', undefined, undefined, {
-              valueType: 'text'
-            })
-          )
-        } else {
-          rules.push(requiredFieldNumberSelect(field.label, 'change', true))
-        }
-      }
-    }
-  }
-
-  return rules
-}
-
-export function generateSelectOptionsFromSchema(
-  field: T_InputSchemaSelect | T_InputSchemaValueUnit,
-  lookupData?: T_FormSchemaLookupData
-): T_InputSelectOption[] {
-  const optionsArr = field.config?.options
-  if (optionsArr) return optionsArr
-
-  if (!lookupData) return []
-  const lookupId = field.config.options_config_Lookup_id
-  if (!lookupId) return []
-
-  const record = lookupData[lookupId]
-
-  return record ? (record as T_InputSelectOption[]) : []
-}
+import type { FormItemRule } from 'element-plus'
+
+import { checkInputRange } from '../../../../utils/validators'
+import {
+  checkInputRangeValidator,
+  requiredField,
+  requiredFieldArray,
+  requiredFieldNumber,
+  requiredFieldNumberSelect,
+  requiredFieldValueUnit
+} from '../../input-validators'
+import type {
+  T_FormSchemaLookupData,
+  T_InputSchema,
+  T_InputSchemaSelect,
+  T_InputSchemaValueUnit
+} from '../form-schema.types'
+import type { T_InputRendererBase } from '../input-renderer.types'
+import type { T_InputSelectOption } from '../select/FlySelect.types'
+
+export function getValidatorsFromInputFields(fields: T_InputRendererBase[]) {
+  const validators = fields.reduce(
+    (p, c) => {
+      if (c.validations) {
+        p[c.key] = c.validations
+      }
+      return p
+    },
+    {} as Record<string, FormItemRule[]>
+  )
+
+  return validators
+}
+
+export function generateInputFromFormSchema(
+  field: T_InputSchema,
+  lookupData?: T_FormSchemaLookupData
+) {
+  switch (field.type) {
+    case 'text': {
+      const selectInput: T_InputRendererBase = {
+        label: field.label,
+        type: field.type,
+        key: field.unique_key,
+        attrs: {
+          maxlength: field.config?.maxLength,
+          minlength: field.config?.minLength,
+          showWordLimit: true,
+          type: field.config?.type || field.type,
+          rows: field.config?.rows
+        },
+        placeholder: field.placeholder,
+        tooltip: field.tooltip,
+        validations: generateFormRule(field)
+      }
+
+      return selectInput
+    }
+    case 'select': {
+      const selectInput: T_InputRendererBase = {
+        label: field.label,
+        type: field.type,
+        key: field.unique_key,
+        attrs: {
+          multiple: field.config.multiple
+        },
+        placeholder: field.placeholder,
+        tooltip: field.tooltip,
+        validations: generateFormRule(field),
+        config: {
+          options: generateSelectOptionsFromSchema(field, lookupData)
+        }
+      }
+
+      return selectInput
+    }
+    case 'valueUnit': {
+      const selectInput: T_InputRendererBase = {
+        label: field.label,
+        type: field.type,
+        key: field.unique_key,
+        attrs: {},
+        placeholder: field.placeholder,
+        tooltip: field.tooltip,
+        validations: generateFormRule(field),
+        config: {
+          options: generateSelectOptionsFromSchema(field, lookupData)
+        }
+      }
+
+      return selectInput
+    }
+    case 'number': {
+      const selectInput: T_InputRendererBase = {
+        label: field.label,
+        type: field.type,
+        key: field.unique_key,
+        attrs: {},
+        placeholder: field.placeholder,
+        tooltip: field.tooltip,
+        validations: generateFormRule(field)
+      }
+
+      return selectInput
+    }
+    case 'boolean': {
+      const selectInput: T_InputRendererBase = {
+        label: field.label,
+        type: field.type,
+        key: field.unique_key,
+        attrs: {
+          activeText: field.config?.activeText,
+          inactiveText: field.config?.inactiveText
+        },
+        placeholder: field.placeholder,
+        tooltip: field.tooltip,
+        validations: generateFormRule(field)
+      }
+
+      return selectInput
+    }
+    case 'dateTime': {
+      const selectInput: T_InputRendererBase = {
+        label: field.label,
+        type: field.type,
+        key: field.unique_key,
+        placeholder: field.placeholder,
+        tooltip: field.tooltip,
+        validations: generateFormRule(field),
+        config: {
+          inputType: field.config?.inputType
+        }
+      }
+
+      return selectInput
+    }
+    default:
+      break
+  }
+}
+
+export function generateFormRule(field: T_InputSchema): FormItemRule[] {
+  const validations = field.validation
+  const rules: FormItemRule[] = []
+
+  if (validations?.required) {
+    switch (field.type) {
+      case 'text': {
+        rules.push(requiredField(field.label, 'blur', true))
+
+        if (field.validation?.minLength || field.validation?.maxLength) {
+          rules.push(
+            checkInputRangeValidator(
+              checkInputRange(
+                field.label,
+                {
+                  min: field.validation?.minLength,
+                  max: field.validation?.maxLength
+                },
+                undefined,
+                undefined
+              ),
+              'blur'
+            )
+          )
+        }
+
+        break
+      }
+
+      case 'dateTime': {
+        rules.push(requiredField(field.label, 'blur', true))
+        break
+      }
+
+      case 'number': {
+        rules.push(requiredFieldNumber(field.label, 'change'))
+        break
+      }
+
+      case 'select': {
+        if (field.config.multiple) {
+          rules.push(requiredFieldArray(field.label, 'change', true))
+        } else {
+          rules.push(requiredField(field.label, 'change', true))
+        }
+        break
+      }
+
+      case 'valueUnit': {
+        if (field.config.valueType === 'text') {
+          rules.push(
+            requiredFieldValueUnit(field.label, 'change', undefined, undefined, {
+              valueType: 'text'
+            })
+          )
+        } else {
+          rules.push(requiredFieldNumberSelect(field.label, 'change', true))
+        }
+      }
+    }
+  }
+
+  return rules
+}
+
+export function generateSelectOptionsFromSchema(
+  field: T_InputSchemaSelect | T_InputSchemaValueUnit,
+  lookupData?: T_FormSchemaLookupData
+): T_InputSelectOption[] {
+  const optionsArr = field.config?.options
+  if (optionsArr) return optionsArr
+
+  if (!lookupData) return []
+  const lookupId = field.config.options_config_Lookup_id
+  if (!lookupId) return []
+
+  const record = lookupData[lookupId]
+
+  return record ? (record as T_InputSelectOption[]) : []
+}

package/src/components/form/input-renderers/form-schema-renderer/FlyFormSchemaRenderer.vue

@@ -1,75 +1,75 @@
-<template>
-  <div class="fly-form-schema-renderer">
-    <el-form
-      ref="formRef"
-      :rules="dynamicValidators"
-      :model="formProxy"
-      label-position="top"
-      status-icon
-      :disabled="disabled"
-      @submit.prevent
-    >
-      <div class="fly-form-schema-renderer__form-holder">
-        <div
-          v-for="(input, i) in generatedForm?.inputs"
-          :key="i"
-          :style="{
-            gridColumn: `span ${getSpan(input)} / span ${getSpan(input)}`
-          }"
-        >
-          <FlyFormItemRenderer v-model="formProxy[input.key]" :input="input" />
-        </div>
-      </div>
-    </el-form>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import { ElForm, type FormInstance } from 'element-plus'
-
-import '../../../../styles/element/overrides/form.scss'
-import FlyFormItemRenderer from '../form-item-renderer/FlyFormItemRenderer.vue'
-import type { T_InputRendererBase } from '../input-renderer.types'
-
-import {
-  type T_FormSchemaRendererEmits,
-  type T_FormSchemaRendererProps,
-  UseFormSchemaRenderer
-} from './UseFormSchemaRenderer'
-
-const emit = defineEmits<T_FormSchemaRendererEmits>()
-
-const props = defineProps<
-  T_FormSchemaRendererProps & {
-    /**
-     * Column span within a 12 column grid
-     */
-    columnSpan?: number
-  }
->()
-
-const formRef = ref<FormInstance>()
-
-const dynamicConfigFormComp = UseFormSchemaRenderer({ formRef, props, emit })
-const { dynamicValidators, formProxy, generatedForm } = dynamicConfigFormComp
-
-function getSpan(input?: T_InputRendererBase) {
-  return input?.columnSpan || props.columnSpan || 4
-}
-
-defineExpose({
-  validateForm: dynamicConfigFormComp.validateForm
-})
-</script>
-
-<style lang="scss" scoped>
-.fly-form-schema-renderer {
-  &__form-holder {
-    display: grid;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    gap: 0.5rem;
-  }
-}
-</style>
+<template>
+  <div class="fly-form-schema-renderer">
+    <el-form
+      ref="formRef"
+      :rules="dynamicValidators"
+      :model="formProxy"
+      label-position="top"
+      status-icon
+      :disabled="disabled"
+      @submit.prevent
+    >
+      <div class="fly-form-schema-renderer__form-holder">
+        <div
+          v-for="(input, i) in generatedForm?.inputs"
+          :key="i"
+          :style="{
+            gridColumn: `span ${getSpan(input)} / span ${getSpan(input)}`
+          }"
+        >
+          <FlyFormItemRenderer v-model="formProxy[input.key]" :input="input" />
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { ElForm, type FormInstance } from 'element-plus'
+
+import '../../../../styles/element/overrides/form.scss'
+import FlyFormItemRenderer from '../form-item-renderer/FlyFormItemRenderer.vue'
+import type { T_InputRendererBase } from '../input-renderer.types'
+
+import {
+  type T_FormSchemaRendererEmits,
+  type T_FormSchemaRendererProps,
+  UseFormSchemaRenderer
+} from './UseFormSchemaRenderer'
+
+const emit = defineEmits<T_FormSchemaRendererEmits>()
+
+const props = defineProps<
+  T_FormSchemaRendererProps & {
+    /**
+     * Column span within a 12 column grid
+     */
+    columnSpan?: number
+  }
+>()
+
+const formRef = ref<FormInstance>()
+
+const dynamicConfigFormComp = UseFormSchemaRenderer({ formRef, props, emit })
+const { dynamicValidators, formProxy, generatedForm } = dynamicConfigFormComp
+
+function getSpan(input?: T_InputRendererBase) {
+  return input?.columnSpan || props.columnSpan || 4
+}
+
+defineExpose({
+  validateForm: dynamicConfigFormComp.validateForm
+})
+</script>
+
+<style lang="scss" scoped>
+.fly-form-schema-renderer {
+  &__form-holder {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 0.5rem;
+  }
+}
+</style>