@quikturn/logos-vue 1.0.0

package/dist/index.mjs

@@ -0,0 +1,559 @@
+import { inject as ue, computed as v, toValue as te, defineComponent as V, onMounted as W, unref as q, openBlock as c, createElementBlock as m, normalizeStyle as b, normalizeClass as R, createElementVNode as S, Fragment as x, renderList as G, createBlock as ae, resolveDynamicComponent as le, watch as j, ref as $, onUnmounted as de, createCommentVNode as ce } from "vue";
+import { logoUrl as F, BASE_URL as fe } from "@quikturn/logos";
+const oe = Symbol("quikturn"), Ce = {
+  install(n, e) {
+    n.provide(oe, { token: e.token, baseUrl: e.baseUrl });
+  }
+};
+function N() {
+  return ue(oe);
+}
+function Ee(n, e) {
+  const t = N();
+  return v(() => {
+    const a = e ? te(e) : void 0, g = (a == null ? void 0 : a.token) ?? (t == null ? void 0 : t.token), f = (a == null ? void 0 : a.baseUrl) ?? (t == null ? void 0 : t.baseUrl);
+    return F(te(n), {
+      token: g,
+      baseUrl: f,
+      size: a == null ? void 0 : a.size,
+      format: a == null ? void 0 : a.format,
+      greyscale: a == null ? void 0 : a.greyscale,
+      theme: a == null ? void 0 : a.theme
+    });
+  });
+}
+const ne = /* @__PURE__ */ new Set();
+function Y(n) {
+  if (typeof window > "u" || !n || n.startsWith("sk_") || ne.has(n)) return;
+  ne.add(n);
+  const e = new Image();
+  e.src = `${fe}/_beacon?token=${n}&page=${encodeURIComponent(location.href)}`;
+}
+function K(n) {
+  try {
+    const e = new URL(n, "https://placeholder.invalid");
+    return e.protocol === "https:" || e.protocol === "http:";
+  } catch {
+    return !1;
+  }
+}
+const ve = ["href"], me = ["src", "alt", "loading"], ge = ["src", "alt", "loading"], he = ["src", "alt", "loading"], He = /* @__PURE__ */ V({
+  __name: "QuikturnLogo",
+  props: {
+    domain: {},
+    token: {},
+    baseUrl: {},
+    size: {},
+    format: {},
+    greyscale: { type: Boolean },
+    theme: {},
+    alt: {},
+    href: {},
+    class: {},
+    style: {},
+    loading: { default: "lazy" }
+  },
+  emits: ["error", "load"],
+  setup(n, { emit: e }) {
+    const t = n, a = e, g = N(), f = v(() => t.token ?? (g == null ? void 0 : g.token) ?? ""), h = v(() => t.baseUrl ?? (g == null ? void 0 : g.baseUrl)), r = v(
+      () => F(t.domain, {
+        token: f.value || void 0,
+        size: t.size,
+        format: t.format,
+        greyscale: t.greyscale,
+        theme: t.theme,
+        baseUrl: h.value
+      })
+    ), l = v(() => t.alt ?? `${t.domain} logo`);
+    return W(() => {
+      f.value && Y(f.value);
+    }), (i, u) => n.href && q(K)(n.href) ? (c(), m("a", {
+      key: 0,
+      href: n.href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      class: R(t.class),
+      style: b(t.style)
+    }, [
+      S("img", {
+        src: r.value,
+        alt: l.value,
+        loading: n.loading,
+        onError: u[0] || (u[0] = (d) => a("error", d)),
+        onLoad: u[1] || (u[1] = (d) => a("load", d))
+      }, null, 40, me)
+    ], 14, ve)) : t.class || t.style ? (c(), m("span", {
+      key: 1,
+      class: R(t.class),
+      style: b(t.style)
+    }, [
+      S("img", {
+        src: r.value,
+        alt: l.value,
+        loading: n.loading,
+        onError: u[2] || (u[2] = (d) => a("error", d)),
+        onLoad: u[3] || (u[3] = (d) => a("load", d))
+      }, null, 40, ge)
+    ], 6)) : (c(), m("img", {
+      key: 2,
+      src: r.value,
+      alt: l.value,
+      loading: n.loading,
+      onError: u[4] || (u[4] = (d) => a("error", d)),
+      onLoad: u[5] || (u[5] = (d) => a("load", d))
+    }, null, 40, he));
+  }
+}), ye = ["aria-label"], pe = {
+  key: 1,
+  style: { display: "flex", alignItems: "center", justifyContent: "center" }
+}, ke = ["href", "aria-label"], be = ["src", "alt"], $e = ["src", "alt"], Te = /* @__PURE__ */ V({
+  __name: "QuikturnLogoGrid",
+  props: {
+    domains: {},
+    logos: {},
+    token: {},
+    baseUrl: {},
+    columns: { default: 4 },
+    gap: { default: 24 },
+    logoSize: {},
+    logoFormat: {},
+    logoGreyscale: { type: Boolean },
+    logoTheme: {},
+    renderItem: {},
+    class: {},
+    style: {},
+    ariaLabel: { default: "Company logos" }
+  },
+  setup(n) {
+    const e = n, t = N(), a = v(() => e.token ?? (t == null ? void 0 : t.token) ?? ""), g = v(() => e.baseUrl ?? (t == null ? void 0 : t.baseUrl)), f = v(() => (e.logos ?? (e.domains ?? []).map((l) => ({ domain: l }))).map((l) => ({
+      domain: l.domain,
+      alt: l.alt ?? `${l.domain} logo`,
+      href: l.href,
+      url: F(l.domain, {
+        token: a.value || void 0,
+        size: l.size ?? e.logoSize,
+        format: l.format ?? e.logoFormat,
+        greyscale: l.greyscale ?? e.logoGreyscale,
+        theme: l.theme ?? e.logoTheme,
+        baseUrl: g.value
+      })
+    }))), h = v(() => ({
+      display: "grid",
+      gridTemplateColumns: `repeat(${e.columns}, 1fr)`,
+      gap: `${e.gap}px`,
+      alignItems: "center",
+      justifyItems: "center",
+      ...e.style ?? {}
+    }));
+    return W(() => {
+      a.value && Y(a.value);
+    }), (r, l) => (c(), m("div", {
+      role: "region",
+      "aria-label": n.ariaLabel,
+      class: R(e.class),
+      style: b(h.value)
+    }, [
+      (c(!0), m(x, null, G(f.value, (i, u) => (c(), m(x, {
+        key: i.domain
+      }, [
+        n.renderItem ? (c(), ae(le(n.renderItem(i, u)), { key: 0 })) : (c(), m("div", pe, [
+          i.href && q(K)(i.href) ? (c(), m("a", {
+            key: 0,
+            href: i.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            "aria-label": i.alt
+          }, [
+            S("img", {
+              src: i.url,
+              alt: i.alt,
+              loading: "lazy",
+              style: { maxWidth: "100%", height: "auto", display: "block" }
+            }, null, 8, be)
+          ], 8, ke)) : (c(), m("img", {
+            key: 1,
+            src: i.url,
+            alt: i.alt,
+            loading: "lazy",
+            style: { maxWidth: "100%", height: "auto", display: "block" }
+          }, null, 8, $e))
+        ]))
+      ], 64))), 128))
+    ], 14, ye));
+  }
+}), U = {
+  SMOOTH_TAU: 0.25,
+  MIN_COPIES: 2,
+  COPY_HEADROOM: 2
+};
+function we(n, e, t) {
+  j(
+    t,
+    (a, g, f) => {
+      if (typeof window > "u") return;
+      if (!window.ResizeObserver) {
+        const r = () => n();
+        window.addEventListener("resize", r), n(), f(() => window.removeEventListener("resize", r));
+        return;
+      }
+      const h = e.map((r) => {
+        const l = r.value;
+        if (!l) return null;
+        const i = new ResizeObserver(n);
+        return i.observe(l), i;
+      });
+      n(), f(() => {
+        h.forEach((r) => r == null ? void 0 : r.disconnect());
+      });
+    },
+    { immediate: !0 }
+  );
+}
+function Me(n, e, t) {
+  j(
+    t,
+    (a, g, f) => {
+      var i;
+      const h = ((i = n.value) == null ? void 0 : i.querySelectorAll("img")) ?? [];
+      if (h.length === 0) {
+        e();
+        return;
+      }
+      let r = h.length;
+      const l = () => {
+        r -= 1, r === 0 && e();
+      };
+      h.forEach((u) => {
+        const d = u;
+        d.complete ? l() : (d.addEventListener("load", l, { once: !0 }), d.addEventListener("error", l, { once: !0 }));
+      }), f(() => {
+        h.forEach((u) => {
+          u.removeEventListener("load", l), u.removeEventListener("error", l);
+        });
+      });
+    },
+    { immediate: !0 }
+  );
+}
+function Se(n, e, t, a, g, f, h) {
+  const r = $(null), l = $(null), i = $(0), u = $(0);
+  j(
+    () => [
+      e(),
+      t(),
+      a(),
+      g(),
+      f(),
+      h()
+    ],
+    (d, k, O) => {
+      var T;
+      const M = n.value;
+      if (!M) return;
+      const Q = typeof window < "u" && ((T = window.matchMedia) == null ? void 0 : T.call(window, "(prefers-reduced-motion: reduce)").matches), z = h(), w = z ? a() : t();
+      if (w > 0 && (i.value = (i.value % w + w) % w, M.style.transform = z ? `translate3d(0, ${-i.value}px, 0)` : `translate3d(${-i.value}px, 0, 0)`), Q) {
+        M.style.transform = "translate3d(0, 0, 0)", O(() => {
+          l.value = null;
+        });
+        return;
+      }
+      const H = (_) => {
+        l.value === null && (l.value = _);
+        const B = Math.max(0, _ - l.value) / 1e3;
+        l.value = _;
+        const A = f(), I = g() && A !== void 0 ? A : e(), P = 1 - Math.exp(-B / U.SMOOTH_TAU);
+        if (u.value += (I - u.value) * P, w > 0) {
+          let L = i.value + u.value * B;
+          L = (L % w + w) % w, i.value = L, M.style.transform = z ? `translate3d(0, ${-i.value}px, 0)` : `translate3d(${-i.value}px, 0, 0)`;
+        }
+        r.value = requestAnimationFrame(H);
+      };
+      r.value = requestAnimationFrame(H), O(() => {
+        r.value !== null && (cancelAnimationFrame(r.value), r.value = null), l.value = null;
+      });
+    },
+    { immediate: !0 }
+  ), de(() => {
+    r.value !== null && (cancelAnimationFrame(r.value), r.value = null);
+  });
+}
+const Oe = ["aria-label"], _e = ["aria-hidden"], Ie = ["href", "aria-label"], Ue = ["src", "alt"], xe = ["src", "alt"], Be = /* @__PURE__ */ V({
+  __name: "QuikturnLogoCarousel",
+  props: {
+    domains: { default: void 0 },
+    logos: { default: void 0 },
+    token: { default: void 0 },
+    baseUrl: { default: void 0 },
+    speed: { default: 120 },
+    direction: { default: "left" },
+    pauseOnHover: { type: Boolean, default: void 0 },
+    hoverSpeed: { default: void 0 },
+    logoHeight: { default: 28 },
+    gap: { default: 32 },
+    width: { default: "100%" },
+    fadeOut: { type: Boolean, default: !1 },
+    fadeOutColor: { default: void 0 },
+    scaleOnHover: { type: Boolean, default: !1 },
+    logoSize: { default: void 0 },
+    logoFormat: { default: void 0 },
+    logoGreyscale: { type: Boolean, default: void 0 },
+    logoTheme: { default: void 0 },
+    renderItem: { type: Function, default: void 0 },
+    class: {},
+    style: {},
+    ariaLabel: { default: "Company logos" }
+  },
+  setup(n) {
+    const e = n, t = N(), a = v(() => e.token ?? (t == null ? void 0 : t.token) ?? ""), g = v(() => e.baseUrl ?? (t == null ? void 0 : t.baseUrl)), f = $(null), h = $(null), r = $(null), l = $(0), i = $(0), u = $(U.MIN_COPIES), d = $(!1), k = v(
+      () => e.direction === "up" || e.direction === "down"
+    ), O = v(() => (e.logos ?? (e.domains ?? []).map((s) => ({ domain: s }))).map((s) => ({
+      domain: s.domain,
+      alt: s.alt ?? `${s.domain} logo`,
+      href: s.href,
+      url: F(s.domain, {
+        token: a.value || void 0,
+        size: s.size ?? e.logoSize,
+        format: s.format ?? e.logoFormat,
+        greyscale: s.greyscale ?? e.logoGreyscale,
+        theme: s.theme ?? e.logoTheme,
+        baseUrl: g.value
+      })
+    }))), M = v(() => {
+      if (e.hoverSpeed !== void 0) return e.hoverSpeed;
+      if (e.pauseOnHover === !0) return 0;
+    }), Q = v(() => {
+      const o = Math.abs(e.speed), s = k.value ? e.direction === "up" ? 1 : -1 : e.direction === "left" ? 1 : -1, y = e.speed < 0 ? -1 : 1;
+      return o * s * y;
+    }), z = v(() => {
+      const o = e.width;
+      return typeof o == "number" ? `${o}px` : o ?? void 0;
+    }), w = v(() => ({
+      position: "relative",
+      overflow: "hidden",
+      width: k.value ? void 0 : z.value ?? "100%",
+      height: k.value ? "100%" : void 0,
+      display: k.value ? "inline-block" : void 0
+    })), H = v(() => ({
+      display: "flex",
+      flexDirection: k.value ? "column" : "row",
+      width: k.value ? "100%" : "max-content",
+      willChange: "transform",
+      userSelect: "none",
+      position: "relative",
+      zIndex: 0
+    })), T = v(
+      () => Array.from({ length: u.value }, (o, s) => s)
+    );
+    W(() => {
+      a.value && Y(a.value);
+    });
+    function _() {
+      var C, ee;
+      const o = f.value, s = (C = r.value) == null ? void 0 : C.getBoundingClientRect(), y = (s == null ? void 0 : s.width) ?? 0, p = (s == null ? void 0 : s.height) ?? 0;
+      if (k.value) {
+        const E = ((ee = o == null ? void 0 : o.parentElement) == null ? void 0 : ee.clientHeight) ?? 0;
+        if (o && E > 0 && (o.style.height = `${Math.ceil(E)}px`), p > 0) {
+          i.value = Math.ceil(p);
+          const D = (o == null ? void 0 : o.clientHeight) ?? E ?? p, ie = Math.ceil(D / p) + U.COPY_HEADROOM;
+          u.value = Math.max(U.MIN_COPIES, ie);
+        }
+      } else if (y > 0) {
+        l.value = Math.ceil(y);
+        const E = (o == null ? void 0 : o.clientWidth) ?? 0, D = Math.ceil(E / y) + U.COPY_HEADROOM;
+        u.value = Math.max(U.MIN_COPIES, D);
+      }
+    }
+    we(_, [f, r], () => [
+      O.value,
+      e.gap,
+      e.logoHeight,
+      k.value
+    ]), Me(r, _, () => [
+      O.value,
+      e.gap,
+      e.logoHeight,
+      k.value
+    ]), Se(
+      h,
+      () => Q.value,
+      () => l.value,
+      () => i.value,
+      () => d.value,
+      () => M.value,
+      () => k.value
+    );
+    function B() {
+      M.value !== void 0 && (d.value = !0);
+    }
+    function A() {
+      M.value !== void 0 && (d.value = !1);
+    }
+    const I = {
+      position: "absolute",
+      pointerEvents: "none",
+      zIndex: 1
+    };
+    function P() {
+      const o = e.fadeOutColor ?? "#ffffff";
+      return k.value ? {
+        ...I,
+        top: "0",
+        left: "0",
+        right: "0",
+        height: "clamp(24px, 8%, 120px)",
+        background: `linear-gradient(to bottom, ${o} 0%, transparent 100%)`
+      } : {
+        ...I,
+        top: "0",
+        bottom: "0",
+        left: "0",
+        width: "clamp(24px, 8%, 120px)",
+        background: `linear-gradient(to right, ${o} 0%, transparent 100%)`
+      };
+    }
+    function L() {
+      const o = e.fadeOutColor ?? "#ffffff";
+      return k.value ? {
+        ...I,
+        bottom: "0",
+        left: "0",
+        right: "0",
+        height: "clamp(24px, 8%, 120px)",
+        background: `linear-gradient(to top, ${o} 0%, transparent 100%)`
+      } : {
+        ...I,
+        top: "0",
+        bottom: "0",
+        right: "0",
+        width: "clamp(24px, 8%, 120px)",
+        background: `linear-gradient(to left, ${o} 0%, transparent 100%)`
+      };
+    }
+    function J() {
+      return {
+        height: `${e.logoHeight}px`,
+        width: "auto",
+        display: "block",
+        objectFit: "contain",
+        userSelect: "none",
+        pointerEvents: "none",
+        ...e.scaleOnHover ? { transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)" } : {}
+      };
+    }
+    function X(o) {
+      if (!e.scaleOnHover) return;
+      const s = o.currentTarget.closest("li"), y = s == null ? void 0 : s.querySelector("img");
+      y && (y.style.transform = "scale(1.2)");
+    }
+    function Z(o) {
+      if (!e.scaleOnHover) return;
+      const s = o.currentTarget.closest("li"), y = s == null ? void 0 : s.querySelector("img");
+      y && (y.style.transform = "");
+    }
+    function re() {
+      return {
+        flex: "none",
+        ...k.value ? { marginBottom: `${e.gap}px` } : { marginRight: `${e.gap}px` }
+      };
+    }
+    function se() {
+      return {
+        display: "flex",
+        flexDirection: k.value ? "column" : "row",
+        alignItems: "center",
+        listStyle: "none",
+        margin: "0",
+        padding: "0"
+      };
+    }
+    return (o, s) => (c(), m("div", {
+      ref_key: "containerRef",
+      ref: f,
+      role: "region",
+      "aria-label": n.ariaLabel,
+      class: R(o.$props.class),
+      style: b([w.value, o.$props.style])
+    }, [
+      n.fadeOut ? (c(), m(x, { key: 0 }, [
+        S("div", {
+          "aria-hidden": "true",
+          "data-testid": "fade-overlay",
+          style: b(P())
+        }, null, 4),
+        S("div", {
+          "aria-hidden": "true",
+          "data-testid": "fade-overlay",
+          style: b(L())
+        }, null, 4)
+      ], 64)) : ce("", !0),
+      S("div", {
+        ref_key: "trackRef",
+        ref: h,
+        style: b(H.value),
+        onMouseenter: B,
+        onMouseleave: A
+      }, [
+        (c(!0), m(x, null, G(T.value, (y) => (c(), m("ul", {
+          key: y,
+          ref_for: !0,
+          ref: (p) => {
+            y === 0 && (r.value = p);
+          },
+          role: "list",
+          "aria-hidden": y > 0 ? !0 : void 0,
+          style: b(se())
+        }, [
+          (c(!0), m(x, null, G(O.value, (p, C) => (c(), m("li", {
+            key: `${y}-${C}`,
+            role: "listitem",
+            style: b(re())
+          }, [
+            n.renderItem ? (c(), ae(le(() => n.renderItem(p, C)), { key: 0 })) : (c(), m(x, { key: 1 }, [
+              p.href && q(K)(p.href) ? (c(), m("a", {
+                key: 0,
+                href: p.href,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": p.alt,
+                style: { display: "inline-flex", "align-items": "center", "text-decoration": "none" },
+                onMouseenter: X,
+                onMouseleave: Z
+              }, [
+                S("img", {
+                  src: p.url,
+                  alt: p.alt,
+                  loading: "lazy",
+                  decoding: "async",
+                  draggable: !1,
+                  style: b(J())
+                }, null, 12, Ue)
+              ], 40, Ie)) : (c(), m("span", {
+                key: 1,
+                style: { display: "inline-flex", "align-items": "center" },
+                onMouseenter: X,
+                onMouseleave: Z
+              }, [
+                S("img", {
+                  src: p.url,
+                  alt: p.alt,
+                  loading: "lazy",
+                  decoding: "async",
+                  draggable: !1,
+                  style: b(J())
+                }, null, 12, xe)
+              ], 32))
+            ], 64))
+          ], 4))), 128))
+        ], 12, _e))), 128))
+      ], 36)
+    ], 14, Oe));
+  }
+});
+export {
+  He as QuikturnLogo,
+  Be as QuikturnLogoCarousel,
+  Te as QuikturnLogoGrid,
+  Ce as QuikturnPlugin,
+  Ee as useLogoUrl,
+  N as useQuikturnContext
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@quikturn/logos-vue",
+  "version": "1.0.0",
+  "description": "Vue 3 components for the Quikturn Logos API — QuikturnLogo, LogoCarousel, LogoGrid",
+  "license": "MIT",
+  "author": "Quikturn",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Quikturn-PowerPoint-Add-In/Logo-SDK.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/Quikturn-PowerPoint-Add-In/Logo-SDK/issues"
+  },
+  "homepage": "https://github.com/Quikturn-PowerPoint-Add-In/Logo-SDK/tree/main/packages/vue#readme",
+  "keywords": [
+    "quikturn",
+    "logos",
+    "vue",
+    "company-logos",
+    "brand-assets"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint src/ tests/"
+  },
+  "dependencies": {
+    "@quikturn/logos": "workspace:^"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "jsdom": "^28.0.0",
+    "semantic-release": "^25.0.3",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.2.0"
+  }
+}