@varlet/ui 3.18.2 → 3.19.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 (93) hide show
  1. package/es/action-sheet/ActionItem.mjs +28 -8
  2. package/es/action-sheet/actionSheet.css +1 -1
  3. package/es/action-sheet/index.mjs +4 -2
  4. package/es/alert/alert.css +1 -1
  5. package/es/back-top/BackTop.mjs +2 -1
  6. package/es/back-top/props.mjs +1 -0
  7. package/es/badge/Badge.mjs +20 -10
  8. package/es/badge/badge.css +1 -1
  9. package/es/bottom-navigation-item/BottomNavigationItem.mjs +34 -20
  10. package/es/bottom-navigation-item/bottomNavigationItem.css +1 -1
  11. package/es/checkbox/Checkbox.mjs +45 -22
  12. package/es/checkbox/checkbox.css +1 -1
  13. package/es/chip/Chip.mjs +11 -4
  14. package/es/chip/chip.css +1 -1
  15. package/es/chip/props.mjs +4 -0
  16. package/es/date-input/DateInput.mjs +865 -0
  17. package/es/date-input/DateInputSfc.css +0 -0
  18. package/es/date-input/TimeSelect.mjs +201 -0
  19. package/es/date-input/date-input.css +1 -0
  20. package/es/date-input/index.mjs +12 -0
  21. package/es/date-input/props.mjs +77 -0
  22. package/es/date-input/style/index.mjs +14 -0
  23. package/es/date-picker/DatePicker.mjs +522 -451
  24. package/es/date-picker/DayPickerPanel.mjs +318 -0
  25. package/es/date-picker/MonthPickerPanel.mjs +187 -0
  26. package/es/date-picker/PanelHeader.mjs +332 -0
  27. package/es/date-picker/YearPickerPanel.mjs +199 -0
  28. package/es/date-picker/constants.mjs +31 -0
  29. package/es/date-picker/date-picker.css +1 -1
  30. package/es/date-picker/props.mjs +6 -9
  31. package/es/date-picker/style/index.mjs +0 -1
  32. package/es/date-picker/types.mjs +0 -0
  33. package/es/field-decorator/FieldDecorator.mjs +5 -1
  34. package/es/field-decorator/fieldDecorator.css +1 -1
  35. package/es/icon/icon.css +1 -1
  36. package/es/index.bundle.mjs +7 -1
  37. package/es/index.mjs +6 -1
  38. package/es/input/props.mjs +1 -1
  39. package/es/locale/en-US.mjs +2 -0
  40. package/es/locale/fa-IR.mjs +2 -0
  41. package/es/locale/ja-JP.mjs +2 -0
  42. package/es/locale/zh-CN.mjs +2 -0
  43. package/es/locale/zh-TW.mjs +2 -0
  44. package/es/menu-select/MenuSelect.mjs +11 -2
  45. package/es/menu-select/menuSelect.css +1 -1
  46. package/es/radio/Radio.mjs +30 -14
  47. package/es/radio/radio.css +1 -1
  48. package/es/rail-navigation-item/RailNavigationItem.mjs +33 -19
  49. package/es/rail-navigation-item/railNavigationItem.css +1 -1
  50. package/es/rate/Rate.mjs +23 -12
  51. package/es/rate/rate.css +1 -1
  52. package/es/select/Select.mjs +10 -1
  53. package/es/select/select.css +1 -1
  54. package/es/snackbar/style/index.mjs +1 -1
  55. package/es/step/Step.mjs +50 -20
  56. package/es/step/step.css +1 -1
  57. package/es/style.mjs +1 -0
  58. package/es/themes/dark/alert.mjs +2 -2
  59. package/es/themes/dark/dateInput.mjs +9 -0
  60. package/es/themes/dark/datePicker.mjs +23 -19
  61. package/es/themes/dark/index.mjs +3 -2
  62. package/es/themes/md3-dark/alert.mjs +2 -2
  63. package/es/themes/md3-dark/dateInput.mjs +9 -0
  64. package/es/themes/md3-dark/datePicker.mjs +18 -13
  65. package/es/themes/md3-dark/index.mjs +3 -2
  66. package/es/themes/md3-light/alert.mjs +2 -2
  67. package/es/themes/md3-light/dateInput.mjs +9 -0
  68. package/es/themes/md3-light/datePicker.mjs +18 -13
  69. package/es/themes/md3-light/index.mjs +3 -2
  70. package/es/utils/elements.mjs +7 -0
  71. package/es/utils/shared.mjs +15 -0
  72. package/es/varlet.css +1 -1
  73. package/es/varlet.esm.js +11913 -10674
  74. package/highlight/web-types.en-US.json +608 -73
  75. package/highlight/web-types.zh-CN.json +581 -67
  76. package/lib/varlet.cjs.js +5597 -4212
  77. package/lib/varlet.css +1 -1
  78. package/package.json +7 -7
  79. package/types/actionSheet.d.ts +1 -1
  80. package/types/badge.d.ts +1 -0
  81. package/types/chip.d.ts +3 -0
  82. package/types/dateInput.d.ts +96 -0
  83. package/types/datePicker.d.ts +4 -2
  84. package/types/index.d.ts +2 -0
  85. package/types/locale.d.ts +2 -0
  86. package/types/rate.d.ts +7 -0
  87. package/types/step.d.ts +3 -0
  88. package/types/styleVars.d.ts +14 -4
  89. package/umd/varlet.js +7 -7
  90. package/es/date-picker/src/day-picker-panel.mjs +0 -385
  91. package/es/date-picker/src/month-picker-panel.mjs +0 -300
  92. package/es/date-picker/src/panel-header.mjs +0 -142
  93. package/es/date-picker/src/year-picker-panel.mjs +0 -311
@@ -6,41 +6,46 @@ var stdin_default = {
6
6
  "--date-picker-main-color": "#1D1B20",
7
7
  "--date-picker-border-radius": "20px",
8
8
  "--date-picker-title-padding": "20px 20px 16px",
9
- "--date-picker-actions-padding": "20px",
9
+ "--date-picker-actions-padding": "10px 20px 20px",
10
10
  "--day-picker-head-item-color": "#1D1B20",
11
+ "--day-picker-adjacent-item-color": "hsla(var(--hsl-on-surface-variant), 0.72)",
12
+ "--day-picker-disabled-item-color": "var(--color-text-disabled)",
11
13
  "--date-picker-header-arrow-filter": "opacity(1)",
12
14
  "--date-picker-header-padding": "0 0 16px",
13
- "--date-picker-body-height": "300px",
14
- "--date-picker-body-padding": "0 14px 16px",
15
+ "--date-picker-header-padding-top-no-title": "20px",
16
+ "--date-picker-body-height": "304px",
17
+ "--date-picker-body-padding-horizontal": "12px",
18
+ "--date-picker-body-padding": "0 var(--date-picker-body-padding-horizontal) 16px",
15
19
  "--date-picker-header-color": "var(--color-on-surface-variant)",
16
20
  "--date-picker-font-size": "var(--font-size-md)",
17
21
  "--date-picker-min-width": "290px",
18
22
  "--date-picker-title-hint-font-size": "var(--font-size-md)",
19
23
  "--date-picker-title-height": "105px",
20
- "--date-picker-title-year-font-size": "var(--font-size-md)",
21
- "--date-picker-title-year-font-weight": "500",
22
- "--date-picker-title-year-margin-bottom": "8px",
23
24
  "--date-picker-title-date-height": "48px",
24
25
  "--date-picker-title-date-font-size": "34px",
25
26
  "--date-picker-title-date-font-weight": "500",
26
27
  "--date-picker-title-date-range-font-size": "20px",
27
28
  "--date-picker-title-date-justify-content": "normal",
28
29
  "--month-picker-padding": "0 12px",
29
- "--month-picker-item-width": "33%",
30
- "--month-picker-item-height": "56px",
30
+ "--month-picker-item-width": "32%",
31
+ "--month-picker-item-height": "46px",
31
32
  "--month-picker-item-button-max-width": "140px",
33
+ "--month-picker-item-button-font-weight": "normal",
32
34
  "--year-picker-padding": "0 12px",
33
- "--year-picker-item-width": "33%",
34
- "--year-picker-item-height": "56px",
35
+ "--year-picker-item-width": "32%",
36
+ "--year-picker-item-height": "46px",
35
37
  "--year-picker-item-button-max-width": "140px",
38
+ "--year-picker-item-button-font-weight": "normal",
36
39
  "--day-picker-content-item-width": "14.28%",
37
- "--day-picker-content-item-font-size": "var(--font-size-sm)",
40
+ "--day-picker-content-item-min-height": "21px",
41
+ "--day-picker-content-item-font-size": "var(--font-size-md)",
38
42
  "--day-picker-content-item-padding": "2px 0",
39
43
  "--day-picker-content-item-button-width": "32px",
40
44
  "--day-picker-content-item-button-height": "32px",
41
- "--day-picker-content-item-button-font-size": "var(--font-size-sm)",
45
+ "--day-picker-content-item-button-font-size": "var(--font-size-md)",
46
+ "--day-picker-head-item-font-size": "var(--font-size-md)",
42
47
  "--day-picker-head-item-padding": "8px 0",
43
- "--day-picker-head-item-font-weight": "600"
48
+ "--day-picker-head-item-font-weight": "normal"
44
49
  };
45
50
  export {
46
51
  stdin_default as default
@@ -34,6 +34,7 @@ import collapse from "./collapse.mjs";
34
34
  import countdown from "./countdown.mjs";
35
35
  import counter from "./counter.mjs";
36
36
  import dataTable from "./dataTable.mjs";
37
+ import dateInput from "./dateInput.mjs";
37
38
  import datePicker from "./datePicker.mjs";
38
39
  import dialog from "./dialog.mjs";
39
40
  import divider from "./divider.mjs";
@@ -87,7 +88,7 @@ import tooltip from "./tooltip.mjs";
87
88
  import treeMenu from "./treeMenu.mjs";
88
89
  import uploader from "./uploader.mjs";
89
90
  import watermark from "./watermark.mjs";
90
- var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
91
+ var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
91
92
  "--color-scheme": "light",
92
93
  "--font-size-xs": "10px",
93
94
  "--font-size-sm": "12px",
@@ -166,7 +167,7 @@ var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(
166
167
  "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
167
168
  "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
168
169
  "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)"
169
- }, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), segmentedButton), segmentedButtons), card), chip), tooltip), treeMenu), tabs), tab), table), collapse), result), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), slider), uploader), timePicker), datePicker), switchThemes), rate), railNavigation), railNavigationItem), avatarGroup), badge), countdown), counter), dataTable), divider), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), pagination), progress), ripple), skeleton), space), step), swipe), watermark), appBar), code), signature);
170
+ }, button), alert), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), segmentedButton), segmentedButtons), card), chip), tooltip), treeMenu), tabs), tab), table), collapse), result), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), floatingPanel), backTop), select), option), slider), uploader), timePicker), dateInput), datePicker), switchThemes), rate), railNavigation), railNavigationItem), avatarGroup), badge), countdown), counter), dataTable), divider), formDetails), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), pagination), progress), ripple), skeleton), space), step), swipe), watermark), appBar), code), signature);
170
171
  export {
171
172
  stdin_default as default
172
173
  };
@@ -170,6 +170,12 @@ function isDisplayNoneElement(element) {
170
170
  }
171
171
  return false;
172
172
  }
173
+ function scrollSelectedIntoView(scroller, selected) {
174
+ if (!scroller || !selected) {
175
+ return;
176
+ }
177
+ scroller.scrollTop = selected.offsetTop - scroller.clientHeight / 2 + selected.offsetHeight / 2;
178
+ }
173
179
  const focusableSelector = ["button", "input", "select", "textarea", "[tabindex]", "[href]"].map((s) => `${s}:not([disabled])`).join(", ");
174
180
  function focusChildElementByKey(referenceElement, parentElement, key, beforeFocus) {
175
181
  const focusableElements = Array.from(parentElement.querySelectorAll(focusableSelector)).filter(
@@ -231,6 +237,7 @@ export {
231
237
  isVw,
232
238
  multiplySizeUnit,
233
239
  padStartFlex,
240
+ scrollSelectedIntoView,
234
241
  scrollTo,
235
242
  toPxNum,
236
243
  toSizeUnit
@@ -1,4 +1,8 @@
1
1
  import { isString, removeItem } from "@varlet/shared";
2
+ import dayjs from "dayjs/esm/index.js";
3
+ import customParseFormat from "dayjs/esm/plugin/customParseFormat/index.js";
4
+ import isSameOrAfter from "dayjs/esm/plugin/isSameOrAfter/index.js";
5
+ import isSameOrBefore from "dayjs/esm/plugin/isSameOrBefore/index.js";
2
6
  const isHTMLSupportImage = (val) => {
3
7
  if (!isString(val)) {
4
8
  return false;
@@ -33,6 +37,16 @@ const createCache = (max) => {
33
37
  }
34
38
  };
35
39
  };
40
+ let dayjsExtended = false;
41
+ const createDayjs = () => {
42
+ if (!dayjsExtended) {
43
+ dayjs.extend(customParseFormat);
44
+ dayjs.extend(isSameOrAfter);
45
+ dayjs.extend(isSameOrBefore);
46
+ dayjsExtended = true;
47
+ }
48
+ return dayjs;
49
+ };
36
50
  const linear = (value) => value;
37
51
  const cubic = (value) => value ** 3;
38
52
  const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
@@ -49,6 +63,7 @@ const padStart = (str, maxLength, fillString = "") => {
49
63
  };
50
64
  export {
51
65
  createCache,
66
+ createDayjs,
52
67
  cubic,
53
68
  easeInOutCubic,
54
69
  isHTMLSupportImage,