Add nicer input

Author: mekanix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freenit-framework/core",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "private": false,
   "author": "Goran Mekić <meka@tilda.center>",
   "license": "BSD-2-Clause",

src/lib/Input.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  let { label, name, type, value } = $props()
+  let focused = $state(value.length > 0)
+
+  const focus = () => {
+    focused = true
+  }
+
+  const blur = () => {
+    if (value.length < 1) {
+      focused = false
+    }
+  }
+
+  $effect(() => {
+    focused = value.length > 0
+  })
+</script>
+
+<div class="form-group" class:focused>
+  <label class="form-label" for="input">{label}</label>
+  <input class="input" {name} {type} onfocus={focus} onblur={blur} bind:value />
+</div>
+
+<style>
+  .form-group {
+    position: relative;
+  }
+
+  .form-label {
+    position: absolute;
+    left: 0;
+    top: 10px;
+    color: #999;
+    background-color: #fff0;
+    z-index: 10;
+    transition:
+      transform 150ms ease-out,
+      font-size 150ms ease-out;
+  }
+
+  .focused .form-label {
+    transform: translateY(-125%);
+    font-size: 0.75em;
+  }
+
+  .input {
+    position: relative;
+    padding: 12px 0px 5px 0;
+    width: 100%;
+    outline: 0;
+    border: 0;
+    box-shadow: 0 1px 0 0 #e5e5e5;
+    transition: box-shadow 150ms ease-out;
+
+    &:focus {
+      box-shadow: 0 2px 0 0 var(--color-primary);
+    }
+  }
+</style>

src/lib/Profile.svelte

@@ -11,7 +11,9 @@
 <div class="root">
   <div>ID: {store.user.profile.id || store.user.profile.dn}</div>
   <div>Email: {store.user.profile.email}</div>
-  <div>Active: {store.user.profile.active || store.user.profile.userClass == 'enabled' ? 'yes' : 'no'}</div>
+  <div>
+    Active: {store.user.profile.active || store.user.profile.userClass == 'enabled' ? 'yes' : 'no'}
+  </div>
   <div>Admin: {store.user.profile.admin ? 'yes' : 'no'}</div>
 </div>
 

src/lib/index.ts

@@ -1,3 +1,4 @@
+export { default as Input } from './Input.svelte'
 export { default as LeftPane } from './LeftPane.svelte'
 export { default as Login } from './Login.svelte'
 export { default as MenuBar } from './MenuBar.svelte'