@varlet/ui 1.22.0-alpha.7 → 1.22.1

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 (65) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/es/action-sheet/actionSheet.css +1 -1
  3. package/es/action-sheet/actionSheet.less +1 -1
  4. package/es/back-top/BackTop.js +1 -1
  5. package/es/back-top/backTop.css +1 -1
  6. package/es/back-top/backTop.less +1 -1
  7. package/es/button/button.css +1 -1
  8. package/es/button/button.less +1 -2
  9. package/es/checkbox/checkbox.css +1 -1
  10. package/es/checkbox/checkbox.less +1 -1
  11. package/es/counter/Counter.js +1 -1
  12. package/es/counter/counter.css +1 -1
  13. package/es/counter/counter.less +1 -1
  14. package/es/index.js +10 -0
  15. package/es/input/input.css +1 -1
  16. package/es/input/input.less +3 -1
  17. package/es/less.js +2 -0
  18. package/es/locale/en-US.js +5 -1
  19. package/es/locale/zh-CN.js +5 -1
  20. package/es/menu/Menu.js +1 -2
  21. package/es/pagination/Pagination.js +353 -0
  22. package/es/pagination/PaginationSfc.css +0 -0
  23. package/es/pagination/PaginationSfc.less +0 -0
  24. package/es/pagination/index.js +8 -0
  25. package/es/pagination/pagination.css +1 -0
  26. package/es/pagination/pagination.less +163 -0
  27. package/es/pagination/porps.js +43 -0
  28. package/es/pagination/style/index.js +8 -0
  29. package/es/pagination/style/less.js +8 -0
  30. package/es/radio/radio.css +1 -1
  31. package/es/radio/radio.less +1 -1
  32. package/es/rate/rate.css +1 -1
  33. package/es/rate/rate.less +1 -1
  34. package/es/ripple/ripple.css +1 -1
  35. package/es/ripple/ripple.less +7 -1
  36. package/es/select/select.css +1 -1
  37. package/es/select/select.less +1 -1
  38. package/es/skeleton/skeleton.css +1 -1
  39. package/es/skeleton/skeleton.less +3 -1
  40. package/es/snackbar/style/index.js +1 -1
  41. package/es/snackbar/style/less.js +1 -1
  42. package/es/style.js +2 -0
  43. package/es/styles/common.css +1 -1
  44. package/es/styles/common.less +1 -0
  45. package/es/styles/var.less +1 -0
  46. package/es/tab/tab.css +1 -1
  47. package/es/tab/tab.less +1 -1
  48. package/es/table/Table.js +43 -0
  49. package/es/table/TableSfc.css +0 -0
  50. package/es/table/TableSfc.less +0 -0
  51. package/es/table/index.js +8 -0
  52. package/es/table/style/index.js +4 -0
  53. package/es/table/style/less.js +4 -0
  54. package/es/table/table.css +1 -0
  55. package/es/table/table.less +109 -0
  56. package/es/umdIndex.js +10 -0
  57. package/es/utils/elements.js +6 -6
  58. package/highlight/attributes.json +46 -2
  59. package/highlight/tags.json +19 -0
  60. package/highlight/web-types.json +138 -2
  61. package/package.json +4 -3
  62. package/types/index.d.ts +2 -0
  63. package/types/pagination.d.ts +23 -0
  64. package/types/table.d.ts +11 -0
  65. package/umd/varlet.js +3 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,53 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.22.1](https://github.com/haoziqaq/varlet/compare/v1.22.0...v1.22.1) (2021-10-08)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **pagination:** fix hover style ([1762dd8](https://github.com/haoziqaq/varlet/commit/1762dd8224806975c916485e40f4dc15b0fbb87a))
12
+ * **ui/action-sheet:** fix disabled color ([ec70187](https://github.com/haoziqaq/varlet/commit/ec7018723815ead6f5deae85c79a5b0533a4927d))
13
+ * **ui/styles:** fix disabled color vars ([f529c30](https://github.com/haoziqaq/varlet/commit/f529c309d41f4ca28ff8d3c0d00e48889837222d))
14
+
15
+
16
+
17
+
18
+
19
+ # [1.22.0](https://github.com/haoziqaq/varlet/compare/v1.21.0...v1.22.0) (2021-10-08)
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * **back-top:** cover the style of button ([b5046ae](https://github.com/haoziqaq/varlet/commit/b5046ae8e2b1c90e1583718d989e9c62528eadbb))
25
+ * **cli/gen:** add default themes ([2d68e91](https://github.com/haoziqaq/varlet/commit/2d68e91c2fc83d1db4063ae576144815e24f17e5))
26
+ * **input:** text-color of disabled in safari ([dd33256](https://github.com/haoziqaq/varlet/commit/dd33256c87f3d708583694e12f17ea19961812a3))
27
+ * **pagination:** add keydown event to switch page ([414decb](https://github.com/haoziqaq/varlet/commit/414decb43bd8009776111a0bf84ad8b967ccb38e))
28
+ * **pagination:** fix current and size not update ([463d891](https://github.com/haoziqaq/varlet/commit/463d8916960c8c9d1a32555f0a405c4b073d0502))
29
+ * **pagination:** remove padding ([83d214a](https://github.com/haoziqaq/varlet/commit/83d214ad80423b67829b9cedf2f338f5ffe4ab25))
30
+ * **ui/button:** remove line-height ([c0d2422](https://github.com/haoziqaq/varlet/commit/c0d2422e1a8735f7acf0459c2c4a2d8ba20bd4e2))
31
+ * **ui/ripple:** add style variables ([551a666](https://github.com/haoziqaq/varlet/commit/551a66696c2e87fdbc2fe9b04f89350affc64d8a))
32
+ * **ui/ripple, ui/menu:** opt ripple animation, fix menu left error on transition animation running ([0f714de](https://github.com/haoziqaq/varlet/commit/0f714de1c40af46116fd07d7717525c2c63d0470))
33
+ * **ui/skeleton:** add avatar-border-radius css vars ([ddf259f](https://github.com/haoziqaq/varlet/commit/ddf259fab66bb0630e78c48fccd63429b87d2f0f))
34
+ * **ui/table:** add table-tbody-td-font-size variable ([861217e](https://github.com/haoziqaq/varlet/commit/861217e49fc1594d66182a076c648bef4d462942))
35
+ * fix component path name ([bbd8b1f](https://github.com/haoziqaq/varlet/commit/bbd8b1fbd62bdc4a084eb53f63f3d896f7ca4c1a))
36
+ * remove console ([3ee3548](https://github.com/haoziqaq/varlet/commit/3ee35486f9ad760e7463a7fe981edcf29eb336be))
37
+
38
+
39
+ ### Features
40
+
41
+ * **cli:** add preview command that can preview document site for production ([3fea1f1](https://github.com/haoziqaq/varlet/commit/3fea1f1fed8a2f0fdb0d2fd5e7880531335a6711))
42
+ * **pagination:** add declaration file ([30fd32b](https://github.com/haoziqaq/varlet/commit/30fd32b9f5af842c7fd187e5aed9535d0eb5d195))
43
+ * **table:** add declaration file ([30072d3](https://github.com/haoziqaq/varlet/commit/30072d3ccd2f6cddcf7ddbc734d85266489d9d32))
44
+ * pagination ([62b27a8](https://github.com/haoziqaq/varlet/commit/62b27a8fde6c647cd072093ca0398348498a56e2))
45
+ * **cli:** migrate the build tool to vite ([c0eb94c](https://github.com/haoziqaq/varlet/commit/c0eb94c3c82683abb49b8561e181e75aa843aac4))
46
+ * **ui/pagination:** ui/pagination ([3f8e24c](https://github.com/haoziqaq/varlet/commit/3f8e24c075c31853b2a6de94bcd02b4bb4195d2c))
47
+ * **ui/table:** ui/table ([abd3f7d](https://github.com/haoziqaq/varlet/commit/abd3f7da5001902870ad7a322cfa5122c41ed395))
48
+
49
+
50
+
51
+
52
+
6
53
  # [1.21.0](https://github.com/haoziqaq/varlet/compare/v1.20.0...v1.21.0) (2021-09-22)
7
54
 
8
55
 
@@ -1 +1 @@
1
- :root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0px 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; max-height: 80%; background: var(--action-sheet-background);}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}
1
+ :root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0px 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; max-height: 80%; background: var(--action-sheet-background);}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}
@@ -5,7 +5,7 @@
5
5
  @action-sheet-action-item-height: 48px;
6
6
  @action-sheet-action-item-padding: 0px 18px;
7
7
  @action-sheet-action-item-color: #333;
8
- @action-sheet-action-item-disabled-color: var(--color-disabled);
8
+ @action-sheet-action-item-disabled-color: var(--color-text-disabled);
9
9
  @action-sheet-icon-margin: 0 20px 0 0;
10
10
  @action-sheet-icon-size: 24px;
11
11
  @action-sheet-background: #fff;
@@ -16,7 +16,7 @@ export function render(_ctx, _cache) {
16
16
  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_button, {
17
17
  type: "primary",
18
18
  round: "",
19
- class: "var-back-top__button"
19
+ "var-back-top-cover": ""
20
20
  }, {
21
21
  default: _withCtx(() => [_createVNode(_component_var_icon, {
22
22
  name: "chevron-up"
@@ -1 +1 @@
1
- :root { --back-top-right: 40px; --back-top-bottom: 40px; --back-top-button-size: 40px;}.var-back-top { position: fixed; right: var(--back-top-right); bottom: var(--back-top-bottom); transform: scale(0); transition: 0.3s var(--cubic-bezier); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-back-top__button { width: var(--back-top-button-size); height: var(--back-top-button-size);}.var-back-top--active { transform: scale(1);}
1
+ :root { --back-top-right: 40px; --back-top-bottom: 40px; --back-top-button-size: 40px;}.var-back-top { position: fixed; right: var(--back-top-right); bottom: var(--back-top-bottom); transform: scale(0); transition: 0.3s var(--cubic-bezier); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-back-top .var-button[var-back-top-cover] { width: var(--back-top-button-size); height: var(--back-top-button-size);}.var-back-top--active { transform: scale(1);}
@@ -16,7 +16,7 @@
16
16
  transition: 0.3s var(--cubic-bezier);
17
17
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
18
18
 
19
- &__button {
19
+ .var-button[var-back-top-cover] {
20
20
  width: var(--back-top-button-size);
21
21
  height: var(--back-top-button-size);
22
22
  }
@@ -1 +1 @@
1
- :root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: #bdbdbd; --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px;}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; line-height: 1.2; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--font-size-md);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--font-size-lg);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--font-size-sm);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--font-size-xs);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
1
+ :root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px;}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--font-size-md);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--font-size-lg);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--font-size-sm);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--font-size-xs);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
@@ -5,7 +5,7 @@
5
5
  @button-warning-color: var(--color-warning);
6
6
  @button-info-color: var(--color-info);
7
7
  @button-disabled-color: var(--color-disabled);
8
- @button-disabled-text-color: #bdbdbd;
8
+ @button-disabled-text-color: var(--color-text-disabled);
9
9
  @button-border-radius: 4px;
10
10
  @button-mini-padding: 0 9px;
11
11
  @button-small-padding: 0 11px;
@@ -44,7 +44,6 @@
44
44
  align-items: center;
45
45
  outline: none;
46
46
  border: none;
47
- line-height: 1.2;
48
47
  border-radius: var(--button-border-radius);
49
48
  user-select: none;
50
49
  cursor: pointer;
@@ -1 +1 @@
1
- :root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: #aaa; --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color);}.var-checkbox--error { color: var(--checkbox-error-color);}
1
+ :root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color);}.var-checkbox--error { color: var(--checkbox-error-color);}
@@ -1,6 +1,6 @@
1
1
  @checkbox-checked-color: var(--color-primary);
2
2
  @checkbox-unchecked-color: #555;
3
- @checkbox-disabled-color: #aaa;
3
+ @checkbox-disabled-color: var(--color-text-disabled);
4
4
  @checkbox-error-color: var(--color-danger);
5
5
  @checkbox-action-padding: 6px;
6
6
  @checkbox-icon-size: 24px;
@@ -28,7 +28,7 @@ export function render(_ctx, _cache) {
28
28
  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _mergeProps({
29
29
  class: ["var-counter__controller var-elevation--2", [_ctx.disabled || _ctx.formDisabled ? 'var-counter--disabled' : null, _ctx.errorMessage ? 'var-counter--error' : null]],
30
30
  style: {
31
- background: _ctx.color ? _ctx.color : null
31
+ background: _ctx.color ? _ctx.color : undefined
32
32
  }
33
33
  }, _ctx.$attrs), [_withDirectives(_createVNode(_component_var_icon, {
34
34
  class: _normalizeClass(["var-counter__decrement-button", [!_ctx.decrementButton ? 'var-counter--hidden' : null]]),
@@ -1 +1 @@
1
- :root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: #aaa; --input-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background);}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter--disabled { background: var(--counter-disabled-color);}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--color-danger);}
1
+ :root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-text-disabled); --input-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background);}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter--disabled { background: var(--counter-disabled-color);}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--color-danger);}
@@ -6,7 +6,7 @@
6
6
  @counter-input-font-size: 14px;
7
7
  @counter-button-size: 28px;
8
8
  @counter-button-icon-size: 100%;
9
- @counter-disabled-color: #aaa;
9
+ @counter-disabled-color: var(--color-text-disabled);
10
10
  @input-error-color: var(--color-danger);
11
11
 
12
12
  :root {
package/es/index.js CHANGED
@@ -31,6 +31,7 @@ import Loading, * as LoadingModule from './loading'
31
31
  import Locale, * as LocaleModule from './locale'
32
32
  import Menu, * as MenuModule from './menu'
33
33
  import Option, * as OptionModule from './option'
34
+ import Pagination, * as PaginationModule from './pagination'
34
35
  import Picker, * as PickerModule from './picker'
35
36
  import Popup, * as PopupModule from './popup'
36
37
  import Progress, * as ProgressModule from './progress'
@@ -53,6 +54,7 @@ import SwipeItem, * as SwipeItemModule from './swipe-item'
53
54
  import Switch, * as SwitchModule from './switch'
54
55
  import Tab, * as TabModule from './tab'
55
56
  import TabItem, * as TabItemModule from './tab-item'
57
+ import Table, * as TableModule from './table'
56
58
  import Tabs, * as TabsModule from './tabs'
57
59
  import TabsItems, * as TabsItemsModule from './tabs-items'
58
60
  import TimePicker, * as TimePickerModule from './time-picker'
@@ -91,6 +93,7 @@ export const _LoadingComponent = LoadingModule._LoadingComponent || {}
91
93
  export const _LocaleComponent = LocaleModule._LocaleComponent || {}
92
94
  export const _MenuComponent = MenuModule._MenuComponent || {}
93
95
  export const _OptionComponent = OptionModule._OptionComponent || {}
96
+ export const _PaginationComponent = PaginationModule._PaginationComponent || {}
94
97
  export const _PickerComponent = PickerModule._PickerComponent || {}
95
98
  export const _PopupComponent = PopupModule._PopupComponent || {}
96
99
  export const _ProgressComponent = ProgressModule._ProgressComponent || {}
@@ -113,6 +116,7 @@ export const _SwipeItemComponent = SwipeItemModule._SwipeItemComponent || {}
113
116
  export const _SwitchComponent = SwitchModule._SwitchComponent || {}
114
117
  export const _TabComponent = TabModule._TabComponent || {}
115
118
  export const _TabItemComponent = TabItemModule._TabItemComponent || {}
119
+ export const _TableComponent = TableModule._TableComponent || {}
116
120
  export const _TabsComponent = TabsModule._TabsComponent || {}
117
121
  export const _TabsItemsComponent = TabsItemsModule._TabsItemsComponent || {}
118
122
  export const _TimePickerComponent = TimePickerModule._TimePickerComponent || {}
@@ -153,6 +157,7 @@ function install(app) {
153
157
  Locale.install && app.use(Locale)
154
158
  Menu.install && app.use(Menu)
155
159
  Option.install && app.use(Option)
160
+ Pagination.install && app.use(Pagination)
156
161
  Picker.install && app.use(Picker)
157
162
  Popup.install && app.use(Popup)
158
163
  Progress.install && app.use(Progress)
@@ -175,6 +180,7 @@ function install(app) {
175
180
  Switch.install && app.use(Switch)
176
181
  Tab.install && app.use(Tab)
177
182
  TabItem.install && app.use(TabItem)
183
+ Table.install && app.use(Table)
178
184
  Tabs.install && app.use(Tabs)
179
185
  TabsItems.install && app.use(TabsItems)
180
186
  TimePicker.install && app.use(TimePicker)
@@ -216,6 +222,7 @@ export {
216
222
  Locale,
217
223
  Menu,
218
224
  Option,
225
+ Pagination,
219
226
  Picker,
220
227
  Popup,
221
228
  Progress,
@@ -238,6 +245,7 @@ export {
238
245
  Switch,
239
246
  Tab,
240
247
  TabItem,
248
+ Table,
241
249
  Tabs,
242
250
  TabsItems,
243
251
  TimePicker,
@@ -279,6 +287,7 @@ export default {
279
287
  Locale,
280
288
  Menu,
281
289
  Option,
290
+ Pagination,
282
291
  Picker,
283
292
  Popup,
284
293
  Progress,
@@ -301,6 +310,7 @@ export default {
301
310
  Switch,
302
311
  Tab,
303
312
  TabItem,
313
+ Table,
304
314
  Tabs,
305
315
  TabsItems,
306
316
  TimePicker,
@@ -1 +1 @@
1
- :root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: #aaa;}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size);}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; transform-origin: left; transition: transform 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size);}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; font-size: inherit; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color);}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { color: var(--input-disabled-color);}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}
1
+ :root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-text-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size);}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; transform-origin: left; transition: transform 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size);}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; font-size: inherit; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color);}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { -webkit-text-fill-color: var(--input-disabled-color); opacity: 1; color: var(--input-disabled-color);}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}
@@ -9,7 +9,7 @@
9
9
  @input-icon-size: 20px;
10
10
  @input-line-size: 1px;
11
11
  @input-line-spread-size: 2px;
12
- @input-disabled-color: #aaa;
12
+ @input-disabled-color: var(--color-text-disabled);
13
13
 
14
14
  :root {
15
15
  --input-input-text-color: @input-input-text-color;
@@ -158,6 +158,8 @@
158
158
  }
159
159
 
160
160
  &--disabled {
161
+ -webkit-text-fill-color: var(--input-disabled-color);
162
+ opacity: 1;
161
163
  color: var(--input-disabled-color);
162
164
  }
163
165
 
package/es/less.js CHANGED
@@ -31,6 +31,7 @@ import './loading/style/less'
31
31
  import './locale/style/less'
32
32
  import './menu/style/less'
33
33
  import './option/style/less'
34
+ import './pagination/style/less'
34
35
  import './picker/style/less'
35
36
  import './popup/style/less'
36
37
  import './progress/style/less'
@@ -53,6 +54,7 @@ import './swipe-item/style/less'
53
54
  import './switch/style/less'
54
55
  import './tab/style/less'
55
56
  import './tab-item/style/less'
57
+ import './table/style/less'
56
58
  import './tabs/style/less'
57
59
  import './tabs-items/style/less'
58
60
  import './time-picker/style/less'
@@ -94,5 +94,9 @@ export default {
94
94
  abbr: 'S'
95
95
  }
96
96
  },
97
- selected: ' selected'
97
+ selected: ' selected',
98
+ // pagination
99
+ paginationItem: '',
100
+ paginationPage: 'page',
101
+ paginationJump: 'Go to'
98
102
  };
@@ -94,5 +94,9 @@ export default {
94
94
  abbr: '六'
95
95
  }
96
96
  },
97
- selected: '个被选择'
97
+ selected: '个被选择',
98
+ // pagination
99
+ paginationItem: '条',
100
+ paginationPage: '页',
101
+ paginationJump: '前往'
98
102
  };
package/es/menu/Menu.js CHANGED
@@ -2,7 +2,7 @@ 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, watch, onMounted, onUnmounted, nextTick } from 'vue';
5
+ import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue';
6
6
  import { props } from './props';
7
7
  import { getLeft, getTop, toSizeUnit } from '../utils/elements';
8
8
  import { useZIndex } from '../context/zIndex';
@@ -93,7 +93,6 @@ export default defineComponent({
93
93
  onOpen,
94
94
  onClose
95
95
  } = props;
96
- yield nextTick();
97
96
  newValue && resize();
98
97
  newValue ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
99
98
  });