@itfin/components 1.2.105 → 1.2.107

package/package.json

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

package/src/components/customize/PropertiesEditMenu.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="itf-append-context" style="min-width: 300px">
     <div class="d-flex align-items-center px-3 py-2">
-      <div class="me-1">
+      <!--div class="me-1">
         <itf-icon-popover title="Icon" removable :value="value.Icon" @input="setParam({ Icon: $event })">
           <itf-button slot="activator" icon>
             <itf-icon :name="value.Icon" />
           </itf-button>
         </itf-icon-popover>
-      </div>
+      </div-->
 
       <div class="flex-grow-1">
         <itf-text-field ref="input" :value="value.Name"  @input="setParam({ Name: $event })" />
@@ -29,7 +29,7 @@
         </li>
       </ul>
     </div>
-    <div v-if="value.Type === 'multiselect'">
+    <div v-if="isListType">
       <div class="d-flex justify-content-between pe-2">
         <h6 class="dropdown-header">{{ $t('components.customize.options') }}</h6>
         <div v-if="value.Options && value.Options.length">
@@ -63,21 +63,43 @@
         :read-only="false"
         auto-scroll="window"
       >
-        <div v-for="option of value.Options" class="dropdown-item d-flex justify-content-between">
-          <div>
-            <itf-icon sortable class="dragHandle" name="drag_vertical" />
-            <span>{{ option.Name }}</span>
+        <div v-for="(option, i) of value.Options" :key="`options${i}`">
+          <div class="dropdown-item d-flex justify-content-between">
+            <div>
+              <itf-icon sortable class="dragHandle" name="drag_vertical" />
+              <span>{{ option.Name }}</span>
+            </div>
+            <span class="text-muted">></span>
           </div>
-          <span class="text-muted">></span>
+          <ul class="itf-dropdown__menu shadow dropdown-menu dropdown-submenu">
+            <!--li class="p-2">
+              <itf-text-field
+                ref="newOptionName"
+                :value="option.Name"
+                placeholder="Option name..."
+                @blur="onBlurOption"
+                @keydown.enter="submitNewOption"
+              />
+            </li-->
+            <div>
+              <itf-delete-confirm-modal @delete="removeItem(option)">
+                <template #activator="{ on }">
+                  <a class="dropdown-item text-danger align-items-center d-flex" @click.prevent="on.click"><itf-icon name="trash" class="me-1" /> {{ $t('components.customize.deleteItem') }}</a>
+                </template>
+                <h5 class="mb-0">{{$t('components.popover.confirmDelete')}}</h5>
+                <p class="mb-0">{{ $t('components.customize.areYouSureYouWantToDeleteThisItem') }}</p>
+              </itf-delete-confirm-modal>
+            </div>
+          </ul>
         </div>
       </sortable>
     </div>
     <div><hr class="dropdown-divider"></div>
     <div><a class="dropdown-item" @click.prevent="$emit('duplicate')"><itf-icon name="duplicate" /> {{ $t('components.customize.duplicateProperty') }}</a></div>
     <div>
-      <itf-delete-confirm-modal class="me-1" @delete="$emit('delete')">
+      <itf-delete-confirm-modal @delete="$emit('delete')">
         <template #activator="{ on }">
-          <a class="dropdown-item text-danger" @click.prevent="on.click"><itf-icon name="trash" /> {{ $t('components.customize.deleteProperty') }}</a>
+          <a class="dropdown-item text-danger align-items-center d-flex" @click.prevent="on.click"><itf-icon name="trash" class="me-1" /> {{ $t('components.customize.deleteProperty') }}</a>
         </template>
         <h5 class="mb-0">{{$t('components.popover.confirmDelete')}}</h5>
         <p class="mb-0">{{ $t('components.customize.areYouSureYouWantToDeleteThisField') }}</p>
@@ -125,6 +147,10 @@ class PropertiesEditMenu extends Vue {
     return type ? type.Name : '';
   }
 
+  get isListType() {
+    return ['select', 'multiselect'].includes(this.value.Type);
+  }
+
   mounted() {
     this.$nextTick(() => {
       this.$refs.input.focus();
@@ -140,12 +166,18 @@ class PropertiesEditMenu extends Vue {
   }
 
   addNewOption() {
+    this.newOption = '';
     this.isNewOptionVisible = true;
     this.$nextTick(() => {
       this.$refs.newOptionInput.focus();
     });
   }
 
+  removeItem(option) {
+    const newOptions = this.value.Options.filter((item) => item !== option);
+    this.setParam({ Options: newOptions });
+  }
+
   submitNewOption() {
     const newOption = this.newOption;
     if (newOption) {

package/src/components/customize/PropertiesList.vue

@@ -7,23 +7,25 @@
       :read-only="!editable"
       auto-scroll="window"
     >
-      <property-item
-        v-for="(field, n) of list"
-        :key="n"
-        ref="properties"
-        :field="field"
-        :editable="editable"
-        :lock-fields="lockFields"
-        :value="value[field.Id]"
-        @input="$emit('input', { ...value, [field.Id]: $event })"
-        @delete="onDelete(field)"
-        @duplicate="onDuplicate(field)"
-        @update:field="onChange($event, n)"
-      />
+      <template v-for="(field, n) of listToHide">
+        <property-item
+          v-if="field.isVisible || isShowAll"
+          :key="n"
+          ref="properties"
+          :field="field"
+          :editable="editable"
+          :lock-fields="lockFields"
+          :value="value[field.Id]"
+          @input="$emit('input', { ...value, [field.Id]: $event })"
+          @delete="onDelete(field)"
+          @duplicate="onDuplicate(field)"
+          @update:field="onChange($event, n)"
+        />
+      </template>
     </sortable>
 
     <div v-if="editable && !lockFields" class="text-start">
-      <div v-if="isShowAll">
+      <div v-if="isShowAll || !hiddenItemsCount">
         <itf-dropdown ref="newItemDd" autoclose="outside" class="flex-grow-1 mw-100" shadow :button-options="{ small: true }">
           <template #button>
             <span class="text-muted d-flex align-items-center">
@@ -41,9 +43,9 @@
         </itf-dropdown>
       </div>
 
-      <itf-button small class="text-muted" @click="toggleShowAll">
+      <itf-button v-if="hiddenItemsCount" small class="text-muted" @click="toggleShowAll">
         <itf-icon :name="isShowAll ? 'chevron_up' : 'chevron_down'" />
-        {{isShowAll ? $tc('components.customize.hideMoreProperties', 1, { n: 1 }) : $tc('components.customize.showMoreProperties', 1, { n: 1 })}}
+        {{isShowAll ? $tc('components.customize.hideMoreProperties', hiddenItemsCount, { n: hiddenItemsCount }) : $tc('components.customize.showMoreProperties', hiddenItemsCount, { n: hiddenItemsCount })}}
       </itf-button>
     </div>
   </div>
@@ -113,6 +115,29 @@ class itfPropertiesList extends Vue {
     return INLINE_TYPES;
   }
 
+  get hiddenItemsCount() {
+    return this.listToHide.filter((item) => !item.isVisible).length;
+  }
+
+  get listToHide() {
+    return this.list.map((item) => {
+      return {
+        ...item,
+        isVisible: this.isVisible(item)
+      }
+    });
+  }
+
+  isVisible(field) {
+    if (field.Visible === 'show') {
+      return true;
+    }
+    if (field.Visible === 'hide') {
+      return false;
+    }
+    return !!this.value[field.Id];
+  }
+
   onChange(item, index) {
     const list = [...this.list];
     list[index] = item;

package/src/components/customize/PropertiesPopupMenu.vue

@@ -2,6 +2,7 @@
   <div>
     <div>
       <div><a class="dropdown-item" @click.prevent="$emit('edit')"><itf-icon name="pen" /> {{ $t('components.customize.editProperty') }}</a></div>
+      <div><hr class="dropdown-divider"></div>
       <div>
         <a class="dropdown-item" @click.prevent><itf-icon name="eye_no" /> {{ $t('components.customize.hideProperty') }}</a>
         <ul class="itf-dropdown__menu shadow dropdown-menu dropdown-submenu">

package/src/components/customize/PropertyItem.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="b-properties-list__inner">
-    <div class="b-properties-list__name" :class="{'editable': editable}">
+    <div class="b-properties-list__name" :class="{'editable': editable && !lockFields}">
       <div class="b-properties-list__icon">
         <div v-if="editable && !lockFields" role="button" tabindex="-1" class="b-properties-list__draghandler" sortable>
           <itf-icon class="dragHandle" name="drag_vertical" />
         </div>
       </div>
 
-      <itf-dropdown :disabled="!editable || lockFields" ref="editDd" autoclose="outside" class="flex-grow-1 mw-100" shadow :button-options="{ icon: true, block: true }" @close="onClose">
-        <template #button>
+      <itf-dropdown text :disabled="!editable || lockFields" ref="editDd" autoclose="outside" class="flex-grow-1 mw-100 editable-field" shadow @close="onClose">
+        <div slot="button">
           <div class="d-flex align-items-center">
-            <itf-icon :name="field.Icon" :size="16" class="me-1" />
+<!--            <itf-icon :name="field.Icon" :size="16" class="me-1" />-->
 
             <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="field.Name" />
           </div>
-        </template>
+        </div>
         <properties-edit-menu
           v-if="isEditMode"
           :value="field"
@@ -39,7 +39,7 @@
       <property-inline-edit
         @focus="onFocus(field.Id)"
         @blur="onBlur(field.Id)"
-        class="flex-grow-1 b-properties-list__inline-editor"
+        class="flex-grow-1 b-properties-list__inline-editor editable-field"
         :field="field"
         :value="value"
         :editable="editable"
@@ -51,6 +51,17 @@
 </template>
 <style lang="scss">
 .b-properties-list {
+  .editable .editable-field {
+    &.dropdown {
+      min-height: 24px;
+      padding: 5px;
+      font-size: 14px;
+      color: rgba(55, 53, 47, 0.65);
+    }
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+  }
   &__draghandler {
     user-select: none;
     transition: opacity 150ms ease-in 0s;

package/src/components/kanban/Board.vue

@@ -40,8 +40,8 @@
         </div>
       </div>
       <div class="align-items-end d-flex pb-1">
-        <slot name="add-column" @click="$emit('addColumn')">
-          <itf-button icon small>
+        <slot name="add-column">
+          <itf-button icon small @click="$emit('add-сolumn')">
             <itf-icon name="plus" />
           </itf-button>
         </slot>

package/src/components/kanban/BoardColumn.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="itf-board-column-wrapper">
-    <itf-button v-if="showAddButton" block small class="text-muted">
+    <div v-if="isNewOptionVisible">
+      <itf-text-field
+        style="margin: -4px 0"
+        ref="newOptionInput"
+        v-model="newOption"
+        :placeholder="newItemPlaceholder"
+        @blur="onBlurOption"
+        @keydown.enter="submitNewOption"
+      />
+    </div>
+    <itf-button v-else-if="showAddButton" :loading="loading" block small class="text-muted" @click="addNewOption">
       <itf-icon name="plus" />
-
-      Add entry
+      {{ newItemText }}
     </itf-button>
 
     <div class="itf-board-cards-wrapper" ref="container">
@@ -43,6 +52,7 @@ import itfButton from '../button/Button';
 import loading from '../../directives/loading';
 import itfForm from '../form/Form';
 import itfEditButton from '../editable/EditButton';
+import itfTextField from '../text-field/TextField.vue';
 import createDraggable from '../sortable/draggable';
 
 const { Node, ...draggableDirectives } = createDraggable({
@@ -59,6 +69,7 @@ const { Node, ...draggableDirectives } = createDraggable({
 
 export default @Component({
   components: {
+    itfTextField,
     itfIcon,
     itfForm,
     itfEditButton,
@@ -77,6 +88,12 @@ class BoardColumn extends Vue {
   @Prop(Array) items;
   @Prop(Boolean) showAddButton;
   @Prop(Boolean) cardSorting;
+  @Prop(Boolean) loading;
+  @Prop({ type: String, default: 'Add new task' }) newItemText;
+  @Prop({ type: String, default: 'Type a new task...' }) newItemPlaceholder;
+
+  isNewOptionVisible = false;
+  newOption = '';
 
   beforeDestroy() {
     if (this.cardSorting) {
@@ -107,5 +124,26 @@ class BoardColumn extends Vue {
       }
     });
   }
+
+  onBlurOption() {
+    this.isNewOptionVisible = false;
+  }
+
+  addNewOption() {
+    this.newOption = '';
+    this.isNewOptionVisible = true;
+    this.$nextTick(() => {
+      this.$refs.newOptionInput.focus();
+    });
+  }
+
+  submitNewOption() {
+    const newOption = this.newOption;
+    if (newOption) {
+      this.$emit('create', newOption);
+      this.newOption = '';
+      this.isNewOptionVisible = false;
+    }
+  }
 }
 </script>

package/src/locales/en.js

@@ -91,5 +91,7 @@ module.exports = {
     addOption: 'Add an option',
     showMoreProperties: '{n} more property|{n} more properties',
     hideMoreProperties: 'Hide {n} property|Hide {n} properties',
+    deleteItem: 'Delete',
+    areYouSureYouWantToDeleteThisItem: 'Are you sure you want to remove this option?',
   }
 };

package/src/locales/uk.js

@@ -91,5 +91,7 @@ module.exports = {
     addOption: 'Додати опцію',
     showMoreProperties: 'Ще {n} поле|Ще {n} полів',
     hideMoreProperties: 'Приховати {n} поле|Приховати {n} полів',
+    deleteItem: 'Видалити',
+    areYouSureYouWantToDeleteThisItem: 'Ви впевнені, що хочете видалити цю опцію?',
   }
 };