1 files changed, 80 insertions, 0 deletions
diff --git a/src/lib/form.ts b/src/lib/form.ts
new file mode 100644
index 0000000..a1f8cfd
--- /dev/null
+++ b/src/lib/form.ts
@@ -0,0 +1,80 @@
+import { h } from 'lib/h'
+import * as Layout from 'lib/layout'
+import * as Button from 'lib/button'
+
+export function input(id: string, label: string, attrs: object): Element {
+  return h('div',
+    { className: 'g-Form__Field' },
+    h('div',
+      { className: 'g-Form__Label' },
+      h('label', { for: id }, label)
+    ),
+    h('input', { id: id, ...attrs })
+  )
+}
+
+export function colorInput(
+  defaultColors: string[],
+  id: string,
+  label: string,
+  initValue: string,
+  onInput: (value: string) => void
+): Element {
+  const input = h('input',
+    { id,
+      value: initValue,
+      type: 'color',
+      oninput: (e: Event) => {
+        if (e.target !== null) {
+          onInput((e.target as HTMLInputElement).value)
+        }
+      }
+    }
+  ) as HTMLInputElement
+  return h('div',
+    { className: 'g-Form__Field' },
+    h('div',
+      { className: 'g-Form__Label' },
+      h('label', { for: id }, label)
+    ),
+    Layout.line(
+      {},
+      ...(defaultColors.map(color =>
+        Button.raw({ className: 'g-Form__DefaultColor',
+          style: `background-color: ${color}`,
+          type: 'button',
+          onclick: () => {
+            input.value = color
+            onInput(color)
+          }
+        })
+      ).concat(input))
+    )
+  )
+}
+
+export function textarea(
+  id: string,
+  label: string,
+  initValue: string,
+  onInput: (value: string) => void
+): Element {
+  return h('div',
+    { className: 'g-Form__Field' },
+    h('div',
+      { className: 'g-Form__Label' },
+      h('label', { for: id }, label)
+    ),
+    h('textarea',
+      { id,
+        className: 'g-Form__Textarea',
+        oninput: (e: Event) => {
+          if (e.target !== null) {
+            onInput((e.target as HTMLTextAreaElement).value)
+          }
+        }
+      },
+      initValue
+    )
+  )
+}