[6.x] Inertia

composer.json

@@ -14,6 +14,7 @@
         "bacon/bacon-qr-code": "^3.0",
         "composer/semver": "^3.4",
         "guzzlehttp/guzzle": "^6.3 || ^7.0",
+        "inertiajs/inertia-laravel": "^2.0",
         "james-heinrich/getid3": "^1.9.21",
         "laravel/framework": "^11.34 || ^12.0",
         "laravel/prompts": "^0.3.0",

package.json

@@ -19,10 +19,10 @@
     "@floating-ui/dom": "^1.6.0",
     "@he-tree/vue": "^2.10.0-beta.2",
     "@hoppscotch/vue-toasted": "^0.1.0",
+    "@inertiajs/vue3": "^2.1.11",
     "@internationalized/date": "^3.7.0",
     "@shopify/draggable": "^1.0.0-beta.12",
     "@tiptap/core": "^3.0.0",
-    "@tiptap/extensions": "^3.0.0",
     "@tiptap/extension-blockquote": "^3.0.0",
     "@tiptap/extension-bold": "^3.0.0",
     "@tiptap/extension-bullet-list": "^3.0.0",
@@ -48,6 +48,7 @@
     "@tiptap/extension-text-align": "^3.0.0",
     "@tiptap/extension-typography": "^3.0.0",
     "@tiptap/extension-underline": "^3.0.0",
+    "@tiptap/extensions": "^3.0.0",
     "@tiptap/pm": "^3.0.0",
     "@tiptap/vue-3": "^3.0.0",
     "alpinejs": "^3.1.1",

packages/cms/src/ui.js

@@ -25,6 +25,7 @@ export const {
     DatePicker,
     DateRangePicker,
     Description,
+    DocsCallout,
     DragHandle,
     Drawer,
     Dropdown,

packages/ui/src/Badge.vue

@@ -3,12 +3,14 @@ import { computed, useSlots } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import Icon from './Icon/Icon.vue';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
     append: { type: [String, Number, Boolean, null], default: null },
     as: { type: String, default: 'div' },
     color: { type: String, default: 'default' },
     href: { type: String, default: null },
+    target: { type: String, default: null },
     icon: { type: String, default: null },
     iconAppend: { type: String, default: null },
     pill: { type: Boolean, default: false },
@@ -21,7 +23,12 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
-const tag = computed(() => (props.href ? 'a' : props.as));
+const tag = computed(() => {
+    if (props.href) {
+        return props.target === '_blank' ? 'a' : Link;
+    }
+    return props.as;
+});
 
 const badgeClasses = computed(() => {
     const classes = cva({
@@ -71,7 +78,7 @@ const badgeClasses = computed(() => {
 </script>
 
 <template>
-    <component :is="tag" :class="badgeClasses" :href="props.href" data-ui-badge>
+    <component :is="tag" :class="badgeClasses" :href="props.href" :target="target" data-ui-badge>
         <span v-if="props.prepend" class="font-medium border-e border-inherit pe-2">{{ prepend }}</span>
         <Icon v-if="icon" :name="icon" />
         <slot v-if="hasDefaultSlot" />

packages/ui/src/Button/Button.vue

@@ -3,6 +3,7 @@ import { computed, useSlots } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import Icon from '../Icon/Icon.vue';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
     as: { type: String, default: 'button' },
@@ -21,7 +22,12 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
-const tag = computed(() => (props.href ? 'a' : props.as));
+const tag = computed(() => {
+    if (props.href) {
+        return props.target === '_blank' ? 'a' : Link;
+    }
+    return props.as;
+});
 const iconOnly = computed(() => (props.icon && !hasDefaultSlot && !props.text) || props.iconOnly);
 
 const buttonClasses = computed(() => {

packages/ui/src/Dropdown/Item.vue

@@ -1,10 +1,12 @@
 <script setup>
 import { DropdownMenuItem } from 'reka-ui';
-import { useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 import Icon from '../Icon/Icon.vue';
 import { cva } from 'cva';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
+    as: { type: String, default: null },
     href: { type: String, default: null },
     target: { type: String, default: '_self' },
     icon: { type: String, default: null },
@@ -14,6 +16,11 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
+const tag = computed(() => {
+    if (props.as) return props.as;
+    if (! props.href) return 'div';
+    return props.target === '_blank' ? 'a' : Link;
+});
 
 const classes = cva({
     base: 'col-span-2 grid grid-cols-subgrid items-center rounded-lg px-1 py-1.5 text-sm antialiased text-gray-900 dark:text-gray-300 not-data-disabled:cursor-pointer data-disabled:opacity-50 hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 outline-hidden',
@@ -41,7 +48,7 @@ const iconClasses = cva({
     <DropdownMenuItem
         :class="classes"
         data-ui-dropdown-item
-        :as="href ? 'a' : 'div'"
+        :as="tag"
         :href
         :target
     >

packages/ui/src/Heading.vue

@@ -2,9 +2,11 @@
 import { cva } from 'cva';
 import { computed, useSlots } from 'vue';
 import Icon from './Icon/Icon.vue';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
     href: { type: [String, null], default: null },
+    target: { type: String, default: null },
     icon: { type: [String, null], default: null },
     level: { type: [Number, null], default: null },
     size: { type: String, default: 'base' },
@@ -16,7 +18,7 @@ const hasDefaultSlot = !!slots.default;
 
 const tag = computed(() => {
     if (props.level) return `h${props.level}`;
-    if (props.href) return 'a';
+    if (props.href) return props.target === '_blank' ? 'a' : Link;
     return 'div';
 });
 

resources/css/core/layout.css

@@ -69,15 +69,12 @@ main {
     }
 }
 
-.nav-closed main {
-    @apply ps-0;
-}
-
 .nav-closed .nav-main {
     @apply -start-46;
 }
 
-.nav-closed main {
+main.nav-closed {
+    @apply ps-0;
     @apply md:ps-0;
 }
 

resources/js/bootstrap/App.vue

@@ -1,89 +1,10 @@
 <script>
-import GlobalSiteSelector from '../components/GlobalSiteSelector.vue';
-import Login from '../components/login/Login.vue';
-import TwoFactorChallenge from '../components/login/TwoFactorChallenge.vue';
-import EnableTwoFactorAuthentication from '../components/login/EnableTwoFactorAuthentication.vue';
-import BaseEntryCreateForm from '../components/entries/BaseCreateForm.vue';
-import BaseTermCreateForm from '../components/terms/BaseCreateForm.vue';
-import CreateTermButton from '../components/terms/CreateTermButton.vue';
-import FieldsetListing from '../components/fieldsets/Listing.vue';
-import FieldsetEditForm from '../components/fieldsets/EditForm.vue';
-import BlueprintListing from '../components/blueprints/Listing.vue';
-import BlueprintBuilder from '../components/blueprints/Builder.vue';
-import FormListing from '../components/forms/Listing.vue';
-import FormSubmissionListing from '../components/forms/SubmissionListing.vue';
-import GlobalListing from '../components/globals/Listing.vue';
-import GlobalPublishForm from '../components/globals/PublishForm.vue';
-import UserListing from '../components/users/Listing.vue';
-import UserWizard from '../components/users/Wizard.vue';
-import RoleListing from '../components/roles/Listing.vue';
-import RolePublishForm from '../components/roles/PublishForm.vue';
-import UserGroupListing from '../components/user-groups/Listing.vue';
-import UserGroupPublishForm from '../components/user-groups/PublishForm.vue';
-import CollectionScaffolder from '../components/collections/Scaffolder.vue';
-import CollectionView from '../components/collections/View.vue';
-import CollectionBlueprintListing from '../components/collections/BlueprintListing.vue';
-import SessionExpiry from '../components/SessionExpiry.vue';
-import NavigationListing from '../components/navigation/Listing.vue';
-import PreferencesEditForm from '../components/preferences/EditForm.vue';
-import NavigationView from '../components/navigation/View.vue';
-import TaxonomyBlueprintListing from '../components/taxonomies/BlueprintListing.vue';
-import Updater from '../components/updater/Updater.vue';
-import PortalTargets from '../components/portals/PortalTargets.vue';
-import SitesEditForm from '../components/sites/EditForm.vue';
-import CommandPalette from '../components/command-palette/CommandPalette.vue';
-import ItemActions from '../components/actions/ItemActions.vue';
-import BulkActions from '../components/actions/BulkActions.vue';
-import LicensingAlert from '../components/LicensingAlert.vue';
-
-import { defineAsyncComponent } from 'vue';
-import { ConfigProvider } from 'reka-ui';
-
 export default {
     components: {
-        CommandPalette,
-        GlobalSiteSelector,
-        Login,
-        TwoFactorChallenge,
-        EnableTwoFactorAuthentication,
-        BaseEntryCreateForm,
-        BaseTermCreateForm,
-        CreateTermButton,
-        FieldsetListing,
-        FieldsetEditForm,
-        BlueprintListing,
-        BlueprintBuilder,
-        FormListing,
-        FormSubmissionListing,
-        GlobalListing,
-        GlobalPublishForm,
-        UserListing,
-        UserWizard,
-        RoleListing,
-        RolePublishForm,
-        UserGroupListing,
-        UserGroupPublishForm,
-        CollectionScaffolder,
-        CollectionView,
-        CollectionBlueprintListing,
-        SessionExpiry,
-        NavigationListing,
-        PreferencesEditForm,
-        NavigationView,
-        TaxonomyBlueprintListing,
-        NavBuilder: defineAsyncComponent(() => import('../components/nav/Builder.vue')),
-        Updater,
-        PortalTargets,
-        SitesEditForm,
-        ConfigProvider,
-        ItemActions,
-        BulkActions,
-        LicensingAlert,
     },
 
     data() {
         return {
-            navOpen: false,
             appendedComponents: Statamic.$components.components,
             copyToClipboardModalUrl: null,
         };
@@ -100,13 +21,6 @@ export default {
     },
 
     mounted() {
-        this.$keys.bind(['command+\\'], (e) => {
-            e.preventDefault();
-            this.toggleNav();
-        });
-
-
-
         if (this.$config.get('broadcasting.enabled')) {
             this.$echo.start();
         }
@@ -119,8 +33,6 @@ export default {
 
     created() {
         const app = this;
-        const state = localStorage.getItem('statamic.nav') || 'open';
-        this.navOpen = state === 'open';
 
         Statamic.$callbacks.add('copyToClipboard', async function (url) {
             try {
@@ -140,10 +52,6 @@ export default {
     },
 
     methods: {
-        toggleNav() {
-            this.navOpen = !this.navOpen;
-            localStorage.setItem('statamic.nav', this.navOpen ? 'open' : 'closed');
-        },
 
         fixAutofocus() {
             // Fix autofocus issues in Safari and Firefox

resources/js/bootstrap/cms/ui.js

@@ -25,6 +25,7 @@ export {
     DatePicker,
     DateRangePicker,
     Description,
+    DocsCallout,
     DragHandle,
     Drawer,
     Dropdown,