@finema/core 1.4.83 → 1.4.84

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const name = "@finema/core";
-const version = "1.4.83";
+const version = "1.4.84";
 
 const colors = {
   black: "#20243E",

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

@@ -0,0 +1,77 @@
+<template>
+  <!--  TODO -->
+  <div v-if="pageOptions" class="mt-4 flex justify-between px-3">
+    <p class="text-xs text-gray-500">
+      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+    </p>
+    <UPagination
+      v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
+      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"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType } from 'vue'
+import { StringHelper } from '#core/utils/StringHelper'
+import { ref, watch } from '#imports'
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
+
+const emits = defineEmits(['pageChange'])
+
+const props = defineProps({
+  status: {
+    type: Object as PropType<IFlexDeckOptions['status']>,
+    required: true,
+  },
+  pageOptions: {
+    type: Object as PropType<IFlexDeckOptions['pageOptions']>,
+    required: false,
+  },
+  rawData: {
+    type: Array as PropType<IFlexDeckOptions['rawData']>,
+    required: true,
+  },
+  isSimplePagination: {
+    type: Boolean as PropType<IFlexDeckOptions['isSimplePagination']>,
+    default: false,
+  },
+  isHideBottomPagination: {
+    type: Boolean as PropType<IFlexDeckOptions['isHideBottomPagination']>,
+    default: false,
+  },
+})
+
+const page = ref(props.pageOptions?.currentPage || 1)
+
+const pageBetween = computed((): string => {
+  const length = props.rawData?.length
+
+  if (length === 0) {
+    return '0'
+  }
+
+  const start = (props.pageOptions!.currentPage - 1) * props.pageOptions!.limit + 1
+  const end = start + length - 1
+
+  return `${start} - ${end}`
+})
+
+const totalCountWithComma = computed((): string => {
+  return !props.pageOptions!.totalCount
+    ? '0'
+    : StringHelper.withComma(props.pageOptions!.totalCount)
+})
+
+watch(page, () => {
+  emits('pageChange', page.value)
+})
+</script>

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

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
+      <UInput
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || 'ค้นหา...'"
+      />
+    </div>
+    <Base
+      v-bind="$attrs"
+      :raw-data="options.rawData"
+      :status="options.status"
+      :page-options="options.pageOptions"
+      :is-simple-pagination="isShowSimplePagination"
+      :is-hide-bottom-pagination="options.isHideBottomPagination"
+      @page-change="onPageChange"
+    >
+      <template v-for="(_, slot) of $slots" #[slot]="slotProps">
+        <slot :name="slot" v-bind="slotProps || {}" />
+      </template>
+    </Base>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import { _debounce, computed, ref, watch } from '#imports'
+import { useCoreConfig } from '#core/composables/useConfig'
+import Base from '#core/components/FlexDeck/Base.vue'
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
+
+const emits = defineEmits<{
+  (event: 'pageChange', page: number): void
+  (event: 'search', q: string): void
+}>()
+
+const props = defineProps({
+  options: { type: Object as PropType<IFlexDeckOptions>, required: true },
+})
+
+const coreConfig = useCoreConfig()
+
+const q = ref(props.options?.pageOptions.search ?? '')
+
+const isShowSimplePagination = computed(
+  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
+)
+
+watch(
+  q,
+  _debounce((value) => {
+    emits('search', value)
+  }, 500)
+)
+
+const onPageChange = (page: number) => {
+  emits('pageChange', page)
+}
+</script>

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

@@ -0,0 +1,14 @@
+import type { IPageOptions, IStatus } from '#core/types/lib';
+export interface IFlexDeckOptions<T = object> {
+    rawData: T[];
+    primary: string;
+    status: IStatus;
+    pageOptions: IPageOptions;
+    isHideToolbar?: boolean;
+    isEnabledSearch?: boolean;
+    searchPlaceholder?: string;
+    isPreventRouteChange: boolean;
+    isHideBottomPagination?: boolean;
+    isHideTopPagination?: boolean;
+    isSimplePagination?: boolean;
+}

package/dist/runtime/components/SimplePagination.vue

@@ -29,7 +29,7 @@ import { useUI, type PropType, toRef, computed } from '#imports'
 import type { ButtonSize } from '#ui/types/button'
 import type { Strategy } from '#ui/types'
 
-const config = useUiConfig<typeof pagination>(pagination, 'pagination')
+const config = useUiConfig<typeof pagination>(pagination!, 'pagination')
 
 const emits = defineEmits(['update:modelValue'])
 
@@ -52,7 +52,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<ButtonSize>,
-    default: () => pagination.default?.size,
+    default: () => pagination!.default?.size,
   },
   class: {
     type: [String, Object, Array] as PropType<any>,

package/dist/runtime/composables/useFlexDeck.d.ts

@@ -0,0 +1,4 @@
+import type { ComputedRef } from 'vue';
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types';
+export declare const createFlexDeckOptions: <T = object>(repo: IUsePageLoader<T>, options: IFlexDeckOptions<T>) => IFlexDeckOptions<T>;
+export declare const useFlexDeck: <T = object>(options: IUseTable<T>) => ComputedRef<IFlexDeckOptions<T>>;

package/dist/runtime/composables/useFlexDeck.mjs

@@ -0,0 +1,19 @@
+import { computed, useCoreConfig } from "#imports";
+import { get } from "@vueuse/core";
+export const createFlexDeckOptions = (repo, options) => {
+  const config = useCoreConfig();
+  return {
+    rawData: get(repo.fetchItems),
+    pageOptions: get(repo.fetchOptions),
+    status: get(repo.fetchStatus),
+    primary: get(repo.fetchOptions).primary ?? config.default_primary_key,
+    isPreventRouteChange: false,
+    ...options
+  };
+};
+export const useFlexDeck = (options) => computed(() => {
+  return createFlexDeckOptions(
+    options.repo,
+    typeof options.options === "function" ? options.options() : options.options ?? {}
+  );
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.83",
+  "version": "1.4.84",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -75,15 +75,10 @@
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "vitest": "^1.2.2",
-    "vue": "3.4.8"
+    "vue": "^3.4.21"
   },
   "lint-staged": {
     "*.{ts,vue,tsx,js}": "eslint --fix --cache",
     "*.{html,json}": "prettier --write"
-  },
-  "pnpm": {
-    "overrides": {
-      "vue": "3.4.8"
-    }
   }
 }