@livestorm/ui-vue 1.1.3 → 2.0.1

package/src/components/UiSideMenu/UiSideMenu.vue

@@ -0,0 +1,513 @@
+<script setup lang="ts">
+import LivestormLogo from '@livestorm/ui-tokens/output/vectors/logos/livestorm-white.svg'
+import type { Slot } from 'vue'
+import type { SideMenuCollapsedItem, SideMenuItemProps, SideMenuMoreItem } from './types'
+import UiSideMenuItem from './UiSideMenuItem.vue'
+import UiButton from '../UiButton/UiButton.vue'
+import UiPopover from '../UiPopover/UiPopover.vue'
+import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
+import UiPopoverContent from '../UiPopover/UiPopoverContent.vue'
+import { useMobileMenu } from '../../composables/useMobileMenu'
+import i18next from 'i18next'
+import { focusFirstMenuItem } from '../../utils'
+import { computed, onBeforeUnmount, onMounted, provide, ref } from 'vue'
+import { SIDE_MENU_LAYOUT_KEY } from './injection'
+const { close, isOpen } = useMobileMenu()
+
+// State for the responsive (short-height) more menu popover, which surfaces
+// the otherwise-hidden #bottom slot items.
+const isMoreMenuOpen = ref(false)
+
+// State for the persistent "More" popover that holds collapsedMenuItems
+// (Instant, Apps, Updates…). Shown at every height, independent of the
+// short-height fallback above.
+const isCollapsedMenuOpen = ref(false)
+
+// Ref to the More button DOM element so the #bottom slot can anchor
+// nested popovers to it on short-height screens.
+const moreButtonEl = ref<HTMLElement | null>(null)
+
+// Track whether the layout is in "short height" mode (More popover visible,
+// bottom menu items hidden). Mirrors the CSS media queries below.
+const isShortHeight = ref(false)
+let shortHeightMql: MediaQueryList | null = null
+
+const updateShortHeight = (e: MediaQueryListEvent | MediaQueryList) => {
+  isShortHeight.value = e.matches
+}
+
+onMounted(() => {
+  if (typeof window === 'undefined') return
+  shortHeightMql = window.matchMedia('(max-height: 768px) and (hover: hover) and (pointer: fine)')
+  isShortHeight.value = shortHeightMql.matches
+  shortHeightMql.addEventListener('change', updateShortHeight)
+})
+
+// Track the mobile (full-screen overlay) layout — below the `md` breakpoint.
+// The side menu spans the viewport there, so the "More" popover opens upward
+// (side="top") instead of to the right, which would land off-screen.
+const isMobile = ref(false)
+let mobileMql: MediaQueryList | null = null
+
+const updateIsMobile = (e: MediaQueryListEvent | MediaQueryList) => {
+  isMobile.value = e.matches
+}
+
+onMounted(() => {
+  if (typeof window === 'undefined') return
+  mobileMql = window.matchMedia('(width < 768px)')
+  isMobile.value = mobileMql.matches
+  mobileMql.addEventListener('change', updateIsMobile)
+})
+
+onBeforeUnmount(() => {
+  shortHeightMql?.removeEventListener('change', updateShortHeight)
+  mobileMql?.removeEventListener('change', updateIsMobile)
+})
+
+provide(SIDE_MENU_LAYOUT_KEY, {
+  isShortHeight,
+  moreButtonEl,
+  closeMoreMenu: () => { isMoreMenuOpen.value = false },
+})
+
+const slots = defineSlots<{
+  default?(): Slot
+  bottom?(): Slot
+  settingsMenu?(): Slot
+  /**
+   * Extra entries rendered inside the persistent "More" popover. Receives a
+   * `close` callback to dismiss the popover (e.g. when a nested popover opens).
+   */
+  collapsedMenuExtra?(props: { close: () => void }): Slot
+}>()
+
+const props = withDefaults(defineProps<{
+  topMenuItems?: SideMenuItemProps[]
+  bottomMenuItems?: SideMenuItemProps[]
+  /**
+   * Proxy entries shown inside the More popover on short-height screens.
+   * Use these to surface #bottom slot items (Help, Updates, …) that are
+   * visually hidden in that layout.
+   */
+  moreMenuItems?: SideMenuMoreItem[]
+  /**
+   * Entries shown inside the persistent "More" popover (the always-visible
+   * collapsed menu). Each entry can navigate (`to`/`href`) or run an
+   * `onClick` handler — e.g. Instant meeting, Apps, Updates.
+   */
+  collapsedMenuItems?: SideMenuCollapsedItem[]
+  /**
+   * Notification indicator shown on the persistent "More" trigger — a count
+   * pill (number) or a dot (`true`). Use to surface counts from items hidden
+   * inside the collapsed popover (e.g. Updates).
+   */
+  moreBadge?: number | boolean
+  showLivestormLogo?: boolean
+  // Accessibility labels
+  logoAlt?: string
+  closeMenuLabel?: string
+  mainNavigationLabel?: string
+  primaryNavigationLabel?: string
+  secondaryNavigationLabel?: string
+  toolsAndSettingsLabel?: string
+  skipToMainContentLabel?: string
+  organizationId?: string
+}>(), {
+  showLivestormLogo: true,
+  logoAlt: 'Livestorm',
+  closeMenuLabel: 'Close navigation menu',
+  mainNavigationLabel: 'Main navigation',
+  primaryNavigationLabel: 'Primary navigation',
+  secondaryNavigationLabel: 'Secondary navigation',
+  toolsAndSettingsLabel: 'Tools and settings',
+  skipToMainContentLabel: 'Skip to main content',
+  organizationId: undefined,
+})
+
+const handleOpenAutoFocus = (event: Event) => {
+  focusFirstMenuItem(event)
+}
+
+const closeMoreMenu = () => {
+  isMoreMenuOpen.value = false
+}
+
+const handleMoreProxyClick = (item: SideMenuMoreItem) => {
+  // Close More first, then defer the proxy action so the next popover
+  // (Help/Updates) opens cleanly anchored to the More button via injection.
+  closeMoreMenu()
+  setTimeout(() => item.onClick(), 0)
+}
+
+const closeCollapsedMenu = () => {
+  isCollapsedMenuOpen.value = false
+}
+
+const handleCollapsedItemClick = (item: SideMenuCollapsedItem) => {
+  closeCollapsedMenu()
+  item.onClick?.()
+}
+
+// On short-height screens the persistent collapsed popover also surfaces the
+// #bottom slot proxies (Help). Mirror handleMoreProxyClick: close first, then
+// defer so the proxied popover opens cleanly anchored to the More button.
+const handleCollapsedProxyClick = (item: SideMenuMoreItem) => {
+  closeCollapsedMenu()
+  setTimeout(() => item.onClick(), 0)
+}
+
+const hasCollapsedMenu = computed(
+  () => (!!props.collapsedMenuItems && props.collapsedMenuItems.length > 0) || !!slots.collapsedMenuExtra,
+)
+
+function handleLogoClick (event: MouseEvent) {
+  if (event.detail === 4) {
+    if (navigator.clipboard && props.organizationId) {
+      navigator.clipboard.writeText(props.organizationId)
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    class="p-4 md:pt-8 md:pb-2 h-full flex flex-col justify-between top-0 fixed md:relative w-full md:transition-none transition-all duration-300 bg-gradient-to-tl from-surface-primary-100 to-surface-primary-300 md:bg-none"
+    :class="{
+      'left-0 md:left-auto ': isOpen,
+      '-left-[100%] md:left-0': !isOpen,
+    }"
+  >
+    <!-- Skip link for accessibility -->
+    <router-link
+      to="/"
+      class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-blue-600 focus:text-white focus:px-4 focus:py-2 focus:rounded bg-surface-overlay-alpha"
+    >
+      {{ skipToMainContentLabel }}
+    </router-link>
+    <!-- Top -->
+    <div class="flex flex-col md:items-center gap-8">
+      <div class="flex items-center justify-between">
+        <img
+          v-if="showLivestormLogo"
+          :src="LivestormLogo"
+          :alt="logoAlt"
+          class="w-10 h-10 ml-4 md:ml-0"
+          role="img"
+          @click="handleLogoClick"
+        >
+        <div class="md:hidden">
+          <UiButton
+            icon="i-ls-x-stream"
+            variant="tertiary"
+            color="neutral"
+            size="lg"
+            :aria-label="closeMenuLabel"
+            @click="close"
+          />
+        </div>
+      </div>
+
+      <nav
+        v-if="topMenuItems"
+        class="flex flex-col md:gap-2"
+        role="navigation"
+        :aria-label="mainNavigationLabel"
+      >
+        <h2 class="sr-only">
+          {{ primaryNavigationLabel }}
+        </h2>
+        <ul
+          class="flex flex-col md:gap-2"
+          role="menubar"
+        >
+          <li
+            v-for="item in topMenuItems"
+            :key="`side-menu-item-${item.label}`"
+            role="menuitem"
+          >
+            <UiSideMenuItem
+              :label="item.label"
+              :icon="item.icon"
+              :to="item.to"
+              :href="item.href"
+              :is-active="item.isActive"
+              show-label-tooltip
+            />
+          </li>
+        </ul>
+      </nav>
+    </div>
+
+    <slot
+      v-if="slots.default"
+      name="default"
+    />
+
+    <!-- Bottom -->
+    <div class="flex flex-col md:items-center mt-2">
+      <nav
+        class="flex flex-col md:gap-2"
+        role="navigation"
+        :aria-label="secondaryNavigationLabel"
+      >
+        <h2 class="sr-only">
+          {{ secondaryNavigationLabel }}
+        </h2>
+        <ul
+          v-if="bottomMenuItems"
+          class="flex flex-col md:gap-2 hidden-on-short-height"
+          role="menu"
+        >
+          <li
+            v-for="item in bottomMenuItems"
+            :key="`side-menu-item-${item.label}`"
+            role="listitem"
+          >
+            <UiSideMenuItem
+              :label="item.label"
+              :icon="item.icon"
+              :to="item.to"
+              :is-active="item.isActive"
+            />
+          </li>
+        </ul>
+
+        <!--
+          Persistent "More" popover — the collapsed menu shown at every height.
+          Holds collapsedMenuItems (Instant, Apps, Updates…). Rendered before
+          the #bottom slot (Help) to match the design's ordering. Distinct from
+          the short-height fallback below, which only surfaces #bottom items.
+        -->
+        <div
+          v-if="hasCollapsedMenu"
+          ref="moreButtonEl"
+          class="more-menu-container"
+        >
+          <UiPopover v-model:open="isCollapsedMenuOpen">
+            <UiPopoverTrigger class="w-full cursor-pointer">
+              <UiSideMenuItem
+                :label="i18next.t('room_bottom-bar_controls-label_more')"
+                icon="i-ls-more-horizontal"
+                :is-active="false"
+                :inside-interactive="true"
+                :badge="moreBadge"
+                show-label-tooltip
+              />
+            </UiPopoverTrigger>
+            <!--
+              force-mount keeps the popover (and its #collapsedMenuExtra slot,
+              e.g. the Headway "Updates" host) mounted on page load instead of
+              lazily on first open, so its notification count is available
+              immediately. It's hidden while closed so the menu only shows on open.
+            -->
+            <UiPopoverContent
+              force-mount
+              :side="isMobile ? 'top' : 'right'"
+              :align="isMobile ? 'center' : 'end'"
+              :side-offset="8"
+              :collision-padding="16"
+              class="border-none bg-surface-neutral-300 rounded-2xl shadow-shadows-drop-shadow-2xl overflow-hidden data-[state=closed]:hidden"
+              :class="isMobile
+                ? 'w-(--reka-popover-trigger-width)'
+                : 'w-[calc(var(--reka-popover-trigger-width)+2rem)]'"
+              data-colors-semantic="light"
+              @open-auto-focus="handleOpenAutoFocus"
+            >
+              <ul class="flex flex-col md:items-center gap-2 p-2">
+                <li
+                  v-for="item in collapsedMenuItems"
+                  :key="`collapsed-menu-item-${item.label}`"
+                  role="listitem"
+                >
+                  <UiSideMenuItem
+                    variant="default"
+                    :label="item.label"
+                    :icon="item.icon"
+                    :to="item.to"
+                    :href="item.href"
+                    :is-active="item.isActive"
+                    :badge="item.badge"
+                    show-label-tooltip
+                    @click="handleCollapsedItemClick(item)"
+                  />
+                </li>
+
+                <!--
+                  Extra entries rendered as real components inside the popover.
+                  Use for items that own their own trigger/popover (e.g. the
+                  Headway "Updates" button) and can't be expressed as a plain
+                  collapsedMenuItems entry. The `close` slot prop lets such an
+                  item dismiss this popover when its own popover opens.
+                -->
+                <slot
+                  name="collapsedMenuExtra"
+                  :close="closeCollapsedMenu"
+                />
+
+                <!--
+                  On short-height screens the #bottom slot (Help) and bottom
+                  nav items are hidden, so fold them into this one popover —
+                  otherwise they'd need a second "More" button.
+                -->
+                <template v-if="isShortHeight">
+                  <li
+                    v-for="item in bottomMenuItems"
+                    :key="`collapsed-bottom-item-${item.label}`"
+                    role="listitem"
+                  >
+                    <UiSideMenuItem
+                      variant="default"
+                      :label="item.label"
+                      :icon="item.icon"
+                      :to="item.to"
+                      :is-active="item.isActive"
+                      show-label-tooltip
+                      @click="closeCollapsedMenu"
+                    />
+                  </li>
+                  <li
+                    v-for="item in moreMenuItems"
+                    :key="`collapsed-proxy-item-${item.label}`"
+                    role="listitem"
+                  >
+                    <UiSideMenuItem
+                      variant="default"
+                      :label="item.label"
+                      :icon="item.icon"
+                      :is-active="false"
+                      show-label-tooltip
+                      @click="handleCollapsedProxyClick(item)"
+                    />
+                  </li>
+                </template>
+              </ul>
+            </UiPopoverContent>
+          </UiPopover>
+        </div>
+
+        <!--
+          #bottom slot (Help/Updates) stays mounted at all heights so its
+          internal popover state survives layout changes. On short-height
+          screens it's visually hidden — consumers anchor their popovers
+          to the More button via UiPopoverAnchor (see SIDE_MENU_LAYOUT_KEY).
+        -->
+        <div
+          v-if="slots.bottom"
+          class="flex flex-col md:gap-2"
+          :class="{ 'sr-only pointer-events-none': isShortHeight }"
+          :aria-hidden="isShortHeight ? 'true' : undefined"
+          :inert="isShortHeight || undefined"
+        >
+          <slot name="bottom" />
+        </div>
+
+        <!--
+          Short-height fallback "More" — only when there's no persistent
+          collapsed menu (otherwise that menu absorbs these items, see above).
+          Shown when the bottom menu is hidden on short-height desktop screens.
+        -->
+        <div
+          v-if="!hasCollapsedMenu"
+          ref="moreButtonEl"
+          class="more-menu-container show-on-short-height-desktop-only"
+        >
+          <UiPopover
+            v-if="(bottomMenuItems && bottomMenuItems.length > 0) || (moreMenuItems && moreMenuItems.length > 0)"
+            v-model:open="isMoreMenuOpen"
+          >
+            <UiPopoverTrigger class="cursor-pointer">
+              <UiSideMenuItem
+                :label="i18next.t('room_bottom-bar_controls-label_more')"
+                icon="i-ls-more-vertical"
+                :is-active="false"
+                :inside-interactive="true"
+              />
+            </UiPopoverTrigger>
+            <UiPopoverContent
+              side="right"
+              align="end"
+              :side-offset="8"
+              class="border-none bg-surface-neutral-300 rounded-2xl shadow-shadows-drop-shadow-2xl overflow-hidden"
+              data-colors-semantic="light"
+              @open-auto-focus="handleOpenAutoFocus"
+            >
+              <div class="flex flex-col md:items-center gap-2 p-2">
+                <li
+                  v-for="item in bottomMenuItems"
+                  :key="`popover-menu-item-${item.label}`"
+                  role="listitem"
+                >
+                  <UiSideMenuItem
+                    variant="default"
+                    :label="item.label"
+                    :icon="item.icon"
+                    :to="item.to"
+                    :is-active="item.isActive"
+                    @click="closeMoreMenu"
+                  />
+                </li>
+                <li
+                  v-for="item in moreMenuItems"
+                  :key="`more-proxy-item-${item.label}`"
+                  role="listitem"
+                >
+                  <UiSideMenuItem
+                    variant="default"
+                    :label="item.label"
+                    :icon="item.icon"
+                    :is-active="false"
+                    @click="handleMoreProxyClick(item)"
+                  />
+                </li>
+              </div>
+            </UiPopoverContent>
+          </UiPopover>
+        </div>
+
+        <!--
+          Profile / settings sits in its own group, separated from the
+          More/Help buttons by a 32px gap per the design (8px flex gap + mt-6).
+        -->
+        <div
+          role="complementary"
+          class="md:mt-6"
+          :aria-label="toolsAndSettingsLabel"
+        >
+          <slot
+            v-if="slots.settingsMenu"
+            name="settingsMenu"
+          />
+        </div>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Hide the more menu by default */
+.show-on-short-height-desktop-only {
+  display: none;
+}
+
+/* Hide bottom menu items when screen is short and its's not a touch device */
+@media (max-height: 768px) and (hover: hover) {
+  .hidden-on-short-height {
+    display: none;
+  }
+}
+
+/* Show more menu only on desktop (non-touch) devices with short height */
+@media (max-height: 768px) and (hover: hover) and (pointer: fine) {
+  .show-on-short-height-desktop-only {
+    display: block;
+  }
+}
+
+/* Hide the 'more' menu item when there's enough space or on touch devices */
+@media (min-height: 768px), (hover: none), (pointer: coarse) {
+  .show-on-short-height-desktop-only {
+    display: none;
+  }
+}
+</style>

package/src/components/UiSideMenu/UiSideMenuBottom.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import UiSideMenuItem from './UiSideMenuItem.vue'
+import type { SideMenuItemProps } from './types'
+
+defineProps<{
+  menuItems: SideMenuItemProps[]
+}>()
+
+</script>
+
+<template>
+  <div class="flex flex-col items-center">
+    <div class="flex flex-col gap-2">
+      <template
+        v-for="(item, index) in menuItems"
+        :key="`${item.label}-${index}`"
+      >
+        <UiSideMenuItem
+          :label="item.label"
+          :icon="item.icon"
+          :to="item.to"
+          :is-active="item.isActive"
+        />
+      </template>
+    </div>
+  </div>
+</template>

package/src/components/UiSideMenu/UiSideMenuItem.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { SideMenuItemProps } from './types'
+import { computed } from 'vue'
+import UiSideMenuItemContent from './UiSideMenuItemContent.vue'
+import UiTooltipProvider from '../UiTooltip/UiTooltipProvider.vue'
+import UiTooltip from '../UiTooltip/UiTooltip.vue'
+import UiTooltipTrigger from '../UiTooltip/UiTooltipTrigger.vue'
+import UiTooltipContent from '../UiTooltip/UiTooltipContent.vue'
+import { useLabelHidden } from './useLabelHidden'
+
+// Forward attrs (id, class, data-*, and crucially @click listeners) onto the
+// content element ourselves: in the tooltip branch the root is the renderless
+// UiTooltipProvider, which would otherwise swallow them.
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<SideMenuItemProps & {
+  navigateToLabel?: string
+  /**
+   * When true, removes the interactive overlay (router-link/button) from
+   * the tab order. Use when wrapped by an interactive ancestor (e.g.
+   * UiPopoverTrigger) that already owns focus and click semantics —
+   * otherwise the component contributes a second tab stop.
+   */
+  insideInteractive?: boolean
+  /**
+   * Notification indicator shown at the top-right of the icon. A number
+   * renders a count pill (values > 99 display as "99+"); `true` renders a
+   * plain dot. Omit / 0 / false to hide.
+   */
+  badge?: number | boolean
+  /**
+   * Show the `label` as a hover tooltip when the text label is hidden
+   * (short-height / narrow screens). Off by default — do NOT enable for items
+   * already wrapped by an interactive ancestor (popover/Headway triggers), as
+   * the tooltip's own trigger would conflict with that ancestor.
+   */
+  showLabelTooltip?: boolean
+  /**
+   * Keep the label visible on short-height screens (forwarded to the content).
+   */
+  alwaysShowLabel?: boolean
+}>(), {
+  textAlign: undefined,
+  insideInteractive: false,
+  badge: undefined,
+  showLabelTooltip: false,
+  alwaysShowLabel: false,
+})
+
+// Props forwarded to the content component — everything except the tooltip
+// control flag, which is consumed here and would otherwise leak onto the DOM.
+const contentProps = computed(() => {
+  const { showLabelTooltip: _ignored, ...rest } = props
+  return rest
+})
+
+// Enable the tooltip only while the text label is hidden (short-height /
+// narrow screens), surfacing the same label value on hover.
+const labelHidden = useLabelHidden()
+</script>
+
+<template>
+  <UiTooltipProvider
+    v-if="showLabelTooltip"
+    :delay-duration="0"
+  >
+    <UiTooltip :disabled="!labelHidden">
+      <UiTooltipTrigger as-child>
+        <UiSideMenuItemContent
+          v-bind="{ ...contentProps, ...$attrs }"
+        >
+          <template
+            v-if="$slots.avatar"
+            #avatar
+          >
+            <slot name="avatar" />
+          </template>
+          <slot />
+        </UiSideMenuItemContent>
+      </UiTooltipTrigger>
+      <UiTooltipContent
+        side="right"
+        :side-offset="0"
+      >
+        {{ label }}
+      </UiTooltipContent>
+    </UiTooltip>
+  </UiTooltipProvider>
+
+  <UiSideMenuItemContent
+    v-else
+    v-bind="{ ...contentProps, ...$attrs }"
+  >
+    <template
+      v-if="$slots.avatar"
+      #avatar
+    >
+      <slot name="avatar" />
+    </template>
+    <slot />
+  </UiSideMenuItemContent>
+</template>