mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-03 14:20:50 +08:00
2264 lines
70 KiB
JavaScript
2264 lines
70 KiB
JavaScript
import { b8 as reactive, b9 as hasInstance, ba as onBeforeMount, a as onBeforeUnmount, aS as off, bb as readonly, J as on, E as watch, r as ref, d as defineComponent, l as h, aL as createInjectionKey, as as inject, bc as render, aY as popoverBodyInjectionKey, G as computed, $ as provide, D as useMemo, ak as Transition, ax as mergeProps, bd as warn, a3 as Fragment, aZ as modalBodyInjectionKey, aX as drawerBodyInjectionKey, az as XScrollbar, p as cB, aM as fadeInScaleUpTransition, m as c, V as cNotM, W as cM, Y as cE, C as useMergedState, A as toRef, x as useConfig, q as useTheme, be as dropdownLight, L as call, ao as createKey, ap as useThemeClass, bf as keep, j as openBlock, c as createElementBlock, e as createVNode, f as withCtx, bg as renderSlot, u as unref, B as Button, k as createTextVNode, b as createBaseVNode, h as useRouter, g as useStore, a8 as watchEffect, o as onMounted, Q as config, P as checkUpdate, t as toDisplayString, bh as withKeys, O as createBlock, a7 as getImgUrl, T as createCommentVNode, n as normalizeClass, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||
import { f as getSearchKeyword } from "./home-BXGE9AqN.js";
|
||
import { u as useMessage, b as getUserDetail, d as logout } from "./login-BsPxQYi6.js";
|
||
import { r as renderArrow, a as __unplugin_components_5, p as popoverBaseProps, N as NImage } from "./Image-DXClIklC.js";
|
||
import { B as Binder, V as VTarget, e as VFollower } from "./use-locale-DLWAOXez.js";
|
||
import { N as NIcon } from "./Icon-DucaliTK.js";
|
||
import { _ as __unplugin_components_1, a as __unplugin_components_3 } from "./Switch-D3Z_Vg3u.js";
|
||
import { _ as __unplugin_components_2 } from "./Avatar-rQ2og-6c.js";
|
||
import { _ as __unplugin_components_4 } from "./Tag-C0oC92WF.js";
|
||
function happensIn(e, dataSetPropName) {
|
||
let { target } = e;
|
||
while (target) {
|
||
if (target.dataset) {
|
||
if (target.dataset[dataSetPropName] !== void 0)
|
||
return true;
|
||
}
|
||
target = target.parentElement;
|
||
}
|
||
return false;
|
||
}
|
||
function useKeyboard(options = {}, enabledRef) {
|
||
const state = reactive({
|
||
ctrl: false,
|
||
command: false,
|
||
win: false,
|
||
shift: false,
|
||
tab: false
|
||
});
|
||
const { keydown, keyup } = options;
|
||
const keydownHandler = (e) => {
|
||
switch (e.key) {
|
||
case "Control":
|
||
state.ctrl = true;
|
||
break;
|
||
case "Meta":
|
||
state.command = true;
|
||
state.win = true;
|
||
break;
|
||
case "Shift":
|
||
state.shift = true;
|
||
break;
|
||
case "Tab":
|
||
state.tab = true;
|
||
break;
|
||
}
|
||
if (keydown !== void 0) {
|
||
Object.keys(keydown).forEach((key) => {
|
||
if (key !== e.key)
|
||
return;
|
||
const handler = keydown[key];
|
||
if (typeof handler === "function") {
|
||
handler(e);
|
||
} else {
|
||
const { stop = false, prevent = false } = handler;
|
||
if (stop)
|
||
e.stopPropagation();
|
||
if (prevent)
|
||
e.preventDefault();
|
||
handler.handler(e);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
const keyupHandler = (e) => {
|
||
switch (e.key) {
|
||
case "Control":
|
||
state.ctrl = false;
|
||
break;
|
||
case "Meta":
|
||
state.command = false;
|
||
state.win = false;
|
||
break;
|
||
case "Shift":
|
||
state.shift = false;
|
||
break;
|
||
case "Tab":
|
||
state.tab = false;
|
||
break;
|
||
}
|
||
if (keyup !== void 0) {
|
||
Object.keys(keyup).forEach((key) => {
|
||
if (key !== e.key)
|
||
return;
|
||
const handler = keyup[key];
|
||
if (typeof handler === "function") {
|
||
handler(e);
|
||
} else {
|
||
const { stop = false, prevent = false } = handler;
|
||
if (stop)
|
||
e.stopPropagation();
|
||
if (prevent)
|
||
e.preventDefault();
|
||
handler.handler(e);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
const setup = () => {
|
||
if (enabledRef === void 0 || enabledRef.value) {
|
||
on("keydown", document, keydownHandler);
|
||
on("keyup", document, keyupHandler);
|
||
}
|
||
if (enabledRef !== void 0) {
|
||
watch(enabledRef, (value) => {
|
||
if (value) {
|
||
on("keydown", document, keydownHandler);
|
||
on("keyup", document, keyupHandler);
|
||
} else {
|
||
off("keydown", document, keydownHandler);
|
||
off("keyup", document, keyupHandler);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
if (hasInstance()) {
|
||
onBeforeMount(setup);
|
||
onBeforeUnmount(() => {
|
||
if (enabledRef === void 0 || enabledRef.value) {
|
||
off("keydown", document, keydownHandler);
|
||
off("keyup", document, keyupHandler);
|
||
}
|
||
});
|
||
} else {
|
||
setup();
|
||
}
|
||
return readonly(state);
|
||
}
|
||
function useDeferredTrue(valueRef, delay, shouldDelayRef) {
|
||
const delayedRef = ref(valueRef.value);
|
||
let timerId = null;
|
||
watch(valueRef, (value) => {
|
||
if (timerId !== null) window.clearTimeout(timerId);
|
||
if (value === true) {
|
||
if (shouldDelayRef && !shouldDelayRef.value) {
|
||
delayedRef.value = true;
|
||
} else {
|
||
timerId = window.setTimeout(() => {
|
||
delayedRef.value = true;
|
||
}, delay);
|
||
}
|
||
} else {
|
||
delayedRef.value = false;
|
||
}
|
||
});
|
||
return delayedRef;
|
||
}
|
||
function createRefSetter(ref2) {
|
||
return (inst) => {
|
||
if (inst) {
|
||
ref2.value = inst.$el;
|
||
} else {
|
||
ref2.value = null;
|
||
}
|
||
};
|
||
}
|
||
const ChevronRightIcon = defineComponent({
|
||
name: "ChevronRight",
|
||
render() {
|
||
return h("svg", {
|
||
viewBox: "0 0 16 16",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg"
|
||
}, h("path", {
|
||
d: "M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z",
|
||
fill: "currentColor"
|
||
}));
|
||
}
|
||
});
|
||
function toArray(arg) {
|
||
if (Array.isArray(arg))
|
||
return arg;
|
||
return [arg];
|
||
}
|
||
const TRAVERSE_COMMAND = {
|
||
STOP: "STOP"
|
||
};
|
||
function traverseWithCb(treeNode, callback) {
|
||
const command = callback(treeNode);
|
||
if (treeNode.children !== void 0 && command !== TRAVERSE_COMMAND.STOP) {
|
||
treeNode.children.forEach((childNode) => traverseWithCb(childNode, callback));
|
||
}
|
||
}
|
||
function getNonLeafKeys(treeNodes, options = {}) {
|
||
const { preserveGroup = false } = options;
|
||
const keys = [];
|
||
const cb = preserveGroup ? (node) => {
|
||
if (!node.isLeaf) {
|
||
keys.push(node.key);
|
||
traverse(node.children);
|
||
}
|
||
} : (node) => {
|
||
if (!node.isLeaf) {
|
||
if (!node.isGroup)
|
||
keys.push(node.key);
|
||
traverse(node.children);
|
||
}
|
||
};
|
||
function traverse(nodes) {
|
||
nodes.forEach(cb);
|
||
}
|
||
traverse(treeNodes);
|
||
return keys;
|
||
}
|
||
function isLeaf(rawNode, getChildren) {
|
||
const { isLeaf: isLeaf2 } = rawNode;
|
||
if (isLeaf2 !== void 0)
|
||
return isLeaf2;
|
||
else if (!getChildren(rawNode))
|
||
return true;
|
||
return false;
|
||
}
|
||
function defaultGetChildren(node) {
|
||
return node.children;
|
||
}
|
||
function defaultGetKey(node) {
|
||
return node.key;
|
||
}
|
||
function isIgnored() {
|
||
return false;
|
||
}
|
||
function isShallowLoaded(rawNode, getChildren) {
|
||
const { isLeaf: isLeaf2 } = rawNode;
|
||
if (isLeaf2 === false && !Array.isArray(getChildren(rawNode)))
|
||
return false;
|
||
return true;
|
||
}
|
||
function isDisabled(rawNode) {
|
||
return rawNode.disabled === true;
|
||
}
|
||
function isExpilicitlyNotLoaded(rawNode, getChildren) {
|
||
return rawNode.isLeaf === false && !Array.isArray(getChildren(rawNode));
|
||
}
|
||
function unwrapCheckedKeys(result) {
|
||
var _a;
|
||
if (result === void 0 || result === null)
|
||
return [];
|
||
if (Array.isArray(result))
|
||
return result;
|
||
return (_a = result.checkedKeys) !== null && _a !== void 0 ? _a : [];
|
||
}
|
||
function unwrapIndeterminateKeys(result) {
|
||
var _a;
|
||
if (result === void 0 || result === null || Array.isArray(result)) {
|
||
return [];
|
||
}
|
||
return (_a = result.indeterminateKeys) !== null && _a !== void 0 ? _a : [];
|
||
}
|
||
function merge(originalKeys, keysToAdd) {
|
||
const set = new Set(originalKeys);
|
||
keysToAdd.forEach((key) => {
|
||
if (!set.has(key)) {
|
||
set.add(key);
|
||
}
|
||
});
|
||
return Array.from(set);
|
||
}
|
||
function minus(originalKeys, keysToRemove) {
|
||
const set = new Set(originalKeys);
|
||
keysToRemove.forEach((key) => {
|
||
if (set.has(key)) {
|
||
set.delete(key);
|
||
}
|
||
});
|
||
return Array.from(set);
|
||
}
|
||
function isGroup(rawNode) {
|
||
return (rawNode === null || rawNode === void 0 ? void 0 : rawNode.type) === "group";
|
||
}
|
||
class SubtreeNotLoadedError extends Error {
|
||
constructor() {
|
||
super();
|
||
this.message = "SubtreeNotLoadedError: checking a subtree whose required nodes are not fully loaded.";
|
||
}
|
||
}
|
||
function getExtendedCheckedKeySetAfterCheck(checkKeys, currentCheckedKeys, treeMate, allowNotLoaded) {
|
||
return getExtendedCheckedKeySet(currentCheckedKeys.concat(checkKeys), treeMate, allowNotLoaded, false);
|
||
}
|
||
function getAvailableAscendantNodeSet(uncheckedKeys, treeMate) {
|
||
const visitedKeys = /* @__PURE__ */ new Set();
|
||
uncheckedKeys.forEach((uncheckedKey) => {
|
||
const uncheckedTreeNode = treeMate.treeNodeMap.get(uncheckedKey);
|
||
if (uncheckedTreeNode !== void 0) {
|
||
let nodeCursor = uncheckedTreeNode.parent;
|
||
while (nodeCursor !== null) {
|
||
if (nodeCursor.disabled)
|
||
break;
|
||
if (visitedKeys.has(nodeCursor.key))
|
||
break;
|
||
else {
|
||
visitedKeys.add(nodeCursor.key);
|
||
}
|
||
nodeCursor = nodeCursor.parent;
|
||
}
|
||
}
|
||
});
|
||
return visitedKeys;
|
||
}
|
||
function getExtendedCheckedKeySetAfterUncheck(uncheckedKeys, currentCheckedKeys, treeMate, allowNotLoaded) {
|
||
const extendedCheckedKeySet = getExtendedCheckedKeySet(currentCheckedKeys, treeMate, allowNotLoaded, false);
|
||
const extendedKeySetToUncheck = getExtendedCheckedKeySet(uncheckedKeys, treeMate, allowNotLoaded, true);
|
||
const ascendantKeySet = getAvailableAscendantNodeSet(uncheckedKeys, treeMate);
|
||
const keysToRemove = [];
|
||
extendedCheckedKeySet.forEach((key) => {
|
||
if (extendedKeySetToUncheck.has(key) || ascendantKeySet.has(key)) {
|
||
keysToRemove.push(key);
|
||
}
|
||
});
|
||
keysToRemove.forEach((key) => extendedCheckedKeySet.delete(key));
|
||
return extendedCheckedKeySet;
|
||
}
|
||
function getCheckedKeys(options, treeMate) {
|
||
const { checkedKeys, keysToCheck, keysToUncheck, indeterminateKeys, cascade, leafOnly, checkStrategy, allowNotLoaded } = options;
|
||
if (!cascade) {
|
||
if (keysToCheck !== void 0) {
|
||
return {
|
||
checkedKeys: merge(checkedKeys, keysToCheck),
|
||
indeterminateKeys: Array.from(indeterminateKeys)
|
||
};
|
||
} else if (keysToUncheck !== void 0) {
|
||
return {
|
||
checkedKeys: minus(checkedKeys, keysToUncheck),
|
||
indeterminateKeys: Array.from(indeterminateKeys)
|
||
};
|
||
} else {
|
||
return {
|
||
checkedKeys: Array.from(checkedKeys),
|
||
indeterminateKeys: Array.from(indeterminateKeys)
|
||
};
|
||
}
|
||
}
|
||
const { levelTreeNodeMap } = treeMate;
|
||
let extendedCheckedKeySet;
|
||
if (keysToUncheck !== void 0) {
|
||
extendedCheckedKeySet = getExtendedCheckedKeySetAfterUncheck(keysToUncheck, checkedKeys, treeMate, allowNotLoaded);
|
||
} else if (keysToCheck !== void 0) {
|
||
extendedCheckedKeySet = getExtendedCheckedKeySetAfterCheck(keysToCheck, checkedKeys, treeMate, allowNotLoaded);
|
||
} else {
|
||
extendedCheckedKeySet = getExtendedCheckedKeySet(checkedKeys, treeMate, allowNotLoaded, false);
|
||
}
|
||
const checkStrategyIsParent = checkStrategy === "parent";
|
||
const checkStrategyIsChild = checkStrategy === "child" || leafOnly;
|
||
const syntheticCheckedKeySet = extendedCheckedKeySet;
|
||
const syntheticIndeterminateKeySet = /* @__PURE__ */ new Set();
|
||
const maxLevel = Math.max.apply(null, Array.from(levelTreeNodeMap.keys()));
|
||
for (let level = maxLevel; level >= 0; level -= 1) {
|
||
const levelIsZero = level === 0;
|
||
const levelTreeNodes = levelTreeNodeMap.get(level);
|
||
for (const levelTreeNode of levelTreeNodes) {
|
||
if (levelTreeNode.isLeaf)
|
||
continue;
|
||
const { key: levelTreeNodeKey, shallowLoaded } = levelTreeNode;
|
||
if (checkStrategyIsChild && shallowLoaded) {
|
||
levelTreeNode.children.forEach((v) => {
|
||
if (!v.disabled && !v.isLeaf && v.shallowLoaded && syntheticCheckedKeySet.has(v.key)) {
|
||
syntheticCheckedKeySet.delete(v.key);
|
||
}
|
||
});
|
||
}
|
||
if (levelTreeNode.disabled || !shallowLoaded) {
|
||
continue;
|
||
}
|
||
let fullyChecked = true;
|
||
let partialChecked = false;
|
||
let allDisabled = true;
|
||
for (const childNode of levelTreeNode.children) {
|
||
const childKey = childNode.key;
|
||
if (childNode.disabled)
|
||
continue;
|
||
if (allDisabled)
|
||
allDisabled = false;
|
||
if (syntheticCheckedKeySet.has(childKey)) {
|
||
partialChecked = true;
|
||
} else if (syntheticIndeterminateKeySet.has(childKey)) {
|
||
partialChecked = true;
|
||
fullyChecked = false;
|
||
break;
|
||
} else {
|
||
fullyChecked = false;
|
||
if (partialChecked) {
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
if (fullyChecked && !allDisabled) {
|
||
if (checkStrategyIsParent) {
|
||
levelTreeNode.children.forEach((v) => {
|
||
if (!v.disabled && syntheticCheckedKeySet.has(v.key)) {
|
||
syntheticCheckedKeySet.delete(v.key);
|
||
}
|
||
});
|
||
}
|
||
syntheticCheckedKeySet.add(levelTreeNodeKey);
|
||
} else if (partialChecked) {
|
||
syntheticIndeterminateKeySet.add(levelTreeNodeKey);
|
||
}
|
||
if (levelIsZero && checkStrategyIsChild && syntheticCheckedKeySet.has(levelTreeNodeKey)) {
|
||
syntheticCheckedKeySet.delete(levelTreeNodeKey);
|
||
}
|
||
}
|
||
}
|
||
return {
|
||
checkedKeys: Array.from(syntheticCheckedKeySet),
|
||
indeterminateKeys: Array.from(syntheticIndeterminateKeySet)
|
||
};
|
||
}
|
||
function getExtendedCheckedKeySet(checkedKeys, treeMate, allowNotLoaded, isUnchecking) {
|
||
const { treeNodeMap, getChildren } = treeMate;
|
||
const visitedKeySet = /* @__PURE__ */ new Set();
|
||
const extendedKeySet = new Set(checkedKeys);
|
||
checkedKeys.forEach((checkedKey) => {
|
||
const checkedTreeNode = treeNodeMap.get(checkedKey);
|
||
if (checkedTreeNode !== void 0) {
|
||
traverseWithCb(checkedTreeNode, (treeNode) => {
|
||
if (treeNode.disabled) {
|
||
return TRAVERSE_COMMAND.STOP;
|
||
}
|
||
const { key } = treeNode;
|
||
if (visitedKeySet.has(key))
|
||
return;
|
||
visitedKeySet.add(key);
|
||
extendedKeySet.add(key);
|
||
if (isExpilicitlyNotLoaded(treeNode.rawNode, getChildren)) {
|
||
if (isUnchecking) {
|
||
return TRAVERSE_COMMAND.STOP;
|
||
} else if (!allowNotLoaded) {
|
||
throw new SubtreeNotLoadedError();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
return extendedKeySet;
|
||
}
|
||
function getPath(key, { includeGroup = false, includeSelf = true }, treeMate) {
|
||
var _a;
|
||
const treeNodeMap = treeMate.treeNodeMap;
|
||
let treeNode = key === null || key === void 0 ? null : (_a = treeNodeMap.get(key)) !== null && _a !== void 0 ? _a : null;
|
||
const mergedPath = {
|
||
keyPath: [],
|
||
treeNodePath: [],
|
||
treeNode
|
||
};
|
||
if (treeNode === null || treeNode === void 0 ? void 0 : treeNode.ignored) {
|
||
mergedPath.treeNode = null;
|
||
return mergedPath;
|
||
}
|
||
while (treeNode) {
|
||
if (!treeNode.ignored && (includeGroup || !treeNode.isGroup)) {
|
||
mergedPath.treeNodePath.push(treeNode);
|
||
}
|
||
treeNode = treeNode.parent;
|
||
}
|
||
mergedPath.treeNodePath.reverse();
|
||
if (!includeSelf)
|
||
mergedPath.treeNodePath.pop();
|
||
mergedPath.keyPath = mergedPath.treeNodePath.map((treeNode2) => treeNode2.key);
|
||
return mergedPath;
|
||
}
|
||
function getFirstAvailableNode(nodes) {
|
||
if (nodes.length === 0)
|
||
return null;
|
||
const node = nodes[0];
|
||
if (node.isGroup || node.ignored || node.disabled) {
|
||
return node.getNext();
|
||
}
|
||
return node;
|
||
}
|
||
function rawGetNext(node, loop) {
|
||
const sibs = node.siblings;
|
||
const l = sibs.length;
|
||
const { index } = node;
|
||
if (loop) {
|
||
return sibs[(index + 1) % l];
|
||
} else {
|
||
if (index === sibs.length - 1)
|
||
return null;
|
||
return sibs[index + 1];
|
||
}
|
||
}
|
||
function move(fromNode, dir, { loop = false, includeDisabled = false } = {}) {
|
||
const iterate = dir === "prev" ? rawGetPrev : rawGetNext;
|
||
const getChildOptions = {
|
||
reverse: dir === "prev"
|
||
};
|
||
let meet = false;
|
||
let endNode = null;
|
||
function traverse(node) {
|
||
if (node === null)
|
||
return;
|
||
if (node === fromNode) {
|
||
if (!meet) {
|
||
meet = true;
|
||
} else if (!fromNode.disabled && !fromNode.isGroup) {
|
||
endNode = fromNode;
|
||
return;
|
||
}
|
||
} else {
|
||
if ((!node.disabled || includeDisabled) && !node.ignored && !node.isGroup) {
|
||
endNode = node;
|
||
return;
|
||
}
|
||
}
|
||
if (node.isGroup) {
|
||
const child = getChild(node, getChildOptions);
|
||
if (child !== null) {
|
||
endNode = child;
|
||
} else {
|
||
traverse(iterate(node, loop));
|
||
}
|
||
} else {
|
||
const nextNode = iterate(node, false);
|
||
if (nextNode !== null) {
|
||
traverse(nextNode);
|
||
} else {
|
||
const parent = rawGetParent(node);
|
||
if (parent === null || parent === void 0 ? void 0 : parent.isGroup) {
|
||
traverse(iterate(parent, loop));
|
||
} else if (loop) {
|
||
traverse(iterate(node, true));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
traverse(fromNode);
|
||
return endNode;
|
||
}
|
||
function rawGetPrev(node, loop) {
|
||
const sibs = node.siblings;
|
||
const l = sibs.length;
|
||
const { index } = node;
|
||
if (loop) {
|
||
return sibs[(index - 1 + l) % l];
|
||
} else {
|
||
if (index === 0)
|
||
return null;
|
||
return sibs[index - 1];
|
||
}
|
||
}
|
||
function rawGetParent(node) {
|
||
return node.parent;
|
||
}
|
||
function getChild(node, options = {}) {
|
||
const { reverse = false } = options;
|
||
const { children } = node;
|
||
if (children) {
|
||
const { length } = children;
|
||
const start = reverse ? length - 1 : 0;
|
||
const end = reverse ? -1 : length;
|
||
const delta = reverse ? -1 : 1;
|
||
for (let i = start; i !== end; i += delta) {
|
||
const child = children[i];
|
||
if (!child.disabled && !child.ignored) {
|
||
if (child.isGroup) {
|
||
const childInGroup = getChild(child, options);
|
||
if (childInGroup !== null)
|
||
return childInGroup;
|
||
} else {
|
||
return child;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
const moveMethods = {
|
||
getChild() {
|
||
if (this.ignored)
|
||
return null;
|
||
return getChild(this);
|
||
},
|
||
getParent() {
|
||
const { parent } = this;
|
||
if (parent === null || parent === void 0 ? void 0 : parent.isGroup) {
|
||
return parent.getParent();
|
||
}
|
||
return parent;
|
||
},
|
||
getNext(options = {}) {
|
||
return move(this, "next", options);
|
||
},
|
||
getPrev(options = {}) {
|
||
return move(this, "prev", options);
|
||
}
|
||
};
|
||
function flatten(treeNodes, expandedKeys) {
|
||
const expandedKeySet = expandedKeys ? new Set(expandedKeys) : void 0;
|
||
const flattenedNodes = [];
|
||
function traverse(treeNodes2) {
|
||
treeNodes2.forEach((treeNode) => {
|
||
flattenedNodes.push(treeNode);
|
||
if (treeNode.isLeaf || !treeNode.children || treeNode.ignored)
|
||
return;
|
||
if (treeNode.isGroup) {
|
||
traverse(treeNode.children);
|
||
} else if (
|
||
// normal non-leaf node
|
||
expandedKeySet === void 0 || expandedKeySet.has(treeNode.key)
|
||
) {
|
||
traverse(treeNode.children);
|
||
}
|
||
});
|
||
}
|
||
traverse(treeNodes);
|
||
return flattenedNodes;
|
||
}
|
||
function contains(parent, child) {
|
||
const parentKey = parent.key;
|
||
while (child) {
|
||
if (child.key === parentKey)
|
||
return true;
|
||
child = child.parent;
|
||
}
|
||
return false;
|
||
}
|
||
function createTreeNodes(rawNodes, treeNodeMap, levelTreeNodeMap, nodeProto, getChildren, parent = null, level = 0) {
|
||
const treeNodes = [];
|
||
rawNodes.forEach((rawNode, index) => {
|
||
var _a;
|
||
const treeNode = Object.create(nodeProto);
|
||
treeNode.rawNode = rawNode;
|
||
treeNode.siblings = treeNodes;
|
||
treeNode.level = level;
|
||
treeNode.index = index;
|
||
treeNode.isFirstChild = index === 0;
|
||
treeNode.isLastChild = index + 1 === rawNodes.length;
|
||
treeNode.parent = parent;
|
||
if (!treeNode.ignored) {
|
||
const rawChildren = getChildren(rawNode);
|
||
if (Array.isArray(rawChildren)) {
|
||
treeNode.children = createTreeNodes(rawChildren, treeNodeMap, levelTreeNodeMap, nodeProto, getChildren, treeNode, level + 1);
|
||
}
|
||
}
|
||
treeNodes.push(treeNode);
|
||
treeNodeMap.set(treeNode.key, treeNode);
|
||
if (!levelTreeNodeMap.has(level))
|
||
levelTreeNodeMap.set(level, []);
|
||
(_a = levelTreeNodeMap.get(level)) === null || _a === void 0 ? void 0 : _a.push(treeNode);
|
||
});
|
||
return treeNodes;
|
||
}
|
||
function createTreeMate(rawNodes, options = {}) {
|
||
var _a;
|
||
const treeNodeMap = /* @__PURE__ */ new Map();
|
||
const levelTreeNodeMap = /* @__PURE__ */ new Map();
|
||
const { getDisabled = isDisabled, getIgnored = isIgnored, getIsGroup = isGroup, getKey = defaultGetKey } = options;
|
||
const _getChildren = (_a = options.getChildren) !== null && _a !== void 0 ? _a : defaultGetChildren;
|
||
const getChildren = options.ignoreEmptyChildren ? (node) => {
|
||
const children = _getChildren(node);
|
||
if (Array.isArray(children)) {
|
||
if (!children.length)
|
||
return null;
|
||
return children;
|
||
}
|
||
return children;
|
||
} : _getChildren;
|
||
const nodeProto = Object.assign({
|
||
get key() {
|
||
return getKey(this.rawNode);
|
||
},
|
||
get disabled() {
|
||
return getDisabled(this.rawNode);
|
||
},
|
||
get isGroup() {
|
||
return getIsGroup(this.rawNode);
|
||
},
|
||
get isLeaf() {
|
||
return isLeaf(this.rawNode, getChildren);
|
||
},
|
||
get shallowLoaded() {
|
||
return isShallowLoaded(this.rawNode, getChildren);
|
||
},
|
||
get ignored() {
|
||
return getIgnored(this.rawNode);
|
||
},
|
||
contains(node) {
|
||
return contains(this, node);
|
||
}
|
||
}, moveMethods);
|
||
const treeNodes = createTreeNodes(rawNodes, treeNodeMap, levelTreeNodeMap, nodeProto, getChildren);
|
||
function getNode(key) {
|
||
if (key === null || key === void 0)
|
||
return null;
|
||
const tmNode = treeNodeMap.get(key);
|
||
if (tmNode && !tmNode.isGroup && !tmNode.ignored) {
|
||
return tmNode;
|
||
}
|
||
return null;
|
||
}
|
||
function _getNode(key) {
|
||
if (key === null || key === void 0)
|
||
return null;
|
||
const tmNode = treeNodeMap.get(key);
|
||
if (tmNode && !tmNode.ignored) {
|
||
return tmNode;
|
||
}
|
||
return null;
|
||
}
|
||
function getPrev(key, options2) {
|
||
const node = _getNode(key);
|
||
if (!node)
|
||
return null;
|
||
return node.getPrev(options2);
|
||
}
|
||
function getNext(key, options2) {
|
||
const node = _getNode(key);
|
||
if (!node)
|
||
return null;
|
||
return node.getNext(options2);
|
||
}
|
||
function getParent(key) {
|
||
const node = _getNode(key);
|
||
if (!node)
|
||
return null;
|
||
return node.getParent();
|
||
}
|
||
function getChild2(key) {
|
||
const node = _getNode(key);
|
||
if (!node)
|
||
return null;
|
||
return node.getChild();
|
||
}
|
||
const treemate = {
|
||
treeNodes,
|
||
treeNodeMap,
|
||
levelTreeNodeMap,
|
||
maxLevel: Math.max(...levelTreeNodeMap.keys()),
|
||
getChildren,
|
||
getFlattenedNodes(expandedKeys) {
|
||
return flatten(treeNodes, expandedKeys);
|
||
},
|
||
getNode,
|
||
getPrev,
|
||
getNext,
|
||
getParent,
|
||
getChild: getChild2,
|
||
getFirstAvailableNode() {
|
||
return getFirstAvailableNode(treeNodes);
|
||
},
|
||
getPath(key, options2 = {}) {
|
||
return getPath(key, options2, treemate);
|
||
},
|
||
getCheckedKeys(checkedKeys, options2 = {}) {
|
||
const { cascade = true, leafOnly = false, checkStrategy = "all", allowNotLoaded = false } = options2;
|
||
return getCheckedKeys({
|
||
checkedKeys: unwrapCheckedKeys(checkedKeys),
|
||
indeterminateKeys: unwrapIndeterminateKeys(checkedKeys),
|
||
cascade,
|
||
leafOnly,
|
||
checkStrategy,
|
||
allowNotLoaded
|
||
}, treemate);
|
||
},
|
||
check(keysToCheck, checkedKeys, options2 = {}) {
|
||
const { cascade = true, leafOnly = false, checkStrategy = "all", allowNotLoaded = false } = options2;
|
||
return getCheckedKeys({
|
||
checkedKeys: unwrapCheckedKeys(checkedKeys),
|
||
indeterminateKeys: unwrapIndeterminateKeys(checkedKeys),
|
||
keysToCheck: keysToCheck === void 0 || keysToCheck === null ? [] : toArray(keysToCheck),
|
||
cascade,
|
||
leafOnly,
|
||
checkStrategy,
|
||
allowNotLoaded
|
||
}, treemate);
|
||
},
|
||
uncheck(keysToUncheck, checkedKeys, options2 = {}) {
|
||
const { cascade = true, leafOnly = false, checkStrategy = "all", allowNotLoaded = false } = options2;
|
||
return getCheckedKeys({
|
||
checkedKeys: unwrapCheckedKeys(checkedKeys),
|
||
indeterminateKeys: unwrapIndeterminateKeys(checkedKeys),
|
||
keysToUncheck: keysToUncheck === null || keysToUncheck === void 0 ? [] : toArray(keysToUncheck),
|
||
cascade,
|
||
leafOnly,
|
||
checkStrategy,
|
||
allowNotLoaded
|
||
}, treemate);
|
||
},
|
||
getNonLeafKeys(options2 = {}) {
|
||
return getNonLeafKeys(treeNodes, options2);
|
||
}
|
||
};
|
||
return treemate;
|
||
}
|
||
const dropdownMenuInjectionKey = createInjectionKey("n-dropdown-menu");
|
||
const dropdownInjectionKey = createInjectionKey("n-dropdown");
|
||
const dropdownOptionInjectionKey = createInjectionKey("n-dropdown-option");
|
||
const NDropdownDivider = defineComponent({
|
||
name: "DropdownDivider",
|
||
props: {
|
||
clsPrefix: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
},
|
||
render() {
|
||
return h("div", {
|
||
class: `${this.clsPrefix}-dropdown-divider`
|
||
});
|
||
}
|
||
});
|
||
const NDropdownGroupHeader = defineComponent({
|
||
name: "DropdownGroupHeader",
|
||
props: {
|
||
clsPrefix: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
tmNode: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
setup() {
|
||
const {
|
||
showIconRef,
|
||
hasSubmenuRef
|
||
} = inject(dropdownMenuInjectionKey);
|
||
const {
|
||
renderLabelRef,
|
||
labelFieldRef,
|
||
nodePropsRef,
|
||
renderOptionRef
|
||
} = inject(dropdownInjectionKey);
|
||
return {
|
||
labelField: labelFieldRef,
|
||
showIcon: showIconRef,
|
||
hasSubmenu: hasSubmenuRef,
|
||
renderLabel: renderLabelRef,
|
||
nodeProps: nodePropsRef,
|
||
renderOption: renderOptionRef
|
||
};
|
||
},
|
||
render() {
|
||
var _a;
|
||
const {
|
||
clsPrefix,
|
||
hasSubmenu,
|
||
showIcon,
|
||
nodeProps,
|
||
renderLabel,
|
||
renderOption
|
||
} = this;
|
||
const {
|
||
rawNode
|
||
} = this.tmNode;
|
||
const node = h("div", Object.assign({
|
||
class: `${clsPrefix}-dropdown-option`
|
||
}, nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(rawNode)), h("div", {
|
||
class: `${clsPrefix}-dropdown-option-body ${clsPrefix}-dropdown-option-body--group`
|
||
}, h("div", {
|
||
"data-dropdown-option": true,
|
||
class: [`${clsPrefix}-dropdown-option-body__prefix`, showIcon && `${clsPrefix}-dropdown-option-body__prefix--show-icon`]
|
||
}, render(rawNode.icon)), h("div", {
|
||
class: `${clsPrefix}-dropdown-option-body__label`,
|
||
"data-dropdown-option": true
|
||
}, renderLabel ? renderLabel(rawNode) : render((_a = rawNode.title) !== null && _a !== void 0 ? _a : rawNode[this.labelField])), h("div", {
|
||
class: [`${clsPrefix}-dropdown-option-body__suffix`, hasSubmenu && `${clsPrefix}-dropdown-option-body__suffix--has-submenu`],
|
||
"data-dropdown-option": true
|
||
})));
|
||
if (renderOption) {
|
||
return renderOption({
|
||
node,
|
||
option: rawNode
|
||
});
|
||
}
|
||
return node;
|
||
}
|
||
});
|
||
function isSubmenuNode(rawNode, childrenField) {
|
||
return rawNode.type === "submenu" || rawNode.type === void 0 && rawNode[childrenField] !== void 0;
|
||
}
|
||
function isGroupNode(rawNode) {
|
||
return rawNode.type === "group";
|
||
}
|
||
function isDividerNode(rawNode) {
|
||
return rawNode.type === "divider";
|
||
}
|
||
function isRenderNode(rawNode) {
|
||
return rawNode.type === "render";
|
||
}
|
||
const NDropdownOption = defineComponent({
|
||
name: "DropdownOption",
|
||
props: {
|
||
clsPrefix: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
tmNode: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
parentKey: {
|
||
type: [String, Number],
|
||
default: null
|
||
},
|
||
placement: {
|
||
type: String,
|
||
default: "right-start"
|
||
},
|
||
props: Object,
|
||
scrollable: Boolean
|
||
},
|
||
setup(props) {
|
||
const NDropdown = inject(dropdownInjectionKey);
|
||
const {
|
||
hoverKeyRef,
|
||
keyboardKeyRef,
|
||
lastToggledSubmenuKeyRef,
|
||
pendingKeyPathRef,
|
||
activeKeyPathRef,
|
||
animatedRef,
|
||
mergedShowRef,
|
||
renderLabelRef,
|
||
renderIconRef,
|
||
labelFieldRef,
|
||
childrenFieldRef,
|
||
renderOptionRef,
|
||
nodePropsRef,
|
||
menuPropsRef
|
||
} = NDropdown;
|
||
const NDropdownOption2 = inject(dropdownOptionInjectionKey, null);
|
||
const NDropdownMenu2 = inject(dropdownMenuInjectionKey);
|
||
const NPopoverBody = inject(popoverBodyInjectionKey);
|
||
const rawNodeRef = computed(() => props.tmNode.rawNode);
|
||
const hasSubmenuRef = computed(() => {
|
||
const {
|
||
value: childrenField
|
||
} = childrenFieldRef;
|
||
return isSubmenuNode(props.tmNode.rawNode, childrenField);
|
||
});
|
||
const mergedDisabledRef = computed(() => {
|
||
const {
|
||
disabled
|
||
} = props.tmNode;
|
||
return disabled;
|
||
});
|
||
const showSubmenuRef = computed(() => {
|
||
if (!hasSubmenuRef.value) return false;
|
||
const {
|
||
key,
|
||
disabled
|
||
} = props.tmNode;
|
||
if (disabled) return false;
|
||
const {
|
||
value: hoverKey
|
||
} = hoverKeyRef;
|
||
const {
|
||
value: keyboardKey
|
||
} = keyboardKeyRef;
|
||
const {
|
||
value: lastToggledSubmenuKey
|
||
} = lastToggledSubmenuKeyRef;
|
||
const {
|
||
value: pendingKeyPath
|
||
} = pendingKeyPathRef;
|
||
if (hoverKey !== null) return pendingKeyPath.includes(key);
|
||
if (keyboardKey !== null) {
|
||
return pendingKeyPath.includes(key) && pendingKeyPath[pendingKeyPath.length - 1] !== key;
|
||
}
|
||
if (lastToggledSubmenuKey !== null) return pendingKeyPath.includes(key);
|
||
return false;
|
||
});
|
||
const shouldDelayRef = computed(() => {
|
||
return keyboardKeyRef.value === null && !animatedRef.value;
|
||
});
|
||
const deferredShowSubmenuRef = useDeferredTrue(showSubmenuRef, 300, shouldDelayRef);
|
||
const parentEnteringSubmenuRef = computed(() => {
|
||
return !!(NDropdownOption2 === null || NDropdownOption2 === void 0 ? void 0 : NDropdownOption2.enteringSubmenuRef.value);
|
||
});
|
||
const enteringSubmenuRef = ref(false);
|
||
provide(dropdownOptionInjectionKey, {
|
||
enteringSubmenuRef
|
||
});
|
||
function handleSubmenuBeforeEnter() {
|
||
enteringSubmenuRef.value = true;
|
||
}
|
||
function handleSubmenuAfterEnter() {
|
||
enteringSubmenuRef.value = false;
|
||
}
|
||
function handleMouseEnter() {
|
||
const {
|
||
parentKey,
|
||
tmNode
|
||
} = props;
|
||
if (tmNode.disabled) return;
|
||
if (!mergedShowRef.value) return;
|
||
lastToggledSubmenuKeyRef.value = parentKey;
|
||
keyboardKeyRef.value = null;
|
||
hoverKeyRef.value = tmNode.key;
|
||
}
|
||
function handleMouseMove() {
|
||
const {
|
||
tmNode
|
||
} = props;
|
||
if (tmNode.disabled) return;
|
||
if (!mergedShowRef.value) return;
|
||
if (hoverKeyRef.value === tmNode.key) return;
|
||
handleMouseEnter();
|
||
}
|
||
function handleMouseLeave(e) {
|
||
if (props.tmNode.disabled) return;
|
||
if (!mergedShowRef.value) return;
|
||
const {
|
||
relatedTarget
|
||
} = e;
|
||
if (relatedTarget && !happensIn({
|
||
target: relatedTarget
|
||
}, "dropdownOption") && !happensIn({
|
||
target: relatedTarget
|
||
}, "scrollbarRail")) {
|
||
hoverKeyRef.value = null;
|
||
}
|
||
}
|
||
function handleClick() {
|
||
const {
|
||
value: hasSubmenu
|
||
} = hasSubmenuRef;
|
||
const {
|
||
tmNode
|
||
} = props;
|
||
if (!mergedShowRef.value) return;
|
||
if (!hasSubmenu && !tmNode.disabled) {
|
||
NDropdown.doSelect(tmNode.key, tmNode.rawNode);
|
||
NDropdown.doUpdateShow(false);
|
||
}
|
||
}
|
||
return {
|
||
labelField: labelFieldRef,
|
||
renderLabel: renderLabelRef,
|
||
renderIcon: renderIconRef,
|
||
siblingHasIcon: NDropdownMenu2.showIconRef,
|
||
siblingHasSubmenu: NDropdownMenu2.hasSubmenuRef,
|
||
menuProps: menuPropsRef,
|
||
popoverBody: NPopoverBody,
|
||
animated: animatedRef,
|
||
mergedShowSubmenu: computed(() => {
|
||
return deferredShowSubmenuRef.value && !parentEnteringSubmenuRef.value;
|
||
}),
|
||
rawNode: rawNodeRef,
|
||
hasSubmenu: hasSubmenuRef,
|
||
pending: useMemo(() => {
|
||
const {
|
||
value: pendingKeyPath
|
||
} = pendingKeyPathRef;
|
||
const {
|
||
key
|
||
} = props.tmNode;
|
||
return pendingKeyPath.includes(key);
|
||
}),
|
||
childActive: useMemo(() => {
|
||
const {
|
||
value: activeKeyPath
|
||
} = activeKeyPathRef;
|
||
const {
|
||
key
|
||
} = props.tmNode;
|
||
const index = activeKeyPath.findIndex((k) => key === k);
|
||
if (index === -1) return false;
|
||
return index < activeKeyPath.length - 1;
|
||
}),
|
||
active: useMemo(() => {
|
||
const {
|
||
value: activeKeyPath
|
||
} = activeKeyPathRef;
|
||
const {
|
||
key
|
||
} = props.tmNode;
|
||
const index = activeKeyPath.findIndex((k) => key === k);
|
||
if (index === -1) return false;
|
||
return index === activeKeyPath.length - 1;
|
||
}),
|
||
mergedDisabled: mergedDisabledRef,
|
||
renderOption: renderOptionRef,
|
||
nodeProps: nodePropsRef,
|
||
handleClick,
|
||
handleMouseMove,
|
||
handleMouseEnter,
|
||
handleMouseLeave,
|
||
handleSubmenuBeforeEnter,
|
||
handleSubmenuAfterEnter
|
||
};
|
||
},
|
||
render() {
|
||
var _a, _b;
|
||
const {
|
||
animated,
|
||
rawNode,
|
||
mergedShowSubmenu,
|
||
clsPrefix,
|
||
siblingHasIcon,
|
||
siblingHasSubmenu,
|
||
renderLabel,
|
||
renderIcon,
|
||
renderOption,
|
||
nodeProps,
|
||
props,
|
||
scrollable
|
||
} = this;
|
||
let submenuVNode = null;
|
||
if (mergedShowSubmenu) {
|
||
const submenuNodeProps = (_a = this.menuProps) === null || _a === void 0 ? void 0 : _a.call(this, rawNode, rawNode.children);
|
||
submenuVNode = h(NDropdownMenu, Object.assign({}, submenuNodeProps, {
|
||
clsPrefix,
|
||
scrollable: this.scrollable,
|
||
tmNodes: this.tmNode.children,
|
||
parentKey: this.tmNode.key
|
||
}));
|
||
}
|
||
const builtinProps = {
|
||
class: [`${clsPrefix}-dropdown-option-body`, this.pending && `${clsPrefix}-dropdown-option-body--pending`, this.active && `${clsPrefix}-dropdown-option-body--active`, this.childActive && `${clsPrefix}-dropdown-option-body--child-active`, this.mergedDisabled && `${clsPrefix}-dropdown-option-body--disabled`],
|
||
onMousemove: this.handleMouseMove,
|
||
onMouseenter: this.handleMouseEnter,
|
||
onMouseleave: this.handleMouseLeave,
|
||
onClick: this.handleClick
|
||
};
|
||
const optionNodeProps = nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(rawNode);
|
||
const node = h("div", Object.assign({
|
||
class: [`${clsPrefix}-dropdown-option`, optionNodeProps === null || optionNodeProps === void 0 ? void 0 : optionNodeProps.class],
|
||
"data-dropdown-option": true
|
||
}, optionNodeProps), h("div", mergeProps(builtinProps, props), [h("div", {
|
||
class: [`${clsPrefix}-dropdown-option-body__prefix`, siblingHasIcon && `${clsPrefix}-dropdown-option-body__prefix--show-icon`]
|
||
}, [renderIcon ? renderIcon(rawNode) : render(rawNode.icon)]), h("div", {
|
||
"data-dropdown-option": true,
|
||
class: `${clsPrefix}-dropdown-option-body__label`
|
||
}, renderLabel ? renderLabel(rawNode) : render((_b = rawNode[this.labelField]) !== null && _b !== void 0 ? _b : rawNode.title)), h("div", {
|
||
"data-dropdown-option": true,
|
||
class: [`${clsPrefix}-dropdown-option-body__suffix`, siblingHasSubmenu && `${clsPrefix}-dropdown-option-body__suffix--has-submenu`]
|
||
}, this.hasSubmenu ? h(NIcon, null, {
|
||
default: () => h(ChevronRightIcon, null)
|
||
}) : null)]), this.hasSubmenu ? h(Binder, null, {
|
||
default: () => [h(VTarget, null, {
|
||
default: () => h("div", {
|
||
class: `${clsPrefix}-dropdown-offset-container`
|
||
}, h(VFollower, {
|
||
show: this.mergedShowSubmenu,
|
||
placement: this.placement,
|
||
to: scrollable ? this.popoverBody || void 0 : void 0,
|
||
teleportDisabled: !scrollable
|
||
}, {
|
||
default: () => {
|
||
return h("div", {
|
||
class: `${clsPrefix}-dropdown-menu-wrapper`
|
||
}, animated ? h(Transition, {
|
||
onBeforeEnter: this.handleSubmenuBeforeEnter,
|
||
onAfterEnter: this.handleSubmenuAfterEnter,
|
||
name: "fade-in-scale-up-transition",
|
||
appear: true
|
||
}, {
|
||
default: () => submenuVNode
|
||
}) : submenuVNode);
|
||
}
|
||
}))
|
||
})]
|
||
}) : null);
|
||
if (renderOption) {
|
||
return renderOption({
|
||
node,
|
||
option: rawNode
|
||
});
|
||
}
|
||
return node;
|
||
}
|
||
});
|
||
const NDropdownGroup = defineComponent({
|
||
name: "NDropdownGroup",
|
||
props: {
|
||
clsPrefix: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
tmNode: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
parentKey: {
|
||
type: [String, Number],
|
||
default: null
|
||
}
|
||
},
|
||
render() {
|
||
const {
|
||
tmNode,
|
||
parentKey,
|
||
clsPrefix
|
||
} = this;
|
||
const {
|
||
children
|
||
} = tmNode;
|
||
return h(Fragment, null, h(NDropdownGroupHeader, {
|
||
clsPrefix,
|
||
tmNode,
|
||
key: tmNode.key
|
||
}), children === null || children === void 0 ? void 0 : children.map((child) => {
|
||
const {
|
||
rawNode
|
||
} = child;
|
||
if (rawNode.show === false) return null;
|
||
if (isDividerNode(rawNode)) {
|
||
return h(NDropdownDivider, {
|
||
clsPrefix,
|
||
key: child.key
|
||
});
|
||
}
|
||
if (child.isGroup) {
|
||
warn("dropdown", "`group` node is not allowed to be put in `group` node.");
|
||
return null;
|
||
}
|
||
return h(NDropdownOption, {
|
||
clsPrefix,
|
||
tmNode: child,
|
||
parentKey,
|
||
key: child.key
|
||
});
|
||
}));
|
||
}
|
||
});
|
||
const NDropdownRenderOption = defineComponent({
|
||
name: "DropdownRenderOption",
|
||
props: {
|
||
tmNode: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
render() {
|
||
const {
|
||
rawNode: {
|
||
render: render2,
|
||
props
|
||
}
|
||
} = this.tmNode;
|
||
return h("div", props, [render2 === null || render2 === void 0 ? void 0 : render2()]);
|
||
}
|
||
});
|
||
const NDropdownMenu = defineComponent({
|
||
name: "DropdownMenu",
|
||
props: {
|
||
scrollable: Boolean,
|
||
showArrow: Boolean,
|
||
arrowStyle: [String, Object],
|
||
clsPrefix: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
tmNodes: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
parentKey: {
|
||
type: [String, Number],
|
||
default: null
|
||
}
|
||
},
|
||
setup(props) {
|
||
const {
|
||
renderIconRef,
|
||
childrenFieldRef
|
||
} = inject(dropdownInjectionKey);
|
||
provide(dropdownMenuInjectionKey, {
|
||
showIconRef: computed(() => {
|
||
const renderIcon = renderIconRef.value;
|
||
return props.tmNodes.some((tmNode) => {
|
||
var _a;
|
||
if (tmNode.isGroup) {
|
||
return (_a = tmNode.children) === null || _a === void 0 ? void 0 : _a.some(({
|
||
rawNode: rawChild
|
||
}) => renderIcon ? renderIcon(rawChild) : rawChild.icon);
|
||
}
|
||
const {
|
||
rawNode
|
||
} = tmNode;
|
||
return renderIcon ? renderIcon(rawNode) : rawNode.icon;
|
||
});
|
||
}),
|
||
hasSubmenuRef: computed(() => {
|
||
const {
|
||
value: childrenField
|
||
} = childrenFieldRef;
|
||
return props.tmNodes.some((tmNode) => {
|
||
var _a;
|
||
if (tmNode.isGroup) {
|
||
return (_a = tmNode.children) === null || _a === void 0 ? void 0 : _a.some(({
|
||
rawNode: rawChild
|
||
}) => isSubmenuNode(rawChild, childrenField));
|
||
}
|
||
const {
|
||
rawNode
|
||
} = tmNode;
|
||
return isSubmenuNode(rawNode, childrenField);
|
||
});
|
||
})
|
||
});
|
||
const bodyRef = ref(null);
|
||
provide(modalBodyInjectionKey, null);
|
||
provide(drawerBodyInjectionKey, null);
|
||
provide(popoverBodyInjectionKey, bodyRef);
|
||
return {
|
||
bodyRef
|
||
};
|
||
},
|
||
render() {
|
||
const {
|
||
parentKey,
|
||
clsPrefix,
|
||
scrollable
|
||
} = this;
|
||
const menuOptionsNode = this.tmNodes.map((tmNode) => {
|
||
const {
|
||
rawNode
|
||
} = tmNode;
|
||
if (rawNode.show === false) return null;
|
||
if (isRenderNode(rawNode)) {
|
||
return h(NDropdownRenderOption, {
|
||
tmNode,
|
||
key: tmNode.key
|
||
});
|
||
}
|
||
if (isDividerNode(rawNode)) {
|
||
return h(NDropdownDivider, {
|
||
clsPrefix,
|
||
key: tmNode.key
|
||
});
|
||
}
|
||
if (isGroupNode(rawNode)) {
|
||
return h(NDropdownGroup, {
|
||
clsPrefix,
|
||
tmNode,
|
||
parentKey,
|
||
key: tmNode.key
|
||
});
|
||
}
|
||
return h(NDropdownOption, {
|
||
clsPrefix,
|
||
tmNode,
|
||
parentKey,
|
||
key: tmNode.key,
|
||
props: rawNode.props,
|
||
scrollable
|
||
});
|
||
});
|
||
return h("div", {
|
||
class: [`${clsPrefix}-dropdown-menu`, scrollable && `${clsPrefix}-dropdown-menu--scrollable`],
|
||
ref: "bodyRef"
|
||
}, scrollable ? h(XScrollbar, {
|
||
contentClass: `${clsPrefix}-dropdown-menu__content`
|
||
}, {
|
||
default: () => menuOptionsNode
|
||
}) : menuOptionsNode, this.showArrow ? renderArrow({
|
||
clsPrefix,
|
||
arrowStyle: this.arrowStyle,
|
||
arrowClass: void 0,
|
||
arrowWrapperClass: void 0,
|
||
arrowWrapperStyle: void 0
|
||
}) : null);
|
||
}
|
||
});
|
||
const style = cB("dropdown-menu", `
|
||
transform-origin: var(--v-transform-origin);
|
||
background-color: var(--n-color);
|
||
border-radius: var(--n-border-radius);
|
||
box-shadow: var(--n-box-shadow);
|
||
position: relative;
|
||
transition:
|
||
background-color .3s var(--n-bezier),
|
||
box-shadow .3s var(--n-bezier);
|
||
`, [fadeInScaleUpTransition(), cB("dropdown-option", `
|
||
position: relative;
|
||
`, [c("a", `
|
||
text-decoration: none;
|
||
color: inherit;
|
||
outline: none;
|
||
`, [c("&::before", `
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
`)]), cB("dropdown-option-body", `
|
||
display: flex;
|
||
cursor: pointer;
|
||
position: relative;
|
||
height: var(--n-option-height);
|
||
line-height: var(--n-option-height);
|
||
font-size: var(--n-font-size);
|
||
color: var(--n-option-text-color);
|
||
transition: color .3s var(--n-bezier);
|
||
`, [c("&::before", `
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 4px;
|
||
right: 4px;
|
||
transition: background-color .3s var(--n-bezier);
|
||
border-radius: var(--n-border-radius);
|
||
`), cNotM("disabled", [cM("pending", `
|
||
color: var(--n-option-text-color-hover);
|
||
`, [cE("prefix, suffix", `
|
||
color: var(--n-option-text-color-hover);
|
||
`), c("&::before", "background-color: var(--n-option-color-hover);")]), cM("active", `
|
||
color: var(--n-option-text-color-active);
|
||
`, [cE("prefix, suffix", `
|
||
color: var(--n-option-text-color-active);
|
||
`), c("&::before", "background-color: var(--n-option-color-active);")]), cM("child-active", `
|
||
color: var(--n-option-text-color-child-active);
|
||
`, [cE("prefix, suffix", `
|
||
color: var(--n-option-text-color-child-active);
|
||
`)])]), cM("disabled", `
|
||
cursor: not-allowed;
|
||
opacity: var(--n-option-opacity-disabled);
|
||
`), cM("group", `
|
||
font-size: calc(var(--n-font-size) - 1px);
|
||
color: var(--n-group-header-text-color);
|
||
`, [cE("prefix", `
|
||
width: calc(var(--n-option-prefix-width) / 2);
|
||
`, [cM("show-icon", `
|
||
width: calc(var(--n-option-icon-prefix-width) / 2);
|
||
`)])]), cE("prefix", `
|
||
width: var(--n-option-prefix-width);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: var(--n-prefix-color);
|
||
transition: color .3s var(--n-bezier);
|
||
z-index: 1;
|
||
`, [cM("show-icon", `
|
||
width: var(--n-option-icon-prefix-width);
|
||
`), cB("icon", `
|
||
font-size: var(--n-option-icon-size);
|
||
`)]), cE("label", `
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
z-index: 1;
|
||
`), cE("suffix", `
|
||
box-sizing: border-box;
|
||
flex-grow: 0;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
min-width: var(--n-option-suffix-width);
|
||
padding: 0 8px;
|
||
transition: color .3s var(--n-bezier);
|
||
color: var(--n-suffix-color);
|
||
z-index: 1;
|
||
`, [cM("has-submenu", `
|
||
width: var(--n-option-icon-suffix-width);
|
||
`), cB("icon", `
|
||
font-size: var(--n-option-icon-size);
|
||
`)]), cB("dropdown-menu", "pointer-events: all;")]), cB("dropdown-offset-container", `
|
||
pointer-events: none;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: -4px;
|
||
bottom: -4px;
|
||
`)]), cB("dropdown-divider", `
|
||
transition: background-color .3s var(--n-bezier);
|
||
background-color: var(--n-divider-color);
|
||
height: 1px;
|
||
margin: 4px 0;
|
||
`), cB("dropdown-menu-wrapper", `
|
||
transform-origin: var(--v-transform-origin);
|
||
width: fit-content;
|
||
`), c(">", [cB("scrollbar", `
|
||
height: inherit;
|
||
max-height: inherit;
|
||
`)]), cNotM("scrollable", `
|
||
padding: var(--n-padding);
|
||
`), cM("scrollable", [cE("content", `
|
||
padding: var(--n-padding);
|
||
`)])]);
|
||
const dropdownBaseProps = {
|
||
animated: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
keyboard: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
size: {
|
||
type: String,
|
||
default: "medium"
|
||
},
|
||
inverted: Boolean,
|
||
placement: {
|
||
type: String,
|
||
default: "bottom"
|
||
},
|
||
onSelect: [Function, Array],
|
||
options: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
menuProps: Function,
|
||
showArrow: Boolean,
|
||
renderLabel: Function,
|
||
renderIcon: Function,
|
||
renderOption: Function,
|
||
nodeProps: Function,
|
||
labelField: {
|
||
type: String,
|
||
default: "label"
|
||
},
|
||
keyField: {
|
||
type: String,
|
||
default: "key"
|
||
},
|
||
childrenField: {
|
||
type: String,
|
||
default: "children"
|
||
},
|
||
// for menu, not documented
|
||
value: [String, Number]
|
||
};
|
||
const popoverPropKeys = Object.keys(popoverBaseProps);
|
||
const dropdownProps = Object.assign(Object.assign(Object.assign({}, popoverBaseProps), dropdownBaseProps), useTheme.props);
|
||
const __unplugin_components_0 = defineComponent({
|
||
name: "Dropdown",
|
||
inheritAttrs: false,
|
||
props: dropdownProps,
|
||
setup(props) {
|
||
const uncontrolledShowRef = ref(false);
|
||
const mergedShowRef = useMergedState(toRef(props, "show"), uncontrolledShowRef);
|
||
const treemateRef = computed(() => {
|
||
const {
|
||
keyField,
|
||
childrenField
|
||
} = props;
|
||
return createTreeMate(props.options, {
|
||
getKey(node) {
|
||
return node[keyField];
|
||
},
|
||
getDisabled(node) {
|
||
return node.disabled === true;
|
||
},
|
||
getIgnored(node) {
|
||
return node.type === "divider" || node.type === "render";
|
||
},
|
||
getChildren(node) {
|
||
return node[childrenField];
|
||
}
|
||
});
|
||
});
|
||
const tmNodesRef = computed(() => {
|
||
return treemateRef.value.treeNodes;
|
||
});
|
||
const hoverKeyRef = ref(null);
|
||
const keyboardKeyRef = ref(null);
|
||
const lastToggledSubmenuKeyRef = ref(null);
|
||
const pendingKeyRef = computed(() => {
|
||
var _a, _b, _c;
|
||
return (_c = (_b = (_a = hoverKeyRef.value) !== null && _a !== void 0 ? _a : keyboardKeyRef.value) !== null && _b !== void 0 ? _b : lastToggledSubmenuKeyRef.value) !== null && _c !== void 0 ? _c : null;
|
||
});
|
||
const pendingKeyPathRef = computed(() => treemateRef.value.getPath(pendingKeyRef.value).keyPath);
|
||
const activeKeyPathRef = computed(() => treemateRef.value.getPath(props.value).keyPath);
|
||
const keyboardEnabledRef = useMemo(() => {
|
||
return props.keyboard && mergedShowRef.value;
|
||
});
|
||
useKeyboard({
|
||
keydown: {
|
||
ArrowUp: {
|
||
prevent: true,
|
||
handler: handleKeydownUp
|
||
},
|
||
ArrowRight: {
|
||
prevent: true,
|
||
handler: handleKeydownRight
|
||
},
|
||
ArrowDown: {
|
||
prevent: true,
|
||
handler: handleKeydownDown
|
||
},
|
||
ArrowLeft: {
|
||
prevent: true,
|
||
handler: handleKeydownLeft
|
||
},
|
||
Enter: {
|
||
prevent: true,
|
||
handler: handleKeydownEnter
|
||
},
|
||
Escape: handleKeydownEsc
|
||
}
|
||
}, keyboardEnabledRef);
|
||
const {
|
||
mergedClsPrefixRef,
|
||
inlineThemeDisabled
|
||
} = useConfig(props);
|
||
const themeRef = useTheme("Dropdown", "-dropdown", style, dropdownLight, props, mergedClsPrefixRef);
|
||
provide(dropdownInjectionKey, {
|
||
labelFieldRef: toRef(props, "labelField"),
|
||
childrenFieldRef: toRef(props, "childrenField"),
|
||
renderLabelRef: toRef(props, "renderLabel"),
|
||
renderIconRef: toRef(props, "renderIcon"),
|
||
hoverKeyRef,
|
||
keyboardKeyRef,
|
||
lastToggledSubmenuKeyRef,
|
||
pendingKeyPathRef,
|
||
activeKeyPathRef,
|
||
animatedRef: toRef(props, "animated"),
|
||
mergedShowRef,
|
||
nodePropsRef: toRef(props, "nodeProps"),
|
||
renderOptionRef: toRef(props, "renderOption"),
|
||
menuPropsRef: toRef(props, "menuProps"),
|
||
doSelect,
|
||
doUpdateShow
|
||
});
|
||
watch(mergedShowRef, (value) => {
|
||
if (!props.animated && !value) {
|
||
clearPendingState();
|
||
}
|
||
});
|
||
function doSelect(key, node) {
|
||
const {
|
||
onSelect
|
||
} = props;
|
||
if (onSelect) call(onSelect, key, node);
|
||
}
|
||
function doUpdateShow(value) {
|
||
const {
|
||
"onUpdate:show": _onUpdateShow,
|
||
onUpdateShow
|
||
} = props;
|
||
if (_onUpdateShow) call(_onUpdateShow, value);
|
||
if (onUpdateShow) call(onUpdateShow, value);
|
||
uncontrolledShowRef.value = value;
|
||
}
|
||
function clearPendingState() {
|
||
hoverKeyRef.value = null;
|
||
keyboardKeyRef.value = null;
|
||
lastToggledSubmenuKeyRef.value = null;
|
||
}
|
||
function handleKeydownEsc() {
|
||
doUpdateShow(false);
|
||
}
|
||
function handleKeydownLeft() {
|
||
handleKeydown("left");
|
||
}
|
||
function handleKeydownRight() {
|
||
handleKeydown("right");
|
||
}
|
||
function handleKeydownUp() {
|
||
handleKeydown("up");
|
||
}
|
||
function handleKeydownDown() {
|
||
handleKeydown("down");
|
||
}
|
||
function handleKeydownEnter() {
|
||
const pendingNode = getPendingNode();
|
||
if ((pendingNode === null || pendingNode === void 0 ? void 0 : pendingNode.isLeaf) && mergedShowRef.value) {
|
||
doSelect(pendingNode.key, pendingNode.rawNode);
|
||
doUpdateShow(false);
|
||
}
|
||
}
|
||
function getPendingNode() {
|
||
var _a;
|
||
const {
|
||
value: treeMate
|
||
} = treemateRef;
|
||
const {
|
||
value: pendingKey
|
||
} = pendingKeyRef;
|
||
if (!treeMate || pendingKey === null) return null;
|
||
return (_a = treeMate.getNode(pendingKey)) !== null && _a !== void 0 ? _a : null;
|
||
}
|
||
function handleKeydown(direction) {
|
||
const {
|
||
value: pendingKey
|
||
} = pendingKeyRef;
|
||
const {
|
||
value: {
|
||
getFirstAvailableNode: getFirstAvailableNode2
|
||
}
|
||
} = treemateRef;
|
||
let nextKeyboardKey = null;
|
||
if (pendingKey === null) {
|
||
const firstNode = getFirstAvailableNode2();
|
||
if (firstNode !== null) {
|
||
nextKeyboardKey = firstNode.key;
|
||
}
|
||
} else {
|
||
const currentNode = getPendingNode();
|
||
if (currentNode) {
|
||
let nextNode;
|
||
switch (direction) {
|
||
case "down":
|
||
nextNode = currentNode.getNext();
|
||
break;
|
||
case "up":
|
||
nextNode = currentNode.getPrev();
|
||
break;
|
||
case "right":
|
||
nextNode = currentNode.getChild();
|
||
break;
|
||
case "left":
|
||
nextNode = currentNode.getParent();
|
||
break;
|
||
}
|
||
if (nextNode) nextKeyboardKey = nextNode.key;
|
||
}
|
||
}
|
||
if (nextKeyboardKey !== null) {
|
||
hoverKeyRef.value = null;
|
||
keyboardKeyRef.value = nextKeyboardKey;
|
||
}
|
||
}
|
||
const cssVarsRef = computed(() => {
|
||
const {
|
||
size,
|
||
inverted
|
||
} = props;
|
||
const {
|
||
common: {
|
||
cubicBezierEaseInOut
|
||
},
|
||
self
|
||
} = themeRef.value;
|
||
const {
|
||
padding,
|
||
dividerColor,
|
||
borderRadius,
|
||
optionOpacityDisabled,
|
||
[createKey("optionIconSuffixWidth", size)]: optionIconSuffixWidth,
|
||
[createKey("optionSuffixWidth", size)]: optionSuffixWidth,
|
||
[createKey("optionIconPrefixWidth", size)]: optionIconPrefixWidth,
|
||
[createKey("optionPrefixWidth", size)]: optionPrefixWidth,
|
||
[createKey("fontSize", size)]: fontSize,
|
||
[createKey("optionHeight", size)]: optionHeight,
|
||
[createKey("optionIconSize", size)]: optionIconSize
|
||
} = self;
|
||
const vars = {
|
||
"--n-bezier": cubicBezierEaseInOut,
|
||
"--n-font-size": fontSize,
|
||
"--n-padding": padding,
|
||
"--n-border-radius": borderRadius,
|
||
"--n-option-height": optionHeight,
|
||
"--n-option-prefix-width": optionPrefixWidth,
|
||
"--n-option-icon-prefix-width": optionIconPrefixWidth,
|
||
"--n-option-suffix-width": optionSuffixWidth,
|
||
"--n-option-icon-suffix-width": optionIconSuffixWidth,
|
||
"--n-option-icon-size": optionIconSize,
|
||
"--n-divider-color": dividerColor,
|
||
"--n-option-opacity-disabled": optionOpacityDisabled
|
||
};
|
||
if (inverted) {
|
||
vars["--n-color"] = self.colorInverted;
|
||
vars["--n-option-color-hover"] = self.optionColorHoverInverted;
|
||
vars["--n-option-color-active"] = self.optionColorActiveInverted;
|
||
vars["--n-option-text-color"] = self.optionTextColorInverted;
|
||
vars["--n-option-text-color-hover"] = self.optionTextColorHoverInverted;
|
||
vars["--n-option-text-color-active"] = self.optionTextColorActiveInverted;
|
||
vars["--n-option-text-color-child-active"] = self.optionTextColorChildActiveInverted;
|
||
vars["--n-prefix-color"] = self.prefixColorInverted;
|
||
vars["--n-suffix-color"] = self.suffixColorInverted;
|
||
vars["--n-group-header-text-color"] = self.groupHeaderTextColorInverted;
|
||
} else {
|
||
vars["--n-color"] = self.color;
|
||
vars["--n-option-color-hover"] = self.optionColorHover;
|
||
vars["--n-option-color-active"] = self.optionColorActive;
|
||
vars["--n-option-text-color"] = self.optionTextColor;
|
||
vars["--n-option-text-color-hover"] = self.optionTextColorHover;
|
||
vars["--n-option-text-color-active"] = self.optionTextColorActive;
|
||
vars["--n-option-text-color-child-active"] = self.optionTextColorChildActive;
|
||
vars["--n-prefix-color"] = self.prefixColor;
|
||
vars["--n-suffix-color"] = self.suffixColor;
|
||
vars["--n-group-header-text-color"] = self.groupHeaderTextColor;
|
||
}
|
||
return vars;
|
||
});
|
||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("dropdown", computed(() => `${props.size[0]}${props.inverted ? "i" : ""}`), cssVarsRef, props) : void 0;
|
||
return {
|
||
mergedClsPrefix: mergedClsPrefixRef,
|
||
mergedTheme: themeRef,
|
||
// data
|
||
tmNodes: tmNodesRef,
|
||
// show
|
||
mergedShow: mergedShowRef,
|
||
// methods
|
||
handleAfterLeave: () => {
|
||
if (!props.animated) return;
|
||
clearPendingState();
|
||
},
|
||
doUpdateShow,
|
||
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
||
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
||
};
|
||
},
|
||
render() {
|
||
const renderPopoverBody = (className, ref2, style2, onMouseenter, onMouseleave) => {
|
||
var _a;
|
||
const {
|
||
mergedClsPrefix,
|
||
menuProps
|
||
} = this;
|
||
(_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
|
||
const menuNodeProps = (menuProps === null || menuProps === void 0 ? void 0 : menuProps(void 0, this.tmNodes.map((v) => v.rawNode))) || {};
|
||
const dropdownProps2 = {
|
||
ref: createRefSetter(ref2),
|
||
class: [className, `${mergedClsPrefix}-dropdown`, this.themeClass],
|
||
clsPrefix: mergedClsPrefix,
|
||
tmNodes: this.tmNodes,
|
||
style: [...style2, this.cssVars],
|
||
showArrow: this.showArrow,
|
||
arrowStyle: this.arrowStyle,
|
||
scrollable: this.scrollable,
|
||
onMouseenter,
|
||
onMouseleave
|
||
};
|
||
return h(NDropdownMenu, mergeProps(this.$attrs, dropdownProps2, menuNodeProps));
|
||
};
|
||
const {
|
||
mergedTheme
|
||
} = this;
|
||
const popoverProps = {
|
||
show: this.mergedShow,
|
||
theme: mergedTheme.peers.Popover,
|
||
themeOverrides: mergedTheme.peerOverrides.Popover,
|
||
internalOnAfterLeave: this.handleAfterLeave,
|
||
internalRenderBody: renderPopoverBody,
|
||
onUpdateShow: this.doUpdateShow,
|
||
"onUpdate:show": void 0
|
||
};
|
||
return h(__unplugin_components_5, Object.assign({}, keep(this.$props, popoverPropKeys), popoverProps), {
|
||
trigger: () => {
|
||
var _a, _b;
|
||
return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
const alipay = "" + new URL("alipay-CcfmUela.png", import.meta.url).href;
|
||
const wechat = "" + new URL("wechat-DjfpYhZS.png", import.meta.url).href;
|
||
const _hoisted_1$1 = { class: "relative inline-block" };
|
||
const _hoisted_2$1 = { class: "p-6 rounded-lg shadow-lg bg-light dark:bg-gray-800" };
|
||
const _hoisted_3$1 = { class: "flex gap-10" };
|
||
const _hoisted_4$1 = { class: "flex flex-col items-center gap-2" };
|
||
const _hoisted_5$1 = { class: "flex flex-col items-center gap-2" };
|
||
const _sfc_main$1 = {
|
||
__name: "Coffee",
|
||
props: {
|
||
alipayQR: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
wechatQR: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
},
|
||
setup(__props) {
|
||
const message = useMessage();
|
||
const copyQQ = () => {
|
||
navigator.clipboard.writeText("789288579");
|
||
message.success("已复制到剪贴板");
|
||
};
|
||
return (_ctx, _cache) => {
|
||
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
||
createVNode(unref(__unplugin_components_5), {
|
||
trigger: "hover",
|
||
placement: "top",
|
||
"show-arrow": true,
|
||
raw: true,
|
||
delay: 100
|
||
}, {
|
||
trigger: withCtx(() => [
|
||
renderSlot(_ctx.$slots, "default", {}, () => [
|
||
createVNode(unref(Button), {
|
||
quaternary: "",
|
||
class: "inline-flex items-center gap-2 px-4 py-2 transition-all duration-300 hover:-translate-y-0.5"
|
||
}, {
|
||
default: withCtx(() => _cache[0] || (_cache[0] = [
|
||
createTextVNode(" 请我喝咖啡 ")
|
||
])),
|
||
_: 1
|
||
})
|
||
])
|
||
]),
|
||
default: withCtx(() => [
|
||
createBaseVNode("div", _hoisted_2$1, [
|
||
createBaseVNode("div", _hoisted_3$1, [
|
||
createBaseVNode("div", _hoisted_4$1, [
|
||
createVNode(unref(NImage), {
|
||
src: __props.alipayQR,
|
||
alt: "支付宝收款码",
|
||
class: "w-32 h-32 rounded-lg cursor-none",
|
||
"preview-disabled": ""
|
||
}, null, 8, ["src"]),
|
||
_cache[1] || (_cache[1] = createBaseVNode("span", { class: "text-sm text-gray-700 dark:text-gray-200" }, "支付宝", -1))
|
||
]),
|
||
createBaseVNode("div", _hoisted_5$1, [
|
||
createVNode(unref(NImage), {
|
||
src: __props.wechatQR,
|
||
alt: "微信收款码",
|
||
class: "w-32 h-32 rounded-lg cursor-none",
|
||
"preview-disabled": ""
|
||
}, null, 8, ["src"]),
|
||
_cache[2] || (_cache[2] = createBaseVNode("span", { class: "text-sm text-gray-700 dark:text-gray-200" }, "微信支付", -1))
|
||
])
|
||
]),
|
||
createBaseVNode("div", { class: "mt-4" }, [
|
||
createBaseVNode("p", {
|
||
class: "text-sm text-gray-700 dark:text-gray-200 text-center cursor-pointer hover:text-green-500",
|
||
onClick: copyQQ
|
||
}, " QQ群：789288579 ")
|
||
])
|
||
])
|
||
]),
|
||
_: 3
|
||
})
|
||
]);
|
||
};
|
||
}
|
||
};
|
||
const USER_SET_OPTIONS = [
|
||
// {
|
||
// label: '打卡',
|
||
// key: 'card',
|
||
// },
|
||
// {
|
||
// label: '听歌升级',
|
||
// key: 'card_music',
|
||
// },
|
||
// {
|
||
// label: '歌曲次数',
|
||
// key: 'listen',
|
||
// },
|
||
{
|
||
label: "退出登录",
|
||
key: "logout"
|
||
},
|
||
{
|
||
label: "设置",
|
||
key: "set"
|
||
}
|
||
];
|
||
const SEARCH_TYPES = [
|
||
{
|
||
label: "单曲",
|
||
key: 1
|
||
},
|
||
{
|
||
label: "专辑",
|
||
key: 10
|
||
},
|
||
// {
|
||
// label: '歌手',
|
||
// key: 100,
|
||
// },
|
||
{
|
||
label: "歌单",
|
||
key: 1e3
|
||
},
|
||
// {
|
||
// label: '用户',
|
||
// key: 1002,
|
||
// },
|
||
{
|
||
label: "MV",
|
||
key: 1004
|
||
}
|
||
// {
|
||
// label: '歌词',
|
||
// key: 1006,
|
||
// },
|
||
// {
|
||
// label: '电台',
|
||
// key: 1009,
|
||
// },
|
||
// {
|
||
// label: '视频',
|
||
// key: 1014,
|
||
// },
|
||
// {
|
||
// label: '综合',
|
||
// key: 1018,
|
||
// },
|
||
];
|
||
const _hoisted_1 = { class: "search-box flex" };
|
||
const _hoisted_2 = { class: "search-box-input flex-1" };
|
||
const _hoisted_3 = { class: "w-20 px-3 flex justify-between items-center" };
|
||
const _hoisted_4 = { class: "user-box" };
|
||
const _hoisted_5 = { class: "user-popover" };
|
||
const _hoisted_6 = { class: "username" };
|
||
const _hoisted_7 = { class: "menu-items" };
|
||
const _hoisted_8 = { class: "menu-item" };
|
||
const _hoisted_9 = { class: "version-info" };
|
||
const _hoisted_10 = { class: "version-number" };
|
||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||
__name: "SearchBar",
|
||
setup(__props) {
|
||
const router = useRouter();
|
||
const store = useStore();
|
||
const userSetOptions = ref(USER_SET_OPTIONS);
|
||
const hotSearchKeyword = ref("搜索点什么吧...");
|
||
const hotSearchValue = ref("");
|
||
const loadHotSearchKeyword = async () => {
|
||
const { data } = await getSearchKeyword();
|
||
hotSearchKeyword.value = data.data.showKeyword;
|
||
hotSearchValue.value = data.data.realkeyword;
|
||
};
|
||
const loadPage = async () => {
|
||
const token = localStorage.getItem("token");
|
||
if (!token) return;
|
||
const { data } = await getUserDetail();
|
||
store.state.user = data.profile;
|
||
localStorage.setItem("user", JSON.stringify(data.profile));
|
||
};
|
||
loadPage();
|
||
watchEffect(() => {
|
||
if (store.state.user) {
|
||
userSetOptions.value = USER_SET_OPTIONS;
|
||
} else {
|
||
userSetOptions.value = USER_SET_OPTIONS.filter((item) => item.key !== "logout");
|
||
}
|
||
});
|
||
const restartApp = () => {
|
||
window.electron.ipcRenderer.send("restart");
|
||
};
|
||
const toLogin = () => {
|
||
router.push("/login");
|
||
};
|
||
onMounted(() => {
|
||
loadHotSearchKeyword();
|
||
loadPage();
|
||
checkForUpdates();
|
||
});
|
||
const isDarkTheme = computed({
|
||
get: () => store.state.theme === "dark",
|
||
set: () => store.commit("toggleTheme")
|
||
});
|
||
const searchValue = ref("");
|
||
const search = () => {
|
||
const { value } = searchValue;
|
||
if (value === "") {
|
||
searchValue.value = hotSearchValue.value;
|
||
return;
|
||
}
|
||
if (router.currentRoute.value.path === "/search") {
|
||
store.state.searchValue = value;
|
||
return;
|
||
}
|
||
router.push({
|
||
path: "/search",
|
||
query: {
|
||
keyword: value
|
||
}
|
||
});
|
||
};
|
||
const selectSearchType = (key) => {
|
||
store.state.searchType = key;
|
||
};
|
||
const searchTypeOptions = ref(SEARCH_TYPES);
|
||
const selectItem = async (key) => {
|
||
switch (key) {
|
||
case "logout":
|
||
logout().then(() => {
|
||
store.state.user = null;
|
||
localStorage.clear();
|
||
router.push("/login");
|
||
});
|
||
break;
|
||
case "login":
|
||
router.push("/login");
|
||
break;
|
||
case "set":
|
||
router.push("/set");
|
||
break;
|
||
case "user":
|
||
router.push("/user");
|
||
break;
|
||
}
|
||
};
|
||
const toGithub = () => {
|
||
window.open("https://github.com/algerkong/AlgerMusicPlayer", "_blank");
|
||
};
|
||
const updateInfo = ref({
|
||
hasUpdate: false,
|
||
latestVersion: "",
|
||
currentVersion: config.version,
|
||
releaseInfo: null
|
||
});
|
||
const checkForUpdates = async () => {
|
||
try {
|
||
const result = await checkUpdate();
|
||
updateInfo.value = result;
|
||
} catch (error) {
|
||
console.error("检查更新失败:", error);
|
||
}
|
||
};
|
||
const toGithubRelease = () => {
|
||
if (updateInfo.value.hasUpdate) {
|
||
window.open("https://github.com/algerkong/AlgerMusicPlayer/releases/latest", "_blank");
|
||
} else {
|
||
window.open("https://github.com/algerkong/AlgerMusicPlayer/releases", "_blank");
|
||
}
|
||
};
|
||
return (_ctx, _cache) => {
|
||
const _component_n_dropdown = __unplugin_components_0;
|
||
const _component_n_input = __unplugin_components_1;
|
||
const _component_n_avatar = __unplugin_components_2;
|
||
const _component_n_switch = __unplugin_components_3;
|
||
const _component_n_tag = __unplugin_components_4;
|
||
const _component_n_popover = __unplugin_components_5;
|
||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||
createBaseVNode("div", _hoisted_2, [
|
||
createVNode(_component_n_input, {
|
||
value: searchValue.value,
|
||
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
|
||
size: "medium",
|
||
round: "",
|
||
placeholder: hotSearchKeyword.value,
|
||
class: "border dark:border-gray-600 border-gray-200",
|
||
onKeydown: withKeys(search, ["enter"])
|
||
}, {
|
||
prefix: withCtx(() => _cache[5] || (_cache[5] = [
|
||
createBaseVNode("i", { class: "iconfont icon-search" }, null, -1)
|
||
])),
|
||
suffix: withCtx(() => [
|
||
createVNode(_component_n_dropdown, {
|
||
trigger: "hover",
|
||
options: searchTypeOptions.value,
|
||
onSelect: selectSearchType
|
||
}, {
|
||
default: withCtx(() => [
|
||
createBaseVNode("div", _hoisted_3, [
|
||
createBaseVNode("div", null, toDisplayString(searchTypeOptions.value.find((item) => item.key === unref(store).state.searchType)?.label), 1),
|
||
_cache[6] || (_cache[6] = createBaseVNode("i", { class: "iconfont icon-xiasanjiaoxing" }, null, -1))
|
||
])
|
||
]),
|
||
_: 1
|
||
}, 8, ["options"])
|
||
]),
|
||
_: 1
|
||
}, 8, ["value", "placeholder"])
|
||
]),
|
||
createVNode(_component_n_popover, {
|
||
trigger: "hover",
|
||
placement: "bottom",
|
||
"show-arrow": false,
|
||
raw: ""
|
||
}, {
|
||
trigger: withCtx(() => [
|
||
createBaseVNode("div", _hoisted_4, [
|
||
unref(store).state.user ? (openBlock(), createBlock(_component_n_avatar, {
|
||
key: 0,
|
||
class: "cursor-pointer",
|
||
circle: "",
|
||
size: "medium",
|
||
src: unref(getImgUrl)(unref(store).state.user.avatarUrl),
|
||
onClick: _cache[1] || (_cache[1] = ($event) => selectItem("user"))
|
||
}, null, 8, ["src"])) : (openBlock(), createElementBlock("div", {
|
||
key: 1,
|
||
class: "mx-2 rounded-full cursor-pointer text-sm",
|
||
onClick: toLogin
|
||
}, "登录"))
|
||
])
|
||
]),
|
||
default: withCtx(() => [
|
||
createBaseVNode("div", _hoisted_5, [
|
||
unref(store).state.user ? (openBlock(), createElementBlock("div", {
|
||
key: 0,
|
||
class: "user-header",
|
||
onClick: _cache[2] || (_cache[2] = ($event) => selectItem("user"))
|
||
}, [
|
||
createVNode(_component_n_avatar, {
|
||
circle: "",
|
||
size: "small",
|
||
src: unref(getImgUrl)(unref(store).state.user?.avatarUrl)
|
||
}, null, 8, ["src"]),
|
||
createBaseVNode("span", _hoisted_6, toDisplayString(unref(store).state.user?.nickname || "Theodore"), 1)
|
||
])) : createCommentVNode("", true),
|
||
createBaseVNode("div", _hoisted_7, [
|
||
!unref(store).state.user ? (openBlock(), createElementBlock("div", {
|
||
key: 0,
|
||
class: "menu-item",
|
||
onClick: toLogin
|
||
}, _cache[7] || (_cache[7] = [
|
||
createBaseVNode("i", { class: "iconfont ri-login-box-line" }, null, -1),
|
||
createBaseVNode("span", null, "去登录", -1)
|
||
]))) : createCommentVNode("", true),
|
||
createBaseVNode("div", {
|
||
class: "menu-item",
|
||
onClick: _cache[3] || (_cache[3] = ($event) => selectItem("set"))
|
||
}, _cache[8] || (_cache[8] = [
|
||
createBaseVNode("i", { class: "iconfont ri-settings-3-line" }, null, -1),
|
||
createBaseVNode("span", null, "设置", -1)
|
||
])),
|
||
createBaseVNode("div", _hoisted_8, [
|
||
createBaseVNode("i", {
|
||
class: normalizeClass(["iconfont", isDarkTheme.value ? "ri-moon-line" : "ri-sun-line"])
|
||
}, null, 2),
|
||
_cache[11] || (_cache[11] = createBaseVNode("span", null, "主题", -1)),
|
||
createVNode(_component_n_switch, {
|
||
value: isDarkTheme.value,
|
||
"onUpdate:value": _cache[4] || (_cache[4] = ($event) => isDarkTheme.value = $event),
|
||
class: "ml-auto"
|
||
}, {
|
||
checked: withCtx(() => _cache[9] || (_cache[9] = [
|
||
createBaseVNode("i", { class: "ri-moon-line" }, null, -1)
|
||
])),
|
||
unchecked: withCtx(() => _cache[10] || (_cache[10] = [
|
||
createBaseVNode("i", { class: "ri-sun-line" }, null, -1)
|
||
])),
|
||
_: 1
|
||
}, 8, ["value"])
|
||
]),
|
||
createBaseVNode("div", {
|
||
class: "menu-item",
|
||
onClick: restartApp
|
||
}, _cache[12] || (_cache[12] = [
|
||
createBaseVNode("i", { class: "iconfont ri-restart-line" }, null, -1),
|
||
createBaseVNode("span", null, "重启", -1)
|
||
])),
|
||
createBaseVNode("div", {
|
||
class: "menu-item",
|
||
onClick: toGithubRelease
|
||
}, [
|
||
_cache[13] || (_cache[13] = createBaseVNode("i", { class: "iconfont ri-refresh-line" }, null, -1)),
|
||
_cache[14] || (_cache[14] = createBaseVNode("span", null, "当前版本", -1)),
|
||
createBaseVNode("div", _hoisted_9, [
|
||
createBaseVNode("span", _hoisted_10, toDisplayString(updateInfo.value.currentVersion), 1),
|
||
updateInfo.value.hasUpdate ? (openBlock(), createBlock(_component_n_tag, {
|
||
key: 0,
|
||
type: "success",
|
||
size: "small",
|
||
class: "ml-1"
|
||
}, {
|
||
default: withCtx(() => [
|
||
createTextVNode(" New " + toDisplayString(updateInfo.value.latestVersion), 1)
|
||
]),
|
||
_: 1
|
||
})) : createCommentVNode("", true)
|
||
])
|
||
])
|
||
])
|
||
])
|
||
]),
|
||
_: 1
|
||
}),
|
||
createVNode(_sfc_main$1, {
|
||
"alipay-q-r": unref(alipay),
|
||
"wechat-q-r": unref(wechat)
|
||
}, {
|
||
default: withCtx(() => [
|
||
createBaseVNode("div", {
|
||
class: "github",
|
||
onClick: toGithub
|
||
}, _cache[15] || (_cache[15] = [
|
||
createBaseVNode("i", { class: "ri-github-fill" }, null, -1)
|
||
]))
|
||
]),
|
||
_: 1
|
||
}, 8, ["alipay-q-r", "wechat-q-r"])
|
||
]);
|
||
};
|
||
}
|
||
});
|
||
const SearchBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-064c45e9"]]);
|
||
export {
|
||
SearchBar as default
|
||
};
|