From 9f4ded8137d9926e2eb3c81330b33067f438de95 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:18:48 +0800 Subject: [PATCH 1/4] =?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)?= 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 869358983c40168a40e495ff1eee8c07867a44a9 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 17:31:06 +0800 Subject: [PATCH 2/4] =?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(#1824)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/editor-md/src/composables/use-editor-md.ts | 1 - packages/devui-vue/package.json | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) 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/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 2096140af6ef50dcd44902b4dee907eb0a0a46b7 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:05:34 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#1826)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/composables/use-data-grid.ts | 2 +- .../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 ++ 10 files changed, 50 insertions(+), 49 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/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'; ``` From fccccc22675b69a55bacf7dde2bbf2e2bde297c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com> Date: Sat, 13 Apr 2024 16:43:09 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#1828)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../category-search/src/category-search.tsx | 94 ++++++++++--------- .../devui/checkbox/src/checkbox-types.ts | 1 - .../devui/checkbox/src/use-checkbox.ts | 2 +- .../src/components/range-date-picker-pro.tsx | 14 ++- .../src/date-picker-pro-types.ts | 18 ++++ .../date-picker-pro/src/date-picker-pro.tsx | 16 +++- .../menu/src/components/sub-menu/sub-menu.tsx | 36 +++---- .../devui/menu/src/styles/vertical.scss | 19 +++- .../docs/components/category-search/index.md | 1 + .../docs/components/date-picker-pro/index.md | 72 +++++++++----- packages/devui-vue/package.json | 2 +- 11 files changed, 170 insertions(+), 105 deletions(-) diff --git a/packages/devui-vue/devui/category-search/src/category-search.tsx b/packages/devui-vue/devui/category-search/src/category-search.tsx index 6f85d396d5..00978efe6c 100644 --- a/packages/devui-vue/devui/category-search/src/category-search.tsx +++ b/packages/devui-vue/devui/category-search/src/category-search.tsx @@ -12,51 +12,53 @@ import { useCategorySearch } from './composables/use-category-search'; import './category-search.scss'; export default defineComponent({ - name: 'DCategorySearch', - props: categorySearchProps, - emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'], - setup(props: CategorySearchProps, ctx: SetupContext) { - const { - rootRef, - scrollBarRef, - inputRef, - isHover, - containerClasses, - innerSelectedTags, - joinLabelTypes, - showExtendedConfig, - operationConfig, - onSearch, - } = useCategorySearch(props, ctx); + name: 'DCategorySearch', + props: categorySearchProps, + emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'], + setup(props: CategorySearchProps, ctx: SetupContext) { + const { + rootRef, + scrollBarRef, + inputRef, + isHover, + containerClasses, + innerSelectedTags, + joinLabelTypes, + showExtendedConfig, + operationConfig, + onSearch, + } = useCategorySearch(props, ctx); - return () => ( -
(isHover.value = true)} - onMouseleave={() => (isHover.value = false)}> -
- -
-
-
    - {innerSelectedTags.value.map((item) => ( - - ))} - -
-
- {showExtendedConfig.value && ( -
- {operationConfig.clear?.show && ( - <>{ctx.slots.clear?.() ?? } - )} - {operationConfig.save?.show && <>{ctx.slots.save?.() ?? }} - {operationConfig.more?.show && <>{ctx.slots.more?.() ?? }} - {ctx.slots.operation?.()} -
- )} -
- ); - }, + return () => ( +
(isHover.value = true)} + onMouseleave={() => (isHover.value = false)}> + {ctx.slots.searchIcon?.() ?? ( +
+ +
+ )} +
+
    + {innerSelectedTags.value.map((item) => ( + + ))} + +
+
+ {showExtendedConfig.value && ( +
+ {operationConfig.clear?.show && ( + <>{ctx.slots.clear?.() ?? } + )} + {operationConfig.save?.show && <>{ctx.slots.save?.() ?? }} + {operationConfig.more?.show && <>{ctx.slots.more?.() ?? }} + {ctx.slots.operation?.()} +
+ )} +
+ ); + }, }); diff --git a/packages/devui-vue/devui/checkbox/src/checkbox-types.ts b/packages/devui-vue/devui/checkbox/src/checkbox-types.ts index 2cfc384107..5768ccb7f5 100644 --- a/packages/devui-vue/devui/checkbox/src/checkbox-types.ts +++ b/packages/devui-vue/devui/checkbox/src/checkbox-types.ts @@ -37,7 +37,6 @@ const commonProps = { }, size: { type: String as PropType, - default: 'md', }, showGlowStyle: { type: Boolean, diff --git a/packages/devui-vue/devui/checkbox/src/use-checkbox.ts b/packages/devui-vue/devui/checkbox/src/use-checkbox.ts index 1e49c0824f..82b483d903 100644 --- a/packages/devui-vue/devui/checkbox/src/use-checkbox.ts +++ b/packages/devui-vue/devui/checkbox/src/use-checkbox.ts @@ -143,7 +143,7 @@ export function useCheckboxGroup(props: CheckboxGroupProps, ctx: SetupContext): ); // 组件 size 优先于表单 size - const checkboxGroupSize = computed(() => props.size || formContext?.size || ''); + const checkboxGroupSize = computed(() => props.size || formContext?.size || 'md'); provide(checkboxGroupInjectionKey, { disabled: toRef(props, 'disabled'), diff --git a/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx b/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx index bce48fd41c..398ed29ce2 100644 --- a/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx +++ b/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx @@ -19,7 +19,7 @@ export default defineComponent({ setup(props: RangeDatePickerProProps, ctx: SetupContext) { const app = getCurrentInstance(); const t = createI18nTranslate('DDatePickerPro', app); - const { showGlowStyle } = toRefs(props); + const { showGlowStyle, position } = toRefs(props); const ns = useNamespace('range-date-picker-pro'); const { @@ -44,7 +44,6 @@ export default defineComponent({ handlerClearTime, onChangeRangeFocusType, } = useRangePickerPro(props, ctx); - const position = ref(['bottom-start', 'top-start']); const currentPosition = ref('bottom'); const handlePositionChange = (pos: string) => { currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom'; @@ -53,6 +52,15 @@ export default defineComponent({ transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%', 'z-index': 'var(--devui-z-index-dropdown, 1052)', })); + const align = computed(() => { + if (position.value.some((item: string) => item.includes('start'))) { + return 'start'; + } + if (position.value.some((item: string) => item.includes('end'))) { + return 'end'; + } + return undefined; + }); return () => { const vSlots = { @@ -141,7 +149,7 @@ export default defineComponent({ v-model={isPanelShow.value} ref={overlayRef} origin={originRef.value} - align="start" + align={align.value} position={position.value} style={styles.value} onPositionChange={handlePositionChange}> diff --git a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts index f83b1343f1..432db91109 100644 --- a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts +++ b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts @@ -3,6 +3,20 @@ import type { Dayjs } from 'dayjs'; import { ArrType } from '../../time-picker/src/types'; import type { InputSize } from '../../input/src/input-types'; +export type Placement = + | 'top' + | 'right' + | 'bottom' + | 'left' + | 'top-start' + | 'top-end' + | 'right-start' + | 'right-end' + | 'bottom-start' + | 'bottom-end' + | 'left-start' + | 'left-end'; + export const datePickerProCommonProps = { format: { type: String, @@ -34,6 +48,10 @@ export const datePickerProCommonProps = { type: Boolean, default: true, }, + position: { + type: Array as PropType, + default: () => ['bottom-start', 'top-start'], + }, }; export const datePickerProProps = { diff --git a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx index 54ce7df432..b59f6bb530 100644 --- a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx +++ b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx @@ -3,7 +3,7 @@ import type { SetupContext } from 'vue'; import { datePickerProProps, DatePickerProProps } from './date-picker-pro-types'; import usePickerPro from './use-picker-pro'; import { Input } from '../../input'; -import { FlexibleOverlay, Placement } from '../../overlay'; +import { FlexibleOverlay } from '../../overlay'; import DatePickerProPanel from './components/date-picker-panel'; import { IconCalendar } from './components/icon-calendar'; import { IconClose } from './components/icon-close'; @@ -18,7 +18,7 @@ export default defineComponent({ setup(props: DatePickerProProps, ctx: SetupContext) { const app = getCurrentInstance(); const t = createI18nTranslate('DDatePickerPro', app); - const { showGlowStyle } = toRefs(props); + const { showGlowStyle, position } = toRefs(props); const ns = useNamespace('date-picker-pro'); const { @@ -39,7 +39,6 @@ export default defineComponent({ onSelectedDate, handlerClearTime, } = usePickerPro(props, ctx, t); - const position = ref(['bottom-start', 'top-start']); const currentPosition = ref('bottom'); const handlePositionChange = (pos: string) => { currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom'; @@ -48,6 +47,15 @@ export default defineComponent({ transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%', 'z-index': 'var(--devui-z-index-dropdown, 1052)', })); + const align = computed(() => { + if (position.value.some((item: string) => item.includes('start'))) { + return 'start'; + } + if (position.value.some((item: string) => item.includes('end'))) { + return 'end'; + } + return undefined; + }); return () => { const vSlots = { @@ -90,7 +98,7 @@ export default defineComponent({ v-model={isPanelShow.value} ref={overlayRef} origin={originRef.value} - align="start" + align={align.value} position={position.value} style={styles.value} onPositionChange={handlePositionChange}> diff --git a/packages/devui-vue/devui/menu/src/components/sub-menu/sub-menu.tsx b/packages/devui-vue/devui/menu/src/components/sub-menu/sub-menu.tsx index b4b8480f29..cfd0371c90 100644 --- a/packages/devui-vue/devui/menu/src/components/sub-menu/sub-menu.tsx +++ b/packages/devui-vue/devui/menu/src/components/sub-menu/sub-menu.tsx @@ -1,14 +1,6 @@ import { randomId } from '../../../../shared/utils/random-id'; import type { ComponentInternalInstance, Ref } from 'vue'; -import { - defineComponent, - getCurrentInstance, - inject, - onMounted, - ref, - watch, - watchEffect -} from 'vue'; +import { defineComponent, getCurrentInstance, inject, onMounted, ref, watch, watchEffect } from 'vue'; import { useNamespace } from '../../../../shared/hooks/use-namespace'; import { useClick } from '../../composables/use-click'; import { addLayer, clearSelect, getLayer, pushElement } from '../../composables/use-layer-operate'; @@ -16,6 +8,7 @@ import { useNearestMenuElement } from '../../composables/use-nearest-menu-elemen import MenuTransition from '../menu-transition/menu-transition'; import { SubMenuProps, subMenuProps } from './sub-menu-types'; import { useShowSubMenu } from './use-sub-menu'; +import { SelectArrowIcon } from '../../../../svg-icons'; const ns = useNamespace('menu'); const subNs = useNamespace('submenu'); @@ -31,7 +24,7 @@ export default defineComponent({ setup(props: SubMenuProps, ctx) { const isShow = ref(true); const { - vnode: { key } + vnode: { key }, } = getCurrentInstance() as ComponentInternalInstance; let key_ = String(key); const defaultOpenKeys = inject('openKeys') as Ref; @@ -63,7 +56,7 @@ export default defineComponent({ if (idx >= 0 && cur.tagName === 'UL') { defaultOpenKeys.value.splice(idx, 1); } else { - if (cur.tagName === 'UL'){ + if (cur.tagName === 'UL') { defaultOpenKeys.value.push(key_); } } @@ -72,7 +65,7 @@ export default defineComponent({ type: 'submenu-change', state: isOpen.value, key: key_, - el: ele + el: ele, }); } }; @@ -93,12 +86,13 @@ export default defineComponent({ watch( () => defaultOpenKeys, (n) => { - if (n.value.includes(key_)){ + if (n.value.includes(key_)) { isOpen.value = true; } else { isOpen.value = false; } - },{deep: true} + }, + { deep: true } ); onMounted(() => { const subMenuTitle = title.value as unknown as HTMLElement; @@ -142,18 +136,19 @@ export default defineComponent({ onClick={clickHandle} class={[subMenuClass, class_layer.value, props['disabled'] && `${subMenuClass}-disabled`]} ref={subMenu}> -
+
{ctx.slots?.icon?.()} {props.title} + @@ -162,8 +157,7 @@ export default defineComponent({
+ v-show={!props.disabled}> {ctx.slots.default?.()}
) : ( diff --git a/packages/devui-vue/devui/menu/src/styles/vertical.scss b/packages/devui-vue/devui/menu/src/styles/vertical.scss index 9d3886741c..0452369e28 100644 --- a/packages/devui-vue/devui/menu/src/styles/vertical.scss +++ b/packages/devui-vue/devui/menu/src/styles/vertical.scss @@ -6,8 +6,7 @@ } .#{$devui-prefix}-menu-vertical { padding: 0; - transition: - width $devui-animation-duration-slow $devui-animation-ease-in-smooth, + transition: width $devui-animation-duration-slow $devui-animation-ease-in-smooth, padding $devui-animation-duration-slow $devui-animation-ease-in-smooth; border-right: $devui-line 1px solid; @@ -48,6 +47,7 @@ .#{$devui-prefix}-menu-item-vertical-wrapper { padding-left: 0 !important; + margin: 4px 0 !important; } .#{$devui-prefix}-menu-item { @@ -108,7 +108,6 @@ cursor: pointer; width: 100%; height: 40px; - margin: 4px 0; line-height: 40px; padding-left: 18px; align-items: center; @@ -227,4 +226,18 @@ .#{$devui-prefix}-submenu-disabled::after { content: unset; } + + .#{$devui-prefix}-menu__arrow-icon { + width: 16px; + height: 16px; + transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth; + + path { + fill: $devui-text-weak; + } + + &.is-opened { + transform: rotate(180deg); + } + } } diff --git a/packages/devui-vue/docs/components/category-search/index.md b/packages/devui-vue/docs/components/category-search/index.md index b793d8227b..2830a311e7 100644 --- a/packages/devui-vue/docs/components/category-search/index.md +++ b/packages/devui-vue/docs/components/category-search/index.md @@ -391,6 +391,7 @@ export default defineComponent({ | save | 自定义保存图标 | | | | more | 自定义更多图标 | | | | operation | 自定义除`clear`、`save`、`more`外的其他图标 | | [自定义扩展按钮](#自定义扩展按钮) | +| searchIcon | 自定义搜索图标 | | | ### CategorySearch 方法 diff --git a/packages/devui-vue/docs/components/date-picker-pro/index.md b/packages/devui-vue/docs/components/date-picker-pro/index.md index 8e9fc66c25..0ca1c47613 100644 --- a/packages/devui-vue/docs/components/date-picker-pro/index.md +++ b/packages/devui-vue/docs/components/date-picker-pro/index.md @@ -530,18 +530,19 @@ export default defineComponent({ ### DatePickerPro 参数 -| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------- | :---------------- | :------------------------------------------------------- | :------------------------------------------------------- | :---------------------------------------------------- | -| v-model | `Date` | '' | 必选，选中项绑定的值 | [基本用法](#基本用法) | -| format | [Format](#format) | 'YYYY/MM/DD' \| 'YYYY/MM/DD HH:mm:ss' | 可选，绑定值的日期格式，根据是否 showTime 区别不同默认值 | [日期格式](#日期格式) | -| placeholder | `string` | '请选择日期' | 可选，输入框的 placeholder | [基本用法](#基本用法) | -| showTime | `boolean` | false | 可选，是否显示时分秒 | [显示时间](#显示时间) | -| size | `string` | 'md' | 可选，输入框的尺寸 | [基本用法](#基本用法) | -| disabled | `boolean` | false | 可选，是否禁用选择器 | [禁用选择器](#禁用选择器) | -| calendarRange | `[number,number]` | [1970, 2099] | 可选，设置日历面板显示时间范围 | [设置日历面板可选时间范围](#设置日历面板可选时间范围) | -| limitDateRange | `[Date,Date]` | [new Date(calendarRange[0]), new Date(calendarRange[1])] | 可选，设置日历面板可选时间范围 | [设置日历面板可选时间范围](#设置日历面板可选时间范围) | -| type | `string` | 'date' | 可选，设置日期选择器类型(date/year/month) | [年月选择器](#年月选择器) | -|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果|| +| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo | +| :-------------- | :---------------------- | :------------------------------------------------------- | :------------------------------------------------------- | :---------------------------------------------------- | +| v-model | `Date` | '' | 必选，选中项绑定的值 | [基本用法](#基本用法) | +| format | [Format](#format) | 'YYYY/MM/DD' \| 'YYYY/MM/DD HH:mm:ss' | 可选，绑定值的日期格式，根据是否 showTime 区别不同默认值 | [日期格式](#日期格式) | +| placeholder | `string` | '请选择日期' | 可选，输入框的 placeholder | [基本用法](#基本用法) | +| showTime | `boolean` | false | 可选，是否显示时分秒 | [显示时间](#显示时间) | +| size | `string` | 'md' | 可选，输入框的尺寸 | [基本用法](#基本用法) | +| disabled | `boolean` | false | 可选，是否禁用选择器 | [禁用选择器](#禁用选择器) | +| calendarRange | `[number,number]` | [1970, 2099] | 可选，设置日历面板显示时间范围 | [设置日历面板可选时间范围](#设置日历面板可选时间范围) | +| limitDateRange | `[Date,Date]` | [new Date(calendarRange[0]), new Date(calendarRange[1])] | 可选，设置日历面板可选时间范围 | [设置日历面板可选时间范围](#设置日历面板可选时间范围) | +| type | `string` | 'date' | 可选，设置日期选择器类型(date/year/month) | [年月选择器](#年月选择器) | +| show-glow-style | `boolean` | true | 可选，是否显示悬浮发光效果 | | +| position | [Placement[]](#placement) | ['bottom-start','top-start'] | 可选，自定义下拉面板位置 | | ### DatePickerPro 事件 @@ -589,19 +590,20 @@ type Format = string; ### RangeDatePickerPro 参数 -| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------- | :---------------- | :------------------------------------------------------- | :------------------------------------------------------- | :---------------------------------------------------- | -| v-model | `[Date, Date]` | ['',''] | 必选，选中项绑定的值 | [范围选择器](#范围选择器) | -| format | [Format](#format) | 'YYYY/MM/DD' \| 'YYYY/MM/DD HH:mm:ss' | 可选，绑定值的日期格式，根据是否 showTime 区别不同默认值 | [日期格式](#日期格式) | -| placeholder | `Array` | ['请选择开始日期', '请选择结束日期'] | 可选，输入框的 placeholder | [范围选择器](#范围选择器) | -| showTime | `boolean` | false | 可选，是否显示时分秒 | [范围选择器](#范围选择器) | -| separator | `string` | '-' | 可选，范围选择器的分割符 | [范围选择器](#范围选择器) | -| size | `string` | 'md' | 可选，输入框的尺寸 | | -| disabled | `boolean` | false | 可选，是否禁用选择器 | [禁用选择器](#禁用选择器) | -| calendarRange | `[number,number]` | [1970,2099] | 可选，设置日历面板显示时间范围 | [设置日历面板可选时间范围](#设置日历面板可选时间范围) | -| limitDateRange | `[Date,Date]` | [new Date(calendarRange[0]), new Date(calendarRange[1])] | 可选，设置日历面板可选时间范围 | [设置日历面板可选时间范围](#设置日历面板可选时间范围) | -| type | `string` | 'date' | 可选，设置日期选择器类型(date/year/month) | [范围选择器](#范围选择器) | -|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果|| +| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo | +| :-------------- | :---------------- | :------------------------------------------------------- | :------------------------------------------------------- | :---------------------------------------------------- | +| v-model | `[Date, Date]` | ['',''] | 必选，选中项绑定的值 | [范围选择器](#范围选择器) | +| format | [Format](#format) | 'YYYY/MM/DD' \| 'YYYY/MM/DD HH:mm:ss' | 可选，绑定值的日期格式，根据是否 showTime 区别不同默认值 | [日期格式](#日期格式) | +| placeholder | `Array` | ['请选择开始日期', '请选择结束日期'] | 可选，输入框的 placeholder | [范围选择器](#范围选择器) | +| showTime | `boolean` | false | 可选，是否显示时分秒 | [范围选择器](#范围选择器) | +| separator | `string` | '-' | 可选，范围选择器的分割符 | [范围选择器](#范围选择器) | +| size | `string` | 'md' | 可选，输入框的尺寸 | | +| disabled | `boolean` | false | 可选，是否禁用选择器 | [禁用选择器](#禁用选择器) | +| calendarRange | `[number,number]` | [1970,2099] | 可选，设置日历面板显示时间范围 | [设置日历面板可选时间范围](#设置日历面板可选时间范围) | +| limitDateRange | `[Date,Date]` | [new Date(calendarRange[0]), new Date(calendarRange[1])] | 可选，设置日历面板可选时间范围 | [设置日历面板可选时间范围](#设置日历面板可选时间范围) | +| type | `string` | 'date' | 可选，设置日期选择器类型(date/year/month) | [范围选择器](#范围选择器) | +| show-glow-style | `boolean` | true | 可选，是否显示悬浮发光效果 | | +| position | [Placement[]](#placement) | ['bottom-start','top-start'] | 可选，自定义下拉面板位置 | | ### RangeDatePickerPro 事件 @@ -618,3 +620,23 @@ type Format = string; | :-------- | :---------------------------------------------------------------- | :------------------------------------------------ | | rightArea | 自定义 RangeDatePickerPro 日历面板右侧内容， 如：日期范围快捷选项 | [自定义日期范围面板区域](#自定义日期范围面板区域) | | footer | 自定义 RangeDatePickerPro 日历面板下侧内容 | [自定义日期范围面板区域](#自定义日期范围面板区域) | + +### 类型定义 + +#### Placement + +```ts +type Placement = + | 'top' + | 'right' + | 'bottom' + | 'left' + | 'top-start' + | 'top-end' + | 'right-start' + | 'right-end' + | 'bottom-start' + | 'bottom-end' + | 'left-start' + | 'left-end'; +``` diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index 7332cc4771..09d6746b06 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.10", + "version": "1.6.11", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [