@brightspace-ui/core 3.14.0 → 3.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -698,7 +698,9 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
698
698
|
}
|
699
699
|
}
|
700
700
|
|
701
|
-
async __position(
|
701
|
+
async __position(contentRect, options) {
|
702
|
+
|
703
|
+
options = Object.assign({ updateAboveBelow: true, updateHeight: true }, options);
|
702
704
|
|
703
705
|
const opener = this.__getOpener();
|
704
706
|
if (!opener) {
|
@@ -713,7 +715,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
713
715
|
const header = this.__getContentTop(); // todo: rename
|
714
716
|
const footer = this.__getContentBottom(); // todo: rename
|
715
717
|
|
716
|
-
if (!this.noAutoFit) {
|
718
|
+
if (!this.noAutoFit && options.updateHeight) {
|
717
719
|
this._contentHeight = null;
|
718
720
|
}
|
719
721
|
|
@@ -783,25 +785,27 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
783
785
|
|
784
786
|
}
|
785
787
|
|
786
|
-
if (
|
788
|
+
if (options.updateAboveBelow) {
|
787
789
|
this.openedAbove = this._getOpenedAbove(spaceAround, spaceAroundScroll, spaceRequired);
|
788
790
|
}
|
789
791
|
|
790
792
|
this._position = this._getPosition(spaceAround, targetRect, contentRect);
|
791
793
|
this._pointerPosition = this._getPointerPosition(targetRect);
|
792
794
|
|
793
|
-
|
794
|
-
|
795
|
-
|
796
|
-
|
797
|
-
|
798
|
-
|
799
|
-
|
800
|
-
|
801
|
-
|
802
|
-
|
803
|
-
|
804
|
-
|
795
|
+
if (options.updateHeight) {
|
796
|
+
// calculate height available to the dropdown contents for overflow because that is the only area capable of scrolling
|
797
|
+
const availableHeight = this.openedAbove ? spaceAround.above : spaceAround.below;
|
798
|
+
if (!this.noAutoFit && availableHeight && availableHeight > 0) {
|
799
|
+
// only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
|
800
|
+
this._contentHeight = this.maxHeight !== null
|
801
|
+
&& availableHeight > this.maxHeight
|
802
|
+
&& headerFooterHeight < this.maxHeight
|
803
|
+
? this.maxHeight - headerFooterHeight - 2
|
804
|
+
: availableHeight - headerFooterHeight;
|
805
|
+
|
806
|
+
// ensure the content height has updated when the __toggleScrollStyles event handler runs
|
807
|
+
await this.updateComplete;
|
808
|
+
}
|
805
809
|
}
|
806
810
|
|
807
811
|
/** Dispatched when the dropdown position finishes adjusting */
|
@@ -832,7 +836,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
832
836
|
// throttle repositioning (https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#scroll_event_throttling)
|
833
837
|
if (!this.__repositioning) {
|
834
838
|
requestAnimationFrame(() => {
|
835
|
-
this.__position(
|
839
|
+
this.__position(undefined, { updateAboveBelow: false, updateHeight: false });
|
836
840
|
this.__repositioning = false;
|
837
841
|
});
|
838
842
|
}
|
@@ -148,7 +148,7 @@ class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
|
|
148
148
|
this.maxHeight = this._maxHeightNonTray;
|
149
149
|
}
|
150
150
|
|
151
|
-
this.__position(
|
151
|
+
this.__position(e.detail, { updateAboveBelow: this._initializingHeight });
|
152
152
|
this._initializingHeight = false;
|
153
153
|
|
154
154
|
const menu = this.__getMenuElement();
|
@@ -46,7 +46,7 @@ class DropdownTabs extends DropdownContentMixin(LitElement) {
|
|
46
46
|
height: e.detail.height + tabListRect.height + 52,
|
47
47
|
width: e.detail.width
|
48
48
|
};
|
49
|
-
this.__position(
|
49
|
+
this.__position(rect, { updateAboveBelow: this._initializingHeight });
|
50
50
|
this._initializingHeight = false;
|
51
51
|
}
|
52
52
|
|
@@ -56,7 +56,7 @@ class DropdownTabs extends DropdownContentMixin(LitElement) {
|
|
56
56
|
}
|
57
57
|
|
58
58
|
_onTabSelected() {
|
59
|
-
this.__position(
|
59
|
+
this.__position();
|
60
60
|
}
|
61
61
|
|
62
62
|
}
|
@@ -263,6 +263,40 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#d2l
|
|
263
263
|
| `selected` | Boolean, default: `false` | Whether the value in the filter is selected or not |
|
264
264
|
<!-- docs: end hidden content -->
|
265
265
|
|
266
|
+
### Dimension Set Value: Custom Preset Date Range
|
267
|
+
|
268
|
+
In order to create a selectable filter list item that is a text item representing a range that is NOT one of the presets available in the `d2l-filter-dimension-set-date-text-value` component (for example, 60 days), use the regular "Dimension Set Value" component (`d2l-filter-dimension-set-value`) with the localized text of the range in the `text` field, and handle its selection as is appropriate for the consuming application.
|
269
|
+
|
270
|
+
The `getUTCDateTimeRange(rangeType, diff)` helper function can be used to get the `startValue` and `endValue` for the range in ISO strings in UTC, if required. As arguments it takes a `rangeType` (one of `seconds`, `minutes`, `hours`, `days`, `months`, or `years`) and a `diff` (positive or negative number where negative is a range in the past and positive is a range in the future). Either the `startValue` or `endValue` is the current date/time depending on whether the range is in the past or future.
|
271
|
+
|
272
|
+
<!-- docs: demo code align:start autoOpen:true autoSize:false size:large -->
|
273
|
+
```html
|
274
|
+
<script type="module">
|
275
|
+
import '@brightspace-ui/core/components/filter/filter.js';
|
276
|
+
import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
|
277
|
+
import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
|
278
|
+
import { getUTCDateTimeRange } from '@brightspace-ui/core/helpers/dateTime.js';
|
279
|
+
|
280
|
+
document.querySelector('d2l-filter').addEventListener('d2l-filter-change', e => {
|
281
|
+
const changes = e.detail.dimensions[0].changes;
|
282
|
+
if (!changes || changes.length === 0) return;
|
283
|
+
let dateTimeRange;
|
284
|
+
if (changes[0].valueKey === '60days' && changes[0].selected) {
|
285
|
+
dateTimeRange = getUTCDateTimeRange('days', -60);
|
286
|
+
} else if (changes[0].valueKey === '8months' && changes[0].selected) {
|
287
|
+
dateTimeRange = getUTCDateTimeRange('months', -8);
|
288
|
+
}
|
289
|
+
if (dateTimeRange) console.log('start date', dateTimeRange.startValue, 'end date', dateTimeRange.endValue);
|
290
|
+
});
|
291
|
+
</script>
|
292
|
+
<d2l-filter>
|
293
|
+
<d2l-filter-dimension-set key="dates" text="Dates" selection-single>
|
294
|
+
<d2l-filter-dimension-set-value key="60days" text="60 days"></d2l-filter-dimension-set-value>
|
295
|
+
<d2l-filter-dimension-set-value key="8months" text="8 months"></d2l-filter-dimension-set-value>
|
296
|
+
</d2l-filter-dimension-set>
|
297
|
+
</d2l-filter>
|
298
|
+
```
|
299
|
+
|
266
300
|
## Search and Paging
|
267
301
|
|
268
302
|
Most filters will not need search or paging features since filter value lists are generally short. For longer lists of filter values when Search is necessary, it can be enabled by setting search-type to `automatic` or `manual`.
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.15.1",
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
5
5
|
"type": "module",
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|