@fewangsit/wangsvue-gsts 2.0.0-alpha.3 → 2.0.0-alpha.30

package/mcp/skills/wangsvue-workflow/SKILL.md

@@ -1,91 +1,92 @@
----
-name: 'wangsvue-workflow'
-description: 'Enforces the 5-step mandatory workflow for Wangsvue development, including component discovery protocols. Invoke when starting a new task, feature, or component implementation.'
----
-
-# Wangsvue Mandatory Workflow
-
-This skill guides you through the 5 mandatory steps for any Wangsvue development task. You MUST follow these steps in order.
-
-## The 5-Step Workflow
-
-### Step 1: Standard Synchronization
-
-**Action:** Read relevant MD files before starting.
-
-- **Files to Check:** Vue Code Structure, Project Structure, Code Consistency Guidelines.
-- **Goal:** Ensure you are aligned with the latest architectural standards.
-
-### Step 2: Technical Discovery (MCP First)
-
-**Action:** Use MCP tools to find components and types.
-
-- **Command:** `mcp_wangsvue_mcp_list_all_components()`
-- **Command:** `mcp_wangsvue_mcp_analyze_component(componentId, format: "toon")`
-- **Command:** `mcp_wangsvue_mcp_resolve_type_definition(types: [...])`
-- **Goal:** Get the correct component ID, import paths, and TypeScript contracts.
-- **Rule:** NEVER write import statements without MCP verification.
-
-#### 🔍 Discovery Protocol (Detailed)
-
-**Always ask:** "Does Wangsvue have a specialized component for this?"
-
-**Keyword Search Guide:**
-
-- **Functional Components:**
-
-  - Filter? → Search "filter"
-  - Download? → Search "download" (e.g., `ButtonDownload`)
-  - Bulk actions? → Search "bulk" (e.g., `ButtonBulkAction`)
-  - Search? → Search "search" (e.g., `ButtonSearch`)
-  - Upload? → Search "upload" (e.g., `FileUpload`)
-  - Copy? → Search "copy" (e.g., `ButtonCopy`)
-
-- **Structural Components:**
-  - Card/Container? → Search "card" (for background, padding, border)
-  - Form wrapper? → Search "form"
-  - Modal/Popup? → Search "dialog", "dialogconfirm"
-  - Loading? → Search "loading"
-
-**Mental Shift Required:**
-
-- **❌ OLD:** "I need a container with background" → `<div class="bg-white p-4">`
-- **✅ NEW:** "I need a container" → Search components → Find `Card`
-- **❌ OLD:** "I need a button for download" → `<Button>`
-- **✅ NEW:** "I need download functionality" → Search components → Find `ButtonDownload`
-
-### Step 3: Pattern Extraction (Documentation)
-
-**Action:** Use MCP tools to see real usage patterns.
-
-1.  **Mandatory Discovery:** Call `mcp_wangsvue_docs_get_sections(component)` FIRST to see available section IDs.
-2.  **Extraction:** Call `mcp_wangsvue_docs_get_example(component, section)` using the exact ID found in step 1.
-
-- **Goal:** Understand intended usage, built-in features, and architecture.
-- **Rule:** NEVER guess a section name. NEVER assume an example exists without checking sections.
-- **Rule:** Follow examples EXACTLY. Do not create custom interpretations.
-
-**Questions to Ask:**
-
-- "Does this component handle its own state?" (e.g., `DataTable` handles pagination)
-- "Does it integrate with Router?" (e.g., `TabMenu`)
-- "Does it use a store?" (e.g., `Breadcrumb` uses `useBreadcrumbStore`)
-
-### Step 4: Synthesis (Strict Implementation)
-
-**Action:** Implement the code following strict structure rules.
-
-- **Structure:** Script → Template → Style.
-- **Organization:** Imports → Props/Emits → Lifecycle → Variables → Methods.
-- **Logic:** Business logic in `components/modules/`, NOT in views.
-- **Views:** Lightweight, only import and compose from modules.
-- **Attributes:** Ensure `data-wv-name` and `data-wv-section` are present.
-
-### Step 5: Validation (The "Black Box" Linter Rule)
-
-Launch skill `wangsvue-code-review`.
-
-## Repetition Protocol
-
-Before starting, affirm:
-"I WILL DISCOVER SPECIALIZED COMPONENTS FIRST. I WILL CALL GET_SECTIONS BEFORE GET_EXAMPLE. I WILL NOT GUESS SECTION NAMES OR IMPORTS. I WILL FOLLOW DOCUMENTED PATTERNS EXACTLY. I WILL RUN PNPM LINT."
+---
+name: 'wangsvue-workflow'
+description: 'Enforces the 5-step mandatory workflow for Wangsvue development, including component discovery protocols. Invoke when starting a new task, feature, or component implementation.'
+---
+
+# Wangsvue Mandatory Workflow
+
+This skill guides you through the 5 mandatory steps for any Wangsvue development task. You MUST follow these steps in order.
+
+## The 5-Step Workflow
+
+### Step 1: Standard Synchronization
+
+**Action:** Read relevant MD files before starting.
+
+- **Files to Check:** Vue Code Structure, Project Structure, Code Consistency Guidelines.
+- **Goal:** Ensure you are aligned with the latest architectural standards.
+
+### Step 2: Technical Discovery (MCP First)
+
+**Action:** Use MCP tools to find components and types.
+
+- **Command:** `mcp_wangsvue_mcp_list_all_components()`
+- **Command:** `mcp_wangsvue_mcp_analyze_component(componentId, format: "toon")`
+- **Command:** `mcp_wangsvue_mcp_resolve_type_definition(types: [...])`
+- **Goal:** Get the correct component ID, import paths, and TypeScript contracts.
+- **Rule:** NEVER write import statements without MCP verification.
+
+#### 🔍 Discovery Protocol (Detailed)
+
+**Always ask:** "Does Wangsvue have a specialized component for this?"
+
+**Keyword Search Guide:**
+
+- **Functional Components:**
+
+  - Filter? → Search "filter"
+  - Download? → Search "download" (e.g., `ButtonDownload`)
+  - Bulk actions? → Search "bulk" (e.g., `ButtonBulkAction`)
+  - Search? → Search "search" (e.g., `ButtonSearch`)
+  - Upload? → Search "upload" (e.g., `FileUpload`)
+  - Copy? → Search "copy" (e.g., `ButtonCopy`)
+
+- **Structural Components:**
+  - Card/Container? → Search "card" (for background, padding, border)
+  - Form wrapper? → Search "form"
+  - Modal/Popup? → Search "dialog", "dialogconfirm"
+  - Loading? → Search "loading"
+
+**Mental Shift Required:**
+
+- **❌ OLD:** "I need a container with background" → `<div class="bg-white p-4">`
+- **✅ NEW:** "I need a container" → Search components → Find `Card`
+- **❌ OLD:** "I need a button for download" → `<Button>`
+- **✅ NEW:** "I need download functionality" → Search components → Find `ButtonDownload`
+
+### Step 3: Pattern Extraction (Documentation)
+
+**Action:** Use MCP tools to see real usage patterns.
+
+1.  **Mandatory Discovery:** Call `mcp_wangsvue_docs_get_sections(component)` FIRST to see available section IDs.
+2.  **Extraction:** Call `mcp_wangsvue_docs_get_example(component, section)` using the exact ID found in step 1.
+
+- **Goal:** Understand intended usage, built-in features, and architecture.
+- **Rule:** NEVER guess a section name. NEVER assume an example exists without checking sections.
+- **Rule:** Follow examples EXACTLY. Do not create custom interpretations.
+
+**Questions to Ask:**
+
+- "Does this component handle its own state?" (e.g., `DataTable` handles pagination)
+- "Does it integrate with Router?" (e.g., `TabMenu`)
+- "Does it use a store?" (e.g., `Breadcrumb` uses `useBreadcrumbStore`)
+
+### Step 4: Synthesis (Strict Implementation)
+
+**Action:** Implement the code following strict structure rules.
+
+- **Structure:** Script → Template → Style.
+- **Organization:** Imports → Props/Emits → Lifecycle → Variables → Methods.
+- **Logic:** Business logic in `components/modules/`, NOT in views.
+- **Views:** Lightweight, only import and compose from modules.
+- **Attributes:** Ensure `data-wv-name` and `data-wv-section` are present.
+- **Accessibility:** Interactive elements must have `aria-label`, `aria-labelledby`, or `aria-describedby`.
+
+### Step 5: Validation (The "Black Box" Linter Rule)
+
+Launch skill `wangsvue-code-review`.
+
+## Repetition Protocol
+
+Before starting, affirm:
+"I WILL DISCOVER SPECIALIZED COMPONENTS FIRST. I WILL CALL GET_SECTIONS BEFORE GET_EXAMPLE. I WILL NOT GUESS SECTION NAMES OR IMPORTS. I WILL FOLLOW DOCUMENTED PATTERNS EXACTLY. I WILL RUN PNPM LINT."

package/menu/index.d.ts

@@ -304,6 +304,10 @@ export interface MenuSlots {
      * Binding properties of the menuitem
      */
     props: MenuRouterBindProps;
+    /**
+     * Index of the menuitem
+     */
+    index: number;
   }): VNode[];
   /**
    * Custom item icon template.

package/multiselect/MultiSelect.fm.md

@@ -0,0 +1,34 @@
+# MultiSelect
+type reference: ./index.d.ts
+
+Append a `MultiSelect` component when the figma context contains:
+
+- A figma component or instance named "Multi Select" or similar, consisting of a multi-select input field optionally paired with a label, required asterisk, info icon, and a dropdown arrow icon. When values are selected, they appear as badge chips inside the input area.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the multi-select.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the multi-select (e.g. "Select"). When value(s) are selected, the placeholder is replaced with badge chips. Omit if no placeholder text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the multi-select shows an error state (red border, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the multi-select shows a disabled state (gray background, gray text). Omit if the field is not disabled.

package/overlaypanel/index.d.ts

@@ -129,6 +129,10 @@ export interface OverlayPanelBreakpoints {
  * Defines valid properties in OverlayPanel component.
  */
 export interface OverlayPanelProps {
+  /**
+   * Defines the aria-label attribute for the overlay panel.
+   */
+  ariaLabel?: string;
   /**
    * Enables to hide the overlay when outside is clicked.
    * @defaultValue true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-gsts",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.30",
   "author": "Wangsit FE Developer",
   "description": "Global Settings Tagsamurai VueJS Component Library",
   "type": "module",

package/plugins/WangsVue.d.ts

@@ -15,6 +15,7 @@ import { ButtonSearchLocaleConfig } from '../buttonsearch';
 import { CalendarLocaleConfig, CalendarPresetOptions } from '../calendar';
 import { CustomColumnLocaleConfig } from '../customcolumn';
 import {
+  Data,
   DataTableLocaleConfig,
   DataTableProps,
   TreeTableProps,
@@ -39,6 +40,7 @@ import { MultiSelectLocaleConfig } from '../multiselect';
 import { OverlayPanelPassThroughOptions } from '../overlaypanel';
 import { TagTypeProps } from '../tagtype';
 import { TextareaLocaleConfig } from '../textarea';
+import { ToastLocaleConfig } from '../toast';
 import { TreeProps } from '../tree';
 import {
   UserNameComponentConfigs,
@@ -58,7 +60,7 @@ export interface ComponentDefaultPropsConfig {
   Image?: ImageProps;
   ButtonBulkAction?: Omit<ButtonBulkActionProps, 'selectedData' | 'options'>;
   Animation?: AnimationDefaultConfig;
-  DataTable?: Partial<DataTableProps | TreeTableProps>;
+  DataTable?: Partial<DataTableProps<Data> | TreeTableProps<Data>>;
   Badge?: Partial<BadgeComponentConfigs>;
   UserName?: UserNameComponentConfigs;
   Dropdown?: DropdownProps;
@@ -87,6 +89,7 @@ interface ComponentLocaleConfig {
   DataTable?: DataTableLocaleConfig;
   ImageCompressor?: ImageCompressorLocaleConfig;
   ButtonDownload?: ButtonDownloadLocaleConfig;
+  Toast?: ToastLocaleConfig;
 }
 export interface LocaleConfig {
   global: Partial<typeof DEFAULT_GLOBAL_LOCALE_CONFIG>;