@propelinc/citrus-ui 0.6.0 → 1.0.0

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

@@ -0,0 +1,231 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { PropType, DefineComponent, ExtractPropTypes, Ref, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { RouteLocationRaw, RouteLocationAsRelativeGeneric, RouteLocationAsPathGeneric } from 'vue-router';
+import { ButtonIconPosition, ButtonLevel, ButtonShoelaceVariant, ButtonSize, ButtonVariant } from './types';
+import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+/**
+ * Shoelace has a set of variants that don't match the variant names we would like to use.
+ * This mapping is used to translate the variant names to the correct Shoelace variant names
+ * and apply it to the underlying Shoelace button component.
+ */
+export declare const VARIANT_TO_SHOELACE_VARIANT: Record<ButtonVariant, ButtonShoelaceVariant>;
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Controls whether button appears as full-width */
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Controls whether button is disabled */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Designates the button as an anchor and applies the href attribute */
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Chooses an icon to render on the left side of the button */
+    icon: {
+        type: PropType<string | string[] | IconDefinition>;
+        default: undefined;
+    };
+    /** Chooses whether to place the icon before or after the button text */
+    iconPosition: {
+        type: PropType<ButtonIconPosition>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * @deprecated use `size` prop instead
+     * Controls whether button uses the large variant
+     */
+    large: {
+        type: BooleanConstructor;
+        default: boolean;
+        deprecated: boolean;
+    };
+    /** Controls the level of the button */
+    level: {
+        type: PropType<ButtonLevel>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /** Controls whether button is loading */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @deprecated use `variant` prop instead
+     * Controls whether button uses the secondary variant */
+    secondary: {
+        type: BooleanConstructor;
+        default: boolean;
+        deprecated: boolean;
+    };
+    /**
+     * Controls the size of the button
+     * @default 'medium'
+     */
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /** Designates the target attribute. Only use with the href prop. */
+    target: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * @deprecated use `variant` prop instead
+     * Controls whether button uses the tertiary variant
+     */
+    tertiary: {
+        type: BooleanConstructor;
+        default: boolean;
+        deprecated: boolean;
+    };
+    /** Controls whether button functions as a router-link */
+    to: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    /**
+     * Controls the styling of the button
+     * @default 'primary'
+     */
+    variant: {
+        type: PropType<ButtonVariant>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>, {
+    animationListeners: Record<string, () => void>;
+    button: Ref<HTMLElement | null, HTMLElement | null>;
+    computedSize: ComputedRef<ButtonSize>;
+    computedVariant: ComputedRef<ButtonVariant>;
+    dataBlock: ComputedRef<true | undefined>;
+    dataLoading: ComputedRef<true | undefined>;
+    hasIcon: ComputedRef<boolean>;
+    injectedOrPropBlock: ComputedRef<boolean>;
+    injectedOrPropsLarge: ComputedRef<boolean>;
+    onClick: (event: MouseEvent) => void;
+    routerDestinationOrHref: ComputedRef<string | undefined>;
+    shoelaceVariant: ComputedRef<ButtonShoelaceVariant>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("focus" | "blur" | "click")[], "focus" | "blur" | "click", PublicProps, Readonly< ExtractPropTypes<{
+    /** Controls whether button appears as full-width */
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Controls whether button is disabled */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Designates the button as an anchor and applies the href attribute */
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Chooses an icon to render on the left side of the button */
+    icon: {
+        type: PropType<string | string[] | IconDefinition>;
+        default: undefined;
+    };
+    /** Chooses whether to place the icon before or after the button text */
+    iconPosition: {
+        type: PropType<ButtonIconPosition>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * @deprecated use `size` prop instead
+     * Controls whether button uses the large variant
+     */
+    large: {
+        type: BooleanConstructor;
+        default: boolean;
+        deprecated: boolean;
+    };
+    /** Controls the level of the button */
+    level: {
+        type: PropType<ButtonLevel>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /** Controls whether button is loading */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @deprecated use `variant` prop instead
+     * Controls whether button uses the secondary variant */
+    secondary: {
+        type: BooleanConstructor;
+        default: boolean;
+        deprecated: boolean;
+    };
+    /**
+     * Controls the size of the button
+     * @default 'medium'
+     */
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /** Designates the target attribute. Only use with the href prop. */
+    target: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * @deprecated use `variant` prop instead
+     * Controls whether button uses the tertiary variant
+     */
+    tertiary: {
+        type: BooleanConstructor;
+        default: boolean;
+        deprecated: boolean;
+    };
+    /** Controls whether button functions as a router-link */
+    to: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    /**
+     * Controls the styling of the button
+     * @default 'primary'
+     */
+    variant: {
+        type: PropType<ButtonVariant>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & Readonly<{
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
+    size: ButtonSize;
+    icon: string | string[] | IconDefinition;
+    target: string;
+    tertiary: boolean;
+    loading: boolean;
+    block: boolean;
+    large: boolean;
+    disabled: boolean;
+    secondary: boolean;
+    href: string;
+    iconPosition: ButtonIconPosition;
+    level: ButtonLevel;
+    variant: ButtonVariant;
+}, {}, {
+    FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CButton/types.d.ts

@@ -0,0 +1,5 @@
+export type ButtonSize = 'medium' | 'large';
+export type ButtonLevel = 'normal' | 'danger';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonShoelaceVariant = 'default' | 'primary' | 'text';
+export type ButtonIconPosition = 'prefix' | 'suffix';

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

@@ -0,0 +1,24 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    large: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}>, void, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    large: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    large: boolean;
+    tag: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,107 @@
+import { PropType, DefineComponent, ExtractPropTypes, ComputedRef, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { RouteLocationRaw, RouteLocationAsRelativeGeneric, RouteLocationAsPathGeneric } from 'vue-router';
+import { CssColor } from '../colors/colors';
+export interface InternalCardConfig {
+    attrs: Record<string, unknown>;
+    element: string;
+    isLink: boolean;
+}
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Sets the border color of the card */
+    borderColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Removes the border of the card */
+    borderless: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sets the background color of the entire card */
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Navigates externally on click */
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Stretches the card vertically to fill the height of the parent container */
+    stretch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Toggles a squared-off card style intended to fill the width of the page */
+    tile: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sets the title of the card */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Navigates within the app on click */
+    to: {
+        type: PropType<RouteLocationRaw | undefined>;
+        default: undefined;
+    };
+}>, {
+    config: ComputedRef<InternalCardConfig>;
+    backgroundCssColor: Ref< CssColor | undefined, CssColor | undefined>;
+    borderCssColor: Ref< CssColor | undefined, CssColor | undefined>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Sets the border color of the card */
+    borderColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Removes the border of the card */
+    borderless: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sets the background color of the entire card */
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Navigates externally on click */
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Stretches the card vertically to fill the height of the parent container */
+    stretch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Toggles a squared-off card style intended to fill the width of the page */
+    tile: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Sets the title of the card */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Navigates within the app on click */
+    to: {
+        type: PropType<RouteLocationRaw | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
+    color: string;
+    href: string;
+    borderColor: string;
+    borderless: boolean;
+    stretch: boolean;
+    tile: boolean;
+}, {}, {
+    CCardHeader: DefineComponent<{}, void, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,26 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    CButtonStack: DefineComponent<ExtractPropTypes<{
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        large: {
+            type: BooleanConstructor;
+            default: null;
+        };
+    }>, void, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        large: {
+            type: BooleanConstructor;
+            default: null;
+        };
+    }>> & Readonly<{}>, {
+        large: boolean;
+        tag: string;
+    }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

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

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

@@ -0,0 +1,17 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Removes the padding from the section */
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Removes the padding from the section */
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    fluid: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,145 @@
+import { PropType, DefineComponent, ExtractPropTypes, Ref, ComponentOptionsMixin, PublicProps, ComputedRef, ComponentProvideOptions } from 'vue';
+import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
+import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Assigns the checkbox's id */
+    id: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    /** The label text for the checkbox. */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Whether the checkbox is checked */
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A custom data-test selector */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 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: boolean) => string | boolean)[]>;
+        default: () => never[];
+    };
+    /** Hides the validation message area. */
+    hideDetails: {
+        type: PropType<boolean | "auto">;
+        default: boolean;
+    };
+    /** Controls the appearance of the checkbox. */
+    variant: {
+        type: PropType<"contained" | "minimal">;
+        default: string;
+    };
+}>, {
+    checkbox: Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    faCheck: IconDefinition;
+    idWithFallback: Ref<string, string>;
+    internalValue: Ref<boolean, boolean>;
+    onChange: (event: Event) => void;
+    validationMessage: Ref<string | null, string | null>;
+    isValidationValid: Ref<boolean | null, boolean | null>;
+    validationListeners: Record<string, (event: Event) => void>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("change" | "focus" | "blur")[], "change" | "focus" | "blur", PublicProps, Readonly< ExtractPropTypes<{
+    /** Assigns the checkbox's id */
+    id: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    /** The label text for the checkbox. */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Whether the checkbox is checked */
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A custom data-test selector */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 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: boolean) => string | boolean)[]>;
+        default: () => never[];
+    };
+    /** Hides the validation message area. */
+    hideDetails: {
+        type: PropType<boolean | "auto">;
+        default: boolean;
+    };
+    /** Controls the appearance of the checkbox. */
+    variant: {
+        type: PropType<"contained" | "minimal">;
+        default: string;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string;
+    id: string | null;
+    value: boolean;
+    dataTest: string;
+    variant: "contained" | "minimal";
+    rules: ((value: boolean) => string | boolean)[];
+    hideDetails: boolean | "auto";
+}, {}, {
+    FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>;
+    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>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,21 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Sets the default number of columns the component extends.
+     * Available options are: 1 -> 12 and auto. */
+    cols: {
+        type: StringConstructor;
+        default: null;
+        validator: (value: string) => boolean;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Sets the default number of columns the component extends.
+     * Available options are: 1 -> 12 and auto. */
+    cols: {
+        type: StringConstructor;
+        default: null;
+        validator: (value: string) => boolean;
+    };
+}>> & Readonly<{}>, {
+    cols: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,17 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Displays dividers vertically. */
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Displays dividers vertically. */
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    vertical: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;