From 3ac510ec09937b6cbad5efb777d3d9ee2f2f5a2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Mon, 29 Nov 2021 14:31:17 +0100
Subject: [PATCH] feat: add CPlaceholder component

---
 src/_nav.js                     |   6 +-
 src/router/index.js             |   5 +
 src/views/base/Placeholders.vue | 190 ++++++++++++++++++++++++++++++++
 3 files changed, 200 insertions(+), 1 deletion(-)
 create mode 100644 src/views/base/Placeholders.vue

diff --git a/src/_nav.js b/src/_nav.js
index 82a64c6c..f13cfa50 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -70,12 +70,16 @@ export default [
         name: 'Navs & Tabs',
         to: '/base/navs',
       },
-
       {
         component: 'CNavItem',
         name: 'Paginations',
         to: '/base/paginations',
       },
+      {
+        component: 'CNavItem',
+        name: 'Placeholders',
+        to: '/base/placeholders',
+      },
       {
         component: 'CNavItem',
         name: 'Popovers',
diff --git a/src/router/index.js b/src/router/index.js
index 70c92526..4cc96cde 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -84,6 +84,11 @@ const routes = [
             name: 'Paginations',
             component: () => import('@/views/base/Paginations.vue'),
           },
+          {
+            path: '/base/placeholders',
+            name: 'Placeholders',
+            component: () => import('@/views/base/Placeholders.vue'),
+          },
           {
             path: '/base/popovers',
             name: 'Popovers',
diff --git a/src/views/base/Placeholders.vue b/src/views/base/Placeholders.vue
new file mode 100644
index 00000000..c7c51451
--- /dev/null
+++ b/src/views/base/Placeholders.vue
@@ -0,0 +1,190 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <DocsCallout name="Placeholder" href="components/placeholder" />
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Placeholder</strong>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            In the example below, we take a typical card component and recreate
+            it with placeholders applied to create a "loading card". Size and
+            proportions are the same between the two.
+          </p>
+          <DocsExample href="components/placeholder">
+            <div class="d-flex justify-content-around">
+              <CCard style="width: 18rem">
+                <CCardImage orientation="top" :src="VueImg" />
+                <CCardBody>
+                  <CCardTitle>Card title</CCardTitle>
+                  <CCardText>
+                    Some quick example text to build on the card title and make
+                    up the bulk of the card's content.
+                  </CCardText>
+                  <CButton color="primary" href="#">Go somewhere</CButton>
+                </CCardBody>
+              </CCard>
+              <CCard style="width: 18rem">
+                <CCardImage
+                  component="svg"
+                  orientation="top"
+                  width="100%"
+                  height="162"
+                  role="img"
+                  aria-label="Placeholder"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title
+                  ><rect width="100%" height="100%" fill="#868e96"></rect>
+                </CCardImage>
+                <CCardBody>
+                  <CCardTitle v-c-placeholder="{ animation: 'glow', xs: 7 }">
+                    <CPlaceholder :xs="6" />
+                  </CCardTitle>
+                  <CCardText v-c-placeholder="{ animation: 'glow' }">
+                    <CPlaceholder :xs="7" />
+                    <CPlaceholder :xs="4" />
+                    <CPlaceholder :xs="4" />
+                    <CPlaceholder :xs="6" />
+                    <CPlaceholder :xs="8" />
+                  </CCardText>
+                  <CButton
+                    v-c-placeholder="{ xs: 6 }"
+                    color="primary"
+                    aria-hidden="true"
+                    disabled
+                    href="#"
+                    tabindex="-1"
+                  ></CButton>
+                </CCardBody>
+              </CCard>
+            </div>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Placeholder</strong>
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Create placeholders with the
+            <code>&lt;CPlaceholder&gt;</code> component and a grid column propx
+            (e.g., <code>:xs="6"</code>) to set the <code>width</code>. They can
+            replace the text inside an element or be added as a modifier class
+            to an existing component.
+          </p>
+          <DocsExample href="components/placeholder">
+            <p aria-hidden="true">
+              <CPlaceholder :xs="6" />
+            </p>
+            <CButton
+              v-c-placeholder="{ xs: 4 }"
+              color="primary"
+              aria-hidden="true"
+              disabled
+              href="#"
+              tabindex="-1"
+            ></CButton>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Placeholder</strong> <small> Width</small>
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            You can change the <code>width</code> through grid column classes,
+            width utilities, or inline styles.
+          </p>
+          <DocsExample href="components/placeholder#width">
+            <CPlaceholder :xs="6" />
+            <CPlaceholder class="w-75" />
+            <CPlaceholder style="width: 30%" />
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Placeholder</strong> <small> Color</small>
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            By default, the <code>&lt;CPlaceholder&gt;</code> uses
+            <code>currentColor</code>. This can be overridden with a custom
+            color or utility class.
+          </p>
+          <DocsExample href="components/placeholder#color">
+            <CPlaceholder :xs="12" />
+
+            <CPlaceholder color="primary" :xs="12" />
+            <CPlaceholder color="secondary" :xs="12" />
+            <CPlaceholder color="success" :xs="12" />
+            <CPlaceholder color="danger" :xs="12" />
+            <CPlaceholder color="warning" :xs="12" />
+            <CPlaceholder color="info" :xs="12" />
+            <CPlaceholder color="light" :xs="12" />
+            <CPlaceholder color="dark" :xs="12" />
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Placeholder</strong> <small> Sizing</small>
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            The size of <code>&lt;CPlaceholder&gt;</code>s are based on the
+            typographic style of the parent element. Customize them with
+            <code>size</code> prop: <code>lg</code>, <code>sm</code>, or
+            <code>xs</code>.
+          </p>
+          <DocsExample href="components/placeholder#color">
+            <CPlaceholder :xs="12" size="lg" />
+            <CPlaceholder :xs="12" />
+            <CPlaceholder :xs="12" size="sm" />
+            <CPlaceholder :xs="12" size="xs" />
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Placeholder</strong> <small> Animation</small>
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Animate placeholders with <code>animation="glow"</code> or
+            <code>animation="wave"</code> to better convey the perception of
+            something being <em>actively</em> loaded.
+          </p>
+          <DocsExample href="components/placeholder#animation">
+            <CPlaceholder component="p" animation="glow">
+              <CPlaceholder :xs="12" />
+            </CPlaceholder>
+
+            <CPlaceholder component="p" animation="wave">
+              <CPlaceholder :xs="12" />
+            </CPlaceholder>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+import VueImg from '@/assets/images/vue.jpg'
+export default {
+  name: 'Placeholders',
+  setup() {
+    return {
+      VueImg,
+    }
+  },
+}
+</script>