@whitesev/pops 2.4.5 → 2.4.7

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

@@ -0,0 +1,130 @@
+import type { PopsAlertDetails } from "../../alert/types";
+import type { PopsPanelCommonDetails } from "./components-common";
+
+export interface PopsPanelSelectMultipleDataOption<T> {
+  /**
+   * 真正的值
+   */
+  value: T;
+  /**
+   * 显示的文字
+   */
+  text:
+    | string
+    | ((
+        /** 当前的值 */
+        value: T,
+        /** 所有选中的配置信息 */
+        allSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]
+      ) => string);
+  /**
+   * 显示的文字是否是html
+   * @default false
+   */
+  isHTML?: boolean;
+  /**
+   * （可选）是否禁用项
+   * 触发条件：
+   * + 点击select元素
+   * + select元素触发change事件
+   * @param value 当前的值
+   * @param allSelectedInfo 所有选中的配置信息
+   */
+  disable?(value: T, allSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]): boolean;
+}
+/**
+ * pops.panel的 select
+ */
+export interface PopsPanelSelectMultipleDetails<T = any>
+  extends PopsPanelCommonDetails<PopsPanelSelectMultipleDetails> {
+  /**
+   * （可选）className属性
+   */
+  className?: string;
+  /**
+   * （可选）自定义元素属性
+   */
+  attributes?:
+    | {
+        [key: string]: any;
+      }
+    | {
+        [key: string]: any;
+      }[];
+  /**
+   * （可选）自定义属性
+   */
+  props?: {
+    [K in keyof HTMLElement]?: HTMLElement[K];
+  };
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   */
+  description?: string;
+  /**
+   * 类型
+   */
+  type: "select-multiple";
+  /**
+   * （可选）是否禁用
+   */
+  disabled?: boolean | (() => boolean);
+  /**
+   * 提示文字
+   */
+  placeholder?: string | (() => string);
+  /**
+   * 获取该项的值的回调函数
+   */
+  getValue(): T[];
+  /**
+   * 弹出的下拉列表弹窗的配置
+   */
+  selectConfirmDialogDetails?: Partial<PopsAlertDetails>;
+  /**
+   * 选择器的值改变触发的回调函数
+   * @param event 事件
+   * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
+   * @param isSelectedText 当前选中的文本
+   */
+  callback?(
+    /** 当前已选中的信息 */
+    isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]
+  ): void;
+  /**
+   * 点击某个项的元素触发该回调
+   * @param event 点击事件
+   * @param selectElement 当前的选中的元素
+   * @returns 如果返回boolean为false，则不会触发默认的点击事件
+   */
+  clickCallBack?(
+    event: PointerEvent | MouseEvent,
+    /** 当前已选中的信息 */
+    isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]
+  ): void | boolean;
+  /**
+   * 点击标签tag的关闭图标触发该回调
+   * 如果返回boolean类型且为false，则阻止默认的事件
+   */
+  closeIconClickCallBack?: (
+    event: PointerEvent | MouseEvent,
+    data: {
+      /** 标签元素 */
+      $tag: HTMLElement;
+      /** 关闭图标元素 */
+      $closeIcon: HTMLElement;
+      /** 值 */
+      value: T;
+      /** 显示的文字 */
+      text: PopsPanelSelectMultipleDataOption<T>["text"];
+    }
+  ) => void | boolean;
+  /**
+   * 选择器内的数据组
+   */
+  data: PopsPanelSelectMultipleDataOption<T>[];
+}

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

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

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

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

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

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

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

@@ -0,0 +1,177 @@
+import type { PopsTitleConfig, PopsDragConfig, PopsCommonConfig } from "../../../types/components";
+import type { PopsPanelFormsDetails } from "./components-forms";
+import type { PopsPanelSwitchDetails } from "./components-switch";
+import type { PopsPanelSliderDetails } from "./components-slider";
+import type { PopsPanelInputDetails } from "./components-input";
+import type { PopsPanelTextAreaDetails } from "./components-textarea";
+import type { PopsPanelSelectDetails } from "./components-select";
+import type { PopsPanelButtonDetails } from "./components-button";
+import type { PopsPanelDeepMenuDetails } from "./components-deepMenu";
+import type { PopsPanelOwnDetails } from "./components-own";
+import type { PopsHeaderCloseButtonDetails } from "../../../types/button";
+import type { PopsPanelSelectMultipleDetails } from "./components-selectMultiple";
+
+/** panel的各种类型的配置项 */
+export type PopsPanelFormsTotalDetails =
+  | PopsPanelSwitchDetails
+  | PopsPanelSliderDetails
+  | PopsPanelInputDetails
+  | PopsPanelTextAreaDetails
+  | PopsPanelSelectDetails<any>
+  | PopsPanelSelectMultipleDetails<any>
+  | PopsPanelButtonDetails
+  | PopsPanelDeepMenuDetails
+  | PopsPanelOwnDetails;
+
+/**
+ * panel的内部事件
+ */
+export type PopsPanelEventType = {
+  /**
+   * 该事件在右侧容器内的元素改变时触发
+   */
+  "pops:renderRightContainer": {
+    /**
+     * 菜单配置
+     */
+    formConfig: PopsPanelContentConfig[] | PopsPanelDeepMenuDetails;
+  };
+};
+
+/**
+ * pops.panel的content配置信息
+ */
+export interface PopsPanelContentConfig {
+  /**
+   * 元素属性id
+   */
+  id: string;
+  /**
+   * （可选）元素的className，值为空的话就不设置
+   * @default ""
+   */
+  className?: string | string[];
+  /**
+   * 左侧的标题，可以是html格式
+   */
+  title: string | (() => string);
+  /**
+   * （可选）中间顶部的标题，如果为空，则使用title的值代替
+   * @default title
+   */
+  headerTitle?: string | (() => string);
+  /**
+   * （可选）是否是默认的，指打开弹窗的先显示出来的内容，默认为首位第一个项，如果多个配置都设置了isDefault的值为true，那么只有第一个值生效
+   * @default false
+   */
+  isDefault?: boolean | (() => boolean);
+  /**
+   * （可选）是否是位于底部的
+   *
+   * 自上而下排序
+   * @default false
+   */
+  isBottom?: boolean | (() => boolean);
+  /**
+   * （可选）是否禁用左侧项的hover的CSS样式
+   */
+  disableAsideItemHoverCSS?: boolean | (() => boolean);
+  /**
+   * （可选）是否自动滚动到默认的项
+   * @default false
+   */
+  scrollToDefaultView?: boolean;
+  /**
+   * （可选）自定义元素属性.setAttribute、.getAttribute
+   */
+  attributes?:
+    | {
+        [key: string]: any;
+      }
+    | {
+        [key: string]: any;
+      }[];
+  /**
+   * （可选）自定义元素内部的属性值
+   */
+  props?: {
+    [K in keyof HTMLElement]?: HTMLElement[K];
+  };
+  /**
+   * 子配置
+   */
+  forms: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+  /**
+   * 左侧容器的点击回调（点击后第一个触发该回调）
+   * @returns
+   * + false 阻止默认行为
+   */
+  clickFirstCallback?: (
+    event: MouseEvent | PointerEvent,
+    rightHeaderElement: HTMLUListElement,
+    rightContainerElement: HTMLUListElement
+  ) => void | boolean | Promise<void | boolean>;
+  /**
+   * 左侧容器的点击回调
+   * @returns
+   * + false 阻止默认进入菜单详情
+   */
+  clickCallback?: (
+    event: MouseEvent | PointerEvent,
+    rightHeaderElement: HTMLUListElement,
+    rightContainerElement: HTMLUListElement
+  ) => void | boolean | Promise<void | boolean>;
+  /**
+   * 左侧项添加到panel后的回调
+   */
+  afterRender?: (
+    /**
+     * 配置
+     */
+    data: {
+      /** 容器配置 */
+      asideConfig: PopsPanelContentConfig;
+      /** 左侧容器的元素 */
+      $asideLiElement: HTMLLIElement;
+    }
+  ) => void;
+}
+
+/**
+ * pops.panel
+ */
+export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsCommonConfig {
+  /**
+   * 内容配置
+   */
+  content: PopsPanelContentConfig[];
+  /**
+   * 右上角的按钮配置
+   */
+  btn?: {
+    /**
+     * 关闭按钮
+     */
+    close?: PopsHeaderCloseButtonDetails;
+  };
+  /**
+   * 移动端适配的的className
+   *
+   * @default "pops-panel-is-mobile"
+   */
+  mobileClassName?: string;
+  /**
+   * 是否强制是移动端，默认false
+   * + true 强制为移动端
+   * + false 自动根据UA判断是否是移动端
+   * @default false
+   */
+  isMobile?: boolean;
+  /**
+   * 是否使用深度菜单切换动画
+   *
+   * 如果浏览器不支持`document.startViewTransition`函数，那么即使使用`useDeepMenuSwtichAnimation`为true，那么不会使用动画
+   * @default true
+   */
+  useDeepMenuSwtichAnimation?: true;
+}

package/src/components/prompt/config.ts

@@ -0,0 +1,94 @@
+import type { PopsPromptDetails } from "./types/index";
+
+export const PopsPromptConfig = (): DeepRequired<PopsPromptDetails> => {
+  return {
+    title: {
+      text: "默认标题",
+      position: "left",
+      html: false,
+      style: "",
+    },
+    content: {
+      text: "",
+      select: false,
+      password: false,
+      row: false,
+      focus: true,
+      placeholder: "默认提示",
+      style: "",
+    },
+    btn: {
+      merge: false,
+      mergeReverse: false,
+      reverse: false,
+      position: "flex-end",
+      ok: {
+        enable: true,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "确定",
+        type: "success",
+        callback(detail) {
+          detail.close();
+        },
+      },
+      cancel: {
+        enable: true,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "关闭",
+        type: "default",
+        callback(detail) {
+          detail.close();
+        },
+      },
+      other: {
+        enable: false,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "其它按钮",
+        type: "default",
+        callback(detail) {
+          detail.close();
+        },
+      },
+      close: {
+        enable: true,
+        callback(detail) {
+          detail.close();
+        },
+      },
+    },
+    useShadowRoot: true,
+    class: "",
+    only: false,
+    width: window.innerWidth < 550 ? "88vw" : "350px",
+    height: window.innerHeight < 450 ? "70vh" : "200px",
+    position: "center",
+    animation: "pops-anim-fadein-zoom",
+    zIndex: 10000,
+    mask: {
+      enable: false,
+      clickEvent: {
+        toClose: false,
+        toHide: false,
+      },
+      clickCallBack: null,
+    },
+    drag: false,
+    dragLimit: true,
+    dragExtraDistance: 3,
+    dragMoveCallBack() {},
+    dragEndCallBack() {},
+    forbiddenScroll: false,
+
+    style: null,
+    beforeAppendToPageCallBack() {},
+  };
+};

package/src/components/prompt/index.css

@@ -0,0 +1,34 @@
+.pops[type-value="prompt"] {
+  --input-color: #000000;
+  --input-bg-color: none;
+  --input-placeholder-color: #a1a4ac;
+}
+.pops[type-value="prompt"] input[pops],
+.pops[type-value="prompt"] textarea[pops] {
+  width: 100%;
+  height: 100%;
+  outline: 0;
+  border: 0;
+  color: var(--input-color);
+  background-color: var(--input-bg-color);
+}
+
+.pops[type-value="prompt"] input[pops] {
+  padding: 5px 10px;
+}
+.pops[type-value="prompt"] textarea[pops] {
+  padding: 5px 10px;
+  resize: none;
+}
+
+.pops[type-value="prompt"] input[pops]::placeholder,
+.pops[type-value="prompt"] textarea[pops]::placeholder {
+  color: var(--input-placeholder-color);
+}
+@media (prefers-color-scheme: dark) {
+  .pops[type-value="prompt"] {
+    --input-color: #ffffff;
+    --input-bg-color: #333333;
+    --input-placeholder-color: #8d9095;
+  }
+}