inertia_rails 3.12.1 → 3.13.0

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

@@ -0,0 +1,96 @@
+<script>
+  import { Form } from '@inertiajs/svelte'
+
+  let { <%= singular_table_name %>, submitText, restProps } = $props()
+</script>
+
+<Form
+  transform={(data) => ({ <%= singular_table_name %>: data })}
+  {...restProps}
+>
+  {#snippet children({
+    errors,
+    processing,
+  })}
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div>
+      <label for="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+      />
+      {#if errors.password}
+        <div class="error">{errors.password.join(', ')}</div>
+      {/if}
+    </div>
+
+    <div>
+      <label for="password_confirmation">Password confirmation</label>
+      <input
+        type="password"
+        name="password_confirmation"
+        id="password_confirmation"
+      />
+      {#if errors.password_confirmation}
+        <div class="error">{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 %>"
+        defaultValue={<%= singular_table_name %>.<%= attribute.column_name %> ?? ''}
+      ></textarea>
+<% elsif attribute.attachment? -%>
+      <input
+        type="file"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+      />
+<% elsif attribute.attachments? -%>
+      <input
+        type="file"
+        multiple
+        name="<%= attribute.singular_name %>[]"
+        id="<%= attribute.singular_name %>"
+      />
+<% elsif input_type(attribute) == "checkbox" -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultChecked={<%= singular_table_name %>.<%= attribute.column_name %>}
+      />
+<% else -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultValue={<%= singular_table_name %>.<%= attribute.column_name %> ?? ''}
+      />
+<% end -%>
+      {#if errors.<%= attribute.column_name %>}
+        <div class="error">{errors.<%= attribute.column_name %>.join(', ')}</div>
+      {/if}
+    </div>
+<% end -%>
+<% end -%>
+    <div>
+      <button type="submit" disabled={processing}>{submitText}</button>
+    </div>
+  {/snippet}
+</Form>
+
+<style>
+  label {
+    display: block;
+  }
+  .error {
+    color: red;
+  }
+</style>

data/lib/generators/inertia_templates/scaffold/templates/svelte/form.ts.svelte.tt

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { type FormComponentSlotProps } from "@inertiajs/core"
+  import { Form } from '@inertiajs/svelte'
+  import type { ComponentProps } from 'svelte'
+
+  import type { <%= inertia_model_type %> } from './types'
+
+  let { <%= singular_table_name %>, submitText, ...restProps } = $props<{
+    <%= singular_table_name %>: <%= inertia_model_type %>
+    submitText: string
+  } & ComponentProps<Form>>()
+</script>
+
+<Form
+  transform={(data) => ({ <%= singular_table_name %>: data })}
+  {...restProps}
+>
+  {#snippet children({
+    errors,
+    processing,
+  }: FormComponentSlotProps)}
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div>
+      <label for="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+      />
+      {#if errors.password}
+        <div class="error">{errors.password}</div>
+      {/if}
+    </div>
+
+    <div>
+      <label for="password_confirmation">Password confirmation</label>
+      <input
+        type="password"
+        name="password_confirmation"
+        id="password_confirmation"
+      />
+      {#if errors.password_confirmation}
+        <div class="error">{errors.password_confirmation}</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 %>"
+        defaultValue={<%= singular_table_name %>.<%= attribute.column_name %> ?? ''}
+      ></textarea>
+<% elsif attribute.attachment? -%>
+      <input
+        type="file"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+      />
+<% elsif attribute.attachments? -%>
+      <input
+        type="file"
+        multiple
+        name="<%= attribute.singular_name %>[]"
+        id="<%= attribute.singular_name %>"
+      />
+<% elsif input_type(attribute) == "checkbox" -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultChecked={<%= singular_table_name %>.<%= attribute.column_name %>}
+      />
+<% else -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultValue={<%= singular_table_name %>.<%= attribute.column_name %> ?? ''}
+      />
+<% end -%>
+      {#if errors.<%= attribute.column_name %>}
+        <div class="error">{errors.<%= attribute.column_name %>}</div>
+      {/if}
+    </div>
+<% end -%>
+<% end -%>
+    <div>
+      <button type="submit" disabled={processing}>{submitText}</button>
+    </div>
+  {/snippet}
+</Form>
+
+<style>
+  label {
+    display: block;
+  }
+  .error {
+    color: red;
+  }
+</style>

data/lib/generators/inertia_templates/scaffold/templates/svelte/{Index.svelte.tt → index.svelte.tt}

@@ -1,6 +1,6 @@
 <script>
   import { Link } from '@inertiajs/svelte'
-  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+  import <%= inertia_component_name %> from './<%= singular_name %>.svelte'
 
   let { <%= plural_table_name %>, flash } = $props()
 </script>

data/lib/generators/inertia_templates/scaffold/templates/svelte/{Index.ts.svelte.tt → index.ts.svelte.tt}

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Link } from '@inertiajs/svelte'
-  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+  import <%= inertia_component_name %> from './<%= singular_name %>.svelte'
   import type { <%= inertia_model_type %> } from './types'
 
   let { <%= plural_table_name %>, flash } = $props<{

data/lib/generators/inertia_templates/scaffold/templates/svelte/{New.svelte.tt → new.svelte.tt}

@@ -1,13 +1,9 @@
 <script>
   import { Link } from '@inertiajs/svelte'
-  import Form from './Form.svelte'
 
-  let { <%= singular_table_name %> } = $props()
+  import Form from './form.svelte'
 
-  const handleSubmit = ({ form }) => {
-    form.transform((data) => ({ <%= singular_table_name %>: data }))
-    form.post('<%= js_resources_path %>')
-  }
+  let { <%= singular_table_name %> } = $props()
 </script>
 
 <svelte:head>
@@ -19,7 +15,8 @@
 <Form
   {<%= singular_table_name %>}
   submitText="Create <%= human_name %>"
-  onSubmit={handleSubmit}
+  action="<%= js_resource_path %>"
+  method="post"
 />
 
 <br />

data/lib/generators/inertia_templates/scaffold/templates/{svelte4/New.svelte.tt → svelte/new.ts.svelte.tt}

@@ -1,14 +1,10 @@
-<script>
+<script lang="ts">
   import { Link } from '@inertiajs/svelte'
-  import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  import type { <%= inertia_model_type %> } from './types'
+  import Form from './form.svelte'
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
-    form.transform((data) => ({ <%= singular_table_name %>: data }))
-    form.post('<%= js_resources_path %>')
-  }
+  let { <%= singular_table_name %> } = $props<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
 </script>
 
 <svelte:head>
@@ -20,7 +16,8 @@
 <Form
   {<%= singular_table_name %>}
   submitText="Create <%= human_name %>"
-  on:submit={handleSubmit}
+  action="<%= js_resource_path %>"
+  method="post"
 />
 
 <br />

data/lib/generators/inertia_templates/scaffold/templates/svelte/{Show.svelte.tt → show.svelte.tt}

@@ -1,6 +1,6 @@
 <script>
   import { Link } from '@inertiajs/svelte'
-  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+  import <%= inertia_component_name %> from './<%= singular_name %>.svelte'
 
   let { <%= singular_table_name %>, flash } = $props()
 </script>

data/lib/generators/inertia_templates/scaffold/templates/svelte/{Show.ts.svelte.tt → show.ts.svelte.tt}

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Link } from '@inertiajs/svelte'
-  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+  import <%= inertia_component_name %> from './<%= singular_name %>.svelte'
   import type { <%= inertia_model_type %> } from './types'
 
   let { <%= singular_table_name %>, flash } = $props<{

data/lib/generators/inertia_templates/scaffold/templates/vue/{Edit.ts.vue.tt → edit.ts.vue.tt}

@@ -6,7 +6,13 @@
   <Form
     :<%= singular_table_name %>="<%= singular_table_name %>"
     submitText="Update <%= human_name %>"
-    @onSubmit="handleSubmit"
+    :action="`<%= js_resource_path %>`"
+<% if attributes.any?(&:attachments?) -%>
+    method="post"
+    :headers="{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }"
+<% else -%>
+    method="patch"
+<% end -%>
   />
 
   <br />
@@ -18,20 +24,10 @@
 </template>
 
 <script setup lang="ts">
-import { Head, InertiaForm, Link } from '@inertiajs/vue3'
-import Form from './Form.vue'
-import { <%= inertia_model_form_type %>, <%= inertia_model_type %> } from './types'
+import { Head, Link } from '@inertiajs/vue3'
 
-const { <%= singular_table_name %> } = defineProps<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
+import Form from './form.vue'
+import type { <%= inertia_model_type %> } from './types'
 
-const handleSubmit = (form: InertiaForm<<%= inertia_model_form_type %>>) => {
-  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 -%>
-}
+const { <%= singular_table_name %> } = defineProps<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
 </script>

data/lib/generators/inertia_templates/scaffold/templates/vue/{Edit.vue.tt → edit.vue.tt}

@@ -6,7 +6,13 @@
   <Form
     :<%= singular_table_name %>="<%= singular_table_name %>"
     submitText="Update <%= human_name %>"
-    @onSubmit="handleSubmit"
+    :action="`<%= js_resource_path %>`"
+<% if attributes.any?(&:attachments?) -%>
+    method="post"
+    :headers="{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }"
+<% else -%>
+    method="patch"
+<% end -%>
   />
 
   <br />
@@ -19,18 +25,8 @@
 
 <script setup>
 import { Head, Link } from '@inertiajs/vue3'
-import Form from './Form.vue'
 
-const { <%= singular_table_name %> } = defineProps(['<%= singular_table_name %>'])
+import Form from './form.vue'
 
-const handleSubmit = (form) => {
-  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 -%>
-}
+const { <%= singular_table_name %> } = defineProps(['<%= singular_table_name %>'])
 </script>

data/lib/generators/inertia_templates/scaffold/templates/vue/form.ts.vue.tt

@@ -0,0 +1,102 @@
+<template>
+  <Form
+    :transform="data => ({ <%= singular_table_name %>: data })"
+    v-slot="{ processing, errors }"
+    v-bind="$attrs"
+  >
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div>
+      <label class="label" for="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+      />
+      <div v-if="errors.password" class="error">
+        {{ errors.password }}
+      </div>
+    </div>
+
+    <div>
+      <label class="label" for="password_confirmation">
+        Password confirmation
+      </label>
+      <input
+        type="password"
+        name="password_confirmation"
+        id="password_confirmation"
+      />
+      <div v-if="errors.password_confirmation" class="error">
+        {{ errors.password_confirmation }}
+      </div>
+    </div>
+<% else -%>
+    <div>
+      <label class="label" for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+      <textarea
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        :value="<%= singular_table_name %>.<%= attribute.column_name %>"
+      />
+<% elsif attribute.attachment? -%>
+      <input
+        type="file"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+      />
+<% elsif attribute.attachments? -%>
+      <input
+        type="file"
+        multiple
+        name="<%= attribute.singular_name %>[]"
+        id="<%= attribute.singular_name %>"
+      />
+<% elsif input_type(attribute) == "checkbox" -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        :checked="<%= singular_table_name %>.<%= attribute.column_name %>"
+      />
+<% else -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        :value="<%= singular_table_name %>.<%= attribute.column_name %>"
+      />
+<% end -%>
+      <div v-if="errors.<%= attribute.column_name %>" class="error">
+        {{ errors.<%= attribute.column_name %> }}
+      </div>
+    </div>
+<% end -%>
+<% end -%>
+    <div>
+      <button type="submit" :disabled="processing">
+        {{ submitText }}
+      </button>
+    </div>
+  </Form>
+</template>
+
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+import { <%= inertia_model_type %> } from './types'
+
+const { <%= singular_table_name %>, submitText } = defineProps<{
+  <%= singular_table_name %>: <%= inertia_model_type %>
+  submitText: string
+}>()
+</script>
+
+<style scoped>
+.label {
+  display: block;
+}
+.error {
+  color: red;
+}
+</style>

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

@@ -0,0 +1,98 @@
+<template>
+  <Form
+    :transform="data => ({ <%= singular_table_name %>: data })"
+    v-slot="{ processing, errors }"
+    v-bind="$attrs"
+  >
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div>
+      <label class="label" for="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+      />
+      <div v-if="errors.password" class="error">
+        {{ errors.password.join(', ') }}
+      </div>
+    </div>
+
+    <div>
+      <label class="label" for="password_confirmation">
+        Password confirmation
+      </label>
+      <input
+        type="password"
+        name="password_confirmation"
+        id="password_confirmation"
+      />
+      <div v-if="errors.password_confirmation" class="error">
+        {{ errors.password_confirmation.join(', ') }}
+      </div>
+    </div>
+<% else -%>
+    <div>
+      <label class="label" for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+      <textarea
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        :value="<%= singular_table_name %>.<%= attribute.column_name %>"
+      />
+<% elsif attribute.attachment? -%>
+      <input
+        type="file"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+      />
+<% elsif attribute.attachments? -%>
+      <input
+        type="file"
+        multiple
+        name="<%= attribute.singular_name %>[]"
+        id="<%= attribute.singular_name %>"
+      />
+<% elsif input_type(attribute) == "checkbox" -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        :checked="<%= singular_table_name %>.<%= attribute.column_name %>"
+      />
+<% else -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        :value="<%= singular_table_name %>.<%= attribute.column_name %>"
+      />
+<% end -%>
+      <div v-if="errors.<%= attribute.column_name %>" class="error">
+        {{ errors.<%= attribute.column_name %>.join(', ') }}
+      </div>
+    </div>
+<% end -%>
+<% end -%>
+    <div>
+      <button type="submit" :disabled="processing">
+        {{ submitText }}
+      </button>
+    </div>
+  </Form>
+</template>
+
+<script setup>
+import { Form } from '@inertiajs/vue3'
+
+const { <%= singular_table_name %>, submitText } = defineProps(['<%= singular_table_name %>', 'submitText'])
+</script>
+
+<style scoped>
+.label {
+  display: block;
+}
+.error {
+  color: red;
+}
+</style>

data/lib/generators/inertia_templates/scaffold/templates/vue/{Index.ts.vue.tt → index.ts.vue.tt}

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>.vue'
+import <%= inertia_component_name %> from './<%= singular_name %>.vue'
 import { <%= inertia_model_type %> } from './types'
 
 const { <%= plural_table_name %>, flash } = defineProps<{

data/lib/generators/inertia_templates/scaffold/templates/vue/{Index.vue.tt → index.vue.tt}

@@ -19,7 +19,7 @@
 
 <script setup>
 import { Head, Link } from '@inertiajs/vue3'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>.vue'
+import <%= inertia_component_name %> from './<%= singular_name %>.vue'
 
 const { <%= plural_table_name %>, flash } = defineProps(['<%= plural_table_name %>', 'flash'])
 </script>

data/lib/generators/inertia_templates/scaffold/templates/vue/{New.ts.vue.tt → new.ts.vue.tt}

@@ -6,7 +6,8 @@
   <Form
     :<%= singular_table_name %>="<%= singular_table_name %>"
     submitText="Create <%= human_name %>"
-    @onSubmit="handleSubmit"
+    action="<%= js_resources_path %>"
+    method="post"
   />
 
   <br />
@@ -17,14 +18,10 @@
 </template>
 
 <script setup lang="ts">
-import { Head, InertiaForm, Link } from '@inertiajs/vue3'
-import Form from './Form.vue'
-import { <%= inertia_model_form_type %>, <%= inertia_model_type %> } from './types'
+import { Head, Link } from '@inertiajs/vue3'
 
-const { <%= singular_table_name %> } = defineProps<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
+import Form from './form.vue'
+import type { <%= inertia_model_type %> } from './types'
 
-const handleSubmit = (form: InertiaForm<<%= inertia_model_form_type %>>) => {
-  form.transform((data) => ({ <%= singular_table_name %>: data }))
-  form.post('<%= js_resources_path %>')
-}
+const { <%= singular_table_name %> } = defineProps<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
 </script>

data/lib/generators/inertia_templates/scaffold/templates/vue/{New.vue.tt → new.vue.tt}

@@ -6,7 +6,8 @@
   <Form
     :<%= singular_table_name %>="<%= singular_table_name %>"
     submitText="Create <%= human_name %>"
-    @onSubmit="handleSubmit"
+    action="<%= js_resources_path %>"
+    method="post"
   />
 
   <br />
@@ -18,12 +19,8 @@
 
 <script setup>
 import { Head, Link } from '@inertiajs/vue3'
-import Form from './Form.vue'
 
-const { <%= singular_table_name %> } = defineProps(['<%= singular_table_name %>'])
+import Form from './form.vue'
 
-const handleSubmit = (form) => {
-  form.transform((data) => ({ <%= singular_table_name %>: data }))
-  form.post('<%= js_resources_path %>')
-}
+const { <%= singular_table_name %> } = defineProps(['<%= singular_table_name %>'])
 </script>

data/lib/generators/inertia_templates/scaffold/templates/vue/{Show.ts.vue.tt → show.ts.vue.tt}

@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>.vue'
+import <%= inertia_component_name %> from './<%= singular_name %>.vue'
 import { <%= inertia_model_type %> } from './types'
 
 const { <%= singular_table_name %>, flash } = defineProps<{

data/lib/generators/inertia_templates/scaffold/templates/vue/{Show.vue.tt → show.vue.tt}

@@ -25,7 +25,7 @@
 
 <script setup>
 import { Head, Link } from '@inertiajs/vue3'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>.vue'
+import <%= inertia_component_name %> from './<%= singular_name %>.vue'
 
 const { <%= singular_table_name %>, flash } = defineProps(['<%= singular_table_name %>', 'flash'])
 </script>