164 lines
9.2 KiB
JavaScript
164 lines
9.2 KiB
JavaScript
import { Component, NewState, Util, $ } from '@apigo.cc/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.nobutton = container.hasAttribute('nobutton')
|
||
container.request = { method: 'POST' }
|
||
container.response = {}
|
||
container.result = null
|
||
|
||
// Ensure data is reactive and mapped to state.data for template context
|
||
Object.defineProperty(container, 'data', {
|
||
get: () => container.state.data,
|
||
set: v => { container.state.data = (v?.__isProxy ? v : NewState(v || {})); }
|
||
})
|
||
container.data = container.data || {} // Initialize
|
||
container._thisObj = container
|
||
|
||
// TODO: $$ 双重计算机制暂不提供循环依赖保护，schema 编写者需确保 item.if 逻辑无副作用
|
||
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 d-flex \${this.inline ? 'auto-form-inline h-100 w-100' : ''}">
|
||
<form $class="w-100 \${this.inline ? 'd-flex align-items-stretch flex-fill h-100' : (this.vertical ? 'd-flex flex-column flex-fill' : 'auto-grid-form')}" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">
|
||
<template $each="this.state.schema || []" as="item">
|
||
<div $$if="item.if || 'true'" 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" $type="item.type" $.="item.setting || {}" $bind="this.data[item.name]" $class="form-control h-100 \${item.type === 'number' ? 'text-end' : ''}">
|
||
<select $if="item.type === 'select'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="form-select h-100">
|
||
<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 bg-body' : ''}" style="white-space:nowrap; border-radius: 4px;">
|
||
<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 \${this.inline ? '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]" $onchange="event.stopPropagation()">
|
||
</div>
|
||
<textarea $if="item.type === 'textarea'" $name="item.name" class="form-control" $.="item.setting || {}" $bind="this.data[item.name]"></textarea>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div $if="!this.inline && !this.nobutton" 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, typeName) => {
|
||
const entry = { name, typeName: typeName || name }
|
||
if (typeof document !== 'undefined') {
|
||
if (document.readyState !== 'loading' && Component.getTemplate('AutoForm')) AutoForm._addAutoFormComponent(entry)
|
||
else _pendingAutoFormComponents.push(entry)
|
||
}
|
||
},
|
||
_addAutoFormComponent: entry => {
|
||
const { name, typeName } = entry
|
||
const template = Component.getTemplate('AutoForm')
|
||
if (template) {
|
||
let container = $(template.content, '[control-wrapper]')
|
||
if (!container) {
|
||
const nested = $(template.content, 'template')
|
||
if (nested) container = $(nested.content, '[control-wrapper]')
|
||
}
|
||
if (container && !container.querySelector(name)) {
|
||
container.appendChild(Util.makeDom(`<${name} $if="item.type?.toLowerCase() === '${typeName.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="thisNode.closest('AutoForm').data[item.name]"></${name}>`))
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
if (typeof document !== 'undefined') {
|
||
const initAutoForm = () => {
|
||
_pendingAutoFormComponents.forEach(entry => AutoForm._addAutoFormComponent(entry))
|
||
_pendingAutoFormComponents.length = 0
|
||
}
|
||
if (document.readyState !== 'loading') setTimeout(initAutoForm, 100)
|
||
else document.addEventListener('DOMContentLoaded', () => setTimeout(initAutoForm, 100), true)
|
||
}
|
||
|
||
Component.register('TagsInput', container => {
|
||
container.state = NewState({ tags: [] })
|
||
container.addEventListener('bind', e => {
|
||
container.state.tags = Array.isArray(e.detail) ? e.detail : []
|
||
})
|
||
// Handle direct property access
|
||
Object.defineProperty(container, 'value', {
|
||
get: () => container.state.tags,
|
||
set: v => { container.state.tags = Array.isArray(v) ? v : []; }
|
||
})
|
||
}, Util.makeDom(/*html*/`
|
||
<div class="form-control d-flex flex-wrap gap-1 align-items-center w-100" style="cursor:text; min-height: 38px; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 8px !important;">
|
||
<button $each="(this.state && this.state.tags) || []" type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown="${Util.getFunctionBody(function (event) {
|
||
if (['Backspace', 'Delete'].includes(event.key)) {
|
||
event.preventDefault()
|
||
if (this.state?.tags) {
|
||
this.state.tags.splice(index, 1)
|
||
this.state.tags = this.state.tags
|
||
this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: this.state.tags }))
|
||
Promise.resolve().then(() => {
|
||
const buttons = this.querySelectorAll('button');
|
||
if (buttons.length > 0) (buttons[index > 0 ? index - 1 : 0] || buttons[0]).focus()
|
||
else { const input = $(this, 'input'); if (input) 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; height: 32px" $onkeydown="${Util.getFunctionBody(function (event) {
|
||
if (event.isComposing) return
|
||
if (['Enter', ',', ' '].includes(event.key)) {
|
||
event.preventDefault()
|
||
const v = thisNode.value.trim()
|
||
if (v && this.state?.tags && !this.state.tags.includes(v)) {
|
||
this.state.tags.push(v)
|
||
this.state.tags = this.state.tags
|
||
this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: this.state.tags }))
|
||
}
|
||
thisNode.value = ''
|
||
}
|
||
})}">
|
||
</div>
|
||
`), Util.makeDom(/*html*/`<style>
|
||
TagsInput { display: flex; align-items: center; min-height: 100%; width: 100%; background: transparent !important; }
|
||
TagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}
|
||
</style>`))
|
||
|
||
AutoForm.register('TagsInput')
|
||
|