From 69f7d9a8e8ad2b5598d9e8e6ffcabc4f73587bda Mon Sep 17 00:00:00 2001
From: cristij <joracristi@gmail.com>
Date: Sun, 7 Oct 2018 22:32:30 +0300
Subject: [PATCH] Component improvement & adjustments

---
 src/components/BaseAlert.vue                  |  2 +-
 src/components/BaseButton.vue                 | 11 ++-
 src/components/BaseCheckbox.vue               |  4 +-
 src/components/BaseDropdown.vue               | 32 +++---
 src/components/BaseNav.vue                    | 97 +++++++++++++++++++
 src/components/BaseRadio.vue                  | 63 ++++++++++++
 src/components/BaseTable.vue                  |  8 +-
 src/components/Cards/Card.vue                 |  3 +
 src/components/CloseButton.vue                | 34 +++++++
 .../{formGroupInput.vue => BaseInput.vue}     | 47 ++++++++-
 src/components/NavbarToggleButton.vue         | 27 ++++++
 src/components/SidebarPlugin/MovingArrow.vue  | 44 ---------
 src/components/SidebarPlugin/SideBar.vue      |  5 -
 src/components/index.js                       | 14 ++-
 src/layout/dashboard/TopNavbar.vue            |  4 +-
 src/pages/Profile/EditProfileForm.vue         | 40 ++++----
 src/plugins/globalComponents.js               |  4 +-
 17 files changed, 334 insertions(+), 105 deletions(-)
 create mode 100755 src/components/BaseNav.vue
 create mode 100755 src/components/BaseRadio.vue
 create mode 100755 src/components/CloseButton.vue
 rename src/components/Inputs/{formGroupInput.vue => BaseInput.vue} (52%)
 create mode 100755 src/components/NavbarToggleButton.vue
 delete mode 100644 src/components/SidebarPlugin/MovingArrow.vue

diff --git a/src/components/BaseAlert.vue b/src/components/BaseAlert.vue
index 3c5253c..9bf6138 100644
--- a/src/components/BaseAlert.vue
+++ b/src/components/BaseAlert.vue
@@ -19,7 +19,7 @@
   import { FadeTransition } from 'vue2-transitions';
 
   export default {
-    name: 'alert',
+    name: 'base-alert',
     components: {
       FadeTransition
     },
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 31916e3..b27027e 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,18 +1,20 @@
 <template>
   <component
     :is="tag"
-    :type="nativeType"
+    :type="tag === 'button' ? nativeType : ''"
     :disabled="disabled || loading"
     @click="handleClick"
     class="btn"
     :class="[
       {'btn-round': round},
       {'btn-block': block},
-      {'btn-icon': icon},
+      {'btn-icon btn-fab': icon},
       {[`btn-${type}`]: type && !outline},
       {[`btn-outline-${type}`]: type && outline},
       {[`btn-${size}`]: size},
-      {'btn-link': simple}
+      {'btn-simple': simple},
+      {'btn-link': link},
+      {'disabled': disabled && tag !== 'button'}
     ]">
     <slot name="loading">
       <i v-if="loading" class="fa fa-spinner fa-spin"></i>
@@ -46,7 +48,8 @@ export default {
       type: String,
       default: ""
     },
-    simple: Boolean
+    simple: Boolean,
+    link: Boolean,
   },
   methods: {
     handleClick(evt) {
diff --git a/src/components/BaseCheckbox.vue b/src/components/BaseCheckbox.vue
index d9006df..fb6c6b6 100644
--- a/src/components/BaseCheckbox.vue
+++ b/src/components/BaseCheckbox.vue
@@ -16,9 +16,9 @@
 </template>
 <script>
   export default {
-    name: 'base-checkbox',
+    name: "base-checkbox",
     model: {
-      prop: 'checked'
+      prop: "checked"
     },
     props: {
       checked: [Array, Boolean],
diff --git a/src/components/BaseDropdown.vue b/src/components/BaseDropdown.vue
index 5524655..5a96edf 100644
--- a/src/components/BaseDropdown.vue
+++ b/src/components/BaseDropdown.vue
@@ -4,17 +4,19 @@
              :class="{show:isOpen}"
              @click="toggleDropDown"
              v-click-outside="closeDropDown">
-    <a class="dropdown-toggle btn-rotate"
-       :class="titleClasses"
-       :aria-expanded="isOpen"
-       data-toggle="dropdown">
-      <slot name="title">
-        <i :class="icon"></i>
-        <span class="notification">{{title}}
-          <b class="caret"></b>
-        </span>
-      </slot>
-    </a>
+    <slot name="title-container" :is-open="isOpen">
+      <component
+        :is="titleTag"
+        class="dropdown-toggle btn-rotate"
+        :class="titleClasses"
+        :aria-expanded="isOpen"
+        data-toggle="dropdown">
+        <slot name="title" :is-open="isOpen">
+          <i :class="icon"></i>
+          {{title}}
+        </slot>
+      </component>
+    </slot>
     <ul class="dropdown-menu" :class="[{show:isOpen}, {'dropdown-menu-right': menuOnRight}, menuClasses]">
       <slot></slot>
     </ul>
@@ -22,11 +24,15 @@
 </template>
 <script>
 export default {
-  name: 'base-dropdown',
+  name: "base-dropdown",
   props: {
     tag: {
       type: String,
-      default: "li"
+      default: "div"
+    },
+    titleTag: {
+      type: String,
+      default: "button"
     },
     title: String,
     icon: String,
diff --git a/src/components/BaseNav.vue b/src/components/BaseNav.vue
new file mode 100755
index 0000000..7303173
--- /dev/null
+++ b/src/components/BaseNav.vue
@@ -0,0 +1,97 @@
+<template>
+    <nav class="navbar"
+         :class="[
+            {'navbar-expand-lg': expand},
+            {[`navbar-${effect}`]: effect},
+            {'navbar-transparent': transparent},
+            {[`bg-${type}`]: type},
+            {'rounded': round}
+         ]">
+        <div class="container">
+            <slot name="container-pre"></slot>
+            <slot name="brand">
+                <a class="navbar-brand" href="#" @click.prevent="onTitleClick">
+                    {{title}}
+                </a>
+            </slot>
+            <navbar-toggle-button :toggled="toggled"
+                                  :target="contentId"
+                                  @click.native.stop="toggled = !toggled">
+            </navbar-toggle-button>
+
+            <slot name="container-after"></slot>
+
+            <div class="collapse navbar-collapse" :class="{show: toggled}" :id="contentId" v-click-outside="closeMenu">
+                <div class="navbar-collapse-header">
+                    <slot name="content-header" :close-menu="closeMenu"></slot>
+                </div>
+                <slot :close-menu="closeMenu"></slot>
+            </div>
+        </div>
+    </nav>
+</template>
+<script>
+import { FadeTransition } from "vue2-transitions";
+import NavbarToggleButton from "./NavbarToggleButton";
+
+export default {
+  name: "base-nav",
+  components: {
+    FadeTransition,
+    NavbarToggleButton
+  },
+  props: {
+    type: {
+      type: String,
+      default: "primary",
+      description: "Navbar type (e.g default, primary etc)"
+    },
+    title: {
+      type: String,
+      default: "",
+      description: "Title of navbar"
+    },
+    contentId: {
+      type: [String, Number],
+      default: Math.random().toString(),
+      description:
+        "Explicit id for the menu. By default it's a generated random number"
+    },
+    effect: {
+      type: String,
+      default: "dark",
+      description: "Effect of the navbar (light|dark)"
+    },
+    round: {
+      type: Boolean,
+      default: false,
+      description: "Whether nav has rounded corners"
+    },
+    transparent: {
+      type: Boolean,
+      default: false,
+      description: "Whether navbar is transparent"
+    },
+    expand: {
+      type: Boolean,
+      default: false,
+      description: "Whether navbar should contain `navbar-expand-lg` class"
+    }
+  },
+  data() {
+    return {
+      toggled: false
+    };
+  },
+  methods: {
+    onTitleClick(evt) {
+      this.$emit("title-click", evt);
+    },
+    closeMenu() {
+      this.toggled = false;
+    }
+  }
+};
+</script>
+<style>
+</style>
diff --git a/src/components/BaseRadio.vue b/src/components/BaseRadio.vue
new file mode 100755
index 0000000..459a629
--- /dev/null
+++ b/src/components/BaseRadio.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="form-check form-check-radio" :class="[inlineClass, {disabled: disabled}]">
+    <label :for="cbId" class="form-check-label">
+      <input :id="cbId"
+             class="form-check-input"
+             type="radio"
+             :disabled="disabled"
+             :value="name"
+             v-model="model" />
+      <slot></slot>
+      <span class="form-check-sign"></span>
+    </label>
+  </div>
+</template>
+<script>
+export default {
+  name: "base-radio",
+  props: {
+    name: {
+      type: [String, Number],
+      description: "Radio label"
+    },
+    disabled: {
+      type: Boolean,
+      description: "Whether radio is disabled"
+    },
+    value: {
+      type: [String, Boolean],
+      description: "Radio value"
+    },
+    inline: {
+      type: Boolean,
+      description: "Whether radio is inline"
+    }
+  },
+  data() {
+    return {
+      cbId: ""
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      }
+    },
+    inlineClass() {
+      if (this.inline) {
+        return `form-check-inline`;
+      }
+      return "";
+    }
+  },
+  created() {
+    this.cbId = Math.random()
+      .toString(16)
+      .slice(2);
+  }
+};
+</script>
diff --git a/src/components/BaseTable.vue b/src/components/BaseTable.vue
index a3cac80..f2e0b00 100644
--- a/src/components/BaseTable.vue
+++ b/src/components/BaseTable.vue
@@ -1,11 +1,11 @@
 <template>
   <table class="table tablesorter" :class="tableClass">
     <thead :class="theadClasses">
-    <slot name="columns">
-      <tr>
+    <tr>
+      <slot name="columns">
         <th v-for="column in columns" :key="column">{{column}}</th>
-      </tr>
-    </slot>
+      </slot>
+    </tr>
     </thead>
     <tbody :class="tbodyClasses">
     <tr v-for="(item, index) in data" :key="index">
diff --git a/src/components/Cards/Card.vue b/src/components/Cards/Card.vue
index 3fc00e3..7986c3c 100644
--- a/src/components/Cards/Card.vue
+++ b/src/components/Cards/Card.vue
@@ -12,6 +12,9 @@
     <div class="card-body" v-if="$slots.default">
       <slot></slot>
     </div>
+    <div class="card-image" v-if="$slots['image-bottom']">
+      <slot name="image-bottom"></slot>
+    </div>
     <slot name="raw-content"></slot>
     <div class="card-footer" v-if="$slots.footer">
       <slot name="footer"></slot>
diff --git a/src/components/CloseButton.vue b/src/components/CloseButton.vue
new file mode 100755
index 0000000..7557943
--- /dev/null
+++ b/src/components/CloseButton.vue
@@ -0,0 +1,34 @@
+<template>
+    <button type="button" class="navbar-toggler"
+            data-toggle="collapse"
+            @click="handleClick"
+            :data-target="`#${target}`"
+            :aria-controls="target"
+            :aria-expanded="expanded"
+            aria-label="Toggle navigation">
+        <span></span>
+        <span></span>
+    </button>
+</template>
+<script>
+export default {
+  name: "close-button",
+  props: {
+    target: {
+      type: [String, Number],
+      description: "Close button target element"
+    },
+    expanded: {
+      type: Boolean,
+      description: "Whether button is expanded (aria-expanded attribute)"
+    }
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit("click", evt);
+    }
+  }
+};
+</script>
+<style>
+</style>
diff --git a/src/components/Inputs/formGroupInput.vue b/src/components/Inputs/BaseInput.vue
similarity index 52%
rename from src/components/Inputs/formGroupInput.vue
rename to src/components/Inputs/BaseInput.vue
index 868731f..f2d1e21 100644
--- a/src/components/Inputs/formGroupInput.vue
+++ b/src/components/Inputs/BaseInput.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="form-group" :class="{'input-group': hasIcon}">
+  <div class="form-group"
+       :class="{
+          'input-group': hasIcon,
+          'input-group-focus': focused
+       }">
     <slot name="label">
       <label v-if="label" class="control-label">
         {{label}}
@@ -7,38 +11,71 @@
     </slot>
     <slot name="addonLeft">
       <span v-if="addonLeftIcon" class="input-group-prepend">
-        <i :class="addonLeftIcon" class="input-group-text"></i>
+        <div class="input-group-text">
+          <i :class="addonLeftIcon"></i>
+        </div>
       </span>
     </slot>
     <slot>
       <input
         :value="value"
-        @input="$emit('input',$event.target.value)"
         v-bind="$attrs"
+        v-on="listeners"
         class="form-control"
         aria-describedby="addon-right addon-left">
     </slot>
     <slot name="addonRight">
       <span v-if="addonRightIcon" class="input-group-append">
-        <i :class="addonRightIcon" class="input-group-text"></i>
+        <div class="input-group-text">
+          <i :class="addonRightIcon"></i>
+        </div>
       </span>
     </slot>
+    <slot name="helperText"></slot>
   </div>
 </template>
 <script>
   export default {
     inheritAttrs: false,
-    name: "fg-input",
+    name: "base-input",
     props: {
       label: String,
       value: [String, Number],
       addonRightIcon: String,
       addonLeftIcon: String
     },
+    model: {
+      prop: 'value',
+      event: 'input'
+    },
+    data() {
+      return {
+        focused: false
+      }
+    },
     computed: {
       hasIcon() {
         const { addonRight, addonLeft } = this.$slots;
         return addonRight !== undefined || addonLeft !== undefined || this.addonRightIcon !== undefined || this.addonLeftIcon !== undefined;
+      },
+      listeners() {
+        return {
+          ...this.$listeners,
+          input: this.onInput,
+          blur: this.onBlur,
+          focus: this.onFocus
+        }
+      }
+    },
+    methods: {
+      onInput(evt) {
+        this.$emit('input', evt.target.value)
+      },
+      onFocus() {
+        this.focused = true;
+      },
+      onBlur() {
+        this.focused = false;
       }
     }
   }
diff --git a/src/components/NavbarToggleButton.vue b/src/components/NavbarToggleButton.vue
new file mode 100755
index 0000000..a718b29
--- /dev/null
+++ b/src/components/NavbarToggleButton.vue
@@ -0,0 +1,27 @@
+<template>
+    <button class="navbar-toggler" type="button"
+            data-toggle="collapse"
+            :data-target="target"
+            :aria-controls="target"
+            :aria-expanded="toggled"
+            aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+</template>
+<script>
+export default {
+  props: {
+    target: {
+      type: [String, Number],
+      description: "Button target element"
+    },
+    toggled: {
+      type: Boolean,
+      default: false,
+      description: "Whether button is toggled"
+    }
+  }
+};
+</script>
+<style>
+</style>
diff --git a/src/components/SidebarPlugin/MovingArrow.vue b/src/components/SidebarPlugin/MovingArrow.vue
deleted file mode 100644
index 21aeb01..0000000
--- a/src/components/SidebarPlugin/MovingArrow.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="moving-arrow" :style="arrowStyle">
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    moveY: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {
-    /**
-     * Styles to animate the arrow
-     * @returns {{transform: string}}
-     */
-    arrowStyle() {
-      return {
-        transform: `translate3d(0px, ${this.moveY}px, 0px)`
-      };
-    }
-  }
-};
-</script>
-<style lang="scss">
-$bg-nude: #f4f3ef !default;
-
-.moving-arrow {
-  border-right: 17px solid $bg-nude;
-  border-top: 17px solid transparent;
-  border-bottom: 17px solid transparent;
-  display: inline-block;
-  position: absolute;
-  left: 243px;
-  top: 95px;
-  transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1);
-}
-@media (max-width: 992px) {
-  .moving-arrow {
-    display: none;
-  }
-}
-</style>
diff --git a/src/components/SidebarPlugin/SideBar.vue b/src/components/SidebarPlugin/SideBar.vue
index ed365f6..f852ff0 100644
--- a/src/components/SidebarPlugin/SideBar.vue
+++ b/src/components/SidebarPlugin/SideBar.vue
@@ -33,14 +33,10 @@
           </sidebar-link>
         </slot>
       </ul>
-      <moving-arrow :move-y="arrowMovePx">
-
-      </moving-arrow>
     </div>
   </div>
 </template>
 <script>
-  import MovingArrow from "./MovingArrow.vue";
   import SidebarLink from "./SidebarLink";
 
   export default {
@@ -88,7 +84,6 @@
       };
     },
     components: {
-      MovingArrow,
       SidebarLink
     },
     computed: {
diff --git a/src/components/index.js b/src/components/index.js
index 445f29a..ac018d7 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,10 +1,14 @@
-import FormGroupInput from "./Inputs/formGroupInput.vue";
+import BaseInput from "./Inputs/BaseInput.vue";
 
 import BaseCheckbox from "./BaseCheckbox.vue";
+import BaseRadio from "./BaseRadio.vue";
 import BaseDropdown from "./BaseDropdown.vue";
 import BaseTable from "./BaseTable.vue";
 import BaseButton from "./BaseButton";
 import BaseAlert from "./BaseAlert";
+import BaseNav from "./BaseNav";
+import Modal from "./Modal";
+import CloseButton from "./CloseButton";
 
 import Card from "./Cards/Card.vue";
 import StatsCard from "./Cards/StatsCard.vue";
@@ -12,13 +16,17 @@ import StatsCard from "./Cards/StatsCard.vue";
 import SidebarPlugin from "./SidebarPlugin/index";
 
 export {
-  FormGroupInput,
+  BaseInput,
   Card,
+  Modal,
+  CloseButton,
   StatsCard,
   BaseTable,
   BaseCheckbox,
+  BaseRadio,
   BaseDropdown,
   BaseButton,
   BaseAlert,
-  SidebarPlugin
+  SidebarPlugin,
+  BaseNav
 };
diff --git a/src/layout/dashboard/TopNavbar.vue b/src/layout/dashboard/TopNavbar.vue
index a74575c..3fe0b8d 100644
--- a/src/layout/dashboard/TopNavbar.vue
+++ b/src/layout/dashboard/TopNavbar.vue
@@ -41,7 +41,7 @@
                    :show-close="true">
               <input slot="header" type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
             </modal>
-            <base-dropdown class="nav-item" menu-on-right>
+            <base-dropdown tag="li" title-tag="a" class="nav-item" menu-on-right>
               <a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
                 <div class="notification d-none d-lg-block d-xl-block"></div>
                 <i class="tim-icons icon-sound-wave"></i>
@@ -65,7 +65,7 @@
                 <a href="#" class="nav-item dropdown-item">Another one</a>
               </li>
             </base-dropdown>
-            <base-dropdown class="nav-item" menu-classes="dropdown-navbar">
+            <base-dropdown tag="li" title-tag="a" class="nav-item" menu-classes="dropdown-navbar">
               <a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
                 <div class="photo">
                   <img src="/img/anime3.png">
diff --git a/src/pages/Profile/EditProfileForm.vue b/src/pages/Profile/EditProfileForm.vue
index d3585f3..cc14137 100644
--- a/src/pages/Profile/EditProfileForm.vue
+++ b/src/pages/Profile/EditProfileForm.vue
@@ -3,69 +3,69 @@
     <h5 slot="header" class="title">Edit Profile</h5>
     <div class="row">
       <div class="col-md-5 pr-md-1">
-        <fg-input label="Company (disabled)"
+        <base-input label="Company (disabled)"
                   placeholder="Company"
                   v-model="model.company"
                   disabled>
-        </fg-input>
+        </base-input>
       </div>
       <div class="col-md-3 px-md-1">
-        <fg-input label="Username"
+        <base-input label="Username"
                   placeholder="Username"
                   v-model="model.username">
-        </fg-input>
+        </base-input>
       </div>
       <div class="col-md-4 pl-md-1">
-        <fg-input label="Email address"
+        <base-input label="Email address"
                   type="email"
                   placeholder="mike@email.com">
-        </fg-input>
+        </base-input>
       </div>
     </div>
     <div class="row">
       <div class="col-md-6 pr-md-1">
-        <fg-input label="First Name"
+        <base-input label="First Name"
                   v-model="model.firstName"
                   placeholder="First Name">
-        </fg-input>
+        </base-input>
       </div>
       <div class="col-md-6 pl-md-1">
-        <fg-input label="Last Name"
+        <base-input label="Last Name"
                   v-model="model.lastName"
                   placeholder="Last Name">
-        </fg-input>
+        </base-input>
       </div>
     </div>
     <div class="row">
       <div class="col-md-12">
-        <fg-input label="Address"
+        <base-input label="Address"
                   v-model="model.address"
                   placeholder="Home Address">
-        </fg-input>
+        </base-input>
       </div>
     </div>
     <div class="row">
       <div class="col-md-4 pr-md-1">
-        <fg-input label="City"
+        <base-input label="City"
                   v-model="model.city"
                   placeholder="City">
-        </fg-input>
+        </base-input>
       </div>
       <div class="col-md-4 px-md-1">
-        <fg-input label="Country"
+        <base-input label="Country"
                   v-model="model.country"
                   placeholder="Country">
-        </fg-input>
+        </base-input>
       </div>
       <div class="col-md-4 pl-md-1">
-        <fg-input label="Postal Code"
+        <base-input label="Postal Code"
                   placeholder="ZIP Code">
-        </fg-input>
+        </base-input>
       </div>
     </div>
     <div class="row">
       <div class="col-md-8">
-        <fg-input>
+        <base-input>
           <label>About Me</label>
           <textarea rows="4" cols="80"
                     class="form-control"
@@ -73,7 +73,7 @@
                     v-model="model.about">
 
               </textarea>
-        </fg-input>
+        </base-input>
       </div>
     </div>
     <base-button slot="footer" type="primary" fill>Save</base-button>
diff --git a/src/plugins/globalComponents.js b/src/plugins/globalComponents.js
index 3ddcf8d..2a60305 100644
--- a/src/plugins/globalComponents.js
+++ b/src/plugins/globalComponents.js
@@ -1,11 +1,11 @@
-import { FormGroupInput, Card, BaseDropdown, BaseButton, BaseCheckbox } from "../components/index";
+import { BaseInput, Card, BaseDropdown, BaseButton, BaseCheckbox } from "../components/index";
 /**
  * You can register global components here and use them as a plugin in your main Vue instance
  */
 
 const GlobalComponents = {
   install(Vue) {
-    Vue.component(FormGroupInput.name, FormGroupInput);
+    Vue.component(BaseInput.name, BaseInput);
     Vue.component(Card.name, Card);
     Vue.component(BaseDropdown.name, BaseDropdown);
     Vue.component(BaseButton.name, BaseButton);