@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/grid/grid.scss

@@ -0,0 +1,121 @@
+//@import '../theme/variables.scss';
+@import './variables.scss';
+@import './mixin.scss';
+$module: #{$prefix};
+
+.#{$module}-row {
+    @include make-row();
+    display: block;
+    box-sizing: border-box;
+}
+
+.#{$module}-row-flex {
+    display: flex;
+    flex-flow: row wrap;
+
+    &::before,
+    &::after {
+        display: flex;
+    }
+}
+
+.#{$module}-col-0 {
+    display: none;
+}
+
+// x轴原点
+.#{$module}-row-flex-start {
+    justify-content: flex-start;
+}
+
+// x轴居中
+.#{$module}-row-flex-center {
+    justify-content: center;
+}
+
+// x轴反方向
+.#{$module}-row-flex-end {
+    justify-content: flex-end;
+}
+
+// x轴平分
+.#{$module}-row-flex-space-between {
+    justify-content: space-between;
+}
+
+// x轴有间隔地平分
+.#{$module}-row-flex-space-around {
+    justify-content: space-around;
+}
+
+// 顶部对齐
+.#{$module}-row-flex-top {
+    align-items: flex-start;
+}
+
+// 居中对齐
+.#{$module}-row-flex-middle {
+    align-items: center;
+}
+
+// 底部对齐
+.#{$module}-row-flex-bottom {
+    align-items: flex-end;
+}
+
+.#{$module}-col {
+    position: relative;
+}
+
+@include make-grid-columns();
+@include make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+@include make-grid(-xs);
+
+// // Small grid
+// //
+// // Columns, offsets, pushes, and pulls for the small device range, from phones
+// // to tablets.
+
+@media (min-width: $width-grid_screen-sm-min) {
+    @include make-grid(-sm);
+}
+
+// // Medium grid
+// //
+// // Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: $width-grid_screen-md-min) {
+    @include make-grid(-md);
+}
+
+// // Large grid
+// //
+// // Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: $width-grid_screen-lg-min) {
+    @include make-grid(-lg);
+}
+
+// // Extra Large grid
+// //
+// // Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: $width-grid_screen-xl-min) {
+    @include make-grid(-xl);
+}
+
+// // Extra Extra Large grid
+// //
+// // Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: $width-grid_screen-xxl-min) {
+    @include make-grid(-xxl);
+}
+
+@import "./rtl.scss";

package/lib/cjs/grid/mixin.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/grid/mixin.scss

@@ -0,0 +1,115 @@
+// mixins for clearfix
+// ------------------------
+
+//TODO 提出到公共mixin
+@mixin clearfix() {
+    zoom: 1;
+
+    &::before,
+    &::after {
+        display: table;
+        content: '';
+    }
+
+    &::after {
+        clear: both;
+    }
+}
+
+// mixins for grid system
+// ------------------------
+@mixin make-row($gutter: $width-grid_gutter) {
+    position: relative;
+    height: auto;
+    margin-right: ($gutter / -2);
+    margin-left: ($gutter / -2);
+    @include clearfix();
+}
+
+@mixin make-grid-columns() {
+    $index: 1;
+
+    @for $i from $index through $width-grid_columns {
+        $item: '.#{$module}-col-#{$i}, .#{$module}-col-xs-#{$i}, .#{$module}-col-sm-#{$i}, .#{$module}-col-md-#{$i}, .#{$module}-col-lg-#{$i}';
+
+        #{$item} {
+            position: relative;
+            min-height: 1px;
+            padding-right: ($width-grid_gutter / 2);
+            padding-left: ($width-grid_gutter / 2);
+        }
+    }
+}
+
+@mixin float-grid-columns($class) {
+    $index: 1;
+
+    @for $i from $index through $width-grid_columns {
+        $item: '.#{$module}-col#{$class}-#{$i}';
+
+        #{$item} {
+            flex: 0 0 auto;
+            float: left;
+        }
+    }
+}
+
+@mixin loop-grid-columns($index, $class) {
+    @for $i from 1 through ($index) {
+        .#{$module}-col#{$class}-#{$i} {
+            display: block;
+            box-sizing: border-box;
+            width: percentage(($i / $width-grid_columns));
+        }
+
+        .#{$module}-col#{$class}-push-#{$i} {
+            left: percentage(($i / $width-grid_columns));
+        }
+
+        .#{$module}-col#{$class}-pull-#{$i} {
+            right: percentage(($i / $width-grid_columns));
+        }
+
+        .#{$module}-col#{$class}-offset-#{$i} {
+            margin-left: percentage(($i / $width-grid_columns));
+        }
+
+        .#{$module}-col#{$class}-order-#{$i} {
+            order: $i;
+        }
+    }
+}
+
+// grid rtl mixin
+@mixin float-grid-columns-rtl($class) {
+    $index: 1;
+
+    @for $i from $index through $width-grid_columns {
+        $item: '.#{$module}-col#{$class}-#{$i}';
+
+        #{$item} {
+            .#{$prefix}-rtl & {
+                // float 应该改为镜像的
+                float: right;
+            }
+        }
+    }
+}
+
+@mixin loop-grid-columns-rtl($index, $class) {
+    @for $i from 1 through ($index) {
+        .#{$module}-col#{$class}-offset-#{$i} {
+            .#{$prefix}-rtl & {
+                margin-left: auto;
+                margin-right: percentage(($i / $width-grid_columns));
+            }
+        }
+    }
+}
+
+@mixin make-grid($class: '') {
+    @include float-grid-columns($class);
+    @include loop-grid-columns($width-grid_columns, $class);
+    @include float-grid-columns-rtl($class);
+    @include loop-grid-columns-rtl($width-grid_columns, $class);
+}

package/lib/cjs/grid/rtl.scss

@@ -0,0 +1,9 @@
+$module: #{$prefix};
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module}-row,
+    .#{$module}-row-flex {
+        direction: rtl;
+    }
+}

package/lib/cjs/grid/variables.scss

@@ -0,0 +1,35 @@
+// Media queries breakpoints
+// Extra small screen / phone
+$width-grid_screen-xs: 480px; // 超小尺寸设备 - 手机
+$width-grid_screen-xs-min: $width-grid_screen-xs;
+
+// Small screen / tablet
+$width-grid_screen-sm: 576px; // 小尺寸设备 - 平板
+$width-grid_screen-sm-min: $width-grid_screen-sm;
+
+// Medium screen / desktop
+$width-grid_screen-md: 768px; // 中尺寸设备 - 水平平板
+$width-grid_screen-md-min: $width-grid_screen-md;
+
+// Large screen / wide desktop
+$width-grid_screen-lg: 992px; // 大尺寸设备 - 小尺寸桌面端
+$width-grid_screen-lg-min: $width-grid_screen-lg;
+
+// Extra large screen / full hd
+$width-grid_screen-xl: 1200px; // 超大尺寸设备 - 桌面端
+$width-grid_screen-xl-min: $width-grid_screen-xl;
+
+// Extra extra large screen / large desktop
+$width-grid_screen-xxl: 1600px; // 超大尺寸设备 - 桌面端 HD
+$width-grid_screen-xxl-min: $width-grid_screen-xxl;
+
+// provide a maximum
+$width-grid_screen-xs-max: ($width-grid_screen-sm-min - 1px);
+$width-grid_screen-sm-max: ($width-grid_screen-md-min - 1px);
+$width-grid_screen-md-max: ($width-grid_screen-lg-min - 1px);
+$width-grid_screen-lg-max: ($width-grid_screen-xl-min - 1px);
+$width-grid_screen-xl-max: ($width-grid_screen-xxl-min - 1px);
+
+// Grid system
+$width-grid_columns: 24; // 栅格宽度
+$width-grid_gutter: 0; // 槽宽度

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

@@ -0,0 +1,9 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    SIZE: string[];
+    ICON_PREFIX: string;
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/cjs/icons/constants.js

@@ -0,0 +1,24 @@
+"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 = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-icon")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  SIZE: ['extra-small', 'small', 'default', 'large', 'extra-large', 'custom'],
+  // use in svg xhref. No need to respond to the change of prefixCls, always constant
+  ICON_PREFIX: 'semi-icon-'
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;

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

@@ -0,0 +1,12 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-input";
+};
+declare const strings: {
+    readonly SIZE: readonly ["small", "large", "default"];
+    readonly DEFAULT_SIZE: "default";
+    readonly STATUS: readonly ["default", "error", "warning", "success"];
+    readonly CLEARBTN_CLICKED_EVENT_FLAG: "__fromClearBtn";
+    readonly MODE: readonly ["password"];
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/cjs/input/constants.js

@@ -0,0 +1,26 @@
+"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 = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-input")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  SIZE: ['small', 'large', 'default'],
+  DEFAULT_SIZE: 'default',
+  STATUS: ['default', 'error', 'warning', 'success'],
+  CLEARBTN_CLICKED_EVENT_FLAG: '__fromClearBtn',
+  MODE: ['password']
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;

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

@@ -0,0 +1,79 @@
+import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
+export interface InputDefaultAdapter {
+    notifyChange: noopFunction;
+    setValue: noopFunction;
+}
+export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefaultAdapter> {
+    setMinLength(minLength: number): void;
+    notifyClear(e: any): void;
+    notifyBlur(value: any, e: any): void;
+    setEyeClosed(eyeClosed: boolean): void;
+    toggleFocusing(focused: boolean): void;
+    notifyFocus(value: any, e: any): void;
+    notifyInput(e: any): void;
+    notifyKeyDown(e: any): void;
+    notifyKeyUp(e: any): void;
+    notifyKeyPress(e: any): void;
+    notifyEnterPress(e: any): void;
+    setPaddingLeft(paddingLeft: string): void;
+    isEventTarget(e: any): boolean;
+}
+declare class InputFoundation extends BaseFoundation<InputAdapter> {
+    static get inputDefaultAdapter(): {
+        notifyChange: (...args: any[]) => void;
+        setValue: (...args: any[]) => void;
+    };
+    _timer: number | null;
+    constructor(adapter: InputAdapter);
+    init(): void;
+    destroy(): void;
+    setDisable(): void;
+    _setInitValue(): void;
+    setValue(value: any): void;
+    handleChange(value: any, e: any): void;
+    /**
+     * Modify minLength to trigger browser check for minimum length
+     * Controlled mode is not checked
+     * @param {String} value
+     */
+    handleVisibleMinLength(value: any): void;
+    /**
+     * Handle input emoji characters beyond maxLength
+     * Controlled mode is not checked
+     * @param {String} value
+     */
+    handleVisibleMaxLength(value: any): any;
+    /**
+     * Truncate input values based on maximum length
+     * @param {String} value
+     * @param {Number} maxLength
+     * @returns {String}
+     */
+    handleTruncateValue(value: any, maxLength: number): any;
+    handleClear(e: any): void;
+    /**
+     * trigger when click input wrapper
+     * @param {Event} e
+     */
+    handleClick(e: any): void;
+    handleModeChange(mode: string): void;
+    handleClickEye(e: any): void;
+    handleInputType(type: string): string;
+    handleMouseDown(e: any): void;
+    handleMouseUp(e: any): void;
+    handleBlur(e: any): void;
+    handleFocus(e: any): void;
+    handleInput(e: any): void;
+    handleKeyDown(e: any): void;
+    handleKeyUp(e: any): void;
+    handleKeyPress(e: any): void;
+    setPaddingLeft(paddingLeft: string): void;
+    isAllowClear(): any;
+    handleClickPrefixOrSuffix(e: any): void;
+    /**
+     * Blocking mousedown events prevents input from losing focus
+     * @param {Event} e
+     */
+    handlePreventMouseDown(e: any): void;
+}
+export default InputFoundation;