vxe-pc-ui 4.20.24 → 4.20.26

package/es/scrollbar/src/scrollbar.js

@@ -1,11 +1,11 @@
 import { ref, h, reactive, computed, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { VxeUI, useFns } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { toCssUnit } from "../../ui/src/dom";
 import { getDefaultConfig } from "../../ui/src/utils";
 import VxeLoadingComponent from "../../loading";
-const { getConfig, createEvent, domUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI;
+const { getConfig, createEvent, useFns, domUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI;
 function createReactData() {
   return {
     yThumbHeight: 0,
@@ -99,10 +99,7 @@ var scrollbar_default = defineVxeComponent({
      */
     syncResize: [Boolean, String, Number]
   },
-  emits: [
-    "scroll",
-    "scroll-boundary"
-  ],
+  emits: ["scroll", "scroll-boundary"],
   setup(props, context) {
     const { emit, slots } = context;
     const xID = XEUtils.uniqueId();
@@ -179,38 +176,35 @@ var scrollbar_default = defineVxeComponent({
       const yVisible = computeYVisible.value;
       const xAutoHide = computeXAutoHide.value;
       const yAutoHide = computeYAutoHide.value;
-      return domUtils.buildClass([
-        "vxe-scrollbar",
-        vSize ? `size--${vSize}` : "",
-        theme ? `theme--${theme}` : "",
-        fluentOverlay ? "is--fluent-overlay" : "is--default-mode",
-        `ov-x--${xVisible === false ? "hidden" : "visible"}`,
-        `ov-y--${yVisible === false ? "hidden" : "visible"}`,
-        `sx-pos--${xToTop ? "top" : "bottom"}`,
-        `sy-pos--${yToLeft ? "left" : "right"}`,
-        native ? "is--native" : "is--virtual",
-        className
-      ], {
-        "is--padding": padding,
-        "ov-x--auto-hide": xAutoHide,
-        "ov-y--auto-hide": yAutoHide,
-        "overflow-y": yThumbHeight,
-        "overflow-x": xThumbWidth
-      });
+      return domUtils.buildClass(
+        [
+          "vxe-scrollbar",
+          vSize ? `size--${vSize}` : "",
+          theme ? `theme--${theme}` : "",
+          fluentOverlay ? "is--fluent-overlay" : "is--default-mode",
+          `ov-x--${xVisible === false ? "hidden" : "visible"}`,
+          `ov-y--${yVisible === false ? "hidden" : "visible"}`,
+          `sx-pos--${xToTop ? "top" : "bottom"}`,
+          `sy-pos--${yToLeft ? "left" : "right"}`,
+          native ? "is--native" : "is--virtual",
+          className
+        ],
+        {
+          "is--padding": padding,
+          "ov-x--auto-hide": xAutoHide,
+          "ov-y--auto-hide": yAutoHide,
+          "overflow-y": yThumbHeight,
+          "overflow-x": xThumbWidth
+        }
+      );
     });
     const computeViewClss = computed(() => {
       const { viewClassName } = props;
-      return domUtils.buildClass([
-        "vxe-scrollbar--view",
-        viewClassName
-      ]);
+      return domUtils.buildClass(["vxe-scrollbar--view", viewClassName]);
     });
     const computeViewInnerClss = computed(() => {
       const { viewInnerClassName } = props;
-      return domUtils.buildClass([
-        "vxe-scrollbar--view-inner",
-        viewInnerClassName
-      ]);
+      return domUtils.buildClass(["vxe-scrollbar--view-inner", viewInnerClassName]);
     });
     const computeXOpts = computed(() => {
       return Object.assign({}, getConfig().scrollbar.xConfig, props.xConfig);
@@ -239,21 +233,7 @@ var scrollbar_default = defineVxeComponent({
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
-    const {
-      refTrackXElem,
-      refTrackYElem,
-      refThumbXElem,
-      refThumbYElem,
-      updateThumbSize,
-      updateThumbOffset,
-      clickTrackXEvent,
-      clickTrackYEvent,
-      pointerdownThumbXEvent,
-      pointermoveThumbXEvent,
-      cleatPointerThumbEvent,
-      pointerdownThumbYEvent,
-      pointermoveThumbYEvent
-    } = useFns.useInitVScrollbar($xeScrollbar);
+    const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeScrollbar);
     const dispatchEvent = (type, params, evnt) => {
       emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params));
     };
@@ -366,33 +346,41 @@ var scrollbar_default = defineVxeComponent({
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
-        dispatchEvent("scroll-boundary", {
+        dispatchEvent(
+          "scroll-boundary",
+          {
+            direction,
+            isTop: isTopBoundary,
+            isBottom: isBottomBoundary,
+            isLeft: isLeftBoundary,
+            isRight: isRightBoundary,
+            scrollTop,
+            scrollLeft,
+            clientWidth,
+            clientHeight,
+            scrollHeight,
+            scrollWidth
+          },
+          evnt
+        );
+      }
+      dispatchEvent(
+        "scroll",
+        {
           direction,
-          isTop: isTopBoundary,
-          isBottom: isBottomBoundary,
-          isLeft: isLeftBoundary,
-          isRight: isRightBoundary,
+          isTop: yThumbHeight > 0 && scrollTop <= 0,
+          isBottom: yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight,
+          isLeft: xThumbWidth > 0 && scrollLeft <= 0,
+          isRight: xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth,
           scrollTop,
           scrollLeft,
           clientWidth,
           clientHeight,
           scrollHeight,
           scrollWidth
-        }, evnt);
-      }
-      dispatchEvent("scroll", {
-        direction,
-        isTop: yThumbHeight > 0 && scrollTop <= 0,
-        isBottom: yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight,
-        isLeft: xThumbWidth > 0 && scrollLeft <= 0,
-        isRight: xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth,
-        scrollTop,
-        scrollLeft,
-        clientWidth,
-        clientHeight,
-        scrollHeight,
-        scrollWidth
-      }, evnt);
+        },
+        evnt
+      );
     };
     const scrollbarPrivateMethods = {};
     Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
@@ -405,87 +393,131 @@ var scrollbar_default = defineVxeComponent({
       const xVisible = computeXVisible.value;
       const yVisible = computeYVisible.value;
       const defaultSlot = slots.default;
-      return h("div", {
-        ref: refElem,
-        id: id || null,
-        class: wrapperClss,
-        style: wrapperStyle
-      }, [
-        h("div", {
-          ref: refViewElem,
-          class: viewClss,
-          onScroll: scrollEvent,
-          id: viewId || null,
-          style: viewStyle,
-          ...viewAttrs
-        }, [
-          h("div", {
-            key: "vi",
-            ref: refViewInnerElem,
-            class: viewInnerClss
-          }, defaultSlot ? defaultSlot({}) : [])
-        ]),
-        native || xVisible === false ? renderEmptyElement($xeScrollbar) : h("div", {
-          ref: refTrackXElem,
-          class: "vxe-scrollbar--track-x",
-          onClick: clickTrackXEvent
-        }, [
-          h("div", {
-            ref: refThumbXElem,
-            class: "vxe-scrollbar--thumb-x",
-            onPointerdown: pointerdownThumbXEvent,
-            onPointermove: pointermoveThumbXEvent,
-            onPointerup: cleatPointerThumbEvent,
-            onPointercancel: cleatPointerThumbEvent,
-            onLostpointercapture: cleatPointerThumbEvent
-          })
-        ]),
-        native || yVisible === false ? renderEmptyElement($xeScrollbar) : h("div", {
-          ref: refTrackYElem,
-          class: "vxe-scrollbar--track-y",
-          onClick: clickTrackYEvent
-        }, [
-          h("div", {
-            ref: refThumbYElem,
-            class: "vxe-scrollbar--thumb-y",
-            onPointerdown: pointerdownThumbYEvent,
-            onPointermove: pointermoveThumbYEvent,
-            onPointerup: cleatPointerThumbEvent,
-            onPointercancel: cleatPointerThumbEvent,
-            onLostpointercapture: cleatPointerThumbEvent
+      return h(
+        "div",
+        {
+          ref: refElem,
+          id: id || null,
+          class: wrapperClss,
+          style: wrapperStyle
+        },
+        [
+          h(
+            "div",
+            {
+              ref: refViewElem,
+              class: viewClss,
+              onScroll: scrollEvent,
+              id: viewId || null,
+              style: viewStyle,
+              ...viewAttrs
+            },
+            [
+              h(
+                "div",
+                {
+                  key: "vi",
+                  ref: refViewInnerElem,
+                  class: viewInnerClss
+                },
+                defaultSlot ? defaultSlot({}) : []
+              )
+            ]
+          ),
+          native || xVisible === false ? renderEmptyElement($xeScrollbar) : h(
+            "div",
+            {
+              ref: refTrackXElem,
+              class: "vxe-scrollbar--track-x",
+              onClick: clickTrackXEvent
+            },
+            [
+              h("div", {
+                ref: refThumbXElem,
+                class: "vxe-scrollbar--thumb-x",
+                onPointerdown: pointerdownThumbXEvent,
+                onPointermove: pointermoveThumbXEvent,
+                onPointerup: cleatPointerThumbEvent,
+                onPointercancel: cleatPointerThumbEvent,
+                onLostpointercapture: cleatPointerThumbEvent
+              })
+            ]
+          ),
+          native || yVisible === false ? renderEmptyElement($xeScrollbar) : h(
+            "div",
+            {
+              ref: refTrackYElem,
+              class: "vxe-scrollbar--track-y",
+              onClick: clickTrackYEvent
+            },
+            [
+              h("div", {
+                ref: refThumbYElem,
+                class: "vxe-scrollbar--thumb-y",
+                onPointerdown: pointerdownThumbYEvent,
+                onPointermove: pointermoveThumbYEvent,
+                onPointerup: cleatPointerThumbEvent,
+                onPointercancel: cleatPointerThumbEvent,
+                onLostpointercapture: cleatPointerThumbEvent
+              })
+            ]
+          ),
+          h(VxeLoadingComponent, {
+            class: "vxe-scrollbar--loading",
+            modelValue: loading
           })
-        ]),
-        h(VxeLoadingComponent, {
-          class: "vxe-scrollbar--loading",
-          modelValue: loading
-        })
-      ]);
+        ]
+      );
     };
     const reFlag = ref(0);
-    watch(() => props.height, () => {
-      reFlag.value++;
-    });
-    watch(() => props.width, () => {
-      reFlag.value++;
-    });
-    watch(() => props.minHeight, () => {
-      reFlag.value++;
-    });
-    watch(() => props.minWidth, () => {
-      reFlag.value++;
-    });
-    watch(() => props.maxHeight, () => {
-      reFlag.value++;
-    });
-    watch(() => props.maxWidth, () => {
-      reFlag.value++;
-    });
-    watch(() => props.native, () => {
-      reFlag.value++;
-    });
-    watch(() => props.syncResize, () => {
-      reFlag.value++;
-    });
+    watch(
+      () => props.height,
+      () => {
+        reFlag.value++;
+      }
+    );
+    watch(
+      () => props.width,
+      () => {
+        reFlag.value++;
+      }
+    );
+    watch(
+      () => props.minHeight,
+      () => {
+        reFlag.value++;
+      }
+    );
+    watch(
+      () => props.minWidth,
+      () => {
+        reFlag.value++;
+      }
+    );
+    watch(
+      () => props.maxHeight,
+      () => {
+        reFlag.value++;
+      }
+    );
+    watch(
+      () => props.maxWidth,
+      () => {
+        reFlag.value++;
+      }
+    );
+    watch(
+      () => props.native,
+      () => {
+        reFlag.value++;
+      }
+    );
+    watch(
+      () => props.syncResize,
+      () => {
+        reFlag.value++;
+      }
+    );
     watch(computeYWidth, () => {
       reFlag.value++;
     });

package/es/segmented/src/segmented.js

@@ -1,8 +1,9 @@
 import { ref, h, reactive, watch, computed, nextTick, onMounted, onBeforeUnmount } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { getConfig, createEvent, useSize, renderEmptyElement } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { toCssUnit } from "../../ui/src/dom";
+const { getConfig, createEvent, useFns, renderEmptyElement } = VxeUI;
 function createReactData() {
   return {
     groupName: XEUtils.uniqueId("xe_group_"),
@@ -33,14 +34,11 @@ var segmented_default = defineVxeComponent({
       default: () => getConfig().segmented.size || getConfig().size
     }
   },
-  emits: [
-    "update:modelValue",
-    "change"
-  ],
+  emits: ["update:modelValue", "change"],
   setup(props, context) {
     const { slots, emit } = context;
     const xID = XEUtils.uniqueId();
-    const { computeSize } = useSize(props);
+    const { computeSize } = useFns.useSize(props);
     const refElem = ref();
     const refWrapperElem = ref();
     const refSelectedElem = ref();
@@ -143,38 +141,57 @@ var segmented_default = defineVxeComponent({
         const { icon, width } = item;
         const itemWidth = width || optionOpts.width;
         itemVNs.push(
-          h("label", {
-            key: i,
-            class: ["vxe-segmented--item", {
-              "is--checked": modelValue === item.value
-            }],
-            style: isFullWidth || itemWidth ? {
-              width: itemWidth ? toCssUnit(itemWidth) : fullItemWidth ? `${fullItemWidth}%` : ""
-            } : void 0
-          }, [
-            h("input", {
-              class: "vxe-segmented--input",
-              type: "radio",
-              name: name || groupName,
-              onChange(evnt) {
-                changeEvent(evnt, item);
-              }
-            }),
-            h("div", {
-              class: "vxe-segmented--content"
-            }, [
-              icon ? h("div", {
-                class: "vxe-segmented--icon"
-              }, [
-                h("i", {
-                  class: icon
-                })
-              ]) : renderEmptyElement($xeSegmented),
-              h("div", {
-                class: "vxe-segmented--label"
-              }, defaultSlot ? defaultSlot({ option: item }) : XEUtils.eqNull(item.label) ? "" : `${item.label}`)
-            ])
-          ])
+          h(
+            "label",
+            {
+              key: i,
+              class: [
+                "vxe-segmented--item",
+                {
+                  "is--checked": modelValue === item.value
+                }
+              ],
+              style: isFullWidth || itemWidth ? {
+                width: itemWidth ? toCssUnit(itemWidth) : fullItemWidth ? `${fullItemWidth}%` : ""
+              } : void 0
+            },
+            [
+              h("input", {
+                class: "vxe-segmented--input",
+                type: "radio",
+                name: name || groupName,
+                onChange(evnt) {
+                  changeEvent(evnt, item);
+                }
+              }),
+              h(
+                "div",
+                {
+                  class: "vxe-segmented--content"
+                },
+                [
+                  icon ? h(
+                    "div",
+                    {
+                      class: "vxe-segmented--icon"
+                    },
+                    [
+                      h("i", {
+                        class: icon
+                      })
+                    ]
+                  ) : renderEmptyElement($xeSegmented),
+                  h(
+                    "div",
+                    {
+                      class: "vxe-segmented--label"
+                    },
+                    defaultSlot ? defaultSlot({ option: item }) : XEUtils.eqNull(item.label) ? "" : `${item.label}`
+                  )
+                ]
+              )
+            ]
+          )
         );
       });
       return itemVNs;
@@ -185,28 +202,44 @@ var segmented_default = defineVxeComponent({
       const itemType = computeItemType.value;
       const wrapperStyle = computeWrapperStyle.value;
       const vSize = computeSize.value;
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-segmented", `type--${itemType}`, {
-          [`size--${vSize}`]: vSize,
-          [`theme--${status}`]: status
-        }]
-      }, [
-        h("div", {
-          class: "vxe-segmented--group",
-          style: wrapperStyle
-        }, [
-          h("div", {
-            ref: refSelectedElem,
-            class: "vxe-segmented--selected",
-            style: selectStyle
-          }),
-          h("div", {
-            ref: refWrapperElem,
-            class: "vxe-segmented--inner"
-          }, renderItems())
-        ])
-      ]);
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-segmented",
+            `type--${itemType}`,
+            {
+              [`size--${vSize}`]: vSize,
+              [`theme--${status}`]: status
+            }
+          ]
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vxe-segmented--group",
+              style: wrapperStyle
+            },
+            [
+              h("div", {
+                ref: refSelectedElem,
+                class: "vxe-segmented--selected",
+                style: selectStyle
+              }),
+              h(
+                "div",
+                {
+                  ref: refWrapperElem,
+                  class: "vxe-segmented--inner"
+                },
+                renderItems()
+              )
+            ]
+          )
+        ]
+      );
     };
     watch(computeSelectIndex, () => {
       updateStyle();

package/es/select/src/optgroup.js

@@ -33,9 +33,13 @@ var optgroup_default = defineVxeComponent({
     });
     return () => {
       const defaultSlot = slots.default;
-      return h("div", {
-        ref: elem
-      }, defaultSlot ? defaultSlot({}) : []);
+      return h(
+        "div",
+        {
+          ref: elem
+        },
+        defaultSlot ? defaultSlot({}) : []
+      );
     };
   }
 });