@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/web/pagination/pagination.svelte

@@ -0,0 +1,471 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+import Selectbox from "../selectbox/selectbox.svelte";
+export let page = void 0;
+export let maxPages = void 0;
+export let totalPages = void 0;
+export let canPrevPage = void 0;
+export let canNextPage = void 0;
+export let showLimit = void 0;
+export let onLimitChange = void 0;
+export let limitOptions = void 0;
+export let siblingCount = void 0;
+export let className = void 0;
+export let size = void 0;
+export let ui = void 0;
+export let limitClass = void 0;
+export let limitStyle = void 0;
+export let showLimitLabel = void 0;
+export let limitLabel = void 0;
+export let limitSlot = void 0;
+export let limit = void 0;
+export let limitSelectStyle = void 0;
+export let contentClass = void 0;
+export let contentStyle = void 0;
+export let showEdges = void 0;
+export let onFirstPage = void 0;
+export let linkClass = void 0;
+export let onPageChange = void 0;
+export let linkStyle = void 0;
+export let firstIcon = void 0;
+export let onPrevPage = void 0;
+export let prevIcon = void 0;
+export let iconOnly = void 0;
+export let prevText = void 0;
+export let showPageNumbers = void 0;
+export let ellipsisIcon = void 0;
+export let activeLinkClass = void 0;
+export let activeLinkStyle = void 0;
+export let onNextPage = void 0;
+export let nextText = void 0;
+export let nextIcon = void 0;
+export let onLastPage = void 0;
+export let lastIcon = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+function getCurrentPage(_p) {
+  const p = _p !== void 0 ? _p : page;
+  return p !== void 0 ? p : 1;
+}
+function getTotalPages(_max, _total) {
+  const m = _max !== void 0 ? _max : maxPages;
+  if (m !== void 0)
+    return m;
+  const t = _total !== void 0 ? _total : totalPages;
+  if (t !== void 0)
+    return t;
+  return 1;
+}
+function getCanPrev(_p, _can) {
+  const can = _can !== void 0 ? _can : canPrevPage;
+  if (can !== void 0)
+    return can;
+  return getCurrentPage(_p) > 1;
+}
+function getCanNext(_p, _max, _total, _can) {
+  const can = _can !== void 0 ? _can : canNextPage;
+  if (can !== void 0)
+    return can;
+  return getCurrentPage(_p) < getTotalPages(_max, _total);
+}
+function getShouldShowLimit(_show, _cb) {
+  const show = _show !== void 0 ? _show : showLimit;
+  if (show !== void 0) {
+    return Boolean(show);
+  }
+  return Boolean(_cb !== void 0 ? _cb : onLimitChange);
+}
+function getLimitOptions() {
+  const opts = limitOptions || [10, 20, 50, 100];
+  return opts.map((opt) => ({
+    label: String(opt),
+    value: opt
+  }));
+}
+function getPageRange(_p, _max, _total, _sibling) {
+  const total = getTotalPages(_max, _total);
+  const current = getCurrentPage(_p);
+  const sibling = _sibling !== void 0 ? _sibling : siblingCount !== void 0 ? siblingCount : 1;
+  if (total <= 1) {
+    return [
+      {
+        type: "page",
+        value: 1,
+        key: "page-1"
+      }
+    ];
+  }
+  const totalPageNumbers = sibling * 2 + 5;
+  if (total <= totalPageNumbers) {
+    const pages2 = [];
+    for (let i = 1; i <= total; i++) {
+      pages2.push({
+        type: "page",
+        value: i,
+        key: `page-${i}`
+      });
+    }
+    return pages2;
+  }
+  const leftSiblingIndex = Math.max(current - sibling, 1);
+  const rightSiblingIndex = Math.min(current + sibling, total);
+  const shouldShowLeftDots = leftSiblingIndex > 2;
+  const shouldShowRightDots = rightSiblingIndex < total - 1;
+  if (!shouldShowLeftDots && shouldShowRightDots) {
+    const leftItemCount = 3 + 2 * sibling;
+    const pages2 = [];
+    for (let i = 1; i <= leftItemCount; i++) {
+      pages2.push({
+        type: "page",
+        value: i,
+        key: `page-${i}`
+      });
+    }
+    pages2.push({
+      type: "ellipsis",
+      value: "...",
+      key: "ellipsis-right"
+    });
+    pages2.push({
+      type: "page",
+      value: total,
+      key: `page-${total}`
+    });
+    return pages2;
+  }
+  if (shouldShowLeftDots && !shouldShowRightDots) {
+    const rightItemCount = 3 + 2 * sibling;
+    const pages2 = [
+      {
+        type: "page",
+        value: 1,
+        key: "page-1"
+      },
+      {
+        type: "ellipsis",
+        value: "...",
+        key: "ellipsis-left"
+      }
+    ];
+    for (let i = total - rightItemCount + 1; i <= total; i++) {
+      pages2.push({
+        type: "page",
+        value: i,
+        key: `page-${i}`
+      });
+    }
+    return pages2;
+  }
+  const pages = [
+    {
+      type: "page",
+      value: 1,
+      key: "page-1"
+    },
+    {
+      type: "ellipsis",
+      value: "...",
+      key: "ellipsis-left"
+    }
+  ];
+  for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+    pages.push({
+      type: "page",
+      value: i,
+      key: `page-${i}`
+    });
+  }
+  pages.push({
+    type: "ellipsis",
+    value: "...",
+    key: "ellipsis-right"
+  });
+  pages.push({
+    type: "page",
+    value: total,
+    key: `page-${total}`
+  });
+  return pages;
+}
+function handleLimitChange(val) {
+  if (onLimitChange) {
+    onLimitChange(Number(val));
+  }
+}
+</script>
+
+<nav
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  role="navigation"
+  aria-label="pagination"
+  class={`ttdk-pagination ${className || ""}`.trim()}
+  data-size={size || "md"}
+>
+  {#if $$slots.default}
+    <slot />
+  {/if}
+  {#if !$$slots.default}
+    <div class="ttdk-pagination-auto-wrapper">
+      {#if getShouldShowLimit(showLimit, onLimitChange)}
+        <div
+          style={stringifyStyles({
+            ...buildUiVars(limitStyle),
+          })}
+          class={`ttdk-pagination-limit ${limitClass || ""}`.trim()}
+        >
+          {#if showLimitLabel !== false}
+            <span class="ttdk-pagination-limit-label"
+              >{limitLabel || "Baris per halaman:"}</span
+            >
+          {/if}
+          {#if limitSlot}
+            {limitSlot}
+          {/if}
+          {#if !limitSlot}
+            <Selectbox
+              size={size === "lg" ? "md" : "sm"}
+              value={limit || 10}
+              options={getLimitOptions()}
+              onChange={(val) => handleLimitChange(val)}
+              controlStyle={{
+                minWidth: "70px",
+                width: "76px",
+                height:
+                  size === "sm" ? "28px" : size === "lg" ? "44px" : "36px",
+                minHeight:
+                  size === "sm" ? "28px" : size === "lg" ? "44px" : "36px",
+                padding: "0 8px",
+                fontSize: "12px",
+                ...buildUiVars(limitSelectStyle),
+              }}
+            />
+          {/if}
+        </div>
+      {/if}
+      <ul
+        style={stringifyStyles({
+          ...buildUiVars(contentStyle),
+        })}
+        class={`ttdk-pagination-content ${contentClass || ""}`.trim()}
+      >
+        {#if showEdges || Boolean(onFirstPage)}
+          <li class="ttdk-pagination-item">
+            <button
+              style={stringifyStyles({
+                ...buildUiVars(linkStyle),
+              })}
+              type="button"
+              aria-label="Go to first page"
+              class={`ttdk-pagination-link ttdk-pagination-first ${
+                linkClass || ""
+              }`.trim()}
+              data-size={size || "md"}
+              data-disabled={!getCanPrev(page, canPrevPage) ? "true" : "false"}
+              disabled={!getCanPrev(page, canPrevPage)}
+              on:click={(event) => {
+                if (onFirstPage) {
+                  onFirstPage();
+                } else if (onPageChange) {
+                  onPageChange(1);
+                }
+              }}
+            >
+              {#if firstIcon}
+                {firstIcon}
+              {/if}
+              {#if !firstIcon}
+                <svg
+                  class="ttdk-pagination-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  aria-hidden="true"
+                  ><polyline points="11 17 6 12 11 7" /><polyline
+                    points="18 17 13 12 18 7"
+                  /></svg
+                >
+              {/if}</button
+            >
+          </li>
+        {/if}
+        <li class="ttdk-pagination-item">
+          <button
+            style={stringifyStyles({
+              ...buildUiVars(linkStyle),
+            })}
+            type="button"
+            aria-label="Go to previous page"
+            class={`ttdk-pagination-link ttdk-pagination-prev ${
+              linkClass || ""
+            }`.trim()}
+            data-size={size || "md"}
+            data-disabled={!getCanPrev(page, canPrevPage) ? "true" : "false"}
+            disabled={!getCanPrev(page, canPrevPage)}
+            on:click={(event) => {
+              if (onPrevPage) {
+                onPrevPage();
+              } else if (onPageChange) {
+                onPageChange(Math.max(1, getCurrentPage(page) - 1));
+              }
+            }}
+          >
+            {#if prevIcon}
+              {prevIcon}
+            {/if}
+            {#if !prevIcon}
+              <svg
+                class="ttdk-pagination-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg
+              >
+            {/if}
+            {#if !iconOnly}
+              <span class="ttdk-pagination-prev-text"
+                >{prevText || "Previous"}</span
+              >
+            {/if}</button
+          >
+        </li>
+        {#if showPageNumbers !== false}
+          {#each getPageRange(page, maxPages, totalPages, siblingCount) as item (item.key)}
+            <li class="ttdk-pagination-item">
+              {#if item.type === "ellipsis"}
+                <span aria-hidden="true" class="ttdk-pagination-ellipsis">
+                  {#if ellipsisIcon}
+                    {ellipsisIcon}
+                  {/if}
+                  {#if !ellipsisIcon}
+                    <svg
+                      class="ttdk-pagination-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      ><circle cx="12" cy="12" r="1" /><circle
+                        cx="19"
+                        cy="12"
+                        r="1"
+                      /><circle cx="5" cy="12" r="1" /></svg
+                    >
+                  {/if}<span class="ttdk-sr-only">More pages</span></span
+                >
+              {/if}
+              {#if item.type === "page"}
+                <button
+                  style={stringifyStyles({
+                    ...buildUiVars(linkStyle),
+                    ...(item.value === getCurrentPage(page)
+                      ? buildUiVars(activeLinkStyle)
+                      : {}),
+                  })}
+                  type="button"
+                  class={`ttdk-pagination-link ${linkClass || ""} ${
+                    item.value === getCurrentPage(page) ? activeLinkClass || "" : ""
+                  }`.trim()}
+                  aria-current={item.value === getCurrentPage(page)
+                    ? "page"
+                    : undefined}
+                  data-active={item.value === getCurrentPage(page)
+                    ? "true"
+                    : "false"}
+                  data-size={size || "md"}
+                  on:click={(event) => {
+                    if (onPageChange) {
+                      onPageChange(Number(item.value));
+                    }
+                  }}>{item.value}</button
+                >
+              {/if}
+            </li>
+          {/each}
+        {/if}
+        <li class="ttdk-pagination-item">
+          <button
+            style={stringifyStyles({
+              ...buildUiVars(linkStyle),
+            })}
+            type="button"
+            aria-label="Go to next page"
+            class={`ttdk-pagination-link ttdk-pagination-next ${
+              linkClass || ""
+            }`.trim()}
+            data-size={size || "md"}
+            data-disabled={!getCanNext(page, maxPages, totalPages, canNextPage) ? "true" : "false"}
+            disabled={!getCanNext(page, maxPages, totalPages, canNextPage)}
+            on:click={(event) => {
+              if (onNextPage) {
+                onNextPage();
+              } else if (onPageChange) {
+                onPageChange(Math.min(getTotalPages(maxPages, totalPages), getCurrentPage(page) + 1));
+              }
+            }}
+          >
+            {#if !iconOnly}
+              <span class="ttdk-pagination-next-text">{nextText || "Next"}</span
+              >
+            {/if}
+            {#if nextIcon}
+              {nextIcon}
+            {/if}
+            {#if !nextIcon}
+              <svg
+                class="ttdk-pagination-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"><polyline points="9 18 15 12 9 6" /></svg
+              >
+            {/if}</button
+          >
+        </li>
+        {#if showEdges || Boolean(onLastPage)}
+          <li class="ttdk-pagination-item">
+            <button
+              style={stringifyStyles({
+                ...buildUiVars(linkStyle),
+              })}
+              type="button"
+              aria-label="Go to last page"
+              class={`ttdk-pagination-link ttdk-pagination-last ${
+                linkClass || ""
+              }`.trim()}
+              data-size={size || "md"}
+              data-disabled={!getCanNext(page, maxPages, totalPages, canNextPage) ? "true" : "false"}
+              disabled={!getCanNext(page, maxPages, totalPages, canNextPage)}
+              on:click={(event) => {
+                if (onLastPage) {
+                  onLastPage();
+                } else if (onPageChange) {
+                  onPageChange(getTotalPages(maxPages, totalPages));
+                }
+              }}
+            >
+              {#if lastIcon}
+                {lastIcon}
+              {/if}
+              {#if !lastIcon}
+                <svg
+                  class="ttdk-pagination-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  aria-hidden="true"
+                  ><polyline points="13 17 18 12 13 7" /><polyline
+                    points="6 17 11 12 6 7"
+                  /></svg
+                >
+              {/if}</button
+            >
+          </li>
+        {/if}
+      </ul>
+    </div>
+  {/if}
+</nav>