GitHub/Basalt2
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

removing some caches

Browse Source
This commit is contained in:
Robert Jelic
2025-09-16 17:41:40 +02:00
parent 276f4ca380
commit 69f7c07a1f
2848 changed files with 24772 additions and 995862 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/.vitepress/dist/404.html vendored
View File

File diff suppressed because one or more lines are too long

21
docs/.vitepress/dist/README.html vendored
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/README.md.6bb55fc8.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,o as e,c as s,k as a,a as o}from"./chunks/framework.4313453f.js";const u=JSON.parse('{"title":"basalt-docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":null}'),c={name:"README.md"},d=a("h1",{id:"basalt-docs",tabindex:"-1"},[o("basalt-docs "),a("a",{class:"header-anchor",href:"#basalt-docs","aria-label":'Permalink to "basalt-docs"'},"​")],-1),n=a("p",null,"Basalts documentation",-1),r=[d,n];function l(i,_,p,h,m,f){return e(),s("div",null,r)}const b=t(c,[["render",l]]);export{u as __pageData,b as default};

1
docs/.vitepress/dist/assets/README.md.6bb55fc8.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,o as e,c as s,k as a,a as o}from"./chunks/framework.4313453f.js";const u=JSON.parse('{"title":"basalt-docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":null}'),c={name:"README.md"},d=a("h1",{id:"basalt-docs",tabindex:"-1"},[o("basalt-docs "),a("a",{class:"header-anchor",href:"#basalt-docs","aria-label":'Permalink to "basalt-docs"'},"​")],-1),n=a("p",null,"Basalts documentation",-1),r=[d,n];function l(i,_,p,h,m,f){return e(),s("div",null,r)}const b=t(c,[["render",l]]);export{u as __pageData,b as default};

1
docs/.vitepress/dist/assets/README.md.DpIKKjI7.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as t,a as s,b as o,p as a,g as r}from"./chunks/framework.BcrMLAmg.js";const E=JSON.parse('{"title":"basalt-docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":1739725464000}'),d={name:"README.md"};function l(n,e,c,i,p,m){return o(),s("div",null,e[0]||(e[0]=[a("h1",{id:"basalt-docs",tabindex:"-1"},[r("basalt-docs "),a("a",{class:"header-anchor",href:"#basalt-docs","aria-label":'Permalink to "basalt-docs"'},"​")],-1),a("p",null,"Basalts documentation",-1)]))}const _=t(d,[["render",l]]);export{E as __pageData,_ as default};

1
docs/.vitepress/dist/assets/README.md.DpIKKjI7.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as t,a as s,b as o,p as a,g as r}from"./chunks/framework.BcrMLAmg.js";const E=JSON.parse('{"title":"basalt-docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":1739725464000}'),d={name:"README.md"};function l(n,e,c,i,p,m){return o(),s("div",null,e[0]||(e[0]=[a("h1",{id:"basalt-docs",tabindex:"-1"},[r("basalt-docs "),a("a",{class:"header-anchor",href:"#basalt-docs","aria-label":'Permalink to "basalt-docs"'},"​")],-1),a("p",null,"Basalts documentation",-1)]))}const _=t(d,[["render",l]]);export{E as __pageData,_ as default};

1
docs/.vitepress/dist/assets/README.md.bK1e9QN5.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,c as e,o as s,m as a,a as o}from"./chunks/framework.nQaBHiNx.js";const u=JSON.parse('{"title":"basalt-docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":null}'),c={name:"README.md"},d=a("h1",{id:"basalt-docs",tabindex:"-1"},[o("basalt-docs "),a("a",{class:"header-anchor",href:"#basalt-docs","aria-label":'Permalink to "basalt-docs"'},"​")],-1),n=a("p",null,"Basalts documentation",-1),r=[d,n];function l(i,_,p,m,h,f){return s(),e("div",null,r)}const b=t(c,[["render",l]]);export{u as __pageData,b as default};

1
docs/.vitepress/dist/assets/README.md.bK1e9QN5.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,c as e,o as s,m as a,a as o}from"./chunks/framework.nQaBHiNx.js";const u=JSON.parse('{"title":"basalt-docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":null}'),c={name:"README.md"},d=a("h1",{id:"basalt-docs",tabindex:"-1"},[o("basalt-docs "),a("a",{class:"header-anchor",href:"#basalt-docs","aria-label":'Permalink to "basalt-docs"'},"​")],-1),n=a("p",null,"Basalts documentation",-1),r=[d,n];function l(i,_,p,m,h,f){return s(),e("div",null,r)}const b=t(c,[["render",l]]);export{u as __pageData,b as default};

1
docs/.vitepress/dist/assets/app.3dd918f0.js vendored
View File

@@ -1 +0,0 @@
import{a0 as L,h as v,g as C,j as S,o as A,c as E,n as P,l as O,s as b,a1 as $,a2 as D,a3 as N,a4 as j,a5 as k,a6 as M,a7 as B,a8 as F,a9 as H,aa as V,V as I,d as z,u as G,y as U,ab as q,ac as J,ad as K,ae as Q}from"./chunks/framework.4313453f.js";import{t as W}from"./chunks/theme.dba58d3f.js";async function X(t){try{return navigator.clipboard.writeText(t)}catch{const e=document.createElement("textarea"),n=document.activeElement;e.value=t,e.setAttribute("readonly",""),e.style.contain="strict",e.style.position="absolute",e.style.left="-9999px",e.style.fontSize="12pt";const a=document.getSelection(),l=a?a.rangeCount>0&&a.getRangeAt(0):null;document.body.appendChild(e),e.select(),e.selectionStart=0,e.selectionEnd=t.length,document.execCommand("copy"),document.body.removeChild(e),a&&l&&(a.removeAllRanges(),a.addRange(l)),n&&n.focus()}}const Y=(t,e)=>{const n=t.__vccOpts||t;for(const[a,l]of e)n[a]=l;return n},Z=["data-message","data-label"],ee=["innerHTML"],f={position:"auto",target:"auto",message:"copied",label:null,classes:"copy-btn",preferSibling:"previous"},te={__name:"CopyButton",props:{position:{type:String,default:()=>f.position},target:{type:String,default:()=>f.target},message:{type:String,default:()=>f.message},label:{type:String,default:()=>f.label},classes:{type:String,default:()=>f.classes},content:{type:String,default:null}},setup(t){var e,n;const a=t,l=L(),o=v(null),s=v(null),h=v(!0),m=v(null),p=v(null),x=a.label?a.label:(n=(e=l.default)==null?void 0:e.call(l)[0])==null?void 0:n.children,_=C(()=>`<!-- Button not rendered: ${m.value} -->`),R=C(()=>a.message.replace("$CONTENT",p.value));S(()=>{var g,y;const r=((g=o.value.previousElementSibling)==null?void 0:g.tagName)==="CODE"?o.value.previousElementSibling:null,d=((y=o.value.nextElementSibling)==null?void 0:y.tagName)==="CODE"?o.value.nextElementSibling:null;if(!r&&!d&&!a.content){h.value=!1,m.value="No code element found and no content prop given";return}if(a.content){p.value=a.content;return}let u=a.position;if(a.target==="auto"?r&&d?(s.value=r,u==="auto"&&(u="end")):s.value=r||d:a.target==="previous"?(s.value=r,u==="auto"&&(u="end")):a.target==="next"&&(s.value=d,u==="auto"&&(u="start")),!s.value){m.value="Failed to select code node";return}let i="beforeend";u==="auto"?r?i="beforeend":d&&(i="afterbegin"):u==="start"?i="afterbegin":u==="end"&&(i="beforeend"),p.value=s.value.innerText,s.value.innerText="",s.value.insertAdjacentHTML("beforeend",`<span>${p.value}</span>`),s.value.insertAdjacentElement(i,o.value),o.value.classList.add(`copy-btn-${i}`)});async function w(){await X(p.value),o.value.classList.add("copied"),setTimeout(()=>{o.value.classList.remove("copied")},1e3)}return(g,y)=>h.value?(A(),E("span",{key:0,class:P(t.classes),ref_key:"btn",ref:o,onClick:w,"data-message":R.value,"data-label":O(x)},null,10,Z)):(A(),E("span",{key:1,innerHTML:_.value},null,8,ee))}},ae=Y(te,[["__scopeId","data-v-32f61984"]]);const ne={extends:W,enhanceApp({app:t}){t.component("C",ae)}};function T(t){if(t.extends){const e=T(t.extends);return{...e,...t,async enhanceApp(n){e.enhanceApp&&await e.enhanceApp(n),t.enhanceApp&&await t.enhanceApp(n)}}}return t}const c=T(ne),le=z({name:"VitePressApp",setup(){const{site:t}=G();return S(()=>{U(()=>{document.documentElement.lang=t.value.lang,document.documentElement.dir=t.value.dir})}),q(),J(),K(),c.setup&&c.setup(),()=>Q(c.Layout)}});async function oe(){const t=ue(),e=se();e.provide(D,t);const n=N(t.route);return e.provide(j,n),e.component("Content",k),e.component("ClientOnly",M),Object.defineProperties(e.config.globalProperties,{$frontmatter:{get(){return n.frontmatter.value}},$params:{get(){return n.page.value.params}}}),c.enhanceApp&&await c.enhanceApp({app:e,router:t,siteData:B}),{app:e,router:t,data:n}}function se(){return F(le)}function ue(){let t=b,e;return H(n=>{let a=V(n),l=null;return a&&(t&&(e=a),(t||e===a)&&(a=a.replace(/\.js$/,".lean.js")),l=I(()=>import(a),[])),b&&(t=!1),l},c.NotFound)}b&&oe().then(({app:t,router:e,data:n})=>{e.go().then(()=>{$(e.route,n.site),t.mount("#app")})});export{oe as createApp};

1
docs/.vitepress/dist/assets/app.DCZWIzvI.js vendored Normal file
View File

@@ -0,0 +1 @@
import{R as p}from"./chunks/theme.CxSU_GCj.js";import{S as s,a2 as i,a3 as u,a4 as c,a5 as l,a6 as f,a7 as d,a8 as m,a9 as h,aa as g,ab as A,e as v,j as w,o as y,x as C,ac as P,ad as R,ae as b,af as S}from"./chunks/framework.BcrMLAmg.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),E=v({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=w();return y(()=>{C(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&P(),R(),b(),n.setup&&n.setup(),()=>S(n.Layout)}});async function T(){globalThis.__VITEPRESS__=!0;const e=x(),a=j();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function j(){return A(E)}function x(){let e=s;return h(a=>{let t=g(a),o=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),o=import(t)),s&&(e=!1),o},n.NotFound)}s&&T().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{T as createApp};

7
docs/.vitepress/dist/assets/app.yweqp-TB.js vendored
View File

@@ -1,7 +0,0 @@
function __vite__mapDeps(indexes) {
if (!__vite__mapDeps.viteFileDeps) {
__vite__mapDeps.viteFileDeps = []
}
return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
}
import{j as o,a5 as p,a6 as u,a7 as l,a8 as c,a9 as f,aa as d,ab as m,ac as h,ad as g,ae as A,Y as P,d as _,u as v,l as y,z as C,af as E,ag as b,ah as w,ai as R}from"./chunks/framework.nQaBHiNx.js";import{t as S}from"./chunks/theme.DMrn68il.js";function i(e){if(e.extends){const a=i(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const s=i(S),T=_({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=v();return y(()=>{C(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&E(),b(),w(),s.setup&&s.setup(),()=>R(s.Layout)}});async function D(){globalThis.__VITEPRESS__=!0;const e=L(),a=j();a.provide(u,e);const t=l(e.route);return a.provide(c,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),s.enhanceApp&&await s.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function j(){return h(T)}function L(){let e=o,a;return g(t=>{let n=A(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=P(()=>import(n),__vite__mapDeps([]))),o&&(e=!1),r},s.NotFound)}o&&D().then(({app:e,router:a,data:t})=>{a.go().then(()=>{p(a.route,t.site),e.mount("#app")})});export{D as createApp};

1
docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.1f8344fc.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.CwfyZDKd.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.EKHPktwE.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
docs/.vitepress/dist/assets/chunks/BasaltDemo.DxcuRDAa.js vendored Normal file
View File

@@ -0,0 +1,2 @@
import{_ as C,r as v,ah as q,u as E,o as z,a as g,b as w,p as n,i as L,O as _}from"./framework.BcrMLAmg.js";const S=["disabled"],X={__name:"BasaltDemo",setup(Y){const a=v(!1),l=v(null),o=q({x:100,y:100});let d={x:0,y:0},c=!1;const u=E();let p="";z(()=>{var t;typeof window>"u"||(p=(((t=u.default)==null?void 0:t.call(u))||[]).map(e=>typeof e.children=="string"?e.children:"").join(`
`))});async function D(){if(typeof window>"u"||typeof document>"u")return;a.value=!0;const t=await fetch("https://raw.githubusercontent.com/Pyroxenium/Basalt2/refs/heads/main/release/basalt.lua").then(s=>s.text()),e=document.createElement("script");e.src="https://copy-cat.squiddev.cc/require.js",e.onload=()=>{window.require.config({paths:{copycat:"https://copy-cat.squiddev.cc/"}}),window.require(["copycat/embed"],s=>{s(l.value,{hdFont:"https://copy-cat.squiddev.cc/term_font_hd-0506b6efe5f7feae.png",files:{"startup.lua":p,"basalt.lua":t},label:"Basalt Demo"}).run()})},document.body.appendChild(e)}function k(){a.value=!1}function B(t){typeof document>"u"||(c=!0,d.x=t.clientX-o.x,d.y=t.clientY-o.y,document.addEventListener("mousemove",f),document.addEventListener("mouseup",m))}function f(t){var b;if(!c||typeof window>"u")return;const e=(b=l.value)==null?void 0:b.parentElement,s=(e==null?void 0:e.offsetWidth)||0,x=(e==null?void 0:e.offsetHeight)||0,y=window.innerWidth-s,h=window.innerHeight-x;let i=t.clientX-d.x,r=t.clientY-d.y;i<0&&(i=0),r<0&&(r=0),i>y&&(i=y),r>h&&(r=h),o.x=i,o.y=r}function m(){typeof document>"u"||(c=!1,document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",m))}return(t,e)=>(w(),g("div",null,[n("button",{onClick:D,disabled:a.value,style:_({pointerEvents:a.value?"none":"auto"})}," ▶ Run ",12,S),a.value?(w(),g("div",{key:0,style:_({position:"fixed",top:o.y+"px",left:o.x+"px",width:"625px",height:"425px",background:"#1a1a1a",borderRadius:"8px",boxShadow:"0 10px 40px rgba(0, 0, 0, 0.5)",display:"flex",flexDirection:"column",zIndex:9999,border:"1px solid #333"})},[n("div",{onMousedown:B,style:{display:"flex","justify-content":"space-between","align-items":"center",padding:"0.5rem 1rem",background:"linear-gradient(180deg, #2a2a2a 0%, #222 100%)","border-bottom":"1px solid #111",cursor:"move","user-select":"none","border-radius":"8px 8px 0 0"}},[e[0]||(e[0]=n("div",{style:{display:"flex","align-items":"center",gap:"0.5rem",color:"#fff","font-size":"0.875rem","font-weight":"500"}},[n("span",null,"💻"),n("span",null,"Basalt Demo")],-1)),n("div",{style:{display:"flex",gap:"0.5rem"}},[n("button",{onClick:k,style:{width:"24px",height:"24px","border-radius":"50%",border:"none",cursor:"pointer",background:"#ef4444",color:"white","font-size":"12px",transition:"all 0.2s ease"},title:"Close (ESC)"}," ✕ ")])],32),n("div",{ref_key:"container",ref:l,style:{flex:"1",background:"#000","border-radius":"0 0 8px 8px",overflow:"hidden",position:"relative"}},null,512)],4)):L("",!0)]))}},H=C(X,[["__scopeId","data-v-080bd216"]]);export{H as default};

5
docs/.vitepress/dist/assets/chunks/BasaltDemoWithCode.e5O7TrPL.js vendored Normal file
View File

@@ -0,0 +1,5 @@
import{_ as H,r as p,ah as S,u as W,c as D,o as R,y as j,a as c,b as i,p as n,h as N,i as w,t as g,O as L,H as P,w as V,T as X,ai as Y,Q as z}from"./framework.BcrMLAmg.js";const A={class:"basalt-demo-wrapper"},I={class:"code-block-container"},F={class:"code-header"},K={class:"language-badge"},O=["disabled"],Q={key:0,class:"play-icon"},U={key:1,class:"loading-icon"},G={class:"button-text"},J={class:"code-block"},Z=["innerHTML"],ee={class:"terminal-title"},te={class:"terminal-body"},ne={key:0,class:"loading-overlay"},ae={__name:"BasaltDemoWithCode",props:{language:{type:String,default:"lua"},title:{type:String,default:"Basalt Demo"}},setup(f){const M=f,s=p(!1),m=p(null),T=p(null),o=S({x:100,y:100}),a=p(!1);let u={x:0,y:0},h=!1,r=null;const y=W();function b(e){return(e||[]).map(t=>t?typeof t=="string"?t:typeof t.children=="string"?t.children:Array.isArray(t.children)?b(t.children):"":"").join(`
`).replace(/\r\n/g,`
`).replace(/\n{3,}/g,`
`).trim()}const _=D(()=>{var e;return b(((e=y.default)==null?void 0:e.call(y))??[])}),$=D(()=>{let e=_.value;const t=["local","function","if","then","else","elseif","end","for","while","do","repeat","until","return","break","true","false","nil","and","or","not","require"],l=new RegExp(`\\b(${t.join("|")})\\b`,"g");return e=e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),e=e.replace(l,'<span class="keyword">$1</span>'),e=e.replace(/"([^"]*)"/g,'<span class="string">"$1"</span>'),e=e.replace(/'([^']*)'/g,`<span class="string">'$1'</span>`),e=e.replace(/--(.*)$/gm,'<span class="comment">--$1</span>'),e=e.replace(/\b(\d+)\b/g,'<span class="number">$1</span>'),e=e.replace(/\b(basalt|main)\b/g,'<span class="variable">$1</span>'),e=e.replace(/(:?\w+)\(/g,'<span class="function">$1</span>('),e});async function q(){if(!(typeof window>"u")&&!(a.value||s.value)){a.value=!0;try{const e=await fetch("https://raw.githubusercontent.com/Pyroxenium/Basalt2/refs/heads/main/release/basalt.lua").then(t=>t.text());window.require||(await new Promise((t,l)=>{const d=document.createElement("script");d.src="https://copy-cat.squiddev.cc/require.js",d.onload=t,d.onerror=l,document.body.appendChild(d)}),window.require.config({paths:{copycat:"https://copy-cat.squiddev.cc/"}})),s.value=!0,x(),await z(),await new Promise(t=>setTimeout(t,200)),window.require(["copycat/embed"],t=>{if(!m.value){console.error("Container not found"),a.value=!1;return}r=t(m.value,{hdFont:"https://copy-cat.squiddev.cc/term_font_hd-0506b6efe5f7feae.png",files:{"startup.lua":_.value,"basalt.lua":e},label:M.title}),r.run(),setTimeout(()=>{a.value=!1},500)})}catch(e){console.error("Error starting demo:",e),a.value=!1,s.value=!1}}}function v(){if(r){try{r.shutdown()}catch(e){console.warn("Error shutting down:",e)}r=null}s.value=!1,a.value=!1}function x(){if(typeof window>"u")return;const e=window.innerWidth,t=window.innerHeight;o.x=Math.max(0,(e-650)/2),o.y=Math.max(0,(t-480)/2)}function B(e){typeof document>"u"||e.target.closest("button")||(h=!0,u.x=e.clientX-o.x,u.y=e.clientY-o.y,document.addEventListener("mousemove",k),document.addEventListener("mouseup",C),e.preventDefault())}function k(e){if(!h||typeof window>"u")return;const t=window.innerWidth-650,l=window.innerHeight-480;o.x=Math.max(0,Math.min(e.clientX-u.x,t)),o.y=Math.max(0,Math.min(e.clientY-u.y,l))}function C(){typeof document>"u"||(h=!1,document.removeEventListener("mousemove",k),document.removeEventListener("mouseup",C))}function E(e){e.key==="Escape"&&s.value&&v()}return R(()=>{typeof document<"u"&&document.addEventListener("keydown",E)}),j(()=>{typeof document<"u"&&document.removeEventListener("keydown",E),v()}),(e,t)=>(i(),c("div",A,[n("div",I,[n("div",F,[n("span",K,g(f.language),1),n("button",{class:"run-button",onClick:q,disabled:a.value||s.value},[a.value?(i(),c("span",U,"⟳")):(i(),c("span",Q,"▶")),n("span",G,g(a.value?"Loading...":"Run"),1)],8,O)]),n("div",J,[n("pre",null,[n("code",{innerHTML:$.value},null,8,Z)])])]),typeof e.document<"u"?(i(),N(Y,{key:0,to:"body"},[s.value?(i(),c("div",{key:0,ref_key:"wrapperRef",ref:T,class:"terminal-window",style:L({top:o.y+"px",left:o.x+"px"})},[n("div",{class:"terminal-header",onMousedown:B},[n("div",ee,[t[0]||(t[0]=n("span",{class:"terminal-icon"},"💻",-1)),n("span",null,g(f.title),1)]),n("div",{class:"terminal-controls"},[n("button",{class:"control-button minimize",onClick:x,title:"Center"}," ⊡ "),n("button",{class:"control-button close",onClick:v,title:"Close (ESC)"}," ✕ ")])],32),n("div",te,[P(X,{name:"fade"},{default:V(()=>[a.value?(i(),c("div",ne,t[1]||(t[1]=[n("div",{class:"spinner"},null,-1),n("p",null,"Loading emulator...",-1)]))):w("",!0)]),_:1}),n("div",{ref_key:"container",ref:m,class:"terminal-container",style:L({opacity:a.value?0:1})},null,4)])],4)):w("",!0)])):w("",!0)]))}},se=H(ae,[["__scopeId","data-v-0f9f3cfb"]]);export{se as default};

7
docs/.vitepress/dist/assets/chunks/VPLocalSearchBox.049d8e27.js vendored
View File

File diff suppressed because one or more lines are too long

8
docs/.vitepress/dist/assets/chunks/VPLocalSearchBox.CQt4FL4n.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

13
docs/.vitepress/dist/assets/chunks/VPLocalSearchBox.D3tbDE0S.js vendored
View File

File diff suppressed because one or more lines are too long

33
docs/.vitepress/dist/assets/chunks/emulator.DaPKcFxj.js vendored Normal file
View File

@@ -0,0 +1,33 @@
function v(){if(typeof window>"u")return;let r=null,a=!1;async function g(){const t=await fetch("https://raw.githubusercontent.com/Pyroxenium/Basalt2/refs/heads/main/release/basalt.lua").then(s=>s.text());return window.require||await new Promise((s,o)=>{const e=document.createElement("script");e.src="https://copy-cat.squiddev.cc/require.js",e.onload=s,e.onerror=o,document.body.appendChild(e)}),t}async function h(t,s="Code Demo"){if(console.log("runCodeInEmulator called with:",{code:t,title:s}),a||r){console.warn("Emulator already running");return}a=!0,console.log("Starting emulator loading...");try{console.log("Loading dependencies...");const o=await g();console.log("Dependencies loaded, basalt length:",o.length);const e=document.createElement("div");e.style.position="fixed",e.style.top="-9999px",e.style.left="-9999px",e.style.width="650px",e.style.height="480px",e.style.padding="0",e.style.margin="0",e.style.border="none",document.body.appendChild(e),window.require.config({paths:{copycat:"https://copy-cat.squiddev.cc/"}}),window.require(["copycat/embed"],i=>{const l=i(e,{hdFont:"https://copy-cat.squiddev.cc/term_font_hd-0506b6efe5f7feae.png",files:{"startup.lua":t,"basalt.lua":o},label:s});console.log("Setup promise created:",l),l&&typeof l.then=="function"?l.then(n=>{console.log("Computer instance resolved from promise:",n),r=n,n&&typeof n.run=="function"?(n.run(),console.log("Computer started running")):n&&typeof n.start=="function"?(n.start(),console.log("Computer started with start()")):(console.error("Computer does not have run or start method:",n),console.log("Available methods:",Object.getOwnPropertyNames(n||{}))),console.log("Showing terminal window..."),f(e,s),a=!1,console.log("Emulator setup complete")}).catch(n=>{console.error("Error in setup promise:",n),a=!1}):(console.log("Setup returned directly:",l),r=l,l&&typeof l.run=="function"?(l.run(),console.log("Computer started running (direct)")):console.error("Direct setup does not have run method:",l),f(e,s),a=!1)})}catch(o){console.error("Error starting emulator:",o),a=!1}}function f(t,s){console.log("showTerminalWindow called with:",{container:t,title:s});const o=document.createElement("div");o.className="global-terminal-window",console.log("Terminal window div created"),o.style.cssText=`
position: fixed;
width: 625px;
height: 425px;
background: #1a1a1a;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
z-index: 9999;
border: 1px solid #333;
top: 100px;
left: 100px;
`;const e=document.createElement("div");e.className="terminal-header",e.style.cssText=`
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.2rem 1rem;
background: linear-gradient(180deg, #2a2a2a 0%, #222 100%);
border-bottom: 1px solid #111;
cursor: move;
user-select: none;
border-radius: 8px 8px 0 0;
`;const i=document.createElement("div");i.innerHTML=`<span style="color: #fff; font-size: 0.875rem; font-weight: 500;">💻 ${s}</span>`;const l=document.createElement("div");l.innerHTML=`
<button class="control-button close" style="width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer; background: #ef4444; color: white; font-size: 12px;" onclick="closeGlobalEmulator()">✕</button>
`,e.appendChild(i),e.appendChild(l);const n=document.createElement("div");n.style.cssText=`
flex: 1;
background: #000;
border-radius: 0 0 8px 8px;
overflow: hidden;
padding: 0;
margin: 0;
`,n.appendChild(t),t.style.position="static",t.style.top="auto",t.style.left="auto",t.style.width="100%",t.style.height="100%",t.style.padding="0",t.style.margin="0",o.appendChild(e),o.appendChild(n),document.body.appendChild(o),console.log("Terminal window added to body");let u=!1,c={x:0,y:0};e.addEventListener("mousedown",d=>{u=!0,c.x=d.clientX-o.offsetLeft,c.y=d.clientY-o.offsetTop}),document.addEventListener("mousemove",d=>{if(!u)return;const y=o.offsetWidth,b=o.offsetHeight;let p=d.clientX-c.x,m=d.clientY-c.y;const x=window.innerWidth-y,C=window.innerHeight-b;p=Math.max(0,Math.min(p,x)),m=Math.max(0,Math.min(m,C)),o.style.left=p+"px",o.style.top=m+"px"}),document.addEventListener("mouseup",()=>{u=!1})}function w(){if(r){try{r.shutdown()}catch(s){console.warn("Error shutting down:",s)}r=null}const t=document.querySelector(".global-terminal-window");t&&document.body.removeChild(t)}window.runCodeBlock=function(t){const s=t.closest(".code-block-with-run"),e=s.querySelector(".code-content").getAttribute("data-code"),i=atob(e),l=s.querySelector(".language-badge"),n=l&&l.textContent?l.textContent:"lua";h(i,`Code Demo (${n})`)},window.closeGlobalEmulator=w}export{v as initEmulator};

2
docs/.vitepress/dist/assets/chunks/framework.4313453f.js vendored
View File

File diff suppressed because one or more lines are too long

22
docs/.vitepress/dist/assets/chunks/framework.BcrMLAmg.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

17
docs/.vitepress/dist/assets/chunks/framework.nQaBHiNx.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/.vitepress/dist/assets/chunks/theme.CxSU_GCj.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
docs/.vitepress/dist/assets/chunks/theme.DMrn68il.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/chunks/theme.dba58d3f.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/download.md.DGGRiZUZ.js vendored
View File

@@ -1 +0,0 @@
import{_ as a,c as e,o as t,a4 as s}from"./chunks/framework.nQaBHiNx.js";const g=JSON.parse('{"title":"Download","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"download.md","filePath":"download.md","lastUpdated":null}'),l={name:"download.md"},o=s('<h1 id="download" tabindex="-1">Download <a class="header-anchor" href="#download" aria-label="Permalink to &quot;Download&quot;">​</a></h1><p>Basalt comes with 2 project versions: The source version, which is used for debugging errors and having annotations with a LLS and a proper Code Editor, and the packaged version which is much smaller.</p><p>Note: The 1-file-version is not supported anymore, and it will probably not come back.</p><h2 id="downloading-basalt-with-ui" tabindex="-1">Downloading Basalt with UI <a class="header-anchor" href="#downloading-basalt-with-ui" aria-label="Permalink to &quot;Downloading Basalt with UI&quot;">​</a></h2><p>The following command will download the installer for you and open the Installer UI:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>wget run https://basalt.madefor.cc/install.lua</span></span></code></pre></div><p>This is probably the best way to modify basalt the way you need it.</p><h2 id="download-basalt-without-ui" tabindex="-1">Download Basalt without UI <a class="header-anchor" href="#download-basalt-without-ui" aria-label="Permalink to &quot;Download Basalt without UI&quot;">​</a></h2><p>If you want to skip the UI and just want to download the, here are some other commands:</p><h3 id="source-default" tabindex="-1">Source Default <a class="header-anchor" href="#source-default" aria-label="Permalink to &quot;Source Default&quot;">​</a></h3><p>This is the source default version of basalt</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>wget run https://basalt.madefor.cc/install.lua source default</span></span></code></pre></div><h3 id="packaged-default" tabindex="-1">Packaged Default <a class="header-anchor" href="#packaged-default" aria-label="Permalink to &quot;Packaged Default&quot;">​</a></h3><p>This is the packaged default version of basalt</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>wget run https://basalt.madefor.cc/install.lua packaged default</span></span></code></pre></div><h3 id="source-full" tabindex="-1">Source Full <a class="header-anchor" href="#source-full" aria-label="Permalink to &quot;Source Full&quot;">​</a></h3><p>This is the source full version of basalt</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>wget run https://basalt.madefor.cc/install.lua source full</span></span></code></pre></div><h3 id="packaged-full" tabindex="-1">Packaged Full <a class="header-anchor" href="#packaged-full" aria-label="Permalink to &quot;Packaged Full&quot;">​</a></h3><p>This is the packaged full version of basalt</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>wget run https://basalt.madefor.cc/install.lua packaged default</span></span></code></pre></div><h2 id="update-basalt" tabindex="-1">Update Basalt <a class="header-anchor" href="#update-basalt" aria-label="Permalink to &quot;Update Basalt&quot;">​</a></h2><p>Since the new version of basalt you are also able to</p>',23),i=[o];function n(d,c,r,p,h,u){return t(),e("div",null,i)}const f=a(l,[["render",n]]);export{g as __pageData,f as default};

1
docs/.vitepress/dist/assets/download.md.DGGRiZUZ.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as a,c as e,o as t,a4 as s}from"./chunks/framework.nQaBHiNx.js";const g=JSON.parse('{"title":"Download","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"download.md","filePath":"download.md","lastUpdated":null}'),l={name:"download.md"},o=s("",23),i=[o];function n(d,c,r,p,h,u){return t(),e("div",null,i)}const f=a(l,[["render",n]]);export{g as __pageData,f as default};

1
docs/.vitepress/dist/assets/download.md.bb77cd62.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/download.md.bb77cd62.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as a,o as e,c as s,Q as t}from"./chunks/framework.4313453f.js";const b=JSON.parse('{"title":"Download","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"download.md","filePath":"download.md","lastUpdated":null}'),l={name:"download.md"},o=t("",23),n=[o];function d(i,c,p,r,u,h){return e(),s("div",null,n)}const f=a(l,[["render",d]]);export{b as __pageData,f as default};

1
docs/.vitepress/dist/assets/guides.md.90618d32.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,o as s,c as a,k as e,a as i}from"./chunks/framework.4313453f.js";const g=JSON.parse('{"title":"Guides","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides.md","filePath":"guides.md","lastUpdated":null}'),o={name:"guides.md"},r=e("h1",{id:"guides",tabindex:"-1"},[i("Guides "),e("a",{class:"header-anchor",href:"#guides","aria-label":'Permalink to "Guides"'},"​")],-1),d=e("p",null,`Our "Guides" section offers in-depth tutorials and walkthroughs to help you get started and master the intricacies of Basalt. Whether you're a beginner looking for the basics or an advanced developer seeking deep dives into specific features, you'll find valuable resources here to maximize your use of Basalt. Dive in and explore the possibilities!`,-1),n=[r,d];function l(c,u,h,p,f,_){return s(),a("div",null,n)}const k=t(o,[["render",l]]);export{g as __pageData,k as default};

1
docs/.vitepress/dist/assets/guides.md.90618d32.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,o as s,c as a,k as e,a as i}from"./chunks/framework.4313453f.js";const g=JSON.parse('{"title":"Guides","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides.md","filePath":"guides.md","lastUpdated":null}'),o={name:"guides.md"},r=e("h1",{id:"guides",tabindex:"-1"},[i("Guides "),e("a",{class:"header-anchor",href:"#guides","aria-label":'Permalink to "Guides"'},"​")],-1),d=e("p",null,`Our "Guides" section offers in-depth tutorials and walkthroughs to help you get started and master the intricacies of Basalt. Whether you're a beginner looking for the basics or an advanced developer seeking deep dives into specific features, you'll find valuable resources here to maximize your use of Basalt. Dive in and explore the possibilities!`,-1),n=[r,d];function l(c,u,h,p,f,_){return s(),a("div",null,n)}const k=t(o,[["render",l]]);export{g as __pageData,k as default};

1
docs/.vitepress/dist/assets/guides.md.CfLfS2yk.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,c as s,o as a,m as e,a as i}from"./chunks/framework.nQaBHiNx.js";const g=JSON.parse('{"title":"Guides","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides.md","filePath":"guides.md","lastUpdated":null}'),o={name:"guides.md"},r=e("h1",{id:"guides",tabindex:"-1"},[i("Guides "),e("a",{class:"header-anchor",href:"#guides","aria-label":'Permalink to "Guides"'},"​")],-1),d=e("p",null,`Our "Guides" section offers in-depth tutorials and walkthroughs to help you get started and master the intricacies of Basalt. Whether you're a beginner looking for the basics or an advanced developer seeking deep dives into specific features, you'll find valuable resources here to maximize your use of Basalt. Dive in and explore the possibilities!`,-1),n=[r,d];function l(c,u,h,p,f,_){return a(),s("div",null,n)}const v=t(o,[["render",l]]);export{g as __pageData,v as default};

1
docs/.vitepress/dist/assets/guides.md.CfLfS2yk.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,c as s,o as a,m as e,a as i}from"./chunks/framework.nQaBHiNx.js";const g=JSON.parse('{"title":"Guides","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides.md","filePath":"guides.md","lastUpdated":null}'),o={name:"guides.md"},r=e("h1",{id:"guides",tabindex:"-1"},[i("Guides "),e("a",{class:"header-anchor",href:"#guides","aria-label":'Permalink to "Guides"'},"​")],-1),d=e("p",null,`Our "Guides" section offers in-depth tutorials and walkthroughs to help you get started and master the intricacies of Basalt. Whether you're a beginner looking for the basics or an advanced developer seeking deep dives into specific features, you'll find valuable resources here to maximize your use of Basalt. Dive in and explore the possibilities!`,-1),n=[r,d];function l(c,u,h,p,f,_){return a(),s("div",null,n)}const v=t(o,[["render",l]]);export{g as __pageData,v as default};

58
docs/.vitepress/dist/assets/guides_animations.md.CWGc-sFu.js vendored Normal file
View File

@@ -0,0 +1,58 @@
import{_ as i,a,b as n,ag as h}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"Basalt Animations","description":"","frontmatter":{},"headers":[],"relativePath":"guides/animations.md","filePath":"guides/animations.md","lastUpdated":1745138110000}'),t={name:"guides/animations.md"};function k(l,s,p,e,E,r){return n(),a("div",null,s[0]||(s[0]=[h(`<h1 id="basalt-animations" tabindex="-1">Basalt Animations <a class="header-anchor" href="#basalt-animations" aria-label="Permalink to &quot;Basalt Animations&quot;">​</a></h1><p>Basalt provides a powerful animation system that allows you to create smooth transitions and effects for UI elements.</p><h2 id="basic-concepts" tabindex="-1">Basic Concepts <a class="header-anchor" href="#basic-concepts" aria-label="Permalink to &quot;Basic Concepts&quot;">​</a></h2><p>Animations in Basalt work with:</p><ul><li><strong>Sequences</strong>: Groups of animations that play one after another</li><li><strong>Chains</strong>: Multiple sequences that can be controlled together</li><li><strong>Timing</strong>: Control over duration and easing of animations</li></ul><p><code>element:animate()</code> creates a new Animation object. Each animation method accepts a duration parameter (in seconds).</p><h3 id="core-animation-methods" tabindex="-1">Core Animation Methods <a class="header-anchor" href="#core-animation-methods" aria-label="Permalink to &quot;Core Animation Methods&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">animate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">move</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x, y, duration) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Animate move</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">moveOffset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x, y, duration) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Animate offset</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">resize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(w, h, duration) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Animate size</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(property, targetNumber, duration) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Animate number</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">entries</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(property, entryList, duration) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Cycles through a list of values (e.g. colors, text) for any property over the specified duration</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">morphText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(property, targetText, duration) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Animate text</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">typewrite</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(property, targetText, duration) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Animate text</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fadeText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(property, targetText, duration) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Animate text</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">scrollText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(property, targetText, duration) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Animate text</span></span></code></pre></div><h3 id="animation-control" tabindex="-1">Animation Control <a class="header-anchor" href="#animation-control" aria-label="Permalink to &quot;Animation Control&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> anim </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">animate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">moveOffset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Start the animation</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">anim</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">pause</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Pause animation</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">anim</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">resume</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Resume animation</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">anim</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">stop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Stop animation</span></span></code></pre></div><h2 id="understanding-sequences" tabindex="-1">Understanding Sequences <a class="header-anchor" href="#understanding-sequences" aria-label="Permalink to &quot;Understanding Sequences&quot;">​</a></h2><p>Sequences allow you to create complex animations by controlling when each animation plays. By default, all animations in a chain play simultaneously. Using <code>:sequence()</code> creates a new group that waits for the previous animations to complete.</p><h3 id="basic-example" tabindex="-1">Basic Example <a class="header-anchor" href="#basic-example" aria-label="Permalink to &quot;Basic Example&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Without sequences (animations play at the same time):</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">animate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">move</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- These three animations</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">resize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- all start and play</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">morphText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;newText&quot; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- simultaneously</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- With sequences (animations play one after another):</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">animate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">move</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Plays first</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">sequence</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">resize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Starts after position completes</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">sequence</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">morphText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;newText&quot; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- starts after resizing completes</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h3 id="advanced-usage" tabindex="-1">Advanced Usage <a class="header-anchor" href="#advanced-usage" aria-label="Permalink to &quot;Advanced Usage&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Complex movement pattern</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">animate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">move</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Move right</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">sequence</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">move</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Then down</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">sequence</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">move</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Then left</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">sequence</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">move</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Then up</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onDone</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- Called when entire sequence completes</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Mixing simultaneous and sequential animations</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">animate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- These two happen together</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">move</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">morphText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;newText&quot; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- simultaneously</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">sequence</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- These two also happen together, but after the first group</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">move</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">morphText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;anotherText&quot; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- simultaneously</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h3 id="callbacks" tabindex="-1">Callbacks <a class="header-anchor" href="#callbacks" aria-label="Permalink to &quot;Callbacks&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">animate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">moveOffset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onStart</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- When animation starts</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onDone</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- When animation completes</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onStep</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Every animation step</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h2 id="tips-best-practices" tabindex="-1">Tips &amp; Best Practices <a class="header-anchor" href="#tips-best-practices" aria-label="Permalink to &quot;Tips &amp; Best Practices&quot;">​</a></h2><ul><li>Use sequences for complex animations</li><li>Keep duration times reasonable (0.1-2 seconds)</li><li>Consider using callbacks for state management</li></ul>`,20)]))}const y=i(t,[["render",k]]);export{g as __pageData,y as default};

1
docs/.vitepress/dist/assets/guides_animations.md.CWGc-sFu.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as n,ag as h}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"Basalt Animations","description":"","frontmatter":{},"headers":[],"relativePath":"guides/animations.md","filePath":"guides/animations.md","lastUpdated":1745138110000}'),t={name:"guides/animations.md"};function k(l,s,p,e,E,r){return n(),a("div",null,s[0]||(s[0]=[h("",20)]))}const y=i(t,[["render",k]]);export{g as __pageData,y as default};

1
docs/.vitepress/dist/assets/guides_annotations.md.B9rGAklD.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as t,a,b as n,ag as i}from"./chunks/framework.BcrMLAmg.js";const c=JSON.parse('{"title":"Lua Annotations Guide","description":"","frontmatter":{},"headers":[],"relativePath":"guides/annotations.md","filePath":"guides/annotations.md","lastUpdated":1739870373000}'),o={name:"guides/annotations.md"};function l(r,e,s,d,u,p){return n(),a("div",null,e[0]||(e[0]=[i('<h1 id="lua-annotations-guide" tabindex="-1">Lua Annotations Guide <a class="header-anchor" href="#lua-annotations-guide" aria-label="Permalink to &quot;Lua Annotations Guide&quot;">​</a></h1><p>Writing Lua code for CC: Tweaked and Basalt becomes much more enjoyable with proper type annotations. They provide code completion, type checking, and inline documentation.</p><h2 id="setting-up-annotations" tabindex="-1">Setting Up Annotations <a class="header-anchor" href="#setting-up-annotations" aria-label="Permalink to &quot;Setting Up Annotations&quot;">​</a></h2><h3 id="cc-tweaked-annotations" tabindex="-1">CC: Tweaked Annotations <a class="header-anchor" href="#cc-tweaked-annotations" aria-label="Permalink to &quot;CC: Tweaked Annotations&quot;">​</a></h3><p>Download the official CC: Tweaked type definitions from: <a href="https://github.com/nvim-computercraft/lua-ls-cc-tweaked" target="_blank" rel="noreferrer">CC: Tweaked Annotations</a></p><p>The GitHub page includes a detailed installation guide that will help you set up everything correctly.</p><h3 id="basalt-annotations" tabindex="-1">Basalt Annotations <a class="header-anchor" href="#basalt-annotations" aria-label="Permalink to &quot;Basalt Annotations&quot;">​</a></h3><p>The Basalt Dev version includes built-in type definitions that provide:</p><ul><li>Complete type information for all Basalt elements</li><li>Method parameter hints</li><li>Return type information</li><li>Event type definitions</li></ul><p>To get started, simply download the Dev version of Basalt.</p><h2 id="ide-configuration" tabindex="-1">IDE Configuration <a class="header-anchor" href="#ide-configuration" aria-label="Permalink to &quot;IDE Configuration&quot;">​</a></h2><h3 id="required-extensions" tabindex="-1">Required Extensions <a class="header-anchor" href="#required-extensions" aria-label="Permalink to &quot;Required Extensions&quot;">​</a></h3><p>For the best development experience, you&#39;ll need:</p><ol><li>A Lua Language Server</li><li>An IDE with Lua support</li></ol><p>For Visual Studio Code users:</p><ul><li>Install <a href="https://marketplace.visualstudio.com/items?itemName=sumneko.lua" target="_blank" rel="noreferrer">Summeko Lua</a></li><li>The extension provides full language server capabilities</li></ul><h2 id="benefits" tabindex="-1">Benefits <a class="header-anchor" href="#benefits" aria-label="Permalink to &quot;Benefits&quot;">​</a></h2><p>With properly configured annotations, you get:</p><ul><li>✓ Intelligent code completion</li><li>✓ Real-time type checking</li><li>✓ Documentation on hover</li><li>✓ Method signature help</li><li>✓ Better error detection</li></ul>',19)]))}const m=t(o,[["render",l]]);export{c as __pageData,m as default};

1
docs/.vitepress/dist/assets/guides_annotations.md.B9rGAklD.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as t,a,b as n,ag as i}from"./chunks/framework.BcrMLAmg.js";const c=JSON.parse('{"title":"Lua Annotations Guide","description":"","frontmatter":{},"headers":[],"relativePath":"guides/annotations.md","filePath":"guides/annotations.md","lastUpdated":1739870373000}'),o={name:"guides/annotations.md"};function l(r,e,s,d,u,p){return n(),a("div",null,e[0]||(e[0]=[i("",19)]))}const m=t(o,[["render",l]]);export{c as __pageData,m as default};

39
docs/.vitepress/dist/assets/guides_benchmarks.md.DWPH8xOg.js vendored Normal file
View File

@@ -0,0 +1,39 @@
import{_ as i,a,b as n,ag as l}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"Benchmarking in Basalt","description":"","frontmatter":{},"headers":[],"relativePath":"guides/benchmarks.md","filePath":"guides/benchmarks.md","lastUpdated":1740469724000}'),h={name:"guides/benchmarks.md"};function t(e,s,k,p,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`<h1 id="benchmarking-in-basalt" tabindex="-1">Benchmarking in Basalt <a class="header-anchor" href="#benchmarking-in-basalt" aria-label="Permalink to &quot;Benchmarking in Basalt&quot;">​</a></h1><p>Basalt provides built-in benchmarking tools to help you analyze and optimize your application&#39;s performance.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to &quot;Basic Usage&quot;">​</a></h2><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Start benchmarking a container</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">benchmarkContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;render&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Start tracking render performance</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Log benchmark results</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">logContainerBenchmarks</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;render&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Print results to console</span></span></code></pre></div><h2 id="available-benchmark-methods" tabindex="-1">Available Benchmark Methods <a class="header-anchor" href="#available-benchmark-methods" aria-label="Permalink to &quot;Available Benchmark Methods&quot;">​</a></h2><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Track specific container methods</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">benchmarkContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(methodName) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Start tracking</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">logContainerBenchmarks</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(methodName) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Show results</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Common methods to benchmark:</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;render&quot; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Track render performance</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;mouse_click&quot; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Track click handling</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;mouse_up&quot; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Track release handling</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;mouse_drag&quot; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Track drag performance</span></span></code></pre></div><h2 id="practical-example" tabindex="-1">Practical Example <a class="header-anchor" href="#practical-example" aria-label="Permalink to &quot;Practical Example&quot;">​</a></h2><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;basalt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Create a benchmark trigger button</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Show Benchmarks&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">logContainerBenchmarks</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;render&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Create some test elements</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> program </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addProgram</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">execute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;shell.lua&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> complexFrame </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Start benchmarking</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">benchmarkContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;render&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">run</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h2 id="understanding-results" tabindex="-1">Understanding Results <a class="header-anchor" href="#understanding-results" aria-label="Permalink to &quot;Understanding Results&quot;">​</a></h2><p>The benchmark results show:</p><ul><li>Total execution time</li><li>Number of calls</li><li>Average execution time</li></ul><h2 id="best-practices" tabindex="-1">Best Practices <a class="header-anchor" href="#best-practices" aria-label="Permalink to &quot;Best Practices&quot;">​</a></h2><ol><li><p><strong>Targeted Benchmarking</strong></p><ul><li>Benchmark specific methods you suspect are slow</li><li>Test with realistic data amounts</li><li>Compare different implementation approaches</li></ul></li><li><p><strong>When to Benchmark</strong></p><ul><li>During development for optimization</li><li>When experiencing performance issues</li><li>After making significant changes</li></ul></li><li><p><strong>Common Areas to Watch</strong></p><ul><li>Complex render logic</li><li>Heavy event handlers</li><li>Containers with many children</li><li>Programs and dynamic content</li></ul></li></ol>`,13)]))}const c=i(h,[["render",t]]);export{g as __pageData,c as default};

1
docs/.vitepress/dist/assets/guides_benchmarks.md.DWPH8xOg.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as n,ag as l}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"Benchmarking in Basalt","description":"","frontmatter":{},"headers":[],"relativePath":"guides/benchmarks.md","filePath":"guides/benchmarks.md","lastUpdated":1740469724000}'),h={name:"guides/benchmarks.md"};function t(e,s,k,p,r,E){return n(),a("div",null,s[0]||(s[0]=[l("",13)]))}const c=i(h,[["render",t]]);export{g as __pageData,c as default};

28
docs/.vitepress/dist/assets/guides_canvas.md.DjxHKY8y.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/guides_canvas.md.DjxHKY8y.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as n,ag as t}from"./chunks/framework.BcrMLAmg.js";const o=JSON.parse('{"title":"Canvas Plugin Guide","description":"","frontmatter":{},"headers":[],"relativePath":"guides/canvas.md","filePath":"guides/canvas.md","lastUpdated":1745610868000}'),h={name:"guides/canvas.md"};function l(e,s,k,p,d,r){return n(),a("div",null,s[0]||(s[0]=[t("",43)]))}const g=i(h,[["render",l]]);export{o as __pageData,g as default};

1
docs/.vitepress/dist/assets/guides_download.md.BHnOqBnJ.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as e,a as t,b as o,ag as s}from"./chunks/framework.BcrMLAmg.js";const c=JSON.parse('{"title":"Download","description":"","frontmatter":{},"headers":[],"relativePath":"guides/download.md","filePath":"guides/download.md","lastUpdated":1742846025000}'),l={name:"guides/download.md"};function n(i,a,d,r,h,p){return o(),t("div",null,a[0]||(a[0]=[s('<h1 id="download" tabindex="-1">Download <a class="header-anchor" href="#download" aria-label="Permalink to &quot;Download&quot;">​</a></h1><p>Basalt is available in two versions: the dev version, ideal for develpoement and the release version which is meant for production. Basalt is also available on <a href="https://pinestore.cc/projects/15/basalt" target="_blank" rel="noreferrer">PineStore</a></p><h2 id="downloading-basalt" tabindex="-1">Downloading Basalt <a class="header-anchor" href="#downloading-basalt" aria-label="Permalink to &quot;Downloading Basalt&quot;">​</a></h2><p>To download the Basalt Installer-UI using a ComputerCraft shell command, use the following:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>wget run https://raw.githubusercontent.com/Pyroxenium/Basalt2/main/install.lua</span></span></code></pre></div><h2 id="download-basalt-without-ui" tabindex="-1">Download Basalt without UI <a class="header-anchor" href="#download-basalt-without-ui" aria-label="Permalink to &quot;Download Basalt without UI&quot;">​</a></h2><p>If you want to skip the UI and just download the essentials, here are some other commands:</p><h3 id="developer" tabindex="-1">Developer <a class="header-anchor" href="#developer" aria-label="Permalink to &quot;Developer&quot;">​</a></h3><p>This is the full dev version of Basalt, containing all available files.</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>wget run https://raw.githubusercontent.com/Pyroxenium/Basalt2/main/install.lua -d</span></span></code></pre></div><h3 id="release" tabindex="-1">Release <a class="header-anchor" href="#release" aria-label="Permalink to &quot;Release&quot;">​</a></h3><p>This is the default bundle version of Basalt, containing the full framework, but minified.</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>wget run https://raw.githubusercontent.com/Pyroxenium/Basalt2/main/install.lua -r</span></span></code></pre></div>',13)]))}const b=e(l,[["render",n]]);export{c as __pageData,b as default};

1
docs/.vitepress/dist/assets/guides_download.md.BHnOqBnJ.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as e,a as t,b as o,ag as s}from"./chunks/framework.BcrMLAmg.js";const c=JSON.parse('{"title":"Download","description":"","frontmatter":{},"headers":[],"relativePath":"guides/download.md","filePath":"guides/download.md","lastUpdated":1742846025000}'),l={name:"guides/download.md"};function n(i,a,d,r,h,p){return o(),t("div",null,a[0]||(a[0]=[s("",13)]))}const b=e(l,[["render",n]]);export{c as __pageData,b as default};

5
docs/.vitepress/dist/assets/guides_faq.md.BbnMxGO7.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/guides_faq.md.BbnMxGO7.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as a,a as e,b as s,ag as t}from"./chunks/framework.BcrMLAmg.js";const u=JSON.parse('{"title":"Frequently Asked Questions","description":"","frontmatter":{},"headers":[],"relativePath":"guides/faq.md","filePath":"guides/faq.md","lastUpdated":1740313499000}'),l={name:"guides/faq.md"};function n(h,i,o,r,d,p){return s(),e("div",null,i[0]||(i[0]=[t("",35)]))}const c=a(l,[["render",n]]);export{u as __pageData,c as default};

55
docs/.vitepress/dist/assets/guides_getting-started.md.5a6e5422.js vendored
View File

@@ -1,55 +0,0 @@
import{_ as s,o as a,c as n,Q as o}from"./chunks/framework.4313453f.js";const h=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides/getting-started.md","filePath":"guides/getting-started.md","lastUpdated":null}'),l={name:"guides/getting-started.md"},e=o(`<h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to &quot;Getting Started&quot;">​</a></h1><p>Here we will talk about basic stuff, we&#39;ll start with how to install basalt and then we will make a simple UI. We&#39;ll then continue by creating a Button, followed by an Input field, and then a List. Additionally, we&#39;ll cover how to retrieve values from these UI elements.</p><h2 id="how-to-install" tabindex="-1">How to Install <a class="header-anchor" href="#how-to-install" aria-label="Permalink to &quot;How to Install&quot;">​</a></h2><p>To download the UI Framework, use the following command:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">wget run https://basalt.madefor.cc/install.lua</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">wget run https://basalt.madefor.cc/install.lua</span></span></code></pre></div><p>Input the command into your shell, and after execution, you should see a file named <code>basalt.lua</code> in your directory. This file serves as the main entry point to the framework.</p><h2 id="setting-up-basalt" tabindex="-1">Setting up Basalt <a class="header-anchor" href="#setting-up-basalt" aria-label="Permalink to &quot;Setting up Basalt&quot;">​</a></h2><p>The next step is to include and initialize the Basalt framework in your project.</p><p>Here&#39;s the code to load basalt into your project.</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> basalt </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;basalt&quot;</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> basalt </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;basalt&quot;</span><span style="color:#24292E;">)</span></span></code></pre></div><p>Merely loading Basalt is insufficient. It&#39;s essential to initiate the event and draw handlers. To facilitate this, Basalt offers the <code>basalt.autoUpdate()</code> function.</p><p>Here is a example:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> basalt </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;basalt&quot;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- your UI code is here</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">basalt.</span><span style="color:#79B8FF;">autoUpdate</span><span style="color:#E1E4E8;">()</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> basalt </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;basalt&quot;</span><span style="color:#24292E;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- your UI code is here</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">basalt.</span><span style="color:#005CC5;">autoUpdate</span><span style="color:#24292E;">()</span></span></code></pre></div><h2 id="creating-a-simple-ui-with-basalt" tabindex="-1">Creating a Simple UI with Basalt <a class="header-anchor" href="#creating-a-simple-ui-with-basalt" aria-label="Permalink to &quot;Creating a Simple UI with Basalt&quot;">​</a></h2><p>Now that you have Basalt installed, let&#39;s dive into creating a basic user interface (UI).</p><h3 id="creating-a-button" tabindex="-1">Creating a Button <a class="header-anchor" href="#creating-a-button" aria-label="Permalink to &quot;Creating a Button&quot;">​</a></h3><p>To create a Button in Basalt, you can use the <code>:addButton()</code> function. The :addButton() function only works on frames:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> basalt </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;basalt&quot;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> main </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">getMainFrame</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> button </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addButton</span><span style="color:#E1E4E8;">()</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> basalt </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;basalt&quot;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> main </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">getMainFrame</span><span style="color:#24292E;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> button </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addButton</span><span style="color:#24292E;">()</span></span></code></pre></div><p>This code snippet creates a Button and adds it to the main frame of your UI. You can customize the appearance and behavior of the button as needed.</p><p>Here are some common customizations you can apply:</p><ul><li><strong>Position:</strong> You can set the position of the button using the <code>:setPosition()</code> function.</li><li><strong>Size:</strong> Adjust the size of the button using the <code>:setSize()</code> function.</li><li><strong>Background:</strong> Change the background color or image of the button with the <code>:setBackground()</code> function.</li><li><strong>Foreground (Text):</strong> Modify the text color of the button using the <code>:setForeground()</code> function.</li></ul><p>Here&#39;s an example of how you can apply these customizations:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> basalt </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;basalt&quot;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> main </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">getMainFrame</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> button </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addButton</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#B392F0;">button</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setPosition</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set position to (5, 3)</span></span>
<span class="line"><span style="color:#B392F0;">button</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setSize</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">20</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set size to width: 20, height: 3</span></span>
<span class="line"><span style="color:#B392F0;">button</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setBackground</span><span style="color:#E1E4E8;">(colors.</span><span style="color:#B392F0;">blue</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set background color to blue</span></span>
<span class="line"><span style="color:#B392F0;">button</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setForeground</span><span style="color:#E1E4E8;">(colors.</span><span style="color:#B392F0;">white</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set text color to white</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> basalt </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;basalt&quot;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> main </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">getMainFrame</span><span style="color:#24292E;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> button </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addButton</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#6F42C1;">button</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setPosition</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">5</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set position to (5, 3)</span></span>
<span class="line"><span style="color:#6F42C1;">button</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setSize</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">20</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set size to width: 20, height: 3</span></span>
<span class="line"><span style="color:#6F42C1;">button</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setBackground</span><span style="color:#24292E;">(colors.</span><span style="color:#6F42C1;">blue</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set background color to blue</span></span>
<span class="line"><span style="color:#6F42C1;">button</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setForeground</span><span style="color:#24292E;">(colors.</span><span style="color:#6F42C1;">white</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set text color to white</span></span></code></pre></div><p>With these functions, you can tailor the appearance and behavior of the button to suit your application&#39;s design requirements.</p><hr><h3 id="creating-an-input-field" tabindex="-1">Creating an Input Field <a class="header-anchor" href="#creating-an-input-field" aria-label="Permalink to &quot;Creating an Input Field&quot;">​</a></h3><p>To create an Input field in Basalt, you can use the <code>:addInput()</code> function:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> input </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addInput</span><span style="color:#E1E4E8;">()</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> input </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addInput</span><span style="color:#24292E;">()</span></span></code></pre></div><p>Once you have created the Input field, you can customize its appearance and behavior to fit your UI design.</p><p>Here are some common customizations you can apply to the Input field:</p><ul><li><strong>Position:</strong> You can set the position of the button using the <code>:setPosition()</code> function.</li><li><strong>Size:</strong> Adjust the size of the button using the <code>:setSize()</code> function.</li><li><strong>Background:</strong> Change the background color or image of the button with the <code>:setBackground()</code> function.</li><li><strong>Foreground (Text):</strong> Modify the text color of the button using the <code>:setForeground()</code> function.</li><li><strong>PlaceholderText (Text):</strong> Modify the text color of the button using the <code>:setPlaceholderText()</code> function.</li></ul><p>Here&#39;s an example of how you can create and customize an Input field:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> input </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addInput</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setPosition</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set position to (3, 3)</span></span>
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setSize</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">12</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set size to width: 12, height: 1</span></span>
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setBackground</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;black&quot;</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set background color to light gray</span></span>
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setForeground</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;lightgray&quot;</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set text color to light gray</span></span>
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setPlaceholder</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;Enter text here...&quot;</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set placeholder text</span></span>
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setValue</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;Initial value&quot;</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set initial value</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> input </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addInput</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setPosition</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set position to (3, 3)</span></span>
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setSize</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">12</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set size to width: 12, height: 1</span></span>
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setBackground</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;black&quot;</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set background color to light gray</span></span>
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setForeground</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;lightgray&quot;</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set text color to light gray</span></span>
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setPlaceholder</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;Enter text here...&quot;</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set placeholder text</span></span>
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setValue</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;Initial value&quot;</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set initial value</span></span></code></pre></div><h4 id="retrieving-values-from-input-fields" tabindex="-1">Retrieving Values from Input Fields <a class="header-anchor" href="#retrieving-values-from-input-fields" aria-label="Permalink to &quot;Retrieving Values from Input Fields&quot;">​</a></h4><p>Once you&#39;ve created an Input field, you may want to retrieve the value entered by the user. Basalt provides an <code>:onChange(func)</code> event handler for this purpose.</p><p>Here&#39;s how you can use the <code>:onChange(func)</code> event handler to retrieve the value from an Input field:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">onChange</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;">(self, value)</span></span>
<span class="line"><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">debug</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;Input value changed to: &quot; </span><span style="color:#F97583;">..</span><span style="color:#E1E4E8;"> value)</span></span>
<span class="line"><span style="color:#F97583;">end</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">onChange</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">function</span><span style="color:#24292E;">(self, value)</span></span>
<span class="line"><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">debug</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;Input value changed to: &quot; </span><span style="color:#D73A49;">..</span><span style="color:#24292E;"> value)</span></span>
<span class="line"><span style="color:#D73A49;">end</span><span style="color:#24292E;">)</span></span></code></pre></div><p>In this example, whenever the value in the Input field changes, the provided function is called with the updated value as its argument. You can then perform any necessary actions with the value, such as updating other UI elements or processing data.</p><p>Additionally, if you need to retrieve the current value of the Input field programmatically at any point, you can use the <code>:getValue()</code> method:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> inputValue </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">getValue</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#E1E4E8;">basalt.</span><span style="color:#79B8FF;">debug</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;Current value of Input field: &quot; </span><span style="color:#F97583;">..</span><span style="color:#E1E4E8;"> inputValue)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> inputValue </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">getValue</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#24292E;">basalt.</span><span style="color:#005CC5;">debug</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;Current value of Input field: &quot; </span><span style="color:#D73A49;">..</span><span style="color:#24292E;"> inputValue)</span></span></code></pre></div><p>This method returns the current value of the Input field, allowing you to access it within your Lua code.</p><p>Combining the <code>:onChange(func)</code> event handler with the <code>:getValue()</code> method gives you full control over retrieving and managing the values entered by the user in Input fields.</p><hr><h3 id="creating-a-list" tabindex="-1">Creating a List <a class="header-anchor" href="#creating-a-list" aria-label="Permalink to &quot;Creating a List&quot;">​</a></h3><p>To create a List in Basalt, you can use the <code>:addList()</code> method:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> list </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addList</span><span style="color:#E1E4E8;">()</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> list </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addList</span><span style="color:#24292E;">()</span></span></code></pre></div><p>Once you&#39;ve created the List, you can populate it with items dynamically or statically to suit your application&#39;s requirements.</p><p>Here&#39;s an example of how you can add items to the List:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">list</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addItem</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;Item 1&quot;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">list</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addItem</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;Item 2&quot;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">list</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addItem</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;Item 3&quot;</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">list</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addItem</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;Item 1&quot;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">list</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addItem</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;Item 2&quot;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">list</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addItem</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;Item 3&quot;</span><span style="color:#24292E;">)</span></span></code></pre></div><p>This code snippet adds three items to the List with the labels &quot;Item 1&quot;, &quot;Item 2&quot;, and &quot;Item 3&quot;. You can customize the appearance and behavior of the List items as needed.</p><h4 id="handling-list-selection-changes" tabindex="-1">Handling List Selection Changes <a class="header-anchor" href="#handling-list-selection-changes" aria-label="Permalink to &quot;Handling List Selection Changes&quot;">​</a></h4><p>Basalt provides an <code>:onChange(func)</code> event handler for List elements to handle selection changes. This event is triggered whenever the user selects a different item in the List.</p><p>Here&#39;s how you can use the <code>:onChange(func)</code> event handler to respond to List selection changes:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">list</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">onChange</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;">(self, selectedItem)</span></span>
<span class="line"><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">debug</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&quot;Selected item changed to: &quot; </span><span style="color:#F97583;">..</span><span style="color:#E1E4E8;"> selectedItem)</span></span>
<span class="line"><span style="color:#F97583;">end</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">list</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">onChange</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">function</span><span style="color:#24292E;">(self, selectedItem)</span></span>
<span class="line"><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">debug</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&quot;Selected item changed to: &quot; </span><span style="color:#D73A49;">..</span><span style="color:#24292E;"> selectedItem)</span></span>
<span class="line"><span style="color:#D73A49;">end</span><span style="color:#24292E;">)</span></span></code></pre></div><p>In this example, whenever the user selects a different item in the List, the provided function is called with the label of the newly selected item as its argument.</p>`,55),t=[e];function p(c,r,i,y,u,d){return a(),n("div",null,t)}const g=s(l,[["render",p]]);export{h as __pageData,g as default};

1
docs/.vitepress/dist/assets/guides_getting-started.md.5a6e5422.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as s,o as a,c as n,Q as o}from"./chunks/framework.4313453f.js";const h=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides/getting-started.md","filePath":"guides/getting-started.md","lastUpdated":null}'),l={name:"guides/getting-started.md"},e=o("",55),t=[e];function p(c,r,i,y,u,d){return a(),n("div",null,t)}const g=s(l,[["render",p]]);export{h as __pageData,g as default};

28
docs/.vitepress/dist/assets/guides_getting-started.md.DvN8P1BE.js vendored
View File

@@ -1,28 +0,0 @@
import{_ as s,c as i,o as a,a4 as t}from"./chunks/framework.nQaBHiNx.js";const u=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides/getting-started.md","filePath":"guides/getting-started.md","lastUpdated":null}'),e={name:"guides/getting-started.md"},n=t(`<h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to &quot;Getting Started&quot;">​</a></h1><p>Here we will talk about basic stuff, we&#39;ll start with how to install basalt and then we will make a simple UI. We&#39;ll then continue by creating a Button, followed by an Input field, and then a List. Additionally, we&#39;ll cover how to retrieve values from these UI elements.</p><h2 id="how-to-install" tabindex="-1">How to Install <a class="header-anchor" href="#how-to-install" aria-label="Permalink to &quot;How to Install&quot;">​</a></h2><p>To download the UI Framework, use the following command:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>wget run https://basalt.madefor.cc/install.lua</span></span></code></pre></div><p>Input the command into your shell, and after execution, you should see a file named <code>basalt.lua</code> in your directory. This file serves as the main entry point to the framework.</p><h2 id="setting-up-basalt" tabindex="-1">Setting up Basalt <a class="header-anchor" href="#setting-up-basalt" aria-label="Permalink to &quot;Setting up Basalt&quot;">​</a></h2><p>The next step is to include and initialize the Basalt framework in your project.</p><p>Here&#39;s the code to load basalt into your project.</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;basalt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>Merely loading Basalt is insufficient. It&#39;s essential to initiate the event and draw handlers. To facilitate this, Basalt offers the <code>basalt.autoUpdate()</code> function.</p><p>Here is a example:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;basalt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- your UI code is here</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">autoUpdate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h2 id="creating-a-simple-ui-with-basalt" tabindex="-1">Creating a Simple UI with Basalt <a class="header-anchor" href="#creating-a-simple-ui-with-basalt" aria-label="Permalink to &quot;Creating a Simple UI with Basalt&quot;">​</a></h2><p>Now that you have Basalt installed, let&#39;s dive into creating a basic user interface (UI).</p><h3 id="creating-a-button" tabindex="-1">Creating a Button <a class="header-anchor" href="#creating-a-button" aria-label="Permalink to &quot;Creating a Button&quot;">​</a></h3><p>To create a Button in Basalt, you can use the <code>:addButton()</code> function. The :addButton() function only works on frames:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;basalt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><p>This code snippet creates a Button and adds it to the main frame of your UI. You can customize the appearance and behavior of the button as needed.</p><p>Here are some common customizations you can apply:</p><ul><li><strong>Position:</strong> You can set the position of the button using the <code>:setPosition()</code> function.</li><li><strong>Size:</strong> Adjust the size of the button using the <code>:setSize()</code> function.</li><li><strong>Background:</strong> Change the background color or image of the button with the <code>:setBackground()</code> function.</li><li><strong>Foreground (Text):</strong> Modify the text color of the button using the <code>:setForeground()</code> function.</li></ul><p>Here&#39;s an example of how you can apply these customizations:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;basalt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set position to (5, 3)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set size to width: 20, height: 3</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(colors.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">blue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set background color to blue</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(colors.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set text color to white</span></span></code></pre></div><p>With these functions, you can tailor the appearance and behavior of the button to suit your application&#39;s design requirements.</p><hr><h3 id="creating-an-input-field" tabindex="-1">Creating an Input Field <a class="header-anchor" href="#creating-an-input-field" aria-label="Permalink to &quot;Creating an Input Field&quot;">​</a></h3><p>To create an Input field in Basalt, you can use the <code>:addInput()</code> function:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addInput</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><p>Once you have created the Input field, you can customize its appearance and behavior to fit your UI design.</p><p>Here are some common customizations you can apply to the Input field:</p><ul><li><strong>Position:</strong> You can set the position of the button using the <code>:setPosition()</code> function.</li><li><strong>Size:</strong> Adjust the size of the button using the <code>:setSize()</code> function.</li><li><strong>Background:</strong> Change the background color or image of the button with the <code>:setBackground()</code> function.</li><li><strong>Foreground (Text):</strong> Modify the text color of the button using the <code>:setForeground()</code> function.</li><li><strong>PlaceholderText (Text):</strong> Modify the text color of the button using the <code>:setPlaceholderText()</code> function.</li></ul><p>Here&#39;s an example of how you can create and customize an Input field:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addInput</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set position to (3, 3)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set size to width: 12, height: 1</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;black&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set background color to light gray</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lightgray&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set text color to light gray</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPlaceholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Enter text here...&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set placeholder text</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Initial value&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set initial value</span></span></code></pre></div><h4 id="retrieving-values-from-input-fields" tabindex="-1">Retrieving Values from Input Fields <a class="header-anchor" href="#retrieving-values-from-input-fields" aria-label="Permalink to &quot;Retrieving Values from Input Fields&quot;">​</a></h4><p>Once you&#39;ve created an Input field, you may want to retrieve the value entered by the user. Basalt provides an <code>:onChange(func)</code> event handler for this purpose.</p><p>Here&#39;s how you can use the <code>:onChange(func)</code> event handler to retrieve the value from an Input field:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onChange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, value)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input value changed to: &quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>In this example, whenever the value in the Input field changes, the provided function is called with the updated value as its argument. You can then perform any necessary actions with the value, such as updating other UI elements or processing data.</p><p>Additionally, if you need to retrieve the current value of the Input field programmatically at any point, you can use the <code>:getValue()</code> method:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> inputValue </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Current value of Input field: &quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> inputValue)</span></span></code></pre></div><p>This method returns the current value of the Input field, allowing you to access it within your Lua code.</p><p>Combining the <code>:onChange(func)</code> event handler with the <code>:getValue()</code> method gives you full control over retrieving and managing the values entered by the user in Input fields.</p><hr><h3 id="creating-a-list" tabindex="-1">Creating a List <a class="header-anchor" href="#creating-a-list" aria-label="Permalink to &quot;Creating a List&quot;">​</a></h3><p>To create a List in Basalt, you can use the <code>:addList()</code> method:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> list </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><p>Once you&#39;ve created the List, you can populate it with items dynamically or statically to suit your application&#39;s requirements.</p><p>Here&#39;s an example of how you can add items to the List:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Item 1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Item 2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Item 3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>This code snippet adds three items to the List with the labels &quot;Item 1&quot;, &quot;Item 2&quot;, and &quot;Item 3&quot;. You can customize the appearance and behavior of the List items as needed.</p><h4 id="handling-list-selection-changes" tabindex="-1">Handling List Selection Changes <a class="header-anchor" href="#handling-list-selection-changes" aria-label="Permalink to &quot;Handling List Selection Changes&quot;">​</a></h4><p>Basalt provides an <code>:onChange(func)</code> event handler for List elements to handle selection changes. This event is triggered whenever the user selects a different item in the List.</p><p>Here&#39;s how you can use the <code>:onChange(func)</code> event handler to respond to List selection changes:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onChange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, selectedItem)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Selected item changed to: &quot; </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> selectedItem)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>In this example, whenever the user selects a different item in the List, the provided function is called with the label of the newly selected item as its argument.</p>`,55),h=[n];function l(p,k,o,d,r,g){return a(),i("div",null,h)}const c=s(e,[["render",l]]);export{u as __pageData,c as default};

1
docs/.vitepress/dist/assets/guides_getting-started.md.DvN8P1BE.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as s,c as i,o as a,a4 as t}from"./chunks/framework.nQaBHiNx.js";const u=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides/getting-started.md","filePath":"guides/getting-started.md","lastUpdated":null}'),e={name:"guides/getting-started.md"},n=t("",55),h=[n];function l(p,k,o,d,r,g){return a(),i("div",null,h)}const c=s(e,[["render",l]]);export{u as __pageData,c as default};

59
docs/.vitepress/dist/assets/guides_getting-started.md.OFYtfl43.js vendored Normal file
View File

@@ -0,0 +1,59 @@
import{_ as i,a,b as n,ag as t}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"Getting Started with Basalt","description":"","frontmatter":{},"headers":[],"relativePath":"guides/getting-started.md","filePath":"guides/getting-started.md","lastUpdated":1745217049000}'),h={name:"guides/getting-started.md"};function l(e,s,k,p,E,r){return n(),a("div",null,s[0]||(s[0]=[t(`<h1 id="getting-started-with-basalt" tabindex="-1">Getting Started with Basalt <a class="header-anchor" href="#getting-started-with-basalt" aria-label="Permalink to &quot;Getting Started with Basalt&quot;">​</a></h1><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to &quot;Installation&quot;">​</a></h2><p>Checkout <a href="./download.html">download</a> to learn how to get basalt on your CC:Tweaked computer.</p><h2 id="creating-your-first-ui" tabindex="-1">Creating Your First UI <a class="header-anchor" href="#creating-your-first-ui" aria-label="Permalink to &quot;Creating Your First UI&quot;">​</a></h2><p>Here&#39;s a simple example that creates a window with a button:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;basalt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Get the main frame (your window)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Add a button</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Click me!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- Do something when clicked</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Start Basalt</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">run</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h2 id="adding-more-elements" tabindex="-1">Adding More Elements <a class="header-anchor" href="#adding-more-elements" aria-label="Permalink to &quot;Adding More Elements&quot;">​</a></h2><p>You can add various UI elements to your frame:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Add a label (text)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello World&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Add an input field</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addInput</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Add a list</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Item 1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Item 2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="basic-properties" tabindex="-1">Basic Properties <a class="header-anchor" href="#basic-properties" aria-label="Permalink to &quot;Basic Properties&quot;">​</a></h2><p>Most elements support these common properties:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x, y) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set position</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(width, height) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set size</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(color) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set background color</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(color) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set text color</span></span></code></pre></div><h2 id="basic-events" tabindex="-1">Basic Events <a class="header-anchor" href="#basic-events" aria-label="Permalink to &quot;Basic Events&quot;">​</a></h2><p>Elements can respond to user interaction:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- Called when clicked</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onEnter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- Called when mouse enters the element (only available on CraftOS-PC)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onChange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, value)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- Called when value changes (inputs, lists, etc)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="using-monitors-instead" tabindex="-1">Using monitors instead <a class="header-anchor" href="#using-monitors-instead" aria-label="Permalink to &quot;Using monitors instead&quot;">​</a></h2><p>Basalt can render to monitors instead of the terminal. Here&#39;s how to use monitors:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;basalt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Get a reference to the monitor</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> monitor </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> peripheral.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;monitor&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Or specific side: peripheral.wrap(&quot;right&quot;)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Create frame for monitor</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> monitorFrame </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">createFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">():</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setTerm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(monitor) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- :setTerm is the important method here</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Add elements like normal</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">monitorFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Monitor Button&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Start Basalt</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">run</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to &quot;Next Steps&quot;">​</a></h2><ul><li>Check out the <a href="https://github.com/Pyroxenium/Basalt2/tree/main/examples" target="_blank" rel="noreferrer">Examples</a> for more complex UIs</li><li>Learn about <a href="./animations.html">Animations</a> for smooth transitions</li><li>Explore <a href="./states.html">States</a> for data management</li><li>Read the <a href="/references/main.html">API Reference</a> for detailed documentation</li></ul>`,20)]))}const o=i(h,[["render",l]]);export{g as __pageData,o as default};

1
docs/.vitepress/dist/assets/guides_getting-started.md.OFYtfl43.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as n,ag as t}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"Getting Started with Basalt","description":"","frontmatter":{},"headers":[],"relativePath":"guides/getting-started.md","filePath":"guides/getting-started.md","lastUpdated":1745217049000}'),h={name:"guides/getting-started.md"};function l(e,s,k,p,E,r){return n(),a("div",null,s[0]||(s[0]=[t("",20)]))}const o=i(h,[["render",l]]);export{g as __pageData,o as default};

1
docs/.vitepress/dist/assets/guides_home.md.33eaa7e0.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,o as a,c as t,Q as s}from"./chunks/framework.4313453f.js";const f=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"guides/home.md","filePath":"guides/home.md","lastUpdated":null}'),o={name:"guides/home.md"},i=s('<h1 id="welcome-to-the-basalt-wiki" tabindex="-1">Welcome to The Basalt Wiki <a class="header-anchor" href="#welcome-to-the-basalt-wiki" aria-label="Permalink to &quot;Welcome to The Basalt Wiki&quot;">​</a></h1><p><em>Note: The Basalt Wiki is a work in progress. Please treat wiki errors the same as bugs and report them accordingly.</em></p><p>Basalt is a user-friendly UI framework for CC:Tweaked (also known as &quot;ComputerCraft: Tweaked&quot;) - a popular Minecraft mod. It was developed to enhance user interaction through visual displays. In this wiki, you&#39;ll find information on how to use Basalt as well as examples of functional Basalt code.</p><p>This Website is made with the help of ChatGPT.</p><h2 id="about-basalt" tabindex="-1">About Basalt <a class="header-anchor" href="#about-basalt" aria-label="Permalink to &quot;About Basalt&quot;">​</a></h2><p>Basalt is an easy-to-understand UI framework designed to improve user interaction with CC:Tweaked. Some of its key features include:</p><ul><li>A set of pre-built UI components for creating interfaces quickly and easily.</li><li>A flexible layout system that allows users to create custom designs.</li><li>A powerful event handling system for managing user input and interaction.</li><li>Support for multiple screen resolutions and aspect ratios.</li><li>Extensive documentation and examples to help users get started quickly.</li></ul><h2 id="quick-demo" tabindex="-1">Quick Demo <a class="header-anchor" href="#quick-demo" aria-label="Permalink to &quot;Quick Demo&quot;">​</a></h2><p><img src="https://raw.githubusercontent.com/Pyroxenium/Basalt/master/docs/_media/basaltPreview2.gif" alt="Basalt Demo GIF"></p><h2 id="questions-bugs" tabindex="-1">Questions &amp; Bugs <a class="header-anchor" href="#questions-bugs" aria-label="Permalink to &quot;Questions &amp; Bugs&quot;">​</a></h2><p>Bugs can be reported here: <a href="https://github.com/Pyroxenium/Basalt/issues" target="_blank" rel="noreferrer">Github</a> or in our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">discord</a>.</p><p>If you have questions about Basalt or how to make use of it, feel free to create a new discussion on <a href="https://github.com/Pyroxenium/Basalt/discussions" target="_blank" rel="noreferrer">Basalt&#39;s Discussion Board (Github)</a>, or ask in our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">discord</a>.</p>',12),r=[i];function l(n,u,d,c,h,m){return a(),t("div",null,r)}const b=e(o,[["render",l]]);export{f as __pageData,b as default};

1
docs/.vitepress/dist/assets/guides_home.md.33eaa7e0.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,o as a,c as t,Q as s}from"./chunks/framework.4313453f.js";const f=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"guides/home.md","filePath":"guides/home.md","lastUpdated":null}'),o={name:"guides/home.md"},i=s("",12),r=[i];function l(n,u,d,c,h,m){return a(),t("div",null,r)}const b=e(o,[["render",l]]);export{f as __pageData,b as default};

1
docs/.vitepress/dist/assets/guides_home.md.DC7WJlgs.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,c as a,o as t,a4 as s}from"./chunks/framework.nQaBHiNx.js";const f=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"guides/home.md","filePath":"guides/home.md","lastUpdated":null}'),o={name:"guides/home.md"},i=s('<h1 id="welcome-to-the-basalt-wiki" tabindex="-1">Welcome to The Basalt Wiki <a class="header-anchor" href="#welcome-to-the-basalt-wiki" aria-label="Permalink to &quot;Welcome to The Basalt Wiki&quot;">​</a></h1><p><em>Note: The Basalt Wiki is a work in progress. Please treat wiki errors the same as bugs and report them accordingly.</em></p><p>Basalt is a user-friendly UI framework for CC:Tweaked (also known as &quot;ComputerCraft: Tweaked&quot;) - a popular Minecraft mod. It was developed to enhance user interaction through visual displays. In this wiki, you&#39;ll find information on how to use Basalt as well as examples of functional Basalt code.</p><p>This Website is made with the help of ChatGPT.</p><h2 id="about-basalt" tabindex="-1">About Basalt <a class="header-anchor" href="#about-basalt" aria-label="Permalink to &quot;About Basalt&quot;">​</a></h2><p>Basalt is an easy-to-understand UI framework designed to improve user interaction with CC:Tweaked. Some of its key features include:</p><ul><li>A set of pre-built UI components for creating interfaces quickly and easily.</li><li>A flexible layout system that allows users to create custom designs.</li><li>A powerful event handling system for managing user input and interaction.</li><li>Support for multiple screen resolutions and aspect ratios.</li><li>Extensive documentation and examples to help users get started quickly.</li></ul><h2 id="quick-demo" tabindex="-1">Quick Demo <a class="header-anchor" href="#quick-demo" aria-label="Permalink to &quot;Quick Demo&quot;">​</a></h2><p><img src="https://raw.githubusercontent.com/Pyroxenium/Basalt/master/docs/_media/basaltPreview2.gif" alt="Basalt Demo GIF"></p><h2 id="questions-bugs" tabindex="-1">Questions &amp; Bugs <a class="header-anchor" href="#questions-bugs" aria-label="Permalink to &quot;Questions &amp; Bugs&quot;">​</a></h2><p>Bugs can be reported here: <a href="https://github.com/Pyroxenium/Basalt/issues" target="_blank" rel="noreferrer">Github</a> or in our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">discord</a>.</p><p>If you have questions about Basalt or how to make use of it, feel free to create a new discussion on <a href="https://github.com/Pyroxenium/Basalt/discussions" target="_blank" rel="noreferrer">Basalt&#39;s Discussion Board (Github)</a>, or ask in our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">discord</a>.</p>',12),r=[i];function l(n,u,d,c,h,m){return t(),a("div",null,r)}const b=e(o,[["render",l]]);export{f as __pageData,b as default};

1
docs/.vitepress/dist/assets/guides_home.md.DC7WJlgs.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,c as a,o as t,a4 as s}from"./chunks/framework.nQaBHiNx.js";const f=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"guides/home.md","filePath":"guides/home.md","lastUpdated":null}'),o={name:"guides/home.md"},i=s("",12),r=[i];function l(n,u,d,c,h,m){return t(),a("div",null,r)}const b=e(o,[["render",l]]);export{f as __pageData,b as default};

1
docs/.vitepress/dist/assets/guides_properties.md.48d1d4f8.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,o as r,c as s,k as e,a}from"./chunks/framework.4313453f.js";const y=JSON.parse('{"title":"Propertysystem","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides/properties.md","filePath":"guides/properties.md","lastUpdated":null}'),o={name:"guides/properties.md"},p=e("h1",{id:"propertysystem",tabindex:"-1"},[a("Propertysystem "),e("a",{class:"header-anchor",href:"#propertysystem","aria-label":'Permalink to "Propertysystem"'},"​")],-1),i=[p];function d(n,c,l,m,_,h){return r(),s("div",null,i)}const f=t(o,[["render",d]]);export{y as __pageData,f as default};

1
docs/.vitepress/dist/assets/guides_properties.md.48d1d4f8.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,o as r,c as s,k as e,a}from"./chunks/framework.4313453f.js";const y=JSON.parse('{"title":"Propertysystem","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides/properties.md","filePath":"guides/properties.md","lastUpdated":null}'),o={name:"guides/properties.md"},p=e("h1",{id:"propertysystem",tabindex:"-1"},[a("Propertysystem "),e("a",{class:"header-anchor",href:"#propertysystem","aria-label":'Permalink to "Propertysystem"'},"​")],-1),i=[p];function d(n,c,l,m,_,h){return r(),s("div",null,i)}const f=t(o,[["render",d]]);export{y as __pageData,f as default};

1
docs/.vitepress/dist/assets/guides_properties.md.CHSlSACG.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,c as r,o as s,m as e,a}from"./chunks/framework.nQaBHiNx.js";const y=JSON.parse('{"title":"Propertysystem","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides/properties.md","filePath":"guides/properties.md","lastUpdated":null}'),o={name:"guides/properties.md"},p=e("h1",{id:"propertysystem",tabindex:"-1"},[a("Propertysystem "),e("a",{class:"header-anchor",href:"#propertysystem","aria-label":'Permalink to "Propertysystem"'},"​")],-1),i=[p];function d(n,c,l,m,_,h){return s(),r("div",null,i)}const f=t(o,[["render",d]]);export{y as __pageData,f as default};

1
docs/.vitepress/dist/assets/guides_properties.md.CHSlSACG.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as t,c as r,o as s,m as e,a}from"./chunks/framework.nQaBHiNx.js";const y=JSON.parse('{"title":"Propertysystem","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides/properties.md","filePath":"guides/properties.md","lastUpdated":null}'),o={name:"guides/properties.md"},p=e("h1",{id:"propertysystem",tabindex:"-1"},[a("Propertysystem "),e("a",{class:"header-anchor",href:"#propertysystem","aria-label":'Permalink to "Propertysystem"'},"​")],-1),i=[p];function d(n,c,l,m,_,h){return s(),r("div",null,i)}const f=t(o,[["render",d]]);export{y as __pageData,f as default};

31
docs/.vitepress/dist/assets/guides_properties.md.Ch51Ay8n.js vendored Normal file
View File

@@ -0,0 +1,31 @@
import{_ as i,a,b as e,ag as t}from"./chunks/framework.BcrMLAmg.js";const E=JSON.parse('{"title":"Properties in Basalt","description":"","frontmatter":{},"headers":[],"relativePath":"guides/properties.md","filePath":"guides/properties.md","lastUpdated":1740475938000}'),n={name:"guides/properties.md"};function l(h,s,p,k,r,d){return e(),a("div",null,s[0]||(s[0]=[t(`<h1 id="properties-in-basalt" tabindex="-1">Properties in Basalt <a class="header-anchor" href="#properties-in-basalt" aria-label="Permalink to &quot;Properties in Basalt&quot;">​</a></h1><p>Properties are a core concept in Basalt that control how elements store and access their values.</p><h2 id="property-initialization" tabindex="-1">Property Initialization <a class="header-anchor" href="#property-initialization" aria-label="Permalink to &quot;Property Initialization&quot;">​</a></h2><p>You can set properties when creating elements:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Initialize multiple properties at creation</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> y </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;Click me&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Equivalent to:</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setX</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setY</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Click me&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="accessing-properties" tabindex="-1">Accessing Properties <a class="header-anchor" href="#accessing-properties" aria-label="Permalink to &quot;Accessing Properties&quot;">​</a></h2><p>There are three ways to interact with properties, each with different characteristics:</p><h3 id="_1-method-syntax-traditional" tabindex="-1">1. Method Syntax (Traditional) <a class="header-anchor" href="#_1-method-syntax-traditional" aria-label="Permalink to &quot;1. Method Syntax (Traditional)&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setX</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Most validation, observers called</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getX</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><ul><li>Full validation</li><li>Type checking</li><li>Observers called</li><li>Most overhead</li></ul><h3 id="_2-direct-access-convenient" tabindex="-1">2. Direct Access (Convenient) <a class="header-anchor" href="#_2-direct-access-convenient" aria-label="Permalink to &quot;2. Direct Access (Convenient)&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">element.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- Convenient, observers called</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> element.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">x</span></span></code></pre></div><ul><li>Medium validation</li><li>Observers called</li><li>Good balance of safety and performance</li></ul><h3 id="_3-set-get-function-performance" tabindex="-1">3. Set/Get Function (Performance) <a class="header-anchor" href="#_3-set-get-function-performance" aria-label="Permalink to &quot;3. Set/Get Function (Performance)&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">element.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Minimal validation, observers called</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> element.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><ul><li>Minimal validation</li><li>Only calls observers</li><li>Best performance</li><li>Use with caution</li></ul><h2 id="combined-properties" tabindex="-1">Combined Properties <a class="header-anchor" href="#combined-properties" aria-label="Permalink to &quot;Combined Properties&quot;">​</a></h2><p>These are special methods that modify multiple properties at once:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- These modify x and y properties together</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- These modify width and height properties together</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="dynamic-properties" tabindex="-1">Dynamic Properties <a class="header-anchor" href="#dynamic-properties" aria-label="Permalink to &quot;Dynamic Properties&quot;">​</a></h2><p>Any property can be set to a function that gets called on access:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Function as property value</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">element.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> self</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getParent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">():</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Function gets called when accessing x</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> xPos </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> element.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">x</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- Calls the function</span></span></code></pre></div><h2 id="reactive-properties-plugin-required" tabindex="-1">Reactive Properties (Plugin Required) <a class="header-anchor" href="#reactive-properties-plugin-required" aria-label="Permalink to &quot;Reactive Properties (Plugin Required)&quot;">​</a></h2><p>With the reactive plugin, you can use string expressions that automatically update:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Requires reactive plugin</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setX</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{parent.width - 10}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Updates when parent width changes</span></span></code></pre></div><h2 id="property-observers" tabindex="-1">Property Observers <a class="header-anchor" href="#property-observers" aria-label="Permalink to &quot;Property Observers&quot;">​</a></h2><p>You can react to property changes:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onChange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, newX)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- Called when x changes through any method</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="tips-performance" tabindex="-1">Tips &amp; Performance <a class="header-anchor" href="#tips-performance" aria-label="Permalink to &quot;Tips &amp; Performance&quot;">​</a></h2><ol><li><p><strong>Choose the Right Access Method</strong></p><ul><li>Use <code>:setX()</code> when you need validation</li><li>Use <code>.x</code> for convenient access</li><li>Use <code>.set()</code> for maximum performance</li></ul></li><li><p><strong>Dynamic Properties</strong></p><ul><li>Function properties don&#39;t auto-update observers</li><li>Reactive strings (with plugin) do update observers</li><li>Cache computed values when possible</li></ul></li><li><p><strong>Combined Properties</strong></p><ul><li><code>setPosition</code> modifies x and y</li><li><code>setSize</code> modifies width and height</li><li>More efficient than setting individually</li></ul></li></ol>`,30)]))}const c=i(n,[["render",l]]);export{E as __pageData,c as default};

1
docs/.vitepress/dist/assets/guides_properties.md.Ch51Ay8n.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as e,ag as t}from"./chunks/framework.BcrMLAmg.js";const E=JSON.parse('{"title":"Properties in Basalt","description":"","frontmatter":{},"headers":[],"relativePath":"guides/properties.md","filePath":"guides/properties.md","lastUpdated":1740475938000}'),n={name:"guides/properties.md"};function l(h,s,p,k,r,d){return e(),a("div",null,s[0]||(s[0]=[t("",30)]))}const c=i(n,[["render",l]]);export{E as __pageData,c as default};

25
docs/.vitepress/dist/assets/guides_reactive.md.DFOvn3Jj.js vendored Normal file
View File

@@ -0,0 +1,25 @@
import{_ as i,a,b as e,ag as t}from"./chunks/framework.BcrMLAmg.js";const o=JSON.parse('{"title":"Reactive System","description":"","frontmatter":{},"headers":[],"relativePath":"guides/reactive.md","filePath":"guides/reactive.md","lastUpdated":1744373216000}'),n={name:"guides/reactive.md"};function l(h,s,k,p,r,E){return e(),a("div",null,s[0]||(s[0]=[t(`<h1 id="reactive-system" tabindex="-1">Reactive System <a class="header-anchor" href="#reactive-system" aria-label="Permalink to &quot;Reactive System&quot;">​</a></h1><p>The reactive system in Basalt allows you to create dynamic property values using expressions. These expressions automatically update when related values change.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to &quot;Basic Usage&quot;">​</a></h2><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;basalt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Create a simple label and center it horizontally</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello World&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setX</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{parent.width / 2 - self.width / 2}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Centers the label horizontally</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Create a progress bar that takes 80% of parent width</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addProgressbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{parent.width * 0.8}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setX</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{parent.width * 0.1}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- 10% margin on both sides</span></span></code></pre></div><h2 id="available-variables" tabindex="-1">Available Variables <a class="header-anchor" href="#available-variables" aria-label="Permalink to &quot;Available Variables&quot;">​</a></h2><p>In reactive expressions, you have access to:</p><ul><li><code>self</code> - The current element</li><li><code>parent</code> - The parent element</li><li><code>elementName</code> - A given name of a element</li><li>Any property of these elements (width, height, value, text, etc.)</li></ul><h2 id="common-use-cases" tabindex="-1">Common Use Cases <a class="header-anchor" href="#common-use-cases" aria-label="Permalink to &quot;Common Use Cases&quot;">​</a></h2><h3 id="responsive-layout" tabindex="-1">Responsive Layout <a class="header-anchor" href="#responsive-layout" aria-label="Permalink to &quot;Responsive Layout&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> frame </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{parent.width * 0.5}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{parent.height * 0.5}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Takes half of parent size</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{parent.width / 2 - self.width / 2}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Centers the frame</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;{parent.height / 2 - self.height / 2}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="dynamic-sizing" tabindex="-1">Dynamic Sizing <a class="header-anchor" href="#dynamic-sizing" aria-label="Permalink to &quot;Dynamic Sizing&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> frame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dynamic width based on text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{#self.text}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Width equals text length</span></span></code></pre></div><h3 id="linked-properties" tabindex="-1">Linked Properties <a class="header-anchor" href="#linked-properties" aria-label="Permalink to &quot;Linked Properties&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> slider </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> frame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addSlider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mySlider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> progress </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> frame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setProgress</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{mySlider.value}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Progress syncs with slider value</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to &quot;Syntax&quot;">​</a></h2><ul><li>Use curly braces <code>{}</code> to define a reactive expression</li><li>Basic math operators are supported (+, -, *, /, %)</li><li>Access properties using dot notation (element.property)</li><li>Can use basic functions and comparisons</li></ul><h2 id="best-practices" tabindex="-1">Best Practices <a class="header-anchor" href="#best-practices" aria-label="Permalink to &quot;Best Practices&quot;">​</a></h2><ol><li>Keep expressions simple and readable</li><li>Use meaningful variable names in complex calculations</li><li>Test expressions with different parent sizes</li><li>Consider edge cases (minimum/maximum sizes)</li></ol>`,18)]))}const g=i(n,[["render",l]]);export{o as __pageData,g as default};

1
docs/.vitepress/dist/assets/guides_reactive.md.DFOvn3Jj.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as e,ag as t}from"./chunks/framework.BcrMLAmg.js";const o=JSON.parse('{"title":"Reactive System","description":"","frontmatter":{},"headers":[],"relativePath":"guides/reactive.md","filePath":"guides/reactive.md","lastUpdated":1744373216000}'),n={name:"guides/reactive.md"};function l(h,s,k,p,r,E){return e(),a("div",null,s[0]||(s[0]=[t("",18)]))}const g=i(n,[["render",l]]);export{o as __pageData,g as default};

56
docs/.vitepress/dist/assets/guides_states.md.BPpxw-fO.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/guides_states.md.BPpxw-fO.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as t,ag as h}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"State Management in Basalt","description":"","frontmatter":{},"headers":[],"relativePath":"guides/states.md","filePath":"guides/states.md","lastUpdated":1744151621000}'),n={name:"guides/states.md"};function l(k,s,e,p,E,d){return t(),a("div",null,s[0]||(s[0]=[h("",32)]))}const y=i(n,[["render",l]]);export{g as __pageData,y as default};

11
docs/.vitepress/dist/assets/guides_textWrapping.md.CAHnm2Kx.js vendored Normal file
View File

@@ -0,0 +1,11 @@
import{_ as i,a,b as t,ag as e}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"Text Wrapping","description":"","frontmatter":{},"headers":[],"relativePath":"guides/textWrapping.md","filePath":"guides/textWrapping.md","lastUpdated":1745138834000}'),n={name:"guides/textWrapping.md"};function l(h,s,p,k,r,d){return t(),a("div",null,s[0]||(s[0]=[e(`<h1 id="text-wrapping" tabindex="-1">Text Wrapping <a class="header-anchor" href="#text-wrapping" aria-label="Permalink to &quot;Text Wrapping&quot;">​</a></h1><p>Labels in Basalt provide automatic text wrapping functionality. By default, a label adjusts its width to fit the text content. However, you can control this behavior to make the text wrap instead.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to &quot;Basic Usage&quot;">​</a></h2><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">createFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set fixed width</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setAutoSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Disable auto-sizing</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;This is a long text that will automatically wrap to fit the label&#39;s width&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="understanding-auto-size" tabindex="-1">Understanding Auto-Size <a class="header-anchor" href="#understanding-auto-size" aria-label="Permalink to &quot;Understanding Auto-Size&quot;">​</a></h2><ul><li>Default behavior: Label width grows to fit text</li><li>With <code>:setAutoSize(false)</code>: Text wraps to fit label width</li><li>Text wrapping only works when auto-size is disabled</li></ul><h2 id="examples" tabindex="-1">Examples <a class="header-anchor" href="#examples" aria-label="Permalink to &quot;Examples&quot;">​</a></h2><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Default: Label grows with text</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Long text...&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Width adjusts automatically</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Fixed width with wrapping</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setAutoSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Enable text wrapping</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Text wraps to fit 15 characters width&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div>`,8)]))}const o=i(n,[["render",l]]);export{g as __pageData,o as default};

1
docs/.vitepress/dist/assets/guides_textWrapping.md.CAHnm2Kx.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as t,ag as e}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"Text Wrapping","description":"","frontmatter":{},"headers":[],"relativePath":"guides/textWrapping.md","filePath":"guides/textWrapping.md","lastUpdated":1745138834000}'),n={name:"guides/textWrapping.md"};function l(h,s,p,k,r,d){return t(),a("div",null,s[0]||(s[0]=[e("",8)]))}const o=i(n,[["render",l]]);export{g as __pageData,o as default};

76
docs/.vitepress/dist/assets/guides_xml.md.B1D982bR.js vendored Normal file
View File

@@ -0,0 +1,76 @@
import{_ as i,a,b as n,ag as l}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"XML in Basalt","description":"","frontmatter":{},"headers":[],"relativePath":"guides/xml.md","filePath":"guides/xml.md","lastUpdated":1740474136000}'),t={name:"guides/xml.md"};function h(p,s,e,k,E,r){return n(),a("div",null,s[0]||(s[0]=[l(`<h1 id="xml-in-basalt" tabindex="-1">XML in Basalt <a class="header-anchor" href="#xml-in-basalt" aria-label="Permalink to &quot;XML in Basalt&quot;">​</a></h1><p>Basalt provides an XML parser that lets you define your UI layout in a declarative way. This can make your code more readable and maintainable.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to &quot;Basic Usage&quot;">​</a></h2><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Load from file</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> xmlFile </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fs.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">open</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myUI.xml&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;r&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">loadXML</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(xmlFile.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">readAll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">xmlFile.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">close</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Or directly as string</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">loadXML</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[[</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;frame width=&quot;30&quot; height=&quot;10&quot;&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;button text=&quot;Click me!&quot; x=&quot;2&quot; y=&quot;2&quot;/&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;/frame&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">]]</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="working-with-variables" tabindex="-1">Working with Variables <a class="header-anchor" href="#working-with-variables" aria-label="Permalink to &quot;Working with Variables&quot;">​</a></h2><p>The XML parser uses a scope system to access variables and functions. Any variables you want to use in your XML must be passed in the scope:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scope </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;My App&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> buttonWidth </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> self</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Clicked!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">loadXML</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[[</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;frame&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;label text=&quot;\${title}&quot;/&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;button width=&quot;\${buttonWidth}&quot; onClick=&quot;handleClick&quot;/&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;/frame&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">]]</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, scope)</span></span></code></pre></div><h2 id="event-handlers" tabindex="-1">Event Handlers <a class="header-anchor" href="#event-handlers" aria-label="Permalink to &quot;Event Handlers&quot;">​</a></h2><p>There are two ways to define event handlers:</p><h3 id="_1-reference-a-function-in-scope" tabindex="-1">1. Reference a Function in Scope <a class="header-anchor" href="#_1-reference-a-function-in-scope" aria-label="Permalink to &quot;1. Reference a Function in Scope&quot;">​</a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scope </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> btnClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> self</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Clicked!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">loadXML</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">[[</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;button onClick=&quot;btnClick&quot;/&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">]]</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, scope)</span></span></code></pre></div><h3 id="_2-using-cdata-sections" tabindex="-1">2. Using CDATA Sections <a class="header-anchor" href="#_2-using-cdata-sections" aria-label="Permalink to &quot;2. Using CDATA Sections&quot;">​</a></h3><div class="language-xml vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">xml</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;![CDATA[</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> function(self)</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> self:setText(&quot;Clicked!&quot;)</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> end</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ]]&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="property-types" tabindex="-1">Property Types <a class="header-anchor" href="#property-types" aria-label="Permalink to &quot;Property Types&quot;">​</a></h2><p>The XML parser automatically converts values based on the property type:</p><div class="language-xml vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">xml</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;!-- Converted to number --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> visible=&quot;true&quot; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Converted to boolean --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> background=&quot;blue&quot; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Converted to colors.blue --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text=&quot;\${title}&quot; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Evaluated from scope --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h2 id="important-notes" tabindex="-1">Important Notes <a class="header-anchor" href="#important-notes" aria-label="Permalink to &quot;Important Notes&quot;">​</a></h2><ol><li><p><strong>Scope Variables</strong></p><ul><li>All variables must be defined in the scope</li><li>Functions referenced in events must be in scope</li><li>Global variables are not automatically available</li></ul></li><li><p><strong>Event Handlers</strong></p><ul><li>Always use CDATA for inline functions</li><li>Function references must match exactly</li><li>Events are case-sensitive</li></ul></li><li><p><strong>Expressions</strong></p><ul><li>Use <code>\${...}</code> for scope access</li><li>Expressions have access to scope variables</li><li>Complex logic should be in Lua code</li></ul></li></ol><h2 id="example-with-multiple-features" tabindex="-1">Example with Multiple Features <a class="header-anchor" href="#example-with-multiple-features" aria-label="Permalink to &quot;Example with Multiple Features&quot;">​</a></h2><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scope </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> appTitle </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;My App&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleSubmit</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- handle submission</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> xmlFile </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fs.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">open</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;example.xml&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;r&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">loadXML</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(xmlFile.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">readAll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), scope)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">xmlFile.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">close</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><div class="language-xml vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">xml</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">frame</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;\${colors.gray}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;\${appTitle}&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;4&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Submit&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleSubmit&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;6&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &lt;![CDATA[</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> function(self)</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> self:getParent():remove()</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> end</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ]]&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">frame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div>`,21)]))}const o=i(t,[["render",h]]);export{g as __pageData,o as default};

1
docs/.vitepress/dist/assets/guides_xml.md.B1D982bR.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as n,ag as l}from"./chunks/framework.BcrMLAmg.js";const g=JSON.parse('{"title":"XML in Basalt","description":"","frontmatter":{},"headers":[],"relativePath":"guides/xml.md","filePath":"guides/xml.md","lastUpdated":1740474136000}'),t={name:"guides/xml.md"};function h(p,s,e,k,E,r){return n(),a("div",null,s[0]||(s[0]=[l("",21)]))}const o=i(t,[["render",h]]);export{g as __pageData,o as default};

1
docs/.vitepress/dist/assets/home.md.Byvc0x1l.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,c as a,o as t,a4 as o}from"./chunks/framework.nQaBHiNx.js";const f=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"home.md","filePath":"home.md","lastUpdated":null}'),s={name:"home.md"},r=o('<h1 id="welcome-to-the-basalt-wiki" tabindex="-1">Welcome to The Basalt Wiki <a class="header-anchor" href="#welcome-to-the-basalt-wiki" aria-label="Permalink to &quot;Welcome to The Basalt Wiki&quot;">​</a></h1><p><em>Note: The Basalt Wiki is a work in progress. Please treat wiki errors the same as bugs and report them accordingly.</em></p><p>Basalt is a user-friendly UI framework for CC:Tweaked (also known as &quot;ComputerCraft: Tweaked&quot;) - a popular Minecraft mod. It was developed to enhance user interaction through visual displays. In this wiki, you&#39;ll find information on how to use Basalt as well as examples of functional Basalt code.</p><p>This Website is made with the help of ChatGPT.</p><h2 id="about-basalt" tabindex="-1">About Basalt <a class="header-anchor" href="#about-basalt" aria-label="Permalink to &quot;About Basalt&quot;">​</a></h2><p>Basalt is an easy-to-understand UI framework designed to improve user interaction with CC:Tweaked. Some of its key features include:</p><ul><li>A set of pre-built UI components for creating interfaces quickly and easily.</li><li>A flexible layout system that allows users to create custom designs.</li><li>A powerful event handling system for managing user input and interaction.</li><li>Support for multiple screen resolutions and aspect ratios.</li><li>Extensive documentation and examples to help users get started quickly.</li></ul><h2 id="quick-demo" tabindex="-1">Quick Demo <a class="header-anchor" href="#quick-demo" aria-label="Permalink to &quot;Quick Demo&quot;">​</a></h2><p><img src="https://raw.githubusercontent.com/Pyroxenium/Basalt/master/docs/_media/basaltPreview2.gif" alt="Basalt Demo GIF"></p><h2 id="questions-bugs" tabindex="-1">Questions &amp; Bugs <a class="header-anchor" href="#questions-bugs" aria-label="Permalink to &quot;Questions &amp; Bugs&quot;">​</a></h2><p>Bugs can be reported here: <a href="https://github.com/Pyroxenium/Basalt/issues" target="_blank" rel="noreferrer">Github</a> or in our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">discord</a>.</p><p>If you have questions about Basalt or how to make use of it, feel free to create a new discussion on <a href="https://github.com/Pyroxenium/Basalt/discussions" target="_blank" rel="noreferrer">Basalt&#39;s Discussion Board (Github)</a>, or ask in our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">discord</a>.</p>',12),i=[r];function l(n,u,c,d,h,m){return t(),a("div",null,i)}const b=e(s,[["render",l]]);export{f as __pageData,b as default};

1
docs/.vitepress/dist/assets/home.md.Byvc0x1l.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,c as a,o as t,a4 as o}from"./chunks/framework.nQaBHiNx.js";const f=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"home.md","filePath":"home.md","lastUpdated":null}'),s={name:"home.md"},r=o("",12),i=[r];function l(n,u,c,d,h,m){return t(),a("div",null,i)}const b=e(s,[["render",l]]);export{f as __pageData,b as default};

13
docs/.vitepress/dist/assets/home.md.DdCmc0TU.js vendored Normal file
View File

@@ -0,0 +1,13 @@
import{_ as i,a,b as t,ag as e}from"./chunks/framework.BcrMLAmg.js";const E=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"home.md","filePath":"home.md","lastUpdated":1742262455000}'),n={name:"home.md"};function l(h,s,r,p,o,k){return t(),a("div",null,s[0]||(s[0]=[e(`<h1 id="welcome-to-the-basalt-wiki" tabindex="-1">Welcome to The Basalt Wiki <a class="header-anchor" href="#welcome-to-the-basalt-wiki" aria-label="Permalink to &quot;Welcome to The Basalt Wiki&quot;">​</a></h1><p>Welcome to Basalt 2, a complete reimagining of the Basalt UI framework for ComputerCraft. After maintaining the original Basalt, i identified several areas that needed fundamental improvements. This led to the decision to rebuild Basalt from the ground up, focusing on these key aspects:</p><ul><li>Improved error handling to help developers quickly identify and resolve issues</li><li>Auto-generated documentation that stays in sync with the codebase</li><li>IDE support through automatically generated LuaLS annotations</li><li>New ways to access properties</li></ul><h2 id="features" tabindex="-1">Features <a class="header-anchor" href="#features" aria-label="Permalink to &quot;Features&quot;">​</a></h2><ul><li><strong>Pre-built Components:</strong> Buttons, Lists, Textboxes, and more</li><li><strong>Modern UI:</strong> Animations, themes, states, xml</li><li><strong>Event System:</strong> Powerful event handling</li><li><strong>Plugin System:</strong> Extend Basalt with custom plugins</li><li><strong>Developer Friendly:</strong><ul><li>Type definitions for better IDE support</li><li>Extensive documentation</li><li>Minification support</li></ul></li></ul><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to &quot;Quick Start&quot;">​</a></h2><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;basalt&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Create a simple UI</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello Basalt!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">14</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> -- Your code here</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">run</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><h2 id="preview" tabindex="-1">Preview <a class="header-anchor" href="#preview" aria-label="Permalink to &quot;Preview&quot;">​</a></h2><p><img src="https://raw.githubusercontent.com/Pyroxenium/Basalt/master/docs/_media/basaltPreview2.gif" alt="Basalt Demo GIF"></p><h2 id="documentation" tabindex="-1">Documentation <a class="header-anchor" href="#documentation" aria-label="Permalink to &quot;Documentation&quot;">​</a></h2><ul><li><a href="/guides/getting-started.html">Getting Started Guide</a></li><li><a href="/references/main.html">API Reference</a></li></ul><h2 id="community-support" tabindex="-1">Community &amp; Support <a class="header-anchor" href="#community-support" aria-label="Permalink to &quot;Community &amp; Support&quot;">​</a></h2><ul><li>Report bugs on <a href="https://github.com/Pyroxenium/Basalt2/issues" target="_blank" rel="noreferrer">GitHub</a></li><li>Join our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">Discord</a></li><li>Ask questions on <a href="https://github.com/Pyroxenium/Basalt2/discussions" target="_blank" rel="noreferrer">GitHub Discussions</a></li><li>Check out the <a href="/guides/faq.html">FAQ</a></li></ul>`,13)]))}const u=i(n,[["render",l]]);export{E as __pageData,u as default};

1
docs/.vitepress/dist/assets/home.md.DdCmc0TU.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as i,a,b as t,ag as e}from"./chunks/framework.BcrMLAmg.js";const E=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"home.md","filePath":"home.md","lastUpdated":1742262455000}'),n={name:"home.md"};function l(h,s,r,p,o,k){return t(),a("div",null,s[0]||(s[0]=[e("",13)]))}const u=i(n,[["render",l]]);export{E as __pageData,u as default};

1
docs/.vitepress/dist/assets/home.md.dcaebb5b.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,o as a,c as t,Q as o}from"./chunks/framework.4313453f.js";const f=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"home.md","filePath":"home.md","lastUpdated":null}'),s={name:"home.md"},r=o('<h1 id="welcome-to-the-basalt-wiki" tabindex="-1">Welcome to The Basalt Wiki <a class="header-anchor" href="#welcome-to-the-basalt-wiki" aria-label="Permalink to &quot;Welcome to The Basalt Wiki&quot;">​</a></h1><p><em>Note: The Basalt Wiki is a work in progress. Please treat wiki errors the same as bugs and report them accordingly.</em></p><p>Basalt is a user-friendly UI framework for CC:Tweaked (also known as &quot;ComputerCraft: Tweaked&quot;) - a popular Minecraft mod. It was developed to enhance user interaction through visual displays. In this wiki, you&#39;ll find information on how to use Basalt as well as examples of functional Basalt code.</p><p>This Website is made with the help of ChatGPT.</p><h2 id="about-basalt" tabindex="-1">About Basalt <a class="header-anchor" href="#about-basalt" aria-label="Permalink to &quot;About Basalt&quot;">​</a></h2><p>Basalt is an easy-to-understand UI framework designed to improve user interaction with CC:Tweaked. Some of its key features include:</p><ul><li>A set of pre-built UI components for creating interfaces quickly and easily.</li><li>A flexible layout system that allows users to create custom designs.</li><li>A powerful event handling system for managing user input and interaction.</li><li>Support for multiple screen resolutions and aspect ratios.</li><li>Extensive documentation and examples to help users get started quickly.</li></ul><h2 id="quick-demo" tabindex="-1">Quick Demo <a class="header-anchor" href="#quick-demo" aria-label="Permalink to &quot;Quick Demo&quot;">​</a></h2><p><img src="https://raw.githubusercontent.com/Pyroxenium/Basalt/master/docs/_media/basaltPreview2.gif" alt="Basalt Demo GIF"></p><h2 id="questions-bugs" tabindex="-1">Questions &amp; Bugs <a class="header-anchor" href="#questions-bugs" aria-label="Permalink to &quot;Questions &amp; Bugs&quot;">​</a></h2><p>Bugs can be reported here: <a href="https://github.com/Pyroxenium/Basalt/issues" target="_blank" rel="noreferrer">Github</a> or in our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">discord</a>.</p><p>If you have questions about Basalt or how to make use of it, feel free to create a new discussion on <a href="https://github.com/Pyroxenium/Basalt/discussions" target="_blank" rel="noreferrer">Basalt&#39;s Discussion Board (Github)</a>, or ask in our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">discord</a>.</p>',12),i=[r];function l(n,u,c,d,h,m){return a(),t("div",null,i)}const b=e(s,[["render",l]]);export{f as __pageData,b as default};

1
docs/.vitepress/dist/assets/home.md.dcaebb5b.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,o as a,c as t,Q as o}from"./chunks/framework.4313453f.js";const f=JSON.parse('{"title":"Welcome to The Basalt Wiki","description":"","frontmatter":{},"headers":[],"relativePath":"home.md","filePath":"home.md","lastUpdated":null}'),s={name:"home.md"},r=o("",12),i=[r];function l(n,u,c,d,h,m){return a(),t("div",null,i)}const b=e(s,[["render",l]]);export{f as __pageData,b as default};

1
docs/.vitepress/dist/assets/index.md.Bpyy5t2w.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,c as t,o as a}from"./chunks/framework.nQaBHiNx.js";const u=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Basalt","text":"Official Documentation","tagline":"A CC:Tweaked UI Framework","actions":[{"theme":"brand","text":"Home","link":"/guides/"},{"theme":"alt","text":"Guides","link":"guides/getting-started"},{"theme":"alt","text":"References","link":"/references/main"},{"theme":"alt","text":"Github","link":"https://github.com/Pyroxenium/Basalt/tree/basalt2"}]},"features":[{"title":"User friendly","details":"Basalt's intuitive interface makes UI design a breeze, even for beginners. Experience seamless integration without the steep learning curve."},{"title":"High Performance","details":"Designed with efficiency in mind, Basalt ensures smooth and responsive interfaces, even for the most complex applications."},{"title":"Modular Design","details":"With a rich set of objects and modules, Basalt allows you to craft custom experiences, scaling up or down based on your needs."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":null}`),i={name:"index.md"};function n(s,r,o,l,c,d){return a(),t("div")}const f=e(i,[["render",n]]);export{u as __pageData,f as default};

1
docs/.vitepress/dist/assets/index.md.Bpyy5t2w.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,c as t,o as a}from"./chunks/framework.nQaBHiNx.js";const u=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Basalt","text":"Official Documentation","tagline":"A CC:Tweaked UI Framework","actions":[{"theme":"brand","text":"Home","link":"/guides/"},{"theme":"alt","text":"Guides","link":"guides/getting-started"},{"theme":"alt","text":"References","link":"/references/main"},{"theme":"alt","text":"Github","link":"https://github.com/Pyroxenium/Basalt/tree/basalt2"}]},"features":[{"title":"User friendly","details":"Basalt's intuitive interface makes UI design a breeze, even for beginners. Experience seamless integration without the steep learning curve."},{"title":"High Performance","details":"Designed with efficiency in mind, Basalt ensures smooth and responsive interfaces, even for the most complex applications."},{"title":"Modular Design","details":"With a rich set of objects and modules, Basalt allows you to craft custom experiences, scaling up or down based on your needs."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":null}`),i={name:"index.md"};function n(s,r,o,l,c,d){return a(),t("div")}const f=e(i,[["render",n]]);export{u as __pageData,f as default};

1
docs/.vitepress/dist/assets/index.md.f2820d88.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,o as t,c as a}from"./chunks/framework.4313453f.js";const u=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Basalt","text":"Official Documentation","tagline":"A CC:Tweaked UI Framework","actions":[{"theme":"brand","text":"Home","link":"/guides/"},{"theme":"alt","text":"Guides","link":"guides/getting-started"},{"theme":"alt","text":"References","link":"/references/main"},{"theme":"alt","text":"Github","link":"https://github.com/Pyroxenium/Basalt/tree/basalt2"}]},"features":[{"title":"User friendly","details":"Basalt's intuitive interface makes UI design a breeze, even for beginners. Experience seamless integration without the steep learning curve."},{"title":"High Performance","details":"Designed with efficiency in mind, Basalt ensures smooth and responsive interfaces, even for the most complex applications."},{"title":"Modular Design","details":"With a rich set of objects and modules, Basalt allows you to craft custom experiences, scaling up or down based on your needs."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":null}`),i={name:"index.md"};function n(s,r,o,l,c,d){return t(),a("div")}const f=e(i,[["render",n]]);export{u as __pageData,f as default};

1
docs/.vitepress/dist/assets/index.md.f2820d88.lean.js vendored
View File

@@ -1 +0,0 @@
import{_ as e,o as t,c as a}from"./chunks/framework.4313453f.js";const u=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Basalt","text":"Official Documentation","tagline":"A CC:Tweaked UI Framework","actions":[{"theme":"brand","text":"Home","link":"/guides/"},{"theme":"alt","text":"Guides","link":"guides/getting-started"},{"theme":"alt","text":"References","link":"/references/main"},{"theme":"alt","text":"Github","link":"https://github.com/Pyroxenium/Basalt/tree/basalt2"}]},"features":[{"title":"User friendly","details":"Basalt's intuitive interface makes UI design a breeze, even for beginners. Experience seamless integration without the steep learning curve."},{"title":"High Performance","details":"Designed with efficiency in mind, Basalt ensures smooth and responsive interfaces, even for the most complex applications."},{"title":"Modular Design","details":"With a rich set of objects and modules, Basalt allows you to craft custom experiences, scaling up or down based on your needs."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":null}`),i={name:"index.md"};function n(s,r,o,l,c,d){return t(),a("div")}const f=e(i,[["render",n]]);export{u as __pageData,f as default};

1
docs/.vitepress/dist/assets/index.md.nO0QWAqX.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as e,a as t,b as a}from"./chunks/framework.BcrMLAmg.js";const h=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Basalt","text":"Official Documentation","tagline":"A CC:Tweaked UI Framework","actions":[{"theme":"brand","text":"Home","link":"/home"},{"theme":"alt","text":"Guides","link":"/guides/getting-started"},{"theme":"alt","text":"References","link":"/references/main"},{"theme":"alt","text":"Github","link":"https://github.com/Pyroxenium/Basalt2"},{"theme":"alt","text":"Basalt 1.7","link":"https://pyroxenium.github.io/Basalt/"}]},"features":[{"title":"User friendly","details":"Basalt's intuitive interface makes UI design a breeze, even for beginners. Experience seamless integration without the steep learning curve."},{"title":"High Performance","details":"Designed with efficiency in mind, Basalt ensures smooth and responsive interfaces, even for the most complex applications."},{"title":"Modular Design","details":"With a rich set of objects and modules, Basalt allows you to craft custom experiences, scaling up or down based on your needs."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1742845764000}`),i={name:"index.md"};function n(s,o,r,l,c,d){return a(),t("div")}const u=e(i,[["render",n]]);export{h as __pageData,u as default};

1
docs/.vitepress/dist/assets/index.md.nO0QWAqX.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{_ as e,a as t,b as a}from"./chunks/framework.BcrMLAmg.js";const h=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Basalt","text":"Official Documentation","tagline":"A CC:Tweaked UI Framework","actions":[{"theme":"brand","text":"Home","link":"/home"},{"theme":"alt","text":"Guides","link":"/guides/getting-started"},{"theme":"alt","text":"References","link":"/references/main"},{"theme":"alt","text":"Github","link":"https://github.com/Pyroxenium/Basalt2"},{"theme":"alt","text":"Basalt 1.7","link":"https://pyroxenium.github.io/Basalt/"}]},"features":[{"title":"User friendly","details":"Basalt's intuitive interface makes UI design a breeze, even for beginners. Experience seamless integration without the steep learning curve."},{"title":"High Performance","details":"Designed with efficiency in mind, Basalt ensures smooth and responsive interfaces, even for the most complex applications."},{"title":"Modular Design","details":"With a rich set of objects and modules, Basalt allows you to craft custom experiences, scaling up or down based on your needs."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1742845764000}`),i={name:"index.md"};function n(s,o,r,l,c,d){return a(),t("div")}const u=e(i,[["render",n]]);export{h as __pageData,u as default};

BIN
docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.5XJwZIOp.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 vendored Normal file
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 vendored Normal file
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-cyrillic.D6csxwjC.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-cyrillic.ea42a392.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 vendored Normal file
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-greek-ext.4fbe9427.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-greek-ext.CHOfFY1k.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-greek.8f4463c4.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-greek.9J96vYpw.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 vendored Normal file
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-latin-ext.BGcWXLrn.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 vendored Normal file
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-latin-ext.bd8920cc.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 vendored Normal file
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-latin.DbsTr1gm.woff2 vendored
View File

Binary file not shown.

BIN
docs/.vitepress/dist/assets/inter-italic-latin.bd3b6f56.woff2 vendored
View File

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show More