inertia_rails 3.12.1 → 3.13.0

data/lib/generators/inertia_tw_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_tw_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_tw_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>
@@ -21,6 +17,8 @@
     {<%= singular_table_name %>}
     submitText="Create <%= human_name %>"
     onSubmit={handleSubmit}
+    action="<%= js_resource_path %>"
+    method="post"
   />
 
   <Link

data/lib/generators/inertia_tw_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>
@@ -21,7 +17,8 @@
   <Form
     {<%= singular_table_name %>}
     submitText="Create <%= human_name %>"
-    on:submit={handleSubmit}
+    action="<%= js_resource_path %>"
+    method="post"
   />
 
   <Link

data/lib/generators/inertia_tw_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_tw_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_tw_templates/scaffold/templates/vue/{Edit.ts.vue.tt → edit.ts.vue.tt}

@@ -7,7 +7,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 -%>
     />
 
     <Link
@@ -26,20 +32,9 @@
 </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'
+import Form from './form.vue'
+import type { <%= inertia_model_type %> } from './types'
 
 const { <%= singular_table_name %> } = defineProps<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
-
-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 -%>
-}
 </script>

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

@@ -7,7 +7,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 -%>
     />
 
     <Link
@@ -27,18 +33,7 @@
 
 <script setup>
 import { Head, Link } from '@inertiajs/vue3'
-import Form from './Form.vue'
+import Form from './form.vue'
 
 const { <%= singular_table_name %> } = defineProps(['<%= singular_table_name %>'])
-
-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 -%>
-}
 </script>

data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Form.ts.vue.tt → form.ts.vue.tt}

@@ -1,5 +1,10 @@
 <template>
-  <form @submit.prevent="emit('onSubmit', form)" class="contents">
+  <Form
+    class="contents"
+    :transform="data => ({ <%= singular_table_name %>: data })"
+    v-slot="{ processing, errors }"
+    v-bind="$attrs"
+  >
 <% attributes.each do |attribute| -%>
 <% if attribute.password_digest? -%>
     <div class="my-5">
@@ -8,14 +13,13 @@
         type="password"
         name="password"
         id="password"
-        v-model="form.password"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
       <div
-        v-if="form.errors.password"
+        v-if="errors.password"
         class="text-red-500 px-3 py-2 font-medium"
       >
-        {{ form.errors.password }}
+        {{ errors.password }}
       </div>
     </div>
 
@@ -25,14 +29,13 @@
         type="password"
         name="password_confirmation"
         id="password_confirmation"
-        v-model="form.password_confirmation"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
       <div
-        v-if="form.errors.password_confirmation"
+        v-if="errors.password_confirmation"
         class="text-red-500 px-3 py-2 font-medium"
       >
-        {{ form.errors.password_confirmation }}
+        {{ errors.password_confirmation }}
       </div>
     </div>
 <% else -%>
@@ -42,7 +45,7 @@
       <textarea
         name="<%= attribute.singular_name %>"
         id="<%= attribute.singular_name %>"
-        v-model="form.<%= attribute.column_name %>"
+        :value="<%= singular_table_name %>.<%= attribute.column_name %>"
         rows="4"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
@@ -51,7 +54,6 @@
         type="file"
         name="<%= attribute.singular_name %>"
         id="<%= attribute.singular_name %>"
-        @input="form.<%= attribute.column_name %> = (($event.target as HTMLInputElement).files || [])[0]"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
 <% elsif attribute.attachments? -%>
@@ -60,7 +62,6 @@
         multiple
         name="<%= attribute.singular_name %>[]"
         id="<%= attribute.singular_name %>"
-        @input="form.<%= attribute.column_name %> = Array.from(($event.target as HTMLInputElement).files || [])"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
 <% elsif input_type(attribute) == "checkbox" -%>
@@ -68,7 +69,7 @@
         type="<%= input_type(attribute) %>"
         name="<%= attribute.singular_name %>"
         id="<%= attribute.singular_name %>"
-        v-model="form.<%= attribute.column_name %>"
+        :checked="<%= singular_table_name %>.<%= attribute.column_name %>"
         class="block mt-2 h-5 w-5"
       />
 <% else -%>
@@ -76,12 +77,12 @@
         type="<%= input_type(attribute) %>"
         name="<%= attribute.singular_name %>"
         id="<%= attribute.singular_name %>"
-        v-model="form.<%= attribute.column_name %>"
+        :value="<%= singular_table_name %>.<%= attribute.column_name %>"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
 <% end -%>
-      <div v-if="form.errors.<%= attribute.column_name %>" :class="$style.error">
-        {{ form.errors.<%= attribute.column_name %> }}
+      <div v-if="errors.<%= attribute.column_name %>" class="text-red-500 px-3 py-2 font-medium">
+        {{ errors.<%= attribute.column_name %> }}
       </div>
     </div>
 <% end -%>
@@ -90,45 +91,21 @@
     <div class="inline">
       <button
         type="submit"
-        :disabled="form.processing"
+        :disabled="processing"
         class="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
       >
         {{ submitText }}
       </button>
     </div>
-  </form>
+  </Form>
 </template>
 
 <script setup lang="ts">
-import { InertiaForm, useForm } from '@inertiajs/vue3'
-import { <%= inertia_model_form_type %>, <%= inertia_model_type %> } from './types'
+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
 }>()
-
-const emit = defineEmits<{
-  onSubmit: [form: InertiaForm<<%= inertia_model_form_type %>>]
-}>()
-
-const form = useForm<<%= inertia_model_form_type %>>({
-<% attributes.reject { |a| a.attachment? || a.attachments? }.each do |attribute| -%>
-<% if attribute.password_digest? -%>
-  password: '',
-  password_confirmation: '',
-<% else -%>
-  <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %>,
-<% end -%>
-<% end -%>
-})
 </script>
-
-<style module>
-.label {
-  display: block;
-}
-.error {
-  color: red;
-}
-</style>

data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Form.vue.tt → form.vue.tt}

@@ -1,5 +1,10 @@
 <template>
-  <form @submit.prevent="emit('onSubmit', form)" class="contents">
+  <Form
+    class="contents"
+    :transform="data => ({ <%= singular_table_name %>: data })"
+    v-slot="{ processing, errors }"
+    v-bind="$attrs"
+  >
 <% attributes.each do |attribute| -%>
 <% if attribute.password_digest? -%>
     <div class="my-5">
@@ -8,14 +13,13 @@
         type="password"
         name="password"
         id="password"
-        v-model="form.password"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
       <div
-        v-if="form.errors.password"
+        v-if="errors.password"
         class="text-red-500 px-3 py-2 font-medium"
       >
-        {{ form.errors.password.join(', ') }}
+        {{ errors.password.join(', ') }}
       </div>
     </div>
 
@@ -25,14 +29,13 @@
         type="password"
         name="password_confirmation"
         id="password_confirmation"
-        v-model="form.password_confirmation"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
       <div
-        v-if="form.errors.password_confirmation"
+        v-if="errors.password_confirmation"
         class="text-red-500 px-3 py-2 font-medium"
       >
-        {{ form.errors.password_confirmation.join(', ') }}
+        {{ errors.password_confirmation.join(', ') }}
       </div>
     </div>
 <% else -%>
@@ -42,7 +45,7 @@
       <textarea
         name="<%= attribute.singular_name %>"
         id="<%= attribute.singular_name %>"
-        v-model="form.<%= attribute.column_name %>"
+        :value="<%= singular_table_name %>.<%= attribute.column_name %>"
         rows="4"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
@@ -51,7 +54,6 @@
         type="file"
         name="<%= attribute.singular_name %>"
         id="<%= attribute.singular_name %>"
-        @input="form.<%= attribute.column_name %> = $event.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? -%>
@@ -60,7 +62,6 @@
         multiple
         name="<%= attribute.singular_name %>[]"
         id="<%= attribute.singular_name %>"
-        @input="form.<%= attribute.column_name %> = Array.from($event.target.files)"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
 <% elsif input_type(attribute) == "checkbox" -%>
@@ -68,7 +69,7 @@
         type="<%= input_type(attribute) %>"
         name="<%= attribute.singular_name %>"
         id="<%= attribute.singular_name %>"
-        v-model="form.<%= attribute.column_name %>"
+        :checked="<%= singular_table_name %>.<%= attribute.column_name %>"
         class="block mt-2 h-5 w-5"
       />
 <% else -%>
@@ -76,12 +77,12 @@
         type="<%= input_type(attribute) %>"
         name="<%= attribute.singular_name %>"
         id="<%= attribute.singular_name %>"
-        v-model="form.<%= attribute.column_name %>"
+        :value="<%= singular_table_name %>.<%= attribute.column_name %>"
         class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
       />
 <% end -%>
-      <div v-if="form.errors.<%= attribute.column_name %>" :class="$style.error">
-        {{ form.errors.<%= attribute.column_name %>.join(', ') }}
+      <div v-if="errors.<%= attribute.column_name %>" class="text-red-500 px-3 py-2 font-medium">
+        {{ errors.<%= attribute.column_name %>.join(', ') }}
       </div>
     </div>
 <% end -%>
@@ -90,38 +91,17 @@
     <div class="inline">
       <button
         type="submit"
-        :disabled="form.processing"
+        :disabled="processing"
         class="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
       >
         {{ submitText }}
       </button>
     </div>
-  </form>
+  </Form>
 </template>
 
 <script setup>
-import { useForm } from '@inertiajs/vue3'
+import { Form } from '@inertiajs/vue3'
 
 const { <%= singular_table_name %>, submitText } = defineProps(['<%= singular_table_name %>', 'submitText'])
-const emit = defineEmits(['onSubmit'])
-
-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>
-
-<style module>
-.label {
-  display: block;
-}
-.error {
-  color: red;
-}
-</style>

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

@@ -37,7 +37,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_tw_templates/scaffold/templates/vue/{Index.vue.tt → index.vue.tt}

@@ -37,7 +37,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_tw_templates/scaffold/templates/vue/{New.ts.vue.tt → new.ts.vue.tt}

@@ -7,7 +7,8 @@
     <Form
       :<%= singular_table_name %>="<%= singular_table_name %>"
       submitText="Create <%= human_name %>"
-      @onSubmit="handleSubmit"
+      action="<%= js_resources_path %>"
+      method="post"
     />
 
     <Link
@@ -20,14 +21,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_tw_templates/scaffold/templates/vue/{New.vue.tt → new.vue.tt}

@@ -7,7 +7,8 @@
     <Form
       :<%= singular_table_name %>="<%= singular_table_name %>"
       submitText="Create <%= human_name %>"
-      @onSubmit="handleSubmit"
+      action="<%= js_resources_path %>"
+      method="post"
     />
 
     <Link
@@ -21,12 +22,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_tw_templates/scaffold/templates/vue/{Show.ts.vue.tt → show.ts.vue.tt}

@@ -43,7 +43,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_tw_templates/scaffold/templates/vue/{Show.vue.tt → show.vue.tt}

@@ -43,7 +43,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>

data/lib/inertia_rails/generators/controller_template_base.rb

@@ -50,7 +50,7 @@ module InertiaRails
         case options.frontend_framework
         when 'react' then typescript? ? 'tsx' : 'jsx'
         when 'vue' then 'vue'
-        when 'svelte', 'svelte4' then 'svelte'
+        when 'svelte' then 'svelte'
         else
           raise ArgumentError, "Unknown frontend framework: #{options.frontend_framework}"
         end

data/lib/inertia_rails/generators/helper.rb

@@ -13,8 +13,7 @@ module InertiaRails
           if dependencies['@inertiajs/react']
             'react'
           elsif dependencies['@inertiajs/svelte']
-            version = dependencies['svelte'].gsub(/[\^~]/, '') # Remove ^ or ~ from version
-            version.start_with?('5') ? 'svelte' : 'svelte4'
+            'svelte'
           elsif dependencies['@inertiajs/vue3']
             'vue'
           else
@@ -37,7 +36,7 @@ module InertiaRails
       end
 
       def inertia_base_path
-        (class_path + [file_name]).map(&:camelize).join('/')
+        (class_path + [file_name.pluralize]).join('/')
       end
 
       def inertia_component_name

data/lib/inertia_rails/generators/scaffold_template_base.rb

@@ -19,7 +19,7 @@ module InertiaRails
         end
 
         template "#{options.frontend_framework}/#{partial_name}.#{template_extension}",
-                 File.join(base_path, "#{inertia_component_name}.#{extension}")
+                 File.join(base_path, "#{singular_name}.#{extension}")
 
         template "#{options.frontend_framework}/types.ts", File.join(base_path, 'types.ts') if typescript?
       end
@@ -34,11 +34,11 @@ module InertiaRails
       end
 
       def available_views
-        %w[Index Edit Show New Form]
+        %w[index edit show new form]
       end
 
       def partial_name
-        'One'
+        'one'
       end
     end
   end

data/lib/inertia_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module InertiaRails
-  VERSION = '3.12.1'
+  VERSION = '3.13.0'
 end