@varlet/ui 3.2.13 → 3.2.14

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 (36) hide show
  1. package/es/action-sheet/style/index.mjs +1 -1
  2. package/es/app-bar/AppBar.mjs +111 -77
  3. package/es/app-bar/props.mjs +2 -1
  4. package/es/avatar/avatar.css +1 -1
  5. package/es/bottom-navigation/BottomNavigation.mjs +2 -1
  6. package/es/bottom-navigation-item/bottomNavigationItem.css +1 -1
  7. package/es/checkbox/Checkbox.mjs +3 -3
  8. package/es/checkbox-group/style/index.mjs +3 -0
  9. package/es/collapse-item/collapseItem.css +1 -1
  10. package/es/ellipsis/ellipsis.css +1 -1
  11. package/es/index.bundle.mjs +1 -1
  12. package/es/index.mjs +1 -1
  13. package/es/link/link.css +1 -1
  14. package/es/paper/paper.css +1 -1
  15. package/es/radio/Radio.mjs +1 -1
  16. package/es/radio-group/RadioGroup.mjs +22 -4
  17. package/es/radio-group/RadioGroupOption.mjs +45 -0
  18. package/es/radio-group/props.mjs +9 -0
  19. package/es/radio-group/style/index.mjs +4 -0
  20. package/es/snackbar/style/index.mjs +1 -1
  21. package/es/style-provider/index.mjs +25 -7
  22. package/es/style.css +1 -1
  23. package/es/swipe/Swipe.mjs +25 -5
  24. package/es/swipe-item/SwipeItem.mjs +15 -8
  25. package/es/swipe-item/swipeItem.css +1 -1
  26. package/es/varlet.esm.js +5253 -5142
  27. package/highlight/web-types.en-US.json +37 -1
  28. package/highlight/web-types.zh-CN.json +37 -1
  29. package/lib/style.css +1 -1
  30. package/lib/varlet.cjs.js +1017 -876
  31. package/package.json +7 -7
  32. package/types/appBar.d.ts +1 -0
  33. package/types/radio.d.ts +5 -1
  34. package/types/radioGroup.d.ts +14 -1
  35. package/types/styleVars.d.ts +17 -801
  36. package/umd/varlet.js +8 -6
package/es/action-sheet/style/index.mjs CHANGED
@@ -3,5 +3,5 @@ import '../../icon/icon.css'
3
3
  import '../../ripple/ripple.css'
4
4
  import '../../popup/popup.css'
5
5
  import '../actionSheet.css'
6
- import '../ActionSheetSfc.css'
7
6
  import '../ActionItemSfc.css'
7
+ import '../ActionSheetSfc.css'
package/es/app-bar/AppBar.mjs CHANGED
@@ -1,92 +1,71 @@
1
1
  import { defineComponent, ref, onUpdated, computed } from "vue";
2
2
  import { props } from "./props.mjs";
3
3
  import { createNamespace, formatElevation } from "../utils/components.mjs";
4
- import { onSmartMounted } from "@varlet/use";
4
+ import { onSmartMounted, onWindowResize } from "@varlet/use";
5
+ import { getRect } from "@varlet/shared";
5
6
  const { name, n, classes } = createNamespace("app-bar");
6
- import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode } from "vue";
7
+ import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
7
8
  function __render__(_ctx, _cache) {
8
9
  return _openBlock(), _createElementBlock(
9
- "div",
10
- {
11
- class: _normalizeClass(
12
- _ctx.classes(
13
- _ctx.n(),
14
- _ctx.n("$--box"),
15
- [_ctx.safeAreaTop, _ctx.n("--safe-area-top")],
16
- [_ctx.round, _ctx.n("--round")],
17
- [_ctx.fixed, _ctx.n("--fixed")],
18
- _ctx.formatElevation(_ctx.elevation, 3)
19
- )
20
- ),
21
- style: _normalizeStyle(_ctx.rootStyles)
22
- },
10
+ _Fragment,
11
+ null,
23
12
  [
24
13
  _createElementVNode(
25
14
  "div",
26
- {
27
- class: _normalizeClass(_ctx.n("toolbar"))
28
- },
15
+ _mergeProps({
16
+ class: _ctx.classes(
17
+ _ctx.n(),
18
+ _ctx.n("$--box"),
19
+ [_ctx.safeAreaTop, _ctx.n("--safe-area-top")],
20
+ [_ctx.round, _ctx.n("--round")],
21
+ [_ctx.fixed, _ctx.n("--fixed")],
22
+ _ctx.formatElevation(_ctx.elevation, 3)
23
+ ),
24
+ ref: "appBar",
25
+ style: _ctx.rootStyles
26
+ }, _ctx.$attrs),
29
27
  [
30
28
  _createElementVNode(
31
29
  "div",
32
30
  {
33
- class: _normalizeClass(_ctx.n("left"))
31
+ class: _normalizeClass(_ctx.n("toolbar"))
34
32
  },
35
33
  [
36
- _renderSlot(_ctx.$slots, "left"),
37
- _ctx.titlePosition === "left" ? (_openBlock(), _createElementBlock(
34
+ _createElementVNode(
38
35
  "div",
39
36
  {
40
- key: 0,
41
- class: _normalizeClass(_ctx.n("title")),
42
- style: _normalizeStyle({ paddingLeft: _ctx.paddingLeft })
37
+ class: _normalizeClass(_ctx.n("left"))
43
38
  },
44
39
  [
45
- _renderSlot(_ctx.$slots, "default", {}, () => [
46
- _createTextVNode(
47
- _toDisplayString(_ctx.title),
48
- 1
49
- /* TEXT */
50
- )
51
- ])
40
+ _renderSlot(_ctx.$slots, "left"),
41
+ _ctx.titlePosition === "left" ? (_openBlock(), _createElementBlock(
42
+ "div",
43
+ {
44
+ key: 0,
45
+ class: _normalizeClass(_ctx.n("title")),
46
+ style: _normalizeStyle({ paddingLeft: _ctx.paddingLeft })
47
+ },
48
+ [
49
+ _renderSlot(_ctx.$slots, "default", {}, () => [
50
+ _createTextVNode(
51
+ _toDisplayString(_ctx.title),
52
+ 1
53
+ /* TEXT */
54
+ )
55
+ ])
56
+ ],
57
+ 6
58
+ /* CLASS, STYLE */
59
+ )) : _createCommentVNode("v-if", true)
52
60
  ],
53
- 6
54
- /* CLASS, STYLE */
55
- )) : _createCommentVNode("v-if", true)
56
- ],
57
- 2
58
- /* CLASS */
59
- ),
60
- _ctx.titlePosition === "center" ? (_openBlock(), _createElementBlock(
61
- "div",
62
- {
63
- key: 0,
64
- class: _normalizeClass(_ctx.n("title"))
65
- },
66
- [
67
- _renderSlot(_ctx.$slots, "default", {}, () => [
68
- _createTextVNode(
69
- _toDisplayString(_ctx.title),
70
- 1
71
- /* TEXT */
72
- )
73
- ])
74
- ],
75
- 2
76
- /* CLASS */
77
- )) : _createCommentVNode("v-if", true),
78
- _createElementVNode(
79
- "div",
80
- {
81
- class: _normalizeClass(_ctx.n("right"))
82
- },
83
- [
84
- _ctx.titlePosition === "right" ? (_openBlock(), _createElementBlock(
61
+ 2
62
+ /* CLASS */
63
+ ),
64
+ _ctx.titlePosition === "center" ? (_openBlock(), _createElementBlock(
85
65
  "div",
86
66
  {
87
67
  key: 0,
88
- class: _normalizeClass(_ctx.n("title")),
89
- style: _normalizeStyle({ paddingRight: _ctx.paddingRight })
68
+ class: _normalizeClass(_ctx.n("title"))
90
69
  },
91
70
  [
92
71
  _renderSlot(_ctx.$slots, "default", {}, () => [
@@ -97,30 +76,72 @@ function __render__(_ctx, _cache) {
97
76
  )
98
77
  ])
99
78
  ],
100
- 6
101
- /* CLASS, STYLE */
79
+ 2
80
+ /* CLASS */
102
81
  )) : _createCommentVNode("v-if", true),
103
- _renderSlot(_ctx.$slots, "right")
82
+ _createElementVNode(
83
+ "div",
84
+ {
85
+ class: _normalizeClass(_ctx.n("right"))
86
+ },
87
+ [
88
+ _ctx.titlePosition === "right" ? (_openBlock(), _createElementBlock(
89
+ "div",
90
+ {
91
+ key: 0,
92
+ class: _normalizeClass(_ctx.n("title")),
93
+ style: _normalizeStyle({ paddingRight: _ctx.paddingRight })
94
+ },
95
+ [
96
+ _renderSlot(_ctx.$slots, "default", {}, () => [
97
+ _createTextVNode(
98
+ _toDisplayString(_ctx.title),
99
+ 1
100
+ /* TEXT */
101
+ )
102
+ ])
103
+ ],
104
+ 6
105
+ /* CLASS, STYLE */
106
+ )) : _createCommentVNode("v-if", true),
107
+ _renderSlot(_ctx.$slots, "right")
108
+ ],
109
+ 2
110
+ /* CLASS */
111
+ )
104
112
  ],
105
113
  2
106
114
  /* CLASS */
107
- )
115
+ ),
116
+ _renderSlot(_ctx.$slots, "content")
108
117
  ],
109
- 2
110
- /* CLASS */
118
+ 16
119
+ /* FULL_PROPS */
111
120
  ),
112
- _renderSlot(_ctx.$slots, "content")
121
+ _ctx.fixed && _ctx.placeholder ? (_openBlock(), _createElementBlock(
122
+ "div",
123
+ {
124
+ key: 0,
125
+ class: _normalizeClass(_ctx.n("placeholder")),
126
+ style: _normalizeStyle({ height: _ctx.placeholderHeight })
127
+ },
128
+ null,
129
+ 6
130
+ /* CLASS, STYLE */
131
+ )) : _createCommentVNode("v-if", true)
113
132
  ],
114
- 6
115
- /* CLASS, STYLE */
133
+ 64
134
+ /* STABLE_FRAGMENT */
116
135
  );
117
136
  }
118
137
  const __sfc__ = defineComponent({
119
138
  name,
120
139
  props,
121
140
  setup(props2, { slots }) {
141
+ const appBar = ref(null);
122
142
  const paddingLeft = ref();
123
143
  const paddingRight = ref();
144
+ const placeholderHeight = ref();
124
145
  const rootStyles = computed(() => {
125
146
  const { image, color, textColor, imageLinearGradient, zIndex } = props2;
126
147
  if (image != null) {
@@ -138,19 +159,32 @@ const __sfc__ = defineComponent({
138
159
  "z-index": zIndex
139
160
  };
140
161
  });
141
- onSmartMounted(computePadding);
162
+ onWindowResize(resizePlaceholder);
163
+ onSmartMounted(() => {
164
+ computePadding();
165
+ resizePlaceholder();
166
+ });
142
167
  onUpdated(computePadding);
143
168
  function computePadding() {
144
169
  paddingLeft.value = slots.left ? 0 : void 0;
145
170
  paddingRight.value = slots.right ? 0 : void 0;
146
171
  }
172
+ function resizePlaceholder() {
173
+ if (!props2.fixed || !props2.placeholder) {
174
+ return;
175
+ }
176
+ const { height } = getRect(appBar.value);
177
+ placeholderHeight.value = `${height}px`;
178
+ }
147
179
  return {
148
180
  rootStyles,
149
181
  paddingLeft,
150
182
  paddingRight,
151
183
  n,
152
184
  classes,
153
- formatElevation
185
+ formatElevation,
186
+ appBar,
187
+ placeholderHeight
154
188
  };
155
189
  }
156
190
  });
package/es/app-bar/props.mjs CHANGED
@@ -18,7 +18,8 @@ const props = {
18
18
  type: [Number, String],
19
19
  default: 1
20
20
  },
21
- fixed: Boolean
21
+ fixed: Boolean,
22
+ placeholder: Boolean
22
23
  };
23
24
  export {
24
25
  props
package/es/avatar/avatar.css CHANGED
@@ -1 +1 @@
1
- :root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe; --avatar-hover-transform: scale(1.1);}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { padding: 0 4px; white-space: nowrap;}.var-avatar--hoverable { transition: transform 0.2s;}.var-avatar--hoverable:hover { transform: var(--avatar-hover-transform); cursor: pointer;}
1
+ :root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe; --avatar-hover-transform: scale(1.1);}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s; -webkit-tap-highlight-color: transparent;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { padding: 0 4px; white-space: nowrap;}.var-avatar--hoverable { transition: transform 0.2s;}.var-avatar--hoverable:hover { transform: var(--avatar-hover-transform); cursor: pointer;}
package/es/bottom-navigation/BottomNavigation.mjs CHANGED
@@ -20,7 +20,7 @@ import { props } from "./props.mjs";
20
20
  import { useBottomNavigationItems } from "./provide.mjs";
21
21
  import { createNamespace } from "../utils/components.mjs";
22
22
  import { isNumber, normalizeToArray, call, getRect } from "@varlet/shared";
23
- import { onSmartMounted } from "@varlet/use";
23
+ import { onSmartMounted, onWindowResize } from "@varlet/use";
24
24
  const { name, n, classes } = createNamespace("bottom-navigation");
25
25
  const { n: nItem } = createNamespace("bottom-navigation-item");
26
26
  const RIGHT_HALF_SPACE_CLASS = nItem("--right-half-space");
@@ -113,6 +113,7 @@ const __sfc__ = defineComponent({
113
113
  },
114
114
  { immediate: true, deep: true }
115
115
  );
116
+ onWindowResize(resizePlaceholder);
116
117
  onSmartMounted(() => {
117
118
  resizePlaceholder();
118
119
  if (!slots.fab) {
package/es/bottom-navigation-item/bottomNavigationItem.css CHANGED
@@ -1 +1 @@
1
- :root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: var(--color-surface-container-high); --bottom-navigation-item-variant-active-background-color: var(--color-primary-container); --bottom-navigation-item-variant-active-color: var(--color-on-primary-container); --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px; --bottom-navigation-item-variant-icon-container-height: 30px; --bottom-navigation-item-variant-icon-container-border-radius: 100px; --bottom-navigation-item-variant-icon-container-max-width: 58px;}.var-bottom-navigation-item { height: 100%; padding-bottom: 2px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms, margin 250ms;}.var-bottom-navigation-item--variant-padding { padding-bottom: 6px;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms;}.var-bottom-navigation-item--active .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--variant-icon-container { display: flex; justify-content: center; align-items: center; width: 0; height: var(--bottom-navigation-item-variant-icon-container-height); border-radius: var(--bottom-navigation-item-variant-icon-container-border-radius); max-width: var(--bottom-navigation-item-variant-icon-container-max-width);}.var-bottom-navigation-item--variant-active { color: var(--bottom-navigation-item-variant-active-color); background-color: var(--bottom-navigation-item-variant-active-background-color); width: 100%; transition: background-color 0.2s, width 0.15s;}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { margin-top: 6px; margin-right: -4px;}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}
1
+ :root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: var(--color-surface-container-high); --bottom-navigation-item-variant-active-background-color: var(--color-primary-container); --bottom-navigation-item-variant-active-color: var(--color-on-primary-container); --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px; --bottom-navigation-item-variant-icon-container-height: 30px; --bottom-navigation-item-variant-icon-container-border-radius: 100px; --bottom-navigation-item-variant-icon-container-max-width: 58px;}.var-bottom-navigation-item { height: 100%; padding-bottom: 2px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms, margin 250ms;}.var-bottom-navigation-item--variant-padding { padding-bottom: 6px;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms;}.var-bottom-navigation-item--active .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--variant-icon-container { display: flex; justify-content: center; align-items: center; width: 0; height: var(--bottom-navigation-item-variant-icon-container-height); border-radius: var(--bottom-navigation-item-variant-icon-container-border-radius); max-width: var(--bottom-navigation-item-variant-icon-container-max-width);}.var-bottom-navigation-item--variant-active { color: var(--bottom-navigation-item-variant-active-color); background-color: var(--bottom-navigation-item-variant-active-background-color); width: 100%; transition: background-color 0.25s, width 0.5s;}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { margin-top: 6px; margin-right: -4px;}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}
package/es/checkbox/Checkbox.mjs CHANGED
@@ -23,14 +23,14 @@ function __render__(_ctx, _cache) {
23
23
  return _openBlock(), _createElementBlock(
24
24
  "div",
25
25
  {
26
- class: _normalizeClass(_ctx.n("wrap")),
27
- onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
26
+ class: _normalizeClass(_ctx.n("wrap"))
28
27
  },
29
28
  [
30
29
  _createElementVNode(
31
30
  "div",
32
31
  {
33
- class: _normalizeClass(_ctx.n())
32
+ class: _normalizeClass(_ctx.n()),
33
+ onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
34
34
  },
35
35
  [
36
36
  _withDirectives((_openBlock(), _createElementBlock("div", {
package/es/checkbox-group/style/index.mjs CHANGED
@@ -1,5 +1,8 @@
1
1
  import '../../styles/common.css'
2
2
  import '../../form-details/formDetails.css'
3
+ import '../../ripple/ripple.css'
4
+ import '../../icon/icon.css'
5
+ import '../../hover-overlay/hoverOverlay.css'
3
6
  import '../../checkbox/checkbox.css'
4
7
  import '../checkboxGroup.css'
5
8
  import '../CheckboxGroupSfc.css'
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__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;}
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-border-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/ellipsis/ellipsis.css CHANGED
@@ -1 +1 @@
1
- .var-ellipsis { width: 100%; overflow: hidden; vertical-align: bottom;}.var-ellipsis--clamp { display: -webkit-inline-box; -webkit-box-orient: vertical;}.var-ellipsis--line { display: inline-block; white-space: nowrap; text-overflow: ellipsis;}.var-ellipsis--cursor { cursor: pointer;}.var-ellipsis--expand { display: inline-block; white-space: wrap; overflow: visible;}
1
+ .var-ellipsis { width: 100%; overflow: hidden; vertical-align: bottom; -webkit-tap-highlight-color: transparent;}.var-ellipsis--clamp { display: -webkit-inline-box; -webkit-box-orient: vertical;}.var-ellipsis--line { display: inline-block; white-space: nowrap; text-overflow: ellipsis;}.var-ellipsis--cursor { cursor: pointer;}.var-ellipsis--expand { display: inline-block; white-space: wrap; overflow: visible;}
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.13'
265
+ const version = '3.2.14'
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.13'
177
+ const version = '3.2.14'
178
178
 
179
179
  function install(app) {
180
180
  ActionSheet.install && app.use(ActionSheet)
package/es/link/link.css CHANGED
@@ -1 +1 @@
1
- :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); --link-focus-opacity: 0.8;}.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); transition: opacity 0.15s;}.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;}.var-link--focusing { opacity: var(--link-focus-opacity);}
1
+ :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); --link-focus-opacity: 0.8;}.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); transition: opacity 0.15s; -webkit-tap-highlight-color: transparent;}.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;}.var-link--focusing { opacity: var(--link-focus-opacity);}
package/es/paper/paper.css CHANGED
@@ -1 +1 @@
1
- :root { --paper-background: var(--color-surface-container-highest); --paper-border-radius: 4px;}.var-paper { background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius);}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}
1
+ :root { --paper-background: var(--color-surface-container-highest); --paper-border-radius: 4px;}.var-paper { background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}
package/es/radio/Radio.mjs CHANGED
@@ -85,7 +85,7 @@ function __render__(_ctx, _cache) {
85
85
  onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
86
86
  },
87
87
  [
88
- _renderSlot(_ctx.$slots, "default")
88
+ _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
89
89
  ],
90
90
  2
91
91
  /* CLASS */
package/es/radio-group/RadioGroup.mjs CHANGED
@@ -1,14 +1,16 @@
1
1
  import VarFormDetails from "../form-details/index.mjs";
2
+ import RadioGroupOption from "./RadioGroupOption.mjs";
2
3
  import { computed, defineComponent, nextTick, watch } from "vue";
3
4
  import { props } from "./props.mjs";
4
5
  import { useValidation, createNamespace } from "../utils/components.mjs";
5
6
  import { useRadios } from "./provide.mjs";
6
7
  import { useForm } from "../form/provide.mjs";
7
- import { call, preventDefault } from "@varlet/shared";
8
+ import { call, preventDefault, isArray } from "@varlet/shared";
8
9
  import { useEventListener } from "@varlet/use";
9
10
  const { name, n, classes } = createNamespace("radio-group");
10
- import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
11
+ import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createVNode as _createVNode } from "vue";
11
12
  function __render__(_ctx, _cache) {
13
+ const _component_radio_group_option = _resolveComponent("radio-group-option");
12
14
  const _component_var_form_details = _resolveComponent("var-form-details");
13
15
  return _openBlock(), _createElementBlock(
14
16
  "div",
@@ -22,6 +24,20 @@ function __render__(_ctx, _cache) {
22
24
  class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n(`--${_ctx.direction}`)))
23
25
  },
24
26
  [
27
+ _ctx.radioGroupOptions.length ? (_openBlock(true), _createElementBlock(
28
+ _Fragment,
29
+ { key: 0 },
30
+ _renderList(_ctx.radioGroupOptions, (option) => {
31
+ return _openBlock(), _createBlock(_component_radio_group_option, {
32
+ key: option[_ctx.valueKey],
33
+ "label-key": _ctx.labelKey,
34
+ "value-key": _ctx.valueKey,
35
+ option
36
+ }, null, 8, ["label-key", "value-key", "option"]);
37
+ }),
38
+ 128
39
+ /* KEYED_FRAGMENT */
40
+ )) : _createCommentVNode("v-if", true),
25
41
  _renderSlot(_ctx.$slots, "default")
26
42
  ],
27
43
  2
@@ -35,7 +51,7 @@ function __render__(_ctx, _cache) {
35
51
  }
36
52
  const __sfc__ = defineComponent({
37
53
  name,
38
- components: { VarFormDetails },
54
+ components: { VarFormDetails, RadioGroupOption },
39
55
  props,
40
56
  setup(props2) {
41
57
  const { length, radios, bindRadios } = useRadios();
@@ -47,6 +63,7 @@ const __sfc__ = defineComponent({
47
63
  // expose
48
64
  resetValidation
49
65
  } = useValidation();
66
+ const radioGroupOptions = computed(() => isArray(props2.options) ? props2.options : []);
50
67
  const radioGroupErrorMessage = computed(() => errorMessage.value);
51
68
  const radioGroupProvider = {
52
69
  onToggle,
@@ -127,7 +144,8 @@ const __sfc__ = defineComponent({
127
144
  classes,
128
145
  reset,
129
146
  validate,
130
- resetValidation
147
+ resetValidation,
148
+ radioGroupOptions
131
149
  };
132
150
  }
133
151
  });
package/es/radio-group/RadioGroupOption.mjs ADDED
@@ -0,0 +1,45 @@
1
+ import { createVNode as _createVNode } from "vue";
2
+ import { defineComponent } from "vue";
3
+ import { isFunction } from "@varlet/shared";
4
+ import { createNamespace } from "../utils/components.mjs";
5
+ import Radio from "../radio/index.mjs";
6
+ const {
7
+ name
8
+ } = createNamespace("radio-group-option");
9
+ var stdin_default = defineComponent({
10
+ name,
11
+ props: {
12
+ labelKey: {
13
+ type: String,
14
+ required: true
15
+ },
16
+ valueKey: {
17
+ type: String,
18
+ required: true
19
+ },
20
+ option: {
21
+ type: Object,
22
+ required: true
23
+ }
24
+ },
25
+ setup(props) {
26
+ return () => {
27
+ const {
28
+ option,
29
+ labelKey,
30
+ valueKey
31
+ } = props;
32
+ return _createVNode(Radio, {
33
+ "checkedValue": option[valueKey],
34
+ "disabled": option.disabled
35
+ }, {
36
+ default: ({
37
+ checked
38
+ }) => isFunction(option[labelKey]) ? option[labelKey](option, checked) : option[labelKey]
39
+ });
40
+ };
41
+ }
42
+ });
43
+ export {
44
+ stdin_default as default
45
+ };
package/es/radio-group/props.mjs CHANGED
@@ -8,6 +8,15 @@ const props = {
8
8
  type: String,
9
9
  default: "horizontal"
10
10
  },
11
+ options: Array,
12
+ labelKey: {
13
+ type: String,
14
+ default: "label"
15
+ },
16
+ valueKey: {
17
+ type: String,
18
+ default: "value"
19
+ },
11
20
  validateTrigger: {
12
21
  type: Array,
13
22
  default: () => ["onChange"]
package/es/radio-group/style/index.mjs CHANGED
@@ -1,4 +1,8 @@
1
1
  import '../../styles/common.css'
2
2
  import '../../form-details/formDetails.css'
3
+ import '../../ripple/ripple.css'
4
+ import '../../hover-overlay/hoverOverlay.css'
5
+ import '../../icon/icon.css'
6
+ import '../../radio/radio.css'
3
7
  import '../radioGroup.css'
4
8
  import '../RadioGroupSfc.css'
package/es/snackbar/style/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import '../../styles/common.css'
2
+ import '../SnackbarSfc.css'
2
3
  import '../../styles/elevation.css'
3
4
  import '../../loading/loading.css'
4
5
  import '../../icon/icon.css'
5
6
  import '../snackbar.css'
6
7
  import '../coreSfc.css'
7
- import '../SnackbarSfc.css'
package/es/style-provider/index.mjs CHANGED
@@ -2,15 +2,33 @@ import VarStyleProvider from "./StyleProvider.mjs";
2
2
  import { formatStyleVars } from "../utils/elements.mjs";
3
3
  import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
4
4
  import { props as styleProviderProps } from "./props.mjs";
5
- const mountedVarKeys = [];
5
+ const styleId = "varlet-style-vars";
6
+ function removeStyle() {
7
+ const style = document.head.querySelector(`#${styleId}`);
8
+ if (style) {
9
+ document.head.removeChild(style);
10
+ }
11
+ }
12
+ function insertStyle(content) {
13
+ const style = document.createElement("style");
14
+ style.id = styleId;
15
+ style.innerHTML = content;
16
+ document.head.appendChild(style);
17
+ }
6
18
  function StyleProvider(styleVars) {
7
- mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key));
8
- mountedVarKeys.length = 0;
19
+ if (styleVars == null) {
20
+ removeStyle();
21
+ return;
22
+ }
9
23
  const styles = formatStyleVars(styleVars != null ? styleVars : {});
10
- Object.entries(styles).forEach(([key, value]) => {
11
- document.documentElement.style.setProperty(key, value);
12
- mountedVarKeys.push(key);
13
- });
24
+ const content = Object.entries(styles).reduce((content2, [key, value]) => {
25
+ content2 += `${key}:${value};`;
26
+ return content2;
27
+ }, `:root:root {
28
+ `);
29
+ removeStyle();
30
+ insertStyle(`${content}
31
+ }`);
14
32
  }
15
33
  StyleProvider.Component = VarStyleProvider;
16
34
  withInstall(VarStyleProvider);