@itfin/components 1.2.107 → 1.2.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.107",
+  "version": "1.2.109",
   "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,6 +1,6 @@
 <template>
   <div class="itf-append-context" style="min-width: 300px">
-    <div class="d-flex align-items-center px-3 py-2">
+    <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>
@@ -8,7 +8,6 @@
           </itf-button>
         </itf-icon-popover>
       </div-->
-
       <div class="flex-grow-1">
         <itf-text-field ref="input" :value="value.Name"  @input="setParam({ Name: $event })" />
       </div>
@@ -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"
@@ -117,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: {

package/src/components/customize/PropertiesList.vue

@@ -165,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);
     });
   }
@@ -186,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/kanban/BoardCard.vue

@@ -3,7 +3,7 @@
     <slot name="header"></slot>
 
     <div class="itf-board-card-inner d-flex">
-      <div class="flex-grow-1 itf-board-card-inner-content">
+      <div class="flex-grow-1">
         <slot>{{text}}</slot>
       </div>
       <div v-if="dropdown">

package/src/components/kanban/BoardColumn.vue

@@ -15,7 +15,7 @@
       {{ newItemText }}
     </itf-button>
 
-    <div class="itf-board-cards-wrapper" ref="container">
+    <div class="itf-board-cards-wrapper" ref="container" :class="{'empty-column': !items.length}">
       <template v-if="!items.length">
         <slot name="empty"></slot>
       </template>

package/src/components/kanban/styles.scss

@@ -22,6 +22,8 @@
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
+  overflow-x: scroll;
+  overflow-y: hidden;
 
   .draggable-mirror {
     z-index: 100000001;
@@ -107,6 +109,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 {
@@ -150,12 +153,18 @@
 }
 
 .itf-board-titles {
+  width: max-content;
   border-bottom: 1px solid var(--itf-board-card-border-color);
 }
 
 .itf-board-columns {
   max-height: 100%;
+  padding-bottom: 45px;
 
+  .empty-column .itf-board-card-space.bottom {
+    top: 0;
+    height: 100%;
+  }
   .itf-board-column {
     display: flex;
   }
@@ -181,8 +190,8 @@
       right: 0;
       top: -50px;
       left: 0;
-      bottom: -50px;
-      height: 100px;
+      bottom: 0px;
+      height: 50px;
     }
     &.bottom {
       top: auto;
@@ -225,17 +234,7 @@
     font-size: .875rem;
     word-wrap: break-word;
     -webkit-line-clamp: unset;
-    overflow: hidden;
     word-break: break-word;
-
-    .itf-board-card-inner-content {
-      padding-right: 0.2rem;
-      overflow-x: hidden;
-    }
-  }
-
-  .itf-board-card-footer {
-    overflow-x: hidden;
   }
 }
 

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

@@ -93,5 +93,8 @@ module.exports = {
     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

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