@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/components/ContextMenu.vue

@@ -1,15 +1,19 @@
 <template>
 	<Teleport to=".Y29u">
-		<div v-if="!!(computedState)" :class="computedClass" :style="computedStyle" ref="contextMenu">
-			<div :class="bodyClass">
-				<slot name="default" :context="context"></slot>
-			</div>
-		</div>
+		<Transition :name="transition" @after-enter="onAppear" @after-leave="onLeave">
+      <div v-show="!!(computedState)" :class="computedClass" :style="computedStyle" ref="contextMenu">
+        <div :class="bodyClass">
+          <slot name="default" :context="context"></slot>
+        </div>
+      </div>
+    </Transition>
 	</Teleport>
 </template>
 
 <script>
 
+import {parseBoolean} from "../utils/helpers.mjs";
+
 export default {
 
   props:{
@@ -33,11 +37,9 @@ export default {
 		bodyClass: String,
 
 		dismiss: {
-			type: Boolean,
+			type: [ String, Boolean ],
 			default: true
-		},
-
-    width: String,
+		}
 
   },
 
@@ -68,7 +70,8 @@ export default {
 			isOpen: false,
 			context: null,
 			closing: false,
-      currentCaller: null
+      currentCaller: null,
+      transition: 'slidedown'
 		}
 	},
 
@@ -78,45 +81,28 @@ export default {
 			if(to){
 				this.open()
 			}
-			else{
-				window.removeEventListener('click', this.onDismiss)
-				window.removeEventListener('scroll', this.onDismiss)
-			}
 		}
 
 	},
 
   methods: {
 
-		onOpen(){
-			if(typeof window === 'undefined') return
-
-			const transitionEnd = () => {
-				window.addEventListener('click', this.onDismiss)
-				window.addEventListener('scroll', this.onDismiss)
-        if(this.$refs.contextMenu)
-				  this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
-				this.$emit('open')
-			}
-
-			this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
-			this.$refs.contextMenu.addEventListener('transitionend', transitionEnd)
-			this.$nextTick(() => {
-				this.$refs.contextMenu.classList.add(this.$style.active)
-			})
-		},
-
-		onDismiss(e){
-			if(typeof window === 'undefined') return
-			if(!this.$refs.contextMenu) return
+    onClick(){
+      if(parseBoolean(this.dismiss) && this.isOpen)
+        this.close()
+    },
 
-			if(e.target.closest('.' + this.$style.contextMenu) && !this.dismiss)
-				return
+    onAppear(){
+      window.addEventListener('click', this.onClick)
+      this.$emit('open')
+    },
 
-			this.close()
-		},
+    onLeave(){
+      window.removeEventListener('click', this.onClick)
+    },
 
 		open(caller, context){
+      caller = caller ?? this.caller
 
       const originalCaller = caller
 			if(this.isOpen && this.currentCaller !== caller){
@@ -127,12 +113,6 @@ export default {
 				})
 			}
 
-			if(caller){
-				this.isOpen = true
-			}
-
-      caller = caller ?? this.caller
-
 			if(caller){
 
 				caller = caller.$el ? caller.$el :
@@ -141,129 +121,88 @@ export default {
 				this.context = context
 
 				if(caller){
-
-					const media = this.$util.calculateMediaPrefix(window.innerWidth)
-					let maxHeight, transformOrigin, transform
-					let top, right, bottom, left
-					if([ '*', 'sm' ].includes(media)){
-						this.$nextTick(() => {
-							const rect = caller.getBoundingClientRect()
-
-							top = Math.round(rect.y + rect.height)
-							transformOrigin = 'top left'
-
-							if(top > (window.innerHeight / 2)){
-								top = undefined
-								bottom = Math.round(window.innerHeight - rect.y)
-								transformOrigin = 'bottom left'
-								transform = 'translate3d(0, -10px, 0)'
-							}
-							else{
-								transform = 'translate3d(0, 10px, 0)'
-								maxHeight = window.innerHeight - top - 36
-							}
-
-							this.computedStyle = {
-								left: '10px',
-								right: '10px',
-								top: top ? top +  'px' : top,
-								bottom: bottom ? bottom + 'px' : bottom,
-								maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
-								transformOrigin: transformOrigin,
-								transform
-							}
-
-							this.onOpen()
-						})
-					}
-					else{
-						this.$nextTick(() => {
-							const rect = caller.getBoundingClientRect()
-
-							switch(this.position){
-
-								case 'bottom-right':
-									right = window.innerWidth - (Math.round(rect.x) + rect.width)
-									top = Math.round(rect.y + rect.height + 8)
-									maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
-									transformOrigin = 'top right'
-									break
-
-								case 'top-left':
-									maxHeight = Math.round(rect.top - 16)
-									bottom = window.innerHeight - rect.top + 8
-									left = Math.round(rect.x)
-									transformOrigin = 'bottom left'
-									break
-
-								case 'top-right':
-									maxHeight = Math.round(rect.top - 16)
-									bottom = window.innerHeight - rect.top + 8
-									right = window.innerWidth - (Math.round(rect.x) + rect.width)
-									transformOrigin = 'bottom right'
-									break
-
-                case 'right':
-                  left = Math.round(rect.x + rect.width)
-                  top = Math.round(rect.y - 1)
-                  transformOrigin = 'top left'
-                  break
-
-								default:
-									left = Math.round(rect.x)
-									top = Math.round(rect.y + rect.height + 8)
-									//maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
-									transformOrigin = 'top left'
-									break
-							}
-
-							if(left){
-								if(left + this.$refs.contextMenu.clientWidth >= (window.innerWidth - 16)){
-									left = window.innerWidth - (this.$refs.contextMenu.clientWidth + 16)
-
-									if(transformOrigin === 'top left'){
-										transformOrigin = 'top right'
-									}
-								}
-							}
-
-							if(top){
-								if(top + this.$refs.contextMenu.clientHeight >= (window.innerHeight - 16)){
-									top = window.innerHeight - (this.$refs.contextMenu.clientHeight + 16)
-
-									if(transformOrigin === 'top left'){
-										transformOrigin = 'bottom left'
-									}
-									else if(transformOrigin === 'top right'){
-										transformOrigin = 'bottom right'
-									}
-								}
-
-								if(top < 0){
-									top = 0
-								}
-							}
-
-							maxHeight = this.$refs.contextMenu.clientHeight > window.innerHeight * .8 ?
-								Math.round(window.innerHeight * .8) : this.$refs.contextMenu.clientHeight + 24
-
-							this.computedStyle = {
-								left: left ? left + 'px' : left,
-								right: right ? right + 'px' : right,
-								top: top ? top +  'px' : top,
-								bottom: bottom ? bottom +  'px' : bottom,
-								maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
-								transformOrigin: transformOrigin
-							}
-
-              if(this.width === 'parent'){
-                this.computedStyle.width = parseInt(rect.width) + 'px'
-              }
-
-							this.onOpen()
-						})
-					}
-
+          if(this.$device.mediaIndex === 0){
+            this.computedStyle = {
+              left: 0,
+              right: 0,
+              top: '60px',
+              minWidth: `${caller.clientWidth}px`,
+              transformOrigin: 'top'
+            }
+          }
+          else{
+            let maxHeight, transformOrigin
+            let top, right, bottom, left
+            const rect = caller.getBoundingClientRect()
+
+            switch(this.position){
+
+              case 'bottom-right':
+                right = window.innerWidth - (Math.round(rect.x) + rect.width)
+                top = Math.round(rect.y + rect.height + 8)
+                maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
+                transformOrigin = 'top right'
+                break
+
+              case 'top-left':
+                maxHeight = Math.round(rect.top - 16)
+                bottom = window.innerHeight - rect.top + 8
+                left = Math.round(rect.x)
+                transformOrigin = 'bottom left'
+                this.transition = 'slideup'
+                break
+
+              case 'top-right':
+                maxHeight = Math.round(rect.top - 16)
+                bottom = window.innerHeight - rect.top + 8
+                right = window.innerWidth - (Math.round(rect.x) + rect.width)
+                transformOrigin = 'bottom right'
+                this.transition = 'slideup'
+                break
+
+              case 'right':
+                left = Math.round(rect.x + rect.width)
+                top = Math.round(rect.y - 2)
+                transformOrigin = 'top left'
+                break
+
+              case 'bottom':
+                left = Math.round(rect.x)
+                top = null
+                bottom = 0
+                transformOrigin = 'bottom'
+                maxHeight = window.innerHeight
+                this.transition = 'slideup'
+                break
+
+              default:
+                left = Math.round(rect.x)
+                top = Math.round(rect.y + rect.height)
+                transformOrigin = 'top left'
+                maxHeight = window.innerHeight - top - 16
+                this.transition = 'slidedown'
+
+                if(top > window.innerHeight * .8){
+                  top = null
+                  bottom = window.innerHeight - rect.top + 8
+                  transformOrigin = 'bottom'
+                  maxHeight = Math.round(rect.top - 16)
+                  this.transition = 'slideup'
+                }
+                break
+            }
+
+            this.computedStyle = {
+              left: left ? left + 'px' : '',
+              right: right ? right + 'px' : '',
+              top: top ? top +  'px' : '',
+              bottom: bottom !== null ? bottom +  'px' : '',
+              maxHeight: maxHeight ? maxHeight + 'px' : '',
+              transformOrigin: transformOrigin
+            }
+          }
+
+          this.isOpen = true
           this.currentCaller = originalCaller
 				}
 				else{
@@ -275,28 +214,12 @@ export default {
 			}
 		},
 
-		close(fn){
-			if(!this.$refs.contextMenu) return
-
-			const transitionEnd = () => {
-				window.removeEventListener('click', this.onDismiss)
-				window.removeEventListener('scroll', this.onDismiss)
-				if(this.$refs.contextMenu){
-					this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
-					this.computedStyle = {}
-				}
-				this.computedStyle = null
-				this.isOpen = false
-				this.$emit('dismiss')
-				if(typeof fn === 'function') fn()
-			}
-			this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
-			this.$refs.contextMenu.addEventListener('transitionend', transitionEnd)
-			this.$refs.contextMenu.classList.remove(this.$style.active)
+		close(){
+      this.isOpen = false
+      this.$emit('dismiss')
 		},
 
 		toggle(caller, context){
-
 			if(this.isOpen){
 				this.close()
 			}
@@ -318,31 +241,24 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-xl;
-	@apply border-[2px] border-text-200 shadow-2xl whitespace-nowrap;
-	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
-	opacity: 0;
-}
-
-.active{
-	opacity: 1;
-	transform: translate3d(0, 0, 0);
+	@apply fixed bg-base-400 backdrop-blur-xl min-w-[150px] overflow-y-auto rounded-lg;
+	@apply whitespace-nowrap shadow-2xl border-[1px] border-border-50 mt-[1px];
+  z-index: 180;
 }
 
-@media screen(md){
+@media screen and (min-width: 640px){
 
 	.contextMenu{
-		@apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-lg;
-		@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
-		transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
-		opacity: 0;
-		transform: scale(.1);
+		@apply fixed min-w-[150px] overflow-y-auto;
 	}
 
-	.active{
-		opacity: 1;
-		transform: scale(1);
-	}
+}
+
+@media screen and (max-width: 640px){
+
+  .contextMenu{
+    @apply w-full;
+  }
 
 }
 

package/src/components/ContextMenuItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :class="$style.item">
+    <div class="py-1">
+      <div :class="`${$style.indicator}${value.status === 2 ? ` ${$style.read}` : ''}`"></div>
+    </div>
+    <div class="flex-1 flex flex-col">
+      <div class="flex flex-row gap-6">
+        <strong class="flex-1 text-ellipsis-nowrap">{{ value.title }}</strong>
+        <small class="text-text-400">{{ dayjs(value.createdAt).format('D MMM HH:mm') }}</small>
+      </div>
+      <div>
+        <p class="whitespace-pre-wrap line-clamp-2">Biscuit bonbon gummi bears biscuit jelly-o cupcake danish tart carrot cake. Icing muffin gummi bears</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import dayjs from "dayjs";
+
+export default{
+  methods: {dayjs},
+
+  props: {
+
+    value: Object
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.item {
+  @apply flex flex-row gap-3 p-3;
+}
+
+.item:hover{
+  @apply bg-primary-50;
+}
+
+.indicator{
+  @apply w-[14px] h-[14px] rounded-full bg-primary-600;
+}
+
+.indicator.read{
+  @apply bg-text-300;
+}
+
+</style>