@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0

package/src/components/rangeSlider/index.vue

@@ -11,50 +11,50 @@
         <VerticalLabel>{{ label.name }}</VerticalLabel>
         <BarSlider>
           <Bar
+            :data-id="`slider_bar_${dataLocation}_${label.id}`"
             @click.native.stop="
               onBarRightClick({ event: $event, label, type: 'add' })
             "
-            :data-id="`slider_bar_${dataLocation}_${label.id}`"
           >
             <SliderWrapper>
               <Slider
                 v-for="(bar, index) in label.selectedTariffs"
-                :dataId="`slider_bar_item_${dataLocation}_${label.id}_${bar.name}`"
                 :key="bar.id"
-                :draggable="!disabled"
-                :resizable="!disabled"
                 :color="
                   hasOverlap && OverlapId.includes(label.id)
                     ? '#ff5656'
                     : bar.color
                 "
-                :minWidth="minWidth"
-                :min="bar.min"
+                :data-id="`slider_bar_item_${dataLocation}_${label.id}_${bar.name}`"
+                :draggable="!disabled"
                 :max="bar.max"
-                :z="index"
+                :min="bar.min"
+                :min-width="minWidth"
+                :resizable="!disabled"
                 :step="step"
-                :stepCount="stepCount"
-                :subStepCount="subStepCount"
-                @dragStop="
+                :step-count="stepCount"
+                :sub-step-count="subStepCount"
+                :z="index"
+                @activated="onActivateBar({ item: bar })"
+                @click.native.stop="
+                  onBarTariffClick({ item: bar, type: 'delete', label })
+                "
+                @deactivated="onDeactivateBar()"
+                @drag-stop="
                   onChange('drag', {
                     itemId: bar.id,
                     parentId: bar.parentId,
                     entityId: label.id,
-                    ...$event
+                    ...$event,
                   })
                 "
-                @resizeStop="
+                @resize-stop="
                   onChange('resize', {
                     itemId: bar.id,
                     entityId: label.id,
-                    ...$event
+                    ...$event,
                   })
                 "
-                @click.native.stop="
-                  onBarTariffClick({ item: bar, type: 'delete', label })
-                "
-                @activated="onActivateBar({ item: bar })"
-                @deactivated="onDeactivateBar()"
               >
                 <template #mr>
                   <HandleIcon />
@@ -66,10 +66,10 @@
             </SliderWrapper>
           </Bar>
           <Ruler>
-            <RulerRule v-for="n in stepCount" :key="n"></RulerRule>
+            <RulerRule v-for="n in stepCount" :key="n" />
           </Ruler>
           <SubRuler>
-            <RulerSubRule v-for="n in subStepCount" :key="n"></RulerSubRule>
+            <RulerSubRule v-for="n in subStepCount" :key="n" />
           </SubRuler>
           <ErrorMessage
             v-if="!canOverlap && hasOverlap && OverlapId.includes(label.id)"
@@ -79,13 +79,13 @@
         </BarSlider>
       </BarWrapper>
     </BarContainer>
-    <bar-options-container
+    <BarOptionsContainer
       v-if="showBarOptions"
-      :top="barOptionsPosition.y"
-      :left="barOptionsPosition.x"
       ref="barDropdown"
+      :left="barOptionsPosition.x"
+      :top="barOptionsPosition.y"
     >
-      <bar-item-container
+      <BarItemContainer
         v-for="item in barOptionsList"
         :key="item.id"
         @click="
@@ -93,143 +93,143 @@
         "
       >
         <AddIcon />
-        <bar-item-text>{{ item.name }}</bar-item-text>
-      </bar-item-container>
-    </bar-options-container>
+        <BarItemText>{{ item.name }}</BarItemText>
+      </BarItemContainer>
+    </BarOptionsContainer>
   </RangeSliderContainer>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
-import handleSVG from '../../assets/svgIcons/handle.svg'
-import add from '../../assets/svgIcons/add_icon.svg'
-
-import SliderComponent from './Slider'
-
-const wrapperAttrs = { width: String, height: String }
-const SliderWrapper = styled('div', wrapperAttrs)`
-  position: relative;
-  display: flex;
-  height: ${(props) => props.height || '24px'};
-  width: ${(props) => props.width || '100%'};
-`
-
-const sliderAttrs = { color: String, draggable: Boolean }
-const Slider = styled(SliderComponent, sliderAttrs)`
-  cursor: ${(props) => (props.draggable ? 'pointer' : 'not-allowed')};
-  opacity: 0.7;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: unset !important;
-  background-color: ${(props) => props.color};
-`
-
-const ErrorMessage = styled.p`
-  color: ${(props) => props.theme.colors.red};
-  font-style: italic;
-  font-size: 13px;
-  margin-top: 5px;
-`
-
-const Bar = styled.div`
-  display: flex;
-  margin-bottom: -30px;
-  margin-left: 1px;
-  background-color: #f6faff;
-  width: 100%;
-  background-color: ${(props) => props.theme.colors.gray1};
-`
-
-const Ruler = styled.div`
-  margin: 10px 0px -5px 0px;
-  display: flex;
-  overflow: hidden;
-`
-
-const RulerRule = styled.div`
-  border-left: solid 1px ${(props) => props.theme.colors.grey2};
-  border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-  padding: 10px 0px;
-
-  &:last-child {
-    border-right: solid 1px ${(props) => props.theme.colors.grey2};
-  }
-`
-
-const SubRuler = styled.div`
-  margin: -7px 0px -5px 0px;
-  display: flex;
-`
-
-const RulerSubRule = styled.div`
-  border-left: solid 1px ${(props) => props.theme.colors.grey2};
-  border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-  padding: 3px 0px;
-
-  &:last-child {
-    border-right: solid 1px ${(props) => props.theme.colors.grey2};
-  }
-
-  &:nth-child(odd) {
-    margin-top: -5px;
-    padding: 5px 0px;
-  }
-`
-
-const BarSlider = styled.div`
-  width: 100%;
-`
-
-const BarContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-const BarWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin: 20px 0px;
-  align-items: center;
-`
-
-const RangeSliderContainer = styled.div`
-  display: flex;
-  position: relative;
-  padding: 20px 10px;
-  flex-direction: column;
-  user-select: none;
-  width: 100%;
-`
-
-const Labels = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0px;
-  margin: 10px -100px 0px 100px;
-  width: calc(100% - 100px);
-`
-
-const Label = styled.div`
-  font-size: 80%;
-  display: flex;
-  width: 1px;
-  justify-content: center;
-`
-
-const VerticalLabel = styled.div`
-  text-align: left;
-  min-width: 100px;
-  font-size: 13px;
-`
+  import styled from 'vue3-styled-components'
+  import handleSVG from '../../assets/svgIcons/handle.svg'
+  import add from '../../assets/svgIcons/add_icon.svg'
+
+  import SliderComponent from './Slider'
+
+  const wrapperAttrs = { width: String, height: String }
+  const SliderWrapper = styled('div', wrapperAttrs)`
+    position: relative;
+    display: flex;
+    height: ${(props) => props.height || '24px'};
+    width: ${(props) => props.width || '100%'};
+  `
+
+  const sliderAttrs = { color: String, draggable: Boolean }
+  const Slider = styled(SliderComponent, sliderAttrs)`
+    cursor: ${(props) => (props.draggable ? 'pointer' : 'not-allowed')};
+    opacity: 0.7;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: unset !important;
+    background-color: ${(props) => props.color};
+  `
+
+  const ErrorMessage = styled.p`
+    color: ${(props) => props.theme.colors.red};
+    font-style: italic;
+    font-size: 13px;
+    margin-top: 5px;
+  `
+
+  const Bar = styled.div`
+    display: flex;
+    margin-bottom: -30px;
+    margin-left: 1px;
+    background-color: #f6faff;
+    width: 100%;
+    background-color: ${(props) => props.theme.colors.gray1};
+  `
+
+  const Ruler = styled.div`
+    margin: 10px 0px -5px 0px;
+    display: flex;
+    overflow: hidden;
+  `
+
+  const RulerRule = styled.div`
+    border-left: solid 1px ${(props) => props.theme.colors.grey2};
+    border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: 10px 0px;
+
+    &:last-child {
+      border-right: solid 1px ${(props) => props.theme.colors.grey2};
+    }
+  `
+
+  const SubRuler = styled.div`
+    margin: -7px 0px -5px 0px;
+    display: flex;
+  `
+
+  const RulerSubRule = styled.div`
+    border-left: solid 1px ${(props) => props.theme.colors.grey2};
+    border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: 3px 0px;
+
+    &:last-child {
+      border-right: solid 1px ${(props) => props.theme.colors.grey2};
+    }
 
-const AddIcon = styled(add)`
+    &:nth-child(odd) {
+      margin-top: -5px;
+      padding: 5px 0px;
+    }
+  `
+
+  const BarSlider = styled.div`
+    width: 100%;
+  `
+
+  const BarContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+  `
+
+  const BarWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    margin: 20px 0px;
+    align-items: center;
+  `
+
+  const RangeSliderContainer = styled.div`
+    display: flex;
+    position: relative;
+    padding: 20px 10px;
+    flex-direction: column;
+    user-select: none;
+    width: 100%;
+  `
+
+  const Labels = styled.div`
+    display: flex;
+    justify-content: space-between;
+    padding: 0px;
+    margin: 10px -100px 0px 100px;
+    width: calc(100% - 100px);
+  `
+
+  const Label = styled.div`
+    font-size: 80%;
+    display: flex;
+    width: 1px;
+    justify-content: center;
+  `
+
+  const VerticalLabel = styled.div`
+    text-align: left;
+    min-width: 100px;
+    font-size: 13px;
+  `
+
+  const AddIcon = styled(add)`
     width: 33px;
     height: 29px;
     fill: black
@@ -237,281 +237,281 @@ const AddIcon = styled(add)`
     margin-top: -10px;
 `
 
-const HandleIcon = styled(handleSVG)`
-  width: 13px;
-  min-width: 0;
-  margin: -6px;
-`
-
-const BarOptionAttrs = { top: Number, left: Number }
-const BarOptionsContainer = styled('div', BarOptionAttrs)`
-  display: grid;
-  position: fixed;
-  z-index: 9999;
-  border-radius: 4px;
-  background-color: ${(props) => props.theme.colors.white};
-  padding: 6px 10px;
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  top: ${(props) => props.top + 'px'};
-  left: ${(props) => props.left + 'px'};
-`
-
-const BarItemContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 12px;
-  align-items: center;
-  cursor: pointer;
-  padding: 6px 10px;
-  border-radius: 4px;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.lightGray};
-  }
-`
-
-const BarItemText = styled.div`
-  font-size: 13px;
-`
-
-export default {
-  name: 'RangeSlider',
-  props: {
-    dataLocation: { type: String, default: '' },
-    tariffItems: { type: Array, default: () => [] },
-    labels: { type: Array, default: () => [] },
-    rangeMargin: { type: Number, default: 1 },
-    step: { type: Number, default: 1 },
-    minWidth: { type: Number, default: 1 },
-    canOverlap: { type: Boolean, default: true },
-    disabled: { type: Boolean, default: false }
-  },
-  components: {
-    Bar,
-    Label,
-    Labels,
-    Ruler,
-    Slider,
-    AddIcon,
-    SubRuler,
-    BarSlider,
-    RulerRule,
-    HandleIcon,
-    BarWrapper,
-    ErrorMessage,
-    RulerSubRule,
-    BarContainer,
-    SliderWrapper,
-    VerticalLabel,
-    RangeSliderContainer,
-    BarOptionsContainer,
-    BarItemContainer,
-    BarItemText
-  },
-  data() {
-    return {
-      showBarOptions: false,
-      barOptionsPosition: { x: 0, y: 0 },
-      barOptionsList: [],
-      barOptionsType: null, // can be "add" or "delete"
-      activeLabel: null,
-      activeItem: null,
-      OverlapId: [],
-      hasOverlap: false
+  const HandleIcon = styled(handleSVG)`
+    width: 13px;
+    min-width: 0;
+    margin: -6px;
+  `
+
+  const BarOptionAttrs = { top: Number, left: Number }
+  const BarOptionsContainer = styled('div', BarOptionAttrs)`
+    display: grid;
+    position: fixed;
+    z-index: 9999;
+    border-radius: 4px;
+    background-color: ${(props) => props.theme.colors.white};
+    padding: 6px 10px;
+    border: 1px solid ${(props) => props.theme.colors.grey4};
+    top: ${(props) => props.top + 'px'};
+    left: ${(props) => props.left + 'px'};
+  `
+
+  const BarItemContainer = styled.div`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 12px;
+    align-items: center;
+    cursor: pointer;
+    padding: 6px 10px;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.lightGray};
     }
-  },
-  computed: {
-    maximum() {
-      if (!this.labels.length) return
-
-      return this.topLabels.at(-1)
+  `
+
+  const BarItemText = styled.div`
+    font-size: 13px;
+  `
+
+  export default {
+    name: 'RangeSlider',
+    components: {
+      Bar,
+      Label,
+      Labels,
+      Ruler,
+      Slider,
+      AddIcon,
+      SubRuler,
+      BarSlider,
+      RulerRule,
+      HandleIcon,
+      BarWrapper,
+      ErrorMessage,
+      RulerSubRule,
+      BarContainer,
+      SliderWrapper,
+      VerticalLabel,
+      RangeSliderContainer,
+      BarOptionsContainer,
+      BarItemContainer,
+      BarItemText,
     },
-    minimum() {
-      if (!this.labels.length) return
-
-      return this.topLabels[0]
+    props: {
+      dataLocation: { type: String, default: '' },
+      tariffItems: { type: Array, default: () => [] },
+      labels: { type: Array, default: () => [] },
+      rangeMargin: { type: Number, default: 1 },
+      step: { type: Number, default: 1 },
+      minWidth: { type: Number, default: 1 },
+      canOverlap: { type: Boolean, default: true },
+      disabled: { type: Boolean, default: false },
     },
-    topLabels() {
-      if (!this.labels.length) return
-      const labels = this.labels.find((label) => label.placement === 'top')
-
-      return labels ? labels.value : []
-    },
-    leftLabels() {
-      if (!this.labels.length) return
-      const labels = this.labels.find((label) => label.placement === 'left')
-      return labels ? labels.value : []
+    data() {
+      return {
+        showBarOptions: false,
+        barOptionsPosition: { x: 0, y: 0 },
+        barOptionsList: [],
+        barOptionsType: null, // can be "add" or "delete"
+        activeLabel: null,
+        activeItem: null,
+        OverlapId: [],
+        hasOverlap: false,
+      }
     },
-    stepCount() {
-      let labels = this.topLabels || []
+    computed: {
+      maximum() {
+        if (!this.labels.length) return
+
+        return this.topLabels.at(-1)
+      },
+      minimum() {
+        if (!this.labels.length) return
+
+        return this.topLabels[0]
+      },
+      topLabels() {
+        if (!this.labels.length) return
+        const labels = this.labels.find((label) => label.placement === 'top')
+
+        return labels ? labels.value : []
+      },
+      leftLabels() {
+        if (!this.labels.length) return
+        const labels = this.labels.find((label) => label.placement === 'left')
+        return labels ? labels.value : []
+      },
+      stepCount() {
+        let labels = this.topLabels || []
+
+        if (labels.length) {
+          return labels.length - 1
+        }
 
-      if (labels.length) {
-        return labels.length - 1
-      }
+        return Math.floor((this.maximum - this.minimum) / this.step)
+      },
+      subStepCount() {
+        let labels = this.topLabels || []
+
+        if (labels.length && this.step) {
+          return (this.maximum - this.minimum) / this.step
+        }
 
-      return Math.floor((this.maximum - this.minimum) / this.step)
+        return 0
+      },
     },
-    subStepCount() {
-      let labels = this.topLabels || []
+    watch: {
+      labels(newVal, oldVal) {
+        const overlapContainer = []
+
+        //check items for overlap
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          const labels = newVal.find((label) => label.placement === 'left')
+
+          if (labels) {
+            labels.value.forEach((label) => {
+              label.selectedTariffs.forEach((tariff) => {
+                const hasOverlap = this.checkOverlap(
+                  tariff,
+                  label.selectedTariffs
+                )
+
+                if (hasOverlap) overlapContainer.push(label.id)
+              })
+            })
+          }
 
-      if (labels.length && this.step) {
-        return (this.maximum - this.minimum) / this.step
-      }
+          const hasOverlap = overlapContainer.length > 0
 
-      return 0
-    }
-  },
-  methods: {
-    onChange(type, value) {
-      this.$emit(type, value)
-    },
-    checkOverlap(value, tariffs) {
-      // Check if the tariffs overlap
-      const min = parseFloat(value.min)
-      const max = parseFloat(value.max)
-
-      return tariffs.some((tariff) => {
-        if (tariff.id === value.itemId || tariff.id === value.id) return false
-
-        return (
-          min === tariff.min ||
-          max === tariff.max ||
-          (min > tariff.min && min < tariff.max) ||
-          (max > tariff.min && max < tariff.max) ||
-          (min < tariff.min && max > tariff.max)
-        )
-      })
-    },
-    barOptionLabel(value) {
-      if (this.barOptionsType === 'add')
-        return `${this.$gettext('Add')} ${value}`
+          if (!hasOverlap) {
+            this.OverlapId = []
+          } else {
+            this.OverlapId = [...new Set(overlapContainer)]
+          }
 
-      return `${this.$gettext('Remove')} ${value}`
-    },
-    onActivateBar({ item }) {
-      this.$emit('activate')
-      this.activeItem = item
-      document.addEventListener('keydown', this.onKeyDownDelete)
+          this.hasOverlap = hasOverlap
+          this.$emit('has-overlap', hasOverlap)
+        }
+      },
     },
-    onDeactivateBar() {
-      this.$emit('deactivate')
-      this.activeItem = null
+    beforeDestroy() {
+      // Remove the global click event listener to prevent memory leaks
+      document.removeEventListener('click', this.handleOutsideClick)
       document.removeEventListener('keydown', this.onKeyDownDelete)
     },
-    onKeyDownDelete(event) {
-      // Check if the pressed key is the Delete or Backspace key
-      if (
-        (event.key === 'Delete' || event.key === 'Backspace') &&
-        this.activeItem
-      ) {
-        this.$emit('on-bar-tariff-click', {
-          type: 'delete',
-          item: this.activeItem,
-          label: this.activeLabel
+    methods: {
+      onChange(type, value) {
+        this.$emit(type, value)
+      },
+      checkOverlap(value, tariffs) {
+        // Check if the tariffs overlap
+        const min = parseFloat(value.min)
+        const max = parseFloat(value.max)
+
+        return tariffs.some((tariff) => {
+          if (tariff.id === value.itemId || tariff.id === value.id) return false
+
+          return (
+            min === tariff.min ||
+            max === tariff.max ||
+            (min > tariff.min && min < tariff.max) ||
+            (max > tariff.min && max < tariff.max) ||
+            (min < tariff.min && max > tariff.max)
+          )
         })
+      },
+      barOptionLabel(value) {
+        if (this.barOptionsType === 'add')
+          return `${this.$gettext('Add')} ${value}`
+
+        return `${this.$gettext('Remove')} ${value}`
+      },
+      onActivateBar({ item }) {
+        this.$emit('activate')
+        this.activeItem = item
+        document.addEventListener('keydown', this.onKeyDownDelete)
+      },
+      onDeactivateBar() {
+        this.$emit('deactivate')
         this.activeItem = null
-      }
-    },
-    onBarTariffClick({ item, type, label }) {
-      if (this.disabled) return
-
-      this.$emit('on-bar-tariff-click', {
-        type,
-        item,
-        label
-      })
-
-      this.activeLabel = label
-      this.barOptionsType = type
-      this.showBarOptions = false
-    },
-    setBarOptions(bar) {
-      this.barOptionsList = []
+        document.removeEventListener('keydown', this.onKeyDownDelete)
+      },
+      onKeyDownDelete(event) {
+        // Check if the pressed key is the Delete or Backspace key
+        if (
+          (event.key === 'Delete' || event.key === 'Backspace') &&
+          this.activeItem
+        ) {
+          this.$emit('on-bar-tariff-click', {
+            type: 'delete',
+            item: this.activeItem,
+            label: this.activeLabel,
+          })
+          this.activeItem = null
+        }
+      },
+      onBarTariffClick({ item, type, label }) {
+        if (this.disabled) return
 
-      if (this.barOptionsType === 'add') {
-        this.tariffItems.forEach((item) => {
-          if (item.name && item.name.length) {
-            this.barOptionsList.push(item)
-          }
-        })
-      } else {
-        // add based on the index in the chart.
-        this.barOptionsList.push({
-          name: bar.name,
-          id: bar.id
+        this.$emit('on-bar-tariff-click', {
+          type,
+          item,
+          label,
         })
-      }
-    },
-    onBarRightClick({ event, label, type, bar }) {
-      if (this.disabled) return
-
-      // type can be "add", "delete"
-      // if "add", show all tariffItems for the group
-      // if "delete", only show the delete with the tariff name
-      event.preventDefault()
-      this.activeLabel = label
-      this.barOptionsType = type
-      this.setBarOptions(bar)
-
-      if (this.barOptionsList.length) {
-        this.showBarOptions = true
-        this.barOptionsPosition = { x: event.clientX, y: event.clientY }
-        document.addEventListener('click', this.handleOutsideClick)
-      } else {
-        this.showBarOptions = false
-      }
-    },
-    handleOutsideClick(event) {
-      // Check if the click occurred outside the dropdown
-      if (
-        this.$refs.barDropdown &&
-        !this.$refs.barDropdown.$el.contains(event.target)
-      ) {
-        // Hide the dropdown
+
+        this.activeLabel = label
+        this.barOptionsType = type
         this.showBarOptions = false
-        // Remove the global click event listener
-        document.removeEventListener('click', this.handleOutsideClick)
-      }
-    }
-  },
-  beforeDestroy() {
-    // Remove the global click event listener to prevent memory leaks
-    document.removeEventListener('click', this.handleOutsideClick)
-    document.removeEventListener('keydown', this.onKeyDownDelete)
-  },
-  watch: {
-    labels(newVal, oldVal) {
-      const overlapContainer = []
-
-      //check items for overlap
-      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-        const labels = newVal.find((label) => label.placement === 'left')
-
-        if (labels) {
-          labels.value.forEach((label) => {
-            label.selectedTariffs.forEach((tariff) => {
-              const hasOverlap = this.checkOverlap(
-                tariff,
-                label.selectedTariffs
-              )
-
-              if (hasOverlap) overlapContainer.push(label.id)
-            })
+      },
+      setBarOptions(bar) {
+        this.barOptionsList = []
+
+        if (this.barOptionsType === 'add') {
+          this.tariffItems.forEach((item) => {
+            if (item.name && item.name.length) {
+              this.barOptionsList.push(item)
+            }
+          })
+        } else {
+          // add based on the index in the chart.
+          this.barOptionsList.push({
+            name: bar.name,
+            id: bar.id,
           })
         }
-
-        const hasOverlap = overlapContainer.length > 0
-
-        if (!hasOverlap) {
-          this.OverlapId = []
+      },
+      onBarRightClick({ event, label, type, bar }) {
+        if (this.disabled) return
+
+        // type can be "add", "delete"
+        // if "add", show all tariffItems for the group
+        // if "delete", only show the delete with the tariff name
+        event.preventDefault()
+        this.activeLabel = label
+        this.barOptionsType = type
+        this.setBarOptions(bar)
+
+        if (this.barOptionsList.length) {
+          this.showBarOptions = true
+          this.barOptionsPosition = { x: event.clientX, y: event.clientY }
+          document.addEventListener('click', this.handleOutsideClick)
         } else {
-          this.OverlapId = [...new Set(overlapContainer)]
+          this.showBarOptions = false
         }
-
-        this.hasOverlap = hasOverlap
-        this.$emit('has-overlap', hasOverlap)
-      }
-    }
+      },
+      handleOutsideClick(event) {
+        // Check if the click occurred outside the dropdown
+        if (
+          this.$refs.barDropdown &&
+          !this.$refs.barDropdown.$el.contains(event.target)
+        ) {
+          // Hide the dropdown
+          this.showBarOptions = false
+          // Remove the global click event listener
+          document.removeEventListener('click', this.handleOutsideClick)
+        }
+      },
+    },
   }
-}
 </script>