From 68f685c8bd6224c8f6728f91c4bf97ba0cdcea5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= Date: Thu, 30 May 2024 00:16:50 -0400 Subject: [PATCH 1/4] feat(button): add `iconPos` prop for button --- packages/devui-vue/devui/button/src/button-types.ts | 4 ++++ packages/devui-vue/devui/button/src/button.tsx | 13 +++++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts index 0479b6f5a6..a65a712f71 100644 --- a/packages/devui-vue/devui/button/src/button-types.ts +++ b/packages/devui-vue/devui/button/src/button-types.ts @@ -22,6 +22,10 @@ export const buttonProps = { type: String, default: '', }, + iconPos: { + type: String as PropType<'left' | 'right'>, + default: 'left', + }, loading: { type: Boolean, default: false, diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx index f4794325af..46c1e9b142 100644 --- a/packages/devui-vue/devui/button/src/button.tsx +++ b/packages/devui-vue/devui/button/src/button.tsx @@ -14,7 +14,7 @@ export default defineComponent({ props: buttonProps, emits: ['click'], setup(props: ButtonProps, ctx: SetupContext) { - const { icon, disabled, loading, nativeType } = toRefs(props); + const { icon, iconPos, disabled, loading, nativeType } = toRefs(props); const { classes, iconClass } = useButton(props, ctx); const isMouseDown = ref(false); const showWave = ref(false); @@ -23,6 +23,10 @@ export default defineComponent({ left: '0px', }); + if (!['right', 'left'].includes(iconPos.value)) { + iconPos.value = 'left'; + } + const showClickWave = (e: MouseEvent) => { waveStyle.left = e.offsetX + 'px'; waveStyle.top = e.offsetY + 'px'; @@ -49,11 +53,16 @@ export default defineComponent({ type={nativeType.value} onMousedown={() => (isMouseDown.value = true)} onMouseup={() => (isMouseDown.value = false)}> - {icon.value && } + {iconPos.value === 'left' && icon.value && ( + + )}
{ctx.slots.default?.()} + {iconPos.value === 'right' && icon.value && ( + + )} {showWave.value &&
} ); From fc87c4a9048450d9e3521cdb7569cca2ddb4f5a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= Date: Thu, 30 May 2024 00:19:18 -0400 Subject: [PATCH 2/4] fix(button): fix left margin for icon --- packages/devui-vue/devui/button/src/button.scss | 7 ++++++- packages/devui-vue/devui/button/src/use-button.ts | 6 +++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss index f7bcd6fe45..d93d3ac7f4 100644 --- a/packages/devui-vue/devui/button/src/button.scss +++ b/packages/devui-vue/devui/button/src/button.scss @@ -337,7 +337,8 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px); } .#{$devui-prefix}-button { - transition: background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth, + transition: + background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth, border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth, color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth; white-space: nowrap; @@ -402,6 +403,10 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px); margin-right: 5px; } +.clear-left-5 { + margin-left: 5px; +} + .loading-icon__container { display: inline-flex; align-items: center; diff --git a/packages/devui-vue/devui/button/src/use-button.ts b/packages/devui-vue/devui/button/src/use-button.ts index e3d53c1dc7..fbcaad5d68 100644 --- a/packages/devui-vue/devui/button/src/use-button.ts +++ b/packages/devui-vue/devui/button/src/use-button.ts @@ -36,7 +36,11 @@ export default function useButton(props: ButtonProps, ctx: SetupContext): UseBut } const origin = `${ns.e('icon-fix')} icon`; if (hasContent.value) { - return `${origin} clear-right-5`; + if (props.iconPos === 'left') { + return `${origin} clear-right-5`; + } else { + return `${origin} clear-left-5`; + } } else { return origin; } From b579f91b8a9f45c9d711e75ebea2a74a3c29e922 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= Date: Thu, 30 May 2024 00:20:09 -0400 Subject: [PATCH 3/4] docs(button): add docs for `iconPos` --- .../docs/components/button/iconPos.vue | 23 +++++++++++++++++++ .../devui-vue/docs/components/button/index.md | 8 +++++++ 2 files changed, 31 insertions(+) create mode 100644 packages/devui-vue/docs/components/button/iconPos.vue diff --git a/packages/devui-vue/docs/components/button/iconPos.vue b/packages/devui-vue/docs/components/button/iconPos.vue new file mode 100644 index 0000000000..5ad980386a --- /dev/null +++ b/packages/devui-vue/docs/components/button/iconPos.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md index 1b47383b51..9cc2995cfc 100644 --- a/packages/devui-vue/docs/components/button/index.md +++ b/packages/devui-vue/docs/components/button/index.md @@ -54,6 +54,14 @@ button/icon ::: +### 图标位置 + +:::demo + +button/iconPos + +::: + ### 按钮组 将多个按钮作为一组放入按钮组容器中。按钮组可通过 size 设置尺寸，并与下拉菜单混合使用。 From 05b62d30d12c9118540462679a77f23db0cde0da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= Date: Thu, 30 May 2024 00:31:09 -0400 Subject: [PATCH 4/4] docs(button): add `iconPos` for prop definition --- .../devui/button/src/button-types.ts | 3 ++- .../devui-vue/docs/components/button/index.md | 27 ++++++++++++------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts index a65a712f71..772b0e1959 100644 --- a/packages/devui-vue/devui/button/src/button-types.ts +++ b/packages/devui-vue/devui/button/src/button-types.ts @@ -5,6 +5,7 @@ export type IButtonColor = 'secondary' | 'primary' | 'danger'; export type IButtonSize = 'lg' | 'md' | 'sm'; export type IButtonShape = 'round' | 'circle'; export type IButtonType = 'button' | 'submit' | 'reset'; +export type IButtonIconPos = 'left' | 'right'; export const buttonProps = { variant: { @@ -23,7 +24,7 @@ export const buttonProps = { default: '', }, iconPos: { - type: String as PropType<'left' | 'right'>, + type: String as PropType, default: 'left', }, loading: { diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md index 9cc2995cfc..9bf8e8b7d1 100644 --- a/packages/devui-vue/docs/components/button/index.md +++ b/packages/devui-vue/docs/components/button/index.md @@ -74,16 +74,17 @@ button/buttonGroup ### Button 参数 -| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ | -| variant | [IButtonVariant](#ibuttonvariant) | 'outline' | 可选，按钮形态 | [形态](#形态) | -| color | [IButtonColor](#ibuttoncolor) | 'secondary' | 可选，按钮主题 | [主题色](#主题色) | -| size | [IButtonSize](#ibuttonsize) | 'md' | 可选，按钮尺寸 | [尺寸](#尺寸) | -| icon | `string` | -- | 可选，自定义按钮图标 | [图标按钮](#图标按钮) | -| shape | [IButtonShape](#ibuttonshape) | -- | 可选，按钮形状(圆形/圆角) | [图标按钮](#图标按钮) | -| disabled | `boolean` | false | 可选，是否禁用 button | [禁用状态](#禁用状态) | -| loading | `boolean` | false | 可选，设置加载中状态 | [加载中状态](#加载中状态) | -| native-type | [IButtonType](#ibuttontype) | 'button' | 可选，按钮原生type属性 | | +| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo | +| :---------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ | +| variant | [IButtonVariant](#ibuttonvariant) | 'outline' | 可选，按钮形态 | [形态](#形态) | +| color | [IButtonColor](#ibuttoncolor) | 'secondary' | 可选，按钮主题 | [主题色](#主题色) | +| size | [IButtonSize](#ibuttonsize) | 'md' | 可选，按钮尺寸 | [尺寸](#尺寸) | +| icon | `string` | -- | 可选，自定义按钮图标 | [图标按钮](#图标按钮) | +| iconPos | [IButtonIconPos](#ibuttoniconpos) | 'left' | 可选，自定义按钮图标位置 | [图标位置](#图标位置) | +| shape | [IButtonShape](#ibuttonshape) | -- | 可选，按钮形状(圆形/圆角) | [图标按钮](#图标按钮) | +| disabled | `boolean` | false | 可选，是否禁用 button | [禁用状态](#禁用状态) | +| loading | `boolean` | false | 可选，设置加载中状态 | [加载中状态](#加载中状态) | +| native-type | [IButtonType](#ibuttontype) | 'button' | 可选，按钮原生 type 属性 | | ### Button 类型定义 @@ -117,6 +118,12 @@ type IButtonShape = 'circle' | 'round'; type IButtonType = 'button' | 'submit' | 'reset'; ``` +#### IButtonIconPos + +```ts +type IButtonIconPos = 'left' | 'right'; +``` + ### ButtonGroup 参数 | 参数名 | 类型 | 默认 | 说明 | 跳转 Demo |