@gitlab/ui 128.8.0 → 128.8.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.
|
@@ -132,6 +132,9 @@ var script = {
|
|
|
132
132
|
},
|
|
133
133
|
pathId(index) {
|
|
134
134
|
return `${this.pathUuid}-item-${index}`;
|
|
135
|
+
},
|
|
136
|
+
getAriaCurrentAttr(index) {
|
|
137
|
+
return index === this.selectedIndex;
|
|
135
138
|
}
|
|
136
139
|
}
|
|
137
140
|
};
|
|
@@ -140,7 +143,7 @@ var script = {
|
|
|
140
143
|
const __vue_script__ = script;
|
|
141
144
|
|
|
142
145
|
/* template */
|
|
143
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-path-nav",style:({ '--path-bg-color': _vm.backgroundColor }),attrs:{"data-testid":"gl-path-nav"}},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-path-fade gl-path-fade-left"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll left"},on:{"click":_vm.scrollPathLeft}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-left"}})],1)]),_vm._v(" "),_c('ul',{ref:"pathNavList",staticClass:"gl-path-nav-list"},_vm._l((_vm.items),function(item,index){return _c('li',{key:index,ref:"pathListItems",refInFor:true,staticClass:"gl-path-nav-list-item"},[_c('button',{class:_vm.pathItemClass(index),attrs:{"id":_vm.pathId(index),"category":item.disabled ? 'tertiary' : undefined,"disabled":item.disabled},on:{"click":function($event){return _vm.onItemClicked(index)}}},[(_vm.shouldDisplayIcon(item.icon))?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":item.icon,"data-testid":"gl-path-item-icon"}}):_vm._e(),_vm._v(_vm._s(item.title)),(item.metric)?_c('span',{staticClass:"gl-pl-2 gl-font-normal"},[_vm._v(_vm._s(item.metric))]):_vm._e()],1),_vm._v(" "),_vm._t("default",null,{"pathItem":item,"pathId":_vm.pathId(index)})],2)}),0),_vm._v(" "),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-path-fade gl-path-fade-right"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll right"},on:{"click":_vm.scrollPathRight}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-right"}})],1)])])};
|
|
146
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-path-nav",style:({ '--path-bg-color': _vm.backgroundColor }),attrs:{"data-testid":"gl-path-nav"}},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-path-fade gl-path-fade-left"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll left"},on:{"click":_vm.scrollPathLeft}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-left"}})],1)]),_vm._v(" "),_c('ul',{ref:"pathNavList",staticClass:"gl-path-nav-list"},_vm._l((_vm.items),function(item,index){return _c('li',{key:index,ref:"pathListItems",refInFor:true,staticClass:"gl-path-nav-list-item"},[_c('button',{class:_vm.pathItemClass(index),attrs:{"id":_vm.pathId(index),"aria-current":_vm.getAriaCurrentAttr(index),"category":item.disabled ? 'tertiary' : undefined,"disabled":item.disabled},on:{"click":function($event){return _vm.onItemClicked(index)}}},[(_vm.shouldDisplayIcon(item.icon))?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":item.icon,"data-testid":"gl-path-item-icon"}}):_vm._e(),_vm._v(_vm._s(item.title)),(item.metric)?_c('span',{staticClass:"gl-pl-2 gl-font-normal"},[_vm._v(_vm._s(item.metric))]):_vm._e()],1),_vm._v(" "),_vm._t("default",null,{"pathItem":item,"pathId":_vm.pathId(index)})],2)}),0),_vm._v(" "),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-path-fade gl-path-fade-right"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll right"},on:{"click":_vm.scrollPathRight}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-right"}})],1)])])};
|
|
144
147
|
var __vue_staticRenderFns__ = [];
|
|
145
148
|
|
|
146
149
|
/* style */
|
package/package.json
CHANGED
|
@@ -135,6 +135,9 @@ export default {
|
|
|
135
135
|
pathId(index) {
|
|
136
136
|
return `${this.pathUuid}-item-${index}`;
|
|
137
137
|
},
|
|
138
|
+
getAriaCurrentAttr(index) {
|
|
139
|
+
return index === this.selectedIndex;
|
|
140
|
+
},
|
|
138
141
|
},
|
|
139
142
|
};
|
|
140
143
|
</script>
|
|
@@ -161,6 +164,7 @@ export default {
|
|
|
161
164
|
<button
|
|
162
165
|
:id="pathId(index)"
|
|
163
166
|
:class="pathItemClass(index)"
|
|
167
|
+
:aria-current="getAriaCurrentAttr(index)"
|
|
164
168
|
:category="item.disabled ? 'tertiary' : undefined"
|
|
165
169
|
:disabled="item.disabled"
|
|
166
170
|
@click="onItemClicked(index)"
|