fix(switch): add activeValue and inactiveValue

Author: koory1st

packages/switch/src/lib/switch.svelte

@@ -2,7 +2,7 @@
   import { SvelIcon, Loading } from '@svelement-ui/icon';
   import a2s from '@svelement-ui/util-array-2-class-string';
   import a2st from '@svelement-ui/util-array-2-style-string';
-  import { getContext, createEventDispatcher, tick } from 'svelte';
+  import { getContext, createEventDispatcher, tick, onMount } from 'svelte';
 
   const dispatch = createEventDispatcher();
 
@@ -24,7 +24,6 @@
   /** @type {String, Number} */
   export let tabindex;
   export let beforeChange = null;
-
   $: size = size || getContext('svel-size');
   $: isControlled = value !== false;
   $: actualValue = value;
@@ -61,6 +60,12 @@
     }
   }
 
+  if (actualValue !== activeValue && actualValue !== inactiveValue) {
+    value = inactiveValue;
+    dispatch('change', value);
+    dispatch('input', value);
+  }
+
   let input;
 
   function handleChange() {
@@ -72,6 +77,10 @@
       input.checked = checked;
     });
   }
+
+  function handleInputKeydown({ key }) {
+    console.log(key);
+  }
 </script>
 
 <div class={switchKls} on:click={switchValue} {style}>
@@ -83,6 +92,8 @@
     disabled={switchDisabled}
     false-value={inactiveValue}
     {name}
+    on:change={handleChange}
+    on:keydown={handleInputKeydown}
     role="switch"
     {tabindex}
     true-value={activeValue}

packages/switch/src/routes/+page.svelte

@@ -2,6 +2,7 @@
   import SvelSwitch from '$lib/index.js';
 
   let value;
+  let value2;
 </script>
 
 {value}
@@ -16,3 +17,8 @@
 
 <div />
 <SvelSwitch activeText="Pay by month" inactiveText="Pay by year" />
+
+<div />
+
+<SvelSwitch activeValue="100" bind:value={value2} inactiveValue="0" />
+{value2}