@aloudata/aloudata-design 0.2.0-beta.5 → 0.2.0-beta.8

package/es/Select/style/index.less

@@ -0,0 +1,532 @@
+// @import './variables.less';
+@import '../../style/index.less';
+
+// @component-prefix:ant-;
+.font(@style: normal, @weight: 400, @size: @size-font-base) {
+  font-weight: @weight;
+  font-size: @size;
+  font-family: @font-family-primary;
+  font-style: @style;
+}
+
+// The prefix to use for components classes
+@component-prefix: ant;
+@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+// vertical margins
+@margin-lg: 24px; // containers
+@margin-md: 16px; // small containers and buttons
+@margin-sm: 12px; // Form controls and items
+@margin-xs: 8px; // small items
+@margin-xss: 4px; // more small
+
+@border-color-base: #a3adc8;
+@border-color-split: hsv(0, 0, 94%); // split border inside a component
+@border-color-inverse: #fff;
+@border-width-base: 1px; // width of the border for a component
+@border-style-base: solid; // style of a components border
+@border-color-disabled: #dfe2ed;
+@select-option-height-lg: @height-lg;
+@select-option-line-height-lg:16px;
+@select-option-height-base:@height-base;
+@select-option-height-sm:@height-sm;
+@line-height-base: 1.5715;
+// @mode: compact;
+
+// Base Text
+// @text-color-base: #313e75;
+// @text-color-disabled: #313e75;
+@text-font-size-base: 14px;
+// @text-lint-height-base: 22px;
+
+//Background Color
+// @background-color-base: #fff;
+// @background-color-disabled: #f7f8fc;
+
+@ald-prefix: ~'@{component-prefix}';
+@select-prefix-cls-legacy: ~'@{component-prefix}-select-legacy';
+@select-input-fontSize: @text-font-size-base;
+@select-input-fontSize-sm: @text-font-size-base - 2px;
+// @color-font-list-primary-normal: @palette-black-6; // $color-black-6
+// @color-box-shadow-focused: #c0c4d3;
+// @color-background-matchHeight: #ffcf3c;
+.@{select-prefix-cls-legacy} {
+  position: relative;
+  display: inline-block;
+  min-width: 120px;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: @border-radius-base;
+  padding: 0 36px 0 12px;
+  outline: none;
+  transition: all 0.2s;
+  cursor: pointer;
+  user-select: none;
+
+  &-selector-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  &-selector {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: @height-base;
+    max-height: @height-base * 3.5px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-radius: @border-radius-base;
+    transition: all 0.2s;
+
+    &::-webkit-scrollbar {
+      width: 2px;
+      background-color: transparent;
+    }
+
+    // &::-webkit-scrollbar-thumb {
+    //   // background: @palette-gray-3;
+    // }
+  }
+
+  &-selector-label {
+    height: @height-base;
+    display: flex;
+    align-items: center;
+    line-height: @height-base;
+    font-size: @select-input-fontSize;
+    color: @NL30;
+    margin-right: @select-label-margin-right;
+    max-width: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  &-values-wrapper {
+    position: relative;
+    width: 100%;
+    line-height: @height-base;
+    color: @NL0;
+  }
+
+  &-bordered {
+    border: 1px solid @NL90;
+  }
+
+  &-bordered:not(&-disabled):not(&-focused):hover {
+    border: 1px solid @B40;
+  }
+
+  // &:not(&-bordered):not(&-disabled):hover {
+  //   // background-color: @palette-gray-2;
+  //   // border: 1px solid transparent;
+  // }
+
+  &-focused:not(&-bordered):not(&-disabled) {
+    // background-color: @color-background-tree-normal;
+    // border: 1px solid @color-background-button-primary-hover;
+    border-radius: 4px;
+  }
+
+  &-focused {
+    // box-shadow: 0 0 6px 0 @color-box-shadow-focused;
+
+    .@{select-prefix-cls-legacy} {
+      &-item-all,
+      &-item {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  &-arrow,
+  &-close {
+    position: absolute;
+    top: 0;
+    right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    // color: @color-text-table-empty;
+    // transition: all 0.2s;
+
+    &-focused {
+      transform: rotate(-180deg);
+    }
+  }
+
+  &-item {
+    max-width: 100%;
+    overflow: hidden;
+    font-size: @select-input-fontSize;
+    transition: margin 0.2s;
+
+    &-text {
+      overflow: hidden;
+      font-size: 14px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: @NL0;
+    }
+  }
+
+  &-tag-item {
+    max-width: 100%;
+    margin-right: 8px;
+    margin-bottom: 5px;
+  }
+
+  &-item-all {
+    display: inline-flex;
+    width: 100%;
+    font-size: @select-input-fontSize;
+    transition: margin 0.2s;
+    .@{select-prefix-cls-legacy}-overflow-item {
+      white-space: nowrap;
+
+      &:not(:first-child)::before {
+        content: ',';
+      }
+
+      &-rest {
+        &::before {
+          content: '' !important;
+        }
+      }
+    }
+
+    &-text {
+      overflow: hidden;
+      font-size: 14px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: @select-placeholder-color;
+  }
+
+  &-input {
+    position: absolute;
+    top: 9px;
+    left: 0;
+    box-sizing: content-box;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  &-input-tags {
+    position: relative;
+    top: 0;
+  }
+
+  &-input-reference {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    visibility: hidden;
+  }
+
+  &-small {
+    border-radius: @border-radius-sm;
+    .@{select-prefix-cls-legacy} {
+      &-selector {
+        min-height: @height-sm;
+        max-height: @height-sm * 3.5px;
+        border-radius: @border-radius-sm;
+      }
+
+      &-selector-label {
+        height: @height-sm;
+        line-height: @height-sm;
+        font-size: @select-input-fontSize-sm;
+        color: @NL30;
+      }
+
+      &-values-wrapper {
+        line-height: @height-sm;
+        font-size: @select-input-fontSize-sm;
+      }
+
+      &-item-all {
+        font-size: @select-input-fontSize-sm;
+
+        &-text {
+          font-size: @select-input-fontSize-sm;
+        }
+      }
+
+      &-placeholder {
+        font-size: @select-input-fontSize-sm;
+      }
+
+      &-tag-item {
+        margin-bottom: 2px;
+      }
+
+      &-input {
+        top: 6px;
+      }
+
+      &-input-tags {
+        top: 0;
+      }
+    }
+  }
+
+  &-large {
+    .@{select-prefix-cls-legacy} {
+      &-selector {
+        min-height: @height-lg;
+        max-height: @height-lg * 3.5px;
+      }
+
+      &-selector-label {
+        height: @height-lg;
+        line-height: @height-lg;
+        font-size: @select-input-fontSize;
+      }
+
+      &-values-wrapper {
+        line-height: @height-lg;
+      }
+
+      &-tag-item {
+        margin-bottom: 7px;
+      }
+
+      &-input {
+        top: 11px;
+      }
+
+      &-input-tags {
+        top: 0;
+      }
+    }
+  }
+
+  &-disabled {
+    color: @NL80;
+    text-shadow: none;
+    background: @NL95;
+    cursor: not-allowed !important;
+    .@{select-prefix-cls-legacy} {
+      &-selector-label {
+        color: inherit;
+      }
+
+      &-values-wrapper {
+        color: inherit;
+      }
+
+      &-placeholder {
+        color: inherit;
+      }
+    }
+  }
+
+  &-bordered&-disabled {
+    border-color: @NL90;
+  }
+
+  // &-focused&-bordered {
+  //   // border: 1px solid @color-border-input-active;
+  // }
+
+  // &-focused:not(&-bordered) {
+  //   background-color: @palette-gray-2;
+  // }
+
+  &-single {
+    .@{select-prefix-cls-legacy} {
+      &-item {
+        display: inline-flex;
+      }
+    }
+  }
+
+  // rc-trigger
+  &-dropdown {
+    position: absolute;
+    background: @BG100;
+    border: 1px solid @NL90;
+    box-shadow: @shadow-actionsheet;
+    border-radius: @border-radius-base;
+    padding: 4px 0;
+    &.@{select-prefix-cls-legacy}-hidden {
+      display: none;
+    }
+  }
+
+  // &-search-highlight {
+  //   // background-color: @color-background-matchHeight;
+  // }
+
+  &-not-found {
+    width: 100%;
+    // color: @color-text-table-empty;
+    text-align: center;
+
+    &-icon {
+      margin-bottom: 40px;
+    }
+  }
+
+  &-gap-10 {
+    width: 10px;
+  }
+
+  &-gap-10 + div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-button {
+    margin-right: 8px;
+  }
+
+  // &-button-active {
+  //   color: @color-text-button-text-hover;
+  //   background: @palette-gray-4;
+  //   border-color: @palette-gray-4;
+  // }
+}
+
+.@{select-prefix-cls-legacy}-list {
+  box-sizing: border-box;
+  // min-width: 160px;
+  // padding: 16px 0 16px 8px;
+  outline: none;
+}
+
+.@{select-prefix-cls-legacy}-list-option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: 100%;
+  user-select: none;
+  // margin-top: 4px;
+  padding: 8px 12px 8px 36px;
+  overflow: hidden;
+  color: @NL0;
+  font-size: 12px;
+  height: @select-option-height-lg;
+  line-height: @select-option-line-height-lg;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &-icon,
+  &-all-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 12px;
+    color: @B40;
+
+    &-checkbox {
+      .@{component-prefix}-checkbox-inner {
+        border-color: @NL90;
+        // background-color: @BG100;
+        border-radius: 4px;
+
+        // &::after {
+        //   // border-color: @B40;
+        // }
+      }
+    }
+    // .@{component-prefix}-checkbox-indeterminate {
+    //   .@{component-prefix}-checkbox-inner {
+    //     &::after {
+    //       border-color: green;
+    //     }
+    //   }
+    // }
+  }
+
+  &-isHover {
+    background-color: @NL97;
+  }
+
+  &-nomargin {
+    margin-top: 0;
+  }
+
+  &-disabled {
+    color: @NL80;
+    text-shadow: none;
+    background-color: @white;
+    cursor: not-allowed !important;
+  }
+
+  &-isSelected,
+  &-all-isSelected {
+    color: @NL0;
+    font-weight: normal;
+    // background-color: @NL97;
+  }
+}
+
+.@{select-prefix-cls-legacy}-list-option-all {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: 100%;
+  // margin-right: 8px;
+  padding: 8px 12px 8px 36px;
+  overflow: hidden;
+  color: @NL0;
+  font-size: 12px;
+  height: @select-option-height-lg;
+  line-height: @select-option-line-height-lg;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  user-select: none;
+
+  &:not(&-disabled):hover {
+    background-color: @NL97;
+  }
+}
+
+.@{select-prefix-cls-legacy}-footer-button-group {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  width: 100%;
+  height: 52px;
+  margin-top: 4px;
+  padding: 0 20px;
+}
+
+.@{select-prefix-cls-legacy}-footer-button-group:first-child button {
+  margin-right: 8px;
+}
+
+.@{select-prefix-cls-legacy}-list-search-bar {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 0 20px 16px 12px;
+}
+
+.@{select-prefix-cls-legacy}-list-group {
+  padding: 6px 12px;
+  // color: @color-background-button-primary-hover;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 20px;
+}

package/es/Table/index.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-import './style';
 import { ITableProps } from './interface';
 declare function Table<T extends Record<string, unknown>>({ columns, data, total, renderHeaderLeft, renderHeaderRight, scrollY, onRowSelected, loadMore, hasNextPage, loading, sortable, defaultSort, resizeColumn, sortDirections: allSortDirections, onChange, }: ITableProps<T>): ReactElement;
 export default Table;

package/es/Table/index.js

@@ -30,7 +30,6 @@ import usePrefixCls from '../_utils/hooks/usePrefixCls';
 import { FixedSizeList } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 import classnames from 'classnames';
-import './style';
 import Icon from '../Icon';
 import Empty from '../Empty';
 import _ from 'lodash';

package/es/Table/style/index.js

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

package/es/Table/style/index.less

@@ -0,0 +1,149 @@
+@import '../../style/index.less';
+
+@ald-prefix:ant;
+@ald-iconfont-css-prefix:anticon;
+@table-row-height:40px;
+
+.ant-block-table {
+  overflow: hidden;
+
+  &-cell {
+    padding: 0 12px;
+    height: @table-row-height;
+    line-height: @table-row-height;
+    border-bottom: 1px solid @NL95;
+    text-align: left;
+    color: @NL0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+  }
+
+  &-row {
+    max-width: 100%;
+  }
+
+  &-thead {
+    .ant-block-table-cell {
+      position: relative;
+      color: @NL50;
+
+      &-sorting {
+        color: @B40;
+      }
+      // border: 1px solid red;
+
+      .ant-block-table-bar {
+        display: inline-block;
+        background: blue;
+        width: 1px;
+        height: 12px;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        z-index: 1;
+        touch-action: none;
+        background-color: @NL95;
+      }
+
+      &:last-child {
+        .ant-block-table-bar {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &-tbody {
+    overflow: hidden;
+
+    &-scroll {
+      overflow-y: scroll;
+      overflow-y: overlay;
+    }
+
+    .ant-block-table-row {
+      &:hover {
+        background-color: @NL97;
+      }
+
+      &-selected {
+        background-color: @BBG97;
+
+        &:hover {
+          background-color: @BBG97;
+        }
+      }
+
+      &:last-of-type {
+        .ant-block-table-cell {
+          border-bottom: 1px solid transparent;
+        }
+      }
+    }
+  }
+
+  &-loading {
+    text-align: center;
+    line-height: @table-row-height;
+    color: @NL80;
+  }
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    align-items: center;
+    margin-bottom: 24px;
+
+    &-left {
+      font-weight: 500;
+      font-size: 14px;
+      color: @NL0;
+    }
+
+    &-right {
+      display: flex;
+      height: 28px;
+      align-items: center;
+      font-size: 14px;
+      color: @NL0;
+    }
+  }
+
+  &-list {
+    overflow: overlay !important;
+  }
+
+  &-sortIcon {
+    margin-left: 4px;
+    margin-top: -2px;
+  }
+
+  &-column-resizable {
+    overflow: overlay;
+
+    .ant-block-table-thead,
+    .ant-block-table-tbody {
+      .ant-block-table-row {
+        .ant-block-table {
+          &-cell {
+            flex: none;
+          }
+
+          &-thead {
+            &::-webkit-scrollbar {
+              display: none;
+            }
+          }
+
+          &-tbody {
+            overflow: initial;
+          }
+        }
+      }
+    }
+  }
+}

package/es/Tabs/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 export declare type TabsSize = 'default' | 'large';
 export interface ITabsProps {
     /**

package/es/Tabs/index.js

@@ -15,7 +15,6 @@ import AntdTabs from 'antd/lib/tabs';
 import Icon from '../Icon';
 import TabPane from './TabPane';
 import classNames from 'classnames';
-import './style';
 export default function Tabs(props) {
   var size = props.size,
       className = props.className,

package/es/Tabs/style/index.js

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