@whitesev/pops 3.0.0 → 3.0.2

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

@@ -4,16 +4,16 @@ 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>;
+        guid: string;
         $shadowContainer: HTMLDivElement;
         $shadowRoot: ShadowRoot | HTMLElement;
         $el: HTMLDivElement;
         $anim: HTMLDivElement;
         $pops: HTMLDivElement;
         $mask?: HTMLDivElement | undefined;
-        mode: PopsType;
-        guid: string;
     };
 };

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

@@ -6,7 +6,7 @@ import type { PopsIconType } from "../../../types/icon";
  */
 export interface PopsPanelButtonConfig extends PopsPanelGeneralConfig<PopsPanelButtonConfig> {
     /**
-     * 类型
+     * 组件类型
      */
     type: "button";
     /**

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

@@ -5,7 +5,7 @@ import type { PopsPanelViewConfig } from ".";
  */
 export interface PopsPanelContainerConfig extends PopsPanelGeneralConfig<PopsPanelContainerConfig> {
     /**
-     * 类型
+     * 组件类型
      */
     type: "container";
     /**

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

@@ -6,7 +6,7 @@ import type { PopsPanelGeneralConfig } from "./components-common";
  */
 export interface PopsPanelDeepViewConfig extends PopsPanelGeneralConfig<PopsPanelDeepViewConfig> {
     /**
-     * 类型
+     * 组件类型
      */
     type: "deepMenu";
     /**

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

@@ -1,12 +1,41 @@
 import type { PopsPanelGeneralConfig } from "./components-common";
+/**
+ * pops.panel的input的字符串type类型
+ */
+export type PopsPanelInputStringType = "text" | "color" | "search" | "email" | "tel" | "url";
+/**
+ * pops.panel的input的日期type类型
+ */
+export type PopsPanelInputDateType = "date" | "datetime-local" | "time" | "month" | "week";
+/**
+ * pops.panel的input的数字ype类型
+ */
+export type PopsPanelInputNumberType = "number";
+/**
+ * pops.panel的input的密码type类型
+ */
+export type PopsPanelInputPasswordType = "password";
+/**
+ * pops.panel的input的文件type类型
+ */
+export type PopsPanelInputFileType = "file";
+/**
+ * pops.panel的input的type类型
+ */
+export type PopsPanelInputType = PopsPanelInputStringType | PopsPanelInputDateType | PopsPanelInputNumberType | PopsPanelInputPasswordType | PopsPanelInputFileType;
 /**
  * pops.panel的 input
  */
 export interface PopsPanelInputConfig extends PopsPanelGeneralConfig<PopsPanelInputConfig> {
     /**
-     * 类型
+     * 组件类型
      */
     type: "input";
+    /**
+     * （可选）输入框类型
+     * @default "text"
+     */
+    inputType?: PopsPanelInputType;
     /**
      * 显示在左边的文字
      */
@@ -23,32 +52,28 @@ export interface PopsPanelInputConfig extends PopsPanelGeneralConfig<PopsPanelIn
     disabled?: boolean | (() => boolean);
     /**
      * 获取该项的值的回调函数
+     *
+     * 组件初始化后会调用一次，用于初始话默认值
      */
-    getValue(): string;
+    getValue(): string | number | Date;
     /**
      * 输入框的值改变触发的回调函数
      * @param event 输入事件
      * @param value 输入框的值
-     * @param valueAsNumber 当isNumber为true时，有该值，它可能是NaN
+     * @param valueAsNumber 如果inputType为number或日期类型，存在该值，类型为number（可能为isNaN），否则为undefined
+     * @param valueAsDate 如果inputType为日期类型，存在该值，类型为Date（可能为null），否则为undefined
      */
-    callback(event: InputEvent, value: string, valueAsNumber?: number): void;
+    callback(event: InputEvent, value: string, valueAsNumber?: number, valueAsDate?: Date | null): void | {
+        valid: boolean;
+        message?: string;
+    };
     /**
      * （可选）输入框内的提示
      * @default ""
      */
     placeholder?: string;
     /**
-     * （可选）是否是密码框
-     * @default false
-     */
-    isPassword?: boolean;
-    /**
-     * （可选）是否是数字框
-     * @default false
-     */
-    isNumber?: boolean;
-    /**
-     * （可选）自己调用的处理回调函数
+     * （可选）初始化后调用的回调函数
      */
-    handlerCallBack?(liElement: HTMLLIElement, inputElement: HTMLInputElement): void;
+    handlerCallBack?($li: HTMLLIElement, $input: HTMLInputElement): void;
 }

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

@@ -5,11 +5,11 @@ import type { PopsPanelGeneralConfig } from "./components-common";
  */
 export interface PopsPanelOwnConfig extends PopsPanelGeneralConfig<PopsPanelOwnConfig> {
     /**
-     * 类型
+     * 组件类型
      */
     type: "own";
     /**
-     * 获取自定义<li>标签元素
+     * 生成<li>标签元素
      */
-    getLiElementCallBack: (liElement: HTMLLIElement) => HTMLLIElement;
+    createLIElement($li: HTMLLIElement): HTMLLIElement;
 }

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

@@ -1,12 +1,101 @@
 import type { PopsPanelGeneralConfig } from "./components-common";
 import type { PopsPanelContainerConfig } from "./components-container";
 import type { PopsPanelViewConfig } from ".";
+import type { PopsAlertConfig } from "../../alert/types";
+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> = {
+    /**
+     * 真正的值
+     */
+    value: T;
+    /**
+     * 显示的文字
+     */
+    text: string | ((
+    /** 当前的值 */
+    value: T, 
+    /**当前选中的配置信息 */
+    selectedInfo?: PopsPanelSelectDataOption<T>) => string);
+    /**
+     * 显示的文字是否是html
+     * @default false
+     */
+    isHTML?: boolean;
+    /**
+     * （可选）是否禁用项
+     * 触发条件：
+     * + 点击select元素
+     * + select元素触发change事件
+     * @param value 当前的值
+     * @param selectedInfo 当前选中的配置信息
+     */
+    disable?(value: T, selectedInfo?: PopsPanelSelectDataOption<T>): boolean;
+    /**
+     * 子配置，跟随切换改变
+     *
+     * 选中项后，根据配置添加到页面中
+     */
+    views?: IFunction<(PopsPanelContainerConfig | PopsPanelViewConfig)[]>;
+    /**
+     * （可选）是否是自定义输入的内容
+     * @default false
+     */
+    addCustomInput?: boolean;
+    /**
+     * （可选）自定义输入内容存储的key
+     *
+     * 该属性内部未做处理，仅为传递作用
+     */
+    customInputStoreKey?: string;
+    /**
+     * （可选）校验自定义输入内容
+     * @default () => {valid: true}
+     */
+    onValid?(dataOption: PopsPanelSelectDataOption<T>): {
+        /**
+         *
+         * + true: 校验通过
+         * + false: 校验失败，阻止关闭弹窗
+         */
+        valid: boolean;
+        message?: string;
+    };
+};
 /**
  * pops.panel的 select
  */
-export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectConfig> {
+export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectConfig<T>> {
     /**
-     * 类型
+     * 组件类型
      */
     type: "select";
     /**
@@ -22,46 +111,53 @@ export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<P
      * （可选）是否禁用
      * @default false
      */
-    disabled?: boolean | (() => boolean);
+    disabled?: IFunction<boolean>;
+    /**
+     * 提示文字
+     */
+    placeholder?: IFunction<string>;
+    /**
+     * 已选中文字的显示文字的对齐方式
+     *
+     * 也包括提示文字的对齐方式
+     * @default "left"
+     */
+    selectedTextAlign?: "left" | "center" | "right";
     /**
      * 获取该项的值的回调函数
      */
     getValue(): T;
     /**
      * 选择器的值改变触发的回调函数
-     * @param event 事件
-     * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
-     * @param isSelectedText 当前选中的文本
+     * @param isSelectedInfo 当前已选中的信息，可能为空
      */
-    callback?(event: PointerEvent | TouchEvent, isSelectedValue: T, isSelectedText: string): void;
+    callback?(isSelectedInfo?: PopsPanelSelectDataOption<T>): void;
     /**
      * 点击select元素触发该回调
      * @param event 点击事件
      * @param selectElement 当前的select元素
+     * @returns
+     * + false 阻止更新状态
      */
-    clickCallBack?(event: PointerEvent | MouseEvent, selectElement: HTMLSelectElement): void;
+    clickCallBack?(event: PointerEvent | MouseEvent, 
+    /** 当前已选中的信息 */
+    isSelectedInfo: PopsPanelSelectDataOption<T>): void | boolean;
     /**
-     * 选择器内的数据组
+     * 选择列表内的数据
      */
-    data: {
-        /**
-         * 真正的值
-         */
-        value: T;
-        /**
-         * 显示的文字
-         */
-        text: string;
-        /**
-         * （可选）是否禁用项
-         * 触发条件：
-         * + 点击select元素
-         * + select元素触发change事件
-         */
-        disable?(value: T): boolean;
-        /**
-         * 子配置，跟随切换改变
-         */
-        views?: (PopsPanelContainerConfig | PopsPanelViewConfig)[] | (() => (PopsPanelContainerConfig | PopsPanelViewConfig)[]);
-    }[];
+    data: IFunction<PopsPanelSelectDataOption<T>[]>;
+    /**
+     * 显示模式
+     * @default "native"
+     */
+    mode?: PopsPanelSelectMode;
+    /**
+     * 宽度
+     * @default "200px"
+     */
+    width?: number | string;
+    /**
+     * 弹出的下拉列表弹窗的配置
+     */
+    selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
 }

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

@@ -31,9 +31,9 @@ export interface PopsPanelSelectMultipleDataOption<T> {
 /**
  * pops.panel的 select
  */
-export interface PopsPanelSelectMultipleConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectMultipleConfig> {
+export interface PopsPanelSelectMultipleConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectMultipleConfig<T>> {
     /**
-     * 类型
+     * 组件类型
      */
     type: "select-multiple";
     /**
@@ -56,28 +56,19 @@ export interface PopsPanelSelectMultipleConfig<T = any> extends PopsPanelGeneral
      * 获取该项的值的回调函数
      */
     getValue(): T[];
-    /**
-     * 弹出的下拉列表弹窗的配置
-     */
-    selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
     /**
      * 选择器的值改变触发的回调函数
-     * @param event 事件
-     * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
-     * @param isSelectedText 当前选中的文本
+     * @param isSelectedInfo 当前已选中的信息
      */
-    callback?(
-    /** 当前已选中的信息 */
-    isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]): void;
+    callback?(isSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]): void;
     /**
      * 点击某个项的元素触发该回调
      * @param event 点击事件
-     * @param selectElement 当前的选中的元素
      * @returns 如果返回boolean为false，则不会触发默认的点击事件
      */
     clickCallBack?(event: PointerEvent | MouseEvent, 
     /** 当前已选中的信息 */
-    isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]): void | boolean;
+    isSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]): void | boolean;
     /**
      * 点击标签tag的关闭图标触发该回调
      * 如果返回boolean类型且为false，则阻止默认的事件
@@ -93,7 +84,11 @@ export interface PopsPanelSelectMultipleConfig<T = any> extends PopsPanelGeneral
         text: PopsPanelSelectMultipleDataOption<T>["text"];
     }) => void | boolean;
     /**
-     * 选择器内的数据组
+     * 选择列表内的数据
      */
     data: PopsPanelSelectMultipleDataOption<T>[];
+    /**
+     * 弹出的下拉列表弹窗的配置
+     */
+    selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
 }

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

@@ -4,8 +4,7 @@ import type { PopsPanelGeneralConfig } from "./components-common";
  */
 export interface PopsPanelSliderConfig extends PopsPanelGeneralConfig<PopsPanelSliderConfig> {
     /**
-     * 类型
-     * @default "slider"
+     * 组件类型
      */
     type: "slider";
     /**
@@ -38,7 +37,7 @@ export interface PopsPanelSliderConfig extends PopsPanelGeneralConfig<PopsPanelS
     /**
      * 获取tooltip的提示内容，可自定义，默认为slider的值
      */
-    getToolTipContent?: (value: number) => string;
+    getToolTipContent?(value: number): string;
     /**
      * 滑块的最小值
      */

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

@@ -4,7 +4,7 @@ import type { PopsPanelGeneralConfig } from "./components-common";
  */
 export interface PopsPanelSwitchConfig extends PopsPanelGeneralConfig<PopsPanelSwitchConfig> {
     /**
-     * 类型
+     * 组件类型
      */
     type: "switch";
     /**

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

@@ -4,7 +4,7 @@ import type { PopsPanelGeneralConfig } from "./components-common";
  */
 export interface PopsPanelTextAreaConfig extends PopsPanelGeneralConfig<PopsPanelTextAreaConfig> {
     /**
-     * 类型
+     * 组件类型
      */
     type: "textarea";
     /**

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

@@ -79,9 +79,9 @@ export declare const PopsSearchSuggestion: {
         setSearchItemClickEvent($searchItem: HTMLLIElement): void;
         /**
          * 设置搜索建议框每一项的选中事件
-         * @param liElement
+         * @param $li 每一项元素
          */
-        setSearchItemSelectEvent(liElement: HTMLLIElement): void;
+        setSearchItemSelectEvent($li: HTMLLIElement): void;
         /**
          * 监听输入框内容改变
          */
@@ -89,7 +89,7 @@ export declare const PopsSearchSuggestion: {
         /**
          * 移除输入框内容改变的监听
          */
-        removeInputChangeEvent(option?: AddEventListenerOptions): void;
+        removeInputChangeEvent(): void;
         /**
          * 显示搜索建议框的事件
          */

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

@@ -26,4 +26,6 @@ declare type DeepRequired<T> = T extends any[]
           }
       : T;
 
-declare type IPromise<T> = Promise<T> | T;
+declare type IPromise<T> = T | Promise<T>;
+
+declare type IFunction<T> = T | (() => T);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "3.0.0",
+  "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",
@@ -44,25 +44,25 @@
     "worker-timers": "^8.0.25"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.0",
+    "@eslint/js": "^9.39.1",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "12.3.0",
-    "browserslist": "^4.27.0",
-    "caniuse-lite": "^1.0.30001753",
-    "eslint": "^9.39.0",
+    "browserslist": "^4.28.0",
+    "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.52.5",
+    "rollup": "^4.53.3",
     "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-import-css": "^4.1.1",
+    "rollup-plugin-import-css": "^4.1.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2"
+    "typescript-eslint": "^8.47.0"
   },
   "scripts": {
     "lint": "eslint .",

package/src/PopsCSS.ts

@@ -14,6 +14,7 @@ import drawerCSS from "./components/drawer/index.css";
 import folderCSS from "./components/folder/index.css";
 import panelCSS from "./components/panel/index.css";
 import rightClickMenuCSS from "./components/rightClickMenu/index.css";
+import panelComponents_Select_CSS from "./components/panel/css/components-select.css";
 
 export const PopsCSS = {
   /** 主CSS */
@@ -44,8 +45,10 @@ export const PopsCSS = {
   drawerCSS: drawerCSS,
   /** pops.folder */
   folderCSS: folderCSS,
-  /** pops.folder */
+  /** pops.panel */
   panelCSS: panelCSS,
   /** pops.rightClickMenu */
   rightClickMenu: rightClickMenuCSS,
+  /** pops.panel的select组件 */
+  panelComponents_Select: panelComponents_Select_CSS,
 };

package/src/components/panel/css/components-select.css

@@ -0,0 +1,84 @@
+.pops {
+  max-height: 300px;
+}
+.select-container {
+  --el-font-size-base: 14px;
+  --el-text-color-regular: #606266;
+  --el-color-primary: #409eff;
+  --el-fill-color-light: #f5f7fa;
+  --el-disable-color: #a8abb2;
+}
+.select-item {
+  cursor: pointer;
+  font-size: var(--el-font-size-base);
+  padding: 0 20px 0 20px;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--el-text-color-regular);
+  min-height: 34px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+.select-item[aria-disabled],
+.select-item[disabled] {
+  cursor: not-allowed;
+  color: var(--el-disable-color);
+  background: unset;
+}
+.select-item:hover {
+  background-color: var(--el-fill-color-light);
+}
+.select-item.select-item-is-selected:has(.pops-panel-input input) {
+  background-color: #e7e7e7;
+}
+.select-item.select-item-is-selected {
+  color: var(--el-color-primary);
+  font-weight: 700;
+}
+.select-item.select-item-is-selected:not(:has(.pops-panel-input))::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  border-top: none;
+  border-right: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: var(--el-color-primary);
+  mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat;
+  mask-size: 100% 100%;
+  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat;
+  -webkit-mask-size: 100% 100%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+}
+
+.select-item .pops-panel-input {
+  width: 100%;
+  margin: 5px 0px;
+}
+.select-item .pops-panel-input:has(.pops-panel-input-valid-error) {
+  margin-bottom: 0px;
+}
+
+.select-item .select-item-text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+  .select-container {
+    --el-text-color-regular: #f2f2f2;
+    --el-disable-color: #8d9095;
+    --el-fill-color-light: #262727;
+  }
+}