refactor: update examples

src/views/forms/FormControl.vue

@@ -9,7 +9,7 @@
           <strong>Vue Form Control</strong>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/form-control">
+          <DocsExample href="forms/form-control">
             <CForm>
               <div class="mb-3">
                 <CFormLabel for="exampleFormControlInput1"
@@ -31,7 +31,7 @@
                 ></CFormTextarea>
               </div>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -45,7 +45,7 @@
             Set heights using <code>size</code> property like
             <code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
           </p>
-          <Example href="forms/form-control#sizing">
+          <DocsExample href="forms/form-control#sizing">
             <CFormInput
               type="text"
               size="lg"
@@ -65,7 +65,7 @@
               placeholder="Small input"
               aria-label="sm input example"
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -79,7 +79,7 @@
             Add the <code>disabled</code> boolean attribute on an input to give
             it a grayed out appearance and remove pointer events.
           </p>
-          <Example href="forms/form-control#disabled">
+          <DocsExample href="forms/form-control#disabled">
             <CFormInput
               type="text"
               placeholder="Disabled input"
@@ -95,7 +95,7 @@
               readOnly
             />
             <br />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -111,14 +111,14 @@
             appear lighter (just like disabled inputs), but retain the standard
             cursor.
           </p>
-          <Example href="forms/form-control#readonly">
+          <DocsExample href="forms/form-control#readonly">
             <CFormInput
               type="text"
               placeholder="Readonly input here..."
               aria-label="readonly input example"
               readOnly
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -134,7 +134,7 @@
             <code>plainText</code> boolean property to remove the default form
             field styling and preserve the correct margin and padding.
           </p>
-          <Example href="components/accordion">
+          <DocsExample href="components/accordion">
             <CRow class="mb-3">
               <CFormLabel for="staticEmail" class="col-sm-2 col-form-label">
                 Email
@@ -157,8 +157,8 @@
                 <CFormInput type="password" id="inputPassword" />
               </div>
             </CRow>
-          </Example>
-          <Example href="components/accordion">
+          </DocsExample>
+          <DocsExample href="components/accordion">
             <CForm class="row g-3">
               <div class="col-auto">
                 <CFormLabel for="staticEmail2" class="visually-hidden">
@@ -186,7 +186,7 @@
                 <CButton type="submit" class="mb-3"> Confirm identity </CButton>
               </div>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -196,7 +196,7 @@
           <strong>Vue Form Control</strong> <small>File input</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/form-control#file-input">
+          <DocsExample href="forms/form-control#file-input">
             <div class="mb-3">
               <CFormLabel for="formFile">Default file input example</CFormLabel>
               <CFormInput type="file" id="formFile" />
@@ -221,7 +221,7 @@
               <CFormLabel for="formFileLg">Large file input example</CFormLabel>
               <CFormInput type="file" size="lg" id="formFileLg" />
             </div>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -231,7 +231,7 @@
           <strong>Vue Form Control</strong> <small>Color</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/form-control#color">
+          <DocsExample href="forms/form-control#color">
             <CFormLabel for="exampleColorInput">Color picker</CFormLabel>
             <CFormInput
               type="color"
@@ -239,7 +239,7 @@
               defaultValue="#563d7c"
               title="Choose your color"
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>