From 54e1efe987a531849df3ccf0174849ded5e9d201 Mon Sep 17 00:00:00 2001 From: huchenlei Date: Thu, 24 Oct 2024 15:19:49 -0400 Subject: [PATCH 1/2] Update web content to release v1.3.21 --- styles/default.csv | 3 + web/assets/ExtensionPanel-DZLYjWBj.js | 103 + web/assets/ExtensionPanel-DZLYjWBj.js.map | 1 + web/assets/GraphView-BGt8GmeB.css | 792 - web/assets/GraphView-Bx1-rDWO.css | 278 + web/assets/GraphView-CVV2XJjS.js | 17465 -- web/assets/GraphView-CVV2XJjS.js.map | 1 - web/assets/GraphView-DmeOoKWv.js | 7361 + web/assets/GraphView-DmeOoKWv.js.map | 1 + web/assets/KeybindingPanel-BNYKhW1k.css | 8 + web/assets/KeybindingPanel-YkUFoiMw.js | 264 + web/assets/KeybindingPanel-YkUFoiMw.js.map | 1 + web/assets/colorPalette-D5oi2-2V.js | 865 - web/assets/colorPalette-D5oi2-2V.js.map | 1 - ...{index-BHJGjcJh.css => index-BDQCPKeJ.css} | 564 +- web/assets/index-BMC1ey-i.js.map | 1 - .../{index-DGAbdBYF.js => index-CgU1oKZt.js} | 131829 +++++++-------- web/assets/index-CgU1oKZt.js.map | 1 + .../{index-BMC1ey-i.js => index-D36_Nnai.js} | 113 +- web/assets/index-D36_Nnai.js.map | 1 + web/assets/index-DBWDcZsl.js | 8997 + web/assets/index-DBWDcZsl.js.map | 1 + web/assets/index-DGAbdBYF.js.map | 1 - web/assets/index-DYEEBf64.js | 102 + web/assets/index-DYEEBf64.js.map | 1 + ...-Duxc-t_S.js => userSelection-DVDwxLD5.js} | 4 +- web/assets/userSelection-DVDwxLD5.js.map | 1 + web/assets/userSelection-Duxc-t_S.js.map | 1 - ...s-DdoWwzg5.js => widgetInputs-DNVvusS1.js} | 4 +- web/assets/widgetInputs-DNVvusS1.js.map | 1 + web/assets/widgetInputs-DdoWwzg5.js.map | 1 - web/index.html | 4 +- 32 files changed, 82988 insertions(+), 85783 deletions(-) create mode 100644 styles/default.csv create mode 100644 web/assets/ExtensionPanel-DZLYjWBj.js create mode 100644 web/assets/ExtensionPanel-DZLYjWBj.js.map delete mode 100644 web/assets/GraphView-BGt8GmeB.css create mode 100644 web/assets/GraphView-Bx1-rDWO.css delete mode 100644 web/assets/GraphView-CVV2XJjS.js delete mode 100644 web/assets/GraphView-CVV2XJjS.js.map create mode 100644 web/assets/GraphView-DmeOoKWv.js create mode 100644 web/assets/GraphView-DmeOoKWv.js.map create mode 100644 web/assets/KeybindingPanel-BNYKhW1k.css create mode 100644 web/assets/KeybindingPanel-YkUFoiMw.js create mode 100644 web/assets/KeybindingPanel-YkUFoiMw.js.map delete mode 100644 web/assets/colorPalette-D5oi2-2V.js delete mode 100644 web/assets/colorPalette-D5oi2-2V.js.map rename web/assets/{index-BHJGjcJh.css => index-BDQCPKeJ.css} (86%) delete mode 100644 web/assets/index-BMC1ey-i.js.map rename web/assets/{index-DGAbdBYF.js => index-CgU1oKZt.js} (80%) create mode 100644 web/assets/index-CgU1oKZt.js.map rename web/assets/{index-BMC1ey-i.js => index-D36_Nnai.js} (97%) create mode 100644 web/assets/index-D36_Nnai.js.map create mode 100644 web/assets/index-DBWDcZsl.js create mode 100644 web/assets/index-DBWDcZsl.js.map delete mode 100644 web/assets/index-DGAbdBYF.js.map create mode 100644 web/assets/index-DYEEBf64.js create mode 100644 web/assets/index-DYEEBf64.js.map rename web/assets/{userSelection-Duxc-t_S.js => userSelection-DVDwxLD5.js} (97%) create mode 100644 web/assets/userSelection-DVDwxLD5.js.map delete mode 100644 web/assets/userSelection-Duxc-t_S.js.map rename web/assets/{widgetInputs-DdoWwzg5.js => widgetInputs-DNVvusS1.js} (99%) create mode 100644 web/assets/widgetInputs-DNVvusS1.js.map delete mode 100644 web/assets/widgetInputs-DdoWwzg5.js.map diff --git a/styles/default.csv b/styles/default.csv new file mode 100644 index 000000000000..b7977e597452 --- /dev/null +++ b/styles/default.csv @@ -0,0 +1,3 @@ +name,prompt,negative_prompt +❌Low Token,,"embedding:EasyNegative, NSFW, Cleavage, Pubic Hair, Nudity, Naked, censored" +✅Line Art / Manga,"(Anime Scene, Toonshading, Satoshi Kon, Ken Sugimori, Hiromu Arakawa:1.2), (Anime Style, Manga Style:1.3), Low detail, sketch, concept art, line art, webtoon, manhua, hand drawn, defined lines, simple shades, minimalistic, High contrast, Linear compositions, Scalable artwork, Digital art, High Contrast Shadows, glow effects, humorous illustration, big depth of field, Masterpiece, colors, concept art, trending on artstation, Vivid colors, dramatic", diff --git a/web/assets/ExtensionPanel-DZLYjWBj.js b/web/assets/ExtensionPanel-DZLYjWBj.js new file mode 100644 index 000000000000..36e944c31702 --- /dev/null +++ b/web/assets/ExtensionPanel-DZLYjWBj.js @@ -0,0 +1,103 @@ +var __defProp = Object.defineProperty; +var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); +import { d as defineComponent, bK as useExtensionStore, u as useSettingStore, r as ref, o as onMounted, q as computed, g as openBlock, h as createElementBlock, i as createVNode, y as withCtx, z as unref, bL as script$1, A as createBaseVNode, x as createBlock, M as Fragment, N as renderList, am as toDisplayString, ap as createTextVNode, j as createCommentVNode, D as script$4 } from "./index-CgU1oKZt.js"; +import { s as script, a as script$2, b as script$3 } from "./index-DBWDcZsl.js"; +import "./index-DYEEBf64.js"; +const _hoisted_1 = { class: "extension-panel" }; +const _hoisted_2 = { class: "mt-4" }; +const _sfc_main = /* @__PURE__ */ defineComponent({ + __name: "ExtensionPanel", + setup(__props) { + const extensionStore = useExtensionStore(); + const settingStore = useSettingStore(); + const editingEnabledExtensions = ref({}); + onMounted(() => { + extensionStore.extensions.forEach((ext) => { + editingEnabledExtensions.value[ext.name] = extensionStore.isExtensionEnabled(ext.name); + }); + }); + const changedExtensions = computed(() => { + return extensionStore.extensions.filter( + (ext) => editingEnabledExtensions.value[ext.name] !== extensionStore.isExtensionEnabled(ext.name) + ); + }); + const hasChanges = computed(() => { + return changedExtensions.value.length > 0; + }); + const updateExtensionStatus = /* @__PURE__ */ __name(() => { + const editingDisabledExtensionNames = Object.entries( + editingEnabledExtensions.value + ).filter(([_, enabled]) => !enabled).map(([name]) => name); + settingStore.set("Comfy.Extension.Disabled", [ + ...extensionStore.inactiveDisabledExtensionNames, + ...editingDisabledExtensionNames + ]); + }, "updateExtensionStatus"); + const applyChanges = /* @__PURE__ */ __name(() => { + window.location.reload(); + }, "applyChanges"); + return (_ctx, _cache) => { + return openBlock(), createElementBlock("div", _hoisted_1, [ + createVNode(unref(script$2), { + value: unref(extensionStore).extensions, + stripedRows: "", + size: "small" + }, { + default: withCtx(() => [ + createVNode(unref(script), { + field: "name", + header: _ctx.$t("extensionName"), + sortable: "" + }, null, 8, ["header"]), + createVNode(unref(script), { pt: { + bodyCell: "flex items-center justify-end" + } }, { + body: withCtx((slotProps) => [ + createVNode(unref(script$1), { + modelValue: editingEnabledExtensions.value[slotProps.data.name], + "onUpdate:modelValue": /* @__PURE__ */ __name(($event) => editingEnabledExtensions.value[slotProps.data.name] = $event, "onUpdate:modelValue"), + onChange: updateExtensionStatus + }, null, 8, ["modelValue", "onUpdate:modelValue"]) + ]), + _: 1 + }) + ]), + _: 1 + }, 8, ["value"]), + createBaseVNode("div", _hoisted_2, [ + hasChanges.value ? (openBlock(), createBlock(unref(script$3), { + key: 0, + severity: "info" + }, { + default: withCtx(() => [ + createBaseVNode("ul", null, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(changedExtensions.value, (ext) => { + return openBlock(), createElementBlock("li", { + key: ext.name + }, [ + createBaseVNode("span", null, toDisplayString(unref(extensionStore).isExtensionEnabled(ext.name) ? "[-]" : "[+]"), 1), + createTextVNode(" " + toDisplayString(ext.name), 1) + ]); + }), 128)) + ]) + ]), + _: 1 + })) : createCommentVNode("", true), + createVNode(unref(script$4), { + label: _ctx.$t("reloadToApplyChanges"), + icon: "pi pi-refresh", + onClick: applyChanges, + disabled: !hasChanges.value, + text: "", + fluid: "", + severity: "danger" + }, null, 8, ["label", "disabled"]) + ]) + ]); + }; + } +}); +export { + _sfc_main as default +}; +//# sourceMappingURL=ExtensionPanel-DZLYjWBj.js.map diff --git a/web/assets/ExtensionPanel-DZLYjWBj.js.map b/web/assets/ExtensionPanel-DZLYjWBj.js.map new file mode 100644 index 000000000000..eabe9cbaf8e0 --- /dev/null +++ b/web/assets/ExtensionPanel-DZLYjWBj.js.map @@ -0,0 +1 @@ +{"version":3,"file":"ExtensionPanel-DZLYjWBj.js","sources":["../../src/components/dialog/content/setting/ExtensionPanel.vue"],"sourcesContent":["\n\n\n"],"names":[],"mappings":";;;;;;;;;;AAmDA,UAAM,iBAAiB;AACvB,UAAM,eAAe;AAEf,UAAA,2BAA2B,IAA6B,CAAA,CAAE;AAEhE,cAAU,MAAM;AACC,qBAAA,WAAW,QAAQ,CAAC,QAAQ;AACzC,iCAAyB,MAAM,IAAI,IAAI,IACrC,eAAe,mBAAmB,IAAI,IAAI;AAAA,MAAA,CAC7C;AAAA,IAAA,CACF;AAEK,UAAA,oBAAoB,SAAS,MAAM;AACvC,aAAO,eAAe,WAAW;AAAA,QAC/B,CAAC,QACC,yBAAyB,MAAM,IAAI,IAAI,MACvC,eAAe,mBAAmB,IAAI,IAAI;AAAA,MAAA;AAAA,IAC9C,CACD;AAEK,UAAA,aAAa,SAAS,MAAM;AACzB,aAAA,kBAAkB,MAAM,SAAS;AAAA,IAAA,CACzC;AAED,UAAM,wBAAwB,6BAAM;AAClC,YAAM,gCAAgC,OAAO;AAAA,QAC3C,yBAAyB;AAAA,MAExB,EAAA,OAAO,CAAC,CAAC,GAAG,OAAO,MAAM,CAAC,OAAO,EACjC,IAAI,CAAC,CAAC,IAAI,MAAM,IAAI;AAEvB,mBAAa,IAAI,4BAA4B;AAAA,QAC3C,GAAG,eAAe;AAAA,QAClB,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA,GAV2B;AAa9B,UAAM,eAAe,6BAAM;AAEzB,aAAO,SAAS;IAAO,GAFJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} \ No newline at end of file diff --git a/web/assets/GraphView-BGt8GmeB.css b/web/assets/GraphView-BGt8GmeB.css deleted file mode 100644 index bae07e602507..000000000000 --- a/web/assets/GraphView-BGt8GmeB.css +++ /dev/null @@ -1,792 +0,0 @@ - -.editable-text[data-v-54da6fc9] { - display: inline; -} -.editable-text input[data-v-54da6fc9] { - width: 100%; - box-sizing: border-box; -} - -.group-title-editor.node-title-editor[data-v-fc3f26e3] { - z-index: 9999; - padding: 0.25rem; -} -[data-v-fc3f26e3] .editable-text { - width: 100%; - height: 100%; -} -[data-v-fc3f26e3] .editable-text input { - width: 100%; - height: 100%; - /* Override the default font size */ - font-size: inherit; -} - -.side-bar-button-icon { - font-size: var(--sidebar-icon-size) !important; -} -.side-bar-button-selected .side-bar-button-icon { - font-size: var(--sidebar-icon-size) !important; - font-weight: bold; -} - -.side-bar-button[data-v-caa3ee9c] { - width: var(--sidebar-width); - height: var(--sidebar-width); - border-radius: 0; -} -.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c], -.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover { - border-left: 4px solid var(--p-button-text-primary-color); -} -.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c], -.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover { - border-right: 4px solid var(--p-button-text-primary-color); -} - -:root { - --sidebar-width: 64px; - --sidebar-icon-size: 1.5rem; -} -:root .small-sidebar { - --sidebar-width: 40px; - --sidebar-icon-size: 1rem; -} - -.side-tool-bar-container[data-v-4da64512] { - display: flex; - flex-direction: column; - align-items: center; - - pointer-events: auto; - - width: var(--sidebar-width); - height: 100%; - - background-color: var(--comfy-menu-bg); - color: var(--fg-color); -} -.side-tool-bar-end[data-v-4da64512] { - align-self: flex-end; - margin-top: auto; -} -.sidebar-content-container[data-v-4da64512] { - height: 100%; - overflow-y: auto; -} - -.p-splitter-gutter { - pointer-events: auto; -} -.gutter-hidden { - display: none !important; -} - -.side-bar-panel[data-v-b9df3042] { - background-color: var(--bg-color); - pointer-events: auto; -} -.splitter-overlay[data-v-b9df3042] { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background-color: transparent; - pointer-events: none; - /* Set it the same as the ComfyUI menu */ - /* Note: Lite-graph DOM widgets have the same z-index as the node id, so - 999 should be sufficient to make sure splitter overlays on node's DOM - widgets */ - z-index: 999; - border: none; -} - -._content[data-v-e7b35fd9] { - - display: flex; - - flex-direction: column -} -._content[data-v-e7b35fd9] > :not([hidden]) ~ :not([hidden]) { - - --tw-space-y-reverse: 0; - - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) -} -._footer[data-v-e7b35fd9] { - - display: flex; - - flex-direction: column; - - align-items: flex-end; - - padding-top: 1rem -} - -[data-v-37f672ab] .highlight { - background-color: var(--p-primary-color); - color: var(--p-primary-contrast-color); - font-weight: bold; - border-radius: 0.25rem; - padding: 0rem 0.125rem; - margin: -0.125rem 0.125rem; -} - -.slot_row[data-v-ff07c900] { - padding: 2px; -} - -/* Original N-Sidebar styles */ -._sb_dot[data-v-ff07c900] { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: grey; -} -.node_header[data-v-ff07c900] { - line-height: 1; - padding: 8px 13px 7px; - margin-bottom: 5px; - font-size: 15px; - text-wrap: nowrap; - overflow: hidden; - display: flex; - align-items: center; -} -.headdot[data-v-ff07c900] { - width: 10px; - height: 10px; - float: inline-start; - margin-right: 8px; -} -.IMAGE[data-v-ff07c900] { - background-color: #64b5f6; -} -.VAE[data-v-ff07c900] { - background-color: #ff6e6e; -} -.LATENT[data-v-ff07c900] { - background-color: #ff9cf9; -} -.MASK[data-v-ff07c900] { - background-color: #81c784; -} -.CONDITIONING[data-v-ff07c900] { - background-color: #ffa931; -} -.CLIP[data-v-ff07c900] { - background-color: #ffd500; -} -.MODEL[data-v-ff07c900] { - background-color: #b39ddb; -} -.CONTROL_NET[data-v-ff07c900] { - background-color: #a5d6a7; -} -._sb_node_preview[data-v-ff07c900] { - background-color: var(--comfy-menu-bg); - font-family: 'Open Sans', sans-serif; - font-size: small; - color: var(--descrip-text); - border: 1px solid var(--descrip-text); - min-width: 300px; - width: -moz-min-content; - width: min-content; - height: -moz-fit-content; - height: fit-content; - z-index: 9999; - border-radius: 12px; - overflow: hidden; - font-size: 12px; - padding-bottom: 10px; -} -._sb_node_preview ._sb_description[data-v-ff07c900] { - margin: 10px; - padding: 6px; - background: var(--border-color); - border-radius: 5px; - font-style: italic; - font-weight: 500; - font-size: 0.9rem; - word-break: break-word; -} -._sb_table[data-v-ff07c900] { - display: grid; - - grid-column-gap: 10px; - /* Spazio tra le colonne */ - width: 100%; - /* Imposta la larghezza della tabella al 100% del contenitore */ -} -._sb_row[data-v-ff07c900] { - display: grid; - grid-template-columns: 10px 1fr 1fr 1fr 10px; - grid-column-gap: 10px; - align-items: center; - padding-left: 9px; - padding-right: 9px; -} -._sb_row_string[data-v-ff07c900] { - grid-template-columns: 10px 1fr 1fr 10fr 1fr; -} -._sb_col[data-v-ff07c900] { - border: 0px solid #000; - display: flex; - align-items: flex-end; - flex-direction: row-reverse; - flex-wrap: nowrap; - align-content: flex-start; - justify-content: flex-end; -} -._sb_inherit[data-v-ff07c900] { - display: inherit; -} -._long_field[data-v-ff07c900] { - background: var(--bg-color); - border: 2px solid var(--border-color); - margin: 5px 5px 0 5px; - border-radius: 10px; - line-height: 1.7; - text-wrap: nowrap; -} -._sb_arrow[data-v-ff07c900] { - color: var(--fg-color); -} -._sb_preview_badge[data-v-ff07c900] { - text-align: center; - background: var(--comfy-input-bg); - font-weight: bold; - color: var(--error-text); -} - -.comfy-vue-node-search-container[data-v-2d409367] { - display: flex; - width: 100%; - min-width: 26rem; - align-items: center; - justify-content: center; -} -.comfy-vue-node-search-container[data-v-2d409367] * { - pointer-events: auto; -} -.comfy-vue-node-preview-container[data-v-2d409367] { - position: absolute; - left: -350px; - top: 50px; -} -.comfy-vue-node-search-box[data-v-2d409367] { - z-index: 10; - flex-grow: 1; -} -._filter-button[data-v-2d409367] { - z-index: 10; -} -._dialog[data-v-2d409367] { - min-width: 26rem; -} - -.invisible-dialog-root { - width: 60%; - min-width: 24rem; - max-width: 48rem; - border: 0 !important; - background-color: transparent !important; - margin-top: 25vh; - margin-left: 400px; -} -@media all and (max-width: 768px) { -.invisible-dialog-root { - margin-left: 0px; -} -} -.node-search-box-dialog-mask { - align-items: flex-start !important; -} - -.node-tooltip[data-v-0a4402f9] { - background: var(--comfy-input-bg); - border-radius: 5px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); - color: var(--input-text); - font-family: sans-serif; - left: 0; - max-width: 30vw; - padding: 4px 8px; - position: absolute; - top: 0; - transform: translate(5px, calc(-100% - 5px)); - white-space: pre-wrap; - z-index: 99999; -} - -.p-buttongroup-vertical[data-v-ce8bd6ac] { - display: flex; - flex-direction: column; - border-radius: var(--p-button-border-radius); - overflow: hidden; - border: 1px solid var(--p-panel-border-color); -} -.p-buttongroup-vertical .p-button[data-v-ce8bd6ac] { - margin: 0; - border-radius: 0; -} - -.comfy-image-wrap[data-v-9bc23daf] { - display: contents; -} -.comfy-image-blur[data-v-9bc23daf] { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; -} -.comfy-image-main[data-v-9bc23daf] { - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; - -o-object-position: center; - object-position: center; - z-index: 1; -} -.contain .comfy-image-wrap[data-v-9bc23daf] { - position: relative; - width: 100%; - height: 100%; -} -.contain .comfy-image-main[data-v-9bc23daf] { - -o-object-fit: contain; - object-fit: contain; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - position: absolute; -} -.broken-image-placeholder[data-v-9bc23daf] { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - margin: 2rem; -} -.broken-image-placeholder i[data-v-9bc23daf] { - font-size: 3rem; - margin-bottom: 0.5rem; -} - -.result-container[data-v-d9c060ae] { - width: 100%; - height: 100%; - aspect-ratio: 1 / 1; - overflow: hidden; - position: relative; - display: flex; - justify-content: center; - align-items: center; -} -.image-preview-mask[data-v-d9c060ae] { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s ease; - z-index: 1; -} -.result-container:hover .image-preview-mask[data-v-d9c060ae] { - opacity: 1; -} - -.task-result-preview[data-v-d4c8a1fe] { - aspect-ratio: 1 / 1; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; -} -.task-result-preview i[data-v-d4c8a1fe], -.task-result-preview span[data-v-d4c8a1fe] { - font-size: 2rem; -} -.task-item[data-v-d4c8a1fe] { - display: flex; - flex-direction: column; - border-radius: 4px; - overflow: hidden; - position: relative; -} -.task-item-details[data-v-d4c8a1fe] { - position: absolute; - bottom: 0; - padding: 0.6rem; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - z-index: 1; -} -.task-node-link[data-v-d4c8a1fe] { - padding: 2px; -} - -/* In dark mode, transparent background color for tags is not ideal for tags that -are floating on top of images. */ -.tag-wrapper[data-v-d4c8a1fe] { - background-color: var(--p-primary-contrast-color); - border-radius: 6px; - display: inline-flex; -} -.node-name-tag[data-v-d4c8a1fe] { - word-break: break-all; -} -.status-tag-group[data-v-d4c8a1fe] { - display: flex; - flex-direction: column; -} -.progress-preview-img[data-v-d4c8a1fe] { - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; - -o-object-position: center; - object-position: center; -} - -/* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we -cannot use scoped style here. */ -img.galleria-image { - max-width: 100vw; - max-height: 100vh; - -o-object-fit: contain; - object-fit: contain; -} -.p-galleria-close-button { - /* Set z-index so the close button doesn't get hidden behind the image when image is large */ - z-index: 1; -} - -.comfy-vue-side-bar-container[data-v-1b0a8fe3] { - display: flex; - flex-direction: column; - height: 100%; - overflow: hidden; -} -.comfy-vue-side-bar-header[data-v-1b0a8fe3] { - flex-shrink: 0; - border-left: none; - border-right: none; - border-top: none; - border-radius: 0; - padding: 0.25rem 1rem; - min-height: 2.5rem; -} -.comfy-vue-side-bar-header-span[data-v-1b0a8fe3] { - font-size: small; -} -.comfy-vue-side-bar-body[data-v-1b0a8fe3] { - flex-grow: 1; - overflow: auto; - scrollbar-width: thin; - scrollbar-color: transparent transparent; -} -.comfy-vue-side-bar-body[data-v-1b0a8fe3]::-webkit-scrollbar { - width: 1px; -} -.comfy-vue-side-bar-body[data-v-1b0a8fe3]::-webkit-scrollbar-thumb { - background-color: transparent; -} - -.scroll-container[data-v-08fa89b1] { - height: 100%; - overflow-y: auto; -} -.queue-grid[data-v-08fa89b1] { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - padding: 0.5rem; - gap: 0.5rem; -} - -.tree-node[data-v-633e27ab] { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; -} -.leaf-count-badge[data-v-633e27ab] { - margin-left: 0.5rem; -} -.node-content[data-v-633e27ab] { - display: flex; - align-items: center; - flex-grow: 1; -} -.leaf-label[data-v-633e27ab] { - margin-left: 0.5rem; -} -[data-v-633e27ab] .editable-text span { - word-break: break-all; -} - -[data-v-bd7bae90] .tree-explorer-node-label { - width: 100%; - display: flex; - align-items: center; - margin-left: var(--p-tree-node-gap); - flex-grow: 1; -} - -/* - * The following styles are necessary to avoid layout shift when dragging nodes over folders. - * By setting the position to relative on the parent and using an absolutely positioned pseudo-element, - * we can create a visual indicator for the drop target without affecting the layout of other elements. - */ -[data-v-bd7bae90] .p-tree-node-content:has(.tree-folder) { - position: relative; -} -[data-v-bd7bae90] .p-tree-node-content:has(.tree-folder.can-drop)::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 1px solid var(--p-content-color); - pointer-events: none; -} - -.node-lib-node-container[data-v-90dfee08] { - height: 100%; - width: 100% -} - -.p-selectbutton .p-button[data-v-91077f2a] { - padding: 0.5rem; -} -.p-selectbutton .p-button .pi[data-v-91077f2a] { - font-size: 1.5rem; -} -.field[data-v-91077f2a] { - display: flex; - flex-direction: column; - gap: 0.5rem; -} -.color-picker-container[data-v-91077f2a] { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.node-lib-filter-popup { - margin-left: -13px; -} - -[data-v-f6a7371a] .comfy-vue-side-bar-body { - background: var(--p-tree-background); -} -[data-v-f6a7371a] .node-lib-bookmark-tree-explorer { - padding-bottom: 2px; -} -[data-v-f6a7371a] .p-divider { - margin: var(--comfy-tree-explorer-item-padding) 0px; -} - -.model_preview[data-v-32e6c4d9] { - background-color: var(--comfy-menu-bg); - font-family: 'Open Sans', sans-serif; - color: var(--descrip-text); - border: 1px solid var(--descrip-text); - min-width: 300px; - max-width: 500px; - width: -moz-fit-content; - width: fit-content; - height: -moz-fit-content; - height: fit-content; - z-index: 9999; - border-radius: 12px; - overflow: hidden; - font-size: 12px; - padding: 10px; -} -.model_preview_image[data-v-32e6c4d9] { - margin: auto; - width: -moz-fit-content; - width: fit-content; -} -.model_preview_image img[data-v-32e6c4d9] { - max-width: 100%; - max-height: 150px; - -o-object-fit: contain; - object-fit: contain; -} -.model_preview_title[data-v-32e6c4d9] { - font-weight: bold; - text-align: center; - font-size: 14px; -} -.model_preview_top_container[data-v-32e6c4d9] { - text-align: center; - line-height: 0.5; -} -.model_preview_filename[data-v-32e6c4d9], -.model_preview_author[data-v-32e6c4d9], -.model_preview_architecture[data-v-32e6c4d9] { - display: inline-block; - text-align: center; - margin: 5px; - font-size: 10px; -} -.model_preview_prefix[data-v-32e6c4d9] { - font-weight: bold; -} - -.model-lib-model-icon-container[data-v-70b69131] { - display: inline-block; - position: relative; - left: 0; - height: 1.5rem; - vertical-align: top; - width: 0px; -} -.model-lib-model-icon[data-v-70b69131] { - background-size: cover; - background-position: center; - display: inline-block; - position: relative; - left: -2.5rem; - height: 2rem; - width: 2rem; - vertical-align: top; -} - -.pi-fake-spacer { - height: 1px; - width: 16px; -} - -[data-v-74b01bce] .comfy-vue-side-bar-body { - background: var(--p-tree-background); -} - -[data-v-d2d58252] .comfy-vue-side-bar-body { - background: var(--p-tree-background); -} - -[data-v-84e785b8] .p-togglebutton::before { - display: none -} -[data-v-84e785b8] .p-togglebutton { - position: relative; - flex-shrink: 0; - border-radius: 0px; - background-color: transparent; - padding-left: 0.5rem; - padding-right: 0.5rem -} -[data-v-84e785b8] .p-togglebutton.p-togglebutton-checked { - border-bottom-width: 2px; - border-bottom-color: var(--p-button-text-primary-color) -} -[data-v-84e785b8] .p-togglebutton-checked .close-button,[data-v-84e785b8] .p-togglebutton:hover .close-button { - visibility: visible -} -.status-indicator[data-v-84e785b8] { - position: absolute; - font-weight: 700; - font-size: 1.5rem; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) -} -[data-v-84e785b8] .p-togglebutton:hover .status-indicator { - display: none -} -[data-v-84e785b8] .p-togglebutton .close-button { - visibility: hidden -} - -.top-menubar[data-v-2ec1b620] .p-menubar-item-link svg { - display: none; -} -[data-v-2ec1b620] .p-menubar-submenu.dropdown-direction-up { - top: auto; - bottom: 100%; - flex-direction: column-reverse; -} -.keybinding-tag[data-v-2ec1b620] { - background: var(--p-content-hover-background); - border-color: var(--p-content-border-color); - border-style: solid; -} - -[data-v-713442be] .p-inputtext { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.comfyui-queue-button[data-v-fcd3efcd] .p-splitbutton-dropdown { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.actionbar[data-v-bc6c78dd] { - pointer-events: all; - position: fixed; - z-index: 1000; -} -.actionbar.is-docked[data-v-bc6c78dd] { - position: static; - border-style: none; - background-color: transparent; - padding: 0px; -} -.actionbar.is-dragging[data-v-bc6c78dd] { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -[data-v-bc6c78dd] .p-panel-content { - padding: 0.25rem; -} -[data-v-bc6c78dd] .p-panel-header { - display: none; -} - -.comfyui-menu[data-v-b13fdc92] { - width: 100vw; - background: var(--comfy-menu-bg); - color: var(--fg-color); - font-family: Arial, Helvetica, sans-serif; - font-size: 0.8em; - box-sizing: border-box; - z-index: 1000; - order: 0; - grid-column: 1/-1; - max-height: 90vh; -} -.comfyui-menu.dropzone[data-v-b13fdc92] { - background: var(--p-highlight-background); -} -.comfyui-menu.dropzone-active[data-v-b13fdc92] { - background: var(--p-highlight-background-focus); -} -.comfyui-logo[data-v-b13fdc92] { - font-size: 1.2em; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - cursor: default; -} diff --git a/web/assets/GraphView-Bx1-rDWO.css b/web/assets/GraphView-Bx1-rDWO.css new file mode 100644 index 000000000000..935216674dbd --- /dev/null +++ b/web/assets/GraphView-Bx1-rDWO.css @@ -0,0 +1,278 @@ + +.group-title-editor.node-title-editor[data-v-fc3f26e3] { + z-index: 9999; + padding: 0.25rem; +} +[data-v-fc3f26e3] .editable-text { + width: 100%; + height: 100%; +} +[data-v-fc3f26e3] .editable-text input { + width: 100%; + height: 100%; + /* Override the default font size */ + font-size: inherit; +} + +.side-bar-button-icon { + font-size: var(--sidebar-icon-size) !important; +} +.side-bar-button-selected .side-bar-button-icon { + font-size: var(--sidebar-icon-size) !important; + font-weight: bold; +} + +.side-bar-button[data-v-caa3ee9c] { + width: var(--sidebar-width); + height: var(--sidebar-width); + border-radius: 0; +} +.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c], +.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover { + border-left: 4px solid var(--p-button-text-primary-color); +} +.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c], +.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover { + border-right: 4px solid var(--p-button-text-primary-color); +} + +:root { + --sidebar-width: 64px; + --sidebar-icon-size: 1.5rem; +} +:root .small-sidebar { + --sidebar-width: 40px; + --sidebar-icon-size: 1rem; +} + +.side-tool-bar-container[data-v-b6bfc188] { + display: flex; + flex-direction: column; + align-items: center; + + pointer-events: auto; + + width: var(--sidebar-width); + height: 100%; + + background-color: var(--comfy-menu-bg); + color: var(--fg-color); +} +.side-tool-bar-end[data-v-b6bfc188] { + align-self: flex-end; + margin-top: auto; +} + +.p-splitter-gutter { + pointer-events: auto; +} +.gutter-hidden { + display: none !important; +} + +.side-bar-panel[data-v-b9df3042] { + background-color: var(--bg-color); + pointer-events: auto; +} +.splitter-overlay[data-v-b9df3042] { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-color: transparent; + pointer-events: none; + /* Set it the same as the ComfyUI menu */ + /* Note: Lite-graph DOM widgets have the same z-index as the node id, so + 999 should be sufficient to make sure splitter overlays on node's DOM + widgets */ + z-index: 999; + border: none; +} + +[data-v-37f672ab] .highlight { + background-color: var(--p-primary-color); + color: var(--p-primary-contrast-color); + font-weight: bold; + border-radius: 0.25rem; + padding: 0rem 0.125rem; + margin: -0.125rem 0.125rem; +} + +.comfy-vue-node-search-container[data-v-2d409367] { + display: flex; + width: 100%; + min-width: 26rem; + align-items: center; + justify-content: center; +} +.comfy-vue-node-search-container[data-v-2d409367] * { + pointer-events: auto; +} +.comfy-vue-node-preview-container[data-v-2d409367] { + position: absolute; + left: -350px; + top: 50px; +} +.comfy-vue-node-search-box[data-v-2d409367] { + z-index: 10; + flex-grow: 1; +} +._filter-button[data-v-2d409367] { + z-index: 10; +} +._dialog[data-v-2d409367] { + min-width: 26rem; +} + +.invisible-dialog-root { + width: 60%; + min-width: 24rem; + max-width: 48rem; + border: 0 !important; + background-color: transparent !important; + margin-top: 25vh; + margin-left: 400px; +} +@media all and (max-width: 768px) { +.invisible-dialog-root { + margin-left: 0px; +} +} +.node-search-box-dialog-mask { + align-items: flex-start !important; +} + +.node-tooltip[data-v-79ec8c53] { + background: var(--comfy-input-bg); + border-radius: 5px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); + color: var(--input-text); + font-family: sans-serif; + left: 0; + max-width: 30vw; + padding: 4px 8px; + position: absolute; + top: 0; + transform: translate(5px, calc(-100% - 5px)); + white-space: pre-wrap; + z-index: 99999; +} + +.p-buttongroup-vertical[data-v-444d3768] { + display: flex; + flex-direction: column; + border-radius: var(--p-button-border-radius); + overflow: hidden; + border: 1px solid var(--p-panel-border-color); +} +.p-buttongroup-vertical .p-button[data-v-444d3768] { + margin: 0; + border-radius: 0; +} + +[data-v-84e785b8] .p-togglebutton::before { + display: none +} +[data-v-84e785b8] .p-togglebutton { + position: relative; + flex-shrink: 0; + border-radius: 0px; + background-color: transparent; + padding-left: 0.5rem; + padding-right: 0.5rem +} +[data-v-84e785b8] .p-togglebutton.p-togglebutton-checked { + border-bottom-width: 2px; + border-bottom-color: var(--p-button-text-primary-color) +} +[data-v-84e785b8] .p-togglebutton-checked .close-button,[data-v-84e785b8] .p-togglebutton:hover .close-button { + visibility: visible +} +.status-indicator[data-v-84e785b8] { + position: absolute; + font-weight: 700; + font-size: 1.5rem; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) +} +[data-v-84e785b8] .p-togglebutton:hover .status-indicator { + display: none +} +[data-v-84e785b8] .p-togglebutton .close-button { + visibility: hidden +} + +.top-menubar[data-v-9646ca0a] .p-menubar-item-link svg { + display: none; +} +[data-v-9646ca0a] .p-menubar-submenu.dropdown-direction-up { + top: auto; + bottom: 100%; + flex-direction: column-reverse; +} +.keybinding-tag[data-v-9646ca0a] { + background: var(--p-content-hover-background); + border-color: var(--p-content-border-color); + border-style: solid; +} + +[data-v-713442be] .p-inputtext { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.comfyui-queue-button[data-v-2b80bf74] .p-splitbutton-dropdown { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.actionbar[data-v-2e54db00] { + pointer-events: all; + position: fixed; + z-index: 1000; +} +.actionbar.is-docked[data-v-2e54db00] { + position: static; + border-style: none; + background-color: transparent; + padding: 0px; +} +.actionbar.is-dragging[data-v-2e54db00] { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +[data-v-2e54db00] .p-panel-content { + padding: 0.25rem; +} +[data-v-2e54db00] .p-panel-header { + display: none; +} + +.comfyui-menu[data-v-b13fdc92] { + width: 100vw; + background: var(--comfy-menu-bg); + color: var(--fg-color); + font-family: Arial, Helvetica, sans-serif; + font-size: 0.8em; + box-sizing: border-box; + z-index: 1000; + order: 0; + grid-column: 1/-1; + max-height: 90vh; +} +.comfyui-menu.dropzone[data-v-b13fdc92] { + background: var(--p-highlight-background); +} +.comfyui-menu.dropzone-active[data-v-b13fdc92] { + background: var(--p-highlight-background-focus); +} +.comfyui-logo[data-v-b13fdc92] { + font-size: 1.2em; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: default; +} diff --git a/web/assets/GraphView-CVV2XJjS.js b/web/assets/GraphView-CVV2XJjS.js deleted file mode 100644 index 1d43b2f6a0bd..000000000000 --- a/web/assets/GraphView-CVV2XJjS.js +++ /dev/null @@ -1,17465 +0,0 @@ -var __defProp = Object.defineProperty; -var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); -import { d as defineComponent, r as ref, w as watch, n as nextTick, o as openBlock, c as createElementBlock, t as toDisplayString, a as withDirectives, b as createBlock, e as withKeys, f as withModifiers, u as unref, s as script$m, p as pushScopeId, g as popScopeId, _ as _export_sfc, h as useSettingStore, i as useTitleEditorStore, j as useCanvasStore, L as LGraphGroup, k as app, l as LGraphNode, m as onMounted, q as onUnmounted, v as createVNode, x as normalizeStyle, y as createCommentVNode, z as LiteGraph, B as BaseStyle, A as script$n, C as resolveComponent, D as mergeProps, E as renderSlot, F as computed, G as resolveDirective, H as withCtx, I as createBaseVNode, J as normalizeClass, K as script$o, M as useDialogStore, S as SettingDialogHeader, N as SettingDialogContent, O as useWorkspaceStore, P as onBeforeUnmount, Q as Fragment, R as renderList, T as Teleport, U as resolveDynamicComponent, V as script$p, W as getWidth, X as getHeight, Y as getOuterWidth, Z as getOuterHeight, $ as getVNodeProp, a0 as isArray, a1 as vShow, a2 as isNotEmpty, a3 as UniqueComponentId, a4 as ZIndex, a5 as resolveFieldData, a6 as focus, a7 as OverlayEventBus, a8 as isEmpty, a9 as addStyle, aa as relativePosition, ab as absolutePosition, ac as ConnectedOverlayScrollHandler, ad as isTouchDevice, ae as equals, af as findLastIndex, ag as findSingle, ah as script$q, ai as script$r, aj as script$s, ak as script$t, al as script$u, am as Ripple, an as Transition, ao as createSlots, ap as createTextVNode, aq as useNodeDefStore, ar as script$v, as as defineStore, at as createDummyFolderNodeDef, au as _, av as buildNodeDefTree, aw as useNodeFrequencyStore, ax as highlightQuery, ay as script$w, az as formatNumberWithSuffix, aA as NodeSourceType, aB as ComfyNodeDefImpl, aC as useI18n, aD as script$x, aE as SearchFilterChip, aF as watchEffect, aG as toRaw, aH as LinkReleaseTriggerAction, aI as commonjsGlobal, aJ as getDefaultExportFromCjs, aK as markRaw, aL as useCommandStore, aM as LGraph, aN as LLink, aO as DragAndScale, aP as LGraphCanvas, aQ as ContextMenu, aR as LGraphBadge, aS as ComfyModelDef, aT as useKeybindingStore, aU as ConfirmationEventBus, aV as getOffset, aW as $dt, aX as addClass, aY as FocusTrap, aZ as resolve, a_ as nestedPosition, a$ as script$y, b0 as isPrintableCharacter, b1 as getHiddenElementOuterWidth, b2 as getHiddenElementOuterHeight, b3 as getViewport, b4 as api, b5 as TaskItemDisplayStatus, b6 as script$z, b7 as find, b8 as getAttribute, b9 as script$A, ba as script$B, bb as removeClass, bc as setAttribute, bd as localeComparator, be as sort, bf as script$C, bg as unblockBodyScroll, bh as blockBodyScroll, bi as useConfirm, bj as useToast, bk as useQueueStore, bl as useInfiniteScroll, bm as useResizeObserver, bn as script$D, bo as NoResultsPlaceholder, bp as isClient, bq as script$E, br as script$F, bs as script$G, bt as script$H, bu as script$I, bv as script$J, bw as inject, bx as useErrorHandling, by as mergeModels, bz as useModel, bA as provide, bB as script$K, bC as findNodeByKey, bD as sortedTree, bE as SearchBox, bF as useModelStore, bG as buildTree, bH as toRef, bI as script$L, bJ as script$M, bK as script$N, bL as normalizeProps, bM as ToastEventBus, bN as TransitionGroup, bO as useToastStore, bP as useExecutionStore, bQ as useWorkflowStore, bR as useTitle, bS as useWorkflowBookmarkStore, bT as script$O, bU as script$P, bV as guardReactiveProps, bW as useMenuItemStore, bX as script$Q, bY as useQueueSettingsStore, bZ as storeToRefs, b_ as isRef, b$ as script$R, c0 as useQueuePendingTaskCountStore, c1 as useLocalStorage, c2 as useDraggable, c3 as watchDebounced, c4 as useEventListener, c5 as useElementBounding, c6 as lodashExports, c7 as useEventBus, c8 as i18n } from "./index-DGAbdBYF.js"; -import { g as getColorPalette, d as defaultColorPalette } from "./colorPalette-D5oi2-2V.js"; -const _withScopeId$l = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-54da6fc9"), n = n(), popScopeId(), n), "_withScopeId$l"); -const _hoisted_1$F = { class: "editable-text" }; -const _hoisted_2$v = { key: 0 }; -const _sfc_main$I = /* @__PURE__ */ defineComponent({ - __name: "EditableText", - props: { - modelValue: {}, - isEditing: { type: Boolean, default: false } - }, - emits: ["update:modelValue", "edit"], - setup(__props, { emit: __emit }) { - const props = __props; - const emit = __emit; - const inputValue2 = ref(props.modelValue); - const isEditingFinished = ref(false); - const inputRef = ref(null); - const finishEditing = /* @__PURE__ */ __name(() => { - if (isEditingFinished.value) { - return; - } - isEditingFinished.value = true; - emit("edit", inputValue2.value); - }, "finishEditing"); - watch( - () => props.isEditing, - (newVal) => { - if (newVal) { - inputValue2.value = props.modelValue; - isEditingFinished.value = false; - nextTick(() => { - if (!inputRef.value) return; - const fileName = inputValue2.value.includes(".") ? inputValue2.value.split(".").slice(0, -1).join(".") : inputValue2.value; - const start2 = 0; - const end = fileName.length; - const inputElement = inputRef.value.$el; - inputElement.setSelectionRange?.(start2, end); - }); - } - }, - { immediate: true } - ); - const vFocus = { - mounted: /* @__PURE__ */ __name((el) => el.focus(), "mounted") - }; - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$F, [ - !props.isEditing ? (openBlock(), createElementBlock("span", _hoisted_2$v, toDisplayString(_ctx.modelValue), 1)) : withDirectives((openBlock(), createBlock(unref(script$m), { - key: 1, - type: "text", - size: "small", - fluid: "", - modelValue: inputValue2.value, - "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue2.value = $event), - ref_key: "inputRef", - ref: inputRef, - onKeyup: withKeys(finishEditing, ["enter"]), - onClick: _cache[1] || (_cache[1] = withModifiers(() => { - }, ["stop"])), - pt: { - root: { - onBlur: finishEditing - } - } - }, null, 8, ["modelValue", "pt"])), [ - [vFocus] - ]) - ]); - }; - } -}); -const EditableText = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-54da6fc9"]]); -const _sfc_main$H = /* @__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 node2 = target; - const [x, y] = node2.getBounding(); - const canvasWidth = node2.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(node2) { - const originalCallback = node2.onNodeTitleDblClick; - node2.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$H, [["__scopeId", "data-v-fc3f26e3"]]); -var theme$h = /* @__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$i = { - root: "p-overlaybadge" -}; -var OverlayBadgeStyle = BaseStyle.extend({ - name: "overlaybadge", - theme: theme$h, - classes: classes$i -}); -var script$1$i = { - name: "OverlayBadge", - "extends": script$n, - style: OverlayBadgeStyle, - provide: /* @__PURE__ */ __name(function provide2() { - return { - $pcOverlayBadge: this, - $parentInstance: this - }; - }, "provide") -}; -var script$l = { - name: "OverlayBadge", - "extends": script$1$i, - inheritAttrs: false, - components: { - Badge: script$n - } -}; -function render$m(_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$m, "render$m"); -script$l.render = render$m; -const _sfc_main$G = /* @__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$o), { - 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$l), { - 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$G, [["__scopeId", "data-v-caa3ee9c"]]); -const _sfc_main$F = /* @__PURE__ */ defineComponent({ - __name: "SidebarThemeToggleIcon", - setup(__props) { - const previousDarkTheme = ref("dark"); - const currentTheme = computed(() => useSettingStore().get("Comfy.ColorPalette")); - const isDarkMode = computed(() => currentTheme.value !== "light"); - const icon = computed(() => isDarkMode.value ? "pi pi-moon" : "pi pi-sun"); - const toggleTheme = /* @__PURE__ */ __name(() => { - if (isDarkMode.value) { - previousDarkTheme.value = currentTheme.value; - useSettingStore().set("Comfy.ColorPalette", "light"); - } else { - useSettingStore().set("Comfy.ColorPalette", previousDarkTheme.value); - } - }, "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$E = /* @__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$k = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-4da64512"), n = n(), popScopeId(), n), "_withScopeId$k"); -const _hoisted_1$E = { class: "side-tool-bar-end" }; -const _hoisted_2$u = { - key: 0, - class: "sidebar-content-container" -}; -const _sfc_main$D = /* @__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((item4) => { - workspaceStore.sidebarTab.toggleSidebarTab(item4.id); - }, "onTabClick"); - onBeforeUnmount(() => { - tabs.value.forEach((tab) => { - if (tab.type === "custom" && tab.destroy) { - tab.destroy(); - } - }); - }); - 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, - 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$E, [ - createVNode(_sfc_main$F), - createVNode(_sfc_main$E) - ]) - ], 2) - ], 8, ["to"])), - selectedTab.value ? (openBlock(), createElementBlock("div", _hoisted_2$u, [ - 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$D, [["__scopeId", "data-v-4da64512"]]); -var theme$g = /* @__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$h = { - 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$g, - classes: classes$h, - inlineStyles: inlineStyles$4 -}); -var script$1$h = { - name: "BaseSplitter", - "extends": script$p, - 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$7(r) { - return _arrayWithoutHoles$7(r) || _iterableToArray$7(r) || _unsupportedIterableToArray$9(r) || _nonIterableSpread$7(); -} -__name(_toConsumableArray$7, "_toConsumableArray$7"); -function _nonIterableSpread$7() { - 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$7, "_nonIterableSpread$7"); -function _unsupportedIterableToArray$9(r, a) { - if (r) { - if ("string" == typeof r) return _arrayLikeToArray$9(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$9(r, a) : void 0; - } -} -__name(_unsupportedIterableToArray$9, "_unsupportedIterableToArray$9"); -function _iterableToArray$7(r) { - if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); -} -__name(_iterableToArray$7, "_iterableToArray$7"); -function _arrayWithoutHoles$7(r) { - if (Array.isArray(r)) return _arrayLikeToArray$9(r); -} -__name(_arrayWithoutHoles$7, "_arrayWithoutHoles$7"); -function _arrayLikeToArray$9(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$9, "_arrayLikeToArray$9"); -var script$k = { - name: "Splitter", - "extends": script$1$h, - 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$7(this.$el.children).filter(function(child) { - return child.getAttribute("data-pc-name") === "splitterpanel"; - }); - var _panelSizes = []; - this.panels.map(function(panel2, i) { - var panelInitialSize = panel2.props && panel2.props.size ? panel2.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, index2, 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 = index2; - this.$emit("resizestart", { - originalEvent: event, - sizes: this.panelSizes - }); - this.$refs.gutter[index2].setAttribute("data-p-gutter-resizing", true); - this.$el.setAttribute("data-p-resizing", true); - }, "onResizeStart"), - onResize: /* @__PURE__ */ __name(function onResize(event, step2, isKeyDown) { - var newPos, newPrevPanelSize, newNextPanelSize; - if (isKeyDown) { - if (this.horizontal) { - newPrevPanelSize = 100 * (this.prevPanelSize + step2) / this.size; - newNextPanelSize = 100 * (this.nextPanelSize - step2) / this.size; - } else { - newPrevPanelSize = 100 * (this.prevPanelSize - step2) / this.size; - newNextPanelSize = 100 * (this.nextPanelSize + step2) / 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, index2, step2) { - this.onResizeStart(event, index2, true); - this.onResize(event, step2, true); - }, "repeat"), - setTimer: /* @__PURE__ */ __name(function setTimer(event, index2, step2) { - var _this2 = this; - if (!this.timer) { - this.timer = setInterval(function() { - _this2.repeat(event, index2, step2); - }, 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, index2) { - switch (event.code) { - case "ArrowLeft": { - if (this.layout === "horizontal") { - this.setTimer(event, index2, this.step * -1); - } - event.preventDefault(); - break; - } - case "ArrowRight": { - if (this.layout === "horizontal") { - this.setTimer(event, index2, this.step); - } - event.preventDefault(); - break; - } - case "ArrowDown": { - if (this.layout === "vertical") { - this.setTimer(event, index2, this.step * -1); - } - event.preventDefault(); - break; - } - case "ArrowUp": { - if (this.layout === "vertical") { - this.setTimer(event, index2, this.step); - } - event.preventDefault(); - break; - } - } - }, "onGutterKeyDown"), - onGutterMouseDown: /* @__PURE__ */ __name(function onGutterMouseDown(event, index2) { - this.onResizeStart(event, index2); - this.bindMouseListeners(); - }, "onGutterMouseDown"), - onGutterTouchStart: /* @__PURE__ */ __name(function onGutterTouchStart(event, index2) { - this.onResizeStart(event, index2); - 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$7(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$D = ["onMousedown", "onTouchstart", "onTouchmove", "onTouchend"]; -var _hoisted_2$t = ["aria-orientation", "aria-valuenow", "onKeydown"]; -function render$l(_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(panel2, i) { - return openBlock(), createElementBlock(Fragment, { - key: i - }, [(openBlock(), createBlock(resolveDynamicComponent(panel2), { - 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$t)], 16, _hoisted_1$D)) : createCommentVNode("", true)], 64); - }), 128))], 16); -} -__name(render$l, "render$l"); -script$k.render = render$l; -var classes$g = { - 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$g -}); -var script$1$g = { - name: "BaseSplitterPanel", - "extends": script$p, - 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$j = { - name: "SplitterPanel", - "extends": script$1$g, - 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$k(_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$k, "render$k"); -script$j.render = render$k; -const _sfc_main$C = /* @__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$k), { - class: "splitter-overlay", - "pt:gutter": gutterClass.value - }, { - default: withCtx(() => [ - sidebarLocation.value === "left" ? withDirectives((openBlock(), createBlock(unref(script$j), { - 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$j), { - 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$j), { - 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$C, [["__scopeId", "data-v-b9df3042"]]); -var theme$f = /* @__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: ").concat(dt("autocomplete.option.border.radius"), ";\n}\n\n.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {\n background: ").concat(dt("autocomplete.option.focus.background"), ";\n color: ").concat(dt("autocomplete.option.focus.color"), ";\n}\n\n.p-autocomplete-option-selected {\n background: ").concat(dt("autocomplete.option.selected.background"), ";\n color: ").concat(dt("autocomplete.option.selected.color"), ";\n}\n\n.p-autocomplete-option-selected.p-focus {\n background: ").concat(dt("autocomplete.option.selected.focus.background"), ";\n color: ").concat(dt("autocomplete.option.selected.focus.color"), ";\n}\n\n.p-autocomplete-option-group {\n margin: 0;\n padding: ").concat(dt("autocomplete.option.group.padding"), ";\n color: ").concat(dt("autocomplete.option.group.color"), ";\n background: ").concat(dt("autocomplete.option.group.background"), ";\n font-weight: ").concat(dt("autocomplete.option.group.font.weight"), ";\n}\n\n.p-autocomplete-input-multiple {\n margin: 0;\n list-style-type: none;\n cursor: text;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n padding: calc(").concat(dt("autocomplete.padding.y"), " / 2) ").concat(dt("autocomplete.padding.x"), ";\n gap: calc(").concat(dt("autocomplete.padding.y"), " / 2);\n color: ").concat(dt("autocomplete.color"), ";\n background: ").concat(dt("autocomplete.background"), ";\n border: 1px solid ").concat(dt("autocomplete.border.color"), ";\n border-radius: ").concat(dt("autocomplete.border.radius"), ";\n width: 100%;\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 box-shadow: ").concat(dt("autocomplete.shadow"), ";\n}\n\n.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {\n border-color: ").concat(dt("autocomplete.hover.border.color"), ";\n}\n\n.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {\n border-color: ").concat(dt("autocomplete.focus.border.color"), ";\n box-shadow: ").concat(dt("autocomplete.focus.ring.shadow"), ";\n outline: ").concat(dt("autocomplete.focus.ring.width"), " ").concat(dt("autocomplete.focus.ring.style"), " ").concat(dt("autocomplete.focus.ring.color"), ";\n outline-offset: ").concat(dt("autocomplete.focus.ring.offset"), ";\n}\n\n.p-autocomplete.p-invalid .p-autocomplete-input-multiple {\n border-color: ").concat(dt("autocomplete.invalid.border.color"), ";\n}\n\n.p-variant-filled.p-autocomplete-input-multiple {\n background: ").concat(dt("autocomplete.filled.background"), ";\n}\n\n.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple {\n background: ").concat(dt("autocomplete.filled.focus.background"), ";\n}\n\n.p-autocomplete.p-disabled .p-autocomplete-input-multiple {\n opacity: 1;\n background: ").concat(dt("autocomplete.disabled.background"), ";\n color: ").concat(dt("autocomplete.disabled.color"), ";\n}\n\n.p-autocomplete-chip.p-chip {\n padding-top: calc(").concat(dt("autocomplete.padding.y"), " / 2);\n padding-bottom: calc(").concat(dt("autocomplete.padding.y"), " / 2);\n border-radius: ").concat(dt("autocomplete.chip.border.radius"), ";\n}\n\n.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {\n padding-left: calc(").concat(dt("autocomplete.padding.y"), " / 2);\n padding-right: calc(").concat(dt("autocomplete.padding.y"), " / 2);\n}\n\n.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {\n background: ").concat(dt("inputchips.chip.focus.background"), ";\n color: ").concat(dt("inputchips.chip.focus.color"), ";\n}\n\n.p-autocomplete-input-chip {\n flex: 1 1 auto;\n display: inline-flex;\n padding-top: calc(").concat(dt("autocomplete.padding.y"), " / 2);\n padding-bottom: calc(").concat(dt("autocomplete.padding.y"), " / 2);\n}\n\n.p-autocomplete-input-chip input {\n border: 0 none;\n outline: 0 none;\n background: transparent;\n margin: 0;\n padding: 0;\n box-shadow: none;\n border-radius: 0;\n width: 100%;\n font-family: inherit;\n font-feature-settings: inherit;\n font-size: 1rem;\n color: inherit;\n}\n\n.p-autocomplete-input-chip input::placeholder {\n color: ").concat(dt("autocomplete.placeholder.color"), ";\n}\n\n.p-autocomplete-empty-message {\n padding: ").concat(dt("autocomplete.empty.message.padding"), ";\n}\n\n.p-autocomplete-fluid {\n display: flex;\n}\n\n.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {\n width: 1%;\n}\n"); -}, "theme"); -var inlineStyles$3 = { - root: { - position: "relative" - } -}; -var classes$f = { - 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$f, - classes: classes$f, - inlineStyles: inlineStyles$3 -}); -var script$1$f = { - name: "BaseAutoComplete", - "extends": script$p, - 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$3(o) { - "@babel/helpers - typeof"; - return _typeof$1$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$1$3(o); -} -__name(_typeof$1$3, "_typeof$1$3"); -function _toConsumableArray$6(r) { - return _arrayWithoutHoles$6(r) || _iterableToArray$6(r) || _unsupportedIterableToArray$8(r) || _nonIterableSpread$6(); -} -__name(_toConsumableArray$6, "_toConsumableArray$6"); -function _nonIterableSpread$6() { - 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$6, "_nonIterableSpread$6"); -function _unsupportedIterableToArray$8(r, a) { - if (r) { - if ("string" == typeof r) return _arrayLikeToArray$8(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$8(r, a) : void 0; - } -} -__name(_unsupportedIterableToArray$8, "_unsupportedIterableToArray$8"); -function _iterableToArray$6(r) { - if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); -} -__name(_iterableToArray$6, "_iterableToArray$6"); -function _arrayWithoutHoles$6(r) { - if (Array.isArray(r)) return _arrayLikeToArray$8(r); -} -__name(_arrayWithoutHoles$6, "_arrayWithoutHoles$6"); -function _arrayLikeToArray$8(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$8, "_arrayLikeToArray$8"); -var script$i = { - name: "AutoComplete", - "extends": script$1$f, - 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(index2, fn) { - return this.virtualScrollerDisabled ? index2 : fn && fn(index2)["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, index2) { - return (this.dataKey ? resolveFieldData(option2, this.dataKey) : this.getOptionLabel(option2)) + "_" + index2; - }, "getOptionRenderKey"), - getPTOptions: /* @__PURE__ */ __name(function getPTOptions3(option2, itemOptions, index2, key) { - return this.ptm(key, { - context: { - selected: this.isSelected(option2), - focused: this.focusedOptionIndex === this.getOptionIndex(index2, 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(index2) { - var _this = this; - return (this.optionGroupLabel ? index2 - this.visibleOptions.slice(0, index2).filter(function(option2) { - return _this.isOptionGroup(option2); - }).length : index2) + 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$6(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, index2) { - if (this.focusOnHover) { - this.changeFocusedOptionIndex(event, index2); - } - }, "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$6(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(index2) { - var _this11 = this; - var matchedOptionIndex = index2 < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index2 + 1).findIndex(function(option2) { - return _this11.isValidOption(option2); - }) : -1; - return matchedOptionIndex > -1 ? matchedOptionIndex + index2 + 1 : index2; - }, "findNextOptionIndex"), - findPrevOptionIndex: /* @__PURE__ */ __name(function findPrevOptionIndex(index2) { - var _this12 = this; - var matchedOptionIndex = index2 > 0 ? findLastIndex(this.visibleOptions.slice(0, index2), function(option2) { - return _this12.isValidOption(option2); - }) : -1; - return matchedOptionIndex > -1 ? matchedOptionIndex : index2; - }, "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, index2) { - var _this14 = this; - var removedOption = this.modelValue[index2]; - var value = this.modelValue.filter(function(_2, i) { - return i !== index2; - }).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, index2) { - if (this.focusedOptionIndex !== index2) { - this.focusedOptionIndex = index2; - this.scrollInView(); - if (this.selectOnFocus) { - this.onOptionSelect(event, this.visibleOptions[index2], false); - } - } - }, "changeFocusedOptionIndex"), - scrollInView: /* @__PURE__ */ __name(function scrollInView() { - var _this15 = this; - var index2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : -1; - this.$nextTick(function() { - var id = index2 !== -1 ? "".concat(_this15.id, "_").concat(index2) : _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(index2 !== -1 ? index2 : _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, index2) { - result.push({ - optionGroup: option2, - group: true, - index: index2 - }); - 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$3(this.modelValue) === "object") { - var label3 = this.getOptionLabel(this.modelValue); - return label3 != null ? label3 : 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$m, - VirtualScroller: script$q, - Portal: script$r, - ChevronDownIcon: script$s, - SpinnerIcon: script$t, - Chip: script$u - }, - directives: { - ripple: Ripple - } -}; -function _typeof$7(o) { - "@babel/helpers - typeof"; - return _typeof$7 = "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$7(o); -} -__name(_typeof$7, "_typeof$7"); -function ownKeys$8(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$8, "ownKeys$8"); -function _objectSpread$8(e) { - for (var r = 1; r < arguments.length; r++) { - var t = null != arguments[r] ? arguments[r] : {}; - r % 2 ? ownKeys$8(Object(t), true).forEach(function(r2) { - _defineProperty$7(e, r2, t[r2]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function(r2) { - Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2)); - }); - } - return e; -} -__name(_objectSpread$8, "_objectSpread$8"); -function _defineProperty$7(e, r, t) { - return (r = _toPropertyKey$6(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; -} -__name(_defineProperty$7, "_defineProperty$7"); -function _toPropertyKey$6(t) { - var i = _toPrimitive$6(t, "string"); - return "symbol" == _typeof$7(i) ? i : i + ""; -} -__name(_toPropertyKey$6, "_toPropertyKey$6"); -function _toPrimitive$6(t, r) { - if ("object" != _typeof$7(t) || !t) return t; - var e = t[Symbol.toPrimitive]; - if (void 0 !== e) { - var i = e.call(t, r || "default"); - if ("object" != _typeof$7(i)) return i; - throw new TypeError("@@toPrimitive must return a primitive value."); - } - return ("string" === r ? String : Number)(t); -} -__name(_toPrimitive$6, "_toPrimitive$6"); -var _hoisted_1$C = ["aria-activedescendant"]; -var _hoisted_2$s = ["id", "aria-label", "aria-setsize", "aria-posinset"]; -var _hoisted_3$l = ["id", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"]; -var _hoisted_4$e = ["disabled", "aria-expanded", "aria-controls"]; -var _hoisted_5$a = ["id"]; -var _hoisted_6$8 = ["id", "aria-label"]; -var _hoisted_7$5 = ["id"]; -var _hoisted_8$4 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove", "data-p-selected", "data-p-focus", "data-p-disabled"]; -function render$j(_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$s); - }), 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$l)], 16)], 16, _hoisted_1$C)) : 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$e)) : 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$8(_objectSpread$8(_objectSpread$8({}, _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$5)) : 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 onClick2($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$4)), [[_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$8)]; - }), - _: 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$a)) : createCommentVNode("", true)]; - }), - _: 3 - }, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])]; - }), - _: 3 - }, 8, ["appendTo"])], 16); -} -__name(render$j, "render$j"); -script$i.render = render$j; -const _sfc_main$B = { - name: "AutoCompletePlus", - extends: script$i, - emits: ["focused-option-changed"], - mounted() { - if (typeof script$i.mounted === "function") { - script$i.mounted.call(this); - } - this.$watch( - () => this.focusedOptionIndex, - (newVal, oldVal) => { - this.$emit("focused-option-changed", newVal); - } - ); - } -}; -var theme$e = /* @__PURE__ */ __name(function theme4(_ref) { - var dt = _ref.dt; - return "\n.p-togglebutton {\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 color: ".concat(dt("togglebutton.color"), ";\n background: ").concat(dt("togglebutton.background"), ";\n border: 1px solid ").concat(dt("togglebutton.border.color"), ";\n padding: ").concat(dt("togglebutton.padding"), ";\n font-size: 1rem;\n font-family: inherit;\n font-feature-settings: inherit;\n transition: background ").concat(dt("togglebutton.transition.duration"), ", color ").concat(dt("togglebutton.transition.duration"), ", border-color ").concat(dt("togglebutton.transition.duration"), ",\n outline-color ").concat(dt("togglebutton.transition.duration"), ", box-shadow ").concat(dt("togglebutton.transition.duration"), ";\n border-radius: ").concat(dt("togglebutton.border.radius"), ";\n outline-color: transparent;\n font-weight: ").concat(dt("togglebutton.font.weight"), ";\n}\n\n.p-togglebutton-content {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ").concat(dt("togglebutton.gap"), ';\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n position: relative;\n transition: none;\n}\n\n.p-togglebutton::before {\n content: "";\n background: transparent;\n transition: background ').concat(dt("togglebutton.transition.duration"), ", color ").concat(dt("togglebutton.transition.duration"), ", border-color ").concat(dt("togglebutton.transition.duration"), ",\n outline-color ").concat(dt("togglebutton.transition.duration"), ", box-shadow ").concat(dt("togglebutton.transition.duration"), ";\n position: absolute;\n left: ").concat(dt("togglebutton.content.left"), ";\n top: ").concat(dt("togglebutton.content.top"), ";\n width: calc(100% - calc(2 * ").concat(dt("togglebutton.content.left"), "));\n height: calc(100% - calc(2 * ").concat(dt("togglebutton.content.top"), "));\n border-radius: ").concat(dt("togglebutton.border.radius"), ";\n}\n\n.p-togglebutton.p-togglebutton-checked::before {\n background: ").concat(dt("togglebutton.content.checked.background"), ";\n box-shadow: ").concat(dt("togglebutton.content.checked.shadow"), ";\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n background: ").concat(dt("togglebutton.hover.background"), ";\n color: ").concat(dt("togglebutton.hover.color"), ";\n}\n\n.p-togglebutton.p-togglebutton-checked {\n background: ").concat(dt("togglebutton.checked.background"), ";\n border-color: ").concat(dt("togglebutton.checked.border.color"), ";\n color: ").concat(dt("togglebutton.checked.color"), ";\n}\n\n.p-togglebutton:focus-visible {\n box-shadow: ").concat(dt("togglebutton.focus.ring.shadow"), ";\n outline: ").concat(dt("togglebutton.focus.ring.width"), " ").concat(dt("togglebutton.focus.ring.style"), " ").concat(dt("togglebutton.focus.ring.color"), ";\n outline-offset: ").concat(dt("togglebutton.focus.ring.offset"), ";\n}\n\n.p-togglebutton.p-invalid {\n border-color: ").concat(dt("togglebutton.invalid.border.color"), ";\n}\n\n.p-togglebutton:disabled {\n opacity: 1;\n cursor: default;\n background: ").concat(dt("togglebutton.disabled.background"), ";\n border-color: ").concat(dt("togglebutton.disabled.border.color"), ";\n color: ").concat(dt("togglebutton.disabled.color"), ";\n}\n\n.p-togglebutton-icon {\n color: ").concat(dt("togglebutton.icon.color"), ";\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n color: ").concat(dt("togglebutton.icon.hover.color"), ";\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n color: ").concat(dt("togglebutton.icon.checked.color"), ";\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n color: ").concat(dt("togglebutton.icon.disabled.color"), ";\n}\n"); -}, "theme"); -var classes$e = { - root: /* @__PURE__ */ __name(function root5(_ref2) { - var instance = _ref2.instance, props = _ref2.props; - return ["p-togglebutton p-component", { - "p-togglebutton-checked": instance.active, - "p-invalid": props.invalid - }]; - }, "root"), - content: "p-togglebutton-content", - icon: "p-togglebutton-icon", - label: "p-togglebutton-label" -}; -var ToggleButtonStyle = BaseStyle.extend({ - name: "togglebutton", - theme: theme$e, - classes: classes$e -}); -var script$1$e = { - name: "BaseToggleButton", - "extends": script$p, - props: { - modelValue: Boolean, - onIcon: String, - offIcon: String, - onLabel: { - type: String, - "default": "Yes" - }, - offLabel: { - type: String, - "default": "No" - }, - iconPos: { - type: String, - "default": "left" - }, - invalid: { - type: Boolean, - "default": false - }, - disabled: { - type: Boolean, - "default": false - }, - readonly: { - type: Boolean, - "default": false - }, - tabindex: { - type: Number, - "default": null - }, - ariaLabelledby: { - type: String, - "default": null - }, - ariaLabel: { - type: String, - "default": null - } - }, - style: ToggleButtonStyle, - provide: /* @__PURE__ */ __name(function provide6() { - return { - $pcToggleButton: this, - $parentInstance: this - }; - }, "provide") -}; -var script$h = { - name: "ToggleButton", - "extends": script$1$e, - inheritAttrs: false, - emits: ["update:modelValue", "change"], - methods: { - getPTOptions: /* @__PURE__ */ __name(function getPTOptions4(key) { - var _ptm = key === "root" ? this.ptmi : this.ptm; - return _ptm(key, { - context: { - active: this.active, - disabled: this.disabled - } - }); - }, "getPTOptions"), - onChange: /* @__PURE__ */ __name(function onChange2(event) { - if (!this.disabled && !this.readonly) { - this.$emit("update:modelValue", !this.modelValue); - this.$emit("change", event); - } - }, "onChange") - }, - computed: { - active: /* @__PURE__ */ __name(function active() { - return this.modelValue === true; - }, "active"), - hasLabel: /* @__PURE__ */ __name(function hasLabel() { - return isNotEmpty(this.onLabel) && isNotEmpty(this.offLabel); - }, "hasLabel"), - label: /* @__PURE__ */ __name(function label() { - return this.hasLabel ? this.modelValue ? this.onLabel : this.offLabel : " "; - }, "label") - }, - directives: { - ripple: Ripple - } -}; -var _hoisted_1$B = ["tabindex", "disabled", "aria-pressed", "data-p-checked", "data-p-disabled"]; -function render$i(_ctx, _cache, $props, $setup, $data, $options) { - var _directive_ripple = resolveDirective("ripple"); - return withDirectives((openBlock(), createElementBlock("button", mergeProps({ - type: "button", - "class": _ctx.cx("root"), - tabindex: _ctx.tabindex, - disabled: _ctx.disabled, - "aria-pressed": _ctx.modelValue, - onClick: _cache[0] || (_cache[0] = function() { - return $options.onChange && $options.onChange.apply($options, arguments); - }) - }, $options.getPTOptions("root"), { - "data-p-checked": $options.active, - "data-p-disabled": _ctx.disabled - }), [createBaseVNode("span", mergeProps({ - "class": _ctx.cx("content") - }, $options.getPTOptions("content")), [renderSlot(_ctx.$slots, "default", {}, function() { - return [renderSlot(_ctx.$slots, "icon", { - value: _ctx.modelValue, - "class": normalizeClass(_ctx.cx("icon")) - }, function() { - return [_ctx.onIcon || _ctx.offIcon ? (openBlock(), createElementBlock("span", mergeProps({ - key: 0, - "class": [_ctx.cx("icon"), _ctx.modelValue ? _ctx.onIcon : _ctx.offIcon] - }, $options.getPTOptions("icon")), null, 16)) : createCommentVNode("", true)]; - }), createBaseVNode("span", mergeProps({ - "class": _ctx.cx("label") - }, $options.getPTOptions("label")), toDisplayString($options.label), 17)]; - })], 16)], 16, _hoisted_1$B)), [[_directive_ripple]]); -} -__name(render$i, "render$i"); -script$h.render = render$i; -var theme$d = /* @__PURE__ */ __name(function theme5(_ref) { - var dt = _ref.dt; - return "\n.p-selectbutton {\n display: inline-flex;\n user-select: none;\n vertical-align: bottom;\n outline-color: transparent;\n border-radius: ".concat(dt("selectbutton.border.radius"), ";\n}\n\n.p-selectbutton .p-togglebutton {\n border-radius: 0;\n border-width: 1px 1px 1px 0;\n}\n\n.p-selectbutton .p-togglebutton:focus-visible {\n position: relative;\n z-index: 1;\n}\n\n.p-selectbutton .p-togglebutton:first-child {\n border-left-width: 1px;\n border-top-left-radius: ").concat(dt("selectbutton.border.radius"), ";\n border-bottom-left-radius: ").concat(dt("selectbutton.border.radius"), ";\n}\n\n.p-selectbutton .p-togglebutton:last-child {\n border-top-right-radius: ").concat(dt("selectbutton.border.radius"), ";\n border-bottom-right-radius: ").concat(dt("selectbutton.border.radius"), ";\n}\n\n.p-selectbutton.p-invalid {\n outline: 1px solid ").concat(dt("selectbutton.invalid.border.color"), ";\n outline-offset: 0;\n}\n"); -}, "theme"); -var classes$d = { - root: /* @__PURE__ */ __name(function root6(_ref2) { - var props = _ref2.props; - return ["p-selectbutton p-component", { - "p-invalid": props.invalid - }]; - }, "root") -}; -var SelectButtonStyle = BaseStyle.extend({ - name: "selectbutton", - theme: theme$d, - classes: classes$d -}); -var script$1$d = { - name: "BaseSelectButton", - "extends": script$p, - props: { - modelValue: null, - options: Array, - optionLabel: null, - optionValue: null, - optionDisabled: null, - multiple: Boolean, - allowEmpty: { - type: Boolean, - "default": true - }, - invalid: { - type: Boolean, - "default": false - }, - disabled: Boolean, - dataKey: null, - ariaLabelledby: { - type: String, - "default": null - } - }, - style: SelectButtonStyle, - provide: /* @__PURE__ */ __name(function provide7() { - return { - $pcSelectButton: this, - $parentInstance: this - }; - }, "provide") -}; -function _createForOfIteratorHelper$4(r, e) { - var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; - if (!t) { - if (Array.isArray(r) || (t = _unsupportedIterableToArray$7(r)) || e) { - t && (r = t); - var _n = 0, F = /* @__PURE__ */ __name(function F2() { - }, "F"); - return { s: F, n: /* @__PURE__ */ __name(function n() { - return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; - }, "n"), e: /* @__PURE__ */ __name(function e2(r2) { - throw r2; - }, "e"), f: F }; - } - throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - var o, a = true, u = false; - return { s: /* @__PURE__ */ __name(function s() { - t = t.call(r); - }, "s"), n: /* @__PURE__ */ __name(function n() { - var r2 = t.next(); - return a = r2.done, r2; - }, "n"), e: /* @__PURE__ */ __name(function e2(r2) { - u = true, o = r2; - }, "e"), f: /* @__PURE__ */ __name(function f() { - try { - a || null == t["return"] || t["return"](); - } finally { - if (u) throw o; - } - }, "f") }; -} -__name(_createForOfIteratorHelper$4, "_createForOfIteratorHelper$4"); -function _toConsumableArray$5(r) { - return _arrayWithoutHoles$5(r) || _iterableToArray$5(r) || _unsupportedIterableToArray$7(r) || _nonIterableSpread$5(); -} -__name(_toConsumableArray$5, "_toConsumableArray$5"); -function _nonIterableSpread$5() { - 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$5, "_nonIterableSpread$5"); -function _unsupportedIterableToArray$7(r, a) { - if (r) { - if ("string" == typeof r) return _arrayLikeToArray$7(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$7(r, a) : void 0; - } -} -__name(_unsupportedIterableToArray$7, "_unsupportedIterableToArray$7"); -function _iterableToArray$5(r) { - if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); -} -__name(_iterableToArray$5, "_iterableToArray$5"); -function _arrayWithoutHoles$5(r) { - if (Array.isArray(r)) return _arrayLikeToArray$7(r); -} -__name(_arrayWithoutHoles$5, "_arrayWithoutHoles$5"); -function _arrayLikeToArray$7(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$7, "_arrayLikeToArray$7"); -var script$g = { - name: "SelectButton", - "extends": script$1$d, - inheritAttrs: false, - emits: ["update:modelValue", "change"], - methods: { - getOptionLabel: /* @__PURE__ */ __name(function getOptionLabel2(option2) { - return this.optionLabel ? resolveFieldData(option2, this.optionLabel) : option2; - }, "getOptionLabel"), - getOptionValue: /* @__PURE__ */ __name(function getOptionValue2(option2) { - return this.optionValue ? resolveFieldData(option2, this.optionValue) : option2; - }, "getOptionValue"), - getOptionRenderKey: /* @__PURE__ */ __name(function getOptionRenderKey2(option2) { - return this.dataKey ? resolveFieldData(option2, this.dataKey) : this.getOptionLabel(option2); - }, "getOptionRenderKey"), - getPTOptions: /* @__PURE__ */ __name(function getPTOptions5(option2, key) { - return this.ptm(key, { - context: { - active: this.isSelected(option2), - disabled: this.isOptionDisabled(option2), - option: option2 - } - }); - }, "getPTOptions"), - isOptionDisabled: /* @__PURE__ */ __name(function isOptionDisabled2(option2) { - return this.optionDisabled ? resolveFieldData(option2, this.optionDisabled) : false; - }, "isOptionDisabled"), - onOptionSelect: /* @__PURE__ */ __name(function onOptionSelect2(event, option2, index2) { - var _this = this; - if (this.disabled || this.isOptionDisabled(option2)) { - return; - } - var selected2 = this.isSelected(option2); - if (selected2 && !this.allowEmpty) { - return; - } - var optionValue = this.getOptionValue(option2); - var newValue; - if (this.multiple) { - if (selected2) newValue = this.modelValue.filter(function(val) { - return !equals(val, optionValue, _this.equalityKey); - }); - else newValue = this.modelValue ? [].concat(_toConsumableArray$5(this.modelValue), [optionValue]) : [optionValue]; - } else { - newValue = selected2 ? null : optionValue; - } - this.focusedIndex = index2; - this.$emit("update:modelValue", newValue); - this.$emit("change", { - event, - value: newValue - }); - }, "onOptionSelect"), - isSelected: /* @__PURE__ */ __name(function isSelected2(option2) { - var selected2 = false; - var optionValue = this.getOptionValue(option2); - if (this.multiple) { - if (this.modelValue) { - var _iterator = _createForOfIteratorHelper$4(this.modelValue), _step; - try { - for (_iterator.s(); !(_step = _iterator.n()).done; ) { - var val = _step.value; - if (equals(val, optionValue, this.equalityKey)) { - selected2 = true; - break; - } - } - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); - } - } - } else { - selected2 = equals(this.modelValue, optionValue, this.equalityKey); - } - return selected2; - }, "isSelected") - }, - computed: { - equalityKey: /* @__PURE__ */ __name(function equalityKey2() { - return this.optionValue ? null : this.dataKey; - }, "equalityKey") - }, - directives: { - ripple: Ripple - }, - components: { - ToggleButton: script$h - } -}; -var _hoisted_1$A = ["aria-labelledby"]; -function render$h(_ctx, _cache, $props, $setup, $data, $options) { - var _component_ToggleButton = resolveComponent("ToggleButton"); - return openBlock(), createElementBlock("div", mergeProps({ - "class": _ctx.cx("root"), - role: "group", - "aria-labelledby": _ctx.ariaLabelledby - }, _ctx.ptmi("root")), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, function(option2, index2) { - return openBlock(), createBlock(_component_ToggleButton, { - key: $options.getOptionRenderKey(option2), - modelValue: $options.isSelected(option2), - onLabel: $options.getOptionLabel(option2), - offLabel: $options.getOptionLabel(option2), - disabled: _ctx.disabled || $options.isOptionDisabled(option2), - unstyled: _ctx.unstyled, - onChange: /* @__PURE__ */ __name(function onChange3($event) { - return $options.onOptionSelect($event, option2, index2); - }, "onChange"), - pt: _ctx.ptm("pcButton") - }, createSlots({ - _: 2 - }, [_ctx.$slots.option ? { - name: "default", - fn: withCtx(function() { - return [renderSlot(_ctx.$slots, "option", { - option: option2, - index: index2 - }, function() { - return [createBaseVNode("span", mergeProps({ - ref_for: true - }, _ctx.ptm("pcButton")["label"]), toDisplayString($options.getOptionLabel(option2)), 17)]; - })]; - }), - key: "0" - } : void 0]), 1032, ["modelValue", "onLabel", "offLabel", "disabled", "unstyled", "onChange", "pt"]); - }), 128))], 16, _hoisted_1$A); -} -__name(render$h, "render$h"); -script$g.render = render$h; -const _withScopeId$j = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-e7b35fd9"), n = n(), popScopeId(), n), "_withScopeId$j"); -const _hoisted_1$z = { class: "_content" }; -const _hoisted_2$r = { class: "_footer" }; -const _sfc_main$A = /* @__PURE__ */ defineComponent({ - __name: "NodeSearchFilter", - emits: ["addFilter"], - setup(__props, { emit: __emit }) { - const filters = computed(() => nodeDefStore.nodeSearchService.nodeFilters); - const selectedFilter = ref(); - const filterValues = computed(() => selectedFilter.value?.fuseSearch.data ?? []); - const selectedFilterValue = ref(""); - const nodeDefStore = useNodeDefStore(); - onMounted(() => { - selectedFilter.value = nodeDefStore.nodeSearchService.nodeFilters[0]; - updateSelectedFilterValue(); - }); - const emit = __emit; - const updateSelectedFilterValue = /* @__PURE__ */ __name(() => { - if (filterValues.value.includes(selectedFilterValue.value)) { - return; - } - selectedFilterValue.value = filterValues.value[0]; - }, "updateSelectedFilterValue"); - const submit = /* @__PURE__ */ __name(() => { - emit("addFilter", [ - selectedFilter.value, - selectedFilterValue.value - ]); - }, "submit"); - return (_ctx, _cache) => { - return openBlock(), createElementBlock(Fragment, null, [ - createBaseVNode("div", _hoisted_1$z, [ - createVNode(unref(script$g), { - class: "filter-type-select", - modelValue: selectedFilter.value, - "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedFilter.value = $event), - options: filters.value, - allowEmpty: false, - optionLabel: "name", - onChange: updateSelectedFilterValue - }, null, 8, ["modelValue", "options"]), - createVNode(unref(script$v), { - class: "filter-value-select", - modelValue: selectedFilterValue.value, - "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedFilterValue.value = $event), - options: filterValues.value, - filter: "" - }, null, 8, ["modelValue", "options"]) - ]), - createBaseVNode("div", _hoisted_2$r, [ - createVNode(unref(script$o), { - type: "button", - label: _ctx.$t("add"), - onClick: submit - }, null, 8, ["label"]) - ]) - ], 64); - }; - } -}); -const NodeSearchFilter = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-e7b35fd9"]]); -const BOOKMARK_SETTING_ID = "Comfy.NodeLibrary.Bookmarks.V2"; -const useNodeBookmarkStore = defineStore("nodeBookmark", () => { - const settingStore = useSettingStore(); - const nodeDefStore = useNodeDefStore(); - const migrateLegacyBookmarks = /* @__PURE__ */ __name(() => { - settingStore.get("Comfy.NodeLibrary.Bookmarks").forEach((bookmark) => { - if (bookmark.endsWith("/")) { - addBookmark(bookmark); - return; - } - const category = bookmark.split("/").slice(0, -1).join("/"); - const displayName = bookmark.split("/").pop(); - const nodeDef = nodeDefStore.nodeDefsByDisplayName[displayName]; - if (!nodeDef) return; - addBookmark(`${category === "" ? "" : category + "/"}${nodeDef.name}`); - }); - settingStore.set("Comfy.NodeLibrary.Bookmarks", []); - }, "migrateLegacyBookmarks"); - const bookmarks = computed( - () => settingStore.get(BOOKMARK_SETTING_ID) - ); - const bookmarksSet = computed(() => new Set(bookmarks.value)); - const bookmarkedRoot = computed( - () => buildBookmarkTree(bookmarks.value) - ); - const isBookmarked = /* @__PURE__ */ __name((node2) => bookmarksSet.value.has(node2.nodePath) || bookmarksSet.value.has(node2.name), "isBookmarked"); - const toggleBookmark = /* @__PURE__ */ __name((node2) => { - if (isBookmarked(node2)) { - deleteBookmark(node2.nodePath); - deleteBookmark(node2.name); - } else { - addBookmark(node2.name); - } - }, "toggleBookmark"); - const buildBookmarkTree = /* @__PURE__ */ __name((bookmarks2) => { - const bookmarkNodes = bookmarks2.map((bookmark) => { - if (bookmark.endsWith("/")) return createDummyFolderNodeDef(bookmark); - const parts = bookmark.split("/"); - const name = parts.pop(); - const category = parts.join("/"); - const srcNodeDef = nodeDefStore.nodeDefsByName[name]; - if (!srcNodeDef) { - return null; - } - const nodeDef = _.clone(srcNodeDef); - nodeDef.category = category; - return nodeDef; - }).filter((nodeDef) => nodeDef !== null); - return buildNodeDefTree(bookmarkNodes); - }, "buildBookmarkTree"); - const addBookmark = /* @__PURE__ */ __name((nodePath) => { - settingStore.set(BOOKMARK_SETTING_ID, [...bookmarks.value, nodePath]); - }, "addBookmark"); - const deleteBookmark = /* @__PURE__ */ __name((nodePath) => { - settingStore.set( - BOOKMARK_SETTING_ID, - bookmarks.value.filter((b) => b !== nodePath) - ); - }, "deleteBookmark"); - const addNewBookmarkFolder = /* @__PURE__ */ __name((parent) => { - const parentPath = parent ? parent.nodePath : ""; - let newFolderPath = parentPath + "New Folder/"; - let suffix = 1; - while (bookmarks.value.some((b) => b.startsWith(newFolderPath))) { - newFolderPath = parentPath + `New Folder ${suffix}/`; - suffix++; - } - addBookmark(newFolderPath); - return newFolderPath; - }, "addNewBookmarkFolder"); - const renameBookmarkFolder = /* @__PURE__ */ __name((folderNode, newName) => { - if (!folderNode.isDummyFolder) { - throw new Error("Cannot rename non-folder node"); - } - const newNodePath = folderNode.category.split("/").slice(0, -1).concat(newName).join("/") + "/"; - if (newNodePath === folderNode.nodePath) { - return; - } - if (bookmarks.value.some((b) => b.startsWith(newNodePath))) { - throw new Error(`Folder name "${newNodePath}" already exists`); - } - settingStore.set( - BOOKMARK_SETTING_ID, - bookmarks.value.map( - (b) => b.startsWith(folderNode.nodePath) ? b.replace(folderNode.nodePath, newNodePath) : b - ) - ); - renameBookmarkCustomization(folderNode.nodePath, newNodePath); - }, "renameBookmarkFolder"); - const deleteBookmarkFolder = /* @__PURE__ */ __name((folderNode) => { - if (!folderNode.isDummyFolder) { - throw new Error("Cannot delete non-folder node"); - } - settingStore.set( - BOOKMARK_SETTING_ID, - bookmarks.value.filter( - (b) => b !== folderNode.nodePath && !b.startsWith(folderNode.nodePath) - ) - ); - deleteBookmarkCustomization(folderNode.nodePath); - }, "deleteBookmarkFolder"); - const bookmarksCustomization = computed(() => settingStore.get("Comfy.NodeLibrary.BookmarksCustomization")); - const updateBookmarkCustomization = /* @__PURE__ */ __name((nodePath, customization) => { - const currentCustomization = bookmarksCustomization.value[nodePath] || {}; - const newCustomization = { ...currentCustomization, ...customization }; - if (newCustomization.icon === defaultBookmarkIcon) { - delete newCustomization.icon; - } - if (newCustomization.color === defaultBookmarkColor) { - delete newCustomization.color; - } - if (Object.keys(newCustomization).length === 0) { - deleteBookmarkCustomization(nodePath); - } else { - settingStore.set("Comfy.NodeLibrary.BookmarksCustomization", { - ...bookmarksCustomization.value, - [nodePath]: newCustomization - }); - } - }, "updateBookmarkCustomization"); - const deleteBookmarkCustomization = /* @__PURE__ */ __name((nodePath) => { - settingStore.set("Comfy.NodeLibrary.BookmarksCustomization", { - ...bookmarksCustomization.value, - [nodePath]: void 0 - }); - }, "deleteBookmarkCustomization"); - const renameBookmarkCustomization = /* @__PURE__ */ __name((oldNodePath, newNodePath) => { - const updatedCustomization = { ...bookmarksCustomization.value }; - if (updatedCustomization[oldNodePath]) { - updatedCustomization[newNodePath] = updatedCustomization[oldNodePath]; - delete updatedCustomization[oldNodePath]; - } - settingStore.set( - "Comfy.NodeLibrary.BookmarksCustomization", - updatedCustomization - ); - }, "renameBookmarkCustomization"); - const defaultBookmarkIcon = "pi-bookmark-fill"; - const defaultBookmarkColor = "#a1a1aa"; - return { - bookmarks, - bookmarkedRoot, - isBookmarked, - toggleBookmark, - addBookmark, - addNewBookmarkFolder, - renameBookmarkFolder, - deleteBookmarkFolder, - bookmarksCustomization, - updateBookmarkCustomization, - deleteBookmarkCustomization, - renameBookmarkCustomization, - defaultBookmarkIcon, - defaultBookmarkColor, - migrateLegacyBookmarks - }; -}); -const _withScopeId$i = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-37f672ab"), n = n(), popScopeId(), n), "_withScopeId$i"); -const _hoisted_1$y = { class: "option-container flex justify-between items-center px-2 py-0 cursor-pointer overflow-hidden w-full" }; -const _hoisted_2$q = { class: "option-display-name font-semibold flex flex-col" }; -const _hoisted_3$k = { key: 0 }; -const _hoisted_4$d = /* @__PURE__ */ _withScopeId$i(() => /* @__PURE__ */ createBaseVNode("i", { class: "pi pi-bookmark-fill text-sm mr-1" }, null, -1)); -const _hoisted_5$9 = [ - _hoisted_4$d -]; -const _hoisted_6$7 = ["innerHTML"]; -const _hoisted_7$4 = /* @__PURE__ */ _withScopeId$i(() => /* @__PURE__ */ createBaseVNode("span", null, " ", -1)); -const _hoisted_8$3 = ["innerHTML"]; -const _hoisted_9$3 = { - key: 0, - class: "option-category font-light text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap" -}; -const _hoisted_10$3 = { class: "option-badges" }; -const _sfc_main$z = /* @__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$y, [ - createBaseVNode("div", _hoisted_2$q, [ - createBaseVNode("div", null, [ - isBookmarked.value ? (openBlock(), createElementBlock("span", _hoisted_3$k, _hoisted_5$9)) : createCommentVNode("", true), - createBaseVNode("span", { - innerHTML: unref(highlightQuery)(_ctx.nodeDef.display_name, _ctx.currentQuery) - }, null, 8, _hoisted_6$7), - _hoisted_7$4, - showIdName.value ? (openBlock(), createBlock(unref(script$w), { - key: 1, - severity: "secondary" - }, { - default: withCtx(() => [ - createBaseVNode("span", { - innerHTML: unref(highlightQuery)(_ctx.nodeDef.name, _ctx.currentQuery) - }, null, 8, _hoisted_8$3) - ]), - _: 1 - })) : createCommentVNode("", true) - ]), - showCategory.value ? (openBlock(), createElementBlock("div", _hoisted_9$3, toDisplayString(_ctx.nodeDef.category.replaceAll("/", " > ")), 1)) : createCommentVNode("", true) - ]), - createBaseVNode("div", _hoisted_10$3, [ - _ctx.nodeDef.experimental ? (openBlock(), createBlock(unref(script$w), { - key: 0, - value: _ctx.$t("experimental"), - severity: "primary" - }, null, 8, ["value"])) : createCommentVNode("", true), - _ctx.nodeDef.deprecated ? (openBlock(), createBlock(unref(script$w), { - key: 1, - value: _ctx.$t("deprecated"), - severity: "danger" - }, null, 8, ["value"])) : createCommentVNode("", true), - showNodeFrequency.value && nodeFrequency.value > 0 ? (openBlock(), createBlock(unref(script$w), { - 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$u), { - 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$z, [["__scopeId", "data-v-37f672ab"]]); -const _withScopeId$h = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-ff07c900"), n = n(), popScopeId(), n), "_withScopeId$h"); -const _hoisted_1$x = { class: "_sb_node_preview" }; -const _hoisted_2$p = { class: "_sb_table" }; -const _hoisted_3$j = /* @__PURE__ */ _withScopeId$h(() => /* @__PURE__ */ createBaseVNode("div", { class: "_sb_dot headdot" }, null, -1)); -const _hoisted_4$c = /* @__PURE__ */ _withScopeId$h(() => /* @__PURE__ */ createBaseVNode("div", { class: "_sb_preview_badge" }, "PREVIEW", -1)); -const _hoisted_5$8 = { class: "_sb_col" }; -const _hoisted_6$6 = { class: "_sb_col" }; -const _hoisted_7$3 = /* @__PURE__ */ _withScopeId$h(() => /* @__PURE__ */ createBaseVNode("div", { class: "_sb_col middle-column" }, null, -1)); -const _hoisted_8$2 = { class: "_sb_col" }; -const _hoisted_9$2 = /* @__PURE__ */ _withScopeId$h(() => /* @__PURE__ */ createBaseVNode("div", { class: "_sb_col _sb_arrow" }, "◀", -1)); -const _hoisted_10$2 = /* @__PURE__ */ _withScopeId$h(() => /* @__PURE__ */ createBaseVNode("div", { class: "_sb_col middle-column" }, null, -1)); -const _hoisted_11$2 = /* @__PURE__ */ _withScopeId$h(() => /* @__PURE__ */ createBaseVNode("div", { class: "_sb_col _sb_arrow" }, "▶", -1)); -const _sfc_main$y = /* @__PURE__ */ defineComponent({ - __name: "NodePreview", - props: { - nodeDef: { - type: ComfyNodeDefImpl, - required: true - } - }, - setup(__props) { - const props = __props; - const colors = getColorPalette()?.colors?.litegraph_base; - const litegraphColors = colors ?? defaultColorPalette.colors.litegraph_base; - const nodeDefStore = useNodeDefStore(); - const nodeDef = props.nodeDef; - const allInputDefs = nodeDef.input.all; - const allOutputDefs = nodeDef.output.all; - const slotInputDefs = allInputDefs.filter( - (input) => !nodeDefStore.inputIsWidget(input) - ); - const widgetInputDefs = allInputDefs.filter( - (input) => nodeDefStore.inputIsWidget(input) - ); - const truncateDefaultValue = /* @__PURE__ */ __name((value, charLimit = 32) => { - let stringValue; - if (typeof value === "object" && value !== null) { - stringValue = JSON.stringify(value); - } else if (Array.isArray(value)) { - stringValue = JSON.stringify(value); - } else if (typeof value === "string") { - stringValue = value; - } else { - stringValue = String(value); - } - return _.truncate(stringValue, { length: charLimit }); - }, "truncateDefaultValue"); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$x, [ - createBaseVNode("div", _hoisted_2$p, [ - createBaseVNode("div", { - class: "node_header", - style: normalizeStyle({ - backgroundColor: unref(litegraphColors).NODE_DEFAULT_COLOR, - color: unref(litegraphColors).NODE_TITLE_COLOR - }) - }, [ - _hoisted_3$j, - createTextVNode(" " + toDisplayString(unref(nodeDef).display_name), 1) - ], 4), - _hoisted_4$c, - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(_).zip(unref(slotInputDefs), unref(allOutputDefs)), ([slotInput, slotOutput]) => { - return openBlock(), createElementBlock("div", { - class: "_sb_row slot_row", - key: (slotInput?.name || "") + (slotOutput?.index.toString() || "") - }, [ - createBaseVNode("div", _hoisted_5$8, [ - slotInput ? (openBlock(), createElementBlock("div", { - key: 0, - class: normalizeClass(["_sb_dot", slotInput.type]) - }, null, 2)) : createCommentVNode("", true) - ]), - createBaseVNode("div", _hoisted_6$6, toDisplayString(slotInput ? slotInput.name : ""), 1), - _hoisted_7$3, - createBaseVNode("div", { - class: "_sb_col _sb_inherit", - style: normalizeStyle({ - color: unref(litegraphColors).NODE_TEXT_COLOR - }) - }, toDisplayString(slotOutput ? slotOutput.name : ""), 5), - createBaseVNode("div", _hoisted_8$2, [ - slotOutput ? (openBlock(), createElementBlock("div", { - key: 0, - class: normalizeClass(["_sb_dot", slotOutput.type]) - }, null, 2)) : createCommentVNode("", true) - ]) - ]); - }), 128)), - (openBlock(true), createElementBlock(Fragment, null, renderList(unref(widgetInputDefs), (widgetInput) => { - return openBlock(), createElementBlock("div", { - class: "_sb_row _long_field", - key: widgetInput.name - }, [ - _hoisted_9$2, - createBaseVNode("div", { - class: "_sb_col", - style: normalizeStyle({ - color: unref(litegraphColors).WIDGET_SECONDARY_TEXT_COLOR - }) - }, toDisplayString(widgetInput.name), 5), - _hoisted_10$2, - createBaseVNode("div", { - class: "_sb_col _sb_inherit", - style: normalizeStyle({ color: unref(litegraphColors).WIDGET_TEXT_COLOR }) - }, toDisplayString(truncateDefaultValue(widgetInput.default)), 5), - _hoisted_11$2 - ]); - }), 128)) - ]), - unref(nodeDef).description ? (openBlock(), createElementBlock("div", { - key: 0, - class: "_sb_description", - style: normalizeStyle({ - color: unref(litegraphColors).WIDGET_SECONDARY_TEXT_COLOR, - backgroundColor: unref(litegraphColors).WIDGET_BGCOLOR - }) - }, toDisplayString(unref(nodeDef).description), 5)) : createCommentVNode("", true) - ]); - }; - } -}); -const NodePreview = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-ff07c900"]]); -const _withScopeId$g = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-2d409367"), n = n(), popScopeId(), n), "_withScopeId$g"); -const _hoisted_1$w = { class: "comfy-vue-node-search-container" }; -const _hoisted_2$o = { - key: 0, - class: "comfy-vue-node-preview-container" -}; -const _hoisted_3$i = /* @__PURE__ */ _withScopeId$g(() => /* @__PURE__ */ createBaseVNode("h3", null, "Add node filter condition", -1)); -const _hoisted_4$b = { class: "_dialog-body" }; -const _sfc_main$x = /* @__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((index2) => { - if (index2 === -1) { - hoveredSuggestion.value = null; - return; - } - const value = suggestions2.value[index2]; - hoveredSuggestion.value = value; - }, "setHoverSuggestion"); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$w, [ - enableNodePreview.value ? (openBlock(), createElementBlock("div", _hoisted_2$o, [ - hoveredSuggestion.value ? (openBlock(), createBlock(NodePreview, { - nodeDef: hoveredSuggestion.value, - key: hoveredSuggestion.value?.name || "" - }, null, 8, ["nodeDef"])) : createCommentVNode("", true) - ])) : createCommentVNode("", true), - createVNode(unref(script$o), { - icon: "pi pi-filter", - severity: "secondary", - class: "_filter-button", - onClick: _cache[0] || (_cache[0] = ($event) => nodeSearchFilterVisible.value = true) - }), - createVNode(unref(script$x), { - visible: nodeSearchFilterVisible.value, - "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => nodeSearchFilterVisible.value = $event), - class: "_dialog" - }, { - header: withCtx(() => [ - _hoisted_3$i - ]), - default: withCtx(() => [ - createBaseVNode("div", _hoisted_4$b, [ - createVNode(NodeSearchFilter, { onAddFilter }) - ]) - ]), - _: 1 - }, 8, ["visible"]), - createVNode(_sfc_main$B, { - "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$x, [["__scopeId", "data-v-2d409367"]]); -class ConnectingLinkImpl { - static { - __name(this, "ConnectingLinkImpl"); - } - node; - slot; - input; - output; - pos; - constructor(node2, slot, input, output, pos) { - this.node = node2; - 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$w = /* @__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 node2 = app.addNodeOnGraph(nodeDef, { pos: getNewNodeLocation() }); - const eventDetail = triggerEvent.value.detail; - if (eventDetail.subType === "empty-release") { - eventDetail.linkReleaseContext.links.forEach((link) => { - ConnectingLinkImpl.createFromPlainObject(link).connectTo(node2); - }); - } - 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$x), { - 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$v = /* @__PURE__ */ defineComponent({ - __name: "NodeTooltip", - setup(__props) { - let idleTimeout; - const nodeDefStore = useNodeDefStore(); - const settingStore = useSettingStore(); - const tooltipRef = ref(); - const tooltipText = ref(""); - const left = ref(); - const top = ref(); - const getHoveredWidget = /* @__PURE__ */ __name(() => { - const node2 = app.canvas.node_over; - if (!node2.widgets) return; - const graphPos = app.canvas.graph_mouse; - const x = graphPos[0] - node2.pos[0]; - const y = graphPos[1] - node2.pos[1]; - for (const w of node2.widgets) { - let widgetWidth, widgetHeight; - if (w.computeSize) { - ; - [widgetWidth, widgetHeight] = w.computeSize(node2.size[0]); - } else { - widgetWidth = w.width || node2.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 node2 = canvas.node_over; - if (!node2) return; - const ctor = node2.constructor; - const nodeDef = nodeDefStore.nodeDefsByName[node2.type]; - if (ctor.title_mode !== LiteGraph.NO_TITLE && canvas.graph_mouse[1] < node2.pos[1]) { - return showTooltip(nodeDef.description); - } - if (node2.flags?.collapsed) return; - const inputSlot = canvas.isOverNodeInput( - node2, - canvas.graph_mouse[0], - canvas.graph_mouse[1], - [0, 0] - ); - if (inputSlot !== -1) { - const inputName = node2.inputs[inputSlot].name; - return showTooltip(nodeDef.input.getInput(inputName)?.tooltip); - } - const outputSlot = canvas.isOverNodeOutput( - node2, - 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"); - watch( - () => settingStore.get("Comfy.EnableTooltips"), - (enabled) => { - if (enabled) { - window.addEventListener("mousemove", onMouseMove); - window.addEventListener("click", hideTooltip); - } else { - window.removeEventListener("mousemove", onMouseMove); - window.removeEventListener("click", hideTooltip); - } - }, - { immediate: true } - ); - onBeforeUnmount(() => { - window.removeEventListener("mousemove", onMouseMove); - window.removeEventListener("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$v, [["__scopeId", "data-v-0a4402f9"]]); -function _arrayWithHoles(r) { - if (Array.isArray(r)) return r; -} -__name(_arrayWithHoles, "_arrayWithHoles"); -function _iterableToArrayLimit(r, l) { - var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; - if (null != t) { - var e, n, i, u, a = [], f = true, o = false; - try { - if (i = (t = t.call(r)).next, 0 === l) { - if (Object(t) !== t) return; - f = false; - } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = true) ; - } catch (r2) { - o = true, n = r2; - } finally { - try { - if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; - } finally { - if (o) throw n; - } - } - return a; - } -} -__name(_iterableToArrayLimit, "_iterableToArrayLimit"); -function _arrayLikeToArray$6(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$6, "_arrayLikeToArray$6"); -function _unsupportedIterableToArray$6(r, a) { - if (r) { - if ("string" == typeof r) return _arrayLikeToArray$6(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$6(r, a) : void 0; - } -} -__name(_unsupportedIterableToArray$6, "_unsupportedIterableToArray$6"); -function _nonIterableRest() { - throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); -} -__name(_nonIterableRest, "_nonIterableRest"); -function _slicedToArray(r, e) { - return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$6(r, e) || _nonIterableRest(); -} -__name(_slicedToArray, "_slicedToArray"); -var dist = {}; -var bind$1 = {}; -"use strict"; -Object.defineProperty(bind$1, "__esModule", { value: true }); -var bind_2 = bind$1.bind = void 0; -function bind(target, _a) { - var type = _a.type, listener = _a.listener, options = _a.options; - target.addEventListener(type, listener, options); - return /* @__PURE__ */ __name(function unbind() { - target.removeEventListener(type, listener, options); - }, "unbind"); -} -__name(bind, "bind"); -bind_2 = bind$1.bind = bind; -var bindAll$1 = {}; -"use strict"; -var __assign = commonjsGlobal && commonjsGlobal.__assign || function() { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; -Object.defineProperty(bindAll$1, "__esModule", { value: true }); -var bindAll_2 = bindAll$1.bindAll = void 0; -var bind_1 = bind$1; -function toOptions(value) { - if (typeof value === "undefined") { - return void 0; - } - if (typeof value === "boolean") { - return { - capture: value - }; - } - return value; -} -__name(toOptions, "toOptions"); -function getBinding(original, sharedOptions) { - if (sharedOptions == null) { - return original; - } - var binding = __assign(__assign({}, original), { options: __assign(__assign({}, toOptions(sharedOptions)), toOptions(original.options)) }); - return binding; -} -__name(getBinding, "getBinding"); -function bindAll(target, bindings, sharedOptions) { - var unbinds = bindings.map(function(original) { - var binding = getBinding(original, sharedOptions); - return (0, bind_1.bind)(target, binding); - }); - return /* @__PURE__ */ __name(function unbindAll() { - unbinds.forEach(function(unbind) { - return unbind(); - }); - }, "unbindAll"); -} -__name(bindAll, "bindAll"); -bindAll_2 = bindAll$1.bindAll = bindAll; -(function(exports) { - "use strict"; - Object.defineProperty(exports, "__esModule", { value: true }); - exports.bindAll = exports.bind = void 0; - var bind_12 = bind$1; - Object.defineProperty(exports, "bind", { enumerable: true, get: /* @__PURE__ */ __name(function() { - return bind_12.bind; - }, "get") }); - var bind_all_1 = bindAll$1; - Object.defineProperty(exports, "bindAll", { enumerable: true, get: /* @__PURE__ */ __name(function() { - return bind_all_1.bindAll; - }, "get") }); -})(dist); -const index = /* @__PURE__ */ getDefaultExportFromCjs(dist); -var honeyPotDataAttribute = "data-pdnd-honey-pot"; -function isHoneyPotElement(target) { - return target instanceof Element && target.hasAttribute(honeyPotDataAttribute); -} -__name(isHoneyPotElement, "isHoneyPotElement"); -function getElementFromPointWithoutHoneypot(client) { - var _document$elementsFro = document.elementsFromPoint(client.x, client.y), _document$elementsFro2 = _slicedToArray(_document$elementsFro, 2), top = _document$elementsFro2[0], second = _document$elementsFro2[1]; - if (!top) { - return null; - } - if (isHoneyPotElement(top)) { - return second !== null && second !== void 0 ? second : null; - } - return top; -} -__name(getElementFromPointWithoutHoneypot, "getElementFromPointWithoutHoneypot"); -function _typeof$6(o) { - "@babel/helpers - typeof"; - return _typeof$6 = "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$6(o); -} -__name(_typeof$6, "_typeof$6"); -function toPrimitive(t, r) { - if ("object" != _typeof$6(t) || !t) return t; - var e = t[Symbol.toPrimitive]; - if (void 0 !== e) { - var i = e.call(t, r || "default"); - if ("object" != _typeof$6(i)) return i; - throw new TypeError("@@toPrimitive must return a primitive value."); - } - return ("string" === r ? String : Number)(t); -} -__name(toPrimitive, "toPrimitive"); -function toPropertyKey(t) { - var i = toPrimitive(t, "string"); - return "symbol" == _typeof$6(i) ? i : i + ""; -} -__name(toPropertyKey, "toPropertyKey"); -function _defineProperty$6(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$6, "_defineProperty$6"); -var maxZIndex = 2147483647; -function ownKeys$7(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$7, "ownKeys$7"); -function _objectSpread$7(e) { - for (var r = 1; r < arguments.length; r++) { - var t = null != arguments[r] ? arguments[r] : {}; - r % 2 ? ownKeys$7(Object(t), true).forEach(function(r2) { - _defineProperty$6(e, r2, t[r2]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function(r2) { - Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2)); - }); - } - return e; -} -__name(_objectSpread$7, "_objectSpread$7"); -var honeyPotSize = 2; -var halfHoneyPotSize = honeyPotSize / 2; -function floorToClosestPixel(point) { - return { - x: Math.floor(point.x), - y: Math.floor(point.y) - }; -} -__name(floorToClosestPixel, "floorToClosestPixel"); -function pullBackByHalfHoneyPotSize(point) { - return { - x: point.x - halfHoneyPotSize, - y: point.y - halfHoneyPotSize - }; -} -__name(pullBackByHalfHoneyPotSize, "pullBackByHalfHoneyPotSize"); -function preventGoingBackwardsOffScreen(point) { - return { - x: Math.max(point.x, 0), - y: Math.max(point.y, 0) - }; -} -__name(preventGoingBackwardsOffScreen, "preventGoingBackwardsOffScreen"); -function preventGoingForwardsOffScreen(point) { - return { - x: Math.min(point.x, window.innerWidth - honeyPotSize), - y: Math.min(point.y, window.innerHeight - honeyPotSize) - }; -} -__name(preventGoingForwardsOffScreen, "preventGoingForwardsOffScreen"); -function getHoneyPotRectFor(_ref) { - var client = _ref.client; - var point = preventGoingForwardsOffScreen(preventGoingBackwardsOffScreen(pullBackByHalfHoneyPotSize(floorToClosestPixel(client)))); - return DOMRect.fromRect({ - x: point.x, - y: point.y, - width: honeyPotSize, - height: honeyPotSize - }); -} -__name(getHoneyPotRectFor, "getHoneyPotRectFor"); -function getRectStyles(_ref2) { - var clientRect = _ref2.clientRect; - return { - left: "".concat(clientRect.left, "px"), - top: "".concat(clientRect.top, "px"), - width: "".concat(clientRect.width, "px"), - height: "".concat(clientRect.height, "px") - }; -} -__name(getRectStyles, "getRectStyles"); -function isWithin(_ref3) { - var client = _ref3.client, clientRect = _ref3.clientRect; - return ( - // is within horizontal bounds - client.x >= clientRect.x && client.x <= clientRect.x + clientRect.width && // is within vertical bounds - client.y >= clientRect.y && client.y <= clientRect.y + clientRect.height - ); -} -__name(isWithin, "isWithin"); -function mountHoneyPot(_ref4) { - var initial = _ref4.initial; - var element = document.createElement("div"); - element.setAttribute(honeyPotDataAttribute, "true"); - var clientRect = getHoneyPotRectFor({ - client: initial - }); - Object.assign(element.style, _objectSpread$7(_objectSpread$7({ - // Setting a background color explicitly to avoid any inherited styles. - // Looks like this could be `opacity: 0`, but worried that _might_ - // cause the element to be ignored on some platforms. - // When debugging, set backgroundColor to something like "red". - backgroundColor: "transparent", - position: "fixed", - // Being explicit to avoid inheriting styles - padding: 0, - margin: 0, - boxSizing: "border-box" - }, getRectStyles({ - clientRect - })), {}, { - // We want this element to absorb pointer events, - // it's kind of the whole point 😉 - pointerEvents: "auto", - // Want to make sure the honey pot is top of everything else. - // Don't need to worry about native drag previews, as they will - // have been rendered (and removed) before the honey pot is rendered - zIndex: maxZIndex - })); - document.body.appendChild(element); - var unbindPointerMove = dist.bind(window, { - type: "pointermove", - listener: /* @__PURE__ */ __name(function listener(event) { - var client = { - x: event.clientX, - y: event.clientY - }; - clientRect = getHoneyPotRectFor({ - client - }); - Object.assign(element.style, getRectStyles({ - clientRect - })); - }, "listener"), - // using capture so we are less likely to be impacted by event stopping - options: { - capture: true - } - }); - return /* @__PURE__ */ __name(function finish(_ref5) { - var current = _ref5.current; - unbindPointerMove(); - if (isWithin({ - client: current, - clientRect - })) { - element.remove(); - return; - } - function cleanup() { - unbindPostDragEvents(); - element.remove(); - } - __name(cleanup, "cleanup"); - var unbindPostDragEvents = dist.bindAll(window, [ - { - type: "pointerdown", - listener: cleanup - }, - { - type: "pointermove", - listener: cleanup - }, - { - type: "focusin", - listener: cleanup - }, - { - type: "focusout", - listener: cleanup - }, - // a 'pointerdown' should happen before 'dragstart', but just being super safe - { - type: "dragstart", - listener: cleanup - }, - // if the user has dragged something out of the window - // and then is dragging something back into the window - // the first events we will see are "dragenter" (and then "dragover"). - // So if we see any of these we need to clear the post drag fix. - { - type: "dragenter", - listener: cleanup - }, - { - type: "dragover", - listener: cleanup - } - // Not adding a "wheel" event listener, as "wheel" by itself does not - // resolve the bug. - ], { - // Using `capture` so less likely to be impacted by other code stopping events - capture: true - }); - }, "finish"); -} -__name(mountHoneyPot, "mountHoneyPot"); -function makeHoneyPotFix() { - var latestPointerMove = null; - function bindEvents() { - latestPointerMove = null; - return dist.bind(window, { - type: "pointermove", - listener: /* @__PURE__ */ __name(function listener(event) { - latestPointerMove = { - x: event.clientX, - y: event.clientY - }; - }, "listener"), - // listening for pointer move in capture phase - // so we are less likely to be impacted by events being stopped. - options: { - capture: true - } - }); - } - __name(bindEvents, "bindEvents"); - function getOnPostDispatch() { - var finish = null; - return /* @__PURE__ */ __name(function onPostEvent(_ref6) { - var eventName = _ref6.eventName, payload = _ref6.payload; - if (eventName === "onDragStart") { - var _latestPointerMove; - var input = payload.location.initial.input; - var initial = (_latestPointerMove = latestPointerMove) !== null && _latestPointerMove !== void 0 ? _latestPointerMove : { - x: input.clientX, - y: input.clientY - }; - finish = mountHoneyPot({ - initial - }); - } - if (eventName === "onDrop") { - var _finish; - var _input = payload.location.current.input; - (_finish = finish) === null || _finish === void 0 || _finish({ - current: { - x: _input.clientX, - y: _input.clientY - } - }); - finish = null; - latestPointerMove = null; - } - }, "onPostEvent"); - } - __name(getOnPostDispatch, "getOnPostDispatch"); - return { - bindEvents, - getOnPostDispatch - }; -} -__name(makeHoneyPotFix, "makeHoneyPotFix"); -function _arrayWithoutHoles$4(r) { - if (Array.isArray(r)) return _arrayLikeToArray$6(r); -} -__name(_arrayWithoutHoles$4, "_arrayWithoutHoles$4"); -function _iterableToArray$4(r) { - if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); -} -__name(_iterableToArray$4, "_iterableToArray$4"); -function _nonIterableSpread$4() { - 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$4, "_nonIterableSpread$4"); -function _toConsumableArray$4(r) { - return _arrayWithoutHoles$4(r) || _iterableToArray$4(r) || _unsupportedIterableToArray$6(r) || _nonIterableSpread$4(); -} -__name(_toConsumableArray$4, "_toConsumableArray$4"); -function once(fn) { - var cache = null; - return /* @__PURE__ */ __name(function wrapped() { - if (!cache) { - for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - var result = fn.apply(this, args); - cache = { - result - }; - } - return cache.result; - }, "wrapped"); -} -__name(once, "once"); -var isFirefox = once(/* @__PURE__ */ __name(function isFirefox2() { - if (false) { - return false; - } - return navigator.userAgent.includes("Firefox"); -}, "isFirefox2")); -var isSafari = once(/* @__PURE__ */ __name(function isSafari2() { - if (false) { - return false; - } - var _navigator = navigator, userAgent = _navigator.userAgent; - return userAgent.includes("AppleWebKit") && !userAgent.includes("Chrome"); -}, "isSafari2")); -var symbols = { - isLeavingWindow: Symbol("leaving"), - isEnteringWindow: Symbol("entering") -}; -function isEnteringWindowInSafari(_ref) { - var dragEnter = _ref.dragEnter; - if (!isSafari()) { - return false; - } - return dragEnter.hasOwnProperty(symbols.isEnteringWindow); -} -__name(isEnteringWindowInSafari, "isEnteringWindowInSafari"); -function isLeavingWindowInSafari(_ref2) { - var dragLeave = _ref2.dragLeave; - if (!isSafari()) { - return false; - } - return dragLeave.hasOwnProperty(symbols.isLeavingWindow); -} -__name(isLeavingWindowInSafari, "isLeavingWindowInSafari"); -(/* @__PURE__ */ __name(function fixSafari() { - if (typeof window === "undefined") { - return; - } - if (false) { - return; - } - if (!isSafari()) { - return; - } - function getInitialState() { - return { - enterCount: 0, - isOverWindow: false - }; - } - __name(getInitialState, "getInitialState"); - var state = getInitialState(); - function resetState() { - state = getInitialState(); - } - __name(resetState, "resetState"); - dist.bindAll( - window, - [{ - type: "dragstart", - listener: /* @__PURE__ */ __name(function listener() { - state.enterCount = 0; - state.isOverWindow = true; - }, "listener") - }, { - type: "drop", - listener: resetState - }, { - type: "dragend", - listener: resetState - }, { - type: "dragenter", - listener: /* @__PURE__ */ __name(function listener(event) { - if (!state.isOverWindow && state.enterCount === 0) { - event[symbols.isEnteringWindow] = true; - } - state.isOverWindow = true; - state.enterCount++; - }, "listener") - }, { - type: "dragleave", - listener: /* @__PURE__ */ __name(function listener(event) { - state.enterCount--; - if (state.isOverWindow && state.enterCount === 0) { - event[symbols.isLeavingWindow] = true; - state.isOverWindow = false; - } - }, "listener") - }], - // using `capture: true` so that adding event listeners - // in bubble phase will have the correct symbols - { - capture: true - } - ); -}, "fixSafari"))(); -function isNodeLike(target) { - return "nodeName" in target; -} -__name(isNodeLike, "isNodeLike"); -function isFromAnotherWindow(eventTarget) { - return isNodeLike(eventTarget) && eventTarget.ownerDocument !== document; -} -__name(isFromAnotherWindow, "isFromAnotherWindow"); -function isLeavingWindow(_ref) { - var dragLeave = _ref.dragLeave; - var type = dragLeave.type, relatedTarget = dragLeave.relatedTarget; - if (type !== "dragleave") { - return false; - } - if (isSafari()) { - return isLeavingWindowInSafari({ - dragLeave - }); - } - if (relatedTarget == null) { - return true; - } - if (isFirefox()) { - return isFromAnotherWindow(relatedTarget); - } - return relatedTarget instanceof HTMLIFrameElement; -} -__name(isLeavingWindow, "isLeavingWindow"); -function getBindingsForBrokenDrags(_ref) { - var onDragEnd2 = _ref.onDragEnd; - return [ - // ## Detecting drag ending for removed draggables - // - // If a draggable element is removed during a drag and the user drops: - // 1. if over a valid drop target: we get a "drop" event to know the drag is finished - // 2. if not over a valid drop target (or cancelled): we get nothing - // The "dragend" event will not fire on the source draggable if it has been - // removed from the DOM. - // So we need to figure out if a drag operation has finished by looking at other events - // We can do this by looking at other events - // ### First detection: "pointermove" events - // 1. "pointermove" events cannot fire during a drag and drop operation - // according to the spec. So if we get a "pointermove" it means that - // the drag and drop operations has finished. So if we get a "pointermove" - // we know that the drag is over - // 2. 🦊😤 Drag and drop operations are _supposed_ to suppress - // other pointer events. However, firefox will allow a few - // pointer event to get through after a drag starts. - // The most I've seen is 3 - { - type: "pointermove", - listener: /* @__PURE__ */ function() { - var callCount = 0; - return /* @__PURE__ */ __name(function listener() { - if (callCount < 20) { - callCount++; - return; - } - onDragEnd2(); - }, "listener"); - }() - }, - // ### Second detection: "pointerdown" events - // If we receive this event then we know that a drag operation has finished - // and potentially another one is about to start. - // Note: `pointerdown` fires on all browsers / platforms before "dragstart" - { - type: "pointerdown", - listener: onDragEnd2 - } - ]; -} -__name(getBindingsForBrokenDrags, "getBindingsForBrokenDrags"); -function getInput(event) { - return { - altKey: event.altKey, - button: event.button, - buttons: event.buttons, - ctrlKey: event.ctrlKey, - metaKey: event.metaKey, - shiftKey: event.shiftKey, - clientX: event.clientX, - clientY: event.clientY, - pageX: event.pageX, - pageY: event.pageY - }; -} -__name(getInput, "getInput"); -var rafSchd = /* @__PURE__ */ __name(function rafSchd2(fn) { - var lastArgs = []; - var frameId = null; - var wrapperFn = /* @__PURE__ */ __name(function wrapperFn2() { - for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - lastArgs = args; - if (frameId) { - return; - } - frameId = requestAnimationFrame(function() { - frameId = null; - fn.apply(void 0, lastArgs); - }); - }, "wrapperFn"); - wrapperFn.cancel = function() { - if (!frameId) { - return; - } - cancelAnimationFrame(frameId); - frameId = null; - }; - return wrapperFn; -}, "rafSchd"); -var scheduleOnDrag = rafSchd(function(fn) { - return fn(); -}); -var dragStart = /* @__PURE__ */ function() { - var scheduled = null; - function schedule(fn) { - var frameId = requestAnimationFrame(function() { - scheduled = null; - fn(); - }); - scheduled = { - frameId, - fn - }; - } - __name(schedule, "schedule"); - function flush() { - if (scheduled) { - cancelAnimationFrame(scheduled.frameId); - scheduled.fn(); - scheduled = null; - } - } - __name(flush, "flush"); - return { - schedule, - flush - }; -}(); -function makeDispatch(_ref) { - var source = _ref.source, initial = _ref.initial, dispatchEvent = _ref.dispatchEvent; - var previous = { - dropTargets: [] - }; - function safeDispatch(args) { - dispatchEvent(args); - previous = { - dropTargets: args.payload.location.current.dropTargets - }; - } - __name(safeDispatch, "safeDispatch"); - var dispatch = { - start: /* @__PURE__ */ __name(function start2(_ref2) { - var nativeSetDragImage = _ref2.nativeSetDragImage; - var location = { - current: initial, - previous, - initial - }; - safeDispatch({ - eventName: "onGenerateDragPreview", - payload: { - source, - location, - nativeSetDragImage - } - }); - dragStart.schedule(function() { - safeDispatch({ - eventName: "onDragStart", - payload: { - source, - location - } - }); - }); - }, "start"), - dragUpdate: /* @__PURE__ */ __name(function dragUpdate(_ref3) { - var current = _ref3.current; - dragStart.flush(); - scheduleOnDrag.cancel(); - safeDispatch({ - eventName: "onDropTargetChange", - payload: { - source, - location: { - initial, - previous, - current - } - } - }); - }, "dragUpdate"), - drag: /* @__PURE__ */ __name(function drag(_ref4) { - var current = _ref4.current; - scheduleOnDrag(function() { - dragStart.flush(); - var location = { - initial, - previous, - current - }; - safeDispatch({ - eventName: "onDrag", - payload: { - source, - location - } - }); - }); - }, "drag"), - drop: /* @__PURE__ */ __name(function drop(_ref5) { - var current = _ref5.current, updatedSourcePayload = _ref5.updatedSourcePayload; - dragStart.flush(); - scheduleOnDrag.cancel(); - safeDispatch({ - eventName: "onDrop", - payload: { - source: updatedSourcePayload !== null && updatedSourcePayload !== void 0 ? updatedSourcePayload : source, - location: { - current, - previous, - initial - } - } - }); - }, "drop") - }; - return dispatch; -} -__name(makeDispatch, "makeDispatch"); -var globalState = { - isActive: false -}; -function canStart() { - return !globalState.isActive; -} -__name(canStart, "canStart"); -function getNativeSetDragImage(event) { - if (event.dataTransfer) { - return event.dataTransfer.setDragImage.bind(event.dataTransfer); - } - return null; -} -__name(getNativeSetDragImage, "getNativeSetDragImage"); -function hasHierarchyChanged(_ref) { - var current = _ref.current, next2 = _ref.next; - if (current.length !== next2.length) { - return true; - } - for (var i = 0; i < current.length; i++) { - if (current[i].element !== next2[i].element) { - return true; - } - } - return false; -} -__name(hasHierarchyChanged, "hasHierarchyChanged"); -function start(_ref2) { - var event = _ref2.event, dragType = _ref2.dragType, getDropTargetsOver = _ref2.getDropTargetsOver, dispatchEvent = _ref2.dispatchEvent; - if (!canStart()) { - return; - } - var initial = getStartLocation({ - event, - dragType, - getDropTargetsOver - }); - globalState.isActive = true; - var state = { - current: initial - }; - setDropEffectOnEvent({ - event, - current: initial.dropTargets - }); - var dispatch = makeDispatch({ - source: dragType.payload, - dispatchEvent, - initial - }); - function updateState(next2) { - var hasChanged = hasHierarchyChanged({ - current: state.current.dropTargets, - next: next2.dropTargets - }); - state.current = next2; - if (hasChanged) { - dispatch.dragUpdate({ - current: state.current - }); - } - } - __name(updateState, "updateState"); - function onUpdateEvent(event2) { - var input = getInput(event2); - var target = isHoneyPotElement(event2.target) ? getElementFromPointWithoutHoneypot({ - x: input.clientX, - y: input.clientY - }) : event2.target; - var nextDropTargets = getDropTargetsOver({ - target, - input, - source: dragType.payload, - current: state.current.dropTargets - }); - if (nextDropTargets.length) { - event2.preventDefault(); - setDropEffectOnEvent({ - event: event2, - current: nextDropTargets - }); - } - updateState({ - dropTargets: nextDropTargets, - input - }); - } - __name(onUpdateEvent, "onUpdateEvent"); - function cancel() { - if (state.current.dropTargets.length) { - updateState({ - dropTargets: [], - input: state.current.input - }); - } - dispatch.drop({ - current: state.current, - updatedSourcePayload: null - }); - finish(); - } - __name(cancel, "cancel"); - function finish() { - globalState.isActive = false; - unbindEvents(); - } - __name(finish, "finish"); - var unbindEvents = dist.bindAll( - window, - [{ - // 👋 Note: we are repurposing the `dragover` event as our `drag` event - // this is because firefox does not publish pointer coordinates during - // a `drag` event, but does for every other type of drag event - // `dragover` fires on all elements that are being dragged over - // Because we are binding to `window` - our `dragover` is effectively the same as a `drag` - // 🦊😤 - type: "dragover", - listener: /* @__PURE__ */ __name(function listener(event2) { - onUpdateEvent(event2); - dispatch.drag({ - current: state.current - }); - }, "listener") - }, { - type: "dragenter", - listener: onUpdateEvent - }, { - type: "dragleave", - listener: /* @__PURE__ */ __name(function listener(event2) { - if (!isLeavingWindow({ - dragLeave: event2 - })) { - return; - } - updateState({ - input: state.current.input, - dropTargets: [] - }); - if (dragType.startedFrom === "external") { - cancel(); - } - }, "listener") - }, { - // A "drop" can only happen if the browser allowed the drop - type: "drop", - listener: /* @__PURE__ */ __name(function listener(event2) { - state.current = { - dropTargets: state.current.dropTargets, - input: getInput(event2) - }; - if (!state.current.dropTargets.length) { - cancel(); - return; - } - event2.preventDefault(); - setDropEffectOnEvent({ - event: event2, - current: state.current.dropTargets - }); - dispatch.drop({ - current: state.current, - // When dropping something native, we need to extract the latest - // `.items` from the "drop" event as it is now accessible - updatedSourcePayload: dragType.type === "external" ? dragType.getDropPayload(event2) : null - }); - finish(); - }, "listener") - }, { - // "dragend" fires when on the drag source (eg a draggable element) - // when the drag is finished. - // "dragend" will fire after "drop" (if there was a successful drop) - // "dragend" does not fire if the draggable source has been removed during the drag - // or for external drag sources (eg files) - // This "dragend" listener will not fire if there was a successful drop - // as we will have already removed the event listener - type: "dragend", - listener: /* @__PURE__ */ __name(function listener(event2) { - state.current = { - dropTargets: state.current.dropTargets, - input: getInput(event2) - }; - cancel(); - }, "listener") - }].concat(_toConsumableArray$4(getBindingsForBrokenDrags({ - onDragEnd: cancel - }))), - // Once we have started a managed drag operation it is important that we see / own all drag events - // We got one adoption bug pop up where some code was stopping (`event.stopPropagation()`) - // all "drop" events in the bubble phase on the `document.body`. - // This meant that we never saw the "drop" event. - { - capture: true - } - ); - dispatch.start({ - nativeSetDragImage: getNativeSetDragImage(event) - }); -} -__name(start, "start"); -function setDropEffectOnEvent(_ref3) { - var _current$; - var event = _ref3.event, current = _ref3.current; - var innerMost = (_current$ = current[0]) === null || _current$ === void 0 ? void 0 : _current$.dropEffect; - if (innerMost != null && event.dataTransfer) { - event.dataTransfer.dropEffect = innerMost; - } -} -__name(setDropEffectOnEvent, "setDropEffectOnEvent"); -function getStartLocation(_ref4) { - var event = _ref4.event, dragType = _ref4.dragType, getDropTargetsOver = _ref4.getDropTargetsOver; - var input = getInput(event); - if (dragType.startedFrom === "external") { - return { - input, - dropTargets: [] - }; - } - var dropTargets = getDropTargetsOver({ - input, - source: dragType.payload, - target: event.target, - current: [] - }); - return { - input, - dropTargets - }; -} -__name(getStartLocation, "getStartLocation"); -var lifecycle = { - canStart, - start -}; -var ledger = /* @__PURE__ */ new Map(); -function registerUsage(_ref) { - var typeKey = _ref.typeKey, mount2 = _ref.mount; - var entry = ledger.get(typeKey); - if (entry) { - entry.usageCount++; - return entry; - } - var initial = { - typeKey, - unmount: mount2(), - usageCount: 1 - }; - ledger.set(typeKey, initial); - return initial; -} -__name(registerUsage, "registerUsage"); -function register(args) { - var entry = registerUsage(args); - return /* @__PURE__ */ __name(function unregister() { - entry.usageCount--; - if (entry.usageCount > 0) { - return; - } - entry.unmount(); - ledger.delete(args.typeKey); - }, "unregister"); -} -__name(register, "register"); -function combine() { - for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) { - fns[_key] = arguments[_key]; - } - return /* @__PURE__ */ __name(function cleanup() { - fns.forEach(function(fn) { - return fn(); - }); - }, "cleanup"); -} -__name(combine, "combine"); -function addAttribute(element, _ref) { - var attribute = _ref.attribute, value = _ref.value; - element.setAttribute(attribute, value); - return function() { - return element.removeAttribute(attribute); - }; -} -__name(addAttribute, "addAttribute"); -function ownKeys$6(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$6, "ownKeys$6"); -function _objectSpread$6(e) { - for (var r = 1; r < arguments.length; r++) { - var t = null != arguments[r] ? arguments[r] : {}; - r % 2 ? ownKeys$6(Object(t), true).forEach(function(r2) { - _defineProperty$6(e, r2, t[r2]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function(r2) { - Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2)); - }); - } - return e; -} -__name(_objectSpread$6, "_objectSpread$6"); -function _createForOfIteratorHelper$3(o, allowArrayLike) { - var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; - if (!it) { - if (Array.isArray(o) || (it = _unsupportedIterableToArray$5(o)) || allowArrayLike && o && typeof o.length === "number") { - if (it) o = it; - var i = 0; - var F = /* @__PURE__ */ __name(function F2() { - }, "F2"); - return { s: F, n: /* @__PURE__ */ __name(function n() { - if (i >= o.length) return { done: true }; - return { done: false, value: o[i++] }; - }, "n"), e: /* @__PURE__ */ __name(function e(_e) { - throw _e; - }, "e"), f: F }; - } - throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - var normalCompletion = true, didErr = false, err; - return { s: /* @__PURE__ */ __name(function s() { - it = it.call(o); - }, "s"), n: /* @__PURE__ */ __name(function n() { - var step2 = it.next(); - normalCompletion = step2.done; - return step2; - }, "n"), e: /* @__PURE__ */ __name(function e(_e2) { - didErr = true; - err = _e2; - }, "e"), f: /* @__PURE__ */ __name(function f() { - try { - if (!normalCompletion && it.return != null) it.return(); - } finally { - if (didErr) throw err; - } - }, "f") }; -} -__name(_createForOfIteratorHelper$3, "_createForOfIteratorHelper$3"); -function _unsupportedIterableToArray$5(o, minLen) { - if (!o) return; - if (typeof o === "string") return _arrayLikeToArray$5(o, minLen); - var n = Object.prototype.toString.call(o).slice(8, -1); - if (n === "Object" && o.constructor) n = o.constructor.name; - if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$5(o, minLen); -} -__name(_unsupportedIterableToArray$5, "_unsupportedIterableToArray$5"); -function _arrayLikeToArray$5(arr, len) { - if (len == null || len > arr.length) len = arr.length; - for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; - return arr2; -} -__name(_arrayLikeToArray$5, "_arrayLikeToArray$5"); -function copyReverse(array) { - return array.slice(0).reverse(); -} -__name(copyReverse, "copyReverse"); -function makeDropTarget(_ref) { - var typeKey = _ref.typeKey, defaultDropEffect = _ref.defaultDropEffect; - var registry = /* @__PURE__ */ new WeakMap(); - var dropTargetDataAtt = "data-drop-target-for-".concat(typeKey); - var dropTargetSelector = "[".concat(dropTargetDataAtt, "]"); - function addToRegistry2(args) { - registry.set(args.element, args); - return function() { - return registry.delete(args.element); - }; - } - __name(addToRegistry2, "addToRegistry"); - function dropTargetForConsumers(args) { - if (false) { - var existing = registry.get(args.element); - if (existing) { - console.warn("You have already registered a [".concat(typeKey, "] dropTarget on the same element"), { - existing, - proposed: args - }); - } - if (args.element instanceof HTMLIFrameElement) { - console.warn("\n We recommend not registering