firstly 0.0.7 → 0.0.8

package/esm/auth/types.d.ts

@@ -7,16 +7,18 @@ export type firstlyDataAuth = {
     ui?: {
         paths: {
             base: string;
-            sign_up: string;
-            sign_in: string;
-            forgot_password: string;
-            reset_password: string;
-            verify_email: string;
+            sign_up: string | false;
+            sign_in: string | false;
+            forgot_password: string | false;
+            reset_password: string | false;
+            verify_email: string | false;
         };
         strings: {
             email: string;
             email_placeholder: string;
             password: string;
+            confirm: string;
+            reset: string;
             btn_sign_in: string;
             btn_sign_up: string;
             forgot_password: string;

package/esm/bin/cmd.js

@@ -31,22 +31,30 @@ const res = (await p.multiselect({
     message: 'You can generate different things here',
     options,
 }));
-const devDependenciesPrepare = {
-    '@kitql/eslint-config': '0.3.6',
-    '@kitql/helpers': '0.8.9',
+// devDependencies
+function mergeAndSort(deps, depsToAdd) {
+    const prepare = {
+        ...depsToAdd,
+        ...deps,
+    };
+    // sort by name
+    const sorted = Object.keys(prepare)
+        .sort()
+        .reduce((acc, key) => {
+        acc[key] = prepare[key];
+        return acc;
+    }, {});
+    return sorted;
+}
+pkg.devDependencies = mergeAndSort(pkg.devDependencies, {
+    '@kitql/eslint-config': '0.3.7',
+    '@kitql/helpers': '0.8.10',
     pg: '8.12.0',
-    oslo: '^1.2.0',
     remult: versionFirstly,
-    ...pkg.devDependencies,
-};
-// sort by name
-const devDependenciesSorted = Object.keys(devDependenciesPrepare)
-    .sort()
-    .reduce((acc, key) => {
-    acc[key] = devDependenciesPrepare[key];
-    return acc;
-}, {});
-pkg.devDependencies = devDependenciesSorted;
+});
+pkg.dependencies = mergeAndSort(pkg.dependencies, {
+    oslo: '^1.2.1',
+});
 pkg.scripts = {
     ...pkg.scripts,
     '//// ---- BEST PRACTICES ---- ////': '',
@@ -190,6 +198,12 @@ export const api = firstly({
         log.success('App is ready! 🚀')
       },
     },
+
+    //----------------------------------------
+    // enabling changeLog in general.
+    // To enable it, replace @Entity by @FF_Entity in your entities
+    //----------------------------------------
+    // changeLog(),
   ],
 })
 `,

package/esm/cellsBuildor.d.ts

@@ -41,5 +41,6 @@ export declare function cellBuildor<Entity>(repo: Repository<Entity>, inputBuild
 export declare const fieldsOf: <Entity>(b: Cell<Entity>[]) => FieldMetadata<any, Entity>[];
 export declare const getPlaceholder: <Entity>(fields: FieldMetadata<any, Entity>[]) => string;
 export declare const buildSearchWhere: <Entity>(entity: Entity | undefined, fields: FieldMetadata<any, Entity>[], search?: string | null) => EntityFilter<Entity>[];
+export declare const containsWords: <Entity>(fields: FieldMetadata<any, Entity>[], search: string) => EntityFilter<Entity>;
 export declare const buildWhere: <Entity>(entity: Entity | undefined, defaultWhere: EntityFilter<Entity> | undefined, fields_filter: FieldMetadata<any, Entity>[], fields_search: FieldMetadata<any, Entity>[], obj: Record<string, string>) => EntityFilter<Entity>;
 export {};

package/esm/cellsBuildor.js

@@ -55,28 +55,40 @@ export const buildSearchWhere = (entity, fields, search) => {
     const f = [
         {
             $or: fields.map((f) => {
-                if (f.isServerExpression) {
-                    // check if this field has a specific filter function
-                    const fnName = f.key + 'Filter';
+                // REMULT P1: isServerExpression is false when sqlExpression there ?!
+                // if (f.isServerExpression || f.options.sqlExpression) {
+                // check if this field has a specific filter function
+                const fnName = f.key + 'Filter';
+                // @ts-ignore
+                if (entity && entity[fnName]) {
                     // @ts-ignore
-                    if (entity && entity[fnName]) {
-                        // @ts-ignore
-                        return entity[fnName](search);
-                    }
-                    return {};
+                    return entity[fnName](search);
                 }
+                // let's continue with the default behavior
+                // return {}
+                // }
                 if (f.inputType === 'number') {
                     return { [f.key]: search };
                 }
-                const sSplitted = search.split(' ');
-                return {
-                    $and: sSplitted.map((s) => ({ [f.key]: { $contains: s } })),
-                };
+                return containsWords([f], search);
             }),
         },
     ];
     return f;
 };
+export const containsWords = (fields, search) => {
+    const sSplitted = search.split(' ');
+    if (fields.length === 1) {
+        return {
+            $and: sSplitted.map((s) => ({ [fields[0].key]: { $contains: s } })),
+        };
+    }
+    return {
+        $or: fields.map((f) => {
+            return { $and: sSplitted.map((s) => ({ [f.key]: { $contains: s } })) };
+        }),
+    };
+};
 export const buildWhere = (entity, defaultWhere, fields_filter, fields_search, obj) => {
     const and = [];
     if (defaultWhere) {

package/esm/changeLog/index.d.ts

@@ -1,12 +1,29 @@
 import { type FieldRef, type FieldsRef, type LifecycleEvent } from 'remult';
 import type { Module } from '../api';
-export declare class WithChangeLogs {
-}
 /**
- * in an entity, add these 2 functions:
+ * ## Default way
+ * The easiest is to switch from `@Entity` to `@FF_Entity` to the entities where you want to log changes.
+ *
  * ```ts
+ * \@FF_Entity<User>('users', {
+ *
+ *   // Optional => To disable change logs
+ *   // changeLog: false,
+ *
+ *   // Optional => To disable some columns from being logged
+ *   // changeLog: {
+ *   //   excludeColumns: (e) => {
+ *   //     return [e.password]
+ *   //   },
+ *   // },
+ * })
+ * export class User {}
+ * ```
  *
- * \@Entity<Task>('tasks', {
+ * ## Manual way
+ * If you want to go more manual, you can import these functions and call them in your entity's lifecycle events.
+ * ```ts
+ * \@Entity<User>('users', {
  *   saved: async (entity, e) => {
  *     await recordSaved(entity, e)
  *   },
@@ -14,7 +31,7 @@ export declare class WithChangeLogs {
  *     await recordDeleted(entity, e)
  *   },
  * })
- *
+ * export class User {}
  * ```
  */
 export declare const changeLog: () => Module;
@@ -40,7 +57,7 @@ export interface change {
 }
 export declare function recordSaved<entityType>(entity: entityType, e: LifecycleEvent<entityType>, options?: ColumnDeciderArgs<entityType>): Promise<void>;
 export declare function recordDeleted<entityType>(entity: entityType, e: LifecycleEvent<entityType>, options?: ColumnDeciderArgs<entityType>): Promise<void>;
-interface ColumnDeciderArgs<entityType> {
+export interface ColumnDeciderArgs<entityType> {
     excludeColumns?: (e: FieldsRef<entityType>) => FieldRef<entityType, any>[];
     excludeValues?: (e: FieldsRef<entityType>) => FieldRef<entityType, any>[];
     forceDate?: Date;
@@ -52,4 +69,3 @@ export declare class FieldDecider<entityType> {
     excludedValues: FieldRef<entityType>[];
     constructor(entity: entityType, options?: ColumnDeciderArgs<entityType>);
 }
-export {};

package/esm/changeLog/index.js

@@ -5,24 +5,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Entity, Fields, getEntityRef, IdEntity, isBackend, remult, } from 'remult';
-let WithChangeLogs = class WithChangeLogs {
-};
-WithChangeLogs = __decorate([
-    Entity('change_logs', {
-        saved: async (entity, e) => {
-            await recordSaved(entity, e);
-        },
-        deleted: async (entity, e) => {
-            await recordDeleted(entity, e);
-        },
-    })
-], WithChangeLogs);
-export { WithChangeLogs };
 /**
- * in an entity, add these 2 functions:
+ * ## Default way
+ * The easiest is to switch from `@Entity` to `@FF_Entity` to the entities where you want to log changes.
+ *
  * ```ts
+ * \@FF_Entity<User>('users', {
+ *
+ *   // Optional => To disable change logs
+ *   // changeLog: false,
  *
- * \@Entity<Task>('tasks', {
+ *   // Optional => To disable some columns from being logged
+ *   // changeLog: {
+ *   //   excludeColumns: (e) => {
+ *   //     return [e.password]
+ *   //   },
+ *   // },
+ * })
+ * export class User {}
+ * ```
+ *
+ * ## Manual way
+ * If you want to go more manual, you can import these functions and call them in your entity's lifecycle events.
+ * ```ts
+ * \@Entity<User>('users', {
  *   saved: async (entity, e) => {
  *     await recordSaved(entity, e)
  *   },
@@ -30,7 +36,7 @@ export { WithChangeLogs };
  *     await recordDeleted(entity, e)
  *   },
  * })
- *
+ * export class User {}
  * ```
  */
 export const changeLog = () => {
@@ -74,8 +80,8 @@ __decorate([
     Fields.boolean()
 ], ChangeLog.prototype, "deleted", void 0);
 ChangeLog = __decorate([
-    Entity('change_logs', {
-        caption: 'Change Logs',
+    Entity('_ff_change_logs', {
+        caption: 'FF Change Logs',
         allowApiCrud: false,
         defaultOrderBy: {
             changeDate: 'desc',

package/esm/feedback/FeedbackController.d.ts

@@ -8,7 +8,8 @@ export declare class FeedbackController {
         id: string;
         number: number;
         titleHTML: string;
-        state: 'OPEN' | 'CLOSED';
+        state: string;
+        highlight: boolean;
     }[]>;
     static getIssue(issueNumber: number): Promise<{
         id: any;
@@ -19,12 +20,20 @@ export declare class FeedbackController {
             createdAt: Date;
             public: boolean;
         }[];
+        labels: any;
+        highlight: any;
     }>;
     static createIssue(milestoneId: string, title: string, body: string, page: string): Promise<{
         id: string;
         number: number;
     }>;
-    static addCommentOnIssue(issueId: string, body: string, page: string): Promise<string>;
-    static close(issueId: string): Promise<string>;
+    static addCommentOnIssue(issueId: string, body: string, page: string, labels: {
+        id: string;
+        name: string;
+    }[]): Promise<string>;
+    static close(issueId: string, labels: {
+        id: string;
+        name: string;
+    }[]): Promise<string>;
     static reOpen(issueId: string): Promise<string>;
 }

package/esm/feedback/FeedbackController.js

@@ -117,6 +117,11 @@ export class FeedbackController {
 								number
 								titleHTML
 								state
+                labels(first:10){
+                  nodes {
+                    name
+                  }
+                }
 							}
 						}
 					}
@@ -132,7 +137,18 @@ export class FeedbackController {
             },
             issueOrder,
         });
-        return data.repository.milestone.issues.nodes;
+        return data.repository.milestone.issues.nodes.map((issue) => {
+            const hasWaitingForAnswerLabel = FEEDBACK_OPTIONS.highlight_label
+                ? issue.labels.nodes.some((label) => label.name.includes(FEEDBACK_OPTIONS.highlight_label))
+                : false;
+            return {
+                id: issue.id,
+                number: issue.number,
+                titleHTML: issue.titleHTML,
+                state: issue.state,
+                highlight: hasWaitingForAnswerLabel,
+            };
+        });
     }
     static async getIssue(issueNumber) {
         const data = await getGitHub(`query Issue($repository: String!, $owner: String!, $issueNumber: Int!) {
@@ -142,6 +158,12 @@ export class FeedbackController {
 						createdAt
 						bodyHTML
 						state
+            labels(first: 25){
+              nodes{
+                id
+                name
+              }
+            }
 						comments(first: 100) {
 							nodes {
 								id
@@ -189,10 +211,15 @@ export class FeedbackController {
                 });
             }
         }
+        const hasWaitingForAnswerLabel = FEEDBACK_OPTIONS.highlight_label
+            ? data.repository.issue.labels.nodes.some((label) => label.name.includes(FEEDBACK_OPTIONS.highlight_label))
+            : false;
         const toRet = {
             id: data.repository.issue.id,
             state: data.repository.issue.state,
             items: items.filter((c) => c.public),
+            labels: data.repository.issue.labels.nodes,
+            highlight: hasWaitingForAnswerLabel,
         };
         return toRet;
     }
@@ -237,39 +264,63 @@ export class FeedbackController {
         await addMetaData(toRet.id, remult.user?.name, page);
         return toRet;
     }
-    static async addCommentOnIssue(issueId, body, page) {
-        const input = {
+    static async addCommentOnIssue(issueId, body, page, labels) {
+        const inputComment = {
             subjectId: issueId,
             body,
         };
-        await getGitHub(`mutation AddComment($input: AddCommentInput!) {
-				addComment(input: $input) {
+        const inputIssue = {
+            id: issueId,
+            labelIds: (FEEDBACK_OPTIONS.highlight_label
+                ? labels.filter((c) => c.name !== FEEDBACK_OPTIONS.highlight_label)
+                : labels).map((c) => c.id),
+        };
+        await getGitHub(`mutation AddComment($inputComment: AddCommentInput!, $inputIssue: UpdateIssueInput!) {
+				addComment(input: $inputComment) {
 					commentEdge {
 						node {
 							id
 						}
 					}
 				}
+        updateIssue(input: $inputIssue) {
+          issue {
+            id
+          }
+        }
 			}
 			`, {
-            input,
+            inputComment,
+            inputIssue,
         });
         await addMetaData(issueId, remult.user?.name, page);
         return 'done';
     }
-    static async close(issueId) {
-        const input = {
+    static async close(issueId, labels) {
+        const inputClose = {
             issueId,
         };
-        await getGitHub(`mutation CloseIssue($input: CloseIssueInput!) {
-				closeIssue(input: $input) {
+        const inputIssue = {
+            id: issueId,
+            labelIds: (FEEDBACK_OPTIONS.highlight_label
+                ? labels.filter((c) => c.name !== FEEDBACK_OPTIONS.highlight_label)
+                : labels).map((c) => c.id),
+        };
+        await getGitHub(`mutation CloseIssue($inputIssue: UpdateIssueInput!, $inputClose: CloseIssueInput!) {
+        updateIssue(input: $inputIssue) {
+          issue {
+            id
+          }
+        }
+				closeIssue(input: $inputClose) {
 					issue {
 						id
 					}
 				}
 			}
 			`, {
-            input,
+            inputIssue,
+            inputClose,
         });
         return 'done';
     }

package/esm/feedback/index.d.ts

@@ -12,6 +12,7 @@ type FeedbackOptions = {
         title_filter?: string;
         labels_filters?: string[];
     };
+    highlight_label?: string;
     create_label?: string;
 };
 export declare let FEEDBACK_OPTIONS: FeedbackOptions;

package/esm/feedback/ui/DialogIssue.svelte

@@ -29,22 +29,36 @@ const send = async () => {
     const result = await FeedbackController.createIssue(milestoneId, title, content, p);
     issueNumber = result.number;
   } else {
-    await FeedbackController.addCommentOnIssue(issue.id, content, p);
+    await FeedbackController.addCommentOnIssue(issue.id, content, p, issue.labels);
   }
   content = "";
   await update();
+  state = "done";
 };
 const close = async () => {
   state = "loading";
-  await FeedbackController.close(issue.id);
+  await FeedbackController.close(issue.id, issue.labels);
   content = "";
   await update();
+  state = "done";
 };
 const reOpen = async () => {
   state = "loading";
   await FeedbackController.reOpen(issue.id);
   content = "";
   await update();
+  state = "done";
+};
+const disableButton = (issueNumber2, title2, content2) => {
+  if (issueNumber2) {
+    if (content2?.length > 2) {
+      return false;
+    }
+  }
+  if (title2?.length > 2 && content2?.length > 2) {
+    return false;
+  }
+  return true;
 };
 </script>
 
@@ -58,7 +72,7 @@ const reOpen = async () => {
       <div class="chat {item.who ? 'chat-start' : 'chat-end'}">
         <div class="avatar chat-image">
           <div class="w-10 rounded-full">
-            <div class="h-10 w-10 {item.who ? 'bg-secondary' : 'bg-primary'}"></div>
+            <div class="h-10 w-10 {item.who ? 'bg-primary' : 'bg-secondary'}"></div>
           </div>
         </div>
         <div class="chat-header">
@@ -73,7 +87,9 @@ const reOpen = async () => {
         <!-- <div class="chat-footer opacity-50">Delivered</div> -->
       </div>
     {/each}
-
+    {#if issue?.highlight}
+      <span class="badge badge-warning">En attente de réponse de TA part 😉, oui 🫵!</span>
+    {/if}
     {#if issueNumber}
       <button on:click={update} class="divider"></button>
     {/if}
@@ -86,16 +102,19 @@ const reOpen = async () => {
       {#if issueNumber === null}
         <Field cell={cellBuildor(repo(FilterEntity), 'title')} bind:value={title} />
       {/if}
-      <Textarea bind:value={content}></Textarea>
+      <Textarea bind:value={content} placeholder="Un peu de détail c'est pas mal... Fais toi Plaiz'"
+      ></Textarea>
       <div class="flex justify-between">
         {#if issueNumber}
-          <Button on:click={close} tabIndex={-1} class="btn-outline btn-error"
-            >Clore le feedback</Button
-          >
+          <Button on:click={close} tabIndex={-1} class="btn-outline btn-error">
+            Clore le feedback
+          </Button>
         {:else}
           <div></div>
         {/if}
-        <Button on:click={send} disabled={content?.length < 3}>Envoyer</Button>
+        <Button on:click={send} disabled={disableButton(issueNumber, title, content)}>
+          Envoyer
+        </Button>
       </div>
     {/if}
   {/if}

package/esm/feedback/ui/DialogIssues.svelte

@@ -75,8 +75,13 @@ onMount(async () => {
       }}
       class="btn-neutral"
     >
-      <div class="w-full text-left">
-        {@html issue.titleHTML}
+      <div class="flex w-full justify-center justify-items-center text-left">
+        <div class="flex-grow">
+          {@html issue.titleHTML}
+        </div>
+        {#if issue.highlight}
+          <span class="badge badge-warning">En attente de réponse</span>
+        {/if}
       </div>
     </Button>
   {:else}

package/esm/handle/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types=".pnpm/@sveltejs+kit@2.5.24_@sveltejs+vite-plugin-svelte@3.1.1_svelte@4.2.18_vite@5.4.1_@types+node@_vtylvkjv5lewhfcl4vq2py4rce/node_modules/@sveltejs/kit" />
+/// <reference types=".pnpm/@sveltejs+kit@2.5.24_@sveltejs+vite-plugin-svelte@3.1.2_svelte@4.2.18_vite@5.4.1_@types+node@_lnml5jetshdinsnlj53joqxhde/node_modules/@sveltejs/kit" />
 import type { Handle } from '@sveltejs/kit';
 import type { RemultSveltekitServer } from 'remult/remult-sveltekit';
 import type { Module } from '../api';

package/esm/index.d.ts

@@ -1,9 +1,10 @@
-/// <reference types=".pnpm/@sveltejs+kit@2.5.24_@sveltejs+vite-plugin-svelte@3.1.1_svelte@4.2.18_vite@5.4.1_@types+node@_vtylvkjv5lewhfcl4vq2py4rce/node_modules/@sveltejs/kit" />
+/// <reference types=".pnpm/@sveltejs+kit@2.5.24_@sveltejs+vite-plugin-svelte@3.1.2_svelte@4.2.18_vite@5.4.1_@types+node@_lnml5jetshdinsnlj53joqxhde/node_modules/@sveltejs/kit" />
 import type { RequestEvent } from '@sveltejs/kit';
 import type { FindOptionsBase } from 'remult';
 import { Log } from '@kitql/helpers';
 import type { BaseEnum, BaseItem, FF_Icon } from './BaseEnum.js';
 import type { CellsInput as CellsInput_ForExport } from './cellsBuildor.js';
+import type { ColumnDeciderArgs } from './changeLog/index.js';
 import { default as DefaultMail } from './mail/templates/DefaultMail.svelte';
 import { storeItem } from './storeItem.js';
 import { storeList } from './storeList.js';
@@ -43,7 +44,7 @@ export { FF_LogToConsole } from './SqlDatabase/FF_LogToConsole.js';
 export { BaseEnum } from './BaseEnum.js';
 export { dialog } from './ui/dialog/dialog.js';
 export { getEntityDisplayValue, isError, getFieldLinkDisplayValue, getEnum, getEnums, } from './helper.js';
-export { buildWhere, getPlaceholder, buildSearchWhere, cellsBuildor, cellBuildor, fieldsOf, } from './cellsBuildor.js';
+export { buildWhere, getPlaceholder, buildSearchWhere, cellsBuildor, cellBuildor, fieldsOf, containsWords, } from './cellsBuildor.js';
 export { storeItem };
 export { storeList };
 export { displayPhone, arrToStr } from './formats/strings.js';
@@ -83,6 +84,7 @@ declare module 'remult' {
         permissionApiInsert?: BaseEnum[] | BaseEnum;
         permissionApiRead?: BaseEnum[] | BaseEnum;
         permissionApiUpdate?: BaseEnum[] | BaseEnum;
+        changeLog?: false | ColumnDeciderArgs<entityType>;
     }
     interface UserInfo {
         session: {

package/esm/index.js

@@ -37,7 +37,7 @@ export { FF_LogToConsole } from './SqlDatabase/FF_LogToConsole.js';
 export { BaseEnum } from './BaseEnum.js';
 export { dialog } from './ui/dialog/dialog.js';
 export { getEntityDisplayValue, isError, getFieldLinkDisplayValue, getEnum, getEnums, } from './helper.js';
-export { buildWhere, getPlaceholder, buildSearchWhere, cellsBuildor, cellBuildor, fieldsOf, } from './cellsBuildor.js';
+export { buildWhere, getPlaceholder, buildSearchWhere, cellsBuildor, cellBuildor, fieldsOf, containsWords, } from './cellsBuildor.js';
 export { storeItem };
 export { storeList };
 export { displayPhone, arrToStr } from './formats/strings.js';

package/esm/ui/Field.svelte

@@ -17,6 +17,7 @@ import MultiSelectMelt from "./internals/select/MultiSelectMelt.svelte";
 import SelectMelt from "./internals/select/SelectMelt.svelte";
 import SelectRadio from "./internals/select/SelectRadio.svelte";
 import Textarea from "./internals/Textarea.svelte";
+import LinkPlus from "./link/LinkPlus.svelte";
 export let cell;
 export let value = void 0;
 export let cellsValues = {};
@@ -153,16 +154,7 @@ const calcSuffix = (value2) => {
       {:else if metaType.kind === 'relation'}
         {@const item = getEntityDisplayValue(metaType.repoTarget, value)}
         <div class={tw('flex items-center gap-4', 'h-12', 'pl-2')}>
-          {#if item && item?.icon}
-            <Icon {...item.icon} />
-          {/if}
-          <div class="grid grid-cols-1">
-            <span>{cell?.header ?? item?.caption ?? '-'}</span>
-            <!-- && captionSubStyle === 'inline' -->
-            {#if item?.captionSub}
-              <span class="text-base-content/70 text-xs italic">{item.captionSub}</span>
-            {/if}
-          </div>
+          <LinkPlus {item}></LinkPlus>
         </div>
       {:else if metaType.kind === 'enum'}
         {@const v = displayWithDefaultAndSuffix(cell.field, value)}

package/esm/ui/GridPaginate.svelte

@@ -4,23 +4,23 @@ import "./LibIcon";
 import { LibIcon_ChevronLeft, LibIcon_ChevronRight } from "./LibIcon";
 import Loading from "./Loading.svelte";
 export let label = "Pagination";
-export let page;
+export let pageDisplayed;
 export let totalCount = void 0;
 export let pageSize = 25;
 const update = (op) => {
   if (op === "+") {
     if (canGoNext) {
-      page = page + 1;
+      pageDisplayed = pageDisplayed + 1;
     }
   } else {
-    if (page > 1) {
-      page = page - 1;
+    if (pageDisplayed > 1) {
+      pageDisplayed = pageDisplayed - 1;
     }
   }
 };
 $: isValidValue = totalCount !== void 0 && totalCount !== null;
 $: needPaginate = isValidValue && (totalCount ?? 0) > pageSize;
-$: canGoNext = isValidValue && needPaginate && page < Math.ceil((totalCount ?? 0) / pageSize);
+$: canGoNext = isValidValue && needPaginate && pageDisplayed < Math.ceil((totalCount ?? 0) / pageSize);
 </script>
 
 <FieldContainer {label} forId="paginate" classes={{ label: 'justify-end' }}>
@@ -36,7 +36,7 @@ $: canGoNext = isValidValue && needPaginate && page < Math.ceil((totalCount ?? 0
         <button
           aria-label="left"
           on:click={() => update('-')}
-          class="btn join-item {page === 1 ? 'btn-disabled' : ''}"
+          class="btn join-item {pageDisplayed === 1 ? 'btn-disabled' : ''}"
         >
           <Icon data={LibIcon_ChevronLeft} />
         </button>
@@ -44,7 +44,7 @@ $: canGoNext = isValidValue && needPaginate && page < Math.ceil((totalCount ?? 0
           <button aria-label="current" class="btn join-item px-0">
             <span class="text-primary font-bold">{totalCount}</span>
             <span class="text-[0.55rem] italic"
-              >({page} / {Math.ceil((totalCount ?? 0) / pageSize)})</span
+              >({pageDisplayed} / {Math.ceil((totalCount ?? 0) / pageSize)})</span
             >
           </button>
         {:else}