@ozdao/prometheus-framework 0.2.312 → 0.2.314

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/prometheus-framework",
-  "version": "0.2.312",
+  "version": "0.2.314",
   "description": "Web3 Framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/components/BottomSheet/BottomSheet.vue

@@ -3,8 +3,10 @@
     <section 
       ref="wrapper" 
       class="w-100 h-100vh"
-      :style="MOBILE_APP === 'ios' ?'padding-top: 6rem;':''" 
-    >
+      :class="{
+        'pd-t-extra': MOBILE_APP === 'ios',  
+      }"
+      >
       <!-- Toggle To Close -->
       <div
         @click="emits('toggle')"

package/src/components/Feed/Feed.vue

@@ -7,6 +7,7 @@
       :placeholder="search.placeholder || 'Search...'"
       :class="search.class || 'bg-light'"
       @search="updateSearch"
+      :autofocus="search.autofocus"
     />
 
     <template

package/src/components/Field/Field.vue

@@ -12,7 +12,8 @@
     value: null,
     validation: false,
     disabled: null,
-    tabindex: -1
+    tabindex: -1,
+    autofocus: false
   });
 
   if (props.value) {
@@ -20,20 +21,23 @@
   }
 
   const textarea = ref(null);
+  const input = ref(null);
+
 
   function resize() {
     if (textarea.value) textarea.value.style.height = "1rem";
     if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + "px";
   }
 
-
   onUpdated(() => {
-   if (props.type === 'textarea') nextTick(() => {  { focus()} })
+   if (props.type === 'textarea') 
+    nextTick(() => {  { focus()} })
     resize()
   });
 
   onMounted(() => {
-    if (props.type === 'textarea') nextTick(() => {  { focus()} })
+    if (props.type === 'textarea') 
+      nextTick(() => {  { focus()} })
     resize()
   });
 
@@ -62,6 +66,7 @@
     <div class="w-100">
       <input 
         v-if="type !== 'textarea'"
+        ref="input"
         @input="event => text = emit('update:field', event.target.value)"
         @focus="event => emit('focus', event)"
         @blur="event => emit('blur', event)"
@@ -71,6 +76,8 @@
         :placeholder="placeholder"
         :tabindex="tabindex"
         :disabled="disabled"
+        :autofocus="autofocus"
+
       />
       <textarea 
         v-else

package/src/modules/auth/views/router/users.js

@@ -57,7 +57,7 @@ const users = {
     component: () => import(/* webpackChunkName: "profile" */ '../components/pages/ProfileEdit.vue'),
   },{
     path: ':_id/blogposts',
-    name: 'User Blogposts',
+    name: 'User Posts',
     meta: {
       title: {
         en: 'Posts',

package/src/modules/community/components/pages/CreateBlogPost.vue

@@ -308,7 +308,7 @@ function onDelete() {
   if (confirm('Are you sure you want to delete this post?')) {
     blog.remove(post.value._id)
       .then(response => {
-        router.push({ name: 'User Blogposts', params: { _id: post.value.creator.target._id } });
+        router.push({ name: 'User Posts', params: { _id: post.value.creator.target._id } });
       })
       .catch(error => {
         console.log(error);

package/src/modules/globals/views/components/blocks/BlockSearch.vue

@@ -10,6 +10,10 @@ const props = defineProps({
     type: String,
     default: 'Enter shop or product name'
   },
+  autofocus:{ 
+    type: Boolean,
+    default: false
+  },
   button: {
     type: String,
     default: 'Search'
@@ -30,6 +34,7 @@ const updateSearch = (search) => {
     <Field
       :placeholder="placeholder"
       @update:field="search => updateSearch(search)"
+      :autofocus="autofocus"
       class="w-100"
     />
 

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

@@ -30,14 +30,14 @@
       />
 		</transition>
 
-	  <Popup 
+	  <!-- <Popup 
 	  	v-if="route.meta.header.location"
 	  	@close-popup="closeLocationPopup" 
 	  	:isPopupOpen="globals.state.isOpenLocationPopup"
 	  	class="bg-white pd-semi w-m-33r radius-big"
 	  >	
 	  	<LocationSelection />
-	  </Popup>
+	  </Popup> -->
 
 		<section 
 			id="screen" 

package/src/modules/organizations/components/pages/OrganizationBackoffice.vue

@@ -50,6 +50,21 @@
 		    </span>
 		  </MenuItem>
 
+		  <MenuItem 
+		  	v-if="hasAccess(route.params._id, 'products', 'read', auth.state.accesses)"
+		  	@click="router.push({
+		  		name: 'Categories', 
+		  		params: {
+		  			_id: route.params._id
+		  		}
+		  	})" 
+		  	class="cursor-pointer">
+		  	<IconProducts class="i-semi" :icon="true" :fill="'rgb(var(--white))'"/> 
+		    <span>
+		    	Categories
+		    </span>
+		  </MenuItem>
+
 		  <MenuItem 
 		  	v-if="hasAccess(route.params._id, 'leftovers', 'read', auth.state.accesses)"
 		  	@click="router.push({

package/src/modules/products/components/blocks/CardCategory.vue

@@ -1,6 +1,46 @@
 <template>
-  <div class="flex-v-center flex-column flex">
-    <h4 class="mn-r-auto">{{category.order}} / {{category.name}}</h4>
+  <div class="flex-v-center bg-light pd-small radius-small flex-column flex">
+    <div class="w-100 flex-nowrap gap-thin flex">
+      <h4 class="my-handle mn-r-auto">{{category.name}}</h4>
+
+      <router-link
+       :to="{
+          name: 'Category Edit', 
+          params: { 
+            _id: route.params._id,
+            category: category.url
+          } 
+        }"
+        class="
+          i-semi
+          z-index-2
+          cursor-pointer 
+          card-page-actions
+          radius-extra pd-micro bg-second
+        "
+      >
+        <IconEdit
+          class="w-100 h-100" 
+          classes="fill-white"
+        />
+      </router-link>
+
+      <button
+        @click="deleteCategory(category)"
+        class="
+          i-semi
+          z-index-2
+          cursor-pointer 
+          card-page-actions
+          radius-extra pd-micro bg-second
+        "
+      >
+        <IconAdd
+          class="w-100 h-100"
+          :fill="'white'"
+        />
+      </button>
+    </div>
 
     <!-- <p v-if=" category.children.length > 0" class="w-100">Subcategories:</p> -->
    <!--  <CardCategory
@@ -10,25 +50,6 @@
       class="pd-l-small bg-white w-100"
     /> -->
 
-    <router-link 
-    	:to="{
-				name: 'Category Edit', 
-				params: { 
-					_id: route.params._id,
-					category: category.url
-				} 
-			}"
-    	class="mn-r-medium nav-link"
-    >
-    	Edit
-   	</router-link>
-
-    <a 
-    	class="nav-link" 
-    	@click="deleteCategory(category)"
-    >
-  		Delete
-  	</a>
    </div>
 </template>
 
@@ -39,6 +60,9 @@ import { useRoute, useRouter } from 'vue-router';
 
 import CardCategory from './CardCategory.vue'
 
+import IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'
+import IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue'
+
 const props = defineProps({
   category: Object,
 });
@@ -55,10 +79,17 @@ const deleteCategory = (category) => {
 </script>
 
 
-<style lang="scss">
-.categories-card {
 
+<style lang="scss">
+.card-title {
+  .card-page-actions {
+    display: none;
+  }
+
+  &:hover {
+    .card-page-actions {
+      display: block;
+    }
+  }
 }
 </style>
-
-

package/src/modules/products/components/blocks/CardProduct.vue

@@ -69,9 +69,9 @@
 				{{product.information[0].value}}
 			</p>
 			<!-- Name -->
-			<p class="mn-b-thin t-medium h4">
-				{{product.name.substring(0,16)}}...
-			</p>
+			<span style=" hyphens: auto;" class="word-break mn-b-thin w-100 w-max-100 t-regular h5">
+				{{product.name.substring(0,32)}}...
+			</span>
 
 			<p 
 				v-if="product.description && !product.localization && product.listing !== 'rent'" 
@@ -87,18 +87,12 @@
 			
 			<div class="flex-v-center flex-nowrap flex">
 				<Price 
-					v-if="product.listing !== 'rent'"
 					:product="product" 
 					size="small" 
 					class="mn-r-auto" 
 				/>
 
-				<div
-						v-if="product.listing === 'rent'"
-						class="mn-r-auto"
-				>
-					<span class="t-second h5 "> {{product.price+product.price_currency }}</span> <span class="p-small t-transp">/ per day </span>
-				</div>
+			
 
 				<button
 					v-if="user && product.listing === 'rent'"
@@ -154,7 +148,19 @@
 </script>
 
 <style lang="scss">
-
+.word-break {
+  width: 100%; 
+  overflow: auto;
+  overflow-wrap: break-word;
+  word-break: break-all;
+  white-space: -moz-pre-wrap;
+  white-space: -hp-pre-wrap;
+  white-space: -o-pre-wrap;
+  white-space: -pre-wrap; 
+  white-space: pre-wrap; 
+  white-space: pre-line; 
+  word-wrap: break-word;
+}
 </style>
 
 

package/src/modules/products/components/elements/Price.vue

@@ -1,5 +1,6 @@
 <template>
 	<div 
+      v-if="product.listing !== 'rent'"
     class="price-tag radius-small"
     :class="
       { 
@@ -21,6 +22,13 @@
     </p>
     <p v-if="product.sale"  class="pd-r-small t-transp t-transp p-medium line-through price">{{(product.price / 100) * (100 + product.sale) }} {{product.price_currency}} </p>
   </div>
+
+  <div
+    v-else
+    class="mn-r-auto"
+  >
+    <span class="t-second h5 "> {{product.price+product.price_currency }}</span> <span class="p-small t-transp">/ per day </span>
+  </div>
 </template>
 
 <script setup="props">

package/src/modules/products/components/pages/Catalog.vue

@@ -2,7 +2,9 @@
 	<Feed
 		v-model:sort="marketplace.state.sort"
 		v-model:filter="marketplace.state.filter"
-    :search="true"
+    :search="{
+    	autofocus:true
+    }"
     :showLoadMore="false"
     :states="{
       empty: {

package/src/modules/products/components/pages/CategoryEdit.vue

@@ -91,7 +91,7 @@
       
     </Block>
     <!-- Subcategories -->
-    <Block
+    <!-- <Block
       title="Subcategories"
       placeholder="No subcategories added yet"
       :actions="[{
@@ -100,36 +100,6 @@
       }]"
       class="mn-b-thin"
     >
-
-      {{categories.state.current.children}}
-      <Feed
-        :states="{
-          empty: {
-            title: 'No Events Found',
-            description: 'Currently, there are no events available.'
-          }
-        }"
-        :store="{
-          read: (options) => categories.actions.read(options),
-          state: categories.state
-        }"
-        :options="{
-            user: auth.state.user._id,
-            limit: 10
-        }"
-        v-slot="{ 
-          items 
-        }"
-      >
-        <div 
-          v-for="(category,index) in items"
-          @click="() => { categories.state.current.children.push(category._id) }"
-          class="bg-white pd-medium radius-small mn-b-medium"
-        >
-          {{category.name}}
-        </div>
-        
-      </Feed>
    
       <div 
         class="gap-thin mn-b-thin flex-nowrap flex" 
@@ -155,7 +125,7 @@
           />
         </div>
       </div> 
-    </Block>
+    </Block> -->
      <!-- Filters -->
     <Block
       title="Filters"

package/src/modules/products/components/pages/Product.vue

@@ -1,15 +1,12 @@
 <template>
-	<div class="flex flex-column w-100 o-hidden gap-thin pd-thin">
+	<div class="h-100 w-100 bg-white ">
 		<!-- <Breadcrumbs class="bg-light radius-big pd-small"/> -->
-		<!-- {{product.quantity}}
-		<div v-if="product.ingredients">
-			{{product?.ingredients[0]?._id}}
-			{{product?.ingredients[0]?.quantity}}
-			{{product?.ingredients[1]?.quantity}}
-		</div> -->
 		<SectionProduct v-if="product" :product="product" :user="auth.state.user" class="pos-relative"/>
 
-		<PopularProducts />
+		<div class="h-max pos-relative">
+		  <h3 class="pd-medium pd-b-small">Most Popular</h3>
+			<PopularProducts />
+		</div>
 	</div>
 </template>
 
@@ -40,12 +37,6 @@
 
 	const text = {
 		messages: {
-			en: {
-
-			},
-			ru: {
-
-			}
 		}
 	};
 
@@ -62,11 +53,4 @@
 </script>
 
 <style lang="scss">
-.h1-product  {
-	font-size: 3rem;
-}
-.produc-data { 
-	padding-top: 2rem;
-	padding-bottom: 0;
-}
 </style>

package/src/modules/products/components/pages/Products.vue

@@ -78,26 +78,23 @@
         v-slot="{ 
           items 
         }"
-        class=" pd-t-zero pd-thin gap-thin"
+        class="cols-4 rows-1 pd-t-zero pd-thin gap-thin"
        
       >
-        <div class="gap-thin cols-4" style="
-          display:grid;
-          grid-auto-rows: 1fr;
-        ">
         <router-link  
           v-for="product in items" 
-          :to="route.params._id ? { name: 'Organization_Product', params: { _id: route.params._id, product: product._id  } } : { name: 'Product', params: { product: product._id  } }">
+          :to="route.params._id ? { name: 'Organization_Product', params: { _id: route.params._id, product: product._id  } } : { name: 'Product', params: { product: product._id  } }"
+           class="pos-relative h-100 w-100"
+          >
           <CardProduct
             :key="product._id"
             :product="product"
             :user="auth.state.access"
             :organization="route.params._id"
             :access="hasAccess(route.params._id, 'products', 'edit', auth.state.accesses)"
-            class="h-100 bg-light"
+            class="pos-relative  h-100 w-100 bg-light"
           />
         </router-link>
-        </div>
       </Feed>
 
     </div>

package/src/modules/products/components/sections/CategoriesTree.vue

@@ -3,22 +3,20 @@
     v-bind="dragOptions" 
     class="dragArea list-group w-full"
     :list="items"
+    :handle="'.my-handle'"
     @change="handleChange"
   >
-    <div v-for="category in items" :key="category._id" class="pd-medium bg-light radius-medium mn-b-thin">
+    <div v-for="category in items" :key="category._id" class="mn-t-thin  radius-medium mn-b-thin">
       <CardCategory 
         :category="category" 
         @delete="deleteCategory" 
       />
-      <div
-      >
-      <!-- Subcategories: -->
       <CategoryList 
         :items="category.children"
         :state="items"
         @update="emitChange"
+        class="pd-l-medium"
       />
-      </div>
     </div>
   </VueDraggableNext>
 </template>

package/src/modules/products/components/sections/PopularProducts.vue

@@ -21,7 +21,7 @@
 		          } 
 		        })" 
 						:product="value"
-						class="cursor-pointer transition-ease-in hover-scale-0 h-100 w-100" 
+						class="cursor-pointer bg-light transition-ease-in hover-scale-0 h-100 w-100" 
 					/>
 				</transition>
 	    </div>

package/src/modules/products/components/sections/SectionProduct.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="cols-2-1_2 w-100 gap-thin">
+	<div class="cols-2-1_2 pd-small w-100 gap-thin">
 		
 		<div class="pd-small bg-light radius-big flex-nowrap flex-column flex pos-relative">
 			<div class="w-100 bg-light radius-semi o-hidden">
@@ -33,7 +33,7 @@
 			/>
 		</div>
 
-		<div class="pd-big bg-light radius-big pos-relative w-100 h-100 flex-column flex-justify flex col">
+		<div class="radius-big pos-relative w-100 h-100 flex-column flex-justify flex col">
 
 		<!-- <IconEdit
 			@click="$router.push({
@@ -48,9 +48,9 @@
 
 			<h2 v-if="recommendation" class="t-main t-semi p-big">{{t('airecommend')}}</h2>
 			<!-- Name -->
-			<h1 class="w-100 h1-product mn-b-thin">{{ product.name }}</h1>
+			<h1 class="w-100 h1-product mn-b-small">{{ product.name }}</h1>
 			<!-- Price -->
-			<Price :product="product" size="big" class="mn-b-semi" />
+			<Price v-if="product.listing !== 'rent'" :product="product" size="big" class="mn-b-semi" />
 			<!-- Modifications -->
 			<!-- <div v-if="product.modifications.length > 0" class="flex-nojustify  flex">
 				<SelectElement v-if="sizes2.length > 0" :elements="sizes2" :selected="product.selectedSize" class="mn-r-medium" />
@@ -60,30 +60,47 @@
 				{{ recommendation }}
 			</h3>
 
+			<Tab 
+				v-model:selected="tabProduct"
+				:tabs="[
+					{name: 'Description', value: 'description'},
+					{name: 'Specifications', value: 'specifications'}
+				]"
+				tabClass="pd-small pd-r-medium pd-l-medium w-100 pd-small radius-small"
+				class="bg-light mn-b-small"
+			/>
 
-			<p v-if="product.description && !product.localization < 1 && !recommendation" class="w-100 mn-b-medium t-transp">
-				{{ product.description }}
-			</p>
-
-			<p v-if="product.localization && product.localization.length > 1 && !recommendation" class="w-100  mn-b-medium t-transp">
-				{{ t('description') }}
-			</p>
-
-			<div 
-				class="cols-2 w-100 gap-small mn-b-semi"
-			>
-				<div 
-					v-if="product.information.length > 0" 
-					v-for="information in product.information" 
-					class="w-100 pd-small radius-small bg-grey-transp-10 product-information"
-				>
-					<p class="t-demi">{{ information.name }}</p>
-					<p>{{ information.value }}</p>
-				</div>
+			<div class="h-min-5r pos-relative">
+				<transition name="slide-fade">
+
+					<div v-if="tabProduct === 'description'"  class="pd-medium radius-medium bg-light ">
+						<p v-if="product.description && !product.localization < 1 && !recommendation" class="w-100 t-transp">
+							{{ product.description }}
+						</p>
+
+						<p v-if="product.localization && product.localization.length > 1 && !recommendation" class="w-100 t-transp">
+							{{ t('description') }}
+						</p>
+					</div>
+
+					<div 
+						v-else
+						class="cols-2 w-100 bg-light radius-medium pd-medium gap-small"
+					>
+						<div 
+							v-if="product.information.length > 0" 
+							v-for="information in product.information" 
+							class="w-100 pd-small radius-small bg-white product-information"
+						>
+							<p class="t-demi">{{ information.name }}</p>
+							<p>{{ information.value }}</p>
+						</div>
+					</div>
+				</transition>
 			</div>
 
 			<!-- Actions -->
-			<div class="max-w-33rem mobile-w-100 t-white gap-small cols-2">
+			<div v-if="product.listing !== 'rent'" class="max-w-33rem mobile-w-100 t-white gap-small cols-2">
 				<Button
 					v-if="product.quantity > 0"
 					:submit="a => addToCart(product)" 
@@ -105,7 +122,8 @@
 </template>
 
 <script setup>
-import Button 				from '@pf/src/components/Button/Button.vue'
+import Button from '@pf/src/components/Button/Button.vue'
+import Tab from '@pf/src/components/Tab/Tab.vue'
 import IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'
 import PlaceholderImage from '@pf/src/modules/icons/placeholders/PlaceholderImage.vue'
 
@@ -116,7 +134,7 @@ import THC from '@pf/src/modules/products/components/elements/THC.vue'
 import Price from '@pf/src/modules/products/components/elements/Price.vue'
 // import SelectElement 	from '@/components/elements/SelectElement.vue'
 
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n }    from 'vue-i18n'
 
 import * as shopcart from '@pf/src/modules/orders/store/shopcart';
@@ -140,6 +158,10 @@ const images = computed(() => {
   return props.product.images
 })
 
+
+const tabProduct = ref('description')
+
+
 const text = {
 	messages: {
 	  en: {