dlg-ui 1.0.4 → 1.0.6

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.
Files changed (5) hide show
  1. package/addon/components/navbar.hbs +10 -5
  2. package/addon/components/navbar.js +10 -0
  3. package/addon/components/radio.js +17 -17
  4. package/addon/styles/addon.css +143 -129
  5. package/package.json +1 -1
package/addon/components/navbar.hbs CHANGED
@@ -1,20 +1,23 @@
1
1
  <div class='navbar-wrapper'>
2
2
  <div class='navbar-container'>
3
- <div class='navbar-title'>
4
- dlg-ui
3
+ <div
4
+ class='navbar-title cursor-pointer'
5
+ {{on 'click' (fn this.onSelect this.homeRoute)}}
6
+ >
7
+ {{this.title}}
5
8
  </div>
6
9
  <div class='navbar-elements'>
7
10
  {{#each this.navbarOptions as |option|}}
8
11
  {{#if (eq option.type 'link')}}
9
12
  <div
10
- class='navbar-selection'
13
+ class='navbar-selection cursor-pointer'
11
14
  {{on 'click' (fn this.onSelect option)}}
12
15
  >
13
16
  {{option.label}}
14
17
  </div>
15
18
  {{/if}}
16
19
  {{#if (eq option.type 'dropdown')}}
17
- <div class='navbar-selection'>
20
+ <div class='navbar-selection cursor-pointer'>
18
21
  <HeaderDropdown
19
22
  @class='navbar-dropdown'
20
23
  @options={{option.dropdownOptions}}
@@ -29,6 +32,8 @@
29
32
  </div>
30
33
  </div>
31
34
  <div class='navbar-yield'>
32
- {{yield}}
35
+ <div class='navbar-body'>
36
+ {{yield}}
37
+ </div>
33
38
  </div>
34
39
  </div>
package/addon/components/navbar.js CHANGED
@@ -5,6 +5,16 @@ import { service } from '@ember/service';
5
5
  export default class NavbarComponent extends Component {
6
6
  @service router;
7
7
 
8
+ get title() {
9
+ return this.args.title || 'dlg-ui';
10
+ }
11
+
12
+ get homeRoute() {
13
+ return {
14
+ route: this.args.homeRoute || 'index',
15
+ };
16
+ }
17
+
8
18
  get navbarOptions() {
9
19
  let options = this.args.options;
10
20
  return options.sort((a, b) => b.index - a.index);
package/addon/components/radio.js CHANGED
@@ -3,23 +3,23 @@ import { action } from '@ember/object';
3
3
  import { tracked } from '@glimmer/tracking';
4
4
 
5
5
  export default class RadioComponent extends Component {
6
- @tracked
7
- selectedOption = this.args.defaultOption || {};
6
+ @tracked
7
+ selectedOption = this.args.defaultOption || {};
8
8
 
9
- get options() {
10
- let options = [];
11
- this.args.options.forEach((option) => {
12
- if (option.label === this.selectedOption.label) {
13
- option.isChecked = true;
14
- }
15
- options.push(option);
16
- });
17
- return this.args.options || [];
18
- }
9
+ get options() {
10
+ let options = [];
11
+ this.args.options.forEach((option) => {
12
+ if (option.label === this.selectedOption.label) {
13
+ option.isChecked = true;
14
+ }
15
+ options.push(option);
16
+ });
17
+ return this.args.options || [];
18
+ }
19
19
 
20
- @action
21
- onChange(option) {
22
- this.selectedOption = option;
23
- this.args.onChange(option);
24
- }
20
+ @action
21
+ onChange(option) {
22
+ this.selectedOption = option;
23
+ this.args.onChange(option);
24
+ }
25
25
  }
package/addon/styles/addon.css CHANGED
@@ -1,211 +1,225 @@
1
+ .cursor-pointer {
2
+ cursor: pointer;
3
+ }
4
+
1
5
  .dropdown-option {
2
- border-bottom-style: solid;
3
- border-width: 2px;
4
- width: 100%;
5
- padding-left: 8px;
6
- padding-right: 8px;
7
- padding-top: 6px;
8
- padding-bottom: 6px;
9
- box-sizing: border-box;
10
- cursor: pointer;
6
+ border-bottom-style: solid;
7
+ border-width: 2px;
8
+ width: 100%;
9
+ padding-left: 8px;
10
+ padding-right: 8px;
11
+ padding-top: 6px;
12
+ padding-bottom: 6px;
13
+ box-sizing: border-box;
14
+ cursor: pointer;
11
15
  }
12
16
 
13
17
  .dropdown-option:hover {
14
- background-color: black;
15
- color: white;
16
- border: black;
18
+ background-color: black;
19
+ color: white;
20
+ border: black;
17
21
  }
18
22
 
19
23
  .dropdown-options {
20
- white-space: normal;
21
- overflow-wrap: break-word;
22
- border-style: solid;
23
- border-top-style: none;
24
- border-bottom-style: none;
25
- border-width: 2px;
26
- background-color: #f6f6f6;
24
+ white-space: normal;
25
+ overflow-wrap: break-word;
26
+ border-style: solid;
27
+ border-top-style: none;
28
+ border-bottom-style: none;
29
+ border-width: 2px;
30
+ background-color: #f6f6f6;
27
31
  }
28
32
 
29
33
  .dropdown-placeholder {
30
- font-style: italic;
31
- color: #444;
34
+ font-style: italic;
35
+ color: #444;
32
36
  }
33
37
 
34
38
  .dropdown-select {
35
- width: 100%;
36
- padding-left: 8px;
37
- padding-top: 8px;
38
- padding-bottom: 8px;
39
- padding-right: 20px;
40
- box-sizing: border-box;
41
- position: relative;
42
- overflow: hidden;
43
- white-space: nowrap;
44
- text-overflow: ellipsis;
45
- cursor: pointer;
46
- border-style: solid;
47
- border-width: 2px;
48
- background-color: #eee;
49
- user-select: none;
39
+ width: 100%;
40
+ padding-left: 8px;
41
+ padding-top: 8px;
42
+ padding-bottom: 8px;
43
+ padding-right: 20px;
44
+ box-sizing: border-box;
45
+ position: relative;
46
+ overflow: hidden;
47
+ white-space: nowrap;
48
+ text-overflow: ellipsis;
49
+ cursor: pointer;
50
+ border-style: solid;
51
+ border-width: 2px;
52
+ background-color: #eee;
53
+ user-select: none;
50
54
  }
51
55
 
52
56
  .dropdown-select::after {
53
- content: "\25BC";
54
- display: block;
55
- position: absolute;
56
- right: 0px;
57
- top: 50%;
58
- right: 8px;
59
- pointer-events: none;
60
- transition: transform 0.3s ease;
61
- top: 25%;
57
+ content: '\25BC';
58
+ display: block;
59
+ position: absolute;
60
+ right: 0px;
61
+ top: 50%;
62
+ right: 8px;
63
+ pointer-events: none;
64
+ transition: transform 0.3s ease;
65
+ top: 25%;
62
66
  }
63
67
 
64
68
  .dropdown-select.open::after {
65
- transform: rotate(-180deg);
66
- transform-origin: center;
67
- padding-right: 0px;
69
+ transform: rotate(-180deg);
70
+ transform-origin: center;
71
+ padding-right: 0px;
68
72
  }
69
73
 
70
74
  .dropdown-wrapper {
71
- width: 100%;
75
+ width: 100%;
72
76
  }
73
77
 
74
78
  .header-dropdown-options {
75
- white-space: normal;
76
- overflow-wrap: break-word;
77
- border-style: solid;
78
- border-top-style: none;
79
- border-bottom-style: none;
80
- border-width: 2px;
81
- background-color: #f6f6f6;
79
+ white-space: normal;
80
+ overflow-wrap: break-word;
81
+ border-style: solid;
82
+ border-top-style: none;
83
+ border-bottom-style: none;
84
+ border-width: 2px;
85
+ background-color: #f6f6f6;
82
86
  }
83
87
 
84
88
  .header-dropdown-options.open {
85
- border-top-style: solid;
89
+ border-top-style: solid;
86
90
  }
87
91
 
88
92
  .header-dropdown-select {
89
- width: fit-content;
90
- max-width: 100%;
91
- padding-top: 8px;
92
- padding-bottom: 2px;
93
- padding-right: 25px;
94
- box-sizing: border-box;
95
- position: relative;
96
- overflow: hidden;
97
- white-space: nowrap;
98
- text-overflow: ellipsis;
99
- cursor: pointer;
100
- border-bottom-style: solid;
101
- border-width: 2px;
102
- user-select: none;
93
+ width: fit-content;
94
+ max-width: 100%;
95
+ padding-top: 8px;
96
+ padding-bottom: 2px;
97
+ padding-right: 25px;
98
+ box-sizing: border-box;
99
+ position: relative;
100
+ overflow: hidden;
101
+ white-space: nowrap;
102
+ text-overflow: ellipsis;
103
+ cursor: pointer;
104
+ border-bottom-style: solid;
105
+ border-width: 2px;
106
+ user-select: none;
103
107
  }
104
108
 
105
109
  .header-dropdown-select.open {
106
- border-bottom-style: none;
110
+ border-bottom-style: none;
107
111
  }
108
112
 
109
113
  .header-dropdown-select::after {
110
- content: "\25BE";
111
- display: block;
112
- position: absolute;
113
- right: 0px;
114
- top: 20%;
115
- pointer-events: none;
116
- transition: transform 0.3s ease;
117
- font-size: 1.5rem;
114
+ content: '\25BE';
115
+ display: block;
116
+ position: absolute;
117
+ right: 0px;
118
+ top: 20%;
119
+ pointer-events: none;
120
+ transition: transform 0.3s ease;
121
+ font-size: 1.5rem;
118
122
  }
119
123
 
120
124
  .header-dropdown-select.open::after {
121
- transform: rotate(-180deg);
122
- transform-origin: center;
123
- padding-right: 0px;
124
- top: 16%;
125
+ transform: rotate(-180deg);
126
+ transform-origin: center;
127
+ padding-right: 0px;
128
+ top: 16%;
125
129
  }
126
130
 
127
131
  .header-dropdown-selected {
128
- font-weight: bold;
132
+ font-weight: bold;
129
133
  }
130
134
 
131
135
  .header-dropdown-wrapper {
132
- width: 100%;
136
+ width: 100%;
137
+ }
138
+
139
+ .navbar-body {
140
+ flex: 1 1 auto;
141
+ padding: 0 1em;
133
142
  }
134
143
 
135
144
  .navbar-container {
136
- background-color: #eee;
137
- position: sticky;
138
- top: 0;
139
- left: 0;
140
- width: 100%;
141
- min-height: 5vh;
142
- height: fit-content;
143
- display: flex;
144
- justify-content: space-between;
145
- align-items: center;
146
- z-index: 10;
145
+ background-color: #eee;
146
+ position: sticky;
147
+ top: 0;
148
+ left: 0;
149
+ min-height: 5vh;
150
+ height: fit-content;
151
+ display: flex;
152
+ justify-content: space-between;
153
+ align-items: center;
154
+ z-index: 10;
155
+ padding: 0 1em;
147
156
  }
148
157
 
149
158
  .navbar-dropdown .header-dropdown-options {
150
- position: absolute;
151
- min-width: 60px !important;
159
+ position: absolute;
160
+ min-width: 60px !important;
152
161
  }
153
162
 
154
163
  .navbar-dropdown .header-dropdown-select {
155
- padding-top: 0px;
156
- border-bottom-style: none;
164
+ padding-top: 0px;
165
+ border-bottom-style: none;
157
166
  }
158
167
 
159
168
  .navbar-dropdown .header-dropdown-select::after {
160
- top: 0;
161
- height: 100%;
162
- display: flex;
163
- align-items: center;
164
- padding-top: 2px;
169
+ top: 0;
170
+ height: 100%;
171
+ display: flex;
172
+ align-items: center;
173
+ padding-top: 2px;
165
174
  }
166
175
 
167
176
  .navbar-dropdown .header-dropdown-selected {
168
- font-weight: normal;
177
+ font-weight: normal;
169
178
  }
170
179
 
171
180
  .navbar-elements {
172
- display: flex;
173
- flex-wrap: wrap;
174
- width: fit-content;
175
- margin-right: 10px;
181
+ display: flex;
182
+ flex-wrap: wrap;
183
+ width: fit-content;
176
184
  }
177
185
 
178
186
  .navbar-selection {
179
- margin: 8px;
180
- display: flex;
181
- align-items: center;
187
+ margin: 8px;
188
+ display: flex;
189
+ align-items: center;
190
+ }
191
+
192
+ .navbar-selection:last-child {
193
+ margin-right: 0;
182
194
  }
183
195
 
184
196
  .navbar-title {
185
- font-size: clamp(20px, 3vw, 30px);
186
- margin: 0px 8px 0px 8px;
187
- width: fit-content;
188
- white-space: nowrap;
189
- font-weight: bold;
197
+ font-size: clamp(20px, 3vw, 30px);
198
+ margin-right: 1em;
199
+ width: fit-content;
200
+ white-space: nowrap;
201
+ font-weight: bold;
190
202
  }
191
203
 
192
204
  .navbar-wrapper {
193
- display: flex;
194
- flex-direction: column;
195
- min-height: 100vh;
205
+ display: flex;
206
+ flex-direction: column;
207
+ min-height: 100vh;
196
208
  }
197
209
 
198
210
  .navbar-yield {
199
- flex: 1 1 auto;
200
- padding-top: 8px;
211
+ display: flex;
212
+ justify-content: center;
213
+ flex: 1 1 auto;
214
+ padding-top: 8px;
201
215
  }
202
216
 
203
217
  .radio-label {
204
- font-weight: bold;
218
+ font-weight: bold;
205
219
  }
206
220
 
207
221
  .radio-options {
208
- display: flex;
209
- flex-direction: column;
210
- margin: 5px 0px 5px 0px;
211
- }
222
+ display: flex;
223
+ flex-direction: column;
224
+ margin: 5px 0px 5px 0px;
225
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dlg-ui",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "The default blueprint for ember-cli addons.",
5
5
  "keywords": [
6
6
  "ember-addon"