@flyanra/vue-core 1.2.1 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/dist/types/components/general/fly-icon-v2/index.d.ts +1 -1
  2. package/dist/types/composables/index.d.ts +4 -3
  3. package/dist/types/composables/useFeatureGate/index.d.ts +1 -0
  4. package/dist/types/composables/useFeatureGate/useFeatureGate.d.ts +6 -0
  5. package/dist/types/composables/useFormHider/index.d.ts +1 -0
  6. package/dist/types/composables/useFormHider/useFormHider.d.ts +8 -0
  7. package/dist/types/composables/useLocaleInjector/index.d.ts +2 -0
  8. package/dist/types/composables/useSidebarActiveIndex/index.d.ts +1 -0
  9. package/dist/types/composables/{useSidebarActiveIndex.d.ts → useSidebarActiveIndex/useSidebarActiveIndex.d.ts} +1 -1
  10. package/package.json +4 -3
  11. package/src/components/basic/fly-button/FlyButton.types.ts +28 -28
  12. package/src/components/basic/fly-button/FlyButton.vue +178 -178
  13. package/src/components/basic/typography/FlyCollapseTitleRenderer.vue +46 -46
  14. package/src/components/feedback/tooltip/FlyInfoTooltip.vue +49 -49
  15. package/src/components/feedback/tooltip/FlyTooltip.element.scss +4 -4
  16. package/src/components/feedback/tooltip/FlyTooltip.vue +60 -60
  17. package/src/components/form/form.utils.ts +72 -72
  18. package/src/components/form/index.ts +6 -6
  19. package/src/components/form/input-renderers/boolean/FlyBoolean.vue +48 -48
  20. package/src/components/form/input-renderers/form-item-renderer/FlyFormItemRenderer.vue +48 -48
  21. package/src/components/form/input-renderers/form-item-renderer/index.ts +4 -4
  22. package/src/components/form/input-renderers/form-schema-renderer/FlyFormSchemaRenderer.types.ts +3 -3
  23. package/src/components/form/input-renderers/form-schema-renderer/FlyFormSchemaRenderer.utils.ts +221 -221
  24. package/src/components/form/input-renderers/form-schema-renderer/FlyFormSchemaRenderer.vue +75 -75
  25. package/src/components/form/input-renderers/form-schema-renderer/UseFormSchemaRenderer.ts +97 -97
  26. package/src/components/form/input-renderers/input-renderer/FlyInputRenderer.vue +49 -49
  27. package/src/components/form/input-renderers/input-renderer/index.ts +4 -4
  28. package/src/components/form/input-renderers/input-renderer.utils.ts +18 -18
  29. package/src/components/form/input-renderers/number/FlyNumber.vue +64 -64
  30. package/src/components/form/input-renderers/regional-tenant-form-renderer/FlyRegionalTenantFormRenderer.types.ts +15 -15
  31. package/src/components/form/input-renderers/regional-tenant-form-renderer/FlyRegionalTenantFormRenderer.vue +99 -99
  32. package/src/components/form/input-renderers/select/FlySelect.scss +1 -1
  33. package/src/components/form/input-renderers/select/FlySelect.utils.ts +37 -37
  34. package/src/components/form/input-renderers/text/FlyText.vue +70 -70
  35. package/src/components/form/input-renderers/value-unit/FlyValueUnit.vue +102 -102
  36. package/src/components/form/input-validators.ts +99 -99
  37. package/src/components/general/fly-icon-v2/FlyIconV2.types.ts +6 -6
  38. package/src/components/general/fly-icon-v2/FlyIconV2.vue +17 -17
  39. package/src/components/general/fly-icon-v2/index.ts +6 -6
  40. package/src/components/general/index.ts +5 -5
  41. package/src/components/index.ts +7 -7
  42. package/src/components/navigation/menu/fly-mini-sidebar/FlyMiniSidebar.types.ts +8 -8
  43. package/src/components/navigation/menu/fly-mini-sidebar/FlyMiniSidebarItem.vue +55 -55
  44. package/src/components/navigation/menu/fly-sidebar/FlySidebar.types.ts +49 -49
  45. package/src/components/navigation/menu/fly-sidebar/FlySidebar.vue +146 -146
  46. package/src/components/navigation/menu/fly-sidebar/FlySidebarNode.vue +47 -47
  47. package/src/composables/index.ts +4 -4
  48. package/src/composables/useFeatureGate/index.ts +1 -0
  49. package/src/composables/useFeatureGate/useFeatureGate.ts +19 -0
  50. package/src/composables/useFormHider/index.ts +1 -0
  51. package/src/composables/useFormHider/useFormHider.ts +37 -0
  52. package/src/composables/{UseLocaleInjector.ts → useLocaleInjector/UseLocaleInjector.ts} +37 -37
  53. package/src/composables/useLocaleInjector/index.ts +2 -0
  54. package/src/composables/useSidebarActiveIndex/index.ts +1 -0
  55. package/src/composables/{useSidebarActiveIndex.ts → useSidebarActiveIndex/useSidebarActiveIndex.ts} +103 -103
  56. package/src/styles/element/mixins/collapse.scss +61 -61
  57. package/src/styles/element/overrides/form.scss +121 -121
  58. package/src/styles/element/overrides/message-box.scss +2 -2
  59. package/src/styles/element/overrides/radio.scss +2 -2
  60. package/src/styles/element/overrides/select.scss +9 -9
  61. package/src/utils/index.ts +2 -2
  62. package/src/utils/pure-functions.ts +15 -15
  63. package/src/utils/validators.ts +81 -81
  64. /package/dist/types/composables/{UseLocaleInjector.d.ts → useLocaleInjector/UseLocaleInjector.d.ts} +0 -0
@@ -1,99 +1,99 @@
1
- import type { FormItemRule } from 'element-plus'
2
-
3
- import { isNil } from 'lodash-es'
4
-
5
- import { UseLocaleInjector } from '../../composables/UseLocaleInjector'
6
- import { type checkInputRange, isRequiredError } from '../../utils/validators'
7
-
8
- import type { T_ValueUnitValue } from './input-renderers/value-unit/FlyValueUnit.types'
9
-
10
- type InputTriggers = 'blur' | 'change'
11
-
12
- export const requiredField = (
13
- fieldLabel = 'validation.field',
14
- trigger: InputTriggers = 'blur',
15
- useRequiredMessage = true
16
- ): FormItemRule => {
17
- return {
18
- required: true,
19
- trigger: trigger,
20
- message: useRequiredMessage ? isRequiredError(fieldLabel) : fieldLabel
21
- }
22
- }
23
-
24
- export const checkInputRangeValidator = (
25
- validator: ReturnType<typeof checkInputRange>,
26
- trigger: InputTriggers = 'change'
27
- ): FormItemRule => ({
28
- trigger: trigger,
29
- validator
30
- })
31
-
32
- export const requiredFieldNumber = (
33
- languageKey = 'validation.field',
34
- trigger: InputTriggers = 'change'
35
- ): FormItemRule => {
36
- const { t } = UseLocaleInjector()
37
-
38
- return {
39
- type: 'number',
40
- required: true,
41
- trigger: trigger,
42
- message: t
43
- ? t('validation.fieldMustBeANumber', {
44
- fieldName: t(languageKey)
45
- })
46
- : 'validation.fieldMustBeANumber'
47
- }
48
- }
49
-
50
- export const requiredFieldNumberSelect = (
51
- label = 'validation.field',
52
- trigger: InputTriggers = 'blur',
53
- useRequiredMessage = true
54
- ): FormItemRule =>
55
- requiredFieldValueUnit(label, trigger, useRequiredMessage, true, {
56
- valueType: 'number'
57
- })
58
-
59
- export const requiredFieldValueUnit = (
60
- label = 'validation.field',
61
- trigger: InputTriggers = 'blur',
62
- useRequiredMessage = true,
63
- required = true,
64
- options: {
65
- valueType?: 'text' | 'number'
66
- }
67
- ): FormItemRule => ({
68
- required: required,
69
- trigger: trigger,
70
- validator: (_rule, value: T_ValueUnitValue, callback) => {
71
- // used in element form validator
72
- if (
73
- (options?.valueType === 'number' &&
74
- !(
75
- value &&
76
- value.unit !== '' &&
77
- value.value !== '' &&
78
- !isNil(value.unit) &&
79
- !isNil(value.value)
80
- )) ||
81
- !value
82
- ) {
83
- return callback(new Error(useRequiredMessage ? isRequiredError(label) : label))
84
- }
85
-
86
- return callback()
87
- }
88
- })
89
-
90
- export const requiredFieldArray = (
91
- label = 'validation.field',
92
- trigger: InputTriggers = 'change',
93
- useRequiredMessage = true
94
- ): FormItemRule => ({
95
- type: 'array',
96
- required: true,
97
- trigger: trigger,
98
- message: useRequiredMessage ? isRequiredError(label) : label
99
- })
1
+ import type { FormItemRule } from 'element-plus'
2
+
3
+ import { isNil } from 'lodash-es'
4
+
5
+ import { UseLocaleInjector } from '../../composables/useLocaleInjector/UseLocaleInjector'
6
+ import { type checkInputRange, isRequiredError } from '../../utils/validators'
7
+
8
+ import type { T_ValueUnitValue } from './input-renderers/value-unit/FlyValueUnit.types'
9
+
10
+ type InputTriggers = 'blur' | 'change'
11
+
12
+ export const requiredField = (
13
+ fieldLabel = 'validation.field',
14
+ trigger: InputTriggers = 'blur',
15
+ useRequiredMessage = true
16
+ ): FormItemRule => {
17
+ return {
18
+ required: true,
19
+ trigger: trigger,
20
+ message: useRequiredMessage ? isRequiredError(fieldLabel) : fieldLabel
21
+ }
22
+ }
23
+
24
+ export const checkInputRangeValidator = (
25
+ validator: ReturnType<typeof checkInputRange>,
26
+ trigger: InputTriggers = 'change'
27
+ ): FormItemRule => ({
28
+ trigger: trigger,
29
+ validator
30
+ })
31
+
32
+ export const requiredFieldNumber = (
33
+ languageKey = 'validation.field',
34
+ trigger: InputTriggers = 'change'
35
+ ): FormItemRule => {
36
+ const { t } = UseLocaleInjector()
37
+
38
+ return {
39
+ type: 'number',
40
+ required: true,
41
+ trigger: trigger,
42
+ message: t
43
+ ? t('validation.fieldMustBeANumber', {
44
+ fieldName: t(languageKey)
45
+ })
46
+ : 'validation.fieldMustBeANumber'
47
+ }
48
+ }
49
+
50
+ export const requiredFieldNumberSelect = (
51
+ label = 'validation.field',
52
+ trigger: InputTriggers = 'blur',
53
+ useRequiredMessage = true
54
+ ): FormItemRule =>
55
+ requiredFieldValueUnit(label, trigger, useRequiredMessage, true, {
56
+ valueType: 'number'
57
+ })
58
+
59
+ export const requiredFieldValueUnit = (
60
+ label = 'validation.field',
61
+ trigger: InputTriggers = 'blur',
62
+ useRequiredMessage = true,
63
+ required = true,
64
+ options: {
65
+ valueType?: 'text' | 'number'
66
+ }
67
+ ): FormItemRule => ({
68
+ required: required,
69
+ trigger: trigger,
70
+ validator: (_rule, value: T_ValueUnitValue, callback) => {
71
+ // used in element form validator
72
+ if (
73
+ (options?.valueType === 'number' &&
74
+ !(
75
+ value &&
76
+ value.unit !== '' &&
77
+ value.value !== '' &&
78
+ !isNil(value.unit) &&
79
+ !isNil(value.value)
80
+ )) ||
81
+ !value
82
+ ) {
83
+ return callback(new Error(useRequiredMessage ? isRequiredError(label) : label))
84
+ }
85
+
86
+ return callback()
87
+ }
88
+ })
89
+
90
+ export const requiredFieldArray = (
91
+ label = 'validation.field',
92
+ trigger: InputTriggers = 'change',
93
+ useRequiredMessage = true
94
+ ): FormItemRule => ({
95
+ type: 'array',
96
+ required: true,
97
+ trigger: trigger,
98
+ message: useRequiredMessage ? isRequiredError(label) : label
99
+ })
@@ -1,6 +1,6 @@
1
- import { type Component } from 'vue'
2
-
3
- export type T_FlyIconV2Props = {
4
- icon: Component
5
- size?: string | number
6
- }
1
+ import { type Component } from 'vue'
2
+
3
+ export type T_FlyIconV2Props = {
4
+ icon: Component
5
+ size?: string | number
6
+ }
@@ -1,17 +1,17 @@
1
- <template>
2
- <component
3
- :is="icon"
4
- class="fly-icon"
5
- :style="{
6
- fontSize: typeof size === 'number' ? `${size}px` : size
7
- }"
8
- />
9
- </template>
10
-
11
- <script setup lang="ts">
12
- import type { T_FlyIconV2Props } from './FlyIconV2.types'
13
-
14
- defineProps<T_FlyIconV2Props>()
15
- </script>
16
-
17
- <style lang="scss" scoped></style>
1
+ <template>
2
+ <component
3
+ :is="icon"
4
+ class="fly-icon"
5
+ :style="{
6
+ fontSize: typeof size === 'number' ? `${size}px` : size
7
+ }"
8
+ />
9
+ </template>
10
+
11
+ <script setup lang="ts">
12
+ import type { T_FlyIconV2Props } from './FlyIconV2.types'
13
+
14
+ defineProps<T_FlyIconV2Props>()
15
+ </script>
16
+
17
+ <style lang="scss" scoped></style>
@@ -1,6 +1,6 @@
1
- import FlyIconV2 from './FlyIconV2.vue'
2
-
3
- export default FlyIconV2
4
- export { FlyIconV2 }
5
-
6
- export type { T_FlyIconV2Props } from './FlyIconV2.types.ts'
1
+ import FlyIconV2 from './FlyIconV2.vue'
2
+
3
+ export default FlyIconV2
4
+ export { FlyIconV2 }
5
+
6
+ export type { T_FlyIconV2Props } from './FlyIconV2.types'
@@ -1,5 +1,5 @@
1
- export { default as FlyIcon } from './fly-icon'
2
- export type * from './fly-icon'
3
-
4
- export { default as T_FlyIconV2 } from './fly-icon-v2'
5
- export type * from './fly-icon-v2'
1
+ export { default as FlyIcon } from './fly-icon'
2
+ export type * from './fly-icon'
3
+
4
+ export { default as T_FlyIconV2 } from './fly-icon-v2'
5
+ export type * from './fly-icon-v2'
@@ -1,7 +1,7 @@
1
- export * from './navigation'
2
-
3
- export * from './basic'
4
- export * from './feedback'
5
- export * from './general'
6
-
7
- export * from './form'
1
+ export * from './navigation'
2
+
3
+ export * from './basic'
4
+ export * from './feedback'
5
+ export * from './general'
6
+
7
+ export * from './form'
@@ -1,8 +1,8 @@
1
- import type { T_FlyIconV2Props } from '../../../general/fly-icon-v2/FlyIconV2.types'
2
-
3
- export type T_FlyMiniSidebarItem = {
4
- key: string | number
5
- label: string
6
- path: string
7
- icon: T_FlyIconV2Props['icon']
8
- }
1
+ import type { T_FlyIconV2Props } from '../../../general/fly-icon-v2/FlyIconV2.types'
2
+
3
+ export type T_FlyMiniSidebarItem = {
4
+ key: string | number
5
+ label: string
6
+ path: string
7
+ icon: T_FlyIconV2Props['icon']
8
+ }
@@ -1,55 +1,55 @@
1
- <template>
2
- <router-link :to="menu.path" class="anra-sidebar-item" active-class="anra-sidebar-item--active">
3
- <span class="anra-sidebar-item__icon">
4
- <FlyIconV2 :icon="menu.icon" />
5
- </span>
6
-
7
- <span class="anra-sidebar-item__label">{{ menu.label }}</span>
8
- </router-link>
9
- </template>
10
-
11
- <script setup lang="ts">
12
- import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
13
-
14
- import type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'
15
-
16
- defineProps<{
17
- menu: T_FlyMiniSidebarItem
18
- }>()
19
- </script>
20
-
21
- <style lang="scss">
22
- .anra-sidebar-item {
23
- text-align: center;
24
- padding-left: 0.5rem;
25
- padding-right: 0.5rem;
26
- padding-top: 0.25rem;
27
- padding-bottom: 0.25rem;
28
- transition: all 0.2s ease;
29
- color: var(--anra-text-subtle);
30
- display: flex;
31
- flex-direction: column;
32
-
33
- &--active {
34
- background-color: var(--anra-primary);
35
- color: var(--anra-text-on-primary);
36
- }
37
-
38
- &__icon {
39
- display: flex;
40
- justify-content: center;
41
- flex-shrink: 0;
42
-
43
- svg {
44
- width: 1em;
45
- }
46
- }
47
-
48
- &__label {
49
- display: inline-block;
50
- font-size: 0.75rem;
51
- letter-spacing: 0;
52
- line-height: 1.5;
53
- }
54
- }
55
- </style>
1
+ <template>
2
+ <router-link :to="menu.path" class="anra-sidebar-item" active-class="anra-sidebar-item--active">
3
+ <span class="anra-sidebar-item__icon">
4
+ <FlyIconV2 :icon="menu.icon" />
5
+ </span>
6
+
7
+ <span class="anra-sidebar-item__label">{{ menu.label }}</span>
8
+ </router-link>
9
+ </template>
10
+
11
+ <script setup lang="ts">
12
+ import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
13
+
14
+ import type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'
15
+
16
+ defineProps<{
17
+ menu: T_FlyMiniSidebarItem
18
+ }>()
19
+ </script>
20
+
21
+ <style lang="scss">
22
+ .anra-sidebar-item {
23
+ text-align: center;
24
+ padding-left: 0.5rem;
25
+ padding-right: 0.5rem;
26
+ padding-top: 0.25rem;
27
+ padding-bottom: 0.25rem;
28
+ transition: all 0.2s ease;
29
+ color: var(--anra-text-subtle);
30
+ display: flex;
31
+ flex-direction: column;
32
+
33
+ &--active {
34
+ background-color: var(--anra-primary);
35
+ color: var(--anra-text-on-primary);
36
+ }
37
+
38
+ &__icon {
39
+ display: flex;
40
+ justify-content: center;
41
+ flex-shrink: 0;
42
+
43
+ svg {
44
+ width: 1em;
45
+ }
46
+ }
47
+
48
+ &__label {
49
+ display: inline-block;
50
+ font-size: 0.75rem;
51
+ letter-spacing: 0;
52
+ line-height: 1.5;
53
+ }
54
+ }
55
+ </style>
@@ -1,49 +1,49 @@
1
- import type { T_FlyIconV2Props } from '../../../general'
2
-
3
- export type T_FlySidebarBase = {
4
- index: string
5
- label?: string
6
- icon?: T_FlyIconV2Props['icon']
7
- disabled?: boolean
8
- }
9
-
10
- export type T_FlySidebarItem = T_FlySidebarBase & {
11
- type: 'item'
12
- }
13
-
14
- export type T_FlySidebarSubMenu = T_FlySidebarBase & {
15
- type: 'submenu'
16
- children: T_FlySidebarNode[]
17
- }
18
-
19
- export type T_FlySidebarGroup = {
20
- index: string
21
- type: 'group'
22
- label?: string
23
- children: T_FlySidebarItem[]
24
- }
25
-
26
- export type T_FlySidebarNode = T_FlySidebarItem | T_FlySidebarSubMenu | T_FlySidebarGroup
27
-
28
- export type T_FlySidebar = T_FlySidebarNode[]
29
-
30
- export type T_FlySidebarProps = {
31
- router?: boolean
32
- defaultActive?: string
33
- menu: T_FlySidebarNode[]
34
- height?: string
35
- /**
36
- * Controls the collapsed state of the sidebar.
37
- * Must be bound with `v-model:collapsed` — a plain `:collapsed` binding
38
- * is one-way only and will not reflect toggle actions back to the parent.
39
- *
40
- * @example
41
- * ```ts
42
- * const sidebarCollapsed = useStorage('sidebar-collapsed', false)
43
- * ```
44
- * ```html
45
- * <FlySidebar v-model:collapsed="sidebarCollapsed" ... />
46
- * ```
47
- */
48
- collapsed?: boolean
49
- }
1
+ import type { T_FlyIconV2Props } from '../../../general'
2
+
3
+ export type T_FlySidebarBase = {
4
+ index: string
5
+ label?: string
6
+ icon?: T_FlyIconV2Props['icon']
7
+ disabled?: boolean
8
+ }
9
+
10
+ export type T_FlySidebarItem = T_FlySidebarBase & {
11
+ type: 'item'
12
+ }
13
+
14
+ export type T_FlySidebarSubMenu = T_FlySidebarBase & {
15
+ type: 'submenu'
16
+ children: T_FlySidebarNode[]
17
+ }
18
+
19
+ export type T_FlySidebarGroup = {
20
+ index: string
21
+ type: 'group'
22
+ label?: string
23
+ children: T_FlySidebarItem[]
24
+ }
25
+
26
+ export type T_FlySidebarNode = T_FlySidebarItem | T_FlySidebarSubMenu | T_FlySidebarGroup
27
+
28
+ export type T_FlySidebar = T_FlySidebarNode[]
29
+
30
+ export type T_FlySidebarProps = {
31
+ router?: boolean
32
+ defaultActive?: string
33
+ menu: T_FlySidebarNode[]
34
+ height?: string
35
+ /**
36
+ * Controls the collapsed state of the sidebar.
37
+ * Must be bound with `v-model:collapsed` — a plain `:collapsed` binding
38
+ * is one-way only and will not reflect toggle actions back to the parent.
39
+ *
40
+ * @example
41
+ * ```ts
42
+ * const sidebarCollapsed = useStorage('sidebar-collapsed', false)
43
+ * ```
44
+ * ```html
45
+ * <FlySidebar v-model:collapsed="sidebarCollapsed" ... />
46
+ * ```
47
+ */
48
+ collapsed?: boolean
49
+ }