From db2a86dbc6a666d76879661baba7f7f7cb837aa3 Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Tue, 21 Mar 2023 16:52:22 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=AE=8C=E6=88=90number=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/form/input.js | 4 +- src/form/number.js | 330 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 332 insertions(+), 2 deletions(-) create mode 100644 src/form/number.js diff --git a/src/form/input.js b/src/form/input.js index 4ba5855..416361e 100644 --- a/src/form/input.js +++ b/src/form/input.js @@ -343,7 +343,7 @@ class Input extends Component { renderClose() { return html`` } @@ -365,7 +365,7 @@ class Input extends Component { /> ${this.closeable && this.value ? this.renderClose() : ''} ${this.icon - ? html`` + ? html`` : html``} ` diff --git a/src/form/number.js b/src/form/number.js new file mode 100644 index 0000000..7efacf0 --- /dev/null +++ b/src/form/number.js @@ -0,0 +1,330 @@ +/** + * {数字文本框组件} + * @author yutent + * @date 2023/03/06 15:17:25 + */ + +import { css, html, Component, nextTick } from '@bd/core' + +class WcNumber extends Component { + static props = { + type: 'primary', + size: 'l', + max: null, + min: null, + step: 1, + value: { + type: Number, + default: 0, + attribute: false + }, + readonly: false, + autofocus: false, + disabled: false, + lazy: 1000 // 并发拦截时间, 单位毫秒 + } + + static styles = [ + // 基础样式 + css` + :host { + overflow: hidden; + display: inline-flex; + min-width: 128px; + height: 36px; + user-select: none; + -moz-user-select: none; + color: var(--color-dark-1); + border-radius: 3px; + cursor: text; + transition: box-shadow 0.15s linear; + } + + :host(:focus-within) { + box-shadow: 0 0 0 2px var(--color-plain-a); + } + .label { + display: flex; + width: 100%; + height: 100%; + margin: 0 auto; + line-height: 1; + font-size: 14px; + border: 1px solid var(--color-grey-2); + border-radius: inherit; + background: var(--bg-color, #fff); + color: inherit; + cursor: text; + + span { + display: flex; + justify-content: center; + align-items: center; + width: 34px; + height: 100%; + font-size: 18px; + cursor: pointer; + + &:first-child { + border-radius: 3px 0 0 3px; + border-right: 1px solid var(--color-grey-a); + } + &:last-child { + border-radius: 0 3px 3px 0; + border-left: 1px solid var(--color-grey-a); + } + + &.disabled { + cursor: not-allowed; + opacity: 0.6; + } + } + + input { + flex: 1; + min-width: 32px; + width: 0; + height: 100%; + padding: 0 6px; + border: 0; + border-radius: inherit; + color: inherit; + font: inherit; + text-align: center; + background: none; + outline: none; + box-shadow: none; + cursor: inherit; + + &::placeholder { + color: var(--color-grey-1); + } + } + /* ----- */ + } + `, + // 尺寸 + css` + @use 'sass:map'; + $sizes: ( + s: ( + w: 52px, + h: 20px, + f: 12px + ), + m: ( + w: 72px, + h: 24px, + f: 12px + ), + l: ( + w: 108px, + h: 32px, + f: 14px + ), + xl: ( + w: 132px, + h: 36px, + f: 14px + ), + xxl: ( + w: 160px, + h: 44px, + f: 14px + ), + xxxl: ( + w: 192px, + h: 52px, + f: 16px + ), + xxxxl: ( + w: 212px, + h: 64px, + f: 18px + ) + ); + + @loop $s, $v in $sizes { + :host([size='#{$s}']) { + min-width: map.get($v, 'w'); + height: map.get($v, 'h'); + font-size: map.get($v, 'f'); + + .icon { + --size: #{map.get($v, 'f')}; + } + } + :host([size='#{$s}'][circle]) { + width: map.get($v, 'h'); + height: map.get($v, 'h'); + } + } + + :host([round]) { + border-radius: 99rem; + } + `, + // 配色 + css` + $colors: ( + primary: 'teal', + info: 'blue', + success: 'green', + warning: 'orange', + danger: 'red', + secondary: 'dark', + help: 'grey' + ); + + @loop $t, $c in $colors { + :host([type='#{$t}']:focus-within) { + box-shadow: 0 0 0 2px var(--color-#{$c}-a); + } + :host([type='#{$t}']) span { + border-color: var(--color-#{$c}-a); + } + :host([type='#{$t}']) .label { + border-color: var(--color-#{$c}-2); + } + } + `, + // 状态 + css` + :host([disabled]) { + cursor: not-allowed; + opacity: 0.6; + } + /* --- */ + :host([readonly]) .label { + cursor: default; + opacity: 0.8; + span { + cursor: inherit; + } + } + :host([disabled]) .label { + background: var(--color-plain-1); + cursor: not-allowed; + opacity: 0.6; + span { + cursor: inherit; + } + } + ` + ] + + created() { + this.stamp = 0 + } + + mounted() { + if (this.autofocus) { + // 需要focus()才能聚焦成功 + nextTick(_ => this.$refs.input.focus()) + } + this.value = this.clapm(this.value) + this.$refs.input.value = this.value + } + + onClick(e) { + if (e.target.classList.contains('disabled')) { + return + } + const { disabled, readOnly } = this + if (disabled || readOnly) { + return + } + const { act } = e.target.dataset + this.updateValue(act) + } + updateValue(act) { + const { max, min, step, value } = this + if (act === '+') { + if (max === null || value + step <= max) { + this.value += step + } else { + this.value = max + } + } else { + if (min === null || value - step >= min) { + this.value -= step + } else { + this.value = min + } + } + this.$emit('input') + } + onChange(e) { + this.value = this.clapm(e.target.value) + this.$refs.input.value = this.value + } + onKeydown(ev) { + const now = Date.now() + const { lazy, disabled, readOnly } = this + + if (disabled || readOnly) { + return + } + + // up: 38, down: 40 + if (ev.keyCode === 38 || ev.keyCode === 40) { + ev.preventDefault() + return this.updateValue(ev.keyCode === 38 ? '+' : '-') + } + // 回车触发submit事件 + if (ev.keyCode === 13) { + ev.preventDefault() + + // 并发拦截 + if (lazy && now - this.stamp < lazy) { + return + } + + this.stamp = now + this.value = this.clapm(ev.target.value) + this.$refs.input.value = this.value + this.$emit('submit', { value: this.value }) + } + } + + clapm(val) { + const max = this.max ?? Number.MAX_SAFE_INTEGER + const min = this.min ?? Number.MIN_SAFE_INTEGER + return Math.min(max, Math.max(+val, min)) + } + render() { + return html` +
+ - + + this.max + ? 'disabled' + : ''} + @click=${this.onClick} + >+ +
+ ` + } +} + +customElements.define('wc-number', WcNumber) From 21cb347354af8505ab47f78a1794ccef37047c53 Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Tue, 21 Mar 2023 17:06:31 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=B3=A8=E5=86=8C=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/form/input.js | 2 +- src/form/number.js | 2 +- src/form/textarea.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/form/input.js b/src/form/input.js index 416361e..37de94c 100644 --- a/src/form/input.js +++ b/src/form/input.js @@ -385,4 +385,4 @@ class Input extends Component { } } -customElements.define('wc-input', Input) +Input.reg('input') diff --git a/src/form/number.js b/src/form/number.js index 7efacf0..cc731dd 100644 --- a/src/form/number.js +++ b/src/form/number.js @@ -327,4 +327,4 @@ class WcNumber extends Component { } } -customElements.define('wc-number', WcNumber) +WcNumber.reg('number') diff --git a/src/form/textarea.js b/src/form/textarea.js index 27ada78..538f9f7 100644 --- a/src/form/textarea.js +++ b/src/form/textarea.js @@ -217,4 +217,4 @@ class TextArea extends Component { } } -customElements.define('wc-textarea', TextArea) +TextArea.reg('textarea') From 20e07082e19a068388378206d4678dd3a1b7bbc4 Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Tue, 21 Mar 2023 18:18:16 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BC=98=E5=8C=96scroll=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scroll/index.js | 35 ++++++++++++++++------------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/src/scroll/index.js b/src/scroll/index.js index 85634b1..07ba7c2 100644 --- a/src/scroll/index.js +++ b/src/scroll/index.js @@ -8,13 +8,7 @@ import { css, bind, html, unbind, Component } from '@bd/core' class Scroll extends Component { static props = { - axis: { - type: String, - default: 'xy', - observer(val) { - this.onAxisChange(val) - } - }, + axis: 'xy', distance: 0 } dragging = false @@ -23,7 +17,7 @@ class Scroll extends Component { css` :host { position: relative; - overflow: hidden; + overflow: auto; display: block; &::-webkit-scrollbar { display: none; @@ -34,7 +28,6 @@ class Scroll extends Component { position: relative; } .scroll-bar { - display: none; position: absolute; background: #909399; width: 0; @@ -64,16 +57,22 @@ class Scroll extends Component { visibility: hidden; } } + :host([axis='x']) { + overflow-x: auto; + overflow-y: hidden; + .vertical { + display: none; + } + } + :host([axis='y']) { + overflow-y: auto; + overflow-x: hidden; + .horizon { + display: none; + } + } ` ] - onAxisChange(val) { - this.style.overflow = 'hidden' - if (val === 'xy') { - this.style.overflow = 'auto' - } else { - this.style[`overflow-${val}`] = 'auto' - } - } render() { return html` @@ -193,12 +192,10 @@ class Scroll extends Component { this.horizonWidth = 0 } if (axis.includes('x')) { - horizon.style.display = 'block' horizon.style.width = this.horizonWidth + 'px' bind(horizon, 'mousedown', this.onmousedown.bind(this)) } if (axis.includes('y')) { - vertical.style.display = 'block' vertical.style.height = this.verticalHeight + 'px' bind(vertical, 'mousedown', this.onmousedown.bind(this)) }