docs: optimize CPagination and CImage docs

.changeset/eleven-rockets-allow.md

@@ -0,0 +1,5 @@
+---
+'@casual-ui/svelte': minor
+---
+
+docs: optimize CPagination and CImage docs

packages/docs/src/routes/features/components/data-presentation/pagination/+page.md

@@ -127,6 +127,12 @@ componentName: CPagination
     <div class="i-ion-ellipsis-horizontal-circle"></div>
   </CButton>
 
+  <button slot="page-button" let:p let:active on:click={() => (current = p)}>
+    <span class:c-text-primary={active} class:c-font-xl={active}>
+      {p}
+    </span>
+  </button>
+
   <CButton slot="right-ellipsis" let:set flat theme="warning" on:click={set}>
     <div class="i-octicon-ellipsis-16"></div>
   </CButton>

packages/ui/src/components/CBadge.svelte

@@ -0,0 +1,17 @@
+<script>
+  /**
+   * The label text content
+   * @type {string}
+   */
+  export let label = undefined
+</script>
+
+<div class="c-badge">
+  {#if label}
+    <div class="c-badge--label">
+      {label}
+    </div>
+  {/if}
+  <!-- The content that holds the badge -->
+  <slot />
+</div>

packages/ui/src/components/CImage.svelte

@@ -9,7 +9,7 @@
   export let src
 
   /**
-   * The default image src
+   * The default image src used before real src image loaded
    * @type
    */
   export let placeholderSrc =
@@ -85,13 +85,18 @@
   {#if imagePromise}
     {#await imagePromise}
       <div class="c-image--loading">
+        <!-- Customize loading content -->
         <slot name="loading">
           <CLoading />
         </slot>
       </div>
     {:then src}
       <img {src} {alt} {width} class="{imgClass}" {...$$restProps} />
     {:catch err}
+      <!--
+        Customize the error status
+        @param {any} err The error object
+      -->
       <slot name="err" {err}>
         <div>
           {err}