@itfin/components 1.2.115 → 1.2.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.115",
+  "version": "1.2.117",
   "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/components/kanban/BoardColumn.vue

@@ -20,7 +20,7 @@
         <slot name="empty"></slot>
       </template>
       <template v-else>
-        <div v-for="(item, index) of items" :key="index" :data-card="index">
+        <div v-for="(item, index) of items" :key="index" :data-card="index" :class="item.hidden ? 'd-none' : ''">
           <div accept-group="board-cards"
                class="itf-board-card-space"
                @enter="cardHighlight(index, 'enter', 'drop')"

package/src/components/kanban/styles.scss

@@ -247,11 +247,22 @@
 }
 
 .itf-board-cards-wrapper {
+  display: flex;
+  flex-direction: column;
   overflow: auto;
   flex-grow: 1;
   padding-right: .25rem;
   padding-top: .5rem;
 
+  > div:first-child > .itf-board-card-space > .itf-board-header-dropzone {
+    top: -30px;
+    z-index: 100;
+  }
+
+  > .itf-board-card-space:last-child {
+    flex: 1;
+  }
+
   .draggable-source--is-dragging {
     position: relative !important;
     .itf-board-card {