@varlet/ui 2.11.6 → 2.11.8

package/lib/varlet.cjs.js

@@ -610,6 +610,15 @@ function onWindowResize(listener) {
   useEventListener(() => window, "resize", listener, { passive: true });
   useEventListener(() => window, "orientationchange", listener, { passive: true });
 }
+function useInitialized(source, value) {
+  const initialized = vue.ref(false);
+  vue.watch(source, (newValue) => {
+    if (value === newValue) {
+      initialized.value = true;
+    }
+  }, { immediate: true });
+  return initialized;
+}
 function asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -1156,6 +1165,31 @@ function useZIndex(source, count) {
     zIndex
   };
 }
+var POPUP_BIND_POPUP_ITEM_KEY = Symbol("POPUP_BIND_POPUP_ITEM_KEY");
+function usePopup() {
+  var {
+    bindParent,
+    parentProvider,
+    index
+  } = useParent(POPUP_BIND_POPUP_ITEM_KEY);
+  return {
+    index,
+    popup: parentProvider,
+    bindPopup: bindParent
+  };
+}
+function usePopupItems() {
+  var {
+    bindChildren,
+    childProviders,
+    length
+  } = useChildren(POPUP_BIND_POPUP_ITEM_KEY);
+  return {
+    length,
+    popupItems: childProviders,
+    bindPopupItems: bindChildren
+  };
+}
 function _extends$n() {
   _extends$n = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1186,12 +1220,16 @@ const Popup = vue.defineComponent({
       slots,
       attrs
     } = _ref;
+    var rendered = useInitialized(() => props2.show, true);
     var {
       zIndex
     } = useZIndex(() => props2.show, 3);
     var {
       disabled
     } = useTeleport();
+    var {
+      bindPopupItems
+    } = usePopupItems();
     var hidePopup = () => {
       var {
         closeOnClickOverlay,
@@ -1203,11 +1241,6 @@ const Popup = vue.defineComponent({
       }
       call(props2["onUpdate:show"], false);
     };
-    useLock(() => props2.show, () => props2.lockScroll);
-    vue.watch(() => props2.show, (newValue) => {
-      newValue ? call(props2.onOpen) : call(props2.onClose);
-    });
-    useRouteListener(() => call(props2.onRouteChange));
     var renderOverlay = () => {
       var {
         overlayClass = "",
@@ -1222,50 +1255,51 @@ const Popup = vue.defineComponent({
       }, null);
     };
     var renderContent = () => {
-      return vue.createVNode("div", vue.mergeProps({
+      return vue.withDirectives(vue.createVNode("div", vue.mergeProps({
         "class": classes$14(n$1h("content"), n$1h("--" + props2.position), [props2.defaultStyle, n$1h("--content-background-color")], [props2.defaultStyle, n$1h("$-elevation--3")], [props2.safeArea, n$1h("--safe-area")], [props2.safeAreaTop, n$1h("--safe-area-top")]),
         "style": {
           zIndex: zIndex.value
         }
-      }, attrs), [call(slots.default)]);
+      }, attrs), [rendered.value && call(slots.default)]), [[vue.vShow, props2.show]]);
     };
     var renderPopup = () => {
-      var {
-        onOpened,
-        onClosed,
-        show,
-        overlay: overlay2,
-        transition,
-        position
-      } = props2;
+      var _slot;
       return vue.createVNode(vue.Transition, {
         "name": n$1h("$-fade"),
-        "onAfterEnter": onOpened,
-        "onAfterLeave": onClosed
+        "onAfterEnter": props2.onOpened,
+        "onAfterLeave": props2.onClosed
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
           "class": classes$14(n$1h("$--box"), n$1h()),
           "style": {
             zIndex: zIndex.value - 2
           }
-        }, [overlay2 && renderOverlay(), vue.createVNode(vue.Transition, {
-          "name": transition || n$1h("$-pop-" + position)
-        }, {
-          default: () => [show && renderContent()]
-        })]), [[vue.vShow, show]])]
+        }, [props2.overlay && renderOverlay(), vue.createVNode(vue.Transition, {
+          "name": props2.transition || n$1h("$-pop-" + props2.position)
+        }, _isSlot$3(_slot = renderContent()) ? _slot : {
+          default: () => [_slot]
+        })]), [[vue.vShow, props2.show]])]
       });
     };
+    useLock(() => props2.show, () => props2.lockScroll);
+    vue.watch(() => props2.show, (newValue) => {
+      newValue ? call(props2.onOpen) : call(props2.onClose);
+    });
+    bindPopupItems({
+      show: vue.computed(() => props2.show)
+    });
+    useRouteListener(() => call(props2.onRouteChange));
     return () => {
       var {
         teleport
       } = props2;
       if (teleport) {
-        var _slot;
+        var _slot2;
         return vue.createVNode(vue.Teleport, {
           "to": teleport,
           "disabled": disabled.value
-        }, _isSlot$3(_slot = renderPopup()) ? _slot : {
-          default: () => [_slot]
+        }, _isSlot$3(_slot2 = renderPopup()) ? _slot2 : {
+          default: () => [_slot2]
         });
       }
       return renderPopup();
@@ -14215,6 +14249,10 @@ var __sfc__$I = vue.defineComponent({
       bindSwipeItems,
       length
     } = useSwipeItems();
+    var {
+      popup: popup2,
+      bindPopup
+    } = usePopup();
     var initializedIndex = false;
     var touching = false;
     var timer = -1;
@@ -14481,11 +14519,27 @@ var __sfc__$I = vue.defineComponent({
       vertical
     };
     bindSwipeItems(swipeProvider);
+    call(bindPopup, null);
     vue.watch(() => length.value, /* @__PURE__ */ _asyncToGenerator$7(function* () {
       yield doubleRaf();
       initialIndex();
       resize();
     }));
+    if (popup2) {
+      vue.watch(() => popup2.show.value, /* @__PURE__ */ function() {
+        var _ref3 = _asyncToGenerator$7(function* (show) {
+          if (show) {
+            yield doubleRaf();
+            resize();
+          } else {
+            stopAutoplay();
+          }
+        });
+        return function(_x) {
+          return _ref3.apply(this, arguments);
+        };
+      }());
+    }
     vue.onActivated(resize);
     onSmartUnmounted(stopAutoplay);
     onWindowResize(resize);
@@ -23828,6 +23882,9 @@ const avatar$1 = {
 const link$1 = {
   "--link-default-color": "#fff"
 };
+const progress$1 = {
+  "--progress-label-color": "#fff"
+};
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -23853,7 +23910,7 @@ const dark = _extends({
   "--color-danger": "#ef5350",
   "--color-disabled": "#404040",
   "--color-text-disabled": "#757575"
-}, button$1, cell$1, card$1, timePicker$1, datePicker$1, skeleton$1, tabs$1, tab$1, popup$1, dialog$1, actionSheet$1, chip$1, badge$1, uploader$1, collapse, pullRefresh$1, switchThemes, steps, pagination$1, table$1, fieldDecorator$1, select$1, radio$1, checkbox$1, divider$1, picker$1, appBar$1, bottomNavigation$1, bottomNavigationItem$1, menu$1, result$1, breadcrumb$1, paper$1, avatar$1, link$1);
+}, button$1, cell$1, card$1, timePicker$1, datePicker$1, skeleton$1, tabs$1, tab$1, popup$1, dialog$1, actionSheet$1, chip$1, badge$1, uploader$1, collapse, pullRefresh$1, switchThemes, steps, pagination$1, table$1, fieldDecorator$1, select$1, radio$1, checkbox$1, divider$1, picker$1, appBar$1, bottomNavigation$1, bottomNavigationItem$1, menu$1, result$1, breadcrumb$1, paper$1, avatar$1, link$1, progress$1);
 var Themes = {
   dark
 };
@@ -25547,7 +25604,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.11.6";
+const version = "2.11.8";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.11.6",
+  "version": "2.11.8",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -46,9 +46,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/use": "2.11.6",
-    "@varlet/icons": "2.11.6",
-    "@varlet/shared": "2.11.6"
+    "@varlet/shared": "2.11.8",
+    "@varlet/icons": "2.11.8",
+    "@varlet/use": "2.11.8"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.3.1",
@@ -63,8 +63,8 @@
     "typescript": "^4.4.4",
     "vue": "3.3.2",
     "vue-router": "4.2.0",
-    "@varlet/cli": "2.11.6",
-    "@varlet/touch-emulator": "2.11.6"
+    "@varlet/cli": "2.11.8",
+    "@varlet/touch-emulator": "2.11.8"
   },
   "browserslist": [
     "Chrome >= 54",