flowbite-svelte 0.46.7 → 0.46.9

package/dist/forms/Checkbox.svelte

@@ -1,54 +1,39 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
+<script>import { getContext } from "svelte";
 import { labelClass, inputClass } from "./Radio.svelte";
 import Label from "./Label.svelte";
+export let name;
 export let color = "primary";
 export let custom = false;
 export let inline = false;
-export let group = [];
+export let group;
+export let choices;
 export let value = "on";
 export let checked = void 0;
 export let spacing = $$slots.default ? "me-2" : "";
 let background = getContext("background");
-function init(_, _group) {
-  if (checked === void 0) checked = _group.includes(value);
-  onChange();
-  return {
-    update(_group2) {
-      checked = _group2.includes(value);
-    }
-  };
-}
-function onChange() {
-  const index = group.indexOf(value);
-  if (checked === void 0) checked = index >= 0;
-  if (checked) {
-    if (index < 0) {
-      group.push(value);
-      group = group;
-    }
-  } else {
-    if (index >= 0) {
-      group.splice(index, 1);
-      group = group;
-    }
-  }
-}
 </script>
-
+{#if group}
+  {#each choices as checkbox}
+    <label for={`checkbox-${value}`}>{ checkbox.label }</label>
+    <input type="checkbox" value={ checkbox.value } bind:group>
+  {/each}
+{:else}
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input use:init={group} type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change={onChange} on:change {value} {...$$restProps} class={inputClass(custom, color, true, background, spacing, $$slots.default || $$props.class)} />
+  <input {name} type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change {value} {...$$restProps} class={inputClass(custom, color, true, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
+{/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
+@prop export let name: string;
 @prop export let color: FormColorType = 'primary';
 @prop export let custom: boolean = false;
 @prop export let inline: boolean = false;
-@prop export let group: (string | number)[] = [];
+@prop export let group: CheckboxItem[];
+@prop export let choices: CheckboxItem[];
 @prop export let value: string | number = 'on';
 @prop export let checked: boolean | undefined = undefined;
 @prop export let spacing: string = $$slots.default ? 'me-2' : '';

package/dist/forms/Checkbox.svelte.d.ts

@@ -3,10 +3,20 @@ import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        name: string;
         color?: FormColorType;
         custom?: boolean;
         inline?: boolean;
-        group?: (string | number)[];
+        group: {
+            value: string;
+            label: string;
+            isChecked?: boolean;
+        }[];
+        choices: {
+            value: string;
+            label: string;
+            isChecked?: boolean;
+        }[];
         value?: string | number;
         checked?: boolean | undefined;
         spacing?: string;
@@ -36,10 +46,12 @@ export type CheckboxSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
+ * @prop export let name: string;
  * @prop export let color: FormColorType = 'primary';
  * @prop export let custom: boolean = false;
  * @prop export let inline: boolean = false;
- * @prop export let group: (string | number)[] = [];
+ * @prop export let group: CheckboxItem[];
+ * @prop export let choices: CheckboxItem[];
  * @prop export let value: string | number = 'on';
  * @prop export let checked: boolean | undefined = undefined;
  * @prop export let spacing: string = $$slots.default ? 'me-2' : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.7",
+  "version": "0.46.9",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -28,7 +28,7 @@
     "eslint": "^9.5.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.41.0",
-    "flowbite-svelte": "^0.46.7",
+    "flowbite-svelte": "^0.46.9",
     "flowbite-svelte-blocks": "^1.1.3",
     "flowbite-svelte-icons": "^1.6.1",
     "mdsvex": "^0.11.2",