@itfin/components 1.2.99 → 1.2.101

package/package.json

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

package/src/components/app/ToastContainer.vue

@@ -2,7 +2,7 @@
   <transition name="itf-toast-fade" mode="in-out">
     <div
       v-show="show"
-      class="itf-toast-wrapper"
+      class="itf-toast-wrapper d-print-none"
       :style="{ width }"
       :class="wrapperClassName"
     >

package/src/components/app/ToastMessage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-toast-message toast" :class="{'show': visible, [typeClass]: true}" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="itf-toast-message toast d-print-none" :class="{'show': visible, [typeClass]: true}" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header" v-if="title || $slots.title" :class="{[typeClass]: true}">
       <template v-if="iconImg || $slots.icon">
         <img v-if="iconImg" :src="iconImg" class="rounded me-2" />

package/src/components/kanban/Board.vue

@@ -66,7 +66,6 @@ import loading from '../../directives/loading';
 import itfForm from '../form/Form';
 import itfEditButton from '../editable/EditButton.vue';
 import createDraggable from '../sortable/draggable';
-import { debounce } from '../../helpers/debounce';
 
 const { Node, ...draggableDirectives } = createDraggable();
 
@@ -101,7 +100,6 @@ class Board extends Vue {
   }
 
   mounted() {
-    this.itemStatusChanged = debounce(this.emitItemStatusChanged, 10);
     if (this.columnSorting) {
       Node.addContainer(this.$refs.container);
     }
@@ -188,43 +186,36 @@ class Board extends Vue {
 
     items[itemIndex] = newItem;
 
-    this.lastUpdatedIndex = typeof this.lastUpdatedIndex === 'undefined' ? toIndex : this.lastUpdatedIndex; // запамятовуємо індекс, бо виклики може бути два, коли колонка і карточка обробляє
-    this.itemStatusChanged(items[itemIndex], column, items, () => {
-      const toIndex = this.lastUpdatedIndex; // беремо індекс з пам'яті, бо викликів може бути два, але індекс тільки в картці, якщо нема, то це колонка
-      this.lastUpdatedIndex = undefined; // обнуляємо, щоб при наступному перетягувані вже не брало його
-      const newOrders = [...this.columnOrders];
-      let sorting = newOrders.find((c) => c.Id === column.Id);
-      if (!sorting) {
-        sorting = { Id: column.Id, ItemIds: [] };
-        newOrders.push(sorting)
-      }
-      let fromSorting = newOrders.find((c) => c.Id === fromColumn.Id);
-      if (!fromSorting) {
-        fromSorting = { Id: fromColumn.Id, ItemIds: [] };
-        newOrders.push(fromSorting)
-      }
-      // update from
-      fromSorting.ItemIds = this.groupedItems[fromColumn.Id].map((i) => i.Id).filter((t) => t !== newItem.Id);
-
-      // update to
-      const items = [...this.groupedItems[column.Id]];
-      let placeIndex = last ? items.length : toIndex;
-      if (typeof placeIndex === 'undefined') { // ідекса може не бути, якщо на колонку переносять, тоді в кінець
-        placeIndex = items.length;
-      }
-      const itemsInColumn = items.map((t) => t.Id).filter((t) => t !== newItem.Id);
-      itemsInColumn.splice(placeIndex, 0, newItem.Id);
+    const newOrders = [...this.columnOrders];
 
-      sorting.ItemIds = itemsInColumn;
-      this.$emit('update:columnOrders', newOrders);
-    });
-  }
+    let sorting = newOrders.find((c) => c.Id === column.Id);
+    if (!sorting) {
+      sorting = { Id: column.Id, ItemIds: [] };
+      newOrders.push(sorting)
+    }
+    let fromSorting = newOrders.find((c) => c.Id === fromColumn.Id);
+    if (!fromSorting) {
+      fromSorting = { Id: fromColumn.Id, ItemIds: [] };
+      newOrders.push(fromSorting)
+    }
+    // update from
+    fromSorting.ItemIds = this.groupedItems[fromColumn.Id].map((i) => i.Id).filter((t) => t !== newItem.Id);
+
+    // update to
+    const columnItems = [...this.groupedItems[column.Id]];
+    let placeIndex = last ? columnItems.length : toIndex;
+    if (typeof placeIndex === 'undefined') { // ідекса може не бути, якщо на колонку переносять, тоді в кінець
+      placeIndex = columnItems.length;
+    }
+    const itemsInColumn = columnItems.map((t) => t.Id).filter((t) => t !== newItem.Id);
+    itemsInColumn.splice(placeIndex, 0, newItem.Id);
 
-  emitItemStatusChanged(item, column, items, updateOrder) {
-    updateOrder();
+    sorting.ItemIds = itemsInColumn;
 
     this.$emit('update:item', [item, column]);
     this.$emit('update:items', items);
+
+    this.$emit('update:columnOrders', newOrders);
   }
 }
 </script>

package/src/components/kanban/BoardColumn.vue

@@ -1,18 +1,12 @@
 <template>
   <div class="itf-board-column-wrapper">
-    <itf-button block small class="text-muted">
+    <itf-button v-if="showAddButton" block small class="text-muted">
       <itf-icon name="plus" />
 
       Add entry
     </itf-button>
 
-    <div class="itf-board-cards-wrapper"
-         ref="container"
-         accept-group="board-cards"
-         @enter="cardHighlight(0, 'enter', 'drop')"
-         @leave="cardHighlight(0, 'leave', 'drop')"
-         v-dropzone="{ payload: { column } }"
-    >
+    <div class="itf-board-cards-wrapper" ref="container">
       <template v-if="!items.length">
         <slot name="empty"></slot>
       </template>
@@ -81,6 +75,7 @@ class BoardColumn extends Vue {
   @Prop() title;
   @Prop() column;
   @Prop(Array) items;
+  @Prop(Boolean) showAddButton;
   @Prop(Boolean) cardSorting;
 
   beforeDestroy() {

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

@@ -17,7 +17,7 @@ storiesOf('Common', module)
       itfBoardCardTimer
     },
     data() {
-      document.body.setAttribute('data-theme', 'dark')
+      // document.body.setAttribute('data-theme', 'dark')
       return {
         columnOrders: [],
         columns: [

package/src/components/kanban/styles.scss

@@ -1,5 +1,5 @@
 :root {
-  --itf-board-column-hover-color: #f5f9fe;
+  --itf-board-column-hover-color: rgba(0, 0, 0, .05);
   --itf-board-column-width: 300px;
   --itf-board-placeholder-color: #47BEFF;
   --itf-board-placeholder-border-color: #0567eb;
@@ -13,11 +13,13 @@
   --itf-board-placeholder-border-color: #FFCC00;
   --itf-board-placeholder-bg-color: #383b41;
   --itf-board-card-bg-color: #313337;
+
+  .itf-board {
+    --bs-border-color: #424448;
+  }
 }
 
 .itf-board {
-  --bs-border-color: #424448;
-
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
@@ -106,6 +108,7 @@
   .itf-board-column {
     position: relative;
     width: var(--itf-board-column-width);
+    min-width: var(--itf-board-column-width);
     border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
 
     &__title {

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

@@ -0,0 +1,50 @@
+<template>
+
+  <itf-text-field
+    ref="input"
+    v-bind="$props"
+    @input="onValueChange"
+  />
+
+</template>
+<script>
+import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
+import itfTextField from './TextField.vue';
+import {parseHours} from "@/helpers/formatters";
+
+export default @Component({
+  name: 'itfHoursField',
+  components: {
+    itfTextField
+  }
+})
+class itfHoursField extends Vue {
+  @Inject({ default: null }) itemLabel;
+  @Model('input') value;
+  @Prop() hours;
+  @Prop(String) prependIcon;
+  @Prop(String) placeholder;
+  @Prop() step;
+  @Prop() min;
+  @Prop() max;
+  @Prop(Boolean) clearable;
+  @Prop(Boolean) disabled;
+  @Prop(Boolean) readonly;
+  @Prop({ type: String, default: 'text' }) type;
+  @Prop({ type: [Number, String], default: 0 }) delayInput;
+
+  onValueChange(text) {
+    const hours = parseHours(text);
+    this.$emit('update:hours', hours);
+    this.$emit('input', text);
+  }
+
+  focus() {
+    this.$refs.input.focus();
+  }
+
+  blur() {
+    this.$refs.input.blur();
+  }
+}
+</script>

package/src/components/text-field/index.stories.js

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/vue';
 import itfMoneyField from './MoneyField.vue';
+import itfHoursField from './HoursField.vue';
 import itfForm from '../form/Form.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
@@ -14,7 +15,8 @@ storiesOf('Common', module)
       itfForm,
       itfButton,
       itfLabel,
-      itfMoneyField
+      itfMoneyField,
+      itfHoursField
     },
     data() {
       return {
@@ -25,6 +27,8 @@ storiesOf('Common', module)
           { Id: 4, Symbol: 'ERO', Code: 'EUR', Title: 'Euroooo' },
           { Id: 3, Symbol: ".د.ب", Code: 'AED', Title: 'Emirati Dirham' },
         ],
+        hoursStr: '10h 10m',
+        hours: 0,
         currency: null
       }
     },
@@ -43,11 +47,12 @@ storiesOf('Common', module)
 
       <itf-app ref="app">
 
-        {{value}}
-        {{currency}}
+        {{hours}}
 
         <itf-money-field v-model="value" :currencies="currencies" :currency.sync="currency" />
 
+        <itf-hours-field v-model="hoursStr" :hours.sync="hours" />
+
       </itf-app>
     </div>`,
   }));