@wangxinowo/vue-datepicker-next 1.0.3 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangxinowo/vue-datepicker-next",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "A powerful Vue 2.x DatePicker component based on Ant Design Vue",
   "main": "dist/vue-datepicker-next.min.js",
   "module": "dist/vue-datepicker-next.min.js",

package/src/components/date-picker/PresetPanel.jsx

@@ -1,6 +1,7 @@
 /**
  * PresetPanel - 预设日期范围面板组件
  * 用于显示快捷选择的预设日期范围
+ * 支持两种显示模式：panel（左侧面板）和 footer（底部按钮）
  */
 
 import PropTypes from '../_util/vue-types';
@@ -24,6 +25,13 @@ export default {
      * 选中的预设索引
      */
     selectedIndex: PropTypes.number.def(-1),
+
+    /**
+     * 显示模式
+     * - panel: 左侧面板模式（垂直列表）
+     * - footer: 底部模式（水平按钮）
+     */
+    mode: PropTypes.oneOf(['panel', 'footer']).def('footer'),
   },
 
   methods: {
@@ -64,39 +72,77 @@ export default {
     handleMouseLeave() {
       this.$emit('hover', null, null, -1);
     },
-  },
-
-  render() {
-    const { prefixCls, presets, selectedIndex } = this;
-
-    if (!presets || presets.length === 0) {
-      return null;
-    }
 
-    const panelCls = `${prefixCls}-presets`;
+    /**
+     * 渲染底部按钮模式
+     */
+    renderFooterMode() {
+      const { prefixCls, presets, selectedIndex } = this;
+      const footerCls = `${prefixCls}-presets-footer`;
 
-    return (
-      <div class={panelCls}>
-        <ul class={`${panelCls}-list`}>
+      return (
+        <div class={footerCls}>
           {presets.map((preset, index) => {
-            const itemCls = classNames(`${panelCls}-item`, {
-              [`${panelCls}-item-selected`]: index === selectedIndex,
+            const btnCls = classNames(`${footerCls}-btn`, {
+              [`${footerCls}-btn-selected`]: index === selectedIndex,
             });
 
             return (
-              <li
+              <span
                 key={index}
-                class={itemCls}
+                class={btnCls}
                 onClick={() => this.handleClick(preset, index)}
                 onMouseenter={() => this.handleMouseEnter(preset, index)}
                 onMouseleave={this.handleMouseLeave}
               >
                 {preset.label}
-              </li>
+              </span>
             );
           })}
-        </ul>
-      </div>
-    );
+        </div>
+      );
+    },
+
+    /**
+     * 渲染左侧面板模式
+     */
+    renderPanelMode() {
+      const { prefixCls, presets, selectedIndex } = this;
+      const panelCls = `${prefixCls}-presets`;
+
+      return (
+        <div class={panelCls}>
+          <ul class={`${panelCls}-list`}>
+            {presets.map((preset, index) => {
+              const itemCls = classNames(`${panelCls}-item`, {
+                [`${panelCls}-item-selected`]: index === selectedIndex,
+              });
+
+              return (
+                <li
+                  key={index}
+                  class={itemCls}
+                  onClick={() => this.handleClick(preset, index)}
+                  onMouseenter={() => this.handleMouseEnter(preset, index)}
+                  onMouseleave={this.handleMouseLeave}
+                >
+                  {preset.label}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      );
+    },
+  },
+
+  render() {
+    const { presets, mode } = this;
+
+    if (!presets || presets.length === 0) {
+      return null;
+    }
+
+    return mode === 'footer' ? this.renderFooterMode() : this.renderPanelMode();
   },
 };

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

@@ -307,7 +307,7 @@
   .@{calendar-prefix-cls}-decade-panel-table,
   .@{calendar-prefix-cls}-year-panel-table,
   .@{calendar-prefix-cls}-month-panel-table {
-    height: 208px;
+    height: auto;
   }
 
   .@{calendar-prefix-cls}-in-range-cell {
@@ -374,6 +374,14 @@
     }
   }
 
+  // 年份/月份 hover 预览范围样式
+  .@{calendar-prefix-cls}-year-panel-cell.@{calendar-prefix-cls}-in-hover-range-cell,
+  .@{calendar-prefix-cls}-month-panel-cell.@{calendar-prefix-cls}-in-hover-range-cell {
+    &::before {
+      background: @primary-2;
+    }
+  }
+
   // 悬停高亮效果 - 范围起始单元格
   .@{calendar-prefix-cls}-selected-start-date,
   .@{calendar-prefix-cls}-selected-end-date {

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

@@ -1,6 +1,7 @@
 // Presets Panel Styles for RangePicker
 // 预设日期范围面板样式
 
+// 左侧面板模式样式
 .@{calendar-prefix-cls}-presets {
   display: flex;
   flex-direction: column;
@@ -34,6 +35,56 @@
       background: @primary-1;
     }
   }
+
+  // 底部按钮模式样式
+  &-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: @padding-xs;
+    padding: @padding-sm @padding-md;
+    border-top: @border-width-base @border-style-base @border-color-split;
+    background: @component-background;
+
+    &-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 24px;
+      padding: 0 @padding-sm;
+      font-size: @font-size-sm;
+      color: @text-color;
+      background: @background-color-light;
+      border: @border-width-base @border-style-base @border-color-base;
+      border-radius: @border-radius-sm;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      user-select: none;
+
+      &:hover {
+        color: @primary-color;
+        border-color: @primary-color;
+        background: @primary-1;
+      }
+
+      &:active {
+        color: @primary-7;
+        border-color: @primary-7;
+      }
+
+      &-selected {
+        color: #fff;
+        background: @primary-color;
+        border-color: @primary-color;
+
+        &:hover {
+          color: #fff;
+          background: @primary-5;
+          border-color: @primary-5;
+        }
+      }
+    }
+  }
 }
 
 // Range picker with presets layout

package/src/components/date-picker/wrapPicker.js

@@ -43,7 +43,7 @@ export default function wrapPicker(Picker, props, pickerType) {
   return {
     name: Picker.name,
     props: initDefaultProps(props, {
-      transitionName: 'slide-up',
+      transitionName: 'ant-slide-up',
       popupStyle: {},
       locale: {},
     }),
@@ -199,7 +199,7 @@ export default function wrapPicker(Picker, props, pickerType) {
             ...showTime,
             prefixCls: `${prefixCls}-time-picker`,
             placeholder: locale.timePickerLocale.placeholder,
-            transitionName: 'slide-up',
+            transitionName: 'ant-slide-up',
           },
           class: timePickerCls,
           on: {