fix: template fixes, updates and refactors

2019-10-25 18:32:56 +02:00
parent 4f43f966a9
commit e670826803
19 changed files with 106 additions and 79 deletions
@@ -1,12 +1,12 @@
 <template>
  <CFooter>
    <div>
-      <a href="https://coreui.io">CoreUI</a>
+      <a href="https://coreui.io" target="_blank">CoreUI</a>
      <span class="ml-1">&copy; 2019 creativeLabs.</span>
    </div>
    <div class="ml-auto">
      <span class="mr-1">Powered by</span>
-      <a href="https://coreui.io">CoreUI for Vue</a>
+      <a href="https://coreui.io/vue" target="_blank">CoreUI for Vue</a>
    </div>
  </CFooter>
 </template>
@@ -2,20 +2,21 @@
  <CHeader fixed with-subheader light>
    <CToggler
      in-header
-      class="c-header-toggler ml-3 d-lg-none"
+      class="ml-3 d-lg-none"
      v-c-emit-root-event:toggle-sidebar-mobile
    />
    <CToggler
      in-header
-      class="c-header-toggler ml-3 d-md-down-none"
+      class="ml-3 d-md-down-none"
      v-c-emit-root-event:toggle-sidebar
    />
-    <img
-      class="c-header-brand mx-auto d-lg-none" 
-      src="img/brand/coreui-base.svg" 
-      width="97" 
-      height="46" 
+    <CHeaderBrand
+      class="mx-auto d-lg-none" 
+      src="img/brand/coreui-base.svg"
+      width="97"
+      height="46"
      alt="CoreUI Logo"
+      :wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
    />
    <CHeaderNav class="d-md-down-none mr-auto">
      <CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
@@ -34,9 +35,9 @@
      </CHeaderNavItem>
      <TheHeaderDropdownAccnt/>
    </CHeaderNav>
-    <div class="c-subheader px-3">
+    <CSubheader class="px-3">
      <CBreadcrumbRouter class="border-0"/>
-    </div>
+    </CSubheader>
  </CHeader>
 </template>

@@ -5,17 +5,16 @@
    class="c-header-nav-items"
    placement="bottom-end"
    add-menu-classes="pt-0"
-    :show.sync="show"
  >
    <template #toggler>
-      <CLink class="c-header-nav-link" @click="show = !show">
+      <CHeaderNavItem only-link>
        <div class="c-avatar">
          <img
            src="img/avatars/6.jpg"
            class="c-avatar-img "
          />
        </div>
-      </CLink>
+      </CHeaderNavItem>
    </template>
    <CDropdownHeader tag="div" class="text-center" color="light">
      <strong>Account</strong>
@@ -72,8 +71,7 @@ export default {
  name: 'TheHeaderDropdownAccnt',
  data () {
    return { 
-      itemsCount: 42,
-      show: false
+      itemsCount: 42
    }
  }
 }
@@ -5,8 +5,8 @@
    :show.sync="show"
  >
    <CSidebarBrand 
-      fullSrc="img/brand/coreui-base-white.svg" 
-      minimizedSrc="img/brand/coreui-signet-white.svg"
+      :imgFull="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-base-white.svg'}"
+      :imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}"
      :wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
    />
    <!-- <CSidebarHeader/> -->
@@ -32,7 +32,7 @@ export default {
    return {
      items: [
        {
-          text: '<b>Admin</b>',
+          text: 'Admin',
          href: '#'
        }, 
        {
@@ -17,16 +17,20 @@
          </div>
        </CCardHeader>
        <CCardBody>
-          <CButton id="collapse1" color="primary">
+          <CButton @click="collapse = !collapse" color="primary">
            Toggle Collapse
          </CButton>
-          <CCollapse toggler="collapse1" class="mt-2">
+          <CCollapse :show="collapse" class="mt-2">
            <CCard body-wrapper>
              <p class="card-text">Collapse contents Here</p>
-              <CButton id="collapse2" size="sm" color="secondary">
+              <CButton  
+                @click="innerCollapse = !innerCollapse" 
+                size="sm" 
+                color="secondary"
+              >
                Toggle Inner Collapse
              </CButton>
-              <CCollapse toggler="collapse2" class="mt-2">
+              <CCollapse :show="innerCollapse" class="mt-2">
                <CCard body-wrapper>Hello!</CCard>
              </CCollapse>
            </CCard>
@@ -42,7 +46,8 @@ export default {
  name: 'Collapses',
  data () {
    return {
-      showCollapse: true,
+      collapse: false,
+      innerCollapse: false,
      text: `
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
@@ -149,11 +149,10 @@
                horizontal
                disabled
              />
-              <CInput
+              <CTextarea
                label="Textarea"
                placeholder="Content..."
                horizontal
-                textarea="true"
                rows="9"
              />
              <CSelect
@@ -18,7 +18,9 @@
            </div>
          </CCardHeader>
          <CCardBody>
-            <CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
+            <CJumbotron>
+              <h1 class="display-3">Bootstrap 4</h1>
+              <p class="lead">Bootstrap 4 Components for Vue.js 2</p>
              <p>For more information visit website</p>
              <CButton color="primary" href="#">More Info</CButton>
            </CJumbotron>
@@ -33,7 +35,8 @@
          </CCardHeader>
          <CCardBody>
            <CJumbotron header="Bootstrap 4" lead="">
-              <p slot="lead" class="lead">
+              <h1 class="display-3">Bootstrap 4</h1>
+              <p class="lead">
                This is a simple hero unit, a simple jumbotron-style component for
                calling extra attention to featured content or information.
              </p>
@@ -61,9 +64,9 @@
              color="info"
              text-color="white"
              border-color="dark"
-              header="Bootstrap 4"
            >
-              <p slot="lead" class="lead">
+              <h1 class="display-3">Bootstrap 4</h1>
+              <p class="lead">
                This is a simple hero unit, a simple jumbotron-style component for
                calling extra attention to featured content or information.
              </p>
@@ -91,7 +91,7 @@
          <CNavbarBrand>CoreuiVue</CNavbarBrand>
          <CCollapse :show="navbarText" navbar>
            <CNavbarNav>
-              <span class="navbar-text">Navbar text</span>
+              <CNavbarText>Navbar text</CNavbarText>
            </CNavbarNav>
          </CCollapse>
        </CNavbar>
@@ -100,7 +100,7 @@
          <CAlert
            color="secondary"
            closeButton
-            :show.sync="dismissibleAlerts[0]"
+            :show.sync="alert1"
          >
            Dismissible Alert!
          </CAlert>
@@ -109,15 +109,14 @@
            color="secondary"
            closeButton
            fade
-            :show.sync="dismissibleAlerts[1]"
+            :show.sync="alert2"
          >
            Dismissible Alert with fade effect!
          </CAlert>

          <CAlert
            color="secondary"
-            :show.sync="dismissibleAlerts[2]"
-            v-slot="{dismiss}"
+            :show.sync="alert3"
            class="alert-dismissible"
          >
            Dismissible Alert with custom button!
@@ -125,9 +124,9 @@
              class="position-absolute"
              color="secondary"
              style="right:10px;top: 50%;transform: translateY(-50%);"
-              @click="dismiss"
+              @click="alert3 = false"
            >
-              <i>Close</i>
+              Close
            </CButton>
          </CAlert>
          <CButton
@@ -186,7 +185,9 @@ export default {
    return {
      dismissSecs: 10,
      dismissCountDown: 10,
-      dismissibleAlerts: [true, true, true],
+      alert1: true,
+      alert2: true,
+      alert3: true
    }
  },
  methods: {
@@ -197,7 +198,7 @@ export default {
      this.dismissCountDown = this.dismissSecs
    },
    showDismissibleAlerts () {
-      this.dismissibleAlerts = this.dismissibleAlerts.map(el => el = true)
+      ['alert1', 'alert2', 'alert3'].forEach(alert => this[alert] = true)
    }
  }
 }