@itfin/components 1.3.35 → 1.3.36

package/package.json

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

package/src/assets/scss/icons.scss

@@ -1,6 +1,6 @@
 
 $bootstrap-icons-font: "bootstrap-icons" !default;
-$bootstrap-icons-font-dir: "../fonts" !default;
+$bootstrap-icons-font-dir: "/fonts" !default;
 $bootstrap-icons-font-file: "#{$bootstrap-icons-font-dir}/#{$bootstrap-icons-font}" !default;
 $bootstrap-icons-font-hash: "24e3eb84d0bcaf83d77f904c78ac1f47" !default;
 $bootstrap-icons-font-src: url("#{$bootstrap-icons-font-file}.woff2?#{$bootstrap-icons-font-hash}") format("woff2"),

package/src/components/dropdown/Dropdown.vue

@@ -24,6 +24,7 @@ class itfDropdown extends Vue {
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: Boolean }) text;
   @Prop({ type: Boolean }) appendToBody;
+  @Prop({ type: Boolean }) appendToContext;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
   @Prop({ type: Object, default: () => ({}) }) menuOptions;

package/src/components/dropdown/DropdownMenu.vue

@@ -22,6 +22,7 @@ class itfDropdownMenu extends Vue {
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: Boolean }) text;
   @Prop({ type: Boolean }) appendToBody;
+  @Prop({ type: Boolean }) appendToContext;
   @Prop({ type: String }) toggleId;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
@@ -39,10 +40,14 @@ class itfDropdownMenu extends Vue {
     const { default: Dropdown } = await import('bootstrap/js/src/dropdown.js');
     let context = document.body;
     this.modalEl = new Dropdown(toggle, {
-      reference: 'toggle',
+      reference: 'parent',
       autoClose: this.autoclose
     });
-    if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
+    if (this.appendToContext && this.$el instanceof Node && this.$el.parentNode) {
+      context = this.$el.closest('.itf-append-context') || document.body;
+      this.$el.parentNode.removeChild(this.$el);
+      context.appendChild(this.$el); // should append only to body
+    } else if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
       context.appendChild(this.$el); // should append only to body
     }

package/src/components/table/Table2.vue

@@ -6,6 +6,7 @@
         <div class="table-view-body">
           <itf-table-group
             :key="index"
+            @update="$emit('update', { ...$event, group, groupIndex: index })"
             :id-property="idProperty"
             :columns="columns"
             @update:columns="onColumnsUpdate"
@@ -75,6 +76,7 @@ import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableGroup from './TableGroup.vue';
 import itfTableHeader from './TableHeader.vue';
+import itfTableBody from "@/components/table/TableBody.vue";
 
 export default @Component({
   name: 'itfTable2',
@@ -82,6 +84,7 @@ export default @Component({
     return { tableEl: this }; // do not use Provide from vue-property-decorator
   },
   components: {
+    itfTableBody,
     itfCheckboxGroup,
     itfTableHeader,
     itfButton,

package/src/components/table/TableBody.vue

@@ -19,24 +19,28 @@
         </div>
         <div class="indicator sticky">
           <div class="fill on-rest table-view-row-count">
-<!--            <span>{{ item[idProperty] }}</span>-->
+            <!--            <span>{{ item[idProperty] }}</span>-->
           </div>
           <div class="fill on-hover">
             <itf-checkbox :value="item[idProperty]" />
           </div>
         </div>
         <div accept-group="items" class="table-item-inner">
-          <template v-for="(column, n) in visibleAttributes">
+          <template v-for="(column, k) in visibleAttributes">
             <div
               v-if="column.visible !== false"
-              :data-column="n"
+              :data-column="k"
               :style="`width: ${column.width}px; left: ${column.left}px;`"
-              :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow}"
+              :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow}"
               class="table-view-item-value d-flex h-100 align-items-stretch">
               <slot :name="`column.${column.name}`" :item="item" :column="column">
                 <template v-if="column.editable">
                   <slot :name="`edit.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
-                    <div class="px-1 py-1 w-100"><itf-text-field :value="getValue(item, column)" /></div>
+                    <div class="px-1 py-1 w-100">
+                      <itf-text-field v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n)" />
+                      <itf-textarea autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event)" />
+                      <itf-money-field v-else-if="column.type === 'money'" no-currency-sign currency-disabled :currency-select="false" :value="getValue(item, column)" @input="updateValue(item, $event)" />
+                    </div>
                   </slot>
                 </template>
                 <template v-else>
@@ -208,18 +212,21 @@
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import get from 'lodash/get';
-import { RecycleScroller } from 'vue-virtual-scroller'
+// import { RecycleScroller } from 'vue-virtual-scroller'
 import itfCheckbox from '../checkbox/Checkbox.vue';
 import itfTextField from '../text-field/TextField.vue';
-import { INLINE_TYPES } from '../customize/constants';
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+import itfMoneyField from '../text-field/MoneyField.vue';
+import itfTextarea from '../text-field/Textarea.vue';
+// import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({
   name: 'itfTableBody',
   components: {
     itfCheckbox,
+    itfMoneyField,
+    itfTextarea,
     itfTextField,
-    RecycleScroller
+    // RecycleScroller
   }
 })
 class itfTableBody extends Vue {
@@ -228,8 +235,6 @@ class itfTableBody extends Vue {
   @Prop() idProperty;
   @Prop(Boolean) showAddColumn;
 
-  editTypes = {};
-
   getValue(item, column) {
     return get(item, column.property);
   }
@@ -242,10 +247,8 @@ class itfTableBody extends Vue {
     return this.columns.findIndex((column) => column.lastPinned);
   }
 
-  mounted() {
-    for (const { Type } of INLINE_TYPES) {
-      this.editTypes[Type] = true;
-    }
+  updateValue(item, value, index) {
+    this.$emit('update', { index, item, value });
   }
 }
 </script>

package/src/components/table/TableGroup.vue

@@ -52,6 +52,7 @@
         <!-- Сама таблиця -->
         <div v-if="isShowTable">
           <itf-table-body
+            @update="$emit('update', $event)"
             :id-property="idProperty"
             :rows="rows"
             :columns="visibleColumns"
@@ -305,7 +306,7 @@ import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableBody from './TableBody.vue';
 import itfTableHeader from './TableHeader.vue';
-import Sticky from "@/components/table/sticky";
+import Sticky from "./sticky";
 
 export default @Component({
   name: 'itfTableGroup',

package/src/components/table/TableHeader.vue

@@ -85,7 +85,7 @@
         </div>
       </template>
       <div v-if="showAddColumn" class="table-view-header-value flex-grow-1 justify-content-start">
-        <itf-dropdown v-if="visibleHeader" ref="newDd" text append-to-body shadow autoclose="outside" class="table-header table-header-add-column" data-test="table-header-add-column">
+        <itf-dropdown v-if="visibleHeader" ref="newDd" text append-to-context shadow autoclose="outside" class="table-header table-header-add-column" data-test="table-header-add-column">
           <template #button>
             <span class="nom-layout-three-columns"></span>
           </template>

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

@@ -131,7 +131,7 @@ storiesOf('Common', module)
             {
               "property": "Description",
               "title": { "en_US": "Description", "uk_UA": "Прізвище" },
-              "type": "text",
+              "type": "textarea",
               "editable": true,
               "sortable": false,
               width: 200,

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

@@ -1,7 +1,7 @@
 <template>
   <div class="itf-money-field" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
-    <div :style="`--itf-money-field-padding-left: ${selectedCurrencySymbol.length * 0.6 + 1}rem`">
-      <span class="itf-money-field__prepend">{{ selectedCurrencySymbol }}</span>
+    <div :style="`--itf-money-field-padding-left: ${noCurrencySign ? 0 : 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"
@@ -93,6 +93,7 @@ class itfMoneyField extends Vue {
 
   @Model('input', { default: '' }) value;
   @Prop({ type: Object, default: null }) currency;
+  @Prop({ type: Boolean, default: false }) noCurrencySign;
   @Prop({ type: Boolean, default: false }) disabled;
   @Prop({ type: Boolean, default: true }) currencySelect;
   @Prop({ type: Array, default: () => ([]) }) currencies;

package/src/locales/en.js

@@ -1,5 +1,6 @@
 /* eslint-disable comma-dangle */
 module.exports = {
+  new: 'New',
   today: 'Today',
   tomorrow: 'Tomorrow',
   inAWeek: 'In a week',

package/src/locales/uk.js

@@ -1,5 +1,6 @@
 /* eslint-disable comma-dangle */
 module.exports = {
+  new: 'Додати',
   today: 'Сьогодні',
   tomorrow: 'Завтра',
   inAWeek: 'Через тиждень',