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 + + + +``` + +::: + +### Color mode + +Set dynamic output color mode +:::demo + +```vue + + + +``` + +::: + +### Historical color + +Customize whether to display historical colors. By default, it is true +:::demo + +```vue + + + +``` + +::: + +### 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 @@ -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' }" >