@indielayer/ui 2.0.0 → 2.1.0

package/src/components/button/Button.vue

@@ -9,15 +9,38 @@ const buttonProps = {
   tag: {
     type: String,
     default: 'button',
+    description: 'Root element tag. Becomes a router-link when `to` is set.',
   },
   type: {
     type: String,
     default: 'button',
+    description: 'Native button type when `tag` is `button` (button, submit, reset).',
+  },
+  icon: {
+    type: String,
+    description: 'Shortcut for `iconLeft`.',
+  },
+  iconLeft: {
+    type: String,
+    description: 'Icon name shown before the label.',
+  },
+  iconRight: {
+    type: String,
+    description: 'Icon name shown after the label.',
+  },
+  to: {
+    type: [String, Object],
+    description: 'Vue Router location; renders as a link when set.',
+  },
+  tooltip: {
+    type: String,
+    description: 'Tooltip text shown on hover. Prefer the tooltip slot for custom content.',
+  },
+  tooltipPosition: {
+    type: String as PropType<TooltipPosition>,
+    default: 'top',
+    description: 'Tooltip placement relative to the button.',
   },
-  icon: String,
-  iconLeft: String,
-  iconRight: String,
-  to: [String, Object],
 }
 
 export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
@@ -25,6 +48,8 @@ export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
 type InternalClasses = 'wrapper' | 'iconLeft' | 'iconRight'
 type InternalExtraData = {
   isButtonGroup: boolean;
+  buttonGroupPosition: import('../../common/buttonGroupRadius').ButtonGroupPosition | undefined;
+  buttonGroupRounded: boolean;
   isInsideInputGroup: boolean;
   inputGroupPosition: import('../../common/inputGroupRadius').InputGroupPosition | undefined;
 }
@@ -35,11 +60,21 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Button label and content.',
+      tooltip: 'Custom tooltip content; overrides the `tooltip` prop.',
+    },
+    methods: {
+      focus: 'Focus the underlying control.',
+      blur: 'Remove focus from the underlying control.',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, ref, inject, onMounted, onUnmounted, useAttrs, unref, type ExtractPublicPropTypes } from 'vue'
+import { computed, ref, inject, onMounted, onUnmounted, useAttrs, useSlots, unref, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useColors } from '../../composables/useColors'
@@ -49,15 +84,23 @@ import { injectButtonGroupKey, injectInputGroupKey } from '../../composables/key
 
 import XLoader from '../loader/Loader.vue'
 import XIcon from '../icon/Icon.vue'
+import XTooltip from '../tooltip/Tooltip.vue'
+
+import type { TooltipPosition } from '../tooltip/Tooltip.vue'
 
 const props = defineProps(buttonProps)
 const resolvedProps = useResolvedComponentProps('Button', props)
+const slots = useSlots()
 
 const elRef = ref<HTMLElement | null>(null)
 
 const buttonGroup = inject(injectButtonGroupKey, {
   isButtonGroup: false,
   groupProps: {},
+  registerChild: () => {},
+  unregisterChild: () => {},
+  getPosition: () => 'only' as const,
+  childOrder: computed(() => []),
 })
 
 const inputGroup = inject(injectInputGroupKey, {
@@ -74,14 +117,24 @@ const inputGroup = inject(injectInputGroupKey, {
 const childId = `btn-${Math.random().toString(36).slice(2)}`
 
 onMounted(() => {
+  if (buttonGroup.isButtonGroup) buttonGroup.registerChild(childId)
   if (inputGroup.isInsideInputGroup) inputGroup.registerChild(childId)
 })
 
 onUnmounted(() => {
+  if (buttonGroup.isButtonGroup) buttonGroup.unregisterChild(childId)
   if (inputGroup.isInsideInputGroup) inputGroup.unregisterChild(childId)
 })
 
 const { isButtonGroup } = buttonGroup
+const buttonGroupPosition = computed(() => {
+  if (!buttonGroup.isButtonGroup) return undefined
+
+  void buttonGroup.childOrder.value
+
+  return buttonGroup.getPosition(childId)
+})
+const buttonGroupRounded = computed(() => !!buttonGroup.groupProps?.rounded)
 const isInsideInputGroup = computed(() => inputGroup.isInsideInputGroup)
 const inputGroupPosition = computed(() => {
   if (!inputGroup.isInsideInputGroup) return undefined
@@ -111,6 +164,23 @@ const computedIconLeft = computed(() => props.icon || props.iconLeft)
 const attrs = useAttrs()
 const htmlTag = computed(() => (attrs.href ? 'a' : props.to ? 'router-link' : props.tag))
 
+const hasTooltip = computed(() => !!(props.tooltip || slots.tooltip))
+const isIconOnly = computed(() => !slots.default)
+const ariaLabel = computed(() => {
+  const fromAttrs = attrs['aria-label']
+
+  if (fromAttrs !== undefined && fromAttrs !== null) return fromAttrs as string
+  if (isIconOnly.value && props.tooltip) return props.tooltip
+
+  return undefined
+})
+const tooltipWrapperClass = computed(() => {
+  if (resolvedProps.value.block) return 'block w-full'
+  if (isButtonGroup) return 'inline-flex self-stretch'
+
+  return undefined
+})
+
 const computedProps = computed(() => ({
   size: unref(computedSize),
   flat: unref(computedFlat),
@@ -129,6 +199,8 @@ const computedProps = computed(() => ({
 
 const { className, classes, styles } = useTheme('Button', {}, computedProps, {
   isButtonGroup,
+  buttonGroupPosition,
+  buttonGroupRounded,
   isInsideInputGroup,
   inputGroupPosition,
 })
@@ -139,8 +211,71 @@ defineExpose({ focus, blur })
 </script>
 
 <template>
+  <x-tooltip
+    v-if="hasTooltip"
+    :position="tooltipPosition"
+    :class="tooltipWrapperClass"
+  >
+    <template #tooltip>
+      <slot name="tooltip">
+        {{ tooltip }}
+      </slot>
+    </template>
+    <component
+      :is="htmlTag"
+      ref="elRef"
+      :to="to"
+      :class="[
+        className,
+        $style['button'],
+        (resolvedProps.glow && !computedDisabled && !loading) ? $style['button--glow'] : '',
+        classes.wrapper,
+        {
+          'w-full': resolvedProps.block,
+          'h-full': isButtonGroup,
+        }
+      ]"
+      :style="styles"
+      :aria-label="ariaLabel"
+      :aria-busy="loading ? 'true' : null"
+      :aria-disabled="tag !== 'button' && computedDisabled ? 'true' : null"
+      :disabled="computedDisabled || loading"
+      :type="tag === 'button' ? type : null"
+    >
+      <x-loader
+        v-if="loading"
+        class="absolute"
+        :size="computedSize"
+        :label="loadingLabel"
+        :status="loadingStatus"
+      />
+      <div class="inline-flex items-center justify-center" :class="{ 'invisible': loading }">
+        <x-icon
+          v-if="computedIconLeft"
+          :size="computedSize"
+          :icon="computedIconLeft"
+          :class="[
+            classes.iconLeft,
+          ]"
+        />
+        <span>
+          <slot></slot>
+        </span>
+      </div>
+      <x-icon
+        v-if="iconRight"
+        :size="computedSize"
+        :icon="iconRight"
+        :class="[
+          classes.iconRight,
+          { 'invisible': loading },
+        ]"
+      />
+    </component>
+  </x-tooltip>
   <component
     :is="htmlTag"
+    v-else
     ref="elRef"
     :to="to"
     :class="[

package/src/components/button/ButtonGroup.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { variantBooleanProps } from '../../common/props'
+import type { ButtonGroupPosition } from '../../common/buttonGroupRadius'
 
 const buttonGroupProps = {
   ...useCommon.props(),
@@ -9,6 +10,7 @@ const buttonGroupProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag for the group wrapper.',
   },
 }
 
@@ -16,6 +18,10 @@ export type ButtonGroupProps = ExtractPublicPropTypes<typeof buttonGroupProps>
 export type ButtonGroupInjection = {
   groupProps: ButtonGroupProps;
   isButtonGroup: boolean;
+  registerChild: (id: string) => void;
+  unregisterChild: (id: string) => void;
+  getPosition: (id: string) => ButtonGroupPosition;
+  childOrder: ComputedRef<string[]>;
 }
 
 type InternalClasses = 'wrapper'
@@ -27,11 +33,16 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Grouped buttons (typically x-button children).',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { provide, type ExtractPublicPropTypes } from 'vue'
+import { provide, ref, computed, type ExtractPublicPropTypes, type ComputedRef } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useCommon } from '../../composables/useCommon'
@@ -42,9 +53,38 @@ import { injectButtonGroupKey } from '../../composables/keys'
 const props = defineProps(buttonGroupProps)
 const resolvedProps = useResolvedComponentProps('ButtonGroup', props)
 
+const childOrder = ref<string[]>([])
+const childOrderReadonly = computed(() => childOrder.value)
+
+function getPosition(id: string): ButtonGroupPosition {
+  const order = childOrderReadonly.value
+  const index = order.indexOf(id)
+
+  if (index === -1 || order.length === 0) return 'only'
+  if (order.length === 1) return 'only'
+  if (index === 0) return 'first'
+  if (index === order.length - 1) return 'last'
+
+  return 'middle'
+}
+
+function registerChild(id: string) {
+  if (!childOrder.value.includes(id)) {
+    childOrder.value = [...childOrder.value, id]
+  }
+}
+
+function unregisterChild(id: string) {
+  childOrder.value = childOrder.value.filter((n) => n !== id)
+}
+
 provide(injectButtonGroupKey, {
   groupProps: props,
   isButtonGroup: true,
+  registerChild,
+  unregisterChild,
+  getPosition,
+  childOrder: childOrderReadonly,
 })
 
 const { className, classes, styles } = useTheme('ButtonGroup', {}, resolvedProps)
@@ -56,33 +96,9 @@ const { className, classes, styles } = useTheme('ButtonGroup', {}, resolvedProps
     :style="styles"
     :class="[
       className,
-      $style['button-group'],
-      resolvedProps.rounded ? $style['button-group--rounded'] : '',
       classes.wrapper
     ]"
   >
     <slot></slot>
   </component>
 </template>
-
-<style module>
-.button-group:not(.button-group--rounded) > :first-child {
-  border-start-start-radius: var(--radius-md);
-  border-end-start-radius: var(--radius-md);
-}
-
-.button-group:not(.button-group--rounded) > :last-child {
-  border-start-end-radius: var(--radius-md);
-  border-end-end-radius: var(--radius-md);
-}
-
-.button-group--rounded > :first-of-type {
-  border-start-start-radius: 9999px;
-  border-end-start-radius: 9999px;
-}
-
-.button-group--rounded > :last-child {
-  border-start-end-radius: 9999px;
-  border-end-end-radius: 9999px;
-}
-</style>

package/src/components/button/__tests__/ Button.spec.ts

@@ -8,4 +8,45 @@ describe('Button', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('passes tooltip to the tooltip wrapper', () => {
+    const wrapper = mount(Button, {
+      props: { icon: 'check', tooltip: 'Save' },
+      global: {
+        stubs: {
+          XIcon: true,
+          XLoader: true,
+          XTooltip: {
+            props: ['position'],
+            template: `
+              <div class="tooltip-stub">
+                <slot />
+                <div class="tooltip-content"><slot name="tooltip" /></div>
+              </div>
+            `,
+          },
+        },
+      },
+    })
+
+    expect(wrapper.find('.tooltip-content').text()).toBe('Save')
+    expect(wrapper.find('[aria-label="Save"]').exists()).toBe(true)
+  })
+
+  it('does not wrap in tooltip when tooltip is absent', () => {
+    const wrapper = mount(Button, {
+      props: { icon: 'check' },
+      global: {
+        stubs: {
+          XIcon: true,
+          XLoader: true,
+          XTooltip: {
+            template: '<div class="tooltip-stub"><slot /></div>',
+          },
+        },
+      },
+    })
+
+    expect(wrapper.find('.tooltip-stub').exists()).toBe(false)
+  })
 })

package/src/components/button/__tests__/ ButtonGroup.spec.ts

@@ -1,6 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { h, defineComponent } from 'vue'
 import ButtonGroup from '../ButtonGroup.vue'
+import Button from '../Button.vue'
+import { injectThemeKey } from '../../../composables/keys'
+import BaseTheme from '../../../themes/base'
 
 describe('ButtonGroup', () => {
   it('renders without errors', () => {
@@ -8,4 +12,32 @@ describe('ButtonGroup', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('applies end radius to the last button even when wrapped', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(ButtonGroup, null, {
+          default: () => [
+            h(Button, null, () => 'Add New'),
+            h('div', { class: 'wrapper' }, [h(Button, { icon: 'chevron-down' })]),
+          ],
+        })
+      },
+    })
+
+    const wrapper = mount(Wrapper, {
+      global: {
+        provide: {
+          [injectThemeKey as symbol]: BaseTheme,
+        },
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons[0].classes().some((c) => c.includes('rounded-s'))).toBe(true)
+    expect(buttons[1].classes().some((c) => c.includes('rounded-e'))).toBe(true)
+  })
 })

package/src/components/button/theme/Button.base.theme.ts

@@ -1,5 +1,6 @@
 import type { ButtonTheme } from '../Button.vue'
 import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
+import { buttonGroupRadiusClasses } from '../../../common/buttonGroupRadius'
 
 const theme: ButtonTheme = {
   classes: {
@@ -9,7 +10,9 @@ const theme: ButtonTheme = {
       // radius
       if (data.isInsideInputGroup) {
         classes.push(...inputGroupRadiusClasses(data.inputGroupPosition))
-      } else if (!data.isButtonGroup) {
+      } else if (data.isButtonGroup) {
+        classes.push(...buttonGroupRadiusClasses(data.buttonGroupPosition, data.buttonGroupRounded))
+      } else {
         classes.push(props.rounded ? 'rounded-full' : 'rounded-md')
       }
 

package/src/components/button/theme/Button.carbon.theme.ts

@@ -1,5 +1,6 @@
 import type { ButtonTheme } from '../Button.vue'
 import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
+import { buttonGroupRadiusClasses } from '../../../common/buttonGroupRadius'
 
 const theme: ButtonTheme = {
   classes: {
@@ -9,10 +10,10 @@ const theme: ButtonTheme = {
       // radius
       if (data.isInsideInputGroup) {
         classes.push(...inputGroupRadiusClasses(data.inputGroupPosition))
-      } else if (!data.isButtonGroup) {
-        classes.push(props.rounded ? 'rounded-full' : '')
-      } else {
-        classes.push('!rounded-none')
+      } else if (data.isButtonGroup) {
+        classes.push(...buttonGroupRadiusClasses(data.buttonGroupPosition, data.buttonGroupRounded).map((c) => `!${c}`))
+      } else if (props.rounded) {
+        classes.push('rounded-full')
       }
 
       // size

package/src/components/card/Card.vue

@@ -5,8 +5,9 @@ const cardProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
-  flat: optionalBooleanProp(),
+  flat: optionalBooleanProp('Removes elevation and border emphasis.'),
 }
 
 export type CardProps = ExtractPublicPropTypes<typeof cardProps>
@@ -14,7 +15,14 @@ export type CardProps = ExtractPublicPropTypes<typeof cardProps>
 type InternalClasses = 'wrapper'
 export interface CardTheme extends ThemeComponent<CardProps, InternalClasses> {}
 
-export default { name: 'XCard' }
+export default {
+  name: 'XCard',
+  docs: {
+    slots: {
+      default: 'Card content.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">

package/src/components/carousel/Carousel.vue

@@ -6,20 +6,26 @@ const carouselEffects = ['slide'] as const
 export type CarouselEffect = typeof carouselEffects[number]
 
 const carouselProps = {
-  autoplay: optionalBooleanProp(),
+  autoplay: optionalBooleanProp('Advances slides automatically.'),
   delay: {
     type: Number,
     default: 5000,
+    description: 'Autoplay interval in milliseconds.',
   },
   showDots: {
     type: Boolean,
     default: true,
+    description: 'Shows pagination dots under the slides.',
   },
   effect: {
     type: String as PropType<CarouselEffect>,
     default: 'slide',
+    description: 'Transition effect between slides.',
+  },
+  classDots: {
+    type: [Array, String],
+    description: 'Extra class(es) on the default dots container.',
   },
-  classDots: [Array, String],
 }
 
 export type CarouselProps = ExtractPublicPropTypes<typeof carouselProps>
@@ -34,6 +40,20 @@ export interface CarouselTheme extends ThemeComponent<CarouselProps, InternalCla
 export default {
   name: 'XCarousel',
   validators: {},
+  docs: {
+    slots: {
+      default: 'Slides (typically x-carousel-slide). Slot props: to, next, prev, current, total.',
+      dots: 'Custom pagination dots. Slot props: to, next, prev, current, total.',
+    },
+    emits: {
+      update: 'Emitted when the current slide index changes.',
+    },
+    methods: {
+      to: 'Go to a slide by zero-based index.',
+      next: 'Go to the next slide (wraps to the first).',
+      prev: 'Go to the previous slide (wraps to the last).',
+    },
+  },
 }
 </script>
 

package/src/components/carousel/CarouselSlide.vue

@@ -3,6 +3,7 @@ const carouselSlideProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
 }
 
@@ -13,6 +14,11 @@ export interface CarouselSlideTheme extends ThemeComponent<CarouselSlideProps, I
 
 export default {
   name: 'XCarouselSlide',
+  docs: {
+    slots: {
+      default: 'Slide content.',
+    },
+  },
 }
 </script>
 

package/src/components/checkbox/Checkbox.vue

@@ -6,9 +6,15 @@ const checkboxProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  value: [String, Number],
-  indeterminate: Boolean,
-  glow: optionalBooleanProp(),
+  value: {
+    type: [String, Number],
+    description: 'Value used when the checkbox is inside an x-form-group (array selection).',
+  },
+  indeterminate: {
+    type: Boolean,
+    description: 'Shows an indeterminate (mixed) check state.',
+  },
+  glow: optionalBooleanProp('Soft colored glow behind the control.'),
 }
 
 export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>
@@ -22,6 +28,19 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Label content when the `label` prop is not set.',
+      icon: 'Custom checked-state icon.',
+    },
+    emits: {
+      ...useInputtable.emitDocs(false),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+      toggle: 'Toggle the checked state (no-op when disabled, loading, or readonly).',
+    },
+  },
 }
 </script>
 

package/src/components/container/Container.vue

@@ -3,10 +3,12 @@ const containerProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
   fluid: {
     type: Boolean,
     default: false,
+    description: 'Removes max-width constraints so the container spans the full parent width.',
   },
 }
 
@@ -15,7 +17,14 @@ export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>
 type InternalClasses = 'wrapper'
 export interface ContainerTheme extends ThemeComponent<ContainerProps, InternalClasses> {}
 
-export default { name: 'XContainer' }
+export default {
+  name: 'XContainer',
+  docs: {
+    slots: {
+      default: 'Container content.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">