@varlet/ui 2.13.2 → 2.13.4-alpha.1690279122540

package/es/drag/Drag.mjs

@@ -54,13 +54,16 @@ var __sfc__ = defineComponent({
     });
     var dragged = ref(false);
     var enableTransition = ref(false);
+    var dragging = ref(false);
     var touching = false;
     var prevX = 0;
     var prevY = 0;
+    var draggingRunner = null;
     var handleTouchstart = event => {
       if (props.disabled) {
         return;
       }
+      draggingRunner && window.clearTimeout(draggingRunner);
       var {
         clientX,
         clientY
@@ -69,6 +72,7 @@ var __sfc__ = defineComponent({
       prevX = clientX;
       prevY = clientY;
       touching = true;
+      dragging.value = false;
     };
     var handleTouchmove = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(function* (event) {
@@ -78,6 +82,7 @@ var __sfc__ = defineComponent({
         event.preventDefault();
         enableTransition.value = false;
         dragged.value = true;
+        dragging.value = true;
         var {
           clientX,
           clientY
@@ -105,6 +110,9 @@ var __sfc__ = defineComponent({
       touching = false;
       enableTransition.value = true;
       attract();
+      draggingRunner = window.setTimeout(() => {
+        dragging.value = false;
+      });
     };
     var saveXY = () => {
       var {
@@ -237,8 +245,12 @@ var __sfc__ = defineComponent({
     var reset = () => {
       enableTransition.value = false;
       dragged.value = false;
+      dragging.value = false;
       x.value = 0;
       y.value = 0;
+      touching = false;
+      prevX = 0;
+      prevY = 0;
     };
     watch(() => props.boundary, toPxBoundary);
     onWindowResize(resize);
@@ -251,6 +263,7 @@ var __sfc__ = defineComponent({
       x,
       y,
       enableTransition,
+      dragging,
       n,
       classes,
       getAttrs,

package/es/fab/Fab.mjs

@@ -1,11 +1,11 @@
 import { mergeProps as _mergeProps, isVNode as _isVNode, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
 import Button from '../button/index.mjs';
 import Icon from '../icon/index.mjs';
-import { defineComponent, ref, Teleport, Transition, watch } from 'vue';
+import Drag from '../drag/index.mjs';
+import { defineComponent, ref, Transition, watch } from 'vue';
 import { useClickOutside } from '@varlet/use';
-import { call, createNamespace, flatFragment, useTeleport, useVModel } from '../utils/components.mjs';
+import { call, createNamespace, flatFragment, useVModel } from '../utils/components.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
-import { toNumber } from '@varlet/shared';
 import { props } from './props.mjs';
 
 
@@ -14,6 +14,7 @@ import { props } from './props.mjs';
 
 
 
+
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
@@ -32,10 +33,9 @@ export default defineComponent({
     } = _ref;
     var isActive = useVModel(props, 'active');
     var host = ref(null);
-    var {
-      disabled
-    } = useTeleport();
+    var dragRef = ref(null);
     var handleClick = (e, value, childrenLength) => {
+      var _dragRef$value;
       e.stopPropagation();
       if (props.trigger !== 'click' || props.disabled) {
         return;
@@ -44,6 +44,11 @@ export default defineComponent({
         call(props.onClick, isActive.value, e);
         return;
       }
+
+      // avoid trigger open function after dragging
+      if ((_dragRef$value = dragRef.value) != null && _dragRef$value.dragging) {
+        return;
+      }
       isActive.value = value;
       call(props.onClick, isActive.value, e);
       call(isActive.value ? props.onOpen : props.onClose);
@@ -76,8 +81,8 @@ export default defineComponent({
         "type": props.type,
         "color": props.color,
         "disabled": props.disabled,
-        "round": true,
-        "elevation": props.elevation
+        "elevation": props.elevation,
+        "round": true
       }, {
         default: () => [_createVNode(Icon, {
           "var-fab-cover": true,
@@ -89,61 +94,57 @@ export default defineComponent({
         }, null)]
       }), [[_vShow, props.show]]);
     };
-    var renderFab = () => {
+    watch(() => props.trigger, () => {
+      isActive.value = false;
+    });
+    watch(() => props.disabled, () => {
+      isActive.value = false;
+    });
+    watch(() => [props.position, props.fixed, props.top, props.bottom, props.left, props.right], () => {
+      var _dragRef$value2;
+      (_dragRef$value2 = dragRef.value) == null ? void 0 : _dragRef$value2.reset();
+    });
+    useClickOutside(host, 'click', handleClickOutside);
+    return () => {
       var _slot;
       var _call;
       var children = flatFragment((_call = call(slots.default)) != null ? _call : []);
-      return _createVNode("div", _mergeProps({
-        "class": classes(n(), n("--position-" + props.position), n("--direction-" + props.direction), [props.fixed, n('--fixed'), n('--absolute')], [props.safeArea, n('--safe-area')]),
+      return _createVNode(Drag, _mergeProps({
+        "ref": dragRef,
+        "class": classes(n("--position-" + props.position), [!props.fixed, n('--absolute')]),
         "style": {
-          zIndex: toNumber(props.zIndex),
           top: toSizeUnit(props.top),
           bottom: toSizeUnit(props.bottom),
           left: toSizeUnit(props.left),
           right: toSizeUnit(props.right)
         },
-        "ref": host,
-        "onClick": e => handleClick(e, !isActive.value, children.length),
-        "onMouseleave": () => handleMouse(false, children.length),
-        "onMouseenter": () => handleMouse(true, children.length)
-      }, attrs), [_createVNode(Transition, {
-        "name": n("--active-transition")
-      }, _isSlot(_slot = renderTrigger()) ? _slot : {
-        default: () => [_slot]
-      }), _createVNode(Transition, {
-        "name": n("--actions-transition-" + props.direction),
-        "onAfterEnter": props.onOpened,
-        "onAfterLeave": props.onClosed
-      }, {
-        default: () => [_withDirectives(_createVNode("div", {
-          "class": n('actions'),
-          "onClick": e => e.stopPropagation()
-        }, [children.map(child => _createVNode("div", {
-          "class": n('action')
-        }, [child]))]), [[_vShow, props.show && isActive.value && children.length]])]
-      })]);
-    };
-    watch(() => props.trigger, () => {
-      isActive.value = false;
-    });
-    watch(() => props.disabled, () => {
-      isActive.value = false;
-    });
-    useClickOutside(host, 'click', handleClickOutside);
-    return () => {
-      var {
-        teleport
-      } = props;
-      if (teleport) {
-        var _slot2;
-        return _createVNode(Teleport, {
-          "to": teleport,
-          "disabled": disabled.value
-        }, _isSlot(_slot2 = renderFab()) ? _slot2 : {
-          default: () => [_slot2]
-        });
-      }
-      return renderFab();
+        "zIndex": props.zIndex,
+        "teleport": props.teleport,
+        "disabled": props.disabled || !props.drag || !props.fixed
+      }, attrs), {
+        default: () => [_createVNode("div", {
+          "class": classes(n(), n("--direction-" + props.direction), [props.safeArea, n('--safe-area')]),
+          "ref": host,
+          "onClick": e => handleClick(e, !isActive.value, children.length),
+          "onMouseleave": () => handleMouse(false, children.length),
+          "onMouseenter": () => handleMouse(true, children.length)
+        }, [_createVNode(Transition, {
+          "name": n("--active-transition")
+        }, _isSlot(_slot = renderTrigger()) ? _slot : {
+          default: () => [_slot]
+        }), _createVNode(Transition, {
+          "name": n("--actions-transition-" + props.direction),
+          "onAfterEnter": props.onOpened,
+          "onAfterLeave": props.onClosed
+        }, {
+          default: () => [_withDirectives(_createVNode("div", {
+            "class": n('actions'),
+            "onClick": e => e.stopPropagation()
+          }, [children.map(child => _createVNode("div", {
+            "class": n('action')
+          }, [child]))]), [[_vShow, props.show && isActive.value && children.length]])]
+        })])]
+      });
     };
   }
 });

package/es/fab/props.mjs

@@ -18,6 +18,10 @@ export var props = {
     type: Boolean,
     default: true
   },
+  drag: {
+    type: Boolean,
+    default: false
+  },
   type: {
     type: String,
     default: 'primary',
@@ -88,7 +92,7 @@ export var props = {
     default: false
   },
   teleport: {
-    type: String
+    type: [String, Object]
   },
   onClick: defineListenerProp(),
   onOpen: defineListenerProp(),

package/es/fab/style/index.mjs

@@ -4,4 +4,5 @@ import '../../ripple/ripple.css'
 import '../../icon/icon.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
+import '../../drag/drag.css'
 import '../fab.css'

package/es/index.bundle.mjs

@@ -244,7 +244,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.13.2'
+const version = '2.13.4-alpha.1690279122540'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -162,7 +162,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.13.2'
+const version = '2.13.4-alpha.1690279122540'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/switch/Switch.mjs

@@ -1,12 +1,12 @@
+import VarFormDetails from '../form-details/index.mjs';
+import Ripple from '../ripple/index.mjs';
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
+import Hover from '../hover/index.mjs';
 import { defineComponent, computed, nextTick } from 'vue';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { multiplySizeUnit } from '../utils/elements.mjs';
 import { useForm } from '../form/provide.mjs';
-import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
-import Hover from '../hover/index.mjs';
 import { props } from './props.mjs';
-import VarFormDetails from '../form-details/index.mjs';
-import Ripple from '../ripple/index.mjs';
 var {
   n,
   classes
@@ -48,8 +48,8 @@ function __render__(_ctx, _cache) {
     key: 0,
     class: _normalizeClass(_ctx.n('loading')),
     style: _normalizeStyle({
-      width: _ctx.multiplySizeUnit(_ctx.radius, 2),
-      height: _ctx.multiplySizeUnit(_ctx.radius, 2)
+      width: _ctx.radius,
+      height: _ctx.radius
     })
   }, _hoisted_2, 6 /* CLASS, STYLE */)) : _createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */), _createVNode(_component_var_hover_overlay, {
     hovering: _ctx.hovering
@@ -122,7 +122,7 @@ var __sfc__ = defineComponent({
         }
       };
     });
-    var radius = computed(() => multiplySizeUnit(props.size, 0.4));
+    var radius = computed(() => multiplySizeUnit(props.size, 0.8));
     var switchActive = event => {
       var {
         onClick,

package/es/utils/elements.mjs

@@ -213,7 +213,7 @@ export var multiplySizeUnit = function (value, quantity) {
     return undefined;
   }
   var legalSize = toSizeUnit(value);
-  var unit = legalSize.match(/(vh|%|rem|px|vw|vmin|vmax)$/)[0];
+  var unit = legalSize.match(/(vh|%|r?em|px|vw|vmin|vmax)$/)[0];
   return "" + parseFloat(legalSize) * quantity + unit;
 };
 export function requestAnimationFrame(fn) {