Skip to content

Commit 82742e9

Browse files
ttttonyhettttonyhe
committed
feat: web component
1 parent f6f2e50 commit 82742e9

File tree

10 files changed

+181
-192
lines changed

10 files changed

+181
-192
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
.DS_Store
33
node_modules
44
dist
5+
dist-wc

‎README.md

+30
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,36 @@ Use the nexment component:
140140

141141
<br/>
142142

143+
## Use Nexment in Browsers
144+
Nexment can be used as a web component in browsers. That means it can work without a Vue.js instance. Follow the following steps to set it up:
145+
146+
Add Nexment stylesheet to your <head> through CDN:
147+
```html
148+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexment-vue/dist/nexment-vue.css">
149+
```
150+
151+
Add Nexment main file through CDN:
152+
```html
153+
<script src="https://cdn.jsdelivr.net/npm/nexment-vue/dist-wc/nexment-vue.min.js"></script>
154+
```
155+
156+
Use Nexment component in your page(`pagekey` is optional):
157+
```html
158+
<nexment-container
159+
email="xxx"
160+
name="xxx"
161+
serverurl="xxx"
162+
appkey="xxx"
163+
appid="xxx"
164+
pagekey="xxx"
165+
enablelinkinput="xxx"
166+
></nexment-container>
167+
```
168+
169+
See Nexment web component demo here: [https://github.com/HelipengTony/nexment-vue/blob/master/index.html](https://github.com/HelipengTony/nexment-vue/blob/master/index.html)
170+
171+
<br/>
172+
143173
## TypeScript Support
144174
Currently type-checking is not supported, please add the following declaration to any .d.ts file in your project:
145175
```ts

‎package.json

+14-12
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,14 @@
33
"license": "MIT",
44
"version": "0.0.14",
55
"scripts": {
6-
"build-lib": "vue-cli-service build --target lib --name nexment-vue src/main.ts --inline-vue"
6+
"build-lib": "vue-cli-service build --target lib --name nexment-vue src/main.ts --inline-vue",
7+
"build-wc": "vue-cli-service build --target wc --name nexment-vue src/component.ts --dest dist-wc --inline-vue"
78
},
89
"main": "./dist/nexment-vue.common.js",
910
"dependencies": {
1011
"vue": "^2.6.11"
1112
},
1213
"devDependencies": {
13-
"vue-class-component": "^7.2.3",
14-
"vue-content-loader": "^0.2.3",
15-
"vue-js-modal": "^2.0.0-rc.6",
16-
"vue-ls": "^3.2.1",
17-
"vue-property-decorator": "^8.4.2",
18-
"vue-showdown": "^2.4.1",
1914
"@types/autosize": "^3.0.7",
2015
"@types/insert-text-at-cursor": "^0.3.0",
2116
"@types/js-md5": "^0.4.2",
@@ -24,21 +19,28 @@
2419
"@vue/cli-plugin-typescript": "~4.5.0",
2520
"@vue/cli-service": "~4.5.0",
2621
"@vue/composition-api": "^1.0.0-beta.8",
27-
"node-sass": "^4.12.0",
28-
"sass-loader": "^8.0.2",
29-
"typescript": "~3.9.3",
30-
"vue-template-compiler": "^2.6.11",
22+
"@vue/web-component-wrapper": "^1.2.0",
3123
"autosize": "^4.0.2",
3224
"core-js": "^3.6.5",
3325
"github-markdown-css": "^4.0.0",
3426
"insert-text-at-cursor": "^0.3.0",
3527
"js-md5": "^0.7.3",
3628
"leancloud-storage": "^4.6.1",
3729
"markdown-it": "^11.0.0",
30+
"node-sass": "^4.12.0",
3831
"qs": "^6.9.4",
32+
"sass-loader": "^8.0.2",
3933
"swrv": "^0.7.2",
4034
"timeago.js": "^4.0.2",
35+
"typescript": "~3.9.3",
4136
"unfetch": "^4.1.0",
42-
"v-tooltip": "^2.0.3"
37+
"v-tooltip": "^2.0.3",
38+
"vue-class-component": "^7.2.3",
39+
"vue-content-loader": "^0.2.3",
40+
"vue-js-modal": "^2.0.0-rc.6",
41+
"vue-ls": "^3.2.1",
42+
"vue-property-decorator": "^8.4.2",
43+
"vue-showdown": "^2.4.1",
44+
"vue-template-compiler": "^2.6.11"
4345
}
4446
}

‎src/assets/lib/nexment-lib.css

-176
This file was deleted.

‎src/assets/style/commentslist.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ $borderColor: #e8e8e8;
309309
overflow-y: scroll !important;
310310
box-shadow: 0px 2px 8px rgba(213, 222, 231, 0.3);
311311
@media screen and (min-width: 1000px) {
312-
height: 90vh !important;
312+
height: 90vh;
313313
transform: none !important;
314314
width: 75vh !important;
315315
left: calc((100% - 75vh) / 2) !important;

‎src/component.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* Nexment Web Component
3+
*/
4+
import Vue from "vue";
5+
import wrap from "@vue/web-component-wrapper";
6+
import NexmentContainer from "./components/container/component.vue";
7+
8+
const Element = wrap(Vue, NexmentContainer);
9+
10+
// Avoid console error
11+
window.onerror = function() {
12+
return true;
13+
};
14+
15+
// Define web component
16+
window.customElements.define("nexment-container", Element);

0 commit comments

Comments
 (0)