@varlet/ui 2.7.0-alpha.1673714503631 → 2.7.0

package/README.md

@@ -24,7 +24,7 @@
 
 ### Intro
 
-Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by partners in the community.
+Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by `varletjs` community team.
 
 
 ### Features

package/README.zh-CN.md

@@ -25,7 +25,7 @@
 
 ### 介绍
 
-Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。
+Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由 `varletjs` 社区团队进行维护。
 
 ### 特性
 - 🚀   提供50+个高质量通用组件 

package/es/app-bar/appBar.css

@@ -1 +1 @@
-:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px;}.var-app-bar { position: relative; display: flex; width: 100%; justify-content: center; align-items: center; height: var(--app-bar-height); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__title { flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%; z-index: 2;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg);}.var-app-bar { position: relative; display: flex; width: 100%; font-size: var(--app-bar-font-size); justify-content: center; align-items: center; height: var(--app-bar-height); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%; z-index: 2;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}

package/es/back-top/index.mjs

@@ -4,5 +4,6 @@ BackTop.install = function (app) {
   app.component(BackTop.name, BackTop);
 };
 
+export { props as backTopProps } from './props.mjs';
 export var _BackTopComponent = BackTop;
 export default BackTop;

package/es/cell/index.mjs

@@ -4,5 +4,6 @@ Cell.install = function (app) {
   app.component(Cell.name, Cell);
 };
 
+export { props as cellProps } from './props.mjs';
 export var _CellComponent = Cell;
 export default Cell;

package/es/collapse/index.mjs

@@ -4,5 +4,6 @@ Collapse.install = function (app) {
   app.component(Collapse.name, Collapse);
 };
 
+export { props as collapseProps } from './props.mjs';
 export var _CollapseComponent = Collapse;
 export default Collapse;

package/es/collapse-item/index.mjs

@@ -4,5 +4,6 @@ CollapseItem.install = function (app) {
   app.component(CollapseItem.name, CollapseItem);
 };
 
+export { props as collapseItemProps } from './props.mjs';
 export var _CollapseItemComponent = CollapseItem;
 export default CollapseItem;

package/es/countdown/index.mjs

@@ -4,5 +4,6 @@ Countdown.install = function (app) {
   app.component(Countdown.name, Countdown);
 };
 
+export { props as countdownProps } from './props.mjs';
 export var _CountdownComponent = Countdown;
 export default Countdown;

package/es/date-picker/index.mjs

@@ -4,5 +4,6 @@ DatePicker.install = function (app) {
   app.component(DatePicker.name, DatePicker);
 };
 
+export { props as datePickerProps } from './props.mjs';
 export var _DatePickerComponent = DatePicker;
 export default DatePicker;

package/es/index-anchor/index.mjs

@@ -4,5 +4,6 @@ IndexAnchor.install = function (app) {
   app.component(IndexAnchor.name, IndexAnchor);
 };
 
+export { props as indexAnchorProps } from './props.mjs';
 export var _IndexAnchorComponent = IndexAnchor;
 export default IndexAnchor;

package/es/index-bar/IndexBar.mjs

@@ -35,7 +35,10 @@ export function render(_ctx, _cache) {
       style: _normalizeStyle({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
       }),
-      onClick: $event => _ctx.anchorClick(anchorName, true)
+      onClick: $event => _ctx.anchorClick({
+        anchorName,
+        manualCall: true
+      })
     }, _toDisplayString(anchorName), 15
     /* TEXT, CLASS, STYLE, PROPS */
     , _hoisted_1);
@@ -76,25 +79,40 @@ export default defineComponent({
     };
     bindIndexAnchors(indexBarProvider);
 
-    var emitEvent = anchor => {
+    var emitEvent = (anchor, options) => {
       var anchorName = isPlainObject(anchor) ? anchor.name.value : anchor;
       if (anchorName === active.value || anchorName === undefined) return;
       active.value = anchorName;
-      call(props.onChange, anchorName);
+
+      if ((options == null ? void 0 : options.event) !== false) {
+        call(props.onChange, anchorName);
+      }
+    };
+
+    var getOffsetTop = () => {
+      if (!('getBoundingClientRect' in scroller.value)) return 0;
+      var {
+        top: parentTop
+      } = scroller.value.getBoundingClientRect();
+      var {
+        scrollTop
+      } = scroller.value;
+      var {
+        top: targetTop
+      } = barEl.value.getBoundingClientRect();
+      return scrollTop - parentTop + targetTop;
     };
 
     var handleScroll = () => {
       var scrollTop = getScrollTop(scroller.value);
       var scrollHeight = scroller.value === window ? document.body.scrollHeight : scroller.value.scrollHeight;
-      var {
-        offsetTop
-      } = barEl.value;
+      var offsetTop = getOffsetTop();
       indexAnchors.forEach((anchor, index) => {
         var anchorTop = anchor.ownTop.value;
         var top = scrollTop - anchorTop + stickyOffsetTop.value - offsetTop;
         var distance = index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].ownTop.value - anchor.ownTop.value;
 
-        if (top >= 0 && top < distance && !clickedName.value) {
+        if (top >= 0 && top < distance && clickedName.value === '') {
           if (index && !props.cssMode) {
             indexAnchors[index - 1].setDisabled(true);
           }
@@ -106,23 +124,26 @@ export default defineComponent({
     };
 
     var anchorClick = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator(function* (anchorName, manualCall) {
+      var _ref2 = _asyncToGenerator(function* (_ref) {
         var {
-          offsetTop
-        } = barEl.value;
+          anchorName,
+          manualCall = false,
+          options
+        } = _ref;
         if (manualCall) call(props.onClick, anchorName);
         if (anchorName === active.value) return;
-        var indexAnchor = indexAnchors.find(_ref2 => {
+        var indexAnchor = indexAnchors.find(_ref3 => {
           var {
             name
-          } = _ref2;
+          } = _ref3;
           return anchorName === name.value;
         });
         if (!indexAnchor) return;
+        var offsetTop = getOffsetTop();
         var top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
         var left = getScrollLeft(scroller.value);
         clickedName.value = anchorName;
-        emitEvent(anchorName);
+        emitEvent(anchorName, options);
         yield varScrollTo(scroller.value, {
           left,
           top,
@@ -134,23 +155,26 @@ export default defineComponent({
         });
       });
 
-      return function anchorClick(_x, _x2) {
-        return _ref.apply(this, arguments);
+      return function anchorClick(_x) {
+        return _ref2.apply(this, arguments);
       };
     }(); // expose
 
 
-    var scrollTo = index => {
-      requestAnimationFrame(() => anchorClick(index));
+    var scrollTo = (index, options) => {
+      requestAnimationFrame(() => anchorClick({
+        anchorName: index,
+        options
+      }));
     };
 
     watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {
       yield doubleRaf();
-      indexAnchors.forEach(_ref4 => {
+      indexAnchors.forEach(_ref5 => {
         var {
           name,
           setOwnTop
-        } = _ref4;
+        } = _ref5;
         if (name.value) anchorNameList.value.push(name.value);
         setOwnTop();
       });

package/es/index-bar/index.mjs

@@ -4,5 +4,6 @@ IndexBar.install = function (app) {
   app.component(IndexBar.name, IndexBar);
 };
 
+export { props as indexBarProps } from './props.mjs';
 export var _IndexBarComponent = IndexBar;
 export default IndexBar;

package/es/index.bundle.mjs

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

package/es/index.mjs

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

package/es/loading/index.mjs

@@ -4,5 +4,6 @@ Loading.install = function (app) {
   app.component(Loading.name, Loading);
 };
 
+export { props as loadingProps } from './props.mjs';
 export var _LoadingComponent = Loading;
 export default Loading;

package/es/loading-bar/index.mjs

@@ -62,5 +62,6 @@ var LoadingBar = {
   error,
   mergeConfig
 };
+export { props as loadingBarProps } from './props.mjs';
 export var _LoadingBarComponent = LoadingBar;
 export default LoadingBar;

package/es/pagination/Pagination.mjs

@@ -4,7 +4,7 @@ import VarIcon from '../icon/index.mjs';
 import VarCell from '../cell/index.mjs';
 import VarInput from '../input/index.mjs';
 import { defineComponent, ref, computed, watch } from 'vue';
-import { props } from './porps.mjs';
+import { props } from './props.mjs';
 import { isNumber, toNumber } from '@varlet/shared';
 import { pack } from '../locale/index.mjs';
 import { call, createNamespace } from '../utils/components.mjs';

package/es/pagination/index.mjs

@@ -4,5 +4,6 @@ Pagination.install = function (app) {
   app.component(Pagination.name, Pagination);
 };
 
+export { props as paginationProps } from './props.mjs';
 export var _PaginationComponent = Pagination;
 export default Pagination;

package/es/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; width: 100%; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent;}.var-pagination__item--disabled { cursor: default; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: default;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}
+:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent;}.var-pagination__item--disabled { cursor: default; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: default;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}

package/es/progress/index.mjs

@@ -4,5 +4,6 @@ Progress.install = function (app) {
   app.component(Progress.name, Progress);
 };
 
+export { props as progressProps } from './props.mjs';
 export var _ProgressComponent = Progress;
 export default Progress;

package/es/pull-refresh/index.mjs

@@ -4,5 +4,6 @@ PullRefresh.install = function (app) {
   app.component(PullRefresh.name, PullRefresh);
 };
 
+export { props as pullRefreshProps } from './props.mjs';
 export var _PullRefreshComponent = PullRefresh;
 export default PullRefresh;

package/es/slider/Slider.mjs

@@ -3,19 +3,12 @@ import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useForm } from '../form/provide.mjs';
 import { getLeft, multiplySizeUnit } from '../utils/elements.mjs';
 import { isArray, isNumber, toNumber } from '@varlet/shared';
-import { props } from './props.mjs';
+import { props, Thumbs } from './props.mjs';
 import VarFormDetails from '../form-details/index.mjs';
 var {
   n,
   classes
 } = createNamespace('slider');
-var Thumbs;
-
-(function (Thumbs) {
-  Thumbs["First"] = "1";
-  Thumbs["Second"] = "2";
-})(Thumbs || (Thumbs = {}));
-
 import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, withModifiers as _withModifiers, resolveComponent as _resolveComponent, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);

package/es/slider/index.mjs

@@ -4,5 +4,6 @@ Slider.install = function (app) {
   app.component(Slider.name, Slider);
 };
 
+export { props as sliderProps } from './props.mjs';
 export var _SliderComponent = Slider;
 export default Slider;

package/es/slider/props.mjs

@@ -4,6 +4,13 @@ function labelValidator(label) {
   return ['always', 'normal', 'never'].includes(label);
 }
 
+export var Thumbs;
+
+(function (Thumbs) {
+  Thumbs["First"] = "1";
+  Thumbs["Second"] = "2";
+})(Thumbs || (Thumbs = {}));
+
 export var props = {
   // 当前进度百分比
   modelValue: {

package/es/snackbar/index.mjs

@@ -227,5 +227,6 @@ VarSnackbar.install = function (app) {
   app.component(VarSnackbar.name, VarSnackbar);
 };
 
+export { props as snackbarProps } from './props.mjs';
 export var _SnackbarComponent = VarSnackbar;
 export default Snackbar;

package/es/step/index.mjs

@@ -4,5 +4,6 @@ Step.install = function (app) {
   app.component(Step.name, Step);
 };
 
+export { props as stepProps } from './props.mjs';
 export var _StepComponent = Step;
 export default Step;

package/es/steps/index.mjs

@@ -4,5 +4,6 @@ Steps.install = function (app) {
   app.component(Steps.name, Steps);
 };
 
+export { props as stepsProps } from './props.mjs';
 export var _StepsComponent = Steps;
 export default Steps;