@policystudio/policy-studio-ui-vue 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -4
- package/package.json +1 -1
- package/src/assets/scss/tailwind.css +13842 -13842
- package/src/components/buttons/Button.vue +14 -14
- package/src/components/controls/Checkbox.vue +128 -0
- package/src/components/controls/RadioButton.vue +103 -0
- package/src/components/notifications/Dialog.vue +4 -4
- package/src/components/notifications/Toast.vue +4 -4
- package/src/components/tabs/{Tabs.vue → TabHeader.vue} +10 -10
- package/src/stories/Checkbox.stories.js +23 -0
- package/src/stories/Colors.stories.mdx +8 -8
- package/src/stories/ElevationSystem.stories.mdx +17 -17
- package/src/stories/RadioButton.stories.js +21 -0
- package/src/stories/{Tabs.stories.js → TabHeader.stories.js} +8 -8
- package/src/stories/Toast.stories.js +2 -2
- package/tailwind.config.js +3 -1
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<button
|
|
3
|
-
class="font-bold align-middle flex rounded-md"
|
|
3
|
+
class="ui-font-bold ui-align-middle ui-flex ui-rounded-md"
|
|
4
4
|
:class="classes"
|
|
5
5
|
@click="onClick()"
|
|
6
6
|
>
|
|
7
7
|
<i
|
|
8
8
|
v-if="icon"
|
|
9
|
-
class="my-auto material-icons mr-2"
|
|
10
|
-
:class="{ 'text-sm': size === 'small' }"
|
|
9
|
+
class="ui-my-auto material-icons ui-mr-2"
|
|
10
|
+
:class="{ 'ui-text-sm': size === 'small' }"
|
|
11
11
|
>
|
|
12
12
|
{{ icon }}
|
|
13
13
|
</i>
|
|
14
|
-
<div class="flex-grow text-left">{{ label }}</div>
|
|
14
|
+
<div class="ui-flex-grow ui-text-left">{{ label }}</div>
|
|
15
15
|
<i
|
|
16
|
-
v-if="iconRight" class="my-auto material-icons ml-2"
|
|
17
|
-
:class="{ 'text-sm': size === 'small' }"
|
|
16
|
+
v-if="iconRight" class="ui-my-auto material-icons ui-ml-2"
|
|
17
|
+
:class="{ 'ui-text-sm': size === 'small' }"
|
|
18
18
|
>
|
|
19
19
|
{{ iconRight }}
|
|
20
20
|
</i>
|
|
@@ -62,14 +62,14 @@ export default {
|
|
|
62
62
|
},
|
|
63
63
|
computed: {
|
|
64
64
|
classes() {
|
|
65
|
-
let sizeCss = 'px-4 py-2'
|
|
66
|
-
if (this.size === 'medium') sizeCss = 'px-4 py-1'
|
|
67
|
-
if (this.size === 'small') sizeCss = 'px-2 py-px text-sm'
|
|
68
|
-
if (this.outline) return `${sizeCss} bg-white border ${this.disabled ? 'border-gray-40 text-gray-40' : 'border-blue-60 text-blue-60'}`
|
|
69
|
-
if (this.ghost) return `${sizeCss} ${this.disabled ? 'bg-gray-20 text-gray-40' : 'bg-blue-20 text-blue-60 active:shadow-inner'}`
|
|
70
|
-
if (this.textOnly) return `${sizeCss} ${this.disabled ? 'text-gray-40' : 'text-blue-60'}`
|
|
71
|
-
if (this.disabled) return `${sizeCss} bg-gray-20 text-gray-40`
|
|
72
|
-
return `${sizeCss} bg-blue-60 hover:bg-blue-50 text-white active:shadow-inner`
|
|
65
|
+
let sizeCss = 'ui-px-4 ui-py-2'
|
|
66
|
+
if (this.size === 'medium') sizeCss = 'ui-px-4 ui-py-1'
|
|
67
|
+
if (this.size === 'small') sizeCss = 'ui-px-2 ui-py-ui-px ui-text-sm'
|
|
68
|
+
if (this.outline) return `${sizeCss} ui-bg-white ui-border ${this.disabled ? 'ui-border-gray-40 ui-text-gray-40' : 'ui-border-blue-60 ui-text-blue-60'}`
|
|
69
|
+
if (this.ghost) return `${sizeCss} ${this.disabled ? 'ui-bg-gray-20 ui-text-gray-40' : 'ui-bg-blue-20 ui-text-blue-60 active:ui-shadow-inner'}`
|
|
70
|
+
if (this.textOnly) return `${sizeCss} ${this.disabled ? 'ui-text-gray-40' : 'ui-text-blue-60'}`
|
|
71
|
+
if (this.disabled) return `${sizeCss} ui-bg-gray-20 ui-text-gray-40`
|
|
72
|
+
return `${sizeCss} ui-bg-blue-60 hover:ui-bg-blue-50 ui-text-white active:ui-shadow-inner`
|
|
73
73
|
}
|
|
74
74
|
},
|
|
75
75
|
methods: {
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<label class="container">
|
|
3
|
+
{{ label }}
|
|
4
|
+
<input type="checkbox">
|
|
5
|
+
<span class="checkmark"></span>
|
|
6
|
+
</label>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
export default {
|
|
11
|
+
name: 'Checkbox',
|
|
12
|
+
props: {
|
|
13
|
+
value: {
|
|
14
|
+
required: true
|
|
15
|
+
},
|
|
16
|
+
label: {
|
|
17
|
+
type: String,
|
|
18
|
+
default: ''
|
|
19
|
+
},
|
|
20
|
+
bg: {
|
|
21
|
+
type: String,
|
|
22
|
+
default: 'blue-20'
|
|
23
|
+
},
|
|
24
|
+
type: {
|
|
25
|
+
type: String,
|
|
26
|
+
default: 'checkbox'
|
|
27
|
+
},
|
|
28
|
+
checkboxClasses: {
|
|
29
|
+
type: String,
|
|
30
|
+
default: 'mb-2'
|
|
31
|
+
},
|
|
32
|
+
labelClasses: {
|
|
33
|
+
type: String,
|
|
34
|
+
default: 'text-gray04'
|
|
35
|
+
},
|
|
36
|
+
disabled: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: false
|
|
39
|
+
},
|
|
40
|
+
tooltip: {
|
|
41
|
+
type: [Object, Boolean, String, Promise],
|
|
42
|
+
default: false
|
|
43
|
+
},
|
|
44
|
+
prevent: {
|
|
45
|
+
default: false
|
|
46
|
+
},
|
|
47
|
+
size: {
|
|
48
|
+
default: 16
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
computed: {
|
|
52
|
+
childValue: {
|
|
53
|
+
get () {
|
|
54
|
+
return this.value
|
|
55
|
+
},
|
|
56
|
+
set (newValue) {
|
|
57
|
+
if(this.prevent) return
|
|
58
|
+
this.$emit('input', newValue)
|
|
59
|
+
this.$emit('change', newValue)
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
getSize() {
|
|
63
|
+
return { width: this.size + 'px', height: this.size + 'px'}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<style>
|
|
70
|
+
.container {
|
|
71
|
+
display: block;
|
|
72
|
+
position: relative;
|
|
73
|
+
padding-left: 35px;
|
|
74
|
+
margin-bottom: 12px;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
-webkit-user-select: none;
|
|
77
|
+
-moz-user-select: none;
|
|
78
|
+
-ms-user-select: none;
|
|
79
|
+
user-select: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.container input {
|
|
83
|
+
position: absolute;
|
|
84
|
+
opacity: 0;
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
height: 0;
|
|
87
|
+
width: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.checkmark {
|
|
91
|
+
position: absolute;
|
|
92
|
+
top: 0;
|
|
93
|
+
left: 0;
|
|
94
|
+
height: 18px;
|
|
95
|
+
width: 18px;
|
|
96
|
+
background-color: #fff;
|
|
97
|
+
border: solid 2px #A2ACB7;
|
|
98
|
+
border-radius: 2px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.container input:checked ~ .checkmark {
|
|
102
|
+
background-color: #64B5CE;
|
|
103
|
+
border: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.checkmark:after {
|
|
107
|
+
content: "";
|
|
108
|
+
position: absolute;
|
|
109
|
+
display: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.container input:checked ~ .checkmark:after {
|
|
113
|
+
display: block;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.container .checkmark:after {
|
|
117
|
+
left: 5px;
|
|
118
|
+
top: 1px;
|
|
119
|
+
width: 7px;
|
|
120
|
+
height: 13px;
|
|
121
|
+
border: solid white;
|
|
122
|
+
border-radius: 1px;
|
|
123
|
+
border-width: 0 2px 2px 0;
|
|
124
|
+
-webkit-transform: rotate(45deg);
|
|
125
|
+
-ms-transform: rotate(45deg);
|
|
126
|
+
transform: rotate(45deg);
|
|
127
|
+
}
|
|
128
|
+
</style>
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="w-full">
|
|
3
|
+
<label class="form-control" :for="id">
|
|
4
|
+
{{ label }}
|
|
5
|
+
<input
|
|
6
|
+
type="radio"
|
|
7
|
+
name="radio"
|
|
8
|
+
:id="id"
|
|
9
|
+
@change="$emit('change')"
|
|
10
|
+
v-model="childValue"
|
|
11
|
+
/>
|
|
12
|
+
<span class="radio-button"></span>
|
|
13
|
+
</label>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
export default {
|
|
19
|
+
name: 'RadioButton',
|
|
20
|
+
props: {
|
|
21
|
+
label: {
|
|
22
|
+
type: String,
|
|
23
|
+
required: true
|
|
24
|
+
},
|
|
25
|
+
value: {
|
|
26
|
+
required: true
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
data() {
|
|
30
|
+
return {
|
|
31
|
+
id: ''
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
computed: {
|
|
35
|
+
childValue: {
|
|
36
|
+
get () {
|
|
37
|
+
return this.value
|
|
38
|
+
},
|
|
39
|
+
set (newValue) {
|
|
40
|
+
this.$emit('input', newValue )
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
mounted() {
|
|
45
|
+
this.id = 'teste'
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<style scoped>
|
|
51
|
+
.form-control {
|
|
52
|
+
display: block;
|
|
53
|
+
position: relative;
|
|
54
|
+
padding-left: 35px;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
-webkit-user-select: none;
|
|
57
|
+
-moz-user-select: none;
|
|
58
|
+
-ms-user-select: none;
|
|
59
|
+
user-select: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.form-control input {
|
|
63
|
+
position: absolute;
|
|
64
|
+
opacity: 0;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.radio-button {
|
|
69
|
+
position: absolute;
|
|
70
|
+
top: 0;
|
|
71
|
+
left: 0;
|
|
72
|
+
height: 20px;
|
|
73
|
+
width: 20px;
|
|
74
|
+
background-color: #FFF;
|
|
75
|
+
border: 2px solid #A2ACB7;
|
|
76
|
+
border-radius: 50%;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.form-control input:checked ~ .radio-button {
|
|
80
|
+
background-color: #FFF;
|
|
81
|
+
border: 2px solid #64B5CE;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.radio-button:after {
|
|
85
|
+
content: "";
|
|
86
|
+
position: absolute;
|
|
87
|
+
display: none;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.form-control input:checked ~ .radio-button:after {
|
|
91
|
+
display: block;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.form-control .radio-button:after {
|
|
95
|
+
top: 3px;
|
|
96
|
+
left: 3px;
|
|
97
|
+
width: 10px;
|
|
98
|
+
height: 10px;
|
|
99
|
+
border-radius: 50%;
|
|
100
|
+
background-color: #64B5CE;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
</style>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="cssClass">
|
|
3
|
-
<div class="material-icons my-auto">info</div>
|
|
4
|
-
<div class="w-full">{{ message }}</div>
|
|
5
|
-
<div class="cursor-pointer font-bold my-auto pr-4">OK</div>
|
|
3
|
+
<div class="material-icons ui-my-auto">info</div>
|
|
4
|
+
<div class="ui-w-full">{{ message }}</div>
|
|
5
|
+
<div class="ui-cursor-pointer ui-font-bold ui-my-auto ui-pr-4">OK</div>
|
|
6
6
|
</div>
|
|
7
7
|
</template>
|
|
8
8
|
|
|
@@ -32,7 +32,7 @@ export default {
|
|
|
32
32
|
},
|
|
33
33
|
computed: {
|
|
34
34
|
cssClass() {
|
|
35
|
-
return `flex space-x-4 font-small rounded-md py-2 px-4 align-middle flex bg-${this.colors[this.type].background} text-${this.colors[this.type].color}`
|
|
35
|
+
return `ui-flex ui-space-x-4 ui-font-small ui-rounded-md ui-py-2 ui-px-4 ui-align-middle ui-flex ui-bg-${this.colors[this.type].background} ui-text-${this.colors[this.type].color}`
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="cssClass">
|
|
3
|
-
<span class="material-icons mr-4">{{ icon }}</span>
|
|
4
|
-
<div class="w-full">{{ message }}</div>
|
|
5
|
-
<div class="flex space-x-4">
|
|
3
|
+
<span class="material-icons ui-mr-4">{{ icon }}</span>
|
|
4
|
+
<div class="ui-w-full">{{ message }}</div>
|
|
5
|
+
<div class="ui-flex ui-space-x-4">
|
|
6
6
|
<slot></slot>
|
|
7
7
|
</div>
|
|
8
8
|
</div>
|
|
@@ -46,7 +46,7 @@ export default {
|
|
|
46
46
|
const textColor = this.fill === 'intense' ? 'white': colors[this.type]
|
|
47
47
|
const background = this.fill === 'soft'? `${colors[this.type].split('-', 1)}-10` : colors[this.type]
|
|
48
48
|
|
|
49
|
-
return `font-bold shadow-md rounded-md p-3 h-12 flex bg-${background} text-${textColor}`
|
|
49
|
+
return `ui-font-bold ui-shadow-md ui-rounded-md ui-p-3 ui-h-12 ui-flex ui-bg-${background} ui-text-${textColor}`
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
}
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
@click="selectTab(item)"
|
|
8
8
|
:class="[
|
|
9
9
|
classes,
|
|
10
|
-
{ 'bg-blue-60 text-white': getSelected === item[keyValue] && theme === 'standard' },
|
|
11
|
-
{ 'border-b-2 border-blue-60 text-blue-60 font-bold': getSelected === item[keyValue] && theme === 'underline' },
|
|
12
|
-
{ 'text-blue-60 font-bold bg-white hover:text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
|
|
10
|
+
{ 'ui-bg-blue-60 ui-text-white': getSelected === item[keyValue] && theme === 'standard' },
|
|
11
|
+
{ 'ui-border-b-2 ui-border-blue-60 ui-text-blue-60 ui-font-bold': getSelected === item[keyValue] && theme === 'underline' },
|
|
12
|
+
{ 'ui-text-blue-60 ui-font-bold ui-bg-white hover:ui-text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
|
|
13
13
|
]"
|
|
14
14
|
>
|
|
15
15
|
{{ item[keyLabel] }}
|
|
@@ -20,25 +20,25 @@
|
|
|
20
20
|
<script>
|
|
21
21
|
export const themeOptions = ['standard', 'underline', 'folder']
|
|
22
22
|
export default {
|
|
23
|
-
name: '
|
|
23
|
+
name: 'TabHeader',
|
|
24
24
|
computed: {
|
|
25
25
|
wrapperClasses() {
|
|
26
26
|
if (this.theme === 'underline') {
|
|
27
|
-
return 'flex space-x-4 border-b border-gray-20'
|
|
27
|
+
return 'ui-flex ui-space-x-4 ui-border-b ui-border-gray-20'
|
|
28
28
|
}
|
|
29
29
|
if (this.theme === 'folder') {
|
|
30
|
-
return 'flex space-x-1'
|
|
30
|
+
return 'ui-flex ui-space-x-1'
|
|
31
31
|
}
|
|
32
|
-
return 'inline-flex rounded-md flex gap-x-px'
|
|
32
|
+
return 'ui-inline-flex ui-rounded-md ui-flex ui-gap-x-px'
|
|
33
33
|
},
|
|
34
34
|
classes() {
|
|
35
35
|
if (this.theme === 'underline') {
|
|
36
|
-
return 'text-gray-60 pb-3 hover:text-blue-60'
|
|
36
|
+
return 'ui-text-gray-60 ui-pb-3 hover:ui-text-blue-60'
|
|
37
37
|
}
|
|
38
38
|
if (this.theme === 'folder') {
|
|
39
|
-
return 'bg-gray-10 text-gray-50 py-2 px-4 rounded-t-lg hover:text-gray-60 active:text-blue-60'
|
|
39
|
+
return 'ui-bg-gray-10 ui-text-gray-50 ui-py-2 ui-px-4 ui-rounded-t-lg hover:ui-text-gray-60 active:ui-text-blue-60'
|
|
40
40
|
}
|
|
41
|
-
return 'bg-gray-10 px-4 py-2 text-gray-60 hover:text-blue-60 last:rounded-r-lg first:rounded-l-lg active:text-white active:bg-blue-60'
|
|
41
|
+
return 'ui-bg-gray-10 ui-px-4 ui-py-2 ui-text-gray-60 hover:ui-text-blue-60 last:ui-rounded-r-lg first:ui-rounded-l-lg active:ui-text-white active:ui-bg-blue-60'
|
|
42
42
|
},
|
|
43
43
|
getIsObject() {
|
|
44
44
|
return typeof this.selected === 'object'
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import Checkbox, { sizes } from '../components/controls/Checkbox.vue';
|
|
2
|
+
const icons = ['add_circle', 'delete', 'done', 'info', 'send']
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Components/Checkbox',
|
|
5
|
+
component: Checkbox,
|
|
6
|
+
argTypes: {
|
|
7
|
+
disabled: { control: 'boolean' },
|
|
8
|
+
},
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const Template = (args, { argTypes }) => ({
|
|
12
|
+
props: Object.keys(argTypes),
|
|
13
|
+
components: { Checkbox },
|
|
14
|
+
template: `
|
|
15
|
+
<Checkbox v-bind="$props" />
|
|
16
|
+
`
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
export const Default = Template.bind({});
|
|
20
|
+
Default.args = {
|
|
21
|
+
label: 'Label',
|
|
22
|
+
size: 16
|
|
23
|
+
};
|
|
@@ -11,12 +11,12 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
|
|
|
11
11
|
|
|
12
12
|
## Blue
|
|
13
13
|
|
|
14
|
-
<div class="grid grid-flow-col">
|
|
15
|
-
<div class="p-2 h-20 text-white bg-blue-80">Blue 80</div>
|
|
16
|
-
<div class="p-2 h-20 text-white bg-blue-70">Blue 70</div>
|
|
17
|
-
<div class="p-2 h-20 text-white bg-blue-60">Blue 60</div>
|
|
18
|
-
<div class="p-2 h-20 text-white bg-blue-50">Blue 50</div>
|
|
19
|
-
<div class="p-2 h-20 text-blue-70 bg-blue-20">Blue 20</div>
|
|
20
|
-
<div class="p-2 h-20 text-blue-70 bg-blue-10">Blue 10</div>
|
|
21
|
-
<div class="p-2 h-20 text-blue-70 bg-white ">White</div>
|
|
14
|
+
<div class="ui-grid ui-grid-flow-col">
|
|
15
|
+
<div class="ui-p-2 ui-h-20 ui-text-white ui-bg-blue-80">Blue 80</div>
|
|
16
|
+
<div class="ui-p-2 ui-h-20 ui-text-white ui-bg-blue-70">Blue 70</div>
|
|
17
|
+
<div class="ui-p-2 ui-h-20 ui-text-white ui-bg-blue-60">Blue 60</div>
|
|
18
|
+
<div class="ui-p-2 ui-h-20 ui-text-white ui-bg-blue-50">Blue 50</div>
|
|
19
|
+
<div class="ui-p-2 ui-h-20 ui-text-blue-70 ui-bg-blue-20">Blue 20</div>
|
|
20
|
+
<div class="ui-p-2 ui-h-20 ui-text-blue-70 ui-bg-blue-10">Blue 10</div>
|
|
21
|
+
<div class="ui-p-2 ui-h-20 ui-text-blue-70 ui-bg-white ">White</div>
|
|
22
22
|
</div>
|
|
@@ -14,28 +14,28 @@ Elevation is evidenced by the use of shadows. It's another way to establish a vi
|
|
|
14
14
|
|
|
15
15
|
### 1.1. Shadow and light
|
|
16
16
|
The shadows in our elements are projected by these two light sources: main light and ambient light.
|
|
17
|
-
<div class="grid grid-cols-3 gap-4">
|
|
18
|
-
<div class="bg-gray-20 pt-8">
|
|
19
|
-
<div class="bg-white w-48 h-48 rounded-md shadow mx-auto"></div>
|
|
20
|
-
<p class="text-center">Shadow cast by main light</p>
|
|
17
|
+
<div class="ui-grid ui-grid-cols-3 ui-gap-4">
|
|
18
|
+
<div class="ui-bg-gray-20 ui-pt-8">
|
|
19
|
+
<div class="ui-bg-white ui-w-48 ui-h-48 ui-rounded-md ui-shadow mx-auto"></div>
|
|
20
|
+
<p class="ui-text-center">Shadow cast by main light</p>
|
|
21
21
|
</div>
|
|
22
|
-
<div class="bg-gray-20 pt-8">
|
|
23
|
-
<div class="bg-white w-48 h-48 rounded-md shadow-sm mx-auto"></div>
|
|
24
|
-
<p class="text-center">Shadow cast by ambient light</p>
|
|
22
|
+
<div class="ui-bg-gray-20 ui-pt-8">
|
|
23
|
+
<div class="ui-bg-white ui-w-48 ui-h-48 ui-rounded-md ui-shadow-sm mx-auto"></div>
|
|
24
|
+
<p class="ui-text-center">Shadow cast by ambient light</p>
|
|
25
25
|
</div>
|
|
26
|
-
<div class="bg-gray-20 pt-8">
|
|
27
|
-
<div class="bg-white w-48 h-48 rounded-md shadow-md mx-auto"></div>
|
|
28
|
-
<p class="text-center">Combined shadow from main and ambient lights</p>
|
|
26
|
+
<div class="ui-bg-gray-20 ui-pt-8">
|
|
27
|
+
<div class="ui-bg-white ui-w-48 ui-h-48 ui-rounded-md ui-shadow-md mx-auto"></div>
|
|
28
|
+
<p class="ui-text-center">Combined shadow from main and ambient lights</p>
|
|
29
29
|
</div>
|
|
30
30
|
</div>
|
|
31
31
|
|
|
32
32
|
## 2. Elevation system
|
|
33
33
|
Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
|
|
34
|
-
<div class="grid grid-cols-2 gap-6 p-6 bg-gray-20">
|
|
35
|
-
<div class="rounded-md p-8 h-20 shadow-inner">Elevation -5</div>
|
|
36
|
-
<div class="rounded-md p-8 h-20 bg-white shadow-sm">Elevation 5</div>
|
|
37
|
-
<div class="rounded-md p-8 h-20 bg-white shadow">Elevation 10</div>
|
|
38
|
-
<div class="rounded-md p-8 h-20 bg-white shadow-md">Elevation 20</div>
|
|
39
|
-
<div class="rounded-md p-8 h-20 bg-white shadow-lg">Elevation 30</div>
|
|
40
|
-
<div class="rounded-md p-8 h-20 bg-white shadow-xl">Elevation 40</div>
|
|
34
|
+
<div class="ui-grid grid-cols-2 ui-gap-6 ui-p-6 ui-bg-gray-20">
|
|
35
|
+
<div class="ui-rounded-md ui-p-8 ui-h-20 ui-shadow-inner">Elevation -5</div>
|
|
36
|
+
<div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow-sm">Elevation 5</div>
|
|
37
|
+
<div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow">Elevation 10</div>
|
|
38
|
+
<div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow-md">Elevation 20</div>
|
|
39
|
+
<div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow-lg">Elevation 30</div>
|
|
40
|
+
<div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow-xl">Elevation 40</div>
|
|
41
41
|
</div>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import RadioButton from '../components/controls/RadioButton.vue';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Components/RadioButton',
|
|
5
|
+
component: RadioButton,
|
|
6
|
+
argTypes: {},
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const Template = (args, { argTypes }) => ({
|
|
10
|
+
props: Object.keys(argTypes),
|
|
11
|
+
components: { RadioButton },
|
|
12
|
+
template: `
|
|
13
|
+
<RadioButton v-bind="$props" />
|
|
14
|
+
`
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export const Default = Template.bind({});
|
|
18
|
+
Default.args = {
|
|
19
|
+
label: 'Label'
|
|
20
|
+
};
|
|
21
|
+
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import
|
|
1
|
+
import TabHeader from '../components/tabs/TabHeader.vue';
|
|
2
2
|
const items = ['Existing Buildings', 'New Constructions', 'Other tab']
|
|
3
3
|
const item = items[0]
|
|
4
4
|
|
|
5
5
|
export default {
|
|
6
6
|
title: 'Components/Tabs',
|
|
7
|
-
component:
|
|
7
|
+
component: TabHeader,
|
|
8
8
|
argTypes: {}
|
|
9
9
|
};
|
|
10
10
|
const Template = (args, { argTypes }) => ({
|
|
11
11
|
props: Object.keys(argTypes),
|
|
12
|
-
components: {
|
|
12
|
+
components: { TabHeader },
|
|
13
13
|
data: () => {
|
|
14
14
|
return {
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
17
|
template: `
|
|
18
|
-
<div class="bg-gray-20 p-8">
|
|
19
|
-
<
|
|
20
|
-
<div v-if="$props['selected'] === 'Existing Buildings'" class="bg-white p-4" :class="{ 'mt-4' : $props['theme'] === 'standard'}">
|
|
18
|
+
<div class="ui-bg-gray-20 ui-p-8">
|
|
19
|
+
<TabHeader :selected.sync=selected v-bind="$props"/>
|
|
20
|
+
<div v-if="$props['selected'] === 'Existing Buildings'" class="ui-bg-white ui-p-4" :class="{ 'ui-mt-4' : $props['theme'] === 'standard'}">
|
|
21
21
|
<p v-for="i of 4">Tab Existing Buildings Selected</p>
|
|
22
22
|
</div>
|
|
23
|
-
<div v-if="$props['selected'] === 'New Constructions'" class="bg-white p-4" :class="{ 'mt-4' : $props['theme'] === 'standard'}">
|
|
23
|
+
<div v-if="$props['selected'] === 'New Constructions'" class="ui-bg-white ui-p-4" :class="{ 'ui-mt-4' : $props['theme'] === 'standard'}">
|
|
24
24
|
<p v-for="i of 4">Tab New Constructions Selected</p>
|
|
25
25
|
</div>
|
|
26
|
-
<div v-if="$props['selected'] === 'Other tab'" class="bg-white p-4" :class="{ 'mt-4' : $props['theme'] === 'standard'}">
|
|
26
|
+
<div v-if="$props['selected'] === 'Other tab'" class="ui-bg-white ui-p-4" :class="{ 'ui-mt-4' : $props['theme'] === 'standard'}">
|
|
27
27
|
<p v-for="i of 4">Other tab Selected</p>
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|
|
@@ -52,7 +52,7 @@ Actions.args = {
|
|
|
52
52
|
type: 'info',
|
|
53
53
|
message: 'This is an info alert with actions',
|
|
54
54
|
default: `
|
|
55
|
-
<span class="cursor-pointer" @click="teste('Callback Action 1')">ACTION1</span>
|
|
56
|
-
<span class="cursor-pointer" @click="teste('Callback Action 2')">ACTION2</span>
|
|
55
|
+
<span class="ui-cursor-pointer" @click="teste('Callback Action 1')">ACTION1</span>
|
|
56
|
+
<span class="ui-cursor-pointer" @click="teste('Callback Action 2')">ACTION2</span>
|
|
57
57
|
`
|
|
58
58
|
};
|
package/tailwind.config.js
CHANGED