flowbite-svelte 0.15.2 → 0.15.3

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.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/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.3",
   "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",