@ozdao/martyrs 0.2.548 → 0.2.550

package/src/components/Calendar/Calendar.vue

@@ -5,10 +5,18 @@
     modelValue: [Date, Object],
     allowRange: Boolean,
     disabled: Boolean,
+    enableTime: {
+      type: Boolean,
+      default: false
+    },
     disablePastDates: {
       type: Boolean,
       default: false
     },
+    disabledRanges: {
+      type: Array,
+      default: () => []
+    },
     availabilityData: {
       type: Array,
       default: () => []
@@ -24,10 +32,18 @@
     requiredQuantity: {
       type: Number,
       default: 1
+    },
+    locale: {
+      type: String,
+      default: 'en'
+    },
+    showSelected: {
+      type: Boolean,
+      default: false
     }
   })
 
-  const emit = defineEmits(['update:modelValue'])
+  const emit = defineEmits(['update:modelValue', 'select', 'cancel'])
 
   const dateCalendar = defineModel('date')
 
@@ -59,7 +75,7 @@
   }
 
   const monthYear = computed(() => {
-    const month = currentDate.value.toLocaleString('default', { month: 'long', timeZone: 'UTC' })
+    const month = currentDate.value.toLocaleString(props.locale, { month: 'long', timeZone: 'UTC' })
     const year = currentDate.value.getUTCFullYear()
     return `${month} ${year}`
   })
@@ -143,15 +159,38 @@
 
   const isPastDate = (date) => {
     if (!props.disablePastDates) return false;
-    
+
     const now = new Date();
     // Compare only dates without time
     const todayDate = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
     const compareDate = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
-    
+
     return compareDate < todayDate;
   }
 
+  const isDateTimeInDisabledRange = (date) => {
+    if (!props.disabledRanges || props.disabledRanges.length === 0) return false;
+
+    const checkDate = new Date(date);
+
+    for (const range of props.disabledRanges) {
+      if (!range.start || !range.end) continue;
+
+      const rangeStart = new Date(range.start);
+      const rangeEnd = new Date(range.end);
+
+      if (checkDate >= rangeStart && checkDate <= rangeEnd) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  const isDisabledDate = (date) => {
+    return isDateTimeInDisabledRange(date);
+  }
+
   const getAvailabilityInfo = (date) => {
     if (!props.availabilityData || props.availabilityData.length === 0) return null;
     
@@ -202,8 +241,9 @@
   }
 
   const selectDate = (date, event) => {
-    // Don't allow selection of past dates or unavailable dates
+    // Don't allow selection of past dates, disabled dates or unavailable dates
     if (props.disablePastDates && isPastDate(date)) return;
+    if (isDisabledDate(date)) return;
     if (!isAvailable(date)) return;
     
     // Check if date has sufficient quantity for required amount
@@ -237,8 +277,18 @@
     }
     
     const formattedDate = toUTC(date)
-    
+
     if (!props.allowRange) {
+      // If same date is clicked and time is enabled, don't change anything
+      // This allows user to modify only time without reselecting date
+      if (props.enableTime && selectedDate.value) {
+        const existingDate = new Date(selectedDate.value);
+        if (existingDate.getFullYear() === date.getFullYear() &&
+            existingDate.getMonth() === date.getMonth() &&
+            existingDate.getDate() === date.getDate()) {
+          return;
+        }
+      }
       selectedDate.value = formattedDate
       dateCalendar.value = formattedDate
     } else if (!startDate.value && !endDate.value) {
@@ -373,6 +423,105 @@
     endDate.value = null;
     dateCalendar.value = { start: null, end: null };
   }
+
+  // Time selection computed properties
+  const displayHours = computed(() => {
+    if (!props.enableTime) return 0;
+    if (selectedDate.value) {
+      return selectedDate.value.getHours();
+    }
+    return new Date().getHours();
+  })
+
+  const displayMinutes = computed(() => {
+    if (!props.enableTime) return 0;
+    if (selectedDate.value) {
+      return selectedDate.value.getMinutes();
+    }
+    return new Date().getMinutes();
+  })
+
+  const minHours = computed(() => {
+    if (!props.disablePastDates) return 0;
+    if (selectedDate.value && isToday(selectedDate.value)) {
+      return new Date().getHours();
+    }
+    return 0;
+  })
+
+  const minMinutes = computed(() => {
+    if (!props.disablePastDates) return 0;
+    if (selectedDate.value && isToday(selectedDate.value)) {
+      const currentHour = new Date().getHours();
+      if (displayHours.value === currentHour) {
+        return new Date().getMinutes();
+      }
+    }
+    return 0;
+  })
+
+  const updateTime = (hours, minutes) => {
+    if (!props.enableTime || !selectedDate.value) return;
+
+    hours = parseInt(hours) || 0;
+    minutes = parseInt(minutes) || 0;
+
+    // Validate hours and minutes
+    if (hours < 0) hours = 0;
+    if (hours > 23) hours = 23;
+    if (minutes < 0) minutes = 0;
+    if (minutes > 59) minutes = 59;
+
+    // Check if time is in the past for today
+    if (props.disablePastDates && isToday(selectedDate.value)) {
+      const now = new Date();
+      const currentHour = now.getHours();
+      const currentMinute = now.getMinutes();
+
+      if (hours < currentHour || (hours === currentHour && minutes < currentMinute)) {
+        hours = currentHour;
+        minutes = currentMinute;
+      }
+    }
+
+    const newDate = new Date(selectedDate.value);
+    newDate.setHours(hours, minutes, 0, 0);
+
+    // Check if the new date+time falls into disabled range
+    if (isDateTimeInDisabledRange(newDate)) {
+      return;
+    }
+
+    selectedDate.value = newDate;
+    dateCalendar.value = newDate;
+  }
+
+  const formattedSelectedDate = computed(() => {
+    const date = selectedDate.value || (props.allowRange ? startDate.value : null);
+    if (!date) return '';
+
+    const d = new Date(date);
+    const day = String(d.getDate()).padStart(2, '0');
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const year = d.getFullYear();
+    let result = `${day}.${month}.${year}`;
+
+    if (props.enableTime) {
+      const hours = String(d.getHours()).padStart(2, '0');
+      const minutes = String(d.getMinutes()).padStart(2, '0');
+      result += ` ${hours}:${minutes}`;
+    }
+
+    return result;
+  })
+
+  const onCancel = () => {
+    emit('cancel');
+  }
+
+  const onSelect = () => {
+    emit('select');
+  }
 </script>
 
 
@@ -386,13 +535,13 @@
     </div>
     <div class="pd-thin flex flex-nowrap flex-v-center flex-justify-between">
       <button @click.stop="prevMonth" class="aspect-1x1 pd-thin bg-white radius-extra" :disabled="isPrevMonthDisabled">
-        <svg class="i-medium" xmlns="http://www.w3.org/2000/svg" width="12" height="20" viewBox="0 0 12 20" fill="none">
+        <svg class="i-regular" xmlns="http://www.w3.org/2000/svg" width="12" height="20" viewBox="0 0 12 20" fill="none">
           <path d="M0.610352 10.0068C0.615885 9.81315 0.654622 9.63607 0.726562 9.47559C0.798503 9.3151 0.90918 9.16016 1.05859 9.01074L9.37598 0.958984C9.61393 0.721029 9.90723 0.602051 10.2559 0.602051C10.4883 0.602051 10.6986 0.657389 10.8867 0.768066C11.0804 0.878743 11.2326 1.02816 11.3433 1.21631C11.4595 1.40446 11.5176 1.61475 11.5176 1.84717C11.5176 2.19027 11.3875 2.49186 11.1274 2.75195L3.60693 9.99854L11.1274 17.2534C11.3875 17.519 11.5176 17.8206 11.5176 18.1582C11.5176 18.3962 11.4595 18.6092 11.3433 18.7974C11.2326 18.9855 11.0804 19.1349 10.8867 19.2456C10.6986 19.3618 10.4883 19.4199 10.2559 19.4199C9.90723 19.4199 9.61393 19.2982 9.37598 19.0547L1.05859 11.0029C0.903646 10.8535 0.790202 10.6986 0.718262 10.5381C0.646322 10.3721 0.610352 10.195 0.610352 10.0068Z" :fill="isPrevMonthDisabled ? '#303030' : '#007AFF'"/>
         </svg>
       </button>
       <span class="t-semi">{{ monthYear }}</span>
       <button @click.stop="nextMonth" class="aspect-1x1 pd-thin bg-white radius-extra">
-        <svg class="i-medium " xmlns="http://www.w3.org/2000/svg" width="11" height="20" viewBox="0 0 11 20" fill="none">
+        <svg class="i-regular " xmlns="http://www.w3.org/2000/svg" width="11" height="20" viewBox="0 0 11 20" fill="none">
           <path d="M10.9072 10.0151C10.9017 10.2088 10.863 10.3859 10.791 10.5464C10.7191 10.7069 10.6084 10.8618 10.459 11.0112L2.1416 19.063C1.90365 19.3009 1.61035 19.4199 1.26172 19.4199C1.0293 19.4199 0.81901 19.3646 0.630859 19.2539C0.437175 19.1432 0.284994 18.9938 0.174316 18.8057C0.0581055 18.6175 8.85326e-08 18.4072 1.08852e-07 18.1748C1.38846e-07 17.8317 0.130046 17.5301 0.390137 17.27L7.91065 10.0234L0.390138 2.76855C0.130047 2.50293 1.5053e-06 2.20133 1.53481e-06 1.86377C1.55561e-06 1.62581 0.058107 1.41276 0.174318 1.22461C0.284995 1.03646 0.437176 0.887043 0.630861 0.776366C0.819012 0.660155 1.0293 0.60205 1.26172 0.60205C1.61035 0.60205 1.90365 0.723795 2.1416 0.967284L10.459 9.01904C10.6139 9.16846 10.7274 9.3234 10.7993 9.48389C10.8713 9.6499 10.9072 9.82699 10.9072 10.0151Z" :fill="isPrevMonthDisabled ? '#303030' : '#007AFF'"/>
         </svg>
       </button>
@@ -414,9 +563,9 @@
             { 'calendar__date--selected': isSelected(day.date) },
             { 'calendar__date--range': isInRange(day.date) },
             { 'calendar__date--in-other-month': !isSameMonth(day.date) },
-            { 'calendar__date--disabled': isPastDate(day.date) },
+            { 'calendar__date--disabled': isPastDate(day.date) || isDisabledDate(day.date) },
             { 'calendar__date--low-availability': isLowAvailability(day.date) },
-            { 'calendar__date--unavailable': !isAvailable(day.date) && !isPastDate(day.date) },
+            { 'calendar__date--unavailable': !isAvailable(day.date) && !isPastDate(day.date) && !isDisabledDate(day.date) },
           ]"
           @click.stop="selectDate(day.date, $event)"
         >
@@ -427,7 +576,37 @@
         </div>
       </div>
     </div>
-    
+
+    <!-- Time selection -->
+    <div v-if="enableTime" class="pd-thin br-t br-solid br-grey-transp-25 flex gap-thin">
+      <input
+        type="number"
+        :value="displayHours"
+        @input="updateTime($event.target.value, displayMinutes)"
+        :min="minHours"
+        max="23"
+        class="w-50 pd-small radius-small"
+        placeholder="HH"
+      />
+      <input
+        type="number"
+        :value="displayMinutes"
+        @input="updateTime(displayHours, $event.target.value)"
+        :min="minMinutes"
+        max="59"
+        class="w-50 pd-small radius-small"
+        placeholder="MM"
+      />
+    </div>
+
+    <!-- Selected date and actions -->
+    <div v-if="showSelected" class="pd-thin br-t br-solid br-grey-transp-25 flex flex-v-center gap-thin">
+      <span class="t-transp">selected:</span>
+      <span class="flex-1">{{ formattedSelectedDate || '---' }}</span>
+      <button @click="onCancel" class="pd-small radius-small bg-white">cancel</button>
+      <button @click="onSelect" class="pd-small radius-small bg-black t-white">select</button>
+    </div>
+
     <!-- Tooltip for insufficient quantity -->
     <div 
       v-if="tooltip.show" 

package/src/components/Chips/Chips.vue

@@ -6,8 +6,8 @@
 		<p 
 			v-if="chips?.length"
 		  v-for="(chip,index) in chips" 
-		  :class="$attrs.class || 'p-regular font-main'"
-		 	class="mn-r-nano d-inline-block w-max pd-thin radius-thin t-medium bg-main" 
+		  :class="'p-regular font-main'"
+		 	class="mn-r-nano d-inline-block w-max p-regular pd-thin radius-thin t-medium bg-main" 
 		>
 			{{chip.text ? chip.text : chip}}
 		</p>
@@ -28,7 +28,4 @@ const props = defineProps(['chips']);
 </script>
 
 <style>
-	.t-trimmed {
-		font-size: 0;
-	}
 </style>

package/src/components/Dropdown/Dropdown.vue

@@ -1,16 +1,24 @@
 <template>
-  <div class="dropdown pos-relative" v-click-outside="clickedOutside" @click.stop="isOpen = !isOpen">
-    <div v-if="isComponentLabel" class="w-100 h-100 flex-center flex">
-      <component :is="label.component" v-bind="label.props" :class="label.class"></component>
-    </div>
-    <div v-else>
-      {{ label }}
-    </div>
+  <div
+    class="dropdown pos-relative"
+    v-click-outside="trigger === 'click' ? clickedOutside : undefined"
+    @click.stop="trigger === 'click' ? (isOpen = !isOpen) : null"
+    @mouseenter="trigger === 'hover' ? (isOpen = true) : null"
+    @mouseleave="trigger === 'hover' ? (isOpen = false) : null"
+  >
+    <slot name="label">
+      <div v-if="isComponentLabel" class="w-100 h-100 flex-center flex">
+        <component :is="label.component" v-bind="label.props" :class="label.class"></component>
+      </div>
+      <div v-else>
+        {{ label }}
+      </div>
+    </slot>
     <transition name="TransitionTranslateY" mode="out-in">
-      <div 
-        v-show="isOpen" 
-        :style="{ left: align === 'left' ? '0' : 'auto', right: align === 'right' ? '0' : 'auto' }" 
-        class="dropdown-content radius-big" 
+      <div
+        v-show="isOpen"
+        :style="{ left: align === 'left' ? '0' : 'auto', right: align === 'right' ? '0' : 'auto' }"
+        class="dropdown-content "
       >
         <slot></slot>
       </div>
@@ -32,6 +40,10 @@ const props = defineProps({
   align: {
     type: String,
     default: 'left'
+  },
+  trigger: {
+    type: String,
+    default: 'click'
   }
 })
 

package/src/components/Feed/Carousel.vue

@@ -34,7 +34,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 import Loader from '@martyrs/src/components/Loader/Loader.vue'
 import Slider from '@martyrs/src/components/Slider/Slider.vue'
 import EmptyState from '@martyrs/src/components/EmptyState/EmptyState.vue';

package/src/components/Feed/Feed.old.vue

@@ -205,13 +205,13 @@ import Dropdown from "@martyrs/src/components/Dropdown/Dropdown.vue";
 import Calendar from '@martyrs/src/components/Calendar/Calendar.vue'
 import BottomSheet from '@martyrs/src/components/BottomSheet/BottomSheet.vue';
 
-import BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue'
-import BlockSorting  from '@martyrs/src/modules/globals/views/components/blocks/BlockSorting.vue'
+import BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.vue'
+import BlockSorting  from '@martyrs/src/modules/core/views/components/blocks/BlockSorting.vue'
 
-import FiltersBar from '@martyrs/src/modules/globals/views/components/sections/Filters.vue'
+import FiltersBar from '@martyrs/src/modules/core/views/components/sections/Filters.vue'
 
-import ButtonSort  from '@martyrs/src/modules/globals/views/components/elements/ButtonSort.vue'
-import ButtonDate  from '@martyrs/src/modules/globals/views/components/elements/ButtonDate.vue'
+import ButtonSort  from '@martyrs/src/modules/core/views/components/elements/ButtonSort.vue'
+import ButtonDate  from '@martyrs/src/modules/core/views/components/elements/ButtonDate.vue'
 
 import IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'
 import IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'

package/src/components/Feed/Feed.vue

@@ -166,7 +166,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 
 import SkeletonEvent from '@martyrs/src/modules/icons/skeletons/SkeletonEvent.vue'
 
@@ -177,13 +177,13 @@ import Dropdown from "@martyrs/src/components/Dropdown/Dropdown.vue";
 import Calendar from '@martyrs/src/components/Calendar/Calendar.vue'
 import BottomSheet from '@martyrs/src/components/BottomSheet/BottomSheet.vue';
 
-import BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue'
-import BlockSorting  from '@martyrs/src/modules/globals/views/components/blocks/BlockSorting.vue'
+import BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.vue'
+import BlockSorting  from '@martyrs/src/modules/core/views/components/blocks/BlockSorting.vue'
 
-import FiltersBar from '@martyrs/src/modules/globals/views/components/sections/Filters.vue'
+import FiltersBar from '@martyrs/src/modules/core/views/components/sections/Filters.vue'
 
-import ButtonSort  from '@martyrs/src/modules/globals/views/components/elements/ButtonSort.vue'
-import ButtonDate  from '@martyrs/src/modules/globals/views/components/elements/ButtonDate.vue'
+import ButtonSort  from '@martyrs/src/modules/core/views/components/elements/ButtonSort.vue'
+import ButtonDate  from '@martyrs/src/modules/core/views/components/elements/ButtonDate.vue'
 
 import IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'
 import IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'

package/src/components/FieldDate/FieldDate.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+    :class="[
+      $attrs.class,
+      'field-date field-wrapper pos-relative',
+      { 'focus-within': isCalendarOpen }
+    ]"
+  >
+    <div
+      @click="toggleCalendar"
+      class="flex-center flex-nowrap flex cursor-pointer"
+    >
+      <div
+        v-if="label"
+        class="t-transp mn-r-small"
+      >
+        <span class="t-nowrap">
+          {{ label }}
+        </span>
+      </div>
+
+      <div class="w-100">
+        <span v-if="formattedDate" class="t-black">{{ formattedDate }}</span>
+        <span v-else class="t-transp">{{ placeholder }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="isCalendarOpen"
+      class="field-date__dropdown pos-absolute w-100"
+    >
+      <Calendar
+        v-model:date="dateValue"
+        :allowRange="allowRange"
+        :disabled="disabled"
+        :enableTime="enableTime"
+        :disablePastDates="disablePastDates"
+        :disabledRanges="disabledRanges"
+        :availabilityData="availabilityData"
+        :showAvailability="showAvailability"
+        :lowAvailabilityThreshold="lowAvailabilityThreshold"
+        :requiredQuantity="requiredQuantity"
+        :locale="locale"
+        :showSelected="showSelected"
+        @select="handleSelect"
+        @cancel="handleCancel"
+        class="radius-medium w-100 o-hidden bg-white"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import Calendar from '@martyrs/src/components/Calendar/Calendar.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [Date, Object],
+    default: null
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  placeholder: {
+    type: String,
+    default: 'Select date'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  allowRange: {
+    type: Boolean,
+    default: false
+  },
+  enableTime: {
+    type: Boolean,
+    default: false
+  },
+  disablePastDates: {
+    type: Boolean,
+    default: false
+  },
+  disabledRanges: {
+    type: Array,
+    default: () => []
+  },
+  availabilityData: {
+    type: Array,
+    default: () => []
+  },
+  showAvailability: {
+    type: Boolean,
+    default: false
+  },
+  lowAvailabilityThreshold: {
+    type: Number,
+    default: 3
+  },
+  requiredQuantity: {
+    type: Number,
+    default: 1
+  },
+  locale: {
+    type: String,
+    default: 'en'
+  },
+  showSelected: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isCalendarOpen = ref(false);
+
+const dateValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value);
+
+    // If showSelected is enabled, don't auto-close - user must click select/cancel
+    if (props.showSelected) return;
+
+    // Close calendar after single date selection
+    if (!props.allowRange) {
+      closeCalendar();
+    }
+    // Close calendar after range end date selection
+    if (props.allowRange && value?.start && value?.end) {
+      closeCalendar();
+    }
+  }
+});
+
+const formattedDate = computed(() => {
+  if (!props.modelValue) return '';
+
+  const formatDate = (date) => {
+    if (!date) return '';
+    const d = new Date(date);
+    const day = String(d.getDate()).padStart(2, '0');
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const year = d.getFullYear();
+
+    if (props.enableTime) {
+      const hours = String(d.getHours()).padStart(2, '0');
+      const minutes = String(d.getMinutes()).padStart(2, '0');
+      return `${hours}:${minutes}, ${day}.${month}.${year}`;
+    }
+
+    return `${day}.${month}.${year}`;
+  };
+
+  if (props.allowRange && props.modelValue?.start) {
+    const start = formatDate(props.modelValue.start);
+    const end = props.modelValue.end ? formatDate(props.modelValue.end) : '...';
+    return `${start} - ${end}`;
+  }
+
+  return formatDate(props.modelValue);
+});
+
+function toggleCalendar() {
+  if (props.disabled) return;
+  isCalendarOpen.value = !isCalendarOpen.value;
+}
+
+function closeCalendar() {
+  isCalendarOpen.value = false;
+}
+
+function handleSelect() {
+  closeCalendar();
+}
+
+function handleCancel() {
+  closeCalendar();
+}
+</script>
+
+<style scoped>
+.field-date__dropdown {
+  top: calc(100% + 0.5rem);
+  left: 0;
+  z-index: 1000;
+}
+</style>

package/src/components/Status/Snack.vue

@@ -3,6 +3,7 @@
     <div 
       class="flex-nowrap flex-v-center flex radius-small pd-small t-white"
       :class="snackClass"
+        @click="$emit('close')" 
     >
       <component 
         :is="iconComponent" 
@@ -10,12 +11,12 @@
         class="t-transp i-medium mn-r-thin z-index-5"
       />
       <p class="w-100">
-        {{ te(`globals.snacks.${message}`) ? t(`globals.snacks.${message}`) : message }}
+        {{ te(`core.snacks.${message}`) ? t(`core.snacks.${message}`) : message }}
       </p>
-      <IconCross 
+      <!-- <IconCross 
         @click="$emit('close')" 
         class="cursor-pointer hover-scale-1 i-medium z-index-5"
-      />
+      /> -->
     </div>
   </div>
 </template>
@@ -45,10 +46,10 @@ const props = defineProps({
 defineEmits(['close'])
 
 const snackClass = computed(() => ({
-  'bg-error': props.type === 'error',
-  'bg-success': props.type === 'success', 
-  'bg-warning': props.type === 'alert',
-  'bg-primary': props.type === 'notification'
+  'bg-red': props.type === 'error',
+  'bg-green': props.type === 'success', 
+  'bg-fourth': props.type === 'alert',
+  'bg-second': props.type === 'notification'
 }))
 
 const iconComponent = computed(() => {

package/src/components/Status/Status.vue

@@ -9,7 +9,7 @@
 		">
 			<IconInfo fill="rgb(var(--white))" class="t-transp i-medium mn-r-thin z-index-5"/>
 			<p class="w-100">
-				{{te(`globals.errors.${data.message}`) ? t(`globals.errors.${data.message}`) : data.message}}
+				{{te(`core.errors.${data.message}`) ? t(`core.errors.${data.message}`) : data.message}}
 			</p>
 			<IconCross @click="closeError()"  class="cursor-pointer hover-scale-1 i-medium z-index-5"/>
 		</div>

package/src/components/Tab/Tab.vue

@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 
 const { replaceClasses } = useGlobalMixins();
 const emit = defineEmits(['update:selected', 'tab-click']);