@itfin/components 1.3.21 → 1.3.23

package/src/components/filter/FilterBadge.vue

@@ -0,0 +1,61 @@
+<template>
+
+
+  <span class="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>
+
+    <div>
+      asda
+    </div>
+
+    <itf-button icon>
+      <itf-icon name="close" />
+    </itf-button>
+  </span>
+
+</template>
+<style>
+.form-control.filter-operation {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+
+  &:focus, &:active {
+    box-shadow: none;
+    outline: none;
+  }
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+  }
+}
+</style>
+<script>
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
+import {getOperatorsByType} from "./constants";
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+
+
+export default @Component({
+  name: 'itfFilterBadge',
+  components: {
+    itfButton,
+    itfIcon
+  }
+})
+class itfFilterBadge extends Vue {
+  @Prop({ type: String, required: true }) type;
+
+  get operators() {
+    return getOperatorsByType(this.type);
+  }
+}
+</script>

package/src/components/filter/Rule.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-group and-or-rule row">
+  <div class="form-group and-or-rule d-flex">
     <div class="col-3">
       <select class="form-control input-sm" v-model="key">
         <option v-for="option in options.keys" :value="option.id">
@@ -8,10 +8,10 @@
       </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}}
+    <div style="width: 150px" class="px-2">
+      <select class="form-control input-sm input-filter" v-model="operator">
+        <option v-for="option in operators" :value="option.id">
+          {{option.title}}
         </option>
       </select>
     </div>
@@ -27,6 +27,9 @@
   </div>
 </template>
 <style>
+.input-filter {
+  background: var(--bs-primary-bg-subtle);
+}
 .and-or-rule {
   position: relative;
   margin-left: 15px !important;
@@ -63,12 +66,27 @@ import { Component, Prop, Watch, Vue } from "vue-property-decorator";
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 
+const operations = [
+  {
+    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' }
+    ]
+  }
+];
+
 export default @Component({
   name: 'itfRule',
   components: { itfButton, itfIcon }
 })
 class itfRule extends Vue {
   @Prop() options;
+  @Prop() type;
 
   key = -99;
 
@@ -76,6 +94,10 @@ class itfRule extends Vue {
 
   value = '';
 
+  get operators() {
+    return operations.find(op => op.type === this.type)?.operators || [];
+  }
+
   @Watch('options.keys.options')
   onOptionUpdated() {
     this.key = -99;

package/src/components/filter/RuleGroup.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="and-or-template col-12" :class="first ? 'and-or-first' : '' ">
+  <div>
+    <itf-dropdown>
+      <template #button>
+        <itf-icon name="filter" />
+        Filter
+      </template>
+
+      <div class="dropdown-item" @click="addGroup">Add group</div>
+      <div class="dropdown-item" @click="addRule">Add condition</div>
+    </itf-dropdown>
     <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"
@@ -16,14 +25,16 @@
         <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)">
+        v-for="(rule, index) in rules"
+        ref="rules"
+        :options="options"
+        :key="rule"
+        type="string"
+        @delete-rule="deleteRule(index)">
     </rule>
 
     <itf-rule-group
@@ -36,16 +47,8 @@
 </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,
@@ -91,11 +94,18 @@
 <script>
 import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
 import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+import itfDropdown from '../dropdown/Dropdown.vue';
 import Rule from './Rule'
 
 export default @Component({
   name: 'itfRuleGroup',
-  components: { itfButton, Rule }
+  components: {
+    itfIcon,
+    itfButton,
+    itfDropdown,
+    Rule
+  }
 })
 class itfRule extends Vue {
   @Prop({ type: Object, required: true }) options;

package/src/components/filter/constants.js

@@ -0,0 +1,19 @@
+
+
+export function getOperatorsByType(type) {
+  const operations = [
+    {
+      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' }
+      ]
+    }
+  ];
+
+  return operations.find((operation) => operation.type === type).operators;
+}

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

@@ -1,12 +1,14 @@
 import { storiesOf } from '@storybook/vue';
 import itfRule from './Rule.vue';
 import itfRuleGroup from './RuleGroup.vue';
+import itfFilterBadge from './FilterBadge.vue';
 
 storiesOf('Common', module)
   .add('Filter', () => ({
     components: {
       itfRule,
-      itfRuleGroup
+      itfRuleGroup,
+      itfFilterBadge
     },
     data() {
       return {
@@ -62,6 +64,10 @@ storiesOf('Common', module)
 
   </pre>
 
+
+      <itf-filter-badge type="string" />
+
+
       <h2>Example</h2>
 
       <itf-rule-group :options="options" first />

package/src/components/table/TableGroup.vue

@@ -150,7 +150,7 @@
   display: flex;
   width: fit-content;
   //margin-top: 20px;
-  margin-bottom: 20px ;
+  //margin-bottom: 20px ;
 
   .preline {
     display: flex;
@@ -298,7 +298,7 @@ class itfTableGroup extends Vue {
   get visibleColumns() {
     let list = this.columns;
     list = sortBy(list, (column) => column.pinned ? 0 : 1);
-    let left = 47;
+    let left = 57; // sum of first 2 cells
     const pinned = list.filter((column) => column.pinned && column.visible !== false);
     list = list.map((column, index) => {
       const item = {...column};

package/src/components/table/TableHeader.vue

@@ -36,39 +36,37 @@
                 </span>
               </template>
 
-              <ul class="dropdown-menu show ps-0" aria-labelledby="dropdownMenuOffset">
-                <li v-if="column.sortable">
-                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                    <itf-icon name="arrow_up" :size="16" class="me-1" />
-                    Sort By Asc
-                  </a>
-                </li>
-                <li v-if="column.sortable">
-                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                    <itf-icon name="arrow_down" :size="16" class="me-1" />
-                    Sort By Desc
-                  </a>
-                </li>
-                <li v-if="column.groupable">
-                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                    <itf-icon name="episodes" :size="16" class="me-1" />
-                    Group By
-                  </a>
-                </li>
-                <li>
-                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="togglePinned(n)">
-                    <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
-                    <span v-if="column.pinned">Unpin Column</span>
-                    <span v-else>Pin Column</span>
-                  </a>
-                </li>
-                <li>
-                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
-                    <itf-icon name="eye_no" :size="16" class="me-1" />
-                    Hide
-                  </a>
-                </li>
-              </ul>
+              <div v-if="column.sortable">
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                  <itf-icon name="arrow_up" :size="16" class="me-1" />
+                  Sort By Asc
+                </a>
+              </div>
+              <div v-if="column.sortable">
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                  <itf-icon name="arrow_down" :size="16" class="me-1" />
+                  Sort By Desc
+                </a>
+              </div>
+              <div v-if="column.groupable">
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                  <itf-icon name="episodes" :size="16" class="me-1" />
+                  Group By
+                </a>
+              </div>
+              <div>
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="togglePinned(n)">
+                  <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
+                  <span v-if="column.pinned">Unpin Column</span>
+                  <span v-else>Pin Column</span>
+                </a>
+              </div>
+              <div>
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
+                  <itf-icon name="eye_no" :size="16" class="me-1" />
+                  Hide
+                </a>
+              </div>
             </itf-dropdown>
           </div>
           <div v-if="n === sortedColumns.length - 1"