@itfin/components 1.3.94 → 1.3.96

package/package.json

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

package/src/components/panels/Panel.vue

@@ -10,7 +10,7 @@
         <div class="b-panel__expand_text" v-text="title"></div>
       </a>
     </div>
-    <div v-if="!nocard" v-show="!collapsed" class="b-panel-header px-3 pt-3">
+    <div v-if="!nocard" v-show="!collapsed" class="b-panel-header px-3 pt-3 pb-2">
       <slot name="header">
         <div>
           <slot name="title">
@@ -146,6 +146,10 @@ class Panel extends Vue {
   @Prop(Boolean) animate;
   @Prop(Boolean) nocard;
 
+  openPanel(...args) {
+    this.$emit('open', args);
+  }
+
   expandPanel() {
     this.$emit('expand');
   }

package/src/components/panels/PanelItemEdit.vue

@@ -0,0 +1,61 @@
+<template>
+  <div v-loading="loading" class="px-3 pt-2 h-100">
+    <itf-form
+      ref="editForm"
+      class="d-flex flex-column justify-content-between h-100"
+      @keydown.native.shift.enter.stop.prevent="onSaveClick"
+      @keydown.native.esc.stop.prevent="$emit('cancel')"
+    >
+      <slot></slot>
+      <div class="py-3 justify-content-end d-flex align-items-center sticky-container">
+        <div>
+          <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
+            <span>{{ $t('components.modal.cancel') }}</span>
+          </itf-button>
+          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
+            <span>{{ $t('components.modal.save') }}</span>
+          </itf-button>
+        </div>
+      </div>
+    </itf-form>
+  </div>
+</template>
+<style lang="scss" scoped>
+.sticky-container {
+  position: sticky;
+  top: auto;
+  bottom: 0;
+  z-index: 999;
+  background-color: var(--bs-body-bg);
+}
+</style>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import tooltip from '../../directives/tooltip';
+import loading from '../../directives/loading';
+import itfForm from '../form/Form.vue';
+import itfButton from '../button/Button.vue';
+
+@Component({
+  components: {
+    itfForm,
+    itfButton
+  },
+  directives: {
+    tooltip,
+    loading
+  },
+  filters: {
+  }
+})
+export default class PanelItemEdit extends Vue {
+  @Prop(Boolean) loading;
+
+  onSaveClick() {
+    if (this.$refs.editForm && !this.$refs.editForm.doValidation()) {
+      return;
+    }
+    this.$emit('save');
+  }
+}
+</script>

package/src/components/panels/PanelList.vue

@@ -19,6 +19,7 @@
           :collapsed="panel.isCollapsed"
           :closeable="panel.isCloseable"
           :animate="panel.isAnimate"
+          @open="openPanel($event[0], $event[1], n + 1)"
           @expand="expandPanel(panel)"
           @fullsize="fullsizePanel(panel)"
           @close="closePanel(panel)"
@@ -162,6 +163,7 @@ export interface IPanel {
   nocard?: boolean;
   isCollapsed: boolean;
   isCloseable: boolean;
+  isAnimate: boolean;
   open: (type: string, visOptions: VisualOptions, payload: any) => void;
   close: () => void;
   expand: () => void;

package/src/components/select/Select.vue

@@ -632,7 +632,7 @@ export default {
       default(dropdownList, component, { width, top, left }) {
         dropdownList.style.top = top
         dropdownList.style.left = left
-        dropdownList.style.minWidth = width
+        dropdownList.style.minWidth = width;
         dropdownList.style.width = 'max-content';
       },
     },

package/src/components/table/TableRows.vue

@@ -21,7 +21,7 @@
             </div>
           </div>
           <div v-if="indicatorType !== 'none'" class="indicator sticky">
-            <div class="fill table-view-row-count" :class="{'on-rest': indicatorType !== 'checkbox'}">
+            <div class="fill table-view-row-count" :class="{'on-rest': indicatorType !== 'checkbox' && indicatorType !== 'toggle'}">
               <span v-if="indicatorType === 'order'">{{ (n + 1) }}</span>
               <span v-else-if="indicatorType === 'property'">{{ item[idProperty] }}</span>
               <a href="" @click.prevent.stop="$emit('toggle', item)" v-else-if="indicatorType === 'toggle'">
@@ -41,7 +41,7 @@
                 </template>
               </a>
             </div>
-            <div class="fill" :class="{'on-hover': indicatorType !== 'checkbox'}">
+            <div v-if="indicatorType !== 'toggle'" class="fill" :class="{'on-hover': indicatorType !== 'checkbox'}">
               <itf-checkbox :value="item[idProperty]" />
             </div>
           </div>

package/src/components/table/table2.scss

@@ -42,11 +42,12 @@ body[data-theme="dark"] {
 .itf-table2 {
   font-size: var(--itf-table-font-size);
 
-  &.scrollable {
+  .scrollable {
     -webkit-overflow-scrolling: touch;
     overflow: hidden scroll;
+    height: 100%;
   }
-  &.scrollable-x {
+  .scrollable-x {
     overflow-x: scroll;
     padding-right: 4px;
   }
@@ -275,8 +276,7 @@ body[data-theme="dark"] {
     }
   }
 
-
-  &:hover {
+  &:hover, &.permanent-editable-border {
     .table-view-item-value.editable {
       .form-control {
         border: 1px solid var(--itf-table-input-border-color);
@@ -295,7 +295,6 @@ body[data-theme="dark"] {
       border-right: 1px solid var(--bs-border-color);
       border-bottom: 1px solid var(--bs-border-color);
     }
-
     &.editable {
       padding: 2px;
 

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

@@ -1,11 +1,11 @@
 <template>
   <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`">
+    <div class="h-100" :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
         ref="input"
         v-bind="mask"
-        class="form-control"
+        class="form-control h-100"
         :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
         @input="setValue"
         :value="maskedValue"