@finema/core 3.9.1 → 3.11.0

package/dist/runtime/components/Form/fileState/PreviewModal.vue

@@ -1,29 +1,29 @@
 <template>
-  <Modal
-    :close="{ onClick: () => emits('close', false) }"
-    :dismissible="false"
-    :title="value?.name"
+  <Modal
+    :close="{ onClick: () => emits('close', false) }"
+    :dismissible="false"
+    :title="value?.name"
     :ui="{
   content: 'max-w-3xl'
-}"
-  >
-    <template #body>
-      <div class="flex justify-center">
-        <img
-          v-if="value && isImageFromPath(value.path)"
-          :src="value.url"
-          alt="img-preview"
-          class="max-h-96 max-w-full rounded-lg"
-        />
-        <video
-          v-else-if="value && isVideoFromPath(value.path)"
-          :src="value.url"
-          controls
-          class="max-h-96 max-w-full"
-        />
-      </div>
-    </template>
-  </Modal>
+}"
+  >
+    <template #body>
+      <div class="flex justify-center">
+        <img
+          v-if="value && isImageFromPath(value.path)"
+          :src="value.url"
+          alt="img-preview"
+          class="max-h-96 max-w-full rounded-lg"
+        />
+        <video
+          v-else-if="value && isVideoFromPath(value.path)"
+          :src="value.url"
+          controls
+          class="max-h-96 max-w-full"
+        />
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,5 +1,5 @@
-<template>
-  <form class="form">
-    <slot />
-  </form>
-</template>
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>

package/dist/runtime/components/Image.vue

@@ -1,32 +1,32 @@
 <template>
-  <UseImage v-bind="$props">
-    <template #loading>
-      <slot name="loading">
-        <div
-          class="flex h-full w-full items-center justify-center"
-        >
-          <Loader
-            :loading="true"
-          />
-        </div>
-      </slot>
-    </template>
-
-    <template #error>
-      <slot name="error">
-        <div
-          class="flex h-full w-full items-center justify-center"
-        >
-          <p class="text-error-400">
-            <Icon
-              name="i-heroicons:exclamation-circle-solid"
-              class="text-error-400 size-8"
-            />
-          </p>
-        </div>
-      </slot>
-    </template>
-  </UseImage>
+  <UseImage v-bind="$props">
+    <template #loading>
+      <slot name="loading">
+        <div
+          class="flex h-full w-full items-center justify-center"
+        >
+          <Loader
+            :loading="true"
+          />
+        </div>
+      </slot>
+    </template>
+
+    <template #error>
+      <slot name="error">
+        <div
+          class="flex h-full w-full items-center justify-center"
+        >
+          <p class="text-error-400">
+            <Icon
+              name="i-heroicons:exclamation-circle-solid"
+              class="text-error-400 size-8"
+            />
+          </p>
+        </div>
+      </slot>
+    </template>
+  </UseImage>
 </template>
 
 <script setup>

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

@@ -1,21 +1,21 @@
 <template>
-  <DevOnly>
-    <TeleportSafe
-      to="#dev-logs"
-    >
-      <LogItem
-        v-if="typeof data !== 'undefined'"
-        :data="data"
-        :title="title"
-      />
-      <LogItem
-        v-for="(item, index) in dataItems"
-        :key="index"
-        :data="item"
-        :title="`${title} #${index + 1}`"
-      />
-    </TeleportSafe>
-  </DevOnly>
+  <DevOnly>
+    <TeleportSafe
+      to="#dev-logs"
+    >
+      <LogItem
+        v-if="typeof data !== 'undefined'"
+        :data="data"
+        :title="title"
+      />
+      <LogItem
+        v-for="(item, index) in dataItems"
+        :key="index"
+        :data="item"
+        :title="`${title} #${index + 1}`"
+      />
+    </TeleportSafe>
+  </DevOnly>
 </template>
 
 <script setup>

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

@@ -1,5 +1,5 @@
 <template>
-  {{ getValue || "-" }}
+  {{ getValue || "-" }}
 </template>
 
 <script setup>

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

@@ -1,5 +1,5 @@
 <template>
-  {{ getValue || "-" }}
+  {{ getValue || "-" }}
 </template>
 
 <script setup>

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

@@ -1,8 +1,8 @@
 <template>
-  <Image
-    class="h-12 rounded"
-    :src="getValue"
-  />
+  <Image
+    class="h-12 rounded"
+    :src="getValue"
+  />
 </template>
 
 <script setup>

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

@@ -1,10 +1,13 @@
+import { type ComponentProps } from 'vue';
 import type { TableColumn } from '@nuxt/ui';
+import NuxtLink from '#app/components/nuxt-link';
 type __VLS_Props = {
     value: any;
     row: any;
     column: TableColumn<any> & {
         meta: {
             max: number;
+            link?: ComponentProps<typeof NuxtLink>;
         };
     };
 };

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

@@ -1,10 +1,20 @@
 <template>
-  {{ getValue }}
+  <NuxtLink
+    v-if="column.meta?.link"
+    v-bind="column.meta.link"
+  >
+    {{ getValue }}
+  </NuxtLink>
+
+  <span v-else>
+    {{ getValue }}
+  </span>
 </template>
 
 <script setup>
 import { computed } from "vue";
 import { StringHelper } from "#imports";
+import NuxtLink from "#app/components/nuxt-link";
 const props = defineProps({
   value: { type: null, required: true },
   row: { type: null, required: true },

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

@@ -1,10 +1,13 @@
+import { type ComponentProps } from 'vue';
 import type { TableColumn } from '@nuxt/ui';
+import NuxtLink from '#app/components/nuxt-link';
 type __VLS_Props = {
     value: any;
     row: any;
     column: TableColumn<any> & {
         meta: {
             max: number;
+            link?: ComponentProps<typeof NuxtLink>;
         };
     };
 };

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

@@ -1,70 +1,80 @@
 <template>
-  <div
+  <div
     :class="
   theme.paginationContainer({
     class: [ui?.paginationContainer]
   })
-"
-  >
-    <div
+"
+  >
+    <div
       :class="
   theme.paginationInfoWrapper({
     class: [ui?.paginationInfoWrapper]
   })
-"
-    >
-      <USelect
-        v-if="options.pageOptions && !options.isHideLimitSelect"
-        size="lg"
-        trailing="รายการ"
+"
+    >
+      <USelect
+        v-if="options.pageOptions && !options.isHideLimitSelect"
+        size="lg"
+        trailing="รายการ"
         :class="
   theme.paginationLimitSelect({
     class: [ui?.paginationLimitSelect, 'cursor-pointer']
   })
-"
-        :items="pageLimitItems"
-        :model-value="pageLimit"
-        @update:modelValue="emits('pageLimitChange', $event)"
-      >
-        <template #default="{ modelValue }">
-          <p
+"
+        :items="pageLimitItems"
+        :model-value="pageLimit"
+        @update:modelValue="emits('pageLimitChange', $event)"
+      >
+        <template #default="{ modelValue }">
+          <p
             :class="
   theme.paginationLimitSelectLabel({
     class: [ui?.paginationLimitSelectLabel]
   })
-"
-          >
-            {{ modelValue }}  {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "items" }}
-          </p>
-        </template>
-      </USelect>
-      <p
+"
+          >
+            {{ modelValue }}  {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "items" }}
+          </p>
+        </template>
+      </USelect>
+      <p
         :class="
   theme.paginationInfo({
     class: [ui?.paginationInfo, '']
   })
-"
-      >
-        <span v-if="options.pageOptions">{{ pageBetween }} {{ appConfig.core?.locale === "th" ? "\u0E08\u0E32\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14" : "of total" }} {{ totalCountWithComma }}</span>
-        <span v-else>{{ appConfig.core?.locale === "th" ? "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14" : "Total" }} {{ options.rawData.length }} {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "items" }}</span>
-      </p>
-    </div>
-
-    <UPagination
-      v-if="options.pageOptions && options.pageOptions.totalPage > 1"
-      :page="page"
-      :default-page="options.pageOptions?.currentPage || 1"
-      :items-per-page="options.pageOptions.limit"
-      :total="options.pageOptions.totalCount"
-      :to="options.isRouteChange ? to : void 0"
-      show-edges
-      variant="outline"
-      color="neutral"
-      active-color="neutral"
-      active-variant="subtle"
-      @update:page="emits('pageChange', $event)"
-    />
-  </div>
+"
+      >
+        <span v-if="options.pageOptions">{{ pageBetween }} {{ appConfig.core?.locale === "th" ? "\u0E08\u0E32\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14" : "of total" }} {{ totalCountWithComma }}</span>
+        <span v-else>{{ appConfig.core?.locale === "th" ? "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14" : "Total" }} {{ options.rawData.length }} {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "items" }}</span>
+      </p>
+    </div>
+    <UPagination
+      v-if="options.pageOptions && options.pageOptions.totalPage > 1"
+      :page="page"
+      :default-page="options.pageOptions?.currentPage || 1"
+      :items-per-page="options.pageOptions.limit"
+      :total="options.pageOptions.totalCount"
+      :to="options.isRouteChange ? to : void 0"
+      show-edges
+      variant="outline"
+      color="neutral"
+      active-color="neutral"
+      active-variant="subtle"
+      @update:page="emits('pageChange', $event)"
+    >
+      <template #item="{ item, page }">
+        <Button
+          :variant="page === item.value ? 'subtle' : 'outline'"
+          :color="page === item.value ? 'neutral' : 'neutral'"
+          :label="String(NumberHelper.withComma(item.value))"
+          :ui="{ label: themePagination.label }"
+          :to="to?.(item.value)"
+          square
+        />
+      </template>
+    </UPagination>
+  </div>
 </template>
 
 <script setup>
@@ -77,6 +87,7 @@ import {
 import UPagination from "#ui/components/Pagination";
 import USelect from "#ui/components/Select";
 import { tableTheme } from "../../theme/table";
+import { paginationTheme } from "../../theme/pagination";
 const emits = defineEmits(["pageChange", "search", "pageLimitChange"]);
 const props = defineProps({
   page: { type: Number, required: true },
@@ -84,6 +95,7 @@ const props = defineProps({
   options: { type: Object, required: true },
   ui: { type: null, required: false }
 });
+const themePagination = computed(() => useUiConfig(paginationTheme, "pagination")());
 const appConfig = useAppConfig();
 const pageLimitItems = [
   {

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

@@ -1,25 +1,25 @@
 <template>
-  <Base
-    v-bind="$attrs"
+  <Base
+    v-bind="$attrs"
     :options="{
   ...options,
   pageOptions,
   isHideLimitSelect: true,
   rawData: itemsByPage
-}"
-    :ui="ui"
-    @page-change="onPageChange"
-  >
-    <template
-      v-for="(_, slot) of $slots"
-      #[slot]="slotProps"
-    >
-      <slot
-        :name="slot"
-        v-bind="slotProps || {}"
-      />
-    </template>
-  </Base>
+}"
+    :ui="ui"
+    @page-change="onPageChange"
+  >
+    <template
+      v-for="(_, slot) of $slots"
+      #[slot]="slotProps"
+    >
+      <slot
+        :name="slot"
+        v-bind="slotProps || {}"
+      />
+    </template>
+  </Base>
 </template>
 
 <script setup>

package/dist/runtime/server/tsconfig.json

@@ -1,3 +1,3 @@
-{
-  "extends": "../../../.nuxt/tsconfig.server.json",
-}
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/package.json

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