@flyanra/vue-core 0.3.0 → 0.4.1

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/general/fly-icon/FlyIcon.types.ts

@@ -1,12 +1,12 @@
-import { type Component } from 'vue'
-
-export type T_FlyIconTypes = 'mdi' | 'ri'
-
-export type T_FlyIcon =
-  | string // mdi:home
-  | Component // RiHomeLine, EP icons, etc.
-
-export type T_FlyIconProps = {
-  type?: T_FlyIconTypes
-  icon: T_FlyIcon
-}
+import { type Component } from 'vue'
+
+export type T_FlyIconTypes = 'mdi' | 'ri'
+
+export type T_FlyIcon =
+  | string // mdi:home
+  | Component // RiHomeLine, EP icons, etc.
+
+export type T_FlyIconProps = {
+  type?: T_FlyIconTypes
+  icon: T_FlyIcon
+}

package/src/components/general/fly-icon/FlyIcon.vue

@@ -1,24 +1,24 @@
-<template>
-  <i class="fly-icon">
-    <svg-icon v-if="iconType === 'mdi'" :type="iconType" :path="icon as string" />
-    <component :is="icon" v-else-if="iconType === 'ri'" />
-  </i>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import SvgIcon from '@jamescoyle/vue-icon'
-
-import type { T_FlyIconProps } from './FlyIcon.types.ts'
-
-type Props = T_FlyIconProps
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'mdi'
-})
-
-const iconType = computed(() => props.type || 'mdi')
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <i class="fly-icon">
+    <svg-icon v-if="iconType === 'mdi'" :type="iconType" :path="icon as string" />
+    <component :is="icon" v-else-if="iconType === 'ri'" />
+  </i>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import SvgIcon from '@jamescoyle/vue-icon'
+
+import type { T_FlyIconProps } from './FlyIcon.types.ts'
+
+type Props = T_FlyIconProps
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'mdi'
+})
+
+const iconType = computed(() => props.type || 'mdi')
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/general/fly-icon/index.ts

@@ -1,6 +1,6 @@
-import FlyIcon from './FlyIcon.vue'
-
-export default FlyIcon
-export { FlyIcon }
-
-export type { T_FlyIconProps } from './FlyIcon.types.ts'
+import FlyIcon from './FlyIcon.vue'
+
+export default FlyIcon
+export { FlyIcon }
+
+export type { T_FlyIconProps } from './FlyIcon.types.ts'

package/src/components/general/index.ts

@@ -1,2 +1,2 @@
-export { default as FlyIcon } from './fly-icon'
-export type * from './fly-icon'
+export { default as FlyIcon } from './fly-icon'
+export type * from './fly-icon'

package/src/components/index.ts

@@ -1,11 +1,5 @@
-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'
-export * from './feedback'
-export * from './general'
+export * from './navigation'
+
+export * from './basic'
+export * from './feedback'
+export * from './general'