fix: add icon for snackbar and fix snackbar clear function

varletjs · Dec 30, 2020 · 56f322e · 56f322e
1 parent 3080c8c
commit 56f322e
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 72 deletions.
diff --git a/packages/varlet-ui/src/snackbar-core/SnackbarCore.vue b/packages/varlet-ui/src/snackbar-core/SnackbarCore.vue
@@ -1,40 +1,39 @@
 <template>
 	<div class="var-snackbar" :style="{ pointerEvents: forbidClick ? 'auto' : 'none' }" v-show="show">
-		<div
-			:class="`var-snackbar__wrapper var-snackbar__wrapper-${position} var-elevation--4 ${
-				vertical ? 'var-snackbar__vertical' : ''
-			}`"
-			:style="snackbarStyle"
-		>
+		<div :class="snackbarClass" :style="snackbarStyle">
 			<div :class="`var-snackbar__content${contentClass ? ` ${contentClass}` : ''}`">
 				<var-loading :type="loadingType" :size="loadingSize" v-if="type === 'loading'" />
 				<slot>
 					{{ content }}
 				</slot>
 			</div>
 			<div class="var-snackbar__action">
-				<var-button type="primary" size="small" v-if="['success', 'error', 'info', 'warning'].includes(type)">
-					{{ type }}
-				</var-button>
+				<var-icon v-if="type === 'success'" name="checkbox-marked-circle"></var-icon>
+				<var-icon v-if="type === 'warning'" name="warning"></var-icon>
+				<var-icon v-if="type === 'info'" name="information"></var-icon>
+				<var-icon v-if="type === 'error'" name="error"></var-icon>
 				<slot name="action"></slot>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, watch, ref, Ref, onMounted } from 'vue'
+import { defineComponent, reactive, watch, ref, Ref, onMounted, computed } from 'vue'
 import Loading from '../loading'
 import Button from '../button'
+import Icon from '../icon'
 import { useZIndex } from '../context/zIndex'
 import { props } from './props'
 import { useLock } from '../context/lock'
+import { SNACKBAR_TYPE } from '../snackbar'
 
 export default defineComponent({
 	name: 'VarSnackbarCore',
 	components: {
 		[Loading.name]: Loading,
 		[Button.name]: Button,
+		[Icon.name]: Icon,
 	},
 	props,
 	setup(props) {
@@ -45,7 +44,13 @@ export default defineComponent({
 		const snackbarStyle = reactive({
 			zIndex,
 		})
-
+		const snackbarClass = computed(() => {
+			const { position, vertical, type } = props
+			const baseClass = `var-snackbar__wrapper var-snackbar__wrapper-${position} var-elevation--4`
+			const verticalClass = vertical ? ' var-snackbar__vertical' : ''
+			const typeClass = type && SNACKBAR_TYPE.includes(type) ? ` var-snackbar__wrapper-${type}` : ''
+			return `${baseClass}${verticalClass}${typeClass}`
+		})
 		watch(
 			() => props.show,
 			(show) => {
@@ -79,6 +84,7 @@ export default defineComponent({
 		})
 		return {
 			snackbarStyle,
+			snackbarClass,
 		}
 	},
 })

diff --git a/packages/varlet-ui/src/snackbar-core/props.ts b/packages/varlet-ui/src/snackbar-core/props.ts
@@ -1,21 +1,22 @@
+import { PropType } from 'vue'
 import { pickProps } from '../utils/components'
 import { props as loadingProps } from '../loading/props'
+import { SNACKBAR_TYPE, SnackbarType } from '../snackbar'
 
 export function positionValidator(type: string): boolean {
 	const validPositions = ['top', 'center', 'bottom']
 	return validPositions.includes(type)
 }
 
-export function typeValidator(type: string): boolean {
-	const validPositions = ['loading', 'success', 'warning', 'info', 'error']
-	return validPositions.includes(type)
+export function typeValidator(type: SnackbarType): boolean {
+	return SNACKBAR_TYPE.includes(type)
 }
 
 export const getPositionDefault = () => 'top'
 
 export const props = {
 	type: {
-		type: String,
+		type: String as PropType<SnackbarType>,
 		validator: typeValidator,
 	},
 	// snackbar显示的位置

diff --git a/packages/varlet-ui/src/snackbar-core/snackbarCore.less b/packages/varlet-ui/src/snackbar-core/snackbarCore.less
@@ -1,5 +1,6 @@
 @import "../styles/elevation";
 @import "../styles/common";
+@import "../styles/var";
 
 .var-transition-group {
   position: fixed;
@@ -34,6 +35,23 @@
       align-items: center;
       border-color: currentColor;
       pointer-events: auto;
+
+      &-success {
+        background: @color-success;
+      }
+
+      &-info {
+        background: @color-info;
+      }
+
+      &-warning {
+        background: @color-warning;
+      }
+
+      &-error {
+        background: @color-danger;
+      }
+
     }
 
     &__content {
@@ -43,6 +61,7 @@
 
     &__action {
       margin-right: 8px;
+      display: flex;
     }
 
     &__vertical {
@@ -69,6 +88,7 @@
   &-snackbar-transition {
     top: 0;
     position: fixed;
+
     .var-snackbar__wrapper {
       position: relative;
 

diff --git a/packages/varlet-ui/src/snackbar/index.ts b/packages/varlet-ui/src/snackbar/index.ts
@@ -58,6 +58,8 @@ interface Snackbar {
 	Component: RendererElement
 }
 
+export const SNACKBAR_TYPE: Array<SnackbarType> = ['loading', 'success', 'warning', 'info', 'error']
+
 const transitionGroupProps: any = {
 	name: 'var-snackbar-fade',
 	tag: 'div',
@@ -72,12 +74,8 @@ const TransitionGroupHost = {
 			const snackbarList = Snackbar.uniqSnackbarOptions.map(
 				({ id, reactiveSnackOptions, _update }: UniqSnackbarOptions) => {
 					if (reactiveSnackOptions.forbidClick) {
-						const transitionGroupEl = document.querySelector(
-							'.var-transition-group'
-						)
-						;(transitionGroupEl as HTMLElement).classList.add(
-							'var-pointer-auto'
-						)
+						const transitionGroupEl = document.querySelector('.var-transition-group')
+						;(transitionGroupEl as HTMLElement).classList.add('var-pointer-auto')
 					}
 					if (Snackbar.isAllowMultiple) reactiveSnackOptions.position = 'top'
 					return h(VarSnackbarCore, {
@@ -111,56 +109,52 @@ const TransitionGroupHost = {
 	},
 }
 
-const Snackbar: Snackbar = <Snackbar>(
-	function (options: SnackbarOptions = {}): SnackbarHandel {
-		const snackOptions: SnackbarOptions = isBaseObject(options) ? options : {}
-		const reactiveSnackOptions: SnackbarOptions = reactive<SnackbarOptions>(
-			snackOptions
-		)
-		reactiveSnackOptions.show = true
-
-		if (!Snackbar.isMount) {
-			Snackbar.isMount = true
-			mountInstance(TransitionGroupHost)
-		}
+const Snackbar: Snackbar = <Snackbar>function (options: SnackbarOptions = {}): SnackbarHandel {
+	const snackOptions: SnackbarOptions = isBaseObject(options) ? options : {}
+	const reactiveSnackOptions: SnackbarOptions = reactive<SnackbarOptions>(snackOptions)
+	reactiveSnackOptions.show = true
 
-		const id = Date.now()
-		const { length } = Snackbar.uniqSnackbarOptions
-		const uniqSnackbarOptionItem: UniqSnackbarOptions = {
-			id,
-			reactiveSnackOptions,
-		}
+	if (!Snackbar.isMount) {
+		Snackbar.isMount = true
+		mountInstance(TransitionGroupHost)
+	}
 
-		if (length === 0 || Snackbar.isAllowMultiple) {
-			addUniqOption(uniqSnackbarOptionItem)
-		} else {
-			const _update = `update-${id}`
-			updateUniqOption(reactiveSnackOptions, _update)
-		}
+	const id = Date.now()
+	const { length } = Snackbar.uniqSnackbarOptions
+	const uniqSnackbarOptionItem: UniqSnackbarOptions = {
+		id,
+		reactiveSnackOptions,
+	}
 
-		return {
-			clear() {
-				reactiveSnackOptions.show = false
-			},
-		}
+	if (length === 0 || Snackbar.isAllowMultiple) {
+		addUniqOption(uniqSnackbarOptionItem)
+	} else {
+		const _update = `update-${id}`
+		updateUniqOption(reactiveSnackOptions, _update)
 	}
-)
-
-;(['success', 'warning', 'info', 'error', 'loading'] as const).forEach(
-	(type) => {
-		Snackbar[type] = (options: SnackbarOptions | string): SnackbarHandel => {
-			if (typeof options === 'string') {
-				options = {
-					content: options,
-					type,
-				}
-			} else {
-				options.type = type
+
+	return {
+		clear() {
+			if (!Snackbar.isAllowMultiple && Snackbar.uniqSnackbarOptions.length)
+				Snackbar.uniqSnackbarOptions[0].reactiveSnackOptions.show = false
+			else reactiveSnackOptions.show = false
+		},
+	}
+}
+
+SNACKBAR_TYPE.forEach((type) => {
+	Snackbar[type] = (options: SnackbarOptions | string): SnackbarHandel => {
+		if (typeof options === 'string') {
+			options = {
+				content: options,
+				type,
 			}
-			return Snackbar(options)
+		} else {
+			options.type = type
 		}
+		return Snackbar(options)
 	}
-)
+})
 
 Snackbar.install = function (app: App) {
 	app.component(VarSnackbar.name, VarSnackbar)
@@ -184,23 +178,18 @@ Snackbar.uniqSnackbarOptions = reactive<UniqSnackbarOptions[]>([])
 Snackbar.Component = VarSnackbar
 
 function removeUniqOption(element: HTMLElement): void {
-	element.parentElement &&
-		element.parentElement.classList.remove('var-pointer-auto')
+	element.parentElement && element.parentElement.classList.remove('var-pointer-auto')
 	const id = element.getAttribute('data-id')
 	for (let i = 0; i < Snackbar.uniqSnackbarOptions.length; i++) {
-		if (Snackbar.uniqSnackbarOptions[i].id === +(id as string))
-			Snackbar.uniqSnackbarOptions.splice(i, 1)
+		if (Snackbar.uniqSnackbarOptions[i].id === +(id as string)) Snackbar.uniqSnackbarOptions.splice(i, 1)
 	}
 }
 
 function addUniqOption(uniqSnackbarOptionItem: UniqSnackbarOptions) {
 	Snackbar.uniqSnackbarOptions.push(uniqSnackbarOptionItem)
 }
 
-function updateUniqOption(
-	reactiveSnackOptions: SnackbarOptions,
-	_update: string
-) {
+function updateUniqOption(reactiveSnackOptions: SnackbarOptions, _update: string) {
 	Snackbar.uniqSnackbarOptions[0].reactiveSnackOptions = {
 		...Snackbar.uniqSnackbarOptions[0].reactiveSnackOptions,
 		...reactiveSnackOptions,