@ttdk-design-system/library-vue 0.0.0-stage → 1.0.1

package/src/web/pagination/pagination-next.vue

@@ -0,0 +1,160 @@
+<template>
+  <template v-if="Boolean(href) && !disabled">
+    <a
+      :href="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'"
+      :style="{
+        ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+      @click="
+        async (e) => {
+          if (disabled) {
+            e.preventDefault();
+            return;
+          }
+          if (onClick) {
+            onClick(e);
+          }
+        }
+      "
+    >
+      <template v-if="!iconOnly">
+        <span class="ttdk-pagination-next-text">{{ text || "Next" }}</span>
+      </template>
+
+      <template v-if="icon">
+        {{ icon }}
+      </template>
+
+      <template v-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"></polyline>
+        </svg>
+      </template>
+    </a>
+  </template>
+
+  <template v-if="!href || Boolean(disabled)">
+    <button
+      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="disabled"
+      :style="{
+        ...buildUiVars(ui),
+        }"
+      @click="
+        async (e) => {
+          if (!disabled && onClick) {
+            onClick(e);
+          }
+        }
+      "
+    >
+      <template v-if="!iconOnly">
+        <span class="ttdk-pagination-next-text">{{ text || "Next" }}</span>
+      </template>
+
+      <template v-if="icon">
+        {{ icon }}
+      </template>
+
+      <template v-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"></polyline>
+        </svg>
+      </template>
+    </button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationNextProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+   */
+  href?: string;
+
+  /**
+   * Teks label tombol.
+   * @default 'Next'
+   */
+  text?: string;
+
+  /**
+   * Mode hanya menampilkan ikon tanpa teks.
+   * @default false
+   */
+  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 next page'
+   */
+  ariaLabel?: string;
+
+  /**
+   * Ikon kustom untuk tombol next page (menggantikan >).
+   */
+  icon?: any;
+}
+
+/**
+ * Tombol navigasi ke halaman selanjutnya (Compound PaginationNext ala Shadcn UI).
+ */
+
+const props = defineProps<PaginationNextProps>();
+</script>

package/src/web/pagination/pagination-next.vue.d.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationNextProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+   */
+  href?: string;
+
+  /**
+   * Teks label tombol.
+   * @default 'Next'
+   */
+  text?: string;
+
+  /**
+   * Mode hanya menampilkan ikon tanpa teks.
+   * @default false
+   */
+  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 next page'
+   */
+  ariaLabel?: string;
+
+  /**
+   * Ikon kustom untuk tombol next page (menggantikan >).
+   */
+  icon?: any;
+}
+
+declare const component: DefineComponent<PaginationNextProps>;
+export default component;

package/src/web/pagination/pagination-previous.vue

@@ -0,0 +1,160 @@
+<template>
+  <template v-if="Boolean(href) && !disabled">
+    <a
+      :href="href"
+      :class="
+        `ttdk-pagination-link ttdk-pagination-prev ${className || ''}`.trim()
+      "
+      :aria-label="ariaLabel || 'Go to previous page'"
+      :data-size="size || 'md'"
+      :data-disabled="disabled ? 'true' : 'false'"
+      :style="{
+        ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+      @click="
+        async (e) => {
+          if (disabled) {
+            e.preventDefault();
+            return;
+          }
+          if (onClick) {
+            onClick(e);
+          }
+        }
+      "
+    >
+      <template v-if="icon">
+        {{ icon }}
+      </template>
+
+      <template v-if="!icon">
+        <svg
+          class="ttdk-pagination-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+      </template>
+
+      <template v-if="!iconOnly">
+        <span class="ttdk-pagination-prev-text">{{ text || "Previous" }}</span>
+      </template>
+    </a>
+  </template>
+
+  <template v-if="!href || Boolean(disabled)">
+    <button
+      type="button"
+      :class="
+        `ttdk-pagination-link ttdk-pagination-prev ${className || ''}`.trim()
+      "
+      :aria-label="ariaLabel || 'Go to previous page'"
+      :data-size="size || 'md'"
+      :data-disabled="disabled ? 'true' : 'false'"
+      :disabled="disabled"
+      :style="{
+        ...buildUiVars(ui),
+        }"
+      @click="
+        async (e) => {
+          if (!disabled && onClick) {
+            onClick(e);
+          }
+        }
+      "
+    >
+      <template v-if="icon">
+        {{ icon }}
+      </template>
+
+      <template v-if="!icon">
+        <svg
+          class="ttdk-pagination-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+      </template>
+
+      <template v-if="!iconOnly">
+        <span class="ttdk-pagination-prev-text">{{ text || "Previous" }}</span>
+      </template>
+    </button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationPreviousProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+   */
+  href?: string;
+
+  /**
+   * Teks label tombol.
+   * @default 'Previous'
+   */
+  text?: string;
+
+  /**
+   * Mode hanya menampilkan ikon tanpa teks.
+   * @default false
+   */
+  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 previous page'
+   */
+  ariaLabel?: string;
+
+  /**
+   * Ikon kustom untuk tombol previous page (menggantikan <).
+   */
+  icon?: any;
+}
+
+/**
+ * Tombol navigasi ke halaman sebelumnya (Compound PaginationPrevious ala Shadcn UI).
+ */
+
+const props = defineProps<PaginationPreviousProps>();
+</script>

package/src/web/pagination/pagination-previous.vue.d.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationPreviousProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+   */
+  href?: string;
+
+  /**
+   * Teks label tombol.
+   * @default 'Previous'
+   */
+  text?: string;
+
+  /**
+   * Mode hanya menampilkan ikon tanpa teks.
+   * @default false
+   */
+  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 previous page'
+   */
+  ariaLabel?: string;
+
+  /**
+   * Ikon kustom untuk tombol previous page (menggantikan <).
+   */
+  icon?: any;
+}
+
+declare const component: DefineComponent<PaginationPreviousProps>;
+export default component;

package/src/web/pagination/pagination.css

@@ -0,0 +1 @@
+.ttdk-pagination{box-sizing:border-box;font-family:var(--ttdk-font-sans);line-height:var(--ttdk-line-height-tight);user-select:none;justify-content:center;align-items:center;width:100%;max-width:100%;display:flex}.ttdk-pagination-auto-wrapper{justify-content:center;align-items:center;gap:var(--ttdk-spacing-md);flex-wrap:wrap;width:100%;display:flex}.ttdk-pagination-limit{align-items:center;gap:var(--ttdk-spacing-xs);font-size:var(--ttdk-font-size-12);color:var(--ttdk-text-icon-secondary);display:inline-flex}.ttdk-pagination-limit-label{font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-medium);color:var(--ttdk-text-icon-secondary);white-space:nowrap}.ttdk-pagination-limit-select{height:32px;padding:0 var(--ttdk-spacing-xs);border-radius:var(--ttdk-radius-input-md);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);background-color:var(--ttdk-bg-base-primary);color:var(--ttdk-text-icon-primary);font-size:var(--ttdk-font-size-12);font-family:inherit;font-weight:var(--ttdk-font-weight-medium);cursor:pointer;outline:none;transition:border-color .15s,box-shadow .15s}.ttdk-pagination-limit-select:focus{border-color:var(--ttdk-stroke-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--ttdk-stroke-border-focus) 20%, transparent)}.ttdk-pagination-content{justify-content:center;align-items:center;gap:var(--ttdk-spacing-xxs);flex-flow:wrap;max-width:100%;margin:0;padding:0;list-style:none;display:inline-flex}.ttdk-pagination-item{align-items:center;margin:0;padding:0;display:inline-flex}.ttdk-pagination-link{box-sizing:border-box;font-family:inherit;font-weight:var(--ttdk-font-weight-medium);cursor:pointer;white-space:nowrap;vertical-align:middle;border:var(--ttdk-stroke-width-thin) solid transparent;color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));border-radius:var(--ttdk-radius-input-lg);background-color:#0000;outline:none;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.ttdk-pagination-link:hover:not([data-disabled=true]):not(:disabled){background-color:var(--ttdk-brand-subtle);color:var(--ttdk-brand-default)}.ttdk-pagination-link:focus-visible{outline:2px solid var(--ttdk-stroke-border-focus);outline-offset:2px}.ttdk-pagination-link[data-active=true]{background-color:var(--ttdk-brand-default);color:var(--ttdk-text-icon-stay-white);border-color:var(--ttdk-brand-default);font-weight:var(--ttdk-font-weight-semibold)}.ttdk-pagination-link[data-active=true]:hover:not([data-disabled=true]):not(:disabled){background-color:var(--ttdk-brand-strong);border-color:var(--ttdk-brand-strong);color:var(--ttdk-text-icon-stay-white)}.ttdk-pagination-link[data-disabled=true],.ttdk-pagination-link:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ttdk-pagination-icon{width:var(--ttdk-font-size-16);height:var(--ttdk-font-size-16);stroke:currentColor;stroke-width:var(--ttdk-stroke-width-med);stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.ttdk-pagination[data-size=sm] .ttdk-pagination-link,.ttdk-pagination-link[data-size=sm]{min-width:28px;height:28px;padding:0 var(--ttdk-spacing-xs);font-size:var(--ttdk-font-size-12);border-radius:var(--ttdk-radius-input-md);gap:var(--ttdk-spacing-xxs)}.ttdk-pagination[data-size=sm] .ttdk-pagination-icon,.ttdk-pagination-link[data-size=sm] .ttdk-pagination-icon{width:var(--ttdk-font-size-14);height:var(--ttdk-font-size-14)}.ttdk-pagination[data-size=sm] .ttdk-selectbox-control{height:28px;min-height:28px;font-size:var(--ttdk-font-size-12);padding:0 8px}.ttdk-pagination .ttdk-pagination-link,.ttdk-pagination[data-size=md] .ttdk-pagination-link,.ttdk-pagination-link[data-size=md]{min-width:36px;height:36px;padding:0 var(--ttdk-spacing-sm);font-size:var(--ttdk-font-size-14);border-radius:var(--ttdk-radius-input-lg);gap:6px}.ttdk-pagination .ttdk-pagination-icon,.ttdk-pagination[data-size=md] .ttdk-pagination-icon,.ttdk-pagination-link[data-size=md] .ttdk-pagination-icon{width:var(--ttdk-font-size-16);height:var(--ttdk-font-size-16)}.ttdk-pagination[data-size=lg] .ttdk-pagination-link,.ttdk-pagination-link[data-size=lg]{min-width:44px;height:44px;padding:0 var(--ttdk-spacing-md);font-size:var(--ttdk-font-size-16);border-radius:var(--ttdk-radius-input-lg);gap:var(--ttdk-spacing-xs)}.ttdk-pagination[data-size=lg] .ttdk-pagination-icon,.ttdk-pagination-link[data-size=lg] .ttdk-pagination-icon{width:var(--ttdk-font-size-18);height:var(--ttdk-font-size-18)}.ttdk-pagination-first,.ttdk-pagination-last{padding:0 var(--ttdk-spacing-xs)}.ttdk-pagination-prev{padding-left:var(--ttdk-spacing-xs)}.ttdk-pagination-next{padding-right:var(--ttdk-spacing-xs)}.ttdk-pagination-ellipsis{min-width:36px;height:36px;color:var(--ttdk-text-icon-disabled);justify-content:center;align-items:center;display:inline-flex}.ttdk-pagination[data-size=sm] .ttdk-pagination-ellipsis{min-width:28px;height:28px}.ttdk-pagination[data-size=lg] .ttdk-pagination-ellipsis{min-width:44px;height:44px}.ttdk-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html.dark .ttdk-pagination-link,body.dark .ttdk-pagination-link,.dark .ttdk-pagination-link{color:var(--ttdk-text-icon-primary)}html.dark .ttdk-pagination-link:hover:not([data-disabled=true]):not(:disabled),body.dark .ttdk-pagination-link:hover:not([data-disabled=true]):not(:disabled),.dark .ttdk-pagination-link:hover:not([data-disabled=true]):not(:disabled){background-color:color-mix(in srgb, var(--ttdk-brand-default) 15%, transparent);color:var(--ttdk-brand-default)}html.dark .ttdk-pagination-link[data-active=true],body.dark .ttdk-pagination-link[data-active=true],.dark .ttdk-pagination-link[data-active=true]{background-color:var(--ttdk-brand-default);color:var(--ttdk-text-icon-stay-white);border-color:var(--ttdk-brand-default)}html.dark .ttdk-pagination-limit,body.dark .ttdk-pagination-limit,html.dark .ttdk-pagination-limit-label,body.dark .ttdk-pagination-limit-label,.dark .ttdk-pagination-limit,.dark .ttdk-pagination-limit-label{color:var(--ttdk-text-icon-secondary)}html.dark .ttdk-pagination-limit-select,body.dark .ttdk-pagination-limit-select,.dark .ttdk-pagination-limit-select{background-color:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-primary)}html.dark .ttdk-pagination-ellipsis,body.dark .ttdk-pagination-ellipsis,.dark .ttdk-pagination-ellipsis{color:var(--ttdk-text-icon-disabled)}@media (width<=640px){.ttdk-pagination-prev-text,.ttdk-pagination-next-text{display:none}.ttdk-pagination-prev,.ttdk-pagination-next{padding:0 var(--ttdk-spacing-xs)}}