@fewangsit/wangsvue-gsts 2.0.0-alpha.27 → 2.0.0-alpha.29

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[];
@@ -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/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/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

@@ -14,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'
@@ -27,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'
@@ -133,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'
@@ -195,7 +194,7 @@ export type WangsIcons =
   | '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
@@ -253,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;
 }
 
 /**

package/imagecompressor/ImageCompressor.fm.md

@@ -0,0 +1,44 @@
+# ImageCompressor
+type reference: ./index.d.ts
+
+Append a `ImageCompressor` component when the figma context contains:
+
+- A figma component or instance named "Image Compressor" or similar, consisting of an image upload area with a square preview box (showing either an `image-add-line` icon placeholder or an actual image), Edit/Delete action buttons, requirement info text, and 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 image input.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `imagePreviewSize` ('small' | 'medium' | 'big' | undefined)
+  Infer from the image preview frame dimensions:
+  - `125px` → `'big'`
+  - `80px` → `'medium'`
+  - `30px` → `'small'`
+  - Omit if ambiguous.
+
+- `rounded` (boolean | undefined)
+  Whether the image preview is displayed as a full circle. Omit if the preview is squared.
+
+- `multiple` (boolean | undefined)
+  Whether "Add Photo" and "Remove" action buttons alongside a "Set as default" radio button are present below the image, indicating multiple image support. Omit if absent.
+
+- `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 image input shows an error state (red border, caption text like "Photo must not be empty"). Omit if not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the image input shows a disabled state (grayed out placeholder). Omit if not disabled.

package/imagecompressor/index.d.ts

@@ -182,7 +182,7 @@ export type ImageCompressorEmits = {
   /**
    * On apply the image cropper.
    */
-  'apply': [value: ImageCompressorPayload];
+  'apply': [value: ImageCompressorPayload, index?: number];
   /**
    * On apply image from props.
    */

package/inputbadge/InputBadge.fm.md

@@ -0,0 +1,34 @@
+# InputBadge
+type reference: ./index.d.ts
+
+Append a `InputBadge` component when the figma context contains:
+
+- A figma component or instance named "Input Badge" or similar, consisting of a text input area containing multiple badge chips (with close buttons), 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 input badge area.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the input (e.g. "Enter"). When badges are present, the placeholder is replaced by 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 input shows an error state (red border, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the input shows a disabled state (gray background, gray text). Omit if the field is not disabled.

package/inputbadge/index.d.ts

@@ -118,6 +118,10 @@ export interface InputBadgeProps {
    * Otherwise, the badge will be fully removed, shifting subsequent items.
    */
   preserveDeletedIndex?: boolean;
+  /**
+   * Maximum length for the input text and badge editing.
+   */
+  maxlength?: number;
 }
 
 /**