@itfin/components 1.3.34 → 1.3.35

package/src/assets/scss/main.scss

@@ -1,5 +1,6 @@
 @import './css_variables.scss';
 @import './fonts.scss';
+@import './icons.scss';
 @import './dark-theme.scss';
 @import './scrollbar';
 @import './components/air-select';

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

@@ -2,7 +2,6 @@ import { storiesOf } from '@storybook/vue';
 import itfAvatar from './Avatar.vue';
 
 storiesOf('Common', module)
-  .addDecorator(withKnobs)
   .add('Avatar', () => ({
     components: {
       itfAvatar

package/src/components/button/1.html

@@ -0,0 +1,30 @@
+<div class="notion-overlay-container notion-default-overlay-container"
+     style="position: fixed; inset: 0px; z-index: 999; pointer-events: none; overflow: hidden;">
+    <div style="position: relative; z-index: 0;"></div>
+    <div data-overlay="true" style="pointer-events: auto; position: relative; z-index: 0;">
+        <div>
+            <div style="position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh;"></div>
+            <div style="position: fixed; left: 347px; top: 463.398px; pointer-events: none;">
+                <div style="width: 280px; height: 0px;"></div>
+                <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;">
+                    <div style="position: relative; top: 100%; pointer-events: auto;">
+                        <div style="display: flex; align-items: center; position: relative; flex-direction: column-reverse; transform-origin: 0% top; left: 0px; top: 0px;">
+                            <div role="dialog"
+                                 style="border-radius: 6px; background: white; backdrop-filter: none; position: relative; max-width: calc(-24px + 100vw); box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px; overflow: visible; width: 280px; min-height: 34px; max-height: 634px; display: flex; flex-direction: column;">
+                                <div style="display: flex; flex-direction: column; overflow-y: auto; flex-grow: 1; height: 100%;">
+                                    <div style="padding: 6px 9px; font-size: 14px; min-height: 34px; display: flex; height: 100%; flex-direction: column; justify-content: space-between; flex-grow: 1; font-weight: 500;">
+                                        <div class="notranslate" spellcheck="true" placeholder=" "
+                                             data-content-editable-leaf="true" contenteditable="true"
+                                             style="max-width: 100%; width: 100%; white-space: pre-wrap; word-break: break-word; caret-color: rgb(55, 53, 47);">
+                                            d
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/src/components/button/NativeButton.js

@@ -0,0 +1,116 @@
+const CSS_CLASSES = {
+  btn: ['itf-button', 'btn'],
+  basic: ['btn-basic'],
+  primary: ['btn-primary'],
+  secondary: ['btn-secondary'],
+  large: ['btn-lg'],
+  small: ['btn-sm'],
+  block: ['itf-button__block'],
+  labeled: ['labeled'],
+  squircle: ['btn-squircle'],
+  icon: ['btn-icon'],
+  loading: ['loading'],
+  spinner: ['itf-spinner'],
+  loadingWhite: ['itf-spinner__white'],
+};
+
+export
+class Button extends HTMLElement {
+
+  static get observedAttributes() {
+    return ['disabled', 'open'];
+  }
+
+  get isLoading() {
+    return this.hasAttribute('loading');
+  }
+
+  get styleClasses() {
+    let styles = [];
+    if (this.hasAttribute('color')) {
+      styles.push(`btn-${this.getAttribute('color')}`);
+    }
+    if (this.hasAttribute('block')) {
+      styles.push(CSS_CLASSES.block);
+    }
+    if (this.hasAttribute('labeled')) {
+      styles.push(CSS_CLASSES.labeled);
+    }
+    if (this.hasAttribute('squircle')) {
+      styles.push(CSS_CLASSES.squircle);
+    }
+    if (this.hasAttribute('icon')) {
+      styles.push(CSS_CLASSES.icon);
+    }
+    if (this.isLoading) {
+      styles.push(CSS_CLASSES.loading);
+    }
+
+    if (this.hasAttribute('small')) {
+      styles = styles.concat(CSS_CLASSES.small);
+    } else if (this.hasAttribute('large')) {
+      styles = styles.concat(CSS_CLASSES.large);
+    }
+
+    if (this.hasAttribute('primary')) {
+      styles = styles.concat(CSS_CLASSES.primary);
+    } else if (this.hasAttribute('secondary')) {
+      styles = styles.concat(CSS_CLASSES.secondary);
+    } else if (!this.hasAttribute('color')) {
+      styles = styles.concat(CSS_CLASSES.basic);
+    }
+    return styles;
+  }
+
+  get open() {
+    return this.hasAttribute('open');
+  }
+
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(val) {
+    if (val) {
+      this.setAttribute('tabindex', '-1');
+      this.setAttribute('disabled', '');
+      this.setAttribute('aria-disabled', 'true');
+    } else {
+      this.setAttribute('tabindex', '0');
+      this.setAttribute('aria-disabled', 'false');
+      this.removeAttribute('disabled');
+    }
+  }
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const button = document.createElement('button');
+
+    const loadingText = this.getAttribute('loading-text');
+    const html = this.innerHTML;
+    this.replaceWith(button);
+    button.innerHTML = html;
+    button.classList.add(...CSS_CLASSES.btn);
+    button.classList.add(...this.styleClasses);
+
+    if (this.isLoading) {
+      button.setAttribute('disabled', 'disabled');
+      const loadingDiv = document.createElement('div');
+      const spinnerDiv = document.createElement('div');
+      spinnerDiv.classList.add(...CSS_CLASSES.spinner);
+      if (this.hasAttribute('primary') || this.hasAttribute('white')) {
+        spinnerDiv.classList.add(CSS_CLASSES.loadingWhite);
+      }
+      loadingDiv.appendChild(spinnerDiv);
+      // if (this.isLoading && loadingText) {
+      //   const loadingTextDiv = document.createElement('div');
+      //   loadingTextDiv.innerHTML = loadingText;
+      //   loadingDiv.appendChild(loadingTextDiv);
+      // }
+      button.appendChild(loadingDiv);
+    }
+  }
+}

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

@@ -5,14 +5,18 @@ import itfLabel from '../form/Label.vue';
 import itfDatePicker from '../datepicker/DatePicker.vue';
 import itfDateRangePicker from '../datepicker/DateRangePicker.vue';
 import itfApp from '../app/App.vue';
+// import {Button} from './Button.js';
+
+// window.customElements.define('itf-button', Button);
+
 
 storiesOf('Common', module)
   .add('Buttons', () => ({
     components: {
+      itfButton,
       itfApp,
       itfForm,
       itfLabel,
-      itfButton,
       itfDatePicker,
       itfDateRangePicker
     },
@@ -62,7 +66,7 @@ storiesOf('Common', module)
 
         <h3>Standart button</h3>
 
-        <itf-button primary>Primary button</itf-button>
+        <itf-button squircle primary>Primary button</itf-button>
         <itf-button secondary>Secondary button</itf-button>
         <itf-button>Basic button</itf-button>
         <itf-button icon>
@@ -88,7 +92,7 @@ storiesOf('Common', module)
 
         <h3>Large button</h3>
 
-        <itf-button large primary>Primary button</itf-button>
+        <itf-button squircle large primary>Primary button</itf-button>
         <itf-button large secondary>Secondary button</itf-button>
         <itf-button large>Basic button</itf-button>
         <itf-button large icon>
@@ -103,12 +107,12 @@ storiesOf('Common', module)
         <itf-button primary loading>Primary button</itf-button>
         <itf-button secondary loading>Secondary button</itf-button>
         <itf-button loading>Basic button</itf-button>
-        <itf-button primary loading small>Small button</itf-button>
+        <itf-button primary loading small loading-text="Loading...">Small button</itf-button>
         <itf-button primary loading large>Large button</itf-button>
 
         <h4>Test loading</h4>
-
-        <itf-button @click="testLoading" primary :loading="isLoading" loading-text="Saving...">Click to test loading</itf-button>
+{{isLoading}}
+        <itf-button onclick="testLoading" primary :loading.prop="isLoading" loading-text="Saving...">Click to test loading</itf-button>
 
       </itf-app>
     </div>`,

package/src/components/checkbox/Checkbox.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div class="itf-checkbox form-check" :class="{ 'form-switch': this.switch, 'itf-checkbox__large': large, 'itf-checkbox__medium': medium }">
-    <input class="form-check-input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
+    <input class="form-check-input" ref="input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
     <label :for="id" class="form-check-label">
       <slot name="label">
         {{label}}
@@ -60,5 +60,9 @@ class itfCheckbox extends Vue {
     }
     this.$emit('input', val);
   }
+
+  get input() {
+    return this.$refs.input;
+  }
 }
 </script>

package/src/components/dropdown/Dropdown.vue

@@ -33,22 +33,23 @@ class itfDropdown extends Vue {
   render (createElement, context) {
     const { props, slots, data } = context;
     const modalId = `dropdownId${globalModalIndex++}`;
-    const { buttonOptions, toggle, text, right, shadow, label, appendToBody } = props;
+    const { buttonOptions, toggle, text, disabled, label, appendToBody } = props;
     const { button, default: defaultSlot } = slots();
     let elements = [
       createElement(
         text ? 'div' : itfButton,
         {
+          staticClass: data.staticClass || '',
           props: buttonOptions || {},
           class: { 'dropdown-toggle': toggle },
-          attrs: { id: modalId, 'data-bs-toggle': 'dropdown', 'aria-expanded': 'false' },
-          ref: 'toggle',
+          attrs: { id: modalId, 'data-bs-toggle': 'dropdown', 'aria-expanded': 'false', ...(data.attrs || {}) },
         },
         button || label
       ),
-      createElement(
+      disabled ? null : createElement(
         itfDropdownMenu,
         {
+          ref: data.ref,
           props: { ...props, toggleId: modalId },
         },
         defaultSlot

package/src/components/dropdown/DropdownMenu.vue

@@ -57,6 +57,13 @@ class itfDropdownMenu extends Vue {
     });
   }
 
+  beforeDestroy() {
+    if (this.modalEl) {
+      this.modalEl.hide();
+      this.modalEl.dispose();
+    }
+  }
+
   show() {
     if (this.modalEl) {
       this.modalEl.show();

package/src/components/sortable/sortable-shopify.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { Draggable } from './draggable'
+import { Draggable } from '@shopify/draggable';
 import DraggableEvent from './event'
 
 

package/src/components/table/Table2.vue

@@ -1,34 +1,38 @@
 <template>
 
-  <div class="scrollable scrollable-x big-scrollbar">
-    <template v-for="(group, index) in groups">
-      <div class="table-view-body">
-        <itf-table-group
-          :key="index"
-          :style="`--table-row-height: ${rowHeight}px`"
-          :columns="columns"
-          @update:columns="onColumnsUpdate"
-          :rows="group.rows"
-          :title="group.name"
-          :add-new-rows="addNewRows"
-          :column-sorting="columnSorting"
-          :column-resizing="columnResizing"
-          :show-grouping="showGrouping"
-          :show-summary="showSummary"
-          :show-add-column="showAddColumn"
-          :row-height="rowHeight"
-          :show-header="index === 0"
-          @add-column="$emit('add-column', $event)"
-        >
-          <template v-for="(_, name) in $slots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData || {}" />
-          </template>
-          <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData || {}" />
-          </template>
-        </itf-table-group>
-      </div>
-    </template>
+  <div class="scrollable scrollable-x big-scrollbar" :class="{'permanent-checkboxes': selectedIds.length}">
+    <itf-checkbox-group v-model="selectedIds">
+      <template v-for="(group, index) in groups">
+        <div class="table-view-body">
+          <itf-table-group
+            :key="index"
+            :id-property="idProperty"
+            :columns="columns"
+            @update:columns="onColumnsUpdate"
+            :rows="group.rows"
+            :title="group.name"
+            :selected-ids.sync="selectedIds"
+            :add-new-rows="addNewRows"
+            :column-sorting="columnSorting"
+            :column-resizing="columnResizing"
+            :show-grouping="showGrouping"
+            :show-summary="showSummary"
+            :show-add-column="showAddColumn"
+            :show-header="!noHeader"
+            :schema="schema"
+            @new="$emit('new', $event)"
+            @add-column="$emit('add-column', $event)"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}" />
+            </template>
+            <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}" />
+            </template>
+          </itf-table-group>
+        </div>
+      </template>
+    </itf-checkbox-group>
   </div>
 
 </template>
@@ -65,7 +69,8 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import itfCheckboxGroup from '../checkbox/CheckboxGroup.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableGroup from './TableGroup.vue';
@@ -73,7 +78,11 @@ import itfTableHeader from './TableHeader.vue';
 
 export default @Component({
   name: 'itfTable2',
+  provide() {
+    return { tableEl: this }; // do not use Provide from vue-property-decorator
+  },
   components: {
+    itfCheckboxGroup,
     itfTableHeader,
     itfButton,
     itfIcon,
@@ -81,16 +90,72 @@ export default @Component({
   }
 })
 class itfTable2 extends Vue {
-  @Prop({ required: true, type: Array }) columns;
+  // @Prop({ required: true, type: Array }) columns;
   @Prop({ required: true, type: Array }) rows;
-  @Prop({ type: Number, default: 40 }) rowHeight;
   @Prop({ type: String, default: null }) groupBy;
+  @Prop({ type: String, default: 'Id' }) idProperty;
+  @Prop({ type: String, default: null }) stateName; // save state to storage
+  @Prop({ type: Object, default: () => ({}) }) schema;
   @Prop(Boolean) addNewRows;
   @Prop(Boolean) columnSorting;
   @Prop(Boolean) columnResizing;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) showGrouping;
   @Prop(Boolean) showSummary;
+  @Prop(Boolean) noHeader;
+
+  state = {
+    selectedIds: [],
+    columns: []
+  };
+  selectedIds = [];
+
+  getTableState() {
+    const list = this.schema?.properties || [];
+    let state = this.stateName ? JSON.parse(localStorage.getItem(this.stateKey) || 'null') : null;
+    if (!state) {
+      state = {
+        selectedIds: [],
+        columns: [...list]
+      };
+    }
+    state.selectedIds = [];
+    for (const column of list) {
+      const stateColumn = state.columns.find(i => i.property === column.property);
+      if (stateColumn) {
+        Object.assign(stateColumn, column);
+      } else {
+        state.columns.push(column);
+      }
+    }
+    for (const column of state.columns) {
+      const originColumn = list.find(i => i.property === column.property);
+      if (!originColumn) {
+        state.columns = state.columns.filter(i => i.property !== column.property);
+      }
+    }
+    return state;
+  }
+
+  get stateKey() {
+    return this.stateName ? `itf-table-${this.stateName}` : null;
+  }
+
+  saveTableState() {
+    if (!this.stateName) {
+      return;
+    }
+    localStorage.setItem(this.stateKey, JSON.stringify(this.state));
+  }
+
+  mounted() {
+    this.state = this.getTableState();
+    this.selectedIds = this.state.selectedIds;
+  }
+
+  get columns() {
+    return this.state?.columns || [];
+  }
 
   get groups() {
     const { groupBy, rows } = this;
@@ -108,8 +173,18 @@ class itfTable2 extends Vue {
     return Object.entries(groups).map(([name, rows]) => ({ name, rows }));
   }
 
+  @Watch('selectedIds')
+  onSelectedIdsUpdate(selectedIds) {
+    this.state.selectedIds = selectedIds;
+    this.saveTableState();
+  }
+
   onColumnsUpdate(columns) {
-    this.$emit('update:columns', columns);
+    const pinned = [...columns.filter(i => i.pinned)];
+    const unpinned = [...columns.filter(i => !i.pinned)];
+    this.state.columns = [...pinned, ...unpinned].map((item, key) => ({ ...item, index: key }));
+    this.$emit('update:columns', this.state.columns);
+    this.saveTableState();
   }
 }
 </script>

package/src/components/table/TableBody.vue

@@ -1,15 +1,10 @@
 <template>
 
-  <recycle-scroller
-    class="scroller"
-    page-mode
-    :items="rows"
-    :item-size="rowHeight"
-    key-field="Id"
-    v-slot="{ item }"
-    direction="vertical"
-  >
-    <div group="items" data-test="table-item" class="table-view-item grouped draggable-item">
+  <div class="scroller">
+    <div
+      v-for="(item, n) in rows"
+      :key="n"
+      group="items" data-test="table-item" class="table-view-item grouped draggable-item">
       <div class="table-row-template">
         <div accept-group="items" class="table-view-body-space"></div>
         <div class="shadow-area">
@@ -24,17 +19,10 @@
         </div>
         <div class="indicator sticky">
           <div class="fill on-rest table-view-row-count">
-            <span>{{ item.Id }}</span>
+<!--            <span>{{ item[idProperty] }}</span>-->
           </div>
           <div class="fill on-hover">
-            <a href="" data-test="table-item-expand">
-              <i class="ic-expand"></i>
-            </a>
-            <div class="">
-              <a data-test="table-row-generator" href="">
-                <i class="ic-plus"></i>
-              </a>
-            </div>
+            <itf-checkbox :value="item[idProperty]" />
           </div>
         </div>
         <div accept-group="items" class="table-item-inner">
@@ -44,12 +32,18 @@
               :data-column="n"
               :style="`width: ${column.width}px; left: ${column.left}px;`"
               :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow}"
-              class="table-view-item-value d-flex h-100 align-items-stretch px-2">
+              class="table-view-item-value d-flex h-100 align-items-stretch">
               <slot :name="`column.${column.name}`" :item="item" :column="column">
-                <template v-if="editTypes[column.Type]">
-                  <property-inline-edit :value="item[column.field]" :field="column" editable focused />
+                <template v-if="column.editable">
+                  <slot :name="`edit.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
+                    <div class="px-1 py-1 w-100"><itf-text-field :value="getValue(item, column)" /></div>
+                  </slot>
+                </template>
+                <template v-else>
+                  <slot :name="`format.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
+                    <div class="px-2 w-100">{{getValue(item, column)}}</div>
+                  </slot>
                 </template>
-                <div v-else v-text="item.Name" />
               </slot>
             </div>
           </template>
@@ -61,7 +55,7 @@
         </div>
       </div>
     </div>
-  </recycle-scroller>
+  </div>
 </template>
 <style lang="scss">
 .table-row-template {
@@ -70,7 +64,6 @@
   align-items: stretch;
 }
 .table-item-inner {
-  height: 100%;
   flex-grow: 1;
   position: relative;
   display: flex;
@@ -83,7 +76,6 @@
   border-right: 1px solid var(--bs-border-color);
   border-bottom: 1px solid var(--bs-border-color);
   align-items: stretch;
-  height: 100%;
   display: flex;
   position: relative;
   line-height: var(--itf-table-line-height);
@@ -108,7 +100,7 @@
     }
   }
   &:hover {
-    background-color: var(--itf-table-hover-bg);
+    background-color: var(--bs-tertiary-bg);
   }
 
   &.sticky {
@@ -119,20 +111,19 @@
 }
 
 .table-item-inner .extra {
-  height: 100%;
   flex-grow: 1;
   border-color: var(--bs-border-color);
 }
 
 .indicator {
-  height: 100%;
+  //height: 100%;
   left: var(--shadow-area-width);
   width: var(--indicator-area-width);
   z-index: 4;
   position: -webkit-sticky;
   position: sticky;
   background-color: var(--bs-body-bg);
-  border-right: 1px solid var(--bs-border-color);
+  //border-right: 1px solid var(--bs-border-color);
   border-bottom: 1px solid var(--bs-border-color);
   display: flex;
   align-items: center;
@@ -140,6 +131,31 @@
   min-width: var(--itf-table-min-width);
 }
 
+.table-row-template, .table-view-header-value {
+  .form-check {
+    padding: 0;
+    margin-bottom: 0;
+
+    .form-check-input {
+      margin-left: 0;
+    }
+  }
+}
+.table-row-template {
+  .on-hover {
+    display: none;
+  }
+  &:hover, .permanent-checkboxes & {
+    .on-rest {
+      display: none;
+    }
+
+    .on-hover {
+      display: block;
+    }
+  }
+}
+
 .table-item-inner .boundary {
   z-index: 3;
   position: absolute;
@@ -172,7 +188,7 @@
   bottom: 0;
 }
 .table-small-row .table-view-item {
-  height: var(--table-row-height);
+  // height: var(--table-row-height);
 }
 .resize-observer {
   position: absolute;
@@ -191,27 +207,33 @@
 </style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
+import get from 'lodash/get';
 import { RecycleScroller } from 'vue-virtual-scroller'
-import sortBy from 'lodash/sortBy';
-import PropertyInlineEdit from '../customize/PropertyInlineEdit.vue';
+import itfCheckbox from '../checkbox/Checkbox.vue';
+import itfTextField from '../text-field/TextField.vue';
 import { INLINE_TYPES } from '../customize/constants';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({
   name: 'itfTableBody',
   components: {
-    RecycleScroller,
-    PropertyInlineEdit
+    itfCheckbox,
+    itfTextField,
+    RecycleScroller
   }
 })
 class itfTableBody extends Vue {
   @Prop() columns;
   @Prop() rows;
+  @Prop() idProperty;
   @Prop(Boolean) showAddColumn;
-  @Prop({ type: Number, default: 40 }) rowHeight;
 
   editTypes = {};
 
+  getValue(item, column) {
+    return get(item, column.property);
+  }
+
   get visibleAttributes() {
     return this.columns;
   }