@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/lib/style/index.d.ts

@@ -1,2 +1,12 @@
-import './index.less';
-import './themes.less';
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { DerivativeToken } from '../theme/internal';
+export { operationUnit } from './operationUnit';
+export { roundedArrow } from './roundedArrow';
+export declare const textEllipsis: CSSObject;
+export declare const resetComponent: (token: DerivativeToken) => CSSObject;
+export declare const resetIcon: () => CSSObject;
+export declare const clearFix: () => CSSObject;
+export declare const genLinkStyle: (token: DerivativeToken) => CSSObject;
+export declare const genCommonStyle: (token: DerivativeToken, componentPrefixCls: string) => CSSObject;
+export declare const genFocusOutline: (token: DerivativeToken) => CSSObject;
+export declare const genFocusStyle: (token: DerivativeToken) => CSSObject;

package/lib/style/index.js

@@ -1,2 +1,172 @@
-import "./index.less";
-import "./themes.less";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genLinkStyle = exports.genFocusStyle = exports.genFocusOutline = exports.genCommonStyle = exports.clearFix = void 0;
+Object.defineProperty(exports, "operationUnit", {
+  enumerable: true,
+  get: function get() {
+    return _operationUnit.operationUnit;
+  }
+});
+exports.resetIcon = exports.resetComponent = void 0;
+Object.defineProperty(exports, "roundedArrow", {
+  enumerable: true,
+  get: function get() {
+    return _roundedArrow.roundedArrow;
+  }
+});
+exports.textEllipsis = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _operationUnit = require("./operationUnit");
+
+var _roundedArrow = require("./roundedArrow");
+
+var textEllipsis = {
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+};
+exports.textEllipsis = textEllipsis;
+
+var resetComponent = function resetComponent(token) {
+  return {
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    color: token.colorText,
+    fontSize: token.fontSize,
+    // font-variant: @font-variant-base;
+    lineHeight: token.lineHeight,
+    listStyle: 'none',
+    // font-feature-settings: @font-feature-settings-base;
+    fontFamily: token.fontFamily
+  };
+};
+
+exports.resetComponent = resetComponent;
+
+var resetIcon = function resetIcon() {
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: 'inherit',
+    fontStyle: 'normal',
+    lineHeight: 0,
+    textAlign: 'center',
+    textTransform: 'none',
+    // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
+    verticalAlign: '-0.125em',
+    textRendering: 'optimizeLegibility',
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+    '> *': {
+      lineHeight: 1
+    },
+    svg: {
+      display: 'inline-block'
+    },
+    '& &-icon': {
+      display: 'block'
+    }
+  };
+};
+
+exports.resetIcon = resetIcon;
+
+var clearFix = function clearFix() {
+  return {
+    // https://github.com/ant-design/ant-design/issues/21301#issuecomment-583955229
+    '&::before': {
+      display: 'table',
+      content: '""'
+    },
+    '&::after': {
+      // https://github.com/ant-design/ant-design/issues/21864
+      display: 'table',
+      clear: 'both',
+      content: '""'
+    }
+  };
+};
+
+exports.clearFix = clearFix;
+
+var genLinkStyle = function genLinkStyle(token) {
+  var _a;
+
+  return {
+    a: (_a = {
+      color: token.colorLink,
+      textDecoration: token.linkDecoration,
+      backgroundColor: 'transparent',
+      outline: 'none',
+      cursor: 'pointer',
+      transition: "color " + token.motionDurationSlow,
+      '-webkit-text-decoration-skip': 'objects',
+      '&:hover': {
+        color: token.colorLinkHover
+      },
+      '&:active': {
+        color: token.colorLinkActive
+      }
+    }, (0, _defineProperty2["default"])(_a, "&:active,\n  &:hover", {
+      textDecoration: token.linkHoverDecoration,
+      outline: 0
+    }), (0, _defineProperty2["default"])(_a, '&:focus', {
+      textDecoration: token.linkFocusDecoration,
+      outline: 0
+    }), (0, _defineProperty2["default"])(_a, '&[disabled]', {
+      color: token.colorTextDisabled,
+      cursor: 'not-allowed'
+    }), _a)
+  };
+};
+
+exports.genLinkStyle = genLinkStyle;
+
+var genCommonStyle = function genCommonStyle(token, componentPrefixCls) {
+  var fontFamily = token.fontFamily,
+      fontSize = token.fontSize;
+  var rootPrefixSelector = "[class^=\"" + componentPrefixCls + "\"], [class*=\" " + componentPrefixCls + "\"]";
+  return (0, _defineProperty2["default"])({}, rootPrefixSelector, (0, _defineProperty2["default"])({
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    boxSizing: 'border-box',
+    '&::before, &::after': {
+      boxSizing: 'border-box'
+    }
+  }, rootPrefixSelector, {
+    boxSizing: 'border-box',
+    '&::before, &::after': {
+      boxSizing: 'border-box'
+    }
+  }));
+};
+
+exports.genCommonStyle = genCommonStyle;
+
+var genFocusOutline = function genFocusOutline(token) {
+  return {
+    outline: token.lineWidth * 4 + "px solid " + token.colorPrimaryBorder,
+    outlineOffset: 1,
+    transition: 'outline-offset 0s, outline 0s'
+  };
+};
+
+exports.genFocusOutline = genFocusOutline;
+
+var genFocusStyle = function genFocusStyle(token) {
+  return {
+    '&:focus-visible': (0, _extends2["default"])({}, genFocusOutline(token))
+  };
+};
+
+exports.genFocusStyle = genFocusStyle;

package/lib/style/motion/collapse.d.ts

@@ -0,0 +1,4 @@
+import type { AliasToken, GenerateStyle } from '../../theme/internal';
+import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
+declare const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>>;
+export default genCollapseMotion;

package/lib/style/motion/collapse.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var genCollapseMotion = function genCollapseMotion(token) {
+  var _token$componentCls;
+
+  return (0, _defineProperty2["default"])({}, token.componentCls, (_token$componentCls = {}, (0, _defineProperty2["default"])(_token$componentCls, token.antCls + "-motion-collapse-legacy", {
+    overflow: 'hidden',
+    '&-active': {
+      transition: "height " + token.motionDurationMid + " " + token.motionEaseInOut + ",\n        opacity " + token.motionDurationMid + " " + token.motionEaseInOut + " !important"
+    }
+  }), (0, _defineProperty2["default"])(_token$componentCls, token.antCls + "-motion-collapse", {
+    overflow: 'hidden',
+    transition: "height " + token.motionDurationMid + " " + token.motionEaseInOut + ",\n        opacity " + token.motionDurationMid + " " + token.motionEaseInOut + " !important"
+  }), _token$componentCls));
+};
+
+var _default = genCollapseMotion;
+exports["default"] = _default;

package/lib/style/motion/fade.d.ts

@@ -0,0 +1,7 @@
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import { Keyframes } from '@ant-design/cssinjs';
+import type { AliasToken } from '../../theme/internal';
+import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
+export declare const fadeIn: Keyframes;
+export declare const fadeOut: Keyframes;
+export declare const initFadeMotion: (token: TokenWithCommonCls<AliasToken>, sameLevel?: boolean) => CSSInterpolation;

package/lib/style/motion/fade.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initFadeMotion = exports.fadeOut = exports.fadeIn = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _cssinjs = require("@ant-design/cssinjs");
+
+var _motion = require("./motion");
+
+var fadeIn = new _cssinjs.Keyframes('antFadeIn', {
+  '0%': {
+    opacity: 0
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+exports.fadeIn = fadeIn;
+var fadeOut = new _cssinjs.Keyframes('antFadeOut', {
+  '0%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0
+  }
+});
+exports.fadeOut = fadeOut;
+
+var initFadeMotion = function initFadeMotion(token) {
+  var _ref;
+
+  var sameLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var antCls = token.antCls;
+  var motionCls = antCls + "-fade";
+  var sameLevelPrefix = sameLevel ? '&' : '';
+  return [(0, _motion.initMotion)(motionCls, fadeIn, fadeOut, token.motionDurationMid, sameLevel), (_ref = {}, (0, _defineProperty2["default"])(_ref, "\n        " + sameLevelPrefix + motionCls + "-enter,\n        " + sameLevelPrefix + motionCls + "-appear\n      ", {
+    opacity: 0,
+    animationTimingFunction: 'linear'
+  }), (0, _defineProperty2["default"])(_ref, "" + sameLevelPrefix + motionCls + "-leave", {
+    animationTimingFunction: 'linear'
+  }), _ref)];
+};
+
+exports.initFadeMotion = initFadeMotion;

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

@@ -0,0 +1,6 @@
+import { fadeIn, fadeOut, initFadeMotion } from './fade';
+import { initMoveMotion, moveDownIn, moveDownOut, moveLeftIn, moveLeftOut, moveRightIn, moveRightOut, moveUpIn, moveUpOut } from './move';
+import { initSlideMotion, slideDownIn, slideDownOut, slideLeftIn, slideLeftOut, slideRightIn, slideRightOut, slideUpIn, slideUpOut } from './slide';
+import { initZoomMotion, zoomBigIn, zoomBigOut, zoomDownIn, zoomDownOut, zoomIn, zoomLeftIn, zoomLeftOut, zoomOut, zoomRightIn, zoomRightOut, zoomUpIn, zoomUpOut } from './zoom';
+import genCollapseMotion from './collapse';
+export { initSlideMotion, slideUpIn, slideUpOut, slideDownIn, slideDownOut, slideLeftIn, slideLeftOut, slideRightIn, slideRightOut, zoomOut, zoomIn, zoomBigIn, zoomLeftOut, zoomBigOut, zoomLeftIn, zoomRightIn, zoomUpIn, zoomRightOut, zoomUpOut, zoomDownIn, zoomDownOut, initZoomMotion, fadeIn, fadeOut, initFadeMotion, moveRightOut, moveRightIn, moveLeftOut, moveLeftIn, moveDownOut, moveDownIn, moveUpIn, moveUpOut, initMoveMotion, genCollapseMotion, };

package/lib/style/motion/index.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "fadeIn", {
+  enumerable: true,
+  get: function get() {
+    return _fade.fadeIn;
+  }
+});
+Object.defineProperty(exports, "fadeOut", {
+  enumerable: true,
+  get: function get() {
+    return _fade.fadeOut;
+  }
+});
+Object.defineProperty(exports, "genCollapseMotion", {
+  enumerable: true,
+  get: function get() {
+    return _collapse["default"];
+  }
+});
+Object.defineProperty(exports, "initFadeMotion", {
+  enumerable: true,
+  get: function get() {
+    return _fade.initFadeMotion;
+  }
+});
+Object.defineProperty(exports, "initMoveMotion", {
+  enumerable: true,
+  get: function get() {
+    return _move.initMoveMotion;
+  }
+});
+Object.defineProperty(exports, "initSlideMotion", {
+  enumerable: true,
+  get: function get() {
+    return _slide.initSlideMotion;
+  }
+});
+Object.defineProperty(exports, "initZoomMotion", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.initZoomMotion;
+  }
+});
+Object.defineProperty(exports, "moveDownIn", {
+  enumerable: true,
+  get: function get() {
+    return _move.moveDownIn;
+  }
+});
+Object.defineProperty(exports, "moveDownOut", {
+  enumerable: true,
+  get: function get() {
+    return _move.moveDownOut;
+  }
+});
+Object.defineProperty(exports, "moveLeftIn", {
+  enumerable: true,
+  get: function get() {
+    return _move.moveLeftIn;
+  }
+});
+Object.defineProperty(exports, "moveLeftOut", {
+  enumerable: true,
+  get: function get() {
+    return _move.moveLeftOut;
+  }
+});
+Object.defineProperty(exports, "moveRightIn", {
+  enumerable: true,
+  get: function get() {
+    return _move.moveRightIn;
+  }
+});
+Object.defineProperty(exports, "moveRightOut", {
+  enumerable: true,
+  get: function get() {
+    return _move.moveRightOut;
+  }
+});
+Object.defineProperty(exports, "moveUpIn", {
+  enumerable: true,
+  get: function get() {
+    return _move.moveUpIn;
+  }
+});
+Object.defineProperty(exports, "moveUpOut", {
+  enumerable: true,
+  get: function get() {
+    return _move.moveUpOut;
+  }
+});
+Object.defineProperty(exports, "slideDownIn", {
+  enumerable: true,
+  get: function get() {
+    return _slide.slideDownIn;
+  }
+});
+Object.defineProperty(exports, "slideDownOut", {
+  enumerable: true,
+  get: function get() {
+    return _slide.slideDownOut;
+  }
+});
+Object.defineProperty(exports, "slideLeftIn", {
+  enumerable: true,
+  get: function get() {
+    return _slide.slideLeftIn;
+  }
+});
+Object.defineProperty(exports, "slideLeftOut", {
+  enumerable: true,
+  get: function get() {
+    return _slide.slideLeftOut;
+  }
+});
+Object.defineProperty(exports, "slideRightIn", {
+  enumerable: true,
+  get: function get() {
+    return _slide.slideRightIn;
+  }
+});
+Object.defineProperty(exports, "slideRightOut", {
+  enumerable: true,
+  get: function get() {
+    return _slide.slideRightOut;
+  }
+});
+Object.defineProperty(exports, "slideUpIn", {
+  enumerable: true,
+  get: function get() {
+    return _slide.slideUpIn;
+  }
+});
+Object.defineProperty(exports, "slideUpOut", {
+  enumerable: true,
+  get: function get() {
+    return _slide.slideUpOut;
+  }
+});
+Object.defineProperty(exports, "zoomBigIn", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomBigIn;
+  }
+});
+Object.defineProperty(exports, "zoomBigOut", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomBigOut;
+  }
+});
+Object.defineProperty(exports, "zoomDownIn", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomDownIn;
+  }
+});
+Object.defineProperty(exports, "zoomDownOut", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomDownOut;
+  }
+});
+Object.defineProperty(exports, "zoomIn", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomIn;
+  }
+});
+Object.defineProperty(exports, "zoomLeftIn", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomLeftIn;
+  }
+});
+Object.defineProperty(exports, "zoomLeftOut", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomLeftOut;
+  }
+});
+Object.defineProperty(exports, "zoomOut", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomOut;
+  }
+});
+Object.defineProperty(exports, "zoomRightIn", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomRightIn;
+  }
+});
+Object.defineProperty(exports, "zoomRightOut", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomRightOut;
+  }
+});
+Object.defineProperty(exports, "zoomUpIn", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomUpIn;
+  }
+});
+Object.defineProperty(exports, "zoomUpOut", {
+  enumerable: true,
+  get: function get() {
+    return _zoom.zoomUpOut;
+  }
+});
+
+var _fade = require("./fade");
+
+var _move = require("./move");
+
+var _slide = require("./slide");
+
+var _zoom = require("./zoom");
+
+var _collapse = _interopRequireDefault(require("./collapse"));

package/lib/style/motion/motion.d.ts

@@ -0,0 +1,2 @@
+import type { CSSObject, Keyframes } from '@ant-design/cssinjs';
+export declare const initMotion: (motionCls: string, inKeyframes: Keyframes, outKeyframes: Keyframes, duration: string, sameLevel?: boolean) => CSSObject;

package/lib/style/motion/motion.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initMotion = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var initMotionCommon = function initMotionCommon(duration) {
+  return {
+    animationDuration: duration,
+    animationFillMode: 'both'
+  };
+}; // FIXME: origin less code seems same as initMotionCommon. Maybe we can safe remove
+
+
+var initMotionCommonLeave = function initMotionCommonLeave(duration) {
+  return {
+    animationDuration: duration,
+    animationFillMode: 'both'
+  };
+};
+
+var initMotion = function initMotion(motionCls, inKeyframes, outKeyframes, duration) {
+  var _ref;
+
+  var sameLevel = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var sameLevelPrefix = sameLevel ? '&' : '';
+  return _ref = {}, (0, _defineProperty2["default"])(_ref, "\n      " + sameLevelPrefix + motionCls + "-enter,\n      " + sameLevelPrefix + motionCls + "-appear\n    ", (0, _extends2["default"])((0, _extends2["default"])({}, initMotionCommon(duration)), {
+    animationPlayState: 'paused'
+  })), (0, _defineProperty2["default"])(_ref, "" + sameLevelPrefix + motionCls + "-leave", (0, _extends2["default"])((0, _extends2["default"])({}, initMotionCommonLeave(duration)), {
+    animationPlayState: 'paused'
+  })), (0, _defineProperty2["default"])(_ref, "\n      " + sameLevelPrefix + motionCls + "-enter" + motionCls + "-enter-active,\n      " + sameLevelPrefix + motionCls + "-appear" + motionCls + "-appear-active\n    ", {
+    animationName: inKeyframes,
+    animationPlayState: 'running'
+  }), (0, _defineProperty2["default"])(_ref, "" + sameLevelPrefix + motionCls + "-leave" + motionCls + "-leave-active", {
+    animationName: outKeyframes,
+    animationPlayState: 'running',
+    pointerEvents: 'none'
+  }), _ref;
+};
+
+exports.initMotion = initMotion;

package/lib/style/motion/move.d.ts

@@ -0,0 +1,15 @@
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import { Keyframes } from '@ant-design/cssinjs';
+import type { AliasToken } from '../../theme/internal';
+import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
+export declare const moveDownIn: Keyframes;
+export declare const moveDownOut: Keyframes;
+export declare const moveLeftIn: Keyframes;
+export declare const moveLeftOut: Keyframes;
+export declare const moveRightIn: Keyframes;
+export declare const moveRightOut: Keyframes;
+export declare const moveUpIn: Keyframes;
+export declare const moveUpOut: Keyframes;
+type MoveMotionTypes = 'move-up' | 'move-down' | 'move-left' | 'move-right';
+export declare const initMoveMotion: (token: TokenWithCommonCls<AliasToken>, motionName: MoveMotionTypes) => CSSInterpolation;
+export {};