@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/base-calendar/MonthlyCalendar.svelte

@@ -1,118 +1,203 @@
 <script lang="ts">
-
     import dateUtils, {type UniDate} from "./dateUtils";
     import DateContext from "./DateContext";
     import dayjs from "dayjs";
-    import {onMount} from "svelte";
+    import type {Snippet} from "svelte";
     import type {CalendarDay} from "./CalendarDay";
-    import type {OnSelectHandler} from "../common/OnSelectHandler";
-
-    const dateCtx: DateContext = DateContext.getInstance();
-
-    export let min: UniDate;
-    export let max: UniDate;
-    export let weekTitle: Array<string>;
-    export let weekBegin: number = dateCtx.weekBegin;
-    export let year: number;
-    export let month: number;
-    export let date: number;
-    export let value;
-    export let cellWidth: number;
-    export let cellHeight: number;
-    export let dailyContent: any;
-    export let onSelect: OnSelectHandler<dayjs.Dayjs>;
-
 
-
-    let today = dateUtils.today();
-    let oldMin:any, oldMax:any;
-    let selected = {year: 0, month: 0, date: 0};
-
-    onMount(() => {
-        if (value) {
-            let d = dayjs(value);
-            selected = {year: d.year(), month: d.month(), date: d.date()}
-        }
-
-    })
-
-    let isWeekend = (idx: number) => {
-        let dow = (idx + weekBegin) % 7;
-        return dow == 6 || dow == 0;
-    }
-
-    let days:Array<CalendarDay> = [];
-
-    const isNotAllow = (d: dayjs.Dayjs): boolean => {
-        return (min != null && d.isBefore(min)) || (max != null && d.isAfter(max));
+    interface Props {
+        min?: UniDate;
+        max?: UniDate;
+        weekTitle: Array<string>;
+        weekBegin?: number;
+        year: number;
+        month: number;
+        date: number;
+        value?: UniDate;
+        cellWidth: number;
+        cellHeight: number;
+        border?: boolean;
+        dailyContent?: Snippet<[{ year: number, month: number, day: CalendarDay }]>;
+        onselect?: (value: dayjs.Dayjs) => void;
     }
 
-    const showCalendar = (y: number, m: number, d: number) => {
-        oldMin = min;
-        oldMax = max;
-        let beginDay = dayjs(new Date(y, m, 1));
+    let {
+        min,
+        max,
+        weekTitle,
+        weekBegin = DateContext.getInstance().weekBegin,
+        year,
+        month,
+        value,
+        cellWidth,
+        cellHeight,
+        border = false,
+        dailyContent,
+        onselect
+    }: Props = $props();
+
+    const today = dateUtils.today();
+
+    let selected = $state({year: 0, month: 0, date: 0});
+    let days = $state<Array<CalendarDay>>([]);
+
+    const isWeekend = (idx: number) => {
+        const dow = (idx + weekBegin) % 7;
+        return dow === 6 || dow === 0;
+    };
+
+    const isNotAllowed = (d: dayjs.Dayjs): boolean =>
+        (min != null && d.isBefore(min as dayjs.Dayjs)) ||
+        (max != null && d.isAfter(max as dayjs.Dayjs));
+
+    const computeDays = (y: number, m: number) => {
+        const beginDay = dayjs(new Date(y, m, 1));
         let od = ((beginDay.day() % 7 - weekBegin) + 7) % 7;
-        if (od == 0) {
-            od = 7;
-        }
-        let from = beginDay.add(-od, "days");
-        days = [];
+        if (od === 0) od = 7;
+        let from = beginDay.add(-od, "day");
+        const result: CalendarDay[] = [];
         for (let i = 0; i < 42; i++) {
-            days.push({
+            result.push({
                 y,
                 m: from.month(),
                 d: from.date(),
-                isToday: from.month() == month && from.isSame(today),
-                disabled: from.month() != month || isNotAllow(from)
-            })
-            from = from.add(1, "days");
+                isToday: from.month() === month && from.isSame(today),
+                disabled: from.month() !== month || isNotAllowed(from)
+            });
+            from = from.add(1, "day");
         }
-    }
+        days = result;
+    };
+
+    // Initial selection from incoming value (and follow external changes)
+    $effect(() => {
+        if (value != null) {
+            const d = dayjs(value);
+            selected = {year: d.year(), month: d.month(), date: d.date()};
+        }
+    });
+
+    // Recompute grid whenever display month/year or min/max changes
+    $effect(() => {
+        computeDays(year, month);
+    });
 
     let respondClick = true;
 
-    const handleDayClick = (ad:any) => (event: MouseEvent) => {
-        if (ad.disabled == false && respondClick) {
+    const handleDayClick = (ad: CalendarDay) => () => {
+        if (!ad.disabled && respondClick) {
             respondClick = false;
             setTimeout(() => {
-                respondClick = true
+                respondClick = true;
             }, 200);
             selected = {year, month, date: ad.d};
-            onSelect?.(dayjs(new Date(year, month, ad.d)));
+            onselect?.(dayjs(new Date(year, month, ad.d)));
         }
-    }
-
-    $: {
-        let v = value ?? dateUtils.today();
-        year = v.year();
-        month = v.month();
-        date = v.date();
-    }
-
-    $: showCalendar(year, month, date);
-
-    $: if (oldMax != max || oldMin != min) {
-        showCalendar(year, month, date);
-    }
-
+    };
 </script>
-<div class="monthly-calendar">
+<div class="monthly-calendar" class:border>
     {#each Array(7) as _, idx}
-        <div class="cell week-title" class:weekend={isWeekend(idx)}><span>{weekTitle[(idx + weekBegin + 7) % 7] }</span></div>
+        <div class="cell week-title" class:weekend={isWeekend(idx)}>
+            <span>{weekTitle[(idx + weekBegin + 7) % 7]}</span>
+        </div>
     {/each}
     {#each days as day, idx}
-        <div class="cell calendar-day" aria-hidden="true" style="width: {cellWidth}px; height: {cellHeight}px;" class:weekend={isWeekend(idx)}
+        <div class="cell calendar-day"
+             aria-hidden="true"
+             style="width: {cellWidth}px; height: {cellHeight}px;"
+             class:weekend={isWeekend(idx)}
              class:today={day.isToday}
-             on:click={handleDayClick(day)}
-             class:selected={(selected.year===day.y) && (selected.month===day.m) && (selected.date===day.d)}
-             class:lastRow={idx>34}
-             class:disabled={day.disabled}>
+             class:selected={selected.year === day.y && selected.month === day.m && selected.date === day.d}
+             class:lastRow={idx > 34}
+             class:disabled={day.disabled}
+             onclick={handleDayClick(day)}>
             <span>{day.d}</span>
-            {#if dailyContent != null}
+            {#if dailyContent}
                 <div>
-                    <svelte:component this={dailyContent} {year} {month} date={day}/>
+                    {@render dailyContent({year, month, day})}
                 </div>
             {/if}
         </div>
     {/each}
-</div>
+</div>
+
+<style>
+    .monthly-calendar {
+        display: grid;
+        grid-template-columns: auto auto auto auto auto auto auto;
+        overflow: hidden;
+    }
+
+    .cell {
+        width: 100%;
+        position: relative;
+        text-align: center;
+        box-sizing: border-box;
+        line-height: 1.9em;
+    }
+
+    .cell > span:first-child {
+        user-select: none;
+        position: relative;
+        line-height: 1.5em;
+        display: inline-block;
+        padding: 0.125em;
+        width: 1.75em;
+        height: 1.75em;
+        box-sizing: border-box;
+        border-radius: 4px;
+        border: 1px solid transparent;
+        margin: 2px 0;
+        cursor: pointer;
+    }
+
+    .cell.week-title {
+        font-weight: 600;
+    }
+
+    .calendar-day > span:first-child:hover {
+        background-color: var(--uniface-calendar-color-day-surface-hover);
+    }
+
+    .calendar-day.today > span:first-child {
+        border-color: var(--uniface-calendar-today-border-color);
+        border-radius: 2px;
+        border-style: dotted;
+    }
+
+    .cell.week-title > span {
+        width: 100%;
+        height: auto;
+        padding: 0;
+        border-radius: unset;
+        border: none;
+        margin: 0;
+        cursor: default;
+    }
+
+    .calendar-day.disabled {
+        color: var(--uniface-calendar-color-day-muted-text);
+    }
+
+
+    .calendar-day.selected > span:first-child {
+        color: var(--uniface-calendar-color-selected);
+        background-color: var(--uniface-calendar-color-selected-surface)
+    }
+
+    .calendar-day.disabled > span:first-child {
+        cursor: not-allowed;
+    }
+
+    .calendar-day.selected > span:first-child:hover {
+        background-color: unset;
+    }
+
+    .weekend {
+        color: var(--uniface-calendar-color-weekend-text);
+    }
+
+    .disabled > span:first-child:hover {
+        background-color: unset;
+    }
+</style>

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

@@ -1,34 +1,26 @@
 import { type UniDate } from "./dateUtils";
 import dayjs from "dayjs";
-import type { OnSelectHandler } from "../common/OnSelectHandler";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MonthlyCalendar: $$__sveltets_2_IsomorphicComponent<{
-    min: UniDate;
-    max: UniDate;
+import type { Snippet } from "svelte";
+import type { CalendarDay } from "./CalendarDay";
+interface Props {
+    min?: UniDate;
+    max?: UniDate;
     weekTitle: Array<string>;
     weekBegin?: number;
     year: number;
     month: number;
     date: number;
-    value: any;
+    value?: UniDate;
     cellWidth: number;
     cellHeight: number;
-    dailyContent: any;
-    onSelect: OnSelectHandler<dayjs.Dayjs>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MonthlyCalendar = InstanceType<typeof MonthlyCalendar>;
+    border?: boolean;
+    dailyContent?: Snippet<[{
+        year: number;
+        month: number;
+        day: CalendarDay;
+    }]>;
+    onselect?: (value: dayjs.Dayjs) => void;
+}
+declare const MonthlyCalendar: import("svelte").Component<Props, {}, "">;
+type MonthlyCalendar = ReturnType<typeof MonthlyCalendar>;
 export default MonthlyCalendar;

package/dist/base-calendar/YearPickupPanel.svelte

@@ -1,53 +1,125 @@
 <script lang="ts">
+    interface Props {
+        year: number;
+        maxYear?: number | null;
+        minYear?: number | null;
+        onClick?: (event: MouseEvent) => void;
+    }
 
+    let {
+        year = $bindable<number>(),
+        maxYear = null,
+        minYear = null,
+        onClick
+    }: Props = $props();
 
-    export let onClick: (event: MouseEvent) => void;
-    export let year: number;
-    export let maxYear: number;
-    export let minYear: number;
+    let offset = $state(6);
+    const years = 12;
 
-    let offset = 6;
-    let years = 12;
+    const isDisabled = (y: number) =>
+        (maxYear != null && y > maxYear) || (minYear != null && y < minYear);
 
     const handleYearClick = (idx: number) => (e: MouseEvent) => {
-        let y = year-offset+idx
+        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 isDisabled = (y: number) => (maxYear!=null && y > maxYear) || (minYear!=null && y < minYear);
-
+    };
 </script>
-<div class="uniface-year-pickup-panel" aria-hidden="true" on:click={onClick}>
+<div class="uniface-year-pickup-panel" aria-hidden="true" onclick={onClick}>
     <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" aria-hidden="true" on:click={showYears(-years)}></i>
+                    <i class="icon_google_keyboard_arrow_up" aria-hidden="true" onclick={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" on:click={handleYearClick(i)} aria-hidden="true" class:disabled={isDisabled(year-offset+i)} class:selected={year===year-offset+i}>
-                        <span>{year-offset+i}</span>
+                    <div class="year-block" onclick={handleYearClick(i)} aria-hidden="true"
+                         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" aria-hidden="true" on:click={showYears(years)}></i>
+                    <i class="icon_google_keyboard_arrow_down" aria-hidden="true" onclick={showYears(years)}></i>
                 </div>
             </div>
         </div>
     </div>
-</div>
+</div>
+
+<style>
+    .uniface-year-pickup-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        color: var(--uniface-calendar-color-title);
+        user-select: none;
+    }
+
+    .uniface-year-pickup-panel > div {
+        width: 100%;
+        position: relative;
+        top: 30px;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+
+    .uniface-year-pickup-panel > div > div {
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: 4px;
+        background-color: var(--uniface-calendar-color-surface);
+        border: 1px solid var(--uniface-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(--uniface-calendar-color-day-text);
+        cursor: pointer;
+        border-radius: 6px;
+        border: 1px solid transparent;
+    }
+
+    .year-block:hover {
+        background-color: var(--uniface-calendar-color-day-surface-hover);
+    }
+
+    .year-block.selected {
+        color: var(--uniface-calendar-color-selected);
+        background-color: var(--uniface-calendar-color-selected-surface);
+    }
+
+    .year-block.selected:hover {
+        background-color: unset;
+    }
+
+    .year-block.disabled {
+        color: var(--uniface-calendar-color-day-muted-text);
+        cursor: not-allowed;
+    }
+
+    .year-block.disabled:hover {
+        font-weight: unset;
+    }
+</style>

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

@@ -1,23 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const YearPickupPanel: $$__sveltets_2_IsomorphicComponent<{
-    onClick: (event: MouseEvent) => void;
+interface Props {
     year: number;
-    maxYear: number;
-    minYear: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type YearPickupPanel = InstanceType<typeof YearPickupPanel>;
+    maxYear?: number | null;
+    minYear?: 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

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

package/dist/composite/pagination_panel/PaginationPanel.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import Pagination from "../../navigation/pagination";
+    import OptionsSelect from "../../form/options_select";
+    import type {GenerateTotalInfo, OnPageChange, OnPageSizeChange} from "../../types";
+
+    interface Props {
+        pageCount?: number;
+        pageNo?: number;
+        type?: 'plain' | 'round' | 'circle';
+        page$style?: string;
+        big?: boolean;
+        rowsSet?: Array<number>;
+        total?: number;
+        generateInfo?: GenerateTotalInfo;
+        rowCount?: number;
+        rowCountLabel?: string;
+        align?: 'left' | 'right' | '';
+        onPageSizeChange?: OnPageSizeChange;
+        onchange?: OnPageChange;
+    }
+
+    let {
+        pageCount = 0,
+        pageNo = 1,
+        type = 'round',
+        page$style = '',
+        big = false,
+        rowsSet = [25, 50, 100],
+        total = 0,
+        generateInfo,
+        rowCount = $bindable(25),
+        rowCountLabel = 'Rows/Page',
+        align = '',
+        onPageSizeChange,
+        onchange,
+    }: Props = $props();
+
+    let pagesOptions = $derived(
+        (rowsSet ?? [25, 50, 100]).map(v => ({code: v, text: `${v}`}))
+    );
+    let totalText = $derived(
+        generateInfo
+            ? generateInfo(total, pageCount, pageNo, rowCount)
+            : `Total: <b>${total}</b> entities.`
+    );
+
+    const handleRowCountChange = () => {
+        onPageSizeChange?.(rowCount);
+    }
+</script>
+
+<div class="uniface-pagination-panel" class:left={align === 'left'} class:right={align === 'right'}>
+    <div class="page-options">
+        <OptionsSelect
+            compact={!big || type === 'plain'}
+            style="width: 80px"
+            variant="outlined"
+            mandatory
+            options={pagesOptions}
+            bind:value={rowCount}
+            onchange={handleRowCountChange}/>
+    </div>
+    <div>
+        <span style="margin-left: 8px">{rowCountLabel}</span></div>
+    <div class="pagination">
+        <Pagination {pageCount} {pageNo} {type} style={page$style} {big} {onchange}/>
+    </div>
+    <div class="pagination-info">
+        {@html totalText}
+    </div>
+</div>
+
+<style>
+    .uniface-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;
+    }
+
+    .uniface-pagination-panel.left .pagination {
+        flex: 0 0 auto;
+    }
+
+    .uniface-pagination-panel.right {
+        justify-content: right;
+    }
+
+    .uniface-pagination-panel.right .pagination {
+        flex: 0 0 auto;
+    }
+</style>

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

@@ -0,0 +1,19 @@
+import type { GenerateTotalInfo, OnPageChange, OnPageSizeChange } from "../../types";
+interface Props {
+    pageCount?: number;
+    pageNo?: number;
+    type?: 'plain' | 'round' | 'circle';
+    page$style?: string;
+    big?: boolean;
+    rowsSet?: Array<number>;
+    total?: number;
+    generateInfo?: GenerateTotalInfo;
+    rowCount?: number;
+    rowCountLabel?: string;
+    align?: 'left' | 'right' | '';
+    onPageSizeChange?: OnPageSizeChange;
+    onchange?: OnPageChange;
+}
+declare const PaginationPanel: import("svelte").Component<Props, {}, "rowCount">;
+type PaginationPanel = ReturnType<typeof PaginationPanel>;
+export default PaginationPanel;