components/calcValues.vue

@@ -15,6 +15,12 @@ const extra_section = use_extra_section()
 const total_length = use_total_length()
 const min_length = use_min_length()
 
+if (!pillar_color.value) {
+    const r = Math.floor(Math.random() * predefPillarColors.length)
+    pillar_color.value = predefPillarColors[r] as ralTypes
+    lamelle_color.value = predefLamelleColors[r] as ralTypes
+}
+
 const parametric = reactive({
     length: {
         min: min_length.value,
@@ -130,7 +136,7 @@ watch(() => form_state, changeParametres, { deep: true })
 const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
     isModalOpen.value = !isModalOpen.value
-    if(isModalOpen.value == true) {
+    if (isModalOpen.value == true) {
         document.body.classList.add('modal-opened')
     } else {
         document.body.classList.remove('modal-opened')
@@ -187,7 +193,8 @@ const goal = (target: string, params: object) => {
                     </div>
                     <div class="form-item xl:w-2/4 text-sm xl:text-base">
                         <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
-                            Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший размер, чтобы продолжить.
+                            Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
+                            размер, чтобы продолжить.
                         </p>
                         <p v-if="form_state.extra_section" class="text-ioprim">
                             Внимание! Дополнительная секция приводит к увеличению стоимости.

composables/useCalc.ts

@@ -5,13 +5,13 @@ export const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '101
 
 const n = 2
 const min = 1300
-const random_pair = Math.floor(Math.random() * predefPillarColors.length)
+
 export const use_lamelle_height = () => useState<number>('lamelle_height', () => 0.115)
 export const use_lamelles_count = () => useState('lamelles_count', () => 14)
 export const use_fence_section = () => useState<number>('fence_section', () => min * 0.001)
 export const use_remove_pillar = () => useState<boolean>('remove_pillar', () => false)
-export const use_pillar_color = () => useState<ralTypes>('pillar_color', () => predefPillarColors[random_pair] as ralTypes)
-export const use_lamelle_color = () => useState<ralTypes>('lamelle_color', () => predefLamelleColors[random_pair] as ralTypes)
+export const use_pillar_color = () => useState<ralTypes>('pillar_color')
+export const use_lamelle_color = () => useState<ralTypes>('lamelle_color')
 export const use_section_count = () => useState('section_count', () => n)
 export const use_extra_section = () => useState('extra_section', () => 0)
 export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)