@ozdao/martyrs 0.2.487 → 0.2.488

package/package.json

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

package/src/builder/rspack/rspack.config.base.js

@@ -46,6 +46,7 @@ export default (projectRoot) => {
               template: {
                 preprocess: (content, { filename }) => {
                   const rewritten = content
+                    // Обработка существующего синтаксиса v-slot
                     .replace(
                       /<(\w+)\s+v-slot(:[\w\-]+)?=("|'){([^"'}]+)}("|')\s*>/g,
                       (_match, tag, slotName, _q1, slotProps, _q2) => {
@@ -56,6 +57,19 @@ export default (projectRoot) => {
                     .replace(
                       /<\/(\w+)>\s*<!--\s*v-slot-close\s*-->/g,
                       (_match, tag) => `</${tag}></template>`
+                    )
+                    // Новая обработка для сокращенного синтаксиса #slotname
+                    .replace(
+                      /<(\w+)(\s+#[\w\-]+)([^>]*)\/>/g,
+                      (_match, tag, slotDirective, attrs) => {
+                        return `<template${slotDirective}><${tag}${attrs}/></template>`;
+                      }
+                    )
+                    .replace(
+                      /<(\w+)(\s+#[\w\-]+)([^>]*)>(.*?)<\/\1>/gs,
+                      (_match, tag, slotDirective, attrs, content) => {
+                        return `<template${slotDirective}><${tag}${attrs}>${content}</${tag}></template>`;
+                      }
                     );
 
                   return { code: rewritten };

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -30,7 +30,7 @@
         <path fill="rgb(var(--black))" d="M0.494141 4.26391C0.494141 4.48862 0.659906 4.66912 0.928813 4.66912C1.05037 4.66912 1.16825 4.6065 1.27139 4.52177L1.64344 4.20866V7.56448C1.64344 8.13545 1.98971 8.47803 2.5791 8.47803H7.56678C8.15616 8.47803 8.50243 8.13545 8.50243 7.56448V4.19392L8.8929 4.52177C8.99604 4.6065 9.11392 4.66912 9.23916 4.66912C9.48597 4.66912 9.67015 4.5144 9.67015 4.27128C9.67015 4.1313 9.61121 4.01343 9.5007 3.92133L8.50243 3.08146V1.47538C8.50243 1.30961 8.3956 1.1991 8.22984 1.1991H7.63308C7.46732 1.1991 7.35313 1.30961 7.35313 1.47538V2.11634L5.66969 0.70181C5.31606 0.403433 4.85928 0.403433 4.50197 0.70181L0.663589 3.92133C0.553079 4.01711 0.494141 4.14235 0.494141 4.26391ZM6.13752 5.26219C6.13752 5.08906 6.02701 4.97855 5.85387 4.97855H4.31779C4.14097 4.97855 4.02678 5.08906 4.02678 5.26219V7.63447H2.83327C2.60856 7.63447 2.48332 7.50922 2.48332 7.28084V3.5014L4.90349 1.47538C5.01768 1.37592 5.15029 1.37592 5.26817 1.47538L7.66255 3.48298V7.28084C7.66255 7.50922 7.53731 7.63447 7.3126 7.63447H6.13752V5.26219Z"/>
       </svg>
 
-      <router-link v-if="index !== breadcrumbs.length - 1" :to="index === 0 ? '/' : item.path">
+      <router-link v-if="index !== breadcrumbs.length - 1" :to="item.path">
         {{ item.name }}
       </router-link>
 
@@ -54,50 +54,197 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+/**
+ * Компонент Breadcrumbs с автоматическим построением на основе роутов
+ * 
+ * Примеры настройки роутов:
+ * 
+ * 1. Базовое использование:
+ * {
+ *   path: '/products',
+ *   name: 'Products',
+ *   meta: { title: 'Продукты' }
+ * }
+ * 
+ * 2. Скрытие роута из хлебных крошек:
+ * {
+ *   path: '/admin',
+ *   meta: { breadcrumbs: { hide: true } }
+ * }
+ * 
+ * 3. Связывание с предыдущим роутом:
+ * {
+ *   path: '/products/:id',
+ *   meta: { breadcrumbs: { linkToPrevious: true } }
+ * }
+ * 
+ * 4. Кастомное имя:
+ * {
+ *   path: '/settings',
+ *   meta: {
+ *     breadcrumbs: {
+ *       name: { ru: 'Настройки', en: 'Settings' }
+ *     }
+ *   }
+ * }
+ */
+import { ref, watch, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 const route = useRoute();
+const router = useRouter();
 const { t, locale } = useI18n();
 
-function createRoute(array, route) {
-  return array
-    .map(segment => {
-      if (segment.startsWith(':')) {
-        let paramName = segment.replace(/[:?]/g, '');
-        return route.params[paramName] || null;
-      }
-      return segment;
-    })
-    .filter(segment => segment !== null)
-    .join('/');
-}
-
 const breadcrumbs = ref([]);
 
-function updateBreadcrumbs() {
-  breadcrumbs.value = route.matched
-    .map((r) => {
-      const title = r.meta?.title;
-      const currentLocale = locale?.value;
+// Настройки компонента
+const props = defineProps({
+  homeName: {
+    type: [String, Object],
+    default: 'Home'
+  },
+  debug: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Построение пути для конкретного роута
+function buildRoutePath(matched, index, params) {
+  // Для корневого роута
+  if (index === 0 && matched[0].path === '/') {
+    return '/';
+  }
+  
+  // Собираем путь из всех предыдущих сегментов
+  const segments = [];
+  
+  for (let i = 0; i <= index; i++) {
+    const route = matched[i];
+    // Получаем только сегмент текущего роута без родительских путей
+    const routeSegments = route.path.split('/').filter(Boolean);
     
-      const name = title && currentLocale && title[currentLocale];
+    // Если это не корневой роут, добавляем только новые сегменты
+    if (i > 0) {
+      const parentPath = matched[i - 1].path.split('/').filter(Boolean);
+      const newSegments = routeSegments.slice(parentPath.length);
+      segments.push(...newSegments);
+    } else {
+      segments.push(...routeSegments);
+    }
+  }
+  
+  // Заменяем параметры на реальные значения
+  const processedSegments = segments.map(segment => {
+    if (segment.startsWith(':')) {
+      const paramName = segment.replace(/[:?]/g, '');
+      return params[paramName] || '';
+    }
+    return segment;
+  }).filter(Boolean);
+  
+  return '/' + processedSegments.join('/');
+}
 
-      let path = r.path.split('/');
-      path = createRoute(path, route);
+// Получение имени для хлебной крошки
+function getBreadcrumbName(routeMeta, routeName, params) {
+  const currentLocale = locale?.value;
+  
+  // Приоритет: meta.breadcrumbs.name > meta.title > routeName
+  let name;
+  
+  if (routeMeta?.breadcrumbs?.name) {
+    name = typeof routeMeta.breadcrumbs.name === 'object' && currentLocale
+      ? routeMeta.breadcrumbs.name[currentLocale]
+      : routeMeta.breadcrumbs.name;
+  } else if (routeMeta?.title) {
+    name = typeof routeMeta.title === 'object' && currentLocale
+      ? routeMeta.title[currentLocale]
+      : routeMeta.title;
+  } else {
+    name = routeName || '';
+  }
+  
+  // Если имя содержит параметры, заменяем их
+  if (name && typeof name === 'string') {
+    Object.keys(params).forEach(key => {
+      name = name.replace(`:${key}`, params[key]);
+    });
+  }
+  
+  return name;
+}
 
-      const isHidden = r.meta?.breadcrumbs?.hidden;
+// Обновление хлебных крошек
+function updateBreadcrumbs() {
+  const matched = route.matched;
+  const result = [];
+  const isHome = matched.length === 1 && matched[0].path === '/';
+  
+  for (let i = 0; i < matched.length; i++) {
+    const r = matched[i];
+    
+    // Пропускаем корневой роут если это не единственный роут
+    if (r.path === '/' && !isHome) {
+      continue;
+    }
+    
+    // Проверяем, нужно ли скрыть этот роут
+    if (r.meta?.breadcrumbs?.hide) {
+      continue;
+    }
+    
+    // Проверяем, нужно ли связать с предыдущим
+    if (r.meta?.breadcrumbs?.linkToPrevious && result.length > 0) {
+      // Обновляем путь предыдущего элемента на текущий
+      const prevItem = result[result.length - 1];
+      prevItem.path = buildRoutePath(matched, i, route.params);
+      continue;
+    }
+    
+    const name = getBreadcrumbName(r.meta, r.name, route.params);
     
-      return { name, path, isHidden };
-    })
-    .filter((breadcrumb) => {
-      return breadcrumb.name && !breadcrumb.isHidden;
+    if (name) {
+      result.push({
+        name,
+        path: buildRoutePath(matched, i, route.params)
+      });
+    }
+  }
+  
+  // Добавляем домашнюю страницу, если её нет и мы не на главной
+  if (result.length > 0 && !isHome && result[0].name !== 'Home') {
+    const homeName = typeof props.homeName === 'object' && locale?.value
+      ? props.homeName[locale.value]
+      : props.homeName;
+      
+    result.unshift({
+      name: homeName,
+      path: '/'
     });
+  }
+  
+  // Отладочная информация
+  if (props.debug) {
+    console.log('Breadcrumbs Debug:', {
+      currentPath: route.path,
+      params: route.params,
+      matched: matched.map(r => ({
+        path: r.path,
+        name: r.name,
+        meta: r.meta
+      })),
+      result
+    });
+  }
+  
+  breadcrumbs.value = result;
 }
 
+// Следим за изменениями роута
 watch(
-  () => route.matched,
+  () => [route.path, route.params, locale.value],
   () => {
     updateBreadcrumbs();
   },
@@ -105,45 +252,36 @@ watch(
 );
 </script>
 
-
-
 <style lang='scss'>
-  .breadcrumbs { 
-    height: 4rem;
+.breadcrumbs { 
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  .home {
+    height: 1rem;
+  }
 
-    // border-bottom: 1px solid rgba(0,0,0,0.1);
+  .chevron {
+    height: 0.75rem;
+  }
 
+  a {
     display: flex;
     align-items: center;
-
     flex-wrap: nowrap;
 
-    .home {
-      height: 1rem;
-
-    }
-
-    .chevron {
-      height: 0.75rem;
-
-    }
-
-    a {
-      display: flex;
-      align-items: center;
-
-      flex-wrap: nowrap;
-
-      span {
-        margin-left: 0.5rem;
-        margin-right: 0.5rem;
-      }
+    span {
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
     }
+  }
 
-    .router-link-exact-active:last-of-type {
-      span {
-        color: #00ff88;
-      } 
-    }
+  .router-link-exact-active:last-of-type {
+    span {
+      color: #00ff88;
+    } 
   }
-  </style>
+}
+</style>

package/src/components/Button/Button.vue

@@ -117,7 +117,7 @@
 			<span v-else-if="error" class="t-center w-100 error">{{ error }}</span>
 		</transition>
 		<!-- Counter -->
-		<div v-if="counter" class="button-counter flex-center"><span>{{counter}}</span></div> 
+		<div v-if="counter" class="button-counter flex flex-center"><span>{{counter}}</span></div> 
 
 	</button> 
 </template>

package/src/components/Calendar/Calendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="calendar" :aria-disabled="disabled"> 
+  <div class="t-noselect calendar" :aria-disabled="disabled"> 
      <div v-if="allowRange && !disablePastDates" class="br-b br-solid br-grey-transp-25 gap-thin flex flex-nowrap pd-thin">
       <button @click="selectToday" class="font-second t-nowrap pd-thin bg-white radius-small">Today</button>
       <button @click="selectLastWeek" class="font-second t-nowrap pd-thin bg-white radius-small">Last Week</button>
@@ -40,7 +40,7 @@
             { 'calendar__date--low-availability': isLowAvailability(day.date) },
             { 'calendar__date--unavailable': !isAvailable(day.date) && !isPastDate(day.date) },
           ]"
-          @click.stop="selectDate(day.date)"
+          @click.stop="selectDate(day.date, $event)"
         >
           {{ day.day }}
           <span v-if="showAvailability && getAvailability(day.date)" class="availability-indicator">
@@ -49,6 +49,15 @@
         </div>
       </div>
     </div>
+    
+    <!-- Tooltip for insufficient quantity -->
+    <div 
+      v-if="tooltip.show" 
+      class="calendar-tooltip"
+      :style="{ left: tooltip.x + 'px', top: tooltip.y + 'px' }"
+    >
+      {{ tooltip.message }}
+    </div>
    
   </div>
 </template>
@@ -75,6 +84,10 @@ const props = defineProps({
   lowAvailabilityThreshold: {
     type: Number,
     default: 3
+  },
+  requiredQuantity: {
+    type: Number,
+    default: 1
   }
 })
 
@@ -87,6 +100,7 @@ const currentDate = ref(today)
 const selectedDate = ref(null)
 const startDate = ref(null)
 const endDate = ref(null)
+const tooltip = ref({ show: false, message: '', x: 0, y: 0 })
 
 const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 
@@ -251,11 +265,32 @@ const isInRange = (date) => {
   return false
 }
 
-const selectDate = (date) => {
+const selectDate = (date, event) => {
   // Don't allow selection of past dates or unavailable dates
   if (props.disablePastDates && isPastDate(date)) return;
   if (!isAvailable(date)) return;
   
+  // Check if date has sufficient quantity for required amount
+  const availabilityInfo = getAvailabilityInfo(date);
+  if (availabilityInfo && availabilityInfo.availableQuantity < props.requiredQuantity) {
+    // Show tooltip with insufficient quantity message
+    if (event) {
+      tooltip.value = {
+        show: true,
+        message: `Insufficient quantity. Available: ${availabilityInfo.availableQuantity}, needed: ${props.requiredQuantity}`,
+        x: event.clientX,
+        y: event.clientY
+      };
+      setTimeout(() => {
+        tooltip.value.show = false;
+      }, 3000);
+    }
+    return;
+  }
+  
+  // Hide tooltip if it was showing
+  tooltip.value.show = false;
+  
   // If selecting a date from another month, switch to that month
   if (!isSameMonth(date)) {
     // currentDate.value = new Date(Date.UTC(
@@ -486,4 +521,19 @@ button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+.calendar-tooltip {
+  position: fixed;
+  background-color: #333;
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 1000;
+  max-width: 200px;
+  word-wrap: break-word;
+  pointer-events: none;
+  transform: translate(-50%, -100%);
+  margin-top: -8px;
+}
 </style>

package/src/components/Countdown/Countdown.vue

@@ -5,19 +5,19 @@
     </div>
 
     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
-    	<p class="p-big">{{ days }}</p>
+    	<p class="p-semi">{{ days }}</p>
     	<p class="p-small t-transp">Days</p>
     </div>
      <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
-    	<p class="p-big">{{ hours }}</p>
+    	<p class="p-semi">{{ hours }}</p>
     	<p class="p-small t-transp">hours</p>
     </div>
      <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
-    	<p class="p-big">{{ minutes }}</p>
+    	<p class="p-semi">{{ minutes }}</p>
     	<p class="p-small t-transp">minutes</p>
     </div>
      <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
-    	<p class="p-big">{{ seconds }}</p>
+    	<p class="p-semi">{{ seconds }}</p>
     	<p class="p-small t-transp">seconds</p>
     </div>
   </div>

package/src/components/DatePicker/DatePicker.vue

@@ -1,32 +1,42 @@
 <template>
   <div>
     <div 
-      class="w-100 scroller o-scroll scroll-snap-type-x-mandatory scroll-pd-regular scroll-hide flex-nowrap flex" 
+      class="w-100 scroller o-x-scroll o-y-visible scroll-snap-type-x-mandatory scroll-pd-regular scroll-hide flex-nowrap flex" 
       ref="scrollContainer"
     >
-      <div 
-        v-for="date in dates" 
-        :key="date.toString()" 
-        @click="selectDate(date)"
-        :class="{
-          'selected': selectedDate && selectedDate.toDateString() === date.toDateString(),
-          'highlighted': isHighlighted(date)
-        }"
-        class="cursor-pointer scroll-snap-align-start mn-r-small mn-l-small flex-column flex-center flex"
-      >
-        <span class="t-transp">
-          {{ dayLetter(date) }}
-        </span>
-        <span 
+      <template v-for="(date, index) in dates" :key="date.toString()">
+        <!-- Month separator -->
+        <div 
+          v-if="index === 0 || dates[index - 1].getMonth() !== date.getMonth()"
+          class="mn-r-thin mn-l-thin pd-thin radius-thin flex-column flex-center flex bg-light"
+        >
+          <span class="t-transp t-noselect p-small mn-b-thin">
+            {{ String(date.getMonth() + 1).padStart(2, '0') }}/{{ date.getFullYear() }}
+          </span>
+          <span class="t-noselect t-semi">
+            {{ date.toLocaleDateString(props.locale || 'en', { month: 'short' }).toUpperCase() }}
+          </span>
+        </div>
+        
+        <!-- Date -->
+        <div 
+          @click="selectDate(date)"
           :class="{
-            'bg-main': selectedDate && selectedDate.toDateString() === date.toDateString(),
-             'br-1px br-solid br-main':isHighlighted(date),
+            'bg-main t-white': selectedDate && selectedDate.toDateString() === date.toDateString(),
+            'bg-second t-white': isHighlighted(date)
           }"
-          class="transition-ease-in-out t-semi flex-center flex radius-big i-semi day-number"
+          class="transition-ease-in-out hover-bg-light cursor-pointer o-y-visible scroll-snap-align-start mn-r-thin mn-l-thin pd-thin radius-thin flex-column flex-center flex"
         >
-          {{ date.getDate() }}
-        </span>
-      </div>
+          <span class="t-transp t-noselect p-small mn-b-thin">
+            {{ dayLetter(date) }}
+          </span>
+          <span 
+            class="t-noselect t-semi  day-number"
+          >
+            {{ date.getDate() }}
+          </span>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -93,7 +103,7 @@ function formatDateForRouter(date) {
 
 function dayLetter(date) {
   return date.toLocaleDateString(props.locale ? props.locale : 'en', { 
-    weekday: 'narrow' 
+    weekday: 'short' 
   }).toUpperCase();
 }
 

package/src/components/Feed/Carousel.vue

@@ -5,9 +5,14 @@
       <Loader />
     </div>
     <!-- Empty State -->
-    <div v-else-if="!entities.length" class="bg-light radius-semi flex flex-center w-100 h-20r">
-      <p class="text-gray-500">{{t('title')}}</p>
-    </div>
+    <EmptyState
+      v-if="!isLoading && !entities.length < 1"
+      :title="states.empty.title"
+      :description="states.empty.description"
+      :action="states.empty.action"
+      :callback="states.empty.callback"
+      :class="replaceClasses('pd-medium bg-light radius-medium', states.empty.class)"
+    />
     <!-- Slider with loaded entities -->
     <Slider v-else :showDots="showDots">
       <div 
@@ -31,10 +36,20 @@ import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 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';
 
 const props = defineProps({
   showDots: Boolean,
   store: Object,
+  states: {
+    type: Object,
+    default: () => ({
+      empty: {
+        title: 'Nothing found',
+        description: 'Sorry, nothing found',
+      },
+    }),
+  },
   options: Object,
   text: Object,
   user: Object