@varlet/ui 2.11.5 → 2.11.6
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/app-bar/AppBar.mjs +2 -2
- package/es/avatar/Avatar.mjs +2 -2
- package/es/back-top/BackTop.mjs +3 -3
- package/es/bottom-navigation/BottomNavigation.mjs +2 -2
- package/es/button/button.css +1 -1
- package/es/counter/counter.css +1 -1
- package/es/date-picker/date-picker.css +1 -1
- package/es/date-picker/src/day-picker-panel.mjs +2 -2
- package/es/date-picker/src/year-picker-panel.mjs +2 -2
- package/es/dialog/dialog.css +1 -1
- package/es/divider/Divider.mjs +2 -2
- package/es/field-decorator/FieldDecorator.mjs +3 -3
- package/es/index-bar/IndexBar.mjs +2 -2
- package/es/index.bundle.mjs +1 -1
- package/es/index.mjs +1 -1
- package/es/input/Input.mjs +2 -2
- package/es/link/link.css +1 -1
- package/es/list/List.mjs +4 -5
- package/es/pull-refresh/PullRefresh.mjs +2 -2
- package/es/rate/rate.css +1 -1
- package/es/slider/Slider.mjs +2 -2
- package/es/snackbar/core.mjs +2 -2
- package/es/sticky/Sticky.mjs +5 -6
- package/es/style.css +1 -1
- package/es/swipe/Swipe.mjs +4 -5
- package/es/switch/Switch.mjs +1 -4
- package/es/table/table.css +1 -1
- package/es/tabs/Tabs.mjs +2 -2
- package/es/themes/dark/button.mjs +2 -1
- package/es/themes/dark/dialog.mjs +1 -0
- package/es/themes/dark/index.mjs +2 -1
- package/es/themes/dark/link.mjs +3 -0
- package/es/themes/dark/table.mjs +1 -0
- package/es/time-picker/timePicker.css +1 -1
- package/es/varlet.esm.js +3200 -3190
- package/highlight/web-types.en-US.json +1 -1
- package/highlight/web-types.zh-CN.json +1 -1
- package/lib/style.css +1 -1
- package/lib/varlet.cjs.js +46 -35
- package/package.json +6 -6
- package/umd/varlet.js +5 -5
package/es/swipe/Swipe.mjs
CHANGED
|
@@ -2,13 +2,13 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
|
|
|
2
2
|
|
|
3
3
|
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
4
4
|
|
|
5
|
-
import { defineComponent, ref, computed, watch,
|
|
5
|
+
import { defineComponent, ref, computed, watch, onActivated } from 'vue';
|
|
6
6
|
import { useSwipeItems } from './provide.mjs';
|
|
7
7
|
import { doubleRaf, nextTickFrame } from '../utils/elements.mjs';
|
|
8
8
|
import { props } from './props.mjs';
|
|
9
9
|
import { clamp, isNumber, toNumber } from '@varlet/shared';
|
|
10
10
|
import { call, createNamespace } from '../utils/components.mjs';
|
|
11
|
-
import {
|
|
11
|
+
import { onSmartUnmounted, onWindowResize } from '@varlet/use';
|
|
12
12
|
var SWIPE_DELAY = 250;
|
|
13
13
|
var SWIPE_DISTANCE = 20;
|
|
14
14
|
var {
|
|
@@ -418,9 +418,8 @@ var __sfc__ = defineComponent({
|
|
|
418
418
|
resize();
|
|
419
419
|
}));
|
|
420
420
|
onActivated(resize);
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
useEventListener(() => window, 'resize', resize);
|
|
421
|
+
onSmartUnmounted(stopAutoplay);
|
|
422
|
+
onWindowResize(resize);
|
|
424
423
|
return {
|
|
425
424
|
n,
|
|
426
425
|
classes,
|
package/es/switch/Switch.mjs
CHANGED
|
@@ -140,10 +140,7 @@ var __sfc__ = defineComponent({
|
|
|
140
140
|
};
|
|
141
141
|
});
|
|
142
142
|
var radius = computed(() => {
|
|
143
|
-
|
|
144
|
-
size = '5.333vw'
|
|
145
|
-
} = props;
|
|
146
|
-
return multiplySizeUnit(size, 0.4);
|
|
143
|
+
return multiplySizeUnit(props.size || 0, 0.4);
|
|
147
144
|
});
|
|
148
145
|
|
|
149
146
|
var switchActive = event => {
|
package/es/table/table.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --table-background: #fff; --table-border-radius: 2px; --table-thead-border-bottom: thin solid rgba(0, 0, 0, 0.12); --table-thead-th-text-color: rgba(0, 0, 0, 0.6); --table-thead-th-font-size: 14px; --table-thead-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12); --table-tbody-tr-hover-background: #eee; --table-tbody-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12); --table-tbody-td-font-size: 16px; --table-row-height: 46px; --table-row-padding: 0 16px; --table-footer-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-table { width: 100%; background: var(--table-background); border-radius: var(--table-border-radius); transition: 0.25s background-color;}.var-table * { box-sizing: border-box;}.var-table__main { width: 100%; overflow-x: auto;}.var-table__main > table { min-width: 100%; display: table; border-spacing: 0; border-collapse: collapse; line-height: normal;}.var-table__main > table thead { display: table-header-group; border-bottom: var(--table-thead-border-bottom);}.var-table__main > table thead tr th { color: var(--table-thead-th-text-color); font-size: var(--table-thead-th-font-size);}.var-table__main > table thead tr:not(:last-child) { border-bottom: var(--table-thead-tr-border-bottom);}.var-table__main > table tbody { display: table-row-group;}.var-table__main > table tbody tr { display: table-row; outline: 0; vertical-align: middle;}.var-table__main > table tbody tr:hover { background: var(--table-tbody-tr-hover-background);}.var-table__main > table tbody tr:not(:last-child) { border-bottom: var(--table-tbody-tr-border-bottom);}.var-table__main > table tbody td { font-size: var(--table-tbody-td-font-size);}.var-table__main > table th { display: table-cell; height: var(--table-row-height); padding: var(--table-row-padding); font-weight: 500; text-align: left;}.var-table__main > table td { display: table-cell; padding: var(--table-row-padding); height: var(--table-row-height); text-align: left;}.var-table__footer { width: 100%; min-height: var(--table-row-height); border-top: var(--table-footer-border-top);}
|
|
1
|
+
:root { --table-background: #fff; --table-border-radius: 2px; --table-thead-border-bottom: thin solid rgba(0, 0, 0, 0.12); --table-thead-th-text-color: rgba(0, 0, 0, 0.6); --table-thead-th-font-size: 14px; --table-thead-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12); --table-tbody-tr-hover-background: #eee; --table-tbody-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12); --table-tbody-td-text-color: #555; --table-tbody-td-font-size: 16px; --table-row-height: 46px; --table-row-padding: 0 16px; --table-footer-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-table { width: 100%; background: var(--table-background); border-radius: var(--table-border-radius); transition: 0.25s background-color;}.var-table * { box-sizing: border-box;}.var-table__main { width: 100%; overflow-x: auto;}.var-table__main > table { min-width: 100%; display: table; border-spacing: 0; border-collapse: collapse; line-height: normal;}.var-table__main > table thead { display: table-header-group; border-bottom: var(--table-thead-border-bottom);}.var-table__main > table thead tr th { color: var(--table-thead-th-text-color); font-size: var(--table-thead-th-font-size);}.var-table__main > table thead tr:not(:last-child) { border-bottom: var(--table-thead-tr-border-bottom);}.var-table__main > table tbody { display: table-row-group;}.var-table__main > table tbody tr { display: table-row; outline: 0; vertical-align: middle;}.var-table__main > table tbody tr:hover { background: var(--table-tbody-tr-hover-background);}.var-table__main > table tbody tr:not(:last-child) { border-bottom: var(--table-tbody-tr-border-bottom);}.var-table__main > table tbody td { color: var(--table-tbody-td-text-color); font-size: var(--table-tbody-td-font-size);}.var-table__main > table th { display: table-cell; height: var(--table-row-height); padding: var(--table-row-padding); font-weight: 500; text-align: left;}.var-table__main > table td { display: table-cell; padding: var(--table-row-padding); height: var(--table-row-height); text-align: left;}.var-table__footer { width: 100%; min-height: var(--table-row-height); border-top: var(--table-footer-border-top);}
|
package/es/tabs/Tabs.mjs
CHANGED
|
@@ -10,7 +10,7 @@ import { clamp, isNumber } from '@varlet/shared';
|
|
|
10
10
|
import { linear } from '../utils/shared.mjs';
|
|
11
11
|
import { toSizeUnit, scrollTo, doubleRaf } from '../utils/elements.mjs';
|
|
12
12
|
import { createNamespace, call, formatElevation } from '../utils/components.mjs';
|
|
13
|
-
import {
|
|
13
|
+
import { onWindowResize } from '@varlet/use';
|
|
14
14
|
var {
|
|
15
15
|
n,
|
|
16
16
|
classes
|
|
@@ -227,7 +227,7 @@ var __sfc__ = defineComponent({
|
|
|
227
227
|
watch(() => props.active, resize);
|
|
228
228
|
watch(() => props.scrollable, resize);
|
|
229
229
|
onActivated(resize);
|
|
230
|
-
|
|
230
|
+
onWindowResize(resize);
|
|
231
231
|
return {
|
|
232
232
|
stickyComponent,
|
|
233
233
|
indicatorWidth,
|
package/es/themes/dark/index.mjs
CHANGED
|
@@ -34,6 +34,7 @@ import menu from './menu.mjs';
|
|
|
34
34
|
import breadcrumb from './breadcrumb.mjs';
|
|
35
35
|
import paper from './paper.mjs';
|
|
36
36
|
import avatar from './avatar.mjs';
|
|
37
|
+
import link from './link.mjs';
|
|
37
38
|
export default _extends({
|
|
38
39
|
// common
|
|
39
40
|
'--color-body': '#1e1e1e',
|
|
@@ -45,4 +46,4 @@ export default _extends({
|
|
|
45
46
|
'--color-danger': '#ef5350',
|
|
46
47
|
'--color-disabled': '#404040',
|
|
47
48
|
'--color-text-disabled': '#757575'
|
|
48
|
-
}, button, cell, card, timePicker, datePicker, skeleton, tabs, tab, popup, dialog, actionSheet, chip, badge, uploader, collapse, pullRefresh, switchThemes, steps, pagination, table, fieldDecorator, select, radio, checkbox, divider, picker, appBar, bottomNavigation, bottomNavigationItem, menu, result, breadcrumb, paper, avatar);
|
|
49
|
+
}, button, cell, card, timePicker, datePicker, skeleton, tabs, tab, popup, dialog, actionSheet, chip, badge, uploader, collapse, pullRefresh, switchThemes, steps, pagination, table, fieldDecorator, select, radio, checkbox, divider, picker, appBar, bottomNavigation, bottomNavigationItem, menu, result, breadcrumb, paper, avatar, link);
|
package/es/themes/dark/table.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
'--table-background': '#303030',
|
|
3
3
|
'--table-thead-th-text-color': 'rgba(255, 255, 255, 0.6)',
|
|
4
|
+
'--table-tbody-td-text-color': '#fff',
|
|
4
5
|
'--table-tbody-tr-hover-background': '#4c4b4b',
|
|
5
6
|
'--table-thead-border-bottom': 'thin solid rgba(255, 255, 255, 0.12)',
|
|
6
7
|
'--table-tbody-tr-border-bottom': 'thin solid rgba(255, 255, 255, 0.12)',
|
|
@@ -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: 270px; --time-picker-clock-container-height: 270px; --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-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background:
|
|
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: 270px; --time-picker-clock-container-height: 270px; --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-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 { padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); 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%);}.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;}
|