Merge pull request smeup#2148 from apuliasoft/feat/add-error-props

feat: added error props in kup-date kup-time and chip inside fcell
apuliasoft · Oct 28, 2024 · f039575 · f039575
2 parents 660353d + a7fda79
commit f039575
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 3 deletions.
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -1798,6 +1798,11 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Set error message
+          * @default '''
+         */
+        "error": string;
         /**
           * First day number (0 - sunday, 1 - monday, ...) TODO: manage with kupDates.locale, remove prop
           * @default 1
@@ -4178,6 +4183,11 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Set error message
+          * @default '''
+         */
+        "error": string;
         /**
           * Used to retrieve component's props values.
           * @param descriptions - When provided and true, the result will be the list of props with their description.
@@ -7379,6 +7389,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Set error message
+          * @default '''
+         */
+        "error"?: string;
         /**
           * First day number (0 - sunday, 1 - monday, ...) TODO: manage with kupDates.locale, remove prop
           * @default 1
@@ -9363,6 +9378,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Set error message
+          * @default '''
+         */
+        "error"?: string;
         /**
           * Sets the initial value of the component.
           * @default ""

diff --git a/packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx b/packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx
@@ -109,6 +109,11 @@ export class KupDatePicker {
      * @default true
      */
     @Prop() showPreviousNextMonthDays: boolean = true;
+    /**
+     * Set error message
+     * @default '''
+     */
+    @Prop() error: string = '';
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -530,6 +535,7 @@ export class KupDatePicker {
             sizing: this.sizing,
             outlined: this.outlined,
             showIcon: this.showIcon,
+            error: this.error,
         };
         if (!textfieldData.icon && this.showIcon) {
             textfieldData.icon = 'calendar';

diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
@@ -741,7 +741,7 @@ export class KupInputPanel {
                           const mappedCell = cell
                               ? {
                                     ...cell,
-                                    data: this.#setProps(cell, column),
+                                    data: this.#setData(cell, column),
                                     slotData: this.#slotData(cell, column),
                                     isEditable: true,
                                 }
@@ -773,7 +773,7 @@ export class KupInputPanel {
         this.inputPanelCells = inpuPanelCells;
     }
 
-    #setProps(cell: KupInputPanelCell, column: KupInputPanelColumn) {
+    #setData(cell: KupInputPanelCell, column: KupInputPanelColumn) {
         const defaultProps = {
             ...this.#mapData(cell, column),
             disabled: !cell.editable,

diff --git a/packages/ketchup/src/components/kup-time-picker/kup-time-picker.tsx b/packages/ketchup/src/components/kup-time-picker/kup-time-picker.tsx
@@ -97,6 +97,11 @@ export class KupTimePicker {
      * @default 10
      */
     @Prop() timeMinutesStep: number = 10;
+    /**
+     * Set error message
+     * @default '''
+     */
+    @Prop() error: string = '';
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -513,6 +518,7 @@ export class KupTimePicker {
             this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
         const textfieldData: FTextFieldProps = {
+            error: this.error,
             ...this.data['kup-text-field'],
         };
         if (!textfieldData.icon) {

diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
@@ -93,7 +93,13 @@ export const FCell: FunctionalComponent<FCellProps> = (
     isEditable = isEditable && props.editable;
 
     if (cell.options) {
-        cell.data = mapData(cell) ?? cell.data;
+        const cellData = mapData(cell);
+        cell.data = cellData
+            ? {
+                  ...cellData,
+                  ...cell.data,
+              }
+            : cell.data;
     }
 
     const valueToDisplay = props.previousValue !== cell.value ? cell.value : '';
@@ -610,6 +616,7 @@ function setEditableCell(
                         fullWidth={true}
                         slot="field"
                         {...cell.slotData}
+                        error={cell.data.error}
                     ></kup-text-field>
                 </kup-chip>
             );
@@ -690,6 +697,7 @@ function setEditableCell(
                         }
                         showDropDownIcon={false}
                         {...cell.slotData}
+                        error={cell.data.error}
                     ></kup-autocomplete>
                 </kup-chip>
             );
@@ -723,6 +731,7 @@ function setEditableCell(
                             )
                         }
                         {...cell.slotData}
+                        error={cell.data.error}
                     ></kup-combobox>
                 </kup-chip>
             );