@coreui/vue-pro 5.6.0 → 5.8.0

package/src/components/range-slider/utils.ts

@@ -0,0 +1,241 @@
+import type { Label, ThumbSize } from './types'
+
+export const calculateClickValue = (
+  event: MouseEvent,
+  container: HTMLDivElement,
+  min: number,
+  max: number,
+  step: number,
+  vertical: boolean,
+  rtl: boolean,
+) => {
+  const clickPosition = getClickPosition(event, container, vertical, rtl)
+  const value = min + clickPosition * (max - min)
+  return roundToStep(value, step)
+}
+
+export const calculateMoveValue = (
+  event: MouseEvent,
+  container: HTMLDivElement,
+  min: number,
+  max: number,
+  step: number,
+  vertical: boolean,
+  rtl: boolean,
+) => {
+  const rect = container.getBoundingClientRect()
+  const position = vertical
+    ? calculateVerticalPosition(event.clientY, rect)
+    : calculateHorizontalPosition(event.clientX, rect, rtl)
+
+  if (typeof position === 'string') {
+    return position === 'max' ? max : min
+  }
+
+  const value = min + position * (max - min)
+
+  return roundToStep(value, step)
+}
+
+export const calculateVerticalPosition = (mouseY: number, rect: DOMRect) => {
+  if (mouseY < rect.top) {
+    return 'max'
+  }
+
+  if (mouseY > rect.bottom) {
+    return 'min'
+  }
+
+  return Math.min(Math.max((rect.bottom - mouseY) / rect.height, 0), 1)
+}
+
+export const calculateHorizontalPosition = (mouseX: number, rect: DOMRect, rtl: boolean) => {
+  if (mouseX < rect.left) {
+    return rtl ? 'max' : 'min'
+  }
+
+  if (mouseX > rect.right) {
+    return rtl ? 'min' : 'max'
+  }
+
+  const relativeX = rtl ? rect.right - mouseX : mouseX - rect.left
+  return Math.min(Math.max(relativeX / rect.width, 0), 1)
+}
+
+export const calculateLabelPosition = (
+  min: number,
+  max: number,
+  labels: Label[],
+  label: Label,
+  index: number,
+) => {
+  if (typeof label === 'object' && 'value' in label) {
+    return `${((label.value - min) / (max - min)) * 100}%`
+  }
+
+  return `${(index / (labels.length - 1)) * 100}%`
+}
+
+export const calculateTooltipPosition = (
+  min: number,
+  max: number,
+  value: number,
+  thumbSize: ThumbSize,
+  vertical: boolean,
+  rtl: boolean,
+) => {
+  const percent = (value - min) / (max - min)
+  const margin =
+    percent > 0.5
+      ? `-${(percent - 0.5) * thumbSize.value}${thumbSize.unit}`
+      : `${(0.5 - percent) * thumbSize.value}${thumbSize.unit}`
+
+  if (vertical) {
+    return {
+      bottom: `${percent * 100}%`,
+      marginBottom: margin,
+    }
+  }
+
+  return rtl
+    ? { right: `${percent * 100}%`, marginRight: margin }
+    : { left: `${percent * 100}%`, marginLeft: margin }
+}
+
+export const getClickPosition = (
+  event: MouseEvent,
+  container: HTMLDivElement,
+  vertical: boolean,
+  rtl: boolean,
+) => {
+  const { offsetX, offsetY } = event
+  const { offsetWidth, offsetHeight } = container
+
+  if (vertical) {
+    return 1 - offsetY / offsetHeight
+  }
+
+  return rtl ? 1 - offsetX / offsetWidth : offsetX / offsetWidth
+}
+
+export const getLabelValue = (
+  min: number,
+  max: number,
+  labels: Label[],
+  label: Label,
+  index: number,
+) =>
+  typeof label === 'object' && 'value' in label
+    ? label.value
+    : min + (index / (labels.length - 1)) * (max - min)
+
+export const getNearestValueIndex = (value: number, values: number[]) => {
+  const valuesLength = values.length
+
+  if (value < values[0]) {
+    return 0
+  }
+
+  if (value > values[valuesLength - 1]) {
+    return valuesLength - 1
+  }
+
+  const distances = values.map((v) => Math.abs(v - value))
+  const min = Math.min(...distances)
+  const firstIndex = distances.indexOf(min)
+
+  return value < values[firstIndex] ? firstIndex : distances.lastIndexOf(min)
+}
+
+export const getThumbSize = (element: HTMLDivElement, vertical: boolean): ThumbSize | null => {
+  const value = globalThis
+    .getComputedStyle(element, null)
+    .getPropertyValue(
+      vertical ? '--cui-range-slider-thumb-height' : '--cui-range-slider-thumb-width',
+    )
+
+  const regex = /^(\d+\.?\d*)([%a-z]*)$/i
+  const match = value.match(regex)
+
+  if (match) {
+    return {
+      value: Number.parseFloat(match[1]),
+      unit: match[2] || null,
+    }
+  }
+
+  return null
+}
+
+export const roundToStep = (number: number, step: number) => {
+  const _step = step === 0 ? 1 : step
+  return Math.round(number / _step) * _step
+}
+
+export const updateGradient = (min: number, max: number, values: number[], vertical: boolean) => {
+  const minVal = Math.min(...values)
+  const maxVal = Math.max(...values)
+
+  const from = ((minVal - min) / (max - min)) * 100
+  const to = ((maxVal - min) / (max - min)) * 100
+
+  const direction = vertical ? 'to top' : 'to right'
+
+  return {
+    backgroundImage:
+      values.length === 1
+        ? `linear-gradient(
+    ${direction},
+    var(--cui-range-slider-track-in-range-bg) 0%,
+    var(--cui-range-slider-track-in-range-bg) ${to}%,
+    transparent ${to}%,
+    transparent 100%
+  )`
+        : `linear-gradient(
+    ${direction},
+    transparent 0%,
+    transparent ${from}%,
+    var(--cui-range-slider-track-in-range-bg) ${from}%,
+    var(--cui-range-slider-track-in-range-bg) ${to}%,
+    transparent ${to}%,
+    transparent 100%
+  )`,
+  }
+}
+
+export const updateValue = (value: number, values: number[], distance: number, index: number) => {
+  const newValue = [...values]
+  newValue[index] = validateValue(value, values, distance, index)
+  return newValue
+}
+
+export const validateValue = (value: number, values: number[], distance: number, index: number) => {
+  // If there's only one value, return it as is
+  if (values.length === 1) {
+    return value
+  }
+
+  // Determine previous and next values if they exist
+  const prevValue: number | undefined = index > 0 ? values[index - 1] : undefined
+  const nextValue: number | undefined = index < values.length - 1 ? values[index + 1] : undefined
+
+  // If it's the first element, ensure it's not too close to the next value
+  if (index === 0 && nextValue !== undefined) {
+    return Math.min(value, nextValue - distance)
+  }
+
+  // If it's the last element, ensure it's not too close to the previous value
+  if (index === values.length - 1 && prevValue !== undefined) {
+    return Math.max(value, prevValue + distance)
+  }
+
+  // For middle elements, ensure the value is within the allowed distance from both neighbors
+  if (prevValue !== undefined && nextValue !== undefined) {
+    const minVal = prevValue + distance
+    const maxVal = nextValue - distance
+    return Math.min(Math.max(value, minVal), maxVal)
+  }
+
+  // Fallback: If for some reason prevValue or nextValue is undefined, return the original value
+  return value
+}

package/src/components/sidebar/CSidebar.ts

@@ -111,7 +111,6 @@ const CSidebar = defineComponent({
 
     watch(mobile, () => {
       if (mobile.value) {
-        console.log('mobile')
         visibleMobile.value = false
       }
     })

package/src/components/time-picker/CTimePicker.ts

@@ -265,6 +265,15 @@ const CTimePicker = defineComponent({
         return ['sm', 'lg'].includes(value)
       },
     },
+    /**
+     * Generates dropdown menu using Teleport.
+     *
+     * @since 5.8.0
+     */
+    teleport: {
+      type: [Boolean],
+      default: false,
+    },
     /**
      * Add helper text to the component.
      *
@@ -473,7 +482,22 @@ const CTimePicker = defineComponent({
               })
             : '',
         }),
-        props.indicator && h('div', { class: 'time-picker-indicator' }),
+        props.indicator &&
+          h('div', {
+            class: 'time-picker-indicator',
+            ...(!props.disabled && {
+              onClick: (event: Event) => {
+                event.stopPropagation()
+                visible.value = !visible.value
+              },
+              onKeydown: (event: KeyboardEvent) => {
+                if (event.key === 'Enter') {
+                  visible.value = !visible.value
+                }
+              },
+              tabIndex: 0,
+            }),
+          }),
         props.cleaner &&
           date.value &&
           h('div', {
@@ -655,6 +679,7 @@ const CTimePicker = defineComponent({
                   visible.value = true
                   emit('show')
                 },
+                teleport: props.teleport,
                 visible: visible.value,
               },
               {

package/src/composables/index.ts

@@ -1,7 +1,15 @@
 import { useColorModes } from './useColorModes'
 import { useDebouncedCallback } from './useDebouncedCallback'
+import { useDropdownWithPopper } from './useDropdownWithPopper'
 import { useIsVisible } from './useIsVisible'
 import { usePopper } from './usePopper'
 import { useUniqueId } from './useUniqueId'
 
-export { useColorModes, useDebouncedCallback, useIsVisible, usePopper, useUniqueId }
+export {
+  useColorModes,
+  useDebouncedCallback,
+  useDropdownWithPopper,
+  useIsVisible,
+  usePopper,
+  useUniqueId,
+}

package/src/composables/useDropdownWithPopper.ts

@@ -0,0 +1,130 @@
+import { ref, computed, watch, onUnmounted } from 'vue'
+import type { Options, Placement } from '@popperjs/core'
+
+import { usePopper } from './usePopper'
+import { isRTL } from '../utils'
+
+export const useDropdownWithPopper = <T extends HTMLElement = never>(
+  popperConfig?: Partial<Options>,
+) => {
+  // References to the dropdown elements
+  const dropdownRefElement = ref<T | null>(null)
+  const dropdownMenuElement = ref<HTMLDivElement | null>(null)
+
+  // Reactive state to control dropdown visibility
+  const isOpen = ref<boolean>(false)
+
+  // Popper.js integration
+  const { popper, initPopper, destroyPopper } = usePopper()
+
+  // Computed Popper configuration based on RTL and user-provided settings
+  const _popperConfig = computed(() => ({
+    placement: (isRTL(dropdownRefElement.value) ? 'bottom-end' : 'bottom-start') as Placement,
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary: 'clippingParents',
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 2],
+        },
+      },
+    ],
+    ...popperConfig,
+  }))
+
+  // Methods to control dropdown state
+  const closeDropdown = () => {
+    isOpen.value = false
+  }
+
+  const openDropdown = () => {
+    isOpen.value = true
+  }
+
+  const toggleDropdown = () => {
+    isOpen.value = !isOpen.value
+  }
+
+  const updatePopper = () => {
+    if (popper) {
+      popper.update()
+    }
+  }
+
+  // Event handlers
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      isOpen.value = false
+      return
+    }
+
+    if (event.key === 'Tab') {
+      const activeElement = document.activeElement as HTMLElement
+
+      if (
+        dropdownRefElement.value?.contains(activeElement) ||
+        dropdownMenuElement.value?.contains(activeElement)
+      ) {
+        return
+      }
+
+      isOpen.value = false
+    }
+  }
+
+  const handleMouseUp = (event: Event) => {
+    const target = event.target as HTMLElement
+
+    if (dropdownMenuElement.value?.contains(target) || dropdownRefElement.value?.contains(target)) {
+      return
+    }
+
+    isOpen.value = false
+  }
+
+  // Utility functions to manage event listeners
+  const addEventListeners = () => {
+    window.addEventListener('mouseup', handleMouseUp)
+    window.addEventListener('keyup', handleKeyUp)
+  }
+
+  const removeEventListeners = () => {
+    window.removeEventListener('mouseup', handleMouseUp)
+    window.removeEventListener('keyup', handleKeyUp)
+  }
+
+  // Watcher to handle side effects when `isOpen` changes
+  watch(isOpen, (open) => {
+    if (open) {
+      addEventListeners()
+
+      if (dropdownRefElement.value && dropdownMenuElement.value) {
+        initPopper(dropdownRefElement.value, dropdownMenuElement.value, _popperConfig.value)
+      }
+    } else {
+      removeEventListeners()
+      destroyPopper()
+    }
+  })
+
+  // Cleanup on component unmount
+  onUnmounted(() => {
+    removeEventListeners()
+    destroyPopper()
+  })
+
+  return {
+    dropdownRefElement,
+    dropdownMenuElement,
+    isOpen,
+    closeDropdown,
+    openDropdown,
+    toggleDropdown,
+    updatePopper,
+  }
+}