@functionalcms/svelte-components 2.13.10 → 2.14.0

package/dist/components/presentation/Carusel.svelte

@@ -0,0 +1,41 @@
+<script>import { Splide, SplideSlide } from "@splidejs/svelte-splide";
+import "@splidejs/svelte-splide/css";
+export let items = [];
+export let perPage = 1;
+let options = {
+  perPage,
+  rewind: true
+};
+</script>
+
+<Splide class="carusele" aria-label="gallery" {options}>
+    {#each items as item}
+        <SplideSlide>
+            <a href={item.link}>
+                <img
+                    src={item.image}
+                    alt={item.text}
+                />
+            </a>
+        </SplideSlide>
+    {/each}
+</Splide>
+
+<style>
+    :global(.carusele) {
+        width: 100%;
+    }
+    :global(.splide__slide) {
+        overflow: hidden !important;
+    }
+    img {
+        width:100%;
+        height:auto;
+        margin: auto;
+    }
+    a {
+        height: 100%;
+        display: flex;
+        
+    }
+</style>

package/dist/components/presentation/Carusel.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { CaruseleItem } from "./Carusele";
+import '@splidejs/svelte-splide/css';
+declare const __propDef: {
+    props: {
+        items?: CaruseleItem[] | undefined;
+        perPage?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CaruselProps = typeof __propDef.props;
+export type CaruselEvents = typeof __propDef.events;
+export type CaruselSlots = typeof __propDef.slots;
+export default class Carusel extends SvelteComponent<CaruselProps, CaruselEvents, CaruselSlots> {
+}
+export {};

package/dist/components/presentation/Carusele.d.ts

@@ -0,0 +1,5 @@
+export declare class CaruseleItem {
+    text: string;
+    image: string;
+    link: string;
+}

package/dist/components/presentation/Carusele.js

@@ -0,0 +1,5 @@
+export class CaruseleItem {
+    text = "";
+    image = "";
+    link = "";
+}

package/dist/index.d.ts

@@ -12,6 +12,8 @@ import Spacer from './components/Spacer.svelte';
 import Well from './components/Well.svelte';
 import Link from './components/Link.svelte';
 import Gallery from './components/presentation/Gallery.svelte';
+import Carusel from './components/presentation/Carusel.svelte';
+import { CaruseleItem } from './components/presentation/Carusel';
 import { convertShowItemsToNavigationItems } from './components/converters/ShowItemToNavigationItems.js';
 import { ShowItem } from './components/presentation/ShowItem.js';
 import { title, suffix } from './stores/title.js';
@@ -19,4 +21,4 @@ import { pages } from './stores/pages.js';
 import { metaDescription, metaKeywords } from './stores/meta.js';
 import { Justify, Placement, Orientation, Position, Sizes, AlignItmes } from './components/Styling.js';
 import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
-export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
+export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Carusel, CaruseleItem, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };

package/dist/index.js

@@ -12,6 +12,8 @@ import Spacer from './components/Spacer.svelte';
 import Well from './components/Well.svelte';
 import Link from './components/Link.svelte';
 import Gallery from './components/presentation/Gallery.svelte';
+import Carusel from './components/presentation/Carusel.svelte';
+import { CaruseleItem } from './components/presentation/Carusel';
 import { convertShowItemsToNavigationItems } from './components/converters/ShowItemToNavigationItems.js';
 import { ShowItem } from './components/presentation/ShowItem.js';
 import { title, suffix } from './stores/title.js';
@@ -19,4 +21,4 @@ import { pages } from './stores/pages.js';
 import { metaDescription, metaKeywords } from './stores/meta.js';
 import { Justify, Placement, Orientation, Position, Sizes, AlignItmes } from './components/Styling.js';
 import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
-export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
+export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Carusel, CaruseleItem, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.13.10",
+	"version": "2.14.0",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -57,6 +57,7 @@
 		"vite": "^5.0.10"
 	},
 	"dependencies": {
+		"@splidejs/svelte-splide": "^0.2.9"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",