@v-c/slider 1.0.3 → 1.0.4

package/src/hooks/useOffset.ts

@@ -1,272 +0,0 @@
-import type { InternalMarkObj } from '../Marks'
-import { computed } from 'vue'
-
-/** Format the value in the range of [min, max] */
-type FormatRangeValue = (value: number) => number
-
-/** Format value align with step */
-type FormatStepValue = (value: number) => number | null
-
-/** Format value align with step & marks */
-type FormatValue = (value: number) => number
-
-type OffsetMode = 'unit' | 'dist'
-
-type OffsetValue = (
-  values: number[],
-  offset: number | 'min' | 'max',
-  valueIndex: number,
-  mode?: OffsetMode,
-) => number
-
-export type OffsetValues = (
-  values: number[],
-  offset: number | 'min' | 'max',
-  valueIndex: number,
-  mode?: OffsetMode,
-) => {
-  value: number
-  values: number[]
-}
-
-export default function useOffset(
-  min: number,
-  max: number,
-  step: number | null,
-  markList: InternalMarkObj[],
-  allowCross: boolean,
-  pushable: false | number | null,
-): [FormatValue, OffsetValues] {
-  const formatRangeValue = computed<FormatRangeValue>(() => {
-    return (val: number) => Math.max(min, Math.min(max, val))
-  }).value
-
-  const formatStepValue: FormatStepValue = (val: number) => {
-    if (step !== null) {
-      const stepValue = min + Math.round((formatRangeValue(val) - min) / step) * step
-
-      // Cut number in case to be like 0.30000000000000004
-      const getDecimal = (num: number) => (String(num).split('.')[1] || '').length
-      const maxDecimal = Math.max(getDecimal(step), getDecimal(max), getDecimal(min))
-      const fixedValue = Number(stepValue.toFixed(maxDecimal))
-
-      return min <= fixedValue && fixedValue <= max ? fixedValue : null
-    }
-    return null
-  }
-
-  const formatValue = (val: number) => {
-    const formatNextValue = formatRangeValue(val)
-
-    // List align values
-    const alignValues = markList.map<number>(mark => mark && mark.value)
-    if (step !== null) {
-      const stepValue = formatStepValue(val)
-      if (stepValue !== null) {
-        alignValues.push(stepValue)
-      }
-    }
-
-    // min & max
-    alignValues.push(min, max)
-
-    // Align with marks
-    let closeValue = alignValues[0]
-    let closeDist = max - min
-
-    alignValues.forEach((alignValue) => {
-      const dist = Math.abs(formatNextValue - alignValue)
-      if (dist <= closeDist) {
-        closeValue = alignValue
-        closeDist = dist
-      }
-    })
-
-    return closeValue
-  }
-
-  // ========================== Offset ==========================
-  // Single Value
-  const offsetValue: OffsetValue = (values, offset, valueIndex, mode = 'unit') => {
-    if (typeof offset === 'number') {
-      let nextValue: number
-      const originValue = values[valueIndex]
-
-      // Only used for `dist` mode
-      const targetDistValue = originValue + offset
-
-      // Compare next step value & mark value which is best match
-      let potentialValues: number[] = []
-      markList.forEach((mark) => {
-        potentialValues.push(mark.value)
-      })
-
-      // Min & Max
-      potentialValues.push(min, max)
-
-      // In case origin value is align with mark but not with step
-      const originStepValue = formatStepValue(originValue)
-      if (originStepValue !== null) {
-        potentialValues.push(originStepValue)
-      }
-
-      // Put offset step value also
-      const sign = offset > 0 ? 1 : -1
-
-      if (mode === 'unit') {
-        const allStepValues = formatStepValue(originValue + sign * step)
-        if (allStepValues !== null) {
-          potentialValues.push(allStepValues)
-        }
-      }
-      else {
-        const targetStepValue = formatStepValue(targetDistValue)
-        if (targetStepValue !== null) {
-          potentialValues.push(targetStepValue)
-        }
-      }
-
-      // Find close one
-      potentialValues = potentialValues
-        .filter(val => val !== null)
-      // Remove reverse value
-        .filter(val => (offset < 0 ? val <= originValue : val >= originValue))
-
-      if (mode === 'unit') {
-        // `unit` mode can not contain itself
-        potentialValues = potentialValues.filter(val => val !== originValue)
-      }
-
-      const compareValue = mode === 'unit' ? originValue : targetDistValue
-
-      nextValue = potentialValues[0]
-      let valueDist = Math.abs(nextValue - compareValue)
-
-      potentialValues.forEach((potentialValue) => {
-        const dist = Math.abs(potentialValue - compareValue)
-        if (dist < valueDist) {
-          nextValue = potentialValue
-          valueDist = dist
-        }
-      })
-
-      // Out of range will back to range
-      if (nextValue === undefined) {
-        return offset < 0 ? min : max
-      }
-
-      // `dist` mode
-      if (mode === 'dist') {
-        return nextValue
-      }
-
-      // `unit` mode may need another round
-      if (Math.abs(offset) > 1) {
-        const cloneValues = [...values]
-        cloneValues[valueIndex] = nextValue
-
-        return offsetValue(cloneValues, offset - sign, valueIndex, mode)
-      }
-
-      return nextValue
-    }
-    else if (offset === 'min') {
-      return min
-    }
-    else if (offset === 'max') {
-      return max
-    }
-  }
-
-  /** Same as `offsetValue` but return `changed` mark to tell value changed */
-  const offsetChangedValue = (
-    values: number[],
-    offset: number,
-    valueIndex: number,
-    mode: OffsetMode = 'unit',
-  ) => {
-    const originValue = values[valueIndex]
-    const nextValue = offsetValue(values, offset, valueIndex, mode)
-    return {
-      value: nextValue,
-      changed: nextValue !== originValue,
-    }
-  }
-
-  const needPush = (dist: number) => {
-    return (pushable === null && dist === 0) || (typeof pushable === 'number' && dist < pushable)
-  }
-
-  // Values
-  const offsetValues: OffsetValues = (values, offset, valueIndex, mode = 'unit') => {
-    const nextValues = values.map<number>(formatValue)
-    const originValue = nextValues[valueIndex]
-    const nextValue = offsetValue(nextValues, offset, valueIndex, mode)
-    nextValues[valueIndex] = nextValue
-
-    if (!allowCross) {
-      // >>>>> Allow Cross
-      const pushNum = pushable || 0
-
-      // ============ AllowCross ===============
-      if (valueIndex > 0 && nextValues[valueIndex - 1] !== originValue) {
-        nextValues[valueIndex] = Math.max(
-          nextValues[valueIndex],
-          nextValues[valueIndex - 1] + pushNum,
-        )
-      }
-
-      if (valueIndex < nextValues.length - 1 && nextValues[valueIndex + 1] !== originValue) {
-        nextValues[valueIndex] = Math.min(
-          nextValues[valueIndex],
-          nextValues[valueIndex + 1] - pushNum,
-        )
-      }
-    }
-    else if (typeof pushable === 'number' || pushable === null) {
-      // >>>>> Pushable
-      // =============== Push ==================
-
-      // >>>>>> Basic push
-      // End values
-      for (let i = valueIndex + 1; i < nextValues.length; i += 1) {
-        let changed = true
-        while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
-          ({ value: nextValues[i], changed } = offsetChangedValue(nextValues, 1, i))
-        }
-      }
-
-      // Start values
-      for (let i = valueIndex; i > 0; i -= 1) {
-        let changed = true
-        while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
-          ({ value: nextValues[i - 1], changed } = offsetChangedValue(nextValues, -1, i - 1))
-        }
-      }
-
-      // >>>>> Revert back to safe push range
-      // End to Start
-      for (let i = nextValues.length - 1; i > 0; i -= 1) {
-        let changed = true
-        while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
-          ({ value: nextValues[i - 1], changed } = offsetChangedValue(nextValues, -1, i - 1))
-        }
-      }
-
-      // Start to End
-      for (let i = 0; i < nextValues.length - 1; i += 1) {
-        let changed = true
-        while (needPush(nextValues[i + 1] - nextValues[i]) && changed) {
-          ({ value: nextValues[i + 1], changed } = offsetChangedValue(nextValues, 1, i + 1))
-        }
-      }
-    }
-
-    return {
-      value: nextValues[valueIndex],
-      values: nextValues,
-    }
-  }
-
-  return [formatValue, offsetValues]
-}

package/src/hooks/useRange.ts

@@ -1,24 +0,0 @@
-import type { SliderProps } from '../Slider'
-import { warning } from '@v-c/util/dist/warning'
-
-export default function useRange(
-  range?: SliderProps['range'],
-): [
-    range: boolean,
-    rangeEditable: boolean,
-    rangeDraggableTrack: boolean,
-    minCount: number,
-    maxCount?: number,
-  ] {
-  if (range === true || !range) {
-    return [!!range, false, false, 0]
-  }
-
-  const { editable = false, draggableTrack = false, minCount, maxCount } = range
-
-  if (process.env.NODE_ENV !== 'production') {
-    warning(!editable || !draggableTrack, '`editable` can not work with `draggableTrack`.')
-  }
-
-  return [true, editable, !editable && draggableTrack, minCount || 0, maxCount]
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-import type { SliderProps, SliderRef } from './Slider'
-import Slider from './Slider'
-
-// export { UnstableContext } from './context'
-
-export type { SliderProps, SliderRef }
-
-export default Slider

package/src/interface.ts

@@ -1,17 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-export type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt'
-
-export type OnStartMove = (
-  e: MouseEvent | TouchEvent,
-  valueIndex: number,
-  startValues?: number[],
-) => void
-
-export type AriaValueFormat = (value: number) => string
-
-export type SemanticName = 'tracks' | 'track' | 'rail' | 'handle'
-
-export type SliderClassNames = Partial<Record<SemanticName, string>>
-
-export type SliderStyles = Partial<Record<SemanticName, CSSProperties>>

package/src/util.ts

@@ -1,41 +0,0 @@
-import type { CSSProperties } from 'vue'
-import type { Direction } from './interface'
-
-export function getOffset(value: number, min: number, max: number) {
-  return (value - min) / (max - min)
-}
-
-export function getDirectionStyle(direction: Direction, value: number, min: number, max: number) {
-  const offset = getOffset(value, min, max)
-
-  const positionStyle: CSSProperties = {}
-
-  switch (direction) {
-    case 'rtl':
-      positionStyle.right = `${offset * 100}%`
-      positionStyle.transform = 'translateX(50%)'
-      break
-
-    case 'btt':
-      positionStyle.bottom = `${offset * 100}%`
-      positionStyle.transform = 'translateY(50%)'
-      break
-
-    case 'ttb':
-      positionStyle.top = `${offset * 100}%`
-      positionStyle.transform = 'translateY(-50%)'
-      break
-
-    default:
-      positionStyle.left = `${offset * 100}%`
-      positionStyle.transform = 'translateX(-50%)'
-      break
-  }
-
-  return positionStyle
-}
-
-/** Return index value if is list or return value directly */
-export function getIndex<T>(value: T | T[], index: number) {
-  return Array.isArray(value) ? value[index] : value
-}

package/vite.config.ts

@@ -1,18 +0,0 @@
-import type { UserConfig } from 'vite'
-import fg from 'fast-glob'
-import { defineConfig, mergeConfig } from 'vite'
-import { buildCommon } from '../../scripts/build.common'
-
-const entry = fg.sync(['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/tests'])
-
-export default defineConfig({
-  ...mergeConfig(buildCommon({
-    external: ['vue', 'classnames', /^@v-c\/util/],
-  }), {
-    build: {
-      lib: {
-        entry,
-      },
-    },
-  } as UserConfig),
-})

package/vitest.config.ts

@@ -1,11 +0,0 @@
-import { defineProject, mergeConfig } from 'vitest/config'
-import configShared from '../../vitest.config.ts'
-
-export default mergeConfig(
-  configShared,
-  defineProject({
-    test: {
-      environment: 'jsdom',
-    },
-  }),
-)