@varlet/ui 2.18.0 → 2.18.2-alpha.1698728560863
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 +24 -0
- package/README.zh-CN.md +24 -0
- 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/loading/loading.css +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/snackbar/style/index.mjs +1 -1
- package/es/style.css +1 -1
- package/es/swipe/swipe.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 +572 -512
- package/highlight/web-types.en-US.json +28 -10
- package/highlight/web-types.zh-CN.json +31 -13
- package/lib/style.css +1 -1
- package/lib/varlet.cjs.js +144 -80
- 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
package/README.md
CHANGED
|
@@ -84,6 +84,30 @@ import '@varlet/ui/es/style'
|
|
|
84
84
|
createApp(App).use(Varlet).mount('#app')
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
+
### Official Ecosystem
|
|
88
|
+
|
|
89
|
+
The following projects are maintained by the official team for a long time.
|
|
90
|
+
|
|
91
|
+
| Name | Description |
|
|
92
|
+
|------------------------------------------------------------------------------------------------------|--------------------------------------|
|
|
93
|
+
| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |
|
|
94
|
+
| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |
|
|
95
|
+
| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |
|
|
96
|
+
| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |
|
|
97
|
+
| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode Theme` |
|
|
98
|
+
| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet component library app template` |
|
|
99
|
+
| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Case collection of Varlet component library and various ecosystem integration` |
|
|
100
|
+
|
|
101
|
+
### Community Ecosystem
|
|
102
|
+
|
|
103
|
+
The following projects are maintained by community personnel, welcome to add.
|
|
104
|
+
|
|
105
|
+
| Name | Description |
|
|
106
|
+
|----------------------------------------------------------------|-----------------------------------------|
|
|
107
|
+
| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |
|
|
108
|
+
| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |
|
|
109
|
+
| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |
|
|
110
|
+
|
|
87
111
|
### Playground
|
|
88
112
|
|
|
89
113
|
See [Varlet UI Playground](https://varlet.gitee.io/varlet-ui-playground).
|
package/README.zh-CN.md
CHANGED
|
@@ -84,6 +84,30 @@ import '@varlet/ui/es/style'
|
|
|
84
84
|
createApp(App).use(Varlet).mount('#app')
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
+
### 官方生态
|
|
88
|
+
|
|
89
|
+
以下项目由官方团队长期维护。
|
|
90
|
+
|
|
91
|
+
| 名称 | 描述 |
|
|
92
|
+
|------------------------------------------------------------------------------------------------------|--------------------------|
|
|
93
|
+
| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 组件库快速成型工具` |
|
|
94
|
+
| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `桌面端适配器，让移动端组件库可以在桌面端运行` |
|
|
95
|
+
| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet 组件库在线编辑工具` |
|
|
96
|
+
| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet 组件库 VSCode 插件` |
|
|
97
|
+
| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode 主题` |
|
|
98
|
+
| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet 组件库移动端模板` |
|
|
99
|
+
| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Varlet 组件库与各种生态集成的案例集合` |
|
|
100
|
+
|
|
101
|
+
### 社区生态
|
|
102
|
+
|
|
103
|
+
以下项目由社区人员维护，欢迎补充。
|
|
104
|
+
|
|
105
|
+
| 名称 | 描述 |
|
|
106
|
+
|----------------------------------------------------------------|-------------------------------------------|
|
|
107
|
+
| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `基于 Vue 的移动端模板脚手架，提供了 Varlet 组件库的移动端预设` |
|
|
108
|
+
| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `基于 Vue3 的桌面端模板脚手架，提供了 Varlet 组件库的桌面端预设` |
|
|
109
|
+
| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `为 Varlet 开发人员提供更好的智能感知的 VSCode 扩展` |
|
|
110
|
+
|
|
87
111
|
### 演练场
|
|
88
112
|
|
|
89
113
|
在 [Varlet UI Playground](https://varlet.gitee.io/varlet-ui-playground) 对组件进行在线编辑。
|
package/es/chip/Chip.mjs
CHANGED
package/es/chip/props.mjs
CHANGED
package/es/counter/Counter.mjs
CHANGED
|
@@ -34,7 +34,7 @@ function __render__(_ctx, _cache) {
|
|
|
34
34
|
[_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")],
|
|
35
35
|
[_ctx.errorMessage, _ctx.n("--error")]
|
|
36
36
|
),
|
|
37
|
-
style: { background: _ctx.color
|
|
37
|
+
style: { background: _ctx.color }
|
|
38
38
|
}, _ctx.$attrs),
|
|
39
39
|
[
|
|
40
40
|
_createVNode(_component_var_button, {
|
|
@@ -33,8 +33,9 @@ import { createNamespace, call, formatElevation } from "../utils/components.mjs"
|
|
|
33
33
|
import { padStart } from "../utils/shared.mjs";
|
|
34
34
|
import { pack } from "../locale/index.mjs";
|
|
35
35
|
const { name, n, classes } = createNamespace("date-picker");
|
|
36
|
-
import {
|
|
36
|
+
import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue";
|
|
37
37
|
function __render__(_ctx, _cache) {
|
|
38
|
+
var _a;
|
|
38
39
|
const _component_year_picker_panel = _resolveComponent("year-picker-panel");
|
|
39
40
|
const _component_month_picker_panel = _resolveComponent("month-picker-panel");
|
|
40
41
|
const _component_day_picker_panel = _resolveComponent("day-picker-panel");
|
|
@@ -48,23 +49,42 @@ function __render__(_ctx, _cache) {
|
|
|
48
49
|
"div",
|
|
49
50
|
{
|
|
50
51
|
class: _normalizeClass(_ctx.n("title")),
|
|
51
|
-
style: _normalizeStyle({ background: _ctx.headerColor || _ctx.color })
|
|
52
|
+
style: _normalizeStyle({ background: _ctx.titleColor || _ctx.headerColor || _ctx.color })
|
|
52
53
|
},
|
|
53
54
|
[
|
|
54
55
|
_createElementVNode(
|
|
55
56
|
"div",
|
|
56
57
|
{
|
|
57
|
-
class: _normalizeClass(_ctx.
|
|
58
|
-
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
|
|
58
|
+
class: _normalizeClass(_ctx.n("title-select"))
|
|
59
59
|
},
|
|
60
60
|
[
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
)
|
|
67
|
-
|
|
61
|
+
_createElementVNode(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
class: _normalizeClass(_ctx.n("title-hint"))
|
|
65
|
+
},
|
|
66
|
+
_toDisplayString((_a = _ctx.hint) != null ? _a : _ctx.pack.datePickerHint),
|
|
67
|
+
3
|
|
68
|
+
/* TEXT, CLASS */
|
|
69
|
+
),
|
|
70
|
+
_createElementVNode(
|
|
71
|
+
"div",
|
|
72
|
+
{
|
|
73
|
+
class: _normalizeClass(_ctx.classes(_ctx.n("title-year"), [_ctx.isYearPanel, _ctx.n("title-year--active")])),
|
|
74
|
+
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
|
|
75
|
+
},
|
|
76
|
+
[
|
|
77
|
+
_renderSlot(_ctx.$slots, "year", { year: _ctx.chooseYear }, () => [
|
|
78
|
+
_createTextVNode(
|
|
79
|
+
_toDisplayString(_ctx.chooseYear),
|
|
80
|
+
1
|
|
81
|
+
/* TEXT */
|
|
82
|
+
)
|
|
83
|
+
])
|
|
84
|
+
],
|
|
85
|
+
2
|
|
86
|
+
/* CLASS */
|
|
87
|
+
)
|
|
68
88
|
],
|
|
69
89
|
2
|
|
70
90
|
/* CLASS */
|
|
@@ -80,10 +100,10 @@ function __render__(_ctx, _cache) {
|
|
|
80
100
|
name: _ctx.multiple ? "" : `${_ctx.n()}${_ctx.reverse ? "-reverse" : ""}-translatey`
|
|
81
101
|
}, {
|
|
82
102
|
default: _withCtx(() => {
|
|
83
|
-
var
|
|
103
|
+
var _a2, _b, _c;
|
|
84
104
|
return [
|
|
85
105
|
_ctx.type === "month" ? (_openBlock(), _createElementBlock("div", {
|
|
86
|
-
key: `${_ctx.chooseYear}${(
|
|
106
|
+
key: `${_ctx.chooseYear}${(_a2 = _ctx.chooseMonth) == null ? void 0 : _a2.index}`
|
|
87
107
|
}, [
|
|
88
108
|
_ctx.range ? _renderSlot(_ctx.$slots, "range", {
|
|
89
109
|
key: 0,
|
|
@@ -552,6 +572,7 @@ const __sfc__ = defineComponent({
|
|
|
552
572
|
componentProps,
|
|
553
573
|
slotProps,
|
|
554
574
|
formatRange,
|
|
575
|
+
pack,
|
|
555
576
|
n,
|
|
556
577
|
classes,
|
|
557
578
|
clickEl,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --picker-header-padding: 4px 16px; --picker-header-color: #555; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --year-picker-item-color: #555; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
1
|
+
:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --picker-header-padding: 4px 16px; --picker-header-color: #555; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --year-picker-item-color: #555; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom);}.var-date-picker__title-hint { font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--picker-header-color);}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--year-picker-item-color);}.var-date-picker .var-year-picker__item--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
|
package/es/date-picker/props.mjs
CHANGED
|
@@ -66,9 +66,12 @@ const props = {
|
|
|
66
66
|
type: String,
|
|
67
67
|
default: "date"
|
|
68
68
|
},
|
|
69
|
+
hint: String,
|
|
69
70
|
allowedDates: Function,
|
|
70
71
|
color: String,
|
|
72
|
+
/** @deprecated Use titleColor to instead. */
|
|
71
73
|
headerColor: String,
|
|
74
|
+
titleColor: String,
|
|
72
75
|
elevation: {
|
|
73
76
|
type: [Boolean, Number, String],
|
|
74
77
|
default: false
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import dayjs from "dayjs/esm";
|
|
2
|
-
import { defineComponent, computed } from "vue";
|
|
2
|
+
import { defineComponent, computed, ref } from "vue";
|
|
3
3
|
import { toNumber } from "@varlet/shared";
|
|
4
4
|
import { createNamespace } from "../../utils/components.mjs";
|
|
5
5
|
import { onSmartMounted } from "@varlet/use";
|
|
@@ -11,6 +11,7 @@ function __render__(_ctx, _cache) {
|
|
|
11
11
|
return _openBlock(), _createElementBlock(
|
|
12
12
|
"ul",
|
|
13
13
|
{
|
|
14
|
+
ref: "panel",
|
|
14
15
|
class: _normalizeClass(_ctx.n())
|
|
15
16
|
},
|
|
16
17
|
[
|
|
@@ -46,6 +47,7 @@ const __sfc__ = defineComponent({
|
|
|
46
47
|
},
|
|
47
48
|
emits: ["choose-year"],
|
|
48
49
|
setup(props, { emit }) {
|
|
50
|
+
const panel = ref();
|
|
49
51
|
const yearList = computed(() => {
|
|
50
52
|
const list = [];
|
|
51
53
|
const {
|
|
@@ -80,7 +82,7 @@ const __sfc__ = defineComponent({
|
|
|
80
82
|
emit("choose-year", year);
|
|
81
83
|
};
|
|
82
84
|
onSmartMounted(() => {
|
|
83
|
-
const activeEl =
|
|
85
|
+
const activeEl = panel.value.querySelector(`.${n("item--active")}`);
|
|
84
86
|
activeEl == null ? void 0 : activeEl.scrollIntoView({
|
|
85
87
|
block: "center"
|
|
86
88
|
});
|
|
@@ -88,6 +90,7 @@ const __sfc__ = defineComponent({
|
|
|
88
90
|
return {
|
|
89
91
|
n,
|
|
90
92
|
classes,
|
|
93
|
+
panel,
|
|
91
94
|
yearList,
|
|
92
95
|
chooseYear,
|
|
93
96
|
toNumber
|
|
@@ -109,7 +109,10 @@ const __sfc__ = defineComponent({
|
|
|
109
109
|
const target = event.target;
|
|
110
110
|
const eventFromContent = contentRef.value === target || ((_a = contentRef.value) == null ? void 0 : _a.contains(target));
|
|
111
111
|
if (eventFromContent && !props2.contentDraggable) {
|
|
112
|
-
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
if (eventFromContent && props2.contentDraggable && visibleHeight.value >= maxAnchor.value && !isReachTop(contentRef.value)) {
|
|
115
|
+
if (isReachBottom(contentRef.value)) {
|
|
113
116
|
preventDefault(event);
|
|
114
117
|
}
|
|
115
118
|
return;
|
package/es/index.bundle.mjs
CHANGED
|
@@ -259,7 +259,7 @@ import './tooltip/style/index.mjs'
|
|
|
259
259
|
import './uploader/style/index.mjs'
|
|
260
260
|
import './watermark/style/index.mjs'
|
|
261
261
|
|
|
262
|
-
const version = '2.18.
|
|
262
|
+
const version = '2.18.2-alpha.1698728560863'
|
|
263
263
|
|
|
264
264
|
function install(app) {
|
|
265
265
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/index.mjs
CHANGED
|
@@ -172,7 +172,7 @@ export * from './tooltip/index.mjs'
|
|
|
172
172
|
export * from './uploader/index.mjs'
|
|
173
173
|
export * from './watermark/index.mjs'
|
|
174
174
|
|
|
175
|
-
const version = '2.18.
|
|
175
|
+
const version = '2.18.2-alpha.1698728560863'
|
|
176
176
|
|
|
177
177
|
function install(app) {
|
|
178
178
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/loading/loading.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { --loading-normal-width: 50px; --loading-normal-height: calc(var(--font-size-md) + 2px); --loading-large-width: 64px; --loading-large-height: calc(var(--font-size-lg) + 2px); --loading-small-width: 36px; --loading-small-height: calc(var(--font-size-sm) + 2px); --loading-mini-width: 22px; --loading-mini-height: calc(var(--font-size-xs) + 2px); position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 0; transform: translateX(-50%); max-height: 50vh; z-index: 1;}.var-loading__description { color: var(--color
|
|
1
|
+
:root { --loading-color: var(--color-primary); --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0; --loading-desc-color: var(--color-primary);}.var-loading { --loading-normal-width: 50px; --loading-normal-height: calc(var(--font-size-md) + 2px); --loading-large-width: 64px; --loading-large-height: calc(var(--font-size-lg) + 2px); --loading-small-width: 36px; --loading-small-height: calc(var(--font-size-sm) + 2px); --loading-mini-width: 22px; --loading-mini-height: calc(var(--font-size-xs) + 2px); position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 0; transform: translateX(-50%); max-height: 50vh; z-index: 1;}.var-loading__description { color: var(--loading-desc-color); margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: var(--font-size-lg);}.var-loading__description--normal { font-size: var(--font-size-md);}.var-loading__description--small { font-size: var(--font-size-sm);}.var-loading__description--mini { font-size: var(--font-size-xs);}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; color: var(--loading-color); animation: circle 1.8s linear infinite;}.var-loading__circle-block--large { width: 36px; height: 36px;}.var-loading__circle-block--normal { width: 30px; height: 30px;}.var-loading__circle-block--small { width: 24px; height: 24px;}.var-loading__circle-block--mini { width: 18px; height: 18px;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { --loading-wave-size-item-width: 5px; --loading-wave-size-item-margin: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.var-loading__wave--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__wave--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__wave--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__wave--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave; background-color: var(--loading-color);}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: var(--loading-wave-size-item-width); margin-left: var(--loading-wave-size-item-margin);}.var-loading__wave-item--normal { width: calc(var(--loading-wave-size-item-width) - 1px); margin-left: calc(var(--loading-wave-size-item-margin) - 1px);}.var-loading__wave-item--small { width: calc(var(--loading-wave-size-item-width) - 2px); margin-left: calc(var(--loading-wave-size-item-margin) - 2px);}.var-loading__wave-item--mini { width: calc(var(--loading-wave-size-item-width) - 3px); margin-left: calc(var(--loading-wave-size-item-margin) - 3px);}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { --loading-cube-size-item-width: 10px; --loading-cube-size-item-height: 10px; --loading-cube-size-item-margin: 5px; display: flex; align-items: center; flex-shrink: 0;}.var-loading__cube--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__cube--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__cube--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__cube--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube; background-color: var(--loading-color);}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: var(--loading-cube-size-item-height); width: var(--loading-cube-size-item-width); margin-left: var(--loading-cube-size-item-margin);}.var-loading__cube-item--normal { height: calc(var(--loading-cube-size-item-height) - 2px); width: calc(var(--loading-cube-size-item-width) - 2px); margin-left: calc(var(--loading-cube-size-item-margin) - 1px);}.var-loading__cube-item--small { height: calc(var(--loading-cube-size-item-height) - 4px); width: calc(var(--loading-cube-size-item-width) - 4px); margin-left: calc(var(--loading-cube-size-item-margin) - 2px);}.var-loading__cube-item--mini { height: calc(var(--loading-cube-size-item-height) - 6px); width: calc(var(--loading-cube-size-item-width) - 6px); margin-left: calc(var(--loading-cube-size-item-margin) - 3px);}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { --loading-rect-size-item-width: 8px; --loading-rect-size-item-height: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; flex-shrink: 0;}.var-loading__rect--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__rect--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__rect--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__rect--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__rect-item { animation: 2s ease-in-out infinite rect; background-color: var(--loading-color);}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: var(--loading-rect-size-item-height); width: var(--loading-rect-size-item-width);}.var-loading__rect-item--normal { height: calc(var(--loading-rect-size-item-height) * 0.9); width: calc(var(--loading-rect-size-item-width) * 0.8);}.var-loading__rect-item--small { height: calc(var(--loading-rect-size-item-height) * 0.8); width: calc(var(--loading-rect-size-item-width) * 0.6);}.var-loading__rect-item--mini { height: calc(var(--loading-rect-size-item-height) * 0.7); width: calc(var(--loading-rect-size-item-width) * 0.4);}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { --loading-disappear-size-item-width: 15px; --loading-disappear-size-item-height: 15px; display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap; flex-shrink: 0;}.var-loading__disappear--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__disappear--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__disappear--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__disappear--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear; background-color: var(--loading-color);}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: var(--loading-disappear-size-item-height); width: var(--loading-disappear-size-item-width);}.var-loading__disappear-item--normal { height: calc(var(--loading-disappear-size-item-height) * 0.8); width: calc(var(--loading-disappear-size-item-width) * 0.8);}.var-loading__disappear-item--small { height: calc(var(--loading-disappear-size-item-height) * 0.6); width: calc(var(--loading-disappear-size-item-width) * 0.6);}.var-loading__disappear-item--mini { height: calc(var(--loading-disappear-size-item-height) * 0.4); width: calc(var(--loading-disappear-size-item-width) * 0.4);}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}
|
package/es/locale/en-US.mjs
CHANGED
|
@@ -95,10 +95,13 @@ var stdin_default = {
|
|
|
95
95
|
}
|
|
96
96
|
},
|
|
97
97
|
datePickerSelected: " selected",
|
|
98
|
+
datePickerHint: "SELECT DATE",
|
|
98
99
|
// pagination
|
|
99
100
|
paginationItem: "",
|
|
100
101
|
paginationPage: "page",
|
|
101
|
-
paginationJump: "Go to"
|
|
102
|
+
paginationJump: "Go to",
|
|
103
|
+
// time-picker
|
|
104
|
+
timePickerHint: "SELECT TIME"
|
|
102
105
|
};
|
|
103
106
|
export {
|
|
104
107
|
stdin_default as default
|
package/es/locale/zh-CN.mjs
CHANGED
|
@@ -95,10 +95,13 @@ var stdin_default = {
|
|
|
95
95
|
}
|
|
96
96
|
},
|
|
97
97
|
datePickerSelected: "\u4E2A\u88AB\u9009\u62E9",
|
|
98
|
+
datePickerHint: "\u9009\u62E9\u65E5\u671F",
|
|
98
99
|
// pagination
|
|
99
100
|
paginationItem: "\u6761",
|
|
100
101
|
paginationPage: "\u9875",
|
|
101
|
-
paginationJump: "\u524D\u5F80"
|
|
102
|
+
paginationJump: "\u524D\u5F80",
|
|
103
|
+
// time-picker
|
|
104
|
+
timePickerHint: "\u9009\u62E9\u65F6\u95F4"
|
|
102
105
|
};
|
|
103
106
|
export {
|
|
104
107
|
stdin_default as default
|
package/es/rate/Rate.mjs
CHANGED
|
@@ -84,7 +84,7 @@ const __sfc__ = defineComponent({
|
|
|
84
84
|
const { form, bindForm } = useForm();
|
|
85
85
|
const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
|
|
86
86
|
const { hovering } = useHoverOverlay();
|
|
87
|
-
let lastScore =
|
|
87
|
+
let lastScore = toNumber(props2.modelValue);
|
|
88
88
|
const rateProvider = {
|
|
89
89
|
reset,
|
|
90
90
|
validate,
|
|
@@ -126,10 +126,10 @@ const __sfc__ = defineComponent({
|
|
|
126
126
|
if (disabled || (form == null ? void 0 : form.disabled.value)) {
|
|
127
127
|
iconColor = disabledColor;
|
|
128
128
|
}
|
|
129
|
-
if (index <=
|
|
129
|
+
if (index <= modelValue) {
|
|
130
130
|
return { color: iconColor, name: icon, namespace };
|
|
131
131
|
}
|
|
132
|
-
if (half && index <=
|
|
132
|
+
if (half && index <= modelValue + 0.5) {
|
|
133
133
|
return { color: iconColor, name: halfIcon, namespace: halfIconNamespace };
|
|
134
134
|
}
|
|
135
135
|
return {
|
|
@@ -147,22 +147,24 @@ const __sfc__ = defineComponent({
|
|
|
147
147
|
if (lastScore === score && clearable) {
|
|
148
148
|
score = 0;
|
|
149
149
|
}
|
|
150
|
+
if (lastScore !== score) {
|
|
151
|
+
call(props2["onUpdate:modelValue"], score);
|
|
152
|
+
call(props2.onChange, score);
|
|
153
|
+
}
|
|
150
154
|
lastScore = score;
|
|
151
|
-
call(props2["onUpdate:modelValue"], score);
|
|
152
155
|
}
|
|
153
156
|
function validate() {
|
|
154
|
-
return v(props2.rules,
|
|
157
|
+
return v(props2.rules, props2.modelValue);
|
|
155
158
|
}
|
|
156
159
|
function validateWithTrigger() {
|
|
157
160
|
return nextTick(() => vt(["onChange"], "onChange", props2.rules, props2.modelValue));
|
|
158
161
|
}
|
|
159
162
|
function handleClick(score, event) {
|
|
160
|
-
const { readonly, disabled
|
|
163
|
+
const { readonly, disabled } = props2;
|
|
161
164
|
if (readonly || disabled || (form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value)) {
|
|
162
165
|
return;
|
|
163
166
|
}
|
|
164
167
|
changeValue(score, event);
|
|
165
|
-
call(onChange, score);
|
|
166
168
|
validateWithTrigger();
|
|
167
169
|
}
|
|
168
170
|
function createHoverHandler(value) {
|
package/es/rate/props.mjs
CHANGED
package/es/select/Select.mjs
CHANGED
|
@@ -119,7 +119,7 @@ function __render__(_ctx, _cache) {
|
|
|
119
119
|
return _openBlock(), _createBlock(_component_var_chip, {
|
|
120
120
|
class: _normalizeClass(_ctx.n("chip")),
|
|
121
121
|
"var-select-cover": "",
|
|
122
|
-
|
|
122
|
+
closeable: "",
|
|
123
123
|
size: "small",
|
|
124
124
|
type: _ctx.errorMessage ? "danger" : void 0,
|
|
125
125
|
key: l,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import '../../styles/common.css'
|
|
2
|
-
import '../SnackbarSfc.css'
|
|
3
2
|
import '../../styles/elevation.css'
|
|
4
3
|
import '../../loading/loading.css'
|
|
5
4
|
import '../../button/button.css'
|
|
6
5
|
import '../../icon/icon.css'
|
|
7
6
|
import '../snackbar.css'
|
|
8
7
|
import '../coreSfc.css'
|
|
8
|
+
import '../SnackbarSfc.css'
|