UNPKG

svelte-object

Version:

A nested component Svelte 5 Runes pattern for structuring objects/arrays and their properties

46 lines (34 loc) 3.98 kB
<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>