vue 3.4

assets/README.md

@@ -1,24 +1,29 @@
-# aircox-assets
+# aircox
 
-## Project setup
-```
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
 npm install
 ```
 
-### Compiles and hot-reloads for development
-```
-npm run serve
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
 ```
 
-### Compiles and minifies for production
-```
+### Compile and Minify for Production
+
+```sh
 npm run build
 ```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

assets/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

assets/jsconfig.json

@@ -1,19 +1,8 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
 }

assets/package.json

@@ -1,39 +1,37 @@
 {
-  "name": "aircox-assets",
-  "version": "0.1.0",
+  "name": "aircox",
+  "version": "0.0.0",
   "private": true,
-  "sideEffects": true,
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@popperjs/core": "^2.11.8",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "core-js": "^3.8.3",
     "lodash": "^4.17.21",
     "v-calendar": "^3.1.2",
-    "vue": "^3.2.13"
+    "vite-plugin-babel-macros": "^1.0.6",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "bulma": "^0.9.4",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "sass": "^1.49.9",
-    "sass-loader": "^12.6.0",
-    "vue-cli": "^2.9.6",
-    "webpack-cli": "^5.1.4"
+    "vite": "^5.2.8"
   },
   "eslintConfig": {
     "root": true,
     "env": {
-      "node": true
+      "node": true,
+      "es2022": true
     },
     "extends": [
       "plugin:vue/vue3-essential",

assets/public/vue.esm-browser.js

@@ -1 +0,0 @@
-../node_modules/vue/dist/vue.esm-browser.js

assets/public/vue.esm-browser.prod.js

@@ -1 +0,0 @@
-../node_modules/vue/dist/vue.esm-browser.prod.js

assets/src/admin.js

@@ -11,7 +11,21 @@ const AdminApp = {
     data() {
         return {
             ...super.data,
+            modalItem: null,
         }
+    },
+
+    methods: {
+        ...App.methods,
+
+        fileSelected(select, input, preview) {
+            const item = this.$refs[select].item
+            if(item) {
+                this.$refs[input].value = item.id
+                if(preview)
+                    preview.src = item.file
+            }
+        },
     }
 }
 export default AdminApp;

assets/src/components/AEpisode.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script>
-import {Set} from '../model';
-import Sound from '../sound';
-import APage from './APage';
+import {Set} from '../model.js';
+import Sound from '../sound.js';
+import APage from './APage.vue';
 
 export default {
     extends: APage,

assets/src/components/AFileUpload.vue

@@ -26,7 +26,7 @@
     </div>
 </template>
 <script>
-import {getCsrf} from "../model"
+import {getCsrf} from "../model.js"
 
 export default {
     emit: ["fileChange", "load", "abort", "error"],

assets/src/components/index.js

@@ -1,25 +1,25 @@
 import AActionButton from './AActionButton.vue'
-import AAutocomplete from './AAutocomplete'
-import ACarousel from './ACarousel'
-import ADropdown from "./ADropdown"
-import AEpisode from './AEpisode'
-import AList from './AList'
-import APage from './APage'
-import APlayer from './APlayer'
-import APlaylist from './APlaylist'
-import AProgress from './AProgress'
-import ASoundItem from './ASoundItem'
-import ASwitch from './ASwitch'
+import AAutocomplete from './AAutocomplete.vue'
+import ACarousel from './ACarousel.vue'
+import ADropdown from "./ADropdown.vue"
+import AEpisode from './AEpisode.vue'
+import AList from './AList.vue'
+import APage from './APage.vue'
+import APlayer from './APlayer.vue'
+import APlaylist from './APlaylist.vue'
+import AProgress from './AProgress.vue'
+import ASoundItem from './ASoundItem.vue'
+import ASwitch from './ASwitch.vue'
 
-import AModal from "./AModal"
-import AFileUpload from "./AFileUpload"
-import ASelectFile from "./ASelectFile"
-import AStatistics from './AStatistics'
-import AStreamer from './AStreamer'
+import AModal from "./AModal.vue"
+import AFileUpload from "./AFileUpload.vue"
+import ASelectFile from "./ASelectFile.vue"
+import AStatistics from './AStatistics.vue'
+import AStreamer from './AStreamer.vue'
 
-import AFormSet from './AFormSet'
-import ATrackListEditor from './ATrackListEditor'
-import ASoundListEditor from './ASoundListEditor'
+import AFormSet from './AFormSet.vue'
+import ATrackListEditor from './ATrackListEditor.vue'
+import ASoundListEditor from './ASoundListEditor.vue'
 
 /**
  * Core components
@@ -32,12 +32,8 @@ export const base = {
 
 export default base
 
-export const admin = {
-    ...base,
-    ATrackListEditor
-}
 
-export const dashboard = {
+export const admin = {
     ...base,
     AActionButton, AFileUpload, ASelectFile, AModal,
     AFormSet, ATrackListEditor, ASoundListEditor,

assets/src/dashboard.js

@@ -1,33 +0,0 @@
-import './styles/admin.scss'
-import './index.js'
-
-import App from './app';
-import {dashboard as components} from './components'
-
-const DashboardApp = {
-    ...App,
-    components: {...App.components, ...components},
-
-    data() {
-        return {
-            modalItem: null,
-        }
-    },
-
-    methods: {
-        ...App.methods,
-
-        fileSelected(select, input, preview) {
-            const item = this.$refs[select].item
-            if(item) {
-                this.$refs[input].value = item.id
-                if(preview)
-                    preview.src = item.file
-            }
-        },
-    }
-}
-export default DashboardApp;
-
-
-window.App = DashboardApp

assets/src/index.js

@@ -3,6 +3,8 @@
  * administration interface)
  */
 
+import 'vue'
+
 //-- aircox
 import App, {PlayerApp} from './app'
 import VueLoader from './vueLoader'

assets/src/public.js

@@ -2,6 +2,4 @@ import "./styles/public.scss"
 import './index.js'
 import App from './app.js'
 
-export default App
-
 window.App = App

assets/src/styles/helpers.scss

@@ -1,7 +1,7 @@
 @use "./vars" as v;
 
 // ---- text
-.text-light { weight: 400; color: var(--text-color-light); }
+.text-light { font-weight: 400; color: var(--text-color-light); }
 
 .bigger { font-size: v.$text-size-bigger !important; }
 .big { font-size: v.$text-size-big !important; }

assets/src/styles/public.scss

@@ -398,7 +398,7 @@ nav li {
     }
 }
 .header-cover:only-child {
-    with: 100%;
+    width: 100%;
 }
 
 @media screen and (max-width: v.$screen-small) {

assets/src/styles/vendor.scss

@@ -1,5 +1,5 @@
 @import 'v-calendar/style.css';
-@import '@fortawesome/fontawesome-free/css/all.min.css';
+// @import '@fortawesome/fontawesome-free/css/all.min.css';
 
 // ---- bulma
 $body-color: #000;

assets/vite.config.js

@@ -0,0 +1,42 @@
+import { resolve } from 'path'
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import commonjs from '@rollup/plugin-commonjs';
+
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        vue(),
+    ],
+    build: {
+        outDir: "../aircox/static/aircox/",
+        sourcemap: true,
+
+        rollupOptions: {
+            external: ['vue',],
+            input: {
+                public: "src/public.js",
+                admin: "src/admin.js",
+            },
+            output: {
+                globals: {
+                    vue: 'Vue',
+                },
+                entryFileNames: "[name].js",
+            },
+            plugins: [commonjs()],
+        },
+    },
+    css: {
+        devSourcemap: true,
+    },
+    resolve: {
+        extensions: ['.js', '.ts', '.json', '.vue'],
+        alias: {
+          '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
+    }
+})

assets/vue.config.js

@@ -1,23 +0,0 @@
-const path = require('path');
-
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-    transpileDependencies: true,
-    outputDir: path.resolve('../aircox/static/aircox'),
-    publicPath: './',
-    runtimeCompiler: true,
-    filenameHashing: false,
-
-    css: {
-        extract: true,
-        loaderOptions: {
-            sass: { sourceMap: true },
-        }
-    },
-
-    pages: {
-        public: { entry: 'src/public.js' },
-        dashboard: { entry: 'src/dashboard.js' },
-        admin: { entry: 'src/admin.js' },
-    }
-})