[2.x] Change Inertia Stubs to Composition API

[xiCO2k]

This PR introduces the Composition API to the stubs of Inertia.

I will be using Jetstream with Inertia for a small project and I will be upgrading the inertia stubs to Composition API on my own project, so I will be able to PR all the changes from options API to composition API.

Do you guys think it will be a good option to have by default?

Thanks.

[taylorotwell]

I think it's a good idea but we would want to do the whole thing at once instead of just one page. Breeze is already using Composition API with script setup so it makes sense to move Jetstream to it as well.

In Breeze I believe we also moved the script section above template.

[xiCO2k]

Will do that, and check breeze code to match the same style.

Thanks

[xiCO2k]

Should be ready.

[taylorotwell]

@xiCO2k One small bug I have noticed so far is if you attempt to enable two factor authentication (or any other action which requires password confirmation), the password confirmation modal's password input does not receive focus automatically anymore - so you have to manually click on it.

[taylorotwell]

@xiCO2k there are also some merge conflicts because we recently added confirmation support to the 2FA screen.

[xiCO2k]

got it will take a look on it

[taylorotwell]

Marking as draft for now - just mark as ready when you want me to take a look again.

[xiCO2k]

Ok should be good.

[taylorotwell]

@xiCO2k did you use any specific formatter / prettier plugin to format the Vue files in terms of how HTML attributes like type and id are ordered?

[xiCO2k]

@taylorotwell used this .eslintrc.js:

module.exports = {
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
    ],
    ignorePatterns: ['node_modules/**/*', 'vendor/**/*', 'public/**/*'],
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
    },
    plugins: [
        'vue',
    ],
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
    rules: {
        indent: ['error', 4],
        quotes: ['warn', 'single'],
        semi: ['warn'],
        'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
        'comma-dangle': ['warn', 'always-multiline'],
        'vue/html-indent': ['error', 4],
        'vue/multi-word-component-names': ['off'],
        'vue/require-default-prop': ['off'],
        'vue/max-attributes-per-line': ['error', {
            singleline: { max: 3 },
        }],
    },
    globals: {
        route: 'readonly',
        axios: 'readonly',
        defineProps: 'readonly',
        defineEmits: 'readonly',
    },
};

[taylorotwell]

@xiCO2k

If I click "Enable" on two factor authentication it still doesn't seem to focus on the password box:

[xiCO2k]

sorry fixed on other area.

[xiCO2k]

should be good.

[taylorotwell]

@xiCO2k What is ^=?

[xiCO2k]

I also did not know that one (was there before) but looks like it works like a toggle, if the value is 1 the ^= changes to 0 and if is 0 it changes to 1.

[taylorotwell]

Gotcha

[lupinitylabs]

It's a bitwise XOR assignment operator, works in PHP as well.