feat(icon): icon name extendable type (#4045)

epicmaxco · Aug 26, 2024 · 16776ff · 16776ff
1 parent 5acf074
commit 16776ff
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 9 deletions.
diff --git a/packages/ui/src/components/va-icon/VaIcon.vue b/packages/ui/src/components/va-icon/VaIcon.vue
@@ -18,6 +18,8 @@
 
 <script lang="ts" setup>
 import { PropType, computed, useAttrs } from 'vue'
+import { AnyStringPropType } from '../../utils/types/prop-type'
+import { VaIconName } from './types'
 
 import {
   useComponentPresetProp,
@@ -34,7 +36,7 @@ defineOptions({
 const props = defineProps({
   ...useSizeProps,
   ...useComponentPresetProp,
-  name: { type: String, default: '' },
+  name: { type: String as AnyStringPropType<VaIconName>, default: '' },
   tag: { type: String },
   component: { type: Object as PropType<any> },
   color: { type: String },

diff --git a/packages/ui/src/components/va-icon/index.ts b/packages/ui/src/components/va-icon/index.ts
@@ -2,3 +2,5 @@ import withConfigTransport from '../../services/config-transport/withConfigTrans
 import _VaIcon from './VaIcon.vue'
 
 export const VaIcon = withConfigTransport(_VaIcon)
+
+export * from './types'
diff --git a/packages/ui/src/components/va-icon/types.ts b/packages/ui/src/components/va-icon/types.ts
@@ -0,0 +1,23 @@
+import type { VuesticIconAliases } from './../../services/icon/presets/vuestic-aliases'
+import type { ExtractIconAliasesName } from '../../services/icon/types/define-aliases'
+
+type DefaultIconAliases = ExtractIconAliasesName<typeof VuesticIconAliases>
+
+/**
+ * This is a placeholder meant to be implemented via TypeScript's Module
+ * Augmentation feature to allow key type inference
+ *
+ * @example
+ * ```ts
+ * declare module 'vuestic-ui' {
+ *   interface CustomIconAliasesNKeys {
+ *     from: string
+ *   }
+ * }
+ * ```
+ *
+ * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
+ */
+export interface CustomIconAliasesNKeys {}
+
+export type VaIconName = DefaultIconAliases | keyof CustomIconAliasesNKeys
diff --git a/packages/ui/src/services/icon/presets/vuestic-aliases.ts b/packages/ui/src/services/icon/presets/vuestic-aliases.ts
@@ -1,6 +1,6 @@
-import { IconConfiguration } from '../types'
+import { defineIconAliases } from '../types/define-aliases'
 
-export const VuesticIconAliases: IconConfiguration[] = [
+export const VuesticIconAliases = defineIconAliases([
   {
     name: 'va-unsorted',
     to: 'swap_vert',
@@ -71,10 +71,10 @@ export const VuesticIconAliases: IconConfiguration[] = [
   },
   {
     name: 'va-plus',
-    to: 'add',
+    to: 'mi-add',
   },
   {
     name: 'va-minus',
-    to: 'remove',
+    to: 'mi-remove',
   },
-]
+])
diff --git a/packages/ui/src/services/icon/types.ts b/packages/ui/src/services/icon/types.ts
@@ -14,8 +14,8 @@ export interface IconProps {
   to?: string
 }
 
-export interface IconConfigurationString extends IconProps {
-  name: string
+export interface IconConfigurationString<Name extends string = string> extends IconProps {
+  name: Name
   resolve?: ((dynamicSegments: {[dynamicSegment: string]: string }) => IconProps)
 }
 
@@ -25,7 +25,7 @@ export interface IconConfigurationRegex extends IconProps {
   resolveFromRegex?: ((...regexGroupValues: string[]) => IconProps)
 }
 
-export type IconConfiguration = IconConfigurationString | IconConfigurationRegex
+export type IconConfiguration<Name extends string = string> = IconConfigurationString<Name> | IconConfigurationRegex
 
 export type IconConfig = IconConfiguration[]
 

diff --git a/packages/ui/src/services/icon/types/define-aliases.ts b/packages/ui/src/services/icon/types/define-aliases.ts
@@ -0,0 +1,9 @@
+import { IconConfiguration } from '../types'
+
+export const defineIconAliases = <Name extends string>(aliases: IconConfiguration<Name>[]) => aliases
+
+export type ExtractIconAliasesName<T> = T extends IconConfiguration<infer Name>
+  ? Name
+  : T extends IconConfiguration<infer Name>[] ?
+    Name
+    : never