@wangxinowo/vue-datepicker-next 1.0.1 → 1.0.2

package/dist/vue-datepicker-next.min.css

@@ -2024,6 +2024,67 @@ html {
   display: inline-flex;
   align-items: center;
   width: 100%;
+  min-width: 280px;
+  height: 32px;
+  padding: 0 12px;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+.ant-calendar-range-picker-input-wrapper:hover {
+  border-color: #40a9ff;
+}
+.ant-calendar-picker-focused .ant-calendar-range-picker-input-wrapper,
+.ant-calendar-picker:focus-within .ant-calendar-range-picker-input-wrapper {
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  outline: 0;
+}
+.ant-calendar-picker-borderless .ant-calendar-range-picker-input-wrapper {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+.ant-calendar-range-picker-input-wrapper[disabled],
+.ant-calendar-picker-disabled .ant-calendar-range-picker-input-wrapper {
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+  opacity: 1;
+}
+.ant-calendar-picker-status-error .ant-calendar-range-picker-input-wrapper {
+  border-color: #f5222d;
+}
+.ant-calendar-picker-status-error .ant-calendar-range-picker-input-wrapper:hover {
+  border-color: #f5222d;
+}
+.ant-calendar-picker-status-error.ant-calendar-picker-focused .ant-calendar-range-picker-input-wrapper,
+.ant-calendar-picker-status-error:focus-within .ant-calendar-range-picker-input-wrapper {
+  border-color: #f5222d;
+  box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.ant-calendar-picker-status-warning .ant-calendar-range-picker-input-wrapper {
+  border-color: #faad14;
+}
+.ant-calendar-picker-status-warning .ant-calendar-range-picker-input-wrapper:hover {
+  border-color: #faad14;
+}
+.ant-calendar-picker-status-warning.ant-calendar-picker-focused .ant-calendar-range-picker-input-wrapper,
+.ant-calendar-picker-status-warning:focus-within .ant-calendar-range-picker-input-wrapper {
+  border-color: #faad14;
+  box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.ant-calendar-picker-status-success .ant-calendar-range-picker-input-wrapper {
+  border-color: #52c41a;
+}
+.ant-calendar-picker-status-success .ant-calendar-range-picker-input-wrapper:hover {
+  border-color: #52c41a;
+}
+.ant-calendar-picker-status-success.ant-calendar-picker-focused .ant-calendar-range-picker-input-wrapper,
+.ant-calendar-picker-status-success:focus-within .ant-calendar-range-picker-input-wrapper {
+  border-color: #52c41a;
+  box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.2);
 }
 .ant-calendar-range-picker-input {
   width: 44%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangxinowo/vue-datepicker-next",
-  "version": "1.0.1",
+  "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",

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

@@ -6,6 +6,86 @@
   display: inline-flex;
   align-items: center;
   width: 100%;
+  min-width: 280px;
+  height: @input-height-base;
+  padding: 0 @control-padding-horizontal;
+  background-color: @input-bg;
+  border: @border-width-base @border-style-base @input-border-color;
+  border-radius: @border-radius-base;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: @input-hover-border-color;
+  }
+
+  // 聚焦状态
+  .@{calendar-prefix-cls}-picker-focused &,
+  .@{calendar-prefix-cls}-picker:focus-within & {
+    border-color: @primary-color;
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@primary-color, 20%);
+    outline: 0;
+  }
+
+  // 无边框模式
+  .@{calendar-prefix-cls}-picker-borderless & {
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  // 禁用状态
+  &[disabled],
+  .@{calendar-prefix-cls}-picker-disabled & {
+    background-color: @input-disabled-bg;
+    border-color: @input-border-color;
+    cursor: not-allowed;
+    opacity: 1;
+  }
+
+  // Error 状态
+  .@{calendar-prefix-cls}-picker-status-error & {
+    border-color: @error-color;
+
+    &:hover {
+      border-color: @error-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-picker-status-error.@{calendar-prefix-cls}-picker-focused &,
+  .@{calendar-prefix-cls}-picker-status-error:focus-within & {
+    border-color: @error-color;
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@error-color, 20%);
+  }
+
+  // Warning 状态
+  .@{calendar-prefix-cls}-picker-status-warning & {
+    border-color: @warning-color;
+
+    &:hover {
+      border-color: @warning-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-picker-status-warning.@{calendar-prefix-cls}-picker-focused &,
+  .@{calendar-prefix-cls}-picker-status-warning:focus-within & {
+    border-color: @warning-color;
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@warning-color, 20%);
+  }
+
+  // Success 状态
+  .@{calendar-prefix-cls}-picker-status-success & {
+    border-color: @success-color;
+
+    &:hover {
+      border-color: @success-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-picker-status-success.@{calendar-prefix-cls}-picker-focused &,
+  .@{calendar-prefix-cls}-picker-status-success:focus-within & {
+    border-color: @success-color;
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@success-color, 20%);
+  }
 }
 
 .@{calendar-prefix-cls}-range-picker-input {