inertia_rails 3.4.0 → 3.5.0

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

@@ -0,0 +1,33 @@
+<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>
+
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  <h1 class="font-bold text-4xl">New <%= human_name.downcase %></h1>
+
+  <Form
+    {<%= singular_table_name %>}
+    submitText="Create <%= human_name %>"
+    on:submit={handleSubmit}
+  />
+
+  <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>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Link, type InertiaForm } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+  import type { <%= inertia_model_type %>, <%= inertia_model_form_type %> } from './types'
+
+  export let <%= singular_table_name %>: <%= inertia_model_type %>
+
+  const handleSubmit = (e: CustomEvent<{ form: InertiaForm<<%= inertia_model_form_type %>> }>) => {
+    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>
+
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  <h1 class="font-bold text-4xl">New <%= human_name.downcase %></h1>
+
+  <Form
+    {<%= singular_table_name %>}
+    submitText="Create <%= human_name %>"
+    on:submit={handleSubmit}
+  />
+
+  <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>

data/lib/generators/inertia_tw_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 class="my-5">
+    <strong class="block font-medium mb-1"><%= 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_tw_templates/scaffold/templates/svelte4/One.ts.svelte.tt

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { <%= inertia_model_type %> } from './types'
+
+  export let <%= singular_table_name %>: <%= inertia_model_type %>
+</script>
+
+<div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <p class="my-5">
+    <strong class="block font-medium mb-1"><%= 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_tw_templates/scaffold/templates/svelte4/Show.svelte.tt

@@ -0,0 +1,51 @@
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+
+  export let <%= singular_table_name %>
+  export let flash
+</script>
+
+<svelte:head>
+  <title><%= human_name %> #{<%= singular_table_name %>.id}</title>
+</svelte:head>
+
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  <div class="mx-auto">
+    {#if flash.notice}
+      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
+        {flash.notice}
+      </p>
+    {/if}
+
+    <h1 class="font-bold text-4xl"><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+
+    <<%= inertia_component_name %> {<%= singular_table_name %>} />
+
+    <Link
+      href={`<%= js_edit_resource_path %>`}
+      class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+    >
+      Edit 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 class="inline-block ml-2">
+      <button
+        use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
+        type="button"
+        class="mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium"
+      >
+        Destroy this <%= human_name.downcase %>
+      </button>
+    </div>
+  </div>
+</div>
+
+
+
+

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { inertia, Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+  import type { <%= inertia_model_type %> } from './types'
+
+  export let <%= singular_table_name %>: <%= inertia_model_type %>
+  export let flash: { notice?: string }
+</script>
+
+<svelte:head>
+  <title><%= human_name %> #{<%= singular_table_name %>.id}</title>
+</svelte:head>
+
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  <div class="mx-auto">
+    {#if flash.notice}
+      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
+        {flash.notice}
+      </p>
+    {/if}
+
+    <h1 class="font-bold text-4xl"><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+
+    <<%= inertia_component_name %> {<%= singular_table_name %>} />
+
+    <Link
+      href={`<%= js_edit_resource_path %>`}
+      class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+    >
+      Edit 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 class="inline-block ml-2">
+      <button
+        use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
+        type="button"
+        class="mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium"
+      >
+        Destroy this <%= human_name.downcase %>
+      </button>
+    </div>
+  </div>
+</div>
+
+
+
+

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/types.ts.tt

@@ -0,0 +1,19 @@
+export interface <%= inertia_model_type %> {
+  id: number
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <%= attribute.column_name %>: <%= ts_type(attribute) %>
+<% end -%>
+}
+
+export type <%= inertia_model_form_type %> = Omit<<%= inertia_model_type %>, <%= omit_input_attributes.map { |a| "'#{a}'" }.join(' | ') %>><% if custom_form_attributes.any? -%> & {
+<% custom_form_attributes.map do |attribute| -%>
+<% if attribute.password_digest? -%>
+  password: string
+  password_confirmation: string
+<% elsif attribute.attachment? -%>
+  <%= attribute.column_name %>?: File
+<% elsif attribute.attachments? -%>
+  <%= attribute.column_name %>?: File[]
+<% end -%>
+<% end -%>
+}<% end %>

data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Edit.ts.vue.tt

@@ -0,0 +1,45 @@
+<template>
+  <Head title="Editing <%= human_name.downcase %>" />
+
+  <div className="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 %>="<%= singular_table_name %>"
+      submitText="Update <%= human_name %>"
+      @onSubmit="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>
+</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'
+
+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

@@ -0,0 +1,44 @@
+<template>
+  <Head title="Editing <%= human_name.downcase %>" />
+
+  <div className="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 %>="<%= singular_table_name %>"
+      submitText="Update <%= human_name %>"
+      @onSubmit="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>
+</template>
+
+<script setup>
+import { Head, Link } from '@inertiajs/vue3'
+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

@@ -0,0 +1,134 @@
+<template>
+  <form @submit.prevent="emit('onSubmit', form)" class="contents">
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div class="my-5">
+      <label for="password">Password</label>
+      <input
+        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"
+        class="text-red-500 px-3 py-2 font-medium"
+      >
+        {{ form.errors.password }}
+      </div>
+    </div>
+
+    <div class="my-5">
+      <label for="password_confirmation">Password confirmation</label>
+      <input
+        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"
+        class="text-red-500 px-3 py-2 font-medium"
+      >
+        {{ form.errors.password_confirmation }}
+      </div>
+    </div>
+<% else -%>
+    <div class="my-5">
+      <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+      <textarea
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        v-model="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"
+      />
+<% elsif attribute.attachment? -%>
+      <input
+        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? -%>
+      <input
+        type="file"
+        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" -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        v-model="form.<%= attribute.column_name %>"
+        class="block mt-2 h-5 w-5"
+      />
+<% else -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        v-model="form.<%= 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>
+    </div>
+<% end -%>
+
+<% end -%>
+    <div class="inline">
+      <button
+        type="submit"
+        :disabled="form.processing"
+        class="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
+      >
+        {{ submitText }}
+      </button>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { InertiaForm, useForm } from '@inertiajs/vue3'
+import { <%= inertia_model_form_type %>, <%= 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

@@ -0,0 +1,127 @@
+<template>
+  <form @submit.prevent="emit('onSubmit', form)" class="contents">
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div class="my-5">
+      <label for="password">Password</label>
+      <input
+        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"
+        class="text-red-500 px-3 py-2 font-medium"
+      >
+        {{ form.errors.password.join(', ') }}
+      </div>
+    </div>
+
+    <div class="my-5">
+      <label for="password_confirmation">Password confirmation</label>
+      <input
+        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"
+        class="text-red-500 px-3 py-2 font-medium"
+      >
+        {{ form.errors.password_confirmation.join(', ') }}
+      </div>
+    </div>
+<% else -%>
+    <div class="my-5">
+      <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+      <textarea
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        v-model="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"
+      />
+<% elsif attribute.attachment? -%>
+      <input
+        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? -%>
+      <input
+        type="file"
+        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" -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        v-model="form.<%= attribute.column_name %>"
+        class="block mt-2 h-5 w-5"
+      />
+<% else -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        v-model="form.<%= 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>
+    </div>
+<% end -%>
+
+<% end -%>
+    <div class="inline">
+      <button
+        type="submit"
+        :disabled="form.processing"
+        class="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
+      >
+        {{ submitText }}
+      </button>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { useForm } 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

@@ -0,0 +1,47 @@
+<template>
+  <Head title="<%= human_name.pluralize %>" />
+
+  <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+    <p
+      v-if="flash.notice"
+      class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block"
+    >
+      {{ flash.notice }}
+    </p>
+
+    <div class="flex justify-between items-center">
+      <h1 class="font-bold text-4xl"><%= human_name.pluralize %></h1>
+      <Link
+        href="<%= js_new_resource_path %>"
+        class="rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium"
+      >
+        New <%= human_name.downcase %>
+      </Link>
+    </div>
+
+    <div class="min-w-full">
+      <template v-for="<%= singular_table_name %> in <%= plural_table_name %>" :key="<%= singular_table_name %>.id">
+        <<%= inertia_component_name %> :<%= singular_table_name %>="<%= singular_table_name %>" />
+        <p>
+          <Link
+            :href="`<%= js_resource_path %>`"
+            class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+          >
+            Show this <%= human_name.downcase %>
+          </Link>
+        </p>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>.vue'
+import { <%= inertia_model_type %> } from './types'
+
+const { <%= plural_table_name %>, flash } = defineProps<{
+  <%= plural_table_name %>: <%= inertia_model_type %>[]
+  flash: { notice?: string }
+}>()
+</script>