@varlet/ui 2.17.0-alpha.1695910724155 → 2.17.1
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/es/dialog/dialog.css +1 -1
- package/es/index.bundle.mjs +1 -1
- package/es/index.mjs +1 -1
- package/es/option/Option.mjs +28 -28
- package/es/option/option.css +1 -1
- package/es/option/props.mjs +2 -1
- package/es/popup/popup.css +1 -1
- package/es/snackbar/style/index.mjs +1 -1
- package/es/style.css +1 -1
- package/es/themes/dark/option.mjs +1 -1
- package/es/uploader/Uploader.mjs +8 -4
- package/es/uploader/props.mjs +2 -0
- package/es/utils/shared.mjs +4 -4
- package/es/varlet.esm.js +1319 -1319
- package/highlight/web-types.en-US.json +25 -3
- package/highlight/web-types.zh-CN.json +23 -1
- package/lib/style.css +1 -1
- package/lib/varlet.cjs.js +44 -37
- package/package.json +7 -7
- package/types/option.d.ts +1 -0
- package/types/uploader.d.ts +2 -0
- package/umd/varlet.js +6 -6
package/es/dialog/dialog.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size);}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}
|
|
1
|
+
:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size); word-wrap: break-word;}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}
|
package/es/index.bundle.mjs
CHANGED
|
@@ -250,7 +250,7 @@ import './tooltip/style/index.mjs'
|
|
|
250
250
|
import './uploader/style/index.mjs'
|
|
251
251
|
import './watermark/style/index.mjs'
|
|
252
252
|
|
|
253
|
-
const version = '2.17.
|
|
253
|
+
const version = '2.17.1'
|
|
254
254
|
|
|
255
255
|
function install(app) {
|
|
256
256
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/index.mjs
CHANGED
|
@@ -166,7 +166,7 @@ export * from './tooltip/index.mjs'
|
|
|
166
166
|
export * from './uploader/index.mjs'
|
|
167
167
|
export * from './watermark/index.mjs'
|
|
168
168
|
|
|
169
|
-
const version = '2.17.
|
|
169
|
+
const version = '2.17.1'
|
|
170
170
|
|
|
171
171
|
function install(app) {
|
|
172
172
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/option/Option.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { useSelect } from "./provide.mjs";
|
|
|
7
7
|
import { createNamespace } from "../utils/components.mjs";
|
|
8
8
|
import { props } from "./props.mjs";
|
|
9
9
|
const { name, n, classes } = createNamespace("option");
|
|
10
|
-
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString,
|
|
10
|
+
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
|
|
11
11
|
function __render__(_ctx, _cache) {
|
|
12
12
|
const _component_var_checkbox = _resolveComponent("var-checkbox");
|
|
13
13
|
const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
|
|
@@ -16,7 +16,7 @@ function __render__(_ctx, _cache) {
|
|
|
16
16
|
return _withDirectives((_openBlock(), _createElementBlock(
|
|
17
17
|
"div",
|
|
18
18
|
{
|
|
19
|
-
class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.optionSelected, _ctx.n("--selected-color")])),
|
|
19
|
+
class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])),
|
|
20
20
|
style: _normalizeStyle({
|
|
21
21
|
color: _ctx.optionSelected ? _ctx.focusColor : void 0
|
|
22
22
|
}),
|
|
@@ -38,36 +38,33 @@ function __render__(_ctx, _cache) {
|
|
|
38
38
|
_ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
|
|
39
39
|
key: 0,
|
|
40
40
|
ref: "checkbox",
|
|
41
|
-
"checked-color": _ctx.focusColor,
|
|
42
41
|
modelValue: _ctx.optionSelected,
|
|
43
42
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
|
|
43
|
+
"checked-color": _ctx.focusColor,
|
|
44
|
+
disabled: _ctx.disabled,
|
|
44
45
|
onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
|
|
45
46
|
}, ["stop"])),
|
|
46
47
|
onChange: _ctx.handleSelect
|
|
47
|
-
}, null, 8, ["checked-color", "
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
2
|
|
63
|
-
/* CLASS */
|
|
64
|
-
),
|
|
65
|
-
_createVNode(_component_var_hover_overlay, { hovering: _ctx.hovering }, null, 8, ["hovering"])
|
|
48
|
+
}, null, 8, ["modelValue", "checked-color", "disabled", "onChange"])) : _createCommentVNode("v-if", true),
|
|
49
|
+
_renderSlot(_ctx.$slots, "default", {}, () => [
|
|
50
|
+
_createElementVNode(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
|
|
54
|
+
},
|
|
55
|
+
_toDisplayString(_ctx.label),
|
|
56
|
+
3
|
|
57
|
+
/* TEXT, CLASS */
|
|
58
|
+
)
|
|
59
|
+
]),
|
|
60
|
+
_createVNode(_component_var_hover_overlay, {
|
|
61
|
+
hovering: _ctx.hovering && !_ctx.disabled
|
|
62
|
+
}, null, 8, ["hovering"])
|
|
66
63
|
],
|
|
67
64
|
6
|
|
68
65
|
/* CLASS, STYLE */
|
|
69
66
|
)), [
|
|
70
|
-
[_directive_ripple],
|
|
67
|
+
[_directive_ripple, { disabled: _ctx.disabled }],
|
|
71
68
|
[_directive_hover, _ctx.handleHovering, "desktop"]
|
|
72
69
|
]);
|
|
73
70
|
}
|
|
@@ -96,24 +93,27 @@ const __sfc__ = defineComponent({
|
|
|
96
93
|
watch([() => props2.label, () => props2.value], computeLabel);
|
|
97
94
|
bindSelect(optionProvider);
|
|
98
95
|
function handleClick() {
|
|
96
|
+
if (props2.disabled) {
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
handleSelect();
|
|
100
|
+
}
|
|
101
|
+
function handleSelect() {
|
|
99
102
|
if (multiple.value) {
|
|
100
103
|
optionSelected.value = !optionSelected.value;
|
|
101
104
|
}
|
|
102
105
|
onSelect(optionProvider);
|
|
103
106
|
}
|
|
104
|
-
function handleSelect() {
|
|
105
|
-
return onSelect(optionProvider);
|
|
106
|
-
}
|
|
107
107
|
function sync(checked) {
|
|
108
108
|
optionSelected.value = checked;
|
|
109
109
|
}
|
|
110
110
|
return {
|
|
111
|
-
n,
|
|
112
|
-
classes,
|
|
113
111
|
optionSelected,
|
|
114
112
|
multiple,
|
|
115
113
|
focusColor,
|
|
116
114
|
hovering,
|
|
115
|
+
n,
|
|
116
|
+
classes,
|
|
117
117
|
handleHovering,
|
|
118
118
|
handleClick,
|
|
119
119
|
handleSelect
|
package/es/option/option.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --
|
|
1
|
+
:root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --option-text-color: #555; --option-disabled-color: var(--color-text-disabled);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--option-text-color);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { display: flex; align-items: center; font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}.var-option--disabled { color: var(--option-disabled-color); cursor: not-allowed;}
|
package/es/option/props.mjs
CHANGED
package/es/popup/popup.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom {
|
|
1
|
+
:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { height: 100%; position: absolute; right: 0; top: 0;}.var-popup--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}.var-popup--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}
|
|
@@ -1,8 +1,8 @@
|
|
|
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 '../../button/button.css'
|
|
5
6
|
import '../../icon/icon.css'
|
|
6
7
|
import '../snackbar.css'
|
|
7
8
|
import '../coreSfc.css'
|
|
8
|
-
import '../SnackbarSfc.css'
|