@speckle/ui-components 2.12.666

package/.eslintrc.cjs

@@ -0,0 +1,118 @@
+const mainExtends = [
+  'plugin:vue/vue3-recommended',
+  'plugin:storybook/recommended',
+  'prettier'
+]
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  env: {
+    node: true
+  },
+
+  extends: [...mainExtends],
+  ignorePatterns: ['storybook-static', '!.storybook', 'tailwind-configure.d.ts'],
+  rules: {
+    'no-alert': 'error',
+    eqeqeq: ['error', 'always', { null: 'always' }],
+    'no-console': 'off',
+    'no-var': 'error'
+  },
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module'
+  },
+  overrides: [
+    {
+      files: '*.test.{ts,js}',
+      env: {
+        jest: true
+      }
+    },
+    {
+      files: './src/*.{js,ts,vue}',
+      env: {
+        node: false,
+        browser: true
+      }
+    },
+    {
+      files: '*.{ts,tsx,vue}',
+      extends: ['plugin:@typescript-eslint/recommended', ...mainExtends],
+      rules: {
+        '@typescript-eslint/no-explicit-any': ['error'],
+        '@typescript-eslint/no-unsafe-argument': ['error'],
+        '@typescript-eslint/no-unsafe-assignment': 'error',
+        '@typescript-eslint/no-unsafe-call': 'error',
+        '@typescript-eslint/no-unsafe-member-access': 'error',
+        '@typescript-eslint/no-unsafe-return': 'error',
+        '@typescript-eslint/no-for-in-array': ['error'],
+        '@typescript-eslint/restrict-template-expressions': ['error'],
+        '@typescript-eslint/restrict-plus-operands': ['error'],
+        '@typescript-eslint/await-thenable': ['warn'],
+        '@typescript-eslint/ban-types': ['warn'],
+        'require-await': 'off',
+        '@typescript-eslint/require-await': 'error',
+        'no-undef': 'off'
+      },
+      parserOptions: {
+        ecmaVersion: 2022,
+        sourceType: 'module',
+        parser: '@typescript-eslint/parser',
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json', './tsconfig.node.json'],
+        extraFileExtensions: ['.vue']
+      },
+      plugins: ['@typescript-eslint']
+    },
+    {
+      files: '*.vue',
+      plugins: ['vuejs-accessibility'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        ...mainExtends,
+        'plugin:vuejs-accessibility/recommended'
+      ],
+      rules: {
+        'vue/component-tags-order': [
+          'error',
+          { order: ['docs', 'template', 'script', 'style'] }
+        ],
+        'vue/require-default-prop': 'off',
+        'vue/multi-word-component-names': 'off',
+        'vue/component-name-in-template-casing': [
+          'error',
+          'PascalCase',
+          { registeredComponentsOnly: false }
+        ],
+        'vuejs-accessibility/label-has-for': [
+          'error',
+          {
+            required: {
+              some: ['nesting', 'id']
+            }
+          }
+        ]
+      }
+    },
+    {
+      files: '*.d.ts',
+      rules: {
+        'no-var': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/ban-types': 'off'
+      }
+    },
+    {
+      files: '*.stories.{js,ts}',
+      rules: {
+        // this one feels busted, tells me to await synchronous calls
+        'storybook/await-interactions': 'off',
+        // storybook types suck and can't be augmented
+        '@typescript-eslint/no-unsafe-call': 'off'
+      }
+    }
+  ]
+}
+
+module.exports = config

package/README.md

@@ -0,0 +1,60 @@
+# ui-components
+
+Speckle UI component library built with Vue 3 and relying on the Speckle Tailwind theme.
+
+## Setup
+
+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. 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
+
+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
+
+It appears that in some scenarios Nuxt/Vite gets confused and bundles 'vee-validate' twice. To fix this add 'vee-validate' to `vite.resolve.dedupe` in your nuxt/vite config.
+
+## Build
+
+Run `yarn build`
+
+## Development
+
+Develop & test your components in Storybook - `yarn storybook`
+
+Optionally you can also run `yarn dev` to run the Vite dev server which runs `App.vue` and in some special scenarios you might want to debug components there.
+
+### Troubleshooting
+
+#### Styles don't work
+
+Re-start storybook, it could be that you introduced a new tailwind class that was previously purged out
+
+## TODO
+
+- Add export to Chromatic
+- CI/CD?

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

@@ -0,0 +1,14 @@
+import type { PropType as __PropType } from 'vue';
+import { SourceAppDefinition } from '@speckle/shared';
+declare const _sfc_main: import("vue").DefineComponent<{
+    sourceApp: {
+        type: __PropType<SourceAppDefinition>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    sourceApp: {
+        type: __PropType<SourceAppDefinition>;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,65 @@
+import type { PropType as __PropType } from 'vue';
+import { ConcreteComponent } from 'vue';
+type BadgeSize = 'base' | 'lg';
+declare const _sfc_main: import("vue").DefineComponent<{
+    size: {
+        type: __PropType<BadgeSize | undefined>;
+        required: false;
+    };
+    colorClasses: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    dot: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    dotIconColorClasses: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    iconLeft: {
+        type: __PropType<ConcreteComponent | undefined>;
+        required: false;
+    };
+    rounded: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    clickableIcon: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click-icon"[], "click-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: __PropType<BadgeSize | undefined>;
+        required: false;
+    };
+    colorClasses: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    dot: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    dotIconColorClasses: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    iconLeft: {
+        type: __PropType<ConcreteComponent | undefined>;
+        required: false;
+    };
+    rounded: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    clickableIcon: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}>> & {
+    "onClick-icon"?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/dist/components/common/loading/Bar.vue.d.ts

@@ -0,0 +1,13 @@
+import type { PropType as __PropType } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    loading: {
+        type: __PropType<boolean>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    loading: {
+        type: __PropType<boolean>;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,65 @@
+import type { PropType as __PropType } from 'vue';
+import { BulletStepType, HorizontalOrVertical } from '../../../helpers/common/components';
+import { TailwindBreakpoints } from '../../../helpers/tailwind';
+declare const _sfc_main: import("vue").DefineComponent<{
+    ariaLabel: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    basic: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    orientation: {
+        type: __PropType<HorizontalOrVertical | undefined>;
+        required: false;
+    };
+    steps: {
+        type: __PropType<BulletStepType[]>;
+        required: true;
+    };
+    modelValue: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    goVerticalBelow: {
+        type: __PropType<TailwindBreakpoints | undefined>;
+        required: false;
+    };
+    nonInteractive: {
+        type: __PropType<boolean | 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>;
+        required: false;
+    };
+    basic: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    orientation: {
+        type: __PropType<HorizontalOrVertical | undefined>;
+        required: false;
+    };
+    steps: {
+        type: __PropType<BulletStepType[]>;
+        required: true;
+    };
+    modelValue: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    goVerticalBelow: {
+        type: __PropType<TailwindBreakpoints | undefined>;
+        required: false;
+    };
+    nonInteractive: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,57 @@
+import type { PropType as __PropType } from 'vue';
+import { HorizontalOrVertical, NumberStepType } from '../../../helpers/common/components';
+import { TailwindBreakpoints } from '../../../helpers/tailwind';
+declare const _sfc_main: import("vue").DefineComponent<{
+    ariaLabel: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    orientation: {
+        type: __PropType<HorizontalOrVertical | undefined>;
+        required: false;
+    };
+    steps: {
+        type: __PropType<NumberStepType[]>;
+        required: true;
+    };
+    modelValue: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    goVerticalBelow: {
+        type: __PropType<TailwindBreakpoints | undefined>;
+        required: false;
+    };
+    nonInteractive: {
+        type: __PropType<boolean | 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>;
+        required: false;
+    };
+    orientation: {
+        type: __PropType<HorizontalOrVertical | undefined>;
+        required: false;
+    };
+    steps: {
+        type: __PropType<NumberStepType[]>;
+        required: true;
+    };
+    modelValue: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    goVerticalBelow: {
+        type: __PropType<TailwindBreakpoints | undefined>;
+        required: false;
+    };
+    nonInteractive: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/dist/components/common/text/Link.vue.d.ts

@@ -0,0 +1,106 @@
+import { ConcreteComponent, PropType } from 'vue';
+import { Nullable, Optional } from '@speckle/shared';
+type LinkSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+declare const _sfc_main: import("vue").DefineComponent<{
+    to: {
+        type: PropType<Optional<string>>;
+        required: false;
+        default: undefined;
+    };
+    external: {
+        type: PropType<Optional<boolean>>;
+        required: false;
+        default: undefined;
+    };
+    disabled: {
+        type: PropType<Optional<boolean>>;
+        required: false;
+        default: undefined;
+    };
+    size: {
+        type: PropType<LinkSize>;
+        default: string;
+    };
+    foregroundLink: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Add icon to the left from the text
+     */
+    iconLeft: {
+        type: PropType<Nullable<ConcreteComponent>>;
+        default: null;
+    };
+    /**
+     * Add icon to the right from the text
+     */
+    iconRight: {
+        type: PropType<Nullable<ConcreteComponent>>;
+        default: null;
+    };
+    /**
+     * Hide default slot (when you want to show icons only)
+     */
+    hideText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: PropType<Optional<string>>;
+        required: false;
+        default: undefined;
+    };
+    external: {
+        type: PropType<Optional<boolean>>;
+        required: false;
+        default: undefined;
+    };
+    disabled: {
+        type: PropType<Optional<boolean>>;
+        required: false;
+        default: undefined;
+    };
+    size: {
+        type: PropType<LinkSize>;
+        default: string;
+    };
+    foregroundLink: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Add icon to the left from the text
+     */
+    iconLeft: {
+        type: PropType<Nullable<ConcreteComponent>>;
+        default: null;
+    };
+    /**
+     * Add icon to the right from the text
+     */
+    iconRight: {
+        type: PropType<Nullable<ConcreteComponent>>;
+        default: null;
+    };
+    /**
+     * Hide default slot (when you want to show icons only)
+     */
+    hideText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    to: Optional<string>;
+    size: LinkSize;
+    external: Optional<boolean>;
+    disabled: Optional<boolean>;
+    iconLeft: Nullable<ConcreteComponent>;
+    iconRight: Nullable<ConcreteComponent>;
+    hideText: boolean;
+    foregroundLink: boolean;
+}>;
+export default _sfc_main;