@varlet/ui 1.27.16 → 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.
Files changed (98) hide show
  1. package/es/collapse-item/CollapseItem.js +26 -3
  2. package/es/date-picker/date-picker.css +1 -1
  3. package/es/date-picker/date-picker.less +7 -1
  4. package/es/date-picker/style/index.js +1 -0
  5. package/es/date-picker/style/less.js +1 -0
  6. package/es/input/Input.js +26 -6
  7. package/es/pull-refresh/PullRefresh.js +2 -2
  8. package/es/pull-refresh/props.js +1 -1
  9. package/es/select/Select.js +12 -6
  10. package/es/select/select.css +1 -1
  11. package/es/select/select.less +1 -0
  12. package/es/skeleton/Skeleton.js +6 -4
  13. package/es/style.css +1 -1
  14. package/es/themes/dark/timePicker.js +1 -1
  15. package/es/time-picker/timePicker.css +1 -1
  16. package/es/time-picker/timePicker.less +1 -1
  17. package/es/varlet.esm.js +59 -18
  18. package/highlight/attributes.json +1 -1
  19. package/highlight/web-types.json +2 -2
  20. package/lib/collapse-item/CollapseItem.js +25 -2
  21. package/lib/date-picker/date-picker.css +1 -1
  22. package/lib/date-picker/date-picker.less +7 -1
  23. package/lib/date-picker/style/index.js +1 -0
  24. package/lib/date-picker/style/less.js +1 -0
  25. package/lib/input/Input.js +26 -6
  26. package/lib/pull-refresh/PullRefresh.js +2 -2
  27. package/lib/pull-refresh/props.js +1 -1
  28. package/lib/select/Select.js +11 -5
  29. package/lib/select/select.css +1 -1
  30. package/lib/select/select.less +1 -0
  31. package/lib/skeleton/Skeleton.js +6 -4
  32. package/lib/snackbar/style/index.js +1 -1
  33. package/lib/snackbar/style/less.js +1 -1
  34. package/lib/style.css +1 -1
  35. package/lib/themes/dark/timePicker.js +1 -1
  36. package/lib/time-picker/timePicker.css +1 -1
  37. package/lib/time-picker/timePicker.less +1 -1
  38. package/package.json +5 -5
  39. package/types/actionSheet.d.ts +2 -1
  40. package/types/appBar.d.ts +2 -1
  41. package/types/backTop.d.ts +2 -1
  42. package/types/badge.d.ts +2 -1
  43. package/types/bottomNavigation.d.ts +2 -1
  44. package/types/bottomNavigationItem.d.ts +2 -1
  45. package/types/button.d.ts +2 -1
  46. package/types/card.d.ts +2 -1
  47. package/types/cell.d.ts +2 -1
  48. package/types/checkbox.d.ts +2 -1
  49. package/types/checkboxGroup.d.ts +2 -1
  50. package/types/chip.d.ts +2 -1
  51. package/types/col.d.ts +2 -1
  52. package/types/collapse.d.ts +2 -1
  53. package/types/collapseItem.d.ts +2 -1
  54. package/types/countdown.d.ts +2 -1
  55. package/types/counter.d.ts +2 -1
  56. package/types/datePicker.d.ts +2 -1
  57. package/types/dialog.d.ts +2 -1
  58. package/types/divider.d.ts +2 -1
  59. package/types/form.d.ts +2 -1
  60. package/types/icon.d.ts +2 -1
  61. package/types/image.d.ts +2 -1
  62. package/types/imagePreview.d.ts +2 -1
  63. package/types/indexAnchor.d.ts +2 -1
  64. package/types/indexBar.d.ts +2 -1
  65. package/types/input.d.ts +3 -2
  66. package/types/list.d.ts +2 -1
  67. package/types/loading.d.ts +2 -1
  68. package/types/menu.d.ts +2 -1
  69. package/types/option.d.ts +2 -1
  70. package/types/pagination.d.ts +2 -1
  71. package/types/picker.d.ts +2 -1
  72. package/types/popup.d.ts +2 -1
  73. package/types/progress.d.ts +2 -1
  74. package/types/pullRefresh.d.ts +2 -1
  75. package/types/radio.d.ts +2 -1
  76. package/types/radioGroup.d.ts +2 -1
  77. package/types/rate.d.ts +2 -1
  78. package/types/row.d.ts +2 -1
  79. package/types/select.d.ts +2 -1
  80. package/types/skeleton.d.ts +2 -1
  81. package/types/slider.d.ts +2 -1
  82. package/types/snackbar.d.ts +2 -1
  83. package/types/space.d.ts +2 -1
  84. package/types/step.d.ts +2 -1
  85. package/types/steps.d.ts +2 -1
  86. package/types/sticky.d.ts +2 -1
  87. package/types/styleProvider.d.ts +2 -1
  88. package/types/swipe.d.ts +2 -1
  89. package/types/swipeItem.d.ts +2 -1
  90. package/types/switch.d.ts +2 -1
  91. package/types/tab.d.ts +2 -1
  92. package/types/tabItem.d.ts +2 -1
  93. package/types/table.d.ts +2 -1
  94. package/types/tabs.d.ts +2 -1
  95. package/types/tabsItems.d.ts +2 -1
  96. package/types/timePicker.d.ts +2 -1
  97. package/types/uploader.d.ts +2 -1
  98. package/umd/varlet.js +4 -4
package/es/collapse-item/CollapseItem.js CHANGED
@@ -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,20 +107,37 @@ 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
- contentEl.value.style.height = 0 + 'px';
124
+ var {
125
+ offsetHeight
126
+ } = contentEl.value;
127
+ contentEl.value.style.height = offsetHeight + 'px';
128
+ requestAnimationFrame(() => {
129
+ ;
130
+ contentEl.value.style.height = 0 + 'px';
131
+ });
112
132
  };
113
133
 
114
134
  var transitionend = () => {
115
135
  if (!isShow.value) {
116
136
  show.value = false;
117
- contentEl.value.style.height = '';
118
137
  }
138
+
139
+ ;
140
+ contentEl.value.style.height = '';
119
141
  };
120
142
 
121
143
  var collapseItemProvider = {
@@ -129,6 +151,7 @@ export default defineComponent({
129
151
  });
130
152
  return {
131
153
  n,
154
+ start,
132
155
  classes,
133
156
  show,
134
157
  isShow,
package/es/date-picker/date-picker.css CHANGED
@@ -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: rgba(0, 0, 0, 0); --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 .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%);}
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%);}
package/es/date-picker/date-picker.less CHANGED
@@ -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: rgba(0, 0, 0, 0);
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 {
package/es/date-picker/style/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import '../../styles/common.css'
2
2
  import '../../styles/elevation.css'
3
+ import '../../ripple/ripple.css'
3
4
  import '../../button/button.css'
4
5
  import '../../icon/icon.css'
5
6
  import '../date-picker.css'
package/es/date-picker/style/less.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import '../../styles/common.less'
2
2
  import '../../styles/elevation.less'
3
+ import '../../ripple/ripple.less'
3
4
  import '../../button/button.less'
4
5
  import '../../icon/icon.less'
5
6
  import '../date-picker.less'
package/es/input/Input.js CHANGED
@@ -23,7 +23,7 @@ export function render(_ctx, _cache) {
23
23
 
24
24
  return _openBlock(), _createElementBlock("div", {
25
25
  class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.disabled, _ctx.n('--disabled')])),
26
- onClick: _cache[8] || (_cache[8] = function () {
26
+ onClick: _cache[10] || (_cache[10] = function () {
27
27
  return _ctx.handleClick && _ctx.handleClick(...arguments);
28
28
  })
29
29
  }, [_createElementVNode("div", {
@@ -69,6 +69,9 @@ export function render(_ctx, _cache) {
69
69
  }),
70
70
  onChange: _cache[3] || (_cache[3] = function () {
71
71
  return _ctx.handleChange && _ctx.handleChange(...arguments);
72
+ }),
73
+ onTouchstart: _cache[4] || (_cache[4] = function () {
74
+ return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
72
75
  })
73
76
  }, "\n ", 46
74
77
  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -86,17 +89,20 @@ export function render(_ctx, _cache) {
86
89
  color: _ctx.textColor,
87
90
  caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined
88
91
  }),
89
- onFocus: _cache[4] || (_cache[4] = function () {
92
+ onFocus: _cache[5] || (_cache[5] = function () {
90
93
  return _ctx.handleFocus && _ctx.handleFocus(...arguments);
91
94
  }),
92
- onBlur: _cache[5] || (_cache[5] = function () {
95
+ onBlur: _cache[6] || (_cache[6] = function () {
93
96
  return _ctx.handleBlur && _ctx.handleBlur(...arguments);
94
97
  }),
95
- onInput: _cache[6] || (_cache[6] = function () {
98
+ onInput: _cache[7] || (_cache[7] = function () {
96
99
  return _ctx.handleInput && _ctx.handleInput(...arguments);
97
100
  }),
98
- onChange: _cache[7] || (_cache[7] = function () {
101
+ onChange: _cache[8] || (_cache[8] = function () {
99
102
  return _ctx.handleChange && _ctx.handleChange(...arguments);
103
+ }),
104
+ onTouchstart: _cache[9] || (_cache[9] = function () {
105
+ return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
100
106
  })
101
107
  }, null, 46
102
108
  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -277,7 +283,20 @@ export default defineComponent({
277
283
  validateWithTrigger('onClick');
278
284
  };
279
285
 
280
- var withTrim = value => props.modelModifiers.trim ? value.trim() : value; // expose
286
+ var withTrim = value => props.modelModifiers.trim ? value.trim() : value;
287
+
288
+ var handleTouchstart = e => {
289
+ var {
290
+ disabled,
291
+ readonly
292
+ } = props;
293
+
294
+ if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
295
+ return;
296
+ }
297
+
298
+ e.stopPropagation();
299
+ }; // expose
281
300
 
282
301
 
283
302
  var reset = () => {
@@ -329,6 +348,7 @@ export default defineComponent({
329
348
  handleChange,
330
349
  handleClear,
331
350
  handleClick,
351
+ handleTouchstart,
332
352
  validate,
333
353
  resetValidation,
334
354
  reset,
package/es/pull-refresh/PullRefresh.js CHANGED
@@ -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 || props.bgColor,
77
- color: props.successColor || props.color
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
 
package/es/pull-refresh/props.js CHANGED
@@ -12,7 +12,7 @@ export var props = {
12
12
  type: [Number, String],
13
13
  default: 300
14
14
  },
15
- // 刷新成功提示展示时长
15
+ // 成功提示展示时长
16
16
  successDuration: {
17
17
  type: [Number, String],
18
18
  default: 2000
package/es/select/Select.js CHANGED
@@ -8,7 +8,7 @@ import { props } from './props';
8
8
  import { useValidation, createNamespace, call } from '../utils/components';
9
9
  import { useOptions } from './provide';
10
10
  import { useForm } from '../form/provide';
11
- import { toPxNum } from '../utils/elements';
11
+ import { getTop, toPxNum } from '../utils/elements';
12
12
  var {
13
13
  n,
14
14
  classes
@@ -457,16 +457,22 @@ export default defineComponent({
457
457
  var {
458
458
  body
459
459
  } = document;
460
+ var bodyScrollHeight = body.scrollHeight;
460
461
  nextTick(() => {
461
- var _menuEl$value, _menuEl$value2;
462
+ var _menuEl$value;
462
463
 
463
464
  var {
464
- offsetTop: menuOffsetTop,
465
465
  offsetHeight: menuOffsetHeight
466
466
  } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
467
- var menuOffsetBottom = body.scrollHeight - menuOffsetHeight - menuOffsetTop;
468
- if (menuOffsetTop < 0) offsetY.value = getOffsetY();
469
- if (menuOffsetBottom < 0) offsetY.value -= ((_menuEl$value2 = menuEl.value) == null ? void 0 : _menuEl$value2.parentElement).offsetHeight - getOffsetY();
467
+ var wrapOffsetTop = getTop(wrapEl.value);
468
+
469
+ if (wrapOffsetTop + offsetY.value < 0) {
470
+ offsetY.value = getOffsetY();
471
+ }
472
+
473
+ if (menuOffsetHeight + wrapOffsetTop + offsetY.value > bodyScrollHeight) {
474
+ offsetY.value -= menuOffsetHeight - getOffsetY();
475
+ }
470
476
  });
471
477
  };
472
478
 
package/es/select/select.css CHANGED
@@ -1 +1 @@
1
- :root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
1
+ :root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all; overflow-x: hidden;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
package/es/select/select.less CHANGED
@@ -112,6 +112,7 @@
112
112
  font-size: inherit;
113
113
  color: var(--select-select-text-color);
114
114
  word-break: break-all;
115
+ overflow-x: hidden;
115
116
  }
116
117
 
117
118
  &__arrow[var-select-cover] {
package/es/skeleton/Skeleton.js CHANGED
@@ -31,7 +31,8 @@ export function render(_ctx, _cache) {
31
31
  /* CLASS */
32
32
  )], 6
33
33
  /* CLASS, STYLE */
34
- )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
34
+ )) : _createCommentVNode("v-if", true), _ctx.avatar || _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? (_openBlock(), _createElementBlock("div", {
35
+ key: 1,
35
36
  class: _normalizeClass(_ctx.n('article'))
36
37
  }, [_ctx.avatar ? (_openBlock(), _createElementBlock("div", {
37
38
  key: 0,
@@ -46,7 +47,8 @@ export function render(_ctx, _cache) {
46
47
  /* CLASS */
47
48
  )], 6
48
49
  /* CLASS, STYLE */
49
- )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
50
+ )) : _createCommentVNode("v-if", true), _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? (_openBlock(), _createElementBlock("div", {
51
+ key: 1,
50
52
  class: _normalizeClass(_ctx.n('section'))
51
53
  }, [_ctx.title ? (_openBlock(), _createElementBlock("div", {
52
54
  key: 0,
@@ -78,9 +80,9 @@ export function render(_ctx, _cache) {
78
80
  /* KEYED_FRAGMENT */
79
81
  ))], 2
80
82
  /* CLASS */
81
- )], 2
83
+ )) : _createCommentVNode("v-if", true)], 2
82
84
  /* CLASS */
83
- )], 2
85
+ )) : _createCommentVNode("v-if", true)], 2
84
86
  /* CLASS */
85
87
  )) : _createCommentVNode("v-if", true), _ctx.loading && _ctx.fullscreen ? (_openBlock(), _createElementBlock("div", {
86
88
  key: 2,