@whitesev/pops 2.6.1 → 3.0.1

package/src/components/rightClickMenu/types/index.ts

@@ -1,11 +1,33 @@
-import type { PopsCommonConfig } from "../../../types/components";
+import type { PopsGeneralConfig } from "../../../types/components";
 import type { PopsIconType } from "../../../types/icon";
-import type { PopsPanelCommonDetails } from "../../panel/types/components-common";
+import type { PopsPanelGeneralConfig } from "../../panel/types/components-common";
+
+/**
+ * 存储在pops.rightClickMenu的右键菜单根元素上的属性
+ */
+export type PopsRightClickMenuRootStoreNodeValue = {
+  child: HTMLElement[];
+};
+/**
+ * 存储在pops.rightClickMenu的右键菜单子菜单的根元素上的属性
+ */
+export type PopsRightClickMenuChildRootStoreNodeValue = {
+  parent: HTMLElement;
+  root: HTMLElement;
+};
+/**
+ * 存储在pops.rightClickMenu的右键菜单每一项元素上的属性
+ */
+export type PopsRightClickMenuItemStoreNodeValue = {
+  child?: HTMLElement;
+  parent?: HTMLElement;
+  root?: HTMLElement;
+};
 
 /**
  * pops.rightClickMenu的右键菜单配置
  */
-export interface PopsRightClickMenuDataDetails {
+export interface PopsRightClickMenuDataConfig {
   /**
    * svg图标，留空则是没图标
    * @default ""
@@ -24,8 +46,8 @@ export interface PopsRightClickMenuDataDetails {
    * 点击的回调函数
    * @param clickEvent 点击菜单的click事件
    * @param contextMenuEvent 触发的contextmenu事件
-   * @param liElement <li>元素
-   * @param menuListenerRootNode 右键菜单监听的元素
+   * @param $li <li>元素
+   * @param $listenerRootNode 右键菜单监听的元素
    * @returns
    * + true(默认) 关闭菜单
    * + false 不关闭菜单
@@ -34,25 +56,25 @@ export interface PopsRightClickMenuDataDetails {
   callback?: (
     clickEvent: PointerEvent,
     contextMenuEvent: PointerEvent,
-    liElement: HTMLLIElement,
-    menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>
-  ) => boolean | void | Promise<boolean | void>;
+    $li: HTMLLIElement,
+    $listenerRootNode: NonNullable<PopsRightClickMenuConfig["$target"]>
+  ) => IPromise<boolean | void>;
   /**
    * 子项配置
    */
-  item?: PopsRightClickMenuDataDetails[] | null;
+  item?: PopsRightClickMenuDataConfig[] | null;
 }
 
 /**
  * pops.rightClickMenu
  */
-export interface PopsRightClickMenuDetails
-  extends Pick<PopsCommonConfig, "useShadowRoot" | "beforeAppendToPageCallBack" | "zIndex" | "style" | "only"> {
+export interface PopsRightClickMenuConfig
+  extends Pick<PopsGeneralConfig, "useShadowRoot" | "beforeAppendToPageCallBack" | "zIndex" | "style" | "only"> {
   /**
    * 目标元素
    * @default document.documentElement
    */
-  target?: HTMLElement | Window | EventTarget | Node;
+  $target?: HTMLElement | Window | EventTarget | Node;
   /**
    * 目标的子元素选择器，默认为空
    * @default null
@@ -66,7 +88,7 @@ export interface PopsRightClickMenuDetails
   /**
    * 右键菜单数据
    */
-  data: PopsRightClickMenuDataDetails[];
+  data: PopsRightClickMenuDataConfig[];
   /**
    * 子菜单的左右偏移距离
    * @default 0
@@ -81,7 +103,7 @@ export interface PopsRightClickMenuDetails
    * （可选）元素的className，值为空的话就不设置
    * @default ""
    */
-  className?: PopsPanelCommonDetails<any>["className"];
+  className?: PopsPanelGeneralConfig<any>["className"];
   /**
    * 是否启用动画，默认false
    *

package/src/components/searchSuggestion/{config.ts → defaultConfig.ts}

@@ -1,34 +1,41 @@
-import type { PopsSearchSuggestionData, PopsSearchSuggestionDetails } from "./types/index";
+import type { PopsSearchSuggestionData, PopsSearchSuggestionConfig } from "./types/index";
 
-export const searchSuggestionConfig = (): DeepRequired<PopsSearchSuggestionDetails<any>> => {
-  const data: DeepRequired<PopsSearchSuggestionData>[] = [];
+export const PopsSearchSuggestionDefaultConfig = (): DeepRequired<PopsSearchSuggestionConfig<any>> => {
+  const data: DeepRequired<PopsSearchSuggestionData<any>>[] = [];
   for (let index = 0; index < 10; index++) {
     data.push({
       value: `测试${index}`,
       enableDeleteButton: true,
       deleteButtonClickCallback(event, $dataItem, dataItem, config) {
-        console.log("删除当前项", [event, $dataItem, dataItem, config]);
+        const value = dataItem.value;
+        console.log("删除当前项：" + value, [event, $dataItem, dataItem, config]);
         return true;
       },
       itemView(dateItem) {
         return `${dateItem.value}-html`;
       },
       clickCallback(event, $dataItem, dataItem, config) {
-        console.log("item项的点击回调", [event, $dataItem, data, config]);
-        // config.inputTarget!.value = dataItem.value;
-        return index % 2 === 0 ? true : false;
+        const isUpdateInputValue = index % 2 === 0 ? true : false;
+        const value = dataItem.value;
+        if (isUpdateInputValue) {
+          console.log("item项的点击回调,更新input内的值：" + value, [event, $dataItem, dataItem, config, value]);
+        } else {
+          console.log("item项的点击回调：" + value, [event, $dataItem, dataItem, config, value]);
+        }
+        return isUpdateInputValue;
       },
       selectCallback(event, $dataItem, dataItem, config) {
-        console.log("item项的选中回调", [event, $dataItem, data, config]);
+        const value = dataItem.value;
+        console.log("item项的选中回调：" + value, [event, $dataItem, dataItem, config]);
       },
     });
   }
   return {
     // @ts-ignore
-    target: null,
+    $target: null,
     // @ts-ignore
-    inputTarget: null,
-    selfDocument: document,
+    $inputTarget: null,
+    $selfDocument: document,
     data: data,
     useShadowRoot: true,
     className: "",