@finema/core 3.14.9 → 3.15.0

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 (10) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +1 -1
  3. package/dist/runtime/components/Form/InputSelect/index.d.vue.ts +1 -0
  4. package/dist/runtime/components/Form/InputSelect/index.vue +31 -14
  5. package/dist/runtime/components/Form/InputSelect/index.vue.d.ts +1 -0
  6. package/dist/runtime/components/Form/InputSelect/types.d.ts +5 -1
  7. package/dist/runtime/components/Form/InputSelectMultiple/index.d.vue.ts +1 -0
  8. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +50 -21
  9. package/dist/runtime/components/Form/InputSelectMultiple/index.vue.d.ts +1 -0
  10. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "3.14.9",
3
+ "version": "3.15.0",
4
4
  "configKey": "core",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
package/dist/module.mjs CHANGED
@@ -4,7 +4,7 @@ import * as lodash from 'lodash-es';
4
4
  import * as theme from '../dist/runtime/theme/index.js';
5
5
 
6
6
  const name = "@finema/core";
7
- const version = "3.14.9";
7
+ const version = "3.15.0";
8
8
 
9
9
  const nuxtAppOptions = {
10
10
  head: {
package/dist/runtime/components/Form/InputSelect/index.d.vue.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { ISelectFieldProps } from '#core/components/Form/InputSelect/types';
2
2
  declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
3
3
  clearIcon: string;
4
+ componentPosition: "leading" | "trailing";
4
5
  searchInput: {
5
6
  placeholder?: string;
6
7
  icon?: string;
package/dist/runtime/components/Form/InputSelect/index.vue CHANGED
@@ -29,23 +29,39 @@
29
29
  />
30
30
  <div
31
31
  v-if="value"
32
- :class="theme.selectedWrapper({
33
- class: [ui?.selectedWrapper]
34
- })"
32
+ :class="
33
+ theme.selectedWrapper({
34
+ class: [ui?.selectedWrapper]
35
+ })
36
+ "
35
37
  >
38
+ <component
39
+ :is="selectedOption.component"
40
+ v-if="componentPosition === 'leading' && selectedOption?.component"
41
+ v-bind="selectedOption.componentProps"
42
+ />
36
43
  <span
37
- :class="theme.selectedLabel({
38
- class: [ui?.selectedLabel]
39
- })"
44
+ :class="
45
+ theme.selectedLabel({
46
+ class: [ui?.selectedLabel]
47
+ })
48
+ "
40
49
  >
41
- {{ options.find((item) => item.value === modelValue)?.label || modelValue }}
50
+ {{ selectedOption?.label ?? modelValue }}
42
51
  </span>
52
+ <component
53
+ :is="selectedOption.component"
54
+ v-if="componentPosition === 'trailing' && selectedOption?.component"
55
+ v-bind="selectedOption.componentProps"
56
+ />
43
57
  <Icon
44
58
  v-if="clearable"
45
59
  :name="clearIcon"
46
- :class="theme.clearIcon({
47
- class: [ui?.clearIcon]
48
- })"
60
+ :class="
61
+ theme.clearIcon({
62
+ class: [ui?.clearIcon]
63
+ })
64
+ "
49
65
  @click.stop="onChange(void 0)"
50
66
  />
51
67
  </div>
@@ -60,16 +76,14 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
60
76
  import { useFieldHOC } from "#core/composables/useForm";
61
77
  import { selectMenuTheme } from "#core/theme/selectMenu";
62
78
  import { useUiConfig } from "#core/composables/useConfig";
63
- const emits = defineEmits([
64
- "change",
65
- "search"
66
- ]);
79
+ const emits = defineEmits(["change", "search"]);
67
80
  const props = defineProps({
68
81
  icon: { type: String, required: false },
69
82
  ignoreFilter: { type: Boolean, required: false },
70
83
  trailingIcon: { type: String, required: false },
71
84
  clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
72
85
  selectedIcon: { type: String, required: false },
86
+ componentPosition: { type: String, required: false, default: "trailing" },
73
87
  searchInput: { type: [Object, Boolean], required: false, default: void 0 },
74
88
  clearable: { type: Boolean, required: false },
75
89
  loading: { type: Boolean, required: false },
@@ -95,6 +109,9 @@ const {
95
109
  wrapperProps,
96
110
  handleChange
97
111
  } = useFieldHOC(props);
112
+ const selectedOption = computed(
113
+ () => props.options.find((item) => item.value === value.value)
114
+ );
98
115
  const onChange = (value2) => {
99
116
  handleChange(value2);
100
117
  emits("change", value2);
package/dist/runtime/components/Form/InputSelect/index.vue.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { ISelectFieldProps } from '#core/components/Form/InputSelect/types';
2
2
  declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
3
3
  clearIcon: string;
4
+ componentPosition: "leading" | "trailing";
4
5
  searchInput: {
5
6
  placeholder?: string;
6
7
  icon?: string;
package/dist/runtime/components/Form/InputSelect/types.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
2
+ import type { Component } from 'vue';
2
3
  import type { SelectMenuItem } from '@nuxt/ui';
3
- export type SelectOption = SelectMenuItem & {
4
+ export type SelectOption = (SelectMenuItem & Record<string, any>) & {
4
5
  label?: string;
5
6
  value?: any;
7
+ component?: Component;
8
+ componentProps?: Record<string, any>;
6
9
  };
7
10
  export interface ISelectFieldProps extends IFieldProps {
8
11
  icon?: string;
@@ -10,6 +13,7 @@ export interface ISelectFieldProps extends IFieldProps {
10
13
  trailingIcon?: string;
11
14
  clearIcon?: string;
12
15
  selectedIcon?: string;
16
+ componentPosition?: 'leading' | 'trailing';
13
17
  searchInput?: {
14
18
  placeholder?: string;
15
19
  icon?: string;
package/dist/runtime/components/Form/InputSelectMultiple/index.d.vue.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { ISelectFieldProps } from '#core/components/Form/InputSelect/types';
2
2
  declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
3
3
  clearIcon: string;
4
+ componentPosition: "leading" | "trailing";
4
5
  searchInput: {
5
6
  placeholder?: string;
6
7
  icon?: string;
package/dist/runtime/components/Form/InputSelectMultiple/index.vue CHANGED
@@ -20,16 +20,20 @@
20
20
  <template #default="{ modelValue, ui: selectMenuUi }">
21
21
  <div
22
22
  v-if="!ArrayHelper.isEmpty(value)"
23
- :class="theme.tagsWrapper({
24
- class: [ui?.tagsWrapper]
25
- })"
23
+ :class="
24
+ theme.tagsWrapper({
25
+ class: [ui?.tagsWrapper]
26
+ })
27
+ "
26
28
  >
27
29
  <div
28
30
  v-for="_value in ArrayHelper.toArray(modelValue)"
29
31
  :key="_value"
30
- :class="theme.tagsItem({
31
- class: [ui?.tagsItem]
32
- })"
32
+ :class="
33
+ theme.tagsItem({
34
+ class: [ui?.tagsItem]
35
+ })
36
+ "
33
37
  >
34
38
  <Chip
35
39
  v-if="options.find((item) => item.value === _value)?.chip"
@@ -50,19 +54,39 @@
50
54
  :class="selectMenuUi.itemLeadingAvatar()"
51
55
  size="2xs"
52
56
  />
57
+ <component
58
+ :is="getOption(_value)?.component"
59
+ v-if="
60
+ componentPosition === 'leading' && getOption(_value)?.component
61
+ "
62
+ v-bind="getOption(_value)?.componentProps"
63
+ />
53
64
  <div
54
- :class="theme.tagsItemText({
55
- class: [ui?.tagsItemText]
56
- })"
65
+ :class="
66
+ theme.tagsItemText({
67
+ class: [ui?.tagsItemText]
68
+ })
69
+ "
57
70
  >
58
- {{ options.find((item) => item.value === _value)?.label || _value }}
71
+ {{ getOption(_value)?.label ?? _value }}
72
+ <component
73
+ :is="getOption(_value)?.component"
74
+ v-if="
75
+ componentPosition === 'trailing' && getOption(_value)?.component
76
+ "
77
+ v-bind="getOption(_value)?.componentProps"
78
+ />
59
79
  <Icon
60
- :name="theme.tagsItemDeleteIcon({
61
- class: [ui?.tagsItemDeleteIcon]
62
- })"
63
- :class="theme.tagsItemDelete({
64
- class: [ui?.tagsItemDelete]
65
- })"
80
+ :name="
81
+ theme.tagsItemDeleteIcon({
82
+ class: [ui?.tagsItemDeleteIcon]
83
+ })
84
+ "
85
+ :class="
86
+ theme.tagsItemDelete({
87
+ class: [ui?.tagsItemDelete]
88
+ })
89
+ "
66
90
  @click.stop="handleDelete(_value)"
67
91
  />
68
92
  </div>
@@ -80,16 +104,14 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
80
104
  import { useFieldHOC } from "#core/composables/useForm";
81
105
  import { useUiConfig } from "#core/composables/useConfig";
82
106
  import { selectMenuTheme } from "#core/theme/selectMenu";
83
- const emits = defineEmits([
84
- "change",
85
- "search"
86
- ]);
107
+ const emits = defineEmits(["change", "search"]);
87
108
  const props = defineProps({
88
109
  icon: { type: String, required: false },
89
110
  ignoreFilter: { type: Boolean, required: false },
90
111
  trailingIcon: { type: String, required: false },
91
112
  clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
92
113
  selectedIcon: { type: String, required: false },
114
+ componentPosition: { type: String, required: false, default: "trailing" },
93
115
  searchInput: { type: [Object, Boolean], required: false, default: void 0 },
94
116
  clearable: { type: Boolean, required: false },
95
117
  loading: { type: Boolean, required: false },
@@ -115,6 +137,11 @@ const {
115
137
  wrapperProps,
116
138
  handleChange
117
139
  } = useFieldHOC(props);
140
+ const optionByValue = computed(
141
+ () => new Map(props.options.map((opt) => [opt.value, opt]))
142
+ );
143
+ const getOption = (_value) => optionByValue.value.get(_value);
144
+ const componentPosition = computed(() => props.componentPosition);
118
145
  const onChange = (value2) => {
119
146
  handleChange(value2);
120
147
  emits("change", value2);
@@ -123,6 +150,8 @@ const onSearch = (value2) => {
123
150
  emits("search", value2);
124
151
  };
125
152
  const handleDelete = (_value) => {
126
- value.value = ArrayHelper.toArray(value.value).filter((item) => item !== _value);
153
+ value.value = ArrayHelper.toArray(value.value).filter(
154
+ (item) => item !== _value
155
+ );
127
156
  };
128
157
  </script>
package/dist/runtime/components/Form/InputSelectMultiple/index.vue.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { ISelectFieldProps } from '#core/components/Form/InputSelect/types';
2
2
  declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
3
3
  clearIcon: string;
4
+ componentPosition: "leading" | "trailing";
4
5
  searchInput: {
5
6
  placeholder?: string;
6
7
  icon?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "3.14.9",
3
+ "version": "3.15.0",
4
4
  "repository": "https://gitlab.finema.co/finema/ui-kit",
5
5
  "license": "MIT",
6
6
  "author": "Finema Dev Core Team",