Transition Inertia Vue stubs to <script setup> syntax (#127)

* Transition to <script setup>

* update inertia version

* Fix autofocus of Input component

* use value property

Co-authored-by: Taylor Otwell <taylor@laravel.com>

stubs/inertia-vue/resources/js/Components/Button.vue

@@ -1,16 +1,14 @@
+<script setup>
+defineProps({
+    type: {
+        type: String,
+        default: 'submit',
+    },
+});
+</script>
+
 <template>
     <button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150">
         <slot />
     </button>
 </template>
-
-<script>
-export default {
-    props: {
-        type: {
-            type: String,
-            default: 'submit',
-        },
-    }
-}
-</script>

stubs/inertia-vue/resources/js/Components/Checkbox.vue

@@ -1,32 +1,30 @@
-<template>
-    <input type="checkbox" :value="value" v-model="proxyChecked"
-           class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
-</template>
+<script setup>
+import { computed } from 'vue';
 
-<script>
-export default {
-    emits: ['update:checked'],
+const emit = defineEmits(['update:checked']);
 
-    props: {
-        checked: {
-            type: [Array, Boolean],
-            default: false,
-        },
-        value: {
-            default: null,
-        },
+const props = defineProps({
+    checked: {
+        type: [Array, Boolean],
+        default: false,
+    },
+    value: {
+        default: null,
     },
+});
 
-    computed: {
-        proxyChecked: {
-            get() {
-                return this.checked;
-            },
+const proxyChecked = computed({
+    get() {
+        return props.checked;
+    },
 
-            set(val) {
-                this.$emit("update:checked", val);
-            },
-        },
+    set(val) {
+        emit("update:checked", val);
     },
-}
+});
 </script>
+
+<template>
+    <input type="checkbox" :value="value" v-model="proxyChecked"
+           class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+</template>

stubs/inertia-vue/resources/js/Components/Dropdown.vue

@@ -1,3 +1,46 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+    align: {
+        default: 'right'
+    },
+    width: {
+        default: '48'
+    },
+    contentClasses: {
+        default: () => ['py-1', 'bg-white']
+    }
+});
+
+const closeOnEscape = (e) => {
+    if (open.value && e.key === 'Escape') {
+        open.value = false;
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+
+const widthClass = computed(() => {
+    return {
+        '48': 'w-48',
+    }[props.width.toString()];
+});
+
+const alignmentClasses = computed(() => {
+    if (props.align === 'left') {
+        return 'origin-top-left left-0';
+    } else if (props.align === 'right') {
+        return 'origin-top-right right-0';
+    } else {
+        return 'origin-top';
+    }
+});
+
+const open = ref(false);
+</script>
+
 <template>
     <div class="relative">
         <div @click="open = ! open">
@@ -26,56 +69,3 @@
         </transition>
     </div>
 </template>
-
-<script>
-import { onMounted, onUnmounted, ref } from 'vue'
-
-export default {
-    props: {
-        align: {
-            default: 'right'
-        },
-        width: {
-            default: '48'
-        },
-        contentClasses: {
-            default: () => ['py-1', 'bg-white']
-        }
-    },
-
-    setup() {
-        let open = ref(false)
-
-        const closeOnEscape = (e) => {
-            if (open.value && e.key === 'Escape') {
-                open.value = false
-            }
-        }
-
-        onMounted(() => document.addEventListener('keydown', closeOnEscape))
-        onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
-
-        return {
-            open,
-        }
-    },
-
-    computed: {
-        widthClass() {
-            return {
-                '48': 'w-48',
-            }[this.width.toString()]
-        },
-
-        alignmentClasses() {
-            if (this.align === 'left') {
-                return 'origin-top-left left-0'
-            } else if (this.align === 'right') {
-                return 'origin-top-right right-0'
-            } else {
-                return 'origin-top'
-            }
-        },
-    }
-}
-</script>

stubs/inertia-vue/resources/js/Components/DropdownLink.vue

@@ -1,15 +1,9 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3';
+</script>
+
 <template>
     <Link class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">
         <slot />
     </Link>
 </template>
-
-<script>
-import { Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-        Link,
-    }
-}
-</script>

stubs/inertia-vue/resources/js/Components/Input.vue

@@ -1,17 +1,19 @@
-<template>
-    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input">
-</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+
+defineProps(['modelValue']);
 
-<script>
-export default {
-    props: ['modelValue'],
+defineEmits(['update:modelValue']);
 
-    emits: ['update:modelValue'],
+const input = ref(null);
 
-    methods: {
-        focus() {
-            this.$refs.input.focus()
-        }
+onMounted(() => {
+    if (input.value.hasAttribute('autofocus')) {
+        input.value.focus();
     }
-}
+});
 </script>
+
+<template>
+    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input">
+</template>

stubs/inertia-vue/resources/js/Components/InputError.vue

@@ -1,13 +1,11 @@
+<script setup>
+defineProps(['message']);
+</script>
+
 <template>
     <div v-show="message">
         <p class="text-sm text-red-600">
             {{ message }}
         </p>
     </div>
 </template>
-
-<script>
-export default {
-    props: ['message']
-}
-</script>

stubs/inertia-vue/resources/js/Components/Label.vue

@@ -1,12 +1,10 @@
+<script setup>
+defineProps(['value']);
+</script>
+
 <template>
     <label class="block font-medium text-sm text-gray-700">
         <span v-if="value">{{ value }}</span>
         <span v-else><slot /></span>
     </label>
 </template>
-
-<script>
-export default {
-    props: ['value']
-}
-</script>

stubs/inertia-vue/resources/js/Components/NavLink.vue

@@ -1,25 +1,17 @@
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/inertia-vue3';
+
+const props = defineProps(['href', 'active']);
+
+const classes = computed(() => props.active
+    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition  duration-150 ease-in-out'
+    : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out'
+);
+</script>
+
 <template>
     <Link :href="href" :class="classes">
         <slot />
     </Link>
 </template>
-
-<script>
-import { Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-        Link,
-    },
-
-    props: ['href', 'active'],
-
-    computed: {
-        classes() {
-            return this.active
-                ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition  duration-150 ease-in-out'
-                : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out'
-        }
-    }
-}
-</script>

stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue

@@ -1,25 +1,17 @@
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/inertia-vue3';
+
+const props = defineProps(['href', 'active']);
+
+const classes = computed(() => props.active
+    ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
+    : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
+);
+</script>
+
 <template>
     <Link :href="href" :class="classes">
         <slot />
     </Link>
 </template>
-
-<script>
-import { Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-        Link,
-    },
-
-    props: ['href', 'active'],
-
-    computed: {
-        classes() {
-            return this.active
-                ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
-                : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
-        }
-    }
-}
-</script>

stubs/inertia-vue/resources/js/Components/ValidationErrors.vue

@@ -1,3 +1,12 @@
+<script setup>
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/inertia-vue3';
+
+const errors = computed(() => usePage().props.value.errors);
+
+const hasErrors = computed(() => Object.keys(errors.value).length > 0);
+</script>
+
 <template>
     <div v-if="hasErrors">
         <div class="font-medium text-red-600">Whoops! Something went wrong.</div>
@@ -7,17 +16,3 @@
         </ul>
     </div>
 </template>
-
-<script>
-export default {
-    computed: {
-        errors() {
-            return this.$page.props.errors
-        },
-
-        hasErrors() {
-            return Object.keys(this.errors).length > 0
-        },
-    }
-}
-</script>