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

package/src/web/accordion/accordion.vue

@@ -0,0 +1,432 @@
+<template>
+  <div
+    :class="`ttdk-accordion ${className || ''}`.trim()"
+    :data-variant="variant || 'default'"
+    :data-size="size || 'md'"
+    :data-icon-position="iconPosition || 'right'"
+    :data-rounded="rounded || 'md'"
+    :data-disabled="disabled ? 'true' : 'false'"
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <template :key="item.value || index" v-for="(item, index) in items">
+      <div
+        :class="`ttdk-accordion-item ${itemClass || ''}`.trim()"
+        :data-state="isOpen(item.value) ? 'open' : 'closed'"
+        :data-disabled="disabled || item.disabled ? 'true' : 'false'"
+        :style="{
+          ...buildUiStyle(itemStyle),
+        }"
+      >
+        <h3 class="ttdk-accordion-header">
+          <button
+            type="button"
+            :class="`ttdk-accordion-trigger ${triggerClass || ''}`.trim()"
+            :data-state="isOpen(item.value) ? 'open' : 'closed'"
+            :data-disabled="disabled || item.disabled ? 'true' : 'false'"
+            :disabled="disabled || item.disabled"
+            :aria-expanded="isOpen(item.value)"
+            @click="async (event) => handleToggle(item.value, item.disabled)"
+            :style="{
+              ...buildUiStyle(triggerStyle),
+            }"
+          >
+            <template v-if="iconPosition === 'left'">
+              <span
+                aria-hidden="true"
+                :class="
+                  `ttdk-accordion-arrow ttdk-accordion-arrow-left ${
+                    iconClass || ''
+                  }`.trim()
+                "
+                :data-state="isOpen(item.value) ? 'open' : 'closed'"
+                :style="{
+                  ...buildUiStyle(iconStyle),
+                }"
+              >
+                <template v-if="icon">
+                  {{ icon }}
+                </template>
+
+                <template v-if="!icon">
+                  <svg
+                    class="ttdk-accordion-icon"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                  </svg>
+                </template>
+              </span>
+            </template>
+
+            <template v-if="item.icon">
+              <span class="ttdk-accordion-leading-icon">{{ item.icon }}</span>
+            </template>
+
+            <span class="ttdk-accordion-label-group"
+              ><span
+                :class="`ttdk-accordion-title ${titleClass || ''}`.trim()"
+                :style="{
+                  ...buildUiStyle(titleStyle),
+                }"
+                >{{ item.title }}</span
+              >
+              <template v-if="item.subtitle">
+                <span
+                  :class="
+                    `ttdk-accordion-subtitle ${subtitleClass || ''}`.trim()
+                  "
+                  :style="{
+                    ...buildUiStyle(subtitleStyle),
+                  }"
+                  >{{ item.subtitle }}</span
+                >
+              </template>
+            </span>
+            <template v-if="item.badge !== undefined && item.badge !== null">
+              <span class="ttdk-accordion-badge">{{ item.badge }}</span>
+            </template>
+
+            <template v-if="iconPosition !== 'left'">
+              <span
+                aria-hidden="true"
+                :class="
+                  `ttdk-accordion-arrow ttdk-accordion-arrow-right ${
+                    iconClass || ''
+                  }`.trim()
+                "
+                :data-state="isOpen(item.value) ? 'open' : 'closed'"
+                :style="{
+                  ...buildUiStyle(iconStyle),
+                }"
+              >
+                <template v-if="icon">
+                  {{ icon }}
+                </template>
+
+                <template v-if="!item.customIcon && !icon">
+                  <svg
+                    class="ttdk-accordion-icon"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                  </svg>
+                </template>
+              </span>
+            </template>
+          </button>
+        </h3>
+        <div
+          class="ttdk-accordion-panel"
+          role="region"
+          :data-state="isOpen(item.value) ? 'open' : 'closed'"
+        >
+          <div
+            :class="`ttdk-accordion-content ${contentClass || ''}`.trim()"
+            :style="{
+              ...buildUiStyle(contentStyle),
+            }"
+          >
+            {{ item.content }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="$slots.default">
+      <div class="ttdk-accordion-children"><slot /></div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import {
+  buildUiStyle,
+  buildUiVars,
+  cleanUiValue,
+  UiProps,
+} from "../../core/types";
+
+export type AccordionUiProps = UiProps;
+export interface AccordionItem {
+  /**
+   * Nilai identifikasi unik untuk item accordion.
+   */
+  value: string;
+
+  /**
+   * Judul teks yang ditampilkan pada header trigger accordion.
+   */
+  title: string;
+
+  /**
+   * Subtitle atau deskripsi singkat sekunder di bawah judul.
+   */
+  subtitle?: string;
+
+  /**
+   * Konten isi panel yang terbuka saat accordion di-expand.
+   */
+  content?: any;
+
+  /**
+   * Ikon atau elemen visual opsional di samping judul.
+   */
+  icon?: any;
+
+  /**
+   * Badge teks atau counter angka opsional (misal: '12', 'Baru', 'Wajib').
+   */
+  badge?: string | number;
+
+  /**
+   * Ikon kustom untuk menggantikan ikon panah bawaan khusus item ini.
+   */
+  customIcon?: any;
+
+  /**
+   * Menonaktifkan item ini dari interaksi buka/tutup.
+   * @default false
+   */
+  disabled?: boolean;
+}
+export interface AccordionProps {
+  /**
+   * Daftar item accordion yang akan dirender.
+   */
+  items: AccordionItem[];
+
+  /**
+   * Nilai item yang sedang terbuka (controlled value).
+   * Bisa berupa string tunggal atau array string jika multiple={true}.
+   */
+  value?: string | string[];
+
+  /**
+   * Nilai default item yang terbuka saat pertama kali dirender (uncontrolled initial value).
+   */
+  defaultValue?: string | string[];
+
+  /**
+   * Mengizinkan lebih dari satu item terbuka secara bersamaan.
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Mengizinkan item yang terbuka untuk ditutup kembali saat diklik.
+   * @default true
+   */
+  collapsible?: boolean;
+
+  /**
+   * Varian tampilan visual accordion:
+   * - `'default'`: Garis pembatas (divider) minimalis antar-item.
+   * - `'bordered'`: Pembungkus border luar dengan sudut melengkung.
+   * - `'separated'`: Setiap item berupa kartu terpisah mandiri dengan jarak celah (gap).
+   * - `'ghost'`: Tampilan bersih tanpa border luar, hanya hover background lembut.
+   *
+   * @default 'default'
+   */
+  variant?: "default" | "bordered" | "separated" | "ghost";
+
+  /**
+   * Skala ukuran proporsional accordion (padding, font, icon):
+   * - `'sm'`: Kompak (13px font, padding rapat).
+   * - `'md'`: Standar (14px font, padding normal).
+   * - `'lg'`: Besar (16px font, padding lapang).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Posisi indikator ikon panah / chevron:
+   * - `'right'`: Di ujung kanan (standar desain).
+   * - `'left'`: Di sebelah kiri sebelum judul.
+   *
+   * @default 'right'
+   */
+  iconPosition?: "left" | "right";
+
+  /**
+   * Sudut kelengkungan radius (khusus untuk varian 'bordered' dan 'separated'):
+   * - `'none'`: Sudut 0px.
+   * - `'sm'`: Sudut 6px.
+   * - `'md'`: Sudut 10px.
+   * - `'lg'`: Sudut 14px.
+   * - `'full'`: Sudut 20px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menonaktifkan seluruh interaksi accordion.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Kustomisasi visual granular root container (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Class CSS kustom untuk root accordion.
+   */
+  className?: string;
+
+  /**
+   * Style kustom untuk tiap elemen item accordion (UiProps).
+   */
+  itemStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tiap elemen item accordion.
+   */
+  itemClass?: string;
+
+  /**
+   * Style kustom untuk tombol trigger accordion (UiProps).
+   */
+  triggerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol trigger accordion.
+   */
+  triggerClass?: string;
+
+  /**
+   * Style kustom untuk teks judul trigger accordion (UiProps).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks judul trigger accordion.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk teks subtitle trigger accordion (UiProps).
+   */
+  subtitleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks subtitle trigger accordion.
+   */
+  subtitleClass?: string;
+
+  /**
+   * Style kustom untuk indikator ikon panah / chevron (UiProps).
+   */
+  iconStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk indikator ikon panah / chevron.
+   */
+  iconClass?: string;
+
+  /**
+   * Ikon kustom untuk menggantikan ikon panah bawaan accordion secara global.
+   */
+  icon?: any;
+
+  /**
+   * Style kustom untuk panel konten accordion (UiProps).
+   * Mengatur seluruh tampilan panel isi (background, padding, border, serta warna & tipografi teks isi).
+   */
+  contentStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk panel konten accordion.
+   */
+  contentClass?: string;
+
+  /**
+   * Callback event saat status item yang terbuka berubah.
+   * Mengembalikan string atau array string sesuai mode `multiple`.
+   */
+  onChange?: (value: any) => void;
+
+  /**
+   * Konten anak atau slot kustom.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Accordion untuk menyusun informasi berlapis yang dapat dibuka-tutup (collapse/expand)
+ * dengan dukungan multiple open, berbagai varian visual (default, bordered, separated, ghost),
+ * serta animasi transisi grid CSS yang sangat halus.
+ */
+
+const props = withDefaults(defineProps<AccordionProps>(), {
+  collapsible: true,
+  multiple: false,
+  variant: "default",
+  size: "md",
+  iconPosition: "right",
+  rounded: "md",
+  disabled: false,
+});
+const openItems = ref(
+  props.value !== undefined
+    ? Array.isArray(props.value)
+      ? props.value
+      : [props.value]
+    : props.defaultValue !== undefined
+    ? Array.isArray(props.defaultValue)
+      ? props.defaultValue
+      : [props.defaultValue]
+    : ([] as string[])
+);
+
+function getOpenList() {
+  const val = props.value !== undefined ? props.value : openItems.value;
+  if (!val) return [] as string[];
+  return Array.isArray(val) ? val : [val];
+}
+function isOpen(itemVal: string) {
+  const list = getOpenList();
+  return list.indexOf(itemVal) !== -1;
+}
+function handleToggle(itemVal: string, itemDisabled?: boolean) {
+  if (props.disabled || itemDisabled) return;
+  const list = getOpenList();
+  const isCurrentlyOpen = list.indexOf(itemVal) !== -1;
+  let next: string[];
+  if (props.multiple) {
+    if (isCurrentlyOpen) {
+      next = list.filter((v: string) => v !== itemVal);
+    } else {
+      next = [...list, itemVal];
+    }
+  } else {
+    if (isCurrentlyOpen) {
+      if (props.collapsible === false) {
+        return;
+      }
+      next = [];
+    } else {
+      next = [itemVal];
+    }
+  }
+  openItems.value = next;
+  if (props.onChange) {
+    props.onChange(props.multiple ? next : next[0] || "");
+  }
+}
+</script>

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

@@ -0,0 +1,227 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import {
+  buildUiStyle,
+  buildUiVars,
+  cleanUiValue,
+  UiProps,
+} from "../../core/types";
+
+export type AccordionUiProps = UiProps;
+
+export interface AccordionItem {
+  /**
+   * Nilai identifikasi unik untuk item accordion.
+   */
+  value: string;
+
+  /**
+   * Judul teks yang ditampilkan pada header trigger accordion.
+   */
+  title: string;
+
+  /**
+   * Subtitle atau deskripsi singkat sekunder di bawah judul.
+   */
+  subtitle?: string;
+
+  /**
+   * Konten isi panel yang terbuka saat accordion di-expand.
+   */
+  content?: any;
+
+  /**
+   * Ikon atau elemen visual opsional di samping judul.
+   */
+  icon?: any;
+
+  /**
+   * Badge teks atau counter angka opsional (misal: '12', 'Baru', 'Wajib').
+   */
+  badge?: string | number;
+
+  /**
+   * Ikon kustom untuk menggantikan ikon panah bawaan khusus item ini.
+   */
+  customIcon?: any;
+
+  /**
+   * Menonaktifkan item ini dari interaksi buka/tutup.
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  /**
+   * Daftar item accordion yang akan dirender.
+   */
+  items: AccordionItem[];
+
+  /**
+   * Nilai item yang sedang terbuka (controlled value).
+   * Bisa berupa string tunggal atau array string jika multiple={true}.
+   */
+  value?: string | string[];
+
+  /**
+   * Nilai default item yang terbuka saat pertama kali dirender (uncontrolled initial value).
+   */
+  defaultValue?: string | string[];
+
+  /**
+   * Mengizinkan lebih dari satu item terbuka secara bersamaan.
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Mengizinkan item yang terbuka untuk ditutup kembali saat diklik.
+   * @default true
+   */
+  collapsible?: boolean;
+
+  /**
+   * Varian tampilan visual accordion:
+   * - `'default'`: Garis pembatas (divider) minimalis antar-item.
+   * - `'bordered'`: Pembungkus border luar dengan sudut melengkung.
+   * - `'separated'`: Setiap item berupa kartu terpisah mandiri dengan jarak celah (gap).
+   * - `'ghost'`: Tampilan bersih tanpa border luar, hanya hover background lembut.
+   *
+   * @default 'default'
+   */
+  variant?: "default" | "bordered" | "separated" | "ghost";
+
+  /**
+   * Skala ukuran proporsional accordion (padding, font, icon):
+   * - `'sm'`: Kompak (13px font, padding rapat).
+   * - `'md'`: Standar (14px font, padding normal).
+   * - `'lg'`: Besar (16px font, padding lapang).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Posisi indikator ikon panah / chevron:
+   * - `'right'`: Di ujung kanan (standar desain).
+   * - `'left'`: Di sebelah kiri sebelum judul.
+   *
+   * @default 'right'
+   */
+  iconPosition?: "left" | "right";
+
+  /**
+   * Sudut kelengkungan radius (khusus untuk varian 'bordered' dan 'separated'):
+   * - `'none'`: Sudut 0px.
+   * - `'sm'`: Sudut 6px.
+   * - `'md'`: Sudut 10px.
+   * - `'lg'`: Sudut 14px.
+   * - `'full'`: Sudut 20px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menonaktifkan seluruh interaksi accordion.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Kustomisasi visual granular root container (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Class CSS kustom untuk root accordion.
+   */
+  className?: string;
+
+  /**
+   * Style kustom untuk tiap elemen item accordion (UiProps).
+   */
+  itemStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tiap elemen item accordion.
+   */
+  itemClass?: string;
+
+  /**
+   * Style kustom untuk tombol trigger accordion (UiProps).
+   */
+  triggerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol trigger accordion.
+   */
+  triggerClass?: string;
+
+  /**
+   * Style kustom untuk teks judul trigger accordion (UiProps).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks judul trigger accordion.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk teks subtitle trigger accordion (UiProps).
+   */
+  subtitleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks subtitle trigger accordion.
+   */
+  subtitleClass?: string;
+
+  /**
+   * Style kustom untuk indikator ikon panah / chevron (UiProps).
+   */
+  iconStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk indikator ikon panah / chevron.
+   */
+  iconClass?: string;
+
+  /**
+   * Ikon kustom untuk menggantikan ikon panah bawaan accordion secara global.
+   */
+  icon?: any;
+
+  /**
+   * Style kustom untuk panel konten accordion (UiProps).
+   * Mengatur seluruh tampilan panel isi (background, padding, border, serta warna & tipografi teks isi).
+   */
+  contentStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk panel konten accordion.
+   */
+  contentClass?: string;
+
+  /**
+   * Callback event saat status item yang terbuka berubah.
+   * Mengembalikan string atau array string sesuai mode `multiple`.
+   */
+  onChange?: (value: any) => void;
+
+  /**
+   * Konten anak atau slot kustom.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<AccordionProps>;
+export default component;

package/src/web/accordion/index.ts

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