@ticatec/uniface-element 0.1.9

package/dist/base-calendar/MonthPickupPanel.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+
+    export let onClick: (event: MouseEvent) => void;
+    export let months: Array<string>;
+    export let value: any;
+
+    const handleMonthClick = (m: number) => (e: MouseEvent) => {
+        if (m != value) {
+            value = m;
+            onClick?.(e)
+        } else {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+</script>
+<div class="uniface-month-pickup-panel" on:click={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)}>
+                    <span>{month}</span>
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,22 @@
+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;
+    months: Array<string>;
+    value: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MonthPickupPanel = InstanceType<typeof MonthPickupPanel>;
+export default MonthPickupPanel;

package/dist/base-calendar/MonthlyCalendar.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+
+    import dateUtils, {type UniDate} from "./dateUtils";
+    import DateContext from "./DateContext";
+    import dayjs from "dayjs";
+    import {onMount} 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));
+    }
+
+    const showCalendar = (y: number, m: number, d: number) => {
+        oldMin = min;
+        oldMax = max;
+        let 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 = [];
+        for (let i = 0; i < 42; i++) {
+            days.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");
+        }
+    }
+
+    let respondClick = true;
+
+    const handleDayClick = (ad:any) => (event: MouseEvent) => {
+        if (ad.disabled == false && respondClick) {
+            respondClick = false;
+            setTimeout(() => {
+                respondClick = true
+            }, 200);
+            selected = {year, month, date: 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">
+    {#each Array(7) as _, idx}
+        <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)}
+             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}>
+            <span>{day.d}</span>
+            {#if dailyContent != null}
+                <div>
+                    <svelte:component this={dailyContent} {year} {month} date={day}/>
+                </div>
+            {/if}
+        </div>
+    {/each}
+</div>

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

@@ -0,0 +1,34 @@
+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;
+    weekTitle: Array<string>;
+    weekBegin?: number;
+    year: number;
+    month: number;
+    date: number;
+    value: any;
+    cellWidth: number;
+    cellHeight: number;
+    dailyContent: any;
+    onSelect: OnSelectHandler<dayjs.Dayjs>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MonthlyCalendar = InstanceType<typeof MonthlyCalendar>;
+export default MonthlyCalendar;

package/dist/base-calendar/YearPickupPanel.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+
+
+    export let onClick: (event: MouseEvent) => void;
+    export let year: number;
+    export let maxYear: number;
+    export let minYear: number;
+
+    let offset = 6;
+    let years = 12;
+
+    const handleYearClick = (idx: number) => (e: MouseEvent) => {
+        let 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" on:click={onClick}>
+    <div>
+        <div>
+            <div style="text-align: center">
+                <div style="display: inline-block; width: 30px; height: 10px; padding: 6px 0">
+                    <i class="uniface-icon-chevrons-up" on:click={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)} 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="uniface-icon-chevrons-down" on:click={showYears(years)}></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,23 @@
+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;
+    year: number;
+    maxYear: number;
+    minYear: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type YearPickupPanel = InstanceType<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 | null;
+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,34 @@
+import dayjs 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) {
+        return '';
+    }
+    d = dayjs.isDayjs(d) ? d : dayjs(d);
+    return d.format(fmt);
+};
+const formatISODate = (d) => {
+    if (d == null) {
+        return '';
+    }
+    d = dayjs.isDayjs(d) ? d : dayjs(d);
+    return d.toISOString();
+};
+/**
+ * 把日期，字符串转换成dayjs格式
+ * @param d
+ */
+const toDayjs = (d) => {
+    return d == null ? null : dayjs.isDayjs(d) ? d : dayjs(d);
+};
+export default { today, formatDate, formatISODate, toDayjs };

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

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

package/dist/base-calendar/index.js

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

package/dist/box/Box.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+
+    export let style: string = "";
+    export let title: string = null as unknown as string;
+    export let round: boolean = false;
+
+    export let content$style: string = '';
+
+</script>
+
+<div {style} class="uniface-box" class:round>
+    {#if title || $$slots['header']}
+        <div class="box-title">
+            <slot name="header">
+                <div style="width: 100%; box-sizing: border-box; padding: 6px 12px; overflow: hidden; text-overflow: ellipsis">
+                    <span>{title}</span>
+                </div>
+            </slot>
+        </div>
+    {/if}
+    <div class="box-content" style={content$style}>
+        <slot></slot>
+    </div>
+</div>

package/dist/box/Box.svelte.d.ts

@@ -0,0 +1,34 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    style?: string;
+    title?: string;
+    round?: boolean;
+    content$style?: string;
+}, {
+    header: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+}, {}, string>;
+type Box = InstanceType<typeof Box>;
+export default Box;

package/dist/box/index.d.ts

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

package/dist/box/index.js

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

package/dist/button/Button.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+
+    import type {ButtonType} from "./ButtonType";
+
+    export let type: ButtonType = 'default'; // 默认按钮类型
+    export let label: string = '';
+    export let variant: 'plain' | 'round' | '' = '';
+    export let disabled: boolean = false;
+    export let style: string = '';
+    export let size: 'big' | 'medium' | 'mini' = 'medium';
+    export let onClick: (event: MouseEvent) => void;
+    export let icon: string | null = null;
+
+    let enableClick: boolean = true;
+
+    const handleClick = (e: MouseEvent) => {
+        if (!disabled && enableClick) {
+            enableClick = false;
+            onClick?.(e);
+            setTimeout(() => {
+                enableClick = true
+            }, 500);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+</script>
+
+<div {style} class="uniface-button common-button {variant} {size} {type}" aria-hidden="true" class:disabled
+     on:click={handleClick}>
+    {#if icon != null}
+        <i style="margin-right: 6px" class={icon}></i>
+    {/if}
+    <slot>
+        {#if label != null && label.length > 0}
+            <span>{label}</span>
+        {/if}
+    </slot>
+</div>
+

package/dist/button/Button.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { ButtonType } from "./ButtonType";
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    type?: ButtonType;
+    label?: string;
+    variant?: "plain" | "round" | "";
+    disabled?: boolean;
+    style?: string;
+    size?: "big" | "medium" | "mini";
+    onClick: (event: MouseEvent) => void;
+    icon?: string | null;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;

package/dist/button/ButtonType.d.ts

@@ -0,0 +1 @@
+export type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';

package/dist/button/ButtonType.js

@@ -0,0 +1 @@
+export {};

package/dist/button/IconButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+
+    export let type: 'default' | 'primary' | 'secondary' | 'third' | 'forth' = 'default';
+    export let disabled: boolean = false;
+    export let size: 'big' | 'medium' | 'mini' = 'medium';
+    export let style: string = '';
+    export let icon: string = '';
+    export let onClick: (event: MouseEvent) => void;
+
+
+    let enableClick: boolean = true;
+
+    const handleClick = (e: MouseEvent) => {
+        if (!disabled && enableClick) {
+            enableClick = false;
+            onClick?.(e);
+            setTimeout(() => {
+                enableClick = true
+            }, 500);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+</script>
+
+<div {style} class="uniface-button icon-button {size} {type}" aria-hidden="true" class:disabled on:click={handleClick}>
+    <slot>
+        <i class={icon}></i>
+    </slot>
+</div>

package/dist/button/IconButton.svelte.d.ts

@@ -0,0 +1,34 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const IconButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    type?: "default" | "primary" | "secondary" | "third" | "forth";
+    disabled?: boolean;
+    size?: "big" | "medium" | "mini";
+    style?: string;
+    icon?: string;
+    onClick: (event: MouseEvent) => void;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type IconButton = InstanceType<typeof IconButton>;
+export default IconButton;

package/dist/button/TextButton.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+
+    import type {MouseClickHandler} from "../common/MouseClickHandler";
+
+    export let disabled: boolean = false;
+    export let size: 'big' | 'medium' | 'mini' = 'medium';
+    export let label: string = '';
+    export let type: 'default' | 'primary' | 'secondary' | 'third' | 'forth' = 'default'; // 默认按钮类型
+    export let onClick: MouseClickHandler;
+    export let style: string = '';
+
+    let enableClick: boolean = true;
+
+    const handleClick = (e: MouseEvent) => {
+        if (!disabled && enableClick) {
+            enableClick = false;
+            onClick?.(e)
+            setTimeout(() => {
+                enableClick = true
+            }, 500);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+
+    }
+
+</script>
+<div class="uniface-button text-button {size} {type}" {style} class:disabled aria-hidden="true" on:click={handleClick}>
+    <slot>
+        {#if label != null && label.length > 0}
+            <span>{label}</span>
+        {/if}
+    </slot>
+</div>

package/dist/button/TextButton.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { MouseClickHandler } from "../common/MouseClickHandler";
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const TextButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    disabled?: boolean;
+    size?: "big" | "medium" | "mini";
+    label?: string;
+    type?: "default" | "primary" | "secondary" | "third" | "forth";
+    onClick: MouseClickHandler;
+    style?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type TextButton = InstanceType<typeof TextButton>;
+export default TextButton;

package/dist/button/index.d.ts

@@ -0,0 +1,8 @@
+import Button from "./Button.svelte";
+import IconButton from "./IconButton.svelte";
+import TextButton from "./TextButton.svelte";
+import type { ButtonType } from "./ButtonType";
+export default Button;
+export { IconButton };
+export { TextButton };
+export type { ButtonType };

package/dist/button/index.js

@@ -0,0 +1,6 @@
+import Button from "./Button.svelte";
+import IconButton from "./IconButton.svelte";
+import TextButton from "./TextButton.svelte";
+export default Button;
+export { IconButton };
+export { TextButton };