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

package/src/components/filter/index.vue

@@ -1,154 +1,154 @@
-<template>
-  <PageWrapper ref="dropdown">
-    <ParentDropdown
-      :dropdown-text="dropdownText ? dropdownText : 'Default view'"
-      :is-open="isDropdownOpen"
-      @on-toggle="onToggleDropdown()"
-    />
-    <FilterSettings
-      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()"
-      @on-cancel-view="onCancelSettings()"
-      @on-container-click="onContainerClick()"
-      @on-drag-change="$emit('on-drag-change', $event)"
-      @on-filter-change="onFilterChange($event)"
-      @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)"
-    />
-  </PageWrapper>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import ParentDropdown from './parentDropdown'
-  import FilterSettings from './filterSettings'
-
-  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
-      }
-    },
-    data() {
-      return {
-        isDropdownOpen: false,
-        activeFilter: null,
-        preventOutsideClick: false
-      }
-    },
-    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>
+<template>
+  <page-wrapper ref="dropdown">
+    <parent-dropdown
+      @on-toggle="onToggleDropdown()"
+      :isOpen="isDropdownOpen"
+      :dropdownText="dropdownText ? dropdownText : 'Default view'"
+    />
+    <filter-settings
+      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)"
+      @on-cancel-view="onCancelSettings()"
+      @on-drag-change="$emit('on-drag-change', $event)"
+      @on-apply-current-view="onApplyCurrentView()"
+      @on-prevent-close="onPreventClose($event)"
+      @on-reset-filters="onResetFilters()"
+      @on-container-click="onContainerClick()"
+      :hasActiveView="hasActiveView"
+      :activeView="activeView"
+      :activeLanguage="activeLanguage"
+      :settingsTranslations="settingsTranslations"
+    />
+  </page-wrapper>
+</template>
+
+<script>
+import styled from 'vue3-styled-components'
+import parentDropdown from './parentDropdown'
+import filterSettings from './filterSettings'
+
+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
+      }
+    },
+    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,94 +1,91 @@
-<template>
-  <PageWrapper @click="$emit('on-toggle')">
-    <IconWrapper>
-      <Icon
-        name="settings"
-        size="18px"
-      />
-    </IconWrapper>
-    <TitleWrapper :is-open="isOpen">
-      <TitleText>
-        {{ dropdownText }}
-      </TitleText>
-      <ArrowWrapper>
-        <Icon
-          :name="isOpen ? 'arrow_up' : 'arrow_down'"
-          size="12px"
-          @click.stop="$emit('on-toggle')"
-        />
-      </ArrowWrapper>
-    </TitleWrapper>
-  </PageWrapper>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import Icon from '../icon'
-
-  const PageWrapper = styled.div`
-  display: grid;
-  grid-template-columns: auto auto;
-  cursor: pointer;
-`
-
-  const IconWrapper = styled.div`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  border-radius: 4px 0px 0px 4px;
-  padding: 6px;
-`
-
-  const TitleAttrs = { isOpen: Boolean }
-  const TitleWrapper = styled('div', TitleAttrs)`
-  display: grid;
-  grid-template-columns: auto auto;
-  align-items: center;
-  justify-items: center;
-  grid-gap: 10px;
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  background-color: ${(props) =>
-  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`
-  font-size: 13px;
-`
-
-  const ArrowWrapper = styled.div`
-  display: grid;
-  align-items: center;
-
-  div {
-    height: auto !important;
-    min-height: unset;
-  }
-`
-
-  export default {
-    name: 'ParentDropdown',
-    components: {
-      PageWrapper,
-      Icon,
-      IconWrapper,
-      TitleWrapper,
-      TitleText,
-      ArrowWrapper
-    },
-    props: {
-      isOpen: {
-        required: true,
-        default: false
-      },
-      dropdownText: {
-        required: true,
-        default: 'View'
-      }
-    }
-  }
-</script>
+<template>
+  <page-wrapper @click="$emit('on-toggle')">
+    <icon-wrapper>
+      <icon name="settings" size="18px" />
+    </icon-wrapper>
+    <title-wrapper :isOpen="isOpen">
+      <title-text>
+        {{ dropdownText }}
+      </title-text>
+      <arrow-wrapper>
+        <icon
+          @click.stop="$emit('on-toggle')"
+          :name="isOpen ? 'arrow_up' : 'arrow_down'"
+          size="12px"
+        />
+      </arrow-wrapper>
+    </title-wrapper>
+  </page-wrapper>
+</template>
+
+<script>
+import styled from 'vue3-styled-components'
+import Icon from '../icon'
+
+const PageWrapper = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  cursor: pointer;
+`
+
+const IconWrapper = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px 0px 0px 4px;
+  padding: 6px;
+`
+
+const TitleAttrs = { isOpen: Boolean }
+const TitleWrapper = styled('div', TitleAttrs)`
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  justify-items: center;
+  grid-gap: 10px;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  background-color: ${(props) =>
+    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`
+  font-size: 13px;
+`
+
+const ArrowWrapper = styled.div`
+  display: grid;
+  align-items: center;
+
+  div {
+    height: auto !important;
+    min-height: unset;
+  }
+`
+
+export default {
+  name: 'parent-dropdown',
+  components: {
+    PageWrapper,
+    Icon,
+    IconWrapper,
+    TitleWrapper,
+    TitleText,
+    ArrowWrapper
+  },
+  props: {
+    isOpen: {
+      required: true,
+      default: false
+    },
+    dropdownText: {
+      required: true,
+      default: 'View'
+    }
+  }
+}
+</script>

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

@@ -1,41 +1,41 @@
-import IconCollection from './iconCollection.vue'
-
-export default {
-  title: 'icon',
-  component: IconCollection
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  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" />'
-
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<icon
-  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-  //   color="red"
-  //   hoveredColor="blue"
-  //   size="60px" by default, this is 30px
-  // />
-})
-
-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'
-}
+import iconCollection from './iconCollection.vue'
+
+export default {
+  title: 'icon',
+  component: iconCollection
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  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" />'
+
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+})
+
+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/iconCache.js

@@ -1,23 +1,23 @@
-const iconCache = {}
-
-export const fetchIcon = async(fileName) => {
-  if (iconCache[fileName]) {
-    return iconCache[fileName]
-  }
-
-  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
-  const fetchUrl = new URL(
-    `../../assets/svgIcons/${fileName}.svg`,
-    import.meta.url
-  ).href
-
-  try {
-    const response = await fetch(fetchUrl)
-    const rawFile = await response.text()
-    iconCache[fileName] = rawFile
-
-    return rawFile
-  } catch (error) {
-    console.error(`Failed to load ${fileName}.svg`)
-  }
-}
+const iconCache = {}
+
+export const fetchIcon = async (fileName) => {
+  if (iconCache[fileName]) {
+    return iconCache[fileName]
+  }
+
+  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
+  const fetchUrl = new URL(
+    `../../assets/svgIcons/${fileName}.svg`,
+    import.meta.url
+  ).href
+
+  try {
+    const response = await fetch(fetchUrl)
+    const rawFile = await response.text()
+    iconCache[fileName] = rawFile
+
+    return rawFile
+  } catch (error) {
+    console.error(`Failed to load ${fileName}.svg`)
+  }
+}