@itfin/components 1.3.78 → 1.3.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.78",
+  "version": "1.3.80",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -51,6 +51,7 @@
     "pdfjs-dist": "^2.10.377",
     "storybook-dark-mode": "^3.0.3",
     "tippy.js": "^6.3.2",
+    "vue-grid-layout": "^2.4.0",
     "vue-imask": "^6.6.3",
     "vue-property-decorator": "^9.1.2",
     "vue-swatches": "^2.1.1",

package/src/assets/scss/components/_button.scss

@@ -53,6 +53,13 @@
     --squircle-outline: 0px;
     --squircle-corners: top-left top-right bottom-left bottom-right;
   }
+  .itf-button.btn:not(.dropdown-toggle):focus:after {
+    -webkit-mask-image: paint(squircle);
+    --squircle-smooth: 0.6;
+    --squircle-radius: 10px;
+    --squircle-outline: 3px;
+    --squircle-corners: top-left top-right bottom-left bottom-right;
+  }
 }
 .itf-button.btn {
   display: inline-flex;
@@ -65,11 +72,6 @@
     -webkit-mask-image: none!important;
   }
   &:not(.dropdown-toggle):focus:after {
-    -webkit-mask-image: paint(squircle);
-    --squircle-smooth: 0.6;
-    --squircle-radius: 10px;
-    --squircle-outline: 3px;
-    --squircle-corners: top-left top-right bottom-left bottom-right;
     content: '';
     background: rgb(103, 146, 244);
     position: absolute;

package/src/components/card/BentoCard.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="itf-bento-card-wrapper shadow-sm rounded bg-white">
+    <slot/>
+
+    <div class="settings shadow rounded bg-black gap-2 align-items-center">
+      <button @click="$emit('resize', [2, 2])" class="rounded-1" :class="{'active': w === 2 && h === 2}">
+        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8 7H8.2C7.60695 7 7.28244 7.00156 7.04927 7.02061C7.03998 7.02136 7.0312 7.02213 7.0229 7.0229C7.02213 7.0312 7.02136 7.03998 7.02061 7.04927C7.00156 7.28244 7 7.60695 7 8.2V11.8C7 12.3931 7.00156 12.7176 7.02061 12.9507C7.02136 12.96 7.02213 12.9688 7.0229 12.9771C7.0312 12.9779 7.03998 12.9786 7.04927 12.9794C7.28244 12.9984 7.60695 13 8.2 13H11.8C12.3931 13 12.7176 12.9984 12.9507 12.9794C12.96 12.9786 12.9688 12.9779 12.9771 12.9771C12.9779 12.9688 12.9786 12.96 12.9794 12.9507C12.9984 12.7176 13 12.3931 13 11.8V8.2C13 7.60695 12.9984 7.28244 12.9794 7.04927C12.9786 7.03998 12.9779 7.0312 12.9771 7.0229C12.9688 7.02213 12.96 7.02136 12.9507 7.02061C12.7176 7.00156 12.3931 7 11.8 7ZM5.21799 6.09202C5 6.51984 5 7.0799 5 8.2V11.8C5 12.9201 5 13.4802 5.21799 13.908C5.40973 14.2843 5.71569 14.5903 6.09202 14.782C6.51984 15 7.0799 15 8.2 15H11.8C12.9201 15 13.4802 15 13.908 14.782C14.2843 14.5903 14.5903 14.2843 14.782 13.908C15 13.4802 15 12.9201 15 11.8V8.2C15 7.0799 15 6.51984 14.782 6.09202C14.5903 5.71569 14.2843 5.40973 13.908 5.21799C13.4802 5 12.9201 5 11.8 5H8.2C7.0799 5 6.51984 5 6.09202 5.21799C5.71569 5.40973 5.40973 5.71569 5.21799 6.09202Z" fill="currentColor"></path></svg>
+      </button>
+      <button @click="$emit('resize', [3, 1])" class="rounded-1" :class="{'active': w === 3 && h === 1}">
+        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 9H3C2.50669 9 2.23688 9.00108 2.04183 9.01439C2.03276 9.01501 2.02424 9.01564 2.01626 9.01626C2.01564 9.02424 2.01501 9.03276 2.01439 9.04183C2.00108 9.23688 2 9.50669 2 10C2 10.4933 2.00108 10.7631 2.01439 10.9582C2.01501 10.9672 2.01564 10.9758 2.01626 10.9837C2.02424 10.9844 2.03276 10.985 2.04183 10.9856C2.23688 10.9989 2.50669 11 3 11H17C17.4933 11 17.7631 10.9989 17.9582 10.9856C17.9672 10.985 17.9758 10.9844 17.9837 10.9837C17.9844 10.9758 17.985 10.9672 17.9856 10.9582C17.9989 10.7631 18 10.4933 18 10C18 9.50669 17.9989 9.23688 17.9856 9.04183C17.985 9.03276 17.9844 9.02424 17.9837 9.01626C17.9758 9.01564 17.9672 9.01501 17.9582 9.01439C17.7631 9.00108 17.4933 9 17 9ZM0.152241 8.23463C0 8.60218 0 9.06812 0 10C0 10.9319 0 11.3978 0.152241 11.7654C0.355229 12.2554 0.744577 12.6448 1.23463 12.8478C1.60218 13 2.06812 13 3 13H17C17.9319 13 18.3978 13 18.7654 12.8478C19.2554 12.6448 19.6448 12.2554 19.8478 11.7654C20 11.3978 20 10.9319 20 10C20 9.06812 20 8.60218 19.8478 8.23463C19.6448 7.74458 19.2554 7.35523 18.7654 7.15224C18.3978 7 17.9319 7 17 7H3C2.06812 7 1.60218 7 1.23463 7.15224C0.744577 7.35523 0.355229 7.74458 0.152241 8.23463Z" fill="currentColor"></path></svg>
+      </button>
+      <button @click="$emit('resize', [3, 2])" class="rounded-1" :class="{'active': w === 3 && h === 2}">
+        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.2 7H4.8C3.92692 7 3.39239 7.00156 2.99247 7.03423C2.80617 7.04945 2.69345 7.06857 2.625 7.08469C2.59244 7.09236 2.57241 7.09879 2.56158 7.10265C2.55118 7.10636 2.54681 7.10858 2.54601 7.10899C2.35785 7.20487 2.20487 7.35785 2.10899 7.54601C2.10858 7.54681 2.10636 7.55118 2.10265 7.56158C2.09879 7.57241 2.09236 7.59244 2.08469 7.625C2.06857 7.69345 2.04945 7.80617 2.03423 7.99247C2.00156 8.39239 2 8.92692 2 9.8V10.2C2 11.0731 2.00156 11.6076 2.03423 12.0075C2.04945 12.1938 2.06857 12.3065 2.08469 12.375C2.09236 12.4076 2.09879 12.4276 2.10265 12.4384C2.10636 12.4488 2.10858 12.4532 2.10899 12.454C2.20487 12.6422 2.35785 12.7951 2.54601 12.891C2.54681 12.8914 2.55118 12.8936 2.56158 12.8973C2.57241 12.9012 2.59244 12.9076 2.625 12.9153C2.69345 12.9314 2.80617 12.9505 2.99247 12.9658C3.39239 12.9984 3.92692 13 4.8 13H15.2C16.0731 13 16.6076 12.9984 17.0075 12.9658C17.1938 12.9505 17.3065 12.9314 17.375 12.9153C17.4076 12.9076 17.4276 12.9012 17.4384 12.8973C17.4488 12.8936 17.4532 12.8914 17.454 12.891C17.6422 12.7951 17.7951 12.6422 17.891 12.454C17.8914 12.4532 17.8936 12.4488 17.8973 12.4384C17.9012 12.4276 17.9076 12.4076 17.9153 12.375C17.9314 12.3065 17.9505 12.1938 17.9658 12.0075C17.9984 11.6076 18 11.0731 18 10.2V9.8C18 8.92692 17.9984 8.39239 17.9658 7.99247C17.9505 7.80617 17.9314 7.69345 17.9153 7.625C17.9076 7.59244 17.9012 7.57241 17.8973 7.56158C17.8936 7.55118 17.8914 7.54681 17.891 7.54601C17.7951 7.35785 17.6422 7.20487 17.454 7.10899C17.4532 7.10858 17.4488 7.10636 17.4384 7.10265C17.4276 7.09879 17.4076 7.09236 17.375 7.08469C17.3065 7.06857 17.1938 7.04945 17.0075 7.03423C16.6076 7.00156 16.0731 7 15.2 7ZM0.32698 6.63803C0 7.27976 0 8.11984 0 9.8V10.2C0 11.8802 0 12.7202 0.32698 13.362C0.614601 13.9265 1.07354 14.3854 1.63803 14.673C2.27976 15 3.11984 15 4.8 15H15.2C16.8802 15 17.7202 15 18.362 14.673C18.9265 14.3854 19.3854 13.9265 19.673 13.362C20 12.7202 20 11.8802 20 10.2V9.8C20 8.11984 20 7.27976 19.673 6.63803C19.3854 6.07354 18.9265 5.6146 18.362 5.32698C17.7202 5 16.8802 5 15.2 5H4.8C3.11984 5 2.27976 5 1.63803 5.32698C1.07354 5.6146 0.614601 6.07354 0.32698 6.63803Z" fill="currentColor"></path></svg>
+      </button>
+      <button @click="$emit('resize', [3, 3])" class="rounded-1" :class="{'active': w === 3 && h === 3}">
+        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.6 2H6.4C5.24689 2 4.50235 2.00156 3.93567 2.04785C3.39235 2.09225 3.19091 2.1676 3.09202 2.21799C2.71569 2.40973 2.40973 2.71569 2.21799 3.09202C2.1676 3.19091 2.09225 3.39235 2.04785 3.93567C2.00156 4.50235 2 5.24689 2 6.4V13.6C2 14.7531 2.00156 15.4977 2.04785 16.0643C2.09225 16.6077 2.1676 16.8091 2.21799 16.908C2.40973 17.2843 2.71569 17.5903 3.09202 17.782C3.19091 17.8324 3.39235 17.9078 3.93567 17.9521C4.50235 17.9984 5.24689 18 6.4 18H13.6C14.7531 18 15.4977 17.9984 16.0643 17.9521C16.6077 17.9078 16.8091 17.8324 16.908 17.782C17.2843 17.5903 17.5903 17.2843 17.782 16.908C17.8324 16.8091 17.9078 16.6077 17.9521 16.0643C17.9984 15.4977 18 14.7531 18 13.6V6.4C18 5.24689 17.9984 4.50235 17.9521 3.93567C17.9078 3.39235 17.8324 3.19091 17.782 3.09202C17.5903 2.71569 17.2843 2.40973 16.908 2.21799C16.8091 2.1676 16.6077 2.09225 16.0643 2.04785C15.4977 2.00156 14.7531 2 13.6 2ZM0.435974 2.18404C0 3.03969 0 4.15979 0 6.4V13.6C0 15.8402 0 16.9603 0.435974 17.816C0.819467 18.5686 1.43139 19.1805 2.18404 19.564C3.03969 20 4.15979 20 6.4 20H13.6C15.8402 20 16.9603 20 17.816 19.564C18.5686 19.1805 19.1805 18.5686 19.564 17.816C20 16.9603 20 15.8402 20 13.6V6.4C20 4.15979 20 3.03969 19.564 2.18404C19.1805 1.43139 18.5686 0.819467 17.816 0.435974C16.9603 0 15.8402 0 13.6 0H6.4C4.15979 0 3.03969 0 2.18404 0.435974C1.43139 0.819467 0.819467 1.43139 0.435974 2.18404Z" fill="currentColor"></path></svg>
+      </button>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.itf-bento-card-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  &:hover .settings {
+    opacity: 1;
+  }
+  .vue-draggable-dragging &:hover .settings {
+    opacity: 0;
+  }
+
+  .settings {
+    transition: opacity .3s;
+    transition-delay: .3s;
+    opacity: 0;
+    display: flex;
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    padding: .375rem;
+    transform: translateX(-50%);
+    z-index: 100;
+
+    button {
+      color: #fff;
+      padding: 0;
+      width: 25px;
+      height: 25px;
+      border: 0 none;
+      background: transparent;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+
+      &.active {
+        background: rgba(255, 255, 255, 1);
+        color: #000;
+      }
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Prop, Component } from 'vue-property-decorator';
+
+export default @Component({
+  name: 'itfBentoCard',
+  components: {
+  }
+})
+class itfBentoCard extends Vue {
+  @Prop() w;
+  @Prop() h;
+}
+</script>

package/src/components/card/BentoGrid.vue

@@ -0,0 +1,68 @@
+<template>
+  <grid-layout
+    :layout="layout"
+    @update:layout="$emit('update:layout', $event)"
+    class="itf-bento-grid"
+    :col-num="6"
+    :cols="{ lg: 6, md: 6, sm: 6, xs: 3, xxs: 3 }"
+    :preserve-aspect-ratio="true"
+    :responsive="true"
+    :is-draggable="true"
+    :is-resizable="false"
+    :is-mirrored="false"
+    :is-bounded="true"
+    :vertical-compact="true"
+    :margin="[10, 10]"
+    :use-css-transforms="true">
+    <grid-item v-for="item in layout"
+               :x="item.x"
+               :y="item.y"
+               :w="item.w"
+               :h="item.h"
+               :i="item.i"
+               :key="item.i">
+      <bento-card @resize="(e) => onResize(item, e)" :w="item.w" :h="item.h">
+        <slot name="cell" :item="item" :index="item.i"></slot>
+      </bento-card>
+    </grid-item>
+  </grid-layout>
+</template>
+<style lang="scss">
+.itf-bento-grid {
+  margin: -10px;
+
+  .vue-grid-item.vue-grid-placeholder {
+    background: rgba(0, 0, 0, 0.15);
+    border: 2px dashed rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+  }
+}
+</style>
+<script>
+import { Vue, Prop, Component } from 'vue-property-decorator';
+import { GridLayout, GridItem } from 'vue-grid-layout';
+import BentoCard from './BentoCard.vue';
+
+export default @Component({
+  name: 'itfBentoGrid',
+  components: {
+    GridLayout,
+    GridItem,
+    BentoCard
+  }
+})
+class itfBentoGrid extends Vue {
+  @Prop() layout;
+
+  onResize(item, [w, h]) {
+    const newLayout = this.layout.map((i) => {
+      if (i.i === item.i) {
+        i.w = w;
+        i.h = h;
+      }
+      return i;
+    });
+    this.$emit('update:layout', newLayout);
+  }
+}
+</script>

package/src/components/panels/Panel.vue

@@ -1,6 +1,6 @@
 <template>
-  <div tabindex="-1" class="b-panel" :class="{'b-panel__collapsed': collapsed, 'b-panel__active': !collapsed}">
-    <div v-if="collapsed" class="b-panel__expand" @click.stop.prevent="expandPanel">
+  <div tabindex="-1" :class="{'b-panel': !nocard, 'b-panel__collapsed': collapsed, 'b-panel__active': !collapsed}">
+    <div v-if="collapsed && !nocard" class="b-panel__expand" @click.stop.prevent="expandPanel">
       <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
         <itf-icon name="cross" />
       </itf-button>
@@ -10,7 +10,7 @@
         <div class="b-panel__expand_text" v-text="title"></div>
       </a>
     </div>
-    <div v-show="!collapsed" class="b-panel-header p-3">
+    <div v-if="!nocard" v-show="!collapsed" class="b-panel-header p-3">
       <slot name="header">
         <div>
           <slot name="title">
@@ -145,6 +145,7 @@ class Panel extends Vue {
   @Prop(Boolean) closeable;
   @Prop(Boolean) expandable;
   @Prop(Boolean) animate;
+  @Prop(Boolean) nocard;
 
   expandPanel() {
     this.$emit('expand');

package/src/components/panels/PanelLink.vue

@@ -48,8 +48,7 @@ export default class PanelLink extends Vue {
   onClick(e) {
     e.preventDefault();
     e.stopPropagation();
-    const stack = this.panelList.getCurrentStack();
-    stack[stack.length - 1].open(this.panel, this.payload || {});
+    this.panelList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel.index + 1);
   }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -12,6 +12,7 @@
           :key="n"
           :index="n"
           :title="panel.title"
+          :nocard="panel.nocard"
           :icon="panel.icon"
           :payload="panel.payload"
           :expandable="panelsStack.length > 1"
@@ -151,6 +152,7 @@ export interface IPanel {
   icon: string;
   type: string;
   payload: any;
+  nocard?: boolean;
   isCollapsed: boolean;
   isCloseable: boolean;
   open: (type: string, visOptions: VisualOptions, payload: any) => void;
@@ -251,6 +253,7 @@ export default class PanelList extends Vue {
     }
     const newPanel:any = {
       id: this.nextId++,
+      nocard: this.panels[type].nocard,
       title: this.panels[type].caption(this.$t.bind(this), payload),
       icon: this.panels[type].icon ? this.panels[type].icon(this.$t.bind(this), payload) : null,
       type,

package/src/components/panels/PanelListModal.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="b-panel-list-modal">
+    <div class="b-panel-list-modal__content">
+      <panel-list :panels="panels" :first-panel="firstPanel"></panel-list>
+    </div>
+    <div class="b-panel-list-modal__backdrop modal-backdrop"></div>
+  </div>
+</template>
+<style lang="scss">
+.b-panel-list-modal {
+  &__content {
+    position: fixed;
+    top: 10vh;
+    left: 10vw;
+    right: 10vw;
+    bottom: 10vh;
+    z-index: 2;
+  }
+  &__backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--bs-backdrop-bg);
+    opacity: var(--bs-backdrop-opacity);
+  }
+
+  .b-panel {
+    max-width: 40vw;
+    margin: 0 auto;
+  }
+}
+</style>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import PanelList from './PanelList.vue';
+
+@Component({
+  components: {
+    PanelList
+  },
+  directives: {
+  },
+  filters: {
+  }
+})
+export default class PanelListModal extends Vue {
+  @Prop() panels;
+  @Prop() firstPanel;
+}
+</script>

package/src/components/table/TableRows.vue

@@ -193,6 +193,9 @@ class itfTableRows extends Vue {
   }
 
   isActive(id) {
+    if (!this.idProperty) {
+      return false;
+    }
     if (Array.isArray(this.active)) {
       return this.active.includes(id);
     }