@wangxinowo/vue-datepicker-next 1.0.3 → 1.0.5

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 (14) hide show
  1. package/README.md +510 -104
  2. package/dist/vue-datepicker-next.min.css +48 -1
  3. package/dist/vue-datepicker-next.min.js +3 -3
  4. package/package.json +88 -88
  5. package/src/components/date-picker/PresetPanel.jsx +148 -102
  6. package/src/components/date-picker/style/RangePicker.less +515 -507
  7. package/src/components/date-picker/style/presets.less +120 -69
  8. package/src/components/vc-calendar/src/RangeCalendar.jsx +1105 -1031
  9. package/src/components/vc-calendar/src/calendar/CalendarHeader.jsx +277 -267
  10. package/src/components/vc-calendar/src/month/MonthPanel.jsx +130 -124
  11. package/src/components/vc-calendar/src/month/MonthTable.jsx +252 -214
  12. package/src/components/vc-calendar/src/range-calendar/CalendarPart.jsx +180 -174
  13. package/src/components/vc-calendar/src/year/YearPanel.jsx +242 -211
  14. package/src/index.js +48 -44
package/src/components/date-picker/style/presets.less CHANGED
@@ -1,69 +1,120 @@
1
- // Presets Panel Styles for RangePicker
2
- // 预设日期范围面板样式
3
-
4
- .@{calendar-prefix-cls}-presets {
5
- display: flex;
6
- flex-direction: column;
7
- min-width: 120px;
8
- max-height: 240px;
9
- overflow-y: auto;
10
- padding: @padding-xs 0;
11
- border-right: @border-width-base @border-style-base @border-color-split;
12
- background: @component-background;
13
-
14
- &-list {
15
- margin: 0;
16
- padding: 0;
17
- list-style: none;
18
- }
19
-
20
- &-item {
21
- padding: @padding-xs @padding-sm;
22
- color: @text-color;
23
- cursor: pointer;
24
- transition: all 0.3s;
25
-
26
- &:hover {
27
- color: @primary-color;
28
- background: @item-hover-bg;
29
- }
30
-
31
- &-selected {
32
- color: @primary-color;
33
- font-weight: 500;
34
- background: @primary-1;
35
- }
36
- }
37
- }
38
-
39
- // Range picker with presets layout
40
- // 带预设的日期范围选择器布局
41
- .@{calendar-prefix-cls}-range-with-presets {
42
- .@{calendar-prefix-cls}-range-part {
43
- display: flex;
44
- }
45
- }
46
-
47
- // Range picker popup with presets
48
- // 带预设的弹出层布局
49
- .@{calendar-prefix-cls}-picker-container {
50
- .@{calendar-prefix-cls}-range-with-presets {
51
- display: flex;
52
- align-items: stretch;
53
- }
54
- }
55
-
56
- // Footer quick selector (legacy support for ranges prop)
57
- // 底部快捷选择器（兼容旧的 ranges 属性）
58
- .@{calendar-prefix-cls}-range-quick-selector {
59
- display: flex;
60
- flex-wrap: wrap;
61
- gap: @padding-xs;
62
- padding: @padding-xs @padding-sm;
63
- border-top: @border-width-base @border-style-base @border-color-split;
64
-
65
- a,
66
- .@{ant-prefix}-tag {
67
- cursor: pointer;
68
- }
69
- }
1
+ // Presets Panel Styles for RangePicker
2
+ // 预设日期范围面板样式
3
+
4
+ // 左侧面板模式样式
5
+ .@{calendar-prefix-cls}-presets {
6
+ display: flex;
7
+ flex-direction: column;
8
+ min-width: 120px;
9
+ max-height: 240px;
10
+ overflow-y: auto;
11
+ padding: @padding-xs 0;
12
+ border-right: @border-width-base @border-style-base @border-color-split;
13
+ background: @component-background;
14
+
15
+ &-list {
16
+ margin: 0;
17
+ padding: 0;
18
+ list-style: none;
19
+ }
20
+
21
+ &-item {
22
+ padding: @padding-xs @padding-sm;
23
+ color: @text-color;
24
+ cursor: pointer;
25
+ transition: all 0.3s;
26
+
27
+ &:hover {
28
+ color: @primary-color;
29
+ background: @item-hover-bg;
30
+ }
31
+
32
+ &-selected {
33
+ color: @primary-color;
34
+ font-weight: 500;
35
+ background: @primary-1;
36
+ }
37
+ }
38
+
39
+ // 底部按钮模式样式
40
+ &-footer {
41
+ display: flex;
42
+ flex-wrap: wrap;
43
+ align-items: center;
44
+ gap: @padding-xs;
45
+ padding: @padding-sm @padding-md;
46
+ border-top: @border-width-base @border-style-base @border-color-split;
47
+ background: @component-background;
48
+
49
+ &-btn {
50
+ display: inline-flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ height: 24px;
54
+ padding: 0 @padding-sm;
55
+ font-size: @font-size-sm;
56
+ color: @text-color;
57
+ background: @background-color-light;
58
+ border: @border-width-base @border-style-base @border-color-base;
59
+ border-radius: @border-radius-sm;
60
+ cursor: pointer;
61
+ transition: all 0.2s ease-in-out;
62
+ user-select: none;
63
+
64
+ &:hover {
65
+ color: @primary-color;
66
+ border-color: @primary-color;
67
+ background: @primary-1;
68
+ }
69
+
70
+ &:active {
71
+ color: @primary-7;
72
+ border-color: @primary-7;
73
+ }
74
+
75
+ &-selected {
76
+ color: #fff;
77
+ background: @primary-color;
78
+ border-color: @primary-color;
79
+
80
+ &:hover {
81
+ color: #fff;
82
+ background: @primary-5;
83
+ border-color: @primary-5;
84
+ }
85
+ }
86
+ }
87
+ }
88
+ }
89
+
90
+ // Range picker with presets layout
91
+ // 带预设的日期范围选择器布局
92
+ .@{calendar-prefix-cls}-range-with-presets {
93
+ .@{calendar-prefix-cls}-range-part {
94
+ display: flex;
95
+ }
96
+ }
97
+
98
+ // Range picker popup with presets
99
+ // 带预设的弹出层布局
100
+ .@{calendar-prefix-cls}-picker-container {
101
+ .@{calendar-prefix-cls}-range-with-presets {
102
+ display: flex;
103
+ align-items: stretch;
104
+ }
105
+ }
106
+
107
+ // Footer quick selector (legacy support for ranges prop)
108
+ // 底部快捷选择器（兼容旧的 ranges 属性）
109
+ .@{calendar-prefix-cls}-range-quick-selector {
110
+ display: flex;
111
+ flex-wrap: wrap;
112
+ gap: @padding-xs;
113
+ padding: @padding-xs @padding-sm;
114
+ border-top: @border-width-base @border-style-base @border-color-split;
115
+
116
+ a,
117
+ .@{ant-prefix}-tag {
118
+ cursor: pointer;
119
+ }
120
+ }