adata-ui 0.3.98 → 2.0.0

package/components/overlays/modal/AModal.vue

@@ -0,0 +1,332 @@
+<script setup lang="ts">
+
+import { twJoin, twMerge } from 'tailwind-merge'
+import { onClickOutside, useWindowSize } from '@vueuse/core'
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+
+const uiConfig = {
+  wrapper: 'modal-wrapper relative z-[10001]',
+  overlay: {
+    base: 'fixed inset-0 transition-opacity ',
+    background: "bg-deepblue-900/20 dark:bg-white/20 backdrop-blur",
+    transition: {
+      'enter-active-class': "ease-out duration-300",
+      'enter-from-class': "opacity-0",
+      'enter-to-class': "opacity-100",
+      'leave-active-class': "ease-in duration-200",
+      'leave-from-class': "opacity-100",
+      'leave-to-class': "opacity-0"
+    },
+  },
+  base: 'base-modal max-h-full fixed text-deepblue-900 dark:text-gray-200 text-left rtl:text-right flex flex-col max-w-full sm:max-h-[calc(100%-48px)]',
+  position: 'top-1/2 left-1/2 translate-y-[-50%] translate-x-[-50%]',
+  padding: "p-8",
+  background: "bg-white dark:bg-gray-900",
+  rounded: "rounded-lg",
+  fullscreen: "w-screen h-screen rounded-none",
+  mobile: {
+    width: "w-screen",
+    position: "bottom-0 left-0 transition-transform",
+    padding: 'px-4 sm:pb-8 pb-4 pt-3',
+    rounded: "rounded-t-2xl"
+  },
+  transition: {
+    desktop: {
+      'enter-active-class': "ease-out duration-300",
+      'enter-from-class': "opacity-0 bg",
+      'enter-to-class': "opacity-100",
+      'leave-active-class': "ease-in duration-200",
+      'leave-from-class': "opacity-100",
+      'leave-to-class': "opacity-0"
+    },
+    mobile: {
+      'enter-active-class': "transition-transform ease-in-out duration-300",
+      'leave-active-class': "transition-transform ease-in-out duration-200",
+      'enter-from-class': "translate-y-[100%]",
+      'leave-to-class': "translate-y-[100%]"
+    }
+  }
+}
+
+interface Props {
+  title?: string
+  transition?: boolean
+  overlay?: boolean
+  preventClose?: boolean
+  fullscreen?: boolean
+  name?: string
+  isScrollable?: boolean
+  width?: string | number
+  heightModalClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  transition: true,
+  overlay: true,
+  preventClose: false,
+  fullscreen: false,
+  isScrollable: false,
+  name: 'modal',
+  width: 424,
+  heightModalClass: '',
+})
+const content = ref()
+
+const emit = defineEmits(['close'])
+
+const slots = useSlots()
+
+const {width} = useWindowSize()
+const modelValue = defineModel<boolean>()
+let teleportContainer: HTMLBodyElement | HTMLDivElement | undefined
+const modal = ref<HTMLDivElement | null>(null)
+
+const isMobile = computed(() => width.value < 1025)
+
+const wrapperClasses = uiConfig.wrapper
+const overlayClasses = computed(() => !props.overlay || twMerge(twJoin(uiConfig.overlay.base, uiConfig.overlay.background)))
+const baseClasses = computed(() => twMerge(twJoin(
+  uiConfig.base,
+  uiConfig.background,
+  props.heightModalClass,
+  props.fullscreen ? uiConfig.fullscreen : '',
+  isMobile.value ? uiConfig.mobile.padding : uiConfig.padding,
+  isMobile.value ? uiConfig.mobile.rounded : uiConfig.rounded,
+  isMobile.value ? uiConfig.mobile.width : '',
+  isMobile.value ? uiConfig.mobile.position : uiConfig.position
+)))
+const transitionClasses = computed(() => {
+  return {
+    overlay: props.transition ? uiConfig.overlay.transition : {},
+    base: props.transition ? (!isMobile.value ? uiConfig.transition.desktop : uiConfig.transition.mobile) : {}
+  }
+})
+
+const modalStyles = computed(() => {
+  if (props.fullscreen || isMobile.value) return
+  return ` width: ${props.width}${typeof props.width === 'number' ? 'px' : ''}`;
+})
+
+const onClose = () => {
+  modelValue.value = false
+  emit('close')
+}
+
+onClickOutside(modal, () => props.preventClose || onClose())
+
+type Slot = 'footer' | 'header'
+
+const hasSlot = (name: Slot): boolean => {
+  return Boolean(slots[name])
+}
+
+const hasFooter = computed(() => {
+  return hasSlot('footer')
+})
+
+const hasHeader = computed(() => {
+  return props.title || hasSlot('header')
+})
+
+const hasContent = computed(() => {
+  return Boolean(slots.default)
+})
+
+onBeforeMount(() => {
+  const alreadyCreatedTarget = document.getElementById(props.name)
+  if (alreadyCreatedTarget) return
+  teleportContainer = document.createElement('div')
+  teleportContainer.setAttribute('id', props.name)
+  document.body.appendChild(teleportContainer)
+})
+
+
+// Mobile swipe close
+
+const positionStart = ref<number>(0)
+const isClose = ref<boolean>(false)
+const modalHeight = ref(0)
+
+const touchstart = (event: TouchEvent) => {
+  isClose.value = false
+  positionStart.value = event.touches[0].clientY
+  modalHeight.value = modal.value?.offsetHeight || 0 // Запоминаем текущую высоту модалки
+}
+
+const touchmove = (event: TouchEvent) => {
+  if (!isMobile.value) return;
+  event.preventDefault();
+  const touchPosition = event.touches[0].clientY
+  const step = touchPosition - positionStart.value
+
+  if (step < 0) return // предотвратить движение вверх
+
+  const newHeight = modalHeight.value - step
+  modal.value.style.height = `${newHeight}px`
+  isClose.value = step > 65
+}
+
+
+const touchend = () => {
+  if (isClose.value) {
+    onClose()
+  } else {
+    modal.value.style.height = `${modalHeight.value}px`
+  }
+}
+const toggleBodyScroll = (lock: boolean) => {
+  if (!content.value) return
+  if (lock) {
+    setTimeout(() => {
+      disableBodyScroll(content.value, {
+        reserveScrollBarGap: true,
+        allowTouchMove: (el: EventTarget | null): boolean => {
+          return el && modal.value?.contains(el as Node);
+        },
+        // allowTouchMove: (el: EventTarget | null): boolean => {
+        //   if (!el || !content.value) return false;
+        //
+        //   // Функция проверки, есть ли у элемента вертикальный скролл
+        //   const hasScroll = (el: HTMLElement | null): boolean => {
+        //     if (!el) return false;
+        //     return el.scrollHeight > el.clientHeight;
+        //   };
+        //
+        //   // Функция поиска блока с position: absolute
+        //   const findAbsoluteBlock = (el: HTMLElement | null): HTMLElement | null => {
+        //     while (el && el !== content.value) {
+        //       const style = window.getComputedStyle(el);
+        //       if (style.position === 'absolute') return el; // Возвращаем найденный absolute-элемент
+        //       el = el.parentElement;
+        //     }
+        //     return null;
+        //   };
+        //
+        //   // Проверяем, есть ли у родителя absolute-позиционирование
+        //   const someParentHasScroll = (el: HTMLElement | null, maxParentEl: HTMLElement | null): boolean => {
+        //     while (el && maxParentEl && el !== maxParentEl) {
+        //       if (hasScroll(el)){
+        //         return true
+        //       } // Если нашли родителя со скроллом, возвращаем true
+        //       el = el?.parentElement;
+        //     }
+        //     return false; // Если не нашли, возвращаем false
+        //   };
+        //
+        //   const absoluteBlock = findAbsoluteBlock(el as HTMLElement);
+        //
+        //
+        //   // Проверяем наличие скролла у основного контента
+        //   const contentHasScroll = hasScroll(content.value);
+        //
+        //   // Проверка на то, что элемент находится внутри модального контента
+        //   const isInsideModal = content.value.contains(el as Node);
+        //
+        //
+        //   return (contentHasScroll && isInsideModal) || (isInsideModal && absoluteBlock && someParentHasScroll(el, absoluteBlock));
+        // }
+        //
+
+      })
+    }, 0)
+
+  } else {
+    enableBodyScroll(content.value)
+  }
+}
+
+watch(modelValue, async (newValue) => {
+  if (newValue) {
+    await nextTick()
+    toggleBodyScroll(true)
+  } else {
+    toggleBodyScroll(false)
+  }
+})
+</script>
+
+<template>
+  <client-only>
+    <teleport :to="`#${name}`">
+      <div
+        :class="wrapperClasses"
+      >
+        <Transition
+          name="overlay"
+          v-bind="transitionClasses.overlay"
+        >
+          <div
+            v-show="modelValue"
+            ref="overlay"
+            :class="overlayClasses"
+          />
+        </Transition>
+        <Transition
+          name="modal"
+          v-bind="transitionClasses.base"
+        >
+          <div
+            v-if="modelValue"
+            class="fixed overflow-y-auto inset-0"
+          >
+            <div
+              ref="modal"
+              :class="baseClasses"
+              :style="modalStyles"
+            >
+              <div
+                v-if="isMobile"
+                class="w-full flex justify-center items-center -mt-3 pt-3 mb-2"
+                @touchmove="touchmove"
+                @touchstart="touchstart"
+                @touchend="touchend"
+              >
+                <div class="h-1 w-10 bg-[#D9D9D9] rounded m-1" />
+              </div>
+              <div
+                class="flex flex-col gap-5"
+                :class="isScrollable ? 'overflow-x-hidden': ''"
+              >
+                <div
+                  v-if="hasHeader"
+                  class="top"
+                >
+                  <h4
+                    v-if="title"
+                    class="heading-02 text-center"
+                    @touchmove="touchmove"
+                    @touchstart="touchstart"
+                    @touchend="touchend"
+                  >
+                    {{ title }}
+                  </h4>
+                  <div v-if="!!$slots.header">
+                    <slot name="header" />
+                  </div>
+                </div>
+                <div
+                  v-if="hasContent"
+                  class="grow"
+                  ref="content"
+                  :class="isScrollable ? 'overflow-x-hidden': ''"
+                >
+                  <slot />
+                </div>
+                <div
+                  v-if="hasFooter"
+                >
+                  <slot name="footer" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </teleport>
+  </client-only>
+</template>
+
+<style scoped>
+
+</style>

package/components/overlays/sideover/ASlideover.vue

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+
+import { twJoin, twMerge } from 'tailwind-merge'
+import { onClickOutside, useWindowSize } from '@vueuse/core'
+import {disableBodyScroll, enableBodyScroll} from "body-scroll-lock";
+
+const uiConfig = {
+  wrapper: 'modal-wrapper relative z-[10000]',
+  inner: 'modal-inner fixed inset-0 overflow-y-auto',
+  overlay: {
+    base: 'fixed inset-0 transition-opacity',
+    background: 'bg-deepblue-900/20 dark:bg-gray-800/20 blur-lg',
+    transition: {
+      'enter-active-class': 'ease-out duration-300',
+      'enter-from-class': 'opacity-0',
+      'enter-to-class': 'opacity-100',
+      'leave-active-class': 'ease-in duration-200',
+      'leave-from-class': 'opacity-100',
+      'leave-to-class': 'opacity-0'
+    }
+  },
+  base: 'base-modal  fixed  transition-transform max-w-full overflow-auto',
+  'base-container': 'text-deepblue-900 dark:text-gray-200 flex flex-col gap-5 bg-white dark:bg-gray-900 h-full w-full',
+  before: {
+    base: 'absolute cursor-col-resize',
+    position: {
+      top: 'hidden',
+      left: 'top-0 right-0 h-full w-1',
+      right: 'top-0 left-0 h-full w-1',
+      bottom: 'hidden'
+    }
+  },
+  position: {
+    top: 'top-0 left-0 w-full',
+    left: 'top-0 left-0 h-full',
+    right: 'top-0 right-0 h-full',
+    bottom: 'bottom-0 left-0 w-full'
+  },
+  rounded: {
+    top: 'rounded-b-lg',
+    bottom: 'rounded-t-lg',
+    left: 'rounded-r-lg',
+    right: 'rounded-l-lg'
+  },
+  fullscreen: 'w-screen h-screen rounded-none',
+  transition: {
+    'enter-active-class': 'transition transform ease-in-out duration-300',
+    'leave-active-class': 'transition transform ease-in-out duration-200',
+    'enter-from-class': {
+      top: 'translate-y-[-100%]',
+      left: 'translate-x-[-100%]',
+      right: 'translate-x-[100%]',
+      bottom: 'translate-y-[100%]'
+    },
+    'leave-to-class': {
+      top: 'translate-y-[-100%]',
+      left: 'translate-x-[-100%]',
+      right: 'translate-x-[100%]',
+      bottom: 'translate-y-[100%]'
+    }
+  }
+}
+
+interface Props {
+  title?: string
+  transition?: boolean
+  overlay?: boolean
+  preventClose?: boolean
+  fullscreen?: boolean
+  name?: string
+  size?: string | number
+  position?: 'top' | 'left' | 'right' | 'bottom'
+  resizable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  transition: true,
+  overlay: true,
+  preventClose: false,
+  fullscreen: false,
+  name: 'slideover',
+  size: 424,
+  position: 'right',
+  resizable: false
+})
+
+const slots = useSlots()
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 640)
+
+
+const modelValue = defineModel<boolean>()
+
+let teleportContainer: HTMLBodyElement | HTMLDivElement | undefined
+const slideover = ref<HTMLDivElement | null>(null)
+
+const wrapperClasses = uiConfig.wrapper
+const innerClasses = uiConfig.inner
+const baseContainerClasses = uiConfig['base-container']
+const overlayClasses = computed(() => !props.overlay || twMerge(twJoin(uiConfig.overlay.base, uiConfig.overlay.background)))
+const beforeClasses = computed(() => twMerge(twJoin(
+  uiConfig.before.base,
+  props.resizable ? uiConfig.before.position[props.position] : 'hidden'
+)))
+const baseClasses = computed(() => twMerge(twJoin(
+  uiConfig.base,
+  uiConfig.rounded[props.position],
+  uiConfig.position[props.position],
+  props.fullscreen ? uiConfig.fullscreen : ''
+)))
+const transitionClasses = computed(() => {
+  return {
+    overlay: props.transition ? uiConfig.overlay.transition : {},
+    base: props.transition ? {
+      ...uiConfig.transition,
+      'enter-from-class': uiConfig.transition['enter-from-class'][props.position],
+      'leave-to-class': uiConfig.transition['leave-to-class'][props.position]
+    } : {}
+  }
+})
+
+const slideoverSize = computed(() => {
+  let sideType = 'height'
+  if (['left', 'right'].includes(props.position)) {
+    sideType = 'width'
+  }
+  if (props.fullscreen) return
+  return ` ${sideType}: ${props.size}${typeof props.size === 'number' ? 'px' : ''}`
+})
+
+const onClose = () => {
+  modelValue.value = false
+}
+
+onClickOutside(slideover, () => props.preventClose || onClose())
+
+
+type Slot = 'footer' | 'header' | 'content'
+
+const hasSlot = (name: Slot): boolean => {
+  return Boolean(slots[name])
+}
+
+const hasFooter = computed(() => {
+  return hasSlot('footer')
+})
+
+const hasHeader = computed(() => {
+  return props.title || hasSlot('header')
+})
+
+const hasContent = computed(() => {
+  return Boolean(slots.default)
+})
+
+onBeforeMount(() => {
+  const alreadyCreatedTarget = document.getElementById(props.name)
+  if (alreadyCreatedTarget) return
+  teleportContainer = document.createElement('div')
+  teleportContainer.setAttribute('id', props.name)
+  document.body.appendChild(teleportContainer)
+})
+
+
+// resize
+const BORDER_SIZE = 4
+let M_POS: number
+const C_POS = ref<number>(-1)
+
+const onResize = (e: MouseEvent) => {
+  const panel = slideover.value
+  if (!panel) return
+
+  let size: number
+  const dx = M_POS - e.x
+  M_POS = e.x
+
+  if (props.position === 'left') {
+    size = (parseInt(getComputedStyle(panel, '').width) - dx)
+  } else if (props.position === 'right') {
+    size = (parseInt(getComputedStyle(panel, '').width) + dx)
+  }
+
+  if (size >= initialWith.value) {
+    C_POS.value = size
+    panel.style.width = size + 'px'
+  }
+}
+
+const onMouseDown = (e: MouseEvent) => {
+  if (!process.client && !props.resizable) return
+
+  if (['left', 'right'].includes(props.position) && e.offsetX < BORDER_SIZE) {
+    M_POS = e.x
+    document.addEventListener('mousemove', onResize, false)
+  }
+}
+
+const onMouseUp = () => {
+  if (!process.client && !props.resizable) return
+
+  document.removeEventListener('mousemove', onResize, false)
+}
+
+const initialWith = computed<number>(() => {
+  if (typeof props.size === 'number') return props.size
+  return parseInt(props.size.replace('px', ''))
+})
+
+
+
+// Mobile swipe close
+
+const positionStart = ref<number>(0)
+const isClose = ref<boolean>(false)
+const modalHeight = ref(0)
+
+const touchstart = (event: TouchEvent) => {
+  isClose.value = false
+  positionStart.value = event.touches[0].clientY
+  modalHeight.value = slideover.value?.offsetHeight || 0 // Запоминаем текущую высоту модалки
+}
+
+const touchmove = (event: TouchEvent) => {
+  if (!isMobile.value) return;
+  event.preventDefault();
+  const touchPosition = event.touches[0].clientY
+  const step = touchPosition - positionStart.value
+
+  if (step < 0) return // предотвратить движение вверх
+
+  const newHeight = modalHeight.value - step
+  slideover.value.style.height = `${newHeight}px`
+  isClose.value = step > 65
+}
+
+const touchend = () => {
+  if (isClose.value) {
+    onClose()
+  } else {
+    slideover.value.style.height = `${modalHeight.value}px`
+  }
+}
+const toggleBodyScroll = (lock: boolean) => {
+  if (!slideover.value) return
+  if (lock) {
+    setTimeout(() => {
+      disableBodyScroll(slideover.value, {
+        reserveScrollBarGap: true,
+        allowTouchMove: (el: EventTarget | null): boolean => {
+          return el && slideover.value?.contains(el as Node);
+        }
+      })
+    }, 0)
+
+  } else {
+    enableBodyScroll(slideover.value)
+  }
+}
+
+watch(modelValue, async (newValue) => {
+  if (newValue) {
+    await nextTick()
+    toggleBodyScroll(true)
+  } else {
+    toggleBodyScroll(false)
+  }
+})
+</script>
+
+<template>
+  <client-only>
+    <teleport :to="`#${name}`">
+      <div
+        :class="wrapperClasses"
+      >
+        <Transition
+          name="overlay"
+          v-bind="transitionClasses.overlay"
+        >
+          <div
+            v-show="modelValue"
+            :class="overlayClasses"
+          />
+        </Transition>
+        <Transition
+          name="slideover"
+          v-bind="transitionClasses.base"
+        >
+          <div
+            v-if="modelValue"
+            :class="innerClasses"
+          >
+            <div
+              ref="slideover"
+              :class="baseClasses"
+              :style="slideoverSize"
+              @mousedown="onMouseDown"
+              @mouseup="onMouseUp"
+            >
+              <div :class="beforeClasses" />
+              <div :class="baseContainerClasses">
+                <div
+                  v-if="isMobile && position === 'bottom'"
+                  class="w-full flex justify-center items-center mb-2 pt-2 absolute cursor-row-resize "
+                  @touchmove="touchmove"
+                  @touchstart="touchstart"
+                  @touchend="touchend"
+                >
+                  <div class="h-1 w-10 bg-[#D9D9D9] rounded m-1" />
+                </div>
+                <div
+                  v-if="hasHeader"
+                  class="top mt-4"
+                  @touchmove="touchmove"
+                  @touchstart="touchstart"
+                  @touchend="touchend">
+                  <h4
+                    v-if="title"
+                    class="heading-02 text-center"
+                  >
+                    {{ title }}
+                  </h4>
+                  <div v-if="!!$slots.header">
+                    <slot name="header" />
+                  </div>
+                </div>
+                <div
+                  v-if="hasContent"
+                  class="grow"
+                >
+                  <slot />
+                </div>
+                <div
+                  v-if="hasFooter"
+                >
+                  <slot name="footer" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </teleport>
+  </client-only>
+</template>
+
+<style scoped>
+
+</style>