@propelinc/citrus-ui 0.6.0 → 1.0.0

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

@@ -0,0 +1,42 @@
+import { PropType, DefineComponent, ExtractPropTypes, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { FaPropType, FaIcon } from '../types/font-awesome';
+import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** By default, this is a boolean that determines if the pill is selected or
+    not. If in a pill group, this is a string that identifies this pill. */
+    value: {
+        type: PropType<boolean | string | undefined>;
+        default: undefined;
+    };
+    /** The icon to display. */
+    icon: {
+        type: FaPropType;
+        default: undefined;
+    };
+}>, {
+    ariaChecked: ComputedRef<"true" | "false" | undefined>;
+    isSelected: ComputedRef<string | boolean | undefined>;
+    onClick: () => void;
+    role: ComputedRef<string | undefined>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("input" | "click")[], "input" | "click", PublicProps, Readonly< ExtractPropTypes<{
+    /** By default, this is a boolean that determines if the pill is selected or
+    not. If in a pill group, this is a string that identifies this pill. */
+    value: {
+        type: PropType<boolean | string | undefined>;
+        default: undefined;
+    };
+    /** The icon to display. */
+    icon: {
+        type: FaPropType;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string | boolean | undefined;
+    icon: FaIcon;
+}, {}, {
+    FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,70 @@
+import { PropType, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComputedRef, ComponentProvideOptions } from 'vue';
+import { FaIcon, FaPropType } from '../types/font-awesome';
+import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+interface PillConfig {
+    label: string;
+    value: string;
+    icon?: FaIcon;
+}
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Specifies which pill is selected. */
+    value: {
+        type: PropType<string>;
+        default: () => string;
+    };
+    /** A list of pills to display. This is overwritten by the default slot. */
+    options: {
+        type: PropType<PillConfig[]>;
+        default: () => never[];
+    };
+}>, void, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "input"[], "input", PublicProps, Readonly< ExtractPropTypes<{
+    /** Specifies which pill is selected. */
+    value: {
+        type: PropType<string>;
+        default: () => string;
+    };
+    /** A list of pills to display. This is overwritten by the default slot. */
+    options: {
+        type: PropType<PillConfig[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    options: PillConfig[];
+}, {}, {
+    CPill: DefineComponent<ExtractPropTypes<{
+        value: {
+            type: PropType<boolean | string | undefined>;
+            default: undefined;
+        };
+        icon: {
+            type: FaPropType;
+            default: undefined;
+        };
+    }>, {
+        ariaChecked: ComputedRef<"true" | "false" | undefined>;
+        isSelected: ComputedRef<string | boolean | undefined>;
+        onClick: () => void;
+        role: ComputedRef<string | undefined>;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("input" | "click")[], "input" | "click", PublicProps, Readonly< ExtractPropTypes<{
+        value: {
+            type: PropType<boolean | string | undefined>;
+            default: undefined;
+        };
+        icon: {
+            type: FaPropType;
+            default: undefined;
+        };
+    }>> & Readonly<{
+        onInput?: ((...args: any[]) => any) | undefined;
+        onClick?: ((...args: any[]) => any) | undefined;
+    }>, {
+        value: string | boolean | undefined;
+        icon: FaIcon;
+    }, {}, {
+        FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>;
+    }, {}, string, ComponentProvideOptions, true, {}, any>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,21 @@
+import { SlPopup } from '@shoelace-style/shoelace';
+import { DefineComponent, ExtractPropTypes, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    popup: Ref<SlPopup | null, SlPopup | null>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mouseleave" | "outside-click")[], "mouseleave" | "outside-click", PublicProps, Readonly< ExtractPropTypes<{
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onMouseleave?: ((...args: any[]) => any) | undefined;
+    "onOutside-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,61 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Customizes screen reader only text alternative, should be translated */
+    accessibleText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Selector for testing */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Renders an indefinite loading state */
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Rounds the progress bar */
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** The current progress from 0 to 100 */
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Customizes screen reader only text alternative, should be translated */
+    accessibleText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Selector for testing */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Renders an indefinite loading state */
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Rounds the progress bar */
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** The current progress from 0 to 100 */
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    value: string | number;
+    dataTest: string;
+    accessibleText: string;
+    indeterminate: boolean;
+    rounded: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,103 @@
+import { PropType, DefineComponent, ExtractPropTypes, ComputedRef, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { default as Colors, HexColor, isValidColor, CssColor } from '../colors/colors';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Customizes screen reader only text alternative, should be translated */
+    accessibleText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Selector for testing */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** The current progress, from 0 to valueMax */
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Total progress */
+    valueMax: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** The outer diameter of the progress ring, in px */
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** The width of the progress ring, in px */
+    trackWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sets the indicator color */
+    color: {
+        type: PropType<HexColor | keyof typeof Colors>;
+        default: string;
+        validator: typeof isValidColor;
+    };
+    /** Sets the track color underneath the indicator */
+    trackColor: {
+        type: PropType<HexColor | keyof typeof Colors>;
+        default: string;
+        validator: typeof isValidColor;
+    };
+}>, {
+    percentage: ComputedRef<number>;
+    cssColor: Ref< CssColor | undefined, CssColor | undefined>;
+    trackCssColor: Ref< CssColor | undefined, CssColor | undefined>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Customizes screen reader only text alternative, should be translated */
+    accessibleText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Selector for testing */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** The current progress, from 0 to valueMax */
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Total progress */
+    valueMax: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** The outer diameter of the progress ring, in px */
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** The width of the progress ring, in px */
+    trackWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** Sets the indicator color */
+    color: {
+        type: PropType<HexColor | keyof typeof Colors>;
+        default: string;
+        validator: typeof isValidColor;
+    };
+    /** Sets the track color underneath the indicator */
+    trackColor: {
+        type: PropType<HexColor | keyof typeof Colors>;
+        default: string;
+        validator: typeof isValidColor;
+    };
+}>> & Readonly<{}>, {
+    value: string | number;
+    size: string | number;
+    dataTest: string;
+    accessibleText: string;
+    color: string;
+    trackColor: string;
+    valueMax: string | number;
+    trackWidth: string | number;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,73 @@
+import { PropType, DefineComponent, ExtractPropTypes, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { RadioState } from '../services/injections/radio';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    value: {
+        type: PropType<any>;
+        required: true;
+    };
+    id: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    label: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideRadio: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    idWithFallback: Ref<string, string>;
+    parentState: Ref<{
+        value: unknown;
+        invalid: boolean;
+        name: string;
+        update: (value: unknown) => void;
+        register: (value: unknown) => void;
+        unregister: (value: unknown) => void;
+    }, RadioState | {
+        value: unknown;
+        invalid: boolean;
+        name: string;
+        update: (value: unknown) => void;
+        register: (value: unknown) => void;
+        unregister: (value: unknown) => void;
+    }>;
+    onChange: (event: Event) => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("change" | "focus" | "blur")[], "change" | "focus" | "blur", PublicProps, Readonly< ExtractPropTypes<{
+    value: {
+        type: PropType<any>;
+        required: true;
+    };
+    id: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    label: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideRadio: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string | null;
+    id: string | null;
+    dataTest: string;
+    hideRadio: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,123 @@
+import { PropType, DefineComponent, ExtractPropTypes, Ref, ComponentOptionsMixin, PublicProps, ComputedRef, ComponentProvideOptions } from 'vue';
+import { Rules } from '../composables/validations';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    value: {
+        type: PropType<any>;
+        default: null;
+    };
+    id: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    column: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mandatory: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rules: {
+        type: PropType<Rules<string>>;
+        default: () => never[];
+    };
+    hideDetails: {
+        type: PropType<boolean | "auto">;
+        default: boolean;
+    };
+}>, {
+    idWithFallback: Ref<string, string>;
+    isValidationValid: Ref<boolean | null, boolean | null>;
+    radioGroup: Ref<HTMLElement | null, HTMLElement | null>;
+    validationMessage: Ref<string | null, string | null>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("change" | "input")[], "change" | "input", PublicProps, Readonly< ExtractPropTypes<{
+    value: {
+        type: PropType<any>;
+        default: null;
+    };
+    id: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    column: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mandatory: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rules: {
+        type: PropType<Rules<string>>;
+        default: () => never[];
+    };
+    hideDetails: {
+        type: PropType<boolean | "auto">;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string | null;
+    id: string | null;
+    value: any;
+    dataTest: string;
+    rules: Rules<string>;
+    hideDetails: boolean | "auto";
+    column: boolean;
+    mandatory: boolean;
+}, {}, {
+    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/CRebrand.vue.d.ts

@@ -0,0 +1,28 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+/**
+ * NOTE(slanden): This component is no longer used. We are keeping it around for now
+ * because it is used in the CMS, but other than applying the w-100 class, it has
+ * no effect. We will remove this component in a future PR.
+ */
+type __VLS_Props = {
+    fullWidth?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fullWidth: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,67 @@
+import { PropType, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Applies the align-items css property.
+     * Available options are: start, center, end and stretch. */
+    align: {
+        type: PropType<"center" | "start" | "end" | "stretch">;
+        default: null;
+    };
+    /** Applies the align-content css property.
+     * Available options are: start, center, end, and stretch. */
+    alignContent: {
+        type: PropType<"center" | "start" | "end" | "stretch">;
+        default: null;
+    };
+    /**  Reduces the gutter between c-cols. */
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Removes the gutter between c-cols. */
+    noGutters: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Applies the justify-content css property.
+     * Available options are: start, center, end, space-between and space-around. */
+    justify: {
+        type: PropType<"center" | "start" | "end" | "space-between" | "space-around">;
+        default: null;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Applies the align-items css property.
+     * Available options are: start, center, end and stretch. */
+    align: {
+        type: PropType<"center" | "start" | "end" | "stretch">;
+        default: null;
+    };
+    /** Applies the align-content css property.
+     * Available options are: start, center, end, and stretch. */
+    alignContent: {
+        type: PropType<"center" | "start" | "end" | "stretch">;
+        default: null;
+    };
+    /**  Reduces the gutter between c-cols. */
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Removes the gutter between c-cols. */
+    noGutters: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Applies the justify-content css property.
+     * Available options are: start, center, end, space-between and space-around. */
+    justify: {
+        type: PropType<"center" | "start" | "end" | "space-between" | "space-around">;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    align: "center" | "end" | "start" | "stretch";
+    alignContent: "center" | "end" | "start" | "stretch";
+    dense: boolean;
+    noGutters: boolean;
+    justify: "center" | "end" | "start" | "space-between" | "space-around";
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,18 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,28 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** The title text to display. */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** The tag used for the title text. */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, void, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** The title text to display. */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** The tag used for the title text. */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    tag: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;