@varlet/ui 2.11.4 → 2.11.6-alpha.1686800314469

package/es/app-bar/AppBar.mjs

@@ -1,7 +1,7 @@
 import { defineComponent, ref, onUpdated, computed } from 'vue';
 import { props } from './props.mjs';
 import { createNamespace, formatElevation } from '../utils/components.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -94,7 +94,7 @@ var __sfc__ = defineComponent({
         color: textColor
       };
     });
-    useMounted(computePadding);
+    onSmartMounted(computePadding);
     onUpdated(computePadding);
     return {
       n,

package/es/avatar/Avatar.mjs

@@ -3,7 +3,7 @@ import { defineComponent, ref, onUpdated } from 'vue';
 import { props, internalSizeValidator, sizeValidator } from './props.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -129,7 +129,7 @@ var __sfc__ = defineComponent({
       call(props.onClick, e);
     };
 
-    useMounted(getScale);
+    onSmartMounted(getScale);
     onUpdated(getScale);
     return {
       internalSizeValidator,

package/es/back-top/BackTop.mjs

@@ -1,11 +1,12 @@
 import VarButton from '../button/index.mjs';
 import VarIcon from '../icon/index.mjs';
-import { defineComponent, ref, onBeforeUnmount, onDeactivated, onMounted, onActivated } from 'vue';
+import { defineComponent, ref, onMounted, onActivated } from 'vue';
 import { props } from './props.mjs';
 import { throttle } from '@varlet/shared';
 import { easeInOutCubic } from '../utils/shared.mjs';
 import { getScrollTop, getScrollLeft, scrollTo, getParentScroller, toPxNum, toSizeUnit, getTarget } from '../utils/elements.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
+import { onSmartUnmounted } from '@varlet/use';
 var {
   n,
   classes
@@ -99,8 +100,7 @@ var __sfc__ = defineComponent({
       disabled.value = false;
     });
     onActivated(addScrollerEventListener);
-    onBeforeUnmount(removeScrollerEventListener);
-    onDeactivated(removeScrollerEventListener);
+    onSmartUnmounted(removeScrollerEventListener);
     return {
       disabled,
       show,

package/es/bottom-navigation/BottomNavigation.mjs

@@ -6,7 +6,7 @@ import { props } from './props.mjs';
 import { useBottomNavigationItems } from './provide.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 import { isNumber, normalizeToArray } from '@varlet/shared';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -186,7 +186,7 @@ var __sfc__ = defineComponent({
       immediate: true,
       deep: true
     });
-    useMounted(() => {
+    onSmartMounted(() => {
       if (!slots.fab) {
         return;
       }

package/es/button/button.css

@@ -1 +1 @@
-:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
+:root { --button-default-color: #f5f5f5; --button-default-text-color: #555; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: var(--button-default-text-color); background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}

package/es/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: transparent; --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative;}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__item--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
+:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative;}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__item--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}

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

@@ -10,7 +10,7 @@ import { WEEK_HEADER } from '../props.mjs';
 import { toNumber } from '@varlet/shared';
 import { createNamespace } from '../../utils/components.mjs';
 import { pack } from '../../locale/index.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 var {
@@ -331,7 +331,7 @@ var __sfc__ = defineComponent({
       headerEl.value.checkDate(checkType);
     };
 
-    useMounted(() => {
+    onSmartMounted(() => {
       initDate();
       initHeader();
     });

package/es/date-picker/src/year-picker-panel.mjs

@@ -2,7 +2,7 @@ import dayjs from 'dayjs/esm';
 import { defineComponent, computed } from 'vue';
 import { toNumber } from '@varlet/shared';
 import { createNamespace } from '../../utils/components.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -90,7 +90,7 @@ var __sfc__ = defineComponent({
       emit('choose-year', year);
     };
 
-    useMounted(() => {
+    onSmartMounted(() => {
       var activeEl = document.querySelector("." + n('item--active'));
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: 'center'

package/es/divider/Divider.mjs

@@ -5,7 +5,7 @@ import { toSizeUnit } from '../utils/elements.mjs';
 import { isBoolean, toNumber } from '@varlet/shared';
 import { props } from './props.mjs';
 import { createNamespace } from '../utils/components.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -69,7 +69,7 @@ var __sfc__ = defineComponent({
       state.withText = Boolean(slots.default) || Boolean(props.description);
     };
 
-    useMounted(() => {
+    onSmartMounted(() => {
       checkHasText();
     });
     onUpdated(() => {

package/es/field-decorator/FieldDecorator.mjs

@@ -3,7 +3,7 @@ import { defineComponent, ref, computed, onUpdated } from 'vue';
 import { props } from './props.mjs';
 import { isEmpty } from '@varlet/shared';
 import { createNamespace, call } from '../utils/components.mjs';
-import { useEventListener, useMounted } from '@varlet/use';
+import { onWindowResize, onSmartMounted } from '@varlet/use';
 import { getStyle } from '../utils/elements.mjs';
 var {
   n,
@@ -168,9 +168,9 @@ var __sfc__ = defineComponent({
       call(props.onClick, e);
     };
 
-    useMounted(resize);
+    onWindowResize(resize);
+    onSmartMounted(resize);
     onUpdated(resize);
-    useEventListener(() => window, 'resize', resize);
     return {
       placeholderTextEl,
       color,

package/es/index-bar/IndexBar.mjs

@@ -9,7 +9,7 @@ import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFram
 import { useIndexAnchors } from './provide.mjs';
 import { props } from './props.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -209,7 +209,7 @@ var __sfc__ = defineComponent({
         setOwnTop();
       });
     }));
-    useMounted( /*#__PURE__*/_asyncToGenerator(function* () {
+    onSmartMounted( /*#__PURE__*/_asyncToGenerator(function* () {
       yield setScroller();
       addScrollerListener();
     }));

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.11.4'
+const version = '2.11.6-alpha.1686800314469'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.11.4'
+const version = '2.11.6-alpha.1686800314469'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/input/Input.mjs

@@ -5,7 +5,7 @@ import { props } from './props.mjs';
 import { isEmpty, toNumber } from '@varlet/shared';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useForm } from '../form/provide.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -406,7 +406,7 @@ var __sfc__ = defineComponent({
       resetValidation
     };
     call(bindForm, inputProvider);
-    useMounted(() => {
+    onSmartMounted(() => {
       if (props.autofocus) {
         focus();
       }

package/es/link/link.css

@@ -1 +1 @@
-:root { --link-primary-color: var(--color-primary); --link-danger-color: var(--color-danger); --link-success-color: var(--color-success); --link-warning-color: var(--color-warning); --link-info-color: var(--color-info); --link-disabled-color: var(--color-text-disabled); --link-font-size: var(--font-size-md);}.var-link { position: relative; justify-content: center; align-items: center; outline: none; cursor: pointer; font-family: inherit; white-space: nowrap; color: inherit; text-decoration: none; font-size: var(--link-font-size);}.var-link--underline-always { text-decoration: underline;}.var-link--underline-hover:hover { text-decoration: underline;}.var-link--default { color: inherit;}.var-link--primary { color: var(--link-primary-color);}.var-link--info { color: var(--link-info-color);}.var-link--success { color: var(--link-success-color);}.var-link--warning { color: var(--link-warning-color);}.var-link--danger { color: var(--link-danger-color);}.var-link--disabled { color: var(--link-disabled-color); cursor: not-allowed;}
+:root { --link-default-color: #555; --link-primary-color: var(--color-primary); --link-danger-color: var(--color-danger); --link-success-color: var(--color-success); --link-warning-color: var(--color-warning); --link-info-color: var(--color-info); --link-disabled-color: var(--color-text-disabled); --link-font-size: var(--font-size-md);}.var-link { position: relative; justify-content: center; align-items: center; outline: none; cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none; font-size: var(--link-font-size);}.var-link--underline-always { text-decoration: underline;}.var-link--underline-hover:hover { text-decoration: underline;}.var-link--default { color: var(--link-default-color);}.var-link--primary { color: var(--link-primary-color);}.var-link--info { color: var(--link-info-color);}.var-link--success { color: var(--link-success-color);}.var-link--warning { color: var(--link-warning-color);}.var-link--danger { color: var(--link-danger-color);}.var-link--disabled { color: var(--link-disabled-color); cursor: not-allowed;}

package/es/list/List.mjs

@@ -4,14 +4,14 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import VarLoading from '../loading/index.mjs';
 import Ripple from '../ripple/index.mjs';
-import { defineComponent, onUnmounted, ref, nextTick, onDeactivated, watch } from 'vue';
+import { defineComponent, ref, nextTick, watch } from 'vue';
 import { getParentScroller, getRect, toPxNum } from '../utils/elements.mjs';
 import { props } from './props.mjs';
 import { isNumber } from '@varlet/shared';
 import { dt } from '../utils/shared.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 import { pack } from '../locale/index.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted, onSmartUnmounted } from '@varlet/use';
 import { useTabItem } from './provide.mjs';
 var {
   n,
@@ -132,7 +132,7 @@ var __sfc__ = defineComponent({
     }
 
     watch(() => [props.loading, props.error, props.finished], check);
-    useMounted(() => {
+    onSmartMounted(() => {
       scroller = getParentScroller(listEl.value);
       scroller.addEventListener('scroll', check);
 
@@ -140,8 +140,7 @@ var __sfc__ = defineComponent({
         check();
       }
     });
-    onDeactivated(removeScrollerListener);
-    onUnmounted(removeScrollerListener);
+    onSmartUnmounted(removeScrollerListener);
     return {
       pack,
       listEl,

package/es/pagination/Pagination.mjs

@@ -91,10 +91,10 @@ function __render__(_ctx, _cache) {
     key: 2,
     class: _normalizeClass(_ctx.classes(_ctx.n('size'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, [_createVNode(_component_var_menu, {
+    placement: "cover-top",
     disabled: _ctx.disabled,
     show: _ctx.menuVisible,
-    "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event),
-    "offset-x": -4
+    "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event)
   }, {
     menu: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sizeOption, (option, index) => {
       return _withDirectives((_openBlock(), _createBlock(_component_var_cell, {

package/es/pull-refresh/PullRefresh.mjs

@@ -8,7 +8,7 @@ import { getParentScroller, getScrollTop, getTarget, getRect } from '../utils/el
 import { props } from './props.mjs';
 import { isString, toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
-import { useEventListener, useMounted } from '@varlet/use';
+import { useEventListener, onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -210,7 +210,7 @@ var __sfc__ = defineComponent({
         }, toNumber(props.successDuration));
       }
     });
-    useMounted(setScroller);
+    onSmartMounted(setScroller);
     useEventListener(freshNode, 'touchmove', touchMove);
     return {
       n,

package/es/rate/Rate.mjs

@@ -100,6 +100,7 @@ var __sfc__ = defineComponent({
       hovering
     } = useHoverOverlay();
     var currentHoveringValue = ref(-1);
+    var lastScore = Number(props.modelValue);
 
     var getStyle = val => {
       var {
@@ -161,13 +162,23 @@ var __sfc__ = defineComponent({
     };
 
     var changeValue = (score, event) => {
-      if (props.half) {
+      var {
+        half,
+        clearable
+      } = props;
+
+      if (half) {
         var {
           offsetWidth
         } = event.target;
         if (event.offsetX <= Math.floor(offsetWidth / 2)) score -= 0.5;
-      }
+      } // set score to 0 when last score is equal to current score
+      // and the value of clearable is true
+
+
+      if (lastScore === score && clearable) score = 0; // update last score
 
+      lastScore = score;
       call(props['onUpdate:modelValue'], score);
     };
 

package/es/rate/props.mjs

@@ -54,6 +54,10 @@ export var props = {
     type: Boolean,
     default: true
   },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
   rules: {
     type: Array
   },

package/es/rate/rate.css

@@ -1 +1 @@
-:root { --rate-color: var(--color-text); --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { position: relative; padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; color: var(--rate-color); transition: color 0.25s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate__content-icon[var-rate-cover] { font-size: 24px;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}
+:root { --rate-color: var(--color-text); --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { position: relative; display: flex; padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; color: var(--rate-color); transition: color 0.25s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate__content-icon[var-rate-cover] { font-size: 24px;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}

package/es/slider/Slider.mjs

@@ -8,7 +8,7 @@ import { getLeft, multiplySizeUnit, getRect } from '../utils/elements.mjs';
 import { warn } from '../utils/logger.mjs';
 import { isArray, isNumber, toNumber } from '@varlet/shared';
 import { props, Thumbs } from './props.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -475,7 +475,7 @@ var __sfc__ = defineComponent({
       setProps(modelValue, toNumber(step));
     });
     watch(maxDistance, () => setProps());
-    useMounted(() => {
+    onSmartMounted(() => {
       if (!stepValidator() || !valueValidator()) return;
       maxDistance.value = sliderEl.value[isVertical.value ? 'offsetHeight' : 'offsetWidth'];
     });

package/es/snackbar/core.mjs

@@ -6,7 +6,7 @@ import { props } from './props.mjs';
 import { useLock } from '../context/lock.mjs';
 import { SNACKBAR_TYPE } from './index.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
-import { useMounted } from '@varlet/use';
+import { onSmartMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -109,7 +109,7 @@ var __sfc__ = defineComponent({
       clearTimeout(timer.value);
       updateAfterDuration();
     });
-    useMounted(() => {
+    onSmartMounted(() => {
       if (props.show) {
         call(props.onOpen);
         updateAfterDuration();

package/es/snackbar/style/index.mjs

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'

package/es/step/Step.mjs

@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { props } from './props.mjs';
 import { useSteps } from './provide.mjs';
 import VarIcon from '../icon/index.mjs';
@@ -7,7 +7,7 @@ var {
   n,
   classes
 } = createNamespace('step');
-import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -22,9 +22,6 @@ function __render__(_ctx, _cache) {
     class: _normalizeClass(_ctx.n())
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n(_ctx.direction))
-  }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.n(_ctx.direction + "-main")),
-    ref: _ctx.getRef
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(_ctx.direction + "-tag"), [_ctx.isActive || _ctx.isCurrent, _ctx.n(_ctx.direction + "-tag--active")])),
     style: _normalizeStyle({
@@ -65,17 +62,11 @@ function __render__(_ctx, _cache) {
     })
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
-  )], 2
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n(_ctx.direction + "-line"))
+  }, null, 2
   /* CLASS */
-  ), !_ctx.isLastChild ? (_openBlock(), _createElementBlock("div", {
-    key: 0,
-    class: _normalizeClass(_ctx.n(_ctx.direction + "-line")),
-    style: _normalizeStyle({
-      margin: _ctx.lineMargin
-    })
-  }, null, 6
-  /* CLASS, STYLE */
-  )) : _createCommentVNode("v-if", true)], 2
+  )], 2
   /* CLASS */
   )], 2
   /* CLASS */
@@ -90,9 +81,6 @@ var __sfc__ = defineComponent({
   props,
 
   setup() {
-    var main = ref(null);
-    var lineMargin = ref('');
-    var isLastChild = ref(false);
     var {
       index,
       steps,
@@ -100,7 +88,6 @@ var __sfc__ = defineComponent({
     } = useSteps();
     var {
       active,
-      length,
       activeColor,
       inactiveColor,
       direction,
@@ -114,35 +101,17 @@ var __sfc__ = defineComponent({
 
     var click = () => clickStep(index.value);
 
-    var getRef = el => {
-      if (direction.value === 'horizontal') {
-        main.value = el;
-      }
-    };
-
     bindSteps(stepProvider);
-    watch(length, newLength => {
-      isLastChild.value = newLength - 1 === index.value;
-
-      if (main.value) {
-        var margin = main.value.offsetWidth / 2 - 14;
-        lineMargin.value = "0 -" + margin + "px";
-      }
-    });
     return {
       n,
       classes,
-      main,
       index,
       isActive,
       isCurrent,
       direction,
-      lineMargin,
       activeColor,
       inactiveColor,
-      isLastChild,
-      click,
-      getRef
+      click
     };
   }
 

package/es/step/step.css

@@ -1 +1 @@
-:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-vertical-min-height: 30px; --step-vertical-tag-margin: 0 4px; --step-vertical-line-height: calc(100% - 30px); --step-vertical-line-min-height: 20px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { display: flex; position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step__horizontal { display: flex; width: 100%;}.var-step__horizontal-main { display: flex; flex-direction: column; align-items: center; flex-basis: 100%;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: relative; top: 14px; flex: 1; height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { width: 100%;}.var-step__vertical-main { display: flex; align-items: flex-start; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { flex-shrink: 0; margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: relative; height: var(--step-vertical-line-height); left: 14px; top: calc(-100% + 45px); min-height: var(--step-vertical-line-min-height); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}
+:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-line-gap: 8px; --step-min-size: calc(var(--step-tag-size) + var(--step-line-gap)); --step-line-size: calc(100% - var(--step-min-size)); --step-vertical-tag-margin: 0 4px; --step-vertical-min-height: 50px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step:last-child .var-step__horizontal-line { width: 0;}.var-step:last-child .var-step__vertical-line { height: 0;}.var-step__horizontal { display: flex; flex-direction: column; align-items: center;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: absolute; top: calc(var(--step-min-size) / 2); left: calc(50% + var(--step-min-size) / 2); width: var(--step-line-size); height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { display: flex; height: 100%; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { flex-shrink: 0; margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: absolute; height: var(--step-line-size); left: calc(var(--step-min-size) / 2); top: calc(var(--step-min-size) - var(--step-line-gap) / 2); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}

package/es/steps/Steps.mjs

@@ -28,7 +28,6 @@ var __sfc__ = defineComponent({
     var inactiveColor = computed(() => props.inactiveColor);
     var direction = computed(() => props.direction);
     var {
-      length,
       bindStep
     } = useStep();
 
@@ -38,7 +37,6 @@ var __sfc__ = defineComponent({
 
     var stepsProvider = {
       active,
-      length,
       direction,
       activeColor,
       inactiveColor,

package/es/steps/provide.mjs

@@ -3,11 +3,9 @@ export var STEPS_BIND_STEP_KEY = Symbol('STEPS_BIND_STEP_KEY');
 export function useStep() {
   var {
     bindChildren,
-    length,
     childProviders
   } = useChildren(STEPS_BIND_STEP_KEY);
   return {
-    length,
     step: childProviders,
     bindStep: bindChildren
   };

package/es/sticky/Sticky.mjs

@@ -2,12 +2,12 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 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, onUnmounted, onDeactivated, computed, watch } from 'vue';
+import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './props.mjs';
 import { doubleRaf, getParentScroller, raf, toPxNum, getRect } from '../utils/elements.mjs';
 import { toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
-import { useEventListener, useMounted } from '@varlet/use';
+import { useEventListener, onSmartMounted, onWindowResize, onSmartUnmounted } from '@varlet/use';
 var {
   n,
   classes
@@ -156,11 +156,10 @@ var __sfc__ = defineComponent({
     };
 
     watch(() => props.disabled, resize);
-    useMounted(addScrollListener);
-    onUnmounted(removeScrollListener);
-    onDeactivated(removeScrollListener);
+    onSmartMounted(addScrollListener);
+    onSmartUnmounted(removeScrollListener);
+    onWindowResize(resize);
     useEventListener(() => window, 'scroll', handleScroll);
-    useEventListener(() => window, 'resize', resize);
     return {
       n,
       classes,