@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiInputEmoji/UiInputEmoji.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useStorage } from '@vueuse/core'
-import EmojiPicker from 'vue-frimousse'
 import UiPopover from '../UiPopover/UiPopover.vue'
 import UiPopoverContent from '../UiPopover/UiPopoverContent.vue'
 import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
+import UiEmojiPickerList from '../UiEmojiPickerList/UiEmojiPickerList.vue'
 
 interface UiInputEmojiProps {
   disabled?: boolean
@@ -26,7 +25,7 @@ const props = withDefaults(defineProps<UiInputEmojiProps>(), {
   searchPlaceholder: 'Search emoji...',
   loadingLabel: 'Loading...',
   emptyLabel: 'No emoji found',
-  previewPlaceholder: 'Select an emoji',
+  previewPlaceholder: 'Change emoji skintone',
   skinToneLabel: 'Change skin tone',
   sideOffset: 8,
   open: undefined,
@@ -38,10 +37,6 @@ const emit = defineEmits<{
 }>()
 
 const uncontrolledOpen = ref(false)
-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 open = computed({
   get: () => props.open ?? uncontrolledOpen.value,
   set: (value: boolean) => {
@@ -50,17 +45,10 @@ const open = computed({
   },
 })
 
-const locale = computed(() => props.locale.toLowerCase().replace('_', '-'))
-
-function selectEmoji (emoji: { emoji: string }): void {
-  emit('select', emoji.emoji)
+function selectEmoji (emoji: string): void {
+  emit('select', emoji)
   open.value = false
 }
-
-function cycleSkinTone (): void {
-  const currentIndex = skinTones.indexOf(preferredSkinTone.value)
-  preferredSkinTone.value = skinTones[(currentIndex + 1) % skinTones.length] ?? 'none'
-}
 </script>
 
 <template>
@@ -77,7 +65,7 @@ function cycleSkinTone (): void {
           type="button"
           :aria-label="label"
           :disabled="disabled"
-          class="inline-flex size-8 items-center justify-center rounded-lg text-actions-neutral-idle hover:bg-actions-neutral-hover-overlay disabled:pointer-events-none disabled:opacity-50"
+          class="inline-flex size-button-sm items-center justify-center rounded-button-sm text-actions-neutral-idle hover:bg-actions-neutral-hover-overlay disabled:pointer-events-none disabled:opacity-50"
         >
           <span
             class="i-ph-smiley size-4"
@@ -87,87 +75,22 @@ function cycleSkinTone (): void {
       </slot>
     </UiPopoverTrigger>
 
-      <UiPopoverContent
-        side="top"
-        :side-offset="sideOffset"
-      class="w-[min(320px,calc(100vw-16px))] overflow-hidden border-borders-neutral-default bg-surface-neutral-bg-main p-0"
+    <UiPopoverContent
+      side="top"
+      :side-offset="sideOffset"
+      data-colors-semantic="light"
+      class="w-[min(320px,calc(100vw-16px))] overflow-hidden bg-surface-neutral-bg-main p-3"
       :aria-label="label"
     >
-      <EmojiPicker.Root
+      <UiEmojiPickerList
         :locale="locale"
-        :columns="9"
-        :skin-tone="preferredSkinTone"
-        :on-emoji-select="selectEmoji"
-        class="flex flex-col gap-2 p-3"
-      >
-        <EmojiPicker.Search
-          class="h-8 w-full rounded-md 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:border-actions-primary-idle-alpha-strong focus:ring-1 focus:ring-focus-ring"
-          :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-8 w-full! items-center justify-center rounded-md 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-borders-neutral-default 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-8 shrink-0 items-center justify-center rounded-md text-xl leading-none hover:bg-actions-neutral-hover-overlay"
-            :aria-label="skinToneLabel"
-            @click="cycleSkinTone"
-          />
-        </div>
-      </EmojiPicker.Root>
+        :search-placeholder="searchPlaceholder"
+        :loading-label="loadingLabel"
+        :empty-label="emptyLabel"
+        :preview-placeholder="previewPlaceholder"
+        :skin-tone-label="skinToneLabel"
+        @select="selectEmoji"
+      />
     </UiPopoverContent>
   </UiPopover>
 </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/UiInputRadio/RadioGlyph.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { RadioGroupItem, RadioGroupIndicator } from 'reka-ui'
+import type { RadioValue } from './types'
+
+interface Props {
+  inputId: string
+  value: RadioValue
+  disabled: boolean
+  error: boolean
+  ariaDescribedby?: string
+  radioClasses: string[]
+  indicatorClasses: string[]
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  select: [event: Event]
+}>()
+
+const itemRef = ref<InstanceType<typeof RadioGroupItem> | null>(null)
+
+defineExpose({
+  el: (): HTMLElement | undefined => (itemRef.value?.$el as HTMLElement | undefined) ?? undefined,
+})
+</script>
+
+<template>
+  <RadioGroupItem
+    :id="inputId"
+    ref="itemRef"
+    :value="value"
+    :disabled="disabled"
+    :class="radioClasses"
+    :aria-invalid="error || undefined"
+    :aria-describedby="ariaDescribedby"
+    @select="emit('select', $event)"
+  >
+    <RadioGroupIndicator
+      data-testid="ui-input-radio-dot"
+      :class="indicatorClasses"
+    />
+  </RadioGroupItem>
+</template>