style: playground params styles

src/components/seal-form/components/wrapper.less

@@ -2,6 +2,7 @@
   @wrapheight: 54px;
   @inputheight: 32px;
   @borderRadius: 20px;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -13,6 +14,22 @@
   border-radius: @borderRadius;
   padding-inline: 12px;
   padding-block: 20px 0;
+
+  &.filled {
+    border: none;
+    box-shadow: none;
+  }
+
+  &.borderless {
+    border: none;
+    box-shadow: none;
+  }
+
+  &.borderless:focus-within {
+    border: none;
+    box-shadow: none;
+  }
+
   .extra {
     position: absolute;
     right: 12px;
@@ -23,8 +40,10 @@
   &.seal-input-wrapper-disabled {
     background-color: var(--ant-color-bg-container-disabled);
     cursor: not-allowed;
+
     &:hover {
       border-color: var(--ant-color-border);
+
       :global(.ant-input-search-button) {
         border-color: var(--ant-color-border) !important;
         color: var(--ant-color-text-description) !important;
@@ -37,39 +56,47 @@
     padding-bottom: 10px;
     padding-right: 10px;
   }
+
   &.validate-status-error {
     border-width: var(--ant-line-width);
     border-style: var(--ant-line-type);
     border-color: var(--ant-color-error);
+
     &:hover {
       border-color: var(--ant-color-error-border-hover);
     }
+
     &:focus-within {
       border-color: var(--ant-color-error);
     }
   }
+
   &:hover {
     border-color: var(--ant-input-hover-border-color);
     transition: all 0.2s ease;
   }
+
   &:focus-within {
     border-color: var(--ant-input-active-border-color);
     box-shadow: var(--ant-input-active-shadow);
     outline: 0;
     background-color: var(--ant-input-active-bg);
   }
+
   .label {
     position: absolute;
     left: 24px;
-    color: rgba(0, 0, 0, 0.45);
+    color: rgba(0, 0, 0, 45%);
     font-size: var(--font-size-base);
     line-height: 1;
     pointer-events: all;
     z-index: 5;
+
     &.isfoucs-has-value {
       top: 10px;
       transition: all 0.2s var(--seal-transition-func);
     }
+
     &.blur-no-value {
       top: 21px;
       transition: all 0.2s var(--seal-transition-func);
@@ -84,27 +111,32 @@
     box-shadow: none;
     height: @inputheight !important;
   }
+
   :global(.ant-select-selector) {
     border: none !important;
     padding-block: 5px;
     padding-inline: 12px;
     box-shadow: none !important;
   }
+
   :global(.ant-select-selection-item) {
     height: @inputheight !important;
     padding-block: 5px !important;
     line-height: 22px !important;
     padding-inline-end: 0 !important;
   }
+
   :global(.ant-select-arrow) {
     top: 10px;
   }
+
   :global(
       .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
         .ant-select-selector
     ) {
     background-color: transparent;
   }
+
   :global(.ant-select-selection-search-input) {
     height: @inputheight !important;
   }
@@ -119,6 +151,7 @@
     padding-inline: 12px;
     height: @inputheight !important;
   }
+
   :global(.ant-input-number) {
     display: flex;
     align-items: center;
@@ -127,6 +160,7 @@
     padding: 0;
     height: @inputheight !important;
   }
+
   :global(.ant-input-outlined) {
     display: flex;
     align-items: center;
@@ -135,36 +169,46 @@
     padding-block: 5px;
     padding-inline: 12px;
     height: @inputheight !important;
+
     &.seal-textarea {
       min-height: 100px !important;
     }
   }
+
   :global(.ant-input.ant-input-disabled) {
     background-color: transparent;
   }
+
   :global(input.ant-input-number-input) {
     height: @inputheight !important;
     padding-block: 5px;
     padding-inline: 12px;
   }
+
   :global(.ant-input-group) {
     position: static;
   }
+
   :global(.ant-input-group-addon) {
     inset-inline-start: unset !important;
     border-radius: 0 @borderRadius @borderRadius 0;
     width: 30px;
     background-color: transparent;
+    border: none;
   }
+
   :global(.ant-input-group-addon:hover) {
     background-color: transparent !important;
   }
+
   :global(.ant-input-group-wrapper-disabled .ant-input-group-addon) {
     background-color: transparent;
   }
+
   :global(.ant-input-group-wrapper-disabled .ant-input-group-addon:hover) {
     background-color: transparent !important;
   }
+
   :global(.ant-input-search-button) {
     position: absolute;
     top: -20px;
@@ -181,9 +225,7 @@
     top: -20px;
     height: @wrapheight - 2px;
   }
-  :global(.ant-input-group-addon) {
-    border: none;
-  }
+
   :global(.ant-input-prefix) {
     position: absolute;
     top: 1px;

src/components/seal-form/components/wrapper.tsx

@@ -12,6 +12,7 @@ interface WrapperProps {
   className?: string;
   disabled?: boolean;
   extra?: React.ReactNode;
+  variant?: string;
   onClick?: () => void;
 }
 
@@ -25,6 +26,7 @@ const Wrapper: React.FC<WrapperProps> = ({
   description,
   required,
   extra,
+  variant,
   onClick
 }) => {
   return (

src/components/seal-form/field-wrapper.tsx

@@ -10,6 +10,8 @@ interface WrapperProps {
   disabled?: boolean;
   required?: boolean;
   description?: string;
+  variant?: string;
+  style?: React.CSSProperties;
   onClick?: () => void;
 }
 
@@ -20,14 +22,19 @@ const Wrapper: React.FC<WrapperProps> = ({
   className,
   disabled,
   required,
+  variant,
+  style,
   description
 }) => {
   return (
     <div
+      style={{ ...style }}
       className={classNames(
         wrapperStyle.wrapper,
         wrapperStyle[`validate-status-${status}`],
         disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
+        variant === 'filled' ? wrapperStyle['filled'] : '',
+        variant === 'borderless' ? wrapperStyle['borderless'] : '',
         className ? wrapperStyle[className] : ''
       )}
     >

src/components/seal-form/input-number.tsx

@@ -32,7 +32,7 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   const handleClickWrapper = () => {
     if (!props.disabled && !isFocus) {
       inputRef.current?.focus?.({
-        cursor: 'all'
+        cursor: 'end'
       });
       setIsFocus(true);
     }

src/components/seal-form/seal-input.tsx

@@ -1,111 +1,13 @@
 import type { InputProps } from 'antd';
 import { Form, Input } from 'antd';
-import type { TextAreaProps } from 'antd/es/input/TextArea';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Wrapper from './components/wrapper';
 import SealInputNumber from './input-number';
 import SealInputSearch from './input-search';
 import SealPassword from './password';
+import SealTextArea from './seal-textarea';
 import { SealFormItemProps } from './types';
 
-const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
-  const {
-    label,
-    placeholder,
-    onChange,
-    onFocus,
-    onBlur,
-    onInput,
-    style,
-    required,
-    isInFormItems = true,
-    description,
-    variant,
-    extra,
-    ...rest
-  } = props;
-  const [isFocus, setIsFocus] = useState(false);
-  const inputRef = useRef<any>(null);
-  let status = '';
-  if (isInFormItems) {
-    const statusData = Form?.Item?.useStatus?.();
-    status = statusData?.status || '';
-  }
-
-  useEffect(() => {
-    if (props.value) {
-      setIsFocus(true);
-    }
-  }, [props.value]);
-
-  const handleClickWrapper = useCallback(() => {
-    if (!props.disabled && !isFocus) {
-      inputRef.current?.focus?.({
-        cursor: 'all'
-      });
-      setIsFocus(true);
-    }
-  }, [props.disabled, isFocus]);
-
-  const handleChange = useCallback(
-    (e: any) => {
-      onChange?.(e);
-    },
-    [onChange]
-  );
-
-  const handleOnFocus = useCallback(
-    (e: any) => {
-      setIsFocus(true);
-      onFocus?.(e);
-    },
-    [onFocus]
-  );
-
-  const handleOnBlur = useCallback(
-    (e: any) => {
-      if (!inputRef.current?.resizableTextArea?.textArea?.value) {
-        setIsFocus(false);
-        onBlur?.(e);
-      }
-    },
-    [onBlur]
-  );
-
-  const handleInput = useCallback(
-    (e: any) => {
-      onInput?.(e);
-    },
-    [onInput]
-  );
-
-  return (
-    <Wrapper
-      status={status}
-      label={label || (placeholder as string)}
-      isFocus={isFocus}
-      required={required}
-      description={description}
-      className="seal-textarea-wrapper"
-      variant={variant}
-      extra={extra}
-      disabled={props.disabled}
-      onClick={handleClickWrapper}
-    >
-      <Input.TextArea
-        {...rest}
-        ref={inputRef}
-        style={{ minHeight: '80px', ...style }}
-        className="seal-textarea"
-        onFocus={handleOnFocus}
-        onBlur={handleOnBlur}
-        onInput={handleInput}
-        onChange={(e) => handleChange(e)}
-      ></Input.TextArea>
-    </Wrapper>
-  );
-};
-
 const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
   const {
     label,
@@ -113,6 +15,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
     required,
     description,
     isInFormItems = true,
+    variant,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -132,7 +35,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
   const handleClickWrapper = () => {
     if (!props.disabled && !isFocus) {
       inputRef.current?.focus?.({
-        cursor: 'all'
+        cursor: 'end'
       });
       setIsFocus(true);
     }

src/components/seal-form/seal-textarea.tsx

@@ -0,0 +1,104 @@
+import { Form, Input } from 'antd';
+import type { TextAreaProps } from 'antd/es/input/TextArea';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Wrapper from './components/wrapper';
+import { SealFormItemProps } from './types';
+
+const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
+  const {
+    label,
+    placeholder,
+    onChange,
+    onFocus,
+    onBlur,
+    onInput,
+    style,
+    required,
+    isInFormItems = true,
+    description,
+    variant,
+    extra,
+    ...rest
+  } = props;
+  const [isFocus, setIsFocus] = useState(false);
+  const inputRef = useRef<any>(null);
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
+
+  useEffect(() => {
+    if (props.value) {
+      setIsFocus(true);
+    }
+  }, [props.value]);
+
+  const handleClickWrapper = useCallback(() => {
+    if (!props.disabled && !isFocus) {
+      inputRef.current?.focus?.({
+        cursor: 'all'
+      });
+      setIsFocus(true);
+    }
+  }, [props.disabled, isFocus]);
+
+  const handleChange = useCallback(
+    (e: any) => {
+      onChange?.(e);
+    },
+    [onChange]
+  );
+
+  const handleOnFocus = useCallback(
+    (e: any) => {
+      setIsFocus(true);
+      onFocus?.(e);
+    },
+    [onFocus]
+  );
+
+  const handleOnBlur = useCallback(
+    (e: any) => {
+      if (!inputRef.current?.resizableTextArea?.textArea?.value) {
+        setIsFocus(false);
+        onBlur?.(e);
+      }
+    },
+    [onBlur]
+  );
+
+  const handleInput = useCallback(
+    (e: any) => {
+      onInput?.(e);
+    },
+    [onInput]
+  );
+
+  return (
+    <Wrapper
+      status={status}
+      label={label || (placeholder as string)}
+      isFocus={isFocus}
+      required={required}
+      description={description}
+      className="seal-textarea-wrapper"
+      extra={extra}
+      disabled={props.disabled}
+      onClick={handleClickWrapper}
+    >
+      <Input.TextArea
+        {...rest}
+        ref={inputRef}
+        style={{ minHeight: '80px', ...style }}
+        className="seal-textarea"
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        onInput={handleInput}
+        onChange={(e) => handleChange(e)}
+      ></Input.TextArea>
+    </Wrapper>
+  );
+};
+
+export default SealTextArea;

src/components/transition/index.less

@@ -3,37 +3,43 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+
   &.bordered {
     border-width: var(--ant-line-width);
     border-style: var(--ant-line-type);
     border-color: var(--ant-color-border);
     background-color: var(--color-white-1);
   }
+
   &.filled {
     border-color: var(--ant-color-border);
-    .content-wrapper {
+
+    .transition-content-wrapper {
       background-color: var(--color-fill-1);
     }
   }
+
   .header {
     background-color: var(--color-fill-1);
     cursor: pointer;
     padding: 8px 16px;
   }
 
-  .content-wrapper {
+  .transition-content-wrapper {
     overflow: hidden;
     transition: all 300ms ease-in-out;
-    .content {
+
+    .transition-content {
       height: max-content;
       background-color: var(--color-white-1);
       border-radius: var(--border-radius-base);
     }
   }
+
   .ant-input {
     /* 只隐藏垂直滚动条轨道 */
     &::-webkit-scrollbar-track {
-      width: 0px !important;
+      width: 0 !important;
       color: transparent;
     }
   }

src/components/transition/index.tsx

@@ -62,14 +62,14 @@ const TransitionWrapper: React.FC<TransitionWrapProps> = forwardRef(
           {header}
         </div>
         <div
-          className="content-wrapper"
+          className="transition-content-wrapper"
           style={{
             minHeight: isOpen ? height : 0,
             height: isOpen ? 'auto' : 0
           }}
           ref={contentRef}
         >
-          <div className="content">{children}</div>
+          <div className="transition-content">{children}</div>
         </div>
       </div>
     );