@flyanra/vue-core 0.3.0 → 0.4.1

package/src/components/feedback/tooltip/FlyTooltip.types.ts

@@ -1,5 +1,5 @@
-import type { UseTooltipProps } from 'element-plus'
-
-export type T_FlyTooltipProps = {
-  tooltip?: UseTooltipProps
-}
+import type { UseTooltipProps } from 'element-plus'
+
+export type T_FlyTooltipProps = {
+  tooltip?: UseTooltipProps
+}

package/src/components/feedback/tooltip/FlyTooltip.vue

@@ -1,59 +1,60 @@
-<template>
-  <el-tooltip
-    v-bind="mergedElProps"
-    :popper-class="`fly-tooltip-popper ${popperClasses}`"
-    class="fly-tooltip"
-  >
-    <template v-if="$slots.default">
-      <slot></slot>
-    </template>
-
-    <template v-if="$slots.content" #content>
-      <slot name="content"></slot>
-    </template>
-  </el-tooltip>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-import { ElTooltip, type UseTooltipProps } from 'element-plus'
-
-import type { T_FlyTooltipProps } from './FlyTooltip.types'
-
-const props = defineProps<T_FlyTooltipProps>()
-
-const mergedElProps = computed<UseTooltipProps>(() => {
-  return {
-    enterable: false,
-    showAfter: 1000,
-    ...props.tooltip
-  }
-})
-
-const popperClasses = computed(() => {
-  const classes = []
-
-  if (!mergedElProps.value.enterable) {
-    classes.push('fly-tooltip-popper__no-enter')
-  }
-
-  return classes.join(' ')
-})
-</script>
-
-<style lang="scss">
-@use '../../../styles/mixins/shadows.scss' as shadow;
-
-.fly-tooltip-popper {
-  @include shadow.shadow-lg;
-  max-width: 400px;
-
-  &__no-enter {
-    .fly-tooltip {
-      pointer-events: none;
-      max-width: 400px;
-    }
-  }
-}
-</style>
+<template>
+  <el-tooltip
+    v-bind="mergedElProps"
+    :popper-class="`fly-tooltip-popper ${popperClasses}`"
+    class="fly-tooltip"
+  >
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+
+    <template v-if="$slots.content" #content>
+      <slot name="content"></slot>
+    </template>
+  </el-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { ElTooltip, type UseTooltipProps } from 'element-plus'
+
+import './FlyTooltip.element.scss'
+import type { T_FlyTooltipProps } from './FlyTooltip.types'
+
+const props = defineProps<T_FlyTooltipProps>()
+
+const mergedElProps = computed<UseTooltipProps>(() => {
+  return {
+    enterable: false,
+    showAfter: 1000,
+    ...props.tooltip
+  }
+})
+
+const popperClasses = computed(() => {
+  const classes = []
+
+  if (!mergedElProps.value.enterable) {
+    classes.push('fly-tooltip-popper__no-enter')
+  }
+
+  return classes.join(' ')
+})
+</script>
+
+<style lang="scss">
+@use '../../../styles/mixins/shadows.scss' as shadow;
+
+.fly-tooltip-popper {
+  @include shadow.shadow-lg;
+  max-width: 400px;
+
+  &__no-enter {
+    .fly-tooltip {
+      pointer-events: none;
+      max-width: 400px;
+    }
+  }
+}
+</style>

package/src/components/feedback/tooltip/index.ts

@@ -1,6 +1,6 @@
-import FlyTooltip from './FlyTooltip.vue'
-
-export default FlyTooltip
-export { FlyTooltip }
-
-export type { T_FlyTooltipProps } from './FlyTooltip.types'
+import FlyTooltip from './FlyTooltip.vue'
+
+export default FlyTooltip
+export { FlyTooltip }
+
+export type { T_FlyTooltipProps } from './FlyTooltip.types'

package/src/components/form/form.utils.ts

@@ -0,0 +1,57 @@
+import type { Composer } from 'vue-i18n'
+
+export type ValidateFieldsError = { [K: string]: { message?: string }[] }
+
+/**
+ * @returns Translated error message based on active locale
+ */
+export function formFieldErrorMessageFormatter(errors: ValidateFieldsError, composer?: Composer) {
+  const keys = Object.keys(errors)
+
+  const t = composer?.t
+
+  if (keys.length) {
+    const requiredFieldNames: (string | undefined)[] = []
+    const otherErrors: (string | undefined)[] = []
+    let formFieldErrorMessage = ''
+
+    keys.forEach((k) => {
+      const msg = errors[k][0].message
+      const index = msg?.indexOf(t ? t('validation.isRequired') : 'validation.isRequired')
+
+      if (index && index >= 0) {
+        requiredFieldNames.push(msg?.slice(0, index)?.trim())
+      } else {
+        otherErrors.push(msg)
+      }
+    })
+
+    const requiredFieldsLength = requiredFieldNames.length
+    const otherErrorsLength = otherErrors.length
+
+    if (requiredFieldsLength >= 1) {
+      const joinedList = new Intl.ListFormat(composer?.locale.value || 'en', {
+        style: 'long',
+        type: 'conjunction'
+      }).format(requiredFieldNames.filter((item): item is string => Boolean(item)))
+
+      formFieldErrorMessage = t
+        ? t('validation.requiredFields', {
+            field: joinedList,
+            count: requiredFieldNames.length
+          })
+        : joinedList
+    }
+
+    if (otherErrorsLength) {
+      if (formFieldErrorMessage) formFieldErrorMessage += ' || ' // temporary
+      otherErrors.forEach((e, i) => {
+        formFieldErrorMessage += e + `${i === otherErrorsLength - 1 ? '' : ' || '}` // temporary
+      })
+    }
+
+    return formFieldErrorMessage
+  }
+
+  return t ? t('validation.someInputsInvalid') : 'validation.someInputsInvalid'
+}

package/src/components/form/input-renderers/boolean/FlyBoolean.scss

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

package/src/components/form/input-renderers/boolean/FlyBoolean.types.ts

@@ -0,0 +1,16 @@
+export type T_InputBooleanValues = string | number | boolean | undefined
+
+export type T_InputBooleanBase = T_InputBoolean & {
+  type: 'boolean'
+  placeholder?: string
+}
+
+export type T_InputBoolean = {
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: {
+    activeText?: string
+    inactiveText?: string
+  }
+}

package/src/components/form/input-renderers/boolean/FlyBoolean.vue

@@ -0,0 +1,35 @@
+<template>
+  <el-switch
+    v-model="inputProxy"
+    v-bind="input?.attrs"
+    @change="(v) => emit('change', v)"
+  ></el-switch>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElSwitch } from 'element-plus'
+
+import './FlyBoolean.scss'
+import type { T_InputBoolean, T_InputBooleanValues } from './FlyBoolean.types'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: T_InputBooleanValues): void
+  (e: 'change', v: T_InputBooleanValues): void
+}>()
+
+const props = defineProps<{
+  modelValue?: T_InputBooleanValues
+  input?: T_InputBoolean
+}>()
+
+const inputProxy = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (v) => {
+    emit('update:modelValue', v)
+  }
+})
+</script>

package/src/components/form/input-renderers/date-time/FlyDateTime.scss

@@ -0,0 +1 @@
+@use '../../../../styles/element/overrides/date-time.scss';

package/src/components/form/input-renderers/date-time/FlyDateTime.types.ts

@@ -0,0 +1,21 @@
+export type T_DateTimeRawValue = Date | [Date, Date] | undefined
+export type T_DateTimeValues = string | string[] | undefined
+
+export type T_DateInputTypes = 'date' | 'dateTime' | 'dateRange' | 'dateTimeRange'
+
+export type T_InputDateTimeBase = T_InputDateTime & {
+  type: 'dateTime'
+}
+
+export type T_InputDateTime = {
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: { [K: string]: unknown }
+  config?: {
+    inputType?: T_DateInputTypes // defaults to dateTime
+  }
+}

package/src/components/form/input-renderers/date-time/FlyDateTime.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-date-picker
+    v-model="inputProxy"
+    style="width: 100%"
+    :type="inputTypeMap[input?.config?.inputType || 'dateTime']"
+    :popper-options="{
+      modifiers: [
+        {
+          name: 'preventOverflow',
+          options: {
+            padding: 8
+          }
+        }
+      ]
+    }"
+    :placeholder="input?.placeholder"
+    :start-placeholder="input?.startPlaceholder"
+    :end-placeholder="input?.endPlaceholder"
+    @change="(val: T_DateTimeRawValue) => emit('change', parseValueForEmit(val))"
+    @blur="() => emit('blur')"
+    @focus="() => emit('focus')"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { type DatePickerProps, ElDatePicker } from 'element-plus'
+
+import './FlyDateTime.scss'
+import type { T_DateTimeRawValue, T_DateTimeValues, T_InputDateTime } from './FlyDateTime.types'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: T_DateTimeValues): void
+  (e: 'change', v: T_DateTimeValues): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: T_DateTimeValues
+  input?: T_InputDateTime
+}>()
+
+const inputTypeMap: Record<string, DatePickerProps['type']> = {
+  date: 'date',
+  dateTime: 'datetime',
+  dateRange: 'daterange',
+  dateTimeRange: 'datetimerange'
+}
+
+const isRange = computed(
+  () =>
+    props.input?.config?.inputType === 'dateRange' ||
+    props.input?.config?.inputType === 'dateTimeRange'
+)
+
+const inputProxy = computed({
+  get: (): T_DateTimeRawValue => {
+    if (!props.modelValue) return undefined
+
+    if (isRange.value && Array.isArray(props.modelValue)) {
+      const d = props.modelValue.map((d) => new Date(d))
+      return [d[0], d[1]]
+    }
+
+    return new Date(props.modelValue as string)
+  },
+  set: (v) => {
+    emit('update:modelValue', parseValueForEmit(v))
+  }
+})
+
+function parseValueForEmit(v: T_DateTimeRawValue) {
+  if (!v) {
+    return undefined
+  }
+
+  if (isRange.value && Array.isArray(v)) {
+    return v.map((d: Date) => d.toISOString())
+  }
+
+  return (v as Date).toISOString()
+}
+</script>

package/src/components/form/input-renderers/form-item-renderer/FlyFormItemRenderer.scss

@@ -0,0 +1,4 @@
+@use 'element-plus/theme-chalk/src/form.scss';
+@use 'element-plus/theme-chalk/src/form-item.scss';
+
+@use 'element-plus/theme-chalk/src/icon.scss';

package/src/components/form/input-renderers/form-item-renderer/FlyFormItemRenderer.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-form-item :prop="input.prop || input.key">
+    <template #label>
+      <FlyInfoTooltip v-if="input.tooltip" :content="input.tooltip" />
+      {{ t(input.label) }}
+    </template>
+
+    <FlyInputRenderer
+      v-model="modelProxy"
+      :input="input"
+      @change="(val: unknown) => emit('change', val)"
+      @blur="() => emit('blur')"
+      @focus="() => emit('focus')"
+    />
+  </el-form-item>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElFormItem } from 'element-plus'
+
+import { UseLocaleInjector } from '../../../../composables/UseLocaleInjector'
+import FlyInfoTooltip from '../../../feedback/tooltip/FlyInfoTooltip.vue'
+import type { T_InputRendererBase } from '../input-renderer.types'
+import FlyInputRenderer from '../input-renderer/FlyInputRenderer.vue'
+
+import './FlyFormItemRenderer.scss'
+
+const props = defineProps<{
+  modelValue: unknown
+  input: T_InputRendererBase
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: unknown): void
+  (e: 'change', value: unknown): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const { t } = UseLocaleInjector()
+
+const modelProxy = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+</script>

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

@@ -0,0 +1,3 @@
+import type FlyFormSchemaRenderer from './FlyFormSchemaRenderer.vue'
+
+export type T_FlyFormSchemaRendererInstance = InstanceType<typeof FlyFormSchemaRenderer> | null

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

@@ -0,0 +1,246 @@
+import type { FormInstance, FormItemRule } from 'element-plus'
+
+import type { Composer } from 'vue-i18n'
+
+import { checkInputRange } from '../../../../utils/validators'
+import { formFieldErrorMessageFormatter } from '../../form.utils'
+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 async function genericFormValidator(formRef: FormInstance): Promise<true> {
+  return new Promise((resolve, reject) => {
+    formRef.validate((valid, errors) => {
+      if (!valid) {
+        if (errors) {
+          return reject(formFieldErrorMessageFormatter(errors))
+        }
+      } else {
+        return resolve(true)
+      }
+    })
+  })
+}
+
+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, composer?: Composer): FormItemRule[] {
+  const validations = field.validation
+  const rules: FormItemRule[] = []
+
+  if (validations?.required) {
+    switch (field.type) {
+      case 'text': {
+        rules.push(requiredField(field.label, 'blur', true, composer))
+
+        if (field.validation?.minLength || field.validation?.maxLength) {
+          rules.push(
+            checkInputRangeValidator(
+              checkInputRange(
+                field.label,
+                {
+                  min: field.validation?.minLength,
+                  max: field.validation?.maxLength
+                },
+                undefined,
+                undefined,
+                composer
+              ),
+              'blur'
+            )
+          )
+        }
+
+        break
+      }
+
+      case 'dateTime': {
+        rules.push(requiredField(field.label, 'blur', true, composer))
+        break
+      }
+
+      case 'number': {
+        rules.push(requiredFieldNumber(field.label, 'change', composer))
+        break
+      }
+
+      case 'select': {
+        if (field.config.multiple) {
+          rules.push(requiredFieldArray(field.label, 'change', true, composer))
+        } else {
+          rules.push(requiredField(field.label, 'change', true, composer))
+        }
+        break
+      }
+
+      case 'valueUnit': {
+        if (field.config.valueType === 'text') {
+          rules.push(
+            requiredFieldValueUnit(
+              field.label,
+              'change',
+              undefined,
+              undefined,
+              {
+                valueType: 'text'
+              },
+              composer
+            )
+          )
+        } else {
+          rules.push(requiredFieldNumberSelect(field.label, 'change', true, composer))
+        }
+      }
+    }
+  }
+
+  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[]) : []
+}