0.10.0 release

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# [0.10.0](https://github.com/konstaui/konsta/compare/v0.9.0...v0.10.0) (2022-04-28)
+
+### Features
+
+- **react:** Action Sheet components ([c1907ad](https://github.com/konstaui/konsta/commit/c1907add779b24cda14e5469d7c02c5d432991ff))
+- **svelte:** Action Sheet components ([cf29c54](https://github.com/konstaui/konsta/commit/cf29c54e98e5fb63f43f85b219f6a4fdce9e0a46))
+- **vue:** Action Sheet components ([9b1890b](https://github.com/konstaui/konsta/commit/9b1890beb8f9fc8936b64b3932659ce380b7f0a1))
+
 # [0.9.0](https://github.com/konstaui/konsta/compare/v0.8.3...v0.9.0) (2022-04-28)
 
 ### Bug Fixes

kitchen-sink/react/pages/ActionSheet.jsx

@@ -5,11 +5,7 @@ import {
   NavbarBackLink,
   Button,
   Block,
-  Card,
   BlockTitle,
-  List,
-  ListItem,
-  Link,
   Actions,
   ActionsGroup,
   ActionsLabel,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "konsta",
   "description": "Mobile UI components made with Tailwind CSS",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": true,
   "license": "MIT",
   "author": "Vladimir Kharlampidi",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "konsta",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Mobile UI components made with Tailwind CSS",
   "repository": {
     "type": "git",

package/svelte/components/Actions.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { ActionsClasses } from '../../shared/esm/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>

package/svelte/components/ActionsButton.svelte

@@ -0,0 +1,71 @@
+<script>
+  import { ActionsButtonClasses } from '../../shared/esm/classes/ActionsButtonClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { cls } from '../../shared/esm/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 rippleEl = { current: null };
+
+  const dark = useDarkClasses();
+
+  $: useTouchRipple(rippleEl, touchRipple);
+
+  $: 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>

package/svelte/components/ActionsGroup.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { ActionsGroupClasses } from '../../shared/esm/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>

package/svelte/components/ActionsLabel.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { ActionsLabelClasses } from '../../shared/esm/classes/ActionsLabelClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { cls } from '../../shared/esm/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/components/ActionsButton.svelte

@@ -23,12 +23,12 @@
 
   export let onClick = undefined;
 
+  const rippleEl = { current: null };
+
   const dark = useDarkClasses();
 
   $: useTouchRipple(rippleEl, touchRipple);
 
-  const rippleEl = { current: null };
-
   $: attrs = {
     href,
     ...$$restProps,