Merge branch 'dev'

docs/.vitepress/config.ts

@@ -50,6 +50,7 @@ export default defineConfig({
           { text: 'Switch', link: '/components/switch' },
           { text: 'Select', link: '/components/select' },
           { text: 'Form', link: '/components/form' },
+          { text: 'Alert', link: '/components/alert' }
         ]
       }
     ],

docs/components/alert.md

@@ -0,0 +1,18 @@
+---
+title: Alert | Sharp-UI
+description: Alert 组件的文档
+---
+
+# Alert 警告
+用于页面中展示重要的提示信息。
+
+## 基础用法
+页面中的非浮层元素，不会自动消失。
+Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
+
+<preview path="../demo/Alert/Basic.vue" title="基础用法" description="Alert组件的基础用法" />
+
+## 主题
+Alert 组件提供了两个不同的主题：`light`和`dark`。通过设置`effect`属性来改变主题，默认为`light`。
+
+<preview path="../demo/Alert/Theme.vue" title="主题" description="Alert 组件提供了两个不同的主题：`light`和`dark`。" />

docs/demo/Alert/Basic.vue

@@ -0,0 +1,16 @@
+<template>
+  <Alert content="成功提示的文案" type="success"> </Alert>
+  <Alert content="消息提示的文案"> </Alert>
+  <Alert content="警告提示的文案" type="warning"> </Alert>
+  <Alert content="错误提示的文案" type="danger"> </Alert>
+</template>
+
+<script setup>
+import Alert from '@/components/Alert/Alert.vue'
+</script>
+
+<style scoped>
+.s-alert {
+  margin: 20px 0;
+}
+</style>

docs/demo/Alert/Theme.vue

@@ -0,0 +1,16 @@
+<template>
+  <Alert content="成功提示的文案" type="success" effect="dark"> </Alert>
+  <Alert content="消息提示的文案" effect="dark"> </Alert>
+  <Alert content="警告提示的文案" type="warning" effect="dark"> </Alert>
+  <Alert content="错误提示的文案" type="danger" effect="dark"> </Alert>
+</template>
+
+<script setup>
+import Alert from '@/components/Alert/Alert.vue'
+</script>
+
+<style scoped>
+.s-alert {
+  margin: 20px 0;
+}
+</style>

src/App.vue

@@ -1,5 +1,16 @@
 <template>
   <header>
+    <div style="margin-bottom: 20px;width: 100%;">
+      <Alert
+        ref="alertRef"
+        content="成功提示的文案"
+        type="success"
+        effect="dark"
+        >
+      </Alert>
+      <Button type="primary" @click="openAlert">打开Alert</BUtton>
+      <Button @click="closeAlert">关闭Alert</BUtton>
+    </div>
     <div style="margin-bottom: 20px">
       <Tooltip
         ref="tooltipRef"
@@ -152,9 +163,12 @@ import type { DropdownInstance, MenuOption } from '@/components/Dropdown/types'
 // import Message from '@/components/Message/Message.vue'
 import Form from '@/components/Form/Form.vue'
 import FormItem from '@/components/Form/FormItem.vue'
+import Alert from '@/components/Alert/Alert.vue'
 import { createMessage } from '@/components/Message/methods'
 import type { FormRules } from './components/Form/types'
+import type { AlertInstance } from './components/Alert/types'
 
+const alertRef = ref<AlertInstance | null>(null)
 const buttonRef = ref<ButtonInstance | null>(null)
 const tooltipRef = ref<TooltipInstance | null>(null)
 const dropdownRef = ref<DropdownInstance | null>(null)
@@ -238,6 +252,14 @@ const menuOptions: MenuOption[] = [
   { key: 4, label: 'item4' }
 ]
 
+const openAlert = () => { 
+  alertRef.value?.show()
+}
+
+const closeAlert = () => {
+  alertRef.value?.hide()
+}
+
 onMounted(() => {
   const instance = createMessage({
     type: 'warning',

src/components/Alert/Alert.vue

@@ -1,13 +1,52 @@
 <template>
-  <div>
-
+  <div
+    v-show="visible"
+    ref="alertRef"
+    role="alert"
+    class="s-alert"
+    :class="{ [`s-alert--${type}`]: type, 'is-close': closeable, 'is-dark': effect === 'dark' }"
+  >
+    <div class="s-alert__content">
+      <span class="s-alert__title">
+        <slot>{{ content }}</slot>
+      </span>
+    </div>
+    <div v-if="closeable" class="s-alert__close">
+      <Icon icon="xmark" @click.stop="onClose" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Icon from '@/components/Icon/Icon.vue'
+import type { AlertEvents, AlertInstance, AlertProps } from './types'
+import { ref } from 'vue'
+defineOptions({
+  name: 'S-Alert'
+})
+const props = withDefaults(defineProps<AlertProps>(), {
+  type: 'info',
+  closeable: true
+})
+const emits = defineEmits<AlertEvents>()
 
-</script>
+const alertRef = ref<HTMLElement>()
+
+const visible = ref(true)
 
-<style scoped>
+const onClose = () => {
+  visible.value = false
+  emits('close')
+}
+
+const show = () => {
+  visible.value = true
+}
+
+defineExpose<AlertInstance>({
+  show,
+  hide: onClose
+})
+</script>
 
-</style>
+<style scoped></style>

src/components/Alert/style.css

@@ -0,0 +1,64 @@
+.s-alert {
+  --s-alert-bg-color: var(--s-color-info-light-9);
+  --s-alert-border-color: var(--s-border-color-lighter);
+  --s-alert-padding: 8px 16px;
+  --s-alert-close-size: 12px;
+  --s-alert-close-icon-color: var(--s-text-color-placeholder);
+  --s-alert-close-hover-color: var(--s-text-color-secondary);
+}
+.s-alert {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--s-border-radius-base);
+  border-width: var(--s-border-width);
+  border-style: var(--s-border-style);
+  border-color: var(--s-alert-border-color);
+  background-color: var(--s-alert-bg-color);
+  padding: var(--s-alert-padding);
+  display: flex;
+  align-items: center;
+  transition: top var(--s-transition-duration), opacity var(--s-transition-duration), transform var(--s-transition-duration);
+  .s-alert__content {
+    color: var(--s-alert-text-color);
+    overflow-wrap: anywhere;
+    font-size: 13px;
+    line-height: 18px;
+    display: table-cell;
+    padding: 0 8px;
+  }
+  &.is-close .s-alert__content {
+    padding-right: 30px;
+  }
+  .s-alert__close {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 15px;
+    cursor: pointer;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+  }
+  .s-alert__close svg {
+    cursor: pointer;
+  }
+}
+@each $val in primary,info,success,warning,danger { 
+  .s-alert--$(val) {
+    --s-alert-bg-color: var(--s-color-$(val)-light-9);
+    --s-alert-border-color: var(--s-color-$(val)-light-8);
+    --s-alert-text-color: var(--s-color-$(val));
+    .s-alert__close {
+      --s-icon-color: var(--s-color-$(val));
+    }
+  }
+  .s-alert--$(val).is-dark {
+    --s-alert-text-color: var(--s-color-white);
+    --s-alert-bg-color: var(--s-color-$(val));
+    --s-alert-border-color: var(--s-color-$(val)-light-5);
+    .s-alert__close {
+      --s-icon-color: var(--s-color-white);
+    }
+  }
+}

src/components/Alert/types.ts

@@ -12,5 +12,6 @@ export interface AlertEvents {
 }
 
 export interface AlertInstance {
-  close: () => void
+  show: () => void
+  hide: () => void
 }

src/styles/index.css

@@ -1,5 +1,6 @@
 @import './vars.css';
 @import './reset.css';
+@import '../components/Alert/style.css';
 @import '../components/Button/style.css';
 @import '../components/Collapse/style.css';
 @import '../components/Icon/style.css';