oda-framework
Version:
68 lines (65 loc) • 2.27 kB
JavaScript
ODA({ is: 'oda-list', imports: '@oda/icon',
template: /*html*/`
<style>
:host {
overflow: auto;
}
</style>
<ul ~is="tag" class="vertical shadow" :type="marker" style="overflow-x: hidden; margin: 0px;" ~style="{padding: (marker === 'none')?'4px':''}" >
<li ~for="items" :item="$for.item" :focused="$for.item === focusedItem" ~class="marker==='none' && !numerable ? 'horizontal' : ''" .stop="_select($event, $for.item)" style="text-overflow:ellipsis; overflow: hidden; box-sizing: border-box; border-bottom: 1px solid transparent" :type="$for.item.marker" ~style="{height: iconSize + 'px'}" :title="$for.item.label">
<span ~is="$for.item?.template || itemTemplate" :item="$for.item" class="horizontal" style="align-items: center;"><oda-icon ~if="$for.item.icon" :icon="$for.item.icon"></oda-icon>{{$for.item}}</span>
</li>
</ul>`,
$public: {
itemTemplate: 'span',
iconSize: {
$def: 24,
$pdp: true // share = pdp?
},
numerable: false,
marker: {
$def: 'none',
$list: ('none|circle|disc|square').split('|')
},
tag: {
get() {
return this.numerable ? 'ol' : 'ul';
}
},
focusedItem: {
$def: null
},
items: [],
selection: []
},
down() {
if (!this.focusedItem) {
this.focusedItem = this.items[0];
} else {
const idx = this.items.indexOf(this.focusedItem)
this.focusedItem = (this.items[idx + 1] || this.focusedItem);
}
},
up() {
if (!this.focusedItem) {
this.focusedItem = this.items[0];
} else {
const idx = this.items.indexOf(this.focusedItem)
this.focusedItem = (this.items[idx - 1] || this.focusedItem);
}
},
pageUp() {
},
pageDown() {
},
home() {
this.focusedItem = this.items[0];
},
end() {
this.focusedItem = this.items[this.items.length - 1];
},
_select(e, item) {
this.focusedItem = item;
this.fire('ok');
}
});