flowbite-svelte 0.15.8 → 0.15.9

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.9](https://github.com/themesberg/flowbite-svelte/compare/v0.15.8...v0.15.9) (2022-04-30)
+
+
+### Features
+
+* add color and size to Toggle component ([6595bb3](https://github.com/themesberg/flowbite-svelte/commit/6595bb38d95ae42862d134fee979ae97b66ab911))
+
 ### [0.15.8](https://github.com/themesberg/flowbite-svelte/compare/v0.15.7...v0.15.8) (2022-04-29)
 
 

package/forms/Toggle.svelte

@@ -1,16 +1,47 @@
 <script>import generateId from '../utils/generateId.js';
 export let name = 'toggle-example';
+export let color;
+export let size = 'default';
 export let id = generateId();
 export let label = 'Toggle me';
+export let value;
 export let checked = false;
 export let disabled = false;
-export let labelClass = 'flex relative items-center mb-4 cursor-pointer';
+export let labelClass = 'relative inline-flex items-center cursor-pointer';
 export let divClass = 'w-11 h-6 bg-gray-200 rounded-full border border-gray-200 toggle-bg dark:bg-gray-700 dark:border-gray-600';
+export let inputClass = 'sr-only';
+if (color || size) {
+    inputClass += ' peer';
+}
 export let spanClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
+if (color === 'red') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600";
+}
+else if (color === 'green') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600";
+}
+else if (color === 'purple') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600";
+}
+else if (color === 'yellow') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-yellow-400";
+}
+else if (color === 'teal') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600";
+}
+else if (color === 'orange') {
+    divClass = "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-orange-500";
+}
+else if (size === 'small') {
+    divClass = "w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
+}
+else if (size === 'large') {
+    divClass = "w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
+}
 </script>
 
 <label for={id} class={labelClass}>
-	<input type="checkbox" {id} class="sr-only" {checked} {name} {disabled} />
-	<div class={divClass} />
+	<input type="checkbox" {id} class={inputClass} {value} {checked} {name} {disabled} />
+	<div class="{divClass} {$$props.class}" />
 	<span class={spanClass}>{label}</span>
 </label>

package/forms/Toggle.svelte.d.ts

@@ -1,13 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ToggleColorType } from '../types.js';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         name?: string;
+        color: ToggleColorType;
+        size?: 'small' | 'default' | 'large';
         id?: string;
         label?: string;
+        value: string;
         checked?: boolean;
         disabled?: boolean;
         labelClass?: string;
         divClass?: string;
+        inputClass?: string;
         spanClass?: string;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.8",
+  "version": "0.15.9",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {

package/types.d.ts

@@ -196,6 +196,7 @@ export interface TimelineItemHorizontalType {
     iconClass?: string;
     text?: HTMLElement | string;
 }
+export declare type ToggleColorType = 'red' | 'green' | 'purple' | 'yellow' | 'teal' | 'orange';
 export interface TransitionParamTypes {
     delay?: number;
     duration?: number;