vue-devui
Version:
DevUI components based on Vite and Vue3
1,684 lines • 402 kB
JavaScript
import { createVNode, createTextVNode, toRefs, watch, onMounted, onUnmounted, ref, computed, defineComponent, Transition, mergeProps, nextTick, unref, withModifiers, Comment, Text, Fragment, h, inject, withDirectives, cloneVNode, provide, Teleport, vShow, resolveComponent, reactive, onBeforeUnmount, toRef, resolveDynamicComponent, render, isVNode } from "vue";
import { offset, flip, arrow, computePosition } from "@floating-ui/dom";
import { onClickOutside } from "@vueuse/core";
import "clipboard";
function SearchIcon() {
return createVNode("svg", {
"width": "16px",
"height": "16px",
"viewBox": "0 0 16 16",
"class": "svg-icon-search"
}, [createVNode("g", {
"stroke": "none",
"stroke-width": "1",
"fill": "none",
"fill-rule": "evenodd"
}, [createVNode("path", {
"d": `M7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.57190212 13.4818819,10.0227913 12.6071076,11.1912056 L15.7071068,14.2928932
C16.0976311,14.6834175 16.0976311,15.3165825 15.7071068,15.7071068 C15.3466228,16.0675907 14.7793918,16.0953203 14.3871006,15.7902954
L14.2928932,15.7071068 L11.1912056,12.6071076 C10.0227913,13.4818819 8.57190212,14 7,14 C3.13400675,14 5.5067062e-14,10.8659932
5.5067062e-14,7 C5.5067062e-14,3.13400675 3.13400675,0 7,0 Z M7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12
7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 Z`,
"fill": "#71757F"
}, null)])]);
}
function ClearIcon() {
return createVNode("svg", {
"width": "16px",
"height": "16px",
"viewBox": "0 0 16 16"
}, [createVNode("title", null, [createTextVNode("\u6E05\u7A7A")]), createVNode("g", {
"stroke": "none",
"stroke-width": "1",
"fill": "none",
"fill-rule": "evenodd"
}, [createVNode("path", {
"d": `M4.61289944,3.20970461 L4.70710678,3.29289322 L8,6.585 L11.2928932,3.29289322 C11.6834175,2.90236893 12.3165825,2.90236893
12.7071068,3.29289322 C13.0675907,3.65337718 13.0953203,4.22060824 12.7902954,4.61289944 L12.7071068,4.70710678 L9.415,8
L12.7071068,11.2928932 C13.0976311,11.6834175 13.0976311,12.3165825 12.7071068,12.7071068 C12.3466228,13.0675907 11.7793918,13.0953203
11.3871006,12.7902954 L11.2928932,12.7071068 L8,9.415 L4.70710678,12.7071068 C4.31658249,13.0976311 3.68341751,13.0976311
3.29289322,12.7071068 C2.93240926,12.3466228 2.90467972,11.7793918 3.20970461,11.3871006 L3.29289322,11.2928932 L6.585,8
L3.29289322,4.70710678 C2.90236893,4.31658249 2.90236893,3.68341751 3.29289322,3.29289322 C3.65337718,2.93240926 4.22060824,2.90467972
4.61289944,3.20970461 Z`,
"fill-rule": "nonzero"
}, null)])]);
}
function SaveIcon(props) {
return createVNode("svg", {
"width": "16px",
"height": "16px",
"viewBox": "0 0 16 16",
"version": "1.1"
}, [createVNode("title", null, [props.textConfig.createFilter]), createVNode("g", {
"stroke": "none",
"stroke-width": "1",
"fill": "none",
"fill-rule": "evenodd"
}, [createVNode("path", {
"d": `M12,1 L15,4 L15,13 C15,14.1045695 14.1045695,15 13,15 L3,15 C1.8954305,15 1,14.1045695 1,13 L1,3 C1,1.8954305
1.8954305,1 3,1 L12,1 Z M11.171,3 L3,3 L3,13 L4,13 L4,10 C4,9.48716416 4.38604019,9.06449284 4.88337887,9.00672773
L5,9 L11,9 C11.5128358,9 11.9355072,9.38604019 11.9932723,9.88337887 L12,10 L12,13 L13,13 L13,4.829 L11.171,3 Z
M9.999,10.999 L5.999,10.999 L6,13 L10,13 L9.999,10.999 Z M7,5 C7.55228475,5 8,5.44771525 8,6 C8,6.55228475 7.55228475,7
7,7 L5,7 C4.44771525,7 4,6.55228475 4,6 C4,5.44771525 4.44771525,5 5,5 L7,5 Z`,
"fill-rule": "nonzero"
}, null)])]);
}
function MoreIcon() {
return createVNode("svg", {
"width": "16px",
"height": "16px",
"viewBox": "0 0 16 16"
}, [createVNode("title", null, [createTextVNode("\u67E5\u770B\u5168\u90E8\u8FC7\u6EE4\u6761\u4EF6")]), createVNode("g", {
"stroke": "none",
"stroke-width": "1",
"fill": "none",
"fill-rule": "evenodd"
}, [createVNode("path", {
"d": `M1,2 L3,2 L3,4 L1,4 L1,2 Z M1,7 L3,7 L3,9 L1,9 L1,7 Z M1,12 L3,12 L3,14 L1,14 L1,12 Z M5,2 L15,2 L15,4 L5,4 L5,2 Z M5,7
L15,7 L15,9 L5,9 L5,7 Z M5,12 L15,12 L15,14 L5,14 L5,12 Z`,
"fill-rule": "nonzero"
}, null)])]);
}
const dropdownProps = {
visible: {
type: Boolean,
default: false
},
trigger: {
type: String,
default: "click"
},
closeScope: {
type: String,
default: "all"
},
position: {
type: Array,
default: () => ["bottom", "top", "left", "right"]
},
offset: {
type: [Number, Object],
default: 4
},
shiftOffset: {
type: Number
},
closeOnMouseLeaveMenu: {
type: Boolean,
default: false
},
showAnimation: {
type: Boolean,
default: true
},
overlayClass: {
type: String,
default: ""
},
destroyOnHide: {
type: Boolean,
default: true
},
teleport: {
type: [String, Object],
default: "body"
}
};
const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
function judgeFireIsElement(element) {
const str = Object.prototype.toString.call(element);
return str.includes("object") && str.includes("HTML") && str.includes("Element");
}
function getElement(element) {
if (element instanceof Element || judgeFireIsElement(element)) {
return element;
}
if (element && typeof element === "object" && (element.$el instanceof Element || judgeFireIsElement(element.$el))) {
return element.$el;
}
return null;
}
const dropdownMap = /* @__PURE__ */ new Map();
function subscribeEvent(dom, type4, callback) {
dom == null ? void 0 : dom.addEventListener(type4, callback);
return () => {
dom == null ? void 0 : dom.removeEventListener(type4, callback);
};
}
const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
let overlayEnter = false;
let originEnter = false;
const { trigger, closeScope, closeOnMouseLeaveMenu } = toRefs(props);
const toggle = (status) => {
isOpen.value = status;
emit("toggle", isOpen.value);
};
const handleLeave = async (elementType, closeAll) => {
await new Promise((resolve) => setTimeout(resolve, 50));
if (elementType === "origin" && overlayEnter || elementType === "dropdown" && originEnter) {
return;
}
if (closeAll) {
[...dropdownMap.values()].reverse().forEach((item) => {
setTimeout(() => {
var _a;
(_a = item.toggle) == null ? void 0 : _a.call(item);
}, 0);
});
}
toggle(false);
};
watch([trigger, origin, dropdownRef], ([triggerVal, originVal, dropdownEl], ov, onInvalidate) => {
const originEl = getElement(originVal);
const subscriptions = [];
setTimeout(() => {
subscriptions.push(
subscribeEvent(document, "click", (e) => {
e.stopPropagation();
const dropdownValues = [...dropdownMap.values()];
if (!isOpen.value || closeScope.value === "none" || (dropdownEl == null ? void 0 : dropdownEl.contains(e.target)) && closeScope.value === "blank" || dropdownValues.some((item) => {
var _a;
return (_a = item.toggleEl) == null ? void 0 : _a.contains(e.target);
}) && dropdownValues.some((item) => {
var _a;
return (_a = item.menuEl) == null ? void 0 : _a.contains(e.target);
})) {
return;
}
[...dropdownMap.values()].reverse().forEach((item) => {
setTimeout(() => {
var _a, _b;
if (!((_a = item.toggleEl) == null ? void 0 : _a.contains(e.target))) {
(_b = item.toggle) == null ? void 0 : _b.call(item);
}
}, 0);
});
overlayEnter = false;
})
);
}, 0);
if (triggerVal === "click") {
subscriptions.push(
subscribeEvent(originEl, "click", () => toggle(!isOpen.value)),
subscribeEvent(dropdownEl, "mouseleave", (e) => {
var _a;
if (closeOnMouseLeaveMenu.value && !((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget))) {
handleLeave("dropdown", true);
}
})
);
} else if (triggerVal === "hover") {
subscriptions.push(
subscribeEvent(originEl, "mouseenter", () => {
originEnter = true;
toggle(true);
}),
subscribeEvent(originEl, "mouseleave", () => {
originEnter = false;
handleLeave("origin");
}),
subscribeEvent(dropdownEl, "mouseenter", () => {
overlayEnter = true;
isOpen.value = true;
}),
subscribeEvent(dropdownEl, "mouseleave", (e) => {
var _a;
overlayEnter = false;
if (e.relatedTarget && ((originEl == null ? void 0 : originEl.contains(e.relatedTarget)) || ((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget)))) {
return;
}
handleLeave("dropdown", true);
})
);
}
onInvalidate(() => subscriptions.forEach((v) => v()));
});
};
function useDropdown(id, visible, isOpen, origin, dropdownRef, emit) {
watch(
visible,
(newVal, oldVal) => {
if (oldVal === void 0) {
return;
}
isOpen.value = newVal;
emit("toggle", isOpen.value);
},
{ immediate: true }
);
watch([isOpen, dropdownRef], ([isOpenVal, dropdownEl]) => {
var _a;
if (isOpenVal) {
dropdownMap.set(id, {
...dropdownMap.get(id),
menuEl: dropdownEl,
toggle: () => {
isOpen.value = false;
emit("toggle", isOpen.value);
}
});
for (const value of dropdownMap.values()) {
if ((_a = value.menuEl) == null ? void 0 : _a.contains(origin.value)) {
value.child = dropdownEl;
}
}
}
});
onMounted(() => {
dropdownMap.set(id, { toggleEl: origin.value });
});
onUnmounted(() => {
dropdownMap.delete(id);
});
}
function useOverlayProps(props, currentPosition, isOpen) {
const { showAnimation, overlayClass, destroyOnHide } = toRefs(props);
const overlayModelValue = ref(false);
const overlayShowValue = ref(false);
const styles = computed(() => ({
transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
zIndex: "var(--devui-z-index-dropdown, 1052)"
}));
const classes = computed(() => ({
"fade-in-bottom": showAnimation.value && isOpen.value && currentPosition.value === "bottom",
"fade-in-top": showAnimation.value && isOpen.value && currentPosition.value === "top",
[`${overlayClass.value}`]: true
}));
const handlePositionChange = (pos) => {
currentPosition.value = pos.includes("top") || pos.includes("right-end") || pos.includes("left-end") ? "top" : "bottom";
};
watch(isOpen, (isOpenVal) => {
overlayModelValue.value = destroyOnHide.value ? isOpenVal : true;
overlayShowValue.value = isOpenVal;
});
return { overlayModelValue, overlayShowValue, styles, classes, handlePositionChange };
}
const fixedOverlayProps = {
modelValue: {
type: Boolean,
default: false
},
lockScroll: {
type: Boolean,
default: true
},
closeOnClickOverlay: {
type: Boolean,
default: true
}
};
function lockScroll() {
if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
const scrollTop = document.documentElement.scrollTop;
const style = document.documentElement.getAttribute("style");
document.documentElement.style.position = "fixed";
document.documentElement.style.top = `-${scrollTop}px`;
document.documentElement.style.width = document.documentElement.style.width || "100%";
document.documentElement.style.overflowY = "scroll";
return () => {
if (style) {
document.documentElement.setAttribute("style", style);
} else {
document.documentElement.removeAttribute("style");
}
document.documentElement.scrollTop = scrollTop;
};
}
return;
}
function useFixedOverlay(props, ctx) {
let lockScrollCb;
const onClick = (event) => {
event.preventDefault();
ctx.emit("click", event);
if (props.closeOnClickOverlay) {
ctx.emit("update:modelValue", false);
}
};
const removeBodyAdditions = () => {
lockScrollCb == null ? void 0 : lockScrollCb();
};
watch(
() => props.modelValue,
(val) => {
if (val) {
props.lockScroll && (lockScrollCb = lockScroll());
} else {
removeBodyAdditions();
}
}
);
onUnmounted(removeBodyAdditions);
return { onClick };
}
function createBem$1(namespace, element, modifier) {
let cls = namespace;
if (element) {
cls += `__${element}`;
}
if (modifier) {
cls += `--${modifier}`;
}
return cls;
}
function useNamespace$1(block, needDot = false) {
const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
const b = () => createBem$1(namespace);
const e = (element) => element ? createBem$1(namespace, element) : "";
const m = (modifier) => modifier ? createBem$1(namespace, "", modifier) : "";
const em = (element, modifier) => element && modifier ? createBem$1(namespace, element, modifier) : "";
return {
b,
e,
m,
em
};
}
var fixedOverlay = "";
defineComponent({
name: "DFixedOverlay",
inheritAttrs: false,
props: fixedOverlayProps,
emits: ["update:modelValue", "click"],
setup(props, ctx) {
const {
modelValue
} = toRefs(props);
const ns2 = useNamespace$1("fixed-overlay");
const {
onClick
} = useFixedOverlay(props, ctx);
return () => createVNode(Transition, {
"name": ns2.m("fade")
}, {
default: () => {
var _a, _b;
return [modelValue.value && createVNode("div", mergeProps({
"class": ns2.b()
}, ctx.attrs, {
"onClick": onClick
}), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
}
});
}
});
const flexibleOverlayProps = {
modelValue: {
type: Boolean,
default: false
},
origin: {
type: Object,
require: true
},
position: {
type: Array,
default: ["bottom"]
},
offset: {
type: [Number, Object],
default: 8
},
shiftOffset: {
type: Number
},
align: {
type: String,
default: null
},
showArrow: {
type: Boolean,
default: false
},
isArrowCenter: {
type: Boolean,
default: true
},
clickEventBubble: {
type: Boolean,
default: false
},
fitOriginWidth: {
type: Boolean,
default: false
}
};
function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
let { x, y } = point;
if (!isArrowCenter) {
const { width, height } = originRect;
if (x && placement.includes("start")) {
x = 12;
}
if (x && placement.includes("end")) {
x = Math.round(width - 24);
}
if (y && placement.includes("start")) {
y = 10;
}
if (y && placement.includes("end")) {
y = height - 14;
}
}
return { x, y };
}
function useOverlay(props, emit) {
const { fitOriginWidth, position, showArrow } = toRefs(props);
const overlayRef = ref();
const arrowRef = ref();
const overlayWidth = ref(0);
let originObserver;
const styles = computed(() => {
if (fitOriginWidth.value) {
return { width: overlayWidth.value + "px" };
} else {
return {};
}
});
const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
const staticSide = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
}[placement.split("-")[0]];
Object.assign(arrowEl.style, {
left: x ? `${x}px` : "",
top: y ? `${y}px` : "",
right: "",
bottom: "",
[staticSide]: "-4px"
});
};
const updatePosition = async () => {
const hostEl = props.origin;
const overlayEl = unref(overlayRef.value);
const arrowEl = unref(arrowRef.value);
const [mainPosition, ...fallbackPosition] = position.value;
const middleware = [offset(props.offset)];
middleware.push(fallbackPosition.length ? flip({ fallbackPlacements: fallbackPosition }) : flip());
if (showArrow.value) {
middleware.push(arrow({ element: arrowRef.value }));
}
const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
strategy: "fixed",
placement: mainPosition,
middleware
});
let applyX = x;
let applyY = y;
emit("positionChange", placement);
Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
};
const scrollCallback = (e) => {
var _a, _b;
const scrollElement = e.target;
if (scrollElement == null ? void 0 : scrollElement.contains((_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin)) {
updatePosition();
}
};
const updateWidth = (originEl) => {
overlayWidth.value = originEl.getBoundingClientRect().width;
updatePosition();
};
const observeOrigin = () => {
var _a, _b;
if (fitOriginWidth.value && typeof window !== "undefined") {
const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
if (originEl) {
originObserver = new window.ResizeObserver(() => updateWidth(originEl));
originObserver.observe(originEl);
}
}
};
const unobserveOrigin = () => {
var _a, _b;
const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
originEl && (originObserver == null ? void 0 : originObserver.unobserve(originEl));
};
watch(
() => props.modelValue,
() => {
if (props.modelValue && props.origin) {
nextTick(updatePosition);
window.addEventListener("scroll", scrollCallback, true);
window.addEventListener("resize", updatePosition);
observeOrigin();
} else {
window.removeEventListener("scroll", scrollCallback, true);
window.removeEventListener("resize", updatePosition);
unobserveOrigin();
}
}
);
onUnmounted(() => {
window.removeEventListener("scroll", scrollCallback, true);
window.removeEventListener("resize", updatePosition);
unobserveOrigin();
});
return { arrowRef, overlayRef, styles, updatePosition };
}
var flexibleOverlay = "";
const FlexibleOverlay = defineComponent({
name: "DFlexibleOverlay",
inheritAttrs: false,
props: flexibleOverlayProps,
emits: ["update:modelValue", "positionChange"],
setup(props, {
slots,
attrs,
emit,
expose
}) {
const ns2 = useNamespace$1("flexible-overlay");
const {
clickEventBubble
} = toRefs(props);
const {
arrowRef,
overlayRef,
styles,
updatePosition
} = useOverlay(props, emit);
expose({
updatePosition
});
return () => {
var _a;
return props.modelValue && createVNode("div", mergeProps({
"ref": overlayRef,
"class": ns2.b(),
"style": styles.value
}, attrs, {
"onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
"onPointerup": withModifiers(() => ({}), ["stop"])
}), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
"ref": arrowRef,
"class": ns2.e("arrow")
}, null)]);
};
}
});
/**
* @vue/shared v3.4.27
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/
const isObject = (val) => val !== null && typeof val === "object";
const ns$3 = useNamespace$1("popper-trigger");
function wrapContent(content) {
return h("span", { class: ns$3.b() }, content);
}
function getFirstValidChild(nodes) {
for (const child of nodes) {
if (isObject(child)) {
if (child.type === Comment) {
continue;
}
if (child.type === "svg" || child.type === Text) {
return wrapContent(child);
}
if (child.type === Fragment) {
return getFirstValidChild(child.children);
}
return child;
}
return wrapContent(child);
}
return null;
}
var PopperTrigger = defineComponent({
name: "DPopperTrigger",
setup(_, ctx) {
const {
slots,
attrs
} = ctx;
return () => {
var _a;
const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots, attrs);
const triggerRef = inject(POPPER_TRIGGER_TOKEN);
if (!defaultSlot) {
return null;
}
const firstValidChild = getFirstValidChild(defaultSlot);
if (!firstValidChild) {
return null;
}
return withDirectives(cloneVNode(firstValidChild, attrs), [[{
mounted(el) {
triggerRef.value = el;
},
updated(el) {
triggerRef.value = el;
},
unmounted() {
triggerRef.value = null;
}
}]]);
};
}
});
var dropdown = "";
let dropdownId = 1;
var Dropdown = defineComponent({
name: "DDropdown",
inheritAttrs: false,
props: dropdownProps,
emits: ["toggle"],
setup(props, {
slots,
attrs,
emit,
expose
}) {
const {
visible,
position,
offset: offset2,
destroyOnHide,
shiftOffset,
showAnimation,
teleport
} = toRefs(props);
const origin = ref();
const dropdownRef = ref();
const overlayRef = ref();
const id = `dropdown_${dropdownId++}`;
const isOpen = ref(false);
const currentPosition = ref("bottom");
const ns2 = useNamespace$1("dropdown");
provide(POPPER_TRIGGER_TOKEN, origin);
useDropdownEvent({
id,
isOpen,
origin,
dropdownRef,
props,
emit
});
useDropdown(id, visible, isOpen, origin, dropdownRef, emit);
const {
overlayModelValue,
overlayShowValue,
styles,
classes,
handlePositionChange
} = useOverlayProps(props, currentPosition, isOpen);
watch(overlayShowValue, (overlayShowValueVal) => {
nextTick(() => {
if (!destroyOnHide.value && overlayShowValueVal) {
overlayRef.value.updatePosition();
}
});
});
expose({
updatePosition: () => overlayRef.value.updatePosition()
});
return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
default: () => {
var _a;
return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
}
}), createVNode(Teleport, {
"to": teleport.value
}, {
default: () => [createVNode(Transition, {
"name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
}, {
default: () => [withDirectives(createVNode(FlexibleOverlay, {
"modelValue": overlayModelValue.value,
"onUpdate:modelValue": ($event) => overlayModelValue.value = $event,
"ref": overlayRef,
"origin": origin.value,
"position": position.value,
"offset": offset2.value,
"shiftOffset": shiftOffset == null ? void 0 : shiftOffset.value,
"onPositionChange": handlePositionChange,
"click-event-bubble": true,
"class": classes.value,
"style": styles.value
}, {
default: () => {
var _a;
return [createVNode("div", mergeProps({
"ref": dropdownRef,
"class": ns2.e("menu-wrap")
}, attrs), [(_a = slots.menu) == null ? void 0 : _a.call(slots)])];
}
}), [[vShow, overlayShowValue.value]])]
})]
})]);
}
});
const dropdownMenuProps = {
modelValue: {
type: Boolean,
default: false
},
origin: {
type: Object,
require: true
},
position: {
type: Array,
default: ["bottom"]
},
align: {
type: String,
default: null
},
offset: {
type: [Number, Object],
default: 4
},
clickOutside: {
type: Function,
default: () => true
},
showAnimation: {
type: Boolean,
default: true
},
overlayClass: {
type: String,
default: ""
}
};
defineComponent({
name: "DDropdownMenu",
inheritAttrs: false,
props: dropdownMenuProps,
emits: ["update:modelValue"],
setup(props, {
slots,
attrs,
emit
}) {
const {
modelValue,
origin,
position,
align,
offset: offset2,
clickOutside,
showAnimation,
overlayClass
} = toRefs(props);
const dropdownMenuRef = ref(null);
const ns2 = useNamespace$1("dropdown");
onClickOutside(dropdownMenuRef, (value) => {
var _a, _b;
if (((_a = clickOutside.value) == null ? void 0 : _a.call(clickOutside)) && !((_b = origin == null ? void 0 : origin.value) == null ? void 0 : _b.contains(value.target))) {
emit("update:modelValue", false);
}
});
const currentPosition = ref("bottom");
const handlePositionChange = (pos) => {
currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
};
const styles = computed(() => ({
transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
}));
return () => createVNode(Teleport, {
"to": "body"
}, {
default: () => [createVNode(Transition, {
"name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
}, {
default: () => [createVNode(FlexibleOverlay, {
"modelValue": modelValue.value,
"onUpdate:modelValue": ($event) => modelValue.value = $event,
"origin": origin == null ? void 0 : origin.value,
"position": position.value,
"align": align.value,
"offset": offset2.value,
"onPositionChange": handlePositionChange,
"class": overlayClass.value,
"style": styles.value
}, {
default: () => {
var _a;
return [createVNode("div", mergeProps({
"ref": dropdownMenuRef,
"class": ns2.e("menu-wrap")
}, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
}
})]
})]
});
}
});
const tagProps = {
type: {
type: String,
default: ""
},
color: {
type: String,
default: ""
},
titleContent: {
type: String,
default: ""
},
checked: {
type: Boolean,
default: false
},
deletable: {
type: Boolean,
default: false
},
size: {
type: String,
default: "md"
}
};
function useClass(props) {
const ns2 = useNamespace$1("tag");
return computed(() => {
const { type: type4, color, deletable } = props;
return `${ns2.e("item")} ${ns2.m(type4 || (color ? "colorful" : "") || "default")} ${deletable ? ns2.m("deletable") : ""} ${ns2.m(
props.size
)}`;
});
}
function useColor(props) {
return computed(() => {
const { color, type: type4 } = props;
const typeMap = {
primary: "var(--devui-primary, #5e7ce0)",
success: "var(--devui-success, #50d4ab)",
warning: "var(--devui-warning, #fac20a)",
danger: "var(--devui-danger, #f66f6a)"
};
const colorMap = {
"blue-w98": "#3383ff",
"aqua-w98": "#39afcc",
"olivine-w98": "#2fa898",
"green-w98": "#4eb15e",
"yellow-w98": "#b08d1a",
"orange-w98": "#d47f35",
"red-w98": "#f66f6a",
"pink-w98": "#f3689a",
"purple-w98": "#a97af8"
};
if (!color && type4) {
return typeMap[type4];
}
const themeColor = colorMap[color] || color;
return themeColor;
});
}
var tag = "";
var Tag = defineComponent({
name: "DTag",
props: tagProps,
emits: ["click", "tagDelete", "checkedChange"],
setup(props, {
slots,
emit
}) {
const ns2 = useNamespace$1("tag");
const {
type: type4,
color,
checked,
titleContent,
deletable
} = toRefs(props);
const tagClass = useClass(props);
const themeColor = useColor(props);
const tagTitle = titleContent.value || "";
const isDefaultTag = () => !type4.value && !color.value;
const handleClick = (e) => {
emit("click", e);
};
const handleDelete = (e) => {
e.stopPropagation();
emit("tagDelete", e);
};
const contentColor = computed(() => {
return isDefaultTag() ? "" : checked.value ? "#fff" : themeColor.value;
});
const closeIconEl = () => {
const iconName = isDefaultTag() ? "error-o" : "close";
return deletable.value ? createVNode("a", {
"class": "remove-button",
"onClick": handleDelete
}, [createVNode(resolveComponent("d-icon"), {
"size": "12px",
"name": iconName,
"color": contentColor.value
}, null)]) : null;
};
const unWatch = watch(checked, (newVal) => {
emit("checkedChange", newVal);
});
onUnmounted(() => unWatch());
return () => {
var _a;
return createVNode("div", {
"class": ns2.b(),
"onClick": handleClick
}, [createVNode("span", {
"class": tagClass.value,
"style": {
display: "block",
color: contentColor.value,
backgroundColor: checked.value ? themeColor.value : !color.value ? "" : "var(--devui-base-bg, #ffffff)"
},
"title": tagTitle
}, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]);
};
}
});
const categorySearchProps = {
category: {
type: Array,
default: () => []
},
defaultSearchField: {
type: Array,
default: () => []
},
selectedTags: {
type: Array,
default: () => []
},
toggleScrollToTail: {
type: Boolean,
default: false
},
searchKey: {
type: String,
default: ""
},
placeholder: {
type: String,
default: ""
},
inputReadOnly: {
type: Boolean,
default: false
},
tagMaxWidth: {
type: Number
},
beforeTagChange: {
type: Function
},
showSearchCategory: {
type: [Boolean, Object],
default: true
},
categoryInGroup: {
type: Boolean,
default: false
},
groupOrderConfig: {
type: Array,
default: () => []
},
filterNameRules: {
type: Array
},
textConfig: {
type: Object,
default: () => ({
keywordName: "",
createFilter: "",
filterTitle: "",
labelConnector: "|",
noCategoriesAvailable: ""
})
},
extendConfig: {
type: Object
},
styleType: {
type: String,
default: "default"
}
};
const categorySearchInjectionKey = Symbol("d-category-search");
const categorySearchDropdownProps = {
item: {
type: Object,
default: () => ({})
},
isJoinLabelType: {
type: Boolean,
default: false
}
};
const categorySearchTagProps = {
item: {
type: Object,
default: () => ({})
},
isJoinLabelType: {
type: Boolean,
default: false
}
};
const typeMenuProps = {
tag: {
type: Object,
default: () => ({})
}
};
const extendIconProps = {
disabled: {
type: Boolean,
default: false
}
};
var CategorySearchTag = defineComponent({
name: "DCategorySearchTag",
props: categorySearchTagProps,
setup(props) {
const {
item,
isJoinLabelType
} = toRefs(props);
const {
rootCtx,
tagMaxWidth,
innerTextConfig,
removeTag
} = inject(categorySearchInjectionKey);
return () => createVNode(Tag, {
"deletable": true,
"title-content": item.value.title,
"max-width": (tagMaxWidth == null ? void 0 : tagMaxWidth.value) + "px",
"onTagDelete": (e) => removeTag(item.value, e)
}, {
default: () => {
var _a, _b, _c, _d;
return [rootCtx.slots[`${item.value.field}Tag`] ? rootCtx.slots[`${item.value.field}Tag`]({
tag: item.value
}) : isJoinLabelType.value ? createVNode(Fragment, null, [createVNode("span", null, [item.value.label, createTextVNode(": ")]), createVNode("span", {
"class": "dp-category-search-multi-tag",
"style": {
maxWidth: (tagMaxWidth == null ? void 0 : tagMaxWidth.value) + "px"
}
}, [Array.isArray((_a = item.value.value) == null ? void 0 : _a.cache) && ((_c = (_b = item.value.value) == null ? void 0 : _b.cache) == null ? void 0 : _c.map((tag2, index2) => createVNode(Fragment, null, [index2 > 0 && createVNode("span", {
"class": "dp-color-block-split-line"
}, [innerTextConfig.value.labelConnector || "|"]), item.value.type === "label" && createVNode("span", {
"class": "dp-color-block-sm",
"style": {
background: tag2[item.value.colorKey || "color"]
}
}, null), createVNode("span", {
"style": {
color: tag2[item.value.colorKey || "color"]
}
}, [tag2[item.value.filterKey || "label"] || ""])])))])]) : `${item.value.label}: ${((_d = item.value.value) == null ? void 0 : _d[item.value.filterKey || "label"]) || ""}`];
}
});
}
});
var CategorySearchTagDropdown = defineComponent({
name: "DCategorySearchDropdown",
props: categorySearchDropdownProps,
setup(props) {
const {
item,
isJoinLabelType
} = toRefs(props);
const {
rootCtx,
ComponentMap,
onSearchKeyTagClick,
addTagContext,
removeTagContext
} = inject(categorySearchInjectionKey);
const isVisible = ref(false);
const checkType = (tag2) => {
return tag2 && tag2.type === "radio" ? "all" : "blank";
};
const onTagClick = () => {
isVisible.value = !isVisible.value;
};
const onToggle = (status) => {
isVisible.value = status;
};
const onDropdownClose = () => {
isVisible.value = false;
};
const toggle = (status) => {
if (typeof status === "boolean") {
isVisible.value = status;
} else {
onTagClick();
}
};
onMounted(() => {
addTagContext(item.value.field, {
toggle
});
});
onUnmounted(() => {
removeTagContext(item.value.field);
});
return () => item.value.type !== "keyword" ? createVNode(Dropdown, {
"visible": isVisible.value,
"trigger": "manually",
"align": "start",
"position": ["bottom-start", "top-start", "bottom-end", "top-end"],
"class": "dp-category-search-dropdown dp-dropdown-menu-fix",
"close-scope": checkType(item.value),
"onToggle": onToggle
}, {
default: () => createVNode("li", {
"class": "dp-tag-item",
"onClick": onTagClick
}, [createVNode(CategorySearchTag, {
"item": item.value,
"isJoinLabelType": isJoinLabelType.value
}, null)]),
menu: () => {
var _a, _b;
return ((_b = (_a = rootCtx.slots)[`${item.value.field}Menu`]) == null ? void 0 : _b.call(_a, {
tagOption: item.value,
close: onDropdownClose
})) || h(ComponentMap[item.value.type], {
tag: item.value,
onClose: onDropdownClose
});
}
}) : createVNode("li", {
"class": "dp-tag-item",
"onClick": onSearchKeyTagClick
}, [createVNode(CategorySearchTag, {
"item": item.value,
"isJoinLabelType": isJoinLabelType.value
}, null)]);
}
});
function useCategorySearchInput(ctx) {
const inputRef = ref();
const isVisible = ref(false);
const onInputClick = () => {
isVisible.value = !isVisible.value;
};
const onDropdownClose = () => {
isVisible.value = false;
};
const focus = () => {
var _a;
(_a = inputRef.value) == null ? void 0 : _a.focus();
};
const scrollIntoView = () => {
var _a;
(_a = inputRef.value) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
};
const openMenu = () => {
isVisible.value = true;
};
const closeMenu = () => {
isVisible.value = false;
};
ctx.expose({ focus, scrollIntoView, openMenu, closeMenu });
return { isVisible, inputRef, onInputClick, onDropdownClose, closeMenu };
}
var CategorySearchInput = defineComponent({
name: "DCategorySearchInput",
setup(_, ctx) {
const {
rootCtx,
id,
inputReadOnly,
placeholder,
innerSearchKey,
isHover,
isFocus,
enterSearch,
showNoDataTips,
showSearchCategory,
categoryDisplay,
innerTextConfig,
showSearchConfig,
searchField,
currentSearchCategory,
ComponentMap,
currentSelectTag,
onCategoryItemClick,
searchKeyChangeEvent,
searchInputValue,
searchCategory,
showCurrentSearchCategory,
onInputBackspace,
onInputToggle
} = inject(categorySearchInjectionKey);
const {
isVisible,
inputRef,
onInputClick,
onDropdownClose,
closeMenu
} = useCategorySearchInput(ctx);
const checkType = (tag2) => {
return tag2 && tag2.type === "radio" ? "all" : "blank";
};
const onToggle = (status) => {
isVisible.value = status;
onInputToggle();
};
const onInputKeydown = (e) => {
if (e.key === "Backspace") {
onInputBackspace();
}
if (e.key === "Enter") {
searchInputValue(e);
closeMenu();
}
};
const onKeydownDescriptionClick = (e) => {
searchInputValue(e);
closeMenu();
};
const onFieldDescriptionClick = (item) => {
searchCategory(item);
closeMenu();
};
const onCategorySuggestionClick = (item) => {
showCurrentSearchCategory(item);
closeMenu();
};
return () => {
var _a;
return createVNode("div", {
"class": "dp-category-search-input"
}, [createVNode("div", {
"class": "dp-input-container"
}, [createVNode(Dropdown, {
"visible": isVisible.value,
"class": [`dp-category-search-dropdown dp-dropdown-menu-fix dp-scrollbar dp-category-dropdown-menu-${id.value}`, {
"max-height": ((_a = currentSelectTag.value) == null ? void 0 : _a.type) !== "treeSelect"
}],
"trigger": "manually",
"align": "start",
"position": ["bottom-start", "top-start", "bottom-end", "top-end"],
"close-scope": checkType(currentSelectTag.value),
"onToggle": onToggle
}, {
default: () => createVNode("input", {
"ref": inputRef,
"class": "dp-category-search-toggle",
"autocomplete": "off",
"value": innerSearchKey.value,
"readonly": inputReadOnly.value,
"placeholder": placeholder.value || "\u70B9\u51FB\u6B64\u5904\u6DFB\u52A0\u7B5B\u9009\u6761\u4EF6",
"onInput": searchKeyChangeEvent,
"onClick": onInputClick,
"onKeydown": onInputKeydown,
"onFocus": () => {
isHover.value = false;
isFocus.value = true;
},
"onBlur": () => {
isFocus.value = false;
}
}, null),
menu: !enterSearch.value || enterSearch.value && showSearchCategory.value ? () => {
var _a2, _b, _c, _d;
return createVNode(Fragment, null, [!currentSelectTag.value && createVNode("ul", {
"class": "dp-dropdown-menu-template"
}, [!enterSearch.value ? createVNode(Fragment, null, [categoryDisplay.value.map((item) => {
var _a3, _b2;
return createVNode(Fragment, null, [item.groupLength && createVNode("li", {
"class": "dp-dropdown-item dp-category-search-group"
}, [((_b2 = (_a3 = rootCtx.slots).groupName) == null ? void 0 : _b2.call(_a3, {
tag: item
})) || createVNode("strong", null, [item.groupName])]), item.groupLength === void 0 && !item.isSelected && createVNode("li", {
"class": "dp-dropdown-item",
"onClick": () => onCategoryItemClick(item)
}, [createVNode("span", {
"title": item.label
}, [item.label])])]);
}), showNoDataTips.value && createVNode("div", {
"class": "dp-no-data-text"
}, [innerTextConfig.value.noCategoriesAvailable || "\u6CA1\u6709\u7B5B\u9009\u6761\u4EF6"])]) : createVNode(Fragment, null, [showSearchConfig.value.keyword && createVNode("li", {
"class": "dp-dropdown-item dp-search-description",
"onClick": onKeydownDescriptionClick
}, [createVNode("i", {
"class": "icon-search"
}, null), (_b = (_a2 = showSearchConfig.value).keywordDescription) == null ? void 0 : _b.call(_a2, innerSearchKey.value)]), showSearchConfig.value.field && searchField.value.map((item) => {
var _a3, _b2;
return createVNode("li", {
"class": "dp-dropdown-item",
"onClick": () => onFieldDescriptionClick(item)
}, [createVNode("i", {
"class": "icon-search"
}, null), (_b2 = (_a3 = showSearchConfig.value).fieldDescription) == null ? void 0 : _b2.call(_a3, item.label)]);
}), (showSearchConfig.value.keyword || showSearchConfig.value.field) && showSearchConfig.value.category && Boolean(currentSearchCategory.value.length) && createVNode("div", {
"class": "dp-dividing-line"
}, null), showSearchConfig.value.category && Boolean(currentSearchCategory.value.length) && createVNode(Fragment, null, [createVNode("div", {
"class": "dp-dropdown-menu-tip",
"style": {
paddingBottom: currentSearchCategory.value.length ? "0" : "12px"
}
}, [showSearchConfig.value.categoryDescription]), createVNode("ul", {
"class": "dp-category-search-keyword-in-category dp-dropdown-menu-template"
}, [currentSearchCategory.value.map((item) => createVNode("li", {
"class": "dp-dropdown-item",
"onClick": () => onCategorySuggestionClick(item)
}, [createVNode("span", null, [item.label])]))])])])]), !enterSearch.value && currentSelectTag.value && (((_d = (_c = rootCtx.slots)[`${currentSelectTag.value.field}Menu`]) == null ? void 0 : _d.call(_c, {
tagOption: currentSelectTag.value,
close: onDropdownClose
})) || h(ComponentMap[currentSelectTag.value.type], {
tag: currentSelectTag.value,
onClose: onDropdownClose
}))]);
} : null
})])]);
};
}
});
var CategorySearchClear = defineComponent({
name: "DCategorySearchClear",
props: extendIconProps,
setup(props) {
const {
disabled
} = toRefs(props);
const {
clearFilter
} = inject(categorySearchInjectionKey);
const onClick = (e) => {
if (!disabled.value) {
clearFilter(e);
}
};
return () => createVNode("div", {
"class": ["dp-category-search-icon", {
disabled: disabled.value
}],
"onClick": onClick
}, [createVNode(ClearIcon, null, null)]);
}
});
const DELAY = 300;
const SearchKeyField = "devuiCategorySearchKeyword";
const DROPDOWN_ANIMATION_TIMEOUT = 200;
const COLORS = [
"#f2f5fc",
"#e9edfa",
"#beccfa",
"#96adfa",
"#7693f5",
"#5e7ce0",
"#526ecc",
"#465eb8",
"#3c51a6",
"#344899",
"#2a3c85",
"#ebf6ff",
"#d1ebff",
"#b8e0ff",
"#9ed5ff",
"#85caff",
"#6cbfff",
"#4ea6e6",
"#3590cc",
"#207ab3",
"#0f6999",
"#035880",
"#edfff9",
"#cffcee",
"#acf2dc",
"#8be8cb",
"#6ddebb",
"#50d4ab",
"#3ac295",
"#27b080",
"#169e6c",
"#088c58",
"#007a45",
"#f0ffe6",
"#e5ffd4",
"#d8fcc0",
"#c5f2a7",
"#b3e890",
"#a6dd82",
"#92cc68",
"#7eba50",
"#6ca83b",
"#5e9629",
"#518519",
"#fffbf0",
"#fff1c2",
"#ffe794",
"#ffdc66",
"#ffd138",
"#fac20a",
"#e3aa00",
"#cc9600",
"#b58200",
"#9e6f00",
"#875c00",
"#fff3e8",
"#ffe1c7",
"#ffd0a6",
"#ffbf85",
"#ffad63",
"#fa9841",
"#e37d29",
"#cc6414",
"#b54e04",
"#9e3f00",
"#873400",
"#ffeeed",
"#ffd5d4",
"#ffbcba",
"#ffa4a1",
"#ff8b87",
"#f66f6a",
"#de504e",
"#c73636",
"#b02121",
"#991111",
"#820404",
"#ffedf3",
"#ffd4e3",
"#ffbad2",
"#ffa1c2",
"#fc86b0",
"#f3689a",
"#db4d83",
"#c4356e",
"#ad215b",
"#96114d",
"#800440",
"#f5f0ff",
"#e7d9ff",
"#d8c2ff",
"#caabff",
"#bc94ff",
"#a97af8",
"#8a5ce0",
"#6f42c9",
"#572db3",
"#3f1a9c",
"#2a0c85"
];
function getSearchMessage(type4) {
return `\u4EC5\u641C\u7D22\u5173\u952E\u5B57 '${type4}'`;
}
function getFindingMessage(msg) {
return `\u5728 '${msg}' \u4E2D\u67E5\u627E`;
}
function useCategorySearchSave(createFilterFn) {
const isVisible = ref(false);
const formRef = ref();
const inputRef = ref();
const formData = reactive({
filterName: ""
});
const onConfirm = () => {
formRef.value.validate((isValid) => {
if (isValid) {
createFilterFn(formData.filterName);
isVisible.value = false;
setTimeout(() => {
formData.filterName = "";
}, DELAY);
}
});
};
const onToggle = (status) => {
isVisible.value = status;
if (status) {
formData.filterName = "";
setTimeout(() => {
inputRef.value.focus();
});
}
};
return { isVisible, formRef, formData, inputRef, onConfirm, onToggle };
}
function useCategorySearchMore() {
const { rootRef, innerSelectedTags, joinLabelTypes } = inject(categorySearchInjectionKey);
const isVisible = ref(false);
const iconRef = ref();
const overlayRef = ref();
onClickOutside(
overlayRef,
() => {
isVisible.value = false;
},
{ ignore: [iconRef] }
);
return { isVisible, rootRef, iconRef, overlayRef, innerSelectedTags, joinLabelTypes };
}
var CategorySearchSave = defineComponent({
name: "DCategorySearchSave",
props: extendIconProps,
setup(props) {
const {
disabled
} = toRefs(props);
const {
innerTextConfig,
filterNameRules,
createFilterFn
} = inject(categorySearchInjectionKey);
const {
isVisible,
formRef,
formData,
inputRef,
onConfirm,
onToggle
} = useCategorySearchSave(createFilterFn);
return () => createVNode("div", {
"class": ["dp-category-search-icon", {
disabled: disabled.value
}]
}, [createVNode(Dropdown, {
"visible": isVisible.value,
"trigger": "manually",
"align": "start",
"position": ["bottom-start", "top-start", "bottom-end", "top-end"],
"close-scope": "blank",
"class": "dp-save-panel",
"onToggle": onToggle
}, {
default: () => createVNode(SaveIcon, {
"textConfig": innerTextConfig.value,
"onClick": () => isVisible.value = !isVisible.value
}, null),
menu: () => createVNode(Fragment, null, [createVNode("div", {
"class": "dp-save-panel-title"
}, [createVNode("span", null, [innerTextConfig.value.createFilter])]), createVNode("div", {
"class": "dp-save-filter-name"
}, [createVNode(resolveComponent("d-form"), {
"ref": formRef,
"data": formData,
"layout": "vertical",
"pop-position": ["right"]
}, {
default: () => [createVNode(resolveComponent("d-form-item"), {
"field": "filterName",
"label": innerTextConfig.value.filterTitle,
"rules": filterNameRules == null ? void 0 : filterNameRules.value
}, {
default: () => [createVNode(resolveComponent("d-input"), {
"ref": inputRef,
"modelValue": formData.filterName,
"onUpdate:modelValue": ($event) => formData.filterName = $event,
"placeholder": "\u8BF7\u8F93\u5165...",
"clearable": true
}, null)]
})]
})]), createVNode("div", {
"class": "dp-save-panel-operation-area"
}, [createVNode(resolveComponent("d-button"), {
"variant": "solid",
"onClick": onConfirm
}, {
default: () => [createTextVNode("\u786E\u5B9A")]
}), createVNode(resolveComponent("d-button"), {
"variant": "solid",
"color": "secondary",
"onClick": () => isVisible.value = false
}, {
default: () => [createTextVNode("\u53D6\u6D88")]
})])])
})]);
}
});
var CategorySearchMore = defineComponent({
name: "DCategorySearchMore",
props: extendIconProps,
setup(props) {
const {
disabled
} = toRefs(props);
const {
isVisible,
rootRef,
iconRef,
overlayRef,
innerSelectedTags,
joinLabelTypes
} = useCategorySearchMore();
return () => createVNode("div", {
"class": ["dp-category-search-icon", {
disabled: disabled.value
}]
}, [createVNode(MoreIcon, {
"ref": iconRef,
"onClick": () => isVisible.value = !isVisible.value
}, null), createVNode(Teleport, {
"to": "body"
}, {
default: () => [createVNode(FlexibleOverlay, {
"modelValue": isVisible.value,
"onUpdate:modelValue": ($event) => isVisible.value = $event,
"origin": rootRef.value,
"ref": overlayRef,
"align": "start",
"position": ["bottom-start", "top-start", "bottom-end", "top-end"],
"class": "dp-selected-tags-list",
"onClick": () => isVisible.value = false
}, {
default: () => [createVNode("ul", null, [innerSelectedTags.value.map((item) => createVNode("li", {
"class": "dp-tag-item"
}, [createVNode(CategorySearchTag, {
"item": item,
"isJoinLabelType": joinLabelTypes.includes(item.type || "")
}, null)]))])]
})]
})]);
}
});
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
var lodash = { exports: {} };
/**
* @licens