UNPKG

@wfrog/vc

Version:

`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中,尽可能使用更少的代码量来实现需求。 因此在组件封装上,以 `方便` 为主,打包仅 `esm` 模式。

672 lines (657 loc) 24.6 kB
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 };