flowbite-svelte 0.15.0 → 0.15.3

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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)
+
+
+### Bug Fixes
+
+* update svelte-simples ([f958721](https://github.com/themesberg/flowbite-svelte/commit/f9587219ff3da038ee76c6d3b8483dfb2dddc856))
+
+### [0.15.1](https://github.com/themesberg/flowbite-svelte/compare/v0.15.0...v0.15.1) (2022-04-26)
+
 ## [0.15.0](https://github.com/themesberg/flowbite-svelte/compare/v0.14.17...v0.15.0) (2022-04-25)
 
 

package/accordions/AccordionItem.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
 import collapse from 'svelte-collapse';
-import { ChevronDownIconSolid, ChevronUpIconSolid } from '@codewithshin/svelte-heroicons';
+import { ChevronDownSolid, ChevronUpSolid } from 'svelte-heros';
 export let id = '';
 export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
 export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
@@ -24,9 +24,9 @@ const handleToggle = () => {
 	<button on:click={handleToggle} type="button" class:rounded-t-xl={id === '1'} class:border-t-0={id !== '1'} class={btnClass}>
 		<span><slot name="header" /></span>
 		{#if params.open}
-			<ChevronUpIconSolid />
+			<ChevronUpSolid />
 		{:else}
-			<ChevronDownIconSolid />
+			<ChevronDownSolid />
 		{/if}
 	</button>
 </h2>

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.0",
+  "version": "0.15.3",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -14,7 +14,6 @@
   "devDependencies": {
     "@codewithshin/svelte-feathericons": "^0.1.9",
     "@codewithshin/svelte-sidebar": "^0.4.8",
-    "@codewithshin/svelte-simpleicons": "^0.2.2",
     "@codewithshin/svelte-utterances": "^0.2.2",
     "@playwright/test": "^1.21.0",
     "@sveltejs/adapter-auto": "next",
@@ -35,6 +34,7 @@
     "svelte": "^3.47.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.5",
+    "svelte-simples": "^0.3.1",
     "svelte2tsx": "^0.5.9",
     "tailwindcss": "^3.0.23",
     "tslib": "^2.3.1",
@@ -78,9 +78,9 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@codewithshin/svelte-heroicons": "^1.2.0",
     "flowbite": "^1.4.2",
-    "svelte-collapse": "^0.0.4"
+    "svelte-collapse": "^0.0.4",
+    "svelte-heros": "^2.0.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -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/ratings/Rating.svelte

@@ -1,4 +1,4 @@
-<script>import { StarIconSolid } from '@codewithshin/svelte-heroicons';
+<script>import { StarSolid } from 'svelte-heros';
 export let divClass = 'flex items-center';
 export let total = 5;
 export let rating = 4;
@@ -11,12 +11,12 @@ let grayStars = total - roundedRating;
 <div class={divClass}>
 	{#each Array(roundedRating) as _, star}
 		<slot name="ratingUp">
-			<StarIconSolid class="text-yellow-300 dark:text-yellow-200" />
+			<StarSolid class="text-yellow-300 dark:text-yellow-200" />
 		</slot>
 	{/each}
 	{#each Array(grayStars) as _, star}
 		<slot name="ratingDown">
-			<StarIconSolid class="text-gray-300 dark:text-gray-500" />
+			<StarSolid class="text-gray-300 dark:text-gray-500" />
 		</slot>
 	{/each}
 	{#if $$slots.text}