@itfin/components 1.2.106 → 1.2.108

package/package.json

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

package/src/components/copyToClipboard/CopyToClipboard.vue

@@ -0,0 +1,67 @@
+<template>
+  <itf-button icon small @click.stop="copy">
+    <slot>
+      <itf-icon name="clipboard_copy" />
+    </slot>
+  </itf-button>
+</template>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfButton
+  }
+})
+class CopyToClipboard extends Vue {
+  @Prop(String) value;
+
+  async copy () {
+    const showSuccess = this.$showSuccess;
+    const showError = this.$showError;
+    const $t = this.$t.bind(this);
+
+    function fallbackCopyTextToClipboard (text) {
+      const textArea = document.createElement('textarea');
+      textArea.value = text;
+
+      // Avoid scrolling to bottom
+      textArea.style.top = '0';
+      textArea.style.left = '0';
+      textArea.style.position = 'fixed';
+
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+
+      try {
+        if (document.execCommand('copy')) {
+          showSuccess($t('components.copyToClipboard.copyingToClipboardWasSuccessful'));
+        }
+      } catch (err) {
+        showError(err.message);
+      }
+
+      document.body.removeChild(textArea);
+    }
+    async function copyTextToClipboard (text) {
+      if (!navigator.clipboard) {
+        fallbackCopyTextToClipboard(text);
+        return;
+      }
+      try {
+        await navigator.clipboard.writeText(text);
+
+        showSuccess($t('components.copyToClipboard.copyingToClipboardWasSuccessful'));
+      } catch (err) {
+        showError(err.message);
+      }
+    }
+
+    await copyTextToClipboard(this.value);
+  }
+}
+</script>

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

@@ -2,17 +2,20 @@
   <div class="itf-inline-edit">
     <itf-select
       ref="input"
-      class="input"
+      class="input flex-grow-1"
       role="button"
       multiple
       :placeholder="focused ? 'Search for an option...' : 'Empty'"
       :tabindex="1"
       :disabled="!editable"
-      :options="field && field.Options"
+      :options="options"
       :reduce="option => option.Name"
       :get-option-label="option => option.Name"
       @search:focus="$emit('focus')"
-      @search:blur="$emit('blur')">
+      @search:blur="$emit('blur')"
+      :value="itemsValue"
+      @input="onInput"
+    >
       <template #option="{ option }">
         <div>{{ option.Name }}</div>
       </template>
@@ -51,5 +54,20 @@ class itfCustomizeInlineMultiselect extends Vue {
   @Prop(Boolean) focused;
   @Prop(Boolean) editable;
   @Prop() field;
+
+  get itemsValue () {
+    return (this.value || '').toString().split(';;;').filter(v => v.length);
+  }
+
+  get options() {
+    const list = (this.field && this.field.Options) || [];
+    const notExists = this.itemsValue.filter(v => !list.find(o => o.Name === v));
+
+    return [...list, ...notExists.map(v => ({ Name: v }))];
+  }
+
+  onInput(val) {
+    this.$emit('input', val.join(';;;'));
+  }
 }
 </script>

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

@@ -10,7 +10,10 @@
     :reduce="option => option.Name"
     :get-option-label="option => option.Name"
     @search:focus="$emit('focus')"
-    @search:blur="$emit('blur')">
+    @search:blur="$emit('blur')"
+    :value="value"
+    @input="$emit('input', $event)"
+  >
     <template #option="{ option }">
       <div>{{ option.Name }}</div>
     </template>

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

@@ -14,6 +14,7 @@
       :contenteditable="editable"
       v-html="value">
     </div>
+    <itf-copy-to-clipboard :value="value" />
   </div>
 </template>
 <style lang="scss" scoped>
@@ -36,12 +37,16 @@
 </style>
 <script>
 import { Vue, Component, Model, Prop } from 'vue-property-decorator';
+import itfIcon from '../../icon/Icon.vue';
 import itfTextField from '../../text-field/TextField.vue';
+import itfCopyToClipboard from '../../copyToClipboard/CopyToClipboard';
 
 export default @Component({
   name: 'itfCustomizeInlineText',
   components: {
-    itfTextField
+    itfIcon,
+    itfTextField,
+    itfCopyToClipboard
   }
 })
 

package/src/components/customize/PropertiesEditMenu.vue

@@ -1,14 +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="d-flex align-items-center px-3 py-2" sortable-skip>
+      <!--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 })" />
       </div>
@@ -29,7 +28,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">
@@ -39,7 +38,7 @@
         </div>
       </div>
 
-      <div v-if="isNewOptionVisible" class="px-3">
+      <div v-if="isNewOptionVisible" class="px-3" sortable-skip>
         <itf-text-field
           ref="newOptionInput"
           v-model="newOption"
@@ -63,21 +62,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>
@@ -95,7 +116,7 @@ import itfIconPopover from '../popover/IconPopover.vue';
 import { INLINE_TYPES } from './constants';
 import itfDeleteConfirmModal from '../modal/DeleteConfirmModal.vue';
 import PropertyItem from './PropertyItem.vue';
-import PropertiesPopupMenu from "@/components/customize/PropertiesPopupMenu.vue";
+import PropertiesPopupMenu from './PropertiesPopupMenu.vue';
 
 export default @Component({
   components: {
@@ -125,6 +146,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();
@@ -147,6 +172,11 @@ class PropertiesEditMenu extends Vue {
     });
   }
 
+  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;
@@ -140,7 +165,9 @@ class itfPropertiesList extends Vue {
         prop.hideEditMenu();
       }
       setTimeout(() => {
-        this.$refs.properties[list.length - 1].showEditMenu();
+        if (this.$refs.properties && this.$refs.properties[list.length - 1]) {
+          this.$refs.properties[list.length - 1].showEditMenu();
+        }
       }, 10);
     });
   }
@@ -161,7 +188,9 @@ class itfPropertiesList extends Vue {
 
     this.$nextTick(() => {
       setTimeout(() => {
-        this.$refs.properties[list.length - 1].showEditMenu();
+        if (this.$refs.properties && this.$refs.properties[list.length - 1]) {
+          this.$refs.properties[list.length - 1].showEditMenu();
+        }
       }, 10);
     });
   }

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/select/Select.vue

@@ -32,9 +32,8 @@
             <itf-button
               icon
               small
-              v-if="multiple"
+              v-if="multiple && !disabled"
               ref="deselectButtons"
-              :disabled="disabled"
               class="vs__deselect"
               :title="`Deselect ${getOptionLabel(option)}`"
               :aria-label="`Deselect ${getOptionLabel(option)}`"

package/src/locales/en.js

@@ -91,5 +91,10 @@ 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?',
+  },
+  copyToClipboard: {
+    copyingToClipboardWasSuccessful: 'Copying to clipboard was successful',
   }
 };

package/src/locales/uk.js

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