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

package/src/components/filter/index.vue

@@ -1,154 +1,154 @@
 <template>
-  <PageWrapper ref="dropdown">
-    <ParentDropdown
-      :dropdown-text="dropdownText ? dropdownText : 'Default view'"
-      :is-open="isDropdownOpen"
+  <page-wrapper ref="dropdown">
+    <parent-dropdown
       @on-toggle="onToggleDropdown()"
+      :isOpen="isDropdownOpen"
+      :dropdownText="dropdownText ? dropdownText : 'Default view'"
     />
-    <FilterSettings
+    <filter-settings
       v-if="isDropdownOpen"
-      :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()"
+      :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)"
       @on-cancel-view="onCancelSettings()"
-      @on-container-click="onContainerClick()"
       @on-drag-change="$emit('on-drag-change', $event)"
-      @on-filter-change="onFilterChange($event)"
+      @on-apply-current-view="onApplyCurrentView()"
       @on-prevent-close="onPreventClose($event)"
       @on-reset-filters="onResetFilters()"
-      @on-save-new-view="$emit('on-save-new-view')"
-      @on-view-delete="onViewDelete($event)" 
-      @on-view-select="onViewSelect($event)"
+      @on-container-click="onContainerClick()"
+      :hasActiveView="hasActiveView"
+      :activeView="activeView"
+      :activeLanguage="activeLanguage"
+      :settingsTranslations="settingsTranslations"
     />
-  </PageWrapper>
+  </page-wrapper>
 </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: '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
-      }
+export default {
+  name: 'filter-component',
+  components: {
+    parentDropdown,
+    PageWrapper,
+    filterSettings
+  },
+  props: {
+    filterData: {
+      required: true
     },
-    data() {
-      return {
-        isDropdownOpen: false,
-        activeFilter: null,
-        preventOutsideClick: false
-      }
+    dropdownText: {
+      required: false
+    },
+    filterViews: {
+      required: true
+    },
+    activeView: {
+      required: false,
+      default: null
+    },
+    buttonText: {
+      required: false
     },
-    watch: {
-      closeDropdown(newVal) {
-        if (newVal) {
-          this.isDropdownOpen = 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
       }
     },
-    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')
+    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')
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.clickOutside)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.clickOutside)
+  },
+  watch: {
+    closeDropdown(newVal) {
+      if (newVal) {
+        this.isDropdownOpen = false
       }
     }
   }
+}
 </script>

package/src/components/filter/parentDropdown.vue

@@ -1,37 +1,34 @@
 <template>
-  <PageWrapper @click="$emit('on-toggle')">
-    <IconWrapper>
-      <Icon
-        name="settings"
-        size="18px"
-      />
-    </IconWrapper>
-    <TitleWrapper :is-open="isOpen">
-      <TitleText>
+  <page-wrapper @click="$emit('on-toggle')">
+    <icon-wrapper>
+      <icon name="settings" size="18px" />
+    </icon-wrapper>
+    <title-wrapper :isOpen="isOpen">
+      <title-text>
         {{ dropdownText }}
-      </TitleText>
-      <ArrowWrapper>
-        <Icon
+      </title-text>
+      <arrow-wrapper>
+        <icon
+          @click.stop="$emit('on-toggle')"
           :name="isOpen ? 'arrow_up' : 'arrow_down'"
           size="12px"
-          @click.stop="$emit('on-toggle')"
         />
-      </ArrowWrapper>
-    </TitleWrapper>
-  </PageWrapper>
+      </arrow-wrapper>
+    </title-wrapper>
+  </page-wrapper>
 </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;
@@ -40,8 +37,8 @@
   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;
@@ -49,18 +46,18 @@
   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;
 
@@ -70,25 +67,25 @@
   }
 `
 
-  export default {
-    name: 'ParentDropdown',
-    components: {
-      PageWrapper,
-      Icon,
-      IconWrapper,
-      TitleWrapper,
-      TitleText,
-      ArrowWrapper
+export default {
+  name: 'parent-dropdown',
+  components: {
+    PageWrapper,
+    Icon,
+    IconWrapper,
+    TitleWrapper,
+    TitleText,
+    ArrowWrapper
+  },
+  props: {
+    isOpen: {
+      required: true,
+      default: false
     },
-    props: {
-      isOpen: {
-        required: true,
-        default: false
-      },
-      dropdownText: {
-        required: true,
-        default: 'View'
-      }
+    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,34 +1,31 @@
 <template>
-  <Wrapper>
-    <IconWrapper
-      v-for="iconItem in iconList"
-      :key="iconItem.name"
-    >
+  <wrapper>
+    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
       <div>
-        <RCIcon
-          :color="color"
-          :hovered-color="hoveredColor"
+        <icon
           :name="iconItem.name"
           :size="size"
+          :hoveredColor="hoveredColor"
+          :color="color"
         />
       </div>
       <h3>{{ iconItem.name }}</h3>
-    </IconWrapper>
-  </Wrapper>
+    </icon-wrapper>
+  </wrapper>
 </template>
 
 <script>
-  import RCIcon from './index.vue'
-  import styled from 'vue3-styled-components'
+import icon 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;
@@ -38,34 +35,34 @@
   text-align: center;
   margin: 10px;
 `
-  export default {
-    name: 'CollectionComponent',
-    components: { RCIcon, IconWrapper, Wrapper },
-    props: {
-      size: { required: false },
-      color: { required: false },
-      hoveredColor: { required: false }
-    },
-    data() {
-      return {
-        iconList: []
-      }
-    },
+export default {
+  name: 'collectionComponent',
+  components: { icon, 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>