vlite3 1.4.8 → 1.4.9

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue.js";
+import ee from "./CommandPaletteItem.vue2.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue.js → CommandPaletteItem.vue2.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                        */
+/* empty css                       */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as U } from "../utils/i18n.js";
-/* empty css                                       */
+/* empty css                                      */
 const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

package/components/ScaleGenerator/ScaleGenerator.vue.d.ts

@@ -0,0 +1,44 @@
+import { ScaleGeneratorProps, ScaleHorizontalAlign } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            scale: number;
+            containerWidth: number;
+            targetWidth: number;
+        }): any;
+    };
+    refs: {
+        frameRef: HTMLDivElement;
+        contentRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ScaleGeneratorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:scale": (value: number) => any;
+    "update:containerWidth": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<ScaleGeneratorProps> & Readonly<{
+    "onUpdate:scale"?: (value: number) => any;
+    "onUpdate:containerWidth"?: (value: number) => any;
+}>, {
+    maxWidth: number;
+    contentClass: string;
+    enabled: boolean;
+    targetWidth: number;
+    minScale: number;
+    maxScale: number;
+    scale: number | null;
+    isEditMode: boolean;
+    horizontalAlign: ScaleHorizontalAlign;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    frameRef: HTMLDivElement;
+    contentRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/ScaleGenerator/ScaleGenerator.vue.js

@@ -0,0 +1,110 @@
+import { defineComponent as w, ref as n, computed as l, onMounted as O, onBeforeUnmount as M, watch as B, openBlock as E, createElementBlock as k, normalizeStyle as S, createElementVNode as C, normalizeClass as L, renderSlot as _, nextTick as $ } from "vue";
+const A = /* @__PURE__ */ w({
+  __name: "ScaleGenerator",
+  props: {
+    enabled: { type: Boolean, default: void 0 },
+    targetWidth: { default: void 0 },
+    maxWidth: { default: void 0 },
+    minScale: { default: 0.25 },
+    maxScale: { default: 1 },
+    scale: { default: null },
+    isEditMode: { type: Boolean, default: !1 },
+    horizontalAlign: { default: "center" },
+    contentClass: { default: "" }
+  },
+  emits: ["update:scale", "update:containerWidth"],
+  setup(v, { emit: b }) {
+    const e = v, c = b, o = n(null), r = n(null), a = n(1), m = n(0), h = n(0);
+    let u = null, d = null;
+    const f = l(() => e.enabled ?? !!e.isEditMode), i = l(
+      () => Math.max(1, e.targetWidth ?? e.maxWidth ?? 1440)
+    ), g = (t) => Math.min(e.maxScale, Math.max(e.minScale, t)), p = () => {
+      h.value = r.value?.scrollHeight ?? 0;
+    }, y = () => {
+      const t = o.value?.clientWidth ?? i.value;
+      if (m.value = t, c("update:containerWidth", t), !f.value) {
+        a.value = 1, p(), c("update:scale", 1);
+        return;
+      }
+      const W = typeof e.scale == "number" ? g(e.scale) : g(t / i.value);
+      a.value = Number(W.toFixed(4)), p(), c("update:scale", a.value);
+    }, s = async () => {
+      await $(), y();
+    };
+    O(() => {
+      s(), !(typeof ResizeObserver > "u") && (u = new ResizeObserver(() => {
+        s();
+      }), d = new ResizeObserver(() => {
+        s();
+      }), o.value && u.observe(o.value), r.value && d.observe(r.value));
+    }), M(() => {
+      u?.disconnect(), d?.disconnect();
+    }), B(
+      () => [
+        e.enabled,
+        e.isEditMode,
+        e.targetWidth,
+        e.maxWidth,
+        e.minScale,
+        e.maxScale,
+        e.scale,
+        e.horizontalAlign
+      ],
+      () => {
+        s();
+      }
+    );
+    const x = l(() => {
+      const t = e.horizontalAlign ?? "center";
+      return t === "left" ? {
+        marginLeft: "0",
+        marginRight: "auto",
+        transformOrigin: "top left"
+      } : t === "right" ? {
+        marginLeft: "auto",
+        marginRight: "0",
+        transformOrigin: "top right"
+      } : {
+        marginLeft: "auto",
+        marginRight: "auto",
+        transformOrigin: "top center"
+      };
+    }), R = l(() => {
+      if (!f.value) return;
+      const t = h.value * a.value;
+      return {
+        height: t > 0 ? `${t}px` : void 0
+      };
+    }), z = l(() => f.value ? {
+      width: `${i.value}px`,
+      transform: a.value !== 1 ? `scale(${a.value})` : "none",
+      ...x.value
+    } : {
+      maxWidth: e.maxWidth ? `${e.maxWidth}px` : void 0,
+      width: "100%",
+      ...x.value
+    });
+    return (t, W) => (E(), k("div", {
+      ref_key: "frameRef",
+      ref: o,
+      class: "vlite-scale-generator-frame relative w-full overflow-hidden",
+      style: S(R.value)
+    }, [
+      C("div", {
+        ref_key: "contentRef",
+        ref: r,
+        class: L(["vlite-scale-generator-content transition-transform duration-150 ease-out", v.contentClass]),
+        style: S(z.value)
+      }, [
+        _(t.$slots, "default", {
+          scale: a.value,
+          containerWidth: m.value,
+          targetWidth: i.value
+        })
+      ], 6)
+    ], 4));
+  }
+});
+export {
+  A as default
+};

package/components/ScaleGenerator/ScaleGenerator.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScaleGenerator.vue.js";
+export {
+  f as default
+};

package/components/ScaleGenerator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ScaleGenerator } from './ScaleGenerator.vue';
+export type { ScaleGeneratorProps, ScaleGeneratorSlotScope, ScaleHorizontalAlign, } from './types';

package/components/ScaleGenerator/types.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Public type surface for {@link ScaleGenerator}.
+ *
+ * `ScaleGenerator` is a generic CSS-transform based scaler for embed-style
+ * previews. It is not tied to any particular domain — it scales whatever
+ * content lives inside its default slot to a configurable target width.
+ *
+ * It is used by the ERP editor's "store preview" pane to fit a full
+ * storefront (typically 1440px wide) into the available preview viewport,
+ * and by the live storefront to opt-in to a fixed display width.
+ *
+ * The component exposes its current scale, container width, and target
+ * width through its scoped slot so descendants can render their own
+ * rulers / overlays if they need to.
+ */
+export type ScaleHorizontalAlign = 'left' | 'center' | 'right';
+export interface ScaleGeneratorProps {
+    /**
+     * Master switch. When `false` the content renders at its natural width
+     * (clamped to `maxWidth` if provided) without any transform. Defaults
+     * to `true` whenever `isEditMode` is also `true`.
+     */
+    enabled?: boolean;
+    /**
+     * The width (in `px`) the content was designed for. The component will
+     * scale content down to fit the available viewport. Defaults to
+     * `maxWidth ?? 1440`.
+     */
+    targetWidth?: number;
+    /**
+     * Hard cap on the content width when not scaling. Ignored when scaling
+     * is active (the content always renders at exactly `targetWidth` and is
+     * then scaled down).
+     */
+    maxWidth?: number;
+    /** Lower bound for the computed scale. Defaults to `0.25`. */
+    minScale?: number;
+    /** Upper bound for the computed scale. Defaults to `1`. */
+    maxScale?: number;
+    /**
+     * Manual override for the scale. When provided, the component does not
+     * derive a scale from the frame width — it uses this value (clamped to
+     * `[minScale, maxScale]`) verbatim. Useful for "zoom" controls.
+     */
+    scale?: number | null;
+    /**
+     * When `true`, scaling is enabled by default. Mostly used by editor
+     * previews where you want the preview to always scale-to-fit.
+     */
+    isEditMode?: boolean;
+    /**
+     * Where to align the (possibly scaled) content horizontally inside
+     * the frame. Defaults to `'center'`.
+     */
+    horizontalAlign?: ScaleHorizontalAlign;
+    /** Extra class for the inner content wrapper. */
+    contentClass?: string;
+}
+export interface ScaleGeneratorSlotScope {
+    scale: number;
+    containerWidth: number;
+    targetWidth: number;
+}

package/components/ThemeProvider/ThemeProvider.vue.d.ts

@@ -0,0 +1,27 @@
+import { ThemeProviderProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ThemeProviderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ThemeProviderProps> & Readonly<{}>, {
+    rootClass: string;
+    maxWidth: import('./types').ThemeMaxWidth;
+    borderRadius: number;
+    bgColor: string;
+    primaryColor: string;
+    footerBgColor: string;
+    baseFontSize: number;
+    headingScale: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/ThemeProvider/ThemeProvider.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent as s, computed as o, provide as n, openBlock as a, createElementBlock as m, normalizeStyle as u, normalizeClass as c, createBlock as f, resolveDynamicComponent as v, withCtx as p, createTextVNode as C, toDisplayString as b, renderSlot as S } from "vue";
+import { buildThemeVariables as g, buildCardOverrideStyles as h } from "./themeVars.js";
+import { THEME_STYLES_KEY as y } from "../../composables/useThemeStyles.js";
+import { isDarkColor as k } from "../../utils/colorUtils.js";
+const D = /* @__PURE__ */ s({
+  __name: "ThemeProvider",
+  props: {
+    bgColor: { default: void 0 },
+    primaryColor: { default: void 0 },
+    footerBgColor: { default: void 0 },
+    baseFontSize: { default: void 0 },
+    headingScale: { default: void 0 },
+    borderRadius: { default: void 0 },
+    maxWidth: { default: void 0 },
+    rootClass: { default: "vlite-theme-provider" }
+  },
+  setup(t) {
+    const e = t, r = o(() => e.bgColor ? k(e.bgColor) : !1), l = o(() => g(e)), d = o(
+      () => e.bgColor ? h(e.bgColor, r.value) : ""
+    );
+    return n(y, l), (i, T) => (a(), m("div", {
+      class: c([t.rootClass, "transition-colors duration-300", { dark: r.value }]),
+      style: u(l.value)
+    }, [
+      (a(), f(v("style"), null, {
+        default: p(() => [
+          C(b(d.value), 1)
+        ]),
+        _: 1
+      })),
+      S(i.$slots, "default")
+    ], 6));
+  }
+});
+export {
+  D as default
+};

package/components/ThemeProvider/ThemeProvider.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ThemeProvider.vue.js";
+export {
+  f as default
+};

package/components/ThemeProvider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ThemeProvider } from './ThemeProvider.vue';
+export type { ThemeProviderProps, ThemeStyles, ThemeMaxWidth } from './types';
+export { buildThemeVariables, buildCardOverrideStyles } from './themeVars';

package/components/ThemeProvider/themeVars.d.ts

@@ -0,0 +1,16 @@
+import { ThemeProviderProps, ThemeStyles } from './types';
+export declare const DEFAULT_BASE_FONT_SIZE = 16;
+export declare const DEFAULT_HEADING_SCALE = 1.25;
+export declare const DEFAULT_BORDER_RADIUS = 8;
+export declare const DEFAULT_MAX_WIDTH = 1440;
+/**
+ * Nested card overrides. Lives outside `buildThemeVariables` because the SFC
+ * has to inject it as a real `<style>` block (it targets descendant
+ * `.bg-card .bg-card` selectors which cannot be expressed as inline variables).
+ */
+export declare function buildCardOverrideStyles(bg: string, isDark: boolean): string;
+/**
+ * Compute the full theme-styles record from a {@link ThemeProviderProps}.
+ * Pure: no DOM, no Vue. Re-usable from tests and from server-side code.
+ */
+export declare function buildThemeVariables(props: ThemeProviderProps): ThemeStyles;