feat(focus): focusing of button composition api

Author: codebender828

Diff for: package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@babel/preset-env": "^7.6.3",
+    "@vue/composition-api": "^0.3.2",
     "core-js": "^2.6.5",
     "css-loader": "^3.2.0",
     "esm": "^3.2.25",

Diff for: src/App.vue

@@ -1,22 +1,29 @@
 <template>
   <div>
-    {{ greeting }}
-    <Button>Simple text</Button>
+    {{ state.greeting }}
+    <Button>{{ state.buttonText }}</Button>
+    <Button @click="increment" variant="ghost" color="success" size="lg" > Increment </Button>
+    <br>
+    <h1>{{ state.count }}</h1>
   </div>
 </template>
 
 <script>
-import Button from './components/Button/index'
+import Button from './components/Button'
+import { useIncrement } from './use-increment'
 
 export default {
+  setup () {
+    const { state, increment } = useIncrement()
+
+    return {
+      state,
+      increment
+    }
+  },
   name: 'App',
   components: {
     Button
-  },
-  data () {
-    return {
-      greeting: 'Hi!'
-    }
   }
 }
 </script>

Diff for: src/lib/styles/components/Button.scss

@@ -7,6 +7,7 @@
   font-weight: bold;
   border: none;
   transition: all 0.2s ease-in;
+  outline: none;
 
   &.rounded {
     border-radius: 999px;
@@ -30,13 +31,13 @@
     background-image: radial-gradient(circle, rgb(255, 255, 255) 10%, transparent 10.01%);
     background-repeat: no-repeat;
     background-position: 50%;
-    transform: scale(10,10);
+    transform: scale(10, 10);
     opacity: 0;
     transition: transform .5s, opacity 1s;
   }
 
   &:active::after {
-    transform: scale(0,0);
+    transform: scale(0, 0);
     opacity: .2;
     transition: 0s;
   }
@@ -47,6 +48,10 @@
   background: $primary;
   color: lighten($primary, 45%);
 
+  &:focus {
+    box-shadow: rgba($primary, 0.6) 0px 0px 0px 3px;
+  }
+
   &.solid {
     background: $primary;
     color: lighten($primary, 50%);
@@ -121,6 +126,10 @@
   background: $secondary;
   color: lighten($secondary, 45%);
 
+  &:focus {
+    box-shadow: rgba($secondary, 0.6) 0px 0px 0px 3px;
+  }
+
   &.shadow {
     box-shadow: 0px 2px 4px rgba($secondary, 0.5);
   }
@@ -198,6 +207,10 @@
   background: $success;
   color: $light;
 
+  &:focus {
+    box-shadow: rgba($success, 0.6) 0px 0px 0px 3px;
+  }
+
   &.shadow {
     box-shadow: 0px 2px 4px rgba($success, 0.5);
   }
@@ -275,6 +288,10 @@
   background: $warning;
   color: lighten($warning, 45%);
 
+  &:focus {
+    box-shadow: rgba($warning, 0.6) 0px 0px 0px 3px;
+  }
+
   &.shadow {
     box-shadow: 0px 2px 4px rgba($warning, 0.5);
   }
@@ -352,6 +369,10 @@
   background: $danger;
   color: lighten($danger, 45%);
 
+  &:focus {
+    box-shadow: rgba($danger, 0.6) 0px 0px 0px 3px;
+  }
+
   &.shadow {
     box-shadow: 0px 2px 4px rgba($danger, 0.5);
   }
@@ -429,7 +450,9 @@
   background: $dark;
   color: lighten($dark, 45%);
 
-  &.ripple {}
+  &:focus {
+    box-shadow: rgba($dark, 0.6) 0px 0px 0px 3px;
+  }
 
   &.shadow {
     box-shadow: 0px 2px 4px rgba($dark, 0.5);
@@ -509,6 +532,10 @@
   background: $light;
   color: lighten($light, 45%);
 
+  &:focus {
+    box-shadow: rgba($light, 0.6) 0px 0px 0px 3px;
+  }
+
   &.shadow {
     box-shadow: 0px 2px 4px rgba($light, 0.5);
   }

Diff for: src/main.js

@@ -1,10 +1,13 @@
 import Vue from 'vue'
+import VueCompositionApi from '@vue/composition-api'
 import App from './App.vue'
 import './registerServiceWorker'
 import Kiwi from './lib/plugin'
 
 Vue.config.productionTip = false
 
+Vue.use(VueCompositionApi)
+
 // Install Kiwi plugin
 Vue.use(Kiwi, {
   theme: {

Diff for: src/scss/focus.scss

@@ -0,0 +1,3 @@
+.focus {
+  box-shadow: rgba(24, 170, 228, 0.6) 0px 0px 0px 3px;
+}

Diff for: src/use-increment.js

@@ -0,0 +1,20 @@
+import { reactive, onMounted } from '@vue/composition-api'
+
+export function useIncrement () {
+  const state = reactive({
+    greeting: 'Hi!',
+    buttonText: 'Simple Text',
+    count: 0
+  })
+
+  // Methods
+  const increment = () => state.count++
+
+  onMounted(() => {
+    console.log('Mounted App')
+  })
+
+  return {
+    state, increment
+  }
+}

Diff for: yarn.lock

@@ -1936,6 +1936,13 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
+"@vue/composition-api@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.3.2.tgz#2d797028e489bf7812f08c7bb33ffd03ef23c617"
+  integrity sha512-fD4dn9cJX62QSP2TMFLXCOQOa+Bu2o7kWDjrU/FNLkNqPPcCKBLxCH/Lc+gNCRBKdEUGyI3arjAw7j0Yz1hnvw==
+  dependencies:
+    tslib "^1.9.3"
+
 "@vue/eslint-config-standard@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-standard/-/eslint-config-standard-4.0.0.tgz#6be447ee674e3b0f733c584098fd9a22e6d76fcd"
@@ -13372,7 +13379,7 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
-tslib@^1.9.0:
+tslib@^1.9.0, tslib@^1.9.3:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==