@eturnity/eturnity_reusable_components 7.20.0 → 7.22.1

package/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ['@vue/cli-plugin-babel/preset']
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.20.0",
+  "version": "7.22.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -23,7 +23,6 @@
   },
   "devDependencies": {
     "@babel/core": "7.12.16",
-    "@babel/eslint-parser": "7.12.16",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",

package/src/assets/svgIcons/clock_full.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM5.875 5.05243V2.125H4.125V5.92743L6.19061 7.47663L7.24061 6.07663L5.875 5.05243Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/height_equalize.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99482 2.7C4.49188 2.7 4.89482 2.29706 4.89482 1.8C4.89482 1.30294 4.49188 0.9 3.99482 0.9C3.49777 0.9 3.09482 1.30294 3.09482 1.8C3.09482 2.29706 3.49777 2.7 3.99482 2.7ZM5.79482 1.8C5.79482 2.50671 5.38756 3.11829 4.79492 3.41285V4H5.80557L4.00557 6L2.20557 4H3.19492L3.19492 3.41294C2.60218 3.11842 2.19482 2.50678 2.19482 1.8C2.19482 0.805887 3.00071 0 3.99482 0C4.98894 0 5.79482 0.805887 5.79482 1.8ZM10.8948 1.8C10.8948 2.29706 10.4919 2.7 9.99482 2.7C9.49777 2.7 9.09482 2.29706 9.09482 1.8C9.09482 1.30294 9.49777 0.9 9.99482 0.9C10.4919 0.9 10.8948 1.30294 10.8948 1.8ZM10.7949 3.41285C11.3876 3.11829 11.7948 2.50671 11.7948 1.8C11.7948 0.805887 10.9889 0 9.99482 0C9.00071 0 8.19482 0.805887 8.19482 1.8C8.19482 2.50678 8.60218 3.11842 9.19492 3.41294V4H8.20557L10.0056 6L11.8056 4H10.7949V3.41285ZM14 7.79999L0 7.79999V6.19999L14 6.19999V7.79999ZM7.00518 11.3C6.50812 11.3 6.10518 11.7029 6.10518 12.2C6.10518 12.6971 6.50812 13.1 7.00518 13.1C7.50223 13.1 7.90518 12.6971 7.90518 12.2C7.90518 11.7029 7.50223 11.3 7.00518 11.3ZM5.20518 12.2C5.20518 11.4933 5.61244 10.8817 6.20508 10.5872L6.20508 10H5.19443L6.99443 8L8.79443 10H7.80508V10.5871C8.39782 10.8816 8.80518 11.4932 8.80518 12.2C8.80518 13.1941 7.99929 14 7.00518 14C6.01106 14 5.20518 13.1941 5.20518 12.2Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/height_snap.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.59997L14 1.59998V-2.44379e-05L0 -2.56618e-05V1.59997ZM6.10274 12.2C6.10274 11.7029 6.50568 11.3 7.00274 11.3C7.49979 11.3 7.90274 11.7029 7.90274 12.2C7.90274 12.6971 7.49979 13.1 7.00274 13.1C6.50568 13.1 6.10274 12.6971 6.10274 12.2ZM6.20264 10.5872C5.61 10.8817 5.20274 11.4933 5.20274 12.2C5.20274 13.1941 6.00862 14 7.00274 14C7.99685 14 8.80274 13.1941 8.80274 12.2C8.80274 11.4932 8.39538 10.8816 7.80264 10.5871L7.80264 4.65002H9.5L7 2.65002L4.5 4.65002H6.20264L6.20264 10.5872Z" fill="#B2B9C5"/>
+</svg>

package/src/components/filter/filterSettings.vue

@@ -100,10 +100,12 @@
                 <option-title> {{ filter.selectedText }} </option-title>
               </template>
               <template #dropdown>
-                <dropdown-checkbox-container @click.stop>
+                <dropdown-checkbox-container
+                  v-for="(filterOption, optionIdx) in filter.choices"
+                  :key="optionIdx + 'optionIdx'"
+                  @click.stop
+                >
                   <checkbox
-                    v-for="(filterOption, optionIdx) in filter.choices"
-                    :key="optionIdx + 'optionIdx'"
                     :label="filterOption.text"
                     :isChecked="filterOption.selected"
                     @on-event-handler="
@@ -268,6 +270,12 @@
         :text="buttonText.cancel"
         @click="$emit('on-cancel-view')"
       />
+      <reset-container v-if="!filterViews || !filterViews.length">
+        <reset-button @click="$emit('on-reset-filters')">
+          <icon :name="'update'" size="14px" :color="theme.colors.blue" />
+          <div>{{ $gettext('reset_filters') }}</div>
+        </reset-button>
+      </reset-container>
     </button-container>
   </container-wrapper>
 </template>
@@ -329,6 +337,16 @@ const ButtonContainer = styled.div`
   padding: 15px;
 `
 
+const ResetContainer = styled.div`
+  display: grid;
+  align-content: center;
+  margin-left: auto;
+  div {
+    margin-top: 0;
+    align-self: center;
+  }
+`
+
 const ColumnContainer = styled.div``
 
 const DragContainer = styled.div`
@@ -376,7 +394,7 @@ const DropdownCheckboxContainer = styled.div`
   display: grid;
   gap: 6px;
   width: 100%;
-  padding: 12px 10px;
+  padding: 7px 10px;
   background: ${(props) => props.theme.colors.grey5};
 `
 
@@ -455,6 +473,7 @@ export default {
     DeleteIcon,
     UpperContainer,
     ResetButton,
+    ResetContainer,
     VueDatePicker
   },
   props: {

package/src/components/filter/index.vue

@@ -70,6 +70,9 @@ export default {
     },
     settingsTranslations: {
       required: false
+    },
+    closeDropdown: {
+      required: false
     }
   },
   data() {
@@ -122,6 +125,7 @@ export default {
       this.$emit('on-filter-view-select', item)
     },
     onViewDelete(item) {
+      this.onToggleDropdown()
       this.$emit('on-filter-view-delete', item)
     },
     onApplyCurrentView() {
@@ -138,6 +142,13 @@ export default {
   },
   beforeDestroy() {
     document.removeEventListener('click', this.clickOutside)
+  },
+  watch: {
+    closeDropdown(newVal) {
+      if (newVal) {
+        this.isDropdownOpen = false
+      }
+    }
   }
 }
 </script>

package/src/components/infoText/index.vue

@@ -26,7 +26,7 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     size="20"
+//     size="20px"
 //     alignArrow="right" // which side the arrow should be on
 // />
 import theme from '../../assets/theme.js'

package/src/components/inputs/checkbox/index.vue

@@ -3,10 +3,11 @@
     <container
       :checkColor="checkColor"
       :size="size"
-      :hasLabel="hasLabel"
+      :hasLabel="label && !!label.length"
       :backgroundColor="backgroundColor"
       :isChecked="isChecked"
       :isDisabled="isDisabled"
+      :cursorType="cursorType"
     >
       <input-checkbox
         type="checkbox"
@@ -17,7 +18,7 @@
       <check-wrapper :hasLabel="hasLabel">
         <span class="checkmark"></span>
       </check-wrapper>
-      <label-text v-if="hasLabel">{{ label }}</label-text>
+      <label-text v-if="label && !!label.length">{{ label }}</label-text>
     </container>
   </component-wrapper>
 </template>
@@ -33,6 +34,7 @@
 //     size="small"
 //     backgroundColor="red"
 //     :isDisabled="true"
+//     cursorType="default"
 // />
 import styled from 'vue3-styled-components'
 
@@ -55,7 +57,8 @@ const containerAttrs = {
   hasLabel: Boolean,
   backgroundColor: String,
   isChecked: Boolean,
-  isDisabled: Boolean
+  isDisabled: Boolean,
+  cursorType: String
 }
 const Container = styled('label', containerAttrs)`
   display: grid;
@@ -64,7 +67,7 @@ const Container = styled('label', containerAttrs)`
   align-content: center;
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
   font-size: 16px;
   user-select: none;
 
@@ -89,7 +92,7 @@ const Container = styled('label', containerAttrs)`
           : props.theme.colors.green
         : props.isDisabled
         ? props.theme.colors.lightGray
-        : '#fff'};
+        : props.theme.colors.white};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
@@ -183,6 +186,10 @@ export default {
     dataId: {
       type: String,
       default: ''
+    },
+    cursorType: {
+      type: String,
+      default: 'pointer'
     }
   },
   computed: {

package/src/components/inputs/inputNumber/index.vue

@@ -560,7 +560,7 @@ export default {
       try {
         evaluatedVal = this.onEvaluateCode(event)
       } finally {
-        if (evaluatedVal) {
+        if (evaluatedVal && this.value != evaluatedVal) {
           this.$emit('on-input', evaluatedVal)
         }
       }
@@ -646,10 +646,10 @@ export default {
       }
     },
     initInteraction(e) {
+      this.focusInput()
+      e.preventDefault()
       window.addEventListener('mousemove', this.interact, false)
       window.addEventListener('mouseup', this.stopInteract, false)
-      e.preventDefault()
-      this.focusInput()
     },
     interact(e) {
       e.preventDefault()

package/src/components/inputs/inputText/index.vue

@@ -328,7 +328,7 @@ export default {
     }
   },
   methods: {
-    onEnterPress(event){
+    onEnterPress() {
       this.$emit('on-enter-click')
       this.$refs.inputElement.$el.blur()
     },

package/src/components/inputs/select/index.vue

@@ -1,12 +1,14 @@
 <template>
   <Container
     :selectWidth="selectWidth"
+    :noRelative="noRelative"
     @mouseenter="mouseEnterHandler"
     @mouseleave="mouseLeaveHandler"
   >
     <input-wrapper
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
+      :noRelative="noRelative"
     >
       <label-wrapper v-if="label" :data-id="labelDataId">
         <input-label
@@ -47,6 +49,9 @@
           :showBorder="showBorder"
           :data-id="dataId"
           :paddingLeft="paddingLeft"
+          :tablePaddingLeft="tablePaddingLeft"
+          :noRelative="noRelative"
+          :showDisabledBackground="showDisabledBackground"
         >
           <draggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
@@ -76,7 +81,7 @@
           >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
-          <Caret @click.stop="toggleCaretDropdown">
+          <Caret @click.stop="toggleCaretDropdown" class="caret_dropdown">
             <icon
               v-if="isDropdownOpen"
               name="arrow_up"
@@ -99,7 +104,7 @@
             />
           </Caret>
         </selectButton>
-        <DropdownWrapper ref="dropdownWrapperRef">
+        <DropdownWrapper ref="dropdownWrapperRef" :noRelative="noRelative">
           <Teleport to="#portal-target">
             <selectDropdown
               ref="dropdown"
@@ -118,10 +123,13 @@
               :fontColor="
                 dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
               "
+              :noRelative="noRelative"
               :fontSize="fontSize"
+              :minWidth="minWidth"
               :selectedValue="selectedValue"
               @option-selected="optionSelected"
               @option-hovered="optionHovered"
+              @mouseleave="optionLeave"
             >
               <slot name="dropdown"></slot>
             </selectDropdown>
@@ -212,11 +220,12 @@ const optionalLabel = styled.span`
 `
 const inputProps = {
   selectWidth: String,
-  optionWidth: String
+  optionWidth: String,
+  noRelative: Boolean
 }
 const Container = styled('div', inputProps)`
   width: ${(props) => props.selectWidth};
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: inline-block;
 `
 const LabelWrapper = styled.div`
@@ -245,15 +254,26 @@ const selectButtonAttrs = {
   selectMinHeight: String,
   hasNoPadding: Boolean,
   showBorder: Boolean,
-  paddingLeft: String
+  paddingLeft: String,
+  noRelative: Boolean,
+  tablePaddingLeft: String,
+  showDisabledBackground: Boolean
 }
 const selectButton = styled('div', selectButtonAttrs)`
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   box-sizing: border-box;
   border-radius: 4px;
   max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
   ${(props) =>
-    props.hasNoPadding ? '' : `padding-left: ${props.paddingLeft}`};
+    props.isSearchBarVisible
+      ? ''
+      : `padding-left: ${
+          props.hasNoPadding
+            ? '0'
+            : props.tablePaddingLeft
+            ? props.tablePaddingLeft
+            : props.paddingLeft
+        }`};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -274,7 +294,7 @@ const selectButton = styled('div', selectButtonAttrs)`
     }
   `}
   background-color:${(props) =>
-    props.disabled
+    props.disabled && props.showDisabledBackground
       ? props.theme.colors.grey5
       : props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -300,13 +320,16 @@ const selectDropdownAttrs = {
   fontSize: String,
   dropdownPosition: Object,
   hoveredValue: Number | String,
-  selectedValue: Number | String
+  selectedValue: Number | String,
+  noRelative: Boolean,
+  minWidth: String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
   box-sizing: border-box;
   z-index: ${(props) => (props.isActive ? '2' : '99999')};
   position: absolute;
-  top: ${(props) => props.dropdownPosition?.top}px;
+  top: ${(props) =>
+    props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
   left: ${(props) => props.dropdownPosition?.left}px;
   border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
@@ -316,6 +339,12 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
   padding: 0px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
+  min-width: ${(props) =>
+    props.minWidth
+      ? props.minWidth
+      : props.optionWidth
+      ? props.optionWidth
+      : '100%'};
   background-color: ${(props) =>
     props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
@@ -335,12 +364,17 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
   font-size: ${(props) => props.fontSize};
 `
 selectDropdown.emits = ['option-hovered', 'option-selected']
-const DropdownWrapper = styled('div')`
-  position: relative;
+const DropdownAttrs = { noRelative: Boolean }
+const DropdownWrapper = styled('div', DropdownAttrs)`
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
 `
-const inputAttrs = { alignItems: String, hasLabel: Boolean }
+const inputAttrs = {
+  alignItems: String,
+  hasLabel: Boolean,
+  noRelative: Boolean
+}
 const InputWrapper = styled('div', inputAttrs)`
-  position: relative;
+  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: grid;
   align-items: center;
   gap: 8px;
@@ -369,6 +403,10 @@ export default {
       required: false,
       default: '13px'
     },
+    noRelative: {
+      required: false,
+      default: false
+    },
     label: {
       required: false
     },
@@ -401,6 +439,9 @@ export default {
       required: false,
       default: '36px'
     },
+    minWidth: {
+      required: false
+    },
     optionWidth: {
       required: false,
       default: null
@@ -476,6 +517,13 @@ export default {
       type: Boolean,
       default: false
     },
+    tablePaddingLeft: {
+      required: false
+    },
+    showDisabledBackground: {
+      required: false,
+      default: true
+    },
     minOptionLength: {
       type: Number,
       default: MIN_OPTION_LENGTH

package/src/components/inputs/select/option/index.vue

@@ -16,6 +16,7 @@
     :disabledTextColor="disabledTextColor"
     :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
     :title="hoverText"
+    :minWidth="minWidth"
     :padding="padding"
   >
     <slot></slot>
@@ -31,6 +32,7 @@ const optionProps = {
   hoveredBgColor: String,
   cursorType: String,
   backgroundColor: String,
+  minWidth: String,
   disabledBgColor: String,
   disabledTextColor: String,
   padding: String
@@ -44,6 +46,7 @@ const optionContainer = styled('div', optionProps)`
   padding: ${(props) => props.padding};
   gap: 14px;
   width: 100%;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors[props.disabledBgColor]
@@ -106,6 +109,9 @@ export default {
       required: false,
       default: false
     },
+    minWidth: {
+      required: false
+    },
     disabledBgColor: {
       required: false,
       default: 'white'

package/src/components/inputs/textAreaInput/index.vue

@@ -49,7 +49,7 @@
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
 //     :isDisabled="true"
-// .   fontSize="13px"
+//     fontSize="13px"
 // />
 import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'

package/src/components/markerItem/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <page-container>
+    <marker-container
+      :backgroundColor="backgroundColor"
+      :hasIcon="!!iconName"
+      :cursor="cursor"
+    >
+      <icon
+        v-if="!!iconName"
+        :name="iconName"
+        color="white"
+        size="10px"
+        :cursor="cursor"
+      />
+      <span>{{ label }}</span>
+    </marker-container>
+  </page-container>
+</template>
+
+<script>
+// import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
+// To use:
+// <marker-item
+//   label="Label"
+//   backgroundColor="#ab5348"
+//   iconName="icon_name"
+//   cursor="pointer"
+// />
+
+import styled from 'vue3-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 14px;
+`
+
+const MarkerAttrs = {
+  backgroundColor: String,
+  hasIcon: Boolean,
+  cursor: String
+}
+const MarkerContainer = styled('div', MarkerAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
+  grid-gap: 5px;
+  position: relative;
+  align-items: center;
+  padding: 2px 7px;
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) =>
+    props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border: 1px solid
+    ${(props) =>
+      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
+`
+
+export default {
+  name: 'project-marker',
+  components: {
+    PageContainer,
+    MarkerContainer,
+    Icon
+  },
+  props: {
+    backgroundColor: {
+      required: false
+    },
+    iconName: {
+      required: false
+    },
+    label: {
+      required: true
+    },
+    cursor: {
+      required: false,
+      default: 'default'
+    }
+  }
+}
+</script>

package/src/components/pageTitle/index.vue

@@ -3,11 +3,7 @@
     <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
       {{ text }}
     </title-text>
-    <info-text
-      v-if="!!infoText"
-      :text="infoText"
-      :alignArrow="infoAlign"
-    />
+    <info-text v-if="!!infoText" :text="infoText" :alignArrow="infoAlign" />
   </title-wrap>
 </template>
 
@@ -18,16 +14,16 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from "vue3-styled-components"
-import InfoText from "../infoText"
+import styled from 'vue3-styled-components'
+import InfoText from '../infoText'
 
 const wrapAttrs = { hasInfoText: Boolean }
-const TitleWrap = styled("div", wrapAttrs)`
+const TitleWrap = styled('div', wrapAttrs)`
   display: grid;
   align-items: center;
   grid-gap: 12px;
   grid-template-columns: ${(props) =>
-    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+    props.hasInfoText ? 'auto auto 1fr' : '1fr'};
   margin-bottom: 20px;
 `
 
@@ -35,7 +31,7 @@ const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
 `
 
@@ -54,8 +50,7 @@ export default {
       required: false
     },
     fontSize: {
-      required: false,
-      default: '16px'
+      required: false
     },
     uppercase: {
       required: false,
@@ -63,11 +58,11 @@ export default {
     },
     infoText: {
       required: false,
-      default: null,
+      default: null
     },
     infoAlign: {
-      required: false,
+      required: false
     }
-  },
+  }
 }
 </script>

package/src/components/pagination/index.vue

@@ -81,8 +81,6 @@ const paginationWrapper = styled.nav`
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
-  margin-bottom: 2px;
-  margin-top: 10px;
 `
 const paginationLink = styled.div`
   display: flex;
@@ -92,15 +90,18 @@ const paginationLink = styled.div`
   border-radius: 3px;
   white-space: nowrap;
   cursor: pointer;
+  color: ${(props) => props.theme.colors.brightBlue};
 
   &.active {
-    color: #fff;
+    color: ${(props) => props.theme.colors.white};
     background-color: ${(props) => props.theme.colors.brightBlue};
     padding: 7px 12px;
     border-radius: 4px;
   }
 `
-const arrowText = styled.div``
+const arrowText = styled.div`
+  color: ${(props) => props.theme.colors.brightBlue};
+`
 const arrowIconContainer = styled.div`
   margin: 0 10px;
   display: flex;

package/src/components/projectMarker/index.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script>
-// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
+// import ProjectMarker from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
 // To use:
 // <project-marker
 //   :activeLanguage="'en-us'"

package/src/components/selectedOptions/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <page-container>
+    <box-container>
+      <selected-container
+        >{{ numberSelected }} {{ $gettext('selected') }}</selected-container
+      >
+      <list-container v-if="optionsList.length">
+        <list-item
+          v-for="item in optionsList"
+          :key="item.type"
+          :hoverColor="item.hoverColor"
+          @click="$emit('on-' + item.type)"
+        >
+          {{ item.name }}
+        </list-item>
+      </list-container>
+      <empty-text v-if="!optionsList.length">
+        {{ $gettext('no_batch_actions_available') }}
+      </empty-text>
+      <icon-container @click="$emit('on-close')">
+        <icon
+          name="close_for_modals,_tool_tips"
+          color="white"
+          size="14px"
+          cursor="pointer"
+        />
+      </icon-container>
+    </box-container>
+  </page-container>
+</template>
+
+<script>
+// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+// optionsList = [
+//   {
+//     type: 'export',
+//     name: 'Export'
+//   },
+//   {
+//     type: 'delete',
+//     name: 'Delete',
+//     hoverColor: 'red' // default is green
+//   }
+// ]
+// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+// <selected-options
+//   :numberSelected="numberSelected"
+//   :optionsList="optionsList"
+//   @on-close="onCloseFunction()"
+//   @on-export="function()" @on-delete="function()"
+// />
+import styled from 'vue3-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+`
+
+const SelectedContainer = styled.div`
+  display: grid;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+`
+
+const BoxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.black};
+  opacity: 90%;
+  color: ${(props) => props.theme.colors.white};
+  border-radius: 4px;
+  padding: 8px 10px 8px 20px;
+  font-size: 14px;
+  height: 40px;
+`
+
+const ListContainer = styled.div`
+  padding: 0 20px;
+  display: flex;
+  gap: 20px;
+  color: ${(props) => props.theme.colors.white};
+`
+
+const ListAttrs = {
+  hoverColor: String
+}
+const ListItem = styled('div', ListAttrs)`
+  cursor: pointer;
+  &:hover {
+    color: ${(props) =>
+      props.hoverColor
+        ? props.theme.colors[props.hoverColor]
+        : props.theme.colors.green};
+  }
+`
+
+const IconContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  margin-left: 20px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+  }
+`
+
+const EmptyText = styled.div`
+  color: ${(props) => props.theme.colors.white};
+  font-size: 13px;
+  padding-left: 16px;
+`
+
+export default {
+  name: 'selected-options',
+  components: {
+    PageContainer,
+    BoxContainer,
+    SelectedContainer,
+    ListContainer,
+    ListItem,
+    Icon,
+    IconContainer,
+    EmptyText
+  },
+  props: {
+    optionsList: {
+      required: true
+    },
+    numberSelected: {
+      required: true,
+      default: 0
+    }
+  }
+}
+</script>

package/src/components/tableDropdown/index.vue

@@ -40,7 +40,12 @@
             "
             @click.stop="onSelectedTemplateClick(item.row)"
           >
-            <img :src="fileIcon" alt="icon" width="12" height="16" />
+            <!-- <img :src="fileIcon" alt="icon" width="12" height="16" /> -->
+            <icon
+              name="template_icon_not_clickable"
+              :color="theme.colors.brightBlue"
+              size="14px"
+            />
             <div>{{ item.value }}</div>
           </template-link>
           <no-template v-if="item.type && item.type === 'no-template'">
@@ -178,6 +183,8 @@ import InputText from '../inputs/inputText'
 import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
 import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
 import fileIconPng from '../../assets/icons/file_icon.png'
+import Icon from '../icon'
+import theme from '@/assets/theme.js'
 
 const rowAttrs = { disabled: Boolean, isOpen: Boolean }
 const DropdownRow = styled('div', rowAttrs)`
@@ -273,6 +280,7 @@ const ArrowWrapper = styled('div', arrowAttrs)`
 const optionsAttrs = { top: Number, left: Number }
 const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
+  margin-top: 10px;
   display: grid;
   grid-template-rows: 1fr auto;
   left: 20px;
@@ -307,10 +315,6 @@ const OptionsWrapper = styled.div`
 
 const OptionsItem = styled('div', containerAttrs)`
   display: grid;
-  /* grid-template-columns: 1fr repeat(
-      ${(props) => props.colSpan},
-      minmax(50px, auto)
-    ); */
   grid-template-columns: ${(props) => props.width};
   grid-gap: 30px;
   padding: 10px;
@@ -343,6 +347,7 @@ const TemplateButton = styled.div`
   display: inline-block;
   border-radius: 4px;
   text-align: center;
+  margin-left: 15px;
 `
 
 const NoTemplate = styled.div`
@@ -350,14 +355,16 @@ const NoTemplate = styled.div`
   font-style: italic;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-left: 15px;
 `
 
 const TemplateLink = styled.div`
-  color: ${(props) => props.theme.colors.purple};
+  color: ${(props) => props.theme.colors.brightBlue};
   cursor: pointer;
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 12px;
+  padding-left: 15px;
 `
 
 const InputContainer = styled.div`
@@ -433,7 +440,8 @@ export default {
     ArrowContainer,
     TextContainer,
     NestedIcon,
-    NestedContainer
+    NestedContainer,
+    Icon
   },
   props: {
     colSpan: {
@@ -599,6 +607,9 @@ export default {
   computed: {
     getCustomName() {
       return this.inputText
+    },
+    theme() {
+      return theme
     }
   },
   watch: {