@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/UiButton/UiButton.vue

@@ -0,0 +1,319 @@
+<template>
+  <component
+    :is="component.is"
+    v-bind="component.props"
+    :aria-label="!isLink ? labelFinal : undefined"
+    class="ui-button group align-center flex justify-center rounded-lg relative transition-all duration-150 focus-indicator-none"
+    :class="[
+      buttonClasses,
+      textClasses,
+      borderClasses,
+      { 'cursor-pointer': !finalDisabled },
+      { 'opacity-50 cursor-not-allowed': finalDisabled }
+    ]"
+    data-testid="ui-button"
+    @click="onClick"
+    @mouseenter="$emit('mouseenter')"
+    @mouseleave="$emit('mouseleave')"
+  >
+    <div
+      class="absolute h-full top-0 left-0 z-0 rounded-md w-full"
+      :class="[bgClasses, focusRingClasses]"
+    />
+    <div
+      class="button-overlay absolute h-full top-0 left-0 z-10 rounded-md w-full"
+      :class="overlayClasses"
+    />
+    <div
+      v-tooltip="tooltip"
+      class="button-wrapper flex items-center whitespace-nowrap h-full relative z-20"
+    >
+      <!-- Loader -->
+      <UiLoader
+        v-if="loading"
+        :size="size"
+        :class="{ 'mr-2': hasLabel }"
+      />
+
+      <!-- Content -->
+      <template
+        v-else-if="showIconLeft"
+      >
+        <div
+          v-if="iconSlot"
+          :class="[iconSizeClasses, { 'mr-2': hasLabel }]"
+          class="shrink-0"
+        >
+          <RenderSlot
+            :vnodes="iconSlot"
+          />
+        </div>
+        <div
+          v-else-if="imageSource"
+          :class="[iconSizeClasses, { 'mr-2': hasLabel }]"
+          class="shrink-0"
+        >
+          <img
+            :src="imageSource"
+            :alt="`${labelFinal} button image`"
+          >
+        </div>
+        <div
+          v-else-if="icon"
+          :class="[icon, iconSizeClasses, { 'mr-2': hasLabel }]"
+          class="shrink-0"
+        />
+      </template>
+      <span
+        class="content w-full"
+      >
+        <RenderSlot
+          :vnodes="defaultSlot"
+        />
+      </span>
+      <div
+        v-if="iconRight"
+        :class="[iconRight, iconSizeClasses, { 'ml-2': hasLabel }]"
+        class="shrink-0"
+      />
+    </div>
+  </component>
+</template>
+
+<script lang="ts">
+import { computed, getCurrentInstance, watch } from 'vue'
+import { useSlotsAsComponents, RenderSlot } from '../../utils/slot'
+import { SIZES, type Size } from '../../constants'
+import { useButtonStyles, BUTTON_COLORS, type ButtonVariant, type ButtonColor } from '../../composables/useButtonStyles'
+import UiLoader from '../UiLoader/UiLoader.vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export type Variant = ButtonVariant
+const COLORS = BUTTON_COLORS
+export type Color = ButtonColor
+
+export default {
+  components: {
+    RenderSlot,
+    UiLoader,
+  },
+
+  props: {
+    variant: {
+      type: String as () => Variant,
+      default: 'cta',
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator: (value: Size) => SIZES.includes(value),
+    },
+    color: {
+      type: String as () => Color,
+      default: 'primary',
+      validator: (value: Color) => COLORS.includes(value),
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    showIconLeft: {
+      type: Boolean,
+      default: true,
+    },
+    icon: {
+      type: [String, Boolean],
+      default: undefined,
+    },
+    label: {
+      type: String,
+      default: undefined,
+    },
+    iconRight: {
+      type: [String, Boolean],
+      default: undefined,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    imageSource: {
+      type: String,
+      default: undefined,
+    },
+    tooltip: {
+      type: [String, Object],
+      default: undefined,
+    },
+    type: {
+      type: String,
+      default: 'button',
+    },
+    href: {
+      type: String,
+      default: undefined,
+    },
+    to: {
+      type: Object as () => RouteLocationRaw,
+      default: undefined,
+    },
+  },
+
+  emits: [
+    'click',
+    'mouseenter',
+    'mouseleave',
+  ],
+
+  // * The script setup syntax would be the better way to have good typing of the props argument.
+  setup (props: any) {
+    const slots = useSlotsAsComponents()
+    const defaultSlot = computed(() => slots.default && slots.default())
+    const iconSlot = computed(() => slots.icon && slots.icon())
+    const hasLabel = computed<boolean>(() => !!defaultSlot.value)
+    const isSquare = computed(() => !hasLabel.value && !defaultSlot.value && (!!props.icon || !!props.iconRight))
+
+    // Disabled status
+    const finalDisabled = computed(() => props.disabled || props.loading)
+
+    // Can be "<router-link", "<button>" or "<a>"
+    const component = computed(() => {
+      const isDisabled = finalDisabled.value
+
+      // Disabled links should render as buttons for accessibility
+      if (isDisabled && (props.to || props.href)) {
+        return {
+          is: 'button',
+          props: {
+            type: 'button',
+            disabled: true,
+          },
+        }
+      }
+
+      if (props.to) {
+        return {
+          is: 'router-link',
+          props: {
+            to: props.to,
+          },
+        }
+      } else if (props.href) {
+        return {
+          is: 'a',
+          props: {
+            href: props.href,
+          },
+        }
+      } else {
+        return {
+          is: 'button',
+          props: {
+            type: props.type,
+            disabled: isDisabled,
+          },
+        }
+      }
+    })
+
+    // Check if component is a link (to apply inline-block) - only when not disabled
+    const isLink = computed(() => !finalDisabled.value && (!!props.href || !!props.to))
+
+    // Icon size classes
+    const iconSizeClasses = computed(() => ({
+      'size-3': props.size === 'sm',
+      'size-4': props.size === 'md',
+      'size-5': props.size === 'lg',
+    }))
+
+    // Label value
+    const labelFinal = computed(() => {
+      // Try to get label from slot or prop
+      const explicitLabel = ((defaultSlot.value && typeof defaultSlot.value[0].children === 'string' && defaultSlot.value[0].children) || props.label)?.trim()
+      if (explicitLabel) return explicitLabel
+
+      // Fallback: generate label from icon for icon-only buttons
+      if (isSquare.value && props.icon && typeof props.icon === 'string') {
+        // Extract readable name from icon class (e.g. "i-ls-settings" -> "settings")
+        const iconName = props.icon.replace(/^i-ls-/, '').replace(/-/g, ' ')
+        return iconName ? `${iconName} icon` : 'icon'
+      }
+
+      return undefined
+    })
+
+    // Handle click
+    const instance = getCurrentInstance()
+    function onClick (event: Event) {
+      if (finalDisabled.value) {
+        event.preventDefault()
+      } else {
+        instance?.emit('click', event)
+      }
+    }
+
+    // Style: Dynamic button classes
+    const buttonClasses = computed(() => [
+      {
+        'size-8': isSquare.value && props.size === 'sm',
+        'size-10': isSquare.value && props.size === 'md',
+        'size-12': isSquare.value && props.size === 'lg',
+      },
+      { 'grid place-items-center': isSquare.value },
+      {
+        'h-8 text-action-button-sm': props.size === 'sm',
+        'h-10 text-action-button-md': props.size === 'md',
+        'h-12 text-action-button-lg': props.size === 'lg',
+      },
+      props.size === 'sm' ? 'px-2.5' : props.size === 'lg' ? 'px-4' : 'px-3',
+      // Links should be inline-flex to prevent full width while maintaining flex centering
+      { 'inline-flex': isLink.value },
+    ])
+
+    // Style: variant × color visual language — shared with `UiDropdownTrigger`
+    // via `useButtonStyles` so both stay pixel-identical.
+    const {
+      bgClass,
+      textClass,
+      borderClasses,
+      overlayClasses,
+    } = useButtonStyles({
+      variant: () => props.variant,
+      color: () => props.color,
+      disabled: finalDisabled,
+    })
+
+    const bgClasses = bgClass
+    const textClasses = computed(() => textClass.value ? [textClass.value] : [])
+
+    // Style: Focus ring color
+    const focusRingClasses = 'group-focus-visible:ring-2 group-focus-visible:ring-inset group-focus-visible:ring-focus-ring'
+
+    // Validation: warn if no label or icon provided
+    watch(() => !props.label && !props.icon && !props.iconRight && !defaultSlot.value, (isEmpty) => {
+      if (isEmpty) {
+        console.warn('UiButton: You must provide a label or an icon to the button')
+      }
+    }, { immediate: true })
+
+    return {
+      component,
+      defaultSlot,
+      iconSlot,
+      hasLabel,
+      isLink,
+      iconSizeClasses,
+      buttonClasses,
+      bgClasses,
+      focusRingClasses,
+      textClasses,
+      borderClasses,
+      overlayClasses,
+      isSquare,
+      finalDisabled,
+      labelFinal,
+      onClick,
+    }
+  },
+}
+</script>

package/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ToggleGroupRoot } from 'reka-ui'
+import type { AcceptableValue } from 'reka-ui'
+import { useDebounceFn, useResizeObserver } from '@vueuse/core'
+import { computed, nextTick, onMounted, provide, ref, watch } from 'vue'
+import type { ButtonGroupColor, ButtonGroupSize } from './types'
+import {
+  BUTTON_GROUP_COLOR_KEY,
+  BUTTON_GROUP_REGISTER_KEY,
+  BUTTON_GROUP_SIZE_KEY,
+} from './types'
+
+interface UiButtonGroupProps {
+  modelValue?: string
+  defaultValue?: string
+  disabled?: boolean
+  size?: ButtonGroupSize
+  color?: ButtonGroupColor
+  name?: string
+  orientation?: 'horizontal' | 'vertical'
+  /**
+   * When false (default), clicking the selected item is a no-op — matches
+   * radio-group semantics where exactly one option is always selected.
+   * Set to true to allow clearing the selection by clicking the active item.
+   */
+  allowDeselect?: boolean
+}
+
+const props = withDefaults(defineProps<UiButtonGroupProps>(), {
+  size: 'md',
+  color: 'neutral',
+  orientation: 'horizontal',
+  disabled: false,
+  allowDeselect: false,
+  modelValue: undefined,
+  defaultValue: undefined,
+  name: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+provide(BUTTON_GROUP_SIZE_KEY, computed(() => props.size))
+provide(BUTTON_GROUP_COLOR_KEY, computed(() => props.color))
+
+// --- Sliding indicator -----------------------------------------------------
+// Each item registers its DOM node on mount. When the selected value or
+// layout changes, we measure the active item and reposition a single absolute
+// <div> whose transform + width + height transition smoothly.
+
+const itemEls = new Map<string, HTMLElement>()
+const rootRef = ref<InstanceType<typeof ToggleGroupRoot> | null>(null)
+
+// Shadowed selection state — mirrors modelValue when controlled, falls back
+// to defaultValue/emitted updates when uncontrolled, so the indicator works
+// either way. Undefined is forwarded too, so external form resets that clear
+// v-model correctly hide the indicator.
+const selectedValue = ref<string | undefined>(props.modelValue ?? props.defaultValue)
+watch(() => props.modelValue, (v) => {
+  selectedValue.value = v
+})
+
+const indicatorStyle = ref<Record<string, string>>({
+  transform: 'translate(0px, 0px)',
+  width: '0px',
+  height: '0px',
+})
+const indicatorVisible = ref(false)
+
+function getRootEl (): HTMLElement | null {
+  const el = (rootRef.value as unknown as { $el?: unknown })?.$el
+  return el instanceof HTMLElement ? el : null
+}
+
+function updateIndicator () {
+  const rootEl = getRootEl()
+  if (!rootEl) return
+
+  const activeEl = selectedValue.value ? itemEls.get(selectedValue.value) : null
+  if (!activeEl) {
+    indicatorVisible.value = false
+    return
+  }
+
+  const rootRect = rootEl.getBoundingClientRect()
+  const itemRect = activeEl.getBoundingClientRect()
+  indicatorStyle.value = {
+    transform: `translate(${itemRect.left - rootRect.left}px, ${itemRect.top - rootRect.top}px)`,
+    width: `${itemRect.width}px`,
+    height: `${itemRect.height}px`,
+  }
+  indicatorVisible.value = true
+}
+
+const debouncedUpdate = useDebounceFn(updateIndicator, 100)
+
+provide(BUTTON_GROUP_REGISTER_KEY, {
+  register (value, el) {
+    itemEls.set(value, el)
+    updateIndicator()
+  },
+  unregister (value) {
+    itemEls.delete(value)
+  },
+})
+
+watch([selectedValue, () => props.orientation, () => props.size], async () => {
+  await nextTick()
+  updateIndicator()
+})
+
+onMounted(async () => {
+  await nextTick()
+  updateIndicator()
+})
+
+const resizeTarget = computed(() => getRootEl())
+useResizeObserver(resizeTarget, debouncedUpdate)
+
+// --- Classes ---------------------------------------------------------------
+
+const sizeClasses = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'h-8 p-0.5 gap-0.5'
+    case 'lg': return 'h-12 p-1 gap-1'
+    case 'md':
+    default: return 'h-10 p-0.5 gap-1'
+  }
+})
+
+const RAIL_BG: Record<ButtonGroupColor, string> = {
+  'neutral': 'bg-actions-neutral-idle-alpha-light',
+  'neutral-invert': 'bg-actions-neutral-invert-idle-alpha-light',
+  'primary': 'bg-actions-primary-idle-alpha-light',
+  'success': 'bg-actions-success-idle-alpha-light',
+  'warning': 'bg-actions-warning-idle-alpha-light',
+  'error': 'bg-actions-danger-idle-alpha-light',
+}
+
+const INDICATOR_BG: Record<ButtonGroupColor, string> = {
+  'neutral': 'bg-actions-neutral-idle',
+  'neutral-invert': 'bg-actions-neutral-invert-idle',
+  'primary': 'bg-actions-primary-idle',
+  'success': 'bg-actions-success-idle',
+  'warning': 'bg-actions-warning-idle',
+  'error': 'bg-actions-danger-idle',
+}
+
+const INDICATOR_RADIUS: Record<ButtonGroupSize, string> = {
+  sm: 'rounded-md',
+  md: 'rounded-lg',
+  lg: 'rounded-lg',
+}
+
+const railBgClass = computed(() => RAIL_BG[props.color])
+const indicatorBgClass = computed(() => INDICATOR_BG[props.color])
+const indicatorRadiusClass = computed(() => INDICATOR_RADIUS[props.size])
+
+function handleUpdate (value: AcceptableValue | AcceptableValue[]) {
+  const next = Array.isArray(value) ? value[0] : value
+  const resolved = typeof next === 'string' ? next : undefined
+
+  // Reka-ui's single-select emits `undefined` when the user clicks the already
+  // selected item. Suppress that unless the consumer opts into deselection —
+  // driving ToggleGroupRoot from `selectedValue` means the visible state
+  // reverts cleanly on the next render.
+  if (resolved === undefined && !props.allowDeselect) return
+
+  selectedValue.value = resolved
+  emit('update:modelValue', resolved)
+}
+</script>
+
+<template>
+  <ToggleGroupRoot
+    ref="rootRef"
+    :model-value="selectedValue"
+    :disabled="disabled"
+    :orientation="orientation"
+    :name="name"
+    :roving-focus="true"
+    type="single"
+    class="relative inline-flex w-full items-stretch rounded-lg"
+    :class="[sizeClasses, railBgClass, { 'flex-col h-auto': orientation === 'vertical' }]"
+    @update:model-value="handleUpdate"
+  >
+    <div
+      v-show="indicatorVisible"
+      data-testid="button-group-indicator"
+      aria-hidden="true"
+      class="absolute top-0 left-0 pointer-events-none transition-[transform,width,height] duration-200 ease-out will-change-transform"
+      :class="[indicatorBgClass, indicatorRadiusClass]"
+      :style="indicatorStyle"
+    />
+    <slot />
+  </ToggleGroupRoot>
+</template>

package/src/components/UiButtonGroup/UiButtonGroupItem.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ToggleGroupItem } from 'reka-ui'
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { ButtonGroupColor } from './types'
+import {
+  BUTTON_GROUP_COLOR_KEY,
+  BUTTON_GROUP_REGISTER_KEY,
+  BUTTON_GROUP_SIZE_KEY,
+} from './types'
+
+interface UiButtonGroupItemProps {
+  value: string
+  disabled?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<UiButtonGroupItemProps>(), {
+  disabled: false,
+  ariaLabel: undefined,
+})
+
+const size = inject(BUTTON_GROUP_SIZE_KEY, computed(() => 'md' as const))
+const color = inject(BUTTON_GROUP_COLOR_KEY, computed<ButtonGroupColor>(() => 'neutral'))
+const registry = inject(BUTTON_GROUP_REGISTER_KEY, null)
+
+const itemRef = ref<InstanceType<typeof ToggleGroupItem> | null>(null)
+
+function resolveEl (): HTMLElement | null {
+  const el = (itemRef.value as unknown as { $el?: unknown })?.$el
+  return el instanceof HTMLElement ? el : null
+}
+
+onMounted(() => {
+  const el = resolveEl()
+  if (el && registry) registry.register(props.value, el)
+})
+
+// Re-register under the new key if the `value` prop changes dynamically
+// (e.g. iterating over a reactive list), so the indicator keeps tracking
+// this item instead of looking for a stale key.
+watch(() => props.value, (next, prev) => {
+  if (next === prev || !registry) return
+  registry.unregister(prev)
+  const el = resolveEl()
+  if (el) registry.register(next, el)
+})
+
+onBeforeUnmount(() => {
+  registry?.unregister(props.value)
+})
+
+// Vertical padding is sized so the item content box matches the rail's inner height
+// (rail height − rail padding) in horizontal mode, and drives height in vertical mode.
+const sizeClasses = computed(() => {
+  switch (size.value) {
+    case 'sm': return 'px-2.5 py-1.5 gap-1 rounded-md text-action-button-sm'
+    case 'lg': return 'px-6 py-2.5 gap-2 rounded-lg text-action-button-lg'
+    case 'md':
+    default: return 'px-4 py-2.5 gap-1.5 rounded-lg text-action-button-md'
+  }
+})
+
+// Per-color state classes. The selected fill is drawn by the parent's sliding
+// indicator <div>, so items only set text color per state. Hover bg/text apply
+// only to unselected items (data-[state=off]) so the hover tint never stacks
+// on top of the indicator.
+const COLOR_CLASSES: Record<ButtonGroupColor, string> = {
+  'neutral': [
+    'text-actions-neutral-idle-alpha-strong',
+    'data-[state=off]:hover:bg-actions-neutral-hover-overlay',
+    'data-[state=off]:hover:text-actions-neutral-idle',
+    'data-[state=on]:text-actions-neutral-invert-idle',
+  ].join(' '),
+  'neutral-invert': [
+    'text-actions-neutral-invert-idle-alpha-strong',
+    'data-[state=off]:hover:bg-actions-neutral-invert-hover-overlay',
+    'data-[state=off]:hover:text-actions-neutral-invert-idle',
+    'data-[state=on]:text-actions-neutral-idle',
+  ].join(' '),
+  'primary': [
+    'text-actions-primary-idle-alpha-strong',
+    'data-[state=off]:hover:bg-actions-primary-hover-overlay',
+    'data-[state=off]:hover:text-actions-primary-idle',
+    'data-[state=on]:text-actions-neutral-invert-idle',
+  ].join(' '),
+  'success': [
+    'text-actions-success-idle-alpha-strong',
+    'data-[state=off]:hover:bg-actions-success-hover-overlay',
+    'data-[state=off]:hover:text-actions-success-idle',
+    'data-[state=on]:text-actions-neutral-invert-idle',
+  ].join(' '),
+  'warning': [
+    'text-actions-warning-idle-alpha-strong',
+    'data-[state=off]:hover:bg-actions-warning-hover-overlay',
+    'data-[state=off]:hover:text-actions-warning-idle',
+    'data-[state=on]:text-actions-neutral-invert-idle',
+  ].join(' '),
+  'error': [
+    'text-actions-danger-idle-alpha-strong',
+    'data-[state=off]:hover:bg-actions-danger-hover-overlay',
+    'data-[state=off]:hover:text-actions-danger-idle',
+    'data-[state=on]:text-actions-neutral-invert-idle',
+  ].join(' '),
+}
+
+const colorClasses = computed(() => COLOR_CLASSES[color.value])
+</script>
+
+<template>
+  <ToggleGroupItem
+    ref="itemRef"
+    :value="value"
+    :disabled="disabled"
+    :aria-label="ariaLabel"
+    class="relative z-10 flex-1 inline-flex items-center justify-center transition-colors cursor-pointer outline-none
+           focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
+           data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed
+           data-[state=off]:data-[disabled]:hover:bg-transparent"
+    :class="[sizeClasses, colorClasses]"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

package/src/components/UiButtonGroup/index.ts

@@ -0,0 +1,3 @@
+export { default as UiButtonGroup } from './UiButtonGroup.vue'
+export { default as UiButtonGroupItem } from './UiButtonGroupItem.vue'
+export type { ButtonGroupColor, ButtonGroupSize } from './types'

package/src/components/UiButtonGroup/types.ts

@@ -0,0 +1,24 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export type ButtonGroupSize = 'sm' | 'md' | 'lg'
+export type ButtonGroupColor =
+  | 'neutral'
+  | 'neutral-invert'
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'error'
+
+export interface ButtonGroupRegister {
+  register(value: string, el: HTMLElement): void
+  unregister(value: string): void
+}
+
+export const BUTTON_GROUP_SIZE_KEY: InjectionKey<ComputedRef<ButtonGroupSize>> =
+  Symbol('ui-button-group-size')
+
+export const BUTTON_GROUP_COLOR_KEY: InjectionKey<ComputedRef<ButtonGroupColor>> =
+  Symbol('ui-button-group-color')
+
+export const BUTTON_GROUP_REGISTER_KEY: InjectionKey<ButtonGroupRegister> =
+  Symbol('ui-button-group-register')