@indielayer/ui 2.0.0 → 2.1.0

package/src/components/divider/Divider.vue

@@ -2,8 +2,11 @@
 import { optionalBooleanProp } from '../../common/props'
 
 const dividerProps = {
-  label: String,
-  vertical: optionalBooleanProp(),
+  label: {
+    type: String,
+    description: 'Optional text shown between the divider lines.',
+  },
+  vertical: optionalBooleanProp('Renders the divider vertically instead of horizontally.'),
 }
 
 export type DividerProps = ExtractPublicPropTypes<typeof dividerProps>
@@ -11,7 +14,10 @@ export type DividerProps = ExtractPublicPropTypes<typeof dividerProps>
 type InternalClasses = 'wrapper' | 'label' | 'line'
 export interface DividerTheme extends ThemeComponent<DividerProps, InternalClasses> {}
 
-export default { name: 'XDivider' }
+export default {
+  name: 'XDivider',
+  docs: {},
+}
 </script>
 
 <script setup lang="ts">

package/src/components/drawer/Drawer.vue

@@ -1,27 +1,38 @@
 <script lang="ts">
 const drawerPosition = ['left', 'right', 'top', 'bottom'] as const
 const drawerProps = {
-  modelValue: Boolean,
+  modelValue: {
+    type: Boolean,
+    description: 'Open state (v-model).',
+  },
   position: {
     type: String as PropType<DrawerPosition>,
     default: 'left',
+    description: 'Edge the drawer attaches to (left, right, top, bottom).',
   },
   teleportTo: {
     type: [String, Object] as PropType<string | HTMLElement>,
     default: 'body',
+    description: 'Teleport target when the drawer is detached (overlay mode).',
   },
   width: {
     type: [String, Number],
     default: 220,
+    description: 'Panel width in pixels when position is left or right.',
   },
   height: {
     type: [String, Number],
     default: 320,
+    description: 'Panel height in pixels when position is top or bottom.',
+  },
+  breakpoint: {
+    type: [String, Number],
+    description: 'Below this viewport size the drawer becomes an overlay. Tailwind key or pixel width.',
   },
-  breakpoint: [String, Number],
   backdrop: {
     type: Boolean,
     default: true,
+    description: 'Shows a dimmed backdrop behind the drawer when detached.',
   },
 }
 
@@ -37,6 +48,20 @@ export default {
   validators: {
     position: drawerPosition,
   },
+  docs: {
+    slots: {
+      default: 'Main drawer body (scrollable).',
+      header: 'Content above the scrollable body.',
+      footer: 'Content below the scrollable body.',
+    },
+    emits: {
+      'update:modelValue': 'Emitted when open state changes (v-model).',
+    },
+    methods: {
+      open: 'Open the drawer.',
+      close: 'Close the drawer.',
+    },
+  },
 }
 </script>
 

package/src/components/empty/Empty.vue

@@ -4,13 +4,20 @@ import { emptyIcon } from '../../common/icons'
 
 const emptyProps = {
   ...useCommon.props(),
-  title: String,
-  description: String,
+  title: {
+    type: String,
+    description: 'Primary empty-state heading.',
+  },
+  description: {
+    type: String,
+    description: 'Supporting text shown below the title.',
+  },
   icon: {
     type: String,
     default: emptyIcon,
+    description: 'Icon name shown above the title.',
   },
-  bordered: optionalBooleanProp(),
+  bordered: optionalBooleanProp('Adds a border around the empty state.'),
 }
 
 export type EmptyProps = ExtractPublicPropTypes<typeof emptyProps>
@@ -23,6 +30,14 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      icon: 'Custom icon; overrides the `icon` prop.',
+      title: 'Custom title content; overrides the `title` prop.',
+      description: 'Custom description content; overrides the `description` prop.',
+      actions: 'Action controls shown below the description.',
+    },
+  },
 }
 </script>
 

package/src/components/form/Form.vue

@@ -3,21 +3,34 @@ const formProps = {
   autoValidate: {
     type: Boolean,
     default: true,
+    description: 'Runs validation on all registered fields before emitting submit.',
   },
   autoFocus: {
     type: Boolean,
     default: true,
+    description: 'Focuses the first registered field when the form mounts.',
+  },
+  disabled: {
+    type: Boolean,
+    description: 'Disables all fields inside the form fieldset.',
   },
-  disabled: Boolean,
   errors: {
     type: [Array, Object] as PropType<FormError[] | FormError>,
     default: () => ([]),
+    description: 'External field errors (`field` + `msg`) applied to registered inputs.',
+  },
+  title: {
+    type: String,
+    description: 'Optional title shown in the default header.',
+  },
+  description: {
+    type: String,
+    description: 'Optional description shown under the title in the default header.',
   },
-  title: String,
-  description: String,
   hasFooter: {
     type: Boolean,
     default: true,
+    description: 'Renders the footer slot area for form actions.',
   },
 }
 
@@ -46,6 +59,22 @@ export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {}
 
 export default {
   name: 'XForm',
+  docs: {
+    slots: {
+      default: 'Form fields and content inside the fieldset.',
+      header: 'Custom header; overrides the default title/description block.',
+      footer: 'Custom footer; wraps primary and secondary actions by default.',
+      'primary-action': 'Primary action control in the default footer.',
+      'secondary-action': 'Secondary action control in the default footer.',
+    },
+    emits: {
+      submit: 'Emitted on form submit with whether validation passed.',
+    },
+    methods: {
+      validate: 'Validate all registered fields; focuses the first invalid field.',
+      submit: 'Programmatically submit the form (runs auto-validate when enabled).',
+    },
+  },
 }
 </script>
 

package/src/components/formGroup/FormGroup.vue

@@ -5,6 +5,7 @@ const formGroupProps = {
   vertical: {
     type: Boolean,
     default: false,
+    description: 'Stacks child controls vertically instead of in a row.',
   },
 }
 
@@ -34,6 +35,17 @@ export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalC
 
 export default {
   name: 'XFormGroup',
+  docs: {
+    slots: {
+      default: 'Grouped inputs (radios, checkboxes, radio buttons, etc.).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 

package/src/components/icon/Icon.vue

@@ -6,11 +6,13 @@ const iconProps = {
   icon: {
     type: String,
     required: true,
+    description: 'Icon name from the injected icon set, or raw SVG path markup.',
   },
-  filled: optionalBooleanProp(),
+  filled: optionalBooleanProp('Renders a filled icon instead of an outline stroke.'),
   viewBox: {
     type: String,
     default: '0 0 24 24',
+    description: 'SVG viewBox when rendering path markup.',
   },
 }
 
@@ -26,6 +28,7 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {},
 }
 </script>
 

package/src/components/image/Image.vue

@@ -1,6 +1,9 @@
 <script lang="ts">
 const imageProps = {
-  src: String,
+  src: {
+    type: String,
+    description: 'Image URL. Shows a transparent placeholder until the image loads.',
+  },
 }
 
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
@@ -8,7 +11,10 @@ export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
 type InternalClasses = 'wrapper'
 export interface ImageTheme extends ThemeComponent<ImageProps, InternalClasses> {}
 
-export default { name: 'XImage' }
+export default {
+  name: 'XImage',
+  docs: {},
+}
 </script>
 
 <script setup lang="ts">

package/src/components/input/Input.vue

@@ -9,27 +9,57 @@ const inputProps = {
   showPasswordToggle: {
     type: Boolean,
     default: true,
+    description: 'Shows a visibility toggle when `type` is `password`.',
   },
   dir: {
     type: String as PropType<'ltr' | 'rtl'>,
     default: 'ltr',
+    description: 'Text direction for the native input (`ltr` or `rtl`).',
+  },
+  icon: {
+    type: String,
+    description: 'Shortcut for `iconLeft`.',
+  },
+  iconLeft: {
+    type: String,
+    description: 'Icon name shown before the input value.',
+  },
+  iconRight: {
+    type: String,
+    description: 'Icon name shown after the input value.',
+  },
+  max: {
+    type: [Number, String],
+    description: 'Native `max` attribute (typically for number inputs).',
+  },
+  maxlength: {
+    type: [Number, String],
+    description: 'Maximum character length for the input value.',
+  },
+  min: {
+    type: [Number, String],
+    description: 'Native `min` attribute (typically for number inputs).',
+  },
+  minlength: {
+    type: [Number, String],
+    description: 'Minimum character length for the input value.',
+  },
+  placeholder: {
+    type: String,
+    description: 'Placeholder text shown when the value is empty.',
   },
-  icon: String,
-  iconLeft: String,
-  iconRight: String,
-  max: [Number, String],
-  maxlength: [Number, String],
-  min: [Number, String],
-  minlength: [Number, String],
-  placeholder: String,
   type: {
     type: String,
     default: 'text',
+    description: 'Native input type (text, password, email, number, etc.).',
+  },
+  step: {
+    type: [Number, String],
+    description: 'Native `step` attribute for numeric inputs.',
   },
-  step: [Number, String],
-  block: optionalBooleanProp(),
-  showCounter: optionalBooleanProp(),
-  clearable: optionalBooleanProp(),
+  block: optionalBooleanProp('Stretches to the full width of the parent.'),
+  showCounter: optionalBooleanProp('Shows a character counter in the footer.'),
+  clearable: optionalBooleanProp('Shows a clear button when the value is not empty.'),
 }
 
 export type InputProps = ExtractPublicPropTypes<typeof inputProps>
@@ -43,6 +73,18 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      prefix: 'Content before the input (left adornment).',
+      suffix: 'Content after the input (right adornment).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 

package/src/components/inputFooter/InputFooter.vue

@@ -2,11 +2,23 @@
 import { optionalBooleanProp } from '../../common/props'
 
 const inputFooterProps = {
-  helper: String,
-  error: String,
-  characterCount: Number,
-  maxCharacters: [Number, String],
-  showCounter: optionalBooleanProp(),
+  helper: {
+    type: String,
+    description: 'Helper text shown when there is no error.',
+  },
+  error: {
+    type: String,
+    description: 'Error message; takes priority over helper text.',
+  },
+  characterCount: {
+    type: Number,
+    description: 'Current character count for the counter.',
+  },
+  maxCharacters: {
+    type: [Number, String],
+    description: 'Maximum characters shown as `count/max` in the counter.',
+  },
+  showCounter: optionalBooleanProp('Shows the character counter.'),
 }
 
 export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>
@@ -14,7 +26,10 @@ export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>
 type InternalClasses = 'wrapper' | 'helperText' | 'errorText' | 'container' | 'counter'
 export interface InputFooterTheme extends ThemeComponent<InputFooterProps, InternalClasses> {}
 
-export default { name: 'XInputFooter' }
+export default {
+  name: 'XInputFooter',
+  docs: {},
+}
 </script>
 
 <script setup lang="ts">

package/src/components/inputGroup/InputGroup.vue

@@ -9,7 +9,7 @@ const inputGroupProps = {
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  block: optionalBooleanProp(),
+  block: optionalBooleanProp('Stretches the group to the full width of the parent.'),
 }
 
 export type InputGroupProps = ExtractPublicPropTypes<typeof inputGroupProps>
@@ -43,6 +43,17 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Grouped controls (inputs, buttons, or other adornments).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 

package/src/components/label/Label.vue

@@ -3,17 +3,36 @@ import { optionalBooleanProp } from '../../common/props'
 
 const labelProps = {
   ...useCommon.props(),
-  label: String,
-  disabled: Boolean,
-  required: Boolean,
-  block: optionalBooleanProp(),
-  isInsideForm: Boolean,
-  isInsideInputGroup: Boolean,
+  label: {
+    type: String,
+    description: 'Visible label text.',
+  },
+  disabled: {
+    type: Boolean,
+    description: 'Applies disabled styling to the label.',
+  },
+  required: {
+    type: Boolean,
+    description: 'Marks the label as required for form fields.',
+  },
+  block: optionalBooleanProp('Stretches to the full width of the parent.'),
+  isInsideForm: {
+    type: Boolean,
+    description: 'Indicates the label is rendered inside a form layout.',
+  },
+  isInsideInputGroup: {
+    type: Boolean,
+    description: 'Indicates the label is rendered inside an input group.',
+  },
   tag: {
     type: String,
     default: 'label',
+    description: 'Root element tag. Use `fieldset` for grouped controls.',
+  },
+  tooltip: {
+    type: String,
+    description: 'Tooltip text shown next to the label via a toggle tip.',
   },
-  tooltip: String,
 }
 
 export type LabelProps = ExtractPublicPropTypes<typeof labelProps>
@@ -26,6 +45,11 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Labeled control or content.',
+    },
+  },
 }
 </script>
 

package/src/components/link/Link.vue

@@ -6,11 +6,15 @@ const linkProps = {
   tag: {
     type: String,
     default: 'a',
+    description: 'Root element tag. Becomes a router-link when `to` is set.',
   },
-  to: [String, Object],
-  shadow: optionalBooleanProp(),
-  external: optionalBooleanProp(),
-  underline: optionalBooleanProp(),
+  to: {
+    type: [String, Object],
+    description: 'Vue Router location; renders as a link when set.',
+  },
+  shadow: optionalBooleanProp('Inset shadow highlight under the link text.'),
+  external: optionalBooleanProp('Appends an external-link icon after the label.'),
+  underline: optionalBooleanProp('Underlines the link text.'),
 }
 
 export type LinkProps = ExtractPublicPropTypes<typeof linkProps>
@@ -18,7 +22,14 @@ export type LinkProps = ExtractPublicPropTypes<typeof linkProps>
 type InternalClasses = 'wrapper'
 export interface LinkTheme extends ThemeComponent<LinkProps, InternalClasses> {}
 
-export default { name: 'XLink' }
+export default {
+  name: 'XLink',
+  docs: {
+    slots: {
+      default: 'Link label and content.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">

package/src/components/loader/Loader.vue

@@ -4,9 +4,16 @@ const loaderProps = {
   status: {
     type: String as PropType<LoaderStatus>,
     default: 'active',
+    description: 'Visual status (active spinner, success, or error).',
+  },
+  icon: {
+    type: String,
+    description: 'Custom spinner icon when status is `active`.',
+  },
+  label: {
+    type: String,
+    description: 'Optional text shown next to the status icon.',
   },
-  icon: String,
-  label: String,
 }
 
 export type LoaderStatus = 'active' | 'success' | 'error'
@@ -21,6 +28,7 @@ export default {
     ...useCommon.validators(),
     status: ['active', 'success', 'error'],
   },
+  docs: {},
 }
 </script>
 

package/src/components/menu/Menu.vue

@@ -4,23 +4,35 @@ import { optionalBooleanProp } from '../../common/props'
 const menuProps = {
   ...useCommon.props(),
   ...useColors.props('secondary'),
-  items: Array as PropType<MenuArrayItem[]>,
+  items: {
+    type: Array as PropType<MenuArrayItem[]>,
+    description: 'Menu tree. Each item may nest `items`, links, icons, and dividers.',
+  },
   collapsible: {
     type: Boolean,
     default: true,
+    description: 'Allows nested groups to collapse when they have child items.',
+  },
+  collapseIcon: {
+    type: String,
+    description: 'Default icon for collapsible group headers.',
+  },
+  expanded: optionalBooleanProp('Default expanded state for collapsible groups.'),
+  disabled: {
+    type: Boolean,
+    description: 'Disables all menu items.',
   },
-  collapseIcon: String,
-  expanded: optionalBooleanProp(),
-  disabled: Boolean,
   rounded: {
     type: Boolean,
     default: true,
+    description: 'Applies rounded corners to menu items.',
   },
   filled: {
     type: Boolean,
     default: true,
+    description: 'Filled item backgrounds (vs. minimal text-only look).',
   },
-  minimal: optionalBooleanProp(),
+  minimal: optionalBooleanProp('Hides item labels; icons-only layout.'),
 }
 
 export type MenuArrayItem = {
@@ -60,6 +72,12 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    emits: {
+      expand: 'Emitted when a nested group expands or a linked item becomes active.',
+      'item-click': 'Emitted when a menu item is clicked.',
+    },
+  },
 }
 </script>