@fle-ui/next 1.0.0-alpha.8 → 1.0.0-alpha.9

package/lib/steps/style/index.less

@@ -1,3 +1,247 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
 
-@import './index-pure.less';
+@steps-prefix-cls: ~'@{ant-prefix}-steps';
+@process-icon-color: @primary-color;
+@process-title-color: @heading-color;
+@process-description-color: @text-color;
+@process-icon-text-color: @text-color-inverse;
+@wait-icon-color: @disabled-color;
+@wait-title-color: @text-color-secondary;
+@wait-description-color: @wait-title-color;
+@wait-tail-color: @process-tail-color;
+@finish-icon-color: @process-icon-color;
+@finish-title-color: @text-color;
+@finish-description-color: @text-color-secondary;
+@finish-tail-color: @primary-color;
+@error-icon-color: @error-color;
+@error-title-color: @error-color;
+@error-description-color: @error-color;
+@error-tail-color: @wait-tail-color;
+@steps-nav-active-color: @primary-color;
+
+.@{steps-prefix-cls} {
+  .reset-component();
+
+  display: flex;
+  width: 100%;
+  font-size: 0;
+  text-align: initial;
+}
+
+.@{steps-prefix-cls}-item {
+  position: relative;
+  display: inline-block;
+  flex: 1;
+  overflow: hidden;
+  vertical-align: top;
+
+  &-container {
+    outline: none;
+  }
+
+  &:last-child {
+    flex: none;
+  }
+
+  &:last-child > &-container > &-tail,
+  &:last-child > &-container > &-content > &-title::after {
+    display: none;
+  }
+
+  &-icon,
+  &-content {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  &-icon {
+    width: @steps-icon-size;
+    height: @steps-icon-size;
+    margin: @steps-icon-margin;
+    font-size: @steps-icon-font-size;
+    font-family: @font-family;
+    line-height: @steps-icon-size;
+    text-align: center;
+    border: @border-width-base @border-style-base @wait-icon-color;
+    border-radius: @steps-icon-size;
+    transition: background-color 0.3s, border-color 0.3s;
+
+    .@{steps-prefix-cls}-icon {
+      position: relative;
+      top: @steps-icon-top;
+      color: @primary-color;
+      line-height: 1;
+    }
+  }
+  &-tail {
+    position: absolute;
+    top: 12px;
+    left: 0;
+    width: 100%;
+    padding: 0 10px;
+
+    &::after {
+      display: inline-block;
+      width: 100%;
+      height: 1px;
+      background: @border-color-split;
+      border-radius: 1px;
+      transition: background 0.3s;
+      content: '';
+    }
+  }
+  &-title {
+    position: relative;
+    display: inline-block;
+    padding-right: 16px;
+    color: @text-color;
+    font-size: @font-size-lg;
+    line-height: @steps-title-line-height;
+
+    &::after {
+      position: absolute;
+      top: (@steps-title-line-height / 2);
+      left: 100%;
+      display: block;
+      width: 9999px;
+      height: 1px;
+      background: @wait-tail-color;
+      content: '';
+    }
+  }
+  &-subtitle {
+    display: inline;
+    margin-left: 8px;
+    color: @text-color-secondary;
+    font-weight: normal;
+    font-size: @font-size-base;
+  }
+  &-description {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+  .step-item-status(wait);
+  .step-item-status(process);
+  &-process > &-container > &-icon {
+    background: @process-icon-color;
+    .@{steps-prefix-cls}-icon {
+      color: @process-icon-text-color;
+    }
+  }
+  &-process > &-container > &-title {
+    font-weight: 500;
+  }
+  .step-item-status(finish);
+  .step-item-status(error);
+
+  &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
+    background: @error-icon-color;
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+}
+
+// ===================== Clickable =====================
+.@{steps-prefix-cls} .@{steps-prefix-cls}-item {
+  &:not(.@{steps-prefix-cls}-item-active) {
+    & > .@{steps-prefix-cls}-item-container[role='button'] {
+      cursor: pointer;
+
+      .@{steps-prefix-cls}-item {
+        &-title,
+        &-subtitle,
+        &-description,
+        &-icon .@{steps-prefix-cls}-icon {
+          transition: color 0.3s;
+        }
+      }
+
+      &:hover {
+        .@{steps-prefix-cls}-item {
+          &-title,
+          &-subtitle,
+          &-description {
+            color: @primary-color;
+          }
+        }
+      }
+    }
+
+    &:not(.@{steps-prefix-cls}-item-process) {
+      & > .@{steps-prefix-cls}-item-container[role='button']:hover {
+        .@{steps-prefix-cls}-item {
+          &-icon {
+            border-color: @primary-color;
+
+            .@{steps-prefix-cls}-icon {
+              color: @primary-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
+  .@{steps-prefix-cls}-item {
+    padding-left: 16px;
+    white-space: nowrap;
+
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child .@{steps-prefix-cls}-item-title {
+      padding-right: 0;
+    }
+    &-tail {
+      display: none;
+    }
+    &-description {
+      max-width: @steps-description-max-width;
+      white-space: normal;
+    }
+  }
+}
+
+.step-item-status(@status) {
+  @icon-color: '@{status}-icon-color';
+  @title-color: '@{status}-title-color';
+  @description-color: '@{status}-description-color';
+  @tail-color: '@{status}-tail-color';
+  &-@{status} &-icon {
+    background-color: @steps-background;
+    border-color: @@icon-color;
+    > .@{steps-prefix-cls}-icon {
+      color: @@icon-color;
+      .@{steps-prefix-cls}-icon-dot {
+        background: @@icon-color;
+      }
+    }
+  }
+  &-@{status} > &-container > &-content > &-title {
+    color: @@title-color;
+    &::after {
+      background-color: @@tail-color;
+    }
+  }
+  &-@{status} > &-container > &-content > &-description {
+    color: @@description-color;
+  }
+  &-@{status} > &-container > &-tail::after {
+    background-color: @@tail-color;
+  }
+}
+
+@import './custom-icon';
+@import './small';
+@import './vertical';
+@import './label-placement';
+@import './progress-dot';
+@import './nav';
+@import './rtl';
+@import './progress.less';

package/lib/style/index.less

@@ -1,3 +1,3 @@
-@root-entry-name: default;
-
-@import './index-pure.less';
+@import './themes/index.less';
+@import './theme.less';
+@import './core/index.less';

package/lib/style/theme.less

@@ -20,9 +20,9 @@
 @modal-close-color: #ffffff;
 @modal-close-color-hover: #f2f2f2;
 @modal-header-padding: 13px 20px;
-@modal-body-padding: '20px';
+@modal-body-padding: 20px;
 @modal-confirm-body-padding: 28px 28px 20px;
-@modal-header-close-size: '49px';
+@modal-header-close-size: 49px;
 
 @pagination-item-bg-active: @primary-color;
 @pagination-item-color-active: #ffffff;

package/lib/switch/style/css.js

@@ -1,5 +1,5 @@
 "use strict";
 
-require("../../style/default.css");
+require("../../style/index.css");
 
 require("./index.css");

package/lib/switch/style/index.d.ts

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

package/lib/switch/style/index.js

@@ -1,5 +1,5 @@
 "use strict";
 
-require("../../style/default.less");
+require("../../style/index.less");
 
 require("./index.less");

package/lib/switch/style/index.less

@@ -1,3 +1,154 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
 
-@import './index-pure.less';
+@switch-prefix-cls: ~'@{ant-prefix}-switch';
+@switch-duration: 0.2s;
+
+@switch-pin-size: @switch-height - 4px;
+@switch-sm-pin-size: @switch-sm-height - 4px;
+
+.@{switch-prefix-cls} {
+  .reset-component();
+
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: @switch-min-width;
+  height: @switch-height;
+  line-height: @switch-height;
+  vertical-align: middle;
+  background-color: @disabled-color;
+  border: 0;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all @switch-duration;
+  user-select: none;
+
+  &:focus {
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@disabled-color, 10%);
+  }
+
+  &-checked:focus {
+    box-shadow: 0 0 0 2px @primary-1;
+  }
+
+  &:focus:hover {
+    box-shadow: none;
+  }
+
+  &-checked {
+    background-color: @switch-color;
+  }
+
+  &-loading,
+  &-disabled {
+    cursor: not-allowed;
+    opacity: @switch-disabled-opacity;
+    * {
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+  }
+
+  // ========================= Inner ==========================
+  &-inner {
+    display: block;
+    margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
+    color: @text-color-inverse;
+    font-size: @font-size-sm;
+    transition: margin @switch-duration;
+  }
+
+  &-checked &-inner {
+    margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
+  }
+
+  // ========================= Handle =========================
+  &-handle {
+    position: absolute;
+    top: @switch-padding;
+    left: @switch-padding;
+    width: @switch-pin-size;
+    height: @switch-pin-size;
+    transition: all @switch-duration ease-in-out;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: @switch-bg;
+      border-radius: (@switch-pin-size / 2);
+      box-shadow: 0 2px 4px 0 @switch-shadow-color;
+      transition: all @switch-duration ease-in-out;
+      content: '';
+    }
+  }
+
+  &-checked &-handle {
+    left: calc(100% - @switch-pin-size - @switch-padding);
+  }
+
+  &:not(&-disabled):active {
+    .@{switch-prefix-cls}-handle::before {
+      right: -30%;
+      left: 0;
+    }
+
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-handle::before {
+        right: 0;
+        left: -30%;
+      }
+    }
+  }
+
+  // ======================== Loading =========================
+  &-loading-icon {
+    position: relative;
+    top: ((@switch-pin-size - @font-size-base) / 2);
+    color: rgba(0, 0, 0, 0.65);
+    vertical-align: top;
+  }
+
+  &-checked &-loading-icon {
+    color: @switch-color;
+  }
+
+  // ========================== Size ==========================
+  &-small {
+    min-width: @switch-sm-min-width;
+    height: @switch-sm-height;
+    line-height: @switch-sm-height;
+
+    .@{switch-prefix-cls}-inner {
+      margin: 0 @switch-sm-inner-margin-min 0 @switch-sm-inner-margin-max;
+      font-size: @font-size-sm;
+    }
+
+    .@{switch-prefix-cls}-handle {
+      width: @switch-sm-pin-size;
+      height: @switch-sm-pin-size;
+    }
+
+    .@{switch-prefix-cls}-loading-icon {
+      top: ((@switch-sm-pin-size - 9px) / 2);
+      font-size: 9px;
+    }
+
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-inner {
+        margin: 0 @switch-sm-inner-margin-max 0 @switch-sm-inner-margin-min;
+      }
+
+      .@{switch-prefix-cls}-handle {
+        left: calc(100% - @switch-sm-pin-size - @switch-padding);
+      }
+    }
+  }
+}
+
+@import './rtl';

package/lib/table/Table.d.ts

@@ -4,7 +4,7 @@ import { SpinProps } from '../spin';
 import { TooltipProps } from '../tooltip';
 import { TableRowSelection, ColumnsType, TableCurrentDataSource, SorterResult, GetPopupContainer, TablePaginationConfig, SortOrder, TableLocale, FilterValue } from './interface';
 import { SizeType } from '../config-provider/SizeContext';
-export { ColumnsType, TablePaginationConfig };
+export type { ColumnsType, TablePaginationConfig };
 export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'transformColumns' | 'internalHooks' | 'internalRefs' | 'data' | 'columns' | 'scroll' | 'emptyText'> {
     dropdownPrefixCls?: string;
     dataSource?: RcTableProps<RecordType>['data'];

package/lib/table/Table.js

@@ -104,7 +104,8 @@ function Table(props) {
   var screens = (0, _useBreakpoint["default"])();
   var mergedColumns = React.useMemo(function () {
     // @ts-ignore
-    var matched = new Set(Object.keys(screens).filter(function (m) {
+    var matched = new Set( // @ts-ignore
+    Object.keys(screens).filter(function (m) {
       return screens[m];
     }));
     return (columns || (0, _useColumns.convertChildrenToColumns)(children)).filter(function (c) {

package/lib/table/index.d.ts

@@ -1,5 +1,5 @@
 import Table, { TableProps, TablePaginationConfig } from './Table';
-export { ColumnProps } from './Column';
-export { ColumnsType, ColumnType, ColumnGroupType } from './interface';
-export { TableProps, TablePaginationConfig };
+export type { ColumnProps } from './Column';
+export type { ColumnsType, ColumnType, ColumnGroupType } from './interface';
+export type { TableProps, TablePaginationConfig };
 export default Table;

package/lib/table/style/css.js

@@ -1,6 +1,6 @@
 "use strict";
 
-require("../../style/default.css");
+require("../../style/index.css");
 
 require("./index.css");
 

package/lib/table/style/index.d.ts

@@ -1,4 +1,4 @@
-import '../../style/default.less';
+import '../../style/index.less';
 import './index.less';
 import '../../button/style';
 import '../../empty/style';

package/lib/table/style/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-require("../../style/default.less");
+require("../../style/index.less");
 
 require("./index.less");