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

package/dist/web/pagination/pagination-first.svelte

@@ -0,0 +1,105 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let href = void 0;
+export let disabled = void 0;
+export let className = void 0;
+export let ariaLabel = void 0;
+export let size = void 0;
+export let ui = void 0;
+export let onClick = void 0;
+export let icon = void 0;
+export let iconOnly = void 0;
+export let text = 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;
+}
+</script>
+
+{#if Boolean(href) && !disabled}
+  <a
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    {href}
+    class={`ttdk-pagination-link ttdk-pagination-first ${
+      className || ""
+    }`.trim()}
+    aria-label={ariaLabel || "Go to first page"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    on:click={(e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    }}
+  >
+    {#if icon}
+      {icon}
+    {/if}
+    {#if !icon}
+      <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}
+    {#if !iconOnly && Boolean(text)}
+      <span class="ttdk-pagination-first-text">{text}</span>
+    {/if}</a
+  >
+{/if}
+
+{#if !href || Boolean(disabled)}
+  <button
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    type="button"
+    class={`ttdk-pagination-link ttdk-pagination-first ${
+      className || ""
+    }`.trim()}
+    aria-label={ariaLabel || "Go to first page"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    {disabled}
+    on:click={(e) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    }}
+  >
+    {#if icon}
+      {icon}
+    {/if}
+    {#if !icon}
+      <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}
+    {#if !iconOnly && Boolean(text)}
+      <span class="ttdk-pagination-first-text">{text}</span>
+    {/if}</button
+  >
+{/if}

package/dist/web/pagination/pagination-first.svelte.d.ts

@@ -0,0 +1,74 @@
+import { SvelteComponent } from "svelte";
+export interface PaginationFirstProps {
+    /**
+     * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+     */
+    href?: string;
+    /**
+     * Teks label tombol opsional.
+     */
+    text?: string;
+    /**
+     * Mode hanya menampilkan ikon tanpa teks.
+     * @default true
+     */
+    iconOnly?: boolean;
+    /**
+     * Menonaktifkan tombol.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Skala ukuran tombol.
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg" | "icon";
+    /**
+     * Kustomisasi visual granular tombol navigasi (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Callback saat tombol diklik.
+     */
+    onClick?: (event?: any) => void;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Label aksesibilitas ARIA.
+     * @default 'Go to first page'
+     */
+    ariaLabel?: string;
+    /**
+     * Ikon kustom untuk tombol first page (menggantikan <<).
+     */
+    icon?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        href?: PaginationFirstProps["href"];
+        disabled?: PaginationFirstProps["disabled"];
+        className?: PaginationFirstProps["className"];
+        ariaLabel?: PaginationFirstProps["ariaLabel"];
+        size?: PaginationFirstProps["size"];
+        ui?: PaginationFirstProps["ui"];
+        onClick?: PaginationFirstProps["onClick"];
+        icon?: PaginationFirstProps["icon"];
+        iconOnly?: PaginationFirstProps["iconOnly"];
+        text?: PaginationFirstProps["text"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type PaginationFirstProps_ = typeof __propDef.props;
+export type PaginationFirstEvents = typeof __propDef.events;
+export type PaginationFirstSlots = typeof __propDef.slots;
+export default class PaginationFirst extends SvelteComponent<PaginationFirstProps_, PaginationFirstEvents, PaginationFirstSlots> {
+}
+export {};

package/dist/web/pagination/pagination-item.svelte

@@ -0,0 +1,25 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let ui = 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;
+}
+</script>
+
+<li
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-pagination-item ${className || ""}`.trim()}
+>
+  <slot />
+</li>

package/dist/web/pagination/pagination-item.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+export interface PaginationItemProps {
+    /**
+     * Kustomisasi visual granular li.ttdk-pagination-item (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten pagination item.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: PaginationItemProps["className"];
+        ui?: PaginationItemProps["ui"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type PaginationItemProps_ = typeof __propDef.props;
+export type PaginationItemEvents = typeof __propDef.events;
+export type PaginationItemSlots = typeof __propDef.slots;
+export default class PaginationItem extends SvelteComponent<PaginationItemProps_, PaginationItemEvents, PaginationItemSlots> {
+}
+export {};

package/dist/web/pagination/pagination-last.svelte

@@ -0,0 +1,105 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let href = void 0;
+export let disabled = void 0;
+export let className = void 0;
+export let ariaLabel = void 0;
+export let size = void 0;
+export let ui = void 0;
+export let onClick = void 0;
+export let iconOnly = void 0;
+export let text = void 0;
+export let icon = 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;
+}
+</script>
+
+{#if Boolean(href) && !disabled}
+  <a
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    {href}
+    class={`ttdk-pagination-link ttdk-pagination-last ${
+      className || ""
+    }`.trim()}
+    aria-label={ariaLabel || "Go to last page"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    on:click={(e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    }}
+  >
+    {#if !iconOnly && Boolean(text)}
+      <span class="ttdk-pagination-last-text">{text}</span>
+    {/if}
+    {#if icon}
+      {icon}
+    {/if}
+    {#if !icon}
+      <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}</a
+  >
+{/if}
+
+{#if !href || Boolean(disabled)}
+  <button
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    type="button"
+    class={`ttdk-pagination-link ttdk-pagination-last ${
+      className || ""
+    }`.trim()}
+    aria-label={ariaLabel || "Go to last page"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    {disabled}
+    on:click={(e) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    }}
+  >
+    {#if !iconOnly && Boolean(text)}
+      <span class="ttdk-pagination-last-text">{text}</span>
+    {/if}
+    {#if icon}
+      {icon}
+    {/if}
+    {#if !icon}
+      <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
+  >
+{/if}

package/dist/web/pagination/pagination-last.svelte.d.ts

@@ -0,0 +1,74 @@
+import { SvelteComponent } from "svelte";
+export interface PaginationLastProps {
+    /**
+     * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+     */
+    href?: string;
+    /**
+     * Teks label tombol opsional.
+     */
+    text?: string;
+    /**
+     * Mode hanya menampilkan ikon tanpa teks.
+     * @default true
+     */
+    iconOnly?: boolean;
+    /**
+     * Menonaktifkan tombol.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Skala ukuran tombol.
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg" | "icon";
+    /**
+     * Kustomisasi visual granular tombol navigasi (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Callback saat tombol diklik.
+     */
+    onClick?: (event?: any) => void;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Label aksesibilitas ARIA.
+     * @default 'Go to last page'
+     */
+    ariaLabel?: string;
+    /**
+     * Ikon kustom untuk tombol last page (menggantikan >>).
+     */
+    icon?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        href?: PaginationLastProps["href"];
+        disabled?: PaginationLastProps["disabled"];
+        className?: PaginationLastProps["className"];
+        ariaLabel?: PaginationLastProps["ariaLabel"];
+        size?: PaginationLastProps["size"];
+        ui?: PaginationLastProps["ui"];
+        onClick?: PaginationLastProps["onClick"];
+        iconOnly?: PaginationLastProps["iconOnly"];
+        text?: PaginationLastProps["text"];
+        icon?: PaginationLastProps["icon"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type PaginationLastProps_ = typeof __propDef.props;
+export type PaginationLastEvents = typeof __propDef.events;
+export type PaginationLastSlots = typeof __propDef.slots;
+export default class PaginationLast extends SvelteComponent<PaginationLastProps_, PaginationLastEvents, PaginationLastSlots> {
+}
+export {};

package/dist/web/pagination/pagination-link.svelte

@@ -0,0 +1,67 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let href = void 0;
+export let disabled = void 0;
+export let className = void 0;
+export let isActive = void 0;
+export let ariaLabel = void 0;
+export let size = void 0;
+export let ui = void 0;
+export let onClick = 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;
+}
+</script>
+
+{#if Boolean(href) && !disabled}
+  <a
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    {href}
+    class={`ttdk-pagination-link ${className || ""}`.trim()}
+    aria-current={isActive ? "page" : undefined}
+    aria-label={ariaLabel}
+    data-active={isActive ? "true" : "false"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    on:click={(e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    }}><slot /></a
+  >
+{/if}
+
+{#if !href || Boolean(disabled)}
+  <button
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    type="button"
+    class={`ttdk-pagination-link ${className || ""}`.trim()}
+    aria-current={isActive ? "page" : undefined}
+    aria-label={ariaLabel}
+    data-active={isActive ? "true" : "false"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    {disabled}
+    on:click={(e) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    }}><slot /></button
+  >
+{/if}

package/dist/web/pagination/pagination-link.svelte.d.ts

@@ -0,0 +1,69 @@
+import { SvelteComponent } from "svelte";
+export interface PaginationLinkProps {
+    /**
+     * Menandai item sebagai halaman yang sedang aktif saat ini.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Menonaktifkan link atau tombol halaman.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Ukuran link pagination.
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg" | "icon";
+    /**
+     * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+     */
+    href?: string;
+    /**
+     * Kustomisasi visual granular tombol link pagination (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Callback saat link atau tombol diklik.
+     */
+    onClick?: (event?: any) => void;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Label aksesibilitas ARIA.
+     */
+    ariaLabel?: string;
+    /**
+     * Konten teks atau elemen anak di dalam link pagination.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        href?: PaginationLinkProps["href"];
+        disabled?: PaginationLinkProps["disabled"];
+        className?: PaginationLinkProps["className"];
+        isActive?: PaginationLinkProps["isActive"];
+        ariaLabel?: PaginationLinkProps["ariaLabel"];
+        size?: PaginationLinkProps["size"];
+        ui?: PaginationLinkProps["ui"];
+        onClick?: PaginationLinkProps["onClick"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type PaginationLinkProps_ = typeof __propDef.props;
+export type PaginationLinkEvents = typeof __propDef.events;
+export type PaginationLinkSlots = typeof __propDef.slots;
+export default class PaginationLink extends SvelteComponent<PaginationLinkProps_, PaginationLinkEvents, PaginationLinkSlots> {
+}
+export {};

package/dist/web/pagination/pagination-next.svelte

@@ -0,0 +1,99 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let href = void 0;
+export let disabled = void 0;
+export let className = void 0;
+export let ariaLabel = void 0;
+export let size = void 0;
+export let ui = void 0;
+export let onClick = void 0;
+export let iconOnly = void 0;
+export let text = void 0;
+export let icon = 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;
+}
+</script>
+
+{#if Boolean(href) && !disabled}
+  <a
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    {href}
+    class={`ttdk-pagination-link ttdk-pagination-next ${
+      className || ""
+    }`.trim()}
+    aria-label={ariaLabel || "Go to next page"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    on:click={(e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    }}
+  >
+    {#if !iconOnly}
+      <span class="ttdk-pagination-next-text">{text || "Next"}</span>
+    {/if}
+    {#if icon}
+      {icon}
+    {/if}
+    {#if !icon}
+      <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}</a
+  >
+{/if}
+
+{#if !href || Boolean(disabled)}
+  <button
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    type="button"
+    class={`ttdk-pagination-link ttdk-pagination-next ${
+      className || ""
+    }`.trim()}
+    aria-label={ariaLabel || "Go to next page"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    {disabled}
+    on:click={(e) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    }}
+  >
+    {#if !iconOnly}
+      <span class="ttdk-pagination-next-text">{text || "Next"}</span>
+    {/if}
+    {#if icon}
+      {icon}
+    {/if}
+    {#if !icon}
+      <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
+  >
+{/if}