@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
133 lines (132 loc) • 4.94 kB
JavaScript
import { defineComponent as S, inject as L, ref as w, computed as c, watch as F, onBeforeUnmount as I, openBlock as n, createElementBlock as p, normalizeClass as u, createVNode as O, unref as e, withCtx as y, createElementVNode as j, renderSlot as b, createTextVNode as k, toDisplayString as m, createCommentVNode as g, Fragment as D, renderList as M, createBlock as P } from "vue";
import "../option/index.mjs";
import "../tooltip/index.mjs";
import { useProps as z, useNameHelper as A, emitEvent as i } from "@vexip-ui/config";
import { listToMap as H } from "@vexip-ui/utils";
import { videoControlProps as U } from "./props.mjs";
import { VIDEO_STATE as q } from "./symbol.mjs";
import G from "../tooltip/tooltip.mjs";
import J from "../option/option.vue2.mjs";
const le = /* @__PURE__ */ S({
name: "VideoControl",
__name: "video-control",
props: U,
setup(h) {
const t = z("videoControl", h, {
type: "button",
label: {
static: !0,
default: ""
},
tipClass: null,
disabled: !1,
shortcut: {
static: !0,
default: ""
},
focusable: !1,
value: null,
options: () => []
}), a = A("video"), f = L(q), v = w(t.value), E = c(() => ({
[a.be("control")]: !0,
[a.bem("control", t.type)]: t.type !== "button",
[a.bem("control", "disabled")]: t.disabled
})), T = c(() => t.type === "button" ? a.be("control-tip") : a.be("control-panel")), C = c(() => t.options.map((o) => typeof o == "string" ? { value: o } : o)), V = c(() => H(C.value, "value", void 0, !0)), d = c(() => V.value.get(v.value));
let r;
F(
() => t.shortcut,
(o) => {
r == null || r(), o && (r = f.addShortcut(o, $));
},
{ immediate: !0 }
), I(() => r == null ? void 0 : r());
function $() {
!t.disabled && i(t.onClick);
}
function B(o) {
t.disabled || o.disabled || (v.value = o.value, i(t.onSelect, o));
}
return (o, s) => (n(), p("div", {
class: u(E.value)
}, [
O(e(G), {
trigger: e(t).focusable ? "hover-focus" : "hover",
raw: "",
shift: "",
transfer: e(f).placeId && `#${e(f).placeId}`,
"tip-class": [T.value, e(t).tipClass],
"no-hover": e(t).type === "button",
disabled: e(t).type === "button" ? !e(t).label : e(t).disabled,
onTipEnter: s[2] || (s[2] = (l) => e(i)(e(t).onEnter)),
onTipLeave: s[3] || (s[3] = (l) => e(i)(e(t).onLeave))
}, {
trigger: y(() => [
j("button", {
class: u(e(a).be("control-button")),
type: "button",
onFocus: s[0] || (s[0] = (l) => e(i)(e(t).onFocus, l)),
onBlur: s[1] || (s[1] = (l) => e(i)(e(t).onBlur, l)),
onClick: $
}, [
d.value ? b(o.$slots, "selected", {
key: 0,
option: d.value
}, () => [
k(m(d.value.selectedLabel || d.value.label || d.value.value), 1)
]) : b(o.$slots, "default", { key: 1 })
], 34)
]),
default: y(() => [
e(t).type === "button" ? (n(), p("span", {
key: 0,
class: u(e(a).be("control-name"))
}, [
b(o.$slots, "label", {}, () => [
k(m(e(t).label) + " ", 1),
e(t).shortcut ? (n(), p("span", {
key: 0,
class: u(e(a).be("control-shortcut"))
}, m(`(${e(t).shortcut})`), 3)) : g("", !0)
])
], 2)) : b(o.$slots, "panel", { key: 1 }, () => [
e(t).type === "select" ? (n(), p("ul", {
key: 0,
class: u(e(a).be("control-options"))
}, [
(n(!0), p(D, null, M(C.value, (l, N) => (n(), P(e(J), {
key: l.value,
class: u({
[e(a).be("control-option")]: !0,
[e(a).bem("control-option", "selected")]: l.value === v.value
}),
label: l.label,
value: l.value,
disabled: l.disabled,
divided: l.disabled,
title: l.title,
"no-hover": "",
onSelect: (Q) => B(l)
}, {
default: y(() => [
b(o.$slots, "option", {
option: l,
index: N,
selected: l.value === v.value
}, () => [
k(m(l.label || l.value), 1)
])
]),
_: 2
}, 1032, ["class", "label", "value", "disabled", "divided", "title", "onSelect"]))), 128))
], 2)) : g("", !0)
])
]),
_: 3
}, 8, ["trigger", "transfer", "tip-class", "no-hover", "disabled"])
], 2));
}
});
export {
le as default
};
//# sourceMappingURL=video-control.vue2.mjs.map