vue 3.4
This commit is contained in:
bkfox
parent
07d72d799d
commit
b28105c659
|
|
@ -1,12 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
||||||
<title>Vue App</title>
|
|
||||||
<script defer src="js/chunk-vendors.js"></script><script defer src="js/chunk-common.js"></script><script defer src="js/admin.js"></script><link href="css/chunk-vendors.css" rel="stylesheet"><link href="css/chunk-common.css" rel="stylesheet"></head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -19,12 +19,28 @@ Usefull context:
|
||||||
<link rel="icon" href="{% thumbnail site.favicon 32x32 crop %}" />
|
<link rel="icon" href="{% thumbnail site.favicon 32x32 crop %}" />
|
||||||
|
|
||||||
{% block assets %}
|
{% block assets %}
|
||||||
|
{% static "vue/vue.esm-browser.js" as vue_url %}
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"vue": "{{vue_url}}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="module" src="{{vue_url}}"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static "fontawesome-free/css/all.min.css" %}"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static "aircox/style.css" %}"/>
|
||||||
|
<script type="module" src="{% static "aircox/public.js" %}"></script>
|
||||||
|
|
||||||
|
{% comment %}
|
||||||
<link rel="stylesheet" type="text/css" href="{% static "aircox/css/chunk-common.css" %}"/>
|
<link rel="stylesheet" type="text/css" href="{% static "aircox/css/chunk-common.css" %}"/>
|
||||||
<link rel="stylesheet" type="text/css" href="{% static "aircox/css/chunk-vendors.css" %}"/>
|
<link rel="stylesheet" type="text/css" href="{% static "aircox/css/chunk-vendors.css" %}"/>
|
||||||
<link rel="stylesheet" type="text/css" href="{% static "aircox/css/public.css" %}"/>
|
<link rel="stylesheet" type="text/css" href="{% static "aircox/css/public.css" %}"/>
|
||||||
<script src="{% static "aircox/js/chunk-common.js" %}"></script>
|
<script src="{% static "aircox/js/chunk-common.js" %}"></script>
|
||||||
<script src="{% static "aircox/js/chunk-vendors.js" %}"></script>
|
<script src="{% static "aircox/js/chunk-vendors.js" %}"></script>
|
||||||
<script src="{% static "aircox/js/public.js" %}"></script>
|
<script src="{% static "aircox/js/public.js" %}"></script>
|
||||||
|
{% endcomment %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
<title>
|
<title>
|
||||||
|
|
@ -47,6 +63,7 @@ Usefull context:
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
{% block app %}
|
||||||
<div class="navs">
|
<div class="navs">
|
||||||
{% block nav %}
|
{% block nav %}
|
||||||
<nav class="nav primary" role="navigation" aria-label="main navigation">
|
<nav class="nav primary" role="navigation" aria-label="main navigation">
|
||||||
|
|
@ -158,6 +175,7 @@ Usefull context:
|
||||||
<div id="player">{% include "aircox/widgets/player.html" %}</div>
|
<div id="player">{% include "aircox/widgets/player.html" %}</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
{% extends "./public.html" %}
|
{% extends "./public.html" %}
|
||||||
{% load i18n aircox %}
|
{% load i18n aircox %}
|
||||||
|
|
||||||
|
|
||||||
{% block head_title %}{{ station.name }}{% endblock %}
|
{% block head_title %}{{ station.name }}{% endblock %}
|
||||||
|
|
||||||
{% block title %}{% if page %}{{ block.super }}{% endif %}{% endblock %}
|
{% block title %}{% if page %}{{ block.super }}{% endif %}{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
{% extends base_template|default:"./base.html" %}
|
{% extends "./base.html" %}
|
||||||
|
|
||||||
|
|
||||||
{% comment %}
|
{% comment %}
|
||||||
|
|
|
||||||
|
|
@ -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
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
### Compile and Hot-Reload for Development
|
||||||
```
|
|
||||||
npm run serve
|
```sh
|
||||||
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and minifies for production
|
### Compile and Minify for Production
|
||||||
```
|
|
||||||
|
```sh
|
||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lints and fixes files
|
|
||||||
```
|
|
||||||
npm run lint
|
|
||||||
```
|
|
||||||
|
|
||||||
### Customize configuration
|
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
'@vue/cli-plugin-babel/preset'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +1,8 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
|
||||||
"module": "esnext",
|
|
||||||
"baseUrl": "./",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": [
|
"@/*": ["./src/*"]
|
||||||
"src/*"
|
}
|
||||||
]
|
},
|
||||||
},
|
"exclude": ["node_modules", "dist"]
|
||||||
"lib": [
|
|
||||||
"esnext",
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"scripthost"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,37 @@
|
||||||
{
|
{
|
||||||
"name": "aircox-assets",
|
"name": "aircox",
|
||||||
"version": "0.1.0",
|
"version": "0.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"sideEffects": true,
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"dev": "vite",
|
||||||
"build": "vue-cli-service build",
|
"build": "vite build",
|
||||||
"lint": "vue-cli-service lint"
|
"watch": "vite build --watch",
|
||||||
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "^6.0.0",
|
"@fortawesome/fontawesome-free": "^6.0.0",
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
|
"@rollup/plugin-commonjs": "^25.0.7",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"v-calendar": "^3.1.2",
|
"v-calendar": "^3.1.2",
|
||||||
"vue": "^3.2.13"
|
"vite-plugin-babel-macros": "^1.0.6",
|
||||||
|
"vue": "^3.4.21"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.12.16",
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
"@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",
|
|
||||||
"bulma": "^0.9.4",
|
"bulma": "^0.9.4",
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
"eslint-plugin-vue": "^8.0.3",
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
"sass": "^1.49.9",
|
"sass": "^1.49.9",
|
||||||
"sass-loader": "^12.6.0",
|
"vite": "^5.2.8"
|
||||||
"vue-cli": "^2.9.6",
|
|
||||||
"webpack-cli": "^5.1.4"
|
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"root": true,
|
"root": true,
|
||||||
"env": {
|
"env": {
|
||||||
"node": true
|
"node": true,
|
||||||
|
"es2022": true
|
||||||
},
|
},
|
||||||
"extends": [
|
"extends": [
|
||||||
"plugin:vue/vue3-essential",
|
"plugin:vue/vue3-essential",
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB |
|
|
@ -1 +0,0 @@
|
||||||
../node_modules/vue/dist/vue.esm-browser.js
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
../node_modules/vue/dist/vue.esm-browser.prod.js
|
|
||||||
|
|
@ -11,7 +11,21 @@ const AdminApp = {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
...super.data,
|
...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;
|
export default AdminApp;
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {Set} from '../model';
|
import {Set} from '../model.js';
|
||||||
import Sound from '../sound';
|
import Sound from '../sound.js';
|
||||||
import APage from './APage';
|
import APage from './APage.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
extends: APage,
|
extends: APage,
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import {getCsrf} from "../model"
|
import {getCsrf} from "../model.js"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
emit: ["fileChange", "load", "abort", "error"],
|
emit: ["fileChange", "load", "abort", "error"],
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
import AActionButton from './AActionButton.vue'
|
import AActionButton from './AActionButton.vue'
|
||||||
import AAutocomplete from './AAutocomplete'
|
import AAutocomplete from './AAutocomplete.vue'
|
||||||
import ACarousel from './ACarousel'
|
import ACarousel from './ACarousel.vue'
|
||||||
import ADropdown from "./ADropdown"
|
import ADropdown from "./ADropdown.vue"
|
||||||
import AEpisode from './AEpisode'
|
import AEpisode from './AEpisode.vue'
|
||||||
import AList from './AList'
|
import AList from './AList.vue'
|
||||||
import APage from './APage'
|
import APage from './APage.vue'
|
||||||
import APlayer from './APlayer'
|
import APlayer from './APlayer.vue'
|
||||||
import APlaylist from './APlaylist'
|
import APlaylist from './APlaylist.vue'
|
||||||
import AProgress from './AProgress'
|
import AProgress from './AProgress.vue'
|
||||||
import ASoundItem from './ASoundItem'
|
import ASoundItem from './ASoundItem.vue'
|
||||||
import ASwitch from './ASwitch'
|
import ASwitch from './ASwitch.vue'
|
||||||
|
|
||||||
import AModal from "./AModal"
|
import AModal from "./AModal.vue"
|
||||||
import AFileUpload from "./AFileUpload"
|
import AFileUpload from "./AFileUpload.vue"
|
||||||
import ASelectFile from "./ASelectFile"
|
import ASelectFile from "./ASelectFile.vue"
|
||||||
import AStatistics from './AStatistics'
|
import AStatistics from './AStatistics.vue'
|
||||||
import AStreamer from './AStreamer'
|
import AStreamer from './AStreamer.vue'
|
||||||
|
|
||||||
import AFormSet from './AFormSet'
|
import AFormSet from './AFormSet.vue'
|
||||||
import ATrackListEditor from './ATrackListEditor'
|
import ATrackListEditor from './ATrackListEditor.vue'
|
||||||
import ASoundListEditor from './ASoundListEditor'
|
import ASoundListEditor from './ASoundListEditor.vue'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Core components
|
* Core components
|
||||||
|
|
@ -32,12 +32,8 @@ export const base = {
|
||||||
|
|
||||||
export default base
|
export default base
|
||||||
|
|
||||||
export const admin = {
|
|
||||||
...base,
|
|
||||||
ATrackListEditor
|
|
||||||
}
|
|
||||||
|
|
||||||
export const dashboard = {
|
export const admin = {
|
||||||
...base,
|
...base,
|
||||||
AActionButton, AFileUpload, ASelectFile, AModal,
|
AActionButton, AFileUpload, ASelectFile, AModal,
|
||||||
AFormSet, ATrackListEditor, ASoundListEditor,
|
AFormSet, ATrackListEditor, ASoundListEditor,
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
|
|
@ -3,6 +3,8 @@
|
||||||
* administration interface)
|
* administration interface)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import 'vue'
|
||||||
|
|
||||||
//-- aircox
|
//-- aircox
|
||||||
import App, {PlayerApp} from './app'
|
import App, {PlayerApp} from './app'
|
||||||
import VueLoader from './vueLoader'
|
import VueLoader from './vueLoader'
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,4 @@ import "./styles/public.scss"
|
||||||
import './index.js'
|
import './index.js'
|
||||||
import App from './app.js'
|
import App from './app.js'
|
||||||
|
|
||||||
export default App
|
|
||||||
|
|
||||||
window.App = App
|
window.App = App
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@use "./vars" as v;
|
@use "./vars" as v;
|
||||||
|
|
||||||
// ---- text
|
// ---- 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; }
|
.bigger { font-size: v.$text-size-bigger !important; }
|
||||||
.big { font-size: v.$text-size-big !important; }
|
.big { font-size: v.$text-size-big !important; }
|
||||||
|
|
|
||||||
|
|
@ -398,7 +398,7 @@ nav li {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.header-cover:only-child {
|
.header-cover:only-child {
|
||||||
with: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: v.$screen-small) {
|
@media screen and (max-width: v.$screen-small) {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@import 'v-calendar/style.css';
|
@import 'v-calendar/style.css';
|
||||||
@import '@fortawesome/fontawesome-free/css/all.min.css';
|
// @import '@fortawesome/fontawesome-free/css/all.min.css';
|
||||||
|
|
||||||
// ---- bulma
|
// ---- bulma
|
||||||
$body-color: #000;
|
$body-color: #000;
|
||||||
|
|
|
||||||
42
assets/vite.config.js
Normal file
42
assets/vite.config.js
Normal file
|
|
@ -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))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -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' },
|
|
||||||
}
|
|
||||||
})
|
|
||||||
Loading…
Reference in New Issue
Block a user