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