@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/input/textarea.css

@@ -1,222 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-.semi-input-textarea-wrapper {
-  box-sizing: border-box;
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  border: 1px transparent solid;
-  border-radius: var(--semi-border-radius-small);
-  vertical-align: bottom;
-  background-color: var(--semi-color-fill-0);
-}
-.semi-input-textarea-wrapper:hover {
-  background-color: var(--semi-color-fill-1);
-}
-.semi-input-textarea-wrapper-focus {
-  background-color: var(--semi-color-fill-0);
-  border: 1px var(--semi-color-focus-border) solid;
-}
-.semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active {
-  background-color: var(--semi-color-fill-0);
-}
-.semi-input-textarea-wrapper:active {
-  background-color: var(--semi-color-fill-2);
-}
-.semi-input-textarea-wrapper .semi-input-clearbtn {
-  position: absolute;
-  top: 0;
-  min-width: 24px;
-  color: var(--semi-color-text-2);
-  right: 4px;
-  height: 32px;
-}
-.semi-input-textarea-wrapper .semi-input-clearbtn > svg {
-  pointer-events: none;
-}
-.semi-input-textarea-wrapper .semi-input-clearbtn:hover {
-  cursor: pointer;
-}
-.semi-input-textarea-wrapper .semi-input-clearbtn:hover .semi-icon {
-  color: var(--semi-color-primary-hover);
-}
-.semi-input-textarea-wrapper .semi-input-clearbtn-hidden {
-  visibility: hidden;
-}
-.semi-input-textarea-wrapper-readonly {
-  cursor: default;
-}
-.semi-input-textarea-wrapper-disabled {
-  cursor: not-allowed;
-  color: var(--semi-color-disabled-text);
-  background-color: var(--semi-color-disabled-fill);
-}
-.semi-input-textarea-wrapper-disabled:hover {
-  background-color: var(--semi-color-disabled-fill);
-}
-.semi-input-textarea-wrapper-disabled::placeholder {
-  color: var(--semi-color-disabled-text);
-}
-.semi-input-textarea-wrapper-error {
-  background-color: var(--semi-color-danger-light-default);
-  border-color: var(--semi-color-danger-light-default);
-}
-.semi-input-textarea-wrapper-error:hover {
-  background-color: var(--semi-color-danger-light-hover);
-  border-color: var(--semi-color-danger-light-hover);
-}
-.semi-input-textarea-wrapper-error.semi-input-textarea-wrapper-focus {
-  background-color: var(--semi-color-danger-light-default);
-  border-color: var(--semi-color-danger);
-}
-.semi-input-textarea-wrapper-error:active {
-  background-color: var(--semi-color-danger-light-active);
-  border-color: var(--semi-color-danger-light-active);
-}
-.semi-input-textarea-wrapper-warning {
-  background-color: var(--semi-color-warning-light-default);
-  border-color: var(--semi-color-warning-light-default);
-}
-.semi-input-textarea-wrapper-warning:hover {
-  background-color: var(--semi-color-warning-light-hover);
-  border-color: var(--semi-color-warning-light-hover);
-}
-.semi-input-textarea-wrapper-warning.semi-input-textarea-wrapper-focus {
-  background-color: var(--semi-color-warning-light-default);
-  border-color: var(--semi-color-warning);
-}
-.semi-input-textarea-wrapper-warning:active {
-  background-color: var(--semi-color-warning-light-active);
-  border-color: var(--semi-color-warning-light-active);
-}
-
-.semi-input-textarea {
-  position: relative;
-  resize: none;
-  padding: 5px 12px;
-  box-shadow: none;
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  background-color: transparent;
-  border: 0 solid transparent;
-  vertical-align: bottom;
-  width: 100%;
-  outline: none;
-  cursor: text;
-  box-sizing: border-box;
-  color: var(--semi-color-text-0);
-}
-.semi-input-textarea::placeholder {
-  color: var(--semi-color-text-2);
-}
-.semi-input-textarea-showClear {
-  padding-right: 36px;
-}
-.semi-input-textarea-disabled {
-  cursor: not-allowed;
-  color: var(--semi-color-disabled-text);
-  background-color: transparent;
-}
-.semi-input-textarea-disabled:hover {
-  background-color: transparent;
-}
-.semi-input-textarea-disabled::placeholder {
-  color: var(--semi-color-disabled-text);
-}
-.semi-input-textarea-autosize {
-  overflow: hidden;
-}
-.semi-input-textarea-counter {
-  font-size: 12px;
-  line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 3px 12px 5px 12px;
-  min-height: 24px;
-  text-align: right;
-  color: var(--semi-color-text-2);
-}
-.semi-input-textarea-counter-exceed {
-  color: var(--semi-color-danger);
-}
-
-.semi-rtl .semi-input-wrapper,
-.semi-portal-rtl .semi-input-wrapper {
-  direction: rtl;
-}
-.semi-rtl .semi-input-wrapper__with-prefix .semi-input,
-.semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input {
-  padding-left: auto;
-  padding-right: 0;
-}
-.semi-rtl .semi-input-wrapper__with-suffix .semi-input,
-.semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input {
-  padding-right: auto;
-  padding-left: 0;
-}
-.semi-rtl .semi-input,
-.semi-portal-rtl .semi-input {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-.semi-rtl .semi-input-inset-label,
-.semi-portal-rtl .semi-input-inset-label {
-  margin-right: auto;
-  margin-left: 12px;
-}
-.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
-.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text,
-.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
-.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text {
-  margin-left: auto;
-  margin-right: 0;
-}
-.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
-.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon,
-.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
-.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon {
-  margin-left: auto;
-  margin-right: 0;
-}
-.semi-rtl .semi-input-append,
-.semi-portal-rtl .semi-input-append {
-  border-left: 0;
-  border-right: 1px transparent solid;
-}
-.semi-rtl .semi-input-prepend,
-.semi-portal-rtl .semi-input-prepend {
-  border-right: 0;
-  border-left: 1px transparent solid;
-}
-.semi-rtl .semi-input-group .semi-select:not(:last-child)::after,
-.semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
-.semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after,
-.semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after,
-.semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
-.semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after,
-.semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
-  right: auto;
-  left: -1px;
-}
-.semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after,
-.semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after {
-  right: auto;
-  left: -1px;
-}
-.semi-rtl .semi-input-textarea-wrapper,
-.semi-portal-rtl .semi-input-textarea-wrapper {
-  direction: rtl;
-}
-.semi-rtl .semi-input-textarea-counter,
-.semi-portal-rtl .semi-input-textarea-counter {
-  text-align: left;
-}
-.semi-rtl .semi-input-textarea-showClear,
-.semi-portal-rtl .semi-input-textarea-showClear {
-  padding-right: 0;
-  padding-left: 36px;
-}

package/lib/cjs/input/textarea.scss

@@ -1,188 +0,0 @@
-@import "./variables.scss";
-
-$module: #{$prefix}-input;
-
-
-.#{$module}-textarea-wrapper {
-    box-sizing: border-box;
-    display: inline-block;
-    position: relative;
-    width: 100%;
-    border: $width-input_wrapper-border $color-input_default-border-default solid;
-    border-radius: $radius-input_wrapper;
-    vertical-align: bottom;
-    background-color: $color-input_default-bg-default;
-
-    &:hover {
-        background-color: $color-input_default-bg-hover;
-    }
-
-    &-focus {
-        background-color: $color-input_default-bg-focus;
-        border: $width-input_wrapper_focus-border $color-input_default-border-focus solid;
-        &:hover,
-        &:active {
-            background-color: $color-input_default-bg-focus;
-        }
-    }
-
-    &:active {
-        background-color: $color-input_default-bg-active;
-    }
-
-    .#{$module}-clearbtn {
-        position: absolute;
-        top: 0;
-        min-width: $width-textarea-icon;
-        color: $color-textarea-icon-default;
-        right: $spacing-textarea-icon-right;
-        height: $height-textarea-default;
-
-        & > svg {
-            pointer-events: none;
-        }
-
-        &:hover {
-            cursor: pointer;
-
-            .#{$prefix}-icon {
-                color: $color-textarea-icon-hover;
-            }
-        }
-
-        &-hidden {
-            visibility: hidden;
-        }
-    }
-
-    &-readonly {
-        cursor: default;
-    }
-
-    &-disabled {
-        cursor: not-allowed;
-        // border: $border-thickness-control $color-input_disabled-border-default solid;
-        color: $color-input_disabled-text-default;
-        background-color: $color-input_disabled-bg-default;
-
-        &:hover {
-            background-color: $color-input_disabled-bg-default;
-        }
-
-        &::placeholder {
-            color: $color-input_disabled-text-default;
-        }
-    }
-
-    &-error {
-        background-color: $color-input_danger-bg-default;
-        border-color: $color-input_danger-border-default;
-
-        &:hover {
-            background-color: $color-input_danger-bg-hover;
-            border-color: $color-input_danger-border-hover;
-        }
-
-        &.#{$module}-textarea-wrapper-focus {
-            background-color: $color-input_danger-bg-focus;
-            border-color: $color-input_danger-border-focus;
-        }
-
-        &:active {
-            background-color: $color-input_danger-bg-active;
-            border-color: $color-input_danger-border-active;
-        }
-    }
-
-    &-warning {
-        background-color: $color-input_warning-bg-default;
-        border-color: $color-input_warning-border-default;
-
-        &:hover {
-            background-color: $color-input_warning-bg-hover;
-            border-color: $color-input_warning-border-hover;
-        }
-
-        &.#{$module}-textarea-wrapper-focus {
-            background-color: $color-input_warning-bg-focus;
-            border-color: $color-input_warning-border-focus;
-        }
-
-        &:active {
-            background-color: $color-input_warning-bg-active;
-            border-color: $color-input_warning-border-active;
-        }
-    }
-
-    // &-resize {
-    //     resize: vertical;
-    //     overflow: auto;
-
-    //     .#{$module}-textarea {
-    //         min-height: 52px;
-    //         height: calc(100% - 24px);
-    //     }
-    // }
-}
-
-.#{$module}-textarea {
-    position: relative;
-    resize: none;
-    // min-height: $height-input_default;
-    padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;
-
-    @include shadow-0;
-    @include font-size-regular;
-    background-color: transparent;
-    border: $width-textarea-border solid $color-textarea-border-default;
-    vertical-align: bottom;
-
-    width: 100%;
-    outline: none;
-    cursor: text;
-    box-sizing: border-box;
-    color: $color-input_default-text-default;
-
-    &::placeholder {
-        color: $color-input_placeholder-text-default;
-    }
-
-    &-showClear {
-        padding-right: $spacing-textarea_withShowClear-paddingRight;
-    }
-
-    &-disabled {
-        cursor: not-allowed;
-        color: $color-input_disabled-text-default;
-        background-color: transparent;
-
-        &:hover {
-            background-color: transparent;
-        }
-
-        &::placeholder {
-            color: $color-input_disabled-text-default;
-        }
-    }
-
-    &-autosize {
-        overflow: hidden;
-    }
-    
-    &-counter {
-        @include font-size-small;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding: $spacing-textarea_counter-paddingTop $spacing-textarea_counter-paddingRight $spacing-textarea_counter-paddingBottom $spacing-textarea_counter-paddingLeft;
-        min-height: $height-textarea_counter;
-        text-align: right;
-        color: $color-input_counter-text-default;
-
-        &-exceed {
-            color: $color-input_counter_danger-text-default;
-        }
-    }
-}
-
-@import "./rtl.scss";

package/lib/cjs/input/textareaFoundation.d.ts

@@ -1,63 +0,0 @@
-import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
-export interface TextAreaDefaultAdpter {
-    notifyChange: noopFunction;
-    setValue: noopFunction;
-    toggleFocusing: noopFunction;
-    notifyFocus: noopFunction;
-    notifyBlur: noopFunction;
-    notifyKeyDown: noopFunction;
-    notifyEnterPress: noopFunction;
-    toggleHovering(hoving: boolean): void;
-    notifyClear(e: any): void;
-}
-export interface TextAreaAdpter extends Partial<DefaultAdapter>, Partial<TextAreaDefaultAdpter> {
-    setMinLength(length: number): void;
-    notifyPressEnter(e: any): void;
-    getRef(): any;
-    notifyHeightUpdate(e: any): void;
-}
-export default class TextAreaFoundation extends BaseFoundation<TextAreaAdpter> {
-    static get textAreaDefaultAdapter(): {
-        notifyChange: (...args: any[]) => void;
-        setValue: (...args: any[]) => void;
-        toggleFocusing: (...args: any[]) => void;
-        toggleHovering: (...args: any[]) => void;
-        notifyFocus: (...args: any[]) => void;
-        notifyBlur: (...args: any[]) => void;
-        notifyKeyDown: (...args: any[]) => void;
-        notifyEnterPress: (...args: any[]) => void;
-    };
-    constructor(adapter: TextAreaAdpter);
-    init(): void;
-    destroy(): void;
-    setInitValue(): void;
-    handleValueChange(v: string): void;
-    handleChange(value: string, e: any): void;
-    /**
-     * Modify minLength to trigger browser check for minimum length
-     * Controlled mode is not checked
-     * @param {String} value
-     */
-    handleVisibleMinLength(value: string): void;
-    /**
-     * Handle input emoji characters beyond maxLength
-     * Controlled mode is not checked
-     * @param {String} value
-     */
-    handleVisibleMaxLength(value: string): string;
-    /**
-     * Truncate textarea values based on maximum length
-     * @param {String} value
-     * @param {Number} maxLength
-     * @returns {String}
-     */
-    handleTruncateValue(value: string, maxLength: number): string;
-    handleFocus(e: any): void;
-    handleBlur(e: any): void;
-    handleKeyDown(e: any): void;
-    resizeTextarea: (cb: any) => void;
-    handleMouseEnter(e: any): void;
-    handleMouseLeave(e: any): void;
-    isAllowClear(): boolean;
-    handleClear(e: any): void;
-}