Vue directive like :class="{ 'css-class': isTrue }" that works with Ionic 4

toggleClass.directive.ts

/**
 * usage: 
 * 
 * <AnyComponent v-toggleClass="{ 'any-component--active': isActive }"></AnyComponent>
 */

// toggleClass.directive.ts
import { DirectiveOptions } from 'vue';

function toggle(el, classKeys: {[key: string]: boolean}) {
	const toAdd = Object.keys(classKeys)
		.filter(key => classKeys[key]);
	const toRemove = Object.keys(classKeys)
		.filter(key => !classKeys[key]);

	el.className = el.className.split(' ')
		.filter(name => toAdd.indexOf(name) === -1)
		.concat(toAdd)
		.filter(name => toRemove.indexOf(name) === -1)
		.join(' ');
}

const toggleClass: DirectiveOptions = {
	bind: (el, node) => toggle(el, node.value),
	update: (el, node) => toggle(el, node.value),
};

export default toggleClass;


// AnyComponent.vue
<script lang="ts">
import toggleClass from '…/toggleClass.directive';
  
@Component({
  directives: { toggleClass }
})
…
</script>