@@ -30,10 +121,10 @@
@@ -50,52 +141,52 @@
@@ -115,464 +206,745 @@
\n \n \n \n \n
\n`),a.makeDom("")),n.register("TagsInput"),e.AutoForm=n}(globalThis),function(e){const{Component:t,Util:s}=e;t.register("FastList",e=>{const t=new Map;e.state.renderedList=[],s.newAvg();const a=()=>{const s=e.state.list||[];e.state.groups;const a=e.scrollTop,i=e.clientHeight,n=e.state.itemHeight||40;let o=0,l=-1,r=s.length;for(let e=0;e\n \n
\n')),e.VirtualScroll=(e={})=>{const t={itemHeight:50,buffer:5,...e};return e=>{e.state.list||(e.state.list=[]),e.state._renderedList||(e.state._renderedList=[]);let s=!1;const a=()=>{const s=e.state.list||[],a=e.scrollTop,i=e.clientHeight,n=t.itemHeight,o=Math.max(0,Math.floor(a/n)-t.buffer),l=Math.min(s.length,Math.ceil((a+i)/n)+t.buffer),r=[];for(let e=o;e\n \n \n \n
\n \n\n \n
\n')),e.BOOTSTRAP_ICONS=a}(globalThis),function(e){const{Component:t,Hash:s,Util:a}=e;t.register("Nav",e=>{e.state.items=[],e.state.activeId=s.nav,e.state.__watch("activeId",e=>s.nav=e),window.addEventListener("hashchange",()=>e.state.activeId=s.nav),e.select=t=>{e.state.activeId=t,e.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:t}))}},a.makeDom('\n\n')),t.register("Breadcrumb",e=>{e.state.items=[]},a.makeDom('\n\n'))}(globalThis),"undefined"!=typeof document&&window.addEventListener("beforeunload",e=>{var t;(null==(t=globalThis.State)?void 0:t.exitBlocks)>0&&(e.preventDefault(),e.returnValue="")})}();
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@apigo.cc/state"),require("@apigo.cc/bootstrap")):"function"==typeof define&&define.amd?define(["exports","@apigo.cc/state","@apigo.cc/bootstrap"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ApigoBase={},t.ApigoState)}(this,function(t,e){"use strict";const i={get:({url:t,...e})=>i.request({url:t,method:"GET",...e}),post:({url:t,data:e,...a})=>i.request({url:t,method:"POST",data:e,...a}),put:({url:t,data:e,...a})=>i.request({url:t,method:"PUT",data:e,...a}),delete:({url:t,...e})=>i.request({url:t,method:"DELETE",...e}),head:({url:t,...e})=>i.request({url:t,method:"HEAD",...e}),request:async({url:t,method:e="POST",data:i,headers:a={},responseType:n,timeout:s=1e4})=>{var o;const l={method:e=e.toUpperCase(),signal:null==(o=AbortSignal.timeout)?void 0:o.call(AbortSignal,s)};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,a]of Object.entries(i))a instanceof FileList||Array.isArray(a)?Array.from(a).forEach(i=>t.append(e,i)):null!=a&&t.append(e,a);i=t}i instanceof FormData?delete a["Content-Type"]:"string"==typeof i||i instanceof ArrayBuffer||ArrayBuffer.isView(i)||(i=JSON.stringify(i),a["Content-Type"]||(a["Content-Type"]="application/json")),l.body=i}Object.keys(a).length&&(l.headers=a);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}},a=e.Component.register("API",t=>{t.request=e.NewState({url:"",method:"GET",headers:{},data:null,timeout:1e4,responseType:""}),t.response=e.NewState({loading:!1,ok:null,status:null,error:null,headers:{},responseType:"",result:null}),t.result=e.NewState(),t.do=(e={})=>new Promise((a,n)=>{const s={...t.request,...e};if(!s.url)throw new Error(".url is required");s.headers={...t.request.headers,...e.headers},t.response.loading=!0,i.request(s).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})),a(e)}).catch(i=>{var a;!e.noui&&(null==(a=globalThis.UI)?void 0:a.toast)&&UI.toast(i.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:i,bubbles:!0})),n(i)})});let a=null;t.request.__watch(null,()=>{t.hasAttribute("auto")&&t.request.url&&(a||(a=Promise.resolve().then(()=>{t.do(),a=null})))})}),n={};e.Component.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}))}),e.Util.copyFunction(t,t.modal,"show","hide")},e.Util.makeDom('\n\n \n
\n\n \n
\n \n \n
\n')),e.Component.register("Dialog",e.Component.getSetupFunction("Modal"),e.Util.makeDom('\n\n
\n\n
\n \n \n \n
\n \n \n \n
\n'));let s=0;n.showDialog=function({title:t="",message:e="",buttons:i=["{#Close#}"],type:a="body"}){const n=document.body.appendChild(document.createElement("Dialog"));return n.style.zIndex=2e3+ ++s,Promise.resolve().then(()=>{Object.assign(n.state,{message:e,title:t,type:a,buttons:i}),n.show()}),new Promise(t=>{n.addEventListener("change",e=>{s--,t(n.result||0),n.remove()})})},n.alert=function(t,e={}){return n.showDialog({message:t,...e})},n.confirm=function(t,e={}){return new Promise(i=>n.showDialog({message:t,buttons:["{#Cancel#}","{#Confirm#}"],...e}).then(t=>i(t>=2)).catch(()=>i(!1)))},e.Component.register("Toast",t=>{t.toast=new bootstrap.Toast(t,{autohide:t.state.delay>0}),e.Util.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)}})},e.Util.makeDom('\n\n
\n\n \n \n \n
\n \n \n
\n
\n'),e.Util.makeDom('')),n.toast=function(t,i={}){const a=i.delay??5e3,n=document.createElement("Toast");n.state={delay:a,left:a?a/1e3:void 0,type:i.type||"primary",message:t,buttons:i.buttons||[]},e.$(`[toast-container="${i.container||"default"}"]`).appendChild(n),Promise.resolve().then(()=>n.show())},n.toastConfirm=function(t,e={}){return new Promise(i=>n.toast(t,{buttons:["{#Confirm#}"],...e}).then(t=>i(1===t)).catch(()=>i(!1)))};const o=e.Util.makeDom('\n\n
\n\n
\n \n \n \n \n \n
\n \n \n \n \n \n
\n \n \n
\n'),l=e.Util.makeDom("");e.Component.register("AutoForm",t=>{t.state.schema||(t.state.schema=[]);const a=t=>t&&"object"==typeof t&&!t.__isProxy?e.NewState(t):t;t.state.__watch("data",e=>t.data=a(e)),t.data=a(t.state.data||{}),t.vertical=t.hasAttribute("vertical"),t.horizontal=t.hasAttribute("horizontal"),t.inline=t.hasAttribute("inline"),t.nobutton=t.hasAttribute("nobutton"),t.request={method:"POST"},t.response={},t.result=null,t.form=e.$(t,"form"),t.submit=(e={})=>{var a,n;if(!t.form.reportValidity())return null==(n=null==(a=globalThis.UI)?void 0:a.toast)?void 0:n.call(a,"{#verify failed#}",{type:"danger"});if(!t.dispatchEvent(new CustomEvent("submit",{detail:t.data,cancelable:!0,bubbles:!1})))return;const s={...t.request,data:t.data,noui:!0,...e};let o=null;if(t.api)o=t.api.do(s);else{if(!t.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");o=i.request(s)}o.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}))})},t.checkIf=e=>{if(!e.if)return!0;try{return new Function("Hash","LocalStorage","State","item","data","return "+e.if).call(t,globalThis.Hash,globalThis.LocalStorage,globalThis.State,e,t.data)}catch(t){return!1}}},o,l);const r=t=>{let e=t.querySelector("[control-wrapper]");if(e)return e;for(const i of t.querySelectorAll("template"))if(e=r(i.content),e)return e;return null},d={customTypes:[],register:(t,e)=>{const i=e||t;d.customTypes.find(e=>e.name===t)||(d.customTypes.push({name:t,typeName:i}),d._addAutoFormComponent(t,i))},_addAutoFormComponent:(t,i)=>{const a=r(o);if(a){const n=e.Util.makeDom(`<${t} $if="item.type?.toLowerCase() === '${i.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="w-100">`);a.appendChild(n)}}};e.Component.register("TagsInput",t=>{t._thisObj=t,t.addEventListener("bind",e=>{t.state.tags=Array.isArray(e.detail)?e.detail:[]})},e.Util.makeDom(`\n\n \n \n \n \n
\n`),e.Util.makeDom("")),d.register("TagsInput"),e.Component.register("DatePicker",t=>{t._thisObj=t,t.state=e.NewState({start:"",end:""}),t.addEventListener("bind",e=>{var i,a,n;t.state.start=e.detail||"";const s=t.closest("AutoForm"),o=t.getAttribute("name"),l=null==(a=null==(i=null==s?void 0:s.state)?void 0:i.schema)?void 0:a.find(t=>t.name===o),r=(null==(n=null==l?void 0:l.setting)?void 0:n.rangeEnd)||t.rangeEnd;s&&r&&(t.state.end=s.data[r]||"")}),Object.defineProperty(t,"isRange",{get:()=>{var e,i,a;const n=t.closest("AutoForm"),s=t.getAttribute("name"),o=null==(i=null==(e=null==n?void 0:n.state)?void 0:e.schema)?void 0:i.find(t=>t.name===s);return!(!(null==(a=null==o?void 0:o.setting)?void 0:a.rangeEnd)&&!t.rangeEnd)}}),Object.defineProperty(t,"value",{get:()=>t.state.start,set:e=>{t.state.start=e||""}}),t.updateStart=e=>{t.state.start=e,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))},t.updateEnd=e=>{var i,a,n;t.state.end=e;const s=t.closest("AutoForm"),o=t.getAttribute("name"),l=null==(a=null==(i=null==s?void 0:s.state)?void 0:i.schema)?void 0:a.find(t=>t.name===o),r=(null==(n=null==l?void 0:l.setting)?void 0:n.rangeEnd)||t.rangeEnd;s&&r&&(s.data[r]=e)}},e.Util.makeDom('\n\n \n \n -\n \n \n
\n')),e.Component.register("ColorPicker",t=>{t._thisObj=t,t.state=e.NewState({value:"#000000"}),t.addEventListener("bind",e=>{t.state.value=e.detail||"#000000"}),Object.defineProperty(t,"value",{get:()=>t.state.value,set:e=>{t.state.value=e||"#000000"}}),t.updateValue=e=>{t.state.value=e,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))}},e.Util.makeDom('\n\n \n \n
\n'));const c=["alarm","archive","arrow-left","arrow-right","bag","bank","basket","bell","bookmark","box","briefcase","calendar","camera","cart","chat","check","chevron-down","chevron-left","chevron-right","chevron-up","clock","cloud","code","collection","command","cpu","credit-card","cup","dash","database","display","door-closed","download","droplet","earbuds","edit","egg","eject","envelope","eraser","eye","file","filter","flag","folder","gear","gem","gift","graph-up","grid","hammer","hand-thumbs-up","heart","house","image","inbox","info-circle","journal","key","laptop","layers","layout-text-sidebar-reverse","lightbulb","link","list","lock","map","mic","moon","mouse","music-note","newspaper","palette","paperclip","pause","pencil","person","phone","pie-chart","play","plus","printer","puzzle","question-circle","reception-4","record","reply","rss","save","search","send","server","share","shield","shop","shuffle","skip-end","skip-start","slash","sliders","smartphone","speaker","speedometer","spellcheck","square","star","stickies","stop","stopwatch","suit-heart","sun","table","tag","tags","telephone","terminal","text-paragraph","thermometer","three-dots","ticket","tools","trash","trophy","truck","tv","umbrella","unlock","upload","vector-pen","wallet","watch","wifi","window","wrench","x","zoom-in","zoom-out","activity","at","award","backspace","badge-3d","badge-4k","badge-8k","badge-ad","badge-ar","badge-cc","badge-hd","badge-tm","badge-vo","badge-vr","badge-wc","bar-chart","battery","bicycle","binoculars","blockquote-left","blockquote-right","book","bookshelf","bootstrap","border-all","border-bottom","border-center","border-inner","border-left","border-middle","border-outer","border-right","border-style","border-top","border-width","bounding-box","box-arrow-down","box-arrow-in-down","box-arrow-in-left","box-arrow-in-right","box-arrow-in-up","box-arrow-left","box-arrow-right","box-arrow-up","box-seam","brightness-alt-high","brightness-alt-low","brightness-high","brightness-low","broadcast","brush","bucket","bug","building","bullseye","calculator","calendar-check","calendar-date","calendar-day","calendar-event","calendar-minus","calendar-month","calendar-plus","calendar-range","calendar-week","calendar-x","calendar2","calendar3","calendar4","camera-reels","camera-video","capslock","card-checklist","card-heading","card-image","card-list","card-text","caret-down","caret-left","caret-right","caret-up","cart-check","cart-dash","cart-plus","cart-x","cash","cash-stack","cast","chat-dots","chat-left","chat-quote","chat-right","chat-square","chat-text","check-all","check-circle","check-square","circle","clipboard","cloud-arrow-down","cloud-arrow-up","cloud-check","cloud-download","cloud-fog","cloud-hail","cloud-lightning","cloud-minus","cloud-moon","cloud-plus","cloud-rain","cloud-slash","cloud-snow","cloud-sun","cloud-upload","clouds","cloudy","code-slash","code-square","collection-play","columns","columns-gap","compass","cone","cone-striped","controller","credit-card-2-back","credit-card-2-front","crop","cup-straw","cursor","dash-circle","dash-square","diagram-2","diagram-3","diamond","dice-1","dice-2","dice-3","dice-4","dice-5","dice-6","disc","discord","distribute-horizontal","distribute-vertical","door-open","dot","droplet-half","easel","egg-fried","emoji-angry","emoji-dizzy","emoji-expressionless","emoji-frown","emoji-heart-eyes","emoji-laughing","emoji-neutral","emoji-smile","emoji-sunglasses","emoji-wink","envelope-open","exclamation","exclamation-circle","exclamation-diamond","exclamation-octagon","exclamation-square","exclamation-triangle","eye-slash","eyedropper","facebook","file-arrow-down","file-arrow-up","file-binary","file-break","file-check","file-code","file-diff","file-earmark","file-excel","file-image","file-lock","file-medical","file-minus","file-music","file-pdf","file-person","file-play","file-plus","file-post","file-ppt","file-richtext","file-slides","file-spreadsheet","file-text","file-word","file-zip","files","film","filter-circle","filter-left","filter-right","filter-square","fingerprint","flower1","flower2","flower3","folder-check","folder-minus","folder-plus","folder-symlink","folder-x","folder2-open","fonts","forward","front","fullscreen","fullscreen-exit","funnel","gear-wide","gender-female","gender-male","gender-trans","geo","geo-alt","github","globe","google","graph-down","grid-1x2","grid-3x2","grid-3x3","grip-horizontal","grip-vertical","hand-index","hand-thumbs-down","handbag","hash","headphones","headset","heart-half","heptagon","hourglass","hourglass-bottom","hourglass-split","hourglass-top","house-door","hr","hurricane","image-alt","images","infinity","input-cursor","instagram","intersect","journal-album","journal-arrow-down","journal-arrow-up","journal-bookmark","journal-check","journal-code","journal-medical","journal-minus","journal-plus","journal-richtext","journal-text","journal-x","journals","justify","kanban","keyboard","ladder","lamp","layers-half","layout-sidebar","layout-split","layout-three-columns","life-preserver","lightbulb-off","lightning","lightning-charge","link-45deg","linkedin","list-check","list-nested","list-ol","list-stars","list-task","list-ul","mailbox","markdown","mask","mastodon","megaphone","menu-app","menu-button","messenger","mic-mute","minecart","minecart-loaded","moisture","mouse2","mouse3","music-note-beamed","music-note-list","music-player","node-minus","node-plus","nut","octagon","option","outlet","paint-bucket","patch-check","patch-exclamation","patch-minus","patch-plus","patch-question","pause-btn","pause-circle","peace","pen","pencil-square","pentagon","person-badge","person-bounding-box","person-circle","person-lines-fill","phone-landscape","phone-vibrate","pie-chart-fill","pin","pin-angle","pin-fill","pin-map","pip","play-btn","play-circle","plug","plus-circle","plus-square","power","question","question-diamond","question-square","rainbow","receipt","receipt-cutoff","reception-0","reception-1","reception-2","reception-3","record-btn","record-circle","record2","recycle","reddit","reply-all","router","rulers","safe","save2","sd-card","segmented-nav","shield-check","shield-exclamation","shield-lock","shield-shaded","shield-slash","shift","signpost","signpost-2","signpost-split","sim","skip-backward","skip-forward","slack","slash-circle","slash-square","smartwatch","snow","snow2","snow3","sort-alpha-down","sort-alpha-up","sort-numeric-down","sort-numeric-up","soundwave","speedometer2","square-half","stack","star-half","stars","stop-btn","stop-circle","suit-club","suit-diamond","suit-spade","sunglasses","sunrise","sunset","symmetry-horizontal","symmetry-vertical","tablet","tablet-landscape","telegram","telephone-forward","telephone-inbound","telephone-outbound","telephone-plus","telephone-x","text-center","text-indent-left","text-indent-right","text-left","text-right","thermometer-half","thermometer-high","thermometer-low","thermometer-snow","thermometer-sun","three-dots-vertical","toggle-off","toggle-on","toggle2-off","toggle2-on","tornado","translate","trash2","tree","truck-flatbed","tsunami","type","type-bold","type-h1","type-h2","type-h3","type-italic","type-strikethrough","type-underline","ui-checks","ui-checks-grid","ui-radios","ui-radios-grid","union","upc","upc-scan","view-list","view-stacked","vinyl","voicemail","volume-down","volume-mute","volume-off","volume-up","vr","wallet2","water","whatsapp","wifi-1","wifi-2","wifi-off","wind","window-dock","window-sidebar","x-circle","x-diamond","x-octagon","x-square","youtube"];e.Component.register("IconPicker",t=>{t._thisObj=t,t.state=e.NewState({value:"",search:"",open:!1}),t.addEventListener("bind",e=>{t.state.value=e.detail||""}),Object.defineProperty(t,"value",{get:()=>t.state.value,set:e=>{t.state.value=e||""}}),Object.defineProperty(t,"filteredIcons",{get:()=>{var e;const i=(null==(e=t.state.search)?void 0:e.toLowerCase())||"";return c.filter(t=>t.includes(i))}}),t.selectIcon=e=>{t.state.value=e,t.state.open=!1,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))},t.toggle=()=>{t.state.open=!t.state.open,t.state.open&&setTimeout(()=>{var i;null==(i=e.$(t,"input"))||i.focus()},10)};const i=e=>{t.contains(e.target)||(t.state.open=!1)};window.addEventListener("click",i),t.addEventListener("remove",()=>window.removeEventListener("click",i))},e.Util.makeDom('\n\n \n \n
\n'),e.Util.makeDom("")),d.register("DatePicker"),d.register("ColorPicker"),d.register("IconPicker");const m=(t={})=>{const i=new Map,a=new Map;let n=1;const s=e.Util.newAvg();let o=0,l=0,r=0,d=null,c=null,m=!1;const u=t.itemHeight||null;return{reset:(t,e)=>{if(m=!1,i.clear(),a.clear(),s.clear(),r=0,d=null,c=null,!(null==t?void 0:t.length))return[];const p=t.length;n=Math.ceil(Math.sqrt(p))||10;const h=window.getComputedStyle(e);o=parseFloat(h.paddingTop)||0,l=parseFloat(h.rowGap)||0;const b=Math.max(10,Math.ceil((e.clientHeight||100)/(u||32)));return t.slice(0,Math.min(3*b,p))},init:(t,e)=>{if(m)return;const o=t.length;let l=u||s.get()||32;o>0&&"object"==typeof t[0]&&null!==t[0]&&t[0]._itemHeight&&(l=t[0]._itemHeight),s.add(l),null===d&&(d=0,c=0);for(let e=0;e\n\t\n\t\n\t\t
\n')),e.Component.register("Nav",t=>{t.vertical=t.hasAttribute("vertical"),t.click=(i,a)=>{i.noselect||a||(e.Hash.nav=i.name),t.dispatchEvent(new CustomEvent("nav",{detail:{item:i},bubbles:!1}))}},e.Util.makeDom('\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\n\t\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\t\t![]()
\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\n\t\t
\n'));let u=!1,p={},h={};const b={start:(t,{onmousemove:e,onmouseup:i})=>{p={x:t.clientX,y:t.clientY,w:0,h:0},h={onmousemove:e,onmouseup:i},u=!0}};"undefined"!=typeof document&&(document.addEventListener("mouseup",t=>{var e;u&&(u=!1,null==(e=h.onmouseup)||e.call(h,{event:t,...p}))}),document.addEventListener("mousemove",t=>{var e;u&&(p.w=t.clientX-p.x,p.h=t.clientY-p.y,null==(e=h.onmousemove)||e.call(h,{event:t,...p}))})),e.Component.register("Resizer",t=>{t.isVertical=t.hasAttribute("vertical");const e=parseInt(t.getAttribute("min"))||10,i=parseInt(t.getAttribute("max"))||1e3,a=t.target||t.previousElementSibling;t.addEventListener("bind",e=>{void 0!==e.detail&&null!==e.detail&&(a.style[t.isVertical?"height":"width"]=e.detail+"px")});const n=(a,n,s)=>{const o=a+(t.isVertical?s:n);return o\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
-
-
-
-
+ container.updateEnd = (val) => {
+ container.state.end = val
+ const form = container.closest('AutoForm')
+ const name = container.getAttribute('name')
+ const item = form?.state?.schema?.find(i => i.name === name)
+ const rangeEnd = item?.setting?.rangeEnd || container.rangeEnd
+ if (form && rangeEnd) {
+ form.data[rangeEnd] = val
+ }
+ }
+}, Util.makeDom(/*html*/`
+
-
-
-
-
+
+
+ -
+
+
`))
- global.BOOTSTRAP_ICONS = BOOTSTRAP_ICONS;
+/**
+ * ColorPicker
+ * 支持颜色选择与十六进制文本输入
+ */
+Component.register('ColorPicker', container => {
+ container._thisObj = container;
+ container.state = NewState({ value: '#000000' })
+ container.addEventListener('bind', e => {
+ container.state.value = e.detail || '#000000'
+ })
+ Object.defineProperty(container, 'value', {
+ get: () => container.state.value,
+ set: v => { container.state.value = v || '#000000'; }
+ })
+ container.updateValue = (val) => {
+ container.state.value = val
+ container.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: val }))
+ }
+}, Util.makeDom(/*html*/`
+
+
+
+
+`))
-})(globalThis);
+const BOOTSTRAP_ICONS = ['alarm', 'archive', 'arrow-left', 'arrow-right', 'bag', 'bank', 'basket', 'bell', 'bookmark', 'box', 'briefcase', 'calendar', 'camera', 'cart', 'chat', 'check', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'clock', 'cloud', 'code', 'collection', 'command', 'cpu', 'credit-card', 'cup', 'dash', 'database', 'display', 'door-closed', 'download', 'droplet', 'earbuds', 'edit', 'egg', 'eject', 'envelope', 'eraser', 'eye', 'file', 'filter', 'flag', 'folder', 'gear', 'gem', 'gift', 'graph-up', 'grid', 'hammer', 'hand-thumbs-up', 'heart', 'house', 'image', 'inbox', 'info-circle', 'journal', 'key', 'laptop', 'layers', 'layout-text-sidebar-reverse', 'lightbulb', 'link', 'list', 'lock', 'map', 'mic', 'moon', 'mouse', 'music-note', 'newspaper', 'palette', 'paperclip', 'pause', 'pencil', 'person', 'phone', 'pie-chart', 'play', 'plus', 'printer', 'puzzle', 'question-circle', 'reception-4', 'record', 'reply', 'rss', 'save', 'search', 'send', 'server', 'share', 'shield', 'shop', 'shuffle', 'skip-end', 'skip-start', 'slash', 'sliders', 'smartphone', 'speaker', 'speedometer', 'spellcheck', 'square', 'star', 'stickies', 'stop', 'stopwatch', 'suit-heart', 'sun', 'table', 'tag', 'tags', 'telephone', 'terminal', 'text-paragraph', 'thermometer', 'three-dots', 'ticket', 'tools', 'trash', 'trophy', 'truck', 'tv', 'umbrella', 'unlock', 'upload', 'vector-pen', 'wallet', 'watch', 'wifi', 'window', 'wrench', 'x', 'zoom-in', 'zoom-out', 'activity', 'at', 'award', 'backspace', 'badge-3d', 'badge-4k', 'badge-8k', 'badge-ad', 'badge-ar', 'badge-cc', 'badge-hd', 'badge-tm', 'badge-vo', 'badge-vr', 'badge-wc', 'bar-chart', 'battery', 'bicycle', 'binoculars', 'blockquote-left', 'blockquote-right', 'book', 'bookshelf', 'bootstrap', 'border-all', 'border-bottom', 'border-center', 'border-inner', 'border-left', 'border-middle', 'border-outer', 'border-right', 'border-style', 'border-top', 'border-width', 'bounding-box', 'box-arrow-down', 'box-arrow-in-down', 'box-arrow-in-left', 'box-arrow-in-right', 'box-arrow-in-up', 'box-arrow-left', 'box-arrow-right', 'box-arrow-up', 'box-seam', 'brightness-alt-high', 'brightness-alt-low', 'brightness-high', 'brightness-low', 'broadcast', 'brush', 'bucket', 'bug', 'building', 'bullseye', 'calculator', 'calendar-check', 'calendar-date', 'calendar-day', 'calendar-event', 'calendar-minus', 'calendar-month', 'calendar-plus', 'calendar-range', 'calendar-week', 'calendar-x', 'calendar2', 'calendar3', 'calendar4', 'camera-reels', 'camera-video', 'capslock', 'card-checklist', 'card-heading', 'card-image', 'card-list', 'card-text', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'cart-check', 'cart-dash', 'cart-plus', 'cart-x', 'cash', 'cash-stack', 'cast', 'chat-dots', 'chat-left', 'chat-quote', 'chat-right', 'chat-square', 'chat-text', 'check-all', 'check-circle', 'check-square', 'circle', 'clipboard', 'cloud-arrow-down', 'cloud-arrow-up', 'cloud-check', 'cloud-download', 'cloud-fog', 'cloud-hail', 'cloud-lightning', 'cloud-minus', 'cloud-moon', 'cloud-plus', 'cloud-rain', 'cloud-slash', 'cloud-snow', 'cloud-sun', 'cloud-upload', 'clouds', 'cloudy', 'code-slash', 'code-square', 'collection-play', 'columns', 'columns-gap', 'compass', 'cone', 'cone-striped', 'controller', 'credit-card-2-back', 'credit-card-2-front', 'crop', 'cup-straw', 'cursor', 'dash-circle', 'dash-square', 'diagram-2', 'diagram-3', 'diamond', 'dice-1', 'dice-2', 'dice-3', 'dice-4', 'dice-5', 'dice-6', 'disc', 'discord', 'distribute-horizontal', 'distribute-vertical', 'door-open', 'dot', 'droplet-half', 'easel', 'egg-fried', 'emoji-angry', 'emoji-dizzy', 'emoji-expressionless', 'emoji-frown', 'emoji-heart-eyes', 'emoji-laughing', 'emoji-neutral', 'emoji-smile', 'emoji-sunglasses', 'emoji-wink', 'envelope-open', 'exclamation', 'exclamation-circle', 'exclamation-diamond', 'exclamation-octagon', 'exclamation-square', 'exclamation-triangle', 'eye-slash', 'eyedropper', 'facebook', 'file-arrow-down', 'file-arrow-up', 'file-binary', 'file-break', 'file-check', 'file-code', 'file-diff', 'file-earmark', 'file-excel', 'file-image', 'file-lock', 'file-medical', 'file-minus', 'file-music', 'file-pdf', 'file-person', 'file-play', 'file-plus', 'file-post', 'file-ppt', 'file-richtext', 'file-slides', 'file-spreadsheet', 'file-text', 'file-word', 'file-zip', 'files', 'film', 'filter-circle', 'filter-left', 'filter-right', 'filter-square', 'fingerprint', 'flower1', 'flower2', 'flower3', 'folder-check', 'folder-minus', 'folder-plus', 'folder-symlink', 'folder-x', 'folder2-open', 'fonts', 'forward', 'front', 'fullscreen', 'fullscreen-exit', 'funnel', 'gear-wide', 'gender-female', 'gender-male', 'gender-trans', 'geo', 'geo-alt', 'github', 'globe', 'google', 'graph-down', 'grid-1x2', 'grid-3x2', 'grid-3x3', 'grip-horizontal', 'grip-vertical', 'hand-index', 'hand-thumbs-down', 'handbag', 'hash', 'headphones', 'headset', 'heart-half', 'heptagon', 'hourglass', 'hourglass-bottom', 'hourglass-split', 'hourglass-top', 'house-door', 'hr', 'hurricane', 'image-alt', 'images', 'infinity', 'input-cursor', 'instagram', 'intersect', 'journal-album', 'journal-arrow-down', 'journal-arrow-up', 'journal-bookmark', 'journal-check', 'journal-code', 'journal-medical', 'journal-minus', 'journal-plus', 'journal-richtext', 'journal-text', 'journal-x', 'journals', 'justify', 'kanban', 'keyboard', 'ladder', 'lamp', 'layers-half', 'layout-sidebar', 'layout-split', 'layout-three-columns', 'life-preserver', 'lightbulb-off', 'lightning', 'lightning-charge', 'link-45deg', 'linkedin', 'list-check', 'list-nested', 'list-ol', 'list-stars', 'list-task', 'list-ul', 'mailbox', 'markdown', 'mask', 'mastodon', 'megaphone', 'menu-app', 'menu-button', 'messenger', 'mic-mute', 'minecart', 'minecart-loaded', 'moisture', 'mouse2', 'mouse3', 'music-note-beamed', 'music-note-list', 'music-player', 'node-minus', 'node-plus', 'nut', 'octagon', 'option', 'outlet', 'paint-bucket', 'patch-check', 'patch-exclamation', 'patch-minus', 'patch-plus', 'patch-question', 'pause-btn', 'pause-circle', 'peace', 'pen', 'pencil-square', 'pentagon', 'person-badge', 'person-bounding-box', 'person-circle', 'person-lines-fill', 'phone-landscape', 'phone-vibrate', 'pie-chart-fill', 'pin', 'pin-angle', 'pin-fill', 'pin-map', 'pip', 'play-btn', 'play-circle', 'plug', 'plus-circle', 'plus-square', 'power', 'question', 'question-diamond', 'question-square', 'rainbow', 'receipt', 'receipt-cutoff', 'reception-0', 'reception-1', 'reception-2', 'reception-3', 'record-btn', 'record-circle', 'record2', 'recycle', 'reddit', 'reply-all', 'router', 'rulers', 'safe', 'save2', 'sd-card', 'segmented-nav', 'shield-check', 'shield-exclamation', 'shield-lock', 'shield-shaded', 'shield-slash', 'shift', 'signpost', 'signpost-2', 'signpost-split', 'sim', 'skip-backward', 'skip-forward', 'slack', 'slash-circle', 'slash-square', 'smartwatch', 'snow', 'snow2', 'snow3', 'sort-alpha-down', 'sort-alpha-up', 'sort-numeric-down', 'sort-numeric-up', 'soundwave', 'speedometer2', 'square-half', 'stack', 'star-half', 'stars', 'stop-btn', 'stop-circle', 'suit-club', 'suit-diamond', 'suit-spade', 'sunglasses', 'sunrise', 'sunset', 'symmetry-horizontal', 'symmetry-vertical', 'tablet', 'tablet-landscape', 'telegram', 'telephone-forward', 'telephone-inbound', 'telephone-outbound', 'telephone-plus', 'telephone-x', 'text-center', 'text-indent-left', 'text-indent-right', 'text-left', 'text-right', 'thermometer-half', 'thermometer-high', 'thermometer-low', 'thermometer-snow', 'thermometer-sun', 'three-dots-vertical', 'toggle-off', 'toggle-on', 'toggle2-off', 'toggle2-on', 'tornado', 'translate', 'trash2', 'tree', 'truck-flatbed', 'tsunami', 'type', 'type-bold', 'type-h1', 'type-h2', 'type-h3', 'type-italic', 'type-strikethrough', 'type-underline', 'ui-checks', 'ui-checks-grid', 'ui-radios', 'ui-radios-grid', 'union', 'upc', 'upc-scan', 'view-list', 'view-stacked', 'vinyl', 'voicemail', 'volume-down', 'volume-mute', 'volume-off', 'volume-up', 'vr', 'wallet2', 'water', 'whatsapp', 'wifi-1', 'wifi-2', 'wifi-off', 'wind', 'window-dock', 'window-sidebar', 'x-circle', 'x-diamond', 'x-octagon', 'x-square', 'youtube']
+
+/**
+ * IconPicker
+ * 基于 Bootstrap Icons 的可视化选择控件
+ */
+Component.register('IconPicker', container => {
+ container._thisObj = container;
+ container.state = NewState({ value: '', search: '', open: false })
+ container.addEventListener('bind', e => {
+ container.state.value = e.detail || ''
+ })
+
+ Object.defineProperty(container, 'value', {
+ get: () => container.state.value,
+ set: v => { container.state.value = v || ''; }
+ })
+
+ Object.defineProperty(container, 'filteredIcons', {
+ get: () => {
+ const s = container.state.search?.toLowerCase() || ''
+ return BOOTSTRAP_ICONS.filter(i => i.includes(s))
+ }
+ })
+
+ container.selectIcon = (icon) => {
+ container.state.value = icon
+ container.state.open = false
+ container.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: icon }))
+ }
+
+ container.toggle = () => {
+ container.state.open = !container.state.open
+ if (container.state.open) {
+ setTimeout(() => {
+ $(container, 'input')?.focus()
+ }, 10)
+ }
+ }
+
+ const onGlobalClick = (e) => {
+ if (!container.contains(e.target)) {
+ container.state.open = false
+ }
+ }
+ window.addEventListener('click', onGlobalClick)
+ container.addEventListener('remove', () => window.removeEventListener('click', onGlobalClick))
+}, Util.makeDom(/*html*/`
+
+
+
+
+`), Util.makeDom(/*html*/``))
+
+// 注册到 AutoForm
+AutoForm.register('DatePicker')
+AutoForm.register('ColorPicker')
+AutoForm.register('IconPicker')
+
+export { }
diff --git a/src/form.js b/src/form.js
index dc7b39d..53278af 100644
--- a/src/form.js
+++ b/src/form.js
@@ -1,128 +1,178 @@
-// src/form.js
-(function(global) {
- const { Component, NewState, Util, $, State } = global;
+import { Component, NewState, Util, $, State } from '@apigo.cc/state'
+import { HTTP } from './http.js'
- const AutoForm = {
- customTypes: [],
- register: (name, typeName) => {
- const type = typeName || name
- if (!AutoForm.customTypes.includes(type)) AutoForm.customTypes.push(type)
- }
- };
-
- Component.register('AutoForm', container => {
- if (!container.state.schema) container.state.schema = []
-
- const ensureProxy = v => (v && typeof v === 'object' && !v.__isProxy) ? NewState(v) : v;
- container.state.__watch('data', v => container.data = ensureProxy(v));
- container.data = ensureProxy(container.state.data || {});
-
- container.addEventListener('submit', async (event) => {
- event.preventDefault()
- if (!container.form.reportValidity()) return global.UI?.toast?.('{#verify failed#}', { type: 'danger' })
-
- container.state.formState = 'submitting'
- const detail = JSON.parse(JSON.stringify(container.data))
- const customEvent = new CustomEvent('submit', { bubbles: false, cancelable: true, detail })
- container.dispatchEvent(customEvent)
-
- if (customEvent.defaultPrevented) return
- try {
- if (container.state.action) {
- const resp = await global.HTTP.request({ url: container.state.action, method: 'POST', data: detail })
- if (!resp.ok) throw new Error(resp.error)
- }
- container.state.formState = 'success'
- if (global.UI?.toast) global.UI.toast('{#submit success#}', { type: 'success' })
- } catch (err) {
- container.state.formState = 'error'
- if (global.UI?.toast) global.UI.toast(err.message, { type: 'danger' })
- }
- })
- }, Util.makeDom(/*html*/`
-