Merge branch 'dev.pagination'

admin/package.json

@@ -84,7 +84,7 @@
     "devDependencies": {
         "@types/node": "^22.1.0",
         "@vitest/coverage-v8": "^2.0.5",
-        "autoprefixer": "^10.4.19",
+        "autoprefixer": "^10.4.20",
         "cssnano": "^7.0.4",
         "jsdom": "^24.1.1",
         "postcss": "^8.4.40",

admin/src/components/index.ts

@@ -12,4 +12,5 @@ export * from './error';
 export * from './form';
 export * from './notify';
 export * from './tree';
+export * from './pagination';
 

admin/src/components/pagination/demo.tsx

@@ -0,0 +1,29 @@
+// SPDX-FileCopyrightText: 2024 caixw
+//
+// SPDX-License-Identifier: MIT
+
+import { createSignal } from 'solid-js';
+
+import { Demo, paletteSelector } from '@/components/base/demo';
+import {default as Pagination} from './pagination';
+
+export default function() {
+    const [paletteS, palette] = paletteSelector();
+    const [page, setPage] = createSignal('');
+    const [spans, setSpans] = createSignal(3);
+
+    return <Demo settings={
+        <>
+            {paletteS}
+            <input type="number" value={spans()} onchange={(e)=>setSpans(parseInt(e.target.value))} placeholder='spans' />
+        </>
+    } stages={
+        <>
+            <div>
+                <Pagination palette={palette()} count={10} value={5} spans={spans()}
+                    onChange={(val,old)=>{return setPage(`new:${val}, old:${old}`);}} />
+                <pre>{page()}</pre>
+            </div>
+        </>
+    } />;
+}

admin/src/components/pagination/index.ts

@@ -0,0 +1,6 @@
+// SPDX-FileCopyrightText: 2024 caixw
+//
+// SPDX-License-Identifier: MIT
+
+export type {Props as PaginationProps} from './pagination';
+export {default as Pagination} from './pagination';

admin/src/components/pagination/pagination.tsx

@@ -0,0 +1,124 @@
+// SPDX-FileCopyrightText: 2024 caixw
+//
+// SPDX-License-Identifier: MIT
+
+import { createEffect, createSignal, For, mergeProps } from 'solid-js';
+
+import { BaseProps } from '@/components/base';
+import { useInternal } from '@/app/context';
+
+export interface Props extends BaseProps {
+    /**
+     * 总的页码数量
+     */
+    count: number;
+
+    /**
+     * 当前页的页码，取值范围为 [1, {@link Props#count}]。
+     */
+    value: number;
+
+    /**
+     * 在页码改变的时候触发
+     */
+    onChange?: {(current: number, old?: number): void};
+
+    /**
+     * 按钮的数据
+     */
+    spans?: number;
+}
+
+const defaultProps: Readonly<Partial<Props>> = {
+    spans: 3
+};
+
+
+/**
+ * 分页组件
+ * 
+ * 大致布局如下：
+ *  [<<,<,1,2,...,current...,7,8,>,>>]
+ */
+export default function(props: Props) {
+    props = mergeProps(defaultProps, props);
+
+    const ctx = useInternal();
+
+    if (props.value < 1 || props.value > props.count) {
+        throw 'props.value 的取值范围为 [1, props.count]';
+    }
+
+    const [prevs, setPrevs] = createSignal<Array<number>>([]);
+    const [nexts, setNexts] = createSignal<Array<number>>([]);
+    const [current, setCurrent] = createSignal(props.value);
+
+    createEffect(()=>{
+        let min = current() - props.spans!;
+        if (min <= 1) {
+            min = 1;
+        }
+        const pv: Array<number> = [];
+        for(let i = min; i < current(); i++) {
+            pv.push(i);
+        }
+        setPrevs(pv);
+
+        let max = current() + props.spans!;
+        if (max >= props.count) {
+            max = props.count;
+        }
+        const nv: Array<number> = [];
+        for(let i = current()+1; i <= max; i++) {
+            nv.push(i);
+        }
+        setNexts(nv);
+    });
+
+    const change = (page: number) => {
+        const old = current();
+        setCurrent(page);
+        if (props.onChange) {
+            props.onChange(page, old);
+        }
+    };
+
+    return <div classList={{
+        'c--pagination': true,
+        [`palette--${props.palette}`]: !!props.palette
+    }}>
+        <button onclick={()=>change(1)}
+            class="item material-symbols-outlined"
+            disabled={current()===1}
+            title={ctx.t('_internal.pagination.firstPage')}>first_page</button>
+
+        <button onclick={()=>change(current()-1)}
+            class="item material-symbols-outlined"
+            disabled={current()===1}
+            title={ctx.t('_internal.pagination.prev')}>chevron_left</button>
+
+        <For each={prevs()}>
+            {(item)=>(
+                <button onclick={()=>change(item)} class="item">{item}</button>
+            )}
+        </For>
+
+        <button class="item current">{current()}</button>
+
+        <For each={nexts()}>
+            {(item)=>(
+                <button onclick={()=>change(item)} class="item">{item}</button>
+            )}
+        </For>
+
+        <button onclick={()=>change(current()+1)}
+            class="item material-symbols-outlined"
+            title={ctx.t('_internal.pagination.next')}
+            disabled={current() >= props.count}>chevron_right</button>
+
+        <button onclick={()=>change(props.count)}
+            class="item material-symbols-outlined"
+            title={ctx.t('_internal.pagination.lastPage')}
+            disabled={current() >= props.count}>last_page</button>
+    </div>;
+}

admin/src/components/pagination/style.css

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2024 caixw
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@layer components {
+    .c--pagination {
+        @apply flex rounded-md bg-palette-bg;
+
+        :first-child {
+            @apply rounded-l-md;
+        }
+
+        :last-child {
+            @apply rounded-r-md;
+        }
+
+
+        .item {
+            @apply hover:bg-palette-bg-low px-2 py-[2px];
+        }
+
+        .item:disabled {
+            @apply cursor-not-allowed bg-palette-bg text-palette-bg-high;
+        }
+
+        .current {
+            @apply bg-palette-bg-high;
+        }
+    }
+}

admin/src/components/style.css

@@ -13,3 +13,4 @@
 @import './notify/style.css';
 @import './tree/style.css';
 @import './form/style.css';
+@import './pagination/style.css';

admin/src/demo.tsx

@@ -13,6 +13,7 @@ const maps: Array<[string, ReturnType<typeof lazy>]> = [
     ['/dropdown', lazy(()=>import('@/components/dropdown/demo'))],
     ['/badge', lazy(()=>import('@/components/badge/demo'))],
     ['/divider', lazy(()=>import('@/components/divider/demo'))],
+    ['/pagination', lazy(()=>import('@/components/pagination/demo'))],
 
     ['/tree-list', lazy(()=>import('@/components/tree/list/demo'))],
     ['/tree-menu', lazy(()=>import('@/components/tree/menu/demo'))],

admin/src/locales/cmn-Hans.ts

@@ -11,6 +11,12 @@ const messages: Messages = {
     logout: '退出',
     reset: '重置',
     refresh: '刷新',
+    pagination: {
+        prev: '前一页',
+        next: '下一页',
+        firstPage: '首页',
+        lastPage: '末页',
+    },
     date: {
         monday: '一',
         tuesday: '二',

admin/src/locales/en.ts

@@ -9,6 +9,12 @@ const messages = {
     logout: 'logout',
     reset: 'reset',
     refresh: 'refresh',
+    pagination: {
+        prev: 'prev',
+        next: 'next',
+        firstPage: 'first page',
+        lastPage: 'last page',
+    },
     date: {
         monday: 'Mon',
         tuesday: 'Tue',