Bläddra i källkod

feat: enhance DefaultInput and DefaultSelect components with new styles and classes; update table styles for text truncation

alvesantos 2 veckor sedan
förälder
incheckning
ab711bd8b5

+ 32 - 2
src/components/defaults/DefaultInput.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="column" :class="attrs.class" :style="attrs.style">
-    <div class="col">
+  <div class="default-input column" :class="attrs.class" :style="attrs.style">
+    <div class="default-input-col col">
       <q-input
         ref="inputRef"
         v-model="model"
+        class="default-input-field"
         :bg-color="bgColor"
         :class="[inputClass, { 'required-field': required }]"
         :color
@@ -156,6 +157,35 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+.default-input {
+  min-width: 0;
+}
+
+.default-input[class*="col-"] {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.default-input-field {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.default-input-field .q-field__inner),
+:deep(.default-input-field .q-field__control),
+:deep(.default-input-field .q-field__control-container),
+:deep(.default-input-field .q-field__native),
+:deep(.default-input-field .q-field__input) {
+  min-width: 0;
+  max-width: 100%;
+}
+
+:deep(.default-input-field .q-field__native) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 :deep(.q-field--outlined.q-field--rounded .q-field__control) {
   border-radius: 8px;
 }

+ 26 - 2
src/components/defaults/DefaultSelect.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="column" :class="attrs.class" :style="attrs.style">
-    <div class="col">
+  <div class="default-select column" :class="attrs.class" :style="attrs.style">
+    <div class="default-select-col col">
       <q-select
         ref="selectRef"
         v-model="model"
+        class="default-select-field"
         hide-bottom-space
         hide-dropdown-icon
         label-color="secondary"
@@ -119,6 +120,29 @@ defineExpose({
 </script>
 
 <style scoped>
+.default-select {
+  min-width: 0;
+}
+
+.default-select[class*="col-"] {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.default-select-field {
+  min-width: 0;
+  width: 100%;
+}
+
+:deep(.default-select-field .q-field__inner),
+:deep(.default-select-field .q-field__control),
+:deep(.default-select-field .q-field__control-container),
+:deep(.default-select-field .q-field__native),
+:deep(.default-select-field .q-field__input) {
+  min-width: 0;
+  max-width: 100%;
+}
+
 :deep(.required-field .q-field__label::after) {
   color: var(--q-negative);
   content: " *";

+ 15 - 0
src/css/table.scss

@@ -31,6 +31,21 @@
     &.q-table--loading thead tr:last-child th {
       top: 48px;
     }
+
+    // Trunca texto sem espaços (hashes, URLs, etc.) para não estourar a
+    // largura da coluna e desalinhar o cabeçalho sticky.
+    td,
+    th {
+      max-width: 260px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    td.q-table--col-auto-width {
+      max-width: none;
+      overflow: visible;
+    }
   }
 
   tr {