svelte-object
Version:
A nested component Svelte 5 Runes pattern for structuring objects/arrays and their properties
46 lines (34 loc) • 3.94 kB
Markdown
<br>
<div align='center'><a href='https://github.com/Refzlund/svelte-object'><img src='https://github.com/Refzlund/svelte-object/blob/master/logo.png' width=500></img></a></div>
<br>
👉 Define objects in your markup-structure!
💫 Driven by Svelte 5's runes for highly robust code
🔥 Handles submit events and validation
<br>
<div align='center'>
<img src='https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg' width=20 align='center'>
<b>Made for Svelte 5</b>
</div>
<br>
<div align='center'>Get started with literal wizardry!🧙♂️</div>
<div align='center'><code>bun add -D svelte-object</code> / <code>npm i -D svelte-object</code> / <code>pnpm add -D svelte-object</code></div>
<br>
<br>
This could be your code <sup><a href='https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACrVYzZLbuBF-lY52XZQmFDVyyuUtmuJksnHVOpVdb61de7F8AMmmBBsEGADUzITFe5JLKrdULps3ybvsE-wjpADwfzQ7STk5jEoCur9udDcaX0-9yClDtQjf1QtOClyEi-uyXPgLfVeaH-qETOPCXyhRydSsRCqVtNTACD_sPK28eM_32vzRohRSw7fkgJBLUYAXbMyPwIF4Ti7aOACjxiEyAnFk5eKFvyhERnOK2SLUssLG770yAp_k1gUQBa9ax5z-WiQfMNXeSOoVLyvde29_Td3fa4YaRPIBdvC50kTjsgZywBC2W2hWxgjhd50ckXKQq3iGOeWYjaQ6Oa3lGDCjiiQMsxBywhRCs3KyecVTTQWHQpzwlcZiSXmGtyHwqkhQ-pBRiVaiW1pBbR3v3CF3vZ1AcVKqo9BLImVroD2ePqLxx4LDLwdUJ0LzZSux28F6u-rlLX7AkB_0EdawPSM-FhkUL2FsnnRQ76wD74edpN-xmu0OkbKVhB0kw5qTMSpmrZnUHux5lAtZgOCqSgqqdzXCLoYaMCglnpDr32JOKqaXK2ia2PkXvQpe25qBhPIsPBFW4a4WyYfGLZg80qTSqHa1-d6A4G9a-OVp5QykgivBMGDisPSccY2Z599Ly2nVmdZ7HZUS4ygVGcb17968_iZQWlJ-oPnd0lhaNVEiY_dXaS04CJ4ymn7c1Utr1wgFXV3BDn4xWWjit-JwYNhXXrRxMHG0sTajjbHvXBl_Ru7GSPxDRSVm87gE5vo2UFC-q3_VxN-QAiN3rSZYURm_lXegkJk64wdzo4DwDEqJSpmF_eIl1yj3iwBeabihjMGJMJoRjZBTZJmy8oKDqtIUlfLBhRa0AH1EcHcdbqg-ggtjl5r2hEG0KeMzRzMtZ-e52-SBOc_OIwf03KG2XzTx9WF2qIdSIGVQVuq4rJtVE19nQ5BbtYyeIGVEqZ1nq9zr_DGFd20vb2vf7k6CTaRsevG9rj9TnJYlaqCmTZRSlKtm2J4aMyJePN59qNQNTmC_NzP5Pl6th218njZ9bcTXs9TPNc8bCkjzqKazmXjxb84LRpvuNA-e0kI4s7aXPHq-_6NTD5ePKhlNcTm46cN21cTfoXkQZuX0CFz_hMzB4Kcf_vbnn37467_gfwC47hD_9DBitMnoaVy7m7Z2-4I1obL1392UXmMaRD6t60RUPPPiocccUSFQkwsFRCJYAdMh2o6QfAjMw7F93_UEsG3pSHPblUwfMXfFKBvNUcuoP6O5ydBV8G77fvCb3itsh2-K-meEWkfI3US0DpEpnIN3HXuON1uvNzTvVPkk5rx9XNownX1iRPLBB14x5oMHAN6qaSPksHp1Hm3Mq-pywfc8UvqOYZuasuMiJckyyg8hXL5wCwWRB8q7303nVuDy02olQmYoQ9iWt6AEoxkcFSPLSx8un7i_4OnqxczCVmJhP16MQdaSZLRSIQTPuq3eaHhgIiFsmYjsrmdPnYMObqo10rnoFXLB9TonBWV3IVxLSpgPXyE7oaYp8UERrtYKJc3HMJaQtAAZVSUjdyEcJM1a583XNam0WOdM3IQgxU23Q8pwOGYL50rovwFMBasK_iCmS4q5AZ_o5cjJUiKYSrqHmDCRfmwVb2imjyFsLy-fdCtHqnGtSpJiaFjCubyfT_mz8nYcpLHthKQfD_Zmr1PBhAxNhU0KbPtsNY5GtHH1_XOTi239nzS61PC9aQu-pSLmu6E9VPCXhqUOqxV-K0Wp7om9NT-bxyYfq1TDm5Y1TOXHgnaQUlqeA9yceqsb1zzuafKqeEyz5VqTCFD1XUcxzx5lpO-5xFLDF3OSItiwAN5q5JkaRapLe3qkLJPIr8Lu-L7bMDG5CuGrt1__3mbxJcMCuX7nmQ3vfTezbC4uRuGGi03bM6hBdIfpusjtbKXjRlchJEIwJHxy18zMU4MTtU-DGd7MQ2E6-3LlT_0PQTEx9t3vx6qCch8Kcuv3bMzvtoIgkKisuSZsY7WDz80jrparYUa19r8URSk4ch26OEaEuzcZb22izGyjB2a-g6XxI5xX4w68XMgUPUscpshBp21VV_fAW1q_g-U5Zbe7nM_Lgn_foU68sVfIHqLv3DRfYqAlPRxQBgmrhhF6r4cqXOIQypXbbrqI8qoIqPqaciNkI29aQiultJxsrmZa5NZukNup_HTZmpr8J2XPI5sQRyP0kapdPQ1NM2IYULdZb6AeQuN4xjA5dHU1mR4sv6oUhpblmfiMSr9fd2l4ze3QNjATRhJkcf1riTxDacv1KliuGrD0qYtnc2HJSrRx4g_wmpasDyP31TDNQm1qp3l0dLFm7QZKKeRoQBrTSLvnxT_-5e9QD8JBgUqRAzZT-jrmWSP8GyI55YcHLLS7XvzjP_7Z2miXHrcybIx5c7Sx5RDPaZi958byYw-4xqJkRONaihsVgnnP7cf4KQ-ezomQC03fWN0jKjEbHs3uYDMZIQk_4BjKJv8-Y4Tg-bPhbbc0S9E_YgjBF3NnXL3MESx5m6KcZZbLp5eXvqUcPjy7fLJ6jEBOnJlTMetKmIu06l8dUWlGOYbABe_oS78247gjV55bHvL8P-Uh75t_A-IBC2_jFQAA'>See REPL</a></sup>
```html
<h3> An array of pets </h3>
<I.Array bind:value={pets}>
{#snippet item(prop)}
<I.Object name={prop.index}>
<Input name='name' min={2}>Pets name</Input>
<Input name='age' type='number'>Pets age</Input>
</I.Object>
{/snippet}
<button on:click={() => pets.push({})}> Add pet </button>
</I.Array>
```
<br>
> [!NOTE]
> What are you waiting for? [Get Started](https://github.com/Refzlund/svelte-object/wiki/Basic-Usage)!
<br>
<br>