Alert component & docs - basic usage

docs/.vitepress/config.js

@@ -27,6 +27,7 @@ module.exports = {
                 collapsed: false,
                 items: [
                     {text: 'Accordion', link: '/elements/accordion'},
+                    {text: 'Alert', link: '/elements/alert'},
                     {text: 'Avatar', link: '/elements/avatar'},
                     {text: 'Badge', link: '/elements/badge'},
                     {text: 'Button', link: '/elements/button'},

docs/elements/alert.md

@@ -0,0 +1,17 @@
+<script setup>
+import Basic from './demo/Alert/Basic.vue';
+</script>
+
+# Alert
+
+Display an alert element to draw attention.
+
+## Usage
+
+Pass a `title` to your Alert.
+
+<DemoContainer>
+  <Basic/>
+</DemoContainer>
+
+<<< @/elements/demo/Alert/Basic.vue

docs/elements/demo/Alert/Basic.vue

@@ -0,0 +1,3 @@
+<template>
+  <s-alert title="Heads up!" />
+</template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stellar-ui",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "license": "MIT",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.0.1",
-    "@types/node": "^20.8.5",
+    "@types/node": "^20.8.6",
     "@vitejs/plugin-vue": "^4.4.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.28.1",
@@ -22,7 +22,7 @@
     "tailwindcss": "^3.3.3",
     "typescript": "latest",
     "vite": "^4.4.11",
-    "vitepress": "^1.0.0-rc.21",
+    "vitepress": "^1.0.0-rc.22",
     "vue-tsc": "^1.8.19"
   },
   "files": [
@@ -62,9 +62,9 @@
     "@docsearch/js": "^3.5.2",
     "@headlessui/vue": "^1.7.16",
     "@iconify-json/heroicons": "^1.1.12",
-    "@iconify-json/lucide": "^1.1.133",
+    "@iconify-json/lucide": "^1.1.134",
     "@iconify-json/mdi": "^1.1.54",
-    "@iconify/json": "^2.2.128",
+    "@iconify/json": "^2.2.129",
     "@iconify/tailwind": "^0.1.3",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",

src/components/elements/Alert.vue

@@ -0,0 +1,132 @@
+<template>
+  <div :class="alertClass" v-bind="attrs">
+    <div class="flex gap-3" :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }">
+      <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
+      <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+
+      <div class="w-0 flex-1">
+        <p :class="ui.title">
+          <slot name="title" :title="title">
+            {{ title }}
+          </slot>
+        </p>
+        <p v-if="description || $slots.description" :class="ui.description">
+          <slot name="description" :description="description">
+            {{ description }}
+          </slot>
+        </p>
+
+        <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
+        </div>
+      </div>
+      <div class="flex-shrink-0 flex items-center gap-3">
+        <div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
+        </div>
+
+        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, toRef, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { twMerge, twJoin } from 'tailwind-merge'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
+import { useUI } from '@/composables/useUI'
+import type { Avatar, Button, NestedKeyOf, Strategy } from '@/types'
+import { mergeConfig } from '@/utils'
+import appConfig from '#constants/app.config'
+import { alert } from '@/ui.config'
+import colors from '@/constants/colors.config'
+
+const config = mergeConfig<typeof alert>(appConfig.ui.strategy, appConfig.ui.alert, alert)
+
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar,
+    UButton
+  },
+  inheritAttrs: false,
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: () => config.default.icon
+    },
+    avatar: {
+      type: Object as PropType<Avatar>,
+      default: null
+    },
+    closeButton: {
+      type: Object as PropType<Button>,
+      default: () => config.default.closeButton as Button
+    },
+    actions: {
+      type: Array as PropType<(Button & { click?: Function })[]>,
+      default: () => []
+    },
+    color: {
+      type: String as PropType<keyof typeof config.color | typeof colors[number]>,
+      default: () => config.default.color,
+      validator (value: string) {
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
+      }
+    },
+    variant: {
+      type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
+      default: () => config.default.variant,
+      validator (value: string) {
+        return [
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap(value => Object.keys(value))
+        ].includes(value)
+      }
+    },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
+    }
+  },
+  emits: ['close'],
+  setup (props) {
+    const { ui, attrs } = useUI('alert', toRef(props, 'ui'), config)
+
+    const alertClass = computed(() => {
+      const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
+
+      return twMerge(twJoin(
+          ui.value.wrapper,
+          ui.value.rounded,
+          ui.value.shadow,
+          ui.value.padding,
+          variant?.replaceAll('{color}', props.color)
+      ), props.class)
+    })
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      alertClass
+    }
+  }
+})
+</script>

src/components/index.ts

@@ -1,5 +1,6 @@
 // Elements
 import SAvatar from './elements/Avatar.vue'
+import SAlert from './elements/Alert.vue'
 import SAvatarGroup from './elements/AvatarGroup'
 import SBadge from './elements/Badge.vue'
 import SButton from './elements/Button.vue'
@@ -36,6 +37,7 @@ import SCard from './layout/Card.vue'
 
 export {
     SAvatar,
+    SAlert,
     SAvatarGroup,
     SBadge,
     SButton,