@pisell/materials 6.5.2 → 6.5.3

package/lib/components/virtual-keyboard/Amount/types.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { BaseNumberKeyboardProps } from '../BaseNumberKeyboard';
+export interface RightItemsStyleProps {
+    buttonBackgroundColor?: string;
+    textColor?: string;
+    resetButtonBackgroundColor?: string;
+    resetButtonTextColor?: string;
+    isDoneButtonFollowTheme?: boolean;
+    doneButtonBackgroundColor?: string;
+    doneButtonTextColor?: string;
+}
+export interface AmountProps {
+    max?: number;
+    min?: number;
+    doneText?: string;
+    resetText?: string;
+    defaultValue?: string | number;
+    placeholder?: string;
+    amountProps?: {
+        showCurrencySymbol: boolean;
+        useThousandsSeparator: boolean;
+    };
+    presets?: BaseNumberKeyboardProps['presets'];
+    value?: string | number;
+    onChange?: (val: string | number) => void;
+    onEnter?: (val: string | number) => void;
+    defaultSelect?: boolean;
+    inputFormat?: (_v: string) => React.ReactNode | null;
+    rightItemsStyle?: RightItemsStyleProps;
+    selectType?: 'light' | 'dark';
+    backgroundColor?: string;
+    containerBackgroundColor?: string;
+    buttonBackgroundColor?: string;
+    textColor?: string;
+    resetButtonBackgroundColor?: string;
+    resetButtonTextColor?: string;
+    isDoneButtonFollowTheme?: boolean;
+    doneButtonBackgroundColor?: string;
+    doneButtonTextColor?: string;
+    keyboardBackgroundColor?: string;
+    keyboardButtonBackgroundColor?: string;
+    keyboardButtonTextColor?: string;
+    keyboardButtonHoverColor?: string;
+}

package/lib/components/virtual-keyboard/BaseNumberKeyboard/Presets.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
-import "./Presets.less";
+import React from 'react';
+import './Presets.less';
 export declare type PresetsItem = {
     label: string;
     value: number | string;
+    style?: React.CSSProperties;
+    onClick?: (item: PresetsItem, _next: () => void) => void;
+    render?: (item: PresetsItem) => React.ReactNode;
 };
 export interface PresetsProps {
     presets?: PresetsItem[];

package/lib/components/virtual-keyboard/BaseNumberKeyboard/Presets.js

@@ -36,11 +36,28 @@ var import_react = __toESM(require("react"));
 var import_Presets = require("./Presets.less");
 var Presets = (props) => {
   const { presets, onChange } = props;
+  const handleItemClick = (item) => {
+    if (item.onClick) {
+      const _next = () => onChange(`${item.value}`);
+      item.onClick(item, _next);
+    } else {
+      onChange(`${item.value}`);
+    }
+  };
   return (0, import_react.useMemo)(() => {
     if (!(presets == null ? void 0 : presets.length)) {
       return null;
     }
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-keyboard-preset" }, presets.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { onClick: () => onChange(`${item.value}`), className: "pisell-virtual-keyboard-preset-item" }, item.label)));
-  }, [presets]);
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-keyboard-preset" }, presets.map((item, index) => {
+      var _a;
+      const itemProps = {
+        key: index,
+        className: "pisell-virtual-keyboard-preset-item",
+        style: item.style,
+        onClick: () => handleItemClick(item)
+      };
+      return /* @__PURE__ */ import_react.default.createElement("div", { ...itemProps }, ((_a = item.render) == null ? void 0 : _a.call(item, item)) || item.label);
+    }));
+  }, [presets, onChange]);
 };
 var Presets_default = Presets;

package/lib/components/virtual-keyboard/BaseNumberKeyboard/Presets.less

@@ -1,18 +1,22 @@
 .pisell-virtual-keyboard-preset {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   gap: 7px;
-  flex-wrap: wrap;
   margin-bottom: 8px;
+
   .pisell-virtual-keyboard-preset-item {
     display: flex;
-    flex: 1;
     padding: 12px 20px;
     align-items: center;
     justify-content: center;
-    height: 48px;
+    height: 40px;
     border-radius: 8px;
-    border: 1px solid var(--Gray-300, #D0D5DD);
+    border: 1px solid var(--Gray-300, #E9D7FE);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     background: var(--Primary-25, #FCFAFF);
+    font-weight: 600;
+    color: #6941C6;
+    cursor: pointer;
+    position: relative;
   }
 }

package/lib/components/virtual-keyboard/BaseNumberKeyboard/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PresetsProps } from './Presets';
+import { KeyboardProps } from '../Keyboard';
+import { RightItemsStyleProps } from '../Amount';
+import './index.less';
+export interface BaseNumberKeyboardProps {
+    placeholder?: string;
+    format?: (val: string) => React.ReactNode;
+    defaultValue?: string | number;
+    doneText?: string;
+    resetText?: string;
+    onChange?: (val: string) => void;
+    onEnter?: (val: string) => void;
+    value?: string | number;
+    max?: number;
+    min?: number;
+    presets?: PresetsProps['presets'];
+    defaultSelect?: boolean;
+    rightItemsStyle?: RightItemsStyleProps;
+    customDisplay?: React.ReactNode | ((props: any) => React.ReactNode);
+    keyboardProps?: KeyboardProps;
+    style?: React.CSSProperties;
+}
+declare const BaseNumberKeyboard: (props: BaseNumberKeyboardProps) => JSX.Element;
+export default BaseNumberKeyboard;

package/lib/components/virtual-keyboard/BaseNumberKeyboard/index.js

@@ -128,7 +128,9 @@ var BaseNumberKeyboard = (props) => {
     onEnter,
     presets,
     defaultSelect,
-    rightItemsStyle
+    rightItemsStyle,
+    customDisplay,
+    style
   } = props;
   const [value, setValue] = (0, import_ahooks.useControllableValue)(props, {
     defaultValue
@@ -200,6 +202,8 @@ var BaseNumberKeyboard = (props) => {
     }
   };
   const handleChangeValue = (val) => {
+    var _a;
+    val = typeof val === "string" ? val : ((_a = val == null ? void 0 : val.target) == null ? void 0 : _a.value) || "";
     const detail = checkValue(val);
     if (detail) return;
     setValue(val);
@@ -228,38 +232,52 @@ var BaseNumberKeyboard = (props) => {
   const handleKeyboardChange = (0, import_ahooks.useMemoizedFn)((val) => {
     return (actions[val] || actions.default)(val);
   });
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-keyboard-base" }, /* @__PURE__ */ import_react.default.createElement(
-    import_VirtualKeyInput.default,
-    {
-      value,
-      onChange: (e) => handleChangeValue(e.target.value),
-      renderInput: (props2) => {
-        if ((0, import_utils.isUndefined)(props2.value) || props2.value === "") {
-          return /* @__PURE__ */ import_react.default.createElement(
-            import_VirtualInput.default,
-            {
-              autoFocus: true,
-              placeholder,
-              value: props2.value
-            }
-          );
-        }
-        return (format == null ? void 0 : format(props2.value)) || props2.value;
-      },
-      showDelete: false,
-      onValueSelect: setSelect,
-      defaultSelect,
-      style: {
-        backgroundColor: (rightItemsStyle == null ? void 0 : rightItemsStyle.buttonBackgroundColor) || "#fff",
-        color: (rightItemsStyle == null ? void 0 : rightItemsStyle.textColor) || "#000000"
+  const renderDisplayField = () => {
+    if (customDisplay) {
+      if (typeof customDisplay === "function") {
+        return customDisplay({
+          value,
+          onChange: handleChangeValue,
+          onValueSelect: setSelect
+        });
       }
+      return customDisplay;
     }
-  ), /* @__PURE__ */ import_react.default.createElement(import_Presets.default, { presets, onChange: handleChangeValue }), /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_VirtualKeyInput.default,
+      {
+        value,
+        onChange: (e) => handleChangeValue(e.target.value),
+        renderInput: (props2) => {
+          if ((0, import_utils.isUndefined)(props2.value) || props2.value === "") {
+            return /* @__PURE__ */ import_react.default.createElement(
+              import_VirtualInput.default,
+              {
+                autoFocus: true,
+                placeholder,
+                value: props2.value
+              }
+            );
+          }
+          return (format == null ? void 0 : format(props2.value)) || props2.value;
+        },
+        showDelete: false,
+        onValueSelect: setSelect,
+        defaultSelect,
+        style: {
+          backgroundColor: (rightItemsStyle == null ? void 0 : rightItemsStyle.buttonBackgroundColor) || "#fff",
+          color: (rightItemsStyle == null ? void 0 : rightItemsStyle.textColor) || "#000000"
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-keyboard-base", style }, renderDisplayField(), /* @__PURE__ */ import_react.default.createElement(import_Presets.default, { presets, onChange: handleChangeValue }), /* @__PURE__ */ import_react.default.createElement(
     import_Keyboard.default,
     {
       items: itemsWithStyle,
       rightItems,
-      onChange: handleKeyboardChange
+      onChange: handleKeyboardChange,
+      ...props.keyboardProps || {}
     }
   ));
 };

package/lib/components/virtual-keyboard/Keyboard/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+export declare type ItemValue = string | number;
+export interface Item {
+    value: ItemValue;
+    label: React.ReactNode;
+    disabled: boolean;
+    type: 'text' | 'primary';
+    style?: React.CSSProperties;
+    size?: number;
+}
+export interface KeyboardProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (value?: ItemValue) => void;
+    items?: Item[];
+    rightItems?: Item[];
+    keydown?: boolean;
+}
+declare const _default: React.MemoExoticComponent<(props: KeyboardProps) => JSX.Element>;
+export default _default;

package/lib/components/virtual-keyboard/Number/index.d.ts

@@ -0,0 +1,5 @@
+import { NumberProps } from './types';
+import './index.less';
+export type { NumberProps };
+declare const Number: (props: NumberProps) => JSX.Element;
+export default Number;

package/lib/components/virtual-keyboard/Number/themeConfig.d.ts

@@ -0,0 +1,32 @@
+export declare const numberThemeConfig: {
+    dark: {
+        backgroundColor: string;
+        containerBackgroundColor: string;
+        buttonBackgroundColor: string;
+        textColor: string;
+        resetButtonBackgroundColor: string;
+        resetButtonTextColor: string;
+        isDoneButtonFollowTheme: boolean;
+        doneButtonBackgroundColor: string;
+        doneButtonTextColor: string;
+        keyboardBackgroundColor: string;
+        keyboardButtonBackgroundColor: string;
+        keyboardButtonTextColor: string;
+        keyboardButtonHoverColor: string;
+    };
+    light: {
+        backgroundColor: string;
+        containerBackgroundColor: string;
+        buttonBackgroundColor: string;
+        textColor: string;
+        resetButtonBackgroundColor: string;
+        resetButtonTextColor: string;
+        isDoneButtonFollowTheme: boolean;
+        doneButtonBackgroundColor: string;
+        doneButtonTextColor: string;
+        keyboardBackgroundColor: string;
+        keyboardButtonBackgroundColor: string;
+        keyboardButtonTextColor: string;
+        keyboardButtonHoverColor: string;
+    };
+};

package/lib/components/virtual-keyboard/Number/types.d.ts

@@ -0,0 +1,26 @@
+export interface NumberProps {
+    max?: number;
+    min?: number;
+    doneText?: string;
+    resetText: string;
+    defaultValue?: string | number;
+    placeholder?: string;
+    value?: string | number;
+    onChange?: (val: string | number) => void;
+    onEnter?: (val: string | number) => void;
+    defaultSelect?: boolean;
+    selectType?: 'light' | 'dark';
+    backgroundColor?: string;
+    containerBackgroundColor?: string;
+    buttonBackgroundColor?: string;
+    textColor?: string;
+    resetButtonBackgroundColor?: string;
+    resetButtonTextColor?: string;
+    isDoneButtonFollowTheme?: boolean;
+    doneButtonBackgroundColor?: string;
+    doneButtonTextColor?: string;
+    keyboardBackgroundColor?: string;
+    keyboardButtonBackgroundColor?: string;
+    keyboardButtonTextColor?: string;
+    keyboardButtonHoverColor?: string;
+}

package/lib/components/virtual-keyboard/Time/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const formatStringToTime: (value: string) => {
     valueArray: string[];
     valueString: string;

package/lib/components/virtual-keyboard/VirtualKeyInput/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { InputProps } from 'antd';
+import './index.less';
+export interface VirtualKeyInputProps extends InputProps {
+    previewValue?: string;
+    renderInput?: (props: any) => any;
+    showDelete?: boolean;
+    onValueSelect?: (selected: boolean) => void;
+    defaultSelect?: boolean;
+    style?: React.CSSProperties;
+}
+declare const VirtualKeyInput: (props: VirtualKeyInputProps) => JSX.Element;
+export default VirtualKeyInput;

package/lib/components/virtual-keyboard/index.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { KeyboardProps } from "./Keyboard";
+import { VirtualKeyInputProps } from "./VirtualKeyInput";
+import "./index.less";
+interface VirtualKeyboardProps extends React.HTMLAttributes<HTMLDivElement> {
+    keyboardProps?: KeyboardProps;
+    virtualKeyInputProps?: VirtualKeyInputProps;
+    rightPanel?: React.ReactNode;
+    style?: React.CSSProperties;
+    onChange?: (value?: any) => void;
+    value?: string;
+    selectType?: 'light' | 'dark';
+    backgroundColor?: string;
+    containerBackgroundColor?: string;
+    buttonBackgroundColor?: string;
+    textColor?: string;
+    keyboardBackgroundColor?: string;
+    keyboardButtonBackgroundColor?: string;
+    keyboardButtonTextColor?: string;
+    keyboardButtonHoverColor?: string;
+    primaryButtonBackgroundColor?: string;
+    primaryButtonTextColor?: string;
+}
+declare const VirtualKeyboard: (props: VirtualKeyboardProps) => JSX.Element;
+export default VirtualKeyboard;

package/lib/components/virtualInput/BaseVirtualInput/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import './index.less';
+export interface BaseVirtualInputProps {
+    /** 输入值 */
+    value?: string | React.ReactNode;
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否自动聚焦 */
+    autoFocus?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 组件高度，默认60px */
+    height?: number | string;
+    /** 字体大小，默认48px，如果不设置会根据高度自动计算 */
+    fontSize?: number | string;
+    /** 聚焦回调 */
+    onFocus?: () => void;
+    /** 失焦回调 */
+    onBlur?: () => void;
+    /** 文字位置 */
+    textAlign?: 'start' | 'center' | 'end';
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** showCursor  */
+    showCursor?: boolean;
+    /** 防止失焦的元素选择器或ref */
+    preventBlurElements?: Array<string | React.RefObject<HTMLElement>>;
+    /** 是否聚焦（受控模式） */
+    focused?: boolean;
+}
+export interface BaseVirtualInputRef {
+    /** 手动聚焦 */
+    focus: () => void;
+    /** 手动失焦 */
+    blur: () => void;
+}
+declare const BaseVirtualInput: React.ForwardRefExoticComponent<BaseVirtualInputProps & React.RefAttributes<BaseVirtualInputRef>>;
+export default BaseVirtualInput;

package/lib/components/virtualInput/BaseVirtualInput/index.js

@@ -0,0 +1,179 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/virtualInput/BaseVirtualInput/index.tsx
+var BaseVirtualInput_exports = {};
+__export(BaseVirtualInput_exports, {
+  default: () => BaseVirtualInput_default
+});
+module.exports = __toCommonJS(BaseVirtualInput_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_auto_resize_text = __toESM(require("../../auto-resize-text"));
+var import_index = require("./index.less");
+var BaseVirtualInput = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const {
+      value = "",
+      placeholder = "",
+      autoFocus = false,
+      disabled = false,
+      height = 60,
+      fontSize,
+      onFocus,
+      onBlur,
+      style,
+      className,
+      preventBlurElements = [],
+      focused,
+      showCursor = true
+    } = props;
+    const [localFocused, setLocalFocused] = (0, import_react.useState)(focused ?? autoFocus);
+    const internalFocused = "focused" in props ? props.focused : localFocused;
+    const containerRef = (0, import_react.useRef)(null);
+    const handleFocus = (0, import_react.useCallback)(() => {
+      if (disabled) return;
+      setLocalFocused(true);
+      onFocus == null ? void 0 : onFocus();
+    }, [disabled, onFocus]);
+    const handleBlur = (0, import_react.useCallback)(() => {
+      setLocalFocused(false);
+      onBlur == null ? void 0 : onBlur();
+    }, [onBlur]);
+    const shouldPreventBlur = (0, import_react.useCallback)(
+      (target) => {
+        if (!target || !(target instanceof Element)) return false;
+        return preventBlurElements.some((element) => {
+          if (typeof element === "string") {
+            const matchedElements = document.querySelectorAll(element);
+            return Array.from(matchedElements).some(
+              (el) => el.contains(target) || el === target
+            );
+          } else if (element && "current" in element && element.current) {
+            return element.current.contains(target);
+          }
+          return false;
+        });
+      },
+      [preventBlurElements]
+    );
+    (0, import_react.useEffect)(() => {
+      const handleGlobalClick = (event) => {
+        if (!internalFocused) return;
+        const target = event.target;
+        if (containerRef.current && containerRef.current.contains(target)) {
+          return;
+        }
+        if (shouldPreventBlur(target)) {
+          return;
+        }
+        handleBlur();
+      };
+      if (internalFocused) {
+        document.addEventListener("mousedown", handleGlobalClick);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleGlobalClick);
+      };
+    }, [internalFocused, handleBlur, shouldPreventBlur]);
+    const handleClick = (0, import_react.useCallback)(
+      (event) => {
+        handleFocus();
+      },
+      [handleFocus]
+    );
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        focus: handleFocus,
+        blur: handleBlur
+      }),
+      [handleFocus, handleBlur]
+    );
+    const componentHeight = typeof height === "number" ? `${height}px` : height;
+    const getBaseFontSize = (0, import_react.useCallback)(() => {
+      if (fontSize) {
+        return typeof fontSize === "number" ? fontSize : parseFloat(fontSize);
+      }
+      return typeof height === "number" ? height * 0.8 : 48;
+    }, [fontSize, height]);
+    const baseFontSize = getBaseFontSize();
+    const minFontSize = Math.max(10, baseFontSize * 0.2);
+    const maxFontSize = baseFontSize;
+    const caretHeight = `calc(${componentHeight} * 0.67)`;
+    const mergedStyle = {
+      ...style,
+      "--virtual-input-height": componentHeight,
+      "--virtual-input-caret-height": caretHeight,
+      "--virtual-input-font-size": `${baseFontSize}px`
+    };
+    const showPlaceholder = value === void 0 || value === "";
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: (0, import_classnames.default)(
+          "pisell-base-virtual-input",
+          {
+            "pisell-base-virtual-input--focused": internalFocused,
+            "pisell-base-virtual-input--disabled": disabled
+          },
+          className
+        ),
+        style: mergedStyle,
+        onClick: handleClick
+      },
+      showPlaceholder && /* @__PURE__ */ import_react.default.createElement(
+        import_auto_resize_text.default,
+        {
+          className: "pisell-base-virtual-input-placeholder",
+          mode: "oneline",
+          minFontSizePx: minFontSize,
+          maxFontSizePx: maxFontSize,
+          fontSizePrecisionPx: 0.5
+        },
+        placeholder
+      ),
+      !!value && /* @__PURE__ */ import_react.default.createElement(
+        import_auto_resize_text.default,
+        {
+          className: "pisell-base-virtual-input-value",
+          mode: "oneline",
+          minFontSizePx: minFontSize,
+          maxFontSizePx: maxFontSize,
+          fontSizePrecisionPx: 0.5,
+          scrollToEnd: true
+        },
+        value
+      ),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-base-virtual-input-caret-container" }, internalFocused && !disabled && showCursor && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-base-virtual-input-caret" }))
+    );
+  }
+);
+BaseVirtualInput.displayName = "BaseVirtualInput";
+var BaseVirtualInput_default = BaseVirtualInput;

package/lib/components/virtualInput/BaseVirtualInput/index.less

@@ -0,0 +1,78 @@
+.pisell-base-virtual-input {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+  position: relative;
+  height: var(--virtual-input-height);
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.pisell-base-virtual-input-placeholder {
+  color: #98a2b3;
+  font-weight: 400;
+  user-select: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  font-size: var(--virtual-input-font-size);
+  height: var(--virtual-input-height);
+  line-height: var(--virtual-input-height);
+}
+
+.pisell-base-virtual-input-value {
+  color: #101828;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+  // width: 100%;
+  max-width: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  font-size: var(--virtual-input-font-size);
+  line-height: var(--virtual-input-height);
+  height: var(--virtual-input-height);
+
+  -ms-overflow-style: none; /* IE 和 Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari 和 Opera */
+  }
+}
+
+.pisell-base-virtual-input-caret-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.pisell-base-virtual-input-caret {
+  width: 2px;
+  height: var(--virtual-input-caret-height);
+  background-color: #1570ef;
+  border-radius: 1px;
+  animation: pisell-base-virtual-input-caret-blink 1s infinite;
+}
+
+@keyframes pisell-base-virtual-input-caret-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}