@varlet/ui 2.15.0-alpha.1693213353380 → 2.15.0

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.15.0-alpha.1693213353380",
+  "version": "2.15.0",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -2814,7 +2814,16 @@
               }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "submit",
+              "description": "Triggered when the form is submitted"
+            },
+            {
+              "name": "reset",
+              "description": "Fired when the form is reset"
+            }
+          ],
           "slots": [
             {
               "name": "default",

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.15.0-alpha.1693213353380",
+  "version": "2.15.0",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -2973,7 +2973,16 @@
               }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "submit",
+              "description": "表单提交时触发"
+            },
+            {
+              "name": "reset",
+              "description": "表单清空时触发"
+            }
+          ],
           "slots": [
             {
               "name": "default",

package/lib/varlet.cjs.js

@@ -637,8 +637,10 @@ function useTouch() {
   const moveY = vue.ref(0);
   const direction = vue.ref();
   const touching = vue.ref(false);
+  const dragging = vue.ref(false);
   const startTime = vue.ref(0);
   const distance = vue.ref(0);
+  let draggingAnimationFrame = null;
   const resetTouch = () => {
     startX.value = 0;
     startY.value = 0;
@@ -652,6 +654,7 @@ function useTouch() {
     moveY.value = 0;
     direction.value = void 0;
     touching.value = false;
+    dragging.value = false;
     startTime.value = 0;
     distance.value = 0;
   };
@@ -664,9 +667,14 @@ function useTouch() {
     prevY.value = y;
     touching.value = true;
     startTime.value = performance.now();
+    dragging.value = false;
+    if (draggingAnimationFrame) {
+      window.cancelAnimationFrame(draggingAnimationFrame);
+    }
   };
   const moveTouch = (event) => {
     const { clientX: x, clientY: y } = event.touches[0];
+    dragging.value = true;
     deltaX.value = x - startX.value;
     deltaY.value = y - startY.value;
     offsetX.value = Math.abs(deltaX.value);
@@ -682,6 +690,9 @@ function useTouch() {
   };
   const endTouch = () => {
     touching.value = false;
+    draggingAnimationFrame = window.requestAnimationFrame(() => {
+      dragging.value = false;
+    });
   };
   return {
     startX,
@@ -696,6 +707,7 @@ function useTouch() {
     moveY,
     direction,
     touching,
+    dragging,
     startTime,
     distance,
     resetTouch,
@@ -11041,9 +11053,9 @@ var __sfc__$O = vue.defineComponent({
     });
     var dragged = vue.ref(false);
     var enableTransition = vue.ref(false);
-    var dragging = vue.ref(false);
     var {
       touching,
+      dragging,
       moveX,
       moveY,
       startTouch,
@@ -11054,28 +11066,22 @@ var __sfc__$O = vue.defineComponent({
     var {
       disabled: teleportDisabled
     } = useTeleport();
-    var draggingRunner = null;
     var handleTouchstart = (event) => {
       if (props2.disabled) {
         return;
       }
-      if (draggingRunner) {
-        window.clearTimeout(draggingRunner);
-      }
-      saveXY();
       startTouch(event);
-      dragging.value = false;
+      saveXY();
     };
     var handleTouchmove = /* @__PURE__ */ function() {
       var _ref2 = _asyncToGenerator$b(function* (event) {
         if (!touching.value || props2.disabled) {
           return;
         }
+        moveTouch(event);
         event.preventDefault();
         enableTransition.value = false;
         dragged.value = true;
-        dragging.value = true;
-        moveTouch(event);
         if (props2.direction.includes("x")) {
           x.value += moveX.value;
         }
@@ -11095,9 +11101,6 @@ var __sfc__$O = vue.defineComponent({
       endTouch();
       enableTransition.value = true;
       attract();
-      draggingRunner = window.setTimeout(() => {
-        dragging.value = false;
-      });
     };
     var handleClick = (event) => {
       if (dragging.value) {
@@ -11230,12 +11233,11 @@ var __sfc__$O = vue.defineComponent({
       clampToBoundary();
     };
     var reset = () => {
+      resetTouch();
       enableTransition.value = false;
       dragged.value = false;
-      dragging.value = false;
       x.value = 0;
       y.value = 0;
-      resetTouch();
     };
     vue.watch(() => props2.boundary, toPxBoundary);
     onWindowResize(resize);
@@ -13377,7 +13379,9 @@ var props$G = {
   scrollToErrorOffsetY: {
     type: [String, Number],
     default: 0
-  }
+  },
+  onSubmit: defineListenerProp(),
+  onReset: defineListenerProp()
 };
 function asyncGeneratorStep$9(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -13413,13 +13417,19 @@ var {
 } = createNamespace("form");
 function __render__$K(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
-    "div",
+    "form",
     {
-      class: vue.normalizeClass(_ctx.n())
+      class: vue.normalizeClass(_ctx.n()),
+      onSubmit: _cache[0] || (_cache[0] = function() {
+        return _ctx.handleSubmit && _ctx.handleSubmit(...arguments);
+      }),
+      onReset: _cache[1] || (_cache[1] = function() {
+        return _ctx.handleReset && _ctx.handleReset(...arguments);
+      })
     },
     [vue.renderSlot(_ctx.$slots, "default")],
-    2
-    /* CLASS */
+    34
+    /* CLASS, HYDRATE_EVENTS */
   );
 }
 var __sfc__$L = vue.defineComponent({
@@ -13443,12 +13453,27 @@ var __sfc__$L = vue.defineComponent({
         });
       }, 300);
     };
+    var handleSubmit = /* @__PURE__ */ function() {
+      var _ref = _asyncToGenerator$9(function* (event) {
+        event.preventDefault();
+        var valid = yield validate();
+        call(props2.onSubmit, valid);
+      });
+      return function handleSubmit2(_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    var handleReset = (event) => {
+      event.preventDefault();
+      reset();
+      call(props2.onReset);
+    };
     var validate = /* @__PURE__ */ function() {
-      var _ref = _asyncToGenerator$9(function* () {
-        var res = yield Promise.all(formItems.map((_ref2) => {
+      var _ref2 = _asyncToGenerator$9(function* () {
+        var res = yield Promise.all(formItems.map((_ref3) => {
           var {
             validate: validate2
-          } = _ref2;
+          } = _ref3;
           return validate2();
         }));
         if (props2.scrollToError) {
@@ -13464,19 +13489,19 @@ var __sfc__$L = vue.defineComponent({
         return res.every((result2) => result2 === true);
       });
       return function validate2() {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }();
-    var reset = () => formItems.forEach((_ref3) => {
+    var reset = () => formItems.forEach((_ref4) => {
       var {
         reset: reset2
-      } = _ref3;
+      } = _ref4;
       return reset2();
     });
-    var resetValidation = () => formItems.forEach((_ref4) => {
+    var resetValidation = () => formItems.forEach((_ref5) => {
       var {
         resetValidation: resetValidation2
-      } = _ref4;
+      } = _ref5;
       return resetValidation2();
     });
     var formProvider = {
@@ -13486,6 +13511,8 @@ var __sfc__$L = vue.defineComponent({
     bindFormItems(formProvider);
     return {
       n: n$J,
+      handleSubmit,
+      handleReset,
       validate,
       reset,
       resetValidation
@@ -15538,8 +15565,8 @@ var {
   classes: classes$u
 } = createNamespace("input");
 var _hoisted_1$g = ["placeholder", "enterkeyhint"];
-var _hoisted_2$b = ["id", "disabled", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
-var _hoisted_3$9 = ["id", "disabled", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
+var _hoisted_2$b = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
+var _hoisted_3$9 = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
 function __render__$B(_ctx, _cache) {
   var _component_var_field_decorator = vue.resolveComponent("var-field-decorator");
   var _component_var_form_details = vue.resolveComponent("var-form-details");
@@ -15591,7 +15618,8 @@ function __render__$B(_ctx, _cache) {
           ref: "el",
           autocomplete: "new-password",
           id: _ctx.id,
-          disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
+          disabled: _ctx.formDisabled || _ctx.disabled,
+          readonly: _ctx.formReadonly || _ctx.readonly,
           type: _ctx.normalizedType,
           value: _ctx.modelValue,
           placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
@@ -15629,7 +15657,8 @@ function __render__$B(_ctx, _cache) {
           ref: "el",
           autocomplete: "new-password",
           id: _ctx.id,
-          disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
+          disabled: _ctx.formDisabled || _ctx.disabled,
+          readonly: _ctx.formReadonly || _ctx.readonly,
           type: _ctx.normalizedType,
           value: _ctx.modelValue,
           placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
@@ -17397,9 +17426,9 @@ function __render__$u(_ctx, _cache) {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.normalizeClass(_ctx.n("column")),
                 key: c.id,
-                onTouchstartPassive: ($event) => _ctx.handleTouchstart(c),
+                onTouchstartPassive: ($event) => _ctx.handleTouchstart($event, c),
                 onTouchmove: vue.withModifiers(($event) => _ctx.handleTouchmove($event, c), ["prevent"]),
-                onTouchend: ($event) => _ctx.handleTouchend($event, c)
+                onTouchend: ($event) => _ctx.handleTouchend(c)
               }, [vue.createElementVNode("div", {
                 class: vue.normalizeClass(_ctx.n("scroller")),
                 ref_for: true,
@@ -17489,7 +17518,14 @@ var __sfc__$v = vue.defineComponent({
     var center = vue.computed(() => optionCount.value * optionHeight.value / 2 - optionHeight.value / 2);
     var columnHeight = vue.computed(() => optionCount.value * optionHeight.value);
     var prevIndexes = [];
-    var dragging = false;
+    var {
+      prevY,
+      moveY,
+      dragging,
+      startTouch,
+      moveTouch,
+      endTouch
+    } = useTouch();
     var setScrollEl = (el, scrollColumn) => {
       scrollColumn.scrollEl = el;
     };
@@ -17528,30 +17564,27 @@ var __sfc__$v = vue.defineComponent({
       scrollColumn.translate += Math.abs(distance / duration) / 3e-3 * (distance < 0 ? -1 : 1);
     };
     var handleClick = (scrollColumn, index) => {
-      if (dragging) {
+      if (dragging.value) {
         return;
       }
       scrollColumn.index = index;
       scrollColumn.scrolling = true;
       scrollTo2(scrollColumn, TRANSITION_DURATION);
     };
-    var handleTouchstart = (scrollColumn) => {
+    var handleTouchstart = (event, scrollColumn) => {
       scrollColumn.touching = true;
       scrollColumn.translate = getTranslateY(scrollColumn.scrollEl);
+      startTouch(event);
     };
     var handleTouchmove = (event, scrollColumn) => {
       if (!scrollColumn.touching) {
         return;
       }
-      dragging = true;
+      moveTouch(event);
       scrollColumn.scrolling = false;
       scrollColumn.duration = 0;
-      var {
-        clientY
-      } = event.touches[0];
-      var deltaY = scrollColumn.prevY !== void 0 ? clientY - scrollColumn.prevY : 0;
-      scrollColumn.prevY = clientY;
-      scrollColumn.translate += deltaY;
+      scrollColumn.prevY = prevY.value;
+      scrollColumn.translate += moveY.value;
       clampTranslate(scrollColumn);
       var now = performance.now();
       if (now - scrollColumn.momentumTime > MOMENTUM_RECORD_TIME) {
@@ -17559,9 +17592,10 @@ var __sfc__$v = vue.defineComponent({
         scrollColumn.momentumPrevY = scrollColumn.translate;
       }
     };
-    var handleTouchend = (event, scrollColumn) => {
+    var handleTouchend = (scrollColumn) => {
+      endTouch();
       scrollColumn.touching = false;
-      scrollColumn.prevY = void 0;
+      scrollColumn.prevY = 0;
       var distance = scrollColumn.translate - scrollColumn.momentumPrevY;
       var duration = performance.now() - scrollColumn.momentumTime;
       var shouldMomentum = Math.abs(distance) >= MOMENTUM_ALLOW_DISTANCE && duration <= MOMENTUM_RECORD_TIME;
@@ -17576,9 +17610,6 @@ var __sfc__$v = vue.defineComponent({
       if (!scrollColumn.scrolling) {
         change(scrollColumn);
       }
-      requestAnimationFrame(() => {
-        dragging = false;
-      });
     };
     var handleTransitionend = (scrollColumn) => {
       scrollColumn.scrolling = false;
@@ -17591,8 +17622,8 @@ var __sfc__$v = vue.defineComponent({
       } : column;
       var scrollColumn = {
         id: sid$1++,
-        prevY: void 0,
-        momentumPrevY: void 0,
+        prevY: 0,
+        momentumPrevY: 0,
         touching: false,
         translate: center.value,
         index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
@@ -17620,8 +17651,8 @@ var __sfc__$v = vue.defineComponent({
         var index = initial ? (_props$cascadeInitial = props2.cascadeInitialIndexes[scrollColumns2.length]) != null ? _props$cascadeInitial : 0 : 0;
         var scrollColumn = {
           id: sid$1++,
-          prevY: void 0,
-          momentumPrevY: void 0,
+          prevY: 0,
+          momentumPrevY: 0,
           touching: false,
           translate: center.value,
           index,
@@ -24371,9 +24402,9 @@ const skeleton = "";
 const SkeletonSfc = "";
 const slider = "";
 const SliderSfc = "";
+const SnackbarSfc = "";
 const snackbar = "";
 const coreSfc = "";
-const SnackbarSfc = "";
 const space = "";
 const step = "";
 const StepSfc = "";
@@ -24400,7 +24431,7 @@ const uploader = "";
 const UploaderSfc = "";
 const watermark = "";
 const WatermarkSfc = "";
-const version = "2.15.0-alpha.1693213353380";
+const version = "2.15.0";
 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.15.0-alpha.1693213353380",
+  "version": "2.15.0",
   "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.15.0-alpha.1693213353380",
-    "@varlet/shared": "2.15.0-alpha.1693213353380",
-    "@varlet/use": "2.15.0-alpha.1693213353380"
+    "@varlet/icons": "2.15.0",
+    "@varlet/use": "2.15.0",
+    "@varlet/shared": "2.15.0"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.3.4",
@@ -64,8 +64,8 @@
     "typescript": "^5.1.5",
     "vue": "3.3.4",
     "vue-router": "4.2.0",
-    "@varlet/cli": "2.15.0-alpha.1693213353380",
-    "@varlet/touch-emulator": "2.15.0-alpha.1693213353380"
+    "@varlet/touch-emulator": "2.15.0",
+    "@varlet/cli": "2.15.0"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/form.d.ts

@@ -1,4 +1,4 @@
-import { VarComponent, BasicAttributes } from './varComponent'
+import { VarComponent, BasicAttributes, ListenerProp } from './varComponent'
 import { ComputedRef, VNode, Ref } from 'vue'
 
 export declare const formProps: Record<string, any>
@@ -21,6 +21,8 @@ export interface FormProps extends BasicAttributes {
   readonly?: boolean
   scrollToError?: FormScrollToError
   scrollToErrorOffsetY?: number | string
+  onSubmit?: ListenerProp<(valid: boolean) => void>
+  onReset?: ListenerProp<() => void>
 }
 
 export class Form extends VarComponent {