@itfin/components 1.3.33 → 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/datepicker/DatePickerInline.vue

@@ -68,15 +68,22 @@ class itfDatePickerInline extends Vue {
     const [
       { default: AirDatepicker },
       { default: localeEn },
-      { default: localeUk }
+      { default: localeUk },
+      { default: localeDe }
     ] = await Promise.all([
       import('babel-loader!air-datepicker/air-datepicker.js'),
       import('babel-loader!air-datepicker/locale/en'),
-      import('babel-loader!air-datepicker/locale/uk')
+      import('babel-loader!air-datepicker/locale/uk'),
+      import('babel-loader!air-datepicker/locale/de')
     ]);
 
+    const locales = {
+      en: localeEn,
+      uk: localeUk,
+      de: localeDe,
+    };
     this.calendar = new AirDatepicker(this.$refs.calendar, {
-      locale: this.$i18n.locale === 'en' ? localeEn : localeUk,
+      locale: locales[this.$i18n.locale] || locales.en,
       firstDay: 1,
       altFieldDateFormat: this.valueFormat,
       range: this.range,

package/src/components/datepicker/DateRangePickerInline.vue

@@ -68,19 +68,26 @@ class itfDatePickerInline extends Vue {
     const [
       { default: AirDatepicker },
       { default: localeEn },
-      { default: localeUk }
+      { default: localeUk },
+      { default: localeDe }
     ] = await Promise.all([
       import('babel-loader!air-datepicker/air-datepicker.js'),
       import('babel-loader!air-datepicker/locale/en'),
-      import('babel-loader!air-datepicker/locale/uk')
+      import('babel-loader!air-datepicker/locale/uk'),
+      import('babel-loader!air-datepicker/locale/de')
     ]);
 
+    const locales = {
+      en: localeEn,
+      uk: localeUk,
+      de: localeDe,
+    };
     this.calendar = new AirDatepicker(this.$refs.calendar, {
+      locale: locales[this.$i18n.locale] || locales.en,
       firstDay: 1,
       altFieldDateFormat: this.valueFormat,
       minDate: this.minDate,
       maxDate: this.maxDate,
-      locale: this.$i18n.locale === 'en' ? localeEn : localeUk,
       range: true,
       dynamicRange: true,
       toggleSelected: false,

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/filter/FilterBadge.vue

@@ -1,18 +1,35 @@
 <template>
 
 
-  <span class="border rounded d-inline-flex ps-3 pe-1 gap-1 align-items-center">
+  <span class="b-filter-badge border rounded d-inline-flex ps-3 pe-1 gap-1 align-items-center">
     Status
 
-
-      <select class="form-control input-sm filter-operation" v-model="operator">
-        <option v-for="option in operators" :value="option.id">
-          {{option.title}}
-        </option>
-      </select>
+    <itf-select
+      class="mx-2"
+      v-model="operator"
+      simple
+      :reduce="(item) => item.id"
+      :get-option-label="(item) => item.title"
+      :options="operators"
+    >
+      <template #selected-option="{ option }">
+        <span class="sign-box"> {{option.sign || option.title}}</span>
+      </template>
+      <template #option="{ option }">
+        <span class="sign-box" v-if="option.sign"> {{option.sign}}</span>
+        {{option.title}}
+      </template>
+      <template #open-indicator><div></div></template>
+    </itf-select>
 
     <div>
-      asda
+      <itf-select
+        simple
+        multiple
+        :get-option-label="(item) => item.title"
+        :options="[{ title:'text' }, { title:'text2' }]"
+      >
+      </itf-select>
     </div>
 
     <itf-button icon>
@@ -22,17 +39,15 @@
 
 </template>
 <style>
-.form-control.filter-operation {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  border-radius: 0;
-
-  &:focus, &:active {
-    box-shadow: none;
-    outline: none;
-  }
-  &:hover {
+.b-filter-badge {
+  padding: 1px;
+
+  .sign-box {
+    height: 24px;
+    text-align: center;
+    line-height: 22px;
+    width: 24px;
+    border-radius: 0.25rem;
     background-color: var(--bs-tertiary-bg);
   }
 }
@@ -41,6 +56,7 @@
 import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
 import {getOperatorsByType} from "./constants";
 import itfButton from '../button/Button.vue';
+import itfSelect from '../select/Select.vue';
 import itfIcon from '../icon/Icon.vue';
 
 
@@ -48,6 +64,7 @@ export default @Component({
   name: 'itfFilterBadge',
   components: {
     itfButton,
+    itfSelect,
     itfIcon
   }
 })

package/src/components/filter/FilterControl.vue

@@ -0,0 +1,105 @@
+<template>
+
+
+  <div class="d-flex align-items-center">
+    <itf-text-field
+      style="width: 250px;"
+      prepend-icon="search"
+      placeholder="Search"
+      @change="onQueryChanged"
+    />
+
+    <itf-dropdown class="ms-3" :button-options="{ secondary: true }">
+      <template #button>
+        <itf-icon name="flip_view" class="me-1" />
+        Group
+      </template>
+
+      <div v-for="(filter, n) of filters" :key="n" class="dropdown-item">
+        <slot name="dropdown-item" :item="filter">{{filter.text}}</slot>
+      </div>
+    </itf-dropdown>
+
+    <template v-if="filters && filters.length">
+      <itf-dropdown class="mx-3" :button-options="{ secondary: true }">
+        <template #button>
+          <itf-icon name="filter" class="me-1" />
+          Filter
+        </template>
+
+        <div v-for="(filter, n) of filters" :key="n" class="dropdown-item">
+          <slot name="dropdown-item" :item="filter">{{filter.text}}</slot>
+        </div>
+      </itf-dropdown>
+
+      <div class="flex-grow-1">
+        <itf-filter-badge type="string" />
+      </div>
+    </template>
+  </div>
+
+</template>
+<style>
+</style>
+<script>
+import { Component, Prop, Model, Vue, Watch } from 'vue-property-decorator';
+import itfButton from '../button/Button.vue';
+import itfTextField from '../text-field/TextField.vue';
+import itfDropdown from '../dropdown/Dropdown.vue';
+import itfIcon from '../icon/Icon.vue';
+import itfFilterBadge from './FilterBadge.vue';
+
+export default @Component({
+  name: 'itfFilterControl',
+  components: {
+    itfFilterBadge,
+    itfTextField,
+    itfDropdown,
+    itfButton,
+    itfIcon
+  }
+})
+class itfFilterControl extends Vue {
+  @Model('input') value;
+  @Prop({ type: String, default: 'query' }) queryField;
+  @Prop({ type: Array, default: () => ([]) }) filters;
+  @Prop(Boolean) urlSync;
+
+  mounted() {
+    if (this.urlSync) {
+      if (window.itfinUrlWatcher) {
+        throw new Error('urlSync component already exists');
+      }
+      window.itfinUrlWatcher = this;
+    }
+  }
+
+  @Watch('$route')
+  onRouteChange() {
+    const newValue = { ...(this.value || {}) };
+    const query = this.$route.query;
+    if (query) {
+      Object.keys(query).forEach((key) => {
+        newValue[key] = query[key];
+      });
+    }
+    this.$emit('input', newValue);
+  }
+
+  beforeDestroy() {
+    if (this.urlSync) {
+      window.itfinUrlWatcher = null;
+    }
+  }
+
+  onQueryChanged(value) {
+    const newValue = { ...(this.value || {}) };
+    newValue[this.queryField] = value;
+    if (this.urlSync) {
+      this.$router.push({ ...this.$route, query: newValue });
+    } else {
+      this.$emit('input', newValue);
+    }
+  }
+}
+</script>

package/src/components/filter/constants.js

@@ -5,12 +5,13 @@ export function getOperatorsByType(type) {
     {
       type: 'string',
       operators: [
-        { id: 'eq', title: 'equal' },
-        { id: 'notEq', title: 'not equal' },
-        { id: 'contains', title: 'contains' },
-        { id: 'noContains', title: 'not contains' },
-        { id: 'startsWith', title: 'starts with' },
-        { id: 'endsWith', title: 'ends with' }
+        { id: 'eq', title: 'equal', sign: '=' },
+        { id: 'notEq', title: 'not equal', sign: '≠' },
+        { id: 'contains', title: 'contains', sign: '∋' },
+        { id: 'noContains', title: 'not contains', sign: '∌' },
+        { id: 'startsWith', title: 'starts with', sign: 'A…' },
+        { id: 'endsWith', title: 'ends with', sign: '…Z' },
+        // { id: 'exists', title: 'exists', sign: '∃' }
       ]
     }
   ];

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

@@ -2,13 +2,15 @@ import { storiesOf } from '@storybook/vue';
 import itfRule from './Rule.vue';
 import itfRuleGroup from './RuleGroup.vue';
 import itfFilterBadge from './FilterBadge.vue';
+import itfFilterControl from './FilterControl.vue';
 
 storiesOf('Common', module)
   .add('Filter', () => ({
     components: {
       itfRule,
       itfRuleGroup,
-      itfFilterBadge
+      itfFilterBadge,
+      itfFilterControl
     },
     data() {
       return {
@@ -44,7 +46,22 @@ storiesOf('Common', module)
         dates: [],
         customDays: {
           '2021-10-21': { text: '🎉', class: 'test' }
-        }
+        },
+        filter: {},
+        filterFields: [
+          {
+            type: 'list',
+            text: 'Status',
+            options: [
+              { title: 'Active', value: 'active' },
+              { title: 'Inactive', value: 'inactive' },
+            ]
+          },
+          {
+            type: 'employee',
+            text: 'Employee'
+          },
+        ]
       }
     },
     methods: {
@@ -65,8 +82,19 @@ storiesOf('Common', module)
   </pre>
 
 
-      <itf-filter-badge type="string" />
+      <itf-filter-control url-sync v-model="filter" :filters="filterFields">
+        <template #dropdown-item="{ item }">
+          {{item.text}}
+        </template>
+        <template #item="{ item }">
+          {{item}}
+        </template>
+        <template #item="{ item }">
+          {{item}}
+        </template>
+      </itf-filter-control>
 
+      {{filter}}
 
       <h2>Example</h2>
 

package/src/components/select/Select.vue

@@ -4,8 +4,8 @@
     <div
       :id="`vs${uid}__combobox`"
       ref="toggle"
-      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
-      class="vs__dropdown-toggle form-control"
+      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess(), 'form-control': !simple }"
+      class="vs__dropdown-toggle"
       role="combobox"
       :aria-expanded="dropdownOpen.toString()"
       :aria-owns="`vs${uid}__listbox`"
@@ -212,6 +212,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * Remove form-control class
+     */
+    simple: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Can the user deselect an option by clicking it from
      * within the dropdown.

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'