feat: add <checkbox> and <slider> (#1)

* feat: `<checkbox>` & `<slider>`

* chore: add test

Author: onion108

packages/model/src/checkbox.ts

@@ -0,0 +1,29 @@
+import type { Ref } from '@vue/reactivity'
+import type { Context } from 'sciux-laplace'
+
+import { toValue } from '@vue/reactivity'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+
+const T = type({
+  model: 'string',
+  disabled: 'boolean',
+})
+
+export default defineComponent<'input', typeof T.infer, Context>((attrs, context) => {
+  const input = document.createElement('input')
+  input.type = 'checkbox'
+  if (attrs.model) {
+    input.addEventListener('input', (e) => {
+      (context[attrs.model!.value!] as Ref<boolean>).value = (e.target as HTMLInputElement).checked
+    })
+  }
+  return {
+    name: 'input',
+    attrs: T,
+    setup: () => {
+      input.disabled = toValue(attrs.disabled)
+      return input
+    },
+  }
+})

packages/model/src/index.ts

@@ -1,2 +1,4 @@
 export { default as button } from './button'
+export { default as checkbox } from './checkbox'
 export { default as input } from './input'
+export { default as slider } from './slider'

packages/model/src/slider.ts

@@ -0,0 +1,34 @@
+import type { Ref } from '@vue/reactivity'
+import type { Context } from 'sciux-laplace'
+
+import { toValue } from '@vue/reactivity'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+
+const T = type({
+  model: 'string',
+  defaultValue: 'number',
+  disabled: 'boolean',
+})
+
+export default defineComponent<'input', typeof T.infer, Context>((attrs, context) => {
+  const input = document.createElement('input')
+  input.type = 'range'
+  input.min = '0'
+  input.max = '1'
+  input.step = 'any'
+  if (attrs.model) {
+    input.addEventListener('input', (e) => {
+      (context[attrs.model!.value!] as Ref<number>).value = Number.parseFloat((e.target as HTMLInputElement).value)
+    })
+  }
+  return {
+    name: 'input',
+    attrs: T,
+    setup: () => {
+      input.defaultValue = toValue(attrs.defaultValue).toString()
+      input.disabled = toValue(attrs.disabled)
+      return input
+    },
+  }
+})

packages/test/src/example.sciux

@@ -1,12 +1,15 @@
 <columns>
   <let :value="2" />
+  <let :checked="false" />
   <flexbox>1</flexbox>
   <flexbox>{{ value }}</flexbox>
+  <flexbox>{{ checked }}</flexbox>
   <rows>
     <flexbox>1</flexbox>
     <flexbox>1</flexbox>
     <flexbox>
       <input model="value"/>
+      <checkbox model="checked"/>
     </flexbox>
   </rows>
-</columns>
+</columns>

packages/test/src/main.ts

@@ -1,6 +1,6 @@
 import { align, block, columns, flexbox, grid, rows } from '@sciux/layout'
 // import { model } from "@sciux/model";
-import { button, input } from '@sciux/model'
+import { button, checkbox, input, slider } from '@sciux/model'
 import { components, render } from 'sciux-laplace'
 import source from './example.sciux?raw'
 
@@ -12,5 +12,7 @@ components.set('grid', grid)
 components.set('align', align)
 components.set('button', button)
 components.set('input', input)
+components.set('checkbox', checkbox)
+components.set('slider', slider)
 
 render(source, document.getElementById('app')!)