#145 Add inline loader

OnroerendErfgoed · Nov 8, 2023 · bfd61b8 · bfd61b8
1 parent 14533c3
commit bfd61b8
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 22 deletions.
diff --git a/src/components/dumb/OeLoader.vue b/src/components/dumb/OeLoader.vue
@@ -1,30 +1,48 @@
 <template>
-  <div class="spinner-container">
+  <DefineTemplate>
+    <div
+      class="spinner-content"
+      :class="{
+        'spinner-content--inline': props.modInline,
+        'spinner-content--small': props.modInline && props.modSmall,
+        'spinner-content--large': props.modInline && props.modLarge,
+        'spinner-content--xlarge': props.modInline && props.modXLarge,
+      }"
+    >
+      <font-awesome-icon class="spinner" :icon="['fas', 'spinner']" spin-pulse />
+    </div>
+  </DefineTemplate>
+
+  <ReuseTemplate v-if="props.modInline" />
+
+  <div v-else class="spinner-container">
     <div class="spinner-overlay">
-      <div class="spinner-content">
-        <font-awesome-icon class="spinner" :icon="['fas', 'spinner']" spin-pulse />
-      </div>
+      <ReuseTemplate />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { createReusableTemplate } from '@vueuse/core';
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
+const props = defineProps<{ modInline?: boolean; modSmall?: boolean; modLarge?: boolean; modXLarge?: boolean }>();
 </script>
 
 <style lang="scss" scoped>
 .spinner-container div {
   z-index: 1001;
 }
-.spinner-container .spinner-overlay {
+.spinner-overlay {
   background-color: rgba(152, 152, 152, 0.5);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.spinner-container .spinner-content {
+.spinner-content {
   display: table;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(0, 0, 0, 0.2);
@@ -41,12 +59,61 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
-}
-.spinner-container .spinner {
-  position: absolute;
-  top: 25%;
-  left: 25%;
-  font-size: 50px;
-  color: rgb(255, 255, 255);
+
+  .spinner {
+    position: absolute;
+    top: 25%;
+    left: 25%;
+    font-size: 50px;
+    color: rgb(255, 255, 255);
+  }
+
+  &--inline {
+    box-shadow: none;
+    width: 18px;
+    height: 18px;
+    background: rgb(117, 63, 127);
+    position: relative;
+    display: inline-block;
+    top: 0;
+    left: 0;
+    padding: 0;
+    margin: 0 0.5rem;
+    transform: none;
+    vertical-align: middle;
+
+    .spinner {
+      font-size: 16px;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &--small {
+    width: 14px;
+    height: 14px;
+
+    .spinner {
+      font-size: 12px;
+    }
+  }
+
+  &--large {
+    width: 22px;
+    height: 22px;
+
+    .spinner {
+      font-size: 20px;
+    }
+  }
+
+  &--xlarge {
+    width: 26px;
+    height: 26px;
+
+    .spinner {
+      font-size: 24px;
+    }
+  }
 }
 </style>
diff --git a/src/stories/dumb-components/loader.stories.ts b/src/stories/dumb-components/loader.stories.ts
@@ -11,7 +11,6 @@ const meta: Meta<typeof OeLoader> = {
     docs: {
       description: {
         component:
-          'The default loader will show for 2 seconds in this story and then disappears to not block the story.\n\n' +
           'Make sure to add font-awesome to your project and to add the custom icon component (https://fontawesome.com/docs/web/use-with/vue/)',
       },
     },
@@ -27,14 +26,7 @@ export const Default: Story = {
       OeLoader,
       VlButton,
     },
-    setup() {
-      const loading = ref(true);
-      setTimeout(() => {
-        loading.value = false;
-      }, 2000);
-      return { loading };
-    },
-    template: `<oe-loader v-if="loading"/>`,
+    template: `<oe-loader />`,
   }),
 };
 
@@ -60,3 +52,24 @@ export const FullPageLoader: Story = {
     `,
   }),
 };
+
+export const InlineLoader: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Size modifiers only work for inline loaders.',
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      OeLoader,
+    },
+    template: `
+      Small <oe-loader mod-inline mod-small/>
+      Default <oe-loader mod-inline/>
+      Large <oe-loader mod-inline mod-large/>
+      X Large <oe-loader mod-inline mod-x-large/>
+    `,
+  }),
+};