@propelinc/citrus-ui 0.6.0 → 1.0.0

package/dist/components/CSelect.vue.d.ts

@@ -0,0 +1,293 @@
+import { PropType, DefineComponent, ExtractPropTypes, Ref, ComponentOptionsMixin, PublicProps, ComputedRef, ComponentProvideOptions } from 'vue';
+import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
+import { HexColor, isValidColor, CssColor } from '../colors/colors';
+import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** The select's label, both visual and screenreader-only */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Overrides label for screenreader-only */
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Set the select's placeholder text */
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Assigns the select input's id */
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** List of options like `{ label: 'Yes', value: 'yes' }` */
+    items: {
+        type: PropType<{
+            label: string;
+            value: string;
+            disabled?: boolean;
+        }[]>;
+        default: () => never[];
+    };
+    /** Controls whether the select is disabled */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Controls the value of the select */
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Prefix for test selectors */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Hides the label and instead labels the field with `aria-label` */
+    hideLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Hides the validation message area. Defaults to `false` (show message area even
+     * when valid), so validations transition in gracefully.
+     *
+     * If set to 'auto', the validation message area will only display if there is a message.
+     */
+    hideDetails: {
+        type: PropType<boolean | "auto">;
+        default: boolean;
+    };
+    /** Controls whether the select is loading */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * An array of functions that either return either true / false or a string
+     * containing an error message. The component passes the input value as an
+     * argument. The input field will enter an error state if a function does
+     * not return true.
+     * */
+    rules: {
+        type: PropType<((value: string) => string | boolean)[]>;
+        default: () => never[];
+    };
+    /**  If true, the select will be required */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    inputValue: Ref<string, string>;
+    validationListeners: Record<string, (event: Event) => void>;
+    validationMessage: Ref<string | null, string | null>;
+    isValidationValid: Ref<boolean | null, boolean | null>;
+    select: Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
+    faChevronDown: IconDefinition;
+    onInput: (event: Event) => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("input" | "focus" | "blur" | "keydown")[], "input" | "focus" | "blur" | "keydown", PublicProps, Readonly< ExtractPropTypes<{
+    /** The select's label, both visual and screenreader-only */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Overrides label for screenreader-only */
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Set the select's placeholder text */
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Assigns the select input's id */
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** List of options like `{ label: 'Yes', value: 'yes' }` */
+    items: {
+        type: PropType<{
+            label: string;
+            value: string;
+            disabled?: boolean;
+        }[]>;
+        default: () => never[];
+    };
+    /** Controls whether the select is disabled */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Controls the value of the select */
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Prefix for test selectors */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Hides the label and instead labels the field with `aria-label` */
+    hideLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Hides the validation message area. Defaults to `false` (show message area even
+     * when valid), so validations transition in gracefully.
+     *
+     * If set to 'auto', the validation message area will only display if there is a message.
+     */
+    hideDetails: {
+        type: PropType<boolean | "auto">;
+        default: boolean;
+    };
+    /** Controls whether the select is loading */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * An array of functions that either return either true / false or a string
+     * containing an error message. The component passes the input value as an
+     * argument. The input field will enter an error state if a function does
+     * not return true.
+     * */
+    rules: {
+        type: PropType<((value: string) => string | boolean)[]>;
+        default: () => never[];
+    };
+    /**  If true, the select will be required */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
+    onKeydown?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string;
+    id: string;
+    value: string;
+    dataTest: string;
+    placeholder: string;
+    loading: boolean;
+    disabled: boolean;
+    ariaLabel: string;
+    rules: ((value: string) => string | boolean)[];
+    required: boolean;
+    hideDetails: boolean | "auto";
+    hideLabel: boolean;
+    items: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+}, {}, {
+    CLoader: DefineComponent<ExtractPropTypes<{
+        accessibleText: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        color: {
+            type: PropType< HexColor | string>;
+            default: string;
+            validator: isValidColor;
+        };
+        small: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: PropType<"sm" | "lg" | "md">;
+            default: string;
+        };
+        trackColor: {
+            type: PropType< HexColor | string>;
+            default: string;
+            validator: isValidColor;
+        };
+    }>, {
+        computedSize: ComputedRef<"sm" | "lg" | "md">;
+        indicatorColorCode: Ref< CssColor | undefined, CssColor | undefined>;
+        SIZE_TO_FONT_SIZE: Record<"sm" | "lg" | "md", `${number}px`>;
+        SIZE_TO_TRACK_WIDTH: Record<"sm" | "lg" | "md", `${number}px`>;
+        trackColorCode: Ref< CssColor | undefined, CssColor | undefined>;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+        accessibleText: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        color: {
+            type: PropType< HexColor | string>;
+            default: string;
+            validator: isValidColor;
+        };
+        small: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: PropType<"sm" | "lg" | "md">;
+            default: string;
+        };
+        trackColor: {
+            type: PropType< HexColor | string>;
+            default: string;
+            validator: isValidColor;
+        };
+    }>> & Readonly<{}>, {
+        small: boolean;
+        size: "sm" | "lg" | "md";
+        accessibleText: string;
+        color: string;
+        trackColor: string;
+    }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+    CValidationMessage: DefineComponent<ExtractPropTypes<{
+        dataTest: {
+            type: StringConstructor;
+            default: string;
+        };
+        validationMessage: {
+            type: PropType<string | null>;
+            default: null;
+        };
+        hide: {
+            type: PropType<boolean | "auto">;
+            default: boolean;
+        };
+    }>, {
+        isHidden: ComputedRef<boolean>;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+        dataTest: {
+            type: StringConstructor;
+            default: string;
+        };
+        validationMessage: {
+            type: PropType<string | null>;
+            default: null;
+        };
+        hide: {
+            type: PropType<boolean | "auto">;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        dataTest: string;
+        validationMessage: string | null;
+        hide: boolean | "auto";
+    }, {}, {
+        CFadeTransition: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+    }, {}, string, ComponentProvideOptions, true, {}, any>;
+    FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CSkeleton.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/components/CSkeletonLoaderCard.vue.d.ts

@@ -0,0 +1,21 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Controls the height of the skeleton loader card */
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: false;
+        default: number;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Controls the height of the skeleton loader card */
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: false;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    height: string | number;
+}, {}, {
+    CSkeleton: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CSkeletonLoaderCircle.vue.d.ts

@@ -0,0 +1,5 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    CSkeleton: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CSkeletonLoaderText.vue.d.ts

@@ -0,0 +1,44 @@
+import { PropType, DefineComponent, ExtractPropTypes, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type SkeletonLoaderType = 'balance' | 'body' | 'caption' | 'eyebrow' | 'headline' | 'large-headline' | 'overline' | 'statement' | 'subheadline' | 'wallet-caption' | 'x-large-headline';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Applies the align-items css property. */
+    align: {
+        type: PropType<"center" | "start" | "end">;
+        default: string;
+    };
+    /** Controls how many rows of loading text are shown */
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Controls the appearance of the loading text */
+    type: {
+        type: PropType<SkeletonLoaderType>;
+        default: string;
+    };
+}>, {
+    lineTypeClass: ComputedRef<string>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Applies the align-items css property. */
+    align: {
+        type: PropType<"center" | "start" | "end">;
+        default: string;
+    };
+    /** Controls how many rows of loading text are shown */
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Controls the appearance of the loading text */
+    type: {
+        type: PropType<SkeletonLoaderType>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    type: SkeletonLoaderType;
+    rows: number;
+    align: "center" | "end" | "start";
+}, {}, {
+    CSkeleton: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CSlideFadeTransition.vue.d.ts

@@ -0,0 +1,58 @@
+import { PropType, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type Direction = 'to-left' | 'to-right' | 'to-top' | 'to-bottom';
+/**
+ * This component can be used to create a slide-fade transition for children.
+ *
+ * FIXME: Vue 3 Conversion - Remove this comment when Vue 3 conversion is complete.
+ * NOTE: For Vue 2 usage: if you are conditionally rendering children, be sure to add unique
+ * keys to each child!
+ *
+ * Example:
+ * ```vue
+ * <CSlideFadeTransition>
+ *   <div v-if="condition" :key="if">This will slide in</div>
+ *   <div v-else :key="else">This will slide out</div>
+ * </CSlideFadeTransition>
+ * ```
+ */
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /**
+     * The amount of pixels to slide the elements in or out
+     * @default 20
+     */
+    amount: {
+        type: NumberConstructor;
+        default: number;
+        validator(value: number): boolean;
+    };
+    /**
+     * Changes the direction of the slide fade transition
+     * @default 'to-left'
+     */
+    direction: {
+        type: PropType<Direction>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /**
+     * The amount of pixels to slide the elements in or out
+     * @default 20
+     */
+    amount: {
+        type: NumberConstructor;
+        default: number;
+        validator(value: number): boolean;
+    };
+    /**
+     * Changes the direction of the slide fade transition
+     * @default 'to-left'
+     */
+    direction: {
+        type: PropType<Direction>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    amount: number;
+    direction: Direction;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;