search

oruga-ui / oruga

🐛 Oruga is a lightweight library of UI components without any CSS framework dependency
https://oruga-ui.com
MIT License
1.12k stars 170 forks source link

Icon component only accepts string #1027

Closed Nik-Weightmans closed 3 months ago

Nik-Weightmans commented 3 months ago

Overview of the problem

Oruga version: [m0.8.12] Vuejs version: [3.2.3] OS/Browser: Chrome

Description

This has been discovered upon upgrading from 0.6.0 => 0.8.7, whereas, previously exactly the same approach was used without the issue described below present

We're passing component to programmatic configuration as per the below code:

import { ConfigProgrammatic } from '@oruga-ui/oruga-next'

import AppIcon from '~/components/AppIcon.vue'

ConfigProgrammatic.setOptions({
  iconPack: 'material-symbols-rounded',
  iconComponent: AppIcon,
  statusIcon: false,
  useHtml5Validation: false,
})

In <o-icon> component String is expected: https://github.com/oruga-ui/oruga/blob/c328380cfe1a0256307bd8d741a35ffff90439e1/packages/oruga/src/components/icon/Icon.vue#L26

However, types config accounts for other types: https://github.com/oruga-ui/oruga/blob/c328380cfe1a0256307bd8d741a35ffff90439e1/packages/oruga/src/types/config.ts#L43

Actual behavior

As a result, receiving warnings as per the below screenshot

image

Expected behavior

It would be beneficial for component prop to allow whatever can be passed to :is within <component>, e.g. not just String, but also Object and potentially function for dynamically imported scenarios

Please note that in the current version utilising any other approach apart from String still works as expected, however, throws warnings

mlmoravek commented 3 months ago

@Nik-Weightmans thanks for this hint. Yes it's only a type problem, and we can change the type to allow objects and component instances as well, like other component props.