@varlet/ui 3.11.0 → 3.11.2
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.
- package/README.md +1 -1
- package/README.zh-CN.md +1 -1
- package/es/checkbox/Checkbox.mjs +50 -47
- package/es/checkbox/checkbox.css +1 -1
- package/es/index.bundle.mjs +1 -1
- package/es/index.mjs +1 -1
- package/es/input/Input.mjs +6 -1
- package/es/menu-select/MenuSelect.mjs +3 -3
- package/es/radio/Radio.mjs +53 -47
- package/es/radio/radio.css +1 -1
- package/es/snackbar/style/index.mjs +1 -1
- package/es/varlet.css +1 -1
- package/es/varlet.esm.js +2262 -2248
- package/highlight/web-types.en-US.json +1 -1
- package/highlight/web-types.zh-CN.json +1 -1
- package/lib/varlet.cjs.js +126 -113
- package/lib/varlet.css +1 -1
- package/package.json +7 -7
- package/types/input.d.ts +2 -0
- package/umd/varlet.js +8 -8
package/README.md
CHANGED
|
@@ -112,7 +112,7 @@ The following projects are maintained by community personnel, welcome to add.
|
|
|
112
112
|
| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |
|
|
113
113
|
| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |
|
|
114
114
|
| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |
|
|
115
|
-
| [vue3-varlet-mobile](https://github.com/
|
|
115
|
+
| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `A mobile template based on Vue 3 and Varlet Component Library` |
|
|
116
116
|
|
|
117
117
|
### Playground
|
|
118
118
|
|
package/README.zh-CN.md
CHANGED
|
@@ -112,7 +112,7 @@ createApp(App).use(Varlet).mount('#app')
|
|
|
112
112
|
| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `基于 Vue 的移动端模板脚手架，提供了 Varlet 组件库的移动端预设` |
|
|
113
113
|
| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `基于 Vue3 的桌面端模板脚手架，提供了 Varlet 组件库的桌面端预设` |
|
|
114
114
|
| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `为 Varlet 开发人员提供更好的智能感知的 VSCode 扩展` |
|
|
115
|
-
| [vue3-varlet-mobile](https://github.com/
|
|
115
|
+
| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `基于 Vue 3 和 Varlet 组件库的移动模板` |
|
|
116
116
|
|
|
117
117
|
### 演练场
|
|
118
118
|
|
package/es/checkbox/Checkbox.mjs
CHANGED
|
@@ -12,7 +12,7 @@ import { props } from "./props.mjs";
|
|
|
12
12
|
import { useCheckboxGroup } from "./provide.mjs";
|
|
13
13
|
const { name, n, classes } = createNamespace("checkbox");
|
|
14
14
|
import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
|
|
15
|
-
const _hoisted_1 = ["tabindex"];
|
|
15
|
+
const _hoisted_1 = ["aria-checked", "aria-disabled", "tabindex"];
|
|
16
16
|
function __render__(_ctx, _cache) {
|
|
17
17
|
const _component_var_icon = _resolveComponent("var-icon");
|
|
18
18
|
const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
|
|
@@ -25,15 +25,20 @@ function __render__(_ctx, _cache) {
|
|
|
25
25
|
class: _normalizeClass(_ctx.n("wrap"))
|
|
26
26
|
},
|
|
27
27
|
[
|
|
28
|
-
_createElementVNode(
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
28
|
+
_createElementVNode("div", {
|
|
29
|
+
ref: "checkbox",
|
|
30
|
+
role: "checkbox",
|
|
31
|
+
"aria-checked": _ctx.isIndeterminate ? "mixed" : _ctx.checked,
|
|
32
|
+
"aria-disabled": _ctx.formDisabled || _ctx.disabled,
|
|
33
|
+
class: _normalizeClass(_ctx.n()),
|
|
34
|
+
tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
|
|
35
|
+
onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = true),
|
|
36
|
+
onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = false),
|
|
37
|
+
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
|
|
38
|
+
}, [
|
|
39
|
+
_withDirectives((_openBlock(), _createElementBlock(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
37
42
|
class: _normalizeClass(
|
|
38
43
|
_ctx.classes(
|
|
39
44
|
_ctx.n("action"),
|
|
@@ -42,11 +47,9 @@ function __render__(_ctx, _cache) {
|
|
|
42
47
|
[_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
|
|
43
48
|
)
|
|
44
49
|
),
|
|
45
|
-
style: _normalizeStyle({ color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor })
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
|
|
49
|
-
}, [
|
|
50
|
+
style: _normalizeStyle({ color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor })
|
|
51
|
+
},
|
|
52
|
+
[
|
|
50
53
|
_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "indeterminate-icon", { key: 0 }, () => [
|
|
51
54
|
_createVNode(_component_var_icon, {
|
|
52
55
|
class: _normalizeClass(_ctx.n("icon")),
|
|
@@ -75,33 +78,33 @@ function __render__(_ctx, _cache) {
|
|
|
75
78
|
hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
|
|
76
79
|
focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
|
|
77
80
|
}, null, 8, ["hovering", "focusing"])
|
|
78
|
-
],
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
_ctx
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
)
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
),
|
|
81
|
+
],
|
|
82
|
+
6
|
|
83
|
+
/* CLASS, STYLE */
|
|
84
|
+
)), [
|
|
85
|
+
[_directive_hover, _ctx.handleHovering, "desktop"],
|
|
86
|
+
[_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }]
|
|
87
|
+
]),
|
|
88
|
+
_ctx.$slots.default ? (_openBlock(), _createElementBlock(
|
|
89
|
+
"div",
|
|
90
|
+
{
|
|
91
|
+
key: 0,
|
|
92
|
+
class: _normalizeClass(
|
|
93
|
+
_ctx.classes(
|
|
94
|
+
_ctx.n("text"),
|
|
95
|
+
[_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")],
|
|
96
|
+
[_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
|
|
97
|
+
)
|
|
98
|
+
),
|
|
99
|
+
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
|
|
100
|
+
},
|
|
101
|
+
[
|
|
102
|
+
_renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
|
|
103
|
+
],
|
|
104
|
+
2
|
|
105
|
+
/* CLASS */
|
|
106
|
+
)) : _createCommentVNode("v-if", true)
|
|
107
|
+
], 42, _hoisted_1),
|
|
105
108
|
_createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
|
|
106
109
|
],
|
|
107
110
|
2
|
|
@@ -118,7 +121,7 @@ const __sfc__ = defineComponent({
|
|
|
118
121
|
},
|
|
119
122
|
props,
|
|
120
123
|
setup(props2) {
|
|
121
|
-
const
|
|
124
|
+
const checkbox = ref(null);
|
|
122
125
|
const isFocusing = ref(false);
|
|
123
126
|
const value = useVModel(props2, "modelValue");
|
|
124
127
|
const isIndeterminate = useVModel(props2, "indeterminate");
|
|
@@ -181,7 +184,7 @@ const __sfc__ = defineComponent({
|
|
|
181
184
|
change(checked.value ? uncheckedValue : checkedValue2);
|
|
182
185
|
}
|
|
183
186
|
function handleTextClick() {
|
|
184
|
-
|
|
187
|
+
checkbox.value.focus();
|
|
185
188
|
}
|
|
186
189
|
function sync(values) {
|
|
187
190
|
const { checkedValue: checkedValue2, uncheckedValue } = props2;
|
|
@@ -208,7 +211,7 @@ const __sfc__ = defineComponent({
|
|
|
208
211
|
preventDefault(event);
|
|
209
212
|
}
|
|
210
213
|
if (key === "Enter") {
|
|
211
|
-
|
|
214
|
+
checkbox.value.click();
|
|
212
215
|
}
|
|
213
216
|
}
|
|
214
217
|
function handleKeyup(event) {
|
|
@@ -217,14 +220,14 @@ const __sfc__ = defineComponent({
|
|
|
217
220
|
}
|
|
218
221
|
if (event.key === " ") {
|
|
219
222
|
preventDefault(event);
|
|
220
|
-
|
|
223
|
+
checkbox.value.click();
|
|
221
224
|
}
|
|
222
225
|
}
|
|
223
226
|
function validate() {
|
|
224
227
|
return v(props2.rules, props2.modelValue);
|
|
225
228
|
}
|
|
226
229
|
return {
|
|
227
|
-
|
|
230
|
+
checkbox,
|
|
228
231
|
isFocusing,
|
|
229
232
|
isIndeterminate,
|
|
230
233
|
checked,
|
package/es/checkbox/checkbox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-color: #555; --checkbox-icon-size: 24px;}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;
|
|
1
|
+
:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-color: #555; --checkbox-icon-size: 24px;}.var-checkbox { display: flex; align-items: center; outline: none; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox__text { color: var(--checkbox-text-color);}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}
|
package/es/index.bundle.mjs
CHANGED
|
@@ -283,7 +283,7 @@ import './tooltip/style/index.mjs'
|
|
|
283
283
|
import './uploader/style/index.mjs'
|
|
284
284
|
import './watermark/style/index.mjs'
|
|
285
285
|
|
|
286
|
-
const version = '3.11.
|
|
286
|
+
const version = '3.11.2'
|
|
287
287
|
|
|
288
288
|
function install(app) {
|
|
289
289
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/index.mjs
CHANGED
|
@@ -188,7 +188,7 @@ export * from './tooltip/index.mjs'
|
|
|
188
188
|
export * from './uploader/index.mjs'
|
|
189
189
|
export * from './watermark/index.mjs'
|
|
190
190
|
|
|
191
|
-
const version = '3.11.
|
|
191
|
+
const version = '3.11.2'
|
|
192
192
|
|
|
193
193
|
function install(app) {
|
|
194
194
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/input/Input.mjs
CHANGED
|
@@ -345,6 +345,10 @@ const __sfc__ = defineComponent({
|
|
|
345
345
|
;
|
|
346
346
|
el.value.blur();
|
|
347
347
|
}
|
|
348
|
+
function select() {
|
|
349
|
+
;
|
|
350
|
+
el.value.select();
|
|
351
|
+
}
|
|
348
352
|
return {
|
|
349
353
|
el,
|
|
350
354
|
id,
|
|
@@ -373,7 +377,8 @@ const __sfc__ = defineComponent({
|
|
|
373
377
|
resetValidation,
|
|
374
378
|
reset,
|
|
375
379
|
focus,
|
|
376
|
-
blur
|
|
380
|
+
blur,
|
|
381
|
+
select
|
|
377
382
|
};
|
|
378
383
|
}
|
|
379
384
|
});
|
|
@@ -299,12 +299,12 @@ const __sfc__ = defineComponent({
|
|
|
299
299
|
}
|
|
300
300
|
}
|
|
301
301
|
function getActiveElementParent(activeElement) {
|
|
302
|
-
var _a, _b
|
|
302
|
+
var _a, _b;
|
|
303
303
|
if (activeElement.classList.contains("var-menu-option--children-trigger")) {
|
|
304
304
|
return (_a = activeElement.parentNode) == null ? void 0 : _a.parentNode;
|
|
305
305
|
}
|
|
306
|
-
if (activeElement.classList.contains("var-
|
|
307
|
-
const optionElement = (
|
|
306
|
+
if (activeElement.classList.contains("var-checkbox")) {
|
|
307
|
+
const optionElement = (_b = activeElement.parentNode) == null ? void 0 : _b.parentNode;
|
|
308
308
|
if (optionElement) {
|
|
309
309
|
return getActiveElementParent(optionElement);
|
|
310
310
|
}
|
package/es/radio/Radio.mjs
CHANGED
|
@@ -12,8 +12,7 @@ import { props } from "./props.mjs";
|
|
|
12
12
|
import { useRadioGroup } from "./provide.mjs";
|
|
13
13
|
const { name, n, classes } = createNamespace("radio");
|
|
14
14
|
import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, mergeProps as _mergeProps, createElementVNode as _createElementVNode } from "vue";
|
|
15
|
-
const _hoisted_1 = ["aria-checked"];
|
|
16
|
-
const _hoisted_2 = ["tabindex"];
|
|
15
|
+
const _hoisted_1 = ["aria-checked", "aria-disabled", "tabindex"];
|
|
17
16
|
function __render__(_ctx, _cache) {
|
|
18
17
|
const _component_var_icon = _resolveComponent("var-icon");
|
|
19
18
|
const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
|
|
@@ -27,47 +26,54 @@ function __render__(_ctx, _cache) {
|
|
|
27
26
|
},
|
|
28
27
|
[
|
|
29
28
|
_createElementVNode("div", _mergeProps({
|
|
29
|
+
ref: "radio",
|
|
30
30
|
role: "radio",
|
|
31
|
+
class: _ctx.n(),
|
|
31
32
|
"aria-checked": _ctx.checked,
|
|
32
|
-
|
|
33
|
+
"aria-disabled": _ctx.formDisabled || _ctx.disabled
|
|
33
34
|
}, _ctx.$attrs, {
|
|
34
|
-
|
|
35
|
+
tabindex: _ctx.tabIndex,
|
|
36
|
+
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
|
|
37
|
+
onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = true),
|
|
38
|
+
onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = false)
|
|
35
39
|
}), [
|
|
36
|
-
_withDirectives((_openBlock(), _createElementBlock(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
_ctx.
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
size
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
size
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
40
|
+
_withDirectives((_openBlock(), _createElementBlock(
|
|
41
|
+
"div",
|
|
42
|
+
{
|
|
43
|
+
class: _normalizeClass(
|
|
44
|
+
_ctx.classes(
|
|
45
|
+
_ctx.n("action"),
|
|
46
|
+
[_ctx.checked, _ctx.n("--checked"), _ctx.n("--unchecked")],
|
|
47
|
+
[_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
|
|
48
|
+
[_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
|
|
49
|
+
)
|
|
50
|
+
),
|
|
51
|
+
style: _normalizeStyle({ color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor })
|
|
52
|
+
},
|
|
53
|
+
[
|
|
54
|
+
_ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
|
|
55
|
+
_createVNode(_component_var_icon, {
|
|
56
|
+
class: _normalizeClass(_ctx.n("icon")),
|
|
57
|
+
"var-radio-cover": "",
|
|
58
|
+
name: "radio-marked",
|
|
59
|
+
size: _ctx.iconSize
|
|
60
|
+
}, null, 8, ["class", "size"])
|
|
61
|
+
]) : _renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 }, () => [
|
|
62
|
+
_createVNode(_component_var_icon, {
|
|
63
|
+
class: _normalizeClass(_ctx.n("icon")),
|
|
64
|
+
"var-radio-cover": "",
|
|
65
|
+
name: "radio-blank",
|
|
66
|
+
size: _ctx.iconSize
|
|
67
|
+
}, null, 8, ["class", "size"])
|
|
68
|
+
]),
|
|
69
|
+
_createVNode(_component_var_hover_overlay, {
|
|
70
|
+
hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
|
|
71
|
+
focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
|
|
72
|
+
}, null, 8, ["hovering", "focusing"])
|
|
73
|
+
],
|
|
74
|
+
6
|
|
75
|
+
/* CLASS, STYLE */
|
|
76
|
+
)), [
|
|
71
77
|
[_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }],
|
|
72
78
|
[_directive_hover, _ctx.handleHovering, "desktop"]
|
|
73
79
|
]),
|
|
@@ -82,7 +88,7 @@ function __render__(_ctx, _cache) {
|
|
|
82
88
|
[_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
|
|
83
89
|
)
|
|
84
90
|
),
|
|
85
|
-
onClick: _cache[
|
|
91
|
+
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
|
|
86
92
|
},
|
|
87
93
|
[
|
|
88
94
|
_renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
|
|
@@ -108,7 +114,7 @@ const __sfc__ = defineComponent({
|
|
|
108
114
|
inheritAttrs: false,
|
|
109
115
|
props,
|
|
110
116
|
setup(props2) {
|
|
111
|
-
const
|
|
117
|
+
const radio = ref();
|
|
112
118
|
const isFocusing = ref(false);
|
|
113
119
|
const value = useVModel(props2, "modelValue");
|
|
114
120
|
const checked = computed(() => value.value === props2.checkedValue);
|
|
@@ -142,8 +148,8 @@ const __sfc__ = defineComponent({
|
|
|
142
148
|
isFocusing: computed(() => isFocusing.value),
|
|
143
149
|
// keyboard arrow move
|
|
144
150
|
move() {
|
|
145
|
-
|
|
146
|
-
|
|
151
|
+
radio.value.focus();
|
|
152
|
+
radio.value.click();
|
|
147
153
|
},
|
|
148
154
|
moveable() {
|
|
149
155
|
return !(form == null ? void 0 : form.disabled.value) && !props2.disabled && !(form == null ? void 0 : form.readonly.value) && !props2.readonly;
|
|
@@ -162,7 +168,7 @@ const __sfc__ = defineComponent({
|
|
|
162
168
|
preventDefault(event);
|
|
163
169
|
}
|
|
164
170
|
if (key === "Enter") {
|
|
165
|
-
|
|
171
|
+
radio.value.click();
|
|
166
172
|
}
|
|
167
173
|
}
|
|
168
174
|
function handleKeyup(event) {
|
|
@@ -171,7 +177,7 @@ const __sfc__ = defineComponent({
|
|
|
171
177
|
}
|
|
172
178
|
if (event.key === " ") {
|
|
173
179
|
preventDefault(event);
|
|
174
|
-
|
|
180
|
+
radio.value.click();
|
|
175
181
|
}
|
|
176
182
|
}
|
|
177
183
|
function validateWithTrigger(trigger) {
|
|
@@ -202,7 +208,7 @@ const __sfc__ = defineComponent({
|
|
|
202
208
|
change(checked.value ? uncheckedValue : checkedValue);
|
|
203
209
|
}
|
|
204
210
|
function handleTextClick() {
|
|
205
|
-
|
|
211
|
+
radio.value.focus();
|
|
206
212
|
}
|
|
207
213
|
function sync(v2) {
|
|
208
214
|
const { checkedValue, uncheckedValue } = props2;
|
|
@@ -226,7 +232,7 @@ const __sfc__ = defineComponent({
|
|
|
226
232
|
change(changedValue);
|
|
227
233
|
}
|
|
228
234
|
return {
|
|
229
|
-
|
|
235
|
+
radio,
|
|
230
236
|
isFocusing,
|
|
231
237
|
checked,
|
|
232
238
|
errorMessage,
|
package/es/radio/radio.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-color: #555;}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--radio-action-padding); border-radius: 50%;
|
|
1
|
+
:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-color: #555;}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio__text { color: var(--radio-text-color);}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}
|