From ba8a7c94200c88bb35041b87fba17319cd107f2d Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak Date: Mon, 16 Sep 2024 14:19:24 +0200 Subject: [PATCH 1/3] chore: add placeholder to dropdown --- packages/components/src/components.d.ts | 10 ++++++++++ .../components/src/components/dropdown/dropdown.tsx | 10 +++++++++- packages/components/src/components/dropdown/readme.md | 1 + 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index a196c8a1..d4b26a2c 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -230,6 +230,11 @@ export namespace Components { * @type {boolean} */ "open": boolean; + /** + * If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'. + * @type {string} + */ + "placeholder": string; /** * Gets the selected items. * @type {Array} @@ -1616,6 +1621,11 @@ declare namespace LocalJSX { * @type {boolean} */ "open"?: boolean; + /** + * If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'. + * @type {string} + */ + "placeholder"?: string; /** * Gets the selected items. * @type {Array} diff --git a/packages/components/src/components/dropdown/dropdown.tsx b/packages/components/src/components/dropdown/dropdown.tsx index 1fe6037b..14c413ee 100644 --- a/packages/components/src/components/dropdown/dropdown.tsx +++ b/packages/components/src/components/dropdown/dropdown.tsx @@ -99,6 +99,14 @@ export class Dropdown { */ @Prop() filterable = false; + + /** + * If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'. + * + * @type {string} + */ + @Prop() placeholder: string; + /** * This attribute indicates that multiple items can be selected in the list. If it is not specified, then only one item can be selected at a time. * @@ -591,7 +599,7 @@ export class Dropdown { return (
this.filterElement = el} onInput={(): void => { this.filter(); }} tabIndex={this.open ? 0 : -1} /> diff --git a/packages/components/src/components/dropdown/readme.md b/packages/components/src/components/dropdown/readme.md index e55ace7e..c09a7437 100644 --- a/packages/components/src/components/dropdown/readme.md +++ b/packages/components/src/components/dropdown/readme.md @@ -150,6 +150,7 @@ mi-dropdown::part(button) { | `multiple` | `multiple` | This attribute indicates that multiple items can be selected in the list. If it is not specified, then only one item can be selected at a time. | `boolean` | `false` | | `noResultsMessage` | `no-results-message` | Guiding message when presented with a content window that has no rows. Default language is English. | `string` | `'No results found'` | | `open` | `open` | Gets or sets the state of the dropdown. If the attribute is set to true then the dropdown will be expanded. | `boolean` | `false` | +| `placeholder` | `placeholder` | If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'. | `string` | `undefined` | | `selected` | -- | Gets the selected items. | `HTMLMiDropdownItemElement[]` | `[]` | From 162730d5995643ccc1f63e7642d3865c2760f21a Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak Date: Tue, 17 Sep 2024 10:10:23 +0200 Subject: [PATCH 2/3] chore: apply suggestion --- package-lock.json | 4 +-- .../src/components/dropdown/dropdown.tsx | 4 +-- .../src/components/dropdown/readme.md | 28 +++++++++---------- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index cc61fbee..35c56743 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24013,7 +24013,7 @@ }, "packages/components": { "name": "@mapsindoors/components", - "version": "13.20.2", + "version": "13.20.3", "license": "MIT", "dependencies": { "@11ty/eleventy": "^2.0.1", @@ -24053,7 +24053,7 @@ }, "packages/map-template": { "name": "@mapsindoors/map-template", - "version": "1.54.2", + "version": "1.54.6", "devDependencies": { "@googlemaps/js-api-loader": "^1.15.1", "@mapsindoors/components": "*", diff --git a/packages/components/src/components/dropdown/dropdown.tsx b/packages/components/src/components/dropdown/dropdown.tsx index 14c413ee..44947a0f 100644 --- a/packages/components/src/components/dropdown/dropdown.tsx +++ b/packages/components/src/components/dropdown/dropdown.tsx @@ -105,7 +105,7 @@ export class Dropdown { * * @type {string} */ - @Prop() placeholder: string; + @Prop() placeholder: string = 'Type to filter...'; /** * This attribute indicates that multiple items can be selected in the list. If it is not specified, then only one item can be selected at a time. @@ -599,7 +599,7 @@ export class Dropdown { return (
this.filterElement = el} onInput={(): void => { this.filter(); }} tabIndex={this.open ? 0 : -1} /> diff --git a/packages/components/src/components/dropdown/readme.md b/packages/components/src/components/dropdown/readme.md index c09a7437..32cfb94d 100644 --- a/packages/components/src/components/dropdown/readme.md +++ b/packages/components/src/components/dropdown/readme.md @@ -138,20 +138,20 @@ mi-dropdown::part(button) { ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------------------- | -| `disabled` | `disabled` | Sets the disabled state for the dropdown. | `boolean` | `false` | -| `filterable` | `filterable` | This attribute indicates that the items can be filtered using the input field present at the top. If it is not specified, the input field will not be visible, and filtering is not possible. | `boolean` | `false` | -| `iconAlt` | `icon-alt` | Sets the alternative text for the icon. | `string` | `undefined` | -| `iconSrc` | `icon` | Sets the icon on the left-hand side of the component. | `string` | `undefined` | -| `items` | -- | Gets or sets the list items. | `HTMLMiDropdownItemElement[]` | `[]` | -| `itemsOrder` | `items-order` | Sort order of items. | `SortOrder.Asc \| SortOrder.Desc` | `undefined` | -| `label` _(required)_ | `label` | The label will be displayed in as the text of the dropdown if the attribute multiple is present. Only required if multiple is present. | `string` | `undefined` | -| `multiple` | `multiple` | This attribute indicates that multiple items can be selected in the list. If it is not specified, then only one item can be selected at a time. | `boolean` | `false` | -| `noResultsMessage` | `no-results-message` | Guiding message when presented with a content window that has no rows. Default language is English. | `string` | `'No results found'` | -| `open` | `open` | Gets or sets the state of the dropdown. If the attribute is set to true then the dropdown will be expanded. | `boolean` | `false` | -| `placeholder` | `placeholder` | If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'. | `string` | `undefined` | -| `selected` | -- | Gets the selected items. | `HTMLMiDropdownItemElement[]` | `[]` | +| Property | Attribute | Description | Type | Default | +| -------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | --------------------- | +| `disabled` | `disabled` | Sets the disabled state for the dropdown. | `boolean` | `false` | +| `filterable` | `filterable` | This attribute indicates that the items can be filtered using the input field present at the top. If it is not specified, the input field will not be visible, and filtering is not possible. | `boolean` | `false` | +| `iconAlt` | `icon-alt` | Sets the alternative text for the icon. | `string` | `undefined` | +| `iconSrc` | `icon` | Sets the icon on the left-hand side of the component. | `string` | `undefined` | +| `items` | -- | Gets or sets the list items. | `HTMLMiDropdownItemElement[]` | `[]` | +| `itemsOrder` | `items-order` | Sort order of items. | `SortOrder.Asc \| SortOrder.Desc` | `undefined` | +| `label` _(required)_ | `label` | The label will be displayed in as the text of the dropdown if the attribute multiple is present. Only required if multiple is present. | `string` | `undefined` | +| `multiple` | `multiple` | This attribute indicates that multiple items can be selected in the list. If it is not specified, then only one item can be selected at a time. | `boolean` | `false` | +| `noResultsMessage` | `no-results-message` | Guiding message when presented with a content window that has no rows. Default language is English. | `string` | `'No results found'` | +| `open` | `open` | Gets or sets the state of the dropdown. If the attribute is set to true then the dropdown will be expanded. | `boolean` | `false` | +| `placeholder` | `placeholder` | If present, it dictates placeholder for an filterable input field in the dropdown. Defaults to 'Type to filter...'. | `string` | `'Type to filter...'` | +| `selected` | -- | Gets the selected items. | `HTMLMiDropdownItemElement[]` | `[]` | ## Events From f8ac308277df8262c8c45e795f4332b97f948037 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak Date: Wed, 18 Sep 2024 09:56:34 +0200 Subject: [PATCH 3/3] add: changelog --- packages/components/CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d6b907ec..af216b09 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [13.20.3] - 2024-09-18 + +### Added + +- Added new property to the `mi-dropdown` component called `placeholder`. + ## [13.20.2] - 2024-07-17 ### Fixed