@wrnrlr/prelude 0.1.8 → 0.2.0

package/src/ui/h.ts

@@ -1,48 +0,0 @@
-import {runtime,type Runtime} from '../runtime.ts'
-import {hyperscript,type HyperScript} from '../hyperscript.ts'
-
-let _fontMetricsCtx:undefined|CanvasRenderingContext2D
-
-export function fontMetrics(font:string, text:string) {
-  if (!_fontMetricsCtx) _fontMetricsCtx = document.createElement('canvas').getContext('2d')
-  _fontMetricsCtx!.font = font;
-  return _fontMetricsCtx!.measureText(text)
-}
-
-export function renderEffect(fn:any):any {
-  return requestAnimationFrame(()=>effect(fn))
-}
-
-const r:Runtime|undefined = /*#__PURE__*/ (typeof window === 'object') ? runtime(window as any) : undefined
-
-/** h
-@example Element with a single child
-```js
-h('h1','Hello World!')
-```
-@example Element with multiple children
-```js
-h('p',['Hello ',h('em','World!')])
-```
-@example Component with event handler
-```js
-h(Input,{onInput:e => {}})
-```
-@group Hyperscript
-*/
-const h:HyperScript|undefined = /*#__PURE__*/ r ? hyperscript(r) : undefined
-
-const render = /*#__PURE__*/ r?.render
-
-// import {signal,wrap} from './reactive.ts'
-
-// /**
-// @group Utils
-// */
-// export function $(a:any,b:any):any {
-//   const t = typeof a
-//   if (t==='function') return wrap(a,b)
-//   else return signal(a,b)
-// }
-
-export {h,render}

package/src/ui/image.ts

@@ -1,5 +0,0 @@
-import {h} from './h.ts'
-
-export function Img(props:ImgProps) {
-  return h('img', props)
-}

package/src/ui/input.ts

@@ -1,49 +0,0 @@
-import {h,fontMetrics,renderEffect} from './h.ts'
-import {type Getter, type Setter} from '../reactive.ts'
-
-export type InputProps = {
-  ref?: (r:HTMLElement)=>void,
-  id?: string,
-  autocomplete?: 'on'|'off',
-  autosize?: (r:HTMLElement, props:any)=>(r:HTMLElement)=>void,
-  class?: string,
-  disabled?: boolean,
-  name?: string,
-  placeholder?: string,
-  onInput?: (e:Event) => void,
-  value: (Getter<string>&Setter<string>)|(Getter<number>&Setter<number>),
-  style?: string,
-  type?: string,
-}
-
-export function Input(props: InputProps): any {
-  props.onInput = props.onInput || ((e:Event) => props.value(e?.target?.value))
-  props.autocomplete = props.autocomplete || 'off'
-  if (props.autosize) props.ref = (r)=>props.autosize(r,props)
-  return h('input', props)
-}
-
-const autosize = (r:HTMLElement, props:any) => {
-  const style = window.getComputedStyle(r)
-  renderEffect(() => {
-    const font = style.getPropertyValue('font')
-    const metrics = fontMetrics(font, props.value().toString())
-    r.style.width = metrics.width + 'px'
-  })
-}
-
-Input.prototype.autosize = autosize
-
-// return h('input', {
-//   ref,
-//   id: props.id,
-//   autocomplete: props.autocomplete || 'off',
-//   class: props.class,
-//   disabled: props.disabled,
-//   onInput: (e:Event) => props.value(e?.target?.value),
-//   name: props.name,
-//   placeholder: props.placeholder,
-//   type: props.type,
-//   style: props.style,
-//   value: props.value,
-// })

package/src/ui/mod.ts

@@ -1,12 +0,0 @@
-export {Accordion, type AccordionProps} from './accordion.ts'
-export {Button, type ButtonProps} from './button.ts'
-export {Canvas} from './canvas.ts'
-export {DateInput} from './date.ts'
-export {Input, type InputProps} from './input.ts'
-export {Form} from './form.ts'
-export {Tab} from './tab.ts'
-export {Filter, type FilterProps} from './filter.ts'
-export {Multiselect, type MultiselectProps} from './multiselect.ts'
-export {Select, type SelectProps} from './select.ts'
-export {Table, type TableProps} from './table.ts'
-export {Upload} from './upload.ts'

package/src/ui/multiselect.ts

@@ -1,42 +0,0 @@
-import {h} from './h.ts'
-import {signal} from "../reactive.ts"
-import {Dialog} from './dialog.ts'
-import {Button} from './button.ts'
-
-export type MultiselectProps = {
-  key: string | ((item:unknown)=>string),
-  label: string | ((item:unknown)=>string),
-  options: string[] | (()=>string[]),
-  disabled: boolean | (()=>boolean),
-  value: string[] | ((value:string[])=>void),
-}
-
-export function Multiselect(props:MultiselectProps) {
-  const showDialog = signal(true)
-  const key = props.key || (f => f)
-  const label = props.label || (f => f)
-  const add = item => props.value([...props.value(), key(item)])
-  const remove = i => _ => props.value(items=>items.toSpliced(i,1))
-  const options = () => (props.options.call ? props.options() : props.options).filter(e=>!props.value().includes(e))
-  const value = (...args:any[]) => (!args.length) ? props.value() : (show(false), add(key(args[0])))
-  const disabled = () => ((props?.disabled?.call ? props.disabled() : props.disabled))
-
-  return h('span.multiselect', [
-    h(List, {each:()=>value}, (e,i) => h('span', [
-      h(Button, {disabled}, ()=>label(e())),
-      h(Button, {disabled, onClick:remove(i())})
-    ])),
-    h('span', {style:'position:relative'}, [
-      h(Button, {
-        onClick: _ => showDialog(b=>!b),
-        class: () => showDialog() ? 'minus' : 'add',
-        disabled: () => disabled() || !options().length,
-      }, '+'),
-      h(Dialog, {show:()=>showDialog}, h(Options, {
-        options: () => options,
-        value: () => value,
-        label
-      }))
-    ])
-  ])
-}

package/src/ui/option.ts

@@ -1 +0,0 @@
-import {h} from './h.ts'

package/src/ui/select.ts

@@ -1,28 +0,0 @@
-import {signal} from '../reactive.ts'
-import { h } from './h.ts'
-import {Dialog} from './dialog.ts'
-import {Button} from './button.ts'
-
-export type SelectProps = {
-  label?: (value:any)=>string,
-  key?: (value:any)=>string,
-  options: any[] | (()=>any[]),
-}
-
-export function Select(props:SelectProps) {
-  const show = signal(false)
-  const label = props.label || (f => f)
-  const key = props.key || (f => f)
-  const placeholder = h('span.placeholder', props.placeholder)
-  const display = () => props?.value?.() ? label(props.value()) : placeholder
-  const value = (...args) => (!args.length) ? props.value() : (show(false), props.value(key(args[0])))
-
-  return h('span.select', {id: props.id, class:props.class, style:'position:relative'}, [
-    h(Button, {onClick:_ => show(b=>!b)}, display),
-    h(Dialog, {show:()=>show}, h(Options, {
-      options: props.options,
-      value: ()=>value,
-      label
-    }))
-  ])
-}

package/src/ui/tab.ts

@@ -1,7 +0,0 @@
-export type TabProps = {
-
-}
-
-export function Tab(props: TabProps) {
-
-}

package/src/ui/table.ts

@@ -1,9 +0,0 @@
-export type TableProps = {
-}
-
-export function Table(props:TableProps) {
-  return h('table',[
-    h('thead',[]),
-    h('tbody',[])
-  ])
-}

package/src/ui/upload.ts

@@ -1,7 +0,0 @@
-import {h} from './h.ts'
-
-export type UploadProps = {}
-
-export function Upload(props:UploadProps) {
-  return h('input', props)
-}