Add datetime input

src/lib/components/DateTimeInput.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import cx from 'classnames'
+  import {DateInput} from "date-picker-svelte"
+  import {formatTimestamp} from '@welshman/app'
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from '@lib/components/Button.svelte'
+
+  export let initialValue: Date | undefined = undefined
+  export let value: Date | undefined = initialValue
+
+  const init = () => {
+    if (!value) {
+      value = new Date()
+      value.setMinutes(0, 0, 0)
+    }
+  }
+
+  const clear = () => {
+    value = undefined
+  }
+</script>
+
+<label class="relative">
+  <DateInput format="yyyy-MM-dd HH:mm" placeholder="" bind:value />
+  <div class="absolute top-0 h-12 right-2 flex gap-2 items-center cursor-pointer">
+    {#if value}
+      <Button on:click={clear} class="h-5">
+        <Icon icon="close-circle" />
+      </Button>
+    {:else}
+      <Button on:click={init} class="h-5">
+        <Icon icon="calendar-minimalistic" />
+      </Button>
+    {/if}
+  </div>
+</label>

src/lib/components/ModalBox.svelte

@@ -1,38 +1,10 @@
-<script context="module" lang="ts">
-  import {emitter} from "@app/modal"
-
-  const modalHeight = tweened(0, {
-    duration: 700,
-    easing: quintOut,
-  })
-
-  emitter.on("close", () => modalHeight.set(0))
-</script>
-
 <script lang="ts">
-  import {onMount} from "svelte"
-  import {quintOut} from "svelte/easing"
-  import {tweened} from "svelte/motion"
+  import {fly} from "@lib/transition"
 
   export let component
   export let props = {}
-
-  let box: HTMLElement
-  let content: HTMLElement
-  let naturalHeight = 0
-
-  onMount(() => {
-    naturalHeight = content.clientHeight + 48
-    modalHeight.set(naturalHeight)
-  })
 </script>
 
-<div
-  class="modal-box"
-  bind:this={box}
-  style={`height: ${$modalHeight}px`}
-  class:overflow-hidden={$modalHeight !== naturalHeight}>
-  <div bind:this={content}>
-    <svelte:component this={component} {...props} />
-  </div>
+<div class="modal-box" transition:fly={{duration: 100}}>
+  <svelte:component this={component} {...props} />
 </div>