vue-cesium/lib/components/ui/slider/index.js

Vue 3.x components for CesiumJS.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var useSlider = require('./use-slider.js');
var format = require('../../../utils/private/format.js');
var event = require('../../../utils/private/event.js');
var useForm = require('../../../composables/private/use-form.js');
var platform = require('../../../utils/platform.js');

"use strict";
const getNodeData = () => ({});
const sliderProps = {
  ...useSlider.useSliderProps,
  modelValue: {
    required: true,
    default: null,
    validator: (v) => typeof v === "number" || v === null
  },
  labelValue: [String, Number]
};
var Slider = vue.defineComponent({
  name: "VcSlider",
  props: sliderProps,
  emits: useSlider.useSliderEmits,
  setup(props, { emit }) {
    const { state, methods } = useSlider["default"]({
      updateValue,
      updatePosition,
      getDragging,
      formAttrs: useForm.useFormAttrs(props)
    });
    const rootRef = vue.ref(null);
    const curRatio = vue.ref(0);
    const model = vue.ref(0);
    function normalizeModel() {
      model.value = props.modelValue === null ? state.innerMin.value : format.between(props.modelValue, state.innerMin.value, state.innerMax.value);
    }
    vue.watch(() => `${props.modelValue}|${state.innerMin.value}|${state.innerMax.value}`, normalizeModel);
    normalizeModel();
    const modelRatio = vue.computed(() => methods.convertModelToRatio(model.value));
    const ratio = vue.computed(() => state.active.value === true ? curRatio.value : modelRatio.value);
    const selectionBarStyle = vue.computed(() => {
      const acc = {
        [state.positionProp.value]: `${100 * state.innerMinRatio.value}%`,
        [state.sizeProp.value]: `${100 * (ratio.value - state.innerMinRatio.value)}%`
      };
      if (props.selectionImg !== void 0) {
        acc.backgroundImage = `url(${props.selectionImg}) !important`;
      }
      return acc;
    });
    const getThumb = methods.getThumbRenderFn({
      focusValue: true,
      getNodeData,
      ratio,
      label: vue.computed(() => props.labelValue !== void 0 ? props.labelValue : model.value),
      thumbColor: vue.computed(() => props.thumbColor || props.color),
      labelColor: vue.computed(() => props.labelColor),
      labelTextColor: vue.computed(() => props.labelTextColor)
    });
    const trackContainerEvents = vue.computed(() => {
      if (state.editable.value !== true) {
        return {};
      }
      return platform.platform().isPhone === true ? { onClick: methods.onMobileClick } : {
        onMousedown: methods.onActivate,
        onFocus,
        onBlur: methods.onBlur,
        onKeydown,
        onKeyup: methods.onKeyup
      };
    });
    function updateValue(change) {
      if (model.value !== props.modelValue) {
        emit("update:modelValue", model.value);
      }
      change === true && emit("change", model.value);
    }
    function getDragging() {
      return rootRef.value.getBoundingClientRect();
    }
    function updatePosition(event, dragging = state.dragging.value) {
      const ratio2 = methods.getDraggingRatio(event, dragging);
      model.value = methods.convertRatioToModel(ratio2);
      curRatio.value = props.snap !== true || props.step === 0 ? ratio2 : methods.convertModelToRatio(model.value);
    }
    function onFocus() {
      state.focus.value = true;
    }
    function onKeydown(evt) {
      if (!useSlider.keyCodes.includes(evt.keyCode)) {
        return;
      }
      event.stopAndPrevent(evt);
      const stepVal = ([34, 33].includes(evt.keyCode) ? 10 : 1) * state.step.value, offset = ([34, 37, 40].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * (props.vertical === true ? -1 : 1) * stepVal;
      model.value = format.between(parseFloat((model.value + offset).toFixed(state.decimals.value)), state.innerMin.value, state.innerMax.value);
      updateValue();
    }
    return () => {
      const content = methods.getContent(selectionBarStyle, state.tabindex, trackContainerEvents, (node) => {
        node.push(getThumb());
      });
      return vue.h(
        "div",
        {
          ref: rootRef,
          class: state.classes.value + (props.modelValue === null ? " vc-slider--no-value" : ""),
          ...state.attributes.value,
          "aria-valuenow": props.modelValue
        },
        content
      );
    };
  }
});

exports["default"] = Slider;
exports.sliderProps = sliderProps;
//# sourceMappingURL=index.js.map