first commit

resources/js/pages/extensions/swiper.vue

@@ -0,0 +1,156 @@
+<script setup>
+import * as demoCode from '@/views/demos/components/swiper/demoCodeSwiper'
+</script>
+
+<template>
+  <VRow>
+    <VCol>
+      <AppCardCode
+        title="Basic"
+        :code="demoCode.basic"
+      >
+        <DemoSwiperBasic />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Navigation"
+        :code="demoCode.navigation"
+      >
+        <DemoSwiperNavigation />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Pagination"
+        :code="demoCode.pagination"
+      >
+        <DemoSwiperPagination />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Progress"
+        :code="demoCode.progress"
+      >
+        <DemoSwiperProgress />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Multiple Slides Per View"
+        :code="demoCode.multipleSlidesPerView"
+      >
+        <DemoSwiperMultipleSlidesPerView />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Grid"
+        :code="demoCode.grid"
+      >
+        <DemoSwiperGrid />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        variant="text"
+        title="Centered Slides Option 1"
+        :code="demoCode.centeredSlidesOption1"
+      >
+        <DemoSwiperCenteredSlidesOption1 />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Centered Slides Option 2"
+        :code="demoCode.centeredSlidesOption2"
+      >
+        <DemoSwiperCenteredSlidesOption2 />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Fade"
+        :code="demoCode.fade"
+      >
+        <DemoSwiperFade />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Cube Effect"
+        :code="demoCode.cubeEffect"
+      >
+        <DemoSwiperCubeEffect />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Coverflow Effect"
+        :code="demoCode.coverflowEffect"
+      >
+        <DemoSwiperCoverflowEffect />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Autoplay"
+        :code="demoCode.autoplay"
+      >
+        <DemoSwiperAutoplay />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Gallery"
+        :code="demoCode.gallery"
+      >
+        <DemoSwiperGallery />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Lazy Loading"
+        :code="demoCode.lazyLoading"
+      >
+        <DemoSwiperLazyLoading />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Responsive Breakpoints"
+        :code="demoCode.responsiveBreakpoints"
+      >
+        <DemoSwiperResponsiveBreakpoints />
+      </AppCardCode>
+    </VCol>
+
+    <VCol>
+      <AppCardCode
+        title="Virtual Slides"
+        :code="demoCode.virtualSlides"
+      >
+        <DemoSwiperVirtualSlides />
+      </AppCardCode>
+    </VCol>
+  </VRow>
+</template>
+
+<style lang="scss">
+@use "@core-scss/template/libs/swiper.scss"
+</style>

resources/js/pages/extensions/tour.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { useShepherd } from 'vue-shepherd'
+
+const route = useRoute()
+
+// 👉 Hotkey
+
+// eslint-disable-next-line camelcase
+const { ctrl_k, meta_k } = useMagicKeys()
+
+// 👉 Tour initialization
+let tour = null
+
+// 👉 watch command palette and route change
+
+/* eslint-disable camelcase */
+watch([
+  ctrl_k,
+  meta_k,
+  () => route.path,
+], () => {
+  if (tour.isActive())
+    tour.cancel()
+})
+
+/* eslint-enable */
+onMounted(() => {
+  const navbar = document.querySelector('.layout-navbar')
+
+  tour = useShepherd({
+    useModalOverlay: true,
+    stepsContainer: document.querySelector('.layout-wrapper'),
+    modelContainer: document.querySelector('.layout-wrapper'),
+    defaultStepOptions: {
+      cancelIcon: { enabled: true },
+      modalOverlayOpeningPadding: 2,
+      modalOverlayOpeningRadius: 5,
+    },
+  })
+
+  //  👉 Tour steps
+  tour.addSteps([
+    {
+      id: 'welcome',
+      title: 'Welcome',
+      arrow: true,
+      attachTo: {
+        element: navbar,
+        on: 'bottom',
+      },
+      text: 'Welcome to our tour page, Guide users to the key features of the product.',
+      buttons: [
+        {
+          action: tour.cancel,
+          classes: 'backBtnClass',
+          text: 'Back',
+        },
+        {
+          action: tour.next,
+          text: 'Next',
+          classes: 'nextBtnClass',
+        },
+      ],
+    },
+    {
+      id: 'notification',
+      title: 'Notifications',
+      arrow: true,
+      attachTo: {
+        element: document.querySelector('#notification-btn'),
+        on: 'bottom',
+      },
+      text: 'Manage your notifications and stay up-to-date with latest updates.',
+      buttons: [
+        {
+          label: 'Back',
+          text: 'Back',
+          action: tour.back,
+          classes: 'backBtnClass',
+        },
+        {
+          label: 'Next',
+          text: 'Next',
+          action: tour.next,
+          classes: 'nextBtnClass',
+        },
+      ],
+    },
+    {
+      id: 'footer',
+      title: 'Footer',
+      arrow: true,
+      attachTo: {
+        element: document.querySelector('.layout-footer'),
+        on: 'bottom',
+      },
+      text: 'Footer section of the page.',
+      buttons: [
+        {
+          label: 'Back',
+          text: 'Back',
+          action: tour.back,
+          classes: 'backBtnClass',
+        },
+        {
+          label: 'Finish',
+          text: 'Finish',
+          action: tour.complete,
+          classes: 'nextBtnClass',
+        },
+      ],
+    },
+  ])
+})
+</script>
+
+<template>
+  <div>
+    <VCard title="Tour">
+      <VCardText>
+        <VBtn
+          variant="outlined"
+          @click="() => { tour && tour.start() }"
+        >
+          Start Tour
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </div>
+</template>
+
+<style lang="scss">
+@use "@core-scss/template/libs/shepherd.scss";
+</style>