@eturnity/eturnity_reusable_components 7.24.3-EPDM-10576.1 → 7.24.3-EPDM-11320.0

package/src/components/filter/index.vue

@@ -1,154 +1,154 @@
 <template>
-  <page-wrapper ref="dropdown">
-    <parent-dropdown
+  <PageWrapper ref="dropdown">
+    <ParentDropdown
+      :dropdown-text="dropdownText ? dropdownText : 'Default view'"
+      :is-open="isDropdownOpen"
       @on-toggle="onToggleDropdown()"
-      :isOpen="isDropdownOpen"
-      :dropdownText="dropdownText ? dropdownText : 'Default view'"
     />
-    <filter-settings
+    <FilterSettings
       v-if="isDropdownOpen"
-      :filterData="filterData"
-      :filterViews="filterViews"
-      :buttonText="buttonText"
-      @on-view-select="onViewSelect($event)"
-      @on-view-delete="onViewDelete($event)"
-      @on-save-new-view="$emit('on-save-new-view')"
-      @on-filter-change="onFilterChange($event)"
+      :active-language="activeLanguage"
+      :active-view="activeView"
+      :button-text="buttonText"
+      :filter-data="filterData"
+      :filter-views="filterViews"
+      :has-active-view="hasActiveView"
+      :settings-translations="settingsTranslations"
+      @on-apply-current-view="onApplyCurrentView()"
       @on-cancel-view="onCancelSettings()"
+      @on-container-click="onContainerClick()"
       @on-drag-change="$emit('on-drag-change', $event)"
-      @on-apply-current-view="onApplyCurrentView()"
+      @on-filter-change="onFilterChange($event)"
       @on-prevent-close="onPreventClose($event)"
       @on-reset-filters="onResetFilters()"
-      @on-container-click="onContainerClick()"
-      :hasActiveView="hasActiveView"
-      :activeView="activeView"
-      :activeLanguage="activeLanguage"
-      :settingsTranslations="settingsTranslations"
+      @on-save-new-view="$emit('on-save-new-view')"
+      @on-view-delete="onViewDelete($event)" 
+      @on-view-select="onViewSelect($event)"
     />
-  </page-wrapper>
+  </PageWrapper>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
-import parentDropdown from './parentDropdown'
-import filterSettings from './filterSettings'
+  import styled from 'vue3-styled-components'
+  import ParentDropdown from './parentDropdown'
+  import FilterSettings from './filterSettings'
 
-const PageWrapper = styled.div`
+  const PageWrapper = styled.div`
   position: relative;
 `
 
-export default {
-  name: 'filter-component',
-  components: {
-    parentDropdown,
-    PageWrapper,
-    filterSettings
-  },
-  props: {
-    filterData: {
-      required: true
-    },
-    dropdownText: {
-      required: false
-    },
-    filterViews: {
-      required: true
-    },
-    activeView: {
-      required: false,
-      default: null
-    },
-    buttonText: {
-      required: false
-    },
-    hasActiveView: {
-      required: false
-    },
-    activeLanguage: {
-      required: false,
-      default: 'en-us'
-    },
-    settingsTranslations: {
-      required: false
-    },
-    closeDropdown: {
-      required: false
-    }
-  },
-  data() {
-    return {
-      isDropdownOpen: false,
-      activeFilter: null,
-      preventOutsideClick: false
-    }
-  },
-  methods: {
-    onToggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen
-    },
-    onContainerClick() {
-      // due to newer versions of Chrome (121), contains() is not always working.
-      // So, we need to add this so that the filter modal won't close
-      // when we open a dropdown. EPDM-9732
-      this.preventOutsideClick = true
-      setTimeout(() => {
-        this.preventOutsideClick = false
-      }, 100)
-    },
-    clickOutside(event) {
-      if (
-        this.$refs.dropdown &&
-        !this.$refs.dropdown.$el.contains(event.target) &&
-        !this.preventOutsideClick
-      ) {
-        this.isDropdownOpen = false
+  export default {
+    name: 'FilterComponent',
+    components: {
+      ParentDropdown,
+      PageWrapper,
+      FilterSettings
+    },
+    props: {
+      filterData: {
+        required: true
+      },
+      dropdownText: {
+        required: false
+      },
+      filterViews: {
+        required: true
+      },
+      activeView: {
+        required: false,
+        default: null
+      },
+      buttonText: {
+        required: false
+      },
+      hasActiveView: {
+        required: false
+      },
+      activeLanguage: {
+        required: false,
+        default: 'en-us'
+      },
+      settingsTranslations: {
+        required: false
+      },
+      closeDropdown: {
+        required: false
       }
     },
-    onPreventClose(value) {
-      setTimeout(() => {
-        this.preventOutsideClick = value
-      }, 100)
-    },
-    onFilterChange(data) {
-      // this.preventOutsideClick = true is needed for when the user clicks on the calendar icon on the date range
-      // because clicking the calendar does not trigger the @focus
-      this.preventOutsideClick = true
-      this.$emit('on-filter-settings-change', data)
-      this.onPreventClose(false)
-    },
-    onCancelSettings() {
-      this.onToggleDropdown()
-      this.$emit('on-cancel-view')
-    },
-    onViewSelect(item) {
-      this.onToggleDropdown()
-      this.$emit('on-filter-view-select', item)
-    },
-    onViewDelete(item) {
-      this.onToggleDropdown()
-      this.$emit('on-filter-view-delete', item)
+    data() {
+      return {
+        isDropdownOpen: false,
+        activeFilter: null,
+        preventOutsideClick: false
+      }
     },
-    onApplyCurrentView() {
-      this.onToggleDropdown()
-      this.$emit('on-apply-current-view')
+    watch: {
+      closeDropdown(newVal) {
+        if (newVal) {
+          this.isDropdownOpen = false
+        }
+      }
     },
-    onResetFilters() {
-      this.onToggleDropdown()
-      this.$emit('on-reset-filters')
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.clickOutside)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.clickOutside)
-  },
-  watch: {
-    closeDropdown(newVal) {
-      if (newVal) {
-        this.isDropdownOpen = false
+    mounted() {
+      document.addEventListener('click', this.clickOutside)
+    },
+    beforeDestroy() {
+      document.removeEventListener('click', this.clickOutside)
+    },
+    methods: {
+      onToggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen
+      },
+      onContainerClick() {
+        // due to newer versions of Chrome (121), contains() is not always working.
+        // So, we need to add this so that the filter modal won't close
+        // when we open a dropdown. EPDM-9732
+        this.preventOutsideClick = true
+        setTimeout(() => {
+          this.preventOutsideClick = false
+        }, 100)
+      },
+      clickOutside(event) {
+        if (
+          this.$refs.dropdown &&
+          !this.$refs.dropdown.$el.contains(event.target) &&
+          !this.preventOutsideClick
+        ) {
+          this.isDropdownOpen = false
+        }
+      },
+      onPreventClose(value) {
+        setTimeout(() => {
+          this.preventOutsideClick = value
+        }, 100)
+      },
+      onFilterChange(data) {
+        // this.preventOutsideClick = true is needed for when the user clicks on the calendar icon on the date range
+        // because clicking the calendar does not trigger the @focus
+        this.preventOutsideClick = true
+        this.$emit('on-filter-settings-change', data)
+        this.onPreventClose(false)
+      },
+      onCancelSettings() {
+        this.onToggleDropdown()
+        this.$emit('on-cancel-view')
+      },
+      onViewSelect(item) {
+        this.onToggleDropdown()
+        this.$emit('on-filter-view-select', item)
+      },
+      onViewDelete(item) {
+        this.onToggleDropdown()
+        this.$emit('on-filter-view-delete', item)
+      },
+      onApplyCurrentView() {
+        this.onToggleDropdown()
+        this.$emit('on-apply-current-view')
+      },
+      onResetFilters() {
+        this.onToggleDropdown()
+        this.$emit('on-reset-filters')
       }
     }
   }
-}
 </script>

package/src/components/filter/parentDropdown.vue

@@ -1,34 +1,37 @@
 <template>
-  <page-wrapper @click="$emit('on-toggle')">
-    <icon-wrapper>
-      <icon name="settings" size="18px" />
-    </icon-wrapper>
-    <title-wrapper :isOpen="isOpen">
-      <title-text>
+  <PageWrapper @click="$emit('on-toggle')">
+    <IconWrapper>
+      <Icon
+        name="settings"
+        size="18px"
+      />
+    </IconWrapper>
+    <TitleWrapper :is-open="isOpen">
+      <TitleText>
         {{ dropdownText }}
-      </title-text>
-      <arrow-wrapper>
-        <icon
-          @click.stop="$emit('on-toggle')"
+      </TitleText>
+      <ArrowWrapper>
+        <Icon
           :name="isOpen ? 'arrow_up' : 'arrow_down'"
           size="12px"
+          @click.stop="$emit('on-toggle')"
         />
-      </arrow-wrapper>
-    </title-wrapper>
-  </page-wrapper>
+      </ArrowWrapper>
+    </TitleWrapper>
+  </PageWrapper>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
+  import styled from 'vue3-styled-components'
+  import Icon from '../icon'
 
-const PageWrapper = styled.div`
+  const PageWrapper = styled.div`
   display: grid;
   grid-template-columns: auto auto;
   cursor: pointer;
 `
 
-const IconWrapper = styled.div`
+  const IconWrapper = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
@@ -37,8 +40,8 @@ const IconWrapper = styled.div`
   padding: 6px;
 `
 
-const TitleAttrs = { isOpen: Boolean }
-const TitleWrapper = styled('div', TitleAttrs)`
+  const TitleAttrs = { isOpen: Boolean }
+  const TitleWrapper = styled('div', TitleAttrs)`
   display: grid;
   grid-template-columns: auto auto;
   align-items: center;
@@ -46,18 +49,18 @@ const TitleWrapper = styled('div', TitleAttrs)`
   grid-gap: 10px;
   border: 1px solid ${(props) => props.theme.colors.grey4};
   background-color: ${(props) =>
-    props.isOpen ? props.theme.colors.grey5 : props.theme.colors.white};
+  props.isOpen ? props.theme.colors.grey5 : props.theme.colors.white};
   border-left: none;
   border-radius: 0px 4px 4px 0px;
   padding: 6px 14px;
   user-select: none;
 `
 
-const TitleText = styled.div`
+  const TitleText = styled.div`
   font-size: 13px;
 `
 
-const ArrowWrapper = styled.div`
+  const ArrowWrapper = styled.div`
   display: grid;
   align-items: center;
 
@@ -67,25 +70,25 @@ const ArrowWrapper = styled.div`
   }
 `
 
-export default {
-  name: 'parent-dropdown',
-  components: {
-    PageWrapper,
-    Icon,
-    IconWrapper,
-    TitleWrapper,
-    TitleText,
-    ArrowWrapper
-  },
-  props: {
-    isOpen: {
-      required: true,
-      default: false
+  export default {
+    name: 'ParentDropdown',
+    components: {
+      PageWrapper,
+      Icon,
+      IconWrapper,
+      TitleWrapper,
+      TitleText,
+      ArrowWrapper
     },
-    dropdownText: {
-      required: true,
-      default: 'View'
+    props: {
+      isOpen: {
+        required: true,
+        default: false
+      },
+      dropdownText: {
+        required: true,
+        default: 'View'
+      }
     }
   }
-}
 </script>

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

@@ -1,17 +1,17 @@
-import iconCollection from './iconCollection.vue'
+import IconCollection from './iconCollection.vue'
 
 export default {
   title: 'icon',
-  component: iconCollection
+  component: IconCollection
   // argTypes: {},
 }
 
 const Template = (args, { argTypes }) => ({
   // Components used in your story `template` are defined in the `components` object
-  components: { iconCollection },
+  components: { IconCollection },
   // The story's `args` need to be mapped into the template through the `setup()` method
   props: Object.keys(argTypes),
-  template: '<iconCollection v-bind="$props" />'
+  template: '<IconCollection v-bind="$props" />'
 
   // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
   //  How to use:

package/src/components/icon/iconCache.js

@@ -1,6 +1,6 @@
 const iconCache = {}
 
-export const fetchIcon = async (fileName) => {
+export const fetchIcon = async(fileName) => {
   if (iconCache[fileName]) {
     return iconCache[fileName]
   }

package/src/components/icon/iconCollection.vue

@@ -1,31 +1,34 @@
 <template>
-  <wrapper>
-    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
+  <Wrapper>
+    <IconWrapper
+      v-for="iconItem in iconList"
+      :key="iconItem.name"
+    >
       <div>
-        <icon
+        <RCIcon
+          :color="color"
+          :hovered-color="hoveredColor"
           :name="iconItem.name"
           :size="size"
-          :hoveredColor="hoveredColor"
-          :color="color"
         />
       </div>
       <h3>{{ iconItem.name }}</h3>
-    </icon-wrapper>
-  </wrapper>
+    </IconWrapper>
+  </Wrapper>
 </template>
 
 <script>
-import icon from './index.vue'
-import styled from 'vue3-styled-components'
+  import RCIcon from './index.vue'
+  import styled from 'vue3-styled-components'
 
-const Wrapper = styled.div`
+  const Wrapper = styled.div`
   display: block;
   text-align: center;
   justify-items: center;
   width: 100%;
   background-color: #ccc;
 `
-const IconWrapper = styled.div`
+  const IconWrapper = styled.div`
   display: inline-flex;
   flex-direction: column;
   background-color: white;
@@ -35,34 +38,34 @@ const IconWrapper = styled.div`
   text-align: center;
   margin: 10px;
 `
-export default {
-  name: 'collectionComponent',
-  components: { icon, IconWrapper, Wrapper },
-  props: {
-    size: { required: false },
-    color: { required: false },
-    hoveredColor: { required: false }
-  },
-  data() {
-    return {
-      iconList: []
-    }
-  },
+  export default {
+    name: 'CollectionComponent',
+    components: { RCIcon, IconWrapper, Wrapper },
+    props: {
+      size: { required: false },
+      color: { required: false },
+      hoveredColor: { required: false }
+    },
+    data() {
+      return {
+        iconList: []
+      }
+    },
 
-  mounted() {
-    this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
-  },
+    mounted() {
+      this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
+    },
 
-  methods: {
-    importAll(r) {
-      r.keys().forEach((key) =>
-        this.iconList.push({
-          pathLong: r(key),
-          pathShort: key,
-          name: key.replace('.svg', '').replace('./', '')
-        })
-      )
+    methods: {
+      importAll(r) {
+        r.keys().forEach((key) =>
+          this.iconList.push({
+            pathLong: r(key),
+            pathShort: key,
+            name: key.replace('.svg', '').replace('./', '')
+          })
+        )
+      }
     }
   }
-}
 </script>