@itfin/components 1.2.86 → 1.2.88

package/package.json

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

package/src/assets/scss/components/_icon.scss

@@ -1,5 +1,7 @@
 @import '../variables';
 
 .itf-icon {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
 }

package/src/components/customize/Inline/Date.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="itf-inline-edit">
+    <div ref="input" class="input" :role="editable ? 'button' : 'textbox'" tabindex="1" @keydown.space="onEnter" @keydown.enter="onEnter" @focus="$emit('focus')" @blur="$emit('blur')">
+      <span v-if="value">{{ value | formatDate }}</span>
+      <span v-else class="text-muted">Empty</span>
+    </div>
+
+    <div style="display: none">
+      <div ref="dropdown" class="itf-datepicker__dropdown">
+        <itf-date-picker-inline
+          :value="value"
+          start-view="days"
+          display-format="MM/dd/yyyy"
+          value-format="yyyy-MM-dd"
+          @input="selectInlineDate"
+        ></itf-date-picker-inline>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.itf-inline-edit .input {
+  border: 0 none;
+  margin: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+}
+</style>
+<script>
+import {Vue, Component, Model, Watch, Prop} from 'vue-property-decorator';
+import itfTextField from '../../text-field/TextField.vue';
+import itfDatePickerInline from '../../datepicker/DatePickerInline.vue';
+import tippy from 'tippy.js';
+import { formatDate } from '../../../helpers/formatters';
+import PropertyInlineEdit from "@/components/customize/PropertyInlineEdit.vue";
+
+export default @Component({
+  name: 'itfCustomizeInlineDate',
+  components: {
+    PropertyInlineEdit,
+    itfTextField,
+    itfDatePickerInline
+  },
+  filters: {
+    formatDate
+  }
+})
+
+class itfCustomizeInlineText extends Vue {
+  @Model('input') value;
+  @Prop({ type: String, default: 'bottom-start' }) placement;
+  @Prop({ type: Boolean, default: false }) editable;
+
+  tooltip = null;
+
+  mounted() {
+    if (!this.editable) {
+      return;
+    }
+    const context = this.$el.closest('.itf-append-context') || document.body;
+    this.tooltip = tippy(this.$refs.input, {
+      interactiveBorder: 30,
+      interactiveDebounce: 75,
+      animation: 'scale',
+      arrow: true,
+      content: this.$refs.dropdown,
+      allowHTML: true,
+      trigger: 'click',
+      interactive: true,
+      placement: this.placement,
+      appendTo: context
+    });
+  }
+
+  selectInlineDate(date) {
+    this.$emit('input', date);
+    this.tooltip.hide();
+    this.isFocused = false;
+  }
+
+  onEnter() {
+    this.tooltip.show();
+  }
+}
+</script>

package/src/components/customize/Inline/Multiselect.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="itf-inline-edit">
+    <itf-select
+      ref="input"
+      class="input"
+      role="button"
+      multiple
+      :placeholder="focused ? 'Search for an option...' : 'Empty'"
+      :tabindex="1"
+      :disabled="!editable"
+      :options="field && field.Options"
+      :reduce="option => option.Name"
+      :get-option-label="option => option.Name"
+      @search:focus="$emit('focus')"
+      @search:blur="$emit('blur')">
+      <template #option="{ option }">
+        <div>{{ option.Name }}</div>
+      </template>
+    </itf-select>
+  </div>
+</template>
+<style lang="scss">
+.itf-inline-edit .itf-select .form-control {
+  border: 0 none;
+  margin: 0;
+  outline: 0;
+  resize: none;
+  min-height: auto;
+  padding: 0.1rem 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  box-shadow: none !important;
+  background: transparent !important;
+}
+</style>
+<script>
+import {Vue, Component, Model, Watch, Prop} from 'vue-property-decorator';
+import itfTextField from '../../text-field/TextField.vue';
+import itfSelect from '../../select/Select.vue';
+
+export default @Component({
+  name: 'itfCustomizeInlineMultiselect',
+  components: {
+    itfTextField,
+    itfSelect
+  }
+})
+
+class itfCustomizeInlineMultiselect extends Vue {
+  @Model('input') value;
+  @Prop(Boolean) focused;
+  @Prop(Boolean) editable;
+  @Prop() field;
+}
+</script>

package/src/components/customize/Inline/Text.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="itf-inline-edit">
+    <div
+      :role="editable ? 'button' : 'textbox'"
+      tabindex="1"
+      ref="input"
+      @focus="onFocus"
+      @blur="onBlur"
+      @keydown.enter="onEnter"
+      @keydown.esc="onCancel"
+      class="notranslate"
+      spellcheck="true"
+      placeholder=" "
+      :contenteditable="editable"
+      v-html="value">
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.itf-inline-edit {
+  margin: -5px;
+  padding: 5px;
+}
+.notranslate {
+  border: 0 none;
+  margin: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+  max-width: 100%;
+  width: 100%;
+  white-space: pre-wrap;
+  word-break: break-word;
+  caret-color: var(--bs-body-color);
+}
+</style>
+<script>
+import { Vue, Component, Model, Prop } from 'vue-property-decorator';
+import itfTextField from '../../text-field/TextField.vue';
+import PropertyInlineEdit from "@/components/customize/PropertyInlineEdit.vue";
+
+export default @Component({
+  name: 'itfCustomizeInlineText',
+  components: {
+    PropertyInlineEdit,
+    itfTextField
+  }
+})
+
+class itfCustomizeInlineText extends Vue {
+  @Model('input') value;
+  @Prop(Boolean) editable;
+
+  mounted() {
+    this.$refs.input.addEventListener('paste', function(e) {
+      // cancel paste
+      e.preventDefault();
+
+      // get text representation of clipboard
+      var text = (e.originalEvent || e).clipboardData.getData('text/plain');
+
+      // insert text manually
+      document.execCommand("insertHTML", false, text);
+    });
+  }
+
+  onEnter(event) {
+    if (event.shiftKey) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.$refs.input.blur();
+  }
+
+  onBlur() {
+    this.$emit('input', this.$refs.input.innerHTML);
+    this.$emit('blur');
+  }
+
+  onCancel(event) {
+    event.target.value = this.value;
+    this.$refs.input.blur();
+  }
+
+  onFocus() {
+    this.$emit('focus');
+  }
+}
+</script>

package/src/components/customize/PropertiesEditMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-append-context">
+  <div class="itf-append-context" style="min-width: 300px">
     <div class="d-flex align-items-center px-3 py-2">
       <div class="me-1">
         <itf-icon-popover title="Icon" removable :value="value.Icon" @input="setParam({ Icon: $event })">
@@ -10,20 +10,77 @@
       </div>
 
       <div class="flex-grow-1">
-        <itf-text-field :value="value.Name"  @input="setParam({ Name: $event })" />
+        <itf-text-field ref="input" :value="value.Name"  @input="setParam({ Name: $event })" />
       </div>
     </div>
     <div>
       <a class="dropdown-item d-flex justify-content-between" @click.prevent="$emit('edit')">
         <span>{{ $t('components.customize.type') }}</span>
-        <span class="text-muted">{{ $t('components.customize.select') }} ></span>
+        <span class="text-muted">{{ itemType }} ></span>
       </a>
+      <ul class="itf-dropdown__menu shadow dropdown-menu dropdown-submenu">
+        <li><h6 class="dropdown-header">{{ $t('components.customize.type') }}</h6></li>
+        <li v-for="(type) of types">
+          <a class="dropdown-item d-flex align-items-center" href="" @click.prevent="setParam({ Type: type.Type })">
+            <itf-icon :name="type.Icon" :size="16" class="me-1" />
+            <span v-text="type.Name"></span>
+            <itf-icon v-if="value.Type === type.Type" name="check" />
+          </a>
+        </li>
+      </ul>
     </div>
+    <div v-if="value.Type === 'multiselect'" sortable-skip>
+      <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">
+          <itf-button icon small @click.prevent="addNewOption">
+            <itf-icon name="plus" />
+          </itf-button>
+        </div>
+      </div>
+
+      <div v-if="isNewOptionVisible" class="px-3">
+        <itf-text-field
+          ref="newOptionInput"
+          v-model="newOption"
+          placeholder="Type a new option..."
+          @blur="onBlurOption"
+          @keydown.enter="submitNewOption"
+        />
+      </div>
+      <div v-else-if="!value.Options || !value.Options.length" class="px-3">
+        <itf-button small block class="text-start" @click="addNewOption">
+          <itf-icon name="plus" />
+          {{ $t('components.customize.addOption') }}
+        </itf-button>
+      </div>
+
+      <sortable
+        :value="value.Options"
+        @input="setParam({ Options: $event })"
+        axis="y"
+        require-sortable-attribute
+        auto-scroll="window"
+      >
+        <div v-for="option of value.Options" class="dropdown-item d-flex justify-content-between" sortable>
+          <div>
+            <itf-icon class="dragHandle" name="drag_vertical" />
+            <span>{{ option.Name }}</span>
+          </div>
+          <span class="text-muted">></span>
+        </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>
-      <a class="dropdown-item d-flex justify-content-between" @click.prevent="$emit('edit')">
-        <span>{{ $t('components.customize.numberFormat') }}</span>
-        <span class="text-muted">{{ $t('components.customize.money') }} ></span>
-      </a>
+      <itf-delete-confirm-modal class="me-1" @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>
+        </template>
+        <h5 class="mb-0">{{$t('components.popover.confirmDelete')}}</h5>
+        <p class="mb-0">{{ $t('components.customize.areYouSureYouWantToDeleteThisField') }}</p>
+      </itf-delete-confirm-modal>
     </div>
   </div>
 </template>
@@ -32,22 +89,67 @@ import { Vue, Component, Model } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
+import Sortable from '../sortable/Sortable';
 import itfIconPopover from '../popover/IconPopover.vue';
+import {INLINE_TYPES} from "@/components/customize/constants";
+import itfDeleteConfirmModal from "@/components/modal/DeleteConfirmModal.vue";
+import PropertyItem from "@/components/customize/PropertyItem.vue";
 
 export default @Component({
   components: {
+    PropertyItem,
+    itfDeleteConfirmModal,
     itfButton,
     itfIcon,
     itfTextField,
-    itfIconPopover
+    itfIconPopover,
+    Sortable
   }
 })
 
 class PropertiesEditMenu extends Vue {
   @Model('input') value;
 
+  isNewOptionVisible = false;
+  newOption = '';
+
+  get types() {
+    return INLINE_TYPES;
+  }
+
+  get itemType() {
+    const type = INLINE_TYPES.find((type) => type.Type === this.value.Type);
+    return type ? type.Name : '';
+  }
+
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.input.focus();
+    });
+  }
+
   setParam(obj) {
     this.$emit('input', { ...this.value, ...obj });
   }
+
+  onBlurOption() {
+    this.isNewOptionVisible = false;
+  }
+
+  addNewOption() {
+    this.isNewOptionVisible = true;
+    this.$nextTick(() => {
+      this.$refs.newOptionInput.focus();
+    });
+  }
+
+  submitNewOption() {
+    const newOption = this.newOption;
+    if (newOption) {
+      this.setParam({ Options: [{ Name: newOption }, ...(this.value.Options || [])] });
+      this.newOption = '';
+      this.isNewOptionVisible = false;
+    }
+  }
 }
 </script>

package/src/components/customize/PropertiesList.vue

@@ -4,55 +4,37 @@
       require-sortable-attribute
       v-model="list"
       axis="y"
+      :read-only="!editable"
       auto-scroll="window"
     >
-      <div v-for="(field, n) of list" :key="n" class="b-properties-list__inner">
-        <div class="b-properties-list__name">
-          <div class="b-properties-list__icon">
-            <div role="button" tabindex="-1" class="b-properties-list__draghandler" sortable>
-              <itf-icon class="dragHandle" name="drag_vertical" />
-            </div>
-          </div>
-
-          <itf-dropdown autoclose="outside" class="flex-grow-1" shadow :button-options="{ icon: true, block: true }" @close="onClose">
-            <template #button>
-              <div class="d-flex align-items-center">
-                <itf-icon :name="field.Icon" :size="24" class="me-1" />
-
-                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="field.Name" />
-              </div>
-            </template>
-            <properties-edit-menu
-              v-if="isEditMode"
-              sortable-skip
-              :value="field"
-              :loading="loading"
-              @input="onChange($event, n)"
-            />
-            <properties-popup-menu
-              v-else
-              sortable-skip
-              :field="field"
-              :loading="loading"
-              @edit="isEditMode = true"
-            />
-          </itf-dropdown>
-        </div>
-        <div class="b-properties-list__value" sortable-skip>
-          <div role="button" tabindex="1">
-            <property-inline-edit :value="value[field.Id]" @input="onValueSet(field, $event)" />
-            <span v-if="value && value[field.Id]">{{ value[field.Id] }}</span>
-            <span v-else class="text-muted"> ({{ $t('notSet') }})</span>
-          </div>
-        </div>
-      </div>
+      <property-item
+        v-for="(field, n) of list"
+        :key="n"
+        ref="properties"
+        :field="field"
+        :editable="editable"
+        :value="value[field.Id]"
+        @input="$emit('input', { ...value, [field.Id]: $event })"
+        @delete="onDelete(field)"
+        @duplicate="onDuplicate(field)"
+        @update:field="onChange($event, n)"
+      />
     </sortable>
 
-    <div class="text-start">
-      <itf-button class="text-muted" small>
-        <itf-icon name="plus" />
-        Add property
-      </itf-button>
+    <div v-if="editable" class="text-start">
+      <itf-dropdown ref="newItemDd" autoclose="outside" class="flex-grow-1 mw-100" shadow :button-options="{ class: 'text-muted', small: true }">
+        <template #button>
+          <itf-icon name="plus" />
+          Add property
+        </template>
+        <div><h6 class="dropdown-header">{{ $t('components.customize.type') }}</h6></div>
+        <div v-for="type of types" :keys="type.Type">
+          <a class="dropdown-item d-flex align-items-center" @click.prevent="createNewField(type)">
+            <itf-icon :name="type.Icon" :size="16" class="me-1" />
+            {{ type.Name }}
+          </a>
+        </div>
+      </itf-dropdown>
     </div>
   </div>
 </template>
@@ -79,55 +61,6 @@
   display: flex;
   flex-direction: column;
   padding: 5px 3px 5px 15px;
-
-  &__draghandler {
-    user-select: none;
-    transition: opacity 150ms ease-in 0s;
-    cursor: grab;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 24px;
-    opacity: 0;
-    border-radius: 3px;
-    fill: rgba(55, 53, 47, 0.35);
-  }
-  &__inner:hover &__draghandler {
-    opacity: 1;
-  }
-  &__inner {
-    display: flex;
-    padding-bottom: 4px;
-    width: 100%;
-  }
-  &__name, &__value {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    border-radius: 3px;
-    padding: 0 6px;
-  }
-  &__name {
-    display: flex;
-    align-items: center;
-    height: 34px;
-    width: 160px;
-    flex: 0 0 auto;
-  }
-  &__icon {
-    width: 22px;
-    margin-left: -22px;
-    opacity: 1;
-  }
-  &__value {
-    display: flex;
-    margin-left: 4px;
-    height: 100%;
-    min-width: 0;
-  }
 }
 </style>
 <script>
@@ -138,11 +71,11 @@ import itfDropdown from '../dropdown/Dropdown.vue';
 import itfLabel from '../form/Label.vue';
 import itfTextField from '../text-field/TextField.vue';
 import Sortable from '../sortable/Sortable';
-import PropertiesPopupMenu from './PropertiesPopupMenu.vue';
-import PropertiesEditMenu from './PropertiesEditMenu.vue';
-import PropertyInlineEdit from './PropertyInlineEdit.vue';
+import PropertyItem from './PropertyItem';
+import { INLINE_TYPES } from './constants';
 
 export default @Component({
+  name: 'itfPropertiesList',
   components: {
     itfIcon,
     itfDropdown,
@@ -150,20 +83,17 @@ export default @Component({
     itfLabel,
     itfButton,
     Sortable,
-    PropertiesPopupMenu,
-    PropertiesEditMenu,
-    PropertyInlineEdit
+    PropertyItem
   }
 })
 class itfPropertiesList extends Vue {
   @Model('input') value;
   @PropSync('fields') list;
   @Prop({ type: Boolean, default: false }) loading;
+  @Prop({ type: Boolean, default: false }) editable;
 
-  isEditMode = false;
-
-  onClose() {
-    this.isEditMode = false;
+  get types() {
+    return INLINE_TYPES;
   }
 
   onChange(item, index) {
@@ -172,8 +102,50 @@ class itfPropertiesList extends Vue {
     this.$emit('update:fields', list);
   }
 
-  onValueSet(item, value) {
-    this.$emit('input', { ...this.value, [item.Id]: value });
+  onDelete(item) {
+    const list = [...this.list].filter((i) => i.Id !== item.Id);
+    this.$emit('update:fields', list);
+  }
+
+  onDuplicate(item) {
+    const list = [...this.list];
+    const newItem = { ...item };
+    newItem.Id = `new-${Math.random().toString(36).substr(2, 9)}`;
+    const index = newItem.Name.match(/\((\d+)\)$/);
+    // додає вкінці номер (1), (2) і т.д.
+    newItem.Name = newItem.Name.replace(/\s\(\d+\)$/, '');
+    newItem.Name = `${newItem.Name}${index ? ` (${parseInt(index[1], 10) + 1})` : ' (1)'}`;
+    list.push(newItem);
+    this.$emit('update:fields', list);
+    this.$refs.newItemDd.hide();
+
+    this.$nextTick(() => {
+      for (const prop of this.$refs.properties) {
+        prop.hideEditMenu();
+      }
+      setTimeout(() => {
+        this.$refs.properties[list.length - 1].showEditMenu();
+      }, 10);
+    });
+  }
+
+  createNewField(type) {
+    const list = [...this.list];
+    list.push({
+      Id: `new-${Math.random().toString(36).substr(2, 9)}`,
+      Name: type.Name,
+      Type: type.Type,
+      Icon: type.Icon,
+      Visible: 'show'
+    });
+    this.$emit('update:fields', list);
+    this.$refs.newItemDd.hide();
+
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.$refs.properties[list.length - 1].showEditMenu();
+      }, 10);
+    });
   }
 }
 </script>

package/src/components/customize/PropertiesPopupMenu.vue

@@ -5,14 +5,14 @@
       <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">
-          <li><a class="dropdown-item" href="#">{{ $t('components.customize.alwaysShow') }}<itf-icon name="check" /></a></li>
-          <li><a class="dropdown-item" href="#">{{ $t('components.customize.hideWhenEmpty') }}</a></li>
-          <li><a class="dropdown-item" href="#">{{ $t('components.customize.alwaysHide') }}</a></li>
+          <li><a class="dropdown-item" href="" @click.prevent="$emit('visibility', 'show')">{{ $t('components.customize.alwaysShow') }}<itf-icon v-if="field.Visible === 'show'" name="check" /></a></li>
+          <li><a class="dropdown-item" href="" @click.prevent="$emit('visibility', 'filled')">{{ $t('components.customize.hideWhenEmpty') }}<itf-icon v-if="field.Visible === 'filled'" name="check" /></a></li>
+          <li><a class="dropdown-item" href="" @click.prevent="$emit('visibility', 'hide')">{{ $t('components.customize.alwaysHide') }}<itf-icon v-if="field.Visible === 'hide'" name="check" /></a></li>
         </ul>
       </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" :loading="loading" @delete="$emit('delete')">
+        <itf-delete-confirm-modal class="me-1" @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>
           </template>
@@ -42,5 +42,6 @@ export default @Component({
 })
 
 class PropertiesEditMenu extends Vue {
+  @Prop() field;
 }
 </script>

package/src/components/customize/PropertyInlineEdit.vue

@@ -1,46 +1,44 @@
 <template>
-  <div class="itf-inline-edit" :class="{'shadow': isFocused}">
-    <textarea @focus="onFocus" :value="value" @blur="onBlur"></textarea>
+  <div>
+    <component
+      v-if="component"
+      :is="component"
+      :value="value"
+      :field="field"
+      :focused="focused"
+      :editable="editable"
+      @input="$emit('input', $event)"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
+    />
   </div>
 </template>
-<style lang="scss">
-.itf-inline-edit {
-  textarea {
-    border: 0 none;
-    margin: 0;
-    outline: 0;
-    resize: none;
-  }
-}
-</style>
 <script>
-import { Vue, Component, Model, Watch } from 'vue-property-decorator';
-import itfTextField from '../text-field/TextField.vue';
+import { Vue, Component, Model, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
-import itfDeleteConfirmModal from '../modal/DeleteConfirmModal.vue';
+import { INLINE_TYPES } from './constants';
 
 export default @Component({
+  name: 'itfPropertyInlineEdit',
   components: {
-    itfButton,
     itfIcon,
-    itfTextField,
-    itfDeleteConfirmModal
+    itfButton,
   }
 })
 
-class PropertyInlineEdit extends Vue {
+class itfPropertyInlineEdit extends Vue {
   @Model('input') value;
+  @Prop() field;
+  @Prop(Boolean) focused;
+  @Prop(Boolean) editable;
 
-  isFocused = false;
-
-  onBlur(event) {
-    this.$emit('input', event.target.value);
-    this.isFocused = false;
-  }
-
-  onFocus() {
-    this.isFocused = true;
+  get component() {
+    if (!this.field) {
+      return null;
+    }
+    const type = INLINE_TYPES.find(({ Type }) => Type === this.field.Type);
+    return type ? type.Component : null;
   }
 }
 </script>

package/src/components/customize/PropertyItem.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="b-properties-list__inner">
+    <div class="b-properties-list__name" :class="{'editable': editable}">
+      <div class="b-properties-list__icon">
+        <div v-if="editable" role="button" tabindex="-1" class="b-properties-list__draghandler" sortable>
+          <itf-icon class="dragHandle" name="drag_vertical" />
+        </div>
+      </div>
+
+      <itf-dropdown :disabled="!editable" ref="editDd" autoclose="outside" class="flex-grow-1 mw-100" shadow :button-options="{ icon: true, block: true }" @close="onClose">
+        <template #button>
+          <div class="d-flex align-items-center">
+            <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>
+        <properties-edit-menu
+          v-if="isEditMode"
+          sortable-skip
+          :value="field"
+          :loading="loading"
+          @input="onChange($event)"
+          @delete="$emit('delete')"
+          @duplicate="$emit('duplicate')"
+        />
+        <properties-popup-menu
+          v-else
+          sortable-skip
+          :field="field"
+          :loading="loading"
+          @edit="isEditMode = true"
+          @delete="$emit('delete')"
+          @duplicate="$emit('duplicate')"
+          @customize="$emit('customize')"
+          @visibility="onVisibilityChange(field, $event)"
+        />
+      </itf-dropdown>
+    </div>
+    <div class="b-properties-list__value rounded-2" :class="{'editable': editable, 'active shadow rounded-2 bg-body': focusId === field.Id}" sortable-skip>
+      <property-inline-edit
+        @focus="onFocus(field.Id)"
+        @blur="onBlur(field.Id)"
+        class="flex-grow-1 b-properties-list__inline-editor"
+        :field="field"
+        :value="value"
+        :editable="editable"
+        :focused="focusId === field.Id"
+        @input="$emit('input', $event)"
+      />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.b-properties-list {
+  &__draghandler {
+    user-select: none;
+    transition: opacity 150ms ease-in 0s;
+    cursor: grab;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 24px;
+    opacity: 0;
+    border-radius: 3px;
+    fill: rgba(55, 53, 47, 0.35);
+  }
+  &__inner:hover &__draghandler {
+    opacity: 1;
+  }
+  &__inner {
+    display: flex;
+    padding-bottom: 4px;
+    width: 100%;
+  }
+  &__name, &__value {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    border-radius: 3px;
+    padding: 0 6px;
+
+    &.editable {
+      cursor: pointer;
+    }
+  }
+  &__name {
+    display: flex;
+    align-items: center;
+    height: 34px;
+    width: 250px;
+    flex: 0 0 auto;
+  }
+  &__icon {
+    width: 22px;
+    margin-left: -22px;
+    opacity: 1;
+  }
+  &__value {
+    display: flex;
+    margin-left: 4px;
+    height: 100%;
+    min-width: 0;
+    padding: 0.25rem;
+    min-height: 34px;
+
+    &.editable &:hover, &.editable.active {
+      background-color: rgba(55, 53, 47, 0.08);
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Component, Model, Prop, PropSync } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import itfDropdown from '../dropdown/Dropdown.vue';
+import itfLabel from '../form/Label.vue';
+import itfTextField from '../text-field/TextField.vue';
+import Sortable from '../sortable/Sortable';
+import PropertiesPopupMenu from './PropertiesPopupMenu.vue';
+import PropertiesEditMenu from './PropertiesEditMenu.vue';
+import PropertyInlineEdit from './PropertyInlineEdit.vue';
+import { INLINE_TYPES } from './constants';
+
+export default @Component({
+  name: 'itfPropertyItem',
+  components: {
+    itfIcon,
+    itfDropdown,
+    itfTextField,
+    itfLabel,
+    itfButton,
+    Sortable,
+    PropertiesPopupMenu,
+    PropertiesEditMenu,
+    PropertyInlineEdit
+  }
+})
+class itfPropertyItem extends Vue {
+  @Model('input') value;
+  @Prop() field;
+  @Prop({ type: Boolean, default: false }) loading;
+  @Prop({ type: Boolean, default: false }) editable;
+
+  isEditMode = false;
+  focusId = null;
+
+  get types() {
+    return INLINE_TYPES;
+  }
+
+  onFocus(id) {
+    if (!this.editable) {
+      return;
+    }
+    this.focusId = id;
+  }
+
+  onBlur() {
+    this.focusId = null;
+  }
+
+  onClose() {
+    this.isEditMode = false;
+  }
+
+  onChange(item) {
+    this.$emit('update:field', item);
+  }
+
+  onVisibilityChange(field, value) {
+    const newField = { ...field };
+    newField.Visible = value;
+    this.$emit('update:field', newField);
+  }
+
+  hideEditMenu() {
+    this.$refs.editDd.hide();
+  }
+
+  showEditMenu() {
+    this.$refs.editDd.show();
+    this.$nextTick(() => {
+      this.isEditMode = true;
+    });
+  }
+}
+</script>

package/src/components/customize/constants.js

@@ -0,0 +1,9 @@
+import InlineText from './Inline/Text';
+import InlineDate from './Inline/Date';
+import InlineMultiselect from './Inline/Multiselect.vue';
+
+export const INLINE_TYPES = [
+  { Type: 'text', Name: 'Text', Icon: 'type_text', Component: InlineText },
+  { Type: 'date', Name: 'Date', Icon: 'type_date', Component: InlineDate },
+  { Type: 'multiselect', Name: 'Multiselect', Icon: 'type_multiselect', Component: InlineMultiselect },
+];

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

@@ -27,8 +27,8 @@ storiesOf('Common', module)
           '2021-10-21': { text: '🎉', class: 'test' }
         },
         list: [
-          { Id: 'test1', Name: 'Test', Icon: 'eye' },
-          { Id: 'test2', Name: 'Test2', Icon: 'eye' },
+          { Id: 'test1', Name: 'Last perfomance appraisal date', Icon: 'eye', Type: 'text' },
+          { Id: 'test2', Name: 'Test2', Icon: 'eye', Type: 'date' },
         ],
         value: {
           test1: 'test1'
@@ -58,7 +58,7 @@ storiesOf('Common', module)
 
         {{value}}
 
-        <itf-properties-list :fields.sync="list" v-model="value"></itf-properties-list>
+        <itf-properties-list editable :fields.sync="list" v-model="value"></itf-properties-list>
 
       </itf-app>
     </div>`,

package/src/components/dropdown/Dropdown.vue

@@ -1,7 +1,9 @@
 <template>
 
   <div class="itf-dropdown" :class="`drop${placement}`">
+    <div v-if="disabled"><slot name="button">{{label}}</slot></div>
     <itf-button
+      v-else
       :class="{ 'dropdown-toggle': toggle }"
       v-bind="buttonOptions"
       ref="toggle"
@@ -41,6 +43,7 @@ class itfDropdown extends Vue {
   @Prop({ type: Boolean }) right;
   @Prop({ type: Boolean }) toggle;
   @Prop({ type: Boolean }) shadow;
+  @Prop({ type: Boolean }) disabled;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
 
@@ -69,7 +72,7 @@ class itfDropdown extends Vue {
   }
 
   async mounted() {
-    if (typeof window === 'undefined') {
+    if (typeof window === 'undefined' || !this.$refs.toggle) {
       return;
     }
     const { default: Dropdown } = await import('bootstrap/js/src/dropdown.js');

package/src/components/modal/DeleteConfirmModal.vue

@@ -72,7 +72,9 @@ class itfDeleteConfirmModal extends Vue {
 
   onConfirm() {
     this.isModalShown = false;
-    this.$emit('delete');
+    this.$nextTick(() => {
+      this.$emit('delete');
+    });
   }
 }
 </script>

package/src/components/modal/ItemEditor.vue

@@ -10,7 +10,7 @@
     :title="title"
     content
     :size="size"
-    @keyup.native.enter="submitSaveItem()"
+    @keydown.native.shift.enter.stop.prevent="submitSaveItem()"
     @update:visible="$emit('input', $event)"
     @close="onClose"
   >
@@ -67,7 +67,7 @@
             @click="submitSaveItem()"
           >
             <span class="me-1">{{ saveBtnCaption }}</span>
-            <kbd>↵</kbd>
+            <kbd>Shift + ↵</kbd>
           </itf-button>
         </slot>
       </slot>
@@ -111,8 +111,6 @@ class itfItemEditor extends Vue {
   @Prop(Boolean) canDelete;
   @Prop(Boolean) fullscreen;
   @Prop(Boolean) readonly; // показує форму, але кнопка Save не викликає saveFunc
-  @Prop() createdAt;
-  @Prop() creator;
 
   loading = false;
   showError = false;

package/src/components/popover/IconPopover.vue

@@ -1,5 +1,5 @@
 <template>
-  <itf-popover :visible.sync="value" ref="popover" :trigger="trigger" custom-class="nopadding" :placement="placement">
+  <itf-popover :visible.sync="isVisible" ref="popover" :trigger="trigger" custom-class="nopadding" :placement="placement">
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>
     </template>
@@ -27,7 +27,7 @@
         </itf-button>
       </div>
 
-      <div class="itf-select-popover__scroll text-start">
+      <div v-if="isVisible" class="itf-select-popover__scroll text-start">
         <template v-if="!search && recentIcons.length">
           <div class="py-1 text-muted">Recent</div>
           <div class="d-flex align-items-start flex-wrap flex-grow-0">
@@ -70,7 +70,7 @@
   }
 </style>
 <script>
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Model, Prop, PropSync } from 'vue-property-decorator';
 import itfPopover from './Popover';
 import itfIcon from '../icon/Icon';
 import iconsList from '../icon/icons';
@@ -81,7 +81,7 @@ import tooltip from '../../directives/tooltip';
 const RECENT_ITEMS_KEY = 'itfSelectPopoverRecent';
 
 export default @Component({
-  name: 'itfSelectPopover',
+  name: 'itfIconPopover',
   directives: {
     tooltip
   },
@@ -92,13 +92,14 @@ export default @Component({
     itfTextField
   },
 })
-class itfSelectPopover extends Vue {
-  @PropSync('visible') value;
+class itfIconPopover extends Vue {
+  @Model('input') value;
   @Prop({ type: String, default: '' }) title;
   @Prop({ type: Boolean, default: '' }) removable;
   @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
 
+  isVisible = false;
   search = '';
   recentIcons = [];
 

package/src/components/select/Select.vue

@@ -82,7 +82,7 @@
         </slot>
 
         <slot name="spinner" v-bind="scope.spinner">
-          <div v-show="mutableLoading" class="itf-spinner itf-select__loader">Loading...</div>
+          <div v-show="mutableLoading" class="itf-spinner itf-select__loader">{{ $t('components.select.loading') }}</div>
         </slot>
       </div>
     </div>
@@ -127,7 +127,7 @@
         </li>
         <li v-if="filteredOptions.length === 0" class="vs__no-options text-muted">
           <slot name="no-options" v-bind="scope.noOptions"
-          ><span v-if="!mutableLoading">Sorry, no matching options.</span></slot
+          ><span v-if="!mutableLoading">{{ $t('components.select.noOptions') }}</span></slot
           >
         </li>
         <slot name="list-footer" v-bind="scope.listFooter" />

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

@@ -13,7 +13,7 @@
 
     <div v-if="currencySelect" class="itf-money-field__currency">
       <span>{{ selectedCurrencyCode }}</span>
-      <select v-if="!currencyDisabled || !disabled" :value="currencyId" @input="onCurrencyChanged">
+      <select v-if="!disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
         <option v-for="currency in currencies" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
           {{ currency.Symbol }}, {{ currency.Code }} - {{ currency.Title }}
         </option>
@@ -24,9 +24,14 @@
 <style lang="scss">
 .itf-money-field {
   position: relative;
+
   .itf-text-field input {
     padding-left: var(--itf-money-field-padding-left, 1.5rem);
     padding-right: 3rem;
+
+    &.is-invalid, &.is-valid {
+      padding-right: 4rem;
+    }
   }
 
   &__prepend {
@@ -40,12 +45,16 @@
     position: absolute;
     right: .75rem;
     top: .5rem;
+    .is-invalid &, .is-valid & {
+      right: 1.75rem;
+    }
 
     select {
       position: absolute;
       top: 0;
       right: 0;
       opacity: 0;
+      left: 0;
     }
   }
 }

package/src/helpers/formatters.js

@@ -33,6 +33,9 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
 }
 
 export function formatDate (date, inputFormat = 'yyyy-MM-dd', toFormat) {
+  if (!date) {
+    return date;
+  }
   return DateTime.fromFormat(date, inputFormat).toFormat(toFormat || ITFSettings.defaultDisplayDateFormat);
 }
 

package/src/locales/en.js

@@ -57,6 +57,10 @@ module.exports = {
   close: 'Close',
   wholeYear: 'Whole year',
 
+  select: {
+    loading: 'Loading...',
+    noOptions: 'Select an option or create a new one',
+  },
   modal: {
     delete: 'Delete',
     cancel: 'Cancel',
@@ -83,5 +87,7 @@ module.exports = {
     areYouSureYouWantToDeleteThisField: 'Are you sure you want to delete this property?',
     customizePage: 'Customize page',
     type: 'Type',
+    options: 'Options',
+    addOption: 'Add an option',
   }
 };