flowbite-svelte 0.27.16 → 0.28.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.28.0](https://github.com/themesberg/flowbite-svelte/compare/v0.27.17...v0.28.0) (2022-11-20)
+
+
+### Features
+
+* enhance DarkMode ([#437](https://github.com/themesberg/flowbite-svelte/issues/437)) ([9afd3e1](https://github.com/themesberg/flowbite-svelte/commit/9afd3e11bec5bc4416537d7d371f970dd414a394))
+
+
+### Bug Fixes
+
+* checkbox initial checked ([#434](https://github.com/themesberg/flowbite-svelte/issues/434)) ([43663cf](https://github.com/themesberg/flowbite-svelte/commit/43663cf165f249c7e3fa7e7dc8ccfaccc7e467a6))
+* floatinginput type changes ([#436](https://github.com/themesberg/flowbite-svelte/issues/436)) ([5af9ecf](https://github.com/themesberg/flowbite-svelte/commit/5af9ecf598800e4cbcf27e413ba0b63d82926219))
+* og:image and twitter:image to replace spaces with - ([#441](https://github.com/themesberg/flowbite-svelte/issues/441)) ([25ad6d0](https://github.com/themesberg/flowbite-svelte/commit/25ad6d09816e1df3a5a8ddd9a901186d2a36f4ee))
+
+### [0.27.17](https://github.com/themesberg/flowbite-svelte/compare/v0.27.16...v0.27.17) (2022-11-18)
+
+
+### Features
+
+* add SpeedDial component ([a959c5e](https://github.com/themesberg/flowbite-svelte/commit/a959c5edd96e56145453f0558f19be7f7a7fa8b5))
+
+
+### Bug Fixes
+
+* checkbox group ([#427](https://github.com/themesberg/flowbite-svelte/issues/427)) ([58c6660](https://github.com/themesberg/flowbite-svelte/commit/58c66600abcb943c730dbd64e6e4ca920bc06f8e))
+
 ### [0.27.16](https://github.com/themesberg/flowbite-svelte/compare/v0.27.15...v0.27.16) (2022-11-14)
 
 ### [0.27.15](https://github.com/themesberg/flowbite-svelte/compare/v0.27.14...v0.27.15) (2022-11-13)

package/buttons/Button.svelte

@@ -50,6 +50,7 @@ const coloredShadowClasses = {
 };
 const outlineClasses = {
     blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
+    light: "text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-400",
     dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white focus:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
     green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
     red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',

package/darkmode/DarkMode.svelte

@@ -1,4 +1,5 @@
-<script>export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
+<script>import classNames from 'classnames';
+export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
 const toggleTheme = () => {
     const isDark = window.document.documentElement.classList.toggle('dark');
     localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
@@ -16,19 +17,28 @@ const toggleTheme = () => {
   </script>
 </svelte:head>
 
-<button on:click={toggleTheme} aria-label="Dark mode" type="button" class={btnClass}>
+<button
+  on:click={toggleTheme}
+  aria-label="Dark mode"
+  type="button"
+  {...$$restProps}
+  class={classNames(btnClass, $$props.class)}>
   <span class="hidden dark:block">
-    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
+    <slot name="lightIcon">
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
   0 100-2H3a1 1 0 000 2h1z"
-        fill-rule="evenodd"
-        clip-rule="evenodd" />
-    </svg>
+          fill-rule="evenodd"
+          clip-rule="evenodd" />
+      </svg>
+    </slot>
   </span>
   <span class="dark:hidden">
-    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-    </svg>
+    <slot name="darkIcon">
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+      </svg>
+    </slot>
   </span>
 </button>

package/darkmode/DarkMode.svelte.d.ts

@@ -1,12 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         btnClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        lightIcon: {};
+        darkIcon: {};
+    };
 };
 export declare type DarkModeProps = typeof __propDef.props;
 export declare type DarkModeEvents = typeof __propDef.events;

package/forms/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import Radio, { labelClass, inputClass } from './Radio.svelte';
+import { labelClass, inputClass } from './Radio.svelte';
 import Label from './Label.svelte';
 // properties forwarding
 export let color = 'blue';
@@ -10,7 +10,16 @@ export let value = '';
 export let checked = false;
 // tinted if put in component having its own background
 let background = getContext('background');
-$: {
+// react on external group changes
+function init(_, _group) {
+    checked = checked || _group.includes(value);
+    return {
+        update(_group) {
+            checked = _group.includes(value);
+        }
+    };
+}
+function onChange() {
     // There's a bug in Svelte and bind:group is not working with wrapped checkbox
     // This workaround is taken from:
     // https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
@@ -34,6 +43,7 @@ $: {
 
 <Label class={labelClass(inline, $$props.class)} show={!!$$slots.default}>
   <input
+    use:init={group}
     type="checkbox"
     bind:checked
     on:keyup
@@ -46,6 +56,8 @@ $: {
     on:mouseenter
     on:mouseleave
     on:paste
+    on:change={onChange}
+    on:change
     {value}
     {...$$restProps}
     class={inputClass(custom, color, true, background, $$slots.default || $$props.class)} /><slot />

package/forms/Checkbox.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
         paste: ClipboardEvent;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/forms/FloatingLabelInput.svelte

@@ -61,9 +61,15 @@ const labelColorClasses = {
     red: 'text-red-600 dark:text-red-500'
 };
 // you need to this to avoid 2-way binding
-function setType(node) {
-    node.type = type;
+function setType(node, _type) {
+    node.type = _type;
+    return {
+        update(_type) {
+            node.type = _type;
+        }
+    };
 }
+;
 </script>
 
 <div class={divClasses[style]}>
@@ -82,7 +88,7 @@ function setType(node) {
 		on:mouseleave
 		on:mouseover
 		on:paste
-		use:setType
+		use:setType={type}
 		placeholder=" "
 		class={classNames(
 			inputClasses[style],

package/forms/Toggle.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        change: CustomEvent<any>;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/index.d.ts

@@ -81,6 +81,8 @@ export { default as TestimonialPlaceholder } from './skeleton/TestimonialPlaceho
 export { default as TextPlaceholder } from './skeleton/TextPlaceholder.svelte';
 export { default as VideoPlaceholder } from './skeleton/VideoPlaceholder.svelte';
 export { default as WidgetPlaceholder } from './skeleton/WidgetPlaceholder.svelte';
+export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
+export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
 export { default as Spinner } from './spinners/Spinner.svelte';
 export { default as Table } from './tables/Table.svelte';
 export { default as TableBody } from './tables/TableBody.svelte';

package/index.js

@@ -107,6 +107,9 @@ export { default as TestimonialPlaceholder } from './skeleton/TestimonialPlaceho
 export { default as TextPlaceholder } from './skeleton/TextPlaceholder.svelte';
 export { default as VideoPlaceholder } from './skeleton/VideoPlaceholder.svelte';
 export { default as WidgetPlaceholder } from './skeleton/WidgetPlaceholder.svelte';
+// Speed dial
+export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
+export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
 // Spin
 export { default as Spinner } from './spinners/Spinner.svelte';
 // Tables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.27.16",
+  "version": "0.28.0",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -12,33 +12,33 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.25.0",
+    "@playwright/test": "^1.27.1",
     "@sveltejs/adapter-vercel": "1.0.0-next.78",
-    "@sveltejs/kit": "1.0.0-next.484",
+    "@sveltejs/kit": "next",
     "@sveltejs/package": "1.0.0-next.3",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "autoprefixer": "^10.4.7",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "autoprefixer": "^10.4.13",
     "createprops": "^0.4.9",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.2",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.19",
     "postcss-load-config": "^4.0.1",
-    "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-svelte": "^2.8.0",
     "prism-themes": "^1.9.0",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.7.1",
+    "svelte": "^3.53.1",
+    "svelte-check": "^2.9.2",
     "svelte-meta-tags": "^2.6.3",
     "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.18",
-    "tailwindcss": "^3.1.5",
-    "tslib": "^2.3.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.1.0"
+    "svelte2tsx": "^0.5.20",
+    "tailwindcss": "^3.2.4",
+    "tslib": "^2.4.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.2.3"
   },
   "type": "module",
   "keywords": [
@@ -196,6 +196,8 @@
     "./skeleton/TextPlaceholder.svelte": "./skeleton/TextPlaceholder.svelte",
     "./skeleton/VideoPlaceholder.svelte": "./skeleton/VideoPlaceholder.svelte",
     "./skeleton/WidgetPlaceholder.svelte": "./skeleton/WidgetPlaceholder.svelte",
+    "./speed-dial/SpeedDial.svelte": "./speed-dial/SpeedDial.svelte",
+    "./speed-dial/SpeedDialButton.svelte": "./speed-dial/SpeedDialButton.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
     "./tables/TableBody.svelte": "./tables/TableBody.svelte",

package/speed-dial/SpeedDial.svelte

@@ -0,0 +1,44 @@
+<script context="module">export {};
+</script>
+
+<script>import classNames from 'classnames';
+import Button from '../buttons/Button.svelte';
+import Popper from '../utils/Popper.svelte';
+import { setContext } from 'svelte';
+import generateId from '../utils/generateId';
+export let defaultClass = 'fixed right-6 bottom-6';
+export let placement = 'top';
+export let pill = true;
+export let tooltip = 'left';
+export let trigger = 'hover';
+export let textOutside = false;
+export let id = generateId();
+setContext('speed-dial', { pill, tooltip, textOutside });
+let divClass;
+$: divClass = classNames(defaultClass, 'group', $$props.class);
+let poperClass;
+$: poperClass = classNames('flex items-center mb-4 gap-2', ['top', 'bottom'].includes(placement) && 'flex-col');
+</script>
+
+<div class={divClass}>
+  <Button {pill} name="Open actions menu" aria-controls={id} aria-expanded="false" color="blue" class="!p-3">
+    <slot name="icon">
+      <svg
+        aria-hidden="true"
+        class="w-8 h-8 transition-transform group-hover:rotate-45"
+        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="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>
+    </slot>
+    <span class="sr-only">Open actions menu</span>
+  </Button>
+  <Popper {id} {trigger} arrow={false} color="none" activeContent {placement} class={poperClass}>
+    <slot />
+  </Popper>
+</div>

package/speed-dial/SpeedDial.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@popperjs/core';
+export interface SpeedCtxType {
+    pill: boolean;
+    tooltip: Placement | 'none';
+    textOutside: boolean;
+}
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        defaultClass?: string | undefined;
+        placement?: Placement | undefined;
+        pill?: boolean | undefined;
+        tooltip?: "none" | Placement | undefined;
+        trigger?: "click" | "hover" | undefined;
+        textOutside?: boolean | undefined;
+        id?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export declare type SpeedDialProps = typeof __propDef.props;
+export declare type SpeedDialEvents = typeof __propDef.events;
+export declare type SpeedDialSlots = typeof __propDef.slots;
+export default class SpeedDial extends SvelteComponentTyped<SpeedDialProps, SpeedDialEvents, SpeedDialSlots> {
+}
+export {};

package/speed-dial/SpeedDialButton.svelte

@@ -0,0 +1,33 @@
+<script>import Button from '../buttons/Button.svelte';
+import Tooltip from '../tooltips/Tooltip.svelte';
+import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let name = '';
+export let tooltip;
+export let pill = undefined;
+export let textOutside = undefined;
+const context = getContext('speed-dial');
+$: {
+    // set defaults
+    pill = pill ?? context?.pill ?? true;
+    tooltip = tooltip ?? context?.tooltip ?? 'left';
+    textOutside = textOutside ?? context?.textOutside ?? false;
+}
+let btnClass;
+$: btnClass = classNames('w-[52px] h-[52px] shadow-sm !p-2', tooltip === 'none' && 'flex-col', textOutside && 'relative', $$props.class);
+</script>
+
+<Button {pill} outline color="light" {...$$restProps} class={btnClass} on:click>
+  <slot />
+  {#if tooltip !== 'none'}
+    <span class="sr-only">{name}</span>
+  {:else if textOutside}
+    <span class="block absolute -left-14 top-1/2 mb-px text-sm font-medium -translate-y-1/2">{name}</span>
+  {:else}
+    <span class="block mb-px text-xs font-medium">{name}</span>
+  {/if}
+</Button>
+
+{#if tooltip !== 'none'}
+  <Tooltip placement={tooltip} style="dark">{name}</Tooltip>
+{/if}

package/speed-dial/SpeedDialButton.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@popperjs/core';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        name?: string | undefined;
+        tooltip: Placement | 'none';
+        pill?: boolean | undefined;
+        textOutside?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SpeedDialButtonProps = typeof __propDef.props;
+export declare type SpeedDialButtonEvents = typeof __propDef.events;
+export declare type SpeedDialButtonSlots = typeof __propDef.slots;
+export default class SpeedDialButton extends SvelteComponentTyped<SpeedDialButtonProps, SpeedDialButtonEvents, SpeedDialButtonSlots> {
+}
+export {};