refactor: refs #6897 update component imports and class names for consistency and clarity

src/components/VnTable/VnFilter.vue

@@ -8,7 +8,7 @@ import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
-import VnTableColumn from 'components/VnTable/VnColumn.vue';
+import VnColumn from 'components/VnTable/VnColumn.vue';
 
 const $props = defineProps({
     column: {
@@ -57,7 +57,7 @@ const selectComponent = {
     component: markRaw(VnSelect),
     event: updateEvent,
     attrs: {
-        class: 'q-pt-none fit test',
+        class: 'q-pt-none fit vn-label-padding',
         dense: true,
         filled: !$props.showTitle,
     },
@@ -151,7 +151,7 @@ const onTabPressed = async () => {
 </script>
 <template>
     <div v-if="showFilter" class="full-width flex-center" style="overflow: hidden">
-        <VnTableColumn
+        <VnColumn
             :column="$props.column"
             default="input"
             v-model="model"
@@ -162,7 +162,7 @@ const onTabPressed = async () => {
     </div>
 </template>
 <style lang="scss">
-label.test > .q-field__inner > .q-field__control {
+label.vn-label-padding > .q-field__inner > .q-field__control {
     padding: inherit;
 }
 </style>

src/components/VnTable/VnTable.vue

@@ -356,9 +356,6 @@ const clickHandler = async (event) => {
             return;
         } else {
             destroyInput(editingRow.value, editingField.value);
-            if (isEditableColumn(column))
-                await renderInput(Number(rowIndex), colField, clickedElement);
-            return;
         }
     }
     if (isEditableColumn(column))
@@ -657,7 +654,7 @@ const checkbox = ref(null);
                                 :data-key="$attrs['data-key']"
                                 v-model="params[columnName(col)]"
                                 :search-url="searchUrl"
-                                class="full-width test"
+                                class="full-width"
                             />
                         </div>
                     </QTh>

src/components/common/VnInputDate.vue

@@ -25,7 +25,6 @@ const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref();
 const hover = ref();
 const mask = ref();
-const emit = defineEmits(['blur']);
 
 const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 
@@ -43,7 +42,7 @@ const formattedDate = computed({
                 if (value.at(2) == '/') value = value.split('/').reverse().join('/');
                 value = date.formatDate(
                     new Date(value).toISOString(),
-                    'YYYY-MM-DDTHH:mm:ss.SSSZ'
+                    'YYYY-MM-DDTHH:mm:ss.SSSZ',
                 );
             }
             const [year, month, day] = value.split('-').map((e) => parseInt(e));
@@ -56,7 +55,7 @@ const formattedDate = computed({
                     orgDate.getHours(),
                     orgDate.getMinutes(),
                     orgDate.getSeconds(),
-                    orgDate.getMilliseconds()
+                    orgDate.getMilliseconds(),
                 );
             }
         }
@@ -65,7 +64,7 @@ const formattedDate = computed({
 });
 
 const popupDate = computed(() =>
-    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value
+    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value,
 );
 onMounted(() => {
     // fix quasar bug
@@ -74,7 +73,7 @@ onMounted(() => {
 watch(
     () => model.value,
     (val) => (formattedDate.value = val),
-    { immediate: true }
+    { immediate: true },
 );
 
 const styleAttrs = computed(() => {

src/css/app.scss

@@ -2,10 +2,6 @@
 @import './icons.scss';
 @import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.scss';
 
-.tbody {
-    --vn-color-negative: $negative;
-}
-
 body.body--light {
     --vn-header-color: #cecece;
     --vn-page-color: #ffffff;
@@ -28,6 +24,7 @@ body.body--light {
 
     --vn-color-negative: $negative;
 }
+
 body.body--dark {
     --vn-header-color: #5d5d5d;
     --vn-page-color: #222;

src/css/quasar.variables.scss

@@ -30,7 +30,9 @@ $color-spacer: #7979794d;
 $border-thin-light: 1px solid $color-spacer-light;
 $primary-light: #f5b351;
 $dark-shadow-color: black;
-$layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
+$layout-shadow-dark:
+    0 0 10px 2px #00000033,
+    0 0px 10px #0000003d;
 $spacing-md: 16px;
 $color-font-secondary: #777;
 $width-xs: 400px;
@@ -50,6 +52,3 @@ $width-xl: 1600px;
 .bg-alert {
     background-color: $negative;
 }
-.c-negative {
-    color: $negative;
-}

src/pages/Route/Agency/AgencyList.vue

@@ -71,7 +71,7 @@ const columns = computed(() => [
         :data-key
         :columns="columns"
         prefix="agency"
-        :right-filter="false"
+        :right-filter="true"
         :array-data-props="{
             url: 'Agencies',
             order: 'name',
@@ -83,7 +83,7 @@ const columns = computed(() => [
                 :data-key
                 :columns="columns"
                 is-editable="false"
-                :right-search="true"
+                :right-search="false"
                 :use-model="true"
                 redirect="route/agency"
                 default-mode="card"