@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/components/UiEmojiPickerList/UiEmojiPickerList.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStorage } from '@vueuse/core'
+import EmojiPicker from 'vue-frimousse'
+import { useControlShape } from '../../composables/useControlShape'
+
+interface UiEmojiPickerListProps {
+  locale?: string
+  searchPlaceholder?: string
+  loadingLabel?: string
+  emptyLabel?: string
+  previewPlaceholder?: string
+  skinToneLabel?: string
+}
+
+const props = withDefaults(defineProps<UiEmojiPickerListProps>(), {
+  locale: 'en',
+  searchPlaceholder: 'Search emoji...',
+  loadingLabel: 'Loading...',
+  emptyLabel: 'No emoji found',
+  previewPlaceholder: 'Change emoji skintone',
+  skinToneLabel: 'Change skin tone',
+})
+
+const emit = defineEmits<{ select: [emoji: string] }>()
+
+type SkinTone = 'none' | 'light' | 'medium-light' | 'medium' | 'medium-dark' | 'dark'
+const skinTones: SkinTone[] = ['none', 'light', 'medium-light', 'medium', 'medium-dark', 'dark']
+const preferredSkinTone = useStorage<SkinTone>('livestorm:emoji-skin-tone', 'none')
+
+const searchShape = useControlShape('field', 'sm')
+
+const locale = computed(() => props.locale.toLowerCase().replace('_', '-'))
+
+function selectEmoji (emoji: { emoji: string }): void {
+  emit('select', emoji.emoji)
+}
+
+function cycleSkinTone (): void {
+  const currentIndex = skinTones.indexOf(preferredSkinTone.value)
+  preferredSkinTone.value = skinTones[(currentIndex + 1) % skinTones.length] ?? 'none'
+}
+</script>
+
+<template>
+  <EmojiPicker.Root
+    :locale="locale"
+    :columns="9"
+    :skin-tone="preferredSkinTone"
+    :on-emoji-select="selectEmoji"
+    class="flex flex-col gap-2"
+  >
+    <EmojiPicker.Search
+      class="w-full border border-borders-neutral-default bg-surface-neutral-bg-main px-2 text-content-legends-medium-md text-text-neutral-base outline-none placeholder:text-text-neutral-tertiary focus-visible:focus-ring"
+      :class="[searchShape.height, searchShape.radius]"
+      :placeholder="searchPlaceholder"
+    />
+
+    <EmojiPicker.Viewport class="box-border h-64 pr-2">
+      <EmojiPicker.Loading class="flex h-64 items-center justify-center text-content-legends-medium-md text-text-neutral-tertiary">
+        {{ loadingLabel }}
+      </EmojiPicker.Loading>
+      <EmojiPicker.Empty class="flex h-64 items-center justify-center text-content-legends-medium-md text-text-neutral-tertiary">
+        {{ emptyLabel }}
+      </EmojiPicker.Empty>
+      <EmojiPicker.List class="flex w-full flex-col gap-2">
+        <template #category-header="{ category }">
+          <div class="bg-surface-neutral-bg-main py-1 text-content-legends-bold-md text-text-neutral-secondary">
+            {{ category.label }}
+          </div>
+        </template>
+
+        <template #emoji="{ emoji }">
+          <button
+            type="button"
+            :aria-label="emoji.label"
+            class="flex size-button-sm w-full! items-center justify-center rounded-button-sm text-xl leading-none hover:bg-actions-neutral-hover-overlay data-[active]:bg-actions-neutral-hover-overlay"
+          >
+            {{ emoji.emoji }}
+          </button>
+        </template>
+      </EmojiPicker.List>
+    </EmojiPicker.Viewport>
+
+    <div class="flex h-10 items-center justify-between gap-2 border-t border-divider pt-2">
+      <EmojiPicker.ActiveEmoji>
+        <template #default="{ emoji }">
+          <span
+            v-if="emoji"
+            class="flex h-6 min-w-0 flex-1 items-center gap-2 text-content-legends-medium-md text-text-neutral-secondary"
+          >
+            <span class="flex size-6 shrink-0 items-center justify-center text-xl leading-none">{{ emoji.emoji }}</span>
+            <span class="min-w-0 truncate">{{ emoji.label }}</span>
+          </span>
+          <span
+            v-else
+            class="flex h-6 min-w-0 flex-1 items-center text-content-legends-medium-md text-text-neutral-secondary"
+          >{{ previewPlaceholder }}</span>
+        </template>
+      </EmojiPicker.ActiveEmoji>
+
+      <EmojiPicker.SkinToneSelector
+        class="flex size-button-sm shrink-0 items-center justify-center rounded-button-sm text-xl leading-none hover:bg-actions-neutral-hover-overlay"
+        :aria-label="skinToneLabel"
+        @click="cycleSkinTone"
+      />
+    </div>
+  </EmojiPicker.Root>
+</template>
+
+<style scoped>
+:deep([frimousse-row]) {
+  display: grid !important;
+  width: 100%;
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+  gap: 0.125rem;
+}
+
+:deep([frimousse-row] > [frimousse-emoji]) {
+  min-width: 0;
+}
+</style>

package/src/components/UiEmptyState/UiEmptyState.vue

@@ -1,6 +1,7 @@
 <!-- UiEmptyState.vue - Empty state component for showing placeholder content with optional illustration and actions. -->
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
 
 export interface UiEmptyStateProps {
   /** Title shown as the primary heading */
@@ -9,6 +10,8 @@ export interface UiEmptyStateProps {
   description?: string
   /** Optional illustration image URL */
   image?: string
+  /** Optional .lottie animation URL, takes precedence over `image` */
+  lottieSrc?: string
   /** Layout orientation. `vertical` stacks the illustration above the text; `horizontal` places it to the right. */
   variant?: 'vertical' | 'horizontal'
 }
@@ -16,6 +19,7 @@ export interface UiEmptyStateProps {
 const props = withDefaults(defineProps<UiEmptyStateProps>(), {
   description: undefined,
   image: undefined,
+  lottieSrc: undefined,
   variant: 'vertical',
 })
 
@@ -32,8 +36,14 @@ const isHorizontal = computed(() => props.variant === 'horizontal')
       ? 'flex-row items-center max-w-[576px] min-w-[384px]'
       : 'flex-col items-center max-w-[320px] min-w-[256px]'"
   >
+    <DotLottieVue
+      v-if="lottieSrc && !isHorizontal"
+      :src="lottieSrc"
+      autoplay
+      class="w-[270px]"
+    />
     <img
-      v-if="image && !isHorizontal"
+      v-else-if="image && !isHorizontal"
       :src="image"
       alt=""
       class="w-[270px]"
@@ -51,10 +61,12 @@ const isHorizontal = computed(() => props.variant === 'horizontal')
           {{ title }}
         </h3>
         <p
-          v-if="description"
-          class="text-content-text-md-regular text-text-neutral-tertiary"
+          v-if="description || $slots.description"
+          class="text-content-text-md-medium text-text-neutral-tertiary"
         >
-          {{ description }}
+          <slot name="description">
+            {{ description }}
+          </slot>
         </p>
       </div>
 

package/src/components/UiFieldWrapper/UiFieldWrapper.vue

@@ -45,7 +45,7 @@ defineExpose({ fieldId })
     >
       <Label
         :for="fieldId"
-        class="text-content-legends-bold-md text-text-neutral-tertiary"
+        class="text-content-legends-bold-md text-text-neutral-secondary"
       >
         {{ label }}{{ required ? '*' : '' }}
       </Label>
@@ -54,7 +54,7 @@ defineExpose({ fieldId })
         :content="labelInfo"
       >
         <div class="flex items-center justify-center size-4 text-text-neutral-secondary cursor-help">
-          <span class="i-ls-info size-4" />
+          <span class="i-ph-info size-4" />
         </div>
       </UiTooltip>
     </div>
@@ -70,9 +70,15 @@ defineExpose({ fieldId })
       <p
         v-if="displayMessage"
         :id="`${fieldId}-message`"
-        class="text-content-legends-bold-md"
-        :class="error ? 'text-text-danger-secondary' : 'text-text-neutral-secondary'"
+        class="flex items-center gap-1 text-content-legends-bold-md"
+        :class="error ? 'text-text-danger-body' : 'text-text-neutral-secondary'"
       >
+        <span
+          v-if="error"
+          class="i-ph-warning-circle size-4 shrink-0"
+          data-testid="ui-field-wrapper-error-icon"
+          aria-hidden="true"
+        />
         {{ displayMessage }}
       </p>
       <slot name="footer" />

package/src/components/UiHorizontalSeparator/UiHorizontalSeparator.vue

@@ -5,7 +5,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="separator text-content-legends-medium-md">
+  <div class="separator text-content-legends-medium-md uppercase">
     <p
       class="w-full"
       v-text="props.label"
@@ -23,6 +23,6 @@ const props = defineProps<{
 .separator::before,
 .separator::after {
   content: '';
-  @apply border-t border-borders-neutral-light h-0 w-full;
+  @apply border-t border-container-border h-0 w-full;
 }
 </style>

package/src/components/UiInputCheckbox/CheckboxGlyph.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CheckboxSize } from './types'
+
+interface Props {
+  checked?: boolean
+  indeterminate?: boolean
+  error?: boolean
+  disabled?: boolean
+  size?: CheckboxSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  checked: false,
+  indeterminate: false,
+  error: false,
+  disabled: false,
+  size: 'md',
+})
+
+const checkedFillClass = computed(() => {
+  if (props.error) {
+    return 'bg-actions-danger-idle'
+  }
+  return props.disabled ? 'bg-surface-neutral-alpha-600' : 'bg-actions-primary-idle'
+})
+
+const boxClasses = computed(() => {
+  const classes = [
+    'relative shrink-0 grid place-content-center',
+    props.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+  ]
+
+  const sizeClasses = {
+    sm: 'size-unit-0-75rem rounded-4',
+    md: 'size-check-sm rounded-check',
+    lg: 'size-check-md rounded-check',
+  }
+  classes.push(sizeClasses[props.size])
+
+  // Checked is a plain fill, neutral once disabled; unchecked is a denser fill than the
+  // fields, which once disabled falls back to the field fill with an outline
+  if (props.checked || props.indeterminate) {
+    classes.push('border-none', checkedFillClass.value)
+  } else if (props.disabled && !props.error) {
+    classes.push('bg-control-field-bg border border-control-disabled-border')
+  } else {
+    classes.push('bg-control-check-bg border', props.error ? 'border-control-error-border' : 'border-control-field-border')
+    if (!props.disabled) {
+      classes.push('group-hover/option:bg-control-check-bg-hover')
+    }
+  }
+
+  return classes
+})
+
+const iconClasses = computed(() => {
+  const sizeClasses = {
+    sm: 'size-2',
+    md: 'size-2.5',
+    lg: 'size-3',
+  }
+  return ['block relative z-1 text-actions-neutral-invert-idle', sizeClasses[props.size], props.indeterminate ? 'i-ph-minus' : 'i-ls-checkbox-check']
+})
+</script>
+
+<template>
+  <span
+    :class="boxClasses"
+    aria-hidden="true"
+    data-testid="ui-checkbox-box"
+  >
+    <span
+      v-if="checked || indeterminate"
+      :class="iconClasses"
+    />
+  </span>
+</template>