@whitesev/pops 3.0.1 → 3.0.2

package/dist/types/src/Pops.d.ts

@@ -289,7 +289,7 @@ declare class Pops {
                     notDisable(): void;
                 };
             };
-            createSectionContainerItem_slider_new(viewConfig: import("./components/panel/types/components-slider").PopsPanelSliderConfig): {
+            createSectionContainerItem_slider(viewConfig: import("./components/panel/types/components-slider").PopsPanelSliderConfig): {
                 $el: HTMLLIElement;
                 handler: {
                     [Symbol.toStringTag]: string;
@@ -423,7 +423,41 @@ declare class Pops {
                 handler: {
                     [Symbol.toStringTag]: string;
                     $el: {
-                        itemLeftTextContainer: HTMLElement | null;
+                        itemLeftTextContainer: HTMLElement;
+                        $container: HTMLElement;
+                        $select: HTMLSelectElement;
+                    };
+                    $eleKey: {
+                        disable: string;
+                        value: string;
+                        viewConfig: string;
+                    };
+                    $data: {
+                        data: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>[];
+                        defaultValue: any;
+                    };
+                    init(): void;
+                    setNodeValue($ele: HTMLElement, key: string, value: any): void;
+                    getNodeValue($ele: HTMLElement, key: string): any;
+                    disable(): void;
+                    notDisable(): void;
+                    isDisabled(): boolean;
+                    initOption(): void;
+                    setOptionSelected($option: HTMLOptionElement): void;
+                    setSelectOptionsDisableStatus(): void;
+                    setOptionDisableStatus($option: HTMLOptionElement): void;
+                    getSelectOptionInfo($option: HTMLOptionElement): {
+                        value: any;
+                        text: string;
+                        views: NonNullable<IFunction<(import("./components/panel/types").PopsPanelViewConfig | import("./components/panel/types/components-container").PopsPanelContainerConfig)[]> | undefined>;
+                        $option: HTMLOptionElement;
+                    };
+                    onValueChange(): void;
+                    onClick(): void;
+                } | {
+                    [Symbol.toStringTag]: string;
+                    $el: {
+                        $itemLeftContainer: HTMLElement;
                         $container: HTMLElement;
                         $wrapper: HTMLElement;
                         $section: HTMLElement;
@@ -455,8 +489,8 @@ declare class Pops {
                     setItemSelected($el: HTMLElement): void;
                     removeItemSelected($el: HTMLElement): void;
                     isItemSelected($el: HTMLElement): boolean;
-                    addSelectedItemInfo(data: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>): void;
                     getItemDataOption($el: HTMLElement): import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>;
+                    addSelectedItemInfo(data: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>): void;
                     removeSelectedItemInfo(): void;
                     updateSelectedInfo(data?: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>): void;
                     resetCurrentSelectedInfo(): void;
@@ -477,45 +511,51 @@ declare class Pops {
                 } | {
                     [Symbol.toStringTag]: string;
                     $el: {
-                        itemLeftTextContainer: HTMLElement | null;
-                        panelSelect: HTMLDivElement;
-                        select: HTMLSelectElement;
-                    };
-                    $eleKey: {
-                        disable: string;
-                        value: string;
-                        viewConfig: string;
+                        $itemLeftContainer: HTMLElement;
+                        $container: HTMLElement;
+                        $wrapper: HTMLElement;
                     };
                     $data: {
                         data: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>[];
                         defaultValue: any;
+                        selectedData: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any> | undefined;
+                        rotateKey: string;
                     };
                     init(): void;
-                    setNodeValue($ele: HTMLElement, key: string, value: any): void;
-                    getNodeValue($ele: HTMLElement, key: string): any;
+                    initDefault(): void;
+                    initEl(): void;
                     disable(): void;
-                    notDisable(): void;
+                    cancleDisable(): void;
                     isDisabled(): boolean;
-                    initOption(): void;
-                    setOptionSelected($option: HTMLOptionElement): void;
-                    setSelectOptionsDisableStatus(): void;
-                    setOptionDisableStatus($option: HTMLOptionElement): void;
-                    getSelectOptionInfo($option: HTMLOptionElement): {
-                        value: any;
-                        text: string;
-                        views: NonNullable<IFunction<(import("./components/panel/types").PopsPanelViewConfig | import("./components/panel/types/components-container").PopsPanelContainerConfig)[]> | undefined>;
-                        $option: HTMLOptionElement;
-                    };
-                    onValueChange(): void;
-                    onClick(): void;
-                };
+                    createSelectItemElement(data: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>): HTMLDivElement;
+                    setSelectItemText(data: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>, $select: HTMLElement): void;
+                    onSelectItemClick(data: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any> | undefined, $el: HTMLElement): void;
+                    onValueChangeCallback(data?: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>, isUpdateSelectItem?: boolean): void;
+                    updateAllSelectItemStatus(): void;
+                    resetAllSelectedItemStatus(): void;
+                    addSelectedItemInfo(data: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>): void;
+                    removeSelectedItemInfo(): void;
+                    updateSelectedInfo(data?: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>): void;
+                    resetCurrentSelectedInfo(): void;
+                    setSelectItemDisabled($select: HTMLElement): void;
+                    removeSelectItemDisabled($select: HTMLElement): void;
+                    isSelectItemDisabled($select: HTMLElement): string | true | null;
+                    setItemSelected($select: HTMLElement): void;
+                    removeItemSelected($select: HTMLElement): void;
+                    isItemSelected($select: HTMLElement): boolean;
+                    getAllSelectItems(onlySelected?: boolean): {
+                        data: import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>;
+                        $select: HTMLElement;
+                    }[];
+                    getItemDataOption($el: HTMLElement): import("./components/panel/types/components-select").PopsPanelSelectDataOption<any>;
+                } | undefined;
             };
             createSectionContainerItem_select_multiple(viewConfig: import("./components/panel/types/components-selectMultiple").PopsPanelSelectMultipleConfig<any>): {
                 $el: HTMLLIElement;
                 handler: {
                     [Symbol.toStringTag]: string;
                     $el: {
-                        itemLeftTextContainer: HTMLElement | null;
+                        $itemLeftContainer: HTMLElement | null;
                         $container: HTMLElement;
                         $wrapper: HTMLElement;
                         $section: HTMLElement;
@@ -758,6 +798,7 @@ declare class Pops {
     panel: (config: PopsPanelConfig) => {
         addEventListener: <K extends keyof import("./components/panel/types").PopsPanelEventType>(event: K, listener: (evt: CustomEvent<import("./components/panel/types").PopsPanelEventType[K]>) => void, options?: boolean | EventListenerOptions) => void;
         removeEventListener: <K extends keyof import("./components/panel/types").PopsPanelEventType>(event: K, listener: (evt: CustomEvent<import("./components/panel/types").PopsPanelEventType[K]>) => void, options?: boolean | EventListenerOptions) => void;
+        mode: import("./types/main").PopsType;
         close: () => Promise<void>;
         hide: () => Promise<void>;
         show: () => Promise<void>;
@@ -768,7 +809,6 @@ declare class Pops {
         $anim: HTMLDivElement;
         $pops: HTMLDivElement;
         $mask?: HTMLDivElement | undefined;
-        mode: import("./types/main").PopsType;
     };
     /**
      * 右键菜单

package/dist/types/src/components/panel/handlerComponents.d.ts

@@ -170,7 +170,7 @@ export declare const PanelHandlerComponents: () => {
      * 获取中间容器的元素<li>
      * @param viewConfig
      */
-    createSectionContainerItem_slider_new(viewConfig: PopsPanelSliderConfig): {
+    createSectionContainerItem_slider(viewConfig: PopsPanelSliderConfig): {
         $el: HTMLLIElement;
         handler: {
             [Symbol.toStringTag]: string;
@@ -521,7 +521,86 @@ export declare const PanelHandlerComponents: () => {
         handler: {
             [Symbol.toStringTag]: string;
             $el: {
-                itemLeftTextContainer: HTMLElement | null;
+                itemLeftTextContainer: HTMLElement;
+                $container: HTMLElement;
+                $select: HTMLSelectElement;
+            };
+            $eleKey: {
+                disable: string;
+                value: string;
+                viewConfig: string;
+            };
+            $data: {
+                data: PopsPanelSelectDataOption<any>[];
+                defaultValue: any;
+            };
+            init(): void;
+            /**
+             * 给option元素设置属性
+             * @param $ele
+             * @param key
+             * @param value
+             */
+            setNodeValue($ele: HTMLElement, key: string, value: any): void;
+            /**
+             * 获取option元素上设置的属性
+             * @param $ele
+             * @param value
+             * @param key
+             */
+            getNodeValue($ele: HTMLElement, key: string): any;
+            /**
+             * 禁用选项
+             */
+            disable(): void;
+            /**
+             * 取消禁用
+             */
+            notDisable(): void;
+            /**
+             * 判断是否禁用
+             */
+            isDisabled(): boolean;
+            /**
+             * 初始化选项
+             */
+            initOption(): void;
+            /**
+             * 设置选项选中
+             * @param $option
+             */
+            setOptionSelected($option: HTMLOptionElement): void;
+            /**
+             * 检测所有option并设置禁用状态
+             */
+            setSelectOptionsDisableStatus(): void;
+            /**
+             * 设置禁用状态
+             * @param $option
+             */
+            setOptionDisableStatus($option: HTMLOptionElement): void;
+            /**
+             * 获取option上的信息
+             * @param $option
+             */
+            getSelectOptionInfo($option: HTMLOptionElement): {
+                value: any;
+                text: string;
+                views: NonNullable<IFunction<(PopsPanelViewConfig | PopsPanelContainerConfig)[]> | undefined>;
+                $option: HTMLOptionElement;
+            };
+            /**
+             * 监听选择内容改变
+             */
+            onValueChange(): void;
+            /**
+             * 监听点击事件
+             */
+            onClick(): void;
+        } | {
+            [Symbol.toStringTag]: string;
+            $el: {
+                $itemLeftContainer: HTMLElement;
                 /** 选择框容器 */
                 $container: HTMLElement;
                 /** 选择框包裹的容器 */
@@ -630,17 +709,17 @@ export declare const PanelHandlerComponents: () => {
              * @param $el
              */
             isItemSelected($el: HTMLElement): boolean;
+            /**
+             * 获取项上存储的信息
+             * @param $el 选项元素
+             */
+            getItemDataOption($el: HTMLElement): PopsPanelSelectDataOption<any>;
             /**
              * 添加选中信息
              * @param data 选择项的数据
              * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
              */
             addSelectedItemInfo(data: PopsPanelSelectDataOption<any>): void;
-            /**
-             * 获取项上存储的信息
-             * @param $el 选项元素
-             */
-            getItemDataOption($el: HTMLElement): PopsPanelSelectDataOption<any>;
             /**
              * 移除选中信息
              * @param data 选择项的数据
@@ -710,83 +789,151 @@ export declare const PanelHandlerComponents: () => {
         } | {
             [Symbol.toStringTag]: string;
             $el: {
-                itemLeftTextContainer: HTMLElement | null;
-                panelSelect: HTMLDivElement;
-                select: HTMLSelectElement;
-            };
-            $eleKey: {
-                disable: string;
-                value: string;
-                viewConfig: string;
+                $itemLeftContainer: HTMLElement;
+                /** 选择框容器 */
+                $container: HTMLElement;
+                /** 选择框包裹的容器 */
+                $wrapper: HTMLElement;
             };
             $data: {
+                /**
+                 * 数据
+                 */
                 data: PopsPanelSelectDataOption<any>[];
+                /**
+                 * 默认值
+                 */
                 defaultValue: any;
+                /**
+                 * 选择的信息
+                 */
+                selectedData: PopsPanelSelectDataOption<any> | undefined;
+                /**
+                 * 箭头旋转的属性
+                 */
+                rotateKey: string;
             };
+            /** 初始化 */
             init(): void;
+            /** 初始化默认值 */
+            initDefault(): void;
+            /** 初始化$ele变量 */
+            initEl(): void;
             /**
-             * 给option元素设置属性
-             * @param $ele
-             * @param key
-             * @param value
+             * 禁用选项容器
              */
-            setNodeValue($ele: HTMLElement, key: string, value: any): void;
+            disable(): void;
             /**
-             * 获取option元素上设置的属性
-             * @param $ele
-             * @param value
-             * @param key
+             * 取消禁用选项容器
              */
-            getNodeValue($ele: HTMLElement, key: string): any;
+            cancleDisable(): void;
             /**
-             * 禁用选项
+             * 判断当前是否已禁用选项容器
              */
-            disable(): void;
+            isDisabled(): boolean;
             /**
-             * 取消禁用
+             * 创建选择项
+             * @param data 数据
              */
-            notDisable(): void;
+            createSelectItemElement(data: PopsPanelSelectDataOption<any>): HTMLDivElement;
             /**
-             * 判断是否禁用
+             * 设置选择项的文字
+             * @param data 选择项的数据
+             * @param $select 选择项元素
              */
-            isDisabled(): boolean;
+            setSelectItemText(data: PopsPanelSelectDataOption<any>, $select: HTMLElement): void;
             /**
-             * 初始化选项
+             * 设置选择项点击事件
              */
-            initOption(): void;
+            onSelectItemClick(data: PopsPanelSelectDataOption<any> | undefined, $el: HTMLElement): void;
             /**
-             * 设置选项选中
-             * @param $option
+             * 选中的值改变的回调
+             * @param data 当前的选中信息
              */
-            setOptionSelected($option: HTMLOptionElement): void;
+            onValueChangeCallback(data?: PopsPanelSelectDataOption<any>, isUpdateSelectItem?: boolean): void;
             /**
-             * 检测所有option并设置禁用状态
+             * 更新选项弹窗内的所有选项元素的状态
+             *
+             * + 更新禁用状态
+             * + 更新选中状态
              */
-            setSelectOptionsDisableStatus(): void;
+            updateAllSelectItemStatus(): void;
             /**
-             * 设置禁用状态
-             * @param $option
+             * 重置所有已选中的项以下状态
+             *
+             * + 更新选项显示的文字
+             * + 移除禁用状态
+             * + 移除选中状态
              */
-            setOptionDisableStatus($option: HTMLOptionElement): void;
+            resetAllSelectedItemStatus(): void;
             /**
-             * 获取option上的信息
-             * @param $option
+             * 添加选中信息
+             * @param data 选择项的数据
+             * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
              */
-            getSelectOptionInfo($option: HTMLOptionElement): {
-                value: any;
-                text: string;
-                views: NonNullable<IFunction<(PopsPanelViewConfig | PopsPanelContainerConfig)[]> | undefined>;
-                $option: HTMLOptionElement;
-            };
+            addSelectedItemInfo(data: PopsPanelSelectDataOption<any>): void;
             /**
-             * 监听选择内容改变
+             * 移除选中信息
+             * @param data 选择项的数据
              */
-            onValueChange(): void;
+            removeSelectedItemInfo(): void;
             /**
-             * 监听点击事件
+             * 更新选中信息
+             * @param data 数据
              */
-            onClick(): void;
-        };
+            updateSelectedInfo(data?: PopsPanelSelectDataOption<any>): void;
+            /**
+             * 从保存的已选中的信息列表中移除目标信息
+             */
+            resetCurrentSelectedInfo(): void;
+            /**
+             * 设置选择项禁用
+             * @param $select 选择项元素
+             */
+            setSelectItemDisabled($select: HTMLElement): void;
+            /**
+             * 移除选择项的禁用状态
+             * @param $select 选择项元素
+             */
+            removeSelectItemDisabled($select: HTMLElement): void;
+            /**
+             * 判断选择项是否禁用
+             * @param $select 选择项元素
+             */
+            isSelectItemDisabled($select: HTMLElement): string | true | null;
+            /**
+             * 设置选择项选中
+             * @param $select 选择项元素（.select-item）
+             */
+            setItemSelected($select: HTMLElement): void;
+            /**
+             * 移除选择项选中
+             * @param $select 选择项元素（.select-item）
+             */
+            removeItemSelected($select: HTMLElement): void;
+            /**
+             * 判断选择项是否选中
+             * @param $select 选择项元素（.select-item）
+             */
+            isItemSelected($select: HTMLElement): boolean;
+            /**
+             * 获取所有选项的信息
+             * @param [onlySelected=true] 是否仅获取选中的项的信息
+             * + true （默认）仅获取选中项的信息
+             * + false 获取所有选择项的信息
+             */
+            getAllSelectItems(onlySelected?: boolean): {
+                /** 选项信息数据 */
+                data: PopsPanelSelectDataOption<any>;
+                /** 选项元素 */
+                $select: HTMLElement;
+            }[];
+            /**
+             * 获取项上存储的信息
+             * @param $el 选项元素
+             */
+            getItemDataOption($el: HTMLElement): PopsPanelSelectDataOption<any>;
+        } | undefined;
     };
     /**
      * type ==> select-multiple
@@ -799,7 +946,7 @@ export declare const PanelHandlerComponents: () => {
             [Symbol.toStringTag]: string;
             $el: {
                 /** 左侧文本容器 */
-                itemLeftTextContainer: HTMLElement | null;
+                $itemLeftContainer: HTMLElement | null;
                 /** 选择框容器 */
                 $container: HTMLElement;
                 /** 选择框包裹的容器 */

package/dist/types/src/components/panel/index.d.ts

@@ -4,6 +4,7 @@ export declare const PopsPanel: {
     init(__config__: PopsPanelConfig): {
         addEventListener: <K extends keyof PopsPanelEventType>(event: K, listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void, options?: boolean | EventListenerOptions) => void;
         removeEventListener: <K extends keyof PopsPanelEventType>(event: K, listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void, options?: boolean | EventListenerOptions) => void;
+        mode: PopsType;
         close: () => Promise<void>;
         hide: () => Promise<void>;
         show: () => Promise<void>;
@@ -14,6 +15,5 @@ export declare const PopsPanel: {
         $anim: HTMLDivElement;
         $pops: HTMLDivElement;
         $mask?: HTMLDivElement | undefined;
-        mode: PopsType;
     };
 };

package/dist/types/src/components/panel/types/components-select.d.ts

@@ -2,7 +2,37 @@ import type { PopsPanelGeneralConfig } from "./components-common";
 import type { PopsPanelContainerConfig } from "./components-container";
 import type { PopsPanelViewConfig } from ".";
 import type { PopsAlertConfig } from "../../alert/types";
-export interface PopsPanelSelectDataOption<T> {
+export type PopsPanelSelectMode = "native" | "dialog" | "horizontal";
+/**
+ * 分组配置
+ *
+ * 用在mode="dialog"里
+ */
+export type PopsPanelSelectDialogGroupOption<T> = {
+    /**
+     * 是否是分组
+     * @default false
+     *
+     * + true 这时候text的值是显示的分组名，value是可以忽略的
+     */
+    isGroup?: boolean;
+    /**
+     * 分组内部选择是否是单选
+     * @default false
+     */
+    isSingleSelect?: boolean;
+    /**
+     * 分组数据列表
+     *
+     * 该数据仅在mode === "dialog"下生效
+     * @default []
+     */
+    groupDataOptions?: IFunction<Omit<PopsPanelSelectDataOption<T>, keyof PopsPanelSelectDialogGroupOption<T>>[]>;
+};
+/**
+ * 选择项的配置数据
+ */
+export type PopsPanelSelectDataOption<T> = {
     /**
      * 真正的值
      */
@@ -59,7 +89,7 @@ export interface PopsPanelSelectDataOption<T> {
         valid: boolean;
         message?: string;
     };
-}
+};
 /**
  * pops.panel的 select
  */
@@ -106,6 +136,8 @@ export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<P
      * 点击select元素触发该回调
      * @param event 点击事件
      * @param selectElement 当前的select元素
+     * @returns
+     * + false 阻止更新状态
      */
     clickCallBack?(event: PointerEvent | MouseEvent, 
     /** 当前已选中的信息 */
@@ -115,10 +147,15 @@ export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<P
      */
     data: IFunction<PopsPanelSelectDataOption<T>[]>;
     /**
-     * 是否使用弹窗代替
-     * @default false
+     * 显示模式
+     * @default "native"
+     */
+    mode?: PopsPanelSelectMode;
+    /**
+     * 宽度
+     * @default "200px"
      */
-    useDialog?: boolean;
+    width?: number | string;
     /**
      * 弹出的下拉列表弹窗的配置
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、loading、iframe、rightClickMenu等组件",
   "type": "module",
   "homepage": "https://github.com/WhiteSevs/TamperMonkeyScript/tree/master/lib/pops#readme",
@@ -51,13 +51,13 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "12.3.0",
     "browserslist": "^4.28.0",
-    "caniuse-lite": "^1.0.30001755",
+    "caniuse-lite": "^1.0.30001756",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-compat": "^6.0.2",
     "eslint-plugin-prettier": "^5.5.4",
     "globals": "^16.5.0",
-    "rollup": "^4.53.2",
+    "rollup": "^4.53.3",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-import-css": "^4.1.2",
     "tslib": "^2.8.1",