@finema/core 3.16.11 → 3.17.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.16.11",
+  "version": "3.17.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.16.11";
+const version = "3.17.0";
 
 const nuxtAppOptions = {
   head: {

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

@@ -2,6 +2,8 @@ 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";
+    menuLabelLines: number;
+    selectedLabelLines: number;
     searchInput: {
         placeholder?: string;
         icon?: string;

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

@@ -36,7 +36,7 @@
   })
 "
         >
-          <div class="flex items-center gap-x-2">
+          <div class="flex min-w-0 items-center gap-x-2">
             <component
               :is="selectedOption.component"
               v-if="
@@ -45,13 +45,21 @@
               v-bind="selectedOption.componentProps"
             />
             <span
-              :class="
+              :class="[
+  'min-w-0 flex-1',
   theme.selectedLabel({
     class: [ui?.selectedLabel]
   })
-"
+]"
+              :style="selectedLabelStyle"
             >
-              {{ selectedOption?.label ?? modelValue }}
+              <span
+                :class="[
+  props.selectedLabelLines && props.selectedLabelLines > 1 ? 'block min-w-0 break-words whitespace-normal' : 'block min-w-0 truncate'
+]"
+              >
+                {{ selectedOption?.label ?? modelValue }}
+              </span>
             </span>
             <component
               :is="selectedOption.component"
@@ -81,7 +89,7 @@
         />
         <div
           v-else
-          class="flex items-center gap-x-2"
+          class="flex min-w-0 items-center gap-x-2"
         >
           <Chip
             v-if="item?.chip"
@@ -105,7 +113,14 @@
             v-if="componentPosition === 'leading' && item?.component"
             v-bind="item?.componentProps"
           />
-          <span class="truncate">{{ item?.label ?? item?.value }}</span>
+          <span
+            :class="[
+  props.menuLabelLines && props.menuLabelLines > 1 ? 'min-w-0 break-words whitespace-normal' : 'truncate'
+]"
+            :style="menuLabelStyle"
+          >
+            {{ item?.label ?? item?.value }}
+          </span>
           <component
             :is="item?.component"
             v-if="componentPosition === 'trailing' && item?.component"
@@ -132,6 +147,8 @@ const props = defineProps({
   variant: { type: null, required: false },
   selectedIcon: { type: String, required: false },
   componentPosition: { type: String, required: false, default: "trailing" },
+  menuLabelLines: { type: Number, required: false, default: 1 },
+  selectedLabelLines: { type: Number, required: false, default: 1 },
   searchInput: { type: [Object, Boolean], required: false, default: void 0 },
   clearable: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
@@ -160,6 +177,26 @@ const {
 const selectedOption = computed(
   () => props.options.find((item) => item.value === value.value)
 );
+const menuLabelStyle = computed(() => {
+  const lines = props.menuLabelLines ?? 1;
+  if (lines <= 1) return void 0;
+  return {
+    display: "-webkit-box",
+    WebkitLineClamp: String(lines),
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden"
+  };
+});
+const selectedLabelStyle = computed(() => {
+  const lines = props.selectedLabelLines ?? 1;
+  if (lines <= 1) return void 0;
+  return {
+    display: "-webkit-box",
+    WebkitLineClamp: String(lines),
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden"
+  };
+});
 const onChange = (value2) => {
   handleChange(value2);
   emits("change", value2);

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

@@ -2,6 +2,8 @@ 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";
+    menuLabelLines: number;
+    selectedLabelLines: number;
     searchInput: {
         placeholder?: string;
         icon?: string;

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

@@ -15,6 +15,8 @@ export interface ISelectFieldProps extends IFieldProps {
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none' | undefined;
     selectedIcon?: string;
     componentPosition?: 'leading' | 'trailing';
+    menuLabelLines?: number;
+    selectedLabelLines?: number;
     searchInput?: {
         placeholder?: string;
         icon?: string;

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

@@ -2,6 +2,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";
+    menuLabelLines: number;
     searchInput: {
         placeholder?: string;
         icon?: string;

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

@@ -102,7 +102,7 @@
         />
         <div
           v-else
-          class="flex items-center gap-x-2"
+          class="flex min-w-0 items-center gap-x-2"
         >
           <Chip
             v-if="item?.chip"
@@ -126,7 +126,14 @@
             v-if="componentPosition === 'leading' && item?.component"
             v-bind="item?.componentProps"
           />
-          <span class="truncate">{{ item?.label ?? item?.value }}</span>
+          <span
+            :class="[
+  props.menuLabelLines && props.menuLabelLines > 1 ? 'min-w-0 break-words whitespace-normal' : 'truncate'
+]"
+            :style="menuLabelStyle"
+          >
+            {{ item?.label ?? item?.value }}
+          </span>
           <component
             :is="item?.component"
             v-if="componentPosition === 'trailing' && item?.component"
@@ -154,6 +161,8 @@ const props = defineProps({
   variant: { type: null, required: false },
   selectedIcon: { type: String, required: false },
   componentPosition: { type: String, required: false, default: "trailing" },
+  menuLabelLines: { type: Number, required: false, default: 1 },
+  selectedLabelLines: { type: Number, required: false },
   searchInput: { type: [Object, Boolean], required: false, default: void 0 },
   clearable: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
@@ -184,6 +193,16 @@ const optionByValue = computed(
 );
 const getOption = (_value) => optionByValue.value.get(_value);
 const componentPosition = computed(() => props.componentPosition);
+const menuLabelStyle = computed(() => {
+  const lines = props.menuLabelLines ?? 1;
+  if (lines <= 1) return void 0;
+  return {
+    display: "-webkit-box",
+    WebkitLineClamp: String(lines),
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden"
+  };
+});
 const onChange = (value2) => {
   handleChange(value2);
   emits("change", value2);

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

@@ -2,6 +2,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";
+    menuLabelLines: number;
     searchInput: {
         placeholder?: string;
         icon?: string;

package/package.json

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