Dropdown show/hide using Vue, styling

ui/components/Dropdown.vue

@@ -1,19 +1,22 @@
 <template>
   <div class="dropdown show">
-      <a class="btn btn-sm btn-secondary dropdown-toggle"
-        href="#"
-        role="button"
+      <button
         :id="_uid"
-        data-toggle="dropdown"
+        class="btn btn-sm btn-light dropdown-toggle"
         aria-haspopup="true"
-        aria-expanded="false">
+        :aria-expanded="isShown ? 'true' : 'false'"
+        @click="isShown = !isShown"
+      >
         {{ label }}
-      </a>
-      <div class="dropdown-menu dropdown-menu-right" :aria-labelledby="_uid">
-        <a class="dropdown-item"
+      </button>
+      <div :class="['dropdown-menu dropdown-menu-right', isShown ? 'show' : '']" :aria-labelledby="_uid">
+        <a
+          href="#"
+          class="dropdown-item"
           v-for="option in options"
           :key="option.label"
-          @click="option.handler">
+          @click.prevent="option.handler"
+        >
           {{ option.label }}
         </a>
       </div>
@@ -21,9 +24,24 @@
 </template>
 <script>
 export default {
-  props: ['label', 'options']
+  props: ['label', 'options'],
+  data() {
+    return {
+      isShown: false
+    }
+  }
 };
 </script>
-<style>
+<style lang="scss">
+@import "../styles/variables.scss";
+$dropdown-link-active-bg: $gray-300;
+
+.dropdown-item {
+  &.active,
+  &:active {
+    @include gradient-bg($dropdown-link-active-bg);
+  }
+}
+
 </style>
 

ui/components/Form/FormActions.vue

@@ -2,10 +2,10 @@
   <div class="frappe-form-actions d-flex justify-content-between align-items-center p-3 border-bottom">
     <h5 class="m-0">{{ title }}</h5>
     <div class="d-flex">
-      <f-button primary v-if="isDirty" @click="$emit('save')">{{ _('Save') }}</f-button>
+      <f-button primary v-if="showSave" :disabled="disableSave" @click="$emit('save')">{{ _('Save') }}</f-button>
       <f-button primary v-if="showSubmit" @click="$emit('submit')">{{ _('Submit') }}</f-button>
       <f-button secondary v-if="showRevert" @click="$emit('revert')">{{ _('Revert') }}</f-button>
-      <dropdown class="ml-2" v-if="links.length" :label="'Next Action'" :options="links"></dropdown>
+      <dropdown class="ml-2" v-if="showNextAction" :label="_('Actions')" :options="links"></dropdown>
     </div>
   </div>
 </template>
@@ -21,8 +21,11 @@ export default {
   data() {
     return {
       isDirty: false,
+      showSave: false,
       showSubmit: false,
-      showRevert: false
+      showRevert: false,
+      showNextAction: false,
+      disableSave: false
     }
   },
   created() {
@@ -45,6 +48,20 @@ export default {
         && !this.isDirty
         && !this.doc._notInserted
         && this.doc.submitted === 1;
+
+      this.showNextAction =
+        !this.doc._notInserted
+        && this.links.length;
+
+      this.showSave =
+        this.doc._notInserted ?
+          true :
+            this.meta.isSubmittable ?
+              (this.isDirty ? true : false) :
+              true;
+
+      this.disableSave =
+        this.doc._notInserted ? false : !this.isDirty;
     }
   },
   computed: {

ui/styles/variables.scss

@@ -1,2 +1,3 @@
 @import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";