@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
288 lines (287 loc) • 6.36 kB
JavaScript
import { defineComponent as C, ref as l, onUnmounted as L, createVNode as b, createTextVNode as D, watch as $, inject as V, onMounted as S } from "vue";
import { resolveAppearance as j, createPropsResolver as A } from "../dynamic-resolver/index.esm.js";
import { useDesignerComponent as E } from "../designer-canvas/index.esm.js";
import { useDesignerRules as F } from "../component/index.esm.js";
const M = "https://json-schema.org/draft/2020-12/schema", T = "https://farris-design.gitee.io/video.schema.json", B = "video", q = "A Farris Video Component", I = "object", N = {
id: {
description: "The unique identifier for a Video",
type: "string"
},
type: {
description: "The type string of Video component",
type: "string",
default: "video"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, z = [
"id",
"type"
], O = {
$schema: M,
$id: T,
title: B,
description: q,
type: I,
properties: N,
required: z
}, Y = /* @__PURE__ */ new Map([
["appearance", j]
]);
function H(o, n, i) {
return n;
}
const U = "verify-detail", W = "A Farris Component", k = "object", G = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, J = {
title: U,
description: W,
type: k,
categories: G
}, w = {
src: {
type: String,
required: !0,
default: ""
},
autoplay: {
type: Boolean,
default: !0
},
controls: {
type: Boolean,
default: !0
},
loop: {
type: Boolean,
default: !1
},
muted: {
type: Boolean,
default: !1
},
preload: {
type: String,
default: "none"
},
poster: {
type: String
},
width: {
type: [String, Number],
default: 300
},
height: {
type: [String, Number],
default: 168
}
}, R = A(w, O, Y, H, J);
function K(o, n) {
function i(e) {
e.stopPropagation(), n.emit("abort");
}
function a(e) {
e.stopPropagation(), n.emit("play");
}
function r(e) {
e.stopPropagation(), n.emit("pause");
}
function c(e) {
e.stopPropagation(), n.emit("ended");
}
function s(e) {
e.stopPropagation(), n.emit("durationchange");
}
function d(e) {
e.stopPropagation(), n.emit("error");
}
function u(e) {
e.stopPropagation(), n.emit("loadeddata");
}
function p(e) {
e.stopPropagation(), n.emit("loadedmetadata");
}
function g(e) {
e.stopPropagation(), n.emit("loadstart");
}
function m(e) {
e.stopPropagation(), n.emit("playing");
}
function f(e) {
e.stopPropagation(), n.emit("progress");
}
function y(e) {
e.stopPropagation(), n.emit("timeupdate");
}
function h(e) {
e.stopPropagation(), n.emit("volumechange");
}
function v(e) {
e.stopPropagation(), n.emit("canplay");
}
return {
onAbort: i,
onPlay: a,
onPause: r,
onEnded: c,
onDurationchange: s,
onError: d,
onLoadeddata: u,
onLoadedmetadata: p,
onLoadstart: g,
onPlaying: m,
onProgress: f,
onTimeupdate: y,
onVolumechange: h,
onCanplay: v
};
}
const P = /* @__PURE__ */ C({
name: "FVideo",
props: w,
emits: ["abort", "play", "pause", "ended", "durationchange", "canplay", "error", "loadeddata", "loadedmetadata", "loadstart", "playing", "progress", "timeupdate", "volumechange"],
setup(o, n) {
const i = l(), {
onAbort: a,
onPlay: r,
onPause: c,
onEnded: s,
onDurationchange: d,
onError: u,
onLoadeddata: p,
onLoadedmetadata: g,
onLoadstart: m,
onPlaying: f,
onProgress: y,
onTimeupdate: h,
onVolumechange: v,
onCanplay: e
} = K(o, n);
return L(() => {
}), () => b("video", {
ref: i,
src: o.src,
autoplay: o.autoplay,
controls: o.controls,
loop: o.loop,
muted: o.muted,
width: o.width,
height: o.height,
poster: o.poster,
onAbort: (t) => a(t),
onPlay: (t) => r(t),
onPause: (t) => c(t),
onEnded: (t) => s(t),
onDurationchange: (t) => d(t),
onError: (t) => u(t),
onLoadeddata: (t) => p(t),
onLoadedmetadata: (t) => g(t),
onLoadstart: (t) => m(t),
onPlaying: (t) => f(t),
onProgress: (t) => y(t),
onTimeupdate: (t) => h(t),
onVolumechange: (t) => v(t),
onCanplay: (t) => e(t)
}, [D("Your browser does not support the video tag.")]);
}
});
function Q(o, n) {
const i = l(o.width), a = l(o.height);
let r;
$(n, (s) => {
s && (i.value = s.clientWidth, r = new ResizeObserver((d) => {
if (!d || d.length < 1)
return;
const p = d[0].contentRect;
p && (i.value = p.width);
}), r.observe(s));
});
function c() {
r && r.disconnect();
}
return {
destory: c,
width: i,
height: a
};
}
const X = /* @__PURE__ */ C({
name: "FVideoDesign",
props: w,
setup(o, n) {
const i = l(), a = V("design-item-context"), r = V("designer-host-service"), c = F(a, r), s = E(i, a, c), {
width: d,
height: u,
destory: p
} = Q(o, i);
return S(() => {
i.value.componentInstance = s;
}), L(() => {
p();
}), n.expose(s.value), () => b("div", {
ref: i,
class: "drag-container",
"data-dragref": `${a.schema.id}-container`
}, [b("video", {
src: o.src,
autoplay: o.autoplay,
controls: o.controls,
loop: o.loop,
muted: o.muted,
width: d.value,
height: u.value
}, [D("Your browser does not support the video tag.")])]);
}
}), oe = {
install(o) {
o.component(P.name, P);
},
register(o, n, i, a) {
o.video = P, n.video = R;
},
registerDesigner(o, n, i) {
o.video = X, n.video = R;
}
};
export {
P as FVideo,
oe as default,
R as propsResolver,
w as videoProps
};