cancel @vue/compat & bring back element-plus demo

.eslintignore

@@ -0,0 +1 @@
+./dist/

README.md

@@ -16,7 +16,7 @@ Live Demo & Documentation: https://fritx.github.io/vue-at
 - [x] Content-Editable / Textarea
 - [x] Avatars, custom templates
 - [x] Vue2 / Vue1
-- [x] Vuetify / Element-UI
+- [x] Vuetify / Element-UI / Element Plus
 - [ ] Vue-CLI 3 migration
 
 See also: [react-at](https://github.com/fritx/react-at)
@@ -172,11 +172,11 @@ This gives you the option of changing the style of inserted tagged items. It is
 </at-ta>
 ```
 
-### Element-UI el-input
+### Element UI / Element-Plus el-input
 
 ```vue
 <at-ta :members="members">
   <!-- slots -->
-  <el-input v-model:value="text" type="textarea"></el-input>
+  <el-input v-model="text" type="textarea"></el-input>
 </at-ta>
 ```

package.json

@@ -7,14 +7,14 @@
   "scripts": {
     "lint:fix": "vue-cli-service lint",
     "lint": "vue-cli-service lint --no-fix",
+    "dev:dist": "vue-cli-service serve --skip-plugins eslint",
     "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",
+  "main": "dist/vue-at.common.js",
   "engines": {
     "node": ">= 14.x"
   },
@@ -31,6 +31,7 @@
     "@vue/compat": "^3.1.0",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-standard": "^8.0.1",
+    "element-plus": "^2.2.12",
     "eslint": "^8.21.0",
     "eslint-plugin-vue": "^9.3.0",
     "npm-run-all": "^4.1.5",

src/App.vue

@@ -63,17 +63,17 @@
       <v-textarea class="vuetify-editor" v-model:value="text2"></v-textarea>
     </at-ta>
 
-    <br />
+    <br> -->
 
     <at-ta :members="members" name-key="name">
-      <!- custom: with avatars ->
-      <template v-slot:item="s">
+      <!-- custom: with avatars -->
+      <template #item="s">
         <img :src="s.item.avatar">
-        <span v-text="s.item.name"></span>
+        <span v-text="s.item.name" />
       </template>
 
-      <el-input type="textarea" v-model:value="text3" class="element-editor"></el-input>
-    </at-ta> -->
+      <el-input type="textarea" v-model="text3" class="element-editor" />
+    </at-ta>
   </div>
 </template>
 

src/main.js

@@ -1,13 +1,18 @@
 // import 'element-ui/lib/theme-chalk/index.css'
+import 'element-plus/dist/index.css'
 // import 'vuetify/dist/vuetify.min.css'
 // import Vuetify from 'vuetify'
 // import ElementUI from 'element-ui'
-import { createApp, configureCompat } from 'vue'
+import ElementPlus from 'element-plus'
+// import { createApp, configureCompat } from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 
 // Vue.use(Vuetify)
 // Vue.use(ElementUI)
 
+let configureCompat = () => {}
+
 configureCompat({
   // vue3 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:
@@ -26,4 +31,7 @@ configureCompat({
 // 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.use(ElementPlus)
+
 app.mount('#app')

vue.config.js

@@ -8,7 +8,7 @@ module.exports = {
     }
   },
   chainWebpack: config => {
-    config.resolve.alias.set('vue', '@vue/compat')
+    // config.resolve.alias.set('vue', '@vue/compat')
 
     config.module
       .rule('vue')