Permalink
Browse files

fix(form controls): Apply only required props & classes (#609)

  • Loading branch information...
tmorehouse committed Jul 1, 2017
1 parent fcc0cc2 commit c773f7991bdd432eeb2cff4a9b4d11042b30efd4
@@ -1,5 +1,5 @@
<template>
<label :class="[inputClass,checkboxClass,custom?'custom-checkbox':null]">
<label :class="[inputClass,checkboxClass]">
<input type="checkbox"
:id="id || null"
:name="name"
@@ -11,7 +11,7 @@
<span class="custom-control-indicator"
aria-hidden="true"
v-if="custom"></span>
<span :class="[custom?'custom-control-description':null]">
<span :class="custom ? 'custom-control-description' : null">
<slot></slot>
</span>
</label>
@@ -47,11 +47,17 @@ export default {
}
},
computed: {
isChecked() {
return arrayIncludes(this.checked, this.value);
},
custom() {
return !this.plain;
},
inputClass() {
return [
this.size ? `form-control-${this.size}` : null,
this.custom ? 'custom-checkbox' : null
];
},
isChecked() {
return arrayIncludes(this.checked, this.value);
}
},
methods: {
@@ -1,5 +1,5 @@
<template>
<div :class="['form-control', custom?'custom-file':null, inputClass]"
<div :class="custom?'custom-file':null"
:id="id ? (id + '__BV_file_outer_') : null"
@dragover.stop.prevent="dragover"
>
@@ -1,6 +1,6 @@
<template>
<p :id="id || null"
:class="['form-control-static',inputClass]"
:class="inputClass"
v-html="staticValue"
>
<slot></slot>
@@ -15,6 +15,13 @@
computed: {
staticValue() {
return this.formatter ? this.formatter(this.value) : this.value;
},
inputClass() {
return [
'form-control-static',
this.size ? `form-control-${this.size}` : null,
this.state ? `form-control-${this.state}` : null
];
}
},
props: {
@@ -1,15 +1,15 @@
<template>
<input v-if="!static"
ref="input"
:type="type"
:type="textarea ? null : type"
:value="value"
:name="name"
:id="id || null"
:disabled="disabled"
:readonly="readonly"
:is="textarea?'textarea':'input'"
:class="['form-control',inputClass]"
:rows="rows || rowsCount"
:is="textarea ? 'textarea' : 'input'"
:class="inputClass"
:rows="textarea ? (rows || rowsCount) : null"
:placeholder="placeholder"
@input="onInput($event.target.value)"
@change="onChange($event.target.value)"
@@ -36,6 +36,13 @@
computed: {
rowsCount() {
return (this.value || '').toString().split('\n').length;
},
inputClass() {
return [
'form-control',
this.size ? `form-control-${this.size}` : null,
this.state ? `form-control-${this.state}` : null
];
}
},
methods: {
@@ -1,9 +1,8 @@
<template>
<div :id="id || null"
:class="[inputClass, inputState, this.stacked?'custom-controls-stacked':'']"
role="radiogroup"
>
<label :class="[checkboxClass,custom?'custom-radio':null]" v-for="option in formOptions">
<div :id="id || null" :class="inputClass" role="radiogroup">
<label :class="[checkboxClass, custom?'custom-radio':null]"
v-for="option in formOptions"
>
<input :id="option.id || null"
:class="custom?'custom-control-input':null"
ref="inputs"
@@ -34,12 +33,21 @@
};
},
computed: {
inputState() {
return this.state ? `has-${this.state}` : '';
inputClass() {
return [
this.size ? `form-control-${this.size}` : null,
this.state ? `has-${this.state}` : '',
this.stacked ? 'custom-controls-stacked' : ''
];
}
},
props: {
value: {},
options: {
type: [Array, Object],
default: null,
required: true
},
size: {
type: String,
default: null
@@ -48,11 +56,6 @@
type: String,
default: null
},
options: {
type: [Array, Object],
default: null,
required: true
},
stacked: {
type: Boolean,
default: false
@@ -1,5 +1,5 @@
<template>
<select :class="['form-control',inputClass,custom?'custom-select':null]"
<select :class="inputClass"
:name="name"
:id="id || null"
v-model="localValue"
@@ -26,6 +26,15 @@
localValue: this.value
};
},
computed: {
inputClass() {
return [
'form-control',
this.size ? `form-control-${this.size}` : null,
this.custom ? 'custom-select' : null
];
}
},
props: {
value: {},
size: {
@@ -1,12 +1,4 @@
export default {
computed: {
inputClass() {
return [
this.size ? `form-control-${this.size}` : null,
this.state ? `form-control-${this.state}` : null
];
}
},
props: {
name: {
type: String

0 comments on commit c773f79

Please sign in to comment.