flowbite-svelte 0.14.14 → 0.14.15

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/carousels/Carousel.svelte +15 -59
  3. package/carousels/Carousel.svelte.d.ts +2 -0
  4. package/carousels/CarouselTransition.svelte +15 -59
  5. package/carousels/CarouselTransition.svelte.d.ts +2 -0
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [0.14.15](https://github.com/themesberg/flowbite-svelte/compare/v0.14.14...v0.14.15) (2022-04-23)
6
+
7
+
8
+ ### Features
9
+
10
+ * add loop to carousel components ([0ae0d66](https://github.com/themesberg/flowbite-svelte/commit/0ae0d66aaf74c7b588978ce88ab7c5117ee4a4e2))
11
+
5
12
  ### [0.14.14](https://github.com/themesberg/flowbite-svelte/compare/v0.14.13...v0.14.14) (2022-04-21)
6
13
 
7
14
 
package/carousels/Carousel.svelte CHANGED
@@ -7,6 +7,8 @@ export let showCaptions = true;
7
7
  export let showThumbs = true;
8
8
  export let images;
9
9
  export let slideControls = true;
10
+ export let loop = false;
11
+ export let duration = 2000;
10
12
  // Carousel
11
13
  export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
12
14
  export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
@@ -37,6 +39,11 @@ const prevSlide = () => {
37
39
  };
38
40
  const goToSlide = (number) => (imageShowingIndex = number);
39
41
  let thumbWidth = 100 / images.length;
42
+ if (loop) {
43
+ setInterval(() => {
44
+ nextSlide();
45
+ }, duration);
46
+ }
40
47
  </script>
41
48
 
42
49
  <div id="default-carousel" class="relative">
@@ -47,64 +54,21 @@ let thumbWidth = 100 / images.length;
47
54
  <!-- Slider indicators -->
48
55
  <div class={indicatorDivClass}>
49
56
  {#each images as { id, imgurl, name, attribution }}
50
- <Indicator
51
- {name}
52
- selected={imageShowingIndex === id}
53
- on:click={() => goToSlide(id)}
54
- {indicatorClass}
55
- />
57
+ <Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} {indicatorClass} />
56
58
  {/each}
57
59
  </div>
58
60
  {/if}
59
61
  {#if slideControls}
60
62
  <!-- Slider controls -->
61
- <button
62
- on:click={prevSlide}
63
- type="button"
64
- class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
65
- data-carousel-prev
66
- >
67
- <span
68
- class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
69
- >
70
- <svg
71
- class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
72
- fill="none"
73
- stroke="currentColor"
74
- viewBox="0 0 24 24"
75
- xmlns="http://www.w3.org/2000/svg"
76
- ><path
77
- stroke-linecap="round"
78
- stroke-linejoin="round"
79
- stroke-width="2"
80
- d="M15 19l-7-7 7-7"
81
- /></svg
82
- >
63
+ <button on:click={prevSlide} type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
64
+ <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
65
+ <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
83
66
  <span class="hidden">Previous</span>
84
67
  </span>
85
68
  </button>
86
- <button
87
- on:click={nextSlide}
88
- type="button"
89
- class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
90
- data-carousel-next
91
- >
92
- <span
93
- class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
94
- >
95
- <svg
96
- class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
97
- fill="none"
98
- stroke="currentColor"
99
- viewBox="0 0 24 24"
100
- xmlns="http://www.w3.org/2000/svg"
101
- ><path
102
- stroke-linecap="round"
103
- stroke-linejoin="round"
104
- stroke-width="2"
105
- d="M9 5l7 7-7 7"
106
- /></svg
107
- >
69
+ <button on:click={nextSlide} type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
70
+ <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
71
+ <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
108
72
  <span class="hidden">Next</span>
109
73
  </span>
110
74
  </button>
@@ -118,15 +82,7 @@ let thumbWidth = 100 / images.length;
118
82
  {#if showThumbs}
119
83
  <div class="flex flex-row justify-center bg-gray-100">
120
84
  {#each images as { id, imgurl, name, attribution }}
121
- <Thumbnail
122
- {thumbWidth}
123
- thumbImg={imgurl}
124
- altTag={name}
125
- titleLink={attribution}
126
- {id}
127
- selected={imageShowingIndex === id}
128
- on:click={() => goToSlide(id)}
129
- />
85
+ <Thumbnail {thumbWidth} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
130
86
  {/each}
131
87
  </div>
132
88
  {/if}
package/carousels/Carousel.svelte.d.ts CHANGED
@@ -6,6 +6,8 @@ declare const __propDef: {
6
6
  showThumbs?: boolean;
7
7
  images: any[];
8
8
  slideControls?: boolean;
9
+ loop?: boolean;
10
+ duration?: number;
9
11
  divClass?: string;
10
12
  indicatorDivClass?: string;
11
13
  captionClass?: string;
package/carousels/CarouselTransition.svelte CHANGED
@@ -10,6 +10,8 @@ export let images;
10
10
  export let slideControls = true;
11
11
  export let transitionType;
12
12
  export let transitionParams = {};
13
+ export let loop = false;
14
+ export let duration = 2000;
13
15
  // have a custom transition function that returns the desired transition
14
16
  function multiple(node, params) {
15
17
  switch (transitionType) {
@@ -53,6 +55,11 @@ const prevSlide = () => {
53
55
  };
54
56
  const goToSlide = (number) => (imageShowingIndex = number);
55
57
  let thumbWidth = 100 / images.length;
58
+ if (loop) {
59
+ setInterval(() => {
60
+ nextSlide();
61
+ }, duration);
62
+ }
56
63
  </script>
57
64
 
58
65
  <div id="default-carousel" class="relative">
@@ -70,64 +77,21 @@ let thumbWidth = 100 / images.length;
70
77
  <!-- Slider indicators -->
71
78
  <div class={indicatorDivClass}>
72
79
  {#each images as { id, imgurl, name, attribution }}
73
- <Indicator
74
- {name}
75
- selected={imageShowingIndex === id}
76
- on:click={() => goToSlide(id)}
77
- {indicatorClass}
78
- />
80
+ <Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} {indicatorClass} />
79
81
  {/each}
80
82
  </div>
81
83
  {/if}
82
84
  {#if slideControls}
83
85
  <!-- Slider controls -->
84
- <button
85
- on:click={prevSlide}
86
- type="button"
87
- class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
88
- data-carousel-prev
89
- >
90
- <span
91
- class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
92
- >
93
- <svg
94
- class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
95
- fill="none"
96
- stroke="currentColor"
97
- viewBox="0 0 24 24"
98
- xmlns="http://www.w3.org/2000/svg"
99
- ><path
100
- stroke-linecap="round"
101
- stroke-linejoin="round"
102
- stroke-width="2"
103
- d="M15 19l-7-7 7-7"
104
- /></svg
105
- >
86
+ <button on:click={prevSlide} type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
87
+ <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
88
+ <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
106
89
  <span class="hidden">Previous</span>
107
90
  </span>
108
91
  </button>
109
- <button
110
- on:click={nextSlide}
111
- type="button"
112
- class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
113
- data-carousel-next
114
- >
115
- <span
116
- class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
117
- >
118
- <svg
119
- class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
120
- fill="none"
121
- stroke="currentColor"
122
- viewBox="0 0 24 24"
123
- xmlns="http://www.w3.org/2000/svg"
124
- ><path
125
- stroke-linecap="round"
126
- stroke-linejoin="round"
127
- stroke-width="2"
128
- d="M9 5l7 7-7 7"
129
- /></svg
130
- >
92
+ <button on:click={nextSlide} type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
93
+ <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
94
+ <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
131
95
  <span class="hidden">Next</span>
132
96
  </span>
133
97
  </button>
@@ -141,15 +105,7 @@ let thumbWidth = 100 / images.length;
141
105
  {#if showThumbs}
142
106
  <div class="flex flex-row justify-center bg-gray-100">
143
107
  {#each images as { id, imgurl, name, attribution }}
144
- <Thumbnail
145
- {thumbWidth}
146
- thumbImg={imgurl}
147
- altTag={name}
148
- titleLink={attribution}
149
- {id}
150
- selected={imageShowingIndex === id}
151
- on:click={() => goToSlide(id)}
152
- />
108
+ <Thumbnail {thumbWidth} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
153
109
  {/each}
154
110
  </div>
155
111
  {/if}
package/carousels/CarouselTransition.svelte.d.ts CHANGED
@@ -9,6 +9,8 @@ declare const __propDef: {
9
9
  slideControls?: boolean;
10
10
  transitionType: TransitionTypes;
11
11
  transitionParams?: TransitionParamTypes;
12
+ loop?: boolean;
13
+ duration?: number;
12
14
  divClass?: string;
13
15
  indicatorDivClass?: string;
14
16
  captionClass?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.14.14",
3
+ "version": "0.14.15",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "./package/index.js",
6
6
  "author": {