flowbite-svelte 0.15.2 → 0.15.5

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 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.
 
+### [0.15.5](https://github.com/themesberg/flowbite-svelte/compare/v0.15.4...v0.15.5) (2022-04-27)
+
+
+### Features
+
+* add custom slide controllers to carousel ([8a2a329](https://github.com/themesberg/flowbite-svelte/commit/8a2a329da816bd7d5fff357790d584dbce2aec31))
+
+
+### Bug Fixes
+
+* merge conflicts ([0514548](https://github.com/themesberg/flowbite-svelte/commit/0514548ab7d7ca54337434114ac8f2b9239f5e5d))
+* to original Carousel ([5e979ae](https://github.com/themesberg/flowbite-svelte/commit/5e979ae8b58403cdf91b82b236a8e730f02d9cb1))
+* to original Carousel ([198270f](https://github.com/themesberg/flowbite-svelte/commit/198270f623e4c0806a59cf3f9f5dd89430ddc0db))
+* update range page ([edbf37f](https://github.com/themesberg/flowbite-svelte/commit/edbf37f7b2c6ef0109d15bf1e76dcd52bf2b9b05))
+
+### [0.15.4](https://github.com/themesberg/flowbite-svelte/compare/v0.15.3...v0.15.4) (2022-04-26)
+
+### [0.15.3](https://github.com/themesberg/flowbite-svelte/compare/v0.15.2...v0.15.3) (2022-04-26)
+
+
+### Features
+
+* add range input ([215439f](https://github.com/themesberg/flowbite-svelte/commit/215439fc529856ecc8c72965cd39d7aff12d3eb7))
+
 ### [0.15.2](https://github.com/themesberg/flowbite-svelte/compare/v0.15.1...v0.15.2) (2022-04-26)
 
 

package/carousels/Carousel.svelte

@@ -1,4 +1,5 @@
-<script>import Slide from './Slide.svelte';
+<script>import { ChevronRightOutline, ChevronLeftOutline } from 'svelte-heros';
+import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
 import Indicator from './Indicator.svelte';
@@ -9,6 +10,12 @@ export let images;
 export let slideControls = true;
 export let loop = false;
 export let duration = 2000;
+export let icons = {
+    next: ChevronRightOutline,
+    prev: ChevronLeftOutline
+};
+export let iconSize = 24;
+export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 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) {
 		<!-- Slider controls -->
 		<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>
 			<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">
-				<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>
+				<svelte:component this={icons.prev} size={iconSize} class=" {iconClass}" />
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
 		<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>
 			<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">
-				<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>
+				<svelte:component this={icons.next} size={iconSize} class=" {iconClass}" />
 				<span class="hidden">Next</span>
 			</span>
 		</button>

package/carousels/Carousel.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { CarouselIconType } from '../types';
 declare const __propDef: {
     props: {
         showIndicators?: boolean;
@@ -8,6 +9,9 @@ declare const __propDef: {
         slideControls?: boolean;
         loop?: boolean;
         duration?: number;
+        icons?: CarouselIconType;
+        iconSize?: number;
+        iconClass?: string;
         divClass?: string;
         indicatorDivClass?: string;
         captionClass?: string;

package/carousels/CarouselTransition.svelte

@@ -1,4 +1,5 @@
-<script>import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import { ChevronRightOutline, ChevronLeftOutline } from 'svelte-heros';
+import { fade, blur, fly, slide } from 'svelte/transition';
 import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
@@ -28,6 +29,13 @@ function multiple(node, params) {
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+// Slide controllers
+export let icons = {
+    next: ChevronRightOutline,
+    prev: ChevronLeftOutline
+};
+export let iconSize = 24;
+export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
 // Caption
 export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
 // Indicator
@@ -85,13 +93,13 @@ if (loop) {
 		<!-- Slider controls -->
 		<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>
 			<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">
-				<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>
+				<svelte:component this={icons.prev} size={iconSize} class=" {iconClass}" />
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
 		<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>
 			<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">
-				<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>
+				<svelte:component this={icons.next} size={iconSize} class=" {iconClass}" />
 				<span class="hidden">Next</span>
 			</span>
 		</button>

package/carousels/CarouselTransition.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { CarouselIconType } from '../types';
 import type { TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
@@ -13,6 +14,9 @@ declare const __propDef: {
         duration?: number;
         divClass?: string;
         indicatorDivClass?: string;
+        icons?: CarouselIconType;
+        iconSize?: number;
+        iconClass?: string;
         captionClass?: string;
         indicatorClass?: string;
     };

package/forms/Range.svelte

@@ -0,0 +1,21 @@
+<script>export let id = 'range';
+export let label = 'Range';
+export let min;
+export let max;
+export let value;
+export let step;
+export let size;
+let inputClass = 'w-full h-2 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700';
+if (size === 'small') {
+    inputClass = 'w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700';
+}
+else if (size === 'large') {
+    inputClass = 'w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg dark:bg-gray-700';
+}
+else {
+    inputClass = 'w-full h-2 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700';
+}
+</script>
+
+<label for={id} class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">{label}</label>
+<input {id} name={id} type="range" {min} {max} bind:value {step} class={inputClass} {...$$restProps} />

package/forms/Range.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id?: string;
+        label?: string;
+        min: number;
+        max: number;
+        value: number;
+        step: number;
+        size: 'small' | 'large';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RangeProps = typeof __propDef.props;
+export declare type RangeEvents = typeof __propDef.events;
+export declare type RangeSlots = typeof __propDef.slots;
+export default class Range extends SvelteComponentTyped<RangeProps, RangeEvents, RangeSlots> {
+}
+export {};

package/index.js

@@ -70,6 +70,7 @@ export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte
 export { default as Iconinput } from './forms/Iconinput.svelte'
 export { default as Input } from './forms/Input.svelte'
 export { default as Radio } from './forms/Radio.svelte'
+export { default as Range } from './forms/Range.svelte'
 export { default as SingleCheckbox } from './forms/SingleCheckbox.svelte'
 export { default as Select } from './forms/Select.svelte'
 export { default as Textarea } from './forms/Textarea.svelte'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.2",
+  "version": "0.15.5",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -135,6 +135,7 @@
     "./forms/Iconinput.svelte": "./forms/Iconinput.svelte",
     "./forms/Input.svelte": "./forms/Input.svelte",
     "./forms/Radio.svelte": "./forms/Radio.svelte",
+    "./forms/Range.svelte": "./forms/Range.svelte",
     "./forms/Select.svelte": "./forms/Select.svelte",
     "./forms/SingleCheckbox.svelte": "./forms/SingleCheckbox.svelte",
     "./forms/Textarea.svelte": "./forms/Textarea.svelte",

package/types.d.ts

@@ -42,6 +42,10 @@ export declare type CardButtonType = {
     rel?: string;
     rounded?: boolean;
 };
+export declare type CarouselIconType = {
+    next: typeof SvelteComponent;
+    prev: typeof SvelteComponent;
+};
 export interface CheckboxType {
     id: string;
     label: string;