taro-ui-vue3/lib/slider/index.js

Taro UI Rewritten in Vue 3.0

var __pow = Math.pow;
import {reactive, watch, computed, h, defineComponent, mergeProps} from "vue";
import {Slider, View} from "@tarojs/components";
const AtSlider = defineComponent({
  name: "AtSlider",
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    },
    value: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    activeColor: {
      type: String,
      default: "#6190e8"
    },
    backgroundColor: {
      type: String,
      default: "#e9e9e9"
    },
    blockSize: {
      type: Number,
      default: 28,
      validator: (val) => val >= 12 && val <= 28
    },
    blockColor: {
      type: String,
      default: "#ffffff"
    },
    showValue: {
      type: Boolean,
      default: false
    },
    onChange: {
      type: Function,
      default: () => (value) => {
      }
    },
    onChanging: {
      type: Function,
      default: () => (value) => {
      }
    }
  },
  setup(props, {attrs, slots}) {
    const state = reactive({
      _value: clampNumber(props.value, props.min, props.max)
    });
    const precision = computed(() => __pow(10, countDecimals(props.step)));
    const rootClass = computed(() => ({
      "at-slider": true,
      "at-slider--disabled": props.disabled
    }));
    function clampNumber(value, lower, upper) {
      return Math.max(lower, Math.min(upper, value));
    }
    function countDecimals(value) {
      if (Math.floor(value) === value)
        return 0;
      return value.toString().split(".")[1].length || 0;
    }
    function ensurePrecision(value) {
      return Math.round((value + Number.EPSILON) * precision.value) / precision.value;
    }
    function handleChanging(e) {
      const {_value} = state;
      let {value} = e.detail;
      value = ensurePrecision(value);
      if (value !== _value) {
        state._value = value;
      }
      props.onChanging && props.onChanging(value);
    }
    function handleChange(e) {
      let {value} = e.detail;
      value = ensurePrecision(value);
      state._value = value;
      props.onChange && props.onChange(value);
    }
    watch(() => [
      props.value,
      props.min,
      props.max
    ], ([value, min, max]) => {
      state._value = clampNumber(value, min, max);
    });
    return () => h(View, mergeProps(attrs, {
      class: rootClass.value
    }), {
      default: () => [
        h(View, {
          class: "at-slider__inner"
        }, {
          default: () => [
            h(Slider, {
              min: props.min,
              max: props.max,
              step: props.step,
              value: state._value,
              disabled: props.disabled,
              activeColor: props.activeColor,
              backgroundColor: props.backgroundColor,
              blockSize: props.blockSize,
              blockColor: props.blockColor,
              onChange: handleChange,
              onChanging: handleChanging
            })
          ]
        }),
        props.showValue && h(View, {
          class: "at-slider__text"
        }, {default: () => `${state._value}`})
      ]
    });
  }
});
var slider_default = AtSlider;
export {
  slider_default as default
};