flowbite-svelte 0.27.16 → 0.27.17

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.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/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 = _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/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.27.17",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -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 {};