feat: radio (#18)

* Move fishtank icons & tslib into deps section

These are needed for actual runtime.

* feat/radio
feat: Added InputRadio component for visual QA

feat: cleaned up stylings for radio buttons in .scss file and added a div to the .vue file to better support disabled state styling

* added pointer cursor to active radio buttons in .scss file

dev/Index.vue

@@ -2,6 +2,7 @@
  <section>
  <ul>
  <li class="checkboxes"><a href="#/checkboxes">Checkboxes</a></li>
+ <li><a href="#/radios">Radios</a></li>
  <li><a href="#/switches">Switches</a></li>
  <li><a href="#/modals">Modals</a></li>
  <li><a href="#/cards">Cards</a></li>

dev/router.ts

@@ -18,6 +18,10 @@ export default new Router({
  path: '/modals',
  component: () => import("./views/Modals.vue")
  },
+ {
+ path: '/radios',
+ component: () => import("./views/Radios.vue")
+ },
  {
  path: '/switches',
  component: () => import("./views/Switches.vue")

dev/views/Radios.vue

@@ -0,0 +1,32 @@
+<template>
+ <section>
+ <InputRadio 
+ v-model="val"
+ value="alpha" 
+ label="alpha"/>
+ <InputRadio 
+ v-model="val"
+ value="beta" 
+ label="beta"/>
+ </section>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { InputRadio } from '@/index'
+
+export default Vue.extend({
+ components:{
+ InputRadio,
+ },
+ data(){
+ return {
+ val:null,
+ arr:['epsilon'],
+ baseVal:false,
+ baseArr:[]
+ }
+ }
+ 
+})
+</script>

src/components/InputRadio.vue

@@ -0,0 +1,70 @@
+<template>
+ <div class="fishtank-radio">
+ <label 
+ :for="id" 
+ class="fishtank-radio__label">
+ <input 
+ :disabled="disabled" 
+ :id="id" 
+ :value="value" 
+ :checked ="shouldBeChecked" 
+ class="fishtank-radio__input" 
+ type="radio" 
+ @change="updateFtRadio">
+ <div class="fishtank-radio__icon"/>
+ <div class="fishtank-radio__label-content">
+ {{ label }}
+ </div>
+ </label>
+ </div>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+ name:'FishtankRadio',
+ model: {
+ prop: 'modelValue',
+ event: 'change'
+ },
+ props:{
+ value:{
+ type:[String,Boolean,Object,Number], 
+ default:null,
+ require:true
+ },
+ disabled:{
+ type:Boolean,
+ default:null,
+ require:false
+ },
+ modelValue: {
+ type:[String,Boolean,Object,Number],
+ default: "",
+ require:true
+ },
+ label:{
+ type:String,
+ default:null,
+ required:true
+ },
+ id:{
+ type:String,
+ default:null,
+ required:false
+ }
+ },
+ computed:{
+ shouldBeChecked():Boolean{
+ return this.value === this.modelValue
+ }
+ },
+ methods:{
+ updateFtRadio():void{
+ this.$emit('change', this.value)
+ }
+ },
+})
+</script>
+
+

src/index.ts

@@ -11,6 +11,8 @@ export { default as ButtonDestructive } from "./components/ButtonDestructive.vue
 
 export { default as Card } from "./components/Card.vue"
 export { default as InputCheckbox } from "./components/InputCheckbox.vue"
+
+export { default as InputRadio } from "./components/InputRadio.vue"
 export { default as InputSwitch } from "./components/InputSwitch.vue"
 export { default as InputText } from "./components/InputText.vue"
 

src/styles.scss

@@ -5,6 +5,8 @@
 @import "./styles/components/buttons";
 @import "./styles/components/cards";
 @import "./styles/components/input-text";
+@import "./styles/components/input-radio";
 @import "./styles/components/input-switch";
+
 @import "./styles/components/modals";
 @import "./styles/components/tags";

src/styles/components/_input-radio.scss

@@ -0,0 +1,89 @@
+.fishtank-radio{
+ font-family: $font-primary;
+ position: relative;
+ padding-left: $baseline*9;
+ padding-top: 6px;
+ padding-bottom: 6px;
+}
+.fishtank-radio__input{
+ opacity: 0;
+ margin: 0;
+ position: absolute;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ cursor: pointer;
+ &:disabled {
+ cursor: default;
+ }
+}
+.fishtank-radio__icon{
+ transition: all 0.3s ease;
+ display:inline-block;
+ width:12px;
+ height:12px;
+ background-color: transparent;
+ content:"";
+ border: 2px solid $color-gray;
+ border-radius:50%;
+ position: absolute;
+ left: 4px;
+ top: 8px;
+}
+.fishtank-radio__input + .fishtank-radio__icon{
+ &:after{
+ content:"";
+ width: 6px;
+ height: 6px;
+ background-color: $color-selected;
+ border:1px solid $color-selected;
+ border-radius: 50%;
+ display: inline-block;
+ top: 2px;
+ left: 2px;
+ position: absolute;
+ transform: scale(0.0);
+ transition: transform .3s cubic-bezier(.5,.1,.3,1.5);
+ }
+}
+.fishtank-radio__input:checked + .fishtank-radio__icon{
+ &:after{
+ transform: scale(1.0);
+ }
+}
+.fishtank-radio__input:hover + .fishtank-radio__icon{
+ &:after{
+ background-color: $color-selected-darker;
+ border:1px solid $color-selected-darker;
+ }
+}
+.fishtank-radio__label{
+ color: $color-gray-dark;
+ font-size: $fontsize-base-md;
+ line-height: $lineheight-base-md;
+ letter-spacing: $letterspacing-base-md;
+ font-weight:$fontweight-regular;
+ &:hover{
+ color:$color-black;
+ }
+}
+.fishtank-radio__input:hover {
+ & + .fishtank-radio__icon{
+ border:2px solid $color-black;
+ }
+}
+.fishtank-radio__input:disabled + .fishtank-radio__icon{
+ border:2px solid $color-disabled;
+}
+.fishtank-radio__input:checked:disabled + .fishtank-radio__icon{
+ border:2px solid $color-disabled;
+ &:after {
+ background-color: $color-disabled;
+ border:1px solid $color-disabled;
+ }
+}
+.fishtank-radio__input:disabled ~ .fishtank-radio__label-content{
+ color:$color-disabled;
+}