@finema/core 3.15.1 → 3.16.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.15.1",
+  "version": "3.16.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.15.1";
+const version = "3.16.0";
 
 const nuxtAppOptions = {
   head: {

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

@@ -13,15 +13,15 @@
       :icon="icon"
       :ui="ui"
       :ignore-filter="ignoreFilter"
-      :leading-icon="options.find((item) => item.value === value)?.icon"
-      :avatar="options.find((item) => item.value === value)?.avatar"
+      :leading-icon="options.find((item2) => item2.value === value)?.icon"
+      :avatar="options.find((item2) => item2.value === value)?.avatar"
       @update:modelValue="onChange"
       @update:searchTerm="onSearch"
     >
       <template #default="{ modelValue, ui: selectMenuUi }">
         <Chip
-          v-if="options.find((item) => item.value === modelValue)?.chip"
-          v-bind="options.find((item) => item.value === modelValue)?.chip"
+          v-if="options.find((item2) => item2.value === modelValue)?.chip"
+          v-bind="options.find((item2) => item2.value === modelValue)?.chip"
           inset
           standalone
           :size="selectMenuUi.itemLeadingChipSize()"
@@ -35,25 +35,31 @@
   })
 "
         >
-          <component
-            :is="selectedOption.component"
-            v-if="componentPosition === 'leading' && selectedOption?.component"
-            v-bind="selectedOption.componentProps"
-          />
-          <span
-            :class="
+          <div class="flex items-center gap-x-2">
+            <component
+              :is="selectedOption.component"
+              v-if="
+  componentPosition === 'leading' && selectedOption?.component
+"
+              v-bind="selectedOption.componentProps"
+            />
+            <span
+              :class="
   theme.selectedLabel({
     class: [ui?.selectedLabel]
   })
 "
-          >
-            {{ selectedOption?.label ?? modelValue }}
-          </span>
-          <component
-            :is="selectedOption.component"
-            v-if="componentPosition === 'trailing' && selectedOption?.component"
-            v-bind="selectedOption.componentProps"
-          />
+            >
+              {{ selectedOption?.label ?? modelValue }}
+            </span>
+            <component
+              :is="selectedOption.component"
+              v-if="
+  componentPosition === 'trailing' && selectedOption?.component
+"
+              v-bind="selectedOption.componentProps"
+            />
+          </div>
           <Icon
             v-if="clearable"
             :name="clearIcon"
@@ -66,6 +72,46 @@
           />
         </div>
       </template>
+
+      <template #item="{ item }">
+        <div
+          v-if="item?.type === 'separator'"
+          class="my-1 h-px bg-gray-200"
+        />
+        <div
+          v-else
+          class="flex items-center gap-x-2"
+        >
+          <Chip
+            v-if="item?.chip"
+            v-bind="item.chip"
+            inset
+            standalone
+            size="2xs"
+          />
+          <Icon
+            v-if="item?.icon"
+            :name="item.icon"
+            class="size-4"
+          />
+          <Avatar
+            v-if="item?.avatar"
+            v-bind="item.avatar"
+            size="2xs"
+          />
+          <component
+            :is="item?.component"
+            v-if="componentPosition === 'leading' && item?.component"
+            v-bind="item?.componentProps"
+          />
+          <span class="truncate">{{ item?.label ?? item?.value }}</span>
+          <component
+            :is="item?.component"
+            v-if="componentPosition === 'trailing' && item?.component"
+            v-bind="item?.componentProps"
+          />
+        </div>
+      </template>
     </SelectMenu>
   </FieldWrapper>
 </template>

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

@@ -36,21 +36,21 @@
 "
           >
             <Chip
-              v-if="options.find((item) => item.value === _value)?.chip"
-              v-bind="options.find((item) => item.value === _value)?.chip"
+              v-if="options.find((item2) => item2.value === _value)?.chip"
+              v-bind="options.find((item2) => item2.value === _value)?.chip"
               inset
               standalone
               :size="selectMenuUi.itemLeadingChipSize()"
               class="p-1"
             />
             <Icon
-              v-if="options.find((item) => item.value === _value)?.icon"
-              :name="options.find((item) => item.value === _value)?.icon"
+              v-if="options.find((item2) => item2.value === _value)?.icon"
+              :name="options.find((item2) => item2.value === _value)?.icon"
               class="size-4"
             />
             <Avatar
-              v-if="options.find((item) => item.value === _value)?.avatar"
-              v-bind="options.find((item) => item.value === _value)?.avatar"
+              v-if="options.find((item2) => item2.value === _value)?.avatar"
+              v-bind="options.find((item2) => item2.value === _value)?.avatar"
               :class="selectMenuUi.itemLeadingAvatar()"
               size="2xs"
             />
@@ -93,6 +93,46 @@
           </div>
         </div>
       </template>
+
+      <template #item="{ item }">
+        <div
+          v-if="item?.type === 'separator'"
+          class="my-1 h-px bg-gray-200"
+        />
+        <div
+          v-else
+          class="flex items-center gap-x-2"
+        >
+          <Chip
+            v-if="item?.chip"
+            v-bind="item.chip"
+            inset
+            standalone
+            size="2xs"
+          />
+          <Icon
+            v-if="item?.icon"
+            :name="item.icon"
+            class="size-4"
+          />
+          <Avatar
+            v-if="item?.avatar"
+            v-bind="item.avatar"
+            size="2xs"
+          />
+          <component
+            :is="item?.component"
+            v-if="componentPosition === 'leading' && item?.component"
+            v-bind="item?.componentProps"
+          />
+          <span class="truncate">{{ item?.label ?? item?.value }}</span>
+          <component
+            :is="item?.component"
+            v-if="componentPosition === 'trailing' && item?.component"
+            v-bind="item?.componentProps"
+          />
+        </div>
+      </template>
     </SelectMenu>
   </FieldWrapper>
 </template>

package/dist/runtime/components/Table/Base.d.vue.ts

@@ -3,16 +3,17 @@ import { tableTheme } from '#core/theme/table';
 type __VLS_Props = {
     options: ITableOptions<any> & ISimpleTableOptions<any>;
     ui?: (typeof tableTheme)['slots'];
+    to?: string | ((row: any) => any);
 };
-declare var __VLS_22: {}, __VLS_29: {}, __VLS_31: {}, __VLS_45: any, __VLS_46: any;
+declare var __VLS_25: {}, __VLS_32: {}, __VLS_34: {}, __VLS_53: any, __VLS_54: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_45>]?: (props: typeof __VLS_46) => any;
+    [K in NonNullable<typeof __VLS_53>]?: (props: typeof __VLS_54) => any;
 } & {
-    loading?: (props: typeof __VLS_22) => any;
+    loading?: (props: typeof __VLS_25) => any;
 } & {
-    error?: (props: typeof __VLS_29) => any;
+    error?: (props: typeof __VLS_32) => any;
 } & {
-    error?: (props: typeof __VLS_31) => any;
+    error?: (props: typeof __VLS_34) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/Table/Base.vue

@@ -23,6 +23,7 @@
       :data="options.rawData"
       v-bind="$attrs"
       :ui="ui"
+      @select="onSelect"
     >
       <template #loading>
         <Loader :loading="true" />
@@ -53,24 +54,41 @@
         </slot>
       </template>
       <template
-        v-for="column in options.columns.filter((item) => !!item.type)"
+        v-for="column in options.columns"
         #[`${column.accessorKey}-cell`]="{ row }"
         :key="column.accessorKey"
       >
-        <component
-          :is="
+        <NuxtLink
+          v-if="to && column.accessorKey !== 'actions'"
+          :to="resolveTo(row.original)"
+          class="absolute inset-0"
+          tabindex="-1"
+          aria-hidden="true"
+        />
+        <div
+          :class="
+  to && column.accessorKey !== 'actions' ? 'pointer-events-none relative z-10' : 'relative z-10'
+"
+        >
+          <component
+            :is="
   column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]
 "
-          v-if="
+            v-if="
   column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]
 "
-          :value="transformValue(column, row)"
-          :column="column"
-          :row="row"
-        />
+            :value="transformValue(column, row)"
+            :column="column"
+            :row="row"
+          />
+          <template v-else>
+            {{ transformValue(column, row) }}
+          </template>
+        </div>
       </template>
       <template
         v-for="(_, slotName) of $slots"
+        :key="slotName"
         #[slotName]="slotProps"
       >
         <slot
@@ -113,10 +131,11 @@ import ColumnText from "#core/components/Table/ColumnText.vue";
 import UTable from "#ui/components/Table";
 import Pagination from "./Pagination.vue";
 import { tableTheme } from "#core/theme/table";
-const emits = defineEmits(["pageChange", "search"]);
+const emits = defineEmits(["pageChange", "search", "select"]);
 const props = defineProps({
   options: { type: Object, required: true },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  to: { type: [String, Function], required: false }
 });
 const columnTypeComponents = {
   [COLUMN_TYPES.NUMBER]: ColumnNumber,
@@ -128,7 +147,9 @@ const columnTypeComponents = {
 const theme = computed(() => useUiConfig(tableTheme, "table")());
 const config = useAppConfig();
 const page = ref(props.options.pageOptions?.currentPage || 1);
-const pageLimit = ref(props.options.pageOptions?.limit || config.core.limit_per_page);
+const pageLimit = ref(
+  props.options.pageOptions?.limit || config.core.limit_per_page
+);
 const uTableCompatibleColumns = computed(
   () => props.options.columns.map((col) => ({
     ...col,
@@ -137,9 +158,18 @@ const uTableCompatibleColumns = computed(
   }))
 );
 const transformValue = (column, row) => {
-  return column.cell ? column.cell({
-    row
-  }) : row.getValue(column.accessorKey);
+  if (typeof column.cell === "function") {
+    return column.cell({
+      row
+    });
+  }
+  return row.getValue(column.accessorKey);
+};
+const resolveTo = (rowOriginal) => {
+  if (typeof props.to === "function") {
+    return props.to(rowOriginal);
+  }
+  return props.to;
 };
 useWatchChange(
   () => props.options.pageOptions?.currentPage,
@@ -151,6 +181,9 @@ const onPageChange = (newPage) => {
   page.value = newPage;
   emits("pageChange", newPage);
 };
+const onSelect = (rows) => {
+  emits("select", rows);
+};
 const changePageLimit = (limit) => {
   pageLimit.value = limit;
   props.options.repo.fetchPageChange(1, {

package/dist/runtime/components/Table/Base.vue.d.ts

@@ -3,16 +3,17 @@ import { tableTheme } from '#core/theme/table';
 type __VLS_Props = {
     options: ITableOptions<any> & ISimpleTableOptions<any>;
     ui?: (typeof tableTheme)['slots'];
+    to?: string | ((row: any) => any);
 };
-declare var __VLS_22: {}, __VLS_29: {}, __VLS_31: {}, __VLS_45: any, __VLS_46: any;
+declare var __VLS_25: {}, __VLS_32: {}, __VLS_34: {}, __VLS_53: any, __VLS_54: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_45>]?: (props: typeof __VLS_46) => any;
+    [K in NonNullable<typeof __VLS_53>]?: (props: typeof __VLS_54) => any;
 } & {
-    loading?: (props: typeof __VLS_22) => any;
+    loading?: (props: typeof __VLS_25) => any;
 } & {
-    error?: (props: typeof __VLS_29) => any;
+    error?: (props: typeof __VLS_32) => any;
 } & {
-    error?: (props: typeof __VLS_31) => any;
+    error?: (props: typeof __VLS_34) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/Table/index.d.vue.ts

@@ -12,10 +12,12 @@ type __VLS_Props = {
         left: string[];
         right: string[];
     };
+    to?: string | ((row: any) => any);
 };
 type __VLS_Slots = Slot;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     search: (q: string) => any;
+    select: (rows: any[]) => any;
     pageChange: (page: number) => any;
     "update:columnPinning": (value: {
         left: string[];
@@ -23,6 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSearch?: ((q: string) => any) | undefined;
+    onSelect?: ((rows: any[]) => any) | undefined;
     onPageChange?: ((page: number) => any) | undefined;
     "onUpdate:columnPinning"?: ((value: {
         left: string[];

package/dist/runtime/components/Table/index.vue

@@ -17,10 +17,12 @@
     <Base
       v-bind="$attrs"
       :options="options"
-      :ui="ui"
+      :ui="computedUi"
       :column-pinning="computedColumnPinning"
+      :to="to"
       @page-change="onPageChange"
       @search="emits('search', q)"
+      @select="emits('select', $event)"
     >
       <template
         v-for="(_, slot) of $slots"
@@ -40,7 +42,7 @@ import { computed } from "vue";
 import { _debounce, ref, useUiConfig, watch } from "#imports";
 import { tableTheme } from "#core/theme/table";
 import Base from "#core/components/Table/Base.vue";
-const emits = defineEmits(["pageChange", "search", "update:columnPinning"]);
+const emits = defineEmits(["pageChange", "search", "select", "update:columnPinning"]);
 const props = defineProps({
   options: { type: Object, required: true },
   ui: { type: null, required: false },
@@ -48,12 +50,22 @@ const props = defineProps({
   columnPinning: { type: Object, required: false, default: () => ({
     left: [],
     right: []
-  }) }
+  }) },
+  to: { type: [String, Function], required: false }
 });
 defineSlots();
 const tableContainer = ref();
 const q = ref(props.options?.pageOptions.search ?? "");
 const theme = computed(() => useUiConfig(tableTheme, "table")());
+const computedUi = computed(() => {
+  if (!props.to) {
+    return props.ui;
+  }
+  return {
+    ...props.ui,
+    td: [props.ui?.td, "cursor-pointer", "relative"].filter(Boolean).join(" ")
+  };
+});
 const computedColumnPinning = computed(() => {
   if (props.isPinAction) {
     const hasActionsColumn = props.options.columns.some(

package/dist/runtime/components/Table/index.vue.d.ts

@@ -12,10 +12,12 @@ type __VLS_Props = {
         left: string[];
         right: string[];
     };
+    to?: string | ((row: any) => any);
 };
 type __VLS_Slots = Slot;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     search: (q: string) => any;
+    select: (rows: any[]) => any;
     pageChange: (page: number) => any;
     "update:columnPinning": (value: {
         left: string[];
@@ -23,6 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSearch?: ((q: string) => any) | undefined;
+    onSelect?: ((rows: any[]) => any) | undefined;
     onPageChange?: ((page: number) => any) | undefined;
     "onUpdate:columnPinning"?: ((value: {
         left: string[];

package/package.json

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