@varlet/ui 2.13.0-alpha.1689346411483 → 2.13.0

package/es/divider/Divider.mjs

@@ -1,7 +1,6 @@
-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, computed, reactive, onUpdated, toRefs } from 'vue';
+import { defineComponent, computed, ref, onUpdated } from 'vue';
 import { toSizeUnit } from '../utils/elements.mjs';
-import { isBoolean, toNumber } from '@varlet/shared';
+import { toNumber, isBoolean } from '@varlet/shared';
 import { props } from './props.mjs';
 import { createNamespace } from '../utils/components.mjs';
 import { onSmartMounted } from '@varlet/use';
@@ -12,12 +11,14 @@ var {
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle } from "vue";
 function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.vertical, _ctx.n('--vertical')], [_ctx.withText, _ctx.n('--with-text')], [_ctx.isInset, _ctx.n('--inset')], [_ctx.dashed, _ctx.n('--dashed')], [_ctx.hairline, _ctx.n('--hairline')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.vertical, _ctx.n('--vertical')], [_ctx.withText, _ctx.n('--with-text')], [_ctx.withPresetInset, _ctx.n('--inset')], [_ctx.dashed, _ctx.n('--dashed')], [_ctx.hairline, _ctx.n('--hairline')])),
     style: _normalizeStyle(_ctx.style)
-  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("span", {
+  }, [!_ctx.vertical ? _renderSlot(_ctx.$slots, "default", {
+    key: 0
+  }, () => [_ctx.description ? (_openBlock(), _createElementBlock("span", {
     key: 0,
     class: _normalizeClass(_ctx.n('text'))
-  }, _toDisplayString(_ctx.description), 3 /* TEXT, CLASS */)) : _createCommentVNode("v-if", true)])], 6 /* CLASS, STYLE */);
+  }, _toDisplayString(_ctx.description), 3 /* TEXT, CLASS */)) : _createCommentVNode("v-if", true)]) : _createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
 }
 
 var __sfc__ = defineComponent({
@@ -27,33 +28,41 @@ var __sfc__ = defineComponent({
     var {
       slots
     } = _ref;
-    var state = reactive({
-      withText: false
+    var withText = ref(false);
+    var withPresetInset = computed(() => {
+      // the inset is only effective in horizontal mode
+      var {
+        vertical,
+        inset
+      } = props;
+      return !vertical && inset === true;
     });
-    var isInset = computed(() => isBoolean(props.inset) ? props.inset : true);
     var style = computed(() => {
       var {
         inset,
         vertical,
         margin
       } = props;
-      var baseStyle = {
-        margin
-      };
-      if (isBoolean(inset) || inset === 0) {
-        return _extends({}, baseStyle);
+      if (isBoolean(inset) || vertical) {
+        return {
+          margin
+        };
       }
       var _inset = toNumber(inset);
       var absInsetWithUnit = Math.abs(_inset) + (inset + '').replace(_inset + '', '');
-      return vertical ? _extends({}, baseStyle, {
-        height: "calc(80% - " + toSizeUnit(absInsetWithUnit) + ")"
-      }) : _extends({}, baseStyle, {
+      return {
+        margin,
         width: "calc(100% - " + toSizeUnit(absInsetWithUnit) + ")",
         left: _inset > 0 ? toSizeUnit(absInsetWithUnit) : toSizeUnit(0)
-      });
+      };
     });
     var checkHasText = () => {
-      state.withText = Boolean(slots.default) || Boolean(props.description);
+      // the default slot or description is only effective in horizontal mode
+      var {
+        description,
+        vertical
+      } = props;
+      withText.value = (slots.default || description != null) && !vertical;
     };
     onSmartMounted(() => {
       checkHasText();
@@ -61,13 +70,13 @@ var __sfc__ = defineComponent({
     onUpdated(() => {
       checkHasText();
     });
-    return _extends({
+    return {
       n,
-      classes
-    }, toRefs(state), {
+      classes,
+      withText,
       style,
-      isInset
-    });
+      withPresetInset
+    };
   }
 });
 __sfc__.render = __render__;

package/es/divider/divider.css

@@ -1 +1 @@
-:root { --divider-color: rgba(0, 0, 0, 0.12); --divider-text-color: #888; --divider-text-margin: 8px 0; --divider-text-padding: 0 8px; --divider-inset: 72px; --divider-vertical-inset: 8px;}.var-divider { position: relative; width: 100%; height: 0; border: none; border-top: 1px solid var(--divider-color); margin: var(--divider-text-margin); font-size: var(--font-size-md); color: var(--divider-text-color);}.var-divider--vertical { width: 0; height: 80%; margin: auto var(--divider-text-margin); padding: var(--divider-text-margin); border-top: none; border-left: 1px solid var(--divider-color);}.var-divider--inset { width: calc(100% - var(--divider-inset)); left: var(--divider-inset);}.var-divider--vertical.var-divider--inset { width: 0; left: unset; height: calc(80% - var(--divider-vertical-inset));}.var-divider__text { display: inline-block; padding: var(--divider-text-padding);}.var-divider--with-text { background-color: transparent; height: fit-content; display: flex; align-items: center; justify-content: center; border: none;}.var-divider--with-text::before,.var-divider--with-text::after { display: inline-block; content: ''; flex: 1; height: 0; border-top: 1px solid var(--divider-color);}.var-divider--dashed { border-top-style: dashed;}.var-divider--dashed.var-divider--vertical { border-top: none; border-left-style: dashed;}.var-divider--hairline { transform: scaleY(0.5);}.var-divider--hairline.var-divider--with-text { transform: none;}.var-divider--hairline.var-divider--with-text::before,.var-divider--hairline.var-divider--with-text::after { transform: scaleY(0.5);}.var-divider--hairline.var-divider--vertical { transform: scaleX(0.5);}
+:root { --divider-color: rgba(0, 0, 0, 0.12); --divider-text-color: #888; --divider-text-margin: 8px 0; --divider-text-padding: 0 8px; --divider-inset: 72px;}.var-divider { position: relative; width: 100%; height: 0; border: none; border-top: 1px solid var(--divider-color); margin: var(--divider-text-margin); font-size: var(--font-size-md); color: var(--divider-text-color);}.var-divider--vertical { width: 0; height: auto; align-self: stretch; margin: 0 var(--divider-text-margin); border-top: none; border-left: 1px solid var(--divider-color);}.var-divider--inset { width: calc(100% - var(--divider-inset)); left: var(--divider-inset);}.var-divider__text { display: inline-block; padding: var(--divider-text-padding);}.var-divider--with-text { background-color: transparent; height: fit-content; display: flex; align-items: center; justify-content: center; border: none;}.var-divider--with-text::before,.var-divider--with-text::after { display: inline-block; content: ''; flex: 1; height: 0; border-top: 1px solid var(--divider-color);}.var-divider--dashed { border-top-style: dashed;}.var-divider--dashed.var-divider--vertical { border-top: none; border-left-style: dashed;}.var-divider--hairline { transform: scaleY(0.5);}.var-divider--hairline.var-divider--with-text { transform: none;}.var-divider--hairline.var-divider--with-text::before,.var-divider--hairline.var-divider--with-text::after { transform: scaleY(0.5);}.var-divider--hairline.var-divider--vertical { transform: scaleX(0.5);}

package/es/drag/Drag.mjs

@@ -52,19 +52,11 @@ var __sfc__ = defineComponent({
       left: 0,
       right: 0
     });
-    var mounted = ref(false);
+    var dragged = 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;
@@ -85,6 +77,7 @@ var __sfc__ = defineComponent({
         }
         event.preventDefault();
         enableTransition.value = false;
+        dragged.value = true;
         var {
           clientX,
           clientY
@@ -110,8 +103,17 @@ var __sfc__ = defineComponent({
         return;
       }
       touching = false;
+      enableTransition.value = true;
       attract();
     };
+    var saveXY = () => {
+      var {
+        left,
+        top
+      } = getOffset();
+      x.value = left;
+      y.value = top;
+    };
     var getOffset = () => {
       var dragRect = getRect(drag.value);
       var windowRect = getRect(window);
@@ -158,7 +160,6 @@ var __sfc__ = defineComponent({
       if (props.attraction == null) {
         return;
       }
-      enableTransition.value = true;
       var {
         halfWidth,
         halfHeight,
@@ -187,9 +188,6 @@ var __sfc__ = defineComponent({
       }
     };
     var clampToBoundary = () => {
-      if (props.disabled) {
-        return;
-      }
       var {
         minX,
         minY,
@@ -216,27 +214,37 @@ var __sfc__ = defineComponent({
       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
+          // when the drag element is dragged for the first time, the inset should be cleared to avoid affecting translateX and translateY.
+          top: dragged.value ? 0 : style.top,
+          left: dragged.value ? 0 : style.left,
+          right: dragged.value ? 'auto' : style.right,
+          bottom: dragged.value ? 'auto' : style.bottom,
+          transform: dragged.value ? "translate(" + x.value + "px, " + y.value + "px)" : style.transform
         })
       });
     };
 
     // expose
     var resize = () => {
-      toPxBoundary();
+      if (!dragged.value) {
+        return;
+      }
       saveXY();
       clampToBoundary();
     };
-    watch(() => props.boundary, resize);
+
+    // expose
+    var reset = () => {
+      enableTransition.value = false;
+      dragged.value = false;
+      x.value = 0;
+      y.value = 0;
+    };
+    watch(() => props.boundary, toPxBoundary);
     onWindowResize(resize);
     onSmartMounted(() => {
+      toPxBoundary();
       resize();
-      mounted.value = true;
     });
     return {
       drag,
@@ -249,7 +257,8 @@ var __sfc__ = defineComponent({
       handleTouchstart,
       handleTouchmove,
       handleTouchend,
-      resize
+      resize,
+      reset
     };
   }
 });

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.0-alpha.1689346411483'
+const version = '2.13.0'
 
 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.0-alpha.1689346411483'
+const version = '2.13.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)