Skip to content
This repository was archived by the owner on Apr 17, 2020. It is now read-only.

Commit 2a9fba9

Browse files
vvaivvai
committed
implementing om components
1 parent 07cb4e6 commit 2a9fba9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+12163
-4421
lines changed

‎package-lock.json

+9,998-4,419
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,17 @@
1212
"test:unit": "vue-cli-service test:unit"
1313
},
1414
"dependencies": {
15+
"core-js": "^2.6.5",
16+
"popper.js": "^1.15.0",
1517
"svg-sprite-loader": "^4.1.3",
1618
"vue": "^2.6.9",
1719
"vue-class-component": "^7.0.1",
20+
"vue-directive-tooltip": "^1.6.2",
1821
"vue-property-decorator": "^8.0.0"
1922
},
2023
"devDependencies": {
21-
"@storybook/addon-actions": "^5.0.3",
22-
"@storybook/addon-links": "^5.0.3",
24+
"@storybook/addon-actions": "^5.1.5",
25+
"@storybook/addon-links": "^5.1.5",
2326
"@storybook/vue": "latest",
2427
"@types/chai": "^4.1.7",
2528
"@types/mocha": "^5.2.6",

‎src/assets/fonts/icomoon.eot

7.95 KB
Binary file not shown.

‎src/assets/fonts/icomoon.svg

+48
Loading

‎src/assets/fonts/icomoon.ttf

7.79 KB
Binary file not shown.

‎src/assets/fonts/icomoon.woff

7.86 KB
Binary file not shown.

‎src/assets/style.css

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
@font-face {
2+
font-family: 'icomoon';
3+
src: url('fonts/icomoon.eot?qx1iha');
4+
src: url('fonts/icomoon.eot?qx1iha#iefix') format('embedded-opentype'),
5+
url('fonts/icomoon.ttf?qx1iha') format('truetype'),
6+
url('fonts/icomoon.woff?qx1iha') format('woff'),
7+
url('fonts/icomoon.svg?qx1iha#icomoon') format('svg');
8+
font-weight: normal;
9+
font-style: normal;
10+
}
11+
12+
[class^="icon-"], [class*=" icon-"] {
13+
/* use !important to prevent issues with browser extensions that change fonts */
14+
font-family: 'icomoon' !important;
15+
speak: none;
16+
font-style: normal;
17+
font-weight: normal;
18+
font-variant: normal;
19+
text-transform: none;
20+
line-height: 1;
21+
22+
/* Better Font Rendering =========== */
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
}
26+
27+
.icon-checkbox-off:before {
28+
content: "\e900";
29+
}
30+
.icon-checkbox-on:before {
31+
content: "\e901";
32+
}
33+
.icon-radio-off:before {
34+
content: "\e902";
35+
}
36+
.icon-radio-on:before {
37+
content: "\e903";
38+
}
39+
.icon-dots:before {
40+
content: "\e904";
41+
}
42+
.icon-add:before {
43+
content: "\e905";
44+
}
45+
.icon-arrow-down:before {
46+
content: "\e906";
47+
}
48+
.icon-arrow-left:before {
49+
content: "\e907";
50+
}
51+
.icon-arrow-right:before {
52+
content: "\e908";
53+
}
54+
.icon-arrow-up:before {
55+
content: "\e909";
56+
}
57+
.icon-check:before {
58+
content: "\e90a";
59+
}
60+
.icon-close:before {
61+
content: "\e90b";
62+
}
63+
.icon-collapse-all:before {
64+
content: "\e90c";
65+
}
66+
.icon-date:before {
67+
content: "\e90d";
68+
}
69+
.icon-download:before {
70+
content: "\e90e";
71+
}
72+
.icon-drag-rows:before {
73+
content: "\e90f";
74+
}
75+
.icon-edit:before {
76+
content: "\e910";
77+
}
78+
.icon-email:before {
79+
content: "\e911";
80+
}
81+
.icon-exit:before {
82+
content: "\e912";
83+
}
84+
.icon-expand-all:before {
85+
content: "\e913";
86+
}
87+
.icon-fill:before {
88+
content: "\e914";
89+
}
90+
.icon-in-archive:before {
91+
content: "\e915";
92+
}
93+
.icon-info:before {
94+
content: "\e916";
95+
}
96+
.icon-move:before {
97+
content: "\e917";
98+
}
99+
.icon-move-vertical:before {
100+
content: "\e918";
101+
}
102+
.icon-phone:before {
103+
content: "\e919";
104+
}
105+
.icon-plus-add:before {
106+
content: "\e91a";
107+
}
108+
.icon-restore:before {
109+
content: "\e91b";
110+
}
111+
.icon-search:before {
112+
content: "\e91c";
113+
}
114+
.icon-shevron-down:before {
115+
content: "\e91d";
116+
}
117+
.icon-shevron-left:before {
118+
content: "\e91e";
119+
}
120+
.icon-shevron-right:before {
121+
content: "\e91f";
122+
}
123+
.icon-shevron-up:before {
124+
content: "\e920";
125+
}
126+
.icon-triangle-down:before {
127+
content: "\e921";
128+
}
129+
.icon-triangle-left:before {
130+
content: "\e922";
131+
}
132+
.icon-triangle-right:before {
133+
content: "\e923";
134+
}
135+
.icon-triangle-up:before {
136+
content: "\e924";
137+
}
138+
.icon-world:before {
139+
content: "\e925";
140+
}

‎src/components/checkbox/index.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<label class="checkbox__container">
3+
{{label}}
4+
<input
5+
ref="input"
6+
@click="input"
7+
:checked="value"
8+
:disabled="disabled"
9+
class="checkbox__checkbox"
10+
type="checkbox">
11+
<span
12+
class="checkbox__checkmark"
13+
:class="checkmarkClass" />
14+
</label>
15+
</template>
16+
17+
<script lang="ts">
18+
import { Component, Prop, Vue } from 'vue-property-decorator';
19+
20+
@Component
21+
export default class xCheckbox extends Vue {
22+
23+
@Prop(String)
24+
public readonly label!: string;
25+
26+
@Prop(Boolean)
27+
public readonly value!: boolean;
28+
29+
@Prop(Boolean)
30+
public readonly disabled!: boolean;
31+
32+
get checkmarkClass() {
33+
return this.value ? 'x-icon-checkbox-on' : 'x-icon-checkbox-off'
34+
}
35+
36+
input(event) {
37+
this.$emit('input', !this.value);
38+
}
39+
40+
};
41+
</script>
42+
43+
<style lang="scss" scoped src="./style.scss"></style>

‎src/components/checkbox/style.scss

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.checkbox {
2+
3+
&__container {
4+
display: block;
5+
position: relative;
6+
padding-left: 20px;
7+
// margin-bottom: 12px;
8+
cursor: pointer;
9+
-webkit-user-select: none;
10+
-moz-user-select: none;
11+
-ms-user-select: none;
12+
user-select: none;
13+
14+
font-family: "Helvetica Neue", Arial, sans-serif;
15+
font-size: 14px;
16+
font-weight: normal;
17+
font-style: normal;
18+
font-stretch: normal;
19+
line-height: 1.71;
20+
letter-spacing: normal;
21+
color: #333333;
22+
}
23+
24+
/* Hide the browser's default checkbox */
25+
&__container input {
26+
position: absolute;
27+
opacity: 0;
28+
cursor: pointer;
29+
height: 0;
30+
width: 0;
31+
}
32+
33+
/* Create a custom checkbox */
34+
&__checkmark {
35+
position: absolute;
36+
top: calc(50% - 7px);
37+
left: 0;
38+
height: 14px;
39+
width: 14px;
40+
color: #d4d4d4;
41+
// background-color: #eee;
42+
}
43+
44+
&__checkmark.x-icon-checkbox-on {
45+
color: #4163fb;
46+
}
47+
48+
/* On mouse-over, add a grey background color */
49+
&__container:hover input ~ &__checkmark {
50+
color: #4163fb;
51+
}
52+
53+
&__container input:disabled ~ &__checkmark {
54+
color: #d4d4d4;
55+
}
56+
}

‎src/components/icon/index.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<span :class="classes"></span>
3+
</template>
4+
5+
<script lang="ts">
6+
import { Component, Prop, Vue } from 'vue-property-decorator';
7+
8+
@Component
9+
export default class xIcon extends Vue {
10+
11+
@Prop(String)
12+
public readonly name!: string;
13+
14+
get classes() {
15+
return `x-icon-${this.name}`;
16+
}
17+
18+
}
19+
</script>
20+
21+
<style lang="scss" src="./style.scss"></style>

0 commit comments

Comments
 (0)