From 8c98e3b1e94acbfea30059ebf16c58142dff799c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com> Date: Mon, 1 Apr 2024 17:22:11 +0800 Subject: [PATCH 1/5] =?UTF-8?q?fix(Radio):=20=E4=BC=98=E5=8C=96=E5=8D=95?= =?UTF-8?q?=E9=80=89=E7=BB=84=E4=B8=AD=EF=BC=8C=E5=8D=95=E4=B8=AAradio?= =?UTF-8?q?=E7=9A=84=E9=BB=98=E8=AE=A4=E9=AB=98=E5=BA=A6=20(#1818)=20(#181?= =?UTF-8?q?9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/radio/src/radio-group.scss | 2 +- packages/devui-vue/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/radio/src/radio-group.scss b/packages/devui-vue/devui/radio/src/radio-group.scss index f3ebf228df..b809ddf672 100644 --- a/packages/devui-vue/devui/radio/src/radio-group.scss +++ b/packages/devui-vue/devui/radio/src/radio-group.scss @@ -15,7 +15,7 @@ } .#{$devui-prefix}-radio__wrapper { - height: 28px; + min-height: 28px; &:not(:last-child) { padding-right: 20px; diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index 8fa4a1af0e..e6b7b16f75 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.7", + "version": "1.6.8", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [ From 5451f5cb6b193621db11b92a121a34f8b7fb9841 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com> Date: Tue, 9 Apr 2024 10:27:38 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix(Tooltip):=20=E4=BF=AE=E6=94=B9=E6=9E=84?= =?UTF-8?q?=E5=BB=BA=E6=8A=A5=E9=94=99=20(#1821)=20(#1822)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tooltip/src/tooltip-types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/tooltip/src/tooltip-types.ts b/packages/devui-vue/devui/tooltip/src/tooltip-types.ts index 87079000a7..3e427fede6 100644 --- a/packages/devui-vue/devui/tooltip/src/tooltip-types.ts +++ b/packages/devui-vue/devui/tooltip/src/tooltip-types.ts @@ -57,7 +57,7 @@ export const tooltipProps = { default: '', }, teleport: { - type: [String, HTMLElement] as PropType, + type: [String, Object] as PropType, default: 'body', }, }; From 8afdb42b4b3e0cc78fa7f74bae06a7d3f7bb2178 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com> Date: Thu, 11 Apr 2024 19:07:38 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix(EditorMd):=20=E8=A7=A3=E5=86=B3?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=B8=8A=E6=9C=89md=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E6=97=B6=EF=BC=8C=E5=88=B7=E6=96=B0=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=EF=BC=8C=E9=A1=B5=E9=9D=A2=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E5=88=B0=E6=9F=90=E4=B8=AA=E4=BD=8D=E7=BD=AE=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20(#1825)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/composables/use-data-grid.ts | 2 +- .../src/composables/use-editor-md.ts | 1 - .../components/form-control/form-control.tsx | 27 +------------- .../components/form-item/form-item-types.ts | 4 +++ .../src/components/form-item/use-form-item.ts | 6 ++-- .../modal/src/components/modal-icons.tsx | 35 ++++++++++--------- .../src/composables/use-search-class.ts | 3 +- .../devui/search/src/search-types.ts | 6 +++- .../devui-vue/devui/search/src/search.scss | 13 ++++++- .../devui-vue/devui/search/src/search.tsx | 1 + .../devui-vue/docs/components/search/index.md | 2 ++ packages/devui-vue/package.json | 2 +- 12 files changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts index 882bb7c559..6e45f84fba 100644 --- a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts +++ b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts @@ -245,7 +245,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) { scrollRef.value?.addEventListener('scroll', onScroll); if (typeof window !== 'undefined' && scrollRef.value) { resizeObserver = new ResizeObserver(() => { - if (scrollRef.value) { + if (scrollRef.value && sliceColumns.value.length) { let distance = 0; initOriginColumnData(); distance = scrollRef.value!.scrollLeft; diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts index a8ca947dd7..72b8925632 100644 --- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts +++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts @@ -310,7 +310,6 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { editorIns.setSize('auto', '100%'); refreshEditorCursor(); - editorIns.setCursor(editorIns.lineCount(), 0); ctx.emit('afterEditorInit', editorIns); editorIns.on('change', onChange); editorIns.on('scroll', onScroll); diff --git a/packages/devui-vue/devui/form/src/components/form-control/form-control.tsx b/packages/devui-vue/devui/form/src/components/form-control/form-control.tsx index 6bed3c571a..68d076dd80 100644 --- a/packages/devui-vue/devui/form/src/components/form-control/form-control.tsx +++ b/packages/devui-vue/devui/form/src/components/form-control/form-control.tsx @@ -16,7 +16,6 @@ export default defineComponent({ const formControl = ref(); const popoverRef = ref(); const ns = useNamespace('form'); - const showPopoverClick = ref(true); const { controlClasses, controlContainerClasses, labelData } = useFormControl(props); const { feedbackStatus, showFeedback, showPopover, showMessage, errorMessage, popPosition } = useFormControlValidate(); @@ -30,36 +29,12 @@ export default defineComponent({ return undefined; }); - const onDocumentClick = (e: Event) => { - const composedPath = e.composedPath(); - if (composedPath.includes(popoverRef.value.triggerEl)) { - showPopoverClick.value = true; - } else { - showPopoverClick.value = false; - } - }; - - watch(showPopover, (val) => { - if (val) { - setTimeout(() => { - document.addEventListener('click', onDocumentClick); - }); - } else { - showPopoverClick.value = true; - document.removeEventListener('click', onDocumentClick); - } - }); - - onUnmounted(() => { - document.removeEventListener('click', onDocumentClick); - }); - return () => (
; diff --git a/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts b/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts index 75218258a2..69403c4424 100644 --- a/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts +++ b/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts @@ -12,7 +12,7 @@ import { FormRuleItem, UseFormItemValidate, MessageType, - UseFormItemRule + UseFormItemRule, } from './form-item-types'; import { useNamespace } from '@devui/shared/utils'; @@ -141,7 +141,9 @@ export function useFormItemValidate(props: FormItemProps, _rules: ComputedRef { diff --git a/packages/devui-vue/devui/modal/src/components/modal-icons.tsx b/packages/devui-vue/devui/modal/src/components/modal-icons.tsx index 0718310ba2..fbc30fd4f4 100644 --- a/packages/devui-vue/devui/modal/src/components/modal-icons.tsx +++ b/packages/devui-vue/devui/modal/src/components/modal-icons.tsx @@ -1,19 +1,20 @@ export function CloseIcon(): JSX.Element { - return ( - - - - - - ); + return ( + + + + + + + + + ); } diff --git a/packages/devui-vue/devui/search/src/composables/use-search-class.ts b/packages/devui-vue/devui/search/src/composables/use-search-class.ts index e662e94dcb..4233b43f10 100644 --- a/packages/devui-vue/devui/search/src/composables/use-search-class.ts +++ b/packages/devui-vue/devui/search/src/composables/use-search-class.ts @@ -24,12 +24,13 @@ export const useSearchClass = (props: SearchProps, isFocus: Ref): UseSe [ns.m('focus')]: isFocus.value, [ns.m('disabled')]: props.disabled, [ns.m('no-border')]: props.noBorder, + [ns.m('glow-style')]: props.showGlowStyle, [ns.m(searchSize.value)]: !!searchSize.value, [ns.m(props.iconPosition)]: ICON_POSITION[props.iconPosition], })); return { rootClass, - searchSize + searchSize, }; }; diff --git a/packages/devui-vue/devui/search/src/search-types.ts b/packages/devui-vue/devui/search/src/search-types.ts index 75ca6e7b42..afa4a8236f 100644 --- a/packages/devui-vue/devui/search/src/search-types.ts +++ b/packages/devui-vue/devui/search/src/search-types.ts @@ -5,7 +5,7 @@ export type IconPosition = 'right' | 'left'; export const searchProps = { size: { - type: String as PropType + type: String as PropType, }, placeholder: { type: String, @@ -51,6 +51,10 @@ export const searchProps = { type: Function as PropType<(v: string) => void>, default: undefined, }, + showGlowStyle: { + type: Boolean, + default: true, + }, } as const; export type SearchProps = ExtractPropTypes; diff --git a/packages/devui-vue/devui/search/src/search.scss b/packages/devui-vue/devui/search/src/search.scss index 7467f35a89..ec6950ccdf 100644 --- a/packages/devui-vue/devui/search/src/search.scss +++ b/packages/devui-vue/devui/search/src/search.scss @@ -4,9 +4,11 @@ .#{$devui-prefix}-search { position: relative; + border-radius: $devui-border-radius; + transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in; @include flex; - &:not(.#{$devui-prefix}-search--error):not(.#{$devui-prefix}-search--disabled):not(.#{$devui-prefix}-search--focus):hover { + &:not(.#{$devui-prefix}-search--error):not(.#{$devui-prefix}-search--disabled):not(.#{$devui-prefix}-search--focus):not(.#{$devui-prefix}-search--glow-style):hover { .#{$devui-prefix}-input { border-color: $devui-form-control-line-hover; } @@ -99,6 +101,15 @@ top: 0; } + &--glow-style { + &:not(.#{$devui-prefix}-search--disabled) { + &:hover, + &.#{$devui-prefix}-search--focus { + box-shadow: 0 0 0 4px $devui-form-control-interactive-outline; + } + } + } + &--sm { .#{$devui-prefix}-input { height: $devui-size-sm; diff --git a/packages/devui-vue/devui/search/src/search.tsx b/packages/devui-vue/devui/search/src/search.tsx index 3b6570ae86..e2ce9d259e 100644 --- a/packages/devui-vue/devui/search/src/search.tsx +++ b/packages/devui-vue/devui/search/src/search.tsx @@ -46,6 +46,7 @@ export default defineComponent({ maxlength: props.maxLength, modelValue: keywords.value, placeholder: props.placeholder || t('placeholder'), + showGlowStyle: false, onKeydown: onInputKeydown, 'onUpdate:modelValue': onInputUpdate, onFocus: onFocus, diff --git a/packages/devui-vue/docs/components/search/index.md b/packages/devui-vue/docs/components/search/index.md index 290bdd40ff..d2fa04a88e 100644 --- a/packages/devui-vue/docs/components/search/index.md +++ b/packages/devui-vue/docs/components/search/index.md @@ -107,6 +107,7 @@ export default defineComponent({ | icon-position | [IconPositionType](#iconpositiontype) | 'right' | 可选，搜索图标位置 | [搜索图标左置](#搜索图标左置) | | no-border | `boolean` | false | 可选，是否显示边框 | [无边框](#无边框) | | css-class | `string` | '' | 可选，支持传入类名到输入框上 | [双向绑定](#双向绑定) | +|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果|| ### Search 事件 @@ -123,6 +124,7 @@ type SearchSizeType = 'sm' | 'md' | 'lg'; ``` #### IconPositionType + ```ts type IconPositionType = 'right' | 'left'; ``` diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index baa7a95a07..7332cc4771 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.9", + "version": "1.6.10", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [ From 78fa38c25183d09cadf2debd64698229e27ccfa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com> Date: Thu, 18 Apr 2024 11:22:14 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat(Card):=20=E4=BC=98=E5=8C=96=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E7=BB=93=E6=9E=84=20(#1832)=20(#1833)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/card/src/card.tsx | 18 ++++++++++-------- .../devui-vue/docs/components/card/index.md | 1 + packages/devui-vue/package.json | 2 +- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/devui-vue/devui/card/src/card.tsx b/packages/devui-vue/devui/card/src/card.tsx index 03cd29e2e0..532aaca12a 100644 --- a/packages/devui-vue/devui/card/src/card.tsx +++ b/packages/devui-vue/devui/card/src/card.tsx @@ -19,16 +19,18 @@ export default defineComponent({ return () => (
{slots.default?.()} -
- {slots.avatar?.() ?
{slots.avatar?.()}
: ''} -
-
{slots.title?.()}
-
{slots.subtitle?.()}
+ {(slots.avatar || slots.title || slots.subtitle) && ( +
+ {slots.avatar?.() ?
{slots.avatar?.()}
: ''} +
+
{slots.title?.()}
+
{slots.subtitle?.()}
+
-
+ )} {src.value !== '' ? : ''} -
{slots.content?.()}
-
{slots.actions ? slots.actions?.() : ''}
+ {slots.content &&
{slots.content?.()}
} + {slots.actions &&
{slots.actions ? slots.actions?.() : ''}
}
); }, diff --git a/packages/devui-vue/docs/components/card/index.md b/packages/devui-vue/docs/components/card/index.md index 33d468b10a..116801561e 100644 --- a/packages/devui-vue/docs/components/card/index.md +++ b/packages/devui-vue/docs/components/card/index.md @@ -254,6 +254,7 @@ | title | 卡片的主要内容描述，一般定义为卡片名称 | | subtitle | 对标题的补充，可包含标签等信息 | | actions | 决策作用，可以包含操作文本或者操作图标 | +|default|自定义卡片内所有内容| ### Card 类型定义 diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index e288d7c07d..c116e85fd1 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.12", + "version": "1.6.13", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [ From 2711ffd4dca52322d758f22872ca286c12143987 Mon Sep 17 00:00:00 2001 From: TongxinXie Date: Fri, 19 Apr 2024 10:07:49 +0800 Subject: [PATCH 5/5] =?UTF-8?q?feat(Dropdown):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=B1=95=E5=BC=80=E6=96=B9=E5=90=91=E8=AF=86=E5=88=AB=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flexible-overlay/use-flexible-overlay.ts | 50 ++++++++----------- .../docs/components/dropdown/index.md | 15 +++--- packages/devui-vue/package.json | 4 +- pnpm-lock.yaml | 20 +++++--- 4 files changed, 43 insertions(+), 46 deletions(-) diff --git a/packages/devui-vue/devui/overlay/src/flexible-overlay/use-flexible-overlay.ts b/packages/devui-vue/devui/overlay/src/flexible-overlay/use-flexible-overlay.ts index 79c8e66d6c..c5fe4f6942 100644 --- a/packages/devui-vue/devui/overlay/src/flexible-overlay/use-flexible-overlay.ts +++ b/packages/devui-vue/devui/overlay/src/flexible-overlay/use-flexible-overlay.ts @@ -1,7 +1,6 @@ -import { ref, unref, watch, nextTick, onUnmounted } from 'vue'; -import { arrow, autoPlacement, computePosition, offset, shift } from '@floating-ui/dom'; +import { ref, unref, watch, nextTick, onUnmounted, toRefs } from 'vue'; +import { arrow, computePosition, offset, flip } from '@floating-ui/dom'; import { FlexibleOverlayProps, Placement, Point, UseOverlayFn, EmitEventFn, Rect } from './flexible-overlay-types'; -import { getScrollParent } from './utils'; function adjustArrowPosition(isArrowCenter: boolean, point: Point, placement: Placement, originRect: Rect): Point { let { x, y } = point; @@ -25,9 +24,10 @@ function adjustArrowPosition(isArrowCenter: boolean, point: Point, placement: Pl } export function useOverlay(props: FlexibleOverlayProps, emit: EmitEventFn): UseOverlayFn { + const { position, showArrow } = toRefs(props); const overlayRef = ref(); const arrowRef = ref(); - let originParent = null; + const updateArrowPosition = (arrowEl: HTMLElement, placement: Placement, point: Point, overlayEl: HTMLElement) => { const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect()); const staticSide = { @@ -48,54 +48,46 @@ export function useOverlay(props: FlexibleOverlayProps, emit: EmitEventFn): UseO const hostEl = props.origin; const overlayEl = unref(overlayRef.value); const arrowEl = unref(arrowRef.value); - const middleware = [ - offset(props.offset), - autoPlacement({ - alignment: props.align, - allowedPlacements: props.position, - }), - ]; - props.showArrow && middleware.push(arrow({ element: arrowEl })); - props.shiftOffset !== undefined && middleware.push(shift()); - if (!overlayEl) { - return; + + const [mainPosition, ...fallbackPosition] = position.value; + const middleware = [offset(props.offset)]; + middleware.push(fallbackPosition.length ? flip({ fallbackPlacements: fallbackPosition }) : flip()); + if (showArrow.value) { + middleware.push(arrow({ element: arrowRef.value! })); } const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, { strategy: 'fixed', + placement: mainPosition, middleware, }); let applyX = x; let applyY = y; - if (props.shiftOffset !== undefined) { - const { x: shiftX, y: shiftY } = middlewareData.shift; - shiftX < 0 && (applyX -= props.shiftOffset); - shiftX > 0 && (applyX += props.shiftOffset); - shiftY < 0 && (applyY -= props.shiftOffset); - shiftY > 0 && (applyY += props.shiftOffset); - } emit('positionChange', placement); Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` }); props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl); }; + + const scrollCallback = (e: Event) => { + const scrollElement = e.target as HTMLElement; + if (scrollElement?.contains(props.origin?.$el ?? props.origin)) { + updatePosition(); + } + }; watch( () => props.modelValue, () => { if (props.modelValue && props.origin) { - originParent = getScrollParent(props.origin); nextTick(updatePosition); - originParent?.addEventListener('scroll', updatePosition); - originParent !== window && window.addEventListener('scroll', updatePosition); + window.addEventListener('scroll', scrollCallback, true); window.addEventListener('resize', updatePosition); } else { - originParent?.removeEventListener('scroll', updatePosition); - originParent !== window && window.removeEventListener('scroll', updatePosition); + window.removeEventListener('scroll', scrollCallback, true); window.removeEventListener('resize', updatePosition); } } ); onUnmounted(() => { - originParent?.removeEventListener('scroll', updatePosition); - originParent !== window && window.removeEventListener('scroll', updatePosition); + window.removeEventListener('scroll', scrollCallback, true); window.removeEventListener('resize', updatePosition); }); diff --git a/packages/devui-vue/docs/components/dropdown/index.md b/packages/devui-vue/docs/components/dropdown/index.md index 931decd3e1..9dfcccad58 100644 --- a/packages/devui-vue/docs/components/dropdown/index.md +++ b/packages/devui-vue/docs/components/dropdown/index.md @@ -12,7 +12,7 @@ ```vue