@wfrog/vc
Version:
`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。
1,349 lines (1,310 loc) • 62.1 kB
JavaScript
import './index.css'
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
// vue-script:D:\project\_my\vc\src\components\dialog-camera-upload\index.vue?type=script
import { defineComponent as _defineComponent7 } from "vue";
import { unref as _unref5, vShow as _vShow2, createVNode as _createVNode5, withDirectives as _withDirectives4, createElementVNode as _createElementVNode4, Transition as _Transition, withCtx as _withCtx6, normalizeClass as _normalizeClass8, createCommentVNode as _createCommentVNode5, openBlock as _openBlock9, createElementBlock as _createElementBlock7, createBlock as _createBlock7, normalizeStyle as _normalizeStyle3, renderList as _renderList, Fragment as _Fragment2, createTextVNode as _createTextVNode4, isRef as _isRef3, pushScopeId as _pushScopeId4, popScopeId as _popScopeId4 } from "vue";
import { computed as computed7, reactive as reactive3, ref as ref6, watch as watch5 } from "vue";
import { defaultWindow as defaultWindow5, file as file3 } from "@wfrog/utils";
import { ElAlert, ElButton as ElButton4, ElIcon as ElIcon2, ElImage as ElImage2, ElOption, ElSelect, vLoading as vLoading3 } from "element-plus";
import { Camera, Upload } from "@element-plus/icons-vue";
// node_modules/@vueuse/shared/node_modules/vue-demi/lib/index.mjs
var lib_exports = {};
__export(lib_exports, {
Vue: () => Vue,
Vue2: () => Vue2,
del: () => del,
install: () => install,
isVue2: () => isVue2,
isVue3: () => isVue3,
set: () => set
});
__reExport(lib_exports, vue_star);
import * as Vue from "vue";
import * as vue_star from "vue";
var isVue2 = false;
var isVue3 = true;
var Vue2 = void 0;
function install() {
}
function set(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key);
target.splice(key, 1, val);
return val;
}
target[key] = val;
return val;
}
function del(target, key) {
if (Array.isArray(target)) {
target.splice(key, 1);
return;
}
delete target[key];
}
// node_modules/@vueuse/shared/index.mjs
var _a;
var isClient = typeof window !== "undefined";
var isString = (val) => typeof val === "string";
var noop = () => {
};
var isIOS = isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
function resolveUnref(r) {
return typeof r === "function" ? r() : (0, lib_exports.unref)(r);
}
function createFilterWrapper(filter, fn) {
function wrapper(...args) {
filter(() => fn.apply(this, args), { fn, thisArg: this, args });
}
return wrapper;
}
function throttleFilter(ms, trailing = true, leading = true) {
let lastExec = 0;
let timer;
let isLeading = true;
const clear = () => {
if (timer) {
clearTimeout(timer);
timer = void 0;
}
};
const filter = (invoke) => {
const duration = resolveUnref(ms);
const elapsed = Date.now() - lastExec;
clear();
if (duration <= 0) {
lastExec = Date.now();
return invoke();
}
if (elapsed > duration && (leading || !isLeading)) {
lastExec = Date.now();
invoke();
} else if (trailing) {
timer = setTimeout(() => {
lastExec = Date.now();
isLeading = true;
clear();
invoke();
}, duration);
}
if (!leading && !timer)
timer = setTimeout(() => isLeading = true, duration);
isLeading = false;
};
return filter;
}
function identity(arg) {
return arg;
}
function createSingletonPromise(fn) {
let _promise;
function wrapper() {
if (!_promise)
_promise = fn();
return _promise;
}
wrapper.reset = async () => {
const _prev = _promise;
_promise = void 0;
if (_prev)
await _prev;
};
return wrapper;
}
function tryOnScopeDispose(fn) {
if ((0, lib_exports.getCurrentScope)()) {
(0, lib_exports.onScopeDispose)(fn);
return true;
}
return false;
}
function useThrottleFn(fn, ms = 200, trailing = false, leading = true) {
return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
}
function tryOnMounted(fn, sync = true) {
if ((0, lib_exports.getCurrentInstance)())
(0, lib_exports.onMounted)(fn);
else if (sync)
fn();
else
(0, lib_exports.nextTick)(fn);
}
function useToggle(initialValue = false, options = {}) {
const {
truthyValue = true,
falsyValue = false
} = options;
const valueIsRef = (0, lib_exports.isRef)(initialValue);
const _value = (0, lib_exports.ref)(initialValue);
function toggle(value) {
if (arguments.length) {
_value.value = value;
return _value.value;
} else {
const truthy = resolveUnref(truthyValue);
_value.value = _value.value === truthy ? resolveUnref(falsyValue) : truthy;
return _value.value;
}
}
if (valueIsRef)
return toggle;
else
return [_value, toggle];
}
// node_modules/@vueuse/core/node_modules/vue-demi/lib/index.mjs
var lib_exports2 = {};
__export(lib_exports2, {
Vue: () => Vue3,
Vue2: () => Vue22,
del: () => del2,
install: () => install2,
isVue2: () => isVue22,
isVue3: () => isVue32,
set: () => set2
});
__reExport(lib_exports2, vue_star2);
import * as Vue3 from "vue";
import * as vue_star2 from "vue";
var isVue22 = false;
var isVue32 = true;
var Vue22 = void 0;
function install2() {
}
function set2(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key);
target.splice(key, 1, val);
return val;
}
target[key] = val;
return val;
}
function del2(target, key) {
if (Array.isArray(target)) {
target.splice(key, 1);
return;
}
delete target[key];
}
// node_modules/@vueuse/core/index.mjs
function unrefElement(elRef) {
var _a2;
const plain = resolveUnref(elRef);
return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
}
var defaultWindow = isClient ? window : void 0;
var defaultDocument = isClient ? window.document : void 0;
var defaultNavigator = isClient ? window.navigator : void 0;
var defaultLocation = isClient ? window.location : void 0;
function useEventListener(...args) {
let target;
let event;
let listener;
let options;
if (isString(args[0])) {
[event, listener, options] = args;
target = defaultWindow;
} else {
[target, event, listener, options] = args;
}
if (!target)
return noop;
let cleanup = noop;
const stopWatch = (0, lib_exports2.watch)(() => unrefElement(target), (el) => {
cleanup();
if (!el)
return;
el.addEventListener(event, listener, options);
cleanup = () => {
el.removeEventListener(event, listener, options);
cleanup = noop;
};
}, { immediate: true, flush: "post" });
const stop = () => {
stopWatch();
cleanup();
};
tryOnScopeDispose(stop);
return stop;
}
function useSupported(callback, sync = false) {
const isSupported = (0, lib_exports2.ref)();
const update = () => isSupported.value = Boolean(callback());
update();
tryOnMounted(update, sync);
return isSupported;
}
var _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
var globalKey = "__vueuse_ssr_handlers__";
_global[globalKey] = _global[globalKey] || {};
var handlers = _global[globalKey];
function usePermission(permissionDesc, options = {}) {
const {
controls = false,
navigator = defaultNavigator
} = options;
const isSupported = useSupported(() => navigator && "permissions" in navigator);
let permissionStatus;
const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
const state = (0, lib_exports2.ref)();
const onChange = () => {
if (permissionStatus)
state.value = permissionStatus.state;
};
const query = createSingletonPromise(async () => {
if (!isSupported.value)
return;
if (!permissionStatus) {
try {
permissionStatus = await navigator.permissions.query(desc);
useEventListener(permissionStatus, "change", onChange);
onChange();
} catch (e) {
state.value = "prompt";
}
}
return permissionStatus;
});
query();
if (controls) {
return {
state,
isSupported,
query
};
} else {
return state;
}
}
function useDevicesList(options = {}) {
const {
navigator = defaultNavigator,
requestPermissions = false,
constraints = { audio: true, video: true },
onUpdated: onUpdated2
} = options;
const devices = (0, lib_exports2.ref)([]);
const videoInputs = (0, lib_exports2.computed)(() => devices.value.filter((i) => i.kind === "videoinput"));
const audioInputs = (0, lib_exports2.computed)(() => devices.value.filter((i) => i.kind === "audioinput"));
const audioOutputs = (0, lib_exports2.computed)(() => devices.value.filter((i) => i.kind === "audiooutput"));
const isSupported = useSupported(() => navigator && navigator.mediaDevices && navigator.mediaDevices.enumerateDevices);
const permissionGranted = (0, lib_exports2.ref)(false);
async function update() {
if (!isSupported.value)
return;
devices.value = await navigator.mediaDevices.enumerateDevices();
onUpdated2 == null ? void 0 : onUpdated2(devices.value);
}
async function ensurePermissions() {
if (!isSupported.value)
return false;
if (permissionGranted.value)
return true;
const { state, query } = usePermission("camera", { controls: true });
await query();
if (state.value !== "granted") {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
stream.getTracks().forEach((t) => t.stop());
update();
permissionGranted.value = true;
} else {
permissionGranted.value = true;
}
return permissionGranted.value;
}
if (isSupported.value) {
if (requestPermissions)
ensurePermissions();
useEventListener(navigator.mediaDevices, "devicechange", update);
update();
}
return {
devices,
ensurePermissions,
permissionGranted,
videoInputs,
audioInputs,
audioOutputs,
isSupported
};
}
var SwipeDirection;
(function(SwipeDirection2) {
SwipeDirection2["UP"] = "UP";
SwipeDirection2["RIGHT"] = "RIGHT";
SwipeDirection2["DOWN"] = "DOWN";
SwipeDirection2["LEFT"] = "LEFT";
SwipeDirection2["NONE"] = "NONE";
})(SwipeDirection || (SwipeDirection = {}));
var __defProp2 = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp2.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var _TransitionPresets = {
easeInSine: [0.12, 0, 0.39, 0],
easeOutSine: [0.61, 1, 0.88, 1],
easeInOutSine: [0.37, 0, 0.63, 1],
easeInQuad: [0.11, 0, 0.5, 0],
easeOutQuad: [0.5, 1, 0.89, 1],
easeInOutQuad: [0.45, 0, 0.55, 1],
easeInCubic: [0.32, 0, 0.67, 0],
easeOutCubic: [0.33, 1, 0.68, 1],
easeInOutCubic: [0.65, 0, 0.35, 1],
easeInQuart: [0.5, 0, 0.75, 0],
easeOutQuart: [0.25, 1, 0.5, 1],
easeInOutQuart: [0.76, 0, 0.24, 1],
easeInQuint: [0.64, 0, 0.78, 0],
easeOutQuint: [0.22, 1, 0.36, 1],
easeInOutQuint: [0.83, 0, 0.17, 1],
easeInExpo: [0.7, 0, 0.84, 0],
easeOutExpo: [0.16, 1, 0.3, 1],
easeInOutExpo: [0.87, 0, 0.13, 1],
easeInCirc: [0.55, 0, 1, 0.45],
easeOutCirc: [0, 0.55, 0.45, 1],
easeInOutCirc: [0.85, 0, 0.15, 1],
easeInBack: [0.36, 0, 0.66, -0.56],
easeOutBack: [0.34, 1.56, 0.64, 1],
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
};
var TransitionPresets = __spreadValues({
linear: identity
}, _TransitionPresets);
function useUserMedia(options = {}) {
var _a2, _b;
const enabled = (0, lib_exports2.ref)((_a2 = options.enabled) != null ? _a2 : false);
const autoSwitch = (0, lib_exports2.ref)((_b = options.autoSwitch) != null ? _b : true);
const videoDeviceId = (0, lib_exports2.ref)(options.videoDeviceId);
const audioDeviceId = (0, lib_exports2.ref)(options.audioDeviceId);
const { navigator = defaultNavigator } = options;
const isSupported = useSupported(() => {
var _a22;
return (_a22 = navigator == null ? void 0 : navigator.mediaDevices) == null ? void 0 : _a22.getUserMedia;
});
const stream = (0, lib_exports2.shallowRef)();
function getDeviceOptions(device) {
if (device.value === "none" || device.value === false)
return false;
if (device.value == null)
return true;
return {
deviceId: device.value
};
}
async function _start() {
if (!isSupported.value || stream.value)
return;
stream.value = await navigator.mediaDevices.getUserMedia({
video: getDeviceOptions(videoDeviceId),
audio: getDeviceOptions(audioDeviceId)
});
return stream.value;
}
async function _stop() {
var _a22;
(_a22 = stream.value) == null ? void 0 : _a22.getTracks().forEach((t) => t.stop());
stream.value = void 0;
}
function stop() {
_stop();
enabled.value = false;
}
async function start() {
await _start();
if (stream.value)
enabled.value = true;
return stream.value;
}
async function restart() {
_stop();
return await start();
}
(0, lib_exports2.watch)(enabled, (v) => {
if (v)
_start();
else
_stop();
}, { immediate: true });
(0, lib_exports2.watch)([videoDeviceId, audioDeviceId], () => {
if (autoSwitch.value && stream.value)
restart();
}, { immediate: true });
return {
isSupported,
stream,
start,
stop,
restart,
videoDeviceId,
audioDeviceId,
enabled,
autoSwitch
};
}
// vue-script:D:\project\_my\vc\src\components\upload-file\index.vue?type=script
import { defineComponent as _defineComponent6 } from "vue";
import { unref as _unref4, createTextVNode as _createTextVNode3, normalizeClass as _normalizeClass7, normalizeStyle as _normalizeStyle2, withCtx as _withCtx5, openBlock as _openBlock8, createBlock as _createBlock6, createCommentVNode as _createCommentVNode4, Fragment as _Fragment, createElementBlock as _createElementBlock6, renderSlot as _renderSlot3, toDisplayString as _toDisplayString2, createVNode as _createVNode4, withDirectives as _withDirectives3 } from "vue";
import { computed as computed6, nextTick as nextTick4, ref as ref5 } from "vue";
import { ElImage, ElUpload, vLoading as vLoading2 } from "element-plus";
import { defaultWindow as defaultWindow4, file as file2 } from "@wfrog/utils";
// vue-script:D:\project\_my\vc\src\components\el-icon\index.vue?type=script
import { defineComponent } from "vue";
import { ElIcon } from "element-plus";
import * as Icons from "@element-plus/icons-vue";
var el_icon_default = defineComponent({
components: { ...Icons, ElIcon },
props: {
name: { type: String, required: true },
color: { type: String, default: "" },
size: { type: [Number, String], default: "" }
}
});
// vue-template:D:\project\_my\vc\src\components\el-icon\index.vue?type=template
import { resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx } from "vue";
function render(_ctx, _cache) {
const _component_ElIcon = _resolveComponent("ElIcon");
return _openBlock(), _createBlock(_component_ElIcon, {
size: _ctx.size,
color: _ctx.color,
class: _normalizeClass(_ctx.$style.icon)
}, {
default: _withCtx(() => [
(_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.name)))
]),
_: 1
}, 8, ["size", "color", "class"]);
}
// vue-style:D:\project\_my\vc\src\components\el-icon\index.vue?type=style&index=0&isModule=true&isNameImport=true
var el_icon_default2 = { icon: "_icon_1iurh_1" };
// src/components/el-icon/index.vue
el_icon_default.render = render;
var cssModules = {};
el_icon_default.__cssModules = cssModules = {};
cssModules["$style"] = el_icon_default2;
var el_icon_default3 = el_icon_default;
// vue-script:D:\project\_my\vc\src\components\button\index.vue?type=script
import { defineComponent as _defineComponent3 } from "vue";
import { unref as _unref, openBlock as _openBlock5, createBlock as _createBlock3, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementBlock as _createElementBlock4, mergeProps as _mergeProps, withCtx as _withCtx2, createVNode as _createVNode, pushScopeId as _pushScopeId2, popScopeId as _popScopeId2 } from "vue";
import { computed as computed3 } from "vue";
import { ElButton, ElMessageBox, ElPopconfirm } from "element-plus";
// src/use/useStore.ts
import { inject as inject3, provide as provide2 } from "vue";
function useInject(keyName) {
const keys = inject3(keyName, {});
const result = {};
Object.keys(keys).forEach((key) => {
result[key] = inject3(keys[key]);
});
return result;
}
// src/components/config-provider/config.ts
var KEY_NAME = Symbol("VCConfig");
var injectConfig = () => useInject(KEY_NAME);
// vue-script:D:\project\_my\vc\src\components\icon\index.vue?type=script
import { defineComponent as defineComponent2 } from "vue";
// vue-script:D:\project\_my\vc\src\components\svg-icon\index.vue?type=script
import { defineComponent as _defineComponent } from "vue";
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass2, openBlock as _openBlock2, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
var _hoisted_1 = ["xlink:href"];
var svg_icon_default = /* @__PURE__ */ _defineComponent({
__name: "index",
props: {
name: { type: String, required: true }
},
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
return _openBlock2(), _createElementBlock("svg", {
class: _normalizeClass2(["svg-icon", [_ctx.$style.icon]]),
"aria-hidden": "true"
}, [
_createElementVNode("use", {
"xlink:href": `#icon-${props.name}`
}, null, 8, _hoisted_1)
], 2);
};
}
});
// vue-style:D:\project\_my\vc\src\components\svg-icon\index.vue?type=style&index=0&isModule=true&isNameImport=true
var svg_icon_default2 = { icon: "_icon_15t6e_1" };
// src/components/svg-icon/index.vue
var cssModules2 = {};
svg_icon_default.__cssModules = cssModules2 = {};
cssModules2["$style"] = svg_icon_default2;
var svg_icon_default3 = svg_icon_default;
// vue-script:D:\project\_my\vc\src\components\awesome-icon\index.vue?type=script
import { defineComponent as _defineComponent2 } from "vue";
import { normalizeClass as _normalizeClass3, openBlock as _openBlock3, createElementBlock as _createElementBlock2 } from "vue";
import { onMounted as onMounted3 } from "vue";
import { defaultWindow as defaultWindow2, loader } from "@wfrog/utils";
var awesome_icon_default = /* @__PURE__ */ _defineComponent2({
__name: "index",
props: {
name: { type: String, default: "" },
mode: { type: String, default: "css" }
},
setup(__props) {
const props = __props;
const loaderSource = async () => {
const cdn = props.mode === "svg" ? "fontawesomeJs" : "fontawesomeCss";
await loader.loadCdnSingle(cdn);
};
onMounted3(() => {
if (defaultWindow2) {
if (!defaultWindow2.ElementPlusComponents?.isAwesomeIconLock) {
defaultWindow2.ElementPlusComponents = { ...defaultWindow2.ElementPlusComponents, isAwesomeIconLock: true };
loaderSource();
}
}
});
return (_ctx, _cache) => {
return _openBlock3(), _createElementBlock2("i", {
class: _normalizeClass3(["awesome-icon", props.name])
}, null, 2);
};
}
});
// src/components/awesome-icon/index.vue
var awesome_icon_default2 = awesome_icon_default;
// vue-script:D:\project\_my\vc\src\components\icon\index.vue?type=script
var icon_default = defineComponent2({
components: { HEl: el_icon_default3, HSvg: svg_icon_default3, HAwesome: awesome_icon_default2 },
props: {
name: { type: String, required: true },
type: { type: String, required: true }
}
});
// vue-template:D:\project\_my\vc\src\components\icon\index.vue?type=template
import { resolveDynamicComponent as _resolveDynamicComponent2, openBlock as _openBlock4, createBlock as _createBlock2, normalizeClass as _normalizeClass4, createElementBlock as _createElementBlock3 } from "vue";
function render2(_ctx, _cache) {
return _openBlock4(), _createElementBlock3("i", {
class: _normalizeClass4(["svg-icon-box", [_ctx.$style.box]])
}, [
(_openBlock4(), _createBlock2(_resolveDynamicComponent2(`h-${_ctx.type}`), {
name: _ctx.name,
class: "site-icon"
}, null, 8, ["name"]))
], 2);
}
// vue-style:D:\project\_my\vc\src\components\icon\index.vue?type=style&index=0&isModule=true&isNameImport=true
var icon_default2 = { box: "_box_1wvpk_1" };
// src/components/icon/index.vue
icon_default.render = render2;
var cssModules3 = {};
icon_default.__cssModules = cssModules3 = {};
cssModules3["$style"] = icon_default2;
var icon_default3 = icon_default;
// vue-script:D:\project\_my\vc\src\components\button\index.vue?type=script
var _hoisted_12 = { key: 1 };
var _hoisted_2 = { key: 1 };
var button_default = /* @__PURE__ */ _defineComponent3({
__name: "index",
props: {
icon: { type: null, required: false },
time: { type: Number, required: false, default: 800 },
type: { type: null, required: false, default: "" },
confirm: { type: String, required: false, default: void 0 },
confirmInfo: { type: Object, required: false }
},
emits: ["click"],
setup(__props, { emit: emits }) {
const props = __props;
const { button: buttonConfig } = injectConfig();
const defaultConfirmInfo = { title: "\u63D0\u793A", confirmButtonText: "\u786E\u5B9A", cancelButtonText: "\u53D6\u6D88", msg: "\u786E\u8BA4\u8981\u5220\u9664\u8FD9\u6761\u6570\u636E\u5417\uFF1F" };
const myConfirm = computed3(() => buttonConfig?.confirm !== void 0 ? buttonConfig?.confirm : props.confirm !== void 0 ? props.confirm : ["danger", "warning"].includes(props.type) ? "messagebox" : void 0);
const { name, type: iconType = "el", position = "left" } = props.icon || {};
const { msg, title, confirmButtonText, cancelButtonText } = { ...defaultConfirmInfo, ...buttonConfig?.confirmInfo, ...props.confirmInfo };
const handleComfirm = async () => {
try {
const result = await ElMessageBox.confirm(msg, title, { confirmButtonText, cancelButtonText, type: "warning", dangerouslyUseHTMLString: true });
return result;
} catch {
return false;
}
};
const handleClick = useThrottleFn(async (e) => {
if (myConfirm.value === "messagebox") {
const result = await handleComfirm();
result && emits("click", e);
return;
}
if (myConfirm.value === "popconfirm") {
return;
}
emits("click", e);
}, props.time);
const handleConfirm = useThrottleFn(async (e) => {
emits("click", e);
}, props.time);
return (_ctx, _cache) => {
return _unref(myConfirm) === "popconfirm" ? (_openBlock5(), _createBlock3(_unref(ElPopconfirm), {
key: 0,
title: _unref(msg),
"confirm-button-text": _unref(confirmButtonText),
"cancel-button-text": _unref(cancelButtonText),
"popper-class": `${_ctx.$style.popper} el-popover`,
onConfirm: _unref(handleConfirm)
}, {
reference: _withCtx2(() => [
_createVNode(_unref(ElButton), _mergeProps(_ctx.$attrs, {
type: __props.type,
class: _ctx.$style.button,
onClick: _unref(handleClick)
}), {
default: _withCtx2(() => [
_unref(position) === "left" && _unref(name) ? (_openBlock5(), _createBlock3(icon_default3, {
key: 0,
type: _unref(iconType),
name: _unref(name)
}, null, 8, ["type", "name"])) : _createCommentVNode("v-if", true),
_ctx.$slots.default ? (_openBlock5(), _createElementBlock4("span", _hoisted_12, [
_renderSlot(_ctx.$slots, "default")
])) : _createCommentVNode("v-if", true),
_unref(position) === "right" && _unref(name) ? (_openBlock5(), _createBlock3(icon_default3, {
key: 2,
type: _unref(iconType),
name: _unref(name)
}, null, 8, ["type", "name"])) : _createCommentVNode("v-if", true)
]),
_: 3
}, 16, ["type", "class", "onClick"])
]),
_: 3
}, 8, ["title", "confirm-button-text", "cancel-button-text", "popper-class", "onConfirm"])) : (_openBlock5(), _createBlock3(_unref(ElButton), _mergeProps({ key: 1 }, _ctx.$attrs, {
type: __props.type,
class: _ctx.$style.button,
onClick: _unref(handleClick)
}), {
default: _withCtx2(() => [
_unref(position) === "left" && _unref(name) ? (_openBlock5(), _createBlock3(icon_default3, {
key: 0,
type: _unref(iconType),
name: _unref(name)
}, null, 8, ["type", "name"])) : _createCommentVNode("v-if", true),
_ctx.$slots.default ? (_openBlock5(), _createElementBlock4("span", _hoisted_2, [
_renderSlot(_ctx.$slots, "default")
])) : _createCommentVNode("v-if", true),
_unref(position) === "right" && _unref(name) ? (_openBlock5(), _createBlock3(icon_default3, {
key: 2,
type: _unref(iconType),
name: _unref(name)
}, null, 8, ["type", "name"])) : _createCommentVNode("v-if", true)
]),
_: 3
}, 16, ["type", "class", "onClick"]));
};
}
});
// vue-style:D:\project\_my\vc\src\components\button\index.vue?type=style&index=0&isModule=true&isNameImport=true
var button_default2 = { button: "_button_1dzv7_1", popper: "_popper_1dzv7_5" };
// src/components/button/index.vue
var cssModules4 = {};
button_default.__cssModules = cssModules4 = {};
cssModules4["$style"] = button_default2;
var button_default3 = button_default;
// vue-script:D:\project\_my\vc\src\components\cropper\index.vue?type=script
import { defineComponent as _defineComponent5 } from "vue";
import { unref as _unref3, normalizeClass as _normalizeClass6, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode3, withDirectives as _withDirectives2, createTextVNode as _createTextVNode2, withCtx as _withCtx4, createVNode as _createVNode3, isRef as _isRef2, openBlock as _openBlock7, createBlock as _createBlock5, createElementBlock as _createElementBlock5 } from "vue";
import { computed as computed5, nextTick as nextTick3, onMounted as onMounted4, onUnmounted as onUnmounted2, ref as ref4, shallowRef as shallowRef3, watch as watch4 } from "vue";
import { ElButton as ElButton3, ElLink, ElSpace, vLoading } from "element-plus";
import { defaultWindow as defaultWindow3, file, loader as loader2 } from "@wfrog/utils";
import { debounce } from "lodash-es";
// vue-script:D:\project\_my\vc\src\components\dialog\index.vue?type=script
import { defineComponent as _defineComponent4 } from "vue";
import { unref as _unref2, renderSlot as _renderSlot2, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass5, createElementVNode as _createElementVNode2, vShow as _vShow, createVNode as _createVNode2, withDirectives as _withDirectives, withCtx as _withCtx3, openBlock as _openBlock6, createBlock as _createBlock4, createCommentVNode as _createCommentVNode2, isRef as _isRef, mergeProps as _mergeProps2, createSlots as _createSlots, pushScopeId as _pushScopeId3, popScopeId as _popScopeId3 } from "vue";
import { computed as computed4, ref as ref3, useCssModule, watch as watch3 } from "vue";
import { ElButton as ElButton2, ElDialog, ElScrollbar } from "element-plus";
import { Close, CopyDocument, FullScreen } from "@element-plus/icons-vue";
var _hoisted_13 = ["id"];
var dialog_default = /* @__PURE__ */ _defineComponent4({
__name: "index",
props: {
modelValue: { type: Boolean, required: true, default: false },
title: { type: String, required: false, default: "\u5BF9\u8BDD\u6846" },
showFullscreen: { type: Boolean, required: false, default: true },
showDefaultFooter: { type: Boolean, required: false, default: false },
lazy: { type: Boolean, required: false, default: true },
height: { type: [String, Number], required: false },
maxHeight: { type: [String, Number], required: false },
fullscreenHeight: { type: [String, Number], required: false, default: "calc(100vh - 146px)" },
flex: { type: Boolean, required: false, default: false }
},
emits: ["update:modelValue", "closed"],
setup(__props, { emit: emits }) {
const props = __props;
const $style = useCssModule();
const dialogVisible = computed4({
get: () => props.modelValue,
set: (val) => emits("update:modelValue", val)
});
const visible = ref3(false);
const isFullscreen = ref3(false);
const toggleFullscreen = useToggle(isFullscreen);
const Icon = computed4(() => isFullscreen.value ? CopyDocument : FullScreen);
const scrollbarClassName = computed4(() => ({
[$style.scrollbar]: true,
[$style.flex]: props.flex
}));
watch3(dialogVisible, (val) => {
if (val) {
visible.value = true;
}
});
const handleClosed = () => {
visible.value = false;
emits("closed");
};
return (_ctx, _cache) => {
return visible.value || !__props.lazy ? (_openBlock6(), _createBlock4(_unref2(ElDialog), _mergeProps2({
key: 0,
modelValue: _unref2(dialogVisible),
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _isRef(dialogVisible) ? dialogVisible.value = $event : null)
}, _ctx.$attrs, {
"align-center": "",
"show-close": false,
fullscreen: isFullscreen.value,
class: _unref2($style).main,
onClosed: handleClosed
}), _createSlots({
header: _withCtx3(({ close, titleId, titleClass }) => [
_createElementVNode2("div", {
class: _normalizeClass5(_unref2($style).header)
}, [
_createElementVNode2("span", {
id: titleId,
class: _normalizeClass5([titleClass, _unref2($style).title])
}, [
_renderSlot2(_ctx.$slots, "header", { close }, () => [
_createTextVNode(_toDisplayString(__props.title), 1)
])
], 10, _hoisted_13),
_createElementVNode2("span", {
class: _normalizeClass5(_unref2($style).buttons)
}, [
_withDirectives(_createVNode2(_unref2(ElButton2), {
icon: _unref2(Icon),
plain: "",
onClick: _cache[0] || (_cache[0] = () => _unref2(toggleFullscreen)())
}, null, 8, ["icon"]), [
[_vShow, __props.showFullscreen]
]),
_createVNode2(_unref2(ElButton2), {
icon: _unref2(Close),
plain: "",
onClick: close
}, null, 8, ["icon", "onClick"])
], 2)
], 2)
]),
default: _withCtx3(() => [
!isFullscreen.value && (__props.height || __props.maxHeight) ? (_openBlock6(), _createBlock4(_unref2(ElScrollbar), {
key: 0,
class: _normalizeClass5(_unref2(scrollbarClassName)),
height: __props.height,
"max-height": __props.maxHeight
}, {
default: _withCtx3(() => [
_renderSlot2(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class", "height", "max-height"])) : (_openBlock6(), _createBlock4(_unref2(ElScrollbar), {
key: 1,
class: _normalizeClass5(_unref2(scrollbarClassName)),
"max-height": __props.fullscreenHeight
}, {
default: _withCtx3(() => [
_renderSlot2(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class", "max-height"]))
]),
_: 2
}, [
__props.showDefaultFooter || _ctx.$slots.footer ? {
name: "footer",
fn: _withCtx3(() => [
_renderSlot2(_ctx.$slots, "footer", {}, () => [
__props.showDefaultFooter ? (_openBlock6(), _createBlock4(button_default3, {
key: 0,
onClick: _cache[1] || (_cache[1] = ($event) => dialogVisible.value = false)
}, {
default: _withCtx3(() => [
_createTextVNode("\u5173\u95ED")
]),
_: 1
})) : _createCommentVNode2("v-if", true)
])
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "fullscreen", "class"])) : _createCommentVNode2("v-if", true);
};
}
});
// vue-style:D:\project\_my\vc\src\components\dialog\index.vue?type=style&index=0&isModule=true&isNameImport=true
var dialog_default2 = { main: "_main_um8p3_1", header: "_header_um8p3_19", title: "_title_um8p3_29", scrollbar: "_scrollbar_um8p3_34", flex: "_flex_um8p3_42", buttons: "_buttons_um8p3_47" };
// src/components/dialog/index.vue
var cssModules5 = {};
dialog_default.__cssModules = cssModules5 = {};
cssModules5["$style"] = dialog_default2;
var dialog_default3 = dialog_default;
// vue-script:D:\project\_my\vc\src\components\cropper\index.vue?type=script
var cropper_default = /* @__PURE__ */ _defineComponent5({
__name: "index",
props: {
dialog: { type: Boolean, default: false },
visible: { type: Boolean, default: false },
image: { type: [String, Object], required: true },
option: { type: Object, default: () => {
} },
imageSmoothingQuality: { type: String, default: "high" },
containerWidth: { type: String, default: "600px" },
containerHeight: { type: String, default: "450px" },
cropperWidth: { type: Number, default: 400 },
cropperHeight: { type: Number, default: 300 }
},
emits: ["init", "update:visible", "cancel", "finished"],
setup(__props, { expose, emit: emits }) {
const props = __props;
const loading = ref4(false);
const workbench = ref4();
const cropperRef = shallowRef3();
const downloadLink = ref4("");
const isNeedInit = ref4(false);
const dialogVisible = computed5({
get: () => props.visible,
set: (val) => {
emits("update:visible", val);
}
});
const containerStyle = computed5(() => ({
width: props.containerWidth,
height: props.containerHeight
}));
const dialogWidth = computed5(() => `${parseInt(props.containerWidth) + 40}px`);
const image = computed5(() => {
if (typeof props.image === "string") {
const img = new Image();
img.src = props.image;
return img;
}
const file4 = props.image;
if (defaultWindow3 && file4?.size) {
const img = new Image();
const blob = defaultWindow3.URL.createObjectURL(file4);
img.src = blob;
return img;
}
return props.image;
});
const handleDownload = () => {
if (!cropperRef.value || !props.dialog) {
return;
}
const canvas = cropperRef.value.getCroppedCanvas();
downloadLink.value = canvas?.toDataURL() || "";
};
const init = async () => {
if (!workbench.value) {
return;
}
cropperRef.value?.destroy();
loading.value = true;
isNeedInit.value = false;
workbench.value.childNodes.forEach((item) => workbench.value?.removeChild(item));
workbench.value.appendChild(image.value);
const Cropper = await loader2.loadCdnSingle("cropper");
cropperRef.value = new Cropper(image.value, {
dragMode: "move",
viewMode: 1,
aspectRatio: props.cropperWidth / props.cropperHeight,
toggleDragModeOnDblclick: false,
guides: true,
cropmove: props.dialog ? debounce(handleDownload, 1e3) : () => {
},
...props.option,
ready() {
loading.value = false;
handleDownload();
nextTick3(() => emits("init"));
}
});
};
const handleCancle = () => {
if (loading.value) {
return;
}
dialogVisible.value = false;
emits("cancel");
};
const getCroppedCanvas = () => {
if (loading.value || !cropperRef.value) {
return;
}
return cropperRef.value.getCroppedCanvas({
width: props.cropperWidth,
height: props.cropperHeight,
imageSmoothingQuality: props.imageSmoothingQuality
});
};
const getBlobData = () => {
const canvas = getCroppedCanvas();
if (!canvas) {
return void 0;
}
return file.canvasToBlob(canvas);
};
const handleFinish = () => {
const canvas = getCroppedCanvas();
const blob = getBlobData();
dialogVisible.value = false;
emits("finished", canvas, blob);
};
watch4(() => props.option, () => {
isNeedInit.value = true;
});
watch4(image, () => {
isNeedInit.value = true;
});
watch4(dialogVisible, () => {
props.visible && (!cropperRef.value || isNeedInit.value) && nextTick3(() => init());
});
expose({ instance: cropperRef, getCroppedCanvas, getBlobData });
onMounted4(() => !props.dialog && init());
onUnmounted2(() => cropperRef.value?.destroy());
return (_ctx, _cache) => {
return __props.dialog ? (_openBlock7(), _createBlock5(dialog_default3, {
key: 0,
modelValue: _unref3(dialogVisible),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _isRef2(dialogVisible) ? dialogVisible.value = $event : null),
title: "\u56FE\u7247\u88C1\u526A",
width: _unref3(dialogWidth),
"append-to-body": "",
"close-on-click-modal": false,
"before-close": handleCancle,
"show-fullscreen": false,
lazy: false
}, {
footer: _withCtx4(() => [
_createVNode3(_unref3(ElSpace), null, {
default: _withCtx4(() => [
_createVNode3(_unref3(ElButton3), {
loading: loading.value,
onClick: handleCancle
}, {
default: _withCtx4(() => [
_createTextVNode2("\u53D6\u6D88")
]),
_: 1
}, 8, ["loading"]),
_createVNode3(_unref3(ElLink), {
href: downloadLink.value,
download: "cropper.jpg",
underline: false
}, {
default: _withCtx4(() => [
_createVNode3(_unref3(ElButton3), { type: "primary" }, {
default: _withCtx4(() => [
_createTextVNode2("\u4E0B\u8F7D\u5207\u7247")
]),
_: 1
})
]),
_: 1
}, 8, ["href"]),
_createVNode3(_unref3(ElButton3), {
loading: loading.value,
type: "primary",
onClick: handleFinish
}, {
default: _withCtx4(() => [
_createTextVNode2("\u786E\u5B9A")
]),
_: 1
}, 8, ["loading"])
]),
_: 1
})
]),
default: _withCtx4(() => [
_withDirectives2(_createElementVNode3("div", {
ref_key: "workbench",
ref: workbench,
class: _normalizeClass6(_ctx.$style.workbench),
style: _normalizeStyle(_unref3(containerStyle))
}, null, 6), [
[_unref3(vLoading), loading.value]
])
]),
_: 1
}, 8, ["modelValue", "width"])) : _withDirectives2((_openBlock7(), _createElementBlock5("div", {
key: 1,
ref_key: "workbench",
ref: workbench,
class: _normalizeClass6(_ctx.$style.workbench),
style: _normalizeStyle(_unref3(containerStyle))
}, null, 6)), [
[_unref3(vLoading), loading.value]
]);
};
}
});
// vue-style:D:\project\_my\vc\src\components\cropper\index.vue?type=style&index=0&isModule=true&isNameImport=true
var cropper_default2 = { workbench: "_workbench_ja7q1_1" };
// src/components/cropper/index.vue
var cssModules6 = {};
cropper_default.__cssModules = cssModules6 = {};
cssModules6["$style"] = cropper_default2;
var cropper_default3 = cropper_default;
// src/components/upload-file/props.ts
var imageOptions = {
width: "200px",
height: "100px",
src: "",
fit: "contain",
icon: "Plus",
iconSize: 30
};
var buttonOptions = {
icon: "Upload",
type: "primary",
size: "",
text: "\u4E0A\u4F20\u56FE\u7247"
};
var props_default = {
accept: { type: String, default: ".jpg,.jpeg,.png" },
type: { type: String, default: "image" },
imageOptions: {
type: Object,
default: () => imageOptions
},
buttonOptions: {
type: Object,
default: () => buttonOptions
},
maxSize: { type: Number, default: 2 * 1024 * 1024 },
httpRequest: { type: Function },
beforeUpload: { type: Function },
cropper: { type: Boolean, default: false },
cropperOption: { type: Object, default: () => {
} }
};
// vue-script:D:\project\_my\vc\src\components\upload-file\index.vue?type=script
var upload_file_default = /* @__PURE__ */ _defineComponent6({
__name: "index",
props: props_default,
emits: ["error"],
setup(__props, { emit: emits }) {
const props = __props;
const loading = ref5(false);
const imgSrc = ref5("");
const visible = ref5(false);
const image = ref5();
const imgOptions = computed6(() => {
const options = { ...imageOptions, ...props.imageOptions };
if (imgSrc.value) {
options.src = imgSrc.value;
}
return options;
});
const btnOptions = computed6(() => ({ ...buttonOptions, ...props.buttonOptions }));
const hasImage = computed6(() => !!imgOptions.value.src);
const imageSizeStyle = computed6(() => {
const options = imgOptions.value;
return {
"width": options.width,
"height": options.height,
"line-height": options.height
};
});
const iconSizeStyle = computed6(() => {
const options = imgOptions.value;
return {
"width": options.width,
"height": options.height,
"line-height": options.height,
"font-size": `${options.iconSize}px`
};
});
const isImageType = computed6(() => props.type === "image");
const isButtonType = computed6(() => props.type === "button");
const checkFile = (file4) => {
if (file4.size > props.maxSize) {
const message = `\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 ${props.maxSize / 1024 / 1024}M`;
emits("error", message);
return false;
}
if (props.beforeUpload) {
if (props.beforeUpload(file4)) {
loading.value = true;
return true;
}
return false;
}
loading.value = true;
return true;
};
const handleBeforeUpload = (file4) => {
const checkResult = checkFile(file4);
if (checkResult && props.cropper) {
image.value = file4;
nextTick4(() => {
visible.value = true;
});
return false;
}
return checkResult;
};
const handleHttpRequest = ({ file: file4 }) => {
if (!defaultWindow4) {
return;
}
if (props.httpRequest) {
const localUrl = defaultWindow4.URL.createObjectURL(file4);
const done = () => {
imgSrc.value = localUrl;
loading.value = false;
};
props.httpRequest(file4, done, localUrl);
}
};
const handleCancel = () => {
loading.value = false;
};
const handleFinished = (canvas, blob) => {
const myFile = file2.blobToFile(blob, "cropper.jpg");
handleHttpRequest({ file: myFile });
};
return (_ctx, _cache) => {
return _withDirectives3((_openBlock8(), _createBlock6(_unref4(ElUpload), {
class: _normalizeClass7([_ctx.$style.uploader, `upload-type-${_ctx.type}`]),
action: "",
"show-file-list": false,
accept: _ctx.accept,
"http-request": handleHttpRequest,
"before-upload": handleBeforeUpload
}, {
default: _withCtx5(() => [
_unref4(isImageType) ? (_openBlock8(), _createElementBlock6(_Fragment, { key: 0 }, [
_unref4(hasImage) ? (_openBlock8(), _createBlock6(_unref4(ElImage), {
key: 0,
src: _unref4(imgOptions).src,
fit: _unref4(imgOptions).fit,
style: _normalizeStyle2(_unref4(imageSizeStyle)),
class: _normalizeClass7(_ctx.$style.photo)
}, {
placeholder: _withCtx5(() => [
_createTextVNode3("\u52A0\u8F7D\u4E2D")
]),
_: 1
}, 8, ["src", "fit", "style", "class"])) : (_openBlock8(), _createBlock6(el_icon_default3, {
key: 1,
name: _unref4(imgOptions).icon,
class: _normalizeClass7([_ctx.$style.icon]),
style: _normalizeStyle2(_unref4(iconSizeStyle))
}, null, 8, ["name", "class", "style"]))
], 64)) : _createCommentVNode4("v-if", true),
_unref4(isButtonType) ? _renderSlot3(_ctx.$slots, "default", { key: 1 }, () => [
_createVNode4(button_default3, {
size: _unref4(btnOptions).size,
type: _unref4(btnOptions).type,
icon: { name: _unref4(btnOptions).icon }
}, {
default: _withCtx5(() => [
_createTextVNode3(_toDisplayString2(_unref4(btnOptions).text), 1)
]),
_: 1
}, 8, ["size", "type", "icon"])
]) : _createCommentVNode4("v-if", true),
_ctx.cropper && image.value ? (_openBlock8(), _createBlock6(cropper_default3, {
key: 2,
visible: visible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
image: image.value,
option: _ctx.cropperOption,
dialog: "",
onFinished: handleFinished,
onCancel: handleCancel
}, null, 8, ["visible", "image", "option"])) : _createCommentVNode4("v-if", true)
]),
_: 3
}, 8, ["class", "accept"])), [
[_unref4(vLoading2), loading.value]
]);
};
}
});
// vue-style:D:\project\_my\vc\src\components\upload-file\index.vue?type=style&index=0&isModule=true&isNameImport=true
var upload_file_default2 = { uploader: "_uploader_e7qei_1", icon: "_icon_e7qei_18", photo: "_photo_e7qei_26" };
// src/components/upload-file/index.vue
var cssModules7 = {};
upload_file_default.__cssModules = cssModules7 = {};
cssModules7["$style"] = upload_file_default2;
var upload_file_default3 = upload_file_default;
// src/components/dialog-camera-upload/data.ts
var TYPE_UPLOAD = "upload";
var TYPE_CAMERA = "camera";
var WINDOW_IMAGE = "image";
var WINDOW_VIDEO = "video";
var WINDOW_CANVAS = "canvas";
var WINDOW_PLACEHOLDER = "placeholder";
// vue-script:D:\project\_my\vc\src\components\dialog-camera-upload\index.vue?type=script
var _hoisted_14 = ["width", "height"];
var _hoisted_22 = ["width", "height"];
var _hoisted_3 = { key: 1 };
var dialog_camera_upload_default = /* @__PURE__ */ _defineComponent7({
__name: "index",
props: {
visible: { type: Boolean, required: true },
type: { type: Array, default: () => [TYPE_UPLOAD, TYPE_CAMERA] },
width: { type: Number, default: 600 },
fixWidth: { type: Number, default: 32 },
height: { type: Number, default: 400 },
accept: { type: String, default: ".jpg,.jpeg,.png" },
cropper: { type: Boolean, default: true },
cropperOption: { type: Object, default: () => {
} }
},
emits: ["update:visible", "close", "error", "save"],
setup(__props, { emit: emits }) {
const props = __props;
const TIPS_SHOOT_SUCCESS = "\u7167\u7247\u62CD\u6444\u6210\u529F";
const currentCamera = ref6();
const { videoInputs: cameras } = useDevicesList({
requestPermissions: true,
onUpdated() {
if (!cameras.value.find((i) => i.deviceId && i.deviceId === currentCamera.value)) {
currentCamera.value = cameras.value[0]?.deviceId;
}
}
});
const { stream, start, stop, enabled } = useUserMedia({ videoDeviceId: currentCamera, audioDeviceId: false });
const elVideo = ref6();
const elCanvas