[WIP] Задизейблил инпуты адресов

src/assets/sass/variables.sass

@@ -48,3 +48,4 @@
   --btn-grey-color: #e8e8f3
   --pagination-item-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)
   --pagination-current-item-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%)
+  --bg-disable-grey-color: #f0f0f0

src/components/base/BaseSelect.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-  .base-select(@click="open = !open", :class="{'open': open, 'border-none': borderNone}")
+  .base-select(@click="open = !open", :class="{'open': open && !disable, 'border-none': borderNone}")
     .placeholder.text-base(:class="{'value-color': value || placeholderOpacity}") {{ value || placeholder }}
     .flex.items-center
       .select-form-separator.cursor-pointer.mr-4(v-if="separator")
-      span.icon-down-arrow.open-icon(:class="{'open': open }")
+      span.icon-down-arrow.open-icon(:class="{'open': open && !disable }")
     base-menu(v-if="open")
       .items-container(@click="open = false", v-click-outside="leaveSelect")
         .item(v-for="item in items", :key="item.id" @click="clickItem(item.label)") {{ item.label }}
@@ -24,6 +24,7 @@ export default {
     borderNone: Boolean,
     separator: Boolean,
     placeholderOpacity: Boolean,
+    disable: Boolean,
   },
   emits: ["update:modelValue"],
   data() {

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -91,10 +91,7 @@
             .line.absolute
             .text-separation.span.text-sm.separator.px-2 или
           .flex.flex-col.gap-y-4(v-if="section === 'addresses' && isChange")
-            client-detail-section-address(
+            client-detail-section-address(:dope-address="dopeAddress")
-              :dope-address="dopeAddress"
-              :cities="cities"
-            )
           .flex(v-if="item.name && !isChange")
             span.text-sm.w-fit {{item.title}}
           .flex.items-center(v-if="item.title")
@@ -170,11 +167,6 @@ export default {
       isOpenAddingWrap: false,
       isChange: false,
       settings: detail,
-      cities: [
-        { id: 1, label: "Рязань" },
-        { id: 1, label: "Москва" },
-        { id: 1, label: "Луховицы" },
-      ],
       isData: true,
       isAddress: true,
       isAttachments: true,

src/pages/clients/components/ClientDetailSectionAddress.vue

@@ -2,27 +2,54 @@
   .flex.flex-col.gap-y-4
     .flex.flex-col(class="gap-y-1.5")
       .text-info.text-xxs.font-semibold Город
-      base-select(
+      base-select.cursor-grab(
+        disable,
         placeholder="Выберите город",
-        :items="cities",
+        v-model="dopeAddress.city",
-        v-model="dopeAddress.city"
+        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
       )
     .flex.flex-col(class="gap-y-1.5")
       .text-info.text-xxs.font-semibold Область
-      base-input.input-info(placeholder="Введите область", v-model:value="dopeAddress.region")
+      base-input.input-info(
+        disabled,
+        placeholder="Введите область",
+        v-model:value="dopeAddress.region",
+        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+      )
     .flex.flex-col(class="gap-y-1.5")
       .text-info.text-xxs.font-semibold Улица
-      base-input.input-info(placeholder="Введите улицу", v-model:value="dopeAddress.street")
+      base-input.input-info(
+        disabled,
+        placeholder="Введите улицу",
+        v-model:value="dopeAddress.street",
+        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+      )
     .flex.gap-x-4
       .flex.flex-col(class="gap-y-1.5")
         .text-info.text-xxs.font-semibold Дом
-        base-input.input-info(placeholder="Дом", v-model:value="dopeAddress.house")
+        base-input.input-info(
+          disabled,
+          placeholder="Дом",
+          v-model:value="dopeAddress.house",
+          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+        )
       .flex.flex-col(class="gap-y-1.5")
         .text-info.text-xxs.font-semibold Квартира
-        base-input.input-info(placeholder="Квартира", v-model:value="dopeAddress.flat")
+        base-input.input-info(
+          disabled,
+          placeholder="Квартира",
+          v-model:value="dopeAddress.flat",
+          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+        )
     .flex.flex-col(class="gap-y-1.5")
       .text-info.text-xxs.font-semibold Индекс
-      base-input.input-info(v-mask="'######'", placeholder="000000", v-model:value="dopeAddress.index")
+      base-input.input-info(
+        disabled,
+        v-mask="'######'",
+        placeholder="000000",
+        v-model:value="dopeAddress.index",
+        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
+      )
 </template>
 
 <script>
@@ -37,7 +64,6 @@ export default {
   },
   props: {
     dopeAddress: Object,
-    cities: Array,
   },
   directives: { mask },
 };

src/pages/clients/components/FormCreateAddresses.vue

@@ -14,39 +14,53 @@
         .flex.flex-col(class="gap-y-1.5")
           .text-info.text-xxs.font-semibold Город
           base-input.input-info(
+            disabled,
             placeholder="Выберите город",
-            v-model:value="addresses.city"
+            v-model:value="addresses.city",
+            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
           )
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Область
           base-input.input-info(
+            disabled,
             placeholder="Введите область",
-            v-model:value="addresses.region"
+            v-model:value="addresses.region",
+
+            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
           )
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Улица
           base-input.input-info(
+            disabled,
             placeholder="Введите улицу",
-            v-model:value="addresses.street"
+            v-model:value="addresses.street",
+
+            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
           )
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Дом
           base-input.input-info(
+            disabled,
             placeholder="Номер дома",
-            v-model:value="addresses.house_number"
+            v-model:value="addresses.house_number",
+            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
           )
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Квартира
           base-input.input-info(
+            disabled,
             placeholder="Номер квартиры",
-            v-model:value="addresses.apartment_number"
+            v-model:value="addresses.apartment_number",
+            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
           )
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Индекс
           base-input.input-info(
+            disabled,
             placeholder="000000",
             v-mask="'######'",
-            v-model:value="addresses.zip_code"
+            v-model:value="addresses.zip_code",
+            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
           )
     .px-4
       base-button(@click="saveClient" :size="40")