feat: complete snackbar

packages/varlet-ui/src/snackbar/Snackbar.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, watch } from 'vue'
+import { defineComponent, reactive, computed, watch, ref, Ref } from 'vue'
 import Loading from '../loading'
 import Button from '../button'
 import { useZIndex } from '../context/zIndex'
@@ -52,6 +52,7 @@ export default defineComponent({
 	props,
 	emits: ['update:show'],
 	setup(props, ctx) {
+		const timer: Ref<any> = ref(null)
 		const { disabled } = useTeleport()
 		const { zIndex } = useZIndex(props, 'show', 2)
 		useLock(props, 'show', 'lockScroll')
@@ -71,17 +72,25 @@ export default defineComponent({
 		watch(
 			() => props.show,
 			(show) => {
-				console.log('watch')
 				if (show) {
 					props.onOpen && props.onOpen()
-					setTimeout(() => {
+					timer.value = setTimeout(() => {
 						ctx.emit('update:show', false)
 					}, props.duration)
 				} else if (show === false) {
 					props.onClose && props.onClose()
 				}
 			}
 		)
+		watch(
+			() => props._update,
+			() => {
+				clearTimeout(timer.value)
+				timer.value = setTimeout(() => {
+					ctx.emit('update:show', false)
+				}, props.duration)
+			}
+		)
 		return {
 			snackbarStyle,
 			alignItems,

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

@@ -182,7 +182,6 @@ export default defineComponent({
 		}
 
 		const create = (type: any) => {
-			console.log('create')
 			Snackbar({
 				content: "Hello, I'm a snackbar",
 				type,

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

@@ -30,41 +30,81 @@ const Snackbar: any = function (options: SnackbarOptions): void {
 	const reactiveSnackOptions: SnackbarOptions = reactive<SnackbarOptions>(
 		snackOptions
 	)
+
+	const id = Date.now()
+
 	const Host = {
 		setup() {
 			return () =>
 				h(
 					TransitionGroup,
 					{
 						...props,
+						...{
+							style: {
+								position: 'absolute',
+								top: 0,
+								left: 0,
+								right: 0,
+							},
+						},
 					},
-					Snackbar.instances.map((value: any) => {
-						console.log(reactiveSnackOptions)
-						return h(value, {
-							...reactiveSnackOptions,
-							...{
-								key: value.id,
-								'onUpdate:show': (value: boolean) => {
-									reactiveSnackOptions.show = value
+					Snackbar.instances.map(
+						({ id, reactiveSnackOptions, _update }: any) => {
+							return h(VarSnackbar, {
+								...reactiveSnackOptions,
+								...{
+									key: id,
+									_update,
+									'onUpdate:show': (value: boolean) => {
+										reactiveSnackOptions.show = value
+									},
+									onClosed: () => {
+										for (let i = 0; i < Snackbar.instances.length; i++) {
+											// if (Snackbar.instances[i].id === id) Snackbar.instances.splice(i, 1)
+										}
+									},
 								},
-							},
-						})
-					})
+							})
+						}
+					)
 				)
 		},
 	}
 
 	if (!Snackbar.isMount) {
 		Snackbar.isMount = true
-		const { unmountInstance } = mountInstance(Host)
+		mountInstance(Host)
 	}
 
 	if (Snackbar.allowMultiple) {
-		VarSnackbar.id = Date.now()
-		Snackbar.instances.push(VarSnackbar)
+		Snackbar.instances.push({
+			id,
+			reactiveSnackOptions,
+		})
+
 		nextTick(() => {
 			reactiveSnackOptions.show = true
 		})
+	} else {
+		const { length } = Snackbar.instances
+		const id = Date.now()
+		if (length === 1) {
+			Snackbar.instances[0].reactiveSnackOptions = {
+				...Snackbar.instances[0].reactiveSnackOptions,
+				...reactiveSnackOptions,
+			}
+			Snackbar.instances[0]._update = `update-${id}`
+		} else {
+			Snackbar.instances.push({
+				id,
+				reactiveSnackOptions,
+				_update: `update-${id}`,
+			})
+			nextTick(() => {
+				reactiveSnackOptions.show = true
+			})
+		}
 	}
 }
 
@@ -83,9 +123,6 @@ const Snackbar: any = function (options: SnackbarOptions): void {
 })
 
 Snackbar.install = function (app: any) {
-	// if (Snackbar.allowMultiple) {
-	//
-	// }
 	app.component(VarSnackbar.name, VarSnackbar)
 }
 
@@ -98,10 +135,10 @@ Snackbar.instances = reactive([])
 Snackbar.Component = VarSnackbar
 
 const props = {
-	name: 'var-fade',
+	name: 'var-snackbar-fade',
+	tag: 'div',
 	afterEnter: 'onOpened',
 	afterLeave: 'onClosed',
 }
 
-// export default createSnackbar
 export default Snackbar

packages/varlet-ui/src/snackbar/propsEmits.ts

@@ -98,4 +98,7 @@ export const props = {
 		type: Function,
 		default: () => {},
 	},
+	_update: {
+		type: String,
+	},
 }

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

@@ -1,21 +1,21 @@
 @import "../styles/elevation";
 
 .var-snackbar {
-  bottom: 0;
   display: flex;
   justify-content: center;
-  left: 0;
-  right: 0;
-  top: 0;
-  position: absolute;
+  //left: 0;
+  //right: 0;
+  //top: 0;
+  //bottom: 0;
+  //position: absolute;
 
   &__wrapper {
     display: flex;
 
     border-radius: 4px;
     color: hsla(0, 0%, 100%, .87);
     font-size: 14px;
-    margin: 24px;
+    margin: 12px 24px;
     align-items: center;
     border-color: currentColor;
     pointer-events: auto;
@@ -39,15 +39,13 @@
       margin-bottom: 8px;
     }
   }
-}
 
-.var {
-  &-fade-enter-active, &-fade-leave-active {
-    transition: all .15s cubic-bezier(0, 0, .2, 1);
+  &-fade-leave-active, &-fade-enter-active{
+    transition: all 1s ease;
   }
 
   &-fade-enter-from, &-fade-leave-to {
     opacity: 0;
-    transform: scale(0.8);
+    transform: translateY(-30px);
   }
 }