Skip to content

Commit 0fbcc0d

Browse files
author
Damian Dulisz
committed
Further improvements for 1.0
* Improve docs for API * Add missing tests * Minor tweaks
1 parent 8ccffea commit 0fbcc0d

File tree

13 files changed

+440
-87
lines changed

13 files changed

+440
-87
lines changed

‎docs/assets/base/_typo.sass

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,3 +183,9 @@ body
183183

184184
.typo--bold
185185
font-weight: $global-font-weight-bold
186+
187+
kbd
188+
color: $primary-color
189+
padding: 3px 5px
190+
border-radius: 4px
191+
background: $tertiary-color

‎docs/assets/components/_table.sass

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@import ../base/global
22

33
// config
4-
$table-border: darken($tertiary-color, 10%)
5-
$table-font-size: 14px
4+
$table-border: darken($tertiary-color, 5%)
5+
$table-font-size: 16px
66
$table-padding: 14px 16px
77
$table-bg: $global-support-background
88
$table-even-bg: $global-background
@@ -19,23 +19,24 @@ $table-even-bg: $global-background
1919
family: $global-font
2020
size: rem($table-font-size)
2121
weight: $global-font-weight
22+
margin-bottom: rem(40px)
2223

2324
.table__tr
2425
border-bottom: 1px solid $table-border
2526
box-sizing: border-box
2627
border-left: rem(4px) solid transparent
2728

28-
&:hover
29+
&:nth-child(even)
2930
background: #fafafa
3031

31-
+table-row-variant(success, $success-color, 48%)
32-
+table-row-variant(error, $error-color, 43%)
33-
+table-row-variant(alert, $alert-color, 42%)
34-
+table-row-variant(info, $info-color, 35%)
32+
&:hover
33+
background: #f4f4f4
34+
35+
+table-row-variant(primary, $primary-color, 48%)
3536

3637
.table__td,
3738
.table__th
38-
padding: rem(7px 16px 8px)
39+
padding: rem($table-padding)
3940

4041
.table__th
4142
border-bottom: 1px solid #ccc
@@ -45,3 +46,6 @@ $table-even-bg: $global-background
4546

4647
.table--full-size
4748
width: 100%
49+
50+
.table--fixed
51+
table-layout: fixed

‎docs/index.jade

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ html(lang="en")
5151
include ./partials/examples/_custom
5252

5353
hr.typo__hr
54-
include ./partials/_props-docs
54+
include ./partials/api/_props
55+
include ./partials/api/_events
56+
include ./partials/api/_slots
5557

5658
include ./partials/_footer
5759

‎docs/main.js

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,7 @@ new Vue({
6363
['tagging', 0],
6464
['vuex', 0],
6565
['custom', 0]
66-
],
67-
scroll: 0
66+
]
6867
}
6968
},
7069
computed: {
@@ -100,6 +99,9 @@ new Vue({
10099
this.options.push(newTag)
101100
this.selected.push(newTag)
102101
},
102+
onClose (val) {
103+
console.log('close: ', val)
104+
},
103105
addTag (newTag) {
104106
const tag = {
105107
name: newTag,
@@ -151,25 +153,20 @@ new Vue({
151153
console.log('@remove: ', option)
152154
},
153155
adjustNav () {
154-
console.log('adjust')
155-
this.scroll = window.scrollY
156-
console.log(this.scroll)
157-
console.log(this.currentPosition)
158156
this.isNavSticky = window.scrollY > window.innerHeight
159-
},
160-
calculateNavPositions () {
161-
/*eslint-disable */
162-
for (let position of this.navPositions) {
163-
const elem = document.getElementById(position[0])
164-
if (elem) position[1] = elem.offsetTop - 200
165-
}
166-
this.navPositions = this.navPositions.sort((a, b) => a[1] - b[1])
167-
/*eslint-enable */
168157
}
158+
// calculateNavPositions () {
159+
// /*eslint-disable */
160+
// for (let position of this.navPositions) {
161+
// const elem = document.getElementById(position[0])
162+
// if (elem) position[1] = elem.offsetTop - 200
163+
// }
164+
// this.navPositions = this.navPositions.sort((a, b) => a[1] - b[1])
165+
// /*eslint-enable */
166+
// }
169167
},
170168
ready () {
171169
this.adjustNav()
172170
window.addEventListener('scroll', throttle(this.adjustNav, 50))
173-
this.calculateNavPositions()
174171
}
175172
})

‎docs/partials/_nav.jade

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@ ul.list(
1919
+nav-element('Custom configuration', 'custom')
2020

2121
li.list__heading API
22-
//- +nav-element('Props', 'zindex.html')
23-
//- +nav-element('Events', 'zindex.html')
24-
//- +nav-element('Slots', 'zindex.html')
22+
+nav-element('Props', 'props')
23+
+nav-element('Events', 'events')
24+
+nav-element('Slots', 'slots')

‎docs/partials/api/_events.jade

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
h2.typo__h2#events Events
2+
.table__container
3+
table.table.table--full-size
4+
thead
5+
tr.table__tr
6+
th.table__th(width="150") Name
7+
th.table__th(width="100") Attributes
8+
th.table__th(width="100") Listen to
9+
th.table__th(width="250") Description
10+
tbody
11+
tr.table__tr
12+
td.table__td: strong Update
13+
td.table__td: kbd value {Object|Array}, id {String|Integer}
14+
td.table__td: kbd @update
15+
td.table__td
16+
| Emitted after
17+
kbd this.value
18+
| changes
19+
tr.table__tr
20+
td.table__td: strong Select
21+
td.table__td: kbd selected option {Object|Integer|String}, id {String|Integer}
22+
td.table__td: kbd @select
23+
td.table__td
24+
| Emitted after selecting an option
25+
tr.table__tr
26+
td.table__td: strong Remove
27+
td.table__td: kbd removed option {Object|Integer|String}, id {String|Integer}
28+
td.table__td: kbd @remove
29+
td.table__td
30+
| Emitted after removing an option
31+
tr.table__tr
32+
td.table__td: strong SearchChange
33+
td.table__td: kbd search query {String}, id {String|Integer}
34+
td.table__td: kbd @search-change
35+
td.table__td
36+
| Emitted after the search query changes
37+
tr.table__tr
38+
td.table__td: strong Tag
39+
td.table__td: kbd search query {String}, id {String|Integer}
40+
td.table__td: kbd @tag
41+
td.table__td
42+
| Emitted after user attemts to add a tag
43+
tr.table__tr
44+
td.table__td: strong Open
45+
td.table__td: kbd id {String|Integer}
46+
td.table__td: kbd @open
47+
td.table__td
48+
| Emitted when the dropdown opens. Useful for detecting when touched.
49+
tr.table__tr
50+
td.table__td: strong Close
51+
td.table__td: kbd value {Object|Array}, id {String|Integer}
52+
td.table__td: kbd @close
53+
td.table__td
54+
| Emitted when the dropdown closes

‎docs/partials/api/_props.jade

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
h2.typo__h2#props Props
2+
.table__container
3+
table.table.table--full-size.table--fixed
4+
thead
5+
tr.table__tr
6+
th.table__th(width="100") Name
7+
th.table__th(width="80") Type
8+
th.table__th(width="180") Default
9+
th.table__th(width="200") Description
10+
tbody
11+
tr.table__tr
12+
td.table__td.utils--center(colspan="4"): i multiselectMixin.js
13+
14+
tr.table__tr
15+
td.table__td: strong Id
16+
td.table__td Integer|String
17+
td.table__td
18+
td.table__td.
19+
Used to identify the component in events.
20+
tr.table__tr
21+
td.table__td: strong Options
22+
td.table__td Array
23+
td.table__td
24+
td.table__td.
25+
Array of available options: Objects, Strings or Integers.
26+
If array of objects, visible label will default to option.label.
27+
tr.table__tr
28+
td.table__td: strong Selected
29+
td.table__td Object||Array||String||Integer
30+
td.table__td
31+
td.table__td
32+
| Required. Presets the selected options.
33+
tr.table__tr
34+
td.table__td: strong Multiple
35+
td.table__td Boolean
36+
td.table__td: kbd false
37+
td.table__td
38+
| Equivalent to the
39+
kbd multiple
40+
| attribute on a <select> input.
41+
tr.table__tr
42+
td.table__td: strong Key
43+
td.table__td String
44+
td.table__td
45+
td.table__td
46+
| Used to compare objects.
47+
strong Only use if options are objects.
48+
tr.table__tr
49+
td.table__td: strong Label
50+
td.table__td String
51+
td.table__td
52+
td.table__td
53+
| Label from option Object, that will be visible in the dropdown.
54+
tr.table__tr
55+
td.table__td: strong Searchable
56+
td.table__td Boolean
57+
td.table__td: kbd true
58+
td.table__td
59+
| Add / removes search input.
60+
tr.table__tr
61+
td.table__td: strong ClearOnSelect
62+
td.table__td Boolean
63+
td.table__td: kbd true
64+
td.table__td
65+
| Clear the search input after
66+
kbd select()
67+
| . Use only when multiple is true.
68+
tr.table__tr
69+
td.table__td: strong HideSelected
70+
td.table__td Boolean
71+
td.table__td: kbd false
72+
td.table__td
73+
| Hide already selected options
74+
tr.table__tr
75+
td.table__td: strong Placeholder
76+
td.table__td String
77+
td.table__td: kbd 'Select option'
78+
td.table__td
79+
| Equivalent to the
80+
kbd placeholder
81+
| attribute on a <select> input.
82+
tr.table__tr
83+
td.table__td: strong MaxHeight
84+
td.table__td Integer
85+
td.table__td: kbd 300
86+
td.table__td
87+
| Sets max-height style value of the dropdown
88+
tr.table__tr
89+
td.table__td: strong AllowEmpty
90+
td.table__td Boolean
91+
td.table__td: kbd true
92+
td.table__td
93+
| Allows to remove all selected values. Otherwise one must be left selected.
94+
tr.table__tr
95+
td.table__td: strong ResetAfter
96+
td.table__td Boolean
97+
td.table__td: kbd false
98+
td.table__td
99+
| Reset <kbd>this.value</kbd>, <kbd>this.search</kbd>, <kbd>this.selected</kbd> after <kbd>this.value</kbd> changes.
100+
tr.table__tr
101+
td.table__td: strong CloseOnSelect
102+
td.table__td Boolean
103+
td.table__td: kbd true
104+
td.table__td
105+
| Enable/disable closing after selecting an option
106+
tr.table__tr
107+
td.table__td: strong CustomLabel
108+
td.table__td Function => String
109+
td.table__td
110+
td.table__td
111+
| Function used to create a custom label
112+
tr.table__tr
113+
td.table__td: strong Taggable
114+
td.table__td Boolean
115+
td.table__td: kbd false
116+
td.table__td
117+
| Disable / Enable tagging
118+
tr.table__tr
119+
td.table__td: strong TagPlaceholder
120+
td.table__td String
121+
td.table__td: kbd 'Press enter to create a tag'
122+
td.table__td
123+
| String to show when highlighting a potential tag
124+
tr.table__tr
125+
td.table__td: strong Max
126+
td.table__td Number
127+
td.table__td
128+
td.table__td
129+
| Number of allowed selected options.
130+
131+
tr.table__tr
132+
td.table__td.utils--center(colspan="4"): i Multiselect.vue
133+
134+
tr.table__tr
135+
td.table__td: strong SelectLabel
136+
td.table__td String
137+
td.table__td: kbd 'Press enter to select'
138+
td.table__td
139+
| String to show when pointing to an option
140+
tr.table__tr
141+
td.table__td: strong SelectedLabel
142+
td.table__td String
143+
td.table__td: kbd 'Selected'
144+
td.table__td
145+
| String to show next to selected option
146+
tr.table__tr
147+
td.table__td: strong DeselectLabel
148+
td.table__td String
149+
td.table__td: kbd 'Press enter to remove'
150+
td.table__td
151+
| String to show when pointing to an alredy selected option
152+
tr.table__tr
153+
td.table__td: strong ShowLabels
154+
td.table__td Boolean
155+
td.table__td: kbd true
156+
td.table__td
157+
| Decide whether to show labels on highlighted options
158+
tr.table__tr
159+
td.table__td: strong Limit
160+
td.table__td Number
161+
td.table__td: kbd 99999
162+
td.table__td
163+
| Limit the display of selected options. The rest will be hidden within the limitText string.
164+
tr.table__tr
165+
td.table__td: strong LimitText
166+
td.table__td Function => String
167+
td.table__td: kbd count => `and ${count} more`
168+
td.table__td
169+
| Function that process the message shown when selected elements pass the defined limit.
170+
tr.table__tr
171+
td.table__td: strong Loading
172+
td.table__td Boolean
173+
td.table__td: kbd false
174+
td.table__td
175+
| Show/hide the loading spinner.
176+
tr.table__tr
177+
td.table__td: strong Disabled
178+
td.table__td Boolean
179+
td.table__td: kbd false
180+
td.table__td
181+
| Enable/disable the multiselect.
182+
183+
tr.table__tr
184+
td.table__td.utils--center(colspan="4"): i pointerMixin.js
185+
186+
tr.table__tr
187+
td.table__td: strong ShowPointer
188+
td.table__td Boolean
189+
td.table__td: kbd true
190+
td.table__td
191+
| Enable/disable highlighting of the pointed value.

0 commit comments

Comments
 (0)