package.lib.components.VRangeSlider.VRangeSlider.mjs.map Maven / Gradle / Ivy

Go to download
{"version":3,"file":"VRangeSlider.mjs","names":["makeVInputProps","VInput","VLabel","getOffset","makeSliderProps","useSlider","useSteps","VSliderThumb","VSliderTrack","makeFocusProps","useFocus","useRtl","useProxiedModel","computed","ref","genericComponent","propsFactory","useRender","makeVRangeSliderProps","strict","Boolean","modelValue","type","Array","default","VRangeSlider","name","props","emits","value","end","start","setup","_ref","slots","emit","startThumbRef","stopThumbRef","inputRef","rtlClasses","getActiveThumb","e","startOffset","$el","direction","stopOffset","a","Math","abs","b","steps","model","undefined","arr","length","map","roundValue","activeThumbRef","hasLabels","max","min","mousePressed","onSliderMousedown","onSliderTouchstart","position","trackContainerRef","readonly","onSliderStart","onSliderEnd","_ref2","newValue","onSliderMove","_ref3","stop","focus","isFocused","blur","trackStart","trackStop","inputProps","filterProps","hasPrepend","label","prepend","_createVNode","_mergeProps","disabled","class","style","slotProps","_Fragment","_ref4","id","messagesId","v","relatedTarget","onBlur","ripple"],"sources":["../../../src/components/VRangeSlider/VRangeSlider.tsx"],"sourcesContent":["// Styles\nimport '../VSlider/VSlider.sass'\n\n// Components\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VLabel } from '@/components/VLabel'\nimport { getOffset, makeSliderProps, useSlider, useSteps } from '@/components/VSlider/slider'\nimport { VSliderThumb } from '@/components/VSlider/VSliderThumb'\nimport { VSliderTrack } from '@/components/VSlider/VSliderTrack'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useRtl } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType, WritableComputedRef } from 'vue'\nimport type { VSliderSlots } from '../VSlider/VSlider'\n\nexport const makeVRangeSliderProps = propsFactory({\n  ...makeFocusProps(),\n  ...makeVInputProps(),\n  ...makeSliderProps(),\n\n  strict: Boolean,\n  modelValue: {\n    type: Array as PropType,\n    default: () => ([0, 0]),\n  },\n}, 'VRangeSlider')\n\nexport const VRangeSlider = genericComponent()({\n  name: 'VRangeSlider',\n\n  props: makeVRangeSliderProps(),\n\n  emits: {\n    'update:focused': (value: boolean) => true,\n    'update:modelValue': (value: [number, number]) => true,\n    end: (value: [number, number]) => true,\n    start: (value: [number, number]) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const startThumbRef = ref()\n    const stopThumbRef = ref()\n    const inputRef = ref()\n    const { rtlClasses } = useRtl()\n\n    function getActiveThumb (e: MouseEvent | TouchEvent) {\n      if (!startThumbRef.value || !stopThumbRef.value) return\n\n      const startOffset = getOffset(e, startThumbRef.value.$el, props.direction)\n      const stopOffset = getOffset(e, stopThumbRef.value.$el, props.direction)\n\n      const a = Math.abs(startOffset)\n      const b = Math.abs(stopOffset)\n\n      return (a < b || (a === b && startOffset < 0)) ? startThumbRef.value.$el : stopThumbRef.value.$el\n    }\n\n    const steps = useSteps(props)\n\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      arr => {\n        if (!arr?.length) return [0, 0]\n\n        return arr.map(value => steps.roundValue(value))\n      },\n    ) as WritableComputedRef<[number, number]> & { readonly externalValue: number[] }\n\n    const {\n      activeThumbRef,\n      hasLabels,\n      max,\n      min,\n      mousePressed,\n      onSliderMousedown,\n      onSliderTouchstart,\n      position,\n      trackContainerRef,\n      readonly,\n    } = useSlider({\n      props,\n      steps,\n      onSliderStart: () => {\n        emit('start', model.value)\n      },\n      onSliderEnd: ({ value }) => {\n        const newValue: [number, number] = activeThumbRef.value === startThumbRef.value?.$el\n          ? [value, model.value[1]]\n          : [model.value[0], value]\n\n        if (!props.strict && newValue[0] < newValue[1]) {\n          model.value = newValue\n        }\n\n        emit('end', model.value)\n      },\n      onSliderMove: ({ value }) => {\n        const [start, stop] = model.value\n\n        if (!props.strict && start === stop && start !== min.value) {\n          activeThumbRef.value = value > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el\n          activeThumbRef.value?.focus()\n        }\n\n        if (activeThumbRef.value === startThumbRef.value?.$el) {\n          model.value = [Math.min(value, stop), stop]\n        } else {\n          model.value = [start, Math.max(start, value)]\n        }\n      },\n      getActiveThumb,\n    })\n\n    const { isFocused, focus, blur } = useFocus(props)\n    const trackStart = computed(() => position(model.value[0]))\n    const trackStop = computed(() => position(model.value[1]))\n\n    useRender(() => {\n      const inputProps = VInput.filterProps(props)\n      const hasPrepend = !!(props.label || slots.label || slots.prepend)\n\n      return (\n        \n          {{\n            ...slots,\n            prepend: hasPrepend ? slotProps => (\n              <>\n                { slots.label?.(slotProps) ?? (\n                  props.label\n                    ? (\n                      \n                    ) : undefined\n                )}\n\n                { slots.prepend?.(slotProps) }\n              \n            ) : undefined,\n            default: ({ id, messagesId }) => (\n              \n                \n\n                \n\n                \n                  {{ 'tick-label': slots['tick-label'] }}\n                \n\n                 (model.value = [v, model.value[1]]) }\n                  onFocus={ (e: FocusEvent) => {\n                    focus()\n                    activeThumbRef.value = startThumbRef.value?.$el\n\n                    // Make sure second thumb is focused if\n                    // the thumbs are on top of each other\n                    // and they are both at minimum value\n                    // but only if focused from outside.\n                    if (\n                      model.value[0] === model.value[1] &&\n                      model.value[1] === min.value &&\n                      e.relatedTarget !== stopThumbRef.value?.$el\n                    ) {\n                      startThumbRef.value?.$el.blur()\n                      stopThumbRef.value?.$el.focus()\n                    }\n                  }}\n                  onBlur={ () => {\n                    blur()\n                    activeThumbRef.value = undefined\n                  }}\n                  min={ min.value }\n                  max={ model.value[1] }\n                  position={ trackStart.value }\n                  ripple={ props.ripple }\n                >\n                  {{ 'thumb-label': slots['thumb-label'] }}\n                \n\n                 (model.value = [model.value[0], v]) }\n                  onFocus={ (e: FocusEvent) => {\n                    focus()\n                    activeThumbRef.value = stopThumbRef.value?.$el\n\n                    // Make sure first thumb is focused if\n                    // the thumbs are on top of each other\n                    // and they are both at maximum value\n                    // but only if focused from outside.\n                    if (\n                      model.value[0] === model.value[1] &&\n                      model.value[0] === max.value &&\n                      e.relatedTarget !== startThumbRef.value?.$el\n                    ) {\n                      stopThumbRef.value?.$el.blur()\n                      startThumbRef.value?.$el.focus()\n                    }\n                  }}\n                  onBlur={ () => {\n                    blur()\n                    activeThumbRef.value = undefined\n                  }}\n                  min={ model.value[0] }\n                  max={ max.value }\n                  position={ trackStop.value }\n                  ripple={ props.ripple }\n                >\n                  {{ 'thumb-label': slots['thumb-label'] }}\n                \n