flowbite-svelte 0.15.4 → 0.15.5

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 (7) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/carousels/Carousel.svelte +10 -3
  3. package/carousels/Carousel.svelte.d.ts +4 -0
  4. package/carousels/CarouselTransition.svelte +11 -3
  5. package/carousels/CarouselTransition.svelte.d.ts +4 -0
  6. package/package.json +1 -1
  7. package/types.d.ts +4 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,21 @@
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.15.5](https://github.com/themesberg/flowbite-svelte/compare/v0.15.4...v0.15.5) (2022-04-27)
6
+
7
+
8
+ ### Features
9
+
10
+ * add custom slide controllers to carousel ([8a2a329](https://github.com/themesberg/flowbite-svelte/commit/8a2a329da816bd7d5fff357790d584dbce2aec31))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * merge conflicts ([0514548](https://github.com/themesberg/flowbite-svelte/commit/0514548ab7d7ca54337434114ac8f2b9239f5e5d))
16
+ * to original Carousel ([5e979ae](https://github.com/themesberg/flowbite-svelte/commit/5e979ae8b58403cdf91b82b236a8e730f02d9cb1))
17
+ * to original Carousel ([198270f](https://github.com/themesberg/flowbite-svelte/commit/198270f623e4c0806a59cf3f9f5dd89430ddc0db))
18
+ * update range page ([edbf37f](https://github.com/themesberg/flowbite-svelte/commit/edbf37f7b2c6ef0109d15bf1e76dcd52bf2b9b05))
19
+
5
20
  ### [0.15.4](https://github.com/themesberg/flowbite-svelte/compare/v0.15.3...v0.15.4) (2022-04-26)
6
21
 
7
22
  ### [0.15.3](https://github.com/themesberg/flowbite-svelte/compare/v0.15.2...v0.15.3) (2022-04-26)
package/carousels/Carousel.svelte CHANGED
@@ -1,4 +1,5 @@
1
- <script>import Slide from './Slide.svelte';
1
+ <script>import { ChevronRightOutline, ChevronLeftOutline } from 'svelte-heros';
2
+ import Slide from './Slide.svelte';
2
3
  import Thumbnail from './Thumbnail.svelte';
3
4
  import Caption from './Caption.svelte';
4
5
  import Indicator from './Indicator.svelte';
@@ -9,6 +10,12 @@ export let images;
9
10
  export let slideControls = true;
10
11
  export let loop = false;
11
12
  export let duration = 2000;
13
+ export let icons = {
14
+ next: ChevronRightOutline,
15
+ prev: ChevronLeftOutline
16
+ };
17
+ export let iconSize = 24;
18
+ export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
12
19
  // Carousel
13
20
  export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
14
21
  export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
@@ -62,13 +69,13 @@ if (loop) {
62
69
  <!-- Slider controls -->
63
70
  <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
71
  <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>
72
+ <svelte:component this={icons.prev} size={iconSize} class=" {iconClass}" />
66
73
  <span class="hidden">Previous</span>
67
74
  </span>
68
75
  </button>
69
76
  <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
77
  <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>
78
+ <svelte:component this={icons.next} size={iconSize} class=" {iconClass}" />
72
79
  <span class="hidden">Next</span>
73
80
  </span>
74
81
  </button>
package/carousels/Carousel.svelte.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
+ import type { CarouselIconType } from '../types';
2
3
  declare const __propDef: {
3
4
  props: {
4
5
  showIndicators?: boolean;
@@ -8,6 +9,9 @@ declare const __propDef: {
8
9
  slideControls?: boolean;
9
10
  loop?: boolean;
10
11
  duration?: number;
12
+ icons?: CarouselIconType;
13
+ iconSize?: number;
14
+ iconClass?: string;
11
15
  divClass?: string;
12
16
  indicatorDivClass?: string;
13
17
  captionClass?: string;
package/carousels/CarouselTransition.svelte CHANGED
@@ -1,4 +1,5 @@
1
- <script>import { fade, blur, fly, slide } from 'svelte/transition';
1
+ <script>import { ChevronRightOutline, ChevronLeftOutline } from 'svelte-heros';
2
+ import { fade, blur, fly, slide } from 'svelte/transition';
2
3
  import Slide from './Slide.svelte';
3
4
  import Thumbnail from './Thumbnail.svelte';
4
5
  import Caption from './Caption.svelte';
@@ -28,6 +29,13 @@ function multiple(node, params) {
28
29
  // Carousel
29
30
  export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
30
31
  export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
32
+ // Slide controllers
33
+ export let icons = {
34
+ next: ChevronRightOutline,
35
+ prev: ChevronLeftOutline
36
+ };
37
+ export let iconSize = 24;
38
+ export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
31
39
  // Caption
32
40
  export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
33
41
  // Indicator
@@ -85,13 +93,13 @@ if (loop) {
85
93
  <!-- Slider controls -->
86
94
  <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
95
  <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>
96
+ <svelte:component this={icons.prev} size={iconSize} class=" {iconClass}" />
89
97
  <span class="hidden">Previous</span>
90
98
  </span>
91
99
  </button>
92
100
  <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
101
  <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>
102
+ <svelte:component this={icons.next} size={iconSize} class=" {iconClass}" />
95
103
  <span class="hidden">Next</span>
96
104
  </span>
97
105
  </button>
package/carousels/CarouselTransition.svelte.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
+ import type { CarouselIconType } from '../types';
2
3
  import type { TransitionTypes, TransitionParamTypes } from '../types';
3
4
  declare const __propDef: {
4
5
  props: {
@@ -13,6 +14,9 @@ declare const __propDef: {
13
14
  duration?: number;
14
15
  divClass?: string;
15
16
  indicatorDivClass?: string;
17
+ icons?: CarouselIconType;
18
+ iconSize?: number;
19
+ iconClass?: string;
16
20
  captionClass?: string;
17
21
  indicatorClass?: string;
18
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.15.4",
3
+ "version": "0.15.5",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "./package/index.js",
6
6
  "author": {
package/types.d.ts CHANGED
@@ -42,6 +42,10 @@ export declare type CardButtonType = {
42
42
  rel?: string;
43
43
  rounded?: boolean;
44
44
  };
45
+ export declare type CarouselIconType = {
46
+ next: typeof SvelteComponent;
47
+ prev: typeof SvelteComponent;
48
+ };
45
49
  export interface CheckboxType {
46
50
  id: string;
47
51
  label: string;