@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/navigation/rtl.scss

@@ -0,0 +1,132 @@
+$module: #{$prefix}-navigation;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        border-right: 0;
+        border-left: $width-navigation_border solid $color-navigation_border-default;
+        transition: $motion-navigation_padding_rtl, $motion-navigation_width;
+
+        &-collapsed {
+            transition: $motion-navigation_padding_rtl, $motion-navigation_width;
+        }
+
+        &-item-icon:first-child {
+            margin-right: 0;
+            margin-left: $width-navigation_icon_text_between;
+        }
+
+        &-item-icon:last-child {
+            margin-left: 0;
+            margin-right: auto;
+        }
+
+        &-sub {
+            .#{$module}-item {
+
+                & > &-text:first-child {
+                    margin-left: auto;
+                    margin-right: $spacing-base-tight + $width-navigation_icon_left + $width-navigation_icon_text_between;
+                }
+
+                & > .#{$module}-item-icon:first-child {
+                    margin-right: $width-navigation_icon_text_between;
+                }
+            }
+        }
+    }
+
+    .#{$module} {
+
+        &-header {
+            display: inline-flex;
+            align-items: center;
+            box-sizing: border-box;
+
+            &-logo {
+                margin-left: $spacing-navigation_header_logo-marginRight;
+                margin-right: $spacing-navigation_header_logo-marginLeft;
+                display: inline-flex;
+            }
+        }
+    }
+
+    .#{$module}-collapsed {
+        direction: rtl;
+
+        .#{$module}-header {
+            .#{$module}-header {
+
+                &-logo {
+                    margin-right: auto;
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+
+    // 垂直模式特有的样式
+    .#{$module}-vertical {
+        direction: rtl;
+
+        .#{$module}-header {
+            padding-right: $spacing-navigation_vertical_nav_header-paddingLeft;
+            padding-left: $spacing-navigation_vertical_nav_header-paddingRight;
+
+            &-collapsed {
+                padding-right: $spacing-navigation_vertical_nav_header_collapsed-paddingLeft;
+                padding-left: $spacing-navigation_vertical_nav_header_collapsed-paddingRight;
+                transition: $motion-navigation_padding_rtl, $motion-navigation_width;
+            }
+        }
+
+        .#{$module}-footer {
+            .#{$module}-collapse-btn {
+                .#{$prefix}-button-content-right {
+                    margin-left: auto;
+                    margin-right: $spacing-navigation_vertical_footer_semi_button_content_right-marginLeft;
+                    transition: $motion-navigation_collapsed_opacity;
+                }
+            }
+        }
+    }
+
+    // 水平模式特有的样式
+    .#{$module}-horizontal {
+        direction: rtl;
+
+        border-right: auto;
+        border-left: none;
+        padding-left: $spacing-navigation_horizontal-paddingRight;
+        padding-right: $spacing-navigation_horizontal-paddingLeft;
+
+        .#{$module}-header {
+            margin-right: auto;
+            margin-left: $spacing-navigation_horizontal_header_logo-marginRight;
+        }
+
+        .#{$module}-list {
+            .#{$module}-item:not(:last-of-type) {
+                margin-right: auto;
+                margin-left: $spacing-navigation_horizontal_nav_list_item_not_last-marginRight;
+            }
+        }
+
+        .#{$module}-item-icon:last-child {
+            margin-left: auto;
+            margin-right: $spacing-navigation_horizontal_icon_last-marginLeft;
+        }
+
+        .#{$module}-item-icon:first-child {
+            margin-right: auto;
+            margin-left: $spacing-navigation_horizontal_icon_first-marginRight;
+        }
+
+        .#{$module}-footer {
+            padding-right: auto;
+            padding-left: 0;
+        }
+    }
+}

package/lib/cjs/navigation/subNavFoundation.d.ts

@@ -0,0 +1,39 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface OnOpenChangeData {
+    itemKey: string | number;
+    openKeys: (string | number)[];
+    isOpen: boolean;
+}
+export interface OnClickData extends OnOpenChangeData {
+    domEvent: any;
+}
+export interface OnSelectData extends OnOpenChangeData {
+    domEvent: any;
+}
+export interface SubNavAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    updateIsHovered(isHovered: boolean): void;
+    getOpenKeys(): (string | number)[];
+    getOpenKeysIsControlled(): boolean;
+    getCanUpdateOpenKeys(): boolean;
+    updateOpen(isOpen: boolean): void;
+    notifyGlobalOpenChange(data: OnOpenChangeData): void;
+    notifyGlobalOnSelect(data: OnSelectData): void;
+    notifyGlobalOnClick(data: OnClickData): void;
+    getIsSelected(itemKey: string | number): boolean;
+    getIsOpen(): boolean;
+}
+export default class SubNavFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<SubNavAdapter<P, S>, P, S> {
+    constructor(adapter: SubNavAdapter<P, S>);
+    _timer: number;
+    init(): void;
+    destroy(): void;
+    clearDelayTimer(): void;
+    isValidKey(itemKey: string | number): boolean;
+    handleDropdownVisibleChange(visible: boolean): void;
+    /**
+     *
+     * @param {Event} e
+     * @param {HTMLElement} titleRef
+     */
+    handleClick(e: any, titleRef: any): void;
+}

package/lib/cjs/navigation/subNavFoundation.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+const addKeys = function addKeys() {
+  let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const keySet = new _set.default(originKeys);
+
+  for (var _len = arguments.length, willAddKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    willAddKeys[_key - 1] = arguments[_key];
+  }
+
+  (0, _forEach.default)(willAddKeys).call(willAddKeys, key => key && keySet.add(key));
+  return (0, _from.default)(keySet);
+};
+
+const removeKeys = function removeKeys() {
+  let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const keySet = new _set.default(originKeys);
+
+  for (var _len2 = arguments.length, willRemoveKeys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    willRemoveKeys[_key2 - 1] = arguments[_key2];
+  }
+
+  (0, _forEach.default)(willRemoveKeys).call(willRemoveKeys, key => key && keySet.delete(key));
+  return (0, _from.default)(keySet);
+};
+
+class SubNavFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  }
+
+  init() {
+    // this.log('invoke SubNavFoundation init()');
+    this._timer = null;
+  }
+
+  destroy() {} // eslint-disable-line
+
+
+  clearDelayTimer() {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  }
+
+  isValidKey(itemKey) {
+    // eslint-disable-next-line eqeqeq
+    return itemKey != null && (typeof itemKey === 'number' || typeof itemKey === 'string');
+  }
+
+  handleDropdownVisibleChange(visible) {
+    const itemKey = this.getProp('itemKey');
+
+    const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
+
+    const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
+
+    const rawOpenKeys = this._adapter.getOpenKeys();
+
+    const openKeys = visible ? addKeys(rawOpenKeys, itemKey) : removeKeys(rawOpenKeys, itemKey);
+    this.clearDelayTimer();
+
+    if (!openKeysIsControlled) {
+      if (canUpdateOpenKeys) {
+        this._adapter.updateOpen(visible);
+      } // this._adapter.updateIsHovered(visible);
+
+    }
+
+    this._adapter.notifyGlobalOpenChange({
+      itemKey,
+      openKeys,
+      isOpen: visible
+    });
+  }
+  /**
+   *
+   * @param {Event} e
+   * @param {HTMLElement} titleRef
+   */
+
+
+  handleClick(e, titleRef) {
+    const {
+      itemKey,
+      disabled
+    } = this.getProps();
+
+    if (disabled) {
+      return;
+    } // this.log(e, titleRef, titleRef.contains(e.target));
+
+
+    const clickedDomIsTitle = titleRef && titleRef.contains(e.target);
+    let isOpen = Boolean(this._adapter.getIsOpen());
+
+    if (!clickedDomIsTitle) {
+      isOpen = false;
+    } else {
+      isOpen = !isOpen;
+    }
+
+    const openKeys = isOpen ? addKeys(this._adapter.getOpenKeys(), itemKey) : removeKeys(this._adapter.getOpenKeys(), itemKey);
+    const cbVal = {
+      itemKey,
+      openKeys,
+      isOpen,
+      domEvent: e
+    };
+
+    const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
+
+    const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
+
+    if (!openKeysIsControlled && canUpdateOpenKeys) {
+      this._adapter.updateOpen(isOpen);
+    }
+
+    this._adapter.notifyGlobalOpenChange(cbVal);
+
+    this._adapter.notifyGlobalOnClick(cbVal);
+  }
+
+}
+
+exports.default = SubNavFoundation;

package/lib/cjs/navigation/variables.scss

@@ -0,0 +1,132 @@
+$module: #{$prefix}-navigation;
+
+// Size
+$height-navigation_item_base: 36px; // 侧边导航栏菜单项高度
+$width-navigation_container_base: 240px; // 侧边导航栏展开后宽度
+$width-navigation_container_collapsed: 60px; // 侧边导航栏收起后宽度
+$width-navigation_header_logo: 36px; // 导航栏 logo 宽度
+$height-navigation_header_logo: 36px; // 导航栏 logo 高度
+$height-navigation_header_logo_collapsed: 36px; // 导航栏 logo 收起后宽度
+$height-navigation_footer: 48px;  // 侧边导航栏 footer 高度
+$height-navigation_horizontal_header: 60px; // 顶部导航栏高度
+$width-navigation_icon_text_between: 12px; // 导航栏菜单项图标与标题间距
+$width-navigation_icon_left: 20px; // 导航栏菜单项图标距左侧边距离
+$width-navigation_item-borderRadius: var(--semi-border-radius-small); // 导航栏菜单项圆角
+$width-navigation_dropdown_item_nav_item-minWidth: 150px; // 导航栏菜单项下拉菜单最小宽度
+$width-navigation_border: 1px; // 导航栏描边宽度
+$width-navigation_footer_border: 1px; // 导航栏 footer 描边宽度
+$width-navigation_icon_left-minWidth: 20px; // 导航栏菜单项展开收起按钮最小宽度
+
+
+// Spacing
+$spacing-navigation-paddingX: $spacing-tight; // 侧边导航栏水平方向内边距
+$spacing-navigation_collapsed-paddingX: $spacing-tight; // 侧边导航栏收起后水平方向内边距
+$spacing-navigation_item-paddingX: $spacing-base-tight; // 侧边导航栏菜单项水平方向内边距
+$spacing-navigation_item-paddingY: $spacing-tight; // 侧边导航栏菜单项垂直方向内边距
+$spacing-navigation_item-marginBottom: $spacing-tight; // 侧边导航栏菜单项底部外边距
+$spacing-navigation_sub_title-marginBottom: 0; // 侧边导航栏子级菜单项底部外边距
+$spacing-navigation_sub_wrap-marginTop: 0; // 侧边导航栏子级菜单组顶部外边距
+$spacing-navigation_sub_wrap-padding: 0; // 侧边导航栏子级菜单组内边距
+$spacing-navigation_sub-padding: 0; // 侧边导航栏子级菜单组内边距
+$spacing-navigation_item_sub-padding: 0; // 侧边导航栏子级菜单项内边距
+$spacing-navigation_header_logo-marginLeft: 0; // 导航栏 logo 左侧外边距
+$spacing-navigation_header_logo-marginRight: 8px; // 导航栏 logo 右侧外边距
+$spacing-navigation_header-paddingTop: 32px; // 导航栏 header 顶部内边距
+$spacing-navigation_header-paddingBottom: 36px; // 导航栏 header 底部内边距
+$spacing-navigation_list_wrapper-paddingTop: 12px; // 导航栏菜单项列表顶部内边距
+$spacing-navigation_footer-paddingX: 24px; // 导航栏 footer 水平方向内边距
+$spacing-navigation_footer-paddingY: 16px; // 导航栏 footer 垂直方向内边距
+$spacing-navigation_footer_collapse_btn_inner-paddingX: 8px; // 收起侧边栏按钮水平方向内边距
+$spacing-navigation_horizontal_header_logo-marginLeft: 24px; // 顶部导航兰 logo 左侧外边距
+$spacing-navigation_horizontal_header_logo-marginRight: 24px; // 顶部导航兰 logo 右侧外边距
+$spacing-navigation_horizontal-paddingLeft: 24px; // 顶部导航兰左侧内边距
+$spacing-navigation_horizontal-paddingRight: 24px; // 顶部导航兰右侧内边距
+$spacing-navigation_dropdown_item_nav_sub_title-paddingX: $spacing-base-tight; // 导航栏下拉菜单标题水平方向内边距
+$spacing-navigation_dropdown_item_nav_sub_title-paddingY: $spacing-tight; // 导航栏下拉菜单标题垂直方向内边距
+$spacing-navigation_dropdown_item_nav_item-marginTop: 0; // 导航栏下拉菜单项顶部外边距
+$spacing-navigation_dropdown_item_nav_item-marginBottom: 0; // 导航栏下拉菜单项底部外边距
+$spacing-navigation_vertical_nav_item_last-marginBottom: 0; // 侧边导航栏下拉最后一个菜单项底部外边距
+$spacing-navigation_vertical_nav_header-paddingLeft:  ($width-navigation_container_collapsed - $spacing-base-tight - $width-navigation_border - $height-navigation_header_logo_collapsed) / 2; // 侧边导航栏 header 左侧内边距
+$spacing-navigation_vertical_nav_header-paddingRight: $spacing-tight; // 侧边导航栏 header 右侧内边距
+$spacing-navigation_vertical_nav_header_collapsed-paddingLeft: ($width-navigation_container_collapsed - $spacing-base-tight - $width-navigation_border - $height-navigation_header_logo_collapsed) / 2; // 侧边导航栏收起后 header 左侧内边距
+$spacing-navigation_vertical_nav_header_collapsed-paddingRight: 0; // 侧边导航栏收起后 header 右侧内边距
+$spacing-navigation_vertical_footer-paddingLeft: $spacing-tight; // 侧边导航栏 footer 左侧内边距
+$spacing-navigation_vertical_footer-paddingRight: $spacing-tight; // 侧边导航栏 footer 右侧内边距
+$spacing-navigation_vertical_footer_semi_button_content_right-marginLeft: 12px; // 收起侧边栏 按钮标题左侧外边距
+$spacing-navigation_horizontal_nav_list_item-marginBottom: 0; // 顶部导航栏菜单项底部外边距
+$spacing-navigation_horizontal_nav_list_item_not_last-marginRight: $spacing-tight; // 顶部导航栏菜单项右侧外边距（非末位）
+$spacing-navigation_horizontal_icon_first-marginRight: $spacing-tight; // 顶部导航栏菜单项首位图标右侧外边距
+$spacing-navigation_horizontal_icon_last-marginLeft: $spacing-tight; // 顶部导航栏菜单项末位图标左侧外边距
+$spacing-navigation_sub_item_first_child-marginTop: $spacing-tight; // 顶部导航栏子级首位菜单项顶部外边距
+$spacing-navigation_sub_item_left_toggle_marginRight:$spacing-tight; // 顶部导航栏菜单项末位图标右侧外边距
+
+// Color
+$color-navigation-bg-default: var(--semi-color-nav-bg); // 导航栏背景色
+$color-navigation_border-default: var(--semi-color-border); // 导航栏分割线色
+$color-navigation_header-text-default: var(--semi-color-text-0); // 导航栏 header 文字颜色
+$color-navigation_footer_icon-default: var(--semi-color-text-2); // 导航栏 footer 图标颜色
+$color-navigation_itemL1-bg-default: transparent; // 导航栏一级菜单项背景色
+$color-navigation_itemL1-text-default: var(--semi-color-text-0); // 导航栏一级菜单项文字颜色
+$color-navigation_itemL1_icon-default: var(--semi-color-text-2); // 导航栏一级菜单项图标颜色
+$color-navigation_itemL1-bg-hover: var(--semi-color-fill-0); // 导航栏一级菜单项悬浮态背景色
+$color-navigation_itemL1-text-hover: var(--semi-color-text-0); // 导航栏一级菜单项悬浮态文字颜色
+$color-navigation_itemL1_icon-hover: var(--semi-color-text-2); // 导航栏一级菜单项悬浮态图标颜色
+$color-navigation_itemL1_selected-text-hover: var(--semi-color-text-0); // 导航栏一级已选中菜单项悬浮态文字颜色
+$color-navigation_itemL1-bg-active: var(--semi-color-fill-1); // 导航栏一级菜单项按下态背景色
+$color-navigation_itemL1-text-active: var(--semi-color-text-0); // 导航栏一级菜单项按下态文字颜色
+$color-navigation_itemL1_icon-active: var(--semi-color-text-2); // 导航栏一级菜单项按下态图标颜色
+$color-navigation_itemL1_selected-text-active: var(--semi-color-text-0); // 导航栏一级已选中菜单项按下态文字颜色
+$color-navigation_itemL1_selected-bg-default: var(--semi-color-primary-light-default); // 导航栏一级已选中菜单项背景色
+$color-navigation_itemL1_selected-text-default: var(--semi-color-text-0); // 导航栏一级已选中菜单项文字颜色
+$color-navigation_itemL1_selected_icon-default: var(--semi-color-primary); // 导航栏一级已选中菜单项图标颜色
+$color-navigation_itemL1_disabled-bg-default: transparent; // 导航栏一级菜单项禁用态背景色
+$color-navigation_itemL1_disabled-text-default: var(--semi-color-disabled-text); // 导航栏一级菜单项禁用态文字颜色
+$color-navigation_itemL1_disabled_icon-default: var(--semi-color-disabled-text); // 导航栏一级菜单项禁用态图标颜色
+$color-navigation_itemL1_selected_disabled-bg-default: transparent; // 导航栏一级已选中菜单项禁用态背景色
+$color-navigation_itemL1_selected_disabled-text-default: var(--semi-color-primary-disabled); // 导航栏一级已选中菜单项禁用态文字颜色
+$color-navigation_itemL1_selected_disabled_icon-default: var(--semi-color-primary-disabled); // 导航栏一级已选中菜单项禁用态图标颜色
+
+$color-navigation_horizontal_itemL1-text-default: var(--semi-color-text-2); // 水平导航栏一级菜单项文字颜色
+$color-navigation_horizontal_itemL1_icon-default: var(--semi-color-text-2); // 水平导航栏一级菜单项图标颜色
+$color-navigation_horizontal_itemL1-bg-default: transparent; // 水平导航栏一级菜单项背景颜色
+$color-navigation_horizontal_itemL1-text-hover: var(--semi-color-text-1); // 水平导航栏一级菜单项悬浮态文字颜色
+$color-navigation_horizontal_itemL1_icon-hover: var(--semi-color-text-1); // 水平导航栏一级菜单项悬浮态图标颜色
+$color-navigation_horizontal_itemL1-bg-hover: transparent; // 水平导航栏一级菜单项悬浮态背景颜色
+$color-navigation_horizontal_itemL1-text-active: var(--semi-color-text-0); // 水平导航栏一级菜单项按下态文字颜色
+$color-navigation_horizontal_itemL1_icon-active: var(--semi-color-text-0); // 水平导航栏一级菜单项按下态图标颜色
+$color-navigation_horizontal_itemL1-bg-active: transparent; // 水平导航栏一级菜单项按下态背景颜色
+$color-navigation_horizontal_itemL1_selected-text-default: var(--semi-color-text-0); // 水平导航栏一级菜单项选中态文字颜色
+$color-navigation_horizontal_itemL1_selected_icon-default: var(--semi-color-text-0); // 水平导航栏一级菜单项选中态图标颜色
+$color-navigation_horizontal_itemL1_selected-bg-default: transparent; // 水平导航栏一级菜单项选中态背景颜色
+$color-navigation_horizontal_itemL1_disabled-text-default: var(--semi-color-disabled-text); // 水平导航栏一级菜单项禁用态文字颜色
+$color-navigation_horizontal_itemL1_disabled_icon-default: var(--semi-color-disabled-text); // 水平导航栏一级菜单项禁用态图标颜色
+$color-navigation_horizontal_itemL1_disabled-bg-default: transparent; // 水平导航栏一级菜单项禁用态背景颜色
+
+$color-navigation_itemLn-bg-default: transparent; // 导航栏子级菜单项背景颜色
+$color-navigation_itemLn-text-default: var(--semi-color-text-0); // 导航栏子级菜单项文字颜色
+$color-navigation_itemLn-bg-hover: var(--semi-color-fill-0); // 导航栏子级菜单项悬浮态背景颜色
+$color-navigation_itemLn-text-hover: var(--semi-color-text-0); // 导航栏子级菜单项悬浮态文字颜色
+$color-navigation_itemLn-bg-active: var(--semi-color-fill-1); // 导航栏子级菜单项按下态背景颜色
+$color-navigation_itemLn-text-active: var(--semi-color-text-0); // 导航栏子级菜单项按下态文字颜色
+$color-navigation_itemLn_selected-bg-default: var(--semi-color-primary-light-default); // 导航栏子级菜单项选中态背景颜色
+
+
+// Transition
+$motion-navigation_item_title: opacity 100ms 100s ease-out; // 导航栏菜单项标题收起时渐隐动画
+$motion-navigation_padding: padding-left 100ms ease-out; // 侧边导航栏收起左侧内边距动画
+$motion-navigation_padding_rtl: padding-right 100ms ease-out; // 侧边导航栏收起右侧内边距(rtl)动画
+$motion-navigation_width: width 200ms cubic-bezier(.62, .05, .36, .95); // 侧边导航栏收起宽度动画
+$motion-navigation_collapsed_opacity: opacity .2s cubic-bezier(.5, -.1, 1, .4); // 侧边导航栏收起渐隐动画
+
+
+// Font
+$font-navigation_item-fontWeight: $font-weight-bold; // 导航栏菜单项标题字重
+$font-navigation_sub_title-fontWeight: $font-weight-bold; // 导航栏菜单项副标题字重
+$font-navigation_item_normal-fontWeight: $font-weight-regular; // 导航栏子级菜单项标题字重
+$font-navigation_popover_nav_item_selected-fontWeight: normal; // 导航栏子级菜单项标题选中态字重
+$font-navigation_sub_selected-fontWeight: $font-weight-bold; // 导航栏菜单项标题选中态字重
+$font-navigation_sub_disabled-fontWeight: $font-weight-bold; // 导航栏菜单项标题禁用态字重
+$font-navigation_sub-fontWeight: $font-weight-regular; // 导航栏子级菜单项标题字重
+$font-navigation_sub-fontSize: $font-size-regular; // 导航栏子级菜单项标题字体大小
+$font-navigation_sub_item-fontWeight: $font-weight-regular; // 导航栏子级菜单项标题字重
+$font-navigation_header_item-fontWeight: $font-weight-bold; // 导航栏 header 标题字重

package/lib/cjs/notification/constants.d.ts

@@ -0,0 +1,14 @@
+declare const cssClasses: {
+    WRAPPER: string;
+    LIST: string;
+    NOTICE: string;
+};
+declare const strings: {
+    types: string[];
+    themes: string[];
+    directions: readonly ["ltr", "rtl"];
+};
+declare const numbers: {
+    duration: number;
+};
+export { cssClasses, strings, numbers };

package/lib/cjs/notification/constants.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  WRAPPER: "".concat(_constants.BASE_CLASS_PREFIX, "-notification-wrapper"),
+  LIST: "".concat(_constants.BASE_CLASS_PREFIX, "-notification-list"),
+  NOTICE: "".concat(_constants.BASE_CLASS_PREFIX, "-notification-notice")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  types: ['warning', 'success', 'info', 'error', 'default'],
+  themes: ['normal', 'light'],
+  directions: ['ltr', 'rtl']
+};
+exports.strings = strings;
+const numbers = {
+  duration: 3 // default close time, unit: s
+
+};
+exports.numbers = numbers;

package/lib/cjs/notification/notification.css

@@ -0,0 +1,154 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-notification-wrapper {
+  position: fixed;
+}
+
+.semi-notification-list {
+  position: fixed;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  z-index: 1010;
+  pointer-events: none;
+}
+.semi-notification-list[placement=topRight] {
+  right: 0;
+  top: 0;
+}
+.semi-notification-list[placement=top] {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.semi-notification-list[placement=topLeft] {
+  left: 0;
+  top: 0;
+}
+.semi-notification-list[placement=bottom] {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.semi-notification-list[placement=bottomRight] {
+  bottom: 0;
+  right: 0;
+}
+.semi-notification-list[placement=bottomLeft] {
+  bottom: 0;
+  left: 0;
+}
+
+.semi-notification-notice {
+  box-shadow: var(--semi-shadow-elevated);
+  border-radius: var(--semi-border-radius-medium);
+  padding-top: 16px;
+  padding-right: 12px;
+  padding-bottom: 16px;
+  padding-left: 20px;
+  margin: 20px;
+  width: auto;
+  min-width: 320px;
+  background-color: var(--semi-color-bg-3);
+  position: relative;
+  display: flex;
+  pointer-events: auto;
+}
+.semi-notification-notice-icon {
+  width: 24px;
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: 100%;
+  margin-right: 12px;
+}
+.semi-notification-notice-info {
+  color: var(--semi-color-info);
+}
+.semi-notification-notice-warning {
+  color: var(--semi-color-warning);
+}
+.semi-notification-notice-error {
+  color: var(--semi-color-danger);
+}
+.semi-notification-notice-success {
+  color: var(--semi-color-success);
+}
+.semi-notification-notice-light.semi-notification-notice-warning {
+  background-color: var(--semi-color-warning-light-default);
+  border: 1px solid var(--semi-color-warning);
+}
+.semi-notification-notice-light.semi-notification-notice-success {
+  background-color: var(--semi-color-success-light-default);
+  border: 1px solid var(--semi-color-success);
+}
+.semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default {
+  background-color: var(--semi-color-info-light-default);
+  border: 1px solid var(--semi-color-info);
+}
+.semi-notification-notice-light.semi-notification-notice-error {
+  background-color: var(--semi-color-danger-light-default);
+  border: 1px solid var(--semi-color-danger);
+}
+.semi-notification-notice-title {
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  color: var(--semi-color-text-0);
+  margin-bottom: 4px;
+}
+.semi-notification-notice-inner {
+  display: flex;
+  width: 100%;
+}
+.semi-notification-notice-content-wrapper {
+  flex: 1 1 auto;
+  margin-right: 8px;
+}
+.semi-notification-notice-content {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  color: var(--semi-color-text-1);
+}
+.semi-notification-notice-icon-close {
+  height: 24px;
+}
+.semi-notification-notice-icon-close .semi-icon-close {
+  color: var(--semi-color-text-2);
+}
+.semi-notification-notice-controls {
+  display: flex;
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  cursor: pointer;
+}
+.semi-notification-notice-detail {
+  text-align: center;
+  flex-grow: 1;
+}
+.semi-notification-notice-later {
+  text-align: center;
+  flex-grow: 1;
+}
+
+.semi-notification-notice.semi-notification-notice-rtl {
+  padding-right: 20px;
+  padding-left: 12px;
+}
+.semi-notification-notice-rtl {
+  direction: rtl;
+}
+.semi-notification-notice-rtl .semi-notification-notice-icon {
+  margin-right: 12px;
+}
+.semi-notification-notice-rtl .semi-notification-notice-content-wrapper {
+  margin-right: 8px;
+}