vlite3 1.4.4 → 1.4.5

package/components/AppShell/AppShellLayoutStorefront.vue.js

@@ -10,7 +10,7 @@ import { normalizeRoutePrefix as E } from "../CategoryMenu/utils.js";
 const L = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body text-foreground overflow-hidden" }, M = {
   key: 0,
   class: "shrink-0 w-full"
-}, O = { class: "w-full mx-auto max-w-7xl px-3 sm:px-4 md:px-6 lg:px-8" }, A = { class: "flex items-center gap-2 min-w-0" }, U = ["aria-label"], Y = { class: "w-full mx-auto max-w-7xl px-3 sm:px-4 md:px-6 lg:px-8" }, D = {
+}, O = { class: "w-full mx-auto max-w-7xl px-3 sm:px-4 md:px-6 lg:px-8" }, A = { class: "flex items-center gap-2 min-w-0" }, U = ["aria-label"], Y = { class: "w-full min-w-0 max-w-7xl mx-auto overflow-hidden px-3 sm:px-4 md:px-6 lg:px-8" }, D = {
   key: 0,
   class: "shrink-0 w-full"
 }, H = {
@@ -126,7 +126,7 @@ const L = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
         ]),
         e.$slots.categories ? (r(), t("div", {
           key: 0,
-          class: a(["w-full border-t border-border bg-background", [s(m).desktopContent, s(l).menuClass]])
+          class: a(["w-full min-w-0 overflow-hidden border-t border-border bg-background", [s(m).desktopContent, s(l).menuClass]])
         }, [
           d("div", Y, [
             o(e.$slots, "categories", { categoryRoutePrefix: h.value })

package/components/Cart/Cart.vue.js

@@ -0,0 +1,242 @@
+import { defineComponent as N, computed as s, ref as R, watch as f, openBlock as Q, createBlock as U, resolveDynamicComponent as F } from "vue";
+import { getComponentConfig as P } from "../../utils/configUtils.js";
+import { calculateCartTotals as z } from "./composables/useCartCalculation.js";
+import H from "./CartVariant1.vue.js";
+import L from "./CartVariant2.vue.js";
+import j from "./CartVariant3.vue.js";
+import E from "./CartVariant4.vue.js";
+const Y = /* @__PURE__ */ N({
+  __name: "Cart",
+  props: {
+    data: {},
+    variant: { default: "Variant1" },
+    actions: {},
+    features: {},
+    labels: {},
+    containerClass: {},
+    validateCoupon: {}
+  },
+  emits: ["update:quantity", "remove", "clear", "apply-coupon", "remove-coupon", "coupon-change", "continue", "continue-shopping", "update:coupon", "update:totals"],
+  setup(v, { emit: C }) {
+    const t = v, o = C, c = P("cart") || {}, g = s(() => {
+      switch (t.variant ?? c.variant ?? "Variant1") {
+        case "Variant2":
+          return L;
+        case "Variant3":
+          return j;
+        case "Variant4":
+          return E;
+        default:
+          return H;
+      }
+    }), h = s(() => {
+      const e = {
+        editableQuantity: !0,
+        removable: !0,
+        clearable: !0,
+        coupon: !0,
+        subtotal: !0,
+        discount: !0,
+        estimatedTax: !0,
+        shipping: !0,
+        totalSavings: !0,
+        continue: !0,
+        continueShopping: !0,
+        thumbnails: !0,
+        description: !0,
+        sku: !0,
+        itemVariant: !0,
+        emptyState: !0,
+        trustSignals: !0
+      }, n = c.features ?? {}, u = t.features ?? {}, i = t.data?.readonly ? { editableQuantity: !1, removable: !1, clearable: !1, coupon: !1 } : {};
+      return { ...e, ...n, ...u, ...i };
+    }), y = s(() => ({
+      showContinue: !0,
+      showContinueShopping: !0,
+      continueDisabled: !1,
+      continueShoppingDisabled: !1,
+      ...c.actions ?? {},
+      ...t.actions ?? {}
+    })), r = R(null), p = s(() => r.value ?? t.data.coupon), d = s(() => z({
+      items: t.data.items || [],
+      tax: t.data.tax,
+      shipping: t.data.shipping,
+      coupon: p.value,
+      currency: t.data.currency
+    }).totals);
+    s(() => t.data.totals === void 0);
+    const m = s(() => t.data.totals ? t.data.totals : d.value);
+    f(
+      m,
+      (e) => o("update:totals", e),
+      { deep: !0 }
+    );
+    const b = s(
+      () => !!t.validateCoupon || !!t.data.coupons?.length
+    );
+    f(
+      () => t.data.coupon,
+      (e) => {
+        e && r.value && e.code === r.value.code ? r.value = null : e || (r.value = null);
+      },
+      { deep: !0 }
+    );
+    async function k(e) {
+      const n = e.trim().toUpperCase(), u = d.value.subtotal, i = t.data.currency;
+      if (t.data.coupons?.length) {
+        const a = t.data.coupons.find(
+          (l) => l.code.trim().toUpperCase() === n
+        );
+        if (!a)
+          return {
+            ok: !1,
+            coupon: {
+              code: e,
+              state: "invalid",
+              message: `Coupon code "${e}" is not recognised.`
+            }
+          };
+        if (a.expiresAt) {
+          const l = a.expiresAt instanceof Date ? a.expiresAt : new Date(a.expiresAt);
+          if (!Number.isNaN(l.getTime()) && l.getTime() < Date.now())
+            return {
+              ok: !1,
+              coupon: {
+                code: e,
+                state: "expired",
+                message: `Coupon "${e}" expired on ${l.toLocaleDateString()}.`
+              }
+            };
+        }
+        return a.minSubtotal !== void 0 && u < a.minSubtotal ? {
+          ok: !1,
+          coupon: {
+            code: e,
+            state: "error",
+            message: `Add ${(a.minSubtotal - u).toFixed(2)} more to use "${e}".`
+          }
+        } : a.minItems !== void 0 && (t.data.items || []).reduce(
+          (B, I) => B + (I.quantity || 0),
+          0
+        ) < a.minItems ? {
+          ok: !1,
+          coupon: {
+            code: e,
+            state: "error",
+            message: `"${e}" requires at least ${a.minItems} items.`
+          }
+        } : a.currency && i && a.currency !== i ? {
+          ok: !1,
+          coupon: {
+            code: e,
+            state: "error",
+            message: `"${e}" is only valid for ${a.currency} orders.`
+          }
+        } : { ok: !0, definition: a };
+      }
+      if (t.validateCoupon)
+        try {
+          const a = await t.validateCoupon(e, {
+            subtotal: u,
+            currency: i,
+            items: t.data.items || []
+          });
+          return a ? "type" in a ? { ok: !0, definition: a } : {
+            ok: !1,
+            coupon: {
+              code: e,
+              state: a.state || "error",
+              message: a.message
+            }
+          } : {
+            ok: !1,
+            coupon: {
+              code: e,
+              state: "invalid",
+              message: `Coupon code "${e}" is not recognised.`
+            }
+          };
+        } catch (a) {
+          return {
+            ok: !1,
+            coupon: {
+              code: e,
+              state: "error",
+              message: a?.message || `Could not validate "${e}". Please try again.`
+            }
+          };
+        }
+      return {
+        ok: !1,
+        coupon: { code: e, state: "error", message: "No coupon validator configured." }
+      };
+    }
+    function x(e, n) {
+      return {
+        code: n.code,
+        description: n.description,
+        state: "applied",
+        definition: n,
+        expiresAt: n.expiresAt
+      };
+    }
+    function $(e, n) {
+      o("update:quantity", e, n);
+    }
+    function _(e) {
+      o("remove", e);
+    }
+    function S() {
+      o("clear");
+    }
+    async function A(e) {
+      if (o("apply-coupon", e), !b.value)
+        return;
+      const n = e.trim();
+      r.value = { code: n, state: "applying" }, t.validateCoupon || await new Promise((i) => setTimeout(i, 120));
+      const u = await k(n);
+      if (u.ok === !0) {
+        const i = x(n, u.definition);
+        r.value = null, o("update:coupon", i);
+      } else
+        r.value = null, o("update:coupon", u.coupon);
+    }
+    function w() {
+      r.value = null, o("update:coupon", null), o("remove-coupon");
+    }
+    function V(e) {
+      o("coupon-change", e);
+    }
+    function D() {
+      o("continue");
+    }
+    function T() {
+      o("continue-shopping");
+    }
+    const q = s(() => ({
+      ...t.data,
+      items: t.data.items || [],
+      totals: m.value,
+      coupon: p.value
+    }));
+    return (e, n) => (Q(), U(F(g.value), {
+      data: q.value,
+      variant: t.variant,
+      actions: y.value,
+      features: h.value,
+      labels: t.labels,
+      "container-class": t.containerClass,
+      "onUpdate:quantity": $,
+      onRemove: _,
+      onClear: S,
+      onApplyCoupon: A,
+      onRemoveCoupon: w,
+      onCouponChange: V,
+      onContinue: D,
+      onContinueShopping: T
+    }, null, 40, ["data", "variant", "actions", "features", "labels", "container-class"]));
+  }
+});
+export {
+  Y as default
+};

package/components/Cart/Cart.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Cart.vue.js";
+export {
+  f as default
+};

package/components/Cart/CartCouponInput.vue.js

@@ -0,0 +1,176 @@
+import { defineComponent as S, computed as t, ref as K, watch as D, openBlock as a, createElementBlock as i, normalizeClass as n, createElementVNode as p, createVNode as u, withKeys as L, createSlots as M, withCtx as T, createTextVNode as x, toDisplayString as f, createCommentVNode as r, unref as z, createBlock as R } from "vue";
+import C from "../Icon.vue.js";
+import U from "../Input.vue.js";
+/* empty css            */
+import B from "../Button.vue.js";
+import E from "../Price/Price.vue.js";
+const W = { class: "flex-1 min-w-0" }, q = { class: "flex items-center gap-2 min-w-0 flex-1" }, F = { class: "shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-success text-success-fg" }, G = { class: "min-w-0 flex-1" }, H = { class: "flex items-center gap-1.5 flex-wrap" }, _ = /* @__PURE__ */ S({
+  __name: "CartCouponInput",
+  props: {
+    coupon: {},
+    labels: {},
+    compact: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 }
+  },
+  emits: ["apply", "remove", "change"],
+  setup(e, { emit: N }) {
+    const c = e, g = N, m = t(() => c.labels || {}), o = K(c.coupon?.code ?? "");
+    D(
+      () => c.coupon?.code,
+      (l) => {
+        l !== void 0 && l !== o.value && (o.value = l);
+      }
+    );
+    const v = t(() => c.coupon?.state ?? "idle"), h = t(() => v.value === "applied"), A = t(() => v.value === "applying"), b = t(() => v.value === "invalid"), y = t(() => v.value === "expired"), k = t(() => v.value === "error"), I = t(() => A.value || h.value || c.readonly), w = t(() => b.value ? c.coupon?.message || "Invalid coupon code. Please try again." : y.value ? c.coupon?.message || "This coupon has expired and can no longer be applied." : k.value ? c.coupon?.message || "We could not apply this coupon. Please try again." : ""), s = t(() => b.value ? {
+      rightIcon: "lucide:circle-x",
+      borderClass: "border-danger focus-within:border-danger",
+      helperClass: "text-danger",
+      helperText: w.value
+    } : y.value ? {
+      rightIcon: "lucide:clock-alert",
+      borderClass: "border-warning focus-within:border-warning",
+      helperClass: "text-warning",
+      helperText: w.value
+    } : k.value ? {
+      rightIcon: "lucide:triangle-alert",
+      borderClass: "border-danger focus-within:border-danger",
+      helperClass: "text-danger",
+      helperText: w.value
+    } : null);
+    function $(l) {
+      o.value = String(l), g("change", o.value);
+    }
+    function V() {
+      const l = o.value.trim();
+      l && g("apply", l);
+    }
+    function j() {
+      o.value = "", g("remove");
+    }
+    return (l, d) => (a(), i("div", {
+      class: n(["v-cart-coupon w-full", e.compact ? "space-y-1.5" : "space-y-2"])
+    }, [
+      h.value ? r("", !0) : (a(), i("div", {
+        key: 0,
+        class: n(["flex items-center gap-2", e.compact ? "flex-col items-stretch gap-1.5" : "flex-col sm:flex-row sm:items-stretch"])
+      }, [
+        p("div", W, [
+          u(U, {
+            modelValue: o.value,
+            "onUpdate:modelValue": [
+              d[0] || (d[0] = (P) => o.value = P),
+              $
+            ],
+            placeholder: m.value.couponPlaceholder || "Enter coupon code",
+            icon: "lucide:ticket-percent",
+            "input-class": s.value ? s.value.borderClass : "",
+            disabled: I.value,
+            readonly: e.readonly,
+            "show-clear-button": !1,
+            size: "md",
+            rounded: "md",
+            "aria-label": m.value.coupon || "Coupon code",
+            onKeyup: L(V, ["enter"])
+          }, M({ _: 2 }, [
+            s.value ? {
+              name: "addon-right",
+              fn: T(() => [
+                u(C, {
+                  icon: s.value.rightIcon,
+                  class: n([
+                    "h-4 w-4",
+                    b.value || k.value ? "text-danger" : y.value ? "text-warning" : ""
+                  ])
+                }, null, 8, ["icon", "class"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "placeholder", "input-class", "disabled", "readonly", "aria-label"])
+        ]),
+        u(B, {
+          variant: "primary",
+          size: "md",
+          loading: A.value,
+          disabled: !o.value.trim() || I.value,
+          "aria-label": m.value.applyCoupon || "Apply coupon",
+          class: "shrink-0",
+          onClick: V
+        }, {
+          default: T(() => [
+            x(f(m.value.applyCoupon || "Apply"), 1)
+          ]),
+          _: 1
+        }, 8, ["loading", "disabled", "aria-label"])
+      ], 2)),
+      s.value && !e.compact ? (a(), i("p", {
+        key: 1,
+        class: n(["text-xs font-medium flex items-center gap-1.5", s.value.helperClass])
+      }, [
+        u(C, {
+          icon: s.value.rightIcon,
+          class: "w-3.5 h-3.5 shrink-0"
+        }, null, 8, ["icon"]),
+        x(" " + f(s.value.helperText), 1)
+      ], 2)) : r("", !0),
+      h.value && e.coupon ? (a(), i("div", {
+        key: 2,
+        class: n(["flex items-center justify-between gap-2 rounded-md border border-success/40 bg-success-light/40 p-2.5", e.compact ? "p-2" : "p-2.5"])
+      }, [
+        p("div", q, [
+          p("div", F, [
+            u(C, {
+              icon: "lucide:check",
+              class: "w-4 h-4"
+            })
+          ]),
+          p("div", G, [
+            p("div", H, [
+              p("p", {
+                class: n(["font-bold text-foreground uppercase tracking-wider", e.compact ? "text-[10px]" : "text-xs"])
+              }, f(e.coupon.code), 3),
+              e.coupon.definition?.type === "percentage" ? (a(), i("span", {
+                key: 0,
+                class: n(["inline-flex items-center px-1.5 py-0.5 rounded bg-success/30 text-success font-bold tabular-nums", e.compact ? "text-[9px]" : "text-[10px]"])
+              }, " −" + f(e.coupon.definition.value) + "% ", 3)) : e.coupon.discountAmount && e.coupon.discountAmount > 0 ? (a(), i("span", {
+                key: 1,
+                class: n(["inline-flex items-center px-1.5 py-0.5 rounded bg-success/10 text-success font-bold", e.compact ? "text-[9px]" : "text-[10px]"])
+              }, [
+                d[1] || (d[1] = x(" −", -1)),
+                u(z(E), {
+                  value: e.coupon.discountAmount,
+                  class: "text-success"
+                }, null, 8, ["value"])
+              ], 2)) : r("", !0),
+              e.coupon.definition?.type === "percentage" && e.coupon.discountAmount && e.coupon.discountAmount > 0 ? (a(), i("span", {
+                key: 2,
+                class: n(["inline-flex items-center px-1.5 py-0.5 rounded bg-success/5 text-success font-semibold", e.compact ? "text-[9px]" : "text-[10px]"])
+              }, [
+                u(z(E), {
+                  value: e.coupon.discountAmount,
+                  class: "text-success"
+                }, null, 8, ["value"]),
+                d[2] || (d[2] = x(" off ", -1))
+              ], 2)) : r("", !0)
+            ]),
+            e.coupon.description ? (a(), i("p", {
+              key: 0,
+              class: n(["text-muted-foreground leading-snug truncate", e.compact ? "text-[10px] mt-0.5" : "text-xs mt-0.5"])
+            }, f(e.coupon.description), 3)) : r("", !0)
+          ])
+        ]),
+        e.readonly ? r("", !0) : (a(), R(B, {
+          key: 0,
+          variant: "ghost",
+          size: e.compact ? "xs" : "sm",
+          icon: "lucide:x",
+          class: "shrink-0 inline-flex items-center justify-center rounded-md text-muted-foreground hover:bg-success/20 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "aria-label": m.value.removeCoupon || "Remove coupon",
+          onClick: j
+        }, null, 8, ["size", "aria-label"]))
+      ], 2)) : r("", !0)
+    ], 2));
+  }
+});
+export {
+  _ as default
+};

package/components/Cart/CartCouponInput.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CartCouponInput.vue.js";
+export {
+  f as default
+};

package/components/Cart/CartEmptyState.vue.js

@@ -0,0 +1,48 @@
+import { defineComponent as r, computed as p, openBlock as u, createElementBlock as d, normalizeClass as t, createElementVNode as o, createVNode as s, toDisplayString as n, withCtx as f, createTextVNode as x } from "vue";
+import y from "../Icon.vue.js";
+import g from "../Button.vue.js";
+const h = { class: "space-y-1" }, z = /* @__PURE__ */ r({
+  __name: "CartEmptyState",
+  props: {
+    labels: {},
+    compact: { type: Boolean, default: !1 }
+  },
+  emits: ["continue-shopping"],
+  setup(e, { emit: i }) {
+    const m = e, l = i, c = p(() => m.labels || {});
+    return (v, a) => (u(), d("div", {
+      class: t(["v-cart-empty flex flex-col items-center justify-center text-center", e.compact ? "py-10 px-4 gap-3" : "py-16 px-6 gap-4"])
+    }, [
+      o("div", {
+        class: t(["inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground", e.compact ? "w-14 h-14" : "w-20 h-20"])
+      }, [
+        s(y, {
+          icon: "lucide:shopping-bag",
+          class: t(e.compact ? "w-6 h-6" : "w-9 h-9")
+        }, null, 8, ["class"])
+      ], 2),
+      o("div", h, [
+        o("p", {
+          class: t(["font-bold text-foreground", e.compact ? "text-sm" : "text-lg"])
+        }, n(c.value.emptyTitle || "Your cart is empty"), 3),
+        o("p", {
+          class: t(["text-muted-foreground max-w-xs", e.compact ? "text-xs" : "text-sm"])
+        }, n(c.value.emptyDescription || "Add items to your cart to see them here."), 3)
+      ]),
+      s(g, {
+        variant: "primary",
+        size: e.compact ? "sm" : "md",
+        icon: "lucide:arrow-left",
+        onClick: a[0] || (a[0] = (w) => l("continue-shopping"))
+      }, {
+        default: f(() => [
+          x(n(c.value.emptyAction || "Continue shopping"), 1)
+        ]),
+        _: 1
+      }, 8, ["size"])
+    ], 2));
+  }
+});
+export {
+  z as default
+};

package/components/Cart/CartEmptyState.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CartEmptyState.vue.js";
+export {
+  f as default
+};