@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, createBlock as C, openBlock as N, unref as o, normalizeClass as m, withCtx as v, createVNode as p, normalizeProps as k, guardReactiveProps as w, createElementVNode as y, toDisplayString 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 "../icon/icon.mjs";
import $ from "../slider/slider.vue2.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) => (N(), C(P, {
      class: m(o(a).be("volume")),
      type: "panel",
      "tip-class": o(a).be("volume-panel"),
      onClick: s
    }, {
      panel: v(() => [
        y("div", {
          class: m(o(a).be("volume-text"))
        }, E((e.value * 100).toFixed()), 3),
        p(o($), {
          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(T), k(w(o(D)(o(g).iconScale, h.value))), null, 16)
      ]),
      _: 1
    }, 8, ["class", "tip-class"]));
  }
});
export {
  Q as default
};
//# sourceMappingURL=video-volume.vue2.mjs.map