@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/components/common/DropdownSelect.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="relative flex justify-center" ref="rootRef"
+  :class="fullWidth ? 'w-full' : 'w-fit'"
+  :data-field="field"
+  >
+    <!-- Trigger -->
+    <slot name="trigger" :toggle="toggleDropdown" :disabled="disabled" :open="open">
+    <button
+      type="button"
+      ref="triggerBtnRef"
+      class="border border-gray-300 rounded-md min-w-[170px] shadow-sm text-left focus:outline-none focus-visible:outline-none [-webkit-tap-highlight-color:transparent] flex items-center justify-between text-input"
+  :class="[
+    popupDropdown ? 'p-3' : 'px-4 py-1',
+    disabled ? 'bg-gray-100 cursor-not-allowed' : '',
+    error ? 'border-red-500' : 'border-gray-300',
+    autoWidth ? 'w-fit max-w-full' : 'w-full',
+    notRequired ? 'text-gray-400 border !border-gray-200' : ''
+  ]"
+      :disabled="disabled"
+      :aria-disabled="disabled ? 'true' : 'false'"
+      @click="!disabled && (open = !open)"
+    >
+      <div class="flex items-center min-h-[24px] text-sm" :class="autoWidth ? 'flex-nowrap whitespace-nowrap text-fifthosiblue gap-1' : 'flex-wrap gap-1'">
+        <template v-if="disabled && disabledMessage">
+          <span class="text-fifthosiblue">{{ disabledMessage }}</span>
+        </template>
+        <template v-else-if="!multi && !selectedSingleLabel">
+          <span class='text-fifthosiblue'>{{ placeholder }}</span>
+        </template>
+        <template v-else-if="multi && (!modelValue || modelValue.length === 0)">
+          <span class="text-fifthosiblue">{{ placeholder }}</span>
+        </template>
+
+        <!-- Multi selected tags -->
+        <template v-if="multi">
+          <span
+            v-for="opt in selectedTags"
+            :key="opt.value"
+            class="bg-osiblue text-white rounded px-2 py-0.5 flex items-center gap-1 text-xs"
+          >
+            <img
+              v-if="opt.flag || opt.image"
+              :src="opt.flag || opt.image"
+              alt=""
+              class="w-5 h-4 object-cover shrink-0 rounded-sm"
+            />
+            <div class="flex flex-col">
+              <span>{{ opt.label }}</span>
+              <button
+                v-if="showPlacement"
+                type="button"
+                @click.stop="$emit('placementClick', opt.value)"
+                class="text-[10px] text-blue-200 dark:text-blue-500 hover:text-white underline text-left"
+              >
+                Position: {{ placements[opt.value] || 1 }} (click to set)
+              </button>
+            </div>
+            <button type="button" @click.stop="removeOption(opt.value)" class="ml-1">
+              &times;
+            </button>
+          </span>
+        </template>
+
+        <!-- Single selection -->
+        <template v-else-if="selectedSingleLabel">
+          <img
+            v-if="selectedSingleOption?.flag || selectedSingleOption?.image"
+            :src="selectedSingleOption?.flag || selectedSingleOption?.image"
+            alt=""
+            class="w-5 h-4 object-cover shrink-0 rounded-sm mr-1"
+          />
+          <span class="whitespace-nowrap">{{ selectedSingleLabel }}</span>
+        </template>
+      </div>
+
+      <svg
+        class="w-4 h-4 shrink-0"
+        :class="[autoWidth ? 'ml-2 text-fifthosiblue':'text-osiblue']"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5.70711 16.1359C5.31659 16.5264 5.31659 17.1596 5.70711 17.5501L10.5993 22.4375C11.3805 23.2179 12.6463 23.2176 13.4271 22.4369L18.3174 17.5465C18.708 17.156 18.708 16.5228 18.3174 16.1323C17.9269 15.7418 17.2937 15.7418 16.9032 16.1323L12.7176 20.3179C12.3271 20.7085 11.6939 20.7085 11.3034 20.3179L7.12132 16.1359C6.7308 15.7454 6.09763 15.7454 5.70711 16.1359Z"
+          fill="currentColor"
+        ></path>
+        <path
+          d="M18.3174 7.88675C18.708 7.49623 18.708 6.86307 18.3174 6.47254L13.4252 1.58509C12.644 0.804698 11.3783 0.805008 10.5975 1.58579L5.70711 6.47615C5.31658 6.86667 5.31658 7.49984 5.70711 7.89036C6.09763 8.28089 6.7308 8.28089 7.12132 7.89036L11.307 3.70472C11.6975 3.31419 12.3307 3.31419 12.7212 3.70472L16.9032 7.88675C17.2937 8.27728 17.9269 8.27728 18.3174 7.88675Z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </button>
+    </slot>
+
+    <!-- Dropdown -->
+    <Teleport defer to="body">
+     <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'"
+  @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"
+            placeholder="Search..."
+          />
+        </div>
+
+        <ul v-if="filteredOptions.length > 0">
+          <li
+            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"
+            @click="toggleOption(opt.value)"
+          >
+            <div class="flex items-center gap-2 min-w-0">
+              <img
+                v-if="opt.image || opt.flag"
+                :src="opt.image || opt.flag"
+                alt=""
+                class="w-5 h-4 object-cover shrink-0 rounded-sm"
+              />
+              <span class="truncate block" :class="smallText ? 'text-[10px]' : 'text-sm'">{{ opt.label }}</span>
+            </div>
+            <svg
+              v-if="multi ? (modelValue || []).includes(opt.value) : modelValue === opt.value"
+              class="w-5 h-5 text-osiblue shrink-0"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+            </svg>
+          </li>
+        </ul>
+
+        <div v-else-if="!loading" class="px-4 py-2 text-fifthosiblue text-center text-sm">
+          No results
+        </div>
+
+        <div v-if="loading" class="flex justify-center py-2">
+          <Loader size="20px" />
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+
+<script setup>
+import { ref, watch, computed, onMounted, onBeforeUnmount, onUnmounted,inject } from "vue";
+import { useFloating, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
+import Loader from "./Loader.vue";
+import { eventBus } from "../../utils/eventBus";
+
+
+const props = defineProps({
+  modelValue: { type: [Array, String, Number, null], default: null },
+  options: { type: Array, default: () => [] },
+  multi: { type: Boolean, default: false },
+  searchable: { type: Boolean, default: false },
+  placeholder: { type: String, default: "Select..." },
+  loading: { type: Boolean, default: false },
+  hasMore: { type: Boolean, default: false },
+  searchDebounce: { type: Number, default: 400 },
+  allowDeselect: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  disabledMessage: { type: String, default: "" },
+  popupDropdown: { type: Boolean, default: false },
+  showPlacement: { type: Boolean, default: false },
+  placements: { type: Object, default: () => ({}) },
+  error: { type: Boolean, default: false },
+  field: { type: String, default: null },
+  smallText: { type: Boolean, default: false },
+  fullWidth: { type: Boolean, default: true },
+  type: { type: String, default: null },
+  localSearch: { type: Boolean, default: false },
+  // When true, indicates this field is optional. The trigger's text and
+  // icon are visually de-emphasized (dimmed) while no value is selected,
+  // instead of looking like a normal "active/required" input.
+  notRequired: { type: Boolean, default: false },
+  // When true, the trigger button shrinks to fit its content (the selected
+  // option / placeholder) instead of stretching to fullWidth, while the
+  // dropdown menu keeps its own independent (wider) sizing. Animates smoothly.
+  autoWidth: { type: Boolean, default: false },
+  // 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 },
+});
+const parentModalZIndex = inject("modalZIndex", null);
+const dropdownZIndex = computed(() =>
+  parentModalZIndex ? parentModalZIndex + 1 : 50
+);
+const emit = defineEmits(["update:modelValue", "loadMore", "search", "placementClick", "open", "close"]);
+
+const open = ref(false);
+function toggleDropdown() {
+  if (!props.disabled) open.value = !open.value;
+}
+
+const searchQuery = ref("");
+const menuRef = ref(null);
+const rootRef = ref(null);
+const triggerBtnRef = ref(null);
+const triggerWidth = ref(0);
+
+const menuWidthStyle = computed(() => {
+  if (props.dropdownWidth) return { width: props.dropdownWidth };
+  if (!props.autoWidth) return { minWidth: triggerWidth.value + 'px' };
+  return {};
+});
+let searchTimeoutId = null;
+
+const { floatingStyles } = useFloating(rootRef, menuRef, {
+  placement: 'bottom-start',
+  middleware: [offset(4), flip(), shift({ padding: 8 })],
+  whileElementsMounted: autoUpdate,
+});
+
+// Cache labels for any option value we encounter so selected tags persist
+// even when the current options list (e.g., search results) doesn't include them.
+const labelCache = ref(new Map());
+
+function getOptionsArray() {
+  return Array.isArray(props.options) ? props.options : [];
+}
+
+function syncLabelCacheFromOptions() {
+  const opts = getOptionsArray();
+  for (const o of opts) {
+    if (o && o.value !== undefined && o.label !== undefined) {
+      labelCache.value.set(o.value, o.label);
+    }
+  }
+}
+
+watch(
+  () => props.options,
+  () => {
+    syncLabelCacheFromOptions();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (props.multi) {
+      const arr = Array.isArray(val) ? val : [];
+      for (const v of arr) {
+        if (!labelCache.value.has(v)) {
+          const found = getOptionsArray().find((o) => o.value === v);
+          labelCache.value.set(v, found ? found.label : String(v));
+        }
+      }
+    } else if (val !== null && val !== undefined) {
+      if (!labelCache.value.has(val)) {
+        const found = getOptionsArray().find((o) => o.value === val);
+        labelCache.value.set(val, found ? found.label : String(val));
+      }
+    }
+  },
+  { immediate: true }
+);
+
+// For single selection: get the full option object to access flag/image
+const selectedSingleOption = computed(() => {
+  if (props.multi || props.modelValue === null || props.modelValue === undefined) return null;
+  return getOptionsArray().find((o) => o.value === props.modelValue) ?? null;
+});
+
+const selectedTags = computed(() => {
+  if (!props.multi) return [];
+  const values = Array.isArray(props.modelValue) ? props.modelValue : [];
+  return values.map((v) => {
+    const opt = getOptionsArray().find((o) => o.value === v);
+    return {
+      value: v,
+      label: labelCache.value.get(v) || String(v),
+      flag: opt?.flag || opt?.image || null,
+    };
+  });
+});
+
+const selectedSingleLabel = computed(() => {
+  if (props.multi) return "";
+  if (props.modelValue === null || props.modelValue === undefined) return "";
+  return labelCache.value.get(props.modelValue) || String(props.modelValue);
+});
+
+// Whether the field currently has a meaningful selection (used by notRequired styling)
+const hasValue = computed(() => {
+  if (props.multi) {
+    return Array.isArray(props.modelValue) && props.modelValue.length > 0;
+  }
+  return props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "";
+});
+
+const filteredOptions = computed(() => {
+  const opts = getOptionsArray();
+  if (!props.localSearch || !searchQuery.value || !searchQuery.value.trim()) {
+    return opts;
+  }
+  const q = searchQuery.value.trim().toLowerCase();
+  return opts.filter(opt => {
+    const label = (opt.label || '').toString().toLowerCase();
+    const value = (opt.value || '').toString().toLowerCase();
+    return label.includes(q) || value.includes(q);
+  });
+});
+
+function toggleOption(value) {
+  const found = getOptionsArray().find((o) => o.value === value);
+  if (found) {
+    labelCache.value.set(value, found.label);
+  }
+
+  if (props.multi) {
+    const newVal = [...(props.modelValue || [])];
+    const idx = newVal.indexOf(value);
+    if (idx > -1) newVal.splice(idx, 1);
+    else newVal.push(value);
+    emit("update:modelValue", newVal);
+  } else {
+    if (props.allowDeselect && props.modelValue === value) {
+      emit("update:modelValue", null);
+    } else {
+      emit("update:modelValue", value);
+      open.value = false;
+    }
+  }
+}
+
+function removeOption(value) {
+  if (!props.multi) return;
+  const newVal = [...(props.modelValue || [])].filter((v) => v !== value);
+  emit("update:modelValue", newVal);
+}
+
+const isFetchingMore = ref(false);
+
+function onScroll(e) {
+  const el = e.target;
+  if (
+    el.scrollTop + el.clientHeight >= el.scrollHeight - 5 &&
+    props.hasMore &&
+    !props.loading &&
+    !isFetchingMore.value
+  ) {
+    isFetchingMore.value = true;
+    emit("loadMore");
+  }
+}
+
+watch(() => props.loading, (val) => {
+  if (!val) {
+    isFetchingMore.value = false;
+  }
+});
+
+watch(searchQuery, (q) => {
+  if (!props.searchable) return;
+  if (searchTimeoutId) clearTimeout(searchTimeoutId);
+  searchTimeoutId = setTimeout(() => {
+    emit("search", q);
+  }, props.searchDebounce);
+});
+
+onUnmounted(() => {
+  if (searchTimeoutId) clearTimeout(searchTimeoutId);
+});
+
+// Close dropdown if it becomes disabled while open
+watch(
+  () => props.disabled,
+  (isDisabled) => {
+    if (isDisabled) open.value = false;
+  }
+);
+
+// --- Global coordination & outside-click closing ---
+const instanceId = Symbol("dropdown-instance");
+
+function onGlobalDropdownOpened(id) {
+  if (id !== instanceId) {
+    open.value = false;
+  }
+}
+
+function handleDocumentClick(e) {
+  const root = rootRef.value;
+  const menu = menuRef.value;
+  if (
+    (root && root.contains(e.target)) ||
+    (menu && menu.contains(e.target))
+  ) {
+    return;
+  }
+  open.value = false;
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    eventBus.emit("dropdown:opened", instanceId);
+    triggerWidth.value = rootRef.value ? rootRef.value.offsetWidth : 0;
+    document.addEventListener("mousedown", handleDocumentClick, true);
+    emit("open");
+  } else {
+    document.removeEventListener("mousedown", handleDocumentClick, true);
+    emit("close");
+  }
+});
+
+onMounted(() => {
+  eventBus.on("dropdown:opened", onGlobalDropdownOpened);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("mousedown", handleDocumentClick, true);
+});
+
+onUnmounted(() => {
+  eventBus.off("dropdown:opened", onGlobalDropdownOpened);
+});
+</script>

package/app/components/common/Loader.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex items-center justify-center">
+  <div
+  class="spinner border-solid border-osiblue border-t-white dark:border-white dark:border-t-osiblue rounded-full animate-spin"
+  :style="{
+    '--spinner-size': size,
+    '--spinner-border': border
+  }"
+></div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  size: {
+    type: String,
+    default: "2rem",
+  },
+  border: {
+    type: String,
+    default: "4px",
+  },
+});
+</script>
+
+<style scoped>
+.spinner {
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  border-width: var(--spinner-border);
+}
+</style>

package/app/components/common/OsiField.vue

@@ -0,0 +1,218 @@
+<template>
+  <div
+    class="osi-field"
+    :class="[
+      `osi-field--label-${resolvedLabelStyle.toLowerCase()}`,
+      `osi-field--input-${resolvedInputStyle.toLowerCase()}`,
+      {
+        'osi-field--error': !!error,
+        'osi-field--floated': floated || alwaysFloats,
+        'osi-field--area': as === 'textarea',
+        'osi-field--suffix': !!$slots.suffix,
+        'osi-field--disabled': disabled,
+      },
+      attrClass,
+    ]"
+    :style="[fieldVars, attrStyle]"
+    :data-field="field || undefined"
+  >
+    <div class="osi-field-control">
+      <!-- Custom control (dropdown trigger, phone input…). It receives the
+           classes and id it should use so it lines up with every other field. -->
+      <slot
+        name="control"
+        :id="controlId"
+        :input-class="inputClass"
+        :placeholder-text="placeholderText"
+        :invalid="!!error"
+      >
+        <textarea
+          v-if="as === 'textarea'"
+          :id="controlId"
+          :class="inputClass"
+          :rows="rows"
+          :value="modelValue ?? ''"
+          :placeholder="resolvedPlaceholder"
+          :disabled="disabled"
+          :required="required"
+          :aria-invalid="!!error"
+          :aria-describedby="error ? errorId : undefined"
+          v-bind="controlAttrs"
+          @input="onInput"
+        />
+
+        <select
+          v-else-if="as === 'select'"
+          :id="controlId"
+          :class="inputClass"
+          :value="modelValue ?? ''"
+          :disabled="disabled"
+          :required="required"
+          :aria-invalid="!!error"
+          :aria-describedby="error ? errorId : undefined"
+          v-bind="controlAttrs"
+          @change="onInput"
+        >
+          <option value="">{{ placeholderText || placeholder || "" }}</option>
+          <option
+            v-for="option in normalizedOptions"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+
+        <input
+          v-else
+          :id="controlId"
+          :class="inputClass"
+          :type="type"
+          :value="modelValue ?? ''"
+          :placeholder="resolvedPlaceholder"
+          :disabled="disabled"
+          :required="required"
+          :aria-invalid="!!error"
+          :aria-describedby="error ? errorId : undefined"
+          v-bind="controlAttrs"
+          @input="onInput"
+        />
+      </slot>
+
+      <label v-if="label" class="osi-field-label" :for="controlId">
+        {{ label }}<span
+          v-if="required && showRequiredMark"
+          class="osi-field-required"
+          aria-hidden="true"
+        >*</span>
+      </label>
+
+      <span v-if="$slots.suffix" class="osi-field-suffix">
+        <slot name="suffix" />
+      </span>
+    </div>
+
+    <p v-if="error && typeof error === 'string'" :id="errorId" class="osi-field-error">
+      {{ error }}
+    </p>
+    <p v-else-if="$slots.hint" class="osi-field-hint"><slot name="hint" /></p>
+  </div>
+</template>
+
+<script setup>
+import { INPUT_STYLES, LABEL_STYLES, pick } from "#osi/theme/controls";
+
+/**
+ * A labelled form field that follows the theme's Inputs group.
+ *
+ * Same behaviour as CONTACT_FORM's fields — FLOATING / ABOVE / PLACEHOLDER
+ * labels over OUTLINE / FILLED / UNDERLINE boxes — but reading the theme
+ * instead of one section's settings, so login, register, checkout, the
+ * account pages and the address modal all match whatever the merchant set.
+ *
+ * Individual overrides:
+ *   label-style / input-style  win over the theme's choice for this field
+ *   :vars="inputVars(s)"       --in-* overrides (useInputStyle), e.g. from a
+ *                              section's own INPUT_* settings
+ *
+ * Everything that isn't a prop (autocomplete, inputmode, maxlength, @blur,
+ * @keydown…) is forwarded to the input, except class/style which go on the
+ * wrapper.
+ *
+ *   <OsiField v-model="email" label="Email" type="email" :error="errors.email" />
+ *
+ *   <OsiField label="Country" :floated="!!country">
+ *     <template #control="{ id, inputClass }">
+ *       <button :id="id" :class="[inputClass, 'osi-select-trigger']">…</button>
+ *     </template>
+ *   </OsiField>
+ */
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: "" },
+  label: { type: String, default: "" },
+  type: { type: String, default: "text" },
+  as: { type: String, default: "input" }, // input | textarea | select
+  options: { type: Array, default: () => [] },
+  id: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  // String first: with Boolean first, Vue casts "" to true, and every field
+  // whose error was an empty string rendered red.
+  error: { type: [String, Boolean], default: false },
+  required: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  rows: { type: [Number, String], default: 4 },
+  /** Force the floated state — for custom controls that have a value. */
+  floated: { type: Boolean, default: false },
+  /** data-field, for scrollToFirstError(). */
+  field: { type: String, default: "" },
+  labelStyle: { type: String, default: "" },
+  inputStyle: { type: String, default: "" },
+  vars: { type: Object, default: () => ({}) },
+  inputClassExtra: { type: [String, Array, Object], default: "" },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const attrs = useAttrs();
+const { controls } = useThemeControls();
+
+const uid = useId();
+const controlId = computed(() => props.id || `osi-field-${uid}`);
+const errorId = computed(() => `${controlId.value}-error`);
+
+const attrClass = computed(() => attrs.class);
+const attrStyle = computed(() => attrs.style);
+const controlAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs;
+  return rest;
+});
+
+const resolvedLabelStyle = computed(
+  () => pick(props.labelStyle, LABEL_STYLES) ?? controls.value.labelStyle
+);
+const resolvedInputStyle = computed(
+  () => pick(props.inputStyle, INPUT_STYLES) ?? controls.value.inputStyle
+);
+const showRequiredMark = computed(() => controls.value.showRequiredMark);
+
+const inputClass = computed(() => [
+  "osi-input",
+  `osi-input--${resolvedInputStyle.value.toLowerCase()}`,
+  props.inputClassExtra,
+]);
+
+/** Selects, dates and custom controls never report :placeholder-shown. */
+const alwaysFloats = computed(
+  () => props.as === "select" || ["date", "time", "datetime-local", "month"].includes(props.type)
+);
+
+/**
+ * FLOATING needs :placeholder-shown to know the field is empty, so the
+ * placeholder must be a single space there. PLACEHOLDER mode shows the label
+ * as the placeholder, since the label itself is visually hidden.
+ */
+const placeholderText = computed(() =>
+  resolvedLabelStyle.value === "PLACEHOLDER" ? props.placeholder || props.label : ""
+);
+const resolvedPlaceholder = computed(() => {
+  if (resolvedLabelStyle.value === "FLOATING") return " ";
+  if (resolvedLabelStyle.value === "PLACEHOLDER") return placeholderText.value;
+  return props.placeholder;
+});
+
+const fieldVars = computed(() => props.vars ?? {});
+
+const normalizedOptions = computed(() =>
+  (props.options ?? []).map((option) =>
+    option && typeof option === "object"
+      ? { value: option.value, label: option.label ?? option.value }
+      : { value: option, label: option }
+  )
+);
+
+function onInput(event) {
+  emit("update:modelValue", event.target.value);
+}
+</script>