test-bentoweb-ui 1.0.46 → 1.0.50

package/README.md

@@ -1,29 +1,181 @@
-# bentoweb-ui
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Compile and Minify for Production
-
-```sh
-npm run build
-```
+# bentoweb-ui
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+# Bento UI Components
+
+## Swiper Components
+
+The Swiper components have been updated to use the official Swiper Element (WebComponent) instead of the deprecated vue-awesome-swiper.
+
+### SwiperBanner Usage
+
+```vue
+<template>
+  <SwiperBanner :BannerImage="bannerImages" size="xl" />
+</template>
+
+<script>
+import { SwiperBanner } from 'test-bentoweb-ui';
+
+export default {
+  components: {
+    SwiperBanner
+  },
+  data() {
+    return {
+      bannerImages: [
+        {
+          src: '/images/platform-btw.jpg',
+          link: '/platform'
+        },
+        {
+          src: '/images/t-shirt.jpg',
+          link: '/products'
+        },
+        {
+          src: 'https://example.com/external-image.jpg',
+          link: '/external'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| BannerImage | Array | required | Array of objects with `src` and `link` properties |
+| size | String | 'xl' | Size of the banner. Options: 'xl' (full banner with pagination) or 'm' (interactive style) |
+
+The `src` property can be:
+- A path relative to the public directory (e.g., `/images/example.jpg`)
+- An absolute URL (e.g., `https://example.com/image.jpg`)
+
+The `link` property can be:
+- A Vue Router path for internal navigation (e.g., `/products`)
+- An external URL (e.g., `https://example.com`) which will open in a new tab
+
+### Swiper Element Attributes
+
+When using Swiper Element (WebComponent), attributes must be passed as strings rather than bound objects:
+
+```vue
+<!-- Correct -->
+<swiper-container
+  slides-per-view="1"
+  pagination="true"
+  pagination-clickable="true"
+  autoplay-delay="2500"
+  breakpoints='{"768": {"slidesPerView": 2}}'
+>
+</swiper-container>
+
+<!-- Incorrect - will display as [object Object] -->
+<swiper-container
+  :pagination="{ clickable: true }"
+  :autoplay="{ delay: 2500 }"
+>
+</swiper-container>
+```
+
+For complex options like breakpoints, use a JSON string.
+
+### CSS Styling
+
+Swiper Element uses Shadow DOM, so CSS selectors need to use `::part()` to target internal elements. The element name must be included in the selector:
+
+```css
+/* Correct way to target Shadow DOM parts */
+swiper-container.banner-full::part(pagination) {
+  text-align: left;
+  padding-left: 0.9375rem;
+}
+
+swiper-container.banner-full::part(bullet) {
+  background-color: white;
+  width: 0.4375rem;
+  height: 0.4375rem;
+}
+
+swiper-container.banner-full::part(bullet-active) {
+  width: 0.9375rem;
+  border-radius: 0.3125rem;
+}
+
+/* This won't work */
+.banner-full ::part(bullet) {
+  background-color: white;
+}
+```
+
+Available parts include: `container`, `wrapper`, `slide`, `pagination`, `bullet`, `bullet-active`, and more. See the [Swiper Element documentation](https://swiperjs.com/element#parts) for a complete list.
+
+### SwiperInteractive Usage (Deprecated)
+
+The SwiperInteractive component is now deprecated. Please use the SwiperBanner component with `size="m"` instead:
+
+```vue
+<template>
+  <SwiperBanner :BannerImage="interactiveImages" size="m" />
+</template>
+
+<script>
+import { SwiperBanner } from 'test-bentoweb-ui';
+
+export default {
+  components: {
+    SwiperBanner
+  },
+  data() {
+    return {
+      interactiveImages: [
+        {
+          src: '/images/platform-btw.jpg',
+          link: '/platform'
+        },
+        {
+          src: '/images/t-shirt.jpg',
+          link: '/products'
+        },
+        {
+          src: '/images/vdo.jpg',
+          link: '/videos'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+The same path handling rules apply as for the standard SwiperBanner usage. Make sure your Vue Router is properly configured to handle these routes.