@eturnity/eturnity_reusable_components 7.35.1-EPDM-10620.1 → 7.35.2-EPDM-11386.0

package/package.json

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

package/src/App.vue

@@ -1,13 +1,10 @@
 <template>
-  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
-    <RouterView />
-  </ThemeProvider>
+  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()" />
 </template>
 
 <script>
   import { ThemeProvider } from 'vue3-styled-components'
   import theme from './assets/theme'
-
   export default {
     name: 'App',
     components: {

package/src/assets/svgIcons/pause.svg

@@ -0,0 +1,6 @@
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path d="M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M224,320
+	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z M352,320
+	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z"/>
+</svg>

package/src/assets/theme.js

@@ -35,6 +35,9 @@ const theme = {
     tablet: '768px',
     tabletLarge: '950px',
   },
+  fonts: {
+    mainFont: '"Figtree", sans-serif',
+  },
   borderRadius: '4px',
 }
 

package/src/components/filter/filterSettings.vue

@@ -87,10 +87,7 @@
             :key="index + '_field'"
           >
             <SelectComponent
-              v-if="
-                isMultipleSelector(filter.filter_type) ||
-                isSingleSelector(filter.filter_type)
-              "
+              v-if="isMultipleSelector(filter.filter_type)"
               align-items="vertical"
               :disabled="!filter.choices.length"
               font-size="13px"
@@ -105,12 +102,16 @@
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
               </template>
               <template #dropdown>
-                <template v-if="isSingleSelector(filter.filter_type)">
-                  <Option
-                    v-for="(filterOption, optionIdx) in filter.choices"
-                    :key="optionIdx + 'optionIdx'"
-                    :value="filterOption.text"
-                    @click="
+                <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,
@@ -118,31 +119,8 @@
                         field: filter.field,
                       })
                     "
-                  >
-                    {{ 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>
+                  />
+                </DropdownCheckboxContainer>
               </template>
             </SelectComponent>
             <SectionContainer v-else-if="isRangeSelector(filter.filter_type)">
@@ -327,29 +305,25 @@
   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;
     border: 1px solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
-    z-index: 1;
+    z-index: 99999;
     font-size: 13px;
   `
 
   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 }
@@ -361,8 +335,8 @@
     ${({ showBorder, theme }) =>
       showBorder &&
       `
-      border-right: 1px solid ${theme.colors.grey4};
-    `}
+    border-right: 1px solid ${theme.colors.grey4};
+  `}
   `
 
   const ButtonContainer = styled.div`
@@ -398,8 +372,8 @@
     ${({ showBorder, theme }) =>
       showBorder &&
       `
-      border-right: 1px solid ${theme.colors.grey4};
-    `}
+    border-right: 1px solid ${theme.colors.grey4};
+  `}
 
     .ghost {
       opacity: 0.5;
@@ -428,7 +402,6 @@
     display: grid;
     gap: 6px;
     width: 100%;
-    overflow-wrap: anywhere;
     padding: 7px 10px;
     background: ${(props) => props.theme.colors.grey5};
   `
@@ -462,11 +435,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;
@@ -649,9 +622,6 @@
         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)
     },
-    beforeUnmount() {
+    beforeDestroy() {
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {

package/src/components/roundTabs/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <Container>
+    <RoundedTabLeft
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+    />
+    <Tab
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+      :height="height"
+      :width="width"
+    >
+      <slot></slot>
+    </Tab>
+    <RoundedTabRight
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+    />
+  </Container>
+</template>
+<script>
+  import styled from 'vue3-styled-components'
+
+  const Container = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `
+  const RoundedTabLeft = styled('div', {
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+    position:absolute;
+    bottom:0;
+    left:-${(prop) => prop.borderRadius}
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.borderRadius};
+    height: ${(prop) => prop.borderRadius};
+    -webkit-mask-image: radial-gradient(
+      circle at top left,
+      transparent 71%,
+      black 71%
+    );
+  `
+  const RoundedTabRight = styled('div', {
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+  position:absolute;
+  bottom:0;
+    right:-${(prop) => prop.borderRadius}
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.borderRadius};
+    height: ${(prop) => prop.borderRadius};
+    -webkit-mask-image: radial-gradient(
+      circle at top right,
+      transparent 71%,
+      black 71%
+    );`
+  const Tab = styled('div', {
+    width: String,
+    height: String,
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.width};
+    height: ${(prop) => prop.height};
+    border-radius: ${(prop) => prop.borderRadius} ${(prop) => prop.borderRadius}
+      0 0;
+  `
+  export default {
+    name: 'SelectedOptions',
+    components: {
+      Container,
+      Tab,
+      RoundedTabLeft,
+      RoundedTabRight,
+    },
+    props: {
+      height: {
+        required: false,
+        default: '40px',
+      },
+      width: {
+        required: false,
+        default: '200px',
+      },
+      backgroundColor: {
+        required: false,
+        default: 'blue',
+      },
+      borderRadius: {
+        required: false,
+        default: '20px',
+      },
+    },
+  }
+</script>

package/src/components/selectedOptions/index.vue

@@ -1,81 +1,32 @@
 <template>
-  <PageWrapper>
-    <PageContainer v-if="!expanded">
-      <BoxContainer>
-        <SelectedContainer>
-          {{ numberSelected }} {{ $gettext('selected') }}
-        </SelectedContainer>
-        <ListContainer v-if="optionsList.length">
-          <ListItem
-            v-for="item in limitedOptions"
-            :key="item.type"
-            :hover-color="item.hoverColor"
-            @click="$emit('on-' + item.type)"
-          >
-            {{ item.name }}
-          </ListItem>
-          <ButtonContainer
-            v-if="optionsList.length > optionLimit || hasComponent"
-            @click="expandOptions"
-            name="more_options,_tool_tips"
-          >
-            <DotItem />
-            <DotItem />
-            <DotItem />
-          </ButtonContainer>
-        </ListContainer>
-        <EmptyText v-if="!optionsList.length">
-          {{ $gettext('no_batch_actions_available') }}
-        </EmptyText>
-        <IconContainer @click="$emit('on-close')">
-          <Icon
-            color="white"
-            cursor="pointer"
-            name="close_for_modals,_tool_tips"
-            size="14px"
-          />
-        </IconContainer>
-      </BoxContainer>
-    </PageContainer>
-    <CenterPageContainer v-else>
-      <CenterBox>
-        <TitleContainer>
-          <BoxTitle> {{ numberSelected }} {{ $gettext('selected') }} </BoxTitle>
-          <IconContainer @click="$emit('on-close')">
-            <Icon
-              color="white"
-              cursor="pointer"
-              name="close_for_modals,_tool_tips"
-              size="14px"
-            />
-          </IconContainer>
-        </TitleContainer>
-        <Divider />
-        <ExpandedListItem
-          v-for="item in limitedOptions"
+  <PageContainer>
+    <BoxContainer>
+      <SelectedContainer>
+        {{ numberSelected }} {{ $gettext('selected') }}
+      </SelectedContainer>
+      <ListContainer v-if="optionsList.length">
+        <ListItem
+          v-for="item in optionsList"
           :key="item.type"
           :hover-color="item.hoverColor"
-          @click="item?.component ? '' : $emit('on-' + item.type)"
+          @click="$emit('on-' + item.type)"
         >
           {{ item.name }}
-          <IconContainer
-            v-if="item?.component"
-            @click="toggleElement(item.type)"
-          >
-            <Icon
-              color="white"
-              cursor="pointer"
-              name="arrow_right"
-              size="14px"
-            />
-          </IconContainer>
-          <OptionsContainer v-if="item?.component && item.open">
-            <slot :name="item.component" />
-          </OptionsContainer>
-        </ExpandedListItem>
-      </CenterBox>
-    </CenterPageContainer>
-  </PageWrapper>
+        </ListItem>
+      </ListContainer>
+      <EmptyText v-if="!optionsList.length">
+        {{ $gettext('no_batch_actions_available') }}
+      </EmptyText>
+      <IconContainer @click="$emit('on-close')">
+        <Icon
+          color="white"
+          cursor="pointer"
+          name="close_for_modals,_tool_tips"
+          size="14px"
+        />
+      </IconContainer>
+    </BoxContainer>
+  </PageContainer>
 </template>
 
 <script>
@@ -86,13 +37,6 @@
   //     name: 'Export'
   //   },
   //   {
-  //     type: 'export',
-  //     name: 'Export'
-  //     ...
-  //     add component parameter if we were passing a component to the selected options
-  //     component: 'set_supplier'
-  //   },
-  //   {
   //     type: 'delete',
   //     name: 'Delete',
   //     hoverColor: 'red' // default is green
@@ -104,25 +48,10 @@
   //   :optionsList="optionsList"
   //   @on-close="onCloseFunction()"
   //   @on-export="function()" @on-delete="function()"
-  // >
-  //   <template v-slot:set_supplier>
-  //     <CustomSelectComponent
-  //       :option-list="suppliers"
-  //       @set-supplier="checkboxBulkActions('setSupplier', $event)"
-  //     />
-  //   </template>
-  // </SelectedOptions>
+  // />
   import styled from 'vue3-styled-components'
-  import MainButton from '../buttons/mainButton'
   import Icon from '../icon'
 
-  const PageWrapper = styled.div``
-
-  const Divider = styled.div`
-    border-bottom: 1px solid ${({ theme }) => theme.colors.white};
-    width: 100%;
-  `
-
   const PageContainer = styled.div`
     position: fixed;
     bottom: 30px;
@@ -130,23 +59,6 @@
     transform: translateX(-50%);
   `
 
-  const CenterPageContainer = styled.div`
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.4);
-  `
-
-  const OptionsContainer = styled.div`
-    position: fixed;
-    right: -300px;
-    background-color: ${(props) => props.theme.colors.black};
-    border-radius: 4px;
-    padding: 20px;
-  `
-
   const SelectedContainer = styled.div`
     display: grid;
     align-items: center;
@@ -155,18 +67,6 @@
     border-right: 1px solid rgba(255, 255, 255, 0.2);
   `
 
-  const TitleContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  `
-
-  const BoxTitle = styled.div`
-    font-size: 14px;
-    color: ${(props) => props.theme.colors.white};
-  `
-
   const BoxContainer = styled.div`
     display: flex;
     align-items: center;
@@ -179,41 +79,9 @@
     height: 40px;
   `
 
-  const CenterBox = styled(BoxContainer)`
-    justify-content: center;
-    flex-direction: column;
-    height: auto;
-    gap: 25px;
-    align-items: flex-start;
-    border-radius: 4px;
-    width: 400px;
-    padding: 20px;
-  `
-
-  const ButtonContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-    cursor: pointer;
-
-    div {
-      // This is the dot color
-      background: ${(props) => props.theme.colors.white};
-    }
-  `
-  const DotItem = styled.div`
-    width: 4px;
-    height: 4px;
-    margin: 1px;
-    border-radius: 50%;
-  `
-
   const ListContainer = styled.div`
     padding: 0 20px;
     display: flex;
-    align-items: center;
     gap: 20px;
     color: ${(props) => props.theme.colors.white};
   `
@@ -231,13 +99,6 @@
     }
   `
 
-  const ExpandedListItem = styled(ListItem)`
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-  `
-
   const IconContainer = styled.div`
     display: grid;
     align-items: center;
@@ -245,7 +106,7 @@
     height: 30px;
     width: 30px;
     cursor: pointer;
-    margin-left: 15px;
+    margin-left: 20px;
 
     &:hover {
       background: rgba(255, 255, 255, 0.1);
@@ -266,41 +127,10 @@
       BoxContainer,
       SelectedContainer,
       ListContainer,
-      MainButton,
-      ButtonContainer,
-      DotItem,
       ListItem,
-      CenterBox,
       Icon,
-      CenterPageContainer,
-      PageWrapper,
-      OptionsContainer,
-      ExpandedListItem,
-      TitleContainer,
       IconContainer,
       EmptyText,
-      BoxTitle,
-      Divider,
-    },
-    computed: {
-      hasComponent() {
-        return this.optionsList.some((item) => item.component)
-      },
-    },
-    methods: {
-      toggleElement(type) {
-        this.limitedOptions = this.optionsList.map((item) => {
-          if (item.type === type) {
-            item.open = !item.open
-          } else item.open = false
-
-          return item
-        })
-      },
-      expandOptions() {
-        this.expanded = !this.expanded
-        this.limitedOptions = this.optionsList
-      },
     },
     props: {
       optionsList: {
@@ -311,21 +141,5 @@
         default: 0,
       },
     },
-    mounted() {
-      this.limitedOptions = this.optionsList
-        .map((item) => {
-          return { ...item, open: false }
-        })
-        .filter((item) => !item.component)
-        .slice(0, this.optionLimit)
-    },
-    data() {
-      return {
-        //maximum number of options to display, if more than 4, display a 'more' option
-        optionLimit: 4,
-        expanded: false,
-        limitedOptions: [],
-      }
-    },
   }
 </script>