修复表单、分类搜索、Popover组件问题，弹出类组件自动识别方向

Author: xingyan95

packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts

@@ -48,7 +48,7 @@ export const autoCompleteProps = {
   },
   position: {
     type: Array as PropType<Array<Placement>>,
-    default: ['bottom-end'],
+    default: () => ['bottom', 'top', 'left', 'right'],
   },
   disabled: {
     type: Boolean,

packages/devui-vue/devui/auto-complete/src/auto-complete.tsx

@@ -44,7 +44,6 @@ export default defineComponent({
     const inputNs = useNamespace('auto-complete-input');
     const isDisabled = computed(() => formContext?.disabled || disabled.value);
     const autoCompleteSize = computed(() => formContext?.size || props.size);
-    const align = computed(() => (position.value.some((item) => item.includes('start') || item.includes('end')) ? 'start' : null));
 
     const { handleSearch, searchList, showNoResultItemTemplate, recentlyFocus } = useSearchFn(
       ctx,
@@ -126,7 +125,6 @@ export default defineComponent({
           <FlexibleOverlay
             origin={origin.value}
             position={position.value}
-            align={align.value}
             v-model={visible.value}
             onPositionChange={handlePositionChange}
             style={overlayStyles.value}>

packages/devui-vue/devui/cascader/src/cascader.tsx

@@ -97,7 +97,6 @@ export default defineComponent({
               ref={overlayRef}
               v-model={menuShow.value}
               position={position.value as Placement[]}
-              align="start"
               style={styles.value}
               onPositionChange={handlePositionChange}>
               <div class={ns.e('drop-menu-animation')}>

packages/devui-vue/devui/category-search/src/components/category-search-tag.tsx

@@ -20,7 +20,7 @@ export default defineComponent({
 					rootCtx.slots[`${item.value.field}Tag`]!({ tag: item.value })
 				) : isJoinLabelType.value ? (
 					<>
-						<span>{item.value.label}</span>
+						<span>{item.value.label}: </span>
 						<span class='dp-category-search-multi-tag' style={{ maxWidth: tagMaxWidth?.value + 'px' }}>
 							{Array.isArray(item.value.value?.cache) &&
 								item.value.value?.cache?.map((tag: any, index: number) => (

packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx

@@ -52,15 +52,6 @@ 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 = {
@@ -149,7 +140,6 @@ export default defineComponent({
                 v-model={isPanelShow.value}
                 ref={overlayRef}
                 origin={originRef.value}
-                align={align.value}
                 position={position.value}
                 style={styles.value}
                 onPositionChange={handlePositionChange}>

packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts

@@ -50,7 +50,7 @@ export const datePickerProCommonProps = {
   },
   position: {
     type: Array as PropType<Placement[]>,
-    default: () => ['bottom-start', 'top-start'],
+    default: () => ['bottom-start', 'top-start', 'left-start', 'right-start'],
   },
 };
 

packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx

@@ -47,15 +47,6 @@ 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 = {
@@ -98,7 +89,6 @@ export default defineComponent({
                 v-model={isPanelShow.value}
                 ref={overlayRef}
                 origin={originRef.value}
-                align={align.value}
                 position={position.value}
                 style={styles.value}
                 onPositionChange={handlePositionChange}>

packages/devui-vue/devui/dropdown/src/dropdown-types.ts

@@ -15,7 +15,6 @@ export type Placement =
   | 'bottom-end'
   | 'left-start'
   | 'left-end';
-export type Alignment = 'start' | 'end';
 export type OffsetOptions = { mainAxis?: number; crossAxis?: number };
 
 export type EmitEvent = (event: 'toggle', result: boolean) => void;
@@ -35,11 +34,7 @@ export const dropdownProps = {
   },
   position: {
     type: Array as PropType<Array<Placement>>,
-    default: ['bottom'],
-  },
-  align: {
-    type: String as PropType<Alignment> | null,
-    default: null,
+    default: () => ['bottom', 'top', 'left', 'right'],
   },
   offset: {
     type: [Number, Object] as PropType<number | OffsetOptions>,

packages/devui-vue/devui/dropdown/src/dropdown.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
   props: dropdownProps,
   emits: ['toggle'],
   setup(props: DropdownProps, { slots, attrs, emit, expose }) {
-    const { visible, position, align, offset, destroyOnHide, shiftOffset, showAnimation, teleport } = toRefs(props);
+    const { visible, position, offset, destroyOnHide, shiftOffset, showAnimation, teleport } = toRefs(props);
     const origin = ref<HTMLElement | undefined>();
     const dropdownRef = ref<HTMLElement | undefined>();
     const overlayRef = ref();
@@ -59,7 +59,6 @@ export default defineComponent({
               ref={overlayRef}
               origin={origin.value}
               position={position.value}
-              align={align.value}
               offset={offset.value}
               shiftOffset={shiftOffset?.value}
               onPositionChange={handlePositionChange}

packages/devui-vue/devui/editable-select/src/editable-select-types.ts

@@ -34,7 +34,7 @@ export const editableSelectProps = {
   },
   position: {
     type: Array as PropType<Placement[]>,
-    default: ['bottom'],
+    default: () => ['bottom', 'top', 'left', 'right'],
   },
   options: {
     type: Array as PropType<Options>,

packages/devui-vue/devui/editable-select/src/editable-select.tsx

@@ -35,7 +35,6 @@ export default defineComponent({
     const states = useSelectStates();
     //  data refs
     const { appendToBody, disabled, modelValue, position, placeholder, maxLength } = toRefs(props);
-    const align = computed(() => (position.value.some((item) => item.includes('start') || item.includes('end')) ? 'start' : null));
 
     // input事件
     const { onInput, onMouseenter, onMouseleave, setSoftFocus, handleBlur, handleFocus, handleClear } = useInputEvent(
@@ -101,7 +100,6 @@ export default defineComponent({
             v-model={states.visible}
             origin={originRef.value}
             position={position.value}
-            align={align.value}
             style={styles.value}
             onPositionChange={handlePositionChange}>
             <Dropdown options={filteredOptions.value} width={props.width} maxHeight={props.maxHeight} v-slots={ctx.slots}></Dropdown>

packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts

@@ -1,6 +1,6 @@
 import type { RuleItem, ValidateFieldsError } from 'async-validator';
-import type { ComputedRef, ExtractPropTypes, PropType, InjectionKey, Ref, SetupContext } from 'vue';
-import { LabelAlign, LabelSize, Layout } from '../../form-types';
+import type { ComputedRef, ExtractPropTypes, PropType, Ref, SetupContext } from 'vue';
+import { LabelAlign, LabelSize, Layout, RequirePosition } from '../../form-types';
 import { FeedbackStatus } from '../form-control/form-control-types';
 
 export type FormItemValidateState = '' | 'error' | 'pending' | 'success';
@@ -81,6 +81,7 @@ export type LabelData = ComputedRef<{
   layout: Layout;
   labelSize: LabelSize;
   labelAlign: LabelAlign;
+  requiredPosition: RequirePosition;
   helpTips: string | HelpTips;
   formItemCtx: SetupContext;
 }>;

packages/devui-vue/devui/form/src/components/form-item/form-item.tsx

@@ -24,6 +24,7 @@ export default defineComponent({
       layout: formContext.layout,
       labelSize: formContext.labelSize,
       labelAlign: formContext.labelAlign,
+      requiredPosition: formContext.requirePosition,
       helpTips: helpTips.value,
       formItemCtx: ctx,
     }));

packages/devui-vue/devui/form/src/components/form-label/form-label.scss

@@ -47,11 +47,21 @@
     margin-right: 8px;
     margin-left: -12px;
   }
+}
+
+.#{$devui-prefix}-form__label--required-right {
+  &::after {
+    content: '*';
+    color: red;
+    display: inline-block;
+    margin-left: 8px;
+  }
+}
 
-  &-hide {
-    &::before {
-      display: none;
-    }
+.#{$devui-prefix}-form__label--required-hide {
+  &::before,
+  &::after {
+    display: none;
   }
 }
 

packages/devui-vue/devui/form/src/components/form-label/use-form-label.ts

@@ -25,7 +25,8 @@ export function useFormLabel() {
 
   const labelInnerClasses = computed(() => ({
     [`${ns.e('label-span')}`]: true,
-    [`${ns.em('label', 'required')}`]: formItemContext.isRequired,
+    [`${ns.em('label', 'required')}`]: formItemContext.isRequired && labelData.value.requiredPosition === 'left',
+    [`${ns.em('label', 'required-right')}`]: formItemContext.isRequired && labelData.value.requiredPosition === 'right',
     [`${ns.em('label', 'required-hide')}`]: formItemContext.isRequired && formContext.hideRequiredMark,
   }));
 

packages/devui-vue/devui/form/src/form-types.ts

@@ -16,6 +16,7 @@ export type LabelAlign = 'start' | 'center' | 'end';
 export type FormData = Record<string, unknown>;
 export type StyleType = 'default' | 'gray';
 export type AppendToBodyScrollStrategy = 'close' | 'reposition';
+export type RequirePosition = 'left' | 'right';
 
 export type FormRules = Partial<Record<string, Array<FormRuleItem>>>;
 export interface ValidateFailure {
@@ -78,6 +79,10 @@ export const formProps = {
     type: String as PropType<AppendToBodyScrollStrategy>,
     default: 'reposition',
   },
+  requirePosition: {
+    type: String as PropType<RequirePosition>,
+    default: 'left',
+  },
 } as const;
 
 export interface UseFieldCollection {

packages/devui-vue/devui/pagination/src/pagination-types.ts

@@ -19,7 +19,7 @@ export const paginationProps = {
   },
   pageSizeDirection: {
     type: Array as PropType<Array<PageSizeDirection>>,
-    default: () => ['bottom', 'top'],
+    default: () => ['bottom', 'top', 'left', 'bottom'],
   },
   pageIndex: {
     type: Number,

packages/devui-vue/devui/popover/src/popover-types.ts

@@ -15,7 +15,6 @@ export type Placement =
   | 'bottom-end'
   | 'left-start'
   | 'left-end';
-export type Alignment = 'start' | 'end';
 export type OffsetOptions = { mainAxis?: number; crossAxis?: number };
 
 export const popoverProps = {
@@ -25,11 +24,7 @@ export const popoverProps = {
   },
   position: {
     type: Array as PropType<Array<Placement>>,
-    default: ['bottom'],
-  },
-  align: {
-    type: String as PropType<Alignment> | null,
-    default: null,
+    default: () => ['top', 'right', 'bottom', 'left'],
   },
   offset: {
     type: [Number, Object] as PropType<number | OffsetOptions>,

packages/devui-vue/devui/popover/src/popover.tsx

@@ -14,7 +14,7 @@ export default defineComponent({
   props: popoverProps,
   emits: ['show', 'hide'],
   setup(props: PopoverProps, { slots, attrs, emit }) {
-    const { content, popType, position, align, offset, showAnimation } = toRefs(props);
+    const { content, popType, position, offset, showAnimation } = toRefs(props);
     const origin = ref<HTMLElement>();
     const popoverRef = ref<HTMLElement>();
     const visible = ref(false);
@@ -40,7 +40,6 @@ export default defineComponent({
               ref={popoverRef}
               origin={origin.value}
               position={position.value}
-              align={align.value}
               offset={offset.value}
               class={[ns.e('content'), popType.value !== 'default' ? 'is-icon' : '']}
               show-arrow

packages/devui-vue/devui/popover/src/use-popover.ts

@@ -50,6 +50,7 @@ export function usePopover(
 export function usePopoverEvent(props: PopoverProps, visible: Ref<boolean>, origin: Ref): UsePopoverEvent {
   const { trigger, position, mouseEnterDelay, mouseLeaveDelay, disabled } = toRefs(props);
   const isClick: ComputedRef<boolean> = computed(() => trigger.value === 'click');
+  const isHover: ComputedRef<boolean> = computed(() => trigger.value === 'hover');
   const placement: Ref<string> = ref(position.value[0].split('-')[0]);
   const isEnter: Ref<boolean> = ref(false);
 
@@ -69,13 +70,13 @@ export function usePopoverEvent(props: PopoverProps, visible: Ref<boolean>, orig
     if (disabled.value) {
       return;
     }
-    if (!isClick.value) {
+    if (isHover.value) {
       isEnter.value = true;
       enter();
     }
   };
   const onMouseleave = () => {
-    if (!isClick.value) {
+    if (isHover.value) {
       isEnter.value = false;
       leave();
     }

packages/devui-vue/devui/select/src/select-types.ts

@@ -13,6 +13,19 @@ export type Options = Array<OptionItem>;
 export type ModelValue = number | string | Array<number | string>;
 export type filterValue = boolean | ((query: string) => void);
 export type SelectSize = 'sm' | 'md' | 'lg';
+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 selectProps = {
   modelValue: {
     type: [String, Number, Array] as PropType<ModelValue>,
@@ -26,6 +39,10 @@ export const selectProps = {
     type: Array as PropType<Options>,
     default: () => [],
   },
+  position: {
+    type: Array as PropType<Placement[]>,
+    default: () => ['bottom', 'top', 'left', 'right'],
+  },
   size: {
     type: String as PropType<SelectSize>,
     default: '',

packages/devui-vue/devui/select/src/select.tsx

@@ -24,7 +24,7 @@ import SelectContent from './components/select-content';
 import useSelectFunction from './composables/use-select-function';
 import './select.scss';
 import { createI18nTranslate } from '../../locale/create';
-import { FlexibleOverlay, Placement } from '../../overlay';
+import { FlexibleOverlay } from '../../overlay';
 import LoadingDirective from '../../loading/src/loading-directive';
 
 export default defineComponent({
@@ -77,7 +77,6 @@ export default defineComponent({
     ctx.expose({ focus, blur, toggleChange });
     const isRender = ref<boolean>(false);
     const currentPosition = ref('bottom');
-    const position = ref<Placement[]>(['bottom-start', 'top-start']);
 
     const handlePositionChange = (pos: string) => {
       currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
@@ -141,10 +140,9 @@ export default defineComponent({
                 v-model={isRender.value}
                 ref={dropdownRef}
                 origin={originRef.value}
-                align="start"
                 offset={4}
                 fit-origin-width
-                position={position.value}
+                position={props.position}
                 onPositionChange={handlePositionChange}
                 style={styles.value}
                 class={props.menuClass}>