@finema/core 1.4.22 → 1.4.23

package/README.md

@@ -8,6 +8,9 @@
 - Useful composables
 - Security
 
+## Remark
+- Temporary use resolutions for vue 3.3.13 instead of ^3.4.0 due to [this issue](https://github.com/nuxt/ui/issues/1171) and planned to be fixed in the next vue 3.5 version.
+
 ## Quick Setup
 
 1. Add `@finema/core` dependency to your project

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.22",
+  "version": "1.4.23",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import 'lodash-es';
 
 const name = "@finema/core";
-const version = "1.4.22";
+const version = "1.4.23";
 
 const colors = {
   black: "#20243E",
@@ -89,6 +89,7 @@ const _deepMerge = (target, ...sources) => {
 const pagination = {
   wrapper: "flex items-center space-x-1",
   default: {
+    size: "sm",
     activeButton: {
       color: "primary",
       class: "rounded-md px-3"
@@ -111,11 +112,13 @@ const pagination = {
     prevButton: {
       color: "primary",
       variant: "ghost",
+      icon: "i-heroicons-chevron-left-20-solid",
       class: "rtl:[&_span:first-child]:rotate-180 rounded-md px-2 text-gray-500 hover:bg-primary-500 hover:text-white"
     },
     nextButton: {
       color: "primary",
       variant: "ghost",
+      icon: "i-heroicons-chevron-right-20-solid",
       class: "rtl:[&_span:last-child]:rotate-180 rounded-md px-2 text-gray-500 hover:bg-primary-500 hover:text-white"
     }
   }

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

@@ -1,6 +1,5 @@
 <template>
   <UDropdown
-    v-if="renderOnMounted"
     v-bind="attrs"
     :class="$props.class"
     :items="items"
@@ -19,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { type PropType, ref, onMounted, useUiConfig, useUI, toRef } from '#imports'
+import { type PropType, useUiConfig, useUI, toRef } from '#imports'
 import { type DropdownItem } from '#ui/types'
 import type { Strategy } from '#core/types/utils'
 import { dropdown } from '#ui/ui.config'
@@ -68,14 +67,5 @@ const props = defineProps({
   },
 })
 
-const renderOnMounted = ref(false)
-
-onMounted(() => {
-  renderOnMounted.value = true
-  ui.value.item.avatar = {
-    base: 'flex-shrink-0',
-  } as any
-})
-
 const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
 </script>

package/dist/runtime/components/Loader.vue

@@ -1,4 +1,14 @@
 <template>
-  <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
+  <div v-if="isLoading" class="flex min-h-[200px] items-center justify-center">
+    <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
+  </div>
+  <slot v-else />
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+defineProps({
+  isLoading: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>

package/dist/runtime/components/SimplePagination.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <Button
+      :size="size"
+      :disabled="!canGoFirstOrPrev || disabled"
+      :class="[ui.base, ui.rounded]"
+      v-bind="{ ...((ui.default?.prevButton as object) || {}) }"
+      :ui="{ rounded: '' }"
+      aria-label="Prev"
+      @click="onClickPrev"
+    />
+
+    <Button
+      :size="size"
+      :disabled="!canGoLastOrNext || disabled"
+      :class="[ui.base, ui.rounded]"
+      v-bind="{ ...((ui.default?.nextButton as object) || {}) }"
+      :ui="{ rounded: '' }"
+      aria-label="Next"
+      @click="onClickNext"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useUiConfig } from '../composables/useConfig'
+import { pagination } from '#core/ui.config'
+import { type ButtonSize } from '#ui/types'
+import { useUI, type PropType, toRef, computed } from '#imports'
+import { type Strategy } from '../types/utils'
+
+const config = useUiConfig<typeof pagination>(pagination, 'pagination')
+
+const emits = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
+  },
+  pageCount: {
+    type: Number,
+    default: 10,
+  },
+  total: {
+    type: Number,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<ButtonSize>,
+    default: () => pagination.default?.size,
+  },
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: () => '',
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+    default: () => ({}),
+  },
+})
+
+const { ui } = useUI('pagination', toRef(props, 'ui'), config, toRef(props, 'class'))
+
+const currentPage = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: number) {
+    emits('update:modelValue', value)
+  },
+})
+
+const pages = computed(() =>
+  Array.from({ length: Math.ceil(props.total / props.pageCount) }, (_, i) => i + 1)
+)
+
+const canGoFirstOrPrev = computed(() => currentPage.value > 1)
+const canGoLastOrNext = computed(() => currentPage.value < pages.value.length)
+
+const onClickPrev = () => {
+  if (canGoFirstOrPrev.value) {
+    currentPage.value--
+  }
+}
+
+const onClickNext = () => {
+  if (canGoLastOrNext.value) {
+    currentPage.value++
+  }
+}
+</script>

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

@@ -52,7 +52,13 @@
       ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
     </p>
     <UPagination
-      v-if="pageOptions.totalPage > 1"
+      v-if="pageOptions.totalPage > 1 && !isSimplePagination"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+    <SimplePagination
+      v-if="pageOptions.totalPage > 1 && isSimplePagination"
       v-model="page"
       :page-count="pageOptions.limit"
       :total="pageOptions.totalCount"
@@ -88,6 +94,10 @@ const props = defineProps({
     type: Array as PropType<ITableOptions['rawData']>,
     required: true,
   },
+  isSimplePagination: {
+    type: Boolean as PropType<ITableOptions['isSimplePagination']>,
+    default: false,
+  },
 })
 
 const page = ref(props.pageOptions?.currentPage || 1)

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

@@ -13,6 +13,7 @@
       :raw-data="options.rawData"
       :status="options.status"
       :page-options="options.pageOptions"
+      :is-simple-pagination="options.isSimplePagination"
       @page-change="onPageChange"
     >
       <template v-for="(_, slot) of $slots" #[slot]="slotProps">

package/dist/runtime/components/Table/types.d.ts

@@ -45,7 +45,8 @@ export interface ITableOptions<T = object> extends IBaseTableOptions<T> {
     deleteStatus?: IStatus;
     isHideBottomPagination?: boolean;
     isHideTopPagination?: boolean;
-    isNotChangeRoute: boolean;
+    isSimplePagination?: boolean;
+    isPreventRouteChange: boolean;
 }
 export interface ISimpleTableOptions<T = object> extends IBaseTableOptions<T> {
     limit?: number;

package/dist/runtime/types/config.d.ts

@@ -1 +1 @@
-export type UIComponentList = 'modal' | 'slideover' | 'dropdown' | 'icon' | 'button' | 'buttonGroup' | 'tabs' | 'card' | 'breadcrumb' | 'badge' | 'input';
+export type UIComponentList = 'modal' | 'slideover' | 'dropdown' | 'icon' | 'button' | 'buttonGroup' | 'tabs' | 'card' | 'breadcrumb' | 'badge' | 'input' | 'pagination';

package/dist/runtime/ui.config/pagination.d.ts

@@ -1,3 +1,3 @@
 import type * as config from '#ui/ui.config';
 import type { DeepPartial } from '#ui/types';
-export declare const pagination: DeepPartial<(typeof config)['pagination']>;
+export declare const pagination: DeepPartial<typeof config>['pagination'];

package/dist/runtime/ui.config/pagination.mjs

@@ -1,6 +1,7 @@
 export const pagination = {
   wrapper: "flex items-center space-x-1",
   default: {
+    size: "sm",
     activeButton: {
       color: "primary",
       class: "rounded-md px-3"
@@ -23,11 +24,13 @@ export const pagination = {
     prevButton: {
       color: "primary",
       variant: "ghost",
+      icon: "i-heroicons-chevron-left-20-solid",
       class: "rtl:[&_span:first-child]:rotate-180 rounded-md px-2 text-gray-500 hover:bg-primary-500 hover:text-white"
     },
     nextButton: {
       color: "primary",
       variant: "ghost",
+      icon: "i-heroicons-chevron-right-20-solid",
       class: "rtl:[&_span:last-child]:rotate-180 rounded-md px-2 text-gray-500 hover:bg-primary-500 hover:text-white"
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.22",
+  "version": "1.4.23",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.7.4",
-    "@nuxt/ui": "^2.12.0",
+    "@nuxt/ui": "^2.12.3",
     "@pinia/nuxt": "^0.5.1",
     "@vee-validate/nuxt": "^4.12.4",
     "@vee-validate/zod": "^4.12.4",
@@ -76,6 +76,9 @@
     "stylelint-config-standard-scss": "^13.0.0",
     "vitest": "^1.1.3"
   },
+  "resolutions": {
+    "vue": "3.3.13"
+  },
   "lint-staged": {
     "*.{ts,vue,tsx,js}": "eslint --fix --cache",
     "*.{html,json}": "prettier --write"