@itfin/components 1.3.96 → 1.3.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.96",
+  "version": "1.3.98",
   "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 pb-2">
+    <div v-if="!nocard" v-show="!collapsed" class="b-panel-header px-3 pt-3">
       <slot name="header">
         <div>
           <slot name="title">

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/Table2.vue

@@ -53,6 +53,7 @@
             :editable-property="editableProperty"
             :sorting.sync="_sorting"
             :active="active"
+            :sort-as-string="sortAsString"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
             @new="$emit('new', $event)"
             @add-column="$emit('add-column', $event)"
@@ -113,6 +114,7 @@ class itfTable2 extends Vue {
   @Prop({ type: Array, default: () => [] }) expandedIds;
   @Prop() currency;
   @Prop() currencies;
+  @Prop(Boolean) sortAsString;
   @Prop(Boolean) stickyHeader;
   @Prop(Boolean) addNewRows;
   @Prop(Boolean) columnSorting;

package/src/components/table/TableGroup.vue

@@ -42,6 +42,7 @@
             :rows="rows"
             :schema="schema"
             :editable="editable"
+            :sort-as-string="sortAsString"
             :no-column-menu="noColumnMenu"
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
@@ -361,6 +362,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
   @Prop(Boolean) stickyHeader;
+  @Prop(Boolean) sortAsString;
   @Prop() indicatorWidth;
   @Prop() cssProperty;
   @PropSync('sorting') _sorting;

package/src/components/table/TableHeader.vue

@@ -174,6 +174,7 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
+  @Prop(Boolean) sortAsString;
   @Prop() idProperty;
   @Prop() indicatorType;
 
@@ -359,8 +360,10 @@ class itfTableHeader extends Vue {
   }
 
   sortBy(column, order) {
-    let sort = order === 'desc' ? `-${column.property}` : column.property;
-    console.info(sort);
+    let sort = { [column.property]: order };
+    if (this.sortAsString) {
+      sort = order === 'desc' ? `-${column.property}` : column.property;
+    }
     this.$emit('update:sorting', sort);
   }
 }

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' && indicatorType !== 'toggle'}">
+            <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>
               <a href="" @click.prevent.stop="$emit('toggle', item)" v-else-if="indicatorType === 'toggle'">
@@ -41,7 +41,7 @@
                 </template>
               </a>
             </div>
-            <div v-if="indicatorType !== 'toggle'" class="fill" :class="{'on-hover': indicatorType !== 'checkbox'}">
+            <div v-if="!noSelectAll" class="fill on-hover">
               <itf-checkbox :value="item[idProperty]" />
             </div>
           </div>

package/src/components/table/table2.scss

@@ -276,7 +276,8 @@ body[data-theme="dark"] {
     }
   }
 
-  &:hover, &.permanent-editable-border {
+
+  &:hover {
     .table-view-item-value.editable {
       .form-control {
         border: 1px solid var(--itf-table-input-border-color);
@@ -295,6 +296,7 @@ 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

@@ -167,6 +167,10 @@ class itfMoneyField extends Vue {
   }
 
   setValue (val) {
+    if (val === '') {
+      this.$emit('input', null);
+      return;
+    }
     if (!isNumeric(val) || (val || '').toString().match(/\..*0$/)) { // що не видаляло останній нуль вкінці
       return;
     }

package/src/components/panels/PanelItemEdit.vue

@@ -1,61 +0,0 @@
-<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>