feature: update popover component

packages/ui-vue/components/button-edit/src/composition/types.ts

@@ -1,106 +1,106 @@
 import { ComputedRef, Ref } from 'vue';
 
 export interface UseButton {
-  /**
-   * 附加按钮的Class
-   */
-  buttonClass: ComputedRef<Record<string, boolean | undefined>>;
-  /**
-   * 点击附加按钮事件响应函数
-   */
-  onClickButton: ($event: Event) => void;
-  /**
-   * 鼠标移入附加按钮事件响应函数
-   */
-  onMouseEnterButton: ($event: MouseEvent) => void;
-  /**
-   * 鼠标移出附加按钮事件响应函数
-   */
-  onMouseLeaveButton: ($event: MouseEvent) => void;
-  /**
-   * 鼠标滑过附加按钮事件响应函数
-   */
-  onMouseOverButton: () => void;
+    /**
+     * 附加按钮的Class
+     */
+    buttonClass: ComputedRef<Record<string, boolean | undefined>>;
+    /**
+     * 点击附加按钮事件响应函数
+     */
+    onClickButton: ($event: Event) => void;
+    /**
+     * 鼠标移入附加按钮事件响应函数
+     */
+    onMouseEnterButton: ($event: MouseEvent) => void;
+    /**
+     * 鼠标移出附加按钮事件响应函数
+     */
+    onMouseLeaveButton: ($event: MouseEvent) => void;
+    /**
+     * 鼠标滑过附加按钮事件响应函数
+     */
+    onMouseOverButton: () => void;
 }
 
 export interface UseClear {
-  /**
-   * 启用清空按钮
-   */
-  enableClearButton: ComputedRef<boolean>;
-  /**
-   * 显示清空按钮
-   */
-  showClearButton: Ref<boolean>;
-  /**
-   * 清空输入框值事件响应函数
-   */
-  onClearValue: ($event: Event) => void;
-  /**
-   * 鼠标进入输入框事件响应函数
-   */
-  onMouseEnterTextBox: ($event: MouseEvent) => void;
-  /**
-   * 鼠标移出输入框事件响应函数
-   */
-  onMouseLeaveTextBox: ($event: MouseEvent) => void;
+    /**
+     * 启用清空按钮
+     */
+    enableClearButton: ComputedRef<boolean>;
+    /**
+     * 显示清空按钮
+     */
+    showClearButton: Ref<boolean>;
+    /**
+     * 清空输入框值事件响应函数
+     */
+    onClearValue: ($event: Event) => void;
+    /**
+     * 鼠标进入输入框事件响应函数
+     */
+    onMouseEnterTextBox: ($event: MouseEvent) => void;
+    /**
+     * 鼠标移出输入框事件响应函数
+     */
+    onMouseLeaveTextBox: ($event: MouseEvent) => void;
 }
 
 export interface UseTextBox {
-  /**
-   * 输入框是否获得焦点
-   */
-  hasFocusedTextBox: ComputedRef<boolean>;
-  /**
-   * 输入框是否处于只读状态
-   */
-  isTextBoxReadonly: ComputedRef<boolean>;
-  /**
-   * 输入框Class
-   */
-  textBoxClass: ComputedRef<Record<string, boolean | undefined>>;
-  /**
-   * 输入框提示语
-   */
-  textBoxPlaceholder: ComputedRef<string>;
-  /**
-   * 输入框提示标签
-   */
-  textBoxTitle: ComputedRef<string>;
-  /**
-   * 更新输入框的值并触发change事件
-   */
-  changeTextBoxValue: (newValue: string, showEmitChangeEmit: boolean) => void;
-  /**
-   * 输入框失去焦点事件响应函数
-   */
-  onBlurTextBox: ($event: Event) => void;
-  /**
-   * 鼠标点击输入框事件响应函数
-   */
-  onClickTextBox: ($event: Event) => void;
-  /**
-   * 输入框获得焦点事件响应函数
-   */
-  onFocusTextBox: ($event: Event) => void;
-  /**
-   * 输入框值变化事件
-   */
-  onInput: ($event: Event) => void;
-  /**
-   * 鼠标点击输入框事件响应函数
-   */
-  onMouseDownTextBox: ($event: MouseEvent) => void;
-  /**
-   * 键盘在输入框按下事件
-   */
-  onKeyDownTextBox: ($event: Event) => void;
-  /**
-   * 键盘在输入框抬起事件
-   */
-  onKeyUpTextBox: ($event: Event) => void;
-  /**
-   * 输入框值变化事件响应函数
-   */
-  onTextBoxValueChange: ($event: Event) => void;
+    /**
+     * 输入框是否获得焦点
+     */
+    hasFocusedTextBox: ComputedRef<boolean>;
+    /**
+     * 输入框是否处于只读状态
+     */
+    isTextBoxReadonly: ComputedRef<boolean>;
+    /**
+     * 输入框Class
+     */
+    textBoxClass: ComputedRef<Record<string, boolean | undefined>>;
+    /**
+     * 输入框提示语
+     */
+    textBoxPlaceholder: ComputedRef<string>;
+    /**
+     * 输入框提示标签
+     */
+    textBoxTitle: ComputedRef<string>;
+    /**
+     * 更新输入框的值并触发change事件
+     */
+    changeTextBoxValue: (newValue: string, showEmitChangeEmit: boolean) => void;
+    /**
+     * 输入框失去焦点事件响应函数
+     */
+    onBlurTextBox: ($event: Event) => void;
+    /**
+     * 鼠标点击输入框事件响应函数
+     */
+    onClickTextBox: ($event: Event) => void;
+    /**
+     * 输入框获得焦点事件响应函数
+     */
+    onFocusTextBox: ($event: Event) => void;
+    /**
+     * 输入框值变化事件
+     */
+    onInput: ($event: Event) => void;
+    /**
+     * 鼠标点击输入框事件响应函数
+     */
+    onMouseDownTextBox: ($event: MouseEvent) => void;
+    /**
+     * 键盘在输入框按下事件
+     */
+    onKeyDownTextBox: ($event: Event) => void;
+    /**
+     * 键盘在输入框抬起事件
+     */
+    onKeyUpTextBox: ($event: Event) => void;
+    /**
+     * 输入框值变化事件响应函数
+     */
+    onTextBoxValueChange: ($event: Event) => void;
 }

packages/ui-vue/components/popover/src/popover.component.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
                 <>
                     <div class="popover-arrow arrow"></div>
                     {shouldShowTitle.value && <h3 class="popover-title popover-header">{props.title}</h3>}
-                    <div class={popoverContainerClass.value}></div>
+                    <div class={popoverContainerClass.value}>{context.slots.default && context.slots?.default()}</div>
                 </>
             );
         };

packages/ui-vue/components/popover/src/popover.props.ts

@@ -1,7 +1,10 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
+
+export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
 
 export const popoverProps = {
     title: { type: String },
+    position: { type: String as PropType<PopoverPosition>, default: 'top' },
 };
 
 export type PopoverProps = ExtractPropTypes<typeof popoverProps>;