@studio-west/component-sw 0.11.10 → 0.11.11

package/src/components/SwButtonGroup.vue

@@ -0,0 +1,67 @@
+<script setup>
+import {computed, nextTick, onMounted, onUnmounted, ref, watch} from "vue"
+
+const model = defineModel()
+const buttons = ref([])
+const buttonGroup = ref(null)
+const observer = ref(null)
+const props = defineProps({
+  class: {type:String, default: ''},
+  vertical: {type:Boolean, default: false},
+  radio: {type:Boolean, default: false},
+  round: {type:Boolean, default: false},
+})
+const style = computed(() =>{
+  let s = ['sw-button-group']
+  if(props.vertical) s.push('sw-vertical')
+  if(props.round) s.push('sw-round')
+  if(props.class.length > 0) s.push(props.class)
+  return s
+})
+
+onMounted(async () => {
+  await new Promise(resolve => setTimeout(resolve, 0))
+  if (props.radio) findSlotRootElements()
+  if (buttonGroup.value) {
+    observer.value = new MutationObserver(() => {
+      if (props.radio) findSlotRootElements()
+    })
+    observer.value.observe(buttonGroup.value, {
+      childList: true,
+      subtree: true
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (observer.value) {
+    observer.value.disconnect()
+  }
+})
+
+watch(model,() => {
+  if (props.radio) {
+    [].forEach.call(buttons.value, (button, id) => {
+      if (id === model.value) button.classList.remove('sw-text')
+      else button.classList.add('sw-text')
+    })
+  }
+})
+
+const findSlotRootElements = () => {
+  buttons.value = []
+  if (buttonGroup.value) buttons.value = buttonGroup.value.querySelectorAll('button, .sw-button')
+  if (props.radio) {
+    [].forEach.call(buttons.value, (button, id) => {
+      if (model.value !== id) button.classList.add('sw-text');
+      button.addEventListener('click', () => model.value = id)
+    })
+  }
+}
+</script>
+
+<template>
+  <div :class="style" ref="buttonGroup">
+    <slot />
+  </div>
+</template>

package/src/components/SwCollapse.vue

@@ -0,0 +1,36 @@
+<template>
+<div class="sw-collapse" :class="{ open: props.visual }" :style="{ maxHeight: contentHeight }" ref="collapse"><slot></slot></div>
+</template>
+<script setup>
+/**
+ * visual Boolean set opened module
+**/
+import {computed, ref, onMounted, onBeforeUnmount, watch} from "vue"
+onMounted(() => {contentHeight.value = '0px'})
+const collapse = ref(null);
+const props = defineProps({
+  visual: { type: Boolean, default: true }
+})
+watch(() => props.visual, () => updateHeight())
+const contentHeight = ref("0px");
+
+const updateHeight = () => {
+  if (collapse.value) {
+    contentHeight.value = props.visual ? collapse.value.scrollHeight + "px" : "0px"
+  }
+}
+let resizeObserver
+
+onMounted(() => {
+  updateHeight()
+  if (collapse.value) {
+    resizeObserver = new ResizeObserver(updateHeight)
+    resizeObserver.observe(collapse.value)
+  }
+})
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+});
+</script>

package/src/components/SwDatePicker.vue

@@ -0,0 +1,375 @@
+<script setup>
+import {computed, ref} from 'vue'
+import { parseTime, parseDateString } from "@/utils/index.js"
+
+const props = defineProps({
+  data: Object,
+  limitation: {
+    type: [Boolean, Array],
+    default: () => false
+  },
+  range: {
+    type: String,
+    default: 'solid'
+  }
+})
+
+const emit = defineEmits(['input'])
+const year = ref(5)
+// Текущие даты
+const start = ref(new Date())
+const end = ref(new Date())
+
+// Год и месяц для отображения
+const startYear = ref(new Date().getFullYear())
+const startMonth = ref(new Date().getMonth())
+const endYear = ref(new Date().getFullYear())
+const endMonth = ref(new Date().getMonth())
+const nextMonth = ref(new Date(startYear.value, startMonth.value +1, 1).getMonth())
+
+// Дни и индексатор
+const days = ref([])
+const ind = ref(0)
+const startId = ref(-1)
+const endId = ref(-1)
+const locale = ref(navigator.language || 'ru')
+const iso = (/en|zh|ja|he/.test(locale.value)) ? 0 : 1
+const months = computed(() => {
+  return Array.from({ length: 12 }, (_, i) => {
+    const date = new Date(2024, i)
+    return new Intl.DateTimeFormat(locale.value, { month: 'long' }).format(date)
+  })
+})
+const decade = ref(Math.floor(startYear.value / 10) * 10)
+const decades = computed(() => {
+  return Array.from({length:12}, (_,i) => {
+    return decade.value + i - 1
+  })
+})
+
+// Инициализация стартовой и конечной даты
+if (props.data?.startDate) {
+  start.value = new Date(parseDateString(props.data.startDate))
+  startYear.value = start.value.getFullYear()
+  startMonth.value = start.value.getMonth()
+} else if(props.data?.firstDate){
+  startYear.value = new Date(parseDateString(props.data.firstDate)).getFullYear()
+  startMonth.value = new Date(parseDateString(props.data.firstDate)).getMonth()
+  nextMonth.value = new Date(startYear.value, startMonth.value +1, 1).getMonth()
+}
+if (props.data?.endDate && props.range === 'range') {
+  end.value = new Date(parseDateString(props.data.endDate))
+  endYear.value = end.value.getFullYear()
+  endMonth.value = end.value.getMonth()
+}
+
+// Построение календаря
+const view = () => {
+  days.value = []
+  ind.value = 0
+  // console.log('view', year.value)
+  // Предыдущий месяц
+  const preMonth = new Date(startYear.value, startMonth.value, 0)
+  for (let i = preMonth.getDate() - preMonth.getDay() + iso; i <= preMonth.getDate(); i++) {
+    if (preMonth.getDay() !== 6 + iso) {
+      days.value.push({ day: i, month: preMonth.getMonth(), year: preMonth.getFullYear(), class: [] })
+      ind.value++
+    }
+  }
+
+  // Текущий месяц
+  const currentMonthDays = new Date(startYear.value, startMonth.value + 1, 0).getDate()
+  for (let i = 1; i <= currentMonthDays; i++) {
+    days.value.push({ day: i, month: startMonth.value, year: startYear.value, class: [] })
+    ind.value++
+  }
+
+  // Следующий месяц (если диапазон)
+  if (props.range === 'range') {
+    const nextMonthDate = new Date(startYear.value, startMonth.value + 1, 1)
+    const nextMonthLastDay = new Date(startYear.value, startMonth.value + 2, 0).getDate()
+    for (let i = 1; i <= nextMonthLastDay; i++) {
+      days.value.push({ day: i, month: nextMonthDate.getMonth(), year: nextMonthDate.getFullYear(), class: [] })
+    }
+  }
+
+  // Подсветка праздников
+  highlightSpecialDays()
+}
+
+// Подсветка праздников и выходных
+const highlightSpecialDays = () => {
+  if (!props.data?.holiday) return
+
+  const markClass = (dates, className) => {
+    dates.forEach(d => {
+      const [year, month, day] = d.split('-').map(Number)
+      const index = days.value.findIndex(el => el.year === year && el.month + 1 === month && el.day === day)
+      if (index !== -1) days.value[index].class[0] = className
+    })
+  }
+
+  markClass(props.data.holiday.preholidays, 'preholiday')
+  markClass(props.data.holiday.holidays, 'weekend')
+  markClass(props.data.holiday.holiday, 'holiday')
+  markClass(props.data.holiday.nowork, 'nowork')
+}
+
+// Проверка пересечения диапазонов
+const checkOverlap = () => {
+  if (!props.limitation || props.limitation.length < 2) return false
+
+  const sorted = [...props.limitation].sort((a, b) =>
+      new Date(parseDateString(a.startDate)).getTime() - new Date(parseDateString(b.startDate)).getTime()
+  )
+
+  for (let i = 1; i < sorted.length; i++) {
+    const prevEnd = new Date(parseDateString(sorted[i - 1].endDate))
+    const currStart = new Date(parseDateString(sorted[i].startDate))
+    if (currStart <= prevEnd) {
+      console.warn("Warning: Диапазоны пересекаются:", sorted[i - 1], sorted[i])
+      return true
+    }
+  }
+  return false
+}
+
+// Фильтр дат по ограничениям
+const filterData = (year, month, day) => {
+  if (!props.limitation || props.limitation.length === 0) return true
+
+  const targetDate = new Date(year, month, day).getTime()
+
+  for (let range of props.limitation) {
+    const { startDate, endDate } = range
+
+    // Если только endDate
+    if (!startDate && endDate) {
+      const end = new Date(parseDateString(endDate)).getTime()
+      if (targetDate <= end) return false
+    }
+
+    // Если только startDate
+    if (startDate && !endDate) {
+      const start = new Date(parseDateString(startDate)).getTime()
+      if (targetDate >= start) return false
+    }
+
+    // Если обе даты
+    if (startDate && endDate) {
+      const start = new Date(parseDateString(startDate)).getTime()
+      const end = new Date(parseDateString(endDate)).getTime()
+
+      if (start <= end) {
+        // обычный диапазон и одиночный
+        if (targetDate >= start && targetDate <= end) return false
+      } else {
+        // инвертированный диапазон (end < start)
+        if (targetDate >= start || targetDate <= end) return false
+      }
+    }
+  }
+  return true
+}
+
+// Выбор дня
+const selectDays = (day, key) => {
+  const d = parseTime(new Date(day.year, day.month, day.day), '{dd}.{m}.{Y}')
+
+  if (props.range === 'range') {
+    if (endId.value !== -1) {
+      resetSelection()
+      startId.value = key
+      days.value[key].class[1] = 'active'
+    } else {
+      if (startId.value !== -1) {
+        endId.value = key
+        highlightRange(startId.value, endId.value, d)
+      } else {
+        startId.value = key
+        days.value[key].class[1] = 'active'
+      }
+    }
+  } else {
+    if (startId.value !== -1) {
+      days.value[startId.value].class[1] = ''
+    }
+    startId.value = key
+    days.value[key].class[1] = 'active'
+    emit('input', { dateStart: d, count: 1 })
+  }
+}
+
+// Очистка выделения
+const resetSelection = () => {
+  days.value.forEach(day => day.class[1] = '')
+  startId.value = -1
+  endId.value = -1
+}
+
+// Подсветка диапазона
+const highlightRange = (startKey, endKey, endDate) => {
+  let m = parseTime(new Date(days.value[startKey].year, days.value[startKey].month, days.value[startKey].day), '{dd}.{m}.{Y}')
+  if (endKey >= startKey) {
+    for (let i = startKey + 1; i < endKey; i++) {
+      days.value[i].class[1] = 'select'
+    }
+    emit('input', {dateStart: m, dateEnd: endDate, count: countDays(startKey, endKey)})
+  } else {
+    for (let i = endKey + 1; i < startKey; i++) {
+      days.value[i].class[1] = 'select'
+    }
+    emit('input', {dateStart: endDate, dateEnd: m, count: countDays(endKey, startKey)})
+  }
+  days.value[endKey].class[1] = 'active'
+}
+
+// Подсчет рабочих дней
+const countDays = (a, b) => {
+  let count = Math.abs(a - b) + 1
+  let [min, max] = [Math.min(a, b), Math.max(a, b)]
+  for (let i = min; i <= max; i++) {
+    if (days.value[i]?.class[0] === 'holiday') count--
+  }
+  return count
+}
+
+// Изменение месяца
+const change = (years, month) => {
+  if (filterData(years, month)) {
+    start.value = new Date(years, month, 1)
+    startYear.value = start.value.getFullYear()
+    startMonth.value = start.value.getMonth()
+    nextMonth.value = new Date(years, month + 1, 1).getMonth()
+    // console.log("change", year.value)
+    if((props.range === 'year' || props.range === 'decades') && year.value === 0) selectDays({year:years, month, day:1},8)
+    else view()
+  }
+}
+
+// Инициализация
+view()
+
+// Проверка на пересечение диапазонов
+checkOverlap()
+
+// Установка активных дат
+if (props.data?.startDate) {
+  startId.value = days.value.findIndex(el => (
+      el.day === start.value.getDate() &&
+      el.month === startMonth.value &&
+      el.year === startYear.value
+  ))
+  if (startId.value !== -1) days.value[startId.value].class[1] = 'active'
+}
+
+if (props.data?.endDate && props.range === 'range') {
+  endId.value = days.value.findIndex(el => (
+      el.day === end.value.getDate() &&
+      el.month === endMonth.value &&
+      el.year === endYear.value
+  ))
+  if (endId.value !== -1) {
+    days.value[endId.value].class[1] = 'active'
+    for (let i = startId.value + 1; i < endId.value; i++) {
+      days.value[i].class[1] = 'select'
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="sw-data-picker">
+    <div>
+      <p class="month_year" v-if="props.range ==='decades' || year === 3">
+        <span>
+          <button  @click.prevent="decade -= 10;change(startYear,startMonth )"><slot name="double-arrow">«</slot></button>
+        </span>
+        <span  class="text">{{decades[0]}} - {{decades[11]}}</span>
+        <span>
+          <button class="sw-revers" @click.prevent="decade += 10;change(startYear,startMonth )"><slot name="double-arrow">«</slot></button>
+        </span>
+      </p>
+      <p class="month_year" v-else>
+      <span>
+        <button @click.prevent="change(startYear - 1,startMonth)"><slot name="double-arrow">«</slot></button>
+        <button  @click.prevent="year = 0;change(startYear,startMonth - 1)"><slot name="arrow">‹</slot></button>
+      </span>
+        <span  class="text">
+        <button @click.prevent="year = 3">{{ startYear }}</button>
+        <button @click.prevent="year = 1">{{ parseTime(start.setMonth(startMonth), '{F}') }}</button>
+      </span>
+        <span>
+        <button class="sw-revers" @click.prevent="year = 0;change(startYear,startMonth + 1)"><slot name="arrow">‹</slot></button>
+        <button class="sw-revers"  @click.prevent="change(startYear + 1,startMonth)"><slot name="double-arrow">«</slot></button>
+      </span>
+      </p>
+      <div class="week" v-if="!(props.range ==='year' || props.range ==='decades' || year === 1 || year === 3)">
+        <button v-for="(i, key) in 7" :key="key" class="disabled">{{ parseTime(new Date(1970,1,i + iso), '{D}') }}</button>
+      </div>
+      <div class="year" v-if="year !== 3 && props.range ==='year' || year === 1">
+        <template v-for="(month, index) in months" :key="index">
+          <button @click.prevent="year = 0;change(startYear,index)" :class="(index === startMonth)?'active' :''">{{ month }}</button>
+        </template>
+      </div>
+      <div class="year" v-else-if="props.range ==='decades' || year === 3">
+        <template v-for="(y, ind) in decades" :key="ind">
+          <button @click.prevent="year = (props.range ==='year')?1:0;change(y,startMonth)" :class="(decade + ind - 1 === startYear)?'active' :''">{{ y }}</button>
+        </template>
+      </div>
+      <div class="month" v-else>
+        <template v-for="(day, key) in days" :key="key">
+          <button v-if="key < ind + (7 - new Date(startYear,startMonth +1, 1).getDay() + iso) % 7"
+                  :class="(day.month === startMonth && filterData(day.year, day.month, day.day))? day.class : 'disabled'"
+                  @click.prevent="() => {if(day.month === startMonth) selectDays(day,key)}">{{ day.day }}</button>
+        </template>
+      </div>
+    </div>
+    <div v-if="props.range === 'range'">
+      <p class="month_year" v-if="props.range ==='decades' || year === 4">
+        <span>
+          <button  @click.prevent="decade -= 10;change(startYear,startMonth )"><slot name="double-arrow">«</slot></button>
+        </span>
+        <span  class="text">{{decades[0]}} - {{decades[11]}}</span>
+        <span>
+          <button class="sw-revers" @click.prevent="decade += 10;change(startYear,startMonth )"><slot name="double-arrow">«</slot></button>
+        </span>
+      </p>
+      <p class="month_year" v-else>
+      <span>
+        <button @click.prevent="change(startYear - 1,startMonth)"><slot name="double-arrow">«</slot></button>
+        <button @click.prevent="year = 0;change(startYear,startMonth - 1)"><slot name="arrow">‹</slot></button>
+      </span>
+        <span class="text">
+        <button @click.prevent="year = 4">{{ new Date(startYear, (startMonth + 1)).getFullYear()}}</button>
+        <button @click.prevent="year = 2">{{ parseTime(start.setMonth(startMonth +1), '{F}') }}</button>
+      </span>
+        <span>
+        <button class="sw-revers" @click.prevent="year = 0;change(startYear,startMonth + 1)"><slot name="arrow">‹</slot></button>
+        <button class="sw-revers" @click.prevent="change(startYear + 1,startMonth)"><slot name="double-arrow">«</slot></button>
+      </span>
+      </p>
+      <div class="week" v-if="!(year === 2 || year === 4)">
+        <button v-for="(i, key) in 7" :key="key" class="disabled">{{ parseTime(new Date(1970,1,i + iso), '{D}') }}</button>
+      </div>
+      <div class="year" v-if="year === 2">
+        <template v-for="(month, index) in months" :key="index">
+          <button @click.prevent="year = 0;change(startYear,index-1)"  :class="(index === (startMonth + 1) % 12 )?'active' :''">{{ month }}</button>
+        </template>
+      </div>
+      <!-- decades -->
+      <div class="year" v-else-if="year === 4">
+        <template v-for="(y, ind) in decades" :key="ind">
+          <button @click.prevent="year = 0;change(y,startMonth)" :class="(decade + ind - 1 === startYear)?'active' :''">{{ y }}</button>
+        </template>
+      </div>
+      <div class="month" v-else>
+        <template v-for="(day, key) in days" :key="key">
+          <button v-if="key >= ind - (7 + new Date(startYear,startMonth +1, 1).getDay() - iso) % 7"
+                  :class="(day.month === nextMonth && filterData(day.year, day.month, day.day))? day.class :'disabled'"
+                  @click.prevent="() => {if(day.month === nextMonth) selectDays(day,key)}">{{ day.day }}</button>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/SwDropdown.vue

@@ -0,0 +1,202 @@
+<template>
+  <div
+      :class="style"
+      @click="toggleClick()"
+      @mouseover.stop="toggleHover()"
+      @mouseleave.stop="toggleHover()"
+      @contextmenu.stop="toggleContext()"
+      ref="dropdownRef"
+  >
+    <slot></slot>
+    <Teleport to="body">
+      <ul
+          ref="popupRef"
+          :id ="id"
+          class="sw-dropdown-popup"
+          :class="props.class"
+          v-if="manual || false"
+          :style="popupStyle"
+          tabindex="-1"
+      >
+        <slot name="dropdown"></slot>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+/**
+ * class String add class css to popup
+ * size String 'large' | 'small'
+ * type String 'primary' | 'success' | 'info' | 'warning' | 'danger'
+ * trigger String 'click' | 'hover' | 'context' | 'none'
+ * placement String 'bottom-left' | 'bottom' | 'bottom-right' | 'top-left' | 'top' | 'top-right' | 'left' | 'right'
+ **/
+import { computed, ref, onMounted, onUnmounted, watchEffect } from "vue"
+
+const props = defineProps({
+  class: {type: String, default: ''},
+  size: {type: String, default: ''},
+  type: {type: String, default: ''},
+  trigger: {type: String, default: "click"},
+  placement: {type: String, default: 'bottom-left'},
+  maxWidth: {type: Number, default: 0}
+})
+const manual = defineModel()
+
+const dropdownRef = ref(null)
+const popupRef = ref(null)
+const popupStyle = ref({})
+const id = Math.ceil(Math.random() * 1000)
+const repositionTrigger = ref(0)
+const style = computed(() =>{
+      let s = ['sw-dropdown']
+      if(props.size.length > 0) s.push('sw-' + props.size)
+      if(props.type.length > 0) s.push('sw-' + props.type)
+      return s
+    }
+)
+const resizeObserver = new ResizeObserver(() => {
+  if (manual.value) repositionTrigger.value++
+  if(repositionTrigger.value > 99 ) repositionTrigger.value = 1
+})
+
+watchEffect( () => {
+ // console.log('watchEffect', repositionTrigger.value)
+  // Если popup не активен — ничего не делаем
+  if (!manual.value || !popupRef.value || !dropdownRef.value) {
+    // popupStyle.value = {}
+    return
+  }
+  if(repositionTrigger.value < 2) resizeObserver.observe(popupRef.value)
+  // repositionTrigger.value
+  let scrollTop = window.pageYOffset || document.documentElement.scrollTop
+  let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+  document.body.style.position = 'fixed'
+  document.body.style.top = `-${scrollTop}px`
+  document.body.style.left = `-${scrollLeft}px`
+  document.body.style.position = ''
+  document.body.style.top = ''
+  document.body.style.left = ''
+  document.documentElement.scrollTop = scrollTop
+  document.documentElement.scrollLeft = scrollLeft
+  const buttonRect = dropdownRef.value.getBoundingClientRect()
+  let viewportWidth = window.innerWidth
+  let viewportHeight = window.innerHeight
+  // Получаем высоту и ширину popup
+  let popupHeight = popupRef.value.offsetHeight;
+  let popupWidth = popupRef.value.offsetWidth;
+  // Расчет позиции popup (например, снизу кнопки)
+  // Центр по горизонтали
+  let left = buttonRect.left + (buttonRect.width / 2)  + scrollLeft
+  // Центр по вертикали
+  let top = buttonRect.top + (buttonRect.height / 2) + scrollTop
+  let deltaTop = (buttonRect.height / 2) + 8
+  const [mainPlacement, subPlacement] = props.placement.split('-', 2)
+
+  // Основное позиционирование
+  switch (mainPlacement) {
+    case "bottom":
+      top = (scrollTop + viewportHeight - popupHeight - deltaTop - 8 < top)? top - deltaTop - popupHeight : top + deltaTop
+      if(subPlacement === undefined ) left -= popupWidth / 2
+      break
+    case "top":
+      top = (scrollTop + popupHeight + deltaTop + 8 > top)? top + deltaTop : top - deltaTop - popupHeight
+      if(subPlacement === undefined ) left -= popupWidth / 2
+      break
+    case "left":
+      if(left - popupWidth - (buttonRect.width / 2) - 8 < 0) {
+        if(left + (buttonRect.width / 2) + 8 + popupWidth < viewportWidth) { // справа
+          left = left + (buttonRect.width / 2) + 8
+          top = top - (popupHeight / 2)
+        } else {
+          top = (scrollTop + popupHeight + deltaTop + 8 > top)? top + deltaTop : top - deltaTop - popupHeight
+          left = (left + (buttonRect.width / 2)  < viewportWidth )? left + (buttonRect.width / 2) - popupWidth: left - (popupWidth / 2)
+          // left = ( buttonRect.width / 2 > popupWidth) ? left + 8 : left + 8 - (buttonRect.width / 2)
+        }
+      } else { // слева
+        left = left - popupWidth - (buttonRect.width / 2) - 8
+        top = top - (popupHeight / 2)
+      }
+      break
+    case "right":
+      if(left + (buttonRect.width / 2) + 8 + popupWidth > viewportWidth ) {
+        if(left - popupWidth - (buttonRect.width / 2) - 8 > 0){
+          left = left - popupWidth - (buttonRect.width / 2) - 8 // слева
+          top = top - (popupHeight / 2)
+        } else {
+          top = (scrollTop + popupHeight + deltaTop + 8 > top)? top + deltaTop : top - deltaTop - popupHeight
+          // left = (scrollLeft + viewportWidth - 8 > left - (buttonRect.width / 2) + popupWidth) ? left - (buttonRect.width / 2) : left - popupWidth + (buttonRect.width / 2)
+          left = left - (buttonRect.width / 2) // влево
+        }
+      } else { // справа
+        left = left + (buttonRect.width / 2) + 8
+        top = top - (popupHeight / 2)
+      }
+      break
+  }
+  switch (subPlacement) {
+    case 'left':
+      left = (scrollLeft + viewportWidth - 8 > left - (buttonRect.width / 2) + popupWidth) ? left - (buttonRect.width / 2) : left - popupWidth + (buttonRect.width / 2)
+      break
+    case 'right':
+      left = (8< left + (buttonRect.width / 2) - popupWidth) ? left - popupWidth + (buttonRect.width / 2) : left - (buttonRect.width / 2)
+      break
+  }
+  // Убедимся, что попап не выходит за экран
+  // if (left + popupWidth > viewportWidth) left = viewportWidth - popupWidth
+  if (left < 0) left = 0
+  // if (top + popupHeight > viewportHeight) top = viewportHeight - popupHeight
+  if (top < 0) top = 0
+
+  popupStyle.value = {
+    position: 'absolute',
+    top: `${top}px`,
+    left: `${left}px`,
+    maxWidth: props.maxWidth > 0 ? `${props.maxWidth}px` : ''
+  }
+}, {flush: 'post'}
+)
+
+const toggleClick = () => {
+  if(props.trigger === 'click') manual.value = !manual.value
+  //if(!manual.value) console.log("toggleClick")
+}
+const toggleHover = () => {
+  if(props.trigger === 'hover') manual.value = !manual.value
+  //if(!manual.value) console.log("toggleHover")
+}
+const toggleContext = () => {
+  if (props.trigger === 'context') manual.value = !manual.value
+  //if(!manual.value) console.log("toggleContext")
+}
+const handleResize = () => {
+  if (manual.value) repositionTrigger.value++
+  if(repositionTrigger.value > 99 ) repositionTrigger.value = 1
+  // console.log("positionPopup", repositionTrigger.value)
+}
+defineExpose({ handleResize })
+const handleClickOutside = (e) => {
+  if(props.trigger !=='none' && !e.target.closest(`[id="${id}"]`) && (dropdownRef.value && !dropdownRef.value.contains(e.target))) manual.value = false
+  //if(!manual.value) console.log("Outside", dropdownRef.value.contains(e.target))
+}
+onMounted(() => {
+  //console.log("onMounted")
+  window.addEventListener("resize", handleResize)
+  if (document.documentElement.ontouchstart !== undefined) document.documentElement.addEventListener("touchstart", handleClickOutside, true)
+  else document.documentElement.addEventListener("click", handleClickOutside, true)
+  if (window.onscrollend !== undefined) window.addEventListener("scrollend", handleResize)
+  else window.addEventListener("scroll", handleResize)
+})
+
+onUnmounted(() => {
+  //console.log("onUnmounted")
+  resizeObserver.disconnect()
+  window.removeEventListener("resize", handleResize)
+  if (document.documentElement.ontouchstart !== undefined) document.documentElement.removeEventListener("touchstart", handleClickOutside)
+  else document.documentElement.removeEventListener("click", handleClickOutside)
+  if (window.onscrollend !== undefined) window.removeEventListener("scrollend", handleResize)
+  else window.removeEventListener("scroll", handleResize)
+})
+
+</script>