fix ui components svelte 5 compatibility
This commit is contained in:
parent
cc46a695d5
commit
1c5caccf5e
5 changed files with 325 additions and 326 deletions
|
|
@ -1,3 +1,4 @@
|
|||
@use 'sass:color';
|
||||
@use 'themes/spacing';
|
||||
@use 'themes/mixins';
|
||||
@use 'themes/colors';
|
||||
|
|
@ -6,445 +7,447 @@
|
|||
@use 'themes/layout';
|
||||
|
||||
.button {
|
||||
align-items: center;
|
||||
background: var(--button-bg);
|
||||
border: 2px solid transparent;
|
||||
border-radius: layout.$input-corner;
|
||||
color: var(--button-text);
|
||||
display: inline-flex;
|
||||
font-size: typography.$font-button;
|
||||
font-weight: typography.$normal;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
transition: 0.18s opacity ease-in-out;
|
||||
user-select: none;
|
||||
transition: background-color 0.18s ease-out, color 0.18s ease-out;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
background: var(--button-bg);
|
||||
border: 2px solid transparent;
|
||||
border-radius: layout.$input-corner;
|
||||
color: var(--button-text);
|
||||
display: inline-flex;
|
||||
font-size: typography.$font-button;
|
||||
font-weight: typography.$normal;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
transition: 0.18s opacity ease-in-out;
|
||||
user-select: none;
|
||||
transition:
|
||||
background-color 0.18s ease-out,
|
||||
color 0.18s ease-out;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
|
||||
.text {
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
}
|
||||
.text {
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.blended:hover,
|
||||
&.blended.active {
|
||||
background: var(--button-bg-hover);
|
||||
cursor: pointer;
|
||||
color: var(--button-text-hover);
|
||||
&:hover,
|
||||
&.blended:hover,
|
||||
&.blended.active {
|
||||
background: var(--button-bg-hover);
|
||||
cursor: pointer;
|
||||
color: var(--button-text-hover);
|
||||
|
||||
.accessory svg {
|
||||
fill: var(--button-text-hover);
|
||||
}
|
||||
.accessory svg {
|
||||
fill: var(--button-text-hover);
|
||||
}
|
||||
|
||||
.accessory svg.stroke {
|
||||
fill: none;
|
||||
stroke: var(--button-text-hover);
|
||||
}
|
||||
}
|
||||
.accessory svg.stroke {
|
||||
fill: none;
|
||||
stroke: var(--button-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--button-bg-disabled);
|
||||
color: var(--button-text-disabled);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
&:disabled {
|
||||
background-color: var(--button-bg-disabled);
|
||||
color: var(--button-text-disabled);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-bg-disabled);
|
||||
color: var(--button-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--button-bg-disabled);
|
||||
color: var(--button-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border: 2px solid colors.$blue;
|
||||
outline: none;
|
||||
}
|
||||
&:focus-visible {
|
||||
border: 2px solid colors.$blue;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
// Variants
|
||||
.primary {
|
||||
background-color: var(--button-contained-bg);
|
||||
color: var(--button-text);
|
||||
background-color: var(--button-contained-bg);
|
||||
color: var(--button-text);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-contained-bg-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-contained-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--separator-bg);
|
||||
background-color: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--separator-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg-hover);
|
||||
color: var(--button-text-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg-hover);
|
||||
color: var(--button-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background-color: transparent;
|
||||
color: var(--text-secondary);
|
||||
background-color: transparent;
|
||||
color: var(--text-secondary);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: transparent;
|
||||
color: var(--accent-blue);
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
background-color: transparent;
|
||||
color: var(--accent-blue);
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--accent-blue-focus);
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--accent-blue-focus);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: none;
|
||||
}
|
||||
&:active:not(:disabled) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.blended {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--button-bg-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--button-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.bound {
|
||||
background: var(--button-contained-bg);
|
||||
background: var(--button-contained-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--button-contained-bg-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--button-contained-bg-hover);
|
||||
}
|
||||
|
||||
&.save:hover .accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
&.save:hover .accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
|
||||
&.save {
|
||||
color: colors.$save-red;
|
||||
&.save {
|
||||
color: colors.$save-red;
|
||||
|
||||
&.active .accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
&.active .accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: darken(colors.$save-red, 30);
|
||||
&:hover {
|
||||
color: color.adjust(colors.$save-red, $lightness: -30%);
|
||||
|
||||
.accessory svg {
|
||||
fill: darken(colors.$save-red, 30);
|
||||
stroke: darken(colors.$save-red, 30);
|
||||
}
|
||||
}
|
||||
}
|
||||
.accessory svg {
|
||||
fill: color.adjust(colors.$save-red, $lightness: -30%);
|
||||
stroke: color.adjust(colors.$save-red, $lightness: -30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bound.blended {
|
||||
background: var(--dialog-bg);
|
||||
background: var(--dialog-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--input-bound-bg);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--input-bound-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.floating {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.destructive {
|
||||
background: colors.$error;
|
||||
color: white;
|
||||
background: colors.$error;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: darken(colors.$error, 15);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: color.adjust(colors.$error, $lightness: -15%);
|
||||
}
|
||||
|
||||
@include mixins.breakpoint(phone) {
|
||||
background: colors.$error;
|
||||
color: colors.$grey-100;
|
||||
@include mixins.breakpoint(phone) {
|
||||
background: colors.$error;
|
||||
color: colors.$grey-100;
|
||||
|
||||
.accessory svg {
|
||||
fill: colors.$grey-100;
|
||||
}
|
||||
}
|
||||
.accessory svg {
|
||||
fill: colors.$grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
background-color: var(--notice-button-bg);
|
||||
color: var(--notice-button-text);
|
||||
background-color: var(--notice-button-bg);
|
||||
color: var(--notice-button-text);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--notice-button-bg-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--notice-button-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
&:hover:not(:disabled) {
|
||||
background: colors.$grey-90;
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: colors.$grey-90;
|
||||
}
|
||||
|
||||
&.destructive {
|
||||
color: colors.$error;
|
||||
&.destructive {
|
||||
color: colors.$error;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: darken(colors.$error, 10);
|
||||
}
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
color: color.adjust(colors.$error, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
.full {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fullWidth {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.no-shrink {
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--button-bg-hover);
|
||||
color: var(--button-text-hover);
|
||||
background: var(--button-bg-hover);
|
||||
color: var(--button-text-hover);
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.icon {
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: spacing.$unit * 1.5;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: spacing.$unit * 1.5;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
.text {
|
||||
display: none;
|
||||
|
||||
@include mixins.breakpoint(tablet) {
|
||||
display: block;
|
||||
}
|
||||
@include mixins.breakpoint(tablet) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include mixins.breakpoint(phone) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@include mixins.breakpoint(phone) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: spacing.$unit spacing.$unit-2x;
|
||||
font-size: typography.$font-small;
|
||||
min-height: 28px;
|
||||
padding: spacing.$unit spacing.$unit-2x;
|
||||
font-size: typography.$font-small;
|
||||
min-height: 28px;
|
||||
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: spacing.$unit * 5.5;
|
||||
padding: (spacing.$unit * 1.5) spacing.$unit-2x;
|
||||
font-size: typography.$font-regular;
|
||||
height: spacing.$unit * 5.5;
|
||||
padding: (spacing.$unit * 1.5) spacing.$unit-2x;
|
||||
font-size: typography.$font-regular;
|
||||
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit * 1.5;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit * 1.5;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: typography.$font-large;
|
||||
padding: spacing.$unit-2x spacing.$unit-3x;
|
||||
min-height: 52px;
|
||||
font-size: typography.$font-large;
|
||||
padding: spacing.$unit-2x spacing.$unit-3x;
|
||||
min-height: 52px;
|
||||
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit-2x;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit-2x;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
// Special features
|
||||
.save {
|
||||
.accessory svg {
|
||||
fill: none;
|
||||
stroke: var(--button-text);
|
||||
}
|
||||
.accessory svg {
|
||||
fill: none;
|
||||
stroke: var(--button-text);
|
||||
}
|
||||
|
||||
&.saved {
|
||||
color: colors.$save-red;
|
||||
&.saved {
|
||||
color: colors.$save-red;
|
||||
|
||||
.accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
.accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: colors.$save-red;
|
||||
&:hover:not(:disabled) {
|
||||
color: colors.$save-red;
|
||||
|
||||
.accessory svg {
|
||||
fill: none;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.accessory svg {
|
||||
fill: none;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: colors.$save-red;
|
||||
&:hover:not(:disabled) {
|
||||
color: colors.$save-red;
|
||||
|
||||
.accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
}
|
||||
.accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Element colors
|
||||
.wind {
|
||||
background: var(--wind-bg);
|
||||
color: var(--wind-text-contrast);
|
||||
background: var(--wind-bg);
|
||||
color: var(--wind-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--wind-bg-hover);
|
||||
color: var(--wind-text-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--wind-bg-hover);
|
||||
color: var(--wind-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.fire {
|
||||
background: var(--fire-bg);
|
||||
color: var(--fire-text-contrast);
|
||||
background: var(--fire-bg);
|
||||
color: var(--fire-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--fire-bg-hover);
|
||||
color: var(--fire-text-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--fire-bg-hover);
|
||||
color: var(--fire-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.water {
|
||||
background: var(--water-bg);
|
||||
color: var(--water-text-contrast);
|
||||
background: var(--water-bg);
|
||||
color: var(--water-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--water-bg-hover);
|
||||
color: var(--water-text-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--water-bg-hover);
|
||||
color: var(--water-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.earth {
|
||||
background: var(--earth-bg);
|
||||
color: var(--earth-text-contrast);
|
||||
background: var(--earth-bg);
|
||||
color: var(--earth-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--earth-bg-hover);
|
||||
color: var(--earth-text-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--earth-bg-hover);
|
||||
color: var(--earth-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
background: var(--dark-bg);
|
||||
color: var(--dark-text-contrast);
|
||||
background: var(--dark-bg);
|
||||
color: var(--dark-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--dark-bg-hover);
|
||||
color: var(--dark-text-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--dark-bg-hover);
|
||||
color: var(--dark-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.light {
|
||||
background: var(--light-bg);
|
||||
color: var(--light-text-contrast);
|
||||
background: var(--light-bg);
|
||||
color: var(--light-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--light-bg-hover);
|
||||
color: var(--light-text-hover);
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--light-bg-hover);
|
||||
color: var(--light-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon-only specific
|
||||
.iconOnly {
|
||||
gap: 0;
|
||||
aspect-ratio: 1;
|
||||
gap: 0;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
// Accessories
|
||||
.accessory {
|
||||
$dimension: spacing.$unit-2x;
|
||||
$dimension: spacing.$unit-2x;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.arrow {
|
||||
margin-top: spacing.$unit-half;
|
||||
}
|
||||
&.arrow {
|
||||
margin-top: spacing.$unit-half;
|
||||
}
|
||||
|
||||
&.flipped {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.flipped {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--button-text);
|
||||
height: $dimension;
|
||||
width: $dimension;
|
||||
svg {
|
||||
fill: var(--button-text);
|
||||
height: $dimension;
|
||||
width: $dimension;
|
||||
|
||||
&.stroke {
|
||||
fill: none;
|
||||
stroke: var(--button-text);
|
||||
}
|
||||
&.stroke {
|
||||
fill: none;
|
||||
stroke: var(--button-text);
|
||||
}
|
||||
|
||||
&.Add {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
&.Add {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&.Check {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
}
|
||||
&.Check {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.check svg {
|
||||
margin-top: 1px;
|
||||
height: 14px;
|
||||
width: auto;
|
||||
}
|
||||
&.check svg {
|
||||
margin-top: 1px;
|
||||
height: 14px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.settings svg {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
}
|
||||
&.settings svg {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// CSS modules workaround for floating button behavior
|
||||
:global(.unit:hover) .floating,
|
||||
:global(.unit) .floating.active {
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
}
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!-- Checkbox Component -->
|
||||
<svelte:options runes={true} />
|
||||
<script lang="ts">
|
||||
import { Checkbox as CheckboxPrimitive } from 'bits-ui';
|
||||
import { Check, Minus } from 'lucide-svelte';
|
||||
import { cn } from '$lib/utils.js';
|
||||
import styles from './checkbox.module.scss';
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
|
||||
|
|
@ -31,9 +31,11 @@
|
|||
...restProps
|
||||
}: Props = $props();
|
||||
|
||||
$: if (onCheckedChange && checked !== undefined) {
|
||||
onCheckedChange(checked);
|
||||
}
|
||||
$effect(() => {
|
||||
if (onCheckedChange && checked !== undefined) {
|
||||
onCheckedChange(checked);
|
||||
}
|
||||
});
|
||||
|
||||
const sizeClasses = {
|
||||
small: styles.small,
|
||||
|
|
@ -53,12 +55,7 @@
|
|||
{required}
|
||||
{name}
|
||||
{value}
|
||||
class={cn(
|
||||
styles.checkbox,
|
||||
sizeClasses[size],
|
||||
variantClasses[variant],
|
||||
className
|
||||
)}
|
||||
class={`${styles.checkbox} ${sizeClasses[size]} ${variantClasses[variant]} ${className || ''}`}
|
||||
{...restProps}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator class={styles.indicator}>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- Segment Component -->
|
||||
<svelte:options runes={true} />
|
||||
<script lang="ts">
|
||||
import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
import styles from './segment.module.scss';
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
|
||||
|
|
@ -13,16 +13,20 @@
|
|||
let {
|
||||
value,
|
||||
class: className,
|
||||
children,
|
||||
children: content,
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<RadioGroupPrimitive.Item
|
||||
{value}
|
||||
class={cn(styles.segment, className)}
|
||||
class={`${styles.segment} ${className || ''}`}
|
||||
{...restProps}
|
||||
>
|
||||
<RadioGroupPrimitive.ItemIndicator class={styles.indicator} />
|
||||
<span class={styles.label}>{children}</span>
|
||||
{#snippet children({ checked })}
|
||||
{#if checked}
|
||||
<div class={styles.indicator}></div>
|
||||
{/if}
|
||||
<span class={styles.label}>{@render content?.()}</span>
|
||||
{/snippet}
|
||||
</RadioGroupPrimitive.Item>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- SegmentedControl Component -->
|
||||
<svelte:options runes={true} />
|
||||
<script lang="ts">
|
||||
import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
import styles from './segmented-control.module.scss';
|
||||
import type { HTMLDivAttributes } from 'svelte/elements';
|
||||
|
||||
|
|
@ -29,9 +29,11 @@
|
|||
...restProps
|
||||
}: Props = $props();
|
||||
|
||||
$: if (onValueChange && value !== undefined) {
|
||||
onValueChange(value);
|
||||
}
|
||||
$effect(() => {
|
||||
if (onValueChange && value !== undefined) {
|
||||
onValueChange(value);
|
||||
}
|
||||
});
|
||||
|
||||
const variantClasses = {
|
||||
default: '',
|
||||
|
|
@ -49,21 +51,12 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<div class={cn(styles.wrapper, wrapperClass)}>
|
||||
<div class={`${styles.wrapper} ${wrapperClass || ''}`}>
|
||||
<RadioGroupPrimitive.Root
|
||||
bind:value
|
||||
class={cn(
|
||||
styles.segmentedControl,
|
||||
variantClasses[variant],
|
||||
element && elementClasses[element],
|
||||
{
|
||||
[styles.grow]: grow,
|
||||
[styles.gap]: gap
|
||||
},
|
||||
className
|
||||
)}
|
||||
class={`${styles.segmentedControl} ${variantClasses[variant]} ${element ? elementClasses[element] : ''} ${grow ? styles.grow : ''} ${gap ? styles.gap : ''} ${className || ''}`}
|
||||
{...restProps}
|
||||
>
|
||||
{children}
|
||||
{@render children?.()}
|
||||
</RadioGroupPrimitive.Root>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- Switch Component -->
|
||||
<svelte:options runes={true} />
|
||||
<script lang="ts">
|
||||
import { Switch as SwitchPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils.js';
|
||||
import styles from './switch.module.scss';
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
|
||||
|
|
@ -28,9 +28,11 @@
|
|||
...restProps
|
||||
}: Props = $props();
|
||||
|
||||
$: if (onCheckedChange && checked !== undefined) {
|
||||
onCheckedChange(checked);
|
||||
}
|
||||
$effect(() => {
|
||||
if (onCheckedChange && checked !== undefined) {
|
||||
onCheckedChange(checked);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<SwitchPrimitive.Root
|
||||
|
|
@ -39,8 +41,8 @@
|
|||
{required}
|
||||
{name}
|
||||
{value}
|
||||
class={cn(styles.switch, className)}
|
||||
class={`${styles.switch} ${className || ''}`}
|
||||
{...restProps}
|
||||
>
|
||||
<SwitchPrimitive.Thumb class={cn(styles.thumb, thumbClass)} />
|
||||
<SwitchPrimitive.Thumb class={`${styles.thumb} ${thumbClass || ''}`} />
|
||||
</SwitchPrimitive.Root>
|
||||
Loading…
Reference in a new issue