base/src/form.js

import { Component, NewState, Util, $ } from '@web/state'
import { HTTP } from './http.js'

Component.register('AutoForm', container => {
	if (!container.state.schema) container.state.schema = []
	container.vertical = container.hasAttribute('vertical')
	container.inline = container.hasAttribute('inline')
	container.request = { method: 'POST' }
	container.response = {}
	container.result = null

	// 初始化数据代理与联动逻辑
	const setupData = () => {
		if (!container.data || !container.data.__watch) {
			container.data = NewState(container.data || {})
		}
		container.data.__watch('*', () => {
			if (container.inline) {
				const dt = container.closest('DataTable')
				if (dt && dt.refresh) dt.refresh()
			}
		})
	}

	// 如果 data 已经存在（可能是同步绑定的），立即设置；否则延迟一帧等待属性绑定完成
	if (container.data) setupData()
	else requestAnimationFrame(setupData)

	container.form = $(container, 'form')
	container.submit = (opt = {}) => {
		if (!container.form.reportValidity()) return globalThis.UI?.toast?.('{#verify failed#}', { type: 'danger' })
		if (!container.dispatchEvent(new CustomEvent('submit', { detail: container.data, cancelable: true, bubbles: false }))) return
		const req = { ...container.request, data: container.data, noui: true, ...opt }
		let task = null
		if (container.api) task = container.api.do(req)
		else if (container.request.url) task = HTTP.request(req)
		else return console.warn('{#please config .api or .request.url to auto submit#}')
		task.then(resp => {
			container.response = resp
			container.result = resp.result
			if (typeof resp.result === 'object' && resp.result.error) throw new Error(resp.result.error)
			container.dispatchEvent(new CustomEvent('response', { detail: resp, bubbles: false }))
		}).catch(err => {
			if (globalThis.UI?.toast) UI.toast(err.message, { type: 'danger' })
			container.dispatchEvent(new CustomEvent('error', { detail: err, bubbles: true }))
		})
	}
}, Util.makeDom(/*html*/`
<div $class="'auto-form-root' + (this.inline ? ' auto-form-inline min-h-100 w-100' : '')">
  <form $class="'h-100 w-100 d-flex ' + (this.inline ? 'align-items-center' : (this.vertical ? 'flex-column' : 'auto-grid-form'))" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">
  <div $each="this.state.schema || []" style="display:contents">
    <label $if="!this.inline" $name="item.name" class="col-form-label text-muted" $text="item.label"></label>
    <div control-wrapper $class="this.inline ? 'flex-grow-1 h-100 d-flex align-items-center' : 'mb-3'">
      <input $if="['text', 'password', 'email', 'number', 'date', 'datetime', 'file'].includes(item.type)" $name="item.name" class="form-control" $type="item.type" $.="item.setting || {}" $bind="this.data[item.name]" $class="item.type === 'number' ? 'text-end' : ''">
      <select $if="item.type === 'select'" $name="item.name" class="form-select" $.="item.setting || {}" $bind="this.data[item.name]">
        <option value="" $if="item.placeholder" $text="item.placeholder" disabled></option>
        <option $each="item.options" $value="item.value || item" $text="item.label || item"></option>
      </select>
      <div $if="['checkbox', 'radio'].includes(item.type)" $class="this.inline ? 'h-100 d-flex align-items-center px-2 gap-3 justify-content-center w-100' : ''" style="white-space:nowrap">
        <label $each="item.options || [item.text||item.label||item.name]" as="option" $class="'form-check' + (item.vertical ? '' : ' form-check-inline') + ' mb-0 d-flex align-items-center p-0'">
          <input $name="item.name" class="form-check-input me-1" $type="item.type" $.="item.setting || {}" $value="item.options?option:'on'" $bind="this.data[item.name]">
          <span $if="!this.inline || (item.options && item.options.length > 0)" $text="option" class="form-check-label"></span>
        </label>
      </div>
      <div $if="item.type==='switch'" class="form-check form-switch fs-4 h-100 d-flex align-items-center px-2 m-0 justify-content-center w-100" style="padding-left:0">
        <input $name="item.name" class="form-check-input m-0" type="checkbox" style="cursor:pointer" $bind="this.data[item.name]">
      </div>
      <textarea $if="item.type==='textarea'" $name="item.name" class="form-control" $.="item.setting || {}" $bind="this.data[item.name]"></textarea>
    </div>
  </div>
  <div $if="!this.inline" class="d-flex justify-content-end align-items-baseline gap-3 mt-3" style="grid-column:1/-1">
    <div slot-id="actions"></div>
    <button type="submit" class="btn btn-primary" $text="this.submitlabel || '{#Submit#}'"></button>
  </div>
  </form>
</div>
`), Util.makeDom(/*html*/`<style>
	@media (min-width: 576px) { .auto-grid-form {display: grid;grid-template-columns: max-content 1fr} .auto-grid-form .col-form-label {text-align: right; margin-bottom: 1rem;padding-right: 1rem;max-width: 200px} }
	.auto-form-inline { background-color: var(--bs-body-bg); }
	.auto-form-inline.min-h-100 { min-height: 100%; height: auto; }
	.auto-form-inline .form-control, .auto-form-inline .form-select { border-radius: 0; border: none; background-color: transparent !important; min-height: 100%; height: auto; width: 100%; padding: 0 8px; box-shadow: none; color: inherit; }
	.auto-form-inline .form-select { background-position: right 4px center; background-size: 12px 10px; padding-right: 20px; }
	.auto-form-inline textarea.form-control { padding: 8px; min-height: 100px; height: auto; }
</style>`))

const _pendingAutoFormComponents = []
export const AutoForm = {
	register: name => {
		if (typeof document !== 'undefined') {
			if (document.readyState !== 'loading' && Component.getTemplate('AutoForm')) AutoForm._addAutoFormComponent(name)
			else _pendingAutoFormComponents.push(name)
		}
	},
	_addAutoFormComponent: name => {
		const template = Component.getTemplate('AutoForm')
		if (template) {
			$(template.content, '[control-wrapper]')?.appendChild(Util.makeDom(`<${name} $if="item.type?.toUpperCase() === '${name.toUpperCase()}'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]"></${name}>`))
		}
	}
}

if (typeof document !== 'undefined') {
    const initAutoForm = () => {
		_pendingAutoFormComponents.forEach(name => AutoForm._addAutoFormComponent(name))
		_pendingAutoFormComponents.length = 0
	}
	if (document.readyState !== 'loading') setTimeout(initAutoForm, 100)
    else document.addEventListener('DOMContentLoaded', () => setTimeout(initAutoForm, 100), true)
}

Component.register('TagsInput', container => {
	container.addEventListener('bind', e => {
		container.state.tags = e.detail || []
	})
}, Util.makeDom(/*html*/`
<div class="form-control d-flex flex-wrap gap-1 align-items-center" style="min-height:38px;cursor:text">
  <button $each="this.state.tags" type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown="${Util.getFunctionBody(event => {
	if (['Backspace', 'Delete'].includes(event.key)) {
		event.preventDefault()
		this.state.tags.splice(index, 1)
		this.state.tags = this.state.tags
		this.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: this.state.tags }))
		Promise.resolve().then(() => {
			const buttons = $$(this, 'button');
			(buttons.length > 0 ? buttons[index > 0 ? index - 1 : 0] : $(this, 'input')).focus()
		})
	}
})}" $text="item"></button>
  <input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none" $onkeydown="${Util.getFunctionBody(event => {
	if (event.isComposing) return
	if (['Enter', ',', ' '].includes(event.key)) {
		event.preventDefault()
		const v = thisNode.value.trim()
		if (v && !this.state.tags.includes(v)) {
			this.state.tags.push(v)
			this.state.tags = this.state.tags
			this.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: this.state.tags }))
		}
		thisNode.value = ''
	}
})}">
</div>
`), Util.makeDom(/*html*/`<style>TagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}</style>`))

AutoForm.register('TagsInput')