@whitesev/pops 3.0.1 → 3.1.0

package/src/components/panel/index.css

@@ -278,13 +278,17 @@ section.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-
   .pops[type-value="panel"] section.pops-panel-container > ul > li div:nth-child(2) {
     max-width: 55%;
   }
+  .pops[type-value="panel"] .pops-panel-select .el-select__selected-item.el-select__placeholder {
+    max-width: -moz-available;
+    max-width: -webkit-fill-available;
+  }
   .pops[type-value="panel"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {
     padding: 0 4px;
   }
   .pops[type-value="panel"] section.pops-panel-container .pops-panel-select select {
     min-width: 88px !important;
-    width: -webkit-fill-available;
     width: -moz-available;
+    width: -webkit-fill-available;
   }
   .pops[type-value="panel"] section.pops-panel-container .pops-panel-container-header-ul li {
     font-size: 16px;
@@ -750,8 +754,8 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   flex-shrink: 0;
   flex-wrap: nowrap;
   height: 100%;
-  height: -webkit-fill-available;
   height: -moz-available;
+  height: -webkit-fill-available;
   text-align: center;
   color: var(--pops-panel-components-input-suffix-color);
   background: var(--pops-panel-components-input-suffix-bg-color);
@@ -893,6 +897,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 
 /* select的CSS */
 .pops-panel-select {
+  --pops-panel-components-select-disabled-text-color: #a8abb2;
   --pops-panel-components-select-text-color: #000000;
   --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));
   --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));
@@ -934,10 +939,60 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 }
 /* select的CSS */
 
-/* select useDialog的CSS */
-.pops-panel-select {
+/* select dialog 的CSS */
+.pops-panel-select[data-mode="dialog"] {
 }
-/* select useDialog的CSS */
+/* select dialog 的CSS */
+
+/* select horizontal 的CSS */
+.pops-panel-select[data-mode="horizontal"] {
+  --pops-panel-components-select-horizontal-selected-text-color: #626aef;
+  --pops-panel-components-select-horizontal-selected-bg-color: #eff0fd;
+}
+.pops-panel-select[data-mode="horizontal"] .el-select__wrapper {
+  padding: 0;
+  gap: 0;
+  border: 0;
+}
+.pops-panel-select[data-mode="horizontal"] .select-item {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--el-border-color);
+  height: -moz-available;
+  height: -webkit-fill-available;
+  border-left: 0;
+}
+.pops-panel-select[data-mode="horizontal"] .select-item:hover {
+  color: var(--el-color-primary);
+}
+.pops-panel-select[data-mode="horizontal"] .select-item:first-child {
+  border-left: 1px solid var(--el-border-color);
+  border-top-left-radius: var(--el-border-radius-base);
+  border-bottom-left-radius: var(--el-border-radius-base);
+}
+.pops-panel-select[data-mode="horizontal"] .select-item:last-child {
+  border-top-right-radius: var(--el-border-radius-base);
+  border-bottom-right-radius: var(--el-border-radius-base);
+}
+.pops-panel-select[data-mode="horizontal"] .select-item.select__selected-item {
+  color: var(--pops-panel-components-select-horizontal-selected-text-color);
+  background-color: var(--pops-panel-components-select-horizontal-selected-bg-color);
+  border-color: var(--pops-panel-components-select-horizontal-selected-bg-color);
+}
+.pops-panel-select[data-mode="horizontal"] .select-item:has(+ .select__selected-item) {
+  border-right: 0;
+}
+.pops-panel-select[data-mode="horizontal"] .select-item[disabled] {
+  color: var(--pops-panel-components-select-disabled-text-color);
+  --pops-panel-components-select-horizontal-selected-text-color: var(
+    --pops-panel-components-select-disabled-text-color
+  );
+  cursor: not-allowed;
+  background: unset;
+}
+/* select horizontal 的CSS */
 
 /* select-multiple的CSS*/
 .pops-panel-select-multiple,
@@ -1165,19 +1220,19 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   white-space: nowrap;
 }
 /* 禁用样式 */
-.pops-panel-select-multiple-disable {
+.pops-panel-select-disable {
   --el-fill-color-blank: #f5f7fa;
   --color: #a8abb2;
   --el-border-color: #cbcbcb;
 }
-.pops-panel-select-multiple-disable .el-tag.el-tag--info {
+.pops-panel-select-disable .el-tag.el-tag--info {
   --el-tag-bg-color: #e7e7e7;
   --el-tag-text-color: var(--pops-components-is-disabled-text-color);
 }
-.pops-panel-select-multiple-disable .el-select__selection .el-tag,
-.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,
-.pops-panel-select-multiple-disable .el-select__wrapper,
-.pops-panel-select-multiple-disable .el-select__caret {
+.pops-panel-select-disable .el-select__selection .el-tag,
+.pops-panel-select-disable .el-tag .el-tag__close:hover,
+.pops-panel-select-disable .el-select__wrapper,
+.pops-panel-select-disable .el-select__caret {
   cursor: not-allowed;
 }
 /* select-multiple的CSS*/
@@ -1226,8 +1281,8 @@ section.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-d
 section.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {
   display: flex;
   align-items: center;
-  width: -webkit-fill-available;
   width: -moz-available;
+  width: -webkit-fill-available;
   padding: var(--pops-panel-forms-header-padding-top-bottom)
     calc(
       var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -

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

@@ -2,8 +2,38 @@ 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";
 
-export interface PopsPanelSelectDataOption<T> {
+/**
+ * 分组配置
+ *
+ * 用在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> = {
   /**
    * 真正的值
    */
@@ -63,7 +93,7 @@ export interface PopsPanelSelectDataOption<T> {
     valid: boolean;
     message?: string;
   };
-}
+};
 /**
  * pops.panel的 select
  */
@@ -110,6 +140,8 @@ export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<P
    * 点击select元素触发该回调
    * @param event 点击事件
    * @param selectElement 当前的select元素
+   * @returns
+   * + false 阻止更新状态
    */
   clickCallBack?(
     event: PointerEvent | MouseEvent,
@@ -121,10 +153,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/src/components/rightClickMenu/index.css

@@ -93,8 +93,8 @@ i.pops-rightClickMenu-icon[is-loading="true"] {
   margin: 5px 5px;
   border-radius: var(--pops-right-context-menu-row-bd-radius);
   display: flex;
-  width: -webkit-fill-available;
   width: -moz-available;
+  width: -webkit-fill-available;
   text-align: left;
   align-items: center;
   -webkit-user-select: none;

package/src/components/rightClickMenu/index.ts

@@ -513,15 +513,15 @@ export const PopsRightClickMenu = {
           }
           // 鼠标|触摸 移入事件
           // 在移动端会先触发touchstart再然后mouseenter
-          let isTriggerTouchEvent = false;
+          let isEmitTouchEvent = false;
           /**
            * 鼠标|触摸 移入事件
            */
           function liElementHoverEvent(event: MouseEvent | TouchEvent) {
             if (event.type === "touchstart") {
-              isTriggerTouchEvent = true;
+              isEmitTouchEvent = true;
             }
-            if (isTriggerTouchEvent && event.type === "mouseenter") {
+            if (isEmitTouchEvent && event.type === "mouseenter") {
               return;
             }
             Array.from(menuULElement.children as any as HTMLLIElement[]).forEach((liElement) => {

package/src/components/tooltip/defaultConfig.ts

@@ -10,8 +10,8 @@ export const PopsTooltipDefaultConfig = (): DeepRequired<PopsToolTipConfig> => {
     className: "",
     isFixed: false,
     alwaysShow: false,
-    triggerShowEventName: "mouseenter touchstart",
-    triggerCloseEventName: "mouseleave touchend",
+    onShowEventName: "mouseenter touchstart",
+    onCloseEventName: "mouseleave touchend",
     zIndex: 10000,
     only: false,
     eventOption: {

package/src/components/tooltip/index.ts

@@ -349,7 +349,7 @@ export class ToolTip {
   onShowEvent() {
     popsDOMUtils.on(
       this.$data.config.$target,
-      this.$data.config.triggerShowEventName,
+      this.$data.config.onShowEventName,
       this.show,
       this.$data.config.eventOption
     );
@@ -358,7 +358,7 @@ export class ToolTip {
    * 取消绑定 显示事件
    */
   offShowEvent() {
-    popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerShowEventName, this.show, {
+    popsDOMUtils.off(this.$data.config.$target, this.$data.config.onShowEventName, this.show, {
       capture: true,
     });
   }
@@ -419,7 +419,7 @@ export class ToolTip {
   onCloseEvent() {
     popsDOMUtils.on(
       this.$data.config.$target,
-      this.$data.config.triggerCloseEventName,
+      this.$data.config.onCloseEventName,
       this.close,
       this.$data.config.eventOption
     );
@@ -428,7 +428,7 @@ export class ToolTip {
    * 取消绑定 关闭事件
    */
   offCloseEvent() {
-    popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerCloseEventName, this.close, {
+    popsDOMUtils.off(this.$data.config.$target, this.$data.config.onCloseEventName, this.close, {
       capture: true,
     });
   }

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

@@ -45,7 +45,7 @@ export interface PopsToolTipConfig
   isFixed?: boolean;
   /**
    * 是否总是显示，默认为false
-   * + true 设置的triggerShowEventName、triggerCloseEventName将无效
+   * + true 设置的onShowEventName、onCloseEventName将无效
    *        返回提供show和close函数，取消on和off
    * + false 事件触发才显示
    */
@@ -59,12 +59,12 @@ export interface PopsToolTipConfig
    * 触发显示事件的名称，默认mouseenter touchstart，如果是多个事件，按空格分割
    * @default  "mouseenter touchstart"
    */
-  triggerShowEventName?: string;
+  onShowEventName?: string;
   /**
    * 触发关闭事件的名称，默认mouseleave touchend，如果是多个事件，按空格分割
    * @default  "mouseleave touchend"
    */
-  triggerCloseEventName?: string;
+  onCloseEventName?: string;
   /**
    * 监听的事件配置
    */

package/src/css/common.css

@@ -34,21 +34,21 @@
 }
 .pops-width-fill {
   width: 100%;
-  width: -webkit-fill-available;
   width: -moz-available;
+  width: -webkit-fill-available;
 }
 .pops-height-fill {
   height: 100%;
-  height: -webkit-fill-available;
   height: -moz-available;
+  height: -webkit-fill-available;
 }
 .pops-text-is-disabled {
   --pops-text-is-disabled-color: #a8abb2;
-  color: var(--pops-text-is-disabled-color);
   --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);
+  color: var(--pops-text-is-disabled-color);
 }
 .pops-text-is-disabled-important {
   --pops-text-is-disabled-color: #a8abb2;
-  color: var(--pops-text-is-disabled-color) !important;
   --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;
+  color: var(--pops-text-is-disabled-color) !important;
 }

package/src/types/PopsDOMUtilsEventType.d.ts

@@ -237,6 +237,28 @@ export type PopsDOMUtilsElementEventType =
   | ChildNode
   | Node;
 
+/**
+ * 通过.on执行后的返回值
+ */
+export declare interface PopsDOMUtilsAddEventListenerResult {
+  /**
+   * 取消绑定的监听事件
+   * @param filter (可选)过滤函数，对元素属性上的事件进行过滤出想要删除的事件
+   */
+  off(
+    filter?: (
+      value: PopsDOMUtilsEventListenerOptionsAttribute,
+      index: number,
+      array: PopsDOMUtilsEventListenerOptionsAttribute[]
+    ) => boolean
+  ): void;
+  /**
+   * 主动触发事件
+   * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
+   * @param useDispatchToEmit 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
+   */
+  emit(details?: object, useDispatchToEmit?: boolean): void;
+}
 export type ParseHTMLReturnType<T1, T2> = T1 extends true ? (T2 extends true ? Document : HTMLElement) : HTMLElement;
 
 /**