feat: #343 add progress-absolute prop to c-loader-status

docs/stacks/vue/coalesce-vue-vuetify/components/c-loader-status.md

@@ -105,6 +105,10 @@ A more advanced usage allows passing different flags for different callers. Prov
 
 Specify if space should be reserved for the progress indicator. If set to false, the content in the default slot may jump up and down slightly as the progress indicator shows and hides.
 
+<Prop def="progressAbsolute: boolean = false" lang="ts" />
+
+Positions the progress bar absolutely. This can be useful in compact interfaces where extra space for the progress bar is undesirable, allowing the progress bar to potentially overlap content while active.
+
 <Prop def="height: number = 10" lang="ts" />
 
 Specifies the height in pixels of the [v-progress-linear](https://vuetifyjs.com/en/components/progress-linear) used to indicate progress.

src/coalesce-vue-vuetify2/src/components/admin/c-admin-editor.vue

@@ -38,7 +38,7 @@
         }"
       >
         <template #default>
-          <v-form ref="form">
+          <v-form ref="form" class="mt-3">
             <v-row
               v-for="prop in showProps"
               :key="prop.name"

src/coalesce-vue-vuetify2/src/components/admin/c-admin-table.vue

@@ -16,6 +16,7 @@
             ...viewModel.$items.map((i) => i.$save),
           ],
         }"
+        progress-absolute
       >
         <c-table
           admin

src/coalesce-vue-vuetify2/src/components/display/c-loader-status.vue

@@ -29,7 +29,8 @@
         the progress loader and the placeholder independent of the 
         main outer transition between content/error/loaders -->
     <transition-group
-      class="c-loader-status--transition-group"
+      class="c-loader-status--transition-group c-loader-status--progress-group"
+      :class="{ absolute: progressAbsolute }"
       key="loading"
       v-if="showLoading || usePlaceholder"
       name="c-loader-status-fade"
@@ -118,6 +119,12 @@ export default defineComponent({
      * keep the default slot visible.
      */
     progressPlaceholder: { required: false, type: Boolean, default: true },
+
+    /** Positions the progress bar absolutely. This can be useful in compact interfaces
+     * where extra space for the progress bar is undesirable, allowing the
+     * progress bar to potentially overlap content while active. */
+    progressAbsolute: { required: false, type: Boolean, default: false },
+
     height: { required: false, type: [Number, String], default: 10 },
 
     noProgress: { required: false, type: Boolean, default: null },
@@ -280,6 +287,15 @@ export default defineComponent({
   flex-direction: column;
   font-weight: 400;
 
+  .c-loader-status--progress-group {
+    &.absolute {
+      // Make the progress bar on c-loader-status overlap
+      // so it doesn't add extra whitespace to the top of the row.
+      position: absolute !important;
+      width: 100%;
+    }
+  }
+
   .c-loader-status--content {
     flex-grow: 1;
     flex-shrink: 1;

src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.vue

@@ -28,7 +28,7 @@
       </v-btn>
     </v-toolbar>
 
-    <v-card-text>
+    <v-card-text class="pt-2">
       <c-loader-status
         :loaders="{
           [!showContent ? 'no-initial-content' : 'no-error-content']: [

src/coalesce-vue-vuetify3/src/components/admin/c-admin-method.vue

@@ -61,7 +61,6 @@
       </v-col>
       <v-col>
         <c-loader-status
-          :progress-placeholder="false"
           :loaders="{
             'no-initial-content no-error-content no-loading-content': [caller],
           }"

src/coalesce-vue-vuetify3/src/components/display/c-loader-status.vue

@@ -38,10 +38,10 @@
       v-if="showLoading || usePlaceholder"
       key="loading"
       class="c-loader-status--transition-group c-loader-status--progress-group"
+      :class="{ absolute: progressAbsolute }"
       name="c-loader-status-fade"
       mode="out-in"
       tag="div"
-      style="position: relative"
       :style="{
         '--c-loader-status-progress-height': height + 'px',
       }"
@@ -127,10 +127,16 @@ const props = withDefaults(
         | AnyLoaderMaybe[];
 
       /**
-       * Whether space is reserved for the progress bar even when the progress visible is not active. Default true.
+       * Whether space is reserved for the progress bar even when
+       * the progress visible is not active. Default true.
        */
       progressPlaceholder?: boolean;
 
+      /** Positions the progress bar absolutely. This can be useful in compact interfaces
+       * where extra space for the progress bar is undesirable, allowing the
+       * progress bar to potentially overlap content while active. */
+      progressAbsolute?: boolean;
+
       /** The height of the progress bar */
       height?: 10;
       /** The color of the progress bar */
@@ -337,6 +343,16 @@ defineExpose({ loaderFlags });
   flex-direction: column;
   font-weight: 400;
 
+  .c-loader-status--progress-group {
+    position: relative;
+    &.absolute {
+      // Make the progress bar on c-loader-status overlap
+      // so it doesn't add extra whitespace to the top of the row.
+      position: absolute !important;
+      width: 100%;
+    }
+  }
+
   .c-loader-status--content {
     flex-grow: 1;
     flex-shrink: 1;