@speckle/ui-components 2.18.16 → 2.19.0

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

@@ -0,0 +1,28 @@
+import type { ConcreteComponent } from 'vue';
+type OptionType = {
+    value: string;
+    title: string;
+    introduction?: string;
+    icon: ConcreteComponent;
+    help?: string;
+};
+declare const _default: import("vue").DefineComponent<{
+    modelValue: import("vue").PropType<string>;
+    options: {
+        type: import("vue").PropType<OptionType[]>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: import("vue").PropType<string>;
+    options: {
+        type: import("vue").PropType<OptionType[]>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+}>>, {}, {}>;
+export default _default;

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

@@ -1,12 +1,48 @@
 declare const _default: import("vue").DefineComponent<{
     modelValue: import("vue").PropType<boolean>;
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+    id: {
+        type: import("vue").PropType<string>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    name: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    showLabel: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     icons: {
         type: import("vue").PropType<boolean>;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: import("vue").PropType<boolean>;
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+    id: {
+        type: import("vue").PropType<string>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    name: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    showLabel: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     icons: {
         type: import("vue").PropType<boolean>;
     };
-}>>, {}, {}>;
+}>>, {
+    showLabel: boolean;
+}, {}>;
 export default _default;

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

@@ -1,3 +1,4 @@
+import { type LayoutDialogButton } from '../../lib';
 type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     open: boolean;
@@ -8,13 +9,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     preventCloseOnClickOutside?: boolean | undefined;
     title?: string | undefined;
-    buttons?: {
-        text: string;
-        props: Record<string, unknown>;
-        onClick?: (() => void) | undefined;
-        disabled?: boolean | undefined;
-        submit?: boolean | undefined;
-    }[] | undefined;
+    buttons?: LayoutDialogButton[] | undefined;
+    /**
+     * Extra classes to apply to the button container.
+     */
+    buttonsWrapperClasses?: string | undefined;
     /**
      * If set, the modal will be wrapped in a form element and the `onSubmit` callback will be invoked when the user submits the form
      */
@@ -31,13 +30,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     preventCloseOnClickOutside?: boolean | undefined;
     title?: string | undefined;
-    buttons?: {
-        text: string;
-        props: Record<string, unknown>;
-        onClick?: (() => void) | undefined;
-        disabled?: boolean | undefined;
-        submit?: boolean | undefined;
-    }[] | undefined;
+    buttons?: LayoutDialogButton[] | undefined;
+    /**
+     * Extra classes to apply to the button container.
+     */
+    buttonsWrapperClasses?: string | undefined;
     /**
      * If set, the modal will be wrapped in a form element and the `onSubmit` callback will be invoked when the user submits the form
      */

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

@@ -1,3 +1,4 @@
+import type { PropType } from 'vue';
 import type { PropAnyComponent } from '../../helpers/common/components';
 type TitleColor = 'default' | 'danger' | 'warning' | 'success' | 'secondary' | 'info';
 type FormButtonColor = 'default' | 'invert' | 'danger' | 'warning' | 'success' | 'card' | 'secondary' | 'info';
@@ -23,6 +24,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    icon: {
+        type: PropType<PropAnyComponent>;
+        default: undefined;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     borderT: BooleanConstructor;
@@ -45,7 +50,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    icon: {
+        type: PropType<PropAnyComponent>;
+        default: undefined;
+    };
 }>>, {
+    icon: PropAnyComponent;
     borderT: boolean;
     borderB: boolean;
     allowOverflow: boolean;

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

@@ -21,11 +21,14 @@ declare const _default: <T extends {
     overflowCells?: boolean | undefined;
     onRowClick?: ((item: T) => void) | undefined;
     rowItemsAlign?: "center" | "stretch" | undefined;
+    emptyMessage?: string | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
     slots: Partial<Record<NonNullable<C>, (_: {
         item: T;
-    }) => any>>;
+    }) => any>> & {
+        empty?(_: {}): any;
+    };
     emit: any;
 } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {
@@ -35,12 +38,15 @@ declare const _default: <T extends {
         overflowCells?: boolean | undefined;
         onRowClick?: ((item: T) => void) | undefined;
         rowItemsAlign?: "center" | "stretch" | undefined;
+        emptyMessage?: string | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: Partial<Record<NonNullable<C>, (_: {
         item: T;
-    }) => any>>;
+    }) => any>> & {
+        empty?(_: {}): any;
+    };
     emit: any;
 }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
@@ -53,12 +59,15 @@ declare const _default: <T extends {
             overflowCells?: boolean | undefined;
             onRowClick?: ((item: T) => void) | undefined;
             rowItemsAlign?: "center" | "stretch" | undefined;
+            emptyMessage?: string | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
         attrs: any;
         slots: Partial<Record<NonNullable<C>, (_: {
             item: T;
-        }) => any>>;
+        }) => any>> & {
+            empty?(_: {}): any;
+        };
         emit: any;
     } | undefined;
 };

package/dist/components/layout/{PageTabs.vue.d.ts → tabs/Horizontal.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { LayoutPageTabItem } from '../../helpers/layout/components';
+import type { LayoutPageTabItem } from '../../../helpers/layout/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     activeItem: {
         required: true;
@@ -8,12 +8,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<LayoutPageTabItem[]>;
         required: true;
     };
-    vertical: {
-        type: import("vue").PropType<boolean>;
-    };
-    title: {
-        type: import("vue").PropType<string>;
-    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     activeItem: {
         required: true;
@@ -23,12 +17,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<LayoutPageTabItem[]>;
         required: true;
     };
-    vertical: {
-        type: import("vue").PropType<boolean>;
-    };
-    title: {
-        type: import("vue").PropType<string>;
-    };
 }>>, {}, {}>, {
     default?(_: {
         activeItem: LayoutPageTabItem;

package/dist/components/layout/tabs/Vertical.vue.d.ts

@@ -0,0 +1,30 @@
+import type { LayoutPageTabItem } from '../../../helpers/layout/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    activeItem: {
+        required: true;
+        type: import("vue").PropType<LayoutPageTabItem>;
+    };
+    items: {
+        type: import("vue").PropType<LayoutPageTabItem[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    activeItem: {
+        required: true;
+        type: import("vue").PropType<LayoutPageTabItem>;
+    };
+    items: {
+        type: import("vue").PropType<LayoutPageTabItem[]>;
+        required: true;
+    };
+}>>, {}, {}>, {
+    default?(_: {
+        activeItem: LayoutPageTabItem;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/composables/form/textInput.d.ts

@@ -1,6 +1,6 @@
 import type { RuleExpression } from 'vee-validate';
 import type { Ref, ToRefs } from 'vue';
-import type { Nullable } from '@speckle/shared';
+import type { MaybeNullOrUndefined, Nullable } from '@speckle/shared';
 export type InputColor = 'page' | 'foundation' | 'transparent';
 /**
  * Common setup for text input & textarea fields
@@ -45,4 +45,57 @@ export declare function useTextInputCore<V extends string | string[] = string>(p
     clear: () => void;
     focus: () => void;
     labelClasses: import("vue").ComputedRef<string>;
+    shouldShowClear: import("vue").ComputedRef<boolean>;
 };
+type FormInputChangeEvent = {
+    event?: Event;
+    value: string;
+};
+/**
+ * Attach returned on and bind using v-on and v-bind, and then you can use the returned `value`
+ * ref to get the input's value while ensuring normal input events are debounced and only change/clear
+ * events cause the value to propagate immediately
+ *
+ * Very useful for search inputs and other kind of auto-submitting inputs!
+ */
+export declare function useDebouncedTextInput(params?: {
+    /**
+     * For how long should basic input events be debounced.
+     * Default: 1000 (ms)
+     */
+    debouncedBy?: number;
+    /**
+     * Optionally pass in the model ref that should be used as the source of truth
+     */
+    model?: Ref<MaybeNullOrUndefined<string>>;
+    /**
+     * Set to true if you're tracking changes on a basic HTML input element. This will change the events
+     * being used (e.g. input instead of update:modelValue)
+     *
+     * Default: false
+     */
+    isBasicHtmlInput?: boolean;
+    /**
+     * Set to false if you don't want the change event to be emitted on Enter key press.
+     * Setting only works for basic html inputs currently!
+     *
+     * Default: Default behavior (true for input, false for textarea)
+     */
+    submitOnEnter?: boolean;
+    /**
+     * Set to true if you want to see debug output for how events fire and are handled
+     */
+    debug?: boolean | ((...logArgs: unknown[]) => void);
+}): {
+    on: {
+        [x: string]: ((val: string | InputEvent) => void) | ((e: KeyboardEvent) => void);
+        clear: () => void;
+        change: (val: FormInputChangeEvent | Event) => void;
+        keydown: (e: KeyboardEvent) => void;
+    };
+    bind: {
+        modelValue: import("vue").ComputedRef<string>;
+    };
+    value: Ref<MaybeNullOrUndefined<string>>;
+};
+export {};

package/dist/directives/accessibility.d.ts

@@ -0,0 +1,5 @@
+import type { Directive } from 'vue';
+/**
+ * Makes it possible to navigate to and click on the element using the keyboard
+ */
+export declare const vKeyboardClickable: Directive<HTMLElement>;

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

@@ -1,5 +1,5 @@
-import type { ConcreteComponent, FunctionalComponent } from 'vue';
-export type PropAnyComponent = ConcreteComponent<any, any, any, any, any> | FunctionalComponent<any, any, any>;
+import type { ConcreteComponent, FunctionalComponent, DefineComponent } from 'vue';
+export type PropAnyComponent = ConcreteComponent<any, any, any, any, any> | FunctionalComponent<any, any, any> | DefineComponent | string;
 export type HorizontalOrVertical = 'horizontal' | 'vertical';
 export interface StepCoreType {
     name: string;

package/dist/helpers/global/accessibility.d.ts

@@ -1,6 +1,7 @@
 /**
  * Visible, non-interactive elements with click handlers must have at least one keyboard listener for accessibility.
  * You can wrap your click handler with this in @keypress, to run it when enter is pressed on the selected component
+ * @deprecated Use vKeyboardClickable directive instead
  * See more: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/click-events-have-key-events.md
  */
 export declare function keyboardClick(cb: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;

package/dist/helpers/layout/components.d.ts

@@ -1,4 +1,7 @@
 import type { ConcreteComponent } from 'vue';
+import type { FormButton } from '../../lib';
+type FormButtonProps = InstanceType<typeof FormButton>['$props'];
+import type { PropAnyComponent } from '../../helpers/common/components';
 export declare enum GridListToggleValue {
     Grid = "grid",
     List = "list"
@@ -10,9 +13,11 @@ export type LayoutTabItem<I extends string = string> = {
 export type LayoutPageTabItem<I extends string = string> = {
     title: string;
     id: I;
-    icon?: ConcreteComponent;
     count?: number;
     tag?: string;
+    icon?: PropAnyComponent;
+    disabled?: boolean;
+    disabledMessage?: string;
 };
 export type LayoutMenuItem<I extends string = string> = {
     icon?: ConcreteComponent;
@@ -22,3 +27,17 @@ export type LayoutMenuItem<I extends string = string> = {
     disabledTooltip?: string;
     color?: 'danger' | 'info';
 };
+export type LayoutDialogButton = {
+    text: string;
+    props?: Record<string, unknown> & FormButtonProps;
+    onClick?: (e: MouseEvent) => void;
+    disabled?: boolean;
+    submit?: boolean;
+    /**
+     * This should uniquely identify the button within the form. Even if you have different sets
+     * of buttons rendered on different steps of a wizard, all of them should have unique IDs to
+     * ensure proper form functionality.
+     */
+    id?: string;
+};
+export {};

package/dist/helpers/testing.d.ts

@@ -1 +1 @@
-export declare function rightClick(target: HTMLElement): void;
+export declare function rightClick(target: HTMLElement): Promise<void>;