fix(switch): loading

koory1st · Feb 23, 2024 · 4c97481 · 4c97481
1 parent 43ac99f
commit 4c97481
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/packages/switch/src/lib/switch.svelte b/packages/switch/src/lib/switch.svelte
@@ -60,17 +60,25 @@
     }
   }
 
-  if (actualValue !== activeValue && actualValue !== inactiveValue) {
+  if (
+    (value === undefined || value === null) &&
+    actualValue !== activeValue &&
+    actualValue !== inactiveValue
+  ) {
+    console.log('11', value);
     value = inactiveValue;
+    console.log('222', value);
     dispatch('change', value);
     dispatch('input', value);
   }
 
   let input;
 
   function handleChange() {
+    console.log('333', value);
     const val = checked ? inactiveValue : activeValue;
     value = val;
+    console.log('444', value);
     dispatch('change', val);
     dispatch('input', val);
     tick().then(() => {
@@ -131,7 +139,7 @@
     {/if}
     <div class="svel-switch__action">
       {#if loading}
-        <SvelIcon>
+        <SvelIcon class="is-loading">
           <Loading />
         </SvelIcon>
       {:else if activeActionIcon && checked}

diff --git a/packages/switch/src/routes/+page.svelte b/packages/switch/src/routes/+page.svelte
@@ -7,34 +7,38 @@
 </script>
 
 {value}
-<SvelSwitch bind:value />
+<!--<SvelSwitch bind:value />-->
 
-<SvelSwitch style="--svel-switch-on-color: #13ce66; --svel-switch-off-color: #ff4949" />
+<!--<SvelSwitch style="&#45;&#45;svel-switch-on-color: #13ce66; &#45;&#45;svel-switch-off-color: #ff4949" />-->
 
-<div />
+<!--<div />-->
 
-<SvelSwitch size="large" />
-<SvelSwitch size="small" />
+<!--<SvelSwitch size="large" />-->
+<!--<SvelSwitch size="small" />-->
 
-<SvelSwitch activeValue="100" bind:value={value2} inactiveValue="0" />
-<div />
-<SvelSwitch activeText="Pay by month" inactiveText="Pay by year" />
-<SvelSwitch activeText="Y" inactiveText="N" inlinePrompt />
-<div />
-<SvelSwitch activeText="超出省略" inactiveText="超出省略" inlinePrompt width="60" />
-<div />
-<SvelSwitch activeText="完整展示多个内容" inactiveText="多个内容" inlinePrompt />
+<!--<SvelSwitch activeValue="100" bind:value={value2} inactiveValue="0" />-->
+<!--<div />-->
+<!--<SvelSwitch activeText="Pay by month" inactiveText="Pay by year" />-->
+<!--<SvelSwitch activeText="Y" inactiveText="N" inlinePrompt />-->
+<!--<div />-->
+<!--<SvelSwitch activeText="超出省略" inactiveText="超出省略" inlinePrompt width="60" />-->
+<!--<div />-->
+<!--<SvelSwitch activeText="完整展示多个内容" inactiveText="多个内容" inlinePrompt />-->
 
-<div />
-<SvelSwitch bind:value>
-  <Check slot="activeIcon" />
-  <Close slot="inactiveIcon" />
-</SvelSwitch>
+<!--<div />-->
+<!--<SvelSwitch bind:value>-->
+<!--  <Check slot="activeIcon" />-->
+<!--  <Close slot="inactiveIcon" />-->
+<!--</SvelSwitch>-->
+
+<!--<SvelSwitch bind:value inlinePrompt>-->
+<!--  <Check slot="activeIcon" />-->
+<!--  <Close slot="inactiveIcon" />-->
+<!--</SvelSwitch>-->
 
-<SvelSwitch bind:value inlinePrompt>
-  <Check slot="activeIcon" />
-  <Close slot="inactiveIcon" />
-</SvelSwitch>
+<!--<div />-->
+<!--<SvelSwitch bind:value disabled />-->
 
 <div />
-<SvelSwitch bind:value disabled />
+<SvelSwitch loading value={true} />
+<SvelSwitch loading value={false} />