mirror of
https://github.com/tenrok/BBob.git
synced 2026-06-11 18:02:26 +03:00
feat: support for vue2 (#88)
* chore: initial setup for vue2 packages * feat: basic Vue 2 Component * feat(vue2): add more test cases * test(preset): add more cases to test in preset * test(preset-vue2): add more cases to test tags processing * fix(preset): tag node checking * test(preset-vue): more coverage for vue preset * refactor(vue2): move default export to plugin install func * feat(example-vue2): add vue2 example to examples folder * chore(example-vue2): remove unused npm scripts * chore: add vue 2 example in main README * chore: update package.json descriptions
This commit is contained in:
Nikolay Kostyurin
committed by
GitHub
GitHub
parent
64b4778cfb
commit
cbccbaf896
@@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,24 @@
|
||||
# vue2-example
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
Generated
+12082
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "vue2-example",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "vue-cli-service serve",
|
||||
"generate": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"@bbob/vue2": "^2.6.2",
|
||||
"@bbob/preset-vue": "^2.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,17 @@
|
||||
<!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">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<div class="data">
|
||||
<div class="bbcode">
|
||||
<h2>Raw BB Code here</h2>
|
||||
<textarea name="bbcode" id="bbcode" cols="30" rows="10" v-model="bbcode"></textarea>
|
||||
</div>
|
||||
<div class="html">
|
||||
<h2>Generated HTML here</h2>
|
||||
<bbob-bbcode container="div" :plugins="plugins">{{ bbcode }}</bbob-bbcode>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code"></pre>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import preset from '@bbob/preset-vue'
|
||||
import MyTag from './MyTagComponent'
|
||||
|
||||
const myPreset = preset.extend(defTags => ({
|
||||
...defTags,
|
||||
// bbcode tags always lowercased
|
||||
mytag: (node) => ({
|
||||
...node,
|
||||
tag: MyTag,
|
||||
})
|
||||
}))
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
bbcode: 'Text [b]bolded[/b] and [myTag]Some Name[/myTag]',
|
||||
plugins: [
|
||||
myPreset()
|
||||
],
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
|
||||
width: 700px;
|
||||
margin: 60px auto 0;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bbcode,
|
||||
.html {
|
||||
border: 1px solid #ccc;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<span class="my-tag"><span class="avatar"/> <slot></slot></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MyTag"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
background: #ccc;
|
||||
border-radius: 6px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: teal;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@@ -0,0 +1,11 @@
|
||||
import Vue from 'vue';
|
||||
import VueBbob from '@bbob/vue2';
|
||||
import App from './App.vue';
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.use(VueBbob);
|
||||
|
||||
new Vue({
|
||||
render: (h) => h(App),
|
||||
}).$mount('#app');
|
||||
Reference in New Issue
Block a user