@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/base/foundation.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The Semi Foundation / Adapter architecture split was inspired by Material Component For Web. （https://github.com/material-components/material-components-web）
+ * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
+ *
+ */
+export declare type noopFunction = (...args: any) => any;
+export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>> {
+    getContext(key: string): any;
+    getContexts(): any;
+    getProp(key: string): any;
+    getProps(): P;
+    getState(key: string): any;
+    getStates(): S;
+    setState(s: Pick<S, keyof S>, callback?: any): void;
+    getCache(c: string): any;
+    getCaches(): any;
+    setCache(key: any, value: any): void;
+    stopPropagation(e: any): void;
+}
+declare class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string, any>, S = Record<string, any>> {
+    /** @return enum{css className} */
+    static get cssClasses(): {};
+    /** @return enum{strings} */
+    static get strings(): {};
+    /** @return enum{numbers} */
+    static get numbers(): {};
+    static get defaultAdapter(): {
+        getProp: (...args: any[]) => void;
+        getProps: (...args: any[]) => void;
+        getState: (...args: any[]) => void;
+        getStates: (...args: any[]) => void;
+        setState: (...args: any[]) => void;
+        getContext: (...args: any[]) => void;
+        getContexts: (...args: any[]) => void;
+        getCache: (...args: any[]) => void;
+        setCache: (...args: any[]) => void;
+        getCaches: (...args: any[]) => void;
+        stopPropagation: (...args: any[]) => void;
+    };
+    _adapter: T;
+    constructor(adapter: T);
+    getProp(key: string): any;
+    getProps(): any;
+    getState(key: string): any;
+    getStates(): any;
+    setState(states: S, cb?: (...args: any) => void): void;
+    getContext(key: string): any;
+    getContexts(): any;
+    getCaches(): any;
+    getCache(key: string): any;
+    setCache(key: string, value: any): void;
+    stopPropagation(e: any): void;
+    _isControlledComponent(key?: string): boolean;
+    _isInProps(key: string): boolean;
+    init(lifecycle?: any): void;
+    destroy(): void;
+    log(text: string, ...rest: any): void;
+}
+export default BaseFoundation;

package/lib/cjs/base/foundation.js

@@ -0,0 +1,144 @@
+"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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _log = _interopRequireDefault(require("../utils/log"));
+
+/**
+ * The Semi Foundation / Adapter architecture split was inspired by Material Component For Web. （https://github.com/material-components/material-components-web）
+ * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
+ *
+ */
+class BaseFoundation {
+  constructor(adapter) {
+    this._adapter = (0, _assign.default)((0, _assign.default)({}, BaseFoundation.defaultAdapter), adapter);
+  }
+  /** @return enum{css className} */
+
+
+  static get cssClasses() {
+    // Classes extending Foundation should implement this method to return an object which exports every
+    // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'component--active'}
+    return {};
+  }
+  /** @return enum{strings} */
+
+
+  static get strings() {
+    // Classes extending Foundation should implement this method to return an object which exports all
+    // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'}
+    return {};
+  }
+  /** @return enum{numbers} */
+
+
+  static get numbers() {
+    // Classes extending Foundation should implement this method to return an object which exports all
+    // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350}
+    return {};
+  }
+
+  static get defaultAdapter() {
+    return {
+      getProp: _noop2.default,
+      getProps: _noop2.default,
+      getState: _noop2.default,
+      getStates: _noop2.default,
+      setState: _noop2.default,
+      getContext: _noop2.default,
+      getContexts: _noop2.default,
+      getCache: _noop2.default,
+      setCache: _noop2.default,
+      getCaches: _noop2.default,
+      stopPropagation: _noop2.default
+    };
+  }
+
+  getProp(key) {
+    return this._adapter.getProp(key);
+  }
+
+  getProps() {
+    return this._adapter.getProps();
+  }
+
+  getState(key) {
+    return this._adapter.getState(key);
+  }
+
+  getStates() {
+    return this._adapter.getStates();
+  }
+
+  setState(states, cb) {
+    return this._adapter.setState((0, _assign.default)({}, states), cb);
+  }
+
+  getContext(key) {
+    return this._adapter.getContext(key);
+  }
+
+  getContexts() {
+    return this._adapter.getContexts();
+  }
+
+  getCaches() {
+    return this._adapter.getCaches();
+  }
+
+  getCache(key) {
+    return this._adapter.getCache(key);
+  }
+
+  setCache(key, value) {
+    return key && this._adapter.setCache(key, value);
+  }
+
+  stopPropagation(e) {
+    this._adapter.stopPropagation(e);
+  } // Determine whether a controlled component
+
+
+  _isControlledComponent() {
+    let key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'value';
+    const props = this.getProps();
+    const isControlComponent = (key in props);
+    return isControlComponent;
+  } // Does the user have incoming props, eg: _isInProps (value)
+
+
+  _isInProps(key) {
+    const props = this.getProps();
+    return key in props;
+  }
+
+  init(lifecycle) {// Subclasses should override this method to perform initialization routines (registering events, etc.)
+  }
+
+  destroy() {// Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
+  }
+
+  log(text) {
+    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      rest[_key - 1] = arguments[_key];
+    }
+
+    (0, _log.default)(text, ...rest);
+  }
+
+}
+
+var _default = BaseFoundation;
+exports.default = _default;

package/lib/cjs/base/index.d.ts

@@ -0,0 +1,5 @@
+import BaseFoundation from './foundation';
+declare const _default: {
+    BaseFoundation: typeof BaseFoundation;
+};
+export default _default;

package/lib/cjs/base/index.js

@@ -0,0 +1,18 @@
+"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 _foundation = _interopRequireDefault(require("./foundation"));
+
+var _default = {
+  BaseFoundation: _foundation.default
+};
+exports.default = _default;

package/lib/cjs/breadcrumb/breadcrumb.css

@@ -0,0 +1,109 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-breadcrumb {
+  overflow: hidden;
+}
+.semi-breadcrumb-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.semi-breadcrumb-wrapper-loose {
+  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;
+}
+.semi-breadcrumb-wrapper-compact {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.semi-breadcrumb-item-wrap {
+  display: inline-flex;
+  align-items: center;
+  margin: 4px 0;
+  margin-right: 4px;
+}
+.semi-breadcrumb-item {
+  display: inline;
+  margin-right: 4px;
+  color: var(--semi-color-text-2);
+  font-weight: 400;
+}
+.semi-breadcrumb-item .semi-typography {
+  color: inherit;
+}
+.semi-breadcrumb-item-title-inline {
+  display: inline-flex;
+}
+.semi-breadcrumb-item-active {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+.semi-breadcrumb-item-active:hover, .semi-breadcrumb-item-active:active {
+  border: none;
+  margin-bottom: 0px;
+  color: var(--semi-color-text-0);
+  cursor: default;
+}
+.semi-breadcrumb-item-icon {
+  margin-bottom: -1px;
+}
+.semi-breadcrumb-item-more svg {
+  vertical-align: middle;
+}
+.semi-breadcrumb-item-icon + .semi-breadcrumb-item-title {
+  margin-left: 4px;
+}
+.semi-breadcrumb-item-link {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 4px;
+  text-decoration: inherit;
+}
+.semi-breadcrumb-item-link:hover {
+  color: var(--semi-color-link);
+  cursor: pointer;
+}
+.semi-breadcrumb-item-link:active {
+  color: var(--semi-color-link-hover);
+  cursor: pointer;
+}
+.semi-breadcrumb-collapse {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.semi-breadcrumb-separator {
+  display: flex;
+  color: var(--semi-color-text-2);
+}
+.semi-breadcrumb-restItem {
+  color: var(--semi-color-text-2);
+  margin-right: 8px;
+}
+
+.semi-rtl .semi-breadcrumb-wrapper,
+.semi-portal-rtl .semi-breadcrumb-wrapper {
+  direction: rtl;
+}
+.semi-rtl .semi-breadcrumb-item-wrap,
+.semi-portal-rtl .semi-breadcrumb-item-wrap {
+  margin-right: 0;
+  margin-left: 4px;
+}
+.semi-rtl .semi-breadcrumb-item,
+.semi-portal-rtl .semi-breadcrumb-item {
+  margin-right: 0;
+  margin-left: 4px;
+}
+.semi-rtl .semi-breadcrumb-restItem,
+.semi-portal-rtl .semi-breadcrumb-restItem {
+  margin-right: 0;
+  margin-left: 8px;
+}
+.semi-rtl .semi-breadcrumb-item-icon + .semi-breadcrumb-item-title,
+.semi-portal-rtl .semi-breadcrumb-item-icon + .semi-breadcrumb-item-title {
+  margin-left: 0;
+  margin-right: 4px;
+  display: inline-block;
+}

package/lib/cjs/breadcrumb/breadcrumb.scss

@@ -0,0 +1,120 @@
+//@import '../theme/variables.scss';
+// @import '../theme/mixin.scss';
+// @import '../theme/_font.scss';
+@import './variables.scss';
+
+$module: #{$prefix}-breadcrumb;
+
+.#{$module} {
+    overflow: hidden;
+
+    &-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+
+        &-loose {
+            @include font-size-regular;
+        }
+
+        &-compact {
+            @include font-size-small;
+        }
+    }
+
+    &-item-wrap {
+        display: inline-flex;
+        align-items: center;
+        margin: $spacing-breadcrumb_item_wrap-marginY 0;
+        margin-right: $spacing-breadcrumb_item_wrap-marginRight;
+    }
+
+    &-item {
+        display: inline;
+        // flex-shrink: 0;
+        margin-right: $spacing-breadcrumb_item-marginRight;
+        color: $color-breadcrumb_default-text-default;
+        font-weight: $font-breadcrumb_default-fontWeight;
+
+        .#{$prefix}-typography {
+            color: inherit;
+        }
+
+        // removed to item-link cls
+        // &:hover {
+        //     color: $color-breadcrumb_default-text-hover;
+        //     cursor: pointer;
+        // }
+
+        // &:active {
+        //     color: $color-breadcrumb_default-text-active;
+        //     cursor: pointer;
+        // }
+
+        &-title-inline {
+            display: inline-flex;
+        }
+    }
+
+    &-item-active {
+        color: $color-breadcrumb_active-text-default;
+        font-weight: $font-breadcrumb_active-fontWeight;
+
+        &:hover,
+        &:active {
+            border: none;
+            margin-bottom: 0px;
+            color: $color-breadcrumb_active-text-active;
+            cursor: default;
+        }
+    }
+
+    &-item-icon {
+        margin-bottom: -1px;
+    }
+
+    // &-item-title,
+    &-item-more {
+        & svg {
+            vertical-align: middle;
+        }
+    }
+
+    &-item-icon+&-item-title {
+        margin-left: $spacing-breadcrumb_item_text-marginLeft;
+    }
+
+    &-item-link {
+        display: inline-flex;
+        align-items: center;
+        column-gap: 4px;
+        text-decoration: inherit;
+
+        &:hover {
+            color: $color-breadcrumb_default-text-hover;
+            cursor: pointer;
+        }
+
+        &:active {
+            color: $color-breadcrumb_default-text-active;
+            cursor: pointer;
+        }
+    }
+
+    &-collapse {
+        display: inline-flex;
+        flex-shrink: 0;
+    }
+
+    &-separator {
+        display: flex;
+        color: $color-breadcrumb_sepearator_default-icon-default;
+    }
+
+    &-restItem {
+        color: $color-breadcrumb_restItem-text-default;
+        margin-right: $spacing-breadcrumb_restItem-marginRight;
+    }
+
+}
+
+@import './rtl.scss';

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

@@ -0,0 +1,7 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    MORE_TYPE: string[];
+};
+export { cssClasses, strings };

package/lib/cjs/breadcrumb/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-breadcrumb")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  MORE_TYPE: ['default', 'popover']
+};
+exports.strings = strings;

package/lib/cjs/breadcrumb/foundation.d.ts

@@ -0,0 +1,24 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { BreadcrumbItemInfo, Route } from './itemFoundation';
+export interface BreadcrumbAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyClick: (itemInfo: BreadcrumbItemInfo, event: any) => void;
+    expandCollapsed: (clickEvent?: any) => void;
+}
+export default class BreadcrumbFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<BreadcrumbAdapter<P, S>, P, S> {
+    constructor(adapter: BreadcrumbAdapter<P, S>);
+    handleClick(info: BreadcrumbItemInfo, event: any): void;
+    handleExpand(clickEvent: any): void;
+    genRoutes(routes: Array<Route>): ({
+        name: never;
+        _origin: {
+            name: never;
+        };
+    } | {
+        [x: string]: any;
+        path?: string;
+        href?: string;
+        name?: string;
+        icon?: any;
+        _origin?: undefined;
+    })[];
+}

package/lib/cjs/breadcrumb/foundation.js

@@ -0,0 +1,52 @@
+"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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+/* eslint-disable prefer-const */
+class BreadcrumbFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  }
+
+  handleClick(info, event) {
+    this._adapter.notifyClick(info, event);
+  }
+
+  handleExpand(clickEvent) {
+    this._adapter.expandCollapsed(clickEvent);
+  }
+
+  genRoutes(routes) {
+    return (0, _map.default)(routes).call(routes, route => {
+      if (typeof route !== 'object') {
+        return {
+          name: route,
+          _origin: {
+            name: route
+          }
+        };
+      }
+
+      let config = {};
+      config._origin = route;
+      return (0, _assign.default)((0, _assign.default)({}, config), route);
+    });
+  }
+
+}
+
+exports.default = BreadcrumbFoundation;

package/lib/cjs/breadcrumb/itemFoundation.d.ts

@@ -0,0 +1,22 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface BreadcrumbItemInfo {
+    name?: any;
+    href?: string;
+    icon?: any;
+    path?: string;
+}
+export interface Route {
+    [x: string]: any;
+    path?: string;
+    href?: string;
+    name?: string;
+    icon?: any;
+}
+export interface BreadcrumbItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyClick: (item: BreadcrumbItemInfo, e: any) => void;
+    notifyParent: (item: BreadcrumbItemInfo, e: any) => void;
+}
+export default class BreadcrumbItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<BreadcrumbItemAdapter<P, S>, P, S> {
+    constructor(adapter: BreadcrumbItemAdapter<P, S>);
+    handleClick(item: BreadcrumbItemInfo, e: any): void;
+}

package/lib/cjs/breadcrumb/itemFoundation.js

@@ -0,0 +1,31 @@
+"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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+class BreadcrumbItemFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  }
+
+  handleClick(item, e) {
+    // Trigger its own onClick first, then trigger the parent
+    this._adapter.notifyClick(item, e);
+
+    this._adapter.notifyParent(item, e);
+  }
+
+}
+
+exports.default = BreadcrumbItemFoundation;

package/lib/cjs/breadcrumb/rtl.scss

@@ -0,0 +1,33 @@
+$module: #{$prefix}-breadcrumb;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+
+        &-wrapper {
+            direction: rtl;
+        }
+
+        &-item-wrap {
+            margin-right: 0;
+            margin-left: $spacing-breadcrumb_item_wrap-marginRight;
+        }
+
+        &-item {
+            margin-right: 0;
+            margin-left: $spacing-breadcrumb_item-marginRight;
+        }
+
+
+        &-restItem {
+            margin-right: 0;
+            margin-left: $spacing-breadcrumb_restItem-marginRight;
+        }
+    }
+
+    .#{$module}-item-icon + .#{$module}-item-title {
+        margin-left: 0;
+        margin-right: $spacing-breadcrumb_item_text-marginLeft;
+        display: inline-block;
+    }
+}

package/lib/cjs/breadcrumb/variables.scss

@@ -0,0 +1,19 @@
+$spacing-breadcrumb_item_wrap-marginY: $spacing-extra-tight; // 面包屑 Item 垂直内边距 
+$spacing-breadcrumb_item_wrap-marginRight: $spacing-extra-tight; // 面包屑 Item 右侧内边距 
+$spacing-breadcrumb_item-marginRight: $spacing-extra-tight; // 面包屑 Item 内容与分割线距离
+$spacing-breadcrumb_item_text-marginLeft: $spacing-extra-tight; // 面包屑文字左侧外边距
+$spacing-breadcrumb_restItem-marginRight: $spacing-tight; // 面包屑 restItem 的右侧外边距
+
+$color-breadcrumb_default-text-default: var(--semi-color-text-2); // 面包屑文字颜色 - 未选中
+$color-breadcrumb_default-text-hover: var(--semi-color-link); // 面包屑文字颜色 - 悬浮
+$color-breadcrumb_default-text-active: var(--semi-color-link-hover); // 面包屑文字颜色 - 按下
+
+$color-breadcrumb_active-text-default: var(--semi-color-text-0); // 面包屑文字颜色 - 选中
+$color-breadcrumb_active-text-active: var(--semi-color-text-0); // 面包屑文字颜色 - 选中激活
+$color-breadcrumb_sepearator_default-icon-default: var(--semi-color-text-2); // 面包屑分割线颜色
+
+$color-breadcrumb-restItem-text-default: var(--semi-color-text-2); // 面包屑 restItem 的分割线颜色
+
+
+$font-breadcrumb_default-fontWeight: $font-weight-regular; // 面包屑文字字重 - 未选中
+$font-breadcrumb_active-fontWeight: $font-weight-bold; // 面包屑文字字重 - 选中