@livestorm/ui-vue 2.0.0 → 2.0.1

package/src/components/UiFieldWrapper/UiFieldWrapper.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Label, useId } from 'reka-ui'
+import UiTooltip from '../UiTooltip/UiTooltip.vue'
 
 interface Props {
   id?: string
@@ -48,13 +49,14 @@ defineExpose({ fieldId })
       >
         {{ label }}{{ required ? '*' : '' }}
       </Label>
-      <div
+      <UiTooltip
         v-if="labelInfo"
-        v-tooltip="labelInfo"
-        class="flex items-center justify-center size-4 text-text-neutral-secondary cursor-help"
+        :content="labelInfo"
       >
-        <span class="i-ls-info size-4" />
-      </div>
+        <div class="flex items-center justify-center size-4 text-text-neutral-secondary cursor-help">
+          <span class="i-ls-info size-4" />
+        </div>
+      </UiTooltip>
     </div>
 
     <!-- Input -->

package/src/components/UiInputCheckbox/UiInputCheckbox.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch, nextTick } from 'vue'
 import { Label, useId } from 'reka-ui'
 import type { CheckboxSize } from './types'
+import UiTooltip from '../UiTooltip/UiTooltip.vue'
 
 interface UiInputCheckboxProps {
   /**
@@ -390,18 +391,21 @@ defineExpose({
         </Label>
 
         <!-- icon -->
-        <div
+        <UiTooltip
           v-if="labelInfo"
-          v-tooltip="labelInfo"
-          class="flex items-center justify-center size-4 text-text-neutral-primary cursor-help shrink-0"
-          :class="{
-            'text-text-neutral-base': !error && !isChecked,
-            'text-text-danger-base': error,
-            'text-text-primary-base': isChecked && !error,
-          }"
+          :content="labelInfo"
         >
-          <span class="i-ls-info-fill size-4" />
-        </div>
+          <div
+            class="flex items-center justify-center size-4 text-text-neutral-primary cursor-help shrink-0"
+            :class="{
+              'text-text-neutral-base': !error && !isChecked,
+              'text-text-danger-base': error,
+              'text-text-primary-base': isChecked && !error,
+            }"
+          >
+            <span class="i-ls-info-fill size-4" />
+          </div>
+        </UiTooltip>
       </div>
 
       <span

package/src/components/UiLabel/UiLabel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import UiTooltip from '../UiTooltip/UiTooltip.vue'
 
 interface Props {
   label?: string | null
@@ -21,14 +22,15 @@ withDefaults(defineProps<Props>(), {
 
 <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"
-    />
+    <UiTooltip :content="tooltip">
+      <label
+        :for="forId"
+        :class="labelClass"
+        :style="{
+          color: labelColor,
+        }"
+        v-html="required ? `${label}*` : label"
+      />
+    </UiTooltip>
   </div>
 </template>

package/src/components/UiTooltip/UiTooltip.vue

@@ -1,16 +1,68 @@
 <!-- UiTooltip.vue -->
 <script setup lang="ts">
-import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { computed, getCurrentInstance } from 'vue'
+import type { TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'reka-ui'
 import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
+import { reactiveOmit } from '@vueuse/core'
+import UiTooltipProvider from './UiTooltipProvider.vue'
+import UiTooltipTrigger from './UiTooltipTrigger.vue'
+import UiTooltipContent from './UiTooltipContent.vue'
 
-const props = defineProps<TooltipRootProps>()
+export interface UiTooltipProps extends TooltipRootProps {
+  /**
+   * Simple mode: the tooltip text. When `:content` is bound, UiTooltip is
+   * fully self-contained — the default slot becomes the trigger (merged
+   * via as-child) and no surrounding UiTooltipProvider is required:
+   *
+   *   <UiTooltip content="Delete this event"><UiButton … /></UiTooltip>
+   *
+   * A bound-but-empty content renders the slot untouched (no tooltip, no
+   * overhead) — so wrappers can always bind an optional string.
+   *
+   * When `:content` is NOT bound, UiTooltip is the composable root: use it
+   * inside a UiTooltipProvider with UiTooltipTrigger/UiTooltipContent
+   * children.
+   */
+  content?: string | null
+  /** Simple mode only: which side the tooltip appears on. */
+  side?: TooltipContentProps['side']
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<UiTooltipProps>()
 const emits = defineEmits<TooltipRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+// Simple vs composed mode is decided by the BINDING, not the value:
+// reka's TooltipRoot requires a provider, so the composed branch must only
+// render when the caller actually composes (no `content` bound).
+const hasContentBinding = computed(() => {
+  const vnodeProps = getCurrentInstance()?.vnode.props
+  return !!vnodeProps && 'content' in vnodeProps
+})
+
+// content/side are ours — only forward the reka root props
+const forwarded = useForwardPropsEmits(reactiveOmit(props, 'content', 'side'), emits)
 </script>
 
 <template>
-  <TooltipRoot v-bind="{ ...forwarded, ...$attrs }">
+  <template v-if="hasContentBinding">
+    <UiTooltipProvider v-if="content">
+      <TooltipRoot v-bind="{ ...forwarded, ...$attrs }">
+        <UiTooltipTrigger as-child>
+          <slot />
+        </UiTooltipTrigger>
+        <UiTooltipContent :side="side">
+          {{ content }}
+        </UiTooltipContent>
+      </TooltipRoot>
+    </UiTooltipProvider>
+    <slot v-else />
+  </template>
+  <TooltipRoot
+    v-else
+    v-bind="{ ...forwarded, ...$attrs }"
+  >
     <slot />
   </TooltipRoot>
 </template>

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/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
-};