@aminnausin/cedar-ui 0.0.9 → 0.0.11

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { FunctionalComponent } from 'vue';
 import { MethodOptions } from 'vue';
 import { ModelRef } from 'vue';
 import { Ref } from 'vue';
+import { _RouterLinkI } from 'vue-router';
 import { ShallowRef } from 'vue';
 import { UnwrapRef } from 'vue';
 
@@ -17,12 +18,24 @@ export declare interface AccordionItem {
     content: string;
 }
 
+export declare type AnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});
+
 export declare interface BreadCrumbItem {
     name: string;
     url: string;
     icon?: Component;
 }
 
+export declare type ButtonComponent = 'button' | 'a' | _RouterLinkI;
+
+export declare interface ButtonProps {
+    type?: ButtonType;
+}
+
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+
+export declare type ButtonVariant = 'default';
+
 declare function close_2(): void;
 
 export declare function cn(...inputs: any[]): string;
@@ -33,14 +46,6 @@ export declare const CompareStrategies: {
     number: (a: any, b: any) => number;
 };
 
-export declare interface ContextMenu {
-    disabled?: boolean;
-    style?: string;
-    itemStyle?: string;
-    items?: ContextMenuItem[];
-    scrollContainer?: 'window' | 'body';
-}
-
 export declare interface ContextMenuItem {
     text?: string;
     shortcut?: string;
@@ -53,9 +58,38 @@ export declare interface ContextMenuItem {
     disabled?: boolean;
     hidden?: boolean;
     icon?: Component;
+    target?: AnchorTarget;
+}
+
+export declare interface ContextMenuOptions {
+    disabled?: boolean;
+    style?: string;
+    itemStyle?: string;
+    items?: ContextMenuItem[];
+    scrollContainer?: 'window' | 'body';
 }
 
-declare interface DatePickerProps {
+export declare function createDrawerCore(): {
+    isOpen: Readonly< Ref<boolean, boolean>>;
+    isAnimating: Readonly< Ref<boolean, boolean>>;
+    animationTime: Ref<number, number>;
+    props: ShallowRef<Partial<DrawerProps>, Partial<DrawerProps>>;
+    component: ShallowRef<null, null> | ShallowRef<ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>> | ShallowRef<FunctionalComponent<any, {}, any, {}>, FunctionalComponent<any, {}, any, {}>> | ShallowRef<{
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    }, {
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    }>;
+    open: (drawerComponent: Component, drawerProps?: DrawerProps) => void;
+    close: (reason: DrawerCloseReason) => void;
+};
+
+export declare interface DatePickerProps {
     model?: ModelRef<string | undefined>;
     defaultDate?: string;
     useDefaultDate?: boolean;
@@ -63,6 +97,32 @@ declare interface DatePickerProps {
 
 export declare const DEFAULT_GAP = 16;
 
+export declare const drawer: {
+    open: (comp: Component, props?: DrawerProps) => void;
+    close: (reason: DrawerCloseReason) => void;
+};
+
+export declare type DrawerCloseReason = 'user' | 'escape' | 'programmatic';
+
+export declare interface DrawerControllerProps {
+    teleportTarget?: string;
+}
+
+export declare interface DrawerProps {
+    title?: string;
+    description?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    direction?: SwipeDirection;
+    rootClass?: string;
+    closeOnEsc?: boolean;
+    closeOnBackdrop?: boolean;
+    preventClose?: boolean;
+    payload?: unknown;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+
 export declare interface DropdownMenuItem {
     name: string;
     url?: string;
@@ -85,6 +145,8 @@ export declare interface ExternalToast {
 
 export declare type FieldType = 'text' | 'textArea' | 'number' | 'date' | 'url' | 'multi' | 'select' | 'password';
 
+export declare type FormButtonVariant = ButtonVariant | 'submit' | 'reset' | 'auth';
+
 export declare interface FormField {
     name: string;
     text?: string;
@@ -115,6 +177,18 @@ export declare interface FormHooks {
     onFinish?: () => any;
 }
 
+export declare interface FormLabelledTextInputProps extends TextInputProps, LabelProps {
+    required?: boolean;
+}
+
+export declare interface FormLabelProps extends LabelProps {
+    for: string;
+}
+
+export declare interface FormNumberFieldProps extends NumberFieldProps {
+    field: FormField;
+}
+
 export declare interface FormState<T> {
     fields: FormFields<T>;
     errors: {
@@ -133,8 +207,42 @@ export declare interface FormState<T> {
     }) => void;
 }
 
+export declare interface FormTextAreaProps {
+    field: FormField;
+    maxHeight?: number;
+}
+
+export declare interface HoverCardProps extends RelativeHoverCardProps {
+    contentTitle?: string;
+    margin?: number;
+    paddingLeft?: number;
+    scrollContainer?: 'body' | 'window';
+    disabled?: boolean;
+}
+
+export declare type IconButtonVariant = ButtonVariant | 'ghost' | 'transparent';
+
+export declare interface InputProps {
+    id?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    class?: string;
+}
+
+export declare interface InputShellProps extends InputProps {
+    clampText?: boolean;
+}
+
 export declare function isInputLikeElement(element: EventTarget | null, key: string): boolean;
 
+export declare interface LabelledTextInputProps extends TextInputProps, LabelProps {
+}
+
+export declare interface LabelProps {
+    text?: string;
+    subtext?: string;
+}
+
 export declare interface Message<T extends Component = Component> {
     id: string;
     title: string;
@@ -152,12 +260,35 @@ export declare interface Message<T extends Component = Component> {
 
 export declare const MOBILE_VIEWPORT_OFFSET = "16px";
 
-declare interface ModalProps {
+export declare interface ModalProps {
     title?: string;
     submitText?: string;
     animationTime?: number;
 }
 
+export declare interface MultiSelectItem {
+    id: number;
+    name: string;
+    relationships?: any;
+    disabled?: boolean;
+}
+
+export declare interface MultiSelectProps {
+    class?: string;
+    rootClass?: string;
+    placeholder?: string;
+    defaultItems?: MultiSelectItem[];
+    options?: MultiSelectItem[];
+    max?: number;
+    disabled?: boolean;
+    title?: string;
+    fieldName?: string;
+}
+
+export declare interface NumberFieldProps {
+    increment?: number;
+}
+
 declare class Observer {
     subscribers: Array<(toast: Message | ToastToDismiss) => void>;
     toasts: Array<Message>;
@@ -191,12 +322,38 @@ export declare interface PopoverItem {
     selectedIcon?: Component;
 }
 
+export declare interface RelativeHoverCardProps {
+    content?: string;
+    positionClasses?: string;
+    hoverCardDelay?: number;
+    hoverCardLeaveDelay?: number;
+    iconHidden?: boolean;
+    icon?: Component;
+}
+
 export declare const SCALE_STEP = 0.06;
 
 export declare interface SelectItem {
-    id: number;
-    name: string;
-    relationships?: any;
+    title: string;
+    value: any;
+    key?: any;
+    disabled?: boolean;
+}
+
+export declare interface SelectProps {
+    name?: string;
+    class?: string;
+    rootClass?: string;
+    placeholder?: string;
+    defaultItem?: number | null;
+    options?: SelectItem[];
+    disabled?: boolean;
+    title?: string;
+    prefix?: string;
+    menuMargin?: {
+        top: string;
+        bottom: string;
+    };
 }
 
 export declare type SortDir = 1 | -1;
@@ -212,8 +369,37 @@ export declare function sortObjectNew<T>(keys: SortKey<T>[], direction?: SortDir
 
 export declare const SWIPE_THRESHOLD = 45;
 
+export declare type SwipeAxis = 'x' | 'y';
+
+export declare interface SwipeConstraint {
+    minDelta: number;
+    maxDelta: number;
+}
+
 export declare type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
 
+export declare interface SwipeThreshold {
+    px?: number;
+    percent?: number;
+}
+
+export declare interface TablePaginationButtonProps {
+    currentPage?: number;
+    pageNumber?: number;
+    text?: string;
+    underline?: boolean;
+    sticky?: boolean;
+    disabled?: boolean;
+}
+
+export declare interface TablePaginationProps {
+    listLength: number;
+    currentPage: number;
+    itemsPerPage: number;
+    useIcons: boolean;
+    maxVisiblePages?: number;
+}
+
 export declare interface TableProps<T> {
     useToolbar?: boolean;
     usePagination?: boolean;
@@ -263,6 +449,13 @@ export declare interface TabsTriggerProps {
     value: string;
 }
 
+export declare type TextButtonVariant = ButtonVariant | 'ghost' | 'transparent' | 'form';
+
+export declare interface TextInputProps extends InputProps {
+    minlength?: number;
+    maxlength?: number;
+}
+
 export declare const toast: typeof toastFunction & {
     add: (message: string, options?: ToastOptions) => string;
     success: (message: string, options?: ToastOptions) => string;
@@ -274,6 +467,8 @@ export declare const toast: typeof toastFunction & {
 
 export declare const TOAST_LIFE = 3000;
 
+export declare const TOAST_SWIPE_THRESHOLD = 45;
+
 export declare const TOAST_WIDTH = 0;
 
 export declare interface ToastControllerProps {
@@ -346,7 +541,7 @@ export declare function useDatePicker(props: DatePickerProps, datePickerInput: R
     datePickerCalendar: Ref<HTMLElement | null, HTMLElement | null>;
     datePickerOpen: Ref<boolean, boolean>;
     datePickerValue: Ref<string, string>;
-    datePickerPanel: Ref<"Y" | "M" | "D", "Y" | "M" | "D">;
+    datePickerPanel: Ref<"D" | "M" | "Y", "D" | "M" | "Y">;
     datePickerFormat: Ref<"F d, Y" | "d M, Y" | "Y M d" | "MM-DD-YYYY" | "DD-MM-YYYY" | "YYYY-MM-DD" | "D d M, Y", "F d, Y" | "d M, Y" | "Y M d" | "MM-DD-YYYY" | "DD-MM-YYYY" | "YYYY-MM-DD" | "D d M, Y">;
     datePickerMonth: Ref<number, number>;
     datePickerMonthVerbose: ComputedRef<string>;
@@ -357,7 +552,7 @@ export declare function useDatePicker(props: DatePickerProps, datePickerInput: R
     datePickerBlankDaysInMonth: Ref<number[], number[]>;
     datePickerMonthNames: string[];
     datePickerDays: string[];
-    datePickerPosition: Ref<"bottom" | "top", "bottom" | "top">;
+    datePickerPosition: Ref<"top" | "bottom", "top" | "bottom">;
     toggleDatePicker: (state?: boolean) => void;
     datePickerValueClicked: (value: number) => void;
     datePickerPrevious: () => void;
@@ -367,6 +562,46 @@ export declare function useDatePicker(props: DatePickerProps, datePickerInput: R
     showDatePickerPanel: (panel?: "Y" | "M" | "D") => void;
 };
 
+export declare function useDrawer(): {
+    isOpen: Readonly< Ref<boolean, boolean>>;
+    isAnimating: Readonly< Ref<boolean, boolean>>;
+    animationTime: Ref<number, number>;
+    props: ShallowRef<Partial<DrawerProps>, Partial<DrawerProps>>;
+    component: ShallowRef<null, null> | ShallowRef<ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>> | ShallowRef<FunctionalComponent<any, {}, any, {}>, FunctionalComponent<any, {}, any, {}>> | ShallowRef<{
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    }, {
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    }>;
+    open: (drawerComponent: Component, drawerProps?: DrawerProps) => void;
+    close: (reason: DrawerCloseReason) => void;
+};
+
+export declare function useDrawerCore(): {
+    isOpen: Readonly< Ref<boolean, boolean>>;
+    isAnimating: Readonly< Ref<boolean, boolean>>;
+    animationTime: Ref<number, number>;
+    props: ShallowRef<Partial<DrawerProps>, Partial<DrawerProps>>;
+    component: ShallowRef<null, null> | ShallowRef<ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>> | ShallowRef<FunctionalComponent<any, {}, any, {}>, FunctionalComponent<any, {}, any, {}>> | ShallowRef<{
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    }, {
+        new (...args: any[]): any;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    }>;
+    open: (drawerComponent: Component, drawerProps?: DrawerProps) => void;
+    close: (reason: DrawerCloseReason) => void;
+};
+
 export declare function useForm<T extends Record<string, any>>(fields: FormFields<T>): {
     fields: UnwrapRef<FormFields<T>>;
     errors: {
@@ -385,16 +620,6 @@ export declare function useForm<T extends Record<string, any>>(fields: FormField
     }) => void;
 };
 
-export declare function useModal(props: ModalProps): {
-    modalOpen: boolean;
-    isAnimating: boolean;
-    animationTime: number;
-    toggleModal: (state?: boolean | null) => void;
-    setTitle: (title: string) => void;
-    title: string;
-    submitText?: string | undefined;
-};
-
 export declare function useModalCore(): {
     isOpen: Ref<boolean, boolean>;
     isAnimating: Ref<boolean, boolean>;
@@ -463,7 +688,7 @@ export declare function useSelect(options: any, refs: any): {
     selectPositionUpdate: () => void;
 };
 
-export declare function useSwipeHandler({ directions, threshold, onSwipeOut }: UseSwipeHandlerOptions): {
+export declare function useSwipeHandler({ directions, swipeThreshold, velocityThreshold, getElementSize, onSwipeOut }: UseSwipeHandlerOptions): {
     offset: Ref<{
         x: number;
         y: number;
@@ -478,11 +703,15 @@ export declare function useSwipeHandler({ directions, threshold, onSwipeOut }: U
     onPointerDown: (e: PointerEvent) => void;
     onPointerMove: (e: PointerEvent) => void;
     onPointerUp: () => void;
+    onPointerCancel: () => void;
+    isTapGesture: () => boolean;
 };
 
-declare interface UseSwipeHandlerOptions {
+export declare interface UseSwipeHandlerOptions {
     directions: Ref<SwipeDirection[]>;
-    threshold: number;
+    swipeThreshold: SwipeThreshold;
+    velocityThreshold?: number;
+    getElementSize?: (axis: SwipeAxis) => number;
     onSwipeOut: () => void;
 }
 
@@ -501,13 +730,15 @@ export declare function useToastTimer({ duration, isPaused, onTimeout, immediate
     cancel: () => void;
 };
 
-declare interface UseToastTimerOptions {
+export declare interface UseToastTimerOptions {
     duration: number;
     isPaused: () => boolean;
     onTimeout: () => void;
     immediate?: boolean;
 }
 
+export declare const VELOCITY_THRESHOLD = 0.11;
+
 export declare const VIEWPORT_OFFSET = "24px";
 
 export declare const VISIBLE_TOASTS_AMOUNT = 3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aminnausin/cedar-ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "license": "MIT",
   "repository": {
     "type": "git",