@indielayer/ui 2.0.0 → 2.1.0

package/src/components/popover/PopoverContainer.vue

@@ -3,6 +3,7 @@ const popoverContainerProps = {
   tag: {
     default: 'div',
     type: String,
+    description: 'Root element tag.',
   },
 }
 
@@ -11,7 +12,14 @@ export type PopoverContainerProps = ExtractPublicPropTypes<typeof popoverContain
 type InternalClasses = 'wrapper'
 export interface PopoverContainerTheme extends ThemeComponent<PopoverContainerProps, InternalClasses> {}
 
-export default { name: 'XPopoverContainer' }
+export default {
+  name: 'XPopoverContainer',
+  docs: {
+    slots: {
+      default: 'Styled container content for popover panels.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">

package/src/components/popover/PopoverContentBoundary.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+export default {
+  name: 'XPopoverContentBoundary',
+  docs: {
+    slots: {
+      default: 'Popover content isolated from parent ButtonGroup provide/inject.',
+    },
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { injectButtonGroupKey } from '../../composables/keys'
+import type { ButtonGroupInjection } from '../button/ButtonGroup.vue'
+
+/** Isolate popover content from parent ButtonGroup (provide/inject crosses teleport). */
+const inactiveButtonGroup: ButtonGroupInjection = {
+  isButtonGroup: false,
+  groupProps: {},
+  registerChild: () => {},
+  unregisterChild: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+}
+
+provide(injectButtonGroupKey, inactiveButtonGroup)
+</script>
+
+<template>
+  <slot ></slot>
+</template>

package/src/components/popover/__tests__/Popover.spec.ts

@@ -1,6 +1,20 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { h, defineComponent, nextTick } from 'vue'
 import Popover from '../Popover.vue'
+import PopoverContentBoundary from '../PopoverContentBoundary.vue'
+import ButtonGroup from '../../button/ButtonGroup.vue'
+import Button from '../../button/Button.vue'
+import { injectThemeKey } from '../../../composables/keys'
+import BaseTheme from '../../../themes/base'
+
+const themeProvide = {
+  global: {
+    provide: {
+      [injectThemeKey as symbol]: BaseTheme,
+    },
+  },
+}
 
 describe('Popover', () => {
   it('renders without errors', () => {
@@ -8,4 +22,41 @@ describe('Popover', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('keeps trigger button group radius when popover content mounts', async () => {
+    const Demo = defineComponent({
+      setup() {
+        return () => h(ButtonGroup, null, {
+          default: () => [
+            h(Button, null, () => 'Add New'),
+            h(Popover, null, {
+              default: () => h(Button, null, () => 'More'),
+              content: () => h(Button, null, () => 'Option 1'),
+            }),
+            // Simulate teleported content that would otherwise join the group
+            h(PopoverContentBoundary, null, {
+              default: () => [
+                h(Button, null, () => 'Option 1'),
+                h(Button, null, () => 'Option 2'),
+                h(Button, null, () => 'Option 3'),
+              ],
+            }),
+          ],
+        })
+      },
+    })
+
+    const wrapper = mount(Demo, themeProvide)
+
+    await nextTick()
+
+    const buttons = wrapper.findAll('button')
+    const addNew = buttons.find((b) => b.text() === 'Add New')
+    const more = buttons.find((b) => b.text() === 'More')
+    const option1 = buttons.find((b) => b.text() === 'Option 1')
+
+    expect(addNew?.classes().some((c) => c.includes('rounded-s'))).toBe(true)
+    expect(more?.classes().some((c) => c.includes('rounded-e'))).toBe(true)
+    expect(option1?.classes().includes('rounded-md')).toBe(true)
+  })
 })

package/src/components/popover/theme/PopoverContainer.base.theme.ts

@@ -2,7 +2,7 @@ import type { PopoverContainerTheme } from '../PopoverContainer.vue'
 
 const theme: PopoverContainerTheme = {
   classes: {
-    wrapper: 'block w-full bg-white dark:bg-secondary-700 shadow-lg rounded-md border border-secondary-200 dark:border-secondary-800',
+    wrapper: 'block w-full bg-white dark:bg-secondary-800 shadow-lg rounded-md border border-secondary-200 dark:border-secondary-700',
   },
 }
 

package/src/components/progress/Progress.vue

@@ -7,13 +7,15 @@ const progressProps = {
     type: [Number, String],
     default: 0,
     validator: (value: number) => value >= 0 && value <= 100,
+    description: 'Fill amount from 0 to 100.',
   },
-  gradient: optionalBooleanProp(),
+  gradient: optionalBooleanProp('Uses a gradient fill instead of a solid color.'),
   animate: {
     type: Boolean,
     default: true,
+    description: 'Animates width changes when the percentage updates.',
   },
-  thick: optionalBooleanProp(),
+  thick: optionalBooleanProp('Increases the bar thickness.'),
 }
 
 export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>
@@ -21,7 +23,10 @@ export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>
 type InternalClasses = 'wrapper' | 'list' | 'item'
 export interface ProgressTheme extends ThemeComponent<ProgressProps, InternalClasses> {}
 
-export default { name: 'XProgress' }
+export default {
+  name: 'XProgress',
+  docs: {},
+}
 </script>
 
 <script setup lang="ts">

package/src/components/qrCode/QrCode.vue

@@ -1,21 +1,28 @@
 <script lang="ts">
 const qrCodeProps = {
-  value: String,
+  value: {
+    type: String,
+    description: 'Text or URL encoded in the QR code.',
+  },
   color: {
     type: String,
     default: '#000',
+    description: 'Foreground module color.',
   },
   backgroundColor: {
     type: String,
     default: '#fff',
+    description: 'Background color behind the modules.',
   },
   size: {
     type: [String, Number],
     default: 100,
+    description: 'Rendered size of the QR canvas in pixels.',
   },
   errorCorrectionLevel: {
     type: String,
     default: 'M',
+    description: 'Error correction level (L, M, Q, or H).',
   },
 }
 
@@ -29,6 +36,7 @@ export default {
   validators: {
     errorCorrectionLevel: ['L', 'M', 'Q', 'H'],
   },
+  docs: {},
 }
 </script>
 

package/src/components/radio/Radio.vue

@@ -6,8 +6,11 @@ const radioProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  value: [String, Number],
-  glow: optionalBooleanProp(),
+  value: {
+    type: [String, Number],
+    description: 'Value emitted when this option is selected (v-model / form-group).',
+  },
+  glow: optionalBooleanProp('Soft colored glow behind the control.'),
 }
 
 export type RadioProps = ExtractPublicPropTypes<typeof radioProps>
@@ -21,6 +24,17 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Optional content shown below the label.',
+    },
+    emits: {
+      ...useInputtable.emitDocs(false),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 

package/src/components/radioButton/RadioButton.vue

@@ -6,7 +6,10 @@ const radioButtonProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  value: [String, Number],
+  value: {
+    type: [String, Number],
+    description: 'Value emitted when this option is selected (v-model / form-group).',
+  },
   ...variantBooleanProps(),
 }
 
@@ -21,6 +24,17 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Button label; falls back to the `label` prop.',
+    },
+    emits: {
+      ...useInputtable.emitDocs(false),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 

package/src/components/scroll/Scroll.vue

@@ -2,12 +2,13 @@
 import { optionalBooleanProp } from '../../common/props'
 
 const scrollProps = {
-  shadow: optionalBooleanProp(),
-  horizontal: optionalBooleanProp(),
-  mousewheel: optionalBooleanProp(),
+  shadow: optionalBooleanProp('Shows edge shadows when more content can be scrolled.'),
+  horizontal: optionalBooleanProp('Scrolls horizontally instead of vertically.'),
+  mousewheel: optionalBooleanProp('Maps vertical mouse wheel to horizontal scroll when `horizontal` is set.'),
   scrollbar: {
     type: Boolean,
     default: true,
+    description: 'Shows the native scrollbar. Set false to hide it.',
   },
 }
 
@@ -16,7 +17,17 @@ export type ScrollProps = ExtractPublicPropTypes<typeof scrollProps>
 type InternalClasses = 'wrapper'
 export interface ScrollTheme extends ThemeComponent<ScrollProps, InternalClasses> {}
 
-export default { name: 'XScroll' }
+export default {
+  name: 'XScroll',
+  docs: {
+    slots: {
+      default: 'Scrollable content.',
+    },
+    methods: {
+      scrollEl: 'Ref to the inner scrollable element.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">

package/src/components/select/Select.vue

@@ -6,34 +6,52 @@ const selectProps = {
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  placeholder: String,
-  options: Array as PropType<SelectOption[]>,
-  multiple: optionalBooleanProp(),
-  multipleCheckbox: optionalBooleanProp(),
-  truncate: optionalBooleanProp(),
-  flat: optionalBooleanProp(),
-  native: optionalBooleanProp(),
-  filterable: optionalBooleanProp(),
-  clearable: optionalBooleanProp(),
+  placeholder: {
+    type: String,
+    description: 'Placeholder shown when no option is selected.',
+  },
+  options: {
+    type: Array as PropType<SelectOption[]>,
+    description: 'Available options (`value`, `label`, optional prefix/suffix/disabled).',
+  },
+  multiple: optionalBooleanProp('Allows selecting more than one option.'),
+  multipleCheckbox: optionalBooleanProp('Multiple selection with checkbox-style items.'),
+  truncate: optionalBooleanProp('Truncates selected labels when space is limited.'),
+  flat: optionalBooleanProp('Removes elevation and border emphasis on the trigger.'),
+  native: optionalBooleanProp('Renders a native HTML select instead of the custom popover.'),
+  filterable: optionalBooleanProp('Shows a filter input inside the options list.'),
+  clearable: optionalBooleanProp('Shows a clear control when a value is selected.'),
   filterPlaceholder: {
     type: String,
     default: 'Filter by...',
+    description: 'Placeholder for the filter input when `filterable` is enabled.',
+  },
+  filterablePrefix: optionalBooleanProp('Includes option prefixes when filtering.'),
+  filterableSuffix: optionalBooleanProp('Includes option suffixes when filtering.'),
+  hideSelectedOptionSlots: optionalBooleanProp('Hides prefix/suffix slots on the selected value display.'),
+  virtualList: optionalBooleanProp('Virtualizes the options list for large datasets.'),
+  virtualListOffsetTop: {
+    type: Number,
+    description: 'Extra top offset (px) for the virtual list viewport.',
+  },
+  virtualListOffsetBottom: {
+    type: Number,
+    description: 'Extra bottom offset (px) for the virtual list viewport.',
   },
-  filterablePrefix: optionalBooleanProp(),
-  filterableSuffix: optionalBooleanProp(),
-  hideSelectedOptionSlots: optionalBooleanProp(),
-  virtualList: optionalBooleanProp(),
-  virtualListOffsetTop: Number,
-  virtualListOffsetBottom: Number,
   virtualListItemHeight: {
     type: Number,
     default: 33,
+    description: 'Estimated row height (px) used by the virtual list.',
   },
   virtualListOverscan: {
     type: Number,
     default: 10,
+    description: 'Extra rows rendered above/below the visible virtual list window.',
+  },
+  placement: {
+    type: String as PropType<PopoverPlacement>,
+    description: 'Popover placement for the options menu.',
   },
-  placement: String as PropType<PopoverPlacement>,
 }
 
 export type SelectOption = {
@@ -62,6 +80,25 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      prefix: 'Prefix content for an option or the selected value (`item`).',
+      suffix: 'Suffix content for an option or the selected value (`item`).',
+      label: 'Custom label content for an option (`item`).',
+      input: 'Custom trigger content (popover, selected value, disabled, label).',
+      'content-header': 'Content above the options list (default includes the filter).',
+      'content-footer': 'Content below the options list.',
+      icon: 'Custom chevron/icon on the trigger.',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+      open: 'Emitted when the options popover opens.',
+      close: 'Emitted when the options popover closes.',
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 

package/src/components/skeleton/Skeleton.vue

@@ -11,11 +11,13 @@ const skeletonProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
   shape: {
     type: String as PropType<SkeletonShape>,
     default: 'line',
     validator: (val: SkeletonShape) => validators.shape.includes(val),
+    description: 'Placeholder shape (line or circle).',
   },
 }
 
@@ -27,6 +29,7 @@ export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalCla
 export default {
   name: 'XSkeleton',
   validators,
+  docs: {},
 }
 </script>
 

package/src/components/slider/Slider.vue

@@ -6,14 +6,17 @@ const sliderProps = {
   min: {
     type: [Number, String],
     default: 0,
+    description: 'Minimum value of the range.',
   },
   max: {
     type: [Number, String],
     default: 100,
+    description: 'Maximum value of the range.',
   },
   step: {
     type: [Number, String],
     default: 1,
+    description: 'Increment between selectable values.',
   },
 }
 
@@ -27,6 +30,18 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      prefix: 'Content before the track (`value`).',
+      suffix: 'Content after the track (`value`).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 

package/src/components/spinner/Spinner.vue

@@ -4,6 +4,7 @@ const spinnerProps = {
   icon: {
     type: String,
     default: '<g stroke-width="0"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.65s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g>',
+    description: 'SVG markup or icon name used for the spinner.',
   },
 }
 
@@ -14,6 +15,7 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {},
 }
 </script>
 

package/src/components/stepper/Stepper.vue

@@ -10,39 +10,69 @@ const validators = {
 const stepperProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
-  modelValue: [String, Number],
+  modelValue: {
+    type: [String, Number],
+    description: 'Active step value (`v-model`).',
+  },
   steps: {
     type: Array as PropType<StepperStep[]>,
     default: () => [],
+    description: 'Step definitions (value, title, optional, completed, error, etc.).',
+  },
+  validate: {
+    type: Function as PropType<() => boolean>,
+    description: 'Runs before leaving the current step; return false to block navigation.',
+  },
+  beforeChange: {
+    type: Function as PropType<(to: string | number, from: string | number) => boolean | Promise<boolean>>,
+    description: 'Async guard before changing steps; return false to cancel.',
   },
-  validate: Function as PropType<() => boolean>,
-  beforeChange: Function as PropType<(to: string | number, from: string | number) => boolean | Promise<boolean>>,
   variant: {
     type: String as PropType<StepperVariant>,
     default: 'line',
+    description: 'Indicator style: line or dot.',
   },
   orientation: {
     type: String as PropType<StepperOrientation>,
     default: 'vertical',
+    description: 'Layout direction: vertical (sidebar) or horizontal.',
   },
   labelPlacement: {
     type: String as PropType<StepperLabelPlacement>,
     default: 'end',
+    description: 'Where labels sit relative to indicators in horizontal mode.',
   },
   linear: {
     type: Boolean,
     default: true,
+    description: 'Require prior steps to be completed before navigating ahead.',
   },
   interactive: {
     type: Boolean,
     default: true,
+    description: 'Allow clicking step indicators to navigate.',
+  },
+  editable: optionalBooleanProp('Allow revisiting completed steps (shows edit icon).'),
+  disabled: {
+    type: Boolean,
+    description: 'Disables all step navigation.',
+  },
+  loading: {
+    type: Boolean,
+    description: 'Blocks navigation while an async step action runs.',
+  },
+  iconComplete: {
+    type: String,
+    description: 'Icon for completed steps.',
+  },
+  iconError: {
+    type: String,
+    description: 'Icon for steps in an error state.',
+  },
+  iconEdit: {
+    type: String,
+    description: 'Icon for editable completed steps.',
   },
-  editable: optionalBooleanProp(),
-  disabled: Boolean,
-  loading: Boolean,
-  iconComplete: String,
-  iconError: String,
-  iconEdit: String,
 }
 
 export type StepperStepStatus = 'upcoming' | 'active' | 'complete' | 'error'
@@ -105,6 +135,24 @@ export interface StepperTheme extends ThemeComponent<StepperProps, InternalClass
 export default {
   name: 'XStepper',
   validators,
+  docs: {
+    slots: {
+      'content-prefix': 'Content rendered above the active step panel.',
+      '[stepValue]': 'Panel content for a step; slot name matches `step.value`.',
+      'summary-[stepValue]': 'Sidebar summary for a completed step (vertical orientation).',
+    },
+    emits: {
+      'update:modelValue': 'Active step value (`v-model`).',
+      change: 'Emitted when the active step changes; payload is `(value, index)`.',
+      'step-complete': 'Emitted when a step is marked complete via `next()`; payload is `(value, index)`.',
+    },
+    methods: {
+      next: 'Advance to the next step after validation.',
+      prev: 'Go to the previous step.',
+      goTo: 'Navigate to a step by value or index when allowed.',
+      reset: 'Clear completion state and return to the first step.',
+    },
+  },
 }
 </script>