Svelte. Item list.
npm install --save svelte-item-list
Look at the example folder for a basic working example.
<!-- App.html -->
<!-- with store method-->
<ItemList configuration="{storeConfiguration}">
<div slot="loading">...loading</div>
</ItemList>
<!-- with promise method-->
<ItemList configuration="{promiseConfiguration}">
<div slot="loading">...loading</div>
</ItemList>
<!-- without configuration-->
<ItemList>
<div slot="loading">...loading</div>
</ItemList>
<script>
import ItemList from 'svelte-item-list'
let classListModel = {
root: 'item-list__container',
header: 'item-list__header_text',
item: {
root: 'item-list__item-text',
description: {
name: 'item-list_item-name-text',
root: 'item-list__description-root',
text: 'item-list__description-text'
},
icon: 'item-list__item-icon',
index: 'item-list__item-index',
point: 'item-list__item-point'
},
pagination: {
root: 'item-list__pagination',
option: 'pagination__option',
arrow: {
doubleLeft: 'icon-angle-double-left',
left: 'icon-angle-left',
right: 'icon-angle-right',
doubleRight: 'icon-angle-double-right'
}
}
}
let storeConfiguration = {
global: {
classListModel: classListModel,
body: {
enabled: true
},
isVisible: false,
header: {
enabled: true,
text: 'Example with store configuration'
}
},
endpoint: {
isStore: true,
value: store,
sortFunction: () => {}
},
pagination: {
enabled: true,
pageSize: 10,
step: {
limit: 1,
enabled: true
}
},
item: {
clickFunction: item => {},
bold: {
enabled: true,
count: 5
},
name: {
enabled: true,
prop: 'name'
},
description: {
enabled: true,
prop: 'description',
isHTML: true
},
point: {
enabled: true,
prop: 'point',
isTimeago: false
},
icon: {
enabled: true,
prop: 'icon'
},
index: {
enabled: true
},
light: {
prop: 'light'
}
}
}
let promiseConfiguration = {
global: {
classListModel: classListModel,
isVisible: false,
body: {
enabled: true
},
header: {
enabled: true,
text: 'Example with store configuration'
}
},
endpoint: {
isStore: false,
value: async () => items,
sortFunction: () => {}
},
pagination: {
enabled: true,
pageSize: 3,
step: {
limit: 1,
enabled: true
}
},
item: {
clickFunction: item => {},
bold: {
enabled: true,
count: 5
},
name: {
enabled: true,
prop: 'name'
},
description: {
enabled: true,
prop: 'description',
isHTML: true
},
point: {
enabled: true,
prop: 'point',
isTimeago: false
},
icon: {
enabled: true,
prop: 'icon'
},
index: {
enabled: true
},
light: {
prop: 'light'
}
}
}
</script>
https://github.com/TahaSh/svelte-paginate
The item list component is the only export of the module.
import ItemList from 'svelte-item-list'
let configuration = {
global: {
classListModel: {
root: 'item-list__item-container',
header: 'item-list__header_text',
item: {
root: 'item_list__item-text',
description: {
name: 'item_list_item-name-text',
root: 'item-list__description-root',
text: 'item-list__description-text'
},
icon: 'item-list__item-icon',
index: 'item-list__item-index',
point: 'item-list__item-point'
},
pagination: {
root: 'item-list__pagination',
option: 'pagination__option',
arrow: {
doubleLeft: 'icon-angle-double-left',
left: 'icon-angle-left',
right: 'icon-angle-right',
doubleRight: 'icon-angle-double-right'
}
},
search: {
root: 'item-list__search',
input: 'item-list__search-input',
icon: {
root: 'icon-search'
}
}
},
isVisible: false,
body: {
enabled: true
},
header: {
enabled: true,
text: ''
},
search: {
enabled: true,
placeholder: 'Search right now',
icon: {
enabled: true
},
property: 'name'
}
},
endpoint: {
isStore: false,
value: async () => [],
sortFunction: (a, b) => {
return a[pointProp] - b[pointProp]
}
},
pagination: {
enabled: true,
pageSize: 3,
step: {
limit: 1,
enabled: true
}
},
item: {
clickFunction: item => {},
bold: {
enabled: true,
count: 5
},
name: {
enabled: true,
prop: 'name'
},
description: {
enabled: true,
prop: 'description',
isHTML: true
},
point: {
enabled: true,
prop: 'point',
isTimeago: false
},
icon: {
enabled: true,
prop: 'icon'
},
index: {
enabled: true
},
light: {
prop: 'light'
}
}
}