@varlet/ui 1.26.6 → 1.26.7

package/README.en-US.md

@@ -9,10 +9,10 @@
   </p>
   <p>
     <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
-    <img src="https://img.shields.io/github/stars/haoziqaq/varlet" alt="ci">
+    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
-    <img src="https://img.shields.io/codecov/c/github/haoziqaq/varlet" alt="coverage">
+    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
     <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
     <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
@@ -26,17 +26,17 @@ Varlet is a Material design mobile component library developed based on `Vue3`,
 
 
 ### Features
- 1. Provide 50 high quality general purpose components
- 2. Components are very lightweight
- 3. Developed by Chinese, complete Chinese and English documentation and logistics support
- 4. Support on-demand introduction
- 5. Support theme customization
- 6. Support internationalization
- 7. Support WebStorm, VS Code component syntax highlighting
- 8. Support the SSR
- 9. Support the Typescript
- 10. Make sure more than 90 percent unit test coverage, providing stability assurance
- 11. Support dark mode
+- 🚀 Provide 50 high quality general purpose components
+- 🚀 Components are very lightweight
+- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support
+- 🛠️ Support on-demand introduction
+- 🛠️ Support theme customization
+- 🌍 Support internationalization
+- 💡 Support WebStorm, VS Code component syntax highlighting
+- 💪 Support the SSR
+- 💡 Support the Typescript
+- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance
+- 🛠️ Support dark mode
 
 ### Install
 
@@ -56,7 +56,6 @@ Varlet is a Material design mobile component library developed based on `Vue3`,
 ```
 
 ### Webpack / Vite
-
 ```shell
 # Install with npm or yarn or pnpm
 
@@ -83,4 +82,4 @@ createApp(App).use(Varlet).mount('#app')
 
 <a href="https://github.com/varletjs/varlet/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
-</a>
+</a>

package/README.md

@@ -3,16 +3,16 @@
     <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
   </a>
   <h1>VARLET</h1>
-  <p>基于Vue3的Material design风格移动端组件库</p>
+  <p>基于 Vue3 的 Material design 风格移动端组件库</p>
   <p>
     <a href="https://varlet.gitee.io/varlet-ui/">开发文档</a> | <a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English</a>
   </p>
   <p>
     <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
-    <img src="https://img.shields.io/github/stars/haoziqaq/varlet" alt="ci">
+    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
-    <img src="https://img.shields.io/codecov/c/github/haoziqaq/varlet" alt="coverage">
+    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
     <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
     <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
@@ -22,25 +22,25 @@
 
 ### 介绍
 
-Varlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥抱`Vue3`生态，由社区建立起来的组件库团队进行维护。
+Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。
 
 ### 特性
-1. 提供50个高质量通用组件
-2. 组件十分轻量
-3. 由国人开发，完善的中英文文档和后勤保障
-4. 支持按需引入
-5. 支持主题定制
-6. 支持国际化
-7. 支持webstorm，vscode组件属性高亮
-8. 支持SSR
-9. 支持Typescript
-10. 确保90%以上单元测试覆盖率，提供稳定性保证
-11. 支持暗黑模式
+- 🚀 提供50个高质量通用组件 
+- 🚀 组件十分轻量
+- 💪 由国人开发，完善的中英文文档和后勤保障
+- 🛠️ 支持按需引入
+- 🛠️ 支持主题定制
+- 🌍 支持国际化
+- 💡 支持 webstorm，vscode 组件属性高亮
+- 💪 支持 SSR
+- 💡 支持 Typescript 
+- 💪 确保90%以上单元测试覆盖率，提供稳定性保证
+- 🛠️ 支持暗黑模式
 
 ### 安装
 
 ### CDN
-`varlet.js`包含组件库的所有样式和逻辑，引入即可。
+`varlet.js` 包含组件库的所有样式和逻辑，引入即可。
 
 ```html
 <div id="app"></div>
@@ -56,7 +56,7 @@ Varlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥
 
 ### Webpack / Vite
 ```shell
-# 通过npm或yarn或pnpm安装
+# 通过 npm 或 yarn 或 pnpm 安装
 
 # npm
 npm i @varlet/ui -S
@@ -80,5 +80,6 @@ createApp(App).use(Varlet).mount('#app')
 ### Contributors
 
 <a href="https://github.com/varletjs/varlet/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
+  <img src="https://contrib.rocks/image?repo=varletjs/varlet" />
 </a>
+

package/es/index-bar/IndexBar.js

@@ -4,7 +4,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import { computed, defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { easeInOutCubic, isPlainObject, toNumber } from '../utils/shared';
-import { doubleRaf, getParentScroller, getScrollLeft, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo } from '../utils/elements';
+import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo } from '../utils/elements';
 import { useIndexAnchors } from './provide';
 import { props } from './props';
 import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
@@ -55,7 +55,6 @@ export default defineComponent({
       indexAnchors,
       bindIndexAnchors
     } = useIndexAnchors();
-    var scrollEl = ref(null);
     var clickedName = ref('');
     var scroller = ref(null);
     var barEl = ref(null);
@@ -82,10 +81,8 @@ export default defineComponent({
     };
 
     var handleScroll = () => {
-      var {
-        scrollTop,
-        scrollHeight
-      } = scrollEl.value;
+      var scrollTop = getScrollTop(scroller.value);
+      var scrollHeight = scroller.value === window ? document.body.scrollHeight : scroller.value.scrollHeight;
       var {
         offsetTop
       } = barEl.value;
@@ -120,10 +117,10 @@ export default defineComponent({
         });
         if (!indexAnchor) return;
         var top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
-        var left = getScrollLeft(scrollEl.value);
+        var left = getScrollLeft(scroller.value);
         clickedName.value = anchorName;
         emitEvent(anchorName);
-        yield varScrollTo(scrollEl.value, {
+        yield varScrollTo(scroller.value, {
           left,
           top,
           animation: easeInOutCubic,
@@ -156,17 +153,14 @@ export default defineComponent({
       });
     }));
     onMounted( /*#__PURE__*/_asyncToGenerator(function* () {
-      var _scroller$value;
-
       yield doubleRaf();
       scroller.value = getParentScroller(barEl.value);
-      scrollEl.value = scroller.value === window ? scroller.value.document.documentElement : scroller.value;
-      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.addEventListener('scroll', handleScroll);
+      scroller.value.addEventListener('scroll', handleScroll);
     }));
     onBeforeUnmount(() => {
-      var _scroller$value2;
+      var _scroller$value;
 
-      (_scroller$value2 = scroller.value) == null ? void 0 : _scroller$value2.removeEventListener('scroll', handleScroll);
+      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.removeEventListener('scroll', handleScroll);
     });
     return {
       barEl,

package/es/varlet.esm.js

@@ -9872,7 +9872,6 @@ var IndexBar = defineComponent({
       indexAnchors,
       bindIndexAnchors
     } = useIndexAnchors();
-    var scrollEl = ref(null);
     var clickedName = ref("");
     var scroller2 = ref(null);
     var barEl = ref(null);
@@ -9898,10 +9897,8 @@ var IndexBar = defineComponent({
       props2.onChange == null ? void 0 : props2.onChange(anchorName);
     };
     var handleScroll = () => {
-      var {
-        scrollTop,
-        scrollHeight
-      } = scrollEl.value;
+      var scrollTop = getScrollTop(scroller2.value);
+      var scrollHeight = scroller2.value === window ? document.body.scrollHeight : scroller2.value.scrollHeight;
       var {
         offsetTop
       } = barEl.value;
@@ -9936,10 +9933,10 @@ var IndexBar = defineComponent({
         if (!indexAnchor)
           return;
         var top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
-        var left = getScrollLeft(scrollEl.value);
+        var left = getScrollLeft(scroller2.value);
         clickedName.value = anchorName;
         emitEvent(anchorName);
-        yield scrollTo(scrollEl.value, {
+        yield scrollTo(scroller2.value, {
           left,
           top,
           animation: easeInOutCubic,
@@ -9969,15 +9966,13 @@ var IndexBar = defineComponent({
       });
     }));
     onMounted(/* @__PURE__ */ _asyncToGenerator$4(function* () {
-      var _scroller$value;
       yield doubleRaf();
       scroller2.value = getParentScroller(barEl.value);
-      scrollEl.value = scroller2.value === window ? scroller2.value.document.documentElement : scroller2.value;
-      (_scroller$value = scroller2.value) == null ? void 0 : _scroller$value.addEventListener("scroll", handleScroll);
+      scroller2.value.addEventListener("scroll", handleScroll);
     }));
     onBeforeUnmount(() => {
-      var _scroller$value2;
-      (_scroller$value2 = scroller2.value) == null ? void 0 : _scroller$value2.removeEventListener("scroll", handleScroll);
+      var _scroller$value;
+      (_scroller$value = scroller2.value) == null ? void 0 : _scroller$value.removeEventListener("scroll", handleScroll);
     });
     return {
       barEl,

package/highlight/web-types.json

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

package/lib/index-bar/IndexBar.js

@@ -66,7 +66,6 @@ var _default = (0, _vue.defineComponent)({
       indexAnchors,
       bindIndexAnchors
     } = (0, _provide.useIndexAnchors)();
-    var scrollEl = (0, _vue.ref)(null);
     var clickedName = (0, _vue.ref)('');
     var scroller = (0, _vue.ref)(null);
     var barEl = (0, _vue.ref)(null);
@@ -93,10 +92,8 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var handleScroll = () => {
-      var {
-        scrollTop,
-        scrollHeight
-      } = scrollEl.value;
+      var scrollTop = (0, _elements.getScrollTop)(scroller.value);
+      var scrollHeight = scroller.value === window ? document.body.scrollHeight : scroller.value.scrollHeight;
       var {
         offsetTop
       } = barEl.value;
@@ -131,10 +128,10 @@ var _default = (0, _vue.defineComponent)({
         });
         if (!indexAnchor) return;
         var top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
-        var left = (0, _elements.getScrollLeft)(scrollEl.value);
+        var left = (0, _elements.getScrollLeft)(scroller.value);
         clickedName.value = anchorName;
         emitEvent(anchorName);
-        yield (0, _elements.scrollTo)(scrollEl.value, {
+        yield (0, _elements.scrollTo)(scroller.value, {
           left,
           top,
           animation: _shared.easeInOutCubic,
@@ -167,17 +164,14 @@ var _default = (0, _vue.defineComponent)({
       });
     }));
     (0, _vue.onMounted)( /*#__PURE__*/_asyncToGenerator(function* () {
-      var _scroller$value;
-
       yield (0, _elements.doubleRaf)();
       scroller.value = (0, _elements.getParentScroller)(barEl.value);
-      scrollEl.value = scroller.value === window ? scroller.value.document.documentElement : scroller.value;
-      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.addEventListener('scroll', handleScroll);
+      scroller.value.addEventListener('scroll', handleScroll);
     }));
     (0, _vue.onBeforeUnmount)(() => {
-      var _scroller$value2;
+      var _scroller$value;
 
-      (_scroller$value2 = scroller.value) == null ? void 0 : _scroller$value2.removeEventListener('scroll', handleScroll);
+      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.removeEventListener('scroll', handleScroll);
     });
     return {
       barEl,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.26.6",
+  "version": "1.26.7",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -39,13 +39,13 @@
   },
   "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
   "dependencies": {
-    "@varlet/icons": "1.26.6",
+    "@varlet/icons": "1.26.7",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
   "devDependencies": {
-    "@varlet/cli": "1.26.6",
-    "@varlet/touch-emulator": "1.26.6",
+    "@varlet/cli": "1.26.7",
+    "@varlet/touch-emulator": "1.26.7",
     "@vue/test-utils": "2.0.0-rc.6",
     "@vue/runtime-core": "3.2.25",
     "typescript": "^4.4.4",
@@ -69,5 +69,5 @@
     "test:watch": "varlet-cli jest -w",
     "test:watchAll": "varlet-cli jest -wa"
   },
-  "readme": "<div align=\"center\">\n  <a href=\"https://varlet.gitee.io/varlet-ui/\">\n    <img src=\"https://varlet.gitee.io/varlet-ui/logo.svg\" width=\"150\">\n  </a>\n  <h1>VARLET</h1>\n  <p>基于Vue3的Material design风格移动端组件库</p>\n  <p>\n    <a href=\"https://varlet.gitee.io/varlet-ui/\">开发文档</a> | <a href=\"https://github.com/varletjs/varlet/blob/dev/README.en-US.md\">English</a>\n  </p>\n  <p>\n    <img src=\"https://img.shields.io/npm/v/@varlet/ui?style=flat-square\" alt=\"version\">\n    <img src=\"https://img.shields.io/github/stars/haoziqaq/varlet\" alt=\"ci\">\n    <img src=\"https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc\" alt=\"vue\">\n    <img src=\"https://img.shields.io/npm/l/@varlet/ui.svg\" alt=\"licence\">\n    <img src=\"https://img.shields.io/codecov/c/github/haoziqaq/varlet\" alt=\"coverage\">\n    <img src=\"https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip\" alt=\"gzip\" />\n    <img src=\"https://github.com/varletjs/varlet/workflows/CI/badge.svg\" alt=\"ci\">\n  </p>\n</div>\n\n---\n\n### 介绍\n\nVarlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥抱`Vue3`生态，由社区建立起来的组件库团队进行维护。\n\n### 特性\n1. 提供50个高质量通用组件\n2. 组件十分轻量\n3. 由国人开发，完善的中英文文档和后勤保障\n4. 支持按需引入\n5. 支持主题定制\n6. 支持国际化\n7. 支持webstorm，vscode组件属性高亮\n8. 支持SSR\n9. 支持Typescript\n10. 确保90%以上单元测试覆盖率，提供稳定性保证\n11. 支持暗黑模式\n\n### 安装\n\n### CDN\n`varlet.js`包含组件库的所有样式和逻辑，引入即可。\n\n```html\n<div id=\"app\"></div>\n<script src=\"https://cdn.jsdelivr.net/npm/vue@next\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js\"></script>\n<script>\n  const app = Vue.createApp({\n    template: '<var-button>按钮</var-button>'\n  })\n  app.use(Varlet).mount('#app')\n</script>\n```\n\n### Webpack / Vite\n```shell\n# 通过npm或yarn或pnpm安装\n\n# npm\nnpm i @varlet/ui -S\n\n# yarn\nyarn add @varlet/ui\n\n# pnpm\npnpm add @varlet/ui\n```\n\n```js\nimport App from './App.vue'\nimport Varlet from '@varlet/ui'\nimport { createApp } from 'vue'\nimport '@varlet/ui/es/style.js'\n\ncreateApp(App).use(Varlet).mount('#app')\n```\n\n### Contributors\n\n<a href=\"https://github.com/varletjs/varlet/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=haoziqaq/varlet\" />\n</a>\n"
+  "readme": "<div align=\"center\">\n  <a href=\"https://varlet.gitee.io/varlet-ui/\">\n    <img src=\"https://varlet.gitee.io/varlet-ui/logo.svg\" width=\"150\">\n  </a>\n  <h1>VARLET</h1>\n  <p>基于 Vue3 的 Material design 风格移动端组件库</p>\n  <p>\n    <a href=\"https://varlet.gitee.io/varlet-ui/\">开发文档</a> | <a href=\"https://github.com/varletjs/varlet/blob/dev/README.en-US.md\">English</a>\n  </p>\n  <p>\n    <img src=\"https://img.shields.io/npm/v/@varlet/ui?style=flat-square\" alt=\"version\">\n    <img src=\"https://img.shields.io/github/stars/varletjs/varlet\" alt=\"stars\">\n    <img src=\"https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc\" alt=\"vue\">\n    <img src=\"https://img.shields.io/npm/l/@varlet/ui.svg\" alt=\"licence\">\n    <img src=\"https://img.shields.io/codecov/c/github/varletjs/varlet\" alt=\"coverage\">\n    <img src=\"https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip\" alt=\"gzip\" />\n    <img src=\"https://github.com/varletjs/varlet/workflows/CI/badge.svg\" alt=\"ci\">\n  </p>\n</div>\n\n---\n\n### 介绍\n\nVarlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。\n\n### 特性\n- 🚀 提供50个高质量通用组件 \n- 🚀 组件十分轻量\n- 💪 由国人开发，完善的中英文文档和后勤保障\n- 🛠️ 支持按需引入\n- 🛠️ 支持主题定制\n- 🌍 支持国际化\n- 💡 支持 webstorm，vscode 组件属性高亮\n- 💪 支持 SSR\n- 💡 支持 Typescript \n- 💪 确保90%以上单元测试覆盖率，提供稳定性保证\n- 🛠️ 支持暗黑模式\n\n### 安装\n\n### CDN\n`varlet.js` 包含组件库的所有样式和逻辑，引入即可。\n\n```html\n<div id=\"app\"></div>\n<script src=\"https://cdn.jsdelivr.net/npm/vue@next\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js\"></script>\n<script>\n  const app = Vue.createApp({\n    template: '<var-button>按钮</var-button>'\n  })\n  app.use(Varlet).mount('#app')\n</script>\n```\n\n### Webpack / Vite\n```shell\n# 通过 npm 或 yarn 或 pnpm 安装\n\n# npm\nnpm i @varlet/ui -S\n\n# yarn\nyarn add @varlet/ui\n\n# pnpm\npnpm add @varlet/ui\n```\n\n```js\nimport App from './App.vue'\nimport Varlet from '@varlet/ui'\nimport { createApp } from 'vue'\nimport '@varlet/ui/es/style.js'\n\ncreateApp(App).use(Varlet).mount('#app')\n```\n\n### Contributors\n\n<a href=\"https://github.com/varletjs/varlet/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=varletjs/varlet\" />\n</a>\n\n"
 }