@finema/core 1.4.13 → 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 (12) 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 -77
  5. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +36 -0
  6. package/dist/runtime/components/Form/InputUploadFileClassic/types.d.ts +13 -0
  7. package/dist/runtime/components/Form/InputUploadFileClassic/types.mjs +0 -0
  8. package/dist/runtime/components/Form/types.d.ts +6 -4
  9. package/dist/runtime/components/Form/types.mjs +1 -0
  10. package/dist/runtime/components/OTPInput.vue +4 -1
  11. package/dist/runtime/ui.css +0 -14
  12. 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.13",
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.13";
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,77 +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
- </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
+ />
75
94
  </template>
76
95
  </div>
77
96
  </template>
@@ -79,8 +98,32 @@
79
98
  import { type FormContext } from 'vee-validate'
80
99
  import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
81
100
 
82
- defineProps<{
83
- form?: FormContext
84
- options: IFormField[]
85
- }>()
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
+ }
86
129
  </script>
package/dist/runtime/components/Form/InputUploadFileClassic/index.vue ADDED
@@ -0,0 +1,36 @@
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <UInput
4
+ type="file"
5
+ trailing
6
+ :loading-icon="loadingIcon"
7
+ :icon="icon"
8
+ :leading-icon="leadingIcon"
9
+ :trailing-icon="trailingIcon"
10
+ :disabled="wrapperProps.isDisabled"
11
+ :name="name"
12
+ :placeholder="wrapperProps.placeholder"
13
+ :autofocus="!!autoFocus"
14
+ :readonly="isReadonly"
15
+ :accept="accept"
16
+ :ui="ui"
17
+ @change="handleChange"
18
+ />
19
+ </FieldWrapper>
20
+ </template>
21
+ <script lang="ts" setup>
22
+ import { useFieldHOC } from '#core/composables/useForm'
23
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
24
+ import { type IUploadFileClassicFieldProps } from '#core/components/Form/InputUploadFileClassic/types'
25
+
26
+ const props = withDefaults(defineProps<IUploadFileClassicFieldProps>(), {})
27
+
28
+ const { value, wrapperProps } = useFieldHOC<File | undefined>(props)
29
+
30
+ const emits = defineEmits(['change'])
31
+
32
+ const handleChange = (e: Event) => {
33
+ value.value = (e.target as HTMLInputElement).files?.[0]
34
+ emits('change', e)
35
+ }
36
+ </script>
package/dist/runtime/components/Form/InputUploadFileClassic/types.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
2
+ export interface IUploadFileClassicFieldProps extends IFieldProps {
3
+ selectFileLabel?: string;
4
+ accept?: string[] | string;
5
+ maxSize?: number;
6
+ leadingIcon?: string;
7
+ trailingIcon?: string;
8
+ icon?: string;
9
+ loadingIcon?: string;
10
+ }
11
+ export type IUploadFileClassicField = IFormFieldBase<INPUT_TYPES.UPLOAD_FILE_CLASSIC, IUploadFileClassicFieldProps, {
12
+ change?: (value: Event) => void;
13
+ }>;
package/dist/runtime/components/Form/types.d.ts CHANGED
@@ -8,6 +8,7 @@ import { type ISelectField } from '#core/components/Form/InputSelect/types';
8
8
  import { type IToggleField } from '#core/components/Form/InputToggle/types';
9
9
  import { type ITextareaField } from '#core/components/Form/InputTextarea/types';
10
10
  import { type IDateTimeField } from '#core/components/Form/InputDateTime/date_time_field.types';
11
+ import { type IUploadFileClassicField } from '#core/components/Form/InputUploadFileClassic/types';
11
12
  export declare const enum INPUT_TYPES {
12
13
  TEXT = "TEXT",
13
14
  TEXTAREA = "TEXTAREA",
@@ -19,7 +20,8 @@ export declare const enum INPUT_TYPES {
19
20
  RADIO = "RADIO",
20
21
  CHECKBOX = "CHECKBOX",
21
22
  DATE_TIME = "DATE_TIME",
22
- DATE = "DATE"
23
+ DATE = "DATE",
24
+ UPLOAD_FILE_CLASSIC = "UPLOAD_FILE_CLASSIC"
23
25
  }
24
26
  export interface IFieldProps {
25
27
  form?: FormContext;
@@ -31,21 +33,21 @@ export interface IFieldProps {
31
33
  size?: string;
32
34
  rules?: any;
33
35
  autoFocus?: boolean;
34
- class?: any;
35
- classInner?: any;
36
36
  placeholder?: string;
37
37
  isDisabled?: boolean;
38
38
  isReadonly?: boolean;
39
39
  isRequired?: boolean;
40
40
  help?: string;
41
41
  ui?: object | any;
42
+ containerUi?: object | any;
42
43
  }
43
44
  export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O> {
44
45
  type: I;
45
46
  component?: Component;
46
47
  class?: any;
48
+ ui?: object | any;
47
49
  isHide?: boolean;
48
50
  props: P;
49
51
  on?: O;
50
52
  }
51
- export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField;
53
+ export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField;
package/dist/runtime/components/Form/types.mjs CHANGED
@@ -10,5 +10,6 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
10
10
  INPUT_TYPES2["CHECKBOX"] = "CHECKBOX";
11
11
  INPUT_TYPES2["DATE_TIME"] = "DATE_TIME";
12
12
  INPUT_TYPES2["DATE"] = "DATE";
13
+ INPUT_TYPES2["UPLOAD_FILE_CLASSIC"] = "UPLOAD_FILE_CLASSIC";
13
14
  return INPUT_TYPES2;
14
15
  })(INPUT_TYPES || {});
package/dist/runtime/components/OTPInput.vue CHANGED
@@ -49,7 +49,10 @@ const props = defineProps({
49
49
  inputClass: {
50
50
  type: String,
51
51
  default:
52
- 'h-12 w-12 relative flex flex-col items-center justify-center text-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input rounded-md placeholder-gray-400 text-sm px-3.5 py-2.5 shadow-sm bg-white text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-500',
52
+ 'h-12 w-12 relative flex flex-col items-center justify-center text-center ' +
53
+ 'disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input ' +
54
+ 'rounded-md placeholder-gray-400 text-sm px-3.5 py-2.5 shadow-sm bg-white text-gray-900 ' +
55
+ 'ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-500',
53
56
  },
54
57
  })
55
58
 
package/dist/runtime/ui.css CHANGED
@@ -1,19 +1,5 @@
1
1
  :root {
2
- --color-primary-50: 248 248 255;
3
- --color-primary-100: 232 239 253;
4
- --color-primary-200: 190 227 248;
5
- --color-primary-300: 144 205 244;
6
- --color-primary-400: 99 179 237;
7
- --color-primary-500: 54 117 251;
8
- --color-primary-600: 0 104 254;
9
- --color-primary-700: 43 108 176;
10
- --color-primary-800: 44 82 130;
11
- --color-primary-900: 32 36 62;
12
- --color-primary-950: 32 36 62;
13
- --color-primary-DEFAULT: 54 117 251;
14
-
15
2
  --dp-font-family: inherit !important;
16
-
17
3
  }
18
4
 
19
5
  .dp__theme_light {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "1.4.13",
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",