@adyen/bento-vue2 0.8.0 → 0.8.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -837,6 +837,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "controlled",
+              "description": "Allows to handle the controls (apply/clear) from outside\nof the component",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "disableApplyButton",
               "description": "Disable the \"apply\" button",
@@ -873,6 +882,14 @@
                 "type": "string"
               }
             },
+            {
+              "name": "fitContent",
+              "description": "Sets the size of the container to fit its content",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPopover.props.fitContent"
+              }
+            },
             {
               "name": "value",
               "description": "Current value of the filter",
@@ -1621,6 +1638,52 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-date-filter",
+          "description": "The Date filter displays a calendar that allows\nto select a single date.",
+          "attributes": [
+            {
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateFilterOptions"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "value",
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateFilterValue"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/date-filter/date-filter.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-date-picker",
           "description": "Date picker selector.",
@@ -1657,7 +1720,7 @@
               "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "func"
+                "type": "BentoDatePickerIsDateDisabled"
               },
               "default": "undefined"
             },
@@ -1688,14 +1751,30 @@
               },
               "default": "false"
             },
+            {
+              "name": "numberOfMonths",
+              "description": "Number of months rendered on pane",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarPane.props.numberOfMonths"
+              }
+            },
             {
               "name": "value",
               "description": "Selected date",
               "value": {
                 "kind": "expression",
-                "type": "date"
+                "type": "BentoDatePickerValue"
               },
               "default": "null"
+            },
+            {
+              "name": "variant",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatePickerVariant"
+              },
+              "default": "BentoDatePickerVariant.SINGLE_CALENDAR"
             }
           ],
           "source": {
@@ -1703,6 +1782,104 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-date-picker-calendar-pane",
+          "description": "Handles the calendar logic to change visible months for Single calendar\nand Range calendar, as well as the selection logic for range.\nAll the processing necessary for the calendar to select dates",
+          "attributes": [
+            {
+              "name": "firstDayOfWeek",
+              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendar.props.firstDayOfWeek"
+              }
+            },
+            {
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendar.props.isDateDisabled"
+              }
+            },
+            {
+              "name": "isRange",
+              "description": "Enables the Date Range calendar",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendar.props.isRange"
+              }
+            },
+            {
+              "name": "numberOfMonths",
+              "description": "Number of months rendered on pane",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "3"
+            },
+            {
+              "name": "value",
+              "description": "Selected date. Can be a single Date or a DatePickerCalendarPaneRangeDate\ninstance that contains startDate and endDate attributes.",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarPaneValue"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar-pane/date-picker-calendar-pane.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-date-range-filter",
+          "description": "The Date filter displays a calendar that allows\nto select a single date.",
+          "attributes": [
+            {
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "options",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateRangeFilterOptions"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "value",
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateRangeFilterValue"
+              },
+              "default": "() => ({ startDate: undefined, endDate: undefined })"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/date-range-filter/date-range-filter.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-divider",
           "description": "",
@@ -2085,6 +2262,15 @@
                 "kind": "expression",
                 "type": "string"
               }
+            },
+            {
+              "name": "tooltipPosition",
+              "description": "Position the tooltip should take if space is available. Defaults to 'auto'",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainerPosition"
+              },
+              "default": "PopperContainerPosition.AUTO"
             }
           ],
           "source": {
@@ -2132,6 +2318,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "placeholder",
+              "description": "Text displayed as the placeholder of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
             {
               "name": "staticValue",
               "description": "Static text that displayed before or after input value\nApplicable to the Static Value variant",
@@ -2635,15 +2830,6 @@
                 "type": "BentoMenuItem[]"
               }
             },
-            {
-              "name": "tertiaryButton",
-              "description": "Displays the menu button in its ghost variant",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "menuPosition",
               "description": "The position of where the menu should open.",
@@ -2661,6 +2847,29 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "menuWidth",
+              "description": "Sets a custom width for the menu popover.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            },
+            {
+              "name": "button",
+              "description": "Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoMenuButtonProps"
+              },
+              "default": "() => ({\n    variant: BentoButtonVariant.SECONDARY,\n})"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
             }
           ],
           "source": {
@@ -3134,6 +3343,15 @@
                 "kind": "expression",
                 "type": "string"
               }
+            },
+            {
+              "name": "small",
+              "description": "Render payment method icon in a smaller size",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
@@ -3199,6 +3417,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "fitContent",
+              "description": "Sets the size of the container to fit its content",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "fixedPositioning",
               "description": "Instructs popover to be visible outside of the containing container.\nUseful when component would be used in limited containers like Modal, Side panel, etc.\nhttps://popper.js.org/docs/v2/constructors/#strategy",
@@ -3486,6 +3713,15 @@
               },
               "default": "300"
             },
+            {
+              "name": "placeholder",
+              "description": "Text displayed as the placeholder of the input-field",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "''"
+            },
             {
               "name": "value",
               "description": "Text displayed as the value being searched",
@@ -4480,6 +4716,15 @@
                 "kind": "expression",
                 "type": "string"
               }
+            },
+            {
+              "name": "tooltipPosition",
+              "description": "Position the tooltip should take if space is available. Defaults to 'top'",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainerPosition"
+              },
+              "default": "PopperContainerPosition.TOP"
             }
           ],
           "slots": [
@@ -4533,8 +4778,17 @@
               "default": "true"
             },
             {
-              "name": "hasContextualMenuEnabled",
-              "description": "Toggles if the contextual menu is enabled",
+              "name": "hasColumnPanel",
+              "description": "Signifies if the column panel is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "hasFirstColumnPanelRightAligned",
+              "description": "If set to true, aligns the first column panel to the right of its button.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -4592,66 +4846,20 @@
           "description": "Date picker calendar that displays all the days of a given month\nand allows to move back and forth the visible month with the Next\nand Previous buttons",
           "attributes": [
             {
-              "name": "firstDayOfWeek",
-              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
-              "value": {
-                "kind": "expression",
-                "type": "DatePickerCalendarFirstDayOfWeek"
-              },
-              "default": "DatePickerCalendarFirstDayOfWeek.MONDAY"
-            },
-            {
-              "name": "isDateDisabled",
-              "description": "Indicate if a date should be disabled or not",
-              "value": {
-                "kind": "expression",
-                "type": "func"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "month",
-              "required": true,
-              "description": "Month of the year to be displayed in the calendar",
-              "value": {
-                "kind": "expression",
-                "type": "date"
-              }
-            },
-            {
-              "name": "value",
-              "description": "Selected date",
+              "name": "endDate",
+              "description": "end of the selected range",
               "value": {
                 "kind": "expression",
                 "type": "date"
               },
-              "default": "undefined"
-            }
-          ],
-          "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar/date-picker-calendar.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "date-picker-calendar-container",
-          "description": "Handles the popover logic and displays the month, date, and range containers\naccording to the type of Date picker variation.",
-          "attributes": [
-            {
-              "name": "disabled",
-              "description": "Disables dropdown functionality",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+              "default": "null"
             },
             {
               "name": "firstDayOfWeek",
               "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "DatePickerCalendarFirstDayOfWeek"
               },
               "default": "DatePickerCalendarFirstDayOfWeek.MONDAY"
             },
@@ -4660,18 +4868,18 @@
               "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "func"
+                "type": "DatePickerCalendarIsDateDisabled"
               },
               "default": "undefined"
             },
             {
-              "name": "label",
-              "description": "Text that is displayed as a label above the element.",
+              "name": "isRange",
+              "description": "Indicates if the calendar is part of a range date picker or a sigle date picker",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "undefined"
+              "default": "false"
             },
             {
               "name": "month",
@@ -4683,69 +4891,73 @@
               }
             },
             {
-              "name": "open",
-              "required": true,
-              "description": "Indicates if the dropdown is open so that\nthe container can be displayed.",
+              "name": "position",
+              "description": "When rendering multiple calendars, this property allows to render the\nNext and Previous calendar buttons to the right, left or not at all\ndepending on the position: Unique (only 1), First, Middle or Last",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              }
+                "type": "DatePickerCalendarPosition"
+              },
+              "default": "DatePickerCalendarPosition.UNIQUE"
             },
             {
-              "name": "value",
-              "description": "Selected date",
+              "name": "startDate",
+              "description": "start of the selected range",
               "value": {
                 "kind": "expression",
                 "type": "date"
               },
-              "default": "undefined"
-            },
+              "default": "null"
+            }
+          ],
+          "events": [
             {
-              "name": "targetElement",
-              "required": true,
-              "description": "Reference to the DOM element or Vue component for positioning\nthe Dropdown container.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoPopover.props.targetElement.type"
-              }
+              "name": "<undefined>"
             }
           ],
           "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar-container/date-picker-calendar-container.vue",
+            "module": "./src/components/date-picker/components/date-picker-calendar/date-picker-calendar.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "date-picker-calendar-container-stub",
-          "description": "",
+          "name": "date-picker-calendar-day",
+          "description": "Handles the styles and states of the individual dates of the calendar.",
           "attributes": [
             {
-              "name": "month",
+              "name": "day",
+              "required": true,
+              "description": "Date to be displayed as the calendar day. From 1st to 31st (or end of the month defined in the date)",
               "value": {
                 "kind": "expression",
-                "type": "DatePickerCalendarContainer.props.month"
+                "type": "date"
               }
             },
             {
-              "name": "open",
+              "name": "disabled",
+              "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "DatePickerCalendarContainer.props.open"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "disabled",
+              "name": "selected",
+              "description": "Changes the state of the calendar day to selected.",
               "value": {
                 "kind": "expression",
-                "type": "DatePickerCalendarContainer.props.disabled"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "value",
+              "name": "variant",
+              "description": "When the day is selected, this indicates if the selection is a single date or part of a range.\nIf it's a range it can be at the beginning, middle or end of the selection.",
               "value": {
                 "kind": "expression",
-                "type": "DatePickerCalendarContainer.props.value"
-              }
+                "type": "DatePickerCalendarDayVariant"
+              },
+              "default": "DatePickerCalendarDayVariant.SINGLE"
             }
           ],
           "events": [
@@ -4754,57 +4966,76 @@
             }
           ],
           "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar-container/__test__/date-picker-calendar-container-stub.vue",
+            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/date-picker-calendar-day.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "date-picker-calendar-day",
-          "description": "Handles the styles and states of the individual dates of the calendar.",
+          "name": "date-picker-calendar-day-stub",
+          "description": "",
+          "events": [
+            {
+              "name": "<undefined>"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/__test__/date-picker-calendar-day-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "date-picker-calendar-range",
+          "description": "Calendar for range dates. Contains the logic to handle the range forms.",
           "attributes": [
             {
-              "name": "day",
-              "required": true,
-              "description": "Date to be displayed as the calendar day. From 1st to 31st (or end of the month defined in the date)",
+              "name": "firstDayOfWeek",
+              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
               "value": {
                 "kind": "expression",
-                "type": "date"
+                "type": "DatePickerCalendarPane.props.firstDayOfWeek"
               }
             },
             {
-              "name": "selected",
-              "description": "Changes the state of the calendar day to selected.",
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "DatePickerCalendarPane.props.isDateDisabled"
+              }
             },
             {
-              "name": "disabled",
-              "description": "Indicate if a date should be disabled or not",
+              "name": "numberOfMonths",
+              "description": "Number of months rendered on pane",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "DatePickerCalendarPane.props.numberOfMonths"
+              }
+            },
+            {
+              "name": "value",
+              "description": "Selected date",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarPaneValue"
               },
-              "default": "false"
+              "default": "undefined"
             }
           ],
-          "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/date-picker-calendar-day.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "date-picker-calendar-day-stub",
-          "description": "",
           "events": [
             {
-              "name": "<undefined>"
+              "name": "input"
+            }
+          ],
+          "slots": [
+            {
+              "name": "title"
+            },
+            {
+              "name": "actions"
             }
           ],
           "source": {
-            "module": "./src/components/date-picker/components/date-picker-calendar/components/date-picker-calendar-day/__test__/date-picker-calendar-day-stub.vue",
+            "module": "./src/components/date-picker/components/date-picker-calendar-range/date-picker-calendar-range.vue",
             "symbol": "default"
           }
         },
@@ -5671,6 +5902,13 @@
                 "type": "BentoPopover.props.fixedPositioning"
               }
             },
+            {
+              "name": "fitContent",
+              "value": {
+                "kind": "expression",
+                "type": "BentoPopover.props.fitContent"
+              }
+            },
             {
               "name": "large",
               "value": {