Frontend refactor: move Vue related code from index.js
to components
dir, and remove unused codes. (#17301)
* frontend refactor
* Apply suggestions from code review
Co-authored-by: delvh <dev.lh@web.de>
* Update templates/base/head.tmpl
Co-authored-by: delvh <dev.lh@web.de>
* Update docs/content/doc/developers/guidelines-frontend.md
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* fix typo
* fix typo
* refactor PageData to pageData
* Apply suggestions from code review
Co-authored-by: delvh <dev.lh@web.de>
* Simply for the visual difference.
Co-authored-by: delvh <dev.lh@web.de>
* Revert "Apply suggestions from code review"
This reverts commit 4d78ad9b0e
.
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
This commit is contained in:
parent
96ff3e310f
commit
56362043d3
20 changed files with 718 additions and 634 deletions
52
web_src/js/components/VueComponentLoader.js
Normal file
52
web_src/js/components/VueComponentLoader.js
Normal file
|
@ -0,0 +1,52 @@
|
|||
import Vue from 'vue';
|
||||
import {svgs} from '../svg.js';
|
||||
|
||||
const vueDelimiters = ['${', '}'];
|
||||
|
||||
let vueEnvInited = false;
|
||||
function initVueEnv() {
|
||||
if (vueEnvInited) return;
|
||||
vueEnvInited = true;
|
||||
|
||||
const isProd = window.config.IsProd;
|
||||
Vue.config.productionTip = false;
|
||||
Vue.config.devtools = !isProd;
|
||||
}
|
||||
|
||||
let vueSvgInited = false;
|
||||
function initVueSvg() {
|
||||
if (vueSvgInited) return;
|
||||
vueSvgInited = true;
|
||||
|
||||
// register svg icon vue components, e.g. <octicon-repo size="16"/>
|
||||
for (const [name, htmlString] of Object.entries(svgs)) {
|
||||
const template = htmlString
|
||||
.replace(/height="[0-9]+"/, 'v-bind:height="size"')
|
||||
.replace(/width="[0-9]+"/, 'v-bind:width="size"');
|
||||
|
||||
Vue.component(name, {
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
default: '16',
|
||||
},
|
||||
},
|
||||
template,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function initVueApp(el, opts = {}) {
|
||||
if (typeof el === 'string') {
|
||||
el = document.querySelector(el);
|
||||
}
|
||||
if (!el) return null;
|
||||
|
||||
return new Vue(Object.assign({
|
||||
el,
|
||||
delimiters: vueDelimiters,
|
||||
}, opts));
|
||||
}
|
||||
|
||||
export {vueDelimiters, initVueEnv, initVueSvg, initVueApp};
|
Loading…
Add table
Add a link
Reference in a new issue