@functionalcms/svelte-components 4.6.0 → 4.6.2

package/dist/components/form/Button.svelte

@@ -1,120 +1,120 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		css: string;
-		style: string;
-		type?: 'submit' | 'reset' | 'button' | 'link';
-		href: string;
-		mode?: string;
-		size?: string;
-		isPrimary: boolean;
-		isBordered?: boolean;
-		isCapsule?: boolean;
-		isGrouped?: boolean;
-		isBlock?: boolean;
-		isLink?: boolean;
-		isBlank?: boolean;
-		isDisabled?: boolean;
-		role?: string;
-		isCircle?: boolean;
-		isRounded?: boolean;
-		isSkinned?: boolean;
-		ariaSelected?: boolean;
-		ariaControls?: string;
-		tabIndex?: number;
-		ariaLabel: string;
-		click?: () => void;
-		keydown?: (e: KeyboardEvent) => void;
-	}
-
-	let {
-		children,
-		css = '',
-		style = '',
-		href = '',
-		mode = undefined,
-		size = undefined,
-		type = 'button',
-		isPrimary = false,
-		isBordered = false,
-		isCapsule = false,
-		isGrouped = false,
-		isBlock = false,
-		isLink = false,
-		isBlank = false,
-		isDisabled = false,
-		role = undefined,
-		isCircle = false,
-		isRounded = false,
-		isSkinned = true,
-		ariaSelected = undefined,
-		ariaControls = undefined,
-		tabIndex = 0,
-		click = undefined,
-		keydown = undefined,
-		ariaLabel = '',
-		...restProps
-	}: Partial<Props> = $props();
-
-	let klasses = $derived(
-		cn(
-			isSkinned ? 'btn' : 'btn-base',
-			mode ? `btn-${mode}` : '',
-			size ? `btn-${size}` : '',
-			isBordered ? 'btn-bordered' : '',
-			isCapsule ? 'btn-capsule ' : '',
-			isGrouped ? 'btn-grouped' : '',
-			isBlock ? 'btn-block' : '',
-			isCircle ? 'btn-circle' : '',
-			isRounded ? 'btn-rounded' : '',
-			isDisabled ? 'disabled' : '',
-			isBlank ? 'btn-blank' : '',
-			isLink ? 'btn-link' : '',
-			css ? `${css}` : ''
-		)
-	);
-
-</script>
-
-{#if type == 'link'}
-	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<a
-		class={klasses}
-		{href}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		aria-label={ariaLabel}
-		tabindex={tabIndex}
-		onclick={click}
-		onkeydown={keydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		{type}
-		class={klasses}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		aria-label={ariaLabel}
-		tabindex={tabIndex}
-		disabled={isDisabled}
-		onclick={click}
-		onkeydown={keydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}
-
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		css: string;
+		style: string;
+		type?: 'submit' | 'reset' | 'button' | 'link';
+		href: string;
+		mode?: string;
+		size?: string;
+		isPrimary: boolean;
+		isBordered?: boolean;
+		isCapsule?: boolean;
+		isGrouped?: boolean;
+		isBlock?: boolean;
+		isLink?: boolean;
+		isBlank?: boolean;
+		isDisabled?: boolean;
+		role?: string;
+		isCircle?: boolean;
+		isRounded?: boolean;
+		isSkinned?: boolean;
+		ariaSelected?: boolean;
+		ariaControls?: string;
+		tabIndex?: number;
+		ariaLabel: string;
+		click?: () => void;
+		keydown?: (e: KeyboardEvent) => void;
+	}
+
+	let {
+		children,
+		css = '',
+		style = '',
+		href = '',
+		mode = undefined,
+		size = undefined,
+		type = 'button',
+		isPrimary = false,
+		isBordered = false,
+		isCapsule = false,
+		isGrouped = false,
+		isBlock = false,
+		isLink = false,
+		isBlank = false,
+		isDisabled = false,
+		role = undefined,
+		isCircle = false,
+		isRounded = false,
+		isSkinned = true,
+		ariaSelected = undefined,
+		ariaControls = undefined,
+		tabIndex = 0,
+		click = undefined,
+		keydown = undefined,
+		ariaLabel = '',
+		...restProps
+	}: Partial<Props> = $props();
+
+	let klasses = $derived(
+		cn(
+			isSkinned ? 'btn' : 'btn-base',
+			mode ? `btn-${mode}` : '',
+			size ? `btn-${size}` : '',
+			isBordered ? 'btn-bordered' : '',
+			isCapsule ? 'btn-capsule ' : '',
+			isGrouped ? 'btn-grouped' : '',
+			isBlock ? 'btn-block' : '',
+			isCircle ? 'btn-circle' : '',
+			isRounded ? 'btn-rounded' : '',
+			isDisabled ? 'disabled' : '',
+			isBlank ? 'btn-blank' : '',
+			isLink ? 'btn-link' : '',
+			css ? `${css}` : ''
+		)
+	);
+
+</script>
+
+{#if type == 'link'}
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<a
+		class={klasses}
+		{href}
+		{style}
+		{role}
+		aria-selected={ariaSelected}
+		aria-controls={ariaControls}
+		aria-label={ariaLabel}
+		tabindex={tabIndex}
+		onclick={click}
+		onkeydown={keydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		{type}
+		class={klasses}
+		{style}
+		{role}
+		aria-selected={ariaSelected}
+		aria-controls={ariaControls}
+		aria-label={ariaLabel}
+		tabindex={tabIndex}
+		disabled={isDisabled}
+		onclick={click}
+		onkeydown={keydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
+
 <style>.btn-base {
   display: inline-flex;
   align-items: center;
@@ -386,4 +386,4 @@ on the side padding. As such, these have a good bit less then regular buttons. *
 
 .btn-link:hover {
   cursor: pointer;
-}</style>
+}</style>

package/dist/components/presentation/Carousel.svelte

@@ -2,23 +2,36 @@
 	import { onMount, type Snippet } from 'svelte';
 	import emblaCarouselSvelte from 'embla-carousel-svelte';
 	import EmblaCarousel, { type EmblaOptionsType } from 'embla-carousel';
-	import type { CarouselItem } from './Carousel.ts';
 	import { cn } from '../../utils.js';
 	import Button from '../form/Button.svelte';
 
 	interface Props {
-		child: Snippet<[CarouselItem]>;
-		items: Array<CarouselItem>;
+		child: Snippet<[any]>;
+		items: Array<any>;
 		next?: Snippet;
 		prev?: Snippet;
 		css?: { slide: string; container: string };
 		perPage?: number;
 		slideGaps: string;
+		disableDrag: boolean;
 	}
 
-	let { child, next, prev, items, perPage = 1, slideGaps = '20px;' }: Props = $props();
+	let {
+		child,
+		next,
+		prev,
+		items,
+		perPage = 1,
+		slideGaps = '20px;',
+		disableDrag = false
+	}: Props = $props();
 
-	let options: EmblaOptionsType = { loop: false };
+	let options: EmblaOptionsType = {
+		loop: false
+	};
+	if(disableDrag) {
+		options.watchDrag = false;
+	}
 	let slideStyle = $derived('flex: 0 0 ' + 100 / perPage + '%;');
 	let containerCss = cn('flex', 'fw');
 

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

@@ -1,8 +1,7 @@
 import { type Snippet } from 'svelte';
-import type { CarouselItem } from './Carousel.ts';
 interface Props {
-    child: Snippet<[CarouselItem]>;
-    items: Array<CarouselItem>;
+    child: Snippet<[any]>;
+    items: Array<any>;
     next?: Snippet;
     prev?: Snippet;
     css?: {
@@ -11,6 +10,7 @@ interface Props {
     };
     perPage?: number;
     slideGaps: string;
+    disableDrag: boolean;
 }
 declare const Carousel: import("svelte").Component<Props, {}, "">;
 type Carousel = ReturnType<typeof Carousel>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.6.0",
+	"version": "4.6.2",
 	"watch": {
 		"build": {
 			"patterns": [