@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/UiInputTextarea/UiInputTextarea.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import UiFieldWrapper from '../UiFieldWrapper/UiFieldWrapper.vue'
+import type { TextareaSize } from './types'
+
+interface UiInputTextareaProps {
+  size?: TextareaSize
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  loading?: boolean
+  error?: boolean
+  label?: string
+  required?: boolean
+  labelInfo?: string
+  helperMessage?: string
+  errorMessage?: string
+  maxlength?: number
+  rows?: number
+  name?: string
+  id?: string
+  resizable?: boolean
+  ariaDescribedby?: string
+}
+
+const props = withDefaults(defineProps<UiInputTextareaProps>(), {
+  size: 'md',
+  disabled: false,
+  loading: false,
+  error: false,
+  required: false,
+  placeholder: '',
+  modelValue: '',
+  rows: 3,
+  resizable: true,
+  ariaDescribedby: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+  'keydown': [event: KeyboardEvent]
+  'keyup': [event: KeyboardEvent]
+}>()
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const isFocused = ref(false)
+
+const minHeight = computed(() => {
+  const lineHeight = { sm: 1.25, md: 1.5, lg: 1.5, xl: 1.75 }
+  const paddingY = { sm: 0.25, md: 0.5, lg: 0.5, xl: 0.5 }
+  return `${props.rows * lineHeight[props.size] + paddingY[props.size] * 2}rem`
+})
+
+const textareaClasses = computed(() => {
+  const baseClasses = [
+    'ui-textarea',
+    'block relative w-full rounded-md transition-colors',
+    'text-text-neutral-base',
+    'placeholder:text-text-neutral-tertiary',
+    'focus:outline-hidden',
+  ]
+
+  const sizeClasses = {
+    sm: 'px-2 py-1 text-content-legends-medium-md',
+    md: 'px-3 py-2 text-content-text-md-regular',
+    lg: 'px-4 py-2 text-content-text-md-regular',
+    xl: 'px-4 py-2 text-content-text-lg-regular',
+  }
+
+  baseClasses.push(sizeClasses[props.size])
+
+  if (props.resizable) {
+    baseClasses.push('resize-y')
+  } else {
+    baseClasses.push('resize-none')
+  }
+
+  if (props.error) {
+    baseClasses.push(
+      'bg-actions-danger-idle-alpha-light',
+      'border', 'border-borders-danger-strong',
+    )
+  } else {
+    baseClasses.push(
+      'bg-actions-neutral-idle-alpha-light',
+      'border', 'border-borders-neutral-strong',
+    )
+  }
+
+  if (props.disabled) {
+    baseClasses.push('opacity-50 cursor-not-allowed')
+  } else if (!props.loading) {
+    baseClasses.push('hover:bg-actions-neutral-hover-overlay')
+  }
+
+  if (isFocused.value && !props.disabled && !props.loading) {
+    if (props.error) {
+      baseClasses.push('border-borders-danger-strong', 'ring-1', 'ring-inset', 'ring-borders-danger-strong')
+    } else {
+      baseClasses.push('border-actions-primary-idle-alpha-strong', 'ring-1', 'ring-inset', 'ring-focus-ring')
+    }
+  }
+
+  return baseClasses
+})
+
+const characterCount = computed(() => {
+  if (!props.maxlength) return null
+  return `${props.modelValue?.length || 0}/${props.maxlength}`
+})
+
+function handleInput (event: Event) {
+  const target = event.target as HTMLTextAreaElement
+  emit('update:modelValue', target.value)
+}
+
+function handleFocus (event: FocusEvent) {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+function handleBlur (event: FocusEvent) {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+function handleKeydown (event: KeyboardEvent) {
+  emit('keydown', event)
+}
+
+function handleKeyup (event: KeyboardEvent) {
+  emit('keyup', event)
+}
+
+defineExpose({
+  focus: () => textareaRef.value?.focus(),
+  blur: () => textareaRef.value?.blur(),
+})
+</script>
+
+<template>
+  <UiFieldWrapper
+    :id="id"
+    :label="label"
+    :required="required"
+    :label-info="labelInfo"
+    :error="error"
+    :helper-message="helperMessage"
+    :error-message="errorMessage"
+  >
+    <template #default="{ fieldId }">
+      <div class="relative">
+        <!-- Loading State -->
+        <div
+          v-if="loading"
+          :class="textareaClasses"
+          :style="{ minHeight }"
+        >
+          <div class="flex flex-col gap-2">
+            <div class="h-3 w-24 bg-surface-neutral-alpha-400 rounded-md animate-pulse" />
+            <div class="h-3 flex-1 bg-surface-neutral-alpha-100 rounded-md" />
+          </div>
+        </div>
+
+        <!-- Textarea Element -->
+        <textarea
+          v-else
+          :id="id || fieldId"
+          ref="textareaRef"
+          :value="modelValue"
+          :name="name"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :rows="rows"
+          :maxlength="maxlength"
+          :class="textareaClasses"
+          :style="{ minHeight }"
+          :aria-invalid="error"
+          :aria-describedby="ariaDescribedby || ((helperMessage || errorMessage) ? `${fieldId}-message` : undefined)"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @keydown="handleKeydown"
+          @keyup="handleKeyup"
+        />
+      </div>
+    </template>
+
+    <template
+      v-if="characterCount"
+      #footer
+    >
+      <span class="text-content-legends-medium-md text-text-neutral-tertiary ml-auto">
+        {{ characterCount }}
+      </span>
+    </template>
+  </UiFieldWrapper>
+</template>
+
+<style scoped>
+.ui-textarea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.ui-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ui-textarea::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-alpha-dark-400);
+  border-radius: 4px;
+}
+
+.ui-textarea::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neutral-alpha-dark-500);
+}
+</style>

package/src/components/UiInputTextarea/index.ts

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

package/src/components/UiInputTextarea/types.ts

@@ -0,0 +1 @@
+export type TextareaSize = 'sm' | 'md' | 'lg' | 'xl'

package/src/components/UiLabel/UiLabel.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+interface Props {
+  label?: string | null
+  forId: string | undefined
+  tooltip?: string | null
+  required?: boolean
+  labelClass?: HTMLAttributes['class']
+  labelColor: string | undefined
+}
+
+withDefaults(defineProps<Props>(), {
+  label: null,
+  tooltip: null,
+  required: false,
+  labelClass: undefined,
+})
+
+</script>
+
+<template>
+  <div class="mb-1 flex items-center text-content-legends-bold-md text-text-neutral-tertiary">
+    <label
+      v-tooltip="tooltip"
+      :for="forId"
+      :class="labelClass"
+      :style="{
+        color: labelColor,
+      }"
+      v-html="required ? `${label}*` : label"
+    />
+  </div>
+</template>

package/src/components/UiList/UiList.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+const props = withDefaults(defineProps<{
+  maxContentHeight?: number
+  stickyFooter?: boolean
+  contentClass?: string
+  containerClass?: string
+  footerClass?: string
+}>(), {
+  stickyFooter: false,
+  contentClass: '',
+  containerClass: '',
+  footerClass: '',
+})
+
+const slots = useSlots()
+
+const hasFooterSlot = computed(() => !!slots.footer)
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 bg-surface-neutral-300"
+    :class="containerClass"
+  >
+    <div
+      class="flex flex-col gap-2 overflow-y-auto"
+      :class="contentClass"
+      :style="{
+        maxHeight: props.maxContentHeight ? `${props.maxContentHeight}px` : 'calc(100vh - 200px)',
+      }"
+    >
+      <slot />
+    </div>
+
+    <div
+      v-if="hasFooterSlot"
+      class="shrink-0 sticky bottom-0 bg-surface-neutral-300"
+      :class="footerClass"
+    >
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/UiListItem/UiListItem.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+const VARIANTS = [
+  'default',
+  'title',
+  'spacer-xs',
+  'metadata', // NOT IMPLEMENTED
+  'spacer-null', // NOT IMPLEMENTED
+  'divider', // NOT IMPLEMENTED
+  'divider-full', // NOT IMPLEMENTED
+  'spacer-md', // NOT IMPLEMENTED
+  'spacer-sm', // NOT IMPLEMENTED
+] as const
+export type Variant = typeof VARIANTS[number]
+
+const COLORS = ['primary', 'neutral', 'success', 'warning', 'error', 'neutral-invert'] as const
+export type Color = typeof COLORS[number]
+
+const props = defineProps<{
+  variant?: Variant
+  selected?: boolean
+  isActive?: boolean
+  label?: string
+  icon?: string
+  iconEnd?: string
+  additionalInfo?: string
+  to?: RouteLocationRaw
+  href?: string
+}>()
+
+const slots = useSlots()
+const hasAvatarSlot = computed(() => !!slots.avatar)
+const hasAsideSlot = computed(() => !!slots.aside)
+
+const cssClasses = computed(() => {
+  return {
+    'text-content-text-md-regular default min-h-10 hover:bg-actions-primary-hover-overlay': props.variant === 'default',
+    'text-content-legends-bold-md title min-h-7': props.variant === 'title',
+    'spacer-xs h-8': props.variant === 'spacer-xs',
+    'is-active bg-actions-primary-active-overlay': props.isActive && props.variant === 'default',
+  }
+})
+</script>
+
+<template>
+  <div
+    :class="cssClasses"
+    class="flex items-center gap-2 relative rounded-xl px-3"
+  >
+    <slot
+      v-if="hasAvatarSlot"
+      name="avatar"
+    />
+
+    <div>
+      <template v-if="props.label">
+        {{ props.label }}
+      </template>
+      <slot />
+
+      <template v-if="props.variant?.startsWith('spacer')">
+        <div class="h-2 p-2" />
+      </template>
+    </div>
+
+    <slot
+      v-if="hasAsideSlot"
+      name="aside"
+    />
+
+    <slot />
+
+    <router-link
+      v-if="to && !href"
+      :to="to"
+      class="absolute inset-0 focus:outline-hidden rounded-xl"
+    />
+    <a
+      v-else-if="href"
+      :href="href"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="absolute inset-0 focus:outline-hidden rounded-xl"
+    />
+
+    <div
+      v-if="iconEnd"
+      :class="iconEnd"
+    />
+  </div>
+</template>
+
+<style scoped>
+.default {
+  color: var(--color-actions-neutral-idle);
+}
+
+.title {
+  color: var(--color-text-neutral-tertiary);
+}
+
+.is-active {
+  background-color: var(--color-actions-primary-active-overlay);
+  color: var(--color-actions-primary-idle);
+}
+</style>

package/src/components/UiLoader/UiLoader.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <svg
+      :class="[
+        sizeClass,
+        'text-action-neutral-idle animate-spin',
+      ]"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-20"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-100"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value: string) => ['sm', 'md', 'lg'].includes(value),
+  },
+})
+
+const sizeClass = computed(() => {
+  if (props.size === 'sm') return 'size-4'
+  if (props.size === 'md') return 'size-6'
+  if (props.size === 'lg') return 'size-8'
+  return 'size-6'
+})
+</script>

package/src/components/UiLogo/UiLogo.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import TornadoVariant from "./variants/TornadoVariant.vue";
+import PulseVariant from "./variants/PulseVariant.vue";
+
+// CSS/svg remake of the lottie tornado logo (UiAnimatedLogo), with themable
+// colors. Animations live in variants/.
+// A variant renders the .badge/.mark paths, keeps its keyframes in its own
+// scoped style, and tags animated elements with .motion — then goes in the
+// VARIANTS map.
+
+type UiLogoVariant = "tornado" | "pulse";
+
+interface Props {
+    variant?: UiLogoVariant;
+    height: number;
+    width: number;
+    /** Follow the brand palette (--color-brand-800) instead of the Livestorm navy. */
+    themed?: boolean;
+    /** Dark badge + white mark, for light backgrounds. */
+    inverted?: boolean;
+    /** When false, renders the static logo (the resting pose). */
+    animated?: boolean;
+}
+
+// vue casts absent boolean props to false, hence the explicit defaults
+const props = withDefaults(defineProps<Props>(), {
+    variant: "tornado",
+    themed: false,
+    inverted: false,
+    animated: true,
+});
+
+const VARIANTS = {
+    tornado: TornadoVariant,
+    pulse: PulseVariant,
+} as const;
+
+const variantComponent = computed(() => VARIANTS[props.variant]);
+
+const markColor = computed(() =>
+    props.themed ? "var(--color-brand-800, #112660)" : "#112660",
+);
+
+const colorVars = computed(() => {
+    if (props.inverted) {
+        return {
+            "--ui-logo-badge": markColor.value,
+            "--ui-logo-mark": "#ffffff",
+        };
+    }
+
+    if (props.themed) {
+        return { "--ui-logo-mark": markColor.value };
+    }
+
+    // no inline vars, so a parent can still override --ui-logo-*
+    return {};
+});
+</script>
+
+<template>
+  <div class="ui-logo-loader">
+    <svg
+      class="ui-logo"
+      :class="{ 'ui-logo--static': !props.animated }"
+      :style="{
+        height: props.height + 'rem',
+        width: props.width + 'rem',
+        ...colorVars,
+      }"
+      viewBox="0 0 600 600"
+      role="img"
+      aria-label="Livestorm"
+    >
+      <component :is="variantComponent" />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.ui-logo :deep(.badge) {
+    fill: var(--ui-logo-badge, #ffffff);
+}
+
+.ui-logo :deep(.mark) {
+    fill: var(--ui-logo-mark, #112660);
+}
+
+.ui-logo--static :deep(.motion) {
+    animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ui-logo :deep(.motion) {
+        animation: none;
+    }
+}
+</style>

package/src/components/UiLogo/variants/PulseVariant.vue

@@ -0,0 +1,51 @@
+<template>
+  <!--
+    Mark rows fade in a staggered wave, top to bottom. Same loop duration as
+    the tornado so the two feel related.
+  -->
+  <path
+    class="badge"
+    d="M532.48 300.0C532.48 364.22 534.64 439.0 486.84 486.96C439.04 534.92 364.22 532.48 300.0 532.48C235.78 532.48 161.0 534.63 113.04 486.84C65.08 439.04 67.52 364.22 67.52 300.0C67.52 235.79 65.41 161.0 113.2 113.04C161.0 65.08 235.83 67.52 300.0 67.52C364.18 67.52 439.0 65.41 486.96 113.2C534.92 161.0 532.48 235.83 532.48 300.0Z"
+  />
+  <g class="motion pulse--row-1">
+    <path
+      class="mark"
+      d="M176.97 177.96C163.72 177.96 152.97 188.71 152.97 201.97C152.97 215.23 163.72 225.98 176.97 225.98L326.25 225.98C339.5 225.98 350.25 215.23 350.25 201.97C350.25 188.71 339.5 177.96 326.25 177.96L176.97 177.96Z"
+    />
+    <path
+      class="mark"
+      d="M447.98 201.97C447.98 188.71 437.23 177.96 423.97 177.96C410.71 177.96 399.97 188.71 399.97 201.97C399.97 215.23 410.71 225.98 423.97 225.98C437.23 225.98 447.98 215.23 447.98 201.97Z"
+    />
+  </g>
+  <path
+    class="mark motion pulse--row-2"
+    d="M375.96 276.45L226.06 276.45C212.8 276.45 202.05 287.2 202.05 300.46C202.05 313.72 212.8 324.47 226.06 324.47L375.96 324.47C389.22 324.47 399.97 313.72 399.97 300.46C399.97 287.2 389.22 276.45 375.96 276.45Z"
+  />
+  <path
+    class="mark motion pulse--row-3"
+    d="M326.88 374.98L275.13 374.98C261.88 374.98 251.13 385.73 251.13 398.99C251.13 412.25 261.88 422.99 275.13 422.99L326.88 422.99C340.14 422.99 350.89 412.25 350.89 398.99C350.89 385.73 340.14 374.98 326.88 374.98Z"
+  />
+</template>
+
+<style scoped>
+.motion {
+    animation-name: ui-logo-pulse;
+    animation-duration: 1640ms;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+}
+
+.pulse--row-2 {
+    animation-delay: 180ms;
+}
+
+.pulse--row-3 {
+    animation-delay: 360ms;
+}
+
+@keyframes ui-logo-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+}
+</style>