@eturnity/eturnity_reusable_components 7.4.3 → 7.4.4

package/src/components/filter/index.vue

@@ -1,132 +1,143 @@
-<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()"
-      :hasActiveView="hasActiveView"
-      :activeView="activeView"
-      :activeLanguage="activeLanguage"
-      :settingsTranslations="settingsTranslations"
-    />
-  </page-wrapper>
-</template>
-
-<script>
-import styled from 'vue-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
-    }
-  },
-  data() {
-    return {
-      isDropdownOpen: false,
-      activeFilter: null,
-      preventOutsideClick: false
-    }
-  },
-  methods: {
-    onToggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen
-    },
-    clickOutside(event) {
-      if (
-        !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.$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)
-  }
-}
-</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 'vue-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
+    }
+  },
+  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) {
+      const target = event.target
+      if (
+        !this.$refs.dropdown.$el.contains(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.$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)
+  }
+}
+</script>

package/src/components/filter/parentDropdown.vue

@@ -1,91 +1,91 @@
-<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.native.stop="$emit('on-toggle')"
-          :name="isOpen ? 'arrow_up' : 'arrow_down'"
-          size="12px"
-        />
-      </arrow-wrapper>
-    </title-wrapper>
-  </page-wrapper>
-</template>
-
-<script>
-import styled from 'vue-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>
+<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.native.stop="$emit('on-toggle')"
+          :name="isOpen ? 'arrow_up' : 'arrow_down'"
+          size="12px"
+        />
+      </arrow-wrapper>
+    </title-wrapper>
+  </page-wrapper>
+</template>
+
+<script>
+import styled from 'vue-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/iconCollection.vue

@@ -1,68 +1,68 @@
-<template>
-  <wrapper>
-    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
-      <div>
-        <icon
-          :name="iconItem.name"
-          :size="size"
-          :hoveredColor="hoveredColor"
-          :color="color"
-        />
-      </div>
-      <h3>{{ iconItem.name }}</h3>
-    </icon-wrapper>
-  </wrapper>
-</template>
-
-<script>
-import icon from './index.vue'
-import styled from 'vue-styled-components'
-
-const Wrapper = styled.div`
-  display: block;
-  text-align: center;
-  justify-items: center;
-  width: 100%;
-  background-color: #ccc;
-`
-const IconWrapper = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-  background-color: white;
-  border-radius: 6px;
-  padding: 10px;
-  width: 220px;
-  text-align: center;
-  margin: 10px;
-`
-export default {
-  name: 'collection',
-  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$/))
-  },
-
-  methods: {
-    importAll(r) {
-      r.keys().forEach((key) =>
-        this.iconList.push({
-          pathLong: r(key),
-          pathShort: key,
-          name: key.replace('.svg', '').replace('./', '')
-        })
-      )
-    }
-  }
-}
-</script>
+<template>
+  <wrapper>
+    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
+      <div>
+        <icon
+          :name="iconItem.name"
+          :size="size"
+          :hoveredColor="hoveredColor"
+          :color="color"
+        />
+      </div>
+      <h3>{{ iconItem.name }}</h3>
+    </icon-wrapper>
+  </wrapper>
+</template>
+
+<script>
+import icon from './index.vue'
+import styled from 'vue-styled-components'
+
+const Wrapper = styled.div`
+  display: block;
+  text-align: center;
+  justify-items: center;
+  width: 100%;
+  background-color: #ccc;
+`
+const IconWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  background-color: white;
+  border-radius: 6px;
+  padding: 10px;
+  width: 220px;
+  text-align: center;
+  margin: 10px;
+`
+export default {
+  name: 'collection',
+  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$/))
+  },
+
+  methods: {
+    importAll(r) {
+      r.keys().forEach((key) =>
+        this.iconList.push({
+          pathLong: r(key),
+          pathShort: key,
+          name: key.replace('.svg', '').replace('./', '')
+        })
+      )
+    }
+  }
+}
+</script>