@itfin/components 1.4.40 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.4.40",
+  "version": "1.5.1",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -20,36 +20,36 @@
     "libs/"
   ],
   "dependencies": {
-    "@calumk/editorjs-codecup": "^1.1.1",
+    "@calumk/editorjs-codecup": "^1.3.0",
     "@editorjs/attaches": "^1.3.0",
-    "@editorjs/code": "^2.9.0",
-    "@editorjs/delimiter": "^1.4.0",
-    "@editorjs/editorjs": "^2.29.0",
-    "@editorjs/embed": "^2.7.0",
-    "@editorjs/header": "^2.8.1",
-    "@editorjs/image": "^2.9.0",
-    "@editorjs/inline-code": "^1.5.0",
+    "@editorjs/code": "^2.9.3",
+    "@editorjs/delimiter": "^1.4.2",
+    "@editorjs/editorjs": "^2.30.8",
+    "@editorjs/embed": "^2.7.6",
+    "@editorjs/header": "^2.8.8",
+    "@editorjs/image": "^2.10.2",
+    "@editorjs/inline-code": "^1.5.2",
     "@editorjs/link": "^2.6.2",
     "@editorjs/marker": "^1.4.0",
-    "@editorjs/nested-list": "^1.4.2",
-    "@editorjs/quote": "^2.6.0",
-    "@editorjs/table": "^2.3.0",
+    "@editorjs/nested-list": "^1.4.3",
+    "@editorjs/quote": "^2.7.6",
+    "@editorjs/table": "^2.4.5",
     "@egjs/vue-flicking": "^4.10.4",
     "@mdi/js": "^7.2.96",
     "@popperjs/core": "^2.11.8",
     "@shopify/draggable": "^1.0.0-beta.8",
-    "@vue/composition-api": "^1.7.1",
+    "@vue/composition-api": "^1.7.2",
     "@vue/vue2-jest": "^27.0.0",
     "@vue/web-component-wrapper": "^1.3.0",
-    "bootstrap": "^5.3.x",
+    "bootstrap": "^5.3.6",
     "bpmn-js": "^17.0.2",
     "clipboard": "^2.0.11",
     "core-js": "^3.7.0",
     "intersection-observer": "^0.12.2",
+    "json5": "^2.2.3",
     "lodash": "^4.17.20",
     "luxon": "^3.3.0",
     "pdfjs-dist": "^2.10.377",
-    "storybook-dark-mode": "^3.0.3",
     "tippy.js": "^6.3.2",
     "vue-grid-layout": "^2.4.0",
     "vue-imask": "^6.6.3",
@@ -62,9 +62,6 @@
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
     "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
-    "@storybook/addon-docs": "=6.3.8",
-    "@storybook/addon-viewport": "=6.3.8",
-    "@storybook/vue": "=6.3.8",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
@@ -76,7 +73,6 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.9.0",
-    "fibers": "^5.0.0",
     "marked": "^4.2.5",
     "postcss-cli": "^11.0.0",
     "sass": "^1.29.0",
@@ -84,6 +80,7 @@
     "vue": "^2.6.12",
     "vue-class-component": "^7.2.6",
     "vue-eslint-parser": "^9.1.0",
+    "vue-jest": "^3.0.7",
     "vue-template-compiler": "=2.6.14"
   },
   "eslintConfig": {
@@ -119,7 +116,7 @@
   "jest": {
     "preset": "@vue/cli-plugin-unit-jest",
     "testMatch": [
-      "**/src/**/*.spec.js"
+      "**/src/**/*.spec.(j|t)s"
     ],
     "testPathIgnorePatterns": [
       "dist/"

package/src/ITFSettings.js

@@ -1,3 +1,9 @@
+if (typeof CSS !== 'undefined' && 'paintWorklet' in CSS) {
+  CSS.paintWorklet.addModule(
+    "https://www.unpkg.com/css-houdini-squircle@0.1.3/squircle.min.js"
+  );
+}
+
 class ITFSettings {
   options = {
     firstDayOfWeek: 'Monday',

package/src/assets/scss/components/_button.scss

@@ -120,4 +120,122 @@
       }
     }
   }
+
+  &.btn-default {
+    --bs-btn-color: #22222B;
+    --bs-btn-border-color: #e5e5e5;
+    --bs-btn-hover-color: #1A4A97;
+    --bs-btn-hover-border-color: rgba(26, 74, 151, 0.3);
+    --bs-btn-active-color: #1A4A97;
+    --bs-btn-active-border-color: #1A4A97;
+    --bs-btn-disabled-color: var(--bs-btn-color);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
+
+    .itf-icon {
+      color: #8E97A5;
+    }
+
+    &:hover {
+      .itf-icon {
+        color: var(--bs-btn-hover-color);
+      }
+    }
+    &:active, &:focus {
+      .itf-icon {
+        color: var(--bs-btn-active-color);
+      }
+    }
+
+    &.btn-white {
+      --bs-btn-color: #ffffff;
+      --bs-btn-bg: transparent;
+      --bs-btn-border-color: rgba(255, 255, 255, 0.5);
+      --bs-btn-hover-color: #22222b;
+      --bs-btn-hover-bg: rgba(255, 255, 255, 0.5);
+      --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
+      --bs-btn-active-color: #22222b;
+      --bs-btn-active-bg: color-mix(in srgb, black 10%, var(--bs-btn-hover-bg));
+      --bs-btn-active-border-color: rgba(255, 255, 255, 0.5);
+
+      .itf-icon {
+        color: var(--bs-btn-color);
+      }
+
+      &:hover {
+        background-color: var(--bs-btn-hover-bg);
+        border-color: var(--bs-btn-hover-border-color);
+
+        .itf-icon {
+          color: var(--bs-btn-hover-color);
+        }
+      }
+      &:active, &:focus {
+        background-color: var(--bs-btn-active-bg);
+        border-color: var(--bs-btn-active-border-color);
+
+        .itf-icon {
+          color: var(--bs-btn-active-color);
+        }
+      }
+    }
+  }
+
+  &.btn-secondary {
+    --bs-btn-bg: #f5f6f8;
+    --bs-btn-border-color: #f5f6f8;
+
+    &:hover {
+      background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+    }
+    &:active, &:focus {
+      background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+    }
+
+    &.btn-secondary--light {
+      --bs-btn-bg: #ffffff;
+      --bs-btn-border-color: #ffffff;
+    }
+  }
+
+  &.btn-primary {
+    &:hover {
+      background-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
+    }
+    &:active, &:focus {
+      background-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
+    }
+  }
+
+  &.btn-blue {
+    --bs-btn-bg: #1A4A97;
+    --bs-btn-border-color: #1A4A97;
+
+    &:hover {
+      background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+    }
+    &:active, &:focus {
+      background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+    }
+  }
+
+  &.btn-white {
+    --bs-btn-bg: #ffffff;
+    --bs-btn-border-color: #ffffff;
+
+    &:hover {
+      background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+    }
+    &:active, &:focus {
+      background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+    }
+  }
 }

package/src/assets/scss/components/_text-field.scss

@@ -2,10 +2,10 @@
 
 .itf-text-field {
   &__input {
-    .addon + & {
-      border-top-left-radius: $input-border-radius !important;
-      border-bottom-left-radius: $input-border-radius !important;
-    }
+    min-height: 2rem;
+    border: 0 none;
+    background-color: transparent !important;
+
     -moz-appearance: textfield; // Hide Arrows From Input Number (Firefox)
 
     &::-webkit-outer-spin-button,  // Hide Arrows From Input Number (Chrome, Safari, Edge, Opera)
@@ -14,11 +14,27 @@
       margin: 0;
     }
   }
+  .input-group-text {
+    --bs-border-width: 0;
+
+    background: transparent;
+
+    &.prepend {
+      padding: 0.375rem 0 0.375rem 0.75rem;
+    }
+    &.append {
+      padding-left: .325rem;
+    }
+  }
   .addon-end {
     pointer-events: all;
     padding-right: 0.25rem;
   }
 }
+.itf-text-field.input-group > .form-control {
+  box-shadow: none !important;
+  border: 0 none !important;
+}
 
 .itf-textarea {
   &.input-group {
@@ -30,10 +46,8 @@
     z-index: 10;
   }
   &__input {
-    .addon + & {
-      border-top-left-radius: $input-border-radius !important;
-      border-bottom-left-radius: $input-border-radius !important;
-    }
+    border: 0 none;
+    //background-color: transparent !important;
     resize: none;
   }
   &__autogrow &__input {

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

@@ -74,9 +74,12 @@ class itfApp extends Vue {
     try {
       await func();
     } catch (err) {
-      this.showError(err.message);
-      if (errFunc) {
-        errFunc(err);
+      if (err.code !== 'ERR_CANCELED') {
+        console.error(err);
+        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">
+    <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

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-radio-box form-check card" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
+  <div class="itf-radio-box form-check card" :class="{ 'disabled': disabled, 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
     <input class="form-check-input" :id="id" type="radio" :name="radioName" v-model="isChecked" :value="true" :disabled="disabled" />
     <label :for="id" slot="label" class="form-check-label card-body">
 
@@ -16,7 +16,17 @@
   padding: 0;
   margin-bottom: .5rem;
   position: relative;
-  cursor: pointer;
+  &:not(.disabled) {
+    cursor: pointer;
+
+    .form-check-label {
+      cursor: pointer;
+    }
+  }
+
+  .form-check-label {
+    cursor: not-allowed;
+  }
 
   &.left {
     padding: 0 0 0 2.5rem;
@@ -38,13 +48,9 @@
   &.active {
     background-color: rgba(var(--bs-primary-rgb),.1) !important;
   }
-  &:hover {
+  &:hover:not(.disabled) {
     background-color: rgba(0,0,0,.05);
   }
-
-  .form-check-label {
-    cursor: pointer;
-  }
 }
 </style>
 <script>

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()]
         : [],