@ozdao/martyrs 0.2.576 → 0.2.578

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.576",
+  "version": "0.2.578",
   "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/components/BottomSheet/BottomSheet.vue

@@ -3,7 +3,7 @@
     <section
       v-if="show"
       ref="wrapper"
-      class="w-100 bs-black rows-1 h-100 pos-absolute pos-t-0 pos-l-0 z-index-9999"
+      class="w-100 bs-black flex flex-column h-100 pos-absolute pos-t-0 pos-l-0 z-index-9999"
       :class="{
         'pd-t-extra': MOBILE_APP === 'ios',
       }"

package/src/components/Slider/Slider.vue

@@ -1,14 +1,19 @@
 <template>
-  <!-- Native Carousel -->
-  <div class="carousel" ref="carouselRef">
+  <div
+    class="carousel"
+    ref="carouselRef"
+    @mouseenter="onHoverStart"
+    @mouseleave="onHoverEnd"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
+  >
     <div class="carousel__container" @scroll="handleScroll">
       <slot></slot>
     </div>
-    
-    <!-- Navigation Dots (optional) -->
+
     <div class="carousel__dots" v-if="showDots && slideCount > 1">
-      <button 
-        v-for="index in slideCount" 
+      <button
+        v-for="index in slideCount"
         :key="index - 1"
         class="carousel__dot"
         :class="{ 'carousel__dot--active': selectedIndex === index - 1 }"
@@ -19,187 +24,144 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 
-// Props for customization
 const props = defineProps({
   showDots: Boolean,
   slideCount: {
     type: Number,
     default: 0
+  },
+  autoplay: {
+    type: Object,
+    default: null
   }
 });
 
+// autoplay: { enabled, interval, hover, touch, resume, delay }
+
 const carouselRef = ref(null)
 const selectedIndex = ref(0)
-const autoplayInterval = ref(null)
+const intervalId = ref(null)
 const scrollTimeout = ref(null)
+const resumeTimeout = ref(null)
+const paused = ref(false)
 
-// Scroll to specific slide
 const scrollTo = (index) => {
   if (!carouselRef.value) return
-  
   const container = carouselRef.value.querySelector('.carousel__container')
   const slides = container.querySelectorAll('.carousel__slide')
-  
   if (slides[index]) {
-    container.scrollTo({
-      left: slides[index].offsetLeft,
-      behavior: 'smooth'
-    })
-    
+    container.scrollTo({ left: slides[index].offsetLeft, behavior: 'smooth' })
     selectedIndex.value = index
   }
 }
 
-// Handle scroll event with debounce
 const handleScroll = () => {
-  // Clear previous timeout
-  if (scrollTimeout.value) {
-    clearTimeout(scrollTimeout.value)
-  }
-  
-  // Set a timeout to update the index when scrolling stops
-  scrollTimeout.value = setTimeout(() => {
-    updateSelectedIndex()
-  }, 50) // Small delay to ensure scroll has completed
+  if (scrollTimeout.value) clearTimeout(scrollTimeout.value)
+  scrollTimeout.value = setTimeout(updateSelectedIndex, 50)
 }
 
-// Update selected index when scrolling
 const updateSelectedIndex = () => {
   if (!carouselRef.value) return
-  
   const container = carouselRef.value.querySelector('.carousel__container')
   const slides = container.querySelectorAll('.carousel__slide')
-  
   if (!slides.length) return
-  
-  const scrollPosition = container.scrollLeft
-  const slideWidth = slides[0].offsetWidth
-  
-  // Find current slide index based on scroll position
-  const index = Math.round(scrollPosition / slideWidth)
-  
-  // Ensure index is within bounds
-  const boundedIndex = Math.max(0, Math.min(index, slides.length - 1))
-  
-  // Update selected index
-  selectedIndex.value = boundedIndex
-}
-
-// Setup autoplay functionality
-const setupAutoplay = () => {
-  if (autoplayInterval.value) {
-    clearInterval(autoplayInterval.value)
+  const index = Math.round(container.scrollLeft / slides[0].offsetWidth)
+  selectedIndex.value = Math.max(0, Math.min(index, slides.length - 1))
+}
+
+const clearTimers = () => {
+  if (intervalId.value) { clearInterval(intervalId.value); intervalId.value = null }
+  if (resumeTimeout.value) { clearTimeout(resumeTimeout.value); resumeTimeout.value = null }
+}
+
+const startAutoplay = () => {
+  clearTimers()
+  const a = props.autoplay
+  if (!a?.enabled || paused.value) return
+  intervalId.value = setInterval(() => {
+    scrollTo((selectedIndex.value + 1) % props.slideCount)
+  }, a.interval ?? 2000)
+}
+
+const pause = () => {
+  paused.value = true
+  clearTimers()
+}
+
+const resume = () => {
+  const a = props.autoplay
+  if (!a?.enabled || a.resume === false) return
+  clearTimers()
+  const delay = a.delay ?? 0
+  if (delay > 0) {
+    resumeTimeout.value = setTimeout(() => {
+      paused.value = false
+      startAutoplay()
+    }, delay)
+  } else {
+    paused.value = false
+    startAutoplay()
   }
-  
-  autoplayInterval.value = setInterval(() => {
-    const nextIndex = (selectedIndex.value + 1) % props.slideCount
-    scrollTo(nextIndex)
-  }, 2000) // 2 seconds interval like in original
 }
 
+const onHoverStart = () => {
+  if (props.autoplay?.hover !== false) pause()
+}
+
+const onHoverEnd = () => {
+  if (props.autoplay?.hover !== false) resume()
+}
+
+const onTouchStart = () => {
+  if (props.autoplay?.touch !== false) pause()
+}
+
+const onTouchEnd = () => {
+  if (props.autoplay?.touch !== false) resume()
+}
+
+watch(() => props.autoplay, () => {
+  if (props.autoplay?.enabled) {
+    paused.value = false
+    startAutoplay()
+  } else {
+    pause()
+  }
+}, { deep: true })
+
 onMounted(() => {
-  // Initialize native carousel after component is mounted
-  if (carouselRef.value) {
-    // Listen for scroll end using intersection observer for better performance
-    const container = carouselRef.value.querySelector('.carousel__container')
-    const slides = container.querySelectorAll('.carousel__slide')
-    
-    // Create intersection observer to detect when slides are visible
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          // Find the index of the visible slide
-          const slideIndex = Array.from(slides).indexOf(entry.target)
-          if (slideIndex !== -1) {
-            selectedIndex.value = slideIndex
-          }
-        }
-      })
-    }, {
-      root: container,
-      threshold: 0.7 // Consider slide visible when 70% is in view
-    })
-    
-    // Observe all slides
-    slides.forEach(slide => {
-      observer.observe(slide)
-    })
-    
-    // Add focus/blur events to pause autoplay on focus
-    container.addEventListener('focusin', () => {
-      if (autoplayInterval.value) {
-        clearInterval(autoplayInterval.value)
-      }
-    })
-    
-    container.addEventListener('focusout', () => {
-      setupAutoplay()
-    })
-    
-    // Stop autoplay on touch/mouse interaction
-    container.addEventListener('mousedown', () => {
-      if (autoplayInterval.value) {
-        clearInterval(autoplayInterval.value)
-      }
-    })
-    
-    container.addEventListener('touchstart', () => {
-      if (autoplayInterval.value) {
-        clearInterval(autoplayInterval.value)
+  if (!carouselRef.value) return
+  const container = carouselRef.value.querySelector('.carousel__container')
+  const slides = container.querySelectorAll('.carousel__slide')
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const idx = Array.from(slides).indexOf(entry.target)
+        if (idx !== -1) selectedIndex.value = idx
       }
     })
-    
-    // Resume autoplay after interaction ends
-    container.addEventListener('mouseup', () => {
-      setupAutoplay()
-    })
-    
-    container.addEventListener('touchend', () => {
-      setupAutoplay()
-    })
-    
-    // Initialize autoplay
-    setupAutoplay()
-    
-    // Store observer for cleanup
-    carouselRef.value._observer = observer
-  }
+  }, { root: container, threshold: 0.7 })
+
+  slides.forEach(slide => observer.observe(slide))
+  carouselRef.value._observer = observer
+
+  container.addEventListener('focusin', pause)
+  container.addEventListener('focusout', resume)
+
+  if (props.autoplay?.enabled) startAutoplay()
 })
 
 onBeforeUnmount(() => {
-  // Clean up all resources
-  if (carouselRef.value) {
-    // Clean up intersection observer
-    if (carouselRef.value._observer) {
-      carouselRef.value._observer.disconnect()
-    }
-    
-    // Clean up event listeners
-    const container = carouselRef.value.querySelector('.carousel__container')
-    if (container) {
-      container.removeEventListener('focusin', () => {})
-      container.removeEventListener('focusout', () => {})
-      container.removeEventListener('mousedown', () => {})
-      container.removeEventListener('touchstart', () => {})
-      container.removeEventListener('mouseup', () => {})
-      container.removeEventListener('touchend', () => {})
-    }
-  }
-  
-  // Clear all timeouts and intervals
-  if (autoplayInterval.value) {
-    clearInterval(autoplayInterval.value)
-  }
-  
-  if (scrollTimeout.value) {
-    clearTimeout(scrollTimeout.value)
-  }
+  if (carouselRef.value?._observer) carouselRef.value._observer.disconnect()
+  clearTimers()
+  if (scrollTimeout.value) clearTimeout(scrollTimeout.value)
 })
 </script>
 
-<style >
+<style>
 .carousel {
   position: relative;
   width: 100%;
@@ -210,13 +172,13 @@ onBeforeUnmount(() => {
   display: flex;
   scroll-snap-type: x mandatory;
   overflow-x: scroll;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
   scroll-behavior: smooth;
 }
 
 .carousel__container::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
+  display: none;
 }
 
 .carousel__slide {
@@ -226,7 +188,6 @@ onBeforeUnmount(() => {
   scroll-snap-stop: always;
 }
 
-/* Navigation dots */
 .carousel__dots {
   display: flex;
   justify-content: center;
@@ -248,4 +209,4 @@ onBeforeUnmount(() => {
 .carousel__dot--active {
   background-color: rgba(0, 0, 0, 0.6);
 }
-</style>
+</style>

package/src/jit/rules.js

@@ -6,7 +6,7 @@
  */
 
 const sizeVars = ['extra', 'big', 'semi', 'medium', 'regular', 'small', 'thin', 'micro', 'nano'];
-
+const colorVariants = ['extra', 'big', 'semi', 'medium', 'regular', 'small', 'thin', 'micro', 'nano'];
 // Цвета для bg-*, t-*, fill-*, stroke-*
 const colorNames = [
   'main', 'second', 'third', 'fourth', 'fifth',
@@ -14,7 +14,47 @@ const colorNames = [
   'red', 'red-nice', 'green', 'green-nice', 'orange', 'orange-nice', 'yellow', 'yellow-nice',
   'youtube', 'telegram', 'twitter', 'instagram', 'reddit', 'transparent'
 ];
-const colorVariants = ['extra', 'big', 'semi', 'medium', 'regular', 'small', 'thin', 'micro', 'nano'];
+
+const dir = { t: 'top', r: 'right', b: 'bottom', l: 'left' };
+
+// Easing functions map
+const easings = {
+  'linear': 'linear',
+  'ease': 'ease',
+  'ease-in': 'ease-in',
+  'ease-out': 'ease-out',
+  'ease-in-out': 'ease-in-out',
+  // Standard easings
+  'sine-in': 'cubic-bezier(0.12,0,0.39,0)',
+  'sine-out': 'cubic-bezier(0.61,1,0.88,1)',
+  'sine-in-out': 'cubic-bezier(0.37,0,0.63,1)',
+  'quad-in': 'cubic-bezier(0.11,0,0.5,0)',
+  'quad-out': 'cubic-bezier(0.5,1,0.89,1)',
+  'quad-in-out': 'cubic-bezier(0.45,0,0.55,1)',
+  'cubic': 'cubic-bezier(0.65,0,0.35,1)',
+  'cubic-in': 'cubic-bezier(0.32,0,0.67,0)',
+  'cubic-out': 'cubic-bezier(0.33,1,0.68,1)',
+  'cubic-in-out': 'cubic-bezier(0.65,0,0.35,1)',
+  'quart-in': 'cubic-bezier(0.5,0,0.75,0)',
+  'quart-out': 'cubic-bezier(0.25,1,0.5,1)',
+  'quart-in-out': 'cubic-bezier(0.76,0,0.24,1)',
+  'quint-in': 'cubic-bezier(0.64,0,0.78,0)',
+  'quint-out': 'cubic-bezier(0.22,1,0.36,1)',
+  'quint-in-out': 'cubic-bezier(0.83,0,0.17,1)',
+  'expo-in': 'cubic-bezier(0.7,0,0.84,0)',
+  'expo-out': 'cubic-bezier(0.16,1,0.3,1)',
+  'expo-in-out': 'cubic-bezier(0.87,0,0.13,1)',
+  'circ-in': 'cubic-bezier(0.55,0,1,0.45)',
+  'circ-out': 'cubic-bezier(0,0.55,0.45,1)',
+  'circ-in-out': 'cubic-bezier(0.85,0,0.15,1)',
+  'back-in': 'cubic-bezier(0.36,0,0.66,-0.56)',
+  'back-out': 'cubic-bezier(0.34,1.56,0.64,1)',
+  'back-in-out': 'cubic-bezier(0.68,-0.6,0.32,1.6)',
+  'elastic': 'cubic-bezier(0.17,0.67,0.33,0.94)',
+  'spring': 'cubic-bezier(0.23,1,0.32,1.01)',
+  'bounce': 'cubic-bezier(0.71,-0.46,0.88,0.6)',
+};
+
 
 // Проверяет цвет и возвращает CSS значение
 function resolveColor(name) {
@@ -65,45 +105,6 @@ export function resolveValue(value, jit) {
   return null;
 }
 
-const dir = { t: 'top', r: 'right', b: 'bottom', l: 'left' };
-
-// Easing functions map
-const easings = {
-  'linear': 'linear',
-  'ease': 'ease',
-  'ease-in': 'ease-in',
-  'ease-out': 'ease-out',
-  'ease-in-out': 'ease-in-out',
-  // Standard easings
-  'sine-in': 'cubic-bezier(0.12,0,0.39,0)',
-  'sine-out': 'cubic-bezier(0.61,1,0.88,1)',
-  'sine-in-out': 'cubic-bezier(0.37,0,0.63,1)',
-  'quad-in': 'cubic-bezier(0.11,0,0.5,0)',
-  'quad-out': 'cubic-bezier(0.5,1,0.89,1)',
-  'quad-in-out': 'cubic-bezier(0.45,0,0.55,1)',
-  'cubic': 'cubic-bezier(0.65,0,0.35,1)',
-  'cubic-in': 'cubic-bezier(0.32,0,0.67,0)',
-  'cubic-out': 'cubic-bezier(0.33,1,0.68,1)',
-  'cubic-in-out': 'cubic-bezier(0.65,0,0.35,1)',
-  'quart-in': 'cubic-bezier(0.5,0,0.75,0)',
-  'quart-out': 'cubic-bezier(0.25,1,0.5,1)',
-  'quart-in-out': 'cubic-bezier(0.76,0,0.24,1)',
-  'quint-in': 'cubic-bezier(0.64,0,0.78,0)',
-  'quint-out': 'cubic-bezier(0.22,1,0.36,1)',
-  'quint-in-out': 'cubic-bezier(0.83,0,0.17,1)',
-  'expo-in': 'cubic-bezier(0.7,0,0.84,0)',
-  'expo-out': 'cubic-bezier(0.16,1,0.3,1)',
-  'expo-in-out': 'cubic-bezier(0.87,0,0.13,1)',
-  'circ-in': 'cubic-bezier(0.55,0,1,0.45)',
-  'circ-out': 'cubic-bezier(0,0.55,0.45,1)',
-  'circ-in-out': 'cubic-bezier(0.85,0,0.15,1)',
-  'back-in': 'cubic-bezier(0.36,0,0.66,-0.56)',
-  'back-out': 'cubic-bezier(0.34,1.56,0.64,1)',
-  'back-in-out': 'cubic-bezier(0.68,-0.6,0.32,1.6)',
-  'elastic': 'cubic-bezier(0.17,0.67,0.33,0.94)',
-  'spring': 'cubic-bezier(0.23,1,0.32,1.01)',
-  'bounce': 'cubic-bezier(0.71,-0.46,0.88,0.6)',
-};
 
 function handleNegative(val, jit) {
   const isNeg = val.endsWith('-negative');

package/src/styles/layout.scss

@@ -26,9 +26,6 @@ body,
 
 }
 
-span, p {
-	line-height: 1;
-}
 
 .field-wrapper {
   transition: border-width .2s, box-shadow .2s ease;

package/src/styles/reset.scss

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@layer reset {
 html, button, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -17,11 +18,12 @@ time, mark, audio, video, textarea, input {
   border: 0;
   font-size: 100%;
   font: inherit;
-  vertical-align: baseline; 
+  vertical-align: baseline;
   color: inherit;
   background: transparent;
-  text-decoration: none; 
+  text-decoration: none;
   -webkit-tap-highlight-color: transparent;
+  line-height: inherit;
 }
 
 a:link, a:visited, a:hover {
@@ -81,4 +83,5 @@ input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
+}
 }