feat(input): adds switch

dvcol · Dec 16, 2024 · 99bc099 · 99bc099
1 parent b1ba008
commit 99bc099
Show file tree

Hide file tree

Showing 7 changed files with 463 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -25,10 +25,7 @@ Neomorphic ui library for svelte 5
   - [x] pin
 - [x] time/date/week
   - [ ] range
-- [ ] switch
-  - [ ] loading
-  - [ ] border loading
-  - [ ] skeleton
+- [x] switch
 - [ ] slider
   - [ ] range
   - [ ] steps/ticks

diff --git a/demo/components/DemoInputs.svelte b/demo/components/DemoInputs.svelte
@@ -17,6 +17,7 @@
   import NeoPassword from '~/inputs/NeoPassword.svelte';
   import NeoPin from '~/inputs/NeoPin.svelte';
   import NeoRadio from '~/inputs/NeoRadio.svelte';
+  import NeoSwitch from '~/inputs/NeoSwitch.svelte';
   import NeoTextArea from '~/inputs/NeoTextarea.svelte';
   import NeoInput from '~/inputs/common/NeoInput.svelte';
 
@@ -127,6 +128,9 @@
 
   const radioState = new ValidationState({ type: 'radio' });
 
+  const switchState = new ValidationState({ type: 'checkbox' });
+  const switchGroupState = new ValidationState({ type: 'checkbox' });
+
   const onClear = () =>
     [
       validation,
@@ -150,6 +154,9 @@
       checkboxGroupState,
 
       radioState,
+
+      switchState,
+      switchGroupState,
     ].forEach(state => state.clear());
 
   const columns: ColumProps[] = [
@@ -801,6 +808,42 @@
   </div>
 </div>
 
+<!-- Radio inputs -->
+<div class="row">
+  <div class="column content">
+    <span class="label">Switch</span>
+    {@render validationState(switchState, true)}
+    <SphereBackdrop glass={options.glass}>
+      <div class="column">
+        <NeoSwitch
+          label="Switch"
+          bind:touched={switchState.touched}
+          bind:dirty={switchState.dirty}
+          bind:valid={switchState.valid}
+          bind:checked={switchState.checked}
+          bind:indeterminate={switchState.indeterminate}
+          required
+          validation
+          {...options}
+          wrapperProps={{ style: 'min-width: 20rem' }}
+        />
+      </div>
+    </SphereBackdrop>
+  </div>
+
+  <div class="column content">
+    <span class="label">Switch Group</span>
+    <div class="label">Group: {switchGroupState.group}</div>
+    <SphereBackdrop glass={options.glass}>
+      <div class="column" style:gap="0.5rem">
+        <NeoSwitch label="Switch 1" value="Switch 1" name="switch-group" bind:group={switchGroupState.group} {...options} />
+        <NeoSwitch label="Switch 2" value="Switch 2" name="switch-group" bind:group={switchGroupState.group} {...options} />
+        <NeoSwitch label="Switch 3" value="Switch 3" name="switch-group" bind:group={switchGroupState.group} {...options} />
+      </div>
+    </SphereBackdrop>
+  </div>
+</div>
+
 <style lang="scss">
   @use 'src/lib/styles/common/flex' as flex;
 

diff --git a/src/lib/inputs/NeoCheckbox.svelte b/src/lib/inputs/NeoCheckbox.svelte
@@ -127,6 +127,7 @@
       class:neo-disabled={disabled}
       class:neo-skeleton={skeleton}
       class:neo-flat={!elevation}
+      class:neo-inset={elevation <= 0}
       style:--neo-checkbox-box-shadow={boxShadow}
       style:--neo-checkbox-checked-shadow={checkedShadow}
       onclick={() => ref?.click()}
@@ -214,7 +215,7 @@
       padding: 0.125rem;
       color: inherit;
       text-decoration: none;
-      background: transparent;
+      background-color: color-mix(in srgb, transparent, currentcolor 1%);
       border: var(--neo-checkbox-border-width, var(--neo-border-width, 1px)) var(--neo-checkbox-border-color, transparent) solid;
       border-radius: var(--neo-border-radius-sm);
       outline: none;
@@ -224,9 +225,12 @@
         color 0.3s ease,
         box-shadow 0.3s ease,
         border-radius 0.3s ease,
-        border-color 0.3s ease;
+        border-color 0.3s ease,
+        background-color 0.3s ease;
 
+      &.neo-disabled,
       &.neo-flat {
+        background-color: transparent;
         border-color: var(--neo-input-border-color, var(--neo-border-color));
       }
 
@@ -235,6 +239,10 @@
         box-shadow: var(--neo-checkbox-checked-shadow, var(--neo-box-shadow-pressed-2));
       }
 
+      &.neo-inset:focus-visible {
+        border-color: var(--neo-checkbox-border-color-focused, var(--neo-border-color-focused));
+      }
+
       &.neo-disabled {
         color: var(--neo-text-color-disabled);
         box-shadow: var(--neo-box-shadow-flat);
@@ -249,7 +257,7 @@
       &.neo-glass {
         @include mixin.glass;
 
-        background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color));
+        background-color: var(--neo-checkbox-bg-color, var(--neo-glass-background-color));
         border-color: var(
           --neo-checkbox-border-color,
           var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color)

diff --git a/src/lib/inputs/NeoRadio.svelte b/src/lib/inputs/NeoRadio.svelte
@@ -70,6 +70,7 @@
     class:neo-disabled={disabled}
     class:neo-skeleton={skeleton}
     class:neo-flat={!elevation}
+    class:neo-inset={elevation <= 0}
     style:--neo-radio-box-shadow={boxShadow}
     style:--neo-radio-checked-shadow={checkedShadow}
     onclick={() => ref?.click()}
@@ -152,7 +153,7 @@
       padding: 0;
       color: inherit;
       text-decoration: none;
-      background: transparent;
+      background-color: color-mix(in srgb, transparent, currentcolor 1%);
       border: var(--neo-radio-border-width, var(--neo-border-width, 1px)) var(--neo-radio-border-color, transparent) solid;
       border-radius: var(--neo-border-radius-sm);
       outline: none;
@@ -162,9 +163,12 @@
         color 0.3s ease,
         box-shadow 0.3s ease,
         border-radius 0.3s ease,
-        border-color 0.3s ease;
+        border-color 0.3s ease,
+        background-color 0.3s ease;
 
+      &.neo-disabled,
       &.neo-flat {
+        background-color: transparent;
         border-color: var(--neo-input-border-color, var(--neo-border-color));
       }
 
@@ -173,6 +177,10 @@
         box-shadow: var(--neo-radio-checked-shadow, var(--neo-box-shadow-pressed-2));
       }
 
+      &.neo-inset:focus-visible {
+        border-color: var(--neo-checkbox-border-color-focused, var(--neo-border-color-focused));
+      }
+
       &.neo-disabled {
         color: var(--neo-text-color-disabled);
         box-shadow: var(--neo-box-shadow-flat);
@@ -187,7 +195,7 @@
       &.neo-glass {
         @include mixin.glass;
 
-        background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color));
+        background-color: var(--neo-radio-bg-color, var(--neo-glass-background-color));
         border-color: var(
           --neo-radio-border-color,
           var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color)