@livestorm/ui-vue 1.1.3 → 2.0.0

package/src/components/UiTable/UiTableHeaderCell.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { inject, computed, unref, type Ref } from 'vue'
+
+const variant = inject<Ref<'condensed' | 'large'>>('tableVariant')
+
+const cellClasses = computed(() => ({
+  'h-10': unref(variant) === 'condensed',
+  'h-12': unref(variant) === 'large',
+}))
+</script>
+
+<template>
+  <th
+    :class="cellClasses"
+    class="px-3 py-1 text-left text-content-legends-bold-md text-text-neutral-tertiary"
+  >
+    <slot />
+  </th>
+</template>

package/src/components/UiTable/UiTableRow.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { inject, computed, provide, unref, type Ref } from 'vue'
+
+export interface UiTableRowProps {
+  isEven?: boolean
+}
+
+const props = defineProps<UiTableRowProps>()
+
+const variant = inject<Ref<'condensed' | 'large'>>('tableVariant')
+
+provide('rowIsEven', props.isEven)
+
+const rowClasses = computed(() => ({
+  'h-12': unref(variant) === 'condensed',
+  'h-20': unref(variant) === 'large',
+}))
+</script>
+
+<template>
+  <tr
+    :class="rowClasses"
+    class="group"
+  >
+    <slot />
+  </tr>
+</template>

package/src/components/UiTable/index.ts

@@ -0,0 +1,6 @@
+export { default as UiTable } from './UiTable.vue'
+export { default as UiTableHeader } from './UiTableHeader.vue'
+export { default as UiTableHeaderCell } from './UiTableHeaderCell.vue'
+export { default as UiTableBody } from './UiTableBody.vue'
+export { default as UiTableRow } from './UiTableRow.vue'
+export { default as UiTableCell } from './UiTableCell.vue'

package/src/components/UiTabs/UiTabs.vue

@@ -0,0 +1,218 @@
+<!-- UiTabs.vue - Tabs Component -->
+<script setup lang="ts">
+import { computed, ref, watch, nextTick, onMounted, onBeforeUnmount, type Slot, type ComponentPublicInstance } from 'vue'
+import { useResizeObserver, useDebounceFn } from '@vueuse/core'
+
+export interface Tab {
+  /** Unique identifier for the tab */
+  value: string
+  /** Label text to display */
+  label: string
+  /** Optional icon */
+  icon?: string
+  /** Whether the tab is disabled */
+  disabled?: boolean
+}
+
+export interface UiTabsProps {
+  /** Array of tab items */
+  tabs: Tab[]
+  /** Currently active tab value */
+  modelValue: string
+  /** Size of the tabs */
+  size?: 'sm' | 'md'
+}
+
+const props = withDefaults(defineProps<UiTabsProps>(), {
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const slots = defineSlots<{
+  badge?(): Slot
+}>()
+
+const hasBadgeSlot = computed(() => !!slots.badge)
+
+const sizeClasses = computed(() => {
+  return {
+    container: 'gap-4',
+    tab: props.size === 'sm' ? 'pb-4' : 'pb-6',
+    text: props.size === 'sm' ? 'text-action-button-sm' : 'text-action-button-md',
+  }
+})
+
+// Sliding indicator position and width
+const indicatorStyle = ref({
+  transform: 'translateX(0px)',
+  width: '0px',
+})
+
+const tabsContainer = ref<HTMLElement | null>(null)
+const tabRefs = ref<Map<string, HTMLElement>>(new Map())
+
+// Get valid non-disabled tab values
+const validTabs = computed(() => props.tabs.filter(tab => !tab.disabled))
+
+function selectTab (value: string) {
+  const tab = props.tabs.find(t => t.value === value)
+  if (tab?.disabled) return
+  emit('update:modelValue', value)
+}
+
+function isActive (value: string) {
+  return props.modelValue === value
+}
+
+/**
+ * Template ref callback to maintain a Map of tab elements
+ */
+function setTabRef (el: Element | ComponentPublicInstance | null, tabValue: string) {
+  if (el && el instanceof HTMLElement) {
+    tabRefs.value.set(tabValue, el)
+  } else {
+    tabRefs.value.delete(tabValue)
+  }
+}
+
+/**
+ * Handle keyboard navigation for accessibility
+ * Supports Arrow keys, Home, and End
+ */
+function handleKeydown (event: KeyboardEvent, currentValue: string) {
+  const validTabValues = validTabs.value.map(t => t.value)
+  const currentIndex = validTabValues.indexOf(currentValue)
+
+  let nextIndex = currentIndex
+
+  switch (event.key) {
+    case 'ArrowLeft':
+    case 'ArrowUp':
+      event.preventDefault()
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : validTabValues.length - 1
+      break
+    case 'ArrowRight':
+    case 'ArrowDown':
+      event.preventDefault()
+      nextIndex = currentIndex < validTabValues.length - 1 ? currentIndex + 1 : 0
+      break
+    case 'Home':
+      event.preventDefault()
+      nextIndex = 0
+      break
+    case 'End':
+      event.preventDefault()
+      nextIndex = validTabValues.length - 1
+      break
+    default:
+      return
+  }
+
+  const nextValue = validTabValues[nextIndex]
+  if (nextValue) {
+    selectTab(nextValue)
+    // Focus the newly selected tab
+    nextTick(() => {
+      tabRefs.value.get(nextValue)?.focus()
+    })
+  }
+}
+
+function updateIndicatorPosition () {
+  if (!tabsContainer.value) return
+
+  const activeButton = tabRefs.value.get(props.modelValue)
+  if (!activeButton) return
+
+  const containerRect = tabsContainer.value.getBoundingClientRect()
+  const buttonRect = activeButton.getBoundingClientRect()
+
+  indicatorStyle.value = {
+    transform: `translateX(${buttonRect.left - containerRect.left}px)`,
+    width: `${buttonRect.width}px`,
+  }
+}
+
+const debouncedUpdatePosition = useDebounceFn(updateIndicatorPosition, 100)
+
+watch([() => props.modelValue, () => props.tabs], async () => {
+  await nextTick()
+  if (props.tabs.find(t => t.value === props.modelValue)) {
+    updateIndicatorPosition()
+  }
+})
+
+onMounted(async () => {
+  await nextTick()
+  updateIndicatorPosition()
+})
+
+useResizeObserver(tabsContainer, debouncedUpdatePosition)
+
+onBeforeUnmount(() => {
+  tabRefs.value.clear()
+})
+</script>
+
+<template>
+  <div class="ui-tabs border-b border-borders-neutral-light relative">
+    <div
+      ref="tabsContainer"
+      role="tablist"
+      class="flex items-center"
+      :class="sizeClasses.container"
+    >
+      <button
+        v-for="tab in tabs"
+        :key="tab.value"
+        :ref="(el) => setTabRef(el, tab.value)"
+        type="button"
+        role="tab"
+        :aria-selected="isActive(tab.value)"
+        :aria-disabled="tab.disabled"
+        :tabindex="isActive(tab.value) ? 0 : -1"
+        class="relative outline-none flex items-center gap-2 cursor-pointer font-semibold transition-colors duration-150"
+        :class="[
+          sizeClasses.tab,
+          sizeClasses.text,
+          {
+            'text-actions-primary-idle': isActive(tab.value),
+            'text-actions-neutral-idle-alpha-strong hover:text-actions-neutral-idle': !isActive(tab.value) && !tab.disabled,
+            'text-actions-neutral-idle-alpha-strong cursor-not-allowed opacity-50': tab.disabled,
+          },
+        ]"
+        :disabled="tab.disabled"
+        @click="selectTab(tab.value)"
+        @keydown="handleKeydown($event, tab.value)"
+      >
+        <span
+          v-if="tab.icon"
+          :class="tab.icon"
+          class="w-4 h-4"
+        />
+        <span>{{ tab.label }}</span>
+        <div
+          v-if="hasBadgeSlot"
+          class="w-4 h-4"
+        >
+          <slot
+            name="badge"
+            :tab="tab"
+          />
+        </div>
+      </button>
+    </div>
+
+    <!-- Sliding indicator -->
+    <div
+      class="absolute -bottom-px left-0 h-0.5 bg-actions-primary-idle transition-[transform,width] duration-[250ms] ease-out will-change-[transform,width]"
+      :style="{
+        transform: indicatorStyle.transform,
+        width: indicatorStyle.width,
+      }"
+    />
+  </div>
+</template>

package/src/components/UiTabs/index.ts

@@ -0,0 +1,5 @@
+// UiTabs exports
+export { default as UiTabs } from './UiTabs.vue'
+
+// Re-export types
+export type { UiTabsProps, Tab } from './UiTabs.vue'

package/src/components/UiTag/UiTag.vue

@@ -0,0 +1,187 @@
+<template>
+  <span
+    :class="tagClasses"
+    :data-size="size"
+    :data-color="color"
+    :data-variant="variant"
+    :data-hover-effect="withHoverEffect"
+  >
+    <!-- Left icon -->
+    <span
+      v-if="$slots['left-icon']"
+      :class="iconClasses"
+      class="ui-tag-icon shrink-0 flex items-center justify-center"
+    >
+      <slot name="left-icon" />
+    </span>
+
+    <!-- Label content -->
+    <span class="ui-tag-label">
+      <slot>{{ label }}</slot>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /**
+   * Size of the tag
+   */
+  size?: 'xxs' | 'xs' | 'sm' | 'md'
+  /**
+   * Color variant of the tag
+   */
+  color?: 'primary' | 'neutral' | 'danger' | 'warning' | 'success' | 'neutral-invert'
+  /**
+   * Variant of the tag
+   */
+  variant?: 'light' | 'strong'
+  /**
+   * Label text for the tag
+   */
+  label?: string
+  /**
+   * Whether to show hover effects
+   */
+  withHoverEffect?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  color: 'neutral',
+  variant: 'light',
+  label: '',
+  withHoverEffect: false,
+})
+
+const tagClasses = computed(() => {
+  const baseClasses = [
+    'ui-tag',
+    'inline-flex',
+    'items-center',
+    'rounded-3xl',
+    'transition-colors',
+    'duration-150',
+    'ease-in-out',
+    'text-center',
+  ]
+
+  // Size classes
+  const sizeClasses = {
+    xxs: ['px-1.5', 'gap-1', 'text-content-badges-bold-md', 'h-4'],
+    xs: ['px-1.5', 'py-1', 'gap-1', 'text-content-badges-bold-md', 'h-6'],
+    sm: ['px-2', 'py-1', 'gap-1', 'text-content-text-md-bold', 'h-8'],
+    md: ['px-3', 'py-1', 'gap-2', 'text-content-text-md-bold', 'h-10'],
+  }
+
+  // Color and variant classes
+  const colorVariantClasses = {
+    primary: {
+      light: ['bg-actions-primary-active-overlay', 'text-actions-primary-idle'],
+      strong: ['bg-actions-primary-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+    },
+    neutral: {
+      light: ['bg-actions-neutral-active-overlay', 'text-actions-neutral-idle'],
+      strong: ['bg-actions-neutral-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+    },
+    danger: {
+      light: ['bg-actions-danger-active-overlay', 'text-actions-danger-idle'],
+      strong: ['bg-actions-danger-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+    },
+    warning: {
+      light: ['bg-actions-warning-active-overlay', 'text-actions-warning-idle'],
+      strong: ['bg-actions-warning-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+    },
+    success: {
+      light: ['bg-actions-success-active-overlay', 'text-actions-success-idle'],
+      strong: ['bg-actions-success-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+    },
+    'neutral-invert': {
+      light: ['bg-actions-neutral-invert-active-overlay', 'text-actions-neutral-invert-idle'],
+      strong: ['bg-actions-neutral-invert-idle-alpha-strong', 'text-actions-neutral-idle'],
+    },
+  }
+
+  return [
+    ...baseClasses,
+    ...sizeClasses[props.size],
+    ...colorVariantClasses[props.color][props.variant],
+  ]
+})
+
+const iconClasses = computed(() => {
+  const sizeClasses = {
+    xxs: 'w-2.5 h-2.5',
+    xs: 'w-2.5 h-2.5',
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4',
+  }
+
+  return sizeClasses[props.size]
+})
+
+</script>
+
+<style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+/* Focus ring */
+.ui-tag:focus-visible {
+  @apply ring-2 ring-inset ring-focus-ring;
+}
+
+/* Hover states - only apply when withHoverEffect is true */
+.ui-tag[data-hover-effect="true"][data-color="primary"][data-variant="light"]:hover {
+  @apply bg-actions-primary-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="primary"][data-variant="strong"]:hover {
+  @apply bg-actions-primary-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="neutral"][data-variant="light"]:hover {
+  @apply bg-actions-neutral-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="neutral"][data-variant="strong"]:hover {
+  @apply bg-actions-neutral-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="danger"][data-variant="light"]:hover {
+  @apply bg-actions-danger-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="danger"][data-variant="strong"]:hover {
+  @apply bg-actions-danger-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="warning"][data-variant="light"]:hover {
+  @apply bg-actions-warning-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="warning"][data-variant="strong"]:hover {
+  @apply bg-actions-warning-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="success"][data-variant="light"]:hover {
+  @apply bg-actions-success-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="success"][data-variant="strong"]:hover {
+  @apply bg-actions-success-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="neutral-invert"][data-variant="light"]:hover {
+  @apply bg-actions-neutral-invert-hover-overlay;
+}
+
+.ui-tag[data-hover-effect="true"][data-color="neutral-invert"][data-variant="strong"]:hover {
+  @apply bg-actions-neutral-invert-hover-overlay;
+}
+
+.ui-tag-label {
+  @apply flex-1;
+}
+</style>

package/src/components/UiTag/index.js

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