@itfin/components 2.0.55 → 2.0.57

package/src/components/icon/new-icons/refresh-off.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none">
+	<rect id="outline/refresh-cw-off" width="24.000000" height="24.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" fill-opacity="0" />
+	<path id="Vector" d="M19.2 8.8L17.392 6.992C15.9448 5.59298 14.0128 4.80757 12 4.8C11.2 4.8 10.424 4.928 9.704 5.176M8.8 15.2L4.8 15.2L4.8 19.2M4.8 12C4.8 10.008 5.6 8.208 6.912 6.912M4.8 15.2L6.608 17.008C8.05518 18.407 9.98716 19.1924 12 19.2C13.992 19.2 15.792 18.4 17.088 17.088M19.2 12C19.2 12.8 19.072 13.576 18.824 14.296M19.2 4.8L19.2 8.8L15.2 8.8M20 20L4 4" fill-rule="evenodd" stroke="rgb(195,55,55)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.20000005" />
+</svg>

package/src/components/icon/new-icons/refresh.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none">
+	<rect id="outline/refresh" width="24.000000" height="24.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" fill-opacity="0" />
+	<path id="Vector" d="M4 12.5C4 10.5109 4.79018 8.60322 6.1967 7.1967C7.60322 5.79018 9.51088 5 11.5 5C13.5967 5.00789 15.6092 5.82602 17.1167 7.28333L19 9.16667M19 5L19 9.16667L14.8333 9.16667M19 12.5C19 14.4891 18.2098 16.3968 16.8033 17.8033C15.3968 19.2098 13.4891 20 11.5 20C9.40329 19.9921 7.39081 19.174 5.88333 17.7167L4 15.8333M8.16667 15.8333L4 15.8333L4 20" fill-rule="evenodd" stroke="rgb(255,255,255)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.20000005" />
+</svg>

package/src/components/modal/Modal.vue

@@ -2,7 +2,7 @@
 
   <div class="itf-modal modal fade" ref="modal" tabindex="-1" :aria-labelledby="modalId" aria-hidden="true">
     <div
-      class="modal-dialog"
+      class="modal-dialog modal-dialog-centered"
       :class="{[`modal-${size}`]: size, 'modal-fullscreen': fullscreen, 'modal-fullscreen-sm-down': !fullscreen}"
     >
       <slot name="content">

package/src/components/panels/PanelList.vue

@@ -468,7 +468,7 @@ export default class PanelList extends Vue {
   setPanelHash() {
     const hash = stackToHash(this.panelsStack, this.routeType === 'path').replace(/^#/, '');
     if (this.routeType === 'path') {
-      this.$router.push({ path: `/${hash}` });
+      this.$router.push({ path: `${hash}` });
     } else {
       this.$router.push({ hash });
     }

package/src/components/table/Table2.vue

@@ -59,6 +59,7 @@
               :editable-property="editableProperty"
               :sorting.sync="_sorting"
               :active="active"
+              :new-label="newLabel"
               @update:expanded-ids="$emit('update:expanded-ids', $event)"
               @new="$emit('new', $event)"
               @filter="$emit('filter', $event)"
@@ -138,6 +139,7 @@ class itfTable2 extends Vue {
   @Prop(Boolean) striped;
   @Prop(Boolean) absolute;
   @Prop(Boolean) clickable;
+  @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
 
   state = {
     selectedIds: [],

package/src/components/table/TableBody.vue

@@ -1,6 +1,22 @@
 <template>
   <div>
+    <div v-if="!rows.length" data-test="table-no-results" class="scroller">
+      <div class="table-view-item">
+        <div class="table-row-template">
+          <div accept-group="items" class="table-view-body-space"></div>
+          <div class="shadow-area"></div>
+          <div class="indicator sticky"></div>
+          <div class="table-item-inner">
+            <div class="table-view-item-value w-100 align-items-center p-3 no-results">
+              {{$t('components.table.noResults')}}
+            </div>
+            <div class="boundary right"></div>
+          </div>
+        </div>
+      </div>
+    </div>
     <itf-table-rows
+      v-else
       class="scroller"
       :rows="rows"
       :selected-ids="selectedIds"
@@ -33,21 +49,6 @@
         <slot :name="name" v-bind="slotData || {}"/>
       </template>
     </itf-table-rows>
-    <div v-if="!rows.length" data-test="table-no-results" class="scroller">
-      <div class="table-view-item">
-        <div class="table-row-template">
-          <div accept-group="items" class="table-view-body-space"></div>
-          <div class="shadow-area"></div>
-          <div class="indicator sticky"></div>
-          <div class="table-item-inner">
-            <div class="table-view-item-value w-100 align-items-center p-3 no-results">
-              {{$t('components.table.noResults')}}
-            </div>
-            <div class="boundary right"></div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <style lang="scss">
@@ -92,7 +93,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 1rem;//var(--itf-table-min-width);
+  min-width: 1rem; // важливо для скруглення //var(--itf-table-min-width);
 }
 
 .table-row-template, .table-view-header-value {

package/src/components/table/TableGroup.vue

@@ -91,11 +91,11 @@
 
         <!-- Лінія додати нову -->
         <div v-if="isShowTable && addNewRows"
-             class="table-row-template d-flex align-items-stretch">
+             class="d-flex align-items-stretch">
           <div class="shadow-area"></div>
           <a href="" @click.prevent="$emit('new', title)" data-test="table-add-new-item"
              class="d-flex align-items-center flex-grow-1 table-add-new-item text-decoration-none">
-            <span class="d-sticky d-flex align-items-center py-1">
+            <span class="d-sticky d-flex align-items-center py-2 px-2">
               <itf-icon name="plus"/>
               <span>{{ newLabel }}</span>
             </span>
@@ -265,12 +265,17 @@
   }
 
   .table-add-new-item {
-    border-right:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
-    border-left:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+    margin-top: -12px;
     border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
     outline: none;
     border-bottom-left-radius: var(--itf-table-table-border-radius);
     border-bottom-right-radius: var(--itf-table-table-border-radius);
+    border-right: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+
+    > .d-sticky {
+      border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+      border-bottom-left-radius: var(--itf-table-table-border-radius);
+    }
 
     & > span {
       left: var(--shadow-area-width);