fix: changed typescript types to correctly handle null/undefined

CHANGELOG.md

@@ -1,17 +1,21 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
-## [0.3.2] - 2021-03-18
+## [0.3.3] - 2022-04-29
+### Fixed
+- fix: changed typescript types to correctly handle null/undefined.
+
+## [0.3.2] - 2022-03-18
 ### Fixed
 - fix(Modal): disabled implicit attr inheritance in modals.
 - fix(ListView): do not assume a specific typescript type for pf-list-view rows.
 
-## [0.3.1] - 2021-02-08
+## [0.3.1] - 2022-02-08
 ### Fixed
 - fix(Layout): never pass undefined|null to emitted event update:collapsed.
 - fix(OUIA): reverted ouia component names to use V-PF3/ prefix.
 
-## [0.3.0] - 2021-02-03
+## [0.3.0] - 2022-02-03
 ### Added
 - refactor: converted the whole codebase to typescript.
 - feat(typescript): exported type definitions for all components.
@@ -407,7 +411,8 @@ disabled, as per PatternFly design guidelines.
 - `pf-toolbar` component
 - `pf-utilization-bar-chart` component
 
-[Unreleased]: https://github.com/mtorromeo/vue-patternfly/compare/v0.3.2...HEAD
+[Unreleased]: https://github.com/mtorromeo/vue-patternfly/compare/v0.3.3...HEAD
+[0.3.3]: https://github.com/mtorromeo/vue-patternfly/compare/v0.3.2...v0.3.3
 [0.3.2]: https://github.com/mtorromeo/vue-patternfly/compare/v0.3.1...v0.3.2
 [0.3.1]: https://github.com/mtorromeo/vue-patternfly/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/mtorromeo/vue-patternfly/compare/v0.2.11...v0.3.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-patternfly",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "PatternFly 3 components for Vue 3",
   "main": "dist/vue-patternfly.umd.js",
   "module": "dist/vue-patternfly.es.js",

src/components/Card.vue

@@ -2,7 +2,7 @@
   <div v-bind="ouiaProps" class="card-pf" :class="{'card-pf-accented': accented}">
     <div v-if="showHeader" :class="{'card-pf-heading': showTitlesSeparator, 'card-pf-heading-no-bottom': !showTitlesSeparator}">
       <slot name="header">
-        <pf-dropdown v-if="showFilterInHeader" class="card-pf-time-frame-filter" :text="currentFilter.label" menu-right>
+        <pf-dropdown v-if="showFilterInHeader" class="card-pf-time-frame-filter" :text="currentFilter?.label" menu-right>
           <li
             v-for="(item, i) in filter.filters"
             :key="i"
@@ -26,7 +26,7 @@
     </div>
 
     <div v-if="showFooter || showFilterInFooter" class="card-pf-footer">
-      <pf-dropdown v-if="showFilterInFooter" class="card-pf-time-frame-filter" :text="currentFilter.label" menu-right>
+      <pf-dropdown v-if="showFilterInFooter" class="card-pf-time-frame-filter" :text="currentFilter?.label" menu-right>
         <li
           v-for="(item, i) in filter.filters"
           :key="i"

src/components/ColumnPicker.vue

@@ -74,7 +74,7 @@ export default defineComponent({
 
   methods: {
     columnValue(column: Column, i: string | number | typeof Symbol.iterator | typeof Symbol.unscopables) {
-      let value = typeof i === 'string' ? i : column;
+      let value: Column | undefined = typeof i === 'string' ? i : column;
       if (typeof value === 'object') {
         value = typeof value.name === 'undefined' ? value.label : value.name;
       }
@@ -90,7 +90,7 @@ export default defineComponent({
       const iter = Array.isArray(this.columns) ? this.columns.entries() : Object.entries(this.columns);
       for (const [i, column] of iter) {
         const value = this.columnValue(column, i);
-        if (this.iValue.indexOf(value) >= 0) {
+        if (value && this.iValue.includes(value)) {
           sortedValue.push(value);
         }
       }

src/components/Combobox.vue

@@ -11,7 +11,7 @@
     <input v-if="name" type="hidden" :name="name" :value="modelValue" :disabled="effectiveDisabled" :required="required">
     <div class="input-group">
       <label v-if="withCheckbox" class="input-group-addon">
-        <input v-model="checked" type="checkbox" :name="typeof withCheckbox === 'string' ? withCheckbox : null" value="1">
+        <input v-model="checked" type="checkbox" :name="typeof withCheckbox === 'string' ? withCheckbox : undefined" value="1">
       </label>
 
       <input
@@ -51,7 +51,7 @@
         </li>
       </ul>
 
-      <slot name="dropdownTrigger" :disabled="effectiveDisabled" :clickHandler="dropdownClick">
+      <slot name="dropdownTrigger" :disabled="effectiveDisabled" :click-handler="dropdownClick">
         <a href="javascript:void(0)" role="button" class="input-group-addon dropdown-toggle" :class="{disabled: effectiveDisabled}" data-dropdown="dropdown" :disabled="effectiveDisabled" @click.prevent="dropdownClick">
           <span class="caret" />
           <pf-icon name="glyphicon-remove" />
@@ -82,7 +82,7 @@ export default defineComponent({
       default: null,
     },
     modelValue: {
-      type: [String, Number],
+      type: [String, Number] as PropType<string | number |null>,
       default: null,
     },
     placeholder: {
@@ -108,11 +108,11 @@ export default defineComponent({
       default: 'id',
     },
     match: {
-      type: Function,
+      type: Function as PropType<(o: NormalizedOption, q: string) => boolean>,
       default: (o: NormalizedOption, q: string) => o.label.toString().toLowerCase().includes(q.toLowerCase()),
     },
     highlight: {
-      type: Function,
+      type: Function as PropType<(o: NormalizedOption, q: string) => string>,
       default: (o: NormalizedOption, q: string) => o.label.replace(new RegExp(q.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'ig'), '<strong>$&</strong>'),
     },
     withCheckbox: {
@@ -123,8 +123,8 @@ export default defineComponent({
   },
 
   emits: {
-    update: (value: string | number) => value !== undefined,
-    'update:modelValue': (value: string | number) => value !== undefined,
+    update: (value: string | number | null) => value !== undefined,
+    'update:modelValue': (value: string | number | null) => value !== undefined,
   },
 
   setup(props) {
@@ -133,10 +133,10 @@ export default defineComponent({
 
   data(this: void) {
     return {
-      blurTimeout: null as ReturnType<typeof setTimeout> | null,
+      blurTimeout: undefined as ReturnType<typeof setTimeout> | undefined,
       showOptions: false,
-      filter: null as string,
-      active: null as string | number,
+      filter: null as string | null,
+      active: null as string | number | null,
       hasError: false,
       checked: false,
     };
@@ -148,7 +148,7 @@ export default defineComponent({
     },
 
     label() {
-      if (!this.hasValue || typeof this.optionsMap[this.modelValue] === 'undefined') {
+      if (this.modelValue === null || typeof this.optionsMap[this.modelValue] === 'undefined') {
         return '';
       }
       return this.optionsMap[this.modelValue].label;
@@ -173,15 +173,17 @@ export default defineComponent({
       if (this.filter === null) {
         return [];
       }
-      return Object.values(this.optionsMap).reduce((options, o) => {
+
+      const options = [];
+      for (const o of Object.values(this.optionsMap)) {
         if (this.match(o, this.filter)) {
           options.push({
             ...o,
             highlighted: this.highlight(o, this.filter),
           });
         }
-        return options;
-      }, []);
+      }
+      return options;
     },
 
     text: {
@@ -198,7 +200,7 @@ export default defineComponent({
     },
 
     effectiveDisabled() {
-      return this.disabled || (this.withCheckbox && !this.checked);
+      return this.disabled || Boolean(this.withCheckbox && !this.checked);
     },
   },
 
@@ -220,7 +222,7 @@ export default defineComponent({
   },
 
   methods: {
-    setValue(value: string | number) {
+    setValue(value: string | number | null) {
       this.showOptions = false;
       this.filter = null;
       if (value !== this.modelValue) {

src/components/DrawerGroup.vue

@@ -54,7 +54,7 @@ export default defineComponent({
 
   setup(props) {
     return {
-      activeGroup: inject<Component>('activeGroup', null),
+      activeGroup: inject<Component | null>('activeGroup', null),
       ...useOUIAProps(props),
     };
   },

src/components/DrawerNotification.vue

@@ -30,7 +30,7 @@
       class="pull-right"
       :variant="buttonVariant"
       :title="action.title"
-      @click="triggered(action)"
+      @click="action && triggered(action)"
     >
       {{ action.name }}
     </pf-button>
@@ -85,7 +85,7 @@ export default defineComponent({
   setup(props) {
     return {
       drawerExpanded: inject('drawerExpanded', false),
-      drawerDropdowns: inject<HTMLElement>('drawerDropdowns', null),
+      drawerDropdowns: inject<HTMLElement | undefined>('drawerDropdowns', undefined),
       ...useOUIAProps(props),
     };
   },

src/components/Dropdown.vue

@@ -172,25 +172,25 @@ export default defineComponent({
     },
 
     setDropdownPosition() {
-      if (!(this.$refs.dropdown instanceof HTMLElement) || !(this.$refs.trigger instanceof Element) || !this.appendTo) {
+      if (!(this.$refs.dropdown instanceof HTMLElement) || !(this.$refs.trigger instanceof Element) || !this.appendTo?.offsetParent) {
         return;
       }
 
       const rP = this.appendTo.offsetParent.getBoundingClientRect();
       const rT = this.$refs.trigger.getBoundingClientRect();
-      let rD: DOMRect;
+      let rD: DOMRect | undefined;
       if (this.menuRight || this.dropup) {
         rD = this.$refs.dropdown.getBoundingClientRect();
       }
 
       let top = rT.top - rP.top;
       let left = rT.left - rP.left;
 
-      if (this.menuRight) {
+      if (rD && this.menuRight) {
         left -= rD.width - rT.width;
       }
 
-      if (this.dropup) {
+      if (rD && this.dropup) {
         top -= rD.height;
       } else {
         top += rT.height;

src/components/FilterFields.vue

@@ -1,13 +1,13 @@
 <template>
   <div v-bind="ouiaProps" class="input-group">
-    <pf-dropdown v-if="showDropdown" :text="current.label" class="input-group-btn">
+    <pf-dropdown v-if="showDropdown" :text="current?.label" class="input-group-btn">
       <li v-for="(item, i) in normFields" :key="item.name">
         <a class="filter-field" role="menuitem" tabindex="-1" @click="selected = i">
           {{ item.label }}
         </a>
       </li>
     </pf-dropdown>
-    <pf-select v-if="isSelect" close-on-select class="filter-select" :placeholder="current.placeholder">
+    <pf-select v-if="current?.values" close-on-select class="filter-select" :placeholder="current.placeholder">
       <pf-option v-for="(item, i) in current.values" :key="i" :checked-value="item" @update:model-value="set($event as string)">
         {{ item }}
       </pf-option>
@@ -18,7 +18,7 @@
         class="form-control"
         type="text"
         :value="value"
-        :placeholder="showDropdown || current.placeholder ? current.placeholder : current.label"
+        :placeholder="showDropdown || current?.placeholder ? current?.placeholder : current?.label"
         @keyup.enter.stop="set"
       >
     </div>
@@ -79,7 +79,7 @@ export default defineComponent({
   },
 
   computed: {
-    current(): FilterField {
+    current(): FilterField | null {
       let selected = this.selected;
       if (!this.normFields[selected]) {
         if (!this.normFields.length) {
@@ -90,10 +90,6 @@ export default defineComponent({
       return this.normFields[selected];
     },
 
-    isSelect() {
-      return typeof this.current.values !== 'undefined';
-    },
-
     showDropdown() {
       return Object.keys(this.normFields).length > 1;
     },
@@ -120,16 +116,16 @@ export default defineComponent({
 
   methods: {
     normalizeField(fieldDefinition: FilterFieldDefinition, name?: string): FilterField {
-      const field: FilterField = {
-        name: typeof fieldDefinition === 'object' ? fieldDefinition.name : '',
-        label: typeof fieldDefinition === 'object' ? fieldDefinition.label : fieldDefinition,
+      const field: Partial<FilterField> = {
+        name: typeof fieldDefinition === 'object' ? fieldDefinition?.name : '',
+        label: typeof fieldDefinition === 'object' ? fieldDefinition?.label : fieldDefinition,
         placeholder: typeof fieldDefinition === 'object' ? fieldDefinition.placeholder : undefined,
       };
       field.name = name || field.name || field.label || '';
       if (!field.label) {
-        field.label = name;
+        field.label = field.name;
       }
-      return field;
+      return field as FilterField;
     },
 
     set(value: KeyboardEvent | string) {

src/components/FilterResults.vue

@@ -10,11 +10,11 @@
           <li v-for="(filter, i) in filters" :key="i">
             <span class="active-filter label label-info">
               {{ filter.label }}: {{ filter.value }}
-              <a><pf-icon name="pficon-close" @click="toolbar().clearFilter(i)" /></a>
+              <a><pf-icon name="pficon-close" @click="toolbar()?.clearFilter(i)" /></a>
             </span>
           </li>
         </ul>
-        <p><a v-if="filters.length > 0" class="clear-filters" @click="toolbar().clearAllFilters()">Clear All Filters</a></p>
+        <p><a v-if="filters.length > 0" class="clear-filters" @click="toolbar()?.clearAllFilters()">Clear All Filters</a></p>
       </div>
     </div>
   </div>

src/components/Icon.ts

@@ -27,7 +27,7 @@ export default defineComponent({
       classes.push('pficon');
       classes.push('pf-icon-img');
       style.backgroundImage = `url("${this.src}")`;
-    } else {
+    } else if (this.name) {
       const match = (/^(fa|pficon|glyphicon)-/).exec(this.name);
       if (match) {
         classes.push(match[1]);

src/components/Layout.vue

@@ -95,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { ref, provide, defineComponent, DefineComponent } from 'vue';
+import { ref, provide, defineComponent, DefineComponent, Ref } from 'vue';
 import { ouiaProps, useOUIAProps } from '../ouia';
 
 const PfLayout = defineComponent({
@@ -128,7 +128,7 @@ const PfLayout = defineComponent({
     const collapsed = ref(false);
     provide('layoutCollapsed', collapsed);
 
-    const modalsTarget = ref<HTMLElement>(null);
+    const modalsTarget: Ref<HTMLElement | null> = ref(null);
     provide('modalsTarget', modalsTarget);
 
     return {

src/components/ListItem.vue

@@ -6,10 +6,14 @@
     <slot>
       <div v-if="icon || iconSrc || $slots.left" class="list-view-pf-left">
         <slot name="left">
-          <pf-icon :name="icon" :src="iconSrc" :class="[
-            `list-view-pf-icon-${iconSize}`,
-            {[`list-view-pf-icon-${iconVariant}`]: iconVariant},
-          ]" />
+          <pf-icon
+            :name="icon"
+            :src="iconSrc"
+            :class="[
+              `list-view-pf-icon-${iconSize}`,
+              {[`list-view-pf-icon-${iconVariant}`]: iconVariant},
+            ]"
+          />
         </slot>
       </div>
       <div class="list-view-pf-body">

src/components/ListItemAdditionalInfo.vue

@@ -27,8 +27,8 @@ export default defineComponent({
   setup(props) {
     return {
       listGroupItemExpanded: inject('listGroupItemExpanded', false),
-      listGroupItemExpandedAdditional: inject<number>('listGroupItemExpandedAdditional', null),
-      listGroupItemAdditionalPortal: inject<string | RendererElement>('listGroupItemAdditionalPortal', null),
+      listGroupItemExpandedAdditional: inject<number | null>('listGroupItemExpandedAdditional', null),
+      listGroupItemAdditionalPortal: inject<string | RendererElement | null>('listGroupItemAdditionalPortal', null),
       ...useOUIAProps(props),
     };
   },