@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/UiSideMenu/UiSideMenuItemContent.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import type { SideMenuItemProps } from './types'
+import { computed, useSlots } from 'vue'
+import { useForwardExpose } from 'reka-ui'
+
+// Visual body of a side menu item (icon, label, badge, interactive overlay).
+// Extracted from UiSideMenuItem so the latter can optionally wrap this in a
+// tooltip. `useForwardExpose` exposes the root element so reka-ui's
+// `TooltipTrigger as-child` merges its props/listeners onto this <div> instead
+// of rendering its own wrapping <button> (which would intercept clicks).
+const { forwardRef } = useForwardExpose()
+
+const slots = useSlots()
+const hasAvatarSlot = computed(() => !!slots.avatar)
+
+const props = withDefaults(defineProps<SideMenuItemProps & {
+  navigateToLabel?: string
+  /**
+   * When true, removes the interactive overlay (router-link/button) from
+   * the tab order. Use when wrapped by an interactive ancestor (e.g.
+   * UiPopoverTrigger) that already owns focus and click semantics —
+   * otherwise the component contributes a second tab stop.
+   */
+  insideInteractive?: boolean
+  /**
+   * Notification indicator shown at the top-right of the icon. A number
+   * renders a count pill (values > 99 display as "99+"); `true` renders a
+   * plain dot. Omit / 0 / false to hide.
+   */
+  badge?: number | boolean
+  /**
+   * Keep the text label visible even on short-height screens (where item
+   * labels are normally hidden). Use for the account/avatar item so the user
+   * name stays shown.
+   */
+  alwaysShowLabel?: boolean
+}>(), {
+  textAlign: undefined,
+  insideInteractive: false,
+  badge: undefined,
+  alwaysShowLabel: false,
+})
+
+// Normalise the badge into either a display string (count pill) or null (dot)
+// when shown. `showBadge` gates rendering so 0/false stay hidden.
+const showBadge = computed(() => props.badge === true || (typeof props.badge === 'number' && props.badge > 0))
+const badgeCount = computed(() => {
+  if (typeof props.badge !== 'number') return null
+  return props.badge > 99 ? '99+' : String(props.badge)
+})
+
+const textAlignClass = computed(() => {
+  if (props.textAlign) {
+    return `text-${props.textAlign}`
+  }
+  return hasAvatarSlot.value ? 'text-left' : 'text-center'
+})
+</script>
+
+<template>
+  <div
+    :ref="forwardRef"
+    class="md:w-18 relative flex md:flex-col md:items-center gap-1 p-1 group/side-menu-item"
+  >
+    <router-link
+      v-if="to"
+      :to="to"
+      class="block w-full h-full absolute inset-0 z-20 transition-all duration-150"
+      :class="{ 'pointer-events-none': insideInteractive }"
+      :tabindex="insideInteractive ? -1 : undefined"
+      :aria-hidden="insideInteractive ? 'true' : undefined"
+      :aria-label="navigateToLabel || `Navigate to ${label}`"
+      :aria-current="isActive ? 'page' : undefined"
+    >
+      <span class="sr-only">{{ label }}</span>
+    </router-link>
+    <a
+      v-else-if="href"
+      :href="href"
+      class="block w-full h-full absolute inset-0 z-20 transition-all duration-150"
+      :class="{ 'pointer-events-none': insideInteractive }"
+      :tabindex="insideInteractive ? -1 : undefined"
+      :aria-hidden="insideInteractive ? 'true' : undefined"
+      :aria-label="navigateToLabel || `Navigate to ${label}`"
+    >
+      <span class="sr-only">{{ label }}</span>
+    </a>
+    <button
+      v-else
+      type="button"
+      class="block w-full h-full absolute inset-0 z-20 transition-all duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-actions-primary-idle rounded-xl"
+      :class="{ 'pointer-events-none': insideInteractive }"
+      :tabindex="insideInteractive ? -1 : undefined"
+      :aria-hidden="insideInteractive ? 'true' : undefined"
+      :aria-label="label"
+      :aria-current="isActive ? 'true' : undefined"
+    >
+      <span class="sr-only">{{ label }}</span>
+    </button>
+    <div
+      :class="[
+        'flex justify-center w-full md:w-10 group-hover/side-menu-item:bg-actions-neutral-hover-overlay group-active/side-menu-item:bg-actions-neutral-active-overlay rounded-xl transition-all duration-150 ease-in-out',
+        isActive ? 'bg-actions-neutral-active-overlay text-actions-neutral-idle' : 'text-actions-neutral-idle-alpha-strong',
+        // Avatar box is 40px; on mobile `p-1` makes its total height (48px)
+        // match icon items (`p-3` + 24px icon). Both are 40px on desktop.
+        hasAvatarSlot ? 'p-1 md:p-0' : 'p-3',
+      ]"
+    >
+      <!-- Icon/avatar wrapper: anchors the notification badge to the icon's
+           top-right corner so it stays correct in both the icon-centered
+           (desktop) and icon-left (mobile row) layouts. -->
+      <div class="relative shrink-0">
+        <div
+          v-if="hasAvatarSlot"
+          class="flex items-center justify-center w-10 h-10"
+        >
+          <slot name="avatar" />
+        </div>
+        <div
+          v-if="icon"
+          :class="[
+            'w-6 h-6 md:w-4 md:h-4',
+            icon
+          ]"
+          aria-hidden="true"
+        />
+        <!-- Notification badge, pushed out toward the button's top-right
+             corner (past the icon's p-3 padding). -->
+        <div
+          v-if="showBadge"
+          class="absolute z-30 pointer-events-none flex items-center justify-center bg-surface-danger-bg-alpha text-text-neutral-invert-base rounded-2xl"
+          :class="badgeCount
+            ? '-top-3.5 -right-3.5 min-w-4 px-1 py-0.5 text-content-badges-bold-md'
+            : '-top-2.5 -right-2.5 w-2 h-2'"
+          aria-hidden="true"
+        >
+          <span v-if="badgeCount">{{ badgeCount }}</span>
+        </div>
+      </div>
+      <div
+        class="pl-4 flex md:hidden text-content-text-md-regular font-bold truncate w-full items-center md:justify-center md:text-center"
+        aria-hidden="true"
+      >
+        {{ label }}
+      </div>
+    </div>
+    <div
+      class="hidden md:block text-content-legends-bold-md truncate w-[75px]"
+      :class="[
+        textAlignClass,
+        isActive ? 'text-actions-neutral-idle' : 'text-actions-neutral-idle-alpha-strong',
+        { 'hidden-on-short-height': !alwaysShowLabel },
+      ]"
+      aria-hidden="true"
+    >
+      {{ label }}
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.hidden-on-short-height {
+  display: none;
+}
+
+@media (min-height: 600px) and (min-width: 768px) {
+  .hidden-on-short-height {
+    display: block;
+  }
+}
+</style>

package/src/components/UiSideMenu/UiSideMenuTop.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import LivestormLogo from '@livestorm/ui-tokens/output/vectors/logos/livestorm-white.svg'
+import UiSideMenuItem from './UiSideMenuItem.vue'
+import type { SideMenuItemProps } from './types'
+
+defineProps<{
+  menuItems: SideMenuItemProps[]
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-8">
+    <img
+      :src="LivestormLogo"
+      alt="Livestorm logo"
+      class="w-10 h-10"
+    >
+    <div class="flex flex-col gap-2">
+      <UiSideMenuItem
+        v-for="item in menuItems"
+        :key="item.label"
+        :label="item.label"
+        :icon="item.icon"
+        :to="item.to"
+        :is-active="item.isActive"
+      />
+    </div>
+  </div>
+</template>

package/src/components/UiSideMenu/injection.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface SideMenuLayoutContext {
+  isShortHeight: Ref<boolean>
+  moreButtonEl: Ref<HTMLElement | null>
+  closeMoreMenu: () => void
+}
+
+export const SIDE_MENU_LAYOUT_KEY: InjectionKey<SideMenuLayoutContext> = Symbol('UiSideMenuLayout')

package/src/components/UiSideMenu/types.ts

@@ -0,0 +1,41 @@
+import type { RouteLocationRaw } from 'vue-router'
+export interface SideMenuItemProps {
+    label: string
+    icon?: string
+    to?: string | RouteLocationRaw
+    href?: string
+    isActive?: boolean
+    textAlign?: 'left' | 'center' | 'right'
+    /** Notification indicator: a count pill (number) or a dot (`true`). */
+    badge?: number | boolean
+}
+
+/**
+ * Proxy entry rendered inside the More popover on short-height screens.
+ * Used to surface buttons that live in the #bottom slot (e.g. Help, Updates)
+ * which are hidden in that layout. The click handler should toggle the
+ * underlying component's popover; that component should register a
+ * UiPopoverAnchor pointing to the More button so its popover visually
+ * emerges from there.
+ */
+export interface SideMenuMoreItem {
+    label: string
+    icon?: string
+    onClick: () => void
+}
+
+/**
+ * Entry rendered inside the persistent "More" popover (the collapsed menu
+ * shown at every height). Unlike SideMenuMoreItem, these are first-class menu
+ * entries — they can navigate (`to`/`href`) or run a handler (`onClick`).
+ */
+export interface SideMenuCollapsedItem {
+    label: string
+    icon?: string
+    to?: string | RouteLocationRaw
+    href?: string
+    isActive?: boolean
+    onClick?: () => void
+    /** Notification indicator: a count pill (number) or a dot (`true`). */
+    badge?: number | boolean
+}

package/src/components/UiSideMenu/useLabelHidden.ts

@@ -0,0 +1,33 @@
+import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
+
+// When is a side menu item's text label hidden? (see UiSideMenuItemContent)
+//   - mobile width (< 768px): the inline `md:hidden` label IS shown
+//   - desktop, tall (>= 600px height): the bottom `.hidden-on-short-height`
+//     label IS shown
+//   - desktop, short (< 600px height): BOTH labels hidden
+// So the label is hidden only on short-height desktop. We also require a
+// hover-capable, fine pointer so touch/mobile never get a hover tooltip.
+const LABEL_HIDDEN_QUERY =
+  '(min-width: 768px) and (max-height: 599.98px) and (hover: hover) and (pointer: fine)'
+
+export function useLabelHidden (): Ref<boolean> {
+  const labelHidden = ref(false)
+  let mql: MediaQueryList | null = null
+
+  const update = (e: MediaQueryListEvent | MediaQueryList) => {
+    labelHidden.value = e.matches
+  }
+
+  onMounted(() => {
+    if (typeof window === 'undefined') return
+    mql = window.matchMedia(LABEL_HIDDEN_QUERY)
+    labelHidden.value = mql.matches
+    mql.addEventListener('change', update)
+  })
+
+  onBeforeUnmount(() => {
+    mql?.removeEventListener('change', update)
+  })
+
+  return labelHidden
+}

package/src/components/UiSideMenu/useSideMenuLayout.ts

@@ -0,0 +1,12 @@
+import { inject } from 'vue'
+import { SIDE_MENU_LAYOUT_KEY } from './injection'
+
+/**
+ * Read the parent UiSideMenu's layout context. Returns `undefined` when
+ * used outside a UiSideMenu (e.g. in isolation). Consumers typically use
+ * this to anchor their own popovers to the More button on short-height
+ * screens, where the #bottom slot is visually hidden.
+ */
+export function useSideMenuLayout () {
+  return inject(SIDE_MENU_LAYOUT_KEY, undefined)
+}

package/src/components/UiStepper/UiStepper.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { StepperRootEmits, StepperRootProps } from 'reka-ui'
+import { StepperRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, provide, toRef } from 'vue'
+
+const props = defineProps<StepperRootProps>()
+const emits = defineEmits<StepperRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+
+const isHorizontal = computed(() => props.orientation === 'horizontal')
+
+// Provide orientation to child components
+provide('stepperOrientation', toRef(props, 'orientation'))
+</script>
+
+<template>
+  <StepperRoot
+    v-bind="{ ...forwarded, ...$attrs }"
+    class="ui-stepper"
+    :class="{
+      'ui-stepper--horizontal': isHorizontal,
+      'ui-stepper--vertical': !isHorizontal,
+    }"
+  >
+    <slot />
+  </StepperRoot>
+</template>
+
+<style>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+.ui-stepper--horizontal {
+  @apply flex items-start gap-8;
+}
+
+.ui-stepper--vertical > *:not(:last-child) {
+  @apply mb-2;
+}
+</style>

package/src/components/UiStepper/UiStepperDescription.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { StepperDescriptionProps } from 'reka-ui'
+import { StepperDescription } from 'reka-ui'
+
+defineProps<StepperDescriptionProps>()
+</script>
+
+<template>
+  <StepperDescription
+    v-bind="$attrs"
+    :class="[
+      'ui-stepper-description',
+      'transition-all duration-200',
+    ]"
+  >
+    <slot />
+  </StepperDescription>
+</template>
+
+<style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+.ui-stepper-description {
+  @apply  max-w-60 truncate;
+  @apply text-content-text-md-regular text-text-neutral-tertiary block;
+}
+</style>

package/src/components/UiStepper/UiStepperIndicator.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { StepperIndicatorProps } from 'reka-ui'
+import { StepperIndicator } from 'reka-ui'
+
+type Size = 'sm' | 'md' | 'lg'
+
+interface UiStepperIndicatorProps extends StepperIndicatorProps {
+  size?: Size
+  showCheckmark?: boolean
+  icon?: string
+}
+
+const { size = 'md', showCheckmark = true, icon } = defineProps<UiStepperIndicatorProps>()
+
+const sizeClasses = {
+  sm: 'size-6 text-content-text-md-regular',
+  md: 'size-8 text-content-text-md-regular',
+  lg: 'size-10 text-content-text-lg-regular',
+}
+
+const iconSizeClasses = {
+  sm: 'size-3',
+  md: 'size-4',
+  lg: 'size-5',
+}
+</script>
+
+<template>
+  <StepperIndicator
+    v-bind="$attrs"
+    class="stepper-indicator"
+    :class="sizeClasses[size]"
+  >
+    <span
+      v-if="icon"
+      class="stepper-custom-icon"
+      :class="[iconSizeClasses[size], icon]"
+    />
+
+    <span
+      v-if="showCheckmark"
+      class="stepper-checkmark i-ls-check"
+      :class="iconSizeClasses[size]"
+    />
+
+    <span class="stepper-number">
+      <slot />
+    </span>
+  </StepperIndicator>
+</template>
+
+<style>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+.stepper-indicator {
+  @apply flex items-center justify-center shrink-0;
+  @apply rounded-full;
+  @apply transition-all duration-200 font-semibold;
+  @apply bg-surface-neutral-alpha-200 text-text-neutral-base;
+}
+
+[data-state="active"] .stepper-indicator {
+  @apply bg-surface-primary-bg-alpha text-text-neutral-invert-base;
+}
+
+.stepper-custom-icon {
+  @apply block;
+}
+
+[data-state="completed"] .stepper-custom-icon {
+  @apply hidden;
+}
+
+.stepper-custom-icon ~ .stepper-number {
+  @apply hidden;
+}
+
+[data-state="completed"] .stepper-custom-icon ~ .stepper-number {
+  @apply block;
+}
+
+.stepper-checkmark {
+  @apply hidden;
+}
+
+[data-state="completed"] .stepper-checkmark {
+  @apply block;
+}
+
+[data-state="completed"] .stepper-number {
+  @apply hidden;
+}
+</style>

package/src/components/UiStepper/UiStepperItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { StepperItemProps } from 'reka-ui'
+import { StepperItem } from 'reka-ui'
+
+interface UiStepperItemProps extends StepperItemProps {
+  showSeparator?: boolean
+}
+
+withDefaults(defineProps<UiStepperItemProps>(), {
+  showSeparator: true,
+})
+</script>
+
+<template>
+  <StepperItem
+    v-bind="$attrs"
+    :step="step"
+    :disabled="disabled"
+    class="ui-stepper-item"
+  >
+    <slot />
+  </StepperItem>
+</template>
+
+<style>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+.ui-stepper-item {
+  @apply relative;
+}
+</style>

package/src/components/UiStepper/UiStepperSeparator.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { StepperSeparatorProps } from 'reka-ui'
+import { StepperSeparator } from 'reka-ui'
+import { inject, computed, unref, type Ref } from 'vue'
+
+type Orientation = 'horizontal' | 'vertical'
+
+interface UiStepperSeparatorProps extends StepperSeparatorProps {
+  orientation?: Orientation
+}
+
+const props = withDefaults(defineProps<UiStepperSeparatorProps>(), {
+  orientation: undefined,
+})
+
+// Inject orientation from parent Stepper, fallback to prop, then default to 'vertical'
+const injectedOrientation = inject<Ref<Orientation>>('stepperOrientation')
+const orientation = computed(() => props.orientation || unref(injectedOrientation) || 'vertical')
+</script>
+
+<template>
+  <div
+    class="flex justify-center h-full"
+    :class="{
+      'w-full': orientation === 'horizontal',
+      'size-8': orientation === 'vertical',
+    }"
+  >
+    <StepperSeparator
+      v-bind="$attrs"
+      :class="[
+        'ui-stepper-separator',
+        'transition-colors duration-200',
+        {
+          'h-px w-full min-w-8': orientation === 'horizontal',
+          'w-px min-h-8': orientation === 'vertical',
+        }
+      ]"
+    />
+  </div>
+</template>
+
+<style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+.ui-stepper-separator {
+  @apply bg-surface-neutral-alpha-400;
+}
+</style>

package/src/components/UiStepper/UiStepperTitle.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { StepperTitleProps } from 'reka-ui'
+import { StepperTitle } from 'reka-ui'
+
+defineProps<StepperTitleProps>()
+</script>
+
+<template>
+  <StepperTitle
+    v-bind="$attrs"
+    :class="[
+      'ui-stepper-title',
+    ]"
+  >
+    <slot />
+  </StepperTitle>
+</template>
+
+<style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+.ui-stepper-title {
+  @apply text-content-text-lg-bold text-content-text-lg-bold text-text-neutral-secondary;
+}
+</style>

package/src/components/UiStepper/index.ts

@@ -0,0 +1,17 @@
+export { default as UiStepper } from './UiStepper.vue'
+export { default as UiStepperItem } from './UiStepperItem.vue'
+export { default as UiStepperIndicator } from './UiStepperIndicator.vue'
+export { default as UiStepperTitle } from './UiStepperTitle.vue'
+export { default as UiStepperDescription } from './UiStepperDescription.vue'
+export { default as UiStepperSeparator } from './UiStepperSeparator.vue'
+
+export {
+  StepperTrigger,
+  type StepperRootProps,
+  type StepperRootEmits,
+  type StepperItemProps,
+  type StepperIndicatorProps,
+  type StepperTitleProps,
+  type StepperDescriptionProps,
+  type StepperSeparatorProps,
+} from 'reka-ui'

package/src/components/UiTable/UiTable.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { provide, toRef } from 'vue'
+
+export interface UiTableProps {
+  variant?: 'condensed' | 'large'
+  hoverEffect?: boolean
+}
+
+const props = withDefaults(defineProps<UiTableProps>(), {
+  variant: 'condensed',
+  hoverEffect: false,
+})
+
+provide('tableVariant', toRef(props, 'variant'))
+provide('hoverEffect', toRef(props, 'hoverEffect'))
+</script>
+
+<template>
+  <div class="w-full">
+    <table class="w-full border-separate border-spacing-0">
+      <slot />
+    </table>
+  </div>
+</template>

package/src/components/UiTable/UiTableBody.vue

@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot />
+  </tbody>
+</template>

package/src/components/UiTable/UiTableCell.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { inject, computed, unref, type Ref } from 'vue'
+
+const variant = inject<Ref<'condensed' | 'large'>>('tableVariant')
+const isEven = inject<boolean>('rowIsEven', false)
+const hoverEffect = inject<Ref<boolean>>('hoverEffect')
+
+const cellClasses = computed(() => ({
+  'h-10': unref(variant) === 'condensed',
+  'h-20': unref(variant) === 'large',
+  'bg-surface-neutral-alpha-100': isEven,
+  'group-hover:bg-surface-neutral-alpha-200': unref(hoverEffect) && isEven,
+  'group-hover:bg-surface-neutral-alpha-100': unref(hoverEffect) && !isEven,
+  'first:rounded-l-md': true,
+  'last:rounded-r-md': true,
+}))
+</script>
+
+<template>
+  <td
+    :class="cellClasses"
+    class="px-3 overflow-hidden text-ellipsis transition-colors"
+  >
+    <slot />
+  </td>
+</template>

package/src/components/UiTable/UiTableHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { inject, computed, unref, type Ref } from 'vue'
+
+const variant = inject<Ref<'condensed' | 'large'>>('tableVariant')
+
+const headerClasses = computed(() => ({
+  'h-10': unref(variant) === 'condensed',
+  'h-12': unref(variant) === 'large',
+  'sticky top-0 z-20': true,
+}))
+</script>
+
+<template>
+  <thead :class="headerClasses">
+    <slot />
+  </thead>
+</template>