feat: select support readonly

Author: igauch

.changeset/beige-bananas-grin.md

@@ -0,0 +1,5 @@
+---
+'@alauda/ui': minor
+---
+
+- feat: select support readonly 

src/form/common-form.ts

@@ -24,15 +24,16 @@ export class CommonFormControl<V, M = V> implements ControlValueAccessor {
   }
 
   set disabled(val: boolean | '') {
-    this._disabled = coerceAttrBoolean(val);
+    this._disabled = this._readonly || coerceAttrBoolean(val);
   }
 
   @Input()
   get readonly() {
-    return this.disabled;
+    return this._readonly;
   }
 
   set readonly(val) {
+    this._readonly = coerceAttrBoolean(val);
     this.disabled = val;
   }
 
@@ -56,6 +57,7 @@ export class CommonFormControl<V, M = V> implements ControlValueAccessor {
   protected onTouched: () => void;
   private _propValue: V;
   private _disabled = false;
+  private _readonly: boolean;
 
   model: M = null;
   model$ = new ReplaySubject<M>(1);

src/input/input.component.scss

@@ -46,20 +46,24 @@
     @include outline-shadow(primary);
   }
 
-  &[readonly] {
+  &[disable],
+  &[disabled] {
     background-color: use-rgb(n-8);
     border-color: use-rgb(n-7) !important;
-    cursor: default;
   }
 
   &[disabled] {
-    background-color: use-rgb(n-8);
-    border-color: use-rgb(n-7) !important;
     color: use-text-color(disabled);
     -webkit-text-fill-color: use-text-color(disabled);
     cursor: not-allowed;
   }
 
+  &[readonly] {
+    color: use-text-color(main);
+    -webkit-text-fill-color: use-text-color(main);
+    cursor: default;
+  }
+
   &--large {
     height: use-var(inline-height-l);
     font-size: use-var(font-size-l);

src/paginator/__snapshots__/paginator.component.spec.ts.snap

@@ -137,9 +137,8 @@ exports[`PaginatorComponent should change page size correctly 1`] = `
                       <input
                         aui-input=""
                         autocomplete="off"
-                        class="aui-select__input aui-input aui-input--medium"
+                        class="aui-select__input aui-input aui-input--medium aui-select__input-inaction"
                         placeholder=""
-                        readonly=""
                       />
                       <div
                         class="aui-input aui-input--medium aui-select__label-container"
@@ -415,9 +414,8 @@ exports[`PaginatorComponent should render current template 1`] = `
                       <input
                         aui-input=""
                         autocomplete="off"
-                        class="aui-select__input aui-input aui-input--medium"
+                        class="aui-select__input aui-input aui-input--medium aui-select__input-inaction"
                         placeholder=""
-                        readonly=""
                       />
                       <div
                         class="aui-input aui-input--medium aui-select__label-container"
@@ -702,10 +700,9 @@ exports[`PaginatorComponent should render current template 2`] = `
                       <input
                         aui-input=""
                         autocomplete="off"
-                        class="aui-select__input aui-input aui-input--medium"
+                        class="aui-select__input aui-input aui-input--medium aui-select__input-inaction"
                         disabled=""
                         placeholder=""
-                        readonly=""
                       />
                       <div
                         class="aui-input aui-input--medium aui-select__label-container"

src/select/base-select.ts

@@ -92,7 +92,7 @@ export abstract class BaseSelect<T, V = T>
     return this.tooltipRef.isCreated;
   }
 
-  get inputReadonly() {
+  get inaction() {
     return !(this.filterable && this.opened);
   }
 

src/select/multi-select/multi-select.component.html

@@ -1,5 +1,12 @@
 <div
   [class]="rootClass"
+  [ngClass]="{
+    isDisabled: disabled,
+    isFocused: focused,
+    isClearable: displayClearBtn,
+    withHeightLimit: maxRowCount > 0,
+    isReadonly: readonly
+  }"
   #selectRef
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
@@ -53,7 +60,7 @@
   <input
     #inputRef
     autocomplete="off"
-    [readonly]="inputReadonly"
+    [readonly]="readonly"
     [class]="inputClass"
     (focus)="onInputFocus()"
     (blur)="onInputBlur()"

src/select/multi-select/multi-select.component.scss

@@ -49,4 +49,13 @@ $block: aui-multi-select;
   .aui-tag--info {
     background-color: use-rgb(n-10);
   }
+
+  &.isReadonly {
+    cursor: default;
+
+    .aui-tag {
+      color: use-text-color(main);
+      background-color: use-rgb(n-10);
+    }
+  }
 }

src/select/multi-select/multi-select.component.ts

@@ -137,11 +137,7 @@ export class MultiSelectComponent<T = unknown>
 
   get rootClass() {
     const size = this.size || ComponentSize.Medium;
-    return `aui-input ${this.bem.block(size)} ${
-      this.disabled ? 'isDisabled' : ''
-    } ${this.focused ? 'isFocused' : ''} ${
-      this.displayClearBtn ? 'isClearable' : ''
-    } ${this.maxRowCount > 0 ? 'withHeightLimit' : ''}`;
+    return `aui-input ${this.bem.block(size)}`;
   }
 
   get tagSize() {
@@ -152,7 +148,7 @@ export class MultiSelectComponent<T = unknown>
 
   get inputClass() {
     return `${this.bem.element('input', {
-      hidden: this.inputReadonly,
+      hidden: this.inaction,
     })} aui-tag aui-tag--${this.tagSize}`;
   }
 

src/select/select.component.html

@@ -18,11 +18,12 @@
     <input
       #inputRef
       class="aui-select__input"
+      [class.aui-select__input-inaction]="inaction"
       autocomplete="off"
       aui-input
       [disabled]="disabled"
       [size]="size"
-      [readonly]="inputReadonly"
+      [readonly]="readonly"
       [placeholder]="!(hasSelected$ | async) ? placeholder : ''"
       (input)="onInput($event)"
       (keydown)="onKeyDown($event)"
@@ -46,6 +47,7 @@
       *ngIf="(selectedOption$ | async) && !filterString"
       class="aui-select__label-container aui-input aui-input--{{ size }}"
       [attr.disabled]="disabled ? true : null"
+      [attr.readonly]="readonly ? true : null"
     >
       <div class="aui-select__label">
         <ng-container *ngIf="(selectedOption$ | async).label as optionLabel">

src/select/select.component.scss

@@ -31,7 +31,7 @@
     @include text-overflow;
   }
 
-  &__input.aui-input[readonly] {
+  &__input-inaction {
     background-color: use-rgb(main-bg);
     border-color: use-rgb(n-7) !important;
     cursor: text;
@@ -41,7 +41,7 @@
     }
   }
 
-  &__input.aui-input[disabled] {
+  &__input[disabled] {
     background-color: use-rgb(n-8);
     border-color: use-rgb(n-7);
   }

stories/select/basic.component.ts

@@ -15,6 +15,7 @@ import { SelectModule } from 'src/select';
       [disabled]="disabled"
       [clearable]="clearable"
       [filterable]="filterable"
+      [readonly]="readonly"
       placeholder="select a value"
     >
       <ng-container *auiOptionContent>
@@ -59,9 +60,15 @@ export default class SelectBasicComponent {
   @Input()
   filterable = true;
 
+  /**
+   * 是否只读
+   */
+  @Input()
+  readonly = false;
+
   arr = Array.from({ length: 11 })
     .fill(null)
     .map((_, i) => `option${i + 1}`);
 
-  value = '';
+  value = 'option1';
 }

stories/select/basic.stories.ts

@@ -23,5 +23,6 @@ export const Basic: Story = {
     loading: false,
     clearable: false,
     filterable: true,
+    readonly: false,
   },
 };

stories/select/select.mdx

@@ -44,6 +44,7 @@ import * as multiple from './multiple.stories';
 | loading            | boolean        | false                   | 是否加载中                                |
 | clearable          | boolean        | false                   | 选项是否可清除                            |
 | filterable         | boolean        | true                    | 是否支持选项过滤                          |
+| readonly           | boolean        | false                   | 是否只读                                  |
 | defaultFirstOption | boolean        | true                    | 是否第一项作为默认选项                    |
 | lazy               | boolean        | true                    | 关闭候选项时是否缓存 Option 组件          |
 | filterFn           | OptionFilterFn | Array.property.includes | 自定义过滤方法，filterable 为 true 时设置 |