@finema/core 1.4.14 → 1.4.15

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 (6) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +1 -1
  3. package/dist/runtime/components/Form/FieldWrapper.vue +1 -0
  4. package/dist/runtime/components/Form/Fields.vue +120 -83
  5. package/dist/runtime/components/Form/types.d.ts +2 -2
  6. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "1.4.14",
3
+ "version": "1.4.15",
4
4
  "configKey": "core",
5
5
  "compatibility": {
6
6
  "nuxt": "^3.7.4"
package/dist/module.mjs CHANGED
@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
2
2
  import 'lodash-es';
3
3
 
4
4
  const name = "@finema/core";
5
- const version = "1.4.14";
5
+ const version = "1.4.15";
6
6
 
7
7
  const colors = {
8
8
  black: "#20243E",
package/dist/runtime/components/Form/FieldWrapper.vue CHANGED
@@ -9,6 +9,7 @@
9
9
  :help="help"
10
10
  :error="errorMessage"
11
11
  :required="!!isRequired"
12
+ :ui="containerUi"
12
13
  >
13
14
  <slot />
14
15
  </UFormGroup>
package/dist/runtime/components/Form/Fields.vue CHANGED
@@ -1,83 +1,96 @@
1
1
  <template>
2
- <div class="fields space-y-4">
3
- <template v-for="(option, index) in options" :key="option.props.name + index + option.type">
4
- <div v-if="!option.isHide" :class="option.class">
5
- <FormInputStatic
6
- v-if="option.type === INPUT_TYPES.STATIC"
7
- :form="form"
8
- v-bind="option.props"
9
- v-on="option.on ?? {}"
10
- />
11
- <FormInputText
12
- v-else-if="option.type === INPUT_TYPES.TEXT"
13
- :form="form"
14
- v-bind="option.props"
15
- v-on="option.on ?? {}"
16
- />
17
- <FormInputText
18
- v-else-if="option.type === INPUT_TYPES.PASSWORD"
19
- type="password"
20
- :form="form"
21
- v-bind="option.props"
22
- v-on="option.on ?? {}"
23
- />
24
- <FormInputText
25
- v-else-if="option.type === INPUT_TYPES.EMAIL"
26
- type="email"
27
- :form="form"
28
- v-bind="option.props"
29
- v-on="option.on ?? {}"
30
- />
31
- <FormInputTextarea
32
- v-else-if="option.type === INPUT_TYPES.TEXTAREA"
33
- :form="form"
34
- v-bind="option.props"
35
- v-on="option.on ?? {}"
36
- />
37
- <FormInputToggle
38
- v-else-if="option.type === INPUT_TYPES.TOGGLE"
39
- :form="form"
40
- v-bind="option.props"
41
- v-on="option.on ?? {}"
42
- />
43
- <FormInputSelect
44
- v-else-if="option.type === INPUT_TYPES.SELECT"
45
- :form="form"
46
- v-bind="option.props"
47
- v-on="option.on ?? {}"
48
- />
49
- <FormInputRadio
50
- v-else-if="option.type === INPUT_TYPES.RADIO"
51
- :form="form"
52
- v-bind="option.props"
53
- v-on="option.on ?? {}"
54
- />
55
- <FormInputCheckbox
56
- v-else-if="option.type === INPUT_TYPES.CHECKBOX"
57
- :form="form"
58
- v-bind="option.props"
59
- v-on="option.on ?? {}"
60
- />
61
- <FormInputDateTime
62
- v-else-if="option.type === INPUT_TYPES.DATE_TIME"
63
- :form="form"
64
- v-bind="option.props"
65
- v-on="option.on ?? {}"
66
- />
67
- <FormInputDateTime
68
- v-else-if="option.type === INPUT_TYPES.DATE"
69
- :form="form"
70
- v-bind="option.props"
71
- :disabled-time="true"
72
- v-on="option.on ?? {}"
73
- />
74
- <FormInputUploadFileClassic
75
- v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
76
- :form="form"
77
- v-bind="option.props"
78
- v-on="option.on ?? {}"
79
- />
80
- </div>
2
+ <div :class="['fields', $props.class]">
3
+ <template
4
+ v-for="(option, index) in options.filter((item) => !item.isHide)"
5
+ :key="option.props.name + index + option.type"
6
+ >
7
+ <FormInputStatic
8
+ v-if="option.type === INPUT_TYPES.STATIC"
9
+ :class="option.class"
10
+ :form="form"
11
+ v-bind="getFieldBinding(option)"
12
+ v-on="option.on ?? {}"
13
+ />
14
+ <FormInputText
15
+ v-else-if="option.type === INPUT_TYPES.TEXT"
16
+ :class="option.class"
17
+ :form="form"
18
+ v-bind="getFieldBinding(option)"
19
+ v-on="option.on ?? {}"
20
+ />
21
+ <FormInputText
22
+ v-else-if="option.type === INPUT_TYPES.PASSWORD"
23
+ :class="option.class"
24
+ type="password"
25
+ :form="form"
26
+ v-bind="getFieldBinding(option)"
27
+ v-on="option.on ?? {}"
28
+ />
29
+ <FormInputText
30
+ v-else-if="option.type === INPUT_TYPES.EMAIL"
31
+ :class="option.class"
32
+ type="email"
33
+ :form="form"
34
+ v-bind="getFieldBinding(option)"
35
+ v-on="option.on ?? {}"
36
+ />
37
+ <FormInputTextarea
38
+ v-else-if="option.type === INPUT_TYPES.TEXTAREA"
39
+ :class="option.class"
40
+ :form="form"
41
+ v-bind="getFieldBinding(option)"
42
+ v-on="option.on ?? {}"
43
+ />
44
+ <FormInputToggle
45
+ v-else-if="option.type === INPUT_TYPES.TOGGLE"
46
+ :class="option.class"
47
+ :form="form"
48
+ v-bind="getFieldBinding(option)"
49
+ v-on="option.on ?? {}"
50
+ />
51
+ <FormInputSelect
52
+ v-else-if="option.type === INPUT_TYPES.SELECT"
53
+ :class="option.class"
54
+ :form="form"
55
+ v-bind="getFieldBinding(option)"
56
+ v-on="option.on ?? {}"
57
+ />
58
+ <FormInputRadio
59
+ v-else-if="option.type === INPUT_TYPES.RADIO"
60
+ :class="option.class"
61
+ :form="form"
62
+ v-bind="getFieldBinding(option)"
63
+ v-on="option.on ?? {}"
64
+ />
65
+ <FormInputCheckbox
66
+ v-else-if="option.type === INPUT_TYPES.CHECKBOX"
67
+ :class="option.class"
68
+ :form="form"
69
+ v-bind="getFieldBinding(option)"
70
+ v-on="option.on ?? {}"
71
+ />
72
+ <FormInputDateTime
73
+ v-else-if="option.type === INPUT_TYPES.DATE_TIME"
74
+ :class="option.class"
75
+ :form="form"
76
+ v-bind="getFieldBinding(option)"
77
+ v-on="option.on ?? {}"
78
+ />
79
+ <FormInputDateTime
80
+ v-else-if="option.type === INPUT_TYPES.DATE"
81
+ :class="option.class"
82
+ :form="form"
83
+ v-bind="getFieldBinding(option)"
84
+ :disabled-time="true"
85
+ v-on="option.on ?? {}"
86
+ />
87
+ <FormInputUploadFileClassic
88
+ v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
89
+ :class="option.class"
90
+ :form="form"
91
+ v-bind="getFieldBinding(option)"
92
+ v-on="option.on ?? {}"
93
+ />
81
94
  </template>
82
95
  </div>
83
96
  </template>
@@ -85,8 +98,32 @@
85
98
  import { type FormContext } from 'vee-validate'
86
99
  import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
87
100
 
88
- defineProps<{
89
- form?: FormContext
90
- options: IFormField[]
91
- }>()
101
+ const props = withDefaults(
102
+ defineProps<{
103
+ form?: FormContext
104
+ options: IFormField[]
105
+ orientation?: 'horizontal' | 'vertical'
106
+ class?: any
107
+ }>(),
108
+ {
109
+ class: 'space-y-4',
110
+ orientation: 'vertical',
111
+ }
112
+ )
113
+
114
+ const getFieldBinding = (field: IFormField) => {
115
+ if (props.orientation === 'horizontal') {
116
+ return {
117
+ ...field.props,
118
+ containerUi: {
119
+ ...field.props.containerUi,
120
+ wrapper:
121
+ 'lg:grid lg:grid-cols-3 lg:gap-4 lg:items-start ' + field.props.containerUi?.wrapper,
122
+ container: 'lg:col-span-2 ' + field.props.containerUi?.container,
123
+ },
124
+ }
125
+ }
126
+
127
+ return field.props
128
+ }
92
129
  </script>
package/dist/runtime/components/Form/types.d.ts CHANGED
@@ -33,19 +33,19 @@ export interface IFieldProps {
33
33
  size?: string;
34
34
  rules?: any;
35
35
  autoFocus?: boolean;
36
- class?: any;
37
- classInner?: any;
38
36
  placeholder?: string;
39
37
  isDisabled?: boolean;
40
38
  isReadonly?: boolean;
41
39
  isRequired?: boolean;
42
40
  help?: string;
43
41
  ui?: object | any;
42
+ containerUi?: object | any;
44
43
  }
45
44
  export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O> {
46
45
  type: I;
47
46
  component?: Component;
48
47
  class?: any;
48
+ ui?: object | any;
49
49
  isHide?: boolean;
50
50
  props: P;
51
51
  on?: O;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "1.4.14",
3
+ "version": "1.4.15",
4
4
  "repository": "https://gitlab.finema.co/finema/ui-kit",
5
5
  "license": "MIT",
6
6
  "author": "Finema Dev Core Team",