From 7a50fe3f52f854d33098c75041547aa455cf5be5 Mon Sep 17 00:00:00 2001
From: Andrew Scott <ascott18@gmail.com>
Date: Fri, 12 Jan 2024 10:44:49 -0800
Subject: [PATCH] feat: #343 add progress-absolute prop to c-loader-status

---
 .../components/c-loader-status.md             |  4 ++++
 .../src/components/admin/c-admin-editor.vue   |  2 +-
 .../src/components/admin/c-admin-table.vue    |  1 +
 .../components/display/c-loader-status.vue    | 18 ++++++++++++++++-
 .../src/components/admin/c-admin-editor.vue   |  2 +-
 .../src/components/admin/c-admin-method.vue   |  1 -
 .../components/display/c-loader-status.vue    | 20 +++++++++++++++++--
 7 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-loader-status.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-loader-status.md
index a74598762..2e2fff56e 100644
--- a/docs/stacks/vue/coalesce-vue-vuetify/components/c-loader-status.md
+++ b/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.
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
index e3a57386e..1e14cc7e7 100644
--- a/src/coalesce-vue-vuetify2/src/components/admin/c-admin-editor.vue
+++ b/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"
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
index 64f42e9b8..94089dc95 100644
--- a/src/coalesce-vue-vuetify2/src/components/admin/c-admin-table.vue
+++ b/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
diff --git a/src/coalesce-vue-vuetify2/src/components/display/c-loader-status.vue b/src/coalesce-vue-vuetify2/src/components/display/c-loader-status.vue
index 1660e4123..7184b4471 100644
--- a/src/coalesce-vue-vuetify2/src/components/display/c-loader-status.vue
+++ b/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;
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
index db355fbd7..db2b32248 100644
--- a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.vue
+++ b/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']: [
diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-method.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-method.vue
index 37bc0760f..742867b81 100644
--- a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-method.vue
+++ b/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],
           }"
diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.vue b/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.vue
index 31c3931ed..74ad0293d 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.vue
+++ b/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;