@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/date-picker/style/RangePicker.less

@@ -0,0 +1,327 @@
+@input-box-height: 34px;
+
+// Range picker input wrapper with Active Bar
+.@{calendar-prefix-cls}-range-picker-input-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+
+.@{calendar-prefix-cls}-range-picker-input {
+  width: 44%;
+  height: 99%;
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  transition: color 0.3s;
+  .placeholder();
+
+  &[disabled] {
+    cursor: not-allowed;
+  }
+
+  // 激活状态的输入框
+  &-active {
+    color: @primary-color;
+  }
+}
+
+// Active Bar 底部滑块
+.@{calendar-prefix-cls}-range-picker-active-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: @primary-color;
+  pointer-events: none;
+  transition: left 0.3s ease-out, width 0.3s ease-out;
+  opacity: 0;
+
+  // 当 picker 获得焦点时显示
+  .@{calendar-prefix-cls}-picker:focus-within &,
+  .@{calendar-prefix-cls}-picker-focused & {
+    opacity: 1;
+  }
+}
+
+.@{calendar-prefix-cls}-range-picker-separator {
+  display: inline-block;
+  min-width: 10px;
+  height: 100%;
+  color: @text-color-secondary;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: top;
+  pointer-events: none;
+  .@{ant-prefix}-input-disabled & {
+    color: @disabled-color;
+  }
+}
+
+.@{calendar-prefix-cls}-range {
+  width: 552px;
+  overflow: hidden;
+
+  .@{calendar-prefix-cls}-date-panel {
+    &::after {
+      display: block;
+      clear: both;
+      height: 0;
+      visibility: hidden;
+      content: '.';
+    }
+  }
+  &-part {
+    position: relative;
+    width: 50%;
+  }
+
+  &-left {
+    float: left;
+    .@{calendar-prefix-cls} {
+      &-time-picker-inner {
+        border-right: 1px solid @border-color-split;
+      }
+    }
+  }
+
+  &-right {
+    float: right;
+    .@{calendar-prefix-cls} {
+      &-time-picker-inner {
+        border-left: 1px solid @border-color-split;
+      }
+    }
+  }
+
+  // 已隐藏 &-middle, 相关样式已移除
+
+  // &-right date-input-wrap 已隐藏，无需额外样式
+
+  .@{calendar-prefix-cls}-today
+    :not(.@{calendar-prefix-cls}-disabled-cell)
+    :not(.@{calendar-prefix-cls}-last-month-cell)
+    :not(.@{calendar-prefix-cls}-next-month-btn-day) {
+    .@{calendar-prefix-cls}-date {
+      color: @primary-color;
+      background: @primary-2;
+      border-color: @primary-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-selected-start-date,
+  .@{calendar-prefix-cls}-selected-end-date {
+    .calendar-selected-cell;
+  }
+
+  // 已隐藏 date-input-wrap，time 模式相关样式已移除
+
+  // 隐藏弹窗内部的日期输入框（已在外部 RangePicker 中显示）
+  .@{calendar-prefix-cls}-input-wrap {
+    display: none;
+  }
+
+  .@{calendar-prefix-cls}-date-input-wrap {
+    display: none;
+  }
+
+  &-middle {
+    display: none;
+  }
+
+  .@{calendar-prefix-cls}-input,
+  .@{calendar-timepicker-prefix-cls}-input {
+    .input;
+    height: @input-height-sm;
+    padding-right: 0;
+    padding-left: 0;
+    line-height: @input-height-sm;
+    border: 0;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .@{calendar-timepicker-prefix-cls}-icon {
+    display: none;
+  }
+
+  &.@{calendar-prefix-cls}-week-number {
+    width: 574px;
+
+    .@{calendar-prefix-cls}-range-part {
+      width: 286px;
+    }
+  }
+
+  .@{calendar-prefix-cls}-year-panel,
+  .@{calendar-prefix-cls}-month-panel,
+  .@{calendar-prefix-cls}-decade-panel {
+    top: @input-box-height;
+  }
+  .@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
+    top: 0;
+  }
+  .@{calendar-prefix-cls}-decade-panel-table,
+  .@{calendar-prefix-cls}-year-panel-table,
+  .@{calendar-prefix-cls}-month-panel-table {
+    height: 208px;
+  }
+
+  .@{calendar-prefix-cls}-in-range-cell {
+    position: relative;
+    border-radius: 0;
+    > div {
+      position: relative;
+      z-index: 1;
+    }
+    &::before {
+      position: absolute;
+      top: 4px;
+      right: 0;
+      bottom: 4px;
+      left: 0;
+      display: block;
+      background: @item-active-bg;
+      border: 0;
+      border-radius: 0;
+      content: '';
+    }
+  }
+
+  // 悬停高亮效果 - 范围起始单元格
+  .@{calendar-prefix-cls}-selected-start-date,
+  .@{calendar-prefix-cls}-selected-end-date {
+    .@{calendar-prefix-cls}-date {
+      color: @text-color-inverse;
+      background: @primary-color;
+      border-radius: @border-radius-sm;
+    }
+  }
+
+  // 悬停预览样式 - 鼠标悬停时预览范围
+  .@{calendar-prefix-cls}-in-range-cell.@{calendar-prefix-cls}-in-range-hover-cell {
+    &::before {
+      background: @primary-2;
+    }
+  }
+
+  // 范围起始单元格圆角
+  .@{calendar-prefix-cls}-in-range-cell:first-child,
+  .@{calendar-prefix-cls}-selected-start-date + .@{calendar-prefix-cls}-in-range-cell {
+    &::before {
+      border-top-left-radius: @border-radius-sm;
+      border-bottom-left-radius: @border-radius-sm;
+    }
+  }
+
+  // 范围结束单元格圆角
+  .@{calendar-prefix-cls}-in-range-cell:last-child,
+  .@{calendar-prefix-cls}-in-range-cell + .@{calendar-prefix-cls}-selected-end-date {
+    &::before {
+      border-top-right-radius: @border-radius-sm;
+      border-bottom-right-radius: @border-radius-sm;
+    }
+  }
+
+  // 悬停时的过渡效果
+  .@{calendar-prefix-cls}-cell {
+    transition: background 0.3s;
+
+    &:hover:not(.@{calendar-prefix-cls}-disabled-cell) {
+      .@{calendar-prefix-cls}-date {
+        background: @item-hover-bg;
+      }
+    }
+  }
+
+  // 选中的起始/结束日期悬停效果
+  .@{calendar-prefix-cls}-selected-start-date,
+  .@{calendar-prefix-cls}-selected-end-date {
+    &:hover {
+      .@{calendar-prefix-cls}-date {
+        background: @primary-5 !important;
+      }
+    }
+  }
+
+  .@{calendar-prefix-cls}-footer-extra {
+    float: left;
+  }
+
+  // `div` for selector specificity
+  div&-quick-selector {
+    text-align: left;
+
+    > a {
+      margin-right: 8px;
+    }
+  }
+
+  .@{calendar-prefix-cls},
+  .@{calendar-prefix-cls}-month-panel,
+  .@{calendar-prefix-cls}-year-panel,
+  .@{calendar-prefix-cls}-decade-panel {
+    &-header {
+      border-bottom: 0;
+    }
+    &-body {
+      border-top: @border-width-base @border-style-base @border-color-split;
+    }
+  }
+
+  &.@{calendar-prefix-cls}-time {
+    .@{calendar-timepicker-prefix-cls} {
+      top: 68px;
+      z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
+      width: 100%;
+      height: 207px;
+      &-panel {
+        height: 267px;
+        margin-top: -34px;
+      }
+
+      &-inner {
+        height: 100%;
+        padding-top: 40px;
+        background: none;
+      }
+
+      &-combobox {
+        display: inline-block;
+        height: 100%;
+        background-color: @component-background;
+        border-top: @border-width-base @border-style-base @border-color-split;
+      }
+      &-select {
+        height: 100%;
+        ul {
+          max-height: 100%;
+        }
+      }
+    }
+    .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
+      margin-right: 8px;
+    }
+    .@{calendar-prefix-cls}-today-btn {
+      height: 22px;
+      margin: 8px 12px;
+      line-height: 22px;
+    }
+  }
+
+  &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
+    height: 233px;
+  }
+}
+
+.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
+  .@{calendar-prefix-cls}-body {
+    border-top-color: transparent;
+  }
+}

package/src/components/date-picker/style/TimePicker.less

@@ -0,0 +1,151 @@
+.@{calendar-timepicker-prefix-cls} {
+  position: absolute;
+  top: 40px;
+  width: 100%;
+  background-color: @component-background;
+
+  &-panel {
+    position: absolute;
+    z-index: @zindex-picker;
+    width: 100%;
+  }
+
+  &-inner {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    font-size: @font-size-base;
+    line-height: 1.5;
+    text-align: left;
+    list-style: none;
+    background-color: @component-background;
+    background-clip: padding-box;
+    outline: none;
+  }
+  &-combobox {
+    width: 100%;
+  }
+
+  &-column-1,
+  &-column-1 &-select {
+    width: 100%;
+  }
+  &-column-2 &-select {
+    width: 50%;
+  }
+  &-column-3 &-select {
+    width: 33.33%;
+  }
+  &-column-4 &-select {
+    width: 25%;
+  }
+
+  &-input-wrap {
+    display: none;
+  }
+
+  &-select {
+    position: relative; // Fix chrome weird render bug
+    float: left;
+    height: 226px;
+    overflow: hidden;
+    font-size: @font-size-base;
+    border-right: @border-width-base @border-style-base @border-color-split;
+
+    &:hover {
+      overflow-y: auto;
+    }
+
+    &:first-child {
+      margin-left: 0;
+      border-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    ul {
+      width: 100%;
+      max-height: 206px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      width: 100%;
+      height: 24px;
+      margin: 0;
+      line-height: 24px;
+      text-align: center;
+      list-style: none;
+      cursor: pointer;
+      transition: all 0.3s;
+      user-select: none;
+
+      &:last-child::after {
+        display: block;
+        height: 202px;
+        content: '';
+      }
+
+      &:hover {
+        background: @item-hover-bg;
+      }
+
+      &:focus {
+        color: @primary-color;
+        font-weight: 600;
+        outline: none;
+      }
+    }
+
+    li&-option-selected {
+      font-weight: 600;
+      background: @time-picker-selected-bg;
+    }
+
+    li&-option-disabled {
+      color: @btn-disable-color;
+      &:hover {
+        background: transparent;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.@{calendar-prefix-cls}-time {
+  .@{calendar-prefix-cls}-day-select {
+    display: inline-block;
+    padding: 0 2px;
+    color: @heading-color;
+    font-weight: 500;
+    line-height: 34px;
+  }
+
+  .@{calendar-prefix-cls}-footer {
+    position: relative;
+    height: auto;
+
+    &-btn {
+      text-align: right;
+    }
+
+    .@{calendar-prefix-cls}-today-btn {
+      float: left;
+      margin: 0;
+    }
+
+    .@{calendar-prefix-cls}-time-picker-btn {
+      display: inline-block;
+      margin-right: 8px;
+
+      &-disabled {
+        color: @disabled-color;
+      }
+    }
+  }
+}

package/src/components/date-picker/style/WeekPicker.less

@@ -0,0 +1,21 @@
+.@{calendar-prefix-cls}-week-number {
+  &-cell {
+    opacity: 0.5;
+  }
+  .@{calendar-prefix-cls}-body tr {
+    cursor: pointer;
+    transition: all 0.3s;
+    &:hover {
+      background: @primary-1;
+    }
+    &.@{calendar-prefix-cls}-active-week {
+      font-weight: bold;
+      background: @primary-2;
+    }
+    .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
+    .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
+      color: @text-color;
+      background: transparent;
+    }
+  }
+}

package/src/components/date-picker/style/YearPanel.less

@@ -0,0 +1,93 @@
+.@{calendar-prefix-cls}-year-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-picker-panel;
+  background: @component-background;
+  border-radius: @border-radius-base;
+  outline: none;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
+    height: 100%;
+  }
+}
+
+.@{calendar-prefix-cls}-year-panel-hidden {
+  display: none;
+}
+
+.@{calendar-prefix-cls}-year-panel-header {
+  .calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel');
+  position: relative;
+}
+
+.@{calendar-prefix-cls}-year-panel-body {
+  flex: 1;
+}
+
+.@{calendar-prefix-cls}-year-panel-footer {
+  border-top: @border-width-base @border-style-base @border-color-split;
+  .@{calendar-prefix-cls}-footer-extra {
+    padding: 0 12px;
+  }
+}
+
+.@{calendar-prefix-cls}-year-panel-table {
+  width: 100%;
+  height: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.@{calendar-prefix-cls}-year-panel-cell {
+  text-align: center;
+  &-disabled .@{calendar-prefix-cls}-year-panel-year {
+    &,
+    &:hover {
+      color: @disabled-color;
+      background: @disabled-bg;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.@{calendar-prefix-cls}-year-panel-year {
+  display: inline-block;
+  height: 24px;
+  margin: 0 auto;
+  padding: 0 8px;
+  color: @text-color;
+  line-height: 24px;
+  text-align: center;
+  background: transparent;
+  border-radius: @border-radius-sm;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background: @item-hover-bg;
+    cursor: pointer;
+  }
+}
+
+.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
+  color: @text-color-inverse;
+  background: @primary-color;
+
+  &:hover {
+    color: @text-color-inverse;
+    background: @primary-color;
+  }
+}
+
+.@{calendar-prefix-cls}-year-panel-last-decade-cell,
+.@{calendar-prefix-cls}-year-panel-next-decade-cell {
+  .@{calendar-prefix-cls}-year-panel-year {
+    color: @disabled-color;
+    user-select: none;
+  }
+}

package/src/components/date-picker/style/index.js

@@ -0,0 +1,8 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+// deps-lint-skip: input
+import '../../input/style';
+import '../../time-picker/style';
+import '../../tag/style';

package/src/components/date-picker/style/index.less

@@ -0,0 +1,20 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+@import '../../button/style/mixin';
+
+@calendar-prefix-cls: ~'@{ant-prefix}-calendar';
+@calendar-timepicker-prefix-cls: ~'@{ant-prefix}-calendar-time-picker';
+
+@import 'Picker';
+@import 'Calendar';
+@import 'RangePicker';
+@import 'TimePicker';
+@import 'MonthPanel';
+@import 'YearPanel';
+@import 'DecadePanel';
+@import 'MonthPicker';
+@import 'WeekPicker';
+@import 'presets';
+@import 'status';
+@import 'transitions';

package/src/components/date-picker/style/presets.less

@@ -0,0 +1,69 @@
+// Presets Panel Styles for RangePicker
+// 预设日期范围面板样式
+
+.@{calendar-prefix-cls}-presets {
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: @padding-xs 0;
+  border-right: @border-width-base @border-style-base @border-color-split;
+  background: @component-background;
+
+  &-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &-item {
+    padding: @padding-xs @padding-sm;
+    color: @text-color;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @primary-color;
+      background: @item-hover-bg;
+    }
+
+    &-selected {
+      color: @primary-color;
+      font-weight: 500;
+      background: @primary-1;
+    }
+  }
+}
+
+// Range picker with presets layout
+// 带预设的日期范围选择器布局
+.@{calendar-prefix-cls}-range-with-presets {
+  .@{calendar-prefix-cls}-range-part {
+    display: flex;
+  }
+}
+
+// Range picker popup with presets
+// 带预设的弹出层布局
+.@{calendar-prefix-cls}-picker-container {
+  .@{calendar-prefix-cls}-range-with-presets {
+    display: flex;
+    align-items: stretch;
+  }
+}
+
+// Footer quick selector (legacy support for ranges prop)
+// 底部快捷选择器（兼容旧的 ranges 属性）
+.@{calendar-prefix-cls}-range-quick-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: @padding-xs;
+  padding: @padding-xs @padding-sm;
+  border-top: @border-width-base @border-style-base @border-color-split;
+
+  a,
+  .@{ant-prefix}-tag {
+    cursor: pointer;
+  }
+}