mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(component): add Pagination

Browse source 
Closes #23
This commit is contained in:
Eric Liu 2019-12-23 09:32:20 -08:00
commit 4dad89e12d
17 changed files with 222 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -45,6 +45,8 @@ Currently, the following components are supported:
- NotificationIcon
- NotificationTextDetails
- OrderedList
- Pagination
- PaginationSkeleton
- ProgressIndicator
- ProgressIndicatorSkeleton
- ProgressStep

2
docs/iframe.html
View file

@ -70,4 +70,4 @@
}</script><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.f602ce593db7523c0d2e.bundle.js"></script><script src="vendors~main.f602ce593db7523c0d2e.bundle.js"></script><script src="main.f602ce593db7523c0d2e.bundle.js"></script></body></html>
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.eb1985332fcdaa83ba10.bundle.js"></script><script src="vendors~main.eb1985332fcdaa83ba10.bundle.js"></script><script src="main.eb1985332fcdaa83ba10.bundle.js"></script></body></html>

2
docs/main.eb1985332fcdaa83ba10.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/main.eb1985332fcdaa83ba10.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"main.eb1985332fcdaa83ba10.bundle.js","sources":["webpack:///main.eb1985332fcdaa83ba10.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/main.f602ce593db7523c0d2e.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/main.f602ce593db7523c0d2e.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"main.f602ce593db7523c0d2e.bundle.js","sources":["webpack:///main.f602ce593db7523c0d2e.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/runtime~main.f602ce593db7523c0d2e.bundle.js → docs/runtime~main.eb1985332fcdaa83ba10.bundle.js
View file

@ -1,2 +1,2 @@
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
//# sourceMappingURL=runtime~main.f602ce593db7523c0d2e.bundle.js.map
//# sourceMappingURL=runtime~main.eb1985332fcdaa83ba10.bundle.js.map

2
docs/runtime~main.f602ce593db7523c0d2e.bundle.js.map → docs/runtime~main.eb1985332fcdaa83ba10.bundle.js.map
View file

@ -1 +1 @@
{"version":3,"file":"runtime~main.f602ce593db7523c0d2e.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""}
{"version":3,"file":"runtime~main.eb1985332fcdaa83ba10.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""}

22
docs/vendors~main.f602ce593db7523c0d2e.bundle.js → docs/vendors~main.eb1985332fcdaa83ba10.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/vendors~main.eb1985332fcdaa83ba10.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"vendors~main.eb1985332fcdaa83ba10.bundle.js","sources":["webpack:///vendors~main.eb1985332fcdaa83ba10.bundle.js"],"mappings":"AAAA;;;;;AAwqeA;;;;;AAi9JA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAsfA;;;;;;;AAfA","sourceRoot":""}

1
docs/vendors~main.f602ce593db7523c0d2e.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"vendors~main.f602ce593db7523c0d2e.bundle.js","sources":["webpack:///vendors~main.f602ce593db7523c0d2e.bundle.js"],"mappings":"AAAA;;;;;AAmqeA;;;;;AAq/IA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAyfA;;;;;;;AAfA","sourceRoot":""}

21
src/components/Pagination/Pagination.Skeleton.svelte Normal file
View file

@ -0,0 +1,21 @@
<script>
let className = undefined;
export { className as class };
export let style = undefined;
import SkeletonText from '../SkeletonText';
import { cx } from '../../lib';
const _class = cx('--pagination', '--skeleton', className);
</script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
<div class={cx('--pagination__left')}>
<SkeletonText width="70px" />
<SkeletonText width="35px" />
<SkeletonText width="105px" />
</div>
<div class={cx('--pagination__right', '--pagination--inline')}>
<SkeletonText width="70px" />
</div>
</div>

20
src/components/Pagination/Pagination.Story.svelte Normal file
View file

@ -0,0 +1,20 @@
<script>
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import Pagination from './Pagination.svelte';
import PaginationSkeleton from './Pagination.Skeleton.svelte';
</script>
<Layout>
<div style="width: 800px;">
{#if story === 'multiple'}
<Pagination {...$$props}>Pagination</Pagination>
<Pagination {...$$props}>Pagination</Pagination>
{:else if story === 'skeleton'}
<PaginationSkeleton />
{:else}
<Pagination {...$$props}>Pagination</Pagination>
{/if}
</div>
</Layout>

39
src/components/Pagination/Pagination.stories.js Normal file
View file

@ -0,0 +1,39 @@
import { withKnobs, text, number, boolean, array } from '@storybook/addon-knobs';
import Component from './Pagination.Story.svelte';
export default { title: 'Pagination', decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
disabled: boolean('Disable backward/forward buttons (disabled)', false),
page: number('The current page (page)', 1),
totalItems: number('Total number of items (totalItems)', 103),
pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
backwardText: text('The description for the backward icon (backwardText)', 'Previous page'),
forwardText: text('The description for the forward icon (forwardText)', 'Next page'),
pageSize: number('Number of items per page (pageSize)', 10),
pageSizes: array('Choices of `pageSize` (pageSizes)', [10, 20, 30, 40, 50]),
itemsPerPageText: text('Label for `pageSizes` select UI (itemsPerPageText)', 'Items per page:')
}
});
export const Multiple = () => ({
Component,
props: {
story: 'multiple',
disabled: boolean('Disable backward/forward buttons (disabled)', false),
page: number('The current page (page)', 1),
totalItems: number('Total number of items (totalItems)', 103),
pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
backwardText: text('The description for the backward icon (backwardText)', 'Previous page'),
forwardText: text('The description for the forward icon (forwardText)', 'Next page'),
pageSize: number('Number of items per page (pageSize)', 10),
pageSizes: array('Choices of `pageSize` (pageSizes)', [10, 20, 30, 40, 50]),
itemsPerPageText: text('Label for `pageSizes` select UI (itemsPerPageText)', 'Items per page:')
}
});
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

115
src/components/Pagination/Pagination.svelte Normal file
View file

@ -0,0 +1,115 @@
<script>
let className = undefined;
export { className as class };
export let backwardText = 'Previous page';
export let itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`;
export let forwardText = 'Next page';
export let id = Math.random();
export let itemsPerPageText = 'Items per page:';
export let itemText = (min, max) => `${min}–${max} items`;
export let pageRangeText = (current, total) => `of ${total} pages`;
export let pageText = page => `page ${page}`;
export let pageSizes = [10];
export let totalItems = 0;
export let disabled = false;
export let page = 1;
export let pageSize = 10;
export let pagesUnknown = false;
export let pageInputDisabled = false;
export let style = undefined;
import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
import CaretLeft24 from 'carbon-icons-svelte/lib/CaretLeft24';
import Select, { SelectItem } from '../Select';
import { cx } from '../../lib';
const _class = cx('--pagination', className);
$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
$: selectItems = Array.from({ length: totalPages }, (_, i) => i);
$: backButtonDisabled = disabled || page === 1;
$: _backButtonClass = cx(
'--pagination__button',
'--pagination__button--backward',
backButtonDisabled && '--pagination__button--no-index'
);
$: forwardButtonDisabled = disabled || page === totalPages;
$: _forwardButtonClass = cx(
'--pagination__button',
'--pagination__button--forward',
forwardButtonDisabled && '--pagination__button--no-index'
);
</script>
<div class={_class} {style}>
<div class={cx('--pagination__left')}>
<label
id={cx(`--pagination-select-${id}-count-label`)}
class={cx('--pagination__text')}
for={cx(`--pagination-select-${id}`)}>
{itemsPerPageText}
</label>
<Select
id={cx(`--pagination-select-${id}`)}
class={cx('--select__item-count')}
labelText=""
hideLabel
noLabel
inline
on:change={() => {
page = 1;
}}
bind:defaultValue={pageSize}>
{#each pageSizes as size, i (size)}
<SelectItem value={size} text={size.toString()} />
{/each}
</Select>
<span class={cx('--pagination__text')}>
{#if pagesUnknown}
{itemText(pageSize * (page - 1) + 1, page * pageSize)}
{:else}
{itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)}
{/if}
</span>
</div>
<div class={cx('--pagination__right')}>
{#if !pageInputDisabled}
<Select
id={cx(`--pagination-select-${id + 2}`)}
class={cx('--select__page-number')}
labelText={`Page number, of ${totalPages} pages`}
inline
hideLabel
on:change={({ detail }) => {
page = Number(detail);
}}
bind:defaultValue={page}>
{#each selectItems as size, i (size)}
<SelectItem value={size + 1} text={(size + 1).toString()} />
{/each}
</Select>
<span class={cx('--pagination__text')}>
{#if pagesUnknown}{pageText(page)}{:else}{pageRangeText(page, totalPages)}{/if}
</span>
{/if}
<button
type="button"
class={_backButtonClass}
on:click={() => {
page--;
}}
aria-label={backwardText}
disabled={backButtonDisabled}>
<CaretLeft24 />
</button>
<button
type="button"
class={_forwardButtonClass}
aria-label={forwardText}
on:click={() => {
page++;
}}
disabled={forwardButtonDisabled}>
<CaretRight24 />
</button>
</div>
</div>

4
src/components/Pagination/index.js Normal file
View file

@ -0,0 +1,4 @@
import Pagination from './Pagination.svelte';
export default Pagination;
export { default as PaginationSkeleton } from './Pagination.Skeleton.svelte';

3
src/index.js
View file

@ -25,6 +25,7 @@ import {
NotificationTextDetails
} from './components/Notification';
import OrderedList from './components/OrderedList';
import Pagination, { PaginationSkeleton } from './components/Pagination';
import ProgressIndicator, {
ProgressIndicatorSkeleton,
ProgressStep
@ -97,6 +98,8 @@ export {
NotificationIcon,
NotificationTextDetails,
OrderedList,
Pagination,
PaginationSkeleton,
PasswordInput,
ProgressIndicator,
ProgressIndicatorSkeleton,