746 lines
26 KiB
Vue
746 lines
26 KiB
Vue
<script lang="ts" setup>
|
|
import { storeToRefs } from 'pinia';
|
|
import { Icon } from '@iconify/vue';
|
|
import { onMounted, ref, watch } from 'vue';
|
|
|
|
import useOptionStore from 'stores/options';
|
|
import useProductServiceStore from 'stores/product-service';
|
|
import { formatNumberDecimal } from 'stores/utils';
|
|
import { useWorkflowTemplate } from 'src/stores/workflow-template';
|
|
import { Attributes, Product } from 'stores/product-service/types';
|
|
|
|
import NoData from '../NoData.vue';
|
|
import { AddButton } from '../button';
|
|
|
|
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
|
|
const productServiceStore = useProductServiceStore();
|
|
const optionStore = useOptionStore();
|
|
const workflowStore = useWorkflowTemplate();
|
|
|
|
const { fetchListOfWork } = productServiceStore;
|
|
const { workNameItems } = storeToRefs(productServiceStore);
|
|
|
|
const { data: workflowData } = storeToRefs(workflowStore);
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
workIndex: number;
|
|
length: number;
|
|
index: number;
|
|
readonly?: boolean;
|
|
installments?: number;
|
|
|
|
priceDisplay?: {
|
|
price: boolean;
|
|
agentPrice: boolean;
|
|
serviceCharge: boolean;
|
|
};
|
|
}>(),
|
|
{
|
|
priceDisplay: () => ({
|
|
price: true,
|
|
agentPrice: true,
|
|
serviceCharge: true,
|
|
}),
|
|
},
|
|
);
|
|
|
|
const workName = defineModel<string>('workName');
|
|
const attributes = defineModel<Attributes>('attributes', { required: true });
|
|
const productItems = defineModel<(Product & { nameEn: string })[]>(
|
|
'productItems',
|
|
{
|
|
required: true,
|
|
},
|
|
);
|
|
|
|
const refMenu = ref();
|
|
|
|
defineEmits<{
|
|
(e: 'moveWorkUp'): void;
|
|
(e: 'moveWorkDown'): void;
|
|
(e: 'deleteWork'): void;
|
|
(e: 'addProduct'): void;
|
|
(e: 'moveProductUp', items: unknown[], index: number): void;
|
|
(e: 'moveProductDown', items: unknown[], index: number): void;
|
|
(e: 'deleteProduct', items: unknown[], index: number): void;
|
|
|
|
(e: 'manageWorkName'): void;
|
|
(e: 'workProperties'): void;
|
|
}>();
|
|
|
|
async function fetchWorkflowOption(val?: string) {
|
|
const res = await workflowStore.getWorkflowTemplateList({
|
|
query: val,
|
|
pageSize: 30,
|
|
});
|
|
if (res) workflowData.value = res.result;
|
|
}
|
|
|
|
function toggleCheckProductInStep(id: string, stepIndex: number) {
|
|
const index = attributes.value.workflowStep[stepIndex].productsId.indexOf(id);
|
|
|
|
if (!attributes.value.workflowStep[stepIndex].productsId.includes(id)) {
|
|
attributes.value.workflowStep[stepIndex].productsId.push(id);
|
|
} else {
|
|
attributes.value.workflowStep[stepIndex].productsId.splice(index, 1);
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (props.workIndex === 0) {
|
|
await fetchWorkflowOption();
|
|
}
|
|
});
|
|
|
|
watch(
|
|
() => workNameItems.value,
|
|
(c, o) => {
|
|
const list = c.map((v: { name: string }) => v.name);
|
|
const oldList = o.map((v: { name: string }) => v.name);
|
|
const index = oldList.indexOf(workName.value || '');
|
|
|
|
if (
|
|
list[index] !== oldList[index] &&
|
|
!list.includes(workName.value || '')
|
|
) {
|
|
if (list.length - 1 === index - 1) workName.value = list[index - 1];
|
|
else workName.value = list[index];
|
|
}
|
|
},
|
|
);
|
|
</script>
|
|
<template>
|
|
<div class="bordered rounded">
|
|
<q-expansion-item
|
|
for="item-up"
|
|
id="item-up"
|
|
dense
|
|
switch-toggle-side
|
|
default-opened
|
|
expand-icon="mdi-chevron-down-circle"
|
|
header-class="expansion-rounded"
|
|
header-style="border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2)"
|
|
>
|
|
<template v-slot:header>
|
|
<div class="column full-width">
|
|
<div class="row items-center q-py-sm full-width" @click.stop>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
:id="`btn-work-up-product-${workIndex}`"
|
|
:for="`btn-work-up-product-${workIndex}`"
|
|
icon="mdi-arrow-up"
|
|
dense
|
|
flat
|
|
round
|
|
:disable="index === 0"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveWorkUp')"
|
|
/>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
:id="`btn-work-down-product-${workIndex}`"
|
|
:for="`btn-work-down-product-${workIndex}`"
|
|
icon="mdi-arrow-down"
|
|
dense
|
|
flat
|
|
round
|
|
class="q-mx-sm"
|
|
:disable="index === length - 1"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveWorkDown')"
|
|
/>
|
|
<div
|
|
:for="`select-work-name-${index + 1}`"
|
|
class="col q-py-sm q-px-md"
|
|
style="background-color: var(--surface-1); z-index: 2"
|
|
@click="() => (readonly ? '' : fetchListOfWork())"
|
|
>
|
|
<span class="text-body2" style="color: var(--foreground)">
|
|
{{ $t('productService.service.work') }} {{ index + 1 }} :
|
|
<span class="app-text-muted-2">
|
|
{{
|
|
workName ? workName : $t('productService.service.workName')
|
|
}}
|
|
</span>
|
|
</span>
|
|
<q-menu
|
|
v-if="!readonly"
|
|
fit
|
|
ref="refMenu"
|
|
self="top left"
|
|
anchor="bottom left"
|
|
>
|
|
<q-item>
|
|
<div class="full-width flex items-center justify-between">
|
|
{{ $t('productService.service.workName') }}
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
class="bordered q-px-sm text-capitalize"
|
|
style="
|
|
border-radius: var(--radius-2);
|
|
color: hsl(var(--info-bg));
|
|
"
|
|
@click.stop="
|
|
() => {
|
|
refMenu.hide();
|
|
$emit('manageWorkName');
|
|
}
|
|
"
|
|
>
|
|
<q-icon name="mdi-cog" size="xs" class="q-mr-sm" />
|
|
{{ $t('general.manage') }}
|
|
</q-btn>
|
|
</div>
|
|
</q-item>
|
|
<q-item
|
|
@click="workName = item.name"
|
|
clickable
|
|
v-for="(item, index) in workNameItems"
|
|
:key="index"
|
|
>
|
|
<div class="full-width flex items-center">
|
|
<q-icon
|
|
v-if="workName === item.name"
|
|
name="mdi-checkbox-marked"
|
|
size="xs"
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
/>
|
|
<q-icon
|
|
v-else
|
|
name="mdi-checkbox-blank-outline"
|
|
size="xs"
|
|
style="color: hsl(var(--text-mute))"
|
|
class="q-mr-sm"
|
|
/>
|
|
{{ item.name }}
|
|
</div>
|
|
</q-item>
|
|
</q-menu>
|
|
</div>
|
|
<!-- <SelectInput
|
|
:readonly
|
|
incremental
|
|
:model-value="mapFlowName(attributes.workflowId)"
|
|
id="select-workflow-name"
|
|
for="select-workflow-name"
|
|
class="col"
|
|
option-label="name"
|
|
:option="workflowData"
|
|
:placeholder="$t('productService.service.workName')"
|
|
@update:model-value="(val: WorkflowTemplate) => selectFlow(val)"
|
|
@filter="(val: string, update) => filter(val, update)"
|
|
>
|
|
<template #prepend>
|
|
<span class="text-body2" style="color: var(--foreground)">
|
|
{{
|
|
$t('productService.service.workNo', { msg: workIndex + 1 })
|
|
}}:
|
|
</span>
|
|
</template>
|
|
</SelectInput> -->
|
|
<div :class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }">
|
|
<q-btn
|
|
v-if="!readonly"
|
|
:id="`btn-delete-work-${workIndex}`"
|
|
icon="mdi-trash-can-outline"
|
|
dense
|
|
flat
|
|
round
|
|
padding="0"
|
|
class="q-ml-md"
|
|
color="negative"
|
|
@click.stop="$emit('deleteWork')"
|
|
>
|
|
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<section
|
|
v-if="!workName && productItems.length === 0"
|
|
class="surface-2 row items-center justify-center q-py-sm"
|
|
>
|
|
<NoData />
|
|
</section>
|
|
|
|
<section v-else class="surface-2">
|
|
<!-- product -->
|
|
<div class="bordered-t">
|
|
<div
|
|
class="q-py-xs text-weight-medium justify-between items-center q-px-md"
|
|
:class="{ row: $q.screen.gt.xs }"
|
|
style="background-color: hsla(var(--info-bg) / 0.1)"
|
|
>
|
|
{{ $t('productService.service.productInWork') }}
|
|
{{ workIndex + 1 }}
|
|
|
|
<span class="row items-center justify-between">
|
|
<q-checkbox
|
|
size="xs"
|
|
v-model="attributes.showTotalPrice"
|
|
:label="$t('productService.service.showTotalPrice')"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
:disable="readonly"
|
|
/>
|
|
<AddButton
|
|
v-if="!readonly"
|
|
icon-only
|
|
:id="`btn-add-work-product-${workIndex}`"
|
|
:for="`btn-add-work-product-${workIndex}`"
|
|
@click.stop="$emit('addProduct')"
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
v-if="productItems.length > 0"
|
|
class="q-py-md q-px-md full-width q-gutter-y-sm"
|
|
>
|
|
<section
|
|
v-for="(product, index) in productItems"
|
|
:key="product.id"
|
|
class="full-width items-center justify-between row"
|
|
>
|
|
<div
|
|
class="row col-md col-12 items-center justify-between full-width surface-1 q-px-sm q-py-xs rounded"
|
|
style="min-height: 70px"
|
|
>
|
|
<!-- product detail -->
|
|
<section
|
|
class="row items-center col-md col-12"
|
|
v-if="productItems"
|
|
>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
:id="`btn-product-up-${index}`"
|
|
icon="mdi-arrow-up"
|
|
dense
|
|
flat
|
|
round
|
|
size="sm"
|
|
:disable="index === 0"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveProductUp', productItems, index)"
|
|
/>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
:id="`btn-product-down-${index}`"
|
|
:for="`btn-product-down-${index}`"
|
|
icon="mdi-arrow-down"
|
|
dense
|
|
flat
|
|
round
|
|
size="sm"
|
|
:disable="index === productItems.length - 1"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveProductDown', productItems, index)"
|
|
/>
|
|
|
|
<q-avatar
|
|
size="sm"
|
|
class="q-mx-sm"
|
|
style="background-color: var(--surface-tab)"
|
|
>
|
|
{{ index + 1 }}
|
|
</q-avatar>
|
|
|
|
<div
|
|
class="col-md col-12 row items-center"
|
|
:class="{ 'q-pt-sm': $q.screen.lt.md }"
|
|
>
|
|
<div
|
|
:class="{ 'col-12 flex justify-center': $q.screen.lt.md }"
|
|
>
|
|
<div class="bordered q-mx-md col-md-3 image-box">
|
|
<q-img
|
|
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
|
|
style="object-fit: cover; width: 100%; height: 100%"
|
|
>
|
|
<template #error>
|
|
<div
|
|
class="surface-3 full-width full-height no-padding"
|
|
>
|
|
<q-img src="blank-image.png"></q-img>
|
|
</div>
|
|
</template>
|
|
</q-img>
|
|
</div>
|
|
</div>
|
|
<article
|
|
class="column col-md col-12 full-width justify-between"
|
|
:class="{ 'q-py-sm': $q.screen.lt.md }"
|
|
>
|
|
<span
|
|
class="text-weight-medium ellipsis-2-lines full-width"
|
|
>
|
|
{{ product.name }}
|
|
<q-tooltip>
|
|
{{ product.name }}
|
|
</q-tooltip>
|
|
</span>
|
|
<div class="text-caption">
|
|
<span class="bordered q-px-xs rounded q-mr-sm">
|
|
{{ product.code }}
|
|
</span>
|
|
|
|
<q-icon name="mdi-clock-outline" />
|
|
{{ product.process }} {{ $t('general.day') }}
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- product price -->
|
|
<div class="row justify-end text-right col-md col-12">
|
|
<span class="col-12 row" style="color: var(--teal-9)">
|
|
<span
|
|
v-if="priceDisplay?.price"
|
|
class="col-md col-12 ellipsis price-orange text-weight-bold"
|
|
:class="{ 'row justify-between': $q.screen.lt.md }"
|
|
>
|
|
<div class="text-caption app-text-muted-2">
|
|
{{ $t('productService.product.salePrice') }}
|
|
</div>
|
|
฿{{ formatNumberDecimal(product.price, 2) }}
|
|
<q-tooltip
|
|
anchor="bottom right"
|
|
self="center right"
|
|
:delay="300"
|
|
>
|
|
฿{{ formatNumberDecimal(product.price, 2) }}
|
|
</q-tooltip>
|
|
</span>
|
|
<span
|
|
v-if="priceDisplay?.agentPrice"
|
|
class="col-md col-12 ellipsis price-purple text-weight-bold"
|
|
:class="{ 'row justify-between': $q.screen.lt.md }"
|
|
>
|
|
<div class="text-caption app-text-muted-2">
|
|
{{ $t('productService.product.agentPrice') }}
|
|
</div>
|
|
฿{{ formatNumberDecimal(product.agentPrice, 2) }}
|
|
<q-tooltip
|
|
anchor="bottom right"
|
|
self="center right"
|
|
:delay="300"
|
|
>
|
|
฿{{ formatNumberDecimal(product.agentPrice, 2) }}
|
|
</q-tooltip>
|
|
</span>
|
|
<span
|
|
v-if="priceDisplay?.serviceCharge"
|
|
class="col-md col-12 ellipsis price-pink"
|
|
:class="{ 'row justify-between': $q.screen.lt.md }"
|
|
>
|
|
<div class="text-caption app-text-muted-2">
|
|
{{ $t('productService.product.processingPrice') }}
|
|
</div>
|
|
฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
|
|
<q-tooltip
|
|
anchor="bottom right"
|
|
self="center right"
|
|
:delay="300"
|
|
>
|
|
฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
|
|
</q-tooltip>
|
|
</span>
|
|
<span
|
|
class="col-md col-12 ellipsis text-weight-medium"
|
|
:class="{ 'row justify-between': $q.screen.lt.md }"
|
|
>
|
|
<div class="text-caption app-text-muted-2">
|
|
{{ $t('productService.service.InstallmentsNo') }}
|
|
</div>
|
|
{{ !readonly ? '' : product.installmentNo }}
|
|
<span v-if="!readonly" class="row justify-end">
|
|
<q-input
|
|
outlined
|
|
:max="installments"
|
|
input-class="text-right no-padding"
|
|
for="input-bankbook"
|
|
hide-bottom-space
|
|
class="installment-no col-10"
|
|
dense
|
|
type="number"
|
|
v-model="product.installmentNo"
|
|
min="1"
|
|
/>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }"
|
|
>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
class="q-ml-md"
|
|
:id="`btn-delete-work-product-${index}`"
|
|
:for="`btn-delete-work-product-${index}`"
|
|
icon="mdi-trash-can-outline"
|
|
padding="0"
|
|
dense
|
|
flat
|
|
round
|
|
color="negative"
|
|
@click.stop="$emit('deleteProduct', productItems, index)"
|
|
>
|
|
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div v-else class="app-text-muted q-py-md q-px-md">
|
|
{{ $t('productService.product.noProduct') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- properties -->
|
|
<div class="bordered-t">
|
|
<q-expansion-item
|
|
default-opened
|
|
switch-toggle-side
|
|
header-style="background-color: hsla(var(--info-bg) / 0.1); padding: 4px 16px; min-height: 36.08px"
|
|
header-class="row items-center q-px-md"
|
|
expand-icon-class="no-padding"
|
|
dense
|
|
>
|
|
<template #header>
|
|
<div
|
|
class="text-weight-medium row justify-between items-center full-width"
|
|
>
|
|
<span>
|
|
{{ $t('flow.processStep') }}
|
|
</span>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
:id="`btn-add-work-product-${workIndex}`"
|
|
class="text-capitalize rounded"
|
|
flat
|
|
dense
|
|
padding="4px 8px"
|
|
style="color: hsl(var(--info-bg))"
|
|
@click.stop="$emit('workProperties')"
|
|
>
|
|
<Icon
|
|
icon="basil:settings-adjust-solid"
|
|
width="20.08px"
|
|
style="color: hsl(var(--info-bg))"
|
|
/>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
<div class="q-py-md q-px-md full-width column">
|
|
<span class="app-text-muted">
|
|
{{
|
|
!attributes.hasOwnProperty('workflowStep')
|
|
? $t('general.no', { msg: $t('flow.title') })
|
|
: !attributes.workflowId
|
|
? $t('general.no', { msg: $t('flow.title') })
|
|
: attributes.workflowStep?.length === 0
|
|
? $t('flow.noProcessStep')
|
|
: attributes.workflowStep?.every(
|
|
(s) => !s.attributes.properties?.length,
|
|
)
|
|
? $t('productService.service.noPropertiesYet')
|
|
: ''
|
|
}}
|
|
</span>
|
|
|
|
<template
|
|
v-for="(step, stepIndex) in attributes.workflowStep"
|
|
:key="stepIndex"
|
|
>
|
|
<span
|
|
v-if="
|
|
attributes.workflowStep[stepIndex].attributes.properties
|
|
.length > 0
|
|
"
|
|
>
|
|
<q-icon name="mdi-circle-medium" />
|
|
{{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
|
|
{{ step.name }}
|
|
|
|
<!-- step att -->
|
|
<section
|
|
class="col scroll q-pa-sm flex items-center surface-1 rounded"
|
|
>
|
|
<div
|
|
v-if="
|
|
attributes.workflowStep[stepIndex].attributes.properties
|
|
.length > 0
|
|
"
|
|
class="row q-gutter-sm"
|
|
>
|
|
<span
|
|
v-for="(att, i) in step.attributes.properties"
|
|
:key="i"
|
|
class="surface-2 bordered rounded q-px-xs"
|
|
>
|
|
{{
|
|
optionStore.mapOption(
|
|
att.fieldName ?? '',
|
|
'propertiesField',
|
|
)
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div v-else class="app-text-muted-2">
|
|
{{ $t('productService.service.noProperties') }}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- step product -->
|
|
<section
|
|
class="q-pt-sm q-pl-lg column"
|
|
:class="{
|
|
'q-pb-sm':
|
|
stepIndex !== attributes.workflowStep.length - 1,
|
|
}"
|
|
>
|
|
<span class="app-text-muted-2 text-caption">
|
|
{{
|
|
$t('general.select', {
|
|
msg: $t('productService.product.title'),
|
|
})
|
|
}}
|
|
</span>
|
|
|
|
<div
|
|
v-if="productItems.length > 0"
|
|
class="surface-1 rounded q-pa-xs"
|
|
>
|
|
<div
|
|
v-for="product in productItems"
|
|
:key="product.id"
|
|
class="ellipsis-2-lines"
|
|
>
|
|
<q-checkbox
|
|
v-if="attributes.workflowStep[stepIndex].productsId"
|
|
:disable="readonly"
|
|
:model-value="
|
|
attributes.workflowStep[
|
|
stepIndex
|
|
].productsId.includes(product.id)
|
|
"
|
|
@click="
|
|
() => {
|
|
if (readonly) return;
|
|
toggleCheckProductInStep(product.id, stepIndex);
|
|
}
|
|
"
|
|
size="xs"
|
|
/>
|
|
{{ product.name }}
|
|
</div>
|
|
</div>
|
|
<span
|
|
v-else
|
|
class="app-text-muted-2 surface-1 rounded q-pa-xs"
|
|
>
|
|
{{ $t('productService.product.noProduct') }}
|
|
</span>
|
|
</section>
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</q-expansion-item>
|
|
<!-- <div class="q-py-md q-px-md full-width">
|
|
<div
|
|
v-if="attributes.additional.length > 0"
|
|
class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm scroll"
|
|
:style="$q.screen.xs ? 'max-height: 100px' : ''"
|
|
>
|
|
<div
|
|
v-for="(p, index) in attributes.additional"
|
|
:key="index"
|
|
class="bordered q-px-sm surface-3"
|
|
style="border-radius: 6px"
|
|
>
|
|
{{ optionStore.mapOption(p.fieldName ?? '') }}
|
|
</div>
|
|
</div>
|
|
<div v-else class="app-text-muted">
|
|
{{ $t('productService.service.noProperties') }}
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</section>
|
|
</q-expansion-item>
|
|
<div class="q-py-sm q-px-md bordered-t row items-center justify-between">
|
|
<div>
|
|
{{ $t('productService.service.totalProductWork') }}
|
|
<span class="app-text-muted-2">
|
|
<!-- {{ mapFlowName(attributes.workflowId) }} -->
|
|
{{ workName }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
{{ productItems?.length ?? 0 }} {{ $t('productService.service.list') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.image-box {
|
|
height: 45px;
|
|
width: 45px;
|
|
border-color: var(--teal-9);
|
|
border-radius: 10px;
|
|
background-color: var(--surface-3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
|
|
color: var(--brand-1);
|
|
}
|
|
|
|
:deep(
|
|
.q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
|
|
) {
|
|
justify-content: start !important;
|
|
padding-right: 8px !important;
|
|
padding-top: 16px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
.price-orange {
|
|
color: var(--orange-5);
|
|
&.dark {
|
|
color: var(--orange-6);
|
|
}
|
|
}
|
|
|
|
.price-purple {
|
|
color: var(--violet-11);
|
|
&.dark {
|
|
color: var(--violet-10);
|
|
}
|
|
}
|
|
|
|
.price-pink {
|
|
color: var(--pink-6);
|
|
}
|
|
|
|
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
|
|
color: hsl(var(--text-mute));
|
|
}
|
|
|
|
:deep(
|
|
i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
|
|
) {
|
|
color: var(--brand-1);
|
|
}
|
|
|
|
:deep(.installment-no .q-field__control) {
|
|
height: 23px;
|
|
}
|
|
</style>
|