@eturnity/eturnity_reusable_components 7.35.1-EPDM-11196.0 → 7.35.1-EPDM-10576.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.35.1-EPDM-11196.0",
+  "version": "7.35.1-EPDM-10576.5",
   "files": [
     "dist",
     "src"

package/src/components/filter/filterSettings.vue

@@ -87,7 +87,10 @@
             :key="index + '_field'"
           >
             <SelectComponent
-              v-if="isMultipleSelector(filter.filter_type)"
+              v-if="
+                isMultipleSelector(filter.filter_type) ||
+                isSingleSelector(filter.filter_type)
+              "
               align-items="vertical"
               :disabled="!filter.choices.length"
               font-size="13px"
@@ -102,16 +105,12 @@
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
               </template>
               <template #dropdown>
-                <DropdownCheckboxContainer
-                  v-for="(filterOption, optionIdx) in filter.choices"
-                  :key="optionIdx + 'optionIdx'"
-                  @click.stop
-                >
-                  <Checkbox
-                    :is-checked="filterOption.selected"
-                    :label="filterOption.text"
-                    size="small"
-                    @on-event-handler="
+                <template v-if="isSingleSelector(filter.filter_type)">
+                  <Option
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
+                    :value="filterOption.text"
+                    @click="
                       onChange({
                         dataType: item.type,
                         value: $event,
@@ -119,8 +118,31 @@
                         field: filter.field,
                       })
                     "
-                  />
-                </DropdownCheckboxContainer>
+                  >
+                    {{ filterOption.text }}
+                  </Option>
+                </template>
+                <template v-else>
+                  <DropdownCheckboxContainer
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
+                    @click.stop
+                  >
+                    <Checkbox
+                      :is-checked="filterOption.selected"
+                      :label="filterOption.text"
+                      size="small"
+                      @on-event-handler="
+                        onChange({
+                          dataType: item.type,
+                          value: $event,
+                          choice: filterOption.choice,
+                          field: filter.field,
+                        })
+                      "
+                    />
+                  </DropdownCheckboxContainer>
+                </template>
               </template>
             </SelectComponent>
             <SectionContainer v-else-if="isRangeSelector(filter.filter_type)">
@@ -305,6 +327,8 @@
   const ContainerWrapper = styled.div`
     position: absolute;
     margin-top: 4px;
+    max-height: 70vh;
+    overflow-y: auto;
     background-color: ${(props) => props.theme.colors.white};
     min-width: 100%;
     width: max-content;
@@ -317,13 +341,15 @@
   const ColAttrs = { numCols: Number, hasActiveView: Boolean }
   const ColumnWrapper = styled('div', ColAttrs)`
     display: grid;
+    max-height: 50vh;
+    overflow-y: auto;
     grid-template-columns: repeat(${(props) => props.numCols}, auto);
 
     ${({ hasActiveView, theme }) =>
       hasActiveView &&
       `
-    border-top: 1px solid ${theme.colors.grey4};
-  `}
+      border-top: 1px solid ${theme.colors.grey4};
+    `}
   `
 
   const TitleAttrs = { showBorder: Boolean }
@@ -335,8 +361,8 @@
     ${({ showBorder, theme }) =>
       showBorder &&
       `
-    border-right: 1px solid ${theme.colors.grey4};
-  `}
+      border-right: 1px solid ${theme.colors.grey4};
+    `}
   `
 
   const ButtonContainer = styled.div`
@@ -372,8 +398,8 @@
     ${({ showBorder, theme }) =>
       showBorder &&
       `
-    border-right: 1px solid ${theme.colors.grey4};
-  `}
+      border-right: 1px solid ${theme.colors.grey4};
+    `}
 
     .ghost {
       opacity: 0.5;
@@ -402,6 +428,7 @@
     display: grid;
     gap: 6px;
     width: 100%;
+    overflow-wrap: anywhere;
     padding: 7px 10px;
     background: ${(props) => props.theme.colors.grey5};
   `
@@ -435,11 +462,11 @@
   `
 
   const UpperContainer = styled.div`
-  display: grid;
-  grid-gap: 20px
-  grid-template-columns: 1fr 1fr;
-  padding: 10px 14px;
-`
+    display: grid;
+    grid-gap: 20px
+    grid-template-columns: 1fr 1fr;
+    padding: 10px 14px;
+  `
 
   const ResetButton = styled.div`
     display: inline-flex;
@@ -622,6 +649,9 @@
         const foundItem = options.find((item) => item.choice === value)
         return foundItem ? foundItem.text : value ? value : filter.selectedText
       },
+      isSingleSelector(type) {
+        return type === 'boolean'
+      },
       isMultipleSelector(type) {
         return type === 'multi_select_integer' || type === 'multi_select_string'
       },

package/src/components/filter/index.vue

@@ -92,7 +92,7 @@
     mounted() {
       document.addEventListener('click', this.clickOutside)
     },
-    beforeDestroy() {
+    beforeUnmount() {
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {

package/src/components/infoCard/index.vue

@@ -1,10 +1,6 @@
 <template>
-  <InfoContainer
-    background-color="backgrounColor"
-    :border-color="borderColor"
-    :has-dashed-border="hasDashedBorder"
-  >
-    <RCIcon :color="color" name="info" size="24px" />
+  <InfoContainer>
+    <RCIcon name="info" size="24px" :color="color" />
     <TextContainer>
       <slot></slot>
     </TextContainer>
@@ -14,24 +10,12 @@
 <script>
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
-  const propsContainer = {
-    backgroundColor: String,
-    hasDashedBorder: Boolean,
-    borderColor: String,
-  }
-  const InfoContainer = styled('div', propsContainer)`
+
+  const InfoContainer = styled.div`
     display: flex;
     gap: 15px;
-    padding: 15px;
-    border: 1px ${(props) => (props.hasDashedBorder ? 'dashed' : 'solid')}
-      ${(props) =>
-        props.theme.colors[props.borderColor]
-          ? props.theme.colors[props.borderColor]
-          : props.borderColor};
-    background-color: ${(props) =>
-      props.theme.colors[props.backgroundColor]
-        ? props.theme.colors[props.backgroundColor]
-        : props.backgroundColor};
+    padding: 20px;
+    border: 1px dashed ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
   `
 
@@ -49,19 +33,8 @@
     },
     props: {
       color: {
-        required: false,
-      },
-      backgrounColor: {
-        required: false,
-      },
-      hasDashedBorder: {
-        required: false,
-        default: true,
-      },
-      borderColor: {
-        required: false,
-        default: 'grey4',
-      },
-    },
+        required: false
+      }
+    }
   }
 </script>