@speckle/ui-components 2.14.7 → 2.14.8-alpha10

package/README.md

@@ -13,25 +13,6 @@ Speckle UI component library built with Vue 3 and relying on the Speckle Tailwin
 
 It's suggested that you also install the `@speckle/ui-components-nuxt` Nuxt module. It will ensure that all of the Vue components can be auto-imported like components in nuxt's `./components` directory. No need to import them manually anymore and you'll also get proper TS typing in your Vue templates out of the box!
 
-Additionally you should add the following to your `build.transpile` array in your nuxt config:
-
-```js
-// nuxt.config.js
-export default {
-  build: {
-    transpile: [
-      '@headlessui/vue',
-      /^@heroicons\/vue/,
-      '@vueuse/core',
-      '@vueuse/shared',
-      '@speckle/ui-components'
-    ]
-  }
-}
-```
-
-This will ensure that some dependencies are transpiled properly so that they work correctly both during SSR & CSR.
-
 ### Troubleshooting
 
 #### Form validation doesn't work

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

@@ -0,0 +1,35 @@
+import type { PropType as __PropType } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    settings: {
+        type: __PropType<{
+            target?: string | undefined;
+            distance?: number | undefined;
+            top?: boolean | undefined;
+            identifier?: any;
+            firstload?: boolean | undefined;
+        } | undefined>;
+        required: false;
+    };
+    allowRetry: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "infinite"[], "infinite", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    settings: {
+        type: __PropType<{
+            target?: string | undefined;
+            distance?: number | undefined;
+            top?: boolean | undefined;
+            identifier?: any;
+            firstload?: boolean | undefined;
+        } | undefined>;
+        required: false;
+    };
+    allowRetry: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}>> & {
+    onInfinite?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/dist/components/common/Alert.vue.d.ts

@@ -0,0 +1,46 @@
+import type { PropType as __PropType } from 'vue';
+type AlertColor = 'success' | 'danger' | 'warning' | 'info';
+declare const _sfc_main: import("vue").DefineComponent<{
+    color: {
+        type: __PropType<AlertColor | undefined>;
+        required: false;
+        default: string;
+    };
+    withDismiss: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    actions: {
+        type: __PropType<{
+            title: string;
+            url?: string | undefined;
+            onClick?: (() => void) | undefined;
+            externalUrl?: boolean | undefined;
+        }[] | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "dismiss"[], "dismiss", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: __PropType<AlertColor | undefined>;
+        required: false;
+        default: string;
+    };
+    withDismiss: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    actions: {
+        type: __PropType<{
+            title: string;
+            url?: string | undefined;
+            onClick?: (() => void) | undefined;
+            externalUrl?: boolean | undefined;
+        }[] | undefined>;
+        required: false;
+    };
+}>> & {
+    onDismiss?: ((...args: any[]) => any) | undefined;
+}, {
+    color: AlertColor | undefined;
+}>;
+export default _sfc_main;

package/dist/components/common/steps/Bullet.vue.d.ts

@@ -1,4 +1,5 @@
 import type { PropType as __PropType } from 'vue';
+import { StepsPadding } from '../../../composables/common/steps';
 import { BulletStepType, HorizontalOrVertical } from '../../../helpers/common/components';
 import { TailwindBreakpoints } from '../../../helpers/tailwind';
 declare const _sfc_main: import("vue").DefineComponent<{
@@ -30,6 +31,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<boolean | undefined>;
         required: false;
     };
+    stepsPadding: {
+        type: __PropType<StepsPadding | undefined>;
+        required: false;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     ariaLabel: {
         type: __PropType<string | undefined>;
@@ -59,6 +64,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<boolean | undefined>;
         required: false;
     };
+    stepsPadding: {
+        type: __PropType<StepsPadding | undefined>;
+        required: false;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}>;

package/dist/components/common/steps/Number.vue.d.ts

@@ -1,4 +1,5 @@
 import type { PropType as __PropType } from 'vue';
+import { StepsPadding } from '../../../composables/common/steps';
 import { HorizontalOrVertical, NumberStepType } from '../../../helpers/common/components';
 import { TailwindBreakpoints } from '../../../helpers/tailwind';
 declare const _sfc_main: import("vue").DefineComponent<{
@@ -26,6 +27,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<boolean | undefined>;
         required: false;
     };
+    stepsPadding: {
+        type: __PropType<StepsPadding | undefined>;
+        required: false;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     ariaLabel: {
         type: __PropType<string | undefined>;
@@ -51,6 +56,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<boolean | undefined>;
         required: false;
     };
+    stepsPadding: {
+        type: __PropType<StepsPadding | undefined>;
+        required: false;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}>;

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

@@ -1,7 +1,7 @@
 import { ConcreteComponent, PropType } from 'vue';
 import { Nullable, Optional } from '@speckle/shared';
 type FormButtonSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl';
-type FormButtonColor = 'default' | 'invert' | 'danger' | 'warning' | 'success' | 'card' | 'secondary';
+type FormButtonColor = 'default' | 'invert' | 'danger' | 'warning' | 'success' | 'card' | 'secondary' | 'info';
 declare const _sfc_main: import("vue").DefineComponent<{
     /**
      * URL to which to navigate - can be a relative (app) path or an absolute link for an external URL

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

@@ -1,7 +1,6 @@
 import { RuleExpression } from 'vee-validate';
 import { ConcreteComponent, PropType } from 'vue';
 import { Optional } from '@speckle/shared';
-type InputType = 'text' | 'email' | 'password' | 'url' | 'search';
 type InputSize = 'sm' | 'base' | 'lg' | 'xl';
 type InputColor = 'page' | 'foundation';
 declare const _sfc_main: import("vue").DefineComponent<{
@@ -9,7 +8,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
      * Input "type" value (changes behaviour & look)
      */
     type: {
-        type: PropType<InputType>;
+        type: PropType<string>;
         default: string;
     };
     /**
@@ -142,7 +141,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
      * Input "type" value (changes behaviour & look)
      */
     type: {
-        type: PropType<InputType>;
+        type: PropType<string>;
         default: string;
     };
     /**
@@ -276,7 +275,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     onFocusin?: ((...args: any[]) => any) | undefined;
     onFocusout?: ((...args: any[]) => any) | undefined;
 }, {
-    type: InputType;
+    type: string;
     size: InputSize;
     fullWidth: boolean;
     color: InputColor;

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

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { MaybeAsync, Optional } from '@speckle/shared';
 import { RuleExpression } from 'vee-validate';
-type ButtonStyle = 'base' | 'simple';
+type ButtonStyle = 'base' | 'simple' | 'tinted';
 type SingleItem = any;
 declare const _sfc_main: import("vue").DefineComponent<{
     multiple: {
@@ -95,7 +95,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
      * Validation stuff
      */
     rules: {
-        type: PropType<RuleExpression<string>>;
+        type: PropType<RuleExpression<any>>;
         default: undefined;
     };
     /**
@@ -130,7 +130,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    triggerSearch: () => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -222,7 +224,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
      * Validation stuff
      */
     rules: {
-        type: PropType<RuleExpression<string>>;
+        type: PropType<RuleExpression<any>>;
         default: undefined;
     };
     /**
@@ -262,7 +264,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     disabled: Optional<boolean>;
     modelValue: any;
-    rules: RuleExpression<string>;
+    rules: RuleExpression<any>;
     validateOnMount: boolean;
     showLabel: boolean;
     help: Optional<string>;

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

@@ -0,0 +1,41 @@
+import type { PropType as __PropType } from 'vue';
+type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl';
+declare const _sfc_main: import("vue").DefineComponent<{
+    open: {
+        type: __PropType<boolean>;
+        required: true;
+    };
+    maxWidth: {
+        type: __PropType<MaxWidthValue | undefined>;
+        required: false;
+    };
+    hideCloser: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    preventCloseOnClickOutside: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:open" | "fully-closed")[], "update:open" | "fully-closed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: __PropType<boolean>;
+        required: true;
+    };
+    maxWidth: {
+        type: __PropType<MaxWidthValue | undefined>;
+        required: false;
+    };
+    hideCloser: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    preventCloseOnClickOutside: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}>> & {
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+    "onFully-closed"?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,35 @@
+import type { PropType as __PropType } from 'vue';
+import { ConcreteComponent } from 'vue';
+type DisclosureColor = 'default' | 'danger';
+declare const _sfc_main: import("vue").DefineComponent<{
+    title: {
+        type: __PropType<string>;
+        required: true;
+    };
+    icon: {
+        type: __PropType<ConcreteComponent | undefined>;
+        required: false;
+    };
+    color: {
+        type: __PropType<DisclosureColor | undefined>;
+        required: false;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: __PropType<string>;
+        required: true;
+    };
+    icon: {
+        type: __PropType<ConcreteComponent | undefined>;
+        required: false;
+    };
+    color: {
+        type: __PropType<DisclosureColor | undefined>;
+        required: false;
+        default: string;
+    };
+}>>, {
+    color: DisclosureColor | undefined;
+}>;
+export default _sfc_main;

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

@@ -0,0 +1,17 @@
+import type { PropType as __PropType } from 'vue';
+import { GridListToggleValue } from '../../helpers/layout/components';
+declare const _sfc_main: import("vue").DefineComponent<{
+    modelValue: {
+        type: __PropType<GridListToggleValue | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:modelValue")[], "click" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: __PropType<GridListToggleValue | undefined>;
+        required: false;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,25 @@
+import type { PropType as __PropType } from 'vue';
+import { LayoutMenuItem } from '../../helpers/layout/components';
+declare const _sfc_main: import("vue").DefineComponent<{
+    open: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    items: {
+        type: __PropType<LayoutMenuItem[][]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:open" | "chosen")[], "update:open" | "chosen", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    items: {
+        type: __PropType<LayoutMenuItem[][]>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+    onChosen?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,70 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    /**
+     * Use a `<form/>` element as a wrapper that will emit 'submit' events out from the component when they occur
+     */
+    form: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Add a ring outline on hover
+     */
+    ring: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Add a primary-colored glow on hover
+     */
+    fancyGlow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    customPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noShadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Use a `<form/>` element as a wrapper that will emit 'submit' events out from the component when they occur
+     */
+    form: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Add a ring outline on hover
+     */
+    ring: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Add a primary-colored glow on hover
+     */
+    fancyGlow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    customPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noShadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined;
+}, {
+    form: boolean;
+    ring: boolean;
+    fancyGlow: boolean;
+    customPadding: boolean;
+    noShadow: boolean;
+}>;
+export default _sfc_main;

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

@@ -0,0 +1,14 @@
+import type { PropType as __PropType } from 'vue';
+import { LayoutTabItem } from '../../helpers/layout/components';
+declare const _sfc_main: import("vue").DefineComponent<{
+    items: {
+        type: __PropType<LayoutTabItem<any>[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: __PropType<LayoutTabItem<any>[]>;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

package/dist/composables/common/steps.d.ts

@@ -1,6 +1,7 @@
 import { ToRefs } from 'vue';
 import { HorizontalOrVertical, StepCoreType } from '../../helpers/common/components';
 import { TailwindBreakpoints } from '../../helpers/tailwind';
+export type StepsPadding = 'base' | 'xs' | 'sm';
 export declare function useStepsInternals(params: {
     props: ToRefs<{
         orientation?: HorizontalOrVertical;
@@ -8,6 +9,7 @@ export declare function useStepsInternals(params: {
         modelValue?: number;
         goVerticalBelow?: TailwindBreakpoints;
         nonInteractive?: boolean;
+        stepsPadding?: StepsPadding;
     }>;
     emit: {
         (e: 'update:modelValue', val: number): void;

package/dist/composables/common/window.d.ts

@@ -0,0 +1,26 @@
+import { Nullable } from '@speckle/shared';
+import { MaybeRef } from '@vueuse/core';
+export declare enum ThrottleOrDebounce {
+    Throttle = 0,
+    Debounce = 1
+}
+export declare enum HorizontalDirection {
+    Left = 0,
+    Right = 1
+}
+export declare function useWindowResizeHandler(handler: (e: UIEvent) => void, options?: Partial<{
+    wait: number;
+    throttleOrDebounce: ThrottleOrDebounce;
+}>): void;
+export declare function useOnBeforeWindowUnload(handler: (e: BeforeUnloadEvent) => void): void;
+export declare function useResponsiveHorizontalDirectionCalculation(params: {
+    el: MaybeRef<Nullable<HTMLElement>>;
+    defaultDirection?: HorizontalDirection;
+    /**
+     * Stop recalculation below this screen size. Defaults to el.width * 2
+     */
+    stopUpdatesBelowWidth?: MaybeRef<number>;
+}): {
+    direction: import("vue").ComputedRef<HorizontalDirection>;
+    recalculateDirection: () => void;
+};

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

@@ -0,0 +1,14 @@
+export type InfiniteLoaderState = {
+    /**
+     * Informs the component that this loading has been successful
+     */
+    loaded: () => void;
+    /**
+     * Informs the component that all of the data has been loaded successfully
+     */
+    complete: () => void;
+    /**
+     * Inform the component that this loading failed, the content of the `error` slot will be displayed
+     */
+    error: () => void;
+};

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

@@ -0,0 +1,13 @@
+export declare enum GridListToggleValue {
+    Grid = "grid",
+    List = "list"
+}
+export type LayoutTabItem<I extends string = string> = {
+    title: string;
+    id: I;
+};
+export type LayoutMenuItem<I extends string = string> = {
+    title: string;
+    id: I;
+    disabled?: boolean;
+};