@livestorm/ui-vue 2.0.0 → 2.0.2

package/dist/utils.mjs

@@ -1,111 +1,146 @@
-import { BREAKPOINT_2XL as M, BREAKPOINT_LG as V, BREAKPOINT_MD as b, BREAKPOINT_SM as w, BREAKPOINT_XL as N, BREAKPOINT_XL_PLUS as X } from "./breakpoints.mjs";
+import { BREAKPOINT_2XL as F, BREAKPOINT_LG as N, BREAKPOINT_MD as X, BREAKPOINT_SM as D, BREAKPOINT_XL as Q, BREAKPOINT_XL_PLUS as U } from "./breakpoints.mjs";
 import "./bus.mjs";
-import { computed as m } from "vue";
-import { useClipboard as y, usePermission as h } from "@vueuse/core";
+import { computed as h, createApp as _, h as p } from "vue";
+import { useClipboard as g, usePermission as x } from "@vueuse/core";
 import R from "i18next";
-import { createTooltip as g, destroyTooltip as T } from "floating-vue";
-import { useResponsive as F } from "./responsive.mjs";
-import { useRoute as A, useRouter as _ } from "vue-router";
-import { RenderSlot as U, getSlotAsComponent as W, unwrapFragments as j, useSlotsAsComponents as D } from "./slot.mjs";
-import { f as z, h as H, a as J, u as Y } from "./a11y-DIdrv5Mn.mjs";
-function B() {
-  const { isSupported: n, copy: u } = y(), s = h("clipboard-write"), c = m(() => n.value && s.value);
-  async function f(p, o, i = R.t("general_misc_copied-text")) {
-    if (await u(p), o) {
+import { b as A, _ as C, c as P, a as T } from "./a11y--y7uaY4j.mjs";
+import { f as j, h as G, d as z, u as H } from "./a11y--y7uaY4j.mjs";
+import { useResponsive as Y } from "./responsive.mjs";
+import { useRoute as $, useRouter as S } from "vue-router";
+import { RenderSlot as ee, getSlotAsComponent as te, unwrapFragments as oe, useSlotsAsComponents as ne } from "./slot.mjs";
+let d = null;
+function k(s, u) {
+  d && d();
+  const t = s.getBoundingClientRect(), r = document.createElement("div");
+  document.body.appendChild(r);
+  const c = _({
+    render: () => p(A, null, () => p(C, { open: !0, delayDuration: 0 }, () => [
+      p(P, { asChild: !0 }, () => p("span", {
+        "aria-hidden": "true",
+        style: {
+          position: "fixed",
+          left: `${t.left}px`,
+          top: `${t.top}px`,
+          width: `${t.width}px`,
+          height: `${t.height}px`,
+          pointerEvents: "none"
+        }
+      })),
+      p(T, { side: "top" }, () => u),
+      // 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.
+      p("span", {
+        role: "status",
+        style: {
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          overflow: "hidden",
+          clipPath: "inset(50%)"
+        }
+      }, u)
+    ]))
+  });
+  c.mount(r);
+  let a = !1;
+  const o = () => {
+    a || (a = !0, d === o && (d = null), c.unmount(), r.remove());
+  };
+  return d = o, o;
+}
+function O() {
+  const { isSupported: s, copy: u } = g(), t = x("clipboard-write"), r = h(() => s.value && t.value);
+  async function c(a, o, f = R.t("general_misc_copied-text")) {
+    if (await u(a), o) {
       o.classList.add("copied");
-      const a = g(o, {
-        triggers: [],
-        content: i,
-        delay: 0
-      });
-      a.show(), setTimeout(() => {
-        o.classList.remove("copied"), a.hide(), setTimeout(() => {
-          T(o);
-        }, 400);
+      const m = k(o, f);
+      setTimeout(() => {
+        o.classList.remove("copied"), m();
       }, 600);
     }
   }
   return {
-    canCopy: c,
-    copy: f
+    canCopy: r,
+    copy: c
   };
 }
-function E(n, u = !1) {
-  const s = A(), c = _(), f = `${n}-`;
-  function p() {
-    const t = [];
-    for (const e in s.query)
-      e.startsWith(f) && t.push(e);
-    return t;
+function q(s, u = !1) {
+  const t = $(), r = S(), c = `${s}-`;
+  function a() {
+    const e = [];
+    for (const n in t.query)
+      n.startsWith(c) && e.push(n);
+    return e;
   }
-  function o(t) {
-    return t === "true" ? !0 : t === "false" ? !1 : t ?? !1;
+  function o(e) {
+    return e === "true" ? !0 : e === "false" ? !1 : e ?? !1;
   }
-  const i = m(() => {
+  const f = h(() => {
     if (u) {
-      const t = p();
-      if (t.length === 0)
+      const e = a();
+      if (e.length === 0)
         return !1;
-      const e = {};
-      for (const r of t)
-        e[r.substring(f.length)] = o(s.query[r]);
-      return e;
+      const n = {};
+      for (const i of e)
+        n[i.substring(c.length)] = o(t.query[i]);
+      return n;
     } else
-      return o(s.query[n]);
-  }), a = !!i.value;
-  return m({
-    get: () => i.value,
-    set: (t) => {
-      if (t === i.value) return;
-      const e = t == null || t === !1;
-      if (e && !a)
-        c.back();
+      return o(t.query[s]);
+  }), m = !!f.value;
+  return h({
+    get: () => f.value,
+    set: (e) => {
+      if (e === f.value) return;
+      const n = e == null || e === !1;
+      if (n && !m)
+        r.back();
       else {
-        let r;
+        let i;
         if (u)
-          if (r = {}, e) {
-            const d = p();
-            for (const l of d)
-              r[l] = void 0;
+          if (i = {}, n) {
+            const l = a();
+            for (const y of l)
+              i[y] = void 0;
           } else
-            for (const d in t)
-              r[`${n}-${d}`] = t[d];
+            for (const l in e)
+              i[`${s}-${l}`] = e[l];
         else
-          r = {
-            [n]: e ? void 0 : t
+          i = {
+            [s]: n ? void 0 : e
           };
-        c[e ? "replace" : "push"]({
-          ...s,
+        r[n ? "replace" : "push"]({
+          ...t,
           query: {
-            ...s.query,
-            ...r
+            ...t.query,
+            ...i
           }
         });
       }
     }
   });
 }
-let C = 0;
-function K() {
-  return ++C;
+let E = 0;
+function M() {
+  return ++E;
 }
 export {
-  M as BREAKPOINT_2XL,
-  V as BREAKPOINT_LG,
-  b as BREAKPOINT_MD,
-  w as BREAKPOINT_SM,
-  N as BREAKPOINT_XL,
-  X as BREAKPOINT_XL_PLUS,
-  U as RenderSlot,
-  z as focusFirstMenuItem,
-  W as getSlotAsComponent,
-  K as getUid,
-  H as hasStackedComponents,
-  j as unwrapFragments,
-  B as useCopyToClipboard,
-  F as useResponsive,
-  E as useRouteQueryModel,
-  D as useSlotsAsComponents,
-  J as useStackAutofocus,
-  Y as useStackedComponent
+  F as BREAKPOINT_2XL,
+  N as BREAKPOINT_LG,
+  X as BREAKPOINT_MD,
+  D as BREAKPOINT_SM,
+  Q as BREAKPOINT_XL,
+  U as BREAKPOINT_XL_PLUS,
+  ee as RenderSlot,
+  j as focusFirstMenuItem,
+  te as getSlotAsComponent,
+  M as getUid,
+  G as hasStackedComponents,
+  oe as unwrapFragments,
+  O as useCopyToClipboard,
+  Y as useResponsive,
+  q as useRouteQueryModel,
+  ne as useSlotsAsComponents,
+  z as useStackAutofocus,
+  H as useStackedComponent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Livestorm UI components for Vue 3",
   "license": "UNLICENSED",
   "repository": {
@@ -35,14 +35,12 @@
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-vue": "^8.6.0",
-    "floating-vue": "^5.2.2",
     "i18next": "^26.3.4",
     "mitt": "^3.0.1",
     "reka-ui": "2.9.10",
     "tailwindcss": "^4.3.2",
-    "vue-safe-teleport": "^0.1.2",
-    "@livestorm/ui-icons": "^2.0.0",
-    "@livestorm/ui-tokens": "^2.0.0"
+    "@livestorm/ui-tokens": "^2.0.2",
+    "@livestorm/ui-icons": "^2.0.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",

package/src/components/Toast/LayoutToasts.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance } from 'vue'
 import type { ResponsiveGlobalComponentProperty } from '../../utils/responsive.types'
+import { useResponsive } from '../../utils/responsive'
 import { useToasts, type ToastOptions } from './toastDSV2'
 import ToastMessage from './ToastMessage.vue'
 
@@ -8,7 +9,9 @@ const app = getCurrentInstance()
 if (!app) {
   throw new Error('No current instance found')
 }
-const responsive = computed(() => app.appContext.config.globalProperties.$responsive as ResponsiveGlobalComponentProperty)
+// Prefer the app-installed $responsive (it may carry custom flags); fall
+// back to the shared singleton so no plugin registration is required.
+const responsive = computed(() => (app.appContext.config.globalProperties.$responsive ?? useResponsive()) as ResponsiveGlobalComponentProperty)
 
 const MAX_ITEMS_DISPLAYED = 3
 

package/src/components/UiButton/UiButton.vue

@@ -24,59 +24,60 @@
       class="button-overlay absolute h-full top-0 left-0 z-10 rounded-md w-full"
       :class="overlayClasses"
     />
-    <div
-      v-tooltip="tooltip"
-      class="button-wrapper flex items-center whitespace-nowrap h-full relative z-20"
-    >
-      <!-- Loader -->
-      <UiLoader
-        v-if="loading"
-        :size="size"
-        :class="{ 'mr-2': hasLabel }"
-      />
-
-      <!-- Content -->
-      <template
-        v-else-if="showIconLeft"
+    <UiTooltip :content="typeof tooltip === 'string' ? tooltip : tooltip?.content">
+      <div
+        class="button-wrapper flex items-center whitespace-nowrap h-full relative z-20"
       >
-        <div
-          v-if="iconSlot"
-          :class="[iconSizeClasses, { 'mr-2': hasLabel }]"
-          class="shrink-0"
+        <!-- Loader -->
+        <UiLoader
+          v-if="loading"
+          :size="size"
+          :class="{ 'mr-2': hasLabel }"
+        />
+
+        <!-- Content -->
+        <template
+          v-else-if="showIconLeft"
         >
-          <RenderSlot
-            :vnodes="iconSlot"
+          <div
+            v-if="iconSlot"
+            :class="[iconSizeClasses, { 'mr-2': hasLabel }]"
+            class="shrink-0"
+          >
+            <RenderSlot
+              :vnodes="iconSlot"
+            />
+          </div>
+          <div
+            v-else-if="imageSource"
+            :class="[iconSizeClasses, { 'mr-2': hasLabel }]"
+            class="shrink-0"
+          >
+            <img
+              :src="imageSource"
+              :alt="`${labelFinal} button image`"
+            >
+          </div>
+          <div
+            v-else-if="icon"
+            :class="[icon, iconSizeClasses, { 'mr-2': hasLabel }]"
+            class="shrink-0"
           />
-        </div>
-        <div
-          v-else-if="imageSource"
-          :class="[iconSizeClasses, { 'mr-2': hasLabel }]"
-          class="shrink-0"
+        </template>
+        <span
+          class="content w-full"
         >
-          <img
-            :src="imageSource"
-            :alt="`${labelFinal} button image`"
-          >
-        </div>
+          <RenderSlot
+            :vnodes="defaultSlot"
+          />
+        </span>
         <div
-          v-else-if="icon"
-          :class="[icon, iconSizeClasses, { 'mr-2': hasLabel }]"
+          v-if="iconRight"
+          :class="[iconRight, iconSizeClasses, { 'ml-2': hasLabel }]"
           class="shrink-0"
         />
-      </template>
-      <span
-        class="content w-full"
-      >
-        <RenderSlot
-          :vnodes="defaultSlot"
-        />
-      </span>
-      <div
-        v-if="iconRight"
-        :class="[iconRight, iconSizeClasses, { 'ml-2': hasLabel }]"
-        class="shrink-0"
-      />
-    </div>
+      </div>
+    </UiTooltip>
   </component>
 </template>
 
@@ -86,6 +87,7 @@ import { useSlotsAsComponents, RenderSlot } from '../../utils/slot'
 import { SIZES, type Size } from '../../constants'
 import { useButtonStyles, BUTTON_COLORS, type ButtonVariant, type ButtonColor } from '../../composables/useButtonStyles'
 import UiLoader from '../UiLoader/UiLoader.vue'
+import UiTooltip from '../UiTooltip/UiTooltip.vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 export type Variant = ButtonVariant
@@ -96,6 +98,7 @@ export default {
   components: {
     RenderSlot,
     UiLoader,
+    UiTooltip,
   },
 
   props: {

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/UiPage/UiPage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch, getCurrentInstance, type Slot } from 'vue'
 import { BREAKPOINT_LG } from '../../utils/breakpoints'
+import { useResponsive } from '../../utils/responsive'
 import useThemeAndModes from '../../composables/useThemeAndModes'
 import { useMobileMenu } from '../../composables/useMobileMenu'
 import UiLoader from '../UiLoader/UiLoader.vue'
@@ -83,7 +84,9 @@ const app = getCurrentInstance()
 if (!app) {
   throw new Error('No current instance found')
 }
-const responsive = computed(() => app.appContext.config.globalProperties.$responsive)
+// Prefer the app-installed $responsive (it may carry custom flags); fall
+// back to the shared singleton so no plugin registration is required.
+const responsive = computed(() => app.appContext.config.globalProperties.$responsive ?? useResponsive())
 const displayLeftSlot = computed(() => responsive.value.width >= BREAKPOINT_LG)
 
 const UiPage = ref<HTMLElement | undefined>()

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>