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

package/src/web/breadcrumb/breadcrumb.vue

@@ -0,0 +1,313 @@
+<template>
+  <nav
+    aria-label="Breadcrumb"
+    :class="`ttdk-breadcrumb ${className || ''}`.trim()"
+    :data-size="size || 'md'"
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <ol class="ttdk-breadcrumb-list">
+      <template :key="index" v-for="(item, index) in getVisibleItems()">
+        <li class="ttdk-breadcrumb-item">
+          <template v-if="item.isEllipsis">
+            <span class="ttdk-breadcrumb-ellipsis" aria-hidden="true">
+              ···
+            </span>
+          </template>
+
+          <template
+            v-if="
+              !item.isEllipsis &&
+              (item.current || index === getVisibleItems().length - 1)
+            "
+          >
+            <span
+              aria-current="page"
+              :class="`ttdk-breadcrumb-current ${textActiveClass || ''}`.trim()"
+              :data-disabled="item.disabled ? 'true' : 'false'"
+              :style="{
+                ...buildUiVars(textActiveStyle),
+              }"
+            >
+              <template v-if="item.icon">
+                <span class="ttdk-breadcrumb-icon">{{ item.icon }}</span>
+              </template>
+
+              <span class="ttdk-breadcrumb-label" :title="item.label">{{
+                formatLabel(item.label)
+              }}</span></span
+            >
+          </template>
+
+          <template
+            v-if="
+              !item.isEllipsis &&
+              !item.current &&
+              index !== getVisibleItems().length - 1
+            "
+          >
+            <template v-if="item.href">
+              <a
+                :href="item.href"
+                :class="`ttdk-breadcrumb-link ${textLinkClass || ''}`.trim()"
+                :data-disabled="item.disabled ? 'true' : 'false'"
+                :title="item.label"
+                :style="{
+                  ...buildUiVars(textLinkStyle),
+                }"
+                @click="
+                  async (e) => {
+                    if (item.disabled) {
+                      e.preventDefault();
+                      return;
+                    }
+                    if (onItemClick) {
+                      onItemClick(item, index, e);
+                    }
+                  }
+                "
+              >
+                <template v-if="item.icon">
+                  <span class="ttdk-breadcrumb-icon">{{ item.icon }}</span>
+                </template>
+
+                <span class="ttdk-breadcrumb-label">{{
+                  formatLabel(item.label)
+                }}</span></a
+              >
+            </template>
+
+            <template v-if="!item.href">
+              <button
+                type="button"
+                :class="
+                  `ttdk-breadcrumb-link ttdk-breadcrumb-btn ${
+                    textLinkClass || ''
+                  }`.trim()
+                "
+                :data-disabled="item.disabled ? 'true' : 'false'"
+                :disabled="item.disabled"
+                :title="item.label"
+                :style="{
+                  ...buildUiVars(textLinkStyle),
+                }"
+                @click="
+                  async (e) => {
+                    if (onItemClick) {
+                      onItemClick(item, index, e);
+                    }
+                  }
+                "
+              >
+                <template v-if="item.icon">
+                  <span class="ttdk-breadcrumb-icon">{{ item.icon }}</span>
+                </template>
+
+                <span class="ttdk-breadcrumb-label">{{
+                  formatLabel(item.label)
+                }}</span>
+              </button>
+            </template>
+          </template>
+
+          <template v-if="index !== getVisibleItems().length - 1">
+            <span
+              aria-hidden="true"
+              :class="
+                `ttdk-breadcrumb-separator ${separatorClass || ''}`.trim()
+              "
+              :style="{
+                ...buildUiVars(separatorStyle),
+              }"
+            >
+              <template v-if="customSeparator">
+                <span class="ttdk-separator-char">{{ customSeparator }}</span>
+              </template>
+
+              <template v-if="!customSeparator">
+                <svg
+                  class="ttdk-separator-icon"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 640 640"
+                >
+                  <path
+                    d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"
+                  ></path>
+                </svg>
+              </template>
+            </span>
+          </template>
+        </li>
+      </template>
+    </ol>
+    <template v-if="$slots.default">
+      <div class="ttdk-breadcrumb-slot"><slot /></div>
+    </template>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface BreadcrumbItem {
+  /**
+   * Label teks yang ditampilkan pada breadcrumb item.
+   */
+  label: string;
+
+  /**
+   * URL tautan navigasi tujuan (href / path).
+   */
+  href?: string;
+
+  /**
+   * Ikon atau emoji opsional di samping label teks.
+   */
+  icon?: any;
+
+  /**
+   * Menandai item ini secara eksplisit sebagai halaman saat ini (current page).
+   */
+  current?: boolean;
+
+  /**
+   * Menonaktifkan interaksi klik pada item ini.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandai item sebagai representasi ellipsis penyingkat item yang tersembunyi.
+   */
+  isEllipsis?: boolean;
+}
+export type BreadcrumbUiProps = UiProps;
+export type BreadcrumbSeparator = "chevron";
+export interface BreadcrumbProps {
+  /**
+   * Daftar item navigasi breadcrumb dari tingkat teratas hingga halaman saat ini.
+   */
+  items: BreadcrumbItem[];
+
+  /**
+   * Jenis karakter atau ikon pemisah antar item:
+   * - `'arrow'`: Ikon panah kanan `→`.
+   *
+   * @default 'arrow'
+   */
+  separator?: BreadcrumbSeparator;
+
+  /**
+   * Karakter atau string teks khusus untuk pemisah antarelemen.
+   */
+  customSeparator?: string;
+
+  /**
+   * Skala ukuran tampilan breadcrumb:
+   * - `'sm'`: Kompak (12px, gap 6px).
+   * - `'md'`: Standar (14px, gap 8px).
+   * - `'lg'`: Besar (16px, gap 12px).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Batas maksimum panjang karakter label sebelum dipotong (truncate).
+   * @default 20
+   */
+  maxLabelLength?: number;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Style kustom untuk teks tautan breadcrumb / item non-aktif (UiProps).
+   */
+  textLinkStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks tautan breadcrumb / item non-aktif (Tailwind / class kustom).
+   */
+  textLinkClass?: string;
+
+  /**
+   * Style kustom untuk teks item aktif / halaman saat ini (UiProps).
+   */
+  textActiveStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks item aktif / halaman saat ini (Tailwind / class kustom).
+   */
+  textActiveClass?: string;
+
+  /**
+   * Style kustom untuk karakter atau ikon pemisah (UiProps).
+   */
+  separatorStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk karakter atau ikon pemisah (Tailwind / class kustom).
+   */
+  separatorClass?: string;
+
+  /**
+   * Handler event klik yang dipanggil saat suatu item breadcrumb diklik.
+   *
+   * @param item Data item yang diklik.
+   * @param index Indeks urutan item dalam array.
+   * @param event Objek synthetic DOM event.
+   */
+  onItemClick?: (item: BreadcrumbItem, index: number, event: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Slot konten tambahan di ujung kanan breadcrumb.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Breadcrumb untuk menampilkan hierarki navigasi lokasi halaman saat ini dengan dukungan penyingkatan (collapse ellipsis).
+ */
+
+const props = defineProps<BreadcrumbProps>();
+
+function formatLabel(label: any) {
+  if (!label && label !== 0) return "";
+  const str = String(label);
+  const max = props.maxLabelLength !== undefined ? props.maxLabelLength : 20;
+  if (max > 0 && str.length > max) {
+    return `${str.slice(0, max)}...`;
+  }
+  return str;
+}
+function getVisibleItems() {
+  if (!props.items || props.items.length === 0) return [];
+  const total = props.items.length;
+  if (total <= 3) {
+    return props.items;
+  }
+  const before = Math.max(1, Math.min(3, total - 2));
+  const startItems = props.items.slice(0, before);
+  const endItems = props.items.slice(total - 1);
+  const ellipsisItem: BreadcrumbItem = {
+    label: "...",
+    isEllipsis: true,
+  };
+  return [...startItems, ellipsisItem, ...endItems];
+}
+</script>

package/src/web/breadcrumb/breadcrumb.vue.d.ts

@@ -0,0 +1,139 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface BreadcrumbItem {
+  /**
+   * Label teks yang ditampilkan pada breadcrumb item.
+   */
+  label: string;
+
+  /**
+   * URL tautan navigasi tujuan (href / path).
+   */
+  href?: string;
+
+  /**
+   * Ikon atau emoji opsional di samping label teks.
+   */
+  icon?: any;
+
+  /**
+   * Menandai item ini secara eksplisit sebagai halaman saat ini (current page).
+   */
+  current?: boolean;
+
+  /**
+   * Menonaktifkan interaksi klik pada item ini.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandai item sebagai representasi ellipsis penyingkat item yang tersembunyi.
+   */
+  isEllipsis?: boolean;
+}
+
+export type BreadcrumbUiProps = UiProps;
+
+export type BreadcrumbSeparator = "chevron";
+
+export interface BreadcrumbProps {
+  /**
+   * Daftar item navigasi breadcrumb dari tingkat teratas hingga halaman saat ini.
+   */
+  items: BreadcrumbItem[];
+
+  /**
+   * Jenis karakter atau ikon pemisah antar item:
+   * - `'arrow'`: Ikon panah kanan `→`.
+   *
+   * @default 'arrow'
+   */
+  separator?: BreadcrumbSeparator;
+
+  /**
+   * Karakter atau string teks khusus untuk pemisah antarelemen.
+   */
+  customSeparator?: string;
+
+  /**
+   * Skala ukuran tampilan breadcrumb:
+   * - `'sm'`: Kompak (12px, gap 6px).
+   * - `'md'`: Standar (14px, gap 8px).
+   * - `'lg'`: Besar (16px, gap 12px).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Batas maksimum panjang karakter label sebelum dipotong (truncate).
+   * @default 20
+   */
+  maxLabelLength?: number;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Style kustom untuk teks tautan breadcrumb / item non-aktif (UiProps).
+   */
+  textLinkStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks tautan breadcrumb / item non-aktif (Tailwind / class kustom).
+   */
+  textLinkClass?: string;
+
+  /**
+   * Style kustom untuk teks item aktif / halaman saat ini (UiProps).
+   */
+  textActiveStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks item aktif / halaman saat ini (Tailwind / class kustom).
+   */
+  textActiveClass?: string;
+
+  /**
+   * Style kustom untuk karakter atau ikon pemisah (UiProps).
+   */
+  separatorStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk karakter atau ikon pemisah (Tailwind / class kustom).
+   */
+  separatorClass?: string;
+
+  /**
+   * Handler event klik yang dipanggil saat suatu item breadcrumb diklik.
+   *
+   * @param item Data item yang diklik.
+   * @param index Indeks urutan item dalam array.
+   * @param event Objek synthetic DOM event.
+   */
+  onItemClick?: (item: BreadcrumbItem, index: number, event: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Slot konten tambahan di ujung kanan breadcrumb.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<BreadcrumbProps>;
+export default component;

package/src/web/breadcrumb/index.ts

@@ -0,0 +1,3 @@
+export { default } from './breadcrumb.vue';
+export { default as Breadcrumb } from './breadcrumb.vue';
+export * from './breadcrumb.vue';

package/src/web/breadcrumb/manifest.json

@@ -0,0 +1,225 @@
+{
+  "name": "@ttdk-design-system/breadcrumb",
+  "component": "Breadcrumb",
+  "folder": "breadcrumb",
+  "description": "Komponen Breadcrumb untuk menampilkan hierarki navigasi lokasi halaman saat ini dengan dukungan penyingkatan (collapse ellipsis).",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "breadcrumb.css",
+      "importPath": "web/breadcrumb/breadcrumb.css"
+    }
+  ],
+  "props": {
+    "items": {
+      "name": "items",
+      "type": "BreadcrumbItem[]",
+      "optional": false,
+      "default": null,
+      "description": "Daftar item navigasi breadcrumb dari tingkat teratas hingga halaman saat ini.",
+      "example": null,
+      "param": null
+    },
+    "separator": {
+      "name": "separator",
+      "type": "BreadcrumbSeparator",
+      "optional": true,
+      "default": "arrow",
+      "description": "Jenis karakter atau ikon pemisah antar item: - `'arrow'`: Ikon panah kanan `→`.",
+      "example": null,
+      "param": null
+    },
+    "customSeparator": {
+      "name": "customSeparator",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Karakter atau string teks khusus untuk pemisah antarelemen.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran tampilan breadcrumb: - `'sm'`: Kompak (12px, gap 6px). - `'md'`: Standar (14px, gap 8px). - `'lg'`: Besar (16px, gap 12px).",
+      "example": null,
+      "param": null
+    },
+    "maxLabelLength": {
+      "name": "maxLabelLength",
+      "type": "number",
+      "optional": true,
+      "default": "20",
+      "description": "Batas maksimum panjang karakter label sebelum dipotong (truncate).",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "textLinkStyle": {
+      "name": "textLinkStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks tautan breadcrumb / item non-aktif (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "textLinkClass": {
+      "name": "textLinkClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks tautan breadcrumb / item non-aktif (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "textActiveStyle": {
+      "name": "textActiveStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks item aktif / halaman saat ini (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "textActiveClass": {
+      "name": "textActiveClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks item aktif / halaman saat ini (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "separatorStyle": {
+      "name": "separatorStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk karakter atau ikon pemisah (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "separatorClass": {
+      "name": "separatorClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk karakter atau ikon pemisah (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "onItemClick": {
+      "name": "onItemClick",
+      "type": "(item: BreadcrumbItem, index: number, event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Handler event klik yang dipanggil saat suatu item breadcrumb diklik.",
+      "example": null,
+      "param": "event Objek synthetic DOM event."
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Slot konten tambahan di ujung kanan breadcrumb.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "BreadcrumbItem": {
+      "label": {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Label teks yang ditampilkan pada breadcrumb item.",
+        "example": null,
+        "param": null
+      },
+      "href": {
+        "name": "href",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "URL tautan navigasi tujuan (href / path).",
+        "example": null,
+        "param": null
+      },
+      "icon": {
+        "name": "icon",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ikon atau emoji opsional di samping label teks.",
+        "example": null,
+        "param": null
+      },
+      "current": {
+        "name": "current",
+        "type": "boolean",
+        "optional": true,
+        "default": null,
+        "description": "Menandai item ini secara eksplisit sebagai halaman saat ini (current page).",
+        "example": null,
+        "param": null
+      },
+      "disabled": {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menonaktifkan interaksi klik pada item ini.",
+        "example": null,
+        "param": null
+      },
+      "isEllipsis": {
+        "name": "isEllipsis",
+        "type": "boolean",
+        "optional": true,
+        "default": null,
+        "description": "Menandai item sebagai representasi ellipsis penyingkat item yang tersembunyi.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}