@wangxinowo/vue-datepicker-next 1.0.2 → 1.0.5

package/package.json

@@ -1,88 +1,88 @@
-{
-  "name": "@wangxinowo/vue-datepicker-next",
-  "version": "1.0.2",
-  "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",
-  "typings": "types/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "types"
-  ],
-  "scripts": {
-    "dev": "webpack-dev-server --config webpack.dev.config.js --mode development",
-    "build": "npm run build:dist",
-    "build:dist": "webpack --config webpack.config.js --mode production",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [
-    "vue",
-    "datepicker",
-    "date-picker",
-    "rangepicker",
-    "calendar",
-    "ant-design"
-  ],
-  "author": "wangxinowo",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/wangxinowo/vue-datepicker-next.git"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.0"
-  },
-  "dependencies": {
-    "@ant-design/icons-vue": "^2.0.0",
-    "add-dom-event-listener": "^1.1.0",
-    "array-tree-filter": "^2.1.0",
-    "classnames": "^2.2.5",
-    "component-classes": "^1.2.6",
-    "dayjs": "^1.11.19",
-    "dom-align": "^1.10.4",
-    "dom-scroll-into-view": "^2.0.0",
-    "lodash": "^4.17.5",
-    "moment": "^2.21.0",
-    "omit.js": "^2.0.2",
-    "raf": "^3.4.1",
-    "resize-observer-polyfill": "^1.5.1",
-    "shallowequal": "^1.0.2",
-    "vue-ref": "^2.0.0",
-    "warning": "^4.0.0"
-  },
-  "devDependencies": {
-    "@babel/plugin-syntax-jsx": "^7.27.1",
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-runtime": "^6.26.0",
-    "cross-env": "^7.0.0",
-    "css-loader": "^3.0.0",
-    "html-webpack-plugin": "^4.5.2",
-    "ignore-loader": "^0.1.2",
-    "less": "^3.9.0",
-    "less-loader": "^6.0.0",
-    "mini-css-extract-plugin": "^0.10.0",
-    "vue": "^2.6.11",
-    "vue-loader": "^15.6.2",
-    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.28.4",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.11.3"
-  },
-  "sideEffects": [
-    "*.less",
-    "*.css",
-    "**/style/*"
-  ]
-}
+{
+  "name": "@wangxinowo/vue-datepicker-next",
+  "version": "1.0.5",
+  "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",
+  "typings": "types/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "scripts": {
+    "dev": "webpack-dev-server --config webpack.dev.config.js --mode development",
+    "build": "npm run build:dist",
+    "build:dist": "webpack --config webpack.config.js --mode production",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "datepicker",
+    "date-picker",
+    "rangepicker",
+    "calendar",
+    "ant-design"
+  ],
+  "author": "wangxinowo",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wangxinowo/vue-datepicker-next.git"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^2.0.0",
+    "add-dom-event-listener": "^1.1.0",
+    "array-tree-filter": "^2.1.0",
+    "classnames": "^2.2.5",
+    "component-classes": "^1.2.6",
+    "dayjs": "^1.11.19",
+    "dom-align": "^1.10.4",
+    "dom-scroll-into-view": "^2.0.0",
+    "lodash": "^4.17.5",
+    "moment": "^2.21.0",
+    "omit.js": "^2.0.2",
+    "raf": "^3.4.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "shallowequal": "^1.0.2",
+    "vue-ref": "^2.0.0",
+    "warning": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-jsx": "^7.27.1",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-runtime": "^6.26.0",
+    "cross-env": "^7.0.0",
+    "css-loader": "^3.0.0",
+    "html-webpack-plugin": "^4.5.2",
+    "ignore-loader": "^0.1.2",
+    "less": "^3.9.0",
+    "less-loader": "^6.0.0",
+    "mini-css-extract-plugin": "^0.10.0",
+    "vue": "^2.6.11",
+    "vue-loader": "^15.6.2",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.28.4",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.11.3"
+  },
+  "sideEffects": [
+    "*.less",
+    "*.css",
+    "**/style/*"
+  ]
+}

package/src/components/calendar/locale/zh_CN.js

@@ -0,0 +1,2 @@
+import zh_CN from '../../date-picker/locale/zh_CN';
+export default zh_CN;

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

@@ -1,102 +1,148 @@
-/**
- * PresetPanel - 预设日期范围面板组件
- * 用于显示快捷选择的预设日期范围
- */
-
-import PropTypes from '../_util/vue-types';
-import classNames from 'classnames';
-
-export default {
-  name: 'PresetPanel',
-  props: {
-    /**
-     * 样式前缀
-     */
-    prefixCls: PropTypes.string,
-
-    /**
-     * 预设列表
-     * @type {Array<{label: string|VNode, value: Array|Function}>}
-     */
-    presets: PropTypes.array.def([]),
-
-    /**
-     * 选中的预设索引
-     */
-    selectedIndex: PropTypes.number.def(-1),
-  },
-
-  methods: {
-    /**
-     * 获取预设的实际值
-     * @param {Object} preset - 预设项
-     * @returns {Array} 日期范围值
-     */
-    getPresetValue(preset) {
-      if (!preset) return null;
-      const { value } = preset;
-      return typeof value === 'function' ? value() : value;
-    },
-
-    /**
-     * 点击预设项
-     * @param {Object} preset - 预设项
-     * @param {number} index - 索引
-     */
-    handleClick(preset, index) {
-      const value = this.getPresetValue(preset);
-      this.$emit('select', value, preset, index);
-    },
-
-    /**
-     * 鼠标进入预设项
-     * @param {Object} preset - 预设项
-     * @param {number} index - 索引
-     */
-    handleMouseEnter(preset, index) {
-      const value = this.getPresetValue(preset);
-      this.$emit('hover', value, preset, index);
-    },
-
-    /**
-     * 鼠标离开预设项
-     */
-    handleMouseLeave() {
-      this.$emit('hover', null, null, -1);
-    },
-  },
-
-  render() {
-    const { prefixCls, presets, selectedIndex } = this;
-
-    if (!presets || presets.length === 0) {
-      return null;
-    }
-
-    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>
-    );
-  },
-};
+/**
+ * PresetPanel - 预设日期范围面板组件
+ * 用于显示快捷选择的预设日期范围
+ * 支持两种显示模式：panel（左侧面板）和 footer（底部按钮）
+ */
+
+import PropTypes from '../_util/vue-types';
+import classNames from 'classnames';
+
+export default {
+  name: 'PresetPanel',
+  props: {
+    /**
+     * 样式前缀
+     */
+    prefixCls: PropTypes.string,
+
+    /**
+     * 预设列表
+     * @type {Array<{label: string|VNode, value: Array|Function}>}
+     */
+    presets: PropTypes.array.def([]),
+
+    /**
+     * 选中的预设索引
+     */
+    selectedIndex: PropTypes.number.def(-1),
+
+    /**
+     * 显示模式
+     * - panel: 左侧面板模式（垂直列表）
+     * - footer: 底部模式（水平按钮）
+     */
+    mode: PropTypes.oneOf(['panel', 'footer']).def('footer'),
+  },
+
+  methods: {
+    /**
+     * 获取预设的实际值
+     * @param {Object} preset - 预设项
+     * @returns {Array} 日期范围值
+     */
+    getPresetValue(preset) {
+      if (!preset) return null;
+      const { value } = preset;
+      return typeof value === 'function' ? value() : value;
+    },
+
+    /**
+     * 点击预设项
+     * @param {Object} preset - 预设项
+     * @param {number} index - 索引
+     */
+    handleClick(preset, index) {
+      const value = this.getPresetValue(preset);
+      this.$emit('select', value, preset, index);
+    },
+
+    /**
+     * 鼠标进入预设项
+     * @param {Object} preset - 预设项
+     * @param {number} index - 索引
+     */
+    handleMouseEnter(preset, index) {
+      const value = this.getPresetValue(preset);
+      this.$emit('hover', value, preset, index);
+    },
+
+    /**
+     * 鼠标离开预设项
+     */
+    handleMouseLeave() {
+      this.$emit('hover', null, null, -1);
+    },
+
+    /**
+     * 渲染底部按钮模式
+     */
+    renderFooterMode() {
+      const { prefixCls, presets, selectedIndex } = this;
+      const footerCls = `${prefixCls}-presets-footer`;
+
+      return (
+        <div class={footerCls}>
+          {presets.map((preset, index) => {
+            const btnCls = classNames(`${footerCls}-btn`, {
+              [`${footerCls}-btn-selected`]: index === selectedIndex,
+            });
+
+            return (
+              <span
+                key={index}
+                class={btnCls}
+                onClick={() => this.handleClick(preset, index)}
+                onMouseenter={() => this.handleMouseEnter(preset, index)}
+                onMouseleave={this.handleMouseLeave}
+              >
+                {preset.label}
+              </span>
+            );
+          })}
+        </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/MonthPanel.less

@@ -84,3 +84,18 @@
     cursor: pointer;
   }
 }
+
+// 范围选择的起始/结束单元格样式
+.@{calendar-prefix-cls}-month-panel-selected-start-cell,
+.@{calendar-prefix-cls}-month-panel-selected-end-cell {
+  .@{calendar-prefix-cls}-month-panel-month {
+    color: @text-color-inverse;
+    background: @primary-color;
+    border-radius: @border-radius-sm;
+
+    &:hover {
+      color: @text-color-inverse;
+      background: @primary-5;
+    }
+  }
+}