@livestorm/ui-vue 1.1.3 → 2.0.0

package/src/components/UiDialog/MarketplaceHeaderExample.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { computed, ref, type Slot } from 'vue'
+
+interface UiDialogMarketplaceHeaderProps {
+  icon?: string
+  logo?: string
+  title: string
+  description?: string
+  gradientColor?: string
+  images?: string[]
+}
+
+const props = withDefaults(defineProps<UiDialogMarketplaceHeaderProps>(), {
+  icon: undefined,
+  logo: undefined,
+  description: undefined,
+  gradientColor: '#0b42c3', // Default primary color
+  images: () => [],
+})
+
+defineSlots<{
+  switch(): Slot
+  carousel(): Slot
+}>()
+
+// Convert hex to HSL for gradient
+const hexToHSL = (hex: string) => {
+  // Remove # if present
+  const sanitizedHex = hex.replace('#', '')
+
+  // Convert hex to RGB
+  const r = Number.parseInt(sanitizedHex.substring(0, 2), 16) / 255
+  const g = Number.parseInt(sanitizedHex.substring(2, 4), 16) / 255
+  const b = Number.parseInt(sanitizedHex.substring(4, 6), 16) / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0
+
+  if (max !== min) {
+    const d = max - min
+    if (max === r) {
+      h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+    } else if (max === g) {
+      h = ((b - r) / d + 2) / 6
+    } else {
+      h = ((r - g) / d + 4) / 6
+    }
+  }
+
+  return Math.round(h * 360)
+}
+
+const hue = computed(() => hexToHSL(props.gradientColor))
+
+// Current image index for simple carousel
+const currentImageIndex = ref(0)
+
+const hasImages = computed(() => props.images.length > 0)
+
+const nextImage = () => {
+  if (props.images.length > 0) {
+    currentImageIndex.value = (currentImageIndex.value + 1) % props.images.length
+  }
+}
+
+const prevImage = () => {
+  if (props.images.length > 0) {
+    currentImageIndex.value = (currentImageIndex.value - 1 + props.images.length) % props.images.length
+  }
+}
+
+const goToImage = (index: number) => {
+  currentImageIndex.value = index
+}
+</script>
+
+<template>
+  <div
+    class="py-16 max-sm:py-8 flex transition-all duration-100 ease-in items-center custom-gradient bg-no-repeat bg-left-bottom"
+  >
+    <div class="w-full flex items-center relative">
+      <div class="grid grid-cols-1 md:grid-cols-[280px_1fr] w-full px-8 lg:px-16 gap-8">
+        <!-- Left side: Icon/Logo + Title + Description + Switch -->
+        <div class="flex flex-col justify-center w-full">
+          <div class="flex flex-col flex-wrap gap-4 w-full">
+            <!-- Icon -->
+            <div
+              v-if="icon"
+              class="w-12 h-12 grid place-items-center bg-cover bg-center bg-no-repeat rounded-full bg-surface-primary-alpha-100"
+            >
+              <span :class="[icon, 'text-2xl text-text-primary-base']" />
+            </div>
+
+            <!-- Logo -->
+            <div
+              v-else-if="logo"
+              class="w-12 h-12 flex-none bg-center bg-contain bg-no-repeat rounded-full"
+              :style="{ backgroundImage: `url(${logo})` }"
+            />
+
+            <!-- Title and Description -->
+            <div class="flex flex-col gap-2 flex-1 min-w-0">
+              <h2 class="text-text-neutral-base text-title-md-bold">
+                {{ title }}
+              </h2>
+              <p
+                v-if="description"
+                class="text-text-neutral-secondary text-content-text-lg-regular"
+              >
+                {{ description }}
+              </p>
+            </div>
+
+            <!-- Switch/Toggle Slot -->
+            <div
+              v-if="$slots.switch"
+              class="transition-all duration-400 ease-in-out"
+            >
+              <slot name="switch" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Right side: Carousel or custom content -->
+        <div class="w-full grid place-items-center">
+          <div class="grid relative place-items-center pt-8 lg:pt-0">
+            <!-- Custom carousel slot -->
+            <slot name="carousel">
+              <!-- Default carousel implementation -->
+              <div
+                v-if="hasImages"
+                class="relative w-full aspect-video bg-surface-neutral-alpha-100 rounded-lg overflow-hidden"
+              >
+                <!-- Images -->
+                <TransitionGroup name="fade">
+                  <img
+                    v-for="(image, index) in images"
+                    v-show="index === currentImageIndex"
+                    :key="image"
+                    :src="image"
+                    :alt="`Screenshot ${index + 1}`"
+                    class="absolute inset-0 w-full h-full object-cover"
+                  >
+                </TransitionGroup>
+
+                <!-- Navigation arrows -->
+                <button
+                  v-if="images.length > 1"
+                  class="absolute left-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-surface-neutral-bg-main/80 backdrop-blur-xs flex items-center justify-center hover:bg-surface-neutral-bg-main transition-colors"
+                  @click="prevImage"
+                >
+                  <span class="i-ls-chevron-left w-4 h-4 text-text-neutral-base" />
+                </button>
+                <button
+                  v-if="images.length > 1"
+                  class="absolute right-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-surface-neutral-bg-main/80 backdrop-blur-xs flex items-center justify-center hover:bg-surface-neutral-bg-main transition-colors"
+                  @click="nextImage"
+                >
+                  <span class="i-ls-chevron-right w-4 h-4 text-text-neutral-base" />
+                </button>
+
+                <!-- Dots indicator -->
+                <div
+                  v-if="images.length > 1"
+                  class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2"
+                >
+                  <button
+                    v-for="(_, index) in images"
+                    :key="index"
+                    :class="[
+                      'w-2 h-2 rounded-full transition-all',
+                      index === currentImageIndex
+                        ? 'bg-surface-neutral-bg-main w-6'
+                        : 'bg-surface-neutral-bg-main/50',
+                    ]"
+                    @click="goToImage(index)"
+                  />
+                </div>
+              </div>
+
+              <!-- Placeholder when no images -->
+              <div
+                v-else
+                class="w-full aspect-video min-h-[288px] bg-surface-neutral-alpha-100 rounded-lg flex items-center justify-center"
+              >
+                <span class="text-text-neutral-tertiary text-content-text-md-regular">
+                  Integration Screenshots
+                </span>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.custom-gradient {
+  background:
+    radial-gradient(57.62% 57.62% at 8.3% 63.87%, hsla(v-bind(hue), 89%, 61%, 0.2) 0%, hsla(v-bind(hue), 71%, 99%, 0) 100%),
+    radial-gradient(45.83% 45.83% at 93.65% 51.82%, hsla(v-bind(hue), 89%, 61%, 0.1) 0%, hsla(0, 0%, 100%, 0.1) 100%),
+    linear-gradient(0deg, #FFFFFF, #FFFFFF);
+  background-attachment: fixed;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/UiDialog/UiDialog.md

@@ -0,0 +1,97 @@
+# UiDialog
+
+A modal dialog component built on top of [reka-ui](https://reka-ui.com/docs/components/dialog) with built-in open/close animations, scroll detection, and footer border.
+
+## Components
+
+- `UiDialog` - Root wrapper (controls open/close state)
+- `UiDialogContent` - The dialog panel (overlay, header, content, footer)
+- `UiDialogTrigger` - Optional inline trigger button
+- `UiDialogFooter` - Convenience layout for footer action buttons
+
+## Basic Usage
+
+### Child component (the modal)
+
+Use `useVModel` from `@vueuse/core` to create a two-way binding for the `open` prop:
+
+```vue
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const isOpen = useVModel(props, 'open', emit)
+</script>
+
+<template>
+  <UiDialog v-model:open="isOpen">
+    <UiDialogContent title="My Dialog">
+      <p>Dialog content goes here.</p>
+
+      <template #footer>
+        <UiDialogFooter>
+          <UiButton variant="secondary" color="neutral" @click="isOpen = false">
+            Cancel
+          </UiButton>
+          <UiButton variant="cta" color="primary" @click="handleConfirm">
+            Confirm
+          </UiButton>
+        </UiDialogFooter>
+      </template>
+    </UiDialogContent>
+  </UiDialog>
+</template>
+```
+
+### Parent component
+
+Control the dialog from the parent using `v-model:open`:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import MyModal from './MyModal.vue'
+
+const isModalOpen = ref(false)
+</script>
+
+<template>
+  <button @click="isModalOpen = true">Open</button>
+  <MyModal v-model:open="isModalOpen" />
+</template>
+```
+
+## How open/close works
+
+1. The parent binds a `ref` via `v-model:open` on the child modal component
+2. The child forwards it to `<UiDialog v-model:open="isOpen">` using `useVModel`
+3. reka-ui's `DialogRoot` manages the actual visibility
+4. On close, reka-ui sets `data-state="closed"` on overlay and content, waits for CSS animations to finish, then unmounts
+
+**Important:** Never use `v-if` on the modal component itself — this would unmount the component before reka-ui can play the close animation. Always use `v-model:open` to let reka-ui control visibility.
+
+## Closing the dialog
+
+From the **template**, assign directly (Vue auto-unwraps refs):
+
+```vue
+<UiButton @click="isOpen = false">Cancel</UiButton>
+```
+
+From the **script**, use `.value`:
+
+```ts
+async function handleSubmit() {
+  await doSomething()
+  isOpen.value = false
+}
+```
+
+The built-in close button (X) is handled automatically by reka-ui's `DialogClose`.

package/src/components/UiDialog/UiDialog.vue

@@ -0,0 +1,16 @@
+<!-- UiDialog.vue -->
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="{ ...forwarded, ...$attrs }">
+    <slot />
+  </DialogRoot>
+</template>

package/src/components/UiDialog/UiDialogClose.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { DialogClose } from 'reka-ui';
+import UiButton from '../UiButton/UiButton.vue';
+
+interface UiDialogCloseProps {
+  ariaLabel?: string;
+  mode?: 'light' | 'dark';
+}
+
+withDefaults(defineProps<UiDialogCloseProps>(), {
+  ariaLabel: 'Close',
+  mode: 'light',
+});
+</script>
+
+<template>
+  <DialogClose
+    as-child
+  >
+    <UiButton
+      variant="tertiary"
+      color="neutral"
+      size="md"
+      icon="i-ls-x-stream"
+      :aria-label="ariaLabel"
+      :data-colors-semantic="mode"
+    />
+  </DialogClose>
+</template>

package/src/components/UiDialog/UiDialogContent.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { useMutationObserver, useThrottleFn } from '@vueuse/core'
+import i18n from 'i18next'
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import {
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  useForwardPropsEmits,
+  VisuallyHidden,
+} from 'reka-ui'
+import { computed, ref, useAttrs, watch } from 'vue'
+import UiDialogClose from './UiDialogClose.vue'
+
+interface UiDialogContentProps extends DialogContentProps {
+  title?: string
+  description?: string
+  hideClose?: boolean
+  closeButtonAriaLabel?: string
+  overlayClass?: string
+  contentMode?: 'light' | 'dark'
+  closeButtonMode?: 'light' | 'dark'
+  size?: 'sm' | 'lg' | '2xl' | '3xl' | '5xl' | '7xl'
+  noPadding?: boolean
+  /** When true, disables default scroll handling on the content wrapper, allowing custom scroll behavior */
+  customScroll?: boolean
+}
+
+const props = withDefaults(defineProps<UiDialogContentProps>(), {
+  title: undefined,
+  description: undefined,
+  hideClose: false,
+  closeButtonAriaLabel: i18n.t('general_close'),
+  overlayClass: '',
+  contentMode: 'light',
+  closeButtonMode: undefined,
+  size: 'lg',
+  noPadding: false,
+  customScroll: false,
+})
+
+const sizeClasses: Record<string, string> = {
+  sm: 'max-w-sm',
+  lg: 'max-w-lg',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '5xl': 'max-w-5xl',
+  '7xl': 'max-w-7xl',
+}
+
+const widthClass = computed(() => sizeClasses[props.size] ?? '')
+
+const emits = defineEmits<DialogContentEmits>()
+
+// Forward only the DialogContentProps, not our custom props
+const forwarded = useForwardPropsEmits(props, emits)
+
+// Scroll detection for conditional footer border
+const contentRef = ref<HTMLElement | null>(null)
+const hasScroll = ref(false)
+
+function checkScroll () {
+  if (contentRef.value) {
+    hasScroll.value = contentRef.value.scrollHeight > contentRef.value.clientHeight
+  }
+}
+
+const throttledCheckScroll = useThrottleFn(checkScroll, 100)
+
+const attrs = useAttrs();
+const accessibleTitle = computed(
+  () =>
+    props.title ||
+    (attrs['aria-label'] as string) ||
+    i18n.t('general_dialog_title'),
+);
+const accessibleDescription = computed(
+  () =>
+    props.description ||
+    (attrs['aria-description'] as string),
+);
+
+watch(contentRef, (el) => {
+  if (el) {
+    checkScroll() // Immediate, not throttled
+  }
+}, { immediate: true })
+
+useMutationObserver(contentRef, () => {
+  throttledCheckScroll() // Throttled for performance
+}, {
+  childList: true,
+  subtree: true,
+  attributes: true,
+  attributeFilter: ['style', 'class'],
+})
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      :class="[
+        'fixed inset-0 bg-surface-overlay-alpha z-50',
+        'ui-dialog-overlay',
+        overlayClass,
+      ]"
+    />
+    <div class="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
+      <DialogContent
+        v-bind="{ ...forwarded, ...$attrs }"
+        :class="[
+          'bg-surface-neutral-bg-main rounded-2xl pointer-events-auto focus-indicator-none',
+          'shadow-shadows-drop-shadow-2xl',
+          'w-[95vw] max-h-[85vh]',
+          widthClass,
+          'overflow-hidden flex flex-col',
+          'ui-dialog-content animate-fade-scale',
+          'focus:outline-hidden focus-indicator-none',
+          'm-2',
+          !noPadding && 'py-6'
+        ]"
+        :data-colors-semantic="contentMode"
+      >
+        <VisuallyHidden
+          v-if="!title && accessibleTitle"
+          as-child
+        >
+          <DialogTitle>{{ accessibleTitle }}</DialogTitle>
+        </VisuallyHidden>
+        <!-- Header -->
+        <div
+          v-if="title || !hideClose"
+          :class="[
+            'flex justify-between flex-col',
+            !noPadding && 'px-6',
+          ]"
+        >
+          <div
+            class="flex-1 flex flex-row items-center min-h-10"
+            :class="{'justify-between': !!title, 'justify-end': !title}"
+          >
+            <DialogTitle
+              v-if="title"
+              class="text-title-sm-bold text-text-neutral-base"
+            >
+              {{ title }}
+            </DialogTitle>
+
+            <UiDialogClose
+              v-if="!hideClose"
+              :aria-label="closeButtonAriaLabel"
+              :mode="closeButtonMode ?? contentMode"
+              :class="{
+                'ml-4': !noPadding
+              }"
+            />
+          </div>
+        </div>
+
+        <VisuallyHidden
+          v-if="!description && accessibleDescription"
+          as-child
+        >
+          <DialogDescription>{{ accessibleDescription }}</DialogDescription>
+        </VisuallyHidden>
+        <DialogDescription
+          v-if="description"
+          class="text-content-text-md-regular text-text-neutral-secondary"
+          :class="{
+            'pt-6 px-6': !noPadding,
+            'pb-6': !$slots.footer && !$slots.default,
+            'pb-2': $slots.footer || $slots.default
+          }"
+        >
+          {{ description }}
+        </DialogDescription>
+
+        <!-- Content Slot -->
+        <div
+          v-if="$slots.default"
+          ref="contentRef"
+          :class="[
+            !noPadding && 'px-6',
+            !noPadding && (title || description || !hideClose ? 'pt-4' : 'pt-6'),
+            !noPadding && $slots.footer && 'pb-4',
+            !customScroll && 'overflow-y-auto',
+            'min-h-0 flex-1',
+          ]"
+        >
+          <slot />
+        </div>
+
+        <!-- Footer Slot (optional) -->
+        <div
+          v-if="$slots.footer"
+          :class="[
+            !noPadding && 'px-6 pt-6',
+            hasScroll && 'border-t border-borders-neutral-light',
+          ]"
+        >
+          <slot name="footer" />
+        </div>
+      </DialogContent>
+    </div>
+  </DialogPortal>
+</template>
+
+<style scoped>
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* Overlay animations */
+.ui-dialog-overlay[data-state='open'] {
+  animation: fade-in 150ms ease-out;
+}
+
+.ui-dialog-overlay[data-state='closed'] {
+  animation: fade-out 150ms ease-in;
+}
+
+/* Content animations */
+.ui-dialog-content[data-state='open'] {
+  animation: fade-scale 200ms ease-out;
+}
+
+.ui-dialog-content[data-state='closed'] {
+  animation: fade-scale 150ms ease-in reverse;
+}
+</style>

package/src/components/UiDialog/UiDialogFooter.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UiDialogFooter - A convenience component for dialog footer actions
+</script>
+
+<template>
+  <div class="flex flex-col-reverse sm:flex-row gap-2.5 w-full justify-end">
+    <slot />
+  </div>
+</template>

package/src/components/UiDialog/UiDialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="$attrs">
+    <slot />
+  </DialogTrigger>
+</template>

package/src/components/UiDialog/index.ts

@@ -0,0 +1,18 @@
+// UiDialog exports
+export { default as UiDialog } from './UiDialog.vue'
+export { default as UiDialogTrigger } from './UiDialogTrigger.vue'
+export { default as UiDialogContent } from './UiDialogContent.vue'
+export { default as UiDialogFooter } from './UiDialogFooter.vue'
+export { default as UiDialogClose } from './UiDialogClose.vue'
+export { default as UiDialogMarketplaceHeader } from './MarketplaceHeaderExample.vue'
+
+// Re-export useful Reka UI types and components for advanced usage
+export {
+  DialogClose,
+  DialogDescription,
+  DialogTitle,
+  type DialogRootProps,
+  type DialogRootEmits,
+  type DialogContentProps,
+  type DialogContentEmits,
+} from 'reka-ui'

package/src/components/UiDropdown/UiDropdown.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, provide } from 'vue'
+import { UI_DROPDOWN_MULTIPLE_KEY } from './context'
+
+// `SelectRoot` accepts many more props than we expose here; explicit prop
+// declarations are documentation-driven. Storybook autodocs and Vue's
+// `defineProps` cannot introspect external types like `SelectRootProps`,
+// so anything we want surfaced in editor/type/docs must be listed here.
+// Everything else passes through via `useForwardPropsEmits` + `$attrs`.
+interface Props extends SelectRootProps {
+  /**
+   * Selected value. Pass a `string` for single-select, or a `string[]` when
+   * `multiple` is enabled.
+   */
+  modelValue?: string | string[]
+  /**
+   * Enable multi-select mode. When set, `v-model` must be bound to an array;
+   * clicking an option toggles its value and the menu stays open between
+   * selections.
+   */
+  multiple?: boolean
+  /** Open the dropdown on mount (uncontrolled). */
+  defaultOpen?: boolean
+  /** Disable the entire dropdown. */
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  multiple: false,
+  defaultOpen: false,
+  disabled: false,
+})
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+
+// Expose `multiple` to descendant `UiDropdownItem`s so they can render the
+// leading checkbox automatically in multi-select mode.
+provide(UI_DROPDOWN_MULTIPLE_KEY, computed(() => props.multiple))
+</script>
+<template>
+  <SelectRoot v-bind="{ ...forwarded, ...$attrs }">
+    <slot />
+  </SelectRoot>
+</template>