@varlet/ui 1.27.17 → 1.27.18
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/collapse-item/CollapseItem.js +15 -1
- package/es/date-picker/date-picker.css +1 -1
- package/es/date-picker/date-picker.less +7 -1
- package/es/date-picker/style/index.js +1 -0
- package/es/date-picker/style/less.js +1 -0
- package/es/pull-refresh/PullRefresh.js +2 -2
- package/es/pull-refresh/props.js +1 -1
- package/es/style.css +1 -1
- package/es/themes/dark/timePicker.js +1 -1
- package/es/time-picker/timePicker.css +1 -1
- package/es/time-picker/timePicker.less +1 -1
- package/es/varlet.esm.js +16 -2
- package/highlight/web-types.json +1 -1
- package/lib/collapse-item/CollapseItem.js +14 -0
- package/lib/date-picker/date-picker.css +1 -1
- package/lib/date-picker/date-picker.less +7 -1
- package/lib/date-picker/style/index.js +1 -0
- package/lib/date-picker/style/less.js +1 -0
- package/lib/pull-refresh/PullRefresh.js +2 -2
- package/lib/pull-refresh/props.js +1 -1
- package/lib/style.css +1 -1
- package/lib/themes/dark/timePicker.js +1 -1
- package/lib/time-picker/timePicker.css +1 -1
- package/lib/time-picker/timePicker.less +1 -1
- package/package.json +5 -5
- package/types/actionSheet.d.ts +2 -1
- package/types/appBar.d.ts +2 -1
- package/types/backTop.d.ts +2 -1
- package/types/badge.d.ts +2 -1
- package/types/bottomNavigation.d.ts +2 -1
- package/types/bottomNavigationItem.d.ts +2 -1
- package/types/button.d.ts +2 -1
- package/types/card.d.ts +2 -1
- package/types/cell.d.ts +2 -1
- package/types/checkbox.d.ts +2 -1
- package/types/checkboxGroup.d.ts +2 -1
- package/types/chip.d.ts +2 -1
- package/types/col.d.ts +2 -1
- package/types/collapse.d.ts +2 -1
- package/types/collapseItem.d.ts +2 -1
- package/types/countdown.d.ts +2 -1
- package/types/counter.d.ts +2 -1
- package/types/datePicker.d.ts +2 -1
- package/types/dialog.d.ts +2 -1
- package/types/divider.d.ts +2 -1
- package/types/form.d.ts +2 -1
- package/types/icon.d.ts +2 -1
- package/types/image.d.ts +2 -1
- package/types/imagePreview.d.ts +2 -1
- package/types/indexAnchor.d.ts +2 -1
- package/types/indexBar.d.ts +2 -1
- package/types/input.d.ts +2 -1
- package/types/list.d.ts +2 -1
- package/types/loading.d.ts +2 -1
- package/types/menu.d.ts +2 -1
- package/types/option.d.ts +2 -1
- package/types/pagination.d.ts +2 -1
- package/types/picker.d.ts +2 -1
- package/types/popup.d.ts +2 -1
- package/types/progress.d.ts +2 -1
- package/types/pullRefresh.d.ts +2 -1
- package/types/radio.d.ts +2 -1
- package/types/radioGroup.d.ts +2 -1
- package/types/rate.d.ts +2 -1
- package/types/row.d.ts +2 -1
- package/types/select.d.ts +2 -1
- package/types/skeleton.d.ts +2 -1
- package/types/slider.d.ts +2 -1
- package/types/snackbar.d.ts +2 -1
- package/types/space.d.ts +2 -1
- package/types/step.d.ts +2 -1
- package/types/steps.d.ts +2 -1
- package/types/sticky.d.ts +2 -1
- package/types/styleProvider.d.ts +2 -1
- package/types/swipe.d.ts +2 -1
- package/types/swipeItem.d.ts +2 -1
- package/types/switch.d.ts +2 -1
- package/types/tab.d.ts +2 -1
- package/types/tabItem.d.ts +2 -1
- package/types/table.d.ts +2 -1
- package/types/tabs.d.ts +2 -1
- package/types/tabsItems.d.ts +2 -1
- package/types/timePicker.d.ts +2 -1
- package/types/uploader.d.ts +2 -1
- package/umd/varlet.js +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent, ref, nextTick, watch, computed } from 'vue';
|
|
2
|
-
import { requestAnimationFrame } from '../utils/elements';
|
|
2
|
+
import { nextTickFrame, requestAnimationFrame } from '../utils/elements';
|
|
3
3
|
import { isArray } from '@varlet/shared';
|
|
4
4
|
import { createNamespace } from '../utils/components';
|
|
5
5
|
import { useCollapse } from './provide';
|
|
@@ -41,6 +41,9 @@ export function render(_ctx, _cache) {
|
|
|
41
41
|
ref: "contentEl",
|
|
42
42
|
onTransitionend: _cache[1] || (_cache[1] = function () {
|
|
43
43
|
return _ctx.transitionend && _ctx.transitionend(...arguments);
|
|
44
|
+
}),
|
|
45
|
+
onTransitionstart: _cache[2] || (_cache[2] = function () {
|
|
46
|
+
return _ctx.start && _ctx.start(...arguments);
|
|
44
47
|
})
|
|
45
48
|
}, [_createElementVNode("div", {
|
|
46
49
|
class: _normalizeClass(_ctx.n('content-wrap'))
|
|
@@ -66,6 +69,8 @@ export default defineComponent({
|
|
|
66
69
|
collapse,
|
|
67
70
|
bindCollapse
|
|
68
71
|
} = useCollapse();
|
|
72
|
+
var isInitToTrigger = true; // ensure to trigger transitionend
|
|
73
|
+
|
|
69
74
|
var contentEl = ref(null);
|
|
70
75
|
var show = ref(false);
|
|
71
76
|
var isShow = ref(false);
|
|
@@ -102,10 +107,18 @@ export default defineComponent({
|
|
|
102
107
|
requestAnimationFrame(() => {
|
|
103
108
|
;
|
|
104
109
|
contentEl.value.style.height = offsetHeight + 'px';
|
|
110
|
+
if (!isInitToTrigger) return;
|
|
111
|
+
nextTickFrame(() => {
|
|
112
|
+
if (isInitToTrigger) transitionend();
|
|
113
|
+
});
|
|
105
114
|
});
|
|
106
115
|
});
|
|
107
116
|
};
|
|
108
117
|
|
|
118
|
+
var start = () => {
|
|
119
|
+
isInitToTrigger = false;
|
|
120
|
+
};
|
|
121
|
+
|
|
109
122
|
var closePanel = () => {
|
|
110
123
|
if (!contentEl.value) return;
|
|
111
124
|
var {
|
|
@@ -138,6 +151,7 @@ export default defineComponent({
|
|
|
138
151
|
});
|
|
139
152
|
return {
|
|
140
153
|
n,
|
|
154
|
+
start,
|
|
141
155
|
classes,
|
|
142
156
|
show,
|
|
143
157
|
isShow,
|
|
@@ -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:
|
|
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: transparent; --picker-header-padding: 4px 16px; --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); --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); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.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;}.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);}.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%);}
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
@day-picker-head-item-color: rgba(0, 0, 0, 0.38);
|
|
34
34
|
@day-picker-head-item-padding: 8px 0;
|
|
35
35
|
@day-picker-head-item-font-weight: 600;
|
|
36
|
-
@date-picker-body-background-color:
|
|
36
|
+
@date-picker-body-background-color: transparent;
|
|
37
37
|
|
|
38
38
|
:root {
|
|
39
39
|
--date-picker-border-radius: @date-picker-border-radius;
|
|
@@ -147,6 +147,12 @@
|
|
|
147
147
|
position: relative;
|
|
148
148
|
overflow: auto;
|
|
149
149
|
background-color: var(--date-picker-body-background-color);
|
|
150
|
+
|
|
151
|
+
&::-webkit-scrollbar {
|
|
152
|
+
display: none;
|
|
153
|
+
width: 0;
|
|
154
|
+
background: transparent;
|
|
155
|
+
}
|
|
150
156
|
}
|
|
151
157
|
|
|
152
158
|
.var-picker-header {
|
|
@@ -73,8 +73,8 @@ export default defineComponent({
|
|
|
73
73
|
var controlStyle = computed(() => ({
|
|
74
74
|
transform: "translate3d(0px, " + distance.value + "px, 0px) translate(-50%, 0)",
|
|
75
75
|
transition: isEnd.value ? "transform " + props.animationDuration + "ms" : undefined,
|
|
76
|
-
background: props.successBgColor
|
|
77
|
-
color: props.successColor
|
|
76
|
+
background: isSuccess.value ? props.successBgColor : props.bgColor,
|
|
77
|
+
color: isSuccess.value ? props.successColor : props.color
|
|
78
78
|
}));
|
|
79
79
|
var isSuccess = computed(() => refreshStatus.value === 'success');
|
|
80
80
|
|