@itfin/components 1.3.34 → 1.3.36

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

@@ -24,6 +24,7 @@ class itfDropdown extends Vue {
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: Boolean }) text;
   @Prop({ type: Boolean }) appendToBody;
+  @Prop({ type: Boolean }) appendToContext;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
   @Prop({ type: Object, default: () => ({}) }) menuOptions;
@@ -33,22 +34,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

@@ -22,6 +22,7 @@ class itfDropdownMenu extends Vue {
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: Boolean }) text;
   @Prop({ type: Boolean }) appendToBody;
+  @Prop({ type: Boolean }) appendToContext;
   @Prop({ type: String }) toggleId;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
@@ -39,10 +40,14 @@ class itfDropdownMenu extends Vue {
     const { default: Dropdown } = await import('bootstrap/js/src/dropdown.js');
     let context = document.body;
     this.modalEl = new Dropdown(toggle, {
-      reference: 'toggle',
+      reference: 'parent',
       autoClose: this.autoclose
     });
-    if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
+    if (this.appendToContext && this.$el instanceof Node && this.$el.parentNode) {
+      context = this.$el.closest('.itf-append-context') || document.body;
+      this.$el.parentNode.removeChild(this.$el);
+      context.appendChild(this.$el); // should append only to body
+    } else if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
       context.appendChild(this.$el); // should append only to body
     }
@@ -57,6 +62,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,39 @@
 <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"
+            @update="$emit('update', { ...$event, group, groupIndex: 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,15 +70,22 @@
 }
 </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';
 import itfTableHeader from './TableHeader.vue';
+import itfTableBody from "@/components/table/TableBody.vue";
 
 export default @Component({
   name: 'itfTable2',
+  provide() {
+    return { tableEl: this }; // do not use Provide from vue-property-decorator
+  },
   components: {
+    itfTableBody,
+    itfCheckboxGroup,
     itfTableHeader,
     itfButton,
     itfIcon,
@@ -81,16 +93,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 +176,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>