@livestorm/ui-vue 2.0.0 → 2.0.2

package/src/utils/clipboard.js

@@ -1,7 +1,83 @@
-import { computed } from 'vue'
+import { computed, createApp, h } from 'vue'
 import { useClipboard, usePermission } from '@vueuse/core'
 import i18n from 'i18next'
-import { createTooltip, destroyTooltip } from 'floating-vue'
+
+import UiTooltipProvider from '../components/UiTooltip/UiTooltipProvider.vue'
+import UiTooltip from '../components/UiTooltip/UiTooltip.vue'
+import UiTooltipTrigger from '../components/UiTooltip/UiTooltipTrigger.vue'
+import UiTooltipContent from '../components/UiTooltip/UiTooltipContent.vue'
+
+let hideActiveFlash = null
+
+/**
+ * Transient "Copied!" flash above an element, rendered with the design
+ * system's own UiTooltip family so the bubble, arrow and positioning stay
+ * identical to every other tooltip. The copy() API is imperative and
+ * receives a raw DOM element, so the tooltip cannot wrap the caller's
+ * markup: instead a throwaway Vue app drives a controlled-open tooltip
+ * whose invisible trigger is overlaid on the element's current rect.
+ */
+function flashTooltip (el, text) {
+  // A copy triggered before the previous flash ended replaces it instead of
+  // stacking a second bubble on top.
+  if (hideActiveFlash) {
+    hideActiveFlash()
+  }
+
+  const rect = el.getBoundingClientRect()
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const app = createApp({
+    render: () => h(UiTooltipProvider, null, () =>
+      h(UiTooltip, { open: true, delayDuration: 0 }, () => [
+        h(UiTooltipTrigger, { asChild: true }, () =>
+          h('span', {
+            'aria-hidden': 'true',
+            style: {
+              position: 'fixed',
+              left: `${rect.left}px`,
+              top: `${rect.top}px`,
+              width: `${rect.width}px`,
+              height: `${rect.height}px`,
+              pointerEvents: 'none',
+            },
+          })),
+        h(UiTooltipContent, { side: 'top' }, () => text),
+        // The bubble lives in reka's portal where attrs like role are not
+        // forwardable; announce the feedback from a visually hidden live
+        // region instead so screen readers hear the copy confirmation.
+        h('span', {
+          role: 'status',
+          style: {
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            overflow: 'hidden',
+            clipPath: 'inset(50%)',
+          },
+        }, text),
+      ])),
+  })
+  app.mount(host)
+
+  // Idempotent: the replace-guard above may spend a flash's hide before its
+  // own copy() timer fires it a second time.
+  let hidden = false
+  const hide = () => {
+    if (hidden) {
+      return
+    }
+    hidden = true
+    if (hideActiveFlash === hide) {
+      hideActiveFlash = null
+    }
+    app.unmount()
+    host.remove()
+  }
+  hideActiveFlash = hide
+  return hide
+}
 
 export function useCopyToClipboard () {
   const { isSupported, copy: _copy } = useClipboard()
@@ -14,19 +90,10 @@ export function useCopyToClipboard () {
 
     if (el) {
       el.classList.add('copied')
-      const tooltip = createTooltip(el, {
-        triggers: [],
-        content: tooltipText,
-        delay: 0,
-      })
-      tooltip.show()
+      const hideTooltip = flashTooltip(el, tooltipText)
       setTimeout(() => {
         el.classList.remove('copied')
-        tooltip.hide()
-        // Transition
-        setTimeout(() => {
-          destroyTooltip(el)
-        }, 400)
+        hideTooltip()
       }, 600)
     }
   }

package/src/utils/responsive.js

@@ -1,9 +1,75 @@
 import { reactive, computed } from 'vue'
 import generateFlags from './devices'
+import { BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL_PLUS } from './breakpoints'
 
 let responsive
 
+// Under SSR there is no viewport: the server renders a desktop-sized static
+// snapshot. To keep hydration safe, the client's lazy singleton starts from
+// the SAME snapshot (identical trees during the hydration pass) and syncs to
+// the real viewport in a microtask, which runs after hydration completes but
+// before the first paint.
+const SSR_WIDTH = 1280
+const SSR_HEIGHT = 800
+
+// Default flags, derived from the design system breakpoints. An app installing
+// the Responsive plugin can override any of them via `options.computed`.
+const DEFAULT_FLAGS = {
+  mobile: state => state.width < BREAKPOINT_MD,
+  tablet: state => state.width < BREAKPOINT_LG,
+  smallDesktop: state => state.width < BREAKPOINT_XL_PLUS,
+  desktop: state => state.width >= BREAKPOINT_LG,
+}
+
+function createResponsive (customComputed = {}, { deferViewportSync = false } = {}) {
+  const isClient = typeof window !== 'undefined'
+  const readViewportNow = isClient && !deferViewportSync
+
+  const state = reactive({
+    width: readViewportNow ? window.innerWidth : SSR_WIDTH,
+    height: readViewportNow ? window.innerHeight : SSR_HEIGHT,
+  })
+
+  const derived = { ...DEFAULT_FLAGS, ...customComputed }
+  for (const key in derived) {
+    // Assigning a computed ref onto a reactive object stores it unwrapped:
+    // consumers read plain booleans while reactivity is preserved.
+    state[key] = computed(() => derived[key](state))
+  }
+
+  if (isClient) {
+    const sync = () => {
+      state.width = window.innerWidth
+      state.height = window.innerHeight
+    }
+    if (deferViewportSync) {
+      // Runs after the synchronous hydration pass but before the first
+      // paint: server HTML and client hydration tree stay identical, then a
+      // normal reactive update applies the real viewport with no visible
+      // flash for client-only apps either.
+      queueMicrotask(sync)
+    }
+    window.addEventListener('resize', sync)
+  }
+
+  return state
+}
+
+/**
+ * Viewport state shared by the whole app. Lazily created on first use, so
+ * components work with no plugin registration: installing the Responsive
+ * plugin is only needed to customize the flags or to read `$responsive`
+ * in templates.
+ *
+ * @returns {import('./responsive.types').ResponsiveGlobalComponentProperty}
+ */
 export function useResponsive () {
+  if (!responsive) {
+    // Deferred viewport sync keeps SSR hydration safe; the plugin path below
+    // keeps its historical immediate initialization (it installs client-side
+    // at app boot, before anything rendered).
+    responsive = createResponsive({}, { deferViewportSync: true })
+  }
   return responsive
 }
 
@@ -13,11 +79,6 @@ export default {
       computed: {},
     }, options)
 
-    const computedProps = {}
-    for (const key in finalOptions.computed) {
-      computedProps[key] = computed(() => finalOptions.computed[key](responsive))
-    }
-
     if (import.meta.env.RESPONSIVE_V2) {
       let device
       const defaultUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36'
@@ -44,18 +105,11 @@ export default {
       }
       app.config.globalProperties.$responsive = responsive
     } else {
-      responsive = reactive({
-        width: window.innerWidth,
-        height: window.innerHeight,
-        ...computedProps,
-      })
-
+      // The plugin-created instance replaces the lazy singleton so that
+      // useResponsive() and $responsive stay the same object, with the
+      // app's custom computed applied on top of the default flags.
+      responsive = createResponsive(finalOptions.computed)
       app.config.globalProperties.$responsive = responsive
-
-      window.addEventListener('resize', () => {
-        responsive.width = window.innerWidth
-        responsive.height = window.innerHeight
-      })
     }
   },
 }

package/dist/a11y-DIdrv5Mn.mjs

@@ -1,66 +0,0 @@
-import { ref as k, computed as u, watch as r, onUnmounted as S, getCurrentInstance as y, onMounted as g, nextTick as x } from "vue";
-import { onKeyDown as w } from "@vueuse/core";
-let T = 0;
-const a = k([]), b = u(() => a.value.length > 0);
-function A(o, s) {
-  const n = T++, t = u(() => a.value.findIndex((e) => e.id === n));
-  function f() {
-    a.value.some((e) => e.id === n) || a.value.push({
-      id: n,
-      type: s
-    });
-  }
-  function i() {
-    t.value !== -1 && a.value.splice(t.value, 1);
-  }
-  r(o, (e) => {
-    e ? f() : i();
-  }, {
-    immediate: !0
-  }), S(() => {
-    i();
-  });
-  const d = u(() => n === a.value[a.value.length - 1]?.id), m = u(() => t.value > 0), c = u(() => a.value.filter((e) => e.type === s)), p = u(() => c.value.findIndex((e) => e.id === n) < c.value.length - 1), h = u(() => c.value.findIndex((e) => e.id === n) > 0), l = [];
-  function v(e) {
-    l.push(e);
-  }
-  return w("Escape", () => {
-    d.value && l.forEach((e) => e());
-  }), {
-    isActiveStacked: d,
-    hasStackedBehind: m,
-    isBehindSameType: p,
-    hasStackedSameTypeBehind: h,
-    stackIndex: t,
-    onClose: v
-  };
-}
-typeof document < "u" && r(b, (o) => {
-  o ? document.documentElement.classList.add("overflow-hidden") : document.documentElement.classList.remove("overflow-hidden");
-}, {
-  immediate: !0
-});
-function C() {
-  const o = y();
-  let s = null;
-  g(async () => {
-    await x();
-    const n = o.proxy.$el;
-    if (!n?.querySelector) return;
-    let t = n.querySelector("[data-stackview-autofocus]");
-    t ? ["INPUT", "A", "BUTTON", "TEXTAREA"].includes(t.tagName) || (t = t.querySelector("input, a, button, textarea") || t) : (t = n.querySelector('button[type="submit"]'), console.warn(
-      "%cDEV",
-      "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
-      "A element should have the data-stackview-autofocus attribute in this component. Fallback to submit button."
-    )), clearTimeout(s), s = setTimeout(() => t?.focus(), 150);
-  });
-}
-function q(o) {
-  o.preventDefault(), (o.target.closest('[role="menu"]') || o.target).querySelector("a")?.focus();
-}
-export {
-  C as a,
-  q as f,
-  b as h,
-  A as u
-};