@osimart/create-storefront 0.0.0-stage → 1.0.1

package/app/logic/components/MobileMenu.js

@@ -0,0 +1,280 @@
+
+export default function useLogic() {
+  /**
+   * Sidebar / mobile navigation.
+   *
+   * Everything visual is merchant-controlled through the SIDEBAR theme group.
+   * The menu itself is HEADER_MENU — the desktop nav and the drawer render the
+   * same tree, deliberately, so they cannot disagree.
+   *
+   * Two structures, one setting:
+   *
+   *   ACCORDION  submenus expand in place (default; SIDEBAR_SUBMENU_* apply)
+   *   DRILLDOWN  each submenu slides in as a new panel
+   *
+   * Accessibility is not settings-driven and is not optional: the panel is a
+   * modal dialog, focus is trapped inside it while open, Escape closes it, and
+   * focus returns to the trigger. A merchant can restyle all of that; they
+   * cannot switch it off.
+   */
+  const { settings, scheme, style, overlayStyle, enabled, position, animation, submenuMode } =
+    useSidebarStyle();
+
+  const header = useThemeGroup("HEADER");
+  const brand = useThemeGroup("BRAND");
+  const { isMobileSidebarVisible, toggleMobileSidebar, toggleCartSidebar } = useSidebar();
+  const { useMenuByHandle } = useMenu();
+  const { isActive } = useNavActive();
+  const { store, storeLogo, dir } = useStorefront();
+  const { mediaUrl } = useMediaUrl();
+  const { isLoggedIn } = useAuth();
+  const { count } = useCart();
+  const t = useT();
+  const router = useRouter();
+
+  const menu = useMenuByHandle(computed(() => header.value.HEADER_MENU));
+
+  const logoSrc = computed(() => mediaUrl(brand.value.LOGO || storeLogo.value));
+  const socials = computed(() => store.value?.social_medias ?? []);
+  const footerText = computed(() => t(settings.value.SIDEBAR_FOOTER_TEXT));
+
+  const submenuAnimation = computed(() => settings.value.SIDEBAR_SUBMENU_ANIMATION || "SLIDE");
+
+  const transitionName = computed(() => {
+    if (animation.value === "NONE") return "osi-sb-none";
+    if (animation.value === "FADE") return "osi-sb-fade";
+    return position.value === "END" ? "osi-sb-slide-end" : "osi-sb-slide-start";
+  });
+
+  function close() {
+    toggleMobileSidebar(false);
+  }
+
+  // ---------------------------------------------------------------- accordion
+
+  const openIds = ref(new Set());
+
+  function toggle(id, siblings = []) {
+    const next = new Set(openIds.value);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      // "Close the others" is the inverse of "allow multiple", so one setting
+      // drives both and they can't contradict each other.
+      if (!settings.value.SIDEBAR_SUBMENU_MULTIPLE_OPEN) {
+        siblings.forEach((sibling) => next.delete(sibling));
+      }
+      next.add(id);
+    }
+    openIds.value = next;
+  }
+
+  provide("osi-sidebar-nav", {
+    isOpen: (id) => openIds.value.has(id),
+    toggle,
+    close,
+    isActive,
+    maxDepth: computed(() => Number(settings.value.SIDEBAR_MAX_DEPTH) || 3),
+    showArrows: computed(() => settings.value.SIDEBAR_SHOW_ARROWS !== false),
+    arrowStyle: computed(() => settings.value.SIDEBAR_ARROW_STYLE || "CHEVRON"),
+    submenuAnimation,
+  });
+
+  // --------------------------------------------------------------- drilldown
+
+  const stack = ref([]);
+  const current = computed(() => stack.value[stack.value.length - 1] ?? null);
+  const panelItems = computed(() => current.value?.children ?? menu.value.items);
+
+  /**
+   * Which way the panels travel.
+   *
+   * A single transition name can't express both directions — going deeper has to
+   * slide in from the end and going back from the start, or the drawer reads as
+   * if it's always moving forward and the user loses their place in the tree.
+   */
+  const direction = ref("forward");
+
+  const bodyEl = ref(null);
+
+  function movePanel(fn, way) {
+    direction.value = way;
+    fn();
+    // A deep panel scrolled halfway down leaves the next one scrolled to the
+    // same offset, which looks like content is missing from the top.
+    nextTick(() => {
+      if (bodyEl.value) bodyEl.value.scrollTop = 0;
+    });
+  }
+
+  function push(item) {
+    if (item.children?.length) {
+      movePanel(() => {
+        stack.value = [...stack.value, item];
+      }, "forward");
+    }
+  }
+
+  function pop() {
+    movePanel(() => {
+      stack.value = stack.value.slice(0, -1);
+    }, "back");
+  }
+
+  /**
+   * Vue's <Transition> only auto-generates classes off `name` (e.g.
+   * osi-panel-forward-leave-active); it doesn't apply the custom
+   * `osi-panel-leaving` class from the CSS below on its own. Without this
+   * hook the outgoing panel stays in normal document flow for the whole
+   * transition, so it stacks on top of the incoming panel instead of
+   * overlapping it — which is what reads as "items appear under the first
+   * page, then the new panel jumps into place" once the old one unmounts.
+   */
+  function onPanelLeave(el) {
+    el.classList.add("osi-panel-leaving");
+  }
+
+  /**
+   * Reuses SIDEBAR_SUBMENU_ANIMATION rather than adding a drilldown-only twin —
+   * "how a submenu appears" is one merchant decision whichever structure is in
+   * use. Note the schema currently hides that field behind
+   * `visible_if={'SIDEBAR_SUBMENU_MODE': ACCORDION}`, so on DRILLDOWN it falls
+   * to its default of SLIDE and can't be changed; widen the visible_if to
+   * [ACCORDION, DRILLDOWN] to expose it.
+   */
+  const panelTransition = computed(() => {
+    if (submenuAnimation.value === "NONE") return "osi-panel-none";
+    if (submenuAnimation.value === "FADE") return "osi-panel-fade";
+    return direction.value === "back" ? "osi-panel-back" : "osi-panel-forward";
+  });
+
+  // ------------------------------------------------------------ appearance
+
+  /**
+   * Links appearing (SIDEBAR_LINK_ANIMATION), Shopify's drawer: CASCADE — each
+   * link fades in and rises, one after another; FADE — together; NONE. Runs
+   * whenever a list mounts: the drawer opening, a panel coming in.
+   */
+  const linkAnimation = computed(() => String(settings.value.SIDEBAR_LINK_ANIMATION || "CASCADE").toLowerCase());
+  const animVars = computed(() => ({
+    "--sb-stagger": `${Number(settings.value.SIDEBAR_LINK_STAGGER) || 50}ms`,
+    // Wait for the drawer to be mostly open before the first link comes in.
+    "--sb-anim-base": `${Math.round((Number(settings.value.SIDEBAR_ANIMATION_DURATION) || 300) * 0.35)}ms`,
+  }));
+
+  /** A submenu panel's own colours (drilldown, SIDEBAR_PANEL_*). */
+  const panelStyle = computed(() => {
+    if (!stack.value.length) return null;
+    const s = settings.value;
+    const out = {};
+    if (s.SIDEBAR_PANEL_BACKGROUND) out.background = s.SIDEBAR_PANEL_BACKGROUND;
+    if (s.SIDEBAR_PANEL_TEXT_COLOR) {
+      out.color = s.SIDEBAR_PANEL_TEXT_COLOR;
+      out["--osi-sb-link"] = s.SIDEBAR_PANEL_TEXT_COLOR;
+      out["--osi-sb-sub-color"] = s.SIDEBAR_PANEL_TEXT_COLOR;
+    }
+    return out;
+  });
+
+  /**
+   * The panel's image row: the categories / collections it lists that have an
+   * image, in menu order. Only in submenu panels, and only when switched on.
+   */
+  const RATIOS = { SQUARE: "1 / 1", PORTRAIT: "3 / 4", LANDSCAPE: "4 / 3" };
+  const panelImages = computed(() => {
+    if (!stack.value.length || !settings.value.SIDEBAR_PANEL_IMAGES) return [];
+    return panelItems.value.filter((item) => item.image);
+  });
+  const imageVars = computed(() => {
+    const s = settings.value;
+    const n = (v, d) => (Number.isFinite(Number(v)) && v !== "" && v != null ? Number(v) : d);
+    return {
+      "--sb-img-w": `${n(s.SIDEBAR_PANEL_IMAGE_WIDTH, 130)}px`,
+      "--sb-img-ratio": RATIOS[s.SIDEBAR_PANEL_IMAGE_RATIO] ?? RATIOS.PORTRAIT,
+      "--sb-img-r": `${n(s.SIDEBAR_PANEL_IMAGE_RADIUS, 6)}px`,
+      "--sb-img-gap": `${n(s.SIDEBAR_PANEL_IMAGE_GAP, 10)}px`,
+    };
+  });
+
+  // Panels translate on the physical X axis, so the sign has to flip in Arabic
+  // or "deeper" animates backwards.
+  const panelDirection = computed(() => (dir.value === "rtl" ? -1 : 1));
+
+  // --------------------------------------------------------- focus & keyboard
+
+  const panel = ref(null);
+  let restoreFocusTo = null;
+
+  const FOCUSABLE =
+    'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+  function onKeydown(e) {
+    if (!isMobileSidebarVisible.value) return;
+
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+      return;
+    }
+
+    if (e.key !== "Tab" || !panel.value) return;
+
+    // Querying on every Tab rather than caching: the tree expands and collapses
+    // while the drawer is open, so a cached list traps focus on rows that are no
+    // longer visible. During a panel transition both the old and new panel are
+    // in the DOM, so the outgoing one is excluded explicitly.
+    const items = [...panel.value.querySelectorAll(FOCUSABLE)].filter(
+      (el) => el.offsetParent !== null && !el.closest(".osi-panel-leaving")
+    );
+    if (!items.length) return;
+
+    const first = items[0];
+    const last = items[items.length - 1];
+
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+
+  watch(isMobileSidebarVisible, async (open) => {
+    if (open) {
+      restoreFocusTo = document.activeElement;
+      await nextTick();
+      panel.value?.querySelector(FOCUSABLE)?.focus();
+      return;
+    }
+
+    // Returning focus to the burger matters for keyboard and screen reader
+    // users: without it focus falls back to <body> and the next Tab restarts
+    // from the top of the page.
+    restoreFocusTo?.focus?.();
+    restoreFocusTo = null;
+
+    // Reset only after the close transition, or the panel visibly snaps back to
+    // the root while it's still sliding out.
+    const delay = Number(settings.value.SIDEBAR_ANIMATION_DURATION) || 0;
+    setTimeout(() => {
+      stack.value = [];
+      openIds.value = new Set();
+      direction.value = "forward";
+    }, delay);
+  });
+
+  onMounted(() => document.addEventListener("keydown", onKeydown));
+  onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+
+  function goSearch() {
+    close();
+    router.push("/search");
+  }
+  function openCart() {
+    close();
+    toggleCartSidebar(true);
+  }
+
+  return { settings, scheme, style, overlayStyle, enabled, position, animation, submenuMode, header, brand, isMobileSidebarVisible, toggleMobileSidebar, toggleCartSidebar, useMenuByHandle, isActive, store, storeLogo, dir, mediaUrl, isLoggedIn, count, t, router, menu, logoSrc, socials, footerText, submenuAnimation, transitionName, close, openIds, toggle, stack, current, panelItems, direction, bodyEl, movePanel, push, pop, onPanelLeave, panelTransition, linkAnimation, animVars, panelStyle, RATIOS, panelImages, imageVars, panelDirection, panel, restoreFocusTo, FOCUSABLE, onKeydown, goSearch, openCart };
+}

package/app/logic/components/ProductBuyButtons.js

@@ -0,0 +1,66 @@
+import { useProductDetail } from "#osi/composables/useProductDetail";
+import { buttonClasses, buttonVars } from "#osi/composables/useButtonStyle";
+
+export default function useLogic({ props }) {
+  const detail = useProductDetail();
+  const t = useT();
+  const { addToWishlist, wishlistStatus } = useWishlist();
+
+  const s = computed(() => props.block.settings ?? {});
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+
+  // The button's height is fixed, so no vertical padding applies — neither the
+  // theme's nor this block's (BUTTON_PADDING_Y is dropped on purpose).
+  function heightFixed(vars, height) {
+    const { "--btn-pad-y": _drop, ...rest } = vars;
+    return { ...rest, "--btn-pad-y": "0px", height: height ?? "48px" };
+  }
+
+  const height = computed(() => px(s.value.BUTTON_HEIGHT) ?? "48px");
+
+  const addStyle = computed(() => heightFixed(buttonVars(s.value, "BUTTON"), height.value));
+  const addClasses = computed(() => buttonClasses(s.value, "BUTTON", ["osi-pdp-buy-button"]));
+
+  const buyNowStyle = computed(() =>
+    heightFixed(buttonVars(s.value, "BUY_NOW_BUTTON"), px(s.value.BUY_NOW_BUTTON_HEIGHT) ?? height.value)
+  );
+  const buyNowClasses = computed(() => {
+    const own = buttonClasses(s.value, "BUY_NOW_BUTTON", ["osi-btn--block", "osi-pdp-buy-now"]);
+    // No style chosen: the theme's secondary button.
+    return s.value.BUY_NOW_BUTTON_STYLE ? own : [...own, "osi-btn--secondary"];
+  });
+
+  const layout = computed(() => (s.value.BUY_LAYOUT === "STACKED" ? "stacked" : "row"));
+  const showQuantity = computed(() => !!s.value.BUY_SHOW_QUANTITY);
+  const showBuyNow = computed(() => !!s.value.BUY_SHOW_BUY_NOW);
+  const showWishlist = computed(() => !!s.value.BUY_SHOW_WISHLIST);
+  const showStock = computed(() => s.value.BUY_SHOW_STOCK_NOTICE !== false);
+
+  const label = computed(() => {
+    if (detail.isComingSoon.value) return t(s.value.BUY_COMING_SOON_LABEL) || "Coming soon";
+    if (detail.isOutOfStock.value) return t(s.value.BUY_SOLD_OUT_LABEL) || "Sold out";
+    if (detail.isAddingToCart.value) return t(s.value.BUY_ADDING_LABEL) || "Adding…";
+    return t(s.value.BUY_LABEL) || "Add to bag";
+  });
+
+  const wishlisted = computed(
+    () => wishlistStatus.value[detail.product.value?.id] ?? detail.product.value?.wishlisted ?? false
+  );
+
+  const stockNotice = computed(() => {
+    if (detail.isComingSoon.value || detail.isOutOfStock.value) return "";
+    if (detail.isLowStock.value) {
+      return (t(s.value.BUY_LOW_STOCK_LABEL) || "Only {n} left").replace("{n}", detail.remainingStock.value);
+    }
+    return t(s.value.BUY_IN_STOCK_LABEL) || "In stock, ready to ship";
+  });
+
+  const stockStyle = computed(() => ({
+    "--stock-dot": detail.isLowStock.value
+      ? s.value.BUY_LOW_STOCK_COLOR || "#d97706"
+      : s.value.BUY_STOCK_COLOR || "#16a34a",
+  }));
+
+  return { detail, t, addToWishlist, wishlistStatus, s, has, px, heightFixed, height, addStyle, addClasses, buyNowStyle, buyNowClasses, layout, showQuantity, showBuyNow, showWishlist, showStock, label, wishlisted, stockNotice, stockStyle };
+}

package/app/logic/components/ProductCard.js

@@ -0,0 +1,160 @@
+import { cardOffers, variantPrices, tierText, rangeString } from "#osi/utils/productOffers";
+
+export default function useLogic({ props, emit }) {
+  const { addToWishlist, wishlistStatus } = useWishlist();
+  const analytics = useAnalytics();
+  const { handleAddToCart } = useAddToCart();
+  const { toggleCartSidebar } = useSidebar();
+  const { store } = useStorefront();
+
+  // Store-wide currency symbol, falling back to "$" only if the store hasn't
+  // set one.
+   const currency = computed(
+        () => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$"
+      );
+
+  // Matches the storefront's existing trailing-zero-strip convention
+  // (e.g. "50.00" -> "$50", "49.99" -> "$49.99"), using the store's currency
+  // instead of a hardcoded "$".
+  //
+  // price_range/discounted_price_range come from the API as either a single
+  // number, a numeric string, or a "min - max" range string (e.g.
+  // "42.79 - 47.0") when a product's variants aren't all the same price — so
+  // this has to split on "-" rather than Number()'ing the whole thing, or
+  // every ranged product would parse as NaN and look priceless.
+  function parsePriceParts(value) {
+    if (value === null || value === undefined || value === "") return [];
+    if (typeof value === "number") return Number.isFinite(value) ? [value] : [];
+    return String(value)
+      .split("-")
+      .map((part) => parseFloat(part))
+      .filter((n) => Number.isFinite(n));
+  }
+
+  // No real price set (missing, empty, or every part of the range is 0) —
+  // never show "0" and never let the shopper add it to cart.
+  function hasPriceValue(value) {
+    return parsePriceParts(value).some((n) => n > 0);
+  }
+
+  function formatPrice(value) {
+    const parts = parsePriceParts(value);
+    if (!parts.length || !parts.some((n) => n > 0)) return "";
+    return parts.map((n) => `${currency.value}${n}`).join(" - ");
+  }
+
+  const card = useProductCardStyle(() => props.cardSettings);
+
+  const variants = useProductVariants(() => props.product);
+  const quickShop = useQuickShop({
+    product: () => props.product,
+    variants,
+    onAdded: (variant) => {
+      emit("added-to-cart", { product: props.product, variant });
+      toggleCartSidebar(true);
+    },
+  });
+
+  const media = useProductCardMedia({
+    product: () => props.product,
+    quickShopOpen: () => quickShop.isOpen.value,
+    selectedVariant: () => variants.selectedVariant.value,
+    selectedOptions: () => variants.selectedOptions.value,
+    selectedColor: () => variants.selectedColor.value,
+  });
+
+  const swatches = useDragScroll();
+
+  // See useProductUrl for the route shape and the backend change it needs.
+  const { productUrl } = useProductUrl();
+  const url = computed(() => productUrl(props.product));
+
+  const wishlisted = computed(
+    () => wishlistStatus.value[props.product.id] ?? props.product.wishlisted ?? false
+  );
+
+  // Stock is asked with the quick-shop selection while the panel is open and
+  // without it when closed — one sold-out size shouldn't grey out the whole card.
+  const outOfStock = computed(() =>
+    variants.stockFor(quickShop.isOpen.value ? variants.selectedVariant.value : null)
+  );
+
+  // Shopify's rules (utils/productOffers): the price for one item — only a
+  // 1-item sale lowers it; quantity tiers (2+ items) come off the total and show
+  // as boxes. Older rows without the variants' sales keep the API's ranges.
+  const offers = computed(() => cardOffers(props.product));
+  const price = computed(() => {
+    const variant = quickShop.isOpen.value ? variants.selectedVariant.value : null;
+    if (variant) {
+      return variantPrices(variant);
+    }
+    if (offers.value) {
+      return {
+        now: rangeString(offers.value.now),
+        was: offers.value.was ? rangeString(offers.value.was) : null,
+        sale: offers.value.sale,
+      };
+    }
+    const base = props.product.price_range;
+    const now = props.product.discounted_price_range;
+    const was = now && base && now !== base ? base : null;
+    return { now: now ?? base, was, sale: !!was };
+  });
+  const tierBoxes = computed(() =>
+    (offers.value?.tiers ?? []).map((tier) => ({ id: tier.id, text: tierText(tier, formatPrice, { short: true }) }))
+  );
+
+  // No real price set on the current selection — never show "0" and never
+  // let the shopper add it to cart.
+  const hasPrice = computed(() => hasPriceValue(price.value.now));
+
+  const showHoverImage = computed(
+    () =>
+      card.showSecondImage.value &&
+      !quickShop.isOpen.value &&
+      media.isHovering.value &&
+      !!media.hoverImage.value
+  );
+
+  const quickShopAvailable = computed(
+    () =>
+      card.showQuickShop.value &&
+      variants.hasVariants.value &&
+      !variants.isComingSoon.value
+  );
+
+  // The CTA appears in one of two places, so its label and state are computed
+  // once rather than written twice in the template.
+  const ctaVisible = computed(
+    () => card.showCta.value && !quickShop.isOpen.value && !variants.isComingSoon.value
+  );
+  const ctaLabel = computed(() => {
+    if (outOfStock.value) return "Sold out";
+    // No price: the normal label, disabled (see :disabled below).
+    return quickShopAvailable.value ? "Quick shop" : "Add to cart";
+  });
+
+  /** No variants to choose: straight to cart. Otherwise open the panel. */
+  async function primaryAction() {
+    if (!hasPrice.value) return;
+    if (quickShopAvailable.value) {
+      quickShop.open(window.innerWidth < 1024 ? "MOBILE" : "DESKTOP");
+      return;
+    }
+    try {
+      await handleAddToCart(props.product);
+      toggleCartSidebar(true);
+    } catch {
+      // handleAddToCart is responsible for surfacing its own error (toast/etc);
+      // just don't open the drawer on a failed add.
+    }
+  }
+
+  function pickSwatch(value) {
+    // A swatch click that was really the end of a drag shouldn't select.
+    if (swatches.wasDragged()) return;
+    variants.selectVariant(value);
+  }
+
+  return { addToWishlist, wishlistStatus, analytics, handleAddToCart, toggleCartSidebar, store, currency, parsePriceParts, hasPriceValue, formatPrice, card, variants, quickShop, media, swatches, productUrl, url, wishlisted, outOfStock, offers, price, tierBoxes, hasPrice, showHoverImage, quickShopAvailable, ctaVisible, ctaLabel, primaryAction, pickSwatch };
+}

package/app/logic/components/ProductFilters.js

@@ -0,0 +1,37 @@
+/**
+ * Sort + variant filters as accordion groups.
+ *
+ * Stateless: the parent owns the selection. In the sidebar every click is
+ * applied straight to the URL; in the drawer the parent holds a draft and
+ * applies it on "Apply". Same component either way.
+ */
+
+
+export default function useLogic({ props, emit }) {
+  const selectedSet = computed(() => new Set(props.selected.map(String)));
+
+  const initialOpen = () => {
+    const open = new Set(["sort"]);
+    for (const f of props.filters) {
+      if (props.expanded || f.values.some((v) => selectedSet.value.has(v.id))) open.add(f.id);
+    }
+    return open;
+  };
+  const open = ref(initialOpen());
+  watch(
+    () => props.filters.length,
+    () => {
+      open.value = new Set([...open.value, ...initialOpen()]);
+    }
+  );
+
+  function toggleGroup(key) {
+    const next = new Set(open.value);
+    next.has(key) ? next.delete(key) : next.add(key);
+    open.value = next;
+  }
+
+  const countIn = (f) => f.values.filter((v) => selectedSet.value.has(v.id)).length;
+
+  return { selectedSet, initialOpen, open, toggleGroup, countIn };
+}

package/app/logic/components/ProductGallery.js

@@ -0,0 +1,19 @@
+import { Pagination } from "swiper/modules";
+import { useProductDetail } from "#osi/composables/useProductDetail";
+import { useProductGallery } from "#osi/composables/useProductGallery";
+
+export default function useLogic({ props }) {
+  const detail = useProductDetail();
+
+  const gallery = useProductGallery({
+    images: () => detail?.activeImages.value ?? [],
+    settings: () => props.settings,
+  });
+
+  const images = gallery.images;
+  const zoomable = computed(() => gallery.zoom.value !== "NONE");
+
+  const modules = [Pagination];
+
+  return { detail, gallery, images, zoomable, modules };
+}