{"version":3,"file":"index.mjs","sources":["../../../../src/components/Slider/index.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"slider\"\n    class=\"base-slider select-none\"\n    role=\"slider\"\n    :aria-valuemax=\"moderatedMax()\"\n    :aria-valuemin=\"moderatedMin()\"\n    :aria-valuenow=\"localValue\"\n    :class=\"classes\"\n    :tabindex=\"disabled ? null : tabindex || '0'\"\n    @blur=\"onBlur\"\n    @focus=\"onFocus\"\n    @keydown.down.prevent=\"decrementValue\"\n    @keydown.left.prevent=\"decrementValue\"\n    @keydown.right.prevent=\"incrementValue\"\n    @keydown.up.prevent=\"incrementValue\"\n  >\n    <input\n      v-if=\"name\"\n      class=\"base-slider__hidden-input\"\n      type=\"hidden\"\n      :name=\"name\"\n      :value=\"modelValue\"\n    />\n\n    <div\n      ref=\"track\"\n      class=\"base-slider__track relative\"\n      :class=\"[vertical ? 'vertical ' : '']\"\n      @mousedown=\"onDragStart\"\n      @touchstart=\"onDragStart\"\n    >\n      <div\n        class=\"base-slider__track-background bg-gray-300 dark:bg-gray-400\"\n        :class=\"[vertical ? 'vertical ' : '']\"\n      >\n        <div v-if=\"snapToSteps\">\n          <span\n            v-for=\"(point, idx) in snapPoints\"\n            :key=\"idx\"\n            class=\"base-slider__snap-point\"\n            :style=\"{\n              [vertical ? 'bottom' : 'left']: 100 * relativeValue(point) + '%',\n            }\"\n          ></span>\n        </div>\n      </div>\n\n      <div\n        class=\"base-slider__track-fill bg-primary-400\"\n        :class=\"[vertical ? 'vertical ' : '']\"\n        :style=\"fillStyle\"\n      ></div>\n\n      <div\n        ref=\"thumb\"\n        class=\"base-slider__thumb bg-primary-400\"\n        :class=\"[vertical ? 'vertical ' : '']\"\n        :style=\"thumbStyle\"\n      >\n        <div\n          v-if=\"showMarker\"\n          class=\"base-slider__marker text-xs\"\n          :class=\"[vertical ? 'vertical ' : '']\"\n        >\n          <span class=\"text-xs text-gray-400 dark:text-gray-500\">{{\n            markerText\n          }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue';\n\nconst props = defineProps({\n  name: {\n    type: String,\n    default: undefined,\n  },\n  tabindex: {\n    type: [String, Number],\n    default: undefined,\n  },\n  modelValue: {\n    type: Number,\n    required: true,\n  },\n  min: {\n    type: Number,\n    default: 0,\n  },\n  max: {\n    type: Number,\n    default: 100,\n  },\n  vertical: {\n    type: Boolean,\n    default: false,\n  },\n  step: {\n    type: Number,\n    default: 10,\n  },\n  snapToSteps: {\n    type: Boolean,\n    default: false,\n  },\n  showMarker: {\n    type: Boolean,\n    default: false,\n  },\n  markerValue: {\n    type: [String, Number],\n    default: undefined,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst emit = defineEmits([\n  'focus',\n  'blur',\n  'update:modelValue',\n  'change',\n  'dragstart',\n  'dragend',\n]);\n\nconst initialValue = ref(props.modelValue);\nconst isActive = ref(false);\nconst isDragging = ref(false);\nconst localValue = ref(props.modelValue);\nconst slider = ref<HTMLDivElement>();\nconst track = ref<HTMLDivElement>();\nconst thumb = ref<HTMLDivElement>();\n\nconst classes = computed(() => {\n  return [\n    { 'is-dragging': isDragging.value },\n    { 'is-disabled': props.disabled },\n    { 'is-active': isActive.value },\n    { 'has-marker': props.showMarker },\n  ];\n});\n\nconst fillStyle = computed(() => {\n  console.log();\n\n  return {\n    transform: `scale(${\n      !props.vertical ? relativeValue(localValue.value) : 1\n    },  ${props.vertical ? relativeValue(localValue.value) : 1})`,\n  };\n});\n\nconst thumbStyle = computed(() => {\n  return {\n    left: props.vertical\n      ? undefined\n      : relativeValue(localValue.value) * 100 + '%',\n    top: props.vertical\n      ? 100 - relativeValue(localValue.value) * 100 + '%'\n      : undefined,\n  };\n});\n\nconst markerText = computed(() => {\n  return props.markerValue === undefined ? props.modelValue : props.markerValue;\n});\n\nconst snapPoints = computed(() => {\n  const points = [];\n  let point = props.step * Math.ceil(moderatedMin() / props.step);\n\n  while (point <= moderatedMax()) {\n    points.push(point);\n    point += props.step;\n  }\n\n  return points;\n});\n\nconst moderatedMin = () => {\n  return props.max > props.min ? props.min : 0;\n};\n\nconst moderatedMax = () => {\n  return props.max > props.min ? props.max : 100;\n};\n\nconst focus = () => {\n  slider.value?.focus();\n};\n\nconst reset = () => {\n  setValue(initialValue);\n};\n\nconst onFocus = () => {\n  isActive.value = true;\n  emit('focus');\n};\n\nconst onBlur = () => {\n  isActive.value = false;\n  emit('blur');\n};\n\nconst onExternalClick = (e) => {\n  if (!slider.value?.contains(e.target)) {\n    onBlur();\n  }\n};\n\nconst setValueWithSnap = (value) => {\n  value = moderateValue(value);\n\n  if (props.snapToSteps) {\n    value = getNearestSnapPoint(value);\n  }\n\n  setValue(value);\n};\n\nconst setValue = (value) => {\n  value = moderateValue(value);\n\n  if (value === localValue.value) {\n    return;\n  }\n\n  localValue.value = value;\n  emit('update:modelValue', value);\n  emit('change', value);\n};\n\nconst incrementValue = () => {\n  setValueWithSnap(localValue.value + props.step);\n};\n\nconst decrementValue = () => {\n  setValueWithSnap(localValue.value - props.step);\n};\n\nconst getPointStyle = (point) => {\n  return {\n    left: point + '%',\n  };\n};\n\nconst initializeSlider = () => {\n  document.addEventListener('touchend', onDragStop);\n  document.addEventListener('mouseup', onDragStop);\n  document.addEventListener('click', onExternalClick);\n  document.addEventListener('touchstart', onExternalClick);\n  initializeDrag();\n};\n\nconst teardownSlider = () => {\n  document.removeEventListener('touchend', onDragStop);\n  document.removeEventListener('mouseup', onDragStop);\n  document.removeEventListener('click', onExternalClick);\n};\n\nconst initializeDrag = () => {\n  const value = moderateValue(localValue.value ? localValue.value : 0);\n  setValue(value);\n};\n\nconst onDragStart = (e) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (!isActive.value) {\n    onFocus();\n  }\n\n  isDragging.value = true;\n  dragUpdate(e);\n\n  document.addEventListener('touchmove', onDragMove);\n  document.addEventListener('mousemove', onDragMove);\n\n  emit('dragstart', localValue.value, e);\n};\n\nconst onDragMove = (e) => {\n  dragUpdate(e);\n};\n\nconst dragUpdate = (e) => {\n  if (!track.value) {\n    return;\n  }\n\n  const bounds = track.value.getBoundingClientRect();\n\n  let relativeValue: number;\n  if (props.vertical) {\n    const position = e.touches ? e.touches[0].pageY : e.pageY;\n    const trackLength = track.value.offsetHeight;\n    relativeValue = (bounds.bottom - position) / trackLength;\n  } else {\n    const position = e.touches ? e.touches[0].pageX : e.pageX;\n    const trackLength = track.value.offsetWidth;\n    relativeValue = (position - bounds.left) / trackLength;\n  }\n\n  const value = moderateValue(\n    moderatedMin() + relativeValue * (moderatedMax() - moderatedMin())\n  );\n\n  if (isDragging.value) {\n    setValue(Math.round(value));\n  }\n};\n\nconst onDragStop = (e) => {\n  if (isDragging.value) {\n    isDragging.value = false;\n\n    if (props.snapToSteps && props.modelValue % props.step !== 0) {\n      setValueWithSnap(props.modelValue);\n    }\n\n    document.removeEventListener('touchmove', onDragMove);\n    document.removeEventListener('mousemove', onDragMove);\n\n    emit('dragend', localValue.value, e);\n  }\n};\n\nconst getNearestSnapPoint = (value) => {\n  const previousSnapPoint = Math.floor(value / props.step) * props.step;\n  const nextSnapPoint = previousSnapPoint + props.step;\n  const midpoint = (previousSnapPoint + nextSnapPoint) / 2;\n\n  if (previousSnapPoint < moderatedMin()) {\n    if (nextSnapPoint > moderatedMax()) {\n      return value;\n    }\n    return nextSnapPoint;\n  }\n  if (value >= midpoint && nextSnapPoint <= moderatedMax()) {\n    return nextSnapPoint;\n  }\n  return previousSnapPoint;\n};\n\nconst relativeValue = (value) => {\n  return (value - moderatedMin()) / (moderatedMax() - moderatedMin());\n};\n\nconst moderateValue = (value) => {\n  if (value < moderatedMin()) {\n    return moderatedMin();\n  }\n\n  if (value > moderatedMax()) {\n    return moderatedMax();\n  }\n\n  return value;\n};\n\n// debugging needs to be done\n/*watch(props.value, () => {\n      setValue(props.modelValue);\n    });*/\n\nonMounted(() => {\n  initializeSlider();\n});\n\nonBeforeUnmount(() => {\n  teardownSlider();\n});\n\ndefineExpose({\n  getPointStyle,\n  focus,\n  reset,\n});\n</script>\n\n<style>\n.base-slider {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  outline: none;\n}\n\n.base-slider:not(.is-disabled).is-active .base-slider__marker,\n.base-slider:not(.is-disabled).is-dragging .base-slider__marker {\n  opacity: 1;\n  transform: scale(1) translateY(-26px);\n}\n\n.base-slider:not(.is-disabled).is-active .base-slider__marker.vertical,\n.base-slider:not(.is-disabled).is-dragging .base-slider__marker.vertical {\n  opacity: 1;\n  transform: scale(1) translateX(26px);\n}\n\n.base-slider:not(.is-disabled).is-active .base-slider__marker-text,\n.base-slider:not(.is-disabled).is-dragging .base-slider__marker-text {\n  color: white;\n}\n\n.base-slider:not(.is-disabled).is-active .base-slider__snap-point,\n.base-slider:not(.is-disabled).is-dragging .base-slider__snap-point {\n  opacity: 1;\n}\n\n.base-slider.is-disabled .base-slider__track {\n  cursor: default;\n}\n\n.base-slider.is-disabled .base-slider__track-fill {\n  background-color: transparent;\n}\n\n.base-slider.is-disabled .base-slider__thumb {\n  background-color: #ddd;\n  border: 2px solid white;\n}\n\n.base-slider__track {\n  cursor: default;\n  height: 18px;\n  margin: 0 auto;\n  position: relative;\n  min-width: 60px;\n  width: 100%;\n}\n\n.base-slider__track.vertical {\n  flex-direction: column;\n  height: 100%;\n  min-height: 60px;\n  min-width: 18px;\n  width: 18px;\n}\n\n.base-slider__track-background,\n.base-slider__track-fill {\n  content: '';\n  display: block;\n  height: 3px;\n  left: 0;\n  position: absolute;\n  top: 7px;\n}\n\n.base-slider__track-background.vertical,\n.base-slider__track-fill.vertical {\n  content: '';\n  display: block;\n  height: 100%;\n  width: 3px;\n  top: 0;\n  position: absolute;\n  left: 7px;\n}\n\n.base-slider__track-background {\n  width: 100%;\n}\n\n.base-slider__track-background.vertical {\n  height: 100%;\n}\n\n.base-slider__snap-point {\n  background-color: rgba(0, 0, 0, 0.25);\n  height: 3px;\n  opacity: 0;\n  position: absolute;\n  transition: opacity 0.2s ease;\n  width: 2px;\n  z-index: 1;\n}\n\n.base-slider__track-fill {\n  transform-origin: left;\n  width: 100%;\n}\n.base-slider__track-fill.vertical {\n  transform-origin: bottom;\n  height: 100%;\n}\n\n.base-slider__thumb {\n  border-radius: 50%;\n  cursor: inherit;\n  display: block;\n  height: 14px;\n  left: 0;\n  position: absolute;\n  width: 14px;\n  z-index: 1;\n  margin-left: -7px;\n  bottom: 2px;\n}\n\n.base-slider__thumb.vertical {\n  margin-left: 2px;\n  margin-top: -7px;\n  bottom: 0;\n}\n\n.base-slider__thumb::before {\n  background-color: #93c5fd;\n  opacity: 0.3;\n  border-radius: 50%;\n  content: '';\n  display: block;\n  height: 36px;\n  margin-left: -12px;\n  margin-top: -12px;\n  position: absolute;\n  transform-origin: center;\n  transform: scale(0);\n  transition: transform 0.2s ease;\n  width: 36px;\n}\n\n.base-slider__marker {\n  height: 24px;\n  opacity: 0;\n  position: absolute;\n  transform: scale(0) translateY(0);\n  transition: all 0.2s ease;\n  margin-left: -5px;\n  width: 24px;\n  user-select: none;\n}\n\n.base-slider__marker svg {\n  fill: #7f97ee;\n  height: 24px;\n  width: 24px;\n}\n\n.base-slider__marker-text {\n  color: white;\n  font-size: 13px;\n  font-weight: 600;\n  left: 4.5px;\n  position: absolute;\n  text-align: center;\n  top: 1px;\n  transition: color 0.2s ease;\n  width: 14px;\n}\n\n.base-slider--is-dragging {\n  user-select: none;\n}\n</style>\n"],"names":["props","__props","emit","__emit","initialValue","ref","isActive","isDragging","localValue","slider","track","thumb","classes","computed","fillStyle","relativeValue","thumbStyle","markerText","snapPoints","points","point","moderatedMin","moderatedMax","focus","_a","reset","setValue","onFocus","onBlur","onExternalClick","setValueWithSnap","value","moderateValue","getNearestSnapPoint","incrementValue","decrementValue","getPointStyle","initializeSlider","onDragStop","initializeDrag","teardownSlider","onDragStart","dragUpdate","onDragMove","bounds","position","trackLength","previousSnapPoint","nextSnapPoint","midpoint","onMounted","onBeforeUnmount","__expose"],"mappings":"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"}