vxe-pc-ui 4.20.25 → 4.20.26

package/es/card/src/card.js

@@ -1,12 +1,13 @@
 import { ref, h, reactive, computed } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
+import { VxeUI } from "@vxe-ui/core";
 import { getSlotVNs } from "../../ui/src/vn";
-import { getConfig, createEvent, useFns, renderEmptyElement } from "../../ui";
 import { toCssUnit } from "../../ui/src/dom";
 import { getDefaultConfig } from "../../ui/src/utils";
 import VxeLoadingComponent from "../../loading";
 import VxeScrollbarComponent from "../../scrollbar";
+const { getConfig, createEvent, useFns, renderEmptyElement } = VxeUI;
 var card_default = defineVxeComponent({
   name: "VxeCard",
   props: {
@@ -112,73 +113,127 @@ var card_default = defineVxeComponent({
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarProps = computeScrollbarProps.value;
       const { viewClassName, viewInnerClassName } = scrollbarOpts;
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-card", {
-          [`size--${vSize}`]: vSize,
-          "is--border": border,
-          "is--shadow": shadow,
-          "is--padding": padding
-        }],
-        style: cardStyle
-      }, [
-        title || titleSlot || headerSlot ? h("div", {
-          class: "vxe-card--header"
-        }, headerSlot ? getSlotVNs(headerSlot({})) : [
-          h("div", {
-            class: ["vxe-card--header-title", {
-              "is--ellipsis": showTitleOverflow
-            }]
-          }, titleSlot ? getSlotVNs(titleSlot({})) : `${title || ""}`),
-          extraSlot ? h("div", {
-            class: "vxe-card--header-extra"
-          }, getSlotVNs(extraSlot({}))) : renderEmptyElement($xeCard)
-        ]) : renderEmptyElement($xeCard),
-        h("div", {
-          class: "vxe-card--body"
-        }, [
-          leftSlot ? isVScrollbar ? h(VxeScrollbarComponent, {
-            class: "vxe-card--body-scrollbar-left",
-            ...scrollbarProps,
-            viewClassName: "vxe-card--body-scrollbar-left-view",
-            viewInnerClassName: "vxe-card--body-scrollbar-left-inner"
-          }, {
-            default: () => getSlotVNs(leftSlot({}))
-          }) : h("div", {
-            class: "vxe-card--body-left"
-          }, getSlotVNs(leftSlot({}))) : renderEmptyElement($xeCard),
-          isVScrollbar ? h(VxeScrollbarComponent, {
-            class: "vxe-card--body-scrollbar-content",
-            ...scrollbarProps,
-            viewClassName: "vxe-card--body-scrollbar-content-view" + (viewClassName ? " " + viewClassName : ""),
-            viewInnerClassName: "vxe-card--body-scrollbar-content-inner" + (viewClassName ? " " + viewInnerClassName : "")
-          }, {
-            default: () => defaultSlot ? getSlotVNs(defaultSlot({})) : []
-          }) : h("div", {
-            class: "vxe-card--body-content"
-          }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
-          rightSlot ? isVScrollbar ? h(VxeScrollbarComponent, {
-            class: "vxe-card--body-scrollbar-right",
-            ...scrollbarProps,
-            viewClassName: "vxe-card--body-scrollbar-right-view",
-            viewInnerClassName: "vxe-card--body-scrollbar-right-inner"
-          }, {
-            default: () => getSlotVNs(rightSlot({}))
-          }) : h("div", {
-            class: "vxe-card--body-right"
-          }, getSlotVNs(rightSlot({}))) : renderEmptyElement($xeCard)
-        ]),
-        footerSlot ? h("div", {
-          class: "vxe-card--footer"
-        }, getSlotVNs(footerSlot({}))) : renderEmptyElement($xeCard),
-        /**
-         * 加载中
-         */
-        h(VxeLoadingComponent, {
-          class: "vxe-card--loading",
-          modelValue: loading
-        })
-      ]);
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-card",
+            {
+              [`size--${vSize}`]: vSize,
+              "is--border": border,
+              "is--shadow": shadow,
+              "is--padding": padding
+            }
+          ],
+          style: cardStyle
+        },
+        [
+          title || titleSlot || headerSlot ? h(
+            "div",
+            {
+              class: "vxe-card--header"
+            },
+            headerSlot ? getSlotVNs(headerSlot({})) : [
+              h(
+                "div",
+                {
+                  class: [
+                    "vxe-card--header-title",
+                    {
+                      "is--ellipsis": showTitleOverflow
+                    }
+                  ]
+                },
+                titleSlot ? getSlotVNs(titleSlot({})) : `${title || ""}`
+              ),
+              extraSlot ? h(
+                "div",
+                {
+                  class: "vxe-card--header-extra"
+                },
+                getSlotVNs(extraSlot({}))
+              ) : renderEmptyElement($xeCard)
+            ]
+          ) : renderEmptyElement($xeCard),
+          h(
+            "div",
+            {
+              class: "vxe-card--body"
+            },
+            [
+              leftSlot ? isVScrollbar ? h(
+                VxeScrollbarComponent,
+                {
+                  class: "vxe-card--body-scrollbar-left",
+                  ...scrollbarProps,
+                  viewClassName: "vxe-card--body-scrollbar-left-view",
+                  viewInnerClassName: "vxe-card--body-scrollbar-left-inner"
+                },
+                {
+                  default: () => getSlotVNs(leftSlot({}))
+                }
+              ) : h(
+                "div",
+                {
+                  class: "vxe-card--body-left"
+                },
+                getSlotVNs(leftSlot({}))
+              ) : renderEmptyElement($xeCard),
+              isVScrollbar ? h(
+                VxeScrollbarComponent,
+                {
+                  class: "vxe-card--body-scrollbar-content",
+                  ...scrollbarProps,
+                  viewClassName: "vxe-card--body-scrollbar-content-view" + (viewClassName ? " " + viewClassName : ""),
+                  viewInnerClassName: "vxe-card--body-scrollbar-content-inner" + (viewClassName ? " " + viewInnerClassName : "")
+                },
+                {
+                  default: () => defaultSlot ? getSlotVNs(defaultSlot({})) : []
+                }
+              ) : h(
+                "div",
+                {
+                  class: "vxe-card--body-content"
+                },
+                defaultSlot ? getSlotVNs(defaultSlot({})) : []
+              ),
+              rightSlot ? isVScrollbar ? h(
+                VxeScrollbarComponent,
+                {
+                  class: "vxe-card--body-scrollbar-right",
+                  ...scrollbarProps,
+                  viewClassName: "vxe-card--body-scrollbar-right-view",
+                  viewInnerClassName: "vxe-card--body-scrollbar-right-inner"
+                },
+                {
+                  default: () => getSlotVNs(rightSlot({}))
+                }
+              ) : h(
+                "div",
+                {
+                  class: "vxe-card--body-right"
+                },
+                getSlotVNs(rightSlot({}))
+              ) : renderEmptyElement($xeCard)
+            ]
+          ),
+          footerSlot ? h(
+            "div",
+            {
+              class: "vxe-card--footer"
+            },
+            getSlotVNs(footerSlot({}))
+          ) : renderEmptyElement($xeCard),
+          /**
+           * 加载中
+           */
+          h(VxeLoadingComponent, {
+            class: "vxe-card--loading",
+            modelValue: loading
+          })
+        ]
+      );
     };
     $xeCard.renderVN = renderVN;
     return $xeCard;

package/es/carousel/src/carousel-item.js

@@ -1,8 +1,9 @@
 import { ref, h, reactive, inject, watch, onMounted, onUnmounted } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
-import { createEvent } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { assembleCarouselItem, destroyCarouselItem } from "./util";
 import XEUtils from "xe-utils";
+const { createEvent } = VxeUI;
 var carousel_item_default = defineVxeComponent({
   name: "VxeCarouselItem",
   props: {
@@ -49,12 +50,18 @@ var carousel_item_default = defineVxeComponent({
         ref: refElem
       });
     };
-    watch(() => props.name, (val) => {
-      itemConfig.name = val;
-    });
-    watch(() => props.url, (val) => {
-      itemConfig.url = val;
-    });
+    watch(
+      () => props.name,
+      (val) => {
+        itemConfig.name = val;
+      }
+    );
+    watch(
+      () => props.url,
+      (val) => {
+        itemConfig.url = val;
+      }
+    );
     onMounted(() => {
       const elem = refElem.value;
       if ($xeCarousel && elem) {

package/es/carousel/src/carousel.js

@@ -1,10 +1,11 @@
 import { ref, h, reactive, provide, watch, nextTick, onMounted, computed, onUnmounted } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
-import { getConfig, getIcon, createEvent, renderEmptyElement } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getSlotVNs } from "../../ui/src/vn";
 import { toCssUnit } from "../../ui/src/dom";
 import VxeLoadingComponent from "../../loading";
 import XEUtils from "xe-utils";
+const { getConfig, getIcon, createEvent, renderEmptyElement } = VxeUI;
 var carousel_default = defineVxeComponent({
   name: "VxeCarousel",
   props: {
@@ -40,10 +41,7 @@ var carousel_default = defineVxeComponent({
       default: () => getConfig().carousel.showIndicators
     }
   },
-  emits: [
-    "update:modelValue",
-    "change"
-  ],
+  emits: ["update:modelValue", "change"],
   setup(props, context) {
     const { emit, slots } = context;
     const xID = XEUtils.uniqueId();
@@ -66,7 +64,10 @@ var carousel_default = defineVxeComponent({
       const { vertical, options } = props;
       const { activeName, itemWidth, itemHeight, staticItems } = reactData;
       const list = (staticItems && staticItems.length ? staticItems : options) || [];
-      const activeIndex = Math.max(0, XEUtils.findIndexOf(list, (item) => item.name === activeName));
+      const activeIndex = Math.max(
+        0,
+        XEUtils.findIndexOf(list, (item) => item.name === activeName)
+      );
       const stys = {};
       if (vertical) {
         stys.transform = `translateY(-${activeIndex * itemHeight}px)`;
@@ -126,7 +127,10 @@ var carousel_default = defineVxeComponent({
       const { options, loop } = props;
       const { activeName, staticItems } = reactData;
       const list = (staticItems && staticItems.length ? staticItems : options) || [];
-      const index = Math.max(0, XEUtils.findIndexOf(list, (item) => item.name === activeName));
+      const index = Math.max(
+        0,
+        XEUtils.findIndexOf(list, (item) => item.name === activeName)
+      );
       if (index > -1) {
         let item = null;
         if (isNext) {
@@ -197,11 +201,14 @@ var carousel_default = defineVxeComponent({
       stopAutoPlay();
       if (autoPlay) {
         internalData.stopFlag = false;
-        internalData.apTimeout = setTimeout(() => {
-          if (!stopFlag) {
-            handlePrevNext(true);
-          }
-        }, XEUtils.toNumber(interval) || 300);
+        internalData.apTimeout = setTimeout(
+          () => {
+            if (!stopFlag) {
+              handlePrevNext(true);
+            }
+          },
+          XEUtils.toNumber(interval) || 300
+        );
       }
     };
     const mouseenterEvent = () => {
@@ -227,124 +234,179 @@ var carousel_default = defineVxeComponent({
       const { height } = props;
       const { activeName } = reactData;
       const listStyle = computeListStyle.value;
-      return h("div", {
-        class: "vxe-carousel--list",
-        style: listStyle
-      }, list.map((item) => {
-        const { name, url, slots: slots2 } = item;
-        const defaultSlot = slots2 ? slots2.default : null;
-        return h("div", {
-          key: `${name}`,
-          class: ["vxe-carousel--item-inner", {
-            "is--active": activeName === name
-          }],
-          style: height ? {
-            height: toCssUnit(height)
-          } : null
-        }, defaultSlot ? callSlot(defaultSlot, {}) : [
-          h("img", {
-            class: "vxe-carousel--item-img",
-            src: url
-          })
-        ]);
-      }));
+      return h(
+        "div",
+        {
+          class: "vxe-carousel--list",
+          style: listStyle
+        },
+        list.map((item) => {
+          const { name, url, slots: slots2 } = item;
+          const defaultSlot = slots2 ? slots2.default : null;
+          return h(
+            "div",
+            {
+              key: `${name}`,
+              class: [
+                "vxe-carousel--item-inner",
+                {
+                  "is--active": activeName === name
+                }
+              ],
+              style: height ? {
+                height: toCssUnit(height)
+              } : null
+            },
+            defaultSlot ? callSlot(defaultSlot, {}) : [
+              h("img", {
+                class: "vxe-carousel--item-img",
+                src: url
+              })
+            ]
+          );
+        })
+      );
     };
     const renderIndicators = (list) => {
       const { activeName } = reactData;
-      return h("div", {
-        class: "vxe-carousel--indicators"
-      }, list.map((item) => {
-        const { name } = item;
-        return h("div", {
-          key: `${name}`,
-          class: ["vxe-carousel--indicators-item", {
-            "is--active": activeName === name
-          }],
-          onClick(evnt) {
-            clickItemEvent(evnt, item);
-          }
-        });
-      }));
+      return h(
+        "div",
+        {
+          class: "vxe-carousel--indicators"
+        },
+        list.map((item) => {
+          const { name } = item;
+          return h("div", {
+            key: `${name}`,
+            class: [
+              "vxe-carousel--indicators-item",
+              {
+                "is--active": activeName === name
+              }
+            ],
+            onClick(evnt) {
+              clickItemEvent(evnt, item);
+            }
+          });
+        })
+      );
     };
     const renderVN = () => {
       const { loading, height, width, showIndicators, vertical, options } = props;
       const { staticItems } = reactData;
       const defaultSlot = slots.default;
       const list = (staticItems && staticItems.length ? staticItems : options) || [];
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-carousel", `is--${vertical ? "vertical" : "horizontal"}`],
-        style: width ? {
-          width: toCssUnit(width)
-        } : null,
-        onMouseenter: mouseenterEvent,
-        onMouseleave: mouseleaveEvent
-      }, [
-        h("div", {
-          class: "vxe-carousel--slots"
-        }, defaultSlot ? defaultSlot({}) : []),
-        h("div", {
-          ref: refWrapperElem,
-          class: "vxe-carousel--item-wrapper",
-          style: height ? {
-            height: toCssUnit(height)
-          } : null
-        }, [
-          renderItemWrapper(list)
-        ]),
-        showIndicators ? renderIndicators(list) : renderEmptyElement($xeCarousel),
-        h("div", {
-          class: "vxe-carousel--btn-wrapper"
-        }, [
-          h("div", {
-            class: "vxe-carousel--previous-btn",
-            onClick: prevEvent
-          }, [
-            h("i", {
-              class: vertical ? getIcon().CAROUSEL_VERTICAL_PREVIOUS : getIcon().CAROUSEL_HORIZONTAL_PREVIOUS
-            })
-          ]),
-          h("div", {
-            class: "vxe-carousel--next-btn",
-            onClick: nextEvent
-          }, [
-            h("i", {
-              class: vertical ? getIcon().CAROUSEL_VERTICAL_NEXT : getIcon().CAROUSEL_HORIZONTAL_NEXT
-            })
-          ])
-        ]),
-        /**
-         * 加载中
-         */
-        h(VxeLoadingComponent, {
-          class: "vxe-carousel--loading",
-          modelValue: loading
-        })
-      ]);
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: ["vxe-carousel", `is--${vertical ? "vertical" : "horizontal"}`],
+          style: width ? {
+            width: toCssUnit(width)
+          } : null,
+          onMouseenter: mouseenterEvent,
+          onMouseleave: mouseleaveEvent
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vxe-carousel--slots"
+            },
+            defaultSlot ? defaultSlot({}) : []
+          ),
+          h(
+            "div",
+            {
+              ref: refWrapperElem,
+              class: "vxe-carousel--item-wrapper",
+              style: height ? {
+                height: toCssUnit(height)
+              } : null
+            },
+            [renderItemWrapper(list)]
+          ),
+          showIndicators ? renderIndicators(list) : renderEmptyElement($xeCarousel),
+          h(
+            "div",
+            {
+              class: "vxe-carousel--btn-wrapper"
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-carousel--previous-btn",
+                  onClick: prevEvent
+                },
+                [
+                  h("i", {
+                    class: vertical ? getIcon().CAROUSEL_VERTICAL_PREVIOUS : getIcon().CAROUSEL_HORIZONTAL_PREVIOUS
+                  })
+                ]
+              ),
+              h(
+                "div",
+                {
+                  class: "vxe-carousel--next-btn",
+                  onClick: nextEvent
+                },
+                [
+                  h("i", {
+                    class: vertical ? getIcon().CAROUSEL_VERTICAL_NEXT : getIcon().CAROUSEL_HORIZONTAL_NEXT
+                  })
+                ]
+              )
+            ]
+          ),
+          /**
+           * 加载中
+           */
+          h(VxeLoadingComponent, {
+            class: "vxe-carousel--loading",
+            modelValue: loading
+          })
+        ]
+      );
     };
     const optsFlag = ref(0);
-    watch(() => props.options ? props.options.length : -1, () => {
-      optsFlag.value++;
-    });
-    watch(() => props.options, () => {
-      optsFlag.value++;
-    });
+    watch(
+      () => props.options ? props.options.length : -1,
+      () => {
+        optsFlag.value++;
+      }
+    );
+    watch(
+      () => props.options,
+      () => {
+        optsFlag.value++;
+      }
+    );
     watch(optsFlag, () => {
       initDefaultActive(props.options);
     });
     const stFlag = ref(0);
-    watch(() => reactData.staticItems ? reactData.staticItems.length : -1, () => {
-      stFlag.value++;
-    });
-    watch(() => reactData.staticItems, () => {
-      stFlag.value++;
-    });
+    watch(
+      () => reactData.staticItems ? reactData.staticItems.length : -1,
+      () => {
+        stFlag.value++;
+      }
+    );
+    watch(
+      () => reactData.staticItems,
+      () => {
+        stFlag.value++;
+      }
+    );
     watch(stFlag, () => {
       initDefaultActive(reactData.staticItems);
     });
-    watch(() => props.autoPlay, () => {
-      handleAutoPlay();
-    });
+    watch(
+      () => props.autoPlay,
+      () => {
+        handleAutoPlay();
+      }
+    );
     initDefaultActive(reactData.staticItems.length ? reactData.staticItems : props.options);
     onMounted(() => {
       handleAutoPlay();