@finema/core 3.14.1 → 3.14.3

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

@@ -1,80 +1,83 @@
 <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)"
-    >
-      <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>
+"
+      >
+        <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 }"
+          square
+          :to="to?.(item.value)"
+          :class="theme.buttonPagination({
+  class: [ui?.buttonPagination]
+})"
+        />
+      </template>
+    </UPagination>
+  </div>
 </template>
 
 <script setup>

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/components/Table/index.vue

@@ -1,38 +1,38 @@
 <template>
-  <div ref="tableContainer">
-    <div
-      v-if="options.isEnabledSearch"
+  <div ref="tableContainer">
+    <div
+      v-if="options.isEnabledSearch"
       :class="
   theme.searchContainer({
     class: [ui?.searchContainer]
   })
-"
-    >
-      <Input
-        v-model="q"
-        icon="i-heroicons-magnifying-glass"
-        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
-      />
-    </div>
-    <Base
-      v-bind="$attrs"
-      :options="options"
-      :ui="ui"
-      :column-pinning="computedColumnPinning"
-      @page-change="onPageChange"
-      @search="emits('search', q)"
-    >
-      <template
-        v-for="(_, slot) of $slots"
-        #[slot]="slotProps"
-      >
-        <slot
-          :name="slot"
-          v-bind="slotProps || {}"
-        />
-      </template>
-    </Base>
-  </div>
+"
+    >
+      <Input
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
+      />
+    </div>
+    <Base
+      v-bind="$attrs"
+      :options="options"
+      :ui="ui"
+      :column-pinning="computedColumnPinning"
+      @page-change="onPageChange"
+      @search="emits('search', q)"
+    >
+      <template
+        v-for="(_, slot) of $slots"
+        #[slot]="slotProps"
+      >
+        <slot
+          :name="slot"
+          v-bind="slotProps || {}"
+        />
+      </template>
+    </Base>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/server/tsconfig.json

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

package/dist/runtime/theme/table.d.ts

@@ -15,6 +15,7 @@ export declare const tableTheme: {
         th: string;
         td: string;
         tr: string;
+        buttonPagination: string;
     };
     variants: {
         pinned: {

package/dist/runtime/theme/table.js

@@ -6,15 +6,16 @@ export const tableTheme = {
     captionContainer: "hidden mb-4 text-gray-500",
     captionBoldText: "font-bold",
     errorMessage: "text-error-400 text-2xl h-[200px] flex justify-center items-center",
-    paginationContainer: "flex justify-between items-center flex-row md:flex-col lg:flex-row gap-4 px-4 py-3 bg-[#F2F4F7]",
-    paginationInfoWrapper: "flex items-center justify-between gap-4",
+    paginationContainer: "flex justify-between items-center flex-row md:flex-col lg:flex-row gap-y-2 gap-x-4 px-4 py-3 bg-[#F2F4F7]",
+    paginationInfoWrapper: "flex flex-wrap items-center justify-between gap-4",
     paginationInfo: "text-sm font-bold text-gray-600",
     paginationLimitSelect: "max-sm:!hidden min-w-[120px]",
     paginationLimitSelectLabel: "font-bold text-gray-600",
     thead: "",
     th: "text-[#475467]  whitespace-nowrap font-medium text-xs",
     td: "text-[#475467]",
-    tr: "hover:bg-gray-50"
+    tr: "hover:bg-gray-50",
+    buttonPagination: "min-w-10 justify-center"
   },
   variants: {
     pinned: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.14.1",
+  "version": "3.14.3",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -83,4 +83,4 @@
   "lint-staged": {
     "*": "eslint"
   }
-}
+}