flowrix 1.0.1-beta.147 → 1.0.1-beta.148

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "flowrix",
   "configKey": "flowrix",
-  "version": "1.0.1-beta.147",
+  "version": "1.0.1-beta.148",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -24,6 +24,7 @@ const module$1 = defineNuxtModule({
       FLOWRIX_CDN: env.FCDN || runtimeConfig.FLOWRIX_CDN || runtimeConfig.public.FLOWRIX_CDN || ""
     });
     const resolver = createResolver(import.meta.url);
+    nuxt.options.css.push("bootstrap/dist/css/bootstrap.min.css");
     await installModule("@pinia/nuxt");
     nuxt.hook("pages:extend", (pages) => {
       pages.push({
@@ -35,6 +36,10 @@ const module$1 = defineNuxtModule({
     addPlugin({
       src: resolver.resolve("./runtime/plugins/router")
     });
+    addPlugin({
+      src: resolver.resolve("./runtime/plugins/bootstrap.client"),
+      mode: "client"
+    });
     addServerHandler({
       middleware: true,
       handler: resolver.resolve("./runtime/utils/htmlCache")

package/dist/runtime/components/SampleProductCard.d.vue.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    swatch: ArrayConstructor;
+    otherColor: BooleanConstructor;
+    from: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    swatch: ArrayConstructor;
+    otherColor: BooleanConstructor;
+    from: StringConstructor;
+}>> & Readonly<{}>, {
+    otherColor: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/SampleProductCard.vue

@@ -0,0 +1,362 @@
+<script setup>
+const isModalOpen = ref(false);
+const openCustomizeModal = () => isModalOpen.value = true;
+const closeModal = () => isModalOpen.value = false;
+const Wishlist = defineAsyncComponent(() => import("./WishList/modal.vue"));
+const cartStore = useCartStore();
+const openWishlistModal = ref(false);
+const wishlistModalRef = ref(null);
+const activeFlowBiteId = useState("activeFlowBiteId", () => null);
+const props = defineProps({
+  swatch: Array,
+  otherColor: Boolean,
+  from: String
+});
+const isInCart = ref(false);
+watchEffect(() => {
+  if (cartStore.cart.items) {
+    isInCart.value = Object.values(cartStore.cart.items).some(
+      (item) => item.slug === props.swatch.slug
+    );
+  } else {
+    isInCart.value = false;
+  }
+});
+const addToCart = async (product, qty) => {
+  await cartStore.addToCart(product, qty, product);
+};
+const removeProduct = async (productId) => {
+  if (cartStore.cart.items) {
+    const productToRemove = Object.values(cartStore.cart.items).find(
+      (item) => item.slug === productId
+    );
+    if (productToRemove) {
+      await cartStore.removeFromCart(productToRemove.rowId, productToRemove);
+    }
+  }
+};
+const toggleCart = async () => {
+  if (isInCart.value) {
+    await removeProduct(props.swatch.slug);
+  } else {
+    await addToCart(props.swatch, 1);
+  }
+};
+const toggleFlowBite = () => {
+  if (activeFlowBiteId.value === props.swatch.slug) {
+    activeFlowBiteId.value = null;
+  } else {
+    activeFlowBiteId.value = props.swatch.slug;
+  }
+};
+const isFlowBiteOpen = computed(() => {
+  return activeFlowBiteId.value === props.swatch.slug;
+});
+const handleClickOutside = (event) => {
+  const target = event.target;
+  if (!target.closest(".flow-bite") && !target.closest(".flow-bite-box")) {
+    activeFlowBiteId.value = null;
+  }
+};
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside);
+});
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+});
+const swatchimagesSrcset = ((swatchImage) => {
+  var swatchImage = swatchImage;
+  let swatchImage150 = swatchImage?.replace(/.webp/gi, "150.webp");
+  let swatchImage320 = swatchImage?.replace(/.webp/gi, "320.webp");
+  let swatchImage640 = swatchImage?.replace(/.webp/gi, "640.webp");
+  let swatchImage1024 = swatchImage?.replace(/.webp/gi, "1024.webp");
+  return swatchImage640;
+});
+</script>
+
+<template>
+  <div class="card shadow-sm position-relative">
+    <div class="flow-bite" @click="toggleFlowBite">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="flow-bite-icon"
+        :class="{ 'rotated': isFlowBiteOpen }">
+        <path fill="none" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+          d="M9 9L4 4m0 0v4m0-4h4m7 5l5-5m0 0v4m0-4h-4M9 15l-5 5m0 0v-4m0 4h4m7-5l5 5m0 0v-4m0 4h-4" />
+      </svg>
+      <Teleport to="body">
+        <transition name="flow-bite-fade" appear>
+          <div v-if="isFlowBiteOpen" class="flow-bite-box">
+            <div class="position-absolute end-0 bg-white p-1 rounded-1 me-2 mt-2 cursor-pointer"
+              @click.stop="activeFlowBiteId = null">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+                <path fill="#333333"
+                  d="M16.95 8.464a1 1 0 0 0-1.414-1.414L12 10.586L8.464 7.05A1 1 0 1 0 7.05 8.464L10.586 12L7.05 15.536a1 1 0 1 0 1.414 1.414L12 13.414l3.536 3.536a1 1 0 1 0 1.414-1.414L13.414 12z" />
+              </svg>
+            </div>
+            <img :src="swatchimagesSrcset(swatch.image)" :alt="swatch.name" class="swatch-image mb-2">
+            <div class="swatch-name mb-2 fw-semibold ms-2">{{ swatch.name }}</div>
+          </div>
+        </transition>
+      </Teleport>
+    </div>
+
+    <img :src="swatchimagesSrcset(swatch.image)" :alt="swatch.name" class="card-img-top">
+
+    <!-- <NuxtLink :to="{ name: 'sample-slug', params: { slug: swatch.slug } }" class="explore-more">
+      <button class="btn btn-secondary rounded-5 text-white fw-semibold px-3 py-2">Explore More</button>
+    </NuxtLink> -->
+
+    <div class="eye-icon" @click="openCustomizeModal">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+        <path fill="none" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+          d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" />
+        <path fill="none" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+          d="M2 12c1.6-4.097 5.336-7 10-7s8.4 2.903 10 7c-1.6 4.097-5.336 7-10 7s-8.4-2.903-10-7" />
+      </svg>
+    </div>
+
+    <div class="cart-icon" @click="toggleCart">
+      <svg v-if="isInCart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+        <path fill="#333333"
+          d="m15.85 13l-2.025-2h1.725l2.75-5H8.825l-2-2H19.95q.575 0 .888.488t.012 1.062l-3.55 6.4q-.275.5-.7.775t-.75.275M7 22q-.825 0-1.412-.587T5 20t.588-1.412T7 18t1.413.588T9 20t-.587 1.413T7 22m13.5 1.3L14.15 17H7.6q-1.1 0-1.675-.937T5.85 14.1l1.05-2.15L5.1 7.9L.7 3.5l1.4-1.4l19.8 19.8zM12.15 15l-2-2H8.6l-1 2zm3.4-4h-1.725zM17 22q-.825 0-1.412-.587T15 20t.588-1.412T17 18t1.413.588T19 20t-.587 1.413T17 22" />
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+        <g fill="none" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+          <path d="M6 6h12l-2 8H8m8 4H8L4 4H2" />
+          <circle cx="18" cy="20" r="2" />
+          <circle cx="8" cy="20" r="2" />
+        </g>
+      </svg>
+    </div>
+
+    <div class="wishlist-icon" @click="openWishlistModal = !openWishlistModal">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+        <path
+          :fill="wishlistModalRef?.wishlists?.some((w) => wishlistModalRef?.isInWishlist(swatch.id, w.id)) ? '#ff4d4f' : '#000'"
+          d="m12.67 20.74l-.67.61l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 1.43-.5 2.76-1.38 4.11c-.62-.3-1.31-.5-2.03-.57C19.5 10.8 20 9.65 20 8.5c0-2-1.5-3.5-3.5-3.5c-1.54 0-3.04 1-3.57 2.36h-1.86C10.54 6 9.04 5 7.5 5C5.5 5 4 6.5 4 8.5c0 2.89 3.14 5.74 7.89 10.05l.11.1l.04-.04c.08.76.3 1.48.63 2.13M17 14v3h-3v2h3v3h2v-3h3v-2h-3v-3z" />
+      </svg>
+    </div>
+
+    <Wishlist v-if="openWishlistModal" @closewish="openWishlistModal = false" ref="wishlistModalRef"
+      :product="swatch" />
+
+    <ShopFreeSample v-if="isModalOpen" @close-modal="closeModal" :sampleData="swatch" />
+    <div class="card-body text-center" v-if="from == 'sampleSingle'">
+      <h5 class="card-title mb-0 text-custom">
+        <NuxtLink :to="swatch.slug">{{ swatch.name }}</NuxtLink>
+      </h5>
+
+    </div>
+    <div class="card-body text-center" v-else>
+      <h5 class="card-title mb-0 text-custom">
+        <NuxtLink :to="swatch.url">{{ swatch.name }}</NuxtLink>
+      </h5>
+      <div><a href="#" class="text-primary fw-semibold" v-if="otherColor">Order a Sample</a></div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+.card {
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+  transition: box-shadow 0.2s;
+  position: relative;
+  border: none;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 200px;
+}
+.card:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+.card:hover .explore-more {
+  display: block;
+  position: absolute;
+  bottom: 30%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.card-body {
+  background-color: var(--bs-cream);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.card-body .card-title a {
+  text-decoration: none;
+  font-weight: 600;
+  color: #333;
+}
+
+.card-img-top {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  width: 100%;
+  height: 280px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.eye-icon {
+  background-color: var(--bs-white);
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  cursor: pointer;
+  top: 57px;
+  padding: 6px;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.flow-bite {
+  background-color: var(--bs-white);
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  padding: 6px;
+  border-radius: 5px;
+  cursor: pointer;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.cart-icon {
+  background-color: var(--bs-white);
+  position: absolute;
+  top: 98px;
+  right: 19px;
+  padding: 6px;
+  border-radius: 5px;
+  cursor: pointer;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.explore-more {
+  display: none;
+}
+
+.wishlist-icon {
+  background-color: var(--bs-white);
+  position: absolute;
+  top: 139px;
+  right: 19px;
+  padding: 6px;
+  border-radius: 5px;
+  cursor: pointer;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.swatch-image {
+  border-radius: 8px;
+  border: 1px solid #eee;
+  width: 600px !important;
+  /* Override inline width */
+  height: 400px !important;
+  /* Match card-img-top height */
+  object-fit: cover;
+  /* Ensure image scales properly */
+}
+
+.flow-bite-box {
+  position: fixed;
+  top: 30%;
+  left: 35%;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  padding: 6px;
+  z-index: 10;
+  min-width: 160px;
+  transform-origin: top right;
+}
+.flow-bite-box .cursor-pointer {
+  cursor: pointer;
+}
+
+.flow-bite-icon {
+  transition: transform 0.3s ease;
+}
+
+.flow-bite-icon.rotated {
+  transform: rotate(45deg);
+}
+
+.flow-bite-fade-enter-active,
+.flow-bite-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.flow-bite-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.8) translateY(-10px);
+}
+
+.flow-bite-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.8) translateY(-10px);
+}
+
+.flow-bite-fade-enter-to,
+.flow-bite-fade-leave-from {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+@media only screen and (max-width: 768px) {
+  .card {
+    min-height: 350px;
+  }
+  .card-img-top {
+    height: 250px;
+  }
+  .swatch-image {
+    width: 359px !important;
+    height: 350px !important;
+  }
+  .explore-more {
+    display: none;
+  }
+  .flow-bite-box {
+    left: 7%;
+    top: 13%;
+  }
+}
+@media only screen and (max-width: 400px) {
+  .flow-bite-box {
+    left: 0%;
+    top: 20%;
+  }
+}
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
+  .flow-bite-box {
+    left: 10%;
+    top: 30%;
+  }
+}
+</style>

package/dist/runtime/components/SampleProductCard.vue.d.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    swatch: ArrayConstructor;
+    otherColor: BooleanConstructor;
+    from: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    swatch: ArrayConstructor;
+    otherColor: BooleanConstructor;
+    from: StringConstructor;
+}>> & Readonly<{}>, {
+    otherColor: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/WishList/dropdown.d.vue.ts

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    product: Record<string, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly product: Record<string, any>;
+};