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

package/src/web/tooltip/tooltip.vue

@@ -0,0 +1,417 @@
+<template>
+  <div
+    :class="`ttdk-tooltip-wrapper ${className || ''}`.trim()"
+    :data-open="isOpen ? 'true' : 'false'"
+    :data-disabled="disabled ? 'true' : 'false'"
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <div
+      ref="triggerRef"
+      :class="`ttdk-tooltip-trigger ${triggerClass || ''}`.trim()"
+      :tabIndex="disabled ? -1 : 0"
+      :aria-describedby="isOpen ? 'ttdk-tooltip' : undefined"
+      :data-open="isOpen ? 'true' : 'false'"
+      :data-disabled="disabled ? 'true' : 'false'"
+      :style="{
+        ...buildUiVars(triggerStyle),
+      }"
+      @pointerenter="async (event) => handlePointerEnter()"
+      @mouseenter="async (event) => handlePointerEnter()"
+      @pointerleave="async (event) => handlePointerLeave()"
+      @mouseleave="async (event) => handlePointerLeave()"
+      @focus="async (event) => handleFocus()"
+      @blur="async (event) => handleBlur()"
+      @keydown="async (e) => handleKeyDown(e)"
+    >
+      <template v-if="$slots.default">
+        <slot />
+      </template>
+    </div>
+    <template v-if="isOpen">
+      <div
+        role="tooltip"
+        ref="tooltipRef"
+        :class="`ttdk-tooltip-content ${contentClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(contentStyle),
+        }"
+        @pointerenter="async (event) => handlePointerEnter()"
+      @mouseenter="async (event) => handlePointerEnter()"
+      @pointerleave="async (event) => handlePointerLeave()"
+      @mouseleave="async (event) => handlePointerLeave()"
+      >
+        <template v-if="showArrow">
+          <div
+            ref="arrowRef"
+            :class="`ttdk-tooltip-arrow ${arrowClass || ''}`.trim()"
+            :style="{
+              ...buildUiVars(arrowStyle),
+            }"
+          ></div>
+        </template>
+
+        <div class="ttdk-tooltip-body">
+          <template v-if="text">
+            <span class="ttdk-tooltip-text">{{ text }}</span>
+          </template>
+
+          <template v-if="content && !text">
+            {{ content }}
+          </template>
+
+          <template v-if="!text && !content">
+            <slot name="content"></slot>
+          </template>
+
+          <template v-if="kbd">
+            <span class="ttdk-tooltip-kbd-list"
+              ><template :key="idx" v-for="(key, idx) in getKbdList()">
+                <kbd class="ttdk-tooltip-kbd">{{ key }}</kbd>
+              </template></span
+            >
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, nextTick, watch, getCurrentInstance, computed } from "vue";
+
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  arrow as floatingArrow,
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type TooltipPlacement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end"
+  | "right"
+  | "right-start"
+  | "right-end";
+export type TooltipUiProps = UiProps;
+export interface TooltipProps {
+  /**
+   * Teks konten tooltip yang ditampilkan.
+   */
+  text?: string;
+
+  /**
+   * Konten kustom tooltip (JSX / VNode atau renderable content).
+   */
+  content?: any;
+
+  /**
+   * Pintasan keyboard opsional yang ditampilkan di dalam tooltip (misal: '⌘K', ['Ctrl', 'S']).
+   */
+  kbd?: string | string[];
+
+  /**
+   * Posisi penempatan tooltip terhadap elemen pemicu.
+   * @default 'top'
+   */
+  placement?: TooltipPlacement;
+
+  /**
+   * Jarak offset dalam pixel dari elemen pemicu (trigger).
+   * @default 8
+   */
+  offsetDistance?: number;
+
+  /**
+   * Menampilkan elemen panah segitiga penunjuk arah ke elemen pemicu.
+   * @default true
+   */
+  arrow?: boolean;
+
+  /**
+   * Penundaan kemunculan tooltip dalam milidetik (delay saat pointer enter).
+   * @default 150
+   */
+  openDelay?: number;
+
+  /**
+   * Penundaan hilangnya tooltip dalam milidetik (delay saat pointer leave).
+   * @default 100
+   */
+  closeDelay?: number;
+
+  /**
+   * Status visibilitas tooltip terkontrol (controlled mode).
+   */
+  open?: boolean;
+
+  /**
+   * Status visibilitas awal (uncontrolled initial state).
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Menonaktifkan tooltip sehingga tidak muncul saat di-hover atau difokus.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Kustomisasi visual granular container utama (UiProps).
+   */
+  ui?: TooltipUiProps;
+
+  /**
+   * Style inline CSS native untuk wrapper luar.
+   */
+  style?: any;
+
+  /**
+   * Class CSS kustom untuk wrapper luar.
+   */
+  className?: string;
+
+  /**
+   * Class CSS kustom untuk pemicu (trigger container).
+   */
+  triggerClass?: string;
+
+  /**
+   * Style kustom untuk pemicu (trigger container) (UiProps).
+   */
+  triggerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk panel tooltip konten.
+   */
+  contentClass?: string;
+
+  /**
+   * Style kustom untuk panel tooltip konten (UiProps).
+   */
+  contentStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen panah (arrow).
+   */
+  arrowClass?: string;
+
+  /**
+   * Style kustom untuk elemen panah (arrow) (UiProps).
+   */
+  arrowStyle?: UiProps;
+
+  /**
+   * Callback saat status open berubah.
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Elemen pemicu (trigger) yang dibungkus oleh tooltip.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Tooltip untuk menampilkan informasi kontekstual singkat saat pengguna mengarahkan kursor atau memfokuskan elemen pemicu.
+ */
+
+const props = defineProps<TooltipProps>();
+const vm = getCurrentInstance();
+const isControlled = computed(() => Boolean(vm?.vnode.props && ("open" in vm.vnode.props || "onUpdate:open" in vm.vnode.props || ":open" in vm.vnode.props)));
+const isArrowControlled = computed(() => Boolean(vm?.vnode.props && ("arrow" in vm.vnode.props || ":arrow" in vm.vnode.props)));
+const showArrow = computed(() => isArrowControlled.value ? props.arrow !== false : true);
+const isOpen = ref(isControlled.value ? props.open : props.defaultOpen || false);
+
+watch(
+  () => props.open,
+  (val) => {
+    if (isControlled.value && val !== undefined && val !== isOpen.value) {
+      setOpen(val);
+    }
+  }
+);
+
+const cleanupAutoUpdate = ref(null);
+const openTimer = ref(null);
+const closeTimer = ref(null);
+
+const triggerRef = ref<any>(null);
+const tooltipRef = ref<any>(null);
+const arrowRef = ref<any>(null);
+
+onMounted(() => {
+  if (props.open !== undefined) {
+    isOpen.value = props.open;
+  }
+  if (isOpen.value) {
+    setTimeout(() => {
+      startFloating();
+      updatePosition();
+    }, 0);
+  }
+});
+onUnmounted(() => {
+  clearTimers();
+  stopFloating();
+});
+
+function getKbdList() {
+  if (!props.kbd) return [];
+  if (Array.isArray(props.kbd)) return props.kbd;
+  return [props.kbd];
+}
+function clearTimers() {
+  if (openTimer.value) {
+    clearTimeout(openTimer.value);
+    openTimer.value = null;
+  }
+  if (closeTimer.value) {
+    clearTimeout(closeTimer.value);
+    closeTimer.value = null;
+  }
+}
+function setOpen(value: boolean) {
+  if (props.disabled && value) return;
+  if (!isControlled.value) {
+    isOpen.value = value;
+  }
+  if (props.onOpenChange) {
+    props.onOpenChange(value);
+  }
+  if (value) {
+    nextTick(() => {
+      startFloating();
+      updatePosition();
+    });
+  } else {
+    stopFloating();
+  }
+}
+function handlePointerEnter() {
+  if (props.disabled) return;
+  clearTimers();
+  const delay = props.openDelay !== undefined ? props.openDelay : 150;
+  if (delay <= 0) {
+    setOpen(true);
+  } else {
+    openTimer.value = setTimeout(() => {
+      setOpen(true);
+    }, delay);
+  }
+}
+function handlePointerLeave() {
+  clearTimers();
+  const delay = props.closeDelay !== undefined ? props.closeDelay : 100;
+  if (delay <= 0) {
+    setOpen(false);
+  } else {
+    closeTimer.value = setTimeout(() => {
+      setOpen(false);
+    }, delay);
+  }
+}
+function handleFocus() {
+  if (props.disabled) return;
+  clearTimers();
+  setOpen(true);
+}
+function handleBlur() {
+  clearTimers();
+  setOpen(false);
+}
+function handleKeyDown(e: any) {
+  if (e.key === "Escape" && isOpen.value) {
+    clearTimers();
+    setOpen(false);
+  }
+}
+function updatePosition() {
+  if (!triggerRef.value || !tooltipRef.value) return;
+  const targetPlacement = props.placement || "top";
+  const showArrowVal = showArrow.value;
+  const offsetDist =
+    props.offsetDistance !== undefined ? props.offsetDistance : 8;
+  const middleware: any[] = [
+    offset(offsetDist),
+    flip({
+      padding: 8,
+    }),
+    shift({
+      padding: 8,
+    }),
+  ];
+  if (showArrowVal && arrowRef.value) {
+    middleware.push(
+      floatingArrow({
+        element: arrowRef.value,
+        padding: 8,
+      })
+    );
+  }
+  computePosition(triggerRef.value, tooltipRef.value, {
+    placement: targetPlacement,
+    middleware,
+  }).then((data: any) => {
+    if (!tooltipRef.value) return;
+    tooltipRef.value.style.left = `${data.x}px`;
+    tooltipRef.value.style.top = `${data.y}px`;
+    const side = data.placement.split("-")[0];
+    tooltipRef.value.setAttribute("data-side", side);
+    tooltipRef.value.setAttribute("data-placement", data.placement);
+    if (
+      showArrowVal &&
+      arrowRef.value &&
+      data.middlewareData &&
+      data.middlewareData.arrow
+    ) {
+      const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
+      const staticSide: any = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+      }[side];
+      arrowRef.value.style.left = arrowX != null ? `${arrowX}px` : "";
+      arrowRef.value.style.top = arrowY != null ? `${arrowY}px` : "";
+      arrowRef.value.style.right = "";
+      arrowRef.value.style.bottom = "";
+      if (staticSide) {
+        arrowRef.value.style[staticSide] = "-4px";
+      }
+    }
+  });
+}
+function startFloating() {
+  stopFloating();
+  if (typeof window === "undefined") return;
+  if (triggerRef.value && tooltipRef.value) {
+    cleanupAutoUpdate.value = autoUpdate(
+      triggerRef.value,
+      tooltipRef.value,
+      () => {
+        updatePosition();
+      }
+    );
+  }
+}
+function stopFloating() {
+  if (cleanupAutoUpdate.value) {
+    cleanupAutoUpdate.value();
+    cleanupAutoUpdate.value = null;
+  }
+}
+</script>

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

@@ -0,0 +1,150 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  arrow as floatingArrow,
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type TooltipPlacement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end"
+  | "right"
+  | "right-start"
+  | "right-end";
+
+export type TooltipUiProps = UiProps;
+
+export interface TooltipProps {
+  /**
+   * Teks konten tooltip yang ditampilkan.
+   */
+  text?: string;
+
+  /**
+   * Konten kustom tooltip (JSX / VNode atau renderable content).
+   */
+  content?: any;
+
+  /**
+   * Pintasan keyboard opsional yang ditampilkan di dalam tooltip (misal: '⌘K', ['Ctrl', 'S']).
+   */
+  kbd?: string | string[];
+
+  /**
+   * Posisi penempatan tooltip terhadap elemen pemicu.
+   * @default 'top'
+   */
+  placement?: TooltipPlacement;
+
+  /**
+   * Jarak offset dalam pixel dari elemen pemicu (trigger).
+   * @default 8
+   */
+  offsetDistance?: number;
+
+  /**
+   * Menampilkan elemen panah segitiga penunjuk arah ke elemen pemicu.
+   * @default true
+   */
+  arrow?: boolean;
+
+  /**
+   * Penundaan kemunculan tooltip dalam milidetik (delay saat pointer enter).
+   * @default 150
+   */
+  openDelay?: number;
+
+  /**
+   * Penundaan hilangnya tooltip dalam milidetik (delay saat pointer leave).
+   * @default 100
+   */
+  closeDelay?: number;
+
+  /**
+   * Status visibilitas tooltip terkontrol (controlled mode).
+   */
+  open?: boolean;
+
+  /**
+   * Status visibilitas awal (uncontrolled initial state).
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Menonaktifkan tooltip sehingga tidak muncul saat di-hover atau difokus.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Kustomisasi visual granular container utama (UiProps).
+   */
+  ui?: TooltipUiProps;
+
+  /**
+   * Style inline CSS native untuk wrapper luar.
+   */
+  style?: any;
+
+  /**
+   * Class CSS kustom untuk wrapper luar.
+   */
+  className?: string;
+
+  /**
+   * Class CSS kustom untuk pemicu (trigger container).
+   */
+  triggerClass?: string;
+
+  /**
+   * Style kustom untuk pemicu (trigger container) (UiProps).
+   */
+  triggerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk panel tooltip konten.
+   */
+  contentClass?: string;
+
+  /**
+   * Style kustom untuk panel tooltip konten (UiProps).
+   */
+  contentStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen panah (arrow).
+   */
+  arrowClass?: string;
+
+  /**
+   * Style kustom untuk elemen panah (arrow) (UiProps).
+   */
+  arrowStyle?: UiProps;
+
+  /**
+   * Callback saat status open berubah.
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Elemen pemicu (trigger) yang dibungkus oleh tooltip.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<TooltipProps>;
+export default component;

package/src/webview/bottomsheet/AI_GUIDE.md

@@ -0,0 +1,141 @@
+# <BottomSheet /> — TTDK Component Reference
+
+BottomSheet — Komponen lembar geser bawah ramah sentuhan (touch-friendly) untuk in-app webview & mobile. Mendukung safe-area-inset perangkat mobile, gesture swipe-down to dismiss, header, footer, dan mode iOS / Material.
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/webview/bottomsheet/bottomsheet.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import BottomSheet from "@ttdk-design-system/library-react/webview/bottomsheet";
+
+// Vue 3
+import BottomSheet from "@ttdk-design-system/library-vue/webview/bottomsheet";
+
+// Svelte
+import BottomSheet from "@ttdk-design-system/library-svelte/webview/bottomsheet";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+
+### Sub-interface: `BottomSheetProps`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `open?` | `boolean` | `-` | Status visibilitas bottom sheet (mode controlled). Mendukung `v-model:open` / `v-model` pada Vue dan controlled prop `open` pada React. |
+| `defaultOpen?` | `boolean` | `false` | Status visibilitas awal bottom sheet saat pertama kali dimuat (uncontrolled initial state). |
+| `title?` | `string` | `-` | Judul teks di bagian header bottom sheet. |
+| `description?` | `string` | `-` | Deskripsi penjelasan di bagian header di bawah judul. |
+| `height?` | `BottomSheetHeight` | `auto` | Skala ukuran tinggi bottom sheet: - `'auto'`: Menyesuaikan tinggi isi konten (maksimal 90vh). - `'sm'`: Lembar ringkas (~35% tinggi layar). - `'md'`: Lembar proporsional standar (~55% tinggi layar). - `'lg'`: Lembar luas (~85% tinggi layar). - `'full'`: Tampilan penuh (100% tinggi layar). |
+| `maxHeight?` | `string` | `-` | Batas tinggi maksimum lembar sheet (contoh: '90vh', '600px'). |
+| `mode?` | `BottomSheetMode` | `auto` | Cita rasa / gaya platform mobile: - `'auto'`: Desain netral adaptif khas TTDK Design System. - `'ios'`: Cita rasa Apple Human Interface (frosted glass, sudut kurva halus 20px). - `'material'`: Cita rasa Material Design 3 (sudut 28px, elevated shadow). |
+| `handle?` | `boolean` | `true` | Menampilkan bilah pegangan geser (drag handle indicator) di bagian atas lembar. |
+| `swipeable?` | `boolean` | `true` | Mengaktifkan gestur sentuh geser ke bawah (swipe-down) untuk menutup lembar. |
+| `close?` | `boolean` | `false` | Menampilkan tombol tutup 'X' di pojok kanan atas header. |
+| `closeIcon?` | `any` | `-` | Ikon kustom untuk tombol tutup. |
+| `dismissible?` | `boolean` | `true` | Mengizinkan lembar ditutup saat pengguna mengeklik backdrop overlay atau menekan tombol Escape. |
+| `preventClose?` | `boolean` | `false` | Mencegah lembar ditutup saat klik di luar atau saat digeser (prevent close). Jika bernilai `true`, lembar hanya dapat ditutup via aksi eksplisit. |
+| `overlay?` | `boolean` | `true` | Menampilkan lapisan latar belakang redup (backdrop overlay). |
+| `preventScroll?` | `boolean` | `true` | Mengunci scrolling pada halaman web di latar belakang saat lembar terbuka (body scroll lock). |
+| `header?` | `any` | `-` | Konten kustom untuk bagian header lembar. |
+| `body?` | `any` | `-` | Konten kustom untuk bagian isi utama (body) lembar. |
+| `footer?` | `any` | `-` | Konten kustom untuk bagian footer aksi di bawah lembar (misal: tombol konfirmasi / CTA). |
+| `content?` | `any` | `-` | Penggantian seluruh konten lembar (mengabaikan layout header, body, footer bawaan). |
+| `children?` | `any` | `-` | Konten utama lembar bottom sheet (body content). |
+| `onOpenChange?` | `(open: boolean) => void` | `-` | Callback event saat status terbuka/tertutup berubah (standar React). |
+| `onUpdateOpen?` | `(open: boolean) => void` | `-` | Callback event saat status terbuka/tertutup berubah untuk two-way binding `v-model:open` (Vue). |
+| `onOpen?` | `() => void` | `-` | Callback event saat lembar bottom sheet terbuka. |
+| `onClose?` | `() => void` | `-` | Callback event saat lembar bottom sheet ditutup. |
+| `onClosePrevent?` | `() => void` | `-` | Callback event saat pengguna mencoba menutup lembar tetapi dicegah karena `preventClose={true}`. |
+| `ui?` | `BottomSheetUiProps` | `-` | Kustomisasi visual granular pada elemen root melalui style-like object. |
+| `className?` | `string` | `-` |  |
+| `overlayClass?` | `string` | `-` |  |
+| `overlayStyle?` | `any` | `-` |  |
+| `contentClass?` | `string` | `-` |  |
+| `contentStyle?` | `any` | `-` |  |
+| `headerClass?` | `string` | `-` |  |
+| `headerStyle?` | `any` | `-` |  |
+| `bodyClass?` | `string` | `-` |  |
+| `bodyStyle?` | `any` | `-` |  |
+| `footerClass?` | `string` | `-` |  |
+| `footerStyle?` | `any` | `-` |  |
+| `handleClass?` | `string` | `-` |  |
+| `handleStyle?` | `any` | `-` |  |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from 'react';
+import { BottomSheet } from "@ttdk-design-system/library-react/webview/bottomsheet";
+import "@ttdk-design-system/library-react/webview/bottomsheet/bottomsheet.css";
+
+export function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setOpen(true)}>Buka Bottom Sheet</button>
+      <BottomSheet
+        open={open}
+        title="Konfirmasi Tindakan Medis"
+        description="Pastikan data pasien dan resep obat sudah sesuai"
+        onClose={() => setOpen(false)}
+      >
+        <p>Konten rincian pemeriksaan pasien dalam webview.</p>
+      </BottomSheet>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BottomSheet } from "@ttdk-design-system/library-vue/webview/bottomsheet";
+import "@ttdk-design-system/library-vue/webview/bottomsheet/bottomsheet.css";
+
+const open = ref(false);
+</script>
+
+<template>
+  <div>
+    <button @click="open = true">Buka Bottom Sheet</button>
+    <BottomSheet
+      v-model:open="open"
+      title="Konfirmasi Tindakan Medis"
+      description="Pastikan data pasien dan resep obat sudah sesuai"
+    >
+      <p>Konten rincian pemeriksaan pasien dalam webview.</p>
+    </BottomSheet>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import { BottomSheet } from "@ttdk-design-system/library-svelte/webview/bottomsheet";
+  import "@ttdk-design-system/library-svelte/webview/bottomsheet/bottomsheet.css";
+
+  let open = false;
+</script>
+
+<div>
+  <button on:click={() => open = true}>Buka Bottom Sheet</button>
+  <BottomSheet
+    open={open}
+    title="Konfirmasi Tindakan Medis"
+    description="Pastikan data pasien dan resep obat sudah sesuai"
+    onClose={() => open = false}
+  >
+    <p>Konten rincian pemeriksaan pasien dalam webview.</p>
+  </BottomSheet>
+</div>
+```