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

package/es/form/style/index.less

@@ -1,3 +1,295 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+@import '../../button/style/mixin';
+@import '../../grid/style/mixin';
+@import './components';
+@import './inline';
+@import './horizontal';
+@import './vertical';
+@import './status';
+@import './mixin';
 
-@import './index-pure.less';
+@form-prefix-cls: ~'@{ant-prefix}-form';
+@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
+@form-font-height: ceil(@font-size-base * @line-height-base);
+
+.@{form-prefix-cls} {
+  .reset-component();
+  .reset-form();
+
+  .@{form-prefix-cls}-text {
+    display: inline-block;
+    padding-right: 8px;
+  }
+
+  // ================================================================
+  // =                             Size                             =
+  // ================================================================
+  .formSize(@input-height) {
+    .@{form-item-prefix-cls}-label > label {
+      height: @input-height;
+    }
+
+    .@{form-item-prefix-cls}-control-input {
+      min-height: @input-height;
+    }
+  }
+
+  &-small {
+    .formSize(@input-height-sm);
+  }
+  &-large {
+    .formSize(@input-height-lg);
+  }
+}
+
+.explainAndExtraDistance(@num) when (@num >= 0) {
+  padding-top: floor(@num);
+}
+
+.explainAndExtraDistance(@num) when (@num < 0) {
+  margin-top: ceil(@num);
+  margin-bottom: ceil(@num);
+}
+
+// ================================================================
+// =                             Item                             =
+// ================================================================
+.@{form-item-prefix-cls} {
+  .reset-component();
+
+  margin-bottom: @form-item-margin-bottom;
+  vertical-align: top;
+  // We delay one frame (0.017s) here to let CSSMotion goes
+  transition: margin-bottom @animation-duration-slow 0.017s linear;
+
+  &-with-help {
+    margin-bottom: 0;
+    transition: none;
+  }
+
+  &-hidden,
+  &-hidden.@{ant-prefix}-row {
+    // https://github.com/ant-design/ant-design/issues/26141
+    display: none;
+  }
+
+  // ==============================================================
+  // =                            Label                           =
+  // ==============================================================
+  &-label {
+    display: inline-block;
+    flex-grow: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: right;
+    vertical-align: middle;
+
+    &-left {
+      text-align: left;
+    }
+
+    > label {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      height: @form-item-label-height;
+      color: @label-color;
+      font-size: @form-item-label-font-size;
+
+      > .@{iconfont-css-prefix} {
+        font-size: @form-item-label-font-size;
+        vertical-align: top;
+      }
+
+      // Required mark
+      &.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before {
+        display: inline-block;
+        margin-right: 4px;
+        color: @label-required-color;
+        font-size: @form-item-label-font-size;
+        font-family: SimSun, sans-serif;
+        line-height: 1;
+        content: '*';
+
+        .@{form-prefix-cls}-hide-required-mark & {
+          display: none;
+        }
+      }
+
+      // Optional mark
+      .@{form-item-prefix-cls}-optional {
+        display: inline-block;
+        margin-left: @margin-xss;
+        color: @text-color-secondary;
+
+        .@{form-prefix-cls}-hide-required-mark & {
+          display: none;
+        }
+      }
+
+      // Optional mark
+      .@{form-item-prefix-cls}-tooltip {
+        color: @text-color-secondary;
+        cursor: help;
+        writing-mode: horizontal-tb;
+        margin-inline-start: @margin-xss;
+      }
+
+      &::after {
+        & when (@form-item-trailing-colon=true) {
+          content: ':';
+        }
+        & when not (@form-item-trailing-colon=true) {
+          content: ' ';
+        }
+
+        position: relative;
+        top: -0.5px;
+        margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left;
+      }
+
+      &.@{form-item-prefix-cls}-no-colon::after {
+        content: ' ';
+      }
+    }
+  }
+
+  // ==============================================================
+  // =                            Input                           =
+  // ==============================================================
+  &-control {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    &:first-child:not([class^=~"'@{ant-prefix}-col-'"]):not([class*=~"' @{ant-prefix}-col-'"]) {
+      width: 100%;
+    }
+  }
+
+  &-control-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: @input-height-base;
+
+    &-content {
+      flex: auto;
+      max-width: 100%;
+    }
+  }
+
+  // ==============================================================
+  // =                           Explain                          =
+  // ==============================================================
+  &-explain,
+  &-extra {
+    clear: both;
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    transition: color 0.3s @ease-out; // sync input color transition
+    .explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2);
+  }
+
+  &-explain-connected {
+    height: 0;
+    min-height: 0;
+    opacity: 0;
+  }
+
+  &-extra {
+    min-height: @form-item-margin-bottom;
+  }
+
+  .@{ant-prefix}-input-textarea-show-count {
+    &::after {
+      margin-bottom: -22px;
+    }
+  }
+
+  &-with-help &-explain {
+    height: auto;
+    min-height: @form-item-margin-bottom;
+    opacity: 1;
+  }
+}
+
+// >>>>>>>>>> Motion <<<<<<<<<<
+// Explain holder
+.@{ant-prefix}-show-help {
+  transition: height @animation-duration-slow linear, min-height @animation-duration-slow linear,
+    margin-bottom @animation-duration-slow @ease-in-out,
+    opacity @animation-duration-slow @ease-in-out;
+
+  &-leave {
+    min-height: @form-item-margin-bottom;
+
+    &-active {
+      min-height: 0;
+    }
+  }
+}
+
+// Explain
+.@{ant-prefix}-show-help-item {
+  overflow: hidden;
+  transition: height @animation-duration-slow @ease-in-out,
+    opacity @animation-duration-slow @ease-in-out, transform @animation-duration-slow @ease-in-out !important;
+
+  &-appear,
+  &-enter {
+    transform: translateY(-5px);
+    opacity: 0;
+
+    &-active {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  &-leave-active {
+    transform: translateY(-5px);
+  }
+}
+
+// need there different zoom animation
+// otherwise won't trigger anim
+@keyframes diffZoomIn1 {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes diffZoomIn2 {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes diffZoomIn3 {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@import './rtl';

package/es/grid/style/css.js

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

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

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

package/es/grid/style/index.js

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

package/es/grid/style/index.less

@@ -1,3 +1,119 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
+@import './mixin';
 
-@import './index-pure.less';
+// Grid system
+.@{ant-prefix}-row {
+  display: flex;
+  flex-flow: row wrap;
+
+  &::before,
+  &::after {
+    display: flex;
+  }
+
+  // No wrap of flex
+  &-no-wrap {
+    flex-wrap: nowrap;
+  }
+}
+
+// x轴原点
+.@{ant-prefix}-row-start {
+  justify-content: flex-start;
+}
+
+// x轴居中
+.@{ant-prefix}-row-center {
+  justify-content: center;
+}
+
+// x轴反方向
+.@{ant-prefix}-row-end {
+  justify-content: flex-end;
+}
+
+// x轴平分
+.@{ant-prefix}-row-space-between {
+  justify-content: space-between;
+}
+
+// x轴有间隔地平分
+.@{ant-prefix}-row-space-around {
+  justify-content: space-around;
+}
+
+// 顶部对齐
+.@{ant-prefix}-row-top {
+  align-items: flex-start;
+}
+
+// 居中对齐
+.@{ant-prefix}-row-middle {
+  align-items: center;
+}
+
+// 底部对齐
+.@{ant-prefix}-row-bottom {
+  align-items: flex-end;
+}
+
+.@{ant-prefix}-col {
+  position: relative;
+  max-width: 100%;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+}
+
+.make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(-sm);
+}
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-grid(-md);
+}
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(-lg);
+}
+
+// Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xl-min) {
+  .make-grid(-xl);
+}
+
+// Extra Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xxl-min) {
+  .make-grid(-xxl);
+}
+
+@import './rtl';

package/es/icon/style/css.js

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

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

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

package/es/icon/style/index.js

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

package/es/icon/style/index.less

@@ -1,3 +1,5 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
 
-@import './index-pure.less';
+@icon-prefix-cls: ~'@{ant-prefix}-icon';

package/es/image/style/css.js

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

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

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

package/es/image/style/index.js

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

package/es/image/style/index.less

@@ -1,3 +1,173 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
 
-@import './index-pure.less';
+@image-prefix-cls: ~'@{ant-prefix}-image';
+@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';
+
+.@{image-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  &-img {
+    display: block;
+    width: 100%;
+    height: auto;
+    &-placeholder {
+      background-color: @image-bg;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 30%;
+    }
+  }
+
+  &-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @text-color-inverse;
+    background: fade(@black, 50%);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity @animation-duration-slow;
+
+    &-info {
+      padding: 0 @padding-xss;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      .@{iconfont-css-prefix} {
+        margin-inline-end: @margin-xss;
+      }
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &-placeholder {
+    .box();
+  }
+
+  &-preview {
+    .modal-mask();
+
+    height: 100%;
+    text-align: center;
+
+    &-body {
+      .box();
+      overflow: hidden;
+    }
+
+    &-img {
+      max-width: 100%;
+      max-height: 100%;
+      vertical-align: middle;
+      transform: scale3d(1, 1, 1);
+      cursor: grab;
+      transition: transform 0.3s @ease-out 0s;
+      user-select: none;
+      pointer-events: auto;
+      &-wrapper {
+        .box();
+        transition: transform 0.3s @ease-out 0s;
+        &::before {
+          display: inline-block;
+          width: 1px;
+          height: 50%;
+          margin-right: -1px;
+          content: '';
+        }
+      }
+    }
+
+    &-moving {
+      .@{image-prefix-cls}-preview-img {
+        cursor: grabbing;
+        &-wrapper {
+          transition-duration: 0s;
+        }
+      }
+    }
+
+    &-wrap {
+      z-index: @zindex-image;
+    }
+
+    &-operations {
+      .reset-component();
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+      width: 100%;
+      color: @image-preview-operation-color;
+      list-style: none;
+      background: fade(@modal-mask-bg, 10%);
+      pointer-events: auto;
+
+      &-operation {
+        margin-left: @control-padding-horizontal;
+        padding: @control-padding-horizontal;
+        cursor: pointer;
+        &-disabled {
+          color: @image-preview-operation-disabled-color;
+          pointer-events: none;
+        }
+        &:last-of-type {
+          margin-left: 0;
+        }
+      }
+      &-icon {
+        font-size: @image-preview-operation-size;
+      }
+    }
+
+    &-switch-left,
+    &-switch-right {
+      position: absolute;
+      top: 50%;
+      right: 10px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      margin-top: -22px;
+      color: @image-preview-operation-color;
+      background: fade(@modal-mask-bg, 10%);
+      border-radius: 50%;
+      cursor: pointer;
+      pointer-events: auto;
+      &-disabled {
+        color: @image-preview-operation-disabled-color;
+        cursor: not-allowed;
+        > .@{iconfont-css-prefix} {
+          cursor: not-allowed;
+        }
+      }
+      > .@{iconfont-css-prefix} {
+        font-size: 18px;
+      }
+    }
+
+    &-switch-left {
+      left: 10px;
+    }
+
+    &-switch-right {
+      right: 10px;
+    }
+  }
+}

package/es/index.js

@@ -62,4 +62,4 @@ export { default as Timeline } from './timeline';
 export { default as Tooltip } from './tooltip';
 export { default as Typography } from './typography';
 export { default as Upload } from './upload';
-export { default as version } from './version';
+export { default as version } from './version'; // import '../index-style-only';

package/es/input/Input.d.ts

@@ -64,7 +64,7 @@ declare class Input extends React.Component<InputProps, InputState> {
     clearPasswordValueAttribute: () => void;
     handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    renderComponent: ({ getPrefixCls, direction, input }: ConfigConsumerProps) => JSX.Element;
+    renderComponent: ({ getPrefixCls, direction, input, }: ConfigConsumerProps) => JSX.Element;
     render(): JSX.Element;
 }
 export default Input;