@speckle/ui-components 2.23.4 → 2.23.6

package/README.md

@@ -6,7 +6,7 @@ Speckle UI component library built with Vue 3 and relying on the Speckle Tailwin
 
 1. Make sure you have `@speckle/tailwind-theme` installed and set up with Tailwind
 1. Install `@speckle/ui-components`
-1. In your tailwind config import `tailwindContentEntry` from `@speckle/ui-components/tailwind-configure` and invoke it in the `contents` field to ensure PurgeCSS is configured correctly. It requires the CJS `require` object as its only parameter. If it isn't available (in an ESM environment), you can use node's `createRequire()`.
+1. In your tailwind config import `tailwindContentEntries` from `@speckle/ui-components/tailwind-configure` and invoke it in the `contents` field to ensure PurgeCSS is configured correctly. It requires the CJS `require` object as its only parameter. If it isn't available (in an ESM environment), you can use node's `createRequire()`.
 1. Import `@speckle/ui-components/style.css` in your app. If `exports` map isn't supported you can also import from `@speckle/ui-components/dist/style.css`
 
 ### Usage in Nuxt v3

package/dist/components/form/TextArea.vue.d.ts

@@ -1,5 +1,7 @@
 import type { RuleExpression } from 'vee-validate';
+import type { LabelPosition } from '../../composables/form/input';
 import type { InputColor } from '../../composables/form/textInput';
+type InputSize = 'sm' | 'base' | 'lg' | 'xl';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Unique ID for the input (must be unique page-wide)
@@ -22,10 +24,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     showOptional?: boolean | undefined;
     color?: InputColor | undefined;
     textareaClasses?: string | undefined;
+    size?: InputSize | undefined;
+    labelPosition?: LabelPosition | undefined;
+    wrapperClasses?: string | undefined;
 }>, {
     useLabelInErrors: boolean;
     modelValue: string;
     color: string;
+    labelPosition: string;
+    wrapperClasses: string;
 }>, {
     focus: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -61,10 +68,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     showOptional?: boolean | undefined;
     color?: InputColor | undefined;
     textareaClasses?: string | undefined;
+    size?: InputSize | undefined;
+    labelPosition?: LabelPosition | undefined;
+    wrapperClasses?: string | undefined;
 }>, {
     useLabelInErrors: boolean;
     modelValue: string;
     color: string;
+    labelPosition: string;
+    wrapperClasses: string;
 }>>> & {
     onChange?: ((val: {
         event?: Event | undefined;
@@ -78,8 +90,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onClear?: (() => any) | undefined;
 }, {
     modelValue: string;
+    labelPosition: LabelPosition;
     color: InputColor;
     useLabelInErrors: boolean;
+    wrapperClasses: string;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/form/TextInput.vue.d.ts

@@ -404,11 +404,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     placeholder: Optional<string>;
     fullWidth: boolean;
     showOptional: boolean;
+    wrapperClasses: string;
     readOnly: boolean;
     customIcon: Optional<PropAnyComponent>;
     inputClasses: string;
     loading: boolean;
-    wrapperClasses: string;
     rightIcon: Optional<PropAnyComponent>;
     rightIconTitle: string;
     tooltipText: string;

package/dist/components/form/select/Multi.vue.d.ts

@@ -0,0 +1,191 @@
+import type { PropType } from 'vue';
+import type { MaybeAsync, Optional } from '@speckle/shared';
+import type { RuleExpression } from 'vee-validate';
+import type { LabelPosition } from '../../../composables/form/input';
+declare const _default: <SingleItem extends string | number | Record<string, unknown>>(__VLS_props: {
+    size?: Optional<"sm" | "base" | "lg" | "xl">;
+    readonly label: string;
+    modelValue?: ([{
+        type: PropType<SingleItem | SingleItem[] | undefined>;
+        default: undefined;
+    }] extends [import("vue").Prop<infer V, infer D>] ? unknown extends V ? import("@vue/shared").IfAny<V, V, D> : V : {
+        type: PropType<SingleItem | SingleItem[] | undefined>;
+        default: undefined;
+    }) | undefined;
+    "onUpdate:modelValue"?: ((v: SingleItem | SingleItem[] | undefined) => any) | undefined;
+    readonly name: string;
+    disabled?: Optional<boolean>;
+    rules?: RuleExpression<SingleItem | SingleItem[] | undefined>;
+    validateOnMount?: boolean | undefined;
+    showRequired?: boolean | undefined;
+    labelPosition?: LabelPosition | undefined;
+    validateOnValueUpdate?: boolean | undefined;
+    search?: boolean | undefined;
+    help?: Optional<string>;
+    showLabel?: boolean | undefined;
+    useLabelInErrors?: boolean | undefined;
+    readonly placeholder?: string | undefined;
+    showOptional?: boolean | undefined;
+    tooltipText?: string | undefined;
+    items?: SingleItem[] | undefined;
+    filterPredicate?: Optional<(item: SingleItem, searchString: string) => boolean>;
+    disabledItemPredicate?: Optional<(item: SingleItem) => boolean>;
+    getSearchResults?: Optional<(searchString: string) => MaybeAsync<SingleItem[]>>;
+    searchPlaceholder?: string | undefined;
+    readonly by?: string | undefined;
+    buttonStyle?: Optional<"base" | "simple" | "tinted">;
+    hideCheckmarks?: Optional<boolean>;
+    allowUnset?: Optional<boolean>;
+    clearable?: boolean | undefined;
+    fixedHeight?: boolean | undefined;
+    fullyControlValue?: boolean | undefined;
+    mountMenuOnBody?: boolean | undefined;
+    labelId?: string | undefined;
+    buttonId?: string | undefined;
+    readonly disabledItemTooltip?: string | undefined;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        "nothing-selected"?(_: {}): any;
+        "something-selected"?(_: {
+            value: SingleItem[];
+        }): any;
+        "nothing-found"?(_: {}): any;
+        option?(_: {
+            class: string;
+            item: SingleItem;
+            selected: boolean;
+            disabled: boolean;
+        }): any;
+    };
+    emit: (e: 'update:modelValue', v: SingleItem | SingleItem[] | undefined) => void;
+} | undefined, __VLS_expose?: ((exposed: import("vue").ShallowUnwrapRef<{
+    triggerSearch: () => Promise<void>;
+}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        size?: Optional<"sm" | "base" | "lg" | "xl">;
+        readonly label: string;
+        modelValue?: ([{
+            type: PropType<SingleItem | SingleItem[] | undefined>;
+            default: undefined;
+        }] extends [import("vue").Prop<infer V, infer D>] ? unknown extends V ? import("@vue/shared").IfAny<V, V, D> : V : {
+            type: PropType<SingleItem | SingleItem[] | undefined>;
+            default: undefined;
+        }) | undefined;
+        "onUpdate:modelValue"?: ((v: SingleItem | SingleItem[] | undefined) => any) | undefined;
+        readonly name: string;
+        disabled?: Optional<boolean>;
+        rules?: RuleExpression<SingleItem | SingleItem[] | undefined>;
+        validateOnMount?: boolean | undefined;
+        showRequired?: boolean | undefined;
+        labelPosition?: LabelPosition | undefined;
+        validateOnValueUpdate?: boolean | undefined;
+        search?: boolean | undefined;
+        help?: Optional<string>;
+        showLabel?: boolean | undefined;
+        useLabelInErrors?: boolean | undefined;
+        readonly placeholder?: string | undefined;
+        showOptional?: boolean | undefined;
+        tooltipText?: string | undefined;
+        items?: SingleItem[] | undefined;
+        filterPredicate?: Optional<(item: SingleItem, searchString: string) => boolean>;
+        disabledItemPredicate?: Optional<(item: SingleItem) => boolean>;
+        getSearchResults?: Optional<(searchString: string) => MaybeAsync<SingleItem[]>>;
+        searchPlaceholder?: string | undefined;
+        readonly by?: string | undefined;
+        buttonStyle?: Optional<"base" | "simple" | "tinted">;
+        hideCheckmarks?: Optional<boolean>;
+        allowUnset?: Optional<boolean>;
+        clearable?: boolean | undefined;
+        fixedHeight?: boolean | undefined;
+        fullyControlValue?: boolean | undefined;
+        mountMenuOnBody?: boolean | undefined;
+        labelId?: string | undefined;
+        buttonId?: string | undefined;
+        readonly disabledItemTooltip?: string | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        triggerSearch: () => Promise<void>;
+    }>): void;
+    attrs: any;
+    slots: {
+        "nothing-selected"?(_: {}): any;
+        "something-selected"?(_: {
+            value: SingleItem[];
+        }): any;
+        "nothing-found"?(_: {}): any;
+        option?(_: {
+            class: string;
+            item: SingleItem;
+            selected: boolean;
+            disabled: boolean;
+        }): any;
+    };
+    emit: (e: 'update:modelValue', v: SingleItem | SingleItem[] | undefined) => void;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            size?: Optional<"sm" | "base" | "lg" | "xl">;
+            readonly label: string;
+            modelValue?: ([{
+                type: PropType<SingleItem | SingleItem[] | undefined>;
+                default: undefined;
+            }] extends [import("vue").Prop<infer V, infer D>] ? unknown extends V ? import("@vue/shared").IfAny<V, V, D> : V : {
+                type: PropType<SingleItem | SingleItem[] | undefined>;
+                default: undefined;
+            }) | undefined;
+            "onUpdate:modelValue"?: ((v: SingleItem | SingleItem[] | undefined) => any) | undefined;
+            readonly name: string;
+            disabled?: Optional<boolean>;
+            rules?: RuleExpression<SingleItem | SingleItem[] | undefined>;
+            validateOnMount?: boolean | undefined;
+            showRequired?: boolean | undefined;
+            labelPosition?: LabelPosition | undefined;
+            validateOnValueUpdate?: boolean | undefined;
+            search?: boolean | undefined;
+            help?: Optional<string>;
+            showLabel?: boolean | undefined;
+            useLabelInErrors?: boolean | undefined;
+            readonly placeholder?: string | undefined;
+            showOptional?: boolean | undefined;
+            tooltipText?: string | undefined;
+            items?: SingleItem[] | undefined;
+            filterPredicate?: Optional<(item: SingleItem, searchString: string) => boolean>;
+            disabledItemPredicate?: Optional<(item: SingleItem) => boolean>;
+            getSearchResults?: Optional<(searchString: string) => MaybeAsync<SingleItem[]>>;
+            searchPlaceholder?: string | undefined;
+            readonly by?: string | undefined;
+            buttonStyle?: Optional<"base" | "simple" | "tinted">;
+            hideCheckmarks?: Optional<boolean>;
+            allowUnset?: Optional<boolean>;
+            clearable?: boolean | undefined;
+            fixedHeight?: boolean | undefined;
+            fullyControlValue?: boolean | undefined;
+            mountMenuOnBody?: boolean | undefined;
+            labelId?: string | undefined;
+            buttonId?: string | undefined;
+            readonly disabledItemTooltip?: string | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        expose(exposed: import("vue").ShallowUnwrapRef<{
+            triggerSearch: () => Promise<void>;
+        }>): void;
+        attrs: any;
+        slots: {
+            "nothing-selected"?(_: {}): any;
+            "something-selected"?(_: {
+                value: SingleItem[];
+            }): any;
+            "nothing-found"?(_: {}): any;
+            option?(_: {
+                class: string;
+                item: SingleItem;
+                selected: boolean;
+                disabled: boolean;
+            }): any;
+        };
+        emit: (e: 'update:modelValue', v: SingleItem | SingleItem[] | undefined) => void;
+    } | undefined;
+};
+export default _default;

package/dist/components/global/ToastRenderer.vue.d.ts

@@ -1,13 +1,13 @@
 import type { MaybeNullOrUndefined } from '@speckle/shared';
 import type { ToastNotification } from '../../helpers/global/toast';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    notifications: MaybeNullOrUndefined<ToastNotification[]>;
+    notification: MaybeNullOrUndefined<ToastNotification>;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: (val: ToastNotification) => void;
+    "update:notification": (val: MaybeNullOrUndefined<ToastNotification>) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    notifications: MaybeNullOrUndefined<ToastNotification[]>;
+    notification: MaybeNullOrUndefined<ToastNotification>;
 }>>> & {
-    onDismiss?: ((val: ToastNotification) => any) | undefined;
+    "onUpdate:notification"?: ((val: MaybeNullOrUndefined<ToastNotification>) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/global/icon/Plus.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/components/layout/Dialog.vue.d.ts

@@ -21,6 +21,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * If set, the modal will be wrapped in a form element and the `onSubmit` callback will be invoked when the user submits the form
      */
     onSubmit?: ((e: SubmitEvent) => void) | undefined;
+    isTransparent?: boolean | undefined;
 }>, {
     fullscreen: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -47,6 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * If set, the modal will be wrapped in a form element and the `onSubmit` callback will be invoked when the user submits the form
      */
     onSubmit?: ((e: SubmitEvent) => void) | undefined;
+    isTransparent?: boolean | undefined;
 }>, {
     fullscreen: string;
 }>>> & {

package/dist/components/layout/sidebar/menu/group/Group.vue.d.ts

@@ -9,12 +9,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     collapsible: {
         type: import("vue").PropType<boolean>;
     };
-    plusText: {
+    icon: {
+        type: import("vue").PropType<"add" | "edit">;
+    };
+    iconText: {
         type: import("vue").PropType<string>;
     };
-    plusClick: {
+    iconClick: {
         type: import("vue").PropType<() => void>;
     };
+    noHover: {
+        type: import("vue").PropType<boolean>;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     collapsed: import("vue").PropType<boolean>;
     tag: {
@@ -26,12 +32,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     collapsible: {
         type: import("vue").PropType<boolean>;
     };
-    plusText: {
+    icon: {
+        type: import("vue").PropType<"add" | "edit">;
+    };
+    iconText: {
         type: import("vue").PropType<string>;
     };
-    plusClick: {
+    iconClick: {
         type: import("vue").PropType<() => void>;
     };
+    noHover: {
+        type: import("vue").PropType<boolean>;
+    };
 }>>, {}, {}>, {
     "title-icon"?(_: {}): any;
     default?(_: {}): any;

package/dist/components/user/Avatar.vue.d.ts

@@ -8,10 +8,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     noBorder?: boolean | undefined;
     noBg?: boolean | undefined;
     hideTooltip?: boolean | undefined;
+    rounded?: boolean | undefined;
+    lightStyle?: boolean | undefined;
 }>, {
     size: string;
     hoverEffect: boolean;
     user: null;
+    rounded: boolean;
+    lightStyle: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     user?: MaybeNullOrUndefined<AvatarUser>;
     size?: UserAvatarSize | undefined;
@@ -20,14 +24,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     noBorder?: boolean | undefined;
     noBg?: boolean | undefined;
     hideTooltip?: boolean | undefined;
+    rounded?: boolean | undefined;
+    lightStyle?: boolean | undefined;
 }>, {
     size: string;
     hoverEffect: boolean;
     user: null;
+    rounded: boolean;
+    lightStyle: boolean;
 }>>>, {
     size: UserAvatarSize;
+    rounded: boolean;
     user: AvatarUser | null;
     hoverEffect: boolean;
+    lightStyle: boolean;
 }, {}>, {
     default?(_: {}): any;
     "absolute-anchor"?(_: {}): any;

package/dist/components/user/AvatarEditable.vue.d.ts

@@ -3,17 +3,23 @@ import type { UserAvatarSize } from '../../composables/user/avatar';
 type ModelType = MaybeNullOrUndefined<string>;
 declare const _default: import("vue").DefineComponent<{
     editMode: import("vue").PropType<boolean>;
+    size: {
+        type: import("vue").PropType<UserAvatarSize>;
+    };
+    rounded: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     modelValue: {
         type: import("vue").PropType<string | null>;
     };
-    placeholder: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
     name: {
         type: import("vue").PropType<string>;
         required: true;
     };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
     rules: {
         type: import("vue").PropType<string | Record<string, unknown> | import("vee-validate").GenericValidateFunction<ModelType> | import("vee-validate").GenericValidateFunction<ModelType>[] | {
             validate(value: ModelType, options: Record<string, any>): Promise<ModelType>;
@@ -25,11 +31,13 @@ declare const _default: import("vue").DefineComponent<{
     validateOnValueUpdate: {
         type: import("vue").PropType<boolean>;
     };
-    disabled: {
-        type: import("vue").PropType<boolean>;
+    placeholder: {
+        type: import("vue").PropType<string>;
+        required: true;
     };
-    size: {
-        type: import("vue").PropType<UserAvatarSize>;
+    lightStyle: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
     };
     defaultImg: {
         type: import("vue").PropType<string>;
@@ -42,17 +50,23 @@ declare const _default: import("vue").DefineComponent<{
     "update:modelValue": (value: ModelType) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     editMode: import("vue").PropType<boolean>;
+    size: {
+        type: import("vue").PropType<UserAvatarSize>;
+    };
+    rounded: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     modelValue: {
         type: import("vue").PropType<string | null>;
     };
-    placeholder: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
     name: {
         type: import("vue").PropType<string>;
         required: true;
     };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
     rules: {
         type: import("vue").PropType<string | Record<string, unknown> | import("vee-validate").GenericValidateFunction<ModelType> | import("vee-validate").GenericValidateFunction<ModelType>[] | {
             validate(value: ModelType, options: Record<string, any>): Promise<ModelType>;
@@ -64,11 +78,13 @@ declare const _default: import("vue").DefineComponent<{
     validateOnValueUpdate: {
         type: import("vue").PropType<boolean>;
     };
-    disabled: {
-        type: import("vue").PropType<boolean>;
+    placeholder: {
+        type: import("vue").PropType<string>;
+        required: true;
     };
-    size: {
-        type: import("vue").PropType<UserAvatarSize>;
+    lightStyle: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
     };
     defaultImg: {
         type: import("vue").PropType<string>;
@@ -76,5 +92,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((value: ModelType) => any) | undefined;
     onSave?: ((newUrl: ModelType) => any) | undefined;
-}, {}, {}>;
+}, {
+    rounded: boolean;
+    lightStyle: boolean;
+}, {}>;
 export default _default;

package/dist/components/user/AvatarGroup.vue.d.ts

@@ -5,30 +5,35 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     size?: UserAvatarSize | undefined;
     maxCount?: number | undefined;
     hideTooltips?: boolean | undefined;
+    maxAvatars?: number | undefined;
 }>, {
     users: () => never[];
     overlap: boolean;
     size: string;
     maxCount: undefined;
     hideTooltips: boolean;
+    maxAvatars: undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     users: AvatarUserWithId[];
     overlap?: boolean | undefined;
     size?: UserAvatarSize | undefined;
     maxCount?: number | undefined;
     hideTooltips?: boolean | undefined;
+    maxAvatars?: number | undefined;
 }>, {
     users: () => never[];
     overlap: boolean;
     size: string;
     maxCount: undefined;
     hideTooltips: boolean;
+    maxAvatars: undefined;
 }>>>, {
     size: UserAvatarSize;
     users: AvatarUserWithId[];
     overlap: boolean;
     maxCount: number;
     hideTooltips: boolean;
+    maxAvatars: number;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/helpers/common/validation.d.ts

@@ -27,3 +27,4 @@ export declare const stringContains: (params: {
 }) => GenericValidateFunction<string>;
 export declare const isUrl: GenericValidateFunction<string>;
 export declare const isItemSelected: GenericValidateFunction<unknown[]>;
+export declare const isMultiItemSelected: <T>(val: unknown) => true | string;