@whitesev/pops 1.0.0 → 1.1.0

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

@@ -0,0 +1,60 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsButtonStyleType } from "../../types/button";
+import type { PopsIcon } from "../../types/icon";
+/**
+ * pops.panel的 button
+ */
+export interface PopsPanelButtonDetails extends PopsPanelCommonDetails {
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 显示在左边的文字
+     */
+    text: string;
+    /**
+     * （可选）左边的文字下面的描述
+     */
+    description?: string;
+    /**
+     * 类型
+     */
+    type: "button";
+    /**
+     * （可选）是否禁用
+     */
+    disable?: boolean;
+    /**
+     * 按钮的类型
+     */
+    buttonType: PopsButtonStyleType;
+    /**
+     * 按钮的文字
+     */
+    buttonText: string | (() => string);
+    /**
+     * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码
+     */
+    buttonIcon?: PopsIcon;
+    /**
+     * 按钮的图标在右边
+     */
+    buttonIsRightIcon?: boolean;
+    /**
+     * 按钮的图标旋转
+     */
+    buttonIconIsLoading?: boolean;
+    /**
+     * 点击button触发的事件
+     */
+    callback: (event: MouseEvent | PointerEvent) => void;
+}

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

@@ -0,0 +1,46 @@
+import { PopsPanelFormsTotalDetails } from "./indexType";
+/**
+ * 右侧容器的配置
+ */
+export interface PopsPanelRightAsideContainerOptions {
+    /** 把获取的项<li>元素添加到这个<ul>元素内 */
+    ulElement: HTMLUListElement;
+    /**  */
+    sectionContainerULElement?: HTMLUListElement;
+    /**  */
+    formContainerListElement?: HTMLLIElement;
+    /**  */
+    formHeaderDivElement?: HTMLElement | HTMLDivElement;
+}
+/**
+ * 通用配置
+ */
+export interface PopsPanelCommonDetails {
+    /**
+     * 在添加到<ul>元素后触发该回调
+     * @param formConfig 配置
+     * @param container 右侧容器的元素
+     * @example
+     * // 例如在type为own时
+     * afterAddToUListCallBack(formConfig, container) {
+     * DOMUtils.on(
+        container.formHeaderDivElement.querySelector(
+        "a"
+        ),
+        "click",
+        void 0,
+        () => {
+        PopsPanel.deleteValue("xxxx");
+        container.ulElement.querySelector(
+            "textarea"
+        ).value = xxxxx.defaultValue;
+        Qmsg.success("已重置");
+        }
+    );
+     * }
+     *
+     * // 例如在type为forms时
+     * container内只有container.ulElement这个属性
+     */
+    afterAddToUListCallBack?: (formConfig: PopsPanelFormsTotalDetails, container: PopsPanelRightAsideContainerOptions) => void;
+}

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

@@ -0,0 +1,56 @@
+import type { PopsPanelFormsTotalDetails } from "./indexType";
+import type { PopsPanelFormsDetails } from "./formsType";
+import type { PopsPanelCommonDetails } from "./commonType";
+/**
+ * pops.panel的 深层菜单
+ */
+export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails {
+    /**
+     * 类型
+     */
+    type: "deepMenu";
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 显示在左边的文字
+     */
+    text: string;
+    /**
+     * （可选）左边的文字下面的描述
+     */
+    description?: string;
+    /**
+     * （可选）右侧的文字
+     */
+    rightText?: string;
+    /**
+     * （可选）右侧的箭头图标，默认启用
+     */
+    arrowRightIcon?: boolean;
+    /**
+     * 点击整行触发的事件，可为异步函数
+     * @param event click事件
+     * @returns
+     * + true 表示阻止进入深层菜单
+     * + false （默认）表示允许进入深层菜单
+     */
+    clickCallBack?: (event: MouseEvent | PointerEvent, formConfig: PopsPanelDeepMenuDetails) => boolean | void;
+    /**
+     * 菜单配置
+     */
+    forms?: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+    /**
+     * （可选）头部的标题文字，没有的话默认是text
+     */
+    headerTitle?: string;
+}

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

@@ -0,0 +1,31 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsPanelFormsTotalDetails } from "./indexType";
+/**
+ * pops.panel的 forms
+ */
+export interface PopsPanelFormsDetails extends PopsPanelCommonDetails {
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 显示在左边的文字
+     */
+    text: string;
+    /**
+     * 类型
+     */
+    type: "forms";
+    /**
+     * 子配置
+     */
+    forms: PopsPanelFormsTotalDetails[];
+}

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

@@ -1,2 +1,4 @@
+import type { PopsPanelDetails } from "./indexType";
 export declare class PopsPanel {
+    constructor(details: PopsPanelDetails);
 }

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

@@ -0,0 +1,86 @@
+import type { PopsTitleConfig, PopsDragConfig, PopsCommonConfig } from "../../types/components";
+import type { PopsPanelFormsDetails } from "./formsType";
+import type { PopsPanelSwitchDetails } from "./switchType";
+import type { PopsPanelSliderDetails } from "./sliderType";
+import type { PopsPanelInputDetails } from "./inputType";
+import type { PopsPanelTextAreaDetails } from "./textareaType";
+import type { PopsPanelSelectDetails } from "./selectType";
+import type { PopsPanelButtonDetails } from "./buttonType";
+import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
+import type { PopsPanelOwnDetails } from "./ownType";
+import type { PopsHeaderCloseButtonDetails } from "../../types/button";
+/** panel的各种类型的配置项 */
+export type PopsPanelFormsTotalDetails = PopsPanelSwitchDetails | PopsPanelSliderDetails | PopsPanelInputDetails | PopsPanelTextAreaDetails | PopsPanelSelectDetails<any> | PopsPanelButtonDetails | PopsPanelDeepMenuDetails | PopsPanelOwnDetails;
+/**
+ * pops.panel的content配置信息
+ */
+export interface PopsPanelContentConfig {
+    /**
+     * 元素属性id
+     */
+    id: string;
+    /**
+     * 左侧的标题
+     */
+    title: string;
+    /**
+     * （可选）中间顶部的标题
+     */
+    headerTitle?: string;
+    /**
+     * （可选）内容高度是否自动适应（与headerTitle的高度有关）
+     */
+    autoAdaptionContentHeight?: string;
+    /**
+     * （可选）是否是默认的，指打开弹窗的先显示出来的内容
+     */
+    isDefault?: boolean | (() => boolean);
+    /**
+     * （可选）是否自动滚动到默认的项
+     */
+    scrollToDefaultView?: boolean;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 子配置
+     */
+    forms: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+    /**
+     * 左侧容器的点击回调
+     */
+    callback?: (event: MouseEvent | PointerEvent, rightHeaderElement: HTMLUListElement, rightContainerElement: HTMLUListElement) => void;
+}
+/**
+ * pops.panel
+ */
+export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsCommonConfig {
+    /**
+     * 内容配置
+     */
+    content: PopsPanelContentConfig[];
+    /**
+     * 按钮配置
+     */
+    btn?: {
+        /**
+         * 右上角的关闭按钮
+         */
+        close?: PopsHeaderCloseButtonDetails;
+    };
+    /**
+     * 移动端适配的的className，默认为pops-panel-is-mobile
+     */
+    mobileClassName?: string;
+    /**
+     * 是否强制是移动端，默认false
+     * + true 强制为移动端
+     * + false 自动根据UA判断是否是移动端
+     */
+    isMobile?: boolean;
+}

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

@@ -0,0 +1,61 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+/**
+ * pops.panel的 input
+ */
+export interface PopsPanelInputDetails extends PopsPanelCommonDetails {
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 显示在左边的文字
+     */
+    text: string;
+    /**
+     * （可选）左边的文字下面的描述
+     */
+    description?: string;
+    /**
+     * 类型
+     */
+    type: "input";
+    /**
+     * （可选）是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 获取该项的值的回调函数
+     */
+    getValue(): string;
+    /**
+     * 输入框的值改变触发的回调函数
+     * @param event 输入事件
+     * @param value 输入框的值
+     * @param valueAsNumber 当isNumber为true时，有该值，它可能是NaN
+     */
+    callback(event: InputEvent, value: string, valueAsNumber?: number): void;
+    /**
+     * （可选）输入框内的提示
+     */
+    placeholder?: string;
+    /**
+     * （可选）是否是密码框
+     */
+    isPassword?: boolean;
+    /**
+     * （可选）是否是数字框
+     */
+    isNumber?: boolean;
+    /**
+     * （可选）自己调用的处理回调函数
+     */
+    handlerCallBack?(liElement: HTMLLIElement, inputElement: HTMLInputElement): void;
+}

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

@@ -0,0 +1,27 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+/**
+ * pops.panel的 own
+ * 自定义的
+ */
+export interface PopsPanelOwnDetails extends PopsPanelCommonDetails {
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 类型
+     */
+    type: "own";
+    /**
+     * 获取自定义<li>标签元素
+     */
+    getLiElementCallBack: (liElement: HTMLLIElement) => HTMLLIElement;
+}

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

@@ -0,0 +1,71 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+/**
+ * pops.panel的 select
+ */
+export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails {
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 显示在左边的文字
+     */
+    text: string;
+    /**
+     * （可选）左边的文字下面的描述
+     */
+    description?: string;
+    /**
+     * 类型
+     */
+    type: "select";
+    /**
+     * （可选）是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 获取该项的值的回调函数
+     */
+    getValue(): T;
+    /**
+     * 选择器的值改变触发的回调函数
+     * @param event 事件
+     * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
+     * @param isSelectedText 当前选中的文本
+     */
+    callback?(event: PointerEvent | TouchEvent, isSelectedValue: T, isSelectedText: string): void;
+    /**
+     * 点击select元素触发该回调
+     * @param event 点击事件
+     * @param selectElement 当前的select元素
+     */
+    clickCallBack?(event: PointerEvent | MouseEvent, selectElement: HTMLSelectElement): void;
+    /**
+     * 选择器内的数据组
+     */
+    data: {
+        /**
+         * 真正的值
+         */
+        value: T;
+        /**
+         * 显示的文字
+         */
+        text: string;
+        /**
+         * （可选）是否禁用项
+         * 触发条件：
+         * + 点击select元素
+         * + select元素触发change事件
+         */
+        disable?(value: T): boolean;
+    }[];
+}

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

@@ -0,0 +1,58 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+/**
+ * pops.panel的 slider
+ */
+export interface PopsPanelSliderDetails extends PopsPanelCommonDetails {
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 显示在左边的文字
+     */
+    text: string;
+    /**
+     * （可选）左边的文字下面的描述
+     */
+    description?: string;
+    /**
+     * 类型
+     */
+    type: "slider";
+    /**
+     * （可选）是否禁用
+     */
+    disabled?: false;
+    /**
+     * 获取该项的值的回调函数
+     */
+    getValue(): number;
+    /**
+     * 滑块的值改变触发的回调函数
+     */
+    callback(event: InputEvent, value: number): void;
+    /**
+     * 获取tooltip的提示内容，可自定义，默认为slider的值
+     */
+    getToolTipContent?: (value: number) => string;
+    /**
+     * 滑块的最小值
+     */
+    min: number;
+    /**
+     * 滑块的最大值
+     */
+    max: number;
+    /**
+     * （可选）每次滑动的间隔值
+     */
+    step?: number;
+}

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

@@ -0,0 +1,42 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+/**
+ * pops.panel的 switch
+ */
+export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails {
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 显示在左边的文字
+     */
+    text: string;
+    /**
+     * （可选）左边的文字下面的描述
+     */
+    description?: string;
+    /**
+     * 类型
+     */
+    type: "switch";
+    /**
+     * （可选）是否禁用
+     */
+    disabled?: false;
+    /**
+     * 获取该项的值的回调函数
+     */
+    getValue(): boolean;
+    /**
+     * switch开启/关闭触发的回调函数
+     */
+    callback(event: MouseEvent | PointerEvent, value: boolean): void;
+}

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

@@ -0,0 +1,50 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+/**
+ * pops.panel的 textarea
+ */
+export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails {
+    /**
+     * （可选）className属性
+     */
+    className?: string;
+    /**
+     * （可选）自定义元素属性
+     */
+    attributes?: any;
+    /**
+     * （可选）自定义属性
+     */
+    props?: HTMLElement;
+    /**
+     * 显示在左边的文字
+     */
+    text: string;
+    /**
+     * （可选）左边的文字下面的描述
+     */
+    description?: string;
+    /**
+     * 类型
+     */
+    type: "textarea";
+    /**
+     * （可选）是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 获取该项的值的回调函数
+     */
+    getValue(): string;
+    /**
+     * textarea输入框的值改变触发的回调函数
+     * @param event 事件
+     * @param value 当前的textarea内的值
+     */
+    callback(event: InputEvent & {
+        target: HTMLTextAreaElement;
+    }, value: string): void;
+    /**
+     * 输入框内的提示
+     */
+    placeholder: string;
+}

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

@@ -1,2 +1,4 @@
+import type { PopsPromptDetails } from "./indexType";
 export declare class PopsPrompt {
+    constructor(details: PopsPromptDetails);
 }

package/dist/types/src/components/prompt/indexType.d.ts

@@ -0,0 +1,37 @@
+import type { PopsTitleConfig, PopsDragConfig, PopsCommonConfig, PopsMoreButtonConfig } from "../../types/components";
+/**
+ * pops.prompt
+ */
+export interface PopsPromptDetails extends PopsTitleConfig, PopsDragConfig, PopsMoreButtonConfig<{
+    text: string;
+}>, PopsCommonConfig {
+    /**
+     * 内容配置
+     */
+    content: {
+        /**
+         * 内容文字
+         */
+        text: string;
+        /**
+         * 是否是密码
+         */
+        password?: boolean;
+        /**
+         * 是否支持多行输入
+         */
+        row?: boolean;
+        /**
+         * 是否自动获取焦点
+         */
+        focus?: boolean;
+        /**
+         * 输入框内的提示文字
+         */
+        placeholder?: string;
+        /**
+         * （可选）文字的自定义CSS
+         */
+        style?: string;
+    };
+}

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

@@ -1,2 +1,4 @@
+import type { PopsRightClickMenuDetails } from "./indexType";
 export declare class PopsRightClickMenu {
+    constructor(details: PopsRightClickMenuDetails);
 }