@varlet/ui 2.11.6 → 2.11.8

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.11.6'
+const version = '2.11.8'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.11.6'
+const version = '2.11.8'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/popup/Popup.mjs

@@ -1,12 +1,14 @@
-import { isVNode as _isVNode, withDirectives as _withDirectives, vShow as _vShow, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { isVNode as _isVNode, withDirectives as _withDirectives, mergeProps as _mergeProps, vShow as _vShow, createVNode as _createVNode } from "vue";
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { defineComponent, watch, Transition, Teleport } from 'vue';
+import { defineComponent, watch, Transition, Teleport, computed } from 'vue';
 import { props } from './props.mjs';
 import { useLock } from '../context/lock.mjs';
 import { useZIndex } from '../context/zIndex.mjs';
 import { useRouteListener, useTeleport, createNamespace, call } from '../utils/components.mjs';
+import { usePopupItems } from './provide.mjs';
+import { useInitialized } from '@varlet/use';
 
 
 
@@ -28,12 +30,16 @@ export default defineComponent({
       slots,
       attrs
     } = _ref;
+    var rendered = useInitialized(() => props.show, true);
     var {
       zIndex
     } = useZIndex(() => props.show, 3);
     var {
       disabled
     } = useTeleport();
+    var {
+      bindPopupItems
+    } = usePopupItems();
 
     var hidePopup = () => {
       var {
@@ -49,13 +55,6 @@ export default defineComponent({
       call(props['onUpdate:show'], false);
     };
 
-    useLock(() => props.show, () => props.lockScroll);
-    watch(() => props.show, newValue => {
-      newValue ? call(props.onOpen) : call(props.onClose);
-    }); // internal for Dialog
-
-    useRouteListener(() => call(props.onRouteChange));
-
     var renderOverlay = () => {
       var {
         overlayClass = '',
@@ -71,54 +70,57 @@ export default defineComponent({
     };
 
     var renderContent = () => {
-      return _createVNode("div", _mergeProps({
+      return _withDirectives(_createVNode("div", _mergeProps({
         "class": classes(n('content'), n("--" + props.position), [props.defaultStyle, n('--content-background-color')], [props.defaultStyle, n('$-elevation--3')], [props.safeArea, n('--safe-area')], [props.safeAreaTop, n('--safe-area-top')]),
         "style": {
           zIndex: zIndex.value
         }
-      }, attrs), [call(slots.default)]);
+      }, attrs), [rendered.value && call(slots.default)]), [[_vShow, props.show]]);
     };
 
     var renderPopup = () => {
-      var {
-        onOpened,
-        onClosed,
-        show,
-        overlay,
-        transition,
-        position
-      } = props;
+      var _slot;
+
       return _createVNode(Transition, {
         "name": n('$-fade'),
-        "onAfterEnter": onOpened,
-        "onAfterLeave": onClosed
+        "onAfterEnter": props.onOpened,
+        "onAfterLeave": props.onClosed
       }, {
         default: () => [_withDirectives(_createVNode("div", {
           "class": classes(n('$--box'), n()),
           "style": {
             zIndex: zIndex.value - 2
           }
-        }, [overlay && renderOverlay(), _createVNode(Transition, {
-          "name": transition || n("$-pop-" + position)
-        }, {
-          default: () => [show && renderContent()]
-        })]), [[_vShow, show]])]
+        }, [props.overlay && renderOverlay(), _createVNode(Transition, {
+          "name": props.transition || n("$-pop-" + props.position)
+        }, _isSlot(_slot = renderContent()) ? _slot : {
+          default: () => [_slot]
+        })]), [[_vShow, props.show]])]
       });
     };
 
+    useLock(() => props.show, () => props.lockScroll);
+    watch(() => props.show, newValue => {
+      newValue ? call(props.onOpen) : call(props.onClose);
+    });
+    bindPopupItems({
+      show: computed(() => props.show)
+    }); // internal for Dialog
+
+    useRouteListener(() => call(props.onRouteChange));
     return () => {
       var {
         teleport
       } = props;
 
       if (teleport) {
-        var _slot;
+        var _slot2;
 
         return _createVNode(Teleport, {
           "to": teleport,
           "disabled": disabled.value
-        }, _isSlot(_slot = renderPopup()) ? _slot : {
-          default: () => [_slot]
+        }, _isSlot(_slot2 = renderPopup()) ? _slot2 : {
+          default: () => [_slot2]
         });
       }
 

package/es/popup/provide.mjs

@@ -0,0 +1,26 @@
+import { useChildren, useParent } from '@varlet/use';
+export var POPUP_BIND_POPUP_ITEM_KEY = Symbol('POPUP_BIND_POPUP_ITEM_KEY');
+export function usePopup() {
+  var {
+    bindParent,
+    parentProvider,
+    index
+  } = useParent(POPUP_BIND_POPUP_ITEM_KEY);
+  return {
+    index,
+    popup: parentProvider,
+    bindPopup: bindParent
+  };
+}
+export function usePopupItems() {
+  var {
+    bindChildren,
+    childProviders,
+    length
+  } = useChildren(POPUP_BIND_POPUP_ITEM_KEY);
+  return {
+    length,
+    popupItems: childProviders,
+    bindPopupItems: bindChildren
+  };
+}

package/es/progress/progress.css

@@ -1 +1 @@
-:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-background: var(--color-primary);}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress__linear { display: flex; align-items: center;}.var-progress__linear-block { flex: 1; position: relative; overflow: hidden; height: 4px;}.var-progress__linear-background,.var-progress__linear-certain { width: 100%; height: 100%;}.var-progress__linear-ripple::after { position: absolute; width: 0; background-color: var(--progress-ripple-color); height: 100%; opacity: 0; animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; content: '';}.var-progress__linear-background { background-color: var(--progress-track-color);}.var-progress__linear-certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress__linear-label { margin-left: 8px; flex: 0;}@keyframes ripple { 0% { width: 0; opacity: 0.1; } 20% { width: 0; opacity: 0.5; } 80% { width: 100%; opacity: 0; }}.var-progress__circle { position: relative; width: 40px; height: 40px;}.var-progress__circle-background { stroke: var(--progress-track-color);}.var-progress__circle-certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress__circle-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
+:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-label-color: #555; --progress-background: var(--color-primary);}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress__linear { display: flex; align-items: center;}.var-progress__linear-block { flex: 1; position: relative; overflow: hidden; height: 4px;}.var-progress__linear-background,.var-progress__linear-certain { width: 100%; height: 100%;}.var-progress__linear-ripple::after { position: absolute; width: 0; background-color: var(--progress-ripple-color); height: 100%; opacity: 0; animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; content: '';}.var-progress__linear-background { background-color: var(--progress-track-color);}.var-progress__linear-certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress__linear-label { margin-left: 8px; flex: 0; color: var(--progress-label-color);}@keyframes ripple { 0% { width: 0; opacity: 0.1; } 20% { width: 0; opacity: 0.5; } 80% { width: 100%; opacity: 0; }}.var-progress__circle { position: relative; width: 40px; height: 40px;}.var-progress__circle-background { stroke: var(--progress-track-color);}.var-progress__circle-certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress__circle-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--progress-label-color);}