@itfin/components 1.3.23 → 1.3.25

package/package.json

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

package/src/assets/scss/components/_datepicker.scss

@@ -27,16 +27,10 @@
       right: 0;
       bottom: 0;
       z-index: -1;
-      border-radius: var(--adp-cell-border-radius) var(--bs-border-radius-lg) var(--bs-border-radius-lg) var(--adp-cell-border-radius);
+      border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
       background: var(--adp-cell-background-color-selected);
     }
 
-    &:after {
-      left: 100%;
-      right: -2rem;
-      transform: translate(-1.4375rem) scaleY(.6) scaleX(.4) rotate(45deg);
-    }
-
     &:before {
       right: 0.25rem;
     }
@@ -51,16 +45,10 @@
       right: 0;
       bottom: 0;
       z-index: -1;
-      border-radius: var(--bs-border-radius-lg) var(--adp-cell-border-radius) var(--adp-cell-border-radius) var(--bs-border-radius-lg);
+      border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius)  0;
       background: var(--adp-cell-background-color-selected);
     }
 
-    &:after {
-      right: 100%;
-      left: -2rem;
-      transform: translate(1.4375rem) scaleY(.6) scaleX(.4) rotate(45deg);
-    }
-
     &:before {
       left: 0.25rem;
     }

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

@@ -19,6 +19,10 @@
   </div>
 </template>
 <style lang="scss" scoped>
+.itf-inline-edit {
+  margin: -5px;
+  padding: 5px;
+}
 .itf-inline-edit .input {
   border: 0 none;
   margin: 0;

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

@@ -23,6 +23,10 @@
   </div>
 </template>
 <style lang="scss">
+.itf-inline-edit {
+  margin: -5px;
+  padding: 5px;
+}
 .itf-inline-edit .itf-select .form-control {
   border: 0 none;
   margin: 0;

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

@@ -20,6 +20,10 @@
   </itf-select>
 </template>
 <style lang="scss">
+.itf-inline-edit {
+  margin: -5px;
+  padding: 5px;
+}
 .itf-inline-edit.itf-select .form-control {
   border: 0 none;
   margin: 0;

package/src/components/customize/PropertiesList.vue

@@ -26,7 +26,7 @@
 
     <div v-if="editable && !lockFields" class="text-start">
       <div v-if="isShowAll || !hiddenItemsCount">
-        <itf-dropdown ref="newItemDd" autoclose="outside" class="flex-grow-1 mw-100" shadow :button-options="{ small: true }">
+        <itf-dropdown ref="newItemDd" 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" />

package/src/components/customize/PropertyItem.vue

@@ -188,11 +188,15 @@ class itfPropertyItem extends Vue {
   }
 
   hideEditMenu() {
-    this.$refs.editDd.hide();
+    if (this.$refs.editDd) {
+      this.$refs.editDd.hide();
+    }
   }
 
   showEditMenu() {
-    this.$refs.editDd.show();
+    if (this.$refs.editDd) {
+      this.$refs.editDd.show();
+    }
     this.$nextTick(() => {
       this.isEditMode = true;
     });

package/src/components/editable/EditableList.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="b-properties-list">
+    <sortable
+      require-sortable-attribute
+      v-model="list"
+      axis="y"
+      :read-only="!editable"
+      auto-scroll="window"
+    >
+      <div v-for="(item, n) of listToHide" :key="n" class="b-properties-list__item" v-show="item.isVisible || isShowAll">
+        <div v-if="editable && sortable" role="button" tabindex="-1" class="b-properties-list__draghandler" sortable>
+          <itf-icon class="dragHandle" name="drag_vertical" />
+        </div>
+        <div class="b-properties-list__item_content">
+          <slot name="item" :item="item.item"></slot>
+        </div>
+      </div>
+    </sortable>
+
+    <div v-if="editable" class="text-start">
+      <itf-button v-if="hiddenItemsCount" small class="text-muted" @click="toggleShowAll">
+        <itf-icon :name="isShowAll ? 'chevron_up' : 'chevron_down'" />
+        {{isShowAll ? $tc(hidePropertiesText, hiddenItemsCount, { n: hiddenItemsCount }) : $tc(showPropertiesText, hiddenItemsCount, { n: hiddenItemsCount })}}
+      </itf-button>
+
+      <itf-dropdown ref="newItemDd" 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" />
+              {{ addPropertyText }}
+            </span>
+        </template>
+        <slot name="dropdown"></slot>
+      </itf-dropdown>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.itf-dropdown__menu {
+  div {
+    position: relative;
+  }
+  .dropdown-submenu {
+    display: none;
+    position: absolute;
+    left: 100%;
+    top: -7px;
+  }
+  .dropdown-submenu-left {
+    right: 100%;
+    left: auto;
+  }
+  & div:hover > .dropdown-submenu {
+    display: block;
+  }
+}
+.b-properties-list {
+  display: flex;
+  flex-direction: column;
+  padding: 5px 3px 5px 15px;
+
+  &__item {
+    display: flex;
+  }
+  &__item_content {
+    flex-grow: 1
+  }
+  &__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);
+  }
+  &__item:hover &__draghandler {
+    opacity: 1;
+  }
+}
+</style>
+<script>
+import { Vue, Component, 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.vue';
+
+export default @Component({
+  name: 'itfEditableList',
+  components: {
+    itfIcon,
+    itfDropdown,
+    itfTextField,
+    itfLabel,
+    itfButton,
+    Sortable
+  }
+})
+class itfPropertiesList extends Vue {
+  @PropSync('items', { type: Array, required: true }) list;
+  @Prop({ type: Function, default: () => true }) isVisible;
+  @Prop({ type: Boolean, default: false }) loading;
+  @Prop({ type: Boolean, default: false }) editable;
+  @Prop({ type: Boolean, default: false }) sortable;
+  @Prop({ type: String, default: 'components.customize.showMoreProperties' }) showPropertiesText;
+  @Prop({ type: String, default: 'components.customize.hideMoreProperties' }) hidePropertiesText;
+  @Prop({ type: String, default: function() { return this.$t('components.customize.addProperty') } }) addPropertyText;
+
+  isShowAll = false;
+
+  toggleShowAll() {
+    this.isShowAll = !this.isShowAll;
+  }
+
+  get hiddenItemsCount() {
+    return this.listToHide.filter((item) => !item.isVisible).length;
+  }
+
+  get listToHide() {
+    return this.items.map((item) => {
+      return {
+        item,
+        isVisible: this.isVisible(item)
+      }
+    });
+  }
+}
+</script>

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

@@ -1,15 +1,25 @@
 import { storiesOf } from '@storybook/vue';
 import itfButton from '../button/Button.vue';
 import itfEditableElement from './EditableElement.vue';
+import itfEditableList from './EditableList.vue';
 
 storiesOf('Common', module)
   .add('Editable element', () => ({
     components: {
       itfButton,
-      itfEditableElement
+      itfEditableElement,
+      itfEditableList
     },
     data() {
-      return {}
+      return {
+        items: [
+          { name: 'test' },
+          { name: 'test 2' },
+          { name: 'test 3' },
+          { name: 'test 4' },
+          { name: 'test 5' },
+        ]
+      }
     },
     template: `<div>
       <p>You need wrap whole application with this tag</p>
@@ -27,6 +37,15 @@ storiesOf('Common', module)
 
       <h3>Example</h3>
 
+      <itf-editable-list :items.sync="items" editable sortable :is-visible="(item) => item.name.includes('4')">
+        <template #item="{ item }">
+          {{item}}
+        </template>
+        <template #dropdown>
+          asd
+        </template>
+      </itf-editable-list>
+
       <itf-editable-element>
         <template v-slot="{ hide }">