@ozdao/prometheus-framework 0.2.112 → 0.2.113

package/src/modules/globals/components/blocks/CardHeader.vue

@@ -122,7 +122,7 @@
 					        	br-2px 
 					        	br-white 
 					        	i-thin 
-					        	bg-grey 
+					        	bg-light 
 					        	radius-big
 					        "
 						    />
@@ -140,7 +140,7 @@
 					        	br-2px 
 					        	br-white 
 					        	i-thin 
-					        	bg-grey 
+					        	bg-light 
 					        	radius-big
 					        "
 								/>
@@ -152,7 +152,7 @@
 
 				<!-- Report -->
 				<Dropdown 
-					v-if="type !== 'short' && user && user != creator.target._id"
+					v-if="type !== 'short' && user"
 					:label="{ component: IconEllipsis, class: 't-transp i-regular' }"
 					:align="'right'"
 					class="cursor-pointer z-index-2"
@@ -175,28 +175,29 @@
 							</button>
 						</FormReport>
 
-						<!-- <ButtonToggleMembership
-							v-if="user"
-					      	:user="user"
-					      	:type="creator.hidden ? 'organization' : 'user'" 
-				      		:role="'blocked'" 
-					      	:target="creator.hidden ? owner.target._id : creator.target._id" 
-					      	:status="entity.isBlocked" 
-					      	:text="{create: 'Block', remove: 'Unblock'}"
-					      	@updateMembership="event => {entity.isBlocked = !entity.isBlocked}"
-					      	class="t-white mn-t-thin bg-red" 
-			    		/> -->
+						<template  
+			        v-for="action in actions"   
+			        v-if="actions && actions.length > 0"
+			      >
+			        <router-link
+			          v-if="action.to"
+			          :key="action.to"
+			          :to="action.to"
+			          :class="action.class || 'w-100 bg-black br-solid br-1px br-white-transp-20 t-white button-small button'"
+			        >
+			          {{ action.label }}
+			        </router-link>
+
+			        <button
+			          v-if="action.method"
+			          @click="action.method"
+			          :class="action.class || 'w-100 bg-black br-solid br-1px br-white-transp-20 t-white button-small button'"
+			        >
+			          {{ action.label }}
+			        </button>
+			      </template>
 					</section>
-		      </Dropdown>	
-				<!-- <FormReport
-					
-				>
-					<button 
-						class="mn-l-small br-solid br-black-transp-10 br-2px bg-transp i-semi cursor-pointer radius-extra"
-					>
-						!
-					</button>
-				</FormReport> -->
+		    </Dropdown>	
 			</div>
 		</div>
 	</header>
@@ -227,7 +228,8 @@
 		'creator',
 		'members',
 		'membersPhotos',
-		'type'
+		'type',
+		'actions'
 	])
 
 	const router = useRouter()

package/src/modules/globals/components/elements/ButtonDate.vue

@@ -0,0 +1,66 @@
+<template>
+  <div 
+    @click="handleClick"
+    class="flex-center flex"
+  >
+    <IconCalendar class="w-1r mn-r-thin h-auto"/>
+    <span class="t-semi">11 Apr - 18 Mar 23</span>
+  </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+
+import IconCalendar from '@pf/src/modules/icons/navigation/IconCalendar.vue'
+
+const props = defineProps({
+  action: {
+    type: Function,
+  },
+});
+
+const { action } = toRefs(props);
+
+const handleClick = () => {
+  if (action.value) action.value();
+};
+</script>
+
+<style scoped>
+.bg-white {
+  background-color: white;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.pd-thin {
+  padding: 0.5rem;
+}
+.w-2r {
+  width: 2rem;
+}
+.t-center {
+  text-align: center;
+}
+.t-black {
+  color: black;
+}
+.radius-small {
+  border-radius: 0.25rem;
+}
+.flex-justify-between {
+  justify-content: space-between;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex {
+  display: flex;
+}
+.aspect-1x1 {
+  aspect-ratio: 1 / 1;
+}
+.transition-linear {
+  transition: width 0.3s linear;
+}
+</style>

package/src/modules/globals/components/elements/ButtonSort.vue

@@ -0,0 +1,41 @@
+<template>
+  <div 
+    @click="handleClick"
+    class="
+      cursor-pointer
+      t-center
+      t-black
+      radius-small 
+      flex-center
+      flex
+      aspect-1x1
+    "
+  >
+    <IconSort
+      :order="order"
+      class="w-100 h-auto"
+    />
+  </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+
+import IconSort from '@pf/src/modules/icons/navigation/IconSort.vue'
+
+const props = defineProps({
+  action: {
+    type: Function,
+  },
+  order: {
+    type: String,
+    required: true
+  }
+});
+
+const { action, order } = toRefs(props);
+
+const handleClick = () => {
+  if (action.value) action.value();
+};
+</script>

package/src/modules/globals/components/layouts/Client.vue

@@ -0,0 +1,273 @@
+<template>
+	<div id="app-wrapper" class="pos-relative">
+		<transition name="moveFromTop" appear>
+			<Loader v-if="!page" class="pos-fixed"/>
+		</transition>
+
+		<transition name="moveFromTop" mode="out-in" appear>
+			<Header 
+				ref="header" 
+				class="transition-ease-in-out br-b br-solid br-grey-transp-10 pos-t-0" 
+				:theme="route.name === 'Home' ? 'dark' : 'light'"
+				:class="{
+					'pos-l-70': store.globals.state.isOpenSidebar,
+					'pos-l-0': !store.globals.state.isOpenSidebar,
+					'pos-fixed': route.name === 'Home',
+					'bg-white ': route.name !== 'Home'
+				}"
+			/>
+		</transition>
+
+		<transition name="moveFromTop" mode="out-in" appear>
+			<NavigationBar
+		  	v-if="MOBILE_APP"
+				:style="MOBILE_APP === 'ios' ?'padding-top: 6rem;':''" 
+		  />
+		</transition>
+
+		<Sidebar 
+			v-if="show" 
+			:stateSidebar="store.globals.state.isOpenSidebar" 
+			@closeSidebar="() => { 
+				store.globals.state.isOpenSidebar = !store.globals.state.isOpenSidebar 
+			}"
+
+			class="transition-ease-in-out pos-absolute w-70 z-index-0  bg-light"
+			:class="{
+				'pos-l-70-negative': !store.globals.state.isOpenSidebar,
+				'pos-l-0': store.globals.state.isOpenSidebar
+			}"
+		>
+			<Navigation class="h3 pd-big cols-1" />
+		</Sidebar>
+
+	  <Popup 
+	  	@close-popup="closeLocationPopup" 
+	  	:isPopupOpen="store.globals.state.isOpenLocationPopup"
+	  	class="bg-white pd-semi w-m-33r radius-big"
+	  >	
+	  	<LocationSelection />
+	  </Popup>
+
+		<section 
+			v-if="show"
+			id="screen" 
+			ref="screen"
+			@scroll="handleScroll"
+			@click="store.globals.state.isOpenSidebar
+				? 
+				a => store.globals.state.isOpenSidebar = false 
+				: 
+				a => {console.log('not succes')}"
+			class="transition-ease-in-out h-min-100 w-100 bg-white pos-relative o-scroll"
+			:class="{
+				'pos-l-70': store.globals.state.isOpenSidebar,
+				'pos-l-0': !store.globals.state.isOpenSidebar
+			}"
+		>
+			<!-- <ShopCart /> -->
+
+			<Status 
+				v-if="store.globals.state.error.show" 
+				:data="store.globals.state.error"
+				class="z-index-7" 
+			/>
+			
+			<router-view  v-slot="{ Component, route }">
+				<transition @before-enter="scrollTop" name="scaleIn" mode="out-in" appear>
+	      	<component 
+	      		ref="page"  
+	      		:is="Component" 
+	      		:key="route.path"
+	      	/>
+	      </transition>
+			</router-view>
+			
+      <Footer />
+		</section>
+
+    <BottomNavigation 
+      v-if="MOBILE_APP && route.meta.title_hide"
+      class="pd-small z-index-2"
+    />
+	</div>
+</template>
+
+
+<script setup>
+	import { computed, ref, onMounted,provide, inject, onUnmounted } from 'vue'
+	// Router
+	import { useRoute, useRouter } from 'vue-router'
+	// Store
+	import { useStore } from '@/store';
+	// Partials
+	import Loader from '@pf/src/components/Loader/Loader.vue'
+	import Status from '@pf/src/components/Status/Status.vue'
+	import Sidebar from '@pf/src/components/Sidebar/Sidebar.vue'
+	import Popup from '@pf/src/components/Popup/Popup.vue'
+	import LocationSelection from '@pf/src/components/LocationSelection/LocationSelection.vue'
+
+	import Header	from '@pf/src/modules/globals/components/partials/Header.vue'
+	import Navigation from '@pf/src/modules/globals/components/partials/Navigation.vue'
+	import Footer from '@pf/src/modules/globals/components/partials/Footer.vue'
+
+  import NavigationBar from '@pf/src/modules/mobile/components/NavigationBar/NavigationBar.vue';
+  import BottomNavigation from '@pf/src/modules/mobile/components/BottomNavigation/BottomNavigation.vue';
+	import ShopCart from '@pf/src/modules/orders/components/partials/ShopCart.vue'
+	/////////////////////////////
+	// CREATED
+	/////////////////////////////
+	const route = useRoute()
+	const router = useRouter()
+	const store = useStore();
+	// State
+	let show = ref(false)
+	// Preloader
+	const page = ref(null)
+	const screen = ref(null)
+	// Ref Code
+	const referalCode = ref(route.query.referalCode);
+	// Scrolling header
+	const scrollOffset = ref(0)
+	let isScrolled = false
+	const header = ref(null)
+	/////////////////////////////
+	// Methods
+	/////////////////////////////
+	function closeLocationPopup() {
+	  store.globals.state.isOpenLocationPopup = false;
+	}
+	function scrollTop(){
+		document.getElementById('app').scrollIntoView();
+	}
+	const handleScroll = () => {
+	  const currentScroll = event.target.scrollTop
+
+	  if (currentScroll > 150 && !isScrolled) {
+	    isScrolled = true;
+	    // header.value.props.theme = "light"
+	    header.value.$el.classList.add('scrolled');
+	    header.value.$el.style.transition = 'background 0.3s ease-in-out';
+
+	    const firstRect = header.value.$el.getBoundingClientRect();
+	    const invert = -firstRect.top;
+
+	    header.value.$el.style.transform = `translateY(${invert}px)`;
+
+	    setTimeout(() => {
+	      header.value.$el.style.transform = 'translateY(0)';
+	    }, 0);
+	  } else if (currentScroll <= 150 && isScrolled) {
+	    isScrolled = false;
+	    header.value.$el.classList.remove('scrolled');
+	    header.value.$el.style.transition = 'background 0.3s ease-in-out';
+
+	    const firstRect = header.value.$el.getBoundingClientRect();
+	    const invert = firstRect.top;
+
+	    header.value.$el.style.transform = `translateY(${invert}px)`;
+
+	    setTimeout(() => {
+	      header.value.$el.style.transform = 'translateY(0)';
+	    }, 0);
+	  }
+	};
+	/////////////////////////////
+	// MOUNTED
+	/////////////////////////////
+	onMounted(async () => {
+		console.log('header is', header.value.$el.$el)
+		if (page) show.value = true
+		
+		const savedPosition = localStorage.getItem('position');
+
+	  if (savedPosition) {
+	    store.globals.state.position = JSON.parse(savedPosition);
+	  } else {
+  		store.globals.state.isOpenLocationPopup = true;
+	  }
+
+		if (referalCode.value) {
+		  localStorage.setItem('referalCode', referalCode.value);
+		}
+	});
+</script>
+
+<style lang="scss">;	
+.scrolled {
+	background: black !important;
+} 
+
+	.scaleIn-enter-active,
+	.scaleIn-leave-active {
+		transform: scale(1);  
+		transition: all 0.5s ease; 
+	}
+	.scaleIn-enter-from,
+	.scaleIn-leave-to {
+		opacity: 0;
+		transition: all 0.5s ease; 
+	}
+
+	.moveFromTop-enter-active,
+	.moveFromTop-leave-active {
+		transform: translateY(0);
+		opacity: 1;
+		transition: all 0.5s ease; 
+		
+	}
+	.moveFromTop-enter-from,
+	.moveFromTop-leave-to {
+		transform: translateY(-1rem);
+		opacity: 0;
+		transition: all 0.5s ease;
+	}
+
+	.moveFromTopAbsolute-enter-active,
+	.moveFromTopAbsolute-leave-active {
+		transform: translateY(0);
+		opacity: 1;
+		transition: all 0.5s ease; 
+		
+	}
+	.moveFromTopAbsolute-enter-from,
+	.moveFromTopAbsolute-leave-to {
+		position: absolute;
+		transform: translateY(-1rem);
+		opacity: 0;
+		transition: all 0.5s ease;
+		
+	}
+	.ScaleOut-enter-active,
+	.ScaleOut-leave-active {
+		opacity: 1;
+		transform: scale(1);
+		transition: all 0.3s ease; 
+		
+	}
+	.ScaleOut-enter-from,
+	.ScaleOut-leave-to {
+		opacity: 0;
+		transform: scale(0.9);
+		transition: all 0.3s ease;
+	}
+	.slide-fade-enter-active {
+		// min-height: 100vh;
+	  transition: all  0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.slide-fade-leave-active {
+		// min-height: 100vh;
+	  transition: all  0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.slide-fade-enter-from,
+	.slide-fade-leave-to {
+		min-height: 0;
+	  transform: translateX(20px);
+	  opacity: 0;
+	  left: 0;
+	  top: 0;
+	}
+
+</style>

package/src/{components/Footer → modules/globals/components/partials}/Footer.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="pd-t-zero pd-thin">
-  <footer class="bg-grey t-black radius-big pd-thin">
+  <footer class="bg-light t-black radius-big pd-thin">
 <!-- 
     <div id="top-footer" class="cols-3 section">