@ticatec/uniface-element 0.3.23 → 5.0.0

package/dist/app_layout/RowsLayout.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import Split from "../general/split";
+
+    interface Props {
+        width?: string;
+        height?: string;
+        topHeight?: string | null;
+        bottomHeight?: string | null;
+        topMin?: string | null;
+        topMax?: string | null;
+        bottomMin?: string | null;
+        bottomMax?: string | null;
+        topResize?: boolean;
+        bottomResize?: boolean;
+        top?: Snippet;
+        children?: Snippet;
+        bottom?: Snippet;
+    }
+
+    let {
+        width = '100%',
+        height = '100%',
+        topHeight = null,
+        bottomHeight = null,
+        topMin = null,
+        topMax = null,
+        bottomMin = null,
+        bottomMax = null,
+        topResize = false,
+        bottomResize = false,
+        top,
+        children,
+        bottom
+    }: Props = $props();
+
+    let topPanel: HTMLElement;
+    let bottomPanel: HTMLElement;
+
+    let rowHeight = $derived(bottom ? '25%' : '50%');
+
+    const generateStyle = (attr: string, v: string | null): string => {
+        return v ? `${attr}: ${v};` : ''
+    }
+
+    let topStyle = $derived(`${generateStyle('min-height', topMin)} ${generateStyle('max-height', topMax)} ${generateStyle('height', topHeight ?? rowHeight)}`);
+    let bottomStyle = $derived(`${generateStyle('min-height', bottomMin)} ${generateStyle('max-height', bottomMax)} ${generateStyle('height', bottomHeight ?? rowHeight)}`);
+</script>
+
+<div class="uniface-rows-layout" style="width: {width}; height: {height}">
+    <div bind:this={topPanel} class="top-panel" style={topStyle}>
+        {#if top}
+            {@render top()}
+        {/if}
+    </div>
+    {#if topResize}
+        <Split bindingPanel={topPanel} direction="horizontal"/>
+    {/if}
+    <div class="center-panel">
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+    {#if bottom}
+        {#if bottomResize}
+            <Split bindingPanel={bottomPanel} reverse direction="horizontal"/>
+        {/if}
+        <div bind:this={bottomPanel} class="bottom-panel" style={bottomStyle}>
+            {@render bottom()}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .uniface-rows-layout {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+    }
+
+    .top-panel,
+    .bottom-panel {
+        flex: 0 0 auto;
+        overflow: auto;
+    }
+
+    .center-panel {
+        flex: 1 1 auto;
+        overflow: auto;
+    }
+</style>

package/dist/app_layout/RowsLayout.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    width?: string;
+    height?: string;
+    topHeight?: string | null;
+    bottomHeight?: string | null;
+    topMin?: string | null;
+    topMax?: string | null;
+    bottomMin?: string | null;
+    bottomMax?: string | null;
+    topResize?: boolean;
+    bottomResize?: boolean;
+    top?: Snippet;
+    children?: Snippet;
+    bottom?: Snippet;
+}
+declare const RowsLayout: import("svelte").Component<Props, {}, "">;
+type RowsLayout = ReturnType<typeof RowsLayout>;
+export default RowsLayout;

package/dist/app_layout/SidebarLayout.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import Split from "../general/split";
+
+    interface Props {
+        sidebarResize?: boolean;
+        headerHeight?: string;
+        sidebarWidth?: string;
+        sidebarMaxWidth?: string | null;
+        sidebarMinWidth?: string | null;
+        sidebar?: Snippet;
+        header?: Snippet;
+        children?: Snippet;
+    }
+
+    let {
+        sidebarResize = false,
+        headerHeight = "48px",
+        sidebarWidth = '300px',
+        sidebarMaxWidth = null,
+        sidebarMinWidth = null,
+        sidebar,
+        header,
+        children
+    }: Props = $props();
+
+    let sidebarPanel: HTMLElement;
+    let maxWidth = '';
+    let minWidth = '';
+
+    $effect(() => {
+        if (sidebarResize && sidebarMaxWidth) {
+            maxWidth = `max-width: ${sidebarMaxWidth};`;
+        } else {
+            maxWidth = '';
+        }
+    });
+
+    $effect(() => {
+        if (sidebarResize && sidebarMinWidth) {
+            minWidth = `min-width: ${sidebarMinWidth};`;
+        } else {
+            minWidth = '';
+        }
+    });
+</script>
+
+<div class="uniface-sidebar-layout">
+    {#if sidebar}
+        <div bind:this={sidebarPanel} class="sidebar" style="width: {sidebarWidth}; {maxWidth} {minWidth}">
+            {#if sidebar}
+                {@render sidebar()}
+            {/if}
+        </div>
+        {#if sidebarResize}
+            <Split direction="vertical" bindingPanel={sidebarPanel}/>
+        {/if}
+    {/if}
+    <div class="main-content">
+        {#if header}
+            <div class="header-area" style="height: {headerHeight}">
+                {@render header()}
+            </div>
+        {/if}
+        <div class="content-area">
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+    .uniface-sidebar-layout {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        gap: var(--uniface-spacing-2);
+    }
+
+    .sidebar {
+        height: 100%;
+        flex: 0 0 auto;
+        overflow: auto;
+        border-right: 1px solid var(--uniface-color-border-secondary);
+    }
+
+    .main-content {
+        height: 100%;
+        flex: 1 1 auto;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .header-area {
+        width: 100%;
+        flex: 0 0 auto;
+        overflow: auto;
+    }
+
+    .content-area {
+        width: 100%;
+        flex: 1 1 auto;
+        overflow: auto;
+    }
+</style>

package/dist/app_layout/SidebarLayout.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    sidebarResize?: boolean;
+    headerHeight?: string;
+    sidebarWidth?: string;
+    sidebarMaxWidth?: string | null;
+    sidebarMinWidth?: string | null;
+    sidebar?: Snippet;
+    header?: Snippet;
+    children?: Snippet;
+}
+declare const SidebarLayout: import("svelte").Component<Props, {}, "">;
+type SidebarLayout = ReturnType<typeof SidebarLayout>;
+export default SidebarLayout;

package/dist/app_layout/index.d.ts

@@ -0,0 +1,6 @@
+import SidebarLayout from "./SidebarLayout.svelte";
+import HeaderLayout from "./HeaderLayout.svelte";
+import ClassicLayout from "./ClassicLayout.svelte";
+import ColumnsLayout from "./ColumnsLayout.svelte";
+import RowsLayout from "./RowsLayout.svelte";
+export { SidebarLayout, HeaderLayout, ClassicLayout, ColumnsLayout, RowsLayout };

package/dist/app_layout/index.js

@@ -0,0 +1,6 @@
+import SidebarLayout from "./SidebarLayout.svelte";
+import HeaderLayout from "./HeaderLayout.svelte";
+import ClassicLayout from "./ClassicLayout.svelte";
+import ColumnsLayout from "./ColumnsLayout.svelte";
+import RowsLayout from "./RowsLayout.svelte";
+export { SidebarLayout, HeaderLayout, ClassicLayout, ColumnsLayout, RowsLayout };

package/dist/base-calendar/CalendarBase.svelte

@@ -3,115 +3,169 @@
     import dateUtils, {type UniDate} from "./dateUtils";
     import DateContext from "./DateContext";
     import dayjs from "dayjs";
-    import {onMount} from "svelte";
     import MonthPickupPanel from "./MonthPickupPanel.svelte";
     import YearPickupPanel from "./YearPickupPanel.svelte";
-    import type {OnSelectHandler} from "../common/OnSelectHandler";
-
-    const dateCtx: DateContext = DateContext.getInstance();
-    export let value: UniDate;
-    export let min: UniDate = null;
-    export let max: UniDate = null;
-
-    export let style: string = '';
-    export let cellWidth: number = 32;
-    export let cellHeight: number = 32;
-    export let border: boolean = false;
-    export let dailyContent: any = null;
-    export let onSelect:OnSelectHandler<dayjs.Dayjs> = null as unknown as OnSelectHandler<dayjs.Dayjs>;
-
-    let dv: dayjs.Dayjs | null;
-    let year: number;
-    let month: number;
-    let date: number;
-    let minDate: any;
-    let maxDate: any;
-    let showMonths: boolean = false;
-    let showYears: boolean = false;
-    let oldValue: any;
-
-    let weekTitle: Array<string> = dateCtx.weekTitleAbbr;
-    let monthTitle: Array<string> = dateCtx.months;
-    let weekBegin: number = dateCtx.weekBegin;
-    const onSelectDate = (date: dayjs.Dayjs) => {
-        value = date;
-        onSelect(value);
-    }
 
-    const pickupMonth = () => {
-        showMonths = true;
-        showYears = false;
+    interface Props {
+        value?: UniDate;
+        min?: UniDate;
+        max?: UniDate;
+        style?: string;
+        cellWidth?: number;
+        cellHeight?: number;
+        border?: boolean;
+        onselect?: (value: dayjs.Dayjs) => void;
     }
 
-    const adjustMonth = (n: number) => (e: Event) => {
-        month = month + n;
-        if (month > 11) {
-            year = year + 1;
-            month = 0;
-        } else if (month < 0) {
-            year = year - 1;
-            month = 11;
-        }
-    }
+    let {
+        value,
+        min,
+        max,
+        style,
+        cellWidth = 32,
+        cellHeight = 32,
+        border = false,
+        onselect
+    }: Props = $props();
 
-    const pickupYear = () => {
-        showMonths = false;
-        showYears = true;
-    }
+    const dateCtx = DateContext.getInstance();
 
-    const extractYMD = (v: dayjs.Dayjs | null) => {
+    let dv = $derived(dateUtils.toDayjs(value));
+    let minDate = $derived(dateUtils.toDayjs(min));
+    let maxDate = $derived(dateUtils.toDayjs(max));
+
+    let today = dayjs();
+    let year = $state<number>(today.year());
+    let month = $state<number>(today.month());
+    let date = $state<number>(today.date());
+
+    let showMonths = $state(false);
+    let showYears = $state(false);
+
+    // Sync display cursor (year/month/date) when external `value` changes.
+    // First run also seeds from `value` if provided, otherwise stays at today.
+    $effect(() => {
+        const v = dv;
         if (v != null) {
             year = v.year();
             month = v.month();
             date = v.date();
         }
-    }
-
-    onMount(() => {
-        if (value == null) {
-            extractYMD(dayjs())
-        }
-    })
+    });
 
-    $: dv = dateUtils.toDayjs(value);
+    const onSelectDate = (d: dayjs.Dayjs) => {
+        onselect?.(d);
+    };
 
-    $: if (oldValue != dv) {
-        oldValue = dv;
-        extractYMD(dv)
-    }
+    const pickupMonth = () => {
+        showMonths = true;
+        showYears = false;
+    };
 
-    $: {
-        minDate = dateUtils.toDayjs(min);
-        maxDate = dateUtils.toDayjs(max);
-    }
+    const pickupYear = () => {
+        showMonths = false;
+        showYears = true;
+    };
 
+    const adjustMonth = (n: number) => () => {
+        let m = month + n;
+        let y = year;
+        if (m > 11) { y += 1; m = 0; }
+        else if (m < 0) { y -= 1; m = 11; }
+        month = m;
+        year = y;
+    };
 </script>
-<div class="uniface-calendar" class:border style="{style}; width: {cellWidth*7}px">
+<div class="uniface-calendar" class:border style="{style}; width: {cellWidth * 7}px">
     <div>
         <div class="uniface-title-bar">
-            <div class="action-icon" on:click={adjustMonth(-1)} aria-hidden="true">
+            <div class="action-icon" onclick={adjustMonth(-1)} aria-hidden="true">
                 <i class="icon_google_keyboard_arrow_left"></i>
             </div>
             <div style="flex: 1 1 auto; text-align: center">
-                <span class="title-text" on:click={pickupYear} aria-hidden="true">{year}</span>
-                <span class="title-text" on:click={pickupMonth} aria-hidden="true">{month + 1}</span>
+                <span class="title-text" onclick={pickupYear} aria-hidden="true">{year}</span>
+                <span class="title-text" onclick={pickupMonth} aria-hidden="true">{month + 1}</span>
             </div>
-            <div class="action-icon" on:click={adjustMonth(1)} aria-hidden="true">
+            <div class="action-icon" onclick={adjustMonth(1)} aria-hidden="true">
                 <i class="icon_google_keyboard_arrow_right"></i>
             </div>
         </div>
         <div style="flex: 1 1 auto; overflow: hidden">
-            <MonthlyCalendar weekBegin={weekBegin??dateCtx.weekBegin} weekTitle={weekTitle??dateCtx.weekTitleAbbr}
-                             {cellWidth} {cellHeight} {dailyContent} min={minDate} max={maxDate}
-                             value={dv} {year} {month} {date} onSelect={onSelectDate}/>
+            <MonthlyCalendar
+                weekBegin={dateCtx.weekBegin}
+                weekTitle={dateCtx.weekTitleAbbr}
+                {cellWidth} {cellHeight} {border}
+                min={minDate} max={maxDate}
+                value={dv} {year} {month} {date}
+                onselect={onSelectDate}/>
             {#if showMonths}
-                <MonthPickupPanel bind:value={month} months={monthTitle??dateCtx.monthsAbbr??dateCtx.months}
-                                  onClick={()=>{showMonths=false}}/>
+                <MonthPickupPanel bind:value={month} months={dateCtx.months}
+                                  onClick={() => { showMonths = false; }}/>
             {:else if showYears}
-                <YearPickupPanel bind:year maxYear={maxDate==null ? null : maxDate.year()}
-                                 minYear={minDate==null ? null : minDate.year()}
-                                 onClick={()=>{showYears=false}}/>
+                <YearPickupPanel bind:year
+                                 maxYear={maxDate == null ? null : maxDate.year()}
+                                 minYear={minDate == null ? null : minDate.year()}
+                                 onClick={() => { showYears = false; }}/>
             {/if}
         </div>
     </div>
-</div>
+</div>
+
+<style>
+    .uniface-calendar {
+        display: inline-block;
+        padding: 0;
+        box-sizing: border-box;
+        color: var(--uniface-calendar-color-day-text);
+    }
+
+    .uniface-calendar > div {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .uniface-title-bar {
+        width: 100%;
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row;
+        font-size: 1.25em;
+        padding: 0.3em 0;
+        font-weight: 600;
+        align-items: center;
+        border-bottom: 1px solid var(--uniface-color-border-secondary);
+        user-select: none;
+    }
+
+    .title-text {
+        cursor: pointer;
+        display: inline-block;
+        min-width: 20px;
+    }
+
+    .action-icon {
+        width: 1.5em;
+        height: 1.5em;
+        margin: 0 8px;
+        box-sizing: border-box;
+        border-radius: 50%;
+        border: 1px solid transparent;
+        text-align: center;
+    }
+
+    .action-icon i {
+        color: var(--uniface-calendar-color-action);
+        font-size: 1.2em;
+        cursor: pointer;
+    }
+
+    .action-icon i:active {
+        color: var(--uniface-calendar-color-title);
+    }
+
+    .action-icon:hover i {
+        color: var(--uniface-primary-hover-color, #42A5F5);
+    }
+</style>

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

@@ -1,31 +1,15 @@
 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 CalendarBase: $$__sveltets_2_IsomorphicComponent<{
-    value: UniDate;
+interface Props {
+    value?: UniDate;
     min?: UniDate;
     max?: UniDate;
     style?: string;
     cellWidth?: number;
     cellHeight?: number;
     border?: boolean;
-    dailyContent?: any;
-    onSelect?: OnSelectHandler<dayjs.Dayjs>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CalendarBase = InstanceType<typeof CalendarBase>;
+    onselect?: (value: dayjs.Dayjs) => void;
+}
+declare const CalendarBase: import("svelte").Component<Props, {}, "">;
+type CalendarBase = ReturnType<typeof CalendarBase>;
 export default CalendarBase;

package/dist/base-calendar/DateContext.js

@@ -18,12 +18,15 @@ export default class DateContext {
     }
     get monthsAbbr() {
         return i18nRes.calendar.monthsAbbr;
+        ;
     }
     get weekTitle() {
         return i18nRes.calendar.weekTitle;
+        ;
     }
     get weekTitleAbbr() {
         return i18nRes.calendar.weekTitleAbbr;
+        ;
     }
     set weekBegin(value) {
         if (value < 0 || value > 6) {

package/dist/base-calendar/MonthPickupPanel.svelte

@@ -1,29 +1,88 @@
 <script lang="ts">
+    interface Props {
+        value: number;
+        months: Array<string>;
+        onClick?: (event: MouseEvent) => void;
+    }
 
-    export let onClick: (event: MouseEvent) => void;
-    export let months: Array<string>;
-    export let value: any;
+    let {
+        value = $bindable<number>(),
+        months,
+        onClick
+    }: Props = $props();
 
     const handleMonthClick = (m: number) => (e: MouseEvent) => {
-        if (m != value) {
+        if (m !== value) {
             value = m;
-            onClick?.(e)
+            onClick?.(e);
         } else {
             e.stopPropagation();
             e.preventDefault();
         }
-    }
-
+    };
 </script>
-<div class="uniface-month-pickup-panel" on:click={onClick} aria-hidden="true">
+<div class="uniface-month-pickup-panel" onclick={onClick} aria-hidden="true">
     <div>
         <div style="display: grid; grid-template-columns: auto auto auto; overflow: hidden; width: 100%">
             {#each months as month, idx}
-                <div class="month-block" class:selected={idx===value} aria-hidden="true"
-                     on:click={handleMonthClick(idx)}>
+                <div class="month-block" class:selected={idx === value} aria-hidden="true"
+                     onclick={handleMonthClick(idx)}>
                     <span>{month}</span>
                 </div>
             {/each}
         </div>
     </div>
-</div>
+</div>
+
+<style>
+    .uniface-month-pickup-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        user-select: none;
+        color: var(--uniface-calendar-color-title);
+    }
+
+    .uniface-month-pickup-panel > div {
+        width: 100%;
+        position: relative;
+        top: 30px;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+
+    .uniface-month-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;
+    }
+
+    .month-block {
+        margin: 8px 4px;
+        padding: 2px 1px;
+        text-align: center;
+        box-sizing: border-box;
+        line-height: 1.5em;
+        cursor: pointer;
+        border-radius: 6px;
+        border: 1px solid transparent;
+    }
+
+    .month-block:hover {
+        background-color: var(--uniface-calendar-color-day-surface-hover);
+    }
+
+    .month-block.selected {
+        color: var(--uniface-calendar-color-selected);
+        background-color: var(--uniface-calendar-color-selected-surface);
+    }
+
+    .month-block.selected:hover {
+        background-color: unset;
+    }
+</style>

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

@@ -1,22 +1,8 @@
-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 MonthPickupPanel: $$__sveltets_2_IsomorphicComponent<{
-    onClick: (event: MouseEvent) => void;
+interface Props {
+    value: number;
     months: Array<string>;
-    value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MonthPickupPanel = InstanceType<typeof MonthPickupPanel>;
+    onClick?: (event: MouseEvent) => void;
+}
+declare const MonthPickupPanel: import("svelte").Component<Props, {}, "value">;
+type MonthPickupPanel = ReturnType<typeof MonthPickupPanel>;
 export default MonthPickupPanel;