feat: add additional css classes to c-admin-editor and c-table for cu…

…stom styling
IntelliTect · Aug 10, 2023 · b8620fa · b8620fa
1 parent 3381922
commit b8620fa
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 39 deletions.
diff --git a/src/coalesce-vue-vuetify2/src/components/admin/c-admin-editor-page.vue b/src/coalesce-vue-vuetify2/src/components/admin/c-admin-editor-page.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="c-admin-editor-page">
+  <v-container class="c-admin-editor-page" :class="'type-' + metadata.name">
     <c-admin-editor class="c-admin-editor-page--editor" :model="viewModel" />
 
     <c-admin-methods

diff --git a/src/coalesce-vue-vuetify2/src/components/admin/c-admin-editor.vue b/src/coalesce-vue-vuetify2/src/components/admin/c-admin-editor.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="c-admin-editor">
+  <v-card class="c-admin-editor" :class="'type-' + metadata.name">
     <v-toolbar
       class="c-admin-editor-page--toolbar"
       dense
@@ -43,21 +43,24 @@
               v-for="prop in showProps"
               :key="prop.name"
               class="c-admin-editor--row"
+              :class="'prop-' + prop.name"
             >
               <v-col
                 cols="12"
                 md="2"
-                class="py-0 py-md-3 font-weight-bold text-md-right"
+                class="py-0 py-md-3 font-weight-bold text-md-right c-admin-editor--label-col"
                 align-self="start"
               >
                 {{ prop.displayName }}
               </v-col>
-              <v-col class="py-0">
+              <v-col class="py-0 c-admin-editor--input-col">
                 <c-input
                   :model="model"
                   :for="prop"
                   v-bind="propInputBinds(prop)"
                   label=""
+                  :aria-label="prop.displayName"
+                  :aria-description="prop.description"
                   hide-details="auto"
                   @deleted="
                     // Reload when a c-select-many-to-many item is deleted,
@@ -73,7 +76,7 @@
               </v-col>
               <v-col
                 v-if="prop.role == 'referenceNavigation'"
-                class="py-0 flex-grow-0"
+                class="c-admin-editor--aux-col"
               >
                 <v-btn
                   class="c-admin-editor--ref-nav-link"
@@ -98,7 +101,7 @@
                     prop.subtype == 'email' ||
                     prop.subtype == 'tel')
                 "
-                class="py-0 flex-grow-0"
+                class="c-admin-editor--aux-col"
               >
                 <v-btn
                   class="c-admin-editor--href-link"
@@ -118,14 +121,10 @@
               </v-col>
               <v-col
                 v-if="prop.type == 'string' && prop.subtype == 'url-image'"
-                class="py-0 flex-grow-0"
+                class="c-admin-editor--aux-col"
               >
-                <v-card outlined rounded>
-                  <c-display
-                    :model="model"
-                    :for="prop"
-                    style="max-width: 100px; display: block"
-                  ></c-display>
+                <v-card outlined rounded class="c-admin-editor--img-preview">
+                  <c-display :model="model" :for="prop"></c-display>
                 </v-card>
               </v-col>
             </v-row>
@@ -245,4 +244,13 @@ export default defineComponent({
     }
   }
 }
+.c-admin-editor--aux-col {
+  flex-grow: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.c-admin-editor--img-preview img {
+  max-width: 100px;
+  display: block;
+}
 </style>
diff --git a/src/coalesce-vue-vuetify2/src/components/admin/c-admin-methods.vue b/src/coalesce-vue-vuetify2/src/components/admin/c-admin-methods.vue
@@ -15,7 +15,11 @@
           <c-display :model="model"></c-display>
         </v-toolbar-title>
       </v-toolbar>
-      <v-expansion-panel v-for="method in methods" :key="method.name">
+      <v-expansion-panel
+        v-for="method in methods"
+        :key="method.name"
+        :class="'method-' + method.name"
+      >
         <v-expansion-panel-header>
           <div>{{ method.displayName }}</div>
         </v-expansion-panel-header>

diff --git a/src/coalesce-vue-vuetify2/src/components/admin/c-admin-table-page.vue b/src/coalesce-vue-vuetify2/src/components/admin/c-admin-table-page.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-container fluid class="c-admin-table-page">
+  <v-container
+    fluid
+    class="c-admin-table-page"
+    :class="'type-' + metadata.name"
+  >
     <c-admin-table class="c-admin-table-page--table" :list="listVM" query-bind>
     </c-admin-table>
 

diff --git a/src/coalesce-vue-vuetify2/src/components/admin/c-admin-table.vue b/src/coalesce-vue-vuetify2/src/components/admin/c-admin-table.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="c-admin-table">
+  <v-card class="c-admin-table" :class="'type-' + metadata.name">
     <c-admin-table-toolbar
       :list="viewModel"
       @update:editable="editable = $event"
@@ -26,7 +26,7 @@
           "
         >
           <template #item.append="{ item }">
-            <td width="1%">
+            <td width="1%" class="c-admin-table--actions">
               <v-row class="flex-nowrap" no-gutters>
                 <v-btn
                   v-if="canEdit || hasInstanceMethods"

diff --git a/src/coalesce-vue-vuetify2/src/components/display/c-display.ts b/src/coalesce-vue-vuetify2/src/components/display/c-display.ts
@@ -141,7 +141,7 @@ export default defineComponent({
         case "url-image":
           return _c("img", {
             ...ctx.data,
-            attrs: { ...ctx.data.attrs, src: valueString, title: valueString },
+            attrs: { ...ctx.data.attrs, src: valueString },
           });
         case "color":
           return _c(

diff --git a/src/coalesce-vue-vuetify2/src/components/display/c-table.vue b/src/coalesce-vue-vuetify2/src/components/display/c-table.vue
@@ -10,6 +10,8 @@
               class="text-left"
               :class="{
                 sortable: header.sortable,
+                ['prop-' + header.prop]: !!header.prop,
+                ['th-' + header.value]: !header.prop,
               }"
               @click="header.sortable ? orderByToggle(header.value) : void 0"
             >
@@ -128,11 +130,13 @@ export default defineComponent({
           value: o.name,
           sortable: o.type != "collection",
           align: "left",
+          prop: o.name,
         })),
         ...(this.extraHeaders || []).map((h) => ({
           text: h,
           value: h,
           sortable: false,
+          prop: undefined,
         })),
       ];
     },

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor-page.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor-page.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="c-admin-editor-page">
+  <v-container class="c-admin-editor-page" :class="'type-' + metadata.name">
     <c-admin-editor
       class="c-admin-editor-page--editor"
       :model="viewModel"

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="c-admin-editor">
+  <v-card class="c-admin-editor" :class="'type-' + metadata.name">
     <v-toolbar
       class="c-admin-editor--toolbar"
       density="compact"
@@ -42,19 +42,20 @@
             v-for="prop in showProps"
             :key="prop.name"
             class="c-admin-editor--row"
+            :class="'prop-' + prop.name"
             no-gutters
           >
             <v-col
               cols="12"
               md="2"
-              class="py-0 pr-3 py-md-3 font-weight-bold text-md-right"
+              class="py-0 pr-3 py-md-3 font-weight-bold text-md-right c-admin-editor--label-col"
               align-self="start"
             >
               {{ prop.displayName }}
             </v-col>
             <v-col class="py-0" align-self="start" style="flex-basis: 1px">
               <v-row no-gutters style="min-height: 44px" align-content="center">
-                <v-col>
+                <v-col class="c-admin-editor--input-col">
                   <c-input
                     :model="model"
                     :for="prop"
@@ -77,8 +78,7 @@
                 </v-col>
                 <v-col
                   v-if="prop.role == 'referenceNavigation'"
-                  class="flex-grow-0 pl-3"
-                  align-self="start"
+                  class="c-admin-editor--aux-col"
                 >
                   <v-btn
                     class="c-admin-editor--ref-nav-link"
@@ -104,8 +104,7 @@
                       prop.subtype == 'email' ||
                       prop.subtype == 'tel')
                   "
-                  class="flex-grow-0 pl-3"
-                  align-self="start"
+                  class="c-admin-editor--aux-col"
                 >
                   <v-btn
                     class="c-admin-editor--href-link"
@@ -127,15 +126,10 @@
                 </v-col>
                 <v-col
                   v-if="prop.type == 'string' && prop.subtype == 'url-image'"
-                  class="flex-grow-0 pl-3"
-                  align-self="start"
+                  class="c-admin-editor--aux-col"
                 >
-                  <v-card outlined rounded>
-                    <c-display
-                      :model="model"
-                      :for="prop"
-                      style="max-width: 100px; display: block"
-                    ></c-display>
+                  <v-card outlined rounded class="c-admin-editor--img-preview">
+                    <c-display :model="model" :for="prop"></c-display>
                   </v-card>
                 </v-col>
               </v-row>
@@ -259,4 +253,13 @@ export default defineComponent({
     }
   }
 }
+.c-admin-editor--aux-col {
+  align-self: flex-start;
+  flex-grow: 0 !important;
+  padding-left: 12px !important;
+}
+.c-admin-editor--img-preview img {
+  max-width: 100px;
+  display: block;
+}
 </style>
diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-methods.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-methods.vue
@@ -14,7 +14,11 @@
       </v-toolbar-title>
     </v-toolbar>
     <v-expansion-panels class="c-methods">
-      <v-expansion-panel v-for="method in methods" :key="method.name">
+      <v-expansion-panel
+        v-for="method in methods"
+        :key="method.name"
+        :class="'method-' + method.name"
+      >
         <v-expansion-panel-title>
           <div>{{ method.displayName }}</div>
         </v-expansion-panel-title>

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table-page.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table-page.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-container fluid class="c-admin-table-page">
+  <v-container
+    fluid
+    class="c-admin-table-page"
+    :class="'type-' + metadata.name"
+  >
     <c-admin-table
       class="c-admin-table-page--table"
       :list="listVM"

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="c-admin-table">
+  <v-card class="c-admin-table" :class="'type-' + metadata.name">
     <c-admin-table-toolbar
       :list="viewModel"
       :page-sizes="pageSizes"
@@ -25,7 +25,7 @@
         }"
       >
         <template #item-append="{ item }">
-          <td width="1%">
+          <td width="1%" class="c-admin-table--actions">
             <v-row class="flex-nowrap" no-gutters>
               <v-btn
                 v-if="canEdit || hasInstanceMethods"

diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-display.ts b/src/coalesce-vue-vuetify3/src/components/display/c-display.ts
@@ -142,7 +142,6 @@ export default defineComponent({
           return h("img", {
             ...this.$attrs,
             src: valueString,
-            title: valueString,
           });
 
         case "color":

diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -12,6 +12,8 @@
               class="text-left"
               :class="{
                 sortable: header.sortable,
+                ['prop-' + header.prop]: !!header.prop,
+                ['th-' + header.value]: !header.prop,
               }"
               @click="header.sortable ? orderByToggle(header.value) : void 0"
             >
@@ -110,11 +112,13 @@ export default defineComponent({
           value: o.name,
           sortable: o.type != "collection",
           align: "left",
+          prop: o.name,
         })),
         ...(this.extraHeaders || []).map((h) => ({
           text: h,
           value: h,
           sortable: false,
+          prop: undefined,
         })),
       ];
     },