diff --git a/CHANGELOG.md b/CHANGELOG.md index e0f0b3c..88d1193 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +# v1.1.2 (CrestApps fork) + +### Fixes + +- Restored support for legacy `title="..."` placeholder text on single selects. +- Restored support for `data-width="fit"` and `width: 'fit'` so compact picker layouts continue to work. +- Documented the native `*.bs.select` events, including `maxReached`, `maxReachedGrp`, and `fetched`, and clarified the `event.detail` payloads. + # v1.1.0 (CrestApps fork) ### Highlights diff --git a/README.md b/README.md index f3fbbd8..58a7663 100644 --- a/README.md +++ b/README.md @@ -74,11 +74,11 @@ jsDelivr. Prefer pinning an explicit package version in production: - - + + ``` -You can replace `@1.1.1` with the version you want to consume. During +You can replace `@1.1.2` with the version you want to consume. During development, `@latest` also works, but a fixed version is safer for production deployments. @@ -104,6 +104,16 @@ automatically initialized once the DOM is ready — no JavaScript required. ``` +Existing bootstrap-select markup that uses `title="..."` placeholders or +`data-width="fit"` is also supported: + +```html + +``` + ### Via JavaScript Initialize an instance with the `Selectpicker` class. You can pass an element or @@ -157,6 +167,11 @@ select.addEventListener('changed.bs.select', function (e) { console.log('value changed', e.detail); }); +select.addEventListener('show.bs.select', function (e) { + // e.detail.bsEvent is the original Bootstrap dropdown event + console.log('opening from', e.detail.bsEvent.relatedTarget); +}); + select.addEventListener('loaded.bs.select', function () { /* ... */ }); ``` diff --git a/docs/content/examples.mdx b/docs/content/examples.mdx index caf326f..fc1ae5b 100644 --- a/docs/content/examples.mdx +++ b/docs/content/examples.mdx @@ -412,6 +412,24 @@ Use the `placeholder` attribute to set the default placeholder text when nothing ``` +Legacy bootstrap-select markup that uses the select element's `title` attribute for placeholder text is also supported on single selects: + + + + + + `} +/> + +```html + +``` + ## Selected text

@@ -710,6 +728,80 @@ Wrap selects in grid columns, or any custom parent element, to easily enforce de ``` +
+ +Alternatively, use the `data-width` attribute to set the width of the select. Set `data-width` to `'auto'` to automatically adjust the width of the select to its widest option. `'fit'` automatically adjusts the width of the select to the width of its currently selected option. An exact value can also be specified, e.g., `300px` or `50%`. + + +
+
+ + +
+
+ +
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
`} +/> + +```html + + + + +``` + # Customize options --- diff --git a/docs/content/index.md b/docs/content/index.md index 5372cfb..216156d 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -47,11 +47,11 @@ Prefer pinning an explicit package version in production: - - + + ``` -You can replace `@1.1.1` with the version you want to consume. During development, +You can replace `@1.1.2` with the version you want to consume. During development, `@latest` also works, but a fixed version is safer for production deployments. When loaded via a ` - - + + ``` -You can replace `@1.1.0` with the version you want to consume. During development, +You can replace `@1.1.2` with the version you want to consume. During development, `@latest` also works, but a fixed version is safer for production deployments. When loaded via a `