@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

package/lib/cjs/dropdown/foundation.js

@@ -4,74 +4,58 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _a11y = require("../utils/a11y");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class DropdownFoundation extends _foundation.default {
   handleVisibleChange(visible) {
     this._adapter.setPopVisible(visible);
-
     this._adapter.notifyVisibleChange(visible);
-
     const {
       trigger
     } = this.getProps();
-
     if (visible && trigger === "click") {
       const popupId = this._adapter.getPopupId();
-
       this.setFocusToFirstMenuItem(popupId);
     }
   }
-
   getMenuItemNodes(id) {
-    const menuWrapper = document.getElementById(id); // if has dropdown item, the item must wrapped by li
-
+    const menuWrapper = document.getElementById(id);
+    // if has dropdown item, the item must wrapped by li
     return menuWrapper ? Array.from(menuWrapper.getElementsByTagName('li')).filter(item => item.ariaDisabled === "false") : null;
   }
-
   setFocusToFirstMenuItem(id) {
     const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && (0, _a11y.setFocusToFirstItem)(menuItemNodes);
   }
-
   setFocusToLastMenuItem(id) {
     const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && (0, _a11y.setFocusToLastItem)(menuItemNodes);
   }
-
   handleKeyDown(event) {
     var _a, _b;
-
     const id = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.attributes['data-popupid']) === null || _b === void 0 ? void 0 : _b.value;
-
+    const {
+      visible
+    } = this._adapter.getStates();
     switch (event.key) {
       case ' ':
       case 'Enter':
-        event.target.click(); // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+        event.target.click();
+        // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
         // handlePrevent(event);
-
         break;
-
       case 'ArrowDown':
         this.setFocusToFirstMenuItem(id);
-        (0, _a11y.handlePrevent)(event);
+        visible && (0, _a11y.handlePrevent)(event);
         break;
-
       case 'ArrowUp':
         this.setFocusToLastMenuItem(id);
-        (0, _a11y.handlePrevent)(event);
+        visible && (0, _a11y.handlePrevent)(event);
         break;
-
       default:
         break;
     }
   }
-
 }
-
 exports.default = DropdownFoundation;

package/lib/cjs/dropdown/menuFoundation.js

@@ -4,88 +4,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _a11y = require("../utils/a11y");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class DropdownMenuFoundation extends _foundation.default {
   constructor() {
     super(...arguments);
     this.menuItemNodes = null;
     this.firstChars = [];
   }
-
   handleEscape(menu) {
     const trigger = this._adapter.getContext('trigger');
-
     if (trigger === 'custom') {
-      const menuButton = menu && (0, _a11y.getMenuButton)(document.querySelectorAll("[data-popupid]"), menu.id);
+      const menuButton = menu && (0, _a11y.getMenuButton)(document.querySelectorAll(`[data-popupid]`), menu.id);
       menuButton.focus();
     }
   }
-
   setFocusByFirstCharacter(curItem, char) {
     const index = (0, _a11y.findIndexByCharacter)(this.menuItemNodes, curItem, this.firstChars, char);
-
     if (index >= 0) {
       (0, _a11y.setFocusToItem)(this.menuItemNodes, this.menuItemNodes[index]);
     }
   }
-
   onMenuKeydown(event) {
     const menu = (0, _a11y.getAncestorNodeByRole)(event.target, 'tooltip');
-
     if (!this.menuItemNodes) {
       this.menuItemNodes = [...event.target.parentNode.getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
     }
-
     if (this.firstChars.length === 0) {
       this.menuItemNodes.forEach(item => {
-        var _a; // the menuItemNodes can be an component and not exit textContent
-
-
+        var _a;
+        // the menuItemNodes can be an component and not exit textContent
         this.firstChars.push((_a = item.textContent.trim()[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
       });
-    } // get the currently focused menu item
-
-
+    }
+    // get the currently focused menu item
     const curItem = this.menuItemNodes.find(item => item.tabIndex === 0);
-
     switch (event.key) {
       case ' ':
       case 'Enter':
-        event.target.click(); // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+        event.target.click();
+        // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
         // handlePrevent(event);
-
         break;
-
       case 'Escape':
         this.handleEscape(menu);
         break;
-
       case 'ArrowUp':
         (0, _a11y.setFocusToPreviousMenuItem)(this.menuItemNodes, curItem);
         (0, _a11y.handlePrevent)(event);
         break;
-
       case 'ArrowDown':
         (0, _a11y.setFocusToNextMenuitem)(this.menuItemNodes, curItem);
         (0, _a11y.handlePrevent)(event);
         break;
-
       default:
         if ((0, _a11y.isPrintableCharacter)(event.key)) {
-          this.setFocusByFirstCharacter(curItem, event.key); // it can be an input on Dropdown, handlePrevent may affect the input of the component
+          this.setFocusByFirstCharacter(curItem, event.key);
+          // it can be an input on Dropdown, handlePrevent may affect the input of the component
           // handlePrevent(event); 
         }
 
         break;
     }
   }
-
 }
-
 exports.default = DropdownMenuFoundation;

package/lib/cjs/empty/constants.js

@@ -4,11 +4,9 @@ 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, "-empty")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-empty`
 };
 exports.cssClasses = cssClasses;
 const strings = {

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

@@ -6,6 +6,7 @@ declare const strings: {
     LABEL_POS: string[];
     LABEL_ALIGN: string[];
     EXTRA_POS: string[];
+    DEFAULT_TRIGGER: string;
 };
 declare const numbers: {};
 export { cssClasses, strings, numbers };

package/lib/cjs/form/constants.js

@@ -4,18 +4,17 @@ 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, "-form")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-form`
 };
 exports.cssClasses = cssClasses;
 const strings = {
   LAYOUT: ['horizontal', 'vertical'],
   LABEL_POS: ['left', 'top', 'inset'],
   LABEL_ALIGN: ['left', 'right'],
-  EXTRA_POS: ['middle', 'bottom']
+  EXTRA_POS: ['middle', 'bottom'],
+  DEFAULT_TRIGGER: 'change'
 };
 exports.strings = strings;
 const numbers = {};

package/lib/cjs/form/form.css

@@ -48,6 +48,7 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
+  margin-top: 0px;
   padding-right: 16px;
   display: inline-block;
   vertical-align: middle;
@@ -172,6 +173,7 @@
   margin-bottom: 0;
   padding-top: 12px;
   padding-bottom: 12px;
+  overflow: hidden;
 }
 .semi-form-vertical .semi-form-field-group .semi-form-field {
   margin-top: 0;
@@ -201,8 +203,10 @@
   font-weight: 600;
   width: 100%;
   padding-bottom: 8px;
+  padding-top: 0px;
   border-bottom: 1px solid var(--semi-color-border);
   margin-bottom: 4px;
+  margin-top: 0px;
   color: var(--semi-color-text-0);
 }
 .semi-form-section:nth-of-type(1) {

package/lib/cjs/form/form.scss

@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
+        margin-top: $spacing-form_label-marginTop;
         padding-right: $spacing-form_label-paddingRight;
         display: inline-block;
         vertical-align: middle;
@@ -256,11 +257,11 @@ $rating: #{$prefix}-rating;
         margin-bottom: 0;
         padding-top: $spacing-form_field_group_vertical-paddingTop;
         padding-bottom: $spacing-form_field_group_vertical-paddingBottom;
+        overflow: hidden;
     }
 }
 
 .#{$form}-field-group {
-
     &[x-label-pos="top"] {
     }
 
@@ -285,11 +286,13 @@ $rating: #{$prefix}-rating;
         margin-block-start: 0;
         margin-block-end: 0;
         @include font-size-header-5;
-        font-weight: 600;
+        font-weight: $font-weight-bold;
         width: 100%;
         padding-bottom: $spacing-form_section_text-paddingBottom;
+        padding-top: $spacing-form_section_text-paddingTop;
         border-bottom: $width-form_section-border solid $color-form_section-border-default;
         margin-bottom: $spacing-form_section_text-marginBottom;
+        margin-top: $spacing-form_section_text-marginTop;
         color: $color-form_section-text-default;
     }
 

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

@@ -1,5 +1,5 @@
 import BaseFoundation from '../base/foundation';
-import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
+import { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
 export type { BaseFormAdapter };
 export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
@@ -19,7 +19,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     validate(fieldPaths?: Array<string>): Promise<unknown>;
     _formValidate(): Promise<unknown>;
     _fieldsValidate(fieldPaths: Array<string>): Promise<unknown>;
-    submit(): void;
+    submit(e?: any): void;
     /**
      * Case A：
      *      All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
@@ -95,6 +95,6 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     getFormProps(keys?: Array<string>): ComponentProps;
     getFieldExist(field: string): boolean;
     _autoScroll(timeout?: boolean | number): void;
-    _getErrorFieldAndScroll(scrollOpts?: scrollIntoViewOptions | boolean): void;
-    scrollToField(field: string, scrollOpts?: scrollIntoViewOptions<any>): void;
+    _getErrorFieldAndScroll(scrollOpts?: ScrollIntoViewOptions | boolean): void;
+    scrollToField(field: string, scrollOpts?: ScrollIntoViewOptions<any>): void;
 }