@flyanra/vue-core 0.4.0 → 0.4.2

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

@@ -1,56 +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>
+<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

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

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

@@ -1,28 +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
-  }
-}
+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

@@ -1,101 +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>
+<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

@@ -1,121 +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
-})
+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
+}