@itfin/components 1.4.35 → 1.5.0

package/src/assets/scss/directives/tooltip.scss

@@ -1,30 +1,35 @@
 @import '../variables';
 @import '../bootstrap';
 
-$tooltip-color: #fff9ae;
+$tooltip-color: #22222B;
 $dark-tooltip-color: #7b52eb;
 
 :root {
   --itf-tooltip-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
-  --itf-tooltip-color: #{$body-color};
+  --itf-tooltip-color: #FFF;
   --itf-tooltip-bg-color: #{$tooltip-color};
+  --itf-tooltip-font-size: 14px;
 }
 
 [data-theme="dark"] {
   --itf-tooltip-shadow: 0 0 20px 4px rgba(87, 78, 101, 0.15), 0 4px 80px -8px rgba(211, 208, 219, 0.25), 0 4px 4px -2px rgba(156, 150, 164, 0.15);
   --itf-tooltip-color: #{$dark-body-color};
   --itf-tooltip-bg-color: #{$dark-tooltip-color};
-  --itf-tooltip-font-size: 0.875rem;
+  --itf-tooltip-font-size: 14px;
 }
 
 .tippy-box[data-theme~=itfin] {
   color: var(--itf-tooltip-color);
   background-color: var(--itf-tooltip-bg-color);
   font-size: var(--itf-tooltip-font-size);
-  border-radius: 5px;
+  border-radius: 0.5rem;
   box-shadow: var(--itf-tooltip-shadow);
-  padding: 5px;
+  padding: .25rem .5rem;
   cursor: default;
+  a {
+    color: var(--itf-tooltip-color);
+    text-decoration: underline;
+  }
 
   &[data-placement^=top] > .tippy-arrow:before {
     border-top-color: var(--itf-tooltip-bg-color);

package/src/assets/scss/main.scss

@@ -60,3 +60,51 @@ kbd {
     color: var(--bs-primary-color) !important
   }
 }
+
+// згідно з дизайном
+.dropdown-header {
+  font-size: .75rem;
+  padding: .75rem .5rem .25rem;
+
+  &:first-child {
+    padding-top: .25rem;
+  }
+}
+//.dropdown-item {
+//  --bs-dropdown-link-active-bg: #F1F2F4;
+//  --bs-dropdown-link-active-color: var(--bs-body-color);
+//  &:not(:last-child) {
+//    margin-bottom: 1px;
+//  }
+//
+//  svg {
+//    color: #8E97A5;
+//  }
+//  &:hover svg {
+//    color: var(--bs-body-color);
+//  }
+//}
+body .form-check-input:checked[type=checkbox] {
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L3.5 6.5L1 4' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  box-shadow: 0px 2px 3px 0px #00000026;
+}
+body .form-check-input:indeterminate[type=checkbox] {
+  box-shadow: 0px 2px 3px 0px #00000026;
+}
+body .text-muted {
+  color: #7A818E !important;
+}
+body .form-control {
+  &:focus {
+    box-shadow: none !important;
+  }
+}
+
+@keyframes pulse-shadow {
+  0% { box-shadow: 0 0 0 0 rgba(26, 74, 151, 0) }
+  50% { box-shadow: 0 0 0 4px rgba(26, 74, 151, 0.15) }
+  100% { box-shadow: 0 0 0 0 rgba(26, 74, 151, 0) }
+}
+.pulsing {
+  animation: pulse-shadow 3s ease-in-out infinite;
+}

package/src/components/alert/AlertBanner.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="itf-alert-banner">
+    <div v-if="count" class="itf-alert-banner__counter px-2 bg-danger text-white fw-bold text-smaller text-decoration-none d-block rounded-pill">
+      {{ count > 99 ? '99+' : count }}
+    </div>
+    <div v-if="multiple" class="itf-alert-banner__panel itf-alert-banner__multiple rounded-3 border bg-muted-2"></div>
+    <div class="itf-alert-banner__panel px-3 rounded-3 border bg-muted-2 d-flex gap-3 align-items-start align-items-sm-center flex-sm-row flex-column">
+      <slot name="icon">
+        <div v-if="icon" class="itf-alert-banner__icon rounded-2 bg-danger flex-shrink-0 d-flex align-items-center justify-content-center">
+          <itf-icon new :name="icon" :size="24" class="text-white" />
+        </div>
+      </slot>
+      <div class="flex-grow-1">
+        <div class="fw-bold"><slot name="title">{{title}}</slot></div>
+        <div class="small text-muted"><slot></slot></div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.itf-alert-banner {
+  width: 100%;
+  position: relative;
+  max-width: 420px;
+
+  &__counter {
+    top: 0;
+    right: -4px;
+    position: absolute;
+    z-index: 3;
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
+    min-width: 1.75rem;
+    text-align: center;
+  }
+  &__panel {
+    position: relative;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    top: 4px;
+    z-index: 2;
+  }
+  &__icon {
+    width: 48px;
+    height: 48px;
+  }
+  &__multiple {
+    position: absolute;
+    top: 0;
+    right: -4px;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import itfIcon from '@itfin/components/src/components/icon/Icon';
+import itfPanelLink from '@itfin/components/src/components/panels/PanelLink.vue';
+
+export default @Component({
+  name: 'itfAlertBanner',
+  components: {
+    itfIcon,
+    itfPanelLink,
+  },
+})
+class AlertBanner extends Vue {
+  @Prop(String) title;
+  @Prop(String) icon;
+  @Prop() count;
+  @Prop(Boolean) multiple;
+}
+</script>

package/src/components/app/App.vue

@@ -76,7 +76,7 @@ class itfApp extends Vue {
     } catch (err) {
       if (err.code !== 'ERR_CANCELED') {
         console.error(err);
-        this.showError(err.message);
+        if (!err.noMessage) this.showError(err.message);
         if (errFunc) {
           errFunc(err);
         }

package/src/components/button/Button.vue

@@ -17,6 +17,7 @@ class itfButton extends Vue {
   @Prop(Boolean) large;
   @Prop(Boolean) icon;
   @Prop(Boolean) block;
+  @Prop(Boolean) squircle;
   @Prop(String) loadingText;
   @Prop(String) color;
   @Prop(Boolean) disabled;
@@ -27,7 +28,7 @@ class itfButton extends Vue {
 
   render (createElement, { data, slots, children, props }) {
     const {
-      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, default: defaultStyle,
+      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle, default: defaultStyle,
       class: classNames
     } = props;
     const component = to ? 'nuxt-link' : (props.href ? 'a' : 'button');
@@ -47,6 +48,7 @@ class itfButton extends Vue {
         'btn-default': defaultStyle,
         'btn-basic': !primary && !secondary && !color && !defaultStyle,
         'btn-secondary': secondary,
+        // 'btn-squircle': squircle,
         'btn-sm': small,
         'btn-lg': large,
         // 'px-3': small && !icon,

package/src/components/button/NativeButton.js

@@ -7,6 +7,7 @@ const CSS_CLASSES = {
   small: ['btn-sm'],
   block: ['itf-button__block'],
   labeled: ['labeled'],
+  squircle: ['btn-squircle'],
   icon: ['btn-icon'],
   loading: ['loading'],
   spinner: ['itf-spinner'],
@@ -35,6 +36,9 @@ class Button extends HTMLElement {
     if (this.hasAttribute('labeled')) {
       styles.push(CSS_CLASSES.labeled);
     }
+    if (this.hasAttribute('squircle')) {
+      styles.push(CSS_CLASSES.squircle);
+    }
     if (this.hasAttribute('icon')) {
       styles.push(CSS_CLASSES.icon);
     }

package/src/components/button/index.stories.js

@@ -66,7 +66,7 @@ storiesOf('Common', module)
 
         <h3>Standart button</h3>
 
-        <itf-button primary>Primary button</itf-button>
+        <itf-button squircle primary>Primary button</itf-button>
         <itf-button secondary>Secondary button</itf-button>
         <itf-button>Basic button</itf-button>
         <itf-button icon>
@@ -92,7 +92,7 @@ storiesOf('Common', module)
 
         <h3>Large button</h3>
 
-        <itf-button large primary>Primary button</itf-button>
+        <itf-button squircle large primary>Primary button</itf-button>
         <itf-button large secondary>Secondary button</itf-button>
         <itf-button large>Basic button</itf-button>
         <itf-button large icon>

package/src/components/checkbox/Checkbox.vue

@@ -2,12 +2,13 @@
 
   <div class="itf-checkbox form-check" :class="{ 'form-switch': this.switch, 'itf-checkbox__large': large, 'itf-checkbox__medium': medium }">
     <input class="form-check-input" ref="input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
-    <label :for="id" class="form-check-label w-100" :class="{ 'disabled': isDisabled }">
+    <label :for="id" class="form-check-label" :class="{ 'disabled': isDisabled }">
       <slot name="label">
         {{label}}
         <slot name="icon"></slot>
       </slot>
     </label>
+    <slot name="after-label"></slot>
   </div>
 
 </template>

package/src/components/checkbox/RadioBox.vue

@@ -16,8 +16,6 @@
   padding: 0;
   margin-bottom: .5rem;
   position: relative;
-  cursor: pointer;
-
   &:not(.disabled) {
     cursor: pointer;
 
@@ -29,6 +27,7 @@
   .form-check-label {
     cursor: not-allowed;
   }
+
   &.left {
     padding: 0 0 0 2.5rem;
 

package/src/components/copyToClipboard/CopyToClipboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <itf-button icon small @click.stop="copy">
+  <itf-button :icon="icon" :small="small" @click.stop="copy" :disabled="disabled">
     <slot>
       <itf-icon name="clipboard_copy" />
     </slot>
@@ -18,6 +18,9 @@ export default @Component({
 })
 class CopyToClipboard extends Vue {
   @Prop(String) value;
+  @Prop({ type: Boolean, default: true }) small;
+  @Prop({ type: Boolean, default: true }) icon;
+  @Prop({ type: Boolean, default: false }) disabled;
 
   async copy () {
     const showSuccess = this.$showSuccess;

package/src/components/customize/PropertiesList.vue

@@ -15,7 +15,6 @@
           :field="field"
           :editable="editable"
           :lock-fields="lockFields"
-          :full-name="fullName"
           :value="value[field.Id]"
           @input="$emit('input', { ...value, [field.Id]: $event })"
           @delete="onDelete(field)"
@@ -105,7 +104,6 @@ class itfPropertiesList extends Vue {
   @Prop({ type: Boolean, default: false }) loading;
   @Prop({ type: Boolean, default: false }) editable;
   @Prop({ type: Boolean, default: false }) lockFields;
-  @Prop({ type: Boolean, default: false }) fullName;
 
   isShowAll = false;
 

package/src/components/customize/PropertiesPopupMenu.vue

@@ -27,7 +27,7 @@
   </div>
 </template>
 <script>
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';

package/src/components/customize/PropertyItem.vue

@@ -9,10 +9,10 @@
 
       <itf-dropdown text :disabled="!editable || lockFields" ref="editDd" autoclose="outside" class="flex-grow-1 mw-100 editable-field" shadow @close="onClose">
         <div slot="button">
-          <div class="d-flex align-items-center" :class="{ 'b-properties-list__title-text': lockFields }">
+          <div class="d-flex align-items-center">
 <!--            <itf-icon :name="field.Icon" :size="16" class="me-1" />-->
 
-            <div :class="`b-properties-list__title-text-${fullName ? 'full' : 'short'}`" v-text="field.Name" />
+            <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="field.Name" />
           </div>
         </div>
         <properties-edit-menu
@@ -35,11 +35,11 @@
         />
       </itf-dropdown>
     </div>
-    <div class="bg-light b-properties-list__value rounded-2" :class="{'editable': editable, 'active shadow rounded-2 bg-body': focusId === field.Id}" sortable-skip>
+    <div class="b-properties-list__value rounded-2" :class="{'editable': editable, 'active shadow rounded-2 bg-body': focusId === field.Id}" sortable-skip>
       <property-inline-edit
         @focus="onFocus(field.Id)"
         @blur="onBlur(field.Id)"
-        class="flex-grow-1 b-properties-list__inline-editor editable-field rounded-2"
+        class="flex-grow-1 b-properties-list__inline-editor editable-field"
         :field="field"
         :value="value"
         :editable="editable"
@@ -62,11 +62,6 @@
       background: rgba(0, 0, 0, 0.05);
     }
   }
-  &__inline-editor {
-    min-height: 44px;
-    padding-right: 10px;
-    padding-left: 10px;
-  }
   &__draghandler {
     user-select: none;
     transition: opacity 150ms ease-in 0s;
@@ -85,7 +80,7 @@
   }
   &__inner {
     display: flex;
-    padding-bottom: 8px;
+    padding-bottom: 4px;
     width: 100%;
   }
   &__name, &__value {
@@ -103,7 +98,7 @@
   &__name {
     display: flex;
     align-items: center;
-    min-height: 44px;
+    height: 34px;
     width: 250px;
     flex: 0 0 auto;
   }
@@ -124,18 +119,6 @@
       background-color: rgba(55, 53, 47, 0.08);
     }
   }
-  &__title-text {
-    min-height: 44px;
-  }
-  &__title-text-short {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  &__title-text-full {
-    white-space: normal;
-    word-break: break-word;
-  }
 }
 </style>
 <script>
@@ -171,7 +154,6 @@ class itfPropertyItem extends Vue {
   @Prop({ type: Boolean, default: false }) loading;
   @Prop({ type: Boolean, default: false }) editable;
   @Prop({ type: Boolean, default: false }) lockFields;
-  @Prop({ type: Boolean, default: false }) fullName;
 
   isEditMode = false;
   focusId = null;

package/src/components/datepicker/DatePicker.vue

@@ -24,7 +24,7 @@
       :disabled="disabled"
     />
 
-    <div class="addon-end" v-if="clearable && value && !isInvalid()">
+    <div class="addon-end" v-if="clearable && value">
       <slot name="clear">
         <itf-button
           icon
@@ -44,6 +44,7 @@
           :display-format="dateFormat"
           :value-format="valueFormat"
           :min-date="minDate"
+          :max-date="maxDate"
           :days-list="daysList"
           @input="selectInlineDate"
         ></itf-date-picker-inline>
@@ -87,6 +88,7 @@ class itfDatePicker extends Vue {
   @Prop({ type: String, default: '' }) prependIcon;
   @Prop({ type: String, default: 'bottom-start' }) placement;
   @Prop({ type:  [String, Date], default: '' }) minDate;
+  @Prop({ type:  [String, Date], default: '' }) maxDate;
   @Prop(Boolean) clearable;
   @Prop(Boolean) disabled;
 

package/src/components/datepicker/DatePickerInline.vue

@@ -90,8 +90,8 @@ class itfDatePickerInline extends Vue {
       range: this.range,
       view: (this.valueAsLuxon && !this.minView) ? 'days' : this.startView,
       minView: this.minView,
-      minDate: this.minDate,
-      maxDate: this.maxDate,
+      minDate: this.minDate === 'today' ? new Date() : this.minDate,
+      maxDate: this.maxDate === 'today' ? new Date() : this.maxDate,
       selectedDates: this.valueAsLuxon ? [this.valueAsLuxon.toJSDate()] : [],
       onSelect: ({ date }) => {
         if (this.range && !this.calendar.rangeDateTo) {

package/src/components/datepicker/DateRangePickerInline.vue

@@ -101,7 +101,12 @@ class itfDatePickerInline extends Vue {
       range: true,
       compareRange: true,
       dynamicRange: true,
-      toggleSelected: false,
+      toggleSelected: function({ date, datepicker }) {
+        if (datepicker.selectedDates.length > 1) {
+          datepicker.selectDate(date);
+        }
+        return false;
+      },
       selectedDates: this.valueAsLuxon
         ? [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()]
         : [],

package/src/components/dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <script>
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button';
 import itfDropdownMenu from './DropdownMenu';
 

package/src/components/dropdown/DropdownMenu.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
 
 let globalModalIndex = 0; // base modal z-index
 

package/src/components/editable/EditButton.vue

@@ -24,7 +24,7 @@
 }
 </style>
 <script>
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 

package/src/components/filter/FilterBadge.vue

@@ -12,7 +12,7 @@
       </div>
     </template>
 
-    <div class="px-2">
+    <div>
       <template v-if="type === 'list'">
         <a
           v-for="(item, n) in options.items"
@@ -36,16 +36,31 @@
           @input="onFilterChange({ value: $event })"
         />
       </template>
+      <template v-else-if="type === 'month'">
+        <itf-date-picker-inline
+          style="margin: -.5rem"
+          start-view="months"
+          min-view="months"
+          :value="value.value"
+          only-calendar
+          @input="onFilterChange({ value: $event })"
+        />
+      </template>
       <template v-else-if="type === 'date'">
         <itf-date-picker-inline
           style="margin: -.5rem"
           :value="value.value"
+          :only-calendar="options.calendarOptions && options.calendarOptions.onlyCalendar"
+          :max-date="options.calendarOptions && options.calendarOptions.maxDate"
+          :min-date="options.calendarOptions && options.calendarOptions.minDate"
+          value-format="yyyy-MM-dd"
           @input="onFilterChange({ value: $event })"
         />
       </template>
       <div v-else-if="type === 'facets-list'" style="width: 300px;">
         <filter-facets-list
           :title="options.title"
+          :options="options"
           :value="value.value"
           :items="options.items"
           :total="options.total"
@@ -108,9 +123,13 @@ body[data-theme="dark"] {
   &.filter-not-default-pill {
     background-color: var(--filter-badge__selected-bg-color);
     outline: 1px solid var(--filter-badge__selected-color);
+
+    .icon { color: var(--filter-badge__selected-color) }
   }
   &.filter-invalid-pill {
     background-color: var(--filter-badge__invalid-bg-color);
+
+    .icon { color: var(--filter-badge__invalid-color) }
   }
   &.filter-pill__default-value {
     padding: var(--filter-badge__padding-y) var(--filter-badge__padding-x);

package/src/components/filter/FilterFacetsList.vue

@@ -20,16 +20,26 @@
       </div>
     </div>
     <div class="facets-list">
-    <div v-for="(val, n) of mappedValues" :key="n" class="dropdown-item px-2" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
-      <span class="facet-name text-dark d-flex align-items-center">
-        <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
-        <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
-      </span>
-      <span v-if="val.count" class="facet-stat">
-        {{ val.count }}
-        <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
-      </span>
-    </div>
+      <div v-for="(group, g) of groupedList">
+        <div v-if="group.group" class="dropdown-item ps-1 d-flex align-items-center"
+             :class="{'active': isGroupSelected(group.items)}" @click="groupSelected(!isGroupSelected(group.items), group.items)">
+          <span class="facet-name text-dark d-flex align-items-center">
+            <itf-checkbox ungrouped :value="isGroupSelected(group.items)" @input="groupSelected($event, group.items)" class="m-0" />
+            <div class="w-100 text-truncate">{{ group.group }}</div>
+          </span>
+        </div>
+
+        <div v-for="(val, n) of group.items" :key="n" class="dropdown-item ps-1" :class="{'active': val.isSelected, 'ps-4': group.group}" @click="onFilterClick(val)">
+          <span class="facet-name text-dark d-flex align-items-center">
+            <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
+            <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
+          </span>
+          <span v-if="val.count" class="facet-stat">
+            {{ val.count }}
+            <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
+          </span>
+        </div>
+      </div>
     </div>
 
     <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
@@ -76,7 +86,7 @@
   margin: 1px 0;
   &.active {
     .facet-bar-progress {
-      background-color: var(--bs-primary);
+      background-color: var(--bs-blue);
     }
   }
   .facet-name {
@@ -105,12 +115,14 @@
     width: var(--bar-width);
     min-width: 5px;
     height: 10px;
-    background-color: rgba(var(--bs-primary-rgb), 50%);
+    background-color: rgba(var(--bs-blue-rgb), 50%);
     transition: width 0.3s ease 0s;
   }
 }
 </style>
 <script>
+import uniq from 'lodash/uniq';
+import sortBy from 'lodash/sortBy';
 import { Vue, Prop, Model, Component } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
 import itfButton from '../button/Button';
@@ -149,6 +161,33 @@ class FilterFacetsList extends Vue {
     return this.visibleList.length > this.limit;
   }
 
+  get hasGroups() {
+    const groups = uniq(this.items && this.items.map(item => item.group).filter(Boolean));
+    return groups.length > 1
+  }
+
+  isGroupSelected(items) {
+    return items.every(item => item.isSelected);
+  }
+
+  groupSelected(value, items) {
+    let newVal = this.value ? [...Array.isArray(this.value) ? this.value : [this.value]] : [];
+    if (value) {
+      items.forEach((item) => {
+        const itemValue = `${item.value}`;
+        if (!newVal.includes(itemValue)) {
+          newVal.push(itemValue);
+        }
+      });
+    } else {
+      items.forEach((item) => {
+        const itemValue = `${item.value}`;
+        newVal = newVal.filter(val => val !== itemValue);
+      });
+    }
+    this.$emit('input', this.multiple ? newVal : (newVal.length > 0 ? newVal[0] : null));
+  }
+
   get visibleList() {
     let list = this.items.map(val => {
       const isSelected = this.multiple
@@ -163,7 +202,22 @@ class FilterFacetsList extends Vue {
     if (this.isShowSelected) {
       return list.filter((val) => val.isSelected);
     }
-    return list;
+    return sortBy(list, (item) => this.hasGroups ? item.group || item.label : item.label);
+  }
+
+  get groupedList() {
+    if (!this.hasGroups) {
+      return [{ items: this.mappedValues }];
+    }
+    const groups = {};
+    this.mappedValues.forEach((item) => {
+      const group = item.group || '';
+      if (!groups[group]) {
+        groups[group] = [];
+      }
+      groups[group].push(item);
+    });
+    return Object.entries(groups).map(([group, items]) => ({ group, items }));
   }
 
   get mappedValues() {