@itfin/components 2.0.22 → 2.0.23

package/package.json

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

package/src/components/filter/FilterBadge.vue

@@ -36,6 +36,16 @@
           @input="onFilterChange({ value: $event })"
         />
       </template>
+      <template v-else-if="type === 'month'">
+        <itf-date-picker-inline
+          style="margin: -.5rem"
+          start-view="months"
+          min-view="months"
+          :value="value.value"
+          only-calendar
+          @input="onFilterChange({ value: $event })"
+        />
+      </template>
       <template v-else-if="type === 'date'">
         <itf-date-picker-inline
           style="margin: -.5rem"

package/src/components/filter/FilterPanel.vue

@@ -365,7 +365,11 @@ class FilterPanel extends Vue {
       }
     } else if (facet.type === 'date') {
       const date = DateTime.fromISO(value.value);
-      value.label = (date.isValid ? value.value : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('dd MMM yyyy');
+      value.label = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('dd MMM yyyy');
+      value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
+    } else if  (facet.type === 'month') {
+      const date = DateTime.fromISO(value.value);
+      value.label = capitalizeFirstLetter((date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('LLLL yyyy'));
       value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
     } else if (facet.type === 'facets-list') {
       const firstItem = facet.options.items.find(item => item.value === (Array.isArray(value.value) ? value.value[0] : value.value));
@@ -404,6 +408,10 @@ class FilterPanel extends Vue {
     }
     value.hidden = facet.options?.hidden ?? false;
     return value;
+
+    function capitalizeFirstLetter(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    }
   }
 }
 </script>