@finema/finework-layer 0.2.135 → 0.2.137

package/.playground/app/pages/layout-admin.vue

@@ -49,22 +49,30 @@
       color="neutral"
       icon="ph:trash"
     />
-    <InfoItemList
-      vertical
-      inline
-      label-width="150"
-      :items="[
-        {
-          label: 'Status:',
-          value: 'Active',
-        },
-        {
-          label: '12',
-          value: '<p>123123</p>',
-          type: 'html',
-        },
-      ]"
-    />
+    <Card>
+      <InfoItemList
+        :inline="true"
+        :vertical="true"
+        class="mb-6"
+        label-width="150"
+        :items="[
+          {
+            label: 'Status:',
+            value: `ActiveasdasdsadasdadasdasdadadsadsadasdsadActiveasdasdsad
+            asdadasdasdadadsadsadasdsadActiveasdasdsadasdadasdasdadadsadsadasdsad`,
+          },
+          {
+            label: '12asdasdasdasdasd',
+            value: '<p>123123</p>',
+            type: 'link',
+            linkProps: {
+              to: 'https://www.google.com',
+              target: '_blank',
+            },
+          },
+        ]"
+      />
+    </Card>
     <PortalApp />
   </LayoutAdmin>
 </template>

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.2.137](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.136...0.2.137) (2026-02-11)
+
+### Bug Fixes
+
+* infoitemlist type image ([de07039](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/de07039c52f30cba02699155eff027cd2d8bee44))
+
+## [0.2.136](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.135...0.2.136) (2026-02-11)
+
+### Features
+
+* update InfoItemList to support link type and improve layout in layout-admin ([0ea8595](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/0ea8595496748f9815103055ec1f934f59adf364))
+
 ## [0.2.135](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.134...0.2.135) (2026-02-11)
 
 ### Bug Fixes

package/app/components/InfoItemList.vue

@@ -30,6 +30,7 @@
               'mb-1 block text-sm text-gray-500': !inline,
               'mr-2 text-gray-500': inline,
               'font-bold text-black!': item.label && titleBold,
+              'flex-shrink-0': inline,
             },
           ]"
           :style="inline && labelWidth ? { width: `${labelWidth}px` } : undefined"
@@ -51,7 +52,12 @@
         />
         <div
           v-else
-          class="break-words whitespace-pre-line text-gray-900"
+          :class="[
+            'break-words whitespace-pre-line text-gray-900',
+            {
+              'min-w-0 flex-1': inline,
+            },
+          ]"
         >
           <span
             v-if="shouldTruncateText(item)"
@@ -89,6 +95,12 @@
             :label="item.label"
             class="pointer-events-none"
           />
+          <img
+            v-else-if="item.type === TYPE_INFO_ITEM.IMAGE && item.value"
+            :src="typeof item.value === 'string' ? item.value : item.value?.url"
+            :alt="item.label"
+            class="max-w-md rounded-lg object-cover"
+          />
           <span
             v-else-if="!shouldTruncateText(item) && item.type === TYPE_INFO_ITEM.HTML"
             :class="[
@@ -98,6 +110,18 @@
             ]"
             v-html="getValue(item)"
           />
+          <NuxtLink
+            v-else-if="item.type === TYPE_INFO_ITEM.LINK && item.linkProps"
+            v-bind="item.linkProps"
+            :class="[
+              'text-primary hover:underline',
+              {
+                'font-bold': item.label && !titleBold,
+              },
+            ]"
+          >
+            {{ item.value || '-' }}
+          </NuxtLink>
           <span
             v-else-if="!shouldTruncateText(item)"
             :class="[
@@ -116,6 +140,8 @@
 
 <script lang="ts" setup>
 import { reactive } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import NuxtLink from '#app/components/nuxt-link'
 
 enum TYPE_INFO_ITEM {
   TEXT = 'text',
@@ -125,6 +151,8 @@ enum TYPE_INFO_ITEM {
   DATE_TIME = 'date_time',
   BOOLEAN = 'boolean',
   HTML = 'html',
+  LINK = 'link',
+  IMAGE = 'image',
 }
 
 defineProps<{
@@ -138,6 +166,7 @@ defineProps<{
     type?: TYPE_INFO_ITEM
     customClass?: string
     hide?: boolean
+    linkProps?: ComponentProps<typeof NuxtLink>
   }>
   vertical?: boolean
   inline?: boolean

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finema/finework-layer",
   "type": "module",
-  "version": "0.2.135",
+  "version": "0.2.137",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground -o",