@lemon-fe/components 0.1.154 → 1.1.0-alpha.0

package/es/styles/overrides.less

@@ -0,0 +1,347 @@
+a[title='站长统计'] {
+  display: none;
+}
+
+@blue-base: #2357df;
+
+::selection {
+  color: inherit;
+  background: #d3ddf9;
+}
+
+/** basic */
+
+@height-base: 32px;
+@border-color-base: #d9d9d9;
+@border-color-split: #dcdcdc;
+@border-radius-base: 4px;
+@label-color: #666666;
+
+@padding-lg: 16px;
+@padding-md: 12px;
+@padding-sm: 8px;
+@padding-xs: 6px;
+
+/** table */
+
+@table-header-bg: #f0f0f0;
+@table-header-color: rgba(51, 51, 51, 0.65);
+@table-padding-vertical: 14px;
+@table-border-color: #e1e1e1;
+@table-border-radius-base: 4px;
+@table-row-hover-bg: #eee;
+
+.@{ant-prefix}-table-thead > tr > th {
+  border-bottom: none;
+
+  &::before {
+    display: none;
+  }
+}
+
+.@{ant-prefix}-table-body {
+  .scrollBar();
+}
+
+.@{ant-prefix}-table-tbody > tr.@{ant-prefix}-table-row-selected > td {
+  border-color: @table-border-color;
+}
+
+.@{ant-prefix}-table-cell {
+  .@{ant-prefix}-checkbox-checked .@{ant-prefix}-checkbox-inner::after {
+    transition: none !important;
+  }
+
+  .@{ant-prefix}-checkbox-inner {
+    transition: none !important;
+  }
+
+  .@{ant-prefix}-checkbox-checked::after {
+    animation: none !important;
+  }
+}
+
+.@{ant-prefix}-table-pagination.@{ant-prefix}-pagination {
+  margin-bottom: 0;
+}
+
+/** modal */
+@modal-header-padding-horizontal: 0;
+@modal-header-padding-vertical: 0;
+@modal-header-border-width: 0;
+@modal-header-title-line-height: 24px;
+@modal-body-padding: 0;
+@modal-footer-padding-horizontal: 0;
+@modal-footer-padding-vertical: 0;
+@modal-border-radius: 8px;
+@modal-footer-border-width: 0;
+@modal-confirm-body-padding: 0;
+
+.@{ant-prefix}-modal-content {
+  padding: @padding-md;
+}
+
+.@{ant-prefix}-modal-confirm .@{ant-prefix}-modal-content {
+  padding: 20px;
+}
+
+.@{ant-prefix}-modal-header {
+  padding-bottom: @padding-md;
+}
+
+.@{ant-prefix}-modal-footer {
+  padding-top: @padding-md;
+}
+
+.@{ant-prefix}-modal-confirm-body > .anticon {
+  margin-right: 8px;
+}
+
+.@{ant-prefix}-modal-confirm-body
+  > .anticon
+  + .@{ant-prefix}-modal-confirm-title
+  + .@{ant-prefix}-modal-confirm-content {
+  margin-left: 30px;
+}
+
+.@{ant-prefix}-modal-confirm-body .@{ant-prefix}-modal-confirm-content {
+  color: fade(#333, 70);
+}
+
+.@{ant-prefix}-modal-close {
+  top: @padding-md;
+  right: @padding-md - 5px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #f2f3f5;
+  }
+
+  &-x {
+    width: 24px;
+    height: 24px;
+    color: rgba(51, 51, 51, 0.5);
+    font-size: 14px;
+    line-height: 24px;
+  }
+}
+
+/** pagination */
+
+.@{ant-prefix}-pagination {
+  color: #666;
+
+  .@{ant-prefix}-select {
+    color: #666;
+  }
+}
+
+.@{ant-prefix}-pagination-item {
+  font-size: 12px;
+
+  a {
+    color: #666;
+  }
+}
+
+.@{ant-prefix}-pagination-item-active {
+  background: @primary-color;
+
+  a {
+    color: #fff;
+  }
+
+  &:hover a {
+    color: #fff;
+  }
+}
+
+.@{ant-prefix}-pagination-options .@{ant-prefix}-select.@{ant-prefix}-select-in-form-item {
+  width: auto;
+}
+
+/** input */
+@input-height-base: 28px;
+@input-padding-horizontal-base: 8px;
+@input-icon-color: rgba(51, 51, 51, 0.7);
+@input-padding-vertical-base: (
+    round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10
+  ) - @border-width-base;
+@input-disabled-color: fade(#333, 50);
+@input-disabled-bg: #fff;
+
+.@{ant-prefix}-input-prefix,
+.@{ant-prefix}-input-suffix {
+  color: rgba(51, 51, 51, 0.7);
+}
+
+/** picker */
+.@{ant-prefix}-picker {
+  .@{ant-prefix}-picker-clear {
+    padding: 1px;
+    font-size: 14px;
+    background-color: #fff;
+  }
+
+  &-suffix {
+    color: fade(#333, 70);
+  }
+
+  &&-disabled &-suffix {
+    color: fade(#333, 40);
+  }
+}
+
+/** select */
+@select-multiple-item-disabled-color: @input-disabled-color;
+.@{ant-prefix}-select {
+  &-arrow {
+    color: fade(#333, 70);
+    font-size: 14px;
+  }
+
+  &-disabled&:not(&-customize-input) &-selector {
+    color: @input-disabled-color;
+  }
+
+  &-disabled &-arrow {
+    color: fade(#333, 49);
+  }
+}
+
+/** tree */
+@tree-title-height: 28px;
+@tree-node-hover-bg: #f2f3f5;
+@tree-node-selected-bg: (.primary(0.1) []);
+@tree-node-padding: 0;
+@tree-node-indent-width: 16px;
+
+.@{ant-prefix}-tree {
+  &-switcher {
+    width: @tree-node-indent-width;
+
+    &-leaf-line {
+      vertical-align: top;
+
+      &::before {
+        right: (@tree-node-indent-width / 2);
+      }
+
+      &::after {
+        width: (@tree-node-indent-width / 2);
+        height: (@tree-title-height / 2);
+      }
+    }
+  }
+
+  &-indent {
+    &-unit {
+      width: @tree-node-indent-width;
+      vertical-align: top;
+    }
+  }
+
+  &-show-line &-indent {
+    &-unit {
+      &::before {
+        right: (@tree-node-indent-width / 2);
+      }
+    }
+  }
+
+  & &-treenode-leaf-last &-switcher-leaf-line::before {
+    height: (@tree-title-height / 2) !important;
+  }
+
+  & &-treenode-draggable &-draggable-icon {
+    width: @tree-node-indent-width;
+  }
+}
+
+/** button **/
+@btn-height-base: 28px;
+@btn-height-sm: 24px;
+@btn-default-border: #c4c4c4;
+@btn-padding-horizontal-base: 11px;
+
+/** empty */
+.@{ant-prefix}-empty {
+  color: #00000040;
+}
+
+/** tabs **/
+@tabs-horizontal-padding: 5px 0;
+@tabs-horizontal-gutter: 40px;
+@tabs-card-horizontal-padding: 5px;
+
+/** checkbox **/
+@checkbox-group-item-margin-right: 12px;
+
+.@{ant-prefix}-checkbox + span {
+  padding-right: 0;
+  padding-left: 4px;
+}
+
+.@{ant-prefix}-checkbox-wrapper {
+  & + & {
+    margin-left: 12px;
+  }
+}
+
+.@{ant-prefix}-checkbox-group {
+  &-item + &-item {
+    margin-left: 0px;
+  }
+}
+
+/** radio **/
+@radio-wrapper-margin-right: 12px;
+span.@{ant-prefix}-radio + * {
+  padding-right: 0;
+  padding-left: 4px;
+}
+
+.@{ant-prefix}-radio-wrapper:last-child {
+  margin-right: 0;
+}
+
+/** message **/
+@message-notice-content-padding: 4px 12px;
+
+.@{ant-prefix}-message {
+  &-notice-content {
+    color: fade(#333, 80);
+    border-radius: 15px;
+  }
+
+  .anticon {
+    margin-right: 4px;
+  }
+}
+
+/** tooltip **/
+@tooltip-arrow-width: 5px * sqrt(2);
+
+/** form **/
+.@{ant-prefix}-form-item {
+  &-explain-error {
+    margin-top: 4px;
+    color: #ff4128;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+
+/** alert **/
+@alert-padding-vertical: @padding-xs - 2;
+
+.@{ant-prefix}-alert {
+  align-items: flex-start;
+
+  &-icon {
+    padding: 2px 0;
+    font-size: 18px;
+  }
+}

package/es/styles/theme.less

@@ -0,0 +1,29 @@
+@prefixCls: lemon;
+@space: 16px;
+
+@space-h: 12px;
+@space-v: 12px;
+
+html {
+  --lemon-primary-color: 35, 87, 223;
+}
+
+.@{prefixCls}-thin-scroll-bar {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}

package/es/{utils.less → styles/utils.less}

@@ -62,18 +62,18 @@
   height: 100%;
 
   & > .@{ant-prefix}-tabs-nav {
-    margin-bottom: 12px;
+    margin-bottom: @padding-md;
 
     .@{ant-prefix}-tabs-tab {
-      padding: 8px 12px;
+      padding: 0 0 5px;
 
       &.@{ant-prefix}-tabs-tab-active .@{ant-prefix}-tabs-tab-btn {
         text-shadow: unset;
       }
     }
 
-    .@{ant-prefix}-tabs-tab + .@{ant-prefix}-tabs-tab {
-      margin-left: 24px;
+    .@{ant-prefix}-tabs-nav-more {
+      padding: 0;
     }
   }
 
@@ -90,21 +90,21 @@
   }
 }
 
-.scrollBar (@width: 6px) {
-  scrollbar-width: thin;
+.scrollBar (@width: 8px) {
+  // scrollbar-width: thin;
 
-  &::-webkit-scrollbar {
-    width: @width;
-    height: 8px;
-  }
+  // &::-webkit-scrollbar {
+  //   width: @width;
+  //   height: 8px;
+  // }
 
-  &::-webkit-scrollbar-track {
-    background-color: #fff;
-    border-radius: 10px; // 滑块颜色
-  }
+  // &::-webkit-scrollbar-track {
+  //   background-color: #fff;
+  //   border-radius: 4px;
+  // }
 
-  &::-webkit-scrollbar-thumb {
-    background-color: #ddd;
-    border-radius: 10px; // 滑块颜色
-  }
+  // &::-webkit-scrollbar-thumb {
+  //   background-color: #ddd;
+  //   border-radius: 4px;
+  // }
 }

package/es/symbol-icon/index.js

@@ -0,0 +1,30 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { PREFIX_CLS } from "../constants";
+import classNames from 'classnames';
+export default function Icon(props) {
+  var name = props.name,
+    size = props.size,
+    color = props.color,
+    styleProp = props.style,
+    className = props.className;
+  var style = styleProp;
+  if (size || color) {
+    style = _objectSpread(_objectSpread({}, style), {}, {
+      fontSize: size,
+      color: color
+    });
+  }
+  return /*#__PURE__*/React.createElement("svg", {
+    className: classNames("".concat(PREFIX_CLS, "-symbol-icon"), className),
+    "aria-hidden": "true",
+    style: style
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#".concat(name)
+  }));
+}

package/es/{TabBar → tab-bar}/index.d.ts

@@ -1,5 +1,4 @@
-import { CSSProperties } from 'react';
-import type { MouseEvent } from 'react';
+import type { MouseEvent, CSSProperties, KeyboardEvent } from 'react';
 interface Props {
     tabs: {
         title: string;
@@ -8,7 +7,7 @@ interface Props {
     activeKey?: string;
     className?: string;
     style?: CSSProperties;
-    onTabClick: (key: string, index: number, e: MouseEvent) => void;
+    onTabClick: (key: string, index: number, e: MouseEvent | KeyboardEvent) => void;
 }
 export default function TabBar(props: Props): JSX.Element;
 export {};

package/es/tab-bar/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { prefixClassName } from "../utils";
+import { Tabs } from 'antd';
+import classNames from 'classnames';
+export default function TabBar(props) {
+  var tabs = props.tabs,
+    _onTabClick = props.onTabClick,
+    activeKey = props.activeKey,
+    style = props.style,
+    className = props.className;
+  var getKey = function getKey(tab) {
+    return tab.key || tab.title;
+  };
+  return /*#__PURE__*/React.createElement(Tabs, {
+    onTabClick: function onTabClick(key, e) {
+      var index = tabs.findIndex(function (item) {
+        return getKey(item) === key;
+      });
+      _onTabClick(key, index, e);
+    },
+    activeKey: activeKey,
+    style: style,
+    className: classNames(prefixClassName('tab-bar')(), className),
+    items: tabs.map(function (item) {
+      return {
+        label: item.title,
+        key: getKey(item)
+      };
+    })
+  });
+}

package/es/tab-bar/index.less

@@ -0,0 +1,5 @@
+.@{prefixCls}-tab-bar {
+  .@{ant-prefix}-tabs-nav {
+    margin-bottom: 0;
+  }
+}