@pisell/materials 6.3.23 → 6.3.24

package/lib/components/pisellQuickFilter/index.js

@@ -0,0 +1,64 @@
+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/pisellQuickFilter/index.tsx
+var pisellQuickFilter_exports = {};
+__export(pisellQuickFilter_exports, {
+  default: () => pisellQuickFilter_default
+});
+module.exports = __toCommonJS(pisellQuickFilter_exports);
+var import_react = __toESM(require("react"));
+var import_QuickFilter = __toESM(require("../filter/components/QuickFilter"));
+var import_antd = require("antd");
+var pisellQuickFilter = (0, import_react.forwardRef)((props) => {
+  const { filterList, formFiltersPrefix, hasForm = true, ...otherProps } = props;
+  const content = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_QuickFilter.default,
+      {
+        value: { quickFilter: filterList },
+        formFiltersPrefix: formFiltersPrefix || ""
+      }
+    );
+  }, [filterList, formFiltersPrefix]);
+  if (hasForm) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form,
+      {
+        labelCol: { span: 0 },
+        size: "large",
+        layout: "inline",
+        className: "filter-form-wrapper",
+        ...otherProps
+      },
+      content
+    );
+  }
+  return content;
+});
+var pisellQuickFilter_default = pisellQuickFilter;

package/lib/components/pisellQuickFilter/type.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FilterItemProps } from '../filter/types';
+import { FormInstance } from 'antd';
+export declare type PisellQuickFilterProps = FormInstance & {
+    hasForm?: boolean;
+    children?: React.ReactNode;
+    formFiltersPrefix: string;
+    filterList?: FilterItemProps[];
+    quickFilterMaxLength: number;
+    hiddenQuickFilter: boolean;
+    hiddenOtherFilter: boolean;
+};

package/lib/components/pisellQuickFilter/type.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellQuickFilter/type.ts
+var type_exports = {};
+module.exports = __toCommonJS(type_exports);

package/lib/components/pisellSort/index.d.ts

@@ -0,0 +1,3 @@
+import { PisellSortProps } from './type';
+declare const PisellSort: (props: PisellSortProps) => JSX.Element;
+export default PisellSort;

package/lib/components/pisellSort/index.js

@@ -0,0 +1,48 @@
+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/pisellSort/index.tsx
+var pisellSort_exports = {};
+__export(pisellSort_exports, {
+  default: () => pisellSort_default
+});
+module.exports = __toCommonJS(pisellSort_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_sort = __toESM(require("../sort"));
+var PisellSort = (props) => {
+  const { name, hasForm = true, ...otherProps } = props;
+  const content = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: name || "sort_key", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_sort.default, { ...otherProps }));
+  }, [name, otherProps]);
+  if (hasForm) {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { size: "large", layout: "vertical", ...otherProps }, content);
+  }
+  return content;
+};
+var pisellSort_default = PisellSort;

package/lib/components/pisellSort/type.d.ts

@@ -0,0 +1,7 @@
+import { SortListProps } from '../sort/types';
+import { FormInstance } from 'antd';
+export declare type PisellSortProps = SortListProps & {
+    name?: string;
+} & FormInstance & {
+    hasForm?: boolean;
+};

package/lib/components/pisellSort/type.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellSort/type.ts
+var type_exports = {};
+module.exports = __toCommonJS(type_exports);

package/lib/components/productCard/components/AmountFooter/index.js

@@ -42,7 +42,7 @@ var import_index = require("./index.less");
 var import_utils2 = require("@pisell/utils");
 var prefix = "pisell-lowcode-";
 var Footer = ({ item, hideDivider, type, isOnlyTotal }) => {
-  const { total, origin_total, symbol, tip, num, discount_reason } = item;
+  const { total, origin_total, symbol, tip, num, discount_reason, totalDifference = 0 } = item;
   const isDiscount = (0, import_react.useMemo)(() => {
     if (!origin_total) return false;
     return Number(total) != Number(origin_total);
@@ -87,7 +87,7 @@ var Footer = ({ item, hideDivider, type, isOnlyTotal }) => {
           }
         )) : null
       ), /* @__PURE__ */ import_react.default.createElement("span", null, `×${num}`)) : null,
-      /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}packages-product-footer-total` }, isDiscount ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}packages-product-footer-origin-total` }, (0, import_utils._formatAmount)(origin_total * num, symbol, 2)) : null, /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_utils._formatAmount)(total * num, symbol)))
+      /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}packages-product-footer-total` }, isDiscount ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}packages-product-footer-origin-total` }, (0, import_utils._formatAmount)(origin_total * num, symbol, 2)) : null, /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_utils._formatAmount)(total * num - (totalDifference ?? 0), symbol)))
     )
   ), renderDiscountReason());
 };

package/lib/components/select/index.js

@@ -55,14 +55,15 @@ var SelectBase = (0, import_react.forwardRef)((props, ref) => {
     styleType,
     optionFilterProp = "value",
     popupClassName,
-    onDropdownVisibleChange
+    onDropdownVisibleChange,
+    isSearchServer = false
   } = props;
   const { platform } = (0, import_usePisellConfig.default)();
   const searchInputRef = (0, import_react.useRef)(null);
   const [state, setState] = (0, import_ahooks.useControllableValue)(props);
   const [searchValue, setSearchValue] = (0, import_react.useState)("");
   const filteredOptions = (0, import_react.useMemo)(() => {
-    if (!searchValue) return options;
+    if (!searchValue || isSearchServer) return options;
     return (options || []).filter(
       (option) => {
         var _a;
@@ -70,7 +71,7 @@ var SelectBase = (0, import_react.forwardRef)((props, ref) => {
         return optionValue.includes(searchValue.toLowerCase());
       }
     );
-  }, [options, searchValue, optionFilterProp]);
+  }, [options, searchValue, optionFilterProp, isSearchServer]);
   const onSelectAllChange = (0, import_ahooks.useMemoizedFn)((e) => {
     if (e.target.checked) {
       setState(

package/lib/components/table/Table/fields/index.d.ts

@@ -197,12 +197,12 @@ export declare const fieldList: ({
     field_icon: string;
     field_name: string;
     field_type: string;
-    default_value: boolean;
+    default_value: string;
 } | {
     field_icon: string;
     field_name: string;
     field_type: string;
-    default_value: string;
+    default_value: boolean;
 } | {
     field_icon: string;
     field_name: string;

package/lib/components/table/Table/fields/select/Edit/index.js

@@ -33,15 +33,36 @@ __export(Edit_exports, {
 });
 module.exports = __toCommonJS(Edit_exports);
 var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
 var import_select = __toESM(require("../../../../../select"));
 var Edit = (props, ref) => {
-  const { value, onChange, onBlur, style, bordered, options, ...others } = props;
+  const { value, onChange, onBlur, style, bordered, options, waitTime = 500, ...others } = props;
+  const [resolvedOptions, setResolvedOptions] = (0, import_react.useState)([]);
+  const fetchOptions = (0, import_react.useCallback)(async (searchValue) => {
+    if (typeof options === "function") {
+      try {
+        const result = await options(searchValue);
+        setResolvedOptions(result || []);
+      } catch (error) {
+      }
+    } else {
+      setResolvedOptions(options || []);
+    }
+  }, [options]);
+  const { run: debouncedFetchOptions } = (0, import_ahooks.useDebounceFn)(
+    fetchOptions,
+    { wait: waitTime || 500 }
+  );
+  (0, import_react.useEffect)(() => {
+    fetchOptions();
+  }, [options]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_select.default,
     {
       ...others,
-      options: options || [],
+      options: resolvedOptions,
       bordered,
+      onSearch: debouncedFetchOptions,
       ref,
       value,
       onChange,

package/lib/components/table/Table/fields/types/index.d.ts

@@ -25,6 +25,9 @@ export declare type EditPropsType = {
     options?: {
         value: string;
         label: string;
-    }[];
+    }[] | ((value?: string) => Promise<{
+        value: string;
+        label: string;
+    }[]>);
     [key: string]: any;
 };

package/lib/components/table/Table/utils.d.ts

@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("filters" | "order_by" | "group_by" | "column_setting" | "view_mode" | "gallery_setting" | "filter_setting")[];
+}) => ("filters" | "filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

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

@@ -0,0 +1,44 @@
+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;
+    /** 是否选中全部文本（类似浏览器选中效果） */
+    selected?: boolean;
+    /** 选中状态的背景色，默认为主题色 */
+    selectedColor?: string;
+}
+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,188 @@
+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,
+      selected = false
+    } = 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 === "";
+    const shouldShowCursor = internalFocused && !disabled && showCursor && !selected;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: (0, import_classnames.default)(
+          "pisell-base-virtual-input",
+          `pisell-base-virtual-input--${props == null ? void 0 : props.textAlign}`,
+          {
+            "pisell-base-virtual-input--focused": internalFocused,
+            "pisell-base-virtual-input--disabled": disabled,
+            "pisell-base-virtual-input--selected": selected && !!value
+          },
+          className
+        ),
+        style: mergedStyle,
+        onClick: handleClick
+      },
+      showPlaceholder && /* @__PURE__ */ import_react.default.createElement(
+        import_auto_resize_text.default,
+        {
+          className: (0, import_classnames.default)("pisell-base-virtual-input-placeholder", {
+            "pisell-base-virtual-input-placeholder--end": (props == null ? void 0 : props.textAlign) === "end",
+            "pisell-base-virtual-input-placeholder--center": (props == null ? void 0 : props.textAlign) === "center"
+          }),
+          mode: "oneline",
+          minFontSizePx: minFontSize,
+          maxFontSizePx: maxFontSize,
+          fontSizePrecisionPx: 0.5
+        },
+        placeholder
+      ),
+      !!value && /* @__PURE__ */ import_react.default.createElement(
+        import_auto_resize_text.default,
+        {
+          className: (0, import_classnames.default)("pisell-base-virtual-input-value", {
+            "pisell-base-virtual-input-value--selected": selected
+          }),
+          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" }, shouldShowCursor && /* @__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,115 @@
+.pisell-base-virtual-input {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+  position: relative;
+  height: var(--virtual-input-height);
+  user-select: none;
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+
+  &--end {
+    justify-content: flex-end;
+  }
+}
+
+.pisell-base-virtual-input-placeholder {
+  color: #98a2b3;
+  font-weight: 400;
+  user-select: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  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);
+
+  &--end {
+    text-align: right;
+  }
+
+  &--center {
+    text-align: center;
+  }
+}
+
+.pisell-base-virtual-input-value {
+  padding-left: 2px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+  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: var(--theme-color, #7f56d9);
+  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;
+  }
+}
+
+// 选中状态样式
+.pisell-base-virtual-input--selected {
+  .pisell-base-virtual-input-value--selected {
+    position: relative;
+    z-index: 0;
+    color: white;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: -2px;
+      right: -1px;
+      transform: translateY(-50%);
+      height: 1.2em;
+      background-color: var(--theme-color, #7f56d9);
+      pointer-events: none;
+      z-index: -1;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BaseVirtualInputProps, BaseVirtualInputRef } from './BaseVirtualInput';
+import './index.less';
+export type { BaseVirtualInputProps, BaseVirtualInputRef } from './BaseVirtualInput';
+export interface VirtualInputProps extends BaseVirtualInputProps {
+    /** 在VirtualInput上方显示的额外内容 */
+    topContent?: React.ReactNode;
+    /** 在VirtualInput下方显示的额外内容 */
+    bottomContent?: React.ReactNode;
+    /** wrapper class */
+    wrapperClassName?: string;
+    /** 虚拟输入框包装器的样式 */
+    wrapperStyle?: React.CSSProperties;
+    /** 是否允许清除输入框中的内容 */
+    allowClear?: boolean;
+    /** 清除输入框内容的回调函数 */
+    onClear?: () => void;
+    /** 自定义清除按钮的样式 */
+    clearButtonStyle?: React.CSSProperties;
+}
+export interface VirtualInputRef extends BaseVirtualInputRef {
+}
+declare const VirtualInput: React.ForwardRefExoticComponent<VirtualInputProps & React.RefAttributes<VirtualInputRef>>;
+export default VirtualInput;