@varlet/ui 2.4.3-alpha.1671119797012 → 2.4.3-alpha.1672073838506

package/es/action-sheet/index.js

@@ -1,7 +1,7 @@
 import VarActionSheet from './ActionSheet.js'
 import { nextTick, reactive } from 'vue';
 import { inBrowser } from '@varlet/shared';
-import { mountInstance } from '../utils/components';
+import { call, mountInstance } from '../utils/components';
 var singletonOptions;
 
 function ActionSheet(options) {
@@ -18,15 +18,15 @@ function ActionSheet(options) {
       unmountInstance
     } = mountInstance(VarActionSheet, reactiveActionSheetOptions, {
       onSelect: action => {
-        reactiveActionSheetOptions.onSelect == null ? void 0 : reactiveActionSheetOptions.onSelect(action);
+        call(reactiveActionSheetOptions.onSelect, action);
         resolve(action);
       },
       onClose: () => {
-        reactiveActionSheetOptions.onClose == null ? void 0 : reactiveActionSheetOptions.onClose();
+        call(reactiveActionSheetOptions.onClose);
         resolve('close');
       },
       onClosed: () => {
-        reactiveActionSheetOptions.onClosed == null ? void 0 : reactiveActionSheetOptions.onClosed();
+        call(reactiveActionSheetOptions.onClosed);
         unmountInstance();
         singletonOptions === reactiveActionSheetOptions && (singletonOptions = null);
       },

package/es/action-sheet/props.js

@@ -1,6 +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 { pickProps } from '../utils/components';
+import { defineListenerProp, pickProps } from '../utils/components';
 import { props as popupProps } from '../popup/props';
 export var props = _extends({
   show: {
@@ -18,11 +18,7 @@ export var props = _extends({
     type: Boolean,
     default: true
   },
-  onSelect: {
-    type: Function
-  },
-  'onUpdate:show': {
-    type: Function
-  }
+  onSelect: defineListenerProp(),
+  'onUpdate:show': defineListenerProp()
 }, pickProps(popupProps, ['overlay', 'overlayClass', 'overlayStyle', 'lockScroll', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', // internal for function call closes the dialog
 'onRouteChange']));

package/es/back-top/props.js

@@ -1,3 +1,4 @@
+import { defineListenerProp } from '../utils/components';
 export var props = {
   visibilityHeight: {
     type: [Number, String],
@@ -16,7 +17,5 @@ export var props = {
   target: {
     type: [String, Object]
   },
-  onClick: {
-    type: Function
-  }
+  onClick: defineListenerProp()
 };

package/es/bottom-navigation/BottomNavigation.js

@@ -5,7 +5,7 @@ import { defineComponent, ref, computed, onMounted, onUpdated, watch } from 'vue
 import { props } from './props';
 import { useBottomNavigationItems } from './provide';
 import { createNamespace, call } from '../utils/components';
-import { isNumber } from '@varlet/shared';
+import { isNumber, isArray } from '@varlet/shared';
 var {
   n,
   classes
@@ -115,7 +115,13 @@ export default defineComponent({
     };
 
     var handleBeforeChange = changedValue => {
-      Promise.resolve(call(props.onBeforeChange, changedValue)).then(res => res && handleChange(changedValue));
+      var results = call(props.onBeforeChange, changedValue);
+      results = isArray(results) ? results : [results];
+      Promise.all(results).then(results => {
+        if (!results.some(result => !result)) {
+          handleChange(changedValue);
+        }
+      });
     };
 
     var handleChange = changedValue => {

package/es/bottom-navigation/props.js

@@ -1,3 +1,4 @@
+import { defineListenerProp } from '../utils/components';
 export var props = {
   active: {
     type: [Number, String],
@@ -25,18 +26,10 @@ export var props = {
   inactiveColor: {
     type: String
   },
-  onChange: {
-    type: Function
-  },
-  'onUpdate:active': {
-    type: Function
-  },
-  onBeforeChange: {
-    type: Function
-  },
-  onFabClick: {
-    type: Function
-  },
+  onChange: defineListenerProp(),
+  'onUpdate:active': defineListenerProp(),
+  onBeforeChange: defineListenerProp(),
+  onFabClick: defineListenerProp(),
   fabProps: {
     type: Object
   }

package/es/bottom-navigation-item/props.js

@@ -1,3 +1,4 @@
+import { defineListenerProp } from '../utils/components';
 export var props = {
   name: {
     type: String
@@ -16,7 +17,5 @@ export var props = {
     type: [Boolean, Object],
     default: false
   },
-  onClick: {
-    type: Function
-  }
+  onClick: defineListenerProp()
 };

package/es/breadcrumb/Breadcrumb.js

@@ -0,0 +1,66 @@
+import { defineComponent, computed } from 'vue';
+import { props } from './props';
+import { useBreadcrumb } from './provide';
+import { call, createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('breadcrumb');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('content'), [!_ctx.isLast, _ctx.n('--active')])),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    })
+  }, [_renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  ), !_ctx.isLast ? _renderSlot(_ctx.$slots, "separator", {
+    key: 0
+  }, () => {
+    var _ctx$separator;
+
+    return [_createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('separator'))
+    }, _toDisplayString((_ctx$separator = _ctx.separator) != null ? _ctx$separator : _ctx.parentSeparator), 3
+    /* TEXT, CLASS */
+    )];
+  }) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
+}
+export default defineComponent({
+  render,
+  name: 'VarBreadcrumb',
+  props,
+
+  setup(props) {
+    var {
+      index,
+      breadcrumb,
+      bindBreadcrumb
+    } = useBreadcrumb();
+    var isLast = computed(() => index.value === breadcrumb.length.value - 1);
+    var parentSeparator = computed(() => breadcrumb.separator.value);
+
+    var handleClick = e => {
+      if (isLast.value) {
+        return;
+      }
+
+      call(props.onClick, e);
+    };
+
+    bindBreadcrumb(null);
+    return {
+      n,
+      classes,
+      isLast,
+      parentSeparator,
+      handleClick
+    };
+  }
+
+});

package/es/breadcrumb/breadcrumb.css

@@ -0,0 +1 @@
+:root { --breadcrumb-active-color: var(--color-primary); --breadcrumb-inactive-color: #888; --breadcrumb-separator-margin: 0 10px; --breadcrumb-separator-font-size: 14px;}.var-breadcrumb { display: flex; align-items: center; color: var(--breadcrumb-inactive-color);}.var-breadcrumb__separator { margin: var(--breadcrumb-separator-margin); font-size: var(--breadcrumb-separator-font-size);}.var-breadcrumb--active { color: var(--breadcrumb-active-color); transition: opacity 0.25s;}.var-breadcrumb--active:hover { opacity: 0.7; cursor: pointer;}

package/es/breadcrumb/index.js

@@ -0,0 +1,8 @@
+import Breadcrumb from './Breadcrumb.js'
+
+Breadcrumb.install = function (app) {
+  app.component(Breadcrumb.name, Breadcrumb);
+};
+
+export var _BreadcrumbComponent = Breadcrumb;
+export default Breadcrumb;

package/es/breadcrumb/props.js

@@ -0,0 +1,7 @@
+import { defineListenerProp } from '../utils/components';
+export var props = {
+  separator: {
+    type: String
+  },
+  onClick: defineListenerProp()
+};

package/es/breadcrumb/provide.js

@@ -0,0 +1,21 @@
+import { useAtParentIndex, useParent } from '../utils/components';
+import { BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY, BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY } from '../breadcrumbs/provide';
+export function useBreadcrumb() {
+  var {
+    parentProvider,
+    bindParent
+  } = useParent(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
+  var {
+    index
+  } = useAtParentIndex(BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY);
+
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('<var-breadcrumb/> must in <var-breadcrumbs/>');
+  }
+
+  return {
+    index,
+    breadcrumb: parentProvider,
+    bindBreadcrumb: bindParent
+  };
+}

package/es/breadcrumb/style/index.js

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../breadcrumb.css'
+import '../BreadcrumbSfc.css'

package/es/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,37 @@
+import { defineComponent, computed } from 'vue';
+import { props } from './props';
+import { useBreadcrumbsList } from './provide';
+import { createNamespace } from '../utils/components';
+var {
+  n
+} = createNamespace('breadcrumbs');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  );
+}
+export default defineComponent({
+  render,
+  name: 'VarBreadcrumbs',
+  props,
+
+  setup(props) {
+    var separator = computed(() => props.separator);
+    var {
+      bindBreadcrumbList,
+      length
+    } = useBreadcrumbsList();
+    var breadcrumbsProvider = {
+      length,
+      separator
+    };
+    bindBreadcrumbList(breadcrumbsProvider);
+    return {
+      n
+    };
+  }
+
+});

package/es/breadcrumbs/breadcrumbs.css

@@ -0,0 +1 @@
+.var-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center;}

package/es/breadcrumbs/index.js

@@ -0,0 +1,8 @@
+import Breadcrumbs from './Breadcrumbs.js'
+
+Breadcrumbs.install = function (app) {
+  app.component(Breadcrumbs.name, Breadcrumbs);
+};
+
+export var _BreadcrumbsComponent = Breadcrumbs;
+export default Breadcrumbs;

package/es/breadcrumbs/props.js

@@ -0,0 +1,6 @@
+export var props = {
+  separator: {
+    type: String,
+    default: '/'
+  }
+};

package/es/breadcrumbs/provide.js

@@ -0,0 +1,17 @@
+import { useAtChildrenCounter, useChildren } from '../utils/components';
+export var BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY = Symbol('BREADCRUMBS_BIND_BREADCRUMB_KEY');
+export var BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY = Symbol('BREADCRUMBS_COUNT_BREADCRUMB_KEY');
+export function useBreadcrumbsList() {
+  var {
+    childProviders,
+    bindChildren
+  } = useChildren(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
+  var {
+    length
+  } = useAtChildrenCounter(BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY);
+  return {
+    length,
+    breadcrumbList: childProviders,
+    bindBreadcrumbList: bindChildren
+  };
+}

package/es/breadcrumbs/style/index.js

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../breadcrumbs.css'
+import '../BreadcrumbsSfc.css'

package/es/button/Button.js

@@ -2,7 +2,8 @@ import Ripple from '../ripple';
 import VarLoading from '../loading';
 import { defineComponent, ref } from 'vue';
 import { props } from './props';
-import { createNamespace } from '../utils/components';
+import { call, createNamespace } from '../utils/components';
+import { isArray } from '@varlet/shared';
 var {
   n,
   classes
@@ -67,7 +68,8 @@ export default defineComponent({
     var attemptAutoLoading = result => {
       if (props.autoLoading) {
         pending.value = true;
-        Promise.resolve(result).then(() => {
+        result = isArray(result) ? result : [result];
+        Promise.all(result).then(() => {
           pending.value = false;
         }).catch(() => {
           pending.value = false;
@@ -86,7 +88,7 @@ export default defineComponent({
         return;
       }
 
-      attemptAutoLoading(onClick(e));
+      attemptAutoLoading(call(onClick, e));
     };
 
     var handleTouchstart = e => {
@@ -100,7 +102,7 @@ export default defineComponent({
         return;
       }
 
-      attemptAutoLoading(onTouchstart(e));
+      attemptAutoLoading(call(onTouchstart, e));
     };
 
     return {

package/es/button/props.js

@@ -1,7 +1,7 @@
 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 { props as loadingProps } from '../loading/props';
-import { pickProps } from '../utils/components';
+import { defineListenerProp, pickProps } from '../utils/components';
 
 function typeValidator(type) {
   return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type);
@@ -68,10 +68,6 @@ export var props = {
   loadingColor: _extends({}, pickProps(loadingProps, 'color'), {
     default: 'currentColor'
   }),
-  onClick: {
-    type: Function
-  },
-  onTouchstart: {
-    type: Function
-  }
+  onClick: defineListenerProp(),
+  onTouchstart: defineListenerProp()
 };

package/es/card/Card.js

@@ -30,7 +30,7 @@ export function render(_ctx, _cache) {
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
     ref: "card",
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.elevation, _ctx.n("$-elevation--" + _ctx.elevation), _ctx.n('$-elevation--1')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.outline, _ctx.n('--outline')], [_ctx.elevation, _ctx.n("$-elevation--" + _ctx.elevation), _ctx.n('$-elevation--1')])),
     style: _normalizeStyle({
       zIndex: _ctx.floated ? _ctx.zIndex : undefined
     }),

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { padding: var(--card-close-button-padding); width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}
+:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-outline-color: rgba(0, 0, 0, 0.12); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { padding: var(--card-close-button-padding); width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}

package/es/card/props.js

@@ -1,3 +1,5 @@
+import { defineListenerProp } from '../utils/components';
+
 function fitValidator(fit) {
   return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit);
 }
@@ -17,6 +19,10 @@ export var props = {
   imageWidth: {
     type: [String, Number]
   },
+  outline: {
+    type: Boolean,
+    default: false
+  },
   layout: {
     type: String,
     default: 'column'
@@ -25,9 +31,6 @@ export var props = {
     type: Boolean,
     default: false
   },
-  'onUpdate:floating': {
-    type: Function
-  },
   floatingDuration: {
     type: Number,
     default: 250
@@ -51,7 +54,6 @@ export var props = {
     type: Boolean,
     default: false
   },
-  onClick: {
-    type: Function
-  }
+  onClick: defineListenerProp(),
+  'onUpdate:floating': defineListenerProp()
 };

package/es/checkbox/props.js

@@ -1,3 +1,4 @@
+import { defineListenerProp } from '../utils/components';
 export var props = {
   modelValue: {
     type: [String, Number, Boolean, Object, Array],
@@ -39,13 +40,7 @@ export var props = {
   rules: {
     type: Array
   },
-  onClick: {
-    type: Function
-  },
-  onChange: {
-    type: Function
-  },
-  'onUpdate:modelValue': {
-    type: Function
-  }
+  onClick: defineListenerProp(),
+  onChange: defineListenerProp(),
+  'onUpdate:modelValue': defineListenerProp()
 };

package/es/checkbox-group/props.js

@@ -1,3 +1,4 @@
+import { defineListenerProp } from '../utils/components';
 export function directionValidator(direction) {
   return ['horizontal', 'vertical'].includes(direction);
 }
@@ -21,10 +22,6 @@ export var props = {
   rules: {
     type: Array
   },
-  onChange: {
-    type: Function
-  },
-  'onUpdate:modelValue': {
-    type: Function
-  }
+  onChange: defineListenerProp(),
+  'onUpdate:modelValue': defineListenerProp()
 };

package/es/chip/props.js

@@ -1,4 +1,4 @@
-import { pickProps } from '../utils/components';
+import { defineListenerProp, pickProps } from '../utils/components';
 import { props as iconProps } from '../icon/props';
 
 function typeValidator(type) {
@@ -43,7 +43,5 @@ export var props = {
     type: Boolean,
     default: false
   },
-  onClose: {
-    type: Function
-  }
+  onClose: defineListenerProp()
 };

package/es/col/props.js

@@ -1,3 +1,5 @@
+import { defineListenerProp } from '../utils/components';
+
 function directionValidator(direction) {
   return ['row', 'column'].includes(direction);
 }
@@ -16,9 +18,6 @@ export var props = {
     default: 'row',
     validator: directionValidator
   },
-  onClick: {
-    type: Function
-  },
   xs: {
     type: [Object, Number, String]
   },
@@ -33,5 +32,6 @@ export var props = {
   },
   xl: {
     type: [Object, Number, String]
-  }
+  },
+  onClick: defineListenerProp()
 };

package/es/collapse/props.js

@@ -1,3 +1,4 @@
+import { defineListenerProp } from '../utils/components';
 export var props = {
   modelValue: {
     type: [Array, String, Number]
@@ -10,10 +11,6 @@ export var props = {
     type: Boolean,
     default: true
   },
-  onChange: {
-    type: Function
-  },
-  'onUpdate:modelValue': {
-    type: Function
-  }
+  onChange: defineListenerProp(),
+  'onUpdate:modelValue': defineListenerProp()
 };

package/es/countdown/props.js

@@ -1,3 +1,4 @@
+import { defineListenerProp } from '../utils/components';
 export var props = {
   time: {
     type: [String, Number],
@@ -11,10 +12,6 @@ export var props = {
     type: Boolean,
     default: true
   },
-  onEnd: {
-    type: Function
-  },
-  onChange: {
-    type: Function
-  }
+  onEnd: defineListenerProp(),
+  onChange: defineListenerProp()
 };

package/es/counter/props.js

@@ -1,3 +1,4 @@
+import { defineListenerProp } from '../utils/components';
 export var props = {
   modelValue: {
     type: [String, Number],
@@ -75,19 +76,9 @@ export var props = {
   rules: {
     type: Array
   },
-  onBeforeChange: {
-    type: Function
-  },
-  onChange: {
-    type: Function
-  },
-  onIncrement: {
-    type: Function
-  },
-  onDecrement: {
-    type: Function
-  },
-  'onUpdate:modelValue': {
-    type: Function
-  }
+  onBeforeChange: defineListenerProp(),
+  onChange: defineListenerProp(),
+  onIncrement: defineListenerProp(),
+  onDecrement: defineListenerProp(),
+  'onUpdate:modelValue': defineListenerProp()
 };

package/es/date-picker/props.js

@@ -1,3 +1,5 @@
+import { defineListenerProp } from '../utils/components';
+
 function typeValidator(type) {
   return ['date', 'month'].includes(type);
 }
@@ -94,13 +96,7 @@ export var props = {
     type: Boolean,
     default: true
   },
-  onPreview: {
-    type: Function
-  },
-  onChange: {
-    type: Function
-  },
-  'onUpdate:modelValue': {
-    type: Function
-  }
+  onPreview: defineListenerProp(),
+  onChange: defineListenerProp(),
+  'onUpdate:modelValue': defineListenerProp()
 };