@eturnity/eturnity_reusable_components 8.19.1 → 8.19.2

package/src/components/paginationV2/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <!-- Check, if pages more than 1 -->
+  <PaginationWrapper v-if="paginationParams.pages > 1">
+    <PaginationLink v-if="paginationParams.previous" @click="fetchPage(1)">
+      <ArrowIconContainer>
+        <RCIcon name="start_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <PaginationLink
+      v-if="paginationParams.previous"
+      @click="fetchPage(paginationParams.previous)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_left" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <!-- Current block -->
+    <SelectWrapper>
+      <RCSelect
+        :button-font-color="getTheme.colors.gray1"
+        :dropdown-font-color="getTheme.colors.gray1"
+        font-size="14px"
+        :has-select-button-padding="false"
+        :is-auto-search="false"
+        :is-searchable="false"
+        :label-font-color="getTheme.colors.gray1"
+        left-padding="0px"
+        min-width="0px"
+        no-border
+        :no-max-width="true"
+        option-width="75px"
+        select-width="100%"
+        :show-border="false"
+        :show-caret="false"
+        text-center
+        :value="currentPage"
+        @input-change="fetchPage($event)"
+      >
+        <template #selector>
+          <SelectText>
+            {{ currentPage }} of {{ paginationParams.pages }}
+          </SelectText>
+        </template>
+        <template #dropdown>
+          <RCOption
+            v-for="number in paginationNumbers()"
+            :key="number"
+            text-center
+            :value="number"
+          >
+            {{ number }}
+          </RCOption>
+        </template>
+      </RCSelect>
+    </SelectWrapper>
+
+    <!-- Forward button -->
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.next)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_right" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.pages)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="end_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+  </PaginationWrapper>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
+  import RCSelect from '../inputs/select'
+  import RCOption from '../inputs/select/option'
+  import theme from '@/assets/theme.js'
+
+  const PaginationWrapper = styled.nav`
+    gap: 5px;
+    font-size: 13px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+  `
+  const PaginationLink = styled.div`
+    display: flex;
+    padding: 0px 5px;
+    margin: 0 2px;
+    text-align: center;
+    border-radius: 3px;
+    white-space: nowrap;
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.brightBlue};
+
+    &.active {
+      color: ${(props) => props.theme.colors.white};
+      background-color: ${(props) => props.theme.colors.brightBlue};
+      padding: 7px 12px;
+      border-radius: 4px;
+    }
+  `
+  const ArrowIconContainer = styled.div`
+    display: flex;
+    align-items: center;
+  `
+
+  const SelectText = styled.div`
+    font-size: 14px;
+    color: ${(props) => props.theme.colors.grey1};
+  `
+
+  const SelectWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    width: 75px;
+  `
+
+  export default {
+    name: 'PaginationV2',
+    components: {
+      PaginationWrapper,
+      PaginationLink,
+      RCIcon,
+      RCSelect,
+      RCOption,
+      SelectWrapper,
+      SelectText,
+      ArrowIconContainer,
+    },
+    props: {
+      fetchPage: {
+        type: Function,
+        required: true,
+      },
+      currentPage: {
+        type: Number,
+        required: true,
+      },
+      paginationParams: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        selectedValue: this.currentPage,
+      }
+    },
+    computed: {
+      getTheme() {
+        return theme
+      },
+    },
+    methods: {
+      getNewProjects(num) {
+        this.$emit('on-pagination-change', num)
+      },
+      paginationNumbers() {
+        return Array.from(
+          { length: this.paginationParams.pages },
+          (_, i) => i + 1
+        )
+      },
+    },
+  }
+</script>

package/src/components/selectedOptions/index.vue

@@ -36,9 +36,8 @@
                 />
               </ListItemTitle>
               <Icon
-                :color="theme.colors.white"
+                color="white"
                 :cursor="item.disabled ? 'not-allowed' : 'pointer'"
-                :hovered-color="theme.colors.white"
                 name="arrow_right"
                 size="20px"
               />
@@ -87,13 +86,7 @@
         </EmptyText>
         <CloseContainer>
           <IconContainer @click="$emit('on-close')">
-            <Icon
-              :color="theme.colors.white"
-              cursor="pointer"
-              :hovered-color="theme.colors.white"
-              name="close"
-              size="14px"
-            />
+            <Icon color="white" cursor="pointer" name="close" size="14px" />
           </IconContainer>
         </CloseContainer>
       </BoxContainer>
@@ -138,7 +131,6 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
   import Icon from '../icon'
-  import theme from '../../assets/theme'
 
   const PageWrapper = styled.div`
     font-size: 13px;
@@ -405,9 +397,6 @@
       }
     },
     computed: {
-      theme() {
-        return theme
-      },
       hasComponent() {
         return this.optionsList.some((item) => item.component)
       },

package/src/components/selectedOptions/selectedOptions.stories.js

@@ -1,143 +1,10 @@
 import SelectedOptions from './index.vue'
-import theme from '@/assets/theme'
 
 export default {
-  title: 'SelectedOptions',
+  title: 'Components/SelectedOptions',
   component: SelectedOptions,
   tags: ['autodocs'],
-  argTypes: {
-    optionsList: {
-      control: 'object',
-      description:
-        'Array of options to display. Each option should have a type and name, and can optionally have a component, disabled state, hoverColor, and disabledInfo.',
-    },
-    numberSelected: {
-      control: 'number',
-      description: 'Number of items currently selected',
-    },
-    selectedLabel: {
-      control: 'text',
-      description:
-        'Custom label for the selected count (defaults to "selected")',
-    },
-    noBulkActionsLabel: {
-      control: 'text',
-      description:
-        'Custom label when no bulk actions are available (defaults to "no_batch_actions_available")',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { SelectedOptions },
-  setup() {
-    return { args }
-  },
-  template: '<SelectedOptions v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'delete',
-      name: 'Delete',
-      hoverColor: 'red',
-    },
-  ],
-  numberSelected: 5,
-}
-
-export const WithDisabledOptions = Template.bind({})
-WithDisabledOptions.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'delete',
-      name: 'Delete',
-      disabled: true,
-      disabledInfo: 'You do not have permission to delete these items',
-    },
-  ],
-  numberSelected: 3,
-}
-
-export const WithCustomComponent = Template.bind({})
-WithCustomComponent.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'set_supplier',
-      name: 'Set Supplier',
-      component: 'set_supplier',
-    },
-  ],
-  numberSelected: 2,
-}
-
-export const ManyOptions = Template.bind({})
-ManyOptions.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'delete',
-      name: 'Delete',
-      hoverColor: 'red',
-    },
-    {
-      type: 'archive',
-      name: 'Archive',
-    },
-    {
-      type: 'move',
-      name: 'Move',
-    },
-    {
-      type: 'copy',
-      name: 'Copy',
-    },
-  ],
-  numberSelected: 10,
-}
-
-export const NoOptions = Template.bind({})
-NoOptions.args = {
-  optionsList: [],
-  numberSelected: 0,
-}
-
-export const CustomLabels = Template.bind({})
-CustomLabels.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'delete',
-      name: 'Delete',
-      hoverColor: 'red',
-    },
-  ],
-  numberSelected: 1,
-  selectedLabel: 'item selected',
-  noBulkActionsLabel: 'No actions can be performed on selected items',
+  // argTypes: {}
 }
 
 // How to use in your template
@@ -179,6 +46,41 @@ CustomLabels.args = {
 //   </template>
 // </SelectedOptions>
 
+export const Default = {
+  render: (args) => ({
+    components: { SelectedOptions },
+    setup() {
+      return { args }
+    },
+    template: '<SelectedOptions v-bind="args"  />',
+  }),
+  args: {
+    optionLimit: 4,
+    selectedLabel: 'selected',
+    noBulkActionsLabel: 'No bulk actions available',
+
+    //selected options count, in this case 5 options are selected
+    numberSelected: 5,
+
+    //show overlay
+    showOverlay: true,
+
+    //expanded options, this will display list of actions in the middle of the screen
+    expanded: false,
+    optionsList: [
+      {
+        type: 'export',
+        name: 'Export',
+      },
+      {
+        type: 'export_page',
+        name: 'Export Page',
+      },
+    ],
+    expandedOptions: [],
+  },
+}
+
 export const Expanded = {
   render: (args) => ({
     components: { SelectedOptions },

package/src/components/spinner/Spinner.stories.js

@@ -1,86 +1,34 @@
 import Spinner from './index.vue'
-import theme from '@/assets/theme'
 
 export default {
   title: 'Spinner',
   component: Spinner,
   tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Size of the spinner',
-    },
-    isWhite: {
-      control: 'boolean',
-      description: 'Whether to use white color for the spinner',
-    },
-    limitedToModal: {
-      control: 'boolean',
-      description: 'Whether the spinner is limited to a modal context',
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Whether to show the spinner with a full-width overlay',
-    },
-  },
 }
 
-const Template = (args) => ({
-  components: { Spinner },
-  setup() {
-    return { args }
-  },
-  template: '<Spinner v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  size: 'medium',
-  isWhite: false,
-  limitedToModal: false,
-  fullWidth: false,
-}
+// <spinner size="30px" fullWidth="false" limitedToModal="false" />
 
-export const Small = Template.bind({})
-Small.args = {
-  size: 'small',
-  isWhite: false,
-  limitedToModal: false,
-  fullWidth: false,
-}
-
-export const Large = Template.bind({})
-Large.args = {
-  size: 'large',
-  isWhite: false,
-  limitedToModal: false,
-  fullWidth: false,
+export const DefaultSpinner = {
+  args: {
+    size: '60px',
+  },
 }
 
-export const White = Template.bind({})
-White.args = {
-  size: 'medium',
-  isWhite: true,
-  limitedToModal: false,
-  fullWidth: false,
+export const SmallerSpinner = {
+  args: {
+    size: '30px',
+  },
 }
 
-export const InModal = Template.bind({})
-InModal.args = {
-  size: 'medium',
-  isWhite: false,
-  limitedToModal: true,
-  fullWidth: false,
+export const LargerSpinner = {
+  args: {
+    size: '90px',
+  },
 }
 
-export const FullWidth = Template.bind({})
-FullWidth.args = {
-  size: 'medium',
-  isWhite: false,
-  limitedToModal: false,
-  fullWidth: true,
+export const AlignCenterSpinner = {
+  args: {
+    size: '60px',
+    fullWidth: true,
+  },
 }

package/src/components/tabsHeader/index.vue

@@ -4,25 +4,15 @@
       <TabItem
         v-for="item in tabsData"
         :key="item.id"
+        :full-size="fullSize"
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
       >
-        <RCIcon
-          v-if="item.icon"
-          :color="
-            activeTab === item.id
-              ? theme.semanticColors.purple[500]
-              : theme.semanticColors.teal[800]
-          "
-          :hovered-color="
-            activeTab === item.id
-              ? theme.semanticColors.purple[500]
-              : theme.semanticColors.teal[800]
-          "
-          :name="item.icon"
-          size="14px"
-        />
-        <div>{{ item.text }}</div>
+        <NameContainer>
+          <div>{{ item.text }}</div>
+          <DotIcon v-if="item.subText" :is-active="activeTab === item.id" />
+          <SubText v-if="item.subText">{{ item.subText }}</SubText>
+        </NameContainer>
         <RCIcon v-if="item.hasError" name="warning" size="14px" />
       </TabItem>
     </TabsContainer>
@@ -49,7 +39,27 @@
   // />
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
-  import theme from '@/assets/theme'
+
+  const NameContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  `
+
+  const DotIconAttrs = { isActive: Boolean }
+  const DotIcon = styled('div', DotIconAttrs)`
+    width: 4px;
+    height: 4px;
+    border-radius: 100%;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.purple6 : props.theme.colors.black};
+  `
+
+  const SubText = styled.div`
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.black};
+  `
 
   const PageContainer = styled.div``
 
@@ -57,27 +67,24 @@
     display: flex;
     cursor: pointer;
     width: 100%;
+
+    border-bottom: 1px solid ${(props) => props.theme.colors.purple7};
   `
 
-  const TabAttrs = { isActive: Boolean }
+  const TabAttrs = { isActive: Boolean, fullSize: Boolean }
   const TabItem = styled('div', TabAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
-    padding: 10px 20px;
+    padding: 10px 25px;
     font-size: 14px;
-    font-weight: ${(props) => (props.isActive ? '500' : '400')};
-    background-color: ${(props) => props.theme.colors.white};
+    font-weight: 400;
     color: ${(props) =>
-      props.isActive
-        ? props.theme.semanticColors.purple[500]
-        : props.theme.semanticColors.teal[800]};
+      props.isActive ? props.theme.colors.purple6 : props.theme.colors.black};
     border-bottom: ${(props) =>
-      props.isActive
-        ? '1px solid' + props.theme.semanticColors.purple[400]
-        : '1px solid' + props.theme.semanticColors.grey[400]};
-    flex-grow: 1;
+      props.isActive ? '1px solid' + props.theme.colors.purple6 : 'unset'};
+    flex-grow: ${(props) => (props.fullSize ? 1 : 0)};
   `
 
   export default {
@@ -85,7 +92,10 @@
     components: {
       PageContainer,
       TabsContainer,
+      NameContainer,
       TabItem,
+      SubText,
+      DotIcon,
       RCIcon,
     },
     props: {
@@ -95,14 +105,14 @@
       },
       activeTab: {
         required: true,
-        type: [Number, String],
+        type: Number,
+      },
+      fullSize: {
+        type: Boolean,
+        default: true,
       },
     },
-    data() {
-      return {
-        theme,
-      }
-    },
+    emits: ['on-tab-change'],
     methods: {
       onTabClick({ id }) {
         if (id === this.activeTab) {