@isoftdata/svelte-checkbox
Advanced tools
@@ -47,2 +47,3 @@ <script | ||
| required?: boolean | ||
| size?: 'sm' | '' | 'lg' | ||
| title?: string | ||
@@ -67,2 +68,3 @@ value: T | ||
| required, | ||
| size = 'sm', | ||
| title, | ||
@@ -87,6 +89,3 @@ value = $bindable(), | ||
| {/if} | ||
| <div | ||
| class="btn-group" | ||
| class:btn-group-toggle={!bs5} | ||
| > | ||
| <div class={['btn-group', size && `btn-group-${size}`, bs5 && 'btn-group-toggle']}> | ||
| {#each options as option} | ||
@@ -96,3 +95,8 @@ {@const colorClass = option.color ?? color} | ||
| for="radio-{option.value}-{id}" | ||
| class={['btn', 'btn-sm', 'cursor-pointer', 'text-truncate', value === option.value ? `btn-${colorClass}` : `btn-outline-${colorClass}`]} | ||
| class={[ | ||
| 'btn', | ||
| 'cursor-pointer', | ||
| 'text-truncate', | ||
| value === option.value ? `btn-${colorClass}` : `btn-outline-${colorClass}`, | ||
| ]} | ||
| class:active={!bs5 && value === option.value} | ||
@@ -99,0 +103,0 @@ class:disabled |
@@ -23,2 +23,3 @@ import { type ComponentProps } from 'svelte'; | ||
| required?: boolean; | ||
| size?: "sm" | "" | "lg"; | ||
| title?: string; | ||
@@ -25,0 +26,0 @@ value: T; |
+1
-1
| { | ||
| "name": "@isoftdata/svelte-checkbox", | ||
| "version": "2.2.1", | ||
| "version": "2.3.0", | ||
| "exports": { | ||
@@ -5,0 +5,0 @@ ".": { |
15646
3.5%78
1.3%