@ticatec/topside-elements 1.0.0

package/dist/base-calendar/YearPickupPanel.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+    interface Props {
+        year: number;
+        max?: number | null;
+        min?: number | null;
+        onclick?: (event: MouseEvent) => void;
+    }
+
+    let {
+        year = $bindable<number>(),
+        max = null,
+        min = null,
+        onclick
+    }: Props = $props();
+
+    let offset = $state(6);
+    const years = 12;
+
+    const isDisabled = (y: number) =>
+        (max != null && y > max) || (min != null && y < min);
+
+    const handleYearClick = (idx: number) => (e: MouseEvent) => {
+        const y = year - offset + idx;
+        if (!isDisabled(y)) {
+            year = y;
+        } else {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+
+    const showYears = (n: number) => (e: MouseEvent) => {
+        offset = offset - n;
+        e.stopPropagation();
+        e.preventDefault();
+    };
+
+    const handleKeyActivate = (handler: (e: any) => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler(e);
+        }
+    };
+</script>
+<div class="topside-year-pickup-panel" onclick={onclick} role="presentation">
+    <div>
+        <div>
+            <div style="text-align: center">
+                <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
+                    <i class="icon_google_keyboard_arrow_up" role="button" tabindex="0" aria-label="Previous years"
+                       onclick={showYears(-years)} onkeydown={handleKeyActivate(showYears(-years))}></i>
+                </div>
+            </div>
+            <div style="display: grid; grid-template-columns: auto auto auto auto; width: 100%; overflow: hidden">
+                {#each Array(years) as _, i}
+                    <div class="year-block" onclick={handleYearClick(i)} onkeydown={handleKeyActivate(handleYearClick(i))}
+                         role="button" tabindex="0" aria-disabled={isDisabled(year - offset + i)}
+                         aria-current={year === year - offset + i ? 'date' : undefined}
+                         class:disabled={isDisabled(year - offset + i)}
+                         class:selected={year === year - offset + i}>
+                        <span>{year - offset + i}</span>
+                    </div>
+                {/each}
+            </div>
+            <div style="text-align: center">
+                <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
+                    <i class="icon_google_keyboard_arrow_down" role="button" tabindex="0" aria-label="Next years"
+                       onclick={showYears(years)} onkeydown={handleKeyActivate(showYears(years))}></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .topside-year-pickup-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        color: var(--topside-calendar-color-title);
+        user-select: none;
+    }
+
+    .topside-year-pickup-panel > div {
+        width: 100%;
+        position: relative;
+        top: 30px;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+
+    .topside-year-pickup-panel > div > div {
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: 4px;
+        background-color: var(--topside-calendar-color-surface);
+        border: 1px solid var(--topside-color-border-secondary);
+        overflow: auto;
+    }
+
+    .year-block {
+        margin: 8px 4px;
+        padding: 2px 1px;
+        text-align: center;
+        box-sizing: border-box;
+        line-height: 1.5em;
+        color: var(--topside-calendar-color-day-text);
+        cursor: pointer;
+        border-radius: 6px;
+        border: 1px solid transparent;
+    }
+
+    .year-block:hover {
+        background-color: var(--topside-calendar-color-day-surface-hover);
+    }
+
+    .year-block.selected {
+        color: var(--topside-calendar-color-selected);
+        background-color: var(--topside-calendar-color-selected-surface);
+    }
+
+    .year-block.selected:hover {
+        background-color: unset;
+    }
+
+    .year-block.disabled {
+        color: var(--topside-calendar-color-day-muted-text);
+        cursor: not-allowed;
+    }
+
+    .year-block.disabled:hover {
+        font-weight: unset;
+    }
+
+    .year-block:focus-visible,
+    .icon_google_keyboard_arrow_up:focus-visible,
+    .icon_google_keyboard_arrow_down:focus-visible {
+        outline: 2px solid var(--topside-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
+</style>

package/dist/base-calendar/YearPickupPanel.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    year: number;
+    max?: number | null;
+    min?: number | null;
+    onclick?: (event: MouseEvent) => void;
+}
+declare const YearPickupPanel: import("svelte").Component<Props, {}, "year">;
+type YearPickupPanel = ReturnType<typeof YearPickupPanel>;
+export default YearPickupPanel;

package/dist/base-calendar/dateUtils.d.ts

@@ -0,0 +1,9 @@
+import dayjs from "dayjs";
+export type UniDate = dayjs.Dayjs | Date | string | undefined;
+declare const _default: {
+    today: () => dayjs.Dayjs;
+    formatDate: (d: UniDate, fmt?: string) => string;
+    formatISODate: (d: UniDate) => string;
+    toDayjs: (d: UniDate) => dayjs.Dayjs;
+};
+export default _default;

package/dist/base-calendar/dateUtils.js

@@ -0,0 +1,38 @@
+import dayjs, { isDayjs } from "dayjs";
+/**
+ * 获取今日的日期，时间清空
+ */
+const today = () => {
+    return dayjs().hour(0).minute(0).second(0).millisecond(0);
+};
+/**
+ * 格式化日期
+ * @param d
+ * @param fmt
+ */
+const formatDate = (d, fmt = 'YYYY-MM-DD') => {
+    if (d == null || d === '') {
+        return '';
+    }
+    d = dayjs.isDayjs(d) ? d : dayjs(d);
+    return d.isValid() ? d.format(fmt) : '';
+};
+const formatISODate = (d) => {
+    if (d == null || d === '') {
+        return '';
+    }
+    d = dayjs.isDayjs(d) ? d : dayjs(d);
+    return d.isValid() ? d.toISOString() : '';
+};
+/**
+ * 把日期，字符串转换成dayjs格式
+ * @param d
+ */
+const toDayjs = (d) => {
+    if (d == null || d === '') {
+        return null;
+    }
+    const res = dayjs.isDayjs(d) ? d : dayjs(d);
+    return res.isValid() ? res : null;
+};
+export default { today, formatDate, formatISODate, toDayjs };

package/dist/base-calendar/index.d.ts

@@ -0,0 +1,5 @@
+import Calendar from "./CalendarBase.svelte";
+import DateContext from "./DateContext";
+import dateUtils from "./dateUtils";
+export default Calendar;
+export { DateContext, dateUtils };

package/dist/base-calendar/index.js

@@ -0,0 +1,5 @@
+import Calendar from "./CalendarBase.svelte";
+import DateContext from "./DateContext";
+import dateUtils from "./dateUtils";
+export default Calendar;
+export { DateContext, dateUtils };

package/dist/composite/pagination_panel/PaginationPanel.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+    import Pagination from "../../navigation/pagination";
+    import OptionsSelect from "../../form/options_select";
+    import i18nRes from "../../i18nRes";
+    import type {GenerateTotalInfo, OnPageChange, OnPageSizeChange, Size} from "../../types";
+
+    interface Props {
+        pageCount?: number;
+        pageNo?: number;
+        /** 形状：plain / round / circle */
+        variant?: 'plain' | 'round' | 'circle';
+        page$style?: string;
+        /** 尺寸档位；'large' 对应旧的 big */
+        size?: Size;
+        rowsSet?: Array<number>;
+        total?: number;
+        generateInfo?: GenerateTotalInfo;
+        rowCount?: number;
+        /** 每页行数选择框旁的文字 */
+        rowCountText?: string;
+        align?: 'left' | 'right' | '';
+        onPageSizeChange?: OnPageSizeChange;
+        onchange?: OnPageChange;
+    }
+
+    let {
+        pageCount = 0,
+        pageNo = $bindable(1),
+        variant = 'round',
+        page$style = '',
+        size = 'medium',
+        rowsSet = [25, 50, 100],
+        total = 0,
+        generateInfo,
+        rowCount = $bindable(25),
+        rowCountText = i18nRes.dataTable.rowsPerPage(),
+        align = '',
+        onPageSizeChange,
+        onchange,
+    }: Props = $props();
+
+    let pagesOptions = $derived(
+        (rowsSet ?? [25, 50, 100]).map(v => ({code: v, text: `${v}`}))
+    );
+    // Rendered via {@html} below: generateInfo is a trusted, caller-supplied
+    // renderer (not user input) — same opt-in-HTML boundary as DataColumn#renderHTML.
+    // The default text comes from the i18n resources (dataTable.totalInfo), so it
+    // follows the active language instead of being hardcoded English.
+    let totalText = $derived(
+        generateInfo
+            ? generateInfo(total, pageCount, pageNo, rowCount)
+            : i18nRes.dataTable.totalInfo({total})
+    );
+
+    const handleRowCountChange = () => {
+        onPageSizeChange?.(rowCount);
+    }
+</script>
+
+<div class="topside-pagination-panel" class:left={align === 'left'} class:right={align === 'right'}>
+    <div class="page-options">
+        <OptionsSelect
+            compact={size !== 'large' || variant === 'plain'}
+            style="width: 80px"
+            variant="outlined"
+            clearable={false}
+            options={pagesOptions}
+            bind:value={rowCount}
+            onchange={handleRowCountChange}/>
+    </div>
+    <div>
+        <span style="margin-left: 8px">{rowCountText}</span></div>
+    <div class="pagination">
+        <Pagination {pageCount} bind:pageNo {variant} style={page$style} {size} {onchange}/>
+    </div>
+    <div class="pagination-info">
+        {@html totalText}
+    </div>
+</div>
+
+<style>
+    .topside-pagination-panel {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        padding: 4px 0;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .page-options {
+        flex: 0 0 auto;
+    }
+
+    .pagination {
+        flex: 1 1 auto;
+    }
+
+    .pagination-info {
+        flex: 0 0 auto;
+        min-width: 150px;
+        text-align: right;
+    }
+
+    .topside-pagination-panel.left .pagination {
+        flex: 0 0 auto;
+    }
+
+    .topside-pagination-panel.right {
+        justify-content: right;
+    }
+
+    .topside-pagination-panel.right .pagination {
+        flex: 0 0 auto;
+    }
+</style>

package/dist/composite/pagination_panel/PaginationPanel.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { GenerateTotalInfo, OnPageChange, OnPageSizeChange, Size } from "../../types";
+interface Props {
+    pageCount?: number;
+    pageNo?: number;
+    /** 形状：plain / round / circle */
+    variant?: 'plain' | 'round' | 'circle';
+    page$style?: string;
+    /** 尺寸档位；'large' 对应旧的 big */
+    size?: Size;
+    rowsSet?: Array<number>;
+    total?: number;
+    generateInfo?: GenerateTotalInfo;
+    rowCount?: number;
+    /** 每页行数选择框旁的文字 */
+    rowCountText?: string;
+    align?: 'left' | 'right' | '';
+    onPageSizeChange?: OnPageSizeChange;
+    onchange?: OnPageChange;
+}
+declare const PaginationPanel: import("svelte").Component<Props, {}, "pageNo" | "rowCount">;
+type PaginationPanel = ReturnType<typeof PaginationPanel>;
+export default PaginationPanel;

package/dist/composite/pagination_panel/README.md

@@ -0,0 +1,130 @@
+# PaginationPanel
+
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `rowCountLabel` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A composite pagination bar that combines three controls into one row: a rows-per-page selector, a page navigator, and a total-records info area.
+
+> Svelte 5 component. Callbacks are passed as plain props (`onchange`, `onPageSizeChange`), not as `on:` directives.
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/topside-elements/PaginationPanel';
+  import type { OnPageChange, OnPageSizeChange } from '@ticatec/topside-elements/PaginationPanel';
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `pageNo` | `number` | `1` | Currently active page (1-based) |
+| `pageCount` | `number` | `0` | Total number of pages |
+| `total` | `number` | `0` | Total record count, shown in the info area |
+| `rowCount` | `number` | `25` | Rows-per-page value. **Bindable** — use `bind:rowCount` to read it back, or pass `onPageSizeChange` to react to changes |
+| `rowsSet` | `Array<number>` | `[25, 50, 100]` | Available options in the rows-per-page selector |
+| `rowCountText` | `string` | `'Rows/Page'` | Label shown next to the rows-per-page selector |
+| `type` | `'plain' \| 'round' \| 'circle'` | `'round'` | Visual style of the inner Pagination buttons |
+| `big` | `boolean` | `false` | Larger button size for the inner Pagination |
+| `page$style` | `string` | `''` | Inline CSS applied to the inner Pagination root |
+| `align` | `'left' \| 'right' \| ''` | `''` | Panel alignment. `''` centers; `left`/`right` push the navigator to that side |
+| `generateInfo` | `(total, pageCount, pageNo, rows) => string` | `undefined` | Custom HTML for the info area (returned string is rendered with `{@html}`) |
+| `onchange` | `(pageNo: number) => void` | `undefined` | Fired when the user clicks a page |
+| `onPageSizeChange` | `(size: number) => void` | `undefined` | Fired when the user changes the rows-per-page selector |
+
+> **Callback names matter.** The page-change callback is `onchange` (not `onPageChange`); the rows-per-page callback is `onPageSizeChange` (not `onRowCountChanged`). Passing the wrong name silently does nothing.
+
+## Default info text
+
+When `generateInfo` is not provided, the info area shows `Total: <b>{total}</b> entities.` (English). Provide `generateInfo` to localize it or to show a different format (e.g. "Showing 1–25 of 237").
+
+## Examples
+
+### Minimal
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/topside-elements/PaginationPanel';
+
+  let pageNo = $state(1);
+  let pageCount = 10;
+  let total = 250;
+
+  const onchange = (p: number) => { pageNo = p; };
+</script>
+
+<PaginationPanel {pageNo} {pageCount} {total} {onchange} />
+```
+
+### With `bind:rowCount`
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/topside-elements/PaginationPanel';
+
+  let pageNo = $state(1);
+  let rowCount = $state(25);
+  let total = 250;
+  let pageCount = $derived(Math.ceil(total / rowCount));
+
+  // Fires after PaginationPanel has updated its internal value
+  const onPageSizeChange = (size: number) => {
+    pageNo = 1;  // reset to first page on size change
+    console.log('rows per page =', size);
+  };
+  const onchange = (p: number) => { pageNo = p; };
+</script>
+
+<PaginationPanel
+  {pageNo}
+  {pageCount}
+  {total}
+  rowsSet={[10, 25, 50, 100]}
+  bind:rowCount
+  {onchange}
+  {onPageSizeChange}
+/>
+```
+
+### Custom info text (localized)
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/topside-elements/PaginationPanel';
+
+  const generateInfo = (total: number, _pages: number, pageNo: number, rows: number) => {
+    const start = (pageNo - 1) * rows + 1;
+    const end = Math.min(pageNo * rows, total);
+    return `Showing <b>${start}–${end}</b> of <b>${total}</b> users`;
+  };
+</script>
+
+<PaginationPanel
+  pageNo={3}
+  pageCount={10}
+  total={237}
+  rowCount={25}
+  {generateInfo}
+  align="right"
+/>
+```
+
+## Layout
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ [25 ▼] Rows/Page    ‹ 1 2 3 … 10 ›    Total: 250 users │
+└─────────────────────────────────────────────────────────┘
+       flex: 0 0 auto      flex: 1 1 auto       flex: 0 0 auto
+```
+
+- `align=""` (default): navigator centered in the remaining space
+- `align="left"`: navigator pushed to the left
+- `align="right"`: whole row right-aligned

package/dist/composite/pagination_panel/README_CN.md

@@ -0,0 +1,130 @@
+# PaginationPanel 分页面板
+
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `rowCountLabel` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
+一个组合分页条，把"每页行数选择器 + 页码导航 + 总记录数信息"放在同一行。
+
+> Svelte 5 组件。回调以普通 prop 形式传入（`onchange`、`onPageSizeChange`），不再用 `on:` 指令。
+
+## 安装
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## 导入
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/topside-elements/PaginationPanel';
+  import type { OnPageChange, OnPageSizeChange } from '@ticatec/topside-elements/PaginationPanel';
+</script>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `pageNo` | `number` | `1` | 当前页码（从 1 开始） |
+| `pageCount` | `number` | `0` | 总页数 |
+| `total` | `number` | `0` | 总记录数，显示在信息区 |
+| `rowCount` | `number` | `25` | 每页行数。**可绑定** —— 用 `bind:rowCount` 读回，或通过 `onPageSizeChange` 监听变化 |
+| `rowsSet` | `Array<number>` | `[25, 50, 100]` | 每页行数选择器的可选项 |
+| `rowCountText` | `string` | `'Rows/Page'` | 每页行数选择器旁的标签文字 |
+| `type` | `'plain' \| 'round' \| 'circle'` | `'round'` | 内部 Pagination 按钮的视觉样式 |
+| `big` | `boolean` | `false` | 内部 Pagination 使用大号按钮 |
+| `page$style` | `string` | `''` | 应用到内部 Pagination 根节点的内联 CSS |
+| `align` | `'left' \| 'right' \| ''` | `''` | 面板对齐。`''` 居中；`left` / `right` 把导航推到对应一侧 |
+| `generateInfo` | `(total, pageCount, pageNo, rows) => string` | `undefined` | 自定义信息区 HTML（返回值会以 `{@html}` 渲染） |
+| `onchange` | `(pageNo: number) => void` | `undefined` | 用户点击页码时触发 |
+| `onPageSizeChange` | `(size: number) => void` | `undefined` | 用户改变每页行数时触发 |
+
+> **回调名很重要。** 翻页回调是 `onchange`（不是 `onPageChange`）；每页行数回调是 `onPageSizeChange`（不是 `onRowCountChanged`）。名字写错了不会报错，只是静默不生效。
+
+## 默认信息文案
+
+不传 `generateInfo` 时，信息区显示 `Total: <b>{total}</b> entities.`（英文）。要本地化或换成"显示第 1–25 条，共 237 条"这种格式，传 `generateInfo`。
+
+## 示例
+
+### 最小用法
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/topside-elements/PaginationPanel';
+
+  let pageNo = $state(1);
+  let pageCount = 10;
+  let total = 250;
+
+  const onchange = (p: number) => { pageNo = p; };
+</script>
+
+<PaginationPanel {pageNo} {pageCount} {total} {onchange} />
+```
+
+### 用 `bind:rowCount`
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/topside-elements/PaginationPanel';
+
+  let pageNo = $state(1);
+  let rowCount = $state(25);
+  let total = 250;
+  let pageCount = $derived(Math.ceil(total / rowCount));
+
+  // 在 PaginationPanel 更新完内部值之后触发
+  const onPageSizeChange = (size: number) => {
+    pageNo = 1;  // 切换行数后回到第一页
+    console.log('rows per page =', size);
+  };
+  const onchange = (p: number) => { pageNo = p; };
+</script>
+
+<PaginationPanel
+  {pageNo}
+  {pageCount}
+  {total}
+  rowsSet={[10, 25, 50, 100]}
+  bind:rowCount
+  {onchange}
+  {onPageSizeChange}
+/>
+```
+
+### 自定义信息文案（本地化）
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/topside-elements/PaginationPanel';
+
+  const generateInfo = (total: number, _pages: number, pageNo: number, rows: number) => {
+    const start = (pageNo - 1) * rows + 1;
+    const end = Math.min(pageNo * rows, total);
+    return `显示第 <b>${start}–${end}</b> 条，共 <b>${total}</b> 个用户`;
+  };
+</script>
+
+<PaginationPanel
+  pageNo={3}
+  pageCount={10}
+  total={237}
+  rowCount={25}
+  {generateInfo}
+  align="right"
+/>
+```
+
+## 布局
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ [25 ▼] Rows/Page    ‹ 1 2 3 … 10 ›    Total: 250 users │
+└─────────────────────────────────────────────────────────┘
+       flex: 0 0 auto      flex: 1 1 auto       flex: 0 0 auto
+```
+
+- `align=""`（默认）：导航居中
+- `align="left"`：导航靠左
+- `align="right"`：整行右对齐

package/dist/composite/pagination_panel/index.d.ts

@@ -0,0 +1,4 @@
+import PaginationPanel from "./PaginationPanel.svelte";
+import type { OnPageChange, GenerateTotalInfo } from "../../types";
+export default PaginationPanel;
+export type { OnPageChange, GenerateTotalInfo };

package/dist/composite/pagination_panel/index.js

@@ -0,0 +1,2 @@
+import PaginationPanel from "./PaginationPanel.svelte";
+export default PaginationPanel;