-
Notifications
You must be signed in to change notification settings - Fork 114
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
wip: vue3 support & switch to @vue/cli-service -- #137
- Loading branch information
Showing
12 changed files
with
118 additions
and
258 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -32,6 +32,8 @@ See also: [react-at](https://github.com/fritx/react-at) | |
| Finally I ended up creating this. | ||
|
|
||
| ```plain | ||
| npm i [email protected] # for Vue3 (🚧 Working in Progress...) | ||
| npm i [email protected] # for Vue2 <---- | ||
| npm i [email protected] # for Vue1 (branch vue1-legacy) | ||
| npm i vue1-at # for Vue1 (branch vue1-new) | ||
|
|
@@ -40,7 +42,7 @@ npm i vue1-at # for Vue1 (branch vue1-new) | |
| ```vue | ||
| <template> | ||
| <at :members="members"> | ||
| <div contenteditable></div> | ||
| <div :contenteditable="true"></div> | ||
| </at> | ||
| </template> | ||
|
|
@@ -69,12 +71,12 @@ With Content-Editable, `v-model` should be bound in `<at>` container.<br> | |
| With Textarea, `v-model` should be bound in `<textarea>` itself. | ||
|
|
||
| ```vue | ||
| <at v-model="html"> | ||
| <div contenteditable></div> | ||
| <at v-model:value="html"> | ||
| <div :contenteditable="true"></div> | ||
| </at> | ||
| <at-ta> | ||
| <textarea v-model="text"></textarea> | ||
| <textarea v-model:value="text"></textarea> | ||
| </at-ta> | ||
| ``` | ||
|
|
||
|
|
@@ -97,10 +99,6 @@ export default { | |
| </script> | ||
| ``` | ||
|
|
||
| ```plain | ||
| npm i -S textarea-caret # also, for textarea | ||
| ``` | ||
|
|
||
| ## Custom Templates | ||
|
|
||
| ### Custom List | ||
|
|
@@ -112,7 +110,7 @@ npm i -S textarea-caret # also, for textarea | |
| <img :src="s.item.avatar"> | ||
| <span v-text="s.item.name"></span> | ||
| </template> | ||
| <div contenteditable></div> | ||
| <div :contenteditable="true"></div> | ||
| </at> | ||
| </template> | ||
|
|
@@ -170,7 +168,7 @@ This gives you the option of changing the style of inserted tagged items. It is | |
| ```vue | ||
| <at-ta :members="members"> | ||
| <!-- slots --> | ||
| <v-textarea v-model="text"></v-textarea> | ||
| <v-textarea v-model:value="text"></v-textarea> | ||
| </at-ta> | ||
| ``` | ||
|
|
||
|
|
@@ -179,6 +177,6 @@ This gives you the option of changing the style of inserted tagged items. It is | |
| ```vue | ||
| <at-ta :members="members"> | ||
| <!-- slots --> | ||
| <el-input v-model="text" type="textarea"></el-input> | ||
| <el-input v-model:value="text" type="textarea"></el-input> | ||
| </at-ta> | ||
| ``` | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,38 @@ | ||
| { | ||
| "name": "vue-at", | ||
| "description": "At.js for Vue", | ||
| "version": "2.5.0-beta.2", | ||
| "version": "3.0.0-alpha.0", | ||
| "author": "Fritz Lin <[email protected]>", | ||
| "repository": "https://github.com/fritx/vue-at", | ||
| "scripts": { | ||
| "dev": "webpack serve --config webpack/demo --open --inline --hot --mode development", | ||
| "demo": "webpack --config webpack/demo --progress --mode development", | ||
| "build": "webpack --config webpack/prod --progress --mode production", | ||
| "dev": "vue-cli-service serve", | ||
| "demo": "vue-cli-service build", | ||
| "build:at": "vue-cli-service build ./src/At.vue --target lib --name vue-at", | ||
| "build:at-ta": "vue-cli-service build ./src/AtTextarea.vue --target lib --name vue-at-textarea", | ||
| "build": "rimraf dist && run-p build:at build:at-ta && rimraf dist/demo.html", | ||
| "prepublish": "npm run build" | ||
| }, | ||
| "main": "dist/vue-at.js", | ||
| "engines": { | ||
| "node": "14.x" | ||
| "node": ">= 14.x" | ||
| }, | ||
| "dependencies": { | ||
| "textarea-caret": "^3.1.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "vue": "2.x" | ||
| "vue": "3.x" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.18.9", | ||
| "@babel/plugin-proposal-class-properties": "^7.18.6", | ||
| "@babel/plugin-proposal-decorators": "^7.18.9", | ||
| "@babel/plugin-proposal-do-expressions": "^7.18.6", | ||
| "@babel/plugin-proposal-export-default-from": "^7.18.9", | ||
| "@babel/plugin-proposal-export-namespace-from": "^7.18.9", | ||
| "@babel/plugin-proposal-function-bind": "^7.18.9", | ||
| "@babel/plugin-proposal-function-sent": "^7.18.6", | ||
| "@babel/plugin-proposal-json-strings": "^7.18.6", | ||
| "@babel/plugin-proposal-logical-assignment-operators": "^7.18.9", | ||
| "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", | ||
| "@babel/plugin-proposal-numeric-separator": "^7.18.6", | ||
| "@babel/plugin-proposal-optional-chaining": "^7.18.9", | ||
| "@babel/plugin-proposal-pipeline-operator": "^7.18.9", | ||
| "@babel/plugin-proposal-throw-expressions": "^7.18.6", | ||
| "@babel/plugin-syntax-dynamic-import": "^7.8.3", | ||
| "@babel/plugin-syntax-import-meta": "^7.10.4", | ||
| "@babel/preset-env": "^7.18.9", | ||
| "babel-loader": "^8.2.5", | ||
| "babel-preset-minify": "^0.5.2", | ||
| "cross-env": "^7.0.3", | ||
| "css-loader": "^0.28.11", | ||
| "element-ui": "^2.15.9", | ||
| "file-loader": "^6.2.0", | ||
| "@vue/cli-service": "^5.0.8", | ||
| "@vue/compat": "^3.1.0", | ||
| "@vue/compiler-sfc": "^3.1.0", | ||
| "npm-run-all": "^4.1.5", | ||
| "rimraf": "^3.0.2", | ||
| "sass": "^1.53.0", | ||
| "sass-loader": "^13.0.2", | ||
| "style-loader": "^3.3.1", | ||
| "terser-webpack-plugin": "^5.3.3", | ||
| "textarea-caret": "^3.1.0", | ||
| "url-loader": "^4.1.1", | ||
| "vue": "^2.7.8", | ||
| "vue-loader": "^14.2.4", | ||
| "vue-style-loader": "^4.1.3", | ||
| "vue-template-compiler": "^2.7.8", | ||
| "vuetify": "^2.6.7", | ||
| "webpack": "^5.73.0", | ||
| "webpack-cli": "^4.10.0", | ||
| "webpack-dev-server": "^3.11.0" | ||
| "vue": "^3.1.0", | ||
| "vue-loader": "^16.0.0", | ||
| "webpack": "^5.73.0" | ||
| } | ||
| } |
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,29 @@ | ||
| import 'element-ui/lib/theme-chalk/index.css' | ||
| import 'vuetify/dist/vuetify.min.css' | ||
| import Vuetify from 'vuetify' | ||
| import ElementUI from 'element-ui' | ||
| import Vue from 'vue' | ||
| // import 'element-ui/lib/theme-chalk/index.css' | ||
| // import 'vuetify/dist/vuetify.min.css' | ||
| // import Vuetify from 'vuetify' | ||
| // import ElementUI from 'element-ui' | ||
| import { createApp, configureCompat } from 'vue' | ||
| import App from './App.vue' | ||
|
|
||
| Vue.use(Vuetify) | ||
| Vue.use(ElementUI) | ||
| // Vue.use(Vuetify) | ||
| // Vue.use(ElementUI) | ||
|
|
||
| new Vue({ | ||
| el: '#app', | ||
| render: h => h(App) | ||
| configureCompat({ | ||
| // migration.3 | ||
| // fix: [Vue warn]: (deprecation WATCH_ARRAY) "watch" option or vm.$watch on an array value will no longer trigger on array mutation unless the "deep" option is specified. If current usage is intended, you can disable the compat behavior and suppress this warning with: | ||
| // configureCompat({ WATCH_ARRAY: false }) | ||
| // Details: https://v3-migration.vuejs.org/breaking-changes/watch.html | ||
| WATCH_ARRAY: false, | ||
|
|
||
| // migration.4 | ||
| // fix: [Vue warn]: (deprecation ATTR_ENUMERATED_COERCION) Enumerated attribute "contenteditable" with v-bind value `` will render the value as-is instead of coercing the value to "true" in Vue 3. Always use explicit "true" or "false" values for enumerated attributes. If the usage is intended, you can disable the compat behavior and suppress this warning with: | ||
| // configureCompat({ ATTR_ENUMERATED_COERCION: false }) | ||
| // Details: https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html | ||
| ATTR_ENUMERATED_COERCION: false, | ||
| }) | ||
|
|
||
| // migration.1 | ||
| // fix: [Vue warn]: (deprecation GLOBAL_MOUNT) The global app bootstrapping API has changed: vm.$mount() and the "el" option have been removed. Use createApp(RootComponent).mount() instead. | ||
| // Details: https://v3-migration.vuejs.org/breaking-changes/global-api.html#mounting-app-instance | ||
| let app = createApp(App) | ||
| app.mount('#app') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
|
|
||
| module.exports = { | ||
| css: { | ||
| extract: false, // inline css into js | ||
| loaderOptions: { | ||
| sass: {}, | ||
| scss: {} | ||
| } | ||
| }, | ||
| chainWebpack: config => { | ||
| config.resolve.alias.set('vue', '@vue/compat') | ||
|
|
||
| config.module | ||
| .rule('vue') | ||
| .use('vue-loader') | ||
| .tap(options => { | ||
| return { | ||
| ...options, | ||
| compilerOptions: { | ||
| compatConfig: { | ||
| MODE: 2 | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| } | ||
| } |
Oops, something went wrong.