Merge branch 'beta' into Release/4.5.17

apps/builder/package.json

@@ -5,7 +5,7 @@
  "private": true,
  "author": "ILLA Cloud <[email protected]>",
  "license": "Apache-2.0",
- "version": "4.5.16",
+ "version": "4.5.17",
  "scripts": {
  "dev": "vite --strictPort --force",
  "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288 vite build --mode cloud",

apps/builder/src/widgetLibrary/FormWidget/widgetConfig.tsx

@@ -103,4 +103,5 @@ export const FORM_CAN_BIND_WIDGET_TYPE = new Map([
  ["SWITCH_GROUP_WIDGET", true],
  ["RECORDING_WIDGET", true],
  ["EDITABLE_TEXT_WIDGET", true],
+ ["SIGNATURE_WIDGET", true],
 ])

apps/builder/src/widgetLibrary/SignatureWidget/constants.ts

@@ -0,0 +1 @@
+export const DPR = window.devicePixelRatio

apps/builder/src/widgetLibrary/SignatureWidget/eventHandlerConfig.ts

@@ -0,0 +1,14 @@
+import i18n from "@/i18n/config"
+import { EventHandlerConfig } from "@/widgetLibrary/interface"
+
+export const SIGNATURE_EVENT_HANDLER_CONFIG: EventHandlerConfig = {
+ events: [
+ {
+ label: i18n.t(
+ "editor.inspect.setter_content.widget_action_type_name.change",
+ ),
+ value: "change",
+ },
+ ],
+ methods: ["clearValue", "validate", "clearValidation", "setDisabled"],
+}

apps/builder/src/widgetLibrary/SignatureWidget/index.tsx

@@ -0,0 +1,3 @@
+export { SIGNATURE_WIDGET_CONFIG } from "./widgetConfig"
+export { SIGNATURE_PANEL_CONFIG } from "./panelConfig"
+export { SIGNATURE_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig"

apps/builder/src/widgetLibrary/SignatureWidget/interface.tsx

@@ -0,0 +1,32 @@
+import { PADDING_MODE } from "@illa-public/public-types"
+import { ValidateMessageOldProps } from "@/widgetLibrary/PublicSector/InvalidMessage/interface"
+import LabelProps from "@/widgetLibrary/PublicSector/Label/interface"
+import { TooltipWrapperProps } from "@/widgetLibrary/PublicSector/TooltipWrapper/interface"
+import { BaseWidgetProps } from "@/widgetLibrary/interface"
+
+export interface WrappedSignatureProps {
+ penColor?: string
+ guideColor?: string
+ text?: string
+ disabled?: boolean
+ value?: string
+ handleUpdateSignature: (value?: string, dataURI?: string) => void
+}
+
+export interface SignatureWidgetProps
+ extends WrappedSignatureProps,
+ BaseWidgetProps,
+ LabelProps,
+ TooltipWrapperProps,
+ Omit<ValidateMessageOldProps, "value"> {
+ validateMessage: string
+ padding?: {
+ size: string
+ mode: PADDING_MODE
+ }
+ backgroundColor?: string
+}
+
+export interface ICustomRef {
+ clear: () => void
+}

apps/builder/src/widgetLibrary/SignatureWidget/panelConfig.tsx

@@ -0,0 +1,269 @@
+import { HorizontalEndIcon, HorizontalStartIcon } from "@illa-design/react"
+import RadioIcon from "@/assets/radius-icon.svg?react"
+import i18n from "@/i18n/config"
+import { PanelConfig } from "@/page/App/components/InspectPanel/interface"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { generatorEventHandlerConfig } from "@/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig"
+import { SIGNATURE_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig"
+
+const baseWidgetName = "signature"
+export const SIGNATURE_PANEL_CONFIG: PanelConfig[] = [
+ {
+ id: `${baseWidgetName}-basic`,
+ groupName: i18n.t("editor.inspect.setter_group.basic"),
+ children: [
+ {
+ id: `${baseWidgetName}-basic-Text`,
+ labelName: i18n.t("editor.inspect.setter_label.text"),
+ attrName: "text",
+ setterType: "INPUT_SETTER",
+ expectedType: VALIDATION_TYPES.STRING,
+ },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-label`,
+ groupName: i18n.t("editor.inspect.setter_group.label"),
+ children: [
+ {
+ id: `${baseWidgetName}-label-label`,
+ labelName: i18n.t("editor.inspect.setter_label.label"),
+ attrName: "label",
+ setterType: "INPUT_SETTER",
+ expectedType: VALIDATION_TYPES.STRING,
+ },
+ {
+ id: `${baseWidgetName}-label-caption`,
+ labelName: i18n.t("editor.inspect.setter_label.caption"),
+ attrName: "labelCaption",
+ expectedType: VALIDATION_TYPES.STRING,
+ setterType: "INPUT_SETTER",
+ },
+ {
+ id: `${baseWidgetName}-label-hidden`,
+ labelName: i18n.t("editor.inspect.setter_label.hidden_label"),
+ attrName: "labelHidden",
+ setterType: "DYNAMIC_SWITCH_SETTER",
+ useCustomLayout: true,
+ },
+ {
+ id: `${baseWidgetName}-label-position`,
+ labelName: i18n.t("editor.inspect.setter_label.label_position"),
+ attrName: "labelPosition",
+ setterType: "RADIO_GROUP_SETTER",
+ bindAttrName: ["labelHidden"],
+ shown: (value) => !value,
+ options: [
+ { label: i18n.t("widget.public.left"), value: "left" },
+ { label: i18n.t("widget.public.top"), value: "top" },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-label-alignment`,
+ labelName: i18n.t("editor.inspect.setter_label.label_alignment"),
+ attrName: "labelAlign",
+ setterType: "RADIO_GROUP_SETTER",
+ bindAttrName: ["labelHidden"],
+ shown: (value) => !value,
+ options: [
+ {
+ label: <HorizontalStartIcon />,
+ value: "left",
+ },
+ {
+ label: <HorizontalEndIcon />,
+ value: "right",
+ },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-label-labelWidth`,
+ labelName: i18n.t("editor.inspect.setter_label.label_width"),
+ attrName: "labelWidth",
+ expectedType: VALIDATION_TYPES.NUMBER,
+ setterType: "INPUT_SETTER",
+ bindAttrName: ["labelHidden", "labelPosition"],
+ shown: (hidden, position) => !hidden && position !== "top",
+ },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-interaction`,
+ groupName: i18n.t("editor.inspect.setter_group.interaction"),
+ children: [
+ {
+ ...generatorEventHandlerConfig(
+ baseWidgetName,
+ SIGNATURE_EVENT_HANDLER_CONFIG.events,
+ ),
+ },
+ {
+ id: `${baseWidgetName}-interaction-disabled`,
+ labelName: i18n.t("editor.inspect.setter_label.disabled"),
+ labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"),
+ placeholder: "{{false}}",
+ attrName: "disabled",
+ setterType: "INPUT_SETTER",
+ expectedType: VALIDATION_TYPES.BOOLEAN,
+ bindAttrName: ["submit"],
+ shown: (value) => !value,
+ },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-adornments`,
+ groupName: i18n.t("editor.inspect.setter_group.adornments"),
+ children: [
+ {
+ id: `${baseWidgetName}-adornments-tooltip`,
+ labelName: i18n.t("editor.inspect.setter_label.tooltip"),
+ labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"),
+ attrName: "tooltipText",
+ expectedType: VALIDATION_TYPES.STRING,
+ setterType: "INPUT_SETTER",
+ },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-validation`,
+ groupName: i18n.t("editor.inspect.setter_group.validation"),
+ children: [
+ {
+ id: `${baseWidgetName}-validation-required`,
+ labelName: i18n.t("editor.inspect.setter_label.required_field"),
+ labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"),
+ setterType: "DYNAMIC_SWITCH_SETTER",
+ expectedType: VALIDATION_TYPES.BOOLEAN,
+ useCustomLayout: true,
+ openDynamic: true,
+ attrName: "required",
+ },
+ {
+ id: `${baseWidgetName}-validation-custom`,
+ labelName: i18n.t("editor.inspect.setter_label.custom_rule"),
+ labelDesc: i18n.t("editor.inspect.setter_tooltip.custom_rule"),
+ setterType: "INPUT_SETTER",
+ attrName: "customRule",
+ expectedType: VALIDATION_TYPES.STRING,
+ },
+ {
+ id: `${baseWidgetName}-validation-hide-message`,
+ labelName: i18n.t(
+ "editor.inspect.setter_label.hide_validation_message",
+ ),
+ labelDesc: i18n.t(
+ "editor.inspect.setter_tooltip.hide_validation_message",
+ ),
+ setterType: "DYNAMIC_SWITCH_SETTER",
+ expectedType: VALIDATION_TYPES.BOOLEAN,
+ useCustomLayout: true,
+ openDynamic: true,
+ attrName: "hideValidationMessage",
+ },
+ {
+ id: `${baseWidgetName}-validation-form-data-key`,
+ labelName: i18n.t("editor.inspect.setter_label.form_data_key"),
+ labelDesc: i18n.t("editor.inspect.setter_tooltip.form_data_key"),
+ setterType: "INPUT_SETTER",
+ expectedType: VALIDATION_TYPES.STRING,
+ attrName: "formDataKey",
+ },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-layout`,
+ groupName: i18n.t("editor.inspect.setter_group.layout"),
+ children: [
+ {
+ id: `${baseWidgetName}-layout-hidden`,
+ setterType: "DYNAMIC_SWITCH_SETTER",
+ openDynamic: true,
+ labelName: i18n.t("editor.inspect.setter_label.hidden"),
+ labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"),
+ useCustomLayout: true,
+ attrName: "hidden",
+ expectedType: VALIDATION_TYPES.BOOLEAN,
+ },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-style`,
+ groupName: i18n.t("editor.inspect.setter_group.style"),
+ children: [
+ {
+ id: `${baseWidgetName}-styles-border`,
+ setterType: "BORDER_SETTER",
+ useCustomLayout: true,
+ attrName: "border",
+ },
+ {
+ id: `${baseWidgetName}-styles-style`,
+ setterType: "STYLE_CONTAINER_SETTER",
+ labelName: i18n.t("editor.inspect.setter_label.style"),
+ attrName: "style",
+ useCustomLayout: true,
+ childrenSetter: [
+ {
+ id: `${baseWidgetName}-style-radius`,
+ labelName: i18n.t("editor.inspect.setter_label.radius"),
+ attrName: "radius",
+ setterType: "MEASURE_CHECK_INPUT_SETTER",
+ useCustomLayout: true,
+ icon: <RadioIcon />,
+ defaultValue: "4px",
+ },
+ {
+ id: `${baseWidgetName}-style-shadow`,
+ labelName: i18n.t("editor.inspect.setter_label.shadow.shadow"),
+ attrName: "shadow",
+ setterType: "SHADOW_SELECT_SETTER",
+ useCustomLayout: true,
+ defaultValue: "small",
+ },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-style-list`,
+ setterType: "STYLE_CONTAINER_SETTER",
+ labelName: i18n.t("editor.inspect.setter_label.colors"),
+ attrName: "styles",
+ useCustomLayout: true,
+ childrenSetter: [
+ {
+ id: `${baseWidgetName}-style-background`,
+ labelName: i18n.t("editor.inspect.setter_label.background"),
+ attrName: "backgroundColor",
+ setterType: "COLOR_PICKER_SETTER",
+ useCustomLayout: true,
+ defaultValue: "#ffffffff",
+ },
+ {
+ id: `${baseWidgetName}-style-penColor`,
+ labelName: i18n.t("editor.inspect.setter_label.signature.penColor"),
+ attrName: "penColor",
+ setterType: "COLOR_PICKER_SETTER",
+ useCustomLayout: true,
+ defaultValue: "grayBlue",
+ },
+ {
+ id: `${baseWidgetName}-style-contentColor`,
+ labelName: i18n.t(
+ "editor.inspect.setter_label.signature.contentColor",
+ ),
+ attrName: "guideColor",
+ setterType: "COLOR_PICKER_SETTER",
+ useCustomLayout: true,
+ defaultValue: "grayBlue",
+ },
+ ],
+ },
+ {
+ id: `${baseWidgetName}-styles-padding`,
+ setterType: "PADDING_INPUT_SETTER",
+ labelName: i18n.t("editor.inspect.setter_group.padding"),
+ attrName: "padding",
+ useCustomLayout: true,
+ },
+ ],
+ },
+]