@itfin/components 1.4.3 → 1.4.5

package/package.json

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

package/src/components/datepicker/DateGranularityPicker.vue

@@ -129,7 +129,7 @@ class itfDateGranularityPicker extends Vue {
   @Prop({ type: [String, Date], default: ''}) maxDate;
   @Prop(Boolean) disabled;
 
-  granularity = 'yearly';
+  granularity = 'monthly';
 
   get granularities() {
     return [
@@ -137,6 +137,7 @@ class itfDateGranularityPicker extends Vue {
       { title: 'Quarterly', value: 'quarterly' },
       { title: 'Monthly', value: 'monthly' },
       { title: 'Weekly', value: 'weekly' },
+      { title: 'Daily', value: 'daily' },
       { title: 'Custom', value: 'manual' },
     ];
   }

package/src/components/modal/ItemEditor.vue

@@ -45,7 +45,7 @@
           v-if="!readonly"
           data-test="item-editor-cancel"
           :disabled="loading"
-          default
+          secondary
           class="me-2"
           @click="$emit('input', false)"
         >

package/src/components/view/View.vue

@@ -3,8 +3,8 @@
   <div v-loading="loading || loadingData" class="flex-grow-1 w-100 d-flex flex-column">
     <itf-filter-panel
       :search-placeholder="searchPlaceholder"
-      :search="activeTab !== 'list'"
-      :show-filter="activeTab !== 'list'"
+      :search="currentTab !== 'list'"
+      :show-filter="currentTab !== 'list'"
       class="py-2 px-3"
       :endpoint="filtersEndpoint"
       :panel="panel"
@@ -41,7 +41,8 @@
         </itf-dropdown>
 
         <itf-segmented-control
-          v-model="activeTab"
+          class="small"
+          v-model="currentTab"
           item-key="value"
           :items="tabs"
         >
@@ -55,10 +56,10 @@
       </template>
     </itf-filter-panel>
 
-    <template v-if="activeTab === 'list'">
-      <slot name="listView"></slot>
-    </template>
-    <slot v-else name="tableView">
+    <slot v-if="currentTab === 'list'" name="list-view"></slot>
+    <slot v-else-if="currentTab === 'board'" name="kanban-view"></slot>
+    <slot v-else-if="currentTab === 'calendar'" name="calendar-view"></slot>
+    <slot v-else name="table-view">
     <div class="flex-grow-1 px-3 d-flex flex-column">
       <div class="position-relative flex-grow-1">
         <itf-table
@@ -95,6 +96,7 @@
 
     <itf-pagination
       class="my-2 px-3"
+      v-if="showPagination"
       show-size
       :size="size"
       :items="items"
@@ -151,9 +153,15 @@ class itfView extends Vue {
   @Prop(String) itemsKey;
   @Prop(String) panelKey;
   @Prop(String) stateName;
+  @Prop({ type: String, default: 'table' }) tab;
   @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
   @Prop() panel;
   @Prop(Boolean) showActions;
+  @Prop({ type: Boolean, default: true }) showPagination;
+  @Prop(Boolean) listViewEnabled;
+  @Prop(Boolean) kanbanViewEnabled;
+  @Prop(Boolean) calendarViewEnabled;
+  @Prop(Boolean) tableViewEnabled;
 
   page = 1;
   total = 0;
@@ -164,18 +172,34 @@ class itfView extends Vue {
   loadingData = false;
   activeIds = [];
   tableColumns = [];
+  _currentTab = null;
 
-  activeTab= 'list';
+  get currentTab() {
+    return this.tab;
+  }
+
+  set currentTab(val) {
+    this.$emit('update:tab', val);
+  }
 
   get tabs() {
-    return [
-      { value: 'list', text: this.$t('list'), icon: 'list-view' },
-      { value: 'table', text: this.$t('table'), icon: 'table-view' },
-    ];
+    const views = [];
+    if (this.listViewEnabled) {
+      views.push({ value: 'list', text: this.$t('list'), icon: 'list-view' });
+    }
+    if (this.kanbanViewEnabled) {
+      views.push({ value: 'board', text: this.$t('board'), icon: 'kanban-view' });
+    }
+    if (this.calendarViewEnabled) {
+      views.push({ value: 'calendar', text: this.$t('calendar'), icon: 'calendar-view' });
+    }
+    if (this.tableViewEnabled) {
+      views.push({ value: 'table', text: this.$t('table'), icon: 'table-view' });
+    }
+    return views;
   }
 
   get tableSchema() {
-    console.log(123, this.tableColumns, this.schema)
     // return this.tableColumns || this.schema;
     if (this.tableColumns) {
       return {