Skip to content

Commit

Permalink
[WIP] Add loading skeletons
Browse files Browse the repository at this point in the history
  • Loading branch information
@MisRob
MisRob committed Sep 20, 2024
1 parent d4b02df commit 13458fc
Show file tree
Hide file tree
Showing 9 changed files with 736 additions and 37 deletions.
182 changes: 174 additions & 8 deletions docs/pages/kcard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@
<p>It manages the layout, including the thumbnail image, title, and other content. It offers several base layouts and many customization options. Cards like the examples shown can be created, and many others.</p>

<DocsShow block :style="{ maxWidth: '800px' }">
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig1"
:loading="loading"
>
<DocsKCard
:headingLevel="3"
:orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
Expand Down Expand Up @@ -243,7 +247,11 @@
<p><code>KCard</code> has two orientations: horizontal and vertical. It is also possible to configure whether a thumbnail area is displayed, its size and alignment. By combining <code>orientation</code>, <code>thumbnailDisplay</code> and <code>thumbnailAlign</code> props, the following card layouts can be achieved to organize diverse kinds of content:</p>

<DocsShow block>
<KCardGrid layout="1-2-3">
<KCardGrid
layout="1-2-3"
:skeletonsConfig="skeletonsConfig2"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
orientation="vertical"
Expand Down Expand Up @@ -303,7 +311,11 @@
</DocsShow>

<DocsShow block>
<KCardGrid layout="1-2-2">
<KCardGrid
layout="1-2-2"
:skeletonsConfig="skeletonsConfig3"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
orientation="horizontal"
Expand All @@ -324,7 +336,11 @@
</DocsShow>

<DocsShow block>
<KCardGrid layout="1-2-3">
<KCardGrid
layout="1-2-3"
:skeletonsConfig="skeletonsConfig4"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
orientation="vertical"
Expand Down Expand Up @@ -413,7 +429,11 @@
<p>Use <code>aboveTitle</code>, <code>belowTitle</code>, and <code>footer</code> slots to add content to a card. <code>KCard</code> will organize these areas according to its <DocsInternalLink text="layout configuration" href="#layout" />. Apply custom styling to the inner content of slots to achieve desired effects.</p>

<DocsShow block>
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig5"
:loading="loading"
>
<KCard
:to="{ path: '/test-url' }"
:headingLevel="4"
Expand Down Expand Up @@ -497,7 +517,11 @@
<p>Use the <code>thumbnailPlaceholder</code> slot to add a placeholder element, such as an icon, to this area. <em>Provide a placeholder element even if a thumbnail image is available.</em> This serves as a progressive loading experience where the placeholder element is displayed until the image is loaded, and is particularly important on slower networks.</p>

<DocsShow block>
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig6"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
:orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
Expand Down Expand Up @@ -546,7 +570,11 @@
<p><em>This applies to all slot content, but considering accessibility is especially important with interactive elements.</em> For instance, <code>ariaLabel</code> is applied to the bookmark icon button in the following example so that screenreaders can communicate its purpose. In production, more work would be needed to indicate the bookmark's toggled state. Always assess on a case-by-case basis.</p>

<DocsShow block>
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig7"
:loading="loading"
>
<DocsKCard
:headingLevel="4"
:orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
Expand Down Expand Up @@ -594,7 +622,11 @@
<p>Managing the selection state is not <code>KCard</code>'s responsibility.</p>

<DocsShow block :style="{ maxWidth: '800px' }">
<KCardGrid layout="1-1-1">
<KCardGrid
layout="1-1-1"
:skeletonsConfig="skeletonsConfig8"
:loading="loading"
>
<DocsKCard
:to="{ path: '/kcard' }"
:headingLevel="4"
Expand Down Expand Up @@ -710,8 +742,142 @@
isBookmarked3: false,
isFirstCardChecked: false,
isSecondCardChecked: false,
loading: true,
skeletonsConfig1: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 1,
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '490px',
},
{
breakpoints: [2],
height: '430px',
},
{
breakpoints: [3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailAlign: 'right',
height: '250px',
},
],
skeletonsConfig2: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 3,
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '490px',
},
{
breakpoints: [3, 4, 5, 6, 7],
height: '450px',
},
],
skeletonsConfig3: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 2,
orientation: 'horizontal',
thumbnailDisplay: 'large',
thumbnailAlign: 'left',
height: '310px',
},
{
breakpoints: [4, 5, 6, 7],
height: '280px',
},
],
skeletonsConfig4: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 3,
height: '290px',
},
{
breakpoints: [4, 5, 6, 7],
height: '240px',
},
],
skeletonsConfig5: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 1,
orientation: 'horizontal',
thumbnailDisplay: 'large',
thumbnailAlign: 'left',
height: '300px',
},
{
breakpoints: [3, 4, 5, 6, 7],
height: '240px',
},
],
skeletonsConfig6: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 1,
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '460px',
},
{
breakpoints: [2],
height: '390px',
},
{
breakpoints: [3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailAlign: 'right',
height: '200px',
},
],
skeletonsConfig7: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 1,
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '460px',
},
{
breakpoints: [2],
height: '390px',
},
{
breakpoints: [3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailAlign: 'right',
height: '200px',
},
],
skeletonsConfig8: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 2,
orientation: 'vertical',
thumbnailDisplay: 'large',
height: '400px',
},
{
breakpoints: [2],
height: '380px',
},
{
breakpoints: [3, 4, 5, 6, 7],
orientation: 'horizontal',
thumbnailAlign: 'right',
height: '180px',
},
],
};
},
mounted() {
setTimeout(() => {
this.loading = false;
}, 500);
},
};
</script>
Expand Down
Loading

0 comments on commit 13458fc

Please sign in to comment.