@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/UiActionBar/UiActionBarSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { ACTION_BAR_CONTEXT_KEY } from './types'
+
+const ctx = inject(ACTION_BAR_CONTEXT_KEY, null)
+const isVertical = computed(() => ctx?.orientation.value === 'vertical')
+</script>
+
+<template>
+  <div
+    role="separator"
+    :aria-orientation="isVertical ? 'horizontal' : 'vertical'"
+    data-testid="ui-action-bar-separator"
+    aria-hidden="true"
+    class="shrink-0 bg-borders-neutral-light"
+    :class="isVertical ? 'h-px w-full my-0.5' : 'w-px h-5 mx-0.5 self-center'"
+  />
+</template>

package/src/components/UiActionBar/index.ts

@@ -0,0 +1,4 @@
+export { default as UiActionBar } from './UiActionBar.vue'
+export { default as UiActionBarItem } from './UiActionBarItem.vue'
+export { default as UiActionBarSeparator } from './UiActionBarSeparator.vue'
+export type { ActionBarOrientation, ActionBarSize } from './types'

package/src/components/UiActionBar/types.ts

@@ -0,0 +1,24 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export type ActionBarOrientation = 'horizontal' | 'vertical'
+export type ActionBarSize = 'sm' | 'md'
+export type ActionBarPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'center-left'
+  | 'center-right'
+  | 'bottom-left'
+  | 'bottom-right'
+
+export interface ActionBarContext {
+  orientation: ComputedRef<ActionBarOrientation>
+  size: ComputedRef<ActionBarSize>
+}
+
+/**
+ * Injected by UiActionBar so child items and separators can adapt their
+ * layout (icon size, hover-tooltip side, separator direction) without the
+ * consumer threading props down manually.
+ */
+export const ACTION_BAR_CONTEXT_KEY: InjectionKey<ActionBarContext> =
+  Symbol('ui-action-bar-context')

package/src/components/UiAnimatedLogo/UiAnimatedLogo.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { DotLottieVue } from "@lottiefiles/dotlottie-vue";
+import {
+    LIVESTORM_ANIMATED_LOGO_TORNADO_URL,
+    LIVESTORM_ANIMATED_LOGO_STAIR_URL,
+    LIVESTORM_ANIMATED_LOGO_STREAMING_URL,
+} from "./animations-links";
+
+type AnimatedLogo = "tornado" | "stair" | "streaming";
+
+interface Props {
+    animatedLogo: AnimatedLogo;
+    loop?: boolean;
+    height: number;
+    width: number;
+}
+
+const props = defineProps<Props>();
+
+const animatedLogoUrl = computed(() => {
+    switch (props.animatedLogo) {
+        case "tornado":
+            return LIVESTORM_ANIMATED_LOGO_TORNADO_URL;
+        case "stair":
+            return LIVESTORM_ANIMATED_LOGO_STAIR_URL;
+        case "streaming":
+            return LIVESTORM_ANIMATED_LOGO_STREAMING_URL;
+        default:
+            return "";
+    }
+});
+</script>
+
+<template>
+  <div class="ui-logo-loader">
+    <DotLottieVue
+      :style="{
+        height: props.height + 'rem',
+        width: props.width + 'rem',
+      }"
+      autoplay
+      :loop="props.loop"
+      :src="animatedLogoUrl"
+    />
+  </div>
+</template>

package/src/components/UiAnimatedLogo/animations-links.ts

@@ -0,0 +1,6 @@
+export const LIVESTORM_ANIMATED_LOGO_TORNADO_URL =
+  "https://lottie.host/ba46e3f4-5e79-4762-9c20-405348ee3387/zHDFDAAD5F.lottie";
+export const LIVESTORM_ANIMATED_LOGO_STAIR_URL =
+  "https://lottie.host/81c2307c-1cbd-4594-b978-fd5eaf342bf6/4XKfuEedla.lottie";
+export const LIVESTORM_ANIMATED_LOGO_STREAMING_URL =
+  "https://lottie.host/d1427490-2228-4dc4-94e9-bf73a4851b3f/eAMtMNYScd.lottie";

package/src/components/UiAvatar/UiAvatar.vue

@@ -0,0 +1,186 @@
+<template>
+  <span
+    :class="rootClasses"
+    :style="hasBadge ? undefined : customStyle"
+    :data-size="size"
+    :data-variant="variant"
+  >
+    <span
+      :class="surfaceClasses"
+      :style="hasBadge ? customStyle : undefined"
+    >
+      <img
+        v-if="src && !imageFailed"
+        :src="src"
+        :alt="alt ?? fullName"
+        class="w-full h-full object-cover"
+        @error="imageFailed = true"
+      >
+      <span
+        v-else-if="initials"
+        class="px-0.5 overflow-hidden text-ellipsis whitespace-nowrap"
+        data-recording-sensitive
+      >
+        {{ initials }}
+      </span>
+      <span
+        v-else
+        :class="[icon, iconSizeClass]"
+      />
+    </span>
+    <slot
+      v-if="hasBadge"
+      name="badge"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useSlots, watch } from 'vue'
+
+interface Props {
+  /** Image URL. Initials are shown when missing or when the image fails to load. */
+  src?: string | null
+  firstName?: string | null
+  lastName?: string | null
+  /** Custom text rendered instead of initials (e.g. `+4` for overflow chips). */
+  customText?: string | null
+  /**
+   * Avatar size. Maps to the `--spacing-component-*` tokens:
+   * `xs` 24, `sm` 32, `md` 40, `lg` 48, `xl` 64, `10xl` 128.
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '10xl'
+  /**
+   * `default` is light-on-dark (used standalone or inside an avatar list);
+   * `more` is the light-grey `+N` chip used by `UiAvatarList` overflow.
+   */
+  variant?: 'default' | 'more'
+  /** Optional `<img>` alt — falls back to the full name. */
+  alt?: string
+  /**
+   * Custom background color (hex or any CSS color). Used for initials
+   * avatars when the backend stores a per-user color (legacy
+   * `BaseUserAvatar` parity). Ignored when `src` resolves or when the
+   * `more` variant is used.
+   */
+  color?: string | null
+  /**
+   * Icon class shown when there is no image and no name to derive
+   * initials from. Accepts any `i-ls-*` UnoCSS icon name.
+   */
+  icon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  src: null,
+  firstName: null,
+  lastName: null,
+  customText: null,
+  size: 'md',
+  variant: 'default',
+  alt: undefined,
+  color: null,
+  icon: 'i-ls-user-fill',
+})
+
+const customStyle = computed(() => {
+  // Custom color only applies to the initials/icon state. When an image
+  // resolves it covers the background, and the `more` variant uses its own
+  // light-grey background.
+  if (props.variant === 'more') return undefined
+  if (props.src && !imageFailed.value) return undefined
+  if (!props.color) return undefined
+  return { backgroundColor: props.color }
+})
+
+const imageFailed = ref(false)
+watch(() => props.src, () => { imageFailed.value = false })
+
+const initials = computed(() => {
+  if (props.customText) return props.customText
+  const f = props.firstName?.trim()?.[0] ?? ''
+  const l = props.lastName?.trim()?.[0] ?? ''
+  return (f + l).toUpperCase() || null
+})
+
+const fullName = computed(() => `${props.firstName ?? ''} ${props.lastName ?? ''}`.trim())
+
+// Pixel sizes match the `--spacing-component-*` tokens; font sizes pick the
+// closest typography token for each diameter so we stay aligned with the
+// design system instead of using raw Tailwind text scales.
+const sizeClasses = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'w-8 h-8 text-content-legends-bold-md'
+    case 'md':
+      return 'w-10 h-10 text-content-text-md-bold'
+    case 'lg':
+      return 'w-12 h-12 text-content-text-lg-bold'
+    case 'xl':
+      return 'w-16 h-16 text-title-md-bold'
+    case '10xl':
+      return 'w-32 h-32 text-title-lg-bold'
+    case 'xs':
+    default:
+      return 'w-6 h-6 text-content-badges-bold-md'
+  }
+})
+
+// Match the icon to the text size at each avatar size so the fallback glyph
+// reads at the same optical weight as the initials it replaces.
+// xs=10px, sm=12px, md=14px, lg=16px, xl=24px, 10xl=32px.
+const iconSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'w-3 h-3'
+    case 'md':
+      return 'w-3.5 h-3.5'
+    case 'lg':
+      return 'w-4 h-4'
+    case 'xl':
+      return 'w-6 h-6'
+    case '10xl':
+      return 'w-8 h-8'
+    case 'xs':
+    default:
+      return 'w-2.5 h-2.5'
+  }
+})
+
+const variantClasses = computed(() => {
+  switch (props.variant) {
+    case 'more':
+      return 'bg-surface-neutral-100 text-text-neutral-base'
+    case 'default':
+    default:
+      return 'bg-surface-neutral-invert-bg-main text-text-neutral-invert-base'
+  }
+})
+
+// A `badge` slot opts the avatar into a `relative` root (so the corner badge
+// can overflow) and moves the circular clip + background to an inner surface.
+const slots = useSlots()
+const hasBadge = computed(() => !!slots.badge)
+
+// Root element classes. Without a badge the root is the clipped circle itself
+// (identical to the original markup, so `UiAvatarList` is unaffected). With a
+// badge the root only positions; the clip lives on the surface below.
+const rootClasses = computed(() =>
+  hasBadge.value
+    ? ['ui-avatar relative inline-flex shrink-0', sizeClasses.value]
+    : [
+        'ui-avatar inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden text-center',
+        sizeClasses.value,
+        variantClasses.value,
+      ],
+)
+
+// Inner surface. `contents` when there's no badge (the element vanishes from
+// layout, leaving the root as the only box). When badged it becomes the
+// clipped, background-painted circle filling the root.
+const surfaceClasses = computed(() =>
+  hasBadge.value
+    ? ['inline-flex items-center justify-center w-full h-full rounded-full overflow-hidden text-center', variantClasses.value]
+    : 'contents',
+)
+</script>

package/src/components/UiAvatar/index.js

@@ -0,0 +1 @@
+export { default } from './UiAvatar.vue'

package/src/components/UiAvatarList/UiAvatarList.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    :class="['ui-avatar-list inline-flex items-center', containerPaddingClass]"
+    :data-size="size"
+  >
+    <div
+      v-for="(item, idx) in visibleItems"
+      :key="item.id ?? idx"
+      :class="['flex border border-actions-neutral-invert-idle-alpha-strong rounded-full overflow-hidden', overlapClass]"
+    >
+      <UiAvatar
+        :src="item.src"
+        :first-name="item.firstName"
+        :last-name="item.lastName"
+        :color="item.color"
+        :size="size"
+      />
+    </div>
+    <div
+      v-if="overflowCount > 0"
+      :class="['flex border border-actions-neutral-invert-idle-alpha-strong rounded-full overflow-hidden', overlapClass]"
+    >
+      <UiAvatar
+        :custom-text="`+${overflowCount}`"
+        :size="size"
+        variant="more"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiAvatar from '../UiAvatar/UiAvatar.vue'
+
+export interface AvatarListItem {
+  id?: string | number
+  firstName?: string | null
+  lastName?: string | null
+  src?: string | null
+  /** Per-user background color (hex/CSS) used for the initials state. */
+  color?: string | null
+}
+
+interface Props {
+  items: AvatarListItem[]
+  /**
+   * Total number of items represented by this list. Defaults to `items.length`.
+   * Set when `items` is already truncated server-side and you want the overflow
+   * count to reflect the true total.
+   */
+  total?: number | null
+  /** Maximum visible avatars before showing the `+N` overflow chip. */
+  max?: number
+  /** Mirrors `UiAvatar`'s size scale. The overlap scales with the size. */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '10xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  total: null,
+  max: 5,
+  size: 'md',
+})
+
+const effectiveTotal = computed(() => props.total ?? props.items.length)
+
+const visibleItems = computed(() => props.items.slice(0, props.max))
+
+const overflowCount = computed(() => Math.max(0, effectiveTotal.value - props.max))
+
+// Overlap scales with the avatar diameter so larger sizes don't look
+// disproportionately stacked. The container reserves matching right padding so
+// the rightmost avatar is fully visible.
+const overlapClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return '-mr-2'
+    case 'md':
+      return '-mr-2.5'
+    case 'lg':
+      return '-mr-3'
+    case 'xl':
+      return '-mr-4'
+    case '10xl':
+      return '-mr-8'
+    case 'xs':
+    default:
+      return '-mr-1.5'
+  }
+})
+
+const containerPaddingClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'pr-2'
+    case 'md':
+      return 'pr-2.5'
+    case 'lg':
+      return 'pr-3'
+    case 'xl':
+      return 'pr-4'
+    case '10xl':
+      return 'pr-8'
+    case 'xs':
+    default:
+      return 'pr-1.5'
+  }
+})
+</script>

package/src/components/UiAvatarList/index.js

@@ -0,0 +1 @@
+export { default } from './UiAvatarList.vue'

package/src/components/UiBadge/UiBadge.vue

@@ -0,0 +1,161 @@
+<template>
+  <div
+    :class="badgeClasses"
+    :data-color="color"
+    :data-variant="variant"
+  >
+    <span
+      v-if="count !== undefined"
+    >
+      {{ displayCount }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /**
+   * Optional count to display (if provided, shows number; if not, shows dot indicator)
+   */
+  count?: number | string
+  /**
+   * Color variant of the badge
+   */
+  color?: 'primary' | 'neutral' | 'danger' | 'warning' | 'success'
+  /**
+   * Visual variant of the badge
+   */
+  variant?: 'light' | 'strong'
+  /**
+   * Maximum count to display before showing "+"
+   */
+  maxCount?: number
+  /**
+   * Badge size:
+   * - `md` (default): standard badge metrics + bold badge type.
+   * - `sm`: tighter 12px metrics with a smaller, regular-weight glyph — for
+   *   single-character indicators (e.g. a role initial).
+   */
+  size?: 'sm' | 'md'
+  /**
+   * Force equal width/height (a fixed circle) instead of a pill that grows
+   * with its content. Use for single-character indicators that shouldn't
+   * stretch. Independent of `size`.
+   */
+  square?: boolean
+  /**
+   * Show the `help` cursor on hover. Set this when the consumer attaches a
+   * tooltip to the badge (the badge itself doesn't own the tooltip).
+   */
+  hasTooltip?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  count: undefined,
+  color: 'neutral',
+  variant: 'light',
+  maxCount: 99,
+  size: 'md',
+  square: false,
+  hasTooltip: false,
+})
+
+const hasCount = computed(() => props.count !== undefined)
+
+const displayCount = computed(() => {
+  if (props.count === undefined) return ''
+
+  const numCount = typeof props.count === 'string' ? parseInt(props.count, 10) : props.count
+
+  if (isNaN(numCount)) return props.count
+  if (numCount > props.maxCount) return `${props.maxCount}+`
+
+  return String(numCount)
+})
+
+const badgeClasses = computed(() => {
+  const baseClasses = [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-2xl',
+    'shrink-0',
+    // Only hint interactivity when a tooltip is attached by the consumer.
+    props.hasTooltip ? 'cursor-help' : 'cursor-default',
+  ]
+
+  // Size classes (only matter when there's a count — the dot indicator is
+  // always a fixed 12px circle). `square` forces equal w/h (no growth);
+  // otherwise the badge is a pill that grows with its content. `sm` uses
+  // tighter 12px metrics, `md` the standard ones.
+  const dotClasses = ['w-3', 'h-3']
+  const squareCountClasses = props.size === 'sm' ? ['w-3', 'h-3'] : ['w-4', 'h-4']
+  const pillCountClasses = props.size === 'sm'
+    ? ['min-w-3', 'min-h-3', 'px-1']
+    : ['min-w-4', 'min-h-4', 'px-1', 'py-0.5']
+  const sizeClasses = hasCount.value
+    ? props.square ? squareCountClasses : pillCountClasses
+    : dotClasses
+
+  // Text classes (only for count badges). The `sm` size forces a smaller,
+  // regular-weight glyph; `md` keeps the default bold badge type.
+  const textClasses = hasCount.value
+    ? props.size === 'sm'
+      ? ['text-[8px]', 'font-normal', 'leading-none', 'text-center'] // @TODO: apply text style token
+      : ['text-content-badges-bold-md', 'text-center']
+    : []
+
+  // Color and variant classes
+  const colorVariantClasses = {
+    primary: {
+      light: hasCount.value
+        ? ['bg-surface-primary-alpha-300', 'text-text-primary-base']
+        : ['bg-surface-primary-alpha-300'],
+      strong: hasCount.value
+        ? ['bg-surface-primary-bg-alpha', 'text-text-neutral-invert-base']
+        : ['bg-surface-primary-bg-alpha'],
+    },
+    neutral: {
+      light: hasCount.value
+        ? ['bg-surface-neutral-alpha-300', 'text-text-neutral-base']
+        : ['bg-surface-neutral-alpha-300'],
+      strong: hasCount.value
+        ? ['bg-surface-neutral-invert-bg-alpha', 'text-text-neutral-invert-base']
+        : ['bg-surface-neutral-invert-bg-alpha'],
+    },
+    danger: {
+      light: hasCount.value
+        ? ['bg-surface-danger-alpha-300', 'text-text-danger-base']
+        : ['bg-surface-danger-alpha-300'],
+      strong: hasCount.value
+        ? ['bg-surface-danger-bg-alpha', 'text-text-neutral-invert-base']
+        : ['bg-surface-danger-bg-alpha'],
+    },
+    warning: {
+      light: hasCount.value
+        ? ['bg-surface-warning-alpha-300', 'text-text-warning-base']
+        : ['bg-surface-warning-alpha-300'],
+      strong: hasCount.value
+        ? ['bg-surface-warning-bg-alpha', 'text-text-neutral-invert-base']
+        : ['bg-surface-warning-bg-alpha'],
+    },
+    success: {
+      light: hasCount.value
+        ? ['bg-surface-success-alpha-300', 'text-text-success-base']
+        : ['bg-surface-success-alpha-300'],
+      strong: hasCount.value
+        ? ['bg-surface-success-bg-alpha', 'text-text-neutral-invert-base']
+        : ['bg-surface-success-bg-alpha'],
+    },
+  }
+
+  return [
+    ...baseClasses,
+    ...sizeClasses,
+    ...textClasses,
+    ...colorVariantClasses[props.color][props.variant],
+  ]
+})
+</script>

package/src/components/UiBadge/index.ts

@@ -0,0 +1,2 @@
+// UiBadge exports
+export { default as UiBadge } from './UiBadge.vue'