@intellias/menu 1.0.2 → 1.0.5

package/README.md

@@ -1,52 +1,73 @@
 # intems-menu
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run dev
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### NPM publish guideline:
-1.	Login to NPM
+
+1. Login to NPM
+
 #### If you aren't already logged in, you should use corporate npm account(intems) to get access to this package, as it's private on npm. Use user that's added as a collaborator to organization, or organization account.
+
 ```
 npm login
 
 ```
-2.	Build
+
+2. Build
+
 ```
 npm run dev
 ```
-3.	Publish
+
+3. Publish
+
 ```
 npm publish
 ```
 
-# Introduction 
+# Introduction
+
 Entry point of the project is "wrapper.ts" file. Here our component is registered, all data transfered to it from options parameter. MenuOptions interface is declaring, which options can be passed when importing module. If there's a demand to add anything new, you can extend this interface and add necessary data. It's automatically parsed and sent as props to "./Menu.vue" component.
 
 # Using the Package
+
 Since now have our package published, Let's take a look at how we can use this package in other repositories
 
 To Install
+
 ```
 npm install --save @intellias/menu
 ```
+
 Once you have installed the package, in your entry file of the repository (wrapper.ts) if you are using it in a Vue CLI project. Write the import command
 
 ```
 import MainMenu, { MenuOptions, ProjectNameType } from '@intellias/menu';
+// Importing necessary chunks for dynamic modules from menu( will be fixed if moving to webpack ^5.0.0)
+import '@intellias/menu/dist/js/kudosForm.js';
+import '@intellias/menu/dist/js/vendors~kudosForm.js';
+import '@intellias/menu/dist/js/rejectComponent.js';
+import '@intellias/menu/dist/js/vendors~kudosForm~rejectComponent.js';
+import '@intellias/menu/dist/js/vue.js';
 
 ```
+
 To install it globally.
 
 ```
@@ -57,6 +78,13 @@ const menuOptions: MenuOptions = {
 
 ```
 
+It's also necessary to install styles(You can import them to App.vue or main.scss file) as follows:
+
+```
+import MainMenu, { MenuOptions, ProjectNameType } from '@intellias/menu/dist/css/main.css'  // Menu css import must be here for correct adding to the DOM
+
+```
+
 ## MenuOptions explained
 
 ```
@@ -70,21 +98,24 @@ export interface MenuOptions {
 
 ```
 
-- projectName -> provide specific value from ProjectName enum (Lite/IntelliHub/ManagersPortal)
-- storeAdapter -> provide necessary Vuex store adapters( StoreAdapter)
-- subMenus -> provide subMenuList object, optional. DEMANDED ONLY WHEN IMPORTING TO LITE PROJECT (@app/core/helpers/sub-menu/SubMenuList)
-- helperFunctions -> provide necessary helpers functions (add getUrlPathByName from @/bootstrap/vue-router)
+-   projectName -> provide specific value from ProjectName enum (Lite/IntelliHub/ManagersPortal)
+-   storeAdapter -> provide necessary Vuex store adapters( StoreAdapter)
+-   subMenus -> provide subMenuList object, optional. DEMANDED ONLY WHEN IMPORTING TO LITE PROJECT (@app/core/helpers/sub-menu/SubMenuList)
+-   helperFunctions -> provide necessary helpers functions (add getUrlPathByName from @/bootstrap/vue-router)
 
 # Updating the package and versioning
+
 So you have the package published on NPM and now you need to change certain things on the package and re-publish it with new changes. This process involves a list of steps which I am listing down below.
 
 Make changes to the codebase
 Before we can publish the changes we need to make sure the working directory is clean
+
 ```
 git add -A
 
 git commit -m "Fix bug in the package"
 ```
+
 Increment the version number in NPM
 NPM follows the semantic version (semver) versions, in which each number denotes if it's a major release, minor change, or a patch fix. (Read details about semver here )
 
@@ -94,6 +125,7 @@ In this case, let's just bump the patch version by 1
 npm version patch -m "Minor changes to the Hello World Text"
 
 ```
+
 This will update the version number in your package.json file.
 
 And since we have the GitHub repository linked to the npm. It will also create a tag for the bumped up version number.
@@ -104,12 +136,14 @@ Run the following command to check the latest tag
 git tag
 
 ```
+
 Next up, push the latest changes to git along with the new tag.
 
 ```
 git push --follow-tags
 
 ```
+
 Now you can go ahead and publish the new changes on npm
 
 ```
@@ -118,4 +152,5 @@ npm publish
 ```
 
 # Additional information
-- [Full guideline of using package is shown here](https://5balloons.info/create-publish-you-first-vue-plugin-on-npm-the-right-way/)
+
+-   [Full guideline of using package is shown here](https://5balloons.info/create-publish-you-first-vue-plugin-on-npm-the-right-way/)

package/dist/css/main.css

@@ -172,6 +172,25 @@
   align-items: center;
   padding: 0 30px 0 0;
 }
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 .notification-manage-toggler {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  width: 20px;
+  height: 64px;
+  line-height: 64px;
+  cursor: pointer;
+}
+.notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .col.s2 .notification-manage-toggler span {
+  background-color: #94a3b8;
+  width: 4px;
+  height: 4px;
+  display: inline-block;
+  border-radius: 50%;
+  margin: 1px auto;
+}
 .notifications-sidebar .v-dropdown-menu__container .v-dropdown-menu__header .note-title-row .sub-menu {
   border: 1px #cbd5e1 solid;
   border-radius: 2px;
@@ -537,9 +556,8 @@
 .modal-wrapper {
   padding-bottom: 1rem;
   border-radius: 6px !important;
-  background-color: #ffffff !important;
+  background-color: #ffffff;
   box-shadow: 0 15px 30px rgba(37, 55, 70, 0.202715);
-  color: #1a2732;
 }
 .modal-header {
   display: flex;
@@ -547,6 +565,7 @@
   padding: 2rem 2rem 1rem 2rem;
   font-size: 1.25rem;
   font-weight: bold;
+  color: #1a2732 !important;
 }
 .modal-header i.icon:before {
   background-color: #1a2732 !important;
@@ -1562,3 +1581,137 @@ a:hover {
   text-decoration: none;
   color: #008c79;
 }
+.modal.confirm {
+  box-sizing: border-box;
+  min-width: 280px;
+  min-height: 150px;
+  flex-direction: column;
+  background-color: #ffffff;
+  position: fixed;
+}
+.modal.confirm.open {
+  display: flex !important;
+}
+.modal.confirm .header {
+  padding-bottom: 10px;
+}
+.modal.confirm .header i.modal-close {
+  float: right;
+  height: 24px;
+  line-height: 24px;
+}
+.modal.confirm .header h3 {
+  color: #1a2732;
+}
+.modal.confirm .header + .modal-footer {
+  padding-top: 30px;
+}
+.modal.confirm .modal-content {
+  white-space: normal;
+  color: #1a2732;
+  overflow: initial;
+  font-weight: normal;
+  line-height: normal;
+  margin-right: 0;
+  padding-right: 0;
+}
+.give-kudos .user ul {
+  max-height: 200px;
+}
+.give-kudos a {
+  font-weight: bold;
+}
+.give-kudos .subtitle {
+  padding: 0px 0 30px 0;
+}
+.give-kudos .form {
+  display: grid;
+  grid-template-columns: auto 207px;
+  grid-gap: 15px;
+  /* Chrome, Safari, Edge, Opera */
+  /* Firefox */
+}
+.give-kudos .form .vs__selected-options {
+  flex-wrap: nowrap;
+}
+.give-kudos .form .vs__selected-options span.vs__selected {
+  white-space: nowrap;
+}
+.give-kudos .form .kudos-quantity {
+  height: 38px;
+  margin: 0;
+  border: solid 1px #cbd5e1;
+  background-color: #ffffff;
+  padding: 0 15px;
+  width: 175px;
+}
+.give-kudos .form .kudos-quantity.theme-reactive {
+  border: solid 1px var(--border);
+  background-color: var(--surface-primary);
+  color: var(--text-primary);
+}
+.give-kudos .form .kudos-quantity:focus,
+.give-kudos .form .kudos-quantity:active,
+.give-kudos .form .kudos-quantity:focus-visible {
+  border: solid 1px #00a58e !important;
+  box-shadow: none;
+  outline: none !important;
+}
+.give-kudos .form input::-webkit-outer-spin-button,
+.give-kudos .form input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.give-kudos .form input[type=number] {
+  -moz-appearance: textfield;
+}
+.give-kudos .form .user {
+  grid-column: span 2;
+  margin-right: 1px;
+}
+.give-kudos .form .block-kudos-quantity {
+  width: 190px;
+}
+.give-kudos .form .block-kudos-category {
+  margin-right: 5px;
+}
+.give-kudos .form .description {
+  grid-column: span 2;
+  margin-right: 1px;
+}
+.give-kudos .form .description textarea {
+  resize: none;
+  min-height: 100px;
+  max-height: 300px;
+  min-width: 100%;
+  max-width: 100%;
+  border-radius: 2px;
+  outline: none;
+  padding: 10px;
+}
+.give-kudos .form .description textarea.theme-reactive {
+  border: solid 1px var(--border);
+  background-color: var(--surface-primary);
+  color: var(--text-primary);
+}
+.give-kudos .form .description textarea.theme-reactive:focus {
+  border: solid 1px var(--accent-primary);
+}
+.give-kudos .form label {
+  display: flex;
+  font-size: 0.94rem;
+  margin-bottom: 10px;
+  color: var(--text-primary);
+}
+.give-kudos .form .error {
+  font-size: 0.8rem;
+}
+.give-kudos .form .error-field {
+  border: solid 1px var(--error);
+}
+.give-kudos button.btn-large[disabled] {
+  background-color: #c2e9e4 !important;
+}
+.give-kudos .vs__clear svg {
+  display: none;
+}

package/dist/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Webpack App</title>
+  <link href="/css/main.css" rel="stylesheet"></head>
+  <body>
+  <script type="text/javascript" src="/js/main.js"></script></body>
+</html>