{"id":30420558,"url":"https://github.com/skybrud/sky-list","last_synced_at":"2025-08-22T08:19:31.936Z","repository":{"id":30952059,"uuid":"34510153","full_name":"skybrud/sky-list","owner":"skybrud","description":"Vue module for requesting search API (via axios) and displaying result with different pagination options","archived":false,"fork":false,"pushed_at":"2019-05-03T09:02:01.000Z","size":429,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-08-09T16:21:26.008Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skybrud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-24T09:32:19.000Z","updated_at":"2020-08-10T15:26:00.000Z","dependencies_parsed_at":"2022-09-26T16:21:32.802Z","dependency_job_id":null,"html_url":"https://github.com/skybrud/sky-list","commit_stats":null,"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"purl":"pkg:github/skybrud/sky-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skybrud","download_url":"https://codeload.github.com/skybrud/sky-list/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-list/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269799359,"owners_count":24477630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-22T08:19:31.104Z","updated_at":"2025-08-22T08:19:31.912Z","avatar_url":"https://github.com/skybrud.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sky-list\n\u003e Vue module for requesting search API (via axios) and displaying result with different pagination options\n\n## List of content\n* [Installation](#installation)\n* [Usage](#usage)\n* [Option tables](#options)\n* [Examples](#examples)\n* [API Response Setup](#api)\n\n\n## \u003ca id=\"installation\"\u003e\u003c/a\u003eInstallation\n```bash\nnpm install sky-list\n```\n\n```bash\nyarn add sky-list\n```\n\n## \u003ca id=\"usage\"\u003e\u003c/a\u003eUsage\n### Import\n```js\nimport Vue from 'vue';\n```\nDifferent import approaches. The First provides the minified and compiled dist version, the other the raw .vue file.\n```js\nimport SkyList from 'sky-list';\n\n// If you want to use the baseline scss add the following line\nimport '${YOUR-PROJECT-ROOT-PATH}/node_modules/sky-list/src/SkyList.scss';\n```\nInstall plugin\n```js\nVue.use(SkyList);\n```\n\n## \u003ca id=\"options\"\u003e\u003c/a\u003eOption tables\n### Props\n| Name  | Type  | Default   | Options   | Description   |\n|----|----|----|----|----|\n| **parameters** | Object | `{ keywords: '' }`  |  | Parameters to use in query declared with initial value |\n| **options** | Object | `{` \u003cbr\u003e  `api: '/umbraco/api/site/search/',` \u003cbr\u003e `limit: 10,` \u003cbr\u003e `showCount: false,` \u003cbr\u003e `paginationType: 'more',` \u003cbr\u003e `loadFetch: false,` \u003cbr\u003e`}` | **paginationType** \u003cbr\u003e navigation \u003cbr\u003e numeric \u003cbr\u003e pagination \u003cbr\u003e more \u003cbr\u003e all | Change custom request setup. \u003cbr\u003e `loadFetch`: enables/disables fetch on page load. \u003cbr\u003e `showCount`: enables/disables \"x\" results found. \u003cbr\u003e `api`: your prefered endpoint |\n| **filter** | Object | `{}` |  | Declare query properties to be handled as filters eg: \u003cbr\u003e `{ fitlerName: initialValue }` |\n| **value-map** | Object | `{}` |  | If a v-model returns a object and a prop is needed, it can be declared with initial value eg: \u003cbr\u003e `{ nestedPropName: initialValue }` |\n| **validate-query** | Function | `query =\u003e query.keywords` |  |  |\n| **live-search** | Boolean | `true` |  | Enable/disable search on query change |\n| **query** | Object | `{}`  |  | Pass a query object directly to SkyList. Overrides internal query object. Useful for keeping query state outside of SkyList and only using it to fetch and render results |\n| **transform-params** | Function | `params =\u003e params`  |  | Hook to modify params before request is sent. Useful for transforming SkyList to integrate with endpoints that do not use the default param naming conventions |\n| **transform-result** | Function | `result =\u003e result`  |  | Hook to modify result before request is resolved. Useful for transforming the returned data to match [the API response structure SkyList expects](#api). |\n\n### Slots\n| Name | Slot-scope | Description |\n|--|--|--|\n| **listForm** | `query` Object \u003cbr\u003e `result` Object | Slot for custom form setup to be `v-model`'ed against SkyList query |\n| **listItem** | `index` Number \u003cbr\u003e `listItem` Object | Slot for custom item markup |\n| **listAside** | `query` Object \u003cbr\u003e `result` Object | Slot for adding custom aside content next to the result list |\n| **resultMessage** | `query` Object \u003cbr\u003e `pagination` Object | Slot for custom message when results are found |\n| **noResultMessage** | `query` Object | Slot for custom message when **no** results are found |\n| **listMore** | `itemsLeft` Number | Slot for custom show more button |\n| **listPrev** |  | Slot for custom previous button |\n| **listNext** |  | Slot for custom next button |\n| **paginationBullet** | `count` Number | Slot for custom pagination bullets |\n| **filters** | `query` Object \u003cbr\u003e `result` Object \u003cbr\u003e `area` Object | Slot for filtering result (i.e. by groups/areas etc.) |\n\n### Events\nSkyList emits a few events for flexibility. This list will likely expand in the future. Example:\n```html\n\u003csky-list @result=\"handleResultFn\" /\u003e\n```\n\n| Name | Arguments | Description |\n|--|--|--|\n| **result** | `result` Object | Emitted every time result changes |\n| **loadingBegin** | none | Emitted whenever a fetch begins |\n| **loadingEnd** | none | Emitted when done fetching |\n\n\n## \u003ca id=\"examples\"\u003e\u003c/a\u003eExamples\n```html\n\u003csky-list\u003e\n\t\u003cdiv\n\t\tslot=\"listForm\"\n\t\tslot-scope=\"{ query, result }\"\n\t\u003e\n\t\t\u003cinput type=\"text\" v-model=\"query['keywords']\" placeholder=\"Type your search query\"\u003e\n\t\u003c/div\u003e\n\n\n\t\u003cdiv\n\t\tslot=\"listItem\"\n\t\tslot-scope=\"{ index, item }\"\n\t\t:item=\"item\"\n\t\u003e\n\t    Custom handling of list item\n\t\u003c/div\u003e\n\u003c/sky-list\u003e\n```\n\n### Component options (with default values)\n```html\n\u003csky-list\n    :parameters=\"{ keywords: '' }\" || Add your own key/value pair with initial values\n    :options=\"{\n    \tapi: '/umbraco/api/site/search/',\n    \tlimit: 10,\n    \tshowCount: false, || true |false\n    \tpaginationType: 'more', || 'navigation' | 'pagination' | 'more' | 'all' | 'numeric'\n    \tloadFetch: false,\n    }\"\n    :validate-query=\"query =\u003e query.keywords\" || parse in your own query validation\n    :live-search=\"true\" || true/false\n    :value-map=\"{}\" || If v-model returns an object setup rule for which prop to use eg. { nestedPropName: initialValue }\n\u003e\n    \u003c!-- content config here --\u003e\n    \u003c!-- pagination config here --\u003e\n\u003c/sky-list\u003e\n```\n\n### Content slots (with default values)\nSky-list exposes different slot which can be customized\n\n#### Message slots\n`resultMessage`: custom message displayed when results are found\n```html\n\u003csky-list ... \u003e\n    \u003cspan\n        slot=\"resultMessage\"\n        slot-scope=\"{ query, pagination }\"\n    \u003e\n    \tYour search for \u003cem\u003e\"{{query.keywords}}\"\u003c/em\u003e returned \u003cem\u003e{{pagination.total}} {{(pagination.total === 1) ? 'result' : 'results'}}\u003c/em\u003e\n    \u003c/span\u003e\n\u003c/sky-list\u003e\n```\n\n`noResultMessage`: custom message displayed when no results are found\n```html\n\u003csky-list ... \u003e\n    \u003cspan\n        slot=\"noResultMessage\"\n        slot-scope=\"{ query }\"\n        v-text=\"'Your search for ${query.keywords} returned no results'\"\n    /\u003e\n\u003c/sky-list\u003e\n```\n#### List item slot\n`listItem`: Slot for customizing list items. exposes item object and list index\n```html\n\u003csky-list ...\u003e\n\t\u003cdiv\n\t\tslot=\"listItem\"\n\t\tslot-scope=\"{ item, index }\"\n\t\u003e\n\t    \u003csmall v-text=\"`No. ${index + 1}`\"\n\t    \u003ch2 v-text=\"item.title\" /\u003e\n\t    \u003cp v-text=\"item.teaser\" /\u003e\n\t\u003c/div\u003e\n\u003c/sky-list\u003e\n```\n\nPreferably this can be used with custom components like this\n```html\n\u003csky-list ...\u003e\n    \u003cMyComponent\n        slot=\"listItem\"\n\t\tslot-scope=\"{ item, index }\"\n\t\t:my-prop-for-data=\"item\"\n\t\t:my-prop-for-index=\"index\"\n\t/\u003e\n\u003c/sky-list\u003e\n```\n\n#### Pagination slot options (with default values)\n##### paginationType: 'more' | 'all'\nSlot for customizing show more / all button\n```html\n\u003csky-list ... \u003e\n\t\u003cspan\n\t    slot=\"listMore\"\n\t    slot-scope=\"{ itemsLeft }\"\n\t    v-text=\"`${itemsLeft} not displayed`\"\n    /\u003e\n\u003c/sky-list\u003e\n```\n\n##### paginationType: 'navigation' | 'pagination'\n`listPrev`: Slot for customizing previous button\n`nextPrev`: Slot for customizing next button\n```html\n\u003csky-list ... \u003e\n    \u003cspan slot=\"listPrev\"\u003ePrevious\u003c/span\u003e\n    \u003cspan slot=\"listNext\"\u003eNext\u003c/span\u003e\n\u003c/sky-list\u003e\n```\n\n##### paginationType: 'numeric' | 'pagination'\n`paginationBullet`: Slot for customizing bullets\n```html\n\u003csky-list ... \u003e\n\t\u003cspan\n\t    slot=\"paginationBullet\"\n\t    slot-scope=\" { count }\"\n\t    v-text=\"`Page ${count}`\"\n    /\u003e\n\u003c/sky-list\u003e\n```\n\n## \u003ca id=“api”\u003e\u003c/a\u003eAPI Response Setup\nSkyList expects a response with the following setup\n```js\n{\n    \"meta\":{\n        \"code\":200\n    },\n    \"pagination\":{\n        \"total\":1,\n        \"limit\":10,\n        \"offset\":0\n    },\n    \"data\":[\n        {\n            title: 'item1',\n            teaser: 'lorem ipsum',\n        },\n        {\n            title: 'item2',\n            teaser: '',\n        },\n        {\n            title: 'item3',\n            teaser: null,\n        },\n        ...\n    ]\n}\n```\n\nIf your endpoint expects other names for pagination params than `limit` and `offset` the `transform-params` prop can be used to alter the params before requesting. Likewise, upon receiving data, you can use the `transform-result` prop to transform any data received to match the type of API response SkyList expects. Quick example of both in use:\n```html\n\u003cSkyList\n    :options=\"{\n        api: foreignEndpoint,\n    }\"\n    :transform-params=\"params =\u003e ({\n        q: params.keywords,\n        startIndex: params.offset,\n        maxResults: params.limit,\n    })\"\n    :transform-result=\"result =\u003e ({\n        pagination: {\n            total: result.TotalResults,\n            limit: result.EffectiveParameters.MaxResults,\n            offset: result.Offset,\n        },\n        data: result.Documents,\n    })\"\n\u003e\n    ...\n\u003c/SkyList\u003e\n```\n\n## Credits\nThis module is made by the Frontenders at [skybrud.dk](http://www.skybrud.dk/). Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskybrud%2Fsky-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-list/lists"}