修改部分storybook样式 review by qiw

SuperMap · Feb 6, 2024 · 76baa5b · 76baa5b
1 parent b33ac93
commit 76baa5b
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 21 deletions.
diff --git a/src/common/_utils/style/theme/theme.json b/src/common/_utils/style/theme/theme.json
@@ -57,6 +57,7 @@
     "disabledBgColor": "var(--container-disabled)",
     "disabledBorderColor": "var(--container-disabled)",
     "disabledTextColor": "var(--alpha25)",
+    "disabledIconColor": "var(--alpha15)",
     "borderColorBase": "var(--alpha15)",
     "borderColorSplit": "var(--alpha15)",
     "shadowColor": "var(--shadow-tooltip)",
@@ -173,6 +174,7 @@
     "disabledBgColor": "var(--container-disabled-bg)",
     "disabledBorderColor": "var(--container-disabled-border)",
     "disabledTextColor": "var(--alpha25)",
+    "disabledIconColor": "var(--alpha15)",
     "borderColorBase": "var(--alpha15)",
     "borderColorSplit": "var(--alpha15)",
     "shadowColor": "var(--alpha15)",
@@ -257,6 +259,7 @@
     "disabledBgColor": "rgba(255, 255, 255, 0.08)",
     "disabledBorderColor": "rgba(255, 255, 255, 0.08)",
     "disabledTextColor": "rgba(255, 255, 255, 0.25)",
+    "disabledIconColor": "rgba(255, 255, 255, 0.15)",
     "borderColorBase": "rgba(255, 255, 255, 0.15)",
     "handleColor": "#d9d9d9",
     "borderColorSplit": "rgba(255, 255, 255, 0.12)",

diff --git a/src/common/_utils/style/theme/theme.scss b/src/common/_utils/style/theme/theme.scss
@@ -114,6 +114,7 @@ $background-color-base: var(--background-base);
 
 // Disabled states
 $disabled-color: var(--disabled-text-color);
+$disabled-icon-color: var(--disabled-icon-color);
 $disabled-bg: var(--disabled-bg-color);
 $disabled-color-dark: rgba($white, 0.35);
 $disabled-border-color: var(--disabled-border-color);
@@ -168,6 +169,7 @@ $btn-height-md: 28px;
 
 // Checkbox
 $checkbox-color: $primary-6;
+$checkbox-selected-hover-color: $primary-7;
 $checkbox-check-color: #fff;
 
 // Descriptions
@@ -185,6 +187,7 @@ $empty-description-color: var(--empty-description-color);
 
 // Radio
 $radio-dot-color: $primary-6;
+$radio-dot-checked-hover-color: $primary-7;
 $radio-inner-disabled-bg: var(--radio-inner-disabled-bg);
 
 // Radio buttons
@@ -228,6 +231,7 @@ $input-read-only-color: var(--read-only-color);
 $input-read-only-bg: var(--read-only-bg);
 $input-with-unit-color: var(--with-unit-color);
 $input-with-unit-disabled-color: var(--with-unit-disabled-color);
+$input-icon-color: var(--alpha45);
 
 // Form
 $label-required-color: $highlight-color;
@@ -324,6 +328,9 @@ $tag-default-color: $text-color;
 $time-picker-selected-bg: $selected-color;
 $time-picker-item-hover-bg: var(--hover-bg);
 
+// DatePicker
+$date-item-hover-bg: var(--hover-bg);
+
 // Badge
 $badge-text-color: $component-background;
 

diff --git a/src/common/checkbox/style/checkbox.scss b/src/common/checkbox/style/checkbox.scss
@@ -4,14 +4,33 @@
 
 @include b(checkbox) {
   $prefix: &;
-  &-wrapper:hover &-inner, &:hover &-inner, &-input:focus + &-inner {
+  &-wrapper:hover &-inner, &:hover &-inner {
     border-color: $hover-color;
   }
-  &-wrapper-checked {
+  &-wrapper {
     color: $text-color-active;
   }
+  &-checked::after {
+    border: none;
+  }
+  &-wrapper:not(&-wrapper-disabled):hover {
+    #{$prefix}-indeterminate {
+      #{$prefix}-inner::after {
+        background-color: $hover-color;
+      }
+    }
+  }
+  &-wrapper-checked:not(&-wrapper-disabled),
+  &-checked:not(&-disabled) {
+    &:hover {
+      #{$prefix}-inner{
+        background-color:  $checkbox-selected-hover-color;
+        border-color:  $checkbox-selected-hover-color;
+      }
+    }
+  }
   @include e(inner, '-') {
-    background-color: $component-background;
+    background-color: transparent;
   }
   @include e(disabled, '-') {
     #{$prefix}-inner {

diff --git a/src/common/date-picker/DatePicker.vue b/src/common/date-picker/DatePicker.vue
@@ -4,7 +4,11 @@ import { DatePickerProps } from 'ant-design-vue/es/date-picker/interface';
 import Base from './BaseMixin.vue';
 
 export const datePickerTypes = {
-  ...DatePickerProps()
+  ...DatePickerProps(),
+  align: {
+    type: Object,
+    default: () => ({ points: ['tl', 'bl'], offset: [0, 4] })
+  }
 };
 
 export default {

diff --git a/src/common/date-picker/MonthPicker.vue b/src/common/date-picker/MonthPicker.vue
@@ -4,7 +4,11 @@ import { MonthPickerProps } from 'ant-design-vue/es/date-picker/interface';
 import Base from './BaseMixin.vue';
 
 export const monthPickerTypes = {
-  ...MonthPickerProps()
+  ...MonthPickerProps(),
+  align: {
+    type: Object,
+    default: () => ({ points: ['tl', 'bl'], offset: [0, 4] })
+  }
 };
 
 export default {

diff --git a/src/common/date-picker/RangePicker.vue b/src/common/date-picker/RangePicker.vue
@@ -4,7 +4,11 @@ import { RangePickerProps } from 'ant-design-vue/es/date-picker/interface';
 import Base from './BaseMixin.vue';
 
 export const rangePickerTypes = {
-  ...RangePickerProps()
+  ...RangePickerProps(),
+  align: {
+    type: Object,
+    default: () => ({ points: ['tl', 'bl'], offset: [0, 4] })
+  }
 };
 
 export default {

diff --git a/src/common/date-picker/WeekPicker.vue b/src/common/date-picker/WeekPicker.vue
@@ -4,7 +4,11 @@ import { WeekPickerProps } from 'ant-design-vue/es/date-picker/interface';
 import Base from './BaseMixin.vue';
 
 export const weekPickerTypes = {
-  ...WeekPickerProps()
+  ...WeekPickerProps(),
+  align: {
+    type: Object,
+    default: () => ({ points: ['tl', 'bl'], offset: [0, 4] })
+  }
 };
 
 export default {

diff --git a/src/common/date-picker/style/date-picker.scss b/src/common/date-picker/style/date-picker.scss
@@ -5,6 +5,9 @@
 
 @include b(calendar-picker) {
   $calendar-picker-prefix: &;
+  &-icon {
+    color: $input-icon-color;
+  }
   &:hover {
     #{$calendar-picker-prefix}-clear + #{$calendar-picker-prefix}-icon {
       opacity: 0;
@@ -25,6 +28,12 @@
   background-color: $select-dropdown-bg;
   border: none;
 
+  @include e(panel, '-') {
+    #{$prefix}-input-wrap {
+      display: none;
+    }
+  }
+
   @include e(input, '-') {
     background: $select-dropdown-bg;
   }
@@ -35,7 +44,7 @@
 
   @include e(date, '-') {
     &:hover {
-      background: $selected-color;
+      background: $date-item-hover-bg;
     }
     &:active {
       background: $click-color;
@@ -77,7 +86,6 @@
 
   @include e(footer, '-') {
     &-btn {
-      text-align: right;
       padding-right: 10px;
       a {
         color: $primary-color;
@@ -122,7 +130,8 @@
       color: $text-color-secondary;
     }
     &-middle {
-      color: $text-color-secondary;
+      // color: $text-color-secondary;
+      display: none;
     }
     // #{$prefix}-today
     //   :not(#{$prefix}-disabled-cell)
@@ -155,6 +164,12 @@
     }
 
     &#{$prefix}-time {
+      #{$prefix}-time-picker {
+        top: 40px;
+        #{$prefix}-time-picker-panel {
+          margin-top: -40px;
+        }
+      }
       #{$prefix}-time-picker-combobox {
         background: $select-dropdown-bg;
       }
@@ -174,14 +189,14 @@
 
         li {
           &:hover {
-            background: $selected-color;
+            background: $time-picker-item-hover-bg;
           }
           &:focus {
             background: $click-color;
             color: #fff;
           }
           &#{$prefix-time-picker-select}-option-selected {
-            background: $primary-color;
+            background: $selected-color;
             color: #fff;
           }
           &#{$prefix-time-picker-select}-option-disabled {

diff --git a/src/common/radio/style/radio.scss b/src/common/radio/style/radio.scss
@@ -4,13 +4,19 @@
 @include b(radio) {
   $prefix: &;
 
-  &-wrap:hover &-inner,
+  &-wrapper:hover &-inner,
   &:hover &-inner,
   &-input:focus + &-inner {
     border-color: $radio-dot-color;
   }
   &-wrapper {
     color: $text-color-active;
+    &:hover #{$prefix}-checked #{$prefix}-inner{
+      border-color: $radio-dot-checked-hover-color;
+      &::after {
+        background-color: $radio-dot-checked-hover-color;
+      }
+    }
   }
   @include e(input, '-') {
     &:focus {
@@ -28,6 +34,7 @@
     }
   }
   @include e(inner, '-') {
+    background-color: transparent;
     &::after {
       background-color: $radio-dot-color;
     }
@@ -42,8 +49,10 @@
   }
   @include e(button-wrapper, '-') {
     $prefix-button-wrapper: &;
+    background-color: transparent;
     &:hover {
-      color: $radio-dot-color;
+      color: $radio-button-hover-color;
+      border-color: $radio-button-hover-color;
     }
     &:focus-within {
       outline: none;

diff --git a/src/common/select/Select.vue b/src/common/select/Select.vue
@@ -9,7 +9,8 @@ export const selectTypes = {
   showSearch: VueTypes.bool.def(false),
   transitionName: VueTypes.string.def('slide-up'),
   choiceTransitionName: VueTypes.string.def('zoom'),
-  size: VueTypes.oneOf(['small', 'large', 'default', 'middle'])
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle']),
+  readOnly: VueTypes.bool.def(false)
 };
 
 export default {
@@ -33,12 +34,14 @@ export default {
     },
     extralProps() {
       return {
-        size: this.size === 'middle' ? undefined : this.size
+        size: this.size === 'middle' ? undefined : this.size,
+        disabled: this.readOnly || this.disabled
       };
     },
     componentClass() {
       return {
-        'sm-component-select-md': this.size === 'middle'
+        'sm-component-select-md': this.size === 'middle',
+        'sm-component-select-readonly': this.readOnly
       };
     }
   }

diff --git a/src/common/select/style/select.scss b/src/common/select/style/select.scss
@@ -4,6 +4,9 @@
 
 @include b(select) {
   $prefix: &;
+  &:not(&-disabled) {
+    color: $text-color-active;
+  }
 
   @include e(md, '-') {
     #{$prefix}-selection--single {
@@ -40,9 +43,6 @@
         opacity: 0;
       }
     }
-    &__rendered {
-      color: $text-color-active;
-    }
 
     &__clear {
       &:hover {
@@ -83,9 +83,12 @@
     }
 
     #{$prefix}-arrow {
-      color: $disabled-color;
+      color: $disabled-icon-color;
     }
   }
+  @include e(readonly, '-') {
+    color: $text-color;
+  }
 
   @include e(dropdown, '-') {
     $prefix-dropdown: &;
@@ -94,6 +97,7 @@
         color: $text-color-secondary;
       }
       &-item {
+        color: $text-color-active;
         &:hover:not(&-disabled) {
           background-color: $select-item-hover-bg;
         }

diff --git a/stories/Select/Select.stories.js b/stories/Select/Select.stories.js
@@ -30,6 +30,11 @@ export const BasicSelect = () => ({
         Lucy
       </sm-select-option>
     </sm-select>
+    <sm-select default-value="lucy" style="width: 120px" readOnly>
+      <sm-select-option value="lucy">
+        Lucy
+      </sm-select-option>
+    </sm-select>
     <sm-select default-value="lucy" style="width: 120px" loading>
       <sm-select-option value="lucy">
         Lucy