@eturnity/eturnity_reusable_components 8.19.1 → 8.19.2

package/src/components/buttons/mainButton/index.vue

@@ -90,6 +90,7 @@
     ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
     height: ${(props) => props.height};
+    line-height: 1;
 
     &:hover {
       background-color: ${(props) =>
@@ -110,6 +111,30 @@
     }
   `
 
+  const AltAttrs = {
+    altStyle: Boolean,
+    color: String,
+  }
+
+  const IconContainer = styled('div', AltAttrs)`
+    background-color: ${(props) =>
+      props.color ? props.color : props.theme.colors.transparentWhite1};
+    padding: 7px;
+    height: 100%;
+    width: 30%;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    border-radius: 4px 0 0 4px;
+    color: ${(props) => props.theme.colors.white};
+    all: ${(props) => (props.altStyle ? '' : 'unset')};
+  `
+
+  const TextContainer = styled('span', AltAttrs)`
+    padding: ${(props) => (props.altStyle ? '7px' : '0')};
+    all: ${(props) => (props.altStyle ? '' : 'unset')};
+  `
+
   const LabelAttrs = {
     hasIcon: Boolean,
   }
@@ -155,6 +180,16 @@
         default: '',
         type: String,
       },
+      iconAltStyle: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      iconAltStyleColor: {
+        required: false,
+        default: null,
+        type: String,
+      },
       text: {
         required: true,
         type: String,

package/src/components/draggableCard/draggableCard.stories.js

@@ -1,135 +1,79 @@
+import defaultProps from './defaultProps'
 import DraggableCard from './index.vue'
+import styled from 'vue3-styled-components'
 import theme from '@/assets/theme'
 
 export default {
   title: 'DraggableCard',
   component: DraggableCard,
   tags: ['autodocs'],
-  argTypes: {
-    width: {
-      control: 'text',
-      description: 'Width of the card',
-    },
-    initialPosition: {
-      control: 'object',
-      description: 'Initial position of the card (top, right, bottom, left)',
-    },
-    title: {
-      control: 'text',
-      description: 'Title of the card',
-    },
-    titleDataId: {
-      control: 'text',
-      description: 'Data ID for the title',
-    },
-    isCollapsible: {
-      control: 'boolean',
-      description: 'Whether the card can be collapsed',
-    },
-    infoText: {
-      control: 'text',
-      description: 'Additional info text to display next to the title',
-    },
-    dragTargets: {
-      control: 'array',
-      description: 'Targets where the card can be dragged',
-    },
-    dragBounds: {
-      control: 'object',
-      description: 'Boundaries for dragging the card',
-    },
-  },
 }
 
-const Template = (args) => ({
-  components: { DraggableCard },
-  setup() {
-    return { args }
-  },
-  template: `
-    <DraggableCard v-bind="args">
+const TextContainer = styled.div`
+  font-family: ${theme.fonts.mainFont};
+  color: ${theme.colors.white};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 21px;
+  letter-spacing: 0%;
+`
+
+const CompleteTemplate = (args) => {
+  return {
+    components: { DraggableCard, TextContainer },
+    setup() {
+      return { args }
+    },
+    template: `
+      <DraggableCard v-bind="args">
       <template #body>
-        <div style="color: white;">Card body content</div>
+        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
+        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
       </template>
       <template #footer>
-        <div style="color: white;">Card footer content</div>
+        <TextContainer>{{ args.sampleFooter }}</TextContainer>
       </template>
-    </DraggableCard>
-  `,
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Default Card',
-  isCollapsible: true,
+      </DraggableCard>
+    `,
+  }
 }
 
-export const WithInfoText = Template.bind({})
-WithInfoText.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Info',
-  infoText: 'This is some additional information',
-  isCollapsible: true,
+export const Default = CompleteTemplate.bind({})
+Default.args = {
+  ...defaultProps,
 }
 
-export const NonCollapsible = Template.bind({})
-NonCollapsible.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Non-Collapsible Card',
+export const NotCollapsible = CompleteTemplate.bind({})
+NotCollapsible.args = {
+  ...defaultProps,
   isCollapsible: false,
 }
 
-export const WithDragBounds = Template.bind({})
-WithDragBounds.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Drag Bounds',
-  dragBounds: {
-    min: { top: 0, left: 0 },
-    max: { top: 500, left: 500 },
-  },
-  isCollapsible: true,
+export const AdjustWidth = CompleteTemplate.bind({})
+AdjustWidth.args = {
+  ...defaultProps,
+  minWidth: '100px',
+  maxWidth: '500px',
 }
 
-export const WithCustomDragTargets = Template.bind({})
-WithCustomDragTargets.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Custom Drag Targets',
-  dragTargets: ['document', 'parent'],
-  isCollapsible: true,
+const NoFooterTemplate = (args) => {
+  return {
+    components: { DraggableCard, TextContainer },
+    setup() {
+      return { args }
+    },
+    template: `
+      <DraggableCard v-bind="args">
+      <template #body>
+        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
+        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
+      </template>
+      </DraggableCard>
+    `,
+  }
 }
 
-export const WithTitleDataId = Template.bind({})
-WithTitleDataId.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Data ID',
-  titleDataId: 'custom-data-id',
-  isCollapsible: true,
+export const NoFooter = NoFooterTemplate.bind({})
+NoFooter.args = {
+  ...defaultProps,
 }

package/src/components/filter/filterSettings.vue

@@ -628,7 +628,7 @@
         return selectedDate >= currentDate
       },
       getDatePickerLanguage() {
-        return this.activeLanguage
+        return datePickerLang(this.activeLanguage)
       },
       onDragChange({ data }) {
         this.$emit('on-drag-change', data)

package/src/components/icon/Icons.stories.js

@@ -0,0 +1,31 @@
+import IconCollection from './iconCollection.vue'
+
+export default {
+  title: 'icon',
+  component: IconCollection,
+}
+
+const Template = (args) => ({
+  components: { IconCollection },
+  setup() {
+    return { args }
+  },
+  template: '<IconCollection v-bind="args" />',
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  size: '30px',
+}
+
+export const WithColor = Template.bind({})
+WithColor.args = {
+  size: '30px',
+  color: 'red',
+  hoveredColor: 'crimson',
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  size: '60px',
+}

package/src/components/icon/index.vue

@@ -14,7 +14,6 @@
       :disable-hover="disableHover"
       :fill-type="fillType"
       :hovered-color="hoveredColor"
-      :show-count="showCount"
     >
       <i data-test-id="icon_svg" v-html="icon.html"></i>
     </IconImage>
@@ -114,10 +113,6 @@
       type: Boolean,
       default: false,
     },
-    showCount: {
-      type: Boolean,
-      default: false,
-    },
   })
 
   const Wrapper = styled('div', {
@@ -175,7 +170,6 @@
     animation: String,
     fillType: String,
     disableHover: Boolean,
-    showCount: Boolean,
   }
   const IconImage = styled('div', IconImageAttrs)`
     animation: ${(props) => props.animation};
@@ -186,8 +180,7 @@
       background-color: ${(props) =>
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-      border-radius: ${(props) =>
-        props.showCount ? '8px 0 0  8px' : props.backgroundColor ? '8px' : '0'};
+      border-radius: ${(props) => (props.backgroundColor ? '8px' : '0')};
     }
     svg path:not(.fix) {
       ${({ theme, color, fillType }) =>

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

@@ -68,7 +68,17 @@
             <Icon name="current_variant" size="20px" />
           </IconWrapper>
           <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
-            <Icon cursor="default" name="warning" size="16px" />
+            <InfoText
+              v-if="infoErrorMessage != ''"
+              :align-arrow="infoTextAlign"
+              :app-theme="appTheme"
+              button-type="error"
+              data-test-id="info_text_message"
+              icon-name="warning"
+              :size="fontSize ? fontSize : '16px'"
+              :text="infoErrorMessage"
+            />
+            <Icon v-else cursor="default" name="warning" size="16px" />
           </IconWrapper>
           <IconWrapper
             v-if="iconName && !hasError && inputType !== 'password'"
@@ -148,10 +158,10 @@
   }
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
+      props.noBorder
         ? 'none'
+        : props.isError
+        ? '1px solid ' + props.theme.colors.red
         : props.borderColor
         ? props.theme.colors[props.borderColor]
           ? '1px solid ' + props.theme.colors[props.borderColor]
@@ -410,6 +420,11 @@
         default: '',
         type: String,
       },
+      infoErrorMessage: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     data() {
       return {

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

@@ -56,7 +56,7 @@
   const InputContainer = styled('input', inputAttrs)`
     border: 1px solid ${(props) => props.theme.colors.grey4};
     padding: ${(props) =>
-      props.isFilter ? '8px 30px 8px 10px' : '11px 30px 11px 10px'};
+      props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
     border-radius: 4px;
     font-size: 13px;
     color: ${(props) => props.theme.colors.black};

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

@@ -8,7 +8,9 @@
     <InputWrapper
       :align-items="alignItems"
       :has-label="!!label && label.length > 0"
+      :min-width="minWidth"
       :no-relative="noRelative"
+      :text-center="textCenter"
     >
       <LabelWrapper
         v-if="label"
@@ -43,7 +45,9 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark'
+            buttonBgColor
+              ? buttonBgColor
+              : colorMode == 'dark'
               ? 'transparentBlack1'
               : colorMode == 'transparent'
               ? 'transparent'
@@ -72,6 +76,7 @@
           :show-border="showBorder"
           :show-disabled-background="showDisabledBackground"
           :table-padding-left="tablePaddingLeft"
+          :text-center="textCenter"
           @click="toggleDropdown"
           @keydown="onKeyDown"
         >
@@ -109,7 +114,12 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret class="caret_dropdown" :color-mode="colorMode">
+          <Caret
+            v-if="showCaret"
+            class="caret_dropdown"
+            :color-mode="colorMode"
+            @click.stop="toggleCaretDropdown"
+          >
             <Icon
               v-if="isDropdownOpen"
               :color="
@@ -133,7 +143,7 @@
           </Caret>
         </SelectButton>
         <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
-          <Component
+          <component
             :is="shouldUseTeleport ? 'Teleport' : 'div'"
             :to="shouldUseTeleport ? 'body' : undefined"
           >
@@ -181,14 +191,13 @@
                     }
                   : undefined
               "
-              @click.stop
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
             >
               <slot name="dropdown"></slot>
             </SelectDropdown>
-          </Component>
+          </component>
         </DropdownWrapper>
       </SelectButtonWrapper>
     </InputWrapper>
@@ -285,11 +294,13 @@
     selectWidth: String,
     optionWidth: String,
     noRelative: Boolean,
+    textCenter: Boolean,
   }
   const Container = styled('div', inputProps)`
     width: ${(props) => props.selectWidth};
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
     display: inline-block;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
   `
 
   const LabelWrapperAttrs = { infoTextMessage: Boolean }
@@ -326,6 +337,7 @@
     showDisabledBackground: Boolean,
     colorMode: String,
     isSearchBarVisible: Boolean,
+    textCenter: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -346,7 +358,7 @@
               ? props.tablePaddingLeft
               : props.paddingLeft
           }`};
-    text-align: left;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
     min-height: ${(props) =>
       props.selectHeight
         ? props.selectHeight
@@ -374,7 +386,7 @@
         ? props.theme.colors.grey5
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
-        : props.bgColor};
+        : props.bgColor} !important;
     color: ${(props) =>
       props.colorMode === 'transparent'
         ? props.theme.colors.white
@@ -455,6 +467,7 @@
   const inputAttrs = {
     alignItems: String,
     hasLabel: Boolean,
+    minWidth: String,
     noRelative: Boolean,
   }
   const InputWrapper = styled('div', inputAttrs)`
@@ -662,6 +675,16 @@
         type: String,
         required: false,
       },
+      showCaret: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      textCenter: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       isFixedDropdownPosition: {
         type: Boolean,
         required: false,
@@ -898,14 +921,14 @@
       },
       clickOutside(event) {
         const dropdownRef = this.$refs.dropdown
+        // we need to prevent closing on selecting an option, because in the case of
+        // a disabled option, we don't want to close the dropdown
         if (!this.isClickOutsideActive) return
         if (
           this.$refs.select.$el == event.target ||
           this.$refs.select.$el.contains(event.target) ||
           event.target.id === 'more-button' ||
-          event.target.closest('.options-container') ||
-          event.target.parentNode === dropdownRef.$el ||
-          dropdownRef.$el.contains(event.target)
+          event.target.parentNode === dropdownRef.$el
         ) {
           return
         } else {

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

@@ -142,11 +142,6 @@
         required: false,
         default: 'inherit',
       },
-      showFullName: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
     },
     emits: ['option-hovered', 'option-selected'],
     data() {