@whitesev/pops 3.2.1 → 3.3.0

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

@@ -1,33 +1,33 @@
-import type { PopsPanelGeneralConfig } from "./components-common";
-
-/**
- * pops.panel的 switch
- */
-export interface PopsPanelSwitchConfig extends PopsPanelGeneralConfig<PopsPanelSwitchConfig> {
-  /**
-   * 组件类型
-   */
-  type: "switch";
-  /**
-   * 显示在左边的文字
-   */
-  text: string;
-  /**
-   * （可选）左边的文字下面的描述
-   * @default ""
-   */
-  description?: string;
-  /**
-   * （可选）是否禁用
-   * @default false
-   */
-  disabled?: boolean | (() => boolean);
-  /**
-   * 获取该项的值的回调函数
-   */
-  getValue(): boolean;
-  /**
-   * switch开启/关闭触发的回调函数
-   */
-  callback(event: MouseEvent | PointerEvent, value: boolean): void;
-}
+import type { PopsPanelGeneralConfig } from "./components-common";
+
+/**
+ * pops.panel的 switch
+ */
+export interface PopsPanelSwitchConfig extends PopsPanelGeneralConfig<PopsPanelSwitchConfig> {
+  /**
+   * 组件类型
+   */
+  type: "switch";
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   * @default ""
+   */
+  description?: string;
+  /**
+   * （可选）是否禁用
+   * @default false
+   */
+  disabled?: boolean | (() => boolean);
+  /**
+   * 获取该项的值的回调函数
+   */
+  getValue(): boolean;
+  /**
+   * switch开启/关闭触发的回调函数
+   */
+  callback(event: MouseEvent | PointerEvent, value: boolean): void;
+}

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

@@ -1,45 +1,45 @@
-import type { PopsPanelGeneralConfig } from "./components-common";
-
-/**
- * pops.panel的 textarea
- */
-export interface PopsPanelTextAreaConfig extends PopsPanelGeneralConfig<PopsPanelTextAreaConfig> {
-  /**
-   * 组件类型
-   */
-  type: "textarea";
-  /**
-   * 显示在左边的文字
-   */
-  text: string;
-  /**
-   * （可选）左边的文字下面的描述
-   * @default ""
-   */
-  description?: string;
-  /**
-   * （可选）是否禁用
-   * @default false
-   */
-  disabled?: boolean | (() => boolean);
-  /**
-   * 获取该项的值的回调函数
-   */
-  getValue(): string;
-  /**
-   * textarea输入框的值改变触发的回调函数
-   * @param event 事件
-   * @param value 当前的textarea内的值
-   */
-  callback(
-    event: InputEvent & {
-      target: HTMLTextAreaElement;
-    },
-    value: string
-  ): void;
-  /**
-   * 输入框内的提示
-   * @default ""
-   */
-  placeholder?: string;
-}
+import type { PopsPanelGeneralConfig } from "./components-common";
+
+/**
+ * pops.panel的 textarea
+ */
+export interface PopsPanelTextAreaConfig extends PopsPanelGeneralConfig<PopsPanelTextAreaConfig> {
+  /**
+   * 组件类型
+   */
+  type: "textarea";
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   * @default ""
+   */
+  description?: string;
+  /**
+   * （可选）是否禁用
+   * @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

@@ -1,244 +1,244 @@
-import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig } from "../../../types/components";
-import type { PopsPanelContainerConfig } from "./components-container";
-import type { PopsPanelSwitchConfig } from "./components-switch";
-import type { PopsPanelSliderConfig } from "./components-slider";
-import type { PopsPanelInputConfig } from "./components-input";
-import type { PopsPanelTextAreaConfig } from "./components-textarea";
-import type { PopsPanelSelectConfig } from "./components-select";
-import type { PopsPanelButtonConfig } from "./components-button";
-import type { PopsPanelDeepViewConfig } from "./components-deepMenu";
-import type { PopsPanelOwnConfig } from "./components-own";
-import type { PopsHeaderCloseButtonConfig } from "../../../types/button";
-import type { PopsPanelSelectMultipleConfig } from "./components-selectMultiple";
-import type { PopsPanelGeneralConfig } from "./components-common";
-
-/**
- * panel的各种类型的配置项（不包括type="container"类型的）
- */
-export type PopsPanelViewConfig =
-  | PopsPanelSwitchConfig
-  | PopsPanelSliderConfig
-  | PopsPanelInputConfig
-  | PopsPanelTextAreaConfig
-  | PopsPanelSelectConfig<any>
-  | PopsPanelSelectMultipleConfig<any>
-  | PopsPanelButtonConfig
-  | PopsPanelDeepViewConfig
-  | PopsPanelOwnConfig;
-/**
- * panel的views配置项
- */
-export type PopsPanelMainViewConfig = PopsPanelViewConfig | PopsPanelContainerConfig;
-/**
- * panel的内部事件
- */
-export type PopsPanelEventType = {
-  /**
-   * 该事件在右侧容器内的元素改变时触发
-   */
-  "pops:renderRightContainer": {
-    /**
-     * 视图配置
-     */
-    viewConfig: PopsPanelContentConfig[] | PopsPanelDeepViewConfig;
-  };
-};
-
-/**
- * pops.panel的content配置信息
- */
-export interface PopsPanelContentConfig {
-  /**
-   * 元素属性id
-   */
-  id: string;
-  /**
-   * （可选）元素的className，值为空的话就不设置
-   * @default ""
-   */
-  className?: PopsPanelGeneralConfig<any>["className"];
-  /**
-   * 显示的文本，可以是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
-   * @default {}
-   */
-  attributes?: PopsPanelGeneralConfig<any>["attributes"];
-  /**
-   * （可选）自定义元素内部的属性值
-   * @default {}
-   */
-  props?: PopsPanelGeneralConfig<any>["props"];
-  /**
-   * 视图配置
-   */
-  views: PopsPanelMainViewConfig[];
-  /**
-   * 左侧容器的点击回调（点击后第一个触发该回调）
-   * @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?: (
-    /**
-     * 配置
-     */
-    config: {
-      /** 容器配置 */
-      asideConfig: PopsPanelContentConfig;
-      /** 左侧容器的元素 */
-      $asideLiElement: HTMLLIElement;
-    }
-  ) => void;
-}
-
-/**
- * pops.panel的bottomContent配置信息
- */
-export interface PopsPanelBottomContentConfig {
-  /**
-   * （可选）元素的className，值为空的话就不设置
-   * @default ""
-   */
-  className?: PopsPanelGeneralConfig<any>["className"];
-  /**
-   * （可选）配置所在位置
-   *
-   * @default "left"
-   */
-  position: "left" | "right";
-  /**
-   * 显示的文本，可以是html格式
-   */
-  text: string | (() => string);
-  /**
-   * （可选）是否禁用hover的CSS样式
-   * @default false
-   */
-  disableHoverCSS?: boolean | (() => boolean);
-  /**
-   * （可选）自定义元素属性.setAttribute、.getAttribute
-   * @default {}
-   */
-  attributes?: PopsPanelGeneralConfig<any>["attributes"];
-  /**
-   * （可选）自定义元素内部的属性值
-   * @default {}
-   */
-  props?: PopsPanelGeneralConfig<any>["props"];
-  /**
-   * 该项的点击回调
-   */
-  clickCallback?: (
-    /**
-     * 点击事件
-     */
-    event: MouseEvent | PointerEvent
-  ) => void;
-  /**
-   * 该项添加到panel后的回调
-   */
-  afterRender?: (
-    /**
-     * 配置
-     */
-    config: {
-      /** panel底部区域 */
-      $bottomWrapper: HTMLElement;
-      /** panel底部区域容器 */
-      $bottomContainer: HTMLElement;
-      /** panel底部区域左侧容器 */
-      $bottomLeftContainer: HTMLElement;
-      /** panel底部区域右侧容器 */
-      $bottomRightContainer: HTMLElement;
-    }
-  ) => void;
-}
-
-/**
- * pops.panel
- */
-export interface PopsPanelConfig extends PopsTitleConfig, PopsDragConfig, PopsGeneralConfig {
-  /**
-   * 内容配置
-   */
-  content: PopsPanelContentConfig[];
-  /**
-   * 底部内容配置
-   */
-  bottomContentConfig?: PopsPanelBottomContentConfig[];
-  /**
-   * 右上角的按钮配置
-   */
-  btn?: {
-    /**
-     * 关闭按钮
-     */
-    close?: PopsHeaderCloseButtonConfig;
-  };
-  /**
-   * 移动端适配的的className
-   *
-   * @default "pops-panel-is-mobile"
-   */
-  mobileClassName?: PopsPanelGeneralConfig<any>["className"];
-  /**
-   * 是否强制是移动端，默认false
-   * + true 强制为移动端
-   * + false 自动根据UA判断是否是移动端
-   * @default false
-   */
-  isMobile?: boolean;
-  /**
-   * 是否使用深度菜单切换动画
-   *
-   * 如果浏览器不支持`document.startViewTransition`函数，那么即使使用`useDeepMenuSwtichAnimation`为true，那么不会使用动画
-   * @default true
-   */
-  useDeepMenuSwtichAnimation?: true;
-}
+import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig } from "../../../types/components";
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelSwitchConfig } from "./components-switch";
+import type { PopsPanelSliderConfig } from "./components-slider";
+import type { PopsPanelInputConfig } from "./components-input";
+import type { PopsPanelTextAreaConfig } from "./components-textarea";
+import type { PopsPanelSelectConfig } from "./components-select";
+import type { PopsPanelButtonConfig } from "./components-button";
+import type { PopsPanelDeepViewConfig } from "./components-deepMenu";
+import type { PopsPanelOwnConfig } from "./components-own";
+import type { PopsHeaderCloseButtonConfig } from "../../../types/button";
+import type { PopsPanelSelectMultipleConfig } from "./components-selectMultiple";
+import type { PopsPanelGeneralConfig } from "./components-common";
+
+/**
+ * panel的各种类型的配置项（不包括type="container"类型的）
+ */
+export type PopsPanelViewConfig =
+  | PopsPanelSwitchConfig
+  | PopsPanelSliderConfig
+  | PopsPanelInputConfig
+  | PopsPanelTextAreaConfig
+  | PopsPanelSelectConfig<any>
+  | PopsPanelSelectMultipleConfig<any>
+  | PopsPanelButtonConfig
+  | PopsPanelDeepViewConfig
+  | PopsPanelOwnConfig;
+/**
+ * panel的views配置项
+ */
+export type PopsPanelMainViewConfig = PopsPanelViewConfig | PopsPanelContainerConfig;
+/**
+ * panel的内部事件
+ */
+export type PopsPanelEventType = {
+  /**
+   * 该事件在右侧容器内的元素改变时触发
+   */
+  "pops:renderRightContainer": {
+    /**
+     * 视图配置
+     */
+    viewConfig: PopsPanelContentConfig[] | PopsPanelDeepViewConfig;
+  };
+};
+
+/**
+ * pops.panel的content配置信息
+ */
+export interface PopsPanelContentConfig {
+  /**
+   * 元素属性id
+   */
+  id: string;
+  /**
+   * （可选）元素的className，值为空的话就不设置
+   * @default ""
+   */
+  className?: PopsPanelGeneralConfig<any>["className"];
+  /**
+   * 显示的文本，可以是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
+   * @default {}
+   */
+  attributes?: PopsPanelGeneralConfig<any>["attributes"];
+  /**
+   * （可选）自定义元素内部的属性值
+   * @default {}
+   */
+  props?: PopsPanelGeneralConfig<any>["props"];
+  /**
+   * 视图配置
+   */
+  views: PopsPanelMainViewConfig[];
+  /**
+   * 左侧容器的点击回调（点击后第一个触发该回调）
+   * @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?: (
+    /**
+     * 配置
+     */
+    config: {
+      /** 容器配置 */
+      asideConfig: PopsPanelContentConfig;
+      /** 左侧容器的元素 */
+      $asideLiElement: HTMLLIElement;
+    }
+  ) => void;
+}
+
+/**
+ * pops.panel的bottomContent配置信息
+ */
+export interface PopsPanelBottomContentConfig {
+  /**
+   * （可选）元素的className，值为空的话就不设置
+   * @default ""
+   */
+  className?: PopsPanelGeneralConfig<any>["className"];
+  /**
+   * （可选）配置所在位置
+   *
+   * @default "left"
+   */
+  position: "left" | "right";
+  /**
+   * 显示的文本，可以是html格式
+   */
+  text: string | (() => string);
+  /**
+   * （可选）是否禁用hover的CSS样式
+   * @default false
+   */
+  disableHoverCSS?: boolean | (() => boolean);
+  /**
+   * （可选）自定义元素属性.setAttribute、.getAttribute
+   * @default {}
+   */
+  attributes?: PopsPanelGeneralConfig<any>["attributes"];
+  /**
+   * （可选）自定义元素内部的属性值
+   * @default {}
+   */
+  props?: PopsPanelGeneralConfig<any>["props"];
+  /**
+   * 该项的点击回调
+   */
+  clickCallback?: (
+    /**
+     * 点击事件
+     */
+    event: MouseEvent | PointerEvent
+  ) => void;
+  /**
+   * 该项添加到panel后的回调
+   */
+  afterRender?: (
+    /**
+     * 配置
+     */
+    config: {
+      /** panel底部区域 */
+      $bottomWrapper: HTMLElement;
+      /** panel底部区域容器 */
+      $bottomContainer: HTMLElement;
+      /** panel底部区域左侧容器 */
+      $bottomLeftContainer: HTMLElement;
+      /** panel底部区域右侧容器 */
+      $bottomRightContainer: HTMLElement;
+    }
+  ) => void;
+}
+
+/**
+ * pops.panel
+ */
+export interface PopsPanelConfig extends PopsTitleConfig, PopsDragConfig, PopsGeneralConfig {
+  /**
+   * 内容配置
+   */
+  content: PopsPanelContentConfig[];
+  /**
+   * 底部内容配置
+   */
+  bottomContentConfig?: PopsPanelBottomContentConfig[];
+  /**
+   * 右上角的按钮配置
+   */
+  btn?: {
+    /**
+     * 关闭按钮
+     */
+    close?: PopsHeaderCloseButtonConfig;
+  };
+  /**
+   * 移动端适配的的className
+   *
+   * @default "pops-panel-is-mobile"
+   */
+  mobileClassName?: PopsPanelGeneralConfig<any>["className"];
+  /**
+   * 是否强制是移动端，默认false
+   * + true 强制为移动端
+   * + false 自动根据UA判断是否是移动端
+   * @default false
+   */
+  isMobile?: boolean;
+  /**
+   * 是否使用深度菜单切换动画
+   *
+   * 如果浏览器不支持`document.startViewTransition`函数，那么即使使用`useDeepMenuSwtichAnimation`为true，那么不会使用动画
+   * @default true
+   */
+  useDeepMenuSwtichAnimation?: true;
+}