@intellias/menu 1.0.0

package/components/user-picture/UserPicture.scss

@@ -0,0 +1,62 @@
+@use "sass:map";
+@import "../../scss/components/variables";
+
+.image-wrapper {
+    &.sm {
+        width: 35px;
+        height: 35px;
+        .user-image {
+            border: 1px solid map.get($intems-colors, "border");
+            &.anonymous {
+                font-size: $font-size-12;
+            }
+        }
+    }
+    &.md {
+        height: 44px;
+        width: 44px;
+        .user-image {
+            border: 1px solid map.get($intems-colors, "border");
+            &.anonymous {
+                font-size: $font-size-16;
+                color: map.get($intems-colors, "text-disable");
+            }
+        }
+    }
+    &.lg {
+        height: 96px;
+        width: 96px;
+    }
+    &.xl {
+        height: 128px;
+        width: 128px;
+        .user-image.anonymous {
+            font-size: $font-size-50;
+            color: map.get($intems-colors, "text-disable");
+        }
+    }
+    .user-image {
+        border: 2px solid map.get($intems-colors, "border");
+        border-radius: 50%;
+        overflow: hidden;
+        width: inherit;
+        height: inherit;
+
+        &img {
+            object-fit: cover;
+        }
+        &.anonymous {
+            background-color: map.get($intems-colors, "background");
+            font-size: $font-size-40;
+            color: map.get($intems-colors, "text-disable");
+            font-weight: 600;
+            text-transform: uppercase;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+    &.no-border .user-image {
+        border: none;
+    }
+}

package/components/user-picture/UserPicture.ts

@@ -0,0 +1,105 @@
+import { PropType } from "vue";
+import { VueLazyloadImage } from "vue-lazyload";
+import PublicInfoModel from "../../models/PublicInfoModel";
+
+enum Size {
+  sm = "sm",
+  md = "md",
+  lg = "lg",
+  xl = "xl",
+  full = "full",
+}
+
+interface IPictureOptions {
+  size: Size;
+  noBorder: boolean;
+}
+
+const OPTIONS: IPictureOptions = {
+  size: Size.md,
+  noBorder: false,
+};
+
+export interface IPictureModel {
+  avatar_url: string;
+  thumbnail_url: string;
+  first_name: string;
+  last_name: string;
+}
+const EMPTY_MODEL: IPictureModel = {
+  avatar_url: "",
+  first_name: "",
+  last_name: "",
+  thumbnail_url: "",
+};
+export default {
+  props: {
+    employee: {} as PublicInfoModel | IPictureModel,
+    options: {} as PropType<IPictureOptions>,
+  },
+  mounted(): void {
+    this.cOptions = { ...OPTIONS, ...this.options };
+    this.pictureModel = this.toPictureModel();
+  },
+  watch: {
+    employee: {
+      deep: true,
+      handler(newVal: IPictureModel, oldVal: IPictureModel): void {
+        if (newVal.avatar_url && newVal.avatar_url !== oldVal.avatar_url) {
+          this.anonymous = false;
+        }
+        this.pictureModel = this.toPictureModel();
+      },
+    },
+  },
+  computed: {
+    image(): VueLazyloadImage {
+      return {
+        src: this.imageUrl,
+        error: `not-image`,
+      } as VueLazyloadImage;
+    },
+    imageUrl(): string {
+      return [Size.sm, Size.md].includes(this.cOptions.size) &&
+        this.pictureModel.thumbnail_url
+        ? this.pictureModel.thumbnail_url
+        : this.pictureModel.avatar_url;
+    },
+    imageAlt(): string {
+      return `${this.pictureModel.first_name} ${this.pictureModel.last_name} avatar`;
+    },
+    employeeInitials(): string {
+      return `${
+        typeof this.pictureModel.first_name === "string"
+          ? this.pictureModel.first_name.substring(0, 1)
+          : ""
+      }${
+        typeof this.pictureModel.last_name === "string"
+          ? this.pictureModel.last_name.substring(0, 1)
+          : ""
+      }`;
+    },
+    border(): string {
+      return this.cOptions.noBorder ? "no-border" : "";
+    },
+  },
+  methods: {
+    replaceByAnonymous(): void {
+      this.anonymous = true;
+    },
+    toPictureModel(): IPictureModel {
+      if (this.employee === undefined) {
+        return EMPTY_MODEL as IPictureModel;
+      }
+
+      return { ...EMPTY_MODEL, ...this.employee };
+    },
+  },
+  data(): Record<string, unknown> {
+    return {
+      anonymous: false,
+      cOptions: {} as IPictureOptions,
+      pictureModel: {} as IPictureModel,
+    };
+  },
+};

package/components/user-picture/UserPicture.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="image-wrapper" :class="[cOptions.size, border]">
+    <img
+      v-if="imageUrl && !anonymous"
+      class="user-image"
+      v-lazy="image"
+      :alt="imageAlt"
+      @error="replaceByAnonymous"
+    />
+    <div v-else class="user-image anonymous" :title="imageAlt">
+      <span>{{ employeeInitials }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import UserPicture from "./UserPicture";
+
+export default UserPicture;
+</script>
+<style lang="scss">
+@import "UserPicture";
+</style>

package/components/v-select-intems/VSelectIntems.ts

@@ -0,0 +1,112 @@
+import vSelect from "vue-select";
+import debounce from "lodash.debounce";
+import UserPicture from "../user-picture/UserPicture.vue";
+import UserListModel from "../give-kudos-form/models/UserListModel";
+import OpenIndicator from "./open-indicator/OpenIndicator.vue";
+
+export default {
+  components: { UserPicture, vSelect },
+  props: ["data", "value"],
+  methods: {
+    onInput(val): void {
+      this.$emit("input", val);
+    },
+    handlers(map, vm) {
+      const choose = (e) => {
+        e.preventDefault();
+
+        if (
+          vm.filteredOptions.length === 1 &&
+          vm.filteredOptions[0] instanceof UserListModel &&
+          vm.filteredOptions[0].disabled_option
+        ) {
+          return false;
+        }
+        vm.typeAheadSelect();
+      };
+
+      return {
+        ...map,
+        13: choose,
+      };
+    },
+    opened(): void {
+      this.$emit("open");
+
+      const comboboxEl = this.toggleElement;
+      const selectedEl = this.$el.getElementsByClassName("vs__selected")[0];
+      if (this.data.multiple || !comboboxEl || !selectedEl) {
+        return;
+      }
+
+      comboboxEl.style.height = `${selectedEl.offsetHeight + 9}px`;
+    },
+    search: debounce(function (val) {
+      if (val) {
+        this.$emit("search", val);
+      }
+    }, 500),
+    selected(val): void {
+      this.$emit("selected", val);
+    },
+    deselected(val): void {
+      this.$emit("deselected", val);
+    },
+    selecting(val): void {
+      this.$emit("selecting", val);
+    },
+    deselecting(val): void {
+      this.$emit("deselecting", val);
+    },
+    closed(): void {
+      this.$emit("close");
+
+      const comboboxEl = this.toggleElement;
+      if (this.data.multiple && !comboboxEl) {
+        return;
+      }
+
+      comboboxEl.style.height = null;
+    },
+  },
+  computed: {
+    toggleElement(): Element {
+      return this.$el.getElementsByClassName("vs__dropdown-toggle")[0];
+    },
+    filterBy() {
+      return this.data.filterBy
+        ? (
+            option: Record<string, unknown>,
+            label: string,
+            search: string
+          ): boolean => {
+            let searchString = "";
+            this.data.filterBy.forEach((field) => {
+              searchString +=
+                option[field] !== undefined ? ` ${option[field]}` : "";
+            });
+
+            return (
+              searchString.toLowerCase().indexOf(search.toLowerCase()) > -1
+            );
+          }
+        : undefined;
+    },
+    showOptionsWithAvatars(): boolean {
+      return this.data.class && this.data.class["select-with-avatars"];
+    },
+    customOption(): boolean {
+      return this.showOptionsWithAvatars;
+    },
+  },
+  data(): Record<string, unknown> {
+    return {
+      Deselect,
+      OpenIndicator,
+      attributes: {
+        ref: "openIndicator",
+        role: "presentation",
+      },
+    };
+  },
+};

package/components/v-select-intems/VSelectIntems.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-select
+    :selectable="(item) => !item.disabled_option"
+    :value="value"
+    @input="onInput"
+    v-bind="data"
+    :components="{ OpenIndicator }"
+    v-bind:filterBy="filterBy"
+    :map-keydown="handlers"
+    @open="opened"
+    @close="closed"
+    @search="search"
+    @option:selected="selected"
+    @option:deselected="deselected"
+    @option:selecting="selecting"
+    @option:deselecting="deselecting"
+  >
+    <template
+      slot="selected-option"
+      v-if="showOptionsWithAvatars"
+      slot-scope="option"
+    >
+      <div class="option-with-image">
+        <user-picture
+          :employee="option"
+          :options="{ size: 'sm' }"
+        ></user-picture>
+        <div class="option-value">
+          <div class="label">{{ option[data.label] }}</div>
+          <div class="position">
+            {{ option.position }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <template slot="option" slot-scope="option">
+      <div>
+        <user-picture
+          :employee="option"
+          :options="{ size: 'sm' }"
+        ></user-picture>
+        <span class="text-wrapper"> {{ option[data.label] }}</span>
+      </div>
+    </template>
+    <template slot="option" v-if="customOption" slot-scope="option">
+      <div class="option-with-image" v-if="showOptionsWithAvatars">
+        <user-picture
+          :employee="option"
+          :options="{ size: 'sm' }"
+        ></user-picture>
+        <div class="text-block">
+          <span class="text-name"> {{ option[data.label] }}</span>
+          <br />
+          <span class="text-position"> {{ option.position }}</span>
+        </div>
+      </div>
+    </template>
+
+    <template #list-footer>
+      <slot name="list-footer"></slot>
+    </template>
+  </v-select>
+</template>
+<script>
+import VSelectIntems from "./VSelectIntems";
+
+export default VSelectIntems;
+</script>

package/components/v-select-intems/open-indicator/OpenIndicator.vue

@@ -0,0 +1,3 @@
+<template>
+    <i  class="icon icon-small arrow-down"></i>
+</template>

package/dist/css/1.css

@@ -0,0 +1,85 @@
+.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 input.kudos-quantity:focus {
+  border: solid 1px #00a58e;
+  box-shadow: none;
+}
+.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;
+  border: solid 1px #cbd5e1;
+  outline: none;
+  padding: 10px;
+}
+.give-kudos .form label {
+  display: flex;
+  font-size: 0.94rem;
+  margin-bottom: 10px;
+  color: #1a2732;
+}
+.give-kudos .form .error {
+  font-size: 0.8rem;
+}
+.give-kudos .form .error-field {
+  border: solid 1px #da1e28;
+}
+.give-kudos button.btn-large[disabled] {
+  background-color: #c2e9e4 !important;
+}
+.give-kudos .vs__clear svg {
+  display: none;
+}

package/dist/css/2.css

@@ -0,0 +1,34 @@
+.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;
+}

package/dist/css/3.css

@@ -0,0 +1,34 @@
+.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;
+}

package/dist/css/4.css

@@ -0,0 +1,34 @@
+.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;
+}

package/dist/css/5.css

@@ -0,0 +1,34 @@
+.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;
+}