Update web content to release v1.3.26 (#5413)

* Update web content to release v1.3.26

* nit
This commit is contained in:
Chenlei Hu 2024-10-29 14:14:06 -04:00 committed by GitHub
parent 770ab200f2
commit 65a8659182
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
24 changed files with 4358 additions and 3898 deletions

View File

@ -1,8 +1,8 @@
var __defProp = Object.defineProperty; var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); 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 { d as defineComponent, bQ 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, bR as script$1, A as createBaseVNode, x as createBlock, N as Fragment, O as renderList, a6 as toDisplayString, aw as createTextVNode, j as createCommentVNode, D as script$4 } from "./index-BHayQCxv.js";
import { s as script, a as script$2, b as script$3 } from "./index-DBWDcZsl.js"; import { s as script, a as script$2, b as script$3 } from "./index-CwRXxFdA.js";
import "./index-DYEEBf64.js"; import "./index-C_wOqB0f.js";
const _hoisted_1 = { class: "extension-panel" }; const _hoisted_1 = { class: "extension-panel" };
const _hoisted_2 = { class: "mt-4" }; const _hoisted_2 = { class: "mt-4" };
const _sfc_main = /* @__PURE__ */ defineComponent({ const _sfc_main = /* @__PURE__ */ defineComponent({
@ -100,4 +100,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
export { export {
_sfc_main as default _sfc_main as default
}; };
//# sourceMappingURL=ExtensionPanel-DZLYjWBj.js.map //# sourceMappingURL=ExtensionPanel-BmKi_NKS.js.map

View File

@ -1 +1 @@
{"version":3,"file":"ExtensionPanel-DZLYjWBj.js","sources":["../../src/components/dialog/content/setting/ExtensionPanel.vue"],"sourcesContent":["<template>\n <div class=\"extension-panel\">\n <DataTable :value=\"extensionStore.extensions\" stripedRows size=\"small\">\n <Column field=\"name\" :header=\"$t('extensionName')\" sortable></Column>\n <Column\n :pt=\"{\n bodyCell: 'flex items-center justify-end'\n }\"\n >\n <template #body=\"slotProps\">\n <ToggleSwitch\n v-model=\"editingEnabledExtensions[slotProps.data.name]\"\n @change=\"updateExtensionStatus\"\n />\n </template>\n </Column>\n </DataTable>\n <div class=\"mt-4\">\n <Message v-if=\"hasChanges\" severity=\"info\">\n <ul>\n <li v-for=\"ext in changedExtensions\" :key=\"ext.name\">\n <span>\n {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}\n </span>\n {{ ext.name }}\n </li>\n </ul>\n </Message>\n <Button\n :label=\"$t('reloadToApplyChanges')\"\n icon=\"pi pi-refresh\"\n @click=\"applyChanges\"\n :disabled=\"!hasChanges\"\n text\n fluid\n severity=\"danger\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport { useExtensionStore } from '@/stores/extensionStore'\nimport { useSettingStore } from '@/stores/settingStore'\nimport DataTable from 'primevue/datatable'\nimport Column from 'primevue/column'\nimport ToggleSwitch from 'primevue/toggleswitch'\nimport Button from 'primevue/button'\nimport Message from 'primevue/message'\n\nconst extensionStore = useExtensionStore()\nconst settingStore = useSettingStore()\n\nconst editingEnabledExtensions = ref<Record<string, boolean>>({})\n\nonMounted(() => {\n extensionStore.extensions.forEach((ext) => {\n editingEnabledExtensions.value[ext.name] =\n extensionStore.isExtensionEnabled(ext.name)\n })\n})\n\nconst changedExtensions = computed(() => {\n return extensionStore.extensions.filter(\n (ext) =>\n editingEnabledExtensions.value[ext.name] !==\n extensionStore.isExtensionEnabled(ext.name)\n )\n})\n\nconst hasChanges = computed(() => {\n return changedExtensions.value.length > 0\n})\n\nconst updateExtensionStatus = () => {\n const editingDisabledExtensionNames = Object.entries(\n editingEnabledExtensions.value\n )\n .filter(([_, enabled]) => !enabled)\n .map(([name]) => name)\n\n settingStore.set('Comfy.Extension.Disabled', [\n ...extensionStore.inactiveDisabledExtensionNames,\n ...editingDisabledExtensionNames\n ])\n}\n\nconst applyChanges = () => {\n // Refresh the page to apply changes\n window.location.reload()\n}\n</script>\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} {"version":3,"file":"ExtensionPanel-BmKi_NKS.js","sources":["../../src/components/dialog/content/setting/ExtensionPanel.vue"],"sourcesContent":["<template>\n <div class=\"extension-panel\">\n <DataTable :value=\"extensionStore.extensions\" stripedRows size=\"small\">\n <Column field=\"name\" :header=\"$t('extensionName')\" sortable></Column>\n <Column\n :pt=\"{\n bodyCell: 'flex items-center justify-end'\n }\"\n >\n <template #body=\"slotProps\">\n <ToggleSwitch\n v-model=\"editingEnabledExtensions[slotProps.data.name]\"\n @change=\"updateExtensionStatus\"\n />\n </template>\n </Column>\n </DataTable>\n <div class=\"mt-4\">\n <Message v-if=\"hasChanges\" severity=\"info\">\n <ul>\n <li v-for=\"ext in changedExtensions\" :key=\"ext.name\">\n <span>\n {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}\n </span>\n {{ ext.name }}\n </li>\n </ul>\n </Message>\n <Button\n :label=\"$t('reloadToApplyChanges')\"\n icon=\"pi pi-refresh\"\n @click=\"applyChanges\"\n :disabled=\"!hasChanges\"\n text\n fluid\n severity=\"danger\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport { useExtensionStore } from '@/stores/extensionStore'\nimport { useSettingStore } from '@/stores/settingStore'\nimport DataTable from 'primevue/datatable'\nimport Column from 'primevue/column'\nimport ToggleSwitch from 'primevue/toggleswitch'\nimport Button from 'primevue/button'\nimport Message from 'primevue/message'\n\nconst extensionStore = useExtensionStore()\nconst settingStore = useSettingStore()\n\nconst editingEnabledExtensions = ref<Record<string, boolean>>({})\n\nonMounted(() => {\n extensionStore.extensions.forEach((ext) => {\n editingEnabledExtensions.value[ext.name] =\n extensionStore.isExtensionEnabled(ext.name)\n })\n})\n\nconst changedExtensions = computed(() => {\n return extensionStore.extensions.filter(\n (ext) =>\n editingEnabledExtensions.value[ext.name] !==\n extensionStore.isExtensionEnabled(ext.name)\n )\n})\n\nconst hasChanges = computed(() => {\n return changedExtensions.value.length > 0\n})\n\nconst updateExtensionStatus = () => {\n const editingDisabledExtensionNames = Object.entries(\n editingEnabledExtensions.value\n )\n .filter(([_, enabled]) => !enabled)\n .map(([name]) => name)\n\n settingStore.set('Comfy.Extension.Disabled', [\n ...extensionStore.inactiveDisabledExtensionNames,\n ...editingDisabledExtensionNames\n ])\n}\n\nconst applyChanges = () => {\n // Refresh the page to apply changes\n window.location.reload()\n}\n</script>\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

File diff suppressed because one or more lines are too long

1
web/assets/GraphView-C4blCugc.js.map generated vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,13 +1,13 @@
.group-title-editor.node-title-editor[data-v-fc3f26e3] { .group-title-editor.node-title-editor[data-v-8a100d5a] {
z-index: 9999; z-index: 9999;
padding: 0.25rem; padding: 0.25rem;
} }
[data-v-fc3f26e3] .editable-text { [data-v-8a100d5a] .editable-text {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
[data-v-fc3f26e3] .editable-text input { [data-v-8a100d5a] .editable-text input {
width: 100%; width: 100%;
height: 100%; height: 100%;
/* Override the default font size */ /* Override the default font size */
@ -45,7 +45,7 @@
--sidebar-icon-size: 1rem; --sidebar-icon-size: 1rem;
} }
.side-tool-bar-container[data-v-b6bfc188] { .side-tool-bar-container[data-v-37fd2fa4] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -58,36 +58,39 @@
background-color: var(--comfy-menu-bg); background-color: var(--comfy-menu-bg);
color: var(--fg-color); color: var(--fg-color);
} }
.side-tool-bar-end[data-v-b6bfc188] { .side-tool-bar-end[data-v-37fd2fa4] {
align-self: flex-end; align-self: flex-end;
margin-top: auto; margin-top: auto;
} }
.p-splitter-gutter { [data-v-b49f20b1] .p-splitter-gutter {
pointer-events: auto; pointer-events: auto;
} }
.gutter-hidden { .side-bar-panel[data-v-b49f20b1] {
display: none !important;
}
.side-bar-panel[data-v-b9df3042] {
background-color: var(--bg-color); background-color: var(--bg-color);
pointer-events: auto; pointer-events: auto;
} }
.splitter-overlay[data-v-b9df3042] { .bottom-panel[data-v-b49f20b1] {
width: 100%; background-color: var(--bg-color);
height: 100%; pointer-events: auto;
position: absolute; }
top: 0; .splitter-overlay[data-v-b49f20b1] {
left: 0;
background-color: transparent;
pointer-events: none; pointer-events: none;
border-style: none;
background-color: transparent;
}
.splitter-overlay-root[data-v-b49f20b1] {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
/* Set it the same as the ComfyUI menu */ /* Set it the same as the ComfyUI menu */
/* Note: Lite-graph DOM widgets have the same z-index as the node id, so /* 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 999 should be sufficient to make sure splitter overlays on node's DOM
widgets */ widgets */
z-index: 999; z-index: 999;
border: none;
} }
[data-v-37f672ab] .highlight { [data-v-37f672ab] .highlight {
@ -251,7 +254,7 @@
display: none; display: none;
} }
.comfyui-menu[data-v-b13fdc92] { .comfyui-menu[data-v-ad2c662b] {
width: 100vw; width: 100vw;
background: var(--comfy-menu-bg); background: var(--comfy-menu-bg);
color: var(--fg-color); color: var(--fg-color);
@ -263,13 +266,13 @@
grid-column: 1/-1; grid-column: 1/-1;
max-height: 90vh; max-height: 90vh;
} }
.comfyui-menu.dropzone[data-v-b13fdc92] { .comfyui-menu.dropzone[data-v-ad2c662b] {
background: var(--p-highlight-background); background: var(--p-highlight-background);
} }
.comfyui-menu.dropzone-active[data-v-b13fdc92] { .comfyui-menu.dropzone-active[data-v-ad2c662b] {
background: var(--p-highlight-background-focus); background: var(--p-highlight-background-focus);
} }
.comfyui-logo[data-v-b13fdc92] { .comfyui-logo[data-v-ad2c662b] {
font-size: 1.2em; font-size: 1.2em;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;

File diff suppressed because one or more lines are too long

View File

@ -1,8 +1,8 @@
var __defProp = Object.defineProperty; var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { d as defineComponent, q as computed, g as openBlock, h as createElementBlock, M as Fragment, N as renderList, i as createVNode, y as withCtx, ap as createTextVNode, am as toDisplayString, z as unref, at as script, j as createCommentVNode, r as ref, bH as FilterMatchMode, K as useKeybindingStore, F as useCommandStore, aC as watchEffect, aZ as useToast, t as resolveDirective, bI as SearchBox, A as createBaseVNode, D as script$2, x as createBlock, af as script$4, b2 as withModifiers, aA as script$6, v as withDirectives, P as pushScopeId, Q as popScopeId, by as KeyComboImpl, bJ as KeybindingImpl, _ as _export_sfc } from "./index-CgU1oKZt.js"; import { d as defineComponent, q as computed, g as openBlock, h as createElementBlock, N as Fragment, O as renderList, i as createVNode, y as withCtx, aw as createTextVNode, a6 as toDisplayString, z as unref, aA as script, j as createCommentVNode, r as ref, bN as FilterMatchMode, M as useKeybindingStore, F as useCommandStore, aJ as watchEffect, b9 as useToast, t as resolveDirective, bO as SearchBox, A as createBaseVNode, D as script$2, x as createBlock, ao as script$4, be as withModifiers, aH as script$6, v as withDirectives, P as pushScopeId, Q as popScopeId, bJ as KeyComboImpl, bP as KeybindingImpl, _ as _export_sfc } from "./index-BHayQCxv.js";
import { s as script$1, a as script$3, b as script$5 } from "./index-DBWDcZsl.js"; import { s as script$1, a as script$3, b as script$5 } from "./index-CwRXxFdA.js";
import "./index-DYEEBf64.js"; import "./index-C_wOqB0f.js";
const _hoisted_1$1 = { const _hoisted_1$1 = {
key: 0, key: 0,
class: "px-2" class: "px-2"
@ -261,4 +261,4 @@ const KeybindingPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "d
export { export {
KeybindingPanel as default KeybindingPanel as default
}; };
//# sourceMappingURL=KeybindingPanel-YkUFoiMw.js.map //# sourceMappingURL=KeybindingPanel-Dm_3sBT5.js.map

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1
web/assets/index-BHayQCxv.js.map generated vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
var __defProp = Object.defineProperty; var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { bu as ComfyDialog, bv as $el, bw as ComfyApp, c as app, k as LiteGraph, aP as LGraphCanvas, bx as DraggableList, a_ as useToastStore, ax as useNodeDefStore, bq as api, L as LGraphGroup, by as KeyComboImpl, K as useKeybindingStore, F as useCommandStore, e as LGraphNode, bz as ComfyWidgets, bA as applyTextReplacements, av as NodeSourceType, bB as NodeBadgeMode, u as useSettingStore, q as computed, bC as getColorPalette, w as watch, bD as BadgePosition, aR as LGraphBadge, bE as _, bF as defaultColorPalette } from "./index-CgU1oKZt.js"; import { bF as ComfyDialog, bG as $el, bH as ComfyApp, c as app, k as LiteGraph, b0 as LGraphCanvas, bI as DraggableList, ba as useToastStore, aE as useNodeDefStore, bC as api, L as LGraphGroup, bJ as KeyComboImpl, M as useKeybindingStore, F as useCommandStore, e as LGraphNode, bK as ComfyWidgets, bL as applyTextReplacements } from "./index-BHayQCxv.js";
import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs-DNVvusS1.js"; import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs-DdecKYqd.js";
class ClipspaceDialog extends ComfyDialog { class ClipspaceDialog extends ComfyDialog {
static { static {
__name(this, "ClipspaceDialog"); __name(this, "ClipspaceDialog");
@ -37,7 +37,9 @@ class ClipspaceDialog extends ComfyDialog {
...self.createButtons() ...self.createButtons()
]); ]);
if (self.element) { if (self.element) {
self.element.removeChild(self.element.firstChild); if (self.element.firstChild) {
self.element.removeChild(self.element.firstChild);
}
self.element.appendChild(children); self.element.appendChild(children);
} else { } else {
self.element = $el("div.comfy-modal", { parent: document.body }, [ self.element = $el("div.comfy-modal", { parent: document.body }, [
@ -76,7 +78,7 @@ class ClipspaceDialog extends ComfyDialog {
return buttons; return buttons;
} }
createImgSettings() { createImgSettings() {
if (ComfyApp.clipspace.imgs) { if (ComfyApp.clipspace?.imgs) {
const combo_items = []; const combo_items = [];
const imgs = ComfyApp.clipspace.imgs; const imgs = ComfyApp.clipspace.imgs;
for (let i = 0; i < imgs.length; i++) { for (let i = 0; i < imgs.length; i++) {
@ -87,8 +89,10 @@ class ClipspaceDialog extends ComfyDialog {
{ {
id: "clipspace_img_selector", id: "clipspace_img_selector",
onchange: /* @__PURE__ */ __name((event) => { onchange: /* @__PURE__ */ __name((event) => {
ComfyApp.clipspace["selectedIndex"] = event.target.selectedIndex; if (event.target && ComfyApp.clipspace) {
ClipspaceDialog.invalidatePreview(); ComfyApp.clipspace["selectedIndex"] = event.target.selectedIndex;
ClipspaceDialog.invalidatePreview();
}
}, "onchange") }, "onchange")
}, },
combo_items combo_items
@ -102,7 +106,9 @@ class ClipspaceDialog extends ComfyDialog {
{ {
id: "clipspace_img_paste_mode", id: "clipspace_img_paste_mode",
onchange: /* @__PURE__ */ __name((event) => { onchange: /* @__PURE__ */ __name((event) => {
ComfyApp.clipspace["img_paste_mode"] = event.target.value; if (event.target && ComfyApp.clipspace) {
ComfyApp.clipspace["img_paste_mode"] = event.target.value;
}
}, "onchange") }, "onchange")
}, },
[ [
@ -127,7 +133,7 @@ class ClipspaceDialog extends ComfyDialog {
} }
} }
createImgPreview() { createImgPreview() {
if (ComfyApp.clipspace.imgs) { if (ComfyApp.clipspace?.imgs) {
return $el("img", { id: "clipspace_preview", ondragstart: /* @__PURE__ */ __name(() => false, "ondragstart") }); return $el("img", { id: "clipspace_preview", ondragstart: /* @__PURE__ */ __name(() => false, "ondragstart") });
} else return []; } else return [];
} }
@ -173,9 +179,9 @@ const ext$2 = {
requestAnimationFrame(() => { requestAnimationFrame(() => {
const currentNode = LGraphCanvas.active_canvas.current_node; const currentNode = LGraphCanvas.active_canvas.current_node;
const clickedComboValue = currentNode.widgets?.filter( const clickedComboValue = currentNode.widgets?.filter(
(w) => w.type === "combo" && w.options.values.length === values.length (w) => w.type === "combo" && w.options.values?.length === values.length
).find( ).find(
(w) => w.options.values.every((v, i) => v === values[i]) (w) => w.options.values?.every((v, i) => v === values[i])
)?.value; )?.value;
let selectedIndex = clickedComboValue ? values.findIndex((v) => v === clickedComboValue) : 0; let selectedIndex = clickedComboValue ? values.findIndex((v) => v === clickedComboValue) : 0;
if (selectedIndex < 0) { if (selectedIndex < 0) {
@ -244,7 +250,7 @@ const ext$2 = {
filter.addEventListener("input", () => { filter.addEventListener("input", () => {
const term = filter.value.toLocaleLowerCase(); const term = filter.value.toLocaleLowerCase();
displayedItems = items.filter((item) => { displayedItems = items.filter((item) => {
const isVisible = !term || item.textContent.toLocaleLowerCase().includes(term); const isVisible = !term || item.textContent?.toLocaleLowerCase().includes(term);
item.style.display = isVisible ? "block" : "none"; item.style.display = isVisible ? "block" : "none";
return isVisible; return isVisible;
}); });
@ -1224,7 +1230,7 @@ class GroupNodeConfig {
checkPrimitiveConnection(link, inputName, inputs) { checkPrimitiveConnection(link, inputName, inputs) {
const sourceNode = this.nodeData.nodes[link[0]]; const sourceNode = this.nodeData.nodes[link[0]];
if (sourceNode.type === "PrimitiveNode") { if (sourceNode.type === "PrimitiveNode") {
const [sourceNodeId, _2, targetNodeId, __] = link; const [sourceNodeId, _, targetNodeId, __] = link;
const primitiveDef = this.primitiveDefs[sourceNodeId]; const primitiveDef = this.primitiveDefs[sourceNodeId];
const targetWidget = inputs[inputName]; const targetWidget = inputs[inputName];
const primitiveConfig = primitiveDef.input.required.value; const primitiveConfig = primitiveDef.input.required.value;
@ -1619,7 +1625,7 @@ class GroupNodeHandler {
return newNodes; return newNodes;
}; };
const getExtraMenuOptions = this.node.getExtraMenuOptions; const getExtraMenuOptions = this.node.getExtraMenuOptions;
this.node.getExtraMenuOptions = function(_2, options) { this.node.getExtraMenuOptions = function(_, options) {
getExtraMenuOptions?.apply(this, arguments); getExtraMenuOptions?.apply(this, arguments);
let optionIndex = options.findIndex((o) => o.content === "Outputs"); let optionIndex = options.findIndex((o) => o.content === "Outputs");
if (optionIndex === -1) optionIndex = options.length; if (optionIndex === -1) optionIndex = options.length;
@ -1793,7 +1799,7 @@ class GroupNodeHandler {
} else if (innerNode.type === "Reroute") { } else if (innerNode.type === "Reroute") {
const rerouteLinks = this.groupData.linksFrom[old.node.index]; const rerouteLinks = this.groupData.linksFrom[old.node.index];
if (rerouteLinks) { if (rerouteLinks) {
for (const [_2, , targetNodeId, targetSlot] of rerouteLinks["0"]) { for (const [_, , targetNodeId, targetSlot] of rerouteLinks["0"]) {
const node = this.innerNodes[targetNodeId]; const node = this.innerNodes[targetNodeId];
const input = node.inputs[targetSlot]; const input = node.inputs[targetSlot];
if (input.widget) { if (input.widget) {
@ -2408,10 +2414,10 @@ const ext = {
defaultValue: 2, defaultValue: 2,
type: "combo", type: "combo",
options: [ options: [
{ value: LiteGraph.STRAIGHT_LINK, text: "Straight" }, { value: LiteGraph.STRAIGHT_LINK.toString(), text: "Straight" },
{ value: LiteGraph.LINEAR_LINK, text: "Linear" }, { value: LiteGraph.LINEAR_LINK.toString(), text: "Linear" },
{ value: LiteGraph.SPLINE_LINK, text: "Spline" }, { value: LiteGraph.SPLINE_LINK.toString(), text: "Spline" },
{ value: LiteGraph.HIDDEN_LINK, text: "Hidden" } { value: LiteGraph.HIDDEN_LINK.toString(), text: "Hidden" }
], ],
onChange(value) { onChange(value) {
app2.canvas.links_render_mode = +value; app2.canvas.links_render_mode = +value;
@ -3934,7 +3940,7 @@ app.registerExtension({
}; };
this.isVirtualNode = true; this.isVirtualNode = true;
} }
getExtraMenuOptions(_2, options) { getExtraMenuOptions(_, options) {
options.unshift( options.unshift(
{ {
content: (this.properties.showOutputText ? "Hide" : "Show") + " Type", content: (this.properties.showOutputText ? "Hide" : "Show") + " Type",
@ -4157,7 +4163,7 @@ app.registerExtension({
slot_types_default_in: {}, slot_types_default_in: {},
async beforeRegisterNodeDef(nodeType, nodeData, app2) { async beforeRegisterNodeDef(nodeType, nodeData, app2) {
var nodeId = nodeData.name; var nodeId = nodeData.name;
const inputs = nodeData["input"]["required"]; const inputs = nodeData["input"]?.["required"];
for (const inputKey in inputs) { for (const inputKey in inputs) {
var input = inputs[inputKey]; var input = inputs[inputKey];
if (typeof input[0] !== "string") continue; if (typeof input[0] !== "string") continue;
@ -4179,19 +4185,19 @@ app.registerExtension({
nodeType.comfyClass nodeType.comfyClass
); );
} }
var outputs = nodeData["output"]; var outputs = nodeData["output"] ?? [];
for (const key in outputs) { for (const el of outputs) {
var type = outputs[key]; const type2 = el;
if (!(type in this.slot_types_default_in)) { if (!(type2 in this.slot_types_default_in)) {
this.slot_types_default_in[type] = ["Reroute"]; this.slot_types_default_in[type2] = ["Reroute"];
} }
this.slot_types_default_in[type].push(nodeId); this.slot_types_default_in[type2].push(nodeId);
if (!(type in LiteGraph.registered_slot_out_types)) { if (!(type2 in LiteGraph.registered_slot_out_types)) {
LiteGraph.registered_slot_out_types[type] = { nodes: [] }; LiteGraph.registered_slot_out_types[type2] = { nodes: [] };
} }
LiteGraph.registered_slot_out_types[type].nodes.push(nodeType.comfyClass); LiteGraph.registered_slot_out_types[type2].nodes.push(nodeType.comfyClass);
if (!LiteGraph.slot_types_out.includes(type)) { if (!LiteGraph.slot_types_out.includes(type2)) {
LiteGraph.slot_types_out.push(type); LiteGraph.slot_types_out.push(type2);
} }
} }
var maxNum = this.suggestionsNumber.value; var maxNum = this.suggestionsNumber.value;
@ -4276,7 +4282,7 @@ app.registerExtension({
} else { } else {
w = node.size[0]; w = node.size[0];
h = node.size[1]; h = node.size[1];
let titleMode = node.constructor.title_mode; const titleMode = node.constructor.title_mode;
if (titleMode !== LiteGraph.TRANSPARENT_TITLE && titleMode !== LiteGraph.NO_TITLE) { if (titleMode !== LiteGraph.TRANSPARENT_TITLE && titleMode !== LiteGraph.NO_TITLE) {
h += LiteGraph.NODE_TITLE_HEIGHT; h += LiteGraph.NODE_TITLE_HEIGHT;
shiftY -= LiteGraph.NODE_TITLE_HEIGHT; shiftY -= LiteGraph.NODE_TITLE_HEIGHT;
@ -4627,108 +4633,4 @@ app.registerExtension({
}; };
} }
}); });
function getNodeSource(node) { //# sourceMappingURL=index-BReiUkk9.js.map
const nodeDef = node.constructor.nodeData;
if (!nodeDef) {
return null;
}
const nodeDefStore = useNodeDefStore();
return nodeDefStore.nodeDefsByName[nodeDef.name]?.nodeSource ?? null;
}
__name(getNodeSource, "getNodeSource");
function isCoreNode(node) {
return getNodeSource(node)?.type === NodeSourceType.Core;
}
__name(isCoreNode, "isCoreNode");
function badgeTextVisible(node, badgeMode) {
return badgeMode === NodeBadgeMode.None || isCoreNode(node) && badgeMode === NodeBadgeMode.HideBuiltIn;
}
__name(badgeTextVisible, "badgeTextVisible");
function getNodeIdBadgeText(node, nodeIdBadgeMode) {
return badgeTextVisible(node, nodeIdBadgeMode) ? "" : `#${node.id}`;
}
__name(getNodeIdBadgeText, "getNodeIdBadgeText");
function getNodeSourceBadgeText(node, nodeSourceBadgeMode) {
const nodeSource = getNodeSource(node);
return badgeTextVisible(node, nodeSourceBadgeMode) ? "" : nodeSource?.badgeText ?? "";
}
__name(getNodeSourceBadgeText, "getNodeSourceBadgeText");
function getNodeLifeCycleBadgeText(node, nodeLifeCycleBadgeMode) {
let text = "";
const nodeDef = node.constructor.nodeData;
if (!nodeDef) {
return "";
}
if (nodeDef.deprecated) {
text = "[DEPR]";
}
if (nodeDef.experimental) {
text = "[BETA]";
}
return badgeTextVisible(node, nodeLifeCycleBadgeMode) ? "" : text;
}
__name(getNodeLifeCycleBadgeText, "getNodeLifeCycleBadgeText");
class NodeBadgeExtension {
static {
__name(this, "NodeBadgeExtension");
}
constructor(nodeIdBadgeMode = null, nodeSourceBadgeMode = null, nodeLifeCycleBadgeMode = null, colorPalette = null) {
this.nodeIdBadgeMode = nodeIdBadgeMode;
this.nodeSourceBadgeMode = nodeSourceBadgeMode;
this.nodeLifeCycleBadgeMode = nodeLifeCycleBadgeMode;
this.colorPalette = colorPalette;
}
name = "Comfy.NodeBadge";
init(app2) {
const settingStore = useSettingStore();
this.nodeSourceBadgeMode = computed(
() => settingStore.get("Comfy.NodeBadge.NodeSourceBadgeMode")
);
this.nodeIdBadgeMode = computed(
() => settingStore.get("Comfy.NodeBadge.NodeIdBadgeMode")
);
this.nodeLifeCycleBadgeMode = computed(
() => settingStore.get(
"Comfy.NodeBadge.NodeLifeCycleBadgeMode"
)
);
this.colorPalette = computed(
() => getColorPalette(settingStore.get("Comfy.ColorPalette"))
);
watch(this.nodeSourceBadgeMode, () => {
app2.graph.setDirtyCanvas(true, true);
});
watch(this.nodeIdBadgeMode, () => {
app2.graph.setDirtyCanvas(true, true);
});
watch(this.nodeLifeCycleBadgeMode, () => {
app2.graph.setDirtyCanvas(true, true);
});
}
nodeCreated(node, app2) {
node.badgePosition = BadgePosition.TopRight;
node.badge_enabled = true;
const badge = computed(
() => new LGraphBadge({
text: _.truncate(
[
getNodeIdBadgeText(node, this.nodeIdBadgeMode.value),
getNodeLifeCycleBadgeText(
node,
this.nodeLifeCycleBadgeMode.value
),
getNodeSourceBadgeText(node, this.nodeSourceBadgeMode.value)
].filter((s) => s.length > 0).join(" "),
{
length: 31
}
),
fgColor: this.colorPalette.value.colors.litegraph_base?.BADGE_FG_COLOR || defaultColorPalette.colors.litegraph_base.BADGE_FG_COLOR,
bgColor: this.colorPalette.value.colors.litegraph_base?.BADGE_BG_COLOR || defaultColorPalette.colors.litegraph_base.BADGE_BG_COLOR
})
);
node.badges.push(() => badge.value);
}
}
app.registerExtension(new NodeBadgeExtension());
//# sourceMappingURL=index-D36_Nnai.js.map

1
web/assets/index-BReiUkk9.js.map generated vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,51 +1,30 @@
:root { .no-results-placeholder[data-v-a1e982e0] .p-card {
--red-600: #dc3545;
}
.comfy-missing-nodes[data-v-0a88b934] {
font-family: monospace;
color: var(--red-600);
padding: 1.5rem;
background-color: var(--surface-ground); background-color: var(--surface-ground);
border-radius: var(--border-radius); text-align: center;
box-shadow: var(--card-shadow); box-shadow: unset;
} }
.warning-title[data-v-0a88b934] { .no-results-placeholder h3[data-v-a1e982e0] {
margin-top: 0; color: var(--text-color);
margin-bottom: 0.5rem;
}
.no-results-placeholder p[data-v-a1e982e0] {
color: var(--text-color-secondary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.warning-description[data-v-0a88b934] {
margin-bottom: 1rem; .comfy-missing-nodes[data-v-05a7c5eb] {
}
.missing-nodes-list[data-v-0a88b934] {
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
} }
.missing-nodes-list.maximized[data-v-0a88b934] { .node-hint[data-v-05a7c5eb] {
max-height: unset;
}
.missing-node-item[data-v-0a88b934] {
display: flex;
align-items: center;
padding: 0.5rem;
}
.node-type[data-v-0a88b934] {
font-weight: 600;
color: var(--text-color);
}
.node-hint[data-v-0a88b934] {
margin-left: 0.5rem; margin-left: 0.5rem;
font-style: italic; font-style: italic;
color: var(--text-color-secondary); color: var(--text-color-secondary);
} }
[data-v-0a88b934] .p-button { [data-v-05a7c5eb] .p-button {
margin-left: auto; margin-left: auto;
} }
.added-nodes-warning[data-v-0a88b934] {
margin-top: 1rem;
font-style: italic;
}
:root { :root {
--red-600: #dc3545; --red-600: #dc3545;
@ -217,24 +196,6 @@
border: none !important; border: none !important;
} }
.no-results-placeholder[data-v-c19e9e10] {
height: 100%;
padding: 2rem;
}
.no-results-placeholder[data-v-c19e9e10] .p-card {
background-color: var(--surface-ground);
text-align: center;
box-shadow: unset;
}
.no-results-placeholder h3[data-v-c19e9e10] {
color: var(--text-color);
margin-bottom: 0.5rem;
}
.no-results-placeholder p[data-v-c19e9e10] {
color: var(--text-color-secondary);
margin-bottom: 1rem;
}
.settings-tab-panels { .settings-tab-panels {
padding-top: 0px !important; padding-top: 0px !important;
} }
@ -1808,6 +1769,9 @@ cursor: pointer;
max-width: 3200px; max-width: 3200px;
} }
} }
.pointer-events-none{
pointer-events: none;
}
.pointer-events-auto{ .pointer-events-auto{
pointer-events: auto; pointer-events: auto;
} }
@ -2049,6 +2013,9 @@ cursor: pointer;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
} }
.justify-self-end{
justify-self: end;
}
.overflow-hidden{ .overflow-hidden{
overflow: hidden; overflow: hidden;
} }
@ -2072,6 +2039,9 @@ cursor: pointer;
.whitespace-pre-line{ .whitespace-pre-line{
white-space: pre-line; white-space: pre-line;
} }
.whitespace-pre-wrap{
white-space: pre-wrap;
}
.text-wrap{ .text-wrap{
text-wrap: wrap; text-wrap: wrap;
} }
@ -2135,9 +2105,15 @@ cursor: pointer;
.p-2{ .p-2{
padding: 0.5rem; padding: 0.5rem;
} }
.p-3{
padding: 0.75rem;
}
.p-4{ .p-4{
padding: 1rem; padding: 1rem;
} }
.p-8{
padding: 2rem;
}
.px-0{ .px-0{
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
@ -2146,6 +2122,10 @@ cursor: pointer;
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
} }
.px-4{
padding-left: 1rem;
padding-right: 1rem;
}
.py-0{ .py-0{
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;

View File

@ -1,6 +1,6 @@
var __defProp = Object.defineProperty; var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { bM as script$4, A as createBaseVNode, g as openBlock, h as createElementBlock, m as mergeProps } from "./index-CgU1oKZt.js"; import { bS as script$4, A as createBaseVNode, g as openBlock, h as createElementBlock, m as mergeProps } from "./index-BHayQCxv.js";
var script$3 = { var script$3 = {
name: "BarsIcon", name: "BarsIcon",
"extends": script$4 "extends": script$4
@ -99,4 +99,4 @@ export {
script$2 as c, script$2 as c,
script as s script as s
}; };
//# sourceMappingURL=index-DYEEBf64.js.map //# sourceMappingURL=index-C_wOqB0f.js.map

File diff suppressed because one or more lines are too long

1
web/assets/index-CgU1oKZt.js.map generated vendored

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
var __defProp = Object.defineProperty; var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { bM as script$s, A as createBaseVNode, g as openBlock, h as createElementBlock, m as mergeProps, B as BaseStyle, R as script$t, am as toDisplayString, al as Ripple, t as resolveDirective, v as withDirectives, x as createBlock, O as resolveDynamicComponent, bN as script$u, l as resolveComponent, C as normalizeClass, ao as createSlots, y as withCtx, bf as script$v, b5 as script$w, M as Fragment, N as renderList, ap as createTextVNode, aX as setAttribute, a1 as UniqueComponentId, aV as normalizeProps, p as renderSlot, j as createCommentVNode, ac as equals, aS as script$x, bO as script$y, bP as getFirstFocusableElement, a5 as OverlayEventBus, Y as getVNodeProp, a3 as resolveFieldData, bQ as invokeElementMethod, bR as getAttribute, bS as getNextElementSibling, W as getOuterWidth, bT as getPreviousElementSibling, D as script$z, ai as script$A, bU as script$B, aU as script$D, a0 as isNotEmpty, b2 as withModifiers, X as getOuterHeight, bV as _default, a2 as ZIndex, a4 as focus, a7 as addStyle, a9 as absolutePosition, aa as ConnectedOverlayScrollHandler, ab as isTouchDevice, bW as FilterOperator, ah as script$E, bX as FocusTrap, i as createVNode, an as Transition, bY as withKeys, bZ as getIndex, s as script$G, b_ as isClickable, b$ as clearSelection, c0 as localeComparator, c1 as sort, c2 as FilterService, bH as FilterMatchMode, ae as findSingle, c3 as findIndexInList, c4 as find, c5 as exportCSV, c6 as getOffset, c7 as getHiddenElementOuterWidth, c8 as getHiddenElementOuterHeight, c9 as reorderArray, ca as getWindowScrollTop, cb as removeClass, cc as addClass, a6 as isEmpty, ag as script$H, aj as script$I, aT as script$L, $ as vShow } from "./index-CgU1oKZt.js"; import { bS as script$s, A as createBaseVNode, g as openBlock, h as createElementBlock, m as mergeProps, B as BaseStyle, R as script$t, a6 as toDisplayString, a1 as Ripple, t as resolveDirective, v as withDirectives, x as createBlock, J as resolveDynamicComponent, bT as script$u, l as resolveComponent, C as normalizeClass, av as createSlots, y as withCtx, br as script$v, bh as script$w, N as Fragment, O as renderList, aw as createTextVNode, b7 as setAttribute, ad as UniqueComponentId, b5 as normalizeProps, p as renderSlot, j as createCommentVNode, a4 as equals, b2 as script$x, bU as script$y, bV as getFirstFocusableElement, ag as OverlayEventBus, a8 as getVNodeProp, af as resolveFieldData, bW as invokeElementMethod, a2 as getAttribute, bX as getNextElementSibling, Y as getOuterWidth, bY as getPreviousElementSibling, D as script$z, ar as script$A, a0 as script$B, b4 as script$D, ac as isNotEmpty, be as withModifiers, W as getOuterHeight, bZ as _default, ae as ZIndex, a3 as focus, ai as addStyle, ak as absolutePosition, al as ConnectedOverlayScrollHandler, am as isTouchDevice, b_ as FilterOperator, aq as script$E, b$ as FocusTrap, i as createVNode, au as Transition, c0 as withKeys, c1 as getIndex, s as script$G, c2 as isClickable, c3 as clearSelection, c4 as localeComparator, c5 as sort, c6 as FilterService, bN as FilterMatchMode, V as findSingle, c7 as findIndexInList, c8 as find, c9 as exportCSV, X as getOffset, ca as getHiddenElementOuterWidth, cb as getHiddenElementOuterHeight, cc as reorderArray, cd as getWindowScrollTop, ce as removeClass, cf as addClass, ah as isEmpty, ap as script$H, as as script$I, b3 as script$L, ab as vShow } from "./index-BHayQCxv.js";
import { b as script$C, c as script$F, s as script$J, a as script$K } from "./index-DYEEBf64.js"; import { b as script$C, c as script$F, s as script$J, a as script$K } from "./index-C_wOqB0f.js";
var script$r = { var script$r = {
name: "ArrowDownIcon", name: "ArrowDownIcon",
"extends": script$s "extends": script$s
@ -8994,4 +8994,4 @@ export {
script as b, script as b,
script$2 as s script$2 as s
}; };
//# sourceMappingURL=index-DBWDcZsl.js.map //# sourceMappingURL=index-CwRXxFdA.js.map

File diff suppressed because one or more lines are too long

1
web/assets/index-D36_Nnai.js.map generated vendored

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
var __defProp = Object.defineProperty; var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { bq as api, bv as $el } from "./index-CgU1oKZt.js"; import { bC as api, bG as $el } from "./index-BHayQCxv.js";
function createSpinner() { function createSpinner() {
const div = document.createElement("div"); const div = document.createElement("div");
div.innerHTML = `<div class="lds-ring"><div></div><div></div><div></div><div></div></div>`; div.innerHTML = `<div class="lds-ring"><div></div><div></div><div></div><div></div></div>`;
@ -126,4 +126,4 @@ window.comfyAPI.userSelection.UserSelectionScreen = UserSelectionScreen;
export { export {
UserSelectionScreen UserSelectionScreen
}; };
//# sourceMappingURL=userSelection-DVDwxLD5.js.map //# sourceMappingURL=userSelection-DITGVoWz.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
var __defProp = Object.defineProperty; var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { e as LGraphNode, c as app, bA as applyTextReplacements, bz as ComfyWidgets, bG as addValueControlWidgets, k as LiteGraph } from "./index-CgU1oKZt.js"; import { e as LGraphNode, c as app, bL as applyTextReplacements, bK as ComfyWidgets, bM as addValueControlWidgets, k as LiteGraph } from "./index-BHayQCxv.js";
const CONVERTED_TYPE = "converted-widget"; const CONVERTED_TYPE = "converted-widget";
const VALID_TYPES = [ const VALID_TYPES = [
"STRING", "STRING",
@ -753,4 +753,4 @@ export {
mergeIfValid, mergeIfValid,
setWidgetConfig setWidgetConfig
}; };
//# sourceMappingURL=widgetInputs-DNVvusS1.js.map //# sourceMappingURL=widgetInputs-DdecKYqd.js.map

File diff suppressed because one or more lines are too long

4
web/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="user.css" /> <link rel="stylesheet" type="text/css" href="user.css" />
<link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" /> <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
<script type="module" crossorigin src="./assets/index-CgU1oKZt.js"></script> <script type="module" crossorigin src="./assets/index-BHayQCxv.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BDQCPKeJ.css"> <link rel="stylesheet" crossorigin href="./assets/index-BitceZ14.css">
</head> </head>
<body class="litegraph grid"> <body class="litegraph grid">
<div id="vue-app"></div> <div id="vue-app"></div>