Merge branch 'main' of user:haoziqaq/varlet into main

packages/varlet-ui/src/badge/Badge.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="var-badge">
+    <transition name="var-fade">
+      <span
+        v-show="!hidden"
+        :class="[
+      `var-badge--${type}`,
+      'var-badge__content',
+      {'var-badge--dot':dot},
+      position?`var-badge--${position} var-badge--position`:null,
+      dotPosition
+      ]"
+        :style="{background:color}"
+      >
+        <var-icon v-if="icon" :name="icon"></var-icon>
+        <span v-else>{{values}}</span>
+      </span>
+    </transition>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+	import { defineComponent, Ref, ref } from 'vue'
+	import { props } from './props'
+	import Icon from '../icon'
+
+	export default defineComponent({
+		name: 'VarBadge',
+		components: {
+			[Icon.name]: Icon
+		},
+		props,
+		setup(props) {
+			console.log(typeof props.value === 'number' && typeof props.maxValue === 'number')
+			console.log(props)
+			const values: Ref<number | string | null | undefined> = ref(null)
+			const dotPosition: Ref<string | null> = ref(null)
+			if (props.dot) {
+				values.value = null
+			} else if (typeof props.value === 'number' && typeof props.maxValue === 'number') {
+				values.value = props.value > props.maxValue ? `${props.maxValue}+` : props.value
+			} else {
+				values.value = props.value
+			}
+			if(props.position&&props.dot){
+				dotPosition.value = props.position.indexOf('right') !== -1 ? 'var-badge--dot-right' : props.position.indexOf('left') !== -1 ? 'var-badge--dot-left' : null
+			}
+			return {
+				values,
+        dotPosition
+			}
+		}
+	})
+</script>
+
+<style lang="less">
+  @import "./badge";
+</style>

packages/varlet-ui/src/badge/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+const Badge = require('../../../cjs/badge').default
+const { render } = require('@testing-library/vue')
+
+test('test badge', async () => {
+  const wrapper = render(Badge)
+  console.log(wrapper)
+})

packages/varlet-ui/src/badge/badge.less

@@ -0,0 +1,94 @@
+@import "../styles/var";
+
+.var {
+  &-fade-leave-to {
+    opacity: 0;
+  }
+
+  &-fade-leave-active {
+    transition: opacity .3s;
+  }
+}
+
+.var-badge {
+  display: inline-block;
+  position: relative;
+  &__content {
+    color: #fff;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+    border-radius: 100px;
+    font-size: 12px;
+    padding: 2px 6px;
+    vertical-align: middle;
+    text-align: center;
+    display: inline-block;
+    //.v-icon{
+    //  font-size: 12px;
+    //  margin: 0 -2px;
+    //}
+  }
+
+  &--default {
+    background: @color-background-base;
+  }
+
+  &--primary {
+    background: @color-primary;
+  }
+
+  &--info {
+    background: @color-info;
+  }
+
+  &--warning {
+    background: @color-warning;
+  }
+
+  &--success {
+    background: @color-success;
+  }
+
+  &--danger {
+    background: @color-danger;
+  }
+  &--right-top{
+    position: absolute;
+    top: 0;
+    right: 10px;
+    transform: translateY(-50%) translateX(100%);
+  }
+  &--left-top{
+    position: absolute;
+    top: 0;
+    left: 10px;
+    transform: translateY(-50%) translateX(-100%);
+  }
+  &--right-bottom{
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    transform: translateY(50%) translateX(100%);
+  }
+  &--left-bottom{
+    position: absolute;
+    bottom: 0;
+    left: 10px;
+    transform: translateY(50%) translateX(-100%);
+  }
+  &--position{
+    border: 2px #ffffff solid;
+  }
+  &--dot {
+    box-sizing: content-box;
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    padding: 0;
+  }
+  &--dot-right{
+    right: 6px;
+  }
+  &--dot-left{
+    left: 6px;
+  }
+}

packages/varlet-ui/src/badge/example/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="example">
+    <app-type>主题色徽标</app-type>
+    <var-badge :value="data1"></var-badge>
+    <var-badge :value="data1" type="primary"></var-badge>
+    <var-badge :value="data1" type="info"></var-badge>
+    <var-badge :value="data1" type="warning"></var-badge>
+    <var-badge :value="data1" type="success"></var-badge>
+    <var-badge :value="data2" type="danger"></var-badge>
+    <var-badge type="danger"></var-badge>
+    <app-type>圆点徽标</app-type>
+    <var-badge dot type="danger"></var-badge>
+    <app-type>其他dom一起用</app-type>
+    <div>
+      <span class="example-span">我是其他dom</span>
+      <var-badge dot type="danger">
+      </var-badge>
+    </div>
+
+    <app-type>不同徽标定位</app-type>
+
+    <var-badge type="danger" dot position="right-top">
+      <var-chip plain :round="false" color="#009688">右上</var-chip>
+    </var-badge>
+    <var-badge type="danger" dot position="right-bottom">
+      <var-chip plain :round="false" color="#009688">右下</var-chip>
+    </var-badge>
+    <var-badge type="danger" dot position="left-top">
+      <var-chip plain :round="false" color="#009688">左上</var-chip>
+    </var-badge>
+    <var-badge type="danger" position="left-bottom">
+      <var-chip plain :round="false" color="#009688">左下</var-chip>
+    </var-badge>
+
+    <app-type>最大值</app-type>
+    <var-badge type="danger" position="right-top" :value="88" :max-value="99">
+      <var-chip plain :round="false" color="#009688">小于等于最大值</var-chip>
+    </var-badge>
+    <var-badge type="danger" position="right-top" :value="666" :max-value="99">
+      <var-chip plain :round="false" color="#009688">大于最大值</var-chip>
+    </var-badge>
+
+    <app-type>是否显示徽标</app-type>
+
+    <var-button @click="handleChange">
+      点击改变状态
+    </var-button>
+    <var-badge type="danger" position="right-top" :hidden="hidden">
+      <var-chip plain :round="false" color="#009688">徽标</var-chip>
+    </var-badge>
+    <app-type>自定义徽标颜色</app-type>
+    <var-badge color="#6200ea" position="right-top">
+      <var-chip plain :round="false" color="#009688">徽标</var-chip>
+    </var-badge>
+    <app-type>添加图标</app-type>
+    <var-badge color="#6200ea" position="right-top" icon="account-circle">
+      <var-chip plain :round="false" color="#009688">徽标</var-chip>
+    </var-badge>
+  </div>
+
+
+</template>
+
+<script lang="ts">
+	import { defineComponent, Ref, ref } from 'vue'
+	import Badge from '..'
+	import Button from '../../button'
+	import Chip from '../../chip'
+
+	export default defineComponent({
+		name: 'BadgeExample',
+		components: {
+			[Badge.name]: Badge,
+			[Button.name]: Button,
+			[Chip.name]: Chip
+		},
+		setup() {
+			const data1: Ref<string | number> = ref(1)
+			const data2: Ref<string | number> = ref('hot')
+			const hidden: Ref<boolean> = ref(false)
+			const handleChange = () => {
+				hidden.value = !hidden.value
+			}
+			return {
+				data1,
+				data2,
+				hidden,
+				handleChange
+			}
+		}
+	})
+</script>
+
+<style scoped>
+  .var-badge {
+    margin-right: 20px;
+    margin-bottom: 8px;
+  }
+
+  .example-span {
+    font-size: 14px;
+    margin-right: 10px;
+  }
+</style>

packages/varlet-ui/src/badge/index.ts

@@ -0,0 +1,7 @@
+import Badge from './Badge.vue'
+
+Badge.install = function(app: any) {
+  app.component(Badge.name, Badge)
+}
+
+export default Badge

packages/varlet-ui/src/badge/props.ts

@@ -0,0 +1,48 @@
+function typeValidator(type: string): boolean {
+  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type)
+}
+
+function positionValidator(position: string): boolean {
+  return ['right-top', 'right-bottom', 'left-top', 'left-bottom'].includes(position)
+}
+
+export const props = {
+//  徽标类型
+  type: {
+    type: String,
+    default: 'default',
+    validator: typeValidator
+  },
+//  是否隐藏徽标
+  hidden: {
+    type: Boolean,
+    default: false
+  },
+//  是否是小圆点
+  dot: {
+    type: Boolean,
+    default: false
+  },
+//  显示的值
+  value: {
+    type: [String, Number],
+    default: 0
+  },
+// 显示最大值
+  maxValue: {
+    type: [String, Number]
+  },
+//  自定义徽标颜色
+  color: {
+    type: String
+  },
+//  定位位置
+  position: {
+    type: String,
+    validator: positionValidator
+  },
+//  图标
+  icon:{
+    type:String
+  }
+}

packages/varlet-ui/src/chip/Chip.vue

@@ -11,7 +11,7 @@
       :class="[
 				`var-chip--${size}`,
 				block ? 'var--flex' : 'var--inline-flex',
-				round ? 'var-chip--round' : null,
+				{'var-chip--round':round},
 				plain ? `var-chip--plain-${type}` : `var-chip--${type}`,
 				plain ? `var-chip--plain` : `var-elevation--2`,
 			]"

packages/varlet-ui/src/chip/docs/zh_CN.md

@@ -129,9 +129,9 @@ return {show,show1};
 
 ### 事件
 
-| 事件名 | 说明 | 回调参数 | 默认值 |
-| ---- | ---- | ---- | ----|
-|close |点击关闭按钮时触发，只有在显示关闭按钮的时候才能使用| _ | _ |
+| 事件名 | 说明 | 回调参数 |
+| ---- | ---- | ---- |
+| close | 点击关闭按钮时触发，只有在显示关闭按钮的时候才能使用| _ |