@idds/vue 1.6.20 → 1.6.21

package/AGENT.md

@@ -0,0 +1,352 @@
+# INA Digital Design System (IDDS) - Vue Comprehensive Agent Manual
+
+This manual provides complete documentation for AI Coding Agents (such as GitHub Copilot, Cursor, Claude, Gemini) and human developers implementing `@idds/vue` components within Vue 3 applications. It details every available component, its complete set of Vue props, reactive `v-model` binding rules, template named slots, allowed parameter values, and clear usage code snippets.
+
+---
+
+## Core Setup & Global Integration
+
+### 1. Stylesheet Registration
+The application MUST import the global stylesheet once at the application's root layer (typically `main.ts` or `App.vue` setup):
+```typescript
+import '@idds/vue/index.css';
+```
+
+### 2. Component Import Rules
+Always import components cleanly inside standard `<script setup>` blocks directly from the package root:
+```vue
+<script setup lang="ts">
+import { Button, TextField, Modal, SelectDropdown } from '@idds/vue';
+</script>
+```
+
+---
+
+## Exhaustive Component Reference
+
+### 1. Layout, Indicators & Generic Containers
+
+#### `Button`
+Trigger element supporting slot additions and interaction hierarchies.
+- **Props**:
+  - `variant`: `'primary' | 'secondary' | 'tertiary' | 'link' | 'custom'` (Default: `'primary'`)
+  - `size`: `'2xl' | 'xl' | 'lg' | 'md' | 'sm'` (Default: `'md'`)
+  - `disabled`: `boolean` (Default: `false`)
+  - `loading`: `boolean` (Default: `false`)
+- **Slots**: `#default` (text content), `#icon-left` (leading icon), `#icon-right` (trailing icon)
+- **Usage**:
+  ```vue
+  <template>
+    <Button variant="primary" size="lg" @click="onSubmit">
+      <template #icon-left><IconCheck /></template>
+      Simpan Perubahan
+    </Button>
+  </template>
+  ```
+
+#### `ButtonGroup`
+Wraps consecutive multiple buttons ensuring integrated boundary aesthetics.
+- **Slots**: `#default` containing `<Button>` children.
+- **Usage**:
+  ```vue
+  <ButtonGroup>
+    <Button variant="secondary">Kiri</Button>
+    <Button variant="primary">Kanan</Button>
+  </ButtonGroup>
+  ```
+
+#### `Card`
+Standardized visual structural wrapper.
+- **Props**: `clickable`: `boolean`
+- **Slots**: `#default`, `#header`, `#footer`
+- **Usage**:
+  ```vue
+  <Card class="p-4 border border-stroke-primary">
+    <h3>Konten Utama</h3>
+  </Card>
+  ```
+
+#### `CardPlain`
+Clean minimalist semantic div wrapper container.
+- **Slots**: `#default`
+
+#### `Divider`
+Horizontal or vertical breakline divider.
+- **Props**: `orientation`: `'horizontal' | 'vertical'` (Default: `'horizontal'`)
+
+#### `Skeleton`
+Placeholder preview indicators rendered during processing.
+- **Props**:
+  - `variant`: `'circular' | 'rectangular' | 'rounded'` (Default: `'rounded'`)
+  - `width`, `height`: `string | number`
+- **Usage**:
+  ```vue
+  <Skeleton variant="rounded" :height="40" width="100%" />
+  ```
+
+#### `Spinner`
+Indeterminate graphic circle loader.
+- **Props**: `size`: `'sm' | 'md' | 'lg'`, `color`: `string`
+
+#### `Avatar`
+Displays profile thumbnails.
+- **Props**:
+  - `src`: `string`
+  - `alt`: `string`
+  - `size`: `'sm' | 'md' | 'lg' | 'xl'`
+  - `fallbackText`: `string` (Displays initials cleanly)
+
+#### `Badge`
+Contextual status tracker.
+- **Props**:
+  - `text`: `string`
+  - `variant`: `'success' | 'danger' | 'warning' | 'info' | 'neutral'`
+  - `type`: `'solid' | 'soft' | 'outline'`
+- **Slots**: `#icon`
+- **Usage**:
+  ```vue
+  <Badge text="Aktif" variant="success" type="solid" />
+  ```
+
+#### `CircleProgressBar` / `ProgressBar` / `LinearProgressIndicator` / `TableProgressBar`
+Progress tracker displays.
+- **Props**: `progress`: `number` (0-100), `status`: `'default' | 'success' | 'error'`
+
+---
+
+### 2. Form Inputs (v-model Integration)
+
+#### `TextField`
+Robust input field leveraging integrated debounce and direct resets.
+- **Bindings**: Bound directly using reactive `v-model` (or `v-model:modelValue`).
+- **Props**:
+  - `label`: `string`
+  - `placeholder`: `string`
+  - `helperText`: `string`
+  - `errorMessage`: `string`
+  - `status`: `'neutral' | 'error' | 'warning' | 'success'`
+  - `size`: `'sm' | 'md' | 'lg'`
+  - `disabled`, `readonly`: `boolean`
+  - `maxlength`: `number`
+  - `showCharCount`: `boolean`
+  - `showClearButton`: `boolean` (Default: `true`)
+- **Slots**: `#prefix`, `#suffix`
+- **Usage**:
+  ```vue
+  <template>
+    <TextField
+      v-model="username"
+      label="Nama Pengguna"
+      placeholder="Masukkan nama"
+      :status="hasError ? 'error' : 'neutral'"
+      :errorMessage="hasError ? 'Wajib diisi' : ''"
+      showClearButton
+    />
+  </template>
+  ```
+
+#### `TextArea`
+Multi-line block wrapper.
+- **Bindings**: `v-model`
+- **Props**: `rows`: `number`, `label`, `placeholder`, `errorMessage`, `status`, `maxlength`
+
+#### `PasswordInput`
+Input displaying text masks embedding direct visibility switch icons.
+- **Bindings**: `v-model`
+- **Props**: Matches `TextField` parameters natively.
+
+#### `InputSearch`
+Optimized quick query entry block.
+- **Bindings**: `v-model`
+- **Props**: Automatically encapsulates leading search graphics and immediate clear action support.
+
+#### `PhoneInput`
+Handles auto-formatting country inputs natively.
+- **Bindings**: `v-model`
+- **Props**: `defaultCountry`: `string` (e.g., `'ID'`), `disabled`: `boolean`. Supports keyboard space/enter triggers cleanly on embedded reset controls.
+
+#### `Checkbox`
+Single option boolean toggle.
+- **Bindings**: `v-model` (Boolean or array push tracking)
+- **Props**: `label`: `string`, `disabled`: `boolean`, `indeterminate`: `boolean`
+- **Usage**:
+  ```vue
+  <Checkbox v-model="isChecked" label="Setuju syarat dan ketentuan" />
+  ```
+
+#### `RadioInput`
+Grouped list selector.
+- **Bindings**: `v-model`
+- **Props**:
+  - `options`: `Array<{ label: string; value: string | number; disabled?: boolean }>`
+  - `orientation`: `'horizontal' | 'vertical'`
+  - `label`: `string`
+  - `disabled`: `boolean`
+
+#### `Toggle`
+Switch layout toggle.
+- **Bindings**: `v-model`
+- **Props**: `label`: `string`, `disabled`: `boolean`
+
+#### `OneTimePassword`
+Code sequence field inputs.
+- **Bindings**: `v-model`
+- **Props**: `length`: `number` (Default: `6`), `@complete`: `(val: string) => void`
+
+---
+
+### 3. Selection, Pickers & Uploading
+
+#### `SelectDropdown`
+Robust feature-rich remote loaded list drop menu.
+- **Bindings**: `v-model` (Handles string/number single values or arrays when `multiple` is active).
+- **Props**:
+  - `options`: `Array<{ label: string; value: any; disabled?: boolean }>`
+  - `placeholder`: `string`
+  - `size`: `'sm' | 'md' | 'lg'`
+  - `multiple`: `boolean` (Default: `false`)
+  - `searchable`: `boolean` (Default: `true`)
+  - `hasMore`, `loading`: `boolean`
+  - `mandatorySelected`: `boolean` (Forces at least one choice to remain actively locked)
+- **Events**: `@search="onSearchTerm"`, `@load-more="onPageTrigger"`
+- **Usage**:
+  ```vue
+  <SelectDropdown
+    v-model="selectedData"
+    :options="itemsList"
+    mandatorySelected
+    placeholder="Pilih kategori..."
+  />
+  ```
+
+#### `ActionDropdown` / `BasicDropdown`
+Trigger floating contextual items.
+- **Props**: `items`: `Array<{ label: string; action: () => void; disabled?: boolean }>`
+
+#### `Chip`
+Compact thematic tags supporting navigation indices.
+- **Props**: `label`: `string`, `selected`: `boolean`, `multiple`: `boolean`, `disabled`: `boolean`
+- **Events**: `@click`, `@remove`
+- Supports keyboard roving arrow navigation seamlessly.
+
+#### `MultipleChoiceGrid`
+Option grids map setup wrapper.
+- **Bindings**: `v-model` array
+
+#### `DatePicker`
+Fluid layer selector managing exact standard timelines.
+- **Bindings**: `v-model` (Date object, range array `[start, end]`, or multiple Date arrays).
+- **Props**: `mode`: `'single' | 'range' | 'multiple'`, `minDate`, `maxDate`, `disabled`
+- **Usage**:
+  ```vue
+  <DatePicker v-model="selectedDate" mode="single" placeholder="Pilih tanggal" />
+  ```
+
+#### `MonthPicker` / `YearPicker`
+Targeted timeline drills.
+- **Bindings**: `v-model` (Year/Month numeric tracking).
+
+#### `TimePicker`
+Time tracking entries.
+- **Bindings**: `v-model` (Format string: `'HH:mm'`).
+- Fully wraps internal automated colons injection logic (`:`) during continuous keypad input strokes. Includes keyboard accessibility rules for embedded clear buttons.
+
+#### `FileUpload` / `SingleFileUpload`
+Drag and drop structural media blocks.
+- **Events**: `@update:files="onFiles"` (or `@update:file` for single modes).
+- **Props**: `maxSize`: `number`, `acceptedFormats`: `string`
+
+---
+
+### 4. Navigation, View Structures & Feedback
+
+#### `Accordion` / `AccordionGroup` / `AccordionCard`
+Collapsible block structure views.
+- **Props**: `title`: `string`, `modelValue`: `boolean` (expanded state)
+- Fully accessible via native Keyboard navigation mappings.
+
+#### `Breadcrumb`
+Path tracing trackers.
+- **Props**: `items`: `Array<{ label: string; href?: string }>`
+- **Events**: `@item-click="(item) => handleCustomRoute(item)"` (Supports native SPA framework push handlers directly).
+
+#### `TabHorizontal` / `TabVertical`
+Context view group control tab arrays.
+- **Bindings**: `v-model` (Tracks active target ID).
+- **Props**: `tabs`: `Array<{ id: string; label: string; disabled?: boolean }>`
+
+#### `Pagination`
+Table row paging indicators.
+- **Bindings**: `v-model:currentPage`
+- **Props**: `totalPages`: `number`
+
+#### `Stepper`
+Step progress tracker displays.
+- **Props**: `steps`: `Array`, `activeStep`: `number`
+
+#### `Table` / `FieldInputTable`
+High-performance rendering grids.
+- **Props**: `columns`: `Array`, `data`: `Array`
+- **Slots**: Dynamic column naming mappings supported directly.
+
+#### `Modal`
+Portal wrapper overlays featuring direct dynamic flex scroll limits.
+- **Bindings**: `v-model` (Governs visible state flag).
+- **Props**: `title`: `string`, `size`: `'sm' | 'md' | 'lg' | 'xl' | 'full'`, `hideHeader`: `boolean`
+- **Usage**:
+  ```vue
+  <Modal v-model="showDialog" title="Konfirmasi Tindakan" size="md">
+    <p>Data yang dihapus tidak dapat dipulihkan.</p>
+    <template #footer>
+      <ButtonGroup>
+        <Button variant="secondary" @click="showDialog = false">Batal</Button>
+        <Button variant="danger" @click="commitAction">Hapus</Button>
+      </ButtonGroup>
+    </template>
+  </Modal>
+  ```
+
+#### `Drawer` / `BottomSheet`
+Side and bottom view slider layouts.
+- **Bindings**: `v-model`
+
+#### `Collapse`
+Smooth height expansion wrappers.
+- **Bindings**: `v-model`
+
+#### `Tooltip`
+Floating target context cue elements.
+- **Props**: `content`: `string`, `placement`: Exposes 12 placement targets (`top-start`, `bottom-end`, etc.)
+
+#### `Toast` / `ToastProvider`
+Contextual messaging engines.
+- **Usage**:
+  Register `<ToastProvider>` once at root application layers. Access trigger mechanisms using custom setup framework utilities:
+  ```vue
+  <script setup lang="ts">
+  import { useToast } from '@idds/vue';
+  const { toast } = useToast();
+
+  const trigger = () => toast({ state: 'positive', title: 'Sukses', description: 'Tersimpan' });
+  </script>
+  ```
+
+#### `Alert`
+Static message box wrapper.
+- **Props**: `state`: `'info' | 'positive' | 'warning' | 'destructive'`, `title`: `string`
+
+#### `ThemeToggle`
+Standard dynamic global dark-light toggle button widget.
+
+---
+
+## Global Theme Commands
+IDDS configures reactive root layer CSS context natively based on DOM targets.
+- Implementor scripts can invoke state changes securely:
+  ```typescript
+  import { setThemeMode, getThemeMode, toggleThemeMode } from '@idds/vue';
+  ```
+
+## AI Implementor Guidelines
+1. **Rely on native framework attributes**: Prefer using reactive `errorMessage` binding targets over writing manual floating DOM tags under standard view forms.
+2. **Preserve component scope variant logic**: Let existing tokens handle component interface variants exactly. Do not force inline overriding directives.

package/dist/components/Modal.vue.d.ts

@@ -5,7 +5,7 @@ export interface ModalProps {
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | '';
     variant?: 'default' | 'centered' | 'fullscreen';
     showCloseButton?: boolean;
-    showHeader?: boolean;
+    hideHeader?: boolean;
     showFooter?: boolean;
     closeLabel?: string;
     closeOnBackdrop?: boolean;
@@ -39,9 +39,9 @@ declare const __VLS_component: import('vue').DefineComponent<ModalProps, {}, {},
     variant: "default" | "centered" | "fullscreen";
     size: "sm" | "md" | "lg" | "xl" | "full" | "";
     modelValue: boolean;
-    showHeader: boolean;
     showFooter: boolean;
     showCloseButton: boolean;
+    hideHeader: boolean;
     closeLabel: string;
     closeOnBackdrop: boolean;
     closeOnEscape: boolean;

package/dist/components/Modal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../src/components/Modal.vue"],"names":[],"mappings":"AA2DA;AAsRA,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,EAAE,CAAC;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAsLD,iBAAS,cAAc;WAoIT,OAAO,IAA6B;;uBAbtB,GAAG;yBACD,GAAG;wBACJ,GAAG;;;;;;EAgB/B;AAmBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;aA7VT,SAAS,GAAG,UAAU,GAAG,YAAY;UADxC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,EAAE;gBAHlC,OAAO;gBAMN,OAAO;gBACP,OAAO;qBAFF,OAAO;gBAGZ,MAAM;qBACD,OAAO;mBACT,OAAO;gBACV,OAAO;iBAEN,MAAM;;;OA8VpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../src/components/Modal.vue"],"names":[],"mappings":"AA2DA;AAsRA,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,EAAE,CAAC;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAsLD,iBAAS,cAAc;WAoIT,OAAO,IAA6B;;uBAbtB,GAAG;yBACD,GAAG;wBACJ,GAAG;;;;;;EAgB/B;AAmBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;aA7VT,SAAS,GAAG,UAAU,GAAG,YAAY;UADxC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,EAAE;gBAHlC,OAAO;gBAON,OAAO;qBAFF,OAAO;gBACZ,OAAO;gBAEP,MAAM;qBACD,OAAO;mBACT,OAAO;gBACV,OAAO;iBAEN,MAAM;;;OA8VpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}