@indielayer/ui 1.18.1 → 2.1.0

package/src/common/inputGroupRadius.ts

@@ -0,0 +1,11 @@
+export type InputGroupPosition = 'only' | 'first' | 'middle' | 'last'
+
+export function inputGroupRadiusClasses(position?: InputGroupPosition | null) {
+  if (!position) return []
+
+  if (position === 'only') return ['rounded-md']
+  if (position === 'first') return ['rounded-l-md', 'rounded-r-none']
+  if (position === 'last') return ['rounded-r-md', 'rounded-l-none']
+
+  return ['rounded-none']
+}

package/src/common/props.ts

@@ -0,0 +1,35 @@
+import type { Prop } from 'vue'
+
+/**
+ * Optional boolean prop that stays `undefined` when omitted.
+ * Use for props that participate in app-level `defaults` (see `resolvePropsWithDefaults`).
+ *
+ * Migrate: visual variants (outlined, ghost, light, flat, rounded, glow, filled, shadow, underline),
+ * layout (block, dense, vertical, striped), and feature toggles users may default app-wide
+ * (clearable, filterable, removable, selectable).
+ *
+ * Do not migrate: state/behavior (disabled, loading, required, error, readonly, indeterminate),
+ * controlled values (modelValue, shown, expanded, active, selected), or props that already
+ * declare `default: true/false` in defineProps.
+ *
+ * Plain `Boolean` props are cast to `false` when absent in Vue 3.
+ * @see https://vuejs.org/guide/components/props.html#boolean-casting
+ */
+export function optionalBooleanProp(description?: string): Prop<boolean | undefined> {
+  return {
+    type: Boolean,
+    default: undefined,
+    ...(description ? { description } : {}),
+  } as Prop<boolean | undefined>
+}
+
+/** Shared variant booleans for Button and ButtonGroup. */
+export const variantBooleanProps = () => ({
+  outlined: optionalBooleanProp('Outline style with a transparent fill.'),
+  rounded: optionalBooleanProp('Fully rounded corners (pill shape).'),
+  glow: optionalBooleanProp('Soft colored glow behind the control.'),
+  ghost: optionalBooleanProp('Minimal style with no background until hover.'),
+  light: optionalBooleanProp('Tinted background using the color at low opacity.'),
+  flat: optionalBooleanProp('Removes elevation and border emphasis.'),
+  block: optionalBooleanProp('Stretches to the full width of the parent.'),
+})

package/src/componentDefaults.ts

@@ -0,0 +1,19 @@
+/** Variant booleans use `optionalBooleanProp()` from `./common/props` so app `defaults` apply when omitted. */
+import type { ComponentThemes } from './theme'
+import type { AlertProps } from './components/alert/Alert.vue'
+import type { ButtonProps } from './components/button/Button.vue'
+import type { CardProps } from './components/card/Card.vue'
+import type { InputProps } from './components/input/Input.vue'
+
+type ComponentDefaultsMap = {
+  Alert: AlertProps;
+  Button: ButtonProps;
+  Card: CardProps;
+  Input: InputProps;
+}
+
+export type ComponentDefaults = {
+  [K in keyof ComponentDefaultsMap]?: Partial<ComponentDefaultsMap[K]>;
+} & {
+  [K in Exclude<keyof ComponentThemes, keyof ComponentDefaultsMap>]?: Record<string, unknown>;
+}

package/src/components/accordion/Accordion.vue

@@ -1,17 +1,30 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const accordionProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
+  },
+  disabled: {
+    type: Boolean,
+    description: 'Disables all accordion items when set.',
   },
-  disabled: Boolean,
-  expanded: Boolean,
+  expanded: optionalBooleanProp('Default expanded state passed to child items.'),
   showIcon: {
     type: Boolean,
     default: true,
+    description: 'Shows the expand/collapse icon on child items.',
+  },
+  icon: {
+    type: String,
+    description: 'Default expand/collapse icon name for child items.',
+  },
+  iconAlign: {
+    type: String as PropType<AccordionItemAlign>,
+    description: 'Default icon alignment for child items (left or right).',
   },
-  icon: String,
-  iconAlign: String as PropType<AccordionItemAlign>,
 }
 
 export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>
@@ -26,6 +39,11 @@ export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalC
 export default {
   name: 'XAccordion',
   validators: {},
+  docs: {
+    slots: {
+      default: 'Accordion items (typically x-accordion-item children).',
+    },
+  },
 }
 </script>
 

package/src/components/accordion/AccordionItem.vue

@@ -1,20 +1,31 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const accordionItemAlign = ['left', 'right'] as const
 const accordionItemProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
+  },
+  disabled: {
+    type: Boolean,
+    description: 'Prevents expanding and collapsing.',
   },
-  disabled: Boolean,
-  expanded: Boolean,
+  expanded: optionalBooleanProp('Whether the item content starts expanded.'),
   showIcon: {
     type: Boolean,
     default: true,
+    description: 'Shows the expand/collapse icon.',
+  },
+  icon: {
+    type: String,
+    description: 'Custom expand/collapse icon name. Falls back to a chevron.',
   },
-  icon: String,
   iconAlign: {
     type: String as PropType<AccordionItemAlign>,
     default: 'right',
+    description: 'Icon placement relative to the header (left or right).',
   },
 }
 
@@ -33,6 +44,22 @@ export default {
   validators: {
     iconAlign: accordionItemAlign,
   },
+  docs: {
+    slots: {
+      default: 'Header label. Slot props: expand, collapsed.',
+      summary: 'Optional summary below the header. Slot props: expand, collapsed.',
+      content: 'Collapsible body. Slot props: expand, collapsed.',
+    },
+    emits: {
+      expand: 'Emitted when expand() is called from a slot.',
+      change: 'Emitted when expanded state changes. Payload is the new expanded boolean.',
+    },
+    methods: {
+      toggle: 'Toggle expanded state when not disabled.',
+      open: 'Expand the item. Pass false to skip animation.',
+      close: 'Collapse the item. Pass false to skip animation.',
+    },
+  },
 }
 </script>
 

package/src/components/alert/Alert.vue

@@ -1,13 +1,21 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const alertType = ['info', 'success', 'error', 'warning'] as const
 const alertProps = {
   ...useColors.props(),
-  type: String as PropType<AlertType>,
-  glow: Boolean,
-  light: Boolean,
-  outlined: Boolean,
-  removable: Boolean,
-  closeLabel: String,
+  type: {
+    type: String as PropType<AlertType>,
+    description: 'Semantic alert type (info, success, error, warning). Controls the default icon.',
+  },
+  glow: optionalBooleanProp('Soft colored glow behind the alert.'),
+  light: optionalBooleanProp('Tinted background using the color at low opacity.'),
+  outlined: optionalBooleanProp('Outline style with a transparent fill.'),
+  removable: optionalBooleanProp('Shows a close control that emits `remove`.'),
+  closeLabel: {
+    type: String,
+    description: 'Accessible label for the remove button.',
+  },
 }
 
 export type AlertType = typeof alertType[number]
@@ -21,31 +29,43 @@ export default {
   validators: {
     type: alertType,
   },
+  docs: {
+    slots: {
+      default: 'Alert message content.',
+      icon: 'Custom icon; overrides the type-based icon.',
+      removeIcon: 'Custom icon for the remove button.',
+    },
+    emits: {
+      remove: 'Emitted when the remove button is clicked.',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
 import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useColors } from '../../composables/useColors'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { closeIcon, successIcon, errorIcon, warningIcon, infoIcon } from '../../common/icons'
 
 import XIcon from '../icon/Icon.vue'
 
 const props = defineProps(alertProps)
+const resolvedProps = useResolvedComponentProps('Alert', props)
 
 defineEmits(['remove'])
 
 const icon = computed(() => {
-  if (props.type === 'info') return infoIcon
-  else if (props.type === 'success') return successIcon
-  else if (props.type === 'error') return errorIcon
-  else if (props.type === 'warning') return warningIcon
+  if (resolvedProps.value.type === 'info') return infoIcon
+  else if (resolvedProps.value.type === 'success') return successIcon
+  else if (resolvedProps.value.type === 'error') return errorIcon
+  else if (resolvedProps.value.type === 'warning') return warningIcon
 
   return ''
 })
 
-const { styles, classes, className } = useTheme('Alert', {}, props)
+const { styles, classes, className } = useTheme('Alert', {}, resolvedProps)
 </script>
 
 <template>
@@ -54,14 +74,14 @@ const { styles, classes, className } = useTheme('Alert', {}, props)
     :class="[
       className,
       $style['alert'],
-      glow ? $style['alert--glow'] : '',
+      resolvedProps.glow ? $style['alert--glow'] : '',
       classes.wrapper,
     ]"
   >
 
     <slot name="icon">
       <x-icon
-        v-if="type"
+        v-if="resolvedProps.type"
         :icon="icon"
         class="text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
       />
@@ -70,9 +90,9 @@ const { styles, classes, className } = useTheme('Alert', {}, props)
     <div>
       <slot></slot>
     </div>
-    <template v-if="removable">
-      <div class="flex-grow"></div>
-      <button type="button" class="shrink-0" :aria-label="closeLabel" @click="(e: Event) => $emit('remove', e)">
+    <template v-if="resolvedProps.removable">
+      <div class="grow"></div>
+      <button type="button" class="shrink-0" :aria-label="resolvedProps.closeLabel" @click="(e: Event) => $emit('remove', e)">
         <slot name="removeIcon">
           <x-icon :icon="closeIcon"/>
         </slot>
@@ -81,21 +101,21 @@ const { styles, classes, className } = useTheme('Alert', {}, props)
   </div>
 </template>
 
-<style lang="postcss" module>
+<style module>
 .alert {
   color: var(--x-alert-text);
   background-color: var(--x-alert-bg);
   border-color: var(--x-alert-border);
+}
 
-  &--glow {
-    box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-alert-glow), 0 4px 6px -4px var(--x-alert-glow);
-  }
+.alert--glow {
+  box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-alert-glow), 0 4px 6px -4px var(--x-alert-glow);
+}
 
-  :global(.dark) &,
-  &:global(.dark) {
-    color: var(--x-alert-dark-text, var(--x-alert-text));
-    background-color: var(--x-alert-dark-bg, var(--x-alert-bg));
-    border-color: var(--x-alert-dark-border, var(--x-alert-border));
-  }
+:global(.dark) .alert,
+.alert:global(.dark) {
+  color: var(--x-alert-dark-text, var(--x-alert-text));
+  background-color: var(--x-alert-dark-bg, var(--x-alert-bg));
+  border-color: var(--x-alert-dark-border, var(--x-alert-border));
 }
 </style>

package/src/components/avatar/Avatar.vue

@@ -1,16 +1,28 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const avatarProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
+  },
+  name: {
+    type: String,
+    description: 'Display name used to derive initials when no image is loaded.',
+  },
+  alt: {
+    type: String,
+    description: 'Alt text for the image when `image` is set.',
+  },
+  image: {
+    type: String,
+    description: 'Image URL. Falls back to initials or the avatar icon if unloadable.',
   },
-  name: String,
-  alt: String,
-  image: String,
-  outlined: Boolean,
-  rounded: Boolean,
+  outlined: optionalBooleanProp('Outline style with a transparent fill.'),
+  rounded: optionalBooleanProp('Fully rounded corners (circle).'),
 }
 
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>
@@ -22,6 +34,11 @@ export interface AvatarTheme extends ThemeComponent<AvatarProps, InternalClasses
 export default {
   name: 'XAvatar',
   validators: useCommon.validators(),
+  docs: {
+    slots: {
+      avatarIcon: 'Fallback icon when no name or image is available.',
+    },
+  },
 }
 </script>
 
@@ -92,7 +109,7 @@ const { styles, classes, className } = useTheme('Avatar', {}, props, { source })
   </component>
 </template>
 
-<style lang="postcss" module>
+<style module>
 .avatar {
   color: var(--x-avatar-text);
   background-color: var(--x-avatar-bg);

package/src/components/badge/Badge.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const badgeAlign = ['left', 'right'] as const
 const badgePosition = ['top', 'bottom'] as const
 const badgeProps = {
@@ -7,23 +9,36 @@ const badgeProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
   position: {
     type: String as PropType<BadgePosition>,
     default: 'top',
+    description: 'Vertical placement of the badge relative to the content (top, bottom).',
   },
   align: {
     type: String as PropType<BadgeAlign>,
     default: 'right',
+    description: 'Horizontal placement of the badge relative to the content (left, right).',
+  },
+  offsetX: {
+    type: [Number, String],
+    description: 'Horizontal offset in pixels from the aligned edge.',
+  },
+  offsetY: {
+    type: [Number, String],
+    description: 'Vertical offset in pixels from the positioned edge.',
+  },
+  animated: optionalBooleanProp('Adds a ping animation around the badge.'),
+  outlined: optionalBooleanProp('Adds a border around the badge.'),
+  icon: {
+    type: String,
+    description: 'Icon name for the badge indicator. Prefer the content slot for custom content.',
   },
-  offsetX: [Number, String],
-  offsetY: [Number, String],
-  animated: Boolean,
-  outlined: Boolean,
-  icon: String,
   show: {
     type: Boolean,
     default: true,
+    description: 'Controls whether the badge indicator is visible.',
   },
 }
 
@@ -41,16 +56,24 @@ export default {
     position: badgePosition,
     align: badgeAlign,
   },
+  docs: {
+    slots: {
+      default: 'Content the badge is attached to.',
+      content: 'Badge label or custom indicator content.',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
 import { computed, useSlots, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useCommon } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 
 const props = defineProps(badgeProps)
+const resolvedProps = useResolvedComponentProps('Badge', props)
 
 const slots = useSlots()
 
@@ -62,7 +85,7 @@ const positionClasses = computed(() => {
   if (props.align === 'left') classes.push('left-0')
   if (props.align === 'right') classes.push('right-0')
   if (slots.content) classes.push('-m-[7.5%]')
-  else if (props.outlined) {
+  else if (resolvedProps.value.outlined) {
     classes.push('-m-[5%]')
   } else {
     classes.push('-m-[3.5%]')

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -1,14 +1,23 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const breadcrumbsProps = {
   ...useColors.props(),
-  items: Array as PropType<BreadcrumbsItem[]>,
+  items: {
+    type: Array as PropType<BreadcrumbsItem[]>,
+    description: 'Breadcrumb items with label and optional to, href, icon, and style overrides.',
+  },
   separator: {
     type: String,
     default: '/',
+    description: 'Text separator between items when `icon` is not set.',
   },
-  icon: String,
-  shadow: Boolean,
-  underline: Boolean,
+  icon: {
+    type: String,
+    description: 'Icon name used as the separator between items.',
+  },
+  shadow: optionalBooleanProp('Applies the link shadow style to items.'),
+  underline: optionalBooleanProp('Underlines item links.'),
 }
 
 export type BreadcrumbsItem = {
@@ -25,7 +34,10 @@ export type BreadcrumbsProps = ExtractPublicPropTypes<typeof breadcrumbsProps>
 type InternalClasses = 'wrapper' | 'item' | 'separator'
 export interface BreadcrumbsTheme extends ThemeComponent<BreadcrumbsProps, InternalClasses> {}
 
-export default { name: 'XBreadcrumbs' }
+export default {
+  name: 'XBreadcrumbs',
+  docs: {},
+}
 </script>
 
 <script setup lang="ts">