@itfin/components 1.2.87 → 1.2.89

package/src/components/customize/PropertiesList.vue

@@ -4,54 +4,46 @@
       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" />
+      <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)"
+      />
+    </sortable>
 
-                <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 v-if="editable && !lockFields" class="text-start">
+      <div v-if="isShowAll">
+        <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">
+              <itf-icon name="plus" />
+              Add property
+            </span>
+          </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>
-        </div>
+        </itf-dropdown>
       </div>
-    </sortable>
 
-    <div class="text-start">
-      <itf-button class="text-muted" small>
-        <itf-icon name="plus" />
-        Add property
+      <itf-button 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 })}}
       </itf-button>
     </div>
   </div>
@@ -79,55 +71,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 +81,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 +93,24 @@ 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;
+  @Prop({ type: Boolean, default: false }) lockFields;
 
-  isEditMode = false;
+  isShowAll = false;
 
-  onClose() {
-    this.isEditMode = false;
+  toggleShowAll() {
+    this.isShowAll = !this.isShowAll;
+  }
+
+  get types() {
+    return INLINE_TYPES;
   }
 
   onChange(item, index) {
@@ -172,8 +119,51 @@ 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.$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);
+    if (this.$refs.newItemDd) {
+      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,192 @@
+<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 && !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>
+          <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;
+  @Prop({ type: Boolean, default: false }) lockFields;
+
+  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,9 @@ 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-properties-list lock-fields 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/icon/MdiIcon.vue

@@ -0,0 +1,70 @@
+<style lang="scss">
+.mdi-icon {
+  align-items: center;
+  display: inline-flex;
+  font-feature-settings: "liga";
+  font-size: 24px;
+  justify-content: center;
+  letter-spacing: normal;
+  line-height: 1;
+  position: relative;
+  text-indent: 0;
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &--left {
+    margin-right: 5px;
+  }
+  &--right {
+    margin-left: 5px;
+  }
+}
+</style>
+<script>
+import { Vue, Component } from 'vue-property-decorator';
+
+export default @Component({
+  functional: true,
+  name: 'mdiIcon'
+})
+class mdiIcon extends Vue {
+  render (createElement, { data, slots, children, props, listeners }) {
+    const defaultSlot = slots().default;
+    if (!defaultSlot) {
+      return;
+    }
+    const [node] = defaultSlot;
+    const icon = (node.text || '').trim();
+    let alignClass = '';
+    if (typeof props.dark !== 'undefined') {
+      alignClass = 'text-white';
+    }
+    if (typeof props.left !== 'undefined') {
+      alignClass = 'mdi-icon--left';
+    }
+    if (typeof props.right !== 'undefined') {
+      alignClass = 'mdi-icon--right';
+    }
+    const attrs = {
+      staticClass: `mdi-icon notranslate mdi ${icon} ${alignClass} ${data.staticClass || ''}`,
+      on: {
+        click: e => listeners.click && listeners.click(e)
+      }
+    };
+    if (typeof props.small !== 'undefined') {
+      attrs.style = { 'font-size': '16px' };
+    }
+    if (typeof props.size !== 'undefined') {
+      attrs.style = { 'font-size': `${props.size}px` };
+    }
+    return createElement(
+      'i',
+      attrs
+    );
+  }
+}
+</script>

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>