docs(vue): update props docs

Author: cschroeter

packages/vue/src/components/editable/editable.types.ts

@@ -4,9 +4,9 @@ export interface RootProps {
   /**
    * The activation mode for the preview element.
    *
-   * - "focus" - Enter edit mode when the preview element is focused
-   * - "dblclick" - Enter edit mode when the preview element is double-clicked
-   * - "none" - No interaction with the preview element will trigger edit mode.
+   * - "focus" - Enter edit mode when the preview is focused
+   * - "dblclick" - Enter edit mode when the preview is double-clicked
+   * - "click" - Enter edit mode when the preview is clicked
    *
    * @default "focus"
    */
@@ -107,16 +107,11 @@ export interface RootProps {
   translations?: editable.IntlTranslations
 }
 
-// TODO: remove when Zag is fixed
-export interface EditChangeDetails {
-  edit: boolean
-}
-
 export type RootEmits = {
   /**
-   * The callback that is called when in the edit mode.
+   * The callback that is called when the edit mode is changed
    */
-  editChange: [event: EditChangeDetails]
+  editChange: [details: editable.EditChangeDetails]
   /**
    * Function called when the focus is moved outside the component
    */

packages/vue/src/components/field/field.types.ts

@@ -7,6 +7,10 @@ export interface ElementIds {
 }
 
 export interface RootProps {
+  /**
+   * Indicates whether the field is disabled.
+   */
+  disabled?: boolean
   /**
    * The id of the field.
    */
@@ -15,14 +19,6 @@ export interface RootProps {
    * The ids of the field parts.
    */
   ids?: ElementIds
-  /**
-   * Indicates whether the field is required.
-   */
-  required?: boolean
-  /**
-   * Indicates whether the field is disabled.
-   */
-  disabled?: boolean
   /**
    * Indicates whether the field is invalid.
    */
@@ -31,4 +27,8 @@ export interface RootProps {
    * Indicates whether the field is read-only.
    */
   readOnly?: boolean
+  /**
+   * Indicates whether the field is required.
+   */
+  required?: boolean
 }

packages/vue/src/components/fieldset/fieldset.types.ts

@@ -1,12 +1,12 @@
 export interface RootProps {
-  /**
-   * The id of the fieldset.
-   */
-  id?: string
   /**
    * Indicates whether the fieldset is disabled.
    */
   disabled?: boolean | 'true' | 'false'
+  /**
+   * The id of the fieldset.
+   */
+  id?: string
   /**
    * Indicates whether the fieldset is invalid.
    */

packages/vue/src/components/file-upload/file-upload.types.ts

@@ -40,6 +40,10 @@ export interface RootProps {
     itemSizeText(id: string): string
     itemPreview(id: string): string
   }>
+  /**
+   * Whether the file input is invalid
+   */
+  invalid?: boolean
   /**
    * The current locale. Based on the BCP 47 definition.
    * @default "en-US"
@@ -77,11 +81,7 @@ export interface RootProps {
   /**
    * Function to validate a file
    */
-  validate?: (file: File) => fileUpload.FileError[]
-  /**
-   * Whether the file input is invalid
-   */
-  invalid?: boolean
+  validate?: (file: File) => fileUpload.FileError[] | null
 }
 
 export type RootEmits = {

packages/vue/src/components/steps/steps.types.ts

@@ -2,7 +2,7 @@ import type * as steps from '@zag-js/steps'
 
 export interface RootProps {
   /**
-   * The number of steps in the component.
+   * The total number of steps
    */
   count?: number
   /**
@@ -14,49 +14,34 @@ export interface RootProps {
    */
   id?: string
   /**
-   * The ids of the elements. Useful for composition.
+   * The custom ids for the stepper elements
    */
-  ids?: Partial<{
-    root: string
-    list: string
-    progress: string
-    trigger(index: number): string
-    separator(index: number): string
-    item(index: number): string
-    itemContent(index: number): string
-  }>
+  ids?: steps.ElementIds
   /**
-   * Whether the step transitions should be linear and require the user
-   * to go through each step one by one.
-   *
-   * @default false
+   * If `true`, the stepper requires the user to complete the steps in order
    */
   linear?: boolean
   /**
-   * The orientation of the steps.
-   *
-   * @default "horizontal"
+   * The v-model value of the step
    */
-  orientation?: 'horizontal' | 'vertical'
+  modelValue?: number
   /**
-   * The v-model value of the component.
+   * The orientation of the stepper
    */
-  modelValue?: number
+  orientation?: 'horizontal' | 'vertical'
 }
 
 export type RootEmits = {
   /**
-   * Event triggered when a step is changed, either by clicking on a step,
-   * clicking on the next/previous triggers, or by calling `setStep`.
+   * Callback to be called when the value changes
    */
   stepChange: [details: steps.StepChangeDetails]
   /**
-   * Event triggered when a step is completed by clicking on the next/previous
-   * triggers or by calling `setStep`.
+   * Callback to be called when a step is completed
    */
   stepComplete: []
   /**
-   * Event triggered when the model value changes.
+   * The callback fired when the model value changes.
    */
-  'update:modelValue': [step: number]
+  'update:modelValue': [value: number]
 }

scripts/src/generate-vue-props.ts

@@ -122,7 +122,7 @@ const main = async () => {
   Promise.all(
     components
       .map((component) => parse(component).base)
-      .filter((x) => !['format', 'toast'].includes(x))
+      .filter((x) => !['format', 'toast', 'highlight', 'frame'].includes(x))
       .map(extractTypes),
   )
 }

website/src/content/types/vue/editable.types.json

@@ -65,9 +65,9 @@
   "Root": {
     "emits": {
       "editChange": {
-        "type": "[event: EditChangeDetails]",
+        "type": "[details: EditChangeDetails]",
         "isRequired": true,
-        "description": "The callback that is called when in the edit mode."
+        "description": "The callback that is called when the edit mode is changed"
       },
       "focusOutside": {
         "type": "[event: FocusOutsideEvent]",
@@ -115,7 +115,7 @@
         "type": "ActivationMode",
         "defaultValue": "\"focus\"",
         "isRequired": false,
-        "description": "The activation mode for the preview element.\n\n- \"focus\" - Enter edit mode when the preview element is focused\n- \"dblclick\" - Enter edit mode when the preview element is double-clicked\n- \"none\" - No interaction with the preview element will trigger edit mode."
+        "description": "The activation mode for the preview element.\n\n- \"focus\" - Enter edit mode when the preview is focused\n- \"dblclick\" - Enter edit mode when the preview is double-clicked\n- \"click\" - Enter edit mode when the preview is clicked"
       },
       "asChild": {
         "type": "boolean",

website/src/content/types/vue/file-upload.types.json

@@ -210,7 +210,7 @@
         "description": "The localized messages to use."
       },
       "validate": {
-        "type": "(file: File) => FileError[]",
+        "type": "(file: File) => FileError[] | null",
         "isRequired": false,
         "description": "Function to validate a file"
       }

website/src/content/types/vue/steps.types.json

@@ -83,7 +83,7 @@
       "count": {
         "type": "number",
         "isRequired": false,
-        "description": "The number of steps in the component."
+        "description": "The total number of steps"
       },
       "defaultStep": {
         "type": "number",
@@ -96,26 +96,24 @@
         "description": "The unique identifier of the machine."
       },
       "ids": {
-        "type": "Partial<{\n  root: string\n  list: string\n  progress: string\n  trigger(index: number): string\n  separator(index: number): string\n  item(index: number): string\n  itemContent(index: number): string\n}>",
+        "type": "ElementIds",
         "isRequired": false,
-        "description": "The ids of the elements. Useful for composition."
+        "description": "The custom ids for the stepper elements"
       },
       "linear": {
         "type": "boolean",
-        "defaultValue": "false",
         "isRequired": false,
-        "description": "Whether the step transitions should be linear and require the user\nto go through each step one by one."
+        "description": "If `true`, the stepper requires the user to complete the steps in order"
       },
       "modelValue": {
         "type": "number",
         "isRequired": false,
-        "description": "The v-model value of the component."
+        "description": "The v-model value of the step"
       },
       "orientation": {
         "type": "'horizontal' | 'vertical'",
-        "defaultValue": "\"horizontal\"",
         "isRequired": false,
-        "description": "The orientation of the steps."
+        "description": "The orientation of the stepper"
       }
     }
   },