@toototech/webbuilder-plugins 0.1.0

package/dist/useFontManager-CdrLq1eG.js

@@ -0,0 +1,336 @@
+import { ref, computed } from "vue";
+let _cache = null;
+let _fetchPromise = null;
+const CATEGORY_MAP = {
+  "sans-serif": "sans-serif",
+  "serif": "serif",
+  "display": "cursive",
+  "handwriting": "cursive",
+  "monospace": "monospace"
+};
+function buildCssFamily(family, category) {
+  const fallback = CATEGORY_MAP[category] ?? "sans-serif";
+  return `"${family}", ${fallback}`;
+}
+const getGoogleFontsApiKey = () => {
+  var _a, _b;
+  const meta = import.meta;
+  return ((_b = (_a = meta.env) == null ? void 0 : _a.VITE_GOOGLE_FONTS_API_KEY) == null ? void 0 : _b.trim()) || "";
+};
+async function fetchAllFonts() {
+  if (_cache)
+    return _cache;
+  if (_fetchPromise)
+    return _fetchPromise;
+  const apiKey = getGoogleFontsApiKey();
+  _fetchPromise = (async () => {
+    try {
+      let fonts = [];
+      if (apiKey) {
+        const url = `https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`;
+        const res = await fetch(url);
+        if (!res.ok)
+          throw new Error(`Google Fonts API error: ${res.status}`);
+        const data = await res.json();
+        fonts = data.items.map((item) => ({
+          family: item.family,
+          category: item.category,
+          cssFamily: buildCssFamily(item.family, item.category),
+          googleName: item.family.replace(/ /g, "+")
+        }));
+      } else {
+        fonts = BUILTIN_FONTS;
+      }
+      _cache = fonts;
+      return fonts;
+    } catch (error) {
+      console.warn("[useGoogleFonts] Failed to load font list, using builtin:", error);
+      _cache = BUILTIN_FONTS;
+      return BUILTIN_FONTS;
+    } finally {
+      _fetchPromise = null;
+    }
+  })();
+  return _fetchPromise;
+}
+const BUILTIN_FONTS = [
+  { family: "Inter", category: "sans-serif", cssFamily: '"Inter", sans-serif', googleName: "Inter" },
+  { family: "Roboto", category: "sans-serif", cssFamily: '"Roboto", sans-serif', googleName: "Roboto" },
+  { family: "Open Sans", category: "sans-serif", cssFamily: '"Open Sans", sans-serif', googleName: "Open+Sans" },
+  { family: "Lato", category: "sans-serif", cssFamily: '"Lato", sans-serif', googleName: "Lato" },
+  { family: "Montserrat", category: "sans-serif", cssFamily: '"Montserrat", sans-serif', googleName: "Montserrat" },
+  { family: "Poppins", category: "sans-serif", cssFamily: '"Poppins", sans-serif', googleName: "Poppins" },
+  { family: "Nunito", category: "sans-serif", cssFamily: '"Nunito", sans-serif', googleName: "Nunito" },
+  { family: "Raleway", category: "sans-serif", cssFamily: '"Raleway", sans-serif', googleName: "Raleway" },
+  { family: "Ubuntu", category: "sans-serif", cssFamily: '"Ubuntu", sans-serif', googleName: "Ubuntu" },
+  { family: "Outfit", category: "sans-serif", cssFamily: '"Outfit", sans-serif', googleName: "Outfit" },
+  { family: "DM Sans", category: "sans-serif", cssFamily: '"DM Sans", sans-serif', googleName: "DM+Sans" },
+  { family: "Plus Jakarta Sans", category: "sans-serif", cssFamily: '"Plus Jakarta Sans", sans-serif', googleName: "Plus+Jakarta+Sans" },
+  { family: "Manrope", category: "sans-serif", cssFamily: '"Manrope", sans-serif', googleName: "Manrope" },
+  { family: "Work Sans", category: "sans-serif", cssFamily: '"Work Sans", sans-serif', googleName: "Work+Sans" },
+  { family: "Rubik", category: "sans-serif", cssFamily: '"Rubik", sans-serif', googleName: "Rubik" },
+  { family: "Mulish", category: "sans-serif", cssFamily: '"Mulish", sans-serif', googleName: "Mulish" },
+  { family: "Source Sans 3", category: "sans-serif", cssFamily: '"Source Sans 3", sans-serif', googleName: "Source+Sans+3" },
+  { family: "Noto Sans", category: "sans-serif", cssFamily: '"Noto Sans", sans-serif', googleName: "Noto+Sans" },
+  { family: "Oswald", category: "sans-serif", cssFamily: '"Oswald", sans-serif', googleName: "Oswald" },
+  { family: "Figtree", category: "sans-serif", cssFamily: '"Figtree", sans-serif', googleName: "Figtree" },
+  { family: "Playfair Display", category: "serif", cssFamily: '"Playfair Display", serif', googleName: "Playfair+Display" },
+  { family: "Merriweather", category: "serif", cssFamily: '"Merriweather", serif', googleName: "Merriweather" },
+  { family: "Lora", category: "serif", cssFamily: '"Lora", serif', googleName: "Lora" },
+  { family: "EB Garamond", category: "serif", cssFamily: '"EB Garamond", serif', googleName: "EB+Garamond" },
+  { family: "Cormorant Garamond", category: "serif", cssFamily: '"Cormorant Garamond", serif', googleName: "Cormorant+Garamond" },
+  { family: "Bebas Neue", category: "display", cssFamily: '"Bebas Neue", cursive', googleName: "Bebas+Neue" },
+  { family: "Abril Fatface", category: "display", cssFamily: '"Abril Fatface", cursive', googleName: "Abril+Fatface" },
+  { family: "JetBrains Mono", category: "monospace", cssFamily: '"JetBrains Mono", monospace', googleName: "JetBrains+Mono" },
+  { family: "Fira Code", category: "monospace", cssFamily: '"Fira Code", monospace', googleName: "Fira+Code" },
+  { family: "Space Mono", category: "monospace", cssFamily: '"Space Mono", monospace', googleName: "Space+Mono" },
+  { family: "Noto Sans SC", category: "sans-serif", cssFamily: '"Noto Sans SC", sans-serif', googleName: "Noto+Sans+SC" },
+  { family: "Noto Serif SC", category: "serif", cssFamily: '"Noto Serif SC", serif', googleName: "Noto+Serif+SC" },
+  { family: "ZCOOL QingKe HuangYou", category: "display", cssFamily: '"ZCOOL QingKe HuangYou", cursive', googleName: "ZCOOL+QingKe+HuangYou" },
+  { family: "Ma Shan Zheng", category: "handwriting", cssFamily: '"Ma Shan Zheng", cursive', googleName: "Ma+Shan+Zheng" }
+];
+const _injectedMain = /* @__PURE__ */ new Set();
+const _injectedCanvas = /* @__PURE__ */ new WeakMap();
+function injectGoogleFontCss(googleName, canvasDoc) {
+  const href = `https://fonts.googleapis.com/css2?family=${googleName}:wght@300;400;500;600;700&display=swap`;
+  if (!_injectedMain.has(googleName)) {
+    _injectedMain.add(googleName);
+    if (!document.head.querySelector(`link[data-wb-gf="${googleName}"]`)) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.setAttribute("data-wb-gf", googleName);
+      link.href = href;
+      document.head.appendChild(link);
+    }
+  }
+  if (canvasDoc) {
+    let canvasSet = _injectedCanvas.get(canvasDoc);
+    if (!canvasSet) {
+      canvasSet = /* @__PURE__ */ new Set();
+      _injectedCanvas.set(canvasDoc, canvasSet);
+    }
+    if (!canvasSet.has(googleName)) {
+      canvasSet.add(googleName);
+      try {
+        if (!canvasDoc.head.querySelector(`link[data-wb-gf="${googleName}"]`)) {
+          const link = canvasDoc.createElement("link");
+          link.rel = "stylesheet";
+          link.setAttribute("data-wb-gf", googleName);
+          link.href = href;
+          canvasDoc.head.appendChild(link);
+        }
+      } catch {
+      }
+    }
+  }
+}
+function useGoogleFonts() {
+  const allFonts = ref([]);
+  const loading = ref(false);
+  const hasApiKey = Boolean(getGoogleFontsApiKey());
+  async function load() {
+    if (allFonts.value.length > 0)
+      return;
+    loading.value = true;
+    try {
+      allFonts.value = await fetchAllFonts();
+    } finally {
+      loading.value = false;
+    }
+  }
+  function search(query) {
+    if (!query)
+      return allFonts.value;
+    const q = query.toLowerCase();
+    return allFonts.value.filter(
+      (f) => f.family.toLowerCase().includes(q) || f.category.toLowerCase().includes(q)
+    );
+  }
+  return { allFonts: computed(() => allFonts.value), loading, hasApiKey, load, search };
+}
+function extractGoogleFontLinks(cssOrHtml) {
+  const quoted = /font-family\s*:\s*["']([^"']+)["']/gi;
+  const families = /* @__PURE__ */ new Set();
+  let match;
+  while ((match = quoted.exec(cssOrHtml)) !== null) {
+    families.add(match[1].trim());
+  }
+  const fontList = _cache ?? BUILTIN_FONTS;
+  const links = [];
+  for (const family of families) {
+    const found = fontList.find((f) => f.family === family);
+    if (found) {
+      links.push(
+        `https://fonts.googleapis.com/css2?family=${found.googleName}:wght@300;400;500;600;700&display=swap`
+      );
+    }
+  }
+  return links;
+}
+const ALL_VARIANTS = ["100", "200", "300", "regular", "500", "600", "700", "800", "900"];
+const DEFAULT_VARIANTS = ["300", "regular", "500", "600", "700"];
+const LINK_ATTR = "data-wb-font-installed";
+let _instance = null;
+let _editorRef = null;
+function createFontManager() {
+  const installedFonts = ref([]);
+  const googleFonts = useGoogleFonts();
+  function buildFontHref(font) {
+    const weights = font.variants.filter((v) => v !== "regular").map((v) => parseInt(v)).filter((n) => !isNaN(n)).sort((a, b) => a - b);
+    if (weights.length === 0) {
+      return `https://fonts.googleapis.com/css2?family=${font.googleName}&display=swap`;
+    }
+    const wghtList = weights.map((w) => `0,${w}`).join(";");
+    return `https://fonts.googleapis.com/css2?family=${font.googleName}:ital,wght@${wghtList}&display=swap`;
+  }
+  function injectFontLink(doc, font) {
+    const existing = doc.head.querySelector(`link[${LINK_ATTR}="${font.googleName}"]`);
+    if (existing) {
+      existing.setAttribute("href", buildFontHref(font));
+      return;
+    }
+    const link = doc.createElement("link");
+    link.rel = "stylesheet";
+    link.setAttribute(LINK_ATTR, font.googleName);
+    link.href = buildFontHref(font);
+    doc.head.appendChild(link);
+  }
+  function removeFontLink(doc, googleName) {
+    var _a;
+    (_a = doc.head.querySelector(`link[${LINK_ATTR}="${googleName}"]`)) == null ? void 0 : _a.remove();
+  }
+  function refreshAllLinks(doc) {
+    doc.head.querySelectorAll(`link[${LINK_ATTR}]`).forEach((el) => el.remove());
+    installedFonts.value.forEach((font) => injectFontLink(doc, font));
+  }
+  function getCanvasDoc() {
+    var _a, _b;
+    try {
+      return ((_b = (_a = _editorRef == null ? void 0 : _editorRef.Canvas) == null ? void 0 : _a.getDocument) == null ? void 0 : _b.call(_a)) ?? null;
+    } catch {
+      return null;
+    }
+  }
+  function injectToAll(font) {
+    injectFontLink(document, font);
+    const canvasDoc = getCanvasDoc();
+    if (canvasDoc)
+      injectFontLink(canvasDoc, font);
+  }
+  function removeFromAll(googleName) {
+    removeFontLink(document, googleName);
+    const canvasDoc = getCanvasDoc();
+    if (canvasDoc)
+      removeFontLink(canvasDoc, googleName);
+  }
+  function refreshAll() {
+    refreshAllLinks(document);
+    const canvasDoc = getCanvasDoc();
+    if (canvasDoc)
+      refreshAllLinks(canvasDoc);
+  }
+  function installFont(fontItem, variants) {
+    if (installedFonts.value.some((f) => f.family === fontItem.family))
+      return;
+    const font = {
+      family: fontItem.family,
+      category: fontItem.category,
+      cssFamily: fontItem.cssFamily,
+      googleName: fontItem.googleName,
+      variants: variants ?? [...DEFAULT_VARIANTS]
+    };
+    installedFonts.value = [...installedFonts.value, font];
+    injectToAll(font);
+  }
+  function removeFont(family) {
+    const font = installedFonts.value.find((f) => f.family === family);
+    if (!font)
+      return;
+    installedFonts.value = installedFonts.value.filter((f) => f.family !== family);
+    removeFromAll(font.googleName);
+  }
+  function updateVariants(family, variants) {
+    const idx = installedFonts.value.findIndex((f) => f.family === family);
+    if (idx < 0)
+      return;
+    const updated = { ...installedFonts.value[idx], variants: [...variants] };
+    const nextFonts = [...installedFonts.value];
+    nextFonts[idx] = updated;
+    installedFonts.value = nextFonts;
+    injectToAll(updated);
+  }
+  function restoreFromSaved(saved) {
+    if (!Array.isArray(saved) || saved.length === 0) {
+      installedFonts.value = [];
+      refreshAll();
+      return;
+    }
+    installedFonts.value = saved.map((font) => {
+      var _a;
+      return {
+        family: font.family ?? "",
+        category: font.category ?? "sans-serif",
+        cssFamily: font.cssFamily ?? `"${font.family}", sans-serif`,
+        googleName: font.googleName ?? ((_a = font.family) == null ? void 0 : _a.replace(/ /g, "+")) ?? "",
+        variants: Array.isArray(font.variants) ? font.variants : [...DEFAULT_VARIANTS]
+      };
+    });
+    refreshAll();
+  }
+  function isInstalled(family) {
+    return installedFonts.value.some((font) => font.family === family);
+  }
+  function getFontLinks() {
+    return installedFonts.value.map((font) => buildFontHref(font));
+  }
+  function getFontLinksHtml() {
+    const preconnect = '<link rel="preconnect" href="https://fonts.googleapis.com">\n<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
+    const links = installedFonts.value.map(
+      (font) => `<link href="${buildFontHref(font)}" rel="stylesheet">`
+    ).join("\n");
+    return links ? `${preconnect}
+${links}` : "";
+  }
+  function setupEditor(editor) {
+    _editorRef = editor;
+    editor.on("canvas:frame:load", () => {
+      setTimeout(() => {
+        const canvasDoc = getCanvasDoc();
+        if (canvasDoc)
+          refreshAllLinks(canvasDoc);
+      }, 50);
+    });
+    editor.on("page", () => {
+      setTimeout(() => {
+        const canvasDoc = getCanvasDoc();
+        if (canvasDoc)
+          refreshAllLinks(canvasDoc);
+      }, 100);
+    });
+  }
+  return {
+    installedFonts: computed(() => installedFonts.value),
+    googleFonts,
+    installFont,
+    removeFont,
+    updateVariants,
+    isInstalled,
+    restoreFromSaved,
+    getFontLinks,
+    getFontLinksHtml,
+    setupEditor,
+    ALL_VARIANTS
+  };
+}
+function useFontManager() {
+  if (!_instance) {
+    _instance = createFontManager();
+  }
+  return _instance;
+}
+export {
+  useGoogleFonts as a,
+  extractGoogleFontLinks as e,
+  injectGoogleFontCss as i,
+  useFontManager as u
+};

package/dist/vue.d.ts

@@ -0,0 +1,3 @@
+export * from './global-settings/vue.js';
+export * from './i18n/vue.js';
+export * from './layout-template/vue.js';