【fix】storybook修改输入框、数字输入框样式 review by qw cxh

SuperMap · Feb 5, 2024 · b33ac93 · b33ac93
1 parent 1964f1e
commit b33ac93
Show file tree

Hide file tree

Showing 12 changed files with 188 additions and 28 deletions.
diff --git a/.storybook/lang/locale/en.json b/.storybook/lang/locale/en.json
@@ -94,14 +94,19 @@
       "searchBox": "Search box",
       "size": "Size",
       "textArea": "TextArea",
-      "passwordBox": "Password Box"
+      "passwordBox": "Password Box",
+      "error": "Error",
+      "disabled": "Disabled",
+      "readOnly": "readOnly",
+      "unit": "Input with units"
     },
     "inputNumber": {
       "title": "InputNumber",
       "size": "Size",
       "disabled":"Disabled",
       "formatter": "Formatter",
-      "decimal": "Decimal"
+      "decimal": "Decimal",
+      "error": "Error"
     },
     "layout": {
       "title": "Layout"

diff --git a/.storybook/lang/locale/zh.json b/.storybook/lang/locale/zh.json
@@ -94,14 +94,19 @@
       "searchBox": "搜索框",
       "size": "大小",
       "textArea": "文本域",
-      "passwordBox": "密码框"
+      "passwordBox": "密码框",
+      "error": "错误",
+      "disabled": "不可用",
+      "readOnly": "只读",
+      "unit": "带单位的输入框"
     },
     "inputNumber": {
       "title": "InputNumber 数字输入框",
       "size": "大小",
       "disabled":"不可用",
       "formatter": "格式化",
-      "decimal": "小数"
+      "decimal": "小数",
+      "error": "错误"
     },
     "layout": {
       "title": "Layout 布局"

diff --git a/src/common/_utils/style/theme/theme.json b/src/common/_utils/style/theme/theme.json
@@ -49,7 +49,7 @@
     "backgroundBase": "rgba(0, 0, 0, 0.08)",
     "selectedColor": "rgba(52, 153, 229, 0.15)",
     "hoverColor": "#65C0FC",
-    "hoverBg": "#65C0FC",
+    "hoverBg": "var(--alpha04)",
     "clickColor": "#0371C3",
     "iconColorHover": "rgba(255, 255, 255, 0.75)",
     "headingColor": "var(--alpha85)",
@@ -111,7 +111,13 @@
       "#8dc1a9",
       "#ea7e53"
     ],
-    "defaultButtonBorder": "var(--alpha25)"
+    "defaultButtonBorder": "var(--alpha25)",
+    "errorColor": "#E04C40",
+    "readOnlyBorderColor": "var(--alpha08)",
+    "readOnlyColor": "var(--alpha65)",
+    "readOnlyBg": "var(--alpha08)",
+    "withUnitColor": "var(--alpha65)",
+    "withUnitDisabledColor": "var(--alpha25)"
   },
   {
     "title": "经典浅色",
@@ -159,7 +165,7 @@
     "backgroundBase": "#F5F5F5",
     "selectedColor": "rgba(0, 129, 226, 0.15)",
     "hoverColor": "#008EF0",
-    "hoverBg": "#008EF0",
+    "hoverBg": "var(--alpha04)",
     "clickColor": "#006ECF",
     "iconColorHover": "rgba(0, 0, 0, 0.75)",
     "headingColor": "var(--alpha85)",
@@ -221,7 +227,13 @@
       "#a0a7e6",
       "#c4ebad"
     ],
-    "defaultButtonBorder": "var(--alpha15)"
+    "defaultButtonBorder": "var(--alpha15)",
+    "errorColor": "#E41318",
+    "readOnlyBorderColor": "var(--alpha15)",
+    "readOnlyColor": "var(--alpha65)",
+    "readOnlyBg": "var(--alpha04)",
+    "withUnitColor": "var(--alpha25)",
+    "withUnitDisabledColor": "var(--alpha25)"
   },
   {
     "title": "经典暖灰",

diff --git a/src/common/_utils/style/theme/theme.scss b/src/common/_utils/style/theme/theme.scss
@@ -220,7 +220,14 @@ $input-number-handler-bg: $component-background;
 $input-number-handler-border-color: $border-color-base;
 $input-addon-bg: $background-color-light;
 $input-disabled-bg: $disabled-bg;
+$input-disabled-color: $disabled-bg;
 $input-height-md: 28px;
+$input-error-color: var(--error-color);
+$input-read-only-border-color: var(--read-only-border-color);
+$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);
 
 // Form
 $label-required-color: $highlight-color;
@@ -367,7 +374,7 @@ $switch-loading-text-color: rgba(0, 0, 0, 0.65);
 
 // Pagination
 $pagination-border-default-color: var(--pagination-border-default-color);
-$pagination-border-hover-color: var(--hover-bg);
+$pagination-border-hover-color: var(--hover-color);
 $pagination-disabled-active-bg-color: var(--disabled-darken-bg-color10);
 $pagination-item-bg-active: $primary-6;
 $pagination-ellipsis-color: var(--pagination-ellipsis-color);

diff --git a/src/common/input-number/InputNumber.vue b/src/common/input-number/InputNumber.vue
@@ -5,7 +5,8 @@ import Base from 'vue-iclient/src/common/input/BaseMixin.vue';
 
 export const inputNumberTypes = {
   ...InputNumberProps,
-  size: VueTypes.oneOf(['small', 'large', 'default', 'middle'])
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle']),
+  error: VueTypes.bool.def(false)
 };
 
 export default {
@@ -34,7 +35,8 @@ export default {
     },
     componentClass() {
       return {
-        'sm-component-input-number-md': this.size === 'middle'
+        'sm-component-input-number-md': this.size === 'middle',
+        'sm-component-input-number-error': this.error === true
       };
     }
   }

diff --git a/src/common/input-number/style/input-number.scss b/src/common/input-number/style/input-number.scss
@@ -3,8 +3,11 @@
 @import '../../input/style/mixin.scss';
 
 @include b(input-number) {
-  @include focus($primary-5, $primary-shadow-color);
-  &-focused {
+  @include focus-active($primary-5, $primary-shadow-color);
+  &-disabled {
+    @include disabled();
+  }
+  &-focused{
     @include focus-color($primary-5, $primary-shadow-color);
   }
   &-handler {
@@ -17,6 +20,20 @@
       color: $text-color-secondary;
     }
   }
+  @include e(error, '-') {
+    border-color: $input-error-color;
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: $input-error-color;
+    }
+    @include focus-active-no-shadow();
+  }
+  @at-root {
+    #{&}-focused#{&}-error{
+      box-shadow: none;
+    }
+  }
   &-md {
     @include input-md();
     input {

diff --git a/src/common/input/Input.vue b/src/common/input/Input.vue
@@ -6,7 +6,9 @@ import Base from './BaseMixin.vue';
 
 export const inputTypes = {
   ...inputProps,
-  size: VueTypes.oneOf(['small', 'large', 'default', 'middle'])
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle']),
+  error: VueTypes.bool.def(false),
+  unit: VueTypes.string
 };
 
 export default {
@@ -17,12 +19,15 @@ export default {
   computed: {
     extralProps() {
       return {
-        size: this.size === 'middle' ? undefined : this.size
+        size: this.size === 'middle' ? undefined : this.size,
+        addonAfter: this.unit || this.addonAfter
       };
     },
     componentClass() {
       return {
-        'sm-component-input-affix-wrapper-md': this.size === 'middle'
+        'sm-component-input-affix-wrapper-md': this.size === 'middle',
+        'sm-component-input-error': this.error,
+        'sm-component-input-unit': this.unit
       };
     }
   },

diff --git a/src/common/input/TextArea.vue b/src/common/input/TextArea.vue
@@ -1,16 +1,25 @@
 <script lang="ts">
 import TextArea from 'ant-design-vue/es/input/TextArea';
 import inputProps from 'ant-design-vue/es/input/inputProps';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
 import Base from './BaseMixin.vue';
 
 export const textAreaTypes = {
-  ...inputProps
+  ...inputProps,
+  error: VueTypes.bool.def(false)
 };
 
 export default {
   name: 'SmTextarea',
   defaultComponent: TextArea,
   mixins: [Base],
-  props: textAreaTypes
+  props: textAreaTypes,
+  computed: {
+    componentClass() {
+      return {
+        'sm-component-input-error': this.error === true
+      };
+    }
+  }
 };
 </script>
diff --git a/src/common/input/style/input.scss b/src/common/input/style/input.scss
@@ -4,10 +4,39 @@
 
 @include b(input) {
   $input-prefix: &;
-  @include focus($primary-5, $primary-shadow-color);
+  @include focus-active($primary-5, $primary-shadow-color);
   &[disabled] {
     @include disabled();
   }
+  @include e(error, '-') {
+    border-color: $input-error-color;
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: $input-error-color;
+    }
+    @include focus-active-no-shadow();
+  }
+  &[readOnly=true] {
+    color: $input-read-only-color;
+    border-color: $input-read-only-border-color;
+    background-color: $input-read-only-bg;
+    &:hover {
+      border-color: $primary-5;
+    }
+    @include focus-active($primary-5, $primary-shadow-color);
+  }
+  @include e(unit, '-') {
+    #{$input-prefix}-group-addon {
+      color: $input-with-unit-color;
+      background-color: $input-bg;
+      border: $border-color-base;
+    }
+    #{$input-prefix}-disabled + #{$input-prefix}-group-addon {
+      color: $input-with-unit-disabled-color;
+      background-color: $input-addon-bg;
+    }
+  }
   @include e(disabled, '-') {
     @include disabled();
   }

diff --git a/src/common/input/style/mixin.scss b/src/common/input/style/mixin.scss
@@ -2,9 +2,15 @@
   border-color: $border;
   box-shadow: 0 0 0 2px $shadow;
 }
-
-@mixin focus($border, $shadow) {
-  &:focus {
+@mixin focus-active-no-shadow {
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+}
+@mixin focus-active($border, $shadow) {
+  &:focus,
+  &:active {
     @include focus-color($border, $shadow);
   }
 }

diff --git a/stories/Input/Input.stories.js b/stories/Input/Input.stories.js
@@ -183,3 +183,59 @@ export const PasswordInput = () => ({
 PasswordInput.story = {
   name: toI18n('basicComponent.input.passwordBox')
 };
+
+export const ErrorInput = () => ({
+  template: `
+  <div>
+    <sm-input style="width:160px;" :error="true" placeholder="Error"/>
+    <br /><br />
+    <sm-textarea :error="true" placeholder="textarea with clear icon"/>
+  </div>
+  `
+});
+ErrorInput.story = {
+  name: toI18n('basicComponent.input.error')
+};
+
+export const Disabled = () => ({
+  template: `
+  <div>
+    <sm-input style="width:160px;" disabled placeholder="Basic input" value="123"></sm-input>
+    <br /><br />
+    <sm-textarea disabled placeholder="textarea"/>
+    <br /><br />
+    <sm-input style="width:160px;" unit="RMB" disabled placeholder="Basic input"/>
+  </div>
+  `
+});
+Disabled.story = {
+  name: toI18n('basicComponent.input.disabled')
+};
+
+export const ReadOnly = () => ({
+  template: `
+  <div>
+    <sm-input style="width:160px;" readOnly placeholder="readOnly" value="123"/>
+    <br />
+    <br />
+    <sm-textarea readOnly placeholder="readOnly" value="123"/>
+    <br />
+    <br />
+    <sm-input style="width:160px;" unit="RMB" readOnly placeholder="Basic input" value="123"/>
+  </div>
+  `
+});
+ReadOnly.story = {
+  name: toI18n('basicComponent.input.readOnly')
+};
+
+export const Unit = () => ({
+  template: `
+  <div>
+    <sm-input style="width:160px;" unit="RMB" placeholder="Basic input"/>
+  </div>
+  `
+});
+Unit.story = {
+  name: toI18n('basicComponent.input.unit')
+};
diff --git a/stories/InputNumber/InputNumber.stories.js b/stories/InputNumber/InputNumber.stories.js
@@ -37,16 +37,16 @@ SizeInputNumber.story = {
   name: toI18n('basicComponent.inputNumber.size')
 };
 
-export const disableInputNumber = () => ({
+export const DisableInputNumber = () => ({
   template: `
         <sm-input-number :disabled="true" :min="1" :max="100000" :default-value="3" />
       `
 });
-disableInputNumber.story = {
+DisableInputNumber.story = {
   name: toI18n('basicComponent.inputNumber.disabled')
 };
 
-export const formatterInputNumber = () => ({
+export const FormatterInputNumber = () => ({
   computed: {
     formatterDollar() {
       return value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
@@ -68,13 +68,20 @@ export const formatterInputNumber = () => ({
   </div>
         `
 });
-formatterInputNumber.story = {
+FormatterInputNumber.story = {
   name: toI18n('basicComponent.inputNumber.formatter')
 };
 
-export const decimalInputNumber = () => ({
+export const DecimalInputNumber = () => ({
   template: `<sm-input-number :min="0" :max="10" :step="0.1" :default-value="3"/>`
 });
-decimalInputNumber.story = {
+DecimalInputNumber.story = {
   name: toI18n('basicComponent.inputNumber.decimal')
 };
+
+export const ErrorInputNumber = () => ({
+  template: `<sm-input-number :error="true" :min="0" :max="10" :step="0.1" :default-value="3"/>`
+});
+ErrorInputNumber.story = {
+  name: toI18n('basicComponent.inputNumber.error')
+};