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

package/src/web/chip/chip.vue

@@ -0,0 +1,220 @@
+<template>
+  <button
+    type="button"
+    :class="`ttdk-chip ${className || ''}`.trim()"
+    :data-variant="variant || 'primary'"
+    :data-appearance="appearance || 'soft'"
+    :data-size="size || 'md'"
+    :data-rounded="rounded || 'full'"
+    :data-selected="
+      selected !== undefined ? (selected ? 'true' : 'false') : undefined
+    "
+    :data-disabled="disabled || variant === 'disabled' ? 'true' : 'false'"
+    :style="{
+      ...buildUiVars(ui),
+      ...(ui?.border
+        ? {
+            border: ui.border,
+          }
+        : {}),
+      ...(ui?.borderColor
+        ? {
+            borderColor: ui.borderColor,
+          }
+        : {}),
+      ...(ui?.borderWidth
+        ? {
+            borderWidth: ui.borderWidth,
+          }
+        : {}),
+      ...(ui?.borderStyle
+        ? {
+            borderStyle: ui.borderStyle,
+          }
+        : {}),
+      ...(ui?.borderRadius
+        ? {
+            borderRadius: ui.borderRadius,
+          }
+        : {}),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+    @click="
+      async (event) => {
+        if (disabled || variant === 'disabled') return;
+        onClick?.(event);
+      }
+    "
+  >
+    <slot />
+    <template v-if="label">
+      <span
+        :class="`ttdk-chip-label ${labelClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(labelStyle),
+        }"
+        >{{ label }}</span
+      >
+    </template>
+
+    <template v-if="closable">
+      <span
+        role="button"
+        aria-label="Hapus chip"
+        :tabIndex="0"
+        :class="`ttdk-chip-close ${closableClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(closableStyle),
+        }"
+        @click="
+          async (event) => {
+            event.stopPropagation();
+            if (disabled) return;
+            onClose?.(event);
+          }
+        "
+        ><svg viewBox="0 0 24 24">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line></svg
+      ></span>
+    </template>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type ChipUiProps = UiProps;
+export interface ChipProps {
+  /**
+   * Teks label yang ditampilkan pada chip.
+   */
+  label?: string;
+
+  /**
+   * Status apakah chip sedang dalam kondisi terpilih (selected).
+   *
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Varian warna semantik tema chip:
+   * - `'primary'`: Brand Teal utama (#00B5AD).
+   * - `'success'`: Sukses hijau (#04B761).
+   * - `'info'`: Biru informasi (#2196F3).
+   * - `'warning'`: Peringatan kuning / amber (#F88000).
+   * - `'danger'`: Bahaya / merah (#D0021B).
+   * - `'neutral'`: Netral abu-abu.
+   * - `'disabled'`: Status nonaktif (disabled).
+   *
+   * @default 'primary'
+   */
+  variant?:
+    | "primary"
+    | "success"
+    | "info"
+    | "warning"
+    | "danger"
+    | "neutral"
+    | "disabled";
+
+  /**
+   * Tipe tampilan visual chip:
+   * - `'soft'`: Background warna transparan lembut (default).
+   * - `'solid'`: Background warna solid pekat.
+   * - `'outline'`: Border tipis dengan background transparan.
+   *
+   * @default 'soft'
+   */
+  appearance?: "soft" | "solid" | "outline";
+
+  /**
+   * Skala ukuran chip:
+   * - `'sm'`: Tinggi 28px, font 12px.
+   * - `'md'`: Tinggi 32px, font 13px (standar).
+   * - `'lg'`: Tinggi 38px, font 15px.
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan:
+   * - `'full'`: Bentuk kapsul / pill 9999px (default).
+   * - `'none'`: Persegi lancip 0px.
+   * - `'sm'`: Sudut melengkung halus 4px.
+   * - `'md'`: Sudut melengkung sedang 6px.
+   * - `'lg'`: Sudut melengkung besar 8px.
+   *
+   * @default 'full'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menampilkan tombol silang (x) untuk menghapus / menutup chip.
+   *
+   * @default false
+   */
+  closable?: boolean;
+
+  /**
+   * Menonaktifkan interaksi klik pada chip.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * 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 label chip (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks label chip (Tailwind / class kustom).
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk tombol tutup chip (UiProps).
+   */
+  closableStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol tutup chip (Tailwind / class kustom).
+   */
+  closableClass?: string;
+
+  /**
+   * Event handler saat chip diklik (toggle select atau trigger aksi).
+   */
+  onClick?: (event?: any) => void;
+
+  /**
+   * Event handler saat tombol close (x) diklik.
+   */
+  onClose?: (event?: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom / icon kustom yang disisipkan di dalam chip.
+   */
+  children?: any;
+}
+
+const props = defineProps<ChipProps>();
+</script>

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

@@ -0,0 +1,140 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type ChipUiProps = UiProps;
+
+export interface ChipProps {
+  /**
+   * Teks label yang ditampilkan pada chip.
+   */
+  label?: string;
+
+  /**
+   * Status apakah chip sedang dalam kondisi terpilih (selected).
+   *
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Varian warna semantik tema chip:
+   * - `'primary'`: Brand Teal utama (#00B5AD).
+   * - `'success'`: Sukses hijau (#04B761).
+   * - `'info'`: Biru informasi (#2196F3).
+   * - `'warning'`: Peringatan kuning / amber (#F88000).
+   * - `'danger'`: Bahaya / merah (#D0021B).
+   * - `'neutral'`: Netral abu-abu.
+   * - `'disabled'`: Status nonaktif (disabled).
+   *
+   * @default 'primary'
+   */
+  variant?:
+    | "primary"
+    | "success"
+    | "info"
+    | "warning"
+    | "danger"
+    | "neutral"
+    | "disabled";
+
+  /**
+   * Tipe tampilan visual chip:
+   * - `'soft'`: Background warna transparan lembut (default).
+   * - `'solid'`: Background warna solid pekat.
+   * - `'outline'`: Border tipis dengan background transparan.
+   *
+   * @default 'soft'
+   */
+  appearance?: "soft" | "solid" | "outline";
+
+  /**
+   * Skala ukuran chip:
+   * - `'sm'`: Tinggi 28px, font 12px.
+   * - `'md'`: Tinggi 32px, font 13px (standar).
+   * - `'lg'`: Tinggi 38px, font 15px.
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan:
+   * - `'full'`: Bentuk kapsul / pill 9999px (default).
+   * - `'none'`: Persegi lancip 0px.
+   * - `'sm'`: Sudut melengkung halus 4px.
+   * - `'md'`: Sudut melengkung sedang 6px.
+   * - `'lg'`: Sudut melengkung besar 8px.
+   *
+   * @default 'full'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menampilkan tombol silang (x) untuk menghapus / menutup chip.
+   *
+   * @default false
+   */
+  closable?: boolean;
+
+  /**
+   * Menonaktifkan interaksi klik pada chip.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * 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 label chip (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks label chip (Tailwind / class kustom).
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk tombol tutup chip (UiProps).
+   */
+  closableStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol tutup chip (Tailwind / class kustom).
+   */
+  closableClass?: string;
+
+  /**
+   * Event handler saat chip diklik (toggle select atau trigger aksi).
+   */
+  onClick?: (event?: any) => void;
+
+  /**
+   * Event handler saat tombol close (x) diklik.
+   */
+  onClose?: (event?: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom / icon kustom yang disisipkan di dalam chip.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<ChipProps>;
+export default component;

package/src/web/chip/index.ts

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

package/src/web/chip/manifest.json

@@ -0,0 +1,186 @@
+{
+  "name": "@ttdk-design-system/chip",
+  "component": "Chip",
+  "folder": "chip",
+  "description": "TTDK Chip component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "chip.css",
+      "importPath": "web/chip/chip.css"
+    }
+  ],
+  "props": {
+    "label": {
+      "name": "label",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks label yang ditampilkan pada chip.",
+      "example": null,
+      "param": null
+    },
+    "selected": {
+      "name": "selected",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah chip sedang dalam kondisi terpilih (selected).",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "| 'primary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'neutral'\n  | 'disabled'",
+      "optional": true,
+      "default": "primary",
+      "description": "Varian warna semantik tema chip: - `'primary'`: Brand Teal utama (#00B5AD). - `'success'`: Sukses hijau (#04B761). - `'info'`: Biru informasi (#2196F3). - `'warning'`: Peringatan kuning / amber (#F88000). - `'danger'`: Bahaya / merah (#D0021B). - `'neutral'`: Netral abu-abu. - `'disabled'`: Status nonaktif (disabled).",
+      "example": null,
+      "param": null
+    },
+    "appearance": {
+      "name": "appearance",
+      "type": "'soft' | 'solid' | 'outline'",
+      "optional": true,
+      "default": "soft",
+      "description": "Tipe tampilan visual chip: - `'soft'`: Background warna transparan lembut (default). - `'solid'`: Background warna solid pekat. - `'outline'`: Border tipis dengan background transparan.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran chip: - `'sm'`: Tinggi 28px, font 12px. - `'md'`: Tinggi 32px, font 13px (standar). - `'lg'`: Tinggi 38px, font 15px.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "full",
+      "description": "Bentuk sudut kelengkungan: - `'full'`: Bentuk kapsul / pill 9999px (default). - `'none'`: Persegi lancip 0px. - `'sm'`: Sudut melengkung halus 4px. - `'md'`: Sudut melengkung sedang 6px. - `'lg'`: Sudut melengkung besar 8px.",
+      "example": null,
+      "param": null
+    },
+    "closable": {
+      "name": "closable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan tombol silang (x) untuk menghapus / menutup chip.",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan interaksi klik pada chip.",
+      "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
+    },
+    "labelStyle": {
+      "name": "labelStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks label chip (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "labelClass": {
+      "name": "labelClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks label chip (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "closableStyle": {
+      "name": "closableStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tutup chip (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "closableClass": {
+      "name": "closableClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tutup chip (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "onClick": {
+      "name": "onClick",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler saat chip diklik (toggle select atau trigger aksi).",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler saat tombol close (x) diklik.",
+      "example": null,
+      "param": null
+    },
+    "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": "Konten kustom / icon kustom yang disisipkan di dalam chip.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}