[6.x] Vue 3

package.json

@@ -1,103 +1,110 @@
 {
-  "name": "statamic",
-  "private": true,
-  "scripts": {
-    "dev": "rm -rf resources/dist/build && vite",
-    "build": "vite build",
-    "svgo": "svgo -f ./resources/svg/  -r",
-    "test": "cross-env NODE_ENV=test jest --silent",
-    "test-watch": "npm run test -- --watch --notify",
-    "frontend-dev": "vite -c vite-frontend.config.js",
-    "frontend-build": "vite build -c vite-frontend.config.js"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.2.5",
-    "@shopify/draggable": "^1.0.0-beta.12",
-    "@tiptap/core": "^2.0.2",
-    "@tiptap/extension-blockquote": "^2.0.2",
-    "@tiptap/extension-bold": "^2.0.2",
-    "@tiptap/extension-bullet-list": "^2.0.2",
-    "@tiptap/extension-character-count": "^2.0.2",
-    "@tiptap/extension-code": "^2.0.2",
-    "@tiptap/extension-code-block-lowlight": "^2.0.2",
-    "@tiptap/extension-document": "^2.0.2",
-    "@tiptap/extension-dropcursor": "^2.0.2",
-    "@tiptap/extension-gapcursor": "^2.0.2",
-    "@tiptap/extension-hard-break": "^2.0.2",
-    "@tiptap/extension-heading": "^2.0.2",
-    "@tiptap/extension-history": "^2.0.2",
-    "@tiptap/extension-horizontal-rule": "^2.0.2",
-    "@tiptap/extension-italic": "^2.0.2",
-    "@tiptap/extension-list-item": "^2.0.2",
-    "@tiptap/extension-ordered-list": "^2.0.2",
-    "@tiptap/extension-paragraph": "^2.0.2",
-    "@tiptap/extension-placeholder": "^2.0.2",
-    "@tiptap/extension-strike": "^2.0.2",
-    "@tiptap/extension-subscript": "^2.0.2",
-    "@tiptap/extension-superscript": "^2.0.2",
-    "@tiptap/extension-table": "^2.0.2",
-    "@tiptap/extension-table-cell": "^2.0.2",
-    "@tiptap/extension-table-header": "^2.0.2",
-    "@tiptap/extension-table-row": "^2.0.2",
-    "@tiptap/extension-text": "^2.0.2",
-    "@tiptap/extension-text-align": "^2.0.2",
-    "@tiptap/extension-typography": "^2.0.2",
-    "@tiptap/extension-underline": "^2.0.2",
-    "@tiptap/pm": "^2.0.2",
-    "@tiptap/vue-2": "^2.0.2",
-    "alpinejs": "^3.1.1",
-    "autosize": "~3.0.12",
-    "axios": "^1.7.4",
-    "body-scroll-lock": "^4.0.0-beta.0",
-    "codemirror": "^5.58.2",
-    "cookies-js": "^1.2.2",
-    "floating-vue": "^1.0.0-beta.19",
-    "fuse.js": "^7.0.0",
-    "highlight.js": "^11.7.0",
-    "imask": "^6.6.0-alpha.0",
-    "laravel-echo": "^1.16.0",
-    "lowlight": "^2.8.1",
-    "marked": "^4.0.10",
-    "marked-plaintext": "0.0.2",
-    "moment": "^2.29.4",
-    "mousetrap": "~1.5.3",
-    "nprogress": "^0.2.0",
-    "pdfobject": "^2.2.7",
-    "portal-vue": "^1.5.1",
-    "pretty": "^2.0.0",
-    "pusher-js": "^4.4.0",
-    "qs": "^6.9.7",
-    "read-time-estimate": "0.0.2",
-    "resize-observer-polyfill": "^1.5.1",
-    "speakingurl": "^14.0.1",
-    "striptags": "^3.2.0",
-    "svgo": "^3.0.0",
-    "underscore": "~1.13.2",
-    "uniqid": "^5.2.0",
-    "upload": "^1.3.2",
-    "v-calendar": "^2.3.0",
-    "validator": "^13.7.0",
-    "vue": "^2.7.14",
-    "vue-clickaway": "~2.2.2",
-    "vue-draggable-nested-tree": "^2.3.0-beta.1",
-    "vue-js-modal": "^2.0.1",
-    "vue-select": "^3.10.1",
-    "vue-toasted": "^1.1.27",
-    "vuex": "^3.1.2"
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.20.2",
-    "@rollup/plugin-inject": "^5.0.3",
-    "@tailwindcss/container-queries": "^0.1.0",
-    "@tailwindcss/typography": "^0.5.9",
-    "@vitejs/plugin-vue2": "^2.2.0",
-    "autoprefixer": "^10.4.0",
-    "cross-env": "^5.2.1",
-    "jest": "^29.4.2",
-    "jest-environment-jsdom": "^29.4.2",
-    "laravel-vite-plugin": "^0.7.2",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.0",
-    "vite": "^4.5.5"
-  }
+    "name": "statamic",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "dev": "rm -rf resources/dist/build && vite",
+        "build": "vite build",
+        "svgo": "svgo -f ./resources/svg/  -r",
+        "test": "cross-env NODE_ENV=test jest --silent",
+        "test-watch": "npm run test -- --watch --notify",
+        "frontend-dev": "vite -c vite-frontend.config.js",
+        "frontend-build": "vite build -c vite-frontend.config.js"
+    },
+    "dependencies": {
+        "@floating-ui/dom": "^1.2.5",
+        "@floating-ui/vue": "^1.0.6",
+        "@he-tree/vue": "^2.8.2",
+        "@shopify/draggable": "^1.0.0-beta.12",
+        "@tiptap/core": "^2.0.2",
+        "@tiptap/extension-blockquote": "^2.0.2",
+        "@tiptap/extension-bold": "^2.0.2",
+        "@tiptap/extension-bullet-list": "^2.0.2",
+        "@tiptap/extension-character-count": "^2.0.2",
+        "@tiptap/extension-code": "^2.0.2",
+        "@tiptap/extension-code-block": "^2.4.0",
+        "@tiptap/extension-code-block-lowlight": "^2.0.2",
+        "@tiptap/extension-document": "^2.0.2",
+        "@tiptap/extension-dropcursor": "^2.0.2",
+        "@tiptap/extension-gapcursor": "^2.0.2",
+        "@tiptap/extension-hard-break": "^2.0.2",
+        "@tiptap/extension-heading": "^2.0.2",
+        "@tiptap/extension-history": "^2.0.2",
+        "@tiptap/extension-horizontal-rule": "^2.0.2",
+        "@tiptap/extension-italic": "^2.0.2",
+        "@tiptap/extension-list-item": "^2.0.2",
+        "@tiptap/extension-ordered-list": "^2.0.2",
+        "@tiptap/extension-paragraph": "^2.0.2",
+        "@tiptap/extension-placeholder": "^2.0.2",
+        "@tiptap/extension-strike": "^2.0.2",
+        "@tiptap/extension-subscript": "^2.0.2",
+        "@tiptap/extension-superscript": "^2.0.2",
+        "@tiptap/extension-table": "^2.0.2",
+        "@tiptap/extension-table-cell": "^2.0.2",
+        "@tiptap/extension-table-header": "^2.0.2",
+        "@tiptap/extension-table-row": "^2.0.2",
+        "@tiptap/extension-text": "^2.0.2",
+        "@tiptap/extension-text-align": "^2.0.2",
+        "@tiptap/extension-typography": "^2.0.2",
+        "@tiptap/extension-underline": "^2.0.2",
+        "@tiptap/pm": "^2.0.2",
+        "@tiptap/vue-3": "^2.4.0",
+        "alpinejs": "^3.1.1",
+        "autosize": "~6.0.1",
+        "axios": "^1.6.0",
+        "body-scroll-lock": "^4.0.0-beta.0",
+        "codemirror": "5.65.12",
+        "cookies-js": "^1.2.2",
+        "floating-vue": "^5.2.2",
+        "fuse.js": "^7.0.0",
+        "highlight.js": "^11.7.0",
+        "imask": "^7.6.1",
+        "laravel-echo": "^1.16.0",
+        "lowlight": "^3.1.0",
+        "marked": "^13.0.0",
+        "marked-plaintext": "0.0.2",
+        "mitt": "^3.0.1",
+        "moment": "^2.29.4",
+        "mousetrap": "~1.6.5",
+        "nprogress": "^0.2.0",
+        "pdfobject": "^2.2.7",
+        "portal-vue": "^3.0.0",
+        "pretty": "^2.0.0",
+        "pusher-js": "^8.4.0-rc2",
+        "qs": "^6.9.7",
+        "read-time-estimate": "0.0.3",
+        "resize-observer-polyfill": "^1.5.1",
+        "speakingurl": "^14.0.1",
+        "striptags": "^3.2.0",
+        "svgo": "^3.0.0",
+        "tiny-emitter": "^2.1.0",
+        "underscore": "~1.13.2",
+        "uniqid": "^5.2.0",
+        "upload": "^1.3.2",
+        "v-calendar": "^3.1.2",
+        "validator": "^13.7.0",
+        "vite-svg-loader": "^5.1.0",
+        "vue": "^3.4.27",
+        "vue-final-modal": "^4.5.4",
+        "vue-screen-utils": "^1.0.0-beta.13",
+        "vue-select": "4.0.0-beta.6",
+        "vue-toastification": "^2.0.0-rc.5",
+        "vue3-click-away": "^1.2.4",
+        "vuex": "^4.1.0"
+    },
+    "devDependencies": {
+        "@babel/preset-env": "^7.20.2",
+        "@rollup/plugin-inject": "^5.0.3",
+        "@tailwindcss/container-queries": "^0.1.0",
+        "@tailwindcss/typography": "^0.5.9",
+        "@vitejs/plugin-vue": "^5.0.5",
+        "autoprefixer": "^10.4.0",
+        "cross-env": "^7.0.3",
+        "jest": "^29.4.2",
+        "jest-environment-jsdom": "^29.4.2",
+        "laravel-vite-plugin": "^1.0.4",
+        "postcss": "^8.4.31",
+        "tailwindcss": "^3.3.0",
+        "vite": "^5.2.13"
+    }
 }

resources/css/components/modal.css

@@ -1,19 +1,21 @@
 /* ==========================================================================
    MODALS
    ========================================================================== */
-.vm--container {
+/** @todo(jackmcdade): double check please. */
+.vfm {
     direction: ltr;
 }
 
-.vm--modal {
+.vfm__content {
     @apply rounded-lg dark:bg-dark-600 dark:shadow-dark !important;
+    @apply bg-white shadow-2xl overflow-clip;
 
     [dir='rtl'] & {
         direction: rtl;
     }
 }
 
-.vm--overlay {
+.vfm__overlay {
     background: hsla(210, 20%, 10%, .15) !important;
 }