Last active
May 7, 2020 09:32
-
-
Save EarthenLynx/7d3f17e56605ee1270c00ae941619002 to your computer and use it in GitHub Desktop.
Minimalistic Vue Inputs with Spectre.css classes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="form-group mb-4"> | |
<label class="text-bold">{{label}}</label> | |
<textarea @keyup="emitValue" v-model="text" class="form-input" :id="id" :placeholder="placeholder" :name="name" rows="2" /> | |
<small style="float: right;" v-if="wordcount && textValue.words > 1">Count: {{textValue.words}} words</small> | |
</div> | |
</template> | |
<script> | |
/* | |
* Input: | |
* => id: ID to be placed on the input element | |
* => placeholder: For the Text input element | |
* => label: Text that is used as a label for the Text input area | |
* => inputName: Text that's used for the input element's name | |
* => wordcount: Whether or whether not wordcount shall be shown below the text area | |
* | |
* Output: | |
* => textValue: Object with these props: | |
* | -> text: Text - content of the text area | |
* | -> len: Number of characters used in the text area | |
* | -> words: Number of words used in the text area | |
* | |
* Events: | |
* => @changeLongText: Fires when the Text - input changes | |
*/ | |
export default { | |
props: { | |
id: String, | |
placeholder: String, | |
label: String, | |
inputName: String, | |
wordcount: Boolean | |
}, | |
data() { | |
return { | |
text: "" | |
}; | |
}, | |
computed: { | |
textValue() { | |
return { | |
text: this.text, | |
len: this.text.length, | |
words: this.text.split(" ").length | |
}; | |
} | |
}, | |
methods: { | |
emitValue() { | |
this.$emit("changeLongText", this.textValue); | |
} | |
} | |
}; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="form-group"> | |
<label class="text-bold">{{label}}</label> | |
<div class="input-group"> | |
<select v-model="select" @change="emitSelectionValue" class="form-sqelect"> | |
<option disabled>Choose one ...</option> | |
<option v-for="item in items" :key="item" :value="item.value">{{item.text}}</option> | |
</select> | |
<select v-model="percent" @change="emitSelectionValue" class="form-sqelect"> | |
<option disabled>I am this sure ...</option> | |
<option v-for="item in percentPool" :key="item" :value="item">{{item}}</option> | |
</select> | |
<span class="input-group-addon">% Percent</span> | |
</div> | |
</div> | |
</template> | |
<script> | |
/* | |
* Input: | |
* => id: ID to be placed on the input element | |
* => placeholder: For the Text input element | |
* => label: Text that is used as a label for the Text input area | |
* => items: Array of objects with the following structure: | |
* | -> item.text: Text that is shown in the selection field | |
* | -> item.value: Value for the corresponding option | |
* | |
* Output: | |
* => selectionValue: Number that uses an expection - value calculated from the seleciton's value & the percentage | |
* | |
* Events: | |
* => @changeSelection: Fires when the Text - input or the percentage changes | |
*/ | |
export default { | |
props: { | |
id: String, | |
placeholder: String, | |
label: String, | |
items: Array, | |
}, | |
data() { | |
return { | |
min: 25, | |
max: 100, | |
select: "", | |
percent: 25, | |
percentPool: [25, 50, 75, 100] | |
}; | |
}, | |
computed: { | |
selectionValue() { | |
return Math.ceil(this.select * 100/this.percent); | |
} | |
}, | |
methods: { | |
emitSelectionValue() { | |
this.$emit("changeSelection", this.selectionValue); | |
} | |
} | |
}; | |
</script> | |
<style> | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<!-- form radio control --> | |
<div class="form-group"> | |
<label class="text-bold">{{label}}</label> | |
<div v-for="item in items" :key="item"> | |
<label class="form-radio"> | |
<input @change="emitRadioValue" v-model="radioValue" :name="inputName" type="radio" :value="item.value" /> | |
<i class="form-icon"></i> | |
{{item.text}} | |
</label> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
props: { | |
id: String, | |
label: String, | |
items: Array, | |
inputName: String | |
}, | |
data() { | |
return { | |
radioValue: 1, | |
} | |
}, | |
methods: { | |
emitRadioValue() { | |
this.$emit("changeRadio", this.radioValue); | |
} | |
} | |
}; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="form-group"> | |
<label class="text-bold">{{label}}</label> | |
<select v-model="selectValue" @change="emitSelectionValue" class="form-select"> | |
<option disabled>Choose one ...</option> | |
<option v-for="item in items" :key="item" :value="item.value">{{item.text}}</option> | |
</select> | |
</div> | |
</template> | |
<script> | |
export default { | |
props: { | |
id: String, | |
label: String, | |
items: Array | |
}, | |
data() { | |
return { | |
selectValue: "" | |
} | |
}, | |
methods: { | |
emitSelectionValue() { | |
this.$emit("changeSelection", this.selectValue); | |
} | |
} | |
}; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="form-group"> | |
<label class="form-switch"> | |
<input v-model="switcherValue" @change="emitValue()" type="checkbox" /> | |
<i class="form-icon"></i> | |
{{label}} | {{switcherText}} | |
</label> | |
</div> | |
</template> | |
<script> | |
/* | |
* Input: | |
* => label: Text is used as a label for the switcher | |
* Output: | |
* => switcherValue: Boolean | |
*/ | |
export default { | |
props: { | |
label: String | |
}, | |
data() { | |
return { | |
switcherValue: false | |
}; | |
}, | |
methods: { | |
emitValue() { | |
this.$emit("changeSwitcher", this.switcherValue); | |
} | |
}, | |
computed: { | |
switcherText() { | |
return this.switcherValue === true ? "Yes" : "No"; | |
} | |
} | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment