inertia_rails-contrib 0.2.2 → 0.3.0

data/lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt

@@ -2,10 +2,7 @@
   import { useForm } from '@inertiajs/svelte'
   import { createEventDispatcher } from 'svelte'
 
-  const dispatch = createEventDispatcher()
-
-  export let <%= singular_table_name %>
-  export let submitText
+  let { <%= singular_table_name %>, submitText, onSubmit } = $props()
 
   const form = useForm({
 <% attributes.each do |attribute| -%>
@@ -17,9 +14,14 @@
 <% end -%>
 <% end -%>
   })
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onSubmit({form: $form })
+  }
 </script>
 
-<form on:submit|preventDefault={dispatch('submit', { form: $form })}>
+<form onsubmit={handleSubmit}>
 <% attributes.each do |attribute| -%>
 <% if attribute.password_digest? -%>
   <div>
@@ -51,28 +53,28 @@
   <div>
     <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
 <% if input_type(attribute) == "text_area" -%>
-    <textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>} />
+    <textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>}></textarea>
 <% elsif attribute.attachment? -%>
     <input
       type="file"
       name="<%= attribute.singular_name %>"
       id="<%= attribute.singular_name %>"
-      on:input={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
+      oninput={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
     />
 <% elsif attribute.attachments? -%>
     <input
       type="file"
-      multiple="multiple"
+      multiple
       name="<%= attribute.singular_name %>[]"
       id="<%= attribute.singular_name %>"
-      on:input={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
+      oninput={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
     />
 <% else -%>
     <input
       type="<%= input_type(attribute) %>"
       name="<%= attribute.singular_name %>"
       id="<%= attribute.singular_name %>"
-      bind:value={$form.<%= attribute.column_name %>}
+      <%= input_type(attribute) == "checkbox" ? "bind:checked" : "bind:value" %>={$form.<%= attribute.column_name %>}
     />
 <% end -%>
     {#if $form.errors.<%= attribute.column_name %>}

data/lib/generators/inertia_templates/scaffold/templates/svelte/Index.svelte.tt

@@ -2,14 +2,7 @@
   import { Link } from '@inertiajs/svelte'
   import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
 
-  export let <%= plural_table_name %>
-  export let flash
-
-  const onDestroy = (e) => {
-    if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
-      e.preventDefault()
-    }
-  }
+  let { <%= plural_table_name %>, flash } = $props()
 </script>
 
 <svelte:head>

data/lib/generators/inertia_templates/scaffold/templates/svelte/New.svelte.tt

@@ -2,10 +2,9 @@
   import { Link } from '@inertiajs/svelte'
   import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
+  const handleSubmit = ({ form }) => {
     form.transform((data) => ({ <%= singular_table_name %>: data }))
     form.post('<%= js_resources_path %>')
   }
@@ -20,7 +19,7 @@
 <Form
   {<%= singular_table_name %>}
   submitText="Create <%= human_name.downcase %>"
-  on:submit={handleSubmit}
+  onSubmit={handleSubmit}
 />
 
 <br />

data/lib/generators/inertia_templates/scaffold/templates/svelte/One.svelte.tt

@@ -1,5 +1,5 @@
 <script>
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 </script>
 
 <div>

data/lib/generators/inertia_templates/scaffold/templates/svelte/Show.svelte.tt

@@ -1,9 +1,8 @@
 <script>
-  import { inertia, Link } from '@inertiajs/svelte'
+  import { Link } from '@inertiajs/svelte'
   import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
 
-  export let <%= singular_table_name %>
-  export let flash
+  let { <%= singular_table_name %>, flash } = $props()
 
   const onDestroy = (e) => {
     if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
@@ -30,13 +29,9 @@
 
   <br />
 
-  <button
-    use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
-    on:click={onDestroy}
-    type="button"
-  >
+  <Link href={`<%= js_resource_path %>`} method="delete" onclick={onDestroy}>
     Destroy this <%= human_name.downcase %>
-  </button>
+  </Link>
 </div>
 
 <style>

data/lib/generators/inertia_templates/scaffold/templates/svelte4/Edit.svelte.tt

@@ -0,0 +1,37 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+
+  export let <%= singular_table_name %>
+
+  const handleSubmit = (e) => {
+    const { form } = e.detail
+    form.transform((data) => ({ <%= singular_table_name %>: data }))
+<% if attributes.any?(&:attachments?) -%>
+    form.post(`<%= js_resource_path %>`, {
+      headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
+    })
+<% else -%>
+    form.patch(`<%= js_resource_path %>`)
+<% end -%>
+  }
+</script>
+
+<svelte:head>
+  <title>Editing <%= human_name.downcase %></title>
+</svelte:head>
+
+<h1>Editing <%= human_name.downcase %></h1>
+
+<Form
+  {<%= singular_table_name %>}
+  submitText="Update <%= human_name.downcase %>"
+  on:submit={handleSubmit}
+/>
+
+<br />
+
+<div>
+  <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link> |
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+</div>

data/lib/generators/inertia_templates/scaffold/templates/svelte4/Form.svelte.tt

@@ -0,0 +1,96 @@
+<script>
+  import { useForm } from '@inertiajs/svelte'
+  import { createEventDispatcher } from 'svelte'
+
+  const dispatch = createEventDispatcher()
+
+  export let <%= singular_table_name %>
+  export let submitText
+
+  const form = useForm({
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    password: '',
+    password_confirmation: '',
+<% else -%>
+    <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %> || <%= default_value(attribute) %>,
+<% end -%>
+<% end -%>
+  })
+</script>
+
+<form on:submit|preventDefault={dispatch('submit', { form: $form })}>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+  <div>
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      bind:value={$form.password}
+    />
+    {#if $form.errors.password}
+      <div class="error">{$form.errors.password.join(', ')}</div>
+    {/if}
+  </div>
+
+  <div>
+    <label for="password_confirmation">Password Confirmation</label>
+    <input
+      type="password"
+      name="password_confirmation"
+      id="password_confirmation"
+      bind:value={$form.password_confirmation}
+    />
+    {#if $form.errors.password_confirmation}
+      <div class="error">{$form.errors.password_confirmation.join(', ')}</div>
+    {/if}
+  </div>
+<% else -%>
+  <div>
+    <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+    <textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>}></textarea>
+<% elsif attribute.attachment? -%>
+    <input
+      type="file"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      oninput={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
+    />
+<% elsif attribute.attachments? -%>
+    <input
+      type="file"
+      multiple
+      name="<%= attribute.singular_name %>[]"
+      id="<%= attribute.singular_name %>"
+      oninput={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
+    />
+<% else -%>
+    <input
+      type="<%= input_type(attribute) %>"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      <%= input_type(attribute) == "checkbox" ? "bind:checked" : "bind:value" %>={$form.<%= attribute.column_name %>}
+    />
+<% end -%>
+    {#if $form.errors.<%= attribute.column_name %>}
+      <div class="error">{$form.errors.<%= attribute.column_name %>.join(', ')}</div>
+    {/if}
+  </div>
+<% end -%>
+<% end -%>
+  <div>
+    <button type="submit" disabled={$form.processing}>{submitText}</button>
+  </div>
+</form>
+
+<style>
+  label {
+    display: block;
+  }
+  .error {
+    color: red;
+  }
+</style>

data/lib/generators/inertia_templates/scaffold/templates/svelte4/Index.svelte.tt

@@ -0,0 +1,36 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+
+  export let <%= plural_table_name %>
+  export let flash
+</script>
+
+<svelte:head>
+  <title><%= human_name.pluralize %></title>
+</svelte:head>
+
+{#if flash.notice}
+  <p class="notice">{flash.notice}</p>
+{/if}
+
+<h1><%= human_name.pluralize %></h1>
+
+<div>
+  {#each <%= plural_table_name %> as <%= singular_table_name %> (<%= singular_table_name %>.id)}
+    <div>
+      <<%= inertia_component_name %> {<%= singular_table_name %>} />
+      <p>
+        <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link>
+      </p>
+    </div>
+  {/each}
+</div>
+
+<Link href="<%= js_new_resource_path %>">New <%= human_name.downcase %></Link>
+
+<style>
+  .notice {
+    color: green;
+  }
+</style>

data/lib/generators/inertia_templates/scaffold/templates/svelte4/New.svelte.tt

@@ -0,0 +1,30 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+
+  export let <%= singular_table_name %>
+
+  const handleSubmit = (e) => {
+    const { form } = e.detail
+    form.transform((data) => ({ <%= singular_table_name %>: data }))
+    form.post('<%= js_resources_path %>')
+  }
+</script>
+
+<svelte:head>
+  <title>New <%= human_name.downcase %></title>
+</svelte:head>
+
+<h1>New <%= human_name.downcase %></h1>
+
+<Form
+  {<%= singular_table_name %>}
+  submitText="Create <%= human_name.downcase %>"
+  on:submit={handleSubmit}
+/>
+
+<br />
+
+<div>
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+</div>

data/lib/generators/inertia_templates/scaffold/templates/svelte4/One.svelte.tt

@@ -0,0 +1,28 @@
+<script>
+  export let <%= singular_table_name %>
+</script>
+
+<div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <p>
+    <strong><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+    {#if <%= singular_table_name %>.<%= attribute.column_name %>}
+      <a href={<%= singular_table_name %>.<%= attribute.column_name %>.url}>
+        {<%= singular_table_name %>.<%= attribute.column_name %>.filename}
+      </a>
+    {/if}
+  </p>
+<% elsif attribute.attachments? -%>
+  </p>
+  {#each <%= singular_table_name %>.<%= attribute.column_name %> as { url, filename }}
+    <div>
+      <a href={url}>{filename}</a>
+    </div>
+  {/each}
+<% else -%>
+    {<%= singular_table_name %>.<%= attribute.column_name %>}
+  </p>
+<% end -%>
+<% end -%>
+</div>

data/lib/generators/inertia_templates/scaffold/templates/svelte4/Show.svelte.tt

@@ -0,0 +1,46 @@
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+
+  export let <%= singular_table_name %>
+  export let flash
+
+  const onDestroy = (e) => {
+    if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
+      e.preventDefault()
+    }
+  }
+</script>
+
+<svelte:head>
+  <title><%= human_name %> #{<%= singular_table_name %>.id}</title>
+</svelte:head>
+
+{#if flash.notice}
+  <p class="notice">{flash.notice}</p>
+{/if}
+
+<h1><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+
+<<%= inertia_component_name %> {<%= singular_table_name %>} />
+
+<div>
+  <Link href={`<%= js_edit_resource_path %>`}>Edit this <%= human_name.downcase %></Link> |
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+
+  <br />
+
+  <button
+    use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
+    on:click={onDestroy}
+    type="button"
+  >
+    Destroy this <%= human_name.downcase %>
+  </button>
+</div>
+
+<style>
+  .notice {
+    color: green;
+  }
+</style>

data/lib/generators/inertia_templates/scaffold/templates/vue/Form.vue.tt

@@ -44,7 +44,7 @@
 <% elsif attribute.attachments? -%>
       <input
         type="file"
-        multiple="multiple"
+        multiple
         name="<%= attribute.singular_name %>[]"
         id="<%= attribute.singular_name %>"
         @input="form.<%= attribute.column_name %> = Array.from($event.target.files)"

data/lib/generators/inertia_tw_templates/controller/templates/svelte4/view.svelte.tt

@@ -0,0 +1,2 @@
+<h1 class="font-bold text-4xl"><%= class_name %>#<%= @action %></h1>
+<p>Find me in <%= @path %></p>

data/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.jsx.tt

@@ -74,13 +74,13 @@ export default function Form({ <%= singular_table_name %>, onSubmit, submitText
 <% elsif attribute.attachments? -%>
         <input
           type="file"
-          multiple="multiple"
+          multiple
           name="<%= attribute.singular_name %>[]"
           id="<%= attribute.singular_name %>"
           className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
           onChange={(e) => setData('<%= attribute.column_name %>', Array.from(e.target.files))}
         />
-<% elsif attribute.field_type == :check_box -%>
+<% elsif input_type(attribute) == "checkbox" -%>
         <input
           type="<%= input_type(attribute) %>"
           name="<%= attribute.singular_name %>"

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Edit.svelte.tt

@@ -2,10 +2,9 @@
   import { Link } from '@inertiajs/svelte'
   import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
+  const handleSubmit = ({ form }) => {
     form.transform((data) => ({ <%= singular_table_name %>: data }))
 <% if attributes.any?(&:attachments?) -%>
     form.post(`<%= js_resource_path %>`, {
@@ -27,7 +26,7 @@
   <Form
     {<%= singular_table_name %>}
     submitText="Update <%= human_name.downcase %>"
-    on:submit={handleSubmit}
+    onSubmit={handleSubmit}
   />
 
   <Link

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.svelte.tt

@@ -2,10 +2,7 @@
   import { useForm } from '@inertiajs/svelte'
   import { createEventDispatcher } from 'svelte'
 
-  const dispatch = createEventDispatcher()
-
-  export let <%= singular_table_name %>
-  export let submitText
+  let { <%= singular_table_name %>, submitText, onSubmit } = $props()
 
   const form = useForm({
 <% attributes.each do |attribute| -%>
@@ -17,12 +14,14 @@
 <% end -%>
 <% end -%>
   })
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onSubmit({form: $form })
+  }
 </script>
 
-<form
-  class="contents"
-  on:submit|preventDefault={dispatch('submit', { form: $form })}
->
+<form class="contents" onsubmit={handleSubmit}>
 <% attributes.each do |attribute| -%>
   <div class="my-5">
 <% if attribute.password_digest? -%>
@@ -64,25 +63,25 @@
       bind:value={$form.<%= attribute.column_name %>}
       rows="4"
       class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
-    />
+    ></textarea>
 <% elsif attribute.attachment? -%>
     <input
       type="file"
       name="<%= attribute.singular_name %>"
       id="<%= attribute.singular_name %>"
-      on:input={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
+      oninput={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
       class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
     />
 <% elsif attribute.attachments? -%>
     <input
       type="file"
-      multiple="multiple"
+      multiple
       name="<%= attribute.singular_name %>[]"
       id="<%= attribute.singular_name %>"
-      on:input={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
+      oninput={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
       class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
     />
-<% elsif attribute.field_type == :check_box -%>
+<% elsif input_type(attribute) == "checkbox" -%>
     <input
       type="<%= input_type(attribute) %>"
       name="<%= attribute.singular_name %>"

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Index.svelte.tt

@@ -2,14 +2,7 @@
   import { Link } from '@inertiajs/svelte'
   import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
 
-  export let <%= plural_table_name %>
-  export let flash
-
-  const onDestroy = (e) => {
-    if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
-      e.preventDefault()
-    }
-  }
+  let { <%= plural_table_name %>, flash } = $props()
 </script>
 
 <svelte:head>

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/New.svelte.tt

@@ -2,10 +2,9 @@
   import { Link } from '@inertiajs/svelte'
   import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
+  const handleSubmit = ({ form }) => {
     form.transform((data) => ({ <%= singular_table_name %>: data }))
     form.post('<%= js_resources_path %>')
   }
@@ -21,7 +20,7 @@
   <Form
     {<%= singular_table_name %>}
     submitText="Create <%= human_name.downcase %>"
-    on:submit={handleSubmit}
+    onSubmit={handleSubmit}
   />
 
   <Link

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/One.svelte.tt

@@ -1,5 +1,5 @@
 <script>
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 </script>
 
 <div>

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Show.svelte.tt

@@ -1,9 +1,8 @@
 <script>
-  import { inertia, Link } from '@inertiajs/svelte'
+  import { Link } from '@inertiajs/svelte'
   import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
 
-  export let <%= singular_table_name %>
-  export let flash
+  let { <%= singular_table_name %>, flash } = $props()
 
   const onDestroy = (e) => {
     if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
@@ -41,14 +40,14 @@
       Back to <%= human_name.pluralize.downcase %>
     </Link>
     <div class="inline-block ml-2">
-      <button
-        use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
-        on:click={onDestroy}
-        type="button"
+      <Link
+        href={`<%= js_resource_path %>`}
+        method="delete"
+        onclick={onDestroy}
         class="mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium"
       >
         Destroy this <%= human_name.downcase %>
-      </button>
+      </Link>
     </div>
   </div>
 </div>

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Edit.svelte.tt

@@ -0,0 +1,45 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+
+  export let <%= singular_table_name %>
+
+  const handleSubmit = (e) => {
+    const { form } = e.detail
+    form.transform((data) => ({ <%= singular_table_name %>: data }))
+<% if attributes.any?(&:attachments?) -%>
+    form.post(`<%= js_resource_path %>`, {
+      headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
+    })
+<% else -%>
+    form.patch(`<%= js_resource_path %>`)
+<% end -%>
+  }
+</script>
+
+<svelte:head>
+  <title>Editing <%= human_name.downcase %></title>
+</svelte:head>
+
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  <h1 class="font-bold text-4xl">Editing <%= human_name.downcase %></h1>
+
+  <Form
+    {<%= singular_table_name %>}
+    submitText="Update <%= human_name.downcase %>"
+    on:submit={handleSubmit}
+  />
+
+  <Link
+    href={`<%= js_resource_path %>`}
+    class="mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+  >
+    Show this <%= human_name.downcase %>
+  </Link>
+  <Link
+    href="<%= js_resources_path %>"
+    class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+  >
+    Back to <%= human_name.pluralize.downcase %>
+  </Link>
+</div>