@varlet/ui 1.26.2 → 1.26.3

package/es/checkbox/Checkbox.js

@@ -155,6 +155,10 @@ export default defineComponent({
         uncheckedValue
       } = props;
       value.value = values.includes(checkedValue) ? checkedValue : uncheckedValue;
+    };
+
+    var resetWithAnimation = () => {
+      withAnimation.value = false;
     }; // expose
 
 
@@ -194,7 +198,8 @@ export default defineComponent({
       sync,
       validate,
       resetValidation,
-      reset
+      reset,
+      resetWithAnimation
     };
     bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
     bindForm == null ? void 0 : bindForm(checkboxProvider);

package/es/checkbox-group/CheckboxGroup.js

@@ -99,7 +99,11 @@ export default defineComponent({
         sync
       } = _ref;
       return sync(props.modelValue);
-    }); // expose
+    });
+
+    var resetWithAnimation = () => {
+      checkboxes.forEach(checkbox => checkbox.resetWithAnimation());
+    }; // expose
 
 
     var checkAll = () => {
@@ -112,6 +116,7 @@ export default defineComponent({
         return checkedValue.value;
       });
       var changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
       return changedModelValue;
     }; // expose
@@ -132,6 +137,7 @@ export default defineComponent({
         return checkedValue.value;
       });
       var changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, changedModelValue);
       return changedModelValue;
     }; // expose

package/es/date-picker/DatePicker.js

@@ -40,7 +40,7 @@ export function render(_ctx, _cache) {
     class: _normalizeClass(["var-date-picker-title__date", [!_ctx.isYearPanel ? 'var-date-picker-title__date--active' : null, _ctx.range ? 'var-date-picker-title__date--range' : null]]),
     onClick: _cache[1] || (_cache[1] = $event => _ctx.clickEl('date'))
   }, [_createVNode(_Transition, {
-    name: _ctx.multiple ? '' : _ctx.reverse ? 'var-date-picker-reverse-translatey' : 'var-date-picker-translatey'
+    name: _ctx.multiple ? '' : "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatey"
   }, {
     default: _withCtx(() => {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
@@ -225,14 +225,15 @@ export default defineComponent({
       return weekName.slice(0, 3) + ", " + monthName.slice(0, 3) + " " + chooseDay.value;
     });
     var slotProps = computed(() => {
-      var _chooseMonth$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2, _chooseDay$value;
+      var _chooseMonth$value, _chooseDay$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2;
 
       var weekIndex = dayjs(chooseYear.value + "-" + ((_chooseMonth$value = chooseMonth.value) == null ? void 0 : _chooseMonth$value.index) + "-" + chooseDay.value).day();
+      var date = chooseDay.value ? (_chooseDay$value = chooseDay.value) == null ? void 0 : _chooseDay$value.padStart(2, '0') : '';
       return {
         week: "" + weekIndex,
         year: (_chooseYear$value = chooseYear.value) != null ? _chooseYear$value : '',
         month: (_chooseMonth$value$in = (_chooseMonth$value2 = chooseMonth.value) == null ? void 0 : _chooseMonth$value2.index) != null ? _chooseMonth$value$in : '',
-        date: (_chooseDay$value = chooseDay.value) != null ? _chooseDay$value : ''
+        date
       };
     });
     var formatRange = computed(() => getChoose.value.chooseRangeDay.map(choose => dayjs(choose).format('YYYY-MM-DD')));

package/es/date-picker/src/day-picker-panel.js

@@ -41,7 +41,7 @@ export function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), _createVNode(_Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: _withCtx(() => [(_openBlock(), _createElementBlock("div", {
       key: _ctx.panelKey

package/es/date-picker/src/month-picker-panel.js

@@ -35,7 +35,7 @@ export function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), _createVNode(_Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: _withCtx(() => [(_openBlock(), _createElementBlock("ul", {
       key: _ctx.panelKey

package/es/date-picker/src/panel-header.js

@@ -36,7 +36,7 @@ export function render(_ctx, _cache) {
     class: "var-picker-header__value",
     onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('check-panel'))
   }, [_createVNode(_Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: _withCtx(() => [(_openBlock(), _createElementBlock("div", {
       key: _ctx.showDate

package/es/image-preview/ImagePreview.js

@@ -7,6 +7,7 @@ import { props } from './props';
 import { toNumber } from '../utils/shared';
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
+var TAP_DELAY = 250;
 var ANIMATION_DURATION = 200;
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
@@ -203,11 +204,11 @@ export default defineComponent({
     };
 
     var isTapTouch = target => {
-      if (!startTouch || !prevTouch) {
+      if (!target || !startTouch || !prevTouch) {
         return false;
       }
 
-      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && (target === startTouch.target || target.parentNode === startTouch.target);
+      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && Date.now() - prevTouch.timestamp < TAP_DELAY && (target === startTouch.target || target.parentNode === startTouch.target);
     };
 
     var handleTouchend = event => {

package/es/varlet.esm.js

@@ -2475,6 +2475,9 @@ var Checkbox = defineComponent({
       } = props2;
       value.value = values.includes(checkedValue2) ? checkedValue2 : uncheckedValue;
     };
+    var resetWithAnimation = () => {
+      withAnimation.value = false;
+    };
     var reset = () => {
       var _props$onUpdateModel2;
       (_props$onUpdateModel2 = props2["onUpdate:modelValue"]) == null ? void 0 : _props$onUpdateModel2.call(props2, props2.uncheckedValue);
@@ -2503,7 +2506,8 @@ var Checkbox = defineComponent({
       sync,
       validate,
       resetValidation,
-      reset
+      reset,
+      resetWithAnimation
     };
     bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
     bindForm == null ? void 0 : bindForm(checkboxProvider);
@@ -2630,6 +2634,9 @@ var CheckboxGroup = defineComponent({
       } = _ref;
       return sync(props2.modelValue);
     });
+    var resetWithAnimation = () => {
+      checkboxes.forEach((checkbox2) => checkbox2.resetWithAnimation());
+    };
     var checkAll2 = () => {
       var _props$onUpdateModel2;
       var checkedValues = checkboxes.map((_ref2) => {
@@ -2639,6 +2646,7 @@ var CheckboxGroup = defineComponent({
         return checkedValue.value;
       });
       var changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel2 = props2["onUpdate:modelValue"]) == null ? void 0 : _props$onUpdateModel2.call(props2, changedModelValue);
       return changedModelValue;
     };
@@ -2656,6 +2664,7 @@ var CheckboxGroup = defineComponent({
         return checkedValue.value;
       });
       var changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel3 = props2["onUpdate:modelValue"]) == null ? void 0 : _props$onUpdateModel3.call(props2, changedModelValue);
       return changedModelValue;
     };
@@ -6544,7 +6553,7 @@ function render$F(_ctx, _cache) {
     class: "var-picker-header__value",
     onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("check-panel"))
   }, [createVNode(Transition, {
-    name: _ctx.reverse ? "var-date-picker-reverse-translatex" : "var-date-picker-translatex"
+    name: "var-date-picker" + (_ctx.reverse ? "-reverse" : "") + "-translatex"
   }, {
     default: withCtx(() => [(openBlock(), createElementBlock("div", {
       key: _ctx.showDate
@@ -6655,7 +6664,7 @@ function render$E(_ctx, _cache) {
     onCheckPanel: _ctx.clickYear,
     onCheckDate: _ctx.checkDate
   }, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]), createVNode(Transition, {
-    name: _ctx.reverse ? "var-date-picker-reverse-translatex" : "var-date-picker-translatex"
+    name: "var-date-picker" + (_ctx.reverse ? "-reverse" : "") + "-translatex"
   }, {
     default: withCtx(() => [(openBlock(), createElementBlock("ul", {
       key: _ctx.panelKey
@@ -6987,7 +6996,7 @@ function render$C(_ctx, _cache) {
     onCheckPanel: _ctx.clickMonth,
     onCheckDate: _ctx.checkDate
   }, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]), createVNode(Transition, {
-    name: _ctx.reverse ? "var-date-picker-reverse-translatex" : "var-date-picker-translatex"
+    name: "var-date-picker" + (_ctx.reverse ? "-reverse" : "") + "-translatex"
   }, {
     default: withCtx(() => [(openBlock(), createElementBlock("div", {
       key: _ctx.panelKey
@@ -7271,7 +7280,7 @@ function render$B(_ctx, _cache) {
     class: normalizeClass(["var-date-picker-title__date", [!_ctx.isYearPanel ? "var-date-picker-title__date--active" : null, _ctx.range ? "var-date-picker-title__date--range" : null]]),
     onClick: _cache[1] || (_cache[1] = ($event) => _ctx.clickEl("date"))
   }, [createVNode(Transition, {
-    name: _ctx.multiple ? "" : _ctx.reverse ? "var-date-picker-reverse-translatey" : "var-date-picker-translatey"
+    name: _ctx.multiple ? "" : "var-date-picker" + (_ctx.reverse ? "-reverse" : "") + "-translatey"
   }, {
     default: withCtx(() => {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
@@ -7419,13 +7428,14 @@ var DatePicker = defineComponent({
       return weekName.slice(0, 3) + ", " + monthName.slice(0, 3) + " " + chooseDay.value;
     });
     var slotProps = computed(() => {
-      var _chooseMonth$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2, _chooseDay$value;
+      var _chooseMonth$value, _chooseDay$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2;
       var weekIndex = dayjs(chooseYear.value + "-" + ((_chooseMonth$value = chooseMonth.value) == null ? void 0 : _chooseMonth$value.index) + "-" + chooseDay.value).day();
+      var date = chooseDay.value ? (_chooseDay$value = chooseDay.value) == null ? void 0 : _chooseDay$value.padStart(2, "0") : "";
       return {
         week: "" + weekIndex,
         year: (_chooseYear$value = chooseYear.value) != null ? _chooseYear$value : "",
         month: (_chooseMonth$value$in = (_chooseMonth$value2 = chooseMonth.value) == null ? void 0 : _chooseMonth$value2.index) != null ? _chooseMonth$value$in : "",
-        date: (_chooseDay$value = chooseDay.value) != null ? _chooseDay$value : ""
+        date
       };
     });
     var formatRange = computed(() => getChoose.value.chooseRangeDay.map((choose) => dayjs(choose).format("YYYY-MM-DD")));
@@ -9037,6 +9047,7 @@ var props$t = _extends$3({
 ]));
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
+var TAP_DELAY = 250;
 var ANIMATION_DURATION = 200;
 var _hoisted_1$k = ["src", "alt"];
 var _hoisted_2$f = {
@@ -9195,10 +9206,10 @@ var VarImagePreview = defineComponent({
       return getDistance(prevTouch, currentTouch) <= DISTANCE_OFFSET && currentTouch.timestamp - prevTouch.timestamp <= EVENT_DELAY && prevTouch.target === currentTouch.target;
     };
     var isTapTouch = (target) => {
-      if (!startTouch || !prevTouch) {
+      if (!target || !startTouch || !prevTouch) {
         return false;
       }
-      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && (target === startTouch.target || target.parentNode === startTouch.target);
+      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && Date.now() - prevTouch.timestamp < TAP_DELAY && (target === startTouch.target || target.parentNode === startTouch.target);
     };
     var handleTouchend = (event) => {
       checker = window.setTimeout(() => {

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.26.1",
+  "version": "1.26.2",
   "name": "VARLET",
   "contributions": {
     "html": {

package/lib/checkbox/Checkbox.js

@@ -171,6 +171,10 @@ var _default = (0, _vue.defineComponent)({
         uncheckedValue
       } = props;
       value.value = values.includes(checkedValue) ? checkedValue : uncheckedValue;
+    };
+
+    var resetWithAnimation = () => {
+      withAnimation.value = false;
     }; // expose
 
 
@@ -210,7 +214,8 @@ var _default = (0, _vue.defineComponent)({
       sync,
       validate,
       resetValidation,
-      reset
+      reset,
+      resetWithAnimation
     };
     bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
     bindForm == null ? void 0 : bindForm(checkboxProvider);

package/lib/checkbox-group/CheckboxGroup.js

@@ -114,7 +114,11 @@ var _default = (0, _vue.defineComponent)({
         sync
       } = _ref;
       return sync(props.modelValue);
-    }); // expose
+    });
+
+    var resetWithAnimation = () => {
+      checkboxes.forEach(checkbox => checkbox.resetWithAnimation());
+    }; // expose
 
 
     var checkAll = () => {
@@ -127,6 +131,7 @@ var _default = (0, _vue.defineComponent)({
         return checkedValue.value;
       });
       var changedModelValue = (0, _shared.uniq)(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
       return changedModelValue;
     }; // expose
@@ -147,6 +152,7 @@ var _default = (0, _vue.defineComponent)({
         return checkedValue.value;
       });
       var changedModelValue = (0, _shared.uniq)(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, changedModelValue);
       return changedModelValue;
     }; // expose

package/lib/date-picker/DatePicker.js

@@ -55,7 +55,7 @@ function render(_ctx, _cache) {
     class: (0, _vue.normalizeClass)(["var-date-picker-title__date", [!_ctx.isYearPanel ? 'var-date-picker-title__date--active' : null, _ctx.range ? 'var-date-picker-title__date--range' : null]]),
     onClick: _cache[1] || (_cache[1] = $event => _ctx.clickEl('date'))
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.multiple ? '' : _ctx.reverse ? 'var-date-picker-reverse-translatey' : 'var-date-picker-translatey'
+    name: _ctx.multiple ? '' : "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatey"
   }, {
     default: (0, _vue.withCtx)(() => {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
@@ -245,14 +245,15 @@ var _default = (0, _vue.defineComponent)({
       return weekName.slice(0, 3) + ", " + monthName.slice(0, 3) + " " + chooseDay.value;
     });
     var slotProps = (0, _vue.computed)(() => {
-      var _chooseMonth$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2, _chooseDay$value;
+      var _chooseMonth$value, _chooseDay$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2;
 
       var weekIndex = (0, _dayjs.default)(chooseYear.value + "-" + ((_chooseMonth$value = chooseMonth.value) == null ? void 0 : _chooseMonth$value.index) + "-" + chooseDay.value).day();
+      var date = chooseDay.value ? (_chooseDay$value = chooseDay.value) == null ? void 0 : _chooseDay$value.padStart(2, '0') : '';
       return {
         week: "" + weekIndex,
         year: (_chooseYear$value = chooseYear.value) != null ? _chooseYear$value : '',
         month: (_chooseMonth$value$in = (_chooseMonth$value2 = chooseMonth.value) == null ? void 0 : _chooseMonth$value2.index) != null ? _chooseMonth$value$in : '',
-        date: (_chooseDay$value = chooseDay.value) != null ? _chooseDay$value : ''
+        date
       };
     });
     var formatRange = (0, _vue.computed)(() => getChoose.value.chooseRangeDay.map(choose => (0, _dayjs.default)(choose).format('YYYY-MM-DD')));

package/lib/date-picker/src/day-picker-panel.js

@@ -59,7 +59,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: _ctx.panelKey

package/lib/date-picker/src/month-picker-panel.js

@@ -53,7 +53,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", {
       key: _ctx.panelKey

package/lib/date-picker/src/panel-header.js

@@ -48,7 +48,7 @@ function render(_ctx, _cache) {
     class: "var-picker-header__value",
     onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('check-panel'))
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: _ctx.showDate

package/lib/image-preview/ImagePreview.js

@@ -22,6 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
+var TAP_DELAY = 250;
 var ANIMATION_DURATION = 200;
 
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
@@ -219,11 +220,11 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var isTapTouch = target => {
-      if (!startTouch || !prevTouch) {
+      if (!target || !startTouch || !prevTouch) {
         return false;
       }
 
-      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && (target === startTouch.target || target.parentNode === startTouch.target);
+      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && Date.now() - prevTouch.timestamp < TAP_DELAY && (target === startTouch.target || target.parentNode === startTouch.target);
     };
 
     var handleTouchend = event => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.26.2",
+  "version": "1.26.3",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -39,13 +39,13 @@
   },
   "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
   "dependencies": {
-    "@varlet/icons": "1.26.2",
+    "@varlet/icons": "1.26.3",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
   "devDependencies": {
-    "@varlet/cli": "1.26.2",
-    "@varlet/touch-emulator": "1.26.2",
+    "@varlet/cli": "1.26.3",
+    "@varlet/touch-emulator": "1.26.3",
     "@vue/test-utils": "2.0.0-rc.6",
     "@vue/runtime-core": "3.2.25",
     "typescript": "^4.4.4",

package/types/radioGroup.d.ts

@@ -3,12 +3,12 @@ import { VarComponent } from './varComponent'
 export type RadioGroupValidateTriggers = 'onChange'
 
 export interface RadioGroupProps {
-  modelValue?: any[]
+  modelValue?: any
   direction?: 'horizontal' | 'vertical'
   validateTrigger?: Array<RadioGroupValidateTriggers>
   rules?: Array<(value: any) => any>
-  onChange?: (value: Array<any>) => void
-  'onUpdate:modelValue'?: (value: Array<any>) => void
+  onChange?: (value: any) => void
+  'onUpdate:modelValue'?: (value: any) => void
 }
 
 export class RadioGroup extends VarComponent {