@intellias/menu 1.0.2 → 1.0.5

package/components/user-picture/UserPicture.scss

@@ -1,62 +0,0 @@
-@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

@@ -1,105 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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

@@ -1,112 +0,0 @@
-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

@@ -1,68 +0,0 @@
-<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

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

package/dist/css/1.css

@@ -1,85 +0,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 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

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

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

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

@@ -1,34 +0,0 @@
-.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/html/app.html

@@ -1,19 +0,0 @@
-Html Webpack Plugin:
-<pre>
-  TypeError: Cannot read properties of undefined (reading 'entry')
-  
-  - loader.js:4 eval
-    [app.html?.]/[html-webpack-plugin]/lib/loader.js:4:45
-  
-  - loader.js:9 module.exports
-    [app.html?.]/[html-webpack-plugin]/lib/loader.js:9:3
-  
-  - index.js:284 
-    [intems-menu]/[html-webpack-plugin]/index.js:284:18
-  
-  - runMicrotasks
-  
-  - task_queues:96 processTicksAndRejections
-    node:internal/process/task_queues:96:5
-  
-</pre>

package/dist/html/styles.html

@@ -1 +0,0 @@
-<link href="/css/main.css" rel="stylesheet">