@varlet/ui 2.13.2 → 2.13.3

package/highlight/web-types.en-US.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.13.2",
+  "version": "2.13.3",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -2533,6 +2533,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "drag",
+              "description": "Whether to enable drag",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "type",
               "description": "type, optional values are `default` `primary` `info` `success` `warning` `danger`",
@@ -2625,7 +2634,7 @@
             },
             {
               "name": "fixed",
-              "description": "Whether to use fixed positioning, set to `false` to enable absolute positioning",
+              "description": "Whether to use fixed positioning, set to `false` to enable absolute positioning (absolute positioning prohibited from dragging)",
               "default": "true",
               "value": {
                 "type": "boolean",

package/highlight/web-types.zh-CN.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.13.2",
+  "version": "2.13.3",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -2692,6 +2692,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "drag",
+              "description": "是否开启拖拽",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "type",
               "description": "类型，可选值为 `default` `primary` `info` `success` `warning` `danger`",
@@ -2784,7 +2793,7 @@
             },
             {
               "name": "fixed",
-              "description": "是否使用固定定位，设置为 `false` 可开启绝对定位",
+              "description": "是否使用固定定位，设置为 `false` 可开启绝对定位（绝对定位无法使用拖拽）",
               "default": "true",
               "value": {
                 "type": "boolean",

package/lib/varlet.cjs.js

@@ -347,7 +347,7 @@ var multiplySizeUnit = function(value, quantity) {
     return void 0;
   }
   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;
 };
 function requestAnimationFrame(fn2) {
@@ -11377,13 +11377,16 @@ var __sfc__$N = vue.defineComponent({
     });
     var dragged = vue.ref(false);
     var enableTransition = vue.ref(false);
+    var dragging = vue.ref(false);
     var touching = false;
     var prevX = 0;
     var prevY = 0;
+    var draggingRunner = null;
     var handleTouchstart = (event) => {
       if (props2.disabled) {
         return;
       }
+      draggingRunner && window.clearTimeout(draggingRunner);
       var {
         clientX,
         clientY
@@ -11392,6 +11395,7 @@ var __sfc__$N = vue.defineComponent({
       prevX = clientX;
       prevY = clientY;
       touching = true;
+      dragging.value = false;
     };
     var handleTouchmove = /* @__PURE__ */ function() {
       var _ref2 = _asyncToGenerator$a(function* (event) {
@@ -11401,6 +11405,7 @@ var __sfc__$N = vue.defineComponent({
         event.preventDefault();
         enableTransition.value = false;
         dragged.value = true;
+        dragging.value = true;
         var {
           clientX,
           clientY
@@ -11428,6 +11433,9 @@ var __sfc__$N = vue.defineComponent({
       touching = false;
       enableTransition.value = true;
       attract();
+      draggingRunner = window.setTimeout(() => {
+        dragging.value = false;
+      });
     };
     var saveXY = () => {
       var {
@@ -11556,8 +11564,12 @@ var __sfc__$N = vue.defineComponent({
     var reset = () => {
       enableTransition.value = false;
       dragged.value = false;
+      dragging.value = false;
       x.value = 0;
       y.value = 0;
+      touching = false;
+      prevX = 0;
+      prevY = 0;
     };
     vue.watch(() => props2.boundary, toPxBoundary);
     onWindowResize(resize);
@@ -11570,6 +11582,7 @@ var __sfc__$N = vue.defineComponent({
       x,
       y,
       enableTransition,
+      dragging,
       n: n$M,
       classes: classes$E,
       getAttrs,
@@ -13533,6 +13546,10 @@ var props$G = {
     type: Boolean,
     default: true
   },
+  drag: {
+    type: Boolean,
+    default: false
+  },
   type: {
     type: String,
     default: "primary",
@@ -13603,7 +13620,7 @@ var props$G = {
     default: false
   },
   teleport: {
-    type: String
+    type: [String, Object]
   },
   onClick: defineListenerProp(),
   onOpen: defineListenerProp(),
@@ -13630,10 +13647,9 @@ const Fab = vue.defineComponent({
     } = _ref;
     var isActive = useVModel(props2, "active");
     var host = vue.ref(null);
-    var {
-      disabled
-    } = useTeleport();
+    var dragRef = vue.ref(null);
     var handleClick = (e, value, childrenLength) => {
+      var _dragRef$value;
       e.stopPropagation();
       if (props2.trigger !== "click" || props2.disabled) {
         return;
@@ -13642,6 +13658,9 @@ const Fab = vue.defineComponent({
         call(props2.onClick, isActive.value, e);
         return;
       }
+      if ((_dragRef$value = dragRef.value) != null && _dragRef$value.dragging) {
+        return;
+      }
       isActive.value = value;
       call(props2.onClick, isActive.value, e);
       call(isActive.value ? props2.onOpen : props2.onClose);
@@ -13674,8 +13693,8 @@ const Fab = vue.defineComponent({
         "type": props2.type,
         "color": props2.color,
         "disabled": props2.disabled,
-        "round": true,
-        "elevation": props2.elevation
+        "elevation": props2.elevation,
+        "round": true
       }, {
         default: () => [vue.createVNode(Icon, {
           "var-fab-cover": true,
@@ -13687,61 +13706,57 @@ const Fab = vue.defineComponent({
         }, null)]
       }), [[vue.vShow, props2.show]]);
     };
-    var renderFab = () => {
+    vue.watch(() => props2.trigger, () => {
+      isActive.value = false;
+    });
+    vue.watch(() => props2.disabled, () => {
+      isActive.value = false;
+    });
+    vue.watch(() => [props2.position, props2.fixed, props2.top, props2.bottom, props2.left, props2.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 vue.createVNode("div", vue.mergeProps({
-        "class": classes$B(n$J(), n$J("--position-" + props2.position), n$J("--direction-" + props2.direction), [props2.fixed, n$J("--fixed"), n$J("--absolute")], [props2.safeArea, n$J("--safe-area")]),
+      return vue.createVNode(Drag, vue.mergeProps({
+        "ref": dragRef,
+        "class": classes$B(n$J("--position-" + props2.position), [!props2.fixed, n$J("--absolute")]),
         "style": {
-          zIndex: toNumber(props2.zIndex),
           top: toSizeUnit(props2.top),
           bottom: toSizeUnit(props2.bottom),
           left: toSizeUnit(props2.left),
           right: toSizeUnit(props2.right)
         },
-        "ref": host,
-        "onClick": (e) => handleClick(e, !isActive.value, children.length),
-        "onMouseleave": () => handleMouse(false, children.length),
-        "onMouseenter": () => handleMouse(true, children.length)
-      }, attrs), [vue.createVNode(vue.Transition, {
-        "name": n$J("--active-transition")
-      }, _isSlot$2(_slot = renderTrigger()) ? _slot : {
-        default: () => [_slot]
-      }), vue.createVNode(vue.Transition, {
-        "name": n$J("--actions-transition-" + props2.direction),
-        "onAfterEnter": props2.onOpened,
-        "onAfterLeave": props2.onClosed
-      }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": n$J("actions"),
-          "onClick": (e) => e.stopPropagation()
-        }, [children.map((child) => vue.createVNode("div", {
-          "class": n$J("action")
-        }, [child]))]), [[vue.vShow, props2.show && isActive.value && children.length]])]
-      })]);
-    };
-    vue.watch(() => props2.trigger, () => {
-      isActive.value = false;
-    });
-    vue.watch(() => props2.disabled, () => {
-      isActive.value = false;
-    });
-    useClickOutside(host, "click", handleClickOutside);
-    return () => {
-      var {
-        teleport
-      } = props2;
-      if (teleport) {
-        var _slot2;
-        return vue.createVNode(vue.Teleport, {
-          "to": teleport,
-          "disabled": disabled.value
-        }, _isSlot$2(_slot2 = renderFab()) ? _slot2 : {
-          default: () => [_slot2]
-        });
-      }
-      return renderFab();
+        "zIndex": props2.zIndex,
+        "teleport": props2.teleport,
+        "disabled": props2.disabled || !props2.drag || !props2.fixed
+      }, attrs), {
+        default: () => [vue.createVNode("div", {
+          "class": classes$B(n$J(), n$J("--direction-" + props2.direction), [props2.safeArea, n$J("--safe-area")]),
+          "ref": host,
+          "onClick": (e) => handleClick(e, !isActive.value, children.length),
+          "onMouseleave": () => handleMouse(false, children.length),
+          "onMouseenter": () => handleMouse(true, children.length)
+        }, [vue.createVNode(vue.Transition, {
+          "name": n$J("--active-transition")
+        }, _isSlot$2(_slot = renderTrigger()) ? _slot : {
+          default: () => [_slot]
+        }), vue.createVNode(vue.Transition, {
+          "name": n$J("--actions-transition-" + props2.direction),
+          "onAfterEnter": props2.onOpened,
+          "onAfterLeave": props2.onClosed
+        }, {
+          default: () => [vue.withDirectives(vue.createVNode("div", {
+            "class": n$J("actions"),
+            "onClick": (e) => e.stopPropagation()
+          }, [children.map((child) => vue.createVNode("div", {
+            "class": n$J("action")
+          }, [child]))]), [[vue.vShow, props2.show && isActive.value && children.length]])]
+        })])]
+      });
     };
   }
 });
@@ -25116,7 +25131,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.13.2";
+const version = "2.13.3";
 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.13.2",
+  "version": "2.13.3",
   "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/icons": "2.13.2",
-    "@varlet/use": "2.13.2",
-    "@varlet/shared": "2.13.2"
+    "@varlet/icons": "2.13.3",
+    "@varlet/shared": "2.13.3",
+    "@varlet/use": "2.13.3"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.3.4",
@@ -63,8 +63,8 @@
     "typescript": "^5.1.5",
     "vue": "3.3.4",
     "vue-router": "4.2.0",
-    "@varlet/cli": "2.13.2",
-    "@varlet/touch-emulator": "2.13.2"
+    "@varlet/cli": "2.13.3",
+    "@varlet/touch-emulator": "2.13.3"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/fab.d.ts

@@ -18,6 +18,7 @@ export interface FabTriggerData {
 export interface FabProps extends BasicAttributes {
   active?: boolean
   show?: boolean
+  drag?: boolean
   type?: FabType
   fixed?: boolean
   position?: FabPosition