@itfin/components 1.2.114 → 1.2.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.114",
+  "version": "1.2.116",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -34,13 +34,13 @@
     "luxon": "^3.3.0",
     "pdfjs-dist": "^2.10.377",
     "tippy.js": "^6.3.2",
-    "vue": "^2.6.12",
     "vue-imask": "^6.6.3",
     "vue-property-decorator": "^9.1.2",
     "vue-swatches": "^2.1.1",
     "vue-virtual-scroller": "^1.1.2"
   },
   "devDependencies": {
+    "vue": "^2.6.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",

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

@@ -61,6 +61,24 @@
   cursor: pointer;
   transition: background-color 0.16s linear 0s;
 
+  &:focus {
+    -webkit-mask-image: none!important;
+  }
+  &: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;
+    top: -3px;
+    left: -3px;
+    right: -3px;
+    bottom: -3px;
+    outline: none;
+  }
   &.itf-button__block {
     display: block;
     width: 100%;

package/src/components/checkbox/Radio.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="itf-radio form-check" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium }">
     <input class="form-check-input" :id="id" type="radio" :name="radioName" v-model="isChecked" :value="true" :disabled="disabled" />
-    <label :for="id" slot="label" class="form-check-label">
-      {{label}}
-      <slot name="icon"></slot>
+    <label :for="id" class="form-check-label">
+      <slot name="label">
+        {{label}}
+        <slot name="icon"></slot>
+      </slot>
     </label>
   </div>
 </template>

package/src/components/filter/Rule.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="form-group and-or-rule row">
+    <div class="col-3">
+      <select class="form-control input-sm" v-model="key">
+        <option v-for="option in options.keys" :value="option.id">
+          {{option.name}}
+        </option>
+      </select>
+    </div>
+
+    <div class="col-3">
+      <select class="form-control input-sm" v-model="operator">
+        <option v-for="option in options.operators" :value="option.id">
+          {{option.name}}
+        </option>
+      </select>
+    </div>
+
+    <div class="col-3">
+      <input type="text" class="form-control input-sm" v-model="value" placeholder="">
+    </div>
+    <div class="col-3">
+      <itf-button small @click.prevent="deleteSelf()">
+        <itf-icon name="close" />
+      </itf-button>
+    </div>
+  </div>
+</template>
+<style>
+.and-or-rule {
+  position: relative;
+  margin-left: 15px !important;
+  padding-left: 0;
+}
+
+.and-or-rule:before,
+.and-or-rule:after {
+  content: '';
+  position: absolute;
+  left: -1px;
+  width: 16px;
+  height: calc(50% + 15px);
+  border-color: #c0c5e2;
+  border-style: solid;
+}
+
+.and-or-rule:before {
+  top: -15px;
+  border-width: 0 0 2px 2px;
+}
+
+.and-or-rule:after {
+  top: 50%;
+  border-width: 0 0 0 2px;
+}
+
+.and-or-rule:last-child:after {
+  border: none;
+}
+</style>
+<script>
+import { Component, Prop, Watch, Vue } from "vue-property-decorator";
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+
+export default @Component({
+  name: 'itfRule',
+  components: { itfButton, itfIcon }
+})
+class itfRule extends Vue {
+  @Prop() options;
+
+  key = -99;
+
+  operator = -99;
+
+  value = '';
+
+  @Watch('options.keys.options')
+  onOptionUpdated() {
+    this.key = -99;
+  }
+
+  @Watch('options.conditions.options')
+  onOption2Updated() {
+    this.condition = -99;
+  }
+
+  deleteSelf () {
+    this.$emit('delete-rule');
+  }
+
+  queryFormStatus () {
+    return {
+      'key': this.key,
+      'operator': this.operator,
+      'value': this.value
+    }
+  }
+
+  fillRuleStatus (data) {
+    this.key = data.key;
+    this.operator = data.operator;
+    this.value = data.value;
+  }
+}
+</script>

package/src/components/filter/RuleGroup.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="and-or-template col-12" :class="first ? 'and-or-first' : '' ">
+    <div class="form-group and-or-top col-12">
+      <div class="col-5" style="padding: 0">
+        <button class="btn btn-xs btn-purple-outline btn-radius"
+                :class=" isAnd ? 'btn-purple-outline-focus' : '' " @click.prevent="clickAnd">
+          &nbsp;And&nbsp;
+        </button>
+        <button class="btn btn-xs btn-purple-outline btn-radius"
+                :class=" !isAnd ? 'btn-purple-outline-focus' : '' " @click.prevent="clickOr">
+          &nbsp;Or&nbsp;
+        </button>
+      </div>
+
+      <div class="col-7 btn-and-or">
+        <itf-button v-if="!first" class="btn btn-xs btn-purple pull-right" @click.prevent="deleteSelf()">
+          <i class="fa fa-fw fa-close"></i>
+        </itf-button>
+        <button class="btn btn-xs btn-purple pull-right" @click.prevent="addGroup"> + ( group ) </button>
+        <button class="btn btn-xs btn-purple add-rule pull-right" @click.prevent="addRule"> + add </button>
+      </div>
+    </div>
+
+    <rule
+        v-for="(rule, index) in rules" ref="rules"
+        :options="options" :key="rule" @delete-rule="deleteRule(index)">
+    </rule>
+
+    <itf-rule-group
+        class="and-or-offset col-11"
+        v-for="(group, index) in groups" ref="groups"
+        :options="options" :key="group" @delete-group="deleteGroup(index)">
+    </itf-rule-group>
+
+  </div>
+</template>
+<style>
+.and-or-template {
+  padding: 8px;
+  position: relative;
+  border-radius: 3px;
+  border: 1px solid #6d77b8;
+  border-top: 3px solid #d2d6de;
+  margin-bottom: 20px;
+  /* width: 100%; */
+  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+  border-top-color: #6d77b8;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.and-or-template:before,
+.and-or-template:after {
+  content: '';
+  position: absolute;
+  left: -17px;
+  width: 16px;
+  height: calc(50% + 18px);
+  border-color: #c0c5e2;
+  border-style: solid;
+}
+
+.and-or-template:before {
+  top: -18px;
+  border-width: 0 0 2px 2px;
+}
+
+.and-or-template:after {
+  top: 50%;
+  border-width: 0 0 0 2px;
+}
+
+.and-or-first:before,
+.and-or-first:after,
+.and-or-template:last-child:after {
+  border: none;
+}
+
+.and-or-top,
+.btn-and-or {
+  padding: 0;
+}
+
+.btn-and-or button {
+  margin-left: 4px;
+}
+
+.and-or-offset {
+  margin-left: 30px;
+}
+</style>
+<script>
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
+import itfButton from '../button/Button.vue';
+import Rule from './Rule'
+
+export default @Component({
+  name: 'itfRuleGroup',
+  components: { itfButton, Rule }
+})
+class itfRule extends Vue {
+  @Prop({ type: Object, required: true }) options;
+  @Prop({ type: Boolean, default: false }) first;
+
+  isAnd = true;
+  groups = [];
+  rules = [];
+
+  created () {
+    this.addRule();
+  }
+
+  clickAnd () {
+    this.isAnd = true;
+  }
+
+  clickOr () {
+    this.isAnd = false;
+  }
+
+  addRule () {
+    var id = this.generateId();
+    this.rules.push(id);
+  }
+
+  addGroup () {
+    var id = this.generateId();
+    this.groups.push(id);
+  }
+
+  deleteSelf () {
+    this.$emit('delete-group');
+  }
+
+  deleteRule (index) {
+    this.rules.splice(index, 1);
+  }
+
+  deleteGroup (index) {
+    this.groups.splice(index, 1);
+  }
+
+  queryFormStatus () {
+    var query = {};
+    var rules = this.$refs.rules || {};
+    var groups = this.$refs.groups || {};
+    var i, j;
+
+    query['condition'] = this.isAnd ? 'AND' : 'OR';
+    query['rules'] = [];
+    for(i = 0; i < rules.length; i++){
+      query.rules.push(rules[i].queryFormStatus ());
+    }
+    for(j = 0; j < groups.length; j++){
+      query.rules[query.rules.length] = groups[j].queryFormStatus();
+    }
+    return query;
+  }
+
+  fillFormStatus (data) {
+    var i, len;
+    var group = this;
+    group.rules = [];
+    group.groups = [];
+    if(data){
+      group.isAnd = /and/i.test(data.condition);
+      len = data.rules.length;
+      for(i = 0; i < len; i++){
+        if(data.rules[i].condition){
+          group.groups.push(group.generateId());
+          (function (i, index) {
+            group.$nextTick(function () {
+              group.$refs.groups[index].fillFormStatus(data.rules[i]);
+            });
+          })(i, group.groups.length - 1);
+        }
+        else {
+          group.rules.push(group.generateId());
+          (function (i, index) {
+            group.$nextTick(function () {
+              group.$refs.rules[index].fillRuleStatus(data.rules[i]);
+            });
+          })(i, group.rules.length - 1);
+        }
+      }
+    }
+  }
+
+  generateId () {
+    return 'xxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+      return v.toString(16);
+    });
+  }
+}
+</script>

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

@@ -0,0 +1,69 @@
+import { storiesOf } from '@storybook/vue';
+import itfRule from './Rule.vue';
+import itfRuleGroup from './RuleGroup.vue';
+
+storiesOf('Common', module)
+  .add('Filter', () => ({
+    components: {
+      itfRule,
+      itfRuleGroup
+    },
+    data() {
+      return {
+        options: {
+          keys: [{
+            name: 'Choose Key',
+            id: -99
+          },{
+            name: 'Crash Number',
+            id: 134
+          },{
+            name: 'Daily Startup',
+            id: 256
+          }],
+          operators: [{
+            name: 'Choose Operator',
+            id: -99
+          },{
+            name: 'equal to',
+            id: '>'
+          },{
+            name: 'not equal to',
+            id: '='
+          },{
+            name: 'less',
+            id: '<'
+          }]
+        },
+        isVisible: false,
+        isItemEdit: false,
+        from: '2021-01-16',
+        to: null,
+        dates: [],
+        customDays: {
+          '2021-10-21': { text: '🎉', class: 'test' }
+        }
+      }
+    },
+    methods: {
+      submit() {
+        console.info('saved');
+      },
+      reset() {
+        this.$refs.form.resetValidation();
+      }
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+
+  <pre>
+
+  </pre>
+
+      <h2>Example</h2>
+
+      <itf-rule-group :options="options" first />
+    </div>`,
+  }));

package/src/helpers/validators.js

@@ -22,120 +22,120 @@ function isEmpty(v) {
 }
 
 export function differentValidation (value, message) {
-  return (v, $t) => !v || !(v === value) || (message || $t('components.theValueMustBeDifferent'));
+  return (v, $t = (s) => s) => !v || !(v === value) || (message || $t('components.theValueMustBeDifferent'));
 }
 
 export function mediumTextValidation (message) {
-  return (v, $t) => !v || ((v || '').toString().trim().length <= MEDIUM_TEXT_LENGTH) || (message || $t('components.mediumTextLength'));
+  return (v, $t = (s) => s) => !v || ((v || '').toString().trim().length <= MEDIUM_TEXT_LENGTH) || (message || $t('components.mediumTextLength'));
 }
 
 export function lengthValidation (length, message) {
-  return (v, $t) => !v || ((v || '').toString().trim().length <= length) || (message || $t('components.mustBeLessThanLengthCharacters', {length}));
+  return (v, $t = (s) => s) => !v || ((v || '').toString().trim().length <= length) || (message || $t('components.mustBeLessThanLengthCharacters', {length}));
 }
 
 export function minLengthValidation (length, message) {
-  return (v, $t) => !v || ((v || '').toString().trim().length >= length) || (message || $t('components.mustBeMoreThanLengthCharacters', {length}));
+  return (v, $t = (s) => s) => !v || ((v || '').toString().trim().length >= length) || (message || $t('components.mustBeMoreThanLengthCharacters', {length}));
 }
 
 export function emailValidation (message) {
-  return (v, $t) => !v || !!v.toString().match(EMAIL_REGEXP) || (message || $t('components.pleaseEnterAValidEmail'));
+  return (v, $t = (s) => s) => !v || !!v.toString().match(EMAIL_REGEXP) || (message || $t('components.pleaseEnterAValidEmail'));
 }
 
 export function emailListValidation (message) {
-  return (v, $t) => !v || !!v.toString().match(EMAIL_LIST_REGEXP) || (message || $t('components.pleaseEnterValidCommaSeparatedEmailAddressesToSendInvoicing'));
+  return (v, $t = (s) => s) => !v || !!v.toString().match(EMAIL_LIST_REGEXP) || (message || $t('components.pleaseEnterValidCommaSeparatedEmailAddressesToSendInvoicing'));
 }
 
 export function urlValidation (message) {
-  return (v, $t) => !v || !!v.toString().match(URL_REGEXP) || (message || $t('components.pleaseEnterValidURL'));
+  return (v, $t = (s) => s) => !v || !!v.toString().match(URL_REGEXP) || (message || $t('components.pleaseEnterValidURL'));
 }
 
 export function hexValidation (message) {
-  return (v, $t) => !v || !!v.toString().match(HEX_REGEXP) || (message || $t('components.pleaseEnteraValidHex'));
+  return (v, $t = (s) => s) => !v || !!v.toString().match(HEX_REGEXP) || (message || $t('components.pleaseEnteraValidHex'));
 }
 
 export function passMatchValidation (password, message) {
-  return (v, $t) => !v || !!v.toString().match(`^${password}$`) || (message || $t('components.passwordsDontMatch'));
+  return (v, $t = (s) => s) => !v || !!v.toString().match(`^${password}$`) || (message || $t('components.passwordsDontMatch'));
 }
 
 export function emptyValidation (message) {
-  return (v, $t) => !isEmpty(v) || (message || $t('components.thisFieldIsRequired'));
+  return (v, $t = (s) => s) => !isEmpty(v) || (message || $t('components.thisFieldIsRequired'));
 }
 
 export function emptyArrayValidation (message) {
-  return (v, $t) => (Array.isArray(v) && v.length > 0) || (message || $t('components.thisFieldIsRequired'));
+  return (v, $t = (s) => s) => (Array.isArray(v) && v.length > 0) || (message || $t('components.thisFieldIsRequired'));
 }
 
 export function doubleValidation (message) {
-  return (v, $t) => !v || !!(v + '').match(DOUBLE_REGEXP) || (message || $t('components.thisFieldMustBeANumberFormatZero'));
+  return (v, $t = (s) => s) => !v || !!(v + '').match(DOUBLE_REGEXP) || (message || $t('components.thisFieldMustBeANumberFormatZero'));
 }
 
 export function minMaxValidation (min = 0, max = 100, message) {
-  return (v, $t) => !v || (v >= min && v <= max) || (message || $t('components.theValueMustBeGreaterThanOrEqualToMinAndMax', {min, max}));
+  return (v, $t = (s) => s) => !v || (v >= min && v <= max) || (message || $t('components.theValueMustBeGreaterThanOrEqualToMinAndMax', {min, max}));
 }
 
 export function minValidation (min = 0, message) {
-  return (v, $t) => (!isEmpty(v) && (Number(v) >= min)) || (message || $t('components.theValueMustBeGreaterThanOrEqualToMin', {min}));
+  return (v, $t = (s) => s) => (!isEmpty(v) && (Number(v) >= min)) || (message || $t('components.theValueMustBeGreaterThanOrEqualToMin', {min}));
 }
 
 export function maxValidation (max, message) {
-  return (v, $t) => (!isEmpty(v) && (Number(v) <= max)) || (message || $t('components.mustBeLessThanMax'));
+  return (v, $t = (s) => s) => (!isEmpty(v) && (Number(v) <= max)) || (message || $t('components.mustBeLessThanMax'));
 }
 
 export function preventStuffingValidation (message) {
-  return (v, $t) => !v || (v.replace(/(.{4,}?)(?:\1{3,})/g, (text, subtext) => /^(\s*(<(\/?[^>]+)>|&nbsp;|[^\s]{0,3})\s*|(.)\4+)$/.test(subtext) ? text : '') === v) || (message || $t('components.thisIsntABalidDescription'));
+  return (v, $t = (s) => s) => !v || (v.replace(/(.{4,}?)(?:\1{3,})/g, (text, subtext) => /^(\s*(<(\/?[^>]+)>|&nbsp;|[^\s]{0,3})\s*|(.)\4+)$/.test(subtext) ? text : '') === v) || (message || $t('components.thisIsntABalidDescription'));
 }
 
 export function preventUrlsValidation (message) {
-  return (v, $t) => !v || !v.match(LINK_URL_REGEXP) || (message || $t('components.linksAreNotAllowedInThisField'));
+  return (v, $t = (s) => s) => !v || !v.match(LINK_URL_REGEXP) || (message || $t('components.linksAreNotAllowedInThisField'));
 }
 
 export function financeAccountCodeValidation (message) {
-  return (v, $t) => !v || v.match(/^\d+(\.\d+)*$/g) || (message || $t('components.theValueMustBeginAndEndWithANumberAndContainOnlyNumbersOrDots'));
+  return (v, $t = (s) => s) => !v || v.match(/^\d+(\.\d+)*$/g) || (message || $t('components.theValueMustBeginAndEndWithANumberAndContainOnlyNumbersOrDots'));
 }
 
 export function preventHtmlValidation (message) {
-  return (v, $t) => !v || !v.match(HTML_MARKUP_REGEXP) || (message || $t('components.pleaseDontUseHTMLMarkup'));
+  return (v, $t = (s) => s) => !v || !v.match(HTML_MARKUP_REGEXP) || (message || $t('components.pleaseDontUseHTMLMarkup'));
 }
 
 export function preventLinkedinValidation (message) {
-  return (v, $t) => !v || !v.match(LINKED_IN_REGEXP) || (message || $t('components.beforeYouContinueMakeSureYourProfileDoesNotIncludeYourLinkedInContactInformation'));
+  return (v, $t = (s) => s) => !v || !v.match(LINKED_IN_REGEXP) || (message || $t('components.beforeYouContinueMakeSureYourProfileDoesNotIncludeYourLinkedInContactInformation'));
 }
 
 export function preventCapitalsValidation (message) {
-  return (v, $t) => !v || !(v.replace(/[A-Z]/g, '').length < v.length / 2) || (message || $t('components.tooManyCapitalLetters'));
+  return (v, $t = (s) => s) => !v || !(v.replace(/[A-Z]/g, '').length < v.length / 2) || (message || $t('components.tooManyCapitalLetters'));
 }
 
 export function preventSpecialCharsValidation (message) {
-  return (v, $t) => !v || !!v.match(SPECIAL_CHARS_REGEXP) || (message || $t('components.yourtitleCannotIncludeSpecialCharactersLike'));
+  return (v, $t = (s) => s) => !v || !!v.match(SPECIAL_CHARS_REGEXP) || (message || $t('components.yourtitleCannotIncludeSpecialCharactersLike'));
 }
 
 export function preventGreetingsValidation (message) {
-  return (v, $t) => !v || !v.match(GREETINGS_REGEXP) || (message || $t('components.yourTitleShouldDescribeTheWorkYouDo'));
+  return (v, $t = (s) => s) => !v || !v.match(GREETINGS_REGEXP) || (message || $t('components.yourTitleShouldDescribeTheWorkYouDo'));
 }
 
 export function preventPhoneValidation (message) {
-  return (v, $t) => !v || !v.match(PHONE_REGEXP) || (message || $t('components.pleaseRemoveAnyPhoneNumberFromThisField'));
+  return (v, $t = (s) => s) => !v || !v.match(PHONE_REGEXP) || (message || $t('components.pleaseRemoveAnyPhoneNumberFromThisField'));
 }
 
 export function allowDigitsOnlyValidation (message) {
-  return (v, $t) => !v || !!v.match(/^\d+$/) || (message || $t('components.thisFieldMustContainsDigits'));
+  return (v, $t = (s) => s) => !v || !!v.match(/^\d+$/) || (message || $t('components.thisFieldMustContainsDigits'));
 }
 
 export function dateSameOrBeforeValidationLuxon (dateCompare, message) {
-  return (v, $t) => !v || DateTime.fromISO(v) <= DateTime.fromISO(dateCompare) || (message || $t('components.thedateShouldBeSameOrBefore', {date: DateTime.fromISO(dateCompare).toFormat('dd-MM-yyyy')}));
+  return (v, $t = (s) => s) => !v || DateTime.fromISO(v) <= DateTime.fromISO(dateCompare) || (message || $t('components.thedateShouldBeSameOrBefore', {date: DateTime.fromISO(dateCompare).toFormat('dd-MM-yyyy')}));
 }
 
 export function dateAfterValidationLuxon (dateCompare, message) {
-  return (v, $t) => !v || DateTime.fromISO(v) > DateTime.fromISO(dateCompare) || (message || $t('components.thedateShouldBeSameOrAfter', {date: DateTime.fromISO(dateCompare).toFormat('yyyy-MM-dd')}));
+  return (v, $t = (s) => s) => !v || DateTime.fromISO(v) > DateTime.fromISO(dateCompare) || (message || $t('components.thedateShouldBeSameOrAfter', {date: DateTime.fromISO(dateCompare).toFormat('yyyy-MM-dd')}));
 }
 
 export function hoursValidation (message) {
-  return (v, $t) => !v || parseHours(v) !== false || (message || $t('components.invalidTimeValueShouldBeInFormat'));
+  return (v, $t = (s) => s) => !v || parseHours(v) !== false || (message || $t('components.invalidTimeValueShouldBeInFormat'));
 }
 
 
 export function dateBeforeValidation (dateCompare, message) {
-  return (v, $t) => {
+  return (v, $t = (s) => s) => {
     if (!v || !dateCompare || typeof dateCompare !== 'string') {
       return true;
     }
@@ -147,7 +147,7 @@ export function dateBeforeValidation (dateCompare, message) {
 }
 
 export function dateAfterValidation (dateCompare, message) {
-  return (v, $t) => {
+  return (v, $t = (s) => s) => {
     if (!v || !dateCompare || typeof dateCompare !== 'string') {
       return true;
     }
@@ -159,7 +159,7 @@ export function dateAfterValidation (dateCompare, message) {
 }
 
 export function dateSameOrAfterValidation (dateCompare, message) {
-  return (v, $t) => {
+  return (v, $t = (s) => s) => {
     if (!v || !dateCompare || typeof dateCompare !== 'string') {
       return true;
     }
@@ -171,7 +171,7 @@ export function dateSameOrAfterValidation (dateCompare, message) {
 }
 
 export function dateSameOrBeforeValidation (dateCompare, message) {
-  return (v, $t) => {
+  return (v, $t = (s) => s) => {
     if (!v || !dateCompare || typeof dateCompare !== 'string') {
       return true;
     }