@ozdao/prometheus-framework 0.2.30 → 0.2.31

package/src/components/LocationSelection/LocationSelection.vue

@@ -1,70 +1,65 @@
 <template>
-	<div class="select-country">
-		<p class="h1">🌍</p>
-		<br>
+	<div class="t-center flex-center">
+		<p class="h1 mn-b-medium">🌍</p>
+		
 		<h3 class="mn-b-semi">{{t('title')}}</h3>
-		<!-- Select country -->
-		<div class="">
-			<!-- Description -->
-			<p class="mn-b-small t-transp p-medium">{{t('description')}}</p> 
-			<Address
-        apiKey="AIzaSyDDR6WgYB7XMt7yTDDzQNEdF_gTdUiq8dI" 
-        
-        :address="position.address" 
-        :location="position.location"  
-        
-        placeholder="Enter delivery address"  
-
-        class="
-          bg-white br-grey br-solid br-2px radius-big pd-medium mn-b-small
-        "
-
-        @update:country="newCountry => {
-          position.country = newCountry;
-        }"
-			  @update:state="newState => {
-          position.state = newState;
-        }"
-			  @update:city="newCity => {
-          position.city = newCity;
-        }"
-        @update:location="newLocation => {
-          position.location = newLocation;
-        }"
-        @update:address="newAddress => {
-          position.address = newAddress;
-        }"
-      />
-
-      <p class="mn-b-small t-transp p-medium">Or choose on map:</p>
-
-      <LocationMarker 
-	      apiKey="AIzaSyDDR6WgYB7XMt7yTDDzQNEdF_gTdUiq8dI" 
-
-        :address="position.address" 
-        :location="position.location" 
-
-        class="h-20r radius-big o-hidden"
-
-        @update:country="newCountry => {
-          position.country = newCountry;
-        }"
-			  @update:state="newState => {
-          position.state = newState;
-        }"
-			  @update:city="newCity => {
-          position.city = newCity;
-        }"
-        @update:location="newLocation => {
-          position.location = newLocation;
-        }"
-        @update:address="newAddress => {
-          position.address = newAddress;
-        }"
-      />
-
-      <button @click="savePosition()" class="w-100 mn-t-medium button">Save Position</button>
-		</div>
+		<p class="mn-b-small t-transp p-medium">{{t('description')}}</p> 
+		
+		<Address
+      apiKey="AIzaSyDDR6WgYB7XMt7yTDDzQNEdF_gTdUiq8dI" 
+      
+      :address="position.address" 
+      :location="position.location"  
+      
+      placeholder="Enter your address"  
+
+      class="
+        bg-white radius-tl-medium radius-tr-medium  t-black br-grey br-solid br-2px pd-medium
+      "
+
+      @update:country="newCountry => {
+        position.country = newCountry;
+      }"
+		  @update:state="newState => {
+        position.state = newState;
+      }"
+		  @update:city="newCity => {
+        position.city = newCity;
+      }"
+      @update:location="newLocation => {
+        position.location = newLocation;
+      }"
+      @update:address="newAddress => {
+        position.address = newAddress;
+      }"
+    />
+
+    <LocationMarker 
+      apiKey="AIzaSyDDR6WgYB7XMt7yTDDzQNEdF_gTdUiq8dI" 
+
+      :address="position.address" 
+      :location="position.location" 
+
+      class=" radius-bl-medium radius-br-medium h-15r o-hidden"
+
+      @update:country="newCountry => {
+        position.country = newCountry;
+      }"
+		  @update:state="newState => {
+        position.state = newState;
+      }"
+		  @update:city="newCity => {
+        position.city = newCity;
+      }"
+      @update:location="newLocation => {
+        position.location = newLocation;
+      }"
+      @update:address="newAddress => {
+        position.address = newAddress;
+      }"
+    />
+		
+		<button @click="savePosition()" class="w-100 mn-t-medium bg-main radius-extra button">Save Position</button>
 	</div>
 </template>
 
@@ -85,17 +80,17 @@ const route = useRoute()
 const router = useRouter()
 
 const position = ref({
-	country: '',
-  state: '',
-  city: '',
-  address: '',
-  location: '',
+	country: null,
+  state: null,
+  city: null,
+  address: null,
+  location: null,
 })
 
 
 function savePosition() {
 	store.globals.state.position = { ...position.value };
-	store.globals.state.isLocationPopupOpen = false
+	store.globals.state.isOpenLocationPopup = false
 
 	localStorage.setItem('position', JSON.stringify(store.globals.state.position));
 }
@@ -109,7 +104,7 @@ const text = {
   messages: {
     en: {
 	    title: "Choose Your Location",
-	    description: "Please select your country from the list below to see delivery options and other relevant information:",
+	    description: "Enter your address or select it on the map to see the nearest offers to you.",
 	    choose: "Select",
 	    countries: [
 	    	"Thailand\u00A0🇹🇭"
@@ -147,7 +142,4 @@ const { t } = useI18n(text)
 </script>
 
 <style lang="scss">
-	.select-country {
-		max-width: 100%;
-	}
 </style>

package/src/components/Magnifier/Magnifier.vue

@@ -31,7 +31,7 @@ function updateZoomLens(event) {
   const x = event.clientX - rect.left;
   const y = event.clientY - rect.top;
 
-  const lensSize = 100;
+  const lensSize = 200;
 
   const lensX = Math.max(0, Math.min(x - lensSize / 2, rect.width - lensSize));
   const lensY = Math.max(0, Math.min(y - lensSize / 2, rect.height - lensSize));
@@ -79,8 +79,8 @@ function handleTouchEnd() {
 
 .zoom-lens {
   position: absolute;
-  width: 100px;
-  height: 100px;
+  width: 200px;
+  height: 200px;
   border: 1px solid rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
   background-repeat: no-repeat;

package/src/components/Navigation/Navigation.vue

@@ -1,47 +1,47 @@
 <template>
-  <ul class="t-semi flex-nowrap flex-center flex">
-    <li class="mn-r-semi">
+  <ul class="t-semi gap-small flex-nowrap flex-center flex">
+    <li>
       <router-link  
-        :to="getMarketplaceLink()"
-      >
+        :to="getMarketplaceLink(null,store.globals.state.position?.country,store.globals.state.position?.state,store.globals.state.position?.city)"
+     >
         {{ t('HEADER.MENU.MARKETPLACE') }}
       </router-link>
     </li>
-    <li class="mn-r-semi">
-      <router-link  
-        :to="getSpotsLink()"
-      >
+    <li>
+      <router-link    
+        :to="getSpotsLink(store.globals.state.position?.country,store.globals.state.position?.state,store.globals.state.position?.city)"
+     >
         {{ t('HEADER.MENU.DISPENSARIES') }}
       </router-link>
     </li>
 
-    <!-- <li class="mn-r-semi">
+    <!-- <li>
       <router-link  
         to="/gallery"
-      >
+     >
         {{ t('HEADER.MENU.GALLERY') }}
       </router-link>
     </li> -->
     
-    <li class="mn-r-semi">
+    <li>
       <router-link  
         to="/events"
-      >
+     >
         {{ t('HEADER.MENU.EVENTS') }}
       </router-link>
     </li>
    
-    <li class="mn-r-semi">
+    <li>
       <router-link  
         to="/community" 
-      >
+     >
         {{ t('HEADER.MENU.BLOG') }}
       </router-link>
     </li>
-    <li class="mn-r-semi">
+    <li>
       <router-link  
         to="/governance" 
-      >
+     >
         {{ t('HEADER.MENU.GOVERNANCE') }}
       </router-link>
     </li>

package/src/components/Popup/Popup.vue

@@ -2,26 +2,28 @@
 	
 	<teleport to="body" v-if="isPopupOpen">
 		<transition name="TransitionTranslateY" appear>
+			
 			<div v-if="isPopupOpen" key="popup-content" class="pd-small popup-wrapper">
 
 				<transition name="TransitionTranslateY" mode="out-in">
 					<section v-if="isPopupOpen" class="pos-relative z-index-4" v-bind="$attrs">
-						<!-- Close Popup -->
-						<button @click="closePopup()" class="pd-regular hover-scale-1  z-index-5 button-close-popup button">
-							<IconCross/>
-						</button>
+							<IconCross @click="closePopup()" class="cursor-pointer pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-regular z-index-5"/>
+
 						<slot></slot>
 					</section>  
 				</transition>
 
 				<div 
 					@click="closePopup()" 
-			    	:class="{'active':isPopupOpen === true}" 
-			    	class="color-overlay z-index-3">
+			    :class="{'active':isPopupOpen === true}" 
+			    class="color-overlay z-index-3">
 				</div>
+
 			</div>
+
 		</transition>
 	</teleport>
+
 </template>
 
 <script setup>

package/src/components/Select/Select.vue

@@ -2,8 +2,9 @@
   <!-- Input Wrapper -->
   <div 
     @click.stop="toggleMenu"  
+    v-click-outside="clickedOutside" 
     :class="$attrs.class" 
-    class="cursor-pointer flex-nowrap flex"
+    class="cursor-pointer flex-v-center flex-nowrap flex pos-relative"
   >
     <!-- Label -->
     <div v-if="label" class="t-transp mn-r-small">
@@ -14,7 +15,7 @@
     <li class="w-100">
       <!-- Selected Value -->
       <span>
-        {{ selectedOption?.name || selectedOption || placeholder }}
+        {{ selectedOption?.name ? selectedOption?.name : selectedOption || placeholder }}
       </span>
     </li>
 
@@ -23,7 +24,7 @@
       <ul 
         v-if="showMenu" 
         :class="$attrs.class"
-        class="pos-absolute pos-t-100 pos-l-0 z-index-5 w-100 mn-t-thin"
+        class="bs-black pos-absolute pos-t-100 pos-l-0 z-index-5 w-100 mn-t-thin"
       >
         <li @click.stop="selectOption(option)" v-for="option in optionsListed">
           <span v-if="option" class="w-100">
@@ -47,19 +48,40 @@ import { ref, computed, watch } from 'vue'
 
 const emit = defineEmits(['update:select', 'focus', 'blur'])
 
+import clickOutside from '../FieldPhone/click-outside';
+
+let vClickOutside = clickOutside
+
+
 const props = defineProps({
   label: String,
   select: [String, Object],
+  property: String,
   placeholder: { type: String, default: 'Please select an item' },
   options: { type: Array, default: () => [] },
   validation: Boolean,
 })
 
-const selectedOption = ref(props.select)
+const selectedOption = ref(props.property ? findObjectByValue(props.select, props.property, props.options) : props.select)
 const showMenu = ref(false)
 
+function clickedOutside () {
+  showMenu.value = false
+}
+
+
+function findObjectByValue(value, property,objects) {
+  for (const object of objects) {
+    if (object[property] === value || object === value) {
+      return object;
+    }
+
+  }
+  return null;
+}
+
 watch(() => props.select, (newSelect) => {
-  selectedOption.value = newSelect;
+  selectedOption.value = props.property ? findObjectByValue(props.select, props.property, props.options) : props.select;
 });
 
 const optionsListed = computed(() => {
@@ -68,13 +90,20 @@ const optionsListed = computed(() => {
 
 const toggleMenu = () => {
   showMenu.value = !showMenu.value
+
   emit(showMenu.value ? 'focus' : 'blur')
 }
 
 const selectOption = option => {
   selectedOption.value = option
+  
   toggleMenu()
-  emit('update:select', selectedOption.value)
+
+  if (props.property) {  
+    emit('update:select', selectedOption.value[props.property])
+  } else {
+    emit('update:select', selectedOption.value)
+  }
 }
 </script>
 

package/src/components/SelectMulti/SelectMulti.vue

@@ -500,18 +500,17 @@ export default {
   }
 
   .multiselect__input,
-  .multiselect__single {
+  .multiselect__single,
+  .multiselect__placeholder {
     position: relative;
     display: inline-block;
     min-height: 20px;
     line-height: 20px;
     border: none;
-/*    padding: 0 0 0 5px;*/
     width: calc(100%);
+    height: inherit;
     box-sizing: border-box;
-/*    margin-bottom: 8px;*/
     vertical-align: top;
-    height: 100%;
     display: flex;
     align-items: center;
   }
@@ -542,6 +541,7 @@ export default {
 
   .multiselect__tags {
     display: block;
+    height: inherit;
   }
 
   .multiselect__tag {
@@ -639,15 +639,6 @@ export default {
     content: "";
   }
 
-  .multiselect__placeholder {
-    color: #adadad;
-    display: inline-block;
-    height: 100%;
-    display: flex;
-    align-items: center;
-/*    margin-bottom: 10px;*/
-/*    padding-top: 2px;*/
-  }
 
   .multiselect--active .multiselect__placeholder {
     display: none;
@@ -659,6 +650,7 @@ export default {
     background: #fff;
     width: 100%;
     max-height: 240px;
+    height: min-content;
     overflow: auto;
     left: 0;
     border-top: none;

package/src/components/Shader/Shader.vue

@@ -0,0 +1,128 @@
+<template>
+  <canvas ref="refCanvas"></canvas>
+</template>
+
+<script setup>
+import {onMounted, ref} from 'vue'
+
+let refCanvas = ref(null)
+const vertexShaderSource = `
+  void main() {
+    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  }
+`;
+
+const fragmentShaderSource = `
+  precision mediump float;
+
+  #define time (iTime * 0.9)
+
+  vec4 gradient(float f)
+  {
+      vec4 c = vec4(0);
+      f = mod(f, 1.5);
+      for (int i = 0; i < 3; ++i)
+          c[i] = pow(0.5 + 0.5 * sin(2.0 * (f + 0.2 * float(i))), 10.0);
+      return c;
+  }
+
+  float offset(float th)
+  {
+      return 0.5 * sin(25.0 * th) * sin(time);
+  }
+
+  vec4 tunnel(float th, float radius)
+  {
+      return gradient(offset(th + 0.25 * time) + 3.0 * log(3.0 * radius) - time);
+  }
+
+  void main() {
+      vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / iResolution.xy;
+      p.x *= iResolution.x / iResolution.y;
+      gl_FragColor = tunnel(atan(p.y, p.x), 2.0 * length(p));
+  }
+`;
+
+onMounted(() => {
+  const canvas = refCanvas.value;
+  const gl = canvas.getContext("webgl");
+
+  if (!gl) {
+    console.error("Unable to initialize WebGL. Your browser may not support it.");
+    return;
+  }
+
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+
+  const program = createProgram(gl, vertexShader, fragmentShader);
+
+  gl.useProgram(program);
+
+  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+  const positionBuffer = gl.createBuffer();
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  const positions = new Float32Array([-1, -1, 3, -1, -1, 3]);
+  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+
+  const vao = gl.createVertexArray();
+  gl.bindVertexArray(vao);
+  gl.enableVertexAttribArray(positionAttributeLocation);
+
+  const size = 2;
+  const type = gl.FLOAT;
+  const normalize = false;
+  const stride = 0;
+  const offset = 0;
+
+  gl.vertexAttribPointer(
+    positionAttributeLocation, size, type, normalize, stride, offset
+  );
+
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.useProgram(program);
+  gl.bindVertexArray(vao);
+
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+});
+
+function createShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error(gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+
+function createProgram(gl, vertexShader, fragmentShader) {
+  const program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error(gl.getProgramInfoLog(program));
+    gl.deleteProgram(program);
+    return null;
+  }
+
+  return program;
+}
+</script>
+
+<style scoped>
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+</style>