@indielayer/ui 1.18.1 → 2.1.0

package/src/components/datepicker/__tests__/Datepicker.spec.ts

@@ -1,6 +1,16 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import Datepicker from '../Datepicker.vue'
+import { injectThemeKey } from '../../../composables/keys'
+import BaseTheme from '../../../themes/base'
+
+const themeProvide = {
+  global: {
+    provide: {
+      [injectThemeKey as symbol]: BaseTheme,
+    },
+  },
+}
 
 describe('Datepicker', () => {
   it('renders properly', () => {
@@ -8,4 +18,25 @@ describe('Datepicker', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('exposes teleport prop for the menu (null uses VueDatePicker default)', () => {
+    const wrapper = mount(Datepicker)
+
+    expect(wrapper.props('teleport')).toBe(null)
+  })
+
+  it('applies a theme class to the menu for teleported styles', () => {
+    const wrapper = mount(Datepicker, themeProvide)
+    const css = wrapper.find('style').text()
+    const match = css.match(/\.x-datepicker-menu-\d+/)
+
+    expect(match).toBeTruthy()
+    expect(css).toContain('--x-datepicker-')
+
+    const menuClass = match![0].slice(1)
+    const dp = wrapper.findComponent({ name: 'VueDatePicker' })
+
+    expect(dp.exists()).toBe(true)
+    expect(dp.props('ui').menu).toContain(menuClass)
+  })
 })

package/src/components/divider/Divider.vue

@@ -1,7 +1,12 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const dividerProps = {
-  label: String,
-  vertical: Boolean,
+  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>
@@ -9,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">
@@ -40,7 +48,6 @@ const { styles, classes, className } = useTheme('Divider', {}, props)
     ></div>
     <div
       v-if="label"
-      class="font-medium text-sm text-secondary-600 dark:text-secondary-300"
       :class="[
         classes.label,
         {

package/src/components/divider/theme/Divider.base.theme.ts

@@ -4,9 +4,9 @@ const theme: DividerTheme = {
   classes: {
     wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
 
-    label: 'font-medium text-xs text-slate-400 dark:text-secondary-300',
+    label: 'text-xs text-secondary-400',
 
-    line: 'bg-secondary-200 dark:bg-secondary-700 flex-grow',
+    line: 'bg-secondary-200 dark:bg-secondary-700 grow',
   },
 }
 

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

@@ -0,0 +1,101 @@
+<script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+import { emptyIcon } from '../../common/icons'
+
+const emptyProps = {
+  ...useCommon.props(),
+  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('Adds a border around the empty state.'),
+}
+
+export type EmptyProps = ExtractPublicPropTypes<typeof emptyProps>
+
+type InternalClasses = 'wrapper' | 'bordered' | 'icon' | 'title' | 'description' | 'actions'
+export interface EmptyTheme extends ThemeComponent<EmptyProps, InternalClasses> {}
+
+export default {
+  name: 'XEmpty',
+  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>
+
+<script setup lang="ts">
+import { computed, type ExtractPublicPropTypes } from 'vue'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon, type Size } from '../../composables/useCommon'
+import XIcon from '../icon/Icon.vue'
+
+const sizeOrder: Size[] = ['xs', 'sm', 'md', 'lg', 'xl']
+
+const props = defineProps(emptyProps)
+const resolvedProps = useResolvedComponentProps('Empty', props)
+
+const iconSize = computed(() => {
+  const size = resolvedProps.value.size ?? 'md'
+  const index = sizeOrder.indexOf(size)
+  const nextIndex = index < 0 ? sizeOrder.indexOf('md') + 1 : Math.min(index + 1, sizeOrder.length - 1)
+
+  return sizeOrder[nextIndex]
+})
+
+const { styles, classes, className } = useTheme('Empty', {}, resolvedProps)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+      resolvedProps.bordered ? classes.bordered : '',
+    ]"
+  >
+    <slot name="icon">
+      <x-icon
+        v-if="resolvedProps.icon"
+        :icon="resolvedProps.icon"
+        :size="iconSize"
+        :class="classes.icon"
+      />
+    </slot>
+
+    <slot name="title">
+      <p v-if="resolvedProps.title" :class="classes.title">
+        {{ resolvedProps.title }}
+      </p>
+    </slot>
+
+    <slot name="description">
+      <p v-if="resolvedProps.description" :class="classes.description">
+        {{ resolvedProps.description }}
+      </p>
+    </slot>
+
+    <div v-if="$slots.actions" :class="classes.actions">
+      <slot name="actions" ></slot>
+    </div>
+  </div>
+</template>

package/src/components/empty/__tests__/Empty.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Empty from '../Empty.vue'
+
+describe('Empty', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Empty)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/empty/index.ts

@@ -0,0 +1,2 @@
+export { default as XEmpty } from './Empty.vue'
+export type { EmptyProps, EmptyTheme } from './Empty.vue'

package/src/components/empty/theme/Empty.base.theme.ts

@@ -0,0 +1,40 @@
+import type { EmptyTheme } from '../Empty.vue'
+
+function paddingForSize(size: string | undefined) {
+  if (size === 'xs' || size === 'sm') return 'p-4'
+  if (size === 'lg') return 'p-10'
+  if (size === 'xl') return 'p-12'
+
+  return 'p-8'
+}
+
+function titleClasses(size: string | undefined) {
+  if (size === 'xs') return 'text-xs font-medium text-secondary-700 dark:text-secondary-200'
+  if (size === 'sm') return 'text-sm font-medium text-secondary-700 dark:text-secondary-200'
+  if (size === 'lg') return 'text-lg font-semibold text-secondary-800 dark:text-secondary-100'
+  if (size === 'xl') return 'text-xl font-semibold text-secondary-800 dark:text-secondary-100'
+
+  return 'text-base font-medium text-secondary-700 dark:text-secondary-200'
+}
+
+function descriptionClasses(size: string | undefined) {
+  if (size === 'xs') return 'text-xs text-secondary-500 dark:text-secondary-400 max-w-xs'
+  if (size === 'sm') return 'text-sm text-secondary-500 dark:text-secondary-400 max-w-sm'
+  if (size === 'lg') return 'text-base text-secondary-500 dark:text-secondary-400 max-w-md'
+  if (size === 'xl') return 'text-lg text-secondary-500 dark:text-secondary-400 max-w-lg'
+
+  return 'text-sm text-secondary-500 dark:text-secondary-400 max-w-sm'
+}
+
+const theme: EmptyTheme = {
+  classes: {
+    wrapper: ({ props }) => `flex flex-col items-center justify-center text-center gap-2 ${paddingForSize(props.size)}`,
+    bordered: 'border border-dashed border-secondary-300 dark:border-secondary-600 rounded-lg w-full',
+    icon: 'text-secondary-400 dark:text-secondary-500 shrink-0',
+    title: ({ props }) => titleClasses(props.size),
+    description: ({ props }) => descriptionClasses(props.size),
+    actions: 'flex flex-wrap items-center justify-center gap-2 mt-2',
+  },
+}
+
+export default theme

package/src/components/empty/theme/Empty.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { EmptyTheme } from '../Empty.vue'
+
+import BaseTheme from './Empty.base.theme'
+
+const theme: EmptyTheme = BaseTheme
+
+export default theme

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,13 +5,18 @@ const formGroupProps = {
   vertical: {
     type: Boolean,
     default: false,
+    description: 'Stacks child controls vertically instead of in a row.',
   },
 }
 
 export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>
 
+export type FormGroupRegisterOptions = {
+  joined?: boolean;
+}
+
 export type FormGroupInjection = {
-  registerInputGroup: (name: string, focus: () => void) => void;
+  registerInputGroup: (name: string, focus: () => void, options?: FormGroupRegisterOptions) => void;
   unregisterInputGroup: (name: string) => void;
   setValue: (val: string | number | string[] | number[]) => void;
   value: MaybeRef<string | number | string[] | number[] | null | undefined>;
@@ -21,18 +26,31 @@ export type FormGroupInjection = {
 export type FormGroupInput = {
   name: string;
   focus: () => void;
+  joined?: boolean;
 }
 
 type InternalClasses = 'wrapper'
-export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {}
+type InternalExtraData = { hasJoinedLayout: boolean; }
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses, InternalExtraData> {}
 
 export default {
   name: 'XFormGroup',
+  docs: {
+    slots: {
+      default: 'Grouped inputs (radios, checkboxes, radio buttons, etc.).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { provide, computed, type ExtractPublicPropTypes, type MaybeRef } from 'vue'
+import { provide, computed, ref, type ExtractPublicPropTypes, type MaybeRef } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useInteractive } from '../../composables/useInteractive'
 import { useInputtable } from '../../composables/useInputtable'
@@ -44,6 +62,8 @@ import XInputFooter from '../inputFooter/InputFooter.vue'
 const props = defineProps(formGroupProps)
 
 const inputs: FormGroupInput[] = []
+const joinedInputCount = ref(0)
+const hasJoinedLayout = computed(() => joinedInputCount.value > 0)
 
 const value = computed<string | number | string[] | number[]>(() => {
   if (typeof props.modelValue === 'string') return props.modelValue
@@ -54,13 +74,17 @@ const value = computed<string | number | string[] | number[]>(() => {
 })
 
 provide(injectFormGroupKey, {
-  registerInputGroup: (name: string, focus: () => void) => {
-    inputs.push({ name, focus })
+  registerInputGroup: (name: string, focus: () => void, options?: FormGroupRegisterOptions) => {
+    inputs.push({ name, focus, joined: options?.joined })
+    if (options?.joined) joinedInputCount.value++
   },
   unregisterInputGroup: (name: string) => {
     const index = inputs.findIndex((i) => i.name === name)
 
-    inputs.splice(index, 1)
+    if (index !== -1) {
+      if (inputs[index]?.joined) joinedInputCount.value--
+      inputs.splice(index, 1)
+    }
   },
   setValue: (val) => {
     emit('update:modelValue', val)
@@ -96,7 +120,7 @@ function manualValidate() {
   if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
 }
 
-const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal })
+const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal, hasJoinedLayout })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>

package/src/components/formGroup/__tests__/FormGroup.spec.ts

@@ -1,11 +1,46 @@
+import { defineComponent, ref } from 'vue'
 import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
+import { injectThemeKey } from '../../../composables/keys'
+import BaseTheme from '../../../themes/base'
 import FormGroup from '../FormGroup.vue'
+import RadioButton from '../../radioButton/RadioButton.vue'
 
 describe('FormGroup', () => {
+  const themeProvide = {
+    global: {
+      provide: {
+        [injectThemeKey as symbol]: BaseTheme,
+      },
+    },
+  }
+
   it('renders without errors', () => {
-    const wrapper = mount(FormGroup)
+    const wrapper = mount(FormGroup, themeProvide)
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('uses joined layout when radio buttons register', async () => {
+    const Demo = defineComponent({
+      components: { XFormGroup: FormGroup, XRadioButton: RadioButton },
+      setup() {
+        const value = ref('a')
+
+        return { value }
+      },
+      template: `
+        <x-form-group v-model="value">
+          <x-radio-button value="a" label="A" />
+          <x-radio-button value="b" label="B" />
+        </x-form-group>
+      `,
+    })
+
+    const wrapper = mount(Demo, themeProvide)
+
+    await flushPromises()
+
+    expect(wrapper.find('.inline-flex').exists()).toBe(true)
+  })
 })

package/src/components/formGroup/theme/FormGroup.base.theme.ts

@@ -2,11 +2,15 @@ import type { FormGroupTheme } from '../FormGroup.vue'
 
 const theme: FormGroupTheme = {
   classes: {
-    wrapper: ({ props }) => {
+    wrapper: ({ props, data }) => {
       const classes = ['']
 
-      if (!props.vertical) classes.push('flex gap-4')
-      else classes.push('grid gap-1')
+      if (!props.vertical) {
+        if (data.hasJoinedLayout) classes.push('inline-flex align-middle relative -space-x-[1px]')
+        else classes.push('flex gap-4')
+      } else {
+        classes.push('grid gap-1')
+      }
 
       return classes
     },

package/src/components/formGroup/theme/FormGroup.carbon.theme.ts

@@ -2,11 +2,15 @@ import type { FormGroupTheme } from '../FormGroup.vue'
 
 const theme: FormGroupTheme = {
   classes: {
-    wrapper: ({ props }) => {
+    wrapper: ({ props, data }) => {
       const classes = ['']
 
-      if (!props.vertical) classes.push('flex gap-4')
-      else classes.push('grid gap-3')
+      if (!props.vertical) {
+        if (data.hasJoinedLayout) classes.push('inline-flex align-middle relative -space-x-[1px]')
+        else classes.push('flex gap-4')
+      } else {
+        classes.push('grid gap-3')
+      }
 
       return classes
     },

package/src/components/icon/Icon.vue

@@ -1,14 +1,18 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const iconProps = {
   ...useCommon.props(),
   icon: {
     type: String,
     required: true,
+    description: 'Icon name from the injected icon set, or raw SVG path markup.',
   },
-  filled: Boolean,
+  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.',
   },
 }
 
@@ -24,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/index.ts

@@ -11,12 +11,14 @@ export * from './container'
 export * from './datepicker'
 export * from './divider'
 export * from './drawer'
+export * from './empty'
 export * from './form'
 export * from './formGroup'
 export * from './icon'
 export * from './image'
 export * from './input'
 export * from './inputFooter'
+export * from './inputGroup'
 export * from './label'
 export * from './link'
 export * from './loader'
@@ -28,6 +30,7 @@ export * from './popover'
 export * from './progress'
 export * from './qrCode'
 export * from './radio'
+export * from './radioButton'
 export * from './scroll'
 export * from './select'
 export * from './skeleton'