Merge remote-tracking branch 'origin/feature/createWebAndCreateBaseCpont' into feature/createWebAndCreateBaseCpont

Author: YuLinXi

src/components/notification/src/notification.vue

@@ -3,9 +3,11 @@
     <div :class="['py-notification', customClass, horizontalClass]"
     v-show="visible" :style="positionStyle"
     @click="click" @mouseenter="clearTimer()" @mouseleave="startTimer()">
-      <i class="py-notification__icon pyui-icons"
+      <!-- <i class="py-notification__icon pyui-icons"
       :class="[ typeClass, iconClass ]"
-      v-if="type || iconClass"></i>
+      v-if="type || iconClass"></i> -->
+      <py-icon v-if="type" class="py-notification__icon" :type="typeClass"></py-icon>
+      <i v-else-if="iconClass.length > 0" class="py-notification__icon" :class="iconClass"></i>
       <div class="py-notification__group">
         <h2 class="py-notification__title" v-text="title"></h2>
         <div class="py-notification__content" v-show="message">
@@ -14,16 +16,15 @@
             <p v-else v-html="message"></p>
           </slot>
         </div>
-        <i class="py-notification__closeBtn pyui-icons py-icon-close"
-        v-if="showClose"
-        @click.stop="close"></i>
+        <py-icon type="close" class="py-notification__closeBtn"
+        v-if="showClose" @click.stop="close"></py-icon>
       </div>
     </div>
   </transition>
 </template>
 
 <script>
-// import PyIcon from '../../icon/index.js';
+import PyIcon from '../../icon/index';
 /**
  * 与type属性相关联的可选的消息类型，如果不在可选值内将被忽略
  */
@@ -49,8 +50,8 @@ export default {
       type: '',
       // 是否显示关闭按钮
       showClose: true,
-      // 自定义类名
-      customClass: '',
+      // 自定义类名数组形式传入
+      customClass: [],
       // 自定义图标的类名。若设置了 type，则 iconClass 会被覆盖
       iconClass: '',
       // 关闭时的回调函数
@@ -69,9 +70,9 @@ export default {
       position: 'top-right',
     };
   },
-  // components: {
-  //   'py-icon': PyIcon,
-  // },
+  components: {
+    'py-icon': PyIcon,
+  },
   watch: {
     closed(newVal) {
       if (newVal) {
@@ -83,7 +84,8 @@ export default {
   computed: {
     // 提示图标
     typeClass() {
-      return this.type && typeMap[this.type] ? `py-icon-${typeMap[this.type]}` : '';
+      // return this.type && typeMap[this.type] ? `py-icon-${typeMap[this.type]}` : '';
+      return this.type && typeMap[this.type] ? `${typeMap[this.type]}` : '';
     },
     // 水平位置
     horizontalClass() {

src/styles/src/notification.scss

@@ -21,27 +21,11 @@ $--notification-info-color: $info-color !default;
 $--notification-warning-color: $warning-color !default;
 $--notification-danger-color: $error-color !default;
 
-$prefixCls: 'py-notification';
+$prefixCls: 'notification';
 $element-separator: '__';
 $modifier-separator: '--';
 
-.#{$prefixCls}-fade-enter {
-  &.right {
-    right: 0;
-    transform: translateX(100%);
-  }
-
-  &.left {
-    left: 0;
-    transform: translateX(-100%);
-  }
-}
-
-.#{$prefixCls}-fade-leave-active {
-  opacity: 0;
-}
-
-.#{$prefixCls} {
+@include b($prefixCls) {
   display: flex;
   width: $--notification-width;
   padding: $--notification-padding;
@@ -53,6 +37,23 @@ $modifier-separator: '--';
   box-shadow: $--notification-shadow;
   transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
   overflow: hidden;
+  z-index: 5000;
+
+  &-fade-enter {
+    &.right {
+      right: 0;
+      transform: translateX(100%);
+    }
+
+    &.left {
+      left: 0;
+      transform: translateX(-100%);
+    }
+  }
+
+  &-fade-leave-active {
+    opacity: 0;
+  }
 
   &.right {
     right: 16px;
@@ -61,16 +62,16 @@ $modifier-separator: '--';
   &.left {
     left: 16px;
   }
-  &#{$element-separator}group {
+  @include e(group) {
     margin-left: $--notification-group-margin;
   }
-  &#{$element-separator}title {
+  @include e(title) {
     font-weight: bold;
     font-size: $--notification-title-font-size;
     color: $--notification-title-color;
     margin: 0;
   }
-  &#{$element-separator}content {
+  @include e(content) {
     font-size: $--notification-font-size;
     line-height: 21px;
     margin: 6px 0 0 0;
@@ -81,14 +82,12 @@ $modifier-separator: '--';
       margin: 0;
     }
   }
-
-  &#{$element-separator}icon {
+  @include e(icon) {
     height: $--notification-icon-size;
     width: $--notification-icon-size;
     font-size: $--notification-icon-size;
   }
-
-  &#{$element-separator}closeBtn {
+  @include e(closeBtn) {
     position: absolute;
     top: 18px;
     right: 15px;

src/testsDemo/notification/notification.vue

@@ -13,6 +13,7 @@
       <py-button @click="open4">警告</py-button>
       <py-button @click="open5">消息</py-button>
       <py-button @click="open6">错误</py-button>
+      <py-button @click="open14">自定义图标</py-button>
     </div>
     <h3>自定义弹出位置</h3>
     <div class="py-button-box">
@@ -131,6 +132,13 @@ export default {
         showClose: false,
       });
     },
+    open14() {
+      this.$notify({
+        title: 'Info',
+        message: '这是一条没有关闭按钮的消息',
+        iconClass: ['pyui-icons', 'py-icon-heart-fill'],
+      });
+    },
   },
 };
 </script>

website/docs/colorPicker.md

@@ -0,0 +1,15 @@
+## ColorPicker 颜色选择器
+
+用于颜色选择，支持多种格式。
+
+### 基础用法
+
+::: demo ColorPicker组件支持选择普通颜色，也支持带 Alpha 通道的颜色即支持透明度的选择，支持选择预定义的颜色。
+
+```html
+<py-color-picker ></py-color-picker>
+
+```
+
+:::
+