feat(svelte): Action Sheet components

kitchen-sink/svelte/pages/ActionSheet.svelte

@@ -0,0 +1,85 @@
+<script>
+  import {
+    Page,
+    Navbar,
+    NavbarBackLink,
+    BlockTitle,
+    Block,
+    Button,
+    Actions,
+    ActionsButton,
+    ActionsLabel,
+    ActionsGroup,
+  } from 'konsta/svelte';
+
+  const isPreview = document.location.href.includes('examplePreview');
+
+  let actionsOneOpened = false;
+  let actionsTwoOpened = false;
+</script>
+
+<Page>
+  <Navbar title="Action Sheet">
+    <svelte:fragment slot="left">
+      {#if !isPreview}
+        <NavbarBackLink onClick={() => history.back()} />
+      {/if}
+    </svelte:fragment>
+  </Navbar>
+
+  <Block strong class="space-y-4">
+    <p>
+      Action Sheet is a slide-up pane for presenting the user with a set of
+      alternatives for how to proceed with a given task.
+    </p>
+  </Block>
+  <BlockTitle>Open Action Sheet</BlockTitle>
+  <Block strong class="flex space-x-4">
+    <Button onClick={() => (actionsOneOpened = true)}>One group</Button>
+    <Button onClick={() => (actionsTwoOpened = true)}>Two groups</Button>
+  </Block>
+
+  <Actions
+    opened={actionsOneOpened}
+    onBackdropClick={() => (actionsOneOpened = false)}
+  >
+    <ActionsGroup>
+      <ActionsLabel>Do something</ActionsLabel>
+      <ActionsButton onClick={() => (actionsOneOpened = false)} bold>
+        Button 1
+      </ActionsButton>
+      <ActionsButton onClick={() => (actionsOneOpened = false)}>
+        Button 2
+      </ActionsButton>
+      <ActionsButton
+        onClick={() => (actionsOneOpened = false)}
+        colors={{ text: 'text-red-500' }}
+      >
+        Cancel
+      </ActionsButton>
+    </ActionsGroup>
+  </Actions>
+
+  <Actions
+    opened={actionsTwoOpened}
+    onBackdropClick={() => (actionsTwoOpened = false)}
+  >
+    <ActionsGroup>
+      <ActionsLabel>Do something</ActionsLabel>
+      <ActionsButton onClick={() => (actionsTwoOpened = false)} bold>
+        Button 1
+      </ActionsButton>
+      <ActionsButton onClick={() => (actionsTwoOpened = false)}>
+        Button 2
+      </ActionsButton>
+    </ActionsGroup>
+    <ActionsGroup>
+      <ActionsButton
+        onClick={() => (actionsTwoOpened = false)}
+        colors={{ text: 'text-red-500' }}
+      >
+        Cancel
+      </ActionsButton>
+    </ActionsGroup>
+  </Actions>
+</Page>

kitchen-sink/svelte/routes.js

@@ -1,3 +1,4 @@
+import ActionSheet from './pages/ActionSheet.svelte';
 import Badge from './pages/Badge.svelte';
 import Breadcrumbs from './pages/Breadcrumbs.svelte';
 import Buttons from './pages/Buttons.svelte';
@@ -28,6 +29,7 @@ import Toggle from './pages/Toggle.svelte';
 import Toolbar from './pages/Toolbar.svelte';
 
 const pages = {
+  ActionSheet,
   Badge,
   Breadcrumbs,
   Buttons,

scripts/build-svelte-types.js

@@ -16,6 +16,7 @@ const addOnClick = [
   'SegmentedButton',
   'BreadcrumbsCollapsed',
   'BreadcrumbsItem',
+  'ActionsButton',
 ];
 
 const addOnClickProp = (componentName) => {

src/react/components/Actions.jsx

@@ -21,10 +21,10 @@ const Actions = forwardRef((props, ref) => {
     ...rest
   } = props;
 
-  const rippleElRef = useRef(null);
+  const elRef = useRef(null);
 
   useImperativeHandle(ref, () => ({
-    el: rippleElRef.current,
+    el: elRef.current,
   }));
 
   const state = opened ? 'opened' : 'closed';
@@ -44,7 +44,7 @@ const Actions = forwardRef((props, ref) => {
       {backdrop && (
         <div className={c.backdrop[state]} onClick={onBackdropClick} />
       )}
-      <Component ref={rippleElRef} className={c.base[state]} {...attrs}>
+      <Component ref={elRef} className={c.base[state]} {...attrs}>
         {children}
       </Component>
     </>

src/react/components/ActionsButton.jsx

@@ -41,9 +41,9 @@ const ActionsButton = forwardRef((props, ref) => {
   }));
 
   let Component = component;
-  if (typeof props.component === 'undefined' && (href || href === ''))
+  if (typeof props.component === 'undefined' && (href || href === '')) {
     Component = 'a';
-
+  }
   const attrs = {
     href,
     ...rest,

src/react/components/ActionsGroup.jsx

@@ -19,10 +19,10 @@ const ActionsGroup = forwardRef((props, ref) => {
     ...rest
   } = props;
 
-  const rippleElRef = useRef(null);
+  const elRef = useRef(null);
 
   useImperativeHandle(ref, () => ({
-    el: rippleElRef.current,
+    el: elRef.current,
   }));
 
   const Component = component;
@@ -39,7 +39,7 @@ const ActionsGroup = forwardRef((props, ref) => {
   );
 
   return (
-    <Component ref={rippleElRef} className={c.base} {...attrs}>
+    <Component ref={elRef} className={c.base} {...attrs}>
       {children}
     </Component>
   );

src/react/components/ActionsLabel.jsx

@@ -25,10 +25,10 @@ const ActionsLabel = forwardRef((props, ref) => {
     ...rest
   } = props;
 
-  const rippleElRef = useRef(null);
+  const elRef = useRef(null);
 
   useImperativeHandle(ref, () => ({
-    el: rippleElRef.current,
+    el: elRef.current,
   }));
 
   const Component = component;
@@ -59,7 +59,7 @@ const ActionsLabel = forwardRef((props, ref) => {
   );
 
   return (
-    <Component ref={rippleElRef} className={c.base} {...attrs}>
+    <Component ref={elRef} className={c.base} {...attrs}>
       {children}
     </Component>
   );

src/svelte/components/Actions.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { ActionsClasses } from '../../shared/classes/ActionsClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+
+  let className = undefined;
+  export { className as class };
+  export let ios = undefined;
+  export let material = undefined;
+
+  export let opened = undefined;
+  export let backdrop = true;
+  export let onBackdropClick = undefined;
+
+  $: state = opened ? 'opened' : 'closed';
+
+  $: c = useThemeClasses(
+    { ios, material },
+    ActionsClasses({}),
+    className,
+    (v) => (c = v)
+  );
+</script>
+
+{#if backdrop}
+  <div class={c.backdrop[state]} on:click={onBackdropClick} />
+{/if}
+<div class={c.base[state]} {...$$restProps}>
+  <slot />
+</div>

src/svelte/components/ActionsButton.svelte

@@ -0,0 +1,71 @@
+<script>
+  import { ActionsButtonClasses } from '../../shared/classes/ActionsButtonClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { cls } from '../../shared/cls.js';
+  import { useTouchRipple } from '../shared/use-touch-ripple.js';
+
+  let className = undefined;
+  export { className as class };
+  let colorsProp = undefined;
+  export { colorsProp as colors };
+  export let ios = undefined;
+  export let material = undefined;
+
+  export let component = 'button';
+  export let href = undefined;
+
+  export let bold = false;
+  export let fontSizeIos = 'text-xl';
+  export let fontSizeMaterial = 'text-base';
+  export let touchRipple = true;
+  export let hairlines = true;
+
+  export let onClick = undefined;
+
+  const dark = useDarkClasses();
+
+  $: useTouchRipple(rippleEl, touchRipple);
+
+  const rippleEl = { current: null };
+
+  $: attrs = {
+    href,
+    ...$$restProps,
+  };
+
+  let Component = component;
+  if (typeof component === 'undefined' && (href || href === '')) {
+    Component = 'a';
+  } else if (typeof component === 'undefined') {
+    Component = 'button';
+  }
+
+  $: colors = {
+    bg: cls('bg-white', dark('dark:bg-neutral-800')),
+    activeBg: cls('active:bg-neutral-200', dark('dark:active:bg-neutral-700')),
+    text: 'text-primary',
+    ...colorsProp,
+  };
+
+  $: c = useThemeClasses(
+    { ios, material },
+    ActionsButtonClasses(
+      { bold, fontSizeIos, fontSizeMaterial, hairlines },
+      colors,
+      dark
+    ),
+    className,
+    (v) => (c = v)
+  );
+</script>
+
+<svelte:element
+  this={Component}
+  bind:this={rippleEl.current}
+  class={c.base}
+  on:click={onClick}
+  {...attrs}
+>
+  <slot />
+</svelte:element>

src/svelte/components/ActionsGroup.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { ActionsGroupClasses } from '../../shared/classes/ActionsGroupClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+
+  let className = undefined;
+  export { className as class };
+  export let ios = undefined;
+  export let material = undefined;
+
+  export let hairlines = true;
+
+  $: c = useThemeClasses(
+    { ios, material },
+    ActionsGroupClasses({ hairlines }),
+    className,
+    (v) => (c = v)
+  );
+</script>
+
+<div class={c.base} {...$$restProps}>
+  <slot />
+</div>

src/svelte/components/ActionsLabel.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { ActionsLabelClasses } from '../../shared/classes/ActionsLabelClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { cls } from '../../shared/cls.js';
+
+  let className = undefined;
+  export { className as class };
+  let colorsProp = undefined;
+  export { colorsProp as colors };
+  export let ios = undefined;
+  export let material = undefined;
+
+  export let fontSizeIos = 'text-sm';
+  export let fontSizeMaterial = 'text-base';
+  export let hairlines = true;
+
+  const dark = useDarkClasses();
+
+  $: attrs = {
+    ...$$restProps,
+  };
+
+  $: colors = {
+    bg: cls('bg-white', dark('dark:bg-neutral-800')),
+    activeBg: cls('active:bg-neutral-200', dark('dark:active:bg-neutral-700')),
+    text: cls(
+      'text-black text-opacity-55',
+      dark('dark:text-white dark:text-opacity-55')
+    ),
+    ...colorsProp,
+  };
+
+  $: c = useThemeClasses(
+    { ios, material },
+    ActionsLabelClasses(
+      { fontSizeIos, fontSizeMaterial, hairlines },
+      colors,
+      dark
+    ),
+    className,
+    (v) => (c = v)
+  );
+</script>
+
+<div class={c.base} {...attrs}>
+  <slot />
+</div>

src/svelte/konsta-svelte.js

@@ -1,4 +1,8 @@
 import App from './components/App.svelte';
+import Actions from './components/Actions.svelte';
+import ActionsButton from './components/ActionsButton.svelte';
+import ActionsLabel from './components/ActionsLabel.svelte';
+import ActionsGroup from './components/ActionsGroup.svelte';
 import Badge from './components/Badge.svelte';
 import Block from './components/Block.svelte';
 import BlockFooter from './components/BlockFooter.svelte';
@@ -51,6 +55,10 @@ export {
   useTheme,
   // components
   App,
+  Actions,
+  ActionsButton,
+  ActionsLabel,
+  ActionsGroup,
   Badge,
   Block,
   BlockFooter,