@varlet/ui 2.12.3 → 2.13.0-alpha.1689346411483

package/es/drag/Drag.mjs

@@ -0,0 +1,257 @@
+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); }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+import { defineComponent, ref, reactive, watch } from 'vue';
+import { props } from './props.mjs';
+import { createNamespace } from '../utils/components.mjs';
+import { getRect, toPxNum } from '../utils/elements.mjs';
+import { onSmartMounted, onWindowResize } from '@varlet/use';
+import { clamp } from '@varlet/shared';
+var {
+  n,
+  classes
+} = createNamespace('drag');
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, createElementVNode as _createElementVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createBlock(_Teleport, {
+    to: _ctx.teleport
+  }, [_createElementVNode("div", _mergeProps({
+    ref: "drag",
+    class: _ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.enableTransition, _ctx.n('--transition')]),
+    style: {
+      'z-index': _ctx.zIndex
+    },
+    onTouchstart: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
+    }),
+    onTouchmove: _cache[1] || (_cache[1] = function () {
+      return _ctx.handleTouchmove && _ctx.handleTouchmove(...arguments);
+    }),
+    onTouchend: _cache[2] || (_cache[2] = function () {
+      return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
+    }),
+    onTouchcancel: _cache[3] || (_cache[3] = function () {
+      return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
+    })
+  }, _ctx.getAttrs()), [_renderSlot(_ctx.$slots, "default")], 16 /* FULL_PROPS */)], 8 /* PROPS */, ["to"]);
+}
+var __sfc__ = defineComponent({
+  name: 'VarDrag',
+  inheritAttrs: false,
+  props,
+  setup(props, _ref) {
+    var {
+      attrs
+    } = _ref;
+    var drag = ref(null);
+    var x = ref(0);
+    var y = ref(0);
+    var boundary = reactive({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    });
+    var mounted = ref(false);
+    var enableTransition = ref(false);
+    var touching = false;
+    var prevX = 0;
+    var prevY = 0;
+    var saveXY = () => {
+      var {
+        left,
+        top
+      } = getOffset();
+      x.value = left;
+      y.value = top;
+    };
+    var handleTouchstart = event => {
+      if (props.disabled) {
+        return;
+      }
+      var {
+        clientX,
+        clientY
+      } = event.touches[0];
+      saveXY();
+      prevX = clientX;
+      prevY = clientY;
+      touching = true;
+    };
+    var handleTouchmove = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(function* (event) {
+        if (!touching || props.disabled) {
+          return;
+        }
+        event.preventDefault();
+        enableTransition.value = false;
+        var {
+          clientX,
+          clientY
+        } = event.touches[0];
+        var deltaX = clientX - prevX;
+        var deltaY = clientY - prevY;
+        prevX = clientX;
+        prevY = clientY;
+        if (props.direction.includes('x')) {
+          x.value += deltaX;
+        }
+        if (props.direction.includes('y')) {
+          y.value += deltaY;
+        }
+        clampToBoundary();
+      });
+      return function handleTouchmove(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var handleTouchend = () => {
+      if (props.disabled) {
+        return;
+      }
+      touching = false;
+      attract();
+    };
+    var getOffset = () => {
+      var dragRect = getRect(drag.value);
+      var windowRect = getRect(window);
+      var top = dragRect.top - windowRect.top;
+      var bottom = windowRect.bottom - dragRect.bottom;
+      var left = dragRect.left - windowRect.left;
+      var right = windowRect.right - dragRect.right;
+      var {
+        width,
+        height
+      } = dragRect;
+      var {
+        width: windowWidth,
+        height: windowHeight
+      } = windowRect;
+      return {
+        top,
+        bottom,
+        left,
+        right,
+        width,
+        height,
+        halfWidth: width / 2,
+        halfHeight: height / 2,
+        windowWidth,
+        windowHeight
+      };
+    };
+    var getRange = () => {
+      var offset = getOffset();
+      var x1 = boundary.left;
+      var x2 = offset.windowWidth - boundary.right - offset.width;
+      var y1 = boundary.top;
+      var y2 = offset.windowHeight - boundary.bottom - offset.height;
+      return {
+        minX: x1,
+        minY: y1,
+        // fallback the drag element overflows boundary
+        maxX: x1 < x2 ? x2 : x1,
+        maxY: y1 < y2 ? y2 : y1
+      };
+    };
+    var attract = () => {
+      if (props.attraction == null) {
+        return;
+      }
+      enableTransition.value = true;
+      var {
+        halfWidth,
+        halfHeight,
+        top,
+        bottom,
+        left,
+        right
+      } = getOffset();
+      var {
+        minX,
+        minY,
+        maxX,
+        maxY
+      } = getRange();
+      var leftDistance = left + halfWidth - boundary.left;
+      var rightDistance = right + halfWidth - boundary.right;
+      var topDistance = top + halfHeight - boundary.top;
+      var bottomDistance = bottom + halfHeight - boundary.bottom;
+      var nearLeft = leftDistance <= rightDistance;
+      var nearTop = topDistance <= bottomDistance;
+      if (props.attraction.includes('x')) {
+        x.value = nearLeft ? minX : maxX;
+      }
+      if (props.attraction.includes('y')) {
+        y.value = nearTop ? minY : maxY;
+      }
+    };
+    var clampToBoundary = () => {
+      if (props.disabled) {
+        return;
+      }
+      var {
+        minX,
+        minY,
+        maxX,
+        maxY
+      } = getRange();
+      x.value = clamp(x.value, minX, maxX);
+      y.value = clamp(y.value, minY, maxY);
+    };
+    var toPxBoundary = () => {
+      var {
+        top = 0,
+        bottom = 0,
+        left = 0,
+        right = 0
+      } = props.boundary;
+      boundary.top = toPxNum(top);
+      boundary.bottom = toPxNum(bottom);
+      boundary.left = toPxNum(left);
+      boundary.right = toPxNum(right);
+    };
+    var getAttrs = () => {
+      var _ref3;
+      var style = (_ref3 = attrs.style) != null ? _ref3 : {};
+      return _extends({}, attrs, {
+        style: _extends({}, style, {
+          // when the drag element is mounted for the first time, the inset should be cleared to avoid affecting translateX and translateY.
+          top: mounted.value ? 0 : style.top,
+          left: mounted.value ? 0 : style.left,
+          right: mounted.value ? 'auto' : style.right,
+          bottom: mounted.value ? 'auto' : style.bottom,
+          transform: mounted.value ? "translate(" + x.value + "px, " + y.value + "px)" : style.transform
+        })
+      });
+    };
+
+    // expose
+    var resize = () => {
+      toPxBoundary();
+      saveXY();
+      clampToBoundary();
+    };
+    watch(() => props.boundary, resize);
+    onWindowResize(resize);
+    onSmartMounted(() => {
+      resize();
+      mounted.value = true;
+    });
+    return {
+      drag,
+      x,
+      y,
+      enableTransition,
+      n,
+      classes,
+      getAttrs,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+      resize
+    };
+  }
+});
+__sfc__.render = __render__;
+export default __sfc__;

package/es/drag/drag.css

@@ -0,0 +1 @@
+.var-drag { position: fixed; display: inline-flex;}.var-drag--transition { transition: transform 0.2s linear;}

package/es/drag/index.mjs

@@ -0,0 +1,7 @@
+import Drag from './Drag.mjs';
+Drag.install = function (app) {
+  app.component(Drag.name, Drag);
+};
+export { props as dragProps } from './props.mjs';
+export var _DragComponent = Drag;
+export default Drag;

package/es/drag/props.mjs

@@ -0,0 +1,30 @@
+export var props = {
+  direction: {
+    type: String,
+    default: 'xy'
+  },
+  attraction: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  boundary: {
+    type: Object,
+    default: () => ({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    })
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 90
+  },
+  teleport: {
+    type: [String, Object],
+    default: 'body'
+  }
+};

package/es/drag/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../drag.css'
+import '../DragSfc.css'

package/es/form-details/FormDetails.mjs

@@ -4,7 +4,7 @@ import { props } from './props.mjs';
 var {
   n
 } = createNamespace('form-details');
-import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 var _hoisted_1 = {
   key: 0
@@ -16,7 +16,7 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createBlock(_Transition, {
     name: _ctx.n()
   }, {
-    default: _withCtx(() => [_ctx.errorMessage || _ctx.extraMessage ? (_openBlock(), _createElementBlock("div", {
+    default: _withCtx(() => [_ctx.errorMessage || _ctx.extraMessage || _ctx.$slots['extra-message'] ? (_openBlock(), _createElementBlock("div", {
       key: 0,
       class: _normalizeClass(_ctx.n())
     }, [_createElementVNode("div", {
@@ -31,10 +31,10 @@ function __render__(_ctx, _cache) {
     }, [_createVNode(_Transition, {
       name: _ctx.n('message')
     }, {
-      default: _withCtx(() => [_ctx.extraMessage ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString(_ctx.extraMessage), 1 /* TEXT */)) : _createCommentVNode("v-if", true)]),
-      _: 1 /* STABLE */
+      default: _withCtx(() => [_renderSlot(_ctx.$slots, "extra-message", {}, () => [_ctx.extraMessage ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString(_ctx.extraMessage), 1 /* TEXT */)) : _createCommentVNode("v-if", true)])]),
+      _: 3 /* FORWARDED */
     }, 8 /* PROPS */, ["name"])], 2 /* CLASS */)], 2 /* CLASS */)) : _createCommentVNode("v-if", true)]),
-    _: 1 /* STABLE */
+    _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["name"]);
 }
 var __sfc__ = defineComponent({

package/es/index.bundle.mjs

@@ -24,6 +24,7 @@ import Counter from './counter/index.mjs'
 import DatePicker from './date-picker/index.mjs'
 import Dialog from './dialog/index.mjs'
 import Divider from './divider/index.mjs'
+import Drag from './drag/index.mjs'
 import Ellipsis from './ellipsis/index.mjs'
 import Fab from './fab/index.mjs'
 import Form from './form/index.mjs'
@@ -105,6 +106,7 @@ export * from './counter/index.mjs'
 export * from './date-picker/index.mjs'
 export * from './dialog/index.mjs'
 export * from './divider/index.mjs'
+export * from './drag/index.mjs'
 export * from './ellipsis/index.mjs'
 export * from './fab/index.mjs'
 export * from './form/index.mjs'
@@ -186,6 +188,7 @@ import './counter/style/index.mjs'
 import './date-picker/style/index.mjs'
 import './dialog/style/index.mjs'
 import './divider/style/index.mjs'
+import './drag/style/index.mjs'
 import './ellipsis/style/index.mjs'
 import './fab/style/index.mjs'
 import './form/style/index.mjs'
@@ -241,7 +244,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.12.3'
+const version = '2.13.0-alpha.1689346411483'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -270,6 +273,7 @@ function install(app) {
   DatePicker.install && app.use(DatePicker)
   Dialog.install && app.use(Dialog)
   Divider.install && app.use(Divider)
+  Drag.install && app.use(Drag)
   Ellipsis.install && app.use(Ellipsis)
   Fab.install && app.use(Fab)
   Form.install && app.use(Form)
@@ -355,6 +359,7 @@ export {
   DatePicker,
   Dialog,
   Divider,
+  Drag,
   Ellipsis,
   Fab,
   Form,
@@ -440,6 +445,7 @@ export default {
   DatePicker,
   Dialog,
   Divider,
+  Drag,
   Ellipsis,
   Fab,
   Form,

package/es/index.mjs

@@ -24,6 +24,7 @@ import Counter from './counter/index.mjs'
 import DatePicker from './date-picker/index.mjs'
 import Dialog from './dialog/index.mjs'
 import Divider from './divider/index.mjs'
+import Drag from './drag/index.mjs'
 import Ellipsis from './ellipsis/index.mjs'
 import Fab from './fab/index.mjs'
 import Form from './form/index.mjs'
@@ -105,6 +106,7 @@ export * from './counter/index.mjs'
 export * from './date-picker/index.mjs'
 export * from './dialog/index.mjs'
 export * from './divider/index.mjs'
+export * from './drag/index.mjs'
 export * from './ellipsis/index.mjs'
 export * from './fab/index.mjs'
 export * from './form/index.mjs'
@@ -160,7 +162,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.12.3'
+const version = '2.13.0-alpha.1689346411483'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -189,6 +191,7 @@ function install(app) {
   DatePicker.install && app.use(DatePicker)
   Dialog.install && app.use(Dialog)
   Divider.install && app.use(Divider)
+  Drag.install && app.use(Drag)
   Ellipsis.install && app.use(Ellipsis)
   Fab.install && app.use(Fab)
   Form.install && app.use(Form)
@@ -274,6 +277,7 @@ export {
   DatePicker,
   Dialog,
   Divider,
+  Drag,
   Ellipsis,
   Fab,
   Form,
@@ -359,6 +363,7 @@ export default {
   DatePicker,
   Dialog,
   Divider,
+  Drag,
   Ellipsis,
   Fab,
   Form,

package/es/input/Input.mjs

@@ -144,7 +144,13 @@ function __render__(_ctx, _cache) {
     "error-message": _ctx.errorMessage,
     "extra-message": _ctx.maxlengthText,
     onMousedown: _cache[14] || (_cache[14] = _withModifiers(() => {}, ["stop"]))
-  }, null, 8 /* PROPS */, ["error-message", "extra-message"])], 34 /* CLASS, HYDRATE_EVENTS */);
+  }, _createSlots({
+    _: 2 /* DYNAMIC */
+  }, [_ctx.$slots['extra-message'] ? {
+    name: "extra-message",
+    fn: _withCtx(() => [_renderSlot(_ctx.$slots, "extra-message")]),
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["error-message", "extra-message"])], 34 /* CLASS, HYDRATE_EVENTS */);
 }
 
 var __sfc__ = defineComponent({

package/es/popup/props.mjs

@@ -46,7 +46,7 @@ export var props = {
     default: false
   },
   teleport: {
-    type: String,
+    type: [String, Object],
     default: 'body'
   },
   onOpen: defineListenerProp(),

package/es/slider/Slider.mjs

@@ -21,7 +21,7 @@ function __render__(_ctx, _cache) {
   var _component_var_form_details = _resolveComponent("var-form-details");
   var _directive_hover = _resolveDirective("hover");
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.n(_ctx.direction))
+    class: _normalizeClass(_ctx.classes(_ctx.n(_ctx.direction), _ctx.n('$--box')))
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(_ctx.direction + "-block"), [_ctx.isDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n(_ctx.direction + "--error")])),
     ref: "sliderEl",

package/es/snackbar/props.mjs

@@ -14,26 +14,21 @@ export var props = {
     type: String,
     validator: typeValidator
   },
-  // snackbar显示的位置
   position: {
     type: String,
     default: 'top',
     validator: positionValidator
   },
-  // content内容
   content: {
     type: [String, Function, Object]
   },
-  // 为snackbar content添加自定义类名
   contentClass: {
     type: String
   },
-  // snackbar 持续时间
   duration: {
     type: Number,
     default: 3000
   },
-  // 是否将消息条内容堆叠在操作（按钮）之上
   vertical: {
     type: Boolean,
     default: false
@@ -44,33 +39,25 @@ export var props = {
   loadingColor: _extends({}, pickProps(loadingProps, 'color'), {
     default: 'currentColor'
   }),
-  // 是否禁止滚动穿透
   lockScroll: {
     type: Boolean,
     default: false
   },
-  // 控制组件可见还是隐藏
   show: {
     type: Boolean,
     default: false
   },
-  // teleport
   teleport: {
-    type: String,
+    type: [String, Object],
     default: 'body'
   },
-  // 是否禁止点击背景
   forbidClick: {
     type: Boolean,
     default: false
   },
-  // 打开时的回调函数
   onOpen: defineListenerProp(),
-  // 打开动画结束时的回调
   onOpened: defineListenerProp(),
-  // 关闭时的回调函数
   onClose: defineListenerProp(),
-  // 关闭动画结束时的回调
   onClosed: defineListenerProp(),
   'onUpdate:show': defineListenerProp(),
   _update: {