Benjamin Ottensten
fc76fd9f4f
* Update header navigation Logo, share button color, breadcrumb colors, spacings * Updates to main button component Shadows, border on secondary button, less spacings to icons * Update spacings in dialog after bew button styling * Use secondary button in embed dialog * Update select inputs Spacing, icon, border on dropdown, smaller avatars * Update inputs to use the new styling * Various copy updates * Update icons Smaller icons, outline instead of solid, removed some icons that were unnecessary * Switch order of actions in Delete dialog * Update styling of inline New model action * Remove strange BG effect on comments component * Update styling of hide/isolate actions in viewer Was necessary after the button styling change. But new copy also makes it more usable. * Fix alignment issue in selection info panel * Align styling in Viewer panel component * Clean up measure usage tips A permanent "Right click to cancel measurement" tip isn't needed * Panel spacing * Update actions in the add model to viewer dialog * Update permissions input in new project dialog * Two minor things * Remove unnecessary flex classes --------- Co-authored-by: andrewwallacespeckle <andrew@speckle.systems>
ui-components
Speckle UI component library built with Vue 3 and relying on the Speckle Tailwind theme.
Setup
- Make sure you have
@speckle/tailwind-themeinstalled and set up with Tailwind - Install
@speckle/ui-components - In your tailwind config import
tailwindContentEntryfrom@speckle/ui-components/tailwind-configureand invoke it in thecontentsfield to ensure PurgeCSS is configured correctly. It requires the CJSrequireobject as its only parameter. If it isn't available (in an ESM environment), you can use node'screateRequire(). - Import
@speckle/ui-components/style.cssin your app. Ifexportsmap 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