@varlet/ui 3.2.3 → 3.2.5

package/README.md

@@ -3,7 +3,7 @@
     <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
   </a>
   <h1>VARLET</h1>
-  <p>Vue3 mobile component library supports both Material Design 2 and 3, and also has a good experience on the desktop.</p>
+  <p>A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.</p>
   <p>
     <a href="https://varlet-varletjs.vercel.app/#/en-US/index">Documentation(Vercel)</a> |
     <a href="https://varlet.gitee.io/varlet-ui/#/en-US/index">Documentation(Gitee)</a> | 
@@ -36,11 +36,13 @@ Varlet is a Material design mobile component library developed based on `Vue3`,
 - 🌍 &nbsp; Support internationalization
 - 💡 &nbsp; Support WebStorm syntax highlighting
 - 💪 &nbsp; Support the SSR
+- 📦 &nbsp; Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)
 - 💡 &nbsp; Support the Typescript
 - 💪 &nbsp; Make sure more than 90 percent unit test coverage, providing stability assurance
-- 🛠️ &nbsp; Supports both Material Design 2 and Material Design 3 design systems
+- 🎨 &nbsp; Supports both Material Design 2 and Material Design 3 design systems
 - 🛠️ &nbsp; Support dark mode
-- 🛠️ &nbsp; Provide official VSCode extension
+- 🔧 &nbsp; Provide official VSCode extension
+- ⌨️ &nbsp; Support Accessibility (still improving)
 
 ### Install
 

package/README.zh-CN.md

@@ -4,7 +4,7 @@
     <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
   </a>
   <h1>VARLET</h1>
-  <p>Vue3 移动端组件库，同时支持 Material Design 2 和 3，桌面端也有不错的体验。</p>
+  <p>一个移动端组件库，基于 Vue3, Material Design 2, Material Design 3，并支持桌面端开发。</p>
   <p>
     <a href="https://varlet-varletjs.vercel.app">文档(Vercel)</a> | 
     <a href="https://varlet.gitee.io/varlet-ui">文档(Gitee)</a> |
@@ -36,11 +36,13 @@ Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全
 - 🌍 &nbsp; 支持国际化
 - 💡 &nbsp; 支持 webstorm 组件属性高亮
 - 💪 &nbsp; 支持 SSR
+- 📦 &nbsp; 支持 [Nuxt Module](https://github.com/varletjs/varlet-nuxt)
 - 💡 &nbsp; 支持 Typescript
 - 💪 &nbsp; 确保 90% 以上单元测试覆盖率，提供稳定性保证
-- 🛠️ &nbsp; 同时支持 Material Design 2 和 Material Design 3 两套设计系统
+- 🎨 &nbsp; 同时支持 Material Design 2 和 Material Design 3 两套设计系统
 - 🛠️ &nbsp; 支持暗黑模式
-- 🛠️ &nbsp; 提供官方的 VSCode 插件
+- 🔧 &nbsp; 提供官方的 VSCode 插件
+- ⌨️ &nbsp; 支持无障碍访问（持续改进中）
 
 ### 安装
 

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionSheetSfc.css'
 import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/avatar-group/AvatarGroup.mjs

@@ -33,8 +33,7 @@ const __sfc__ = defineComponent({
     return {
       rootStyles,
       n,
-      classes,
-      toSizeUnit
+      classes
     };
   }
 });

package/es/breadcrumb/Breadcrumb.mjs

@@ -30,7 +30,8 @@ function __render__(_ctx, _cache) {
           _createElementVNode(
             "div",
             {
-              class: _normalizeClass(_ctx.n("separator"))
+              class: _normalizeClass(_ctx.n("separator")),
+              "aria-hidden": "true"
             },
             _toDisplayString((_a = _ctx.separator) != null ? _a : _ctx.parentSeparator),
             3

package/es/breadcrumbs/Breadcrumbs.mjs

@@ -8,7 +8,9 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.n())
+      class: _normalizeClass(_ctx.n()),
+      role: "navigation",
+      "aria-label": "Breadcrumbs"
     },
     [
       _renderSlot(_ctx.$slots, "default")

package/es/collapse/Collapse.mjs

@@ -25,12 +25,14 @@ const __sfc__ = defineComponent({
     const offset = computed(() => props2.offset);
     const divider = computed(() => props2.divider);
     const elevation = computed(() => props2.elevation);
+    const accordion = computed(() => props2.accordion);
     const normalizeValues = computed(() => normalizeToArray(props2.modelValue));
     const { length, collapseItems, bindCollapseItems } = useCollapseItem();
     const collapseProvider = {
       offset,
       divider,
       elevation,
+      accordion,
       updateItem
     };
     watch(

package/es/collapse-item/CollapseItem.mjs

@@ -5,7 +5,9 @@ import { useCollapse } from "./provide.mjs";
 import { props } from "./props.mjs";
 import { useCollapseTransition } from "../collapse-transition/useCollapseTransition.mjs";
 const { name, n, classes } = createNamespace("collapse-item");
-import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, normalizeStyle as _normalizeStyle } from "vue";
+import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, normalizeStyle as _normalizeStyle, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = ["aria-expanded", "aria-disabled", "role"];
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   return _openBlock(), _createElementBlock(
@@ -24,58 +26,55 @@ function __render__(_ctx, _cache) {
         2
         /* CLASS */
       ),
-      _createElementVNode(
-        "div",
-        {
-          class: _normalizeClass(_ctx.n("header")),
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
-        },
-        [
-          _ctx.$slots.title || _ctx.title ? (_openBlock(), _createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: _normalizeClass(_ctx.n("header-title"))
-            },
-            [
-              _renderSlot(_ctx.$slots, "title", {}, () => [
-                _createTextVNode(
-                  _toDisplayString(_ctx.title),
-                  1
-                  /* TEXT */
-                )
-              ])
-            ],
-            2
-            /* CLASS */
-          )) : _createCommentVNode("v-if", true),
-          _createElementVNode(
-            "div",
-            {
-              class: _normalizeClass(_ctx.n("header-icon"))
-            },
-            [
-              _renderSlot(_ctx.$slots, "icon", {}, () => [
-                _createVNode(_component_var_icon, {
-                  name: _ctx.icon,
-                  transition: 250,
-                  class: _normalizeClass(
-                    _ctx.classes(
-                      _ctx.n("header-icon"),
-                      [_ctx.isShow && _ctx.icon === "chevron-down", _ctx.n("header-open")],
-                      [_ctx.disabled, _ctx.n("header--disable")]
-                    )
+      _createElementVNode("div", {
+        class: _normalizeClass(_ctx.classes(_ctx.n("header"), [!_ctx.disabled, _ctx.n("header--cursor-pointer")])),
+        "aria-expanded": _ctx.isShow,
+        "aria-disabled": _ctx.disabled,
+        role: _ctx.accordion ? "tab" : "button",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
+      }, [
+        _ctx.$slots.title || _ctx.title ? (_openBlock(), _createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: _normalizeClass(_ctx.n("header-title"))
+          },
+          [
+            _renderSlot(_ctx.$slots, "title", {}, () => [
+              _createTextVNode(
+                _toDisplayString(_ctx.title),
+                1
+                /* TEXT */
+              )
+            ])
+          ],
+          2
+          /* CLASS */
+        )) : _createCommentVNode("v-if", true),
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.n("header-icon"))
+          },
+          [
+            _renderSlot(_ctx.$slots, "icon", {}, () => [
+              _createVNode(_component_var_icon, {
+                name: _ctx.icon,
+                transition: 250,
+                class: _normalizeClass(
+                  _ctx.classes(
+                    _ctx.n("header-icon"),
+                    [_ctx.isShow && _ctx.icon === "chevron-down", _ctx.n("header-open")],
+                    [_ctx.disabled, _ctx.n("header--disable")]
                   )
-                }, null, 8, ["name", "class"])
-              ])
-            ],
-            2
-            /* CLASS */
-          )
-        ],
-        2
-        /* CLASS */
-      ),
+                )
+              }, null, 8, ["name", "class"])
+            ])
+          ],
+          2
+          /* CLASS */
+        )
+      ], 10, _hoisted_1),
       _withDirectives(_createElementVNode(
         "div",
         {
@@ -120,7 +119,7 @@ const __sfc__ = defineComponent({
     const name2 = computed(() => props2.name);
     const disabled = computed(() => props2.disabled);
     const { index, collapse, bindCollapse } = useCollapse();
-    const { offset, divider, elevation, updateItem } = collapse;
+    const { offset, divider, elevation, accordion, updateItem } = collapse;
     const collapseItemProvider = {
       index,
       name: name2,
@@ -150,6 +149,7 @@ const __sfc__ = defineComponent({
       divider,
       elevation,
       contentEl,
+      accordion,
       n,
       classes,
       toggle,

package/es/collapse-item/collapseItem.css

@@ -1 +1 @@
-:root { --collapse-background: var(--color-surface-container-highest); --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid var(--color-outline);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-divider-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}
+:root { --collapse-background: var(--color-surface-container-highest); --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid var(--color-outline);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-divider-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__header--cursor-pointer { cursor: pointer;}.var-collapse-item__content { font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}

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

@@ -138,16 +138,11 @@ const __sfc__ = defineComponent({
       right: false
     });
     const yearList = computed(() => {
-      const list = [];
-      if (!props.preview)
-        return list;
-      let startYear = Math.floor(toNumber(props.preview) / 100 + page.value) * 100;
-      startYear = startYear < 0 ? 0 : startYear;
-      const yearRange = [startYear, startYear + 100];
-      for (let i = yearRange[0]; i < yearRange[1]; i++) {
-        list.push(i);
+      if (!props.preview) {
+        return [];
       }
-      return list;
+      const startYear = Math.floor(toNumber(props.preview) / 100 + page.value) * 100;
+      return Array.from(Array(100), (_v, k) => Math.max(0, startYear) + k);
     });
     const shouldChoose = (val) => {
       const {
@@ -171,12 +166,8 @@ const __sfc__ = defineComponent({
       const {
         componentProps: { min, max }
       } = props;
-      let isBeforeMax = true;
-      let isAfterMin = true;
-      if (max)
-        isBeforeMax = dayjs(year).isSameOrBefore(dayjs(max), "year");
-      if (min)
-        isAfterMin = dayjs(year).isSameOrAfter(dayjs(min), "year");
+      const isBeforeMax = max ? dayjs(year).isSameOrBefore(dayjs(max), "year") : true;
+      const isAfterMin = min ? dayjs(year).isSameOrAfter(dayjs(min), "year") : true;
       return isBeforeMax && isAfterMin;
     };
     const buttonProps = (year) => {
@@ -247,9 +238,10 @@ const __sfc__ = defineComponent({
       });
     };
     const checkDate = (checkType) => {
-      reverse.value = checkType === "prev";
-      panelKey.value += checkType === "prev" ? -1 : 1;
-      page.value += checkType === "prev" ? -1 : 1;
+      const isPrevType = checkType === "prev";
+      reverse.value = isPrevType;
+      panelKey.value += isPrevType ? -1 : 1;
+      page.value += isPrevType ? -1 : 1;
     };
     const forwardRef = (checkType) => {
       headerEl.value.checkDate(checkType);

package/es/divider/Divider.mjs

@@ -21,7 +21,8 @@ function __render__(_ctx, _cache) {
           [_ctx.hairline, _ctx.n("--hairline")]
         )
       ),
-      style: _normalizeStyle(_ctx.style)
+      style: _normalizeStyle(_ctx.style),
+      role: "separator"
     },
     [
       !_ctx.vertical ? _renderSlot(_ctx.$slots, "default", { key: 0 }, () => [

package/es/index.bundle.mjs

@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.2.3'
+const version = '3.2.5'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.2.3'
+const version = '3.2.5'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/locale/index.mjs

@@ -47,7 +47,6 @@ function useLocale() {
     if (hasOwn(currentMessage2.value, id)) {
       return currentMessage2.value[id];
     }
-    return id;
   };
   return {
     messages: messages2,

package/es/menu/usePopover.mjs

@@ -54,7 +54,7 @@ function usePopover(options) {
   const show = useVModel(options, "show", {
     passive: true,
     defaultValue: false,
-    emit(event, value) {
+    emit(_event, value) {
       if (value) {
         call(options.onOpen);
       } else {
@@ -300,8 +300,7 @@ function usePopover(options) {
     popoverInstance.setOptions(getPopperOptions());
   };
   const open = () => {
-    const { disabled } = options;
-    if (disabled) {
+    if (options.disabled) {
       return;
     }
     show.value = true;

package/es/popup/Popup.mjs

@@ -90,7 +90,9 @@ var stdin_default = defineComponent({
         "class": classes(n("content"), n(`--${props2.position}`), [props2.defaultStyle, n("--content-background-color")], [props2.defaultStyle, n("$-elevation--3")], [props2.safeArea, n("--safe-area")], [props2.safeAreaTop, n("--safe-area-top")]),
         "style": {
           zIndex: zIndex.value
-        }
+        },
+        "role": "dialog",
+        "aria-modal": "true"
       }, attrs), [rendered.value && call(slots.default)]), [[_vShow, props2.show]]);
     }
     function renderPopup() {