@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, createElementBlock as p, openBlock as n, normalizeClass as u, createVNode as O, unref as e, withCtx as y, renderSlot as b, createTextVNode as k, createCommentVNode as g, toDisplayString as m, Fragment as j, renderList as D, createBlock as M, createElementVNode 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(() => [
P("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(j, null, D(C.value, (l, N) => (n(), M(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