@eturnity/eturnity_reusable_components 7.45.2-EPDM-10609.1 → 7.45.2-EPDM-11314.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)
-    },
-    beforeUnmount() {
-      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>
+  <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)
+    },
+    beforeUnmount() {
+      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,91 +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>
+  <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>

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.mjs

@@ -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`)
+  }
+}