@designcrowd/fe-shared-lib 1.5.35 → 1.6.0-eng-4039

package/.storybook/preview-head-publish.html

@@ -2,9 +2,9 @@
   rel="stylesheet"
   href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
 />
-
-<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
-<link rel="stylesheet" href="css/tailwind-brandPage.css">
-<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
-<link rel="stylesheet" href="css/tailwind-designCom.css">
+
+<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
+<link rel="stylesheet" href="css/tailwind-brandPage.css">
+<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
+<link rel="stylesheet" href="css/tailwind-designCom.css">
 <link rel="stylesheet" href="css/tailwind-designCrowd.css">

package/.storybook/preview-head.html

@@ -2,9 +2,9 @@
   rel="stylesheet"
   href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
 />
-
-<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
-<link rel="stylesheet" href="css/tailwind-brandPage.css">
-<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
-<link rel="stylesheet" href="css/tailwind-designCom.css">
+
+<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
+<link rel="stylesheet" href="css/tailwind-brandPage.css">
+<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
+<link rel="stylesheet" href="css/tailwind-designCom.css">
 <link rel="stylesheet" href="css/tailwind-designCrowd.css">

package/index.js

@@ -31,7 +31,6 @@ export { default as Icon } from './src/atoms/components/Icon/Icon.vue';
 export { default as DcomIcon } from './src/atoms/components/design-com/Icon/Icon.vue';
 export { default as Modal } from './src/atoms/components/Modal/Modal.vue';
 export { default as Loader } from './src/atoms/components/Loader/Loader.vue';
-export { default as AiPoweredLoader } from './src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
 export { default as Tooltip } from './src/atoms/components/Tooltip/Tooltip.vue';
 export { default as Picture } from './src/atoms/components/Picture/Picture.vue';
 export { default as HelloBar } from './src/atoms/components/HelloBar/HelloBar.vue';
@@ -59,4 +58,3 @@ export { default as Select } from './src/atoms/components/Select/Select.vue';
 export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
 export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
 export { default as SparkleIcon } from './src/atoms/components/SparkleIcon/SparkleIcon.vue';
-export { default as SideNavigationPanel } from './src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.35",
+  "version": "1.6.0-eng-4039",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -551,9 +551,6 @@ video {
 .theme-brandCrowd .tw-relative {
   position: relative;
 }
-.theme-brandCrowd .tw-inset-0 {
-  inset: 0px;
-}
 .theme-brandCrowd .tw--left-16 {
   left: -4rem;
 }
@@ -1403,9 +1400,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
-.theme-brandCrowd .tw-border-t-transparent {
-  border-top-color: transparent;
-}
 .theme-brandCrowd .tw-bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1521,9 +1515,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .tw-bg-white\/50 {
-  background-color: rgb(255 255 255 / 0.5);
-}
 .theme-brandCrowd .tw-bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }

package/public/css/tailwind-brandPage.css

@@ -551,9 +551,6 @@ video {
 .theme-brandPage .tw-relative {
   position: relative;
 }
-.theme-brandPage .tw-inset-0 {
-  inset: 0px;
-}
 .theme-brandPage .tw--left-16 {
   left: -4rem;
 }
@@ -1335,9 +1332,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
-.theme-brandPage .tw-border-t-transparent {
-  border-top-color: transparent;
-}
 .theme-brandPage .tw-bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1369,9 +1363,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.theme-brandPage .tw-bg-white\/50 {
-  background-color: rgb(255 255 255 / 0.5);
-}
 .theme-brandPage .tw-bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }

package/public/css/tailwind-crazyDomains.css

@@ -551,9 +551,6 @@ video {
 .theme-crazyDomains .tw-relative {
   position: relative;
 }
-.theme-crazyDomains .tw-inset-0 {
-  inset: 0px;
-}
 .theme-crazyDomains .tw--left-16 {
   left: -4rem;
 }
@@ -1403,9 +1400,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
-.theme-crazyDomains .tw-border-t-transparent {
-  border-top-color: transparent;
-}
 .theme-crazyDomains .tw-bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1521,9 +1515,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .tw-bg-white\/50 {
-  background-color: rgb(255 255 255 / 0.5);
-}
 .theme-crazyDomains .tw-bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }

package/public/css/tailwind-designCom.css

@@ -551,9 +551,6 @@ video {
 .theme-designCom .tw-relative {
   position: relative;
 }
-.theme-designCom .tw-inset-0 {
-  inset: 0px;
-}
 .theme-designCom .tw--left-16 {
   left: -4rem;
 }
@@ -1403,9 +1400,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
-.theme-designCom .tw-border-t-transparent {
-  border-top-color: transparent;
-}
 .theme-designCom .tw-bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1521,9 +1515,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.theme-designCom .tw-bg-white\/50 {
-  background-color: rgb(255 255 255 / 0.5);
-}
 .theme-designCom .tw-bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }

package/public/css/tailwind-designCrowd.css

@@ -551,9 +551,6 @@ video {
 .theme-designCrowd .tw-relative {
   position: relative;
 }
-.theme-designCrowd .tw-inset-0 {
-  inset: 0px;
-}
 .theme-designCrowd .tw--left-16 {
   left: -4rem;
 }
@@ -1403,9 +1400,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
-.theme-designCrowd .tw-border-t-transparent {
-  border-top-color: transparent;
-}
 .theme-designCrowd .tw-bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1521,9 +1515,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .tw-bg-white\/50 {
-  background-color: rgb(255 255 255 / 0.5);
-}
 .theme-designCrowd .tw-bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }

package/src/atoms/components/Carousel/Carousel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['carousel tw-flex tw-flex-col tw-box-content', ...classes]" @contextmenu="onRightClick">
+  <div :class="['carousel tw-flex tw-flex-col tw-box-content', { 'carousel--hide-scrollbar': !shouldShowScrollbar }, ...classes]" @contextmenu="onRightClick">
     <div class="tw-flex tw-items-center tw-relative">
       <slot v-if="showControls" name="arrow-left">
         <div id="btn_carousel_prev" class="carousel__button-nav" :class="navigationPrevClass">
@@ -46,6 +46,7 @@
         :auto-height="swiperOptions.autoHeight"
         :autoplay="swiperOptions.autoplay"
         :free-mode="swiperOptions.freeMode"
+        :mousewheel="mousewheelConfig"
         @swiper="onSwiper"
       >
         <swiper-slide v-for="(slide, i) in cards" :key="i" :style="{ width: slide.width }">
@@ -105,7 +106,7 @@ import 'swiper/css/navigation';
 import 'swiper/css/free-mode';
 /* eslint-enable import/no-unresolved */
 import merge from 'deepmerge';
-import { Navigation, Pagination, Autoplay, Keyboard, FreeMode } from 'swiper/modules';
+import { Navigation, Pagination, Autoplay, Keyboard, FreeMode, Mousewheel } from 'swiper/modules';
 import Icon from '../Icon/Icon.vue';
 
 export default {
@@ -172,10 +173,20 @@ export default {
       required: false,
       default: undefined,
     },
+    isMousewheelScrollEnabled: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    shouldShowScrollbar: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   setup() {
     return {
-      modules: [Keyboard, Navigation, Pagination, Autoplay, FreeMode],
+      modules: [Keyboard, Navigation, Pagination, Autoplay, FreeMode, Mousewheel],
     };
   },
   data() {
@@ -213,6 +224,18 @@ export default {
       }
       return '';
     },
+    mousewheelConfig() {
+      if (!this.isMousewheelScrollEnabled && !this.swiperOptions.mousewheel) {
+        return false;
+      }
+      if (this.swiperOptions.mousewheel && typeof this.swiperOptions.mousewheel === 'object') {
+        return this.swiperOptions.mousewheel;
+      }
+      return {
+        forceToAxis: false,
+        releaseOnEdges: true,
+      };
+    },
     swiperOptions() {
       const defaultOptions = { ...this.defaultOptions };
 
@@ -349,4 +372,13 @@ export default {
 .pagination-hidden {
   display: none !important;
 }
+
+.carousel--hide-scrollbar :deep(.swiper) {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.carousel--hide-scrollbar :deep(.swiper::-webkit-scrollbar) {
+  display: none;
+}
 </style>

package/src/atoms/components/Carousel/carousel.stories.js

@@ -63,6 +63,22 @@ export default {
         defaultValue: { summary: '{}' },
       },
     },
+    isMousewheelScrollEnabled: {
+      control: 'boolean',
+      description: 'Enable horizontal trackpad/mousewheel scrolling',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    shouldShowScrollbar: {
+      control: 'boolean',
+      description: 'Show or hide the native scrollbar (shown by default)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
   },
   parameters: {
     docs: {
@@ -471,6 +487,112 @@ export const MultipleCarousels = {
   },
 };
 
+// Mousewheel scrolling
+export const MousewheelScroll = {
+  args: {
+    cards: [...cards, ...cards],
+    isMousewheelScrollEnabled: true,
+    shouldShowScrollbar: false,
+    showControls: true,
+    showBullets: true,
+    options: {
+      loop: false,
+      spaceBetween: 20,
+      slidesPerView: 1,
+      breakpoints: {
+        640: {
+          slidesPerView: 2,
+          slidesPerGroup: 2,
+        },
+        1024: {
+          slidesPerView: 3,
+          slidesPerGroup: 3,
+        },
+      },
+    },
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <p class="tw-text-sm tw-text-gray-600 tw-mb-4">Use trackpad horizontal swipe or mouse scroll wheel to navigate.</p>
+        <Carousel
+          :cards="args.cards"
+          :is-mousewheel-scroll-enabled="args.isMousewheelScrollEnabled"
+          :should-show-scrollbar="args.shouldShowScrollbar"
+          :show-controls="args.showControls"
+          :show-bullets="args.showBullets"
+          :options="args.options"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-h-full">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
+              <span class="tw-text-lg tw-font-semibold tw-text-center">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Carousel with native trackpad/mousewheel horizontal scrolling enabled. Arrow buttons stay synchronized with scroll position.',
+      },
+    },
+  },
+};
+
+// Mousewheel with free mode
+export const MousewheelFreeMode = {
+  args: {
+    cards: [...cards, ...cards, ...cards],
+    isMousewheelScrollEnabled: true,
+    shouldShowScrollbar: false,
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <p class="tw-text-sm tw-text-gray-600 tw-mb-4">Free-scrolling with mousewheel support. Scrolls continuously without snapping.</p>
+        <Carousel
+          :cards="args.cards"
+          :is-mousewheel-scroll-enabled="args.isMousewheelScrollEnabled"
+          :should-show-scrollbar="args.shouldShowScrollbar"
+          :options="{
+            loop: false,
+            spaceBetween: 20,
+            freeMode: true,
+            slidesPerView: 'auto',
+          }"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-rounded-lg tw-shadow" style="width: 200px;">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
+              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Mousewheel scrolling combined with free mode for continuous smooth scrolling without snapping to slides.',
+      },
+    },
+  },
+};
+
 // Responsive breakpoints demo
 export const ResponsiveBreakpoints = {
   args: {