src/components/VnTable/VnTable.vue

@@ -757,7 +757,7 @@ function cardClick(_, row) {
                             flat
                             dense
                             :class="
-                                btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
+                                btn.isPrimary ? 'text-primary-light' : 'color-vn-label'
                             "
                             :style="`visibility: ${
                                 ((btn.show && btn.show(row)) ?? true)
@@ -783,7 +783,7 @@ function cardClick(_, row) {
                             <QCardSection
                                 vertical
                                 class="no-margin no-padding"
-                                :class="colsMap.tableActions ? 'w-80' : 'fit'"
+                                :class="colsMap.tableActions ? '' : 'fit'"
                             >
                                 <!-- Chips -->
                                 <QCardSection
@@ -814,7 +814,7 @@ function cardClick(_, row) {
                                 </QCardSection>
                                 <!-- Fields -->
                                 <QCardSection
-                                    class="q-pl-sm q-pr-lg q-py-xs"
+                                    class="q-pl-sm q-py-xs"
                                     :class="$props.cardClass"
                                 >
                                     <div
@@ -822,11 +822,11 @@ function cardClick(_, row) {
                                             col, index
                                         ) of splittedColumns.cardVisible"
                                         :key="col.name"
-                                        class="fields"
                                     >
                                         <VnLv :label="col.label + ':'">
                                             <template #value>
                                                 <span
+                                                    class="q-pl-xs"
                                                     @click="stopEventPropagation($event)"
                                                 >
                                                     <slot
@@ -862,12 +862,12 @@ function cardClick(_, row) {
                                     :title="btn.title"
                                     :icon="btn.icon"
                                     class="q-pa-xs"
-                                    flat
                                     :class="
                                         btn.isPrimary
                                             ? 'text-primary-light'
-                                            : 'color-vn-text '
+                                            : 'color-vn-label'
                                     "
+                                    flat
                                     @click="btn.action(row)"
                                 />
                             </QCardSection>
@@ -1120,6 +1120,7 @@ es:
 .vn-label-value {
     display: flex;
     flex-direction: row;
+    align-items: center;
     color: var(--vn-text-color);
     .value {
         overflow: hidden;

src/components/common/VnSelect.vue

@@ -10,7 +10,12 @@ const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 const $attrs = useAttrs();
 const { t } = useI18n();
 
-const { isRequired, requiredFieldRule } = useRequired($attrs);
+const isRequired = computed(() => {
+    return useRequired($attrs).isRequired;
+});
+const requiredFieldRule = computed(() => {
+    return useRequired($attrs).requiredFieldRule;
+});
 
 const $props = defineProps({
     modelValue: {

src/pages/Zone/Card/ZoneBasicData.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -9,33 +9,23 @@ import VnInputTime from 'src/components/common/VnInputTime.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
-
-const agencyFilter = {
-    fields: ['id', 'name'],
-    order: 'name ASC',
-    limit: 30,
-};
-const agencyOptions = ref([]);
 const validAddresses = ref([]);
+const addresses = ref([]);
 
-const filterWhere = computed(() => ({
+const setFilteredAddresses = (data) => {
-    id: { inq: validAddresses.value.map((item) => item.addressFk) },
+    const validIds = new Set(validAddresses.value.map((item) => item.addressFk));
-}));
+    addresses.value = data.filter((address) => validIds.has(address.id));
+};
 </script>
 
 <template>
-    <FetchData
-        :filter="agencyFilter"
-        @on-fetch="(data) => (agencyOptions = data)"
-        auto-load
-        url="AgencyModes/isActive"
-    />
     <FetchData
         url="RoadmapAddresses"
         auto-load
         @on-fetch="(data) => (validAddresses = data)"
     />
-    <FormModel :url="`Zones/${$route.params.id}`" auto-load data-key="Zone">
+    <FetchData url="Addresses" auto-load @on-fetch="setFilteredAddresses" />
+    <FormModel auto-load model="zone">
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput
@@ -45,7 +35,6 @@ const filterWhere = computed(() => ({
                     v-model="data.name"
                 />
             </VnRow>
-
             <VnRow>
                 <VnSelect
                     v-model="data.agencyModeFk"
@@ -128,7 +117,7 @@ const filterWhere = computed(() => ({
                     v-model="data.addressFk"
                     option-value="id"
                     option-label="nickname"
-                    url="Addresses"
+                    :options="addresses"
                     :fields="['id', 'nickname']"
                     sort-by="id"
                     hide-selected