refactor(kalert): ts improvement for kalert (#2671)

* refactor(kalert): ts improvement for kalert

* chore(kalert): improve types

* chore(kalert): props destructure

Author: Justineo

src/components/KAlert/KAlert.vue

@@ -37,54 +37,35 @@
       class="alert-dismiss-icon"
       :size="KUI_ICON_SIZE_40"
       tabindex="0"
-      @click="$emit('dismiss')"
+      @click="emit('dismiss')"
       @keydown.space.prevent
-      @keyup.enter="$emit('dismiss')"
-      @keyup.space="$emit('dismiss')"
+      @keyup.enter="emit('dismiss')"
+      @keyup.space="emit('dismiss')"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { PropType } from 'vue'
-import type { AlertAppearance } from '@/types'
 import { AlertAppearances } from '@/types'
+import type { AlertEmits, AlertProps , AlertSlots } from '@/types'
 import { InfoIcon, CheckCircleIcon, WarningIcon, DangerIcon, CloseIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 
 type AlertIcon = typeof InfoIcon // all icons are the same type so we can use any of them
 
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  appearance: {
-    type: String as PropType<AlertAppearance>,
-    default: 'info',
-    validator: (value: AlertAppearance): boolean => {
-      return Object.values(AlertAppearances).includes(value)
-    },
-  },
-  showIcon: {
-    type: Boolean,
-    default: false,
-  },
-  dismissible: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-defineEmits(['dismiss'])
+const {
+  title = '',
+  message = '',
+  appearance = AlertAppearances.info,
+  showIcon,
+  dismissible,
+} = defineProps<AlertProps>()
+const emit = defineEmits<AlertEmits>()
+defineSlots<AlertSlots>()
 
 const getAlertIcon = computed((): AlertIcon => {
-  switch (props.appearance) {
+  switch (appearance) {
     case AlertAppearances.info:
       return InfoIcon
     case AlertAppearances.success:

src/types/alert.ts

@@ -7,3 +7,53 @@ export const AlertAppearances: AlertAppearanceRecord = {
   danger: 'danger',
   warning: 'warning',
 }
+
+export interface AlertProps {
+  /**
+   * The title of the alert
+   */
+  title?: string
+
+  /**
+   * The message of the alert
+   */
+  message?: string
+
+  /**
+   * Base styling of the alert
+   * One of ['info', 'success', 'danger', 'warning']
+   * @default 'info'
+   */
+  appearance?: AlertAppearance
+
+  /**
+   * When true, shows an icon
+   * @default false
+   */
+  showIcon?: boolean
+
+  /**
+   * When true, shows a close button
+   * @default false
+   */
+  dismissible?: boolean
+}
+
+export interface AlertEmits {
+  /**
+   * Emitted when dismiss button is clicked.
+   */
+  dismiss: []
+}
+
+export interface AlertSlots {
+  /**
+   * Slot for alert message content.
+   */
+  default?(): any
+
+  /**
+   * Slot for custom icon to the left of the alert message.
+   */
+  icon?(): any
+}