Xingyan/fix form

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}>