duhanbalci/dreport
1
0
Fork 0
mirror of https://github.com/duhanbalci/dreport.git synced 2026-07-01 18:39:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Duhan BALCI
2026-04-09 01:40:37 +03:00
parent aa27228d08
commit 58a59f2609
31 changed files with 2221 additions and 3460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/src/components/properties/SizeProperties.vue
View File

@@ -1,120 +1,83 @@
<script setup lang="ts">
import { useTemplateStore } from '../../stores/template'
import PropSection from './shared/PropSection.vue'
import PropNumberInput from './shared/PropNumberInput.vue'
import type { TemplateElement, SizeValue } from '../../core/types'
import '../../styles/properties.css'
const props = defineProps<{ element: TemplateElement }>()
const templateStore = useTemplateStore()
const sizeOptions = [
{ value: 'auto', label: 'Otomatik' },
{ value: 'fixed', label: 'Sabit (mm)' },
{ value: 'fr', label: 'Oran (fr)' },
]
function updateSize(axis: 'width' | 'height', sv: SizeValue) {
templateStore.updateElementSize(props.element.id, { [axis]: sv })
}
function onTypeChange(axis: 'width' | 'height', type: string) {
if (type === 'auto') updateSize(axis, { type: 'auto' })
else if (type === 'fr') updateSize(axis, { type: 'fr', value: 1 })
else updateSize(axis, { type: 'fixed', value: axis === 'width' ? 50 : 20 })
}
</script>
<template>
<div class="prop-section">
<div class="prop-section__title">Boyut</div>
<PropSection title="Boyut">
<div class="prop-row" data-tip="Genislik boyutlandirma modu">
<label class="prop-label">Genislik</label>
<select
class="prop-input prop-select"
:value="element.size.width.type"
@change="
(e) => {
const t = (e.target as HTMLSelectElement).value
if (t === 'auto') updateSize('width', { type: 'auto' })
else if (t === 'fr') updateSize('width', { type: 'fr', value: 1 })
else updateSize('width', { type: 'fixed', value: 50 })
}
"
@change="(e) => onTypeChange('width', (e.target as HTMLSelectElement).value)"
>
<option value="auto">Otomatik</option>
<option value="fixed">Sabit (mm)</option>
<option value="fr">Oran (fr)</option>
<option v-for="opt in sizeOptions" :key="opt.value" :value="opt.value">
{{ opt.label }}
</option>
</select>
</div>
<div
<PropNumberInput
v-if="element.size.width.type === 'fixed'"
class="prop-row"
label="mm"
:model-value="(element.size.width as any).value"
:step="1"
:min="1"
data-tip="Sabit genislik degeri (mm)"
>
<label class="prop-label">mm</label>
<input
class="prop-input"
type="number"
step="1"
min="1"
:value="(element.size.width as any).value"
@input="
(e) =>
updateSize('width', {
type: 'fixed',
value: parseFloat((e.target as HTMLInputElement).value) || 10,
})
"
/>
</div>
<div
@update:model-value="(v) => updateSize('width', { type: 'fixed', value: v })"
/>
<PropNumberInput
v-if="element.size.width.type === 'fr'"
class="prop-row"
label="fr"
:model-value="(element.size.width as any).value"
:step="1"
:min="1"
data-tip="Kalan alani oransal doldurma degeri"
>
<label class="prop-label">fr</label>
<input
class="prop-input"
type="number"
step="1"
min="1"
:value="(element.size.width as any).value"
@input="
(e) =>
updateSize('width', {
type: 'fr',
value: parseFloat((e.target as HTMLInputElement).value) || 1,
})
"
/>
</div>
@update:model-value="(v) => updateSize('width', { type: 'fr', value: v })"
/>
<div class="prop-row" data-tip="Yukseklik boyutlandirma modu">
<label class="prop-label">Yukseklik</label>
<select
class="prop-input prop-select"
:value="element.size.height.type"
@change="
(e) => {
const t = (e.target as HTMLSelectElement).value
if (t === 'auto') updateSize('height', { type: 'auto' })
else if (t === 'fr') updateSize('height', { type: 'fr', value: 1 })
else updateSize('height', { type: 'fixed', value: 20 })
}
"
@change="(e) => onTypeChange('height', (e.target as HTMLSelectElement).value)"
>
<option value="auto">Otomatik</option>
<option value="fixed">Sabit (mm)</option>
<option value="fr">Oran (fr)</option>
<option v-for="opt in sizeOptions" :key="opt.value" :value="opt.value">
{{ opt.label }}
</option>
</select>
</div>
<div
<PropNumberInput
v-if="element.size.height.type === 'fixed'"
class="prop-row"
label="mm"
:model-value="(element.size.height as any).value"
:step="1"
:min="1"
data-tip="Sabit yukseklik degeri (mm)"
>
<label class="prop-label">mm</label>
<input
class="prop-input"
type="number"
step="1"
min="1"
:value="(element.size.height as any).value"
@input="
(e) =>
updateSize('height', {
type: 'fixed',
value: parseFloat((e.target as HTMLInputElement).value) || 10,
})
"
/>
</div>
</div>
@update:model-value="(v) => updateSize('height', { type: 'fixed', value: v })"
/>
</PropSection>
</template>