@itfin/components 1.3.67 → 1.3.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.67",
+  "version": "1.3.69",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/datepicker/DateGranularityPicker.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="itf-daterange-picker" :class="{ 'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable }">
+    <div class="addon" v-if="prependIcon">
+      <slot name="addon">
+        <itf-icon :name="prependIcon" />
+      </slot>
+    </div>
+    <div class="input-group form-control py-0"
+         :class="{ 'focused': focused, 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
+         ref="group">
+      <i-mask-component
+        ref="input"
+        class="form-control"
+        :class="{ 'placeholder-visible': !displayValue || !displayValue[0] }"
+        @input="updateValue($event, 0)"
+        @focus="onFocus"
+        @blur="onBlur($event, 0)"
+        :value="displayValue[0]"
+        :mask="Date"
+        :pattern="dateFormat"
+        :blocks="blocks"
+        :disabled="disabled"
+        :format="format"
+        :parse="parse"
+        :unmask="false"
+        :lazy="!focused"
+        :placeholder="placeholder"
+      />
+      <span v-if="displayValue && displayValue[0]" class="input-group-text" :class="{'hidden': !focused && (value && !value[0])}">-</span>
+
+      <i-mask-component
+        v-if="displayValue && displayValue[0]"
+        ref="input2"
+        class="form-control"
+        @input="updateValue($event, 1)"
+        @focus="onFocus"
+        @blur="onBlur($event, 1)"
+        :value="displayValue[1]"
+        :mask="Date"
+        :pattern="dateFormat"
+        :blocks="blocks"
+        :format="format"
+        :parse="parse"
+        :unmask="false"
+        :lazy="!focused"
+      />
+    </div>
+    <div style="display: none">
+      <div ref="dropdown" class="itf-daterange-picker__dropdown d-flex gap-2">
+        <div class="p-3">
+          <itf-radio-group v-model="granularity">
+            <itf-radio v-for="(gr, n) in granularities" :key="n" :label="gr.title" :value="gr.value" />
+          </itf-radio-group>
+        </div>
+        <div>
+          <itf-date-range-picker-inline
+          :value="value"
+          only-calendar
+          :display-format="displayFormat"
+          :value-format="valueFormat"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :min-view="minView"
+          @input="selectInlineDate"
+        ></itf-date-range-picker-inline>
+        </div>
+        <!--itf-date-range-picker-inline
+          :value="value"
+          :start-view="startView"
+          :only-calendar="onlyCalendar"
+          :display-format="displayFormat"
+          :value-format="valueFormat"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @input="selectInlineDate"
+        ></itf-date-range-picker-inline-->
+      </div>
+    </div>
+
+    <div class="addon-end" v-if="clearable && value && value[0]">
+      <slot name="clear">
+        <itf-button
+          icon
+          small
+          @click="$emit('input', '')"
+        >
+          <itf-icon name="close" />
+        </itf-button>
+      </slot>
+    </div>
+  </div>
+</template>
+<script>
+import { Vue, Component, Prop, PropSync, Inject } from 'vue-property-decorator';
+import { IMask, IMaskComponent } from 'vue-imask';
+import { DateTime } from 'luxon';
+import tippy from 'tippy.js';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import itfRadio from '../checkbox/Radio.vue';
+import itfRadioGroup from '../checkbox/RadioGroup.vue';
+import itfDateRangePickerInline from './DateRangePickerInline.vue';
+import ITFSettings from '../../ITFSettings';
+
+export default @Component({
+  name: 'itfDateRangePicker',
+  components: {
+    itfIcon,
+    itfButton,
+    itfRadio,
+    itfRadioGroup,
+    itfDateRangePickerInline,
+    IMaskComponent,
+  },
+})
+class itfDateGranularityPicker extends Vue {
+  @Inject({ default: null }) itemLabel;
+
+  @Prop({ default: () => ([]) }) value;
+  @Prop({ type: String, default: 'ISO' }) valueFormat;
+  @Prop({ type: String }) displayFormat;
+  // @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
+  @Prop({ type: Boolean, default: false }) onlyCalendar;
+  @Prop({ type: Boolean, default: false }) clearable;
+  @Prop({ type: String, default: '' }) placeholder;
+  @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) disabled;
+
+  granularity = 'yearly';
+
+  get granularities() {
+    return [
+      { title: 'Yearly', value: 'yearly' },
+      { title: 'Quarterly', value: 'quarterly' },
+      { title: 'Monthly', value: 'monthly' },
+      { title: 'Weekly', value: 'weekly' },
+      { title: 'Custom', value: 'manual' },
+    ];
+  }
+
+  get minView() {
+    switch (this.granularity) {
+    case 'yearly': return 'years';
+    case 'quarterly': return 'years';
+    case 'monthly': return 'months';
+    case 'manual':
+    case 'weekly': return 'days';
+    }
+  }
+
+  focused = false;
+
+  tooltip = null;
+
+  blocks = {
+    yyyy: {
+      mask: IMask.MaskedRange,
+      from: 1970,
+      to: 2100,
+    },
+    MM: {
+      mask: IMask.MaskedRange,
+      from: 1,
+      to: 12,
+    },
+    dd: {
+      mask: IMask.MaskedRange,
+      from: 1,
+      to: 31,
+    },
+  };
+
+  get dateFormat() {
+    return this.displayFormat || ITFSettings.defaultDisplayDateFormat;
+  }
+
+  isInvalid() {
+    return this.itemLabel && this.itemLabel.isHasError();
+  }
+
+  isSuccess() {
+    return this.itemLabel && this.itemLabel.isHasSuccess();
+  }
+
+  mounted() {
+    // якщо в модалці, то контекст модалки, якщо ні, то аплікейшена
+    const context = this.$el.closest('.itf-append-context') || document.body;
+    this.tooltip = tippy(this.$refs.group, {
+      interactiveBorder: 30,
+      interactiveDebounce: 75,
+      animation: 'scale',
+      arrow: true,
+      content: this.$refs.dropdown,
+      allowHTML: true,
+      trigger: 'click',
+      interactive: true,
+      placement: this.placement,
+      appendTo: context
+    });
+  }
+
+  get valueAsLuxon() {
+    if (!this.value || this.value.length < 2 || !this.value[0] || !this.value[1]) {
+      return null;
+    }
+    if (this.valueFormat === 'ISO') {
+      return [
+        DateTime.fromISO(this.value[0]),
+        DateTime.fromISO(this.value[1]),
+      ];
+    }
+    return [
+      DateTime.fromFormat(this.value[0], this.valueFormat),
+      DateTime.fromFormat(this.value[1], this.valueFormat),
+    ];
+  }
+
+  get displayValue() {
+    if (!this.valueAsLuxon || this.valueAsLuxon.length < 2) {
+      return ['', ''];
+    }
+    return [
+      this.valueAsLuxon[0].toFormat(this.dateFormat),
+      this.valueAsLuxon[1].toFormat(this.dateFormat)
+    ];
+  }
+
+  get minDateLuxon() {
+    return this.minDate && this.dateLuxon(this.minDate);
+  }
+
+  get maxDateLuxon() {
+    return this.maxDate && this.dateLuxon(this.maxDate);
+  }
+
+  dateLuxon(date) {
+    return (typeof date === 'string' ? DateTime.fromISO(date) : DateTime.fromJSDate(date));
+  }
+
+  updateValue(value, index, emitEmpty = false) {
+    const val = value && DateTime.fromFormat(value, this.dateFormat);
+    if (!val || !val.isValid) {
+      if (emitEmpty) {
+        this.$emit('input', []);
+      }
+      return;
+    }
+    const current = [...(this.value || [])];
+    current[0] = current[0] || null;
+    current[1] = current[1] || null;
+    current[index] = (this.valueFormat === 'ISO') ? val.toISO() : val.toFormat(this.valueFormat);
+    if ((this.minDateLuxon && val < this.minDateLuxon) ||
+      (this.maxDateLuxon && val > this.maxDateLuxon)
+    ) {
+      return;
+    }
+    this.$emit('input', [...current, this.granularity]);
+  }
+
+  format(date) {
+    return DateTime.fromJSDate(date).toFormat(this.dateFormat);
+  }
+
+  parse(str) {
+    return DateTime.fromFormat(str, this.dateFormat).toJSDate();
+  }
+
+  onFocus() {
+    this.focused = true;
+  }
+
+  onBlur(e, index) {
+    this.focused = false;
+    if (this.valueAsLuxon && this.valueAsLuxon[0] && this.valueAsLuxon[1] && this.valueAsLuxon[0] > this.valueAsLuxon[1]) {
+      if ((this.minDateLuxon && (this.valueAsLuxon[0] < this.minDateLuxon || this.valueAsLuxon[1] < this.minDateLuxon)) ||
+        (this.maxDateLuxon && (this.valueAsLuxon[0] > this.maxDateLuxon || this.valueAsLuxon[1] > this.maxDateLuxon))
+      ) {
+        return;
+      }
+      this.$emit('input', [this.value[0], this.value[1], this.granularity]);
+    }
+  }
+
+  selectInlineDate(date) {
+    this.$emit('input', [...date, this.granularity]);
+    this.tooltip.hide();
+  }
+}
+</script>

package/src/components/datepicker/DatePicker.vue

@@ -44,6 +44,7 @@
           :display-format="dateFormat"
           :value-format="valueFormat"
           :min-date="minDate"
+          :days-list="daysList"
           @input="selectInlineDate"
         ></itf-date-picker-inline>
       </div>
@@ -79,6 +80,7 @@ class itfDatePicker extends Vue {
   @Prop({ type: [Number, String], default: 300 }) delayInput;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
   @Prop({ type: String }) displayFormat;
+  @Prop({ type: Array }) daysList;
   @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: String, default: '' }) placeholder;

package/src/components/datepicker/DateRangePicker.vue

@@ -55,6 +55,7 @@
           :value-format="valueFormat"
           :min-date="minDate"
           :max-date="maxDate"
+          :days-list="daysList"
           @input="selectInlineDate"
         ></itf-date-range-picker-inline>
       </div>
@@ -82,10 +83,12 @@ import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 import itfDateRangePickerInline from './DateRangePickerInline.vue';
 import ITFSettings from '../../ITFSettings';
+import itfDatePickerInline from "@/components/datepicker/DatePickerInline.vue";
 
 export default @Component({
   name: 'itfDateRangePicker',
   components: {
+    itfDatePickerInline,
     itfIcon,
     itfButton,
     itfDateRangePickerInline,
@@ -98,6 +101,7 @@ class itfDateRangePicker extends Vue {
   @Prop({ default: () => ([]) }) value;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
   @Prop({ type: String }) displayFormat;
+  @Prop({ type: Array }) daysList;
   @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: Boolean, default: false }) clearable;

package/src/components/datepicker/DateRangePickerInline.vue

@@ -37,6 +37,7 @@ class itfDatePickerInline extends Vue {
   @Prop({ type: Object, default: () => ({}) }) customDays;
   @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop({ type:  [String, Date], default: '' }) maxDate;
+  @Prop({ type:  String, default: 'days' }) minView;
   @Prop({
     type: Array,
     default: function () {
@@ -61,6 +62,7 @@ class itfDatePickerInline extends Vue {
 
   @Watch('minDate')
   @Watch('maxDate')
+  @Watch('minView')
   async createCalendar() {
     if (this.calendar) {
       this.destroyCalendar();
@@ -88,6 +90,8 @@ class itfDatePickerInline extends Vue {
       altFieldDateFormat: this.valueFormat,
       minDate: this.minDate,
       maxDate: this.maxDate,
+      view: this.minView,
+      minView: this.minView,
       range: true,
       dynamicRange: true,
       toggleSelected: false,

package/src/components/modal/modalSrc.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from 'bootstrap/js/src/util/index'
+import { defineJQueryPlugin, getElement, isRTL, isVisible, reflow } from 'bootstrap/js/src/util/index'
 import EventHandler from 'bootstrap/js/src/dom/event-handler'
 import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 import ScrollBarHelper from 'bootstrap/js/src/util/scrollbar'
@@ -337,7 +337,7 @@ class Modal extends BaseComponent {
  */
 
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-  const target = getElementFromSelector(this)
+  const target = getElement(this)
 
   if (['A', 'AREA'].includes(this.tagName)) {
     event.preventDefault()

package/src/components/panels/PanelList.vue

@@ -258,8 +258,13 @@ export default class PanelList extends Vue {
       newPanel.isCloseable = false;
     }
     let newStack = [...this.panelsStack];
+    if (this.panels[type].permanentExpanded && newStack.length) {
+      for (const panel of newStack) {
+        panel.isCollapsed = true;
+      }
+    }
     let isAnimation = true;
-    if (openIndex) {
+    if (typeof openIndex !== 'undefined') {
       isAnimation = newStack.length === openIndex;
       newStack = newStack.slice(0, openIndex);
     }

package/src/components/table/Table2.vue

@@ -39,6 +39,8 @@
             :striped="striped"
             :expanded-ids="expandedIds"
             :css-property="cssProperty"
+            :sticky-header="stickyHeader"
+            :editable-property="editableProperty"
             :sorting.sync="_sorting"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
             @new="$emit('new', $event)"
@@ -86,6 +88,7 @@ class itfTable2 extends Vue {
   @Prop({ type: String, default: null }) idProperty;
   @Prop({ type: String, default: null }) cssProperty;
   @Prop({ type: String, default: null }) subrowsProperty;
+  @Prop({ type: String, default: null }) editableProperty;
   @Prop({ default: 45 }) indicatorWidth;
   @Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property'].includes(val) }) indicatorType;
   @Prop({ type: String, default: null }) stateName; // save state to storage
@@ -95,6 +98,7 @@ class itfTable2 extends Vue {
   @Prop({ type: Array, default: () => [] }) expandedIds;
   @Prop() currency;
   @Prop() currencies;
+  @Prop(Boolean) stickyHeader;
   @Prop(Boolean) addNewRows;
   @Prop(Boolean) columnSorting;
   @Prop(Boolean) columnResizing;

package/src/components/table/TableBody.vue

@@ -17,6 +17,7 @@
       :striped="striped"
       :expanded-all="expandedAll"
       :css-property="cssProperty"
+      :editable-property="editableProperty"
       @update:expanded-ids="$emit('update:expanded-ids', $event)"
       @row-click="$emit('row-click', $event)"
       @update="$emit('update', $event)"
@@ -186,6 +187,7 @@ class itfTableBody extends Vue {
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
+  @Prop() editableProperty;
   @Prop() selectedIds;
   @Prop() currency;
   @Prop() currencies;

package/src/components/table/TableGroup.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="itf-table-group table-small-row">
+  <div class="itf-table-group table-small-row" :class="{'no-indicator': indicatorType === 'none'}">
     <!-- Тут показується лінія при драг н дропі -->
     <!--div accept-group="tablegroups" class="preline">
       <div class="line"></div>
@@ -71,6 +71,7 @@
             :show-add-column="showAddColumn"
             :expanded-ids="expandedIds"
             :css-property="cssProperty"
+            :editable-property="editableProperty"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
           >
             <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -146,6 +147,12 @@
   //margin-top: 20px;
   //margin-bottom: 20px ;
 
+  &.no-indicator {
+    .shadow-area + .table-view-header-value, .table-item-inner {
+      border-left: 1px solid var(--itf-table-border-color);
+    }
+  }
+
   .preline {
     display: flex;
     align-items: center;
@@ -344,8 +351,10 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
+  @Prop() editableProperty;
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
+  @Prop(Boolean) stickyHeader;
   @Prop() indicatorWidth;
   @Prop() cssProperty;
   @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
@@ -386,10 +395,12 @@ class itfTableGroup extends Vue {
   }
 
   mounted() {
-    this.sticky = new Sticky(`.${this.stickyId}`, {
-      wrap: true,
-      stickyClass: 'sticky',
-    });
+    if (this.stickyHeader) {
+      this.sticky = new Sticky(`.${this.stickyId}`, {
+        wrap: true,
+        stickyClass: 'sticky',
+      });
+    }
   }
 
   selectSummary(method, index) {

package/src/components/table/TableHeader.vue

@@ -4,7 +4,7 @@
     <div ref="container" class="table-row-template">
       <div accept-group="items" class="table-view-body-space" v-dropzone="{ payload: 0 }"></div>
       <div class="shadow-area"></div>
-      <div class="table-view-header-value reserved sticky">
+      <div v-if="indicatorType !== 'none'" class="table-view-header-value reserved sticky">
         <itf-checkbox v-if="indicatorType !== 'none' && visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
       </div>
 

package/src/components/table/TableRows.vue

@@ -20,7 +20,7 @@
               </a>
             </div>
           </div>
-          <div class="indicator sticky">
+          <div v-if="indicatorType !== 'none'" class="indicator sticky">
             <div class="fill table-view-row-count" :class="{'on-rest': !noSelectAll}">
               <span v-if="indicatorType === 'order'">{{ (n + 1) }}</span>
               <span v-else-if="indicatorType === 'property'">{{ item[idProperty] }}</span>
@@ -54,9 +54,10 @@
                 :class="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
                 class="table-view-item-value d-flex h-100">
                 <slot :name="`column.${column.property}`" :toggle="() => $emit('toggle', item)" :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
-                  <template v-if="column.editable && editable">
+                  <template v-if="column.editable && editable && (!editableProperty || item[editableProperty])">
                     <slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
                       <itf-text-field class="w-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-text-field class="w-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
                       <itf-hours-field
                         class="w-100"
                         placeholder="00h 00m"
@@ -103,6 +104,8 @@
           :expanded-ids="expandedIds"
           :expanded-all="expandedAll"
           :css-property="cssProperty"
+          :editable-property="editableProperty"
+          @update="$emit('update', $event)"
           @toggle="$emit('toggle', $event)"
         >
           <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -153,6 +156,7 @@ class itfTableRows extends Vue {
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
+  @Prop() editableProperty;
   @Prop() selectedIds;
   @Prop() expandedIds;
   @Prop() currency;
@@ -180,6 +184,7 @@ class itfTableRows extends Vue {
       this.$emit('update', {
         index,
         item,
+        inputValue: value,
         value: newItem,
         column
       });

package/src/components/table/table2.scss

@@ -1,6 +1,7 @@
 :root {
   --itf-table-border-color: #e1e1e1;
   --itf-table-header-bg: #f8f8f8;
+  --itf-table-font-size: 1rem;
   --itf-table-selected-bg: #f0f0f0;
   --itf-table-alt-bg: #f9f9f9;
   //--itf-table-border-color: #e1e1e1;
@@ -37,6 +38,8 @@ body[data-theme="dark"] {
   --itf-table-summary-text: #82909d80;
 }
 .itf-table2 {
+  font-size: var(--itf-table-font-size);
+
   &.scrollable {
     -webkit-overflow-scrolling: touch;
     overflow: hidden scroll;

package/src/components/text-field/MoneyField.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-money-field" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
+  <div class="itf-money-field ph-no-capture" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
     <div :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
       <span class="itf-money-field__prepend" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
       <i-mask-component