@eturnity/eturnity_reusable_components 6.42.1-EPDM-3013.6 → 6.42.2-EPDM-6921.0

package/src/components/filter/index.vue

@@ -1,132 +0,0 @@
-<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>

package/src/components/filter/parentDropdown.vue

@@ -1,91 +0,0 @@
-<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>