@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/UiCard/UiCard.vue

@@ -0,0 +1,112 @@
+<!-- UiCard.vue - Base Card Component -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface UiCardProps {
+  /** Visual variant of the card */
+  variant?: 'neutral' | 'success' | 'warning' | 'danger' | 'primary' | 'transparent' | 'primary-fill' | 'white'
+  /** Padding size inside the card */
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+  /** Whether the card is interactive/clickable */
+  interactive?: boolean
+  /** Whether the card is selected */
+  selected?: boolean
+  /** Whether the card is disabled */
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<UiCardProps>(), {
+  variant: 'neutral',
+  padding: 'lg',
+  interactive: false,
+  selected: false,
+  disabled: false,
+})
+
+const baseCardClasses = 'bg-surface-neutral-alpha-100 border border-borders-neutral-light'
+
+const variantClasses = computed(() => {
+  if (props.selected) {
+    return 'bg-surface-primary-alpha-100 border border-borders-neutral-light ring-2 ring-actions-primary-idle'
+  }
+
+  switch (props.variant) {
+    case 'success':
+      return 'bg-surface-success-alpha-200 border border-borders-neutral-light'
+    case 'warning':
+      return 'bg-surface-warning-alpha-100 border border-borders-neutral-light'
+    case 'danger':
+      return 'bg-surface-danger-alpha-100 border border-borders-neutral-light'
+    case 'primary':
+      return 'bg-surface-primary-alpha-100 border border-borders-neutral-light'
+    case 'primary-fill':
+      return 'bg-surface-primary-bg-alpha border border-borders-neutral-light'
+    case 'transparent':
+      return 'bg-transparent border border-borders-neutral-light'
+    case 'neutral':
+      return 'bg-surface-neutral-alpha-100 border border-borders-neutral-light'
+    case 'white':
+      return 'bg-surface-neutral-bg-main border border-borders-neutral-light'
+    default:
+      return baseCardClasses
+  }
+})
+
+const paddingClasses = computed(() => {
+  // Based on Figma: default padding is 32px (p-8)
+  switch (props.padding) {
+    case 'sm':
+      return 'p-4'
+    case 'md':
+      return 'p-6'
+    case 'lg':
+      return 'p-8'
+    case 'none':
+      return ''
+    default:
+      return 'p-8'
+  }
+})
+
+const interactiveClasses = computed(() => {
+  if (!props.interactive || props.disabled) return ''
+  // Don't apply hover ring if already selected (to preserve the selected ring-2)
+  if (props.selected) {
+    return 'cursor-pointer transition-all duration-150 hover:shadow-shadows-drop-shadow-lg'
+  }
+  return 'cursor-pointer transition-all duration-150 hover:ring-1 hover:ring-shadow-neutral-100 hover:shadow-shadows-drop-shadow-lg'
+})
+
+const disabledClasses = computed(() => {
+  if (!props.disabled) return ''
+  return 'opacity-50 cursor-not-allowed'
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'rounded-xl relative overflow-hidden',
+      variantClasses,
+      paddingClasses,
+      interactiveClasses,
+      disabledClasses,
+    ]"
+  >
+    <!-- Hover overlay for interactive cards -->
+    <div
+      v-if="interactive && !disabled"
+      class="absolute inset-0 bg-actions-neutral-hover-overlay rounded-xl opacity-0 hover:opacity-100 transition-opacity duration-150 pointer-events-none"
+    />
+
+    <!-- Selected overlay -->
+    <div
+      v-if="selected"
+      class="absolute inset-0 bg-actions-primary-idle-alpha-light rounded-xl pointer-events-none"
+    />
+
+    <div class="relative z-10 h-full">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/UiCarousel/UiCarousel.vue

@@ -0,0 +1,215 @@
+<!-- UiCarousel.vue - Carousel Component with Embla -->
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import emblaCarouselVue from 'embla-carousel-vue'
+import type { EmblaOptionsType } from 'embla-carousel'
+import Autoplay from 'embla-carousel-autoplay'
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay'
+import UiButton from '../UiButton/UiButton.vue'
+
+export interface UiCarouselProps {
+  /** Carousel options from Embla */
+  options?: EmblaOptionsType
+  /** Show navigation arrows */
+  showArrows?: boolean
+  /** Show dot indicators */
+  showDots?: boolean
+  /** Enable loop mode */
+  loop?: boolean
+  /** Slides to scroll at once */
+  slidesToScroll?: number
+  /** Alignment of slides */
+  align?: 'start' | 'center' | 'end'
+  /** Enable drag interactions */
+  draggable?: boolean
+  /** Enable autoplay */
+  autoplay?: boolean
+  /** Autoplay delay in milliseconds */
+  autoplayDelay?: number
+  /** Stop autoplay on interaction */
+  stopOnInteraction?: boolean
+  /** Stop autoplay when mouse enters carousel */
+  stopOnMouseEnter?: boolean
+}
+
+interface Emits {
+  (e: 'select', index: number): void
+  (e: 'init'): void
+}
+
+const emit = defineEmits<Emits>()
+
+const props = withDefaults(defineProps<UiCarouselProps>(), {
+  showArrows: true,
+  showDots: true,
+  loop: true,
+  slidesToScroll: 1,
+  align: 'start',
+  draggable: true,
+  autoplay: false,
+  autoplayDelay: 3000,
+  stopOnInteraction: false,
+  stopOnMouseEnter: false,
+})
+
+const autoplayPlugin = computed(() => {
+  if (!props.autoplay) return []
+
+  const autoplayOptions: AutoplayOptionsType = {
+    delay: props.autoplayDelay,
+    stopOnInteraction: props.stopOnInteraction,
+    stopOnMouseEnter: props.stopOnMouseEnter,
+  }
+
+  return [Autoplay(autoplayOptions)]
+})
+
+const emblaOptions = computed<EmblaOptionsType>(() => ({
+  loop: props.loop,
+  slidesToScroll: props.slidesToScroll,
+  align: props.align,
+  dragFree: false,
+  watchDrag: props.draggable,
+  containScroll: 'trimSnaps',
+  ...props.options,
+}))
+
+const [emblaRef, emblaApi] = emblaCarouselVue(emblaOptions, autoplayPlugin)
+
+const selectedIndex = ref<number>(0)
+const scrollSnaps = ref<number[]>([])
+const canScrollPrev = ref<boolean>(false)
+const canScrollNext = ref<boolean>(true)
+
+function onSelect (): void {
+  if (!emblaApi.value) return
+  selectedIndex.value = emblaApi.value.selectedScrollSnap()
+  canScrollPrev.value = emblaApi.value.canScrollPrev()
+  canScrollNext.value = emblaApi.value.canScrollNext()
+  emit('select', selectedIndex.value)
+}
+
+function onInit (): void {
+  if (!emblaApi.value) return
+  scrollSnaps.value = emblaApi.value.scrollSnapList()
+  onSelect()
+  emit('init')
+}
+
+watch(emblaApi, (api) => {
+  if (!api) return
+  api.on('init', onInit)
+  api.on('select', onSelect)
+  api.on('reInit', onSelect)
+}, { immediate: true })
+
+watch(
+  () => [props.autoplay, props.autoplayDelay, props.stopOnInteraction, props.stopOnMouseEnter],
+  () => {
+    if (emblaApi.value) {
+      emblaApi.value.reInit()
+    }
+  },
+)
+
+onMounted(() => {
+  if (emblaApi.value) {
+    onInit()
+  }
+})
+
+onBeforeUnmount(() => {
+  if (emblaApi.value) {
+    emblaApi.value.destroy()
+  }
+})
+
+function scrollPrev (): void {
+  if (!emblaApi.value) return
+  if (props.stopOnInteraction && props.autoplay) {
+    emblaApi.value.plugins().autoplay?.stop()
+  }
+  emblaApi.value.scrollPrev()
+}
+
+function scrollNext (): void {
+  if (!emblaApi.value) return
+  if (props.stopOnInteraction && props.autoplay) {
+    emblaApi.value.plugins().autoplay?.stop()
+  }
+  emblaApi.value.scrollNext()
+}
+
+function scrollTo (index: number): void {
+  emblaApi.value?.scrollTo(index)
+}
+
+defineExpose({
+  scrollPrev,
+  scrollNext,
+  scrollTo,
+  emblaApi,
+})
+</script>
+
+<template>
+  <div class="ui-carousel relative">
+    <!-- Carousel viewport -->
+    <div
+      ref="emblaRef"
+      data-testid="carousel-viewport"
+      class="overflow-hidden"
+    >
+      <div class="flex -mr-4">
+        <slot />
+      </div>
+    </div>
+
+    <!-- Navigation controls -->
+    <div
+      class="flex items-center mt-4 justify-center"
+    >
+      <!-- Prev arrow -->
+      <UiButton
+        v-if="showArrows"
+        data-testid="carousel-prev"
+        variant="tertiary"
+        color="primary"
+        size="md"
+        icon="i-ls-chevron-left"
+        label="Previous slide"
+        :disabled="!canScrollPrev"
+        @click="scrollPrev"
+      />
+
+      <!-- Dot indicators -->
+      <div
+        v-if="showDots && scrollSnaps.length > 1"
+        class="flex items-center gap-4 mx-4"
+      >
+        <button
+          v-for="(snap, index) in scrollSnaps"
+          :key="index"
+          :data-testid="`carousel-dot-${index}`"
+          :aria-label="`Slide ${index + 1}`"
+          class="h-3 w-3 rounded-full transition-colors duration-200 cursor-pointer"
+          :class="index === selectedIndex ? 'bg-actions-primary-idle' : 'bg-actions-primary-idle-alpha-light'"
+          @click="scrollTo(index)"
+        />
+      </div>
+
+      <!-- Next arrow -->
+      <UiButton
+        v-if="showArrows"
+        data-testid="carousel-next"
+        variant="tertiary"
+        color="primary"
+        size="md"
+        icon="i-ls-chevron-right"
+        label="Next slide"
+        :disabled="!canScrollNext"
+        @click="scrollNext"
+      />
+    </div>
+  </div>
+</template>

package/src/components/UiCarousel/index.ts

@@ -0,0 +1,2 @@
+export { default as UiCarousel } from './UiCarousel.vue'
+export type { UiCarouselProps } from './UiCarousel.vue'

package/src/components/UiColorField/UiColorField.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import UiPopover from '../UiPopover/UiPopover.vue'
+import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
+import UiPopoverContent from '../UiPopover/UiPopoverContent.vue'
+import { UiColorPicker } from '../UiColorPicker'
+import { UiTextField } from '../UiTextField'
+import type { UiColorFieldProps } from './types'
+
+const props = withDefaults(defineProps<UiColorFieldProps>(), {
+  modelValue: '',
+  defaultColor: undefined,
+  disabled: false,
+  size: 'md',
+  placeholder: undefined,
+  label: undefined,
+  id: undefined,
+  ariaLabel: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'change': [value: string]
+}>()
+
+// Mirrors the frontend `color` Vuelidate validator: '#' + 3 or 6 hex digits.
+const HEX_RE = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
+const FALLBACK_HEX = '#000000'
+
+const isOpen = ref(false)
+
+// Local draft so typing doesn't fight the model; committed on blur/Enter
+// because the color field can only handle valid hex values, but the user may be in the middle of typing an invalid one.
+const draft = ref(props.modelValue ?? '')
+watch(() => props.modelValue, (value) => {
+  // Don't clobber the user's in-progress raw text when the incoming value is
+  // just the round-trip of what they're already typing (live-emit). Still
+  // resync on a genuine external change (e.g. picker selection, parent reset).
+  if (normalizeHex(draft.value) !== value) draft.value = value ?? ''
+})
+
+// The swatch and picker always need a concrete, valid color - used for the colour picker
+const currentHex = computed(() => {
+  if (props.modelValue && HEX_RE.test(props.modelValue)) return props.modelValue.toLowerCase()
+  if (props.defaultColor && HEX_RE.test(props.defaultColor)) return props.defaultColor.toLowerCase()
+  return FALLBACK_HEX
+})
+
+function setOpen(value: boolean): void {
+  if (props.disabled) return
+  isOpen.value = value
+}
+
+function normalizeHex(input: string): string | null {
+  const trimmed = input.trim().toLowerCase()
+  const withHash = trimmed.startsWith('#') ? trimmed : `#${trimmed}`
+  return HEX_RE.test(withHash) ? withHash : null
+}
+
+function commitDraft(): void {
+  const normalized = normalizeHex(draft.value)
+  if (!normalized) {
+    draft.value = props.modelValue ?? '' // revert to last valid value
+    return
+  }
+  draft.value = normalized
+  if (normalized !== props.modelValue) {
+    emit('update:modelValue', normalized)
+    emit('change', normalized)
+  }
+}
+
+function onFieldInput(value: string): void {
+  draft.value = value
+  const normalized = normalizeHex(value)
+  // Live-emit while the typed text forms a valid hex (matches the legacy field);
+  // invalid/partial input is held locally and reverted on blur.
+  if (normalized && normalized !== props.modelValue) emit('update:modelValue', normalized)
+}
+
+function onFieldKeydown(event: KeyboardEvent): void {
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    setOpen(true)
+  } else if (event.key === 'Enter') {
+    // These fields live inside <BaseForm>; without this, Enter would submit
+    // the surrounding form instead of just committing the color.
+    event.preventDefault()
+    commitDraft()
+  }
+}
+
+function onPickerUpdate(value: string): void {
+  draft.value = value
+  emit('update:modelValue', value)
+}
+
+function onPickerChange(value: string): void {
+  emit('change', value)
+}
+</script>
+
+<template>
+  <UiPopover
+    :open="isOpen"
+    :modal="false"
+    @update:open="setOpen"
+  >
+    <!-- needs as="div" else the input is of type="button" for the popover trigger -->
+    <!-- role="combobox" is needed so that the aria values are valid on the element -->
+    <UiPopoverTrigger
+      as="div"
+      role="combobox"
+    >
+      <UiTextField
+        :id="id"
+        :model-value="draft"
+        :label="label"
+        :aria-label="ariaLabel"
+        :size="size"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        class="cursor-pointer"
+        @update:model-value="onFieldInput"
+        @keydown="onFieldKeydown"
+        @blur="commitDraft"
+      >
+        <template #icon>
+          <span
+            data-testid="ui-color-field-swatch"
+            aria-hidden="true"
+            class="block size-full rounded border border-borders-neutral-light"
+            :style="{ backgroundColor: currentHex }"
+          />
+        </template>
+      </UiTextField>
+    </UiPopoverTrigger>
+    <UiPopoverContent
+      side="bottom"
+      align="start"
+      :side-offset="8"
+      data-colors-semantic="light"
+      class="border-none shadow-none rounded-2xl!"
+      @open-auto-focus.prevent
+    >
+      <UiColorPicker
+        variant="default"
+        :modes="['hex', 'rgb']"
+        output-format="hex"
+        :show-alpha="false"
+        :model-value="currentHex"
+        :disabled="disabled"
+        @update:model-value="onPickerUpdate"
+        @change="onPickerChange"
+      />
+    </UiPopoverContent>
+  </UiPopover>
+</template>

package/src/components/UiColorField/index.ts

@@ -0,0 +1,2 @@
+export { default as UiColorField } from './UiColorField.vue'
+export type { UiColorFieldProps } from './types'

package/src/components/UiColorField/types.ts

@@ -0,0 +1,30 @@
+import type { TextFieldSize } from '../UiTextField'
+
+export interface UiColorFieldProps {
+  /** Hex color, v-model — the source of truth. Emitted as lowercase #rrggbb. */
+  modelValue?: string
+  /** Fallback color for the swatch/picker when modelValue is empty or invalid. */
+  defaultColor?: string
+  /** Disable interaction (blocks opening the picker and greys the field). */
+  disabled?: boolean
+  /** Size passed through to the underlying UiTextField. */
+  size?: TextFieldSize
+  /** Placeholder shown when there is no value. */
+  placeholder?: string
+  /**
+   * Visible field label, forwarded to the underlying UiTextField and rendered
+   * as an associated <label>. Leave unset when the field already sits under an
+   * external label (e.g. BaseFormInput) to avoid a duplicate.
+   */
+  label?: string
+  /**
+   * Id applied to the underlying input. Set this to match an external
+   * <label for="..."> (e.g. BaseFormInput's label) so the two associate.
+   */
+  id?: string
+  /**
+   * Accessible name applied as aria-label on the input, for when the field has
+   * no visible/associated label of its own.
+   */
+  ariaLabel?: string
+}