feat(svelte): add component prop support to FAB component (#83)

konstaui · Sep 18, 2022 · 9841840 · 9841840
1 parent 4bd031b
commit 9841840
Showing 1 changed file with 43 additions and 18 deletions.
diff --git a/src/svelte/components/Fab.svelte b/src/svelte/components/Fab.svelte
@@ -12,6 +12,8 @@
   export let ios = undefined;
   export let material = undefined;
 
+  export let component = 'a'; // or 'button'
+
   export let href = undefined;
   export let text = undefined;
   export let textPosition = 'after';
@@ -35,21 +37,44 @@
   );
 </script>
 
-<a
-  class={text ? c.base.withText : c.base.iconOnly}
-  {href}
-  bind:this={rippleEl.current}
-  on:click={onClick}
-  {...$$restProps}
->
-  {#if (text || $$slots.text) && textPosition === 'before'}
-    <span class={c.text}>{text}<slot name="text" /></span>
-  {/if}
-  {#if $$slots.icon}
-    <span class={c.icon}><slot name="icon" /></span>
-  {/if}
-  {#if (text || $$slots.text) && textPosition === 'after'}
-    <span class={c.text}>{text}<slot name="text" /></span>
-  {/if}
-  <slot />
-</a>
+{#if typeof component === 'string'}
+  <svelte:element
+    this={component}
+    class={text ? c.base.withText : c.base.iconOnly}
+    {href}
+    bind:this={rippleEl.current}
+    on:click={onClick}
+    {...$$restProps}
+  >
+    {#if (text || $$slots.text) && textPosition === 'before'}
+      <span class={c.text}>{text}<slot name="text" /></span>
+    {/if}
+    {#if $$slots.icon}
+      <span class={c.icon}><slot name="icon" /></span>
+    {/if}
+    {#if (text || $$slots.text) && textPosition === 'after'}
+      <span class={c.text}>{text}<slot name="text" /></span>
+    {/if}
+    <slot />
+  </svelte:element>
+{:else}
+  <svelte:component
+    this={component}
+    class={text ? c.base.withText : c.base.iconOnly}
+    {href}
+    bind:this={rippleEl.current}
+    on:click={onClick}
+    {...$$restProps}
+  >
+    {#if (text || $$slots.text) && textPosition === 'before'}
+      <span class={c.text}>{text}<slot name="text" /></span>
+    {/if}
+    {#if $$slots.icon}
+      <span class={c.icon}><slot name="icon" /></span>
+    {/if}
+    {#if (text || $$slots.text) && textPosition === 'after'}
+      <span class={c.text}>{text}<slot name="text" /></span>
+    {/if}
+    <slot />
+  </svelte:component>
+{/if}