feat(alert): add alert component

demo/components/alertDemo.vue

@@ -5,19 +5,65 @@
   >
     <div class="n-doc-header">
       <n-gradient-text :font-size="20">
-        scaffold
+        Alert
       </n-gradient-text>
     </div>
     <div class="n-doc-body">
       <div class="n-doc-section">
         <div class="n-doc-section__header">
-          Basic Usage
+          Custom Icon
         </div>
         <div class="n-doc-section__view">
-          <n-alert />
+          <n-alert>
+            <template v-slot:icon>
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS44IDE4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmOTJhNDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFsZXJ0IC0gSWNvbiAyPC90aXRsZT48ZyBpZD0iUGFnZS0xIj48ZyBpZD0iR3JvdXAtNC1Db3B5LTQiPjxnIGlkPSJHcm91cC01Ij48ZyBpZD0iTm90aWZpY2F0aW9uIj48cGF0aCBpZD0iU2hhcGUiIGNsYXNzPSJjbHMtMSIgZD0iTS43NSw1LjE5QTEuMzQsMS4zNCwwLDAsMCwwLDYuMzF2NS42MUExLjMsMS4zLDAsMCwwLC43NiwxM2wxMiw0LjkxYS41MS41MSwwLDAsMCwuNzYtLjQ5Vi41NGEuNDkuNDksMCwwLDAtLjc1LS40OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNS4zLDQuNWE0LjUsNC41LDAsMCwxLDAsOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIvPjwvZz48L2c+PC9nPjwvZz48L3N2Zz4="
+                style="height: 20px; width: 22px;"
+              >
+            </template>
+            Will you still need me, will you still feed me When I'm sixty four?
+          </n-alert>
         </div>
         <div class="n-doc-section__source">
-          <textarea>scaffold</textarea>
+          <textarea><n-alert>
+  <template v-slot:icon>
+    <img
+      src="data:image/svg+xml;base64,PHN2Zy...nPjwvZz48L3N2Zz4="
+      style="height: 20px; width: 22px;"
+    >
+  </template>
+  Will you still need me, will you still feed me When I'm sixty four?
+</n-alert></textarea>
+        </div>
+      </div>
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Buildin Icon
+        </div>
+        <div class="n-doc-section__view">
+          <n-alert icon="md-alert">
+            Well the Ukraine girls really knock me out. They leave the West behind
+          </n-alert>
+        </div>
+        <div class="n-doc-section__source">
+          <textarea><n-alert icon="md-alert">
+  Well the Ukraine girls really knock me out They leave the West behind
+</n-alert></textarea>
+        </div>
+      </div>
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          No Icon
+        </div>
+        <div class="n-doc-section__view">
+          <n-alert>
+            Lucy in the sky with diamonds
+          </n-alert>
+        </div>
+        <div class="n-doc-section__source">
+          <textarea><n-alert>
+  Lucy in the sky with diamonds
+</n-alert></textarea>
         </div>
       </div>
     </div>

demo/demo.vue

@@ -2,7 +2,7 @@
   <div class="demo">
     <n-nimbus-service-layout
       icon="md-contacts"
-      name="NAIVE UI (0.1.73)"
+      name="NAIVE UI (0.1.78)"
       :padding-body="false"
       :items="items"
     >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.77",
+  "version": "0.1.78",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/Alert/src/alertIcon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.8 18"><defs><style>.cls-1{fill:#ff92a4;}</style></defs><title>Alert - Icon 2</title><g id="Page-1"><g id="Group-4-Copy-4"><g id="Group-5"><g id="Notification"><path id="Shape" class="cls-1" d="M.75,5.19A1.34,1.34,0,0,0,0,6.31v5.61A1.3,1.3,0,0,0,.76,13l12,4.91a.51.51,0,0,0,.76-.49V.54a.49.49,0,0,0-.75-.48Z" transform="translate(0 0)"/><path class="cls-1" d="M15.3,4.5a4.5,4.5,0,0,1,0,9" transform="translate(0 0)"/></g></g></g></g></svg>

packages/common/Alert/src/main.vue

@@ -1,9 +1,37 @@
 <template>
-  <div>alert</div>
+  <div class="n-alert">
+    <div
+      v-if="$slots.icon || icon"
+      class="n-alert__icon"
+    >
+      <slot
+        v-if="$slots.icon"
+        name="icon"
+      />
+      <n-icon
+        v-else-if="icon"
+        size="24"
+        :type="icon"
+      />
+    </div>
+    <div class="n-alert__content">
+      <slot />
+    </div>
+  </div>
 </template>
 
 <script>
+import NIcon from '../../Icon'
 export default {
-  name: 'NAlert'
+  name: 'NAlert',
+  components: {
+    NIcon
+  },
+  props: {
+    icon: {
+      type: String,
+      default: null
+    }
+  }
 }
 </script>

styles/Alert.scss

@@ -5,5 +5,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 14px;
+  padding: 14px 28px;
+  background-color: rgba(31, 38, 62, 1); 
+  color: rgba(255, 146, 164, 1);
+  border-radius: 9px;
+  font-size: 14px;
+  .n-alert__icon {
+    display: flex;
+    margin-right: 15px;
+    align-items: center;
+    justify-content: center;
+    .n-icon {
+      color: #ff92a4;
+    }
+  }
 }

styles/index.scss

@@ -17,6 +17,7 @@
 @import "./Tooltip.scss";
 @import "./Notification.scss";
 @import "./Pagination.scss";
+@import './Alert.scss';
 
 @import "./NimbusServiceLayout.scss";
 @import "./Popup.scss";