@eturnity/eturnity_reusable_components 7.20.0--EPDM-10564.3 → 7.20.0--EPDM-5518.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.20.0--EPDM-10564.3",
+  "version": "7.20.0--EPDM-5518.6",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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/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/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/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>