@adyen/bento-vue2 0.5.0 → 0.6.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1290,7 +1290,7 @@
             },
             {
               "name": "columnPanel",
-              "description": "Enables / hides the column settings panel.",
+              "description": "Enables / hides the view settings panel and the column contextual menu functionality.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1528,6 +1528,88 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-date-picker",
+          "description": "Date picker selector.",
+          "attributes": [
+            {
+              "name": "description",
+              "description": "Descriptive supporting text visbile underneath the dropdown.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "disabled",
+              "description": "Disables dropdown functionality.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "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": "BentoDatePickerFirstDayOfWeek"
+              },
+              "default": "BentoDatePickerFirstDayOfWeek.MONDAY"
+            },
+            {
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "func"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "label",
+              "description": "Text that is displayed as a label above the element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "optional",
+              "description": "Highlights the dropdown is optional.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "required",
+              "description": "Highlights the dropdown is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "value",
+              "description": "Selected date",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              },
+              "default": "null"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/date-picker.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-dropdown-avatar",
           "description": "A Avatar Dropdown showing a selectable list of countries.",
@@ -2454,6 +2536,19 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-menu-list-container",
+          "description": "Menu list container component to set the correct styling in a menu list. For internal use only.",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/menu/components/menu-list-container/menu-list-container.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-pagination",
           "description": "Paginiation component to help users page through data sets.\n\nThere are two ways of doing navigation in this component:\n     1. (Basic) You tell the component if there is a next page (hasNext)\n     2. (Enhanced) You tell the component:\n         - How many total items exist (totalCount)\n         - The max number of items that you show/fetch per page (size)\n         - In this case you should not set the hasNext props\n\nIf you have the data available and opt to use the Enhanced way you get extra controls:\n     - Page dropdown selector\n     - Last page button\n     - \"Showing 10 of 200 items\" text",
@@ -3018,10 +3113,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item {@see BentoCountryVariant}.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCurrencyFilterOptions"
+                "type": "BentoSelectCountryFilterOptions"
               },
               "default": "undefined"
             }
@@ -3032,7 +3127,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
             "symbol": "default"
           }
         },
@@ -3042,10 +3137,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item {@see BentoCountryVariant}.",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCountryFilterOptions"
+                "type": "BentoSelectCurrencyFilterOptions"
               },
               "default": "undefined"
             }
@@ -3056,7 +3151,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
             "symbol": "default"
           }
         },
@@ -3207,7 +3302,7 @@
                 "kind": "expression",
                 "type": "BentoTagVariant"
               },
-              "default": "BentoTagVariant.DEFAULT"
+              "default": "BentoTagVariant.GREY"
             },
             {
               "name": "truncate",
@@ -3527,6 +3622,15 @@
               },
               "default": "true"
             },
+            {
+              "name": "hasContextualMenuEnabled",
+              "description": "Toggles if the contextual menu is enabled",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "isFrozenColumns",
               "description": "If these columns are frozen (pinned) columns",
@@ -3573,6 +3677,227 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "date-picker-calendar",
+          "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",
+              "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"
+            },
+            {
+              "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"
+              },
+              "default": "DatePickerCalendarFirstDayOfWeek.MONDAY"
+            },
+            {
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "func"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "label",
+              "description": "Text that is displayed as a label above the element.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "month",
+              "required": true,
+              "description": "Month of the year to be displayed in the calendar",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              }
+            },
+            {
+              "name": "open",
+              "required": true,
+              "description": "Indicates if the dropdown is open so that\nthe container can be displayed.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "value",
+              "description": "Selected date",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              },
+              "default": "undefined"
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar-container/date-picker-calendar-container.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "date-picker-calendar-container-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "month",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarContainer.props.month"
+              }
+            },
+            {
+              "name": "open",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarContainer.props.open"
+              }
+            },
+            {
+              "name": "disabled",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarContainer.props.disabled"
+              }
+            },
+            {
+              "name": "value",
+              "value": {
+                "kind": "expression",
+                "type": "DatePickerCalendarContainer.props.value"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "<undefined>"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date-picker/components/date-picker-calendar-container/__test__/date-picker-calendar-container-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "date-picker-calendar-day",
+          "description": "Handles the styles and states of the individual dates of the calendar.",
+          "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)",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              }
+            },
+            {
+              "name": "selected",
+              "description": "Changes the state of the calendar day to selected.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "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>"
+            }
+          ],
+          "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": "dropdown-base-textbox",
           "description": "Only for internal use, implements the logic of the textbox element to be implemented in the combobox.",
@@ -4275,6 +4600,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "isTitle",
+              "description": "Renders the text in a bold variant",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
@@ -4728,6 +5062,32 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "sub-menu-item-list",
+          "description": "SubMenuItemList component to render a submenu with the sliding transition. For internal use only.",
+          "attributes": [
+            {
+              "name": "items",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "BentoMenuItem[]"
+              }
+            },
+            {
+              "name": "title",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/menu/components/sub-menu-item-list/sub-menu-item-list.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "tab",
           "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -50,10 +50,10 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "0.4.2",
-        "@adyen/ui-assets-flag-icons": "1.1.0",
-        "@adyen/ui-assets-icons-16": "3.0.0",
-        "@adyen/ui-assets-payment-method-icons": "5.1.0",
+        "@adyen/bento-design-tokens": "0.4.3",
+        "@adyen/ui-assets-flag-icons": "1.2.0",
+        "@adyen/ui-assets-icons-16": "3.1.0",
+        "@adyen/ui-assets-payment-method-icons": "5.2.0",
         "@popperjs/core": "2.11.8",
         "date-fns": "2.28.0",
         "focus-lock": "0.11.0",