vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ai-templates): single full-size style card look in both wizard and automation node

Browse source
This commit is contained in:
Paulo Castellano 2026-06-17 20:12:25 -03:00
parent f3965b22f1
commit fe0b4ea3d2
2 changed files with 15 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
resources/js/components/ai/ContentStylePicker.vue
View file

@ -8,13 +8,10 @@ interface StyleOption {
description?: string;
}
const props = withDefaults(defineProps<{
const props = defineProps<{
modelValue: string;
styles: StyleOption[];
compact?: boolean;
}>(), {
compact: false,
});
}>();
const emit = defineEmits<{
'update:modelValue': [string];
@ -26,64 +23,25 @@ const select = (key: string) => {
</script>
<template>
<div
class="grid gap-2"
:class="compact ? 'grid-cols-3' : 'gap-3 sm:grid-cols-3'"
>
<div class="grid gap-3 sm:grid-cols-3">
<button
v-for="style in props.styles"
:key="style.key"
type="button"
:class="[
compact
? 'flex flex-col items-center gap-1.5 rounded-lg border p-2 text-left transition-colors'
: 'relative flex cursor-pointer flex-col overflow-hidden rounded-xl border-2 border-foreground bg-card text-left shadow-2xs transition-all hover:bg-foreground/5',
compact
? (modelValue === style.key
? 'border-violet-500 bg-violet-50 dark:bg-violet-950/30'
: 'border-border hover:border-violet-300 hover:bg-muted/50')
: (modelValue === style.key
? '!bg-violet-100 shadow-md'
: ''),
]"
class="relative flex cursor-pointer flex-col overflow-hidden rounded-xl border-2 border-foreground bg-card text-left shadow-2xs transition-all hover:bg-foreground/5"
:class="modelValue === style.key ? '!bg-violet-100 shadow-md' : ''"
@click="select(style.key)"
>
<!-- Compact variant: simple thumbnail + name + active text color -->
<template v-if="compact">
<img
:src="style.preview"
:alt="style.name"
class="w-full rounded object-cover"
/>
<span
class="text-center text-[10px] font-medium leading-tight"
:class="modelValue === style.key ? 'text-violet-700 dark:text-violet-300' : 'text-foreground/70'"
>
{{ style.name }}
</span>
</template>
<!-- Full variant: aspect-video thumbnail + name + description + check icon -->
<template v-else>
<div class="aspect-video w-full overflow-hidden bg-muted">
<img
:src="style.preview"
:alt="style.name"
class="size-full object-cover"
/>
<div class="aspect-video w-full overflow-hidden bg-muted">
<img :src="style.preview" :alt="style.name" class="size-full object-cover" />
</div>
<div class="flex items-start gap-2 p-3">
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-bold text-foreground">{{ style.name }}</p>
<p v-if="style.description" class="mt-0.5 text-xs leading-snug text-foreground/60">{{ style.description }}</p>
</div>
<div class="flex items-start gap-2 p-3">
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-bold text-foreground">{{ style.name }}</p>
<p v-if="style.description" class="mt-0.5 text-xs leading-snug text-foreground/60">{{ style.description }}</p>
</div>
<IconCheck
v-if="modelValue === style.key"
class="mt-0.5 size-4 shrink-0 text-foreground"
stroke-width="3"
/>
</div>
</template>
<IconCheck v-if="modelValue === style.key" class="mt-0.5 size-4 shrink-0 text-foreground" stroke-width="3" />
</div>
</button>
</div>
</template>

2
resources/js/components/automations/config/GenerateNodeConfig.vue
View file

@ -305,7 +305,7 @@ const channels = computed<Channel[]>(() =>
<div class="space-y-2">
<Label class="text-sm font-bold">{{ $t('automations.config.generate.style') }}</Label>
<ContentStylePicker v-model="local.style" :styles="contentStyles" compact />
<ContentStylePicker v-model="local.style" :styles="contentStyles" />
</div>
<div v-if="imageCountCap >= 1" class="space-y-2">