@ozdao/martyrs 0.2.604 → 0.2.605

package/src/components/Chart/Chart.vue

@@ -0,0 +1,216 @@
+<template>
+	<div v-if="data.length" class="pos-relative" @mouseleave="hoveredIdx = -1">
+		<svg :viewBox="`0 0 ${W} ${H}`" class="w-100 d-block" preserveAspectRatio="none" style="overflow: visible;">
+			<defs>
+				<linearGradient :id="gradientId" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0%" stop-color="rgb(var(--second))" stop-opacity="0.15"/>
+					<stop offset="100%" stop-color="rgb(var(--second))" stop-opacity="0.01"/>
+				</linearGradient>
+			</defs>
+			<!-- Horizontal grid lines -->
+			<line v-for="(tick, i) in ticks" :key="'g'+i" :x1="CHART_LEFT" :x2="CHART_RIGHT" :y1="getY(tick)" :y2="getY(tick)" stroke="rgb(var(--dark))" stroke-opacity="0.08" stroke-width="0.5" stroke-dasharray="3,3"/>
+			<!-- Y labels (inside, above grid lines) -->
+			<text v-for="(tick, i) in ticks" :key="'y'+i" :x="CHART_LEFT + 2" :y="getY(tick) - 4" text-anchor="start" fill="rgb(var(--dark))" fill-opacity="0.4" font-size="7.5" font-family="inherit">{{ formatValue(tick) }}</text>
+			<!-- Area gradient fill -->
+			<path :d="areaPath" :fill="`url(#${gradientId})`"/>
+			<!-- Line (smooth curve) -->
+			<path :d="linePath" fill="none" stroke="rgb(var(--second))" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
+			<!-- Hover vertical line -->
+			<line v-if="hoveredIdx >= 0" :x1="getX(hoveredIdx)" :x2="getX(hoveredIdx)" :y1="CHART_TOP" :y2="CHART_BOTTOM" stroke="rgb(var(--dark))" stroke-opacity="0.1" stroke-width="0.5" stroke-dasharray="3,3"/>
+			<!-- Interactive hit areas -->
+			<rect v-for="(item, i) in data" :key="'h'+i" :x="getX(i) - hitWidth / 2" :y="CHART_TOP" :width="hitWidth" :height="CHART_BOTTOM - CHART_TOP" fill="transparent" @mouseenter="hoveredIdx = i"/>
+			<!-- Visible dot (only hovered) -->
+			<circle v-if="hoveredIdx >= 0" :cx="getX(hoveredIdx)" :cy="getY(data[hoveredIdx][valueKey])" r="3" fill="rgb(var(--second))" stroke="white" stroke-width="1.5" style="pointer-events: none"/>
+			<!-- X labels -->
+			<template v-for="(item, i) in data" :key="'x'+i">
+				<text v-if="showXLabel(i)" :x="getX(i)" :y="CHART_BOTTOM + 14" :text-anchor="i === 0 ? 'start' : i === data.length - 1 ? 'end' : 'middle'" fill="rgb(var(--dark))" fill-opacity="0.45" font-size="7.5" font-family="inherit">{{ formatLabel(item[labelKey]) }}</text>
+			</template>
+		</svg>
+		<!-- Hover Tooltip -->
+		<div
+			v-if="hoveredIdx >= 0"
+			class="pos-absolute bg-dark t-white pd-thin pd-l-small pd-r-small radius-small fw-medium"
+			style="pointer-events: none; white-space: nowrap; font-size: 11px; z-index: 5;"
+			:style="tooltipStyle"
+		>
+			<slot name="tooltip" :item="data[hoveredIdx]" :index="hoveredIdx">
+				{{ formatValue(data[hoveredIdx][valueKey]) }} · {{ formatLabel(data[hoveredIdx][labelKey]) }}
+			</slot>
+		</div>
+	</div>
+	<p v-else class="opacity-50">{{ emptyText }}</p>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	data: { type: Array, default: () => [] },
+	valueKey: { type: String, default: 'value' },
+	labelKey: { type: String, default: 'label' },
+	formatValue: { type: Function, default: (v) => v },
+	formatLabel: { type: Function, default: (v) => v },
+	emptyText: { type: String, default: 'No data' }
+})
+
+const hoveredIdx = ref(-1)
+
+// Unique gradient ID per instance
+const gradientId = 'chart-grad-' + Math.random().toString(36).slice(2, 8)
+
+// Chart dimensions (viewBox)
+const W = 500
+const H = 200
+const CHART_LEFT = 5
+const CHART_RIGHT = 495
+const CHART_TOP = 15
+const CHART_BOTTOM = 175
+
+const maxValue = computed(() => {
+	if (!props.data.length) return 1
+	const max = Math.max(...props.data.map(d => d[props.valueKey]))
+	return max || 1
+})
+
+// Add ~10% headroom so line doesn't touch the top
+const ceilValue = computed(() => maxValue.value * 1.1)
+
+const hitWidth = computed(() => {
+	const total = props.data.length
+	if (total <= 1) return CHART_RIGHT - CHART_LEFT
+	return (CHART_RIGHT - CHART_LEFT) / total
+})
+
+function getX(i) {
+	const total = props.data.length
+	if (total <= 1) return (CHART_LEFT + CHART_RIGHT) / 2
+	return CHART_LEFT + (i / (total - 1)) * (CHART_RIGHT - CHART_LEFT)
+}
+
+function getY(value) {
+	if (!ceilValue.value) return CHART_BOTTOM
+	return CHART_BOTTOM - (value / ceilValue.value) * (CHART_BOTTOM - CHART_TOP)
+}
+
+// Nice ticks: 4-5 evenly spaced values
+function calcTicks(max) {
+	if (!max || max <= 0) return [0]
+	const targetCount = 5
+	const rawStep = max / targetCount
+	const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)))
+	const residual = rawStep / magnitude
+	let niceStep
+	if (residual <= 1) niceStep = magnitude
+	else if (residual <= 2) niceStep = 2 * magnitude
+	else if (residual <= 5) niceStep = 5 * magnitude
+	else niceStep = 10 * magnitude
+	const ticks = []
+	for (let v = 0; v <= max; v += niceStep) ticks.push(Math.round(v))
+	if (ticks[ticks.length - 1] < max) ticks.push(Math.round(max))
+	return ticks
+}
+
+// Target ~6-8 labels max on X axis
+function calcXStep(count) {
+	const maxLabels = 8
+	if (count <= maxLabels) return 1
+	return Math.ceil(count / maxLabels)
+}
+
+const ticks = computed(() => calcTicks(maxValue.value))
+const xStep = computed(() => calcXStep(props.data.length))
+
+function showXLabel(i) {
+	const len = props.data.length
+	if (len <= 2) return true
+	if (i === 0) return true
+	// Last label: only show if far enough from previous shown label
+	if (i === len - 1) {
+		const prevShown = Math.floor((len - 2) / xStep.value) * xStep.value
+		return (i - prevShown) >= xStep.value * 0.5
+	}
+	return i % xStep.value === 0
+}
+
+// Monotone cubic spline interpolation (Fritsch-Carlson)
+function monotonePath(points) {
+	if (points.length < 2) return ''
+	if (points.length === 2) return `M${points[0].x},${points[0].y}L${points[1].x},${points[1].y}`
+
+	const n = points.length
+	const dx = [], dy = [], m = []
+	for (let i = 0; i < n - 1; i++) {
+		dx.push(points[i + 1].x - points[i].x)
+		dy.push(points[i + 1].y - points[i].y)
+		m.push(dy[i] / dx[i])
+	}
+
+	const tangents = [m[0]]
+	for (let i = 1; i < n - 1; i++) {
+		if (m[i - 1] * m[i] <= 0) {
+			tangents.push(0)
+		} else {
+			tangents.push((m[i - 1] + m[i]) / 2)
+		}
+	}
+	tangents.push(m[n - 2])
+
+	// Fritsch-Carlson monotonicity
+	for (let i = 0; i < n - 1; i++) {
+		if (Math.abs(m[i]) < 1e-6) {
+			tangents[i] = 0
+			tangents[i + 1] = 0
+		} else {
+			const a = tangents[i] / m[i]
+			const b = tangents[i + 1] / m[i]
+			const s = a * a + b * b
+			if (s > 9) {
+				const t = 3 / Math.sqrt(s)
+				tangents[i] = t * a * m[i]
+				tangents[i + 1] = t * b * m[i]
+			}
+		}
+	}
+
+	let d = `M${points[0].x},${points[0].y}`
+	for (let i = 0; i < n - 1; i++) {
+		const seg = dx[i] / 3
+		const cp1x = points[i].x + seg
+		const cp1y = points[i].y + tangents[i] * seg
+		const cp2x = points[i + 1].x - seg
+		const cp2y = points[i + 1].y - tangents[i + 1] * seg
+		d += `C${cp1x},${cp1y},${cp2x},${cp2y},${points[i + 1].x},${points[i + 1].y}`
+	}
+	return d
+}
+
+const chartPoints = computed(() => {
+	return props.data.map((d, i) => ({
+		x: getX(i),
+		y: getY(d[props.valueKey])
+	}))
+})
+
+const linePath = computed(() => monotonePath(chartPoints.value))
+
+const areaPath = computed(() => {
+	if (!chartPoints.value.length) return ''
+	const line = linePath.value
+	const last = chartPoints.value[chartPoints.value.length - 1]
+	const first = chartPoints.value[0]
+	return `${line}L${last.x},${CHART_BOTTOM}L${first.x},${CHART_BOTTOM}Z`
+})
+
+const tooltipStyle = computed(() => {
+	if (hoveredIdx.value < 0) return {}
+	const i = hoveredIdx.value
+	const item = props.data[i]
+	const x = getX(i)
+	const y = getY(item[props.valueKey])
+	return {
+		left: `${(x / W) * 100}%`,
+		top: `${(y / H) * 100}%`,
+		transform: 'translate(-50%, -100%) translateY(-0.5rem)'
+	}
+})
+</script>

package/src/components/Checkbox/Checkbox.vue

@@ -41,7 +41,7 @@
 </script>
 <template>
   <label class="flex-v-center cursor-pointer flex-nowrap flex">
-    <div v-if="label" class="mn-r-auto t-transp mn-r-small">
+    <div v-if="label" class="mn-r-auto opacity-50 mn-r-small">
       <span>{{label}}</span>
     </div>
     <input 

package/src/components/Chips/Chips.vue

@@ -1,13 +1,12 @@
 <template>
 	<div 
-    class=""
-   >
+    	class=""
+   	>
    	<slot></slot>
 		<p 
-			v-if="chips?.length"
+		  v-if="chips?.length"
 		  v-for="(chip,index) in chips" 
-		  :class="'p-regular'"
-		 	class="mn-r-nano d-inline-block w-max p-regular pd-thin radius-thin fw-medium bg-main" 
+		 	class="mn-r-nano d-inline-block w-max pd-thin radius-thin fw-medium bg-main" 
 		>
 			{{chip.text ? chip.text : chip}}
 		</p>

package/src/components/Countdown/Countdown.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="gap-thin flex-nowrap flex flex-center">
     <div v-if="isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-medium bg-blur-small bg-white-transp-5 radius-small">
-      <p class="p-small t-transp">Offer is over</p>
+      <p class="p-small opacity-50">Offer is over</p>
     </div>
 
     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
     	<p class="p-medium">{{ days }}</p>
-    	<p class="p-small t-transp">Days</p>
+    	<p class="p-small opacity-50">Days</p>
     </div>
      <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
     	<p class="p-medium">{{ hours }}</p>
-    	<p class="p-small t-transp">hours</p>
+    	<p class="p-small opacity-50">hours</p>
     </div>
      <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
     	<p class="p-medium">{{ minutes }}</p>
-    	<p class="p-small t-transp">minutes</p>
+    	<p class="p-small opacity-50">minutes</p>
     </div>
      <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
     	<p class="p-medium">{{ seconds }}</p>
-    	<p class="p-small t-transp">seconds</p>
+    	<p class="p-small opacity-50">seconds</p>
     </div>
   </div>
 </template>

package/src/components/DatePicker/DatePicker.vue

@@ -10,7 +10,7 @@
           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">
+          <span class="opacity-50 t-noselect p-small mn-b-thin">
             {{ String(date.getMonth() + 1).padStart(2, '0') }}/{{ date.getFullYear() }}
           </span>
           <span class="t-noselect fw-semi">
@@ -27,7 +27,7 @@
           }"
           class="ease-in-out hover:bg-light cursor-pointer o-y-visible scroll-snap-start mn-r-thin mn-l-thin pd-thin radius-thin flex-column flex-center flex"
         >
-          <span class="t-transp t-noselect p-small mn-b-thin">
+          <span class="opacity-50 t-noselect p-small mn-b-thin">
             {{ dayLetter(date) }}
           </span>
           <span 

package/src/components/EditImages/EditImages.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="flex-nowrap flex gap-small">
-    <VueDraggableNext v-if="localImages.length > 0"  class="gap-small flex dragArea list-group w-full" v-model="localImages" @change="emitChanges">
-			<div v-for="(image, index) in localImages" class="pos-relative">
+	<div class="flex-nowrap flex gap-small o-x-scroll scroll-hide pd-t-small pd-r-small">
+    <VueDraggableNext v-if="localImages.length > 0"  class="gap-small flex flex-nowrap dragArea list-group w-full" v-model="localImages" @change="emitChanges">
+			<div v-for="(image, index) in localImages" class="pos-relative flex-child-default">
 				<img loading="lazy" class="i-extra object-fit-contain bg-black-transp-5 pd-nano radius-small o-hidden" :src="(FILE_SERVER_URL || '') + image" />
 				
         <IconCross  

package/src/components/EmptyState/EmptyState.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <h5 class="mn-b-small">{{ title }}</h5>
-    <p class="t-transp p-regular">{{ description }}</p>
+    <p class="opacity-50 p-regular">{{ description }}</p>
 
     <button v-if="action" @click="callback" class="mn-t-small t-white bg-second w-100 button">
       {{ action }}

package/src/components/Feed/Feed.vue

@@ -492,4 +492,9 @@ onUnmounted(() => {
 .feed-leave-active {
   position: absolute;
 }
+
+/* If Feed is inside a bg-light parent, nested bg-light elements become white */
+.bg-light {
+  > .bg-light { background: rgb(var(--white)); }
+}
 </style>

package/src/components/Field/Field.vue

@@ -73,11 +73,11 @@ const text = ref(props.field);
     <!-- Слот для иконки -->
     <slot name="icon" v-if="$slots.icon" />
     <!-- Или компонент иконки через пропс -->
-    <component :is="icon" v-else-if="icon" class="i-medium t-transp mn-r-thin" />
+    <component :is="icon" v-else-if="icon" class="i-medium opacity-50 mn-r-thin" />
     
     <div
       v-if="label"
-      class="t-transp mn-r-small"
+      class="opacity-50 mn-r-small"
     >
       <span class="ws-nowrap">
         {{label}}
@@ -124,7 +124,7 @@ const text = ref(props.field);
     <slot></slot>
     <div
       v-if="symbol"
-      class="t-transp mn-l-small"
+      class="opacity-50 mn-l-small"
     >
       <span>
         {{symbol}}

package/src/components/FieldDate/FieldDate.vue

@@ -12,7 +12,7 @@
     >
       <div
         v-if="label"
-        class="t-transp mn-r-small"
+        class="opacity-50 mn-r-small"
       >
         <span class="ws-nowrap">
           {{ label }}
@@ -21,7 +21,7 @@
 
       <div class="w-100">
         <span v-if="formattedDate" class="t-black">{{ formattedDate }}</span>
-        <span v-else class="t-transp">{{ placeholder }}</span>
+        <span v-else class="opacity-50">{{ placeholder }}</span>
       </div>
     </div>
 

package/src/components/LocationMarker/LocationMarker.vue

@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref, onMounted, watchEffect } from 'vue';
-import { Loader as GMLoader } from "@googlemaps/js-api-loader";
+import { setOptions, importLibrary } from "@googlemaps/js-api-loader";
 
 import Loader from '@martyrs/src/components/Loader/Loader.vue'
 
@@ -45,18 +45,24 @@ const emit = defineEmits(['update:location', 'update:address', 'update:country',
 const mapContainer = ref(null);
 const locationLoading = ref(false);
 
-let map, marker;
+let map, marker, LatLng, Geocoder;
 
-onMounted(() => {
-  const loader = new GMLoader({
-    apiKey: props.apiKey,
-    version: "weekly",
-    libraries: ["places"],
-    language: props.locale,    
-  });
+onMounted(async () => {
+  try {
+    setOptions({
+      apiKey: props.apiKey,
+      version: "weekly",
+      language: props.locale,
+    });
 
-  loader.load().then(() => {
-    map = new google.maps.Map(mapContainer.value, {
+    const mapsLib = await importLibrary("maps");
+    const markerLib = await importLibrary("marker");
+    const coreLib = await importLibrary("core");
+    const geocodingLib = await importLibrary("geocoding");
+    LatLng = coreLib.LatLng;
+    Geocoder = geocodingLib.Geocoder;
+
+    map = new mapsLib.Map(mapContainer.value, {
       center: props.location,
       zoom: 15,
       mapTypeControl: false,
@@ -64,7 +70,7 @@ onMounted(() => {
       disableDefaultUI: true
     });
 
-    marker = new google.maps.Marker({
+    marker = new markerLib.Marker({
       position: props.location,
       map,
       draggable: true,
@@ -77,29 +83,30 @@ onMounted(() => {
 
       getAddressFromLocation(newLocation);
     });
-  }).catch(e => {
+  } catch (e) {
     console.error(e);
-  });
+  }
 });
 
 watchEffect(() => {
-  if (props.location && marker) {
-    marker.setPosition(new google.maps.LatLng(props.location.lat, props.location.lng));
+  if (props.location && marker && LatLng) {
+    marker.setPosition(new LatLng(props.location.lat, props.location.lng));
   }
 });
 
 watchEffect(() => {
-  if (props.location && map) {
-    const newCenter = new google.maps.LatLng(props.location.lat, props.location.lng);
-    
+  if (props.location && map && LatLng) {
+    const newCenter = new LatLng(props.location.lat, props.location.lng);
+
     map.setCenter(newCenter);
     map.setZoom(15);
   }
 });
 
 function getAddressFromLocation(location) {
-  
-  const geocoder = new google.maps.Geocoder;
+  if (!Geocoder) return;
+
+  const geocoder = new Geocoder();
 
   geocoder.geocode({ 'location': location }, (results, status) => {
     if (status === 'OK') {

package/src/components/Map/Map.vue

@@ -7,7 +7,7 @@
 import { ref, onMounted, watch } from 'vue';
 
 
-import { Loader as GMLoader } from "@googlemaps/js-api-loader";
+import { setOptions, importLibrary } from "@googlemaps/js-api-loader";
 
 const props = defineProps({
   location: Object,
@@ -18,17 +18,22 @@ const props = defineProps({
 let gmap = ref(null);
 let map = null;
 let marker = null;
+let LatLng = null;
 
 onMounted(async () => {
-  const loader = new GMLoader({
-    apiKey: props.apiKey,
-    version: "weekly",
-    libraries: ["places"],
-    language: props.locale,    
-  });
+  try {
+    setOptions({
+      apiKey: props.apiKey,
+      version: "weekly",
+      language: props.locale,
+    });
+
+    const mapsLib = await importLibrary("maps");
+    const markerLib = await importLibrary("marker");
+    const coreLib = await importLibrary("core");
+    LatLng = coreLib.LatLng;
 
-  loader.load().then(() => {
-    map = new google.maps.Map(gmap.value, {
+    map = new mapsLib.Map(gmap.value, {
       zoom: 13,
       center: {
         lat: props.location.lat,
@@ -37,24 +42,24 @@ onMounted(async () => {
     });
 
     // Добавить маркер
-    marker = new google.maps.Marker({
+    marker = new markerLib.Marker({
       position: {
         lat: props.location.lat,
         lng: props.location.lng,
       },
       map: map,
     });
- }).catch(e => {
+  } catch (e) {
     console.error(e);
-  });
+  }
 });
 watch(() => props.location, () => {
-  if (map && marker) {
+  if (map && marker && LatLng) {
     // Обновить позицию маркера
-    marker.setPosition(new google.maps.LatLng(props.location.lat, props.location.lng));
+    marker.setPosition(new LatLng(props.location.lat, props.location.lng));
 
     // Обновить центр карты
-    map.setCenter(new google.maps.LatLng(props.location.lat, props.location.lng));
+    map.setCenter(new LatLng(props.location.lat, props.location.lng));
   }
 }, { deep: true });
 

package/src/components/Popup/Popup.vue

@@ -8,10 +8,10 @@
         }"
       >
         <transition name="TransitionTranslateY" mode="out-in">
-          <section class="h-max-100 o-y-scroll pos-relative z-index-4" v-bind="$attrs" :class="$attrs.class">
+          <section class="h-max-100 o-y-scroll pos-relative z-index-4" v-bind="$attrs">
             <h4 v-if="title" class="mn-b-medium">{{title}}</h4>
-            <div class="pos-absolute h-100 pos-t-0 pos-r-0">
-              <IconCross :fill="'rgb(var(--white))'" @click="closePopup()" class="cursor-pointer bg-second pd-micro radius-extra pos-sticky pos-t-0 pos-r-0 mn-t-medium mn-r-medium hover-scale-1 i-medium z-index-5"/>
+            <div class="pos-absolute h-100 pos-t-0 pos-r-0 no-events">
+              <IconCross :fill="'rgb(var(--white))'" @click="closePopup()" style="pointer-events: auto" class="cursor-pointer bg-second pd-micro radius-extra pos-sticky pos-t-0 pos-r-0 mn-t-medium mn-r-medium hover-scale-1 i-medium z-index-5"/>
             </div>
             <slot></slot>
           </section>  

package/src/components/Radio/Radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <label class="flex-v-center flex-nowrap flex">
+  <label class="flex-v-center flex-nowrap flex" @click.stop.prevent="emit('update:radio', value)">
     <!-- ////////////////////////// -->
     <!-- Checkmark -->
     <!-- ////////////////////////// -->
@@ -29,7 +29,7 @@
     <!-- Label -->
     <!-- ////////////////////////// -->
 
-    <div v-if="label" class="mn-l-thin mn-r-auto t-transp mn-r-small">
+    <div v-if="label" class="mn-l-thin mn-r-auto opacity-50 mn-r-small">
       <span>{{label}}</span>
     </div>
 

package/src/components/Select/Select.vue

@@ -9,7 +9,7 @@
     class="cursor-pointer field-wrapper flex-v-center flex-nowrap flex pos-relative"
   >
     <!-- Label -->
-    <span v-if="label" class="t-transp mn-r-small">{{label}}</span>
+    <span v-if="label" class="opacity-50 mn-r-small">{{label}}</span>
     
     <!-- Input -->
     <span>

package/src/components/Status/Snack.vue

@@ -8,7 +8,7 @@
       <component 
         :is="iconComponent" 
         fill="rgb(var(--white))" 
-        class="t-transp i-medium mn-r-thin z-index-5"
+        class="opacity-50 i-medium mn-r-thin z-index-5"
       />
       <p class="w-100">
         {{ te(`core.snacks.${message}`) ? t(`core.snacks.${message}`) : message }}

package/src/components/Status/Status.vue

@@ -7,7 +7,7 @@
 			t-white 
 			bg-fourth
 		">
-			<IconInfo fill="rgb(var(--white))" class="t-transp i-medium mn-r-thin z-index-5"/>
+			<IconInfo fill="rgb(var(--white))" class="opacity-50 i-medium mn-r-thin z-index-5"/>
 			<p class="w-100">
 				{{te(`core.errors.${data.message}`) ? t(`core.errors.${data.message}`) : data.message}}
 			</p>

package/src/components/Table/Table.vue

@@ -2,6 +2,10 @@
 <script setup>
 import { defineProps, computed } from 'vue'
 
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
 const props = defineProps({
   // принимаем уже отформатированный набор строк
   items: {
@@ -14,9 +18,20 @@ const props = defineProps({
     type: Array,
     required: true,
     default: () => []
+  },
+  // функция (row) => '/path' для кликабельных строк
+  rowLink: {
+    type: Function,
+    default: null
   }
 })
 
+function onRowClick(row) {
+  if (!props.rowLink) return
+  const path = props.rowLink(row)
+  if (path) router.push(path)
+}
+
 // если вам нужен геттер для вложенных свойств
 const getNestedValue = (obj, path) => path.split('.').reduce((o, k) => (o ? o[k] : undefined), obj) 
 </script>
@@ -32,7 +47,7 @@ const getNestedValue = (obj, path) => path.split('.').reduce((o, k) => (o ? o[k]
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(row, rowIndex) in props.items" :key="rowIndex">
+        <tr v-for="(row, rowIndex) in props.items" :key="rowIndex" :class="{ 'cursor-pointer hover-bg-light': rowLink }" @click="onRowClick(row)">
           <td v-for="col in columns" :key="col.key" class="pd-small br-t-1px br-light t-left">
             <!-- Передаем полный объект row и текущее значение -->
             <slot :name="`cell-${col.key}`" :value="getNestedValue(row, col.key)" :row="row">

package/src/components/Upload/Upload.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="[$attrs.class, { 'bg-fourth-nano': validation }]" class="flex-center flex-nowrap flex">
     <!-- Label -->
-    <div v-if="label" class="t-transp mn-r-small">
+    <div v-if="label" class="opacity-50 mn-r-small">
       <span>{{label}}</span>
     </div>
 

package/src/components/UploadImage/UploadImage.vue

@@ -43,7 +43,7 @@
     <!-- Text block -->
     <div v-if="text" class="upload-text-block  flex flex-column">
       <span class="mn-b-small fw-medium">{{ textConfig.title }}</span>
-      <span class="mn-b-medium t-transp">{{ textConfig.subtitle }}</span>
+      <span class="mn-b-medium opacity-50">{{ textConfig.subtitle }}</span>
       <div v-if="!imageUrl && !photo && !previewUrl">
         <button @click="onComponentClick" class="button button-small w-max bg-main t-black cursor-pointer">
           {{ textConfig.buttonText }}