feat: add customize slots for pagination

Casual-UI · Jul 27, 2023 · d24d2aa · d24d2aa
1 parent f2f9524
commit d24d2aa
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 31 deletions.
diff --git a/.changeset/cold-rocks-tan.md b/.changeset/cold-rocks-tan.md
@@ -0,0 +1,5 @@
+---
+'@casual-ui/svelte': minor
+---
+
+feat: add customize slots for pagination
diff --git a/packages/docs/src/routes/features/components/data-presentation/pagination/+page.md b/packages/docs/src/routes/features/components/data-presentation/pagination/+page.md
@@ -41,7 +41,7 @@ componentName: CPagination
 <div class="c-column c-gutter-md">
   <CPagination pages={6} bind:current size="xs" />
   <CPagination pages={6} bind:current size="sm" shape="rounded" />
-  <CPagination pages={6} bind:current round shape="circle" />
+  <CPagination pages={6} bind:current shape="circle" />
   <CPagination pages={6} bind:current size="lg" shape="rounded" />
   <CPagination pages={6} bind:current size="xl" />
 </div>
@@ -114,4 +114,55 @@ componentName: CPagination
 </script>
 
 <CPagination pages={10} maxDisplayPages={3} bind:current />
+```
+
+## Customize buttons with slots
+
+```svelte live
+<script>
+  import { CButton, CPagination } from '@casual-ui/svelte'
+
+  let current = 4
+</script>
+
+<CPagination pages={10} maxDisplayPages={3} bind:current>
+  <button slot="to-first" let:set let:disabled on:click={set} {disabled}>
+    To first
+  </button>
+  <CButton
+    slot="to-prev"
+    let:set
+    let:disabled
+    on:click={set}
+    {disabled}
+    flat
+    theme="negative"
+    >
+    <div class="i-ph-arrow-arc-left-fill"></div>
+  </CButton>
+
+  <CButton slot="left-ellipsis" let:set flat theme="warning" on:click={set}>
+    <div class="i-ion-ellipsis-horizontal-circle"></div>
+  </CButton>
+
+  <CButton slot="right-ellipsis" let:set flat theme="warning" on:click={set}>
+    <div class="i-octicon-ellipsis-16"></div>
+  </CButton>
+
+  <CButton
+    slot="to-next"
+    let:set
+    let:disabled
+    on:click={set}
+    {disabled}
+    flat
+    theme="secondary"
+    >
+    <div class="i-ph-arrow-arc-right-fill"></div>
+  </CButton>
+
+   <button slot="to-last" let:set let:disabled on:click={set} {disabled}>
+    To last
+  </button>
+</CPagination>
 ```
diff --git a/packages/styles b/packages/styles
diff --git a/packages/ui/src/components/CPagination.svelte b/packages/ui/src/components/CPagination.svelte
@@ -114,61 +114,106 @@
   )}
 >
   {#if showBoundaryButton}
-    <slot name="to-first" {toFirst}>
-      <div class={`${classPrefix}--to-first`}>
-        <CButton disabled={isFirst} on:click={toFirst}>
+    <div class={`${classPrefix}--to-first`}>
+      <!--
+        Customize the "to first" button
+        @param {function} do set first page
+      -->
+      <slot name="to-first" set={toFirst} disabled={isFirst}>
+        <CButton disabled={isFirst} on:click={toFirst} flat>
           <div class="i-material-symbols-keyboard-double-arrow-left" />
         </CButton>
-      </div>
-    </slot>
+      </slot>
+    </div>
   {/if}
   {#if showPrevNextButton}
     <div class={`${classPrefix}--to-prev`}>
-      <CButton disabled={isFirst} on:click={toPrev}>
-        <div class="i-material-symbols-chevron-left" />
-      </CButton>
+      <!--
+        Customize the "to prev" button
+        @param {function} set Do set previous page
+        @param {boolean} disabled Determine whether the button should be disabled or not
+      -->
+      <slot name="to-prev" set={toPrev} disabled={isFirst}>
+        <CButton disabled={isFirst} on:click={toPrev} flat>
+          <div class="i-material-symbols-chevron-left" />
+        </CButton>
+      </slot>
     </div>
   {/if}
   {#if showEllipsesLeft}
     <div>
-      <CButton flat on:click={toEllipsesLeft}>
-        {#if pagesArray[0] > 2}
-          <div class="i-tabler-dots" />
-        {:else}
-          1
-        {/if}
-      </CButton>
+      <!--
+        Customize the left ellipsis button
+        @param {function} do set left ellipsis page
+      -->
+      <slot name="left-ellipsis" set={toEllipsesLeft}>
+        <CButton flat on:click={toEllipsesLeft}>
+          {#if pagesArray[0] > 2}
+            <div class="i-tabler-dots" />
+          {:else}
+            1
+          {/if}
+        </CButton>
+      </slot>
     </div>
   {/if}
   {#each pagesArray as p}
     <div>
-      <CButton label={p} flat={p !== current} on:click={() => (current = p)} />
+      <!--
+        Customize the page button
+        @param {number} page number
+      -->
+      <slot name="page-button" {p}>
+        <CButton
+          label={p}
+          flat={p !== current}
+          on:click={() => (current = p)}
+        />
+      </slot>
     </div>
   {/each}
   {#if showEllipsesRight}
     <div>
-      <CButton flat on:click={toEllipsesRight}>
-        {#if pagesArray.at(-1) < pages - 1}
-          <div class="i-tabler-dots" />
-        {:else}
-          {pages}
-        {/if}
-      </CButton>
+      <!--
+        Customize the right ellipsis button
+        @param {function} do set right ellipsis page
+      -->
+      <slot name="right-ellipsis" set={toEllipsesRight}>
+        <CButton flat on:click={toEllipsesRight}>
+          {#if pagesArray.at(-1) < pages - 1}
+            <div class="i-tabler-dots" />
+          {:else}
+            {pages}
+          {/if}
+        </CButton>
+      </slot>
     </div>
   {/if}
   {#if showPrevNextButton}
     <div class={`${classPrefix}--to-next`}>
-      <CButton disabled={isLast} on:click={toNext}>
-        <div class="i-material-symbols-chevron-right" />
-      </CButton>
+      <!--
+        Customize the "to next" button
+        @param {function} do set next page
+      -->
+      <slot name="to-next" set={toNext} disabled={isLast}>
+        <CButton disabled={isLast} on:click={toNext} flat>
+          <div class="i-material-symbols-chevron-right" />
+        </CButton>
+      </slot>
     </div>
   {/if}
 
   {#if showBoundaryButton}
     <div class={`${classPrefix}--to-last`}>
-      <CButton disabled={isLast} on:click={toLast}>
-        <div class="i-material-symbols-keyboard-double-arrow-right" />
-      </CButton>
+      <!--
+        Customize the "to last" button
+        @param {function} do set last page
+      -->
+      <slot name="to-last" set={toLast} disabled={isLast}>
+        <CButton disabled={isLast} on:click={toLast} flat>
+          <div class="i-material-symbols-keyboard-double-arrow-right" />
+        </CButton>
+      </slot>
     </div>
   {/if}
 </div>