chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: properties alignment

Browse source
This commit is contained in:
puriphatt 2024-06-20 06:16:06 +00:00
parent 44cd753fc3
commit 946bb4fb18
1 changed files with 53 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/components/04_product-service/ServiceProperties.vue
View file

@ -196,61 +196,62 @@ function confirmDelete(items: unknown[], index: number) {
:class="
index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
"
:ref="`item-${index}`"
>
<q-btn
id="btn-move-up-product"
icon="mdi-arrow-up"
dense
flat
round
:disable="index === 0"
style="color: hsl(var(--text-mute-2))"
@click="moveItemUp(formServiceProperties.additional, index)"
/>
<q-btn
id="btn-move-down-product"
icon="mdi-arrow-down"
dense
flat
round
:disable="index === formServiceProperties.additional.length - 1"
style="color: hsl(var(--text-mute-2))"
@click="moveItemDown(formServiceProperties.additional, index)"
/>
<div class="col row items-center">
<q-btn
id="btn-move-up-product"
icon="mdi-arrow-up"
dense
flat
round
:disable="index === 0"
style="color: hsl(var(--text-mute-2))"
@click="moveItemUp(formServiceProperties.additional, index)"
/>
<q-btn
id="btn-move-down-product"
icon="mdi-arrow-down"
dense
flat
round
:disable="index === formServiceProperties.additional.length - 1"
style="color: hsl(var(--text-mute-2))"
@click="moveItemDown(formServiceProperties.additional, index)"
/>
<q-avatar
size="md"
class="q-mx-lg"
style="background-color: var(--surface-3)"
>
{{ index + 1 }}
</q-avatar>
<q-avatar
size="md"
class="q-mx-lg"
style="background-color: var(--surface-3)"
>
{{ index + 1 }}
</q-avatar>
<!-- type -->
<q-select
dense
outlined
emit-value
map-options
hide-bottom-space
class="col q-mr-md"
label="Properties Name"
option-label="label"
option-value="value"
:options="propertiesOption"
v-model="p.fieldName"
>
<template v-slot:option="scope">
<q-item
v-if="scope.opt && shouldShowItem(scope.opt)"
v-bind="scope.itemProps"
class="row items-center col-12"
>
{{ scope.opt.label }}
</q-item>
</template>
</q-select>
<!-- type -->
<q-select
dense
outlined
emit-value
map-options
hide-bottom-space
class="col q-mr-md"
label="Properties Name"
option-label="label"
option-value="value"
:options="propertiesOption"
v-model="p.fieldName"
>
<template v-slot:option="scope">
<q-item
v-if="scope.opt && shouldShowItem(scope.opt)"
v-bind="scope.itemProps"
class="row items-center col-12"
>
{{ scope.opt.label }}
</q-item>
</template>
</q-select>
</div>
<div class="col">
<q-select