@osimart/create-storefront 0.0.0-stage → 1.0.1

package/app/logic/sections/GallerySection.js

@@ -0,0 +1,232 @@
+import { NuxtLink } from "#components";
+import { Autoplay, Pagination } from "swiper/modules";
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, align, customClass, heading } = useSectionShell(() => props.section);
+  const { mediaUrl } = useMediaUrl();
+  const placeholders = usePlaceholders();
+  const NuxtLinkComponent = NuxtLink;
+
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const num = (v, d) => (has(v) && Number.isFinite(Number(v)) ? Number(v) : d);
+  const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+
+  /* ------------------------------------------------------------------ items */
+
+  const TILE_SIZES = ["NORMAL", "TALL", "WIDE", "LARGE"];
+
+  const items = computed(() => {
+    const rows = (props.section.blocks ?? [])
+      .filter((block) => !block.disabled)
+      .map((block) => {
+        const bs = block.settings ?? {};
+        const media = bs.MEDIA ?? block.media ?? block.relations?.media ?? bs.IMAGE ?? null;
+        return {
+          key: block.id ?? block.key,
+          src: mediaUrl(media),
+          caption: t(bs.CAPTION) || "",
+          url: bs.URL || bs.LINK_URL || null,
+          size: TILE_SIZES.includes(String(bs.SIZE).toUpperCase()) ? String(bs.SIZE).toUpperCase() : "NORMAL",
+        };
+      });
+
+    // Editor with no images yet: sample tiles so the layout is designable.
+    if (!rows.length && placeholders.allowed?.value) {
+      return Array.from({ length: 6 }, (_, i) => ({
+        key: `placeholder-${i}`, src: null, caption: "", url: null, placeholder: true,
+      }));
+    }
+    return rows;
+  });
+  /* ----------------------------------------------------------------- layout */
+
+  const layout = computed(() => {
+    const value = String(s.value.LAYOUT || "GRID").toUpperCase();
+    return ["GRID", "MASONRY", "CAROUSEL", "MARQUEE"].includes(value) ? value : "GRID";
+  });
+
+  /* --------------------------------------------------------------- marquee */
+  const marqueeTrack = computed(() => {
+    const base = items.value;
+    if (!base.length) return [];
+    const repeat = Math.max(1, Math.ceil(10 / base.length));
+    // Copies get new render keys, but keep `baseKey` — the lightbox looks items
+    // up by their original key, and a suffixed key never matched.
+    const one = Array.from({ length: repeat }, (_, r) =>
+      base.map((i) => ({ ...i, baseKey: i.key, key: `${i.key}-r${r}` }))
+    ).flat();
+    return [
+      ...one.map((i) => ({ ...i, key: `${i.key}-a`, clone: false })),
+      ...one.map((i) => ({ ...i, key: `${i.key}-b`, clone: true })),
+    ];
+  });
+
+  const marqueeVars = computed(() => {
+    const count = Math.max(1, marqueeTrack.value.length / 2);
+    return {
+      "--mq-duration": `${count * num(s.value.MARQUEE_SPEED, 4)}s`,
+      "--mq-h": px(s.value.MARQUEE_HEIGHT) ?? "280px",
+      "--mq-h-mobile": px(s.value.MARQUEE_HEIGHT_MOBILE) ?? "180px",
+      ...marqueeWidths.value,
+      "--mq-align": MQ_ALIGN[String(s.value.MARQUEE_ALIGN || "CENTER").toUpperCase()] ?? "center",
+    };
+  });
+  const MQ_ALIGN = { TOP: "flex-start", CENTER: "center", BOTTOM: "flex-end" };
+  const marqueeMode = computed(() => {
+    const value = String(s.value.MARQUEE_SIZE_BY || "HEIGHT").toUpperCase();
+    return ["HEIGHT", "WIDTH", "SCREEN"].includes(value) ? value : "HEIGHT";
+  });
+  // SCREEN is WIDTH with a fluid value, so it shares the WIDTH class and CSS.
+  const marqueeSizeBy = computed(() => (marqueeMode.value === "HEIGHT" ? "height" : "width"));
+  const marqueeWidths = computed(() => {
+    const v = s.value;
+    if (marqueeMode.value === "SCREEN") {
+      const floor = px(v.MARQUEE_MIN_WIDTH) ?? "200px";
+      return {
+        "--mq-w": `max(${floor}, ${num(v.MARQUEE_SCREEN_WIDTH, 29)}vw)`,
+        "--mq-w-mobile": `max(${floor}, ${num(v.MARQUEE_SCREEN_WIDTH_MOBILE, 70)}vw)`,
+      };
+    }
+    return {
+      "--mq-w": px(v.MARQUEE_WIDTH) ?? "240px",
+      "--mq-w-mobile": px(v.MARQUEE_WIDTH_MOBILE) ?? "160px",
+    };
+  });
+  const marqueeReverse = computed(() => String(s.value.MARQUEE_DIRECTION || "LEFT").toUpperCase() === "RIGHT");
+  const marqueePause = computed(() => s.value.MARQUEE_PAUSE_ON_HOVER !== false);
+
+  // Keep in sync with the RATIO options in builder/schemas.py.
+  const RATIOS = {
+    SQUARE: "1 / 1",
+    PORTRAIT: "3 / 4",
+    PORTRAIT_4_5: "4 / 5",
+    TALL: "2 / 3",
+    LANDSCAPE: "4 / 3",
+    WIDE: "16 / 9",
+    NATURAL: "auto",
+  };
+  // Same shapes as [width, height], for the bento tile maths.
+  const RATIO_PARTS = { SQUARE: [1, 1], PORTRAIT: [3, 4], PORTRAIT_4_5: [4, 5], TALL: [2, 3], LANDSCAPE: [4, 3], WIDE: [16, 9] };
+  // [columns, rows] each tile size spans.
+  const TILE_SPANS = { TALL: [1, 2], WIDE: [2, 1], LARGE: [2, 2] };
+
+  const isNatural = computed(() => s.value.RATIO === "NATURAL");
+  const bento = computed(
+    () => layout.value === "GRID" && !isNatural.value && items.value.some((i) => i.size !== "NORMAL")
+  );
+
+  const subheading = computed(() => t(s.value.SUBHEADING));
+  const showCaptions = computed(() => !!s.value.SHOW_CAPTIONS);
+  const captionOverlay = computed(() => String(s.value.CAPTION_POSITION || "BELOW").toUpperCase() === "OVERLAY");
+
+  const vars = computed(() => {
+    const v = s.value;
+    const out = {
+      "--g-cols": num(v.COLUMNS, 3),
+      "--g-cols-tablet": num(v.COLUMNS_TABLET, Math.min(num(v.COLUMNS, 3), 3)),
+      "--g-cols-mobile": num(v.COLUMNS_MOBILE, 2),
+      "--g-gap": px(v.GAP) ?? "var(--osi-grid-gap, 16px)",
+      "--g-gap-mobile": px(v.GAP_MOBILE) ?? px(v.GAP) ?? "8px",
+      "--g-ratio": RATIOS[v.RATIO] ?? RATIOS.SQUARE,
+      "--g-ratio-mobile": RATIOS[v.RATIO_MOBILE] ?? RATIOS[v.RATIO] ?? RATIOS.SQUARE,
+      "--g-fit": String(v.IMAGE_FIT || "COVER").toLowerCase(),
+      "--g-radius": px(v.IMAGE_RADIUS) ?? "0px",
+    };
+
+    if (bento.value) {
+      // Per breakpoint: a column span that never exceeds the column count, and a
+      // frame ratio for each tile size so a spanned tile lines up with the grid
+      // (flex-grow absorbs the extra gap it covers).
+      const cols = { d: out["--g-cols"], t: out["--g-cols-tablet"], m: out["--g-cols-mobile"] };
+      const desk = RATIO_PARTS[v.RATIO] ?? RATIO_PARTS.SQUARE;
+      const mob = RATIO_PARTS[v.RATIO_MOBILE] ?? desk;
+      for (const bp of ["d", "t", "m"]) {
+        const maxSpan = Math.max(1, Math.min(2, cols[bp]));
+        const [w, h] = bp === "m" ? mob : desk;
+        out[`--g-span-${bp}`] = maxSpan;
+        for (const [size, [c, r]] of Object.entries(TILE_SPANS)) {
+          out[`--g-r-${size.toLowerCase()}-${bp}`] = `${w * Math.min(c, maxSpan)} / ${h * r}`;
+        }
+      }
+    }
+    return out;
+  });
+
+  const rootClasses = computed(() => [
+    `osi-gallery--${layout.value.toLowerCase()}`,
+    `osi-gallery--hover-${String(s.value.HOVER_EFFECT || "ZOOM").toLowerCase()}`,
+    `osi-gallery--mq-by-${marqueeSizeBy.value}`,
+    { "osi-gallery--natural": isNatural.value, "osi-gallery--bento": bento.value },
+  ]);
+
+  /* --------------------------------------------------------------- carousel */
+
+  const perView = computed(() => num(s.value.SLIDES_PER_VIEW, 4));
+  const overflows = computed(() => items.value.length > perView.value);
+  const loop = computed(() => !!s.value.CAROUSEL_LOOP && overflows.value);
+
+  const { slides, onSwiper, onSlideChange, goPrev, goNext, isBeginning, isEnd } = useCarousel({
+    items: () => items.value,
+    loop,
+    minLoopSlides: () => perView.value * 3,
+  });
+
+  const breakpoints = computed(() => ({
+    0: {
+      slidesPerView: num(s.value.SLIDES_PER_VIEW_MOBILE, 1.3),
+      spaceBetween: num(s.value.GAP_MOBILE, Math.min(num(s.value.GAP, 16), 12)),
+    },
+    640: { slidesPerView: num(s.value.SLIDES_PER_VIEW_TABLET, 2.5), spaceBetween: num(s.value.GAP, 16) },
+    1024: { slidesPerView: perView.value, spaceBetween: num(s.value.GAP, 16) },
+  }));
+
+  const autoplay = computed(() =>
+    s.value.CAROUSEL_AUTOPLAY && overflows.value
+      ? { delay: num(s.value.CAROUSEL_SPEED, 5) * 1000, disableOnInteraction: false, pauseOnMouseEnter: true }
+      : false
+  );
+  const showArrows = computed(() => s.value.SHOW_ARROWS !== false && overflows.value);
+  const showDots = computed(() => !!s.value.SHOW_DOTS && overflows.value);
+
+  /* --------------------------------------------------------------- lightbox */
+
+  // A linked image goes to its link; only unlinked ones open the lightbox, so a
+  // merchant's destination is never swallowed by a zoom overlay.
+  const lightboxEnabled = computed(() => s.value.ENABLE_LIGHTBOX !== false);
+  const realItems = computed(() => items.value.filter((i) => i.src));
+  const openIndex = ref(null);
+  const isOpen = computed(() => openIndex.value !== null);
+
+  useBodyScrollLock(isOpen);
+
+  function tagFor(item) {
+    if (item.url) return NuxtLinkComponent;
+    return lightboxEnabled.value && item.src ? "button" : "div";
+  }
+  function open(item) {
+    if (!lightboxEnabled.value || item.url || !item.src) return;
+    const key = item.baseKey ?? item.key;
+    const i = realItems.value.findIndex((x) => x.key === key);
+    openIndex.value = i >= 0 ? i : null;
+  }
+  function close() {
+    openIndex.value = null;
+  }
+  function step(delta) {
+    if (openIndex.value === null) return;
+    const count = realItems.value.length;
+    openIndex.value = (openIndex.value + delta + count) % count;
+  }
+  function onKeydown(event) {
+    if (!isOpen.value) return;
+    if (event.key === "Escape") close();
+    if (event.key === "ArrowRight") step(1);
+    if (event.key === "ArrowLeft") step(-1);
+  }
+  onMounted(() => window.addEventListener("keydown", onKeydown));
+  onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+
+  const current = computed(() => (openIndex.value === null ? null : realItems.value[openIndex.value]));
+
+  return { s, t, shellStyle, innerStyle, align, customClass, heading, mediaUrl, placeholders, NuxtLinkComponent, has, num, px, TILE_SIZES, items, layout, marqueeTrack, marqueeVars, MQ_ALIGN, marqueeMode, marqueeSizeBy, marqueeWidths, marqueeReverse, marqueePause, RATIOS, RATIO_PARTS, TILE_SPANS, isNatural, bento, subheading, showCaptions, captionOverlay, vars, rootClasses, perView, overflows, loop, slides, onSwiper, onSlideChange, goPrev, goNext, isBeginning, isEnd, breakpoints, autoplay, showArrows, showDots, lightboxEnabled, realItems, openIndex, isOpen, tagFor, open, close, step, onKeydown, current, Autoplay, Pagination };
+}

package/app/logic/sections/HeaderSection.js

@@ -0,0 +1,24 @@
+
+export default function useLogic({ props }) {
+  // The Logo / Menu blocks' keys, so SiteHeader can tag those parts for the
+  // editor (hover, click to select). Their settings reach SiteHeader through
+  // the theme (useStorefront).
+  const blockKey = (type) => (props.section.blocks ?? []).find((b) => b.type === type)?.key ?? null;
+  provide(
+    "osiHeaderBlocks",
+    computed(() => ({
+      logo: blockKey("HEADER_LOGO"),
+      menu: blockKey("HEADER_MENU"),
+      // Per-menu mega menus (HEADER_MEGA): { key, settings } for HeaderNav.
+      megas: (props.section.blocks ?? [])
+        .filter((b) => b.type === "HEADER_MEGA" && !b.disabled)
+        .map((b) => ({ key: b.key, settings: b.settings ?? {} })),
+    }))
+  );
+
+  // Checkout ("minimal" chrome) keeps the logo but drops the menu.
+  const route = useRoute();
+  const showNav = computed(() => (route.meta.chrome ?? "full") === "full");
+
+  return { blockKey, route, showNav };
+}

package/app/logic/sections/HeroSection.js

@@ -0,0 +1,24 @@
+
+export default function useLogic({ props }) {
+  const ALIGN_TO_POSITION = { LEFT: "CENTER_LEFT", CENTER: "CENTER", RIGHT: "CENTER_RIGHT" };
+
+  const asBanner = computed(() => {
+    const s = props.section.settings ?? {};
+    const align = String(s.HEADING_ALIGNMENT || "CENTER").toUpperCase();
+    return {
+      ...props.section,
+      settings: {
+        ...s,
+        LAYOUT: "OVERLAY",
+        HEADING_TAG: "H1",
+        FULL_BLEED: s.FULL_BLEED ?? true,
+        // AUTO: sized by the image shape (MEDIA_RATIO) instead of a screen share.
+        HEIGHT: s.HEIGHT === "AUTO" ? undefined : s.HEIGHT ?? (s.MEDIA_HEIGHT ? undefined : "LARGE"),
+        OVERLAY_POSITION: s.OVERLAY_POSITION || ALIGN_TO_POSITION[align] || "CENTER",
+        TEXT_ALIGNMENT: s.TEXT_ALIGNMENT || align,
+      },
+    };
+  });
+
+  return { ALIGN_TO_POSITION, asBanner };
+}

package/app/logic/sections/LogoListSection.js

@@ -0,0 +1,6 @@
+
+export default function useLogic() {
+  const ROOT_DEFAULTS = { DIRECTION: "VERTICAL", ALIGNMENT: "CENTER", POSITION: "TOP", GAP: 24 };
+
+  return { ROOT_DEFAULTS };
+}