@wfrog/vc-ui 1.0.0

package/dist/es/components/single-player/single-player.mjs

@@ -0,0 +1,1172 @@
+import './index.css'
+import { f as isNumber, i as isArray, c as buildProps, d as definePropType, u as useNamespace, h as isString, e as debugWarn, t as throwError } from '../../chunk/E_WRn0OP.mjs';
+import '../../chunk/Dvi7RsXg.mjs';
+import { E as ElInputNumber } from '../../chunk/Coex0GxM.mjs';
+/* empty css                    */
+import { E as Ee, a as ElTooltip } from '../../chunk/DqUIKX7f.mjs';
+import { inject, ref, computed, watch, nextTick, defineComponent, reactive, toRefs, createElementBlock, openBlock, unref, normalizeStyle, normalizeClass, createVNode, withCtx, createElementVNode, toDisplayString, h, shallowRef, onMounted, provide, createBlock, createCommentVNode, Fragment, renderList, withModifiers, isRef } from 'vue';
+import { _ as _sfc_main$3 } from '../awesome-icon/awesome-icon.mjs';
+import { c as useEventListener } from '../../chunk/CEClY-_T.mjs';
+import { u as useSizeProp } from '../../chunk/CS4VKsqy.mjs';
+import { u as useAriaProps } from '../../chunk/C2LgraHx.mjs';
+import { C as CHANGE_EVENT, I as INPUT_EVENT, U as UPDATE_MODEL_EVENT } from '../../chunk/Ct6q2FXg.mjs';
+import { _ as _export_sfc, w as withInstall } from '../../chunk/D389hx_T.mjs';
+import { g as getEventCode, E as EVENT_CODE } from '../../chunk/BJS5Pdfp.mjs';
+import { d as debounce } from '../../chunk/ViP2SEY4.mjs';
+import { c as clamp } from '../../chunk/Dqz1zvKN.mjs';
+import { u as useFormItem, b as useFormDisabled, a as useFormItemInputId, c as useFormSize } from '../../chunk/DZACQ9LT.mjs';
+import { u as useLocale } from '../../chunk/aibQ9WSZ.mjs';
+import { i as isObjectLike, b as baseGetTag } from '../../chunk/Fo0dZYnz.mjs';
+import { _ as _export_sfc$1 } from '../../chunk/pcqpp-6-.mjs';
+
+/** `Object#toString` result references. */
+var boolTag = '[object Boolean]';
+
+/**
+ * Checks if `value` is classified as a boolean primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a boolean, else `false`.
+ * @example
+ *
+ * _.isBoolean(false);
+ * // => true
+ *
+ * _.isBoolean(null);
+ * // => false
+ */
+function isBoolean(value) {
+  return value === true || value === false ||
+    (isObjectLike(value) && baseGetTag(value) == boolTag);
+}
+
+const sliderContextKey = Symbol("sliderContextKey");
+
+const sliderProps = buildProps({
+  modelValue: {
+    type: definePropType([Number, Array]),
+    default: 0
+  },
+  id: {
+    type: String,
+    default: void 0
+  },
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: 100
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  showInput: Boolean,
+  showInputControls: {
+    type: Boolean,
+    default: true
+  },
+  size: useSizeProp,
+  inputSize: useSizeProp,
+  showStops: Boolean,
+  showTooltip: {
+    type: Boolean,
+    default: true
+  },
+  formatTooltip: {
+    type: definePropType(Function),
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  range: Boolean,
+  vertical: Boolean,
+  height: String,
+  rangeStartLabel: {
+    type: String,
+    default: void 0
+  },
+  rangeEndLabel: {
+    type: String,
+    default: void 0
+  },
+  formatValueText: {
+    type: definePropType(Function),
+    default: void 0
+  },
+  tooltipClass: {
+    type: String,
+    default: void 0
+  },
+  placement: {
+    type: String,
+    values: Ee,
+    default: "top"
+  },
+  marks: {
+    type: definePropType(Object)
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  persistent: {
+    type: Boolean,
+    default: true
+  },
+  ...useAriaProps(["ariaLabel"])
+});
+const isValidValue = (value) => isNumber(value) || isArray(value) && value.every(isNumber);
+const sliderEmits = {
+  [UPDATE_MODEL_EVENT]: isValidValue,
+  [INPUT_EVENT]: isValidValue,
+  [CHANGE_EVENT]: isValidValue
+};
+
+const sliderButtonProps = buildProps({
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  vertical: Boolean,
+  tooltipClass: String,
+  placement: {
+    type: String,
+    values: Ee,
+    default: "top"
+  }
+});
+const sliderButtonEmits = {
+  [UPDATE_MODEL_EVENT]: (value) => isNumber(value)
+};
+
+const useTooltip = (props, formatTooltip, showTooltip) => {
+  const tooltip = ref();
+  const tooltipVisible = ref(false);
+  const enableFormat = computed(() => {
+    return formatTooltip.value instanceof Function;
+  });
+  const formatValue = computed(() => {
+    return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue;
+  });
+  const displayTooltip = debounce(() => {
+    showTooltip.value && (tooltipVisible.value = true);
+  }, 50);
+  const hideTooltip = debounce(() => {
+    showTooltip.value && (tooltipVisible.value = false);
+  }, 50);
+  return {
+    tooltip,
+    tooltipVisible,
+    formatValue,
+    displayTooltip,
+    hideTooltip
+  };
+};
+const useSliderButton = (props, initData, emit) => {
+  const {
+    disabled,
+    min,
+    max,
+    step,
+    showTooltip,
+    persistent,
+    precision,
+    sliderSize,
+    formatTooltip,
+    emitChange,
+    resetSize,
+    updateDragging
+  } = inject(sliderContextKey);
+  const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
+  const button = ref();
+  const currentPosition = computed(() => {
+    return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`;
+  });
+  const wrapperStyle = computed(() => {
+    return props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value };
+  });
+  const handleMouseEnter = () => {
+    initData.hovering = true;
+    displayTooltip();
+  };
+  const handleMouseLeave = () => {
+    initData.hovering = false;
+    if (!initData.dragging) {
+      hideTooltip();
+    }
+  };
+  const onButtonDown = (event) => {
+    if (disabled.value)
+      return;
+    event.preventDefault();
+    onDragStart(event);
+    window.addEventListener("mousemove", onDragging);
+    window.addEventListener("touchmove", onDragging);
+    window.addEventListener("mouseup", onDragEnd);
+    window.addEventListener("touchend", onDragEnd);
+    window.addEventListener("contextmenu", onDragEnd);
+    button.value.focus();
+  };
+  const incrementPosition = (amount) => {
+    if (disabled.value)
+      return;
+    initData.newPosition = Number.parseFloat(currentPosition.value) + amount / (max.value - min.value) * 100;
+    setPosition(initData.newPosition);
+    emitChange();
+  };
+  const onLeftKeyDown = () => {
+    incrementPosition(-step.value);
+  };
+  const onRightKeyDown = () => {
+    incrementPosition(step.value);
+  };
+  const onPageDownKeyDown = () => {
+    incrementPosition(-step.value * 4);
+  };
+  const onPageUpKeyDown = () => {
+    incrementPosition(step.value * 4);
+  };
+  const onHomeKeyDown = () => {
+    if (disabled.value)
+      return;
+    setPosition(0);
+    emitChange();
+  };
+  const onEndKeyDown = () => {
+    if (disabled.value)
+      return;
+    setPosition(100);
+    emitChange();
+  };
+  const onKeyDown = (event) => {
+    const code = getEventCode(event);
+    let isPreventDefault = true;
+    switch (code) {
+      case EVENT_CODE.left:
+      case EVENT_CODE.down:
+        onLeftKeyDown();
+        break;
+      case EVENT_CODE.right:
+      case EVENT_CODE.up:
+        onRightKeyDown();
+        break;
+      case EVENT_CODE.home:
+        onHomeKeyDown();
+        break;
+      case EVENT_CODE.end:
+        onEndKeyDown();
+        break;
+      case EVENT_CODE.pageDown:
+        onPageDownKeyDown();
+        break;
+      case EVENT_CODE.pageUp:
+        onPageUpKeyDown();
+        break;
+      default:
+        isPreventDefault = false;
+        break;
+    }
+    isPreventDefault && event.preventDefault();
+  };
+  const getClientXY = (event) => {
+    let clientX;
+    let clientY;
+    if (event.type.startsWith("touch")) {
+      clientY = event.touches[0].clientY;
+      clientX = event.touches[0].clientX;
+    } else {
+      clientY = event.clientY;
+      clientX = event.clientX;
+    }
+    return {
+      clientX,
+      clientY
+    };
+  };
+  const onDragStart = (event) => {
+    initData.dragging = true;
+    initData.isClick = true;
+    const { clientX, clientY } = getClientXY(event);
+    if (props.vertical) {
+      initData.startY = clientY;
+    } else {
+      initData.startX = clientX;
+    }
+    initData.startPosition = Number.parseFloat(currentPosition.value);
+    initData.newPosition = initData.startPosition;
+  };
+  const onDragging = (event) => {
+    if (initData.dragging) {
+      initData.isClick = false;
+      displayTooltip();
+      resetSize();
+      let diff;
+      const { clientX, clientY } = getClientXY(event);
+      if (props.vertical) {
+        initData.currentY = clientY;
+        diff = (initData.startY - initData.currentY) / sliderSize.value * 100;
+      } else {
+        initData.currentX = clientX;
+        diff = (initData.currentX - initData.startX) / sliderSize.value * 100;
+      }
+      initData.newPosition = initData.startPosition + diff;
+      setPosition(initData.newPosition);
+    }
+  };
+  const onDragEnd = () => {
+    if (initData.dragging) {
+      setTimeout(() => {
+        initData.dragging = false;
+        if (!initData.hovering) {
+          hideTooltip();
+        }
+        if (!initData.isClick) {
+          setPosition(initData.newPosition);
+        }
+        emitChange();
+      }, 0);
+      window.removeEventListener("mousemove", onDragging);
+      window.removeEventListener("touchmove", onDragging);
+      window.removeEventListener("mouseup", onDragEnd);
+      window.removeEventListener("touchend", onDragEnd);
+      window.removeEventListener("contextmenu", onDragEnd);
+    }
+  };
+  const setPosition = async (newPosition) => {
+    if (newPosition === null || Number.isNaN(+newPosition))
+      return;
+    newPosition = clamp(newPosition, 0, 100);
+    const fullSteps = Math.floor((max.value - min.value) / step.value);
+    const fullRangePercentage = fullSteps * step.value / (max.value - min.value) * 100;
+    const threshold = fullRangePercentage + (100 - fullRangePercentage) / 2;
+    let value;
+    if (newPosition < fullRangePercentage) {
+      const valueBetween = fullRangePercentage / fullSteps;
+      const steps = Math.round(newPosition / valueBetween);
+      value = min.value + steps * step.value;
+    } else if (newPosition < threshold) {
+      value = min.value + fullSteps * step.value;
+    } else {
+      value = max.value;
+    }
+    value = Number.parseFloat(value.toFixed(precision.value));
+    if (value !== props.modelValue) {
+      emit(UPDATE_MODEL_EVENT, value);
+    }
+    if (!initData.dragging && props.modelValue !== initData.oldValue) {
+      initData.oldValue = props.modelValue;
+    }
+    await nextTick();
+    initData.dragging && displayTooltip();
+    tooltip.value.updatePopper();
+  };
+  watch(() => initData.dragging, (val) => {
+    updateDragging(val);
+  });
+  useEventListener(button, "touchstart", onButtonDown, { passive: false });
+  return {
+    disabled,
+    button,
+    tooltip,
+    tooltipVisible,
+    showTooltip,
+    persistent,
+    wrapperStyle,
+    formatValue,
+    handleMouseEnter,
+    handleMouseLeave,
+    onButtonDown,
+    onKeyDown,
+    setPosition
+  };
+};
+
+const __default__$1 = defineComponent({
+  name: "ElSliderButton"
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: sliderButtonProps,
+  emits: sliderButtonEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const ns = useNamespace("slider");
+    const initData = reactive({
+      hovering: false,
+      dragging: false,
+      isClick: false,
+      startX: 0,
+      currentX: 0,
+      startY: 0,
+      currentY: 0,
+      startPosition: 0,
+      newPosition: 0,
+      oldValue: props.modelValue
+    });
+    const tooltipPersistent = computed(() => !showTooltip.value ? false : persistent.value);
+    const {
+      disabled,
+      button,
+      tooltip,
+      showTooltip,
+      persistent,
+      tooltipVisible,
+      wrapperStyle,
+      formatValue,
+      handleMouseEnter,
+      handleMouseLeave,
+      onButtonDown,
+      onKeyDown,
+      setPosition
+    } = useSliderButton(props, initData, emit);
+    const { hovering, dragging } = toRefs(initData);
+    expose({
+      onButtonDown,
+      onKeyDown,
+      setPosition,
+      hovering,
+      dragging
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "button",
+        ref: button,
+        class: normalizeClass([unref(ns).e("button-wrapper"), { hover: unref(hovering), dragging: unref(dragging) }]),
+        style: normalizeStyle(unref(wrapperStyle)),
+        tabindex: unref(disabled) ? void 0 : 0,
+        onMouseenter: unref(handleMouseEnter),
+        onMouseleave: unref(handleMouseLeave),
+        onMousedown: unref(onButtonDown),
+        onFocus: unref(handleMouseEnter),
+        onBlur: unref(handleMouseLeave),
+        onKeydown: unref(onKeyDown)
+      }, [
+        createVNode(unref(ElTooltip), {
+          ref_key: "tooltip",
+          ref: tooltip,
+          visible: unref(tooltipVisible),
+          placement: _ctx.placement,
+          "fallback-placements": ["top", "bottom", "right", "left"],
+          "stop-popper-mouse-event": false,
+          "popper-class": _ctx.tooltipClass,
+          disabled: !unref(showTooltip),
+          persistent: unref(tooltipPersistent)
+        }, {
+          content: withCtx(() => [
+            createElementVNode("span", null, toDisplayString(unref(formatValue)), 1)
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass([unref(ns).e("button"), { hover: unref(hovering), dragging: unref(dragging) }])
+            }, null, 2)
+          ]),
+          _: 1
+        }, 8, ["visible", "placement", "popper-class", "disabled", "persistent"])
+      ], 46, ["tabindex", "onMouseenter", "onMouseleave", "onMousedown", "onFocus", "onBlur", "onKeydown"]);
+    };
+  }
+});
+var SliderButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "button.vue"]]);
+
+const sliderMarkerProps = buildProps({
+  mark: {
+    type: definePropType([String, Object]),
+    default: void 0
+  }
+});
+var SliderMarker = defineComponent({
+  name: "ElSliderMarker",
+  props: sliderMarkerProps,
+  setup(props) {
+    const ns = useNamespace("slider");
+    const label = computed(() => {
+      return isString(props.mark) ? props.mark : props.mark.label;
+    });
+    const style = computed(() => isString(props.mark) ? void 0 : props.mark.style);
+    return () => h("div", {
+      class: ns.e("marks-text"),
+      style: style.value
+    }, label.value);
+  }
+});
+
+const useSlide = (props, initData, emit) => {
+  const { formItem: elFormItem } = useFormItem();
+  const slider = shallowRef();
+  const firstButton = ref();
+  const secondButton = ref();
+  const buttonRefs = {
+    firstButton,
+    secondButton
+  };
+  const sliderDisabled = useFormDisabled();
+  const minValue = computed(() => {
+    return Math.min(initData.firstValue, initData.secondValue);
+  });
+  const maxValue = computed(() => {
+    return Math.max(initData.firstValue, initData.secondValue);
+  });
+  const barSize = computed(() => {
+    return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`;
+  });
+  const barStart = computed(() => {
+    return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
+  });
+  const runwayStyle = computed(() => {
+    return props.vertical ? { height: props.height } : {};
+  });
+  const barStyle = computed(() => {
+    return props.vertical ? {
+      height: barSize.value,
+      bottom: barStart.value
+    } : {
+      width: barSize.value,
+      left: barStart.value
+    };
+  });
+  const resetSize = () => {
+    if (slider.value) {
+      const rect = slider.value.getBoundingClientRect();
+      initData.sliderSize = rect[props.vertical ? "height" : "width"];
+    }
+  };
+  const getButtonRefByPercent = (percent) => {
+    const targetValue = props.min + percent * (props.max - props.min) / 100;
+    if (!props.range) {
+      return firstButton;
+    }
+    let buttonRefName;
+    if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) {
+      buttonRefName = initData.firstValue < initData.secondValue ? "firstButton" : "secondButton";
+    } else {
+      buttonRefName = initData.firstValue > initData.secondValue ? "firstButton" : "secondButton";
+    }
+    return buttonRefs[buttonRefName];
+  };
+  const setPosition = (percent) => {
+    const buttonRef = getButtonRefByPercent(percent);
+    buttonRef.value.setPosition(percent);
+    return buttonRef;
+  };
+  const setFirstValue = (firstValue) => {
+    initData.firstValue = firstValue != null ? firstValue : props.min;
+    _emit(props.range ? [minValue.value, maxValue.value] : firstValue != null ? firstValue : props.min);
+  };
+  const setSecondValue = (secondValue) => {
+    initData.secondValue = secondValue;
+    if (props.range) {
+      _emit([minValue.value, maxValue.value]);
+    }
+  };
+  const _emit = (val) => {
+    emit(UPDATE_MODEL_EVENT, val);
+    emit(INPUT_EVENT, val);
+  };
+  const emitChange = async () => {
+    await nextTick();
+    emit(CHANGE_EVENT, props.range ? [minValue.value, maxValue.value] : props.modelValue);
+  };
+  const handleSliderPointerEvent = (event) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (sliderDisabled.value || initData.dragging)
+      return;
+    resetSize();
+    let newPercent = 0;
+    if (props.vertical) {
+      const clientY = (_c = (_b = (_a = event.touches) == null ? void 0 : _a.item(0)) == null ? void 0 : _b.clientY) != null ? _c : event.clientY;
+      const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom;
+      newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100;
+    } else {
+      const clientX = (_f = (_e = (_d = event.touches) == null ? void 0 : _d.item(0)) == null ? void 0 : _e.clientX) != null ? _f : event.clientX;
+      const sliderOffsetLeft = slider.value.getBoundingClientRect().left;
+      newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100;
+    }
+    if (newPercent < 0 || newPercent > 100)
+      return;
+    return setPosition(newPercent);
+  };
+  const onSliderWrapperPrevent = (event) => {
+    var _a, _b;
+    if (((_a = buttonRefs["firstButton"].value) == null ? void 0 : _a.dragging) || ((_b = buttonRefs["secondButton"].value) == null ? void 0 : _b.dragging)) {
+      event.preventDefault();
+    }
+  };
+  const onSliderDown = async (event) => {
+    const buttonRef = handleSliderPointerEvent(event);
+    if (buttonRef) {
+      await nextTick();
+      buttonRef.value.onButtonDown(event);
+    }
+  };
+  const onSliderClick = (event) => {
+    const buttonRef = handleSliderPointerEvent(event);
+    if (buttonRef) {
+      emitChange();
+    }
+  };
+  const onSliderMarkerDown = (position) => {
+    if (sliderDisabled.value || initData.dragging)
+      return;
+    const buttonRef = setPosition(position);
+    if (buttonRef) {
+      emitChange();
+    }
+  };
+  return {
+    elFormItem,
+    slider,
+    firstButton,
+    secondButton,
+    sliderDisabled,
+    minValue,
+    maxValue,
+    runwayStyle,
+    barStyle,
+    resetSize,
+    setPosition,
+    emitChange,
+    onSliderWrapperPrevent,
+    onSliderClick,
+    onSliderDown,
+    onSliderMarkerDown,
+    setFirstValue,
+    setSecondValue
+  };
+};
+
+const useStops = (props, initData, minValue, maxValue) => {
+  const stops = computed(() => {
+    if (!props.showStops || props.min > props.max)
+      return [];
+    if (props.step === 0) {
+      debugWarn("ElSlider", "step should not be 0.");
+      return [];
+    }
+    const stopCount = Math.ceil((props.max - props.min) / props.step);
+    const stepWidth = 100 * props.step / (props.max - props.min);
+    const result = Array.from({ length: stopCount - 1 }).map((_, index) => (index + 1) * stepWidth);
+    if (props.range) {
+      return result.filter((step) => {
+        return step < 100 * (minValue.value - props.min) / (props.max - props.min) || step > 100 * (maxValue.value - props.min) / (props.max - props.min);
+      });
+    } else {
+      return result.filter((step) => step > 100 * (initData.firstValue - props.min) / (props.max - props.min));
+    }
+  });
+  const getStopStyle = (position) => {
+    return props.vertical ? { bottom: `${position}%` } : { left: `${position}%` };
+  };
+  return {
+    stops,
+    getStopStyle
+  };
+};
+
+const useMarks = (props) => {
+  return computed(() => {
+    if (!props.marks) {
+      return [];
+    }
+    const marksKeys = Object.keys(props.marks);
+    return marksKeys.map(Number.parseFloat).sort((a, b) => a - b).filter((point) => point <= props.max && point >= props.min).map((point) => ({
+      point,
+      position: (point - props.min) * 100 / (props.max - props.min),
+      mark: props.marks[point]
+    }));
+  });
+};
+
+const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {
+  const _emit = (val) => {
+    emit(UPDATE_MODEL_EVENT, val);
+    emit(INPUT_EVENT, val);
+  };
+  const valueChanged = () => {
+    if (props.range) {
+      return ![minValue.value, maxValue.value].every((item, index) => item === initData.oldValue[index]);
+    } else {
+      return props.modelValue !== initData.oldValue;
+    }
+  };
+  const setValues = () => {
+    var _a, _b;
+    if (props.min > props.max) {
+      throwError("Slider", "min should not be greater than max.");
+    }
+    const val = props.modelValue;
+    if (props.range && isArray(val)) {
+      if (val[1] < props.min) {
+        _emit([props.min, props.min]);
+      } else if (val[0] > props.max) {
+        _emit([props.max, props.max]);
+      } else if (val[0] < props.min) {
+        _emit([props.min, val[1]]);
+      } else if (val[1] > props.max) {
+        _emit([val[0], props.max]);
+      } else {
+        initData.firstValue = val[0];
+        initData.secondValue = val[1];
+        if (valueChanged()) {
+          if (props.validateEvent) {
+            (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn(err));
+          }
+          initData.oldValue = val.slice();
+        }
+      }
+    } else if (!props.range && isNumber(val) && !Number.isNaN(val)) {
+      if (val < props.min) {
+        _emit(props.min);
+      } else if (val > props.max) {
+        _emit(props.max);
+      } else {
+        initData.firstValue = val;
+        if (valueChanged()) {
+          if (props.validateEvent) {
+            (_b = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _b.call(elFormItem, "change").catch((err) => debugWarn(err));
+          }
+          initData.oldValue = val;
+        }
+      }
+    }
+  };
+  setValues();
+  watch(() => initData.dragging, (val) => {
+    if (!val) {
+      setValues();
+    }
+  });
+  watch(() => props.modelValue, (val, oldVal) => {
+    if (initData.dragging || isArray(val) && isArray(oldVal) && val.every((item, index) => item === oldVal[index]) && initData.firstValue === val[0] && initData.secondValue === val[1]) {
+      return;
+    }
+    setValues();
+  }, {
+    deep: true
+  });
+  watch(() => [props.min, props.max], () => {
+    setValues();
+  });
+};
+
+const useLifecycle = (props, initData, resetSize) => {
+  const sliderWrapper = ref();
+  onMounted(async () => {
+    if (props.range) {
+      if (isArray(props.modelValue)) {
+        initData.firstValue = Math.max(props.min, props.modelValue[0]);
+        initData.secondValue = Math.min(props.max, props.modelValue[1]);
+      } else {
+        initData.firstValue = props.min;
+        initData.secondValue = props.max;
+      }
+      initData.oldValue = [initData.firstValue, initData.secondValue];
+    } else {
+      if (!isNumber(props.modelValue) || Number.isNaN(props.modelValue)) {
+        initData.firstValue = props.min;
+      } else {
+        initData.firstValue = Math.min(props.max, Math.max(props.min, props.modelValue));
+      }
+      initData.oldValue = initData.firstValue;
+    }
+    useEventListener(window, "resize", resetSize);
+    await nextTick();
+    resetSize();
+  });
+  return {
+    sliderWrapper
+  };
+};
+
+const __default__ = defineComponent({
+  name: "ElSlider"
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: sliderProps,
+  emits: sliderEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const ns = useNamespace("slider");
+    const { t } = useLocale();
+    const initData = reactive({
+      firstValue: 0,
+      secondValue: 0,
+      oldValue: 0,
+      dragging: false,
+      sliderSize: 1
+    });
+    const {
+      elFormItem,
+      slider,
+      firstButton,
+      secondButton,
+      sliderDisabled,
+      minValue,
+      maxValue,
+      runwayStyle,
+      barStyle,
+      resetSize,
+      emitChange,
+      onSliderWrapperPrevent,
+      onSliderClick,
+      onSliderDown,
+      onSliderMarkerDown,
+      setFirstValue,
+      setSecondValue
+    } = useSlide(props, initData, emit);
+    const { stops, getStopStyle } = useStops(props, initData, minValue, maxValue);
+    const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
+      formItemContext: elFormItem
+    });
+    const sliderWrapperSize = useFormSize();
+    const sliderInputSize = computed(() => props.inputSize || sliderWrapperSize.value);
+    const groupLabel = computed(() => {
+      return props.ariaLabel || t("el.slider.defaultLabel", {
+        min: props.min,
+        max: props.max
+      });
+    });
+    const firstButtonLabel = computed(() => {
+      if (props.range) {
+        return props.rangeStartLabel || t("el.slider.defaultRangeStartLabel");
+      } else {
+        return groupLabel.value;
+      }
+    });
+    const firstValueText = computed(() => {
+      return props.formatValueText ? props.formatValueText(firstValue.value) : `${firstValue.value}`;
+    });
+    const secondButtonLabel = computed(() => {
+      return props.rangeEndLabel || t("el.slider.defaultRangeEndLabel");
+    });
+    const secondValueText = computed(() => {
+      return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`;
+    });
+    const sliderKls = computed(() => [
+      ns.b(),
+      ns.m(sliderWrapperSize.value),
+      ns.is("vertical", props.vertical),
+      { [ns.m("with-input")]: props.showInput }
+    ]);
+    const markList = useMarks(props);
+    useWatch(props, initData, minValue, maxValue, emit, elFormItem);
+    const precision = computed(() => {
+      const precisions = [props.min, props.max, props.step].map((item) => {
+        const decimal = `${item}`.split(".")[1];
+        return decimal ? decimal.length : 0;
+      });
+      return Math.max.apply(null, precisions);
+    });
+    const { sliderWrapper } = useLifecycle(props, initData, resetSize);
+    const { firstValue, secondValue, sliderSize } = toRefs(initData);
+    const updateDragging = (val) => {
+      initData.dragging = val;
+    };
+    useEventListener(sliderWrapper, "touchstart", onSliderWrapperPrevent, {
+      passive: false
+    });
+    useEventListener(sliderWrapper, "touchmove", onSliderWrapperPrevent, {
+      passive: false
+    });
+    provide(sliderContextKey, {
+      ...toRefs(props),
+      sliderSize,
+      disabled: sliderDisabled,
+      precision,
+      emitChange,
+      resetSize,
+      updateDragging
+    });
+    expose({
+      onSliderClick
+    });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", {
+        id: _ctx.range ? unref(inputId) : void 0,
+        ref_key: "sliderWrapper",
+        ref: sliderWrapper,
+        class: normalizeClass(unref(sliderKls)),
+        role: _ctx.range ? "group" : void 0,
+        "aria-label": _ctx.range && !unref(isLabeledByFormItem) ? unref(groupLabel) : void 0,
+        "aria-labelledby": _ctx.range && unref(isLabeledByFormItem) ? (_a = unref(elFormItem)) == null ? void 0 : _a.labelId : void 0
+      }, [
+        createElementVNode("div", {
+          ref_key: "slider",
+          ref: slider,
+          class: normalizeClass([
+            unref(ns).e("runway"),
+            { "show-input": _ctx.showInput && !_ctx.range },
+            unref(ns).is("disabled", unref(sliderDisabled))
+          ]),
+          style: normalizeStyle(unref(runwayStyle)),
+          onMousedown: unref(onSliderDown),
+          onTouchstartPassive: unref(onSliderDown)
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).e("bar")),
+            style: normalizeStyle(unref(barStyle))
+          }, null, 6),
+          createVNode(SliderButton, {
+            id: !_ctx.range ? unref(inputId) : void 0,
+            ref_key: "firstButton",
+            ref: firstButton,
+            "model-value": unref(firstValue),
+            vertical: _ctx.vertical,
+            "tooltip-class": _ctx.tooltipClass,
+            placement: _ctx.placement,
+            role: "slider",
+            "aria-label": _ctx.range || !unref(isLabeledByFormItem) ? unref(firstButtonLabel) : void 0,
+            "aria-labelledby": !_ctx.range && unref(isLabeledByFormItem) ? (_b = unref(elFormItem)) == null ? void 0 : _b.labelId : void 0,
+            "aria-valuemin": _ctx.min,
+            "aria-valuemax": _ctx.range ? unref(secondValue) : _ctx.max,
+            "aria-valuenow": unref(firstValue),
+            "aria-valuetext": unref(firstValueText),
+            "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
+            "aria-disabled": unref(sliderDisabled),
+            "onUpdate:modelValue": unref(setFirstValue)
+          }, null, 8, ["id", "model-value", "vertical", "tooltip-class", "placement", "aria-label", "aria-labelledby", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "onUpdate:modelValue"]),
+          _ctx.range ? (openBlock(), createBlock(SliderButton, {
+            key: 0,
+            ref_key: "secondButton",
+            ref: secondButton,
+            "model-value": unref(secondValue),
+            vertical: _ctx.vertical,
+            "tooltip-class": _ctx.tooltipClass,
+            placement: _ctx.placement,
+            role: "slider",
+            "aria-label": unref(secondButtonLabel),
+            "aria-valuemin": unref(firstValue),
+            "aria-valuemax": _ctx.max,
+            "aria-valuenow": unref(secondValue),
+            "aria-valuetext": unref(secondValueText),
+            "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
+            "aria-disabled": unref(sliderDisabled),
+            "onUpdate:modelValue": unref(setSecondValue)
+          }, null, 8, ["model-value", "vertical", "tooltip-class", "placement", "aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "onUpdate:modelValue"])) : createCommentVNode("v-if", true),
+          _ctx.showStops ? (openBlock(), createElementBlock("div", { key: 1 }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(stops), (item, key) => {
+              return openBlock(), createElementBlock("div", {
+                key,
+                class: normalizeClass(unref(ns).e("stop")),
+                style: normalizeStyle(unref(getStopStyle)(item))
+              }, null, 6);
+            }), 128))
+          ])) : createCommentVNode("v-if", true),
+          unref(markList).length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            createElementVNode("div", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(markList), (item, key) => {
+                return openBlock(), createElementBlock("div", {
+                  key,
+                  style: normalizeStyle(unref(getStopStyle)(item.position)),
+                  class: normalizeClass([unref(ns).e("stop"), unref(ns).e("marks-stop")])
+                }, null, 6);
+              }), 128))
+            ]),
+            createElementVNode("div", {
+              class: normalizeClass(unref(ns).e("marks"))
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(markList), (item, key) => {
+                return openBlock(), createBlock(unref(SliderMarker), {
+                  key,
+                  mark: item.mark,
+                  style: normalizeStyle(unref(getStopStyle)(item.position)),
+                  onMousedown: withModifiers(($event) => unref(onSliderMarkerDown)(item.position), ["stop"])
+                }, null, 8, ["mark", "style", "onMousedown"]);
+              }), 128))
+            ], 2)
+          ], 64)) : createCommentVNode("v-if", true)
+        ], 46, ["onMousedown", "onTouchstartPassive"]),
+        _ctx.showInput && !_ctx.range ? (openBlock(), createBlock(unref(ElInputNumber), {
+          key: 0,
+          ref: "input",
+          "model-value": unref(firstValue),
+          class: normalizeClass(unref(ns).e("input")),
+          step: _ctx.step,
+          disabled: unref(sliderDisabled),
+          controls: _ctx.showInputControls,
+          min: _ctx.min,
+          max: _ctx.max,
+          precision: unref(precision),
+          size: unref(sliderInputSize),
+          "onUpdate:modelValue": unref(setFirstValue),
+          onChange: unref(emitChange)
+        }, null, 8, ["model-value", "class", "step", "disabled", "controls", "min", "max", "precision", "size", "onUpdate:modelValue", "onChange"])) : createCommentVNode("v-if", true)
+      ], 10, ["id", "role", "aria-label", "aria-labelledby"]);
+    };
+  }
+});
+var Slider = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "slider.vue"]]);
+
+const ElSlider = withInstall(Slider);
+
+const _hoisted_1 = ["src"];
+const DEFAULT_VOLUME = 50;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "single-player",
+  props: {
+    src: {},
+    width: { default: 300 }
+  },
+  emits: ["error", "timeupdate"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const myAudio = ref();
+    const volume = ref(DEFAULT_VOLUME);
+    const duration = ref(100);
+    const currentTime = ref(0);
+    const isDraging = ref(false);
+    const isPlaying = ref(false);
+    const myStyle = computed(() => ({ width: `${props.width}px` }));
+    const sliderStyle = computed(() => ({ width: `${props.width - 80}px` }));
+    const src = computed(() => props.src);
+    const playClass = computed(() => ({ "fa-play": !isPlaying.value, "fa-pause": isPlaying.value }));
+    const volumeIcon = computed(() => {
+      if (volume.value === 0) {
+        return "fa-volume-mute";
+      }
+      if (volume.value > 70) {
+        return "fa-volume-up";
+      }
+      return "fa-volume-down";
+    });
+    watch(volume, (val) => {
+      if (myAudio.value) {
+        myAudio.value.volume = val / 100;
+      }
+    });
+    watch(src, () => {
+      nextTick(() => {
+        myAudio.value && myAudio.value.play();
+      });
+    });
+    onMounted(() => {
+      if (!myAudio.value) {
+        return;
+      }
+      const audio = myAudio.value;
+      audio.onplay = () => {
+        audio.volume = volume.value / 100;
+        isPlaying.value = true;
+      };
+      audio.onpause = () => {
+        isPlaying.value = false;
+      };
+      audio.ontimeupdate = () => {
+        if (!isDraging.value) {
+          currentTime.value = Math.floor(audio.currentTime);
+          emits("timeupdate", currentTime.value);
+        }
+      };
+      audio.onprogress = () => {
+        duration.value = Math.floor(audio.duration);
+      };
+      audio.onerror = (e) => {
+        if (!props.src) {
+          return;
+        }
+        emits("error", e);
+      };
+    });
+    function handleTimeChange(val) {
+      if (myAudio.value) {
+        myAudio.value.currentTime = Math.floor(val);
+      }
+    }
+    function setDraging(status) {
+      isDraging.value = status;
+    }
+    function toggleVolume() {
+      volume.value = volume.value > 0 ? 0 : DEFAULT_VOLUME;
+    }
+    function togglePlay(play) {
+      if (!myAudio.value || !src.value) {
+        return;
+      }
+      if (isBoolean(play)) {
+        play ? myAudio.value.play() : myAudio.value.pause();
+        return;
+      }
+      isPlaying.value ? myAudio.value.pause() : myAudio.value.play();
+    }
+    return (_ctx, _cache) => {
+      const _component_ElSlider = ElSlider;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.main),
+        style: normalizeStyle(unref(myStyle))
+      }, [
+        createVNode(_component_ElSlider, {
+          modelValue: unref(currentTime),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentTime) ? currentTime.value = $event : null),
+          max: unref(duration),
+          style: normalizeStyle(unref(sliderStyle)),
+          "show-tooltip": false,
+          onChange: handleTimeChange,
+          onMouseedown: _cache[1] || (_cache[1] = ($event) => setDraging(true)),
+          onMouseup: _cache[2] || (_cache[2] = ($event) => setDraging(false))
+        }, null, 8, ["modelValue", "max", "style"]),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["volume-container"])
+        }, [
+          createVNode(_component_ElSlider, {
+            modelValue: unref(volume),
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(volume) ? volume.value = $event : null),
+            vertical: "",
+            height: "100px",
+            "show-tooltip": false,
+            class: normalizeClass(_ctx.$style.volume)
+          }, null, 8, ["modelValue", "class"]),
+          createVNode(_sfc_main$3, {
+            name: "fas",
+            class: normalizeClass([_ctx.$style["volume-controll"], unref(volumeIcon)]),
+            onClick: toggleVolume
+          }, null, 8, ["class"])
+        ], 2),
+        createVNode(_sfc_main$3, {
+          name: "fas",
+          class: normalizeClass([_ctx.$style.play, unref(playClass)]),
+          onClick: togglePlay
+        }, null, 8, ["class"]),
+        createElementVNode("audio", {
+          ref_key: "myAudio",
+          ref: myAudio,
+          src: unref(src),
+          loop: ""
+        }, null, 8, _hoisted_1)
+      ], 6);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const main = "_main_16n2t_1";
+const volume = "_volume_16n2t_15";
+const play = "_play_16n2t_42";
+const style0 = {
+	main: main,
+	volume: volume,
+	"volume-container": "_volume-container_16n2t_25",
+	"volume-controll": "_volume-controll_16n2t_38",
+	play: play
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_26 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_26 as _ };