Skip to content

Commit 1d32dbc

Browse files
LouisMazelLouisMazel
committed
Add many features
1 parent 55e140d commit 1d32dbc

File tree

4 files changed

+663
-120
lines changed

4 files changed

+663
-120
lines changed

‎README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,16 @@ Vue.component('vue-input-ui', VueInputUi);
5151
| Props | Type | Required | Default | Options |
5252
|------------|------------|----------|------------|----------------|
5353
| v-model | String/Int | true | - | - |
54+
| id | String | false | VueInputUi | - |
5455
| label | String | false | Enter Text | - |
5556
| type | String | no | text | text or number |
5657
| hint* | text | no | - | |
57-
| error-hint** | Boolean | no | false | |
58+
| error** | Boolean | no | false | |
59+
| disabled | Boolean | no | false | |
60+
| dark | Boolean | no | false | |
61+
| size | Boolean | no | false | |
62+
| readonly | Boolean | no | false | |
63+
| color | String `HEX` | no | dogderblue | |
5864

5965
## Contribution
6066

‎src/App.vue

Lines changed: 196 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,61 @@
22
<div
33
id="VueInputUi"
44
class="vue-input-ui"
5+
:class="{'dark': darkMode}"
56
>
6-
<img
7-
src="./assets/logo.png"
8-
alt="Ctk logo"
9-
>
10-
<div id="VueInputUiContainerDiv">
11-
<h1>VueCtkInputText</h1>
12-
<h3>A VueJs component : Beautiful Input</h3>
13-
<VueInputUi
14-
v-model="value2"
15-
label="Initial input"
16-
/>
7+
<div class="container">
8+
<h1>{{ !value1 ? '-' : value1 }}</h1>
9+
<h2>{{ !value2 ? '-' : value2 }}</h2>
10+
<h3>{{ !value3 ? '-' : value3 }}</h3>
11+
<p>{{ !value4 ? '-' : value4 }}</p>
12+
<button
13+
class="btn"
14+
style="margin-top: 20px;"
15+
@click="darkMode = !darkMode"
16+
>
17+
{{ darkMode ? 'Disable' : 'Enable' }} Dark Mode
18+
</button>
1719
<br>
18-
<VueInputUi
19-
v-model="value"
20-
label="Input with value"
21-
/>
22-
<br>
23-
<VueInputUi
24-
v-model="value2"
25-
:error-hint="true"
26-
label="Input with error-hint: true + text hint"
27-
hint="Error text"
28-
/>
20+
<div class="component-container">
21+
<VueInputUi
22+
v-model="value1"
23+
label="Initial input"
24+
color="#F00"
25+
size="sm"
26+
:dark="darkMode"
27+
/>
28+
<br>
29+
<VueInputUi
30+
v-model="value2"
31+
label="Input with value"
32+
:dark="darkMode"
33+
/>
34+
<br>
35+
<VueInputUi
36+
v-model="value3"
37+
:error="true"
38+
label="Input with error='true' + text hint"
39+
hint="Error text"
40+
size="lg"
41+
:dark="darkMode"
42+
/>
43+
<br>
44+
<VueInputUi
45+
v-model="value4"
46+
:dark="darkMode"
47+
/>
48+
<br>
49+
<VueInputUi
50+
v-model="value4"
51+
dark
52+
color="purple"
53+
/>
54+
<br>
55+
<VueInputUi
56+
v-model="value4"
57+
disabled
58+
/>
59+
</div>
2960
</div>
3061
</div>
3162
</template>
@@ -40,26 +71,159 @@
4071
},
4172
data () {
4273
return {
43-
value: 'Hello world!',
44-
value2: null
74+
value1: 'VueCtkInputText',
75+
value2: 'Hello world!',
76+
value3: 'A beautiful input made with VueJs',
77+
value4: null,
78+
darkMode: false
4579
}
4680
}
4781
}
4882
</script>
4983

5084
<style lang="scss">
51-
#VueInputUiContainerDiv, html, body {
52-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
53-
-webkit-font-smoothing: antialiased;
54-
-moz-osx-font-smoothing: grayscale;
55-
text-align: center;
56-
color: #2c3e50;
85+
@import "./assets/main.scss";
86+
html, body {
87+
margin: 0;
88+
min-height: 100%;
5789
}
58-
#VueInputUiContainerDiv {
90+
html {
91+
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
92+
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
93+
display: -ms-flexbox; /* TWEENER - IE 10 */
94+
display: -webkit-flex; /* NEW - Chrome */
95+
display: flex;
96+
width: 100%;
97+
}
98+
body {
99+
-webkit-box-flex: 1;
100+
-webkit-flex: 1;
101+
-moz-flex: 1;
102+
-ms-flex: 1;
103+
flex: 1;
104+
}
105+
#VueInputUi {
106+
min-height: 100%;
107+
&.dark {
108+
background-color: darken(#424242, 20%);
109+
.container {
110+
color: white;
111+
}
112+
header {
113+
color: rgba(255, 255, 255, 0.70);
114+
}
115+
}
116+
}
117+
.container {
59118
width: 80%;
60119
margin: 0 auto;
120+
padding-top: 40px;
121+
text-align: center;
122+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
123+
-webkit-font-smoothing: antialiased;
124+
-moz-osx-font-smoothing: grayscale;
61125
}
62126
*, *::before, *::after {
63127
box-sizing: border-box;
64128
}
65-
</style>
129+
textarea {
130+
background-color: #FFF;
131+
color: #bd4147;
132+
border: 1px solid #CCC;
133+
border-radius: 4px;
134+
outline: none;
135+
font-size: 85%;
136+
width: 100%;
137+
font-weight: 700;
138+
font-family: monospace, monospace;
139+
resize: none;
140+
}
141+
.btn {
142+
padding: 10px 20px;
143+
margin-bottom: 20px;
144+
border: none;
145+
border-radius: 4px;
146+
font-size: 12px;
147+
outline: none;
148+
cursor: pointer;
149+
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
150+
background-color: #96bf31;
151+
color: #FFF;
152+
font-weight: 500;
153+
&:hover {
154+
background-color: darken(#96bf31, 10%);
155+
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
156+
}
157+
&.option {
158+
background-color: #424242;
159+
&:hover {
160+
background-color: darken(#424242, 10%);
161+
}
162+
}
163+
}
164+
.component {
165+
padding: 10px;
166+
background: #FFF;
167+
border-radius: 4px;
168+
border: 1px solid #ebebeb;
169+
&:hover {
170+
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
171+
}
172+
&.options {
173+
margin-bottom: 20px;
174+
}
175+
}
176+
.component-container {
177+
margin: 0 10px 20px 10px;
178+
padding: 20px;
179+
background: #FFF;
180+
border-radius: 4px;
181+
border: 1px solid #ebebeb;
182+
min-width: 300px;
183+
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
184+
flex: 1 0 48%;
185+
&:hover {
186+
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
187+
}
188+
&.dark {
189+
background-color: darken(#424242, 10%);
190+
color: #FFF;
191+
textarea {
192+
background: #424242;
193+
color: dodgerblue;
194+
}
195+
.btn {
196+
&:hover {
197+
box-shadow: 0 0 8px 0 rgba(0,0,0,.6), 0 2px 4px 0 rgba(0,0,0,.5);
198+
}
199+
&.option {
200+
background-color: #424242;
201+
&:hover {
202+
background-color: lighten(#424242, 10%);
203+
}
204+
}
205+
}
206+
}
207+
}
208+
.dark {
209+
.component-container, .component {
210+
border: 1px solid #424242;
211+
background-color: darken(#424242, 10%);
212+
&:hover {
213+
box-shadow: 0 0 8px 0 rgba(0,0,0,.6), 0 2px 4px 0 rgba(0,0,0,.5);
214+
}
215+
}
216+
hr {
217+
border-color: #424242;
218+
}
219+
}
220+
@media screen and (max-width: 1024px) {
221+
.components-container.flex {
222+
-webkit-flex-direction: column;
223+
-ms-flex-direction: column;
224+
flex-direction: column;
225+
flex-flow: column;
226+
-moz-flex-direction: column;
227+
}
228+
}
229+
</style>

0 commit comments

Comments
 (0)