@flyanra/vue-core 0.3.0 → 0.4.1

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

@@ -0,0 +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>

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

@@ -0,0 +1,97 @@
+import { type Ref, computed, ref, watch } from 'vue'
+
+import type { FormInstance } from 'element-plus'
+
+import { defaultsDeep } from 'lodash'
+
+import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
+import type { T_FormSchemaRendererConfig, T_InputRendererBase } from '../input-renderer.types'
+
+import {
+  generateInputFromFormSchema,
+  genericFormValidator,
+  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/form-schema.types.ts

@@ -0,0 +1,95 @@
+import type { T_DateInputTypes } from './date-time/FlyDateTime.types'
+import type { T_InputSelectOption } from './select/FlySelect.types'
+import type { T_ValueUnitValue } from './value-unit/FlyValueUnit.types'
+
+export type T_FormSchemaLookupData = Record<string, Array<unknown>>
+
+export type T_InputSchema =
+  | T_InputSchemaText
+  | T_InputSchemaNumber
+  | T_InputSchemaBoolean
+  | T_InputSchemaSelect
+  | T_InputSchemaValueUnit
+  | T_InputSchemaDateTime
+
+type T_FieldValidationBase = {
+  required?: boolean
+}
+
+type T_InputSchemaBase<ValidationRules = object> = {
+  unique_key: string
+  label: string
+  tooltip?: string
+  placeholder?: string
+  validation?: T_FieldValidationBase & ValidationRules
+}
+
+export type T_InputSchemaText = T_InputSchemaBase<{
+  minLength?: number
+  maxLength?: number
+}> & {
+  type: 'text'
+  default_value?: string
+  config?: {
+    maxLength?: number
+    minLength?: number
+    type?: string
+    rows?: number
+  }
+}
+
+export type T_InputSchemaNumber = T_InputSchemaBase<{
+  minLength?: number
+  maxLength?: number
+}> & {
+  type: 'number'
+  default_value?: number
+  config?: {
+    minLength?: number
+    maxLength?: number
+  }
+}
+
+export type T_InputSchemaBoolean = T_InputSchemaBase & {
+  type: 'boolean'
+  default_value?: boolean
+  config?: {
+    activeText?: string
+    inactiveText?: string
+  }
+}
+
+type T_SelectOptions =
+  | {
+      options_config_Lookup_id: string
+      options?: never
+    }
+  | {
+      options?: T_InputSelectOption[]
+      options_config_Lookup_id?: never
+    }
+type T_SelectBase<M extends boolean | undefined> = T_InputSchemaBase & {
+  type: 'select'
+  config: T_SelectOptions & {
+    multiple?: M
+  }
+  default_value?: M extends true ? (string | number)[] : string | number
+}
+
+export type T_InputSchemaSelect = T_SelectBase<true> | T_SelectBase<false | undefined>
+
+export type T_InputSchemaValueUnit = T_InputSchemaBase & {
+  type: 'valueUnit'
+  config: T_SelectOptions & {
+    valueType?: 'text' | 'number'
+  }
+  default_value?: T_ValueUnitValue
+}
+
+export type T_InputSchemaDateTime = T_InputSchemaBase & {
+  type: 'dateTime'
+  default_value?: string | [string | string]
+  config?: {
+    inputType: T_DateInputTypes
+  }
+}

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

@@ -0,0 +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>

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

@@ -0,0 +1,49 @@
+import type { Component } from 'vue'
+
+import type { FormItemRule } from 'element-plus'
+
+import type { T_InputBoolean, T_InputBooleanBase } from './boolean/FlyBoolean.types'
+import type { T_InputDateTime, T_InputDateTimeBase } from './date-time/FlyDateTime.types'
+import type { T_InputNumber, T_InputNumberBase } from './number/FlyNumber.types'
+import type { T_InputSelect, T_InputSelectBase } from './select/FlySelect.types'
+import type { T_InputText, T_InputTextBase } from './text/FlyText.types'
+import type { T_InputValueUnit, T_InputValueUnitBase } from './value-unit/FlyValueUnit.types'
+
+export type T_DynamicInputPropsBase = {
+  key: string
+  prop?: string // for form validation. falls back to key
+  label: string
+  tooltip?: string
+  columnSpan?: number
+  validations?: FormItemRule[]
+}
+
+export type T_InputRendererBase = T_DynamicInputPropsBase & T_SupportedInputTypeBase
+
+export type T_SupportedInputTypeBase =
+  | T_InputTextBase
+  | T_InputBooleanBase
+  | T_InputDateTimeBase
+  | T_InputNumberBase
+  | T_InputSelectBase
+  | T_InputValueUnitBase
+
+export type T_SupportedInputType =
+  | T_InputText
+  | T_InputNumber
+  | T_InputValueUnit
+  | T_InputSelect
+  | T_InputBoolean
+  | T_InputDateTime
+
+export type T_InputTypes = T_SupportedInputTypeBase['type']
+
+export type T_DynamicInputComponent = Component<{
+  modelValue?: unknown
+  input?: T_SupportedInputType
+}>
+
+export type T_FormSchemaRendererConfig = {
+  inputs: T_InputRendererBase[]
+  baseForm: { [K: string]: unknown }
+}

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

@@ -0,0 +1,18 @@
+import { isNil } from 'lodash'
+
+import type { T_InputTypes } from './input-renderer.types'
+
+export function getInputDisplayValue(v: unknown, inputType: T_InputTypes) {
+  switch (inputType) {
+    case 'number':
+      if (v === null || v === undefined) return ''
+      return String(v)
+
+    case 'text':
+    default:
+      if (isNil(v)) {
+        return ''
+      }
+      return typeof v === 'string' ? v : String(v)
+  }
+}

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

@@ -0,0 +1 @@
+@use 'element-plus/theme-chalk/src/input.scss';

package/src/components/form/input-renderers/number/FlyNumber.types.ts

@@ -0,0 +1,13 @@
+export type T_InputTextValues = string | number | undefined
+
+export type T_InputNumberBase = T_InputNumber & {
+  type: 'number'
+}
+
+export type T_InputNumber = {
+  placeholder?: string
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: { [K: string]: unknown }
+}

package/src/components/form/input-renderers/number/FlyNumber.utils.ts

@@ -0,0 +1,6 @@
+export function displayToNumber(v: unknown): number | undefined {
+  if (v === '' || v === undefined || v === undefined) return undefined
+
+  const n = Number(v)
+  return Number.isNaN(n) ? undefined : n
+}

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

@@ -0,0 +1,48 @@
+<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 } 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)
+  }
+})
+</script>

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

@@ -0,0 +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[]
+}

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="fly-regional-tenant-form-renderer">
+    <el-collapse v-if="sections?.length" v-model="activeNames" accordion>
+      <el-collapse-item :name="E_CollapsibleSections.mainForm">
+        <template #title>
+          <FlyCollapseTitleRenderer :title="mainFormTitle" />
+        </template>
+
+        <div style="padding: 1rem">
+          <slot></slot>
+        </div>
+      </el-collapse-item>
+
+      <template v-for="section in sections">
+        <el-collapse-item v-if="section.fields?.length" :key="section.key" :name="section.key">
+          <template #title>
+            <FlyCollapseTitleRenderer :title="section.title" />
+          </template>
+          <div style="padding: 1rem">
+            <div v-if="section.description" style="margin-bottom: 1.25rem">
+              <p style="font-size: 0.875; line-height: 1.25rem">
+                {{ t(section.description) }}
+              </p>
+            </div>
+
+            <FlyFormSchemaRenderer
+              :ref="(el) => setFormRef(el, section.key)"
+              v-model="section.modelValue"
+              :lookup-data="section.lookupData"
+              :form-config="section.fields"
+              :column-span="6"
+            />
+          </div>
+        </el-collapse-item>
+      </template>
+    </el-collapse>
+
+    <div v-else>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type ComponentPublicInstance, reactive, ref } from 'vue'
+
+import { ElCollapse, ElCollapseItem } from 'element-plus'
+
+import { UseLocaleInjector } from '../../../../composables/UseLocaleInjector'
+import '../../../../styles/element/overrides/collapse.scss'
+import FlyCollapseTitleRenderer from '../../../basic/typography/FlyCollapseTitleRenderer.vue'
+import type { T_FlyFormSchemaRendererInstance } from '../form-schema-renderer/FlyFormSchemaRenderer.types'
+import FlyFormSchemaRenderer from '../form-schema-renderer/FlyFormSchemaRenderer.vue'
+
+import type { T_TenantRegionalFormProps } from './FlyRegionalTenantFormRenderer.types'
+
+enum E_CollapsibleSections {
+  mainForm
+}
+
+defineProps<T_TenantRegionalFormProps>()
+
+const { t } = UseLocaleInjector()
+
+const activeNames = ref<string | number>(E_CollapsibleSections.mainForm)
+const formRefs = reactive<{ [K: string]: T_FlyFormSchemaRendererInstance }>({})
+
+function setFormRef(formRef: Element | ComponentPublicInstance | null, key: string) {
+  if (formRef) {
+    formRefs[key] = formRef as T_FlyFormSchemaRendererInstance
+  }
+}
+
+async function validateForms() {
+  const keys = Object.keys(formRefs)
+  for (let index = 0; index < keys.length; index++) {
+    const element = formRefs[keys[index]]
+    const hasErrors = await element?.validateForm()
+    if (!hasErrors) continue
+    return hasErrors
+  }
+
+  return
+}
+
+defineExpose({
+  validateForms
+})
+</script>
+
+<style lang="scss" scoped>
+@use '../../../../styles/element/mixins/collapse.scss' as el-collapse-mixin;
+
+.fly-regional-tenant-form-renderer {
+  :deep(.el-collapse) {
+    @include el-collapse-mixin.el-collapse-operation-style;
+  }
+}
+</style>

package/src/components/form/input-renderers/select/FlySelect.scss

@@ -0,0 +1,9 @@
+@use 'element-plus/theme-chalk/src/select.scss';
+@use 'element-plus/theme-chalk/src/option.scss';
+
+@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/tag.scss';
+
+@use 'element-plus/theme-chalk/src/popper.scss';
+@use 'element-plus/theme-chalk/src/scrollbar.scss';
+@use 'element-plus/theme-chalk/src/icon.scss';

package/src/components/form/input-renderers/select/FlySelect.types.ts

@@ -0,0 +1,25 @@
+export type T_InputSelectValue = string | number | (string | number)[] | undefined
+
+export type T_InputLabelValue = {
+  label: string
+  value: string | number
+}
+export type T_InputSelectOption = T_InputLabelValue | (number | string)
+export type T_InputSelectOptionList = T_InputSelectOption[] | Record<string, T_InputLabelValue>
+
+export type T_InputSelectBase = T_InputSelect & {
+  type: 'select'
+}
+
+export type T_InputSelect = {
+  placeholder?: string
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: {
+    multiple?: boolean
+  }
+  config?: {
+    options: T_InputSelectOptionList
+  }
+}

package/src/components/form/input-renderers/select/FlySelect.utils.ts

@@ -0,0 +1,37 @@
+import { isArray, isObject } from 'lodash'
+
+import type {
+  T_InputLabelValue,
+  T_InputSelectOption,
+  T_InputSelectOptionList
+} from './FlySelect.types'
+
+export function normalizeSelectOptionsToDict(
+  options: T_InputSelectOptionList
+): Record<string, T_InputLabelValue> {
+  // already a dict: Record<string, {label,value}>
+  if (!isArray(options)) {
+    const out: Record<string, T_InputLabelValue> = {}
+    Object.keys(options).forEach((k) => {
+      const item = options[k]
+      out[String(item.value)] = item
+    })
+    return out
+  }
+
+  // array: (string|number) OR {label,value}
+  const out: Record<string, T_InputLabelValue> = {}
+  options.forEach((opt: T_InputSelectOption) => {
+    if (isObject(opt)) {
+      const lv = opt as T_InputLabelValue
+      out[String(lv.value)] = lv
+    } else {
+      // primitive option => label=value
+      out[String(opt)] = {
+        label: String(opt),
+        value: opt
+      }
+    }
+  })
+  return out
+}