Expose ripple function

kitchen-sink/svelte/pages/Ripple.svelte

@@ -0,0 +1,66 @@
+<script>
+  import {
+    Page,
+    Navbar,
+    NavbarBackLink,
+    Card,
+    BlockTitle,
+    List,
+    ListItem,
+    Link,
+    Button,
+    touchRipple,
+  } from 'konsta/svelte';
+
+  const isPreview = document.location.href.includes('examplePreview');
+</script>
+
+<Page>
+  <Navbar title="Ripple action">
+    <svelte:fragment slot="left">
+      {#if !isPreview}
+        <NavbarBackLink onClick={() => history.back()} />
+      {/if}
+    </svelte:fragment>
+  </Navbar>
+
+  <BlockTitle withBlock={false}>Example on a card</BlockTitle>
+  <div use:touchRipple class="rounded-lg touch-ripple-primary">
+    <Card>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam illum
+      quam incidunt fugit! Voluptatum, harum. Voluptatem dolorem ex debitis
+      assumenda sed tempore vitae accusantium dolorum, fugit ea earum aliquid
+      placeat, deleniti eligendi ratione molestiae laudantium corrupti eaque
+      voluptatum eum iusto cumque obcaecati voluptatibus! Debitis suscipit, ut
+      alias non, numquam accusamus dignissimos ipsum accusantium aspernatur
+      dolor nemo esse quae officia quasi nostrum qui rerum ad ab assumenda iure
+      sed, voluptatibus minima omnis ex. Ex iusto molestiae, error maiores nisi
+      totam architecto saepe illum, beatae dicta eligendi explicabo magnam porro
+      temporibus unde numquam earum possimus nobis molestias fugit! Eligendi
+      dignissimos rerum iste?
+    </Card>
+  </div>
+
+  <BlockTitle withBlock={false}>With unapplied styles</BlockTitle>
+  <div use:touchRipple={false} class="rounded-lg touch-ripple-primary">
+    <Card>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam illum
+      quam incidunt fugit! Voluptatum, harum. Voluptatem dolorem ex debitis
+      assumenda sed tempore vitae accusantium dolorum, fugit ea earum aliquid
+      placeat, deleniti eligendi ratione molestiae laudantium corrupti eaque
+      voluptatum eum iusto cumque obcaecati voluptatibus! Debitis suscipit, ut
+      alias non, numquam accusamus dignissimos ipsum accusantium aspernatur
+      dolor nemo esse quae officia quasi nostrum qui rerum ad ab assumenda iure
+      sed, voluptatibus minima omnis ex. Ex iusto molestiae, error maiores nisi
+      totam architecto saepe illum, beatae dicta eligendi explicabo magnam porro
+      temporibus unde numquam earum possimus nobis molestias fugit! Eligendi
+      dignissimos rerum iste?
+    </Card>
+  </div>
+</Page>
+
+<style>
+  :global(.k-touch-ripple-wave) {
+    z-index: 10;
+  }
+</style>

kitchen-sink/svelte/routes.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 import ActionSheet from './pages/ActionSheet.svelte';
 import Badge from './pages/Badge.svelte';
 import Breadcrumbs from './pages/Breadcrumbs.svelte';
@@ -20,6 +21,7 @@ import Preloader from './pages/Preloader.svelte';
 import Progressbar from './pages/Progressbar.svelte';
 import Radio from './pages/Radio.svelte';
 import RangeSlider from './pages/RangeSlider.svelte';
+import Ripple from './pages/Ripple.svelte';
 import SegmentedControl from './pages/SegmentedControl.svelte';
 import SheetModal from './pages/SheetModal.svelte';
 import Stepper from './pages/Stepper.svelte';
@@ -52,6 +54,7 @@ const pages = {
   Progressbar,
   Radio,
   RangeSlider,
+  Ripple,
   SegmentedControl,
   SheetModal,
   Stepper,

src/svelte/konsta-svelte.d.ts

@@ -32,6 +32,7 @@ declare class KonstaProvider extends SvelteComponentTyped<
 declare const useTheme: (
   cb?: (newValue: 'material' | 'ios') => void
 ) => 'material' | 'ios';
+declare const touchRipple: (node: HTMLElement, styles: boolean) => void;
 
 // EXPORT_COMPONENTS
-export { useTheme, KonstaProvider };
+export { useTheme, touchRipple, KonstaProvider };

src/svelte/konsta-svelte.js

@@ -50,11 +50,13 @@ import Toolbar from './components/Toolbar.svelte';
 // eslint-disable-next-line
 import KonstaProvider from './shared/KonstaProvider.svelte';
 import { useTheme } from './shared/use-theme.js';
+import { touchRipple } from './shared/touch-ripple-action.js';
 
 export {
   // utils
   KonstaProvider,
   useTheme,
+  touchRipple,
   // components
   App,
   Actions,

src/svelte/shared/touch-ripple-action.js

@@ -0,0 +1,20 @@
+import { useTouchRipple } from './use-touch-ripple.js';
+
+/**
+ * Svelte action to apply a ripple effect to a component.
+ * WARNING: Changes the position to relative and overflow to hidden, set styles to false to disable.
+ *
+ * @param {HTMLElement} node
+ * @param {boolean} styles
+ * @returns void
+ */
+export function touchRipple(node, styles = true) {
+  if (!node) return;
+  if (styles) {
+    node.style.position = 'relative';
+    node.style.overflow = 'hidden';
+  }
+  const el = { current: node };
+
+  useTouchRipple(el, true);
+}