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

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

import { defineComponent as S, ref as r, computed as V, watch as d, onMounted as $, nextTick as N, createElementBlock as h, openBlock as p, normalizeStyle as I, normalizeClass as f, unref as l, createBlock as M, Fragment as D, createElementVNode as v, toDisplayString as B } from "vue";
import "../input/index.mjs";
import { useNameHelper as F } from "@vexip-ui/config";
import { getRangeWidth as H, isValidNumber as R, toNumber as U } from "@vexip-ui/utils";
import { formatSeconds as E } from "./helper.mjs";
import W from "../input/input.mjs";
const L = /* @__PURE__ */ S({
  name: "VideoTimer",
  __name: "video-timer",
  props: {
    time: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["change"],
  setup(c, { emit: T }) {
    const a = c, x = T, o = F("video"), i = r(a.time), u = r(!1), b = r(84), s = r(""), y = r(), m = r(), k = V(() => E(i.value));
    d(
      () => a.time,
      (e) => {
        i.value = e;
      }
    ), d(
      () => a.disabled,
      (e) => {
        e && (u.value = !1);
      }
    ), $(() => {
      d(
        () => a.duration,
        () => {
          N(() => {
            b.value = m.value ? H(m.value) * 2 + 20 : 84;
          });
        },
        { immediate: !0 }
      );
    });
    function C() {
      !a.disabled && !u.value && (u.value = !0, s.value = k.value, N(() => {
        var e;
        (e = y.value) == null || e.focus();
      }));
    }
    function g(e) {
      if (u.value = !1, e) {
        const t = s.value.trim().split(":");
        t.every((n) => R(n)) && (i.value = t.map(U).reverse().slice(0, 3).reduce((n, w, z) => n + 60 ** z * w, 0), i.value = Math.min(i.value, a.duration), x("change", i.value));
      }
    }
    return (e, t) => (p(), h("div", {
      class: f([l(o).be("control"), l(o).be("timer"), a.disabled && l(o).bem("control", "disabled")]),
      style: I({ width: `${b.value}px` }),
      onClick: C
    }, [
      u.value ? (p(), M(l(W), {
        key: 0,
        ref_key: "input",
        ref: y,
        value: s.value,
        "onUpdate:value": t[0] || (t[0] = (n) => s.value = n),
        class: f(l(o).be("timer-input")),
        size: "small",
        transparent: "",
        onBlur: t[1] || (t[1] = (n) => g(!1)),
        onEnter: t[2] || (t[2] = (n) => g(!0))
      }, null, 8, ["value", "class"])) : (p(), h(D, { key: 1 }, [
        v("span", null, B(k.value), 1),
        v("span", {
          class: f(l(o).be("timer-separator"))
        }, "/", 2),
        v("span", {
          ref_key: "durationEl",
          ref: m
        }, B(l(E)(c.duration)), 513)
      ], 64))
    ], 6));
  }
});
export {
  L as default
};
//# sourceMappingURL=video-timer.vue2.mjs.map