[6.x] Vue 3

jest.config.js → jest.config.cjs

@@ -76,7 +76,9 @@ module.exports = {
   // ],
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
+  moduleNameMapper: {
+    "^@vue/test-utils": "<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js"
+  },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   // modulePathIgnorePatterns: [],

package.json

@@ -1,5 +1,6 @@
 {
   "name": "statamic",
+  "type": "module",
   "private": true,
   "scripts": {
     "dev": "rm -rf resources/dist/build && vite",
@@ -12,13 +13,17 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.2.5",
+    "@floating-ui/vue": "^1.0.6",
+    "@he-tree/vue": "^2.8.2",
+    "@hoppscotch/vue-toasted": "^0.1.0",
     "@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",
@@ -44,60 +49,62 @@
     "@tiptap/extension-typography": "^2.0.2",
     "@tiptap/extension-underline": "^2.0.2",
     "@tiptap/pm": "^2.0.2",
-    "@tiptap/vue-2": "^2.0.2",
+    "@tiptap/vue-3": "^2.4.0",
     "alpinejs": "^3.1.1",
-    "autosize": "~3.0.12",
-    "axios": "^1.7.4",
+    "autosize": "~6.0.1",
+    "axios": "^1.6.0",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "codemirror": "^5.58.2",
+    "codemirror": "5.65.12",
     "cookies-js": "^1.2.2",
-    "floating-vue": "^1.0.0-beta.19",
+    "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
     "highlight.js": "^11.7.0",
-    "imask": "^6.6.0-alpha.0",
+    "imask": "^7.6.1",
     "laravel-echo": "^1.16.0",
-    "lowlight": "^2.8.1",
-    "marked": "^4.0.10",
+    "lowlight": "^3.1.0",
+    "marked": "^13.0.0",
     "marked-plaintext": "0.0.2",
     "moment": "^2.29.4",
-    "mousetrap": "~1.5.3",
+    "mousetrap": "~1.6.5",
     "nprogress": "^0.2.0",
     "pdfobject": "^2.2.7",
-    "portal-vue": "^1.5.1",
+    "portal-vue": "^3.0.0",
     "pretty": "^2.0.0",
-    "pusher-js": "^4.4.0",
+    "pusher-js": "^8.4.0-rc2",
     "qs": "^6.9.7",
-    "read-time-estimate": "0.0.2",
+    "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": "^2.3.0",
+    "v-calendar": "^3.1.2",
     "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"
+    "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",
+    "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-vue2": "^2.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.0",
-    "cross-env": "^5.2.1",
+    "cross-env": "^7.0.3",
     "jest": "^29.4.2",
     "jest-environment-jsdom": "^29.4.2",
-    "laravel-vite-plugin": "^0.7.2",
+    "laravel-vite-plugin": "^1.2.0",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.0",
-    "vite": "^4.5.5"
+    "vite": "^6.0"
   }
 }

resources/css/components/fieldtypes/datetime.css

@@ -36,13 +36,14 @@
 	@apply flex;
 }
 
-/* Remove style from datepicker in popover since the popover has them. */
-.popover-content .vc-container {
-    @apply border-none bg-none;
+/* VCalendar dark mode background */
+.vc-container, .vc-date-picker-content {
+    @apply dark:bg-dark-500 dark:border-dark-700;
 }
 
-.vc-container.vc-is-dark {
-    @apply dark:bg-transparent;
+/* VCalendar dark mode year/month popover */
+.vc-nav-popover-container {
+    @apply dark:bg-dark-700 dark:border-dark-900;
 }
 
 /* Time Field

resources/css/components/modal.css

@@ -1,19 +1,20 @@
 /* ==========================================================================
    MODALS
    ========================================================================== */
-.vm--container {
+.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;
 }
 

resources/css/components/page-tree.css

@@ -4,7 +4,7 @@
         @apply dark:mb-1;
     }
 
-    .tree-node-inner {
+    .page-tree-branch {
         @apply relative text-xs bg-white shadow rounded;
         @apply dark:bg-dark-600 dark:shadow-dark;
 
@@ -17,13 +17,6 @@
         @apply dark:mt-1;
     }
 
-    .draggable-placeholder-inner {
-        border: 1px dashed #0088F8;
-        background: rgba(0, 136, 249, 0.09);
-
-        * { display: none; }
-    }
-
     .page-move {
         @apply w-6 rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l dark:text-dark-175 dark:border-dark-900;
         cursor: grab;
@@ -44,16 +37,3 @@
         @apply flex w-6 rtl:rounded-r ltr:rounded-l items-center rtl:border-l ltr:border-r dark:border-dark-900;
     }
 }
-
-.page-tree-with-sections {
-    > .tree-node > .tree-node-children > .tree-node {
-        @apply mb-8;
-    }
-
-    .section-placeholder-inner {
-        @apply rounded;
-        border: 1px dashed #0088F8;
-        background: rgba(0, 136, 249, 0.09);
-        min-height: 42px;
-    }
-}