feat: Refactored Tags

bloombergindustry · Oct 31, 2018 · 9046945 · 9046945
1 parent 43ae507
commit 9046945
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 2 deletions.
diff --git a/dev/views/Tags.vue b/dev/views/Tags.vue
@@ -1,6 +1,12 @@
 <template>
  <body>
  <div>
+
+ <FishTankTagRef
+ v-model="tagOne"
+ label="FishTankTagRef"/>
+
+ <hr>
  <h1 class="tags--heading">Binary Tags</h1>
  <span>
  <p class="tags--text">
@@ -80,7 +86,7 @@
 
 <script lang="ts">
 import Vue from "vue"
-import { FishTankTag, MultiSelectTag, InputText , InputTagRemove} from "@/index"
+import { FishTankTag, MultiSelectTag, InputText , InputTagRemove, FishTankTagRef} from "@/index"
 
 
 
@@ -89,7 +95,8 @@ export default Vue.extend({
  FishTankTag,
  MultiSelectTag,
  InputTagRemove,
- InputText 
+ InputText,
+ FishTankTagRef
  },
  data () {
  return{

diff --git a/src/components/FishTankTag.vue b/src/components/FishTankTag.vue
@@ -0,0 +1,149 @@
+<template>
+ <div :class="$style.wrap">
+ <label
+ :for="(id !==null? id: labelId)"
+ >
+ <input 
+ :id="(id !==null? id: labelId)" 
+ :disabled="disabled"
+ :checked="isChecked"
+ :value="value"
+ :class="$style.input"
+ type="checkbox"
+ v-on="listeners">
+ <div :class="$style.label">
+ <div>{{ label }}</div>
+ <slot/>
+ </div>
+ </label>
+ </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+
+export default Vue.extend({
+ name:"FishTankTag",
+ components: {
+ },
+ model: {
+ prop: 'modelValue',
+ event: 'change'
+ },
+ props: {
+ disabled:{
+ type:Boolean,
+ required:false,
+ default:false
+ },
+ value: {
+ default:null,
+ type: [String, Boolean, Object, Array, Number],
+ },
+ modelValue: {
+ type:[String, Boolean, Object, Array, Number],
+ default: false
+ },
+ label: {
+ type: String,
+ required: true
+ },
+ id:{
+ type:String,
+ default:null,
+ required:false
+ },
+ trueValue: {
+ default: true,
+ type:[String, Boolean, Object, Array, Number]
+ },
+ falseValue: {
+ default: false,
+ type:[String, Boolean, Object, Array, Number]
+ }
+ },
+ data(){
+ return {
+ checkProxy:false
+ }
+ },
+ computed: {
+ listeners(): Record<string, Function | Function[]> {
+ return {
+ ...this.$listeners,
+ change: ($event: MouseEvent) => {
+ if (this.disabled) return 
+ this.updateInput($event)
+ }
+ }
+ },
+ checked: {
+ set:function(val:any){
+ this.checkProxy = val
+ },
+ get: function(): Record<string, boolean | number | Function | Function[]>{
+ return this.value
+ }
+ },
+ isChecked: function(){
+ if (this.modelValue instanceof Array) {
+ let res = false
+ if(this.modelValue.indexOf(this.value) >= 0) res = !res
+ return res
+ }
+ return this.modelValue === this.trueValue
+ },
+ labelId(): string {
+ return `ft-tag-${(this as any)._uid}`
+ },
+ returnEnabledDisabled(): string {
+ return this.disabled ? "ft-input-checkbox__checkbox__disabled" : "ft-input-checkbox__checkbox__enabled"
+ }
+ },
+ methods:{
+ updateInput(event:any) {
+ let isChecked = event.target.checked
+
+ if (this.modelValue instanceof Array) {
+ let newValue = [...this.modelValue]
+
+ if (isChecked) {
+ newValue.push(this.value)
+ } else {
+ newValue.splice(newValue.indexOf(this.value), 1)
+ }
+
+ this.$emit('change', newValue)
+ } else {
+ this.$emit('change', isChecked ? this.trueValue : this.falseValue)
+ }
+ }
+ }
+})
+</script>
+
+<style module lang="scss">
+ @import '../styles/fonts';
+ @import '../styles/mixins';
+ @import '../styles/variables';
+ .wrap{
+ position: relative;
+ display: inline-block;
+ }
+ .input{
+ position: absolute;
+ width:100%;
+ height: 100%;
+ display: block;
+ }
+ .label{
+ @include font-base-md();
+ font-family: $font-primary;
+ font-weight:$fontweight-regular;
+ font-size: $fontsize-base-md;
+ line-height:$lineheight-base-md;
+ letter-spacing: $letterspacing-base-md;
+ color:$color-gray-dark;
+ }
+</style>
+
diff --git a/src/index.ts b/src/index.ts
@@ -62,6 +62,7 @@ export { default as FishTankModal } from "./components/Modal.vue"
 export { default as FishTankDialogBox } from "./components/DialogBox.vue"
 
 export { default as FishTankTag } from "./components/Tag.vue"
+export { default as FishTankTagRef } from "./components/FishTankTag.vue"
 export { default as FishTankTagRemove } from "./components/InputTagRemove.vue"
 export { default as FishTankMultiSelectTag } from "./components/MultiSelectTag.vue"