ui5-pagination

適用於目前任意 UI5 Web Components 版本（1.8+ 定 2.3+）的分頁組件

安裝

lit

作爲對等依賴，也可以不安裝，按下面的操作來提升 @ui5/webcomponents>lit

先指認版本

// package.json
"pnpm": {
    "overrides": {
        "lit": "$@ui5/webcomponents"
    }
}

然後提升依賴

# .npmrc
hoist-pattern[] = *lit*
public-hoist-pattern[] = *lit*

以上操作再利用其他基於lit的框架時，或同@ui5的lit版本不一致時非常有用

ui5

ui5當然要一起安裝

pnpm i @ui5/webcomponents
pnpm i @ui5/webcomponents-icons
pnpm i ui5-pagination

CDN 支援

雖然 ui5官網不推薦 但你依然可以透過 JSPM 來生成importmap

使用JSPM會同pnpm一樣將lit@*取到最新導致同@ui5依賴的lit版本不一致，

所以你應該手動添加以下importmap字段（@ui5 目前依賴 [email protected]）：

<script type="importmap">
    {
        "imports": {
            "@ui5/webcomponents-icons/AllIcons.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/AllIcons.js",
            "@ui5/webcomponents/dist/Button.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Button.js",
            "@ui5/webcomponents/dist/Dialog.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Dialog.js",
            "@ui5/webcomponents/dist/Input.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Input.js",
            "@ui5/webcomponents/dist/Label.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Label.js",
            "@ui5/webcomponents/dist/Option.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Option.js",
            "@ui5/webcomponents/dist/Select.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Select.js",
            "@ui5/webcomponents-compat/Table.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Table.js",
            "@ui5/webcomponents-compat/TableCell.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/TableCell.js",
            "@ui5/webcomponents-compat/TableColumn.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/TableColumn.js",
            "@ui5/webcomponents-compat/TableRow.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/TableRow.js",
            "@ui5/webcomponents/dist/Toast.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Toast.js",
+           "ui5-pagination": "https://ga.jspm.io/npm:[email protected]/dist/index.js"
        },
        "scopes": {
            "https://ga.jspm.io/": {
                "@ui5/webcomponents-base/dist/": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/",
                "@ui5/webcomponents-icons/dist/": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/",
                "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/generated/themes/sap_horizon/parameters-bundle.css.js",
                "@ui5/webcomponents/dist/": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/",
                "lit-html": "https://ga.jspm.io/npm:[email protected]/development/lit-html.js",
                "lit-html/": "https://ga.jspm.io/npm:[email protected]/development/",
+               "lit-element/lit-element.js": "https://ga.jspm.io/npm:[email protected]/development/lit-element.js",
+               "lit": "https://ga.jspm.io/npm:[email protected]/index.js",
+               "lit/": "https://ga.jspm.io/npm:[email protected]/",
+               "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/[email protected]/development/reactive-element.js",
+               "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/[email protected]/development/decorators/"
            }
        }
    }
</script>

雖然 @ui5 很長一段時間一直是依賴 [email protected]，寫成 lit@* 可以不必頻繁跟隨維護

基本

即使不使用也要引入按鈕和圖標

<script type="module">
    import '@ui5/webcomponents/dist/Button.js'
    // 若全部引入圖標： import '@ui5/webcomponents-icons/AllIcons.js'
    // 只引入最基本的兩隻箭頭圖標：
    import '@ui5/webcomponents-icons/dist/navigation-left-arrow.js'
    import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js'
    // 以上是對等套件
    import 'ui5-pagination'
</script>
<!-- current 從1開始 ；index 從0開始 -->
<ui5-pagination total="10" current="4"></ui5-pagination>
<ui5-pagination total="10" index="3"></ui5-pagination>
<script type="module">
    const pagination = document.querySelector('ui5-pagination')
    /**
     * 事件獲取的都是 pageNumber；
     * `this.current = e.detail` 是這個事件的默認行爲
     */
    pagination.addEventListener('page-to', (e) =>
        console.log(`number: ${e.detail}`),
    )
    pagination.onChange = (n) => console.log(n)
</script>

開發

如果你想貢獻代碼或者二次開發

# 安裝
pnpm i
# 倘若lit版本同@ui5/webcomponents所依賴的不一致 可以强制指定
pnpm i [email protected]  --save-peer

# 調試
pnpm dev

# 構建
pnpm build