Enhance the inheritability and composability of Quasar's components for easier extensibility.

[dongwa]

Refactor Quasar's components to enhance their extensibility.

Please select your type of RFC (one or more):

Put an x in the boxes that apply

• [x] Change ?
• [ ] Method ?
• [ ] Behavior ?
• [ ] Research ?
• [x] Innovation ?

Other

• Start Date: (fill me in with today's date, YYYY-MM-DD)
• Target Major Version: (2.x / 3.x)
• Reference Issues: (fill in existing related issues, if any) https://github.com/quasarframework/quasar/discussions/8761 https://github.com/quasarframework/quasar/discussions/12085 https://github.com/quasarframework/quasar/discussions/9735

Does this introduce a breaking change?

Put an x in the box that applies

• [ ] Yes
• [x] No

Proposed RFC

Many people are confused about how to extend Quasar's components, and I believe it is due to:

1. The inability to use "extends" in the setup API.
2. The coupling of Quasar's setup function with the render function.

I want to discuss point 2. Perhaps we should separate the setup function and render function to enable the ability to extend Quasar's components.

I have an idea:

setup (props, { emit, attrs }) {  
  ...
   return h('div', {...}) 
}

change to

// use-btn.js
export function useSetup(props,context){
	....
	return {
		....
	}
}

export function getRender(setup){
	return h('div',{
		...
	})
}

// btn.js
import { useSetup,getRender } from './use-btn.js' 

setup (props, context) {  
  const setupScope  = useSetup(props, context)
  return getRender(setupScope)
}

Developers can use our composables to create their own custom buttons (mybtn).

// mybtn.vue
import { useSetup,getRender } from 'quasar/btn/use-btn' 

setup (props, context) {  
  const setupScope  = useSetup(props, context)
	// we can edit the setup
  setupScope.xxx = xxx

  const renderFunc = getRender(setupScope)
	// we can also eidt the  renderFunc or use our setupScope to make custom render function

  return renderFunc
}