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

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

@@ -0,0 +1,161 @@
+<template>
+  <template v-if="Boolean(href) && !disabled">
+    <a
+      :href="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'"
+      :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="11 17 6 12 11 7"></polyline>
+          <polyline points="18 17 13 12 18 7"></polyline>
+        </svg>
+      </template>
+
+      <template v-if="!iconOnly && Boolean(text)">
+        <span class="ttdk-pagination-first-text">{{ text }}</span>
+      </template>
+    </a>
+  </template>
+
+  <template v-if="!href || Boolean(disabled)">
+    <button
+      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="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="11 17 6 12 11 7"></polyline>
+          <polyline points="18 17 13 12 18 7"></polyline>
+        </svg>
+      </template>
+
+      <template v-if="!iconOnly && Boolean(text)">
+        <span class="ttdk-pagination-first-text">{{ text }}</span>
+      </template>
+    </button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationFirstProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * 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;
+}
+
+/**
+ * Tombol navigasi langsung ke halaman pertama (Compound PaginationFirst).
+ */
+
+const props = defineProps<PaginationFirstProps>();
+</script>

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

@@ -0,0 +1,67 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationFirstProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * 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;
+}
+
+declare const component: DefineComponent<PaginationFirstProps>;
+export default component;

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

@@ -0,0 +1,42 @@
+<template>
+  <li
+    :class="`ttdk-pagination-item ${className || ''}`.trim()"
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <slot />
+  </li>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationItemProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular li.ttdk-pagination-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten pagination item.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen pembungkus item halaman `<li>` (Compound PaginationItem ala Shadcn UI).
+ */
+
+const props = defineProps<PaginationItemProps>();
+</script>

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

@@ -0,0 +1,28 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationItemProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular li.ttdk-pagination-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten pagination item.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<PaginationItemProps>;
+export default component;

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

@@ -0,0 +1,161 @@
+<template>
+  <template v-if="Boolean(href) && !disabled">
+    <a
+      :href="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'"
+      :style="{
+        ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+      @click="
+        async (e) => {
+          if (disabled) {
+            e.preventDefault();
+            return;
+          }
+          if (onClick) {
+            onClick(e);
+          }
+        }
+      "
+    >
+      <template v-if="!iconOnly && Boolean(text)">
+        <span class="ttdk-pagination-last-text">{{ text }}</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="13 17 18 12 13 7"></polyline>
+          <polyline points="6 17 11 12 6 7"></polyline>
+        </svg>
+      </template>
+    </a>
+  </template>
+
+  <template v-if="!href || Boolean(disabled)">
+    <button
+      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="disabled"
+      :style="{
+        ...buildUiVars(ui),
+        }"
+      @click="
+        async (e) => {
+          if (!disabled && onClick) {
+            onClick(e);
+          }
+        }
+      "
+    >
+      <template v-if="!iconOnly && Boolean(text)">
+        <span class="ttdk-pagination-last-text">{{ text }}</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="13 17 18 12 13 7"></polyline>
+          <polyline points="6 17 11 12 6 7"></polyline>
+        </svg>
+      </template>
+    </button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationLastProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * 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;
+}
+
+/**
+ * Tombol navigasi langsung ke halaman terakhir (Compound PaginationLast).
+ */
+
+const props = defineProps<PaginationLastProps>();
+</script>

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

@@ -0,0 +1,67 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationLastProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * 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;
+}
+
+declare const component: DefineComponent<PaginationLastProps>;
+export default component;

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

@@ -0,0 +1,118 @@
+<template>
+  <template v-if="Boolean(href) && !disabled">
+    <a
+      :href="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'"
+      :style="{
+        ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+      @click="
+        async (e) => {
+          if (disabled) {
+            e.preventDefault();
+            return;
+          }
+          if (onClick) {
+            onClick(e);
+          }
+        }
+      "
+      ><slot
+    /></a>
+  </template>
+
+  <template v-if="!href || Boolean(disabled)">
+    <button
+      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="disabled"
+      :style="{
+        ...buildUiVars(ui),
+        }"
+      @click="
+        async (e) => {
+          if (!disabled && onClick) {
+            onClick(e);
+          }
+        }
+      "
+    >
+      <slot />
+    </button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationLinkProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * 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;
+}
+
+/**
+ * Komponen tombol atau link nomor halaman (Compound PaginationLink ala Shadcn UI).
+ */
+
+const props = defineProps<PaginationLinkProps>();
+</script>

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

@@ -0,0 +1,61 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationLinkProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * 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;
+}
+
+declare const component: DefineComponent<PaginationLinkProps>;
+export default component;