@finema/core 3.14.8 → 3.15.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.14.8",
+  "version": "3.15.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -4,7 +4,7 @@ import * as lodash from 'lodash-es';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "3.14.8";
+const version = "3.15.0";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/Form/InputSelect/index.d.vue.ts

@@ -1,6 +1,7 @@
 import type { ISelectFieldProps } from '#core/components/Form/InputSelect/types';
 declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     clearIcon: string;
+    componentPosition: "leading" | "trailing";
     searchInput: {
         placeholder?: string;
         icon?: string;

package/dist/runtime/components/Form/InputSelect/index.vue

@@ -29,23 +29,39 @@
         />
         <div
           v-if="value"
-          :class="theme.selectedWrapper({
-  class: [ui?.selectedWrapper]
-})"
+          :class="
+  theme.selectedWrapper({
+    class: [ui?.selectedWrapper]
+  })
+"
         >
+          <component
+            :is="selectedOption.component"
+            v-if="componentPosition === 'leading' && selectedOption?.component"
+            v-bind="selectedOption.componentProps"
+          />
           <span
-            :class="theme.selectedLabel({
-  class: [ui?.selectedLabel]
-})"
+            :class="
+  theme.selectedLabel({
+    class: [ui?.selectedLabel]
+  })
+"
           >
-            {{ options.find((item) => item.value === modelValue)?.label || modelValue }}
+            {{ selectedOption?.label ?? modelValue }}
           </span>
+          <component
+            :is="selectedOption.component"
+            v-if="componentPosition === 'trailing' && selectedOption?.component"
+            v-bind="selectedOption.componentProps"
+          />
           <Icon
             v-if="clearable"
             :name="clearIcon"
-            :class="theme.clearIcon({
-  class: [ui?.clearIcon]
-})"
+            :class="
+  theme.clearIcon({
+    class: [ui?.clearIcon]
+  })
+"
             @click.stop="onChange(void 0)"
           />
         </div>
@@ -60,16 +76,14 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { useFieldHOC } from "#core/composables/useForm";
 import { selectMenuTheme } from "#core/theme/selectMenu";
 import { useUiConfig } from "#core/composables/useConfig";
-const emits = defineEmits([
-  "change",
-  "search"
-]);
+const emits = defineEmits(["change", "search"]);
 const props = defineProps({
   icon: { type: String, required: false },
   ignoreFilter: { type: Boolean, required: false },
   trailingIcon: { type: String, required: false },
   clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
   selectedIcon: { type: String, required: false },
+  componentPosition: { type: String, required: false, default: "trailing" },
   searchInput: { type: [Object, Boolean], required: false, default: void 0 },
   clearable: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
@@ -95,6 +109,9 @@ const {
   wrapperProps,
   handleChange
 } = useFieldHOC(props);
+const selectedOption = computed(
+  () => props.options.find((item) => item.value === value.value)
+);
 const onChange = (value2) => {
   handleChange(value2);
   emits("change", value2);

package/dist/runtime/components/Form/InputSelect/index.vue.d.ts

@@ -1,6 +1,7 @@
 import type { ISelectFieldProps } from '#core/components/Form/InputSelect/types';
 declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     clearIcon: string;
+    componentPosition: "leading" | "trailing";
     searchInput: {
         placeholder?: string;
         icon?: string;

package/dist/runtime/components/Form/InputSelect/types.d.ts

@@ -1,8 +1,11 @@
 import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
+import type { Component } from 'vue';
 import type { SelectMenuItem } from '@nuxt/ui';
-export type SelectOption = SelectMenuItem & {
+export type SelectOption = (SelectMenuItem & Record<string, any>) & {
     label?: string;
     value?: any;
+    component?: Component;
+    componentProps?: Record<string, any>;
 };
 export interface ISelectFieldProps extends IFieldProps {
     icon?: string;
@@ -10,6 +13,7 @@ export interface ISelectFieldProps extends IFieldProps {
     trailingIcon?: string;
     clearIcon?: string;
     selectedIcon?: string;
+    componentPosition?: 'leading' | 'trailing';
     searchInput?: {
         placeholder?: string;
         icon?: string;

package/dist/runtime/components/Form/InputSelectMultiple/index.d.vue.ts

@@ -1,6 +1,7 @@
 import type { ISelectFieldProps } from '#core/components/Form/InputSelect/types';
 declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     clearIcon: string;
+    componentPosition: "leading" | "trailing";
     searchInput: {
         placeholder?: string;
         icon?: string;

package/dist/runtime/components/Form/InputSelectMultiple/index.vue

@@ -20,16 +20,20 @@
       <template #default="{ modelValue, ui: selectMenuUi }">
         <div
           v-if="!ArrayHelper.isEmpty(value)"
-          :class="theme.tagsWrapper({
-  class: [ui?.tagsWrapper]
-})"
+          :class="
+  theme.tagsWrapper({
+    class: [ui?.tagsWrapper]
+  })
+"
         >
           <div
             v-for="_value in ArrayHelper.toArray(modelValue)"
             :key="_value"
-            :class="theme.tagsItem({
-  class: [ui?.tagsItem]
-})"
+            :class="
+  theme.tagsItem({
+    class: [ui?.tagsItem]
+  })
+"
           >
             <Chip
               v-if="options.find((item) => item.value === _value)?.chip"
@@ -50,19 +54,39 @@
               :class="selectMenuUi.itemLeadingAvatar()"
               size="2xs"
             />
+            <component
+              :is="getOption(_value)?.component"
+              v-if="
+  componentPosition === 'leading' && getOption(_value)?.component
+"
+              v-bind="getOption(_value)?.componentProps"
+            />
             <div
-              :class="theme.tagsItemText({
-  class: [ui?.tagsItemText]
-})"
+              :class="
+  theme.tagsItemText({
+    class: [ui?.tagsItemText]
+  })
+"
             >
-              {{ options.find((item) => item.value === _value)?.label || _value }}
+              {{ getOption(_value)?.label ?? _value }}
+              <component
+                :is="getOption(_value)?.component"
+                v-if="
+  componentPosition === 'trailing' && getOption(_value)?.component
+"
+                v-bind="getOption(_value)?.componentProps"
+              />
               <Icon
-                :name="theme.tagsItemDeleteIcon({
-  class: [ui?.tagsItemDeleteIcon]
-})"
-                :class="theme.tagsItemDelete({
-  class: [ui?.tagsItemDelete]
-})"
+                :name="
+  theme.tagsItemDeleteIcon({
+    class: [ui?.tagsItemDeleteIcon]
+  })
+"
+                :class="
+  theme.tagsItemDelete({
+    class: [ui?.tagsItemDelete]
+  })
+"
                 @click.stop="handleDelete(_value)"
               />
             </div>
@@ -80,16 +104,14 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { useFieldHOC } from "#core/composables/useForm";
 import { useUiConfig } from "#core/composables/useConfig";
 import { selectMenuTheme } from "#core/theme/selectMenu";
-const emits = defineEmits([
-  "change",
-  "search"
-]);
+const emits = defineEmits(["change", "search"]);
 const props = defineProps({
   icon: { type: String, required: false },
   ignoreFilter: { type: Boolean, required: false },
   trailingIcon: { type: String, required: false },
   clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
   selectedIcon: { type: String, required: false },
+  componentPosition: { type: String, required: false, default: "trailing" },
   searchInput: { type: [Object, Boolean], required: false, default: void 0 },
   clearable: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
@@ -115,6 +137,11 @@ const {
   wrapperProps,
   handleChange
 } = useFieldHOC(props);
+const optionByValue = computed(
+  () => new Map(props.options.map((opt) => [opt.value, opt]))
+);
+const getOption = (_value) => optionByValue.value.get(_value);
+const componentPosition = computed(() => props.componentPosition);
 const onChange = (value2) => {
   handleChange(value2);
   emits("change", value2);
@@ -123,6 +150,8 @@ const onSearch = (value2) => {
   emits("search", value2);
 };
 const handleDelete = (_value) => {
-  value.value = ArrayHelper.toArray(value.value).filter((item) => item !== _value);
+  value.value = ArrayHelper.toArray(value.value).filter(
+    (item) => item !== _value
+  );
 };
 </script>

package/dist/runtime/components/Form/InputSelectMultiple/index.vue.d.ts

@@ -1,6 +1,7 @@
 import type { ISelectFieldProps } from '#core/components/Form/InputSelect/types';
 declare const __VLS_export: import("vue").DefineComponent<ISelectFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     clearIcon: string;
+    componentPosition: "leading" | "trailing";
     searchInput: {
         placeholder?: string;
         icon?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.14.8",
+  "version": "3.15.0",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",