@osimart/create-storefront 1.0.10 → 1.0.12

package/app/composables/useMenu.js

@@ -63,7 +63,11 @@ export function useMenu() {
    */
   function normalizeItems(items = [], parentId = "m") {
     return items.map((item, index) => {
-      const url = itemUrl(item);
+      // An External URL left empty links nowhere: "#", which every menu draws
+      // as a toggle for its sub-items (or a plain label), never a link.
+      // itemUrl() alone would fall through to "/".
+      const noLink = item.link_type === "URL" && !String(item.url ?? "").trim();
+      const url = noLink ? "#" : itemUrl(item);
       const id = item.id ?? `${parentId}.${index}`;
       return {
         id,

package/app/logic/components/SiteFooter.js

@@ -336,6 +336,27 @@ export default function useLogic({ props }) {
     ...(bottomThreeZone.value || bottomStacked.value ? {} : { justifyContent: bottomAlignment.value }),
   }));
 
+  /**
+   * Utilities drawn from the block tree (FooterUtilitiesSection's barTree):
+   * whether a part has anything to show. A Group shows while any part inside
+   * it does, so separators and empty groups never dangle.
+   */
+  function partShown(node) {
+    if (!node) return false;
+    switch (node.type) {
+      case "GROUP":
+        return (node.children ?? []).some(partShown);
+      case "UTILITY_COPYRIGHT":
+        return true;
+      case "UTILITY_POLICIES":
+        return policyLinks.value.length > 0;
+      case "UTILITY_SOCIAL":
+        return (unref(socials)?.length ?? 0) > 0;
+      default:
+        return false;
+    }
+  }
+
   const showPoweredBy = computed(() => settings.value.FOOTER_SHOW_POWERED_BY !== false);
   const poweredByText = computed(() => t(settings.value.FOOTER_POWERED_BY_TEXT));
   // Plain text between the copyright and the link — not part of the link.
@@ -472,5 +493,5 @@ export default function useLogic({ props }) {
   const headingTextStyle = computed(() => textStyleVars("FOOTER_HEADING", "UPPERCASE"));
   const linkTextStyle = computed(() => textStyleVars("FOOTER_LINK", "NONE"));
 
-  return { isBar, utilityBlocks, settings, brand, pick, barScheme, scheme, appearance, store, storeLogo, mediaUrl, useMenuByHandle, t, menu1, menu2, menu3, columnWidthMode, columnFlexBasis, columns, logoSrc, logoPosition, logoAlignment, logoWidthVars, showBrandDescription, DESCRIPTION_ALIGNMENTS, brandDescriptionStyle, footerText, copyright, socials, socialsEnabled, socialPosition, paymentIcons, languages, countries, currentLanguage, currentCountry, showSocial, socialAlignment, showNewsletter, newsletterOnStart, newsletterStacked, newsletterAlignment, showConsent, newsletterSubmitted, handleNewsletterSubmit, newsletterSuccessMessage, showPaymentIcons, showLanguageSelector, showCountrySelector, containerStyle, footerStyle, columnsAlignment, columnsVerticalAlignment, columnTextAlignment, JUSTIFY, ALIGN, TEXT, bottomAlignment, showBottomBarDivider, bottomThreeZone, bottomStacked, px, barVars, policyClasses, policyStyle, copyrightStyle, orderStyle, barStyle, showPoweredBy, poweredByText, poweredByPrefix, copyrightGap, poweredByUrl, POLICY_SLOTS, policyLinks, socialsInBar, socialsInColumns, socialsUnderNewsletter, hasFooterContent, mobileAccordion, openColumns, toggleColumn, isColumnOpen, FONT_WEIGHTS, FONT_FAMILIES, TEXT_TRANSFORMS, textStyleVars, headingTextStyle, linkTextStyle };
-}
+  return { isBar, utilityBlocks, settings, brand, pick, barScheme, scheme, appearance, store, storeLogo, mediaUrl, useMenuByHandle, t, menu1, menu2, menu3, columnWidthMode, columnFlexBasis, columns, logoSrc, logoPosition, logoAlignment, logoWidthVars, showBrandDescription, DESCRIPTION_ALIGNMENTS, brandDescriptionStyle, footerText, copyright, socials, socialsEnabled, socialPosition, paymentIcons, languages, countries, currentLanguage, currentCountry, showSocial, socialAlignment, showNewsletter, newsletterOnStart, newsletterStacked, newsletterAlignment, showConsent, newsletterSubmitted, handleNewsletterSubmit, newsletterSuccessMessage, showPaymentIcons, showLanguageSelector, showCountrySelector, containerStyle, footerStyle, columnsAlignment, columnsVerticalAlignment, columnTextAlignment, JUSTIFY, ALIGN, TEXT, bottomAlignment, showBottomBarDivider, bottomThreeZone, bottomStacked, px, barVars, policyClasses, policyStyle, copyrightStyle, orderStyle, barStyle, showPoweredBy, poweredByText, poweredByPrefix, copyrightGap, poweredByUrl, POLICY_SLOTS, policyLinks, socialsInBar, socialsInColumns, socialsUnderNewsletter, hasFooterContent, partShown, mobileAccordion, openColumns, toggleColumn, isColumnOpen, FONT_WEIGHTS, FONT_FAMILIES, TEXT_TRANSFORMS, textStyleVars, headingTextStyle, linkTextStyle };
+}

package/app/logic/sections/GallerySection.js

@@ -1,9 +1,67 @@
 import { NuxtLink } from "#components";
 import { Autoplay, Pagination } from "swiper/modules";
 
+/**
+ * GALLERY, Shopify-style:
+ *
+ *   section            the frame — width, padding, colours, CONTENT_GAP
+ *   header blocks      ordinary blocks (a Group of Text / Button…), drawn by
+ *                      ContentNode wherever they sit
+ *   Images block       GALLERY_CONTENT: the layout (grid / masonry /
+ *                      carousel / marquee + every image setting) and, inside
+ *                      it, the Image (MEDIA) blocks. Where it sits among the
+ *                      blocks is where the images go; hiding it hides them.
+ *
+ * An older section (no Images block: heading and layout on the section,
+ * images at the top level) renders exactly as before.
+ */
 export default function useLogic({ props }) {
-  const { s, t, shellStyle, innerStyle, align, customClass, heading } = useSectionShell(() => props.section);
+  const { s: sectionSettings, t, shellStyle, innerStyle, align, customClass, heading: legacyHeadingText } =
+    useSectionShell(() => props.section);
   const { mediaUrl } = useMediaUrl();
+
+  const blocks = computed(() => props.section.blocks ?? []);
+  const contentBlock = computed(() => blocks.value.find((b) => b.type === "GALLERY_CONTENT") ?? null);
+  const legacy = computed(() => !contentBlock.value);
+
+  /** The gallery's own settings: the Images block's, or (older) the section's. */
+  const s = computed(() => (legacy.value ? sectionSettings.value : contentBlock.value.settings ?? {}));
+
+  /** The image blocks, in order. */
+  const mediaBlocks = computed(() => {
+    if (legacy.value) return blocks.value.filter((b) => b.type === "MEDIA" && !b.parent_key);
+    const key = contentBlock.value.key;
+    return blocks.value.filter((b) => b.type === "MEDIA" && b.parent_key === key);
+  });
+
+  // The header and anything else around the images: ordinary blocks. The
+  // Images block stays a plain node (raw) — this section draws it.
+  const { tree } = useContentTree(() => props.section, {
+    raw: ["GALLERY_CONTENT"],
+    rootDefaults: { DIRECTION: "VERTICAL", GAP: 24 },
+    index: () => props.index,
+  });
+
+  /** The page, in block order; the images go where the Images block is. */
+  const parts = computed(() => {
+    if (legacy.value) return [{ kind: "gallery", key: "gallery" }];
+    return tree.value.children.map((node) =>
+      node.type === "GALLERY_CONTENT"
+        ? { kind: "gallery", key: node.key }
+        : { kind: "block", key: node.key, node }
+    );
+  });
+
+  /** data-osi-block for the images area (the editor outlines / selects it). */
+  const contentKey = computed(() => contentBlock.value?.key || undefined);
+
+  const stackGap = computed(() => {
+    const n = Number(sectionSettings.value.CONTENT_GAP);
+    return `${Number.isFinite(n) && sectionSettings.value.CONTENT_GAP !== "" ? n : 24}px`;
+  });
+
+  // Older sections: their HEADING / SUBHEADING, until they're converted.
+  const heading = computed(() => (legacy.value ? legacyHeadingText.value : ""));
   const placeholders = usePlaceholders();
   const NuxtLinkComponent = NuxtLink;
 
@@ -16,13 +74,15 @@ export default function useLogic({ props }) {
   const TILE_SIZES = ["NORMAL", "TALL", "WIDE", "LARGE"];
 
   const items = computed(() => {
-    const rows = (props.section.blocks ?? [])
+    const rows = mediaBlocks.value
       .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,
+          // The block's key, for the editor overlay (data-osi-block).
+          blockKey: block.key || undefined,
           src: mediaUrl(media),
           caption: t(bs.CAPTION) || "",
           url: bs.URL || bs.LINK_URL || null,
@@ -115,7 +175,7 @@ export default function useLogic({ props }) {
     () => layout.value === "GRID" && !isNatural.value && items.value.some((i) => i.size !== "NORMAL")
   );
 
-  const subheading = computed(() => t(s.value.SUBHEADING));
+  const subheading = computed(() => (legacy.value ? t(sectionSettings.value.SUBHEADING) : ""));
   const showCaptions = computed(() => !!s.value.SHOW_CAPTIONS);
   const captionOverlay = computed(() => String(s.value.CAPTION_POSITION || "BELOW").toUpperCase() === "OVERLAY");
 
@@ -228,5 +288,5 @@ export default function useLogic({ props }) {
 
   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 };
-}
+  return { legacy, contentBlock, contentKey, parts, stackGap, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimart/create-storefront",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Osimart storefront platform — logic, platform pages and CLI; extended by every theme repo",
   "type": "module",
   "main": "./nuxt.config.ts",