@flyanra/vue-core 0.3.0 → 0.4.0

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 @@
+@use '../../../../styles/element/overrides/select.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
+}

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

@@ -0,0 +1,48 @@
+<template>
+  <el-select
+    v-model="inputProxy"
+    style="width: 100%"
+    v-bind="input?.attrs"
+    filterable
+    :placeholder="input?.placeholder && input?.placeholder"
+    clearable
+    @change="(val) => emit('change', val)"
+    @blur="() => emit('blur')"
+    @focus="() => emit('focus')"
+  >
+    <el-option v-for="unit in options" :key="unit.value" :value="unit.value" :label="unit.label" />
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElOption, ElSelect } from 'element-plus'
+
+import './FlySelect.scss'
+import type { T_InputSelect, T_InputSelectValue } from './FlySelect.types'
+import { normalizeSelectOptionsToDict } from './FlySelect.utils'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: T_InputSelectValue): void
+  (e: 'change', v: T_InputSelectValue): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: T_InputSelectValue
+  input?: T_InputSelect
+}>()
+
+const options = computed(() => normalizeSelectOptionsToDict(props.input?.config?.options || []))
+
+const inputProxy = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (v) => {
+    emit('update:modelValue', v)
+  }
+})
+</script>

package/src/components/form/input-renderers/text/FlyText.scss

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

package/src/components/form/input-renderers/text/FlyText.types.ts

@@ -0,0 +1,20 @@
+export type T_InputTextValues = string | number | undefined
+
+export type T_InputTextBase = T_InputText & {
+  type: 'text' | 'textarea'
+}
+
+export type T_InputText = {
+  placeholder?: string
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: {
+    minlength?: number
+    maxlength?: number
+    showWordLimit?: boolean
+    type?: string
+    rows?: number
+  }
+  mask?: string // example ###-###.@ - uses Maska: https://github.com/beholdr/maska
+}

package/src/components/form/input-renderers/text/FlyText.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-input
+    v-model="inputProxy"
+    v-maska="inputType === 'text' ? input?.mask : undefined"
+    style="width: 100%"
+    :type="inputType"
+    v-bind="input?.attrs"
+    :placeholder="input?.placeholder"
+    show-word-limit
+    @change="(val) => emit('change', castValue(val))"
+    @blur="() => emit('blur')"
+    @focus="() => emit('focus')"
+  >
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElInput } from 'element-plus'
+
+import { vMaska } from 'maska/vue'
+
+import { getInputDisplayValue } from '../input-renderer.utils'
+
+import './FlyText.scss'
+import type { T_InputText, T_InputTextValues } from './FlyText.types'
+
+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?: T_InputTextValues
+  input?: T_InputText
+}>()
+
+const inputType = computed(() => props.input?.attrs?.type || 'text')
+
+const inputProxy = computed({
+  get: () => {
+    return getInputDisplayValue(props.modelValue, 'text')
+  },
+  set: (v) => {
+    const parsed = castValue(v)
+    emit('update:modelValue', parsed)
+  }
+})
+
+function castValue(v: unknown) {
+  return v ? String(v) : ''
+}
+</script>

package/src/components/form/input-renderers/value-unit/FlyValueUnit.scss

@@ -0,0 +1,2 @@
+@use '../text/FlyText.scss';
+@use '../select/FlySelect.scss';

package/src/components/form/input-renderers/value-unit/FlyValueUnit.types.ts

@@ -0,0 +1,28 @@
+import type { T_InputNumber } from '../number/FlyNumber.types'
+import type { T_InputSelect, T_InputSelectOptionList } from '../select/FlySelect.types'
+import type { T_InputText } from '../text/FlyText.types'
+
+export type T_ValueUnitValue =
+  | {
+      unit: string | number | undefined
+      value: string | number | undefined
+    }
+  | undefined
+
+export type T_InputValueUnitBase = T_InputValueUnit & {
+  type: 'valueUnit'
+}
+
+export type T_InputValueUnit = {
+  placeholder?: string
+  unitPlaceholder?: string
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: T_InputText['attrs'] | T_InputNumber['attrs']
+  unitsAttr?: T_InputSelect['attrs']
+  config?: {
+    valueType?: 'text' | 'number' // defaults to number
+    options: T_InputSelectOptionList
+  }
+}

package/src/components/form/input-renderers/value-unit/FlyValueUnit.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-input
+    v-model="valueProxy"
+    style="width: 100%"
+    :type="valueTypeIsString ? 'text' : 'number'"
+    v-bind="input?.attrs"
+    :placeholder="input?.placeholder"
+    @change="(v) => emit('change', getValue(v))"
+    @blur="() => emit('blur')"
+    @focus="() => emit('focus')"
+  >
+    <template #append>
+      <el-select
+        v-bind="input?.unitsAttr"
+        v-model="unitProxy"
+        style="width: 100px"
+        filterable
+        :placeholder="input?.unitPlaceholder"
+        @change="(v) => emit('change', getUnit(v))"
+        @blur="() => emit('blur')"
+        @focus="() => emit('focus')"
+      >
+        <el-option
+          v-for="unit in options"
+          :key="unit.value"
+          :value="unit.value"
+          :label="unit.label"
+        />
+      </el-select>
+    </template>
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElInput, ElOption, ElSelect } from 'element-plus'
+
+import { getInputDisplayValue } from '../input-renderer.utils'
+import { displayToNumber } from '../number/FlyNumber.utils'
+import { normalizeSelectOptionsToDict } from '../select/FlySelect.utils'
+
+import './FlyValueUnit.scss'
+import type { T_InputValueUnit, T_ValueUnitValue } from './FlyValueUnit.types'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: T_ValueUnitValue): void
+  (e: 'change', v: T_ValueUnitValue): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: T_ValueUnitValue
+  input?: T_InputValueUnit
+}>()
+
+const options = computed(() => normalizeSelectOptionsToDict(props.input?.config?.options || []))
+
+const valueTypeIsString = computed(() => props.input?.config?.valueType === 'text')
+
+const valueProxy = computed<string>({
+  get: () => {
+    return getInputDisplayValue(
+      props.modelValue?.value,
+      valueTypeIsString.value ? 'text' : 'number'
+    )
+  },
+  set: (v) => {
+    emit('update:modelValue', getValue(v))
+  }
+})
+
+const unitProxy = computed({
+  get: () => props.modelValue?.unit ?? undefined,
+  set: (u) => {
+    emit('update:modelValue', getUnit(u))
+  }
+})
+
+function ensure(): NonNullable<T_ValueUnitValue> {
+  return {
+    value: props.modelValue?.value ?? undefined,
+    unit: props.modelValue?.unit ?? undefined
+  }
+}
+
+function getValue(v: string) {
+  const base = ensure()
+  const parsed = valueTypeIsString.value ? v : displayToNumber(v)
+
+  const next = { ...base, value: parsed }
+  return next
+}
+
+function getUnit(u: NonNullable<T_ValueUnitValue>['unit']) {
+  const base = ensure()
+  const next = { ...base, unit: u }
+  return next
+}
+</script>

package/src/components/form/input-validators.ts

@@ -0,0 +1,121 @@
+import type { FormItemRule } from 'element-plus'
+
+import { isNil } from 'lodash'
+import type { Composer } from 'vue-i18n'
+
+import { type checkInputRange, isRequiredError } from '../../utils/validators'
+
+import type { T_ValueUnitValue } from './input-renderers/value-unit/FlyValueUnit.types'
+
+type InputTriggers = 'blur' | 'change'
+
+// type Validator = (
+//   languageKey?: string,
+//   trigger?: InputTriggers,
+//   useRequiredMessage?: boolean,
+//   required?: boolean,
+//   options?: {
+//     valueType?: 'text' | 'number'
+//   },
+//   composer?: Composer
+// ) => FormItemRule
+
+export const requiredField = (
+  fieldLabel = 'validation.field',
+  trigger: InputTriggers = 'blur',
+  useRequiredMessage = true,
+  composer?: Composer
+): FormItemRule => {
+  return {
+    required: true,
+    trigger: trigger,
+    message: useRequiredMessage ? isRequiredError(fieldLabel, composer) : fieldLabel
+  }
+}
+
+export const checkInputRangeValidator = (
+  validator: ReturnType<typeof checkInputRange>,
+  trigger: InputTriggers = 'change'
+): FormItemRule => ({
+  trigger: trigger,
+  validator
+})
+
+export const requiredFieldNumber = (
+  languageKey = 'validation.field',
+  trigger: InputTriggers = 'change',
+  composer?: Composer
+): FormItemRule => {
+  const t = composer?.t
+  return {
+    type: 'number',
+    required: true,
+    trigger: trigger,
+    message: t
+      ? t('validation.fieldMustBeANumber', {
+          fieldName: t(languageKey)
+        })
+      : 'validation.fieldMustBeANumber'
+  }
+}
+
+export const requiredFieldNumberSelect = (
+  label = 'validation.field',
+  trigger: InputTriggers = 'blur',
+  useRequiredMessage = true,
+  composer?: Composer
+): FormItemRule =>
+  requiredFieldValueUnit(
+    label,
+    trigger,
+    useRequiredMessage,
+    true,
+    {
+      valueType: 'number'
+    },
+    composer
+  )
+
+export const requiredFieldValueUnit = (
+  label = 'validation.field',
+  trigger: InputTriggers = 'blur',
+  useRequiredMessage = true,
+  required = true,
+  options: {
+    valueType?: 'text' | 'number'
+  },
+  composer?: Composer
+): FormItemRule => ({
+  required: required,
+  trigger: trigger,
+  validator: (_rule, value: T_ValueUnitValue, callback) => {
+    // used in element form validator
+    if (
+      (options?.valueType === 'number' &&
+        !(
+          value &&
+          value.unit !== '' &&
+          value.value !== '' &&
+          !isNil(value.unit) &&
+          !isNil(value.value)
+        )) ||
+      !value
+    ) {
+      return callback(new Error(useRequiredMessage ? isRequiredError(label, composer) : label))
+    }
+
+    return callback()
+  }
+})
+
+export const requiredFieldArray = (
+  label = 'validation.field',
+  trigger: InputTriggers = 'change',
+  useRequiredMessage = true,
+  composer?: Composer
+): FormItemRule => ({
+  type: 'array',
+  required: true,
+  trigger: trigger,
+  message: useRequiredMessage ? isRequiredError(label, composer) : label
+})

package/src/components/index.ts

@@ -1,9 +1,3 @@
-export { default as AppButton } from './AppButton'
-export type * from './AppButton'
-
-export { default as AppCard } from './AppCard'
-export type * from './AppCard'
-
 export * from './navigation'
 
 export * from './basic'

package/src/styles/element/mixins/collapse.scss

@@ -1,7 +1,7 @@
 @mixin el-collapse-operation-style {
   .el-collapse-item {
     &__header {
-      padding: 0.5rem 0rem 0.5rem 0rem;
+      padding: 0.5rem 0.5rem 0.5rem 0rem;
       min-height: 48px;
       text-align: left;
     }
@@ -38,7 +38,7 @@
   .el-collapse-item {
     border-bottom: 10px solid transparent;
     &__header {
-      padding: 0.25rem 0rem 0.25rem 0rem;
+      padding: 0.25rem 0.5rem 0.25rem 0rem;
       // min-height: 30px;
       text-align: left;
       border-top: 1px solid var(--el-collapse-border-color);

package/src/styles/element/overrides/date-time.scss

@@ -0,0 +1,11 @@
+@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/button.scss';
+@use 'element-plus/theme-chalk/src/icon.scss';
+
+@use 'element-plus/theme-chalk/src/date-picker.scss';
+@use 'element-plus/theme-chalk/src/date-picker-panel.scss';
+@use 'element-plus/theme-chalk/src/time-picker.scss';
+@use 'element-plus/theme-chalk/src/time-select.scss';
+
+@use 'element-plus/theme-chalk/src/popper.scss';
+@use 'element-plus/theme-chalk/src/scrollbar.scss';

package/src/styles/element/overrides/form.scss

@@ -1,14 +1,12 @@
-@use 'element-plus/theme-chalk/src/form.scss' as *;
-@use 'element-plus/theme-chalk/src/form-item.scss' as *;
-@use 'element-plus/theme-chalk/src/input.scss' as *;
-@use 'element-plus/theme-chalk/src/input-number.scss' as *;
-@use 'element-plus/theme-chalk/src/option.scss' as *;
-@use 'element-plus/theme-chalk/src/select.scss' as *;
-@use 'element-plus/theme-chalk/src/radio.scss' as *;
-@use 'element-plus/theme-chalk/src/radio-group.scss' as *;
-@use 'element-plus/theme-chalk/src/checkbox.scss' as *;
-@use 'element-plus/theme-chalk/src/date-picker.scss' as *;
-@use 'element-plus/theme-chalk/src/switch.scss' as *;
+@use 'element-plus/theme-chalk/src/form.scss';
+@use 'element-plus/theme-chalk/src/form-item.scss';
+@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/input-number.scss';
+@use './select.scss';
+@use './radio.scss';
+@use 'element-plus/theme-chalk/src/checkbox.scss';
+@use './date-time.scss';
+@use 'element-plus/theme-chalk/src/switch.scss';
 
 .el-form-item {
   &__error,

package/src/styles/element/overrides/message-box.scss

@@ -0,0 +1,2 @@
+@use 'element-plus/theme-chalk/src/overlay.scss' as *;
+@use 'element-plus/theme-chalk/src/message-box.scss' as *;

package/src/styles/element/overrides/radio.scss

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

package/src/styles/element/overrides/select.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/dist/types/components/AppButton/AppButton.types.d.ts

@@ -1,8 +0,0 @@
-export type AppButtonVariant = 'primary' | 'secondary' | 'ghost';
-export type AppButtonSize = 'sm' | 'md' | 'lg';
-export interface AppButtonProps {
-    disabled?: boolean;
-    label?: string;
-    size?: AppButtonSize;
-    variant?: AppButtonVariant;
-}