From 11ecf7b839a27d76ae3d5893a9fc080251633730 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Sat, 30 Jan 2021 17:35:32 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=A2=9E=E5=8A=A0=E7=9D=80?= =?UTF-8?q?=E8=89=B2;=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AA=E5=B0=BA?= =?UTF-8?q?=E5=AF=B8=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/code/colorful.js | 56 +++++++++++++++++++++ src/code/index.wc | 63 ++++++++++++++++++----- src/form/button.wc | 117 +++++++++++++++---------------------------- src/markd/core.js | 32 ++++++------ 4 files changed, 164 insertions(+), 104 deletions(-) create mode 100644 src/code/colorful.js diff --git a/src/code/colorful.js b/src/code/colorful.js new file mode 100644 index 0000000..4f671ec --- /dev/null +++ b/src/code/colorful.js @@ -0,0 +1,56 @@ +/** + * 简单的代码着色 (html, css, js) + * @author yutent + * @date 2021/01/30 14:00:12 + */ + +const DOCTYPE_EXP = /<\!DOCTYPE html>/ +const TAG_START_EXP = /<([\w\-]+)([\w\W]*?)>/g +const TAG_END_EXP = /<\/([\w\-]+)>/g +const TAG_ATTR_EXP = /[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g +const TAG_CM_EXP = //g +// const TAGS = 'a,b,i' + +export function colorHtml(code) { + code = code + .replace(DOCTYPE_EXP, '[tag]<!DOCTYPE [attr]html[/attr]>[/tag]') + .replace(TAG_START_EXP, (m, tag, attr) => { + if (attr) { + attr = attr.replace(TAG_ATTR_EXP, function(t) { + if (~t.indexOf('=')) { + t = t.split('=') + let a = t.shift() + let b = t.join('=') + return `[attr]${a}[/attr]=[str]${b}[/str]` + } else { + return `[attr]${t}[/attr]` + } + }) + } + return `[tag]<${tag + attr}>[/tag]` + }) + .replace(TAG_END_EXP, (m, tag) => { + return `[tag]</${tag}>[/tag]` + }) + .replace(TAG_CM_EXP, '<!--$1-->') + return code + .replace(/\[(\/?)tag\]/g, (m, s) => (s ? '' : '')) + .replace(/\[(\/?)attr\]/g, (m, s) => (s ? '' : '')) + .replace(/\[(\/?)str\]/g, (m, s) => (s ? '' : '')) +} + +export function colorCss(code) { + code = code + .replace( + /:(hover|after|active|last\-child|first\-child)/g, + ':$1' + ) + .replace(/([\.#])([\w\-]+)/g, '$1$2') + .replace( + /([a-zA-Z\-]+):\s?([^;\n]+);?/g, + '$1: $2;' + ) + .replace(/([,\{\}])/g, '$1') + .replace(/&/g, '&') + return code +} diff --git a/src/code/index.wc b/src/code/index.wc index 9bb1e24..c04b613 100644 --- a/src/code/index.wc +++ b/src/code/index.wc @@ -8,7 +8,7 @@ - + @@ -25,6 +25,7 @@ width: 100%; max-height: 610px; margin: 10px 0; + padding-bottom: 8px; border-radius: 6px; background: #f7f8fb; color: var(--color-dark-1); @@ -71,23 +72,23 @@ } } - .code { + .scoll { flex: 1; padding: 5px 0; - line-height: 18px; + line-height: 20px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; - font-size: 13px; + font-size: 14px; color: var(--color-dark-1); cursor: text; counter-reset: code; - p { - display: flex; + code { + display: block; position: relative; - min-height: 18px; + min-height: 20px; padding: 0 8px 0 45px; white-space: pre-wrap; - word-wrap: break-word; + word-break: break-word; &::before { position: absolute; @@ -100,6 +101,26 @@ content: counter(code); counter-increment: code; } + + i { + font-style: normal; + } + + .r { + color: var(--color-red-1); + } + .b { + color: var(--color-blue-1); + } + .g { + color: var(--color-green-1); + } + .gr { + color: var(--color-grey-2); + } + .o { + color: var(--color-orange-2); + } } } } @@ -133,6 +154,7 @@ import '../scroll/index' import '../layer/index' import $ from '../utils' +import { colorHtml, colorCss } from './colorful' export default class Code { props = { @@ -159,16 +181,33 @@ export default class Code { } set value(txt) { - this.props.content = txt + txt = txt .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') + this.props.content = txt + + switch (this.props.lang) { + case 'html': + txt = colorHtml(txt) + break + + case 'css': + case 'scss': + case 'less': + txt = colorCss(txt) + break + + default: + txt = txt.replace(//g, '>') + break + } + txt = txt - .replace(//g, '>') .split('\n') - txt = txt.map(s => `

${s}

`).join('') + .map(s => `${s}`) + .join('') this.__CODE__.innerHTML = txt } diff --git a/src/form/button.wc b/src/form/button.wc index 4925bc0..621a65c 100644 --- a/src/form/button.wc +++ b/src/form/button.wc @@ -9,8 +9,8 @@ :host { overflow: hidden; display: inline-flex; - min-width: 64px; - height: 32px; + min-width: 76px; + height: 36px; border-radius: 6px; user-select: none; -moz-user-select: none; @@ -29,10 +29,10 @@ padding: var(--padding, 0 14px); margin: auto; line-height: 1; - border: 0; + border: 2px solid var(--color-plain-2); border-radius: inherit; white-space: nowrap; - background: var(--color-plain-2); + background: #fff; font-size: inherit; font-family: inherit; outline: none; @@ -74,17 +74,23 @@ } :host([size='medium']) { min-width: 128px; - height: 36px; + height: 44px; button { padding: 0 18px; } } :host([size='medium'][circle]) { - min-width: 36px; + min-width: 44px; +} +:host([size='small']) { + height: 32px; +} +:host([size='small'][circle]) { + min-width: 32px; } :host([size='mini']) { - min-width: 26px; + min-width: 32px; height: 26px; font-size: 12px; @@ -104,7 +110,7 @@ border-radius: 26px; } :host([circle]) { - min-width: 32px; + min-width: 36px; border-radius: 50%; button { padding: 0; @@ -120,43 +126,28 @@ :host([type]) { color: #fff; -} -:host([link]) { - min-width: auto; - height: auto; - font-size: 14px; - color: var(--color-plain-3); - button { - padding: 0; - background: none; - - &:hover { - text-decoration: underline; - } + border: 0; } } -:host(:not([disabled]):not([loading]):not([link])) button { +:host(:not([disabled]):not([loading])) button { &:hover { - background: var(--color-plain-1); + border-color: var(--color-plain-1); } &:active { - background: var(--color-plain-3); + border-color: var(--color-plain-3); } } -:host(:focus-within:not([link])) { +:host(:focus-within) { box-shadow: 0 0 0 2px var(--color-plain-a); } // ------------- -:host([type='danger']:not([link])) button { +:host([type='danger']) button { background: var(--color-red-2); } -:host([type='danger'][link]) button { - color: var(--color-red-1); -} -:host([type='danger']:not([disabled]):not([loading]):not([link])) button { +:host([type='danger']:not([disabled]):not([loading])) button { &:hover { background: var(--color-red-1); } @@ -164,18 +155,15 @@ background: var(--color-red-3); } } -:host([type='danger']:focus-within:not([link])) { +:host([type='danger']:focus-within) { box-shadow: 0 0 0 2px var(--color-red-a); } // ------------- -:host([type='info']:not([link])) button { +:host([type='info']) button { background: var(--color-blue-2); } -:host([type='info'][link]) button { - color: var(--color-blue-2); -} -:host([type='info']:not([disabled]):not([loading]):not([link])) button { +:host([type='info']:not([disabled]):not([loading])) button { &:hover { background: var(--color-blue-1); } @@ -183,18 +171,15 @@ background: var(--color-blue-3); } } -:host([type='info']:focus-within:not([link])) { +:host([type='info']:focus-within) { box-shadow: 0 0 0 2px var(--color-blue-a); } // -------- -:host([type='success']:not([link])) button { +:host([type='success']) button { background: var(--color-green-2); } -:host([type='success'][link]) button { - color: var(--color-green-2); -} -:host([type='success']:not([disabled]):not([loading]):not([link])) button { +:host([type='success']:not([disabled]):not([loading])) button { &:hover { background: var(--color-green-1); } @@ -202,18 +187,15 @@ background: var(--color-green-3); } } -:host([type='success']:focus-within:not([link])) { +:host([type='success']:focus-within) { box-shadow: 0 0 0 2px var(--color-green-a); } // --------- -:host([type='primary']:not([link])) button { +:host([type='primary']) button { background: var(--color-teal-2); } -:host([type='primary'][link]) button { - color: var(--color-teal-2); -} -:host([type='primary']:not([disabled]):not([loading]):not([link])) button { +:host([type='primary']:not([disabled]):not([loading])) button { &:hover { background: var(--color-teal-1); } @@ -221,18 +203,15 @@ background: var(--color-teal-3); } } -:host([type='primary']:focus-within:not([link])) { +:host([type='primary']:focus-within) { box-shadow: 0 0 0 2px var(--color-teal-a); } // ---------- -:host([type='warning']:not([link])) button { +:host([type='warning']) button { background: var(--color-orange-2); } -:host([type='warning'][link]) button { - color: var(--color-orange-2); -} -:host([type='warning']:not([disabled]):not([loading]):not([link])) button { +:host([type='warning']:not([disabled]):not([loading])) button { &:hover { background: var(--color-orange-1); } @@ -240,18 +219,15 @@ background: var(--color-orange-3); } } -:host([type='warning']:focus-within:not([link])) { +:host([type='warning']:focus-within) { box-shadow: 0 0 0 2px var(--color-orange-a); } // ------- -:host([type='inverse']:not([link])) button { +:host([type='inverse']) button { background: var(--color-dark-2); } -:host([type='inverse'][link]) button { - color: var(--color-dark-2); -} -:host([type='inverse']:not([disabled]):not([loading]):not([link])) button { +:host([type='inverse']:not([disabled]):not([loading])) button { &:hover { background: var(--color-dark-1); } @@ -259,18 +235,15 @@ background: var(--color-dark-3); } } -:host([type='inverse']:focus-within:not([link])) { +:host([type='inverse']:focus-within) { box-shadow: 0 0 0 2px var(--color-dark-a); } // ------- -:host([type='default']:not([link])) button { +:host([type='default']) button { background: var(--color-grey-2); } -:host([type='default'][link]) button { - color: var(--color-grey-2); -} -:host([type='default']:not([disabled]):not([loading]):not([link])) button { +:host([type='default']:not([disabled]):not([loading])) button { &:hover { background: var(--color-grey-1); } @@ -278,7 +251,7 @@ background: var(--color-grey-3); } } -:host([type='default']:focus-within:not([link])) { +:host([type='default']:focus-within) { box-shadow: 0 0 0 2px var(--color-grey-a); } @@ -287,16 +260,6 @@ cursor: not-allowed; opacity: 0.6; } - -:host([link][loading]), -:host([link][disabled]) { - button { - &:hover, - &:active { - text-decoration: none; - } - } -}