@sdata/web-vue 1.6.0 → 1.7.0

package/es/index.d.ts

@@ -36,6 +36,8 @@ export { default as ColorPicker } from './color-picker';
 export type { ColorPickerInstance } from './color-picker';
 export { default as ConfigProvider } from './config-provider';
 export type { ConfigProviderInstance } from './config-provider';
+export { default as ThemeProvider } from './theme-provider';
+export type { ThemeProviderInstance } from './theme-provider';
 export { default as DatePicker, MonthPicker, QuarterPicker, WeekPicker, YearPicker, RangePicker, } from './date-picker';
 export type { DatePickerInstance, MonthPickerInstance, QuarterPickerInstance, RangePickerInstance, ShortcutType, WeekPickerInstance, YearPickerInstance, } from './date-picker';
 export { default as Descriptions, DescriptionsItem } from './descriptions';

package/es/index.js

@@ -119,6 +119,7 @@ import table_column_default from "./table/table-column.js";
 import Table from "./table/index.js";
 import tab_pane_default from "./tabs/tab-pane.js";
 import Tabs from "./tabs/index.js";
+import ThemeProvider from "./theme-provider/index.js";
 import TimePicker from "./time-picker/index.js";
 import item_default$1 from "./timeline/item.js";
 import Timeline from "./timeline/index.js";
@@ -133,4 +134,4 @@ import Upload from "./upload/index.js";
 import VerificationCode from "./verification-code/index.js";
 import Watermark from "./watermark/index.js";
 import SDVue from "./sd-vue.js";
-export { Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, countdown_default as Countdown, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, Input, input_group_default as InputGroup, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, month_picker_default as MonthPicker, Notification, optgroup_default as Optgroup, option_default as Option, OverflowList, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, quarter_picker_default as QuarterPicker, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, ResizeBox, Result, grid_row_default as Row, Scrollbar, Select, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, TimePicker, Timeline, item_default$1 as TimelineItem, Tooltip, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, getLocale, useFormItem, useLocale };
+export { Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, countdown_default as Countdown, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, Input, input_group_default as InputGroup, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, month_picker_default as MonthPicker, Notification, optgroup_default as Optgroup, option_default as Option, OverflowList, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, quarter_picker_default as QuarterPicker, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, ResizeBox, Result, grid_row_default as Row, Scrollbar, Select, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, TimePicker, Timeline, item_default$1 as TimelineItem, Tooltip, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, getLocale, useFormItem, useLocale };

package/es/index.scss

@@ -0,0 +1,77 @@
+@use '@style/index.scss' as *;
+@use '@components/trigger/style/index.scss' as *;
+@use '@components/_components/select-view/style/index.scss' as *;
+@use '@components/_components/picker/style/index.scss' as *;
+@use '@components/_components/input-label/style/index.scss' as *;
+@use '@components/_components/auto-tooltip/style/index.scss' as *;
+@use '@components/verification-code/style/index.scss' as *;
+@use '@components/upload/style/index.scss' as *;
+@use '@components/typography/style/index.scss' as *;
+@use '@components/tree-select/style/index.scss' as *;
+@use '@components/tree/style/index.scss' as *;
+@use '@components/transfer/style/index.scss' as *;
+@use '@components/tooltip/style/index.scss' as *;
+@use '@components/timeline/style/index.scss' as *;
+@use '@components/time-picker/style/index.scss' as *;
+@use '@components/textarea/style/index.scss' as *;
+@use '@components/tag/style/index.scss' as *;
+@use '@components/tabs/style/index.scss' as *;
+@use '@components/table/style/index.scss' as *;
+@use '@components/switch/style/index.scss' as *;
+@use '@components/steps/style/index.scss' as *;
+@use '@components/statistic/style/index.scss' as *;
+@use '@components/split/style/index.scss' as *;
+@use '@components/spin/style/index.scss' as *;
+@use '@components/space/style/index.scss' as *;
+@use '@components/slider/style/index.scss' as *;
+@use '@components/skeleton/style/index.scss' as *;
+@use '@components/select/style/index.scss' as *;
+@use '@components/scrollbar/style/index.scss' as *;
+@use '@components/result/style/index.scss' as *;
+@use '@components/resize-box/style/index.scss' as *;
+@use '@components/rate/style/index.scss' as *;
+@use '@components/radio/style/index.scss' as *;
+@use '@components/progress/style/index.scss' as *;
+@use '@components/popover/style/index.scss' as *;
+@use '@components/popconfirm/style/index.scss' as *;
+@use '@components/pagination/style/index.scss' as *;
+@use '@components/page-header/style/index.scss' as *;
+@use '@components/overflow-list/style/index.scss' as *;
+@use '@components/notification/style/index.scss' as *;
+@use '@components/modal/style/index.scss' as *;
+@use '@components/message/style/index.scss' as *;
+@use '@components/menu/style/index.scss' as *;
+@use '@components/mention/style/index.scss' as *;
+@use '@components/list/style/index.scss' as *;
+@use '@components/link/style/index.scss' as *;
+@use '@components/layout/style/index.scss' as *;
+@use '@components/input-tag/style/index.scss' as *;
+@use '@components/input-number/style/index.scss' as *;
+@use '@components/input/style/index.scss' as *;
+@use '@components/image/style/index.scss' as *;
+@use '@components/grid/style/index.scss' as *;
+@use '@components/form/style/index.scss' as *;
+@use '@components/ellipsis/style/index.scss' as *;
+@use '@components/empty/style/index.scss' as *;
+@use '@components/dropdown/style/index.scss' as *;
+@use '@components/drawer/style/index.scss' as *;
+@use '@components/divider/style/index.scss' as *;
+@use '@components/descriptions/style/index.scss' as *;
+@use '@components/date-picker/style/index.scss' as *;
+@use '@components/comment/style/index.scss' as *;
+@use '@components/color-picker/style/index.scss' as *;
+@use '@components/collapse/style/index.scss' as *;
+@use '@components/checkbox/style/index.scss' as *;
+@use '@components/cascader/style/index.scss' as *;
+@use '@components/carousel/style/index.scss' as *;
+@use '@components/card/style/index.scss' as *;
+@use '@components/calendar/style/index.scss' as *;
+@use '@components/button/style/index.scss' as *;
+@use '@components/breadcrumb/style/index.scss' as *;
+@use '@components/badge/style/index.scss' as *;
+@use '@components/back-top/style/index.scss' as *;
+@use '@components/avatar/style/index.scss' as *;
+@use '@components/auto-complete/style/index.scss' as *;
+@use '@components/anchor/style/index.scss' as *;
+@use '@components/alert/style/index.scss' as *;
+@use '@components/affix/style/index.scss' as *;

package/es/input/style/group.scss

@@ -0,0 +1,66 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+
+@use '@components/input/style/token.scss' as *;
+
+.#{$input-prefix-cls}-group {
+  display: inline-flex;
+  align-items: center;
+
+  > * {
+    border-radius: 0;
+
+    &.#{$input-prefix-cls}-outer > :last-child,
+    &.#{$input-prefix-cls}-outer > :first-child {
+      border-radius: 0;
+    }
+
+    &:not(:last-child) {
+      position: relative;
+      box-sizing: border-box;
+    }
+
+    &:first-child,
+    &:first-child .#{$input-prefix-cls}-group > *:first-child {
+      border-top-left-radius: $input-group-border-radius_compact;
+      border-bottom-left-radius: $input-group-border-radius_compact;
+
+      .#{theme.$prefix}-select-view {
+        border-top-left-radius: $input-group-border-radius_compact;
+        border-bottom-left-radius: $input-group-border-radius_compact;
+      }
+    }
+
+    &:last-child,
+    &:last-child .#{$input-prefix-cls}-outer > *:last-child {
+      border-top-right-radius: $input-group-border-radius_compact;
+      border-bottom-right-radius: $input-group-border-radius_compact;
+
+      .#{theme.$prefix}-select-view {
+        border-top-right-radius: $input-group-border-radius_compact;
+        border-bottom-right-radius: $input-group-border-radius_compact;
+      }
+    }
+  }
+
+  // 针对input边框颜色处理
+  > .#{$input-prefix-cls}-wrapper:not(:last-child),
+  > .#{$input-prefix-cls}-outer:not(:last-child),
+  > .#{theme.$prefix}-input-tag:not(:last-child),
+  > .#{theme.$prefix}-select-view:not(:last-child) {
+    margin-right: -$input-group-border-separator-width;
+    border-right: $input-group-border-separator-width solid $input-group-color-separator-border;
+
+    &:focus-within {
+      border-right-color: $input-color-border_focus;
+    }
+  }
+
+  // 针对Error状态的input边框颜色处理
+  > .#{$input-prefix-cls}-wrapper.#{$input-prefix-cls}-error:not(:last-child) {
+    &:focus-within {
+      border-right-color: $input-color-border_error_focus;
+    }
+  }
+}

package/es/input/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -19,6 +20,29 @@
 /******** 基础配置项 end *******/
 /******** 高级配置项 *******/
 /******** 高级配置项 end *******/
+.size-height-size-mini {
+  /* prettier-ignore */
+  padding-top: 1px;
+  /* prettier-ignore */
+  padding-bottom: 1px;
+  font-size: 12px;
+  line-height: 1.667;
+}
+.size-height-size-small {
+  /* prettier-ignore */
+  padding-top: 2px;
+  /* prettier-ignore */
+  padding-bottom: 2px;
+  font-size: 14px;
+}
+.size-height-size-large {
+  /* prettier-ignore */
+  padding-top: 6px;
+  /* prettier-ignore */
+  padding-bottom: 6px;
+  font-size: 14px;
+}
+
 .sd-input-wrapper {
   display: inline-flex;
   box-sizing: border-box;
@@ -37,8 +61,7 @@
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
-.sd-input-wrapper:focus-within,
-.sd-input-wrapper.sd-input-focus {
+.sd-input-wrapper:focus-within, .sd-input-wrapper.sd-input-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--primary-6));
@@ -67,8 +90,7 @@
   background-color: var(--color-danger-light-2);
   border-color: transparent;
 }
-.sd-input-wrapper.sd-input-error:focus-within,
-.sd-input-wrapper.sd-input-error.sd-input-wrapper-focus {
+.sd-input-wrapper.sd-input-error:focus-within, .sd-input-wrapper.sd-input-error.sd-input-wrapper-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--danger-6));
@@ -185,6 +207,7 @@
   color: var(--color-text-3);
   font-size: 12px;
 }
+
 .sd-input-outer {
   display: inline-flex;
   width: 100%;
@@ -422,6 +445,7 @@
 .sd-input-outer-disabled {
   cursor: not-allowed;
 }
+
 .sd-input-prepend,
 .sd-input-append {
   display: inline-flex;
@@ -438,6 +462,7 @@
 .sd-input-append > svg {
   font-size: 14px;
 }
+
 .sd-input-prepend {
   border-right: 1px solid var(--color-neutral-3);
 }
@@ -468,6 +493,7 @@
 .sd-input-prepend .sd-select.sd-select-single .sd-select-view {
   height: 100%;
 }
+
 .sd-input-append {
   border-left: 1px solid var(--color-neutral-3);
 }
@@ -498,41 +524,66 @@
 .sd-input-append .sd-select.sd-select-single .sd-select-view {
   height: 100%;
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+/******** 基础配置项 end *******/
+/******** 基础配置项 end *******/
+/******** 高级配置项 *******/
+/******** 高级配置项 end *******/
 .sd-input-group {
   display: inline-flex;
   align-items: center;
 }
+
 .sd-input-group > * {
   border-radius: 0;
 }
-.sd-input-group > *.sd-input-outer > :last-child,
-.sd-input-group > *.sd-input-outer > :first-child {
+
+.sd-input-group > *.sd-input-outer > :last-child, .sd-input-group > *.sd-input-outer > :first-child {
   border-radius: 0;
 }
+
 .sd-input-group > *:not(:last-child) {
   position: relative;
   box-sizing: border-box;
 }
-.sd-input-group > *:first-child,
-.sd-input-group > *:first-child .sd-input-group > *:first-child {
+
+.sd-input-group > *:first-child, .sd-input-group > *:first-child .sd-input-group > *:first-child {
   border-top-left-radius: var(--border-radius-small);
   border-bottom-left-radius: var(--border-radius-small);
 }
-.sd-input-group > *:first-child .sd-select-view,
-.sd-input-group > *:first-child .sd-input-group > *:first-child .sd-select-view {
+
+.sd-input-group > *:first-child .sd-select-view, .sd-input-group > *:first-child .sd-input-group > *:first-child .sd-select-view {
   border-top-left-radius: var(--border-radius-small);
   border-bottom-left-radius: var(--border-radius-small);
 }
-.sd-input-group > *:last-child,
-.sd-input-group > *:last-child .sd-input-outer > *:last-child {
+
+.sd-input-group > *:last-child, .sd-input-group > *:last-child .sd-input-outer > *:last-child {
   border-top-right-radius: var(--border-radius-small);
   border-bottom-right-radius: var(--border-radius-small);
 }
-.sd-input-group > *:last-child .sd-select-view,
-.sd-input-group > *:last-child .sd-input-outer > *:last-child .sd-select-view {
+
+.sd-input-group > *:last-child .sd-select-view, .sd-input-group > *:last-child .sd-input-outer > *:last-child .sd-select-view {
   border-top-right-radius: var(--border-radius-small);
   border-bottom-right-radius: var(--border-radius-small);
 }
+
 .sd-input-group > .sd-input-wrapper:not(:last-child),
 .sd-input-group > .sd-input-outer:not(:last-child),
 .sd-input-group > .sd-input-tag:not(:last-child),
@@ -540,48 +591,53 @@
   margin-right: -1px;
   border-right: 1px solid var(--color-neutral-3);
 }
+
 .sd-input-group > .sd-input-wrapper:not(:last-child):focus-within,
 .sd-input-group > .sd-input-outer:not(:last-child):focus-within,
 .sd-input-group > .sd-input-tag:not(:last-child):focus-within,
 .sd-input-group > .sd-select-view:not(:last-child):focus-within {
   border-right-color: rgb(var(--primary-6));
 }
+
 .sd-input-group > .sd-input-wrapper.sd-input-error:not(:last-child):focus-within {
   border-right-color: rgb(var(--danger-6));
 }
-.size-height-size-mini {
-  /* prettier-ignore */
-  padding-top: 1px;
-  /* prettier-ignore */
-  padding-bottom: 1px;
-  font-size: 12px;
-  line-height: 1.667;
-}
-.size-height-size-small {
-  /* prettier-ignore */
-  padding-top: 2px;
-  /* prettier-ignore */
-  padding-bottom: 2px;
-  font-size: 14px;
-}
-.size-height-size-large {
-  /* prettier-ignore */
-  padding-top: 6px;
-  /* prettier-ignore */
-  padding-bottom: 6px;
-  font-size: 14px;
-}
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+/******** 基础配置项 end *******/
+/******** 基础配置项 end *******/
+/******** 高级配置项 *******/
+/******** 高级配置项 end *******/
 .sd-textarea-wrapper {
   position: relative;
   display: inline-block;
   width: 100%;
 }
+
 .sd-textarea-clear-wrapper:hover .sd-textarea-clear-icon {
   display: inline-block;
 }
+
 .sd-textarea-clear-wrapper .sd-textarea {
   padding-right: 20px;
 }
+
 .sd-textarea-word-limit {
   position: absolute;
   right: 10px;
@@ -590,6 +646,7 @@
   font-size: 12px;
   user-select: none;
 }
+
 .sd-textarea-clear-icon {
   position: absolute;
   top: 10px;
@@ -597,20 +654,66 @@
   display: none;
   font-size: 12px;
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+/******** 基础配置项 end *******/
+/******** 基础配置项 end *******/
+/******** 高级配置项 *******/
+/******** 高级配置项 end *******/
 .sd-input-search .sd-input-append {
   padding: 0;
   border: none;
 }
+
 .sd-input-search .sd-input-suffix {
   color: var(--color-text-2);
   font-size: 14px;
 }
+
 .sd-input-search .sd-input-search-btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+/******** 基础配置项 end *******/
+/******** 基础配置项 end *******/
+/******** 高级配置项 *******/
+/******** 高级配置项 end *******/
 .sd-input-wrapper.sd-input-password:not(.sd-input-disabled) .sd-input-suffix {
   color: var(--color-text-2);
   font-size: 12px;
   cursor: pointer;
-}
+}

package/es/input/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';

package/es/input/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/input/style/index.scss

@@ -0,0 +1,114 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use 'sass:meta';
+@use '@style/mixins/index.scss' as *;
+@use '@components/input/style/input.scss' as *;
+@use '@components/input/style/size.scss' as *;
+@use '@components/input/style/token.scss' as *;
+
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+
+@mixin disabled-style() {
+  color: $input-color-text_disabled;
+  background-color: $input-color-bg_disabled;
+  border-color: $input-color-border_disabled;
+  cursor: not-allowed;
+
+  &:hover {
+    color: $input-color-text_disabled;
+    background-color: $input-color-bg_disabled;
+    border-color: $input-color-border_disabled;
+  }
+
+  &::placeholder {
+    color: $input-color-text_disabled;
+  }
+}
+
+.#{$input-prefix-cls}-wrapper {
+  @include input-wrapper-style($input-prefix-cls);
+
+  .#{$input-prefix-cls} {
+    @include input-style();
+
+    &.#{$input-prefix-cls}-size-mini {
+      @include input-size(mini);
+    }
+
+    &.#{$input-prefix-cls}-size-small {
+      @include input-size(small);
+    }
+
+    &.#{$input-prefix-cls}-size-medium {
+      @include input-size(medium);
+    }
+
+    &.#{$input-prefix-cls}-size-large {
+      @include input-size(large);
+    }
+  }
+
+  .#{$input-prefix-cls}-word-limit {
+    color: $input-color-tip-text;
+    font-size: $input-font-tip-size;
+  }
+}
+
+.#{$input-prefix-cls}-outer {
+  display: inline-flex;
+  width: 100%;
+
+  > .#{$input-prefix-cls}-wrapper {
+    border-radius: 0;
+  }
+
+  > :first-child {
+    border-top-left-radius: $input-border-radius;
+    border-bottom-left-radius: $input-border-radius;
+  }
+
+  > :last-child {
+    border-top-right-radius: $input-border-radius;
+    border-bottom-right-radius: $input-border-radius;
+  }
+
+  @include outer-size();
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+}
+
+.#{$input-prefix-cls}-prepend,
+.#{$input-prefix-cls}-append {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 $input-padding-horizontal;
+  color: $input-color-text;
+  white-space: nowrap;
+  background-color: $input-color-addon-bg;
+  border: 1px solid $input-color-addon-border_default;
+
+  > svg {
+    font-size: $input-size-default-icon-addon-size;
+  }
+}
+
+.#{$input-prefix-cls}-prepend {
+  border-right: $input-border-addon-separator-width solid $input-color-addon-border;
+
+  @include addon(before, $input-size-default-height, $input-size-default-font-size);
+}
+
+.#{$input-prefix-cls}-append {
+  border-left: $input-border-addon-separator-width solid $input-color-addon-border;
+
+  @include addon(after, $input-size-default-height, $input-size-default-font-size);
+}
+
+@include meta.load-css('./group.scss');
+@include meta.load-css('./textarea.scss');
+@include meta.load-css('./search.scss');
+@include meta.load-css('./password.scss');