diff --git a/package.json b/package.json index 3362b41..bacc279 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,14 @@ "url": "git+https://github.com/bytedo/wcui.git" }, "main": "dist/", - "keywords": ["web-components", "wc", "components", "yutent"], + "keywords": [ + "web-components", + "wc", + "components", + "yutent" + ], "author": "yutent", "license": "MIT", - "dependencies": {}, "devDependencies": { "chalk": "^2.4.2", "chokidar": "^1.7.0", diff --git a/src/code/index.wc b/src/code/index.wc index c04b613..4c28ce1 100644 --- a/src/code/index.wc +++ b/src/code/index.wc @@ -159,7 +159,12 @@ import { colorHtml, colorCss } from './colorful' export default class Code { props = { dark: '', - lang: '' + lang: '', + code: '' + } + + state = { + content: '' } __init__() { @@ -176,17 +181,14 @@ export default class Code { this.__CP__ = header.children[2].lastElementChild } - get value() { - return this.props.content + get code() { + return this.state.content } - set value(txt) { - txt = txt - .replace(/&/g, '&') - .replace(/</g, '<') - .replace(/>/g, '>') + set code(txt) { + txt = txt.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>') - this.props.content = txt + this.state.content = txt switch (this.props.lang) { case 'html': @@ -218,9 +220,10 @@ export default class Code { if (txt.startsWith('') && txt.endsWith('')) { txt = txt.slice(5, -6).trim() } - - this.value = txt - this.textContent = '' + if (txt) { + this.value = txt + this.textContent = '' + } this._cpFN = $.bind(this.__CP__, 'click', ev => { try { @@ -248,13 +251,15 @@ export default class Code { watch() { switch (name) { case 'lang': - this.props.lang = val.toLowerCase() + this.props.lang = (val || '').toLowerCase() this.__LANG__.textContent = this.props.lang break - case 'value': - this.value = val - this.removeAttribute('value') + case 'code': + if (val !== null) { + this.code = val + this.removeAttribute('code') + } break } }