Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 11:11:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use tailwind class in NodeSearchBox (#1559)

Browse Source
This commit is contained in:
Chenlei Hu
2024-11-15 20:46:04 -05:00
committed by GitHub
parent 6aad7ee8b6
commit c71644f02f
1 changed files with 10 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/searchbox/NodeSearchBox.vue
View File

@@ -1,6 +1,11 @@
<template> <template>
<div class="comfy-vue-node-search-container"> <div
<div class="comfy-vue-node-preview-container" v-if="enableNodePreview"> class="comfy-vue-node-search-container flex justify-center items-center w-full min-w-96 pointer-events-auto"
>
<div
class="comfy-vue-node-preview-container absolute left-[-350px] top-[50px]"
v-if="enableNodePreview"
>
<NodePreview <NodePreview
:nodeDef="hoveredSuggestion" :nodeDef="hoveredSuggestion"
:key="hoveredSuggestion?.name || ''" :key="hoveredSuggestion?.name || ''"
@@ -11,10 +16,10 @@
<Button <Button
icon="pi pi-filter" icon="pi pi-filter"
severity="secondary" severity="secondary"
class="_filter-button" class="z-10"
@click="nodeSearchFilterVisible = true" @click="nodeSearchFilterVisible = true"
/> />
<Dialog v-model:visible="nodeSearchFilterVisible" class="_dialog"> <Dialog v-model:visible="nodeSearchFilterVisible" class="min-w-96">
<template #header> <template #header>
<h3>Add node filter condition</h3> <h3>Add node filter condition</h3>
</template> </template>
@@ -25,7 +30,7 @@
<AutoCompletePlus <AutoCompletePlus
:model-value="props.filters" :model-value="props.filters"
class="comfy-vue-node-search-box" class="comfy-vue-node-search-box z-10 flex-grow"
scrollHeight="40vh" scrollHeight="40vh"
:placeholder="placeholder" :placeholder="placeholder"
:input-id="inputId" :input-id="inputId"
@@ -148,31 +153,3 @@ const setHoverSuggestion = (index: number) => {
hoveredSuggestion.value = value hoveredSuggestion.value = value
} }
</script> </script>
<style scoped>
.comfy-vue-node-search-container {
@apply flex justify-center items-center w-full min-w-96;
}
.comfy-vue-node-search-container * {
pointer-events: auto;
}
.comfy-vue-node-preview-container {
position: absolute;
left: -350px;
top: 50px;
}
.comfy-vue-node-search-box {
@apply z-10 flex-grow;
}
._filter-button {
z-index: 10;
}
._dialog {
@apply min-w-96;
}
</style>