@pisell/materials 6.3.16 → 6.3.18

package/lib/components/productCard/index.js

@@ -51,6 +51,7 @@ var import_status = require("./status");
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
 var import_Warning = __toESM(require("./components/Warning"));
 var import_index = require("./index.less");
+var import_cartSkuCard = __toESM(require("./cartSkuCard"));
 var ProductCard = (props) => {
   var _a, _b;
   const context = (0, import_useEngineContext.default)();
@@ -61,8 +62,10 @@ var ProductCard = (props) => {
     isShowHolder = import_status.defaultValue.isShowHolder,
     isShowNote = import_status.defaultValue.isShowNote,
     isShowDelete = import_status.defaultValue.isShowDelete,
+    isShowAmountFooter = import_status.defaultValue.isShowAmountFooter,
     isShowPackageNote = import_status.defaultValue.isShowPackageNote,
     isShowEditProduct = import_status.defaultValue.isShowEditProduct,
+    scenario,
     onEditProduct,
     onAction,
     onDelete,
@@ -106,8 +109,9 @@ var ProductCard = (props) => {
       import_cardPro.default,
       {
         className: (0, import_classnames.default)("pisell-lowcode-product-card", {
-          ["pisell-lowcode-product-card-image"]: !showImage,
-          ["pisell-lowcode-normal-product-card"]: !showImage && isNormalProduct
+          ["pisell-lowcode-product-card-image"]: !showImage && scenario !== "booking2",
+          ["pisell-lowcode-normal-product-card"]: !showImage && isNormalProduct && scenario !== "booking2",
+          ["pisell-lowcode-product-card-image-booking2"]: scenario === "booking2"
         }),
         key: _id
       },
@@ -197,4 +201,5 @@ var ProductCard = (props) => {
     )
   );
 };
+ProductCard.V2 = import_cartSkuCard.default;
 var productCard_default = ProductCard;

package/lib/components/productCard/index.less

@@ -47,6 +47,12 @@
   }
 }
 
+.pisell-lowcode-product-card-image-booking2 {
+  .pisell-cardPro-content {
+    padding: 4px;
+  }
+}
+
 .pisell-lowcode-product-card-wrap {
   position: relative;
 }

package/lib/components/productCard/locales.js

@@ -42,7 +42,10 @@ var locales_default = {
     "pisell2.product.card.add.holder.placeholder": (val) => `Please select ${val || ""}`,
     "pisell2.product.card.add.holder.placeholder.multiple": (num, val) => `Please Select ${num} ${val || ""}`,
     "pisell2.product.card.add.holder.modal.title.1": `Please Select`,
-    "pisell2.product.card.hour.minute": (hour, minute) => `${hour > 0 ? `${hour}h` : ""}${hour > 0 && minute > 0 ? " " : ""}${minute > 0 ? `${minute}min` : ""}`,
+    "pisell2.product.card.hour.minute": (hour, minute) => {
+      if (hour <= 0 && minute <= 0) return `${0}min`;
+      return `${hour > 0 ? `${hour}h` : ""}${hour > 0 && minute > 0 ? " " : ""}${minute > 0 ? `${minute}min` : ""}`;
+    },
     "pisell2.product.card.sales": "Sales",
     "pisell2.product.card.add.holder.modal.cancel": "Cancel",
     "pisell2.product.card.add.holder.modal.clear": "Clear",
@@ -69,7 +72,10 @@ var locales_default = {
     "pisell2.product.card.add.holder.placeholder": (val) => `请选择${val || ""}`,
     "pisell2.product.card.add.holder.placeholder.multiple": (num, val) => `请选择${num}${val || ""}`,
     "pisell2.product.card.add.holder.modal.title.1": `请选择`,
-    "pisell2.product.card.hour.minute": (hour, minute) => `${hour > 0 ? `${hour}小时` : ""}${minute > 0 ? `${minute}分钟` : ""}`,
+    "pisell2.product.card.hour.minute": (hour, minute) => {
+      if (hour <= 0 && minute <= 0) return `${0}分钟`;
+      return `${hour > 0 ? `${hour}小时` : ""}${minute > 0 ? `${minute}分钟` : ""}`;
+    },
     "pisell2.product.card.sales": "销售",
     "pisell2.product.card.add.holder.modal.cancel": "取消",
     "pisell2.product.card.add.holder.modal.clear": "清除",
@@ -96,7 +102,10 @@ var locales_default = {
     "pisell2.product.card.add.holder.placeholder": (val) => `請選擇${val || ""}`,
     "pisell2.product.card.add.holder.placeholder.multiple": (num, val) => `請選擇${num}${val || ""}`,
     "pisell2.product.card.add.holder.modal.title.1": `請選擇`,
-    "pisell2.product.card.hour.minute": (hour, minute) => `${hour > 0 ? `${hour}小時` : ""}${minute > 0 ? `${minute}分鐘` : ""}`,
+    "pisell2.product.card.hour.minute": (hour, minute) => {
+      if (hour <= 0 && minute <= 0) return `${0}分鐘`;
+      return `${hour > 0 ? `${hour}小時` : ""}${minute > 0 ? `${minute}分鐘` : ""}`;
+    },
     "pisell2.product.card.sales": "銷售",
     "pisell2.product.card.add.holder.modal.cancel": "取消",
     "pisell2.product.card.add.holder.modal.clear": "清除",

package/lib/components/productCard/status.js

@@ -58,6 +58,7 @@ var defaultValue = {
   isShowHolder: true,
   isShowNote: true,
   isShowDelete: true,
+  isShowAmountFooter: true,
   isShowPackageNote: true,
   isShowEditProduct: false,
   locale: "en-US",

package/lib/components/productCard/types.d.ts

@@ -67,6 +67,7 @@ export declare type ProductCardTypes = {
     isShowNote?: boolean;
     isShowPackageNote?: boolean;
     isShowDelete?: boolean;
+    isShowAmountFooter?: boolean;
     disabledEdit?: boolean;
     locale?: string;
     symbol?: string;

package/lib/components/productCard/utils.js

@@ -95,6 +95,13 @@ var getServiceTime = (item, currentDate) => {
       } else {
         dateTime = `${startDate.format(dateFormat)} ${startTime} ~ ${endDate.format(dateFormat)} ${endTime}`;
       }
+      if (durationType === "days") {
+        dateTime = formatMultiDayDate({
+          start_date: startDate.format("YYYY-MM-DD"),
+          end_date: endDate.format("YYYY-MM-DD"),
+          locale
+        });
+      }
     }
     const startDateTime = `${startDate.format("YYYY-MM-DD")} ${startTime}`;
     const endDateTime = `${endDate.format("YYYY-MM-DD")} ${endTime}`;
@@ -105,7 +112,7 @@ var getServiceTime = (item, currentDate) => {
       const minutes = _duration % 60;
       durationText = import_utils.locales.getText("pisell2.product.card.hour.minute")(hours, minutes);
     } else if (durationType === "days") {
-      durationText = import_utils.locales.getText("pisell2.product.card.day")(_duration);
+      durationText = `${_duration}${import_utils.locales.getText("pisell2.product.card.day")(_duration)}`;
     } else {
       durationText = `${_duration}`;
     }

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const QRCode: (props: any) => JSX.Element;
 export default QRCode;

package/lib/components/select-time/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VirtualKeyboardTimeProps } from "../virtual-keyboard/Time";
 import { PopoverProps, TimePickerProps } from "antd";
 import "./index.less";

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { Props } from "../DragSortList";
+export interface SortableListProps<T> {
+    dataSource: Props<T>["list"];
+    onChange: Props<T>["onChange"];
+    rowKey: Props<T>["rowKey"];
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    activationConstraint?: Props<T>["activationConstraint"];
+}
+declare const SortableList: React.FC<SortableListProps<any>>;
+export default SortableList;

package/lib/components/table/Actions/component/ExportImport/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ExportImportType } from '../../../types';
 import './index.less';
 declare type ExportImportProps = {

package/lib/components/table/BasicTable/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TableProps } from 'antd';
 declare const BasicTable: (props: TableProps<any>) => JSX.Element;
 export default BasicTable;

package/lib/components/table/Gallery/components/GalleryItem/components/RenderFields/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./index.less";
 declare type RenderFieldsProps = {
     fields: string[];

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

@@ -1,3 +1,4 @@
 import React from "react";
+import "./index.less";
 declare const AddFieldModal: React.FC;
 export default AddFieldModal;

package/lib/components/table/Table/AddFieldModal/index.js

@@ -36,7 +36,7 @@ var import_iconfont = __toESM(require("../../../iconfont"));
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_SelectField = __toESM(require("../SelectField"));
-var import_index = __toESM(require("./index.less"));
+var import_index = require("./index.less");
 var import_hooks = require("../../../../hooks");
 var import_model = require("../../model");
 var AddFieldModal = () => {
@@ -85,7 +85,7 @@ var AddFieldModal = () => {
         },
         onFinish: addField
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["add-field-modal"] }, /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-add-field-modal" }, /* @__PURE__ */ import_react.default.createElement(
         import_antd.Form.Item,
         {
           label: "Field Name",
@@ -101,13 +101,13 @@ var AddFieldModal = () => {
           import_antd.Input,
           {
             placeholder: "Field name (optional)",
-            className: import_index.default["header-search"]
+            className: "pisell-lowcode-header-search"
           }
         )
-      ), /* @__PURE__ */ import_react.default.createElement(import_SelectField.default, null), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["modal-footer"] }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["add-describe"] }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pi-Plus", className: import_index.default["icon"] }), /* @__PURE__ */ import_react.default.createElement("span", { className: import_index.default["label"] }, "Add description")), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["btns"] }, /* @__PURE__ */ import_react.default.createElement(
+      ), /* @__PURE__ */ import_react.default.createElement(import_SelectField.default, null), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-add-describe" }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pi-Plus", className: "pisell-lowcode-icon" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode-label" }, "Add description")), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-btns" }, /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: import_index.default["cancel"],
+          className: "pisell-lowcode-cancel",
           onClick: () => {
             onCloseModal();
           }
@@ -116,7 +116,7 @@ var AddFieldModal = () => {
       ), /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: import_index.default["submit"],
+          className: "pisell-lowcode-submit",
           onClick: () => {
             form.submit();
           }
@@ -136,7 +136,7 @@ var AddFieldModal = () => {
       placement: "bottomRight",
       overlayInnerStyle: { padding: 0 },
       trigger: "click",
-      overlayClassName: import_index.default["popover-wrap"],
+      overlayClassName: "pisell-lowcode-popover-wrap",
       onOpenChange: (e) => {
         if (!e) {
           onCloseModal();
@@ -146,11 +146,11 @@ var AddFieldModal = () => {
       },
       open: openModal
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["add-field-btn"] }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-add-field-btn" }, /* @__PURE__ */ import_react.default.createElement(
       import_iconfont.default,
       {
         type: "pi-a-Property3Add",
-        className: import_index.default["add-field-icon"]
+        className: "pisell-lowcode-add-field-icon"
       }
     ))
   );

package/lib/components/table/Table/AddFieldModal/index.less

@@ -1,4 +1,4 @@
-.add-field-btn {
+.pisell-lowcode-add-field-btn {
   position: absolute;
   right: 0;
   top: 0;
@@ -11,10 +11,10 @@
   box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
   cursor: pointer;
 
-  .add-field-icon {}
+  .pisell-lowcode-add-field-icon {}
 }
 
-.popover-wrap {
+.pisell-lowcode-popover-wrap {
   :global {
     .pisell-lowcode-popover-arrow {
       display: none;
@@ -22,11 +22,11 @@
   }
 }
 
-.add-field-modal {
+.pisell-lowcode-add-field-modal {
   width: 360px;
   padding: 16px 16px 0 16px;
 
-  .modal-footer {
+  .pisell-lowcode-modal-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -35,13 +35,13 @@
     padding: 0 16px;
     border-top: 1px solid #F1F1F1;
 
-    .add-describe {
+    .pisell-lowcode-add-describe {
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
 
-      .icon {
+      .pisell-lowcode-icon {
         width: 24px;
         height: 24px;
         display: flex;
@@ -51,27 +51,27 @@
         color: #1B1B1B;
       }
 
-      .label {
+      .pisell-lowcode-label {
         margin-left: 2px;
         font-size: 14px;
         color: #777777;
       }
     }
 
-    .btns {
+    .pisell-lowcode-btns {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 16px;
 
-      .cancel {
+      .pisell-lowcode-cancel {
         cursor: pointer;
         font-weight: 400;
         font-size: 14px;
         color: #1B1B1B;
       }
 
-      .submit {
+      .pisell-lowcode-submit {
         cursor: pointer;
         font-weight: 400;
         font-size: 14px;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 declare const Show: (props: FieldPropsType) => JSX.Element;
 export default Show;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 declare const Show: (props: FieldPropsType) => JSX.Element;
 export default Show;

package/lib/components/table/Table/tableConfig/SortRow/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./index.less";
 declare const SortRow: ({ children, rowKey, onSortChange }: any) => JSX.Element;
 export default SortRow;

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" | "filter_setting" | "view_mode" | "group_by" | "column_setting" | "order_by" | "gallery_setting")[];
+}) => ("filters" | "filter_setting" | "group_by" | "column_setting" | "order_by" | "view_mode" | "gallery_setting")[];
 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/table/hooks/useTransColumns.d.ts

@@ -0,0 +1,14 @@
+import { FormInstance } from "antd/es/form";
+declare type UseTransColumnsProps = {
+    columns: Record<string, any>[];
+    form: FormInstance;
+    localPagination: boolean;
+    handleSave?: (row: Record<string, any>) => void;
+    handleResize?: (index: number, record: Record<string, any>) => (e: any, p2: any) => void;
+    dragSort: boolean;
+    bordered: boolean;
+};
+declare const useTransColumns: (params: UseTransColumnsProps) => {
+    columns: any[];
+};
+export default useTransColumns;

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

@@ -1,7 +1,11 @@
-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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PresetsProps } from './Presets';
+import { KeyboardProps } from '../Keyboard';
 import { RightItemsStyleProps } from '../Amount';
 import './index.less';
 export interface BaseNumberKeyboardProps {
@@ -16,6 +17,9 @@ export interface BaseNumberKeyboardProps {
     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/Number/index.js

@@ -50,6 +50,7 @@ var Number = (props) => {
     placeholder,
     onEnter,
     selectType = "light",
+    defaultSelect,
     ...others
   } = props;
   const config = (0, import_usePisellConfig.default)();
@@ -98,11 +99,13 @@ var Number = (props) => {
         max,
         min,
         value,
+        defaultValue,
         onChange: setValue,
         placeholder,
         doneText,
         resetText,
         onEnter,
+        defaultSelect,
         rightItemsStyle: {
           buttonBackgroundColor: configColor.buttonBackgroundColor,
           textColor: configColor.textColor,

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

@@ -8,6 +8,7 @@ export interface NumberProps {
     value?: string | number;
     onChange?: (val: string | number) => void;
     onEnter?: (val: string | number) => void;
+    defaultSelect?: boolean;
     selectType?: 'light' | 'dark';
     backgroundColor?: string;
     containerBackgroundColor?: string;

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

@@ -9,6 +9,17 @@ interface VirtualKeyboardProps extends React.HTMLAttributes<HTMLDivElement> {
     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;