@wfrog/vc
Version:
`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中,尽可能使用更少的代码量来实现需求。 因此在组件封装上,以 `方便` 为主,打包仅 `esm` 模式。
672 lines (657 loc) • 24.6 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\tree-picker\index.vue?type=script
import { defineComponent as _defineComponent2 } from "vue";
import { unref as _unref2, createVNode as _createVNode, withCtx as _withCtx2, normalizeClass as _normalizeClass, openBlock as _openBlock2, createElementBlock as _createElementBlock2, createCommentVNode as _createCommentVNode, isRef as _isRef2, mergeProps as _mergeProps2, createBlock as _createBlock2, createElementVNode as _createElementVNode } from "vue";
import { computed as computed5, nextTick as nextTick3, onBeforeMount as onBeforeMount2, ref as ref4, useCssModule as useCssModule2, watch as watch3 } from "vue";
import { storage as storage2, tree } from "@wfrog/utils";
import { get } from "lodash-es";
// 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 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 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 onClickOutside(target, handler, options = {}) {
const { window: window2 = defaultWindow, ignore, capture = true, detectIframe = false } = options;
if (!window2)
return;
const shouldListen = (0, lib_exports2.ref)(true);
let fallback;
const listener = (event) => {
window2.clearTimeout(fallback);
const el = unrefElement(target);
if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
return;
handler(event);
};
const shouldIgnore = (event) => {
return ignore && ignore.some((target2) => {
const el = unrefElement(target2);
return el && (event.target === el || event.composedPath().includes(el));
});
};
const cleanup = [
useEventListener(window2, "click", listener, { passive: true, capture }),
useEventListener(window2, "pointerdown", (e) => {
const el = unrefElement(target);
shouldListen.value = !!el && !e.composedPath().includes(el) && !shouldIgnore(e);
}, { passive: true }),
useEventListener(window2, "pointerup", (e) => {
if (e.button === 0) {
const path = e.composedPath();
e.composedPath = () => path;
fallback = window2.setTimeout(() => listener(e), 50);
}
}, { passive: true }),
detectIframe && useEventListener(window2, "blur", (event) => {
var _a2;
const el = unrefElement(target);
if (((_a2 = document.activeElement) == null ? void 0 : _a2.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(document.activeElement)))
handler(event);
})
].filter(Boolean);
const stop = () => cleanup.forEach((fn) => fn());
return stop;
}
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];
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);
// vue-script:D:\project\_my\vc\src\components\tree-picker\index.vue?type=script
import { ElCascaderPanel, ElPopover, ElScrollbar, ElTree } from "element-plus";
// vue-script:D:\project\_my\vc\src\components\select\index.vue?type=script
import { useCssVars as _useCssVars, defineComponent as _defineComponent } from "vue";
import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, isRef as _isRef, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
import { computed as computed4, useCssModule } from "vue";
import { ElOption, ElSelect } from "element-plus";
// src/components/choice/useChoice.ts
import { computed as computed3, onMounted as onMounted3, ref as ref3 } from "vue";
import { storage } from "@wfrog/utils";
var preProps = {
name: { type: String, default: "" },
multiple: { type: Boolean, default: false },
modelValue: { type: [String, Number, Boolean, Array], default: "", required: true },
options: { type: [Array, Function], default: () => [] },
props: { type: Object, default: () => {
} },
expires: { type: [Date, Number], default: 60 * 60 * 2 },
loadingText: { type: String, default: "\u52A0\u8F7D\u4E2D" }
};
var preEmit = ["update:modelValue", "init"];
var useChoice = ({ props, emits }, storagPrefix) => {
const loading = ref3(false);
const asyncOptions = ref3();
const myValue = computed3({
get: () => {
return loading.value ? props.loadingText : props.modelValue;
},
set: (val) => emits("update:modelValue", val)
});
const myProps = computed3(() => ({ label: "label", value: "value", key: "value", ...props.props }));
const myOptions = computed3(() => {
const options = Array.isArray(props.options) ? props.options : asyncOptions.value || [];
const [first] = options;
if (typeof first === "string" || typeof first === "number") {
return options.map((item) => ({ [myProps.value.label]: item, [myProps.value.value]: item }));
}
return options;
});
const init = async () => {
if (Array.isArray(props.options)) {
return;
}
const name = `${storagPrefix}-${props.name}`;
if (props.name) {
const val = storage.get(name);
if (val) {
asyncOptions.value = val;
setTimeout(() => {
emits("init", val);
}, 0);
return;
}
}
loading.value = true;
try {
asyncOptions.value = await props.options();
props.name && storage.set(name, asyncOptions.value, { expires: props.expires });
setTimeout(() => {
emits("init", asyncOptions.value);
}, 0);
} finally {
loading.value = false;
}
};
onMounted3(() => init());
return { loading, myOptions, myProps, myValue, init };
};
var useChoice_default = useChoice;
// vue-script:D:\project\_my\vc\src\components\select\index.vue?type=script
var select_default = /* @__PURE__ */ _defineComponent({
__name: "index",
props: {
...preProps,
block: { type: Boolean, default: false },
width: { type: String }
},
emits: preEmit,
setup(__props, { emit: emits }) {
const props = __props;
_useCssVars((_ctx) => ({
"6712b8ad-myWidth": _unref(myWidth)
}));
const { loading, myOptions, myProps, myValue } = useChoice_default({ props, emits }, "async-picker");
const $style = useCssModule();
const className = computed4(() => ({
[$style.select]: true,
[$style.block]: props.block
}));
const myWidth = computed4(() => {
return props.width || (props.block ? "100%" : "214px");
});
return (_ctx, _cache) => {
return _openBlock(), _createBlock(_unref(ElSelect), _mergeProps({
modelValue: _unref(myValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _isRef(myValue) ? myValue.value = $event : null),
multiple: _ctx.multiple,
"collapse-tags": "",
loading: _unref(loading)
}, { ..._ctx.$attrs }, { class: _unref(className) }), {
default: _withCtx(() => [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_unref(myOptions), (item, index) => {
return _openBlock(), _createBlock(_unref(ElOption), {
key: item[_unref(myProps).key] || item[_unref(myProps).label],
label: item[_unref(myProps).label],
value: item[_unref(myProps).value] === void 0 ? index : item[_unref(myProps).value]
}, null, 8, ["label", "value"]);
}), 128))
]),
_: 1
}, 16, ["modelValue", "multiple", "loading", "class"]);
};
}
});
// vue-style:D:\project\_my\vc\src\components\select\index.vue?type=style&index=0&isModule=true&isNameImport=true
var select_default2 = { select: "_select_19zt8_1", block: "_block_19zt8_5" };
// src/components/select/index.vue
var cssModules = {};
select_default.__cssModules = cssModules = {};
cssModules["$style"] = select_default2;
var select_default3 = select_default;
// vue-script:D:\project\_my\vc\src\components\tree-picker\index.vue?type=script
var tree_picker_default = /* @__PURE__ */ _defineComponent2({
__name: "index",
props: {
name: { type: String, required: false, default: "" },
placeholder: { type: String, required: false, default: "\u8BF7\u9009\u62E9" },
loadingText: { type: String, required: false, default: "\u52A0\u8F7D\u4E2D" },
emptyText: { type: String, required: false, default: "\u5C1A\u672A\u9009\u62E9" },
disabled: { type: Boolean, required: false, default: false },
multiple: { type: Boolean, required: false, default: false },
modelValue: { type: [String, Number, Array], required: true },
options: { type: [Array, Function], required: true, default: () => [] },
props: { type: null, required: false, default: () => ({}) },
cascaderAttrs: { type: null, required: false },
expires: { type: [Date, Number], required: false, default: () => new Date(new Date().getTime() + 1e3 * 60 * 60 * 24 * 365) }
},
emits: ["update:modelValue", "change", "init"],
setup(__props, { emit: emits }) {
const props = __props;
const [popoverVisible, togglePopoverVisible] = useToggle();
const [cascaderVisible, toggleCascaderVisible] = useToggle();
const loading = ref4(false);
const asyncOptions = ref4();
const handleSelectClick = useThrottleFn(() => !loading.value && !props.disabled && togglePopoverVisible(), 300);
const cascaderProps = computed5(() => ({
label: "label",
value: "value",
children: "children",
multiple: props.multiple,
emitPath: false,
...props.props
}));
const myTreeProps = computed5(() => ({
label: cascaderProps.value.label,
value: cascaderProps.value.value,
children: cascaderProps.value.children,
disabled: ""
}));
const myValue = computed5({
get: () => props.modelValue,
set: (val) => emits("update:modelValue", val)
});
const myOptions = computed5(() => Array.isArray(props.options) ? props.options : asyncOptions.value || []);
const myPlaceholder = computed5(() => loading.value ? props.loadingText : props.placeholder);
const selectValue = computed5({
get() {
let val = props.modelValue;
if (props.multiple) {
val = get(props, "modelValue[0]") || [];
}
const node = tree.getPath(myOptions.value, (item) => item[cascaderProps.value.value] === val);
const labels = node.map((item) => item[cascaderProps.value.label]);
if (props.multiple) {
if (!labels || labels.length === 0 || !Array.isArray(props.modelValue)) {
return;
}
const result = [...props.modelValue];
result[0] = labels.join(" / ");
return result;
}
return labels.join(" / ");
},
set() {
}
});
const $style = useCssModule2();
const selectClassName = computed5(() => ({ [$style["is-active"]]: popoverVisible.value }));
const mySelect = ref4();
const myWrapper = ref4();
onClickOutside(myWrapper, (event) => {
let target = event.target;
let result = false;
do {
result = target.classList ? target.classList.contains($style.select) : false;
target = target.parentNode;
} while (result === false && target !== null && target.nodeName !== "BODY");
!result && togglePopoverVisible(false);
});
const myPopover = ref4();
const updatePopper = () => nextTick3(() => {
myPopover.value?.popperRef?.popperInstanceRef.update();
});
const filterNode = (value, data) => {
if (!value) {
return true;
}
return value.includes(data[cascaderProps.value.value]);
};
const myTree = ref4();
const filterTree = (val) => {
nextTick3(() => myTree.value?.filter(val));
updatePopper();
};
const myCascader = ref4();
const handleCascaderChange = (val) => {
const node = myCascader.value?.getCheckedNodes(true);
emits("change", val, node);
if (!props.multiple) {
togglePopoverVisible();
} else {
filterTree(val);
}
};
const clear = () => {
emits("update:modelValue", props.multiple ? [] : "");
props.multiple && filterTree([]);
};
watch3(popoverVisible, (val) => {
val && props.multiple && filterTree(props.modelValue || "");
});
const init = async () => {
if (Array.isArray(props.options)) {
return;
}
const name = `tree-picker-${props.name}`;
if (props.name) {
const val = storage2.get(name);
if (val) {
asyncOptions.value = val;
emits("init", val);
return;
}
}
loading.value = true;
try {
asyncOptions.value = await props.options();
props.name && storage2.set(name, asyncOptions.value, { expires: props.expires });
emits("init", asyncOptions.value);
} finally {
loading.value = false;
}
};
onBeforeMount2(() => init());
return (_ctx, _cache) => {
return _openBlock2(), _createBlock2(_unref2(ElPopover), {
ref_key: "myPopover",
ref: myPopover,
visible: _unref2(popoverVisible),
placement: "bottom",
"popper-class": _unref2($style).popover,
onBeforeEnter: _cache[2] || (_cache[2] = () => _unref2(toggleCascaderVisible)()),
onAfterLeave: _cache[3] || (_cache[3] = () => _unref2(toggleCascaderVisible)())
}, {
reference: _withCtx2(() => [
_createVNode(select_default3, _mergeProps2({
ref_key: "mySelect",
ref: mySelect,
modelValue: _unref2(selectValue),
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _isRef2(selectValue) ? selectValue.value = $event : null),
placeholder: _unref2(myPlaceholder),
"collapse-tags": "",
clearable: "",
disabled: loading.value || __props.disabled,
multiple: __props.multiple,
class: [_unref2(selectClassName), _unref2($style).select],
"popper-class": _unref2($style)["popover-select"]
}, _ctx.$attrs, {
onClick: _unref2(handleSelectClick),
onClear: clear
}), null, 16, ["modelValue", "placeholder", "disabled", "multiple", "class", "popper-class", "onClick"])
]),
default: _withCtx2(() => [
_createElementVNode("div", {
ref_key: "myWrapper",
ref: myWrapper,
class: _normalizeClass(_unref2($style).wrapper)
}, [
__props.multiple ? (_openBlock2(), _createElementBlock2("div", {
key: 0,
class: _normalizeClass(_unref2($style).selected)
}, [
_createVNode(_unref2(ElScrollbar), null, {
default: _withCtx2(() => [
_createVNode(_unref2(ElTree), {
ref_key: "myTree",
ref: myTree,
"default-expand-all": "",
data: _unref2(myOptions),
"node-key": _unref2(cascaderProps).value,
props: _unref2(myTreeProps),
"filter-node-method": filterNode,
"empty-text": __props.emptyText
}, null, 8, ["data", "node-key", "props", "empty-text"])
]),
_: 1
})
], 2)) : _createCommentVNode("v-if", true),
_unref2(cascaderVisible) ? (_openBlock2(), _createBlock2(_unref2(ElCascaderPanel), _mergeProps2({
key: 1,
ref_key: "myCascader",
ref: myCascader,
modelValue: _unref2(myValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _isRef2(myValue) ? myValue.value = $event : null),
props: _unref2(cascaderProps),
options: _unref2(myOptions)
}, __props.cascaderAttrs, {
onExpandChange: updatePopper,
onChange: handleCascaderChange
}), null, 16, ["modelValue", "props", "options"])) : _createCommentVNode("v-if", true)
], 2)
]),
_: 1
}, 8, ["visible", "popper-class"]);
};
}
});
// vue-style:D:\project\_my\vc\src\components\tree-picker\index.vue?type=style&index=0&isModule=true&isNameImport=true
var tree_picker_default2 = { popover: "_popover_8h79y_1", wrapper: "_wrapper_8h79y_6", select: "_select_8h79y_13", "is-active": "_is-active_8h79y_17", selected: "_selected_8h79y_24", "popover-select": "_popover-select_8h79y_47" };
// src/components/tree-picker/index.vue
var cssModules2 = {};
tree_picker_default.__cssModules = cssModules2 = {};
cssModules2["$style"] = tree_picker_default2;
var tree_picker_default3 = tree_picker_default;
export {
tree_picker_default3 as default
};