SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

Fix text alignment icons: use direct template tags for auto-import

Browse source
This commit is contained in:
Danila Poyarkov 2026-02-28 09:01:54 +03:00
parent 7e9cd46e0b
commit 7b0f6c10f7
2 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components.d.ts vendored
View file

@ -16,6 +16,9 @@ declare module 'vue' {
EditorCanvas: typeof import('./src/components/EditorCanvas.vue')['default']
FillSection: typeof import('./src/components/properties/FillSection.vue')['default']
IconLucideALargeSmall: typeof import('~icons/lucide/a-large-small')['default']
IconLucideAlignCenter: typeof import('~icons/lucide/align-center')['default']
IconLucideAlignLeft: typeof import('~icons/lucide/align-left')['default']
IconLucideAlignRight: typeof import('~icons/lucide/align-right')['default']
IconLucideBaseline: typeof import('~icons/lucide/baseline')['default']
IconLucideCheck: typeof import('~icons/lucide/check')['default']
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']

18
src/components/properties/TypographySection.vue
View file

@ -41,11 +41,7 @@ const currentWeightLabel = computed(() =>
WEIGHTS.find((w) => w.value === node.fontWeight)?.label ?? 'Regular'
)
const ALIGN_OPTIONS = [
{ value: 'LEFT' as const, icon: 'icon-lucide-align-left' },
{ value: 'CENTER' as const, icon: 'icon-lucide-align-center' },
{ value: 'RIGHT' as const, icon: 'icon-lucide-align-right' }
]
type TextAlign = 'LEFT' | 'CENTER' | 'RIGHT'
async function openFontPicker() {
fontPickerOpen.value = true
@ -181,15 +177,17 @@ onMounted(async () => {
<!-- Text alignment -->
<div class="flex gap-0.5">
<button
v-for="opt in ALIGN_OPTIONS"
:key="opt.value"
v-for="align in (['LEFT', 'CENTER', 'RIGHT'] as TextAlign[])"
:key="align"
class="flex cursor-pointer items-center justify-center rounded border px-2 py-1"
:class="node.textAlignHorizontal === opt.value
:class="node.textAlignHorizontal === align
? 'border-accent bg-accent text-white'
: 'border-border bg-input text-muted hover:bg-hover hover:text-surface'"
@click="setAlign(opt.value)"
@click="setAlign(align)"
>
<component :is="opt.icon" class="size-3.5" />
<icon-lucide-align-left v-if="align === 'LEFT'" class="size-3.5" />
<icon-lucide-align-center v-else-if="align === 'CENTER'" class="size-3.5" />
<icon-lucide-align-right v-else class="size-3.5" />
</button>
</div>
</div>