Components - default settings

Is your feature request related to a problem? Please describe. Most of my apps made by Quasar are targeted to touch devices. If you use q-tooltip it has a default tooltip position below the object. It is problematic on touch devices as it appears under your finger and tooltip is not visible.

You can easily define new position <q-tooltip anchor="top middle" self="center middle">Mark as favorite</q-tooltip> but you have to do it for each component.

Describe the solution you’d like Would be nice to configure a default settings for some components not only q-tooltip. Other components for default settings could be q-btn or q-input.

I think it could work in the same way as it is now for e.g. q-notify setDefaults Settings defaults.

Describe alternatives you’ve considered I can always wrap Quasar component into my own and pass default properties.

[yusufkandemir]

Here is a slightly different variant of @pdanpdan’s approach, with some really basic TypeScript sprinkled on top:

import { QInput, QInputProps, QSelect, QSelectProps } from 'quasar';
import { boot } from 'quasar/wrappers';

const defaultsQInput: Partial<QInputProps> = {
  filled: true,
  dense: true,
  color: 'red',
  type: 'number',
  inputClass: 'text-right',
};

const defaultsQSelect: Partial<QSelectProps> = {
  filled: true,
  dense: true,
  inputClass: 'text-right',
};

export default boot(() => {
  Object.entries(defaultsQInput).forEach(([prop, value]) => {
    assignDefault(QInput.props, prop, value);
  });

  Object.entries(defaultsQSelect).forEach(([prop, value]) => {
    assignDefault(QSelect.props, prop, value);
  });
});

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function assignDefault(props: any, prop: string, value: any) {
  /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
  props[prop] =
    Array.isArray(props[prop]) === true || typeof props[prop] === 'function'
      ? { type: props[prop], default: value }
      : { ...props[prop], default: value };
  /* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
}

[pdanpdan]

I would go with something like this (to prevent having to fill everything in the prop):

import { QInput } from 'quasar'
import { boot } from 'quasar/wrappers'

const defaultsQInput = {
  filled: true,
  dense: true,
  color: 'red',
  type: 'number',
  inputClass: 'text-right'
}

export default boot(() => {
  Object.keys(defaultsQInput).forEach(prop => {
    QInput.props[ prop ] = Array.isArray(QInput.props[ prop ]) === true || typeof QInput.props[ prop ] === 'function'
      ? { type: QInput.props[ prop ], default: defaultsQInput[ prop ] }
      : { ...QInput.props[ prop ], default: defaultsQInput[ prop ] }
  })
})