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

package/datatable/DataTable.fm.md

@@ -0,0 +1,40 @@
+# DataTable
+type reference: ./index.d.ts
+
+Append a `DataTable` component when the figma context contains:
+
+- A table named "Table Wrapper" or similar, inside the main frame.
+
+## 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)
+  Unique identifier for this table. Format: `{module}-{scope}-table` (e.g. borrow-available-list-table).
+  - {module} is inferred from the Figma file name. Normalize to lowercase, strip special characters, use the primary domain keyword (e.g. for a file named "-v2--Borrow" the module is `borrow`).
+  - {scope} is inferred from what the table represents within that module (e.g. available-list, prelist, active-list, history-list).
+
+- `useOption` (boolean)
+  True if the rightmost column of the table row (NOT row header) contains an ellipsis icon (triple-dot or vertical-dot) indicating row actions / a context menu. False if there is no such column.
+
+- `options` (MenuItem[])
+  Refer to ./DataTable-MenuItem.fm.md
+
+- `columns` (TableColumn[])
+  Refer to ./DataTable-TableColumn.fm.md
+
+- `usePaginator` (boolean)
+  True if there are Pagination adjacent to the DataTable, false if not.
+
+- `lazy` (boolean)
+  True if `usePaginator` is true, otherwise false.
+
+`selectionType` ('none', 'checkbox')
+  - none if no checkbox element/component on the leftmost column of the table.
+  - checkbox if checkbox element/component on the leftmost column of the table.

package/datatable/index.d.ts

@@ -165,6 +165,7 @@ export interface DataTableFilterMeta {
 }
 
 export type FetchListResponse<T extends Data = Data> = {
+  status: number;
   message: string;
   data: {
     data: T[];
@@ -437,7 +438,7 @@ export interface TableColumn<T extends Data> {
    */
   preset?: ColumnPreset<T>;
   /**
-   * Whether the column is checked by default, only for Custom Report Table
+   * Whether the column is checked by default
    * @default true
    */
   checkedByDefault?: boolean;
@@ -722,7 +723,7 @@ export interface DataTableBaseProps<T extends Data = Data> {
 
   /**
    * The number of rows to display per page.
-   * @defaultValue 5
+   * @defaultValue 10
    */
   rows?: number;
 
@@ -779,6 +780,13 @@ export interface DataTableBaseProps<T extends Data = Data> {
    * Total disabled rows in table (used for synchronizing with bulk action button)
    */
   totalDisabledRows?: number;
+  /**
+   * Disable all checkboxes in the table (header + body).
+   * When true, no rows can be selected.
+   *
+   * @defaultValue false
+   */
+  disableAllCheckboxes?: boolean;
 }
 
 export interface DataTableProps<T extends Data> extends DataTableBaseProps<T> {

package/dialog/index.d.ts

@@ -170,6 +170,11 @@ export interface DialogProps {
    * Title content of the dialog.
    */
   header?: string | undefined;
+  /**
+   * Unique id for the dialog header element, used for aria-labelledby association.
+   * If not provided, a unique id will be auto-generated.
+   */
+  headerId?: string;
   /**
    * Footer content of the dialog.
    */

package/dialogconfirm/DialogConfirm.fm.md

@@ -0,0 +1,29 @@
+# DialogConfirm
+type reference: ./index.d.ts
+
+Append a `DialogConfirm` component when the figma context contains:
+
+- A figma component or instance named "Dialog Confirm" or similar.
+
+## 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
+
+- `header` (string)
+  The header of the dialog.
+
+- `severity` (string)
+  - success if the color style / theme of the dialog is green, it tend to be a positive.
+  - danger if the color style / theme of the dialog is red, it tend to be a negative.
+
+- `actionable` (boolean)
+  Whether the dialog is actionable, if there are buttons like "Save" or "Cancel", then its true. Otherwise false.
+
+- `confirmLabel` (string)
+  The text of the "Confirmation" button, most commonly the rightmost one.

package/dialogconfirm/index.d.ts

@@ -40,6 +40,7 @@ export interface DialogConfirmProps {
    */
   confirmButtonSeverity?:
     | ConfirmDialogSeverity
+    | 'secondary'
     | 'fixed-primary'
     | 'supply-primary';
   /**

package/dialogform/DialogForm.fm.md

@@ -0,0 +1,57 @@
+# DialogForm
+type reference: ./index.d.ts
+
+Append a `DialogForm` component when the figma context contains:
+
+- A figma component or instance named "Dialog Form" or similar, consisting of a header (title + close button), a content slot area, and a footer with buttons.
+
+## 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
+
+- `header` (string)
+  The text inside the dialog title.
+
+- `closable` (boolean)
+  Whether a close (X) icon button is present in the header. Omit if absent.
+
+- `showStayCheckbox` (boolean)
+  Whether a "Stay on this form after submitting" checkbox exists in the footer.
+
+- `stayCheckboxLabel` (string | undefined)
+  The text label of the stay checkbox. Omit if `showStayCheckbox` is false.
+
+- `buttonsTemplate` ('clear' | 'submit' | 'cancel')[]
+  - Include `'clear'` if a "Clear Field" or similar text button is present.
+  - Include `'submit'` if a primary action button (e.g. "Submit", "Save") is present.
+  - Include `'cancel'` if a cancel/secondary dismiss button is present.
+  This is REQUIRED.
+
+- `submitBtnLabel` (string | undefined)
+  The text of the submit button. Omit if `buttonsTemplate` does not contain `'submit'`.
+
+- `clearBtnLabel` (string | undefined)
+  The text of the clear field button. Omit if `buttonsTemplate` does not contain `'clear'`.
+
+- `severity` ('success' | 'danger' | 'primary' | undefined)
+  - `'success'` if the submit button or dialog theme is green.
+  - `'danger'` if the submit button or dialog theme is red.
+  - `'primary'` if the submit button or dialog theme is blue.
+  - Omit if ambiguous or no submit button is present.
+
+- `width` ('small' | 'medium' | 'large' | 'semi-xlarge' | 'xlarge')
+  Infer from the dialog frame width:
+  - `400px` → `'small'`
+  - `500px` → `'medium'`
+  - `572px` → `'large'`
+  - `600px` → `'semi-xlarge'`
+  - `800px` → `'xlarge'`
+
+  ## RULES - CRITICAL
+  1. **ALWAYS set `buttonsTemplate`** The Dialog Form most crucial property is `buttonsTemplate` it is what defines the DialogForm and distinguish it from a normal, regular, Dialog.

package/dialogform/index.d.ts

@@ -295,7 +295,7 @@ declare class DialogForm extends ClassComponent<
   /**
    * The ref of form element.
    */
-  form: FormInstance;
+  form?: FormInstance;
 
   /**
    * Set initial values for all fields.

package/dialogselecttree/DialogSelectTree.fm.md

@@ -0,0 +1,42 @@
+# DialogSelectTree
+type reference: ./index.d.ts
+
+Append a `DialogSelectTree` component when the figma context contains:
+
+- A figma component or instance named "Dialog Select Tree" or similar, consisting of a dialog frame (~400px width) with a header (title + close icon), a search input, a tree content area with hierarchical nodes, and a footer with "Cancel" and "Select" buttons.
+- The component has 4 variants: `Type=Group Checkbox`, `Type=Group Single`, `Type=Category Checkbox`, `Type=Category Single`.
+
+## 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
+
+- `header` (string)
+  The header title text of the dialog. Look for the bold heading text at the top of the dialog frame. If no explicit header is provided, omit and the default will be "Select Group" or "Select Category" based on `type`.
+
+- `subHeader` (string | undefined)
+  The subtitle text below the header. Look for a smaller heading element between the title and the search input. Omit if absent.
+
+- `type` ('group' | 'category')
+  Infer from the Figma variant name:
+  - `'group'` if the variant node name contains "Group" (e.g. "Type=Group Checkbox", "Type=Group Single").
+  - `'category'` if the variant node name contains "Category" (e.g. "Type=Category Checkbox", "Type=Category Single").
+
+- `selectionMode` ('single' | 'checkbox')
+  Infer from the Figma variant name:
+  - `'checkbox'` if the variant node name contains "Checkbox" — tree nodes will show a checklist/checkbox element.
+  - `'single'` if the variant node name contains "Single" — tree nodes will NOT show checkboxes; the active selection is indicated by a highlighted background (`--general/sidebar-menu-single-active`).
+
+- `visible` (boolean)
+  Whether the dialog is visible. The dialog frame should be present and not hidden in the design context. Defaults to `true` when the frame exists.
+
+- `lists` ((string | object)[] | undefined)
+  The lists displayed inside the dialog header, typically rendered as a bulleted list (`<ul>`) below the title. Look for a frame or element containing multiple list items. If present, include each item as a string in the array. Omit if absent.
+
+- `listLabel` (string | undefined)
+  The property name to extract from list items when they are objects. Omit if `lists` is absent or if list items are plain strings.

package/dialogselecttree/index.d.ts

@@ -3,7 +3,7 @@ import { Slot } from 'vue';
 
 import { TreeNode } from '../basetree';
 import { QueryParams, ShortFetchListResponse } from '../datatable';
-import TreeInstance, { TreeProps } from '../tree';
+import TreeInstance, { TransactionType, TreeProps } from '../tree';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
 
 export interface DialogSelectTreeProps
@@ -95,6 +95,24 @@ export interface DialogSelectTreeProps
    * @default true
    */
   propagateSelection?: boolean;
+
+  /**
+   * When provided, enables quota validation on select.
+   * Also enables `showAvailableQuota` on the Tree component automatically.
+   */
+  validateQuota?: { assetQuantity: number };
+
+  /**
+   * When set, nodes whose manager[transactionType] is false will be rendered disabled.
+   */
+  requiredManagerPermission?: TransactionType;
+
+  /**
+   * When true, only top-level nodes (level <= 1) are selectable.
+   *
+   * @default false
+   */
+  disableSubChildren?: boolean;
 }
 
 export type TreeSelectPayload = {
@@ -119,6 +137,12 @@ export interface DialogSelectTreeSlots {
     updateFilter: (newFilter?: string) => void; // Hooks to update internal state filter
   }>;
 
+  /**
+   * Slot rendered between the subHeader and the search input.
+   * Use to inject description text or additional content above the tree.
+   */
+  description: Slot<Record<string, never>>;
+
   /**
    * Slot to customize tree node item
    */

package/dropdown/Dropdown.fm.md

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

package/fieldwrapper/index.d.ts

@@ -64,6 +64,11 @@ export interface FieldWrapperProps {
    * @default undefined
    */
   tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
+
+  /**
+   * The id of the input element to associate the label with via `for` attribute.
+   */
+  inputId?: string;
 }
 
 export interface FieldWrapperSlots {

package/fileupload/FileUpload.fm.md

@@ -0,0 +1,31 @@
+# FileUpload
+type reference: ./index.d.ts
+
+Append a `FileUpload` component when the figma context contains:
+
+- A figma component or instance named "File Upload" or similar, consisting of a file selector input with a "Browse" button addon on the left, a selected file name or placeholder text, and an optional file requirement note below, optionally paired with a label, required asterisk, and info 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 file upload input.
+
+- `placeholder` (string | undefined)
+  The placeholder text in the file name field (e.g. "Select File"). When a file is selected, the placeholder is replaced with the file name (e.g. "document.pdf"). Omit if no placeholder text is visible.
+
+- `fileRequirements` (string | undefined)
+  The requirement note displayed below the input (e.g. "Max. file 1 MB"). Omit if no requirement text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the file upload shows an error state (red border, red caption text). Omit if the field is not in error state.

package/fileupload/index.d.ts

@@ -31,7 +31,7 @@ export interface FileUploadProps {
    * Be careful while using this props since the validation can't work while using this.
    * You must do manual validation when choosing the file to be set on the component.
    */
-  modelValue?: File | File[];
+  modelValue?: File | File[] | string;
 
   /**
    * Props to determine whether file upload support multiple files or not
@@ -62,6 +62,12 @@ export interface FileUploadProps {
    * @defaultValue 'Upload File'
    */
   label?: string | undefined;
+  /**
+   * CSS class applied to the label element.
+   * Use `'hidden'` to hide the label when the component is used inside a
+   * composite that manages its own label (e.g. CustomFieldInput).
+   */
+  labelClass?: string | undefined;
   /**
    * Whether to use an upload button.
    * @defaultValue true

package/icon/index.d.ts

@@ -5,7 +5,8 @@ export type WangsIconseverities =
   | 'warning'
   | 'primary'
   | 'success'
-  | 'secondary';
+  | 'secondary'
+  | 'info';
 
 /**
  * List of all available icons.
@@ -13,11 +14,11 @@ export type WangsIconseverities =
 export type WangsIcons =
   | 'admin-line'
   | 'arrow-down-fill'
-  | 'arrow-go-back'
-  | 'arrow-left-right'
-  | 'arrow-right'
+  | 'arrow-go-back-line'
+  | 'arrow-left-right-line'
+  | 'arrow-right-line'
   | 'arrow-right-circle-line'
-  | 'arrow-right-double'
+  | 'arrow-right-double-line'
   | 'arrow-right-fill'
   | 'apps-2-line'
   | 'asset-view'
@@ -26,100 +27,100 @@ export type WangsIcons =
   | 'attachment-2'
   | 'audit'
   | 'bank-card-line'
-  | 'barcode'
+  | 'barcode-line'
   | 'barricade-line'
   | 'bell'
   | 'bell-alert'
   | 'borrow'
-  | 'building'
-  | 'building-2'
-  | 'building-4'
-  | 'calculator'
-  | 'calendar-event'
-  | 'calendar-todo'
-  | 'chat-check'
+  | 'building-line'
+  | 'building-2-line'
+  | 'building-4-line'
+  | 'calculator-line'
+  | 'calendar-event-line'
+  | 'calendar-todo-line'
+  | 'chat-check-line'
   | 'change-tag'
   | 'checkout'
   | 'check-double-fill'
   | 'checkbox-circle-fill'
-  | 'checkbox-blank-circle'
+  | 'checkbox-blank-circle-line'
   | 'checkbox-blank-circle-fill'
-  | 'checkbox-multiple'
+  | 'checkbox-multiple-line'
   | 'close-circle-fill'
   | 'cloud-line'
-  | 'coins'
+  | 'coins-line'
   | 'completion'
-  | 'dashboard'
-  | 'database'
-  | 'delete-bin-7'
-  | 'device'
+  | 'dashboard-line'
+  | 'database-line'
+  | 'delete-bin-7-line'
+  | 'device-line'
   | 'disposal'
-  | 'dropbox'
+  | 'dropbox-line'
   | 'dragable-menu'
   | 'ellipsis-h'
   | 'emotion-happy-fill'
   | 'emotion-unhappy-fill'
   | 'expired'
   | 'extension-borrow'
-  | 'eye'
-  | 'flag'
-  | 'file-add'
+  | 'eye-line'
+  | 'fullscreen-line'
+  | 'fullscreen-exit-line'
+  | 'flag-line'
+  | 'file-add-line'
   | 'file-copy-2-line'
-  | 'file-history'
+  | 'file-history-line'
   | 'file-history-fill'
   | 'files'
   | 'file-lines'
-  | 'file-list-3'
-  | 'file-list'
+  | 'file-list-3-line'
+  | 'file-list-line'
   | 'file-shield-line'
-  | 'file-shield-2'
-  | 'file-up'
-  | 'file-user'
+  | 'file-shield-2-line'
+  | 'file-upload-line'
+  | 'file-user-line'
   | 'filter-fill'
-  | 'filter'
+  | 'filter-line'
   | 'fingerprint-line'
-  | 'folder'
   | 'folder-add-line'
   | 'gate'
   | 'handheld'
   | 'indeterminate-circle-fill'
   | 'information-line'
-  | 'infrared-thermometer'
+  | 'infrared-thermometer-line'
   | 'link'
-  | 'luggage-cart'
+  | 'luggage-cart-line'
   | 'csv'
   | 'xls'
   | 'doc'
   | 'data'
-  | 'line-chart'
+  | 'line-chart-line'
   | 'link-unlink-m'
-  | 'list-settings'
   | 'lock-line'
-  | 'logout-box-r'
-  | 'mail-open'
+  | 'logout-box-r-line'
+  | 'mail-open-line'
   | 'magic-line'
-  | 'map-2'
-  | 'map-pin'
-  | 'menu'
-  | 'menu-unfold'
+  | 'map-2-line'
+  | 'map-pin-line'
+  | 'menu-line'
+  | 'menu-unfold-fill'
   | 'mind-map'
   | 'minus'
-  | 'money-cny-box'
-  | 'money-dollar-circle'
+  | 'money-cny-box-line'
+  | 'money-dollar-circle-line'
   | 'move-to'
   | 'nfc'
   | 'node-tree'
   | 'note'
-  | 'notification'
+  | 'notification-line'
   | 'organization-chart'
   | 'pdf'
   | 'pair-tag'
-  | 'phone'
-  | 'printer-cloud'
-  | 'price-tag-3'
+  | 'phone-line'
+  | 'printer-cloud-line'
+  | 'price-tag-3-line'
   | 'profile'
   | 'qr'
-  | 'qr-scan'
+  | 'qr-scan-line'
   | 'reception'
   | 'recycle-bin'
   | 'replace-tag'
@@ -132,33 +133,32 @@ export type WangsIcons =
   | 'round-keyboard-double-arrow-right'
   | 'search-line'
   | 'send-plane-line'
-  | 'shopping-cart-2'
-  | 'smartphone'
+  | 'shopping-cart-2-line'
+  | 'smartphone-line'
   | 'sort-asc'
   | 'sort-desc'
   | 'supplier-return'
   | 'internal-return'
   | 'spinner'
-  | 'stack'
-  | 'store'
-  | 'table'
-  | 'time'
-  | 'ticket'
-  | 'tools'
-  | 'tracking'
+  | 'stack-line'
+  | 'store-line'
+  | 'table-line'
+  | 'time-line'
+  | 'ticket-line'
+  | 'tools-line'
+  | 'file-search-line'
   | 'truck-line'
   | 'unassign'
-  | 'upload-2'
-  | 'upload-cloud-2'
-  | 'user'
-  | 'user-add'
-  | 'user-follow'
+  | 'upload-2-line'
+  | 'upload-cloud-2-line'
+  | 'user-line'
+  | 'user-add-line'
+  | 'user-follow-line'
   | 'user-received-2-line'
   | 'user-shared-2-line'
-  | 'user-star'
-  | 'user-unfollow'
+  | 'user-star-line'
   | 'verification'
-  | 'timer'
+  | 'timer-line'
   | 'format-clear'
   | 'code-line'
   | 'link-m'
@@ -188,12 +188,13 @@ export type WangsIcons =
   | 'add-line' // Preferred
   | 'arrow-down-s-line' // Preferred
   | 'arrow-drop-down-line' // Preferred
+  | 'folder-line' // Preferred
   | 'arrow-left-double-line' // Preferred
   | 'arrow-left-line' // Preferred
   | 'arrow-up-down-line' // Preferred
   | 'arrow-up-s-line' // Preferred
   | 'calendar-line' // Preferred
-  | 'chat-1' // Preferred
+  | 'chat-1-line' // Preferred
   | 'chat-3-line' // Preferred
   | 'check-line' // Preferred
   | 'checkbox-circle-line' // Preferred
@@ -201,6 +202,7 @@ export type WangsIcons =
   | 'close-line' // Preferred
   | 'delete-back-2-line' // Preferred
   | 'delete-bin-6-line' // Preferred
+  | 'delete-bin-2-line' // Preferred
   | 'download-2-line' // Preferred
   | 'edit-2-line' // Preferred
   | 'error-warning-fill' // Preferred
@@ -214,6 +216,7 @@ export type WangsIcons =
   | 'file-list-2-line' // Preferred
   | 'file-settings-line' // Preferred
   | 'group-line' // Preferred
+  | 'global-line' // Preferred
   | 'hand-coin-line' // Preferred
   | 'history-line' // Preferred
   | 'image-add-line' // Preferred
@@ -249,6 +252,16 @@ export interface IconProps {
   tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
 
   class?: any;
+
+  /**
+   * When true, sets aria-hidden="true" on the icon element for decorative icons.
+   */
+  ariaHidden?: boolean;
+
+  /**
+   * Defines the aria-label attribute for the icon when interactive.
+   */
+  ariaLabel?: string;
 }
 
 /**