fix#4535: add type to color and icon props (#4537)

* fix#4535: add type to color props

* fix(#4535): replace absolute import path with relative

---------

Co-authored-by: Maksym Nedoshev <m0ksem1337@gmail.com>

Author: VladisLove3017

packages/compiler/playground/src/App.vue

@@ -3,7 +3,7 @@ import TestPage from './pages/TestPage.vue';
 </script>
 
 <template>
-  <VaNavbar>
+  <VaNavbar color="myCustomColor">
     <template #left>
       Vuestic UI Devtools demo
     </template>

packages/ui/src/components/va-alert/VaAlert.vue

@@ -72,6 +72,7 @@
 
     </div>
   </transition>
+
 </template>
 
 <script lang="ts" setup>
@@ -81,11 +82,14 @@ import {
   useComponentPresetProp,
   useStateful, useStatefulProps, useStatefulEmits,
   useTranslation,
+  ColorName,
 } from '../../composables'
 
 import { useAlertStyles } from './useAlertStyles'
 
-import { VaIcon } from '../va-icon'
+import { VaIcon, VaIconName } from '../va-icon'
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
+import { VaAlert } from '.'
 
 defineOptions({
   name: 'VaAlert',
@@ -97,11 +101,11 @@ const props = defineProps({
 
   modelValue: { type: Boolean, default: true },
   stateful: { type: Boolean, default: true },
-  color: { type: String, default: 'primary' },
+  color: { type: String as PropType<StringWithAutocomplete<ColorName>>, default: 'primary' },
   textColor: { type: String, default: '' },
   title: { type: String, default: '' },
   description: { type: String, default: '' },
-  icon: { type: String, default: '' },
+  icon: { type: String as PropType<StringWithAutocomplete<VaIconName>>, default: '' },
   closeText: { type: String, default: '' },
   closeIcon: { type: String, default: 'close' },
   closeable: { type: Boolean, default: false },

packages/ui/src/components/va-app-bar/VaAppBar.vue

@@ -12,8 +12,8 @@
 <script lang="ts" setup>
 import { PropType, computed, toRef } from 'vue'
 
-import { useColors, useFixedBar, useFixedBarProps, useComponentPresetProp, useElementTextColor, useTemplateRef, useSelectorTemplateRef, useElementScrollableParent } from '../../composables'
-
+import { useColors, useFixedBar, useFixedBarProps, useComponentPresetProp, useElementTextColor, useTemplateRef, useSelectorTemplateRef, useElementScrollableParent, ColorName } from '../../composables'
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
 defineOptions({
   name: 'VaAppBar',
 })
@@ -25,7 +25,7 @@ const props = defineProps({
   target: { type: [Object, String] as PropType<string | HTMLElement>, default: '' },
   shadowOnScroll: { type: Boolean, default: false },
   shadowColor: { type: String, default: '' },
-  color: { type: String, default: 'primary' },
+  color: { type: String as PropType<StringWithAutocomplete<ColorName>>, default: 'primary' },
 })
 
 const targetHtmlElement = useSelectorTemplateRef(toRef(props, 'target'))

packages/ui/src/components/va-avatar/VaAvatar.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, PropType } from 'vue'
 
 import {
   useBem,
@@ -42,11 +42,13 @@ import {
   useSizeProps,
   useLoadableControlProps,
   useComponentPresetProp,
+  ColorName,
 } from '../../composables'
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
 
-import { VaIcon, VaProgressCircle, VaFallback } from '../index'
+import { VaIcon, VaProgressCircle, VaFallback, VaIconName } from '../index'
 import { pick } from '../../utils/pick'
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
 
 const VaFallbackPropsDeclaration = extractComponentProps(VaFallback)
 </script>
@@ -63,12 +65,12 @@ const props = defineProps({
   ...useComponentPresetProp,
   ...VaFallbackPropsDeclaration,
 
-  color: { type: String, default: 'primary' },
+  color: { type: String as PropType<StringWithAutocomplete<ColorName>>, default: 'primary' },
   textColor: { type: String },
   square: { type: Boolean, default: false },
   fontSize: { type: String, default: '' },
   src: { type: String, default: null },
-  icon: { type: String, default: '' },
+  icon: { type: String as PropType<StringWithAutocomplete<VaIconName>>, default: '' },
   alt: { type: String, default: '' },
 })
 

packages/ui/src/components/va-backtop/VaBacktop.vue

@@ -21,9 +21,10 @@
 
 <script lang="ts" setup>
 import { PropType, ref, computed, onMounted, onBeforeUnmount } from 'vue'
-import { useComponentPresetProp, useTranslation, useTranslationProp, useNumericProp, makeNumericProp } from '../../composables'
+import { useComponentPresetProp, useTranslation, useTranslationProp, useNumericProp, makeNumericProp, ColorName } from '../../composables'
 import { VaButton } from '../va-button'
 import { warn } from '../../utils/console'
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
 
 defineOptions({
   name: 'VaBacktop',
@@ -39,7 +40,7 @@ const props = defineProps({
   speed: makeNumericProp({ default: 50 }),
   verticalOffset: { type: String, default: '1rem' },
   horizontalOffset: { type: String, default: '1rem' },
-  color: { type: String, default: 'primary' },
+  color: { type: String as PropType<StringWithAutocomplete<ColorName>>, default: 'primary' },
   horizontalPosition: {
     type: String as PropType<'right' | 'left'>,
     default: 'right',

packages/ui/src/components/va-badge/VaBadge.vue

@@ -20,18 +20,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, unref, useSlots } from 'vue'
+import { computed, unref, useSlots, PropType } from 'vue'
 
 import {
   useBem,
   useColors,
   useElementTextColor,
   useDeprecated,
   useComponentPresetProp,
+  ColorName,
 } from '../../composables'
 
 import { useFloatingPosition, useFloatingPositionProps } from './hooks/useFloatingPositionStyles'
 import { pick } from '../../utils/pick'
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
+import { VaBadge } from '.'
 
 defineOptions({
   name: 'VaBadge',
@@ -41,7 +44,7 @@ const props = defineProps({
   ...useComponentPresetProp,
   ...useFloatingPositionProps,
 
-  color: { type: String, default: 'danger' },
+  color: { type: String as PropType<StringWithAutocomplete<ColorName>>, default: 'danger' },
   textColor: { type: String },
   text: { type: [String, Number], default: '' },
   multiLine: { type: Boolean, default: false },

packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue

@@ -1,24 +1,26 @@
 <script lang="ts">
-import { computed, defineComponent, Fragment, h, ref, VNode } from 'vue'
+import { computed, defineComponent, Fragment, h, ref, VNode, PropType } from 'vue'
 
 import {
   useComponentPresetProp,
   useAlignable,
   useAlignableProps,
   useColors,
   useTranslation, useTranslationProp,
+  ColorName,
 } from '../../composables'
 
 import { hasOwnProperty } from '../../utils/has-own-property'
 import { resolveSlot } from '../../utils/resolveSlot'
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
 
 export default defineComponent({
   name: 'VaBreadcrumbs',
   props: {
     ...useAlignableProps,
     ...useComponentPresetProp,
     separator: { type: String, default: '/' },
-    color: { type: String, default: null },
+    color: { type: String as PropType<StringWithAutocomplete<ColorName>>, default: null },
     disabledColor: { type: String, default: 'secondary' },
     activeColor: { type: String, default: null },
     separatorColor: { type: String, default: null },

packages/ui/src/components/va-button/VaButton.vue

@@ -70,12 +70,13 @@ import { useButtonBackground } from './hooks/useButtonBackground'
 import { useButtonAttributes } from './hooks/useButtonAttributes'
 import { useButtonTextColor } from './hooks/useButtonTextColor'
 
-import { VaIcon } from '../va-icon'
+import { VaIcon, VaIconName } from '../va-icon'
 import { VaProgressCircle } from '../va-progress-circle'
 import { pick } from '../../utils/pick'
 
 import type { ColorName } from '../../composables'
-
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
+import { VaButton } from '.'
 defineOptions({
   name: 'VaButton',
 })
@@ -107,7 +108,7 @@ const props = defineProps({
     validator: (v: string) => ['small', 'medium', 'large'].includes(v),
   },
 
-  icon: { type: String, default: '' },
+  icon: { type: String as PropType<StringWithAutocomplete<VaIconName>>, default: '' },
   iconRight: { type: String, default: '' },
   iconColor: { type: String, default: '' },
 

packages/ui/src/components/va-card/VaCard.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, PropType } from 'vue'
 import { getGradientBackground } from '../../services/color'
 import {
   useBem,
@@ -26,8 +26,10 @@ import {
   useElementTextColor,
   useRouterLink,
   useRouterLinkProps,
+  ColorName,
 } from '../../composables'
 import { pick } from '../../utils/pick'
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
 
 defineOptions({
   name: 'VaCard',
@@ -47,7 +49,7 @@ const props = defineProps({
   stripeColor: { type: String, default: '' },
   gradient: { type: Boolean, default: false },
   textColor: { type: String },
-  color: { type: String, default: 'background-secondary' },
+  color: { type: String as PropType<StringWithAutocomplete<ColorName>>, default: 'background-secondary' },
 })
 
 const { getColor } = useColors()

packages/ui/src/components/va-carousel/VaCarousel.vue

@@ -104,8 +104,10 @@ import {
   useSwipe, useSwipeProps, useComponentPresetProp,
   useTranslation, useTranslationProp, useNumericProp,
   makeNumericProp,
+  ColorName,
 } from '../../composables'
 
+import { StringWithAutocomplete } from '../../utils/types/prop-type'
 import { VaImage } from '../va-image'
 import VaCarouselButton from './components/VaCarouselButton.vue'
 
@@ -153,7 +155,7 @@ const props = defineProps({
     default: 'transition',
     validator: (value: string) => ['fade', 'transition'].includes(value),
   },
-  color: { type: String, default: 'primary' },
+  color: { type: String as PropType<StringWithAutocomplete<ColorName>>, default: 'primary' },
   ratio: { type: [Number, String] },
 
   ariaLabel: useTranslationProp('$t:carousel'),