@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.
Files changed (41) hide show
  1. package/es/app-bar/AppBar.mjs +2 -2
  2. package/es/avatar/Avatar.mjs +2 -2
  3. package/es/back-top/BackTop.mjs +3 -3
  4. package/es/bottom-navigation/BottomNavigation.mjs +2 -2
  5. package/es/button/button.css +1 -1
  6. package/es/counter/counter.css +1 -1
  7. package/es/date-picker/date-picker.css +1 -1
  8. package/es/date-picker/src/day-picker-panel.mjs +2 -2
  9. package/es/date-picker/src/year-picker-panel.mjs +2 -2
  10. package/es/dialog/dialog.css +1 -1
  11. package/es/divider/Divider.mjs +2 -2
  12. package/es/field-decorator/FieldDecorator.mjs +3 -3
  13. package/es/index-bar/IndexBar.mjs +2 -2
  14. package/es/index.bundle.mjs +1 -1
  15. package/es/index.mjs +1 -1
  16. package/es/input/Input.mjs +2 -2
  17. package/es/link/link.css +1 -1
  18. package/es/list/List.mjs +4 -5
  19. package/es/pull-refresh/PullRefresh.mjs +2 -2
  20. package/es/rate/rate.css +1 -1
  21. package/es/slider/Slider.mjs +2 -2
  22. package/es/snackbar/core.mjs +2 -2
  23. package/es/sticky/Sticky.mjs +5 -6
  24. package/es/style.css +1 -1
  25. package/es/swipe/Swipe.mjs +4 -5
  26. package/es/switch/Switch.mjs +1 -4
  27. package/es/table/table.css +1 -1
  28. package/es/tabs/Tabs.mjs +2 -2
  29. package/es/themes/dark/button.mjs +2 -1
  30. package/es/themes/dark/dialog.mjs +1 -0
  31. package/es/themes/dark/index.mjs +2 -1
  32. package/es/themes/dark/link.mjs +3 -0
  33. package/es/themes/dark/table.mjs +1 -0
  34. package/es/time-picker/timePicker.css +1 -1
  35. package/es/varlet.esm.js +3200 -3190
  36. package/highlight/web-types.en-US.json +1 -1
  37. package/highlight/web-types.zh-CN.json +1 -1
  38. package/lib/style.css +1 -1
  39. package/lib/varlet.cjs.js +46 -35
  40. package/package.json +6 -6
  41. package/umd/varlet.js +5 -5
@@ -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, onUnmounted, onDeactivated, onActivated } from 'vue';
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 { useEventListener } from '@varlet/use';
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
- onDeactivated(stopAutoplay);
422
- onUnmounted(stopAutoplay);
423
- useEventListener(() => window, 'resize', resize);
421
+ onSmartUnmounted(stopAutoplay);
422
+ onWindowResize(resize);
424
423
  return {
425
424
  n,
426
425
  classes,
@@ -140,10 +140,7 @@ var __sfc__ = defineComponent({
140
140
  };
141
141
  });
142
142
  var radius = computed(() => {
143
- var {
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 => {
@@ -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 { useEventListener } from '@varlet/use';
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
- useEventListener(() => window, 'resize', resize);
230
+ onWindowResize(resize);
231
231
  return {
232
232
  stickyComponent,
233
233
  indicatorWidth,
@@ -1,3 +1,4 @@
1
1
  export default {
2
- '--button-default-color': '#303030'
2
+ '--button-default-color': '#303030',
3
+ '--button-default-text-color': '#fff'
3
4
  };
@@ -1,4 +1,5 @@
1
1
  export default {
2
2
  '--dialog-background': '#1e1e1e',
3
+ '--dialog-title-color': '#fff',
3
4
  '--dialog-message-color': '#bbb'
4
5
  };
@@ -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);
@@ -0,0 +1,3 @@
1
+ export default {
2
+ '--link-default-color': '#fff'
3
+ };
@@ -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: transparent;}.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;}
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;}