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

package/assets/scanner.worker-DQsz7oT_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scanner.worker-DQsz7oT_.js","sources":["../../../library/components/buttonscan/workers/scanner.worker.ts"],"sourcesContent":["interface ConnectionOption {\r\n  onopen: (ws: WebSocket, connectionState: ConnectionState) => void;\r\n  onmessage: (event: MessageEvent) => void;\r\n  onerror: (error: Event) => void;\r\n  timeout?: number;\r\n}\r\n\r\ninterface WorkerMessage {\r\n  command: string;\r\n  sessionId: string;\r\n  scanCommand?: string;\r\n  userId?: string;\r\n  companyCode?: string;\r\n  serialNumber?: string;\r\n  jenisDevice?: string;\r\n}\r\n\r\ntype ConnectionState = 'established' | 'reused';\r\n\r\nlet socket: WebSocket | null = null;\r\nlet timeoutId: NodeJS.Timeout | null = null; // Stores timeout ID for idle socket connection\r\nlet currentUserId: string | undefined;\r\nlet currentCompanyCode: string | undefined;\r\nlet sessionId: string = ''; // The unique session ID for the current connection\r\n\r\nself.onmessage = (event): void => {\r\n  const message: WorkerMessage = event.data;\r\n  currentCompanyCode = message.companyCode;\r\n\r\n  switch (message.command) {\r\n    case 'sync':\r\n      sync(message);\r\n      break;\r\n    case 'connect':\r\n      connect(message);\r\n      break;\r\n    case 'scan':\r\n      scan(message);\r\n      break;\r\n    case 'stopscan':\r\n      stopScan(message);\r\n      break;\r\n    default:\r\n      break;\r\n  }\r\n};\r\n\r\n/**\r\n * Opens a WebSocket connection if not already open.\r\n * If the connection is open, the `onopen` callback is immediately called.\r\n * @returns {WebSocket} The WebSocket instance.\r\n */\r\nconst openConnection = (opt: ConnectionOption): void => {\r\n  let connectionState: ConnectionState = 'established';\r\n  if (socket && socket.readyState === WebSocket.OPEN) {\r\n    // If the socket is already open, immediately call the onopen callback\r\n    connectionState = 'reused';\r\n    opt.onopen(socket, connectionState);\r\n    resetTimeOut(opt.timeout);\r\n  } else {\r\n    // If the socket is not open or undefined, create a new connection\r\n    socket = new WebSocket(`${import.meta.env.VITE_APP_READER_API}`);\r\n  }\r\n\r\n  // Handle successful connection\r\n  socket.onopen = (): void => {\r\n    sessionId =\r\n      Math.random().toString(36).substring(2, 15) +\r\n      Math.random().toString(36).substring(2, 15); // Generate a random session ID\r\n\r\n    connectionState = 'established';\r\n\r\n    if (socket) opt.onopen(socket, connectionState); // Execute the onopen callback once the connection is established\r\n    resetTimeOut(opt.timeout);\r\n  };\r\n\r\n  socket.onmessage = (event): void => {\r\n    opt.onmessage(event);\r\n    resetTimeOut(opt.timeout);\r\n  };\r\n\r\n  socket.onerror = (error): void => {\r\n    console.error('🚀 ~ Scanner Worker: openConnection ~ error:', error);\r\n    opt.onerror(error);\r\n    socket?.close();\r\n    socket = null;\r\n    if (timeoutId) clearTimeout(timeoutId);\r\n  };\r\n};\r\n\r\nconst handleSocketTimeout = (): void => {\r\n  stopScan({ userId: currentUserId });\r\n  currentUserId = undefined;\r\n  if (socket) socket.close();\r\n  socket = null;\r\n  if (timeoutId) clearTimeout(timeoutId);\r\n  console.info('Socket connection has been closed!');\r\n};\r\n\r\nconst resetTimeOut = (timeout = 0): void => {\r\n  if (timeout) {\r\n    // Adding this conditional to disable timout, may be sometimes it need to be enable, simpli remove the condition\r\n    if (timeoutId) clearTimeout(timeoutId);\r\n    timeoutId = setTimeout(handleSocketTimeout, timeout); // Timed out after 3 Minutes\r\n  }\r\n};\r\n\r\nconst sync = ({ userId }: WorkerMessage): void => {\r\n  currentUserId = userId;\r\n\r\n  openConnection({\r\n    onopen: (ws: WebSocket): void => {\r\n      ws.send(\r\n        JSON.stringify({\r\n          data: {\r\n            command: 'connect',\r\n            userId,\r\n            sessionId,\r\n            companyCode: currentCompanyCode,\r\n            source: 'app',\r\n          },\r\n          event: 'reader',\r\n        }),\r\n      );\r\n    },\r\n\r\n    onmessage: (event): void => {\r\n      postMessage({ status: 'synced', ...JSON.parse(event.data) });\r\n    },\r\n\r\n    onerror: (error): void => {\r\n      postMessage({ status: 'sync_error', error });\r\n    },\r\n  });\r\n};\r\n\r\nconst connect = ({ userId }: WorkerMessage): void => {\r\n  currentUserId = userId;\r\n\r\n  openConnection({\r\n    onopen: (ws: WebSocket, state): void => {\r\n      if (state === 'established') {\r\n        ws.send(\r\n          JSON.stringify({\r\n            data: {\r\n              command: 'connect',\r\n              userId,\r\n              source: 'app',\r\n              sessionId,\r\n              companyCode: currentCompanyCode,\r\n            },\r\n            event: 'reader',\r\n          }),\r\n        );\r\n      } else {\r\n        postMessage({\r\n          status: 'connection_reused',\r\n        });\r\n      }\r\n    },\r\n\r\n    onmessage: (event): void => {\r\n      postMessage({\r\n        status: 'connection_established',\r\n        ...JSON.parse(event.data),\r\n      });\r\n    },\r\n\r\n    onerror: (error): void => {\r\n      postMessage({ status: 'error_connecting', error });\r\n    },\r\n  });\r\n};\r\n\r\nconst scan = ({\r\n  scanCommand,\r\n  userId,\r\n  serialNumber,\r\n  jenisDevice,\r\n}: WorkerMessage): void => {\r\n  currentUserId = userId;\r\n\r\n  openConnection({\r\n    onopen: (ws: WebSocket): void => {\r\n      ws.send(\r\n        JSON.stringify({\r\n          data: {\r\n            command: scanCommand,\r\n            userId,\r\n            sessionId,\r\n            companyCode: currentCompanyCode,\r\n            source: 'app',\r\n            serialNumber,\r\n            jenisDevice,\r\n          },\r\n          event: 'reader',\r\n        }),\r\n      );\r\n\r\n      postMessage({ status: 'scan_started' });\r\n    },\r\n\r\n    onmessage: (event): void => {\r\n      postMessage({ status: 'scanned', ...JSON.parse(event.data) });\r\n    },\r\n\r\n    onerror: (error): void => {\r\n      postMessage({ status: 'scan_error', error });\r\n    },\r\n  });\r\n};\r\n\r\n/**\r\n * Single Scan:\r\n * - Stop Scan will be invoked on socket timeout\r\n *\r\n * Bulk Scan:\r\n * - Stop Scan will also be invoked on stopScan by user interaction\r\n */\r\nconst stopScan = ({ userId }: Partial<WorkerMessage>): void => {\r\n  if (socket && socket.readyState === WebSocket.OPEN) {\r\n    socket.send(\r\n      JSON.stringify({\r\n        data: {\r\n          command: 'stopscan',\r\n          userId,\r\n          source: 'app',\r\n          sessionId,\r\n          companyCode: currentCompanyCode,\r\n        },\r\n        event: 'reader',\r\n      }),\r\n    );\r\n\r\n    postMessage({ status: 'scan_stopped' });\r\n    console.info('Scan Process Stopped!');\r\n  }\r\n};\r\n"],"names":["socket","timeoutId","currentUserId","currentCompanyCode","sessionId","event","message","sync","connect","scan","stopScan","openConnection","opt","connectionState","resetTimeOut","error","handleSocketTimeout","timeout","userId","ws","state","scanCommand","serialNumber","jenisDevice"],"mappings":"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"}

package/badge/Badge.fm.md

@@ -0,0 +1,32 @@
+# Badge
+type reference: ./index.d.ts
+
+Append a `Badge` component when the figma context contains:
+
+- A figma component or instance named "Badge" or similar, consisting of a small rounded pill with centered text (9px SemiBold) and an optional close/remove icon.
+- The Figma `BadgeProps` uses `color` ("Primary" | "Primary Supply" | "Success" | "Warning" | "Dark") and `propDelete` (boolean) to define appearance.
+- IGNORE badges that appear inside an `InputBadge` component (those are child badges, not standalone).
+
+## 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 content of the badge. Derived from the text node inside the badge pill element.
+
+- `severity` (string | undefined)
+  The severity of the badge, inferred from the Figma `color` property:
+  - `'primary'` if `color` is "Primary" (blue, `--badge/primary`). Used for labels like "group", "nama".
+  - `'success'` if `color` is "Success" (green). Used for status like "verified".
+  - `'warning'` if `color` is "Warning" (yellow). Used for status like "unverified".
+  - `'dark'` if `color` is "Dark" (dark). Used for labels like "brand", "model type", "disposed".
+  - Omit if the color does not match any known mapping.
+
+- `removable` (boolean | undefined)
+  Whether a close/remove icon button is present inside the badge. Maps to the Figma `propDelete` property. If `propDelete` is true or a close icon exists, set to `true`. Omit if absent.

package/basetree/index.d.ts

@@ -90,6 +90,15 @@ export interface TreeNode {
    * Icon to use in collapsed state.
    */
   collapsedIcon?: string;
+  /**
+   * Available quota for fixed assets in this group.
+   */
+  fixedAssetQuota?: { available: number };
+  /**
+   * Number of assets currently on transfer, subtracted from available quota.
+   */
+  assetOnTransferCount?: number;
+  level?: number;
   /**
    * Optional
    */
@@ -453,6 +462,28 @@ export interface BaseTreeProps {
    * @return true to disabled
    */
   nodeSelectedWhen?: (node: TreeNode) => boolean;
+
+  /**
+   * When true, shows available quota count below each group node label.
+   * Set programmatically by DialogSelectTree when validateQuota is provided.
+   *
+   * @default false
+   */
+  showAvailableQuota?: boolean;
+
+  /**
+   * When set, nodes whose manager[transactionType] is false will be rendered
+   * in a disabled state (data-exact-node-disabled).
+   */
+  requiredManagerPermission?: string;
+
+  /**
+   * When true, only top-level nodes (level <= 1) are selectable.
+   * Sub-children (level >= 2) are rendered disabled.
+   *
+   * @default false
+   */
+  disableSubChildren?: boolean;
 }
 
 /**

package/breadcrumb/Breadcrumb.fm.md

@@ -0,0 +1,23 @@
+# Breadcrumb
+type reference: ./index.d.ts
+
+Append a `Breadcrumb` component when the figma context contains:
+
+- A figma instance named "Breadcrumb" or similar, unique to a single page.
+
+## 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
+
+- `menus` (BreadcrumbMenu[])
+  Get each menu item and set them as follows:
+  - `name` (string)
+    The label of this item.
+  - `route` (string)
+    Must be empty.

package/button/Button.fm.md

@@ -0,0 +1,53 @@
+# Button
+type reference: ./index.d.ts
+
+Append a `Button` component when the figma context contains:
+
+- A button named "Button" or similar.
+- The Figma `ButtonProps` uses `type` ("Default" | "Text" | "Outline" | "Icon Default" | "Icon Outline") and `color` ("Primary" | "Success" | "Warning" | "Danger" | "Dark" | "Secondary") to define appearance.
+- IGNORE any already extended button component like "Button Search", "Button Download", etc.
+- IGNORE any action button that is already present in Dialog (such as "Save", "Cancel", "Submit", etc.)
+- IGNORE any action button that is already present in Filter Container (such as "Apply", "Clear Field")
+
+## 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 | undefined)
+  The text of the button. Derived from the `text` property in Figma. For icon-only buttons (type "Icon Default" or "Icon Outline"), omit this field.
+
+- `icon` (WangsIcons | undefined)
+  The icon of the button. Derived from the `data-name` attribute of an icon/image node inside the button (e.g. `checkbox-blank-circle-line`, `close-line`, `search-2-line`). If no icon is present, omit this field.
+
+- `iconPos` (string | undefined)
+  The icon position. Inferred from the Figma `leftIcon`/`rightIcon` boolean flags:
+  - `'left'` if only `leftIcon` is true.
+  - `'right'` if only `rightIcon` is true.
+  - Omit if no icon is present, or if `leftIcon` and `rightIcon` are both false.
+
+- `severity` (string)
+  The severity of the button, inferred from the Figma `color` property:
+  - `'primary'` if `color` is "Primary" (blue, `--button/primary`).
+  - `'success'` if `color` is "Success" (green, `--button/success`).
+  - `'warning'` if `color` is "Warning" (yellow, `--button/warning`).
+  - `'danger'` if `color` is "Danger" (red, `--button/danger`).
+  - `'secondary'` if `color` is "Secondary" (gray, `--button/disable`).
+  - Omit or use `'contrast'` if `color` is "Dark" (`--button/dark`).
+
+- `text` (boolean | undefined)
+  Whether the button has no background (text-only style). Set to `true` when Figma `type` is "Text". Omit when `type` is "Default" or "Outline".
+
+- `outlined` (boolean | undefined)
+  Whether the button has a border but no fill. Set to `true` when Figma `type` is "Outline". Omit when `type` is "Default" or "Text".
+
+- `size` ('small' | 'large' | undefined)
+  Inferred from the button frame dimensions:
+  - `'small'` if the button height is notably smaller (e.g. < 26px).
+  - `'large'` if the button height is notably larger (e.g. > 26px).
+  - Omit for default 26px height.

package/buttonbulkaction/ButtonBulkAction-MenuItem.fm.md

@@ -0,0 +1,18 @@
+# MenuItem
+type reference: ./index.d.ts
+
+Append each multi action option to the `options` array inside the parent `ButtonBulkAction` props when the figma context contains:
+
+- For each distinct multi action option detected from the "Bulk Action" or similar layer(s) adjacent to `BulkAction`.
+
+## Metadata Shape (Properties)
+
+### Properties definitions
+
+`label` (string)
+  The text label rendered on the item.
+
+`icon` (string)
+  Get the icon label rendered on the item, and search for the most similar type string from the WangsIcons type, and set it as kebab-case (just like how it is in the type).
+
+  WangsIcons reference: ../icon/Icon.vue.d.ts

package/buttonbulkaction/ButtonBulkAction.fm.md

@@ -0,0 +1,25 @@
+# ButtonBulkAction
+type reference: ./index.d.ts
+
+Append a `ButtonBulkAction` component when the figma context contains:
+
+- A button named "ButtonBulkAction" or similar, adjacent to a `DataTable`.
+
+## 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
+
+- `options` (MenuItem[])
+  Refer to ./ButtonBulkAction-MenuItem.fm.md
+
+- `tableName` (string)
+  Must be exactly the same table name with the adjacent `DataTable` component.
+
+- `naming` (string)
+  The text that contains "x Data(s) Selected", or similar. In this case, "Data" is the naming.

package/buttondownload/ButtonDownload.fm.md

@@ -0,0 +1,22 @@
+# ButtonDownload
+type reference: ./index.d.ts
+
+Append a `ButtonDownload` component when the figma context contains:
+
+- A button named "Button Download" or similar, adjacent to a `DataTable`.
+
+## 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
+
+- `tableName` (string)
+  Must be exactly the same table name with the adjacent `DataTable` component.
+
+- `fileName` (string)
+  Must be empty.

package/buttonfilter/ButtonFilter.fm.md

@@ -0,0 +1,19 @@
+# ButtonFilter
+type reference: ./ButtonFilter.vue.d.ts
+
+Append a `ButtonFilter` component when the figma context contains:
+
+- A button named "Button Filter" or similar, adjacent to a `DataTable`.
+
+## 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
+
+- `tableName` (string)
+  Must be exactly the same table name with the adjacent `DataTable` component.

package/buttonscan/index.d.ts

@@ -34,6 +34,12 @@ export type Device = {
   name: string;
 };
 
+export type BaseRegisteredDevice = {
+  _id: string;
+  serialNumber: string;
+  name: string;
+};
+
 export type RegisteredDevice = {
   _id: string;
   imageSmall: string;

package/buttonsearch/ButtonSearch.fm.md

@@ -0,0 +1,19 @@
+# ButtonSearch
+type reference: ./index.d.ts
+
+Append a `ButtonSearch` component when the figma context contains:
+
+- A button named "Button Search" or similar, adjacent to a `DataTable`.
+
+## 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
+
+- `tableName` (string)
+  Must be exactly the same table name with the adjacent `DataTable` component.

package/buttonsearchbyscan/ButtonSearchByScan.fm.md

@@ -0,0 +1,25 @@
+# ButtonSearchByScan
+type reference: ./index.d.ts
+
+Append a `ButtonSearchByScan` component when the figma context contains:
+
+- A button named "Button Search by Scan" or similar, with a `qr-scan-line` icon and label "Search by Scan", adjacent to a `DataTable`.
+
+## 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 button (e.g. "Search by Scan"), if it already is "Search by Scan", omit it.
+
+- `icon` (WangsVueIcons | undefined)
+  The icon of the button, typically `qr-scan-line`. If no icon is present, omit this field.
+
+- `tableName` (string)
+  Must be exactly the same table name as the adjacent `DataTable` component.

package/buttonselecttree/ButtonSelectTree.fm.md

@@ -0,0 +1,40 @@
+# ButtonSelectTree
+type reference: ./index.d.ts
+
+Append a `ButtonSelectTree` component when the figma context contains:
+
+- A figma component or instance named "Button Select Tree" or similar, consisting of a button trigger that opens a tree selection dialog, optionally paired with a label, required asterisk, and info icon. When values are selected, the button text updates to show the selection count (e.g. "3 group(s) selected").
+
+## 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
+
+- `fieldLabel` (string)
+  The text of the label displayed above the button.
+
+- `label` (string | undefined)
+  The text of the button (e.g. "Select"). When values are selected, the button text is replaced with the selection count (e.g. "3 group(s) selected"). Omit if the button shows the default label.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the component shows an error state (red caption text below the button). Omit if not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the button shows a disabled state (gray background). Omit if not disabled.
+
+- `selectionMode` ('single' | 'checkbox')
+  Infer from the button type:
+  - `"Default"` type (standard button with text like "Select" or "3 group(s) selected") → `'checkbox'`
+  - `"Single Selected"` type (badge with edit and close icons) → `'single'`
+  - `"Icon"` type (small icon-only button with `checkbox-blank-circle-line`) → `'checkbox'`

package/buttonselecttree/index.d.ts

@@ -2,6 +2,7 @@ import { ShallowRef, Slot } from 'vue';
 
 import { TreeNode } from '../basetree';
 import { QueryParams, ShortFetchListResponse } from '../datatable';
+import { TransactionType } from '../tree';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
 
 export type KeysModelValue = string[] | number[] | undefined;
@@ -172,6 +173,23 @@ export interface ButtonSelectTreeProps {
    * @default false
    */
   fetchTreeOnButtonRender?: boolean;
+  /**
+   * Disable level 2 and deeper nodes (All > Level 1 > Level 2).
+   * Only top-level nodes remain selectable.
+   *
+   * @default false
+   */
+  disableSubChildren?: boolean;
+  /**
+   * Specifies the required manager transaction permission to make a node selectable.
+   * If the node's `manager[transaction]` value is false, the node will be rendered in a disabled state.
+   */
+  requiredManagerPermission?: TransactionType;
+  /**
+   * When provided, enables quota validation on select.
+   * Also shows available quota count below each group node label automatically.
+   */
+  validateQuota?: { assetQuantity: number };
 }
 
 export type ButtonSelectTreeEmits = {

package/calendar/Calendar.fm.md

@@ -0,0 +1,34 @@
+# Calendar
+type reference: ./index.d.ts
+
+Append a `Calendar` component when the figma context contains:
+
+- A figma component or instance named "Calendar" or similar, consisting of a date input field optionally paired with a label, required asterisk, info icon, and a calendar icon.
+
+## 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 date input.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the date input (e.g. "Select date"). When a date is selected, the placeholder is replaced with the formatted date (e.g. "22/03/2022"). 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 date input shows an error state (red border, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the date input shows a disabled state (gray background, gray text). Omit if the field is not disabled.

package/calendar/index.d.ts

@@ -520,6 +520,47 @@ export interface CalendarProps {
    * @requires selectionMode = 'range'
    */
   exactSelection?: boolean;
+
+  /**
+   * In range selection mode, if the same date is chosen twice,
+   * set whether it should be shown as separate dates ("date 1" - "date 1") or not ("date 1").
+   * @default true
+   */
+  separateSameDate?: boolean;
+
+  /**
+   * Validate value while the overlay is shown. This function is run on clicking the overlay's Apply button.
+   *
+   * @returns {boolean} - Return true if the value is valid.
+   */
+  overlayValidatorFunction?: (
+    value?: number | number[],
+  ) => Promise<boolean> | boolean;
+
+  /**
+   * Set the custom validator message to show on the overlay.
+   * Used alongside overlayValidatorFunction.
+   */
+  overlayValidatorMessage?: string;
+
+  /**
+   * Condition to show the date picker message.
+   *
+   * @returns {string | undefined} - Return the message to show, or undefined if no message should be shown.
+   */
+  datePickerMessageFunction?: (value?: number | number[]) => string | undefined;
+
+  /**
+   * Set a message to be shown below the date picker.
+   */
+  datePickerMessage?: string;
+
+  /**
+   * Condition to show the overlay validator message inside the overlay.
+   *
+   * @default false
+   */
+  showOverlayValidatorMessage?: boolean;
 }
 
 /**

package/changelogpage/index.d.ts

@@ -1,4 +1,4 @@
-import { ChangelogFilterQuery } from '@tagsamurai/acts-api-services/src/dto/changelog.dto';
+import { ChangelogFilterQuery } from '@tagsamurai/gsts-api-services/src/dto/changelog.dto';
 
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
 

package/components.fm.md

@@ -0,0 +1,56 @@
+# Supported Components
+
+This document lists every wangsvue component the parser can emit. When the design context contains a UI element matching one of the entries below, produce the corresponding metadata block. If a node does NOT match any entry in this list, SKIP it silently — do NOT emit unrecognised components.
+
+## Scope
+
+- When the design context contains **multiple page-level frames** (e.g. "fixed-asset/assets", "fixed-asset/borrow", "fixed-asset/missing/active"), process **ALL of them**. Each frame that contains a recognised component yields its own entry in the output.
+- Nodes that clearly map to **Card, Sidebar, or Navbar** are **skipped** (do not emit metadata for them), but their **child nodes are still processed** — a `DataTable` nested inside a Card frame is still emitted.
+
+## Component list
+Each of this component contains {component}.fm.md in their respective directory that will guide you how to parse them.
+
+Inside these *.fm.md file, they will give definition type reference for each component. ONLY parse component properties that is strictly defined inside the *.fm.md file, DON'T parse component properties that is listed in the *.d.ts, only use it for a type reference.
+
+1. DataTable
+2. ButtonSearch
+3. ButtonFilter
+4. ButtonDownload
+5. FilterContainer
+6. Breadcrumb
+7. DialogForm
+8. InputText
+9. InputNumber
+10. TextArea
+11. Dropdown
+12. MultiSelect
+13. Calendar
+14. InputPhoneNumber
+15. InputBadge
+16. InputRangeNumber
+17. FileUpload
+18. ButtonSelectTree
+19. ImageCompressor
+20. InputPassword
+21. ButtonSearchByScan
+22. DialogSelectTree
+23. Button
+24. Badge
+
+## How to identify a component from Figma nodes
+
+- Use the node `name`, `type`, and child structure from the design context to decide which wangsvue component it represents.
+- If a node clearly maps to Card, Sidebar, or Navbar -> SKIP the node itself but **continue processing its children** (do not discard content nested inside it).
+- If none of the heuristics match -> SKIP the node entirely. Do NOT invent new component types.
+
+## Multi-step context fetching
+
+1. **Page structure** — Call `figma_get_design_context` on each page-level frame (e.g. `fixed-asset/borrow`). The returned code reveals the table structure, column header text, and whether a sort icon or ellipsis action column is present.
+2. **Column visibility** — For each table, locate its associated `Column Visibility` frame (positioned near the filter area in the canvas, typically at `x~1197.5` with a y near the page's filter container). Call `figma_get_design_context` on that frame to determine `fixed` and `checkedByDefault` per column. Refer to @docs/figma-parser/datatable-tablecolumn.md#determining-fixed-and-checkedbydefault-from-column-visibility-panels.
+3. **Table Toolbars (ButtonSearch)** — The top-level design context may expose a `Table Toolbars` instance as a collapsed component with no visible children. To determine whether a `Button Search` exists, fetch `figma_get_design_context` on that instance directly. The expanded code will reveal child elements with `data-name="Button Search"` containing a `search-2-line` icon. If present, emit a `ButtonSearch` component linked to the adjacent DataTable's `tableName`.
+
+## Output specification
+
+The parser MUST return a single JSON object. Refer to the typescript specification at ./wangsvue-metadata.ts
+
+Use that file as the authoritative type reference when implementing the parser output.

package/customcolumn/index.d.ts

@@ -1,20 +1,20 @@
-import { TableColumn } from '../datatable';
+import { Data, TableColumn } from '../datatable';
 import { ClassComponent } from '../ts-helpers.d';
 
 export interface CustomColumnLocaleConfig {
   resetDefaultText: string;
 }
 
-export type DragableColumn = TableColumn & {
+export type DragableColumn = TableColumn<Data> & {
   order?: number;
   parentHeaderField?: string;
-  siblingHeaders?: TableColumn[];
+  siblingHeaders?: TableColumn<Data>[];
 };
 
 export interface CustomColumnProps {
   tableId: string;
-  defaultColumns: TableColumn[];
-  visibleColumns: TableColumn[];
+  defaultColumns: TableColumn<Data>[];
+  visibleColumns: TableColumn<Data>[];
   /**
    * The maximum column count allowed
    * @default infinity

package/datatable/DataTable-MenuItem.fm.md

@@ -0,0 +1,22 @@
+# MenuItem
+type reference: ./index.d.ts
+
+Append each single action option to the `options` array inside the parent `DataTable` props when the figma context contains:
+
+- For each distinct single action option detected from the "Single Action" or similar layer(s) adjacent to `DataTable`.
+- IGNORE any option that is "No Option Available" or similar.
+
+## Metadata Shape (Properties)
+
+### Properties definitions
+
+`label` (string)
+  The text label rendered on the item.
+
+`icon` (string)
+  Get the icon label rendered on the item, and search for the most similar type string from the WangsIcons type, and set it as kebab-case (just like how it is in the type).
+
+  WangsIcons reference: ../icon/Icon.vue.d.ts
+
+`command` ((event: MenuItemCommandEvent) => void)
+  The action that this menu item triggers when clicked. Must always be set to a no-op function: `() => {}`. But if you can use it for showing dialog, you may set it accordingly.

package/datatable/DataTable-TableColumn.fm.md

@@ -0,0 +1,52 @@
+# TableColumn
+type reference: ./index.d.ts
+
+Append each column to the `columns` array inside the parent `DataTable` props when the figma context contains:
+
+- For each distinct column detected in the `DataTable` header.
+
+## Metadata Shape (Properties)
+
+### Properties definitions
+
+`header` (string)
+  The column header text (TH).
+
+`field` (string)
+  The column header text, but converted into snake_case.
+
+`sortable` (boolean)
+  True if the column header have the sort icon, false if not. Image column is always false.
+
+`visible` (boolean)
+  Must be true.
+
+`reorderable` (boolean)
+  Must be true.
+
+`dragable` (boolean)
+  Must be true.
+
+`fixed` (boolean)
+  True if the checkbox for the column visibility of this column is disabled, false if not.
+
+`checkedByDefault` (boolean)
+  True if the checkbox for the column visibility of this column is checked, false if not.
+
+## GUIDANCE for parsing from Figma
+
+- Exclude the first column if it contains checkbox. And exclude the last column if it contains ellipsis.
+- Each column in the Figma table frame maps to ONE TableColumn entry.
+
+### Determining `fixed` and `checkedByDefault` from Column Visibility panels
+
+Locate the `Column Visibility` frame near the table's filter area (typically positioned at `x=1197.5`, y-aligned with the filter container). Call `figma_get_design_context` on that frame to get its expanded code output. Inside it, inspect each `Column-visibility` child:
+
+- The `Column-visibility` instance contains a label `<p>` whose text matches the column header — use this to pair visibility state to the correct column.
+- A "Setup Column" entry exists at the top; skip it.
+- **`fixed`**: determined by the checkbox `<div>` background color token:
+  - `bg: option-disable-bg (#b5b3c7)` → greyed out, toggle is disabled → `fixed: true`
+  - `bg: button/primary (#0063f7)` → blue, toggle is interactive → `fixed: false`
+- **`checkedByDefault`**: if the `check-line` icon (`<img>` with `data-name="check-line"`) is present inside the checkbox, the column is checked → `checkedByDefault: true`. If absent, the column is unchecked → `checkedByDefault: false`.
+
+If the `Column Visibility` frame cannot be fetched (node invalid or not exported), fall back to false.