flowbite-svelte 0.15.3 → 0.15.6

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 (9) hide show
  1. package/CHANGELOG.md +24 -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/sidebars/Sidebar.svelte +1 -1
  8. package/sidebars/SidebarDropdown.svelte +1 -1
  9. package/types.d.ts +5 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,30 @@
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.6](https://github.com/themesberg/flowbite-svelte/compare/v0.15.5...v0.15.6) (2022-04-27)
6
+
7
+
8
+ ### Features
9
+
10
+ * add iconColor to sidebar and sidebardropdown components ([9b239ba](https://github.com/themesberg/flowbite-svelte/commit/9b239bacd455436c9ab056a730574d3d3404e517))
11
+
12
+ ### [0.15.5](https://github.com/themesberg/flowbite-svelte/compare/v0.15.4...v0.15.5) (2022-04-27)
13
+
14
+
15
+ ### Features
16
+
17
+ * add custom slide controllers to carousel ([8a2a329](https://github.com/themesberg/flowbite-svelte/commit/8a2a329da816bd7d5fff357790d584dbce2aec31))
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * merge conflicts ([0514548](https://github.com/themesberg/flowbite-svelte/commit/0514548ab7d7ca54337434114ac8f2b9239f5e5d))
23
+ * to original Carousel ([5e979ae](https://github.com/themesberg/flowbite-svelte/commit/5e979ae8b58403cdf91b82b236a8e730f02d9cb1))
24
+ * to original Carousel ([198270f](https://github.com/themesberg/flowbite-svelte/commit/198270f623e4c0806a59cf3f9f5dd89430ddc0db))
25
+ * update range page ([edbf37f](https://github.com/themesberg/flowbite-svelte/commit/edbf37f7b2c6ef0109d15bf1e76dcd52bf2b9b05))
26
+
27
+ ### [0.15.4](https://github.com/themesberg/flowbite-svelte/compare/v0.15.3...v0.15.4) (2022-04-26)
28
+
5
29
  ### [0.15.3](https://github.com/themesberg/flowbite-svelte/compare/v0.15.2...v0.15.3) (2022-04-26)
6
30
 
7
31
 
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.3",
3
+ "version": "0.15.6",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "./package/index.js",
6
6
  "author": {
package/sidebars/Sidebar.svelte CHANGED
@@ -20,7 +20,7 @@ export let cta;
20
20
  <li>
21
21
  <a href={link.href} rel={link.rel} class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
22
22
  {#if link.icon}
23
- <svelte:component this={link.icon} size={link.iconSize} class="mr-2 {link.iconClass}" />
23
+ <svelte:component this={link.icon} size={link.iconSize} color={link.iconColor} class="mr-2 {link.iconClass}" />
24
24
  {/if}
25
25
  <span class="ml-3">{link.name}</span>
26
26
  {#if link.subtext}
package/sidebars/SidebarDropdown.svelte CHANGED
@@ -11,7 +11,7 @@ const handleDropdown = (id) => {
11
11
  <li>
12
12
  <button type="button" on:click={() => handleDropdown(link.id)} class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown" data-collapse-toggle="dropdown">
13
13
  {#if link.icon}
14
- <svelte:component this={link.icon} class="mr-4 {link.iconClass}" size={link.iconSize} />
14
+ <svelte:component this={link.icon} class="mr-4 {link.iconClass}" size={link.iconSize} color={link.iconColor} />
15
15
  {/if}
16
16
  <span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item="">{link.name}</span>
17
17
  <svg sidebar-toggle-item="" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
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;
@@ -131,6 +135,7 @@ export declare type SidebarType = {
131
135
  icon?: typeof SvelteComponent;
132
136
  iconSize?: number;
133
137
  iconClass?: string;
138
+ iconColor?: string;
134
139
  rel?: string;
135
140
  children?: SidebarType[];
136
141
  subtext?: HTMLElement;