amis-ui 1.0.0-beta.0

package/scss/themes/_dark-variables.scss

@@ -0,0 +1,129 @@
+@import '../functions';
+
+// dark 主题
+// 参考： https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/
+
+$ns: 'dark-';
+
+$orange: #ff9f0b;
+$yellow: #ffd609;
+$green: #32d74b;
+$turquoise: #00d1b2;
+$cyan: #17a2b8;
+$blue: #0983ff;
+$purple: #bf5af2;
+$red: #dc3545;
+
+$primary: $blue;
+$info: #2296f3;
+$success: $green;
+$warning: $orange;
+$danger: $red;
+$light: #3a3a3a;
+$dark: #1e1f22;
+$black: #141316;
+
+$text-color: rgb(243, 241, 241);
+
+$text--muted-color: #6c6c6c;
+$text--loud-color: lighten($text-color, 10%);
+
+$Page-aside-bg: #3c3c3c;
+$Panel-bg: #302d2a;
+$link-color: $info;
+
+@import '../variables';
+@import '../properties';
+
+:root {
+  --Panel-bg: #{$Panel-bg};
+  --background-head: #191c22;
+  --background: #333538;
+  --body-bg: var(--background);
+  --borderColor: #656565;
+  --Button--default-bg: var(--black);
+  --Calendar-btnCancel-bg: var(--background-head);
+  --Calendar-cell-bg: var(--Panel-bg);
+  --Card-actions-onHover-bg: var(--dark);
+  --Card-actions-onHover-color: var(--text-color);
+  --Card-bg: var(--Panel-bg);
+  --Card-onChecked-bg: var(--black);
+  --Card-onChecked-color: var(--text-color);
+  --Card-onModified-bg: var(--dark);
+  --Card-onModified-color: var(--text-color);
+  --Checkbox-gb: linear-gradient(#515151, #4b4b4b);
+  --Checkbox-onHover-color: var(--blue);
+  --ColorPicker-bg: var(--background);
+  --DatePicker-bg: var(--background);
+  --DatePicker-header-select-borderColor: var(--background);
+  --DropDown-menu-bg: var(--background);
+  --Drawer-header-bg: var(--background);
+  --Fieldset-legend-bgColor: var(--background);
+
+  --Form-item-fontSize: var(--fontSizeBase);
+  --Form-item-fontColor: var(--body-color);
+  --Form-input-addOnBg: var(--Form-input-bg);
+  --Form-input-bg: #3c3c3c;
+  --Form-input-color: var(--text-color);
+  --Form-input-onDisabled-bg: var(--Panel-bg);
+  --Form-select-bg: var(--background);
+  --Form-select-menu-bg: var(--background);
+  --Form-select-onHover-bg: var(--background-head);
+  --Form-selectValue-bg: var(--Panel-bg);
+  --Form-selectValue-color: var(--text-color);
+  --IconPicker-tab-onActive-bg: var(--background);
+  --InputGroup-select-bg: var(--background);
+  --InputGroup-select-onFocused-bg: var(--Panel-bg);
+  --istItem-onModified-bg: var(--black);
+  --Layout-aside-bg: var(--background-head);
+  --Layout-aside-onAcitve-bg: var(--Panel-bg);
+  --Layout-aside-onHover-bg: #404040;
+  --Layout-aside-subList-bg: #131519;
+  --Layout-header-bg: var(--background-head);
+  --List-bg: var(--Panel-bg);
+  --ListControl-item-bg: var(--background);
+  --ListControl-item-onActive-before-bg: var(--background);
+  --ListItem--strip-bg: var(--background);
+  --ListItem-onChecked-bg: var(--black);
+  --ListItem-onChecked-color: var(--text-color);
+  --ListItem-onModified-color: var(--text-color);
+  --Number-handler-bg: var(--background);
+  --Panel--default-bg: linear-gradient(#524e48, #423e3a);
+  --Panel-footerBg: linear-gradient(#524e48, #423e3a);
+  --PopOver-bg: var(--background);
+  --Table-onChecked-bg: var(--black);
+  --Table-onChecked-color: var(--text-color);
+  --Table-onHover-bg: var(--dark);
+  --Table-onHover-bg-rgba: 30, 31, 34;
+  --Table-onModified-bg: var(--black);
+  --Table-onModified-color: var(--text-color);
+  --Table-strip-bg: var(--Panel-bg);
+  --Table-thead-bg: #2f2f2f;
+  --Tabs--card-bg: #323639;
+  --Tabs--card-borderTopColor: var(--background);
+  --Tabs--card-onActive-bg: var(--Panel-bg);
+  --Tabs--radio-bg: var(--Panel-bg);
+  --Tabs--radio-bg: var(--Panel-bg);
+  --Tabs-content-bg: var(--Panel-bg);
+  --Tabs-onActive-bg: var(--Panel-bg);
+  --Tabs-onActive-color: #{lighten($text-color, 10%)};
+  --Tabs-onHover-borderColor: var(--Tabs-onActive-borderColor);
+  --Tabs--chrome-onHover-bg: #36383c;
+  --Tabs--chrome-bg: #333538;
+  --Tooltip--attr-color: var(--text-color);
+  --Transfer-title-bg: #2f2f2f;
+  --TransferSelect--table-heading-bg: var(--background);
+  --TreeSelect-popover-bg: var(--Panel-bg);
+  --Wizard-steps-bg: var(--background-head);
+  --Wizard-steps-li-onActive-arrow-bg: var(--Panel-bg);
+  --Wizard-steps-li-onActive-bg: var(--Panel-bg);
+  --Checkbox-onDisabled-color: #4e4e4e;
+  --Checkbox-onDisabled-bg: var(--Panel-bg);
+  --Radio-onDisabled-color: #4e4e4e;
+  --Radio-onDisabled-bg: var(--Panel-bg);
+
+  // --Nav-subNav-bg: var(--Panel-bg);
+
+  // timeline
+  --TimelineItem--text-primary-color: #{$text-color};
+}

package/scss/themes/ang-ie11.scss

@@ -0,0 +1 @@
+@import url('./ang.scss?__inline');

package/scss/themes/ang.scss

@@ -0,0 +1,4 @@
+// Ang 主题
+@import './ang-variables';
+
+@import './common';

package/scss/themes/antd-ie11.scss

@@ -0,0 +1 @@
+@import url('./antd.scss?__inline');

package/scss/themes/antd.scss

@@ -0,0 +1,5 @@
+// 参考 antd 主题
+
+@import './antd-variables';
+
+@import './common';

package/scss/themes/cxd-ie11.scss

@@ -0,0 +1 @@
+@import url('./cxd.scss?__inline');

package/scss/themes/cxd.scss

@@ -0,0 +1,426 @@
+// 百度云舍主题：http://console.yunshe.design/docs/index
+
+@import './cxd-variables';
+
+@import './common';
+
+.#{$ns}Switch {
+  .text {
+    margin: 0 px2rem(8px) 0 px2rem(25px);
+    vertical-align: super;
+  }
+  .slider {
+    &:before {
+      width: calc(var(--Switch-height) - #{px2rem(4px)});
+      top: px2rem(2px);
+      bottom: px2rem(2px);
+      left: px2rem(2px);
+      transition: all 0.5s ease;
+    }
+  }
+  &:active {
+    .slider::before {
+      width: calc(var(--Switch-height) + #{px2rem(2px)});
+      border-radius: 10px;
+    }
+  }
+  &:hover {
+    background: var(--Switch-onHover-bgColor);
+  }
+  &.is-checked {
+    background: var(--Switch-checked-bgColor);
+
+    .slider::before {
+      right: auto;
+      left: calc(
+        100% - (var(--Switch-height) - #{px2rem(4px)}) - #{px2rem(2px)}
+      );
+    }
+
+    .text {
+      margin: 0 px2rem(25px) 0 px2rem(8px);
+    }
+    &:hover {
+      background: var(--Switch-checked-onHover-bgColor);
+    }
+    &:active {
+      background: var(--Switch-checked-onActive-bgColor);
+      .slider::before {
+        left: calc(
+          100% - (var(--Switch-height) + #{px2rem(2px)}) - #{px2rem(2px)}
+        );
+      }
+    }
+  }
+}
+
+// input选择器模式
+.#{$ns}TextControl-sugs {
+  border-radius: px2rem(3px);
+  // top: calc(var(--Form-input-height) + #{px2rem(4px)});
+  box-shadow: #{px2rem(2px)} #{px2rem(4px)} #{px2rem(8px)} rgba(0, 0, 0, 0.2);
+  border: none;
+}
+
+.#{$ns}Select {
+  .#{$ns}PopOver {
+    .#{$ns}Select-menu {
+      border-radius: #{$R3};
+      .#{$ns}Select-option {
+        // height: var(--Form-input-height);
+        line-height: 1.1;
+        padding: px2rem(5px) px2rem(12px);
+
+        &.is-highlight:hover > span {
+          color: var(--menu-active-color);
+        }
+
+        svg {
+          color: var(--default-icon-color);
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}NestedSelectControl {
+  .#{$ns}PopOver {
+    .#{$ns}NestedSelect-menuOuter {
+      .#{$ns}NestedSelect-menu {
+        border-radius: #{$R3};
+        .#{$ns}NestedSelect-option {
+          height: var(--Form-input-height);
+          padding: 0 px2rem(12px);
+          .#{$ns}NestedSelect-optionArrowRight {
+            padding-right: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          margin-left: 2px;
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}TreeSelectControl {
+  .#{$ns}PopOver {
+    box-shadow: var(--boxShadow);
+    .#{$ns}Tree {
+      border-radius: #{$R3};
+      border: none;
+    }
+  }
+}
+
+.#{$ns}Modal-content {
+  .#{$ns}TreeSelect-popover {
+    box-shadow: var(--boxShadow);
+    .#{$ns}Tree {
+      border-radius: #{$R3};
+      border: none;
+    }
+  }
+}
+
+
+
+.#{$ns}Toast {
+  .#{$ns}Toast-icon {
+    margin-right: #{px2rem(8px)};
+  }
+  .#{$ns}Toast-close {
+    margin-left: #{px2rem(8px)};
+    cursor: pointer;
+  }
+}
+
+.#{$ns}Button--iconOnly {
+  min-width: var(--Button-height);
+}
+
+.#{$ns}Alert {
+  font-weight: #{$W2};
+  .#{$ns}Alert-close {
+    opacity: 1;
+    color: #{$G5};
+    &:hover {
+      color: #{$G4};
+    }
+    &:active {
+      color: #{$G3};
+    }
+  }
+}
+
+.#{$ns}IconPickerControl {
+  .#{$ns}IconPickerControl-input--withAC {
+    .#{$ns}IconPickerControl-sugsPanel {
+      border: none;
+      box-shadow: var(--boxShadow);
+      border-radius: px2rem(3px);
+    }
+  }
+}
+
+.#{$ns}Combo {
+  .#{$ns}Combo-items {
+    .#{$ns}Combo-item {
+      .#{$ns}Combo-delBtn {
+        padding-top: calc(
+          (var(--Form-input-height) - var(--Form-input-lineHeight) * 10px) / 2
+        );
+      }
+    }
+  }
+}
+
+.#{$ns}LocationControl {
+  .#{$ns}PopOver {
+    border: none;
+    box-shadow: var(--boxShadow);
+  }
+}
+
+.#{$ns}Transfer {
+  &-title {
+    flex: 0 0 #{px2rem(38px)};
+    height: #{px2rem(38px)};
+    padding-left: var(--gap-base);
+    padding-right: var(--gap-base);
+  }
+
+  &-result {
+    > .#{$ns}Selections {
+      height: 100%;
+    }
+  }
+
+  &-table-title {
+    background-color: unset;
+  }
+
+  .#{$ns}ListCheckboxes {
+    .#{$ns}ListCheckboxes-item {
+      padding-left: #{px2rem(16px)};
+      padding-right: #{px2rem(16px)};
+    }
+  }
+
+  .#{$ns}TableSelection {
+    .#{$ns}Table-table {
+      border-top: 0;
+      border-left: 0;
+      border-right: 0;
+    }
+
+    tbody {
+      tr {
+        &.is-active {
+          color: unset;
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}GroupedSelection {
+  &-item {
+    padding-left: var(--gap-base);
+    padding-right: var(--gap-base);
+
+    &.is-active {
+      color: unset;
+    }
+  }
+}
+
+.#{$ns}Selections {
+  height: auto;
+
+  &-item {
+    padding-left: var(--gap-base);
+    padding-right: var(--gap-base);
+  }
+  &-mid {
+    min-width: px2rem(16px);
+  }
+
+  .#{$ns}TableSelection {
+    .#{$ns}Table-table > thead > tr,
+    .#{$ns}Table-table > tbody > tr {
+      height: px2rem(40px);
+    }
+  }
+}
+
+.#{$ns}Modal {
+  box-shadow: var(--boxShadow);
+  &-content {
+    padding: #{px2rem(24px)};
+    border-radius: #{$R4};
+  }
+
+  &-body {
+    padding: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
+    font-size: #{$T2};
+    font-weight: #{$W2};
+  }
+
+  &-footer {
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
+
+.#{$ns}Drawer {
+  &-content {
+    border-radius: 0;
+  }
+  &-header {
+    border-radius: #{$R4} 0 0 0;
+  }
+  &-title {
+    font-size: #{$T3};
+    font-weight: #{$W3};
+  }
+
+  &-body {
+    font-size: #{$T3};
+    font-weight: #{$W2};
+  }
+}
+
+.#{$ns}Drawer--right {
+  .#{$ns}Drawer-header {
+    border-radius: #{$R4} 0 0 0;
+  }
+  .#{$ns}Drawer-footer {
+    justify-content: flex-end;
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
+
+.#{$ns}Drawer--left {
+  .#{$ns}Drawer-header {
+    border-radius: 0 #{$R4} 0 0;
+  }
+  .#{$ns}Drawer-footer {
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
+
+.#{$ns}Drawer--top {
+  .#{$ns}Drawer-footer {
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
+.#{$ns}Drawer--bottom {
+  .#{$ns}Drawer-header {
+    border-radius: #{$R4} #{$R4} 0 0;
+  }
+  .#{$ns}Drawer-footer {
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
+
+.#{$ns}Steps {
+  .#{$ns}StepsItem {
+    &-container {
+      &Icon {
+        padding-right: #{px2rem(8px)};
+        .#{$ns}StepsItem-icon {
+          width: #{px2rem(24px)};
+          height: #{px2rem(24px)};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          svg {
+            width: #{px2rem(12px)};
+            height: #{px2rem(12px)};
+            top: 0;
+          }
+        }
+
+        &Wrapper {
+          .#{$ns}StepsItem-body {
+            .#{$ns}StepsItem-title {
+              &:after {
+                padding-right: #{px2rem(8px)};
+              }
+            }
+            .#{$ns}StepsItem-subTitle {
+              padding-left: #{px2rem(8px)};
+            }
+          }
+        }
+      }
+    }
+  }
+  &--vertical {
+    .#{$ns}StepsItem {
+      &-container {
+        &Icon > .#{$ns}StepsItem-icon {
+          &:after {
+            top: px2rem(28px);
+            left: px2rem(10px);
+            transform: translate(px2rem(1px));
+          }
+        }
+      }
+    }
+  }
+  .#{$ns}StepsItem.is-finish {
+    .#{$ns}StepsItem-icon {
+      color: var(--Steps-status-success);
+      background-color: var(--white);
+    }
+  }
+
+  .#{$ns}StepsItem.is-error {
+    .#{$ns}StepsItem-icon {
+      color: var(--Steps-status-error);
+      background-color: var(--white);
+      border: 1px solid var(--Steps-status-error);
+    }
+  }
+}
+
+.#{$ns}Form-feedback {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.#{$ns}Form-item {
+  &--inline {
+    .#{$ns}Form-label {
+      margin-right: #{px2rem(16px)};
+    }
+  }
+}
+
+//FieldSet Form + Collapse
+.#{$ns}Form {
+  .#{$ns}Collapse {
+    border: none;
+    &-header {
+      background-color: var(--white);
+      display: inline-flex;
+      justify-content: flex-end;
+      flex-direction: row-reverse;
+    }
+    &-content {
+      padding: 0;
+    }
+  }
+}

package/scss/themes/dark-ie11.scss

@@ -0,0 +1 @@
+@import url('./dark.scss?__inline');

package/scss/themes/dark.scss

@@ -0,0 +1,3 @@
+@import './dark-variables';
+
+@import './common';

package/scss/themes/default.scss

@@ -0,0 +1,2 @@
+// 只是为了兼容之前的引用，目前已经没有 default 主题了
+@import './cxd';

package/scss/themes/extract-antd-color.py

@@ -0,0 +1,27 @@
+# 用于从 antd 中抽取 color 的脚本，放 components/style 目录下运行
+
+import subprocess
+
+less_vars = []
+
+for line in open('color/colors.less').readlines():
+    if line.startswith('@') and line.find(':') != -1:
+        var_name = line.split(':')[0]
+        less_vars.append(var_name[1:])
+
+tmp_file = open('tmp.less', 'w')
+
+tmp_file.write("@import 'color/colors'; \n")
+
+for var in less_vars:
+    tmp_file.write(
+        ".{var_name} {{ {var_name}: @{var_name} }} \n".format(var_name=var))
+
+tmp_file.close()
+
+result = subprocess.run(['lessc', '--js', 'tmp.less'], stdout=subprocess.PIPE)
+
+
+for line in result.stdout.decode('utf-8').split('\n'):
+    if line.find(':') != -1:
+        print('$' + line.strip())

package/src/components/404.tsx

@@ -0,0 +1,49 @@
+/**
+ * @file 404
+ * @author fex
+ */
+
+import React from 'react';
+import {themeable, ClassNamesFn} from 'amis-core';
+
+interface NotFoundProps {
+  code?: string | number;
+  description?: string;
+  links?: React.ReactNode;
+  footerText?: React.ReactNode;
+  classPrefix: string;
+  classnames: ClassNamesFn;
+}
+
+export class NotFound extends React.Component<NotFoundProps, any> {
+  render() {
+    const {links, footerText, description, children, code} = this.props;
+
+    return (
+      <div className="container w-xxl w-auto-xs m-auto">
+        <div className="text-center m-b-lg">
+          <h1 className="text-shadow text-white">{code || '404'}</h1>
+          {description ? (
+            <div className="text-danger">{description}</div>
+          ) : null}
+        </div>
+
+        {children}
+
+        {links ? (
+          <div className="list-group bg-info auto m-b-sm m-b-lg">{links}</div>
+        ) : null}
+
+        {footerText ? (
+          <div className="text-center">
+            <p>
+              <small className="text-muted">{footerText}</small>
+            </p>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default themeable(NotFound);