mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 10:44:12 +00:00
42fb8ff04b
- Create LibraryGridCard component for consistent card design - Refactor LibrarySidebar with multi-select checkbox filters - Create AssetsSidebar with same styling as LibrarySidebar - Create TemplatesSidebar with category filters - Add expand icon to all sidebar panels (Library, Assets, Templates) - Add thumbnails to mock data for workflows, models, nodepacks - Remove categorization in favor of filter dropdowns - Add Library Hub view to workspace with route 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
101 lines
1.9 KiB
Vue
101 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { WidgetDefinition } from '@/types/node'
|
|
|
|
interface Props {
|
|
widget: WidgetDefinition<string>
|
|
modelValue: string
|
|
multiline?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
multiline: false,
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
}>()
|
|
|
|
const placeholder = computed(() => props.widget.options?.placeholder ?? '')
|
|
const disabled = computed(() => props.widget.options?.disabled ?? false)
|
|
|
|
function handleInput(event: Event): void {
|
|
const target = event.target as HTMLInputElement | HTMLTextAreaElement
|
|
emit('update:modelValue', target.value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="widget-text" @pointerdown.stop @mousedown.stop>
|
|
<textarea
|
|
v-if="multiline"
|
|
:value="modelValue"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
class="custom-textarea nodrag"
|
|
rows="3"
|
|
@input="handleInput"
|
|
/>
|
|
<input
|
|
v-else
|
|
type="text"
|
|
:value="modelValue"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
class="custom-input nodrag"
|
|
@input="handleInput"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.widget-text {
|
|
width: 100%;
|
|
}
|
|
|
|
.custom-input {
|
|
width: 100%;
|
|
height: 24px;
|
|
background: #2a2a2e;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: #e4e4e7;
|
|
padding: 0 10px;
|
|
font-size: 11px;
|
|
outline: none;
|
|
}
|
|
|
|
.custom-textarea {
|
|
width: 100%;
|
|
background: #2a2a2e;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: #e4e4e7;
|
|
padding: 6px 10px;
|
|
font-size: 11px;
|
|
outline: none;
|
|
resize: none;
|
|
}
|
|
|
|
.custom-input:hover,
|
|
.custom-textarea:hover {
|
|
background: #323238;
|
|
}
|
|
|
|
.custom-input:focus,
|
|
.custom-textarea:focus {
|
|
background: #323238;
|
|
}
|
|
|
|
.custom-input:disabled,
|
|
.custom-textarea:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.custom-input::placeholder,
|
|
.custom-textarea::placeholder {
|
|
color: #52525b;
|
|
}
|
|
</style>
|