@nuskin/product-components 3.18.0-td-341.1 → 4.0.0-cx15-11969.1

package/components/NuHomeCloneProductCarousel/Carousel.vue

@@ -1,209 +0,0 @@
-<template>
-  <div class="swiper" data-carousel="carousel">
-    <slot />
-  </div>
-</template>
-<script>
-import Swiper, { Navigation, Pagination } from "swiper";
-import "swiper/swiper.scss";
-import "swiper/modules/pagination/pagination.scss";
-
-export const CSS_CLASSES = {
-  SWIPER_WRAPPER: "swiper-wrapper",
-  SWIPER_NAV_PREV: "swiper-button-prev",
-  SWIPER_NAV_NEXT: "swiper-button-next",
-  SWIPER_SLIDE: "swiper-slide",
-  SWIPER_PAGINATION: "swiper-pagination",
-  SWIPER_VISIBLE: "swiper-slide-visible",
-  SWIPER_DUPLICATE: "swiper-slide-duplicate"
-};
-
-export const SELECTORS = {
-  WRAPPER: '[data-carousel="wrapper"]',
-  CHEVRON_LEFT: '[data-carousel="chevron-left"]',
-  CHEVRON_RIGHT: '[data-carousel="chevron-right"]',
-  ITEMS: '[data-carousel="item"]',
-  DISABLED_TAB: "[data-disabletab]",
-  DOTS: '[data-carousel="dots"]',
-  DOT_ELEMENT: "span"
-};
-
-export default {
-  name: "Carousel",
-  props: {
-    options: {
-      default: () => ({}),
-      type: Object
-    }
-  },
-  data() {
-    return {
-      swiper: {
-        type: Object,
-        default: undefined
-      }
-    };
-  },
-  computed: {
-    carouselWrapper() {
-      return this.$el.querySelector(SELECTORS.WRAPPER);
-    },
-    carouselChevrons() {
-      return [
-        this.$el.querySelector(SELECTORS.CHEVRON_LEFT),
-        this.$el.querySelector(SELECTORS.CHEVRON_RIGHT)
-      ];
-    },
-    carouselItems() {
-      return this.$el.querySelectorAll(SELECTORS.ITEMS);
-    },
-    carouselDotContainer() {
-      return this.$el.querySelector(SELECTORS.DOTS);
-    },
-    carouselDots() {
-      return this.$el.querySelectorAll(
-        `.${CSS_CLASSES.SWIPER_PAGINATION} ${SELECTORS.DOT_ELEMENT}`
-      );
-    }
-  },
-  mounted() {
-    this.setSwiperClasses();
-    const options = this.buildOptions();
-    this.swiper = new Swiper(this.$el, options);
-    this.bindEvents();
-    this.toggleTabItemIndex();
-    this.setDotsTabIndex();
-
-    this.swiper.on("slideChange", () => {
-      this.toggleTabItemIndex();
-    });
-  },
-  methods: {
-    toggleTabItemIndex() {
-      /**
-       *  Set all carousel slides, duplicates, and their anchor tags to be non-tabbable.
-       *  Note: We are using `methods` here instead of `computed` to fetch the updated DOM after carousel's slideChange
-       */
-      const carouselItems = this.getCarouselItems();
-      const duplicateCarouselItems = this.getDuplicateCarouselItems();
-      const visibleCarouselItems = this.getVisibleCarouselItems();
-
-      [...carouselItems, ...duplicateCarouselItems].forEach(el => {
-        el.tabIndex = "-1";
-
-        const links = el.querySelectorAll("a");
-        links.forEach(link => {
-          link.tabIndex = "-1";
-        });
-      });
-
-      /**
-       * Set all visible slides and their anchor tags (with no `data-disabletab`) to be tabbable.
-       */
-      visibleCarouselItems.forEach(el => {
-        if (el.firstChild instanceof HTMLAnchorElement) {
-          el.firstChild.tabIndex = "0";
-        } else {
-          el.tabIndex = "0";
-        }
-
-        const links = el.querySelectorAll(`a:not(${SELECTORS.DISABLED_TAB})`);
-        links.forEach(link => {
-          link.tabIndex = "0";
-        });
-      });
-    },
-    setDotsTabIndex() {
-      this.carouselDots.forEach(dot => {
-        dot.tabIndex = "0";
-      });
-    },
-    getCarouselItems() {
-      return this.$el.querySelectorAll(SELECTORS.ITEMS);
-    },
-    getDuplicateCarouselItems() {
-      return this.$el.querySelectorAll(
-        `.${CSS_CLASSES.SWIPER_DUPLICATE}${SELECTORS.ITEMS}`
-      );
-    },
-    getVisibleCarouselItems() {
-      return this.$el.querySelectorAll(
-        `.${CSS_CLASSES.SWIPER_VISIBLE}${SELECTORS.ITEMS}:not(${SELECTORS.DISABLED_TAB})`
-      );
-    },
-    setSwiperClasses() {
-      const {
-        SWIPER_WRAPPER,
-        SWIPER_NAV_PREV,
-        SWIPER_NAV_NEXT,
-        SWIPER_SLIDE,
-        SWIPER_PAGINATION
-      } = CSS_CLASSES;
-      if (this.carouselWrapper)
-        this.carouselWrapper.classList.add(SWIPER_WRAPPER);
-
-      this.carouselItems.forEach(carouselItem => {
-        carouselItem.classList.add(SWIPER_SLIDE);
-      });
-
-      if (this.carouselDotContainer)
-        this.carouselDotContainer.classList.add(SWIPER_PAGINATION);
-
-      const [left, right] = this.carouselChevrons;
-      if (left) left.classList.add(SWIPER_NAV_PREV);
-      if (right) right.classList.add(SWIPER_NAV_NEXT);
-    },
-    buildOptions() {
-      const { options } = this;
-      return {
-        ...options,
-        modules: [Navigation, Pagination]
-      };
-    },
-    bindEvents() {
-      const events = ["click"];
-      events.forEach(event => {
-        this.swiper.on(event, (swiperEvent, nativeEvent) =>
-          this.$emit(event, { swiperEvent, nativeEvent })
-        );
-      });
-
-      this.carouselDots.forEach(dot => {
-        dot.addEventListener("keypress", e => {
-          if (e.key === "Enter") e.target.click();
-        });
-      });
-    }
-  }
-};
-</script>
-<style lang="scss">
-.swiper-pagination {
-  position: static;
-  margin-top: 1.25rem;
-
-  .swiper-pagination-bullet {
-    height: 10px;
-    width: 10px;
-    margin: 5px 7px;
-
-    &.swiper-pagination-bullet-active {
-      background-color: #869791;
-    }
-  }
-}
-
-.carousel-chevron {
-  .swiper-button-prev,
-  .swiper-button-next {
-    position: static;
-    right: initial;
-    left: initial;
-
-    &::after {
-      content: "";
-      display: none;
-    }
-  }
-}
-</style>

package/components/NuHomeCloneProductCarousel/CarouselChevron.vue

@@ -1,93 +0,0 @@
-<template>
-  <div data-carousel="chevron" class="carousel-chevron">
-    <a data-carousel="chevron-left" class="arrow-left effect-black" href>
-      <svg
-        viewBox="0 0 24 24"
-        preserveAspectRatio="xMidYMid meet"
-        focusable="false"
-        size="icon-sm"
-        class="icon"
-        icon-size="icon-lg"
-        style="pointer-events: none; display: block;"
-      >
-        <g
-          id="icon-narrow-angle-left-24"
-          stroke="none"
-          stroke-width="1"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <g transform="translate(-196, -226)" stroke="currentColor">
-            <polyline
-              transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(90.000000) translate(-209.000000, -237.500000) "
-              points="200 242 209 233 218 242"
-            />
-          </g>
-        </g>
-      </svg>
-    </a>
-    <a data-carousel="chevron-right" class="arrow-right effect-black" href>
-      <svg
-        viewBox="0 0 24 24"
-        preserveAspectRatio="xMidYMid meet"
-        focusable="false"
-        size="icon-sm"
-        class="icon"
-        icon-size="icon-lg"
-        style="pointer-events: none; display: block;"
-      >
-        <g
-          id="icon-narrow-angle-right-24"
-          stroke="none"
-          stroke-width="1"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <g transform="translate(-196, -226)" stroke="currentColor">
-            <polyline
-              transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(-90.000000) translate(-209.000000, -237.500000) "
-              points="200 242 209 233 218 242"
-            />
-          </g>
-        </g>
-      </svg>
-    </a>
-  </div>
-</template>
-<script>
-export default {
-  name: "CarouselChevron"
-};
-</script>
-<style lang="scss">
-.carousel-chevron {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-
-  .arrow-left,
-  .arrow-right {
-    height: auto;
-    width: auto;
-    padding: 10px;
-    border: 2px solid black;
-    border-radius: 3px;
-    cursor: pointer;
-    color: inherit !important;
-
-    svg {
-      height: 20px;
-      width: 20px;
-
-      &:hover {
-        fill: var(--theme__color3);
-        color: var(--theme__color3);
-      }
-    }
-  }
-}
-</style>

package/components/NuHomeCloneProductCarousel/Loader.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="preloader">
-    <div class="loader"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Loader"
-};
-</script>
-
-<style scoped lang="scss">
-.preloader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-
-  .loader {
-    display: inline-block;
-    position: relative;
-    width: 9.375rem;
-    height: 9.375rem;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #9370db;
-    animation: spin 2s linear infinite;
-    left: 50%;
-    top: 50%;
-    margin: -4.7rem 0 0 -4.7rem;
-
-    &::before,
-    &::after {
-      content: " ";
-      position: absolute;
-      border-radius: 50%;
-      border: 3px solid transparent;
-    }
-
-    &::before {
-      top: 5px;
-      left: 5px;
-      right: 5px;
-      bottom: 5px;
-      border-top-color: #ba55d3;
-      animation: spin 3s linear infinite;
-    }
-
-    &::after {
-      top: 15px;
-      left: 15px;
-      right: 15px;
-      bottom: 15px;
-      border-top-color: #f56767;
-      animation: spin 1.5s linear infinite;
-    }
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>