vueMcCownGordonUI

Shared styles, libraries, and Vue components that are used across various apps

Must use YARN BUILD to properly build. Could use yarn run build ;; npm publish to publish a new update to NPM

Developing Locally

Now supports Node 14+. Make sure to delete the node_modules folder and run npm install when switching Node versions.

Run npm link inside the root directory of this project. Then run npm run build to compile the code. In the project that is using this library run npm link "@mccowngordon/vue-ui-components" to tell that project to use this directory locally. When finished run npm unlink "@mccowngordon/vue-ui-components" to change it back to the actual downloaded npm package.

Confetti

App.vue contains an example of how to use the new Confetti component.

<Confetti ref="confetti" />

(this.$refs.confetti as any).initBurst();

Must have the component on the page and then using the ref of the component call initBurst() to show the confetti

Input Mask

If a project needs to make sure an input field conforms to a certain format (such as project numbers) then use V-Mask

import VueMask from "v-mask";
Vue.use(VueMask);

Permissions

At least one SharePoint App must have the following permissions defined in config/package-solution.json :

({
    "resource": "Microsoft Graph",
    "scope": "People.Read"
},
{
    "resource": "Microsoft Graph",
    "scope": "People.Read.All"
})

And then go to {tenant}-admin.sharepoint.com and Advanced > API to approve permissions. This permission must be granted in order for the Associate Picker to work properly.

Notes:

• Bootstrap (version 4 and 5, this project is using version 4) does NOT support SASS modules (@use instead of @import). After investigating, it is fine to use @import but in October 2022 it MIGHT be deprecated, and if that's the case we just need to lock in the SASS version that still supports @import