{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/slider/src/index.vue"],"sourcesContent":["<template>\r\n  <div\r\n    ref=\"sliderWrapper\"\r\n    :class=\"sliderKls\"\r\n    role=\"slider\"\r\n    :aria-valuemin=\"min\"\r\n    :aria-valuemax=\"max\"\r\n    :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\r\n    :aria-disabled=\"sliderDisabled\"\r\n  >\r\n    <div\r\n      ref=\"slider\"\r\n      class=\"sg-slider__runway\"\r\n      :class=\"{ 'show-input': showInput && !range, disabled: sliderDisabled }\"\r\n      @click=\"onSliderClick\"\r\n    >\r\n      <div class=\"sg-slider__bar\" :style=\"barStyle\"></div>\r\n      <slider-button\r\n        ref=\"firstButton\"\r\n        :model-value=\"firstValue\"\r\n        :vertical=\"vertical\"\r\n        :placement=\"placement\"\r\n        @update:model-value=\"setFirstValue\"\r\n      />\r\n      <slider-button\r\n        v-if=\"range\"\r\n        ref=\"secondButton\"\r\n        :model-value=\"secondValue\"\r\n        :vertical=\"vertical\"\r\n        :placement=\"placement\"\r\n        @update:model-value=\"setSecondValue\"\r\n      />\r\n      <div v-if=\"showStops\">\r\n        <div\r\n          v-for=\"(item, key) in stops\"\r\n          :key=\"key\"\r\n          class=\"sg-slider__stop\"\r\n          :style=\"getStopStyle(item)\"\r\n        ></div>\r\n      </div>\r\n      <template v-if=\"markList.length > 0\">\r\n        <div>\r\n          <div\r\n            v-for=\"(item, key) in markList\"\r\n            :key=\"key\"\r\n            :style=\"getStopStyle(item.position)\"\r\n            class=\"sg-slider__stop sg-slider__marks-stop\"\r\n          ></div>\r\n        </div>\r\n        <div class=\"sg-slider__marks\">\r\n          <slider-marker\r\n            v-for=\"(item, key) in markList\"\r\n            :key=\"key\"\r\n            :mark=\"item.mark\"\r\n            :style=\"getStopStyle(item.position)\"\r\n          />\r\n        </div>\r\n      </template>\r\n    </div>\r\n    <sg-input-number\r\n      v-if=\"showInput && !range\"\r\n      ref=\"input\"\r\n      :model-value=\"firstValue\"\r\n      class=\"sg-slider__input\"\r\n      :step=\"step\"\r\n      :disabled=\"sliderDisabled\"\r\n      :controls=\"showInputControls\"\r\n      :min=\"min\"\r\n      :max=\"max\"\r\n      @update:model-value=\"(setFirstValue as any)\"\r\n      @on-change=\"emitChange\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  nextTick,\r\n  onBeforeUnmount,\r\n  onMounted,\r\n  provide,\r\n  reactive,\r\n  ref,\r\n  toRefs,\r\n  watch,\r\n} from 'vue'\r\nimport SgInputNumber from '@sgui-plus/components/input-number'\r\nimport {\r\n  UPDATE_MODEL_EVENT\r\n} from '@sgui-plus/utils/constants'\r\nimport { off, on } from '@sgui-plus/utils/dom'\r\nimport { debugWarn, throwError } from '@sgui-plus/utils/error'\r\nimport { isValidComponentSize } from '@sgui-plus/utils/validators'\r\nimport { useSize } from '@sgui-plus/hooks'\r\nimport SliderButton from './button.vue'\r\nimport SliderMarker from './marker.vue'\r\nimport { useMarks } from './useMarks'\r\nimport { useSlide } from './useSlide'\r\nimport { useStops } from './useStops'\r\nimport { SliderContextKey } from './slider.type'\r\n\r\nimport type { PropType, Ref } from 'vue'\r\nimport type { Nullable } from '@sgui-plus/utils/types'\r\nimport type { ComponentSize } from '@sgui-plus/utils/size'\r\nimport type { ISliderProps } from './slider.type'\r\n\r\n\r\nexport default defineComponent({\r\n  name: 'SgSlider',\r\n\r\n  components: {\r\n    SgInputNumber,\r\n    SliderButton,\r\n    SliderMarker,\r\n  },\r\n\r\n  props: {\r\n    modelValue: {\r\n      type: [Number, Array] as PropType<number | number[]>,\r\n      default: 0,\r\n    },\r\n    min: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    max: {\r\n      type: Number,\r\n      default: 100,\r\n    },\r\n    step: {\r\n      type: Number,\r\n      default: 1,\r\n    },\r\n    showInput: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    showInputControls: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    size: {\r\n      type: String as PropType<ComponentSize>,\r\n      validator: isValidComponentSize,\r\n    },\r\n    showStops: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    showTooltip: {\r\n      type: String,\r\n      default: 'hover',\r\n    },\r\n    formatTooltip: {\r\n      type: Function as PropType<(val: number) => number | string>,\r\n      default: undefined,\r\n    },\r\n    disabled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    range: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    vertical: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    label: {\r\n      type: String,\r\n      default: undefined,\r\n    },\r\n    placement: {\r\n      type: String,\r\n      default: 'top',\r\n    },\r\n    marks: Object,\r\n    height: String,\r\n    validateEvent: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n  },\r\n\r\n  emits: [UPDATE_MODEL_EVENT, 'onChange', 'onInput'],\r\n\r\n  setup(props, { emit }) {\r\n    const initData = reactive({\r\n      firstValue: 0,\r\n      secondValue: 0,\r\n      oldValue: 0,\r\n      dragging: false,\r\n      sliderSize: 1,\r\n    })\r\n\r\n    const {\r\n      slider,\r\n      firstButton,\r\n      secondButton,\r\n      sliderDisabled,\r\n      minValue,\r\n      maxValue,\r\n      barStyle,\r\n      formItem,\r\n      resetSize,\r\n      emitChange,\r\n      onSliderClick,\r\n      setFirstValue,\r\n      setSecondValue,\r\n    } = useSlide(props as ISliderProps, initData, emit)\r\n\r\n    const { stops, getStopStyle } = useStops(\r\n      props as ISliderProps,\r\n      initData,\r\n      minValue,\r\n      maxValue\r\n    )\r\n\r\n    const sliderWrapperSize = useSize()\r\n\r\n    const prefix = 'sg-slider'\r\n    const sliderKls = computed(() => [\r\n      prefix,\r\n      `${prefix}--${sliderWrapperSize.value}`,\r\n      props.showInput ? 'sg-slider--with-input' : '',\r\n    ])\r\n\r\n    const markList = useMarks(props as ISliderProps)\r\n\r\n    useWatch(props, initData, minValue, maxValue, emit, formItem!)\r\n\r\n    const precision = computed(() => {\r\n      const precisions = [props.min, props.max, props.step].map((item) => {\r\n        const decimal = `${item}`.split('.')[1]\r\n        return decimal ? decimal.length : 0\r\n      })\r\n      return Math.max.apply(null, precisions)\r\n    })\r\n\r\n    const { sliderWrapper } = useLifecycle(props, initData, resetSize)\r\n\r\n    const { firstValue, secondValue, oldValue, dragging, sliderSize } =\r\n      toRefs(initData)\r\n\r\n    const updateDragging = (val: boolean) => {\r\n      initData.dragging = val\r\n    }\r\n\r\n    provide(SliderContextKey, {\r\n      ...toRefs(props),\r\n      sliderSize,\r\n      disabled: sliderDisabled,\r\n      precision,\r\n      emitChange,\r\n      resetSize,\r\n      updateDragging,\r\n    })\r\n\r\n    return {\r\n      firstValue,\r\n      secondValue,\r\n      oldValue,\r\n      dragging,\r\n      sliderSize,\r\n\r\n      slider,\r\n      firstButton,\r\n      secondButton,\r\n      sliderDisabled,\r\n      barStyle,\r\n      emitChange,\r\n      onSliderClick,\r\n      getStopStyle,\r\n      setFirstValue,\r\n      setSecondValue,\r\n\r\n      stops,\r\n      markList,\r\n\r\n      sliderWrapper,\r\n      sliderWrapperSize,\r\n      sliderKls,\r\n    }\r\n  },\r\n})\r\n\r\nconst useWatch = (props, initData, minValue, maxValue, emit, formItem) => {\r\n  const _emit = (val: number | number[]) => {\r\n    emit(UPDATE_MODEL_EVENT, val)\r\n    emit('onInput', val)\r\n  }\r\n\r\n  const valueChanged = () => {\r\n    if (props.range) {\r\n      return ![minValue.value, maxValue.value].every(\r\n        (item, index) => item === initData.oldValue[index]\r\n      )\r\n    } else {\r\n      return props.modelValue !== initData.oldValue\r\n    }\r\n  }\r\n\r\n  const setValues = () => {\r\n    if (props.min > props.max) {\r\n      throwError('Slider', 'min should not be greater than max.')\r\n      return\r\n    }\r\n    const val = props.modelValue\r\n    if (props.range && Array.isArray(val)) {\r\n      if (val[1] < props.min) {\r\n        _emit([props.min, props.min])\r\n      } else if (val[0] > props.max) {\r\n        _emit([props.max, props.max])\r\n      } else if (val[0] < props.min) {\r\n        _emit([props.min, val[1]])\r\n      } else if (val[1] > props.max) {\r\n        _emit([val[0], props.max])\r\n      } else {\r\n        initData.firstValue = val[0]\r\n        initData.secondValue = val[1]\r\n        if (valueChanged()) {\r\n          if (props.validateEvent) {\r\n            formItem?.validate?.('change').catch((err) => debugWarn(err))\r\n          }\r\n          initData.oldValue = val.slice()\r\n        }\r\n      }\r\n    } else if (!props.range && typeof val === 'number' && !isNaN(val)) {\r\n      if (val < props.min) {\r\n        _emit(props.min)\r\n      } else if (val > props.max) {\r\n        _emit(props.max)\r\n      } else {\r\n        initData.firstValue = val\r\n        if (valueChanged()) {\r\n          if (props.validateEvent) {\r\n            formItem?.validate?.('change').catch((err) => debugWarn(err))\r\n          }\r\n          initData.oldValue = val\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  setValues()\r\n\r\n  watch(\r\n    () => initData.dragging,\r\n    (val) => {\r\n      if (!val) {\r\n        setValues()\r\n      }\r\n    }\r\n  )\r\n\r\n  watch(\r\n    () => props.modelValue,\r\n    (val, oldVal) => {\r\n      if (\r\n        initData.dragging ||\r\n        (Array.isArray(val) &&\r\n          Array.isArray(oldVal) &&\r\n          val.every((item, index) => item === oldVal[index]))\r\n      ) {\r\n        return\r\n      }\r\n      setValues()\r\n    }\r\n  )\r\n\r\n  watch(\r\n    () => [props.min, props.max],\r\n    () => {\r\n      setValues()\r\n    }\r\n  )\r\n}\r\n\r\nconst useLifecycle = (props, initData, resetSize) => {\r\n  const sliderWrapper: Ref<Nullable<HTMLElement>> = ref(null)\r\n\r\n  onMounted(async () => {\r\n    let valuetext\r\n    if (props.range) {\r\n      if (Array.isArray(props.modelValue)) {\r\n        initData.firstValue = Math.max(props.min, props.modelValue[0])\r\n        initData.secondValue = Math.min(props.max, props.modelValue[1])\r\n      } else {\r\n        initData.firstValue = props.min\r\n        initData.secondValue = props.max\r\n      }\r\n      initData.oldValue = [initData.firstValue, initData.secondValue]\r\n      valuetext = `${initData.firstValue}-${initData.secondValue}`\r\n    } else {\r\n      if (typeof props.modelValue !== 'number' || isNaN(props.modelValue)) {\r\n        initData.firstValue = props.min\r\n      } else {\r\n        initData.firstValue = Math.min(\r\n          props.max,\r\n          Math.max(props.min, props.modelValue)\r\n        )\r\n      }\r\n      initData.oldValue = initData.firstValue\r\n      valuetext = initData.firstValue\r\n    }\r\n\r\n    sliderWrapper.value!.setAttribute('aria-valuetext', valuetext)\r\n\r\n    // label screen reader\r\n    sliderWrapper.value!.setAttribute(\r\n      'aria-label',\r\n      props.label ? props.label : `slider between ${props.min} and ${props.max}`\r\n    )\r\n\r\n    on(window, 'resize', resetSize)\r\n\r\n    await nextTick()\r\n    resetSize()\r\n  })\r\n\r\n  onBeforeUnmount(() => {\r\n    off(window, 'resize', resetSize)\r\n  })\r\n\r\n  return {\r\n    sliderWrapper,\r\n  }\r\n}\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createVNode","_createBlock","_createCommentVNode","_Fragment","_renderList","_createElementVNode"],"mappings":"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"}