@lemon-fe/components 0.1.78 → 0.1.82

package/es/BaseTable/index.less

@@ -24,9 +24,9 @@
     align-items: center;
     justify-content: flex-end;
     height: 100%;
+    padding-left: 8px;
     white-space: nowrap;
     background-color: inherit;
-    background-clip: content-box;
 
     &::before {
       position: absolute;

package/es/ColorPicker/index.less

@@ -0,0 +1,47 @@
+.lemon-color-picker {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  padding: 6px;
+  color: #333;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &-hex {
+    user-select: none;
+  }
+
+  &-color {
+    width: 120px;
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  &-alpha {
+    padding: 0 6px 0 12px;
+    line-height: 20px;
+    border-left: 1px solid #ccc;
+    user-select: none;
+  }
+  &-pop {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    z-index: 1000;
+  }
+  &-react-picker {
+    border-radius: 4px;
+    box-shadow: #00000026 0 0 0 1px, #00000026 0 8px 16px;
+  }
+  &-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 800;
+    width: 100%;
+    height: 100%;
+  }
+}

package/es/MainFramework/components/Menu/index.less

@@ -1,407 +0,0 @@
-.transition() {
-  transition: background-color 0.2s;
-}
-
-.@{prefixCls}-menu {
-  flex: 0 0 200px;
-  min-width: 0;
-  height: 100%;
-  padding: 8px 0;
-  white-space: nowrap;
-  transition: flex 0.1s;
-
-  &-collapsed {
-    flex: 0 0 52px;
-  }
-
-  &-bar {
-    position: relative;
-    z-index: 3;
-    box-sizing: border-box;
-    width: 100%;
-    background: #f2f2f2;
-  }
-
-  &-collapse {
-    position: absolute;
-    right: 0;
-    z-index: 1;
-    box-sizing: content-box;
-    width: 20px;
-    height: 20px;
-    padding: 12px;
-    color: #333;
-    transform: rotate(180deg);
-    cursor: pointer;
-
-    &:hover {
-      color: .primary() [];
-    }
-  }
-
-  &-collapsed &-collapse {
-    position: static;
-    padding: 12px 16px;
-    transform: rotate(0);
-  }
-
-  &-collapsed &-popup {
-    left: 52px;
-  }
-
-  &-top-item {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    height: 44px;
-    padding: 0 16px;
-    overflow: hidden;
-    color: #333;
-    font-size: 14px;
-    border-radius: 8px;
-    cursor: pointer;
-    .transition();
-
-    &:hover,
-    &-popover-active {
-      background: #e6e6e6;
-    }
-
-    &-active {
-      font-weight: 500;
-      background-color: #e6e6e6;
-
-      &::before {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        display: block;
-        width: 2px;
-        height: 14px;
-        margin-top: -7px;
-        content: '';
-      }
-    }
-  }
-
-  &-icon {
-    width: 20px;
-    height: 20px;
-    margin-right: 8px;
-    color: rgba(108, 108, 108, 1);
-    font-size: 16px;
-  }
-
-  &-favorite-star {
-    color: var(--ant-primary-color);
-  }
-
-  &-title {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-top-item:hover &-icon {
-    color: #333;
-  }
-
-  &-top-item&-top-item-active &-title,
-  &-top-item&-top-item-active &-icon {
-    color: .primary() [];
-  }
-
-  &-popup {
-    position: absolute;
-    top: 0;
-    left: 200px;
-    z-index: 2;
-    transition: left 0.1s;
-
-    &-body {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      margin-left: 4px;
-      padding: 8px;
-      background: #fff;
-      border-radius: 10px;
-      box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
-        0 6px 16px -8px rgba(0, 0, 0, 0.08);
-      transform: translate3d(-20px, 0, 0);
-      opacity: 0;
-      transition: all 0.15s;
-    }
-
-    &-tip {
-      height: 36px;
-      margin: 4px 0 0 4px;
-      padding: 0 16px;
-      color: #fff;
-      line-height: 36px;
-      text-align: center;
-      background-color: .primary() [];
-      border-radius: 22px;
-      transform: translate3d(-10px, 0, 0);
-      opacity: 0;
-      transition: all 0.15s;
-    }
-
-    &.animated &-body,
-    &.animated &-tip {
-      transform: translate3d(0, 0, 0);
-      opacity: 1;
-    }
-  }
-
-  &-block {
-    display: inline-block;
-
-    &-empty {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 256px;
-      height: 180px;
-
-      & > span {
-        margin-top: 24px;
-        color: #333;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 22px;
-        opacity: 0.5;
-      }
-    }
-
-    &-favorite {
-      display: grid;
-      grid-auto-flow: column;
-      grid-template-rows: repeat(5, auto);
-    }
-  }
-
-  &-sub-item {
-    box-sizing: border-box;
-    width: 120px;
-    height: 40px;
-    padding: 0 16px;
-    color: rgba(51, 51, 51, 0.5);
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 40px;
-  }
-
-  &-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    width: 120px;
-    height: 40px;
-    padding: 9px 4px 9px 16px;
-    color: rgba(51, 51, 51, 1);
-    font-size: 14px;
-    line-height: 40px;
-    border-radius: 8px;
-    cursor: pointer;
-    .transition();
-
-    &:hover {
-      background-color: #e6e6e6;
-    }
-
-    &-favorite {
-      display: none;
-
-      &:hover {
-        display: block;
-      }
-
-      & > svg {
-        display: block;
-      }
-    }
-
-    &:hover &-favorite {
-      display: block;
-    }
-  }
-
-  &-gutter {
-    height: 1px;
-    margin: 12px 0 16px 12px;
-    background-color: rgba(196, 196, 196, 0.2);
-  }
-
-  &-collapsed &-gutter {
-    margin: 0 12px;
-  }
-
-  &-label {
-    margin: 0 0 12px 12px;
-    color: rgba(0, 0, 0, 0.5);
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  &-divider-div {
-    padding-left: 16px;
-  }
-
-  &-divider-div-collapsed {
-    padding-right: 12px;
-    padding-left: 12px;
-  }
-
-  &-divider {
-    margin-top: 12px;
-    margin-bottom: 16px;
-  }
-
-  &-other-title {
-    margin: 0 0 8px 16px;
-    color: #000;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 22px;
-    opacity: 0.5;
-  }
-
-  &-more {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: 107px;
-    height: 36px;
-    margin-left: 12px;
-    color: .primary() [];
-    font-size: 14px;
-    text-align: center;
-    background-color: #fff;
-    border: 1px solid .primary() [];
-    border-radius: 4px;
-    cursor: pointer;
-    user-select: none;
-    .transition();
-
-    &:hover {
-      background-color: rgba(222, 234, 255, 1);
-    }
-
-    & > span {
-      margin-left: 8px;
-    }
-  }
-
-  &-drawer {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 10;
-    width: 740px;
-    height: 100vh;
-    background-color: #fff;
-    box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
-      0 6px 16px -8px rgba(0, 0, 0, 0.08);
-    transform: translate3d(60px, 0, 0);
-    opacity: 0;
-    transition: all 0.2s;
-
-    &.animated {
-      transform: translate3d(0, 0, 0);
-      opacity: 1;
-    }
-
-    &-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 56px;
-      padding: 0 24px;
-      color: #333;
-      font-weight: 500;
-      font-size: 16px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-    }
-
-    &-body {
-      height: calc(100vh - 56px);
-      padding: 16px;
-      overflow-x: hidden;
-      overflow-y: auto;
-    }
-
-    &-col {
-      display: inline-block;
-      width: 33.33333333%;
-      vertical-align: top;
-    }
-
-    .item() {
-      height: 44px;
-      padding: 0 16px;
-      font-size: 14px;
-      line-height: 44px;
-    }
-
-    &-1 {
-      color: rgba(51, 51, 51, 1);
-      font-weight: 500;
-      .item();
-
-      &-path {
-        cursor: pointer;
-        .transition();
-
-        &:hover {
-          color: .primary() [];
-          background-color: rgba(238, 238, 238, 1);
-        }
-      }
-    }
-
-    &-2 {
-      color: rgba(51, 51, 51, 0.5);
-      font-weight: 500;
-      .item();
-    }
-
-    &-3 {
-      color: rgba(51, 51, 51, 1);
-      cursor: pointer;
-      .item();
-      .transition();
-
-      &:hover {
-        color: .primary() [];
-        background-color: rgba(238, 238, 238, 1);
-      }
-    }
-
-    &-block {
-      padding: 8px;
-
-      & > div {
-        overflow: hidden;
-        background-color: rgba(238, 238, 238, 0.5);
-        border-radius: 8px;
-      }
-    }
-
-    &-close {
-      cursor: pointer;
-
-      &:hover {
-        color: .primary() [];
-      }
-    }
-  }
-
-  &-active {
-    color: .primary() [];
-  }
-}

package/es/Table/typings.d.ts

@@ -22,5 +22,4 @@ export interface TableProps<RecordType> extends BaseTableProps<RecordType> {
   autoLoad?: boolean;
   actionRef?: RefObject<TableRef<RecordType>>;
   onLoading?: (loading: boolean) => void;
-  pagination?: PaginationProps;
 }

package/es/index.less

@@ -11,6 +11,7 @@
 @import './DurationPicker/index.less';
 @import './InputMaxLength/index.less';
 @import './TipMark/index.less';
+@import './ColorPicker/index.less';
 @import './Popup/index.less';
 @import './SiderTree/index.less';
 @import './FormLayout/index.less';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.1.78",
+  "version": "0.1.82",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -19,6 +19,8 @@
     "@lemon-fe/hooks": "^0.1.67",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
+    "react-color": "^2.19.3",
+    "react-gcolor-picker": "^1.2.4",
     "react-resizable": "^3.0.4"
   },
   "peerDependencies": {
@@ -35,11 +37,12 @@
   "devDependencies": {
     "@types/color-string": "^1.5.2",
     "@types/lodash": "^4.14.179",
+    "@types/react-color": "^3.0.6",
     "@types/react-resizable": "^1.7.4",
     "antd": "^4.21.6",
     "rc-resize-observer": "^1.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "c3ea23e58ff912db41794c92c844fcf9b2d7c18c"
+  "gitHead": "c2ffb0903a7684bd2815c86144cbb5007215c104"
 }

package/es/Actions/index.d.ts

@@ -1,26 +0,0 @@
-import { ReactElement } from 'react';
-import type { CSSProperties } from 'react';
-import { ButtonProps } from 'antd';
-interface ActionBtn extends ButtonProps {
-    text: string | ReactElement;
-    onClick?: () => void;
-    /**
-     * @deprecated
-     * 请不要使用
-     */
-    action?: () => void;
-    dropDown?: ({
-        text: string;
-        onClick: () => void;
-        disabled?: boolean;
-    } | null)[];
-}
-interface Props {
-    actions: (ActionBtn | ReactElement | null)[];
-    style?: CSSProperties;
-    className?: string;
-    prefixCls?: string;
-    maxShowCount?: number;
-}
-declare function Actions(props: Props): JSX.Element;
-export default Actions;

package/es/Actions/index.js

@@ -1,171 +0,0 @@
-var _excluded = ["disabled", "dropDown", "text", "onClick", "icon", "action"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-import React, { Fragment, useState } from 'react';
-import { Space, Dropdown, Menu, Button, Popover } from 'antd';
-import classNames from 'classnames';
-import Icons from '../Icons';
-import { PREFIX_CLS } from '../constants';
-
-function Actions(props) {
-  var actions = props.actions,
-      className = props.className,
-      style = props.style,
-      _props$prefixCls = props.prefixCls,
-      prefixCls = _props$prefixCls === void 0 ? PREFIX_CLS : _props$prefixCls,
-      _props$maxShowCount = props.maxShowCount,
-      maxShowCount = _props$maxShowCount === void 0 ? 3 : _props$maxShowCount;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var visibleBtns = actions.slice(0, maxShowCount);
-  var collapsedBtns = actions.slice(maxShowCount);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-actions"), className),
-    style: style
-  }, /*#__PURE__*/React.createElement(Space, {
-    direction: "horizontal",
-    size: 12
-  }, visibleBtns.map(function (item, index) {
-    if (item === null) {
-      return item;
-    }
-
-    if ( /*#__PURE__*/React.isValidElement(item)) {
-      return /*#__PURE__*/React.createElement(Fragment, {
-        key: index
-      }, item);
-    }
-
-    var disabled = item.disabled,
-        dropDown = item.dropDown,
-        text = item.text,
-        onClick = item.onClick,
-        icon = item.icon,
-        action = item.action,
-        rest = _objectWithoutProperties(item, _excluded);
-
-    if ( /*#__PURE__*/React.isValidElement(text)) {
-      return /*#__PURE__*/React.createElement(Fragment, {
-        key: index
-      }, text);
-    }
-
-    var handleClick = onClick || action;
-
-    if (Array.isArray(dropDown)) {
-      var overlay = /*#__PURE__*/React.createElement(Menu, null, dropDown.map(function (subItem) {
-        if (subItem) {
-          return /*#__PURE__*/React.createElement(Menu.Item, {
-            onClick: function onClick() {
-              return subItem.onClick();
-            },
-            key: subItem.text,
-            disabled: subItem.disabled
-          }, subItem.text);
-        }
-      }));
-
-      if (handleClick !== undefined) {
-        return /*#__PURE__*/React.createElement(Dropdown.Button, {
-          key: text,
-          disabled: disabled,
-          overlay: overlay,
-          onClick: handleClick,
-          buttonsRender: function buttonsRender(_ref) {
-            var _ref2 = _slicedToArray(_ref, 2),
-                leftBtn = _ref2[0],
-                _ = _ref2[1];
-
-            return [leftBtn, /*#__PURE__*/React.createElement(Button, {
-              icon: /*#__PURE__*/React.createElement(Icons.More, null)
-            })];
-          }
-        }, text);
-      }
-
-      return /*#__PURE__*/React.createElement(Dropdown, {
-        key: text,
-        disabled: disabled,
-        overlay: overlay
-      }, /*#__PURE__*/React.createElement(Button, _objectSpread({
-        disabled: disabled,
-        icon: icon
-      }, rest), text, /*#__PURE__*/React.createElement(Icons.Down, {
-        style: {
-          opacity: 0.7,
-          fontSize: 16,
-          verticalAlign: -3
-        }
-      })));
-    }
-
-    return /*#__PURE__*/React.createElement(Button, _objectSpread({
-      key: text,
-      disabled: disabled,
-      onClick: handleClick,
-      icon: icon
-    }, rest), text);
-  }), collapsedBtns.length > 0 ? /*#__PURE__*/React.createElement(Popover, {
-    placement: "bottomRight",
-    overlayClassName: "".concat(prefixCls, "-actions-popover"),
-    onVisibleChange: setVisible,
-    visible: visible,
-    trigger: "click",
-    content: collapsedBtns.map(function (item, index) {
-      if (item === null) {
-        return item;
-      }
-
-      if ( /*#__PURE__*/React.isValidElement(item)) {
-        return /*#__PURE__*/React.createElement(Fragment, {
-          key: index
-        }, item);
-      }
-
-      var disabled = item.disabled;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames("".concat(prefixCls, "-actions-popover-item"), _defineProperty({}, "".concat(prefixCls, "-actions-popover-item-disabled"), disabled)),
-        key: index,
-        onClick: function onClick() {
-          if (!disabled) {
-            var handleClick = item.onClick || item.action;
-            setVisible(false);
-
-            if (handleClick) {
-              handleClick();
-            }
-          }
-        }
-      }, item.text);
-    })
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(Icons.More, null)
-  })) : null));
-}
-
-export default Actions;