@varlet/ui 3.2.4 → 3.2.6-alpha.1713858357643

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +4 -2
  2. package/README.zh-CN.md +4 -2
  3. package/es/breadcrumb/Breadcrumb.mjs +2 -1
  4. package/es/breadcrumbs/Breadcrumbs.mjs +3 -1
  5. package/es/collapse/Collapse.mjs +2 -0
  6. package/es/collapse-item/CollapseItem.mjs +53 -53
  7. package/es/collapse-item/collapseItem.css +1 -1
  8. package/es/index.bundle.mjs +1 -1
  9. package/es/index.mjs +1 -1
  10. package/es/input/Input.mjs +2 -2
  11. package/es/locale/index.mjs +0 -1
  12. package/es/popup/Popup.mjs +3 -1
  13. package/es/progress/Progress.mjs +189 -187
  14. package/es/slider/Slider.mjs +19 -23
  15. package/es/style.css +1 -1
  16. package/es/swipe/Swipe.mjs +1 -0
  17. package/es/swipe-item/SwipeItem.mjs +18 -18
  18. package/es/switch/Switch.mjs +77 -80
  19. package/es/tooltip/Tooltip.mjs +2 -1
  20. package/es/varlet.esm.js +4260 -4251
  21. package/highlight/web-types.en-US.json +1 -1
  22. package/highlight/web-types.zh-CN.json +1 -1
  23. package/lib/style.css +1 -1
  24. package/lib/varlet.cjs.js +402 -397
  25. package/package.json +7 -7
  26. package/umd/varlet.js +6 -6
package/README.md CHANGED
@@ -36,11 +36,13 @@ Varlet is a Material design mobile component library developed based on `Vue3`,
36
36
  - 🌍   Support internationalization
37
37
  - 💡   Support WebStorm syntax highlighting
38
38
  - 💪   Support the SSR
39
+ - 📦   Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)
39
40
  - 💡   Support the Typescript
40
41
  - 💪   Make sure more than 90 percent unit test coverage, providing stability assurance
41
- - 🛠️   Supports both Material Design 2 and Material Design 3 design systems
42
+ - 🎨   Supports both Material Design 2 and Material Design 3 design systems
42
43
  - 🛠️   Support dark mode
43
- - 🛠️   Provide official VSCode extension
44
+ - 🔧   Provide official VSCode extension
45
+ - ⌨️   Support Accessibility (still improving)
44
46
 
45
47
  ### Install
46
48
 
package/README.zh-CN.md CHANGED
@@ -36,11 +36,13 @@ Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全
36
36
  - 🌍   支持国际化
37
37
  - 💡   支持 webstorm 组件属性高亮
38
38
  - 💪   支持 SSR
39
+ - 📦   支持 [Nuxt Module](https://github.com/varletjs/varlet-nuxt)
39
40
  - 💡   支持 Typescript
40
41
  - 💪   确保 90% 以上单元测试覆盖率，提供稳定性保证
41
- - 🛠️   同时支持 Material Design 2 和 Material Design 3 两套设计系统
42
+ - 🎨   同时支持 Material Design 2 和 Material Design 3 两套设计系统
42
43
  - 🛠️   支持暗黑模式
43
- - 🛠️   提供官方的 VSCode 插件
44
+ - 🔧   提供官方的 VSCode 插件
45
+ - ⌨️   支持无障碍访问（持续改进中）
44
46
 
45
47
  ### 安装
46
48
 
package/es/breadcrumb/Breadcrumb.mjs CHANGED
@@ -30,7 +30,8 @@ function __render__(_ctx, _cache) {
30
30
  _createElementVNode(
31
31
  "div",
32
32
  {
33
- class: _normalizeClass(_ctx.n("separator"))
33
+ class: _normalizeClass(_ctx.n("separator")),
34
+ "aria-hidden": "true"
34
35
  },
35
36
  _toDisplayString((_a = _ctx.separator) != null ? _a : _ctx.parentSeparator),
36
37
  3
package/es/breadcrumbs/Breadcrumbs.mjs CHANGED
@@ -8,7 +8,9 @@ function __render__(_ctx, _cache) {
8
8
  return _openBlock(), _createElementBlock(
9
9
  "div",
10
10
  {
11
- class: _normalizeClass(_ctx.n())
11
+ class: _normalizeClass(_ctx.n()),
12
+ role: "navigation",
13
+ "aria-label": "Breadcrumbs"
12
14
  },
13
15
  [
14
16
  _renderSlot(_ctx.$slots, "default")
package/es/collapse/Collapse.mjs CHANGED
@@ -25,12 +25,14 @@ const __sfc__ = defineComponent({
25
25
  const offset = computed(() => props2.offset);
26
26
  const divider = computed(() => props2.divider);
27
27
  const elevation = computed(() => props2.elevation);
28
+ const accordion = computed(() => props2.accordion);
28
29
  const normalizeValues = computed(() => normalizeToArray(props2.modelValue));
29
30
  const { length, collapseItems, bindCollapseItems } = useCollapseItem();
30
31
  const collapseProvider = {
31
32
  offset,
32
33
  divider,
33
34
  elevation,
35
+ accordion,
34
36
  updateItem
35
37
  };
36
38
  watch(
package/es/collapse-item/CollapseItem.mjs CHANGED
@@ -5,7 +5,9 @@ import { useCollapse } from "./provide.mjs";
5
5
  import { props } from "./props.mjs";
6
6
  import { useCollapseTransition } from "../collapse-transition/useCollapseTransition.mjs";
7
7
  const { name, n, classes } = createNamespace("collapse-item");
8
- 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";
8
+ 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";
9
+ const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
10
+ const _hoisted_1 = ["aria-expanded", "aria-disabled", "role"];
9
11
  function __render__(_ctx, _cache) {
10
12
  const _component_var_icon = _resolveComponent("var-icon");
11
13
  return _openBlock(), _createElementBlock(
@@ -24,58 +26,55 @@ function __render__(_ctx, _cache) {
24
26
  2
25
27
  /* CLASS */
26
28
  ),
27
- _createElementVNode(
28
- "div",
29
- {
30
- class: _normalizeClass(_ctx.n("header")),
31
- onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
32
- },
33
- [
34
- _ctx.$slots.title || _ctx.title ? (_openBlock(), _createElementBlock(
35
- "div",
36
- {
37
- key: 0,
38
- class: _normalizeClass(_ctx.n("header-title"))
39
- },
40
- [
41
- _renderSlot(_ctx.$slots, "title", {}, () => [
42
- _createTextVNode(
43
- _toDisplayString(_ctx.title),
44
- 1
45
- /* TEXT */
46
- )
47
- ])
48
- ],
49
- 2
50
- /* CLASS */
51
- )) : _createCommentVNode("v-if", true),
52
- _createElementVNode(
53
- "div",
54
- {
55
- class: _normalizeClass(_ctx.n("header-icon"))
56
- },
57
- [
58
- _renderSlot(_ctx.$slots, "icon", {}, () => [
59
- _createVNode(_component_var_icon, {
60
- name: _ctx.icon,
61
- transition: 250,
62
- class: _normalizeClass(
63
- _ctx.classes(
64
- _ctx.n("header-icon"),
65
- [_ctx.isShow && _ctx.icon === "chevron-down", _ctx.n("header-open")],
66
- [_ctx.disabled, _ctx.n("header--disable")]
67
- )
29
+ _createElementVNode("div", {
30
+ class: _normalizeClass(_ctx.classes(_ctx.n("header"), [!_ctx.disabled, _ctx.n("header--cursor-pointer")])),
31
+ "aria-expanded": _ctx.isShow,
32
+ "aria-disabled": _ctx.disabled,
33
+ role: _ctx.accordion ? "tab" : "button",
34
+ onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
35
+ }, [
36
+ _ctx.$slots.title || _ctx.title ? (_openBlock(), _createElementBlock(
37
+ "div",
38
+ {
39
+ key: 0,
40
+ class: _normalizeClass(_ctx.n("header-title"))
41
+ },
42
+ [
43
+ _renderSlot(_ctx.$slots, "title", {}, () => [
44
+ _createTextVNode(
45
+ _toDisplayString(_ctx.title),
46
+ 1
47
+ /* TEXT */
48
+ )
49
+ ])
50
+ ],
51
+ 2
52
+ /* CLASS */
53
+ )) : _createCommentVNode("v-if", true),
54
+ _createElementVNode(
55
+ "div",
56
+ {
57
+ class: _normalizeClass(_ctx.n("header-icon"))
58
+ },
59
+ [
60
+ _renderSlot(_ctx.$slots, "icon", {}, () => [
61
+ _createVNode(_component_var_icon, {
62
+ name: _ctx.icon,
63
+ transition: 250,
64
+ class: _normalizeClass(
65
+ _ctx.classes(
66
+ _ctx.n("header-icon"),
67
+ [_ctx.isShow && _ctx.icon === "chevron-down", _ctx.n("header-open")],
68
+ [_ctx.disabled, _ctx.n("header--disable")]
68
69
  )
69
- }, null, 8, ["name", "class"])
70
- ])
71
- ],
72
- 2
73
- /* CLASS */
74
- )
75
- ],
76
- 2
77
- /* CLASS */
78
- ),
70
+ )
71
+ }, null, 8, ["name", "class"])
72
+ ])
73
+ ],
74
+ 2
75
+ /* CLASS */
76
+ )
77
+ ], 10, _hoisted_1),
79
78
  _withDirectives(_createElementVNode(
80
79
  "div",
81
80
  {
@@ -120,7 +119,7 @@ const __sfc__ = defineComponent({
120
119
  const name2 = computed(() => props2.name);
121
120
  const disabled = computed(() => props2.disabled);
122
121
  const { index, collapse, bindCollapse } = useCollapse();
123
- const { offset, divider, elevation, updateItem } = collapse;
122
+ const { offset, divider, elevation, accordion, updateItem } = collapse;
124
123
  const collapseItemProvider = {
125
124
  index,
126
125
  name: name2,
@@ -150,6 +149,7 @@ const __sfc__ = defineComponent({
150
149
  divider,
151
150
  elevation,
152
151
  contentEl,
152
+ accordion,
153
153
  n,
154
154
  classes,
155
155
  toggle,
package/es/collapse-item/collapseItem.css CHANGED
@@ -1 +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;}
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__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/index.bundle.mjs CHANGED
@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
262
262
  import './uploader/style/index.mjs'
263
263
  import './watermark/style/index.mjs'
264
264
 
265
- const version = '3.2.4'
265
+ const version = '3.2.6-alpha.1713858357643'
266
266
 
267
267
  function install(app) {
268
268
  ActionSheet.install && app.use(ActionSheet)
package/es/index.mjs CHANGED
@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
174
174
  export * from './uploader/index.mjs'
175
175
  export * from './watermark/index.mjs'
176
176
 
177
- const version = '3.2.4'
177
+ const version = '3.2.6-alpha.1713858357643'
178
178
 
179
179
  function install(app) {
180
180
  ActionSheet.install && app.use(ActionSheet)
package/es/input/Input.mjs CHANGED
@@ -5,7 +5,7 @@ import { props } from "./props.mjs";
5
5
  import { isEmpty, preventDefault, toNumber, call } from "@varlet/shared";
6
6
  import { useValidation, createNamespace } from "../utils/components.mjs";
7
7
  import { useForm } from "../form/provide.mjs";
8
- import { onSmartMounted, useId } from "@varlet/use";
8
+ import { onSmartMounted, useClientId } from "@varlet/use";
9
9
  const { name, n, classes } = createNamespace("input");
10
10
  import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, withModifiers as _withModifiers, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
11
11
  const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
@@ -177,7 +177,7 @@ const __sfc__ = defineComponent({
177
177
  },
178
178
  props,
179
179
  setup(props2) {
180
- const id = useId();
180
+ const id = useClientId();
181
181
  const el = ref(null);
182
182
  const isFocusing = ref(false);
183
183
  const isComposing = ref(false);
package/es/locale/index.mjs CHANGED
@@ -47,7 +47,6 @@ function useLocale() {
47
47
  if (hasOwn(currentMessage2.value, id)) {
48
48
  return currentMessage2.value[id];
49
49
  }
50
- return id;
51
50
  };
52
51
  return {
53
52
  messages: messages2,
package/es/popup/Popup.mjs CHANGED
@@ -90,7 +90,9 @@ var stdin_default = defineComponent({
90
90
  "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")]),
91
91
  "style": {
92
92
  zIndex: zIndex.value
93
- }
93
+ },
94
+ "role": "dialog",
95
+ "aria-modal": "true"
94
96
  }, attrs), [rendered.value && call(slots.default)]), [[_vShow, props2.show]]);
95
97
  }
96
98
  function renderPopup() {