* Layout Pages * Add Multi Select with Badges * Add MultiBadge * Add prevent close on click outside * Fix import issue * Import Table * Add Classnames to buttons * Add Switch Component * Update for webhooks * skip precommit hooks * Remove Infinite Load. Update Types * Create Webhook Dialog * Tidy Ups * Edit Webhook dialog * WIP Breadcurmbs * Changes from calls with Fabians * Breadcrumbs * Reorders * Fix Create Dialog * Rename MultiBadge to BadgeSelected * Fix and update Story file for Table * Adjust Padding for Buttons in Table * Add extra story, adjust padding for no buttons * Fix bug with Edit Select * fixed Webhook sorting + added Webhook.hasSecret and Webhook.projectId * fixed hydration mismatch * Changes from PR feedback * Validation Rule for Select * Reset Dialogs on Cancel. Conditionally render headers in Table * stricter webhook gql types * stricter webhook gql types * Fix initial dialogs * Quick Fixes * Add projectWebhooksRoute * Remove TableItemType * Fixes from PR * Fix broken Query * Fixes from PR * Fix based on PR * Fix from PR * Changes to index * Fix in index * Updates to Validation and Table * Add "by" prop to FormSelectBadges and renamed component * Use defineModel for Switch * Revert "Use defineModel for Switch" This reverts commit 6bc9e07a767cdc64f06c03b028150915e013ed4f. * Replace breadcrumbs with projectWebhooksRoute * Rename FormValues to WebhookFormValues * Add target blank and simplify trigger mapping * Fix casing of webhookFormValues * Change webhookModel to prevent props mutation * Remove unnecessary typecast * Webhook deletion now uses fieldNameWhitelist. * Use convertThrowIntoFetchResult and getFirstErrorMessage in Create * Use defineModel for handling open state of Dialogs * Optimise Switch component with defineModel * Merge Create and Edit Dialogs * Fix issue with Status Icons * Remove console log * WIP Merge of Edit and Create * Add optional placeholder to SelectBase. Update Events placeholder. * Add secret to Create webhook dialog * Update Watch * Rename Dialogs. Fix active select items * Fix Select active items * Simplify triggers, add secret to create call * Remove $webhooksId: String * fix: stale form state across edit/create webhook dialog sessions * Fix from PR * Swap t.text for t.id * Use enum for historyStatus * Use consistent story formatting * More consistent create/edit mutations * fix be linting errors --------- Co-authored-by: Kristaps Fabians Geikins <fabis94@live.com>
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