Directives

This Design System also provides Custom Directives for the convenience of Developers that are intended to ease their work and repetitive tasks.

export const vCapitalize = ((el: any, binding: {
  arg?: keyof InputHTMLAttributes,
}) => {
  const targetValue: string | number | undefined = !!binding.arg ? el[binding.arg] : el.value;
  if (typeof targetValue === 'number') return;
  if (typeof targetValue === 'undefined') return;
  const newTargetValue = targetValue.charAt(0).toUpperCase() + targetValue.slice(1);
  if(!!binding.arg)
    el[binding.arg] = newTargetValue;
  else
    el.value = newTargetValue
});

You can either declare them on a component level just by importing them and using the directive on corresponding html-elements, like

import { vCapitalize } from '@pohlcon/design-system';

const key = ref<string>('');
...

<template>
  <input 
    :placeholder="key"
    v-capitalize:placeholder
  />
</template>

Or you can register the directives globally at the app level, like which will make importing on component level obsolete.

import { vCapitalize } from '@pohlcon/design-system';

const app = createApp({})

// make v-capitalize usable in all components
app.directive('capitalize', vCapitalize);

Directives ​

Directives