Files
speckle-server/packages/ui-components
andrewwallacespeckle ff6433128a FE2 - Embedding (#1979)
* Add Dialog

* Add options to embed dialog

* Min Height of Clipboard Input multiline to 3 lines

* Check for visibility

* Link to change access of project

* Rename to guided mode

* Change icon when user clicks copy button

* Update Menu styles based on agi feedback

* Update graphql.ts

* Embed Options as hashState

* Auto grow Clipboard Input

* embed state and more options

* Tidyups

* Footer only shows when !embedOptions.isTransparent

* Add auto/manual Load

* Add Pre setup component

* WIP Button Group mobile

* Updates around manual load

* Viewer Share nav

* Add embed dialog to project page

* Minor fixes

* Check for federated

* Responsive Tidyups

* Responsive Fixes. Fix console issues

* Add Alert to Version Embed

* Disable Zoom

* GQL updates

* Comment Slideshow

* GraphQl changes

* Fix visibility

* Build fix

* Revert "Build fix"

This reverts commit 0e706cbd9fde78204032bb1ec4421b1742d023ac.

* remove unneeded change, revert yarn.lock

* Test Commit

* Remove commit test

* Fix build

* Update Tailwind. Add base url env

* fix for portal scope issue

* useLogger

* useLogger

* chore(fe2): include NUXT_PUBLIC_BASE_URL in deployment manifests

* lazy load optimization

* lint fixes

* Updates

* Re-add guided open Dialog sections

* Prevent login popup on embed

* Tidy up mobile combined button group

* Tidy up embed Dialogs

* Small styling issues

* Update scrolling in embed dialog

* Move selection info when embed

* Testing fixes

* Discuss in Speckle

* Responsive Dialog Changes

* Fix bug

* WIP Manual Load

* Fix nuxt errors

* Fix nuxt logger issue

* Fix embed dialog overflows

* New Dialog layout

* Responsive Breakpoint change

* Preview Image

* Fix bug with dialogSection

* Hide selection info on mobile when thread is open

* Footer Model Name

* Overflow on ClipboardInput

* Style fixes

* Tidy ups

* Responsive updates

* Responsive fixes

* Update button

* Changes from testing

* Fix embed height with footer

* Fix Dialog Section

* Fixes from testing

* Move "reset filters" on embed

* Small fixes

* Updates from CR 1

* CR Comments 2

* Updates from CR

* Add deserializeEmbedOptions helper

* DialogSection changes

* Revert changes in TextArea

* Updates from CR

* Only check for noscroll in watch

* Update useRoute

* Comment Slideshow mode

* Changes from testing

* Fix mobile share button

* onMounted warn fixes

* Updates from testing

* Remove nesting of ManualLoad

* Keep Speckle text on mobile

* minor cleanup & bugfixes

* Add target prop to Logo

* navbar flash fix + more cleanup

* Fix urls

* Footer Logo changes

* Remove viewer-transparent from layout

* Add Reply in Speckle

* Remove Anchored Points from embed

* Final changes pre CR

* Fix Anchored Points

* Update packages/frontend-2/components/project/model-page/dialog/embed/Embed.vue

Co-authored-by: Kristaps Fabians Geikins <fabians@speckle.systems>

* Fixes from CR

* Updates from cr

* Changes WIP

* Fix for dialog opening

* Changes from PR

* Updates to check embed in activity

* fix(fe2): project settings dialog error

* Make Team open section on click of "Manage"

* Fixes from merge

* Changes from cr

* Compare old to new in watch

* Fix logo in footer of embed

* Fixes from merge

* Fix build. Fix lazy load

* Updates from Benjamin

* Fix transparent bg

---------

Co-authored-by: Kristaps Fabians Geikins <fabis94@live.com>
Co-authored-by: Iain Sproat <68657+iainsproat@users.noreply.github.com>
Co-authored-by: Kristaps Fabians Geikins <fabians@speckle.systems>
2024-02-06 10:38:22 +00:00
..
2024-02-06 10:38:22 +00:00

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
  2. Install @speckle/ui-components
  3. 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().
  4. 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!

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