From 7b9917ac8f1b47f25bb68705ddc9da9ecf81b47a Mon Sep 17 00:00:00 2001
From: 27Onion Nebell <zzy20080201@gmail.com>
Date: Sat, 14 Jun 2025 16:11:59 +0800
Subject: [PATCH] feat: add `<select>` and `<option>`

---
 packages/model/src/select.ts | 40 ++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/packages/model/src/select.ts b/packages/model/src/select.ts
index efbc99e..c7c84ff 100644
--- a/packages/model/src/select.ts
+++ b/packages/model/src/select.ts
@@ -1,7 +1,12 @@
+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'
 
 export const SelectType = type({
   model: 'string',
+  disabled: 'boolean',
 })
 
 export const SelectOptionType = type({
@@ -9,3 +14,38 @@ export const SelectOptionType = type({
   selected: 'boolean',
   disabled: 'boolean',
 })
+
+export const selectComponent = defineComponent<'select', typeof SelectType.infer, Context>((attrs, context) => {
+  const select = document.createElement('select')
+  if (attrs.model) {
+    select.addEventListener('select', (e) => {
+      const target = e.target as HTMLSelectElement
+      (context[attrs.model!.value!] as Ref<string>).value = target.value
+    })
+  }
+  return {
+    name: 'select',
+    attrs: SelectType,
+    setup: (children) => {
+      select.disabled = toValue(attrs.disabled)
+      for (const child of children()) {
+        select.appendChild(child)
+      }
+      return select
+    },
+  }
+})
+
+export const selectOptionComponent = defineComponent<'option', typeof SelectOptionType.infer, Context>((attrs, _context) => {
+  const option = document.createElement('option')
+  return {
+    name: 'option',
+    attrs: SelectOptionType,
+    setup: () => {
+      option.value = toValue(attrs.value)
+      option.selected = toValue(attrs.selected)
+      option.disabled = toValue(attrs.disabled)
+      return option
+    },
+  }
+})