@varlet/ui 2.11.6-alpha.1686800314469 → 2.11.7

package/es/counter/counter.css

@@ -1 +1 @@
-:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-disabled); --counter-disabled-opacity: var(--opacity-disabled); --counter-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: color 0.25s, background-color 0.25s, opacity 0.25s;}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover],.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; padding: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter__increment-button[var-counter-cover]:active,.var-counter__decrement-button[var-counter-cover]:active { box-shadow: none;}.var-counter--disabled { opacity: var(--counter-disabled-opacity); cursor: not-allowed;}.var-counter--disabled .var-hover-overlay { opacity: 0;}.var-counter--not-allowed { cursor: not-allowed !important;}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--counter-error-color);}
+:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-text-color: #fff; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-disabled); --counter-disabled-opacity: var(--opacity-disabled); --counter-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: color 0.25s, background-color 0.25s, opacity 0.25s;}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover],.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); color: var(--counter-button-text-color); border-radius: 50%; padding: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter__increment-button[var-counter-cover]:active,.var-counter__decrement-button[var-counter-cover]:active { box-shadow: none;}.var-counter--disabled { opacity: var(--counter-disabled-opacity); cursor: not-allowed;}.var-counter--disabled .var-hover-overlay { opacity: 0;}.var-counter--not-allowed { cursor: not-allowed !important;}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--counter-error-color);}

package/es/dialog/dialog.css

@@ -1 +1 @@
-:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size);}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}
+:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size);}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}

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-alpha.1686800314469'
+const version = '2.11.7'
 
 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-alpha.1686800314469'
+const version = '2.11.7'
 
 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);}