@rotki/ui-library 2.1.0 → 2.2.1

package/README.md

@@ -5,6 +5,7 @@ A Vue component library and design system for rotki
 [![npm (scoped)](https://img.shields.io/npm/v/@rotki/ui-library?style=flat-square)](https://www.npmjs.com/package/@rotki/ui-library)
 [![ci](https://github.com/rotki/ui-library/actions/workflows/ci.yml/badge.svg)](https://github.com/rotki/ui-library/actions/workflows/ci.yml)
 [![codecov](https://codecov.io/gh/rotki/ui-library/graph/badge.svg?token=9PIS7KMFC7)](https://codecov.io/gh/rotki/ui-library)
+[![license](https://img.shields.io/github/license/rotki/ui-library)](https://github.com/rotki/ui-library/blob/main/LICENSE.md)
 
 ## Getting started
 

package/dist/__test__/transition-group-stub.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentOptions } from 'vue';
+export declare const TransitionGroupStub: ComponentOptions;

package/dist/components/date-time-picker/RuiDateTimePicker.vue.d.ts

@@ -0,0 +1,79 @@
+import type { TimeAccuracy } from '../../consts/time-accuracy';
+type DateFormat = 'year-first' | 'month-first' | 'day-first';
+type DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';
+type ModelValueType<T extends DateTimeModelType> = T extends 'date' ? Date | undefined : T extends 'epoch-ms' ? number | undefined : T extends 'epoch' ? number | undefined : Date | number | undefined;
+export interface RuiDateTimePickerProps {
+    minDate?: Date | number;
+    maxDate?: Date | number;
+    format?: DateFormat;
+    type?: DateTimeModelType;
+    accuracy?: TimeAccuracy;
+    disabled?: boolean;
+    allowEmpty?: boolean;
+    readonly?: boolean;
+    dense?: boolean;
+    label?: string;
+    variant?: 'default' | 'filled' | 'outlined';
+    hint?: string;
+    errorMessages?: string | string[];
+    successMessages?: string | string[];
+    hideDetails?: boolean;
+}
+type __VLS_Props = RuiDateTimePickerProps;
+declare const props: Readonly<{}> & {
+    readonly disabled: boolean;
+    readonly readonly: boolean;
+    readonly allowEmpty: boolean;
+    readonly dense: boolean;
+    readonly type: DateTimeModelType;
+    readonly hideDetails: boolean;
+    readonly label: string;
+    readonly variant: "default" | "outlined" | "filled";
+    readonly hint: string | undefined;
+    readonly maxDate: number | Date | undefined;
+    readonly minDate: number | Date | undefined;
+    readonly format: DateFormat;
+    readonly accuracy: TimeAccuracy;
+    readonly errorMessages: string | string[];
+    readonly successMessages: string | string[];
+} & {
+    readonly readonly: boolean;
+    readonly disabled: boolean;
+    readonly hideDetails: boolean;
+    readonly dense: boolean;
+    readonly allowEmpty: boolean;
+};
+type __VLS_Slots = {
+    'menu-content': () => any;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: ModelValueType<typeof props.type>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | Date | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | Date | undefined) => any) | undefined;
+}>, {
+    readonly: boolean;
+    variant: "default" | "filled" | "outlined";
+    type: DateTimeModelType;
+    label: string;
+    disabled: boolean;
+    errorMessages: string | string[];
+    successMessages: string | string[];
+    hint: string;
+    hideDetails: boolean;
+    dense: boolean;
+    maxDate: Date | number;
+    minDate: Date | number;
+    allowEmpty: boolean;
+    accuracy: TimeAccuracy;
+    format: DateFormat;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/date-time-picker/RuiDateTimePickerMenu.vue.d.ts

@@ -0,0 +1,48 @@
+import type { TimeAccuracy } from '../../consts/time-accuracy';
+import { type TimePickerSelection } from '../../components/time-picker/RuiTimePicker.vue';
+type __VLS_Props = {
+    accuracy: TimeAccuracy;
+    maxDate?: Date | number;
+    minDate?: Date | number;
+};
+type __VLS_Slots = {
+    default: () => any;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'selectedDate': Date | undefined;
+    'selectedTime': Date | undefined;
+    'selectedHour': number | undefined;
+    'selectedMinute': number | undefined;
+    'selectedSecond': number | undefined;
+    'selectedMillisecond': number | undefined;
+    'timeSelection': TimePickerSelection;
+    'selectedTimezone': string | undefined;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "set-now": () => any;
+    "update:selectedDate": (value: Date | undefined) => any;
+    "update:selectedTime": (value: Date | undefined) => any;
+    "update:selectedHour": (value: number | undefined) => any;
+    "update:selectedMinute": (value: number | undefined) => any;
+    "update:selectedSecond": (value: number | undefined) => any;
+    "update:selectedMillisecond": (value: number | undefined) => any;
+    "update:timeSelection": (value: TimePickerSelection) => any;
+    "update:selectedTimezone": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSet-now"?: (() => any) | undefined;
+    "onUpdate:selectedDate"?: ((value: Date | undefined) => any) | undefined;
+    "onUpdate:selectedTime"?: ((value: Date | undefined) => any) | undefined;
+    "onUpdate:selectedHour"?: ((value: number | undefined) => any) | undefined;
+    "onUpdate:selectedMinute"?: ((value: number | undefined) => any) | undefined;
+    "onUpdate:selectedSecond"?: ((value: number | undefined) => any) | undefined;
+    "onUpdate:selectedMillisecond"?: ((value: number | undefined) => any) | undefined;
+    "onUpdate:timeSelection"?: ((value: TimePickerSelection) => any) | undefined;
+    "onUpdate:selectedTimezone"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/date-time-picker/timezones.d.ts

@@ -0,0 +1 @@
+export declare const timezones: string[];

package/dist/components/date-time-picker/types.d.ts

@@ -0,0 +1,5 @@
+import type { Ref } from 'vue';
+export declare const DATE_TIME_SEGMENT_TYPES: readonly ["DD", "MM", "YYYY", "hh", "mm", "ss", "SSS"];
+export type DateTimeSegmentType = typeof DATE_TIME_SEGMENT_TYPES[number];
+export declare function isDateTimeSegmentType(value: string): value is DateTimeSegmentType;
+export type SegmentData = Record<DateTimeSegmentType, Ref<number | undefined>>;

package/dist/components/date-time-picker/use-input-handler.d.ts

@@ -0,0 +1,9 @@
+import type { DateTimeSegmentType, SegmentData } from '../../components/date-time-picker/types';
+import type { TimeAccuracy } from '../../consts/time-accuracy';
+import type { Dayjs } from 'dayjs';
+import type { Ref } from 'vue';
+export declare function useInputHandler(data: SegmentData, currentValue: Ref<number | undefined>): {
+    getCurrent: (segment: DateTimeSegmentType) => number | undefined;
+    setValue: (segment: DateTimeSegmentType, value?: number) => void;
+    update: (date: Dayjs, accuracy: TimeAccuracy) => void;
+};

package/dist/components/date-time-picker/use-keyboard-handler.d.ts

@@ -0,0 +1,29 @@
+import type { Dayjs } from 'dayjs';
+import type { Ref } from 'vue';
+import { type DateTimeSegmentType } from '../../components/date-time-picker/types';
+interface Segment {
+    start: number;
+    end: number;
+    type: DateTimeSegmentType;
+}
+interface KeyboardHandlerOptions {
+    dateFormat: Ref<string>;
+    cursorPosition: Ref<number>;
+    currentValue: Ref<number | undefined>;
+    textInput: Ref<HTMLInputElement | undefined>;
+    setValue: (segment: DateTimeSegmentType, value?: number) => void;
+    getCurrent: (segment: DateTimeSegmentType) => number | undefined;
+    getDateTime: () => Dayjs;
+    disabled: boolean;
+    readonly: boolean;
+}
+export declare function useKeyboardHandler(options: KeyboardHandlerOptions): {
+    clear: (segmentType?: string) => void;
+    getCurrentSegment: (position?: number) => Segment | undefined;
+    handleClick: (event: MouseEvent) => void;
+    handleFocus: () => void;
+    handleInputSelection: (event: Event) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    setSegment: (segmentType: DateTimeSegmentType) => void;
+};
+export {};

package/dist/components/date-time-picker/utils.d.ts

@@ -0,0 +1,4 @@
+import { TimeAccuracy } from '../../consts/time-accuracy';
+export declare function guessTimezone(): string | undefined;
+export declare function includeSeconds(accuracy: TimeAccuracy): boolean;
+export declare function includeMilliseconds(accuracy: TimeAccuracy): boolean;

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ import RuiCard, { type Props as CardProps } from '../components/cards/RuiCard.vu
 import RuiCardHeader, { type Props as CardHeaderProps } from '../components/cards/RuiCardHeader.vue';
 import RuiChip, { type Props as ChipProps } from '../components/chips/RuiChip.vue';
 import RuiColorPicker, { type Props as ColorPickerProps } from '../components/color-picker/RuiColorPicker.vue';
+import RuiDateTimePicker, { type RuiDateTimePickerProps } from '../components/date-time-picker/RuiDateTimePicker.vue';
 import RuiDivider, { type Props as DividerProps } from '../components/divider/RuiDivider.vue';
 import RuiAutoComplete, { type AutoCompleteProps } from '../components/forms/auto-complete/RuiAutoComplete.vue';
 import RuiCheckbox, { type Props as CheckboxProps } from '../components/forms/checkbox/RuiCheckbox.vue';
@@ -42,4 +43,4 @@ import RuiTabItems, { type Props as TabItemsProps } from '../components/tabs/tab
 import RuiTab, { type Props as TabProps } from '../components/tabs/tab/RuiTab.vue';
 import RuiTabs, { type Props as TabsProps } from '../components/tabs/tabs/RuiTabs.vue';
 import RuiTimePicker, { type RuiTimePickerProps } from '../components/time-picker/RuiTimePicker.vue';
-export { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxProps, ChipProps, ColorPickerProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FooterStepperProps, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCheckbox, RuiChip, RuiColorPicker, RuiDataTable, RuiDialog, RuiDivider, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTimePickerProps, RuiTooltip, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TabItemsProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
+export { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxProps, ChipProps, ColorPickerProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FooterStepperProps, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCheckbox, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDateTimePickerProps, RuiDialog, RuiDivider, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTimePickerProps, RuiTooltip, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TabItemsProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };