@uibit/carousel 0.1.0 → 0.2.0

package/dist/frameworks/vue/index.ts

@@ -1,33 +1,195 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, ref, watch } from 'vue';
 import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
 import '@uibit/carousel';
-
 export const UIBitCarousel = defineComponent({
-  name: 'UIBitCarousel',
-  props: {
-    autoPlay: { type: [String, Number, Boolean, Array, Object] as any },
-    autoPlayInterval: { type: [String, Number, Boolean, Array, Object] as any },
-    loop: { type: [String, Number, Boolean, Array, Object] as any },
-    content: { type: [String, Number, Boolean, Array, Object] as any },
-    viewport: { type: [String, Number, Boolean, Array, Object] as any },
-    slotElement: { type: [String, Number, Boolean, Array, Object] as any },
-    currentIndex: { type: [String, Number, Boolean, Array, Object] as any },
-    totalSlides: { type: [String, Number, Boolean, Array, Object] as any },
-    canPrev: { type: [String, Number, Boolean, Array, Object] as any },
-    canNext: { type: [String, Number, Boolean, Array, Object] as any }
-  },
-  emits: ['slide-change'],
-  setup(props, { slots, emit }) {
-    return () => {
-      const eventListeners: Record<string, any> = {};
-      eventListeners['onSlide-change'] = (event: Event) => {
-        emit('slide-change', event);
-      };
-
-      return h('uibit-carousel', {
-        ...props,
-        ...eventListeners
-      }, slots.default?.());
-    };
-  }
+    name: 'UIBitCarousel',
+    props: {
+        autoPlay: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        autoPlayInterval: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        loop: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        content: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        viewport: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        slotElement: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        currentIndex: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        totalSlides: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        canPrev: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        canNext: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        locale: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        }
+    },
+    emits: [
+        'slide-change'
+    ],
+    setup (props, { slots, emit }) {
+        const elementRef = ref<HTMLElementClass | null>(null);
+        if (false) {
+            watch(()=>props.modelValue, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+            watch(()=>props.value, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+        }
+        watch(()=>props.autoPlay, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).autoPlay = newVal;
+            }
+        });
+        watch(()=>props.autoPlayInterval, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).autoPlayInterval = newVal;
+            }
+        });
+        watch(()=>props.loop, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).loop = newVal;
+            }
+        });
+        watch(()=>props.content, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).content = newVal;
+            }
+        });
+        watch(()=>props.viewport, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).viewport = newVal;
+            }
+        });
+        watch(()=>props.slotElement, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).slotElement = newVal;
+            }
+        });
+        watch(()=>props.currentIndex, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).currentIndex = newVal;
+            }
+        });
+        watch(()=>props.totalSlides, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).totalSlides = newVal;
+            }
+        });
+        watch(()=>props.canPrev, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).canPrev = newVal;
+            }
+        });
+        watch(()=>props.canNext, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).canNext = newVal;
+            }
+        });
+        watch(()=>props.locale, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).locale = newVal;
+            }
+        });
+        return ()=>{
+            const eventListeners: Record<string, any> = {};
+            eventListeners['onSlide-change'] = (event: Event)=>{
+                emit('slide-change', event);
+            };
+            const mergedProps = {
+                ...props,
+                ...eventListeners,
+                ref: elementRef
+            };
+            if (false && props.modelValue !== undefined) {
+                (mergedProps as any).value = props.modelValue;
+            }
+            return h('uibit-carousel', mergedProps, slots.default?.());
+        };
+    }
 });

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { UIBitCarousel as default } from './carousel';
+export { UIBitCarousel as default, UIBitCarousel } from './carousel';
 export type { CarouselConfig, SlideChangeEvent } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,2 +1,2 @@
-export { UIBitCarousel as default } from './carousel';
+export { UIBitCarousel as default, UIBitCarousel } from './carousel';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uibit/carousel",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Native, accessible carousel using CSS scroll-snap and scroll-driven animations. Perfect for image galleries, testimonials, and product showcases.",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,7 +12,10 @@
     },
     "./carousel.css": "./dist/carousel.css",
     "./custom-elements.json": "./custom-elements.json",
-    "./react": "./dist/frameworks/react/index.d.ts",
+    "./react": {
+      "types": "./dist/frameworks/react/index.ts",
+      "import": "./dist/frameworks/react/index.ts"
+    },
     "./vue": "./dist/frameworks/vue/index.ts",
     "./svelte": "./dist/frameworks/svelte/index.svelte",
     "./angular": "./dist/frameworks/angular/index.ts",
@@ -47,13 +50,13 @@
   },
   "dependencies": {
     "lucide": "^1.24.0",
-    "@uibit/core": "0.1.0"
+    "@uibit/core": "0.2.0"
   },
   "devDependencies": {
     "@types/node": "^20.19.43",
     "lit": "^3.3.3",
     "typescript": "7.0.2",
-    "@uibit/codegen": "0.1.0"
+    "@uibit/codegen": "0.2.0"
   },
   "peerDependencies": {
     "lit": "^3.0.0",
@@ -84,9 +87,9 @@
     "tagName": "uibit-carousel"
   },
   "scripts": {
-    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
-    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
-    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --config ../custom-elements-manifest.config.js",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/frameworks/react/index.d.ts

@@ -1,27 +0,0 @@
-import type { HTMLAttributes, ClassAttributes } from 'react';
-import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
-import '@uibit/carousel';
-
-declare global {
-  namespace React {
-    namespace JSX {
-      interface IntrinsicElements {
-        'uibit-carousel': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
-          children?: React.ReactNode;
-          class?: string;
-      autoPlay?: boolean;
-      autoPlayInterval?: number;
-      loop?: boolean;
-      content?: HTMLElement | undefined;
-      viewport?: HTMLElement | undefined;
-      slotElement?: HTMLSlotElement | undefined;
-      currentIndex?: number;
-      totalSlides?: number;
-      canPrev?: boolean;
-      canNext?: boolean;
-      onSlideChange?: (event: any) => void;
-        };
-      }
-    }
-  }
-}