From ed2c6daad113e2ecdbeb593eb8bda6a4b88a5071 Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Wed, 22 Dec 2021 16:37:49 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix(color-picker):=20'=E4=BC=98=E5=8C=96pal?=
=?UTF-8?q?ette=E6=8B=96=E6=8B=BD=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/color-palette/color-palette.tsx | 2 +-
.../devui/color-picker/src/utils/domDragger.ts | 14 ++++++++------
2 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx
index 1bd6e577eb..882d8f8746 100644
--- a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx
+++ b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx
@@ -97,7 +97,7 @@ export default defineComponent({
onMounted(() => {
renderCanvas()
if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) {
- DOMUtils.triggerDragEvent(handlerElement.value, {
+ DOMUtils.triggerDragEvent(paletteInstance.vnode.el as HTMLElement, {
drag: (event: Event) => {
clickTransfrom.value = null
handleDrag(event as MouseEvent)
diff --git a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
index e39258faf0..5e520c8073 100644
--- a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
+++ b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
@@ -82,26 +82,28 @@ export class DOMUtils {
const upFn = (event: Event) => {
DOMUtils.removeEventListener(document, 'mousemove', moveFn)
DOMUtils.removeEventListener(document, 'mouseup', upFn)
+ DOMUtils.removeEventListener(document, 'touchmove', moveFn)
+ DOMUtils.removeEventListener(document, 'touchend', upFn)
document.onselectstart = null
document.ondragstart = null
isDragging = false
-
options.end?.(event)
}
-
- DOMUtils.addEventListener(element, 'mousedown', (event) => {
+ const downFn = (event: Event) => {
if (isDragging) return
document.onselectstart = () => false
document.ondragstart = () => false
DOMUtils.addEventListener(document, 'mousemove', moveFn)
DOMUtils.addEventListener(document, 'mouseup', upFn)
-
+ DOMUtils.addEventListener(document, 'touchmove', moveFn)
+ DOMUtils.addEventListener(document, 'touchend', upFn)
isDragging = true
options.start?.(event)
- })
-
+ }
+ DOMUtils.addEventListener(element, 'mousedown', downFn)
+ DOMUtils.addEventListener(element, 'touchstart', downFn)
return
}
From b2a1cf17979832dd5b9e9a625a02496260f824da Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Sat, 25 Dec 2021 16:22:10 +0800
Subject: [PATCH 2/4] =?UTF-8?q?docs(colorpicker,=20statistic,=20ripple):?=
=?UTF-8?q?=20'=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3=20'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../docs/components/color-picker/index.md | 14 +-
.../devui-vue/docs/components/ripple/index.md | 2 +-
.../docs/components/statistic/index.md | 17 +-
.../en-US/components/color-picker/index.md | 158 ++++++++++++++++++
.../docs/en-US/components/ripple/index.md | 4 +-
.../docs/en-US/components/statistic/index.md | 2 +-
6 files changed, 172 insertions(+), 25 deletions(-)
create mode 100644 packages/devui-vue/docs/en-US/components/color-picker/index.md
diff --git a/packages/devui-vue/docs/components/color-picker/index.md b/packages/devui-vue/docs/components/color-picker/index.md
index 8e2f49be5f..5b4ba31257 100644
--- a/packages/devui-vue/docs/components/color-picker/index.md
+++ b/packages/devui-vue/docs/components/color-picker/index.md
@@ -109,7 +109,7 @@ export default defineComponent({
:::
### 基础面板自定义
-设置可供选择的基础面板颜色样本
+设置可自定义配置的基础面板颜色样本
:::demo
```vue
@@ -151,20 +151,10 @@ export default defineComponent({
d-color-picker 参数
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
-| ------------ | --------- | ------ | ------------------------------------------- | --------------------------- |
+| :---: | :---: | :---: | :---: | :---: |
| mode | `String` | `rgb` | 切换颜色模式 | [颜色模式](#颜色模式) | |
| dotSize | `Number` | `15` | 调色板圆点大小 | | |
| swatches | `Array` | | 预定义样本面板 | [色块样本](#基础面板自定义) | |
| show-alpha | `Boolean` | `true` | 是否展示透明度进度条 | [透明度展示](#颜色透明度) | |
| show-history | `Boolean` | `true` | 是否展示历史颜色 | [历史颜色展示](#历史颜色) | |
| v-model | `String` | | 绑定颜色Value支持(hex , rgb , hsl , hsv ) | | |
-
-
-
-d-color-picker 事件
-
-| 事件 | 类型 | 说明 | 跳转 Demo |
-| ---- | ---- | ---- | --------- |
-| | | | |
-| | | | |
-| | | | |
diff --git a/packages/devui-vue/docs/components/ripple/index.md b/packages/devui-vue/docs/components/ripple/index.md
index 3bd30f57eb..b5b9f491a0 100644
--- a/packages/devui-vue/docs/components/ripple/index.md
+++ b/packages/devui-vue/docs/components/ripple/index.md
@@ -200,7 +200,7 @@ Card 组件
### API
| 参数 | 类型 | 默认 | 说明 |
-| :-------------: | :-------: | :---------: | :-------------------------------- |
+| :---: | :---: | :---: | :---: |
| color | `string` | `#00000050` | 可选,默认当前文本颜色 |
| initial-opacity | `number` | `0.1` | 可选,初始交互效果透明度大小 |
| final-opacity | `number` | `0.1` | 可选,结束交互效果长按透明度大小 |
diff --git a/packages/devui-vue/docs/components/statistic/index.md b/packages/devui-vue/docs/components/statistic/index.md
index f3f020d62e..1fa5cbc798 100644
--- a/packages/devui-vue/docs/components/statistic/index.md
+++ b/packages/devui-vue/docs/components/statistic/index.md
@@ -164,14 +164,14 @@ export default {
### d-statistic
-| 参数 | 类型 | 默认 | 说明 |
-| ------------------ | ------------------ | -------- | ---------------- |
-| title | `string \| v-slot` | - | 数值的标题 |
-| extra | `string \| v-slot` | - | 额外内容 |
-| value | `number \| string` | - | 数值内容 |
-| group-separator | `string` | , | 设置千分位标识符 |
-| precision | `number` | - | 设置数值精度 |
-| suffix | `string \| v-slot` | - | 设置数值的后缀 |
+| 参数 | 类型 | 默认 | 说明 |
+| :---: | :---: | :---: | :---: |
+| title | `string \| v-slot` | - | 数值的标题 |
+| extra | `string \| v-slot` | - | 额外内容 |
+| value | `number \| string` | - | 数值内容 |
+| group-separator | `string` | - | 设置千分位标识符 |
+| precision | `number` | - | 设置数值精度 |
+| suffix | `string \| v-slot` | - | 设置数值的后缀 |
| prefix | `string \| v-slot` | - | 设置数值的前缀 |
| title-style | `style` | - | 标题样式 |
| content-style | `style` | - | 内容样式 |
@@ -182,4 +182,3 @@ export default {
| easing | `string` | quartOut | 数字动画效果 |
| start | `boolean` | false | 是否开始动画 |
-
diff --git a/packages/devui-vue/docs/en-US/components/color-picker/index.md b/packages/devui-vue/docs/en-US/components/color-picker/index.md
new file mode 100644
index 0000000000..f1761e0487
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/color-picker/index.md
@@ -0,0 +1,158 @@
+# ColorPicker
+
+### When to use
+
+Allows users to use various interactive methods to select colors
+
+### Basic Usage
+
+:::demo
+
+```vue
+
+
+
+```
+
+:::
+
+### Color transparency
+
+Allows users to dynamically adjust the display alpha mode, which is true by default
+:::demo
+
+```vue
+
+ test showAlpha Be {{ show }}
+
+
+
+
+```
+
+:::
+
+### Color mode
+
+Set dynamic output color mode
+:::demo
+
+```vue
+
+
+
+
+
+```
+
+:::
+
+### Historical color
+
+Customize whether to display historical colors. By default, it is true
+:::demo
+
+```vue
+
+ test showAlpha Be {{ show }}
+
+
+
+
+```
+
+:::
+
+### Foundation panel customization
+Sets a customizable base panel color swatch
+:::demo
+
+```vue
+
+
+
+
+
+```
+
+:::
+
+### d-color-picker
+
+| parameter | type | default | introduce | Jump Demo |
+| :---: | :---: | :---: | :---: | :---: |
+| mode | `String` | `rgb` | Toggle color mode | [mode](#color-mode) | |
+| dotSize | `Number` | `15` | Palette dot size | | |
+| swatches | `Array` | | Predefined sample panels | [swatches](#foundation-panel-customization) | |
+| show-alpha | `Boolean` | `true` | Show transparency progress bar | [Color transparency](#color-transparency) | |
+| show-history | `Boolean` | `true` | Show historical colors | [show-history](#historical-color) | |
+| v-model | `String` | | Binding color value support(hex , rgb , hsl , hsv ) | | |
diff --git a/packages/devui-vue/docs/en-US/components/ripple/index.md b/packages/devui-vue/docs/en-US/components/ripple/index.md
index dfae7982b3..c8992dce49 100644
--- a/packages/devui-vue/docs/en-US/components/ripple/index.md
+++ b/packages/devui-vue/docs/en-US/components/ripple/index.md
@@ -200,8 +200,8 @@ Card Component
### API
-| 参数 | 类型 | 默认 | 说明 |
-| :-------------: | :-------: | :---------: | :---------------------------------------------------------------------------- |
+| parameter | type | default | introduce |
+| :---: | :---: | :---: | :---: |
| color | `string` | `#00000050` | Choose Default current text color |
| initial-opacity | `number` | `0.1` | Choose Initial interaction Opacity size |
| final-opacity | `number` | `0.1` | Choose, end the interactive effect and press the Opacity size for a long time |
diff --git a/packages/devui-vue/docs/en-US/components/statistic/index.md b/packages/devui-vue/docs/en-US/components/statistic/index.md
index e15adb35a3..ba256b4143 100644
--- a/packages/devui-vue/docs/en-US/components/statistic/index.md
+++ b/packages/devui-vue/docs/en-US/components/statistic/index.md
@@ -165,7 +165,7 @@ Prefix and suffix slots
### d-statistic
| parameter | type | default | introduce |
-| ------------------ | ------------------ | -------- | ---------------------------- |
+| :---: | :---: | :---: | :---: |
| title | `string \| v-slot` | - | Title of value |
| extra | `string \| v-slot` | - | Extra content |
| value | `number \| string` | - | Value content |
From f89e85c348c61842c183c8c8cbb02e36b6588979 Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Sat, 1 Jan 2022 12:27:26 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix(statistic):=20=E4=BF=AE=E5=A4=8D?=
=?UTF-8?q?=E6=8F=92=E6=A7=BD=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20ts?=
=?UTF-8?q?=E6=A0=BC=E5=BC=8F=E6=9A=82=E6=97=B6=E7=A7=BB=E9=99=A4showgroup?=
=?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../devui/statistic/src/statistic-types.ts | 4 +-
.../devui/statistic/src/statistic.scss | 2 +
.../devui/statistic/src/utils/animation.ts | 6 +-
.../devui/statistic/src/utils/easing.ts | 12 +-
.../docs/components/statistic/index.md | 125 ++++++++++--------
.../docs/en-US/components/statistic/index.md | 34 +++++
6 files changed, 118 insertions(+), 65 deletions(-)
diff --git a/packages/devui-vue/devui/statistic/src/statistic-types.ts b/packages/devui-vue/devui/statistic/src/statistic-types.ts
index db27965c2a..b70d8d5dc4 100644
--- a/packages/devui-vue/devui/statistic/src/statistic-types.ts
+++ b/packages/devui-vue/devui/statistic/src/statistic-types.ts
@@ -19,11 +19,11 @@ export const statisticProps = {
},
groupSeparator: {
type: String,
- default: ','
+ default: ''
},
showGroupSeparator: {
type: Boolean,
- default: false
+ default: true
},
titleStyle: {
type: Object as PropType
diff --git a/packages/devui-vue/devui/statistic/src/statistic.scss b/packages/devui-vue/devui/statistic/src/statistic.scss
index 229050af10..ec9a59092d 100644
--- a/packages/devui-vue/devui/statistic/src/statistic.scss
+++ b/packages/devui-vue/devui/statistic/src/statistic.scss
@@ -21,11 +21,13 @@
&-prefix {
margin-right: 6px;
display: flex;
+ align-items: center;
}
&-suffix {
margin-left: 6px;
display: flex;
+ align-items: center;
}
&--value {
diff --git a/packages/devui-vue/devui/statistic/src/utils/animation.ts b/packages/devui-vue/devui/statistic/src/utils/animation.ts
index 778f51d51b..3b3eb192fa 100644
--- a/packages/devui-vue/devui/statistic/src/utils/animation.ts
+++ b/packages/devui-vue/devui/statistic/src/utils/animation.ts
@@ -72,7 +72,7 @@ export class Tween {
this.keys = {}
}
- update() {
+ update(): void {
this.time = Date.now()
// delay some time
if (this.time < this.startTime) {
@@ -107,7 +107,7 @@ export class Tween {
}
// 递归 重绘
- start() {
+ start(): void {
this.startTime = Date.now() + this.delay
const tick = () => {
this.update()
@@ -122,7 +122,7 @@ export class Tween {
tick()
}
- stop() {
+ stop(): void {
cancelAnimationFrame(this.timer)
this.timer = null
}
diff --git a/packages/devui-vue/devui/statistic/src/utils/easing.ts b/packages/devui-vue/devui/statistic/src/utils/easing.ts
index 6dfa4ca2f8..4b0fb02fdc 100644
--- a/packages/devui-vue/devui/statistic/src/utils/easing.ts
+++ b/packages/devui-vue/devui/statistic/src/utils/easing.ts
@@ -2,15 +2,15 @@
const pow = Math.pow
const sqrt = Math.sqrt
-export const easeOutCubic = function (x: number) {
+export const easeOutCubic = function (x: number): number {
return 1 - pow(1 - x, 3)
}
-export const linear = (x) => x
-export const easeOutExpo = function (x: number) {
+export const linear = (x: number): number => x
+export const easeOutExpo = function (x: number): number {
return x === 1 ? 1 : 1 - pow(2, -10 * x)
}
-export const easeInOutExpo = function (x: number) {
+export const easeInOutExpo = function (x: number): number {
return x === 0
? 0
: x === 1
@@ -19,9 +19,9 @@ export const easeInOutExpo = function (x: number) {
? pow(2, 20 * x - 10) / 2
: (2 - pow(2, -20 * x + 10)) / 2
}
-export const easeInExpo = function (x: number) {
+export const easeInExpo = function (x: number): number {
return x === 0 ? 0 : pow(2, 10 * x - 10)
}
-export const easeInOutCirc = function (x: number) {
+export const easeInOutCirc = function (x: number): number {
return x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2
}
diff --git a/packages/devui-vue/docs/components/statistic/index.md b/packages/devui-vue/docs/components/statistic/index.md
index 1fa5cbc798..019467ccbb 100644
--- a/packages/devui-vue/docs/components/statistic/index.md
+++ b/packages/devui-vue/docs/components/statistic/index.md
@@ -14,14 +14,14 @@
-
-
+ group-separator=","
+ :value="5201314" />
-
+
@@ -39,13 +39,7 @@
-
+
@@ -54,13 +48,7 @@
-
+
@@ -87,30 +75,28 @@
title="Animation Growth Rate"
:value="88.265"
suffix="%"
- :content-style="{ color: '#3f8600' }"
:value-from="0"
:start="start"
:animation-duration="5000"
animation
- >
-
+ >
+
+ %
+ Start
+
- Start
@@ -120,10 +106,10 @@ export default {
data() {
return {
start: true,
- controlStart: false,
- };
- },
-};
+ controlStart: false
+ }
+ }
+}
```
@@ -144,9 +130,7 @@ export default {
:showGroupSeparator="true"
style="margin-right: 50px"
>
-
- %
-
+ %
@@ -162,23 +146,56 @@ export default {
:::
-### d-statistic
+### 自定义样式
+
+提供自定义属性方便添加样式
+:::demo
-| 参数 | 类型 | 默认 | 说明 |
-| :---: | :---: | :---: | :---: |
-| title | `string \| v-slot` | - | 数值的标题 |
-| extra | `string \| v-slot` | - | 额外内容 |
-| value | `number \| string` | - | 数值内容 |
-| group-separator | `string` | - | 设置千分位标识符 |
-| precision | `number` | - | 设置数值精度 |
-| suffix | `string \| v-slot` | - | 设置数值的后缀 |
-| prefix | `string \| v-slot` | - | 设置数值的前缀 |
-| title-style | `style` | - | 标题样式 |
-| content-style | `style` | - | 内容样式 |
-| animation-duration | `number` | 2000 | 动画持续时间 |
-| delay | `number` | 0 | 延迟进行动画时间 |
-| value-from | `number` | 0 | 动画初始值 |
-| animation | `boolean` | false | 是否开启动画 |
-| easing | `string` | quartOut | 数字动画效果 |
-| start | `boolean` | false | 是否开始动画 |
+```vue
+
+
+
+
+ %
+
+
+
+
+
+
+
+```
+
+:::
+
+### d-statistic
+| 参数 | 类型 | 默认 | 说明 |
+| :----------------: | :----------------: | :------: | :--------------: |
+| title | `string \| v-slot` | - | 数值的标题 |
+| extra | `string \| v-slot` | - | 额外内容 |
+| value | `number \| string` | - | 数值内容 |
+| group-separator | `string` | - | 设置千分位标识符 |
+| precision | `number` | - | 设置数值精度 |
+| suffix | `string \| v-slot` | - | 设置数值的后缀 |
+| prefix | `string \| v-slot` | - | 设置数值的前缀 |
+| title-style | `style` | - | 标题样式 |
+| content-style | `style` | - | 内容样式 |
+| animation-duration | `number` | 2000 | 动画持续时间 |
+| delay | `number` | 0 | 延迟进行动画时间 |
+| value-from | `number` | 0 | 动画初始值 |
+| animation | `boolean` | false | 是否开启动画 |
+| easing | `string` | quartOut | 数字动画效果 |
+| start | `boolean` | false | 是否开始动画 |
diff --git a/packages/devui-vue/docs/en-US/components/statistic/index.md b/packages/devui-vue/docs/en-US/components/statistic/index.md
index ba256b4143..ffd2f99628 100644
--- a/packages/devui-vue/docs/en-US/components/statistic/index.md
+++ b/packages/devui-vue/docs/en-US/components/statistic/index.md
@@ -162,6 +162,40 @@ Prefix and suffix slots
:::
+### Custom Style
+
+Provide custom attributes to facilitate adding styles
+:::demo
+
+```vue
+
+
+
+
+ %
+
+
+
+
+
+
+
+```
+
+:::
+
### d-statistic
| parameter | type | default | introduce |
From 0836b89b64be307ea91b2af703a18279fc13f25e Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Thu, 6 Jan 2022 11:55:24 +0800
Subject: [PATCH 4/4] =?UTF-8?q?docs(statistic):=20=E4=BF=AE=E5=A4=8D?=
=?UTF-8?q?=E6=96=87=E6=A1=A3=E6=98=BE=E7=A4=BA=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../docs/components/statistic/index.md | 3 +-
.../docs/en-US/components/statistic/index.md | 28 ++++++++-----------
2 files changed, 13 insertions(+), 18 deletions(-)
diff --git a/packages/devui-vue/docs/components/statistic/index.md b/packages/devui-vue/docs/components/statistic/index.md
index 71b1cac86f..4ae329547d 100644
--- a/packages/devui-vue/docs/components/statistic/index.md
+++ b/packages/devui-vue/docs/components/statistic/index.md
@@ -148,7 +148,6 @@ export default {
### 自定义样式
-<<<<<<< HEAD
提供自定义属性方便添加样式
:::demo
@@ -172,7 +171,7 @@ export default {
group-separator="."
:precision="3"
prefix="$"
- :content-style="{ fontSize: '30px', color: 'red'}"
+ :content-style="{ fontSize: '30px', color: '#5e7ce0'}"
>
diff --git a/packages/devui-vue/docs/en-US/components/statistic/index.md b/packages/devui-vue/docs/en-US/components/statistic/index.md
index ffd2f99628..5dbd83d870 100644
--- a/packages/devui-vue/docs/en-US/components/statistic/index.md
+++ b/packages/devui-vue/docs/en-US/components/statistic/index.md
@@ -44,7 +44,6 @@ Display statistics in cards.
:value="68.28"
:precision="3"
suffix="%"
- :content-style="{ color: '#3f8600' }"
>
@@ -59,7 +58,6 @@ Display statistics in cards.
:value="38.3"
suffix="%"
class="demo-class"
- :content-style="{ color: '#cf1322' }"
>
@@ -87,30 +85,28 @@ We can start numerical animation by setting the animation attribute. You can sta
title="Animation Growth Rate"
:value="88.265"
suffix="%"
- :content-style="{ color: '#3f8600' }"
:value-from="0"
:start="start"
:animation-duration="5000"
animation
- >
-
+ >
+
+ %
+ Start
+
- Start
@@ -120,10 +116,10 @@ export default {
data() {
return {
start: true,
- controlStart: false,
- };
- },
-};
+ controlStart: false
+ }
+ }
+}
```
@@ -187,7 +183,7 @@ Provide custom attributes to facilitate adding styles
group-separator="."
:precision="3"
prefix="$"
- :content-style="{ fontSize: '30px', color: 'red'}"
+ :content-style="{ fontSize: '30px', color: '#5e7ce0'}"
>