7362 lines
314 KiB
JavaScript
7362 lines
314 KiB
JavaScript
|
var __defProp = Object.defineProperty;
|
|||
|
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|||
|
|
import { d as defineComponent, u as useSettingStore, r as ref, a as useTitleEditorStore, b as useCanvasStore, w as watch, L as LGraphGroup, c as app, e as LGraphNode, o as onMounted, f as onUnmounted, g as openBlock, h as createElementBlock, i as createVNode, E as EditableText, n as normalizeStyle, j as createCommentVNode, k as LiteGraph, _ as _export_sfc, B as BaseStyle, s as script$c, l as resolveComponent, m as mergeProps, p as renderSlot, q as computed, t as resolveDirective, v as withDirectives, x as createBlock, y as withCtx, z as unref, A as createBaseVNode, C as normalizeClass, D as script$d, F as useCommandStore, G as useDialogStore, S as SettingDialogHeader, H as SettingDialogContent, I as useWorkspaceStore, J as onBeforeUnmount, K as useKeybindingStore, M as Fragment, N as renderList, T as Teleport, O as resolveDynamicComponent, P as pushScopeId, Q as popScopeId, R as script$e, U as getWidth, V as getHeight, W as getOuterWidth, X as getOuterHeight, Y as getVNodeProp, Z as isArray, $ as vShow, a0 as isNotEmpty, a1 as UniqueComponentId, a2 as ZIndex, a3 as resolveFieldData, a4 as focus, a5 as OverlayEventBus, a6 as isEmpty, a7 as addStyle, a8 as relativePosition, a9 as absolutePosition, aa as ConnectedOverlayScrollHandler, ab as isTouchDevice, ac as equals, ad as findLastIndex, ae as findSingle, af as script$f, ag as script$g, ah as script$h, ai as script$i, aj as script$j, ak as script$k, al as Ripple, am as toDisplayString, an as Transition, ao as createSlots, ap as createTextVNode, aq as useNodeFrequencyStore, ar as useNodeBookmarkStore, as as highlightQuery, at as script$l, au as formatNumberWithSuffix, av as NodeSourceType, aw as useI18n, ax as useNodeDefStore, ay as NodePreview, az as NodeSearchFilter, aA as script$m, aB as SearchFilterChip, aC as watchEffect, aD as toRaw, aE as LinkReleaseTriggerAction, aF as useEventListener, aG as nextTick, aH as markRaw, aI as useModelToNodeStore, aJ as usePragmaticDroppable, aK as ComfyNodeDefImpl, aL as ComfyModelDef, aM as LGraph, aN as LLink, aO as DragAndScale, aP as LGraphCanvas, aQ as ContextMenu, aR as LGraphBadge, aS as script$o, aT as script$q, aU as script$r, aV as normalizeProps, aW as ToastEventBus, aX as setAttribute, aY as TransitionGroup, aZ as useToast, a_ as useToastStore, a$ as useExecutionStore, b0 as useWorkflowStore, b1 as useTitle, b2 as withModifiers, b3 as script$s, b4 as resolve, b5 as script$t, b6 as script$u, b7 as isPrintableCharacter, b8 as guardReactiveProps, b9 as useMenuItemStore, ba as script$x, bb as nestedPosition, bc as useQueueSettingsStore, bd as storeToRefs, be as isRef, bf as script$y, bg as useQueuePendingTaskCountStore, bh as useLocalStorage, bi as useDraggable, bj as watchDebounced, bk as inject, bl as useElementBounding, bm as script$z, bn as lodashExports, bo as useEventBus, bp as provide, bq as api, br as i18n, bs as useWorkflowBookmarkStore, bt as useSidebarTabStore } from "./index-CgU1oKZt.js";
|
|||
|
|
import { s as script$n, a as script$p, b as script$v, c as script$w } from "./index-DYEEBf64.js";
|
|||
|
|
const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "TitleEditor",
|
|||
|
|
setup(__props) {
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const showInput = ref(false);
|
|||
|
|
const editedTitle = ref("");
|
|||
|
|
const inputStyle = ref({
|
|||
|
|
position: "fixed",
|
|||
|
|
left: "0px",
|
|||
|
|
top: "0px",
|
|||
|
|
width: "200px",
|
|||
|
|
height: "20px",
|
|||
|
|
fontSize: "12px"
|
|||
|
|
});
|
|||
|
|
const titleEditorStore = useTitleEditorStore();
|
|||
|
|
const canvasStore = useCanvasStore();
|
|||
|
|
const previousCanvasDraggable = ref(true);
|
|||
|
|
const onEdit = /* @__PURE__ */ __name((newValue) => {
|
|||
|
|
if (titleEditorStore.titleEditorTarget && newValue.trim() !== "") {
|
|||
|
|
titleEditorStore.titleEditorTarget.title = newValue.trim();
|
|||
|
|
app.graph.setDirtyCanvas(true, true);
|
|||
|
|
}
|
|||
|
|
showInput.value = false;
|
|||
|
|
titleEditorStore.titleEditorTarget = null;
|
|||
|
|
canvasStore.canvas.allow_dragcanvas = previousCanvasDraggable.value;
|
|||
|
|
}, "onEdit");
|
|||
|
|
watch(
|
|||
|
|
() => titleEditorStore.titleEditorTarget,
|
|||
|
|
(target) => {
|
|||
|
|
if (target === null) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
editedTitle.value = target.title;
|
|||
|
|
showInput.value = true;
|
|||
|
|
previousCanvasDraggable.value = canvasStore.canvas.allow_dragcanvas;
|
|||
|
|
canvasStore.canvas.allow_dragcanvas = false;
|
|||
|
|
if (target instanceof LGraphGroup) {
|
|||
|
|
const group = target;
|
|||
|
|
const [x, y] = group.pos;
|
|||
|
|
const [w, h] = group.size;
|
|||
|
|
const [left, top] = app.canvasPosToClientPos([x, y]);
|
|||
|
|
inputStyle.value.left = `${left}px`;
|
|||
|
|
inputStyle.value.top = `${top}px`;
|
|||
|
|
const width = w * app.canvas.ds.scale;
|
|||
|
|
const height = group.titleHeight * app.canvas.ds.scale;
|
|||
|
|
inputStyle.value.width = `${width}px`;
|
|||
|
|
inputStyle.value.height = `${height}px`;
|
|||
|
|
const fontSize = group.font_size * app.canvas.ds.scale;
|
|||
|
|
inputStyle.value.fontSize = `${fontSize}px`;
|
|||
|
|
} else if (target instanceof LGraphNode) {
|
|||
|
|
const node = target;
|
|||
|
|
const [x, y] = node.getBounding();
|
|||
|
|
const canvasWidth = node.width;
|
|||
|
|
const canvasHeight = LiteGraph.NODE_TITLE_HEIGHT;
|
|||
|
|
const [left, top] = app.canvasPosToClientPos([x, y]);
|
|||
|
|
inputStyle.value.left = `${left}px`;
|
|||
|
|
inputStyle.value.top = `${top}px`;
|
|||
|
|
const width = canvasWidth * app.canvas.ds.scale;
|
|||
|
|
const height = canvasHeight * app.canvas.ds.scale;
|
|||
|
|
inputStyle.value.width = `${width}px`;
|
|||
|
|
inputStyle.value.height = `${height}px`;
|
|||
|
|
const fontSize = 12 * app.canvas.ds.scale;
|
|||
|
|
inputStyle.value.fontSize = `${fontSize}px`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
const canvasEventHandler = /* @__PURE__ */ __name((event) => {
|
|||
|
|
if (!settingStore.get("Comfy.Group.DoubleClickTitleToEdit")) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (event.detail.subType === "group-double-click") {
|
|||
|
|
const group = event.detail.group;
|
|||
|
|
const [x, y] = group.pos;
|
|||
|
|
const e = event.detail.originalEvent;
|
|||
|
|
const relativeY = e.canvasY - y;
|
|||
|
|
if (relativeY > group.titleHeight) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
titleEditorStore.titleEditorTarget = group;
|
|||
|
|
}
|
|||
|
|
}, "canvasEventHandler");
|
|||
|
|
const extension = {
|
|||
|
|
name: "Comfy.NodeTitleEditor",
|
|||
|
|
nodeCreated(node) {
|
|||
|
|
const originalCallback = node.onNodeTitleDblClick;
|
|||
|
|
node.onNodeTitleDblClick = function(e, ...args) {
|
|||
|
|
if (!settingStore.get("Comfy.Node.DoubleClickTitleToEdit")) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
titleEditorStore.titleEditorTarget = this;
|
|||
|
|
if (typeof originalCallback === "function") {
|
|||
|
|
originalCallback.call(this, e, ...args);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
onMounted(() => {
|
|||
|
|
document.addEventListener("litegraph:canvas", canvasEventHandler);
|
|||
|
|
app.registerExtension(extension);
|
|||
|
|
});
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
document.removeEventListener("litegraph:canvas", canvasEventHandler);
|
|||
|
|
});
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return showInput.value ? (openBlock(), createElementBlock("div", {
|
|||
|
|
key: 0,
|
|||
|
|
class: "group-title-editor node-title-editor",
|
|||
|
|
style: normalizeStyle(inputStyle.value)
|
|||
|
|
}, [
|
|||
|
|
createVNode(EditableText, {
|
|||
|
|
isEditing: showInput.value,
|
|||
|
|
modelValue: editedTitle.value,
|
|||
|
|
onEdit
|
|||
|
|
}, null, 8, ["isEditing", "modelValue"])
|
|||
|
|
], 4)) : createCommentVNode("", true);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const TitleEditor = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-fc3f26e3"]]);
|
|||
|
|
var theme$8 = /* @__PURE__ */ __name(function theme(_ref) {
|
|||
|
|
var dt = _ref.dt;
|
|||
|
|
return "\n.p-overlaybadge {\n position: relative;\n}\n\n.p-overlaybadge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n transform-origin: 100% 0;\n margin: 0;\n outline-width: ".concat(dt("overlaybadge.outline.width"), ";\n outline-style: solid;\n outline-color: ").concat(dt("overlaybadge.outline.color"), ";\n}\n");
|
|||
|
|
}, "theme");
|
|||
|
|
var classes$9 = {
|
|||
|
|
root: "p-overlaybadge"
|
|||
|
|
};
|
|||
|
|
var OverlayBadgeStyle = BaseStyle.extend({
|
|||
|
|
name: "overlaybadge",
|
|||
|
|
theme: theme$8,
|
|||
|
|
classes: classes$9
|
|||
|
|
});
|
|||
|
|
var script$1$9 = {
|
|||
|
|
name: "OverlayBadge",
|
|||
|
|
"extends": script$c,
|
|||
|
|
style: OverlayBadgeStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide2() {
|
|||
|
|
return {
|
|||
|
|
$pcOverlayBadge: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
var script$b = {
|
|||
|
|
name: "OverlayBadge",
|
|||
|
|
"extends": script$1$9,
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
components: {
|
|||
|
|
Badge: script$c
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
function render$d(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _component_Badge = resolveComponent("Badge");
|
|||
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("root")
|
|||
|
|
}, _ctx.ptmi("root")), [renderSlot(_ctx.$slots, "default"), createVNode(_component_Badge, mergeProps(_ctx.$props, {
|
|||
|
|
pt: _ctx.ptm("pcBadge")
|
|||
|
|
}), null, 16, ["pt"])], 16);
|
|||
|
|
}
|
|||
|
|
__name(render$d, "render$d");
|
|||
|
|
script$b.render = render$d;
|
|||
|
|
const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "SidebarIcon",
|
|||
|
|
props: {
|
|||
|
|
icon: String,
|
|||
|
|
selected: Boolean,
|
|||
|
|
tooltip: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
class: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
iconBadge: {
|
|||
|
|
type: [String, Function],
|
|||
|
|
default: ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
emits: ["click"],
|
|||
|
|
setup(__props, { emit: __emit }) {
|
|||
|
|
const props = __props;
|
|||
|
|
const emit = __emit;
|
|||
|
|
const overlayValue = computed(
|
|||
|
|
() => typeof props.iconBadge === "function" ? props.iconBadge() || "" : props.iconBadge
|
|||
|
|
);
|
|||
|
|
const shouldShowBadge = computed(() => !!overlayValue.value);
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
const _directive_tooltip = resolveDirective("tooltip");
|
|||
|
|
return withDirectives((openBlock(), createBlock(unref(script$d), {
|
|||
|
|
class: normalizeClass(props.class),
|
|||
|
|
text: "",
|
|||
|
|
pt: {
|
|||
|
|
root: {
|
|||
|
|
class: `side-bar-button ${props.selected ? "p-button-primary side-bar-button-selected" : "p-button-secondary"}`,
|
|||
|
|
"aria-label": props.tooltip
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
|
|||
|
|
}, {
|
|||
|
|
icon: withCtx(() => [
|
|||
|
|
shouldShowBadge.value ? (openBlock(), createBlock(unref(script$b), {
|
|||
|
|
key: 0,
|
|||
|
|
value: overlayValue.value
|
|||
|
|
}, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
createBaseVNode("i", {
|
|||
|
|
class: normalizeClass(props.icon + " side-bar-button-icon")
|
|||
|
|
}, null, 2)
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
}, 8, ["value"])) : (openBlock(), createElementBlock("i", {
|
|||
|
|
key: 1,
|
|||
|
|
class: normalizeClass(props.icon + " side-bar-button-icon")
|
|||
|
|
}, null, 2))
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
}, 8, ["class", "pt"])), [
|
|||
|
|
[_directive_tooltip, { value: props.tooltip, showDelay: 300, hideDelay: 300 }]
|
|||
|
|
]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const SidebarIcon = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-caa3ee9c"]]);
|
|||
|
|
const _sfc_main$k = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "SidebarThemeToggleIcon",
|
|||
|
|
setup(__props) {
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const currentTheme = computed(() => settingStore.get("Comfy.ColorPalette"));
|
|||
|
|
const icon = computed(
|
|||
|
|
() => currentTheme.value !== "light" ? "pi pi-moon" : "pi pi-sun"
|
|||
|
|
);
|
|||
|
|
const commandStore = useCommandStore();
|
|||
|
|
const toggleTheme = /* @__PURE__ */ __name(() => {
|
|||
|
|
commandStore.execute("Comfy.ToggleTheme");
|
|||
|
|
}, "toggleTheme");
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createBlock(SidebarIcon, {
|
|||
|
|
icon: icon.value,
|
|||
|
|
onClick: toggleTheme,
|
|||
|
|
tooltip: _ctx.$t("sideToolbar.themeToggle"),
|
|||
|
|
class: "comfy-vue-theme-toggle"
|
|||
|
|
}, null, 8, ["icon", "tooltip"]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const _sfc_main$j = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "SidebarSettingsToggleIcon",
|
|||
|
|
setup(__props) {
|
|||
|
|
const dialogStore = useDialogStore();
|
|||
|
|
const showSetting = /* @__PURE__ */ __name(() => {
|
|||
|
|
dialogStore.showDialog({
|
|||
|
|
headerComponent: SettingDialogHeader,
|
|||
|
|
component: SettingDialogContent
|
|||
|
|
});
|
|||
|
|
}, "showSetting");
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createBlock(SidebarIcon, {
|
|||
|
|
icon: "pi pi-cog",
|
|||
|
|
class: "comfy-settings-btn",
|
|||
|
|
onClick: showSetting,
|
|||
|
|
tooltip: _ctx.$t("settings")
|
|||
|
|
}, null, 8, ["tooltip"]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const _withScopeId$6 = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-b6bfc188"), n = n(), popScopeId(), n), "_withScopeId$6");
|
|||
|
|
const _hoisted_1$g = { class: "side-tool-bar-end" };
|
|||
|
|
const _hoisted_2$d = {
|
|||
|
|
key: 0,
|
|||
|
|
class: "sidebar-content-container h-full overflow-y-auto overflow-x-hidden"
|
|||
|
|
};
|
|||
|
|
const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "SideToolbar",
|
|||
|
|
setup(__props) {
|
|||
|
|
const workspaceStore = useWorkspaceStore();
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const teleportTarget = computed(
|
|||
|
|
() => settingStore.get("Comfy.Sidebar.Location") === "left" ? ".comfyui-body-left" : ".comfyui-body-right"
|
|||
|
|
);
|
|||
|
|
const isSmall = computed(
|
|||
|
|
() => settingStore.get("Comfy.Sidebar.Size") === "small"
|
|||
|
|
);
|
|||
|
|
const tabs = computed(() => workspaceStore.getSidebarTabs());
|
|||
|
|
const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab);
|
|||
|
|
const mountCustomTab = /* @__PURE__ */ __name((tab, el) => {
|
|||
|
|
tab.render(el);
|
|||
|
|
}, "mountCustomTab");
|
|||
|
|
const onTabClick = /* @__PURE__ */ __name((item3) => {
|
|||
|
|
workspaceStore.sidebarTab.toggleSidebarTab(item3.id);
|
|||
|
|
}, "onTabClick");
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
tabs.value.forEach((tab) => {
|
|||
|
|
if (tab.type === "custom" && tab.destroy) {
|
|||
|
|
tab.destroy();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
const keybindingStore = useKeybindingStore();
|
|||
|
|
const getTabTooltipSuffix = /* @__PURE__ */ __name((tab) => {
|
|||
|
|
const keybinding = keybindingStore.getKeybindingByCommandId(
|
|||
|
|
`Workspace.ToggleSidebarTab.${tab.id}`
|
|||
|
|
);
|
|||
|
|
return keybinding ? ` (${keybinding.combo.toString()})` : "";
|
|||
|
|
}, "getTabTooltipSuffix");
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|||
|
|
(openBlock(), createBlock(Teleport, { to: teleportTarget.value }, [
|
|||
|
|
createBaseVNode("nav", {
|
|||
|
|
class: normalizeClass("side-tool-bar-container" + (isSmall.value ? " small-sidebar" : ""))
|
|||
|
|
}, [
|
|||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab) => {
|
|||
|
|
return openBlock(), createBlock(SidebarIcon, {
|
|||
|
|
key: tab.id,
|
|||
|
|
icon: tab.icon,
|
|||
|
|
iconBadge: tab.iconBadge,
|
|||
|
|
tooltip: tab.tooltip + getTabTooltipSuffix(tab),
|
|||
|
|
selected: tab.id === selectedTab.value?.id,
|
|||
|
|
class: normalizeClass(tab.id + "-tab-button"),
|
|||
|
|
onClick: /* @__PURE__ */ __name(($event) => onTabClick(tab), "onClick")
|
|||
|
|
}, null, 8, ["icon", "iconBadge", "tooltip", "selected", "class", "onClick"]);
|
|||
|
|
}), 128)),
|
|||
|
|
createBaseVNode("div", _hoisted_1$g, [
|
|||
|
|
createVNode(_sfc_main$k),
|
|||
|
|
createVNode(_sfc_main$j)
|
|||
|
|
])
|
|||
|
|
], 2)
|
|||
|
|
], 8, ["to"])),
|
|||
|
|
selectedTab.value ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
|
|||
|
|
selectedTab.value.type === "vue" ? (openBlock(), createBlock(resolveDynamicComponent(selectedTab.value.component), { key: 0 })) : (openBlock(), createElementBlock("div", {
|
|||
|
|
key: 1,
|
|||
|
|
ref: /* @__PURE__ */ __name((el) => {
|
|||
|
|
if (el)
|
|||
|
|
mountCustomTab(
|
|||
|
|
selectedTab.value,
|
|||
|
|
el
|
|||
|
|
);
|
|||
|
|
}, "ref")
|
|||
|
|
}, null, 512))
|
|||
|
|
])) : createCommentVNode("", true)
|
|||
|
|
], 64);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const SideToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-b6bfc188"]]);
|
|||
|
|
var theme$7 = /* @__PURE__ */ __name(function theme2(_ref) {
|
|||
|
|
var dt = _ref.dt;
|
|||
|
|
return "\n.p-splitter {\n display: flex;\n flex-wrap: nowrap;\n border: 1px solid ".concat(dt("splitter.border.color"), ";\n background: ").concat(dt("splitter.background"), ";\n border-radius: ").concat(dt("border.radius.md"), ";\n color: ").concat(dt("splitter.color"), ";\n}\n\n.p-splitter-vertical {\n flex-direction: column;\n}\n\n.p-splitter-gutter {\n flex-grow: 0;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n background: ").concat(dt("splitter.gutter.background"), ";\n}\n\n.p-splitter-gutter-handle {\n border-radius: ").concat(dt("splitter.handle.border.radius"), ";\n background: ").concat(dt("splitter.handle.background"), ";\n transition: outline-color ").concat(dt("splitter.transition.duration"), ", box-shadow ").concat(dt("splitter.transition.duration"), ";\n outline-color: transparent;\n}\n\n.p-splitter-gutter-handle:focus-visible {\n box-shadow: ").concat(dt("splitter.handle.focus.ring.shadow"), ";\n outline: ").concat(dt("splitter.handle.focus.ring.width"), " ").concat(dt("splitter.handle.focus.ring.style"), " ").concat(dt("splitter.handle.focus.ring.color"), ";\n outline-offset: ").concat(dt("splitter.handle.focus.ring.offset"), ";\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n cursor: col-resize;\n user-select: none;\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n cursor: row-resize;\n user-select: none;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n height: ").concat(dt("splitter.handle.size"), ";\n width: 100%;\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n width: ").concat(dt("splitter.handle.size"), ";\n height: 100%;\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n cursor: col-resize;\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n cursor: row-resize;\n}\n\n.p-splitterpanel {\n flex-grow: 1;\n overflow: hidden;\n}\n\n.p-splitterpanel-nested {\n display: flex;\n}\n\n.p-splitterpanel .p-splitter {\n flex-grow: 1;\n border: 0 none;\n}\n");
|
|||
|
|
}, "theme");
|
|||
|
|
var classes$8 = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root(_ref2) {
|
|||
|
|
var props = _ref2.props;
|
|||
|
|
return ["p-splitter p-component", "p-splitter-" + props.layout];
|
|||
|
|
}, "root"),
|
|||
|
|
gutter: "p-splitter-gutter",
|
|||
|
|
gutterHandle: "p-splitter-gutter-handle"
|
|||
|
|
};
|
|||
|
|
var inlineStyles$4 = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root2(_ref3) {
|
|||
|
|
var props = _ref3.props;
|
|||
|
|
return [{
|
|||
|
|
display: "flex",
|
|||
|
|
"flex-wrap": "nowrap"
|
|||
|
|
}, props.layout === "vertical" ? {
|
|||
|
|
"flex-direction": "column"
|
|||
|
|
} : ""];
|
|||
|
|
}, "root")
|
|||
|
|
};
|
|||
|
|
var SplitterStyle = BaseStyle.extend({
|
|||
|
|
name: "splitter",
|
|||
|
|
theme: theme$7,
|
|||
|
|
classes: classes$8,
|
|||
|
|
inlineStyles: inlineStyles$4
|
|||
|
|
});
|
|||
|
|
var script$1$8 = {
|
|||
|
|
name: "BaseSplitter",
|
|||
|
|
"extends": script$e,
|
|||
|
|
props: {
|
|||
|
|
layout: {
|
|||
|
|
type: String,
|
|||
|
|
"default": "horizontal"
|
|||
|
|
},
|
|||
|
|
gutterSize: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 4
|
|||
|
|
},
|
|||
|
|
stateKey: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
stateStorage: {
|
|||
|
|
type: String,
|
|||
|
|
"default": "session"
|
|||
|
|
},
|
|||
|
|
step: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
style: SplitterStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide3() {
|
|||
|
|
return {
|
|||
|
|
$pcSplitter: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
function _toConsumableArray$2(r) {
|
|||
|
|
return _arrayWithoutHoles$2(r) || _iterableToArray$2(r) || _unsupportedIterableToArray$2(r) || _nonIterableSpread$2();
|
|||
|
|
}
|
|||
|
|
__name(_toConsumableArray$2, "_toConsumableArray$2");
|
|||
|
|
function _nonIterableSpread$2() {
|
|||
|
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|||
|
|
}
|
|||
|
|
__name(_nonIterableSpread$2, "_nonIterableSpread$2");
|
|||
|
|
function _unsupportedIterableToArray$2(r, a) {
|
|||
|
|
if (r) {
|
|||
|
|
if ("string" == typeof r) return _arrayLikeToArray$2(r, a);
|
|||
|
|
var t = {}.toString.call(r).slice(8, -1);
|
|||
|
|
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$2(r, a) : void 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
__name(_unsupportedIterableToArray$2, "_unsupportedIterableToArray$2");
|
|||
|
|
function _iterableToArray$2(r) {
|
|||
|
|
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|||
|
|
}
|
|||
|
|
__name(_iterableToArray$2, "_iterableToArray$2");
|
|||
|
|
function _arrayWithoutHoles$2(r) {
|
|||
|
|
if (Array.isArray(r)) return _arrayLikeToArray$2(r);
|
|||
|
|
}
|
|||
|
|
__name(_arrayWithoutHoles$2, "_arrayWithoutHoles$2");
|
|||
|
|
function _arrayLikeToArray$2(r, a) {
|
|||
|
|
(null == a || a > r.length) && (a = r.length);
|
|||
|
|
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|||
|
|
return n;
|
|||
|
|
}
|
|||
|
|
__name(_arrayLikeToArray$2, "_arrayLikeToArray$2");
|
|||
|
|
var script$a = {
|
|||
|
|
name: "Splitter",
|
|||
|
|
"extends": script$1$8,
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
emits: ["resizestart", "resizeend", "resize"],
|
|||
|
|
dragging: false,
|
|||
|
|
mouseMoveListener: null,
|
|||
|
|
mouseUpListener: null,
|
|||
|
|
touchMoveListener: null,
|
|||
|
|
touchEndListener: null,
|
|||
|
|
size: null,
|
|||
|
|
gutterElement: null,
|
|||
|
|
startPos: null,
|
|||
|
|
prevPanelElement: null,
|
|||
|
|
nextPanelElement: null,
|
|||
|
|
nextPanelSize: null,
|
|||
|
|
prevPanelSize: null,
|
|||
|
|
panelSizes: null,
|
|||
|
|
prevPanelIndex: null,
|
|||
|
|
timer: null,
|
|||
|
|
data: /* @__PURE__ */ __name(function data() {
|
|||
|
|
return {
|
|||
|
|
prevSize: null
|
|||
|
|
};
|
|||
|
|
}, "data"),
|
|||
|
|
mounted: /* @__PURE__ */ __name(function mounted() {
|
|||
|
|
var _this = this;
|
|||
|
|
if (this.panels && this.panels.length) {
|
|||
|
|
var initialized = false;
|
|||
|
|
if (this.isStateful()) {
|
|||
|
|
initialized = this.restoreState();
|
|||
|
|
}
|
|||
|
|
if (!initialized) {
|
|||
|
|
var children = _toConsumableArray$2(this.$el.children).filter(function(child) {
|
|||
|
|
return child.getAttribute("data-pc-name") === "splitterpanel";
|
|||
|
|
});
|
|||
|
|
var _panelSizes = [];
|
|||
|
|
this.panels.map(function(panel, i) {
|
|||
|
|
var panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
|
|||
|
|
var panelSize = panelInitialSize || 100 / _this.panels.length;
|
|||
|
|
_panelSizes[i] = panelSize;
|
|||
|
|
children[i].style.flexBasis = "calc(" + panelSize + "% - " + (_this.panels.length - 1) * _this.gutterSize + "px)";
|
|||
|
|
});
|
|||
|
|
this.panelSizes = _panelSizes;
|
|||
|
|
this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "mounted"),
|
|||
|
|
beforeUnmount: /* @__PURE__ */ __name(function beforeUnmount() {
|
|||
|
|
this.clear();
|
|||
|
|
this.unbindMouseListeners();
|
|||
|
|
}, "beforeUnmount"),
|
|||
|
|
methods: {
|
|||
|
|
isSplitterPanel: /* @__PURE__ */ __name(function isSplitterPanel(child) {
|
|||
|
|
return child.type.name === "SplitterPanel";
|
|||
|
|
}, "isSplitterPanel"),
|
|||
|
|
onResizeStart: /* @__PURE__ */ __name(function onResizeStart(event, index, isKeyDown) {
|
|||
|
|
this.gutterElement = event.currentTarget || event.target.parentElement;
|
|||
|
|
this.size = this.horizontal ? getWidth(this.$el) : getHeight(this.$el);
|
|||
|
|
if (!isKeyDown) {
|
|||
|
|
this.dragging = true;
|
|||
|
|
this.startPos = this.layout === "horizontal" ? event.pageX || event.changedTouches[0].pageX : event.pageY || event.changedTouches[0].pageY;
|
|||
|
|
}
|
|||
|
|
this.prevPanelElement = this.gutterElement.previousElementSibling;
|
|||
|
|
this.nextPanelElement = this.gutterElement.nextElementSibling;
|
|||
|
|
if (isKeyDown) {
|
|||
|
|
this.prevPanelSize = this.horizontal ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true);
|
|||
|
|
this.nextPanelSize = this.horizontal ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true);
|
|||
|
|
} else {
|
|||
|
|
this.prevPanelSize = 100 * (this.horizontal ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true)) / this.size;
|
|||
|
|
this.nextPanelSize = 100 * (this.horizontal ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true)) / this.size;
|
|||
|
|
}
|
|||
|
|
this.prevPanelIndex = index;
|
|||
|
|
this.$emit("resizestart", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
sizes: this.panelSizes
|
|||
|
|
});
|
|||
|
|
this.$refs.gutter[index].setAttribute("data-p-gutter-resizing", true);
|
|||
|
|
this.$el.setAttribute("data-p-resizing", true);
|
|||
|
|
}, "onResizeStart"),
|
|||
|
|
onResize: /* @__PURE__ */ __name(function onResize(event, step, isKeyDown) {
|
|||
|
|
var newPos, newPrevPanelSize, newNextPanelSize;
|
|||
|
|
if (isKeyDown) {
|
|||
|
|
if (this.horizontal) {
|
|||
|
|
newPrevPanelSize = 100 * (this.prevPanelSize + step) / this.size;
|
|||
|
|
newNextPanelSize = 100 * (this.nextPanelSize - step) / this.size;
|
|||
|
|
} else {
|
|||
|
|
newPrevPanelSize = 100 * (this.prevPanelSize - step) / this.size;
|
|||
|
|
newNextPanelSize = 100 * (this.nextPanelSize + step) / this.size;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (this.horizontal) newPos = event.pageX * 100 / this.size - this.startPos * 100 / this.size;
|
|||
|
|
else newPos = event.pageY * 100 / this.size - this.startPos * 100 / this.size;
|
|||
|
|
newPrevPanelSize = this.prevPanelSize + newPos;
|
|||
|
|
newNextPanelSize = this.nextPanelSize - newPos;
|
|||
|
|
}
|
|||
|
|
if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
|
|||
|
|
this.prevPanelElement.style.flexBasis = "calc(" + newPrevPanelSize + "% - " + (this.panels.length - 1) * this.gutterSize + "px)";
|
|||
|
|
this.nextPanelElement.style.flexBasis = "calc(" + newNextPanelSize + "% - " + (this.panels.length - 1) * this.gutterSize + "px)";
|
|||
|
|
this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
|
|||
|
|
this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
|
|||
|
|
this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
|
|||
|
|
}
|
|||
|
|
this.$emit("resize", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
sizes: this.panelSizes
|
|||
|
|
});
|
|||
|
|
}, "onResize"),
|
|||
|
|
onResizeEnd: /* @__PURE__ */ __name(function onResizeEnd(event) {
|
|||
|
|
if (this.isStateful()) {
|
|||
|
|
this.saveState();
|
|||
|
|
}
|
|||
|
|
this.$emit("resizeend", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
sizes: this.panelSizes
|
|||
|
|
});
|
|||
|
|
this.$refs.gutter.forEach(function(gutter) {
|
|||
|
|
return gutter.setAttribute("data-p-gutter-resizing", false);
|
|||
|
|
});
|
|||
|
|
this.$el.setAttribute("data-p-resizing", false);
|
|||
|
|
this.clear();
|
|||
|
|
}, "onResizeEnd"),
|
|||
|
|
repeat: /* @__PURE__ */ __name(function repeat(event, index, step) {
|
|||
|
|
this.onResizeStart(event, index, true);
|
|||
|
|
this.onResize(event, step, true);
|
|||
|
|
}, "repeat"),
|
|||
|
|
setTimer: /* @__PURE__ */ __name(function setTimer(event, index, step) {
|
|||
|
|
var _this2 = this;
|
|||
|
|
if (!this.timer) {
|
|||
|
|
this.timer = setInterval(function() {
|
|||
|
|
_this2.repeat(event, index, step);
|
|||
|
|
}, 40);
|
|||
|
|
}
|
|||
|
|
}, "setTimer"),
|
|||
|
|
clearTimer: /* @__PURE__ */ __name(function clearTimer() {
|
|||
|
|
if (this.timer) {
|
|||
|
|
clearInterval(this.timer);
|
|||
|
|
this.timer = null;
|
|||
|
|
}
|
|||
|
|
}, "clearTimer"),
|
|||
|
|
onGutterKeyUp: /* @__PURE__ */ __name(function onGutterKeyUp() {
|
|||
|
|
this.clearTimer();
|
|||
|
|
this.onResizeEnd();
|
|||
|
|
}, "onGutterKeyUp"),
|
|||
|
|
onGutterKeyDown: /* @__PURE__ */ __name(function onGutterKeyDown(event, index) {
|
|||
|
|
switch (event.code) {
|
|||
|
|
case "ArrowLeft": {
|
|||
|
|
if (this.layout === "horizontal") {
|
|||
|
|
this.setTimer(event, index, this.step * -1);
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "ArrowRight": {
|
|||
|
|
if (this.layout === "horizontal") {
|
|||
|
|
this.setTimer(event, index, this.step);
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "ArrowDown": {
|
|||
|
|
if (this.layout === "vertical") {
|
|||
|
|
this.setTimer(event, index, this.step * -1);
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "ArrowUp": {
|
|||
|
|
if (this.layout === "vertical") {
|
|||
|
|
this.setTimer(event, index, this.step);
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "onGutterKeyDown"),
|
|||
|
|
onGutterMouseDown: /* @__PURE__ */ __name(function onGutterMouseDown(event, index) {
|
|||
|
|
this.onResizeStart(event, index);
|
|||
|
|
this.bindMouseListeners();
|
|||
|
|
}, "onGutterMouseDown"),
|
|||
|
|
onGutterTouchStart: /* @__PURE__ */ __name(function onGutterTouchStart(event, index) {
|
|||
|
|
this.onResizeStart(event, index);
|
|||
|
|
this.bindTouchListeners();
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onGutterTouchStart"),
|
|||
|
|
onGutterTouchMove: /* @__PURE__ */ __name(function onGutterTouchMove(event) {
|
|||
|
|
this.onResize(event);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onGutterTouchMove"),
|
|||
|
|
onGutterTouchEnd: /* @__PURE__ */ __name(function onGutterTouchEnd(event) {
|
|||
|
|
this.onResizeEnd(event);
|
|||
|
|
this.unbindTouchListeners();
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onGutterTouchEnd"),
|
|||
|
|
bindMouseListeners: /* @__PURE__ */ __name(function bindMouseListeners() {
|
|||
|
|
var _this3 = this;
|
|||
|
|
if (!this.mouseMoveListener) {
|
|||
|
|
this.mouseMoveListener = function(event) {
|
|||
|
|
return _this3.onResize(event);
|
|||
|
|
};
|
|||
|
|
document.addEventListener("mousemove", this.mouseMoveListener);
|
|||
|
|
}
|
|||
|
|
if (!this.mouseUpListener) {
|
|||
|
|
this.mouseUpListener = function(event) {
|
|||
|
|
_this3.onResizeEnd(event);
|
|||
|
|
_this3.unbindMouseListeners();
|
|||
|
|
};
|
|||
|
|
document.addEventListener("mouseup", this.mouseUpListener);
|
|||
|
|
}
|
|||
|
|
}, "bindMouseListeners"),
|
|||
|
|
bindTouchListeners: /* @__PURE__ */ __name(function bindTouchListeners() {
|
|||
|
|
var _this4 = this;
|
|||
|
|
if (!this.touchMoveListener) {
|
|||
|
|
this.touchMoveListener = function(event) {
|
|||
|
|
return _this4.onResize(event.changedTouches[0]);
|
|||
|
|
};
|
|||
|
|
document.addEventListener("touchmove", this.touchMoveListener);
|
|||
|
|
}
|
|||
|
|
if (!this.touchEndListener) {
|
|||
|
|
this.touchEndListener = function(event) {
|
|||
|
|
_this4.resizeEnd(event);
|
|||
|
|
_this4.unbindTouchListeners();
|
|||
|
|
};
|
|||
|
|
document.addEventListener("touchend", this.touchEndListener);
|
|||
|
|
}
|
|||
|
|
}, "bindTouchListeners"),
|
|||
|
|
validateResize: /* @__PURE__ */ __name(function validateResize(newPrevPanelSize, newNextPanelSize) {
|
|||
|
|
if (newPrevPanelSize > 100 || newPrevPanelSize < 0) return false;
|
|||
|
|
if (newNextPanelSize > 100 || newNextPanelSize < 0) return false;
|
|||
|
|
var prevPanelMinSize = getVNodeProp(this.panels[this.prevPanelIndex], "minSize");
|
|||
|
|
if (this.panels[this.prevPanelIndex].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var newPanelMinSize = getVNodeProp(this.panels[this.prevPanelIndex + 1], "minSize");
|
|||
|
|
if (this.panels[this.prevPanelIndex + 1].props && newPanelMinSize && newPanelMinSize > newNextPanelSize) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
}, "validateResize"),
|
|||
|
|
unbindMouseListeners: /* @__PURE__ */ __name(function unbindMouseListeners() {
|
|||
|
|
if (this.mouseMoveListener) {
|
|||
|
|
document.removeEventListener("mousemove", this.mouseMoveListener);
|
|||
|
|
this.mouseMoveListener = null;
|
|||
|
|
}
|
|||
|
|
if (this.mouseUpListener) {
|
|||
|
|
document.removeEventListener("mouseup", this.mouseUpListener);
|
|||
|
|
this.mouseUpListener = null;
|
|||
|
|
}
|
|||
|
|
}, "unbindMouseListeners"),
|
|||
|
|
unbindTouchListeners: /* @__PURE__ */ __name(function unbindTouchListeners() {
|
|||
|
|
if (this.touchMoveListener) {
|
|||
|
|
document.removeEventListener("touchmove", this.touchMoveListener);
|
|||
|
|
this.touchMoveListener = null;
|
|||
|
|
}
|
|||
|
|
if (this.touchEndListener) {
|
|||
|
|
document.removeEventListener("touchend", this.touchEndListener);
|
|||
|
|
this.touchEndListener = null;
|
|||
|
|
}
|
|||
|
|
}, "unbindTouchListeners"),
|
|||
|
|
clear: /* @__PURE__ */ __name(function clear() {
|
|||
|
|
this.dragging = false;
|
|||
|
|
this.size = null;
|
|||
|
|
this.startPos = null;
|
|||
|
|
this.prevPanelElement = null;
|
|||
|
|
this.nextPanelElement = null;
|
|||
|
|
this.prevPanelSize = null;
|
|||
|
|
this.nextPanelSize = null;
|
|||
|
|
this.gutterElement = null;
|
|||
|
|
this.prevPanelIndex = null;
|
|||
|
|
}, "clear"),
|
|||
|
|
isStateful: /* @__PURE__ */ __name(function isStateful() {
|
|||
|
|
return this.stateKey != null;
|
|||
|
|
}, "isStateful"),
|
|||
|
|
getStorage: /* @__PURE__ */ __name(function getStorage() {
|
|||
|
|
switch (this.stateStorage) {
|
|||
|
|
case "local":
|
|||
|
|
return window.localStorage;
|
|||
|
|
case "session":
|
|||
|
|
return window.sessionStorage;
|
|||
|
|
default:
|
|||
|
|
throw new Error(this.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
|
|||
|
|
}
|
|||
|
|
}, "getStorage"),
|
|||
|
|
saveState: /* @__PURE__ */ __name(function saveState() {
|
|||
|
|
if (isArray(this.panelSizes)) {
|
|||
|
|
this.getStorage().setItem(this.stateKey, JSON.stringify(this.panelSizes));
|
|||
|
|
}
|
|||
|
|
}, "saveState"),
|
|||
|
|
restoreState: /* @__PURE__ */ __name(function restoreState() {
|
|||
|
|
var _this5 = this;
|
|||
|
|
var storage = this.getStorage();
|
|||
|
|
var stateString = storage.getItem(this.stateKey);
|
|||
|
|
if (stateString) {
|
|||
|
|
this.panelSizes = JSON.parse(stateString);
|
|||
|
|
var children = _toConsumableArray$2(this.$el.children).filter(function(child) {
|
|||
|
|
return child.getAttribute("data-pc-name") === "splitterpanel";
|
|||
|
|
});
|
|||
|
|
children.forEach(function(child, i) {
|
|||
|
|
child.style.flexBasis = "calc(" + _this5.panelSizes[i] + "% - " + (_this5.panels.length - 1) * _this5.gutterSize + "px)";
|
|||
|
|
});
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}, "restoreState")
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
panels: /* @__PURE__ */ __name(function panels() {
|
|||
|
|
var _this6 = this;
|
|||
|
|
var panels2 = [];
|
|||
|
|
this.$slots["default"]().forEach(function(child) {
|
|||
|
|
if (_this6.isSplitterPanel(child)) {
|
|||
|
|
panels2.push(child);
|
|||
|
|
} else if (child.children instanceof Array) {
|
|||
|
|
child.children.forEach(function(nestedChild) {
|
|||
|
|
if (_this6.isSplitterPanel(nestedChild)) {
|
|||
|
|
panels2.push(nestedChild);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return panels2;
|
|||
|
|
}, "panels"),
|
|||
|
|
gutterStyle: /* @__PURE__ */ __name(function gutterStyle() {
|
|||
|
|
if (this.horizontal) return {
|
|||
|
|
width: this.gutterSize + "px"
|
|||
|
|
};
|
|||
|
|
else return {
|
|||
|
|
height: this.gutterSize + "px"
|
|||
|
|
};
|
|||
|
|
}, "gutterStyle"),
|
|||
|
|
horizontal: /* @__PURE__ */ __name(function horizontal() {
|
|||
|
|
return this.layout === "horizontal";
|
|||
|
|
}, "horizontal"),
|
|||
|
|
getPTOptions: /* @__PURE__ */ __name(function getPTOptions() {
|
|||
|
|
var _this$$parentInstance;
|
|||
|
|
return {
|
|||
|
|
context: {
|
|||
|
|
nested: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.nestedState
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}, "getPTOptions")
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var _hoisted_1$f = ["onMousedown", "onTouchstart", "onTouchmove", "onTouchend"];
|
|||
|
|
var _hoisted_2$c = ["aria-orientation", "aria-valuenow", "onKeydown"];
|
|||
|
|
function render$c(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("root"),
|
|||
|
|
style: _ctx.sx("root"),
|
|||
|
|
"data-p-resizing": false
|
|||
|
|
}, _ctx.ptmi("root", $options.getPTOptions)), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.panels, function(panel, i) {
|
|||
|
|
return openBlock(), createElementBlock(Fragment, {
|
|||
|
|
key: i
|
|||
|
|
}, [(openBlock(), createBlock(resolveDynamicComponent(panel), {
|
|||
|
|
tabindex: "-1"
|
|||
|
|
})), i !== $options.panels.length - 1 ? (openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
ref_for: true,
|
|||
|
|
ref: "gutter",
|
|||
|
|
"class": _ctx.cx("gutter"),
|
|||
|
|
role: "separator",
|
|||
|
|
tabindex: "-1",
|
|||
|
|
onMousedown: /* @__PURE__ */ __name(function onMousedown($event) {
|
|||
|
|
return $options.onGutterMouseDown($event, i);
|
|||
|
|
}, "onMousedown"),
|
|||
|
|
onTouchstart: /* @__PURE__ */ __name(function onTouchstart($event) {
|
|||
|
|
return $options.onGutterTouchStart($event, i);
|
|||
|
|
}, "onTouchstart"),
|
|||
|
|
onTouchmove: /* @__PURE__ */ __name(function onTouchmove($event) {
|
|||
|
|
return $options.onGutterTouchMove($event, i);
|
|||
|
|
}, "onTouchmove"),
|
|||
|
|
onTouchend: /* @__PURE__ */ __name(function onTouchend($event) {
|
|||
|
|
return $options.onGutterTouchEnd($event, i);
|
|||
|
|
}, "onTouchend"),
|
|||
|
|
"data-p-gutter-resizing": false
|
|||
|
|
}, _ctx.ptm("gutter")), [createBaseVNode("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("gutterHandle"),
|
|||
|
|
tabindex: "0",
|
|||
|
|
style: [$options.gutterStyle],
|
|||
|
|
"aria-orientation": _ctx.layout,
|
|||
|
|
"aria-valuenow": $data.prevSize,
|
|||
|
|
onKeyup: _cache[0] || (_cache[0] = function() {
|
|||
|
|
return $options.onGutterKeyUp && $options.onGutterKeyUp.apply($options, arguments);
|
|||
|
|
}),
|
|||
|
|
onKeydown: /* @__PURE__ */ __name(function onKeydown($event) {
|
|||
|
|
return $options.onGutterKeyDown($event, i);
|
|||
|
|
}, "onKeydown"),
|
|||
|
|
ref_for: true
|
|||
|
|
}, _ctx.ptm("gutterHandle")), null, 16, _hoisted_2$c)], 16, _hoisted_1$f)) : createCommentVNode("", true)], 64);
|
|||
|
|
}), 128))], 16);
|
|||
|
|
}
|
|||
|
|
__name(render$c, "render$c");
|
|||
|
|
script$a.render = render$c;
|
|||
|
|
var classes$7 = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root3(_ref) {
|
|||
|
|
var instance = _ref.instance;
|
|||
|
|
return ["p-splitterpanel", {
|
|||
|
|
"p-splitterpanel-nested": instance.isNested
|
|||
|
|
}];
|
|||
|
|
}, "root")
|
|||
|
|
};
|
|||
|
|
var SplitterPanelStyle = BaseStyle.extend({
|
|||
|
|
name: "splitterpanel",
|
|||
|
|
classes: classes$7
|
|||
|
|
});
|
|||
|
|
var script$1$7 = {
|
|||
|
|
name: "BaseSplitterPanel",
|
|||
|
|
"extends": script$e,
|
|||
|
|
props: {
|
|||
|
|
size: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
minSize: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
style: SplitterPanelStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide4() {
|
|||
|
|
return {
|
|||
|
|
$pcSplitterPanel: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
var script$9 = {
|
|||
|
|
name: "SplitterPanel",
|
|||
|
|
"extends": script$1$7,
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
data: /* @__PURE__ */ __name(function data2() {
|
|||
|
|
return {
|
|||
|
|
nestedState: null
|
|||
|
|
};
|
|||
|
|
}, "data"),
|
|||
|
|
computed: {
|
|||
|
|
isNested: /* @__PURE__ */ __name(function isNested() {
|
|||
|
|
var _this = this;
|
|||
|
|
return this.$slots["default"]().some(function(child) {
|
|||
|
|
_this.nestedState = child.type.name === "Splitter" ? true : null;
|
|||
|
|
return _this.nestedState;
|
|||
|
|
});
|
|||
|
|
}, "isNested"),
|
|||
|
|
getPTOptions: /* @__PURE__ */ __name(function getPTOptions2() {
|
|||
|
|
return {
|
|||
|
|
context: {
|
|||
|
|
nested: this.isNested
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}, "getPTOptions")
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
function render$b(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
ref: "container",
|
|||
|
|
"class": _ctx.cx("root")
|
|||
|
|
}, _ctx.ptmi("root", $options.getPTOptions)), [renderSlot(_ctx.$slots, "default")], 16);
|
|||
|
|
}
|
|||
|
|
__name(render$b, "render$b");
|
|||
|
|
script$9.render = render$b;
|
|||
|
|
const _sfc_main$h = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "LiteGraphCanvasSplitterOverlay",
|
|||
|
|
setup(__props) {
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const sidebarLocation = computed(
|
|||
|
|
() => settingStore.get("Comfy.Sidebar.Location")
|
|||
|
|
);
|
|||
|
|
const sidebarPanelVisible = computed(
|
|||
|
|
() => useWorkspaceStore().sidebarTab.activeSidebarTab !== null
|
|||
|
|
);
|
|||
|
|
const gutterClass = computed(() => {
|
|||
|
|
return sidebarPanelVisible.value ? "" : "gutter-hidden";
|
|||
|
|
});
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createBlock(unref(script$a), {
|
|||
|
|
class: "splitter-overlay",
|
|||
|
|
"pt:gutter": gutterClass.value
|
|||
|
|
}, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
sidebarLocation.value === "left" ? withDirectives((openBlock(), createBlock(unref(script$9), {
|
|||
|
|
key: 0,
|
|||
|
|
class: "side-bar-panel",
|
|||
|
|
minSize: 10,
|
|||
|
|
size: 20
|
|||
|
|
}, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
renderSlot(_ctx.$slots, "side-bar-panel", {}, void 0, true)
|
|||
|
|
]),
|
|||
|
|
_: 3
|
|||
|
|
}, 512)), [
|
|||
|
|
[vShow, sidebarPanelVisible.value]
|
|||
|
|
]) : createCommentVNode("", true),
|
|||
|
|
createVNode(unref(script$9), {
|
|||
|
|
class: "graph-canvas-panel relative",
|
|||
|
|
size: 100
|
|||
|
|
}, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
renderSlot(_ctx.$slots, "graph-canvas-panel", {}, void 0, true)
|
|||
|
|
]),
|
|||
|
|
_: 3
|
|||
|
|
}),
|
|||
|
|
sidebarLocation.value === "right" ? withDirectives((openBlock(), createBlock(unref(script$9), {
|
|||
|
|
key: 1,
|
|||
|
|
class: "side-bar-panel",
|
|||
|
|
minSize: 10,
|
|||
|
|
size: 20
|
|||
|
|
}, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
renderSlot(_ctx.$slots, "side-bar-panel", {}, void 0, true)
|
|||
|
|
]),
|
|||
|
|
_: 3
|
|||
|
|
}, 512)), [
|
|||
|
|
[vShow, sidebarPanelVisible.value]
|
|||
|
|
]) : createCommentVNode("", true)
|
|||
|
|
]),
|
|||
|
|
_: 3
|
|||
|
|
}, 8, ["pt:gutter"]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const LiteGraphCanvasSplitterOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-b9df3042"]]);
|
|||
|
|
var theme$6 = /* @__PURE__ */ __name(function theme3(_ref) {
|
|||
|
|
var dt = _ref.dt;
|
|||
|
|
return "\n.p-autocomplete {\n display: inline-flex;\n}\n\n.p-autocomplete-loader {\n position: absolute;\n top: 50%;\n margin-top: -0.5rem;\n right: ".concat(dt("autocomplete.padding.x"), ";\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {\n right: calc(").concat(dt("autocomplete.dropdown.width"), " + ").concat(dt("autocomplete.padding.x"), ");\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {\n flex: 1 1 auto;\n width: 1%;\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.p-autocomplete-dropdown {\n cursor: pointer;\n display: inline-flex;\n cursor: pointer;\n user-select: none;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n width: ").concat(dt("autocomplete.dropdown.width"), ";\n border-top-right-radius: ").concat(dt("autocomplete.dropdown.border.radius"), ";\n border-bottom-right-radius: ").concat(dt("autocomplete.dropdown.border.radius"), ";\n background: ").concat(dt("autocomplete.dropdown.background"), ";\n border: 1px solid ").concat(dt("autocomplete.dropdown.border.color"), ";\n border-left: 0 none;\n color: ").concat(dt("autocomplete.dropdown.color"), ";\n transition: background ").concat(dt("autocomplete.transition.duration"), ", color ").concat(dt("autocomplete.transition.duration"), ", border-color ").concat(dt("autocomplete.transition.duration"), ", outline-color ").concat(dt("autocomplete.transition.duration"), ", box-shadow ").concat(dt("autocomplete.transition.duration"), ";\n outline-color: transparent;\n}\n\n.p-autocomplete-dropdown:not(:disabled):hover {\n background: ").concat(dt("autocomplete.dropdown.hover.background"), ";\n border-color: ").concat(dt("autocomplete.dropdown.hover.border.color"), ";\n color: ").concat(dt("autocomplete.dropdown.hover.color"), ";\n}\n\n.p-autocomplete-dropdown:not(:disabled):active {\n background: ").concat(dt("autocomplete.dropdown.active.background"), ";\n border-color: ").concat(dt("autocomplete.dropdown.active.border.color"), ";\n color: ").concat(dt("autocomplete.dropdown.active.color"), ";\n}\n\n.p-autocomplete-dropdown:focus-visible {\n box-shadow: ").concat(dt("autocomplete.dropdown.focus.ring.shadow"), ";\n outline: ").concat(dt("autocomplete.dropdown.focus.ring.width"), " ").concat(dt("autocomplete.dropdown.focus.ring.style"), " ").concat(dt("autocomplete.dropdown.focus.ring.color"), ";\n outline-offset: ").concat(dt("autocomplete.dropdown.focus.ring.offset"), ";\n}\n\n.p-autocomplete .p-autocomplete-overlay {\n min-width: 100%;\n}\n\n.p-autocomplete-overlay {\n position: absolute;\n overflow: auto;\n top: 0;\n left: 0;\n background: ").concat(dt("autocomplete.overlay.background"), ";\n color: ").concat(dt("autocomplete.overlay.color"), ";\n border: 1px solid ").concat(dt("autocomplete.overlay.border.color"), ";\n border-radius: ").concat(dt("autocomplete.overlay.border.radius"), ";\n box-shadow: ").concat(dt("autocomplete.overlay.shadow"), ";\n}\n\n.p-autocomplete-list {\n margin: 0;\n padding: 0;\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: ").concat(dt("autocomplete.list.gap"), ";\n padding: ").concat(dt("autocomplete.list.padding"), ";\n}\n\n.p-autocomplete-option {\n cursor: pointer;\n white-space: nowrap;\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n padding: ").concat(dt("autocomplete.option.padding"), ";\n border: 0 none;\n color: ").concat(dt("autocomplete.option.color"), ";\n background: transparent;\n transition: background ").concat(dt("autocomplete.transition.duration"), ", color ").concat(dt("autocomplete.transition.duration"), ", border-color ").concat(dt("autocomplete.transition.duration"), ";\n border-radius: "
|
|||
|
|
}, "theme");
|
|||
|
|
var inlineStyles$3 = {
|
|||
|
|
root: {
|
|||
|
|
position: "relative"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var classes$6 = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root4(_ref2) {
|
|||
|
|
var instance = _ref2.instance, props = _ref2.props;
|
|||
|
|
return ["p-autocomplete p-component p-inputwrapper", {
|
|||
|
|
"p-disabled": props.disabled,
|
|||
|
|
"p-invalid": props.invalid,
|
|||
|
|
"p-focus": instance.focused,
|
|||
|
|
"p-inputwrapper-filled": props.modelValue || isNotEmpty(instance.inputValue),
|
|||
|
|
"p-inputwrapper-focus": instance.focused,
|
|||
|
|
"p-autocomplete-open": instance.overlayVisible,
|
|||
|
|
"p-autocomplete-fluid": instance.hasFluid
|
|||
|
|
}];
|
|||
|
|
}, "root"),
|
|||
|
|
pcInput: "p-autocomplete-input",
|
|||
|
|
inputMultiple: /* @__PURE__ */ __name(function inputMultiple(_ref3) {
|
|||
|
|
var props = _ref3.props, instance = _ref3.instance;
|
|||
|
|
return ["p-autocomplete-input-multiple", {
|
|||
|
|
"p-variant-filled": props.variant ? props.variant === "filled" : instance.$primevue.config.inputStyle === "filled" || instance.$primevue.config.inputVariant === "filled"
|
|||
|
|
}];
|
|||
|
|
}, "inputMultiple"),
|
|||
|
|
chipItem: /* @__PURE__ */ __name(function chipItem(_ref4) {
|
|||
|
|
var instance = _ref4.instance, i = _ref4.i;
|
|||
|
|
return ["p-autocomplete-chip-item", {
|
|||
|
|
"p-focus": instance.focusedMultipleOptionIndex === i
|
|||
|
|
}];
|
|||
|
|
}, "chipItem"),
|
|||
|
|
pcChip: "p-autocomplete-chip",
|
|||
|
|
chipIcon: "p-autocomplete-chip-icon",
|
|||
|
|
inputChip: "p-autocomplete-input-chip",
|
|||
|
|
loader: "p-autocomplete-loader",
|
|||
|
|
dropdown: "p-autocomplete-dropdown",
|
|||
|
|
overlay: "p-autocomplete-overlay p-component",
|
|||
|
|
list: "p-autocomplete-list",
|
|||
|
|
optionGroup: "p-autocomplete-option-group",
|
|||
|
|
option: /* @__PURE__ */ __name(function option(_ref5) {
|
|||
|
|
var instance = _ref5.instance, _option = _ref5.option, i = _ref5.i, getItemOptions = _ref5.getItemOptions;
|
|||
|
|
return ["p-autocomplete-option", {
|
|||
|
|
"p-autocomplete-option-selected": instance.isSelected(_option),
|
|||
|
|
"p-focus": instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
|
|||
|
|
"p-disabled": instance.isOptionDisabled(_option)
|
|||
|
|
}];
|
|||
|
|
}, "option"),
|
|||
|
|
emptyMessage: "p-autocomplete-empty-message"
|
|||
|
|
};
|
|||
|
|
var AutoCompleteStyle = BaseStyle.extend({
|
|||
|
|
name: "autocomplete",
|
|||
|
|
theme: theme$6,
|
|||
|
|
classes: classes$6,
|
|||
|
|
inlineStyles: inlineStyles$3
|
|||
|
|
});
|
|||
|
|
var script$1$6 = {
|
|||
|
|
name: "BaseAutoComplete",
|
|||
|
|
"extends": script$e,
|
|||
|
|
props: {
|
|||
|
|
modelValue: null,
|
|||
|
|
suggestions: {
|
|||
|
|
type: Array,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
optionLabel: null,
|
|||
|
|
optionDisabled: null,
|
|||
|
|
optionGroupLabel: null,
|
|||
|
|
optionGroupChildren: null,
|
|||
|
|
scrollHeight: {
|
|||
|
|
type: String,
|
|||
|
|
"default": "14rem"
|
|||
|
|
},
|
|||
|
|
dropdown: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
dropdownMode: {
|
|||
|
|
type: String,
|
|||
|
|
"default": "blank"
|
|||
|
|
},
|
|||
|
|
multiple: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
loading: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
variant: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
invalid: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
placeholder: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
dataKey: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
minLength: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 1
|
|||
|
|
},
|
|||
|
|
delay: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 300
|
|||
|
|
},
|
|||
|
|
appendTo: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
"default": "body"
|
|||
|
|
},
|
|||
|
|
forceSelection: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
completeOnFocus: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
inputId: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
inputStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
inputClass: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
panelStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
panelClass: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
overlayStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
overlayClass: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
dropdownIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
dropdownClass: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
loader: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
loadingIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
removeTokenIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
chipIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
virtualScrollerOptions: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
autoOptionFocus: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
selectOnFocus: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
focusOnHover: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": true
|
|||
|
|
},
|
|||
|
|
searchLocale: {
|
|||
|
|
type: String,
|
|||
|
|
"default": void 0
|
|||
|
|
},
|
|||
|
|
searchMessage: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
selectionMessage: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
emptySelectionMessage: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
emptySearchMessage: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
tabindex: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 0
|
|||
|
|
},
|
|||
|
|
typeahead: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": true
|
|||
|
|
},
|
|||
|
|
ariaLabel: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
ariaLabelledby: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
fluid: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
style: AutoCompleteStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide5() {
|
|||
|
|
return {
|
|||
|
|
$pcAutoComplete: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
function _typeof$1$1(o) {
|
|||
|
|
"@babel/helpers - typeof";
|
|||
|
|
return _typeof$1$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
|
|||
|
|
return typeof o2;
|
|||
|
|
} : function(o2) {
|
|||
|
|
return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
|
|||
|
|
}, _typeof$1$1(o);
|
|||
|
|
}
|
|||
|
|
__name(_typeof$1$1, "_typeof$1$1");
|
|||
|
|
function _toConsumableArray$1(r) {
|
|||
|
|
return _arrayWithoutHoles$1(r) || _iterableToArray$1(r) || _unsupportedIterableToArray$1(r) || _nonIterableSpread$1();
|
|||
|
|
}
|
|||
|
|
__name(_toConsumableArray$1, "_toConsumableArray$1");
|
|||
|
|
function _nonIterableSpread$1() {
|
|||
|
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|||
|
|
}
|
|||
|
|
__name(_nonIterableSpread$1, "_nonIterableSpread$1");
|
|||
|
|
function _unsupportedIterableToArray$1(r, a) {
|
|||
|
|
if (r) {
|
|||
|
|
if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
|
|||
|
|
var t = {}.toString.call(r).slice(8, -1);
|
|||
|
|
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
__name(_unsupportedIterableToArray$1, "_unsupportedIterableToArray$1");
|
|||
|
|
function _iterableToArray$1(r) {
|
|||
|
|
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|||
|
|
}
|
|||
|
|
__name(_iterableToArray$1, "_iterableToArray$1");
|
|||
|
|
function _arrayWithoutHoles$1(r) {
|
|||
|
|
if (Array.isArray(r)) return _arrayLikeToArray$1(r);
|
|||
|
|
}
|
|||
|
|
__name(_arrayWithoutHoles$1, "_arrayWithoutHoles$1");
|
|||
|
|
function _arrayLikeToArray$1(r, a) {
|
|||
|
|
(null == a || a > r.length) && (a = r.length);
|
|||
|
|
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|||
|
|
return n;
|
|||
|
|
}
|
|||
|
|
__name(_arrayLikeToArray$1, "_arrayLikeToArray$1");
|
|||
|
|
var script$8 = {
|
|||
|
|
name: "AutoComplete",
|
|||
|
|
"extends": script$1$6,
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
emits: ["update:modelValue", "change", "focus", "blur", "item-select", "item-unselect", "option-select", "option-unselect", "dropdown-click", "clear", "complete", "before-show", "before-hide", "show", "hide"],
|
|||
|
|
inject: {
|
|||
|
|
$pcFluid: {
|
|||
|
|
"default": null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
outsideClickListener: null,
|
|||
|
|
resizeListener: null,
|
|||
|
|
scrollHandler: null,
|
|||
|
|
overlay: null,
|
|||
|
|
virtualScroller: null,
|
|||
|
|
searchTimeout: null,
|
|||
|
|
dirty: false,
|
|||
|
|
data: /* @__PURE__ */ __name(function data3() {
|
|||
|
|
return {
|
|||
|
|
id: this.$attrs.id,
|
|||
|
|
clicked: false,
|
|||
|
|
focused: false,
|
|||
|
|
focusedOptionIndex: -1,
|
|||
|
|
focusedMultipleOptionIndex: -1,
|
|||
|
|
overlayVisible: false,
|
|||
|
|
searching: false
|
|||
|
|
};
|
|||
|
|
}, "data"),
|
|||
|
|
watch: {
|
|||
|
|
"$attrs.id": /* @__PURE__ */ __name(function $attrsId(newValue) {
|
|||
|
|
this.id = newValue || UniqueComponentId();
|
|||
|
|
}, "$attrsId"),
|
|||
|
|
suggestions: /* @__PURE__ */ __name(function suggestions() {
|
|||
|
|
if (this.searching) {
|
|||
|
|
this.show();
|
|||
|
|
this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
|
|||
|
|
this.searching = false;
|
|||
|
|
}
|
|||
|
|
this.autoUpdateModel();
|
|||
|
|
}, "suggestions")
|
|||
|
|
},
|
|||
|
|
mounted: /* @__PURE__ */ __name(function mounted2() {
|
|||
|
|
this.id = this.id || UniqueComponentId();
|
|||
|
|
this.autoUpdateModel();
|
|||
|
|
}, "mounted"),
|
|||
|
|
updated: /* @__PURE__ */ __name(function updated() {
|
|||
|
|
if (this.overlayVisible) {
|
|||
|
|
this.alignOverlay();
|
|||
|
|
}
|
|||
|
|
}, "updated"),
|
|||
|
|
beforeUnmount: /* @__PURE__ */ __name(function beforeUnmount2() {
|
|||
|
|
this.unbindOutsideClickListener();
|
|||
|
|
this.unbindResizeListener();
|
|||
|
|
if (this.scrollHandler) {
|
|||
|
|
this.scrollHandler.destroy();
|
|||
|
|
this.scrollHandler = null;
|
|||
|
|
}
|
|||
|
|
if (this.overlay) {
|
|||
|
|
ZIndex.clear(this.overlay);
|
|||
|
|
this.overlay = null;
|
|||
|
|
}
|
|||
|
|
}, "beforeUnmount"),
|
|||
|
|
methods: {
|
|||
|
|
getOptionIndex: /* @__PURE__ */ __name(function getOptionIndex(index, fn) {
|
|||
|
|
return this.virtualScrollerDisabled ? index : fn && fn(index)["index"];
|
|||
|
|
}, "getOptionIndex"),
|
|||
|
|
getOptionLabel: /* @__PURE__ */ __name(function getOptionLabel(option2) {
|
|||
|
|
return this.optionLabel ? resolveFieldData(option2, this.optionLabel) : option2;
|
|||
|
|
}, "getOptionLabel"),
|
|||
|
|
getOptionValue: /* @__PURE__ */ __name(function getOptionValue(option2) {
|
|||
|
|
return option2;
|
|||
|
|
}, "getOptionValue"),
|
|||
|
|
getOptionRenderKey: /* @__PURE__ */ __name(function getOptionRenderKey(option2, index) {
|
|||
|
|
return (this.dataKey ? resolveFieldData(option2, this.dataKey) : this.getOptionLabel(option2)) + "_" + index;
|
|||
|
|
}, "getOptionRenderKey"),
|
|||
|
|
getPTOptions: /* @__PURE__ */ __name(function getPTOptions3(option2, itemOptions, index, key) {
|
|||
|
|
return this.ptm(key, {
|
|||
|
|
context: {
|
|||
|
|
selected: this.isSelected(option2),
|
|||
|
|
focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
|
|||
|
|
disabled: this.isOptionDisabled(option2)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, "getPTOptions"),
|
|||
|
|
isOptionDisabled: /* @__PURE__ */ __name(function isOptionDisabled(option2) {
|
|||
|
|
return this.optionDisabled ? resolveFieldData(option2, this.optionDisabled) : false;
|
|||
|
|
}, "isOptionDisabled"),
|
|||
|
|
isOptionGroup: /* @__PURE__ */ __name(function isOptionGroup(option2) {
|
|||
|
|
return this.optionGroupLabel && option2.optionGroup && option2.group;
|
|||
|
|
}, "isOptionGroup"),
|
|||
|
|
getOptionGroupLabel: /* @__PURE__ */ __name(function getOptionGroupLabel(optionGroup) {
|
|||
|
|
return resolveFieldData(optionGroup, this.optionGroupLabel);
|
|||
|
|
}, "getOptionGroupLabel"),
|
|||
|
|
getOptionGroupChildren: /* @__PURE__ */ __name(function getOptionGroupChildren(optionGroup) {
|
|||
|
|
return resolveFieldData(optionGroup, this.optionGroupChildren);
|
|||
|
|
}, "getOptionGroupChildren"),
|
|||
|
|
getAriaPosInset: /* @__PURE__ */ __name(function getAriaPosInset(index) {
|
|||
|
|
var _this = this;
|
|||
|
|
return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(function(option2) {
|
|||
|
|
return _this.isOptionGroup(option2);
|
|||
|
|
}).length : index) + 1;
|
|||
|
|
}, "getAriaPosInset"),
|
|||
|
|
show: /* @__PURE__ */ __name(function show(isFocus) {
|
|||
|
|
this.$emit("before-show");
|
|||
|
|
this.dirty = true;
|
|||
|
|
this.overlayVisible = true;
|
|||
|
|
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
|
|||
|
|
isFocus && focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
|
|||
|
|
}, "show"),
|
|||
|
|
hide: /* @__PURE__ */ __name(function hide(isFocus) {
|
|||
|
|
var _this2 = this;
|
|||
|
|
var _hide = /* @__PURE__ */ __name(function _hide2() {
|
|||
|
|
_this2.$emit("before-hide");
|
|||
|
|
_this2.dirty = isFocus;
|
|||
|
|
_this2.overlayVisible = false;
|
|||
|
|
_this2.clicked = false;
|
|||
|
|
_this2.focusedOptionIndex = -1;
|
|||
|
|
isFocus && focus(_this2.multiple ? _this2.$refs.focusInput : _this2.$refs.focusInput.$el);
|
|||
|
|
}, "_hide");
|
|||
|
|
setTimeout(function() {
|
|||
|
|
_hide();
|
|||
|
|
}, 0);
|
|||
|
|
}, "hide"),
|
|||
|
|
onFocus: /* @__PURE__ */ __name(function onFocus(event) {
|
|||
|
|
if (this.disabled) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!this.dirty && this.completeOnFocus) {
|
|||
|
|
this.search(event, event.target.value, "focus");
|
|||
|
|
}
|
|||
|
|
this.dirty = true;
|
|||
|
|
this.focused = true;
|
|||
|
|
if (this.overlayVisible) {
|
|||
|
|
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
|
|||
|
|
this.scrollInView(this.focusedOptionIndex);
|
|||
|
|
}
|
|||
|
|
this.$emit("focus", event);
|
|||
|
|
}, "onFocus"),
|
|||
|
|
onBlur: /* @__PURE__ */ __name(function onBlur(event) {
|
|||
|
|
this.dirty = false;
|
|||
|
|
this.focused = false;
|
|||
|
|
this.focusedOptionIndex = -1;
|
|||
|
|
this.$emit("blur", event);
|
|||
|
|
}, "onBlur"),
|
|||
|
|
onKeyDown: /* @__PURE__ */ __name(function onKeyDown(event) {
|
|||
|
|
if (this.disabled) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
switch (event.code) {
|
|||
|
|
case "ArrowDown":
|
|||
|
|
this.onArrowDownKey(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowUp":
|
|||
|
|
this.onArrowUpKey(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowLeft":
|
|||
|
|
this.onArrowLeftKey(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowRight":
|
|||
|
|
this.onArrowRightKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Home":
|
|||
|
|
this.onHomeKey(event);
|
|||
|
|
break;
|
|||
|
|
case "End":
|
|||
|
|
this.onEndKey(event);
|
|||
|
|
break;
|
|||
|
|
case "PageDown":
|
|||
|
|
this.onPageDownKey(event);
|
|||
|
|
break;
|
|||
|
|
case "PageUp":
|
|||
|
|
this.onPageUpKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Enter":
|
|||
|
|
case "NumpadEnter":
|
|||
|
|
this.onEnterKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Escape":
|
|||
|
|
this.onEscapeKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Tab":
|
|||
|
|
this.onTabKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Backspace":
|
|||
|
|
this.onBackspaceKey(event);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
this.clicked = false;
|
|||
|
|
}, "onKeyDown"),
|
|||
|
|
onInput: /* @__PURE__ */ __name(function onInput(event) {
|
|||
|
|
var _this3 = this;
|
|||
|
|
if (this.typeahead) {
|
|||
|
|
if (this.searchTimeout) {
|
|||
|
|
clearTimeout(this.searchTimeout);
|
|||
|
|
}
|
|||
|
|
var query = event.target.value;
|
|||
|
|
if (!this.multiple) {
|
|||
|
|
this.updateModel(event, query);
|
|||
|
|
}
|
|||
|
|
if (query.length === 0) {
|
|||
|
|
this.hide();
|
|||
|
|
this.$emit("clear");
|
|||
|
|
} else {
|
|||
|
|
if (query.length >= this.minLength) {
|
|||
|
|
this.focusedOptionIndex = -1;
|
|||
|
|
this.searchTimeout = setTimeout(function() {
|
|||
|
|
_this3.search(event, query, "input");
|
|||
|
|
}, this.delay);
|
|||
|
|
} else {
|
|||
|
|
this.hide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "onInput"),
|
|||
|
|
onChange: /* @__PURE__ */ __name(function onChange(event) {
|
|||
|
|
var _this4 = this;
|
|||
|
|
if (this.forceSelection) {
|
|||
|
|
var valid = false;
|
|||
|
|
if (this.visibleOptions && !this.multiple) {
|
|||
|
|
var value = this.multiple ? this.$refs.focusInput.value : this.$refs.focusInput.$el.value;
|
|||
|
|
var matchedValue = this.visibleOptions.find(function(option2) {
|
|||
|
|
return _this4.isOptionMatched(option2, value || "");
|
|||
|
|
});
|
|||
|
|
if (matchedValue !== void 0) {
|
|||
|
|
valid = true;
|
|||
|
|
!this.isSelected(matchedValue) && this.onOptionSelect(event, matchedValue);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!valid) {
|
|||
|
|
if (this.multiple) this.$refs.focusInput.value = "";
|
|||
|
|
else this.$refs.focusInput.$el.value = "";
|
|||
|
|
this.$emit("clear");
|
|||
|
|
!this.multiple && this.updateModel(event, null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "onChange"),
|
|||
|
|
onMultipleContainerFocus: /* @__PURE__ */ __name(function onMultipleContainerFocus() {
|
|||
|
|
if (this.disabled) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.focused = true;
|
|||
|
|
}, "onMultipleContainerFocus"),
|
|||
|
|
onMultipleContainerBlur: /* @__PURE__ */ __name(function onMultipleContainerBlur() {
|
|||
|
|
this.focusedMultipleOptionIndex = -1;
|
|||
|
|
this.focused = false;
|
|||
|
|
}, "onMultipleContainerBlur"),
|
|||
|
|
onMultipleContainerKeyDown: /* @__PURE__ */ __name(function onMultipleContainerKeyDown(event) {
|
|||
|
|
if (this.disabled) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
switch (event.code) {
|
|||
|
|
case "ArrowLeft":
|
|||
|
|
this.onArrowLeftKeyOnMultiple(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowRight":
|
|||
|
|
this.onArrowRightKeyOnMultiple(event);
|
|||
|
|
break;
|
|||
|
|
case "Backspace":
|
|||
|
|
this.onBackspaceKeyOnMultiple(event);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}, "onMultipleContainerKeyDown"),
|
|||
|
|
onContainerClick: /* @__PURE__ */ __name(function onContainerClick(event) {
|
|||
|
|
this.clicked = true;
|
|||
|
|
if (this.disabled || this.searching || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!this.overlay || !this.overlay.contains(event.target)) {
|
|||
|
|
focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
|
|||
|
|
}
|
|||
|
|
}, "onContainerClick"),
|
|||
|
|
onDropdownClick: /* @__PURE__ */ __name(function onDropdownClick(event) {
|
|||
|
|
var query = void 0;
|
|||
|
|
if (this.overlayVisible) {
|
|||
|
|
this.hide(true);
|
|||
|
|
} else {
|
|||
|
|
var target = this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el;
|
|||
|
|
focus(target);
|
|||
|
|
query = target.value;
|
|||
|
|
if (this.dropdownMode === "blank") this.search(event, "", "dropdown");
|
|||
|
|
else if (this.dropdownMode === "current") this.search(event, query, "dropdown");
|
|||
|
|
}
|
|||
|
|
this.$emit("dropdown-click", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
query
|
|||
|
|
});
|
|||
|
|
}, "onDropdownClick"),
|
|||
|
|
onOptionSelect: /* @__PURE__ */ __name(function onOptionSelect(event, option2) {
|
|||
|
|
var isHide = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
|
|||
|
|
var value = this.getOptionValue(option2);
|
|||
|
|
if (this.multiple) {
|
|||
|
|
this.$refs.focusInput.value = "";
|
|||
|
|
if (!this.isSelected(option2)) {
|
|||
|
|
this.updateModel(event, [].concat(_toConsumableArray$1(this.modelValue || []), [value]));
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.updateModel(event, value);
|
|||
|
|
}
|
|||
|
|
this.$emit("item-select", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
value: option2
|
|||
|
|
});
|
|||
|
|
this.$emit("option-select", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
value: option2
|
|||
|
|
});
|
|||
|
|
isHide && this.hide(true);
|
|||
|
|
}, "onOptionSelect"),
|
|||
|
|
onOptionMouseMove: /* @__PURE__ */ __name(function onOptionMouseMove(event, index) {
|
|||
|
|
if (this.focusOnHover) {
|
|||
|
|
this.changeFocusedOptionIndex(event, index);
|
|||
|
|
}
|
|||
|
|
}, "onOptionMouseMove"),
|
|||
|
|
onOverlayClick: /* @__PURE__ */ __name(function onOverlayClick(event) {
|
|||
|
|
OverlayEventBus.emit("overlay-click", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
target: this.$el
|
|||
|
|
});
|
|||
|
|
}, "onOverlayClick"),
|
|||
|
|
onOverlayKeyDown: /* @__PURE__ */ __name(function onOverlayKeyDown(event) {
|
|||
|
|
switch (event.code) {
|
|||
|
|
case "Escape":
|
|||
|
|
this.onEscapeKey(event);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}, "onOverlayKeyDown"),
|
|||
|
|
onArrowDownKey: /* @__PURE__ */ __name(function onArrowDownKey(event) {
|
|||
|
|
if (!this.overlayVisible) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
|
|||
|
|
this.changeFocusedOptionIndex(event, optionIndex);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onArrowDownKey"),
|
|||
|
|
onArrowUpKey: /* @__PURE__ */ __name(function onArrowUpKey(event) {
|
|||
|
|
if (!this.overlayVisible) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (event.altKey) {
|
|||
|
|
if (this.focusedOptionIndex !== -1) {
|
|||
|
|
this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
|
|||
|
|
}
|
|||
|
|
this.overlayVisible && this.hide();
|
|||
|
|
event.preventDefault();
|
|||
|
|
} else {
|
|||
|
|
var optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
|
|||
|
|
this.changeFocusedOptionIndex(event, optionIndex);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
}, "onArrowUpKey"),
|
|||
|
|
onArrowLeftKey: /* @__PURE__ */ __name(function onArrowLeftKey(event) {
|
|||
|
|
var target = event.currentTarget;
|
|||
|
|
this.focusedOptionIndex = -1;
|
|||
|
|
if (this.multiple) {
|
|||
|
|
if (isEmpty(target.value) && this.hasSelectedOption) {
|
|||
|
|
focus(this.$refs.multiContainer);
|
|||
|
|
this.focusedMultipleOptionIndex = this.modelValue.length;
|
|||
|
|
} else {
|
|||
|
|
event.stopPropagation();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "onArrowLeftKey"),
|
|||
|
|
onArrowRightKey: /* @__PURE__ */ __name(function onArrowRightKey(event) {
|
|||
|
|
this.focusedOptionIndex = -1;
|
|||
|
|
this.multiple && event.stopPropagation();
|
|||
|
|
}, "onArrowRightKey"),
|
|||
|
|
onHomeKey: /* @__PURE__ */ __name(function onHomeKey(event) {
|
|||
|
|
var currentTarget = event.currentTarget;
|
|||
|
|
var len = currentTarget.value.length;
|
|||
|
|
currentTarget.setSelectionRange(0, event.shiftKey ? len : 0);
|
|||
|
|
this.focusedOptionIndex = -1;
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onHomeKey"),
|
|||
|
|
onEndKey: /* @__PURE__ */ __name(function onEndKey(event) {
|
|||
|
|
var currentTarget = event.currentTarget;
|
|||
|
|
var len = currentTarget.value.length;
|
|||
|
|
currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len);
|
|||
|
|
this.focusedOptionIndex = -1;
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onEndKey"),
|
|||
|
|
onPageUpKey: /* @__PURE__ */ __name(function onPageUpKey(event) {
|
|||
|
|
this.scrollInView(0);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onPageUpKey"),
|
|||
|
|
onPageDownKey: /* @__PURE__ */ __name(function onPageDownKey(event) {
|
|||
|
|
this.scrollInView(this.visibleOptions.length - 1);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onPageDownKey"),
|
|||
|
|
onEnterKey: /* @__PURE__ */ __name(function onEnterKey(event) {
|
|||
|
|
if (!this.typeahead) {
|
|||
|
|
if (this.multiple) {
|
|||
|
|
this.updateModel(event, [].concat(_toConsumableArray$1(this.modelValue || []), [event.target.value]));
|
|||
|
|
this.$refs.focusInput.value = "";
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (!this.overlayVisible) {
|
|||
|
|
this.focusedOptionIndex = -1;
|
|||
|
|
this.onArrowDownKey(event);
|
|||
|
|
} else {
|
|||
|
|
if (this.focusedOptionIndex !== -1) {
|
|||
|
|
this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
|
|||
|
|
}
|
|||
|
|
this.hide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "onEnterKey"),
|
|||
|
|
onEscapeKey: /* @__PURE__ */ __name(function onEscapeKey(event) {
|
|||
|
|
this.overlayVisible && this.hide(true);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onEscapeKey"),
|
|||
|
|
onTabKey: /* @__PURE__ */ __name(function onTabKey(event) {
|
|||
|
|
if (this.focusedOptionIndex !== -1) {
|
|||
|
|
this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
|
|||
|
|
}
|
|||
|
|
this.overlayVisible && this.hide();
|
|||
|
|
}, "onTabKey"),
|
|||
|
|
onBackspaceKey: /* @__PURE__ */ __name(function onBackspaceKey(event) {
|
|||
|
|
if (this.multiple) {
|
|||
|
|
if (isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) {
|
|||
|
|
var removedValue = this.modelValue[this.modelValue.length - 1];
|
|||
|
|
var newValue = this.modelValue.slice(0, -1);
|
|||
|
|
this.$emit("update:modelValue", newValue);
|
|||
|
|
this.$emit("item-unselect", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
value: removedValue
|
|||
|
|
});
|
|||
|
|
this.$emit("option-unselect", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
value: removedValue
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
event.stopPropagation();
|
|||
|
|
}
|
|||
|
|
}, "onBackspaceKey"),
|
|||
|
|
onArrowLeftKeyOnMultiple: /* @__PURE__ */ __name(function onArrowLeftKeyOnMultiple() {
|
|||
|
|
this.focusedMultipleOptionIndex = this.focusedMultipleOptionIndex < 1 ? 0 : this.focusedMultipleOptionIndex - 1;
|
|||
|
|
}, "onArrowLeftKeyOnMultiple"),
|
|||
|
|
onArrowRightKeyOnMultiple: /* @__PURE__ */ __name(function onArrowRightKeyOnMultiple() {
|
|||
|
|
this.focusedMultipleOptionIndex++;
|
|||
|
|
if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) {
|
|||
|
|
this.focusedMultipleOptionIndex = -1;
|
|||
|
|
focus(this.$refs.focusInput);
|
|||
|
|
}
|
|||
|
|
}, "onArrowRightKeyOnMultiple"),
|
|||
|
|
onBackspaceKeyOnMultiple: /* @__PURE__ */ __name(function onBackspaceKeyOnMultiple(event) {
|
|||
|
|
if (this.focusedMultipleOptionIndex !== -1) {
|
|||
|
|
this.removeOption(event, this.focusedMultipleOptionIndex);
|
|||
|
|
}
|
|||
|
|
}, "onBackspaceKeyOnMultiple"),
|
|||
|
|
onOverlayEnter: /* @__PURE__ */ __name(function onOverlayEnter(el) {
|
|||
|
|
ZIndex.set("overlay", el, this.$primevue.config.zIndex.overlay);
|
|||
|
|
addStyle(el, {
|
|||
|
|
position: "absolute",
|
|||
|
|
top: "0",
|
|||
|
|
left: "0"
|
|||
|
|
});
|
|||
|
|
this.alignOverlay();
|
|||
|
|
}, "onOverlayEnter"),
|
|||
|
|
onOverlayAfterEnter: /* @__PURE__ */ __name(function onOverlayAfterEnter() {
|
|||
|
|
this.bindOutsideClickListener();
|
|||
|
|
this.bindScrollListener();
|
|||
|
|
this.bindResizeListener();
|
|||
|
|
this.$emit("show");
|
|||
|
|
}, "onOverlayAfterEnter"),
|
|||
|
|
onOverlayLeave: /* @__PURE__ */ __name(function onOverlayLeave() {
|
|||
|
|
this.unbindOutsideClickListener();
|
|||
|
|
this.unbindScrollListener();
|
|||
|
|
this.unbindResizeListener();
|
|||
|
|
this.$emit("hide");
|
|||
|
|
this.overlay = null;
|
|||
|
|
}, "onOverlayLeave"),
|
|||
|
|
onOverlayAfterLeave: /* @__PURE__ */ __name(function onOverlayAfterLeave(el) {
|
|||
|
|
ZIndex.clear(el);
|
|||
|
|
}, "onOverlayAfterLeave"),
|
|||
|
|
alignOverlay: /* @__PURE__ */ __name(function alignOverlay() {
|
|||
|
|
var target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput.$el;
|
|||
|
|
if (this.appendTo === "self") {
|
|||
|
|
relativePosition(this.overlay, target);
|
|||
|
|
} else {
|
|||
|
|
this.overlay.style.minWidth = getOuterWidth(target) + "px";
|
|||
|
|
absolutePosition(this.overlay, target);
|
|||
|
|
}
|
|||
|
|
}, "alignOverlay"),
|
|||
|
|
bindOutsideClickListener: /* @__PURE__ */ __name(function bindOutsideClickListener() {
|
|||
|
|
var _this5 = this;
|
|||
|
|
if (!this.outsideClickListener) {
|
|||
|
|
this.outsideClickListener = function(event) {
|
|||
|
|
if (_this5.overlayVisible && _this5.overlay && _this5.isOutsideClicked(event)) {
|
|||
|
|
_this5.hide();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
document.addEventListener("click", this.outsideClickListener);
|
|||
|
|
}
|
|||
|
|
}, "bindOutsideClickListener"),
|
|||
|
|
unbindOutsideClickListener: /* @__PURE__ */ __name(function unbindOutsideClickListener() {
|
|||
|
|
if (this.outsideClickListener) {
|
|||
|
|
document.removeEventListener("click", this.outsideClickListener);
|
|||
|
|
this.outsideClickListener = null;
|
|||
|
|
}
|
|||
|
|
}, "unbindOutsideClickListener"),
|
|||
|
|
bindScrollListener: /* @__PURE__ */ __name(function bindScrollListener() {
|
|||
|
|
var _this6 = this;
|
|||
|
|
if (!this.scrollHandler) {
|
|||
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, function() {
|
|||
|
|
if (_this6.overlayVisible) {
|
|||
|
|
_this6.hide();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.scrollHandler.bindScrollListener();
|
|||
|
|
}, "bindScrollListener"),
|
|||
|
|
unbindScrollListener: /* @__PURE__ */ __name(function unbindScrollListener() {
|
|||
|
|
if (this.scrollHandler) {
|
|||
|
|
this.scrollHandler.unbindScrollListener();
|
|||
|
|
}
|
|||
|
|
}, "unbindScrollListener"),
|
|||
|
|
bindResizeListener: /* @__PURE__ */ __name(function bindResizeListener() {
|
|||
|
|
var _this7 = this;
|
|||
|
|
if (!this.resizeListener) {
|
|||
|
|
this.resizeListener = function() {
|
|||
|
|
if (_this7.overlayVisible && !isTouchDevice()) {
|
|||
|
|
_this7.hide();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
window.addEventListener("resize", this.resizeListener);
|
|||
|
|
}
|
|||
|
|
}, "bindResizeListener"),
|
|||
|
|
unbindResizeListener: /* @__PURE__ */ __name(function unbindResizeListener() {
|
|||
|
|
if (this.resizeListener) {
|
|||
|
|
window.removeEventListener("resize", this.resizeListener);
|
|||
|
|
this.resizeListener = null;
|
|||
|
|
}
|
|||
|
|
}, "unbindResizeListener"),
|
|||
|
|
isOutsideClicked: /* @__PURE__ */ __name(function isOutsideClicked(event) {
|
|||
|
|
return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
|
|||
|
|
}, "isOutsideClicked"),
|
|||
|
|
isInputClicked: /* @__PURE__ */ __name(function isInputClicked(event) {
|
|||
|
|
if (this.multiple) return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
|
|||
|
|
else return event.target === this.$refs.focusInput.$el;
|
|||
|
|
}, "isInputClicked"),
|
|||
|
|
isDropdownClicked: /* @__PURE__ */ __name(function isDropdownClicked(event) {
|
|||
|
|
return this.$refs.dropdownButton ? event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.contains(event.target) : false;
|
|||
|
|
}, "isDropdownClicked"),
|
|||
|
|
isOptionMatched: /* @__PURE__ */ __name(function isOptionMatched(option2, value) {
|
|||
|
|
var _this$getOptionLabel;
|
|||
|
|
return this.isValidOption(option2) && ((_this$getOptionLabel = this.getOptionLabel(option2)) === null || _this$getOptionLabel === void 0 ? void 0 : _this$getOptionLabel.toLocaleLowerCase(this.searchLocale)) === value.toLocaleLowerCase(this.searchLocale);
|
|||
|
|
}, "isOptionMatched"),
|
|||
|
|
isValidOption: /* @__PURE__ */ __name(function isValidOption(option2) {
|
|||
|
|
return isNotEmpty(option2) && !(this.isOptionDisabled(option2) || this.isOptionGroup(option2));
|
|||
|
|
}, "isValidOption"),
|
|||
|
|
isValidSelectedOption: /* @__PURE__ */ __name(function isValidSelectedOption(option2) {
|
|||
|
|
return this.isValidOption(option2) && this.isSelected(option2);
|
|||
|
|
}, "isValidSelectedOption"),
|
|||
|
|
isEquals: /* @__PURE__ */ __name(function isEquals(value1, value2) {
|
|||
|
|
return equals(value1, value2, this.equalityKey);
|
|||
|
|
}, "isEquals"),
|
|||
|
|
isSelected: /* @__PURE__ */ __name(function isSelected(option2) {
|
|||
|
|
var _this8 = this;
|
|||
|
|
var optionValue = this.getOptionValue(option2);
|
|||
|
|
return this.multiple ? (this.modelValue || []).some(function(value) {
|
|||
|
|
return _this8.isEquals(value, optionValue);
|
|||
|
|
}) : this.isEquals(this.modelValue, this.getOptionValue(option2));
|
|||
|
|
}, "isSelected"),
|
|||
|
|
findFirstOptionIndex: /* @__PURE__ */ __name(function findFirstOptionIndex() {
|
|||
|
|
var _this9 = this;
|
|||
|
|
return this.visibleOptions.findIndex(function(option2) {
|
|||
|
|
return _this9.isValidOption(option2);
|
|||
|
|
});
|
|||
|
|
}, "findFirstOptionIndex"),
|
|||
|
|
findLastOptionIndex: /* @__PURE__ */ __name(function findLastOptionIndex() {
|
|||
|
|
var _this10 = this;
|
|||
|
|
return findLastIndex(this.visibleOptions, function(option2) {
|
|||
|
|
return _this10.isValidOption(option2);
|
|||
|
|
});
|
|||
|
|
}, "findLastOptionIndex"),
|
|||
|
|
findNextOptionIndex: /* @__PURE__ */ __name(function findNextOptionIndex(index) {
|
|||
|
|
var _this11 = this;
|
|||
|
|
var matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function(option2) {
|
|||
|
|
return _this11.isValidOption(option2);
|
|||
|
|
}) : -1;
|
|||
|
|
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
|
|||
|
|
}, "findNextOptionIndex"),
|
|||
|
|
findPrevOptionIndex: /* @__PURE__ */ __name(function findPrevOptionIndex(index) {
|
|||
|
|
var _this12 = this;
|
|||
|
|
var matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), function(option2) {
|
|||
|
|
return _this12.isValidOption(option2);
|
|||
|
|
}) : -1;
|
|||
|
|
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
|
|||
|
|
}, "findPrevOptionIndex"),
|
|||
|
|
findSelectedOptionIndex: /* @__PURE__ */ __name(function findSelectedOptionIndex() {
|
|||
|
|
var _this13 = this;
|
|||
|
|
return this.hasSelectedOption ? this.visibleOptions.findIndex(function(option2) {
|
|||
|
|
return _this13.isValidSelectedOption(option2);
|
|||
|
|
}) : -1;
|
|||
|
|
}, "findSelectedOptionIndex"),
|
|||
|
|
findFirstFocusedOptionIndex: /* @__PURE__ */ __name(function findFirstFocusedOptionIndex() {
|
|||
|
|
var selectedIndex = this.findSelectedOptionIndex();
|
|||
|
|
return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
|
|||
|
|
}, "findFirstFocusedOptionIndex"),
|
|||
|
|
findLastFocusedOptionIndex: /* @__PURE__ */ __name(function findLastFocusedOptionIndex() {
|
|||
|
|
var selectedIndex = this.findSelectedOptionIndex();
|
|||
|
|
return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
|
|||
|
|
}, "findLastFocusedOptionIndex"),
|
|||
|
|
search: /* @__PURE__ */ __name(function search(event, query, source) {
|
|||
|
|
if (query === void 0 || query === null) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (source === "input" && query.trim().length === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.searching = true;
|
|||
|
|
this.$emit("complete", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
query
|
|||
|
|
});
|
|||
|
|
}, "search"),
|
|||
|
|
removeOption: /* @__PURE__ */ __name(function removeOption(event, index) {
|
|||
|
|
var _this14 = this;
|
|||
|
|
var removedOption = this.modelValue[index];
|
|||
|
|
var value = this.modelValue.filter(function(_, i) {
|
|||
|
|
return i !== index;
|
|||
|
|
}).map(function(option2) {
|
|||
|
|
return _this14.getOptionValue(option2);
|
|||
|
|
});
|
|||
|
|
this.updateModel(event, value);
|
|||
|
|
this.$emit("item-unselect", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
value: removedOption
|
|||
|
|
});
|
|||
|
|
this.$emit("option-unselect", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
value: removedOption
|
|||
|
|
});
|
|||
|
|
this.dirty = true;
|
|||
|
|
focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
|
|||
|
|
}, "removeOption"),
|
|||
|
|
changeFocusedOptionIndex: /* @__PURE__ */ __name(function changeFocusedOptionIndex(event, index) {
|
|||
|
|
if (this.focusedOptionIndex !== index) {
|
|||
|
|
this.focusedOptionIndex = index;
|
|||
|
|
this.scrollInView();
|
|||
|
|
if (this.selectOnFocus) {
|
|||
|
|
this.onOptionSelect(event, this.visibleOptions[index], false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "changeFocusedOptionIndex"),
|
|||
|
|
scrollInView: /* @__PURE__ */ __name(function scrollInView() {
|
|||
|
|
var _this15 = this;
|
|||
|
|
var index = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : -1;
|
|||
|
|
this.$nextTick(function() {
|
|||
|
|
var id = index !== -1 ? "".concat(_this15.id, "_").concat(index) : _this15.focusedOptionId;
|
|||
|
|
var element = findSingle(_this15.list, 'li[id="'.concat(id, '"]'));
|
|||
|
|
if (element) {
|
|||
|
|
element.scrollIntoView && element.scrollIntoView({
|
|||
|
|
block: "nearest",
|
|||
|
|
inline: "start"
|
|||
|
|
});
|
|||
|
|
} else if (!_this15.virtualScrollerDisabled) {
|
|||
|
|
_this15.virtualScroller && _this15.virtualScroller.scrollToIndex(index !== -1 ? index : _this15.focusedOptionIndex);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, "scrollInView"),
|
|||
|
|
autoUpdateModel: /* @__PURE__ */ __name(function autoUpdateModel() {
|
|||
|
|
if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
|
|||
|
|
this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
|
|||
|
|
this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
|
|||
|
|
}
|
|||
|
|
}, "autoUpdateModel"),
|
|||
|
|
updateModel: /* @__PURE__ */ __name(function updateModel(event, value) {
|
|||
|
|
this.$emit("update:modelValue", value);
|
|||
|
|
this.$emit("change", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
value
|
|||
|
|
});
|
|||
|
|
}, "updateModel"),
|
|||
|
|
flatOptions: /* @__PURE__ */ __name(function flatOptions(options) {
|
|||
|
|
var _this16 = this;
|
|||
|
|
return (options || []).reduce(function(result, option2, index) {
|
|||
|
|
result.push({
|
|||
|
|
optionGroup: option2,
|
|||
|
|
group: true,
|
|||
|
|
index
|
|||
|
|
});
|
|||
|
|
var optionGroupChildren = _this16.getOptionGroupChildren(option2);
|
|||
|
|
optionGroupChildren && optionGroupChildren.forEach(function(o) {
|
|||
|
|
return result.push(o);
|
|||
|
|
});
|
|||
|
|
return result;
|
|||
|
|
}, []);
|
|||
|
|
}, "flatOptions"),
|
|||
|
|
overlayRef: /* @__PURE__ */ __name(function overlayRef(el) {
|
|||
|
|
this.overlay = el;
|
|||
|
|
}, "overlayRef"),
|
|||
|
|
listRef: /* @__PURE__ */ __name(function listRef(el, contentRef) {
|
|||
|
|
this.list = el;
|
|||
|
|
contentRef && contentRef(el);
|
|||
|
|
}, "listRef"),
|
|||
|
|
virtualScrollerRef: /* @__PURE__ */ __name(function virtualScrollerRef(el) {
|
|||
|
|
this.virtualScroller = el;
|
|||
|
|
}, "virtualScrollerRef")
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
visibleOptions: /* @__PURE__ */ __name(function visibleOptions() {
|
|||
|
|
return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
|
|||
|
|
}, "visibleOptions"),
|
|||
|
|
inputValue: /* @__PURE__ */ __name(function inputValue() {
|
|||
|
|
if (isNotEmpty(this.modelValue)) {
|
|||
|
|
if (_typeof$1$1(this.modelValue) === "object") {
|
|||
|
|
var label = this.getOptionLabel(this.modelValue);
|
|||
|
|
return label != null ? label : this.modelValue;
|
|||
|
|
} else {
|
|||
|
|
return this.modelValue;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
}, "inputValue"),
|
|||
|
|
hasSelectedOption: /* @__PURE__ */ __name(function hasSelectedOption() {
|
|||
|
|
return isNotEmpty(this.modelValue);
|
|||
|
|
}, "hasSelectedOption"),
|
|||
|
|
equalityKey: /* @__PURE__ */ __name(function equalityKey() {
|
|||
|
|
return this.dataKey;
|
|||
|
|
}, "equalityKey"),
|
|||
|
|
searchResultMessageText: /* @__PURE__ */ __name(function searchResultMessageText() {
|
|||
|
|
return isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll("{0}", this.visibleOptions.length) : this.emptySearchMessageText;
|
|||
|
|
}, "searchResultMessageText"),
|
|||
|
|
searchMessageText: /* @__PURE__ */ __name(function searchMessageText() {
|
|||
|
|
return this.searchMessage || this.$primevue.config.locale.searchMessage || "";
|
|||
|
|
}, "searchMessageText"),
|
|||
|
|
emptySearchMessageText: /* @__PURE__ */ __name(function emptySearchMessageText() {
|
|||
|
|
return this.emptySearchMessage || this.$primevue.config.locale.emptySearchMessage || "";
|
|||
|
|
}, "emptySearchMessageText"),
|
|||
|
|
selectionMessageText: /* @__PURE__ */ __name(function selectionMessageText() {
|
|||
|
|
return this.selectionMessage || this.$primevue.config.locale.selectionMessage || "";
|
|||
|
|
}, "selectionMessageText"),
|
|||
|
|
emptySelectionMessageText: /* @__PURE__ */ __name(function emptySelectionMessageText() {
|
|||
|
|
return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || "";
|
|||
|
|
}, "emptySelectionMessageText"),
|
|||
|
|
selectedMessageText: /* @__PURE__ */ __name(function selectedMessageText() {
|
|||
|
|
return this.hasSelectedOption ? this.selectionMessageText.replaceAll("{0}", this.multiple ? this.modelValue.length : "1") : this.emptySelectionMessageText;
|
|||
|
|
}, "selectedMessageText"),
|
|||
|
|
listAriaLabel: /* @__PURE__ */ __name(function listAriaLabel() {
|
|||
|
|
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : void 0;
|
|||
|
|
}, "listAriaLabel"),
|
|||
|
|
focusedOptionId: /* @__PURE__ */ __name(function focusedOptionId() {
|
|||
|
|
return this.focusedOptionIndex !== -1 ? "".concat(this.id, "_").concat(this.focusedOptionIndex) : null;
|
|||
|
|
}, "focusedOptionId"),
|
|||
|
|
focusedMultipleOptionId: /* @__PURE__ */ __name(function focusedMultipleOptionId() {
|
|||
|
|
return this.focusedMultipleOptionIndex !== -1 ? "".concat(this.id, "_multiple_option_").concat(this.focusedMultipleOptionIndex) : null;
|
|||
|
|
}, "focusedMultipleOptionId"),
|
|||
|
|
ariaSetSize: /* @__PURE__ */ __name(function ariaSetSize() {
|
|||
|
|
var _this17 = this;
|
|||
|
|
return this.visibleOptions.filter(function(option2) {
|
|||
|
|
return !_this17.isOptionGroup(option2);
|
|||
|
|
}).length;
|
|||
|
|
}, "ariaSetSize"),
|
|||
|
|
virtualScrollerDisabled: /* @__PURE__ */ __name(function virtualScrollerDisabled() {
|
|||
|
|
return !this.virtualScrollerOptions;
|
|||
|
|
}, "virtualScrollerDisabled"),
|
|||
|
|
panelId: /* @__PURE__ */ __name(function panelId() {
|
|||
|
|
return this.id + "_panel";
|
|||
|
|
}, "panelId"),
|
|||
|
|
hasFluid: /* @__PURE__ */ __name(function hasFluid() {
|
|||
|
|
return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
|
|||
|
|
}, "hasFluid")
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
InputText: script$f,
|
|||
|
|
VirtualScroller: script$g,
|
|||
|
|
Portal: script$h,
|
|||
|
|
ChevronDownIcon: script$i,
|
|||
|
|
SpinnerIcon: script$j,
|
|||
|
|
Chip: script$k
|
|||
|
|
},
|
|||
|
|
directives: {
|
|||
|
|
ripple: Ripple
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
function _typeof$4(o) {
|
|||
|
|
"@babel/helpers - typeof";
|
|||
|
|
return _typeof$4 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
|
|||
|
|
return typeof o2;
|
|||
|
|
} : function(o2) {
|
|||
|
|
return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
|
|||
|
|
}, _typeof$4(o);
|
|||
|
|
}
|
|||
|
|
__name(_typeof$4, "_typeof$4");
|
|||
|
|
function ownKeys$3(e, r) {
|
|||
|
|
var t = Object.keys(e);
|
|||
|
|
if (Object.getOwnPropertySymbols) {
|
|||
|
|
var o = Object.getOwnPropertySymbols(e);
|
|||
|
|
r && (o = o.filter(function(r2) {
|
|||
|
|
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|||
|
|
})), t.push.apply(t, o);
|
|||
|
|
}
|
|||
|
|
return t;
|
|||
|
|
}
|
|||
|
|
__name(ownKeys$3, "ownKeys$3");
|
|||
|
|
function _objectSpread$3(e) {
|
|||
|
|
for (var r = 1; r < arguments.length; r++) {
|
|||
|
|
var t = null != arguments[r] ? arguments[r] : {};
|
|||
|
|
r % 2 ? ownKeys$3(Object(t), true).forEach(function(r2) {
|
|||
|
|
_defineProperty$4(e, r2, t[r2]);
|
|||
|
|
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function(r2) {
|
|||
|
|
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return e;
|
|||
|
|
}
|
|||
|
|
__name(_objectSpread$3, "_objectSpread$3");
|
|||
|
|
function _defineProperty$4(e, r, t) {
|
|||
|
|
return (r = _toPropertyKey$4(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
|
|||
|
|
}
|
|||
|
|
__name(_defineProperty$4, "_defineProperty$4");
|
|||
|
|
function _toPropertyKey$4(t) {
|
|||
|
|
var i = _toPrimitive$4(t, "string");
|
|||
|
|
return "symbol" == _typeof$4(i) ? i : i + "";
|
|||
|
|
}
|
|||
|
|
__name(_toPropertyKey$4, "_toPropertyKey$4");
|
|||
|
|
function _toPrimitive$4(t, r) {
|
|||
|
|
if ("object" != _typeof$4(t) || !t) return t;
|
|||
|
|
var e = t[Symbol.toPrimitive];
|
|||
|
|
if (void 0 !== e) {
|
|||
|
|
var i = e.call(t, r || "default");
|
|||
|
|
if ("object" != _typeof$4(i)) return i;
|
|||
|
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|||
|
|
}
|
|||
|
|
return ("string" === r ? String : Number)(t);
|
|||
|
|
}
|
|||
|
|
__name(_toPrimitive$4, "_toPrimitive$4");
|
|||
|
|
var _hoisted_1$e = ["aria-activedescendant"];
|
|||
|
|
var _hoisted_2$b = ["id", "aria-label", "aria-setsize", "aria-posinset"];
|
|||
|
|
var _hoisted_3$9 = ["id", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"];
|
|||
|
|
var _hoisted_4$4 = ["disabled", "aria-expanded", "aria-controls"];
|
|||
|
|
var _hoisted_5$3 = ["id"];
|
|||
|
|
var _hoisted_6$2 = ["id", "aria-label"];
|
|||
|
|
var _hoisted_7$1 = ["id"];
|
|||
|
|
var _hoisted_8$1 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove", "data-p-selected", "data-p-focus", "data-p-disabled"];
|
|||
|
|
function render$a(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _component_InputText = resolveComponent("InputText");
|
|||
|
|
var _component_Chip = resolveComponent("Chip");
|
|||
|
|
var _component_SpinnerIcon = resolveComponent("SpinnerIcon");
|
|||
|
|
var _component_VirtualScroller = resolveComponent("VirtualScroller");
|
|||
|
|
var _component_Portal = resolveComponent("Portal");
|
|||
|
|
var _directive_ripple = resolveDirective("ripple");
|
|||
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
ref: "container",
|
|||
|
|
"class": _ctx.cx("root"),
|
|||
|
|
style: _ctx.sx("root"),
|
|||
|
|
onClick: _cache[11] || (_cache[11] = function() {
|
|||
|
|
return $options.onContainerClick && $options.onContainerClick.apply($options, arguments);
|
|||
|
|
})
|
|||
|
|
}, _ctx.ptmi("root")), [!_ctx.multiple ? (openBlock(), createBlock(_component_InputText, {
|
|||
|
|
key: 0,
|
|||
|
|
ref: "focusInput",
|
|||
|
|
id: _ctx.inputId,
|
|||
|
|
type: "text",
|
|||
|
|
"class": normalizeClass([_ctx.cx("pcInput"), _ctx.inputClass]),
|
|||
|
|
style: normalizeStyle(_ctx.inputStyle),
|
|||
|
|
value: $options.inputValue,
|
|||
|
|
placeholder: _ctx.placeholder,
|
|||
|
|
tabindex: !_ctx.disabled ? _ctx.tabindex : -1,
|
|||
|
|
fluid: $options.hasFluid,
|
|||
|
|
disabled: _ctx.disabled,
|
|||
|
|
invalid: _ctx.invalid,
|
|||
|
|
variant: _ctx.variant,
|
|||
|
|
autocomplete: "off",
|
|||
|
|
role: "combobox",
|
|||
|
|
"aria-label": _ctx.ariaLabel,
|
|||
|
|
"aria-labelledby": _ctx.ariaLabelledby,
|
|||
|
|
"aria-haspopup": "listbox",
|
|||
|
|
"aria-autocomplete": "list",
|
|||
|
|
"aria-expanded": $data.overlayVisible,
|
|||
|
|
"aria-controls": $options.panelId,
|
|||
|
|
"aria-activedescendant": $data.focused ? $options.focusedOptionId : void 0,
|
|||
|
|
onFocus: $options.onFocus,
|
|||
|
|
onBlur: $options.onBlur,
|
|||
|
|
onKeydown: $options.onKeyDown,
|
|||
|
|
onInput: $options.onInput,
|
|||
|
|
onChange: $options.onChange,
|
|||
|
|
unstyled: _ctx.unstyled,
|
|||
|
|
pt: _ctx.ptm("pcInput")
|
|||
|
|
}, null, 8, ["id", "class", "style", "value", "placeholder", "tabindex", "fluid", "disabled", "invalid", "variant", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "onFocus", "onBlur", "onKeydown", "onInput", "onChange", "unstyled", "pt"])) : createCommentVNode("", true), _ctx.multiple ? (openBlock(), createElementBlock("ul", mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
ref: "multiContainer",
|
|||
|
|
"class": _ctx.cx("inputMultiple"),
|
|||
|
|
tabindex: "-1",
|
|||
|
|
role: "listbox",
|
|||
|
|
"aria-orientation": "horizontal",
|
|||
|
|
"aria-activedescendant": $data.focused ? $options.focusedMultipleOptionId : void 0,
|
|||
|
|
onFocus: _cache[5] || (_cache[5] = function() {
|
|||
|
|
return $options.onMultipleContainerFocus && $options.onMultipleContainerFocus.apply($options, arguments);
|
|||
|
|
}),
|
|||
|
|
onBlur: _cache[6] || (_cache[6] = function() {
|
|||
|
|
return $options.onMultipleContainerBlur && $options.onMultipleContainerBlur.apply($options, arguments);
|
|||
|
|
}),
|
|||
|
|
onKeydown: _cache[7] || (_cache[7] = function() {
|
|||
|
|
return $options.onMultipleContainerKeyDown && $options.onMultipleContainerKeyDown.apply($options, arguments);
|
|||
|
|
})
|
|||
|
|
}, _ctx.ptm("inputMultiple")), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, function(option2, i) {
|
|||
|
|
return openBlock(), createElementBlock("li", mergeProps({
|
|||
|
|
key: "".concat(i, "_").concat($options.getOptionLabel(option2)),
|
|||
|
|
id: $data.id + "_multiple_option_" + i,
|
|||
|
|
"class": _ctx.cx("chipItem", {
|
|||
|
|
i
|
|||
|
|
}),
|
|||
|
|
role: "option",
|
|||
|
|
"aria-label": $options.getOptionLabel(option2),
|
|||
|
|
"aria-selected": true,
|
|||
|
|
"aria-setsize": _ctx.modelValue.length,
|
|||
|
|
"aria-posinset": i + 1,
|
|||
|
|
ref_for: true
|
|||
|
|
}, _ctx.ptm("chipItem")), [renderSlot(_ctx.$slots, "chip", mergeProps({
|
|||
|
|
"class": _ctx.cx("pcChip"),
|
|||
|
|
value: option2,
|
|||
|
|
index: i,
|
|||
|
|
removeCallback: /* @__PURE__ */ __name(function removeCallback(event) {
|
|||
|
|
return $options.removeOption(event, i);
|
|||
|
|
}, "removeCallback"),
|
|||
|
|
ref_for: true
|
|||
|
|
}, _ctx.ptm("pcChip")), function() {
|
|||
|
|
return [createVNode(_component_Chip, {
|
|||
|
|
"class": normalizeClass(_ctx.cx("pcChip")),
|
|||
|
|
label: $options.getOptionLabel(option2),
|
|||
|
|
removeIcon: _ctx.chipIcon || _ctx.removeTokenIcon,
|
|||
|
|
removable: "",
|
|||
|
|
unstyled: _ctx.unstyled,
|
|||
|
|
onRemove: /* @__PURE__ */ __name(function onRemove2($event) {
|
|||
|
|
return $options.removeOption($event, i);
|
|||
|
|
}, "onRemove"),
|
|||
|
|
pt: _ctx.ptm("pcChip")
|
|||
|
|
}, {
|
|||
|
|
removeicon: withCtx(function() {
|
|||
|
|
return [renderSlot(_ctx.$slots, _ctx.$slots.chipicon ? "chipicon" : "removetokenicon", {
|
|||
|
|
"class": normalizeClass(_ctx.cx("chipIcon")),
|
|||
|
|
index: i,
|
|||
|
|
removeCallback: /* @__PURE__ */ __name(function removeCallback(event) {
|
|||
|
|
return $options.removeOption(event, i);
|
|||
|
|
}, "removeCallback")
|
|||
|
|
})];
|
|||
|
|
}),
|
|||
|
|
_: 2
|
|||
|
|
}, 1032, ["class", "label", "removeIcon", "unstyled", "onRemove", "pt"])];
|
|||
|
|
})], 16, _hoisted_2$b);
|
|||
|
|
}), 128)), createBaseVNode("li", mergeProps({
|
|||
|
|
"class": _ctx.cx("inputChip"),
|
|||
|
|
role: "option"
|
|||
|
|
}, _ctx.ptm("inputChip")), [createBaseVNode("input", mergeProps({
|
|||
|
|
ref: "focusInput",
|
|||
|
|
id: _ctx.inputId,
|
|||
|
|
type: "text",
|
|||
|
|
style: _ctx.inputStyle,
|
|||
|
|
"class": _ctx.inputClass,
|
|||
|
|
placeholder: _ctx.placeholder,
|
|||
|
|
tabindex: !_ctx.disabled ? _ctx.tabindex : -1,
|
|||
|
|
disabled: _ctx.disabled,
|
|||
|
|
autocomplete: "off",
|
|||
|
|
role: "combobox",
|
|||
|
|
"aria-label": _ctx.ariaLabel,
|
|||
|
|
"aria-labelledby": _ctx.ariaLabelledby,
|
|||
|
|
"aria-haspopup": "listbox",
|
|||
|
|
"aria-autocomplete": "list",
|
|||
|
|
"aria-expanded": $data.overlayVisible,
|
|||
|
|
"aria-controls": $data.id + "_list",
|
|||
|
|
"aria-activedescendant": $data.focused ? $options.focusedOptionId : void 0,
|
|||
|
|
"aria-invalid": _ctx.invalid || void 0,
|
|||
|
|
onFocus: _cache[0] || (_cache[0] = function() {
|
|||
|
|
return $options.onFocus && $options.onFocus.apply($options, arguments);
|
|||
|
|
}),
|
|||
|
|
onBlur: _cache[1] || (_cache[1] = function() {
|
|||
|
|
return $options.onBlur && $options.onBlur.apply($options, arguments);
|
|||
|
|
}),
|
|||
|
|
onKeydown: _cache[2] || (_cache[2] = function() {
|
|||
|
|
return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
|
|||
|
|
}),
|
|||
|
|
onInput: _cache[3] || (_cache[3] = function() {
|
|||
|
|
return $options.onInput && $options.onInput.apply($options, arguments);
|
|||
|
|
}),
|
|||
|
|
onChange: _cache[4] || (_cache[4] = function() {
|
|||
|
|
return $options.onChange && $options.onChange.apply($options, arguments);
|
|||
|
|
})
|
|||
|
|
}, _ctx.ptm("input")), null, 16, _hoisted_3$9)], 16)], 16, _hoisted_1$e)) : createCommentVNode("", true), $data.searching || _ctx.loading ? renderSlot(_ctx.$slots, _ctx.$slots.loader ? "loader" : "loadingicon", {
|
|||
|
|
key: 2,
|
|||
|
|
"class": normalizeClass(_ctx.cx("loader"))
|
|||
|
|
}, function() {
|
|||
|
|
return [_ctx.loader || _ctx.loadingIcon ? (openBlock(), createElementBlock("i", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
"class": ["pi-spin", _ctx.cx("loader"), _ctx.loader, _ctx.loadingIcon],
|
|||
|
|
"aria-hidden": "true"
|
|||
|
|
}, _ctx.ptm("loader")), null, 16)) : (openBlock(), createBlock(_component_SpinnerIcon, mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
"class": _ctx.cx("loader"),
|
|||
|
|
spin: "",
|
|||
|
|
"aria-hidden": "true"
|
|||
|
|
}, _ctx.ptm("loader")), null, 16, ["class"]))];
|
|||
|
|
}) : createCommentVNode("", true), renderSlot(_ctx.$slots, _ctx.$slots.dropdown ? "dropdown" : "dropdownbutton", {
|
|||
|
|
toggleCallback: /* @__PURE__ */ __name(function toggleCallback(event) {
|
|||
|
|
return $options.onDropdownClick(event);
|
|||
|
|
}, "toggleCallback")
|
|||
|
|
}, function() {
|
|||
|
|
return [_ctx.dropdown ? (openBlock(), createElementBlock("button", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
ref: "dropdownButton",
|
|||
|
|
type: "button",
|
|||
|
|
"class": [_ctx.cx("dropdown"), _ctx.dropdownClass],
|
|||
|
|
disabled: _ctx.disabled,
|
|||
|
|
"aria-haspopup": "listbox",
|
|||
|
|
"aria-expanded": $data.overlayVisible,
|
|||
|
|
"aria-controls": $options.panelId,
|
|||
|
|
onClick: _cache[8] || (_cache[8] = function() {
|
|||
|
|
return $options.onDropdownClick && $options.onDropdownClick.apply($options, arguments);
|
|||
|
|
})
|
|||
|
|
}, _ctx.ptm("dropdown")), [renderSlot(_ctx.$slots, "dropdownicon", {
|
|||
|
|
"class": normalizeClass(_ctx.dropdownIcon)
|
|||
|
|
}, function() {
|
|||
|
|
return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.dropdownIcon ? "span" : "ChevronDownIcon"), mergeProps({
|
|||
|
|
"class": _ctx.dropdownIcon
|
|||
|
|
}, _ctx.ptm("dropdownIcon")), null, 16, ["class"]))];
|
|||
|
|
})], 16, _hoisted_4$4)) : createCommentVNode("", true)];
|
|||
|
|
}), createBaseVNode("span", mergeProps({
|
|||
|
|
role: "status",
|
|||
|
|
"aria-live": "polite",
|
|||
|
|
"class": "p-hidden-accessible"
|
|||
|
|
}, _ctx.ptm("hiddenSearchResult"), {
|
|||
|
|
"data-p-hidden-accessible": true
|
|||
|
|
}), toDisplayString($options.searchResultMessageText), 17), createVNode(_component_Portal, {
|
|||
|
|
appendTo: _ctx.appendTo
|
|||
|
|
}, {
|
|||
|
|
"default": withCtx(function() {
|
|||
|
|
return [createVNode(Transition, mergeProps({
|
|||
|
|
name: "p-connected-overlay",
|
|||
|
|
onEnter: $options.onOverlayEnter,
|
|||
|
|
onAfterEnter: $options.onOverlayAfterEnter,
|
|||
|
|
onLeave: $options.onOverlayLeave,
|
|||
|
|
onAfterLeave: $options.onOverlayAfterLeave
|
|||
|
|
}, _ctx.ptm("transition")), {
|
|||
|
|
"default": withCtx(function() {
|
|||
|
|
return [$data.overlayVisible ? (openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
ref: $options.overlayRef,
|
|||
|
|
id: $options.panelId,
|
|||
|
|
"class": [_ctx.cx("overlay"), _ctx.panelClass, _ctx.overlayClass],
|
|||
|
|
style: _objectSpread$3(_objectSpread$3(_objectSpread$3({}, _ctx.panelStyle), _ctx.overlayStyle), {}, {
|
|||
|
|
"max-height": $options.virtualScrollerDisabled ? _ctx.scrollHeight : ""
|
|||
|
|
}),
|
|||
|
|
onClick: _cache[9] || (_cache[9] = function() {
|
|||
|
|
return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
|
|||
|
|
}),
|
|||
|
|
onKeydown: _cache[10] || (_cache[10] = function() {
|
|||
|
|
return $options.onOverlayKeyDown && $options.onOverlayKeyDown.apply($options, arguments);
|
|||
|
|
})
|
|||
|
|
}, _ctx.ptm("overlay")), [renderSlot(_ctx.$slots, "header", {
|
|||
|
|
value: _ctx.modelValue,
|
|||
|
|
suggestions: $options.visibleOptions
|
|||
|
|
}), createVNode(_component_VirtualScroller, mergeProps({
|
|||
|
|
ref: $options.virtualScrollerRef
|
|||
|
|
}, _ctx.virtualScrollerOptions, {
|
|||
|
|
style: {
|
|||
|
|
height: _ctx.scrollHeight
|
|||
|
|
},
|
|||
|
|
items: $options.visibleOptions,
|
|||
|
|
tabindex: -1,
|
|||
|
|
disabled: $options.virtualScrollerDisabled,
|
|||
|
|
pt: _ctx.ptm("virtualScroller")
|
|||
|
|
}), createSlots({
|
|||
|
|
content: withCtx(function(_ref) {
|
|||
|
|
var styleClass = _ref.styleClass, contentRef = _ref.contentRef, items = _ref.items, getItemOptions = _ref.getItemOptions, contentStyle = _ref.contentStyle, itemSize = _ref.itemSize;
|
|||
|
|
return [createBaseVNode("ul", mergeProps({
|
|||
|
|
ref: /* @__PURE__ */ __name(function ref2(el) {
|
|||
|
|
return $options.listRef(el, contentRef);
|
|||
|
|
}, "ref"),
|
|||
|
|
id: $data.id + "_list",
|
|||
|
|
"class": [_ctx.cx("list"), styleClass],
|
|||
|
|
style: contentStyle,
|
|||
|
|
role: "listbox",
|
|||
|
|
"aria-label": $options.listAriaLabel
|
|||
|
|
}, _ctx.ptm("list")), [(openBlock(true), createElementBlock(Fragment, null, renderList(items, function(option2, i) {
|
|||
|
|
return openBlock(), createElementBlock(Fragment, {
|
|||
|
|
key: $options.getOptionRenderKey(option2, $options.getOptionIndex(i, getItemOptions))
|
|||
|
|
}, [$options.isOptionGroup(option2) ? (openBlock(), createElementBlock("li", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
id: $data.id + "_" + $options.getOptionIndex(i, getItemOptions),
|
|||
|
|
style: {
|
|||
|
|
height: itemSize ? itemSize + "px" : void 0
|
|||
|
|
},
|
|||
|
|
"class": _ctx.cx("optionGroup"),
|
|||
|
|
role: "option",
|
|||
|
|
ref_for: true
|
|||
|
|
}, _ctx.ptm("optionGroup")), [renderSlot(_ctx.$slots, "optiongroup", {
|
|||
|
|
option: option2.optionGroup,
|
|||
|
|
index: $options.getOptionIndex(i, getItemOptions)
|
|||
|
|
}, function() {
|
|||
|
|
return [createTextVNode(toDisplayString($options.getOptionGroupLabel(option2.optionGroup)), 1)];
|
|||
|
|
})], 16, _hoisted_7$1)) : withDirectives((openBlock(), createElementBlock("li", mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
id: $data.id + "_" + $options.getOptionIndex(i, getItemOptions),
|
|||
|
|
style: {
|
|||
|
|
height: itemSize ? itemSize + "px" : void 0
|
|||
|
|
},
|
|||
|
|
"class": _ctx.cx("option", {
|
|||
|
|
option: option2,
|
|||
|
|
i,
|
|||
|
|
getItemOptions
|
|||
|
|
}),
|
|||
|
|
role: "option",
|
|||
|
|
"aria-label": $options.getOptionLabel(option2),
|
|||
|
|
"aria-selected": $options.isSelected(option2),
|
|||
|
|
"aria-disabled": $options.isOptionDisabled(option2),
|
|||
|
|
"aria-setsize": $options.ariaSetSize,
|
|||
|
|
"aria-posinset": $options.getAriaPosInset($options.getOptionIndex(i, getItemOptions)),
|
|||
|
|
onClick: /* @__PURE__ */ __name(function onClick($event) {
|
|||
|
|
return $options.onOptionSelect($event, option2);
|
|||
|
|
}, "onClick"),
|
|||
|
|
onMousemove: /* @__PURE__ */ __name(function onMousemove($event) {
|
|||
|
|
return $options.onOptionMouseMove($event, $options.getOptionIndex(i, getItemOptions));
|
|||
|
|
}, "onMousemove"),
|
|||
|
|
"data-p-selected": $options.isSelected(option2),
|
|||
|
|
"data-p-focus": $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions),
|
|||
|
|
"data-p-disabled": $options.isOptionDisabled(option2),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(option2, getItemOptions, i, "option")), [renderSlot(_ctx.$slots, "option", {
|
|||
|
|
option: option2,
|
|||
|
|
index: $options.getOptionIndex(i, getItemOptions)
|
|||
|
|
}, function() {
|
|||
|
|
return [createTextVNode(toDisplayString($options.getOptionLabel(option2)), 1)];
|
|||
|
|
})], 16, _hoisted_8$1)), [[_directive_ripple]])], 64);
|
|||
|
|
}), 128)), !items || items && items.length === 0 ? (openBlock(), createElementBlock("li", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
"class": _ctx.cx("emptyMessage"),
|
|||
|
|
role: "option"
|
|||
|
|
}, _ctx.ptm("emptyMessage")), [renderSlot(_ctx.$slots, "empty", {}, function() {
|
|||
|
|
return [createTextVNode(toDisplayString($options.searchResultMessageText), 1)];
|
|||
|
|
})], 16)) : createCommentVNode("", true)], 16, _hoisted_6$2)];
|
|||
|
|
}),
|
|||
|
|
_: 2
|
|||
|
|
}, [_ctx.$slots.loader ? {
|
|||
|
|
name: "loader",
|
|||
|
|
fn: withCtx(function(_ref2) {
|
|||
|
|
var options = _ref2.options;
|
|||
|
|
return [renderSlot(_ctx.$slots, "loader", {
|
|||
|
|
options
|
|||
|
|
})];
|
|||
|
|
}),
|
|||
|
|
key: "0"
|
|||
|
|
} : void 0]), 1040, ["style", "items", "disabled", "pt"]), renderSlot(_ctx.$slots, "footer", {
|
|||
|
|
value: _ctx.modelValue,
|
|||
|
|
suggestions: $options.visibleOptions
|
|||
|
|
}), createBaseVNode("span", mergeProps({
|
|||
|
|
role: "status",
|
|||
|
|
"aria-live": "polite",
|
|||
|
|
"class": "p-hidden-accessible"
|
|||
|
|
}, _ctx.ptm("hiddenSelectedMessage"), {
|
|||
|
|
"data-p-hidden-accessible": true
|
|||
|
|
}), toDisplayString($options.selectedMessageText), 17)], 16, _hoisted_5$3)) : createCommentVNode("", true)];
|
|||
|
|
}),
|
|||
|
|
_: 3
|
|||
|
|
}, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];
|
|||
|
|
}),
|
|||
|
|
_: 3
|
|||
|
|
}, 8, ["appendTo"])], 16);
|
|||
|
|
}
|
|||
|
|
__name(render$a, "render$a");
|
|||
|
|
script$8.render = render$a;
|
|||
|
|
const _sfc_main$g = {
|
|||
|
|
name: "AutoCompletePlus",
|
|||
|
|
extends: script$8,
|
|||
|
|
emits: ["focused-option-changed"],
|
|||
|
|
mounted() {
|
|||
|
|
if (typeof script$8.mounted === "function") {
|
|||
|
|
script$8.mounted.call(this);
|
|||
|
|
}
|
|||
|
|
this.$watch(
|
|||
|
|
() => this.focusedOptionIndex,
|
|||
|
|
(newVal, oldVal) => {
|
|||
|
|
this.$emit("focused-option-changed", newVal);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const _withScopeId$5 = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-37f672ab"), n = n(), popScopeId(), n), "_withScopeId$5");
|
|||
|
|
const _hoisted_1$d = { class: "option-container flex justify-between items-center px-2 py-0 cursor-pointer overflow-hidden w-full" };
|
|||
|
|
const _hoisted_2$a = { class: "option-display-name font-semibold flex flex-col" };
|
|||
|
|
const _hoisted_3$8 = { key: 0 };
|
|||
|
|
const _hoisted_4$3 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createBaseVNode("i", { class: "pi pi-bookmark-fill text-sm mr-1" }, null, -1));
|
|||
|
|
const _hoisted_5$2 = [
|
|||
|
|
_hoisted_4$3
|
|||
|
|
];
|
|||
|
|
const _hoisted_6$1 = ["innerHTML"];
|
|||
|
|
const _hoisted_7 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createBaseVNode("span", null, " ", -1));
|
|||
|
|
const _hoisted_8 = ["innerHTML"];
|
|||
|
|
const _hoisted_9 = {
|
|||
|
|
key: 0,
|
|||
|
|
class: "option-category font-light text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
|
|||
|
|
};
|
|||
|
|
const _hoisted_10 = { class: "option-badges" };
|
|||
|
|
const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "NodeSearchItem",
|
|||
|
|
props: {
|
|||
|
|
nodeDef: {},
|
|||
|
|
currentQuery: {}
|
|||
|
|
},
|
|||
|
|
setup(__props) {
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const showCategory = computed(
|
|||
|
|
() => settingStore.get("Comfy.NodeSearchBoxImpl.ShowCategory")
|
|||
|
|
);
|
|||
|
|
const showIdName = computed(
|
|||
|
|
() => settingStore.get("Comfy.NodeSearchBoxImpl.ShowIdName")
|
|||
|
|
);
|
|||
|
|
const showNodeFrequency = computed(
|
|||
|
|
() => settingStore.get("Comfy.NodeSearchBoxImpl.ShowNodeFrequency")
|
|||
|
|
);
|
|||
|
|
const nodeFrequencyStore = useNodeFrequencyStore();
|
|||
|
|
const nodeFrequency = computed(
|
|||
|
|
() => nodeFrequencyStore.getNodeFrequency(props.nodeDef)
|
|||
|
|
);
|
|||
|
|
const nodeBookmarkStore = useNodeBookmarkStore();
|
|||
|
|
const isBookmarked = computed(
|
|||
|
|
() => nodeBookmarkStore.isBookmarked(props.nodeDef)
|
|||
|
|
);
|
|||
|
|
const props = __props;
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$d, [
|
|||
|
|
createBaseVNode("div", _hoisted_2$a, [
|
|||
|
|
createBaseVNode("div", null, [
|
|||
|
|
isBookmarked.value ? (openBlock(), createElementBlock("span", _hoisted_3$8, _hoisted_5$2)) : createCommentVNode("", true),
|
|||
|
|
createBaseVNode("span", {
|
|||
|
|
innerHTML: unref(highlightQuery)(_ctx.nodeDef.display_name, _ctx.currentQuery)
|
|||
|
|
}, null, 8, _hoisted_6$1),
|
|||
|
|
_hoisted_7,
|
|||
|
|
showIdName.value ? (openBlock(), createBlock(unref(script$l), {
|
|||
|
|
key: 1,
|
|||
|
|
severity: "secondary"
|
|||
|
|
}, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
createBaseVNode("span", {
|
|||
|
|
innerHTML: unref(highlightQuery)(_ctx.nodeDef.name, _ctx.currentQuery)
|
|||
|
|
}, null, 8, _hoisted_8)
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
})) : createCommentVNode("", true)
|
|||
|
|
]),
|
|||
|
|
showCategory.value ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(_ctx.nodeDef.category.replaceAll("/", " > ")), 1)) : createCommentVNode("", true)
|
|||
|
|
]),
|
|||
|
|
createBaseVNode("div", _hoisted_10, [
|
|||
|
|
_ctx.nodeDef.experimental ? (openBlock(), createBlock(unref(script$l), {
|
|||
|
|
key: 0,
|
|||
|
|
value: _ctx.$t("experimental"),
|
|||
|
|
severity: "primary"
|
|||
|
|
}, null, 8, ["value"])) : createCommentVNode("", true),
|
|||
|
|
_ctx.nodeDef.deprecated ? (openBlock(), createBlock(unref(script$l), {
|
|||
|
|
key: 1,
|
|||
|
|
value: _ctx.$t("deprecated"),
|
|||
|
|
severity: "danger"
|
|||
|
|
}, null, 8, ["value"])) : createCommentVNode("", true),
|
|||
|
|
showNodeFrequency.value && nodeFrequency.value > 0 ? (openBlock(), createBlock(unref(script$l), {
|
|||
|
|
key: 2,
|
|||
|
|
value: unref(formatNumberWithSuffix)(nodeFrequency.value, { roundToInt: true }),
|
|||
|
|
severity: "secondary"
|
|||
|
|
}, null, 8, ["value"])) : createCommentVNode("", true),
|
|||
|
|
_ctx.nodeDef.nodeSource.type !== unref(NodeSourceType).Unknown ? (openBlock(), createBlock(unref(script$k), {
|
|||
|
|
key: 3,
|
|||
|
|
class: "text-sm font-light"
|
|||
|
|
}, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
createTextVNode(toDisplayString(_ctx.nodeDef.nodeSource.displayText), 1)
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
})) : createCommentVNode("", true)
|
|||
|
|
])
|
|||
|
|
]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const NodeSearchItem = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-37f672ab"]]);
|
|||
|
|
const _withScopeId$4 = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-2d409367"), n = n(), popScopeId(), n), "_withScopeId$4");
|
|||
|
|
const _hoisted_1$c = { class: "comfy-vue-node-search-container" };
|
|||
|
|
const _hoisted_2$9 = {
|
|||
|
|
key: 0,
|
|||
|
|
class: "comfy-vue-node-preview-container"
|
|||
|
|
};
|
|||
|
|
const _hoisted_3$7 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ createBaseVNode("h3", null, "Add node filter condition", -1));
|
|||
|
|
const _hoisted_4$2 = { class: "_dialog-body" };
|
|||
|
|
const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "NodeSearchBox",
|
|||
|
|
props: {
|
|||
|
|
filters: {},
|
|||
|
|
searchLimit: { default: 64 }
|
|||
|
|
},
|
|||
|
|
emits: ["addFilter", "removeFilter", "addNode"],
|
|||
|
|
setup(__props, { emit: __emit }) {
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
const enableNodePreview = computed(
|
|||
|
|
() => settingStore.get("Comfy.NodeSearchBoxImpl.NodePreview")
|
|||
|
|
);
|
|||
|
|
const props = __props;
|
|||
|
|
const nodeSearchFilterVisible = ref(false);
|
|||
|
|
const inputId = `comfy-vue-node-search-box-input-${Math.random()}`;
|
|||
|
|
const suggestions2 = ref([]);
|
|||
|
|
const hoveredSuggestion = ref(null);
|
|||
|
|
const currentQuery = ref("");
|
|||
|
|
const placeholder = computed(() => {
|
|||
|
|
return props.filters.length === 0 ? t("searchNodes") + "..." : "";
|
|||
|
|
});
|
|||
|
|
const nodeDefStore = useNodeDefStore();
|
|||
|
|
const nodeFrequencyStore = useNodeFrequencyStore();
|
|||
|
|
const search2 = /* @__PURE__ */ __name((query) => {
|
|||
|
|
const queryIsEmpty = query === "" && props.filters.length === 0;
|
|||
|
|
currentQuery.value = query;
|
|||
|
|
suggestions2.value = queryIsEmpty ? nodeFrequencyStore.topNodeDefs : [
|
|||
|
|
...nodeDefStore.nodeSearchService.searchNode(query, props.filters, {
|
|||
|
|
limit: props.searchLimit
|
|||
|
|
})
|
|||
|
|
];
|
|||
|
|
}, "search");
|
|||
|
|
const emit = __emit;
|
|||
|
|
const reFocusInput = /* @__PURE__ */ __name(() => {
|
|||
|
|
const inputElement = document.getElementById(inputId);
|
|||
|
|
if (inputElement) {
|
|||
|
|
inputElement.blur();
|
|||
|
|
inputElement.focus();
|
|||
|
|
}
|
|||
|
|
}, "reFocusInput");
|
|||
|
|
onMounted(reFocusInput);
|
|||
|
|
const onAddFilter = /* @__PURE__ */ __name((filterAndValue) => {
|
|||
|
|
nodeSearchFilterVisible.value = false;
|
|||
|
|
emit("addFilter", filterAndValue);
|
|||
|
|
reFocusInput();
|
|||
|
|
}, "onAddFilter");
|
|||
|
|
const onRemoveFilter = /* @__PURE__ */ __name((event, filterAndValue) => {
|
|||
|
|
event.stopPropagation();
|
|||
|
|
event.preventDefault();
|
|||
|
|
emit("removeFilter", filterAndValue);
|
|||
|
|
reFocusInput();
|
|||
|
|
}, "onRemoveFilter");
|
|||
|
|
const setHoverSuggestion = /* @__PURE__ */ __name((index) => {
|
|||
|
|
if (index === -1) {
|
|||
|
|
hoveredSuggestion.value = null;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const value = suggestions2.value[index];
|
|||
|
|
hoveredSuggestion.value = value;
|
|||
|
|
}, "setHoverSuggestion");
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$c, [
|
|||
|
|
enableNodePreview.value ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
|
|||
|
|
hoveredSuggestion.value ? (openBlock(), createBlock(NodePreview, {
|
|||
|
|
nodeDef: hoveredSuggestion.value,
|
|||
|
|
key: hoveredSuggestion.value?.name || ""
|
|||
|
|
}, null, 8, ["nodeDef"])) : createCommentVNode("", true)
|
|||
|
|
])) : createCommentVNode("", true),
|
|||
|
|
createVNode(unref(script$d), {
|
|||
|
|
icon: "pi pi-filter",
|
|||
|
|
severity: "secondary",
|
|||
|
|
class: "_filter-button",
|
|||
|
|
onClick: _cache[0] || (_cache[0] = ($event) => nodeSearchFilterVisible.value = true)
|
|||
|
|
}),
|
|||
|
|
createVNode(unref(script$m), {
|
|||
|
|
visible: nodeSearchFilterVisible.value,
|
|||
|
|
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => nodeSearchFilterVisible.value = $event),
|
|||
|
|
class: "_dialog"
|
|||
|
|
}, {
|
|||
|
|
header: withCtx(() => [
|
|||
|
|
_hoisted_3$7
|
|||
|
|
]),
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
createBaseVNode("div", _hoisted_4$2, [
|
|||
|
|
createVNode(NodeSearchFilter, { onAddFilter })
|
|||
|
|
])
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
}, 8, ["visible"]),
|
|||
|
|
createVNode(_sfc_main$g, {
|
|||
|
|
"model-value": props.filters,
|
|||
|
|
class: "comfy-vue-node-search-box",
|
|||
|
|
scrollHeight: "40vh",
|
|||
|
|
placeholder: placeholder.value,
|
|||
|
|
"input-id": inputId,
|
|||
|
|
"append-to": "self",
|
|||
|
|
suggestions: suggestions2.value,
|
|||
|
|
"min-length": 0,
|
|||
|
|
delay: 100,
|
|||
|
|
loading: !unref(nodeFrequencyStore).isLoaded,
|
|||
|
|
onComplete: _cache[2] || (_cache[2] = ($event) => search2($event.query)),
|
|||
|
|
onOptionSelect: _cache[3] || (_cache[3] = ($event) => emit("addNode", $event.value)),
|
|||
|
|
onFocusedOptionChanged: _cache[4] || (_cache[4] = ($event) => setHoverSuggestion($event)),
|
|||
|
|
"complete-on-focus": "",
|
|||
|
|
"auto-option-focus": "",
|
|||
|
|
"force-selection": "",
|
|||
|
|
multiple: "",
|
|||
|
|
optionLabel: "display_name"
|
|||
|
|
}, {
|
|||
|
|
option: withCtx(({ option: option2 }) => [
|
|||
|
|
createVNode(NodeSearchItem, {
|
|||
|
|
nodeDef: option2,
|
|||
|
|
currentQuery: currentQuery.value
|
|||
|
|
}, null, 8, ["nodeDef", "currentQuery"])
|
|||
|
|
]),
|
|||
|
|
chip: withCtx(({ value }) => [
|
|||
|
|
createVNode(SearchFilterChip, {
|
|||
|
|
onRemove: /* @__PURE__ */ __name(($event) => onRemoveFilter($event, value), "onRemove"),
|
|||
|
|
text: value[1],
|
|||
|
|
badge: value[0].invokeSequence.toUpperCase(),
|
|||
|
|
"badge-class": value[0].invokeSequence + "-badge"
|
|||
|
|
}, null, 8, ["onRemove", "text", "badge", "badge-class"])
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
}, 8, ["model-value", "placeholder", "suggestions", "loading"])
|
|||
|
|
]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const NodeSearchBox = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-2d409367"]]);
|
|||
|
|
class ConnectingLinkImpl {
|
|||
|
|
static {
|
|||
|
|
__name(this, "ConnectingLinkImpl");
|
|||
|
|
}
|
|||
|
|
node;
|
|||
|
|
slot;
|
|||
|
|
input;
|
|||
|
|
output;
|
|||
|
|
pos;
|
|||
|
|
constructor(node, slot, input, output, pos) {
|
|||
|
|
this.node = node;
|
|||
|
|
this.slot = slot;
|
|||
|
|
this.input = input;
|
|||
|
|
this.output = output;
|
|||
|
|
this.pos = pos;
|
|||
|
|
}
|
|||
|
|
static createFromPlainObject(obj) {
|
|||
|
|
return new ConnectingLinkImpl(
|
|||
|
|
obj.node,
|
|||
|
|
obj.slot,
|
|||
|
|
obj.input,
|
|||
|
|
obj.output,
|
|||
|
|
obj.pos
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
get type() {
|
|||
|
|
const result = this.input ? this.input.type : this.output.type;
|
|||
|
|
return result === -1 ? null : result;
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* Which slot type is release and need to be reconnected.
|
|||
|
|
* - 'output' means we need a new node's outputs slot to connect with this link
|
|||
|
|
*/
|
|||
|
|
get releaseSlotType() {
|
|||
|
|
return this.output ? "input" : "output";
|
|||
|
|
}
|
|||
|
|
connectTo(newNode) {
|
|||
|
|
const newNodeSlots = this.releaseSlotType === "output" ? newNode.outputs : newNode.inputs;
|
|||
|
|
if (!newNodeSlots) return;
|
|||
|
|
const newNodeSlot = newNodeSlots.findIndex(
|
|||
|
|
(slot) => LiteGraph.isValidConnection(slot.type, this.type)
|
|||
|
|
);
|
|||
|
|
if (newNodeSlot === -1) {
|
|||
|
|
console.warn(
|
|||
|
|
`Could not find slot with type ${this.type} on node ${newNode.title}. This should never happen`
|
|||
|
|
);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.releaseSlotType === "input") {
|
|||
|
|
this.node.connect(this.slot, newNode, newNodeSlot);
|
|||
|
|
} else {
|
|||
|
|
newNode.connect(newNodeSlot, this.node, this.slot);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "NodeSearchBoxPopover",
|
|||
|
|
setup(__props) {
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const visible = ref(false);
|
|||
|
|
const dismissable = ref(true);
|
|||
|
|
const triggerEvent = ref(null);
|
|||
|
|
const getNewNodeLocation = /* @__PURE__ */ __name(() => {
|
|||
|
|
if (triggerEvent.value === null) {
|
|||
|
|
return [100, 100];
|
|||
|
|
}
|
|||
|
|
const originalEvent = triggerEvent.value.detail.originalEvent;
|
|||
|
|
return [originalEvent.canvasX, originalEvent.canvasY];
|
|||
|
|
}, "getNewNodeLocation");
|
|||
|
|
const nodeFilters = ref([]);
|
|||
|
|
const addFilter = /* @__PURE__ */ __name((filter) => {
|
|||
|
|
nodeFilters.value.push(filter);
|
|||
|
|
}, "addFilter");
|
|||
|
|
const removeFilter = /* @__PURE__ */ __name((filter) => {
|
|||
|
|
nodeFilters.value = nodeFilters.value.filter(
|
|||
|
|
(f) => toRaw(f) !== toRaw(filter)
|
|||
|
|
);
|
|||
|
|
}, "removeFilter");
|
|||
|
|
const clearFilters = /* @__PURE__ */ __name(() => {
|
|||
|
|
nodeFilters.value = [];
|
|||
|
|
}, "clearFilters");
|
|||
|
|
const closeDialog = /* @__PURE__ */ __name(() => {
|
|||
|
|
visible.value = false;
|
|||
|
|
}, "closeDialog");
|
|||
|
|
const addNode = /* @__PURE__ */ __name((nodeDef) => {
|
|||
|
|
const node = app.addNodeOnGraph(nodeDef, { pos: getNewNodeLocation() });
|
|||
|
|
const eventDetail = triggerEvent.value.detail;
|
|||
|
|
if (eventDetail.subType === "empty-release") {
|
|||
|
|
eventDetail.linkReleaseContext.links.forEach((link) => {
|
|||
|
|
ConnectingLinkImpl.createFromPlainObject(link).connectTo(node);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
window.setTimeout(() => {
|
|||
|
|
closeDialog();
|
|||
|
|
}, 100);
|
|||
|
|
}, "addNode");
|
|||
|
|
const newSearchBoxEnabled = computed(
|
|||
|
|
() => settingStore.get("Comfy.NodeSearchBoxImpl") === "default"
|
|||
|
|
);
|
|||
|
|
const showSearchBox = /* @__PURE__ */ __name((e) => {
|
|||
|
|
if (newSearchBoxEnabled.value) {
|
|||
|
|
if (e.detail.originalEvent?.pointerType === "touch") {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
showNewSearchBox(e);
|
|||
|
|
}, 128);
|
|||
|
|
} else {
|
|||
|
|
showNewSearchBox(e);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
canvasStore.canvas.showSearchBox(e.detail.originalEvent);
|
|||
|
|
}
|
|||
|
|
}, "showSearchBox");
|
|||
|
|
const nodeDefStore = useNodeDefStore();
|
|||
|
|
const showNewSearchBox = /* @__PURE__ */ __name((e) => {
|
|||
|
|
if (e.detail.linkReleaseContext) {
|
|||
|
|
const links = e.detail.linkReleaseContext.links;
|
|||
|
|
if (links.length === 0) {
|
|||
|
|
console.warn("Empty release with no links! This should never happen");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const firstLink = ConnectingLinkImpl.createFromPlainObject(links[0]);
|
|||
|
|
const filter = nodeDefStore.nodeSearchService.getFilterById(
|
|||
|
|
firstLink.releaseSlotType
|
|||
|
|
);
|
|||
|
|
const dataType = firstLink.type;
|
|||
|
|
addFilter([filter, dataType]);
|
|||
|
|
}
|
|||
|
|
visible.value = true;
|
|||
|
|
triggerEvent.value = e;
|
|||
|
|
dismissable.value = false;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
dismissable.value = true;
|
|||
|
|
}, 300);
|
|||
|
|
}, "showNewSearchBox");
|
|||
|
|
const showContextMenu = /* @__PURE__ */ __name((e) => {
|
|||
|
|
const links = e.detail.linkReleaseContext.links;
|
|||
|
|
if (links.length === 0) {
|
|||
|
|
console.warn("Empty release with no links! This should never happen");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const firstLink = ConnectingLinkImpl.createFromPlainObject(links[0]);
|
|||
|
|
const mouseEvent = e.detail.originalEvent;
|
|||
|
|
const commonOptions = {
|
|||
|
|
e: mouseEvent,
|
|||
|
|
allow_searchbox: true,
|
|||
|
|
showSearchBox: /* @__PURE__ */ __name(() => showSearchBox(e), "showSearchBox")
|
|||
|
|
};
|
|||
|
|
const connectionOptions = firstLink.output ? { nodeFrom: firstLink.node, slotFrom: firstLink.output } : { nodeTo: firstLink.node, slotTo: firstLink.input };
|
|||
|
|
canvasStore.canvas.showConnectionMenu({
|
|||
|
|
...connectionOptions,
|
|||
|
|
...commonOptions
|
|||
|
|
});
|
|||
|
|
}, "showContextMenu");
|
|||
|
|
const canvasStore = useCanvasStore();
|
|||
|
|
watchEffect(() => {
|
|||
|
|
if (canvasStore.canvas) {
|
|||
|
|
LiteGraph.release_link_on_empty_shows_menu = false;
|
|||
|
|
canvasStore.canvas.allow_searchbox = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const canvasEventHandler = /* @__PURE__ */ __name((e) => {
|
|||
|
|
if (e.detail.subType === "empty-double-click") {
|
|||
|
|
showSearchBox(e);
|
|||
|
|
} else if (e.detail.subType === "empty-release") {
|
|||
|
|
handleCanvasEmptyRelease(e);
|
|||
|
|
} else if (e.detail.subType === "group-double-click") {
|
|||
|
|
const group = e.detail.group;
|
|||
|
|
const [x, y] = group.pos;
|
|||
|
|
const relativeY = e.detail.originalEvent.canvasY - y;
|
|||
|
|
if (relativeY > group.titleHeight) {
|
|||
|
|
showSearchBox(e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "canvasEventHandler");
|
|||
|
|
const linkReleaseAction = computed(() => {
|
|||
|
|
return settingStore.get("Comfy.LinkRelease.Action");
|
|||
|
|
});
|
|||
|
|
const linkReleaseActionShift = computed(() => {
|
|||
|
|
return settingStore.get("Comfy.LinkRelease.ActionShift");
|
|||
|
|
});
|
|||
|
|
const handleCanvasEmptyRelease = /* @__PURE__ */ __name((e) => {
|
|||
|
|
const originalEvent = e.detail.originalEvent;
|
|||
|
|
const shiftPressed = originalEvent.shiftKey;
|
|||
|
|
const action = shiftPressed ? linkReleaseActionShift.value : linkReleaseAction.value;
|
|||
|
|
switch (action) {
|
|||
|
|
case LinkReleaseTriggerAction.SEARCH_BOX:
|
|||
|
|
showSearchBox(e);
|
|||
|
|
break;
|
|||
|
|
case LinkReleaseTriggerAction.CONTEXT_MENU:
|
|||
|
|
showContextMenu(e);
|
|||
|
|
break;
|
|||
|
|
case LinkReleaseTriggerAction.NO_ACTION:
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}, "handleCanvasEmptyRelease");
|
|||
|
|
onMounted(() => {
|
|||
|
|
document.addEventListener("litegraph:canvas", canvasEventHandler);
|
|||
|
|
});
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
document.removeEventListener("litegraph:canvas", canvasEventHandler);
|
|||
|
|
});
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createElementBlock("div", null, [
|
|||
|
|
createVNode(unref(script$m), {
|
|||
|
|
visible: visible.value,
|
|||
|
|
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
|
|||
|
|
modal: "",
|
|||
|
|
"dismissable-mask": dismissable.value,
|
|||
|
|
onHide: clearFilters,
|
|||
|
|
pt: {
|
|||
|
|
root: {
|
|||
|
|
class: "invisible-dialog-root",
|
|||
|
|
role: "search"
|
|||
|
|
},
|
|||
|
|
mask: { class: "node-search-box-dialog-mask" },
|
|||
|
|
transition: {
|
|||
|
|
enterFromClass: "opacity-0 scale-75",
|
|||
|
|
// 100ms is the duration of the transition in the dialog component
|
|||
|
|
enterActiveClass: "transition-all duration-100 ease-out",
|
|||
|
|
leaveActiveClass: "transition-all duration-100 ease-in",
|
|||
|
|
leaveToClass: "opacity-0 scale-75"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
container: withCtx(() => [
|
|||
|
|
createVNode(NodeSearchBox, {
|
|||
|
|
filters: nodeFilters.value,
|
|||
|
|
onAddFilter: addFilter,
|
|||
|
|
onRemoveFilter: removeFilter,
|
|||
|
|
onAddNode: addNode
|
|||
|
|
}, null, 8, ["filters"])
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
}, 8, ["visible", "dismissable-mask"])
|
|||
|
|
]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "NodeTooltip",
|
|||
|
|
setup(__props) {
|
|||
|
|
let idleTimeout;
|
|||
|
|
const nodeDefStore = useNodeDefStore();
|
|||
|
|
const tooltipRef = ref();
|
|||
|
|
const tooltipText = ref("");
|
|||
|
|
const left = ref();
|
|||
|
|
const top = ref();
|
|||
|
|
const getHoveredWidget = /* @__PURE__ */ __name(() => {
|
|||
|
|
const node = app.canvas.node_over;
|
|||
|
|
if (!node.widgets) return;
|
|||
|
|
const graphPos = app.canvas.graph_mouse;
|
|||
|
|
const x = graphPos[0] - node.pos[0];
|
|||
|
|
const y = graphPos[1] - node.pos[1];
|
|||
|
|
for (const w of node.widgets) {
|
|||
|
|
let widgetWidth, widgetHeight;
|
|||
|
|
if (w.computeSize) {
|
|||
|
|
;
|
|||
|
|
[widgetWidth, widgetHeight] = w.computeSize(node.size[0]);
|
|||
|
|
} else {
|
|||
|
|
widgetWidth = w.width || node.size[0];
|
|||
|
|
widgetHeight = LiteGraph.NODE_WIDGET_HEIGHT;
|
|||
|
|
}
|
|||
|
|
if (w.last_y !== void 0 && x >= 6 && x <= widgetWidth - 12 && y >= w.last_y && y <= w.last_y + widgetHeight) {
|
|||
|
|
return w;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "getHoveredWidget");
|
|||
|
|
const hideTooltip = /* @__PURE__ */ __name(() => tooltipText.value = null, "hideTooltip");
|
|||
|
|
const showTooltip = /* @__PURE__ */ __name(async (tooltip) => {
|
|||
|
|
if (!tooltip) return;
|
|||
|
|
left.value = app.canvas.mouse[0] + "px";
|
|||
|
|
top.value = app.canvas.mouse[1] + "px";
|
|||
|
|
tooltipText.value = tooltip;
|
|||
|
|
await nextTick();
|
|||
|
|
const rect = tooltipRef.value.getBoundingClientRect();
|
|||
|
|
if (rect.right > window.innerWidth) {
|
|||
|
|
left.value = app.canvas.mouse[0] - rect.width + "px";
|
|||
|
|
}
|
|||
|
|
if (rect.top < 0) {
|
|||
|
|
top.value = app.canvas.mouse[1] + rect.height + "px";
|
|||
|
|
}
|
|||
|
|
}, "showTooltip");
|
|||
|
|
const onIdle = /* @__PURE__ */ __name(() => {
|
|||
|
|
const { canvas } = app;
|
|||
|
|
const node = canvas.node_over;
|
|||
|
|
if (!node) return;
|
|||
|
|
const ctor = node.constructor;
|
|||
|
|
const nodeDef = nodeDefStore.nodeDefsByName[node.type];
|
|||
|
|
if (ctor.title_mode !== LiteGraph.NO_TITLE && canvas.graph_mouse[1] < node.pos[1]) {
|
|||
|
|
return showTooltip(nodeDef.description);
|
|||
|
|
}
|
|||
|
|
if (node.flags?.collapsed) return;
|
|||
|
|
const inputSlot = canvas.isOverNodeInput(
|
|||
|
|
node,
|
|||
|
|
canvas.graph_mouse[0],
|
|||
|
|
canvas.graph_mouse[1],
|
|||
|
|
[0, 0]
|
|||
|
|
);
|
|||
|
|
if (inputSlot !== -1) {
|
|||
|
|
const inputName = node.inputs[inputSlot].name;
|
|||
|
|
return showTooltip(nodeDef.input.getInput(inputName)?.tooltip);
|
|||
|
|
}
|
|||
|
|
const outputSlot = canvas.isOverNodeOutput(
|
|||
|
|
node,
|
|||
|
|
canvas.graph_mouse[0],
|
|||
|
|
canvas.graph_mouse[1],
|
|||
|
|
[0, 0]
|
|||
|
|
);
|
|||
|
|
if (outputSlot !== -1) {
|
|||
|
|
return showTooltip(nodeDef.output.all?.[outputSlot]?.tooltip);
|
|||
|
|
}
|
|||
|
|
const widget = getHoveredWidget();
|
|||
|
|
if (widget && !widget.element) {
|
|||
|
|
return showTooltip(
|
|||
|
|
widget.tooltip ?? nodeDef.input.getInput(widget.name)?.tooltip
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}, "onIdle");
|
|||
|
|
const onMouseMove = /* @__PURE__ */ __name((e) => {
|
|||
|
|
hideTooltip();
|
|||
|
|
clearTimeout(idleTimeout);
|
|||
|
|
if (e.target.nodeName !== "CANVAS") return;
|
|||
|
|
idleTimeout = window.setTimeout(onIdle, 500);
|
|||
|
|
}, "onMouseMove");
|
|||
|
|
useEventListener(window, "mousemove", onMouseMove);
|
|||
|
|
useEventListener(window, "click", hideTooltip);
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return tooltipText.value ? (openBlock(), createElementBlock("div", {
|
|||
|
|
key: 0,
|
|||
|
|
ref_key: "tooltipRef",
|
|||
|
|
ref: tooltipRef,
|
|||
|
|
class: "node-tooltip",
|
|||
|
|
style: normalizeStyle({ left: left.value, top: top.value })
|
|||
|
|
}, toDisplayString(tooltipText.value), 5)) : createCommentVNode("", true);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const NodeTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-79ec8c53"]]);
|
|||
|
|
const _hoisted_1$b = {
|
|||
|
|
viewBox: "0 0 1024 1024",
|
|||
|
|
width: "1.2em",
|
|||
|
|
height: "1.2em"
|
|||
|
|
};
|
|||
|
|
const _hoisted_2$8 = /* @__PURE__ */ createBaseVNode("path", {
|
|||
|
|
fill: "currentColor",
|
|||
|
|
d: "M921.088 103.232L584.832 889.024L465.52 544.512L121.328 440.48zM1004.46.769c-6.096 0-13.52 1.728-22.096 5.36L27.708 411.2c-34.383 14.592-36.56 42.704-4.847 62.464l395.296 123.584l129.36 403.264c9.28 15.184 20.496 22.72 31.263 22.72c11.936 0 23.296-9.152 31.04-27.248l408.272-953.728C1029.148 16.368 1022.86.769 1004.46.769"
|
|||
|
|
}, null, -1);
|
|||
|
|
const _hoisted_3$6 = [
|
|||
|
|
_hoisted_2$8
|
|||
|
|
];
|
|||
|
|
function render$9(_ctx, _cache) {
|
|||
|
|
return openBlock(), createElementBlock("svg", _hoisted_1$b, [..._hoisted_3$6]);
|
|||
|
|
}
|
|||
|
|
__name(render$9, "render$9");
|
|||
|
|
const __unplugin_components_1 = markRaw({ name: "simple-line-icons-cursor", render: render$9 });
|
|||
|
|
const _hoisted_1$a = {
|
|||
|
|
viewBox: "0 0 24 24",
|
|||
|
|
width: "1.2em",
|
|||
|
|
height: "1.2em"
|
|||
|
|
};
|
|||
|
|
const _hoisted_2$7 = /* @__PURE__ */ createBaseVNode("path", {
|
|||
|
|
fill: "currentColor",
|
|||
|
|
d: "M10.05 23q-.75 0-1.4-.337T7.575 21.7L1.2 12.375l.6-.575q.475-.475 1.125-.55t1.175.3L7 13.575V4q0-.425.288-.712T8 3t.713.288T9 4v13.425l-3.7-2.6l3.925 5.725q.125.2.35.325t.475.125H17q.825 0 1.413-.587T19 19V5q0-.425.288-.712T20 4t.713.288T21 5v14q0 1.65-1.175 2.825T17 23zM11 12V2q0-.425.288-.712T12 1t.713.288T13 2v10zm4 0V3q0-.425.288-.712T16 2t.713.288T17 3v9zm-2.85 4.5"
|
|||
|
|
}, null, -1);
|
|||
|
|
const _hoisted_3$5 = [
|
|||
|
|
_hoisted_2$7
|
|||
|
|
];
|
|||
|
|
function render$8(_ctx, _cache) {
|
|||
|
|
return openBlock(), createElementBlock("svg", _hoisted_1$a, [..._hoisted_3$5]);
|
|||
|
|
}
|
|||
|
|
__name(render$8, "render$8");
|
|||
|
|
const __unplugin_components_0$1 = markRaw({ name: "material-symbols-pan-tool-outline", render: render$8 });
|
|||
|
|
var theme$5 = /* @__PURE__ */ __name(function theme4(_ref) {
|
|||
|
|
_ref.dt;
|
|||
|
|
return "\n.p-buttongroup .p-button {\n margin: 0;\n}\n\n.p-buttongroup .p-button:not(:last-child),\n.p-buttongroup .p-button:not(:last-child):hover {\n border-right: 0 none;\n}\n\n.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) {\n border-radius: 0;\n}\n\n.p-buttongroup .p-button:first-of-type:not(:only-of-type) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.p-buttongroup .p-button:last-of-type:not(:only-of-type) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.p-buttongroup .p-button:focus {\n position: relative;\n z-index: 1;\n}\n";
|
|||
|
|
}, "theme");
|
|||
|
|
var classes$5 = {
|
|||
|
|
root: "p-buttongroup p-component"
|
|||
|
|
};
|
|||
|
|
var ButtonGroupStyle = BaseStyle.extend({
|
|||
|
|
name: "buttongroup",
|
|||
|
|
theme: theme$5,
|
|||
|
|
classes: classes$5
|
|||
|
|
});
|
|||
|
|
var script$1$5 = {
|
|||
|
|
name: "BaseButtonGroup",
|
|||
|
|
"extends": script$e,
|
|||
|
|
style: ButtonGroupStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide6() {
|
|||
|
|
return {
|
|||
|
|
$pcButtonGroup: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
var script$7 = {
|
|||
|
|
name: "ButtonGroup",
|
|||
|
|
"extends": script$1$5,
|
|||
|
|
inheritAttrs: false
|
|||
|
|
};
|
|||
|
|
function render$7(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
return openBlock(), createElementBlock("span", mergeProps({
|
|||
|
|
"class": _ctx.cx("root"),
|
|||
|
|
role: "group"
|
|||
|
|
}, _ctx.ptmi("root")), [renderSlot(_ctx.$slots, "default")], 16);
|
|||
|
|
}
|
|||
|
|
__name(render$7, "render$7");
|
|||
|
|
script$7.render = render$7;
|
|||
|
|
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "GraphCanvasMenu",
|
|||
|
|
setup(__props) {
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
const commandStore = useCommandStore();
|
|||
|
|
const canvasStore = useCanvasStore();
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const linkHidden = computed(
|
|||
|
|
() => settingStore.get("Comfy.LinkRenderMode") === LiteGraph.HIDDEN_LINK
|
|||
|
|
);
|
|||
|
|
let interval = null;
|
|||
|
|
const repeat2 = /* @__PURE__ */ __name((command) => {
|
|||
|
|
if (interval) return;
|
|||
|
|
const cmd = /* @__PURE__ */ __name(() => commandStore.execute(command), "cmd");
|
|||
|
|
cmd();
|
|||
|
|
interval = window.setInterval(cmd, 100);
|
|||
|
|
}, "repeat");
|
|||
|
|
const stopRepeat = /* @__PURE__ */ __name(() => {
|
|||
|
|
if (interval) {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
interval = null;
|
|||
|
|
}
|
|||
|
|
}, "stopRepeat");
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
const _component_i_material_symbols58pan_tool_outline = __unplugin_components_0$1;
|
|||
|
|
const _component_i_simple_line_icons58cursor = __unplugin_components_1;
|
|||
|
|
const _directive_tooltip = resolveDirective("tooltip");
|
|||
|
|
return openBlock(), createBlock(unref(script$7), { class: "p-buttongroup-vertical absolute bottom-[10px] right-[10px] z-[1000] pointer-events-auto" }, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
withDirectives(createVNode(unref(script$d), {
|
|||
|
|
severity: "secondary",
|
|||
|
|
icon: "pi pi-plus",
|
|||
|
|
onMousedown: _cache[0] || (_cache[0] = ($event) => repeat2("Comfy.Canvas.ZoomIn")),
|
|||
|
|
onMouseup: stopRepeat
|
|||
|
|
}, null, 512), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
unref(t)("graphCanvasMenu.zoomIn"),
|
|||
|
|
void 0,
|
|||
|
|
{ left: true }
|
|||
|
|
]
|
|||
|
|
]),
|
|||
|
|
withDirectives(createVNode(unref(script$d), {
|
|||
|
|
severity: "secondary",
|
|||
|
|
icon: "pi pi-minus",
|
|||
|
|
onMousedown: _cache[1] || (_cache[1] = ($event) => repeat2("Comfy.Canvas.ZoomOut")),
|
|||
|
|
onMouseup: stopRepeat
|
|||
|
|
}, null, 512), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
unref(t)("graphCanvasMenu.zoomOut"),
|
|||
|
|
void 0,
|
|||
|
|
{ left: true }
|
|||
|
|
]
|
|||
|
|
]),
|
|||
|
|
withDirectives(createVNode(unref(script$d), {
|
|||
|
|
severity: "secondary",
|
|||
|
|
icon: "pi pi-expand",
|
|||
|
|
onClick: _cache[2] || (_cache[2] = () => unref(commandStore).execute("Comfy.Canvas.ResetView"))
|
|||
|
|
}, null, 512), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
unref(t)("graphCanvasMenu.resetView"),
|
|||
|
|
void 0,
|
|||
|
|
{ left: true }
|
|||
|
|
]
|
|||
|
|
]),
|
|||
|
|
withDirectives((openBlock(), createBlock(unref(script$d), {
|
|||
|
|
severity: "secondary",
|
|||
|
|
onClick: _cache[3] || (_cache[3] = () => unref(commandStore).execute("Comfy.Canvas.ToggleLock"))
|
|||
|
|
}, {
|
|||
|
|
icon: withCtx(() => [
|
|||
|
|
unref(canvasStore).canvas?.read_only ? (openBlock(), createBlock(_component_i_material_symbols58pan_tool_outline, { key: 0 })) : (openBlock(), createBlock(_component_i_simple_line_icons58cursor, { key: 1 }))
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
})), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
unref(t)(
|
|||
|
|
"graphCanvasMenu." + (unref(canvasStore).canvas?.read_only ? "panMode" : "selectMode")
|
|||
|
|
) + " (Space)",
|
|||
|
|
void 0,
|
|||
|
|
{ left: true }
|
|||
|
|
]
|
|||
|
|
]),
|
|||
|
|
withDirectives(createVNode(unref(script$d), {
|
|||
|
|
severity: "secondary",
|
|||
|
|
icon: linkHidden.value ? "pi pi-eye-slash" : "pi pi-eye",
|
|||
|
|
onClick: _cache[4] || (_cache[4] = () => unref(commandStore).execute("Comfy.Canvas.ToggleLinkVisibility")),
|
|||
|
|
"data-testid": "toggle-link-visibility-button"
|
|||
|
|
}, null, 8, ["icon"]), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
unref(t)("graphCanvasMenu.toggleLinkVisibility"),
|
|||
|
|
void 0,
|
|||
|
|
{ left: true }
|
|||
|
|
]
|
|||
|
|
])
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const GraphCanvasMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-444d3768"]]);
|
|||
|
|
const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "GraphCanvas",
|
|||
|
|
emits: ["ready"],
|
|||
|
|
setup(__props, { emit: __emit }) {
|
|||
|
|
const emit = __emit;
|
|||
|
|
const canvasRef = ref(null);
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const nodeDefStore = useNodeDefStore();
|
|||
|
|
const workspaceStore = useWorkspaceStore();
|
|||
|
|
const canvasStore = useCanvasStore();
|
|||
|
|
const modelToNodeStore = useModelToNodeStore();
|
|||
|
|
const betaMenuEnabled = computed(
|
|||
|
|
() => settingStore.get("Comfy.UseNewMenu") !== "Disabled"
|
|||
|
|
);
|
|||
|
|
const canvasMenuEnabled = computed(
|
|||
|
|
() => settingStore.get("Comfy.Graph.CanvasMenu")
|
|||
|
|
);
|
|||
|
|
const tooltipEnabled = computed(() => settingStore.get("Comfy.EnableTooltips"));
|
|||
|
|
watchEffect(() => {
|
|||
|
|
const canvasInfoEnabled = settingStore.get("Comfy.Graph.CanvasInfo");
|
|||
|
|
if (canvasStore.canvas) {
|
|||
|
|
canvasStore.canvas.show_info = canvasInfoEnabled;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
watchEffect(() => {
|
|||
|
|
const zoomSpeed = settingStore.get("Comfy.Graph.ZoomSpeed");
|
|||
|
|
if (canvasStore.canvas) {
|
|||
|
|
canvasStore.canvas.zoom_speed = zoomSpeed;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
watchEffect(() => {
|
|||
|
|
nodeDefStore.showDeprecated = settingStore.get("Comfy.Node.ShowDeprecated");
|
|||
|
|
});
|
|||
|
|
watchEffect(() => {
|
|||
|
|
nodeDefStore.showExperimental = settingStore.get(
|
|||
|
|
"Comfy.Node.ShowExperimental"
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
watchEffect(() => {
|
|||
|
|
const spellcheckEnabled = settingStore.get("Comfy.TextareaWidget.Spellcheck");
|
|||
|
|
const textareas = document.querySelectorAll("textarea.comfy-multiline-input");
|
|||
|
|
textareas.forEach((textarea) => {
|
|||
|
|
textarea.spellcheck = spellcheckEnabled;
|
|||
|
|
textarea.focus();
|
|||
|
|
textarea.blur();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
watchEffect(() => {
|
|||
|
|
if (!canvasStore.canvas) return;
|
|||
|
|
if (canvasStore.canvas.dragging_canvas) {
|
|||
|
|
canvasStore.canvas.canvas.style.cursor = "grabbing";
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (canvasStore.canvas.read_only) {
|
|||
|
|
canvasStore.canvas.canvas.style.cursor = "grab";
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
canvasStore.canvas.canvas.style.cursor = "default";
|
|||
|
|
});
|
|||
|
|
usePragmaticDroppable(() => canvasRef.value, {
|
|||
|
|
onDrop: /* @__PURE__ */ __name((event) => {
|
|||
|
|
const loc = event.location.current.input;
|
|||
|
|
const dndData = event.source.data;
|
|||
|
|
if (dndData.type === "tree-explorer-node") {
|
|||
|
|
const node = dndData.data;
|
|||
|
|
if (node.data instanceof ComfyNodeDefImpl) {
|
|||
|
|
const nodeDef = node.data;
|
|||
|
|
const pos = app.clientPosToCanvasPos([
|
|||
|
|
loc.clientX - 20,
|
|||
|
|
loc.clientY
|
|||
|
|
]);
|
|||
|
|
app.addNodeOnGraph(nodeDef, { pos });
|
|||
|
|
} else if (node.data instanceof ComfyModelDef) {
|
|||
|
|
const model = node.data;
|
|||
|
|
const pos = app.clientPosToCanvasPos([loc.clientX, loc.clientY]);
|
|||
|
|
const nodeAtPos = app.graph.getNodeOnPos(pos[0], pos[1]);
|
|||
|
|
let targetProvider = null;
|
|||
|
|
let targetGraphNode = null;
|
|||
|
|
if (nodeAtPos) {
|
|||
|
|
const providers = modelToNodeStore.getAllNodeProviders(
|
|||
|
|
model.directory
|
|||
|
|
);
|
|||
|
|
for (const provider of providers) {
|
|||
|
|
if (provider.nodeDef.name === nodeAtPos.comfyClass) {
|
|||
|
|
targetGraphNode = nodeAtPos;
|
|||
|
|
targetProvider = provider;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!targetGraphNode) {
|
|||
|
|
const provider = modelToNodeStore.getNodeProvider(model.directory);
|
|||
|
|
if (provider) {
|
|||
|
|
targetGraphNode = app.addNodeOnGraph(provider.nodeDef, {
|
|||
|
|
pos
|
|||
|
|
});
|
|||
|
|
targetProvider = provider;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (targetGraphNode) {
|
|||
|
|
const widget = targetGraphNode.widgets.find(
|
|||
|
|
(widget2) => widget2.name === targetProvider.key
|
|||
|
|
);
|
|||
|
|
if (widget) {
|
|||
|
|
widget.value = model.file_name;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "onDrop")
|
|||
|
|
});
|
|||
|
|
onMounted(async () => {
|
|||
|
|
window["LiteGraph"] = LiteGraph;
|
|||
|
|
window["LGraph"] = LGraph;
|
|||
|
|
window["LLink"] = LLink;
|
|||
|
|
window["LGraphNode"] = LGraphNode;
|
|||
|
|
window["LGraphGroup"] = LGraphGroup;
|
|||
|
|
window["DragAndScale"] = DragAndScale;
|
|||
|
|
window["LGraphCanvas"] = LGraphCanvas;
|
|||
|
|
window["ContextMenu"] = ContextMenu;
|
|||
|
|
window["LGraphBadge"] = LGraphBadge;
|
|||
|
|
app.vueAppReady = true;
|
|||
|
|
workspaceStore.spinner = true;
|
|||
|
|
await app.setup(canvasRef.value);
|
|||
|
|
canvasStore.canvas = app.canvas;
|
|||
|
|
workspaceStore.spinner = false;
|
|||
|
|
window["app"] = app;
|
|||
|
|
window["graph"] = app.graph;
|
|||
|
|
emit("ready");
|
|||
|
|
});
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|||
|
|
(openBlock(), createBlock(Teleport, { to: ".graph-canvas-container" }, [
|
|||
|
|
betaMenuEnabled.value ? (openBlock(), createBlock(LiteGraphCanvasSplitterOverlay, { key: 0 }, {
|
|||
|
|
"side-bar-panel": withCtx(() => [
|
|||
|
|
createVNode(SideToolbar)
|
|||
|
|
]),
|
|||
|
|
"graph-canvas-panel": withCtx(() => [
|
|||
|
|
canvasMenuEnabled.value ? (openBlock(), createBlock(GraphCanvasMenu, { key: 0 })) : createCommentVNode("", true)
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
})) : createCommentVNode("", true),
|
|||
|
|
createVNode(TitleEditor),
|
|||
|
|
!betaMenuEnabled.value && canvasMenuEnabled.value ? (openBlock(), createBlock(GraphCanvasMenu, { key: 1 })) : createCommentVNode("", true),
|
|||
|
|
createBaseVNode("canvas", {
|
|||
|
|
ref_key: "canvasRef",
|
|||
|
|
ref: canvasRef,
|
|||
|
|
id: "graph-canvas",
|
|||
|
|
tabindex: "1"
|
|||
|
|
}, null, 512)
|
|||
|
|
])),
|
|||
|
|
createVNode(_sfc_main$d),
|
|||
|
|
tooltipEnabled.value ? (openBlock(), createBlock(NodeTooltip, { key: 0 })) : createCommentVNode("", true)
|
|||
|
|
], 64);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
function _typeof$3(o) {
|
|||
|
|
"@babel/helpers - typeof";
|
|||
|
|
return _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
|
|||
|
|
return typeof o2;
|
|||
|
|
} : function(o2) {
|
|||
|
|
return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
|
|||
|
|
}, _typeof$3(o);
|
|||
|
|
}
|
|||
|
|
__name(_typeof$3, "_typeof$3");
|
|||
|
|
function _defineProperty$3(e, r, t) {
|
|||
|
|
return (r = _toPropertyKey$3(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
|
|||
|
|
}
|
|||
|
|
__name(_defineProperty$3, "_defineProperty$3");
|
|||
|
|
function _toPropertyKey$3(t) {
|
|||
|
|
var i = _toPrimitive$3(t, "string");
|
|||
|
|
return "symbol" == _typeof$3(i) ? i : i + "";
|
|||
|
|
}
|
|||
|
|
__name(_toPropertyKey$3, "_toPropertyKey$3");
|
|||
|
|
function _toPrimitive$3(t, r) {
|
|||
|
|
if ("object" != _typeof$3(t) || !t) return t;
|
|||
|
|
var e = t[Symbol.toPrimitive];
|
|||
|
|
if (void 0 !== e) {
|
|||
|
|
var i = e.call(t, r || "default");
|
|||
|
|
if ("object" != _typeof$3(i)) return i;
|
|||
|
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|||
|
|
}
|
|||
|
|
return ("string" === r ? String : Number)(t);
|
|||
|
|
}
|
|||
|
|
__name(_toPrimitive$3, "_toPrimitive$3");
|
|||
|
|
var theme$4 = /* @__PURE__ */ __name(function theme5(_ref) {
|
|||
|
|
var dt = _ref.dt;
|
|||
|
|
return "\n.p-toast {\n width: ".concat(dt("toast.width"), ";\n white-space: pre-line;\n word-break: break-word;\n}\n\n.p-toast-message {\n margin: 0 0 1rem 0;\n}\n\n.p-toast-message-icon {\n flex-shrink: 0;\n font-size: ").concat(dt("toast.icon.size"), ";\n width: ").concat(dt("toast.icon.size"), ";\n height: ").concat(dt("toast.icon.size"), ";\n}\n\n.p-toast-message-content {\n display: flex;\n align-items: flex-start;\n padding: ").concat(dt("toast.content.padding"), ";\n gap: ").concat(dt("toast.content.gap"), ";\n}\n\n.p-toast-message-text {\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n gap: ").concat(dt("toast.text.gap"), ";\n}\n\n.p-toast-summary {\n font-weight: ").concat(dt("toast.summary.font.weight"), ";\n font-size: ").concat(dt("toast.summary.font.size"), ";\n}\n\n.p-toast-detail {\n font-weight: ").concat(dt("toast.detail.font.weight"), ";\n font-size: ").concat(dt("toast.detail.font.size"), ";\n}\n\n.p-toast-close-button {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n background: transparent;\n transition: background ").concat(dt("toast.transition.duration"), ", color ").concat(dt("toast.transition.duration"), ", outline-color ").concat(dt("toast.transition.duration"), ", box-shadow ").concat(dt("toast.transition.duration"), ";\n outline-color: transparent;\n color: inherit;\n width: ").concat(dt("toast.close.button.width"), ";\n height: ").concat(dt("toast.close.button.height"), ";\n border-radius: ").concat(dt("toast.close.button.border.radius"), ";\n margin: -25% 0 0 0;\n right: -25%;\n padding: 0;\n border: none;\n user-select: none;\n}\n\n.p-toast-message-info,\n.p-toast-message-success,\n.p-toast-message-warn,\n.p-toast-message-error,\n.p-toast-message-secondary,\n.p-toast-message-contrast {\n border-width: ").concat(dt("toast.border.width"), ";\n border-style: solid;\n backdrop-filter: blur(").concat(dt("toast.blur"), ");\n border-radius: ").concat(dt("toast.border.radius"), ";\n}\n\n.p-toast-close-icon {\n font-size: ").concat(dt("toast.close.icon.size"), ";\n width: ").concat(dt("toast.close.icon.size"), ";\n height: ").concat(dt("toast.close.icon.size"), ";\n}\n\n.p-toast-close-button:focus-visible {\n outline-width: ").concat(dt("focus.ring.width"), ";\n outline-style: ").concat(dt("focus.ring.style"), ";\n outline-offset: ").concat(dt("focus.ring.offset"), ";\n}\n\n.p-toast-message-info {\n background: ").concat(dt("toast.info.background"), ";\n border-color: ").concat(dt("toast.info.border.color"), ";\n color: ").concat(dt("toast.info.color"), ";\n box-shadow: ").concat(dt("toast.info.shadow"), ";\n}\n\n.p-toast-message-info .p-toast-detail {\n color: ").concat(dt("toast.info.detail.color"), ";\n}\n\n.p-toast-message-info .p-toast-close-button:focus-visible {\n outline-color: ").concat(dt("toast.info.close.button.focus.ring.color"), ";\n box-shadow: ").concat(dt("toast.info.close.button.focus.ring.shadow"), ";\n}\n\n.p-toast-message-info .p-toast-close-button:hover {\n background: ").concat(dt("toast.info.close.button.hover.background"), ";\n}\n\n.p-toast-message-success {\n background: ").concat(dt("toast.success.background"), ";\n border-color: ").concat(dt("toast.success.border.color"), ";\n color: ").concat(dt("toast.success.color"), ";\n box-shadow: ").concat(dt("toast.success.shadow"), ";\n}\n\n.p-toast-message-success .p-toast-detail {\n color: ").concat(dt("toast.success.detail.color"), ";\n}\n\n.p-toast-message-success .p-toast-close-button:focus-visible {\n outline-color: ").concat(dt("toast.success.close.button.focus.ring.color"), ";\n box-shadow: ").concat(dt("toast.success.close.button.focus.ring.shadow"), ";\n}\n\n.p-toast-message-success .p-toast-close-button:hover {\n background: ").concat(dt("toast.success.close.button.hover.background"), ";\n}\n\n.p-toast-message-warn {\n background:
|
|||
|
|
}, "theme");
|
|||
|
|
var inlineStyles$2 = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root5(_ref2) {
|
|||
|
|
var position = _ref2.position;
|
|||
|
|
return {
|
|||
|
|
position: "fixed",
|
|||
|
|
top: position === "top-right" || position === "top-left" || position === "top-center" ? "20px" : position === "center" ? "50%" : null,
|
|||
|
|
right: (position === "top-right" || position === "bottom-right") && "20px",
|
|||
|
|
bottom: (position === "bottom-left" || position === "bottom-right" || position === "bottom-center") && "20px",
|
|||
|
|
left: position === "top-left" || position === "bottom-left" ? "20px" : position === "center" || position === "top-center" || position === "bottom-center" ? "50%" : null
|
|||
|
|
};
|
|||
|
|
}, "root")
|
|||
|
|
};
|
|||
|
|
var classes$4 = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root6(_ref3) {
|
|||
|
|
var props = _ref3.props;
|
|||
|
|
return ["p-toast p-component p-toast-" + props.position];
|
|||
|
|
}, "root"),
|
|||
|
|
message: /* @__PURE__ */ __name(function message(_ref4) {
|
|||
|
|
var props = _ref4.props;
|
|||
|
|
return ["p-toast-message", {
|
|||
|
|
"p-toast-message-info": props.message.severity === "info" || props.message.severity === void 0,
|
|||
|
|
"p-toast-message-warn": props.message.severity === "warn",
|
|||
|
|
"p-toast-message-error": props.message.severity === "error",
|
|||
|
|
"p-toast-message-success": props.message.severity === "success",
|
|||
|
|
"p-toast-message-secondary": props.message.severity === "secondary",
|
|||
|
|
"p-toast-message-contrast": props.message.severity === "contrast"
|
|||
|
|
}];
|
|||
|
|
}, "message"),
|
|||
|
|
messageContent: "p-toast-message-content",
|
|||
|
|
messageIcon: /* @__PURE__ */ __name(function messageIcon(_ref5) {
|
|||
|
|
var props = _ref5.props;
|
|||
|
|
return ["p-toast-message-icon", _defineProperty$3(_defineProperty$3(_defineProperty$3(_defineProperty$3({}, props.infoIcon, props.message.severity === "info"), props.warnIcon, props.message.severity === "warn"), props.errorIcon, props.message.severity === "error"), props.successIcon, props.message.severity === "success")];
|
|||
|
|
}, "messageIcon"),
|
|||
|
|
messageText: "p-toast-message-text",
|
|||
|
|
summary: "p-toast-summary",
|
|||
|
|
detail: "p-toast-detail",
|
|||
|
|
closeButton: "p-toast-close-button",
|
|||
|
|
closeIcon: "p-toast-close-icon"
|
|||
|
|
};
|
|||
|
|
var ToastStyle = BaseStyle.extend({
|
|||
|
|
name: "toast",
|
|||
|
|
theme: theme$4,
|
|||
|
|
classes: classes$4,
|
|||
|
|
inlineStyles: inlineStyles$2
|
|||
|
|
});
|
|||
|
|
var script$2$2 = {
|
|||
|
|
name: "BaseToast",
|
|||
|
|
"extends": script$e,
|
|||
|
|
props: {
|
|||
|
|
group: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
position: {
|
|||
|
|
type: String,
|
|||
|
|
"default": "top-right"
|
|||
|
|
},
|
|||
|
|
autoZIndex: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": true
|
|||
|
|
},
|
|||
|
|
baseZIndex: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 0
|
|||
|
|
},
|
|||
|
|
breakpoints: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
closeIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": void 0
|
|||
|
|
},
|
|||
|
|
infoIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": void 0
|
|||
|
|
},
|
|||
|
|
warnIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": void 0
|
|||
|
|
},
|
|||
|
|
errorIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": void 0
|
|||
|
|
},
|
|||
|
|
successIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": void 0
|
|||
|
|
},
|
|||
|
|
closeButtonProps: {
|
|||
|
|
type: null,
|
|||
|
|
"default": null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
style: ToastStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide7() {
|
|||
|
|
return {
|
|||
|
|
$pcToast: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
var script$1$4 = {
|
|||
|
|
name: "ToastMessage",
|
|||
|
|
hostName: "Toast",
|
|||
|
|
"extends": script$e,
|
|||
|
|
emits: ["close"],
|
|||
|
|
closeTimeout: null,
|
|||
|
|
props: {
|
|||
|
|
message: {
|
|||
|
|
type: null,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
templates: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
closeIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
infoIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
warnIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
errorIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
successIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
closeButtonProps: {
|
|||
|
|
type: null,
|
|||
|
|
"default": null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted: /* @__PURE__ */ __name(function mounted3() {
|
|||
|
|
var _this = this;
|
|||
|
|
if (this.message.life) {
|
|||
|
|
this.closeTimeout = setTimeout(function() {
|
|||
|
|
_this.close({
|
|||
|
|
message: _this.message,
|
|||
|
|
type: "life-end"
|
|||
|
|
});
|
|||
|
|
}, this.message.life);
|
|||
|
|
}
|
|||
|
|
}, "mounted"),
|
|||
|
|
beforeUnmount: /* @__PURE__ */ __name(function beforeUnmount3() {
|
|||
|
|
this.clearCloseTimeout();
|
|||
|
|
}, "beforeUnmount"),
|
|||
|
|
methods: {
|
|||
|
|
close: /* @__PURE__ */ __name(function close(params) {
|
|||
|
|
this.$emit("close", params);
|
|||
|
|
}, "close"),
|
|||
|
|
onCloseClick: /* @__PURE__ */ __name(function onCloseClick() {
|
|||
|
|
this.clearCloseTimeout();
|
|||
|
|
this.close({
|
|||
|
|
message: this.message,
|
|||
|
|
type: "close"
|
|||
|
|
});
|
|||
|
|
}, "onCloseClick"),
|
|||
|
|
clearCloseTimeout: /* @__PURE__ */ __name(function clearCloseTimeout() {
|
|||
|
|
if (this.closeTimeout) {
|
|||
|
|
clearTimeout(this.closeTimeout);
|
|||
|
|
this.closeTimeout = null;
|
|||
|
|
}
|
|||
|
|
}, "clearCloseTimeout")
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
iconComponent: /* @__PURE__ */ __name(function iconComponent() {
|
|||
|
|
return {
|
|||
|
|
info: !this.infoIcon && script$n,
|
|||
|
|
success: !this.successIcon && script$o,
|
|||
|
|
warn: !this.warnIcon && script$p,
|
|||
|
|
error: !this.errorIcon && script$q
|
|||
|
|
}[this.message.severity];
|
|||
|
|
}, "iconComponent"),
|
|||
|
|
closeAriaLabel: /* @__PURE__ */ __name(function closeAriaLabel() {
|
|||
|
|
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : void 0;
|
|||
|
|
}, "closeAriaLabel")
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
TimesIcon: script$r,
|
|||
|
|
InfoCircleIcon: script$n,
|
|||
|
|
CheckIcon: script$o,
|
|||
|
|
ExclamationTriangleIcon: script$p,
|
|||
|
|
TimesCircleIcon: script$q
|
|||
|
|
},
|
|||
|
|
directives: {
|
|||
|
|
ripple: Ripple
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
function _typeof$1(o) {
|
|||
|
|
"@babel/helpers - typeof";
|
|||
|
|
return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
|
|||
|
|
return typeof o2;
|
|||
|
|
} : function(o2) {
|
|||
|
|
return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
|
|||
|
|
}, _typeof$1(o);
|
|||
|
|
}
|
|||
|
|
__name(_typeof$1, "_typeof$1");
|
|||
|
|
function ownKeys$1(e, r) {
|
|||
|
|
var t = Object.keys(e);
|
|||
|
|
if (Object.getOwnPropertySymbols) {
|
|||
|
|
var o = Object.getOwnPropertySymbols(e);
|
|||
|
|
r && (o = o.filter(function(r2) {
|
|||
|
|
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|||
|
|
})), t.push.apply(t, o);
|
|||
|
|
}
|
|||
|
|
return t;
|
|||
|
|
}
|
|||
|
|
__name(ownKeys$1, "ownKeys$1");
|
|||
|
|
function _objectSpread$1(e) {
|
|||
|
|
for (var r = 1; r < arguments.length; r++) {
|
|||
|
|
var t = null != arguments[r] ? arguments[r] : {};
|
|||
|
|
r % 2 ? ownKeys$1(Object(t), true).forEach(function(r2) {
|
|||
|
|
_defineProperty$1(e, r2, t[r2]);
|
|||
|
|
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r2) {
|
|||
|
|
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return e;
|
|||
|
|
}
|
|||
|
|
__name(_objectSpread$1, "_objectSpread$1");
|
|||
|
|
function _defineProperty$1(e, r, t) {
|
|||
|
|
return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
|
|||
|
|
}
|
|||
|
|
__name(_defineProperty$1, "_defineProperty$1");
|
|||
|
|
function _toPropertyKey$1(t) {
|
|||
|
|
var i = _toPrimitive$1(t, "string");
|
|||
|
|
return "symbol" == _typeof$1(i) ? i : i + "";
|
|||
|
|
}
|
|||
|
|
__name(_toPropertyKey$1, "_toPropertyKey$1");
|
|||
|
|
function _toPrimitive$1(t, r) {
|
|||
|
|
if ("object" != _typeof$1(t) || !t) return t;
|
|||
|
|
var e = t[Symbol.toPrimitive];
|
|||
|
|
if (void 0 !== e) {
|
|||
|
|
var i = e.call(t, r || "default");
|
|||
|
|
if ("object" != _typeof$1(i)) return i;
|
|||
|
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|||
|
|
}
|
|||
|
|
return ("string" === r ? String : Number)(t);
|
|||
|
|
}
|
|||
|
|
__name(_toPrimitive$1, "_toPrimitive$1");
|
|||
|
|
var _hoisted_1$9 = ["aria-label"];
|
|||
|
|
function render$1$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _directive_ripple = resolveDirective("ripple");
|
|||
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
"class": [_ctx.cx("message"), $props.message.styleClass],
|
|||
|
|
role: "alert",
|
|||
|
|
"aria-live": "assertive",
|
|||
|
|
"aria-atomic": "true"
|
|||
|
|
}, _ctx.ptm("message")), [$props.templates.container ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.container), {
|
|||
|
|
key: 0,
|
|||
|
|
message: $props.message,
|
|||
|
|
closeCallback: $options.onCloseClick
|
|||
|
|
}, null, 8, ["message", "closeCallback"])) : (openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
"class": [_ctx.cx("messageContent"), $props.message.contentStyleClass]
|
|||
|
|
}, _ctx.ptm("messageContent")), [!$props.templates.message ? (openBlock(), createElementBlock(Fragment, {
|
|||
|
|
key: 0
|
|||
|
|
}, [(openBlock(), createBlock(resolveDynamicComponent($props.templates.messageicon ? $props.templates.messageicon : $props.templates.icon ? $props.templates.icon : $options.iconComponent && $options.iconComponent.name ? $options.iconComponent : "span"), mergeProps({
|
|||
|
|
"class": _ctx.cx("messageIcon")
|
|||
|
|
}, _ctx.ptm("messageIcon")), null, 16, ["class"])), createBaseVNode("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("messageText")
|
|||
|
|
}, _ctx.ptm("messageText")), [createBaseVNode("span", mergeProps({
|
|||
|
|
"class": _ctx.cx("summary")
|
|||
|
|
}, _ctx.ptm("summary")), toDisplayString($props.message.summary), 17), createBaseVNode("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("detail")
|
|||
|
|
}, _ctx.ptm("detail")), toDisplayString($props.message.detail), 17)], 16)], 64)) : (openBlock(), createBlock(resolveDynamicComponent($props.templates.message), {
|
|||
|
|
key: 1,
|
|||
|
|
message: $props.message
|
|||
|
|
}, null, 8, ["message"])), $props.message.closable !== false ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({
|
|||
|
|
key: 2
|
|||
|
|
}, _ctx.ptm("buttonContainer"))), [withDirectives((openBlock(), createElementBlock("button", mergeProps({
|
|||
|
|
"class": _ctx.cx("closeButton"),
|
|||
|
|
type: "button",
|
|||
|
|
"aria-label": $options.closeAriaLabel,
|
|||
|
|
onClick: _cache[0] || (_cache[0] = function() {
|
|||
|
|
return $options.onCloseClick && $options.onCloseClick.apply($options, arguments);
|
|||
|
|
}),
|
|||
|
|
autofocus: ""
|
|||
|
|
}, _objectSpread$1(_objectSpread$1({}, $props.closeButtonProps), _ctx.ptm("closeButton"))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates.closeicon || "TimesIcon"), mergeProps({
|
|||
|
|
"class": [_ctx.cx("closeIcon"), $props.closeIcon]
|
|||
|
|
}, _ctx.ptm("closeIcon")), null, 16, ["class"]))], 16, _hoisted_1$9)), [[_directive_ripple]])], 16)) : createCommentVNode("", true)], 16))], 16);
|
|||
|
|
}
|
|||
|
|
__name(render$1$2, "render$1$2");
|
|||
|
|
script$1$4.render = render$1$2;
|
|||
|
|
function _toConsumableArray(r) {
|
|||
|
|
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
|||
|
|
}
|
|||
|
|
__name(_toConsumableArray, "_toConsumableArray");
|
|||
|
|
function _nonIterableSpread() {
|
|||
|
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|||
|
|
}
|
|||
|
|
__name(_nonIterableSpread, "_nonIterableSpread");
|
|||
|
|
function _unsupportedIterableToArray(r, a) {
|
|||
|
|
if (r) {
|
|||
|
|
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|||
|
|
var t = {}.toString.call(r).slice(8, -1);
|
|||
|
|
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
__name(_unsupportedIterableToArray, "_unsupportedIterableToArray");
|
|||
|
|
function _iterableToArray(r) {
|
|||
|
|
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|||
|
|
}
|
|||
|
|
__name(_iterableToArray, "_iterableToArray");
|
|||
|
|
function _arrayWithoutHoles(r) {
|
|||
|
|
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
|||
|
|
}
|
|||
|
|
__name(_arrayWithoutHoles, "_arrayWithoutHoles");
|
|||
|
|
function _arrayLikeToArray(r, a) {
|
|||
|
|
(null == a || a > r.length) && (a = r.length);
|
|||
|
|
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|||
|
|
return n;
|
|||
|
|
}
|
|||
|
|
__name(_arrayLikeToArray, "_arrayLikeToArray");
|
|||
|
|
var messageIdx = 0;
|
|||
|
|
var script$6 = {
|
|||
|
|
name: "Toast",
|
|||
|
|
"extends": script$2$2,
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
emits: ["close", "life-end"],
|
|||
|
|
data: /* @__PURE__ */ __name(function data4() {
|
|||
|
|
return {
|
|||
|
|
messages: []
|
|||
|
|
};
|
|||
|
|
}, "data"),
|
|||
|
|
styleElement: null,
|
|||
|
|
mounted: /* @__PURE__ */ __name(function mounted4() {
|
|||
|
|
ToastEventBus.on("add", this.onAdd);
|
|||
|
|
ToastEventBus.on("remove", this.onRemove);
|
|||
|
|
ToastEventBus.on("remove-group", this.onRemoveGroup);
|
|||
|
|
ToastEventBus.on("remove-all-groups", this.onRemoveAllGroups);
|
|||
|
|
if (this.breakpoints) {
|
|||
|
|
this.createStyle();
|
|||
|
|
}
|
|||
|
|
}, "mounted"),
|
|||
|
|
beforeUnmount: /* @__PURE__ */ __name(function beforeUnmount4() {
|
|||
|
|
this.destroyStyle();
|
|||
|
|
if (this.$refs.container && this.autoZIndex) {
|
|||
|
|
ZIndex.clear(this.$refs.container);
|
|||
|
|
}
|
|||
|
|
ToastEventBus.off("add", this.onAdd);
|
|||
|
|
ToastEventBus.off("remove", this.onRemove);
|
|||
|
|
ToastEventBus.off("remove-group", this.onRemoveGroup);
|
|||
|
|
ToastEventBus.off("remove-all-groups", this.onRemoveAllGroups);
|
|||
|
|
}, "beforeUnmount"),
|
|||
|
|
methods: {
|
|||
|
|
add: /* @__PURE__ */ __name(function add(message2) {
|
|||
|
|
if (message2.id == null) {
|
|||
|
|
message2.id = messageIdx++;
|
|||
|
|
}
|
|||
|
|
this.messages = [].concat(_toConsumableArray(this.messages), [message2]);
|
|||
|
|
}, "add"),
|
|||
|
|
remove: /* @__PURE__ */ __name(function remove(params) {
|
|||
|
|
var index = this.messages.findIndex(function(m) {
|
|||
|
|
return m.id === params.message.id;
|
|||
|
|
});
|
|||
|
|
if (index !== -1) {
|
|||
|
|
this.messages.splice(index, 1);
|
|||
|
|
this.$emit(params.type, {
|
|||
|
|
message: params.message
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, "remove"),
|
|||
|
|
onAdd: /* @__PURE__ */ __name(function onAdd(message2) {
|
|||
|
|
if (this.group == message2.group) {
|
|||
|
|
this.add(message2);
|
|||
|
|
}
|
|||
|
|
}, "onAdd"),
|
|||
|
|
onRemove: /* @__PURE__ */ __name(function onRemove(message2) {
|
|||
|
|
this.remove({
|
|||
|
|
message: message2,
|
|||
|
|
type: "close"
|
|||
|
|
});
|
|||
|
|
}, "onRemove"),
|
|||
|
|
onRemoveGroup: /* @__PURE__ */ __name(function onRemoveGroup(group) {
|
|||
|
|
if (this.group === group) {
|
|||
|
|
this.messages = [];
|
|||
|
|
}
|
|||
|
|
}, "onRemoveGroup"),
|
|||
|
|
onRemoveAllGroups: /* @__PURE__ */ __name(function onRemoveAllGroups() {
|
|||
|
|
this.messages = [];
|
|||
|
|
}, "onRemoveAllGroups"),
|
|||
|
|
onEnter: /* @__PURE__ */ __name(function onEnter() {
|
|||
|
|
this.$refs.container.setAttribute(this.attributeSelector, "");
|
|||
|
|
if (this.autoZIndex) {
|
|||
|
|
ZIndex.set("modal", this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
|
|||
|
|
}
|
|||
|
|
}, "onEnter"),
|
|||
|
|
onLeave: /* @__PURE__ */ __name(function onLeave() {
|
|||
|
|
var _this = this;
|
|||
|
|
if (this.$refs.container && this.autoZIndex && isEmpty(this.messages)) {
|
|||
|
|
setTimeout(function() {
|
|||
|
|
ZIndex.clear(_this.$refs.container);
|
|||
|
|
}, 200);
|
|||
|
|
}
|
|||
|
|
}, "onLeave"),
|
|||
|
|
createStyle: /* @__PURE__ */ __name(function createStyle() {
|
|||
|
|
if (!this.styleElement && !this.isUnstyled) {
|
|||
|
|
var _this$$primevue;
|
|||
|
|
this.styleElement = document.createElement("style");
|
|||
|
|
this.styleElement.type = "text/css";
|
|||
|
|
setAttribute(this.styleElement, "nonce", (_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.config) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.csp) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.nonce);
|
|||
|
|
document.head.appendChild(this.styleElement);
|
|||
|
|
var innerHTML = "";
|
|||
|
|
for (var breakpoint in this.breakpoints) {
|
|||
|
|
var breakpointStyle = "";
|
|||
|
|
for (var styleProp in this.breakpoints[breakpoint]) {
|
|||
|
|
breakpointStyle += styleProp + ":" + this.breakpoints[breakpoint][styleProp] + "!important;";
|
|||
|
|
}
|
|||
|
|
innerHTML += "\n @media screen and (max-width: ".concat(breakpoint, ") {\n .p-toast[").concat(this.attributeSelector, "] {\n ").concat(breakpointStyle, "\n }\n }\n ");
|
|||
|
|
}
|
|||
|
|
this.styleElement.innerHTML = innerHTML;
|
|||
|
|
}
|
|||
|
|
}, "createStyle"),
|
|||
|
|
destroyStyle: /* @__PURE__ */ __name(function destroyStyle() {
|
|||
|
|
if (this.styleElement) {
|
|||
|
|
document.head.removeChild(this.styleElement);
|
|||
|
|
this.styleElement = null;
|
|||
|
|
}
|
|||
|
|
}, "destroyStyle")
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
attributeSelector: /* @__PURE__ */ __name(function attributeSelector() {
|
|||
|
|
return UniqueComponentId();
|
|||
|
|
}, "attributeSelector")
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
ToastMessage: script$1$4,
|
|||
|
|
Portal: script$h
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
function _typeof$2(o) {
|
|||
|
|
"@babel/helpers - typeof";
|
|||
|
|
return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
|
|||
|
|
return typeof o2;
|
|||
|
|
} : function(o2) {
|
|||
|
|
return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
|
|||
|
|
}, _typeof$2(o);
|
|||
|
|
}
|
|||
|
|
__name(_typeof$2, "_typeof$2");
|
|||
|
|
function ownKeys$2(e, r) {
|
|||
|
|
var t = Object.keys(e);
|
|||
|
|
if (Object.getOwnPropertySymbols) {
|
|||
|
|
var o = Object.getOwnPropertySymbols(e);
|
|||
|
|
r && (o = o.filter(function(r2) {
|
|||
|
|
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|||
|
|
})), t.push.apply(t, o);
|
|||
|
|
}
|
|||
|
|
return t;
|
|||
|
|
}
|
|||
|
|
__name(ownKeys$2, "ownKeys$2");
|
|||
|
|
function _objectSpread$2(e) {
|
|||
|
|
for (var r = 1; r < arguments.length; r++) {
|
|||
|
|
var t = null != arguments[r] ? arguments[r] : {};
|
|||
|
|
r % 2 ? ownKeys$2(Object(t), true).forEach(function(r2) {
|
|||
|
|
_defineProperty$2(e, r2, t[r2]);
|
|||
|
|
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function(r2) {
|
|||
|
|
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return e;
|
|||
|
|
}
|
|||
|
|
__name(_objectSpread$2, "_objectSpread$2");
|
|||
|
|
function _defineProperty$2(e, r, t) {
|
|||
|
|
return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
|
|||
|
|
}
|
|||
|
|
__name(_defineProperty$2, "_defineProperty$2");
|
|||
|
|
function _toPropertyKey$2(t) {
|
|||
|
|
var i = _toPrimitive$2(t, "string");
|
|||
|
|
return "symbol" == _typeof$2(i) ? i : i + "";
|
|||
|
|
}
|
|||
|
|
__name(_toPropertyKey$2, "_toPropertyKey$2");
|
|||
|
|
function _toPrimitive$2(t, r) {
|
|||
|
|
if ("object" != _typeof$2(t) || !t) return t;
|
|||
|
|
var e = t[Symbol.toPrimitive];
|
|||
|
|
if (void 0 !== e) {
|
|||
|
|
var i = e.call(t, r || "default");
|
|||
|
|
if ("object" != _typeof$2(i)) return i;
|
|||
|
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|||
|
|
}
|
|||
|
|
return ("string" === r ? String : Number)(t);
|
|||
|
|
}
|
|||
|
|
__name(_toPrimitive$2, "_toPrimitive$2");
|
|||
|
|
function render$6(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _component_ToastMessage = resolveComponent("ToastMessage");
|
|||
|
|
var _component_Portal = resolveComponent("Portal");
|
|||
|
|
return openBlock(), createBlock(_component_Portal, null, {
|
|||
|
|
"default": withCtx(function() {
|
|||
|
|
return [createBaseVNode("div", mergeProps({
|
|||
|
|
ref: "container",
|
|||
|
|
"class": _ctx.cx("root"),
|
|||
|
|
style: _ctx.sx("root", true, {
|
|||
|
|
position: _ctx.position
|
|||
|
|
})
|
|||
|
|
}, _ctx.ptmi("root")), [createVNode(TransitionGroup, mergeProps({
|
|||
|
|
name: "p-toast-message",
|
|||
|
|
tag: "div",
|
|||
|
|
onEnter: $options.onEnter,
|
|||
|
|
onLeave: $options.onLeave
|
|||
|
|
}, _objectSpread$2({}, _ctx.ptm("transition"))), {
|
|||
|
|
"default": withCtx(function() {
|
|||
|
|
return [(openBlock(true), createElementBlock(Fragment, null, renderList($data.messages, function(msg) {
|
|||
|
|
return openBlock(), createBlock(_component_ToastMessage, {
|
|||
|
|
key: msg.id,
|
|||
|
|
message: msg,
|
|||
|
|
templates: _ctx.$slots,
|
|||
|
|
closeIcon: _ctx.closeIcon,
|
|||
|
|
infoIcon: _ctx.infoIcon,
|
|||
|
|
warnIcon: _ctx.warnIcon,
|
|||
|
|
errorIcon: _ctx.errorIcon,
|
|||
|
|
successIcon: _ctx.successIcon,
|
|||
|
|
closeButtonProps: _ctx.closeButtonProps,
|
|||
|
|
unstyled: _ctx.unstyled,
|
|||
|
|
onClose: _cache[0] || (_cache[0] = function($event) {
|
|||
|
|
return $options.remove($event);
|
|||
|
|
}),
|
|||
|
|
pt: _ctx.pt
|
|||
|
|
}, null, 8, ["message", "templates", "closeIcon", "infoIcon", "warnIcon", "errorIcon", "successIcon", "closeButtonProps", "unstyled", "pt"]);
|
|||
|
|
}), 128))];
|
|||
|
|
}),
|
|||
|
|
_: 1
|
|||
|
|
}, 16, ["onEnter", "onLeave"])], 16)];
|
|||
|
|
}),
|
|||
|
|
_: 1
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
__name(render$6, "render$6");
|
|||
|
|
script$6.render = render$6;
|
|||
|
|
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "GlobalToast",
|
|||
|
|
setup(__props) {
|
|||
|
|
const toast = useToast();
|
|||
|
|
const toastStore = useToastStore();
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
watch(
|
|||
|
|
() => toastStore.messagesToAdd,
|
|||
|
|
(newMessages) => {
|
|||
|
|
if (newMessages.length === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
newMessages.forEach((message2) => {
|
|||
|
|
toast.add(message2);
|
|||
|
|
});
|
|||
|
|
toastStore.messagesToAdd = [];
|
|||
|
|
},
|
|||
|
|
{ deep: true }
|
|||
|
|
);
|
|||
|
|
watch(
|
|||
|
|
() => toastStore.messagesToRemove,
|
|||
|
|
(messagesToRemove) => {
|
|||
|
|
if (messagesToRemove.length === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
messagesToRemove.forEach((message2) => {
|
|||
|
|
toast.remove(message2);
|
|||
|
|
});
|
|||
|
|
toastStore.messagesToRemove = [];
|
|||
|
|
},
|
|||
|
|
{ deep: true }
|
|||
|
|
);
|
|||
|
|
watch(
|
|||
|
|
() => toastStore.removeAllRequested,
|
|||
|
|
(requested) => {
|
|||
|
|
if (requested) {
|
|||
|
|
toast.removeAllGroups();
|
|||
|
|
toastStore.removeAllRequested = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
function updateToastPosition() {
|
|||
|
|
const styleElement = document.getElementById("dynamic-toast-style") || createStyleElement();
|
|||
|
|
const rect = document.querySelector(".graph-canvas-container").getBoundingClientRect();
|
|||
|
|
styleElement.textContent = `
|
|||
|
|
.p-toast.p-component.p-toast-top-right {
|
|||
|
|
top: ${rect.top + 20}px !important;
|
|||
|
|
right: ${window.innerWidth - (rect.left + rect.width) + 20}px !important;
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
__name(updateToastPosition, "updateToastPosition");
|
|||
|
|
function createStyleElement() {
|
|||
|
|
const style = document.createElement("style");
|
|||
|
|
style.id = "dynamic-toast-style";
|
|||
|
|
document.head.appendChild(style);
|
|||
|
|
return style;
|
|||
|
|
}
|
|||
|
|
__name(createStyleElement, "createStyleElement");
|
|||
|
|
watch(
|
|||
|
|
() => settingStore.get("Comfy.UseNewMenu"),
|
|||
|
|
() => nextTick(updateToastPosition),
|
|||
|
|
{ immediate: true }
|
|||
|
|
);
|
|||
|
|
watch(
|
|||
|
|
() => settingStore.get("Comfy.Sidebar.Location"),
|
|||
|
|
() => nextTick(updateToastPosition),
|
|||
|
|
{ immediate: true }
|
|||
|
|
);
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createBlock(unref(script$6));
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "UnloadWindowConfirmDialog",
|
|||
|
|
setup(__props) {
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const handleBeforeUnload = /* @__PURE__ */ __name((event) => {
|
|||
|
|
if (settingStore.get("Comfy.Window.UnloadConfirmation")) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return void 0;
|
|||
|
|
}, "handleBeforeUnload");
|
|||
|
|
onMounted(() => {
|
|||
|
|
window.addEventListener("beforeunload", handleBeforeUnload);
|
|||
|
|
});
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
window.removeEventListener("beforeunload", handleBeforeUnload);
|
|||
|
|
});
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createElementBlock("div");
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const DEFAULT_TITLE = "ComfyUI";
|
|||
|
|
const TITLE_SUFFIX = " - ComfyUI";
|
|||
|
|
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "BrowserTabTitle",
|
|||
|
|
setup(__props) {
|
|||
|
|
const executionStore = useExecutionStore();
|
|||
|
|
const executionText = computed(
|
|||
|
|
() => executionStore.isIdle ? "" : `[${executionStore.executionProgress}%]`
|
|||
|
|
);
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const betaMenuEnabled = computed(
|
|||
|
|
() => settingStore.get("Comfy.UseNewMenu") !== "Disabled"
|
|||
|
|
);
|
|||
|
|
const workflowStore = useWorkflowStore();
|
|||
|
|
const isUnsavedText = computed(
|
|||
|
|
() => workflowStore.activeWorkflow?.unsaved ? " *" : ""
|
|||
|
|
);
|
|||
|
|
const workflowNameText = computed(() => {
|
|||
|
|
const workflowName = workflowStore.activeWorkflow?.name;
|
|||
|
|
return workflowName ? isUnsavedText.value + workflowName + TITLE_SUFFIX : DEFAULT_TITLE;
|
|||
|
|
});
|
|||
|
|
const nodeExecutionTitle = computed(
|
|||
|
|
() => executionStore.executingNode && executionStore.executingNodeProgress ? `${executionText.value}[${executionStore.executingNodeProgress}%] ${executionStore.executingNode.type}` : ""
|
|||
|
|
);
|
|||
|
|
const workflowTitle = computed(
|
|||
|
|
() => executionText.value + (betaMenuEnabled.value ? workflowNameText.value : DEFAULT_TITLE)
|
|||
|
|
);
|
|||
|
|
const title = computed(() => nodeExecutionTitle.value || workflowTitle.value);
|
|||
|
|
useTitle(title);
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createElementBlock("div");
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const _withScopeId$3 = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-84e785b8"), n = n(), popScopeId(), n), "_withScopeId$3");
|
|||
|
|
const _hoisted_1$8 = { class: "workflow-label text-sm max-w-[150px] truncate inline-block" };
|
|||
|
|
const _hoisted_2$6 = { class: "relative" };
|
|||
|
|
const _hoisted_3$4 = {
|
|||
|
|
key: 0,
|
|||
|
|
class: "status-indicator"
|
|||
|
|
};
|
|||
|
|
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "WorkflowTabs",
|
|||
|
|
props: {
|
|||
|
|
class: {}
|
|||
|
|
},
|
|||
|
|
setup(__props) {
|
|||
|
|
const props = __props;
|
|||
|
|
const workflowStore = useWorkflowStore();
|
|||
|
|
const workflowToOption = /* @__PURE__ */ __name((workflow) => ({
|
|||
|
|
label: workflow.name,
|
|||
|
|
tooltip: workflow.path,
|
|||
|
|
value: workflow.key,
|
|||
|
|
unsaved: workflow.unsaved
|
|||
|
|
}), "workflowToOption");
|
|||
|
|
const optionToWorkflow = /* @__PURE__ */ __name((option2) => workflowStore.workflowLookup[option2.value], "optionToWorkflow");
|
|||
|
|
const options = computed(
|
|||
|
|
() => workflowStore.openWorkflows.map(workflowToOption)
|
|||
|
|
);
|
|||
|
|
const selectedWorkflow = computed(
|
|||
|
|
() => workflowStore.activeWorkflow ? workflowToOption(workflowStore.activeWorkflow) : null
|
|||
|
|
);
|
|||
|
|
const onWorkflowChange = /* @__PURE__ */ __name((option2) => {
|
|||
|
|
if (!option2) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (selectedWorkflow.value?.value === option2.value) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const workflow = optionToWorkflow(option2);
|
|||
|
|
workflow.load();
|
|||
|
|
}, "onWorkflowChange");
|
|||
|
|
const onCloseWorkflow = /* @__PURE__ */ __name((option2) => {
|
|||
|
|
const workflow = optionToWorkflow(option2);
|
|||
|
|
app.workflowManager.closeWorkflow(workflow);
|
|||
|
|
}, "onCloseWorkflow");
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
const _directive_tooltip = resolveDirective("tooltip");
|
|||
|
|
return openBlock(), createBlock(unref(script$s), {
|
|||
|
|
class: normalizeClass(["workflow-tabs bg-transparent flex flex-wrap", props.class]),
|
|||
|
|
modelValue: selectedWorkflow.value,
|
|||
|
|
"onUpdate:modelValue": onWorkflowChange,
|
|||
|
|
options: options.value,
|
|||
|
|
optionLabel: "label",
|
|||
|
|
dataKey: "value"
|
|||
|
|
}, {
|
|||
|
|
option: withCtx(({ option: option2 }) => [
|
|||
|
|
withDirectives((openBlock(), createElementBlock("span", _hoisted_1$8, [
|
|||
|
|
createTextVNode(toDisplayString(option2.label), 1)
|
|||
|
|
])), [
|
|||
|
|
[_directive_tooltip, option2.tooltip]
|
|||
|
|
]),
|
|||
|
|
createBaseVNode("div", _hoisted_2$6, [
|
|||
|
|
option2.unsaved ? (openBlock(), createElementBlock("span", _hoisted_3$4, "•")) : createCommentVNode("", true),
|
|||
|
|
createVNode(unref(script$d), {
|
|||
|
|
class: "close-button p-0 w-auto",
|
|||
|
|
icon: "pi pi-times",
|
|||
|
|
text: "",
|
|||
|
|
severity: "secondary",
|
|||
|
|
size: "small",
|
|||
|
|
onClick: withModifiers(($event) => onCloseWorkflow(option2), ["stop"])
|
|||
|
|
}, null, 8, ["onClick"])
|
|||
|
|
])
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
}, 8, ["class", "modelValue", "options"]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const WorkflowTabs = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-84e785b8"]]);
|
|||
|
|
var theme$3 = /* @__PURE__ */ __name(function theme6(_ref) {
|
|||
|
|
var dt = _ref.dt;
|
|||
|
|
return "\n.p-menubar {\n display: flex;\n align-items: center;\n background: ".concat(dt("menubar.background"), ";\n border: 1px solid ").concat(dt("menubar.border.color"), ";\n border-radius: ").concat(dt("menubar.border.radius"), ";\n color: ").concat(dt("menubar.color"), ";\n padding: ").concat(dt("menubar.padding"), ";\n gap: ").concat(dt("menubar.gap"), ";\n}\n\n.p-menubar-start,\n.p-megamenu-end {\n display: flex;\n align-items: center;\n}\n\n.p-menubar-root-list,\n.p-menubar-submenu {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n outline: 0 none;\n}\n\n.p-menubar-root-list {\n align-items: center;\n flex-wrap: wrap;\n gap: ").concat(dt("menubar.gap"), ";\n}\n\n.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {\n border-radius: ").concat(dt("menubar.base.item.border.radius"), ";\n}\n\n.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {\n padding: ").concat(dt("menubar.base.item.padding"), ";\n}\n\n.p-menubar-item-content {\n transition: background ").concat(dt("menubar.transition.duration"), ", color ").concat(dt("menubar.transition.duration"), ";\n border-radius: ").concat(dt("menubar.item.border.radius"), ";\n color: ").concat(dt("menubar.item.color"), ";\n}\n\n.p-menubar-item-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n color: inherit;\n padding: ").concat(dt("menubar.item.padding"), ";\n gap: ").concat(dt("menubar.item.gap"), ";\n user-select: none;\n outline: 0 none;\n}\n\n.p-menubar-item-label {\n line-height: 1;\n}\n\n.p-menubar-item-icon {\n color: ").concat(dt("menubar.item.icon.color"), ";\n}\n\n.p-menubar-submenu-icon {\n color: ").concat(dt("menubar.submenu.icon.color"), ";\n margin-left: auto;\n font-size: ").concat(dt("menubar.submenu.icon.size"), ";\n width: ").concat(dt("menubar.submenu.icon.size"), ";\n height: ").concat(dt("menubar.submenu.icon.size"), ";\n}\n\n.p-menubar-item.p-focus > .p-menubar-item-content {\n color: ").concat(dt("menubar.item.focus.color"), ";\n background: ").concat(dt("menubar.item.focus.background"), ";\n}\n\n.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon {\n color: ").concat(dt("menubar.item.icon.focus.color"), ";\n}\n\n.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {\n color: ").concat(dt("menubar.submenu.icon.focus.color"), ";\n}\n\n.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover {\n color: ").concat(dt("menubar.item.focus.color"), ";\n background: ").concat(dt("menubar.item.focus.background"), ";\n}\n\n.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon {\n color: ").concat(dt("menubar.item.icon.focus.color"), ";\n}\n\n.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {\n color: ").concat(dt("menubar.submenu.icon.focus.color"), ";\n}\n\n.p-menubar-item-active > .p-menubar-item-content {\n color: ").concat(dt("menubar.item.active.color"), ";\n background: ").concat(dt("menubar.item.active.background"), ";\n}\n\n.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon {\n color: ").concat(dt("menubar.item.icon.active.color"), ";\n}\n\n.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {\n color: ").concat(dt("menubar.submenu.icon.active.color"), ";\n}\n\n.p-menubar-submenu {\n display: none;\n position: absolute;\n min-width: 12.5rem;\n z-index: 1;\n background: ").concat(dt("menubar.submenu.background"), ";\n border: 1px solid ").concat(dt("menubar.submenu.border.color"), ";\n border-radius: ").concat(dt("menubar.border.radius"), ";\n box-shadow: ").concat(dt("menubar.submenu.shadow"), ";\n color: ").concat(dt("menubar.submenu.color"), ";\n flex-direction: column;\n padding: ").concat(dt("menubar.submenu.padding"), ";\n gap: ").concat(dt("men
|
|||
|
|
}, "theme");
|
|||
|
|
var inlineStyles$1 = {
|
|||
|
|
submenu: /* @__PURE__ */ __name(function submenu(_ref2) {
|
|||
|
|
var instance = _ref2.instance, processedItem = _ref2.processedItem;
|
|||
|
|
return {
|
|||
|
|
display: instance.isItemActive(processedItem) ? "flex" : "none"
|
|||
|
|
};
|
|||
|
|
}, "submenu")
|
|||
|
|
};
|
|||
|
|
var classes$3 = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root7(_ref3) {
|
|||
|
|
var instance = _ref3.instance;
|
|||
|
|
return ["p-menubar p-component", {
|
|||
|
|
"p-menubar-mobile": instance.queryMatches,
|
|||
|
|
"p-menubar-mobile-active": instance.mobileActive
|
|||
|
|
}];
|
|||
|
|
}, "root"),
|
|||
|
|
start: "p-menubar-start",
|
|||
|
|
button: "p-menubar-button",
|
|||
|
|
rootList: "p-menubar-root-list",
|
|||
|
|
item: /* @__PURE__ */ __name(function item(_ref4) {
|
|||
|
|
var instance = _ref4.instance, processedItem = _ref4.processedItem;
|
|||
|
|
return ["p-menubar-item", {
|
|||
|
|
"p-menubar-item-active": instance.isItemActive(processedItem),
|
|||
|
|
"p-focus": instance.isItemFocused(processedItem),
|
|||
|
|
"p-disabled": instance.isItemDisabled(processedItem)
|
|||
|
|
}];
|
|||
|
|
}, "item"),
|
|||
|
|
itemContent: "p-menubar-item-content",
|
|||
|
|
itemLink: "p-menubar-item-link",
|
|||
|
|
itemIcon: "p-menubar-item-icon",
|
|||
|
|
itemLabel: "p-menubar-item-label",
|
|||
|
|
submenuIcon: "p-menubar-submenu-icon",
|
|||
|
|
submenu: "p-menubar-submenu",
|
|||
|
|
separator: "p-menubar-separator",
|
|||
|
|
end: "p-menubar-end"
|
|||
|
|
};
|
|||
|
|
var MenubarStyle = BaseStyle.extend({
|
|||
|
|
name: "menubar",
|
|||
|
|
theme: theme$3,
|
|||
|
|
classes: classes$3,
|
|||
|
|
inlineStyles: inlineStyles$1
|
|||
|
|
});
|
|||
|
|
var script$2$1 = {
|
|||
|
|
name: "BaseMenubar",
|
|||
|
|
"extends": script$e,
|
|||
|
|
props: {
|
|||
|
|
model: {
|
|||
|
|
type: Array,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
buttonProps: {
|
|||
|
|
type: null,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
breakpoint: {
|
|||
|
|
type: String,
|
|||
|
|
"default": "960px"
|
|||
|
|
},
|
|||
|
|
ariaLabelledby: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
ariaLabel: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
style: MenubarStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide8() {
|
|||
|
|
return {
|
|||
|
|
$pcMenubar: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
var script$1$3 = {
|
|||
|
|
name: "MenubarSub",
|
|||
|
|
hostName: "Menubar",
|
|||
|
|
"extends": script$e,
|
|||
|
|
emits: ["item-mouseenter", "item-click", "item-mousemove"],
|
|||
|
|
props: {
|
|||
|
|
items: {
|
|||
|
|
type: Array,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
root: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
popup: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
mobileActive: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
templates: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
level: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 0
|
|||
|
|
},
|
|||
|
|
menuId: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
focusedItemId: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
activeItemPath: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
list: null,
|
|||
|
|
methods: {
|
|||
|
|
getItemId: /* @__PURE__ */ __name(function getItemId(processedItem) {
|
|||
|
|
return "".concat(this.menuId, "_").concat(processedItem.key);
|
|||
|
|
}, "getItemId"),
|
|||
|
|
getItemKey: /* @__PURE__ */ __name(function getItemKey(processedItem) {
|
|||
|
|
return this.getItemId(processedItem);
|
|||
|
|
}, "getItemKey"),
|
|||
|
|
getItemProp: /* @__PURE__ */ __name(function getItemProp(processedItem, name, params) {
|
|||
|
|
return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : void 0;
|
|||
|
|
}, "getItemProp"),
|
|||
|
|
getItemLabel: /* @__PURE__ */ __name(function getItemLabel(processedItem) {
|
|||
|
|
return this.getItemProp(processedItem, "label");
|
|||
|
|
}, "getItemLabel"),
|
|||
|
|
getItemLabelId: /* @__PURE__ */ __name(function getItemLabelId(processedItem) {
|
|||
|
|
return "".concat(this.menuId, "_").concat(processedItem.key, "_label");
|
|||
|
|
}, "getItemLabelId"),
|
|||
|
|
getPTOptions: /* @__PURE__ */ __name(function getPTOptions4(processedItem, index, key) {
|
|||
|
|
return this.ptm(key, {
|
|||
|
|
context: {
|
|||
|
|
item: processedItem.item,
|
|||
|
|
index,
|
|||
|
|
active: this.isItemActive(processedItem),
|
|||
|
|
focused: this.isItemFocused(processedItem),
|
|||
|
|
disabled: this.isItemDisabled(processedItem),
|
|||
|
|
level: this.level
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, "getPTOptions"),
|
|||
|
|
isItemActive: /* @__PURE__ */ __name(function isItemActive(processedItem) {
|
|||
|
|
return this.activeItemPath.some(function(path) {
|
|||
|
|
return path.key === processedItem.key;
|
|||
|
|
});
|
|||
|
|
}, "isItemActive"),
|
|||
|
|
isItemVisible: /* @__PURE__ */ __name(function isItemVisible(processedItem) {
|
|||
|
|
return this.getItemProp(processedItem, "visible") !== false;
|
|||
|
|
}, "isItemVisible"),
|
|||
|
|
isItemDisabled: /* @__PURE__ */ __name(function isItemDisabled(processedItem) {
|
|||
|
|
return this.getItemProp(processedItem, "disabled");
|
|||
|
|
}, "isItemDisabled"),
|
|||
|
|
isItemFocused: /* @__PURE__ */ __name(function isItemFocused(processedItem) {
|
|||
|
|
return this.focusedItemId === this.getItemId(processedItem);
|
|||
|
|
}, "isItemFocused"),
|
|||
|
|
isItemGroup: /* @__PURE__ */ __name(function isItemGroup(processedItem) {
|
|||
|
|
return isNotEmpty(processedItem.items);
|
|||
|
|
}, "isItemGroup"),
|
|||
|
|
onItemClick: /* @__PURE__ */ __name(function onItemClick(event, processedItem) {
|
|||
|
|
this.getItemProp(processedItem, "command", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
item: processedItem.item
|
|||
|
|
});
|
|||
|
|
this.$emit("item-click", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem,
|
|||
|
|
isFocus: true
|
|||
|
|
});
|
|||
|
|
}, "onItemClick"),
|
|||
|
|
onItemMouseEnter: /* @__PURE__ */ __name(function onItemMouseEnter(event, processedItem) {
|
|||
|
|
this.$emit("item-mouseenter", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
}, "onItemMouseEnter"),
|
|||
|
|
onItemMouseMove: /* @__PURE__ */ __name(function onItemMouseMove(event, processedItem) {
|
|||
|
|
this.$emit("item-mousemove", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
}, "onItemMouseMove"),
|
|||
|
|
getAriaPosInset: /* @__PURE__ */ __name(function getAriaPosInset2(index) {
|
|||
|
|
return index - this.calculateAriaSetSize.slice(0, index).length + 1;
|
|||
|
|
}, "getAriaPosInset"),
|
|||
|
|
getMenuItemProps: /* @__PURE__ */ __name(function getMenuItemProps(processedItem, index) {
|
|||
|
|
return {
|
|||
|
|
action: mergeProps({
|
|||
|
|
"class": this.cx("itemLink"),
|
|||
|
|
tabindex: -1,
|
|||
|
|
"aria-hidden": true
|
|||
|
|
}, this.getPTOptions(processedItem, index, "itemLink")),
|
|||
|
|
icon: mergeProps({
|
|||
|
|
"class": [this.cx("itemIcon"), this.getItemProp(processedItem, "icon")]
|
|||
|
|
}, this.getPTOptions(processedItem, index, "itemIcon")),
|
|||
|
|
label: mergeProps({
|
|||
|
|
"class": this.cx("itemLabel")
|
|||
|
|
}, this.getPTOptions(processedItem, index, "itemLabel")),
|
|||
|
|
submenuicon: mergeProps({
|
|||
|
|
"class": this.cx("submenuIcon")
|
|||
|
|
}, this.getPTOptions(processedItem, index, "submenuIcon"))
|
|||
|
|
};
|
|||
|
|
}, "getMenuItemProps")
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
calculateAriaSetSize: /* @__PURE__ */ __name(function calculateAriaSetSize() {
|
|||
|
|
var _this = this;
|
|||
|
|
return this.items.filter(function(processedItem) {
|
|||
|
|
return _this.isItemVisible(processedItem) && _this.getItemProp(processedItem, "separator");
|
|||
|
|
});
|
|||
|
|
}, "calculateAriaSetSize"),
|
|||
|
|
getAriaSetSize: /* @__PURE__ */ __name(function getAriaSetSize() {
|
|||
|
|
var _this2 = this;
|
|||
|
|
return this.items.filter(function(processedItem) {
|
|||
|
|
return _this2.isItemVisible(processedItem) && !_this2.getItemProp(processedItem, "separator");
|
|||
|
|
}).length;
|
|||
|
|
}, "getAriaSetSize")
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
AngleRightIcon: script$t,
|
|||
|
|
AngleDownIcon: script$u
|
|||
|
|
},
|
|||
|
|
directives: {
|
|||
|
|
ripple: Ripple
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var _hoisted_1$1$2 = ["id", "aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "aria-level", "aria-setsize", "aria-posinset", "data-p-active", "data-p-focused", "data-p-disabled"];
|
|||
|
|
var _hoisted_2$5 = ["onClick", "onMouseenter", "onMousemove"];
|
|||
|
|
var _hoisted_3$3 = ["href", "target"];
|
|||
|
|
var _hoisted_4$1 = ["id"];
|
|||
|
|
var _hoisted_5$1 = ["id"];
|
|||
|
|
function render$1$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _component_MenubarSub = resolveComponent("MenubarSub", true);
|
|||
|
|
var _directive_ripple = resolveDirective("ripple");
|
|||
|
|
return openBlock(), createElementBlock("ul", mergeProps({
|
|||
|
|
"class": $props.level === 0 ? _ctx.cx("rootList") : _ctx.cx("submenu")
|
|||
|
|
}, $props.level === 0 ? _ctx.ptm("rootList") : _ctx.ptm("submenu")), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.items, function(processedItem, index) {
|
|||
|
|
return openBlock(), createElementBlock(Fragment, {
|
|||
|
|
key: $options.getItemKey(processedItem)
|
|||
|
|
}, [$options.isItemVisible(processedItem) && !$options.getItemProp(processedItem, "separator") ? (openBlock(), createElementBlock("li", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
id: $options.getItemId(processedItem),
|
|||
|
|
style: $options.getItemProp(processedItem, "style"),
|
|||
|
|
"class": [_ctx.cx("item", {
|
|||
|
|
processedItem
|
|||
|
|
}), $options.getItemProp(processedItem, "class")],
|
|||
|
|
role: "menuitem",
|
|||
|
|
"aria-label": $options.getItemLabel(processedItem),
|
|||
|
|
"aria-disabled": $options.isItemDisabled(processedItem) || void 0,
|
|||
|
|
"aria-expanded": $options.isItemGroup(processedItem) ? $options.isItemActive(processedItem) : void 0,
|
|||
|
|
"aria-haspopup": $options.isItemGroup(processedItem) && !$options.getItemProp(processedItem, "to") ? "menu" : void 0,
|
|||
|
|
"aria-level": $props.level + 1,
|
|||
|
|
"aria-setsize": $options.getAriaSetSize,
|
|||
|
|
"aria-posinset": $options.getAriaPosInset(index),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "item"), {
|
|||
|
|
"data-p-active": $options.isItemActive(processedItem),
|
|||
|
|
"data-p-focused": $options.isItemFocused(processedItem),
|
|||
|
|
"data-p-disabled": $options.isItemDisabled(processedItem)
|
|||
|
|
}), [createBaseVNode("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("itemContent"),
|
|||
|
|
onClick: /* @__PURE__ */ __name(function onClick($event) {
|
|||
|
|
return $options.onItemClick($event, processedItem);
|
|||
|
|
}, "onClick"),
|
|||
|
|
onMouseenter: /* @__PURE__ */ __name(function onMouseenter($event) {
|
|||
|
|
return $options.onItemMouseEnter($event, processedItem);
|
|||
|
|
}, "onMouseenter"),
|
|||
|
|
onMousemove: /* @__PURE__ */ __name(function onMousemove($event) {
|
|||
|
|
return $options.onItemMouseMove($event, processedItem);
|
|||
|
|
}, "onMousemove"),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "itemContent")), [!$props.templates.item ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
href: $options.getItemProp(processedItem, "url"),
|
|||
|
|
"class": _ctx.cx("itemLink"),
|
|||
|
|
target: $options.getItemProp(processedItem, "target"),
|
|||
|
|
tabindex: "-1",
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "itemLink")), [$props.templates.itemicon ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.itemicon), {
|
|||
|
|
key: 0,
|
|||
|
|
item: processedItem.item,
|
|||
|
|
"class": normalizeClass(_ctx.cx("itemIcon"))
|
|||
|
|
}, null, 8, ["item", "class"])) : $options.getItemProp(processedItem, "icon") ? (openBlock(), createElementBlock("span", mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
"class": [_ctx.cx("itemIcon"), $options.getItemProp(processedItem, "icon")],
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "itemIcon")), null, 16)) : createCommentVNode("", true), createBaseVNode("span", mergeProps({
|
|||
|
|
id: $options.getItemLabelId(processedItem),
|
|||
|
|
"class": _ctx.cx("itemLabel"),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "itemLabel")), toDisplayString($options.getItemLabel(processedItem)), 17, _hoisted_4$1), $options.getItemProp(processedItem, "items") ? (openBlock(), createElementBlock(Fragment, {
|
|||
|
|
key: 2
|
|||
|
|
}, [$props.templates.submenuicon ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.submenuicon), {
|
|||
|
|
key: 0,
|
|||
|
|
root: $props.root,
|
|||
|
|
active: $options.isItemActive(processedItem),
|
|||
|
|
"class": normalizeClass(_ctx.cx("submenuIcon"))
|
|||
|
|
}, null, 8, ["root", "active", "class"])) : (openBlock(), createBlock(resolveDynamicComponent($props.root ? "AngleDownIcon" : "AngleRightIcon"), mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
"class": _ctx.cx("submenuIcon"),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "submenuIcon")), null, 16, ["class"]))], 64)) : createCommentVNode("", true)], 16, _hoisted_3$3)), [[_directive_ripple]]) : (openBlock(), createBlock(resolveDynamicComponent($props.templates.item), {
|
|||
|
|
key: 1,
|
|||
|
|
item: processedItem.item,
|
|||
|
|
root: $props.root,
|
|||
|
|
hasSubmenu: $options.getItemProp(processedItem, "items"),
|
|||
|
|
label: $options.getItemLabel(processedItem),
|
|||
|
|
props: $options.getMenuItemProps(processedItem, index)
|
|||
|
|
}, null, 8, ["item", "root", "hasSubmenu", "label", "props"]))], 16, _hoisted_2$5), $options.isItemVisible(processedItem) && $options.isItemGroup(processedItem) ? (openBlock(), createBlock(_component_MenubarSub, {
|
|||
|
|
key: 0,
|
|||
|
|
id: $options.getItemId(processedItem) + "_list",
|
|||
|
|
menuId: $props.menuId,
|
|||
|
|
role: "menu",
|
|||
|
|
style: normalizeStyle(_ctx.sx("submenu", true, {
|
|||
|
|
processedItem
|
|||
|
|
})),
|
|||
|
|
focusedItemId: $props.focusedItemId,
|
|||
|
|
items: processedItem.items,
|
|||
|
|
mobileActive: $props.mobileActive,
|
|||
|
|
activeItemPath: $props.activeItemPath,
|
|||
|
|
templates: $props.templates,
|
|||
|
|
level: $props.level + 1,
|
|||
|
|
"aria-labelledby": $options.getItemLabelId(processedItem),
|
|||
|
|
pt: _ctx.pt,
|
|||
|
|
unstyled: _ctx.unstyled,
|
|||
|
|
onItemClick: _cache[0] || (_cache[0] = function($event) {
|
|||
|
|
return _ctx.$emit("item-click", $event);
|
|||
|
|
}),
|
|||
|
|
onItemMouseenter: _cache[1] || (_cache[1] = function($event) {
|
|||
|
|
return _ctx.$emit("item-mouseenter", $event);
|
|||
|
|
}),
|
|||
|
|
onItemMousemove: _cache[2] || (_cache[2] = function($event) {
|
|||
|
|
return _ctx.$emit("item-mousemove", $event);
|
|||
|
|
})
|
|||
|
|
}, null, 8, ["id", "menuId", "style", "focusedItemId", "items", "mobileActive", "activeItemPath", "templates", "level", "aria-labelledby", "pt", "unstyled"])) : createCommentVNode("", true)], 16, _hoisted_1$1$2)) : createCommentVNode("", true), $options.isItemVisible(processedItem) && $options.getItemProp(processedItem, "separator") ? (openBlock(), createElementBlock("li", mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
id: $options.getItemId(processedItem),
|
|||
|
|
"class": [_ctx.cx("separator"), $options.getItemProp(processedItem, "class")],
|
|||
|
|
style: $options.getItemProp(processedItem, "style"),
|
|||
|
|
role: "separator",
|
|||
|
|
ref_for: true
|
|||
|
|
}, _ctx.ptm("separator")), null, 16, _hoisted_5$1)) : createCommentVNode("", true)], 64);
|
|||
|
|
}), 128))], 16);
|
|||
|
|
}
|
|||
|
|
__name(render$1$1, "render$1$1");
|
|||
|
|
script$1$3.render = render$1$1;
|
|||
|
|
var script$5 = {
|
|||
|
|
name: "Menubar",
|
|||
|
|
"extends": script$2$1,
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
emits: ["focus", "blur"],
|
|||
|
|
matchMediaListener: null,
|
|||
|
|
data: /* @__PURE__ */ __name(function data5() {
|
|||
|
|
return {
|
|||
|
|
id: this.$attrs.id,
|
|||
|
|
mobileActive: false,
|
|||
|
|
focused: false,
|
|||
|
|
focusedItemInfo: {
|
|||
|
|
index: -1,
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
},
|
|||
|
|
activeItemPath: [],
|
|||
|
|
dirty: false,
|
|||
|
|
query: null,
|
|||
|
|
queryMatches: false
|
|||
|
|
};
|
|||
|
|
}, "data"),
|
|||
|
|
watch: {
|
|||
|
|
"$attrs.id": /* @__PURE__ */ __name(function $attrsId2(newValue) {
|
|||
|
|
this.id = newValue || UniqueComponentId();
|
|||
|
|
}, "$attrsId"),
|
|||
|
|
activeItemPath: /* @__PURE__ */ __name(function activeItemPath(newPath) {
|
|||
|
|
if (isNotEmpty(newPath)) {
|
|||
|
|
this.bindOutsideClickListener();
|
|||
|
|
this.bindResizeListener();
|
|||
|
|
} else {
|
|||
|
|
this.unbindOutsideClickListener();
|
|||
|
|
this.unbindResizeListener();
|
|||
|
|
}
|
|||
|
|
}, "activeItemPath")
|
|||
|
|
},
|
|||
|
|
outsideClickListener: null,
|
|||
|
|
container: null,
|
|||
|
|
menubar: null,
|
|||
|
|
mounted: /* @__PURE__ */ __name(function mounted5() {
|
|||
|
|
this.id = this.id || UniqueComponentId();
|
|||
|
|
this.bindMatchMediaListener();
|
|||
|
|
}, "mounted"),
|
|||
|
|
beforeUnmount: /* @__PURE__ */ __name(function beforeUnmount5() {
|
|||
|
|
this.mobileActive = false;
|
|||
|
|
this.unbindOutsideClickListener();
|
|||
|
|
this.unbindResizeListener();
|
|||
|
|
this.unbindMatchMediaListener();
|
|||
|
|
if (this.container) {
|
|||
|
|
ZIndex.clear(this.container);
|
|||
|
|
}
|
|||
|
|
this.container = null;
|
|||
|
|
}, "beforeUnmount"),
|
|||
|
|
methods: {
|
|||
|
|
getItemProp: /* @__PURE__ */ __name(function getItemProp2(item3, name) {
|
|||
|
|
return item3 ? resolve(item3[name]) : void 0;
|
|||
|
|
}, "getItemProp"),
|
|||
|
|
getItemLabel: /* @__PURE__ */ __name(function getItemLabel2(item3) {
|
|||
|
|
return this.getItemProp(item3, "label");
|
|||
|
|
}, "getItemLabel"),
|
|||
|
|
isItemDisabled: /* @__PURE__ */ __name(function isItemDisabled2(item3) {
|
|||
|
|
return this.getItemProp(item3, "disabled");
|
|||
|
|
}, "isItemDisabled"),
|
|||
|
|
isItemVisible: /* @__PURE__ */ __name(function isItemVisible2(item3) {
|
|||
|
|
return this.getItemProp(item3, "visible") !== false;
|
|||
|
|
}, "isItemVisible"),
|
|||
|
|
isItemGroup: /* @__PURE__ */ __name(function isItemGroup2(item3) {
|
|||
|
|
return isNotEmpty(this.getItemProp(item3, "items"));
|
|||
|
|
}, "isItemGroup"),
|
|||
|
|
isItemSeparator: /* @__PURE__ */ __name(function isItemSeparator(item3) {
|
|||
|
|
return this.getItemProp(item3, "separator");
|
|||
|
|
}, "isItemSeparator"),
|
|||
|
|
getProccessedItemLabel: /* @__PURE__ */ __name(function getProccessedItemLabel(processedItem) {
|
|||
|
|
return processedItem ? this.getItemLabel(processedItem.item) : void 0;
|
|||
|
|
}, "getProccessedItemLabel"),
|
|||
|
|
isProccessedItemGroup: /* @__PURE__ */ __name(function isProccessedItemGroup(processedItem) {
|
|||
|
|
return processedItem && isNotEmpty(processedItem.items);
|
|||
|
|
}, "isProccessedItemGroup"),
|
|||
|
|
toggle: /* @__PURE__ */ __name(function toggle(event) {
|
|||
|
|
var _this = this;
|
|||
|
|
if (this.mobileActive) {
|
|||
|
|
this.mobileActive = false;
|
|||
|
|
ZIndex.clear(this.menubar);
|
|||
|
|
this.hide();
|
|||
|
|
} else {
|
|||
|
|
this.mobileActive = true;
|
|||
|
|
ZIndex.set("menu", this.menubar, this.$primevue.config.zIndex.menu);
|
|||
|
|
setTimeout(function() {
|
|||
|
|
_this.show();
|
|||
|
|
}, 1);
|
|||
|
|
}
|
|||
|
|
this.bindOutsideClickListener();
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "toggle"),
|
|||
|
|
show: /* @__PURE__ */ __name(function show2() {
|
|||
|
|
focus(this.menubar);
|
|||
|
|
}, "show"),
|
|||
|
|
hide: /* @__PURE__ */ __name(function hide2(event, isFocus) {
|
|||
|
|
var _this2 = this;
|
|||
|
|
if (this.mobileActive) {
|
|||
|
|
this.mobileActive = false;
|
|||
|
|
setTimeout(function() {
|
|||
|
|
focus(_this2.$refs.menubutton);
|
|||
|
|
}, 0);
|
|||
|
|
}
|
|||
|
|
this.activeItemPath = [];
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
};
|
|||
|
|
isFocus && focus(this.menubar);
|
|||
|
|
this.dirty = false;
|
|||
|
|
}, "hide"),
|
|||
|
|
onFocus: /* @__PURE__ */ __name(function onFocus2(event) {
|
|||
|
|
this.focused = true;
|
|||
|
|
this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : {
|
|||
|
|
index: this.findFirstFocusedItemIndex(),
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
};
|
|||
|
|
this.$emit("focus", event);
|
|||
|
|
}, "onFocus"),
|
|||
|
|
onBlur: /* @__PURE__ */ __name(function onBlur2(event) {
|
|||
|
|
this.focused = false;
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
};
|
|||
|
|
this.searchValue = "";
|
|||
|
|
this.dirty = false;
|
|||
|
|
this.$emit("blur", event);
|
|||
|
|
}, "onBlur"),
|
|||
|
|
onKeyDown: /* @__PURE__ */ __name(function onKeyDown2(event) {
|
|||
|
|
var metaKey = event.metaKey || event.ctrlKey;
|
|||
|
|
switch (event.code) {
|
|||
|
|
case "ArrowDown":
|
|||
|
|
this.onArrowDownKey(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowUp":
|
|||
|
|
this.onArrowUpKey(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowLeft":
|
|||
|
|
this.onArrowLeftKey(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowRight":
|
|||
|
|
this.onArrowRightKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Home":
|
|||
|
|
this.onHomeKey(event);
|
|||
|
|
break;
|
|||
|
|
case "End":
|
|||
|
|
this.onEndKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Space":
|
|||
|
|
this.onSpaceKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Enter":
|
|||
|
|
case "NumpadEnter":
|
|||
|
|
this.onEnterKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Escape":
|
|||
|
|
this.onEscapeKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Tab":
|
|||
|
|
this.onTabKey(event);
|
|||
|
|
break;
|
|||
|
|
case "PageDown":
|
|||
|
|
case "PageUp":
|
|||
|
|
case "Backspace":
|
|||
|
|
case "ShiftLeft":
|
|||
|
|
case "ShiftRight":
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
if (!metaKey && isPrintableCharacter(event.key)) {
|
|||
|
|
this.searchItems(event, event.key);
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}, "onKeyDown"),
|
|||
|
|
onItemChange: /* @__PURE__ */ __name(function onItemChange(event) {
|
|||
|
|
var processedItem = event.processedItem, isFocus = event.isFocus;
|
|||
|
|
if (isEmpty(processedItem)) return;
|
|||
|
|
var index = processedItem.index, key = processedItem.key, level = processedItem.level, parentKey = processedItem.parentKey, items = processedItem.items;
|
|||
|
|
var grouped = isNotEmpty(items);
|
|||
|
|
var activeItemPath3 = this.activeItemPath.filter(function(p) {
|
|||
|
|
return p.parentKey !== parentKey && p.parentKey !== key;
|
|||
|
|
});
|
|||
|
|
grouped && activeItemPath3.push(processedItem);
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index,
|
|||
|
|
level,
|
|||
|
|
parentKey
|
|||
|
|
};
|
|||
|
|
this.activeItemPath = activeItemPath3;
|
|||
|
|
grouped && (this.dirty = true);
|
|||
|
|
isFocus && focus(this.menubar);
|
|||
|
|
}, "onItemChange"),
|
|||
|
|
onItemClick: /* @__PURE__ */ __name(function onItemClick2(event) {
|
|||
|
|
var originalEvent = event.originalEvent, processedItem = event.processedItem;
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
var root11 = isEmpty(processedItem.parent);
|
|||
|
|
var selected = this.isSelected(processedItem);
|
|||
|
|
if (selected) {
|
|||
|
|
var index = processedItem.index, key = processedItem.key, level = processedItem.level, parentKey = processedItem.parentKey;
|
|||
|
|
this.activeItemPath = this.activeItemPath.filter(function(p) {
|
|||
|
|
return key !== p.key && key.startsWith(p.key);
|
|||
|
|
});
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index,
|
|||
|
|
level,
|
|||
|
|
parentKey
|
|||
|
|
};
|
|||
|
|
this.dirty = !root11;
|
|||
|
|
focus(this.menubar);
|
|||
|
|
} else {
|
|||
|
|
if (grouped) {
|
|||
|
|
this.onItemChange(event);
|
|||
|
|
} else {
|
|||
|
|
var rootProcessedItem = root11 ? processedItem : this.activeItemPath.find(function(p) {
|
|||
|
|
return p.parentKey === "";
|
|||
|
|
});
|
|||
|
|
this.hide(originalEvent);
|
|||
|
|
this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
|
|||
|
|
this.mobileActive = false;
|
|||
|
|
focus(this.menubar);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "onItemClick"),
|
|||
|
|
onItemMouseEnter: /* @__PURE__ */ __name(function onItemMouseEnter2(event) {
|
|||
|
|
if (this.dirty) {
|
|||
|
|
this.onItemChange(event);
|
|||
|
|
}
|
|||
|
|
}, "onItemMouseEnter"),
|
|||
|
|
onItemMouseMove: /* @__PURE__ */ __name(function onItemMouseMove2(event) {
|
|||
|
|
if (this.focused) {
|
|||
|
|
this.changeFocusedItemIndex(event, event.processedItem.index);
|
|||
|
|
}
|
|||
|
|
}, "onItemMouseMove"),
|
|||
|
|
menuButtonClick: /* @__PURE__ */ __name(function menuButtonClick(event) {
|
|||
|
|
this.toggle(event);
|
|||
|
|
}, "menuButtonClick"),
|
|||
|
|
menuButtonKeydown: /* @__PURE__ */ __name(function menuButtonKeydown(event) {
|
|||
|
|
(event.code === "Enter" || event.code === "NumpadEnter" || event.code === "Space") && this.menuButtonClick(event);
|
|||
|
|
}, "menuButtonKeydown"),
|
|||
|
|
onArrowDownKey: /* @__PURE__ */ __name(function onArrowDownKey2(event) {
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var root11 = processedItem ? isEmpty(processedItem.parent) : null;
|
|||
|
|
if (root11) {
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
if (grouped) {
|
|||
|
|
this.onItemChange({
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
parentKey: processedItem.key
|
|||
|
|
};
|
|||
|
|
this.onArrowRightKey(event);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
var itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();
|
|||
|
|
this.changeFocusedItemIndex(event, itemIndex);
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onArrowDownKey"),
|
|||
|
|
onArrowUpKey: /* @__PURE__ */ __name(function onArrowUpKey2(event) {
|
|||
|
|
var _this3 = this;
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var root11 = isEmpty(processedItem.parent);
|
|||
|
|
if (root11) {
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
if (grouped) {
|
|||
|
|
this.onItemChange({
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
parentKey: processedItem.key
|
|||
|
|
};
|
|||
|
|
var itemIndex = this.findLastItemIndex();
|
|||
|
|
this.changeFocusedItemIndex(event, itemIndex);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
var parentItem = this.activeItemPath.find(function(p) {
|
|||
|
|
return p.key === processedItem.parentKey;
|
|||
|
|
});
|
|||
|
|
if (this.focusedItemInfo.index === 0) {
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
parentKey: parentItem ? parentItem.parentKey : ""
|
|||
|
|
};
|
|||
|
|
this.searchValue = "";
|
|||
|
|
this.onArrowLeftKey(event);
|
|||
|
|
this.activeItemPath = this.activeItemPath.filter(function(p) {
|
|||
|
|
return p.parentKey !== _this3.focusedItemInfo.parentKey;
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
var _itemIndex = this.focusedItemInfo.index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo.index) : this.findLastFocusedItemIndex();
|
|||
|
|
this.changeFocusedItemIndex(event, _itemIndex);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onArrowUpKey"),
|
|||
|
|
onArrowLeftKey: /* @__PURE__ */ __name(function onArrowLeftKey2(event) {
|
|||
|
|
var _this4 = this;
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var parentItem = processedItem ? this.activeItemPath.find(function(p) {
|
|||
|
|
return p.key === processedItem.parentKey;
|
|||
|
|
}) : null;
|
|||
|
|
if (parentItem) {
|
|||
|
|
this.onItemChange({
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem: parentItem
|
|||
|
|
});
|
|||
|
|
this.activeItemPath = this.activeItemPath.filter(function(p) {
|
|||
|
|
return p.parentKey !== _this4.focusedItemInfo.parentKey;
|
|||
|
|
});
|
|||
|
|
event.preventDefault();
|
|||
|
|
} else {
|
|||
|
|
var itemIndex = this.focusedItemInfo.index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo.index) : this.findLastFocusedItemIndex();
|
|||
|
|
this.changeFocusedItemIndex(event, itemIndex);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
}, "onArrowLeftKey"),
|
|||
|
|
onArrowRightKey: /* @__PURE__ */ __name(function onArrowRightKey2(event) {
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var parentItem = processedItem ? this.activeItemPath.find(function(p) {
|
|||
|
|
return p.key === processedItem.parentKey;
|
|||
|
|
}) : null;
|
|||
|
|
if (parentItem) {
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
if (grouped) {
|
|||
|
|
this.onItemChange({
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
parentKey: processedItem.key
|
|||
|
|
};
|
|||
|
|
this.onArrowDownKey(event);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
var itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();
|
|||
|
|
this.changeFocusedItemIndex(event, itemIndex);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
}, "onArrowRightKey"),
|
|||
|
|
onHomeKey: /* @__PURE__ */ __name(function onHomeKey2(event) {
|
|||
|
|
this.changeFocusedItemIndex(event, this.findFirstItemIndex());
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onHomeKey"),
|
|||
|
|
onEndKey: /* @__PURE__ */ __name(function onEndKey2(event) {
|
|||
|
|
this.changeFocusedItemIndex(event, this.findLastItemIndex());
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onEndKey"),
|
|||
|
|
onEnterKey: /* @__PURE__ */ __name(function onEnterKey2(event) {
|
|||
|
|
if (this.focusedItemInfo.index !== -1) {
|
|||
|
|
var element = findSingle(this.menubar, 'li[id="'.concat("".concat(this.focusedItemId), '"]'));
|
|||
|
|
var anchorElement = element && findSingle(element, 'a[data-pc-section="itemlink"]');
|
|||
|
|
anchorElement ? anchorElement.click() : element && element.click();
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
!grouped && (this.focusedItemInfo.index = this.findFirstFocusedItemIndex());
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onEnterKey"),
|
|||
|
|
onSpaceKey: /* @__PURE__ */ __name(function onSpaceKey(event) {
|
|||
|
|
this.onEnterKey(event);
|
|||
|
|
}, "onSpaceKey"),
|
|||
|
|
onEscapeKey: /* @__PURE__ */ __name(function onEscapeKey2(event) {
|
|||
|
|
if (this.focusedItemInfo.level !== 0) {
|
|||
|
|
var _focusedItemInfo = this.focusedItemInfo;
|
|||
|
|
this.hide(event, false);
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: Number(_focusedItemInfo.parentKey.split("_")[0]),
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onEscapeKey"),
|
|||
|
|
onTabKey: /* @__PURE__ */ __name(function onTabKey2(event) {
|
|||
|
|
if (this.focusedItemInfo.index !== -1) {
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
!grouped && this.onItemChange({
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.hide();
|
|||
|
|
}, "onTabKey"),
|
|||
|
|
bindOutsideClickListener: /* @__PURE__ */ __name(function bindOutsideClickListener2() {
|
|||
|
|
var _this5 = this;
|
|||
|
|
if (!this.outsideClickListener) {
|
|||
|
|
this.outsideClickListener = function(event) {
|
|||
|
|
var isOutsideContainer = _this5.container && !_this5.container.contains(event.target);
|
|||
|
|
var isOutsideTarget = !(_this5.target && (_this5.target === event.target || _this5.target.contains(event.target)));
|
|||
|
|
if (isOutsideContainer && isOutsideTarget) {
|
|||
|
|
_this5.hide();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
document.addEventListener("click", this.outsideClickListener);
|
|||
|
|
}
|
|||
|
|
}, "bindOutsideClickListener"),
|
|||
|
|
unbindOutsideClickListener: /* @__PURE__ */ __name(function unbindOutsideClickListener2() {
|
|||
|
|
if (this.outsideClickListener) {
|
|||
|
|
document.removeEventListener("click", this.outsideClickListener);
|
|||
|
|
this.outsideClickListener = null;
|
|||
|
|
}
|
|||
|
|
}, "unbindOutsideClickListener"),
|
|||
|
|
bindResizeListener: /* @__PURE__ */ __name(function bindResizeListener2() {
|
|||
|
|
var _this6 = this;
|
|||
|
|
if (!this.resizeListener) {
|
|||
|
|
this.resizeListener = function(event) {
|
|||
|
|
if (!isTouchDevice()) {
|
|||
|
|
_this6.hide(event, true);
|
|||
|
|
}
|
|||
|
|
_this6.mobileActive = false;
|
|||
|
|
};
|
|||
|
|
window.addEventListener("resize", this.resizeListener);
|
|||
|
|
}
|
|||
|
|
}, "bindResizeListener"),
|
|||
|
|
unbindResizeListener: /* @__PURE__ */ __name(function unbindResizeListener2() {
|
|||
|
|
if (this.resizeListener) {
|
|||
|
|
window.removeEventListener("resize", this.resizeListener);
|
|||
|
|
this.resizeListener = null;
|
|||
|
|
}
|
|||
|
|
}, "unbindResizeListener"),
|
|||
|
|
bindMatchMediaListener: /* @__PURE__ */ __name(function bindMatchMediaListener() {
|
|||
|
|
var _this7 = this;
|
|||
|
|
if (!this.matchMediaListener) {
|
|||
|
|
var query = matchMedia("(max-width: ".concat(this.breakpoint, ")"));
|
|||
|
|
this.query = query;
|
|||
|
|
this.queryMatches = query.matches;
|
|||
|
|
this.matchMediaListener = function() {
|
|||
|
|
_this7.queryMatches = query.matches;
|
|||
|
|
_this7.mobileActive = false;
|
|||
|
|
};
|
|||
|
|
this.query.addEventListener("change", this.matchMediaListener);
|
|||
|
|
}
|
|||
|
|
}, "bindMatchMediaListener"),
|
|||
|
|
unbindMatchMediaListener: /* @__PURE__ */ __name(function unbindMatchMediaListener() {
|
|||
|
|
if (this.matchMediaListener) {
|
|||
|
|
this.query.removeEventListener("change", this.matchMediaListener);
|
|||
|
|
this.matchMediaListener = null;
|
|||
|
|
}
|
|||
|
|
}, "unbindMatchMediaListener"),
|
|||
|
|
isItemMatched: /* @__PURE__ */ __name(function isItemMatched(processedItem) {
|
|||
|
|
var _this$getProccessedIt;
|
|||
|
|
return this.isValidItem(processedItem) && ((_this$getProccessedIt = this.getProccessedItemLabel(processedItem)) === null || _this$getProccessedIt === void 0 ? void 0 : _this$getProccessedIt.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase()));
|
|||
|
|
}, "isItemMatched"),
|
|||
|
|
isValidItem: /* @__PURE__ */ __name(function isValidItem(processedItem) {
|
|||
|
|
return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
|
|||
|
|
}, "isValidItem"),
|
|||
|
|
isValidSelectedItem: /* @__PURE__ */ __name(function isValidSelectedItem(processedItem) {
|
|||
|
|
return this.isValidItem(processedItem) && this.isSelected(processedItem);
|
|||
|
|
}, "isValidSelectedItem"),
|
|||
|
|
isSelected: /* @__PURE__ */ __name(function isSelected2(processedItem) {
|
|||
|
|
return this.activeItemPath.some(function(p) {
|
|||
|
|
return p.key === processedItem.key;
|
|||
|
|
});
|
|||
|
|
}, "isSelected"),
|
|||
|
|
findFirstItemIndex: /* @__PURE__ */ __name(function findFirstItemIndex() {
|
|||
|
|
var _this8 = this;
|
|||
|
|
return this.visibleItems.findIndex(function(processedItem) {
|
|||
|
|
return _this8.isValidItem(processedItem);
|
|||
|
|
});
|
|||
|
|
}, "findFirstItemIndex"),
|
|||
|
|
findLastItemIndex: /* @__PURE__ */ __name(function findLastItemIndex() {
|
|||
|
|
var _this9 = this;
|
|||
|
|
return findLastIndex(this.visibleItems, function(processedItem) {
|
|||
|
|
return _this9.isValidItem(processedItem);
|
|||
|
|
});
|
|||
|
|
}, "findLastItemIndex"),
|
|||
|
|
findNextItemIndex: /* @__PURE__ */ __name(function findNextItemIndex(index) {
|
|||
|
|
var _this10 = this;
|
|||
|
|
var matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex(function(processedItem) {
|
|||
|
|
return _this10.isValidItem(processedItem);
|
|||
|
|
}) : -1;
|
|||
|
|
return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
|
|||
|
|
}, "findNextItemIndex"),
|
|||
|
|
findPrevItemIndex: /* @__PURE__ */ __name(function findPrevItemIndex(index) {
|
|||
|
|
var _this11 = this;
|
|||
|
|
var matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), function(processedItem) {
|
|||
|
|
return _this11.isValidItem(processedItem);
|
|||
|
|
}) : -1;
|
|||
|
|
return matchedItemIndex > -1 ? matchedItemIndex : index;
|
|||
|
|
}, "findPrevItemIndex"),
|
|||
|
|
findSelectedItemIndex: /* @__PURE__ */ __name(function findSelectedItemIndex() {
|
|||
|
|
var _this12 = this;
|
|||
|
|
return this.visibleItems.findIndex(function(processedItem) {
|
|||
|
|
return _this12.isValidSelectedItem(processedItem);
|
|||
|
|
});
|
|||
|
|
}, "findSelectedItemIndex"),
|
|||
|
|
findFirstFocusedItemIndex: /* @__PURE__ */ __name(function findFirstFocusedItemIndex() {
|
|||
|
|
var selectedIndex = this.findSelectedItemIndex();
|
|||
|
|
return selectedIndex < 0 ? this.findFirstItemIndex() : selectedIndex;
|
|||
|
|
}, "findFirstFocusedItemIndex"),
|
|||
|
|
findLastFocusedItemIndex: /* @__PURE__ */ __name(function findLastFocusedItemIndex() {
|
|||
|
|
var selectedIndex = this.findSelectedItemIndex();
|
|||
|
|
return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;
|
|||
|
|
}, "findLastFocusedItemIndex"),
|
|||
|
|
searchItems: /* @__PURE__ */ __name(function searchItems(event, _char) {
|
|||
|
|
var _this13 = this;
|
|||
|
|
this.searchValue = (this.searchValue || "") + _char;
|
|||
|
|
var itemIndex = -1;
|
|||
|
|
var matched = false;
|
|||
|
|
if (this.focusedItemInfo.index !== -1) {
|
|||
|
|
itemIndex = this.visibleItems.slice(this.focusedItemInfo.index).findIndex(function(processedItem) {
|
|||
|
|
return _this13.isItemMatched(processedItem);
|
|||
|
|
});
|
|||
|
|
itemIndex = itemIndex === -1 ? this.visibleItems.slice(0, this.focusedItemInfo.index).findIndex(function(processedItem) {
|
|||
|
|
return _this13.isItemMatched(processedItem);
|
|||
|
|
}) : itemIndex + this.focusedItemInfo.index;
|
|||
|
|
} else {
|
|||
|
|
itemIndex = this.visibleItems.findIndex(function(processedItem) {
|
|||
|
|
return _this13.isItemMatched(processedItem);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (itemIndex !== -1) {
|
|||
|
|
matched = true;
|
|||
|
|
}
|
|||
|
|
if (itemIndex === -1 && this.focusedItemInfo.index === -1) {
|
|||
|
|
itemIndex = this.findFirstFocusedItemIndex();
|
|||
|
|
}
|
|||
|
|
if (itemIndex !== -1) {
|
|||
|
|
this.changeFocusedItemIndex(event, itemIndex);
|
|||
|
|
}
|
|||
|
|
if (this.searchTimeout) {
|
|||
|
|
clearTimeout(this.searchTimeout);
|
|||
|
|
}
|
|||
|
|
this.searchTimeout = setTimeout(function() {
|
|||
|
|
_this13.searchValue = "";
|
|||
|
|
_this13.searchTimeout = null;
|
|||
|
|
}, 500);
|
|||
|
|
return matched;
|
|||
|
|
}, "searchItems"),
|
|||
|
|
changeFocusedItemIndex: /* @__PURE__ */ __name(function changeFocusedItemIndex(event, index) {
|
|||
|
|
if (this.focusedItemInfo.index !== index) {
|
|||
|
|
this.focusedItemInfo.index = index;
|
|||
|
|
this.scrollInView();
|
|||
|
|
}
|
|||
|
|
}, "changeFocusedItemIndex"),
|
|||
|
|
scrollInView: /* @__PURE__ */ __name(function scrollInView2() {
|
|||
|
|
var index = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : -1;
|
|||
|
|
var id = index !== -1 ? "".concat(this.id, "_").concat(index) : this.focusedItemId;
|
|||
|
|
var element = findSingle(this.menubar, 'li[id="'.concat(id, '"]'));
|
|||
|
|
if (element) {
|
|||
|
|
element.scrollIntoView && element.scrollIntoView({
|
|||
|
|
block: "nearest",
|
|||
|
|
inline: "start"
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, "scrollInView"),
|
|||
|
|
createProcessedItems: /* @__PURE__ */ __name(function createProcessedItems(items) {
|
|||
|
|
var _this14 = this;
|
|||
|
|
var level = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
|
|||
|
|
var parent = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
|
|||
|
|
var parentKey = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "";
|
|||
|
|
var processedItems3 = [];
|
|||
|
|
items && items.forEach(function(item3, index) {
|
|||
|
|
var key = (parentKey !== "" ? parentKey + "_" : "") + index;
|
|||
|
|
var newItem = {
|
|||
|
|
item: item3,
|
|||
|
|
index,
|
|||
|
|
level,
|
|||
|
|
key,
|
|||
|
|
parent,
|
|||
|
|
parentKey
|
|||
|
|
};
|
|||
|
|
newItem["items"] = _this14.createProcessedItems(item3.items, level + 1, newItem, key);
|
|||
|
|
processedItems3.push(newItem);
|
|||
|
|
});
|
|||
|
|
return processedItems3;
|
|||
|
|
}, "createProcessedItems"),
|
|||
|
|
containerRef: /* @__PURE__ */ __name(function containerRef(el) {
|
|||
|
|
this.container = el;
|
|||
|
|
}, "containerRef"),
|
|||
|
|
menubarRef: /* @__PURE__ */ __name(function menubarRef(el) {
|
|||
|
|
this.menubar = el ? el.$el : void 0;
|
|||
|
|
}, "menubarRef")
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
processedItems: /* @__PURE__ */ __name(function processedItems() {
|
|||
|
|
return this.createProcessedItems(this.model || []);
|
|||
|
|
}, "processedItems"),
|
|||
|
|
visibleItems: /* @__PURE__ */ __name(function visibleItems() {
|
|||
|
|
var _this15 = this;
|
|||
|
|
var processedItem = this.activeItemPath.find(function(p) {
|
|||
|
|
return p.key === _this15.focusedItemInfo.parentKey;
|
|||
|
|
});
|
|||
|
|
return processedItem ? processedItem.items : this.processedItems;
|
|||
|
|
}, "visibleItems"),
|
|||
|
|
focusedItemId: /* @__PURE__ */ __name(function focusedItemId() {
|
|||
|
|
return this.focusedItemInfo.index !== -1 ? "".concat(this.id).concat(isNotEmpty(this.focusedItemInfo.parentKey) ? "_" + this.focusedItemInfo.parentKey : "", "_").concat(this.focusedItemInfo.index) : null;
|
|||
|
|
}, "focusedItemId")
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
MenubarSub: script$1$3,
|
|||
|
|
BarsIcon: script$v
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
function _typeof(o) {
|
|||
|
|
"@babel/helpers - typeof";
|
|||
|
|
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
|
|||
|
|
return typeof o2;
|
|||
|
|
} : function(o2) {
|
|||
|
|
return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
|
|||
|
|
}, _typeof(o);
|
|||
|
|
}
|
|||
|
|
__name(_typeof, "_typeof");
|
|||
|
|
function ownKeys(e, r) {
|
|||
|
|
var t = Object.keys(e);
|
|||
|
|
if (Object.getOwnPropertySymbols) {
|
|||
|
|
var o = Object.getOwnPropertySymbols(e);
|
|||
|
|
r && (o = o.filter(function(r2) {
|
|||
|
|
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|||
|
|
})), t.push.apply(t, o);
|
|||
|
|
}
|
|||
|
|
return t;
|
|||
|
|
}
|
|||
|
|
__name(ownKeys, "ownKeys");
|
|||
|
|
function _objectSpread(e) {
|
|||
|
|
for (var r = 1; r < arguments.length; r++) {
|
|||
|
|
var t = null != arguments[r] ? arguments[r] : {};
|
|||
|
|
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|||
|
|
_defineProperty(e, r2, t[r2]);
|
|||
|
|
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|||
|
|
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return e;
|
|||
|
|
}
|
|||
|
|
__name(_objectSpread, "_objectSpread");
|
|||
|
|
function _defineProperty(e, r, t) {
|
|||
|
|
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
|
|||
|
|
}
|
|||
|
|
__name(_defineProperty, "_defineProperty");
|
|||
|
|
function _toPropertyKey(t) {
|
|||
|
|
var i = _toPrimitive(t, "string");
|
|||
|
|
return "symbol" == _typeof(i) ? i : i + "";
|
|||
|
|
}
|
|||
|
|
__name(_toPropertyKey, "_toPropertyKey");
|
|||
|
|
function _toPrimitive(t, r) {
|
|||
|
|
if ("object" != _typeof(t) || !t) return t;
|
|||
|
|
var e = t[Symbol.toPrimitive];
|
|||
|
|
if (void 0 !== e) {
|
|||
|
|
var i = e.call(t, r || "default");
|
|||
|
|
if ("object" != _typeof(i)) return i;
|
|||
|
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|||
|
|
}
|
|||
|
|
return ("string" === r ? String : Number)(t);
|
|||
|
|
}
|
|||
|
|
__name(_toPrimitive, "_toPrimitive");
|
|||
|
|
var _hoisted_1$7 = ["aria-haspopup", "aria-expanded", "aria-controls", "aria-label"];
|
|||
|
|
function render$5(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _component_BarsIcon = resolveComponent("BarsIcon");
|
|||
|
|
var _component_MenubarSub = resolveComponent("MenubarSub");
|
|||
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
ref: $options.containerRef,
|
|||
|
|
"class": _ctx.cx("root")
|
|||
|
|
}, _ctx.ptmi("root")), [_ctx.$slots.start ? (openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
"class": _ctx.cx("start")
|
|||
|
|
}, _ctx.ptm("start")), [renderSlot(_ctx.$slots, "start")], 16)) : createCommentVNode("", true), renderSlot(_ctx.$slots, _ctx.$slots.button ? "button" : "menubutton", {
|
|||
|
|
id: $data.id,
|
|||
|
|
"class": normalizeClass(_ctx.cx("button")),
|
|||
|
|
toggleCallback: /* @__PURE__ */ __name(function toggleCallback(event) {
|
|||
|
|
return $options.menuButtonClick(event);
|
|||
|
|
}, "toggleCallback")
|
|||
|
|
}, function() {
|
|||
|
|
var _ctx$$primevue$config;
|
|||
|
|
return [_ctx.model && _ctx.model.length > 0 ? (openBlock(), createElementBlock("a", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
ref: "menubutton",
|
|||
|
|
role: "button",
|
|||
|
|
tabindex: "0",
|
|||
|
|
"class": _ctx.cx("button"),
|
|||
|
|
"aria-haspopup": _ctx.model.length && _ctx.model.length > 0 ? true : false,
|
|||
|
|
"aria-expanded": $data.mobileActive,
|
|||
|
|
"aria-controls": $data.id,
|
|||
|
|
"aria-label": (_ctx$$primevue$config = _ctx.$primevue.config.locale.aria) === null || _ctx$$primevue$config === void 0 ? void 0 : _ctx$$primevue$config.navigation,
|
|||
|
|
onClick: _cache[0] || (_cache[0] = function($event) {
|
|||
|
|
return $options.menuButtonClick($event);
|
|||
|
|
}),
|
|||
|
|
onKeydown: _cache[1] || (_cache[1] = function($event) {
|
|||
|
|
return $options.menuButtonKeydown($event);
|
|||
|
|
})
|
|||
|
|
}, _objectSpread(_objectSpread({}, _ctx.buttonProps), _ctx.ptm("button"))), [renderSlot(_ctx.$slots, _ctx.$slots.buttonicon ? "buttonicon" : "menubuttonicon", {}, function() {
|
|||
|
|
return [createVNode(_component_BarsIcon, normalizeProps(guardReactiveProps(_ctx.ptm("buttonicon"))), null, 16)];
|
|||
|
|
})], 16, _hoisted_1$7)) : createCommentVNode("", true)];
|
|||
|
|
}), createVNode(_component_MenubarSub, {
|
|||
|
|
ref: $options.menubarRef,
|
|||
|
|
id: $data.id + "_list",
|
|||
|
|
role: "menubar",
|
|||
|
|
items: $options.processedItems,
|
|||
|
|
templates: _ctx.$slots,
|
|||
|
|
root: true,
|
|||
|
|
mobileActive: $data.mobileActive,
|
|||
|
|
tabindex: "0",
|
|||
|
|
"aria-activedescendant": $data.focused ? $options.focusedItemId : void 0,
|
|||
|
|
menuId: $data.id,
|
|||
|
|
focusedItemId: $data.focused ? $options.focusedItemId : void 0,
|
|||
|
|
activeItemPath: $data.activeItemPath,
|
|||
|
|
level: 0,
|
|||
|
|
"aria-labelledby": _ctx.ariaLabelledby,
|
|||
|
|
"aria-label": _ctx.ariaLabel,
|
|||
|
|
pt: _ctx.pt,
|
|||
|
|
unstyled: _ctx.unstyled,
|
|||
|
|
onFocus: $options.onFocus,
|
|||
|
|
onBlur: $options.onBlur,
|
|||
|
|
onKeydown: $options.onKeyDown,
|
|||
|
|
onItemClick: $options.onItemClick,
|
|||
|
|
onItemMouseenter: $options.onItemMouseEnter,
|
|||
|
|
onItemMousemove: $options.onItemMouseMove
|
|||
|
|
}, null, 8, ["id", "items", "templates", "mobileActive", "aria-activedescendant", "menuId", "focusedItemId", "activeItemPath", "aria-labelledby", "aria-label", "pt", "unstyled", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter", "onItemMousemove"]), _ctx.$slots.end ? (openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
"class": _ctx.cx("end")
|
|||
|
|
}, _ctx.ptm("end")), [renderSlot(_ctx.$slots, "end")], 16)) : createCommentVNode("", true)], 16);
|
|||
|
|
}
|
|||
|
|
__name(render$5, "render$5");
|
|||
|
|
script$5.render = render$5;
|
|||
|
|
const _withScopeId$2 = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-9646ca0a"), n = n(), popScopeId(), n), "_withScopeId$2");
|
|||
|
|
const _hoisted_1$6 = ["href"];
|
|||
|
|
const _hoisted_2$4 = { class: "p-menubar-item-label" };
|
|||
|
|
const _hoisted_3$2 = {
|
|||
|
|
key: 1,
|
|||
|
|
class: "ml-auto border border-surface rounded text-muted text-xs p-1 keybinding-tag"
|
|||
|
|
};
|
|||
|
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "CommandMenubar",
|
|||
|
|
setup(__props) {
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const dropdownDirection = computed(
|
|||
|
|
() => settingStore.get("Comfy.UseNewMenu") === "Top" ? "down" : "up"
|
|||
|
|
);
|
|||
|
|
const menuItemsStore = useMenuItemStore();
|
|||
|
|
const items = menuItemsStore.menuItems;
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createBlock(unref(script$5), {
|
|||
|
|
model: unref(items),
|
|||
|
|
class: "top-menubar border-none p-0 bg-transparent",
|
|||
|
|
pt: {
|
|||
|
|
rootList: "gap-0 flex-nowrap w-auto",
|
|||
|
|
submenu: `dropdown-direction-${dropdownDirection.value}`,
|
|||
|
|
item: "relative"
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
item: withCtx(({ item: item3, props }) => [
|
|||
|
|
createBaseVNode("a", mergeProps({ class: "p-menubar-item-link" }, props.action, {
|
|||
|
|
href: item3.url,
|
|||
|
|
target: "_blank"
|
|||
|
|
}), [
|
|||
|
|
item3.icon ? (openBlock(), createElementBlock("span", {
|
|||
|
|
key: 0,
|
|||
|
|
class: normalizeClass(["p-menubar-item-icon", item3.icon])
|
|||
|
|
}, null, 2)) : createCommentVNode("", true),
|
|||
|
|
createBaseVNode("span", _hoisted_2$4, toDisplayString(item3.label), 1),
|
|||
|
|
item3?.comfyCommand?.keybinding ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(item3.comfyCommand.keybinding.combo.toString()), 1)) : createCommentVNode("", true)
|
|||
|
|
], 16, _hoisted_1$6)
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
}, 8, ["model", "pt"]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const CommandMenubar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-9646ca0a"]]);
|
|||
|
|
var theme$2 = /* @__PURE__ */ __name(function theme7(_ref) {
|
|||
|
|
var dt = _ref.dt;
|
|||
|
|
return "\n.p-panel {\n border: 1px solid ".concat(dt("panel.border.color"), ";\n border-radius: ").concat(dt("panel.border.radius"), ";\n background: ").concat(dt("panel.background"), ";\n color: ").concat(dt("panel.color"), ";\n}\n\n.p-panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ").concat(dt("panel.header.padding"), ";\n background: ").concat(dt("panel.header.background"), ";\n color: ").concat(dt("panel.header.color"), ";\n border-style: solid;\n border-width: ").concat(dt("panel.header.border.width"), ";\n border-color: ").concat(dt("panel.header.border.color"), ";\n border-radius: ").concat(dt("panel.header.border.radius"), ";\n}\n\n.p-panel-toggleable .p-panel-header {\n padding: ").concat(dt("panel.toggleable.header.padding"), ";\n}\n\n.p-panel-title {\n line-height: 1;\n font-weight: ").concat(dt("panel.title.font.weight"), ";\n}\n\n.p-panel-content {\n padding: ").concat(dt("panel.content.padding"), ";\n}\n\n.p-panel-footer {\n padding: ").concat(dt("panel.footer.padding"), ";\n}\n");
|
|||
|
|
}, "theme");
|
|||
|
|
var classes$2 = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root8(_ref2) {
|
|||
|
|
var props = _ref2.props;
|
|||
|
|
return ["p-panel p-component", {
|
|||
|
|
"p-panel-toggleable": props.toggleable
|
|||
|
|
}];
|
|||
|
|
}, "root"),
|
|||
|
|
header: "p-panel-header",
|
|||
|
|
title: "p-panel-title",
|
|||
|
|
headerActions: "p-panel-header-actions",
|
|||
|
|
pcToggleButton: "p-panel-toggle-button",
|
|||
|
|
contentContainer: "p-panel-content-container",
|
|||
|
|
content: "p-panel-content",
|
|||
|
|
footer: "p-panel-footer"
|
|||
|
|
};
|
|||
|
|
var PanelStyle = BaseStyle.extend({
|
|||
|
|
name: "panel",
|
|||
|
|
theme: theme$2,
|
|||
|
|
classes: classes$2
|
|||
|
|
});
|
|||
|
|
var script$1$2 = {
|
|||
|
|
name: "BasePanel",
|
|||
|
|
"extends": script$e,
|
|||
|
|
props: {
|
|||
|
|
header: String,
|
|||
|
|
toggleable: Boolean,
|
|||
|
|
collapsed: Boolean,
|
|||
|
|
toggleButtonProps: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": /* @__PURE__ */ __name(function _default() {
|
|||
|
|
return {
|
|||
|
|
severity: "secondary",
|
|||
|
|
text: true,
|
|||
|
|
rounded: true
|
|||
|
|
};
|
|||
|
|
}, "_default")
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
style: PanelStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide9() {
|
|||
|
|
return {
|
|||
|
|
$pcPanel: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
var script$4 = {
|
|||
|
|
name: "Panel",
|
|||
|
|
"extends": script$1$2,
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
emits: ["update:collapsed", "toggle"],
|
|||
|
|
data: /* @__PURE__ */ __name(function data6() {
|
|||
|
|
return {
|
|||
|
|
id: this.$attrs.id,
|
|||
|
|
d_collapsed: this.collapsed
|
|||
|
|
};
|
|||
|
|
}, "data"),
|
|||
|
|
watch: {
|
|||
|
|
"$attrs.id": /* @__PURE__ */ __name(function $attrsId3(newValue) {
|
|||
|
|
this.id = newValue || UniqueComponentId();
|
|||
|
|
}, "$attrsId"),
|
|||
|
|
collapsed: /* @__PURE__ */ __name(function collapsed(newValue) {
|
|||
|
|
this.d_collapsed = newValue;
|
|||
|
|
}, "collapsed")
|
|||
|
|
},
|
|||
|
|
mounted: /* @__PURE__ */ __name(function mounted6() {
|
|||
|
|
this.id = this.id || UniqueComponentId();
|
|||
|
|
}, "mounted"),
|
|||
|
|
methods: {
|
|||
|
|
toggle: /* @__PURE__ */ __name(function toggle2(event) {
|
|||
|
|
this.d_collapsed = !this.d_collapsed;
|
|||
|
|
this.$emit("update:collapsed", this.d_collapsed);
|
|||
|
|
this.$emit("toggle", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
value: this.d_collapsed
|
|||
|
|
});
|
|||
|
|
}, "toggle"),
|
|||
|
|
onKeyDown: /* @__PURE__ */ __name(function onKeyDown3(event) {
|
|||
|
|
if (event.code === "Enter" || event.code === "NumpadEnter" || event.code === "Space") {
|
|||
|
|
this.toggle(event);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
}, "onKeyDown")
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
buttonAriaLabel: /* @__PURE__ */ __name(function buttonAriaLabel() {
|
|||
|
|
return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;
|
|||
|
|
}, "buttonAriaLabel")
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
PlusIcon: script$w,
|
|||
|
|
MinusIcon: script$x,
|
|||
|
|
Button: script$d
|
|||
|
|
},
|
|||
|
|
directives: {
|
|||
|
|
ripple: Ripple
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var _hoisted_1$5 = ["id"];
|
|||
|
|
var _hoisted_2$3 = ["id", "aria-labelledby"];
|
|||
|
|
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _component_Button = resolveComponent("Button");
|
|||
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("root")
|
|||
|
|
}, _ctx.ptmi("root")), [createBaseVNode("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("header")
|
|||
|
|
}, _ctx.ptm("header")), [renderSlot(_ctx.$slots, "header", {
|
|||
|
|
id: $data.id + "_header",
|
|||
|
|
"class": normalizeClass(_ctx.cx("title"))
|
|||
|
|
}, function() {
|
|||
|
|
return [_ctx.header ? (openBlock(), createElementBlock("span", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
id: $data.id + "_header",
|
|||
|
|
"class": _ctx.cx("title")
|
|||
|
|
}, _ctx.ptm("title")), toDisplayString(_ctx.header), 17, _hoisted_1$5)) : createCommentVNode("", true)];
|
|||
|
|
}), createBaseVNode("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("headerActions")
|
|||
|
|
}, _ctx.ptm("headerActions")), [renderSlot(_ctx.$slots, "icons"), _ctx.toggleable ? (openBlock(), createBlock(_component_Button, mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
id: $data.id + "_header",
|
|||
|
|
"class": _ctx.cx("pcToggleButton"),
|
|||
|
|
"aria-label": $options.buttonAriaLabel,
|
|||
|
|
"aria-controls": $data.id + "_content",
|
|||
|
|
"aria-expanded": !$data.d_collapsed,
|
|||
|
|
unstyled: _ctx.unstyled,
|
|||
|
|
onClick: $options.toggle,
|
|||
|
|
onKeydown: $options.onKeyDown
|
|||
|
|
}, _ctx.toggleButtonProps, {
|
|||
|
|
pt: _ctx.ptm("pcToggleButton")
|
|||
|
|
}), {
|
|||
|
|
icon: withCtx(function(slotProps) {
|
|||
|
|
return [renderSlot(_ctx.$slots, _ctx.$slots.toggleicon ? "toggleicon" : "togglericon", {
|
|||
|
|
collapsed: $data.d_collapsed
|
|||
|
|
}, function() {
|
|||
|
|
return [(openBlock(), createBlock(resolveDynamicComponent($data.d_collapsed ? "PlusIcon" : "MinusIcon"), mergeProps({
|
|||
|
|
"class": slotProps["class"]
|
|||
|
|
}, _ctx.ptm("pcToggleButton")["icon"]), null, 16, ["class"]))];
|
|||
|
|
})];
|
|||
|
|
}),
|
|||
|
|
_: 3
|
|||
|
|
}, 16, ["id", "class", "aria-label", "aria-controls", "aria-expanded", "unstyled", "onClick", "onKeydown", "pt"])) : createCommentVNode("", true)], 16)], 16), createVNode(Transition, mergeProps({
|
|||
|
|
name: "p-toggleable-content"
|
|||
|
|
}, _ctx.ptm("transition")), {
|
|||
|
|
"default": withCtx(function() {
|
|||
|
|
return [withDirectives(createBaseVNode("div", mergeProps({
|
|||
|
|
id: $data.id + "_content",
|
|||
|
|
"class": _ctx.cx("contentContainer"),
|
|||
|
|
role: "region",
|
|||
|
|
"aria-labelledby": $data.id + "_header"
|
|||
|
|
}, _ctx.ptm("contentContainer")), [createBaseVNode("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("content")
|
|||
|
|
}, _ctx.ptm("content")), [renderSlot(_ctx.$slots, "default")], 16), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
"class": _ctx.cx("footer")
|
|||
|
|
}, _ctx.ptm("footer")), [renderSlot(_ctx.$slots, "footer")], 16)) : createCommentVNode("", true)], 16, _hoisted_2$3), [[vShow, !$data.d_collapsed]])];
|
|||
|
|
}),
|
|||
|
|
_: 3
|
|||
|
|
}, 16)], 16);
|
|||
|
|
}
|
|||
|
|
__name(render$4, "render$4");
|
|||
|
|
script$4.render = render$4;
|
|||
|
|
const _hoisted_1$4 = {
|
|||
|
|
viewBox: "0 0 24 24",
|
|||
|
|
width: "1.2em",
|
|||
|
|
height: "1.2em"
|
|||
|
|
};
|
|||
|
|
const _hoisted_2$2 = /* @__PURE__ */ createBaseVNode("g", {
|
|||
|
|
fill: "none",
|
|||
|
|
stroke: "currentColor",
|
|||
|
|
"stroke-linecap": "round",
|
|||
|
|
"stroke-linejoin": "round",
|
|||
|
|
"stroke-width": "2"
|
|||
|
|
}, [
|
|||
|
|
/* @__PURE__ */ createBaseVNode("path", { d: "M16 12H3m13 6H3m7-12H3m18 12V8a2 2 0 0 0-2-2h-5" }),
|
|||
|
|
/* @__PURE__ */ createBaseVNode("path", { d: "m16 8l-2-2l2-2" })
|
|||
|
|
], -1);
|
|||
|
|
const _hoisted_3$1 = [
|
|||
|
|
_hoisted_2$2
|
|||
|
|
];
|
|||
|
|
function render$3(_ctx, _cache) {
|
|||
|
|
return openBlock(), createElementBlock("svg", _hoisted_1$4, [..._hoisted_3$1]);
|
|||
|
|
}
|
|||
|
|
__name(render$3, "render$3");
|
|||
|
|
const __unplugin_components_0 = markRaw({ name: "lucide-list-start", render: render$3 });
|
|||
|
|
var theme$1 = /* @__PURE__ */ __name(function theme8(_ref) {
|
|||
|
|
var dt = _ref.dt;
|
|||
|
|
return "\n.p-tieredmenu {\n background: ".concat(dt("tieredmenu.background"), ";\n color: ").concat(dt("tieredmenu.color"), ";\n border: 1px solid ").concat(dt("tieredmenu.border.color"), ";\n border-radius: ").concat(dt("tieredmenu.border.radius"), ";\n min-width: 12.5rem;\n}\n\n.p-tieredmenu-root-list,\n.p-tieredmenu-submenu {\n margin: 0;\n padding: ").concat(dt("tieredmenu.list.padding"), ";\n list-style: none;\n outline: 0 none;\n display: flex;\n flex-direction: column;\n gap: ").concat(dt("tieredmenu.list.gap"), ";\n}\n\n.p-tieredmenu-submenu {\n position: absolute;\n min-width: 100%;\n z-index: 1;\n background: ").concat(dt("tieredmenu.background"), ";\n color: ").concat(dt("tieredmenu.color"), ";\n border: 1px solid ").concat(dt("tieredmenu.border.color"), ";\n border-radius: ").concat(dt("tieredmenu.border.radius"), ";\n box-shadow: ").concat(dt("tieredmenu.shadow"), ";\n}\n\n.p-tieredmenu-item {\n position: relative;\n}\n\n.p-tieredmenu-item-content {\n transition: background ").concat(dt("tieredmenu.transition.duration"), ", color ").concat(dt("tieredmenu.transition.duration"), ";\n border-radius: ").concat(dt("tieredmenu.item.border.radius"), ";\n color: ").concat(dt("tieredmenu.item.color"), ";\n}\n\n.p-tieredmenu-item-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n color: inherit;\n padding: ").concat(dt("tieredmenu.item.padding"), ";\n gap: ").concat(dt("tieredmenu.item.gap"), ";\n user-select: none;\n outline: 0 none;\n}\n\n.p-tieredmenu-item-label {\n line-height: 1;\n}\n\n.p-tieredmenu-item-icon {\n color: ").concat(dt("tieredmenu.item.icon.color"), ";\n}\n\n.p-tieredmenu-submenu-icon {\n color: ").concat(dt("tieredmenu.submenu.icon.color"), ";\n margin-left: auto;\n font-size: ").concat(dt("tieredmenu.submenu.icon.size"), ";\n width: ").concat(dt("tieredmenu.submenu.icon.size"), ";\n height: ").concat(dt("tieredmenu.submenu.icon.size"), ";\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {\n color: ").concat(dt("tieredmenu.item.focus.color"), ";\n background: ").concat(dt("tieredmenu.item.focus.background"), ";\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n color: ").concat(dt("tieredmenu.item.icon.focus.color"), ";\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n color: ").concat(dt("tieredmenu.submenu.icon.focus.color"), ";\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {\n color: ").concat(dt("tieredmenu.item.focus.color"), ";\n background: ").concat(dt("tieredmenu.item.focus.background"), ";\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {\n color: ").concat(dt("tieredmenu.item.icon.focus.color"), ";\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {\n color: ").concat(dt("tieredmenu.submenu.icon.focus.color"), ";\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content {\n color: ").concat(dt("tieredmenu.item.active.color"), ";\n background: ").concat(dt("tieredmenu.item.active.background"), ";\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n color: ").concat(dt("tieredmenu.item.icon.active.color"), ";\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n color: ").concat(dt("tieredmenu.submenu.icon.active.color"), ";\n}\n\n.p-tieredmenu-separator {\n border-top: 1px solid ").concat(dt("tieredmenu.separator.border.color"), ";\n}\n\n.p-tieredmenu-overlay {\n box-shadow: ").concat(dt("tieredmenu.shadow"), ";\n}\n\n.p-tieredmenu-enter-from,\n.p-tieredmenu-leave-active {\n opacity: 0;\n}\n\n.p-tieredmenu-enter-active {\n transition: opacity 250ms;\n}\n");
|
|||
|
|
}, "theme");
|
|||
|
|
var inlineStyles = {
|
|||
|
|
submenu: /* @__PURE__ */ __name(function submenu2(_ref2) {
|
|||
|
|
var instance = _ref2.instance, processedItem = _ref2.processedItem;
|
|||
|
|
return {
|
|||
|
|
display: instance.isItemActive(processedItem) ? "flex" : "none"
|
|||
|
|
};
|
|||
|
|
}, "submenu")
|
|||
|
|
};
|
|||
|
|
var classes$1 = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root9(_ref3) {
|
|||
|
|
_ref3.instance;
|
|||
|
|
var props = _ref3.props;
|
|||
|
|
return ["p-tieredmenu p-component", {
|
|||
|
|
"p-tieredmenu-overlay": props.popup
|
|||
|
|
}];
|
|||
|
|
}, "root"),
|
|||
|
|
start: "p-tieredmenu-start",
|
|||
|
|
rootList: "p-tieredmenu-root-list",
|
|||
|
|
item: /* @__PURE__ */ __name(function item2(_ref4) {
|
|||
|
|
var instance = _ref4.instance, processedItem = _ref4.processedItem;
|
|||
|
|
return ["p-tieredmenu-item", {
|
|||
|
|
"p-tieredmenu-item-active": instance.isItemActive(processedItem),
|
|||
|
|
"p-focus": instance.isItemFocused(processedItem),
|
|||
|
|
"p-disabled": instance.isItemDisabled(processedItem)
|
|||
|
|
}];
|
|||
|
|
}, "item"),
|
|||
|
|
itemContent: "p-tieredmenu-item-content",
|
|||
|
|
itemLink: "p-tieredmenu-item-link",
|
|||
|
|
itemIcon: "p-tieredmenu-item-icon",
|
|||
|
|
itemLabel: "p-tieredmenu-item-label",
|
|||
|
|
submenuIcon: "p-tieredmenu-submenu-icon",
|
|||
|
|
submenu: "p-tieredmenu-submenu",
|
|||
|
|
separator: "p-tieredmenu-separator",
|
|||
|
|
end: "p-tieredmenu-end"
|
|||
|
|
};
|
|||
|
|
var TieredMenuStyle = BaseStyle.extend({
|
|||
|
|
name: "tieredmenu",
|
|||
|
|
theme: theme$1,
|
|||
|
|
classes: classes$1,
|
|||
|
|
inlineStyles
|
|||
|
|
});
|
|||
|
|
var script$2 = {
|
|||
|
|
name: "BaseTieredMenu",
|
|||
|
|
"extends": script$e,
|
|||
|
|
props: {
|
|||
|
|
popup: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
model: {
|
|||
|
|
type: Array,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
appendTo: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
"default": "body"
|
|||
|
|
},
|
|||
|
|
autoZIndex: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": true
|
|||
|
|
},
|
|||
|
|
baseZIndex: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 0
|
|||
|
|
},
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
tabindex: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 0
|
|||
|
|
},
|
|||
|
|
ariaLabelledby: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
ariaLabel: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
style: TieredMenuStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide10() {
|
|||
|
|
return {
|
|||
|
|
$pcTieredMenu: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
var script$1$1 = {
|
|||
|
|
name: "TieredMenuSub",
|
|||
|
|
hostName: "TieredMenu",
|
|||
|
|
"extends": script$e,
|
|||
|
|
emits: ["item-click", "item-mouseenter", "item-mousemove"],
|
|||
|
|
container: null,
|
|||
|
|
props: {
|
|||
|
|
menuId: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
focusedItemId: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
items: {
|
|||
|
|
type: Array,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
visible: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
level: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 0
|
|||
|
|
},
|
|||
|
|
templates: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
activeItemPath: {
|
|||
|
|
type: Object,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
tabindex: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getItemId: /* @__PURE__ */ __name(function getItemId2(processedItem) {
|
|||
|
|
return "".concat(this.menuId, "_").concat(processedItem.key);
|
|||
|
|
}, "getItemId"),
|
|||
|
|
getItemKey: /* @__PURE__ */ __name(function getItemKey2(processedItem) {
|
|||
|
|
return this.getItemId(processedItem);
|
|||
|
|
}, "getItemKey"),
|
|||
|
|
getItemProp: /* @__PURE__ */ __name(function getItemProp3(processedItem, name, params) {
|
|||
|
|
return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : void 0;
|
|||
|
|
}, "getItemProp"),
|
|||
|
|
getItemLabel: /* @__PURE__ */ __name(function getItemLabel3(processedItem) {
|
|||
|
|
return this.getItemProp(processedItem, "label");
|
|||
|
|
}, "getItemLabel"),
|
|||
|
|
getItemLabelId: /* @__PURE__ */ __name(function getItemLabelId2(processedItem) {
|
|||
|
|
return "".concat(this.menuId, "_").concat(processedItem.key, "_label");
|
|||
|
|
}, "getItemLabelId"),
|
|||
|
|
getPTOptions: /* @__PURE__ */ __name(function getPTOptions5(processedItem, index, key) {
|
|||
|
|
return this.ptm(key, {
|
|||
|
|
context: {
|
|||
|
|
item: processedItem.item,
|
|||
|
|
index,
|
|||
|
|
active: this.isItemActive(processedItem),
|
|||
|
|
focused: this.isItemFocused(processedItem),
|
|||
|
|
disabled: this.isItemDisabled(processedItem)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, "getPTOptions"),
|
|||
|
|
isItemActive: /* @__PURE__ */ __name(function isItemActive2(processedItem) {
|
|||
|
|
return this.activeItemPath.some(function(path) {
|
|||
|
|
return path.key === processedItem.key;
|
|||
|
|
});
|
|||
|
|
}, "isItemActive"),
|
|||
|
|
isItemVisible: /* @__PURE__ */ __name(function isItemVisible3(processedItem) {
|
|||
|
|
return this.getItemProp(processedItem, "visible") !== false;
|
|||
|
|
}, "isItemVisible"),
|
|||
|
|
isItemDisabled: /* @__PURE__ */ __name(function isItemDisabled3(processedItem) {
|
|||
|
|
return this.getItemProp(processedItem, "disabled");
|
|||
|
|
}, "isItemDisabled"),
|
|||
|
|
isItemFocused: /* @__PURE__ */ __name(function isItemFocused2(processedItem) {
|
|||
|
|
return this.focusedItemId === this.getItemId(processedItem);
|
|||
|
|
}, "isItemFocused"),
|
|||
|
|
isItemGroup: /* @__PURE__ */ __name(function isItemGroup3(processedItem) {
|
|||
|
|
return isNotEmpty(processedItem.items);
|
|||
|
|
}, "isItemGroup"),
|
|||
|
|
onEnter: /* @__PURE__ */ __name(function onEnter2() {
|
|||
|
|
nestedPosition(this.container, this.level);
|
|||
|
|
}, "onEnter"),
|
|||
|
|
onItemClick: /* @__PURE__ */ __name(function onItemClick3(event, processedItem) {
|
|||
|
|
this.getItemProp(processedItem, "command", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
item: processedItem.item
|
|||
|
|
});
|
|||
|
|
this.$emit("item-click", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem,
|
|||
|
|
isFocus: true
|
|||
|
|
});
|
|||
|
|
}, "onItemClick"),
|
|||
|
|
onItemMouseEnter: /* @__PURE__ */ __name(function onItemMouseEnter3(event, processedItem) {
|
|||
|
|
this.$emit("item-mouseenter", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
}, "onItemMouseEnter"),
|
|||
|
|
onItemMouseMove: /* @__PURE__ */ __name(function onItemMouseMove3(event, processedItem) {
|
|||
|
|
this.$emit("item-mousemove", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
}, "onItemMouseMove"),
|
|||
|
|
getAriaSetSize: /* @__PURE__ */ __name(function getAriaSetSize2() {
|
|||
|
|
var _this = this;
|
|||
|
|
return this.items.filter(function(processedItem) {
|
|||
|
|
return _this.isItemVisible(processedItem) && !_this.getItemProp(processedItem, "separator");
|
|||
|
|
}).length;
|
|||
|
|
}, "getAriaSetSize"),
|
|||
|
|
getAriaPosInset: /* @__PURE__ */ __name(function getAriaPosInset3(index) {
|
|||
|
|
var _this2 = this;
|
|||
|
|
return index - this.items.slice(0, index).filter(function(processedItem) {
|
|||
|
|
return _this2.isItemVisible(processedItem) && _this2.getItemProp(processedItem, "separator");
|
|||
|
|
}).length + 1;
|
|||
|
|
}, "getAriaPosInset"),
|
|||
|
|
getMenuItemProps: /* @__PURE__ */ __name(function getMenuItemProps2(processedItem, index) {
|
|||
|
|
return {
|
|||
|
|
action: mergeProps({
|
|||
|
|
"class": this.cx("itemLink"),
|
|||
|
|
tabindex: -1,
|
|||
|
|
"aria-hidden": true
|
|||
|
|
}, this.getPTOptions(processedItem, index, "itemLink")),
|
|||
|
|
icon: mergeProps({
|
|||
|
|
"class": [this.cx("itemIcon"), this.getItemProp(processedItem, "icon")]
|
|||
|
|
}, this.getPTOptions(processedItem, index, "itemIcon")),
|
|||
|
|
label: mergeProps({
|
|||
|
|
"class": this.cx("itemLabel")
|
|||
|
|
}, this.getPTOptions(processedItem, index, "itemLabel")),
|
|||
|
|
submenuicon: mergeProps({
|
|||
|
|
"class": this.cx("submenuIcon")
|
|||
|
|
}, this.getPTOptions(processedItem, index, "submenuIcon"))
|
|||
|
|
};
|
|||
|
|
}, "getMenuItemProps"),
|
|||
|
|
containerRef: /* @__PURE__ */ __name(function containerRef2(el) {
|
|||
|
|
this.container = el;
|
|||
|
|
}, "containerRef")
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
AngleRightIcon: script$t
|
|||
|
|
},
|
|||
|
|
directives: {
|
|||
|
|
ripple: Ripple
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var _hoisted_1$1$1 = ["tabindex"];
|
|||
|
|
var _hoisted_2$1 = ["id", "aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "aria-level", "aria-setsize", "aria-posinset", "data-p-active", "data-p-focused", "data-p-disabled"];
|
|||
|
|
var _hoisted_3 = ["onClick", "onMouseenter", "onMousemove"];
|
|||
|
|
var _hoisted_4 = ["href", "target"];
|
|||
|
|
var _hoisted_5 = ["id"];
|
|||
|
|
var _hoisted_6 = ["id"];
|
|||
|
|
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _component_AngleRightIcon = resolveComponent("AngleRightIcon");
|
|||
|
|
var _component_TieredMenuSub = resolveComponent("TieredMenuSub", true);
|
|||
|
|
var _directive_ripple = resolveDirective("ripple");
|
|||
|
|
return openBlock(), createBlock(Transition, mergeProps({
|
|||
|
|
name: "p-tieredmenu",
|
|||
|
|
onEnter: $options.onEnter
|
|||
|
|
}, _ctx.ptm("menu.transition")), {
|
|||
|
|
"default": withCtx(function() {
|
|||
|
|
return [($props.level === 0 ? true : $props.visible) ? (openBlock(), createElementBlock("ul", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
ref: $options.containerRef,
|
|||
|
|
"class": $props.level === 0 ? _ctx.cx("rootList") : _ctx.cx("submenu"),
|
|||
|
|
tabindex: $props.tabindex
|
|||
|
|
}, $props.level === 0 ? _ctx.ptm("rootList") : _ctx.ptm("submenu")), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.items, function(processedItem, index) {
|
|||
|
|
return openBlock(), createElementBlock(Fragment, {
|
|||
|
|
key: $options.getItemKey(processedItem)
|
|||
|
|
}, [$options.isItemVisible(processedItem) && !$options.getItemProp(processedItem, "separator") ? (openBlock(), createElementBlock("li", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
id: $options.getItemId(processedItem),
|
|||
|
|
style: $options.getItemProp(processedItem, "style"),
|
|||
|
|
"class": [_ctx.cx("item", {
|
|||
|
|
processedItem
|
|||
|
|
}), $options.getItemProp(processedItem, "class")],
|
|||
|
|
role: "menuitem",
|
|||
|
|
"aria-label": $options.getItemLabel(processedItem),
|
|||
|
|
"aria-disabled": $options.isItemDisabled(processedItem) || void 0,
|
|||
|
|
"aria-expanded": $options.isItemGroup(processedItem) ? $options.isItemActive(processedItem) : void 0,
|
|||
|
|
"aria-haspopup": $options.isItemGroup(processedItem) && !$options.getItemProp(processedItem, "to") ? "menu" : void 0,
|
|||
|
|
"aria-level": $props.level + 1,
|
|||
|
|
"aria-setsize": $options.getAriaSetSize(),
|
|||
|
|
"aria-posinset": $options.getAriaPosInset(index),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "item"), {
|
|||
|
|
"data-p-active": $options.isItemActive(processedItem),
|
|||
|
|
"data-p-focused": $options.isItemFocused(processedItem),
|
|||
|
|
"data-p-disabled": $options.isItemDisabled(processedItem)
|
|||
|
|
}), [createBaseVNode("div", mergeProps({
|
|||
|
|
"class": _ctx.cx("itemContent"),
|
|||
|
|
onClick: /* @__PURE__ */ __name(function onClick($event) {
|
|||
|
|
return $options.onItemClick($event, processedItem);
|
|||
|
|
}, "onClick"),
|
|||
|
|
onMouseenter: /* @__PURE__ */ __name(function onMouseenter($event) {
|
|||
|
|
return $options.onItemMouseEnter($event, processedItem);
|
|||
|
|
}, "onMouseenter"),
|
|||
|
|
onMousemove: /* @__PURE__ */ __name(function onMousemove($event) {
|
|||
|
|
return $options.onItemMouseMove($event, processedItem);
|
|||
|
|
}, "onMousemove"),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "itemContent")), [!$props.templates.item ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
href: $options.getItemProp(processedItem, "url"),
|
|||
|
|
"class": _ctx.cx("itemLink"),
|
|||
|
|
target: $options.getItemProp(processedItem, "target"),
|
|||
|
|
tabindex: "-1",
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "itemLink")), [$props.templates.itemicon ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.itemicon), {
|
|||
|
|
key: 0,
|
|||
|
|
item: processedItem.item,
|
|||
|
|
"class": normalizeClass(_ctx.cx("itemIcon"))
|
|||
|
|
}, null, 8, ["item", "class"])) : $options.getItemProp(processedItem, "icon") ? (openBlock(), createElementBlock("span", mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
"class": [_ctx.cx("itemIcon"), $options.getItemProp(processedItem, "icon")],
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "itemIcon")), null, 16)) : createCommentVNode("", true), createBaseVNode("span", mergeProps({
|
|||
|
|
id: $options.getItemLabelId(processedItem),
|
|||
|
|
"class": _ctx.cx("itemLabel"),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "itemLabel")), toDisplayString($options.getItemLabel(processedItem)), 17, _hoisted_5), $options.getItemProp(processedItem, "items") ? (openBlock(), createElementBlock(Fragment, {
|
|||
|
|
key: 2
|
|||
|
|
}, [$props.templates.submenuicon ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.submenuicon), mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
"class": _ctx.cx("submenuIcon"),
|
|||
|
|
active: $options.isItemActive(processedItem),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "submenuIcon")), null, 16, ["class", "active"])) : (openBlock(), createBlock(_component_AngleRightIcon, mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
"class": _ctx.cx("submenuIcon"),
|
|||
|
|
ref_for: true
|
|||
|
|
}, $options.getPTOptions(processedItem, index, "submenuIcon")), null, 16, ["class"]))], 64)) : createCommentVNode("", true)], 16, _hoisted_4)), [[_directive_ripple]]) : (openBlock(), createBlock(resolveDynamicComponent($props.templates.item), {
|
|||
|
|
key: 1,
|
|||
|
|
item: processedItem.item,
|
|||
|
|
hasSubmenu: $options.getItemProp(processedItem, "items"),
|
|||
|
|
label: $options.getItemLabel(processedItem),
|
|||
|
|
props: $options.getMenuItemProps(processedItem, index)
|
|||
|
|
}, null, 8, ["item", "hasSubmenu", "label", "props"]))], 16, _hoisted_3), $options.isItemVisible(processedItem) && $options.isItemGroup(processedItem) ? (openBlock(), createBlock(_component_TieredMenuSub, {
|
|||
|
|
key: 0,
|
|||
|
|
id: $options.getItemId(processedItem) + "_list",
|
|||
|
|
style: normalizeStyle(_ctx.sx("submenu", true, {
|
|||
|
|
processedItem
|
|||
|
|
})),
|
|||
|
|
"aria-labelledby": $options.getItemLabelId(processedItem),
|
|||
|
|
role: "menu",
|
|||
|
|
menuId: $props.menuId,
|
|||
|
|
focusedItemId: $props.focusedItemId,
|
|||
|
|
items: processedItem.items,
|
|||
|
|
templates: $props.templates,
|
|||
|
|
activeItemPath: $props.activeItemPath,
|
|||
|
|
level: $props.level + 1,
|
|||
|
|
visible: $options.isItemActive(processedItem) && $options.isItemGroup(processedItem),
|
|||
|
|
pt: _ctx.pt,
|
|||
|
|
unstyled: _ctx.unstyled,
|
|||
|
|
onItemClick: _cache[0] || (_cache[0] = function($event) {
|
|||
|
|
return _ctx.$emit("item-click", $event);
|
|||
|
|
}),
|
|||
|
|
onItemMouseenter: _cache[1] || (_cache[1] = function($event) {
|
|||
|
|
return _ctx.$emit("item-mouseenter", $event);
|
|||
|
|
}),
|
|||
|
|
onItemMousemove: _cache[2] || (_cache[2] = function($event) {
|
|||
|
|
return _ctx.$emit("item-mousemove", $event);
|
|||
|
|
})
|
|||
|
|
}, null, 8, ["id", "style", "aria-labelledby", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "level", "visible", "pt", "unstyled"])) : createCommentVNode("", true)], 16, _hoisted_2$1)) : createCommentVNode("", true), $options.isItemVisible(processedItem) && $options.getItemProp(processedItem, "separator") ? (openBlock(), createElementBlock("li", mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
id: $options.getItemId(processedItem),
|
|||
|
|
style: $options.getItemProp(processedItem, "style"),
|
|||
|
|
"class": [_ctx.cx("separator"), $options.getItemProp(processedItem, "class")],
|
|||
|
|
role: "separator",
|
|||
|
|
ref_for: true
|
|||
|
|
}, _ctx.ptm("separator")), null, 16, _hoisted_6)) : createCommentVNode("", true)], 64);
|
|||
|
|
}), 128))], 16, _hoisted_1$1$1)) : createCommentVNode("", true)];
|
|||
|
|
}),
|
|||
|
|
_: 1
|
|||
|
|
}, 16, ["onEnter"]);
|
|||
|
|
}
|
|||
|
|
__name(render$1, "render$1");
|
|||
|
|
script$1$1.render = render$1;
|
|||
|
|
var script$3 = {
|
|||
|
|
name: "TieredMenu",
|
|||
|
|
"extends": script$2,
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
emits: ["focus", "blur", "before-show", "before-hide", "hide", "show"],
|
|||
|
|
outsideClickListener: null,
|
|||
|
|
scrollHandler: null,
|
|||
|
|
resizeListener: null,
|
|||
|
|
target: null,
|
|||
|
|
container: null,
|
|||
|
|
menubar: null,
|
|||
|
|
searchTimeout: null,
|
|||
|
|
searchValue: null,
|
|||
|
|
data: /* @__PURE__ */ __name(function data7() {
|
|||
|
|
return {
|
|||
|
|
id: this.$attrs.id,
|
|||
|
|
focused: false,
|
|||
|
|
focusedItemInfo: {
|
|||
|
|
index: -1,
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
},
|
|||
|
|
activeItemPath: [],
|
|||
|
|
visible: !this.popup,
|
|||
|
|
submenuVisible: false,
|
|||
|
|
dirty: false
|
|||
|
|
};
|
|||
|
|
}, "data"),
|
|||
|
|
watch: {
|
|||
|
|
"$attrs.id": /* @__PURE__ */ __name(function $attrsId4(newValue) {
|
|||
|
|
this.id = newValue || UniqueComponentId();
|
|||
|
|
}, "$attrsId"),
|
|||
|
|
activeItemPath: /* @__PURE__ */ __name(function activeItemPath2(newPath) {
|
|||
|
|
if (!this.popup) {
|
|||
|
|
if (isNotEmpty(newPath)) {
|
|||
|
|
this.bindOutsideClickListener();
|
|||
|
|
this.bindResizeListener();
|
|||
|
|
} else {
|
|||
|
|
this.unbindOutsideClickListener();
|
|||
|
|
this.unbindResizeListener();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "activeItemPath")
|
|||
|
|
},
|
|||
|
|
mounted: /* @__PURE__ */ __name(function mounted7() {
|
|||
|
|
this.id = this.id || UniqueComponentId();
|
|||
|
|
}, "mounted"),
|
|||
|
|
beforeUnmount: /* @__PURE__ */ __name(function beforeUnmount6() {
|
|||
|
|
this.unbindOutsideClickListener();
|
|||
|
|
this.unbindResizeListener();
|
|||
|
|
if (this.scrollHandler) {
|
|||
|
|
this.scrollHandler.destroy();
|
|||
|
|
this.scrollHandler = null;
|
|||
|
|
}
|
|||
|
|
if (this.container && this.autoZIndex) {
|
|||
|
|
ZIndex.clear(this.container);
|
|||
|
|
}
|
|||
|
|
this.target = null;
|
|||
|
|
this.container = null;
|
|||
|
|
}, "beforeUnmount"),
|
|||
|
|
methods: {
|
|||
|
|
getItemProp: /* @__PURE__ */ __name(function getItemProp4(item3, name) {
|
|||
|
|
return item3 ? resolve(item3[name]) : void 0;
|
|||
|
|
}, "getItemProp"),
|
|||
|
|
getItemLabel: /* @__PURE__ */ __name(function getItemLabel4(item3) {
|
|||
|
|
return this.getItemProp(item3, "label");
|
|||
|
|
}, "getItemLabel"),
|
|||
|
|
isItemDisabled: /* @__PURE__ */ __name(function isItemDisabled4(item3) {
|
|||
|
|
return this.getItemProp(item3, "disabled");
|
|||
|
|
}, "isItemDisabled"),
|
|||
|
|
isItemVisible: /* @__PURE__ */ __name(function isItemVisible4(item3) {
|
|||
|
|
return this.getItemProp(item3, "visible") !== false;
|
|||
|
|
}, "isItemVisible"),
|
|||
|
|
isItemGroup: /* @__PURE__ */ __name(function isItemGroup4(item3) {
|
|||
|
|
return isNotEmpty(this.getItemProp(item3, "items"));
|
|||
|
|
}, "isItemGroup"),
|
|||
|
|
isItemSeparator: /* @__PURE__ */ __name(function isItemSeparator2(item3) {
|
|||
|
|
return this.getItemProp(item3, "separator");
|
|||
|
|
}, "isItemSeparator"),
|
|||
|
|
getProccessedItemLabel: /* @__PURE__ */ __name(function getProccessedItemLabel2(processedItem) {
|
|||
|
|
return processedItem ? this.getItemLabel(processedItem.item) : void 0;
|
|||
|
|
}, "getProccessedItemLabel"),
|
|||
|
|
isProccessedItemGroup: /* @__PURE__ */ __name(function isProccessedItemGroup2(processedItem) {
|
|||
|
|
return processedItem && isNotEmpty(processedItem.items);
|
|||
|
|
}, "isProccessedItemGroup"),
|
|||
|
|
toggle: /* @__PURE__ */ __name(function toggle3(event) {
|
|||
|
|
this.visible ? this.hide(event, true) : this.show(event);
|
|||
|
|
}, "toggle"),
|
|||
|
|
show: /* @__PURE__ */ __name(function show3(event, isFocus) {
|
|||
|
|
if (this.popup) {
|
|||
|
|
this.$emit("before-show");
|
|||
|
|
this.visible = true;
|
|||
|
|
this.target = this.target || event.currentTarget;
|
|||
|
|
this.relatedTarget = event.relatedTarget || null;
|
|||
|
|
}
|
|||
|
|
isFocus && focus(this.menubar);
|
|||
|
|
}, "show"),
|
|||
|
|
hide: /* @__PURE__ */ __name(function hide3(event, isFocus) {
|
|||
|
|
if (this.popup) {
|
|||
|
|
this.$emit("before-hide");
|
|||
|
|
this.visible = false;
|
|||
|
|
}
|
|||
|
|
this.activeItemPath = [];
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
};
|
|||
|
|
isFocus && focus(this.relatedTarget || this.target || this.menubar);
|
|||
|
|
this.dirty = false;
|
|||
|
|
}, "hide"),
|
|||
|
|
onFocus: /* @__PURE__ */ __name(function onFocus3(event) {
|
|||
|
|
this.focused = true;
|
|||
|
|
if (!this.popup) {
|
|||
|
|
this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : {
|
|||
|
|
index: this.findFirstFocusedItemIndex(),
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
this.$emit("focus", event);
|
|||
|
|
}, "onFocus"),
|
|||
|
|
onBlur: /* @__PURE__ */ __name(function onBlur3(event) {
|
|||
|
|
this.focused = false;
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
};
|
|||
|
|
this.searchValue = "";
|
|||
|
|
this.dirty = false;
|
|||
|
|
this.$emit("blur", event);
|
|||
|
|
}, "onBlur"),
|
|||
|
|
onKeyDown: /* @__PURE__ */ __name(function onKeyDown4(event) {
|
|||
|
|
if (this.disabled) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var metaKey = event.metaKey || event.ctrlKey;
|
|||
|
|
switch (event.code) {
|
|||
|
|
case "ArrowDown":
|
|||
|
|
this.onArrowDownKey(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowUp":
|
|||
|
|
this.onArrowUpKey(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowLeft":
|
|||
|
|
this.onArrowLeftKey(event);
|
|||
|
|
break;
|
|||
|
|
case "ArrowRight":
|
|||
|
|
this.onArrowRightKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Home":
|
|||
|
|
this.onHomeKey(event);
|
|||
|
|
break;
|
|||
|
|
case "End":
|
|||
|
|
this.onEndKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Space":
|
|||
|
|
this.onSpaceKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Enter":
|
|||
|
|
case "NumpadEnter":
|
|||
|
|
this.onEnterKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Escape":
|
|||
|
|
this.onEscapeKey(event);
|
|||
|
|
break;
|
|||
|
|
case "Tab":
|
|||
|
|
this.onTabKey(event);
|
|||
|
|
break;
|
|||
|
|
case "PageDown":
|
|||
|
|
case "PageUp":
|
|||
|
|
case "Backspace":
|
|||
|
|
case "ShiftLeft":
|
|||
|
|
case "ShiftRight":
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
if (!metaKey && isPrintableCharacter(event.key)) {
|
|||
|
|
this.searchItems(event, event.key);
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}, "onKeyDown"),
|
|||
|
|
onItemChange: /* @__PURE__ */ __name(function onItemChange2(event) {
|
|||
|
|
var processedItem = event.processedItem, isFocus = event.isFocus;
|
|||
|
|
if (isEmpty(processedItem)) return;
|
|||
|
|
var index = processedItem.index, key = processedItem.key, level = processedItem.level, parentKey = processedItem.parentKey, items = processedItem.items;
|
|||
|
|
var grouped = isNotEmpty(items);
|
|||
|
|
var activeItemPath3 = this.activeItemPath.filter(function(p) {
|
|||
|
|
return p.parentKey !== parentKey && p.parentKey !== key;
|
|||
|
|
});
|
|||
|
|
if (grouped) {
|
|||
|
|
activeItemPath3.push(processedItem);
|
|||
|
|
this.submenuVisible = true;
|
|||
|
|
}
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index,
|
|||
|
|
level,
|
|||
|
|
parentKey
|
|||
|
|
};
|
|||
|
|
this.activeItemPath = activeItemPath3;
|
|||
|
|
grouped && (this.dirty = true);
|
|||
|
|
isFocus && focus(this.menubar);
|
|||
|
|
}, "onItemChange"),
|
|||
|
|
onOverlayClick: /* @__PURE__ */ __name(function onOverlayClick2(event) {
|
|||
|
|
OverlayEventBus.emit("overlay-click", {
|
|||
|
|
originalEvent: event,
|
|||
|
|
target: this.target
|
|||
|
|
});
|
|||
|
|
}, "onOverlayClick"),
|
|||
|
|
onItemClick: /* @__PURE__ */ __name(function onItemClick4(event) {
|
|||
|
|
var originalEvent = event.originalEvent, processedItem = event.processedItem;
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
var root11 = isEmpty(processedItem.parent);
|
|||
|
|
var selected = this.isSelected(processedItem);
|
|||
|
|
if (selected) {
|
|||
|
|
var index = processedItem.index, key = processedItem.key, level = processedItem.level, parentKey = processedItem.parentKey;
|
|||
|
|
this.activeItemPath = this.activeItemPath.filter(function(p) {
|
|||
|
|
return key !== p.key && key.startsWith(p.key);
|
|||
|
|
});
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index,
|
|||
|
|
level,
|
|||
|
|
parentKey
|
|||
|
|
};
|
|||
|
|
this.dirty = !root11;
|
|||
|
|
focus(this.menubar);
|
|||
|
|
} else {
|
|||
|
|
if (grouped) {
|
|||
|
|
this.onItemChange(event);
|
|||
|
|
} else {
|
|||
|
|
var rootProcessedItem = root11 ? processedItem : this.activeItemPath.find(function(p) {
|
|||
|
|
return p.parentKey === "";
|
|||
|
|
});
|
|||
|
|
this.hide(originalEvent);
|
|||
|
|
this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
|
|||
|
|
focus(this.menubar);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, "onItemClick"),
|
|||
|
|
onItemMouseEnter: /* @__PURE__ */ __name(function onItemMouseEnter4(event) {
|
|||
|
|
if (this.dirty) {
|
|||
|
|
this.onItemChange(event);
|
|||
|
|
}
|
|||
|
|
}, "onItemMouseEnter"),
|
|||
|
|
onItemMouseMove: /* @__PURE__ */ __name(function onItemMouseMove4(event) {
|
|||
|
|
if (this.focused) {
|
|||
|
|
this.changeFocusedItemIndex(event, event.processedItem.index);
|
|||
|
|
}
|
|||
|
|
}, "onItemMouseMove"),
|
|||
|
|
onArrowDownKey: /* @__PURE__ */ __name(function onArrowDownKey3(event) {
|
|||
|
|
var itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();
|
|||
|
|
this.changeFocusedItemIndex(event, itemIndex);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onArrowDownKey"),
|
|||
|
|
onArrowUpKey: /* @__PURE__ */ __name(function onArrowUpKey3(event) {
|
|||
|
|
if (event.altKey) {
|
|||
|
|
if (this.focusedItemInfo.index !== -1) {
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
!grouped && this.onItemChange({
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.popup && this.hide(event, true);
|
|||
|
|
event.preventDefault();
|
|||
|
|
} else {
|
|||
|
|
var itemIndex = this.focusedItemInfo.index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo.index) : this.findLastFocusedItemIndex();
|
|||
|
|
this.changeFocusedItemIndex(event, itemIndex);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
}, "onArrowUpKey"),
|
|||
|
|
onArrowLeftKey: /* @__PURE__ */ __name(function onArrowLeftKey3(event) {
|
|||
|
|
var _this = this;
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var parentItem = this.activeItemPath.find(function(p) {
|
|||
|
|
return p.key === processedItem.parentKey;
|
|||
|
|
});
|
|||
|
|
var root11 = isEmpty(processedItem.parent);
|
|||
|
|
if (!root11) {
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
parentKey: parentItem ? parentItem.parentKey : ""
|
|||
|
|
};
|
|||
|
|
this.searchValue = "";
|
|||
|
|
this.onArrowDownKey(event);
|
|||
|
|
}
|
|||
|
|
this.activeItemPath = this.activeItemPath.filter(function(p) {
|
|||
|
|
return p.parentKey !== _this.focusedItemInfo.parentKey;
|
|||
|
|
});
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onArrowLeftKey"),
|
|||
|
|
onArrowRightKey: /* @__PURE__ */ __name(function onArrowRightKey3(event) {
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
if (grouped) {
|
|||
|
|
this.onItemChange({
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: -1,
|
|||
|
|
parentKey: processedItem.key
|
|||
|
|
};
|
|||
|
|
this.searchValue = "";
|
|||
|
|
this.onArrowDownKey(event);
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onArrowRightKey"),
|
|||
|
|
onHomeKey: /* @__PURE__ */ __name(function onHomeKey3(event) {
|
|||
|
|
this.changeFocusedItemIndex(event, this.findFirstItemIndex());
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onHomeKey"),
|
|||
|
|
onEndKey: /* @__PURE__ */ __name(function onEndKey3(event) {
|
|||
|
|
this.changeFocusedItemIndex(event, this.findLastItemIndex());
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onEndKey"),
|
|||
|
|
onEnterKey: /* @__PURE__ */ __name(function onEnterKey3(event) {
|
|||
|
|
if (this.focusedItemInfo.index !== -1) {
|
|||
|
|
var element = findSingle(this.menubar, 'li[id="'.concat("".concat(this.focusedItemId), '"]'));
|
|||
|
|
var anchorElement = element && findSingle(element, '[data-pc-section="itemlink"]');
|
|||
|
|
anchorElement ? anchorElement.click() : element && element.click();
|
|||
|
|
if (!this.popup) {
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
!grouped && (this.focusedItemInfo.index = this.findFirstFocusedItemIndex());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onEnterKey"),
|
|||
|
|
onSpaceKey: /* @__PURE__ */ __name(function onSpaceKey2(event) {
|
|||
|
|
this.onEnterKey(event);
|
|||
|
|
}, "onSpaceKey"),
|
|||
|
|
onEscapeKey: /* @__PURE__ */ __name(function onEscapeKey3(event) {
|
|||
|
|
if (this.popup || this.focusedItemInfo.level !== 0) {
|
|||
|
|
var _focusedItemInfo = this.focusedItemInfo;
|
|||
|
|
this.hide(event, false);
|
|||
|
|
this.focusedItemInfo = {
|
|||
|
|
index: Number(_focusedItemInfo.parentKey.split("_")[0]),
|
|||
|
|
level: 0,
|
|||
|
|
parentKey: ""
|
|||
|
|
};
|
|||
|
|
this.popup && focus(this.target);
|
|||
|
|
}
|
|||
|
|
event.preventDefault();
|
|||
|
|
}, "onEscapeKey"),
|
|||
|
|
onTabKey: /* @__PURE__ */ __name(function onTabKey3(event) {
|
|||
|
|
if (this.focusedItemInfo.index !== -1) {
|
|||
|
|
var processedItem = this.visibleItems[this.focusedItemInfo.index];
|
|||
|
|
var grouped = this.isProccessedItemGroup(processedItem);
|
|||
|
|
!grouped && this.onItemChange({
|
|||
|
|
originalEvent: event,
|
|||
|
|
processedItem
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.hide();
|
|||
|
|
}, "onTabKey"),
|
|||
|
|
onEnter: /* @__PURE__ */ __name(function onEnter3(el) {
|
|||
|
|
if (this.autoZIndex) {
|
|||
|
|
ZIndex.set("menu", el, this.baseZIndex + this.$primevue.config.zIndex.menu);
|
|||
|
|
}
|
|||
|
|
addStyle(el, {
|
|||
|
|
position: "absolute",
|
|||
|
|
top: "0",
|
|||
|
|
left: "0"
|
|||
|
|
});
|
|||
|
|
this.alignOverlay();
|
|||
|
|
focus(this.menubar);
|
|||
|
|
this.scrollInView();
|
|||
|
|
}, "onEnter"),
|
|||
|
|
onAfterEnter: /* @__PURE__ */ __name(function onAfterEnter() {
|
|||
|
|
this.bindOutsideClickListener();
|
|||
|
|
this.bindScrollListener();
|
|||
|
|
this.bindResizeListener();
|
|||
|
|
this.$emit("show");
|
|||
|
|
}, "onAfterEnter"),
|
|||
|
|
onLeave: /* @__PURE__ */ __name(function onLeave2() {
|
|||
|
|
this.unbindOutsideClickListener();
|
|||
|
|
this.unbindScrollListener();
|
|||
|
|
this.unbindResizeListener();
|
|||
|
|
this.$emit("hide");
|
|||
|
|
this.container = null;
|
|||
|
|
this.dirty = false;
|
|||
|
|
}, "onLeave"),
|
|||
|
|
onAfterLeave: /* @__PURE__ */ __name(function onAfterLeave(el) {
|
|||
|
|
if (this.autoZIndex) {
|
|||
|
|
ZIndex.clear(el);
|
|||
|
|
}
|
|||
|
|
}, "onAfterLeave"),
|
|||
|
|
alignOverlay: /* @__PURE__ */ __name(function alignOverlay2() {
|
|||
|
|
absolutePosition(this.container, this.target);
|
|||
|
|
var targetWidth = getOuterWidth(this.target);
|
|||
|
|
if (targetWidth > getOuterWidth(this.container)) {
|
|||
|
|
this.container.style.minWidth = getOuterWidth(this.target) + "px";
|
|||
|
|
}
|
|||
|
|
}, "alignOverlay"),
|
|||
|
|
bindOutsideClickListener: /* @__PURE__ */ __name(function bindOutsideClickListener3() {
|
|||
|
|
var _this2 = this;
|
|||
|
|
if (!this.outsideClickListener) {
|
|||
|
|
this.outsideClickListener = function(event) {
|
|||
|
|
var isOutsideContainer = _this2.container && !_this2.container.contains(event.target);
|
|||
|
|
var isOutsideTarget = _this2.popup ? !(_this2.target && (_this2.target === event.target || _this2.target.contains(event.target))) : true;
|
|||
|
|
if (isOutsideContainer && isOutsideTarget) {
|
|||
|
|
_this2.hide();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
document.addEventListener("click", this.outsideClickListener);
|
|||
|
|
}
|
|||
|
|
}, "bindOutsideClickListener"),
|
|||
|
|
unbindOutsideClickListener: /* @__PURE__ */ __name(function unbindOutsideClickListener3() {
|
|||
|
|
if (this.outsideClickListener) {
|
|||
|
|
document.removeEventListener("click", this.outsideClickListener);
|
|||
|
|
this.outsideClickListener = null;
|
|||
|
|
}
|
|||
|
|
}, "unbindOutsideClickListener"),
|
|||
|
|
bindScrollListener: /* @__PURE__ */ __name(function bindScrollListener2() {
|
|||
|
|
var _this3 = this;
|
|||
|
|
if (!this.scrollHandler) {
|
|||
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, function(event) {
|
|||
|
|
_this3.hide(event, true);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.scrollHandler.bindScrollListener();
|
|||
|
|
}, "bindScrollListener"),
|
|||
|
|
unbindScrollListener: /* @__PURE__ */ __name(function unbindScrollListener2() {
|
|||
|
|
if (this.scrollHandler) {
|
|||
|
|
this.scrollHandler.unbindScrollListener();
|
|||
|
|
}
|
|||
|
|
}, "unbindScrollListener"),
|
|||
|
|
bindResizeListener: /* @__PURE__ */ __name(function bindResizeListener3() {
|
|||
|
|
var _this4 = this;
|
|||
|
|
if (!this.resizeListener) {
|
|||
|
|
this.resizeListener = function(event) {
|
|||
|
|
if (!isTouchDevice()) {
|
|||
|
|
_this4.hide(event, true);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
window.addEventListener("resize", this.resizeListener);
|
|||
|
|
}
|
|||
|
|
}, "bindResizeListener"),
|
|||
|
|
unbindResizeListener: /* @__PURE__ */ __name(function unbindResizeListener3() {
|
|||
|
|
if (this.resizeListener) {
|
|||
|
|
window.removeEventListener("resize", this.resizeListener);
|
|||
|
|
this.resizeListener = null;
|
|||
|
|
}
|
|||
|
|
}, "unbindResizeListener"),
|
|||
|
|
isItemMatched: /* @__PURE__ */ __name(function isItemMatched2(processedItem) {
|
|||
|
|
var _this$getProccessedIt;
|
|||
|
|
return this.isValidItem(processedItem) && ((_this$getProccessedIt = this.getProccessedItemLabel(processedItem)) === null || _this$getProccessedIt === void 0 ? void 0 : _this$getProccessedIt.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase()));
|
|||
|
|
}, "isItemMatched"),
|
|||
|
|
isValidItem: /* @__PURE__ */ __name(function isValidItem2(processedItem) {
|
|||
|
|
return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
|
|||
|
|
}, "isValidItem"),
|
|||
|
|
isValidSelectedItem: /* @__PURE__ */ __name(function isValidSelectedItem2(processedItem) {
|
|||
|
|
return this.isValidItem(processedItem) && this.isSelected(processedItem);
|
|||
|
|
}, "isValidSelectedItem"),
|
|||
|
|
isSelected: /* @__PURE__ */ __name(function isSelected3(processedItem) {
|
|||
|
|
return this.activeItemPath.some(function(p) {
|
|||
|
|
return p.key === processedItem.key;
|
|||
|
|
});
|
|||
|
|
}, "isSelected"),
|
|||
|
|
findFirstItemIndex: /* @__PURE__ */ __name(function findFirstItemIndex2() {
|
|||
|
|
var _this5 = this;
|
|||
|
|
return this.visibleItems.findIndex(function(processedItem) {
|
|||
|
|
return _this5.isValidItem(processedItem);
|
|||
|
|
});
|
|||
|
|
}, "findFirstItemIndex"),
|
|||
|
|
findLastItemIndex: /* @__PURE__ */ __name(function findLastItemIndex2() {
|
|||
|
|
var _this6 = this;
|
|||
|
|
return findLastIndex(this.visibleItems, function(processedItem) {
|
|||
|
|
return _this6.isValidItem(processedItem);
|
|||
|
|
});
|
|||
|
|
}, "findLastItemIndex"),
|
|||
|
|
findNextItemIndex: /* @__PURE__ */ __name(function findNextItemIndex2(index) {
|
|||
|
|
var _this7 = this;
|
|||
|
|
var matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex(function(processedItem) {
|
|||
|
|
return _this7.isValidItem(processedItem);
|
|||
|
|
}) : -1;
|
|||
|
|
return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
|
|||
|
|
}, "findNextItemIndex"),
|
|||
|
|
findPrevItemIndex: /* @__PURE__ */ __name(function findPrevItemIndex2(index) {
|
|||
|
|
var _this8 = this;
|
|||
|
|
var matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), function(processedItem) {
|
|||
|
|
return _this8.isValidItem(processedItem);
|
|||
|
|
}) : -1;
|
|||
|
|
return matchedItemIndex > -1 ? matchedItemIndex : index;
|
|||
|
|
}, "findPrevItemIndex"),
|
|||
|
|
findSelectedItemIndex: /* @__PURE__ */ __name(function findSelectedItemIndex2() {
|
|||
|
|
var _this9 = this;
|
|||
|
|
return this.visibleItems.findIndex(function(processedItem) {
|
|||
|
|
return _this9.isValidSelectedItem(processedItem);
|
|||
|
|
});
|
|||
|
|
}, "findSelectedItemIndex"),
|
|||
|
|
findFirstFocusedItemIndex: /* @__PURE__ */ __name(function findFirstFocusedItemIndex2() {
|
|||
|
|
var selectedIndex = this.findSelectedItemIndex();
|
|||
|
|
return selectedIndex < 0 ? this.findFirstItemIndex() : selectedIndex;
|
|||
|
|
}, "findFirstFocusedItemIndex"),
|
|||
|
|
findLastFocusedItemIndex: /* @__PURE__ */ __name(function findLastFocusedItemIndex2() {
|
|||
|
|
var selectedIndex = this.findSelectedItemIndex();
|
|||
|
|
return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;
|
|||
|
|
}, "findLastFocusedItemIndex"),
|
|||
|
|
searchItems: /* @__PURE__ */ __name(function searchItems2(event, _char) {
|
|||
|
|
var _this10 = this;
|
|||
|
|
this.searchValue = (this.searchValue || "") + _char;
|
|||
|
|
var itemIndex = -1;
|
|||
|
|
var matched = false;
|
|||
|
|
if (this.focusedItemInfo.index !== -1) {
|
|||
|
|
itemIndex = this.visibleItems.slice(this.focusedItemInfo.index).findIndex(function(processedItem) {
|
|||
|
|
return _this10.isItemMatched(processedItem);
|
|||
|
|
});
|
|||
|
|
itemIndex = itemIndex === -1 ? this.visibleItems.slice(0, this.focusedItemInfo.index).findIndex(function(processedItem) {
|
|||
|
|
return _this10.isItemMatched(processedItem);
|
|||
|
|
}) : itemIndex + this.focusedItemInfo.index;
|
|||
|
|
} else {
|
|||
|
|
itemIndex = this.visibleItems.findIndex(function(processedItem) {
|
|||
|
|
return _this10.isItemMatched(processedItem);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (itemIndex !== -1) {
|
|||
|
|
matched = true;
|
|||
|
|
}
|
|||
|
|
if (itemIndex === -1 && this.focusedItemInfo.index === -1) {
|
|||
|
|
itemIndex = this.findFirstFocusedItemIndex();
|
|||
|
|
}
|
|||
|
|
if (itemIndex !== -1) {
|
|||
|
|
this.changeFocusedItemIndex(event, itemIndex);
|
|||
|
|
}
|
|||
|
|
if (this.searchTimeout) {
|
|||
|
|
clearTimeout(this.searchTimeout);
|
|||
|
|
}
|
|||
|
|
this.searchTimeout = setTimeout(function() {
|
|||
|
|
_this10.searchValue = "";
|
|||
|
|
_this10.searchTimeout = null;
|
|||
|
|
}, 500);
|
|||
|
|
return matched;
|
|||
|
|
}, "searchItems"),
|
|||
|
|
changeFocusedItemIndex: /* @__PURE__ */ __name(function changeFocusedItemIndex2(event, index) {
|
|||
|
|
if (this.focusedItemInfo.index !== index) {
|
|||
|
|
this.focusedItemInfo.index = index;
|
|||
|
|
this.scrollInView();
|
|||
|
|
}
|
|||
|
|
}, "changeFocusedItemIndex"),
|
|||
|
|
scrollInView: /* @__PURE__ */ __name(function scrollInView3() {
|
|||
|
|
var index = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : -1;
|
|||
|
|
var id = index !== -1 ? "".concat(this.id, "_").concat(index) : this.focusedItemId;
|
|||
|
|
var element = findSingle(this.menubar, 'li[id="'.concat(id, '"]'));
|
|||
|
|
if (element) {
|
|||
|
|
element.scrollIntoView && element.scrollIntoView({
|
|||
|
|
block: "nearest",
|
|||
|
|
inline: "start"
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, "scrollInView"),
|
|||
|
|
createProcessedItems: /* @__PURE__ */ __name(function createProcessedItems2(items) {
|
|||
|
|
var _this11 = this;
|
|||
|
|
var level = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
|
|||
|
|
var parent = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
|
|||
|
|
var parentKey = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "";
|
|||
|
|
var processedItems3 = [];
|
|||
|
|
items && items.forEach(function(item3, index) {
|
|||
|
|
var key = (parentKey !== "" ? parentKey + "_" : "") + index;
|
|||
|
|
var newItem = {
|
|||
|
|
item: item3,
|
|||
|
|
index,
|
|||
|
|
level,
|
|||
|
|
key,
|
|||
|
|
parent,
|
|||
|
|
parentKey
|
|||
|
|
};
|
|||
|
|
newItem["items"] = _this11.createProcessedItems(item3.items, level + 1, newItem, key);
|
|||
|
|
processedItems3.push(newItem);
|
|||
|
|
});
|
|||
|
|
return processedItems3;
|
|||
|
|
}, "createProcessedItems"),
|
|||
|
|
containerRef: /* @__PURE__ */ __name(function containerRef3(el) {
|
|||
|
|
this.container = el;
|
|||
|
|
}, "containerRef"),
|
|||
|
|
menubarRef: /* @__PURE__ */ __name(function menubarRef2(el) {
|
|||
|
|
this.menubar = el ? el.$el : void 0;
|
|||
|
|
}, "menubarRef")
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
processedItems: /* @__PURE__ */ __name(function processedItems2() {
|
|||
|
|
return this.createProcessedItems(this.model || []);
|
|||
|
|
}, "processedItems"),
|
|||
|
|
visibleItems: /* @__PURE__ */ __name(function visibleItems2() {
|
|||
|
|
var _this12 = this;
|
|||
|
|
var processedItem = this.activeItemPath.find(function(p) {
|
|||
|
|
return p.key === _this12.focusedItemInfo.parentKey;
|
|||
|
|
});
|
|||
|
|
return processedItem ? processedItem.items : this.processedItems;
|
|||
|
|
}, "visibleItems"),
|
|||
|
|
focusedItemId: /* @__PURE__ */ __name(function focusedItemId2() {
|
|||
|
|
return this.focusedItemInfo.index !== -1 ? "".concat(this.id).concat(isNotEmpty(this.focusedItemInfo.parentKey) ? "_" + this.focusedItemInfo.parentKey : "", "_").concat(this.focusedItemInfo.index) : null;
|
|||
|
|
}, "focusedItemId")
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
TieredMenuSub: script$1$1,
|
|||
|
|
Portal: script$h
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var _hoisted_1$3 = ["id"];
|
|||
|
|
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _component_TieredMenuSub = resolveComponent("TieredMenuSub");
|
|||
|
|
var _component_Portal = resolveComponent("Portal");
|
|||
|
|
return openBlock(), createBlock(_component_Portal, {
|
|||
|
|
appendTo: _ctx.appendTo,
|
|||
|
|
disabled: !_ctx.popup
|
|||
|
|
}, {
|
|||
|
|
"default": withCtx(function() {
|
|||
|
|
return [createVNode(Transition, mergeProps({
|
|||
|
|
name: "p-connected-overlay",
|
|||
|
|
onEnter: $options.onEnter,
|
|||
|
|
onAfterEnter: $options.onAfterEnter,
|
|||
|
|
onLeave: $options.onLeave,
|
|||
|
|
onAfterLeave: $options.onAfterLeave
|
|||
|
|
}, _ctx.ptm("transition")), {
|
|||
|
|
"default": withCtx(function() {
|
|||
|
|
return [$data.visible ? (openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
ref: $options.containerRef,
|
|||
|
|
id: $data.id,
|
|||
|
|
"class": _ctx.cx("root"),
|
|||
|
|
onClick: _cache[0] || (_cache[0] = function() {
|
|||
|
|
return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
|
|||
|
|
})
|
|||
|
|
}, _ctx.ptmi("root")), [_ctx.$slots.start ? (openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
key: 0,
|
|||
|
|
"class": _ctx.cx("start")
|
|||
|
|
}, _ctx.ptm("start")), [renderSlot(_ctx.$slots, "start")], 16)) : createCommentVNode("", true), createVNode(_component_TieredMenuSub, {
|
|||
|
|
ref: $options.menubarRef,
|
|||
|
|
id: $data.id + "_list",
|
|||
|
|
tabindex: !_ctx.disabled ? _ctx.tabindex : -1,
|
|||
|
|
role: "menubar",
|
|||
|
|
"aria-label": _ctx.ariaLabel,
|
|||
|
|
"aria-labelledby": _ctx.ariaLabelledby,
|
|||
|
|
"aria-disabled": _ctx.disabled || void 0,
|
|||
|
|
"aria-orientation": "vertical",
|
|||
|
|
"aria-activedescendant": $data.focused ? $options.focusedItemId : void 0,
|
|||
|
|
menuId: $data.id,
|
|||
|
|
focusedItemId: $data.focused ? $options.focusedItemId : void 0,
|
|||
|
|
items: $options.processedItems,
|
|||
|
|
templates: _ctx.$slots,
|
|||
|
|
activeItemPath: $data.activeItemPath,
|
|||
|
|
level: 0,
|
|||
|
|
visible: $data.submenuVisible,
|
|||
|
|
pt: _ctx.pt,
|
|||
|
|
unstyled: _ctx.unstyled,
|
|||
|
|
onFocus: $options.onFocus,
|
|||
|
|
onBlur: $options.onBlur,
|
|||
|
|
onKeydown: $options.onKeyDown,
|
|||
|
|
onItemClick: $options.onItemClick,
|
|||
|
|
onItemMouseenter: $options.onItemMouseEnter,
|
|||
|
|
onItemMousemove: $options.onItemMouseMove
|
|||
|
|
}, null, 8, ["id", "tabindex", "aria-label", "aria-labelledby", "aria-disabled", "aria-activedescendant", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "visible", "pt", "unstyled", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter", "onItemMousemove"]), _ctx.$slots.end ? (openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
key: 1,
|
|||
|
|
"class": _ctx.cx("end")
|
|||
|
|
}, _ctx.ptm("end")), [renderSlot(_ctx.$slots, "end")], 16)) : createCommentVNode("", true)], 16, _hoisted_1$3)) : createCommentVNode("", true)];
|
|||
|
|
}),
|
|||
|
|
_: 3
|
|||
|
|
}, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];
|
|||
|
|
}),
|
|||
|
|
_: 3
|
|||
|
|
}, 8, ["appendTo", "disabled"]);
|
|||
|
|
}
|
|||
|
|
__name(render$2, "render$2");
|
|||
|
|
script$3.render = render$2;
|
|||
|
|
var theme9 = /* @__PURE__ */ __name(function theme10(_ref) {
|
|||
|
|
var dt = _ref.dt;
|
|||
|
|
return "\n.p-splitbutton {\n display: inline-flex;\n position: relative;\n border-radius: ".concat(dt("splitbutton.border.radius"), ";\n}\n\n.p-splitbutton-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: 0 none;\n}\n\n.p-splitbutton-button:focus-visible,\n.p-splitbutton-dropdown:focus-visible {\n z-index: 1;\n}\n\n.p-splitbutton-button:not(:disabled):hover,\n.p-splitbutton-button:not(:disabled):active {\n border-right: 0 none;\n}\n\n.p-splitbutton-dropdown {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.p-splitbutton .p-menu {\n min-width: 100%;\n}\n\n.p-splitbutton-fluid {\n display: flex;\n}\n\n.p-splitbutton-rounded .p-splitbutton-dropdown {\n border-top-right-radius: ").concat(dt("splitbutton.rounded.border.radius"), ";\n border-bottom-right-radius: ").concat(dt("splitbutton.rounded.border.radius"), ";\n}\n\n.p-splitbutton-rounded .p-splitbutton-button {\n border-top-left-radius: ").concat(dt("splitbutton.rounded.border.radius"), ";\n border-bottom-left-radius: ").concat(dt("splitbutton.rounded.border.radius"), ";\n}\n\n.p-splitbutton-raised {\n box-shadow: ").concat(dt("splitbutton.raised.shadow"), ";\n}\n");
|
|||
|
|
}, "theme");
|
|||
|
|
var classes = {
|
|||
|
|
root: /* @__PURE__ */ __name(function root10(_ref2) {
|
|||
|
|
var instance = _ref2.instance, props = _ref2.props;
|
|||
|
|
return ["p-splitbutton p-component", {
|
|||
|
|
"p-splitbutton-raised": props.raised,
|
|||
|
|
"p-splitbutton-rounded": props.rounded,
|
|||
|
|
"p-splitbutton-fluid": instance.hasFluid
|
|||
|
|
}];
|
|||
|
|
}, "root"),
|
|||
|
|
pcButton: "p-splitbutton-button",
|
|||
|
|
pcDropdown: "p-splitbutton-dropdown"
|
|||
|
|
};
|
|||
|
|
var SplitButtonStyle = BaseStyle.extend({
|
|||
|
|
name: "splitbutton",
|
|||
|
|
theme: theme9,
|
|||
|
|
classes
|
|||
|
|
});
|
|||
|
|
var script$1 = {
|
|||
|
|
name: "BaseSplitButton",
|
|||
|
|
"extends": script$e,
|
|||
|
|
props: {
|
|||
|
|
label: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
icon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
model: {
|
|||
|
|
type: Array,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
autoZIndex: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": true
|
|||
|
|
},
|
|||
|
|
baseZIndex: {
|
|||
|
|
type: Number,
|
|||
|
|
"default": 0
|
|||
|
|
},
|
|||
|
|
appendTo: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
"default": "body"
|
|||
|
|
},
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
fluid: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
"class": {
|
|||
|
|
type: null,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
type: null,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
buttonProps: {
|
|||
|
|
type: null,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
menuButtonProps: {
|
|||
|
|
type: null,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
menuButtonIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": void 0
|
|||
|
|
},
|
|||
|
|
dropdownIcon: {
|
|||
|
|
type: String,
|
|||
|
|
"default": void 0
|
|||
|
|
},
|
|||
|
|
severity: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
raised: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
rounded: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
text: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
outlined: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
},
|
|||
|
|
size: {
|
|||
|
|
type: String,
|
|||
|
|
"default": null
|
|||
|
|
},
|
|||
|
|
plain: {
|
|||
|
|
type: Boolean,
|
|||
|
|
"default": false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
style: SplitButtonStyle,
|
|||
|
|
provide: /* @__PURE__ */ __name(function provide11() {
|
|||
|
|
return {
|
|||
|
|
$pcSplitButton: this,
|
|||
|
|
$parentInstance: this
|
|||
|
|
};
|
|||
|
|
}, "provide")
|
|||
|
|
};
|
|||
|
|
var script = {
|
|||
|
|
name: "SplitButton",
|
|||
|
|
"extends": script$1,
|
|||
|
|
inheritAttrs: false,
|
|||
|
|
emits: ["click"],
|
|||
|
|
inject: {
|
|||
|
|
$pcFluid: {
|
|||
|
|
"default": null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: /* @__PURE__ */ __name(function data8() {
|
|||
|
|
return {
|
|||
|
|
id: this.$attrs.id,
|
|||
|
|
isExpanded: false
|
|||
|
|
};
|
|||
|
|
}, "data"),
|
|||
|
|
watch: {
|
|||
|
|
"$attrs.id": /* @__PURE__ */ __name(function $attrsId5(newValue) {
|
|||
|
|
this.id = newValue || UniqueComponentId();
|
|||
|
|
}, "$attrsId")
|
|||
|
|
},
|
|||
|
|
mounted: /* @__PURE__ */ __name(function mounted8() {
|
|||
|
|
var _this = this;
|
|||
|
|
this.id = this.id || UniqueComponentId();
|
|||
|
|
this.$watch("$refs.menu.visible", function(newValue) {
|
|||
|
|
_this.isExpanded = newValue;
|
|||
|
|
});
|
|||
|
|
}, "mounted"),
|
|||
|
|
methods: {
|
|||
|
|
onDropdownButtonClick: /* @__PURE__ */ __name(function onDropdownButtonClick(event) {
|
|||
|
|
if (event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
this.$refs.menu.toggle({
|
|||
|
|
currentTarget: this.$el,
|
|||
|
|
relatedTarget: this.$refs.button.$el
|
|||
|
|
});
|
|||
|
|
this.isExpanded = this.$refs.menu.visible;
|
|||
|
|
}, "onDropdownButtonClick"),
|
|||
|
|
onDropdownKeydown: /* @__PURE__ */ __name(function onDropdownKeydown(event) {
|
|||
|
|
if (event.code === "ArrowDown" || event.code === "ArrowUp") {
|
|||
|
|
this.onDropdownButtonClick();
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
}, "onDropdownKeydown"),
|
|||
|
|
onDefaultButtonClick: /* @__PURE__ */ __name(function onDefaultButtonClick(event) {
|
|||
|
|
if (this.isExpanded) {
|
|||
|
|
this.$refs.menu.hide(event);
|
|||
|
|
}
|
|||
|
|
this.$emit("click", event);
|
|||
|
|
}, "onDefaultButtonClick")
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
containerClass: /* @__PURE__ */ __name(function containerClass() {
|
|||
|
|
return [this.cx("root"), this["class"]];
|
|||
|
|
}, "containerClass"),
|
|||
|
|
hasFluid: /* @__PURE__ */ __name(function hasFluid2() {
|
|||
|
|
return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
|
|||
|
|
}, "hasFluid")
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
PVSButton: script$d,
|
|||
|
|
PVSMenu: script$3,
|
|||
|
|
ChevronDownIcon: script$i
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var _hoisted_1$2 = ["data-p-severity"];
|
|||
|
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
var _component_PVSButton = resolveComponent("PVSButton");
|
|||
|
|
var _component_PVSMenu = resolveComponent("PVSMenu");
|
|||
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|||
|
|
"class": $options.containerClass,
|
|||
|
|
style: _ctx.style
|
|||
|
|
}, _ctx.ptmi("root"), {
|
|||
|
|
"data-p-severity": _ctx.severity
|
|||
|
|
}), [createVNode(_component_PVSButton, mergeProps({
|
|||
|
|
type: "button",
|
|||
|
|
"class": _ctx.cx("pcButton"),
|
|||
|
|
label: _ctx.label,
|
|||
|
|
disabled: _ctx.disabled,
|
|||
|
|
severity: _ctx.severity,
|
|||
|
|
text: _ctx.text,
|
|||
|
|
icon: _ctx.icon,
|
|||
|
|
outlined: _ctx.outlined,
|
|||
|
|
size: _ctx.size,
|
|||
|
|
fluid: _ctx.fluid,
|
|||
|
|
"aria-label": _ctx.label,
|
|||
|
|
onClick: $options.onDefaultButtonClick
|
|||
|
|
}, _ctx.buttonProps, {
|
|||
|
|
pt: _ctx.ptm("pcButton"),
|
|||
|
|
unstyled: _ctx.unstyled
|
|||
|
|
}), createSlots({
|
|||
|
|
"default": withCtx(function() {
|
|||
|
|
return [renderSlot(_ctx.$slots, "default")];
|
|||
|
|
}),
|
|||
|
|
_: 2
|
|||
|
|
}, [_ctx.$slots.icon ? {
|
|||
|
|
name: "icon",
|
|||
|
|
fn: withCtx(function(slotProps) {
|
|||
|
|
return [renderSlot(_ctx.$slots, "icon", {
|
|||
|
|
"class": normalizeClass(slotProps["class"])
|
|||
|
|
}, function() {
|
|||
|
|
return [createBaseVNode("span", mergeProps({
|
|||
|
|
"class": [_ctx.icon, slotProps["class"]]
|
|||
|
|
}, _ctx.ptm("pcButton")["icon"], {
|
|||
|
|
"data-pc-section": "buttonicon"
|
|||
|
|
}), null, 16)];
|
|||
|
|
})];
|
|||
|
|
}),
|
|||
|
|
key: "0"
|
|||
|
|
} : void 0]), 1040, ["class", "label", "disabled", "severity", "text", "icon", "outlined", "size", "fluid", "aria-label", "onClick", "pt", "unstyled"]), createVNode(_component_PVSButton, mergeProps({
|
|||
|
|
ref: "button",
|
|||
|
|
type: "button",
|
|||
|
|
"class": _ctx.cx("pcDropdown"),
|
|||
|
|
disabled: _ctx.disabled,
|
|||
|
|
"aria-haspopup": "true",
|
|||
|
|
"aria-expanded": $data.isExpanded,
|
|||
|
|
"aria-controls": $data.id + "_overlay",
|
|||
|
|
onClick: $options.onDropdownButtonClick,
|
|||
|
|
onKeydown: $options.onDropdownKeydown,
|
|||
|
|
severity: _ctx.severity,
|
|||
|
|
text: _ctx.text,
|
|||
|
|
outlined: _ctx.outlined,
|
|||
|
|
size: _ctx.size,
|
|||
|
|
unstyled: _ctx.unstyled
|
|||
|
|
}, _ctx.menuButtonProps, {
|
|||
|
|
pt: _ctx.ptm("pcDropdown")
|
|||
|
|
}), {
|
|||
|
|
icon: withCtx(function(slotProps) {
|
|||
|
|
return [renderSlot(_ctx.$slots, _ctx.$slots.dropdownicon ? "dropdownicon" : "menubuttonicon", {
|
|||
|
|
"class": normalizeClass(slotProps["class"])
|
|||
|
|
}, function() {
|
|||
|
|
return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.menuButtonIcon || _ctx.dropdownIcon ? "span" : "ChevronDownIcon"), mergeProps({
|
|||
|
|
"class": [_ctx.dropdownIcon || _ctx.menuButtonIcon, slotProps["class"]]
|
|||
|
|
}, _ctx.ptm("pcDropdown")["icon"], {
|
|||
|
|
"data-pc-section": "menubuttonicon"
|
|||
|
|
}), null, 16, ["class"]))];
|
|||
|
|
})];
|
|||
|
|
}),
|
|||
|
|
_: 3
|
|||
|
|
}, 16, ["class", "disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown", "severity", "text", "outlined", "size", "unstyled", "pt"]), createVNode(_component_PVSMenu, {
|
|||
|
|
ref: "menu",
|
|||
|
|
id: $data.id + "_overlay",
|
|||
|
|
model: _ctx.model,
|
|||
|
|
popup: true,
|
|||
|
|
autoZIndex: _ctx.autoZIndex,
|
|||
|
|
baseZIndex: _ctx.baseZIndex,
|
|||
|
|
appendTo: _ctx.appendTo,
|
|||
|
|
unstyled: _ctx.unstyled,
|
|||
|
|
pt: _ctx.ptm("pcMenu")
|
|||
|
|
}, createSlots({
|
|||
|
|
_: 2
|
|||
|
|
}, [_ctx.$slots.menuitemicon ? {
|
|||
|
|
name: "itemicon",
|
|||
|
|
fn: withCtx(function(slotProps) {
|
|||
|
|
return [renderSlot(_ctx.$slots, "menuitemicon", {
|
|||
|
|
item: slotProps.item,
|
|||
|
|
"class": normalizeClass(slotProps["class"])
|
|||
|
|
})];
|
|||
|
|
}),
|
|||
|
|
key: "0"
|
|||
|
|
} : void 0, _ctx.$slots.item ? {
|
|||
|
|
name: "item",
|
|||
|
|
fn: withCtx(function(slotProps) {
|
|||
|
|
return [renderSlot(_ctx.$slots, "item", {
|
|||
|
|
item: slotProps.item,
|
|||
|
|
hasSubmenu: slotProps.hasSubmenu,
|
|||
|
|
label: slotProps.label,
|
|||
|
|
props: slotProps.props
|
|||
|
|
})];
|
|||
|
|
}),
|
|||
|
|
key: "1"
|
|||
|
|
} : void 0]), 1032, ["id", "model", "autoZIndex", "baseZIndex", "appendTo", "unstyled", "pt"])], 16, _hoisted_1$2);
|
|||
|
|
}
|
|||
|
|
__name(render, "render");
|
|||
|
|
script.render = render;
|
|||
|
|
const minQueueCount = 1;
|
|||
|
|
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "BatchCountEdit",
|
|||
|
|
props: {
|
|||
|
|
class: { default: "" }
|
|||
|
|
},
|
|||
|
|
setup(__props) {
|
|||
|
|
const props = __props;
|
|||
|
|
const queueSettingsStore = useQueueSettingsStore();
|
|||
|
|
const { batchCount } = storeToRefs(queueSettingsStore);
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const maxQueueCount = computed(
|
|||
|
|
() => settingStore.get("Comfy.QueueButton.BatchCountLimit")
|
|||
|
|
);
|
|||
|
|
const handleClick = /* @__PURE__ */ __name((increment) => {
|
|||
|
|
let newCount;
|
|||
|
|
if (increment) {
|
|||
|
|
const originalCount = batchCount.value - 1;
|
|||
|
|
newCount = originalCount * 2;
|
|||
|
|
} else {
|
|||
|
|
const originalCount = batchCount.value + 1;
|
|||
|
|
newCount = Math.floor(originalCount / 2);
|
|||
|
|
}
|
|||
|
|
batchCount.value = newCount;
|
|||
|
|
}, "handleClick");
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
const _directive_tooltip = resolveDirective("tooltip");
|
|||
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|||
|
|
class: normalizeClass(["batch-count", props.class])
|
|||
|
|
}, [
|
|||
|
|
createVNode(unref(script$y), {
|
|||
|
|
class: "w-14",
|
|||
|
|
modelValue: unref(batchCount),
|
|||
|
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(batchCount) ? batchCount.value = $event : null),
|
|||
|
|
min: minQueueCount,
|
|||
|
|
max: maxQueueCount.value,
|
|||
|
|
fluid: "",
|
|||
|
|
showButtons: "",
|
|||
|
|
pt: {
|
|||
|
|
incrementButton: {
|
|||
|
|
class: "w-6",
|
|||
|
|
onmousedown: /* @__PURE__ */ __name(() => {
|
|||
|
|
handleClick(true);
|
|||
|
|
}, "onmousedown")
|
|||
|
|
},
|
|||
|
|
decrementButton: {
|
|||
|
|
class: "w-6",
|
|||
|
|
onmousedown: /* @__PURE__ */ __name(() => {
|
|||
|
|
handleClick(false);
|
|||
|
|
}, "onmousedown")
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, null, 8, ["modelValue", "max", "pt"])
|
|||
|
|
], 2)), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
_ctx.$t("menu.batchCount"),
|
|||
|
|
void 0,
|
|||
|
|
{ bottom: true }
|
|||
|
|
]
|
|||
|
|
]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const BatchCountEdit = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-713442be"]]);
|
|||
|
|
const _withScopeId$1 = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-2b80bf74"), n = n(), popScopeId(), n), "_withScopeId$1");
|
|||
|
|
const _hoisted_1$1 = { class: "queue-button-group flex" };
|
|||
|
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "ComfyQueueButton",
|
|||
|
|
setup(__props) {
|
|||
|
|
const workspaceStore = useWorkspaceStore();
|
|||
|
|
const queueCountStore = storeToRefs(useQueuePendingTaskCountStore());
|
|||
|
|
const { mode: queueMode } = storeToRefs(useQueueSettingsStore());
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
const queueModeMenuItemLookup = {
|
|||
|
|
disabled: {
|
|||
|
|
key: "disabled",
|
|||
|
|
label: "Queue",
|
|||
|
|
icon: "pi pi-play",
|
|||
|
|
tooltip: t("menu.disabledTooltip"),
|
|||
|
|
command: /* @__PURE__ */ __name(() => {
|
|||
|
|
queueMode.value = "disabled";
|
|||
|
|
}, "command")
|
|||
|
|
},
|
|||
|
|
instant: {
|
|||
|
|
key: "instant",
|
|||
|
|
label: "Queue (Instant)",
|
|||
|
|
icon: "pi pi-forward",
|
|||
|
|
tooltip: t("menu.instantTooltip"),
|
|||
|
|
command: /* @__PURE__ */ __name(() => {
|
|||
|
|
queueMode.value = "instant";
|
|||
|
|
}, "command")
|
|||
|
|
},
|
|||
|
|
change: {
|
|||
|
|
key: "change",
|
|||
|
|
label: "Queue (Change)",
|
|||
|
|
icon: "pi pi-step-forward-alt",
|
|||
|
|
tooltip: t("menu.changeTooltip"),
|
|||
|
|
command: /* @__PURE__ */ __name(() => {
|
|||
|
|
queueMode.value = "change";
|
|||
|
|
}, "command")
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const activeQueueModeMenuItem = computed(
|
|||
|
|
() => queueModeMenuItemLookup[queueMode.value]
|
|||
|
|
);
|
|||
|
|
const queueModeMenuItems = computed(
|
|||
|
|
() => Object.values(queueModeMenuItemLookup)
|
|||
|
|
);
|
|||
|
|
const executingPrompt = computed(() => !!queueCountStore.count.value);
|
|||
|
|
const hasPendingTasks = computed(() => queueCountStore.count.value > 1);
|
|||
|
|
const commandStore = useCommandStore();
|
|||
|
|
const queuePrompt = /* @__PURE__ */ __name((e) => {
|
|||
|
|
const commandId = e.shiftKey ? "Comfy.QueuePromptFront" : "Comfy.QueuePrompt";
|
|||
|
|
commandStore.execute(commandId);
|
|||
|
|
}, "queuePrompt");
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
const _component_i_lucide58list_start = __unplugin_components_0;
|
|||
|
|
const _directive_tooltip = resolveDirective("tooltip");
|
|||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|||
|
|
withDirectives((openBlock(), createBlock(unref(script), {
|
|||
|
|
class: "comfyui-queue-button",
|
|||
|
|
label: activeQueueModeMenuItem.value.label,
|
|||
|
|
severity: "primary",
|
|||
|
|
onClick: queuePrompt,
|
|||
|
|
model: queueModeMenuItems.value,
|
|||
|
|
"data-testid": "queue-button"
|
|||
|
|
}, {
|
|||
|
|
icon: withCtx(() => [
|
|||
|
|
unref(workspaceStore).shiftDown ? (openBlock(), createBlock(_component_i_lucide58list_start, { key: 0 })) : (openBlock(), createElementBlock("i", {
|
|||
|
|
key: 1,
|
|||
|
|
class: normalizeClass(activeQueueModeMenuItem.value.icon)
|
|||
|
|
}, null, 2))
|
|||
|
|
]),
|
|||
|
|
item: withCtx(({ item: item3 }) => [
|
|||
|
|
withDirectives(createVNode(unref(script$d), {
|
|||
|
|
label: item3.label,
|
|||
|
|
icon: item3.icon,
|
|||
|
|
severity: item3.key === unref(queueMode) ? "primary" : "secondary",
|
|||
|
|
text: ""
|
|||
|
|
}, null, 8, ["label", "icon", "severity"]), [
|
|||
|
|
[_directive_tooltip, item3.tooltip]
|
|||
|
|
])
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
}, 8, ["label", "model"])), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
unref(workspaceStore).shiftDown ? _ctx.$t("menu.queueWorkflowFront") : _ctx.$t("menu.queueWorkflow"),
|
|||
|
|
void 0,
|
|||
|
|
{ bottom: true }
|
|||
|
|
]
|
|||
|
|
]),
|
|||
|
|
createVNode(BatchCountEdit),
|
|||
|
|
createVNode(unref(script$7), { class: "execution-actions flex flex-nowrap" }, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
withDirectives(createVNode(unref(script$d), {
|
|||
|
|
icon: "pi pi-times",
|
|||
|
|
severity: executingPrompt.value ? "danger" : "secondary",
|
|||
|
|
disabled: !executingPrompt.value,
|
|||
|
|
text: "",
|
|||
|
|
onClick: _cache[0] || (_cache[0] = () => unref(commandStore).execute("Comfy.Interrupt"))
|
|||
|
|
}, null, 8, ["severity", "disabled"]), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
_ctx.$t("menu.interrupt"),
|
|||
|
|
void 0,
|
|||
|
|
{ bottom: true }
|
|||
|
|
]
|
|||
|
|
]),
|
|||
|
|
withDirectives(createVNode(unref(script$d), {
|
|||
|
|
icon: "pi pi-stop",
|
|||
|
|
severity: hasPendingTasks.value ? "danger" : "secondary",
|
|||
|
|
disabled: !hasPendingTasks.value,
|
|||
|
|
text: "",
|
|||
|
|
onClick: _cache[1] || (_cache[1] = () => unref(commandStore).execute("Comfy.ClearPendingTasks"))
|
|||
|
|
}, null, 8, ["severity", "disabled"]), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
_ctx.$t("sideToolbar.queueTab.clearPendingTasks"),
|
|||
|
|
void 0,
|
|||
|
|
{ bottom: true }
|
|||
|
|
]
|
|||
|
|
])
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
})
|
|||
|
|
]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const ComfyQueueButton = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-2b80bf74"]]);
|
|||
|
|
const overlapThreshold = 20;
|
|||
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "ComfyActionbar",
|
|||
|
|
setup(__props) {
|
|||
|
|
const settingsStore = useSettingStore();
|
|||
|
|
const commandStore = useCommandStore();
|
|||
|
|
const visible = computed(
|
|||
|
|
() => settingsStore.get("Comfy.UseNewMenu") !== "Disabled"
|
|||
|
|
);
|
|||
|
|
const panelRef = ref(null);
|
|||
|
|
const dragHandleRef = ref(null);
|
|||
|
|
const isDocked = useLocalStorage("Comfy.MenuPosition.Docked", false);
|
|||
|
|
const storedPosition = useLocalStorage("Comfy.MenuPosition.Floating", {
|
|||
|
|
x: 0,
|
|||
|
|
y: 0
|
|||
|
|
});
|
|||
|
|
const {
|
|||
|
|
x,
|
|||
|
|
y,
|
|||
|
|
style,
|
|||
|
|
isDragging
|
|||
|
|
} = useDraggable(panelRef, {
|
|||
|
|
initialValue: { x: 0, y: 0 },
|
|||
|
|
handle: dragHandleRef,
|
|||
|
|
containerElement: document.body
|
|||
|
|
});
|
|||
|
|
watchDebounced(
|
|||
|
|
[x, y],
|
|||
|
|
([newX, newY]) => {
|
|||
|
|
storedPosition.value = { x: newX, y: newY };
|
|||
|
|
},
|
|||
|
|
{ debounce: 300 }
|
|||
|
|
);
|
|||
|
|
const setInitialPosition = /* @__PURE__ */ __name(() => {
|
|||
|
|
if (x.value !== 0 || y.value !== 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (storedPosition.value.x !== 0 || storedPosition.value.y !== 0) {
|
|||
|
|
x.value = storedPosition.value.x;
|
|||
|
|
y.value = storedPosition.value.y;
|
|||
|
|
captureLastDragState();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (panelRef.value) {
|
|||
|
|
const screenWidth = window.innerWidth;
|
|||
|
|
const screenHeight = window.innerHeight;
|
|||
|
|
const menuWidth = panelRef.value.offsetWidth;
|
|||
|
|
const menuHeight = panelRef.value.offsetHeight;
|
|||
|
|
if (menuWidth === 0 || menuHeight === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
x.value = (screenWidth - menuWidth) / 2;
|
|||
|
|
y.value = screenHeight - menuHeight - 10;
|
|||
|
|
captureLastDragState();
|
|||
|
|
}
|
|||
|
|
}, "setInitialPosition");
|
|||
|
|
onMounted(setInitialPosition);
|
|||
|
|
watch(visible, (newVisible) => {
|
|||
|
|
if (newVisible) {
|
|||
|
|
nextTick(setInitialPosition);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const lastDragState = ref({
|
|||
|
|
x: x.value,
|
|||
|
|
y: y.value,
|
|||
|
|
windowWidth: window.innerWidth,
|
|||
|
|
windowHeight: window.innerHeight
|
|||
|
|
});
|
|||
|
|
const captureLastDragState = /* @__PURE__ */ __name(() => {
|
|||
|
|
lastDragState.value = {
|
|||
|
|
x: x.value,
|
|||
|
|
y: y.value,
|
|||
|
|
windowWidth: window.innerWidth,
|
|||
|
|
windowHeight: window.innerHeight
|
|||
|
|
};
|
|||
|
|
}, "captureLastDragState");
|
|||
|
|
watch(
|
|||
|
|
isDragging,
|
|||
|
|
(newIsDragging) => {
|
|||
|
|
if (!newIsDragging) {
|
|||
|
|
captureLastDragState();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ immediate: true }
|
|||
|
|
);
|
|||
|
|
const adjustMenuPosition = /* @__PURE__ */ __name(() => {
|
|||
|
|
if (panelRef.value) {
|
|||
|
|
const screenWidth = window.innerWidth;
|
|||
|
|
const screenHeight = window.innerHeight;
|
|||
|
|
const menuWidth = panelRef.value.offsetWidth;
|
|||
|
|
const menuHeight = panelRef.value.offsetHeight;
|
|||
|
|
const distanceRight = lastDragState.value.windowWidth - (lastDragState.value.x + menuWidth);
|
|||
|
|
const distanceBottom = lastDragState.value.windowHeight - (lastDragState.value.y + menuHeight);
|
|||
|
|
const anchorRight = distanceRight < lastDragState.value.x;
|
|||
|
|
const anchorBottom = distanceBottom < lastDragState.value.y;
|
|||
|
|
if (anchorRight) {
|
|||
|
|
x.value = screenWidth - (lastDragState.value.windowWidth - lastDragState.value.x);
|
|||
|
|
} else {
|
|||
|
|
x.value = lastDragState.value.x;
|
|||
|
|
}
|
|||
|
|
if (anchorBottom) {
|
|||
|
|
y.value = screenHeight - (lastDragState.value.windowHeight - lastDragState.value.y);
|
|||
|
|
} else {
|
|||
|
|
y.value = lastDragState.value.y;
|
|||
|
|
}
|
|||
|
|
x.value = lodashExports.clamp(x.value, 0, screenWidth - menuWidth);
|
|||
|
|
y.value = lodashExports.clamp(y.value, 0, screenHeight - menuHeight);
|
|||
|
|
}
|
|||
|
|
}, "adjustMenuPosition");
|
|||
|
|
useEventListener(window, "resize", adjustMenuPosition);
|
|||
|
|
const topMenuRef = inject("topMenuRef");
|
|||
|
|
const topMenuBounds = useElementBounding(topMenuRef);
|
|||
|
|
const isOverlappingWithTopMenu = computed(() => {
|
|||
|
|
if (!panelRef.value) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
const { height } = panelRef.value.getBoundingClientRect();
|
|||
|
|
const actionbarBottom = y.value + height;
|
|||
|
|
const topMenuBottom = topMenuBounds.bottom.value;
|
|||
|
|
const overlapPixels = Math.min(actionbarBottom, topMenuBottom) - Math.max(y.value, topMenuBounds.top.value);
|
|||
|
|
return overlapPixels > overlapThreshold;
|
|||
|
|
});
|
|||
|
|
watch(isDragging, (newIsDragging) => {
|
|||
|
|
if (!newIsDragging) {
|
|||
|
|
isDocked.value = isOverlappingWithTopMenu.value;
|
|||
|
|
} else {
|
|||
|
|
isDocked.value = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const eventBus = useEventBus("topMenu");
|
|||
|
|
watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
|
|||
|
|
eventBus.emit("updateHighlight", {
|
|||
|
|
isDragging: dragging,
|
|||
|
|
isOverlapping: overlapping
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
const _directive_tooltip = resolveDirective("tooltip");
|
|||
|
|
return openBlock(), createBlock(unref(script$4), {
|
|||
|
|
class: normalizeClass(["actionbar w-fit", { "is-dragging": unref(isDragging), "is-docked": unref(isDocked) }]),
|
|||
|
|
style: normalizeStyle(unref(style))
|
|||
|
|
}, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
createBaseVNode("div", {
|
|||
|
|
class: "actionbar-content flex items-center",
|
|||
|
|
ref_key: "panelRef",
|
|||
|
|
ref: panelRef
|
|||
|
|
}, [
|
|||
|
|
createBaseVNode("span", {
|
|||
|
|
class: "drag-handle cursor-move mr-2 p-0!",
|
|||
|
|
ref_key: "dragHandleRef",
|
|||
|
|
ref: dragHandleRef
|
|||
|
|
}, null, 512),
|
|||
|
|
createVNode(ComfyQueueButton),
|
|||
|
|
createVNode(unref(script$z), {
|
|||
|
|
layout: "vertical",
|
|||
|
|
class: "mx-1"
|
|||
|
|
}),
|
|||
|
|
createVNode(unref(script$7), { class: "flex flex-nowrap" }, {
|
|||
|
|
default: withCtx(() => [
|
|||
|
|
withDirectives(createVNode(unref(script$d), {
|
|||
|
|
icon: "pi pi-refresh",
|
|||
|
|
severity: "secondary",
|
|||
|
|
text: "",
|
|||
|
|
onClick: _cache[0] || (_cache[0] = () => unref(commandStore).execute("Comfy.RefreshNodeDefinitions"))
|
|||
|
|
}, null, 512), [
|
|||
|
|
[
|
|||
|
|
_directive_tooltip,
|
|||
|
|
_ctx.$t("menu.refresh"),
|
|||
|
|
void 0,
|
|||
|
|
{ bottom: true }
|
|||
|
|
]
|
|||
|
|
])
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
})
|
|||
|
|
], 512)
|
|||
|
|
]),
|
|||
|
|
_: 1
|
|||
|
|
}, 8, ["style", "class"]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const Actionbar = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2e54db00"]]);
|
|||
|
|
const _withScopeId = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-b13fdc92"), n = n(), popScopeId(), n), "_withScopeId");
|
|||
|
|
const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("h1", { class: "comfyui-logo mx-2" }, "ComfyUI", -1));
|
|||
|
|
const _hoisted_2 = { class: "flex-grow" };
|
|||
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "TopMenubar",
|
|||
|
|
setup(__props) {
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const workflowTabsPosition = computed(
|
|||
|
|
() => settingStore.get("Comfy.Workflow.WorkflowTabsPosition")
|
|||
|
|
);
|
|||
|
|
const betaMenuEnabled = computed(
|
|||
|
|
() => settingStore.get("Comfy.UseNewMenu") !== "Disabled"
|
|||
|
|
);
|
|||
|
|
const teleportTarget = computed(
|
|||
|
|
() => settingStore.get("Comfy.UseNewMenu") === "Top" ? ".comfyui-body-top" : ".comfyui-body-bottom"
|
|||
|
|
);
|
|||
|
|
const menuRight = ref(null);
|
|||
|
|
onMounted(() => {
|
|||
|
|
if (menuRight.value) {
|
|||
|
|
menuRight.value.appendChild(app.menu.element);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const topMenuRef = ref(null);
|
|||
|
|
provide("topMenuRef", topMenuRef);
|
|||
|
|
const eventBus = useEventBus("topMenu");
|
|||
|
|
const isDropZone = ref(false);
|
|||
|
|
const isDroppable = ref(false);
|
|||
|
|
eventBus.on((event, payload) => {
|
|||
|
|
if (event === "updateHighlight") {
|
|||
|
|
isDropZone.value = payload.isDragging;
|
|||
|
|
isDroppable.value = payload.isOverlapping && payload.isDragging;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createBlock(Teleport, { to: teleportTarget.value }, [
|
|||
|
|
withDirectives(createBaseVNode("div", {
|
|||
|
|
ref_key: "topMenuRef",
|
|||
|
|
ref: topMenuRef,
|
|||
|
|
class: normalizeClass(["comfyui-menu flex items-center", { dropzone: isDropZone.value, "dropzone-active": isDroppable.value }])
|
|||
|
|
}, [
|
|||
|
|
_hoisted_1,
|
|||
|
|
createVNode(CommandMenubar),
|
|||
|
|
createVNode(unref(script$z), {
|
|||
|
|
layout: "vertical",
|
|||
|
|
class: "mx-2"
|
|||
|
|
}),
|
|||
|
|
createBaseVNode("div", _hoisted_2, [
|
|||
|
|
workflowTabsPosition.value === "Topbar" ? (openBlock(), createBlock(WorkflowTabs, { key: 0 })) : createCommentVNode("", true)
|
|||
|
|
]),
|
|||
|
|
createBaseVNode("div", {
|
|||
|
|
class: "comfyui-menu-right",
|
|||
|
|
ref_key: "menuRight",
|
|||
|
|
ref: menuRight
|
|||
|
|
}, null, 512),
|
|||
|
|
createVNode(Actionbar)
|
|||
|
|
], 2), [
|
|||
|
|
[vShow, betaMenuEnabled.value]
|
|||
|
|
])
|
|||
|
|
], 8, ["to"]);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const TopMenubar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-b13fdc92"]]);
|
|||
|
|
function setupAutoQueueHandler() {
|
|||
|
|
const queueCountStore = useQueuePendingTaskCountStore();
|
|||
|
|
const queueSettingsStore = useQueueSettingsStore();
|
|||
|
|
let graphHasChanged = false;
|
|||
|
|
let internalCount = 0;
|
|||
|
|
api.addEventListener("graphChanged", () => {
|
|||
|
|
if (queueSettingsStore.mode === "change") {
|
|||
|
|
if (internalCount) {
|
|||
|
|
graphHasChanged = true;
|
|||
|
|
} else {
|
|||
|
|
graphHasChanged = false;
|
|||
|
|
app.queuePrompt(0, queueSettingsStore.batchCount);
|
|||
|
|
internalCount++;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
queueCountStore.$subscribe(
|
|||
|
|
() => {
|
|||
|
|
internalCount = queueCountStore.count;
|
|||
|
|
if (!internalCount && !app.lastExecutionError) {
|
|||
|
|
if (queueSettingsStore.mode === "instant" || queueSettingsStore.mode === "change" && graphHasChanged) {
|
|||
|
|
graphHasChanged = false;
|
|||
|
|
app.queuePrompt(0, queueSettingsStore.batchCount);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ detached: true }
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
__name(setupAutoQueueHandler, "setupAutoQueueHandler");
|
|||
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|||
|
|
__name: "GraphView",
|
|||
|
|
setup(__props) {
|
|||
|
|
setupAutoQueueHandler();
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
const toast = useToast();
|
|||
|
|
const settingStore = useSettingStore();
|
|||
|
|
const executionStore = useExecutionStore();
|
|||
|
|
const theme11 = computed(() => settingStore.get("Comfy.ColorPalette"));
|
|||
|
|
watch(
|
|||
|
|
theme11,
|
|||
|
|
(newTheme) => {
|
|||
|
|
const DARK_THEME_CLASS = "dark-theme";
|
|||
|
|
const isDarkTheme = newTheme !== "light";
|
|||
|
|
if (isDarkTheme) {
|
|||
|
|
document.body.classList.add(DARK_THEME_CLASS);
|
|||
|
|
} else {
|
|||
|
|
document.body.classList.remove(DARK_THEME_CLASS);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ immediate: true }
|
|||
|
|
);
|
|||
|
|
watchEffect(() => {
|
|||
|
|
const fontSize = settingStore.get("Comfy.TextareaWidget.FontSize");
|
|||
|
|
document.documentElement.style.setProperty(
|
|||
|
|
"--comfy-textarea-font-size",
|
|||
|
|
`${fontSize}px`
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
watchEffect(() => {
|
|||
|
|
const padding = settingStore.get("Comfy.TreeExplorer.ItemPadding");
|
|||
|
|
document.documentElement.style.setProperty(
|
|||
|
|
"--comfy-tree-explorer-item-padding",
|
|||
|
|
`${padding}px`
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
watchEffect(() => {
|
|||
|
|
const locale = settingStore.get("Comfy.Locale");
|
|||
|
|
if (locale) {
|
|||
|
|
i18n.global.locale.value = locale;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
watchEffect(() => {
|
|||
|
|
const useNewMenu = settingStore.get("Comfy.UseNewMenu");
|
|||
|
|
if (useNewMenu === "Disabled") {
|
|||
|
|
app.ui.menuContainer.style.removeProperty("display");
|
|||
|
|
app.ui.restoreMenuPosition();
|
|||
|
|
} else {
|
|||
|
|
app.ui.menuContainer.style.setProperty("display", "none");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const init = /* @__PURE__ */ __name(() => {
|
|||
|
|
settingStore.addSettings(app.ui.settings);
|
|||
|
|
useKeybindingStore().loadCoreKeybindings();
|
|||
|
|
useSidebarTabStore().registerCoreSidebarTabs();
|
|||
|
|
app.extensionManager = useWorkspaceStore();
|
|||
|
|
}, "init");
|
|||
|
|
const queuePendingTaskCountStore = useQueuePendingTaskCountStore();
|
|||
|
|
const onStatus = /* @__PURE__ */ __name((e) => {
|
|||
|
|
queuePendingTaskCountStore.update(e);
|
|||
|
|
}, "onStatus");
|
|||
|
|
const reconnectingMessage = {
|
|||
|
|
severity: "error",
|
|||
|
|
summary: t("reconnecting")
|
|||
|
|
};
|
|||
|
|
const onReconnecting = /* @__PURE__ */ __name(() => {
|
|||
|
|
toast.remove(reconnectingMessage);
|
|||
|
|
toast.add(reconnectingMessage);
|
|||
|
|
}, "onReconnecting");
|
|||
|
|
const onReconnected = /* @__PURE__ */ __name(() => {
|
|||
|
|
toast.remove(reconnectingMessage);
|
|||
|
|
toast.add({
|
|||
|
|
severity: "success",
|
|||
|
|
summary: t("reconnected"),
|
|||
|
|
life: 2e3
|
|||
|
|
});
|
|||
|
|
}, "onReconnected");
|
|||
|
|
const workflowStore = useWorkflowStore();
|
|||
|
|
const workflowBookmarkStore = useWorkflowBookmarkStore();
|
|||
|
|
app.workflowManager.executionStore = executionStore;
|
|||
|
|
app.workflowManager.workflowStore = workflowStore;
|
|||
|
|
app.workflowManager.workflowBookmarkStore = workflowBookmarkStore;
|
|||
|
|
onMounted(() => {
|
|||
|
|
api.addEventListener("status", onStatus);
|
|||
|
|
api.addEventListener("reconnecting", onReconnecting);
|
|||
|
|
api.addEventListener("reconnected", onReconnected);
|
|||
|
|
executionStore.bindExecutionEvents();
|
|||
|
|
try {
|
|||
|
|
init();
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error("Failed to init ComfyUI frontend", e);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
api.removeEventListener("status", onStatus);
|
|||
|
|
api.removeEventListener("reconnecting", onReconnecting);
|
|||
|
|
api.removeEventListener("reconnected", onReconnected);
|
|||
|
|
executionStore.unbindExecutionEvents();
|
|||
|
|
});
|
|||
|
|
const onGraphReady = /* @__PURE__ */ __name(() => {
|
|||
|
|
requestIdleCallback(
|
|||
|
|
() => {
|
|||
|
|
useKeybindingStore().loadUserKeybindings();
|
|||
|
|
useNodeBookmarkStore().migrateLegacyBookmarks();
|
|||
|
|
useNodeDefStore().nodeSearchService.endsWithFilterStartSequence("");
|
|||
|
|
useNodeFrequencyStore().loadNodeFrequencies();
|
|||
|
|
},
|
|||
|
|
{ timeout: 1e3 }
|
|||
|
|
);
|
|||
|
|
}, "onGraphReady");
|
|||
|
|
return (_ctx, _cache) => {
|
|||
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|||
|
|
createVNode(TopMenubar),
|
|||
|
|
createVNode(_sfc_main$a, { onReady: onGraphReady }),
|
|||
|
|
createVNode(_sfc_main$9),
|
|||
|
|
createVNode(_sfc_main$8),
|
|||
|
|
createVNode(_sfc_main$7)
|
|||
|
|
], 64);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
export {
|
|||
|
|
_sfc_main as default
|
|||
|
|
};
|
|||
|
|
//# sourceMappingURL=GraphView-DmeOoKWv.js.map
|