diff --git a/README.md b/README.md index 69453e1..5644ccf 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/src/App.vue b/src/App.vue index ee485b6..192e4c0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,30 +2,61 @@
- Ctk logo -
-

VueCtkInputText

-

A VueJs component : Beautiful Input

- +
+

{{ !value1 ? '-' : value1 }}

+

{{ !value2 ? '-' : value2 }}

+

{{ !value3 ? '-' : value3 }}

+

{{ !value4 ? '-' : value4 }}

+
- -
- +
+ +
+ +
+ +
+ +
+ +
+ +
@@ -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 } } } + 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; + } + } + \ No newline at end of file diff --git a/src/VueInputUi/index.vue b/src/VueInputUi/index.vue index bb7c6eb..b03f0c6 100644 --- a/src/VueInputUi/index.vue +++ b/src/VueInputUi/index.vue @@ -1,32 +1,40 @@ @@ -34,19 +42,36 @@ 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,10 +82,15 @@ } }, methods: { - onFocus () { + focusInput () { + this.$refs.VueInputUi.focus() + }, + onFocus: function () { + this.$emit('focus') this.isFocus = true }, - onBlur () { + onBlur: function () { + this.$emit('blur') this.isFocus = false } } @@ -68,74 +98,166 @@ + \ No newline at end of file diff --git a/src/assets/main.scss b/src/assets/main.scss new file mode 100644 index 0000000..cee869b --- /dev/null +++ b/src/assets/main.scss @@ -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 **/ +}