Skip to content

Commit

Permalink
Add many features
Browse files Browse the repository at this point in the history
LouisMazel committed Jan 16, 2019

Verified

This commit was signed with the committer’s verified signature.
ken-matsui Ken Matsui
1 parent 55e140d commit 1d32dbc
Showing 4 changed files with 663 additions and 120 deletions.
8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -51,10 +51,16 @@ Vue.component('vue-input-ui', VueInputUi);
| Props | Type | Required | Default | Options |
|------------|------------|----------|------------|----------------|
| v-model | String/Int | true | - | - |
| id | String | false | VueInputUi | - |
| label | String | false | Enter Text | - |
| type | String | no | text | text or number |
| hint* | text | no | - | |
| error-hint** | Boolean | no | false | |
| error** | Boolean | no | false | |
| disabled | Boolean | no | false | |
| dark | Boolean | no | false | |
| size | Boolean | no | false | |
| readonly | Boolean | no | false | |
| color | String `HEX` | no | dogderblue | |

## Contribution

228 changes: 196 additions & 32 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -2,30 +2,61 @@
<div
id="VueInputUi"
class="vue-input-ui"
:class="{'dark': darkMode}"
>
<img
src="./assets/logo.png"
alt="Ctk logo"
>
<div id="VueInputUiContainerDiv">
<h1>VueCtkInputText</h1>
<h3>A VueJs component : Beautiful Input</h3>
<VueInputUi
v-model="value2"
label="Initial input"
/>
<div class="container">
<h1>{{ !value1 ? '-' : value1 }}</h1>
<h2>{{ !value2 ? '-' : value2 }}</h2>
<h3>{{ !value3 ? '-' : value3 }}</h3>
<p>{{ !value4 ? '-' : value4 }}</p>
<button
class="btn"
style="margin-top: 20px;"
@click="darkMode = !darkMode"
>
{{ darkMode ? 'Disable' : 'Enable' }} Dark Mode
</button>
<br>
<VueInputUi
v-model="value"
label="Input with value"
/>
<br>
<VueInputUi
v-model="value2"
:error-hint="true"
label="Input with error-hint: true + text hint"
hint="Error text"
/>
<div class="component-container">
<VueInputUi
v-model="value1"
label="Initial input"
color="#F00"
size="sm"
:dark="darkMode"
/>
<br>
<VueInputUi
v-model="value2"
label="Input with value"
:dark="darkMode"
/>
<br>
<VueInputUi
v-model="value3"
:error="true"
label="Input with error='true' + text hint"
hint="Error text"
size="lg"
:dark="darkMode"
/>
<br>
<VueInputUi
v-model="value4"
:dark="darkMode"
/>
<br>
<VueInputUi
v-model="value4"
dark
color="purple"
/>
<br>
<VueInputUi
v-model="value4"
disabled
/>
</div>
</div>
</div>
</template>
@@ -40,26 +71,159 @@
},
data () {
return {
value: 'Hello world!',
value2: null
value1: 'VueCtkInputText',
value2: 'Hello world!',
value3: 'A beautiful input made with VueJs',
value4: null,
darkMode: false
}
}
}
</script>

<style lang="scss">
#VueInputUiContainerDiv, html, body {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
@import "./assets/main.scss";
html, body {
margin: 0;
min-height: 100%;
}
#VueInputUiContainerDiv {
html {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
width: 100%;
}
body {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
#VueInputUi {
min-height: 100%;
&.dark {
background-color: darken(#424242, 20%);
.container {
color: white;
}
header {
color: rgba(255, 255, 255, 0.70);
}
}
}
.container {
width: 80%;
margin: 0 auto;
padding-top: 40px;
text-align: center;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after {
box-sizing: border-box;
}
</style>
textarea {
background-color: #FFF;
color: #bd4147;
border: 1px solid #CCC;
border-radius: 4px;
outline: none;
font-size: 85%;
width: 100%;
font-weight: 700;
font-family: monospace, monospace;
resize: none;
}
.btn {
padding: 10px 20px;
margin-bottom: 20px;
border: none;
border-radius: 4px;
font-size: 12px;
outline: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
background-color: #96bf31;
color: #FFF;
font-weight: 500;
&:hover {
background-color: darken(#96bf31, 10%);
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
}
&.option {
background-color: #424242;
&:hover {
background-color: darken(#424242, 10%);
}
}
}
.component {
padding: 10px;
background: #FFF;
border-radius: 4px;
border: 1px solid #ebebeb;
&:hover {
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
}
&.options {
margin-bottom: 20px;
}
}
.component-container {
margin: 0 10px 20px 10px;
padding: 20px;
background: #FFF;
border-radius: 4px;
border: 1px solid #ebebeb;
min-width: 300px;
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
flex: 1 0 48%;
&:hover {
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
}
&.dark {
background-color: darken(#424242, 10%);
color: #FFF;
textarea {
background: #424242;
color: dodgerblue;
}
.btn {
&:hover {
box-shadow: 0 0 8px 0 rgba(0,0,0,.6), 0 2px 4px 0 rgba(0,0,0,.5);
}
&.option {
background-color: #424242;
&:hover {
background-color: lighten(#424242, 10%);
}
}
}
}
}
.dark {
.component-container, .component {
border: 1px solid #424242;
background-color: darken(#424242, 10%);
&:hover {
box-shadow: 0 0 8px 0 rgba(0,0,0,.6), 0 2px 4px 0 rgba(0,0,0,.5);
}
}
hr {
border-color: #424242;
}
}
@media screen and (max-width: 1024px) {
.components-container.flex {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
flex-flow: column;
-moz-flex-direction: column;
}
}
</style>
296 changes: 209 additions & 87 deletions src/VueInputUi/index.vue
Original file line number Diff line number Diff line change
@@ -1,52 +1,77 @@
<template>
<div
id="VueInputUi"
class="vue-input-uit"
ref="parent"
:class="[{
'is-focused': isFocus,
'has-value': value,
'has-error': error,
'is-disabled': disabled,
'is-dark': dark
}, size]"
class="field"
@click="focusInput"
>
<div
ref="parent"
:class="{'is-focused': isFocus, 'has-value': value, 'has-error': errorHint}"
class="field"
<input
:id="id"
ref="VueInputUi"
v-model="inputValue"
:placeholder="label"
:disabled="disabled"
:style="[borderStyle]"
:type="type"
class="field-input"
:readonly="readonly"
@focus="onFocus"
@blur="onBlur"
@click="$emit('click')"
>
<label
:class="hint ? (errorHint ? 'text-danger' : 'text-primary') : ''"
:for="id"
class="field-label"
>
{{ hint || label }}
</label>
<input
:id="id"
ref="VueInputUi"
v-model="inputValue"
:type="type"
:placeholder="label"
:value="value"
class="field-input"
@focus="onFocus"
@blur="onBlur"
>
</div>
<label
ref="label"
:for="id"
:class="error ? 'text-danger' : null"
:style="[colorStyle]"
class="field-label"
@click="focusInput"
>
{{ hint || label }}
</label>
</div>
</template>

<script>
export default {
name: 'VueInputUi',
props: {
label: { type: String, default: 'Enter text' },
value: { type: String, default: String },
value: { type: [String, Object], required: false, default: null },
label: { type: String, default: 'Select date & time' },
hint: { type: String, default: String },
errorHint: { type: Boolean, default: Boolean },
error: { type: Boolean, default: Boolean },
color: { type: String, default: 'dodgerblue' },
disabled: { type: Boolean, default: false },
dark: { type: Boolean, default: false },
id: { type: String, default: 'VueInputUi' },
size: { type: String, default: String },
type: { type: String, default: 'text' },
id: { type: String, default: 'VueInputUi' }
readonly: { type: Boolean, default: false },
},
data () {
data: function () {
return {
isFocus: false
}
},
computed: {
borderStyle () {
const cond = (this.isFocus && !this.error)
return cond
? { border: `1px solid ${this.color} !important` }
: null
},
colorStyle () {
const cond = this.isFocus
return cond
? { color: `${this.color}` }
: null
},
inputValue: {
get () {
return this.value
@@ -57,85 +82,182 @@
}
},
methods: {
onFocus () {
focusInput () {
this.$refs.VueInputUi.focus()
},
onFocus: function () {
this.$emit('focus')
this.isFocus = true
},
onBlur () {
onBlur: function () {
this.$emit('blur')
this.isFocus = false
}
}
}
</script>

<style lang="scss" scoped>
#VueInputUi {
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
.field{
position: relative;
*, *::before, *::after {
box-sizing: border-box;
}
.field{
position: relative;
&.is-dark {
.field-label{
position: absolute;
top: 3px;
left: 13px;
-webkit-transform: translateY(25%);
transform: translateY(25%);
opacity: 0;
-webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
font-size: 11px;
color: rgba(0, 0, 0, 0.54);
color: rgba(255, 255, 255, 0.70);
}
.field-input{
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
position: relative;
width: 100%;
height: 42px;
min-height: 42px;
padding: 0 12px;
font-weight: 300;
-webkit-appearance: none;
outline: none;
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
&.has-error {
.field-input {
border-color: orangered !important;
background-color: #424242;
border-color: rgba(255, 255, 255, 0.70);
color: rgba(255, 255, 255, 0.70);
}
&.is-disabled {
.field-label, .field-input {
color: #000;
}
}
}
.field-label{
position: absolute;
top: 3px;
cursor: pointer;
left: 13px;
-webkit-transform: translateY(25%);
transform: translateY(25%);
opacity: 0;
-webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
font-size: 11px;
color: rgba(0, 0, 0, 0.54);
}
.field-input{
cursor: pointer;
background-color: #FFF;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
position: relative;
width: 100%;
height: 42px;
min-height: 42px;
padding: 0 12px;
font-weight: 400;
-webkit-appearance: none;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
font-size: 14px;
z-index: 0;
}
&.has-error {
.field-input {
border-color: orangered !important;
}
}
&.has-value {
.field-label {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
font-size: 11px;
}
.field-input {
padding-top: 14px;
}
}
&.is-focused {
.field-input {
border-color: dodgerblue;
}
.field-label {
color: dodgerblue;
}
}
&.is-disabled {
.field-input {
border-color: #CCC;
background: #F2F2F2;
}
.field-label, .field-input {
cursor: default;
}
}
.text-danger {
color: orangered !important;
}
&.is-dark {
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: rgba(255, 255, 255, 0.70);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: rgba(255, 255, 255, 0.70);
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: rgba(255, 255, 255, 0.70);
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(255, 255, 255, 0.70);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(255, 255, 255, 0.70);
}
::placeholder { /* Most modern browsers support this now. */
color: rgba(255, 255, 255, 0.70);
}
&.is-disabled {
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #424242;
}
.field-label{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
font-size: 11px;
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #424242;
opacity: 1;
}
.field-input {
padding-top: 14px;
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #424242;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #424242;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #424242;
}
::placeholder { /* Most modern browsers support this now. */
color: #424242;
}
}
}
&.sm {
.field-input {
height: 36px;
min-height: 36px;
font-size: 12px;
}
.field-label {
font-size: 10px;
}
&.has-value {
.field-label{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
font-size: 11px;
}
.field-input {
padding-top: 14px;
padding-top: 12px;
}
}
&.is-focused {
}
&.lg {
.field-input {
height: 48px;
min-height: 48px;
font-size: 16px;
}
.field-label {
font-size: 14px;
}
&.has-value {
.field-input {
border-color: dodgerblue;
}
.field-label {
color: dodgerblue;
padding-top: 16px;
}
}
}
.text-danger {
color: orangered !important;
}
}
</style>
</style>
251 changes: 251 additions & 0 deletions src/assets/main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
.date-time-picker {
// font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
input, label, p, span {
// font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
.dots-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}

.text-muted {
color: rgba(0,0,0,.54) !important;
}
.text-white {
color: white;
}
.text-strong {
font-weight: 500;
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.fs-12 {
font-size: 12px !important;
}
.fs-14 {
font-size: 14px !important;
}
.fs-16 {
font-size: 16px !important;
}
.fs-18 {
font-size: 18px !important;
}
.fw-300 {
font-weight: 300;
}
.fw-400 {
font-weight: 400;
}
.fw-500 {
font-weight: 500;
}
.br-4 {
border-radius: 4px;
}
.h-100 {
height: 100% !important;
}
.mh-100 {
max-height: 100% !important;
}
.w-100 {
width: 100% !important;
}

/** FLEX HELPERS **/
.fluid {
width: 100%;
}
.fill-height {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.spacer {
-webkit-box-flex: 1!important;
-ms-flex-positive: 1!important;
flex-grow: 1!important;
}

.align-center {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.flex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}

.flex-start {
-webkit-box-align: start;
align-items: flex-start;
justify-content: flex-start;
-ms-flex-pack: start;
-moz-box-align: start;
-moz-box-pack: start;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
}

.flex-end {
-webkit-box-align: end;
align-items: flex-end;
justify-content: flex-end;
-ms-flex-pack: end;
-moz-box-align: end;
-moz-box-pack: end;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
}

.flex-direction-column {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
flex-flow: column;
-moz-flex-direction: column;
}

.flex-direction-column-reverse {
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
flex-flow: column-reverse;
-moz-flex-direction: column-reverse;
}

.flex-direction-row {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
flex-flow: row;
-moz-flex-direction: row;
}

.justify-content-right {
justify-content: flex-end;
-ms-flex-pack: end;
-moz-box-align: end;
-moz-box-pack: end;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-webkit-box-align: end;
}

.justify-content-center {
justify-content: center;
-ms-flex-pack: center;
-moz-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-webkit-box-align: center;
}

.justify-content-between {
justify-content: space-between;
-ms-flex-pack: justify;
-moz-box-align: stretch;
-moz-box-pack: justify;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-webkit-box-align: stretch;
}

.justify-content-around {
justify-content: space-around;
-ms-flex-pack: justify;
-moz-box-align: stretch;
-moz-box-pack: justify;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-webkit-box-align: stretch;
}

.flex-fill {
-webkit-flex: 0 1 auto;
-moz-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.flex-fixed {
-webkit-flex: 0 0 auto;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-grow {
flex-grow: 1;
}
/** END FLEX HELPERS **/
}

0 comments on commit 1d32dbc

Please sign in to comment.