@extclp/vexip-ui/es/components/video/video-volume.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as V, inject as I, ref as i, computed as S, watch as b, openBlock as C, createBlock as N, normalizeClass as m, unref as o, withCtx as v, createElementVNode as k, toDisplayString as w, createVNode as p, normalizeProps as y, guardReactiveProps as E } from "vue";
import "../icon/index.mjs";
import "../slider/index.mjs";
import { useNameHelper as z, useIcons as B } from "@vexip-ui/config";
import "./video-control.vue.mjs";
import { mergeIconScale as D } from "./helper.mjs";
import { VIDEO_STATE as M } from "./symbol.mjs";
import P from "./video-control.vue2.mjs";
import T from "../slider/slider.vue2.mjs";
import $ from "../icon/icon.mjs";
const Q = /* @__PURE__ */ V({
  name: "VideoVolume",
  __name: "video-volume",
  props: {
    volume: {
      type: Number,
      default: 1
    }
  },
  emits: ["change"],
  setup(f, { expose: d, emit: _ }) {
    const r = f, c = _, a = z("video"), n = B(), g = I(M), e = i(r.volume), t = i(!1), h = S(() => t.value ? n.value.volumeMute : e.value < 0.5 ? n.value.volumeLow : n.value.volume);
    b(
      () => r.volume,
      (l) => {
        e.value = l;
      }
    ), d({ toggleMute: s });
    let u = e.value;
    function s() {
      t.value ? e.value = u <= 0 ? 0.5 : u : (u = e.value, e.value = 0), t.value = !t.value, c("change", e.value);
    }
    function x(l) {
      l /= 100, u = l, e.value = l, t.value = l <= 0, c("change", e.value);
    }
    return (l, j) => (C(), N(P, {
      class: m(o(a).be("volume")),
      type: "panel",
      "tip-class": o(a).be("volume-panel"),
      onClick: s
    }, {
      panel: v(() => [
        k("div", {
          class: m(o(a).be("volume-text"))
        }, w((e.value * 100).toFixed()), 3),
        p(o(T), {
          value: e.value * 100,
          class: m(o(a).be("volume-slider")),
          min: 0,
          max: 100,
          vertical: "",
          "hide-tip": "",
          reverse: "",
          range: !1,
          onInput: x
        }, null, 8, ["value", "class"])
      ]),
      default: v(() => [
        p(o($), y(E(o(D)(o(g).iconScale, h.value))), null, 16)
      ]),
      _: 1
    }, 8, ["class", "tip-class"]));
  }
});
export {
  Q as default
};
//# sourceMappingURL=video-volume.vue2.mjs.map