@itfin/components 1.3.33 → 1.3.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.33",
+  "version": "1.3.34",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/scss/components/select/_selected.scss

@@ -32,7 +32,7 @@
   display: inline-flex;
   appearance: none;
   margin-left: 4px;
-  padding: 0;
+  padding: 0 !important;
   border: 0;
   cursor: pointer;
   background: none;

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/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/text-field/TextField.vue

@@ -23,6 +23,7 @@
       @keypress="$emit('keypress', $event)"
       @blur="$emit('blur', $event)"
       @focus="$emit('focus', $event)"
+      @change="$emit('change', $event.target.value)"
       :min="min"
       :max="max"
       :step="step"