adata-ui 0.3.98 → 2.0.0

package/components/overlays/tooltip/ATooltip.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+
+import {twJoin, twMerge} from "tailwind-merge"
+
+const uiConfig = {
+  wrapper: 'relative',
+  container: {
+    base: 'group absolute',
+    zIndex: 'z-[999]',
+    placement: {
+      top: '-top-1 left-1/2',
+      bottom: '-bottom-1 left-1/2',
+      left: '-left-1 top-1/2',
+      right: '-right-1 top-1/2'
+    }
+  },
+  width: 'max-w-xs',
+  background: 'bg-deepblue-900 dark:bg-gray-50',
+  backgroundError: 'bg-[#FAD9D7] dark:bg-[#4F393A]',
+  color: 'text-white dark:text-deepblue-900',
+  colorError: 'text-[#E74135] dark:text-[#F47E75]',
+  rounded: 'rounded-md',
+  base: 'text-xs font-normal absolute',
+  padding: {
+    sm: 'px-4 py-2',
+    md: 'px-4 py-4'
+  },
+  placement: {
+    top: {
+      start: 'bottom-[1px] left-[-13px]',
+      center: 'bottom-[1px] left-1/2 transform translate-x-[-50%]',
+      end: 'bottom-[1px] right-[-13px]'
+    },
+    bottom: {
+      start: 'top-[1px] left-[-13px]',
+      center: 'top-[1px] left-1/2 transform translate-x-[-50%]',
+      end: 'top-[1px] right-[-13px]'
+    },
+    left: {
+      start: 'right-[1px] top-[-13px]',
+      center: 'right-[1px] top-1/2 transform translate-y-[-50%]',
+      end: 'right-[1px] bottom-[-13px]'
+    },
+    right: {
+      start: 'left-[1px] top-[-13px]',
+      center: 'left-[1px] top-1/2 transform translate-y-[-50%]',
+      end: 'left-[1px] bottom-[-13px]'
+    }
+  },
+  transition: {
+    enterActiveClass: 'transition ease-out duration-200',
+    enterFromClass: 'opacity-0 translate-y-1',
+    enterToClass: 'opacity-100 translate-y-0',
+    leaveActiveClass: 'transition ease-in duration-150',
+    leaveFromClass: 'opacity-100 translate-y-0',
+    leaveToClass: 'opacity-0 translate-y-1'
+  },
+  popper: {
+    strategy: 'absolute',
+    base: 'invisible before:visible before:block before:absolute before:rotate-45 before:z-19 before:w-3 before:h-3',
+    rounded: 'before:rounded-sm',
+    background: 'before:bg-deepblue-900 dark:before:bg-gray-50',
+    backgroundError: 'before:bg-[#FAD9D7] dark:before:dark:bg-[#4F393A]',
+    placement: {
+      top: 'bottom-0 before:bottom-[-2px] before:left-[-6px]',
+      bottom: 'top-0 before:top-[-2px] before:left-[-6px]',
+      left: 'right-0 before:right-[-2px] before:top-[-6px]',
+      right: 'left-0 before:left-[-2px] before:top-[-6px]'
+    }
+  },
+}
+
+interface Props {
+  text?: string
+  header?: string
+  openDelay?: number
+  closeDelay?: number
+  prevent?: boolean
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  popper?: boolean
+  popperPosition?: 'start' | 'center' | 'end'
+  size?: 'sm' | 'md'
+  zIndex?: number
+  truncate?: boolean
+  errorParsing?: boolean
+  parent?: HTMLElement
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: '',
+  header: '',
+  openDelay: 0,
+  closeDelay: 0,
+  prevent: false,
+  placement: 'top',
+  popper: true,
+  popperPosition: 'start',
+  size: 'md',
+  truncate: true,
+  errorParsing: false
+})
+
+const slots = useSlots()
+const body = ref<HTMLElement | null>(null)
+
+const open = ref(false)
+let openTimeout: NodeJS.Timeout | null = null
+let closeTimeout: NodeJS.Timeout | null = null
+
+const popperPosition = ref(props.popperPosition)
+
+const wrapperClasses = uiConfig.wrapper
+const containerClasses = computed(() => twMerge(twJoin(
+  uiConfig.container.base,
+  uiConfig.container.placement[props.placement],
+  uiConfig.width,
+  props.zIndex ? '' : uiConfig.container.zIndex
+)))
+const poperClasses = computed(() => twMerge(twJoin(
+  uiConfig.popper.strategy,
+  uiConfig.popper.base,
+  uiConfig.popper.rounded,
+  props.errorParsing ? uiConfig.popper.backgroundError : uiConfig.popper.background,
+  uiConfig.popper.placement[props.placement]
+)))
+const baseClasses = computed(() => twMerge(twJoin(
+  uiConfig.base,
+  props.errorParsing ? uiConfig.backgroundError : uiConfig.background,
+  props.errorParsing ? uiConfig.colorError : uiConfig.color,
+  uiConfig.rounded,
+  uiConfig.placement[props.placement][popperPosition.value],
+  uiConfig.padding[props.size],
+  props.truncate ? 'truncate' : 'max-w-[530px] w-max'
+)))
+const transitionClasses = uiConfig.transition
+
+const containerStyles = computed(() => {
+  return {
+    zIndex: props.zIndex
+  }
+})
+
+
+const hasSlot = (name: string): boolean => {
+  return Boolean(slots[name])
+}
+
+const hasHeader = computed(() => hasSlot('header') || Boolean(props.header))
+
+function onMouseEnter(e) {
+  if (props.parent) {
+    const parent = props.parent.getBoundingClientRect()
+    const target = e.target
+
+    setTimeout(() => {
+      if (body.value) {
+        let left = parent.width - (target.offsetLeft + (target.clientWidth / 2) + body.value.offsetWidth)
+
+        if (left < 0) {
+          popperPosition.value = 'end'
+        }
+      }
+    })
+  }
+}
+
+const onMouseOver = (e) => {
+  if (closeTimeout) {
+    clearTimeout(closeTimeout)
+    closeTimeout = null
+  }
+  if (open.value) {
+    return
+  }
+
+  openTimeout = openTimeout || setTimeout(() => {
+    open.value = true
+    openTimeout = null
+  }, props.openDelay)
+}
+
+const onMouseLeave = () => {
+  if (openTimeout) {
+    clearTimeout(openTimeout)
+    openTimeout = null
+  }
+  if (!open.value) {
+    return
+  }
+  closeTimeout = closeTimeout || setTimeout(() => {
+    open.value = false
+    closeTimeout = null
+  }, props.closeDelay)
+}
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="wrapperClasses"
+    @mouseover="onMouseOver"
+    @mouseleave="onMouseLeave"
+    @mouseenter="onMouseEnter"
+  >
+    <slot :open="open">
+      Hover
+    </slot>
+    <Transition
+      appear
+      v-bind="transitionClasses"
+    >
+      <div
+        v-if="open && !prevent"
+        :class="containerClasses"
+        :style="containerStyles"
+      >
+        <div
+          v-if="popper"
+          :class="poperClasses"
+        />
+        <div :class="baseClasses" ref="body">
+          <div
+            v-if="hasHeader"
+            class="font-semibold mb-1"
+          >
+            <slot name="header">
+              <p>{{ header }}</p>
+            </slot>
+          </div>
+
+          <slot name="content">
+            {{ text }}
+          </slot>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/transitions/ATransitionHeight.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import ui from "#adata-ui/components/elements/accordion/AAccordionGroup/ui.config";
+import { twMerge } from 'tailwind-merge'
+
+const props = defineProps<{
+  transition?: {
+    enterActiveClass?: string
+    leaveActiveClass?: string
+  }
+}>()
+
+const mergedUi = computed(() => ({
+  transition: {
+    enterActiveClass: twMerge(
+      ui.transition.enterActiveClass,
+      props.transition?.enterActiveClass
+    ),
+    leaveActiveClass: twMerge(
+      ui.transition.leaveActiveClass,
+      props.transition?.leaveActiveClass
+    )
+  }
+}))
+
+function onEnter(_el: Element, done: () => void) {
+  const el = _el as HTMLElement
+  el.style.height = '0'
+  el.offsetHeight // Trigger a reflow, flushing the CSS changes
+  el.style.height = el.scrollHeight + 'px'
+
+  el.addEventListener('transitionend', done, {once: true})
+}
+
+function onBeforeLeave(_el: Element) {
+  const el = _el as HTMLElement
+  el.style.height = el.scrollHeight + 'px'
+  el.offsetHeight // Trigger a reflow, flushing the CSS changes
+}
+
+function onAfterEnter(_el: Element) {
+  const el = _el as HTMLElement
+  el.style.height = 'auto'
+}
+
+function onLeave(_el: Element, done: () => void) {
+  const el = _el as HTMLElement
+  el.style.height = '0'
+
+  el.addEventListener('transitionend', done, {once: true})
+}
+</script>
+
+<template>
+  <Transition
+    v-bind="mergedUi.transition"
+    @enter="onEnter"
+    @after-enter="onAfterEnter"
+    @before-leave="onBeforeLeave"
+    @leave="onLeave"
+  >
+    <slot/>
+  </Transition>
+</template>
+
+<style scoped>
+
+</style>

package/components/utils/index.ts

@@ -0,0 +1,19 @@
+export function mergeConfig<T>(defaultUi: T, config: Partial<T>): T {
+  const mergedUi = {...defaultUi};
+
+  for (const key in config) {
+    if (Object.prototype.hasOwnProperty.call(config, key)) {
+      const defaultValue = defaultUi[key];
+      const configValue = config[key];
+      if (typeof defaultValue === 'object' && typeof configValue === 'object' && defaultValue !== null && configValue !== null) {
+        mergedUi[key] = mergeConfig(defaultValue, configValue);
+      } else if (typeof configValue === 'string') {
+        mergedUi[key] = `${defaultValue} ${configValue}`;
+      } else {
+        mergedUi[key] = configValue;
+      }
+    }
+  }
+
+  return mergedUi as T;
+}

package/composables/highlight.ts

@@ -0,0 +1,18 @@
+export default function (text: string, search = ""): string {
+  let label: string = text || ""
+
+  const index: number = label.toLowerCase().indexOf(search?.toLowerCase())
+  const regExp = new RegExp(search, "gi")
+
+  if (index >= 0) {
+    label = label.replace(
+      regExp,
+      `<span class="bg-yellow-200 dark:text-gray-950 dark:bg-yellow-300">${label.substring(
+        index,
+        index + search.length
+      )}</span>`
+    )
+  }
+
+  return label
+}

package/composables/modalsState.ts

@@ -0,0 +1,8 @@
+export const useAuthModal = () => useState<boolean>('auth-modal', () => false)
+export const useAnotherDeviceModal = () => useState<boolean>('another-device-modal', () => false)
+
+export const useLimitReachedModal = () => useState<boolean>('limit-reached-modal', () => false)
+export const usePaymentMethodModal = () => useState<boolean>('payment-method-modal', () => false)
+export const useReplenishModal = () => useState<boolean>('replenish-modal', () => false)
+export const useLowBalanceModal = () => useState<boolean>('low-balance-modal', () => false)
+export const useNoAccessModal = () => useState<boolean>('no-access-modal', () => false)

package/composables/projectState.ts

@@ -0,0 +1,2 @@
+export const useCurrentModule = () => useState<string>('current-module', () => 'pk')
+export const useContacts = () => useState<any>('contacts', () => [])

package/composables/useAdaptive.ts

@@ -0,0 +1,46 @@
+import {ref, useSSRContext} from "vue";
+import type {Ref, UnwrapRef} from "vue"
+
+export type AdaptiveContext = {
+    isMobile: boolean
+    isTablet: boolean
+    isSmallTablet: boolean
+    isDesktop: boolean
+}
+
+const isBrowser = typeof window !== undefined && process.client
+const computeIsMobile = (): boolean =>
+    isBrowser ? window.matchMedia('(max-width: 560px)').matches : false
+
+const computeIsSmallTablet = (): boolean =>
+    isBrowser ? window.matchMedia('(max-width: 767px)').matches : false
+const computeIsTablet = (): boolean =>
+    isBrowser ? window.innerWidth >= 768 && window.innerWidth < 1024 : false
+const computeIsDesktop = (): boolean =>
+    isBrowser ? window.innerWidth >= 1024 : false
+
+export const useAdaptive = (): Ref<AdaptiveContext> => {
+    const ctx = ref<UnwrapRef<AdaptiveContext>>({
+        isDesktop: computeIsDesktop(),
+        isMobile: computeIsMobile(),
+        isTablet: computeIsTablet(),
+        isSmallTablet: computeIsSmallTablet()
+    })
+
+    const setValues = () =>
+        (ctx.value = {
+            isDesktop: computeIsDesktop(),
+            isMobile: computeIsMobile(),
+            isTablet: computeIsTablet(),
+            isSmallTablet: computeIsSmallTablet()
+        })
+
+
+    onMounted(() => {
+            window.addEventListener('resize', setValues, { passive: true })
+        }
+    )
+    onUnmounted(() => window.removeEventListener('resize', setValues))
+
+    return ctx
+}

package/composables/useCarouselScroll.ts

@@ -0,0 +1,49 @@
+import { ref, type Ref, onMounted, onUnmounted } from 'vue'
+
+export const useCarouselScroll = (el: Ref<HTMLElement>) => {
+  const x = ref<number>(0)
+
+  function onMouseDown (e) {
+    el.value.style.scrollSnapType = 'none'
+    el.value.style.scrollBehavior = 'auto'
+
+    x.value = e.pageX
+
+    window.addEventListener('mousemove', onMouseMove)
+    window.addEventListener('mouseup', onMouseUp)
+  }
+
+  function onMouseUp () {
+    el.value.style.removeProperty('scroll-behavior')
+    el.value.style.removeProperty('scroll-snap-type')
+
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+  }
+
+  function onMouseMove (e) {
+    e.preventDefault()
+
+    const delta = e.pageX - x.value
+
+    x.value = e.pageX
+
+    el.value.scrollBy(-delta, 0)
+  }
+
+  onMounted(() => {
+    if (!el.value) {
+      return
+    }
+
+    el.value.addEventListener('mousedown', onMouseDown)
+  })
+
+  onUnmounted(() => {
+    if (!el.value) {
+      return
+    }
+
+    el.value.removeEventListener('mousedown', onMouseDown)
+  })
+}