@osimart/create-storefront 1.0.24 → 1.0.26

package/app/components/checkout/CheckoutView.vue

@@ -272,6 +272,7 @@
                 <PhoneNumInput
                   v-model="formData.mobile_number"
                   variant="bare"
+                  :themed-popup="true"
                   :error="phoneHasError"
                   @update="onPhoneUpdate"
                 />
@@ -375,6 +376,7 @@
                   @update:model-value="selectCountry($event); clearFieldError('country')"
                   placeholder="Country"
                   searchable
+                  themed
                   local-search
                   full-width
                   field="country"
@@ -408,6 +410,7 @@
                   @update:model-value="selectZone($event); clearFieldError('zone')"
                   placeholder="Zone"
                   searchable
+                  themed
                   local-search
                   full-width
                   field="zone"

package/app/components/common/DropdownSelect.vue

@@ -97,16 +97,20 @@
      <div
   v-if="open && !disabled"
   ref="menuRef"
-  :style="[floatingStyles, menuWidthStyle, { zIndex: dropdownZIndex }]"
-  class="absolute font-poppins bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto dropdown-select-popup"
-  :class="dropdownWidth ? '' : 'w-max max-w-xs'"
+  :style="[floatingStyles, menuWidthStyle, themeVars, { zIndex: dropdownZIndex }]"
+  class="absolute font-poppins border rounded-md shadow-lg max-h-60 overflow-auto dropdown-select-popup"
+  :class="[
+    dropdownWidth ? '' : 'w-max max-w-xs',
+    themed ? 'dropdown-select-popup--themed' : 'bg-white border-gray-300',
+  ]"
   @scroll.passive="onScroll"
 >
         <!-- Search -->
         <div v-if="searchable" class="p-2">
           <input
             v-model="searchQuery"
-            class="bg-input w-full border px-2 py-1 rounded text-sm focus:outline-none"
+            class="w-full border px-2 py-1 rounded text-sm focus:outline-none"
+            :class="themed ? 'dd-search' : 'bg-input'"
             placeholder="Search..."
           />
         </div>
@@ -116,7 +120,8 @@
             v-for="opt in filteredOptions"
             :key="opt.value"
             :style="{ color: opt.color }"
-            class="px-4 py-2 flex justify-between items-center hover:bg-gray-100 cursor-pointer"
+            class="px-4 py-2 flex justify-between items-center cursor-pointer"
+            :class="themed ? 'dd-option' : 'hover:bg-gray-100'"
             @click="toggleOption(opt.value)"
           >
             <div class="flex items-center gap-2 min-w-0">
@@ -141,7 +146,7 @@
           </li>
         </ul>
 
-        <div v-else-if="!loading" class="px-4 py-2 text-fifthosiblue text-center text-sm">
+        <div v-else-if="!loading" class="px-4 py-2 text-fifthosiblue text-center text-sm" :class="{ 'dd-empty': themed }">
           No results
         </div>
 
@@ -193,6 +198,11 @@ const props = defineProps({
   // Explicit width for the dropdown menu (any valid CSS width, e.g. '320px',
   // '24rem', '100%'). Overrides the default w-max/max-w-xs/minWidth-match behavior.
   dropdownWidth: { type: String, default: null },
+  // Opt-in: the popup takes its colours from the storefront theme variables
+  // (the same ones the form fields use) instead of the hardcoded white/gray.
+  // The menu is teleported to <body>, so the variables are copied from the
+  // trigger's element when it opens. Off = every existing usage is unchanged.
+  themed: { type: Boolean, default: false },
 });
 const parentModalZIndex = inject("modalZIndex", null);
 const dropdownZIndex = computed(() =>
@@ -211,6 +221,38 @@ const rootRef = ref(null);
 const triggerBtnRef = ref(null);
 const triggerWidth = ref(0);
 
+// CSS variables the themed popup needs. The teleported menu sits outside the
+// element that defines them, so they're read from the trigger when it opens.
+// Names match osi-controls.css: the Inputs theme group (--osi-input-*) and the
+// colour scheme (--osi-bg / --osi-text / --osi-border).
+const THEME_VARS = [
+  "--osi-bg",
+  "--osi-text",
+  "--osi-border",
+  "--osi-input-bg",
+  "--osi-input-fg",
+  "--osi-input-border-color",
+  // The checkout's card colours (set inline on .osi-ck, so only present there).
+  "--ck-card-bg",
+  "--ck-card-text",
+  "--ck-card-border",
+];
+const themeVars = ref({});
+
+function readThemeVars() {
+  if (!props.themed || !rootRef.value) {
+    themeVars.value = {};
+    return;
+  }
+  const cs = getComputedStyle(rootRef.value);
+  const vars = {};
+  for (const name of THEME_VARS) {
+    const value = cs.getPropertyValue(name).trim();
+    if (value) vars[name] = value;
+  }
+  themeVars.value = vars;
+}
+
 const menuWidthStyle = computed(() => {
   if (props.dropdownWidth) return { width: props.dropdownWidth };
   if (!props.autoWidth) return { minWidth: triggerWidth.value + 'px' };
@@ -410,6 +452,7 @@ watch(open, (isOpen) => {
   if (isOpen) {
     eventBus.emit("dropdown:opened", instanceId);
     triggerWidth.value = rootRef.value ? rootRef.value.offsetWidth : 0;
+    readThemeVars();
     document.addEventListener("mousedown", handleDocumentClick, true);
     emit("open");
   } else {
@@ -429,4 +472,30 @@ onBeforeUnmount(() => {
 onUnmounted(() => {
   eventBus.off("dropdown:opened", onGlobalDropdownOpened);
 });
-</script>
+</script>
+
+<style scoped>
+/* Only applied when the `themed` prop is set. Every colour falls back to the
+   old hardcoded one, so a themed popup outside the storefront still looks
+   the same as before. */
+.dropdown-select-popup--themed {
+  background: var(--osi-input-bg, var(--ck-card-bg, var(--osi-bg, #fff)));
+  color: var(--osi-input-fg, var(--ck-card-text, var(--osi-text, inherit)));
+  border-color: var(--osi-input-border-color, var(--ck-card-border, var(--osi-border, #d1d5db)));
+}
+.dropdown-select-popup--themed .dd-option:hover {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+.dropdown-select-popup--themed .dd-search {
+  background: transparent;
+  color: inherit;
+  border-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+.dropdown-select-popup--themed .dd-search::placeholder {
+  color: color-mix(in srgb, currentColor 50%, transparent);
+}
+.dropdown-select-popup--themed .dd-empty {
+  color: inherit;
+  opacity: 0.6;
+}
+</style>

package/app/components/common/PhoneNumInput.vue

@@ -14,6 +14,7 @@
       :searchable="true"
       :local-search="true"
       smallText
+      themed
       @search="onSearch"
       @update:modelValue="onCountryChange"
       @open="isFocused = true"
@@ -64,7 +65,8 @@
     v-else
     class="w-full"
     :class="[
-      effectiveVariant === 'underline' ? 'font-thoren relative' : 'font-poppins'
+      effectiveVariant === 'underline' ? 'font-thoren relative' : 'font-poppins',
+      { 'phone-input-themed': themedPopup && effectiveVariant === 'bare' }
     ]"
   >
     <label
@@ -100,6 +102,7 @@
           @update:modelValue="onCountryChange"
           @open="isFocused = true"
           @close="isFocused = false"
+          :themed="themedPopup"
           :fullWidth="false"
           class="shrink min-w-[90px]"
           :class="ispopup ? 'lg:min-w-[70px]':'lg:min-w-[140px]'"
@@ -196,6 +199,9 @@ const props = defineProps({
   inputClass: { type: [String, Array, Object], default: 'osi-input' },
   inputId: { type: String, default: '' },
   disabled: { type: Boolean, default: false },
+  // Non-theme variants only: opt the country popup into the theme colours.
+  // (The `theme` variant is always themed.)
+  themedPopup: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:modelValue', 'update', 'clear-error'])
@@ -431,4 +437,20 @@ const getFlagUrl = (code) => {
   outline: none !important;
   box-shadow: none !important;
 }
-</style>
+
+/* Keep the compact bare layout while using the shared Inputs color tokens. */
+.phone-input-themed .dropdown-trigger-btn,
+.phone-input-themed .text-input {
+  color: var(--osi-input-fg, inherit);
+}
+.phone-input-themed .text-input {
+  background-color: var(--osi-input-bg, transparent);
+}
+.phone-input-themed .text-input::placeholder {
+  color: var(--osi-input-placeholder, currentColor);
+  opacity: 1;
+}
+.phone-input-themed .border-r {
+  border-color: var(--osi-input-border-color, #e5e7eb);
+}
+</style>

package/app/composables/useProductDetail.js

@@ -563,16 +563,39 @@ export function createProductDetail({ product, settings = {}, loading = false }
   const originalPriceRange = computed(() => pricing.value.original);
   /** The sale boxes under the price (tiers of 2+ items), each { id, text, reached, applied }. */
   const discountBadges = computed(() => pricing.value.badges ?? []);
+  /**
+   * What the customization adds to every unit: per-unit fees plus the price of
+   * each add-on picked. The prices shown on the page include it; `pricing`
+   * itself (sales, "Save %", hasPrice) stays on the product's own price.
+   */
+  const extraPerUnit = computed(() =>
+    round2((Number(customization.deltaPerUnit.value) || 0) + (Number(customization.addonsPerUnit.value) || 0))
+  );
+
+  /** A price range with the extra added. A bound with no price stays unpriced (never "$5"). */
+  function withExtra(range) {
+    const extra = extraPerUnit.value;
+    if (!range || !(extra > 0)) return range;
+    const add = (n) => (Number(n) > 0 ? round2(Number(n) + extra) : n);
+    return { min: add(range.min), max: add(range.max) };
+  }
+
   /**
    * The line total for the quantity picked — { quantity, before, after, saving,
    * text: { before, after, saving } } — or null (1 item, or no single price).
+   * Includes the customization extra for every item; the saving is unchanged.
    */
   const lineTotal = computed(() => {
     const t = pricing.value.total;
     if (!t) return null;
+    const extra = round2(extraPerUnit.value * t.quantity);
+    const before = round2(t.before + extra);
+    const after = round2(t.after + extra);
     return {
       ...t,
-      text: { before: formatMoney(t.before), after: formatMoney(t.after), saving: formatMoney(t.saving) },
+      before,
+      after,
+      text: { before: formatMoney(before), after: formatMoney(after), saving: formatMoney(t.saving) },
     };
   });
   /** The same, as one line (older callers). */
@@ -592,7 +615,7 @@ export function createProductDetail({ product, settings = {}, loading = false }
     return Math.round(((was - now) / was) * 100);
   });
 
-  const priceText = computed(() => formatRange(priceRange.value));
+  const priceText = computed(() => formatRange(withExtra(priceRange.value)));
 
   /**
    * Whether the selection has a real price. A product (or variant) with no
@@ -604,9 +627,9 @@ export function createProductDetail({ product, settings = {}, loading = false }
   });
   const comparePriceText = computed(() =>
     pricing.value.was
-      ? formatRange(pricing.value.was)
+      ? formatRange(withExtra(pricing.value.was))
       : isOnSale.value
-        ? formatRange(originalPriceRange.value)
+        ? formatRange(withExtra(originalPriceRange.value))
         : ""
   );
 
@@ -954,6 +977,7 @@ export function createProductDetail({ product, settings = {}, loading = false }
 
     // price
     pricing,
+    extraPerUnit,
     priceRange,
     originalPriceRange,
     discountMessage,
@@ -1015,4 +1039,4 @@ export function provideProductDetail(context) {
  */
 export function useProductDetail() {
   return inject(PRODUCT_DETAIL_KEY, null);
-}
+}

package/app/logic/components/SiteHeader.js

@@ -146,6 +146,8 @@ export default function useLogic() {
     if (s.HEADER_ICON_BORDER) style["--osi-header-icon-border"] = s.HEADER_ICON_BORDER;
     if (s.HEADER_CART_BADGE_BG) style["--osi-header-badge-bg"] = s.HEADER_CART_BADGE_BG;
     if (s.HEADER_CART_BADGE_TEXT) style["--osi-header-badge-text"] = s.HEADER_CART_BADGE_TEXT;
+    if (s.HEADER_BORDER_COLOR) style["--osi-header-border"] = s.HEADER_BORDER_COLOR;
+    if (s.HEADER_BORDER_WIDTH) style["--osi-header-border-w"] = `${s.HEADER_BORDER_WIDTH}px`;
     style["--osi-header-pad-y"] = `${s.HEADER_PADDING_Y}px`;
     // Side padding lives on the header itself, not on the inner box — see the
     // note on .osi-header-inner below. 16 is COMMON_STYLE_SETTINGS' PADDING_X

package/package.json

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