@coreui/vue-pro 5.7.0 → 5.8.1

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

@@ -0,0 +1,432 @@
+import { defineComponent, ref, watch, onMounted, h, PropType, VNode } from 'vue'
+
+import {
+  calculateClickValue,
+  calculateLabelPosition,
+  calculateMoveValue,
+  calculateTooltipPosition,
+  getLabelValue,
+  getNearestValueIndex,
+  getThumbSize,
+  updateGradient,
+  updateValue,
+  validateValue,
+} from './utils'
+
+import type { Label, ThumbSize } from './types'
+
+import { isRTL } from '../../utils'
+
+const CRangeSlider = defineComponent({
+  name: 'CRangeSlider',
+  props: {
+    /**
+     * Enable or disable clickable labels in the Vue Range Slider.
+     * When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.
+     */
+    clickableLabels: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Control the interactive state of the Vue Range Slider with the `disabled` prop.
+     * Setting it to `true` will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state.
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Define the minimum distance between slider handles using the `distance` prop in the Vue Range Slider.
+     * This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions.
+     */
+    distance: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * Add descriptive labels to your Vue Range Slider by providing an array of `labels`.
+     * These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users.
+     */
+    labels: {
+      type: Array as PropType<Label[]>,
+      default: () => [],
+    },
+    /**
+     * Specify the maximum value for the Vue Range Slider with the `max` prop.
+     * This determines the upper limit of the slider's range, enabling precise control over the highest selectable value.
+     */
+    max: {
+      type: Number,
+      default: 100,
+    },
+    /**
+     * Set the minimum value for the Vue Range Slider using the `min` prop.
+     * This defines the lower bound of the slider's range, allowing you to control the starting point of user selection.
+     */
+    min: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: [Number, Array] as PropType<number | number[]>,
+    /**
+     * Assign a `name` to the Vue Range Slider for form integration.
+     * Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms.
+     */
+    name: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: '',
+    },
+    /**
+     * Control the granularity of the Vue Range Slider by setting the `step` prop.
+     * This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements.
+     */
+    step: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * Toggle the visibility of tooltips in the Vue Range Slider with the `tooltips` prop.
+     * When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users.
+     */
+    tooltips: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Customize the display format of tooltips in the Vue Range Slider using the `tooltipsFormat` function.
+     * This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information.
+     */
+    tooltipsFormat: {
+      type: Function as PropType<(value: number) => string | VNode>,
+      default: null,
+    },
+    /**
+     * Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track.
+     */
+    track: {
+      type: [Boolean, String],
+      default: 'fill',
+      validator: (value: boolean | string) => {
+        return typeof value === 'boolean' || value === 'fill'
+      },
+    },
+    /**
+     * Set the current value(s) of the Vue Range Slider using the `value` prop.
+     * Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state.
+     */
+    value: {
+      type: [Number, Array] as PropType<number | number[]>,
+      default: () => [0],
+    },
+    /**
+     * Orient the Vue Range Slider vertically by setting the `vertical` prop to `true`.
+     * This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs.
+     */
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    'change',
+    /**
+     * Emit the new value whenever there’s a change event.
+     */
+    'update:modelValue',
+  ],
+  setup(props, { emit }) {
+    const rangeSliderRef = ref<HTMLDivElement | null>(null)
+    const inputsRef = ref<HTMLInputElement[]>([])
+    const labelsContainerRef = ref<HTMLDivElement | null>(null)
+    const labelsRef = ref<HTMLDivElement[]>([])
+    const trackRef = ref<HTMLDivElement | null>(null)
+
+    const currentValue = ref<number[]>(
+      props.modelValue
+        ? Array.isArray(props.modelValue)
+          ? props.modelValue
+          : [props.modelValue]
+        : Array.isArray(props.value)
+          ? props.value
+          : [props.value],
+    )
+    const isDragging = ref(false)
+    const _isRTL = ref(false)
+    const dragIndex = ref(0)
+    const thumbSize = ref<ThumbSize | null>()
+
+    watch(
+      () => props.value,
+      (newVal) => {
+        currentValue.value = Array.isArray(newVal) ? newVal : [newVal]
+      },
+    )
+
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (newVal !== undefined) {
+          currentValue.value = Array.isArray(newVal) ? newVal : [newVal]
+        }
+      },
+    )
+
+    // Adjust labels container size based on labels
+    onMounted(() => {
+      const maxSize = Math.max(
+        ...labelsRef.value.map((label) =>
+          props.vertical ? label.offsetWidth : label.offsetHeight,
+        ),
+      )
+
+      if (labelsContainerRef.value) {
+        labelsContainerRef.value.style[props.vertical ? 'width' : 'height'] = `${maxSize}px`
+      }
+
+      if (rangeSliderRef.value) {
+        _isRTL.value = isRTL(rangeSliderRef.value)
+        thumbSize.value = getThumbSize(rangeSliderRef.value, props.vertical)
+      }
+    })
+
+    watch(isDragging, (newVal) => {
+      if (newVal) {
+        globalThis.addEventListener('mousemove', handleMouseMove)
+        globalThis.addEventListener('mouseup', handleMouseUp)
+      } else {
+        globalThis.removeEventListener('mousemove', handleMouseMove)
+        globalThis.removeEventListener('mouseup', handleMouseUp)
+      }
+    })
+
+    const updateNearestValue = (value: number) => {
+      const nearestIndex = getNearestValueIndex(value, currentValue.value)
+      const newCurrentValue = [...currentValue.value]
+      newCurrentValue[nearestIndex] = validateValue(
+        value,
+        currentValue.value,
+        props.distance,
+        nearestIndex,
+      )
+
+      setTimeout(() => {
+        if (inputsRef.value[nearestIndex]) {
+          inputsRef.value[nearestIndex].focus()
+        }
+      }, 0)
+
+      currentValue.value = newCurrentValue
+
+      emit('change', newCurrentValue)
+      emit('update:modelValue', newCurrentValue)
+    }
+
+    const handleInputChange = (event: Event, index: number) => {
+      if (props.disabled) return
+
+      const target = event.target as HTMLInputElement
+      const value = Number(target.value)
+
+      const newCurrentValue = updateValue(value, currentValue.value, props.distance, index)
+
+      currentValue.value = newCurrentValue
+
+      emit('change', newCurrentValue)
+      emit('update:modelValue', newCurrentValue)
+    }
+
+    const handleInputsContainerMouseDown = (event: MouseEvent) => {
+      if (!trackRef.value || event.button !== 0) return
+
+      const clickValue = calculateClickValue(
+        event,
+        trackRef.value,
+        props.min,
+        props.max,
+        props.step,
+        props.vertical,
+        _isRTL.value,
+      )
+
+      const index = getNearestValueIndex(clickValue, currentValue.value)
+
+      isDragging.value = true
+      dragIndex.value = index
+      updateNearestValue(clickValue)
+    }
+
+    const handleLabelClick = (event: MouseEvent, value: number) => {
+      if (!props.clickableLabels || props.disabled || event.button !== 0) return
+
+      updateNearestValue(value)
+    }
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!isDragging.value || !trackRef.value) return
+
+      const moveValue = calculateMoveValue(
+        event,
+        trackRef.value,
+        props.min,
+        props.max,
+        props.step,
+        props.vertical,
+        _isRTL.value,
+      )
+
+      const newCurrentValue = updateValue(
+        moveValue,
+        currentValue.value,
+        props.distance,
+        dragIndex.value,
+      )
+
+      currentValue.value = newCurrentValue
+
+      emit('change', newCurrentValue)
+      emit('update:modelValue', newCurrentValue)
+    }
+
+    const handleMouseUp = () => {
+      isDragging.value = false
+    }
+
+    return () =>
+      h(
+        'div',
+        {
+          class: [
+            'range-slider',
+            {
+              'range-slider-vertical': props.vertical,
+              disabled: props.disabled,
+            },
+          ],
+          ref: rangeSliderRef,
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'range-slider-inputs-container',
+              onMousedown: handleInputsContainerMouseDown,
+            },
+            [
+              currentValue.value.map((value, index) => [
+                h('input', {
+                  class: 'range-slider-input',
+                  type: 'range',
+                  min: props.min,
+                  max: props.max,
+                  step: props.step,
+                  value: value,
+                  name: Array.isArray(props.name)
+                    ? props.name[index]
+                    : `${props.name || ''}-${index}`,
+                  role: 'slider',
+                  'aria-valuemin': props.min,
+                  'aria-valuemax': props.max,
+                  'aria-valuenow': value,
+                  'aria-orientation': props.vertical ? 'vertical' : 'horizontal',
+                  disabled: props.disabled,
+                  onInput: (e: Event) => handleInputChange(e, index),
+                  ref: (el) => {
+                    inputsRef.value[index] = el as HTMLInputElement
+                  },
+                }),
+                props.tooltips &&
+                  h(
+                    'div',
+                    {
+                      class: 'range-slider-tooltip',
+                      ...(thumbSize.value && {
+                        style: calculateTooltipPosition(
+                          props.min,
+                          props.max,
+                          value,
+                          thumbSize.value,
+                          props.vertical,
+                          _isRTL.value,
+                        ),
+                      }),
+                    },
+                    [
+                      h('div', { class: 'range-slider-tooltip-inner' }, [
+                        props.tooltipsFormat ? props.tooltipsFormat(value) : value,
+                      ]),
+                      h('div', { class: 'range-slider-tooltip-arrow' }),
+                    ],
+                  ),
+              ]),
+              h('div', {
+                class: 'range-slider-track',
+                ...(props.track && {
+                  style: updateGradient(
+                    props.min,
+                    props.max,
+                    currentValue.value,
+                    props.vertical,
+                    _isRTL.value,
+                  ),
+                }),
+                ref: trackRef,
+              }),
+            ],
+          ),
+          Array.isArray(props.labels) &&
+            props.labels.length > 0 &&
+            h(
+              'div',
+              {
+                class: 'range-slider-labels-container',
+                ref: labelsContainerRef,
+              },
+              props.labels.map((label, index) => {
+                const labelPosition = calculateLabelPosition(
+                  props.min,
+                  props.max,
+                  props.labels,
+                  label,
+                  index,
+                )
+                const labelValue = getLabelValue(props.min, props.max, props.labels, label, index)
+                const labelStyle = {
+                  ...(props.vertical
+                    ? { bottom: labelPosition }
+                    : _isRTL.value
+                      ? { right: labelPosition }
+                      : { left: labelPosition }),
+                  ...(typeof label === 'object' && 'style' in label ? label.style : {}),
+                }
+
+                return h(
+                  'div',
+                  {
+                    class: [
+                      'range-slider-label',
+                      {
+                        clickable: props.clickableLabels,
+                      },
+                      typeof label === 'object' && 'className' in label ? label.className : '',
+                    ],
+                    style: labelStyle,
+                    onMousedown: (event) => handleLabelClick(event, labelValue),
+                    key: index,
+                    ref: (el) => {
+                      labelsRef.value[index] = el as HTMLDivElement
+                    },
+                  },
+                  typeof label === 'object' && 'label' in label ? label.label : label,
+                )
+              }),
+            ),
+        ],
+      )
+  },
+})
+
+export { CRangeSlider }

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

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CRangeSlider } from './CRangeSlider'
+
+const CRangeSliderPlugin = {
+  install: (app: App): void => {
+    app.component(CRangeSlider.name as string, CRangeSlider)
+  },
+}
+
+export { CRangeSliderPlugin, CRangeSlider }

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

@@ -0,0 +1,16 @@
+import type { VNode } from 'vue'
+
+export type Label =
+  | {
+      label: number | string | VNode
+      value: number
+      className?: string | string[] | Record<string, boolean>
+      style?: Record<string, any> // Alternatively, you can use `CSSProperties` from Vue
+    }
+  | VNode
+  | string
+
+export type ThumbSize = {
+  value: number
+  unit: string | null
+}

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

@@ -0,0 +1,247 @@
+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,
+  rtl: 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' : rtl ? 'to left' : '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
       }
     })