@flyanra/vue-core 1.2.0 → 1.3.0

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

@@ -1,99 +1,99 @@
-import type { FormItemRule } from 'element-plus'
-
-import { isNil } from 'lodash-es'
-
-import { UseLocaleInjector } from '../../composables/UseLocaleInjector'
-import { type checkInputRange, isRequiredError } from '../../utils/validators'
-
-import type { T_ValueUnitValue } from './input-renderers/value-unit/FlyValueUnit.types'
-
-type InputTriggers = 'blur' | 'change'
-
-export const requiredField = (
-  fieldLabel = 'validation.field',
-  trigger: InputTriggers = 'blur',
-  useRequiredMessage = true
-): FormItemRule => {
-  return {
-    required: true,
-    trigger: trigger,
-    message: useRequiredMessage ? isRequiredError(fieldLabel) : fieldLabel
-  }
-}
-
-export const checkInputRangeValidator = (
-  validator: ReturnType<typeof checkInputRange>,
-  trigger: InputTriggers = 'change'
-): FormItemRule => ({
-  trigger: trigger,
-  validator
-})
-
-export const requiredFieldNumber = (
-  languageKey = 'validation.field',
-  trigger: InputTriggers = 'change'
-): FormItemRule => {
-  const { t } = UseLocaleInjector()
-
-  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
-): FormItemRule =>
-  requiredFieldValueUnit(label, trigger, useRequiredMessage, true, {
-    valueType: 'number'
-  })
-
-export const requiredFieldValueUnit = (
-  label = 'validation.field',
-  trigger: InputTriggers = 'blur',
-  useRequiredMessage = true,
-  required = true,
-  options: {
-    valueType?: 'text' | 'number'
-  }
-): 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) : label))
-    }
-
-    return callback()
-  }
-})
-
-export const requiredFieldArray = (
-  label = 'validation.field',
-  trigger: InputTriggers = 'change',
-  useRequiredMessage = true
-): FormItemRule => ({
-  type: 'array',
-  required: true,
-  trigger: trigger,
-  message: useRequiredMessage ? isRequiredError(label) : label
-})
+import type { FormItemRule } from 'element-plus'
+
+import { isNil } from 'lodash-es'
+
+import { UseLocaleInjector } from '../../composables/useLocaleInjector/UseLocaleInjector'
+import { type checkInputRange, isRequiredError } from '../../utils/validators'
+
+import type { T_ValueUnitValue } from './input-renderers/value-unit/FlyValueUnit.types'
+
+type InputTriggers = 'blur' | 'change'
+
+export const requiredField = (
+  fieldLabel = 'validation.field',
+  trigger: InputTriggers = 'blur',
+  useRequiredMessage = true
+): FormItemRule => {
+  return {
+    required: true,
+    trigger: trigger,
+    message: useRequiredMessage ? isRequiredError(fieldLabel) : fieldLabel
+  }
+}
+
+export const checkInputRangeValidator = (
+  validator: ReturnType<typeof checkInputRange>,
+  trigger: InputTriggers = 'change'
+): FormItemRule => ({
+  trigger: trigger,
+  validator
+})
+
+export const requiredFieldNumber = (
+  languageKey = 'validation.field',
+  trigger: InputTriggers = 'change'
+): FormItemRule => {
+  const { t } = UseLocaleInjector()
+
+  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
+): FormItemRule =>
+  requiredFieldValueUnit(label, trigger, useRequiredMessage, true, {
+    valueType: 'number'
+  })
+
+export const requiredFieldValueUnit = (
+  label = 'validation.field',
+  trigger: InputTriggers = 'blur',
+  useRequiredMessage = true,
+  required = true,
+  options: {
+    valueType?: 'text' | 'number'
+  }
+): 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) : label))
+    }
+
+    return callback()
+  }
+})
+
+export const requiredFieldArray = (
+  label = 'validation.field',
+  trigger: InputTriggers = 'change',
+  useRequiredMessage = true
+): FormItemRule => ({
+  type: 'array',
+  required: true,
+  trigger: trigger,
+  message: useRequiredMessage ? isRequiredError(label) : label
+})

package/src/components/general/fly-icon-v2/FlyIconV2.types.ts

@@ -1,6 +1,6 @@
-import { type Component } from 'vue'
-
-export type T_FlyIconV2Props = {
-  icon: Component
-  size?: string | number
-}
+import { type Component } from 'vue'
+
+export type T_FlyIconV2Props = {
+  icon: Component
+  size?: string | number
+}

package/src/components/general/fly-icon-v2/FlyIconV2.vue

@@ -1,17 +1,17 @@
-<template>
-  <component
-    :is="icon"
-    class="fly-icon"
-    :style="{
-      fontSize: typeof size === 'number' ? `${size}px` : size
-    }"
-  />
-</template>
-
-<script setup lang="ts">
-import type { T_FlyIconV2Props } from './FlyIconV2.types'
-
-defineProps<T_FlyIconV2Props>()
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <component
+    :is="icon"
+    class="fly-icon"
+    :style="{
+      fontSize: typeof size === 'number' ? `${size}px` : size
+    }"
+  />
+</template>
+
+<script setup lang="ts">
+import type { T_FlyIconV2Props } from './FlyIconV2.types'
+
+defineProps<T_FlyIconV2Props>()
+</script>
+
+<style lang="scss" scoped></style>

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

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

package/src/components/general/index.ts

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

package/src/components/index.ts

@@ -1,7 +1,7 @@
-export * from './navigation'
-
-export * from './basic'
-export * from './feedback'
-export * from './general'
-
-export * from './form'
+export * from './navigation'
+
+export * from './basic'
+export * from './feedback'
+export * from './general'
+
+export * from './form'

package/src/components/navigation/menu/fly-mini-sidebar/FlyMiniSidebar.types.ts

@@ -1,8 +1,8 @@
-import type { T_FlyIconV2Props } from '../../../general/fly-icon-v2/FlyIconV2.types'
-
-export type T_FlyMiniSidebarItem = {
-  key: string | number
-  label: string
-  path: string
-  icon: T_FlyIconV2Props['icon']
-}
+import type { T_FlyIconV2Props } from '../../../general/fly-icon-v2/FlyIconV2.types'
+
+export type T_FlyMiniSidebarItem = {
+  key: string | number
+  label: string
+  path: string
+  icon: T_FlyIconV2Props['icon']
+}

package/src/components/navigation/menu/fly-mini-sidebar/FlyMiniSidebarItem.vue

@@ -1,55 +1,55 @@
-<template>
-  <router-link :to="menu.path" class="anra-sidebar-item" active-class="anra-sidebar-item--active">
-    <span class="anra-sidebar-item__icon">
-      <FlyIconV2 :icon="menu.icon" />
-    </span>
-
-    <span class="anra-sidebar-item__label">{{ menu.label }}</span>
-  </router-link>
-</template>
-
-<script setup lang="ts">
-import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
-
-import type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'
-
-defineProps<{
-  menu: T_FlyMiniSidebarItem
-}>()
-</script>
-
-<style lang="scss">
-.anra-sidebar-item {
-  text-align: center;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  transition: all 0.2s ease;
-  color: var(--anra-text-subtle);
-  display: flex;
-  flex-direction: column;
-
-  &--active {
-    background-color: var(--anra-primary);
-    color: var(--anra-text-on-primary);
-  }
-
-  &__icon {
-    display: flex;
-    justify-content: center;
-    flex-shrink: 0;
-
-    svg {
-      width: 1em;
-    }
-  }
-
-  &__label {
-    display: inline-block;
-    font-size: 0.75rem;
-    letter-spacing: 0;
-    line-height: 1.5;
-  }
-}
-</style>
+<template>
+  <router-link :to="menu.path" class="anra-sidebar-item" active-class="anra-sidebar-item--active">
+    <span class="anra-sidebar-item__icon">
+      <FlyIconV2 :icon="menu.icon" />
+    </span>
+
+    <span class="anra-sidebar-item__label">{{ menu.label }}</span>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
+
+import type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'
+
+defineProps<{
+  menu: T_FlyMiniSidebarItem
+}>()
+</script>
+
+<style lang="scss">
+.anra-sidebar-item {
+  text-align: center;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  transition: all 0.2s ease;
+  color: var(--anra-text-subtle);
+  display: flex;
+  flex-direction: column;
+
+  &--active {
+    background-color: var(--anra-primary);
+    color: var(--anra-text-on-primary);
+  }
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 1em;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    font-size: 0.75rem;
+    letter-spacing: 0;
+    line-height: 1.5;
+  }
+}
+</style>

package/src/components/navigation/menu/fly-sidebar/FlySidebar.types.ts

@@ -1,49 +1,49 @@
-import type { T_FlyIconV2Props } from '../../../general'
-
-export type T_FlySidebarBase = {
-  index: string
-  label?: string
-  icon?: T_FlyIconV2Props['icon']
-  disabled?: boolean
-}
-
-export type T_FlySidebarItem = T_FlySidebarBase & {
-  type: 'item'
-}
-
-export type T_FlySidebarSubMenu = T_FlySidebarBase & {
-  type: 'submenu'
-  children: T_FlySidebarNode[]
-}
-
-export type T_FlySidebarGroup = {
-  index: string
-  type: 'group'
-  label?: string
-  children: T_FlySidebarItem[]
-}
-
-export type T_FlySidebarNode = T_FlySidebarItem | T_FlySidebarSubMenu | T_FlySidebarGroup
-
-export type T_FlySidebar = T_FlySidebarNode[]
-
-export type T_FlySidebarProps = {
-  router?: boolean
-  defaultActive?: string
-  menu: T_FlySidebarNode[]
-  height?: string
-  /**
-   * Controls the collapsed state of the sidebar.
-   * Must be bound with `v-model:collapsed` — a plain `:collapsed` binding
-   * is one-way only and will not reflect toggle actions back to the parent.
-   *
-   * @example
-   * ```ts
-   * const sidebarCollapsed = useStorage('sidebar-collapsed', false)
-   * ```
-   * ```html
-   * <FlySidebar v-model:collapsed="sidebarCollapsed" ... />
-   * ```
-   */
-  collapsed?: boolean
-}
+import type { T_FlyIconV2Props } from '../../../general'
+
+export type T_FlySidebarBase = {
+  index: string
+  label?: string
+  icon?: T_FlyIconV2Props['icon']
+  disabled?: boolean
+}
+
+export type T_FlySidebarItem = T_FlySidebarBase & {
+  type: 'item'
+}
+
+export type T_FlySidebarSubMenu = T_FlySidebarBase & {
+  type: 'submenu'
+  children: T_FlySidebarNode[]
+}
+
+export type T_FlySidebarGroup = {
+  index: string
+  type: 'group'
+  label?: string
+  children: T_FlySidebarItem[]
+}
+
+export type T_FlySidebarNode = T_FlySidebarItem | T_FlySidebarSubMenu | T_FlySidebarGroup
+
+export type T_FlySidebar = T_FlySidebarNode[]
+
+export type T_FlySidebarProps = {
+  router?: boolean
+  defaultActive?: string
+  menu: T_FlySidebarNode[]
+  height?: string
+  /**
+   * Controls the collapsed state of the sidebar.
+   * Must be bound with `v-model:collapsed` — a plain `:collapsed` binding
+   * is one-way only and will not reflect toggle actions back to the parent.
+   *
+   * @example
+   * ```ts
+   * const sidebarCollapsed = useStorage('sidebar-collapsed', false)
+   * ```
+   * ```html
+   * <FlySidebar v-model:collapsed="sidebarCollapsed" ... />
+   * ```
+   */
+  collapsed?: boolean
+}