diff --git a/CHANGELOG.md b/CHANGELOG.md index 8261c2b..93d3d0d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,14 @@ # Changelog +## [1.0.6] - 2026-05-27 +### Added +- AutoForm: Support data-driven visibility using `field.if` (utilizing state's `$$` double-calculation). +- AutoForm: Added reactive `data` property mapped to `state.data`. + +### Changed +- AutoForm: Decoupled from global `State.editingData`. Data must now be passed via the `data` property. +- Internal: Optimized `_addAutoFormComponent` to support nested templates. + ## [1.0.5] - 2026-05-23 ### Added - Documented project-wide "Manual DOM Sync" design principle for performance critical components. diff --git a/README.md b/README.md index b031d89..9ed2f36 100644 --- a/README.md +++ b/README.md @@ -44,15 +44,19 @@ * `UI.toast(msg, {type: 'success'})`: 自动消失的轻提示。 ### 3. 数据驱动表单 (``) -核心配置项：`$.state.schema` (结构) 和 `$.state.data` (数据)。 +核心配置项：`$.state.schema` (结构) 和 `data` (响应式数据)。 +* **`data`**: 表单实时绑定的响应式对象 (建议通过 `NewState` 创建)。 +* **`field.if`**: 支持使用字符串表达式进行联动显隐。在表达式中可通过 `this.data` 访问表单数据。 + +**示例 (动态联动显隐):** ```html + $.data="formState"> ``` diff --git a/dist/base.js b/dist/base.js index a77c0b8..2ef60ec 100644 --- a/dist/base.js +++ b/dist/base.js @@ -107,13 +107,13 @@ Component.register("Modal", (container) => { `
-
-
-
- +
+
+
+
-
-
+
+
@@ -124,11 +124,11 @@ Component.register("Dialog", Component.getSetupFunction("Modal"), Util.makeDom( `
-
-
-
-
- +
+
+
+
+
@@ -213,17 +213,18 @@ 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; - if (container.inline) { - State.__watch("editingData", (data) => { - container.data = data; - }); - State.__watch("editingSchema", (schema) => { - container.state.schema = schema; - }); - } + Object.defineProperty(container, "data", { + get: () => container.state.data, + set: (v) => { + container.state.data = (v == null ? void 0 : v.__isProxy) ? v : NewState(v || {}); + } + }); + container.data = container.data || {}; + container._thisObj = container; container.form = $(container, "form"); container.submit = (opt = {}) => { var _a, _b; @@ -249,9 +250,10 @@ Component.register("AutoForm", (container) => { /*html*/ `
-
-
- + + +
@@ -299,7 +302,11 @@ const AutoForm = { _addAutoFormComponent: (name) => { const template = Component.getTemplate("AutoForm"); if (template) { - const container = $(template.content, "[control-wrapper]"); + 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() === '${name.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="thisNode.closest('AutoForm').data[item.name]">`)); } diff --git a/dist/base.min.js b/dist/base.min.js index 53b4441..f0af74f 100644 --- a/dist/base.min.js +++ b/dist/base.min.js @@ -1 +1 @@ -import{Component as t,NewState as e,Util as i,$ as s,Hash as n,RefreshState as a}from"@web/state";const o={get:({url:t,...e})=>o.request({url:t,method:"GET",...e}),post:({url:t,data:e,...i})=>o.request({url:t,method:"POST",data:e,...i}),put:({url:t,data:e,...i})=>o.request({url:t,method:"PUT",data:e,...i}),delete:({url:t,...e})=>o.request({url:t,method:"DELETE",...e}),head:({url:t,...e})=>o.request({url:t,method:"HEAD",...e}),request:async({url:t,method:e="POST",data:i,headers:s={},responseType:n,timeout:a=1e4})=>{var o;const l={method:e=e.toUpperCase(),signal:null==(o=AbortSignal.timeout)?void 0:o.call(AbortSignal,a)};if(void 0!==i&&"GET"!==e&&"HEAD"!==e){if(i instanceof HTMLFormElement&&(i=new FormData(i)),i&&"object"==typeof i&&!(i instanceof FormData)&&!(i instanceof ArrayBuffer||ArrayBuffer.isView(i))&&Object.values(i).some(t=>t instanceof File||t instanceof Blob||t instanceof FileList||Array.isArray(t)&&t.some(t=>t instanceof File||t instanceof Blob))){const t=new FormData;for(const[e,s]of Object.entries(i))s instanceof FileList||Array.isArray(s)?Array.from(s).forEach(i=>t.append(e,i)):null!=s&&t.append(e,s);i=t}i instanceof FormData?delete s["Content-Type"]:"string"==typeof i||i instanceof ArrayBuffer||ArrayBuffer.isView(i)||(i=JSON.stringify(i),s["Content-Type"]||(s["Content-Type"]="application/json")),l.body=i}Object.keys(s).length&&(l.headers=s);const r={error:null,ok:null,status:0,headers:{},responseType:"",result:null};try{const e=await fetch(t,l);if(Object.assign(r,{ok:e.ok,status:e.status,headers:Object.fromEntries(e.headers.entries())}),!n){const t=e.headers.get("Content-Type")||"";n=t.includes("application/json")?"json":/image|video|audio|pdf|zip|octet-stream/.test(t)?"binary":"text",r.responseType=n}!1===r.ok&&(r.error=(r.statusText||"HTTP "+r.status+" error")+" for "+t),r.result="json"===n?await e.json():"binary"===n?await e.arrayBuffer():await e.text()}catch(t){Object.assign(r,{error:t.message||String(t),ok:!1})}return r}},l=t.register("API",t=>{t.request=e({url:"",method:"GET",headers:{},data:null,timeout:1e4,responseType:""}),t.response=e({loading:!1,ok:null,status:null,error:null,headers:{},responseType:"",result:null}),t.result=e(),t.do=(e={})=>new Promise((i,s)=>{const n={...t.request,...e};if(!n.url)throw new Error(".url is required");n.headers={...t.request.headers,...e.headers},t.response.loading=!0,o.request(n).then(e=>{if(Object.keys(e).forEach(i=>{"result"!==i&&(t.response[i]=e[i])}),e.result&&"object"==typeof e.result&&t.result&&"object"==typeof t.result?Object.assign(t.result,e.result):t.result=e.result,t.response.loading=!1,!1===e.ok)throw new Error(e.error);if("object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1})),i(e)}).catch(i=>{var n;!e.noui&&(null==(n=globalThis.UI)?void 0:n.toast)&&UI.toast(i.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:i,bubbles:!0})),s(i)})});let i=null;t.request.__watch(null,()=>{t.hasAttribute("auto")&&t.request.url&&(i||(i=Promise.resolve().then(()=>{t.do(),i=null})))})}),r={};t.register("Modal",t=>{t.modal=new bootstrap.Modal(t),t.addEventListener("bind",e=>{e.detail?t.modal.show():t.modal.hide()}),t.addEventListener("hide.bs.modal",()=>{var e;null==(e=document.activeElement)||e.blur(),t.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:!1}))}),i.copyFunction(t,t.modal,"show","hide")},i.makeDom('\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n')),t.register("Dialog",t.getSetupFunction("Modal"),i.makeDom('\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n'));let d=0;r.showDialog=function({title:t="",message:e="",buttons:i=["{#Close#}"],type:s="body"}){const n=document.body.appendChild(document.createElement("Dialog"));return n.style.zIndex=2e3+ ++d,Promise.resolve().then(()=>{Object.assign(n.state,{message:e,title:t,type:s,buttons:i}),n.show()}),new Promise(t=>{n.addEventListener("change",e=>{d--,t(n.result||0),n.remove()})})},r.alert=function(t,e={}){return r.showDialog({message:t,...e})},r.confirm=function(t,e={}){return new Promise(i=>r.showDialog({message:t,buttons:["{#Cancel#}","{#Confirm#}"],...e}).then(t=>i(t>=2)).catch(()=>i(!1)))},t.register("Toast",t=>{t.toast=new bootstrap.Toast(t,{autohide:t.state.delay>0}),i.copyFunction(t,t.toast,"show","hide"),t.addEventListener("show.bs.toast",()=>{if(t.state.delay>0){let e;const i=()=>{t.state.left=t.state.delay/1e3,e=setInterval(()=>{(!t.isConnected||--t.state.left<=0)&&clearInterval(e)},1e3)};i(),t.addEventListener("mouseenter",()=>{clearInterval(e),t.state.left=void 0}),t.addEventListener("mouseleave",i)}})},i.makeDom('\n
\n
\n
\n
\n \n \n
\n \n
\n
\n \n
\n
\n
\n'),i.makeDom('
')),r.toast=function(t,e={}){const i=e.delay??5e3,n=document.createElement("Toast");n.state={delay:i,left:i?i/1e3:void 0,type:e.type||"primary",message:t,buttons:e.buttons||[]},s(`[toast-container="${e.container||"default"}"]`).appendChild(n),Promise.resolve().then(()=>n.show())},r.toastConfirm=function(t,e={}){return new Promise(i=>r.toast(t,{buttons:["{#Confirm#}"],...e}).then(t=>i(1===t)).catch(()=>i(!1)))},t.register("AutoForm",t=>{t.state.schema||(t.state.schema=[]),t.vertical=t.hasAttribute("vertical"),t.inline=t.hasAttribute("inline"),t.request={method:"POST"},t.response={},t.result=null,t.inline&&(g.__watch("editingData",e=>{t.data=e}),g.__watch("editingSchema",e=>{t.state.schema=e})),t.form=s(t,"form"),t.submit=(e={})=>{var i,s;if(!t.form.reportValidity())return null==(s=null==(i=globalThis.UI)?void 0:i.toast)?void 0:s.call(i,"{#verify failed#}",{type:"danger"});if(!t.dispatchEvent(new CustomEvent("submit",{detail:t.data,cancelable:!0,bubbles:!1})))return;const n={...t.request,data:t.data,noui:!0,...e};let a=null;if(t.api)a=t.api.do(n);else{if(!t.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");a=o.request(n)}a.then(e=>{if(t.response=e,t.result=e.result,"object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1}))}).catch(e=>{var i;(null==(i=globalThis.UI)?void 0:i.toast)&&UI.toast(e.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:e,bubbles:!0}))})}},i.makeDom('\n
\n \n
\n \n
\n \n \n
\n \n
\n
\n \n
\n \n
\n
\n
\n
\n \n
\n \n
\n'),i.makeDom(""));const c=[],m={register:e=>{"undefined"!=typeof document&&("loading"!==document.readyState&&t.getTemplate("AutoForm")?m._addAutoFormComponent(e):c.push(e))},_addAutoFormComponent:e=>{const n=t.getTemplate("AutoForm");if(n){const t=s(n.content,"[control-wrapper]");t&&!t.querySelector(e)&&t.appendChild(i.makeDom(`<${e} $if="item.type?.toLowerCase() === '${e.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="thisNode.closest('AutoForm').data[item.name]">`))}}};if("undefined"!=typeof document){const t=()=>{c.forEach(t=>m._addAutoFormComponent(t)),c.length=0};"loading"!==document.readyState?setTimeout(t,100):document.addEventListener("DOMContentLoaded",()=>setTimeout(t,100),!0)}t.register("TagsInput",t=>{t.state=e({tags:[]}),t.addEventListener("bind",e=>{t.state.tags=Array.isArray(e.detail)?e.detail:[]}),Object.defineProperty(t,"value",{get:()=>t.state.tags,set:e=>{t.state.tags=Array.isArray(e)?e:[]}})},i.makeDom(`\n
\n \n \n
\n`),i.makeDom("")),m.register("TagsInput");const u=(t={})=>{const e=new Map,s=new Map;let n=1;const a=i.newAvg();let o=0,l=0,r=0,d=null,c=null,m=!1;const u=t.itemHeight||null;return{reset:(t,i)=>{if(m=!1,e.clear(),s.clear(),a.clear(),r=0,d=null,c=null,!(null==t?void 0:t.length))return[];const h=t.length;n=Math.ceil(Math.sqrt(h))||10;const p=window.getComputedStyle(i);o=parseFloat(p.paddingTop)||0,l=parseFloat(p.rowGap)||0;const b=Math.max(10,Math.ceil((i.clientHeight||100)/(u||32)));return t.slice(0,Math.min(3*b,h))},init:(t,i)=>{if(m)return;const o=t.length;let l=u||a.get()||32;o>0&&"object"==typeof t[0]&&null!==t[0]&&t[0]._itemHeight&&(l=t[0]._itemHeight),a.add(l),null===d&&(d=0,c=0);for(let i=0;i{if(null===d){const t=window.getComputedStyle(i);d=parseFloat(t.marginTop)||0,c=parseFloat(t.marginBottom)||0}0!==t||r||(r=d);const o=i.offsetHeight+d+c+l,m=e.get(t);if(o!==m){e.set(t,o),a.add(o);const i=o-(m||0),l=t-t%n;s.has(l)&&s.set(l,s.get(l)+i)}},calc:(t,i)=>{if(!m||!i)return null;const d=i.length;let c=Math.max(10,Math.ceil((t.clientHeight||100)/(a.get()||32))),u=o+r+l,h=0,p=0,b=0,f=0,g=[];const v=t.scrollTop;for(let t=0;t0?l:0)),postHeight:h>0?Math.max(0,h-2*l):0,renderedList:g,listStartIndex:b}}}};t.register("List",t=>{t.mode=t.getAttribute("mode")||"normal",t.fast=t.hasAttribute("fast"),t.collapsible=t.hasAttribute("collapsible");const s={idfield:"id",labelfield:"label",summaryfield:"summary",groupidfield:"id",grouplabelfield:"label",groupsummaryfield:"summary",groupfield:"group",parentfield:"parent",groupicon:"folder",itemicon:"file"};t.collapsed=e({});const n=()=>{i.updateDefaults(t,s);const e=t.state.list||[],n=[];if("group"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.groupfield]]??(i[s]=[])).push(e)}),(t.state.groups||[]).forEach(e=>{n.push({type:"group",...e});const s=i[e[t.groupidfield]];s&&s.forEach(t=>n.push({type:"item",...t}))})}else if("tree"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.parentfield]||""]??(i[s]=[])).push(e)});const s=(e,a,o)=>e.forEach(e=>{var l;const r=e[t.idfield],d=!!(null==(l=i[r])?void 0:l.length),c=t.collapsed[r];n.push({type:"item",...e,_level:a,_hasChildren:d,_parents:o}),d&&!c&&s(i[r],a+1,[...o,r])});s(i[""]||[],0,[])}else e.forEach(t=>n.push({type:"item",...t}));t.state._flatList=n};t.state.__watch("list",n);const a=t.fast?u():null;t.state._renderedList=[],t.refresh=()=>{if(!t.fast)return;const e=a.calc(t,t.state._flatList);e&&(t.state.prevHeight=e.prevHeight,t.state.postHeight=e.postHeight,t.state._listStartIndex=e.listStartIndex,t.state._renderedList=e.renderedList)},t.onItemUpdate=(e,i)=>{t.fast&&a.update(e+(t.state._listStartIndex||0),i)},t.state.__watch("_flatList",e=>{t.fast?(t.state._listStartIndex=0,t.state._renderedList=a.reset(e,t)||[],setTimeout(()=>{t.state._flatList===e&&a.init(e,t.refresh)})):t.state._renderedList=e}),t.selectItem=(e,i)=>{t.hasAttribute("auto-select")&&(t.state.selectedItem=t.state.selectedItem===e[t.idfield]?null:e[t.idfield]),t.dispatchEvent(new CustomEvent("itemclick",{bubbles:!1,detail:{item:e,index:i+(t.fast&&t.state._listStartIndex||0)}}))},t.selectGroup=(e,i)=>{t.hasAttribute("auto-select-group")&&(t.state.selectedGroup=t.state.selectedGroup===e[t.groupidfield]?null:e[t.groupidfield]),t.dispatchEvent(new CustomEvent("groupclick",{bubbles:!1,detail:{item:e,index:i}}))},t.toggleCollapse=e=>{t.collapsible&&e._hasChildren&&(t.collapsed[e[t.idfield]]=!t.collapsed[e[t.idfield]],n())},n()},i.makeDom('\n
\n\t
\n\t\n\t
\n
\n')),t.register("Nav",t=>{t.click=(e,i)=>{e.noselect||i||(n.nav=e.name),t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))}},i.makeDom('\n
\n\t\n\t\n\t\n\t
\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n
\n'));let h=!1,p={},b={};const f={start:(t,{onmousemove:e,onmouseup:i})=>{p={x:t.clientX,y:t.clientY,w:0,h:0},b={onmousemove:e,onmouseup:i},h=!0}};"undefined"!=typeof document&&(document.addEventListener("mouseup",t=>{var e;h&&(h=!1,null==(e=b.onmouseup)||e.call(b,{event:t,...p}))}),document.addEventListener("mousemove",t=>{var e;h&&(p.w=t.clientX-p.x,p.h=t.clientY-p.y,null==(e=b.onmousemove)||e.call(b,{event:t,...p}))})),t.register("Resizer",t=>{t.isVertical=t.hasAttribute("vertical");const e=parseInt(t.getAttribute("min"))||10,i=parseInt(t.getAttribute("max"))||1e3,s=t.target||t.previousElementSibling;t.addEventListener("bind",e=>{void 0!==e.detail&&null!==e.detail&&(s.style[t.isVertical?"height":"width"]=e.detail+"px")});const n=(s,n,a)=>{const o=s+(t.isVertical?a:n);return oi?i:o};t.addEventListener("mousedown",e=>{const i=t.isVertical?s.offsetHeight:s.offsetWidth;f.start(e,{onmousemove:({w:e,h:a})=>{const o=n(i,e,a);s.style[t.isVertical?"height":"width"]=o+"px",t.dispatchEvent(new CustomEvent("resizing",{detail:{oldSize:i,newSize:o},bubbles:!1}))},onmouseup:({w:e,h:s})=>{const a=n(i,e,s);t.dispatchEvent(new CustomEvent("resize",{detail:{oldSize:i,newSize:a},bubbles:!1})),t.dispatchEvent(new CustomEvent("change",{detail:a,bubbles:!1}))}})})},i.makeDom("\n
\n"));const g=e({exitBlocks:0});globalThis.State=g,"undefined"!=typeof window&&window.addEventListener("beforeunload",t=>{g.exitBlocks>0&&t.preventDefault()});const v=document.documentElement;if(v.hasAttribute("$data-bs-theme")||v.hasAttribute("data-bs-theme")||v.setAttribute("$data-bs-theme","LocalStorage.darkMode?'dark':'light'"),globalThis.HTTP=o,globalThis.UI=r,globalThis.AutoForm=m,globalThis.MouseMover=f,"undefined"!=typeof document){const t=()=>a(document.documentElement);"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t,!0)}export{l as APIComponent,m as AutoForm,o as HTTP,f as MouseMover,g as State,r as UI,u as VirtualScroll}; +import{Component as t,NewState as e,Util as i,$ as s,Hash as n,RefreshState as a}from"@web/state";const o={get:({url:t,...e})=>o.request({url:t,method:"GET",...e}),post:({url:t,data:e,...i})=>o.request({url:t,method:"POST",data:e,...i}),put:({url:t,data:e,...i})=>o.request({url:t,method:"PUT",data:e,...i}),delete:({url:t,...e})=>o.request({url:t,method:"DELETE",...e}),head:({url:t,...e})=>o.request({url:t,method:"HEAD",...e}),request:async({url:t,method:e="POST",data:i,headers:s={},responseType:n,timeout:a=1e4})=>{var o;const l={method:e=e.toUpperCase(),signal:null==(o=AbortSignal.timeout)?void 0:o.call(AbortSignal,a)};if(void 0!==i&&"GET"!==e&&"HEAD"!==e){if(i instanceof HTMLFormElement&&(i=new FormData(i)),i&&"object"==typeof i&&!(i instanceof FormData)&&!(i instanceof ArrayBuffer||ArrayBuffer.isView(i))&&Object.values(i).some(t=>t instanceof File||t instanceof Blob||t instanceof FileList||Array.isArray(t)&&t.some(t=>t instanceof File||t instanceof Blob))){const t=new FormData;for(const[e,s]of Object.entries(i))s instanceof FileList||Array.isArray(s)?Array.from(s).forEach(i=>t.append(e,i)):null!=s&&t.append(e,s);i=t}i instanceof FormData?delete s["Content-Type"]:"string"==typeof i||i instanceof ArrayBuffer||ArrayBuffer.isView(i)||(i=JSON.stringify(i),s["Content-Type"]||(s["Content-Type"]="application/json")),l.body=i}Object.keys(s).length&&(l.headers=s);const r={error:null,ok:null,status:0,headers:{},responseType:"",result:null};try{const e=await fetch(t,l);if(Object.assign(r,{ok:e.ok,status:e.status,headers:Object.fromEntries(e.headers.entries())}),!n){const t=e.headers.get("Content-Type")||"";n=t.includes("application/json")?"json":/image|video|audio|pdf|zip|octet-stream/.test(t)?"binary":"text",r.responseType=n}!1===r.ok&&(r.error=(r.statusText||"HTTP "+r.status+" error")+" for "+t),r.result="json"===n?await e.json():"binary"===n?await e.arrayBuffer():await e.text()}catch(t){Object.assign(r,{error:t.message||String(t),ok:!1})}return r}},l=t.register("API",t=>{t.request=e({url:"",method:"GET",headers:{},data:null,timeout:1e4,responseType:""}),t.response=e({loading:!1,ok:null,status:null,error:null,headers:{},responseType:"",result:null}),t.result=e(),t.do=(e={})=>new Promise((i,s)=>{const n={...t.request,...e};if(!n.url)throw new Error(".url is required");n.headers={...t.request.headers,...e.headers},t.response.loading=!0,o.request(n).then(e=>{if(Object.keys(e).forEach(i=>{"result"!==i&&(t.response[i]=e[i])}),e.result&&"object"==typeof e.result&&t.result&&"object"==typeof t.result?Object.assign(t.result,e.result):t.result=e.result,t.response.loading=!1,!1===e.ok)throw new Error(e.error);if("object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1})),i(e)}).catch(i=>{var n;!e.noui&&(null==(n=globalThis.UI)?void 0:n.toast)&&UI.toast(i.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:i,bubbles:!0})),s(i)})});let i=null;t.request.__watch(null,()=>{t.hasAttribute("auto")&&t.request.url&&(i||(i=Promise.resolve().then(()=>{t.do(),i=null})))})}),r={};t.register("Modal",t=>{t.modal=new bootstrap.Modal(t),t.addEventListener("bind",e=>{e.detail?t.modal.show():t.modal.hide()}),t.addEventListener("hide.bs.modal",()=>{var e;null==(e=document.activeElement)||e.blur(),t.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:!1}))}),i.copyFunction(t,t.modal,"show","hide")},i.makeDom('\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n')),t.register("Dialog",t.getSetupFunction("Modal"),i.makeDom('\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n'));let d=0;r.showDialog=function({title:t="",message:e="",buttons:i=["{#Close#}"],type:s="body"}){const n=document.body.appendChild(document.createElement("Dialog"));return n.style.zIndex=2e3+ ++d,Promise.resolve().then(()=>{Object.assign(n.state,{message:e,title:t,type:s,buttons:i}),n.show()}),new Promise(t=>{n.addEventListener("change",e=>{d--,t(n.result||0),n.remove()})})},r.alert=function(t,e={}){return r.showDialog({message:t,...e})},r.confirm=function(t,e={}){return new Promise(i=>r.showDialog({message:t,buttons:["{#Cancel#}","{#Confirm#}"],...e}).then(t=>i(t>=2)).catch(()=>i(!1)))},t.register("Toast",t=>{t.toast=new bootstrap.Toast(t,{autohide:t.state.delay>0}),i.copyFunction(t,t.toast,"show","hide"),t.addEventListener("show.bs.toast",()=>{if(t.state.delay>0){let e;const i=()=>{t.state.left=t.state.delay/1e3,e=setInterval(()=>{(!t.isConnected||--t.state.left<=0)&&clearInterval(e)},1e3)};i(),t.addEventListener("mouseenter",()=>{clearInterval(e),t.state.left=void 0}),t.addEventListener("mouseleave",i)}})},i.makeDom('\n
\n
\n
\n
\n \n \n
\n \n
\n
\n \n
\n
\n
\n'),i.makeDom('
')),r.toast=function(t,e={}){const i=e.delay??5e3,n=document.createElement("Toast");n.state={delay:i,left:i?i/1e3:void 0,type:e.type||"primary",message:t,buttons:e.buttons||[]},s(`[toast-container="${e.container||"default"}"]`).appendChild(n),Promise.resolve().then(()=>n.show())},r.toastConfirm=function(t,e={}){return new Promise(i=>r.toast(t,{buttons:["{#Confirm#}"],...e}).then(t=>i(1===t)).catch(()=>i(!1)))},t.register("AutoForm",t=>{t.state.schema||(t.state.schema=[]),t.vertical=t.hasAttribute("vertical"),t.inline=t.hasAttribute("inline"),t.nobutton=t.hasAttribute("nobutton"),t.request={method:"POST"},t.response={},t.result=null,Object.defineProperty(t,"data",{get:()=>t.state.data,set:i=>{t.state.data=(null==i?void 0:i.__isProxy)?i:e(i||{})}}),t.data=t.data||{},t._thisObj=t,t.form=s(t,"form"),t.submit=(e={})=>{var i,s;if(!t.form.reportValidity())return null==(s=null==(i=globalThis.UI)?void 0:i.toast)?void 0:s.call(i,"{#verify failed#}",{type:"danger"});if(!t.dispatchEvent(new CustomEvent("submit",{detail:t.data,cancelable:!0,bubbles:!1})))return;const n={...t.request,data:t.data,noui:!0,...e};let a=null;if(t.api)a=t.api.do(n);else{if(!t.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");a=o.request(n)}a.then(e=>{if(t.response=e,t.result=e.result,"object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1}))}).catch(e=>{var i;(null==(i=globalThis.UI)?void 0:i.toast)&&UI.toast(e.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:e,bubbles:!0}))})}},i.makeDom('\n
\n
\n \n
\n
\n \n
\n
\n
\n'),i.makeDom(""));const c=[],m={register:e=>{"undefined"!=typeof document&&("loading"!==document.readyState&&t.getTemplate("AutoForm")?m._addAutoFormComponent(e):c.push(e))},_addAutoFormComponent:e=>{const n=t.getTemplate("AutoForm");if(n){let t=s(n.content,"[control-wrapper]");if(!t){const e=s(n.content,"template");e&&(t=s(e.content,"[control-wrapper]"))}t&&!t.querySelector(e)&&t.appendChild(i.makeDom(`<${e} $if="item.type?.toLowerCase() === '${e.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="thisNode.closest('AutoForm').data[item.name]">`))}}};if("undefined"!=typeof document){const t=()=>{c.forEach(t=>m._addAutoFormComponent(t)),c.length=0};"loading"!==document.readyState?setTimeout(t,100):document.addEventListener("DOMContentLoaded",()=>setTimeout(t,100),!0)}t.register("TagsInput",t=>{t.state=e({tags:[]}),t.addEventListener("bind",e=>{t.state.tags=Array.isArray(e.detail)?e.detail:[]}),Object.defineProperty(t,"value",{get:()=>t.state.tags,set:e=>{t.state.tags=Array.isArray(e)?e:[]}})},i.makeDom(`\n
\n \n \n
\n`),i.makeDom("")),m.register("TagsInput");const u=(t={})=>{const e=new Map,s=new Map;let n=1;const a=i.newAvg();let o=0,l=0,r=0,d=null,c=null,m=!1;const u=t.itemHeight||null;return{reset:(t,i)=>{if(m=!1,e.clear(),s.clear(),a.clear(),r=0,d=null,c=null,!(null==t?void 0:t.length))return[];const h=t.length;n=Math.ceil(Math.sqrt(h))||10;const p=window.getComputedStyle(i);o=parseFloat(p.paddingTop)||0,l=parseFloat(p.rowGap)||0;const b=Math.max(10,Math.ceil((i.clientHeight||100)/(u||32)));return t.slice(0,Math.min(3*b,h))},init:(t,i)=>{if(m)return;const o=t.length;let l=u||a.get()||32;o>0&&"object"==typeof t[0]&&null!==t[0]&&t[0]._itemHeight&&(l=t[0]._itemHeight),a.add(l),null===d&&(d=0,c=0);for(let i=0;i{if(null===d){const t=window.getComputedStyle(i);d=parseFloat(t.marginTop)||0,c=parseFloat(t.marginBottom)||0}0!==t||r||(r=d);const o=i.offsetHeight+d+c+l,m=e.get(t);if(o!==m){e.set(t,o),a.add(o);const i=o-(m||0),l=t-t%n;s.has(l)&&s.set(l,s.get(l)+i)}},calc:(t,i)=>{if(!m||!i)return null;const d=i.length;let c=Math.max(10,Math.ceil((t.clientHeight||100)/(a.get()||32))),u=o+r+l,h=0,p=0,b=0,f=0,g=[];const v=t.scrollTop;for(let t=0;t0?l:0)),postHeight:h>0?Math.max(0,h-2*l):0,renderedList:g,listStartIndex:b}}}};t.register("List",t=>{t.mode=t.getAttribute("mode")||"normal",t.fast=t.hasAttribute("fast"),t.collapsible=t.hasAttribute("collapsible");const s={idfield:"id",labelfield:"label",summaryfield:"summary",groupidfield:"id",grouplabelfield:"label",groupsummaryfield:"summary",groupfield:"group",parentfield:"parent",groupicon:"folder",itemicon:"file"};t.collapsed=e({});const n=()=>{i.updateDefaults(t,s);const e=t.state.list||[],n=[];if("group"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.groupfield]]??(i[s]=[])).push(e)}),(t.state.groups||[]).forEach(e=>{n.push({type:"group",...e});const s=i[e[t.groupidfield]];s&&s.forEach(t=>n.push({type:"item",...t}))})}else if("tree"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.parentfield]||""]??(i[s]=[])).push(e)});const s=(e,a,o)=>e.forEach(e=>{var l;const r=e[t.idfield],d=!!(null==(l=i[r])?void 0:l.length),c=t.collapsed[r];n.push({type:"item",...e,_level:a,_hasChildren:d,_parents:o}),d&&!c&&s(i[r],a+1,[...o,r])});s(i[""]||[],0,[])}else e.forEach(t=>n.push({type:"item",...t}));t.state._flatList=n};t.state.__watch("list",n);const a=t.fast?u():null;t.state._renderedList=[],t.refresh=()=>{if(!t.fast)return;const e=a.calc(t,t.state._flatList);e&&(t.state.prevHeight=e.prevHeight,t.state.postHeight=e.postHeight,t.state._listStartIndex=e.listStartIndex,t.state._renderedList=e.renderedList)},t.onItemUpdate=(e,i)=>{t.fast&&a.update(e+(t.state._listStartIndex||0),i)},t.state.__watch("_flatList",e=>{t.fast?(t.state._listStartIndex=0,t.state._renderedList=a.reset(e,t)||[],setTimeout(()=>{t.state._flatList===e&&a.init(e,t.refresh)})):t.state._renderedList=e}),t.selectItem=(e,i)=>{t.hasAttribute("auto-select")&&(t.state.selectedItem=t.state.selectedItem===e[t.idfield]?null:e[t.idfield]),t.dispatchEvent(new CustomEvent("itemclick",{bubbles:!1,detail:{item:e,index:i+(t.fast&&t.state._listStartIndex||0)}}))},t.selectGroup=(e,i)=>{t.hasAttribute("auto-select-group")&&(t.state.selectedGroup=t.state.selectedGroup===e[t.groupidfield]?null:e[t.groupidfield]),t.dispatchEvent(new CustomEvent("groupclick",{bubbles:!1,detail:{item:e,index:i}}))},t.toggleCollapse=e=>{t.collapsible&&e._hasChildren&&(t.collapsed[e[t.idfield]]=!t.collapsed[e[t.idfield]],n())},n()},i.makeDom('\n
\n\t
\n\t\n\t
\n
\n')),t.register("Nav",t=>{t.click=(e,i)=>{e.noselect||i||(n.nav=e.name),t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))}},i.makeDom('\n
\n\t\n\t\n\t\n\t
\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n
\n'));let h=!1,p={},b={};const f={start:(t,{onmousemove:e,onmouseup:i})=>{p={x:t.clientX,y:t.clientY,w:0,h:0},b={onmousemove:e,onmouseup:i},h=!0}};"undefined"!=typeof document&&(document.addEventListener("mouseup",t=>{var e;h&&(h=!1,null==(e=b.onmouseup)||e.call(b,{event:t,...p}))}),document.addEventListener("mousemove",t=>{var e;h&&(p.w=t.clientX-p.x,p.h=t.clientY-p.y,null==(e=b.onmousemove)||e.call(b,{event:t,...p}))})),t.register("Resizer",t=>{t.isVertical=t.hasAttribute("vertical");const e=parseInt(t.getAttribute("min"))||10,i=parseInt(t.getAttribute("max"))||1e3,s=t.target||t.previousElementSibling;t.addEventListener("bind",e=>{void 0!==e.detail&&null!==e.detail&&(s.style[t.isVertical?"height":"width"]=e.detail+"px")});const n=(s,n,a)=>{const o=s+(t.isVertical?a:n);return oi?i:o};t.addEventListener("mousedown",e=>{const i=t.isVertical?s.offsetHeight:s.offsetWidth;f.start(e,{onmousemove:({w:e,h:a})=>{const o=n(i,e,a);s.style[t.isVertical?"height":"width"]=o+"px",t.dispatchEvent(new CustomEvent("resizing",{detail:{oldSize:i,newSize:o},bubbles:!1}))},onmouseup:({w:e,h:s})=>{const a=n(i,e,s);t.dispatchEvent(new CustomEvent("resize",{detail:{oldSize:i,newSize:a},bubbles:!1})),t.dispatchEvent(new CustomEvent("change",{detail:a,bubbles:!1}))}})})},i.makeDom("\n
\n"));const g=e({exitBlocks:0});globalThis.State=g,"undefined"!=typeof window&&window.addEventListener("beforeunload",t=>{g.exitBlocks>0&&t.preventDefault()});const v=document.documentElement;if(v.hasAttribute("$data-bs-theme")||v.hasAttribute("data-bs-theme")||v.setAttribute("$data-bs-theme","LocalStorage.darkMode?'dark':'light'"),globalThis.HTTP=o,globalThis.UI=r,globalThis.AutoForm=m,globalThis.MouseMover=f,"undefined"!=typeof document){const t=()=>a(document.documentElement);"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t,!0)}export{l as APIComponent,m as AutoForm,o as HTTP,f as MouseMover,g as State,r as UI,u as VirtualScroll}; diff --git a/node_modules/.vite/deps/_metadata.json b/node_modules/.vite/deps/_metadata.json index 14cf9c6..ecb864f 100644 --- a/node_modules/.vite/deps/_metadata.json +++ b/node_modules/.vite/deps/_metadata.json @@ -1,8 +1,8 @@ { - "hash": "a2c51734", + "hash": "5a59143b", "configHash": "a1c4c8e0", - "lockfileHash": "99ec7e3e", - "browserHash": "7e396f40", + "lockfileHash": "6014e7a8", + "browserHash": "c3b48a46", "optimized": {}, "chunks": {} } \ No newline at end of file diff --git a/src/form.js b/src/form.js index 5d53d4f..104093b 100644 --- a/src/form.js +++ b/src/form.js @@ -1,25 +1,24 @@ import { Component, NewState, Util, $ } from '@web/state' import { HTTP } from './http.js' -import { State } from './index.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 - // 初始化数据联动：如果处于行编辑模式（inline），监听全局编辑状态 - if (container.inline) { - State.__watch('editingData', (data) => { - container.data = data - }) - State.__watch('editingSchema', (schema) => { - container.state.schema = schema - }) - } - + // TODO: $$ 双重计算机制暂不提供循环依赖保护，schema 编写者需确保 item.if 逻辑无副作用 container.form = $(container, 'form') container.submit = (opt = {}) => { if (!container.form.reportValidity()) return globalThis.UI?.toast?.('{#verify failed#}', { type: 'danger' }) @@ -41,9 +40,10 @@ Component.register('AutoForm', container => { } }, Util.makeDom(/*html*/`
-
-
- + + +
@@ -88,7 +89,11 @@ export const AutoForm = { _addAutoFormComponent: name => { const template = Component.getTemplate('AutoForm') if (template) { - const container = $(template.content, '[control-wrapper]') + 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() === '${name.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="thisNode.closest('AutoForm').data[item.name]">`)) } diff --git a/src/ui.js b/src/ui.js index a3cba63..b35607b 100644 --- a/src/ui.js +++ b/src/ui.js @@ -15,13 +15,13 @@ Component.register('Modal', container => { }, Util.makeDom(/*html*/`
-
-
-
- +
+
+
+
-
-
+
+
@@ -30,11 +30,11 @@ Component.register('Modal', container => { Component.register('Dialog', Component.getSetupFunction('Modal'), Util.makeDom(/*html*/`
-
-
-
-
- +
+
+
+
+
diff --git a/test-results/.last-run.json b/test-results/.last-run.json index cbcc1fb..a65c0f4 100644 --- a/test-results/.last-run.json +++ b/test-results/.last-run.json @@ -1,4 +1,6 @@ { - "status": "passed", - "failedTests": [] + "status": "failed", + "failedTests": [ + "8a84b43f13b676ea22b7-4f4df3778b9a6eb1af05" + ] } \ No newline at end of file diff --git a/test-results/all-base-project-comprehen-6c76e-ts-and-scrolling-benchmarks/error-context.md b/test-results/all-base-project-comprehen-6c76e-ts-and-scrolling-benchmarks/error-context.md new file mode 100644 index 0000000..8b8ce51 --- /dev/null +++ b/test-results/all-base-project-comprehen-6c76e-ts-and-scrolling-benchmarks/error-context.md @@ -0,0 +1,102 @@ +# Instructions + +- Following Playwright test failed. +- Explain why, be concise, respect Playwright best practices. +- Provide a snippet of code with the fix, if possible. + +# Test info + +- Name: all.spec.js >> base project comprehensive tests and scrolling benchmarks +- Location: test/all.spec.js:3:1 + +# Error details + +``` +Test timeout of 60000ms exceeded. +``` + +``` +Error: page.waitForFunction: Test timeout of 60000ms exceeded. +``` + +# Test source + +```ts + 1 | import { test, expect } from '@playwright/test'; + 2 | + 3 | test('base project comprehensive tests and scrolling benchmarks', async ({ page }) => { + 4 | test.setTimeout(60000); + 5 | page.on('console', msg => console.log('BROWSER LOG:', msg.text())); + 6 | await page.goto('http://127.0.0.1:8082/test/index.html'); + 7 | + 8 | // Wait for testStatus to be set (includes basic unit tests and scrolling refresh test) +> 9 | await page.waitForFunction(() => window.testStatus !== undefined, { timeout: 60000 }); + | ^ Error: page.waitForFunction: Test timeout of 60000ms exceeded. + 10 | + 11 | const status = await page.evaluate(() => window.testStatus); + 12 | expect(status).toBe('passed'); + 13 | + 14 | // Simulate real scrolling and check dynamic rendering for FastList + 15 | console.log('Simulating real scroll on FastList...'); + 16 | const scrollInfo = await page.evaluate(async () => { + 17 | window.switchTab?.('ll'); + 18 | await new Promise(r => setTimeout(r, 200)); // wait for render + 19 | const el = document.getElementById('ll'); + 20 | const results = []; + 21 | + 22 | const getRenderedCount = () => el.querySelectorAll('.border-primary').length; + 23 | + 24 | results.push({ + 25 | id: 'initial', + 26 | scrollTop: el.scrollTop, + 27 | scrollHeight: el.scrollHeight, + 28 | clientHeight: el.clientHeight, + 29 | renderedCount: getRenderedCount(), + 30 | renderedListLen: el.state.renderedList?.length + 31 | }); + 32 | + 33 | // Scroll to middle + 34 | el.scrollTop = 50000; + 35 | el.refresh?.(); + 36 | await new Promise(r => setTimeout(r, 500)); + 37 | const midCount = getRenderedCount(); + 38 | const midHtml = el.innerHTML.length; + 39 | results.push({ + 40 | id: 'deep-middle', + 41 | scrollTop: el.scrollTop, + 42 | renderedCount: midCount, + 43 | htmlLen: midHtml, + 44 | prevHeight: el.state.prevHeight, + 45 | postHeight: el.state.postHeight, + 46 | renderedListLen: el.state._renderedList?.length + 47 | }); + 48 | + 49 | // Scroll to end + 50 | el.scrollTop = el.scrollHeight; + 51 | el.refresh?.(); + 52 | await new Promise(r => setTimeout(r, 500)); + 53 | results.push({ + 54 | id: 'end', + 55 | scrollTop: el.scrollTop, + 56 | renderedCount: getRenderedCount(), + 57 | scrollHeight: el.scrollHeight, + 58 | prevHeight: el.state.prevHeight, + 59 | postHeight: el.state.postHeight + 60 | }); + 61 | + 62 | return results; + 63 | }); + 64 | + 65 | console.log('Scroll Details:', JSON.stringify(scrollInfo, null, 2)); + 66 | expect(scrollInfo[0].renderedCount).toBeGreaterThan(0); + 67 | expect(scrollInfo[1].scrollTop).toBeGreaterThan(0); + 68 | + 69 | const bench = await page.evaluate(() => window.benchResults); + 70 | if (bench) { + 71 | Object.entries(bench).forEach(([name, time]) => { + 72 | console.log(`BENCHMARK [${name}]: ${time.toFixed(2)}ms`); + 73 | }); + 74 | } + 75 | }); + 76 | +``` \ No newline at end of file diff --git a/test/base.test.js b/test/base.test.js index a64d852..c9b950d 100644 --- a/test/base.test.js +++ b/test/base.test.js @@ -30,17 +30,29 @@ export async function runTests() { // 5. AutoForm & TagsInput Test console.log('Testing AutoForm...'); + const { NewState } = await import('@web/state'); const form = document.createElement('AutoForm'); document.body.appendChild(form); await new Promise(r => setTimeout(r, 200)); + + // Test dynamic schema and visibility + form.data = NewState({ showName: false, name: 'Gemini' }); form.state.schema = [ { name: 'tags', type: 'TagsInput', label: '标签' }, - { name: 'name', type: 'text', label: '姓名' } + { name: 'showName', type: 'switch', label: 'Show Name' }, + { name: 'name', type: 'text', label: 'Name', if: 'this.data.showName' } ]; await new Promise(r => setTimeout(r, 200)); - if (!form.querySelector('TagsInput')) throw new Error('TagsInput not rendered in AutoForm'); + if (!form.querySelector('TagsInput')) throw new Error('TagsInput not rendered'); + if (form.querySelector('[name="name"]')) throw new Error('Name field should be hidden'); + + form.data.showName = true; + await new Promise(r => setTimeout(r, 200)); + if (!form.querySelector('[name="name"]')) throw new Error('Name field should be visible'); form.remove(); + + // 6. List Components Basic Verification console.log('Verifying List Components...'); const { Component } = await import('@web/state');