@varlet/ui 2.18.0 → 2.18.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/chip/Chip.mjs +1 -1
- package/es/chip/props.mjs +2 -0
- package/es/counter/Counter.mjs +1 -1
- package/es/date-picker/DatePicker.mjs +34 -13
- package/es/date-picker/date-picker.css +1 -1
- package/es/date-picker/props.mjs +3 -0
- package/es/date-picker/src/year-picker-panel.mjs +5 -2
- package/es/floating-panel/FloatingPanel.mjs +4 -1
- package/es/index.bundle.mjs +1 -1
- package/es/index.mjs +1 -1
- package/es/locale/en-US.mjs +4 -1
- package/es/locale/zh-CN.mjs +4 -1
- package/es/rate/Rate.mjs +9 -7
- package/es/rate/props.mjs +1 -1
- package/es/select/Select.mjs +1 -1
- package/es/style.css +1 -1
- package/es/time-picker/TimePicker.mjs +73 -51
- package/es/time-picker/props.mjs +3 -0
- package/es/time-picker/timePicker.css +1 -1
- package/es/utils/test.mjs +7 -0
- package/es/varlet.esm.js +560 -500
- package/highlight/web-types.en-US.json +28 -10
- package/highlight/web-types.zh-CN.json +29 -11
- package/lib/style.css +1 -1
- package/lib/varlet.cjs.js +143 -79
- package/package.json +7 -7
- package/types/backTop.d.ts +1 -1
- package/types/chip.d.ts +2 -0
- package/types/datePicker.d.ts +4 -1
- package/types/rate.d.ts +3 -3
- package/types/switch.d.ts +1 -1
- package/types/timePicker.d.ts +3 -0
- package/umd/varlet.js +6 -6
|
@@ -6,6 +6,7 @@ import { toNumber, getRect, preventDefault } from "@varlet/shared";
|
|
|
6
6
|
import { createNamespace, call, formatElevation } from "../utils/components.mjs";
|
|
7
7
|
import { padStart } from "../utils/shared.mjs";
|
|
8
8
|
import { getNumberTime, getIsDisableMinute, getIsDisableSecond } from "./utils.mjs";
|
|
9
|
+
import { pack } from "../locale/index.mjs";
|
|
9
10
|
const { name, n, classes } = createNamespace("time-picker");
|
|
10
11
|
import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
|
|
11
12
|
const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
|
|
@@ -18,6 +19,7 @@ const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ _createEle
|
|
|
18
19
|
));
|
|
19
20
|
const _hoisted_2 = { key: 0 };
|
|
20
21
|
function __render__(_ctx, _cache) {
|
|
22
|
+
var _a;
|
|
21
23
|
const _component_clock = _resolveComponent("clock");
|
|
22
24
|
return _openBlock(), _createElementBlock(
|
|
23
25
|
"div",
|
|
@@ -30,83 +32,102 @@ function __render__(_ctx, _cache) {
|
|
|
30
32
|
"div",
|
|
31
33
|
{
|
|
32
34
|
class: _normalizeClass(_ctx.n("title")),
|
|
33
|
-
style: _normalizeStyle({ background: _ctx.headerColor || _ctx.color })
|
|
35
|
+
style: _normalizeStyle({ background: _ctx.titleColor || _ctx.headerColor || _ctx.color })
|
|
34
36
|
},
|
|
35
37
|
[
|
|
36
38
|
_createElementVNode(
|
|
37
39
|
"div",
|
|
38
40
|
{
|
|
39
|
-
class: _normalizeClass(_ctx.n("title-
|
|
41
|
+
class: _normalizeClass(_ctx.n("title-hint"))
|
|
40
42
|
},
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
{
|
|
45
|
-
class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "hour", _ctx.n("title-btn--active")])),
|
|
46
|
-
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.checkPanel("hour"))
|
|
47
|
-
},
|
|
48
|
-
_toDisplayString(_ctx.time.hour),
|
|
49
|
-
3
|
|
50
|
-
/* TEXT, CLASS */
|
|
51
|
-
),
|
|
52
|
-
_hoisted_1,
|
|
53
|
-
_createElementVNode(
|
|
54
|
-
"div",
|
|
55
|
-
{
|
|
56
|
-
class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "minute", _ctx.n("title-btn--active")])),
|
|
57
|
-
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.checkPanel("minute"))
|
|
58
|
-
},
|
|
59
|
-
_toDisplayString(_ctx.time.minute),
|
|
60
|
-
3
|
|
61
|
-
/* TEXT, CLASS */
|
|
62
|
-
),
|
|
63
|
-
_ctx.useSeconds ? (_openBlock(), _createElementBlock("span", _hoisted_2, ":")) : _createCommentVNode("v-if", true),
|
|
64
|
-
_ctx.useSeconds ? (_openBlock(), _createElementBlock(
|
|
65
|
-
"div",
|
|
66
|
-
{
|
|
67
|
-
key: 1,
|
|
68
|
-
class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "second", _ctx.n("title-btn--active")])),
|
|
69
|
-
onClick: _cache[2] || (_cache[2] = ($event) => _ctx.checkPanel("second"))
|
|
70
|
-
},
|
|
71
|
-
_toDisplayString(_ctx.time.second),
|
|
72
|
-
3
|
|
73
|
-
/* TEXT, CLASS */
|
|
74
|
-
)) : _createCommentVNode("v-if", true)
|
|
75
|
-
],
|
|
76
|
-
2
|
|
77
|
-
/* CLASS */
|
|
43
|
+
_toDisplayString((_a = _ctx.hint) != null ? _a : _ctx.pack.timePickerHint),
|
|
44
|
+
3
|
|
45
|
+
/* TEXT, CLASS */
|
|
78
46
|
),
|
|
79
|
-
|
|
47
|
+
_createElementVNode(
|
|
80
48
|
"div",
|
|
81
49
|
{
|
|
82
|
-
|
|
83
|
-
class: _normalizeClass(_ctx.n("title-ampm"))
|
|
50
|
+
class: _normalizeClass(_ctx.n("title-time-container"))
|
|
84
51
|
},
|
|
85
52
|
[
|
|
86
53
|
_createElementVNode(
|
|
87
54
|
"div",
|
|
88
55
|
{
|
|
89
|
-
class: _normalizeClass(_ctx.
|
|
90
|
-
onClick: _cache[3] || (_cache[3] = ($event) => _ctx.checkAmpm("am"))
|
|
56
|
+
class: _normalizeClass(_ctx.n("title-time"))
|
|
91
57
|
},
|
|
92
|
-
|
|
58
|
+
[
|
|
59
|
+
_createElementVNode(
|
|
60
|
+
"div",
|
|
61
|
+
{
|
|
62
|
+
class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "hour", _ctx.n("title-btn--active")])),
|
|
63
|
+
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.checkPanel("hour"))
|
|
64
|
+
},
|
|
65
|
+
_toDisplayString(_ctx.time.hour),
|
|
66
|
+
3
|
|
67
|
+
/* TEXT, CLASS */
|
|
68
|
+
),
|
|
69
|
+
_hoisted_1,
|
|
70
|
+
_createElementVNode(
|
|
71
|
+
"div",
|
|
72
|
+
{
|
|
73
|
+
class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "minute", _ctx.n("title-btn--active")])),
|
|
74
|
+
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.checkPanel("minute"))
|
|
75
|
+
},
|
|
76
|
+
_toDisplayString(_ctx.time.minute),
|
|
77
|
+
3
|
|
78
|
+
/* TEXT, CLASS */
|
|
79
|
+
),
|
|
80
|
+
_ctx.useSeconds ? (_openBlock(), _createElementBlock("span", _hoisted_2, ":")) : _createCommentVNode("v-if", true),
|
|
81
|
+
_ctx.useSeconds ? (_openBlock(), _createElementBlock(
|
|
82
|
+
"div",
|
|
83
|
+
{
|
|
84
|
+
key: 1,
|
|
85
|
+
class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "second", _ctx.n("title-btn--active")])),
|
|
86
|
+
onClick: _cache[2] || (_cache[2] = ($event) => _ctx.checkPanel("second"))
|
|
87
|
+
},
|
|
88
|
+
_toDisplayString(_ctx.time.second),
|
|
89
|
+
3
|
|
90
|
+
/* TEXT, CLASS */
|
|
91
|
+
)) : _createCommentVNode("v-if", true)
|
|
92
|
+
],
|
|
93
93
|
2
|
|
94
94
|
/* CLASS */
|
|
95
95
|
),
|
|
96
|
-
|
|
96
|
+
_ctx.format === "ampm" ? (_openBlock(), _createElementBlock(
|
|
97
97
|
"div",
|
|
98
98
|
{
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
key: 0,
|
|
100
|
+
class: _normalizeClass(_ctx.n("title-ampm"))
|
|
101
101
|
},
|
|
102
|
-
|
|
102
|
+
[
|
|
103
|
+
_createElementVNode(
|
|
104
|
+
"div",
|
|
105
|
+
{
|
|
106
|
+
class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.ampm === "am", _ctx.n("title-btn--active")])),
|
|
107
|
+
onClick: _cache[3] || (_cache[3] = ($event) => _ctx.checkAmpm("am"))
|
|
108
|
+
},
|
|
109
|
+
" AM ",
|
|
110
|
+
2
|
|
111
|
+
/* CLASS */
|
|
112
|
+
),
|
|
113
|
+
_createElementVNode(
|
|
114
|
+
"div",
|
|
115
|
+
{
|
|
116
|
+
class: _normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.ampm === "pm", _ctx.n("title-btn--active")])),
|
|
117
|
+
onClick: _cache[4] || (_cache[4] = ($event) => _ctx.checkAmpm("pm"))
|
|
118
|
+
},
|
|
119
|
+
" PM ",
|
|
120
|
+
2
|
|
121
|
+
/* CLASS */
|
|
122
|
+
)
|
|
123
|
+
],
|
|
103
124
|
2
|
|
104
125
|
/* CLASS */
|
|
105
|
-
)
|
|
126
|
+
)) : _createCommentVNode("v-if", true)
|
|
106
127
|
],
|
|
107
128
|
2
|
|
108
129
|
/* CLASS */
|
|
109
|
-
)
|
|
130
|
+
)
|
|
110
131
|
],
|
|
111
132
|
6
|
|
112
133
|
/* CLASS, STYLE */
|
|
@@ -399,6 +420,7 @@ const __sfc__ = defineComponent({
|
|
|
399
420
|
isPreventNextUpdate,
|
|
400
421
|
n,
|
|
401
422
|
classes,
|
|
423
|
+
pack,
|
|
402
424
|
moveHand,
|
|
403
425
|
checkPanel,
|
|
404
426
|
checkAmpm,
|
package/es/time-picker/props.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-padding: 16px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width:
|
|
1
|
+
:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-height: 105px; --time-picker-title-padding: 16px; --time-picker-title-margin-bottom: 8px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-hint-font-size: 14px; --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 256px; --time-picker-clock-container-height: 256px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-clock-item-text-color: #555; --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); height: var(--time-picker-height); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { min-height: var(--time-picker-title-height); padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: block;}.var-time-picker__title-hint { font-size: var(--time-picker-title-hint-font-size); margin-bottom: var(--time-picker-title-margin-bottom);}.var-time-picker__title-time-container { display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker__title-btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker__title-btn--active { opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker__body { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--time-picker-body-background);}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%); color: var(--time-picker-clock-item-text-color);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}
|
package/es/utils/test.mjs
CHANGED
|
@@ -220,6 +220,12 @@ function mockScrollTo() {
|
|
|
220
220
|
}
|
|
221
221
|
});
|
|
222
222
|
}
|
|
223
|
+
function mockScrollIntoView() {
|
|
224
|
+
Object.defineProperty(Element.prototype, "scrollIntoView", {
|
|
225
|
+
value() {
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
}
|
|
223
229
|
function mockUserAgent(userAgent) {
|
|
224
230
|
const originUserAgent = navigator.userAgent;
|
|
225
231
|
Object.defineProperty(window.navigator, "userAgent", {
|
|
@@ -265,6 +271,7 @@ export {
|
|
|
265
271
|
mockFileReader,
|
|
266
272
|
mockImageNaturalSize,
|
|
267
273
|
mockOffset,
|
|
274
|
+
mockScrollIntoView,
|
|
268
275
|
mockScrollTo,
|
|
269
276
|
mockStubs,
|
|
270
277
|
mockTranslate,
|