@ozdao/martyrs 0.2.591 → 0.2.592

package/src/modules/core/views/components/icons/IconMenu.vue

@@ -0,0 +1,82 @@
+<script setup>
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: String,
+    default: 'light',
+  },
+});
+
+const emit = defineEmits(['click']);
+</script>
+
+<template>
+  <button
+    class="cursor-pointer mobile-only icon-menu"
+    aria-label="menu"
+    :class="{ 'icon-menu_active': active }"
+    @click="emit('click')"
+  >
+    <span
+      class="no-events"
+      :class="{
+        'bg-black': theme === 'light',
+        'bg-white': theme === 'dark',
+      }"
+    >
+      <span class="icon-menu__before" :class="{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }"></span>
+      <span class="icon-menu__after" :class="{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }"></span>
+    </span>
+  </button>
+</template>
+
+<style lang="scss">
+.icon-menu {
+  display: block;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  position: relative;
+}
+
+.icon-menu span,
+.icon-menu__before,
+.icon-menu__after {
+  position: absolute;
+  top: 50%;
+  margin-top: -1px;
+  left: 50%;
+  margin-left: -10px;
+  width: 20px;
+  height: 2px;
+}
+
+.icon-menu__before,
+.icon-menu__after {
+  display: block;
+  transition: 0.2s;
+}
+
+.icon-menu__before {
+  transform: translateY(-5px);
+}
+
+.icon-menu__after {
+  transform: translateY(5px);
+}
+
+.icon-menu_active .icon-menu__before {
+  transform: rotate(-35deg);
+  width: 10px;
+  transform-origin: left bottom;
+}
+
+.icon-menu_active .icon-menu__after {
+  transform: rotate(35deg);
+  width: 10px;
+  transform-origin: left top;
+}
+</style>

package/src/modules/core/views/components/partials/Header.vue

@@ -1,318 +1,180 @@
 <script setup="props">
-	import { computed, onMounted, toRefs, ref, inject } from 'vue'
-
-	import { useRouter,useRoute } from 'vue-router'
-	import { useI18n } from 'vue-i18n'
-
-	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
-	import * as shopcart from '@martyrs/src/modules/orders/store/shopcart.js'
-	import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
-
-	const store = useStore()
-	
-	// Globasls Component
-
-	import NotificationBadge from '@martyrs/src/modules/notifications/components/elements/NotificationBadge.vue';
-	// import Navigation from '@martyrs/src/modules/core/views/components/partials/Navigation.vue'
-	// Martyrs Component
-	import Button from '@martyrs/src/components/Button/Button.vue'
-	import Select from '@martyrs/src/components/Select/Select.vue'
-	import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
-	// Icons module
-	import IconShopcart from '@martyrs/src/modules/icons/entities/IconShopcart.vue'
-	import IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue'
-	import IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';
-	// Props
-	const props = defineProps({
-    theme: {
-    	type: String,
-	    default: "light"
-    },
-    logotype: {
-	    type: Object
-	  },
-	  location: {
-	    type: Boolean,
-		  default: true
-	  },
-	  theme_switcher: {
-	    type: Boolean,
-		  default: true
-	  },
-	  headerClass: {
-	    type: [String, Array, Object],
-	    default: null
-	  },
-  });
-	// Accessing state
-	const router = useRouter()
-	const route = useRoute()
-	// Localization
-	const { t } = useI18n()
-	// const search = computed(() => store.products.state.search)
-
-	function openLocationPopup() {
-	  store.core.state.isOpenLocationPopup = true;
-	}
-	/////////////////////////////
-	// MOUNTED
-	/////////////////////////////
-	onMounted(() => {
-    shopcart.actions.setShopcart()
-  });
+import { computed, onMounted, ref } from 'vue';
+
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';
+
+import * as shopcart from '@martyrs/src/modules/orders/store/shopcart.js';
+import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
+
+import NotificationBadge from '@martyrs/src/modules/notifications/components/elements/NotificationBadge.vue';
+// Martyrs Component
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Select from '@martyrs/src/components/Select/Select.vue';
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';
+// Icons module
+import IconShopcart from '@martyrs/src/modules/icons/entities/IconShopcart.vue';
+import IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';
+import IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';
+import IconMenu from '@martyrs/src/modules/core/views/components/icons/IconMenu.vue';
+// Props
+const props = defineProps({
+  theme: {
+    type: String,
+    default: 'light',
+  },
+  logotype: {
+    type: Object,
+  },
+  location: {
+    type: Boolean,
+    default: true,
+  },
+  theme_switcher: {
+    type: Boolean,
+    default: true,
+  },
+  headerClass: {
+    type: [String, Array, Object],
+    default: null,
+  },
+});
+const router = useRouter();
+const route = useRoute();
+const store = useStore();
+const i18n = useI18n();
+
+const { t, locale, availableLocales } = i18n;
+
+const localeOptions = computed(() => {
+  const names = i18n.localeNames || {};
+
+  return availableLocales.map(code => ({
+    code,
+    name: names[code] || code.toUpperCase(),
+  }));
+});
+// const search = computed(() => store.products.state.search)
+
+function openLocationPopup() {
+  store.core.state.isOpenLocationPopup = true;
+}
+/////////////////////////////
+// MOUNTED
+/////////////////////////////
+onMounted(() => {
+  shopcart.actions.setShopcart();
+});
 </script>
 
 <template>
-	<header
-		id="header"
-		class="
-			pd-thin
-			gap-micro
-			flex-justify-between
-			flex-nowrap
-			flex
-			h-4r
-			w-100
-			z-index-2
-		"
-		:class="[
-			headerClass ?? {
-				'pos-relative pos-t-0 br-b-1px t-black br-light': theme === 'light',
-				'pos-relative pos-t-0 br-b-1px t-white br-dark': theme === 'dark'
-			}
-		]"
-	>
-	<div class="flex-nowrap flex-v-center flex-justify-start flex gap-micro ">
-		<!-- MENU -->
-		<button
-			aria-label="menu"
-			@click="() => store.core.state.isOpenSidebar = !store.core.state.isOpenSidebar"
-			class="cursor-pointer mobile-only menu-btn"
-			:class="{
-				'menu-btn_active': store.core.state.isOpenSidebar
-			}"
-		>
-	    <span
-	    	class="no-events"
-		    :class="{
-		      'bg-black': theme === 'light',
-		      'bg-white': theme === 'dark'
-		    }"
-		  >
-		    <span class="menu-btn__before" :class="{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }"></span>
-		    <span class="menu-btn__after" :class="{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }"></span>
-		  </span>
-	  </button>
-
-		<!-- LOGO -->
-		<component
-			v-if="logotype"
-		  :is="logotype"
-		  @click="router.push({ path: '/' })" 
-		  :theme="theme"
-		  class="cursor-pointer h-2r"
-		/>
-
-		<button
-			v-if="location"
-			aria-label="button_location"
-    	class="
-    		cursor-pointer
-    		bg-transparent 
-    		pd-micro
-    		radius-extra 
-    		uppercase 
-    		fw-semi
-    		
-    		br-2px 
-    		ease-linear
-    		ws-nowrap
-    	
-    	"
-    	:class="{
-    		'fill-black br-black t-black hover:bg-black hover:t-white hover:fill-white': theme === 'light',
-    		'fill-white br-white t-white hover:bg-white hover:t-black hover:fill-black': theme === 'dark'  
-    	}"
-    	@click="openLocationPopup()"
-    >
-    	<svg class="i-small" :fill="'inherit'" xmlns="http://www.w3.org/2000/svg" width="50" height="67" viewBox="0 0 50 67" fill="none">
-			  <path d="M25 0C11.207 0 0 11.207 0 25C0 38.793 20.832 66.668 25 66.668C29.168 66.668 50 38.793 50 25C50 11.207 38.793 0 25 0ZM25 33.332C20.418 33.332 16.668 29.582 16.668 25C16.668 20.418 20.418 16.668 25 16.668C29.582 16.668 33.332 20.418 33.332 25C33.332 29.582 29.582 33.332 25 33.332Z" :fill="'inherit'"/>
-			</svg>
-    	 {{store.core.state.position?.country ? store.core.state.position.country : 'World'}}
-    </button>
-  </div>
-
- 	<slot></slot>
-
-	<div class="flex-justify-end flex-v-center flex-nowrap flex gap-micro">
-		<Button 
-			v-if="router.hasRoute('Search') && route.meta.header_search"
-			aria-label="search"
-			class="pd-zero bg-transparent"
-			:class="route.meta.header_search_class"
-			:submit="() => router.push({name: 'Search'})"
-			:showSucces="false"
-			:showLoader="false"
-		>
-			<IconSearch 
-				class="i-medium"
-				:fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" 
-			/>
-		</Button>
-	
-		<Button
-			aria-label="shopcart"
-			:submit="a => shopcart.actions.toggleShopcart()" 
-			:counter="shopcart.getters.cartTotalAmount" 
-			:showSucces="false"
-			:showLoader="false"
-			class="pd-zero mn-r-micro"
-			> 
-			<IconShopcart 
-				class="i-medium"
-				:fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" 
-			/>
-			<!-- <div class="w-max p-small pos-absolute pos-t-100 pos-r-0">Product Added to Shopcart</div> -->
-		</Button>
-
-
-		<NotificationBadge
-			v-if="auth.state.user._id"
-			:fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" 
-		/>
-
-		<Button 
-			aria-label="profile"
-			class="pd-zero bg-transparent"
-			:submit="
-				auth.state.access.status === false 
-				? 
-				a => router.push({name: 'Sign In'}) 
-				: 
-				a => router.push({ name: 'User Profile', params: { _id: auth.state.user._id }})
-			"
-			:showSucces="false"
-			:showLoader="false"
-		>
-			<IconProfile 
-				class="i-medium"
-				:fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" 
-			/>
-		</Button>
-
-		<Select 
-			v-if="$i18n.availableLocales.length > 1"
-			v-model:select="$i18n.locale"
-		  :options="$i18n.availableLocales"
-		  :property="'value'"
-      class="pos-relative flex flex-column gap-small uppercase pd-thin fw-semi radius-thin"
-      :class="{
-    		'bg-light t-black': theme === 'light',
-    		'bg-dark t-white': theme === 'dark'  
-    	}"
-    />
-  </div>
-</header>
-  
+  <header
+    class="pd-thin gap-micro flex-justify-between flex-nowrap flex h-4r w-100 z-index-2"
+    id="header"
+    :class="[
+      headerClass ?? {
+        'pos-relative pos-t-0 br-b-1px t-black br-light': theme === 'light',
+        'pos-relative pos-t-0 br-b-1px t-white br-dark': theme === 'dark',
+      },
+    ]"
+  >
+    <div class="flex-nowrap flex-v-center flex-justify-start flex gap-micro">
+      <IconMenu
+        :active="store.core.state.isOpenSidebar"
+        :theme="theme"
+        @click="store.core.state.isOpenSidebar = !store.core.state.isOpenSidebar"
+      />
+
+      <!-- LOGO -->
+      <component class="cursor-pointer h-2r" v-if="logotype" :is="logotype" @click="router.push({ path: '/' })" :theme="theme" />
+
+      <button
+        class="cursor-pointer bg-transparent pd-micro radius-extra uppercase fw-semi br-2px ease-linear ws-nowrap"
+        v-if="location"
+        aria-label="button_location"
+        :class="{
+          'fill-black br-black t-black hover:bg-black hover:t-white hover:fill-white': theme === 'light',
+          'fill-white br-white t-white hover:bg-white hover:t-black hover:fill-black': theme === 'dark',
+        }"
+        @click="openLocationPopup()"
+      >
+        <svg class="i-small" :fill="'inherit'" xmlns="http://www.w3.org/2000/svg" width="50" height="67" viewBox="0 0 50 67" fill="none">
+          <path
+            d="M25 0C11.207 0 0 11.207 0 25C0 38.793 20.832 66.668 25 66.668C29.168 66.668 50 38.793 50 25C50 11.207 38.793 0 25 0ZM25 33.332C20.418 33.332 16.668 29.582 16.668 25C16.668 20.418 20.418 16.668 25 16.668C29.582 16.668 33.332 20.418 33.332 25C33.332 29.582 29.582 33.332 25 33.332Z"
+            :fill="'inherit'"
+          />
+        </svg>
+        {{ store.core.state.position?.country ? store.core.state.position.country : 'World' }}
+      </button>
+    </div>
+
+    <slot></slot>
+
+    <div class="flex-justify-end flex-v-center flex-nowrap flex gap-micro">
+      <Button
+        class="pd-zero bg-transparent"
+        v-if="router.hasRoute('Search') && route.meta.header_search"
+        aria-label="search"
+        :class="route.meta.header_search_class"
+        :submit="() => router.push({ name: 'Search' })"
+        :showSucces="false"
+        :showLoader="false"
+      >
+        <IconSearch class="i-medium" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
+      </Button>
+
+      <Button class="pd-zero mn-r-micro" aria-label="shopcart" :submit="a => shopcart.actions.toggleShopcart()" :counter="shopcart.getters.cartTotalAmount" :showSucces="false" :showLoader="false">
+        <IconShopcart class="i-medium" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
+        <!-- <div class="w-max p-small pos-absolute pos-t-100 pos-r-0">Product Added to Shopcart</div> -->
+      </Button>
+
+      <NotificationBadge v-if="auth.state.user._id" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
+
+      <Button
+        class="pd-zero bg-transparent"
+        aria-label="profile"
+        :submit="auth.state.access.status === false ? a => router.push({ name: 'Sign In' }) : a => router.push({ name: 'User Profile', params: { _id: auth.state.user._id } })"
+        :showSucces="false"
+        :showLoader="false"
+      >
+        <IconProfile class="i-medium" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
+      </Button>
+
+      <Select
+        class="pos-relative flex flex-column gap-small ws-nowrap pd-thin fw-semi radius-thin"
+        v-if="localeOptions.length > 1"
+        v-model:select="locale"
+        :options="localeOptions"
+        :property="'code'"
+        :value="'name'"
+        :class="{
+          'bg-light t-black': theme === 'light',
+          'bg-dark t-white': theme === 'dark',
+        }"
+      />
+    </div>
+  </header>
 </template>
 
 <style lang="scss">
 #header {
-	transition:
-		transform 0.3s cubic-bezier(0.08, 0.75, 0.77, 1.03),
-		margin-top 0.3s cubic-bezier(0.08, 0.75, 0.77, 1.03),
-		background 0.3s ease,
-		border-color 0.3s ease,
-		backdrop-filter 0.3s ease;
+  transition:
+    transform 0.3s cubic-bezier(0.08, 0.75, 0.77, 1.03),
+    margin-top 0.3s cubic-bezier(0.08, 0.75, 0.77, 1.03),
+    background 0.3s ease,
+    border-color 0.3s ease,
+    backdrop-filter 0.3s ease;
 
-	&.header--hidden {
-		transform: translateY(-100%);
-		margin-top: -4rem;
-	}
+  &.header--hidden {
+    transform: translateY(-100%);
+    margin-top: -4rem;
+  }
 }
 
 .location-button {
-	&:hover {
-		box-shadow: inset 0 0 0 2px rgb(var(--main));
-	}
-}
-
-.menu-btn {
-  display: block;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  position: relative;
-}
-.menu-btn span,
-.menu-btn__before,
-.menu-btn__after {
-  position: absolute;
-  top: 50%;
-  margin-top: -1px;
-  left: 50%;
-  margin-left: -10px;
-  width: 20px;
-  height: 2px;
+  &:hover {
+    box-shadow: inset 0 0 0 2px rgb(var(--main));
+  }
 }
-.menu-btn__before,
-.menu-btn__after {
-  display: block;
-  transition: 0.2s;
-}
-.menu-btn__before {
-  transform: translateY(-5px);
-}
-.menu-btn__after {
-  transform: translateY(5px);
-}
-.menu-btn_active .menu-btn__before {
-  transform: rotate(-35deg);
-  width: 10px;
-  transform-origin: left bottom;
-}
-.menu-btn_active .menu-btn__after {
-  transform: rotate(35deg);
-  width: 10px;
-  transform-origin: left top;
-}
-
-.menu-btn_active span:before {
-  transform: rotate(-35deg);
-  width: 10px;
-  transform-origin: left bottom;
-}
-.menu-btn_active span:after {
-  transform: rotate(35deg);
-  width: 10px;
-  transform-origin: left top;
-}
-
-.menu-block {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.menu-nav {
-  background-color: #fff;
-  height: 50px;
-  
-}
-.menu-nav__link {
-  display: inline-block;
-  text-decoration: none;
-  color: #fff;
-  margin-right: 20px;
-}
-.menu-nav__link {
-  transition: 0.5s;
-  transform-origin: right center;
-  transform: translateX(50%);
-  opacity: 0;
-}
-.menu-nav__link_active {
-  transform: translateX(0%);
-  opacity: 1;
-}
-
-</style>
+</style>

package/dist/martyrs/src/components/EditImages/EditImages.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditImages.vue2.js","sources":["../../../../../src/components/EditImages/EditImages.vue"],"sourcesContent":["<template>\n\t<div class=\"flex-nowrap flex gap-small\">\n    <VueDraggableNext v-if=\"localImages.length > 0\"  class=\"gap-small flex dragArea list-group w-full\" v-model=\"localImages\" @change=\"emitChanges\">\n\t\t\t<div v-for=\"(image, index) in localImages\" class=\"pos-relative\">\n\t\t\t\t<img loading=\"lazy\" class=\"i-extra object-fit-contain bg-black-transp-5 pd-nano radius-small o-hidden\" :src=\"(FILE_SERVER_URL || '') + image\" />\n\t\t\t\t\n        <IconCross  \n          @click=\"deleteImage(index)\" \n          class=\"cursor-pointer pos-absolute t-center flex-center flex radius-extra i-medium bg-red  pos-t-10-negative pos-r-10-negative pd-micro\"\n        />\n\t\t\t</div>\n\t\t</VueDraggableNext>\n    <div\n      v-if=\"localImages.length > 0\" \n      class=\"i-extra uppercase flex-center flex radius-small o-hidden br-main br-2px pd-small\"\n      >\n       <UploadImageMultiple   \n        @update:images=\"onImagesUpdate\"\n        text=\"Add\"\n        :options=\"{\n          showText: false\n        }\"\n        :uploadPath=\"'photos'\"\n        class=\"radius-big\"\n      />\n    </div>\n\n\n\t\t<UploadImageMultiple \t\n      v-if=\"localImages.length < 1\" \n      @update:images=\"onImagesUpdate\"\n      :uploadPath=\"props.uploadPath\"\n      :text=\"props.text\"\n      :options=\"props.options\"\n      class=\"w-100 pd-medium\"\n    />\n\t</div>\t\n</template>\n\n<script setup>\nimport { ref, defineProps, watchEffect } from 'vue';\nimport { VueDraggableNext } from 'vue-draggable-next'\nimport UploadImageMultiple from \"@martyrs/src/components/UploadImageMultiple/UploadImageMultiple.vue\";\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nconst props = defineProps({\n  images: Array,\n  text: Object,\n  options: Object,\n  uploadPath: {\n    type: Object,\n    default: 'unsorted'\n  }\n});\n\nconst emit = defineEmits(['update:images'])\n\nconst localImages = ref([...props.images])\n\nwatchEffect(() => {\n  localImages.value = [...props.images]; // Обновление localImages при изменении props.images\n});\n\nconst emitChanges = () => {\n  emit('update:images', localImages.value)\n}\n\nconst onImagesUpdate = (newImages) => {\n  localImages.value = [...localImages.value, ...newImages]\n  emitChanges()\n}\n\nconst deleteImage = (index) => {\n  localImages.value.splice(index, 1)\n  emitChanges()\n}\n</script>\n\n<style lang=\"scss\">\n// Your styles here\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,UAAM,QAAQ;AAUd,UAAM,OAAO;AAEb,UAAM,cAAc,IAAI,CAAC,GAAG,MAAM,MAAM,CAAC;AAEzC,gBAAY,MAAM;AAChB,kBAAY,QAAQ,CAAC,GAAG,MAAM,MAAM;AAAA,IACtC,CAAC;AAED,UAAM,cAAc,MAAM;AACxB,WAAK,iBAAiB,YAAY,KAAK;AAAA,IACzC;AAEA,UAAM,iBAAiB,CAAC,cAAc;AACpC,kBAAY,QAAQ,CAAC,GAAG,YAAY,OAAO,GAAG,SAAS;AACvD,kBAAW;AAAA,IACb;AAEA,UAAM,cAAc,CAAC,UAAU;AAC7B,kBAAY,MAAM,OAAO,OAAO,CAAC;AACjC,kBAAW;AAAA,IACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}