flowbite-svelte 1.11.5 → 1.11.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/carousel/Carousel.svelte +45 -37
- package/dist/carousel/Carousel.svelte.d.ts +3 -2
- package/dist/carousel/CarouselIndicators.svelte +5 -8
- package/dist/carousel/CarouselIndicators.svelte.d.ts +1 -1
- package/dist/carousel/CarouselSlide.d.ts +1 -1
- package/dist/carousel/CarouselSlide.js +1 -1
- package/dist/carousel/ControlButton.svelte +1 -1
- package/dist/carousel/ControlButton.svelte.d.ts +1 -1
- package/dist/carousel/Controls.svelte +4 -18
- package/dist/carousel/Controls.svelte.d.ts +1 -1
- package/dist/carousel/Slide.svelte +6 -5
- package/dist/carousel/Slide.svelte.d.ts +2 -1
- package/dist/carousel/Thumbnail.svelte +1 -1
- package/dist/carousel/Thumbnail.svelte.d.ts +1 -1
- package/dist/carousel/Thumbnails.svelte +12 -26
- package/dist/carousel/Thumbnails.svelte.d.ts +1 -1
- package/dist/carousel/theme.d.ts +38 -12
- package/dist/carousel/theme.js +18 -4
- package/dist/clipboard/Clipboard.svelte +1 -1
- package/dist/clipboard/Clipboard.svelte.d.ts +1 -1
- package/dist/darkmode/DarkMode.svelte +1 -1
- package/dist/darkmode/DarkMode.svelte.d.ts +1 -1
- package/dist/datepicker/Datepicker.svelte +1 -1
- package/dist/datepicker/Datepicker.svelte.d.ts +1 -1
- package/dist/device-mockups/Android.svelte +1 -1
- package/dist/device-mockups/Android.svelte.d.ts +1 -1
- package/dist/device-mockups/DefaultMockup.svelte +1 -1
- package/dist/device-mockups/DefaultMockup.svelte.d.ts +1 -1
- package/dist/device-mockups/Desktop.svelte +1 -1
- package/dist/device-mockups/Desktop.svelte.d.ts +1 -1
- package/dist/device-mockups/DeviceMockup.svelte +1 -1
- package/dist/device-mockups/DeviceMockup.svelte.d.ts +1 -1
- package/dist/device-mockups/Ios.svelte +1 -1
- package/dist/device-mockups/Ios.svelte.d.ts +1 -1
- package/dist/device-mockups/Laptop.svelte +1 -1
- package/dist/device-mockups/Laptop.svelte.d.ts +1 -1
- package/dist/device-mockups/Smartwatch.svelte +1 -1
- package/dist/device-mockups/Smartwatch.svelte.d.ts +1 -1
- package/dist/device-mockups/Tablet.svelte +1 -1
- package/dist/device-mockups/Tablet.svelte.d.ts +1 -1
- package/dist/drawer/Drawer.svelte +1 -1
- package/dist/drawer/Drawer.svelte.d.ts +1 -1
- package/dist/drawer/Drawerhead.svelte +1 -1
- package/dist/drawer/Drawerhead.svelte.d.ts +1 -1
- package/dist/dropdown/Dropdown.svelte +1 -1
- package/dist/dropdown/Dropdown.svelte.d.ts +1 -1
- package/dist/dropdown/DropdownDivider.svelte +1 -1
- package/dist/dropdown/DropdownDivider.svelte.d.ts +1 -1
- package/dist/dropdown/DropdownGroup.svelte +1 -1
- package/dist/dropdown/DropdownGroup.svelte.d.ts +1 -1
- package/dist/dropdown/DropdownHeader.svelte +1 -1
- package/dist/dropdown/DropdownHeader.svelte.d.ts +1 -1
- package/dist/dropdown/DropdownItem.svelte +1 -1
- package/dist/dropdown/DropdownItem.svelte.d.ts +1 -1
- package/dist/footer/Footer.svelte +1 -1
- package/dist/footer/Footer.svelte.d.ts +1 -1
- package/dist/footer/FooterBrand.svelte +1 -1
- package/dist/footer/FooterBrand.svelte.d.ts +1 -1
- package/dist/footer/FooterCopyright.svelte +1 -1
- package/dist/footer/FooterCopyright.svelte.d.ts +1 -1
- package/dist/footer/FooterIcon.svelte +1 -1
- package/dist/footer/FooterIcon.svelte.d.ts +1 -1
- package/dist/footer/FooterLink.svelte +1 -1
- package/dist/footer/FooterLink.svelte.d.ts +1 -1
- package/dist/footer/FooterLinkGroup.svelte +1 -1
- package/dist/footer/FooterLinkGroup.svelte.d.ts +1 -1
- package/dist/forms/checkbox/CheckboxButton.svelte +1 -1
- package/dist/forms/checkbox/CheckboxButton.svelte.d.ts +1 -1
- package/dist/forms/dropzone/Dropzone.svelte +1 -1
- package/dist/forms/dropzone/Dropzone.svelte.d.ts +1 -1
- package/dist/forms/fileupload/Fileupload.svelte +1 -1
- package/dist/forms/fileupload/Fileupload.svelte.d.ts +1 -1
- package/dist/forms/floating-label/FloatingLabelInput.svelte +1 -1
- package/dist/forms/floating-label/FloatingLabelInput.svelte.d.ts +1 -1
- package/dist/forms/helper/Helper.svelte +1 -1
- package/dist/forms/helper/Helper.svelte.d.ts +1 -1
- package/dist/forms/input-addon/InputAddon.svelte +1 -1
- package/dist/forms/input-addon/InputAddon.svelte.d.ts +1 -1
- package/dist/forms/label/Label.svelte +1 -1
- package/dist/forms/label/Label.svelte.d.ts +1 -1
- package/dist/forms/range/Range.svelte +1 -1
- package/dist/forms/range/Range.svelte.d.ts +1 -1
- package/dist/forms/search/Search.svelte +1 -1
- package/dist/forms/search/Search.svelte.d.ts +1 -1
- package/dist/forms/tags/Tags.svelte +1 -1
- package/dist/forms/tags/Tags.svelte.d.ts +1 -1
- package/dist/forms/textarea/Textarea.svelte +1 -1
- package/dist/forms/textarea/Textarea.svelte.d.ts +1 -1
- package/dist/forms/timepicker/Timepicker.svelte +1 -1
- package/dist/forms/timepicker/Timepicker.svelte.d.ts +1 -1
- package/dist/forms/toggle/Toggle.svelte +1 -1
- package/dist/forms/toggle/Toggle.svelte.d.ts +1 -1
- package/dist/gallery/Gallery.svelte +1 -1
- package/dist/gallery/Gallery.svelte.d.ts +1 -1
- package/dist/indicator/Indicator.svelte +1 -1
- package/dist/indicator/Indicator.svelte.d.ts +1 -1
- package/dist/kbd/Kbd.svelte +1 -1
- package/dist/kbd/Kbd.svelte.d.ts +1 -1
- package/dist/list-group/Listgroup.svelte +1 -1
- package/dist/list-group/Listgroup.svelte.d.ts +1 -1
- package/dist/list-group/ListgroupItem.svelte +1 -1
- package/dist/list-group/ListgroupItem.svelte.d.ts +1 -1
- package/dist/mega-menu/MegaMenu.svelte +1 -1
- package/dist/mega-menu/MegaMenu.svelte.d.ts +1 -1
- package/dist/modal/Modal.svelte +1 -1
- package/dist/modal/Modal.svelte.d.ts +1 -1
- package/dist/navbar/Menu.svelte +1 -1
- package/dist/navbar/Menu.svelte.d.ts +1 -1
- package/dist/navbar/NavBrand.svelte +1 -1
- package/dist/navbar/NavBrand.svelte.d.ts +2 -3
- package/dist/navbar/NavContainer.svelte +1 -1
- package/dist/navbar/NavContainer.svelte.d.ts +1 -1
- package/dist/navbar/NavHamburger.svelte +1 -1
- package/dist/navbar/NavHamburger.svelte.d.ts +1 -1
- package/dist/navbar/NavLi.svelte +1 -1
- package/dist/navbar/NavLi.svelte.d.ts +1 -1
- package/dist/navbar/NavUl.svelte +1 -1
- package/dist/navbar/NavUl.svelte.d.ts +1 -1
- package/dist/navbar/Navbar.svelte +1 -1
- package/dist/navbar/Navbar.svelte.d.ts +1 -1
- package/dist/pagination/Pagination.svelte +1 -1
- package/dist/pagination/Pagination.svelte.d.ts +1 -1
- package/dist/pagination/PaginationButton.svelte +1 -1
- package/dist/pagination/PaginationButton.svelte.d.ts +1 -1
- package/dist/pagination/PaginationItem.svelte +1 -1
- package/dist/pagination/PaginationItem.svelte.d.ts +1 -1
- package/dist/pagination/PaginationNav.svelte +1 -1
- package/dist/pagination/PaginationNav.svelte.d.ts +1 -1
- package/dist/popover/Popover.svelte +1 -1
- package/dist/popover/Popover.svelte.d.ts +1 -1
- package/dist/progress/Progressbar.svelte +1 -1
- package/dist/progress/Progressbar.svelte.d.ts +1 -1
- package/dist/progress/Progressradial.svelte +1 -1
- package/dist/progress/Progressradial.svelte.d.ts +1 -1
- package/dist/rating/AdvancedRating.svelte +1 -1
- package/dist/rating/AdvancedRating.svelte.d.ts +1 -1
- package/dist/rating/CustomIcon.svelte +1 -1
- package/dist/rating/CustomIcon.svelte.d.ts +1 -1
- package/dist/rating/Heart.svelte +1 -1
- package/dist/rating/Heart.svelte.d.ts +1 -1
- package/dist/rating/Rating.svelte +1 -1
- package/dist/rating/Rating.svelte.d.ts +1 -1
- package/dist/rating/RatingComment.svelte +1 -1
- package/dist/rating/RatingComment.svelte.d.ts +1 -1
- package/dist/rating/Review.svelte +1 -1
- package/dist/rating/Review.svelte.d.ts +1 -1
- package/dist/rating/ScoreRating.svelte +1 -1
- package/dist/rating/ScoreRating.svelte.d.ts +1 -1
- package/dist/rating/Star.svelte +1 -1
- package/dist/rating/Star.svelte.d.ts +1 -1
- package/dist/rating/Thumbup.svelte +1 -1
- package/dist/rating/Thumbup.svelte.d.ts +1 -1
- package/dist/sidebar/Sidebar.svelte +1 -1
- package/dist/sidebar/Sidebar.svelte.d.ts +1 -1
- package/dist/sidebar/SidebarBrand.svelte +1 -1
- package/dist/sidebar/SidebarBrand.svelte.d.ts +1 -1
- package/dist/sidebar/SidebarButton.svelte +1 -1
- package/dist/sidebar/SidebarButton.svelte.d.ts +1 -1
- package/dist/sidebar/SidebarCta.svelte +1 -1
- package/dist/sidebar/SidebarCta.svelte.d.ts +1 -1
- package/dist/sidebar/SidebarDropdownWrapper.svelte +1 -1
- package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts +1 -1
- package/dist/sidebar/SidebarGroup.svelte +1 -1
- package/dist/sidebar/SidebarGroup.svelte.d.ts +1 -1
- package/dist/sidebar/SidebarItem.svelte +1 -1
- package/dist/sidebar/SidebarItem.svelte.d.ts +1 -1
- package/dist/skeleton/CardPlaceholder.svelte +1 -1
- package/dist/skeleton/CardPlaceholder.svelte.d.ts +1 -1
- package/dist/skeleton/ImagePlaceholder.svelte +1 -1
- package/dist/skeleton/ImagePlaceholder.svelte.d.ts +1 -1
- package/dist/skeleton/ListPlaceholder.svelte +1 -1
- package/dist/skeleton/ListPlaceholder.svelte.d.ts +1 -1
- package/dist/skeleton/Skeleton.svelte +1 -1
- package/dist/skeleton/Skeleton.svelte.d.ts +1 -1
- package/dist/skeleton/TestimonialPlaceholder.svelte +1 -1
- package/dist/skeleton/TestimonialPlaceholder.svelte.d.ts +1 -1
- package/dist/skeleton/TextPlaceholder.svelte +1 -1
- package/dist/skeleton/TextPlaceholder.svelte.d.ts +1 -1
- package/dist/skeleton/VideoPlaceholder.svelte +1 -1
- package/dist/skeleton/VideoPlaceholder.svelte.d.ts +1 -1
- package/dist/skeleton/WidgetPlaceholder.svelte +1 -1
- package/dist/skeleton/WidgetPlaceholder.svelte.d.ts +1 -1
- package/dist/speed-dial/SpeedDial.svelte +1 -1
- package/dist/speed-dial/SpeedDial.svelte.d.ts +1 -1
- package/dist/speed-dial/SpeedDialButton.svelte +1 -1
- package/dist/speed-dial/SpeedDialButton.svelte.d.ts +1 -1
- package/dist/speed-dial/SpeedDialTrigger.svelte +1 -1
- package/dist/speed-dial/SpeedDialTrigger.svelte.d.ts +1 -1
- package/dist/spinner/Spinner.svelte +1 -1
- package/dist/spinner/Spinner.svelte.d.ts +1 -1
- package/dist/stepindicator/StepIndicator.svelte +1 -1
- package/dist/stepindicator/StepIndicator.svelte.d.ts +1 -1
- package/dist/stepper/BreadcrumbStepper.svelte +1 -1
- package/dist/stepper/BreadcrumbStepper.svelte.d.ts +1 -1
- package/dist/stepper/DetailedStepper.svelte +1 -1
- package/dist/stepper/DetailedStepper.svelte.d.ts +1 -1
- package/dist/stepper/ProgressStepper.svelte +1 -1
- package/dist/stepper/ProgressStepper.svelte.d.ts +1 -1
- package/dist/stepper/Stepper.svelte +1 -1
- package/dist/stepper/Stepper.svelte.d.ts +1 -1
- package/dist/stepper/TimelineStepper.svelte +1 -1
- package/dist/stepper/TimelineStepper.svelte.d.ts +1 -1
- package/dist/stepper/VerticalStepper.svelte +1 -1
- package/dist/stepper/VerticalStepper.svelte.d.ts +1 -1
- package/dist/table/Table.svelte +1 -1
- package/dist/table/Table.svelte.d.ts +1 -1
- package/dist/table/TableBody.svelte +1 -1
- package/dist/table/TableBody.svelte.d.ts +1 -1
- package/dist/table/TableBodyCell.svelte +1 -1
- package/dist/table/TableBodyCell.svelte.d.ts +1 -1
- package/dist/table/TableBodyRow.svelte +1 -1
- package/dist/table/TableBodyRow.svelte.d.ts +1 -1
- package/dist/table/TableHead.svelte +1 -1
- package/dist/table/TableHead.svelte.d.ts +1 -1
- package/dist/table/TableHeadCell.svelte +1 -1
- package/dist/table/TableHeadCell.svelte.d.ts +1 -1
- package/dist/table/TableSearch.svelte +1 -1
- package/dist/table/TableSearch.svelte.d.ts +1 -1
- package/dist/tabs/TabItem.svelte +1 -1
- package/dist/tabs/TabItem.svelte.d.ts +1 -1
- package/dist/tabs/Tabs.svelte +1 -1
- package/dist/tabs/Tabs.svelte.d.ts +1 -1
- package/dist/timeline/Activity.svelte +1 -1
- package/dist/timeline/Activity.svelte.d.ts +1 -1
- package/dist/timeline/ActivityItem.svelte +1 -1
- package/dist/timeline/ActivityItem.svelte.d.ts +1 -1
- package/dist/timeline/Group.svelte +1 -1
- package/dist/timeline/Group.svelte.d.ts +1 -1
- package/dist/timeline/GroupItem.svelte +1 -1
- package/dist/timeline/GroupItem.svelte.d.ts +1 -1
- package/dist/timeline/Timeline.svelte +1 -1
- package/dist/timeline/Timeline.svelte.d.ts +1 -1
- package/dist/timeline/TimelineItem.svelte +1 -1
- package/dist/timeline/TimelineItem.svelte.d.ts +1 -1
- package/dist/toast/Toast.svelte +1 -1
- package/dist/toast/Toast.svelte.d.ts +1 -1
- package/dist/toolbar/Toolbar.svelte +1 -1
- package/dist/toolbar/Toolbar.svelte.d.ts +1 -1
- package/dist/toolbar/ToolbarButton.svelte +1 -1
- package/dist/toolbar/ToolbarButton.svelte.d.ts +1 -1
- package/dist/toolbar/ToolbarGroup.svelte +1 -1
- package/dist/toolbar/ToolbarGroup.svelte.d.ts +1 -1
- package/dist/tooltip/Tooltip.svelte +1 -1
- package/dist/tooltip/Tooltip.svelte.d.ts +1 -1
- package/dist/types.d.ts +10 -12
- package/dist/typography/anchor/A.svelte +1 -1
- package/dist/typography/anchor/A.svelte.d.ts +1 -1
- package/dist/typography/blockquote/Blockquote.svelte +1 -1
- package/dist/typography/blockquote/Blockquote.svelte.d.ts +1 -1
- package/dist/typography/descriptionlist/DescriptionList.svelte +1 -1
- package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts +1 -1
- package/dist/typography/heading/Heading.svelte +1 -1
- package/dist/typography/heading/Heading.svelte.d.ts +1 -1
- package/dist/typography/hr/Hr.svelte +1 -1
- package/dist/typography/hr/Hr.svelte.d.ts +1 -1
- package/dist/typography/img/EnhancedImg.svelte +1 -1
- package/dist/typography/img/EnhancedImg.svelte.d.ts +1 -1
- package/dist/typography/img/Img.svelte +1 -1
- package/dist/typography/img/Img.svelte.d.ts +1 -1
- package/dist/typography/layout/Layout.svelte +1 -1
- package/dist/typography/layout/Layout.svelte.d.ts +1 -1
- package/dist/typography/list/Li.svelte +1 -1
- package/dist/typography/list/Li.svelte.d.ts +1 -1
- package/dist/typography/list/List.svelte +1 -1
- package/dist/typography/list/List.svelte.d.ts +1 -1
- package/dist/typography/mark/Mark.svelte +1 -1
- package/dist/typography/mark/Mark.svelte.d.ts +1 -1
- package/dist/typography/paragraph/P.svelte +1 -1
- package/dist/typography/paragraph/P.svelte.d.ts +1 -1
- package/dist/typography/secondary/Secondary.svelte +1 -1
- package/dist/typography/secondary/Secondary.svelte.d.ts +1 -1
- package/dist/typography/span/Span.svelte +1 -1
- package/dist/typography/span/Span.svelte.d.ts +1 -1
- package/dist/utils/Arrow.svelte +1 -1
- package/dist/utils/Arrow.svelte.d.ts +1 -1
- package/dist/utils/Popper.svelte +1 -1
- package/dist/utils/Popper.svelte.d.ts +1 -1
- package/dist/video/Video.svelte +1 -1
- package/dist/video/Video.svelte.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { type CarouselProps, type
|
|
3
|
-
import { getTheme } from "../theme/themeUtils";
|
|
2
|
+
import { type CarouselProps, type CarouselState, Slide } from "..";
|
|
3
|
+
import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
|
|
4
4
|
import clsx from "clsx";
|
|
5
5
|
import { onMount, setContext } from "svelte";
|
|
6
6
|
import { canChangeSlide } from "./CarouselSlide";
|
|
@@ -8,19 +8,44 @@
|
|
|
8
8
|
|
|
9
9
|
const SLIDE_DURATION_RATIO = 0.25;
|
|
10
10
|
|
|
11
|
-
let { children, slide, images, index = $bindable(0), slideDuration = 1000, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className,
|
|
11
|
+
let { children, slide, images, index = $bindable(0), slideDuration = 1000, slideFit, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className, classes, onchange, isPreload = false, ...restProps }: CarouselProps = $props();
|
|
12
12
|
|
|
13
|
+
warnThemeDeprecation("Carousel", { imgClass }, { imgClass: "slide" });
|
|
14
|
+
|
|
15
|
+
const styling = $derived(classes ?? { slide: imgClass });
|
|
16
|
+
|
|
17
|
+
// // Theme context
|
|
13
18
|
const theme = getTheme("carousel");
|
|
14
19
|
|
|
15
|
-
|
|
20
|
+
let { base, slide: slideCls } = $derived(carousel());
|
|
21
|
+
|
|
22
|
+
const changeSlide = (n: number) => {
|
|
23
|
+
if (images.length === 0) return;
|
|
24
|
+
|
|
25
|
+
if (n % images.length === _state.index) return;
|
|
26
|
+
|
|
27
|
+
if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration: _state.slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return;
|
|
28
|
+
|
|
29
|
+
_state.forward = n >= _state.index;
|
|
30
|
+
_state.index = (images.length + n) % images.length;
|
|
31
|
+
_state.lastSlideChange = Date.now();
|
|
32
|
+
|
|
33
|
+
index = _state.index; // Update the bindable index
|
|
34
|
+
onchange?.(images[_state.index]);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const _state: CarouselState = $state({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: Date.now(), changeSlide });
|
|
16
38
|
|
|
17
39
|
setContext("state", _state);
|
|
18
40
|
|
|
19
41
|
let initialized = false;
|
|
20
42
|
|
|
21
43
|
$effect(() => {
|
|
22
|
-
index
|
|
23
|
-
|
|
44
|
+
changeSlide(index);
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
$effect(() => {
|
|
48
|
+
_state.slideDuration = slideDuration;
|
|
24
49
|
});
|
|
25
50
|
|
|
26
51
|
onMount(() => {
|
|
@@ -28,25 +53,8 @@
|
|
|
28
53
|
initialized = true;
|
|
29
54
|
});
|
|
30
55
|
|
|
31
|
-
const nextSlide = () =>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
_state.forward = true;
|
|
35
|
-
_state.index = _state.index >= images.length - 1 ? 0 : _state.index + 1;
|
|
36
|
-
_state.lastSlideChange = new Date();
|
|
37
|
-
|
|
38
|
-
return _state;
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
const prevSlide = () => {
|
|
42
|
-
if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
|
|
43
|
-
|
|
44
|
-
_state.forward = false;
|
|
45
|
-
_state.index = _state.index <= 0 ? images.length - 1 : _state.index - 1;
|
|
46
|
-
_state.lastSlideChange = new Date();
|
|
47
|
-
|
|
48
|
-
return _state;
|
|
49
|
-
};
|
|
56
|
+
const nextSlide = () => changeSlide(_state.index + 1);
|
|
57
|
+
const prevSlide = () => changeSlide(_state.index - 1);
|
|
50
58
|
|
|
51
59
|
const loop = (node: HTMLElement) => {
|
|
52
60
|
// loop timer
|
|
@@ -79,7 +87,7 @@
|
|
|
79
87
|
|
|
80
88
|
const getPositionFromEvent = (evt: MouseEvent | TouchEvent) => {
|
|
81
89
|
const mousePos = (evt as MouseEvent)?.clientX;
|
|
82
|
-
if (mousePos) return mousePos;
|
|
90
|
+
if (mousePos !== undefined) return mousePos;
|
|
83
91
|
|
|
84
92
|
let touchEvt = evt as TouchEvent;
|
|
85
93
|
if (/^touch/.test(touchEvt?.type)) {
|
|
@@ -164,36 +172,36 @@
|
|
|
164
172
|
|
|
165
173
|
<!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
|
|
166
174
|
<svelte:document onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} />
|
|
167
|
-
<div bind:this={carouselDiv}
|
|
168
|
-
|
|
169
|
-
{
|
|
170
|
-
|
|
171
|
-
{:
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
{@render children?.(index)}
|
|
175
|
+
<div bind:this={carouselDiv} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0" {...restProps} class={base({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme?.base, className) })} {@attach loop}>
|
|
176
|
+
{#if slide}
|
|
177
|
+
{@render slide({ index: _state.index, Slide })}
|
|
178
|
+
{:else}
|
|
179
|
+
<Slide image={images[_state.index]} fit={slideFit} class={slideCls({ class: clsx(theme?.slide, styling.slide) })} {transition} />
|
|
180
|
+
{/if}
|
|
181
|
+
|
|
182
|
+
{@render children?.(_state.index)}
|
|
176
183
|
</div>
|
|
177
184
|
|
|
178
185
|
<!--
|
|
179
186
|
@component
|
|
180
187
|
[Go to docs](https://flowbite-svelte.com/)
|
|
181
188
|
## Type
|
|
182
|
-
[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
189
|
+
[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L373)
|
|
183
190
|
## Props
|
|
184
191
|
@prop children
|
|
185
192
|
@prop slide
|
|
186
193
|
@prop images
|
|
187
194
|
@prop index = $bindable(0)
|
|
188
195
|
@prop slideDuration = 1000
|
|
196
|
+
@prop slideFit
|
|
189
197
|
@prop transition
|
|
190
198
|
@prop duration = 0
|
|
191
199
|
@prop "aria-label": ariaLabel = "Draggable Carousel"
|
|
192
200
|
@prop disableSwipe = false
|
|
193
201
|
@prop imgClass = ""
|
|
194
202
|
@prop class: className
|
|
203
|
+
@prop classes
|
|
195
204
|
@prop onchange
|
|
196
|
-
@prop divClass
|
|
197
205
|
@prop isPreload = false
|
|
198
206
|
@prop ...restProps
|
|
199
207
|
-->
|
|
@@ -2,21 +2,22 @@ import { type CarouselProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L373)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop children
|
|
8
8
|
* @prop slide
|
|
9
9
|
* @prop images
|
|
10
10
|
* @prop index = $bindable(0)
|
|
11
11
|
* @prop slideDuration = 1000
|
|
12
|
+
* @prop slideFit
|
|
12
13
|
* @prop transition
|
|
13
14
|
* @prop duration = 0
|
|
14
15
|
* @prop "aria-label": ariaLabel = "Draggable Carousel"
|
|
15
16
|
* @prop disableSwipe = false
|
|
16
17
|
* @prop imgClass = ""
|
|
17
18
|
* @prop class: className
|
|
19
|
+
* @prop classes
|
|
18
20
|
* @prop onchange
|
|
19
|
-
* @prop divClass
|
|
20
21
|
* @prop isPreload = false
|
|
21
22
|
* @prop ...restProps
|
|
22
23
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { Indicator, type IndicatorsProps, type
|
|
2
|
+
import { Indicator, type IndicatorsProps, type CarouselState } from "..";
|
|
3
3
|
import { getTheme } from "../theme/themeUtils";
|
|
4
4
|
import clsx from "clsx";
|
|
5
5
|
import { getContext } from "svelte";
|
|
@@ -9,21 +9,18 @@
|
|
|
9
9
|
|
|
10
10
|
const theme = getTheme("carouselIndicators");
|
|
11
11
|
|
|
12
|
-
const _state = getContext<
|
|
12
|
+
const _state = getContext<CarouselState>("state");
|
|
13
13
|
const { base, indicator } = $derived(carouselIndicators({ position }));
|
|
14
14
|
|
|
15
15
|
function goToIndex(newIndex: number) {
|
|
16
|
-
|
|
17
|
-
_state.index = newIndex;
|
|
18
|
-
_state.forward = newIndex >= currentIndex;
|
|
19
|
-
_state.lastSlideChange = new Date();
|
|
16
|
+
_state.changeSlide(newIndex);
|
|
20
17
|
}
|
|
21
18
|
</script>
|
|
22
19
|
|
|
23
20
|
<div class={base({ class: clsx(theme?.base, className) })} {...restProps}>
|
|
24
21
|
{#each _state.images as _, idx}
|
|
25
22
|
{@const selected = _state.index === idx}
|
|
26
|
-
<button onclick={() => goToIndex(idx)}>
|
|
23
|
+
<button type="button" onclick={() => goToIndex(idx)} aria-current={selected ? "true" : undefined} aria-label={`Go to slide ${idx + 1}`}>
|
|
27
24
|
{#if children}
|
|
28
25
|
{@render children({ selected, index: idx })}
|
|
29
26
|
{:else}
|
|
@@ -37,7 +34,7 @@
|
|
|
37
34
|
@component
|
|
38
35
|
[Go to docs](https://flowbite-svelte.com/)
|
|
39
36
|
## Type
|
|
40
|
-
[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
37
|
+
[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L388)
|
|
41
38
|
## Props
|
|
42
39
|
@prop children
|
|
43
40
|
@prop activeClass
|
|
@@ -2,7 +2,7 @@ import { type IndicatorsProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L388)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop children
|
|
8
8
|
* @prop activeClass
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export const canChangeSlide = ({ lastSlideChange, slideDuration, slideDurationRatio = 1 }) => {
|
|
2
|
-
if (lastSlideChange &&
|
|
2
|
+
if (lastSlideChange && Date.now() - lastSlideChange < slideDuration * slideDurationRatio) {
|
|
3
3
|
console.warn("Can't change slide yet, too soon");
|
|
4
4
|
return false;
|
|
5
5
|
}
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
@component
|
|
37
37
|
[Go to docs](https://flowbite-svelte.com/)
|
|
38
38
|
## Type
|
|
39
|
-
[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
39
|
+
[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L395)
|
|
40
40
|
## Props
|
|
41
41
|
@prop children
|
|
42
42
|
@prop forward
|
|
@@ -2,7 +2,7 @@ import { type ControlButtonProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L395)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop children
|
|
8
8
|
* @prop forward
|
|
@@ -1,31 +1,17 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { type ControlsProps, type
|
|
2
|
+
import { type ControlsProps, type CarouselState, ControlButton } from "..";
|
|
3
3
|
import { getTheme } from "../theme/themeUtils";
|
|
4
4
|
import clsx from "clsx";
|
|
5
5
|
import { getContext } from "svelte";
|
|
6
|
-
import { canChangeSlide } from "./CarouselSlide";
|
|
7
6
|
|
|
8
7
|
let { children, class: className, ...restProps }: ControlsProps = $props();
|
|
9
8
|
|
|
10
9
|
const theme = getTheme("controlButton");
|
|
11
10
|
|
|
12
|
-
const _state = getContext<
|
|
11
|
+
const _state = getContext<CarouselState>("state");
|
|
13
12
|
|
|
14
13
|
function changeSlide(forward: boolean) {
|
|
15
|
-
|
|
16
|
-
if (!canChangeSlide({ lastSlideChange, slideDuration, slideDurationRatio: 0.75 })) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
if (forward) {
|
|
21
|
-
_state.forward = true;
|
|
22
|
-
_state.index = _state.index >= _state.images.length - 1 ? 0 : _state.index + 1;
|
|
23
|
-
} else {
|
|
24
|
-
_state.forward = false;
|
|
25
|
-
_state.index = _state.index <= 0 ? _state.images.length - 1 : _state.index - 1;
|
|
26
|
-
}
|
|
27
|
-
_state.lastSlideChange = new Date();
|
|
28
|
-
return _state;
|
|
14
|
+
_state.changeSlide(forward ? _state.index + 1 : _state.index - 1);
|
|
29
15
|
}
|
|
30
16
|
</script>
|
|
31
17
|
|
|
@@ -41,7 +27,7 @@
|
|
|
41
27
|
@component
|
|
42
28
|
[Go to docs](https://flowbite-svelte.com/)
|
|
43
29
|
## Type
|
|
44
|
-
[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
30
|
+
[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L401)
|
|
45
31
|
## Props
|
|
46
32
|
@prop children
|
|
47
33
|
@prop class: className
|
|
@@ -2,7 +2,7 @@ import { type ControlsProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L401)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop children
|
|
8
8
|
* @prop class: className
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { type SlideProps, type
|
|
2
|
+
import { type SlideProps, type CarouselState } from "..";
|
|
3
3
|
import { getTheme } from "../theme/themeUtils";
|
|
4
4
|
import clsx from "clsx";
|
|
5
5
|
import { getContext } from "svelte";
|
|
6
6
|
import { fly } from "svelte/transition";
|
|
7
7
|
import { slide } from "./theme";
|
|
8
8
|
|
|
9
|
-
const _state = getContext<
|
|
9
|
+
const _state = getContext<CarouselState>("state");
|
|
10
10
|
|
|
11
|
-
let { image, transition, class: className, ...restProps }: SlideProps = $props();
|
|
11
|
+
let { image, transition, fit, class: className, ...restProps }: SlideProps = $props();
|
|
12
12
|
|
|
13
13
|
const theme = getTheme("slide");
|
|
14
14
|
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
duration: _state.slideDuration
|
|
29
29
|
});
|
|
30
30
|
|
|
31
|
-
let imgClass = slide({ class: clsx(theme, className) });
|
|
31
|
+
let imgClass = $derived(slide({ fit, class: clsx(theme, className) }));
|
|
32
32
|
</script>
|
|
33
33
|
|
|
34
34
|
{#if transition}
|
|
@@ -45,10 +45,11 @@
|
|
|
45
45
|
@component
|
|
46
46
|
[Go to docs](https://flowbite-svelte.com/)
|
|
47
47
|
## Type
|
|
48
|
-
[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
48
|
+
[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L418)
|
|
49
49
|
## Props
|
|
50
50
|
@prop image
|
|
51
51
|
@prop transition
|
|
52
|
+
@prop fit
|
|
52
53
|
@prop class: className
|
|
53
54
|
@prop ...restProps
|
|
54
55
|
-->
|
|
@@ -2,10 +2,11 @@ import { type SlideProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L418)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop image
|
|
8
8
|
* @prop transition
|
|
9
|
+
* @prop fit
|
|
9
10
|
* @prop class: className
|
|
10
11
|
* @prop ...restProps
|
|
11
12
|
*/
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
@component
|
|
16
16
|
[Go to docs](https://flowbite-svelte.com/)
|
|
17
17
|
## Type
|
|
18
|
-
[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
18
|
+
[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L405)
|
|
19
19
|
## Props
|
|
20
20
|
@prop selected
|
|
21
21
|
@prop class: className
|
|
@@ -2,7 +2,7 @@ import { type ThumbnailProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L405)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop selected
|
|
8
8
|
* @prop class: className
|
|
@@ -1,52 +1,38 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import {
|
|
2
|
+
import { Thumbnail, type ThumbnailsProps } from "..";
|
|
3
3
|
import { getTheme } from "../theme/themeUtils";
|
|
4
4
|
import clsx from "clsx";
|
|
5
|
-
import { getContext } from "svelte";
|
|
6
5
|
import { thumbnails } from "./theme";
|
|
7
6
|
|
|
8
7
|
let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: ThumbnailsProps = $props();
|
|
9
8
|
|
|
10
9
|
const theme = getTheme("thumbnails");
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
console.error("State is undefined. Make sure to provide state context or pass it as a prop.");
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
let lastClickedAt = new Date();
|
|
11
|
+
// Initialize so the first click is never throttled
|
|
12
|
+
let lastClickedAt = -Infinity;
|
|
18
13
|
|
|
19
14
|
const btnClick = (newIndex: number) => {
|
|
20
|
-
|
|
15
|
+
const now = Date.now();
|
|
16
|
+
if (now - lastClickedAt < throttleDelay) {
|
|
21
17
|
console.warn("Thumbnail action throttled");
|
|
22
18
|
return;
|
|
23
19
|
}
|
|
24
|
-
if (_state) {
|
|
25
|
-
const currentIndex = _state.index;
|
|
26
|
-
|
|
27
|
-
_state.index = newIndex;
|
|
28
|
-
_state.forward = newIndex >= currentIndex;
|
|
29
|
-
_state.lastSlideChange = new Date();
|
|
30
20
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
} else {
|
|
34
|
-
// Fallback behavior if state is not available
|
|
35
|
-
index = newIndex;
|
|
36
|
-
lastClickedAt = new Date();
|
|
37
|
-
console.warn("State update skipped - no valid state available");
|
|
38
|
-
}
|
|
21
|
+
lastClickedAt = now;
|
|
22
|
+
index = newIndex;
|
|
39
23
|
};
|
|
40
24
|
|
|
41
25
|
$effect(() => {
|
|
42
|
-
|
|
26
|
+
if (images.length > 0) {
|
|
27
|
+
index = (index + images.length) % images.length;
|
|
28
|
+
}
|
|
43
29
|
});
|
|
44
30
|
</script>
|
|
45
31
|
|
|
46
32
|
<div class={thumbnails({ class: clsx(theme, className) })}>
|
|
47
33
|
{#each images as image, idx}
|
|
48
34
|
{@const selected = index === idx}
|
|
49
|
-
<button onclick={() => btnClick(idx)} aria-label={ariaLabel}>
|
|
35
|
+
<button onclick={() => btnClick(idx)} aria-label={ariaLabel} aria-current={selected ? "true" : undefined}>
|
|
50
36
|
{#if children}
|
|
51
37
|
{@render children({ image, selected, imgClass: clsx(imgClass), Thumbnail })}
|
|
52
38
|
{:else}
|
|
@@ -60,7 +46,7 @@
|
|
|
60
46
|
@component
|
|
61
47
|
[Go to docs](https://flowbite-svelte.com/)
|
|
62
48
|
## Type
|
|
63
|
-
[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
49
|
+
[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L409)
|
|
64
50
|
## Props
|
|
65
51
|
@prop children
|
|
66
52
|
@prop images = []
|
|
@@ -2,7 +2,7 @@ import { type ThumbnailsProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L409)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop children
|
|
8
8
|
* @prop images = []
|
package/dist/carousel/theme.d.ts
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
|
+
import type { Classes } from "../theme/themeUtils";
|
|
1
2
|
import { type VariantProps } from "tailwind-variants";
|
|
2
|
-
export type CarouselVariants = VariantProps<typeof carousel>;
|
|
3
|
-
export declare const carousel: import("tailwind-variants").TVReturnType<{},
|
|
3
|
+
export type CarouselVariants = VariantProps<typeof carousel> & Classes<typeof carousel>;
|
|
4
|
+
export declare const carousel: import("tailwind-variants").TVReturnType<{}, {
|
|
5
|
+
base: string;
|
|
6
|
+
slide: string;
|
|
7
|
+
}, undefined, {}, {
|
|
8
|
+
base: string;
|
|
9
|
+
slide: string;
|
|
10
|
+
}, import("tailwind-variants").TVReturnType<{}, {
|
|
11
|
+
base: string;
|
|
12
|
+
slide: string;
|
|
13
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
4
14
|
export declare const carouselIndicators: import("tailwind-variants").TVReturnType<{
|
|
5
15
|
selected: {
|
|
6
16
|
true: {
|
|
@@ -17,9 +27,6 @@ export declare const carouselIndicators: import("tailwind-variants").TVReturnTyp
|
|
|
17
27
|
bottom: {
|
|
18
28
|
base: string;
|
|
19
29
|
};
|
|
20
|
-
withThumbnails: {
|
|
21
|
-
base: string;
|
|
22
|
-
};
|
|
23
30
|
};
|
|
24
31
|
}, {
|
|
25
32
|
base: string;
|
|
@@ -40,9 +47,6 @@ export declare const carouselIndicators: import("tailwind-variants").TVReturnTyp
|
|
|
40
47
|
bottom: {
|
|
41
48
|
base: string;
|
|
42
49
|
};
|
|
43
|
-
withThumbnails: {
|
|
44
|
-
base: string;
|
|
45
|
-
};
|
|
46
50
|
};
|
|
47
51
|
}, {
|
|
48
52
|
base: string;
|
|
@@ -63,9 +67,6 @@ export declare const carouselIndicators: import("tailwind-variants").TVReturnTyp
|
|
|
63
67
|
bottom: {
|
|
64
68
|
base: string;
|
|
65
69
|
};
|
|
66
|
-
withThumbnails: {
|
|
67
|
-
base: string;
|
|
68
|
-
};
|
|
69
70
|
};
|
|
70
71
|
}, {
|
|
71
72
|
base: string;
|
|
@@ -113,4 +114,29 @@ export declare const thumbnail: import("tailwind-variants").TVReturnType<{
|
|
|
113
114
|
false: string;
|
|
114
115
|
};
|
|
115
116
|
}, undefined, "", unknown, unknown, undefined>>;
|
|
116
|
-
export
|
|
117
|
+
export type SlideVariants = VariantProps<typeof slide>;
|
|
118
|
+
export declare const slide: import("tailwind-variants").TVReturnType<{
|
|
119
|
+
fit: {
|
|
120
|
+
contain: string;
|
|
121
|
+
cover: string;
|
|
122
|
+
fill: string;
|
|
123
|
+
none: string;
|
|
124
|
+
"scale-down": string;
|
|
125
|
+
};
|
|
126
|
+
}, undefined, "absolute block w-full h-full", {
|
|
127
|
+
fit: {
|
|
128
|
+
contain: string;
|
|
129
|
+
cover: string;
|
|
130
|
+
fill: string;
|
|
131
|
+
none: string;
|
|
132
|
+
"scale-down": string;
|
|
133
|
+
};
|
|
134
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
135
|
+
fit: {
|
|
136
|
+
contain: string;
|
|
137
|
+
cover: string;
|
|
138
|
+
fill: string;
|
|
139
|
+
none: string;
|
|
140
|
+
"scale-down": string;
|
|
141
|
+
};
|
|
142
|
+
}, undefined, "absolute block w-full h-full", unknown, unknown, undefined>>;
|
package/dist/carousel/theme.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { tv } from "tailwind-variants";
|
|
2
2
|
export const carousel = tv({
|
|
3
|
-
|
|
3
|
+
slots: {
|
|
4
|
+
base: "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96",
|
|
5
|
+
slide: ""
|
|
6
|
+
},
|
|
4
7
|
variants: {},
|
|
5
8
|
compoundVariants: [],
|
|
6
9
|
defaultVariants: {}
|
|
@@ -17,8 +20,7 @@ export const carouselIndicators = tv({
|
|
|
17
20
|
},
|
|
18
21
|
position: {
|
|
19
22
|
top: { base: "top-5" },
|
|
20
|
-
bottom: { base: "bottom-5" }
|
|
21
|
-
withThumbnails: { base: "bottom-24" }
|
|
23
|
+
bottom: { base: "bottom-5" }
|
|
22
24
|
}
|
|
23
25
|
}
|
|
24
26
|
});
|
|
@@ -50,5 +52,17 @@ export const thumbnail = tv({
|
|
|
50
52
|
}
|
|
51
53
|
});
|
|
52
54
|
export const slide = tv({
|
|
53
|
-
base: "absolute block w-full
|
|
55
|
+
base: "absolute block w-full h-full",
|
|
56
|
+
variants: {
|
|
57
|
+
fit: {
|
|
58
|
+
contain: "object-contain",
|
|
59
|
+
cover: "object-cover",
|
|
60
|
+
fill: "object-fill",
|
|
61
|
+
none: "object-none",
|
|
62
|
+
"scale-down": "object-scale-down"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
defaultVariants: {
|
|
66
|
+
fit: "cover"
|
|
67
|
+
}
|
|
54
68
|
});
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
@component
|
|
47
47
|
[Go to docs](https://flowbite-svelte.com/)
|
|
48
48
|
## Type
|
|
49
|
-
[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
49
|
+
[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L430)
|
|
50
50
|
## Props
|
|
51
51
|
@prop children
|
|
52
52
|
@prop embedded = false
|
|
@@ -2,7 +2,7 @@ import { type ClipboardProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L430)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop children
|
|
8
8
|
* @prop embedded = false
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
@component
|
|
65
65
|
[Go to docs](https://flowbite-svelte.com/)
|
|
66
66
|
## Type
|
|
67
|
-
[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
67
|
+
[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L439)
|
|
68
68
|
## Props
|
|
69
69
|
@prop class: className
|
|
70
70
|
@prop lightIcon
|
|
@@ -2,7 +2,7 @@ import { type DarkmodeProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L439)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop class: className
|
|
8
8
|
* @prop lightIcon
|
|
@@ -466,7 +466,7 @@
|
|
|
466
466
|
@component
|
|
467
467
|
[Go to docs](https://flowbite-svelte.com/)
|
|
468
468
|
## Type
|
|
469
|
-
[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
469
|
+
[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
|
|
470
470
|
## Props
|
|
471
471
|
@prop value = $bindable()
|
|
472
472
|
@prop defaultDate = null
|
|
@@ -2,7 +2,7 @@ import { type DatepickerProps } from "..";
|
|
|
2
2
|
/**
|
|
3
3
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
4
|
* ## Type
|
|
5
|
-
* [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
5
|
+
* [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
|
|
6
6
|
* ## Props
|
|
7
7
|
* @prop value = $bindable()
|
|
8
8
|
* @prop defaultDate = null
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
@component
|
|
40
40
|
[Go to docs](https://flowbite-svelte.com/)
|
|
41
41
|
## Type
|
|
42
|
-
[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#
|
|
42
|
+
[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L503)
|
|
43
43
|
## Props
|
|
44
44
|
@prop children
|
|
45
45
|
@prop class: className
|